*{box-sizing:border-box}html{background:#FFFFFF}html.tgr{background:#111111}body{margin:0;background:#FFFFFF}a,a:hover{color:#111111}
.vak{container-type:inline-size;container-name:vak;background:#FFFFFF;font-family:'Schibsted Grotesk',sans-serif;color:#111111;font-size:17px;line-height:1.55;position:relative;overflow-x:clip;-webkit-tap-highlight-color:transparent}
.vak h1,.vak h2,.vak h3,.vak p{margin:0}
.vak button{font-family:inherit}
.in{max-width:1376px;margin:0 auto;padding:0 48px}
.lab{font-weight:500;font-size:14px;line-height:1.3;color:#6B6B6B}
.h2{font-weight:700;font-size:clamp(34px,calc(34px + (100cqw - 900px) * .0407),56px);line-height:1;letter-spacing:-.03em;text-wrap:balance;margin-top:16px}
.bg{font-size:20px;line-height:1.5;letter-spacing:-.005em}.sm{font-size:14px;line-height:1.45}.mu{color:#6B6B6B}
.gl{font-weight:500;font-size:32px;line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
.h3{font-weight:500;font-size:28px;line-height:1.15;letter-spacing:-.015em;text-wrap:balance}
.sec{padding:160px 0}
.two{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px}
.two.h{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:16px;height:56px;padding:0 8px 0 28px;border:0;border-radius:999px;background:#111111;color:#FFFFFF;font-weight:500;font-size:17px;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .12s,color .35s cubic-bezier(.4,0,.2,1) .06s}
a.btn,a.btn:hover{color:#FFFFFF}
.btn:before{content:"";position:absolute;z-index:0;right:8px;top:50%;width:40px;height:40px;margin-top:-20px;border-radius:50%;background:#1F8FFF;transition:transform .4s cubic-bezier(.65,0,.35,1)}
.btn .bt-t{position:relative;z-index:1}
.btn .ar{position:relative;z-index:1;flex:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#111111;transition:color .35s cubic-bezier(.4,0,.2,1) .06s}
.btn .ar svg{display:block;width:18px;height:18px;transition:transform .2s cubic-bezier(.22,1,.36,1)}
.btn.c{height:44px;gap:12px;padding:0 6px 0 20px;font-size:15px}.btn.c:before,.btn.c .ar{width:32px;height:32px}.btn.c:before{right:6px;margin-top:-16px}.btn.c .ar svg{width:16px;height:16px}
.btn.dk{background:#FFFFFF;color:#111111}
.btn:active{transform:scale(.97)}.btn:disabled{cursor:default}
a.tl{position:relative;display:inline-flex;align-items:center;min-height:44px;font-size:17px;line-height:1.55;color:#111111;text-decoration:none}
a.tl:before,a.tl:after{content:"";position:absolute;left:0;right:0;pointer-events:none}
a.tl:before{bottom:calc(50% - 11px);height:1px;background:currentColor;transition:opacity .2s}
a.tl:after{bottom:calc(50% - 11.5px);height:2px;background:#1F8FFF;transform:scaleX(0);transform-origin:0 50%;transition:transform .5s cubic-bezier(.22,1,.36,1)}
a.tl.d,.aa a.tl,.aa a.tl:hover,a.tl.d:hover{color:#FFFFFF}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #1F8FFF;outline-offset:3px}
.hd{position:sticky;top:0;z-index:50;height:72px;background:#FFFFFF;transition:background-color .6s,box-shadow .6s,backdrop-filter .6s,-webkit-backdrop-filter .6s}
.hd:before,.hd:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .6s}.hd:before{background:rgba(255,255,255,.85)}.hd:after{background:rgba(17,17,17,.85)}
.hd.sc{background:transparent;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 1px 2px rgba(17,17,17,.06),0 8px 24px -8px rgba(17,17,17,.12)}
.hd.sc:before{opacity:1}.hd.sc.ondk:before{opacity:0}.hd.sc.ondk:after{opacity:1}
.lgw img.lw{position:absolute;left:0;top:0;opacity:0}.hd.ondk .lgw img.lg{opacity:0}.hd.ondk .lgw img.lw{opacity:1}
.hd.ondk a.nv{color:#FFFFFF}.hd.ondk .btn.c{background:#FFFFFF;color:#111111}
.hd.sw:before,.hd.sw:after,.hd.sw .lgw img{transition:opacity .3s cubic-bezier(.65,0,.35,1)}.hd.sw a.nv,.hd.sw .btn.c{transition:transform .12s,color 0s linear .15s,background-color 0s linear .15s}
.hd .in{display:flex;align-items:center;height:100%;gap:32px}
.nav{margin-left:auto;display:flex;align-items:center;gap:32px}
a.nv{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;font-size:15px;font-weight:500;line-height:1.55;color:#111111;text-decoration:none}
a.nv:after{content:"";position:absolute;left:0;right:0;bottom:calc(50% - 15px);height:2px;background:#1F8FFF;transform:scaleX(0);transform-origin:0 50%;transition:transform .5s cubic-bezier(.22,1,.36,1)}
a.nv[aria-current=location]:after,a.nv[aria-current=page]:after{transform:none}
.an{scroll-margin-top:88px}
a.wm{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.lgw{position:relative;display:block;height:34px}.lgw img{display:block;height:100%;width:auto}
.lgi{position:absolute;inset:0;display:block}.lgi svg{display:block;height:100%;width:auto;overflow:visible}
html.tglg header.hd .lgw img{opacity:0}
.hero{position:relative;height:744px;height:clamp(560px,calc(100vh - 72px - 40px),744px);z-index:3}
.shd{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 70%,transparent 100%),linear-gradient(90deg,#000 0,#000 40%,rgba(0,0,0,.18) 78%,rgba(0,0,0,.08) 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 70%,transparent 100%),linear-gradient(90deg,#000 0,#000 40%,rgba(0,0,0,.18) 78%,rgba(0,0,0,.08) 100%);mask-composite:intersect}
.col{position:absolute;right:0;top:140px;width:560px;padding:24px 48px 24px 24px;display:flex;flex-direction:column;gap:18px;z-index:2}
@keyframes hblk{from{opacity:0;transform:translateY(34px) scale(.97)}}@keyframes hbtn{from{opacity:0;transform:translateY(18px) scale(.94)}}@keyframes gin{from{opacity:0;transform:translateY(80px)}}
.hw{display:inline-block}.opv-p{display:inline-block}.giant .gwd{display:inline-block}
@media (prefers-reduced-motion:no-preference){.hero .hsub,.hero .col>.bg{animation:hblk 1.1s cubic-bezier(.22,1.2,.36,1) .6s both}.opv-l,.opv-p{opacity:0}.hero .brow{animation:hbtn 1s cubic-bezier(.34,1.5,.64,1) 1.15s both}.giant .gwd{animation:gin 1.2s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(1.4s + var(--w)*.16s)}}
.hsub{font-weight:500;font-size:32px;line-height:1.1;letter-spacing:-.02em;white-space:nowrap}.col .lab{color:#111111}
.brow{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.giant{position:absolute;left:24px;bottom:0;z-index:2;font-weight:700;font-size:min(176px,13.75cqw);line-height:.9;letter-spacing:-.045em;white-space:nowrap}
.opv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.opv-nb{white-space:nowrap}
.opv-w{position:relative;display:inline-block}
.opv-l{display:inline-block;color:#1F8FFF}
.opv-u{position:absolute;left:.02em;right:.02em;top:1.04em;height:.08em;background:#1F8FFF;transform:scaleX(0);transform-origin:0 50%}
.opv-w.opv-ln .opv-u{transform:none;transition:transform .9s cubic-bezier(.7,0,.2,1)}
@media (prefers-reduced-motion:reduce){.opv-w .opv-u{transform:none;transition:none}}
.bg-n{position:relative;display:inline-block}
.bg-n:after{content:"";position:absolute;left:0;right:0;top:1.22em;height:.18em;background:#1F8FFF;transform-origin:0 50%;animation:fill .5s cubic-bezier(.22,1,.36,1) 1.7s backwards}
@media (prefers-reduced-motion:reduce){.bg-n:after{animation:none;transform:none}}
.werk{padding-top:174px}
.wk{display:block;position:relative;margin-top:48px;aspect-ratio:2000/1043;background:#F5F5F7;border-radius:16px;transform-origin:0 0;text-decoration:none}
.wk:after{content:"";position:absolute;inset:0;border-radius:16px;box-shadow:0 40px 80px -24px rgba(17,17,17,.28);opacity:var(--sh,1);pointer-events:none}
.sk{position:absolute;inset:0;z-index:1;background:#F5F5F7;border-radius:16px;padding:3%;display:flex;flex-direction:column;gap:2.5%;opacity:0;transition:opacity .6s cubic-bezier(.65,0,.35,1)}.sk b{display:block;background:#E3E3E6;border-radius:8px}.wk.pre .sk{opacity:1}
.wk img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;object-position:left top;border:0;margin:0;padding:0;border-radius:16px}.wk img.od{display:block}.wk img.om{display:none;object-fit:cover;object-position:center top}
.mus{position:absolute;left:0;top:0;z-index:3;background:#1F8FFF;color:#FFFFFF;border-radius:999px;padding:8px 18px;font-size:16px;font-weight:500;line-height:20px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;transform:translate(-9999px,0)}
.od{display:inline}.om{display:none}
.wkrow{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:48px;align-items:end;margin-top:48px}.wkrow .wk{margin-top:0}
.cap{display:flex;flex-direction:column;gap:14px;align-items:flex-start}.cap-t{font-weight:500;font-size:24px;line-height:1.15;letter-spacing:-.015em}.cap .btn{margin-top:18px}
.wwh{display:flex;justify-content:space-between;align-items:flex-start}
.pview{padding:0 48px}
.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:24px;margin-top:16px}
.pn{position:relative;background:#111111;border-radius:24px;min-height:400px;padding:40px;display:flex;flex-direction:column;justify-content:space-between;gap:32px;color:#FFFFFF;overflow:hidden}
.pn .nr{font-weight:500;font-size:clamp(72px,calc(72px + (100cqw - 900px) * .0889),120px);line-height:.9;letter-spacing:-.04em;color:#FFFFFF}
.pn h3{margin-bottom:12px;color:#FFFFFF;overflow-wrap:normal;word-break:normal;hyphens:none}
.pn p{color:#A1A1A6;max-width:46ch;font-size:18px}
.ill{flex:1;display:flex;align-items:center;min-height:120px}
.il{width:100%;max-width:300px;display:flex;flex-direction:column;gap:10px}
.il .f{display:flex;align-items:center;height:40px;padding:0 14px;border-radius:10px;background:#1D1D1F;border:1px solid #3A3A3C;color:#8E8E93;font-size:14px}.il .f u{text-decoration:none}
.il .pill{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;height:38px;padding:0 22px;border-radius:999px;background:#1F8FFF;color:#FFFFFF;font-size:14px;font-weight:500;font-style:normal}.il .pill.s{height:30px;padding:0 16px;font-size:13px;margin-top:4px}
.il.bars{flex-direction:row;align-items:flex-end;height:120px;gap:10px}.il.bars i{display:block;flex:1;background:#2A2A2C;border-radius:6px 6px 0 0}.il.bars i.b{background:#1F8FFF}
.il.br{background:#1D1D1F;border:1px solid #3A3A3C;border-radius:14px;padding:0;gap:0;overflow:hidden}
.il.br .ab{display:flex;align-items:center;gap:8px;margin:10px;height:30px;padding:0 14px;border-radius:999px;background:#2A2A2C;color:#A1A1A6;font-size:13px}.il.br .lk{display:block;width:8px;height:8px;border-radius:50%;background:#1F8FFF}
.il.br .h{display:block;height:10px;width:70%;border-radius:5px;background:#FFFFFF}
.il.br .r{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;padding:4px 14px 16px}.il.br .im{display:block;min-height:104px;border-radius:8px;background:#2A2A2C}.il.br .tx2{display:flex;flex-direction:column;gap:9px;justify-content:center}
.il .l{display:block;height:6px;border-radius:3px;background:#3A3A3C}.il .l.s{width:60%}
.il.dc{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:340px}.il.dc span{display:flex;align-items:center;justify-content:center;gap:10px;height:60px;border-radius:999px;font-weight:500;font-size:16px;line-height:1;}.il.dc b{font-weight:700}.il.dc .yes{background:#1F8FFF;color:#FFFFFF}.il.dc .no{border:1px solid #3A3A3C;color:#A1A1A6}

.il.doc{background:#1D1D1F;border:1px solid #3A3A3C;border-radius:6px;padding:16px 18px;gap:10px}.il.doc .dh{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:10px;border-bottom:1px solid #3A3A3C;color:#FFFFFF}.il.doc .dh b{font-weight:700;font-size:16px}.il.doc .dh span{color:#8E8E93;font-size:13px}.il.doc .sg{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:6px;padding-top:6px;border-top:1px dashed #3A3A3C}.il.doc .sg svg{display:block;width:96px;height:auto}.il.doc .sg span{color:#8E8E93;font-size:13px}
.pn .tx{min-height:198px}

.pst{display:block;height:4px;margin-bottom:24px}.pst i{display:block;height:100%;width:20%;background:#1F8FFF}
.pn:nth-child(2) .pst i{width:40%}.pn:nth-child(3) .pst i{width:60%}.pn:nth-child(4) .pst i{width:80%}.pn:nth-child(5) .pst i{width:100%}
@media (prefers-reduced-motion:no-preference){
}
.afs-card{margin-top:64px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.afs-t{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:40px;min-height:300px;padding:32px;background:#F5F5F7;border-radius:24px;overflow:hidden;grid-column:span 5}
.afs-t.afs-h,.afs-t.afs-4{grid-column:span 7}
.afs-dk{background:#111111;color:#FFFFFF}.afs-dk .lab{color:#A1A1A6}
.afs-t .gl{max-width:18ch}
.afs-t{min-height:280px;transition:transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .4s}
.afs-h{flex-direction:row;align-items:center;justify-content:space-between;gap:32px}
.afs-x{display:flex;flex-direction:column;gap:20px;align-self:stretch;justify-content:space-between;min-width:0}
.afs-t.afs-g3 .afs-x{gap:48px}
.afs-w2{justify-content:flex-start;gap:24px}.afs-w2 .afs-x{flex-direction:row;justify-content:space-between;align-items:flex-start;gap:24px;align-self:auto}.afs-w2 .gl{text-align:right;max-width:22ch;margin-left:auto}.afs-w2 .wf{flex:1;height:auto;min-height:290px}
.swc{display:flex;flex-direction:column;gap:14px;padding:18px 20px;border-radius:16px;background:#FFFFFF}
.sw-i{position:absolute;opacity:0;width:1px;height:1px}.seg{position:relative;display:grid;grid-template-columns:1fr 1fr;height:54px;padding:4px;border-radius:999px;background:#F5F5F7;cursor:pointer;font-weight:500;font-size:15px}.seg-th{position:absolute;left:4px;top:4px;bottom:4px;width:calc(50% - 4px);border-radius:999px;background:#111111;transition:transform .7s cubic-bezier(.34,1.35,.64,1),background-color .5s}.seg-a,.seg-b{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;transition:color .4s}.seg-a{color:#FFFFFF}.seg-b{color:#6B6B6B}.sw-i:checked~.seg-th{transform:translateX(100%);background:#1F8FFF}.sw-i:checked~.seg-a{color:#6B6B6B}.sw-i:checked~.seg-b{color:#FFFFFF}.sw-i:focus-visible~.seg-th{outline:2px solid #1F8FFF;outline-offset:3px}
.sw-s{position:relative;height:22px;font-size:14px;color:#6B6B6B}.sw-s span{position:absolute;left:0;top:0;transition:opacity .3s,transform .4s cubic-bezier(.22,1,.36,1)}
.sw-s .on{opacity:0;transform:translateY(6px)}.sw-s .off{opacity:1;transform:none}.seg:has(.sw-i:checked)~.sw-s .on{opacity:1;transform:none}.seg:has(.sw-i:checked)~.sw-s .off{opacity:0;transform:translateY(-6px)}
.afs-t.afs-h{display:flex;flex-direction:column;justify-content:space-between;gap:28px}.afs-t.afs-h .afs-x{flex-direction:row;align-items:baseline;justify-content:flex-start;gap:28px;align-self:flex-start;width:100%}.afs-t.afs-h .gl{max-width:none}.afs-t.afs-h .tr{flex:1;align-self:stretch}.dom{flex:none;width:100%;max-width:520px;justify-self:center}.dom-l b{font-size:22px}
.dom-c{position:relative;display:flex;flex-direction:column;gap:14px;padding:28px;border-radius:20px;background:#1D1D1F;border:1px solid #3A3A3C;transform:rotate(-2.5deg);transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
.dom-c .lab{color:#8E8E93}.dom-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}.dom-l li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-top:1px solid #3A3A3C}.dom-l span{color:#A1A1A6;font-size:14px}.dom-l b{font-weight:500;font-size:20px;letter-spacing:-.01em}
.dom-k{position:absolute;right:20px;top:-14px;padding:7px 14px;border-radius:999px;background:#1F8FFF;color:#FFFFFF;font-size:13px;font-weight:500}
.dom-l li{align-items:center}.dom-l .ck{font-style:normal;flex:none;width:26px;height:26px;border-radius:50%;background:#1F8FFF;color:#FFFFFF;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.afs-t:hover .dom-c{transform:rotate(0deg) translateY(-4px)}
@keyframes ckl{0%{opacity:0;transform:scale(.3)}100%{opacity:1;transform:none}}
@keyframes dkl{0%{opacity:0;transform:translateY(10px) scale(.8)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){.afs-js .afs-t:not(.go) .dom-l .ck,.afs-js .afs-t:not(.go) .dom-k{opacity:0}.afs-t.go .dom-l .ck{animation:ckl .8s cubic-bezier(.34,1.7,.64,1) both;animation-delay:.6s}.afs-t.go .dom-l li:nth-child(2) .ck{animation-delay:1.4s}.afs-t.go .dom-k{animation:dkl .9s cubic-bezier(.34,1.7,.64,1) both 2.1s}}
.wf{position:relative;height:290px;border-radius:16px;overflow:hidden;background:#FFF7F4;container-type:inline-size}.wf .fm{top:46px}.wf .fl-cs,.wf .fl-nv{display:none}.wf img{display:block;width:100%;height:100%;object-fit:cover;object-position:left top}
.wf-s{position:absolute;inset:0;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:12px 16px;padding:58px 22px 22px;background:#F5F5F7;transition:opacity 1.2s ease,filter 1.2s ease}.wf-s .h{grid-column:1/3;display:block;height:14px;width:40%;border-radius:7px;background:#E3E3E6}.wf-s .l{display:flex;flex-direction:column;gap:10px;justify-content:center}.wf-s .l b{display:block;height:16px;border-radius:8px;background:#E3E3E6}.wf-s .l b.s{width:60%}.wf-s .p{display:block;height:34px;width:110px;border-radius:999px;background:#E3E3E6}.wf-s .im{display:block;border-radius:16px;background:#E3E3E6}
.afs-t:hover .wf-s{opacity:0;filter:blur(8px)}.wf .wim-bl{opacity:0;transform:translateY(22px) scale(.96)}.afs-t:hover .wf .wim-bl{opacity:1;transform:none}.wf .fl-p{font-size:12px}.wf .fl-hr{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.wf .fl-im{align-self:center;aspect-ratio:4/3;max-height:100%}
.pk-b{position:absolute;left:14px;top:14px;z-index:3;padding:7px 14px;border-radius:999px;background:#111111;color:#FFFFFF;font-size:13px;font-weight:500}
.pk-t{position:absolute;right:14px;top:14px;z-index:3;padding:7px 14px;border-radius:999px;background:#FFFFFF;color:#6B6B6B;font-size:13px;font-weight:500}
.fix{display:flex;align-items:center;gap:32px;flex:none}.fix .av-rg{width:150px;height:150px}.fix .av-rg b{font-size:48px}
.ts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}.ts li{display:flex;align-items:center;gap:12px;height:48px;padding:0 20px 0 16px;border-radius:999px;background:#1D1D1F;border:1px solid #3A3A3C;font-size:15px;font-weight:500;color:#A1A1A6;white-space:nowrap}.ts li span{margin-left:auto;padding-left:16px;font-size:13px;font-weight:400;color:#8E8E93}.ts i{display:block;flex:none;width:10px;height:10px;border-radius:50%;background:#1F8FFF}.ts i.c{background:#FF8A7A}.ts li.ok{color:#FFFFFF}.ts li.ok i{background:#FFFFFF}.ts li.ok{background:#1F8FFF;border-color:#1F8FFF}.ts li.ok span{color:#FFFFFF}
@keyframes tsl{0%{opacity:0;transform:translateX(32px)}100%{opacity:1;transform:none}}
@keyframes rgl{0%{stroke-dashoffset:327}100%{stroke-dashoffset:0}}
@media (prefers-reduced-motion:no-preference){.afs-js .afs-t:not(.go) .ts li{opacity:0}.afs-t.go .ts li{animation:tsl .9s cubic-bezier(.34,1.5,.64,1) both;animation-delay:calc(var(--j)*.9s + .8s)}.afs-t.go .rg{animation:rgl 2.2s cubic-bezier(.22,1,.36,1) both .4s}}
.tr{--tw:110px;position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;width:100%;justify-self:stretch}
.tr-n{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:190px;padding:30px 24px;border-radius:24px;background:#1D1D1F;border:1px solid #3A3A3C;font-size:14px;color:#A1A1A6;transition:background-color .5s,border-color .5s,color .5s}.tr-ic{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;border:1px solid #3A3A3C;font-size:16px;font-weight:700;color:transparent;transition:background-color .4s,border-color .4s,color .3s,transform .6s cubic-bezier(.34,1.8,.64,1)}.tr-ic img{display:block;height:24px;width:auto}
.tr-b em{font-style:normal;font-size:13px;color:#8E8E93;transition:color .5s}.tr-rail{position:relative;height:96px}.tr-line{position:absolute;left:0;right:0;top:50%;border-top:2px dashed #3A3A3C}
.tr-tok{position:absolute;left:0;top:50%;width:var(--tw);height:80px;margin-top:-40px;padding:9px;border-radius:12px;background:#FFFFFF;display:flex;flex-direction:column;gap:6px;box-shadow:0 12px 30px -10px rgba(0,0,0,.6)}
.tk-b{display:block;height:8px;width:60%;border-radius:4px;background:#111111}.tk-l{display:block;height:6px;border-radius:3px;background:#D5D5DA}.tk-l.s{width:70%}.tk-p{display:block;height:12px;width:34px;border-radius:999px;background:#1F8FFF;margin-top:auto}
@keyframes trm{0%{left:0;transform:scale(.9)}12%{transform:scale(1.06)}86%{left:calc(100% - var(--tw));transform:scale(1.04)}100%{left:calc(100% - var(--tw));transform:scale(1)}}
.tr.go .tr-tok{animation:trm 2.2s cubic-bezier(.65,0,.25,1) both}
.tr.go .tr-b,.tr.end .tr-b{background:#1D2A3D;border-color:#1F8FFF;color:#FFFFFF;transition-delay:1.9s}.tr.go .tr-b em,.tr.end .tr-b em{color:#FFFFFF;transition-delay:1.9s}.tr.go .tk,.tr.end .tk{background:#1F8FFF;border-color:#1F8FFF;color:#FFFFFF;transform:scale(1.12);transition-delay:1.9s}
.tr.end .tr-tok{left:calc(100% - var(--tw))}
@media (prefers-reduced-motion:reduce){.tr-n,.tr-ic{transition:none!important}.tr.go .tr-tok{animation:none}}
/* Telefoon en tablet: de twee kaartjes onder elkaar, het document schuift van boven naar beneden (naast elkaar pasten ze niet) */
@container (max-width:899.98px){
.tr{--tw:64px;--th:44px;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 104px auto;gap:0}
.tr-n{flex-direction:row;justify-content:flex-start;gap:14px;min-width:0;padding:16px 18px;border-radius:20px;text-align:left}
.tr-n{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;row-gap:2px;align-items:center}
.tr-n .tr-ic{grid-row:1/3}
.tr-n>span:not(.tr-ic){grid-column:2;grid-row:1;align-self:end;white-space:nowrap}
.tr-n em{grid-column:2;grid-row:2;margin:0;align-self:start;white-space:nowrap;font-size:13px}
.tr-ic{width:40px;height:40px;flex:none}.tr-ic img{height:20px}
.tr-rail{height:104px;align-self:stretch}
.tr-line{left:50%;right:auto;top:0;bottom:0;border-top:0;border-left:2px dashed #3A3A3C}
.tr-tok{left:50%;top:0;width:var(--tw);height:var(--th);margin:0 0 0 calc(var(--tw) / -2);padding:7px;gap:4px;border-radius:9px}
.tk-b{height:6px}.tk-l{height:4px}.tk-p{height:9px;width:24px}
.tr.go .tr-tok{animation-name:trmv}
.tr.end .tr-tok{left:50%;top:calc(100% - var(--th))}
}
@keyframes trmv{0%{top:0;transform:scale(.9)}12%{transform:scale(1.06)}86%{top:calc(100% - var(--th));transform:scale(1.04)}100%{top:calc(100% - var(--th));transform:scale(1)}}
.tl3{display:flex;flex-direction:column;gap:14px;padding:20px;border-radius:16px;background:#FFFFFF}
.tl3-t{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:10px;height:60px}
.tl3-b{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px}.tl3-b i{display:block;border-radius:8px;background:#1F8FFF}
.tl3-a{display:flex;align-items:center;justify-content:center;gap:10px;padding:0 14px;border-radius:14px;background:#111111;color:#FFFFFF;font-weight:500;font-size:15px;white-space:nowrap}.tl3-a svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tl3-l{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:10px;font-size:14px;color:#6B6B6B}.tl3-l span:first-child{padding-left:4px}
@keyframes mfill{from{background:#E3E3E6}}@keyframes mpop{from{opacity:0;transform:scale(.6)}}
@media (prefers-reduced-motion:no-preference){.afs-js .afs-t:not(.go) .tl3-b i{background:#E3E3E6}.afs-js .afs-t:not(.go) .tl3-a{opacity:0}.afs-t.go .tl3-b i{animation:mfill .45s ease both;animation-delay:calc(.5s + var(--n)*.14s)}.afs-t.go .tl3-a{animation:mpop .9s cubic-bezier(.34,1.7,.64,1) both 2.4s}}
.afs-t.afs-4 .fix{flex:none;gap:30px}.afs-t.afs-4 .afs-x{flex:1 1 0;min-width:150px}
.cal{flex:none;width:150px;border-radius:26px;overflow:hidden;background:#1F8FFF;color:#FFFFFF;text-align:center;box-shadow:0 24px 50px -24px rgba(31,143,255,.7)}.cal-t{display:block;padding:12px;background:rgba(17,17,17,.22);font-size:14px;font-weight:500}.cal-n{display:block;font-size:80px;font-weight:700;line-height:1;letter-spacing:-.05em;padding:14px 0 24px}
.stp{position:relative;flex:1;min-width:0}.stp-l{position:absolute;left:19px;top:20px;bottom:20px;width:3px;border-radius:2px;background:#3A3A3C;overflow:hidden;display:flex;flex-direction:column}.stp-l i{display:block;flex:1;background:#1F8FFF;transform-origin:50% 0;will-change:transform}.stp-n em{font-style:normal}
.stp-n{position:relative;display:flex;flex-direction:column;gap:26px}.stp-n span{display:flex;flex-direction:row;align-items:center;gap:16px;font-size:15px;font-weight:500;color:#FFFFFF;white-space:nowrap}
.stp-n u{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#1F8FFF;border:2px solid #1F8FFF;color:#FFFFFF;font-size:16px;font-weight:700;text-decoration:none}
.afs-4{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:16px;align-items:stretch}
.afs-4 .l4{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:24px}.afs-4 .cal{width:170px;margin-left:56px}.afs-4 .gl{max-width:none}
.afs-4 .stp{display:flex;align-items:stretch;padding:8px 0 8px 40px}.afs-4 .stp-n{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:0}.afs-4 .stp-l{left:69px;top:32px;bottom:32px;width:4px}
.afs-4 .stp-n span{gap:20px;font-size:20px;font-weight:500;letter-spacing:-.01em}.afs-4 .stp-n u{width:58px;height:58px;font-size:24px;border-width:3px}
@keyframes seg{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes nd{0%{background:#111111;border-color:#3A3A3C;color:transparent;transform:scale(.6);box-shadow:0 0 0 0 rgba(31,143,255,.55)}45%{background:#1F8FFF;border-color:#1F8FFF;color:#FFFFFF;transform:scale(1.14)}100%{background:#1F8FFF;border-color:#1F8FFF;color:#FFFFFF;transform:scale(1);box-shadow:0 0 0 16px rgba(31,143,255,0)}}
@keyframes lb{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
.afs-js .afs-t:not(.go) .stp-l i{transform:scaleY(0)}.afs-js .afs-t:not(.go) .stp-n u{background:#111111;border-color:#3A3A3C;color:transparent}.afs-js .afs-t:not(.go) .stp-n em{opacity:0}
.afs-t.go .stp-l i{animation:seg .9s cubic-bezier(.65,0,.35,1) both}
.afs-t.go .stp-l i:nth-child(1){animation-delay:.9s}.afs-t.go .stp-l i:nth-child(2){animation-delay:2.2s}
.afs-t.go .stp-n u{animation:nd .9s cubic-bezier(.34,1.4,.64,1) both}.afs-t.go .stp-n em{animation:lb .7s cubic-bezier(.22,1,.36,1) both}
.afs-t.go .stp-n span:nth-child(1) u{animation-delay:.3s}.afs-t.go .stp-n span:nth-child(1) em{animation-delay:.45s}
.afs-t.go .stp-n span:nth-child(2) u{animation-delay:1.75s}.afs-t.go .stp-n span:nth-child(2) em{animation-delay:1.9s}
.afs-t.go .stp-n span:nth-child(3) u{animation-delay:3.05s}.afs-t.go .stp-n span:nth-child(3) em{animation-delay:3.2s}
}
.afs-t:hover,.afs-t.go:hover{transform:translateY(-4px)}
@media (prefers-reduced-motion:reduce){.afs-t,.dom-c,.dom-k,.peek img,.sw-k,.sw-k:after{transition:none!important}}
.av-rg{position:relative;width:128px;height:128px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.av-rg svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}.av-rg circle{fill:none;stroke:#3A3A3C;stroke-width:6}.av-rg .rg{stroke:#1F8FFF;stroke-linecap:round;stroke-dasharray:327;stroke-dashoffset:0}.av-rg b{position:relative;font-weight:700;font-size:40px;line-height:1;letter-spacing:-.03em}.av-rg span{position:relative;font-size:13px;color:#A1A1A6}

@media (prefers-reduced-motion:no-preference){
.afs-js .afs-t:not(.go){opacity:0;transform:translateY(16px)}
.afs-t.go{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.22,1,.36,1) calc(var(--i)*90ms),transform .6s cubic-bezier(.22,1,.36,1) calc(var(--i)*90ms)}
.afs-js .afs-t:not(.go) .rg{stroke-dashoffset:327}
}
.ps0{max-width:44ch}
.ch{display:flex;align-items:center;gap:12px;padding:14px 18px;background:#111111;color:#FFFFFF}.ch .nm{font-weight:500;line-height:1.2}.ch .lab{color:#A1A1A6}.ch .clock{margin-left:auto;background:#1D1D1F;border-radius:999px;padding:8px 14px}.ch .clock span:last-child{color:#FFFFFF}.ch .nm{white-space:nowrap}
[tabindex="-1"]:focus{outline:none}
@media (max-width:419.98px){.ch .clk-l{display:none}.ch .clock{padding:8px 12px}}
.av{display:flex;align-items:center;justify-content:center;flex:none;width:42px;height:42px;border-radius:50%;background:#1D1D1F;border:1px solid #3A3A3C}.av img{display:block;height:22px;width:auto}
.stt{display:flex;align-items:center;gap:6px;font-size:13px;color:#A1A1A6}.stt i{display:block;width:7px;height:7px;border-radius:50%;background:#1F8FFF}
.tm{display:block;margin-top:4px;text-align:right;font-size:12px;line-height:1;opacity:.6}.m.t .tm b{color:#6FB6FF;font-weight:700;opacity:1}
.inb{display:flex;align-items:center;gap:12px;margin:4px 14px 14px;padding:8px 8px 8px 20px;border-radius:999px;background:#FFFFFF;color:#8E8E93;font-size:15px}.snd{margin-left:auto;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#1F8FFF}.snd:after{content:"→";color:#FFFFFF;font-size:18px;line-height:1}
.cms{display:flex;flex-direction:column;gap:12px;padding:22px 18px 18px}
.cms .m{max-width:82%;padding:12px 16px;border-radius:20px}.cms .m.k{align-self:flex-start;background:#FFFFFF;color:#111111;border-bottom-left-radius:6px}.cms .m.t{align-self:flex-end;background:#111111;color:#FFFFFF;border-bottom-right-radius:6px}
.typ{align-self:flex-end;background:#111111;padding:14px 18px;border-radius:20px 20px 6px 20px}.typ div{display:flex;gap:3px;filter:url(#goo)}.typ s{display:block;width:9px;height:9px;border-radius:50%;background:#1F8FFF;text-decoration:none;animation:gl 1.6s cubic-bezier(.45,0,.25,1) infinite}.typ s:nth-child(1){animation-name:gl1}.typ s:nth-child(3){animation-name:gl3}.typ s:nth-child(2){animation-delay:.12s}
@keyframes gl1{0%,100%{transform:translateX(0) scale(1)}40%{transform:translateX(15px) scale(1.2)}70%{transform:translateX(3px) scale(.85)}}
@keyframes gl3{0%,100%{transform:translateX(0) scale(1)}40%{transform:translateX(-15px) scale(1.2)}70%{transform:translateX(-3px) scale(.85)}}
@keyframes gl{0%,100%{transform:scale(1)}40%{transform:scale(1.45)}70%{transform:scale(.8)}}
@media (prefers-reduced-motion:reduce){.typ s{animation:none}}
.wlk{display:flex;flex-wrap:wrap;gap:12px;margin-top:48px}.clock{white-space:nowrap}
.btn.ol{background:#FFFFFF;color:#111111;box-shadow:inset 0 0 0 1px #111111}a.btn.ol,a.btn.ol:hover{color:#111111}
.vak .two.h>.chat{order:-1;justify-self:start;align-self:center}
.stack{display:flex;flex-direction:column;gap:24px;max-width:64ch}
.qa{border-top:1px solid #E3E3E6}.qi{position:relative;border-bottom:1px solid #E3E3E6}
.qb{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;min-height:44px;padding:24px 0;background:none;border:0;color:#111111;text-align:left;cursor:pointer;transition:transform .12s}
.pl{position:relative;flex:none;width:48px;height:48px;border-radius:50%;border:1px solid #E3E3E6;transition:border-color .2s;display:flex;align-items:center;justify-content:center;color:#111111}
.pl:before{content:"";position:absolute;inset:-1px;border-radius:50%;background:#1F8FFF;transform:scale(0);transition:transform .2s cubic-bezier(.22,1,.36,1)}
.pl span{position:relative;display:block;width:14px;height:14px;transition:transform .2s cubic-bezier(.65,0,.35,1)}
.pl span:before,.pl span:after{content:"";position:absolute;background:currentColor}.pl span:before{left:0;right:0;top:6.25px;height:1.5px}.pl span:after{top:0;bottom:0;left:6.25px;width:1.5px}
.qb[aria-expanded=true] .pl{color:#FFFFFF;border-color:#1F8FFF}.qb[aria-expanded=true] .pl:before{transform:none}
.qan{padding:0 0 24px;max-width:56ch;opacity:0;transform:translateY(-6px);transition:opacity .5s,transform .7s cubic-bezier(.22,1,.36,1)}
.qw{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .7s cubic-bezier(.45,0,.25,1),visibility 0s .7s}.qw>div{overflow:hidden;min-height:0}
.qb[aria-expanded=true]+.qw{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .7s cubic-bezier(.45,0,.25,1),visibility 0s}.qb[aria-expanded=true]+.qw .qan{opacity:1;transform:none;transition-delay:.2s}
@media (prefers-reduced-motion:reduce){.qw,.qan{transition:none!important}}
.aa{background:#111111;color:#FFFFFF;padding:160px 0 96px}
.aa .lab,.aa .mu{color:#A1A1A6}
.aag{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:80px;margin-top:64px}
.form{display:flex;flex-direction:column;gap:24px}
.fld{display:flex;flex-direction:column;gap:8px}
.fl{font-size:14px;font-weight:500;line-height:1.45}.hp{font-size:14px;line-height:1.45;color:#A1A1A6}
.inp{display:block;width:100%;height:56px;background:#1D1D1F;border:1px solid #A1A1A6;border-radius:12px;color:#FFFFFF;font:400 16px 'Schibsted Grotesk',sans-serif;padding:0 16px}
textarea.inp{height:auto;min-height:160px;padding:16px;resize:vertical}
.pls{display:flex;flex-wrap:wrap;gap:12px}
.pil{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 24px 0 16px;border:1px solid #A1A1A6;border-radius:999px;background:transparent;color:#FFFFFF;font-weight:500;font-size:16px;cursor:pointer;transition:transform .15s,background-color .25s,color .25s,border-color .25s}
.pil:before{content:"✓";display:flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px;border-radius:50%;border:1px solid #A1A1A6;color:transparent;font-size:13px;font-weight:700;line-height:1;transition:background-color .25s,border-color .25s,color .15s}
.pil[aria-pressed=true]{background:#FFFFFF;color:#111111;border-color:#FFFFFF}.pil[aria-pressed=true]:before{background-color:#1F8FFF;border-color:#1F8FFF;color:#FFFFFF;animation:chk .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes chk{0%{transform:scale(.4) rotate(-40deg)}100%{transform:none}}
.pil:hover:before{border-color:#FFFFFF}.pil{transition:transform .25s cubic-bezier(.34,1.56,.64,1),background-color .25s,color .25s,border-color .25s}.pil:hover{transform:translateY(-2px)}.pil:active{transform:scale(.96)}
.pil:active{transform:scale(.96)}
.rq{color:inherit}
.fsite{animation:fin .4s cubic-bezier(.22,1,.36,1) both}
@keyframes fin{from{opacity:0;transform:translateY(-8px)}}
.tl-kader{margin-top:40px;background:#FFFFFF;color:#111111;border-radius:24px;padding:16px;min-height:420px}
.tl-kader iframe{display:block;width:100%;border:0;transition:height .5s cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){.tl-kader iframe{transition:none}}
.vak .tl-noot{margin:40px 0 0;color:rgba(255,255,255,.85);max-width:56ch}
.sb{display:flex;margin-top:16px}
.nxr{display:flex;gap:16px;border-top:1px solid #6B6B6B;padding:16px 0}
.ft{background:#111111;color:#FFFFFF}
.ft{padding:72px 0 0}
.ft-g{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:clamp(48px,9cqw,140px);align-items:stretch}.ft-l{display:flex;flex-direction:column;justify-content:space-between;gap:40px;min-height:230px}.ft-bt{display:flex;flex-wrap:wrap;gap:12px}.ft-ic{display:flex;gap:12px}
.ic{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;border:1px solid #3A3A3C;color:#FFFFFF;transition:border-color .25s,transform .4s cubic-bezier(.34,1.56,.64,1),background-color .25s}.ic .ico{width:22px;height:22px;position:relative}.ic:hover{background:#1F8FFF;border-color:#1F8FFF;transform:translateY(-3px)}.ic:active{transform:scale(.94)}
.ft-h{font-weight:700;font-size:clamp(34px,4.4cqw,64px);line-height:1;letter-spacing:-.035em}
.ft-c{display:flex;flex-direction:column;align-items:flex-start}.ft-c .lab{display:block;margin-bottom:12px;color:#A1A1A6}
.ft-b{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:48px;padding:20px 0 0;border-top:1px solid #2A2A2C;color:#A1A1A6}.ft-r{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px}
.ft .gw{margin-top:28px;line-height:0;overflow:hidden}.ft .gw img{margin-bottom:-2px}
.gw canvas{display:none;width:100%;aspect-ratio:16669/2060;touch-action:pan-y}.gw.ht-on canvas{display:block}.gw.ht-on .gw-img{display:none}

.ft .mu{color:#A1A1A6}
.flinks{display:flex;flex-wrap:wrap;gap:0 40px;margin-top:16px}.flinks a.tl{gap:10px}.flinks a.tl:before,.flinks a.tl:after{left:28px}
.fmenu{display:flex;flex-wrap:wrap;gap:0 32px;margin-top:24px}.ico.fill{fill:currentColor;stroke:none}.ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.inp[aria-invalid=true]{border-color:#FF8A7A}.er{display:flex;gap:8px;align-items:flex-start;color:#FF8A7A;font-size:14px;line-height:1.45}.er svg{width:16px;height:16px;flex:none;margin-top:2px;fill:none;stroke:#FF8A7A;stroke-width:1.5;stroke-linecap:round}
.kvk{background:#F5F5F7;color:#111111;padding:4px 12px;border-radius:999px}
.fline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:40px}
.gw{margin-top:96px}.gw img{display:block;width:min(780px,61cqw);height:auto}
@container (max-width:899.98px){
.afs-card{margin-top:40px;grid-template-columns:minmax(0,1fr);gap:12px}
.afs-t,.afs-t.afs-h,.afs-t.afs-4{grid-column:auto;min-height:0;padding:24px;gap:28px}.afs-h{flex-direction:column;align-items:stretch}.dom{width:100%}.fix{flex-wrap:wrap}

.vak>*{font-size:16px}.wim-tx{font-size:16px}
.in{padding:0 20px}
.lab{font-size:13px}
.h2{font-size:34px}.bg{font-size:18px}.gl{font-size:24px}.h3{font-size:22px}
.sec{padding:96px 0}
.two,.two.h{grid-template-columns:minmax(0,1fr);gap:32px}
.an{scroll-margin-top:76px}.hd{height:60px}.hd .in{gap:16px}.lgw{height:30px}
.btn{font-size:16px}a.tl{font-size:16px}
.hero{height:auto;display:flex;flex-direction:column;padding:32px 20px 0}
.arrow{display:none}
.vak .giant{position:static;order:2;white-space:normal;font-size:64px;margin:24px 0 40px}
.col{position:static;order:3;width:auto;padding:0;gap:16px}
.werk{padding-top:96px}
.wkrow{display:block;margin-top:40px}.cap{margin-top:32px}.wk{margin:0;aspect-ratio:1091/2000;width:min(100%,calc(70vh*1091/2000));max-height:70vh}
.mus{display:none}.od{display:none}.om{display:inline}.wk img.od{display:none}.wk img.om{display:block}
.wwh .lab:last-child{display:none}
.pview{padding:0 20px}
.panels{grid-template-columns:minmax(0,1fr);gap:12px}
.pn{min-height:0;padding:24px;gap:24px;justify-content:flex-start}.pn .nr{font-size:72px}.ill{flex:none;min-height:110px}.pn .tx{min-height:250px}
.ch .clock{display:flex !important}
.qb{padding:16px 0}
.aa{padding:96px 0 64px}
.aag{grid-template-columns:minmax(0,1fr);gap:64px;margin-top:40px}
.aa .btn.dk{width:100%;justify-content:space-between}
.ft{padding:64px 0 0}.ft-g{grid-template-columns:minmax(0,1fr);gap:40px}.ft-l{min-height:0;gap:40px}.ft-b{margin-top:48px}
.gw{margin-top:48px}.gw img{width:284px;max-width:100%}
}
@media (hover:hover) and (pointer:fine){
.btn:hover:before{transform:scale(16)}.btn:hover,a.btn:hover,.btn.dk:hover,a.btn.dk:hover,.btn.ol:hover,a.btn.ol:hover,.hd.ondk .btn.c:hover,.hd.ondk a.btn.c:hover{color:#FFFFFF;transition:transform .12s,color .35s cubic-bezier(.4,0,.2,1) .06s}.btn:hover .ar{color:#FFFFFF}.btn:hover .ar svg{transform:translateX(4px)}
.btn:disabled:hover:before{transform:none}
a.tl:hover:before{opacity:0}a.tl:hover:after{transform:none}a.nv:hover:after{transform:none}
.wk:hover .mus{opacity:1}
.qb:hover .pl{border-color:#1F8FFF;transform:scale(1.08)}.pl{transition:border-color .2s,transform .4s cubic-bezier(.34,1.56,.64,1)}
.pil:hover{background:#1D1D1F;border-color:#FFFFFF}.pil[aria-pressed=true]:hover{background:#F5F5F7}
.wim-tab:hover{color:#111111}.wim-tab[aria-selected=false]:hover .wim-ar:before{transform:scale(1)}.wim-tab[aria-selected=false]:hover .wim-ar i{color:#FFFFFF}
.pr-pz:hover{color:#6B6B6B}
}
@media (hover:none),(pointer:coarse){a.tl:active,a.nv:active,a.wm:active,.qb:active,.pil:active,.wim-tab:active,.pr-pz:active,.pr-i:active{transform:scale(.97)}}
a.tl,a.nv,a.wm,.pr-pz,.pr-i{transition:transform .12s}
.vak .wsub{margin-top:48px}.wpad,.wkpad{display:none}.pg{position:relative;z-index:1;background:#FFFFFF}
html:not(.tgfx) .cnt{display:none}
.pj-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,auto);gap:16px;margin-top:48px}
.pj-t{display:flex;flex-direction:column;gap:12px;padding:32px;border-radius:24px;background:#F5F5F7;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.pj-t:hover{transform:translateY(-4px)}
.pj-t p{max-width:46ch;color:#111111}.pj-t h3{margin-bottom:8px}
.pj-pg,.pj-lv{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:20px;color:#6B6B6B;font-size:14px}.pj-pb{position:relative;flex:1;max-width:240px;height:6px;border-radius:3px;background:#E3E3E6;overflow:hidden}.pj-pb i{display:block;height:100%;background:#1F8FFF;transform-origin:0 50%;transform:scaleX(.88)}.pj-t.rv .pj-pb i{transform:scaleX(0)}.pj-t.rv-in .pj-pb i{transform:scaleX(.88);transition:transform 2s cubic-bezier(.22,1,.36,1) .4s}
.pj-live{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:#111111;color:#FFFFFF;font-weight:500}.pj-live i{display:block;width:8px;height:8px;border-radius:50%;background:#1F8FFF;animation:sq 1.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.pj-pb i,.pj-live i{transition:none!important;animation:none!important}}
.pj-big{grid-row:1/3;justify-content:space-between;gap:32px;background:#111111;color:#FFFFFF}.pj-big p{color:#A1A1A6}
.pj-c{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-weight:500;font-size:14px;line-height:1;color:#6B6B6B;margin-bottom:12px}.pj-big .pj-c{color:#FFFFFF;background:#1D1D1F;border:1px solid #3A3A3C;border-radius:999px;padding:8px 14px}.pj-c i{display:block;width:8px;height:8px;border-radius:50%;background:#1F8FFF}
.pj-m{position:relative;aspect-ratio:4/3;container-type:inline-size;border-radius:16px;overflow:hidden;background:#FFF7F4}.pj-ub{position:absolute;left:0;right:0;top:0;z-index:2;display:flex;align-items:center;gap:10px;height:36px;padding:0 14px;background:#FFFFFF;border-bottom:1px solid #E3E3E6;color:#6B6B6B;font-size:13px}.pj-ub i{display:block;width:8px;height:8px;border-radius:50%;background:#1F8FFF}
.pj-m .fm{top:36px}
.pj-w{background:#FFFFFF;box-shadow:inset 0 0 0 1px #E3E3E6}
.pj-arm:not(.pj-go) .wim-bl{opacity:0;transform:translateY(32px) scale(.95)}.pj-go .wim-t{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.pj-t,.pj-im img{transition:none!important}}
.pr-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;margin-top:64px;align-items:start}
.pr-l{display:flex;flex-direction:column;gap:24px}
.pr-top{display:flex;justify-content:space-between;align-items:center}
.pr-cn{display:grid}.pr-cn b{grid-area:1/1;font-weight:inherit;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s cubic-bezier(.22,1,.36,1)}
.pr-g[data-s="1"] .pr-cn b:nth-child(1),.pr-g[data-s="2"] .pr-cn b:nth-child(2),.pr-g[data-s="3"] .pr-cn b:nth-child(3),.pr-g[data-s="4"] .pr-cn b:nth-child(4){opacity:1;transform:none}
.pr-pz{display:flex;align-items:center;gap:8px;height:44px;padding:0 4px;background:none;border:0;cursor:pointer;color:#111111}
.pr-pz .lab{color:inherit}.pr-pz .pr-ic{display:block;width:3px;height:12px;background:currentColor;box-shadow:6px 0 0 currentColor;margin-right:6px}.pr-pz .pr-pp{display:none}
.pr-pz[aria-pressed="true"] .pr-ic{width:0;height:0;background:none;box-shadow:none;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-right:0}
.pr-pz[aria-pressed="true"] .pr-pa{display:none}.pr-pz[aria-pressed="true"] .pr-pp{display:inline}
.pr-sl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.pr-i{position:relative;display:block;height:44px;padding:0;background:none;border:0;cursor:pointer}
.pr-hl{position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;background:#E3E3E6;overflow:hidden}.pr-hl u{display:block;text-decoration:none;position:absolute;inset:0;background:#1F8FFF;transform:scaleX(0);transform-origin:0 50%}
.pr-i[aria-current] .pr-hl u{transform:scaleX(1)}
.pr-xs{display:grid}
.pr-x{grid-area:1/1;visibility:hidden;opacity:0;transform:translateY(12px);transition:opacity .35s,transform .35s cubic-bezier(.22,1,.36,1),visibility 0s .35s}
.pr-g[data-s="1"] .pr-x:nth-child(1),.pr-g[data-s="2"] .pr-x:nth-child(2),.pr-g[data-s="3"] .pr-x:nth-child(3),.pr-g[data-s="4"] .pr-x:nth-child(4){visibility:visible;opacity:1;transform:none;transition:opacity .6s cubic-bezier(.22,1,.36,1) .2s,transform .6s cubic-bezier(.22,1,.36,1) .2s,visibility 0s}
.pr-h{display:flex;justify-content:space-between;gap:16px}.pr-c{color:#6B6B6B}
.pr-x .h3{margin-top:16px;margin-bottom:12px}.pr-t{display:block;margin-top:12px;color:#111111;max-width:46ch}
.pr-g.pz *{animation-play-state:paused!important}
.pr-s{background:#F5F5F7;border-radius:24px;padding:32px;position:relative}.pr-lead{max-width:48ch}
.pr-w{margin-top:20px;background:#FFFFFF;border-radius:16px;overflow:hidden}
.pr-ub{position:relative;z-index:1;display:flex;align-items:center;gap:10px;height:40px;padding:0 14px;background:#FFFFFF;border-bottom:1px solid #E3E3E6}
.pr-lk{position:relative;width:8px;height:8px;border-radius:50%;background:#A1A1A6;flex:none}.pr-lk u,.pr-lk i{display:block;text-decoration:none;position:absolute;inset:0;border-radius:50%;background:#1F8FFF;opacity:0}.pr-lk u{transition:opacity .4s}
.pr-ut{position:relative;flex:1;height:20px;overflow:hidden;min-width:0}
.pr-ut>span{position:absolute;left:0;top:0;white-space:nowrap;line-height:20px;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s cubic-bezier(.22,1,.36,1)}
.pr-ut .u4 u{display:block;text-decoration:none;position:absolute;inset:0;background:#FFFFFF;transform:scaleX(1);transform-origin:100% 50%;transition:transform 0s .6s}
.pr-s[data-s="1"] .u1,.pr-s[data-s="2"] .u2,.pr-s[data-s="3"] .u3,.pr-s[data-s="4"] .u4{opacity:1;transform:none}
.pr-s[data-s="4"] .u4 u{transform:scaleX(0);transition:transform .7s steps(16) .3s}
.pr-s[data-s="4"] .pr-lk u{opacity:1;transition-delay:1s}
.pr-bd{flex:none;background:#111111;color:#FFFFFF;padding:3px 10px;border-radius:999px;opacity:0;transform:scale(.9);transition:opacity .4s,transform .4s cubic-bezier(.22,1,.36,1)}
.pr-s[data-s="4"] .pr-bd{opacity:1;transform:none;transition-delay:1s}
.pr-b{position:relative;height:360px;overflow:hidden}
.pr-f{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(-12px) scale(.98);transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)}
.pr-s[data-s="1"] .pr-f{opacity:1;transform:none;transition-delay:.15s}
.pr-fi{width:min(380px,calc(100% - 48px));display:flex;flex-direction:column;gap:14px;font-size:14px;line-height:1.3}
.fd{display:flex;flex-direction:column;gap:6px}
.ff{height:36px;background:#F5F5F7;border-radius:10px;padding:0 12px;display:flex;align-items:center;position:relative;overflow:hidden;white-space:nowrap;line-height:1}
.ff .cv{display:block;text-decoration:none;position:absolute;inset:0;background:#F5F5F7;transform:scaleX(1);transform-origin:100% 50%;transition:transform 0s .6s}
.pr-s[data-s="1"] .ff .cv{transform:scaleX(0);transition:transform .6s steps(14) .35s}
.pr-s[data-s="1"] .fd:nth-child(2) .cv{transition-delay:1.1s}
.pl2{display:flex;flex-wrap:wrap;gap:6px}.pl2 span{position:relative;height:30px;padding:0 12px;display:flex;align-items:center;border:1px solid #E3E3E6;border-radius:999px;line-height:1;transition:color .3s}
.pl2 .on2{color:#111111;border-color:#111111}.pl2 .on2 u{display:block;text-decoration:none;position:absolute;inset:-1px;background:#111111;border-radius:999px;opacity:0;transform:scale(.9);transition:opacity .3s,transform .3s cubic-bezier(.22,1,.36,1)}.pl2 .on2 b{position:relative;font-weight:400}
.pr-s[data-s="1"] .pl2 .on2{color:#FFFFFF;transition-delay:1.8s}.pr-s[data-s="1"] .pl2 .on2 u{opacity:1;transform:none;transition-delay:1.8s}
.pr-fr{display:flex;margin-top:4px}
.fb{height:36px;padding:0 18px;background:#111111;color:#FFFFFF;border-radius:999px;display:flex;align-items:center;font-weight:500;line-height:1}
.pr-s[data-s="1"] .fb{animation:press .45s cubic-bezier(.22,1,.36,1) 2.4s both}
.pr-p{isolation:isolate;z-index:0;position:absolute;inset:0;padding:22px 28px;display:flex;flex-direction:column;gap:16px;opacity:0;transition:opacity .5s;font-size:14px;line-height:1.3}
.pr-s[data-s="2"] .pr-p,.pr-s[data-s="3"] .pr-p,.pr-s[data-s="4"] .pr-p{opacity:1}
.rv2{opacity:0;transform:translateY(18px);transition:opacity .3s,transform .3s}
.pr-s[data-s="2"] .rv2,.pr-s[data-s="3"] .rv2,.pr-s[data-s="4"] .rv2{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.22,1,.36,1) calc(var(--k,0)*110ms + 250ms),transform .8s cubic-bezier(.22,1,.36,1) calc(var(--k,0)*110ms + 250ms)}
.pr-n{display:flex;justify-content:space-between;align-items:center;flex:none;height:24px}.pr-n .wm{font-weight:700;font-size:16px}
.nl{position:relative;width:140px;height:20px}.nl .pr-ph,.nl .pr-tx{position:absolute;right:0;top:0;bottom:0;display:flex;align-items:center;gap:16px}.nl .pr-ph i{display:block;height:6px;width:44px;border-radius:3px;background:#E3E3E6}
.pr-ph{transition:opacity .4s}.pr-tx{opacity:0;transition:opacity .5s}
.pr-hr{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;flex:1;min-height:0}
.pr-hc{display:flex;flex-direction:column;justify-content:center;gap:12px}
.bk-h{font-size:28px;font-weight:700;line-height:1.05;letter-spacing:-.02em}.bk-h .ln{display:block;overflow:hidden;padding-bottom:3px}.bk-h .li{display:block;transform:translateY(115%);transition:transform .3s}
.pr-s[data-s="2"] .bk-h .li,.pr-s[data-s="3"] .bk-h .li,.pr-s[data-s="4"] .bk-h .li{transform:none;transition:transform .8s cubic-bezier(.22,1,.36,1) calc(400ms + var(--k,0)*130ms)}
.sub{position:relative;height:38px}.sub .pr-ph{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:8px}.sub .pr-ph i{display:block;height:6px;border-radius:3px;background:#E3E3E6}.sub .pr-ph i+i{width:70%}.sub .pr-tx{position:absolute;inset:0;display:flex;align-items:center}
.bt{height:34px;width:100px;border-radius:999px;background:#111111;color:#FFFFFF;display:flex;align-items:center;justify-content:center;font-weight:500;margin-top:2px}
.pr-im{position:relative;overflow:hidden;align-self:stretch;min-height:110px;border-radius:12px}
.pn0{position:absolute;inset:0;background:#F5F5F7;transform:scaleY(0);transform-origin:50% 100%;transition:transform .3s}
.pr-s[data-s="2"] .pn0,.pr-s[data-s="3"] .pn0,.pr-s[data-s="4"] .pn0{transform:none;transition:transform .7s cubic-bezier(.22,1,.36,1) 450ms}
.tag{position:absolute;left:12px;bottom:12px;background:#FFFFFF;border-radius:999px;padding:6px 12px;display:flex;align-items:center;gap:8px;line-height:1;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s cubic-bezier(.22,1,.36,1)}.tag i{display:block;width:6px;height:6px;border-radius:50%;background:#1F8FFF}
.pr-cs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;flex:none}
.cd{background:#F5F5F7;border-radius:12px;padding:0 12px;height:52px;display:flex;flex-direction:column;justify-content:center;gap:4px}.cd b{font-weight:700;line-height:1.1}
.sb2{position:relative;height:14px}.sb2 .pr-ph,.sb2 .pr-tx{position:absolute;inset:0;display:flex;align-items:center}.sb2 .pr-ph i{display:block;height:6px;width:70%;border-radius:3px;background:#E3E3E6}.sb2 .pr-tx{color:#6B6B6B}
.pr-s[data-s="3"] .pr-ph{opacity:0;transition:opacity .4s var(--d,0ms)}.pr-s[data-s="3"] .pr-tx{opacity:1;transition:opacity .5s cubic-bezier(.22,1,.36,1) var(--d,0ms)}
.pr-s[data-s="3"] .tag{opacity:1;transform:none;transition-delay:var(--d,0ms)}
.pr-s[data-s="4"] .pr-ph{opacity:0;transition:opacity .4s .2s}.pr-s[data-s="4"] .pr-tx{opacity:1;transition:opacity .5s cubic-bezier(.22,1,.36,1) .2s}
.pr-s[data-s="4"] .tag{opacity:1;transform:none;transition-delay:.3s}
.pr-ft{position:relative;height:30px;flex:none}
.pgw{position:absolute;inset:0;display:flex;align-items:center;gap:12px;opacity:0;transition:opacity .4s}
.pr-s[data-s="3"] .pgw{opacity:1;transition-delay:3.3s}
.pgb{flex:1;height:4px;background:#E3E3E6;position:relative;overflow:hidden}.pgb u{display:block;text-decoration:none;position:absolute;inset:0;background:#1F8FFF;transform:scaleX(0);transform-origin:0 50%}
.pr-s[data-s="3"] .pgb u{animation:pgs 1.8s cubic-bezier(.22,1,.36,1) 3.4s both}
.sqs{display:flex;gap:4px}.sqs i{display:block;width:5px;height:5px;border-radius:50%;background:#111111;animation:sq 1.2s ease-in-out infinite;animation-delay:calc(var(--k,0)*200ms)}
.chip,.up2{position:absolute;inset:0;display:flex;align-items:center;gap:8px;padding:0 14px;border-radius:999px;white-space:nowrap;opacity:0;line-height:1}
.chip{background:#111111;color:#FFFFFF}.chip i{display:block;width:6px;height:6px;border-radius:50%;background:#1F8FFF;flex:none}
.up2{background:#F5F5F7;transform:translateY(6px);transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)}.up2 i{display:block;width:6px;height:6px;border-radius:50%;background:#111111;flex:none}
.pr-s[data-s="4"] .chip{animation:cip 4.2s cubic-bezier(.22,1,.36,1) both}
.pr-s[data-s="4"] .up2{opacity:1;transform:none;transition-delay:2.4s}
.pr-o{z-index:3;position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:center}
.pr-v{position:absolute;inset:0;background:#FFFFFF;opacity:0}
.pr-oc{position:relative;width:min(340px,calc(100% - 32px));background:#F5F5F7;border-radius:16px;padding:18px 20px;display:flex;flex-direction:column;gap:10px;font-size:14px;line-height:1.3;opacity:0}
.pr-s[data-s="3"] .pr-v{animation:ov 5.2s cubic-bezier(.22,1,.36,1) both}.pr-s[data-s="3"] .pr-oc{animation:oc 5.2s cubic-bezier(.22,1,.36,1) both}
.pr-oh{display:flex;justify-content:space-between;gap:12px}
.or{display:flex;align-items:center;gap:10px;height:28px;border-top:1px solid #E3E3E6}
.ck{position:relative;display:block;width:14px;height:14px;border-radius:50%;background:#FFFFFF;border:1px solid #E3E3E6;flex:none}.ck u{display:block;text-decoration:none;position:absolute;inset:-1px;border-radius:50%;background:#1F8FFF;transform:scale(0);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.pr-s[data-s="3"] .or:nth-of-type(1) .ck u{transform:none;transition-delay:.9s}.pr-s[data-s="3"] .or:nth-of-type(2) .ck u{transform:none;transition-delay:1.2s}.pr-s[data-s="3"] .or:nth-of-type(3) .ck u{transform:none;transition-delay:1.5s}
.ob2{display:flex;align-items:center;justify-content:space-between;gap:12px;height:30px;border-top:1px solid #E3E3E6}.ob2 .bar{display:block;width:72px;height:14px;border-radius:4px;background:#E3E3E6;transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.pr-s[data-s="3"] .ob2:nth-of-type(1) .bar{transform:none;transition-delay:1.9s}.pr-s[data-s="3"] .ob2:nth-of-type(2) .bar{transform:none;transition-delay:2.1s}
.ak{align-self:flex-start;margin-top:4px}
.pr-s[data-s="3"] .ak{animation:press .45s cubic-bezier(.22,1,.36,1) 2.7s both}
.mk2{position:absolute;inset:0;display:flex;align-items:center;gap:8px;padding:0 14px;border-radius:999px;background:#F5F5F7;white-space:nowrap;line-height:1;opacity:0;transform:translateY(6px);transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)}.mk2 i{display:block;width:6px;height:6px;border-radius:50%;background:#111111;flex:none}
.pr-s[data-s="2"] .mk2{opacity:1;transform:none;transition-delay:1.9s}
.car{display:none}.pr-s[data-s="1"] .car{display:block;width:1px;height:14px;background:#111111;margin-left:2px;opacity:0;animation:blink 1s steps(1) infinite 1.7s}
.pr-s[data-s="2"] .bt{animation:nudge 1.4s ease-in-out 2.5s both}.pr-s[data-s="4"] .bt{animation:nudge 1.4s ease-in-out 3.1s both}
.tag i{animation:sq 1.6s ease-in-out infinite}
.pr-g:not(.on) *{animation-play-state:paused!important}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes nudge{0%,100%{transform:none}40%{transform:scale(.93)}}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes press{0%{transform:none}40%{transform:scale(.92)}100%{transform:none}}
@keyframes pgs{from{transform:scaleX(0)}to{transform:scaleX(.88)}}
@keyframes sq{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes ping{0%{transform:scale(1);opacity:.5}100%{transform:scale(2.8);opacity:0}}
@keyframes bp{0%,100%{opacity:1}50%{opacity:.6}}
@keyframes cip{0%,16%{opacity:0;transform:translateY(6px)}24%,46%{opacity:1;transform:none}54%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes ov{0%,3%{opacity:0}10%,58%{opacity:.9}66%,100%{opacity:0}}
@keyframes oc{0%,3%{opacity:0;transform:translateY(18px) scale(.98)}11%,58%{opacity:1;transform:none}66%,100%{opacity:0;transform:translateY(-14px) scale(.98)}}
.pr-s[data-s="4"] .pr-lk i{animation:ping 2s ease-out infinite 1.1s}
.pr-s[data-s="4"] .pr-bd{animation:bp 2.4s ease-in-out infinite 1.8s}
.prn{margin-top:40px;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}
.chat{background:#F5F5F7;border-radius:24px;overflow:hidden;padding:0;width:100%;max-width:440px;justify-self:end;align-self:end;display:flex;flex-direction:column}
@media (prefers-reduced-motion:no-preference){
.pr-i[aria-current] .pr-hl u{animation:fill var(--dur,5s) linear both}
}
@media (prefers-reduced-motion:reduce){.pr-s *{transition:none!important;animation:none!important}.pr-s .pr-oc,.pr-s .pr-v{display:none}.pr-pz,.pr-lead{display:none}.pr-s .pr-w{margin-top:0}}
@container (max-width:899.98px){
.pr-g{grid-template-columns:minmax(0,1fr);gap:32px;margin-top:40px}.of-g{grid-template-columns:minmax(0,1fr);gap:32px;margin-top:32px}.of-r{padding:16px}.ofd{padding:20px 18px;aspect-ratio:auto}.pj-big{grid-row:auto}.pj-t{padding:24px}.pj-m{aspect-ratio:3/4}
.pr-s{padding:24px 16px 16px}
.pr-b{height:410px}.pr-p{padding:16px 14px;gap:14px}
.bk-h{font-size:22px}.pr-hr{gap:12px}.cd{padding:0 8px}.pr-cs{gap:6px}.nl{width:110px}
.prn{margin-top:40px}
.chat{justify-self:stretch;max-width:none}.vak .two.h>.chat{order:0;align-self:auto}
}
@media (prefers-reduced-motion:no-preference){
.slot{display:grid;justify-items:end}.slot>*{grid-area:1/1}.typ0{opacity:0}
@keyframes t0{0%{opacity:0;transform:translateY(10px) scale(.8)}14%{opacity:1;transform:none}82%{opacity:1}100%{opacity:0;transform:scale(.9)}}
@media (prefers-reduced-motion:no-preference){.chat.go .typ0{animation:t0 1.5s cubic-bezier(.34,1.5,.64,1) .1s both}}
.m.k{transform-origin:0 100%}.m.t{transform-origin:100% 100%}.chat.arm:not(.go) .m{opacity:0;transform:translateY(26px) scale(.82)}.chat.arm:not(.go) .typ{opacity:0}
.chat.go .m{transition:opacity .35s ease calc(var(--i)*1600ms),transform .8s cubic-bezier(.34,1.7,.5,1) calc(var(--i)*1600ms)}
.chat.go .typ{transition:opacity .3s linear 4.9s}
.chat.arm .typ div{opacity:.6}
@keyframes tp{0%{opacity:.6}50%{opacity:1}100%{opacity:.6}}
}
.rv{opacity:0;transform:translateY(16px)}
.rv.rv-in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.22,1,.36,1) var(--d,0ms),transform .7s cubic-bezier(.22,1,.36,1) var(--d,0ms)}
.rv-now{transition:none!important}
.h2 .ln{display:block;overflow:hidden;padding:0 .06em .14em 0;margin:0 0 -.14em}.h2 .li{display:block;white-space:nowrap}
.h2.hs .li{transform:translateY(110%)}
.h2.hs.rv-in .li{transform:none;transition:transform .7s cubic-bezier(.22,1,.36,1) calc(var(--d,0ms) + var(--i,0)*80ms)}
.h2.hs.rv-now .li{transition:none!important}
.h2 .hl{position:relative;display:inline}
.h2 .hl:after{content:"";position:absolute;left:0;right:0;bottom:-.03em;height:.09em;background:#1F8FFF;transform-origin:0 50%}
.h2.hs .hl:after{transform:scaleX(0)}
.h2.hs.rv-in .hl:after{transform:none;transition:transform .5s cubic-bezier(.22,1,.36,1) calc(var(--d,0ms) + 600ms)}
.h2.hs.rv-now .hl:after{transition:none!important}
html.tgfx .wkzone,html.tgfx .wzone{position:relative}
html.tgfx .wkstage{position:sticky;top:72px;padding:40px 0 24px}
html.tgfx .cap{opacity:0;transform:translateY(12px);transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)}html.tgfx .wk.live ~ .cap{opacity:1;transform:none}
html.tgfx .wk{width:max(min(100%,calc((100vh - 310px)*2000/1043)),min(100%,560px))}
html.tgfx .wk:not(.near){pointer-events:none}
html.tgfx .sk{transition:none}
html.tgfx .wkpad{display:block;height:90vh}
html.tgfx .wstage{position:sticky;top:72px;height:max(560px,calc(100vh - 72px));overflow:hidden;display:flex;flex-direction:column;padding-top:16px;background:#FFFFFF}
html.tgfx .wsh{flex:none;width:100%}html.tgfx .wsub{margin-top:24px}
html.tgfx .pview{flex:1;min-height:0;margin-top:24px;padding:0}
html.tgfx .panels{display:flex;width:max-content;height:100%;margin-top:0;padding:0 48px;gap:24px}
html.tgfx .pn{flex:none;width:clamp(420px,44cqw,640px);height:100%;max-height:680px;min-height:0}
html.tgfx .wpad{display:block;height:var(--pd,1600px)}
html.tgfx.tgfc .ft{position:sticky;bottom:0;z-index:0}html.tgfx.tgfc:not(.tgfl) .ft{visibility:hidden}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.h2.hs .li{transform:none}.h2.hs .hl:after{transform:none}}
.wim{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px;margin-top:64px;align-items:start}
.wim-tabs{display:flex;flex-direction:column;gap:0;border-top:1px solid #E3E3E6}
.wim-tab{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid #E3E3E6;padding:24px 0;min-height:44px;color:#6B6B6B;cursor:pointer;font:inherit;-webkit-tap-highlight-color:transparent;transition:transform .12s}
.wim-tab[aria-selected=true]{color:#111111}
.wim-tab{position:relative;padding-right:60px}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(31,143,255,.5)}70%,100%{box-shadow:0 0 0 14px rgba(31,143,255,0)}}
.wim-nr{display:block;font-weight:500;font-size:14px;line-height:1.3;color:#6B6B6B}
.wim-ti{position:relative;display:block;width:fit-content;font-weight:500;font-size:20px;line-height:1.2;letter-spacing:-.01em;margin:8px 0 14px}
.wim-ti:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;background:#1F8FFF;transform:scaleX(0);transform-origin:0 50%;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.wim-tab[aria-selected=true] .wim-ti:after{transform:none}
.wim-ar{position:absolute;right:0;top:22px;width:36px;height:36px;border:1px solid #E3E3E6;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;transition:border-color .3s}
.wim-ar:before{content:"";position:absolute;inset:-1px;border-radius:50%;background:#1F8FFF;transform:scale(0);transition:transform .55s cubic-bezier(.34,1.3,.64,1)}
.wim-ar i{position:relative;font-style:normal;font-size:16px;line-height:1;color:#111111;transition:color .3s}
.wim-tab[aria-selected=true] .wim-ar{border-color:#1F8FFF}.wim-tab[aria-selected=true] .wim-ar:before{transform:scale(1)}.wim-tab[aria-selected=true] .wim-ar i{color:#FFFFFF;animation:arw .7s cubic-bezier(.45,0,.25,1) .15s}
@keyframes arw{0%{transform:none}45%{transform:translateX(26px)}46%{transform:translateX(-26px)}100%{transform:none}}
.wim:not(.used) .wim-tab[aria-selected=false]:nth-child(2) .wim-ar{animation:ring 2s ease-out 4 1.2s}
@media (prefers-reduced-motion:reduce){.wim-ar,.wim-ar i,.wim-ar:before{animation:none!important;transition:none!important}}

.wim-tx{display:block;font-size:17px;line-height:1.55;max-width:46ch}
.wim-panel{position:relative;background:#F5F5F7;border-radius:24px;aspect-ratio:4/3;container-type:inline-size;overflow:hidden;touch-action:pan-y}
.wim-lb{position:absolute;left:24px;top:20px;z-index:4}
.wim-sc{position:absolute;inset:0;visibility:hidden;opacity:0;transform:translateY(6px) scale(.992);transition:opacity .4s ease,transform .4s ease,visibility 0s .4s}
.wim-sc.on{visibility:visible;opacity:1;transform:none;transition:opacity .7s cubic-bezier(.22,1,.36,1) .3s,transform .9s cubic-bezier(.22,1,.36,1) .3s,visibility 0s}
.wim-sc:not(.go) *{transition:none!important}
.wim-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wim-fr{position:absolute;left:8cqw;right:8cqw;top:56px;bottom:8cqw;background:#FFFFFF;border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.wim-ub{position:relative;z-index:2;flex:none;height:32px;display:flex;align-items:center;padding:0 14px;border-bottom:1px solid #E3E3E6;background:#FFFFFF;font-size:13px;line-height:1;color:#6B6B6B}
.wim-bd,.wim-cmp{position:relative;flex:1;min-height:0;overflow:hidden}
.wim-site,.wim-old{position:absolute;inset:0}
.wim-site{--g:clamp(6px,1.6cqw,16px);padding:4cqw;display:flex;flex-direction:column;align-items:flex-start;gap:var(--g)}
.wim-s2 .wim-site,.wim-s2 .wim-old{padding-top:calc(3cqw + 24px)}
.wim-hdr{width:100%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #E3E3E6;padding-bottom:var(--g)}
.wim-wmk{font-weight:700;font-size:clamp(13px,1.7cqw,15px);letter-spacing:-.01em}
.wim-nv{display:flex;gap:8px}.wim-nv i{display:block;width:clamp(16px,3cqw,28px);height:4px;border-radius:2px;background:#E3E3E6}
.wim-h{font-weight:700;font-size:clamp(13px,3.4cqw,30px);line-height:1.05;letter-spacing:-.03em;color:#111111}
.wim-btn{display:flex;align-items:center;height:clamp(26px,3.4cqw,32px);padding:0 clamp(12px,1.8cqw,16px);border-radius:999px;background:#111111;color:#FFFFFF;font-weight:500;font-size:13px;white-space:nowrap}
.wim-im{flex:1;min-height:0;width:100%;display:flex;gap:var(--g)}.wim-im i{display:block;flex:1;background:#F5F5F7;border-radius:8px}
.wim-t{transition:opacity .5s cubic-bezier(.22,1,.36,1) var(--d,0ms),transform .9s cubic-bezier(.34,1.45,.64,1) var(--d,0ms)}
.wim-hx{transform:scaleX(0);transform-origin:0 0}.wim-vy{transform:scaleY(0);transform-origin:0 0}
.wim-s1 .wim-bl,.wim-s3 .wim-a{opacity:0;transform:translateY(32px) scale(.95)}
.wim-sc.go .wim-t{opacity:1;transform:none}
.wim-aw,.wim-after,.wim-bw,.wim-bi{position:absolute;inset:0}.wim-bw,.wim-aw{overflow:hidden}.wim-bw{background:#FFFFFF}
.wim-l2{position:absolute;top:8px;z-index:2}.wim-ll{left:12px}.wim-lr{right:12px}
.wim-old{display:flex;flex-direction:column;align-items:center;gap:clamp(5px,1.2cqw,10px);padding-left:3cqw;padding-right:3cqw;text-align:center}
.wim-ow{font-weight:400;font-size:13px;color:#6B6B6B}
.wim-om{display:flex;gap:3px}.wim-om i{display:block;width:clamp(18px,4cqw,38px);height:12px;border:1px solid #A1A1A6}
.wim-op{display:flex;flex-direction:column;align-items:center;gap:5px;width:100%;margin-top:4px}.wim-op i{display:block;height:3px;background:#E3E3E6}
.wim-cmp.anim .wim-aw,.wim-cmp.anim .wim-after,.wim-cmp.anim .wim-bw,.wim-cmp.anim .wim-bi{transition:transform 1.3s cubic-bezier(.65,0,.35,1)}
.wim-grab{opacity:0}.wim-sc.go .wim-grab{opacity:1;transition:opacity .8s .5s}.wim-cmp.anim .wim-grab{transition:transform 1.3s cubic-bezier(.65,0,.35,1),opacity .8s .5s}
.wim-grab{position:absolute;left:0;top:0;bottom:0;width:44px;z-index:3;touch-action:none;cursor:ew-resize}
.wim-grab:focus-visible{outline:none}.wim-grab:focus-visible .wim-hd{outline:2px solid #1F8FFF;outline-offset:3px}
.wim-ln{position:absolute;left:21px;top:0;bottom:0;width:2px;background:#111111}
.wim-hd{position:absolute;left:2px;top:50%;margin-top:-20px;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#111111;color:#FFFFFF;font-weight:500;font-size:16px;line-height:1;letter-spacing:.08em}
.fm{position:absolute;inset:0;padding:3cqw 3.4cqw;display:flex;flex-direction:column;gap:2.2cqw;background:#FFF7F4;font-size:clamp(13px,1.6cqw,15px);line-height:1.3;color:#2B2024}
.fl-hd{display:flex;align-items:center;justify-content:space-between;gap:2cqw}
.fl-wm{display:inline-flex;align-items:center;gap:3px}.fl-wm b{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:600;font-size:clamp(18px,2.6cqw,24px);letter-spacing:-.01em;color:#7A2447}.fl-lg{overflow:visible;display:block;width:clamp(22px,3cqw,28px);height:auto}
.fl-nv{display:flex;gap:2.2cqw;color:#7C6A70}
.fl-cta{display:flex;align-items:center;height:clamp(28px,3.6cqw,34px);padding:0 clamp(12px,1.8cqw,18px);border-radius:999px;background:#C2467A;color:#FFFFFF;font-weight:500;white-space:nowrap}
.fl-hr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3cqw;flex:1;min-height:0}
.fl-tx{display:flex;flex-direction:column;justify-content:center;gap:1.5cqw}
.fl-h{font-family:Georgia,"Times New Roman",serif;font-weight:600;font-size:clamp(22px,4.3cqw,40px);line-height:1.05;letter-spacing:-.02em;color:#2B2024}
.fl-u{font-style:italic;color:#C2467A}
.fl-p{color:#7C6A70;max-width:30ch}
.fl-b{position:relative;align-self:flex-start;height:clamp(32px,4.4cqw,40px);padding:0 clamp(16px,2.2cqw,22px) 0 clamp(16px,2.2cqw,22px);border-radius:999px;background:#C2467A;color:#FFFFFF;display:flex;align-items:center;gap:10px;font-weight:500;white-space:nowrap}
.fl-im{border-radius:2.4cqw 2.4cqw 2.4cqw .6cqw;overflow:hidden;min-height:0;background:#F8DDE6}.fl-im img{display:block;width:100%;height:100%;object-fit:cover}
.fl-cs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2cqw;height:clamp(64px,13cqw,112px);flex:none}
.fl-c{position:relative;border-radius:1.2cqw;overflow:hidden;background:#F8DDE6}.fl-c img{display:block;width:100%;height:100%;object-fit:cover}
.fl-c span{position:absolute;left:.9cqw;bottom:.9cqw;background:#FFF7F4;color:#7A2447;border-radius:999px;padding:3px 10px;font-weight:500;font-size:13px;line-height:1.2}
.wim-s2 .fm{padding-top:calc(3cqw + 22px)}
.fl-old{background:#EFE7D6;font-family:"Times New Roman",Times,serif;color:#222222;align-items:center;gap:1.3cqw;font-size:clamp(13px,1.6cqw,15px)}
.fo-t{font-weight:700;font-size:clamp(22px,4cqw,34px);color:#7A1F3D;text-shadow:2px 2px 0 #D9C9A8;letter-spacing:0}
.fo-m{color:#0000EE;font-size:clamp(13px,1.6cqw,15px)}.fo-m u{text-decoration:underline}
.fo-r{width:100%;height:3px;border-top:1px solid #A79C85;border-bottom:1px solid #A79C85}
.fo-c{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:2.5cqw;width:100%;flex:1;min-height:0}
.fo-x p{margin:0 0 .5em}.fo-x ul{margin:0;padding-left:1.2em}
.fo-i{border:3px solid #7A1F3D;min-height:0;overflow:hidden}.fo-i img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.55) contrast(.85) blur(.5px)}
.fo-n{font-size:13px;color:#7A1F3D;margin-top:auto}
.mb-g{position:absolute;left:8cqw;right:8cqw;top:56px;bottom:8cqw;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:repeat(3,minmax(0,1fr));gap:1.6cqw}
.mb-c{background:#FFFFFF;border-radius:16px;padding:1.6cqw 2cqw;display:flex;flex-direction:column;justify-content:space-between;min-height:0;font-size:13px;line-height:1.3}
.mb-c{background:#FFFFFF}.mb-logo{grid-row:1/4;align-items:flex-start;background:#FFF7F4}.mb-lm{display:flex;flex-direction:column;align-items:center;gap:1.4cqw;margin:auto}.mb-fl{overflow:visible;display:block;width:clamp(70px,14cqw,150px);height:auto}.mb-lm b{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:600;font-size:clamp(28px,5.4cqw,52px);color:#7A2447;letter-spacing:-.01em}
.wim-s3 .pt{transform:rotate(var(--r)) scale(0);transform-box:view-box;transform-origin:20px 20px;transition:transform .8s cubic-bezier(.34,1.56,.64,1) calc(var(--d) + 200ms)}.wim-sc.go .pt{transform:rotate(var(--r)) scale(1)}
.pt{transform:rotate(var(--r));transform-box:view-box;transform-origin:20px 20px}
.mb-sw{display:flex;gap:10px}.mb-sw i{display:block;width:clamp(24px,4cqw,40px);height:clamp(24px,4cqw,40px);border-radius:50%}
.mb-nm{display:flex;gap:10px;color:#6B6B6B}.mb-nm span{flex:none}
.mb-aa{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:8px 16px}.mb-aa .lab{flex-basis:100%}.mb-aa b{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:600;font-size:clamp(34px,6.4cqw,60px);line-height:.9;color:#7A2447}.mb-aa span:last-child{color:#6B6B6B}
.mb-bt .fl-b{align-self:flex-start}
.mb-c{display:grid;grid-template-rows:auto minmax(0,1fr);justify-content:stretch}.mb-c>:not(.lab){place-self:center}.mb-logo{display:flex;flex-direction:column}.mb-sw{display:flex;gap:clamp(10px,2cqw,22px);justify-content:center}.mb-sw span{display:flex;flex-direction:column;align-items:center;gap:8px;color:#6B6B6B;font-size:13px;line-height:1}.mb-an{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center}.mb-an span{color:#6B6B6B}
.wim-bo{position:absolute;left:12cqw;right:12cqw;top:56px;bottom:6cqw;background:#FFFFFF;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,3cqw,28px)}
.wim-mk{position:relative;width:clamp(70px,24cqw,230px);height:clamp(70px,24cqw,230px)}
.wim-mk i{display:block;position:absolute}
.wim-f1,.wim-f2,.wim-f3{background:#1F8FFF}
.wim-f1{left:34%;top:22%;width:14%;height:56%}.wim-f2{left:34%;top:22%;width:40%;height:13%}.wim-f3{left:34%;top:46%;width:30%;height:12%}
.wim-row{display:flex;align-items:flex-end;gap:clamp(12px,3cqw,28px)}
.wim-sw{display:flex;flex-direction:column;gap:6px}.wim-sw i{display:block;width:clamp(28px,5cqw,48px);height:clamp(28px,5cqw,48px);border-radius:12px}
.wim-sw span{font-size:13px;line-height:1;color:#6B6B6B}
.wim-aa{font-weight:700;font-size:clamp(28px,7cqw,64px);line-height:.8;letter-spacing:-.03em;margin-left:clamp(8px,2cqw,20px)}
@media (prefers-reduced-motion:reduce){.wim-sc,.wim-sc *{transition:none!important}}
@container vak (max-width:899.98px){
.wim{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:40px}
.wim-panel{order:-1}
.wim-tab{padding:16px 56px 16px 0}.wim-ti{font-size:18px;margin:4px 0 12px}.wim-tx{font-size:16px}
.wim-lb{left:16px;top:14px}.wim-fr{top:44px}.wim-bo{top:44px}
.wim-x1,.wim-xb{display:none}
}
/* WERK: meer werk, tegels die van plek wisselen met het grote vlak */
.pjt-w{margin-top:56px}
.pjt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:16px}
.pjt-t{position:relative;display:block;aspect-ratio:2000/1043;padding:0;border:0;border-radius:12px;overflow:hidden;background:#F5F5F7;cursor:pointer;font:inherit;color:#FFFFFF;text-align:left;-webkit-tap-highlight-color:transparent;isolation:isolate}
.pjt-t img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top;transition:transform .7s cubic-bezier(.22,1,.36,1),filter .5s cubic-bezier(.22,1,.36,1)}
.pjt-o{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding:18px 20px;background:linear-gradient(to top,rgba(17,17,17,.78),rgba(17,17,17,.18) 55%,rgba(17,17,17,0));-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);opacity:0;transition:opacity .4s cubic-bezier(.22,1,.36,1),backdrop-filter .5s,-webkit-backdrop-filter .5s}
.pjt-o b{font-weight:500;font-size:20px;line-height:1.15;letter-spacing:-.01em;transform:translateY(10px);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.pjt-o em{font-style:normal;font-size:14px;color:#D1D1D6;transform:translateY(10px);transition:transform .5s cubic-bezier(.22,1,.36,1) .04s}
.pjt-o b:after{content:"";display:block;height:3px;width:28px;margin-top:8px;border-radius:2px;background:#1F8FFF;transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.22,1,.36,1) .1s}
.pjt-o b{display:block}
.pjt-t:focus-visible{outline:2px solid #1F8FFF;outline-offset:3px}
.pjt-t:focus-visible .pjt-o{opacity:1}.pjt-t:focus-visible .pjt-o b,.pjt-t:focus-visible .pjt-o em{transform:none}
.pjt-all{display:flex;flex-direction:column;justify-content:space-between;padding:20px;background:#111111;cursor:default}
.pjt-al{font-weight:500;font-size:24px;line-height:1.1;letter-spacing:-.015em}
.pjt-ar{align-self:flex-end;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:#1F8FFF;color:#FFFFFF;transition:transform .5s cubic-bezier(.22,1,.36,1)}.pjt-ar svg{width:20px;height:20px}
@media (hover:hover) and (pointer:fine){
.pjt-t:not(.pjt-all):hover img{transform:scale(1.05);filter:saturate(1.08)}
.pjt-t:hover .pjt-o{opacity:1;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.pjt-t:hover .pjt-o b,.pjt-t:hover .pjt-o em{transform:none}.pjt-t:hover .pjt-o b:after{transform:none}
.pjt-all:hover .pjt-ar{transform:translateX(4px) rotate(-45deg)}
}
@media (hover:none),(pointer:coarse){.pjt-o{opacity:1;background:linear-gradient(to top,rgba(17,17,17,.88),rgba(17,17,17,.35) 55%,rgba(17,17,17,0))}.pjt-o b,.pjt-o em{transform:none}.pjt-o b:after{display:none}.pjt-t:active{transform:scale(.97)}}
.pjt-fl{position:fixed;z-index:60;margin:0;pointer-events:none;object-fit:cover;object-position:left top;border-radius:12px;will-change:left,top,width,height}
.pjt-fl.big{box-shadow:0 40px 80px -24px rgba(17,17,17,.35)}
.cap>*{transition:opacity .25s cubic-bezier(.65,0,.35,1),transform .25s cubic-bezier(.65,0,.35,1)}
.cap.out>*{opacity:0;transform:translateY(-8px)}
.cap.in>*{opacity:0;transform:translateY(10px);transition:none}
.cap>:nth-child(2){transition-delay:.05s}.cap>:nth-child(3){transition-delay:.1s}
.wk.swp img{visibility:hidden}.wk.nolink{cursor:default}.wk.nolink .mus{display:none}.pjt-t.swp>*{visibility:hidden}
@media (prefers-reduced-motion:reduce){.pjt-t img,.pjt-o,.pjt-o b,.pjt-o em,.pjt-ar,.cap>*{transition:none!important}}
@container vak (max-width:899.98px){
.pjt-w{margin-top:40px}
.pjt{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pjt-all{grid-column:1/-1;aspect-ratio:auto;flex-direction:row;align-items:center;min-height:88px;padding:16px 16px 16px 20px}
.pjt-al{font-size:20px}.pjt-al br{display:none}.pjt-ar{align-self:center}
.pjt-o{padding:10px 12px}.pjt-o b{font-size:14px;line-height:1.2}.pjt-o em{display:none}
}
/* Diensten als kaarten die je selecteert */
.wim-tabs{gap:12px;border-top:0}
.wim-tab{border:1px solid #E3E3E6;border-radius:20px;padding:22px 72px 24px 24px;background:#FFFFFF;color:#6B6B6B;transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .3s,background-color .45s cubic-bezier(.65,0,.35,1),box-shadow .45s cubic-bezier(.22,1,.36,1),color .3s}
.wim-tab .wim-tx{color:#6B6B6B;transition:color .3s}.wim-tab .wim-nr{transition:color .3s}
.wim-ti:after{display:none}
.wim-ti{font-size:22px;margin:8px 0 10px}
.wim-ar{right:22px;top:22px;width:30px;height:30px;border-color:#CFCFD4}
.wim-ar i{font-size:14px;font-weight:700;color:transparent}
.wim-tab[aria-selected=true]{background:#111111;border-color:#111111;color:#FFFFFF;box-shadow:0 28px 56px -28px rgba(17,17,17,.55)}
.wim-tab[aria-selected=true] .wim-tx{color:#D1D1D6}.wim-tab[aria-selected=true] .wim-nr{color:#A1A1A6}
.wim-tab[aria-selected=true] .wim-ar i{color:#FFFFFF;animation:none}
.wim-tab[aria-selected=false]:hover{color:#111111;border-color:#111111;transform:translateY(-2px);box-shadow:0 16px 32px -24px rgba(17,17,17,.35)}
.wim-tab[aria-selected=false]:hover .wim-ar:before{transform:scale(0)}.wim-tab[aria-selected=false]:hover .wim-ar{border-color:#111111}.wim-tab[aria-selected=false]:hover .wim-ar i{color:transparent}
.wim-tab:focus-visible{outline:2px solid #1F8FFF;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.wim-tab,.wim-tab .wim-tx{transition:none!important}}
@container vak (max-width:899.98px){.wim-tab{padding:16px 56px 18px 18px;border-radius:16px}.wim-ti{font-size:19px;margin:4px 0 8px}.wim-ar{right:16px;top:16px;width:28px;height:28px}}
/* Merk opzetten: beweging in de kaartjes zelf */
@media (prefers-reduced-motion:no-preference){
.wim-s3 .mb-sw span{opacity:0;transform:translateY(10px);transition:opacity .4s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.34,1.45,.64,1)}
.wim-s3 .mb-sw i{transform:scale(0) rotate(-90deg);transition:transform .7s cubic-bezier(.34,1.56,.64,1)}
.wim-s3 .mb-sw span:nth-child(1),.wim-s3 .mb-sw span:nth-child(1) i{transition-delay:.62s}
.wim-s3 .mb-sw span:nth-child(2),.wim-s3 .mb-sw span:nth-child(2) i{transition-delay:.72s}
.wim-s3 .mb-sw span:nth-child(3),.wim-s3 .mb-sw span:nth-child(3) i{transition-delay:.82s}
.wim-s3 .mb-sw span:nth-child(4),.wim-s3 .mb-sw span:nth-child(4) i{transition-delay:.92s}
.wim-s3.go .mb-sw span{opacity:1;transform:none}.wim-s3.go .mb-sw i{transform:none}
.wim-s3 .mb-an b{display:inline-block;clip-path:inset(0 100% 0 0);transform:translateX(-6px);transition:clip-path .6s cubic-bezier(.65,0,.35,1) .95s,transform .6s cubic-bezier(.22,1,.36,1) .95s}
.wim-s3 .mb-an span{opacity:0;transition:opacity .4s ease 1.35s}
.wim-s3.go .mb-an b{clip-path:inset(0 -10% 0 0);transform:none}.wim-s3.go .mb-an span{opacity:1}
.wim-s3 .mb-bt .fl-b{position:relative}
.wim-s3 .mb-bt .fl-b:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(194,70,122,.45);opacity:0}
.wim-s3.go .mb-bt .fl-b{animation:mbpress .5s cubic-bezier(.34,1.56,.64,1) 1.45s both}
.wim-s3.go .mb-bt .fl-b:after{animation:mbring .9s cubic-bezier(.22,1,.36,1) 1.5s both}
@keyframes mbpress{0%{transform:scale(1)}35%{transform:scale(.92)}100%{transform:scale(1)}}
@keyframes mbring{0%{opacity:1;box-shadow:0 0 0 0 rgba(194,70,122,.45)}100%{opacity:0;box-shadow:0 0 0 14px rgba(194,70,122,0)}}
}
/* Aanvraag in de merkkleur: blauw vlak, witte tekst en onderdelen (Tom, 17 okt) */
.aa{background:#1F8FFF;color:#FFFFFF}
.aa .lab,.aa .mu,.aa .hp,.aa .nxr .lab{color:#FFFFFF}
.aa .lab{opacity:.85}
.aa a.tl,.aa a.tl:hover{color:#FFFFFF}
.aa .inp{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.7);color:#FFFFFF}
.aa .inp:focus{outline:2px solid #FFFFFF;outline-offset:2px;background:rgba(255,255,255,.2)}
.aa .inp[aria-invalid=true]{border:2px solid #FFFFFF}
.aa .er{color:#B3261E;background:#FFFFFF;border-radius:8px;padding:6px 10px;width:fit-content}.aa .er svg{stroke:#B3261E}
.aa .pil{border-color:rgba(255,255,255,.7);color:#FFFFFF}
.aa .pil:before{border-color:rgba(255,255,255,.7)}
.aa .pil:hover{background:rgba(255,255,255,.14);border-color:#FFFFFF}.aa .pil:hover:before{border-color:#FFFFFF}
.aa .pil[aria-pressed=true],.aa .pil[aria-pressed=true]:hover{background:#FFFFFF;color:#111111;border-color:#FFFFFF}
.aa .pil[aria-pressed=true]:before{background-color:#1F8FFF;border-color:#1F8FFF;color:#FFFFFF}
.aa .nxr{border-top-color:rgba(255,255,255,.45)}
.aa .btn.dk:before{background:#111111}.aa .btn.dk .ar{color:#FFFFFF}
.aa .btn.dk:focus-visible{outline:2px solid #FFFFFF;outline-offset:3px}
/* Afspraken 03: een instellingenpaneel. De betaalde periode loopt vol, opzeggen staat altijd aan */
.s3{display:flex;flex-direction:column;padding:4px 20px;border-radius:16px;background:#FFFFFF;box-shadow:0 18px 40px -28px rgba(17,17,17,.35)}
.s3-r{display:flex;align-items:center;gap:14px;min-height:62px}
.s3-r+.s3-r{border-top:1px solid #E3E3E6}
.s3-k{font-weight:500;font-size:15px;line-height:1.25}
.s3-r:first-child .s3-k{white-space:nowrap}
.s3-tr{position:relative;flex:1;min-width:60px;height:10px;border-radius:5px;background:#E3E3E6;overflow:hidden}
.s3-tr b{position:absolute;inset:0;background:#1F8FFF;transform-origin:0 50%}
.s3-tr i{position:absolute;inset:0;background:repeating-linear-gradient(to right,transparent 0,transparent calc(100% / 12 - 2px),#FFFFFF calc(100% / 12 - 2px),#FFFFFF calc(100% / 12))}
.s3-v{font-size:14px;color:#6B6B6B;white-space:nowrap}
.s3-lk{flex:none;width:20px;height:20px;fill:none;stroke:#111111;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.s3-sh{transform-box:view-box;transform-origin:10.5px 7px;transform:translateY(-1.5px) rotate(28deg)}
.s3-sw{position:relative;flex:none;margin-left:auto;width:50px;height:30px;border-radius:15px;background:#1F8FFF}
.s3-sw i{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#FFFFFF;box-shadow:0 2px 6px rgba(17,17,17,.25);transform:translateX(20px)}
@media (prefers-reduced-motion:no-preference){
.afs-js .afs-t:not(.go) .s3-tr b{transform:scaleX(0)}
.afs-js .afs-t:not(.go) .s3-sw{background:#CFCFD4}
.afs-js .afs-t:not(.go) .s3-sw i{transform:none}
.afs-js .afs-t:not(.go) .s3-sh{transform:none}
.afs-js .afs-t:not(.go) .s3-v{opacity:.35}
.afs-t.go .s3-tr b{transition:transform 1.3s cubic-bezier(.65,0,.35,1) .5s}
.afs-t.go .s3-v{transition:opacity .3s ease 1.7s}
.afs-t.go .s3-sw{transition:background-color .3s ease 2s}
.afs-t.go .s3-sw i{transition:transform .55s cubic-bezier(.34,1.56,.64,1) 2s}
.afs-t.go .s3-sh{transition:transform .6s cubic-bezier(.34,1.56,.64,1) 2.25s}
}
@container vak (max-width:899.98px){.s3{padding:2px 16px}.s3-k{font-size:14px}.s3-v{font-size:13px}}
/* Afspraken 04 op de telefoon: kalender en zin boven, stappen eronder (liepen uit de tegel) */
@container vak (max-width:899.98px){
.afs-4{grid-template-columns:minmax(0,1fr);gap:28px}
.afs-4 .cal{width:140px;margin-left:0}.afs-4 .cal-n{font-size:64px}
.afs-4 .stp{padding:0}
.afs-4 .stp-n{gap:22px}
.afs-4 .stp-n span{font-size:17px;gap:16px}.afs-4 .stp-n u{width:46px;height:46px;font-size:18px}
.afs-4 .stp-l{left:21px;top:23px;bottom:23px;width:4px}
}
/* Ronde 12: werk wisselt vanzelf, nettere hover, grotere bijschriften, mooiere dienstkaarten */
.pjt-pg{position:absolute;left:0;right:0;bottom:0;z-index:2;height:3px;background:#1F8FFF;transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.pjt-t.nx .pjt-pg{animation:pjtpg 6s linear forwards}
.pjt.hold .pjt-t.nx .pjt-pg{animation-play-state:paused}
@keyframes pjtpg{to{transform:scaleX(1)}}
.pjt-t{transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s cubic-bezier(.22,1,.36,1)}
.pjt-t:not(.pjt-all):after{content:"";position:absolute;inset:0;z-index:0;background:rgba(17,17,17,0);transition:background-color .5s;pointer-events:none}
.pjt-o,.pjt-t:hover .pjt-o,.pjt-t:focus-visible .pjt-o{inset:auto auto 14px 14px;max-width:calc(100% - 28px);flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;padding:6px 6px 6px 16px;border-radius:999px;background:#FFFFFF;color:#111111;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 10px 28px -10px rgba(17,17,17,.45)}
.pjt-o{opacity:0;transform:translateY(12px);transition:opacity .35s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.34,1.45,.64,1)}
.pjt-o b,.pjt-t:hover .pjt-o b{font-size:16px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform:none}
.pjt-o b:after{display:none}
.pjt-o em,.pjt-t:hover .pjt-o em{font-size:14px;color:#6B6B6B;white-space:nowrap;transform:none}
.pjt-o:after{content:"↗";flex:none;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#1F8FFF;color:#FFFFFF;font-size:15px;font-weight:700}
.pjt-t:focus-visible .pjt-o{opacity:1;transform:none}
@media (hover:hover) and (pointer:fine){
.pjt-t:not(.pjt-all):hover{transform:translateY(-4px);box-shadow:0 26px 50px -26px rgba(17,17,17,.5)}
.pjt-t:not(.pjt-all):hover:after{background:rgba(17,17,17,.12)}
.pjt-t:not(.pjt-all):hover img{transform:scale(1.04);filter:none}
.pjt-t:hover .pjt-o{opacity:1;transform:none}
}
@media (hover:none),(pointer:coarse){.pjt-o{opacity:1;transform:none;background:#FFFFFF}}
.cap-t{font-size:32px;line-height:1.1;letter-spacing:-.02em}.cap .cap-l{font-size:18px;line-height:1.5}
.wim-tab[aria-selected=false]{background:#F5F5F7;border-color:#F5F5F7}
.wim-tab[aria-selected=false]:hover{background:#FFFFFF}
.wim-tab[aria-selected=true]{background:radial-gradient(130% 150% at 0% 0%,#2C2C30 0%,#111111 58%);border-color:#111111;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 28px 56px -28px rgba(17,17,17,.6)}
.wim-tab[aria-selected=true] .wim-nr{color:#1F8FFF}
.wim-ti:after{display:block;bottom:-7px;height:3px;border-radius:2px;right:auto;width:32px}
.wim-tab[aria-selected=true] .wim-ti{margin-bottom:18px}
@media (prefers-reduced-motion:reduce){.pjt-t,.pjt-o{transition:none!important}}
@container vak (max-width:899.98px){
.cap-t{font-size:26px}.cap .cap-l{font-size:16px}
.pjt-o,.pjt-t:hover .pjt-o{inset:auto auto 8px 8px;max-width:calc(100% - 16px);padding:4px 4px 4px 10px;gap:6px}
.pjt-o b,.pjt-t:hover .pjt-o b{font-size:12px;white-space:normal;overflow:visible}.pjt-o,.pjt-t:hover .pjt-o{padding:5px 10px;border-radius:12px}.pjt-o:after{display:none}
}
/* Tegels: logo op de merkkleur van het project, het grote vlak toont de hero */
.pjt-t:not(.pjt-all){transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s cubic-bezier(.22,1,.36,1),background-color .5s cubic-bezier(.65,0,.35,1)}
.pjt-lg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16% 14%}
.pjt-t .pjt-lg img{position:static;inset:auto;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.pjt-t.lgin .pjt-lg{animation:pjtlg .6s cubic-bezier(.34,1.45,.64,1) both}
@keyframes pjtlg{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.pjt-pg{display:none}
@container vak (max-width:899.98px){.pjt-lg{padding:16% 14%}.pjt-t .pjt-o{display:none}}
.pjt-lg{padding:16% 9%}
@container vak (max-width:899.98px){.pjt-lg{padding:16% 9%}}
/* MyNutriSpace: officiele bestanden naast elkaar (laadscherm-ring op #FF5500 + woordmerk wit), niet samengesteld */
.pjt-mns{display:flex;align-items:center;justify-content:center;width:100%}
.pjt-t .pjt-mns img{position:static;max-width:none;max-height:none;height:auto}
.pjt-t .pjt-mns .r{width:19%;margin:0 1% 0 -2%;transform:translateY(3%)}
.pjt-t .pjt-mns .w{width:74%;transform:translateY(11%)}
/* Aanvraag rechts: drie vastgeprikte kaartjes met stippellijn (naar 21st.dev "How It Works" van chamaac, in onze stijl) */
.hw3{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column}
.hw3-c{--r:-4deg;position:relative;width:74%;padding:30px 10px 10px;border-radius:20px;background:#FFFFFF;color:#111111;box-shadow:0 22px 40px -22px rgba(10,40,80,.55),0 2px 6px rgba(10,40,80,.12);transform:rotate(var(--r));transition:transform .5s cubic-bezier(.34,1.45,.64,1),box-shadow .5s}
.hw3-c.l{align-self:flex-start}.hw3-c.r{--r:4deg;align-self:flex-end}
.hw3-c:last-child{--r:-2.5deg}
.hw3-pn{position:absolute;left:50%;top:8px;width:20px;height:20px;margin-left:-10px;fill:#1F8FFF;transform:rotate(18deg);filter:drop-shadow(0 2px 1px rgba(17,17,17,.25))}
.hw3-in{border-radius:14px;background:#EEF6FF;border:1px solid #DCEBFF;padding:16px 18px 18px}
.hw3-n{display:block;font-weight:700;font-size:30px;line-height:1;letter-spacing:-.03em;color:#1F8FFF}
.hw3-in p{margin:10px 0 0;font-weight:500;font-size:18px;line-height:1.35;letter-spacing:-.01em;color:#111111}
.hw3-l{display:block;width:100%;height:40px;overflow:visible}
.hw3-l path{fill:none;stroke:#FFFFFF;stroke-opacity:.85;stroke-width:2;stroke-dasharray:6 6;vector-effect:non-scaling-stroke}
@media (hover:hover) and (pointer:fine){.hw3-c:hover{transform:rotate(calc(var(--r) * .3)) translateY(-4px);box-shadow:0 30px 50px -24px rgba(10,40,80,.6),0 2px 6px rgba(10,40,80,.12)}}
@media (prefers-reduced-motion:no-preference){
.hw3.arm:not(.go) .hw3-c{opacity:0;transform:translateY(-28px) rotate(calc(var(--r) * 3))}
.hw3.arm:not(.go) .hw3-l{clip-path:inset(0 0 100% 0)}
.hw3.go .hw3-c{transition:opacity .4s ease calc(var(--k) * .45s),transform .9s cubic-bezier(.34,1.56,.64,1) calc(var(--k) * .45s),box-shadow .5s}
.hw3.go .hw3-l{transition:clip-path .45s cubic-bezier(.65,0,.35,1) calc(var(--k) * .45s + .35s)}
.hw3.go .hw3-l{clip-path:inset(0 0 0 0)}
.hw3.go.done .hw3-c{transition:transform .5s cubic-bezier(.34,1.45,.64,1),box-shadow .5s}
}
@container vak (max-width:899.98px){.hw3-c{width:84%}.hw3-in p{font-size:17px}.hw3-n{font-size:26px}}
/* Aanvraag: de kaartjes rechts beginnen op de hoogte van de kop */
.aa .aag{margin-top:0}.aa-i{margin-bottom:56px}
.aa .aag>div:last-child{padding-top:6px}
.cap-e{margin-bottom:-6px}
.tr-st{transition:opacity .2s ease,transform .2s ease}.tr-st.sw{opacity:0;transform:translateY(-4px)}
/* Werkwijze: tekstblok onderaan uitgelijnd nu alle teksten drie regels zijn */
.pn .tx{min-height:0}
@container vak (max-width:899.98px){.pn .tx{min-height:0}}
/* Diensten: kaartenkolom en voorbeeldvak even hoog; geen los woord op de laatste regel */
@container vak (min-width:900px){.wim{align-items:stretch}.wim-tabs{height:100%}.wim-tab{flex:1 1 auto}.wim-panel{aspect-ratio:auto;min-height:calc((min(100cqw,1376px) - 120px) * .5)}}
.wim-tx{text-wrap:pretty}
/* Merk: merkboek-slider (mbk-) */
.mbk-hd .mbk-ip{margin-top:20px;max-width:56ch}
.mbk{display:grid;grid-template-columns:minmax(0,3.2fr) minmax(0,8.8fr);gap:64px;align-items:center;margin-top:64px}
.mbk-ls{display:flex;flex-direction:column}
.mbk-i{position:relative;display:flex;align-items:center;gap:16px;width:100%;min-height:64px;padding:16px 0;border:0;border-top:1px solid #E3E3E6;background:none;color:#6B6B6B;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .3s}
.mbk-i:last-child{border-bottom:1px solid #E3E3E6}
.mbk-i:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#1F8FFF;transform:scaleX(0);transform-origin:0 50%;transition:transform .6s cubic-bezier(.22,1,.36,1);z-index:1}
.mbk-i[aria-selected=true]{color:#111111}.mbk-i[aria-selected=true]:after{transform:scaleX(1)}
.mbk-i:hover{color:#111111}
.mbk-th{flex:none;position:relative;width:76px;aspect-ratio:1800/1012;border-radius:7px;overflow:hidden;background:#F5F5F7;box-shadow:0 0 0 1px rgba(17,17,17,.08);opacity:.6;filter:saturate(.6);transition:opacity .4s,filter .4s,box-shadow .4s,transform .45s cubic-bezier(.22,1,.36,1)}
.mbk-th img{display:block;width:100%;height:100%;object-fit:cover}
.mbk-i[aria-selected=true] .mbk-th,.mbk-i:hover .mbk-th{opacity:1;filter:none}
.mbk-i[aria-selected=true] .mbk-th{box-shadow:0 0 0 1px rgba(17,17,17,.08),0 10px 20px -10px rgba(17,17,17,.45);transform:translateY(-1px)}
.mbk-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.mbk-nm{font-size:18px;font-weight:500;line-height:1.2;letter-spacing:-.01em}
.mbk-kd{font-size:13px;color:#6B6B6B}
.mbk-main{min-width:0}
.mbk-bk{position:relative}
.mbk-bk:before,.mbk-bk:after{content:"";position:absolute;left:3%;right:3%;bottom:-10px;height:40px;border-radius:0 0 20px 20px;background:#EDEDF0;z-index:-1;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.mbk-bk:after{left:6%;right:6%;bottom:-20px;background:#F5F5F7;z-index:-2}
.mbk.sw .mbk-bk:before{transform:translateY(-6px)}.mbk.sw .mbk-bk:after{transform:translateY(-12px)}
.mbk-fr{position:relative;aspect-ratio:1800/1012;border-radius:20px;overflow:hidden;background:#F5F5F7;container-type:inline-size;box-shadow:0 1px 0 rgba(17,17,17,.04),0 24px 60px -28px rgba(17,17,17,.35);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.mbk-fr:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(17,17,17,.08);pointer-events:none;z-index:3}
.mbk-pgi{position:absolute;inset:0;opacity:0;visibility:hidden}
.mbk-fr img.mbk-pgi{width:100%;height:100%;display:block;pointer-events:none;-webkit-user-drag:none}
.mbk-pgi.on{opacity:1;visibility:visible;z-index:1}
.mbk-pgi.mv{transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1),visibility 0s linear .55s}
.mbk-pgi.mv.on{transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1),visibility 0s}
.mbk-end{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:4cqw;padding:0 6cqw;background:#F5F5F7}
.mbk-eh{font-weight:700;font-size:max(22px,4.6cqw);line-height:1;letter-spacing:-.03em}
.mbk-es{margin-top:1.4cqw;font-size:max(14px,1.75cqw);line-height:1.4;max-width:30ch;text-wrap:balance}
.mbk-eb{margin-top:3cqw}
.mbk-fan{position:relative;height:30cqw}
.mbk-fan img{position:absolute;left:50%;top:50%;width:62%;height:auto;aspect-ratio:1800/1012;border-radius:1.2cqw;box-shadow:0 1px 0 rgba(17,17,17,.06),0 1.6cqw 3.2cqw -1.4cqw rgba(17,17,17,.4);transform:translate(-50%,-50%) translate(var(--x),var(--y)) rotate(var(--r));transition:transform .8s cubic-bezier(.22,1,.36,1)}
.mbk-fan img:nth-child(1){--x:-28%;--y:-26%;--r:-7deg}.mbk-fan img:nth-child(2){--x:-9%;--y:-9%;--r:-2deg}.mbk-fan img:nth-child(3){--x:10%;--y:8%;--r:3deg}.mbk-fan img:nth-child(4){--x:28%;--y:26%;--r:8deg}
.mbk-end:not(.on) .mbk-fan img{transform:translate(-50%,-50%) rotate(0deg)}
.mbk-bt{position:absolute;right:20px;bottom:20px;z-index:4;display:flex;gap:8px}
.mbk-bt button{box-shadow:0 8px 22px -10px rgba(17,17,17,.55)}
.mbk-p,.mbk-n{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border:1px solid;font-size:14px;line-height:1;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .45s cubic-bezier(.22,1,.36,1),color .45s,border-color .45s,border-radius .45s cubic-bezier(.22,1,.36,1),transform .12s}
.mbk-p:active,.mbk-n:active{transform:scale(.97)}
.mbk-ai{display:none}
.mbk[data-b=kroeg] .mbk-p,.mbk[data-b=kroeg] .mbk-n{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.06em;border-radius:0}
.mbk[data-b=kroeg] .mbk-n{background:#C08F2E;border-color:#C08F2E;color:#111111}.mbk[data-b=kroeg] .mbk-n:hover{background:#A87B22;border-color:#A87B22}
.mbk[data-b=kroeg] .mbk-p{background:#FBF8F1;border-color:#FBF8F1;color:#17120A}.mbk[data-b=kroeg] .mbk-p:hover{background:#FFFFFF}
.mbk[data-b=tess] .mbk-p,.mbk[data-b=tess] .mbk-n{font-family:'Albert Sans',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.06em;border-radius:6px}
.mbk[data-b=tess] .mbk-n{background:#A0522D;border-color:#A0522D;color:#FFFFFF}.mbk[data-b=tess] .mbk-n:hover{background:#8A4524;border-color:#8A4524}
.mbk[data-b=tess] .mbk-p{background:#FFFFFF;border-color:rgba(28,28,28,.12);color:#1C1C1C}.mbk[data-b=tess] .mbk-p:hover{border-color:#1C1C1C}
.mbk[data-b=mns] .mbk-p,.mbk[data-b=mns] .mbk-n{font-family:'Roboto',sans-serif;font-weight:600;border-radius:24px}
.mbk[data-b=mns] .mbk-n{background:#FF5500;border-color:#FF5500;color:#FFFFFF}.mbk[data-b=mns] .mbk-n:hover{background:#D63F00;border-color:#D63F00}
.mbk[data-b=mns] .mbk-p{background:#FFFFFF;border-color:#E8E8E8;color:#0A0A0A}.mbk[data-b=mns] .mbk-p:hover{border-color:#0A0A0A}
.mbk[data-b=tg] .mbk-p,.mbk[data-b=tg] .mbk-n{font-family:'Schibsted Grotesk',sans-serif;font-weight:500;border-radius:999px;font-size:15px}
.mbk[data-b=tg] .mbk-ch{display:none}.mbk[data-b=tg] .mbk-ai{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#1F8FFF;color:#FFFFFF}
.mbk[data-b=tg] .mbk-ai svg{width:16px;height:16px}
.mbk[data-b=tg] .mbk-n{background:#111111;border-color:#111111;color:#FFFFFF;padding:0 6px 0 20px;gap:12px}
.mbk[data-b=tg] .mbk-p{background:#FFFFFF;border-color:#E3E3E6;color:#111111;padding:0 20px 0 6px;gap:12px}.mbk[data-b=tg] .mbk-p .mbk-ai{background:#F5F5F7;color:#111111}.mbk[data-b=tg] .mbk-p:hover{border-color:#111111}
.mbk-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@container vak (max-width:899.98px){
.mbk{grid-template-columns:minmax(0,1fr);gap:32px;margin-top:40px}
.mbk-ls{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}.mbk-i{min-height:0;padding:12px 0;gap:10px;flex-direction:column;align-items:flex-start;border-top:0}.mbk-i:last-child{border-bottom:0}
.mbk-th{width:100%}.mbk-nm{font-size:15px}.mbk-kd{display:none}
.mbk-fr{border-radius:14px}
.mbk-bk:before{bottom:-7px;height:28px;border-radius:0 0 14px 14px}.mbk-bk:after{bottom:-14px;border-radius:0 0 14px 14px}
.mbk-bt{top:calc(100% + 28px);bottom:auto;right:0}.mbk-bt button{box-shadow:none}.mbk-main{padding-bottom:72px}
.mbk[data-b] .mbk-p{border-color:rgba(17,17,17,.18)}
.mbk-p,.mbk-n{padding:0 14px}
.mbk[data-b=tg] .mbk-n{padding:0 6px 0 16px;gap:10px}.mbk[data-b=tg] .mbk-p{padding:0 16px 0 6px;gap:10px}
.mbk-end{grid-template-columns:1fr;padding:0 7cqw}.mbk-fan{display:none}
.mbk-eh{font-size:max(22px,7.4cqw)}.mbk-es{font-size:14px;margin-top:6px}
.mbk-eb.btn{height:40px;font-size:14px;margin-top:14px;gap:12px;padding:0 6px 0 18px}.mbk-eb.btn:before{width:30px;height:30px;margin-top:-15px;right:5px}
}
@media (prefers-reduced-motion:reduce){.mbk-pgi.mv,.mbk-pgi.mv.on,.mbk-bk:before,.mbk-bk:after,.mbk-i,.mbk-i:after,.mbk-th,.mbk-p,.mbk-n,.mbk-fan img{transition:none!important}.mbk.sw .mbk-bk:before,.mbk.sw .mbk-bk:after{transform:none}}
.hw3-in p{text-wrap:pretty}
/* Werk: tegels en "Bekijk al mijn werk" rechts naast het grote vlak (ronde 18) */
.wkrow{grid-template-columns:minmax(0,1fr) clamp(250px,26%,330px)}
.wkside{display:flex;flex-direction:column;gap:36px;min-width:0}
.wkside .pjt-w{margin-top:0}
.wkside .pjt{grid-template-columns:minmax(0,1fr);gap:10px;margin-top:12px}
.wkside .pjt-t{aspect-ratio:auto;height:96px}
.wkside .pjt-lg{padding:16px 20%}
.pjt-allb{margin-top:16px}.pjt-allb[aria-disabled]{cursor:default}
html.tgfx .wkside .pjt-w{opacity:0;transform:translateY(12px);transition:opacity .5s cubic-bezier(.22,1,.36,1) .12s,transform .5s cubic-bezier(.22,1,.36,1) .12s}
html.tgfx .wk.near ~ .wkside .cap,html.tgfx .wk.near ~ .wkside .pjt-w{opacity:1;transform:none}
@container vak (max-width:899.98px){.wkside{gap:32px;margin-top:32px}.wkside .cap{margin-top:0}.wkside .pjt{grid-template-columns:repeat(2,minmax(0,1fr))}.wkside .pjt-t{aspect-ratio:2000/1043;height:auto}.wkside .pjt-lg{padding:16% 9%}}
@media (prefers-reduced-motion:reduce){html.tgfx .wkside .pjt-w{transition:none}}
/* Werk ronde 19: bijschrift onder het grote vlak, projecten als ronde knoppen rechts */
.wkrow{grid-template-columns:minmax(0,max(560px,calc((100vh - 410px) * 2000 / 1043))) minmax(150px,1fr);column-gap:56px;row-gap:28px;align-items:end}
html.tgfx .wkrow .wk{width:100%}
.wkrow>.cap{grid-column:1;grid-row:2;flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:24px;row-gap:6px}
.wkrow>.cap .cap-e{width:100%;margin:0}.wkrow>.cap .cap-l{margin:0}
.wkside{grid-column:2;grid-row:1;gap:0;align-self:end}
.wkside .pjt{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:14px}
.wkside .pjt-t.pjc{position:relative;width:clamp(88px,8.4vw,120px);height:auto;aspect-ratio:1;border-radius:50%;overflow:visible;box-shadow:0 14px 30px -16px rgba(17,17,17,.5);transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s cubic-bezier(.22,1,.36,1)}
.wkside .pjt-t.pjc .pjt-lg{position:absolute;inset:0;padding:0;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center}
.pjc .pjt-lg .pjc-fill{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
.pjc .pjt-lg .pjc-bus{width:70%;max-width:none;height:auto;transform:translate(-2%,4%)}
.wkside .pjt-t.pjc:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 20px 36px -16px rgba(17,17,17,.55)}
.wkside .pjt-t.pjc:not(.pjt-all):hover img{transform:none;filter:none}
.wkside .pjt-t.pjc:after{border-radius:50%}.wkside .pjt-t.pjc:hover:after{background:rgba(17,17,17,0)}
.wkside .pjt-w{display:flex;flex-direction:column;align-items:center}.wkside .pjt{align-items:center}
.wkside .pjc .pjt-o,.wkside .pjc:hover .pjt-o{position:absolute;inset:auto calc(100% + 14px) auto auto;top:50%;left:auto;width:max-content;max-width:none;display:flex;flex-direction:row;align-items:baseline;gap:8px;padding:9px 16px;border-radius:999px;background:#FFFFFF;color:#111111;box-shadow:0 10px 30px -10px rgba(17,17,17,.45);opacity:0;transform:translate(8px,-50%);transition:opacity .3s,transform .45s cubic-bezier(.22,1,.36,1);pointer-events:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.wkside .pjc:hover .pjt-o,.wkside .pjc:focus-visible .pjt-o{opacity:1;transform:translate(0,-50%)}
.wkside .pjc .pjt-o b{font-size:15px;transform:none;white-space:nowrap}.wkside .pjc .pjt-o b:after{display:none}.wkside .pjc .pjt-o em{font-size:13px;color:#6B6B6B;transform:none;display:inline}
.wkside .pjc .pjt-o:after,.wkside .pjc .pjt-o:before{display:none}
.pjc-all{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:clamp(88px,8.4vw,120px);aspect-ratio:1;border-radius:50%;background:#111111;color:#FFFFFF;font-size:14px;font-weight:500;line-height:1.15;text-align:center;cursor:default}
.pjc-all i{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#1F8FFF}.pjc-all svg{width:15px;height:15px}
html.tgfx .wk.near ~ .cap{opacity:1;transform:none}
@container vak (max-width:899.98px){
.wkrow{display:flex;flex-direction:column;align-items:flex-start}.wkrow>.wk{order:0}.wkrow>.cap{order:1;grid-row:auto;flex-direction:column;align-items:flex-start;margin-top:32px}.wkrow>.wkside{order:2;align-self:stretch}
.wkside{margin-top:28px}
.wkside .pjt{flex-direction:row;gap:14px}
.wkside .pjt-t.pjc,.pjc-all{width:96px}
.wkside .pjc .pjt-o{display:none}
}
@media (hover:none),(pointer:coarse){.wkside .pjc .pjt-o{display:none}}
@media (prefers-reduced-motion:reduce){.wkside .pjt-t.pjc,.wkside .pjc .pjt-o{transition:none}}
/* Merk ronde 20: in één scherm, keuzes als kaartjes zoals Diensten */
.mbk-hd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:end}
.mbk-hd .mbk-ip{margin:0 0 6px;justify-self:end;max-width:44ch}
.mbk{margin-top:40px;align-items:start;gap:40px}
.mbk-main{width:100%;max-width:max(560px,calc((100vh - 290px) * 1800 / 1012));justify-self:end}
.mbk-ls{gap:10px}
.mbk-i,.mbk-i:last-child{border:1px solid #F5F5F7;border-radius:18px;background:#F5F5F7;padding:12px 16px 12px 12px;min-height:0;transition:background-color .45s cubic-bezier(.65,0,.35,1),border-color .3s,color .3s,box-shadow .45s cubic-bezier(.22,1,.36,1),transform .12s}
.mbk-i:after{display:none}
.mbk-i:hover{background:#FFFFFF;border-color:#E3E3E6}
.mbk-i:active{transform:scale(.98)}
.mbk-i[aria-selected=true]{background:radial-gradient(130% 150% at 0% 0%,#2C2C30 0%,#111111 58%);border-color:#111111;color:#FFFFFF;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 22px 44px -26px rgba(17,17,17,.6)}
.mbk-i[aria-selected=true] .mbk-kd{color:#A1A1A6}
.mbk-th{width:84px;border-radius:8px}
.mbk-en{position:absolute;left:4.7cqw;top:4.1cqw;font-size:max(9px,.82cqw);letter-spacing:.12em;text-transform:uppercase;color:#6B6B6B}
@container vak (max-width:899.98px){
.mbk-hd{grid-template-columns:minmax(0,1fr);gap:20px}.mbk-hd .mbk-ip{justify-self:start;margin:0}
.mbk{grid-template-columns:minmax(0,1fr);margin-top:32px}.mbk-main{max-width:none}
.mbk-ls{display:flex;flex-direction:column;gap:8px}.mbk-i,.mbk-i:last-child{flex-direction:row;align-items:center;padding:8px 14px 8px 8px;border-radius:14px;gap:14px}.mbk-th{width:72px}.mbk-nm{font-size:16px}.mbk-kd{display:block}
.mbk-en{display:none}
}
@container vak (min-width:900px) and (max-width:1199.98px){.mbk-th{width:60px}.mbk-nm{font-size:16px}.mbk-i,.mbk-i:last-child{gap:12px}}
@media (prefers-reduced-motion:reduce){.mbk-i{transition:none}}
/* Werk ronde 21: vlak breed, cirkels er direct naast, knop "Bekijk al mijn werk" als pil */
html.tgfx .wkstage{padding:24px 0 16px}
.wkrow{margin-top:32px;grid-template-columns:minmax(0,max(560px,min(calc(100% - 152px),calc((100vh - 330px) * 2000 / 1043)))) auto;justify-content:start;column-gap:32px;row-gap:22px}
.wkside .pjt-w{align-items:flex-start}.wkside .pjt{align-items:flex-start}
.wkrow>.wk-all{grid-column:1/-1;grid-row:2;justify-self:end;align-self:center;height:48px;font-size:16px;cursor:default}
.wkrow>.wk-all:before{width:34px;height:34px;margin-top:-17px;right:7px}
html.tgfx .wkrow>.wk-all{opacity:0;transform:translateY(12px);transition:opacity .5s cubic-bezier(.22,1,.36,1) .12s,transform .5s cubic-bezier(.22,1,.36,1) .12s,color .35s cubic-bezier(.4,0,.2,1) .06s}
html.tgfx .wk.near ~ .wk-all{opacity:1;transform:none}
.wkrow>.cap{max-width:calc(100% - 290px)}
@container vak (max-width:899.98px){.wkrow>.cap{max-width:none}.wkrow>.wk-all{order:3;margin-top:24px;justify-self:auto;align-self:flex-start}}
@media (prefers-reduced-motion:reduce){html.tgfx .wkrow>.wk-all{transition:none}}
/* Merk ronde 21 (Tom): kop en tekst links, kaartjes eronder, gekozen kaart in de merkkleur */
.mbk{margin-top:0;grid-template-columns:minmax(0,3.6fr) minmax(0,8.4fr);gap:56px;align-items:end}
.mbk-side{display:flex;flex-direction:column;min-width:0}
.mbk-side .mbk-hd{display:block}
.mbk-side .mbk-hd .mbk-ip{margin:20px 0 0;max-width:36ch;justify-self:auto}
.mbk-side .mbk-ls{margin-top:36px}
.mbk-i[aria-selected=true] .mbk-th{box-shadow:0 0 0 1px rgba(255,255,255,.35),0 10px 20px -10px rgba(17,17,17,.45)}
@container vak (max-width:899.98px){.mbk{grid-template-columns:minmax(0,1fr);gap:32px}.mbk-side .mbk-ls{margin-top:28px}}
.mbk .mbk-i[aria-selected=true]{background:var(--bc);border-color:var(--bc);color:var(--bt);box-shadow:0 22px 44px -26px var(--bs)}
.mbk .mbk-i[aria-selected=true] .mbk-kd{color:var(--bk)}
.mbk-bt{transition:opacity .2s ease,transform .2s ease}.mbk-bt.fx{opacity:0;transform:translateY(6px)}
@media (prefers-reduced-motion:reduce){.mbk-bt{transition:none}}
.mbk-pgi.was{opacity:1;visibility:visible;z-index:0}
.mbk-pgi.on{z-index:2}
.mbk-pgi.mv.on{transition:clip-path .75s cubic-bezier(.65,0,.35,1),transform .95s cubic-bezier(.22,1,.36,1),opacity 0s,visibility 0s}
.mbk-pgi.on{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){.mbk-pgi.mv.on{transition:none}}
.mbk-th{opacity:.92;filter:none}
@container vak (min-width:900px) and (max-width:1199.98px){.mbk{grid-template-columns:minmax(0,3.3fr) minmax(0,8.7fr);gap:36px;align-items:center}.mbk-kd{display:none}.mbk-i,.mbk-i:last-child{padding:10px 12px 10px 10px}.mbk-side .mbk-ls{margin-top:28px}.mbk-side .mbk-hd .mbk-ip{font-size:16px}}
/* Websites ronde 23: rechts één rustige kolom, bovenkant gelijk met het vlak */
.wkrow{grid-template-columns:minmax(0,min(calc(100% - 318px),calc((100vh - 250px) * 2000 / 1043))) 270px;justify-content:start;column-gap:48px;row-gap:0;align-items:start}
.wkrow>.wk{grid-column:1;grid-row:1}
.wkcol{grid-column:2;grid-row:1;display:flex;flex-direction:column;min-width:0}
.wkcol .cap{gap:12px}.wkcol .cap .cap-e{margin:0}.wkcol .cap-t{font-size:32px;line-height:1.1}.wkcol .cap .cap-l{font-size:17px;line-height:1.5;margin:0}
.wkcol .cap .wk-go{margin-top:14px}
.wkmore{margin-top:40px;padding-top:24px;border-top:1px solid #E3E3E6;display:flex;flex-direction:column;gap:14px}
.wkmore .pjt{display:flex;flex-direction:row;gap:12px;margin:0}
.wkmore .pjt-t.pjc{position:relative;width:60px;height:60px;aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 10px 22px -12px rgba(17,17,17,.5);transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.wkmore .pjt-t.pjc:hover{transform:translateY(-2px) scale(1.05)}
.wkmore .pjt-t.pjc:after{display:none}
.wkmore .pjc .pjt-lg{position:absolute;inset:0;padding:0;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center}
.wkmore .pjc .pjt-o{display:none}
.wkmore .pjt-t.pjc:not(.pjt-all):hover img{transform:none;filter:none}
.wk-al{align-self:flex-start;font-size:15px;font-weight:500;color:#111111;cursor:default;display:inline-flex;gap:6px}
.wk-al span{color:#1F8FFF;transition:transform .3s cubic-bezier(.22,1,.36,1)}.wk-al:hover span{transform:translateX(3px)}
html.tgfx .wkmore{opacity:0;transform:translateY(12px);transition:opacity .5s cubic-bezier(.22,1,.36,1) .12s,transform .5s cubic-bezier(.22,1,.36,1) .12s}
html.tgfx .wk.near ~ .wkcol .cap,html.tgfx .wk.near ~ .wkcol .wkmore{opacity:1;transform:none}
@container vak (max-width:899.98px){.wkrow{display:flex;flex-direction:column;align-items:stretch}.wkcol{margin-top:28px}.wkcol .cap-t{font-size:26px}.wkmore{margin-top:28px}}
@media (prefers-reduced-motion:reduce){html.tgfx .wkmore{transition:none}}
/* Branding ronde 23: kop op één regel, keuzes als pilletjes, cirkel in merkkleur bij wisselen */
.mbk{grid-template-columns:minmax(0,430px) minmax(0,1fr);gap:56px;align-items:stretch}
.mbk-side{justify-content:space-between}
.mbk-h{white-space:nowrap}
.mbk-side .mbk-ls{flex-direction:row;flex-wrap:wrap;gap:8px;margin-top:32px}
.mbk .mbk-i,.mbk .mbk-i:last-child{width:auto;flex:none;flex-direction:row;align-items:center;gap:10px;min-height:0;height:46px;padding:4px 16px 4px 4px;border-radius:999px;border:1px solid #E3E3E6;background:#FFFFFF}
.mbk .mbk-i:hover{border-color:#111111;background:#FFFFFF}
.mbk .mbk-i[aria-selected=true]{background:var(--bc);border-color:var(--bc);color:var(--bt);box-shadow:0 12px 26px -14px var(--bs)}
.mbk .mbk-th{width:54px;height:36px;aspect-ratio:auto;border-radius:999px;box-shadow:0 0 0 1px rgba(17,17,17,.08);opacity:1;transform:none}
.mbk .mbk-i[aria-selected=true] .mbk-th{box-shadow:0 0 0 1px rgba(255,255,255,.4);transform:none}
.mbk .mbk-nm{font-size:15px;white-space:nowrap}.mbk .mbk-kd{display:none}
.mbk-blob{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none}
@container vak (min-width:900px) and (max-width:1199.98px){.mbk{grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);gap:36px;align-items:center}.mbk-h{white-space:normal}}
@container vak (max-width:899.98px){.mbk{grid-template-columns:minmax(0,1fr)}.mbk-side .mbk-ls{margin-top:24px}.mbk .mbk-th{width:44px;height:30px}.mbk .mbk-i,.mbk .mbk-i:last-child{height:40px;padding:4px 14px 4px 4px}.mbk .mbk-nm{font-size:14px}}
.mbk{grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:48px}
.mbk-side .mbk-hd .mbk-ip{text-wrap:pretty;max-width:34ch}
.mbk .mbk-i,.mbk .mbk-i:last-child{height:44px;padding:4px 14px 4px 5px;gap:9px}
.mbk .mbk-th{width:48px;height:34px;border-radius:999px 8px 8px 999px}
.mbk .mbk-th img{object-position:12% 50%}
.mbk .mbk-nm{font-size:14.5px}
.mbk-side .mbk-ls{gap:8px 6px}
.mbk .mbk-th.mbk-lg{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 0 0 1px rgba(17,17,17,.1)}
.mbk .mbk-i[aria-selected=true] .mbk-th.mbk-lg{box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.mbk-lg .mbk-fill{width:100%;height:100%;object-fit:cover}.mbk-lg .mbk-bus{width:74%;height:auto;object-fit:contain}.mbk-lg .mbk-tg{width:58%;height:auto}
.mbk .mbk-i,.mbk .mbk-i:last-child{padding:4px 16px 4px 4px}
@container vak (min-width:900px) and (max-width:1199.98px){.mbk{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:40px;align-items:center}.mbk-side{justify-content:flex-start}}
@container vak (max-width:899.98px){.mbk{grid-template-columns:minmax(0,1fr);gap:28px;align-items:start}.mbk-side .mbk-ls{gap:8px}}
/* Websites ronde 24: kolom over de volle hoogte van het vlak; onderdelen komen één voor één binnen, mee met het inzoomen */
.wkcol{align-self:stretch;justify-content:space-between}
.wkmore{position:relative;margin-top:32px;border-top:0;padding-top:26px}
.wk-ln{position:absolute;left:0;right:0;top:0;height:1px;background:#E3E3E6;transform-origin:0 50%}
.wk-ln:after{content:"";position:absolute;left:0;top:-1px;width:40px;height:3px;border-radius:2px;background:#1F8FFF;transform-origin:0 50%}
html.tgfx .wkcol .cap,html.tgfx .wkcol .wkmore,html.tgfx .wk.near ~ .wkcol .cap,html.tgfx .wk.near ~ .wkcol .wkmore{opacity:1;transform:none;transition:none}
html.tgfx .wkrow{--wp:1}
html.tgfx .wkcol .cap>*,html.tgfx .wkmore>.lab,html.tgfx .wkmore .pjt-t,html.tgfx .wkmore .wk-al{--q:clamp(0,calc((var(--wp) - var(--s)) * 8),1);opacity:var(--q);transform:translate3d(0,calc((1 - var(--q)) * 22px),0)}
html.tgfx .wkcol .cap-e{--s:.58}html.tgfx .wkcol .cap-t{--s:.63}html.tgfx .wkcol .cap-l{--s:.68}html.tgfx .wkcol .wk-go{--s:.73}
html.tgfx .wk-ln{transform:scaleX(clamp(0,calc((var(--wp) - .76) * 6),1))}
html.tgfx .wk-ln:after{transform:scaleX(clamp(0,calc((var(--wp) - .84) * 7),1))}
html.tgfx .wkmore>.lab{--s:.8}
html.tgfx .wkmore .pjt-t{--s:.84;transform:translate3d(0,calc((1 - var(--q)) * 14px),0) scale(calc(.6 + var(--q) * .4))}
html.tgfx .wkmore .pjt-t+.pjt-t{--s:.88}
html.tgfx .wkmore .wk-al{--s:.91}
html.tgfx .wkmore .pjt-t.pjc:hover{transform:translateY(-2px) scale(1.05)}
html.tgfx .wkcol .cap.out>*{opacity:0;transform:translateY(-8px);transition:opacity .25s,transform .25s}
html.tgfx .wkcol .cap.in>*{opacity:0;transform:translateY(10px);transition:none}
html.tgfx .wkcol .cap>*{transition:opacity .35s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.22,1,.36,1)}
@container vak (max-width:899.98px){.wkcol{justify-content:flex-start}.wkmore{margin-top:28px}}
@media (prefers-reduced-motion:reduce){html.tgfx .wkrow{--wp:1!important}}
/* Websites ronde 24b (Tom): logo's boven, tekstblok onder, beide gecentreerd, geen lijn */
.wkcol{align-items:center;text-align:center}
.wkcol .wkmore{order:-1;margin:0;padding:0;align-items:center}
.wkcol .wkmore .pjt{justify-content:center}
.wkcol .wk-al{align-self:center}
.wkcol .cap{align-items:center;text-align:center;margin-top:32px}
.wkcol .cap .cap-l{max-width:30ch;text-wrap:balance}
html.tgfx .wkmore>.lab{--s:.58}html.tgfx .wkmore .pjt-t{--s:.62}html.tgfx .wkmore .pjt-t+.pjt-t{--s:.66}html.tgfx .wkmore .wk-al{--s:.7}
html.tgfx .wkcol .cap-e{--s:.74}html.tgfx .wkcol .cap-t{--s:.78}html.tgfx .wkcol .cap-l{--s:.82}html.tgfx .wkcol .wk-go{--s:.86}
@container vak (max-width:899.98px){.wkcol .cap{margin-top:28px}}
.wkcol .cap{margin-top:24px}.wkcol .cap .wk-go{margin-top:10px}
@container vak (min-width:900px) and (max-width:1199.98px){.wkcol .cap-t{font-size:24px}.wkcol .cap .cap-l{font-size:15px}.wkcol .cap .wk-go{height:48px;font-size:15px;padding-left:20px}.wkcol .cap .wk-go:before{width:34px;height:34px;margin-top:-17px;right:7px}.wkmore .pjt-t.pjc{width:48px;height:48px}.wkcol .cap{gap:8px;margin-top:16px}.wkmore{gap:10px}}
html.tgfx .wkcol .cap>*,html.tgfx .wkmore>.lab,html.tgfx .wkmore .pjt-t,html.tgfx .wkmore .wk-al{--q:clamp(0,calc((var(--wp) - var(--s)) * 14),1)}
html.tgfx .wkmore>.lab{--s:.78}html.tgfx .wkmore .pjt-t{--s:.8}html.tgfx .wkmore .pjt-t+.pjt-t{--s:.83}html.tgfx .wkmore .wk-al{--s:.85}
html.tgfx .wkcol .cap-e{--s:.86}html.tgfx .wkcol .cap-t{--s:.88}html.tgfx .wkcol .cap-l{--s:.9}html.tgfx .wkcol .wk-go{--s:.92}
/* Afspraken 02: echt voorbeeld (MyNutriSpace) in plaats van Fleur */
.afs-w2 .wf{background:#F5F5F7}
.wf .wf-shot{position:absolute;left:14px;right:14px;top:58px;bottom:14px;border-radius:12px;overflow:hidden;background:#FFFFFF;box-shadow:0 1px 0 rgba(17,17,17,.06),0 16px 34px -18px rgba(17,17,17,.45)}
.wf .wf-shot img{width:100%;height:100%;object-fit:cover;object-position:left top}
.afs-w2.shw .wf-s{opacity:0;filter:blur(8px)}.afs-w2.shw .wf .wim-bl{opacity:1;transform:none}
.wf .wim-bl.wf-shot{transition:opacity .9s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1)}
.wf .wf-shot picture{display:block;width:100%;height:100%}
@container vak (max-width:899.98px){.afs-w2 .pk-t{display:none}.wf .wf-shot{left:50%;right:auto;width:min(62%,240px);transform-origin:50% 100%;translate:-50% 0}}
@media (prefers-reduced-motion:reduce){.wf .wim-bl.wf-shot{transition:none}}
@container (max-width:479.98px){.wf .pk-t{display:none}}
/* Websites ronde 26: links uitgelijnd, derde rondje "Zie alles" */
.wkcol{align-items:flex-start;text-align:left}
.wkcol .wkmore{align-items:flex-start}
.wkcol .wkmore .pjt{justify-content:flex-start;align-items:center}
.wkcol .cap{align-items:flex-start;text-align:left}
.wkcol .cap .cap-l{text-wrap:pretty}
.pjc-zie{position:relative;flex:none;width:60px;height:60px;border-radius:50%;background:#111111;color:#FFFFFF;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:500;line-height:1;cursor:default;box-shadow:0 10px 22px -12px rgba(17,17,17,.5);transition:background-color .35s cubic-bezier(.22,1,.36,1),transform .35s cubic-bezier(.22,1,.36,1)}
.pjc-zie i{display:flex;color:#1F8FFF;transition:transform .35s cubic-bezier(.22,1,.36,1),color .35s}.pjc-zie svg{width:15px;height:15px}
.pjc-zie:hover{background:#1F8FFF;transform:translateY(-2px)}.pjc-zie:hover i{color:#FFFFFF;transform:translateX(3px)}
html.tgfx .wkmore .pjc-zie{--s:.86;--q:clamp(0,calc((var(--wp) - var(--s)) * 14),1);opacity:var(--q);transform:translate3d(0,calc((1 - var(--q)) * 14px),0) scale(calc(.6 + var(--q) * .4))}
html.tgfx .wkmore .pjc-zie:hover{transform:translateY(-2px)}
@container vak (min-width:900px) and (max-width:1199.98px){.pjc-zie{width:48px;height:48px;font-size:9.5px}.pjc-zie svg{width:12px;height:12px}}
/* Branding ronde 26: pilletjes direct onder de intro, even breed, rustiger als ze niet gekozen zijn */
.mbk-side{justify-content:flex-start}
.mbk-side .mbk-ls{display:grid;grid-template-columns:max-content;gap:8px;margin-top:32px}
.mbk .mbk-i,.mbk .mbk-i:last-child{width:100%;background:#F5F5F7;border-color:#F5F5F7;color:#111111;padding:4px 20px 4px 4px;gap:12px;transition:background-color .45s cubic-bezier(.65,0,.35,1),border-color .3s,color .3s,box-shadow .45s cubic-bezier(.22,1,.36,1),transform .25s cubic-bezier(.22,1,.36,1)}
.mbk .mbk-i:hover{background:#FFFFFF;border-color:#E3E3E6;transform:translateX(3px)}
.mbk .mbk-i[aria-selected=true]{transform:none}
.mbk .mbk-i .mbk-nm{opacity:.82}.mbk .mbk-i[aria-selected=true] .mbk-nm,.mbk .mbk-i:hover .mbk-nm{opacity:1}
.mbk .mbk-th.mbk-lg{box-shadow:0 0 0 2px #FFFFFF,0 4px 10px -4px rgba(17,17,17,.35)}
@container vak (max-width:899.98px){.mbk-side .mbk-ls{grid-template-columns:1fr 1fr;margin-top:24px}.mbk .mbk-i,.mbk .mbk-i:last-child{padding:4px 12px 4px 4px;gap:8px}.mbk .mbk-nm{font-size:13px;white-space:normal;line-height:1.15}}
.pjc-zie{padding-top:6px;gap:4px}
@container vak (min-width:900px) and (max-width:1199.98px){.pjc-zie{padding-top:4px;gap:3px}}
/* Branding: aanwijzen mag de gekozen merkkleur niet overschrijven (MNS en Tess werden wit) */
.mbk .mbk-i[aria-selected=true]:hover{background:var(--bc);border-color:var(--bc);color:var(--bt);transform:none}
/* Branding: keuzes als ronde logoknoppen, twee om twee, zonder naam (naam blijft voor schermlezers) */
.mbk-side .mbk-ls{display:grid;grid-template-columns:repeat(2,max-content);gap:18px;margin-top:36px}
.mbk .mbk-i,.mbk .mbk-i:last-child,.mbk .mbk-i[aria-selected=true],.mbk .mbk-i[aria-selected=true]:hover{width:84px;height:84px;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:none;gap:0;justify-content:center;transform:none}
.mbk .mbk-i .mbk-tx{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mbk .mbk-i:after{display:none}
.mbk .mbk-i .mbk-th,.mbk .mbk-i .mbk-th.mbk-lg{width:84px;height:84px;aspect-ratio:auto;border-radius:50%;opacity:.72;filter:saturate(.85);box-shadow:0 0 0 1px rgba(17,17,17,.08),0 10px 22px -14px rgba(17,17,17,.5);transform:none;transition:opacity .35s,filter .35s,box-shadow .45s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.34,1.45,.64,1)}
.mbk .mbk-i:hover .mbk-th{opacity:1;filter:none;transform:translateY(-3px)}
.mbk .mbk-i[aria-selected=true] .mbk-th,.mbk .mbk-i[aria-selected=true]:hover .mbk-th{opacity:1;filter:none;transform:scale(1.04);box-shadow:0 0 0 3px #FFFFFF,0 0 0 6px var(--bc),0 16px 30px -14px var(--bs)}
.mbk .mbk-i:focus-visible{outline:none}.mbk .mbk-i:focus-visible .mbk-th{box-shadow:0 0 0 3px #FFFFFF,0 0 0 6px #1F8FFF}
@container vak (max-width:899.98px){.mbk-side .mbk-ls{grid-template-columns:repeat(4,max-content);gap:14px;margin-top:24px}.mbk .mbk-i,.mbk .mbk-i:last-child,.mbk .mbk-i[aria-selected=true],.mbk .mbk-i[aria-selected=true]:hover,.mbk .mbk-i .mbk-th,.mbk .mbk-i .mbk-th.mbk-lg{width:64px;height:64px}}
.mbk-p:disabled,.mbk-n:disabled{opacity:.35;cursor:default;pointer-events:none}
/* Branding: logo's niet vervagen; alleen de ring in merkkleur om de gekozen knop */
.mbk .mbk-i .mbk-th,.mbk .mbk-i .mbk-th.mbk-lg{opacity:1;filter:none}
.mbk .mbk-i[aria-selected=true] .mbk-th.mbk-lg,.mbk .mbk-i[aria-selected=true]:hover .mbk-th.mbk-lg{box-shadow:0 0 0 3px #FFFFFF,0 0 0 6px var(--bc),0 16px 30px -14px var(--bs)}
/* Voettekst (gordijn): vult onderaan het scherm tot onder de kopbalk, zodat er geen blauwe strook overblijft */
html.tgfx .ft{display:flex;flex-direction:column;justify-content:flex-end;min-height:calc(100vh - 72px)}
/* Websites: alleen bovenregel, naam en knop (Tom, 18 okt) */
.wkcol .cap .cap-l{display:none}
/* Preview-slot: meer lucht tussen titel, tekst en knop */
.mbk-end .mbk-eh{line-height:1.02}
.mbk-end .mbk-es{margin-top:max(14px,2.2cqw)}
.mbk-end .mbk-eb{margin-top:max(22px,3.4cqw)}
@container vak (max-width:899.98px){.mbk-end .mbk-es{margin-top:10px}.mbk-end .mbk-eb{margin-top:18px}}
/* Prijs: drie blokken zonder bedragen (Tom, 18 okt) */
.prs-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:48px}
.prs-c{display:flex;flex-direction:column;gap:6px;padding:28px 28px 32px;border-radius:24px;background:#F5F5F7}
.prs-c:last-child{background:#111111;color:#FFFFFF}.prs-c:last-child .lab,.prs-c:last-child .prs-k{color:#A1A1A6}.prs-c:last-child .prs-x{color:#D1D1D6}
.prs-k{margin-top:28px;font-size:15px;font-weight:500;color:#6B6B6B}
.prs-t{position:relative;font-weight:700;font-size:clamp(26px,2.6cqw,36px);line-height:1.08;letter-spacing:-.025em;padding-bottom:18px}
.prs-t:after{content:"";position:absolute;left:0;bottom:0;width:32px;height:3px;border-radius:2px;background:#1F8FFF}
.prs-x{margin-top:12px;font-size:17px;line-height:1.5;color:#3A3A3C;max-width:34ch;text-wrap:pretty}
@container vak (max-width:899.98px){.prs-g{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:32px}.prs-c{padding:22px 22px 24px}.prs-k{margin-top:16px}.prs-x{font-size:16px}}
/* Prijs als verticale tabs (naar 21st.dev "Vertical Tabs"), Gratis springt eruit (Tom, 18 okt) */
.prs-z+.afs-z{padding-top:0}
.vt{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:stretch}
.vt-l{display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.vt-tabs{display:flex;flex-direction:column}
.vt-t{position:relative;display:flex;align-items:flex-start;gap:16px;width:100%;padding:22px 0 22px 20px;border:0;border-top:1px solid #E3E3E6;background:none;text-align:left;font:inherit;color:#A1A1A6;cursor:pointer;transition:color .4s}
.vt-t:first-child{border-top:0}
.vt-t:hover,.vt-t[aria-selected=true]{color:#111111}
.vt-bar{position:absolute;left:0;top:0;bottom:0;width:2px;background:#E3E3E6;overflow:hidden}
.vt-bar i{position:absolute;inset:0;background:#1F8FFF;transform:scaleY(0);transform-origin:50% 0}
.vt-t[aria-selected=true] .vt-bar i{transform:scaleY(1)}
.vt.auto .vt-t[aria-selected=true] .vt-bar i{animation:vtbar 5s linear both}.vt.hold .vt-t[aria-selected=true] .vt-bar i{animation-play-state:paused}
@keyframes vtbar{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.vt-n{font-size:12px;font-weight:500;margin-top:6px;opacity:.6;font-variant-numeric:tabular-nums}
.vt-b{display:flex;flex-direction:column;gap:4px;flex:1}
.vt-k{font-size:14px;font-weight:500;color:#6B6B6B}
.vt-ti{font-weight:700;font-size:clamp(28px,3cqw,40px);line-height:1.05;letter-spacing:-.025em}
.vt-dw{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1)}
.vt-d{min-height:0;overflow:hidden;font-size:17px;line-height:1.5;color:#3A3A3C;max-width:40ch;opacity:0;transition:opacity .3s;text-wrap:pretty}
.vt-t[aria-selected=true] .vt-dw{grid-template-rows:1fr}.vt-t[aria-selected=true] .vt-d{opacity:1;padding-top:8px;transition-delay:.1s}
.vt-t:focus-visible{outline:2px solid #1F8FFF;outline-offset:4px}
.vt-r{display:flex}
.vt-fr{position:relative;flex:1;min-height:520px;border-radius:32px;overflow:hidden;background:#F5F5F7;isolation:isolate}
.vt-p{position:absolute;inset:0;display:flex;flex-direction:column;padding:40px;transform:translate3d(0,100%,0);opacity:0;cursor:pointer}
.vt-p.on{transform:none;opacity:1;z-index:1}
.vt-p.go{transition:transform .8s cubic-bezier(.22,1,.36,1),opacity .45s ease}
.vt-p.up{transform:translate3d(0,-100%,0)}
.vt-pl{font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.vt-big{margin-top:auto;font-weight:700;font-size:clamp(64px,9cqw,132px);line-height:.92;letter-spacing:-.045em}
.vt-dot{color:#1F8FFF}
.vt-p1{background:#111111;color:#FFFFFF}
.vt-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;margin-bottom:56px}
.vt-chips span{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 10px;border-radius:999px;background:#1D1D1F;border:1px solid #3A3A3C;font-size:15px;font-weight:500}
.vt-ck{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#1F8FFF;color:#FFFFFF;font-style:normal;font-size:12px;font-weight:700}
.vt-p2{background:#F5F5F7;color:#111111}
.vt-doc{margin:auto;width:min(78%,420px);background:#FFFFFF;border-radius:18px;padding:26px 26px 22px;box-shadow:0 30px 60px -30px rgba(17,17,17,.45),0 1px 0 rgba(17,17,17,.05);transform:rotate(-2deg)}
.vt-dh{display:flex;align-items:center;gap:10px;padding-bottom:16px;border-bottom:1px solid #E3E3E6}.vt-dh img{width:26px;height:26px}.vt-dh b{font-size:20px;letter-spacing:-.01em}
.vt-doc ul{list-style:none;margin:0;padding:6px 0}
.vt-doc li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid #F0F0F2;font-size:15px}
.vt-doc li i{display:block;width:56px;height:8px;border-radius:4px;background:#E3E3E6}
.vt-tot{display:flex;justify-content:space-between;align-items:baseline;padding-top:14px}.vt-tot span{font-size:14px;color:#6B6B6B}.vt-tot b{font-size:22px;letter-spacing:-.015em;color:#1F8FFF}
.vt-p3{background:#1F8FFF;color:#FFFFFF}.vt-p3 .vt-dot{color:#111111}
.vt-p3 .vt-big{font-size:clamp(56px,7.5cqw,108px)}
.vt-list{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.vt-list li{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:500}.vt-p3 .vt-ck{background:#FFFFFF;color:#1F8FFF}
.vt-note{margin:16px 0 56px;font-size:14px;opacity:.85}
.vt-nav{position:absolute;right:24px;bottom:24px;z-index:3;display:flex;gap:10px}
.vt-nav button{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#111111;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s,background-color .3s}
.vt-nav button:hover{background:#FFFFFF;transform:translateY(-2px)}.vt-nav button:active{transform:scale(.92)}.vt-nav svg{width:18px;height:18px}
@media (prefers-reduced-motion:reduce){.vt-p.go{transition:none}.vt-dw,.vt-d{transition:none}}
@container vak (max-width:899.98px){
.vt{grid-template-columns:minmax(0,1fr);gap:24px}.vt-l{display:contents}.vt-h{order:0}.vt-r{order:1}.vt-tabs{order:2}
.vt-fr{min-height:0;aspect-ratio:4/3.6;border-radius:24px}.vt-p{padding:22px}
.vt-big{font-size:clamp(48px,15cqw,80px)}.vt-p3 .vt-big{font-size:clamp(40px,12cqw,64px)}
.vt-chips{margin-bottom:56px}.vt-chips span{height:34px;font-size:13px}
.vt-doc{width:86%;padding:18px}.vt-doc li{padding:8px 0;font-size:13px}.vt-tot b{font-size:18px}
.vt-list li{font-size:15px}.vt-note{margin-bottom:60px}
.vt-ti{font-size:26px}.vt-d{font-size:16px}.vt-t{padding:16px 0 16px 18px}
}
.vt .vt-p .vt-big{margin-top:auto;margin-bottom:0}
.vt .vt-p .vt-note{margin:14px 0 72px;font-size:14px}
.vt .vt-p .vt-chips{margin-bottom:72px}
.vt .vt-p3 .vt-list{margin-bottom:0}
@container vak (max-width:899.98px){.vt .vt-p .vt-note,.vt .vt-p .vt-chips{margin-bottom:64px}}
/* Prijs ronde 2: Gratis blauw, Per maand inkt, geen pijlknoppen, beweging per kaart (Tom, 18 okt) */
.vt-n{opacity:.5}
.vt .vt-p1{background:#1F8FFF;color:#FFFFFF}.vt .vt-p1 .vt-dot{color:#111111}
.vt .vt-p1 .vt-chips span{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4)}
.vt .vt-p1 .vt-ck{background:#FFFFFF;color:#1F8FFF}
.vt .vt-p3{background:#111111;color:#FFFFFF}.vt .vt-p3 .vt-dot{color:#1F8FFF}.vt .vt-p3 .vt-ck{background:#1F8FFF;color:#FFFFFF}
.vt .vt-p .vt-chips{margin-bottom:0}.vt .vt-p3 .vt-list{margin-bottom:0}
.vt .vt-p .vt-note{margin:auto 0 0;padding-top:24px;font-size:13px;opacity:.6}
.vt .vt-p3 .vt-big{margin-top:auto}
.vt-p3 .vt-list+.vt-note{margin-top:0}
.vt .vt-p3{justify-content:flex-start}
.vt .vt-p3 .vt-big{margin-top:auto}.vt .vt-p3 .vt-note{margin-top:32px}
@media (prefers-reduced-motion:no-preference){
/* tekst groot komt omhoog uit een masker */
.vt.seen .vt-p.on .vt-big{animation:vtup .9s cubic-bezier(.22,1,.36,1) both .15s}
.vt.seen .vt-p.on .vt-dot{display:inline-block;animation:vtpop .6s cubic-bezier(.34,1.8,.64,1) both .75s}
@keyframes vtup{from{opacity:0;transform:translate3d(0,40px,0)}to{opacity:1;transform:none}}
@keyframes vtpop{from{transform:scale(0)}to{transform:scale(1)}}
/* Gratis: drie stappen worden een voor een afgevinkt */
.vt .vt-p1 .vt-chips span{opacity:.35}
.vt .vt-p1 .vt-chips .vt-ck{transform:scale(0)}
.vt.seen .vt-p1.on .vt-chips span{animation:vtchip .5s cubic-bezier(.22,1,.36,1) both calc(.9s + var(--j) * .45s)}
.vt.seen .vt-p1.on .vt-chips .vt-ck{animation:vtpop .55s cubic-bezier(.34,1.8,.64,1) both calc(1.05s + var(--j) * .45s)}
@keyframes vtchip{from{opacity:.35;background:rgba(255,255,255,.06)}to{opacity:1;background:rgba(255,255,255,.18)}}
/* Offerte: kaart valt in, regels lopen vol, "op maat" ploft */
.vt.seen .vt-p2.on .vt-doc{animation:vtdoc .9s cubic-bezier(.22,1,.36,1) both .1s}
@keyframes vtdoc{from{opacity:0;transform:translate3d(0,36px,0) rotate(-7deg)}to{opacity:1;transform:rotate(-2deg)}}
.vt.seen .vt-p2.on .vt-doc li{animation:vtrow .45s cubic-bezier(.22,1,.36,1) both calc(.55s + var(--j) * .22s)}
.vt .vt-doc li i{transform-origin:100% 50%}
.vt.seen .vt-p2.on .vt-doc li i{animation:vtbarx .55s cubic-bezier(.22,1,.36,1) both calc(.7s + var(--j) * .22s)}
.vt.seen .vt-p2.on .vt-tot b{display:inline-block;animation:vtpop .6s cubic-bezier(.34,1.8,.64,1) both 1.75s}
@keyframes vtrow{from{opacity:0;transform:translate3d(-10px,0,0)}to{opacity:1;transform:none}}
@keyframes vtbarx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* Per maand: drie vinkjes na elkaar */
.vt.seen .vt-p3.on .vt-list li{animation:vtrow .45s cubic-bezier(.22,1,.36,1) both calc(.8s + var(--j) * .35s)}
.vt.seen .vt-p3.on .vt-list .vt-ck{animation:vtpop .55s cubic-bezier(.34,1.8,.64,1) both calc(.9s + var(--j) * .35s)}
.vt.seen .vt-p3.on .vt-note{animation:vtfade .5s ease both 2s}
@keyframes vtfade{from{opacity:0}to{opacity:.6}}
}
@container vak (max-width:899.98px){.vt .vt-fr{aspect-ratio:auto;height:440px}.vt .vt-p .vt-note{padding-top:16px}}
/* Gratis: een mini-site bouwt zich op van schets naar echte site, daarna een stempel (Tom, 18 okt) */
.vt-mk{position:absolute;right:40px;top:40px;width:46%;aspect-ratio:16/10.4;border-radius:14px;background:#FFFFFF;box-shadow:0 30px 60px -28px rgba(10,40,90,.6),0 0 0 1px rgba(255,255,255,.3);transform:rotate(3deg);overflow:visible}
.vt-mb{display:flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-bottom:1px solid #EEEEF0}.vt-mb i{width:7px;height:7px;border-radius:50%;background:#E3E3E6}
.vt-mb span{margin-left:8px;font-size:10px;color:#8E8E93;font-weight:500}
.vt-ms{position:absolute;left:0;right:0;top:24px;bottom:0;border-radius:0 0 14px 14px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto 1fr;gap:6px 10px;padding:14px;background:#F5F5F7}
.vt-ms b{display:block;border-radius:5px;background:#E1E1E6}
.vt-ms .h{grid-column:1;height:12px;width:80%}.vt-ms .t{grid-column:1;height:7px}.vt-ms .t.s{width:65%}.vt-ms .bt{grid-column:1;height:14px;width:42%;border-radius:999px;background:#CFCFD4;margin-top:4px}
.vt-ms .im{grid-column:2;grid-row:1/5;border-radius:8px}
.vt-mi{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top;clip-path:inset(0 100% 0 0)}
.vt-st{position:absolute;right:-18px;bottom:-22px;display:flex;align-items:center;gap:8px;padding:10px 18px 10px 10px;border-radius:999px;background:#111111;color:#FFFFFF;font-weight:700;font-size:18px;letter-spacing:-.01em;box-shadow:0 16px 30px -14px rgba(0,0,0,.6);transform:rotate(-8deg)}
.vt-st i{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#1F8FFF;font-style:normal;font-size:13px}
.vt .vt-p1 .vt-big{position:relative;z-index:1}
@media (prefers-reduced-motion:no-preference){
.vt .vt-p1 .vt-mk{opacity:0}
.vt.seen .vt-p1.on .vt-mk{animation:vtmk .9s cubic-bezier(.22,1,.36,1) both .1s}
@keyframes vtmk{from{opacity:0;filter:blur(6px);transform:translate3d(0,40px,0) rotate(6deg) scale(.96)}60%{filter:blur(0)}to{opacity:1;filter:none;transform:rotate(3deg)}}
.vt.seen .vt-p1.on .vt-ms b{animation:vtsk .4s cubic-bezier(.22,1,.36,1) both calc(.5s + var(--j) * .12s)}
@keyframes vtsk{from{opacity:0;transform:scaleX(.3);transform-origin:0 50%}to{opacity:1;transform:none}}
.vt.seen .vt-p1.on .vt-mi{animation:vtwipe .9s cubic-bezier(.65,0,.35,1) both 1.55s}
@keyframes vtwipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.vt .vt-p1 .vt-st{opacity:0}
.vt.seen .vt-p1.on .vt-st{animation:vtstamp .55s cubic-bezier(.34,1.7,.64,1) both 2.45s}
@keyframes vtstamp{0%{opacity:0;transform:rotate(-18deg) scale(1.5)}60%{opacity:1}100%{opacity:1;transform:rotate(-8deg) scale(1)}}
.vt.seen .vt-p1.on .vt-mk{animation:vtmk 1.5s cubic-bezier(.16,1,.3,1) both .15s}
@keyframes vtshake{0%,100%{transform:rotate(3deg)}30%{transform:rotate(3deg) translate3d(0,3px,0)}60%{transform:rotate(3deg) translate3d(0,-1px,0)}}
}
@media (prefers-reduced-motion:reduce){.vt-mi{clip-path:none}}
@container vak (max-width:899.98px){.vt-mk{right:18px;top:48px;width:58%;border-radius:10px}.vt-mb{height:18px}.vt-mb span{display:none}.vt-ms{top:18px;padding:8px;gap:4px 6px}.vt-st{right:-10px;bottom:-16px;font-size:14px;padding:7px 13px 7px 7px}.vt-st i{width:20px;height:20px;font-size:11px}}
/* Prijs: lijst links als zachte rijen, voortgang als balk onderin de gekozen rij (Tom, 18 okt) */
.vt .vt-tabs{gap:6px}
.vt .vt-t,.vt .vt-t:first-child{border:0;border-radius:20px;padding:20px 24px 24px;gap:18px;align-items:flex-start;color:#B4B4BA;transition:background-color .45s cubic-bezier(.22,1,.36,1),color .35s}
.vt .vt-t:hover{background:#FAFAFB;color:#6B6B6B}
.vt .vt-t[aria-selected=true]{background:#F5F5F7;color:#111111}
.vt .vt-n{display:flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;margin-top:2px;border-radius:50%;background:#F5F5F7;color:#8E8E93;font-size:12px;opacity:1;transition:background-color .35s,color .35s}
.vt .vt-t[aria-selected=true] .vt-n{background:#111111;color:#FFFFFF}
.vt .vt-k{color:inherit;opacity:.75}
.vt .vt-t[aria-selected=true] .vt-k{color:#6B6B6B;opacity:1}
.vt .vt-ti{font-size:clamp(24px,2.4cqw,34px)}
.vt .vt-bar{left:72px;right:24px;top:auto;bottom:12px;width:auto;height:3px;border-radius:2px;background:transparent}
.vt .vt-t[aria-selected=true] .vt-bar{background:#E3E3E6}
.vt .vt-bar i{transform:scaleX(0);transform-origin:0 50%;border-radius:2px}
.vt .vt-t[aria-selected=true] .vt-bar i{transform:scaleX(1)}
.vt.auto .vt-t[aria-selected=true] .vt-bar i{animation:vtbarh 6.5s linear both}
@keyframes vtbarh{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@container vak (max-width:899.98px){.vt .vt-t,.vt .vt-t:first-child{padding:16px 16px 20px;gap:14px}.vt .vt-bar{left:60px;right:16px;bottom:10px}.vt .vt-ti{font-size:24px}}
/* Prijs: balk echt stil tot het vlak in beeld is; gekozen nummer blauw */
.vt.auto.hold .vt-t[aria-selected=true] .vt-bar i{animation-play-state:paused}
.vt .vt-t[aria-selected=true] .vt-n{background:#1F8FFF;color:#FFFFFF}
/* Knoppen naar het formulier (Tom, 18 okt): overal "Aanvragen" */
.brow{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.brow .brow-l{font-weight:500}
.wcta{display:flex;justify-content:flex-start;padding-top:48px;padding-bottom:16px}
.qcta{margin-top:40px}
.wlk-s{margin-top:18px;font-size:15px;color:#6B6B6B}.wlk-s .tl{color:#111111}
@container vak (max-width:899.98px){.wcta{padding-top:32px}.qcta{margin-top:28px}.brow{gap:20px}}
/* Hero op de telefoon: bovenregel mag niet buiten beeld lopen */
@container vak (max-width:899.98px){.hsub{white-space:normal;font-size:clamp(22px,7cqw,28px)}}
.wk.mock{cursor:pointer}

/* ================================================================
   TELEFOON (Tom, 18 okt): web blijft leidend en ongewijzigd; onder 600 px
   een eigen indeling, elke sectie zo veel mogelijk één scherm.
   Hoogtes in svh (vast, niet dvh: dan zou alles meeschalen met Safari's balk).
   ================================================================ */
@media (max-width:599.98px){
/* Hero: schermvullend, grote tekst bovenaan, de rest onderaan */
.vak .hero{min-height:calc(100svh - 60px);padding:clamp(28px,6svh,56px) 20px clamp(36px,7svh,64px);justify-content:space-between}
.vak .giant{order:1;margin:0;font-size:clamp(56px,16.4vw,72px)}
.vak .hero .col{order:2;margin-top:auto;gap:18px}

/* Websites: past op één scherm, vlak over de volle breedte */
.vak .werk{padding:36px 0 44px}
.vak .wkrow{margin-top:20px}
.vak .wkrow>.wk{width:100%;max-height:none;aspect-ratio:auto;height:clamp(260px,calc(100svh - 380px),540px)}
.vak .wk img.om{object-fit:cover;object-position:center top}
.pjt-fl{object-position:center top}
.vak .wkcol{margin-top:18px;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:center}
.vak .wkcol .cap{display:contents}
.vak .wkcol .cap .cap-e{grid-column:1/-1;grid-row:1}
.vak .wkcol .cap .cap-t{grid-column:1/-1;grid-row:2;margin-top:6px;font-size:24px}
.vak .wkcol .cap .wk-go{grid-column:1;grid-row:3;margin-top:14px;height:44px;gap:10px;padding:0 6px 0 18px;font-size:15px}
.vak .wkcol .cap .wk-go:before,.vak .wkcol .cap .wk-go .ar{width:32px;height:32px}
.vak .wkcol .cap .wk-go:before{right:6px;margin-top:-16px}
.vak .wkcol .wkmore{grid-column:2;grid-row:3;justify-self:end;order:0;margin:14px 0 0;padding:0}
.vak .wkcol .wkmore>.lab{display:none}
.vak .wkcol .wkmore .pjt{gap:8px}
.vak .wkmore .pjt-t.pjc,.vak .pjc-zie{width:44px;height:44px}
.vak .pjc-zie{font-size:9px;padding-top:3px;gap:2px}.vak .pjc-zie svg{width:11px;height:11px}

/* Branding: pijltje midden in het blauwe rondje */
.vak .mbk-eb.btn{padding:0 5px 0 18px}
.vak .mbk-eb.btn .ar{width:30px;height:30px}

/* Werkwijze: kleinere kaartjes */
.vak .pn{padding:20px;gap:16px;border-radius:20px}
.vak .pn .nr{font-size:48px}
.vak .pn .pst{margin-bottom:14px}
.vak .pn h3{margin-bottom:6px}
.vak .pn p{font-size:15px;line-height:1.45}

/* Prijs: kaart, drie tabs naast elkaar, uitleg van de gekozen tab eronder */
.vak .prs-z{padding:40px 0 44px}
.vak .vt{gap:14px}
.vak .vt .vt-fr{height:clamp(300px,calc(100svh - 400px),440px)}
.vak .vt-ms{border-radius:0 0 10px 10px}
.vak .vt-mk{top:40px;right:16px;width:44%}
.vak .vt .vt-p1 .vt-chips{flex-direction:column;flex-wrap:nowrap;gap:6px;margin-top:12px}
.vak .vt .vt-p1 .vt-chips span{height:auto;padding:0;border:0;background:none;font-size:14px;opacity:1}
.vak .vt.seen .vt-p1.on .vt-chips span{animation-name:vtrow}
.vak .vt-tabs{--dh:88px;position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding-bottom:var(--dh)}
.vak .vt .vt-t,.vak .vt .vt-t:first-child{position:static;flex-direction:column;align-items:flex-start;gap:8px;padding:12px 10px 10px;border-radius:16px}
.vak .vt .vt-n{width:24px;height:24px;margin:0;font-size:11px}
.vak .vt .vt-b{gap:2px}
.vak .vt .vt-k{font-size:12px}
.vak .vt .vt-ti{font-size:15px;line-height:1.2;letter-spacing:-.01em}
.vak .vt .vt-bar{position:relative;left:auto;right:auto;top:auto;bottom:auto;order:9;width:100%;height:3px;margin-top:auto}
.vak .vt .vt-dw{position:absolute;left:4px;right:4px;bottom:0;height:var(--dh)}
.vak .vt .vt-d{max-width:none;font-size:15px;line-height:1.45;color:#3A3A3C}
.vak .vt .vt-t[aria-selected=true] .vt-d{padding-top:12px}

/* Garantie: vier tegels om doorheen te vegen, één scherm hoog */


.vak .afs-t .afs-x,.vak .afs-t.afs-g3 .afs-x{flex-direction:row;justify-content:flex-start;align-items:baseline;gap:20px;align-self:stretch}
.vak .afs-t .gl{text-align:left}
.vak .afs-t.afs-g3 .s3{margin-block:auto}
.vak .afs-4 .l4{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:18px;row-gap:16px}
.vak .afs-4 .l4>.lab{grid-column:1/-1}
.vak .afs-4 .cal{width:96px;border-radius:20px}
.vak .afs-4 .cal-t{padding:7px;font-size:12px}
.vak .afs-4 .cal-n{font-size:44px;padding:8px 0 12px}
.vak .afs-4 .gl{margin:0}


/* Kopbalk en voettekst: rekening houden met de randen van het toestel (viewport-fit=cover) */
.vak .hd{box-sizing:content-box;padding-top:env(safe-area-inset-top,0px)}

/* Wie: kop, tekst, het gesprek, dan de knop met de contactregel */
.vak .two.h{gap:0}
.vak .two.h>div:first-child{display:contents}
.vak .two.h>div:first-child>.lab{order:1}
.vak .two.h>div:first-child>.h2{order:2}
.vak .two.h>div:first-child>p[data-r]:not(.wlk-s){order:3;margin-top:20px!important;font-size:16px;line-height:1.55}
.vak .two.h>.chat{order:4;margin-top:28px}
.vak .two.h .wlk,.vak .two.h .wlk-s{display:none}
.vak .two.h .wlk{order:5;margin-top:28px}
.vak .two.h .wlk-s{order:6;margin-top:14px;line-height:1.6}
.vak .wlk-s a.tl{display:inline;min-height:0;font-size:15px}
.vak .wlk-s a.tl:before{bottom:-1px}.vak .wlk-s a.tl:after{bottom:-1.5px}
.vak .ch{padding:12px 14px}
.vak .ch .av{width:36px;height:36px}
.vak .cms{gap:10px;padding:16px 14px 12px}
.vak .cms .m{padding:10px 14px;font-size:15px;line-height:1.4;border-radius:18px}
.vak .inb{margin:2px 10px 10px;padding:6px 6px 6px 16px;font-size:14px}
.vak .inb .snd{width:34px;height:34px}

/* Aanvraag: minder ruimte, de drie keuzes naast elkaar als tegels */
.vak .aa{padding:56px 0 48px}
.vak .aa-i{margin-bottom:32px}
.vak .aag{gap:96px}
.vak .pls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.vak .pil{flex-direction:column;justify-content:center;gap:8px;min-height:84px;padding:12px 6px;border-radius:18px;text-align:center;font-size:14px;line-height:1.2}

/* Voettekst: menu en socials naast elkaar, zwart tot onderaan het scherm */
.vak .ft{padding:52px 0 calc(88px + env(safe-area-inset-bottom,0px))}
.vak .ft .gw{overflow:visible}.vak .ft .gw img{margin-bottom:0}
.vak .ft-g{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px 16px}
.vak .ft-l{grid-column:1/-1;gap:28px}
.vak .ft-c a.tl{min-height:38px}
.vak .ft-ic{display:grid;grid-template-columns:repeat(2,48px);gap:10px}
.vak .ft-ic .ic{width:48px;height:48px}
.vak .ft-b{margin-top:36px}
.vak .ft .gw{margin-top:36px}
.vak .gw img{width:100%}

/* ---- Ronde 4 (Tom, 18 okt) ---- */
/* Hero: de shader midden in beeld en duidelijker */
.vak .hero .shd{-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 36%,#000 58%,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,transparent 36%,#000 58%,#000 78%,transparent 100%)}

/* Elke sectie minstens één scherm hoog: de volgende sectie staat niet al in beeld */
.vak .werk,.vak .mbk-z,.vak .prs-z{box-sizing:border-box;min-height:calc(100svh - 60px);display:flex;flex-direction:column;justify-content:center}
.vak .werk>*,.vak .mbk-z>*,.vak .prs-z>*{width:100%}
.vak .werk{padding:28px 0}
.vak .mbk-z{padding:32px 0!important}
.vak .prs-z{padding:28px 0}

/* Websites: de site in een telefoon, de andere projecten ernaast, de tekst eronder */
.vak .wkrow{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:center;margin-top:18px}




.vak .wkcol{display:contents}
.vak .wkcol .wkmore{grid-column:2;grid-row:1;justify-self:center;align-self:center;margin:0;display:flex;flex-direction:column;align-items:center;gap:12px}
.vak .wkcol .wkmore>.lab{display:block;font-size:12px;text-align:center}
.vak .wkcol .wkmore .pjt{flex-direction:column;gap:14px}
.vak .wkmore .pjt-t.pjc,.vak .pjc-zie{width:56px;height:56px}
.vak .pjc-zie{font-size:10px}
.vak .wkcol .cap{grid-column:1/-1;grid-row:2;display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-top:34px}
.vak .wkcol .cap .cap-e,.vak .wkcol .cap .cap-t,.vak .wkcol .cap .wk-go{grid-column:auto;grid-row:auto}
.vak .wkcol .cap .cap-t{margin-top:2px}
.vak .wkcol .cap .wk-go{margin-top:12px}

/* iPhone (nagebouwd naar het idee van 21st.dev "Phone Mockups 1", solaceui, MIT; eigen CSS, verhoudingen iPhone 15 Pro 71,5 × 146,6 mm).
   Rand van titanium, zwarte rand om het scherm, Dynamic Island, zijknoppen. Maten in cqw = procent van de breedte van de telefoon. */
.vak .wkrow>.wk,.vak .wf .wf-shot{container-type:inline-size;box-sizing:border-box;aspect-ratio:71.5/146.6;border:0;padding:0;border-radius:16.5% / 8.05%;overflow:visible;background:linear-gradient(140deg,#a7a39d 0%,#5a5754 14%,#2c2b2a 40%,#232221 60%,#4d4a47 84%,#a29d97 100%);box-shadow:0 34px 60px -30px rgba(17,17,17,.6),inset 0 0 0 1px rgba(255,255,255,.22)}
.vak .wkrow>.wk:before,.vak .wf .wf-shot:before{content:"";position:absolute;inset:.85% 1.75%;border-radius:15% / 7.3%;background:#050505;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);pointer-events:none}
.vak .wkrow>.wk{grid-column:1;grid-row:1;width:auto;height:min(clamp(340px,calc(100svh - 280px),640px),calc((100vw - 126px) * 146.6 / 71.5))}
.vak .wkrow>.wk:after{inset:0;border-radius:16.5% / 8.05%}
.vak .wkrow>.wk img,.vak .wkrow>.wk .sk{inset:auto;left:5.2cqw;top:5.2cqw;width:calc(100% - 10.4cqw);height:calc(100% - 10.4cqw);border-radius:12.6cqw}
.vak .wkrow>.wk img.om{object-fit:cover;object-position:center top}
.vak .wkrow>.wk .sk{transition:opacity 1s cubic-bezier(.65,0,.35,1) .25s}
.iph-i,.iph-k,.iph-p{display:none}
.vak .wkrow>.wk .iph-i{display:block;position:absolute;z-index:4;top:calc(5.2cqw + 2.6cqw);left:50%;width:30cqw;height:8.8cqw;margin-left:-15cqw;border-radius:5cqw;background:#000;pointer-events:none}
.vak .wkrow>.wk .iph-k,.vak .wkrow>.wk .iph-p{display:block;position:absolute;top:0;width:1.3cqw;border-radius:1cqw;background:linear-gradient(90deg,#6f6b67,#a8a39d 60%,#5c5956);pointer-events:none}
.vak .wkrow>.wk .iph-k{left:-1cqw;top:20%;height:5.2%;box-shadow:0 13cqw 0 0 #8c8883}
.vak .wkrow>.wk .iph-k:after{content:"";position:absolute;left:0;top:calc(100% + 26cqw);width:100%;height:9cqw;border-radius:inherit;background:inherit}
.vak .wkrow>.wk .iph-p{right:-1cqw;top:30%;height:14%}
.vak .wf .wf-shot{top:0;bottom:0;left:auto;right:2px;width:auto;translate:none}
.vak .wf .wf-shot picture{position:absolute;inset:5.2cqw;width:auto;height:auto;border-radius:12.6cqw;overflow:hidden;z-index:1}
.vak .wf .wf-shot picture img{width:100%;height:100%;object-fit:cover;object-position:center top;border-radius:0}
.vak .wf .wf-shot picture:after{content:"";position:absolute;top:2.6cqw;left:50%;width:30cqw;height:8.8cqw;margin-left:-15cqw;border-radius:5cqw;background:#000}
.vak .wf .wf-shot:after{content:"";position:absolute;right:-1.2cqw;top:30%;width:1.4cqw;height:14%;border-radius:1cqw;background:#8c8883}

/* Websites (ronde 12): onder de telefoon één regel, jaartal en naam links, rond pijlknopje rechts; meer ruimte tot de telefoon */
.vak .wkcol .cap{display:grid!important;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:2px;align-items:center;margin-top:46px!important}
.vak .wkcol .cap .cap-e{grid-column:1;grid-row:1;font-size:13px}
.vak .wkcol .cap .cap-t{grid-column:1;grid-row:2;margin:0;font-size:22px}
.vak .wkcol .cap .wk-go{grid-column:2;grid-row:1/3;margin:0!important;width:56px;height:56px;padding:0!important;gap:0;justify-content:center}
.vak .wkcol .cap .wk-go .bt-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.vak .wkcol .cap .wk-go:before{width:44px!important;height:44px!important;right:6px!important;margin-top:-22px!important}
.vak .wkcol .cap .wk-go .ar{width:44px!important;height:44px!important}

/* Prijs: geen witte randjes, offerte past, tabs en uitleg als één blok */
.vak .vt-ms{background:#17120A}
.vak .vt-mi{inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px)}
.vak .vt-doc{width:82%;padding:14px 16px 12px}
.vak .vt-dh{padding-bottom:10px}.vak .vt-dh b{font-size:17px}.vak .vt-dh img{width:22px;height:22px}
.vak .vt-doc ul{padding:2px 0}
.vak .vt-doc li{padding:6px 0;font-size:12.5px}
.vak .vt-doc li i{width:40px;height:6px}
.vak .vt-tot{padding-top:10px}.vak .vt-tot b{font-size:17px}
.vak .vt-tabs{--dh:84px;background:#F5F5F7;border-radius:22px;padding:6px 6px var(--dh);gap:4px}
.vak .vt .vt-t,.vak .vt .vt-t:first-child{border-radius:16px;padding:12px 10px 10px}
.vak .vt .vt-t:hover{background:transparent}
.vak .vt .vt-t[aria-selected=true]{background:#FFFFFF;box-shadow:0 6px 18px -10px rgba(17,17,17,.3)}
.vak .vt .vt-n{background:#FFFFFF}
.vak .vt .vt-dw{left:16px;right:16px}
.vak .vt .vt-t[aria-selected=true] .vt-d{padding-top:14px}

/* Ronde 6: schets in het telefoontje, ruimte tussen secties, Prijs-tekst groter */

.vak .wwz{padding-top:88px!important;padding-bottom:140px!important}
.vak section:has(.two.h){padding-top:88px!important}
.vak .vt-tabs{--dh:112px}
.vak .vt .vt-k{font-size:13px}
.vak .vt .vt-ti{font-size:17px}
.vak .vt .vt-dw{display:flex;align-items:center}
.vak .vt .vt-d{font-size:16px;line-height:1.45}
.vak .vt .vt-t[aria-selected=true] .vt-d{padding-top:6px}
/* Garantie: vastgezet in beeld; scrollen schuift de vier tegels opzij (geen veegrij meer) */
.vak .afs-z{box-sizing:border-box;padding:0;height:calc(100svh * 3.2)}
.vak .afs-z>.in{position:sticky;top:60px;box-sizing:border-box;height:calc(100svh - 60px);display:flex;flex-direction:column;justify-content:center;padding-top:20px;padding-bottom:44px;overflow:hidden}
.vak .afs-z>.in:after{content:"";position:absolute;left:20px;right:20px;bottom:24px;height:3px;border-radius:2px;background:linear-gradient(#1F8FFF,#1F8FFF) 0 0/calc(var(--ap,0) * 100%) 100% no-repeat,#E3E3E6}
.vak .afs-card{display:flex;gap:12px;margin:20px 0 0;padding:0;overflow:visible;transform:translate3d(calc(var(--ax,0) * -1px),0,0);will-change:transform}
.vak .afs-t,.vak .afs-t.afs-h,.vak .afs-t.afs-4{flex:0 0 100%;height:clamp(380px,calc(100svh - 250px),560px);min-height:0;justify-content:flex-start;gap:22px}
/* tegel 2: de mockup als telefoon, het label erbovenop */
.vak .afs-w2 .wf{min-height:0;background:transparent;overflow:visible}
.vak .afs-w2 .wf-s{border-radius:16px}


.vak .afs-w2 .pk-b{left:0;top:auto;bottom:22%;translate:none;z-index:4;padding:7px 12px;font-size:13px;box-shadow:0 8px 20px -8px rgba(17,17,17,.5)}
.vak .afs-w2{gap:14px}
/* tegel 3: het blok groter en luchtiger */
.vak .s3{padding:6px 18px;margin-inline:-6px}
.vak .s3-r{min-height:74px}
.vak .s3-r:first-child{flex-wrap:wrap;row-gap:12px;padding:16px 0}
.vak .s3-r:first-child .s3-tr{order:3;flex-basis:100%;height:12px;border-radius:6px}
.vak .s3-r:first-child .s3-v{margin-left:auto}
.vak .s3-k{font-size:16px}.vak .s3-v{font-size:14px}
.vak .s3-sw{width:56px;height:32px;border-radius:16px}.vak .s3-sw i{width:26px;height:26px}
/* tegel 4: kalender en kop boven, de drie stappen naast elkaar onderaan */
.vak .afs-t.afs-4{justify-content:space-between;padding-bottom:32px}
.vak .afs-4 .stp{flex:none;display:block;padding:0}
.vak .afs-4 .stp-n{flex-direction:row;justify-content:space-between}
.vak .afs-4 .stp-n span{width:33.33%;flex-direction:column;align-items:center;gap:12px;font-size:15px;text-align:center;white-space:normal}
.vak .afs-4 .stp-n u{width:52px;height:52px;font-size:20px}
.vak .afs-4 .stp-l{left:16.66%;right:16.66%;top:24px;bottom:auto;width:auto;height:4px;flex-direction:row}
.vak .afs-4 .stp-l i{transform-origin:0 50%}

/* ---- Ritme tussen secties (Tom, 18 okt): overal dezelfde maat ----
   40 px onder de laatste inhoud + 64 px boven het label van de volgende sectie = 104 px.
   Dat het volgende label niet te vroeg zichtbaar is, regelt het onthullen (pas als de kop 18% in beeld is), niet de afstand. */
.vak{--sb:40px;--st:64px}
.vak .hero{padding-bottom:var(--sb)}
.vak .werk,.vak .mbk-z,.vak .prs-z,.vak .wwz,.vak section.sec:not(.afs-z){min-height:0!important;display:block!important;padding:var(--st) 0 var(--sb)!important}
.vak .aa{padding:var(--st) 0 var(--sb)!important}
.vak .ft{padding-top:var(--st)!important}
/* Branding is korter dan een scherm: de ruimte gaat tussen kop en merkboek, niet in de overgang */
/* Garantie staat vast in beeld: label op dezelfde afstand van de bovenkant, voortgangslijn met dezelfde ruimte eronder */
.vak .lab.rv,.vak .h2.hs{--d:0ms!important}
.vak .afs-z>.in{justify-content:flex-start;padding-top:var(--st);padding-bottom:calc(var(--sb) + 27px)}
.vak .afs-z>.in:after{bottom:var(--sb)}
.vak .afs-t,.vak .afs-t.afs-h,.vak .afs-t.afs-4{height:clamp(320px,calc(100svh - 60px - var(--st) - var(--sb) - 160px),540px)!important}
}
@media (max-width:599.98px) and (prefers-reduced-motion:no-preference){
/* Werkwijze op de telefoon: kaartje schuift omhoog en groeit naar zijn maat, daarna nummer, beeld en tekst, dan de voortgangslijn */
.vak .pn.rv{opacity:0;transform:translateY(56px) scale(.94)}
.vak .pn.rv.rv-in{opacity:1;transform:none;transition:opacity .6s ease,transform 1s cubic-bezier(.22,1,.36,1)}
.vak .pn.rv .nr,.vak .pn.rv .ill,.vak .pn.rv .tx{opacity:0;transform:translateY(18px)}
.vak .pn.rv.rv-in .nr,.vak .pn.rv.rv-in .ill,.vak .pn.rv.rv-in .tx{opacity:1;transform:none;transition:opacity .5s ease var(--pd),transform .7s cubic-bezier(.22,1,.36,1) var(--pd)}
.vak .pn.rv .nr{--pd:.18s}.vak .pn.rv .ill{--pd:.32s}.vak .pn.rv .tx{--pd:.46s}
.vak .pn.rv .pst i{transform:scaleX(0);transform-origin:0 50%}
.vak .pn.rv.rv-in .pst i{transform:none;transition:transform .9s cubic-bezier(.65,0,.35,1) .65s}
.afs-js .afs-t:not(.go) .stp-l i{transform:scaleX(0)}
.afs-t.go .stp-l i{animation-name:segx}
/* Hero op de telefoon: eerst de grote tekst, dan de regel eronder, dan de knoppen */
.giant .gwd{animation-delay:calc(.15s + var(--w) * .14s)}
.hero .hsub,.hero .col>.bg{animation-delay:2s}
.hero .brow{animation-delay:2.35s}
.bg-n:after{animation-delay:2.9s}
}
@keyframes segx{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Tik-reactie op aanraakschermen (Tom, 18 okt): zelfde beweging als het aanwijzen op web, met klasse .tap (zie script) */
.btn.tap:before{transform:scale(16)}
.btn.tap,a.btn.tap{color:#FFFFFF;transition:transform .12s,color .35s cubic-bezier(.4,0,.2,1) .06s}
.btn.tap .ar{color:#FFFFFF}
.btn.tap .ar svg{transform:translateX(4px)}
a.tl.tap:before{opacity:0}
a.tl.tap:after{transform:none}
.ic.tap{background:#1F8FFF;border-color:#1F8FFF}

/* Websites (Tom koos optie 1, 18 okt): geen nieuwe knopstijlen.
   "Meer werk" = vierde rondje, precies als de projectrondjes (maat, schaduw, hover iets omhoog), blauw met witte pijl, bij aanwijzen/tik zwart.
   "Bekijk de site" = de huisknop; op de telefoon het ronde icoonknopje zoals bij de socials, op licht. */
.pjc-zie{background:#1F8FFF!important;color:#FFFFFF;font-size:0!important;gap:0!important;padding:0!important;box-shadow:0 10px 22px -12px rgba(17,17,17,.5)!important;transition:transform .35s cubic-bezier(.22,1,.36,1),background-color .35s cubic-bezier(.4,0,.2,1)}
.pjc-zie span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pjc-zie svg{width:20px!important;height:20px!important}
.pjc-zie i,.pjc-zie:hover i{color:#FFFFFF!important;transform:none!important}
.pjc-zie:hover,.pjc-zie.tap,html.tgfx .wkmore .pjc-zie:hover{background:#1F8FFF!important;transform:translateY(-2px) scale(1.05)}

/* (Tom, 18 okt, later): "Bekijk de site" is weer de gewone huisknop: zwart, blauw rondje, bij aanwijzen/tik vult blauw */
@media (max-width:599.98px){
.vak .wkcol .cap .wk-go{box-shadow:none;overflow:hidden;background:#111111}
.vak .wkcol .cap .wk-go:before{display:block!important;left:50%;right:auto!important;top:50%;margin:0!important;width:56px!important;height:56px!important;background:#1F8FFF;transform:translate(-50%,-50%) scale(0)}
.vak .wkcol .cap .wk-go.tap:before{transform:translate(-50%,-50%) scale(1.05)}
}
/* Regel (Tom, 18 okt): alles op zwart of blauw is wit, dus ook elk pijltje in een knoprondje */
.btn .ar{color:#FFFFFF}
/* Wie: knop en contactregel weg, ook op web (Tom, 18 okt) */
.two.h .wlk,.two.h .wlk-s{display:none}
/* Voettekst onderregel (Tom, 18 okt): alleen ©, Bedrijfsgegevens en Privacy; alle verplichte gegevens staan achter Bedrijfsgegevens (ACM staat een vaste link toe) */
.ft-lk{display:flex;flex-wrap:wrap;gap:12px 24px}
.vt-tot b.vt-tb{display:inline-block;width:104px;height:14px;border-radius:999px;background:#1F8FFF;align-self:center}
/* Kaart 01: het is gewoon jouw site (24 okt) */
.dm{flex:none;width:100%;max-width:560px;display:flex;flex-direction:column;gap:18px}
.dm-b{background:#FFFFFF;border-radius:16px;overflow:hidden;box-shadow:0 24px 50px -24px rgba(0,0,0,.7)}
.dm-u{display:flex;align-items:center;gap:7px;height:46px;padding:0 14px;background:#F5F5F7;border-bottom:1px solid #E3E3E6}
.dm-u>i{flex:none;width:10px;height:10px;border-radius:50%;background:#D2D2D7}
.dm-a{display:flex;align-items:center;gap:8px;flex:1;min-width:0;height:28px;margin-left:8px;padding:0 12px;border-radius:999px;background:#FFFFFF;color:#111111;font-size:14px}
.dm-lk{flex:none;width:13px;height:13px;fill:none;stroke:#6B6B6B;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dm-t{display:inline-block;overflow:hidden;white-space:nowrap;width:14ch}
.dm-v{flex:none;padding:3px 11px;border-radius:999px;background:#1F8FFF;color:#FFFFFF;font-size:12px;font-weight:500}
.dm-c{display:flex;flex-direction:column;gap:9px;padding:20px 20px 22px}
.dm-c b{display:block;height:11px;border-radius:6px;background:#D2D2D7}.dm-c b.h{width:46%;height:13px;background:#111111}.dm-c b.l{width:88%}.dm-c b.s{width:62%}
.dm-c i.p{display:block;width:84px;height:26px;margin-top:8px;border-radius:999px;background:#1F8FFF}
.dm-l{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.dm-l li{display:flex;align-items:center;gap:8px;padding:8px 15px;border-radius:999px;background:#1D1D1F;border:1px solid #3A3A3C;color:#FFFFFF;font-size:14px}
.dm-l u{text-decoration:none;color:#1F8FFF;font-weight:700}
.dm-n{margin:0;font-size:14px;color:#A1A1A6}
@keyframes dmtype{from{width:0}to{width:14ch}}
@keyframes dmpop{0%{opacity:0;transform:scale(.6)}70%{transform:scale(1.08)}100%{opacity:1;transform:none}}
.afs-js .afs-t:not(.go) .dm-t{width:0}
.afs-js .afs-t:not(.go) .dm-v,.afs-js .afs-t:not(.go) .dm-l li,.afs-js .afs-t:not(.go) .dm-n{opacity:0}
.afs-js .afs-t:not(.go) .dm-l li{transform:translateY(8px)}
.afs-t.go .dm-t{animation:dmtype 1.3s steps(14) .5s both}
.afs-t.go .dm-v{animation:dmpop .5s cubic-bezier(.34,1.56,.64,1) 1.9s both}
.afs-t.go .dm-l li{animation:dmpop .5s cubic-bezier(.34,1.56,.64,1) calc(2.3s + var(--j) * .25s) both}
.afs-t.go .dm-n{animation:dmfade .6s ease 3.2s both}
@keyframes dmfade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.afs-t.go .dm-t,.afs-t.go .dm-v,.afs-t.go .dm-l li,.afs-t.go .dm-n{animation:none}}
/* Kaart 03: geen verrassingen (24 okt) */
.s3-ic{flex:none;width:22px;height:22px;fill:none;stroke:#111111;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.s3-ck{flex:none;margin-left:auto;font-style:normal;font-weight:700;font-size:16px;color:#1F8FFF}
.s3-r:first-child .s3-k{white-space:normal}.s3-nw{white-space:nowrap}
.afs-js .afs-t:not(.go) .s3-ck{opacity:0;transform:scale(.4)}
.afs-t.go .s3-r:nth-child(1) .s3-ck{transition:opacity .3s ease .5s,transform .5s cubic-bezier(.34,1.56,.64,1) .5s}
.afs-t.go .s3-r:nth-child(3) .s3-ck{transition:opacity .3s ease 2.3s,transform .5s cubic-bezier(.34,1.56,.64,1) 2.3s}
@container vak (max-width:899.98px){.s3-ic{width:20px;height:20px}}
/* Branding: de drie merken naast elkaar (24 okt) */
.mbk-side .mbk-ls{grid-template-columns:repeat(3,max-content)}
@container vak (max-width:899.98px){.mbk-side .mbk-ls{grid-template-columns:repeat(3,max-content)}}
.s3-k small{display:block;margin-top:2px;font-weight:400;font-size:13px;line-height:1.3;color:#6B6B6B}
.s3-r{min-height:70px}.s3-r .s3-tr{flex:none;width:96px}
.s3-r:first-child .s3-k,.s3-r:nth-child(2) .s3-k,.s3-r:nth-child(3) .s3-k{white-space:normal}
.s3-r:nth-child(2) .s3-k{flex:1}
.afs-t.go .s3-r:nth-child(2) .s3-ck{transition:opacity .3s ease 2.1s,transform .5s cubic-bezier(.34,1.56,.64,1) 2.1s}
/* Kaart 01 aangepast (Tom, 24 okt): titel van de FAQ, zin onder de titel, adresbalk "jouw eigen site" */
.afs-tt{display:flex;flex-direction:column;gap:12px;min-width:0}
.afs-s{margin:0;font-size:16px;line-height:1.45;color:#A1A1A6;max-width:26ch}
.dm-t{width:11ch}
@keyframes dmtype{from{width:0}to{width:11ch}}
.afs-t.go .dm-t{animation:dmtype 1s steps(11) .5s both}
.afs-t.go .dm-v{animation:dmpop .5s cubic-bezier(.34,1.56,.64,1) 1.9s both}
@keyframes dmbar{from{transform:scaleX(0)}to{transform:none}}
.dm-c b,.dm-c i.p{transform-origin:0 50%}
.afs-js .afs-t:not(.go) .dm-c b,.afs-js .afs-t:not(.go) .dm-c i.p{transform:scaleX(0)}
.afs-t.go .dm-c b.h{animation:dmbar .5s cubic-bezier(.22,1,.36,1) 1.5s both}
.afs-t.go .dm-c b.l{animation:dmbar .5s cubic-bezier(.22,1,.36,1) 1.7s both}
.afs-t.go .dm-c b.l.s{animation:dmbar .5s cubic-bezier(.22,1,.36,1) 1.85s both}
.afs-t.go .dm-c i.p{animation:dmbar .4s cubic-bezier(.22,1,.36,1) 2s both}
@media (prefers-reduced-motion:reduce){.afs-t.go .dm-c b,.afs-t.go .dm-c i.p{animation:none}}
/* Kaart 03: drie kleine scenes naast elkaar (24 okt) */
.gv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
.gv-c{min-width:0}
.gv-p{position:relative;height:132px;border-radius:16px;background:#FFFFFF;overflow:hidden;box-shadow:0 14px 30px -22px rgba(17,17,17,.4)}
.gv-k{margin:12px 0 0;font-weight:500;font-size:14px;line-height:1.25}
.gv-s{margin:2px 0 0;font-size:13px;line-height:1.3;color:#6B6B6B}
/* 1: bericht komt binnen */
.gv-in{position:absolute;left:14px;right:14px;top:30px;display:flex;flex-direction:column;gap:7px;padding:12px;border-radius:12px;border:1px solid #E3E3E6;background:#FFFFFF}
.gv-b{display:block;width:44%;height:8px;border-radius:4px;background:#111111}
.gv-l1,.gv-l2{display:block;height:6px;border-radius:3px;background:#D2D2D7}.gv-l2{width:62%}
.gv-pl{align-self:flex-start;margin-top:3px;padding:2px 9px;border-radius:999px;background:#1F8FFF;color:#FFFFFF;font-style:normal;font-size:12px;font-weight:500;line-height:1.4}
.gv-dot{position:absolute;right:14px;top:14px;width:12px;height:12px;border-radius:50%;background:#1F8FFF}
/* 2: opzeggen met een klik */
.gv-w{position:absolute;left:0;right:0;top:0;height:26px;display:flex;align-items:center;gap:5px;padding:0 12px;background:#F5F5F7}
.gv-w i{width:7px;height:7px;border-radius:50%;background:#D2D2D7}
.gv-ln{position:absolute;left:14px;top:42px;width:58%;height:7px;border-radius:4px;background:#D2D2D7}
.gv-bt{position:absolute;left:14px;top:70px;width:104px;height:34px;border-radius:999px;background:#111111;color:#FFFFFF;font-size:13px;font-weight:500;display:grid;place-items:center;overflow:hidden}
.gv-bt span{grid-area:1/1;line-height:1}.gv-t2{opacity:0}
.gv-cu{position:absolute;left:84px;top:96px;width:16px;height:20px;fill:#111111;stroke:#FFFFFF;stroke-width:1.2;stroke-linejoin:round;filter:none}
/* 3: bestanden gaan mee */
.gv-fo{position:absolute;left:14px;top:46px;width:42px;height:34px;border-radius:5px 8px 8px 8px;background:#1F8FFF}
.gv-fo:before{content:"";position:absolute;left:0;top:-6px;width:18px;height:8px;border-radius:5px 5px 0 0;background:#1F8FFF}
.gv-tr{position:absolute;right:14px;top:42px;width:44px;height:44px;border-radius:10px;border:1.5px dashed #BDBDC2}
.gv-d{position:absolute;left:22px;top:38px;width:22px;height:28px;border-radius:3px;background:#FFFFFF;border:1px solid #D2D2D7}
.gv-d:before{content:"";position:absolute;left:4px;right:4px;top:6px;height:3px;border-radius:2px;background:#D2D2D7;box-shadow:0 6px 0 #D2D2D7}
.gv-d1{top:42px}.gv-d2{top:46px}
@keyframes gvin{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes gvpop{0%{transform:scale(0)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes gvmove{0%{transform:translate(0,0)}60%{transform:translate(-4px,-34px)}100%{transform:translate(-4px,-34px)}}
@keyframes gvpress{0%,100%{transform:none}50%{transform:scale(.93)}}
@keyframes gvt1{to{opacity:0;transform:translateY(-8px)}}
@keyframes gvt2{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes gvfile{0%{transform:translateX(0)}100%{transform:translateX(var(--dx,90px))}}
.afs-js .afs-t:not(.go) .gv-in{opacity:0}
.afs-js .afs-t:not(.go) .gv-dot{transform:scale(0)}
.afs-t.go .gv-in{animation:gvin .6s cubic-bezier(.22,1,.36,1) .5s both}
.afs-t.go .gv-dot{animation:gvpop .5s cubic-bezier(.34,1.56,.64,1) 1.2s both}
.afs-t.go .gv-cu{animation:gvmove .9s cubic-bezier(.65,0,.35,1) 1.3s both}
.afs-t.go .gv-bt{animation:gvpress .3s ease 2.25s both;background:#111111}
.afs-t.go .gv-t1{animation:gvt1 .3s ease 2.4s both}
.afs-t.go .gv-t2{animation:gvt2 .35s ease 2.5s both}
.afs-t.go .gv-d0{animation:gvfile .7s cubic-bezier(.65,0,.35,1) 2.4s both}
.afs-t.go .gv-d1{animation:gvfile .7s cubic-bezier(.65,0,.35,1) 2.65s both}
.afs-t.go .gv-d2{animation:gvfile .7s cubic-bezier(.65,0,.35,1) 2.9s both}
.gv-d{--dx:66px}
@media (prefers-reduced-motion:reduce){.afs-t.go .gv-in,.afs-t.go .gv-dot,.afs-t.go .gv-cu,.afs-t.go .gv-bt,.afs-t.go .gv-t1,.afs-t.go .gv-t2,.afs-t.go .gv-d{animation:none}.gv-t1{opacity:0}.gv-t2{opacity:1}.gv-cu{transform:translate(-4px,-34px)}.gv-d{transform:translateX(66px)}}
@container vak (max-width:899.98px){.gv{grid-template-columns:minmax(0,1fr);gap:10px}.gv-c{display:grid;grid-template-columns:132px minmax(0,1fr);column-gap:14px;align-items:center}.gv-p{height:110px;grid-row:1/3}.gv-k{margin:0;align-self:end}.gv-s{align-self:start}.gv-in{top:24px}}
@container vak (max-width:899.98px){.gv-in{top:16px;padding:9px 12px;gap:5px}.gv-pl{margin-top:1px}}
/* Kaart 01 (Tom, 24 okt): geen typen, geen .nl; het adres komt rustig binnen */
.dm-t{width:auto}
@keyframes dmfadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.afs-js .afs-t:not(.go) .dm-t{width:auto;opacity:0}
.afs-t.go .dm-t{animation:dmfadein .6s cubic-bezier(.22,1,.36,1) .5s both}
.afs-t.go .dm-v{animation:dmpop .5s cubic-bezier(.34,1.56,.64,1) 1.5s both}
.afs-t.go .dm-c b.h{animation-delay:1.0s}.afs-t.go .dm-c b.l{animation-delay:1.2s}.afs-t.go .dm-c b.l.s{animation-delay:1.35s}.afs-t.go .dm-c i.p{animation-delay:1.5s}
.afs-t.go .dm-l li{animation-delay:calc(1.9s + var(--j) * .25s)}
/* Kaart 03 netter (Tom, 24 okt): meer lucht, cursor op de knop, bestanden in het veld */
.gv{gap:14px}
.gv-p{height:144px;container-type:inline-size}
.gv-k{margin-top:14px}
.gv-in{top:30px}
.gv-ln{top:46px}.gv-bt{top:78px}
.gv-cu{left:100px;top:124px}
@keyframes gvmove{0%{transform:translate(0,0)}100%{transform:translate(var(--cx,-36px),var(--cy,-32px))}}
.gv-fo{top:56px}.gv-tr{top:50px;right:14px;width:44px;height:44px}
.gv-d{top:58px;--dx:calc(100cqw - 69px)}.gv-d1{top:60px}.gv-d2{top:62px}
@keyframes gvfile{0%{transform:translateX(0)}100%{transform:translateX(calc(100cqw - 69px))}}
@media (prefers-reduced-motion:reduce){.gv-cu{transform:translate(-36px,-32px)}.gv-d{transform:translateX(calc(100cqw - 69px))}}
@container vak (max-width:899.98px){.gv-p{height:110px}.gv-in{top:16px}.gv-ln{top:38px}.gv-bt{top:58px}.gv-cu{left:100px;top:96px;--cy:-28px}.gv-fo{top:40px}.gv-tr{top:34px}.gv-d{top:42px}.gv-d1{top:44px}.gv-d2{top:46px}.gv-c{grid-template-columns:132px minmax(0,1fr)}}
/* cursor komt van rechtsonder en landt op de rechterkant van de knop, niet op de tekst */
.gv-cu{left:130px;top:128px;--cx:-30px;--cy:-30px}
@media (prefers-reduced-motion:reduce){.gv-cu{transform:translate(-30px,-30px)}}
@container vak (max-width:899.98px){.gv-cu{left:118px;top:104px;--cx:-18px;--cy:-24px}}

/* 1 nov: hero-tekst en grote kop binnen dezelfde marges als kop en secties (breed scherm) */
@container vak (min-width:900px){.hero .col{right:calc((100cqw - min(100cqw,1376px))/2)}.hero .giant{left:calc((100cqw - min(100cqw,1376px))/2 + 48px);font-size:min(154px,calc((100cqw - 96px)/8.3))}}
/* 1 nov: sociale pictogrammen altijd wit op blauw bij aanwijzen en tikken */
.ic:hover,.ic:focus-visible,.ic.tap{color:#FFFFFF}
/* 1 nov: garanties, vaste tinten wit, grijs, zwart, grijs (web en telefoon gelijk); twee beloftes bij 'Geen verrassingen' */
.afs-lt{background:#FFFFFF;box-shadow:inset 0 0 0 1px #E3E3E6}
.afs-lt .dm-b{background:#FFFFFF;box-shadow:0 0 0 1px #E3E3E6,0 24px 50px -28px rgba(17,17,17,.25)}
.afs-lt .dm-l li{background:#F5F5F7;border-color:#E3E3E6;color:#111111}
.afs-lt .dm-n{color:#6B6B6B}
.gv{grid-template-columns:repeat(2,minmax(0,1fr))}
/* 1 nov: telefoonkop, alleen logo en menuknop; het menu klapt open onder de balk (op breed scherm staat er niets van in beeld) */
.mk,.mp{display:none}
@media (max-width:599.98px){
.hd .nav{display:none}
.mk{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:44px;height:44px;margin:0 -10px 0 auto;padding:0;background:none;border:0;cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;position:relative;z-index:2}
.mk span{display:block;width:24px;height:2px;border-radius:1px;background:#111111;transition:transform .35s cubic-bezier(.22,1,.36,1),background-color .3s}
.hd.ondk .mk span{background:#FFFFFF}
html.mo .mk span:first-child{transform:translateY(4px) rotate(45deg)}
html.mo .mk span:last-child{transform:translateY(-4px) rotate(-45deg)}
.mp{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:#FFFFFF;padding:4px 20px 28px;border-bottom:1px solid #E3E3E6;box-shadow:0 24px 40px -24px rgba(17,17,17,.25);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .22s ease,transform .3s cubic-bezier(.22,1,.36,1),visibility 0s linear .3s}
html.mo .mp{opacity:1;visibility:visible;transform:none;transition:opacity .25s ease,transform .4s cubic-bezier(.22,1,.36,1),visibility 0s}
.mp-l{display:flex;align-items:center;min-height:56px;font-size:26px;font-weight:600;letter-spacing:-.02em;color:#111111;text-decoration:none;border-bottom:1px solid #E3E3E6;opacity:0;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease}
html.mo .mp-l{opacity:1;transform:none;transition:opacity .4s ease calc(.08s + var(--i)*.06s),transform .45s cubic-bezier(.22,1,.36,1) calc(.08s + var(--i)*.06s)}
.mp-l[aria-current=page]{color:#1F8FFF}
.mp .btn{margin-top:20px;align-self:flex-start}
html.mo{overflow:hidden}
}
/* 1 nov: telefoonhero, de golf staat rechts en in het midden, niet meer achter de titel en de knop linksonder */
@media (max-width:599.98px){.vak .hero .shd{left:42%;right:auto;top:-24%;bottom:auto;width:100%;height:100%;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 66%,transparent 92%),linear-gradient(90deg,transparent 0,#000 30%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 66%,transparent 92%),linear-gradient(90deg,transparent 0,#000 30%);mask-composite:intersect}}
.mk:focus:not(:focus-visible){outline:none}
@container vak (max-width:899.98px){.gv{grid-template-columns:minmax(0,1fr)}}
/* 1 nov: voettekst op de telefoon, kleiner dan het scherm en met lucht onder de kopbalk */
@media (max-width:599.98px){.vak .ft{padding-top:calc(var(--st,60px) + 20px)!important}.vak .ft-c a.tl{min-height:34px}.vak .ft-g{gap:28px 16px}.vak .ft-l{gap:24px}.vak .ft-b{margin-top:28px}.vak .ft .gw{margin-top:28px}}
/* 1 nov: Prijs-sectie op de telefoon, het kader is lager zodat kader, tabs en tekst samen op één scherm passen; het offerteblad is compacter */
@media (max-width:599.98px){.vak .vt .vt-fr{height:clamp(270px,calc(100svh - 520px),340px)}.vak .vt-p{padding:18px}.vak .vt-p2 .vt-doc{width:88%;padding:12px 14px 10px}.vak .vt-p2 .vt-doc li{padding:5px 0;font-size:12.5px}.vak .vt-p2 .vt-doc ul{padding:2px 0}.vak .vt-p2 .vt-dh{padding-bottom:8px}.vak .vt-p2 .vt-tot{padding-top:8px}}
/* 1 nov (Tom): garantie 01 grijs en 02 wit; mini-site in 01 mooier; kaart 04 leesbaarder; voettekstknop prominenter; hero-blok lager */
.afs-lt{background:#F5F5F7;box-shadow:none}
.afs-lt .dm-b{box-shadow:0 0 0 1px #E3E3E6,0 24px 50px -28px rgba(17,17,17,.3)}
.afs-lt .dm-l li{background:#FFFFFF;border-color:#E3E3E6}
.afs-w2{background:#FFFFFF;box-shadow:inset 0 0 0 1px #E3E3E6}
.dm-c{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px;align-items:center;padding:22px 20px}
.dm-tx{display:flex;flex-direction:column;gap:10px;min-width:0}
.dm-c b.h{height:16px;width:78%}.dm-c b.l{height:10px;width:100%}.dm-c b.l.s{width:70%}
.dm-c i.p{width:96px;height:30px;margin-top:6px}
.dm-im{position:relative;display:block;aspect-ratio:5/4;border-radius:12px;overflow:hidden;background:linear-gradient(140deg,#1F8FFF 0%,#7DBEFF 100%)}
.dm-im i{position:absolute;right:14%;top:14%;width:24%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.9)}
.dm-im:after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;background:rgba(255,255,255,.3);clip-path:ellipse(75% 100% at 28% 100%)}
.gv-w{background:#FFFFFF;border-bottom:1px solid #E3E3E6}.gv-w i{background:#C7C7CC}
.gv-p{box-shadow:0 0 0 1px #E3E3E6,0 14px 30px -22px rgba(17,17,17,.35)}
@container vak (min-width:900px){.afs-g3{padding-bottom:40px}.gv{gap:20px}.gv-k{margin-top:36px;font-size:17px}.gv-s{margin-top:8px;font-size:15px}}
.ft-l{justify-content:flex-start;gap:40px;min-height:0}

@container vak (min-width:900px){.hero .col{top:clamp(190px,34%,320px)}}
/* 1 nov: de E van de grote kop staat optisch op dezelfde lijn als het logo (letterrand eraf) */
@container vak (min-width:900px){.hero .giant{margin-left:-.065em}}
.vak .gv-k{margin-top:14px}.vak .gv-s{margin-top:2px}
@container vak (min-width:900px){.vak .gv-k{margin-top:36px}.vak .gv-s{margin-top:8px}}
@container vak (max-width:899.98px){.vak .gv-k{margin-top:0}.vak .gv-s{margin-top:0}}

/* 3 nov 2026, feedbackronde web: hover zoals de knoppen van Lasergraveer (zacht en langzaam, de vulling groeit uit de stip,
   het label schuift mee, de schaduw groeit). Kleuren ongewijzigd. De knop zelf blijft stilstaan, zodat hij niet knippert
   als de cursor op de rand staat. */
:root{--zacht:cubic-bezier(.33,.06,.2,1)}
.btn{transition:transform .12s,box-shadow .6s var(--zacht),color .5s var(--zacht) .08s}
.btn:before{transition:transform .85s var(--zacht)}
.btn .bt-t{transition:transform .6s var(--zacht)}
.btn .ar svg{transition:transform .6s var(--zacht)}
@media (hover:hover) and (pointer:fine){
.btn:hover,a.btn:hover,.btn.dk:hover,a.btn.dk:hover,.btn.ol:hover,a.btn.ol:hover,.hd.ondk .btn.c:hover,.hd.ondk a.btn.c:hover{transition:transform .12s,box-shadow .6s var(--zacht),color .5s var(--zacht) .08s;box-shadow:0 2px 4px rgba(17,17,17,.12),0 14px 24px -10px rgba(17,17,17,.45)}
.btn:hover .bt-t{transform:translateX(-5px)}
.btn:hover .ar svg{transform:translateX(5px)}
.btn:active,.btn:active:hover{transition:transform .12s,box-shadow .2s,color .35s var(--zacht)}
}
.btn.tap{box-shadow:0 2px 4px rgba(17,17,17,.12),0 14px 24px -10px rgba(17,17,17,.45);transition:transform .12s,box-shadow .6s var(--zacht),color .5s var(--zacht) .08s}
.btn.tap .bt-t{transform:translateX(-5px)}
.btn.tap .ar svg{transform:translateX(5px)}
@media (prefers-reduced-motion:reduce){.btn,.btn:before,.btn .bt-t,.btn .ar svg{transition-duration:.01s!important}}

/* 3 nov 2026, feedbackronde web: de kopbalk heeft in de hero geen achtergrond; de balk komt pas na de hero (zie het script, klasse sc).
   Op web loopt de shader daarom ook achter de kop door. */
.vak .hd:not(.sc){background:transparent}
@container (min-width:900px){
.vak .hero .shd{top:calc(-72px - env(safe-area-inset-top,0px));height:calc(100% + 72px + env(safe-area-inset-top,0px))}
}

/* 3 nov 2026, feedbackronde web: Garantie 01 en 02 lager. 01 wordt korter, dus 02 ook, en het gratis-mockupvlak in 02 krijgt de
   verhouding van een webscherm in plaats van een vierkant. Alleen web; de telefoon blijft zoals hij was. */
@container (min-width:900px){
.afs-t.afs-h{gap:20px}
.afs-t.afs-h .afs-s{max-width:46ch}
.afs-lt .dm-im{aspect-ratio:2/1}
.afs-w2 .wf{min-height:240px}
}

/* 3 nov, telefoon: de kop is doorzichtig, dus de shader loopt door tot achter de statusbalk (wifi, klok) zonder bovenrand-verloop */
@media (max-width:599.98px){
.vak .hero .shd{top:calc(-24% - 120px - env(safe-area-inset-top,0px));height:calc(100% + 120px + env(safe-area-inset-top,0px));-webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 267px),transparent calc(100% - 63px)),linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 267px),transparent calc(100% - 63px)),linear-gradient(90deg,transparent 0,#000 30%)}
}

/* 4 nov 2026, feedback: de sticky Websites-sectie blijft nog 20vh vastzitten nadat alles is ingeanimeerd (de kop en de tekst rechts blijven staan, de sectie staat goed in beeld)
   en het blauwe streepje onder "huisstijl" in de Branding-intro (komt mee met de reveal van de tekst). */
html.tgfx .wkpad{height:120vh}
.bl-u{position:relative;display:inline-block}
.bl-u i{position:absolute;left:.02em;right:.02em;top:1.12em;height:.12em;background:#1F8FFF;border-radius:1px;transform:scaleX(0);transform-origin:0 50%;transition:transform .9s cubic-bezier(.7,0,.2,1) .5s}
.rv-in .bl-u i,.mbk-ip.rv-in .bl-u i{transform:none}
@media (prefers-reduced-motion:reduce){.bl-u i{transform:none;transition:none}}

/* 4 nov 2026, feedback Garantie 02 (web): het label "Gratis mockup" staat boven het grijze vlak (niet erin), het grijze vlak is kleiner en bij aanwijzen
   kleuren de blokken in tot een voorbeeldsite in het blauw en zwart van TG (geen klantsite). Telefoon blijft zoals hij was. */
@container vak (min-width:900px){
.vak .afs-w2 .wf{background:transparent;overflow:visible}
.vak .afs-w2 .wf .wf-shot{display:none}
.vak .afs-w2 .pk-b{left:0;top:0;bottom:auto;box-shadow:none}
.vak .afs-w2 .wf-s{inset:46px 0 0 0;padding:20px;border-radius:16px;gap:12px 18px;transition:background-color .6s,box-shadow .6s}
.vak .afs-w2:hover .wf-s,.vak .afs-w2.shw .wf-s{opacity:1;filter:none;background:#FFFFFF;box-shadow:0 0 0 1px #E3E3E6,0 18px 40px -22px rgba(17,17,17,.35)}
.vak .afs-w2 .wf-s .h,.vak .afs-w2 .wf-s .l b,.vak .afs-w2 .wf-s .p,.vak .afs-w2 .wf-s .im{transition:background .6s,width .6s}
.vak .afs-w2:hover .wf-s .h,.vak .afs-w2.shw .wf-s .h{background:#111111;width:46%}
.vak .afs-w2:hover .wf-s .l b,.vak .afs-w2.shw .wf-s .l b{background:#D2D2D7}
.vak .afs-w2:hover .wf-s .p,.vak .afs-w2.shw .wf-s .p{background:#1F8FFF}
.vak .afs-w2:hover .wf-s .im,.vak .afs-w2.shw .wf-s .im{background:linear-gradient(135deg,#1F8FFF 0%,#7DB8FF 100%)}
}

/* 4 nov 2026, Werkwijze: kleine animatie per stap (klasse ill-arm = klaar om te spelen, ill-go = speelt; zie het script bij ill()).
   1 de velden vullen zich en Verstuur drukt in, 2 de vijf balkjes komen omhoog, 3 de voorbeeldsite bouwt zich op, 4 de twee knoppen poppen in, 5 de offerte schuift binnen en de handtekening tekent zich. */
@keyframes ilUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ilFill{to{color:#FFFFFF;border-color:#1F8FFF}}
@keyframes ilPress{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(31,143,255,.6)}35%{transform:scale(.9)}100%{transform:scale(1);box-shadow:0 0 0 16px rgba(31,143,255,0)}}
@keyframes ilBar{from{transform:scaleY(0)}to{transform:none}}
@keyframes ilGrow{from{transform:scaleX(0)}to{transform:none}}
@keyframes ilPop{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}}
@keyframes ilDoc{from{opacity:0;transform:translateY(34px) rotate(-3deg)}to{opacity:1;transform:none}}
@keyframes ilDraw{to{stroke-dashoffset:0}}
.ill-arm .il .f{opacity:0}
.ill-go .il .f{animation:ilUp .6s cubic-bezier(.22,1,.36,1) both,ilFill .45s ease forwards}
.ill-go .il .f:nth-child(1){animation-delay:.1s,.8s}
.ill-go .il .f:nth-child(2){animation-delay:.3s,1.05s}
.ill-arm .il>.pill:not(.s){opacity:0}
.ill-go .il>.pill:not(.s){animation:ilUp .5s ease .55s both,ilPress .55s ease 1.6s both}
.ill-arm .il.bars i{transform:scaleY(0);transform-origin:50% 100%}
.ill-go .il.bars i{animation:ilBar .9s cubic-bezier(.22,1,.36,1) both}
.ill-go .il.bars i:nth-child(1){animation-delay:.05s}.ill-go .il.bars i:nth-child(2){animation-delay:.17s}.ill-go .il.bars i:nth-child(3){animation-delay:.29s}.ill-go .il.bars i:nth-child(4){animation-delay:.41s}.ill-go .il.bars i:nth-child(5){animation-delay:.53s}
.ill-arm .il.br{opacity:0}
.ill-go .il.br{animation:ilUp .7s cubic-bezier(.22,1,.36,1) both}
.ill-arm .il.br .h,.ill-arm .il.br .l,.ill-arm .il.br .pill.s{transform:scaleX(0);transform-origin:0 50%}
.ill-arm .il.br .im{opacity:0}
.ill-go .il.br .h{animation:ilGrow .6s cubic-bezier(.65,0,.35,1) .45s both}
.ill-go .il.br .l{animation:ilGrow .6s cubic-bezier(.65,0,.35,1) .6s both}
.ill-go .il.br .l.s{animation-delay:.72s}
.ill-go .il.br .pill.s{animation:ilGrow .5s cubic-bezier(.65,0,.35,1) .9s both}
.ill-go .il.br .im{animation:ilUp 1s ease .65s both}
.ill-arm .il.dc span{opacity:0}
.ill-go .il.dc span{animation:ilPop .6s cubic-bezier(.34,1.56,.64,1) both}
.ill-go .il.dc span:nth-child(1){animation-delay:.15s}.ill-go .il.dc span:nth-child(2){animation-delay:.4s}
.ill-arm .il.doc{opacity:0}
.ill-go .il.doc{animation:ilDoc .9s cubic-bezier(.22,1,.36,1) both}
.ill-arm .il.doc .l{transform:scaleX(0);transform-origin:0 50%}
.ill-go .il.doc .l{animation:ilGrow .6s cubic-bezier(.65,0,.35,1) .5s both}
.ill-go .il.doc .l:nth-of-type(2){animation-delay:.65s}
.ill-arm .il.doc .sg svg path{stroke-dasharray:1;stroke-dashoffset:1}
.ill-go .il.doc .sg svg path{animation:ilDraw 1.4s cubic-bezier(.65,0,.35,1) 1s forwards}
.ill-go .il.doc .sg svg path:nth-child(2){animation-delay:2.3s;animation-duration:.5s}

/* 4 nov 2026, feedback: Over toont onder de tekst weer de knop Aanvragen en de regel "Liever eerst even contact?" (stond verborgen); voettekstlinks kleuren bij aanwijzen mee blauw */
.vak .two.h .wlk{display:flex}
.vak .two.h .wlk-s{display:block}
a.tl.d{transition:transform .12s,color .35s cubic-bezier(.33,.06,.2,1)}
a.tl.d:hover,a.tl.d:focus-visible{color:#1F8FFF}

/* 4 nov 2026, "Wat je krijgt" (was Garantie): kaartenstapel met vijf kaarten in de kleuren van TG; elke kaart een eigen kleine animatie (klasse is-on, zodra de kaart voorop ligt en de sectie in beeld is: wy-in); alleen transform en opacity bewegen */
.wy{margin-top:48px}
.wy-st{position:relative;height:380px;margin-bottom:56px;outline:none;-webkit-user-select:none;user-select:none}
.wy-st:focus-visible{outline:2px solid #1F8FFF;outline-offset:8px;border-radius:36px}
.wy-c{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:36px;align-items:center;padding:44px 52px;border-radius:32px;overflow:hidden;transform-origin:50% 100%;touch-action:pan-y;cursor:grab;transition:transform .8s var(--zacht),opacity .5s ease;will-change:transform;backface-visibility:hidden}
.wy-c:active{cursor:grabbing}
.wy-c[data-pos="0"]{z-index:5}
.wy-c[data-pos="1"]{z-index:4;transform:translate3d(0,20px,0) scale(.955);cursor:pointer}
.wy-c[data-pos="2"]{z-index:3;transform:translate3d(0,40px,0) scale(.91);pointer-events:none}
.wy-c[data-pos="3"]{z-index:2;transform:translate3d(0,48px,0) scale(.88);opacity:0;pointer-events:none}
.wy-c[data-pos="-1"]{z-index:6;transform:translate3d(-112%,0,0) rotate(-6deg);opacity:0;pointer-events:none}
.wy-k{display:block;margin-bottom:18px;font-size:14px;font-weight:500;letter-spacing:.12em;opacity:.7}
.wy-t h3{margin:0 0 14px;font-size:clamp(28px,3vw,40px);line-height:1.04;letter-spacing:-.03em;font-weight:700;text-wrap:balance}
.wy-t p{margin:0;font-size:17px;line-height:1.5;max-width:44ch}
.wy-1{background:#1F8FFF;color:#FFFFFF}.wy-1 .wy-t p{color:rgba(255,255,255,.92)}
.wy-2{background:#111111;color:#FFFFFF}.wy-2 .wy-t p{color:#C7C7CC}
.wy-3{background:#FFFFFF;color:#111111;box-shadow:inset 0 0 0 1px #E3E3E6}.wy-3 .wy-t p{color:#6B6B6B}
.wy-4{background:#E8F3FF;color:#111111}.wy-4 .wy-t p{color:#4A5560}
.wy-5{background:#F5F5F7;color:#111111}.wy-5 .wy-t p{color:#6B6B6B}
.wy-v{position:relative;display:flex;align-items:center;justify-content:center;min-height:0}
/* 1 gratis mockup */
.wv1{width:100%;max-width:360px;margin:0 auto;position:relative}
.wv1-b{background:#FFFFFF;border-radius:18px;overflow:hidden;box-shadow:0 26px 44px -24px rgba(0,0,0,.45)}
.wv1-u{display:flex;gap:6px;align-items:center;height:36px;padding:0 14px;background:#F5F5F7;border-bottom:1px solid #E3E3E6}.wv1-u i{width:9px;height:9px;border-radius:50%;background:#D2D2D7}
.wv1-c{padding:18px;display:grid;gap:10px;justify-items:start}
.wv1-c b{display:block;height:11px;width:100%;border-radius:6px;background:#D2D2D7;transform-origin:0 50%}.wv1-c b.h{width:50%;height:14px;background:#111111}.wv1-c b.s{width:66%}
.wv1-c .p{display:block;width:92px;height:28px;margin-top:6px;border-radius:999px;background:#1F8FFF;transform-origin:0 50%}
.wv1 .gr{position:absolute;right:-12px;top:-16px;padding:8px 16px;border-radius:999px;background:#111111;color:#FFFFFF;font-size:14px;font-weight:500}
.wv1 .bub{position:absolute;left:-14px;bottom:-18px;padding:10px 16px;border-radius:16px 16px 16px 4px;background:#111111;color:#FFFFFF;font-size:14px;font-weight:500}
.wy-in .is-on .wv1-b{animation:ilUp .7s var(--zacht) both}
.wy-in .is-on .wv1-c b,.wy-in .is-on .wv1-c .p{animation:ilGrow .6s var(--zacht) both}
.wy-in .is-on .wv1-c b.h{animation-delay:.4s}.wy-in .is-on .wv1-c b.l{animation-delay:.55s}.wy-in .is-on .wv1-c b.s{animation-delay:.7s}.wy-in .is-on .wv1-c .p{animation-delay:.85s}
.wy-in .is-on .wv1 .gr{animation:ilPop .6s cubic-bezier(.34,1.56,.64,1) 1s both}
.wy-in .is-on .wv1 .bub{animation:ilPop .6s cubic-bezier(.34,1.56,.64,1) 1.6s both}
/* 2 offerte, dan de helft */
.wv2{display:grid;gap:26px;width:100%;max-width:380px;margin:0 auto}
.wv2 .s{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:10px;align-items:baseline}
.wv2 .n{font-size:40px;font-weight:700;letter-spacing:-.03em;line-height:1}.wv2 .x{font-size:15px;color:#C7C7CC}
.wv2 .t{grid-column:1/-1;height:10px;border-radius:999px;background:#2A2A2C;overflow:hidden}.wv2 .t i{display:block;height:100%;width:100%;border-radius:999px;background:#1F8FFF;transform-origin:0 50%}
.wy-in .is-on .wv2 .s:nth-child(1){animation:ilUp .6s var(--zacht) .2s both}.wy-in .is-on .wv2 .s:nth-child(1) .t i{animation:ilGrow 1s var(--zacht) .5s both}
.wy-in .is-on .wv2 .s:nth-child(2){animation:ilUp .6s var(--zacht) 1.3s both}.wy-in .is-on .wv2 .s:nth-child(2) .t i{animation:ilGrow 1s var(--zacht) 1.6s both}
/* 3 op jouw naam */
.wv3{width:100%;max-width:380px;margin:0 auto}
.wv3 .u{display:flex;align-items:center;gap:12px;height:60px;padding:0 20px;border-radius:999px;background:#F5F5F7;font-size:20px;font-weight:500;color:#111111}
.wv3 .ty{flex:1;white-space:nowrap;overflow:hidden}
.wv3 .van{flex:none;padding:5px 12px;border-radius:999px;background:#1F8FFF;color:#FFFFFF;font-size:13px}
.wy-in .is-on .wv3 .ty{animation:wyTy 1.5s steps(14,end) .5s both}
.wy-in .is-on .wv3 .van{animation:ilPop .6s cubic-bezier(.34,1.56,.64,1) 2.2s both}
@keyframes wyTy{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
/* 4 nazorg */
.wv4{position:relative;display:flex;align-items:center;justify-content:center;width:150px;height:150px;margin:0 auto}
.wv4 svg{position:absolute;inset:0}
.wv4 .rg{stroke-dasharray:1;stroke-dashoffset:0}
.wv4 .c{position:relative;display:flex;flex-direction:column;align-items:center;line-height:1}
.wv4 .c b{font-size:52px;font-weight:700;letter-spacing:-.04em}.wv4 .c span{margin-top:4px;font-size:14px;color:#4A5560}
.wy-in .is-on .wv4 .rg{animation:wyRing 1.4s cubic-bezier(.65,0,.25,1) .2s both}
@keyframes wyRing{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
/* 5 stoppen kan: de bestanden gaan van jouw map naar de nieuwe plek (de scene "Je bestanden mee" uit de vorige Garantie) */
.wv5{display:flex;align-items:center;justify-content:center}
.wv5 .gp{position:relative;width:100%;max-width:340px;height:150px;margin:0 auto;border-radius:18px;background:#FFFFFF;box-shadow:0 0 0 1px #E3E3E6,0 16px 32px -22px rgba(17,17,17,.35);overflow:hidden;container-type:inline-size}
.wv5 .fo{position:absolute;left:24px;top:60px;width:56px;height:44px;border-radius:6px 10px 10px 10px;background:#1F8FFF}
.wv5 .fo:before{content:"";position:absolute;left:0;top:-7px;width:22px;height:9px;border-radius:6px 6px 0 0;background:#1F8FFF}
.wv5 .tr{position:absolute;right:24px;top:52px;width:56px;height:56px;border-radius:12px;border:1.5px dashed #BDBDC2}
.wv5 .d{position:absolute;left:34px;top:52px;width:26px;height:34px;border-radius:4px;background:#FFFFFF;border:1px solid #D2D2D7;--dx:calc(100cqw - 98px)}
.wv5 .d:before{content:"";position:absolute;left:5px;right:5px;top:7px;height:3px;border-radius:2px;background:#D2D2D7;box-shadow:0 7px 0 #D2D2D7}
.wv5 .d1{top:56px}.wv5 .d2{top:60px}
.wy-in .is-on .wv5 .d{animation:wyFile .8s cubic-bezier(.65,0,.35,1) both}
.wy-in .is-on .wv5 .d0{animation-delay:.35s}.wy-in .is-on .wv5 .d1{animation-delay:.65s}.wy-in .is-on .wv5 .d2{animation-delay:.95s}
.wy-in .is-on .wv5 .tr{animation:wyLand .5s ease 1.9s both}
@keyframes wyFile{0%{transform:translateX(0)}100%{transform:translateX(var(--dx))}}
@keyframes wyLand{from{border-color:#BDBDC2}to{border-color:#1F8FFF;background:#E8F3FF}}
/* bediening */
.wy-bar{display:flex;align-items:center;gap:16px}
.wy-b{flex:none;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border:0;border-radius:50%;background:#111111;color:#FFFFFF;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .4s var(--zacht),transform .12s,opacity .3s}
.wy-b svg{width:20px;height:20px}
.wy-b:active{transform:scale(.94)}.wy-b:disabled{opacity:.25;cursor:default}
.wy-b:focus-visible{outline:2px solid #1F8FFF;outline-offset:3px}
@media (hover:hover) and (pointer:fine){.wy-b:hover:not(:disabled){background:#1F8FFF}}
.wy-n{min-width:60px;text-align:center;font-size:16px;font-weight:500}.wy-n b{font-weight:700}
.wy-h{margin-left:auto;font-size:14px;color:#6B6B6B}
@container vak (max-width:899.98px){
.wy-st{height:560px}
.wy-c{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;align-content:center;gap:24px;padding:28px 26px}
.wy-v{order:-1;min-height:150px}
.wy-t h3{font-size:30px}
.wv4{width:120px;height:120px}.wv4 .c b{font-size:42px}
}
@container vak (max-width:599.98px){.wy-st{height:590px}.wy-h{display:none}.wy-t p{font-size:16px}}
@media (prefers-reduced-motion:reduce){.wy-c{transition:none}}

/* 5 nov 2026, Garantie ("Waarom TG Brand Designs") als raster met afwisselend brede en smalle kaarten (Tom, naar een voorbeeld): linksboven mockup en feedback (animatie), rechtsboven Op jouw naam (statisch), linksonder nazorg (statisch), rechtsonder Stoppen kan (animatie); elke kaart met een icoon */
.gb{grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;margin-top:56px}
.gb .afs-t{grid-column:1/-1;min-height:350px;padding:32px;border-radius:28px;gap:24px;justify-content:space-between;box-shadow:none}
.gb .gb-a{background:#111111;color:#FFFFFF}.gb .gb-b{background:#F5F5F7;color:#111111}.gb .gb-c{background:#E8F3FF;color:#111111}.gb .gb-d{background:#1F8FFF;color:#FFFFFF}
.gb .gb-a,.gb .gb-d{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:stretch;gap:32px}
.gb .gb-tx{display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-width:0}
.gb-i{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:rgba(17,17,17,.07)}
.gb-i svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.gb .gb-a .gb-i,.gb .gb-d .gb-i{background:rgba(255,255,255,.14)}
.gb .gl{max-width:16ch;margin:0;text-align:left;font-size:clamp(26px,2.2vw,32px);line-height:1.12}
.gb .afs-s{margin:12px 0 0;max-width:34ch;font-size:15px;line-height:1.5}
.gb .gb-a .afs-s{color:rgba(255,255,255,.72)}.gb .gb-b .afs-s{color:#6B6B6B}.gb .gb-c .afs-s{color:#4A5560}
.gb .gb-v{display:flex;align-items:center;justify-content:flex-start}
.gb-url{display:flex;align-items:center;gap:10px;height:52px;padding:0 10px 0 18px;border-radius:999px;background:#FFFFFF;box-shadow:0 0 0 1px #E3E3E6;font-weight:500;font-size:17px;white-space:nowrap}
.gb-url em{font-style:normal;padding:5px 12px;border-radius:999px;background:#1F8FFF;color:#FFFFFF;font-size:13px}
.gb-ring{position:relative;display:grid;place-items:center;width:110px;height:110px}.gb-ring svg{position:absolute;inset:0}
.gb-ring div{position:relative;display:flex;flex-direction:column;align-items:center;line-height:1}.gb-ring b{font-size:38px;font-weight:700;letter-spacing:-.04em}.gb-ring span{margin-top:3px;font-size:13px;color:#4A5560}
/* mockup + feedback (animatie, zodra de kaart in beeld komt: klasse go) */
.gm2{position:relative;width:100%;max-width:470px;min-height:270px;margin-left:auto}
.gm2-p{position:absolute;left:0;top:0;z-index:3;padding:7px 14px;border-radius:999px;background:#1F8FFF;color:#FFFFFF;font-size:13px;font-weight:500}
.gm2-s{position:absolute;left:0;right:0;top:42px;bottom:0;border-radius:16px;background:#FFFFFF;overflow:hidden;box-shadow:0 22px 44px -22px rgba(0,0,0,.6)}
.gm2-u{display:flex;gap:6px;align-items:center;height:30px;padding:0 12px;background:#F5F5F7;border-bottom:1px solid #E3E3E6}.gm2-u i{width:8px;height:8px;border-radius:50%;background:#D2D2D7}
.gm2-c{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:16px}
.gm2-tx{display:grid;gap:9px;align-content:start}.gm2-tx b{display:block;height:10px;border-radius:5px;background:#D2D2D7;transform-origin:0 50%}.gm2-tx b.h{width:55%;height:13px;background:#111111}.gm2-tx b.s{width:66%}
.gm2-tx .pl{display:block;width:80px;height:24px;margin-top:6px;border-radius:999px;background:#1F8FFF;transform-origin:0 50%}
.gm2-c .im{display:block;height:100px;border-radius:12px;background:linear-gradient(135deg,#1F8FFF 0%,#7DB8FF 100%)}
.gm2-f{position:absolute;right:-6px;bottom:-14px;z-index:2;display:grid;gap:8px;width:58%;padding:14px 16px 16px;border-radius:16px;background:#1F8FFF;color:#FFFFFF;box-shadow:0 22px 40px -18px rgba(0,0,0,.65)}
.gm2-f b{font-size:14px;font-weight:600}.gm2-f .l{display:block;height:7px;border-radius:4px;background:rgba(255,255,255,.55);transform-origin:0 50%}.gm2-f .l.s{width:62%}
.gm2-bt{position:relative;display:grid;place-items:center;justify-self:start;height:30px;min-width:108px;margin-top:4px;padding:0 14px;border-radius:999px;background:#FFFFFF;color:#1F8FFF;font-size:13px;font-weight:600}
.gm2-bt em{grid-area:1/1;font-style:normal;line-height:1}.gm2-bt .t2{opacity:0}
.afs-js .afs-t:not(.go) .gm2-s,.afs-js .afs-t:not(.go) .gm2-f,.afs-js .afs-t:not(.go) .gm2-p{opacity:0}
.afs-t.go .gm2-p{animation:ilPop .8s cubic-bezier(.34,1.56,.64,1) .2s both}
.afs-t.go .gm2-s{animation:ilUp 1s var(--zacht) .4s both}
.afs-t.go .gm2-tx b,.afs-t.go .gm2-tx .pl{animation:ilGrow .9s var(--zacht) both}
.afs-t.go .gm2-tx b.h{animation-delay:.9s}.afs-t.go .gm2-tx b.l{animation-delay:1.15s}.afs-t.go .gm2-tx b.s{animation-delay:1.4s}.afs-t.go .gm2-tx .pl{animation-delay:1.7s}
.afs-t.go .gm2-c .im{animation:ilUp 1.3s ease 1.2s both}
.afs-t.go .gm2-f{animation:ilUp 1s var(--zacht) 4s both}
.afs-t.go .gm2-f .l{animation:ilGrow .9s var(--zacht) 4.7s both}.afs-t.go .gm2-f .l.s{animation-delay:5s}
.afs-t.go .gm2-bt{animation:mkPress .5s ease 6.2s both}
.afs-t.go .gm2-bt .t1{animation:mkT1 .4s ease 6.35s both}.afs-t.go .gm2-bt .t2{animation:mkT2 .45s ease 6.5s both}
@keyframes mkPress{0%,100%{transform:none}45%{transform:scale(.92)}}
@keyframes mkT1{to{opacity:0;transform:translateY(-6px)}}
@keyframes mkT2{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* stoppen kan: twee scenes naast elkaar op het blauw */
.gb .gb-d .gv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-self:center}
.gb .gb-d .gv-c{display:block}
.gb .gb-d .gv-k{margin:14px 0 0;color:#FFFFFF;font-size:16px}.gb .gb-d .gv-s{margin:3px 0 0;color:rgba(255,255,255,.82);font-size:14px}
@container vak (min-width:900px){
.gb .gb-a,.gb .gb-d{grid-column:span 8}.gb .gb-b,.gb .gb-c{grid-column:span 4}
}
@container vak (max-width:899.98px){
.gb .afs-t{min-height:0}.gb .gb-a,.gb .gb-d{grid-template-columns:minmax(0,1fr)}
.gb .gb-a .gb-tx,.gb .gb-d .gb-tx{gap:20px}
.gm2{margin:6px auto 14px}
}
@container vak (max-width:599.98px){.gb .gb-d .gv{grid-template-columns:minmax(0,1fr)}.gb .gl{font-size:28px}}
@media (prefers-reduced-motion:reduce){.afs-t.go .gm2-s,.afs-t.go .gm2-f{animation:none}}

/* 5 nov 2026, Werkwijze stap 4 (feedback) en Branding-knop */
.il.fb{background:#1D1D1F;border:1px solid #3A3A3C;border-radius:14px;padding:16px 18px;gap:10px}
.il.fb .fbh{padding-bottom:10px;border-bottom:1px solid #3A3A3C;color:#FFFFFF}.il.fb .fbh b{font-weight:700;font-size:16px}
.il.fb .l{display:block;height:8px;border-radius:4px;background:#3A3A3C;transform-origin:0 50%}.il.fb .l.s{width:62%}
.il.fb .pill.s{margin-top:6px}
.ill-arm .il.fb{opacity:0}
.ill-arm .il.fb .l{transform:scaleX(0)}.ill-arm .il.fb .pill.s{opacity:0}
.ill-go .il.fb{animation:ilUp .7s cubic-bezier(.22,1,.36,1) both}
.ill-go .il.fb .l{animation:ilGrow .6s cubic-bezier(.65,0,.35,1) .5s both}
.ill-go .il.fb .l:nth-of-type(2){animation-delay:.65s}.ill-go .il.fb .l:nth-of-type(3){animation-delay:.8s}
.ill-go .il.fb .pill.s{animation:ilUp .5s ease 1.2s both,ilPress .55s ease 1.9s both}
.mbk-cta{margin:28px 0 0}
.il.fb{flex:none;height:auto}.il.fb>*{flex:none}
.il.fb{align-items:stretch}.il.fb .fbh{text-align:left}.il.fb .l.s{align-self:flex-start}
/* 5 nov 2026, Branding: logo's iets lager zodat Aanvragen op zichzelf staat */
.mbk-side .mbk-ls{margin-top:64px}
@container vak (max-width:899.98px){.mbk-side .mbk-ls{margin-top:44px}}

/* 5 nov 2026, Garantie, ronde 2: kaart 2 en 3 met fade-in, Op jouw naam met rijen, nazorg met grote ring rechts, Stoppen kan met meer ruimte; footer met tekst achter de iconen */
.gb .gb-b .gb-v,.gb .gb-c .gb-v{align-items:flex-start}
.gb-own{display:flex;flex-direction:column;align-items:stretch;gap:10px;width:100%}
.gb-row{display:flex;align-items:center;gap:12px;height:50px;padding:0 10px 0 16px;border-radius:16px;background:#FFFFFF;box-shadow:0 0 0 1px #E3E3E6;font-weight:500;font-size:15px;white-space:nowrap}
.gb-row svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.gb-row span{flex:1;min-width:0}
.gb-row em{font-style:normal;padding:4px 12px;border-radius:999px;background:#1F8FFF;color:#FFFFFF;font-size:12px}
.gb-row.gb-me{background:transparent;box-shadow:none;border:1px dashed #C7C7CC;color:#6B6B6B}.gb-row.gb-me em{background:#E3E3E6;color:#6B6B6B}
.gb .gb-c{position:relative}
.gb .gb-c .gb-v{position:absolute;top:24px;right:28px;width:auto}
.gb .gb-c .gb-ring{width:190px;height:190px}.gb .gb-c .gb-ring b{font-size:60px}.gb .gb-c .gb-ring span{font-size:15px;margin-top:5px}
.gb .gb-d{grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr)}
.gb .gb-d .gv{gap:22px}
.gb .gb-d .gv-p{height:230px}.gb .gb-d .gv-p>*{zoom:1.3}
.gb .gb-d .gv-k{font-size:17px}.gb .gb-d .gv-s{font-size:15px}
.afs-js .afs-t:not(.go) .gb-b .gb-row,.afs-js .afs-t:not(.go) .gb-c .gb-v{opacity:0}
.afs-t.go .gb-b .gb-row{animation:ilUp .9s var(--zacht) both}
.afs-t.go .gb-b .gb-row:nth-child(1){animation-delay:.3s}.afs-t.go .gb-b .gb-row:nth-child(2){animation-delay:.9s}.afs-t.go .gb-b .gb-row:nth-child(3){animation-delay:1.5s}
.afs-t.go .gb-c .gb-v{animation:ilPop 1s var(--zacht) .3s both}
@container vak (max-width:899.98px){.gb .gb-c .gb-v{position:static}.gb .gb-c .gb-ring{width:150px;height:150px}.gb .gb-c .gb-ring b{font-size:48px}.gb .gb-d .gv-p>*{zoom:1}.gb .gb-d .gv-p{height:144px}}
.vak .ft-ic{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.vak .ft-ic .ic{width:auto;height:48px;padding:0 20px 0 13px;gap:12px;justify-content:flex-start;border-radius:999px}
.ic-t{position:relative;z-index:1;font-size:15px;font-weight:500;line-height:1;white-space:nowrap}
.gb .gb-b .gb-own{align-items:stretch;flex-direction:column}
.vak .ft-ic .ic,.vak .ft-ic .ic .ic-t{text-decoration:none}

/* 5 nov 2026, kaart 1 rechts mooier: echte mini-site met menu, drie blokjes en een speldje dat bij de feedback hoort */
.gm2{min-height:310px}
.gm2-n{display:flex;align-items:center;gap:12px;padding:12px 16px 0}
.gm2-lg{width:18px;height:18px;border-radius:6px;background:#111111;margin-right:auto}
.gm2-n i{display:block;width:30px;height:6px;border-radius:3px;background:#D2D2D7}
.gm2-n b{display:block;width:44px;height:18px;border-radius:999px;background:#111111}
.gm2-c{padding-top:14px}
.gm2-c .im{position:relative;height:112px;background:linear-gradient(135deg,#1F8FFF 0%,#8CC0FF 100%);overflow:hidden}
.gm2-c .im:before{content:"";position:absolute;right:-14px;bottom:-30px;width:90px;height:90px;border-radius:50%;background:rgba(255,255,255,.28)}
.gm2-c .im:after{content:"";position:absolute;left:16px;bottom:0;width:60px;height:34px;border-radius:30px 30px 0 0;background:rgba(255,255,255,.22)}
.gm2-pin{position:absolute;right:14px;top:14px;z-index:2;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#111111;color:#FFFFFF;font-size:12px;font-weight:700;box-shadow:0 0 0 4px rgba(255,255,255,.55)}
.gm2-r{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 16px 16px}
.gm2-r span{display:block;height:44px;border-radius:10px;background:#F5F5F7;border:1px solid #ECECEF}
.afs-js .afs-t:not(.go) .gm2-pin{opacity:0}
.afs-t.go .gm2-pin{animation:ilPop .6s cubic-bezier(.34,1.56,.64,1) 3.7s both,gmPulse 1.6s ease-out 4.3s 2}
.afs-t.go .gm2-r span{animation:ilUp .9s var(--zacht) both}
.afs-t.go .gm2-r span:nth-child(1){animation-delay:1.9s}.afs-t.go .gm2-r span:nth-child(2){animation-delay:2.2s}.afs-t.go .gm2-r span:nth-child(3){animation-delay:2.5s}
.afs-js .afs-t:not(.go) .gm2-r span{opacity:0}
.gm2-f{width:54%;right:-8px;bottom:-16px}
@keyframes gmPulse{0%{box-shadow:0 0 0 4px rgba(255,255,255,.55),0 0 0 4px rgba(255,255,255,.5)}100%{box-shadow:0 0 0 4px rgba(255,255,255,.55),0 0 0 18px rgba(255,255,255,0)}}
/* 5 nov 2026, bovenste rij minder hoog */
.gb .gb-a,.gb .gb-b{min-height:290px}
.gm2{min-height:262px}
.gm2-c .im{height:96px}
.gm2-r span{height:34px}
@container vak (max-width:899.98px){.gb .gb-a,.gb .gb-b{min-height:0}.gm2{min-height:262px}}
.gb .gb-b{gap:14px;padding:28px 32px}.gb .gb-b .gb-i{width:46px;height:46px}.gb .gb-b .gb-own{gap:8px}.gb .gb-b .gb-row{height:42px}.gb .gb-b .afs-s{max-width:44ch}
.gb .gb-a{padding:28px 32px}
/* 5 nov 2026, nazorg-kaart wit zoals onze kaartstijl (wit, dunne rand, zachte schaduw) */
.gb .gb-c{background:#FFFFFF;border:1px solid #E5E5EA;box-shadow:0 24px 48px -24px rgba(17,17,17,.22),0 2px 6px rgba(17,17,17,.04)}
.gb .gb-c .afs-s{color:#6B6B6B}
/* 5 nov 2026, Stoppen kan: tekst als een geheel onder de titel, scenes vullen hun kaart */
.gb .gb-d .gb-tx{justify-content:space-between}
.gb .gb-d .gl{max-width:none}.gb .gb-d .afs-s{color:rgba(255,255,255,.86);max-width:40ch}
.gb .gb-d{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.gb .gb-d .gv{align-self:center;gap:16px}
.gb .gb-d .gv-p{height:200px}.gb .gb-d .gv-p>*{zoom:1.4}
.gb .gb-d .gv-p{box-shadow:0 22px 44px -24px rgba(0,0,0,.45)}
@container vak (max-width:899.98px){.gb .gb-d .gv-p>*{zoom:1}.gb .gb-d .gv-p{height:144px}}
/* 5 nov 2026, kaart 1: feedback-kaart wit, titel, dan twee regels die "getypt" worden, dan Versturen en Verstuurd; zonder speldje */
.gm2-f{background:#FFFFFF;color:#111111;box-shadow:0 22px 40px -18px rgba(0,0,0,.55),0 0 0 1px rgba(17,17,17,.06)}
.gm2-f .l{background:#D2D2D7}
.gm2-bt{background:#1F8FFF;color:#FFFFFF}
.afs-t.go .gm2-f{animation:ilUp 1s var(--zacht) 4s both}
.afs-t.go .gm2-f b{animation:ilUp .7s var(--zacht) 4.5s both}
.afs-js .afs-t:not(.go) .gm2-f b{opacity:0}
.afs-t.go .gm2-f .l{animation:ilGrow 1.3s steps(16,end) 5.4s both}
.afs-t.go .gm2-f .l.s{animation:ilGrow 1s steps(11,end) 6.9s both}
.afs-t.go .gm2-bt{animation:mkPress .5s ease 8.5s both}
.afs-t.go .gm2-bt .t1{animation:mkT1 .4s ease 8.65s both}.afs-t.go .gm2-bt .t2{animation:mkT2 .45s ease 8.8s both}
/* Stoppen kan: twee korte regels onder elkaar, hoger, en de scenes verder uit elkaar */
.gb .gb-d .gb-tx>div{padding-bottom:36px}
.gb .gb-d .afs-s{margin-top:10px;max-width:34ch}.gb .gb-d .afs-s+.afs-s{margin-top:8px}
.gb .gb-d .gv{gap:34px}
@container vak (max-width:899.98px){.gb .gb-d .gv{gap:16px}.gb .gb-d .gb-tx>div{padding-bottom:0}}
/* 5 nov 2026, kaart 1: de feedback wordt "getypt" met de drie puntjes van de chat bij Over, daarna komen de twee regels in */
.gm2-f{position:absolute}
.gm2-f .gm2-ty{position:absolute;left:16px;top:46px;align-self:auto;background:#F2F2F5;padding:12px 16px;border-radius:16px 16px 16px 6px;opacity:0}
.afs-t.go .gm2-ty{animation:gmDots 2.3s ease 5.2s both}
@keyframes gmDots{0%{opacity:0;transform:translateY(8px) scale(.85)}14%{opacity:1;transform:none}86%{opacity:1}100%{opacity:0;transform:scale(.92)}}
.afs-t.go .gm2-f .l{animation:ilGrow .8s var(--zacht) 7.6s both}
.afs-t.go .gm2-f .l.s{animation:ilGrow .7s var(--zacht) 7.95s both}
.afs-t.go .gm2-bt{animation:mkPress .5s ease 9.3s both}
.afs-t.go .gm2-bt .t1{animation:mkT1 .4s ease 9.45s both}.afs-t.go .gm2-bt .t2{animation:mkT2 .45s ease 9.6s both}
/* 5 nov 2026, footer: contactknoppen met dezelfde hover als de gewone knoppen, logo in het rondje rechts */
.vak .ft-ic{gap:10px}
.vak .ft-ic .ft-cb{width:100%;min-width:250px;justify-content:space-between;height:52px}
.vak .ft-ic .ft-cb .ar .ico{width:20px;height:20px}

/* 5 nov 2026, kaartje bij Websites in de huisstijl van het getoonde project (KOR: merkregels van De Kroeg op Rolletjes, 21 okt 2026; lettertypen Anton en Manrope zijn open licentie en komen van hun eigen site) */
.gm2-f .gm2-ty{top:37px}

/* 5 nov 2026, Garantie kaart 1: animatie ca. 8,8 s (was 10 s); puntjes eerst helemaal klaar, dan pas de lijnen, met meer lucht ertussen (Tom: te snel achter elkaar) */
.afs-t.go .gm2-r span:nth-child(1){animation-delay:1.5s}.afs-t.go .gm2-r span:nth-child(2){animation-delay:1.75s}.afs-t.go .gm2-r span:nth-child(3){animation-delay:2s}
.afs-t.go .gm2-f{animation:ilUp 1s var(--zacht) 2.7s both}
.afs-t.go .gm2-f b{animation:ilUp .7s var(--zacht) 3.1s both}
.afs-t.go .gm2-ty{animation:gmDots 2.4s ease 3.6s both}
.afs-t.go .gm2-f .l{animation:ilGrow .9s var(--zacht) 6.2s both}
.afs-t.go .gm2-f .l.s{animation:ilGrow .8s var(--zacht) 6.9s both}
.afs-t.go .gm2-bt{animation:mkPress .5s ease 8.1s both}
.afs-t.go .gm2-bt .t1{animation:mkT1 .4s ease 8.25s both}.afs-t.go .gm2-bt .t2{animation:mkT2 .45s ease 8.4s both}


/* 3 nov 2026, Branding op de telefoon (Tom): de merkboekrondjes staan links onder de kaart, op één regel met Vorige en Volgende; de knop Aanvragen staat daardoor op zichzelf */
@container vak (max-width:899.98px){
.mbk{position:relative}
.mbk-side .mbk-cta{margin:24px 0 0}
.mbk-side .mbk-ls{position:absolute;left:4px;bottom:18px;display:flex;flex-wrap:nowrap;gap:16px;margin:0}
.mbk[data-b] .mbk-p,.mbk[data-b] .mbk-n{padding:0 12px;font-size:12.5px;letter-spacing:.02em;gap:5px}
.mbk-main{padding-bottom:92px}
.mbk .mbk-i,.mbk .mbk-i:last-child,.mbk .mbk-i[aria-selected=true],.mbk .mbk-i[aria-selected=true]:hover{width:48px;height:48px}
.mbk .mbk-i .mbk-th,.mbk .mbk-i .mbk-th.mbk-lg{width:48px;height:48px}
}
/* 3 nov 2026, telefoonronde (Tom): Garantie. Kaartvolgorde wit, zwart, grijs, blauw (de eerste kaart wit: een zwarte eerste kaart kleurde de balk achter de zoekbalk zwart). Titel naast het icoon, daaronder de tekst, dan de animatie. Op de telefoon staan de kaarten onder elkaar (geen plakkend vlak meer). */
.gb .gb-a{background:#FFFFFF;color:#111111;border:1px solid #E5E5EA;box-shadow:0 24px 48px -24px rgba(17,17,17,.22),0 2px 6px rgba(17,17,17,.04)}
.gb .gb-a .gb-i{background:rgba(17,17,17,.07)}.gb .gb-a .afs-s{color:#6B6B6B}
.gm2-s{background:#F5F5F7;box-shadow:0 0 0 1px #E3E3E6,0 22px 40px -26px rgba(17,17,17,.4)}
.gm2-u{background:#ECECEF;border-bottom-color:#E3E3E6}
.gm2-r span{background:#FFFFFF;border-color:#E3E3E6}
.gb .gb-b{background:#111111;color:#FFFFFF;border:0;box-shadow:none}
.gb .gb-b .gb-i{background:rgba(255,255,255,.14)}.gb .gb-b .afs-s{color:rgba(255,255,255,.72)}.gb .gb-b .gb-row{color:#111111;box-shadow:none}
.gb .gb-c{background:#F5F5F7;border:0;box-shadow:none}.gb .gb-c .afs-s{color:#6B6B6B}
.gb .gb-c .gb-ring svg circle:first-child{stroke:#DEDEE3}
@container vak (max-width:899.98px){
.gb .gb-tx{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:12px;align-items:center;justify-content:normal}
.gb .gb-tx>div{display:contents}
.gb .gb-tx .gb-i{grid-column:1;grid-row:1}
.gb .gb-tx .gl{grid-column:2;grid-row:1;max-width:none;font-size:clamp(22px,6vw,26px)}
.gb .gb-tx .afs-s{grid-column:1/-1;grid-row:2;margin:0;max-width:none}
.gb .gb-tx .afs-s+.afs-s{grid-row:3}
.gb .gb-b,.gb .gb-c{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:12px;align-content:start;align-items:center}
.gb .gb-b>div:last-child,.gb .gb-c>div:last-child{display:contents}
.gb .gb-b>.gb-i,.gb .gb-c>.gb-i{grid-column:1;grid-row:1}
.gb .gb-b .gl,.gb .gb-c .gl{grid-column:2;grid-row:1;max-width:none;font-size:clamp(22px,6vw,26px)}
.gb .gb-b .afs-s,.gb .gb-c .afs-s{grid-column:1/-1;grid-row:2;margin:0;max-width:none}
.gb .gb-b>.gb-v,.gb .gb-c>.gb-v{grid-column:1/-1;grid-row:3;margin-top:8px}
.gb .gb-a,.gb .gb-d{grid-template-columns:minmax(0,1fr);gap:20px}
.gb .gb-d .gv{width:100%}
}
@media (max-width:599.98px){
.vak .afs-z{height:auto!important;padding:var(--st) 0 var(--sb)!important}
.vak .afs-z>.in{position:static;height:auto;overflow:visible;padding:0 20px!important}
.vak .afs-z>.in:after{display:none}
.vak .afs-card.gb{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-top:28px;transform:none!important}
.vak .afs-card.gb .afs-t{height:auto!important;min-height:0!important;flex:none}
}

/* 3 nov 2026, telefoonronde (Tom): footer. Alleen de contactknoppen in de footer hebben het icoon links en de gegevens erachter (alle Aanvragen-knoppen blijven met het icoon rechts); minder lege ruimte onder TG Brand Designs. */
@media (max-width:599.98px){
.vak .ft{padding-bottom:calc(52px + env(safe-area-inset-bottom,0px))}
}

/* 3 nov 2026, telefoonronde 2 (Tom) */
@container vak (max-width:899.98px){
.gm2-r{padding-bottom:28px}
.gb .gb-d .gv{margin-top:6px;gap:16px}
.gb .gb-d .gv-p{height:150px}
}
@media (max-width:599.98px){
/* Aanspreekpunt: knop en regel direct onder de tekst, dan het gesprek */
.vak .two.h .wlk{order:4;margin-top:24px}
.vak .two.h .wlk-s{order:5;margin-top:14px}
.vak .two.h>.chat{order:6;margin-top:32px}
}
/* Prijs: het kader en de inhoud staan er niet vóórdat de animatie begint (anders staat het er, verdwijnt het en komt het terug) */
.vt.arm:not(.seen) .vt-fr{opacity:0}
.vt .vt-fr{transition:opacity .6s ease}

/* 3 nov 2026, telefoonronde 3 (Tom): geen kopbalk op de hero; in plaats daarvan loopt de rook bovenaan zacht uit naar wit, zodat er geen harde lijn staat waar de statusbalk (klok, wifi) eindigt */
@media (max-width:599.98px){
.vak .hero:before{content:"";position:absolute;left:0;right:0;top:calc(-1 * (60px + env(safe-area-inset-top,0px)));height:calc(60px + env(safe-area-inset-top,0px) + 56px);background:linear-gradient(#FFFFFF 0,#FFFFFF calc(60px + env(safe-area-inset-top,0px)),rgba(255,255,255,0) 100%);z-index:1;pointer-events:none}
}
/* Garantie op de telefoon, ronde 3 */
@media (max-width:599.98px){
.gm2{min-height:296px}.gm2-c .im{height:84px}.gm2-r span{height:38px}.gm2-r{padding-bottom:22px}
.gb .gb-d .gb-tx{row-gap:8px}
.gb .gb-d .gb-tx .afs-s,.gb .gb-d .gb-tx .afs-s+.afs-s{margin:0}
.gb .gb-d .gv{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.gb .gb-d .gv-p{height:104px}
.gb .gb-d .gv-p>*{zoom:.72}
}
/* Aanspreekpunt: het gesprek staat er pas als het in beeld komt */
.chat.arm:not(.go){opacity:0}
.chat{transition:opacity .5s ease}

/* 3 nov 2026, telefoonronde 4 (Tom): footer-socials op web en telefoon als blauw rondje met wit icoon en de tekst wit ernaast; geen pil, geen pijl. Bij aanwijzen: het rondje komt iets omhoog en er loopt een streep onder de tekst. */
.vak .ft-ic{gap:16px;align-items:flex-start}
.vak .ft-ic .ft-cb,.vak .ft-ic a.ft-cb:hover{width:auto;min-width:0;height:auto;padding:0;gap:14px;border-radius:0;background:transparent;color:#FFFFFF;overflow:visible;flex-direction:row;justify-content:flex-start;box-shadow:none;transform:none}
.vak .ft-ic .ft-cb:before{display:none}
.vak .ft-ic .ft-cb .ar{order:0;width:44px;height:44px;border-radius:50%;background:#1F8FFF;color:#FFFFFF;display:flex;align-items:center;justify-content:center;transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.vak .ft-ic .ft-cb .ar svg{width:22px;height:22px}
.vak .ft-ic .ft-cb .bt-t{order:1;position:relative;color:#FFFFFF;font-size:17px;font-weight:500;line-height:1.2}
.vak .ft-ic .ft-cb .bt-t:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:1px;background:#FFFFFF;transform:scaleX(0);transform-origin:0 50%;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.vak .ft-ic .ft-cb:hover .bt-t:after,.vak .ft-ic .ft-cb:focus-visible .bt-t:after,.vak .ft-ic .ft-cb.tap .bt-t:after{transform:scaleX(1)}
.vak .ft-ic .ft-cb:hover .ar,.vak .ft-ic .ft-cb.tap .ar{transform:translateY(-3px);box-shadow:0 10px 22px -8px rgba(31,143,255,.7)}
.vak .ft-ic .ft-cb:hover,.vak .ft-ic .ft-cb:hover .bt-t{color:#FFFFFF}
/* Garantie, Stoppen kan: de twee scenes mooier verticaal in hun vlak */
@media (max-width:599.98px){
.gb .gb-d .gv-p{height:112px}
.gb .gb-d .gv-p>*{margin-top:12px}
}

/* 3 nov 2026, telefoonronde 5 (Tom) */
@media (max-width:599.98px){
/* Garantie kaart 1: kleiner; het pilletje boven het wireframe weg en het wireframe korter */
.gm2-p{display:none}
.gm2{min-height:232px}
.gm2-s{top:0}
.gm2-r{padding-bottom:16px}
/* Stoppen kan: de twee scenes groter */
.gb .gb-d .gv-p{height:128px}
.gb .gb-d .gv-p>*{zoom:1.06;margin-top:4px}
/* Aanvraag: wat hierna gebeurt dichter op het formulier en de privacyregel */
.vak .aag{gap:44px}
.vak .tl-noot{margin-top:18px}
}
/* tikstanden voor de overige klikbare dingen (net als de knoppen: kort indrukken) */
.mbk-p.tap,.mbk-n.tap{transform:scale(.96);filter:brightness(.94)}
.mbk-i.tap .mbk-th{transform:scale(1.06)}
.wim-tab.tap,.vt-t.tap{background:#EDEDF0}
.pjt-t.tap{transform:scale(.97)}

/* 3 nov 2026, Prijs op de telefoon (Tom: het grijze vlak met de drie witte vakjes kan mooier): rustiger kader, de tegels met een fijne rand, de gekozen tegel zweeft licht, meer lucht in de uitleg */
@media (max-width:599.98px){
.vak .vt-tabs{background:#F2F2F5;border-radius:24px;padding:8px 8px var(--dh);gap:8px;box-shadow:inset 0 0 0 1px #E9E9EE}
.vak .vt .vt-t,.vak .vt .vt-t:first-child{border-radius:18px;padding:14px 10px 12px;background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px #E6E6EB}
.vak .vt .vt-t[aria-selected=true]{background:#FFFFFF;box-shadow:0 14px 28px -16px rgba(17,17,17,.4),0 0 0 1px #FFFFFF}
.vak .vt .vt-dw{left:18px;right:18px}
.vak .vt .vt-d{font-size:16px;line-height:1.5;color:#3C3C43}
}

/* 3 nov 2026, telefoonronde 6 (Tom) */
/* Werkwijze stap 5: de offerte ziet er nu anders uit dan stap 4 (twee regels met een bedrag, een totaal, dan de handtekening), even hoog als eerst */
.il.doc .dh .dn{font-style:normal;font-size:12px;font-weight:500;color:#8E8E93}
.il.doc .qr{display:flex;align-items:center;gap:12px}
.il.doc .qr .l{display:block;flex:1;height:8px;border-radius:4px;background:#3A3A3C;transform-origin:0 50%}
.il.doc .qr .l.s{flex:0 0 52%}
.il.doc .qp{display:block;width:44px;height:8px;border-radius:4px;background:#5A5A5E;margin-left:auto}
.il.doc .qt{display:flex;justify-content:space-between;align-items:center;padding-top:8px;border-top:1px dashed #3A3A3C;color:#FFFFFF;font-size:13px;font-weight:600}
.il.doc .qt i{display:block;width:60px;height:12px;border-radius:6px;background:#1F8FFF}
.ill-arm .il.doc .qp,.ill-arm .il.doc .qt{opacity:0}

.ill-go .il.doc .qp{animation:ilUp .5s ease .9s both}
.ill-go .il.doc .qt{animation:ilUp .5s ease 1.2s both}
/* Aanvraagformulier: laadt eerder en komt zacht binnen, met een rustig vlak zolang het nog laadt */
.tl-kader.arm:not(.ok){min-height:480px;border-radius:28px;background:rgba(255,255,255,.14)}
.tl-kader iframe{transition:opacity .3s ease}
.tl-kader.arm:not(.ok) iframe{opacity:0}
.il.doc{gap:8px;padding-top:14px;padding-bottom:14px}

/* 3 nov 2026, Branding op de telefoon, optie A (Tom): de merkboekrondjes midden onder de kaart als keuzebalkje; Vorige en Volgende weg op de telefoon (de kaart is zijwaarts te vegen); de knop Aanvragen staat er rustig boven */
@media (max-width:599.98px){
.mbk{display:grid;row-gap:26px}
.mbk-side{display:contents}
.mbk-side .mbk-hd{order:1}
.mbk-side .mbk-cta{order:2;margin:0}
.mbk-main{order:3;padding-bottom:0}
.mbk-bt{display:none}
.mbk-side .mbk-ls{order:4;position:static;left:auto;bottom:auto;display:flex;justify-content:center;gap:22px;margin:0}
.mbk .mbk-i,.mbk .mbk-i:last-child,.mbk .mbk-i[aria-selected=true],.mbk .mbk-i[aria-selected=true]:hover{width:56px;height:56px}
.mbk .mbk-i .mbk-th,.mbk .mbk-i .mbk-th.mbk-lg{width:56px;height:56px}
}

/* 3 nov 2026, Branding op de telefoon (Tom, ronde 7): de twee merkboekrondjes staan toch rechts naast de knop Aanvragen; Vorige en Volgende blijven weg (de kaart is te vegen) */
@media (max-width:599.98px){
.mbk{display:block}
.mbk-side{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;column-gap:16px}
.mbk-side .mbk-hd{flex:0 0 100%;order:0}
.mbk-side .mbk-cta{order:0;margin:24px 0 0}
.mbk-side .mbk-ls{order:0;position:static;display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:12px;margin:24px 0 0}
.mbk-main{margin-top:28px}
.mbk .mbk-i,.mbk .mbk-i:last-child,.mbk .mbk-i[aria-selected=true],.mbk .mbk-i[aria-selected=true]:hover{width:48px;height:48px}
.mbk .mbk-i .mbk-th,.mbk .mbk-i .mbk-th.mbk-lg{width:48px;height:48px}
}

/* 3 nov 2026, Prijs op de telefoon, ronde 7 (Tom: het grijze vlak blijft niet mooi): geen grijs vak en geen tegels meer. Drie rustige tabs op een rij (label en waarde), eronder een lijntje dat de gekozen tab vult, en de uitleg als gewone tekst. */
@media (max-width:599.98px){
.vak .vt-tabs{background:none;box-shadow:none;border-radius:0;padding:4px 0 var(--dh);gap:14px}
.vak .vt .vt-t,.vak .vt .vt-t:first-child,.vak .vt .vt-t:hover,.vak .vt .vt-t[aria-selected=true]{background:none;box-shadow:none;border-radius:0;padding:18px 0 6px;gap:0;color:#B0B0B6}
.vak .vt .vt-t[aria-selected=true]{color:#111111}
.vak .vt .vt-n{display:none}
.vak .vt .vt-k{font-size:13px;color:inherit;opacity:1}
.vak .vt .vt-ti{font-size:20px;white-space:nowrap;color:inherit}
.vak .vt .vt-bar{position:absolute;left:0;right:0;top:0;bottom:auto;width:auto;height:3px;border-radius:2px;background:#E5E5EA;overflow:hidden}
.vak .vt .vt-t[aria-selected=true] .vt-bar{background:#E5E5EA}
.vak .vt .vt-dw{left:0;right:0}
.vak .vt .vt-d{font-size:17px;line-height:1.5;color:#3C3C43;padding-top:6px}
}

/* 3 nov 2026, telefoonronde 8 (Tom) */
@media (max-width:599.98px){
/* Branding: de knop Aanvragen links, de twee rondjes rechts uitgelijnd */
.mbk-side .mbk-ls{margin-left:auto}
/* Prijs: drie lijntjes boven de tabs (elk in zijn eigen kolom); een gekozen tab vult blauw, een afgeronde tab blijft vol, de rest is grijs */
.vak .vt .vt-t,.vak .vt .vt-t:first-child,.vak .vt .vt-t:hover,.vak .vt .vt-t[aria-selected=true]{flex-direction:column;align-items:stretch;padding:0 0 6px}
.vak .vt .vt-bar{position:relative;top:auto;left:auto;right:auto;bottom:auto;display:block;width:100%;height:3px;margin:0 0 14px;border-radius:2px;background:#E5E5EA;overflow:hidden}
.vak .vt .vt-bar i{border-radius:2px}
}

/* tikstanden voor de laatste klikbare dingen: FAQ-vragen, het logo en de privacylink onder het formulier */
.qb.tap .pl{border-color:#1F8FFF;transform:scale(1.08)}
.qb.tap{opacity:.75}
a.wm.tap,.tl-noot a.tap{opacity:.7}

/* 4 nov 2026 (Tom): Branding op de telefoon: de twee rondjes staan er niet al, ze komen binnen samen met de knop Aanvragen (zelfde reveal), elk met een kleine pop */
.mbk-ls.rv-in .mbk-i{animation:ilPop .7s cubic-bezier(.34,1.56,.64,1) both}
.mbk-ls.rv-in .mbk-i:nth-child(2){animation-delay:.12s}
.mbk-ls.rv-in .mbk-i:nth-child(3){animation-delay:.24s}

/* Prijs op de telefoon, opnieuw (Tom): drie rijen onder elkaar in plaats van drie smalle kolommen. Nummerrondje, label en waarde, pijltje rechts; de gekozen rij klapt open met de uitleg, met een lijntje onderaan dat vult en doorschuift. */
@media (max-width:599.98px){
.vak .vt-tabs{display:flex!important;flex-direction:column;gap:0!important;padding:0!important;background:none!important;box-shadow:none!important;border-radius:0!important;position:static;margin-top:6px}
.vak .vt .vt-t,.vak .vt .vt-t:first-child,.vak .vt .vt-t:hover,.vak .vt .vt-t[aria-selected=true]{position:relative!important;display:flex!important;flex-direction:row!important;align-items:flex-start!important;gap:14px!important;width:100%;padding:18px 34px 20px 0!important;border:0!important;border-top:1px solid #E5E5EA!important;border-radius:0!important;background:none!important;box-shadow:none!important;color:#A8A8AE!important;text-align:left}
.vak .vt .vt-t:first-child{border-top:0!important}
.vak .vt .vt-t[aria-selected=true]{color:#111111!important}
.vak .vt .vt-n{display:flex!important;align-items:center;justify-content:center;flex:none;width:32px;height:32px;margin:3px 0 0!important;border-radius:50%;background:#F2F2F5!important;color:#8E8E93;font-size:12px;opacity:1}
.vak .vt .vt-t[aria-selected=true] .vt-n{background:#111111!important;color:#FFFFFF}
.vak .vt .vt-b{flex:1;min-width:0;gap:2px}
.vak .vt .vt-k{font-size:13px;color:inherit}
.vak .vt .vt-ti{font-size:24px;line-height:1.15;color:inherit;white-space:normal}
.vak .vt .vt-dw{position:static!important;height:auto!important;left:auto!important;right:auto!important;display:grid!important}
.vak .vt .vt-d{font-size:16px;line-height:1.55;color:#3C3C43;padding-top:0}
.vak .vt .vt-t[aria-selected=true] .vt-d{padding-top:12px}
.vak .vt .vt-bar{position:absolute!important;left:0!important;right:0!important;bottom:-1px!important;top:auto!important;width:auto!important;height:3px!important;margin:0!important;border-radius:2px;background:transparent!important;overflow:hidden}
.vak .vt .vt-t[aria-selected=true] .vt-bar{background:#E5E5EA!important}
.vak .vt .vt-t:after{content:"";position:absolute;right:6px;top:27px;width:9px;height:9px;border-right:2px solid #B9B9BF;border-bottom:2px solid #B9B9BF;transform:rotate(45deg);transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .3s,top .35s}
.vak .vt .vt-t[aria-selected=true]:after{transform:rotate(-135deg);border-color:#111111;top:32px}
}

/* 4 nov 2026: emoji-beoordeling in de voettekst (idee van 21st.dev "emoji-rating", nagebouwd in eigen stijl, geen React of Tailwind). Emoji's zijn grijs en doorzichtig tot je eroverheen gaat of tikt; het label eronder wisselt met een zachte vervaging. */
.vak .rt{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:44px}
.vak .rt-k{margin:0;font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.vak .rt-r{display:flex;gap:6px}
.vak .rt-b{display:flex;align-items:center;justify-content:center;width:56px;height:56px;padding:0;border:0;border-radius:18px;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.vak .rt-b span{font-size:34px;line-height:1;filter:grayscale(1);opacity:.4;transform:scale(1);transition:filter .3s,opacity .3s,transform .3s cubic-bezier(.34,1.56,.64,1);user-select:none}
.vak .rt-b.is-on span{filter:none;opacity:1;transform:scale(1.14)}
.vak .rt-b:focus-visible{outline:2px solid #1F8FFF;outline-offset:2px}
.vak .rt-l{position:relative;height:26px;width:200px}
.vak .rt-d,.vak .rt-t{position:absolute;left:0;top:0;font-size:17px;line-height:26px;white-space:nowrap;transition:opacity .3s,filter .3s,transform .3s}
.vak .rt-d{color:rgba(255,255,255,.6);font-weight:500}
.vak .rt-d.is-uit{opacity:0;filter:blur(6px);transform:scale(.96)}
.vak .rt-t{color:#FFFFFF;font-weight:600;letter-spacing:.01em;opacity:0;filter:blur(6px);transform:scale(1.04)}
.vak .rt-t.is-on{opacity:1;filter:none;transform:none}
@media (max-width:599.98px){.vak .rt{margin-top:36px}}
@media (prefers-reduced-motion:reduce){.vak .rt-b span,.vak .rt-d,.vak .rt-t{transition:none}}

/* 4 nov 2026 (Tom): beoordeling in de voettekst: op web onder de knop Aanvragen, op de telefoon onder de socials; privacyregel onder het formulier op één regel */
.vak .ft-ak{display:flex;flex-direction:column;align-items:flex-start;gap:30px}
.vak .rt-web{margin-top:0}
.vak .rt-tel{display:none}
@media (max-width:599.98px){
.vak .rt-web{display:none}
.vak .rt-tel{display:flex;margin-top:30px}
}
.vak .tl-noot{max-width:none}
/* 4 nov: web, beoordeling in de footer: de rij voor de woorden hangt onder de gezichtjes in plaats van er ruimte voor te houden; minder lucht onder het onderdeel (Tom) */
@media (min-width:600px){.vak .rt-web .rt-l{height:0;overflow:visible}.vak .ft-b{margin-top:40px}}
/* 4 nov: footer-contactknoppen: het icoon schuift bij hover niet meer naar rechts (Tom) */
.vak .ft-ic .ft-cb:hover .ar svg,.vak .ft-ic .ft-cb.tap .ar svg{transform:none}

/* 4 nov: merkboek: hint dat je kunt vegen of tikken (alleen telefoon, daar zijn de knoppen weg); tik links = terug, rechts = vooruit */
.mbk-hint{display:none}
@media (max-width:599.98px){.mbk-hint{display:block;margin:24px 0 0!important;text-align:center;font-size:13px;line-height:1.3;color:#8A8A8E;letter-spacing:.01em;transition:opacity .4s}.mbk-last .mbk-hint{opacity:0}}
/* 4 nov: prijs op telefoon: de gekozen rij ligt boven de volgende, zodat de rand van de volgende rij de onderste rij van de voortgangsbalk niet afdekt (vulling was daardoor dunner dan de balk, Tom) */
@media (max-width:599.98px){.vak .vt .vt-t[aria-selected=true]{z-index:2}}

/* 4 nov: prijs op telefoon korter (Tom): drie cirkels 01 02 03 naast elkaar met de voortgangsbalk ertussen; eronder alleen de tekst van de gekozen stap */
.vt-cur{display:none}
@media (max-width:599.98px){
.vak .vt .vt-tabs{display:flex!important;flex-direction:row!important;gap:0!important;border:0!important;margin-top:22px!important;padding:0!important}
.vak .vt .vt-t,.vak .vt .vt-t:first-child,.vak .vt .vt-t[aria-selected=true]{flex:1 1 0!important;display:flex!important;flex-direction:row!important;align-items:center!important;gap:0!important;padding:0!important;border:0!important;min-height:44px!important;position:relative!important;background:none!important;z-index:auto!important}
.vak .vt .vt-t:after,.vak .vt .vt-t:before{display:none!important}
.vak .vt .vt-b{display:none!important}
.vak .vt .vt-n{order:1;flex:none!important}
.vak .vt .vt-bar{order:2;position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;flex:1 1 auto!important;width:auto!important;height:3px!important;margin:0 12px!important;border-radius:2px!important;background:#E5E5EA!important;overflow:hidden!important}
.vak .vt .vt-cur{order:3;display:block;margin-top:18px;opacity:0}
.vak .vt .vt-cur.in{opacity:1}
.vak .vt .vt-n.pop{animation:vtbol .5s cubic-bezier(.34,1.56,.64,1)}
.vak .vt .vc-k{display:block;font-size:14px;line-height:1.4;font-weight:500;color:#8A8A8E}
.vak .vt .vc-t{display:block;margin-top:2px;font-size:30px;line-height:1.12;font-weight:700;letter-spacing:-.02em;color:#111111}
.vak .vt .vc-d{margin:12px 0 0;font-size:17px;line-height:1.5;color:#3C3C43}
}
@keyframes vtbol{0%{transform:scale(.8)}55%{transform:scale(1.22)}100%{transform:scale(1)}}
@media (max-width:599.98px) and (prefers-reduced-motion:reduce){.vak .vt .vt-n.pop{animation:none}}
/* 4 nov: aanvraagformulier: de velden komen van boven naar beneden zacht binnen in plaats van alles ineens. Het formulier zelf is van Tally (een apart venster), dus de velden kunnen niet los van elkaar bewegen; een zachte veeg van boven naar beneden komt daar het dichtst bij */
@keyframes tlveeg{from{-webkit-mask-position:0 100%;mask-position:0 100%}to{-webkit-mask-position:0 0;mask-position:0 0}}
.tl-kader.arm.ok iframe{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 38%,transparent 62%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 38%,transparent 62%,transparent 100%);-webkit-mask-size:100% 260%;mask-size:100% 260%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;animation:tlveeg 2.2s cubic-bezier(.45,.05,.35,1) both}
@media (prefers-reduced-motion:reduce){.tl-kader.arm.ok iframe{-webkit-mask-image:none;mask-image:none;animation:none}}

/* 4 nov: garantie, kaart 4: als de bestanden zijn overgezet verschijnt er even een blauw vinkje op het vak (Tom) */
.gv-tr{z-index:2}
.gv-ok{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:#1F8FFF;box-shadow:0 0 0 3px #FFFFFF;display:flex;align-items:center;justify-content:center}
.afs-js .afs-t:not(.go) .gv-ok{transform:scale(0)}
.gv-ok svg{width:15px;height:15px;fill:none;stroke:#FFFFFF;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@keyframes gvok{0%{transform:scale(0)}65%{transform:scale(1.3)}100%{transform:scale(1)}}
.afs-t.go .gv-ok{animation:gvok .5s cubic-bezier(.34,1.56,.64,1) 3.55s both}
@media (prefers-reduced-motion:reduce){.afs-t.go .gv-ok{animation:none;transform:scale(1)}}
/* 4 nov: prijs, kaart Bouw: 'live op je eigen domein' is gratis; geen prijsbalkje maar het woord (Tom) */
.vt-doc li em.vt-gr{font-style:normal;font-weight:600;font-size:12px;letter-spacing:.02em;color:#1F8FFF;white-space:nowrap}
/* 4 nov: footer web: beoordeling iets dichter bij de lijn eronder en iets verder van de knop erboven (Tom); verder niets aan de footer veranderd */
@media (min-width:600px){.vak .rt-web{position:relative;top:32px}}
/* 4 nov: beoordeling: het woord onder de gezichtjes is weg, je klikt alleen een gezichtje (Tom); de ruimte blijft zoals die was */
.rt-l{visibility:hidden}

/* 4 nov 2026, SEO-ronde: 'ga naar inhoud' alleen zichtbaar met Tab; maten op beelden veranderen niets aan de opmaak (height:auto zonder voorrang) */
.skip{position:fixed;top:12px;left:16px;z-index:9999;padding:12px 18px;border-radius:999px;background:#111111;color:#FFFFFF;font:500 15px/1 'Schibsted Grotesk',system-ui,sans-serif;text-decoration:none;opacity:0;pointer-events:none;transform:translateY(-200%)}
.skip:focus{opacity:1;pointer-events:auto;transform:none;outline:2px solid #1F8FFF;outline-offset:3px}
:where(img[width][height]){height:auto}

/* 2 nov, eerste livegang: Home en Prijzen staan niet in de kop, dus op de telefoon geen menu; de knop Aanvragen staat zelf in de balk */
@media (max-width:599.98px){.hd .nav{display:flex;margin-left:auto}}
.vak .wkcol .cap .cap-l{display:block;max-width:30ch;font-size:17px;line-height:1.5;margin:0;text-wrap:balance}
.vak .vs-n{display:inline-block;opacity:var(--vr,1);transform:translateY(calc((1 - var(--vr,1)) * 14px))}.vak .vs-s{position:relative;display:inline-block;color:#1F8FFF}.vak .vs-s i{position:absolute;left:.02em;right:.02em;top:1.04em;height:.08em;background:#1F8FFF;transform:scaleX(var(--vu,1));transform-origin:0 50%}
.wk .sk{overflow:hidden}.wk .sk img.sk-o{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;border-radius:16px;opacity:var(--so,1)}.wk .sk b{background:#E9E9EC;animation:none}html.tgfx .wk:not(.live){pointer-events:none}

/* 4 nov 2026, Websites: de zinnen rechts komen in vier regels, elk op zijn eigen moment, mee met het scrollen; daarna eyebrow, naam en knop na elkaar; (5 nov: voortgangsbalk, kaart-fade en KOR-thema weer weg, alleen de afbeelding beweegt) */
html.tgfx .wkcol{position:relative}
.wk-prog{display:none}
html.tgfx .wk-prog{display:block;position:absolute;right:max(20px,2.2cqw);top:calc(50% - min(23vh,180px) + 36px);width:5px;height:min(46vh,360px);pointer-events:none;opacity:calc(var(--sf,1) * var(--sa,0));transform:translate3d(calc((1 - var(--sa,0)) * 40px),0,0)}
.wk-prog b{position:absolute;left:0;right:0;top:0;bottom:0;background:#E3E3E6;border-radius:999px}
.wk-prog i{position:absolute;left:0;right:0;top:0;height:calc(var(--sp,0) * 100%);min-height:5px;background:#1F8FFF;border-radius:999px}
.vak .cap-l .c2{color:#111111}
.vak .cap-l .c1d{opacity:calc(1 - var(--rn,0))}
.vak .cap-l .c1{color:color-mix(in srgb,#111111 calc((1 - var(--rn,0)) * 100%),#A1A1A6)}
html.tgfx .wkcol .cap .cap-l{opacity:1;transform:none}
html.tgfx .wkcol .cap .cap-l .l1,html.tgfx .wkcol .cap .cap-l .l2{display:inline-block}
html.tgfx .wkcol .cap .cap-l .c1{opacity:var(--ro1,1);transform:translate3d(0,calc((1 - var(--ro1,1)) * 14px),0)}
html.tgfx .wkcol .cap .cap-l .c2{opacity:var(--rn,1);transform:translate3d(0,calc((1 - var(--rn,1)) * 14px),0)}
html.tgfx .wkcol .cap .wk-card{opacity:var(--mc,1);transform:translate3d(0,calc((1 - var(--mc,1)) * 20px),0)}
html.tgfx .wkstage:not(.wk-live) .wk-go{pointer-events:none}
@container (min-width:900px){
.wk-card{display:contents}
.vak .wkcol .cap{flex:1;gap:6px;margin-top:0;justify-content:space-between}
.vak .wkcol .cap .wk-card{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:auto;padding:26px 28px 28px;border-radius:24px;background:#FFFFFF;border:1px solid #E5E5EA;box-shadow:0 24px 48px -24px rgba(17,17,17,.22),0 2px 6px rgba(17,17,17,.04)}
.vak .wkcol .cap .cap-e{display:inline-flex;align-items:center;gap:8px}.vak .wkcol .cap .cap-e:before{content:"";width:8px;height:8px;border-radius:50%;background:#1F8FFF;flex:none}
.vak .wkcol .cap .cap-l{order:-1;max-width:none;font-size:clamp(21px,1.75cqw,27px);line-height:1.14;font-weight:700;letter-spacing:-.025em;margin:0;text-wrap:nowrap;white-space:nowrap}
.vak .wkcol .cap .cap-t{font-size:clamp(26px,2.1cqw,32px);font-weight:600;line-height:1.12;letter-spacing:-.02em}
.vak .wkcol .cap .wk-go{margin-top:12px}
html.tgfx .wkcol .cap .cap-l .c1,html.tgfx .wkcol .cap .cap-l .c2{display:block}
.vak .wkcol .cap .cap-l .c2{margin-top:.5em}
}
/* 5 nov 2026, Websites op de telefoon: geen plakkend vlak; de telefoon loopt van wireframe naar de oude site en dan naar de nieuwe, mee met het scrollen (--pw, --pn); de zin eronder wisselt mee; daaronder het witte kaartje zoals op web */
html:not(.tgfx) .wk .sk{opacity:1;clip-path:inset(100% 0 0 0)}
html:not(.tgfx) .vak .wkrow>.wk .sk{transition:clip-path .9s cubic-bezier(.65,0,.35,1)}
html:not(.tgfx) .wk[data-ph="0"] .sk,html:not(.tgfx) .wk[data-ph="1"] .sk{clip-path:inset(0 0 0 0)}
html:not(.tgfx) .wk .sk img.sk-o{opacity:1;transition:opacity .7s ease}
html:not(.tgfx) .wk[data-ph="0"] .sk img.sk-o{opacity:0}
@container vak (min-width:900px){.vak .wkrow>.wk .sk img.sk-o{object-fit:cover;background:none}}
.vak .wkrow>.wk .sk picture{display:contents}
.vak .wkrow>.wk .sk img.sk-o{inset:0;left:0;top:0;width:100%;height:100%;border-radius:inherit;object-fit:contain;object-position:center top;background:#111111}
html:not(.tgfx) .wkcol .cap .cap-l .c1{opacity:var(--ro1,1);transform:translate3d(0,calc((1 - var(--ro1,1)) * 12px),0)}
html:not(.tgfx) .wkcol .cap .cap-l .c2{opacity:var(--rn,1);transform:translate3d(0,calc((1 - var(--rn,1)) * 12px),0)}
html:not(.tgfx) .wkcol .cap .wk-card{transition:opacity .6s ease,transform .7s cubic-bezier(.22,1,.36,1)}
html:not(.tgfx) .wkstage[data-card="0"] .wkcol .cap .wk-card{opacity:0;transform:translate3d(0,20px,0)}
@container vak (max-width:899.98px){
.vak .wkrow{display:flex!important;flex-direction:column;align-items:flex-start}
.vak .wkrow .wkcol{display:contents}
.vak .wkrow .wkcol .cap{display:contents!important}
.vak .wkrow>.wk{align-self:center;order:0;margin:26px 0 0;height:min(clamp(360px,calc(100svh - 330px),600px),calc((100vw - 40px) * 146.6 / 71.5));transform-origin:50% 100%}
html:not(.tgfx) .vak .wkrow>.wk{will-change:opacity}
html:not(.tgfx) .vak .wkrow>.wk[data-in="0"]{opacity:0}
html:not(.tgfx) .vak .wkrow>.wk[data-in="1"]{animation:wkIn 1.3s cubic-bezier(.33,0,.2,1) both}
@keyframes wkIn{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
.vak .wkrow>.wk:after{box-shadow:0 22px 30px -28px rgba(17,17,17,.4)}
.vak .wkrow .wkcol .cap .cap-l{display:none!important;order:-1;max-width:none;width:100%;font-size:clamp(21px,6vw,25px);line-height:1.15;font-weight:700;letter-spacing:-.025em;margin:22px 0 0;text-wrap:balance}
.vak .wkrow .wkcol .cap .cap-l{position:relative;min-height:2.35em}
.vak .wkrow .wkcol .cap .cap-l .c1,.vak .wkrow .wkcol .cap .cap-l .c2{display:block;position:absolute;left:0;right:0;top:0;margin:0}
.vak .wkrow .wkcol .cap .cap-l .c1{opacity:calc(var(--ro1,1) * (1 - var(--rn,1)));transform:none}
.vak .wkrow .wkcol .cap .cap-l .c2{transform:none}
.vak .wkrow .wkcol .cap .cap-l .c1,.vak .wkrow .wkcol .cap .cap-l .c1d{color:#8E8E93}
.vak .wkrow .wkcol .cap .wk-card{position:relative;z-index:2;order:1;width:100%;margin-top:40px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:0;border-radius:0;background:none;border:0;box-shadow:none}
.vak .wkrow .wkcol .cap .cap-e{grid-column:auto;grid-row:auto;display:inline-flex;align-items:center;gap:8px;margin:0;font-size:14px}
.vak .wkrow .wkcol .cap .cap-e:before{content:"";width:8px;height:8px;border-radius:50%;background:#1F8FFF;flex:none}
.vak .wkrow .wkcol .cap .cap-t{grid-column:auto;grid-row:auto;font-size:28px;font-weight:600;line-height:1.12;letter-spacing:-.02em;margin:0}
.vak .wkrow .wkcol .cap .wk-go{grid-column:auto;grid-row:auto;margin:14px 0 0!important;width:auto;height:56px;padding:0 8px 0 28px!important;gap:16px;justify-content:flex-start;font-size:17px}
.vak .wkrow .wkcol .cap .wk-go .bt-t{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
.vak .wkrow .wkcol .cap .wk-go:before{width:40px!important;height:40px!important;right:8px!important;left:auto!important;top:50%!important;margin-top:-20px!important;transform:none}
.vak .wkrow .wkcol .cap .wk-go .ar{width:40px!important;height:40px!important}
}
.vak .cap-l .c2 .bl-u i{top:1.08em;height:.1em;transform:scaleX(0);transition:transform .25s ease}
.vak .wkstage.wk-ul .cap-l .c2 .bl-u i{transform:scaleX(1);transition:transform .9s cubic-bezier(.7,0,.2,1) .25s}