/* Forma 22 · openingsanimaties per pagina */
.f22-ia-layer{position:fixed;inset:0;z-index:9990;pointer-events:none}
.f22-ia-wait{visibility:hidden!important}
/* pagina eerst leeg: alleen de animatie, daarna het ene onderdeel, dan pas de rest */
html.f22-ia-pre #main-content .et_pb_section .et_pb_row,html.f22-ia-pre #main-content .et_pb_section .f22-ia-fan,html.f22-ia-pre footer,html.f22-ia-pre #main-footer,html.f22-ia-pre .f22-chat,html.f22-ia-pre [class*="f22-chat"]{visibility:hidden}
html.f22-ia-pre .f22-ia-target:not(.f22-ia-wait){visibility:visible}
html.f22-ia-reveal #main-content .et_pb_section .et_pb_column>*:not(.f22-ia-target):not(:has(.f22-ia-target)),html.f22-ia-reveal .f22-ia-icons~*{animation:f22iaUp .7s cubic-bezier(.2,.7,.2,1) both}
html.f22-ia-reveal #main-content .et_pb_section .et_pb_column>*:nth-child(2){animation-delay:.08s}
html.f22-ia-reveal #main-content .et_pb_section .et_pb_column>*:nth-child(3){animation-delay:.16s}
html.f22-ia-reveal #main-content .et_pb_section .et_pb_column>*:nth-child(n+4){animation-delay:.24s}
html.f22-ia-reveal .pz3 .opts>*,html.f22-ia-reveal .pz3 .c>div:first-child{animation:f22iaUp .7s cubic-bezier(.2,.7,.2,1) both}
html.f22-ia-reveal .pz3 .opts>*:nth-child(2){animation-delay:.1s}html.f22-ia-reveal .pz3 .opts>*:nth-child(3){animation-delay:.18s}html.f22-ia-reveal .pz3 .opts>*:nth-child(n+4){animation-delay:.26s}
.f22-ia-done.f22-ia-tl .ln line{animation:f22iaLine 1.4s .05s ease both}
.f22-ia-done.f22-ia-tl .d{animation:f22iaUp .5s both;animation-delay:calc(.15s + var(--i)*.22s)}
.f22-ia-done.f22-ia-tl .d i{animation:f22iaPop .45s both;animation-delay:calc(.1s + var(--i)*.22s)}
@keyframes f22iaLine{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
@keyframes f22iaUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes f22iaPop{0%{opacity:0;transform:scale(.4)}70%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:none}}
/* diensten: keuzerij */
.f22-ia-icons{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.f22-ia-ic{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:inherit;min-width:72px}
.f22-ia-ic span{width:64px;height:64px;border-radius:16px;background:#EEE8DC;color:#221B15;display:flex;align-items:center;justify-content:center;transition:transform .25s,background .25s;box-shadow:0 18px 30px -14px rgba(0,0,0,.6)}
.f22-ia-ic:hover span,.f22-ia-ic:focus-visible span{transform:translateY(-4px);background:#B9C48F}
.f22-ia-ic b{font:500 13px var(--f22-sans);opacity:.85}
/* werkwijze: tijdlijn */
.f22-ia-tl{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:34px;max-width:620px;padding-top:2px}
.f22-ia-tl .ln{position:absolute;left:14px;right:14px;top:14px;width:calc(100% - 28px);height:4px;overflow:visible}
.f22-ia-tl .ln line{stroke:#B9C48F;stroke-width:2;stroke-dasharray:1000;stroke-dashoffset:1000}
.f22-ia-tl .d{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.f22-ia-tl .d i{width:28px;height:28px;border-radius:50%;background:#EEE8DC;color:#221B15;font:600 12px var(--f22-sans);font-style:normal;display:flex;align-items:center;justify-content:center}
.f22-ia-tl .d b{font:500 13px var(--f22-sans)}
/* projecten: waaier */
.f22-page-hero{position:relative}
.f22-ia-fan{position:absolute;right:6%;top:50%;width:min(40vw,520px);height:300px;transform:translateY(-40%);pointer-events:none}
.f22-ia-fan img{position:absolute;left:50%;top:50%;width:58%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;box-shadow:0 26px 50px -18px rgba(0,0,0,.75);transform:translate(-50%,-50%) translateX(calc((var(--i) - 2) * 16%)) rotate(calc((var(--i) - 2) * 6deg));transform-origin:50% 120%}
.f22-ia-fan img:nth-child(3){z-index:3}.f22-ia-fan img:nth-child(2),.f22-ia-fan img:nth-child(4){z-index:2}
@media (max-width:980px){.f22-ia-fan{position:relative;right:auto;top:auto;transform:none;width:100%;height:220px;margin-top:30px}}
@media (max-width:600px){.f22-ia-tl{grid-template-columns:repeat(5,minmax(0,1fr))}.f22-ia-tl .d b{font-size:11px}.f22-ia-ic span{width:54px;height:54px}}
@media (prefers-reduced-motion:reduce){.f22-ia-done *{animation:none!important}.f22-ia-tl .ln line{stroke-dashoffset:0}}
/* diensten: altijd vijf naast elkaar, ook op de telefoon */
@media (max-width:600px){.f22-ia-icons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 6px;flex-wrap:nowrap}.f22-ia-ic{min-width:0;gap:6px}.f22-ia-ic span{width:100%;max-width:56px;height:auto;aspect-ratio:1;border-radius:14px}.f22-ia-ic span svg{width:22px;height:22px}.f22-ia-ic b{font-size:10.5px;text-align:center;line-height:1.2;white-space:nowrap}}

/* werkwijze: de lijn uit de 22 staat er al; niet opnieuw tekenen */
.f22-ia-tl.f22-ia-lnset .ln line{animation:none!important;stroke-dashoffset:0}

/* Projecten: uitgelicht project */
.f22-pf-show{display:grid;grid-template-columns:1.6fr 1fr;gap:28px;align-items:center;max-width:1180px;margin:36px auto 56px;padding:0 4%;position:relative;z-index:2}
.f22-pf-show .sh-br{border-radius:18px;overflow:hidden;background:#0F0B08;box-shadow:0 50px 90px -40px rgba(0,0,0,.9),0 0 0 1px rgba(236,228,210,.12)}
.f22-pf-show .bar{height:30px;background:#2A231C;display:flex;align-items:center;gap:7px;padding:0 12px}.f22-pf-show .bar i{width:10px;height:10px;border-radius:50%;background:#4a3f33}.f22-pf-show .bar i:first-child{background:#B9C48F}
.f22-pf-show .bar .u{flex:1;margin-left:10px;height:18px;border-radius:9px;background:#1B1510;color:#C9BFAE;font:500 10.5px var(--f22-mono);display:flex;align-items:center;padding-left:10px}
.f22-pf-show .bar .go{font:600 11.5px var(--f22-sans);color:#221B15!important;background:#ECE4D2;padding:4px 10px;border-radius:99px;text-decoration:none!important;white-space:nowrap}
.f22-pf-show .sh-img{position:relative;aspect-ratio:16/9;overflow:hidden}.f22-pf-show .sh-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.f22-pf-show .sh-img img.b{opacity:0;transform:scale(1.04)}.f22-pf-show .sh-img img.b.on{animation:shIn .65s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes shIn{to{opacity:1;transform:none}}
.f22-pf-show .sh-side{display:flex;flex-direction:column;gap:6px;color:#ECE4D2}
.f22-pf-show .sh-k{font:500 11px var(--f22-mono);letter-spacing:.2em;text-transform:uppercase;color:#B9C48F}
.f22-pf-show .sh-n{font:600 34px/1.05 var(--f22-sans);letter-spacing:-.04em}.f22-pf-show .sh-d{color:#C9BFAE;font-size:14px;margin-bottom:12px}
.f22-pf-show .sh-th{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.f22-pf-show .sh-th button{all:unset;cursor:pointer;aspect-ratio:16/10;border-radius:8px;overflow:hidden;opacity:.55;box-shadow:0 0 0 1px rgba(236,228,210,.15);transition:opacity .25s,transform .25s,box-shadow .25s}
.f22-pf-show .sh-th button img{width:100%;height:100%;object-fit:cover;display:block}
.f22-pf-show .sh-th button:hover{opacity:.9;transform:translateY(-2px)}.f22-pf-show .sh-th button.on{opacity:1;box-shadow:0 0 0 2px #B9C48F}
.f22-pf-show .sh-pg{height:3px;border-radius:3px;background:rgba(236,228,210,.12);overflow:hidden;margin-top:12px}.f22-pf-show .sh-pg i{display:block;height:100%;background:#B9C48F;transform-origin:0 50%;animation:shPg 5s linear forwards}
@keyframes shPg{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:860px){.f22-pf-show{grid-template-columns:1fr;gap:16px;margin:20px auto 34px}.f22-pf-show .sh-n{font-size:26px}.f22-pf-show .sh-th{grid-template-columns:repeat(4,1fr)}}
html.f22-ia-pre #main-content .f22-pf-show:not(.f22-ia-target){visibility:hidden}
.f22-tone-z .f22-pf-show .sh-side,.f22-group-z .f22-pf-show .sh-side{color:#221B15}.f22-tone-z .f22-pf-show .sh-d,.f22-group-z .f22-pf-show .sh-d{color:#4d463b}.f22-tone-z .f22-pf-show .sh-k,.f22-group-z .f22-pf-show .sh-k{color:#5f6b44}