
.hero{position:relative;margin-top:calc(-1*var(--kop-h));isolation:isolate}
.toneel{position:relative;
--knop-vlak:color-mix(in oklab,var(--room),var(--accent) calc(var(--licht)*100%));
--knop-tekst:color-mix(in oklab,var(--inkt),var(--dag) calc(var(--licht)*100%));
background:color-mix(in oklab,var(--nacht),var(--dag) calc(var(--licht)*100%))}
.stage{position:relative;overflow:hidden;min-height:100svh;color:var(--room);touch-action:pan-y;display:flex;align-items:center}
.media,.poster,.laag,.scrim,.scrub{position:absolute;inset:0}
.media{overflow:hidden;transform-origin:62% 55%}
.poster img,.scrub{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.poster-start{background:var(--nacht) center/cover no-repeat}
.scrub{opacity:0;transition:opacity .24s var(--ease-out)}
.stage.video-klaar .scrub{opacity:1}
.laag,.scrim{pointer-events:none}
.ring{position:absolute;right:32px;bottom:32px;width:28px;height:28px;z-index:4;fill:none;stroke:var(--amber);stroke-width:3;stroke-linecap:round;
stroke-dasharray:1;stroke-dashoffset:var(--laad,1);transform:rotate(-90deg)}
.banden{position:relative;z-index:3}
.band{position:relative;--k:1}
.hero-kop{font-size:var(--fs-hero);line-height:.98;font-weight:700;font-stretch:85%;letter-spacing:-.02em;max-width:16ch;text-wrap:balance}
.br-d{display:none}
@media (min-width:1024px){.br-d{display:inline}.hero-kop{text-wrap:nowrap}}
.herozin{font-family:var(--display);font-size:var(--fs-herozin);line-height:1.2;font-weight:600;font-stretch:92%;letter-spacing:-.01em;text-wrap:balance}
.band-3 .herozin{font-size:clamp(1.5rem,1.1rem + 1.3vw,2.25rem)}
.band-1__actie{margin-top:var(--s6)}
.band-1 .drempel{margin-top:var(--s4)}
.contactregel{margin-top:var(--s3)}
.band-3__actie{margin-top:var(--s6)}
.band-3__actie .drempel{margin-top:var(--s4)}
.band-3 .feiten{margin-top:var(--s5)}
.band-1,.band-2{color:var(--room)}
.band-1 .hero-kop,.band-2 .herozin,.band-1 .contactregel{text-shadow:var(--tshadow)}
.band-1 .drempel{color:color-mix(in oklab,var(--room),var(--room-zacht) 35%);text-shadow:var(--tshadow)}
.band-1 :focus-visible,.band-2 :focus-visible{outline-color:var(--amber)}
.band-1 ::selection,.band-2 ::selection{background:var(--room);color:var(--nacht)}
.band-inkt{color:var(--inkt)}
.band-inkt .drempel{color:var(--inkt-zacht)}
.w{display:inline-block;white-space:pre}
.banden{width:100%;max-width:calc(var(--container) + 2*var(--zij));margin-inline:auto;padding:calc(var(--kop-h) + var(--s8)) var(--zij) var(--s8);
display:flex;flex-direction:column;align-items:flex-start}
.band-1,.band-2{display:contents}
.hero-kop{order:1}.band-2 .herozin{order:2;margin-top:var(--s5);max-width:28ch}.band-1__actie{order:3}.contactregel{order:4}
.poster-start,.laag,.scrub{display:none}
html:not(.hero-scrub):not(.hero-staand) .stage{color:var(--inkt)}
html:not(.hero-scrub):not(.hero-staand) .scrim{background:linear-gradient(90deg,rgb(246 239 225/.2) 0%,rgb(246 239 225/.86) 48%,rgb(246 239 225/.93) 100%)}
html:not(.hero-scrub):not(.hero-staand) .band-1,html:not(.hero-scrub):not(.hero-staand) .band-2{color:var(--inkt)}
html:not(.hero-scrub):not(.hero-staand) .band-1 *,html:not(.hero-scrub):not(.hero-staand) .band-2 *{text-shadow:none}
html:not(.hero-scrub):not(.hero-staand) .band-1 .drempel{color:var(--inkt-zacht)}
html:not(.hero-scrub):not(.hero-staand) .band-1 :focus-visible{outline-color:var(--accent)}
html:not(.hero-scrub):not(.hero-staand) .toneel{--licht:1}
html:not(.hero-scrub):not(.hero-staand) .band-3__actie{display:none}
@media (min-width:1024px){
html:not(.hero-scrub):not(.hero-staand) .banden{padding-left:calc(var(--zij) + (min(100vw,var(--container) + 2*var(--zij)) - 2*var(--zij) + var(--goot))*6/12)}
}
@media (min-width:1024px){
html:not(.hero-scrub):not(.hero-staand) .dag-laag .band-3{padding-left:calc(var(--zij) + (min(100vw,var(--container) + 2*var(--zij)) - 2*var(--zij) + var(--goot))*6/12)}
}
@media (max-width:1023px){
html:not(.hero-scrub):not(.hero-staand) .stage{align-items:flex-start}
html:not(.hero-scrub):not(.hero-staand) .scrim{background:linear-gradient(180deg,rgb(246 239 225/.9) 0%,rgb(246 239 225/.88) 62%,rgb(246 239 225/.35) 100%)}
}
.dag-laag{background:var(--dag);position:relative;z-index:2}
.dag-rand{position:absolute;left:0;width:1px;bottom:calc(100% + var(--kop-h));height:100svh;pointer-events:none}
.dag-sensor{position:absolute;left:0;bottom:0;width:1px;height:1px;pointer-events:none}
.dag-laag .band-3{max-width:calc(var(--container) + 2*var(--zij));margin-inline:auto;padding:var(--s8) var(--zij) var(--s4)}
.dag-laag .band-3 .herozin{max-width:30ch}
.hero-staand .stage{position:sticky;top:0;height:100svh;min-height:0;align-items:flex-start}
.hero-staand .dag-laag{margin-top:85svh}
.hero-staand .dag-laag::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:48px;background:linear-gradient(to top,var(--dag),rgb(246 239 225/0));pointer-events:none}
.hero-staand .laag{display:block}
.hero-staand .laag-nacht{background:rgb(26 32 43/.84)}
.hero-staand .laag-warm{opacity:0;background:linear-gradient(180deg,rgb(40 30 20/.62) 0%,rgb(58 40 22/.5) 50%,rgb(40 28 18/.16) 100%)}
.hero-staand .scrim{background:linear-gradient(180deg,rgb(10 12 18/.42) 0%,rgb(10 12 18/.2) 70%,rgb(10 12 18/0) 100%)}
.hero-staand .poster-eind img{object-position:50% 72%}
.hero-staand .banden{padding-top:calc(var(--kop-h) + 36px);padding-bottom:var(--s5)}
.hero-staand .band-2 .herozin{font-family:var(--tekst);font-size:17px;line-height:1.5;font-weight:400;font-stretch:100%;letter-spacing:0;margin-top:var(--s5);max-width:34ch;text-wrap:pretty}
.hero-staand .band-1__actie{margin-top:var(--s5);width:100%}
.hero-staand .band-1__actie .knop{width:100%;min-height:52px;padding-inline:var(--s4)}
.hero-staand .band-1 .drempel{font-size:14px;margin-top:10px}
.hero-staand .contactregel{margin-top:10px}
.hero-staand .band-3__actie{display:none}
@supports (animation-timeline:scroll()){
@media (prefers-reduced-motion:no-preference){
.hero-staand .laag-nacht{animation:laag-uit linear both;animation-timeline:scroll(root);animation-range:0 90svh}
.hero-staand .laag-warm{animation:laag-in linear both;animation-timeline:scroll(root);animation-range:0 90svh}
}
}
@keyframes laag-uit{to{opacity:0}}
@keyframes laag-in{to{opacity:1}}
.hero-staand .toneel.is-dag .laag-nacht{opacity:0;transition:opacity .6s var(--ease-out)}
.hero-staand .toneel.is-dag .laag-warm{opacity:1;transition:opacity .6s var(--ease-out)}
.hero-scrub .toneel{height:450vh}
.hero-scrub .stage{position:sticky;top:0;height:100svh;min-height:0;display:block;
-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 160px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 160px),transparent)}
.hero-scrub .poster-start,.hero-scrub .scrub{display:block}
.hero-scrub .poster-eind{opacity:0}
.hero-scrub .poster-start,.hero-scrub .poster-eind{will-change:opacity}
.hero-scrub .media{will-change:transform}
.hero-scrub .scrim{background:radial-gradient(ellipse 120% 90% at 50% 45%,rgb(10 12 18/0) 35%,rgb(10 12 18/.5) 100%);opacity:calc(1 - var(--licht)*.85)}
.hero-scrub .banden{position:absolute;inset:0;padding:0;display:block;max-width:none}
.hero-scrub .band{position:absolute;inset:var(--kop-h) 0 0 0;display:flex;align-items:center;opacity:0;visibility:hidden;will-change:opacity}
.hero-scrub .band.is-zichtbaar{visibility:visible}
.hero-scrub .band{padding-inline:max(var(--zij),calc((100vw - var(--container))/2))}
.hero-scrub .band-1,.hero-scrub .band-2{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
padding-left:calc(max(var(--zij),(100vw - var(--container))/2) + (min(100vw - 2*var(--zij),var(--container)) + var(--goot))*6/12)}
.hero-scrub .band-1 .hero-kop,.hero-scrub .band-2 .herozin{order:0;margin:0}
.hero-scrub .band-1__actie,.hero-scrub .contactregel{order:0}
.hero-scrub .band-2 .herozin{max-width:17ch;font-size:var(--fs-herozin)}
.hero-scrub .band-1::before,.hero-scrub .band-2::before,.hero-scrub .band-3::before{content:"";position:absolute;z-index:-1;pointer-events:none;
left:calc(50% + 4%);top:50%;width:74%;height:92%;transform:translate(-30%,-50%)}
.hero-scrub .band-1::before{background:radial-gradient(closest-side,rgb(10 12 18/calc(.4 + .18*var(--k))),rgb(10 12 18/0))}
.hero-scrub .band-2::before{background:radial-gradient(closest-side,rgb(10 12 18/calc(.34 + .18*var(--k))),rgb(10 12 18/0))}
.hero-scrub .dag-laag{position:sticky;top:0;height:100svh;margin-top:-100svh;background:none;z-index:3;pointer-events:none}
.hero-scrub .dag-laag .band-3{position:absolute;inset:var(--kop-h) 0 0 0;max-width:none;margin:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
padding:0 max(var(--zij),calc((100vw - var(--container))/2)) 0 calc(max(var(--zij),(100vw - var(--container))/2) + (min(100vw - 2*var(--zij),var(--container)) + var(--goot))*6/12)}
.hero-scrub .dag-laag .band-3>*{pointer-events:auto}
.hero-scrub .dag-laag .band-3 .herozin{max-width:24ch}
.hero-scrub .band-3::before{width:82%;height:104%;background:radial-gradient(closest-side,rgb(246 239 225/.9),rgb(246 239 225/.74) 52%,rgb(246 239 225/.3) 82%,rgb(246 239 225/0))}
.stap-in{--sp:.26}
.band-3 .herozin.stap-in{--th:0;--sp:.6}
.band-3__actie.stap-in{--th:.62}
.band-3 .feiten.stap-in{--th:.74}
@media (prefers-reduced-motion:no-preference){
.js .band-1 .w{--w:clamp(0,(var(--k) - var(--th,0))/.6,1);opacity:var(--w);transform:translateY(calc((1 - var(--w))*16px))}
.hero-scrub .band-2 .w{--w:clamp(0,(var(--k) - var(--th,0))/.6,1);opacity:var(--w);transform:translateY(calc((1 - var(--w))*-24px))}
.hero-scrub .band-3 .stap-in{--w:clamp(0,(var(--k) - var(--th,0))/var(--sp),1);opacity:var(--w);transform:translateY(calc((1 - var(--w))*14px))}
.js .band-1{animation:band-laad .9s var(--ease-out) .08s both}
.js .band-1__actie,.js .band-1 .contactregel{--w:clamp(0,(var(--k) - .5)/.5,1);opacity:var(--w);transform:translateY(calc((1 - var(--w))*10px))}
}
@keyframes band-laad{from{--k:0}to{--k:1}}
.zo-werkt{padding-top:calc(var(--sectie) + var(--s5))}
.zo-werkt__kop{display:grid;align-content:start;gap:var(--s5);justify-items:start}
.zo-werkt__kop .kop2{max-width:16ch}
.zo-werkt .tijdlijn{margin-top:var(--s7)}
@media (min-width:1024px){
.zo-werkt__kop{grid-column:1/span 5;position:sticky;top:calc(var(--kop-h) + var(--s8));align-self:start}
.zo-werkt .tijdlijn{grid-column:7/-1;margin-top:0}
}
.krijgt{padding-top:var(--s6)}
.krijgt__lijst .kop2{margin-bottom:var(--s6)}
.krijgt .vinklijst{margin-bottom:var(--s6)}
.krijgt .vinklijst li:nth-child(4){padding-bottom:var(--s5);border-bottom:1px solid var(--lijn)}
@media (min-width:1024px){
.krijgt__lijst{grid-column:1/span 6;align-self:center}
.krijgt .vernieuw{grid-column:8/-1;justify-self:end}
}
@media (max-width:1023px){.krijgt .vernieuw{margin-top:var(--s7)}}
.prijzen-kort .kop2{max-width:22ch;margin-bottom:var(--s8)}
.ai-kort{padding-block:var(--s4) var(--sectie)}
.ai-kort .ai__probeer{margin-top:var(--s4);font-weight:600}
.ai-kort .ai__vraag{font-weight:600;margin-bottom:var(--s4)}
.ai-kort .acties{margin-top:var(--s3)}
.afspraken__beeld img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius-beeld)}
.afspraken__lijst .kop2{max-width:18ch;margin-bottom:var(--s6)}
@media (min-width:1024px){
.afspraken__beeld{grid-column:1/span 5;position:sticky;top:calc(var(--kop-h) + var(--s7));align-self:start}
.afspraken__lijst{grid-column:7/-1}
}
@media (max-width:1023px){.afspraken__lijst{margin-top:var(--s7)}}
.afspraken .stap__nr{--stap-bg:var(--dag-diep)}
.faq-kort .kop2{margin-bottom:var(--s6);max-width:20ch}
.faq-kort .vragen{margin-bottom:var(--s5)}
@media (min-width:1024px){.faq-kort__binnen{width:calc((100% + var(--goot))*8/12 - var(--goot))}}
