/* Gegenereerd door _bouw.py uit ontwerp-canvas. Niet met de hand aanpassen. */
.page ul{margin:0;padding:0;list-style:none}
.page ul,.page ol{margin:0;padding:0;list-style:none}
.page strong,.page label{font-weight:600}
.page .dark h2,.page .dark h3{color:#FFFFFF}
.page .nav a{text-decoration:none}
.page .btn{display:inline-flex;align-items:center;gap:12px;background:#9E4F33;color:#FFFFFF;text-decoration:none;font-family:var(--fb);font-weight:600;border:0;border-radius:999px;cursor:pointer;transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease)}
.page .btn svg{transition:transform .45s var(--ease)}
.page .btn:hover svg{transform:translateX(6px)}
.page .brief{font-family:var(--fd);font-size:clamp(21px,2vw,27px);line-height:1.35;color:#0B3B5A}
.page .regel{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.page .regel input{flex:1 1 200px;min-width:0;font-family:var(--fd);font-size:inherit;color:#14242F;background:transparent;border:0;border-bottom:1.5px solid #0B3B5A;border-radius:0;padding:4px 2px 6px;min-height:44px;box-sizing:border-box;transition:border-color .3s,background .3s}
.page .regel input::placeholder,.page textarea::placeholder{color:#4F6470;opacity:1}
.page .regel input:hover{background:rgba(182,209,217,.22)}
.page .regel input:focus{outline:0;border-bottom-color:#9E4F33;background:rgba(182,209,217,.35)}
.page textarea{font-family:var(--fb);font-size:18px;line-height:1.55;color:#14242F;background:#F1F6F6;border:1.5px solid transparent;border-radius:18px;padding:16px 18px;box-sizing:border-box;width:100%;resize:vertical;transition:border-color .3s,background .3s}
.page textarea:focus{outline:0;border-color:#0B3B5A;background:#FFFFFF}
.page .chip{font-family:var(--fb);font-size:17px;line-height:1.2;min-height:46px;padding:10px 20px;border-radius:999px;border:0;cursor:pointer;background:transparent;color:#0B3B5A;box-shadow:inset 0 0 0 1.5px #0B3B5A;transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease)}
.page .chip:hover{background:rgba(182,209,217,.45)}
.page .chip.aan{background:#0B3B5A;color:#FFFFFF}
.page .chip:active{transform:scale(.97)}
@keyframes rijs{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.page .dank{animation:rijs .8s var(--ease) both}
.page a:focus-visible,.page button:focus-visible{outline:2px solid #9E4F33;outline-offset:3px}
.page ul.punten li{position:relative;padding-left:24px}
.page ul.punten li::before{content:"";position:absolute;left:0;top:.8em;width:12px;height:1.5px;background:#9E4F33}
.page strong{font-weight:600}
.page a:focus-visible{outline:2px solid #9E4F33;outline-offset:3px}
.page .nav a,.page .zij a{text-decoration:none}
.page .btn{display:inline-flex;align-items:center;gap:12px;background:#9E4F33;color:#FFFFFF;text-decoration:none;font-family:var(--fb);font-weight:600;border:0;border-radius:999px;cursor:pointer;transition:background .35s var(--ease),color .35s var(--ease)}
body{margin:0}
.page{--fd:'Jost',sans-serif;--fdw:400;--fdls:-0.01em;--fds:1;--fb:'Mulish','Mulish Fallback',sans-serif;--fbw:600;--ease:cubic-bezier(.16,1,.3,1)}
.page.tB{--fd:'Newsreader',serif;--fdw:400;--fdls:-0.015em;--fds:1.04;--fb:'Figtree',sans-serif}
.page.tC{--fd:'Manrope',sans-serif;--fdw:600;--fdls:-0.03em;--fds:0.92;--fb:'Manrope',sans-serif}
.page.tD{--fd:'Cormorant Garamond','Cormorant Fallback',serif;--fdw:500;--fdls:-0.01em;--fds:1.16;--fb:'Mulish','Mulish Fallback',sans-serif}
.page{font-family:var(--fb);color:#14242F;background:#FAF7F2;font-size:18px;line-height:1.65;overflow-x:clip}
.page h1,.page h2,.page h3,.page .fd{font-family:var(--fd);font-weight:var(--fdw);letter-spacing:var(--fdls);color:#0B3B5A;margin:0;text-wrap:balance}
.page h1{font-size:calc(clamp(40px,5.3vw,70px)*var(--fds));line-height:1.04}
.page h2{font-size:calc(clamp(32px,3.8vw,52px)*var(--fds));line-height:1.1}
.page h3{font-size:calc(clamp(24px,2.3vw,31px)*var(--fds));line-height:1.18}
.page p{margin:0;text-wrap:pretty}
.page strong,.page label,.page .fbw{font-weight:var(--fbw)}
.page a{color:#9E4F33;text-underline-offset:5px}
.page a:hover{color:#7C3B25}
.page a:focus-visible,.page button:focus-visible,.page input:focus-visible,.page textarea:focus-visible{outline:2px solid #9E4F33;outline-offset:3px}
.page .nav a{color:#0B3B5A;text-decoration:none}
.page .nav a:hover{color:#9E4F33}
.page .btn{display:inline-flex;align-items:center;gap:12px;background:#9E4F33;color:#FFFFFF;text-decoration:none;font-family:var(--fb);font-weight:var(--fbw);border:0;border-radius:999px;cursor:pointer;transition:background .35s var(--ease),transform .35s var(--ease)}
.page .btn:hover{background:#0B3B5A;color:#FFFFFF}
.page .btn.licht{background:#FAF7F2;color:#0B3B5A}
.page .btn.licht:hover{background:#B6D1D9;color:#0B3B5A}
.page .btn.rand{background:#FFFFFF;color:#0B3B5A;box-shadow:inset 0 0 0 1.5px #0B3B5A}
.page .btn.rand:hover{background:#0B3B5A;color:#FFFFFF}
.page .tk{width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:#FFFFFF;font-family:'Mulish','Mulish Fallback',sans-serif;font-weight:600;font-size:15px;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease)}
.page .tk:hover{background:rgba(255,255,255,.18)}
.page .tk.aan{background:#FAF7F2;color:#0B3B5A}
.page .concept{display:inline-flex;align-items:center;align-self:flex-start;height:26px;padding:0 11px;border:1px dashed #9E4F33;border-radius:999px;background:#FFFCF8;font-family:'Mulish','Mulish Fallback',sans-serif;font-size:12px;font-weight:600;letter-spacing:.06em;line-height:1;color:#9E4F33;white-space:nowrap}
.page .concept.donker{background:transparent;border-color:#B6D1D9;color:#FFFFFF}
.page .sec{max-width:1240px;margin:0 auto;padding:88px 32px 104px;display:flex;flex-direction:column;gap:44px}
.page .kop{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.page .duo{display:flex;flex-wrap:wrap;gap:24px 72px}
.page .duo>*{flex:1 1 320px;min-width:0}
.page .kol{display:flex;flex-wrap:wrap;gap:40px 56px;margin:0;padding:0;list-style:none}
.page .kol>*{flex:1 1 230px;min-width:0;display:flex;flex-direction:column;gap:12px}
.page .tegel{flex:1 1 420px;min-width:0;border-radius:28px;padding:clamp(28px,3.6vw,48px);box-sizing:border-box;display:flex;flex-direction:column;gap:20px}
.page .stap{font-family:var(--fd);font-size:60px;line-height:1;color:#9E4F33}
.page .groot{font-family:var(--fd);font-size:clamp(26px,3vw,40px);line-height:1.2;color:#0B3B5A;max-width:22em}
.page ul.streep{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.page ul.streep li{padding:14px 0;border-top:1px solid rgba(11,59,90,.22)}
.page .vragen{max-width:52em;border-bottom:1px solid rgba(11,59,90,.3)}
.page details{border-top:1px solid rgba(11,59,90,.3)}
.page summary{cursor:pointer;list-style:none;padding:20px 44px 20px 0;position:relative;font-family:var(--fd);font-size:clamp(21px,2vw,26px);line-height:1.25;color:#0B3B5A}
.page summary::-webkit-details-marker{display:none}
.page summary::after{content:"+";position:absolute;right:4px;top:15px;font-family:var(--fb);font-size:30px;line-height:1;color:#9E4F33;transition:transform .3s}
.page details[open] summary::after{transform:rotate(45deg)}
.page summary:focus-visible{outline:2px solid #9E4F33;outline-offset:3px}
.page details p{padding:0 0 22px;max-width:40em}
.page .btn:active{transform:scale(.98)}
.page .btn svg,.page .tile svg,.page .more svg{transition:transform .45s var(--ease)}
.page .btn:hover svg,.page .tile:hover svg,.page .more:hover svg{transform:translateX(6px)}
.page .more{display:inline-flex;align-items:center;gap:10px}
.page .tile{display:flex;flex-direction:column;text-decoration:none;border-radius:28px;position:relative;overflow:hidden;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.page .tile:hover{transform:translateY(-8px);box-shadow:0 28px 50px -28px rgba(11,59,90,.45)}
.page .tile.t-navy,.page .tile.t-navy h3{color:#FFFFFF}
.page .tile.t-navy p{color:#B6D1D9}
.page .tile.t-light,.page .tile.t-light:hover{color:#14242F}
.page .dark h2{color:#FFFFFF}
.page .dark a{color:#FFFFFF}
.page .dark a:hover{color:#B6D1D9}
.page input,.page textarea{font-family:var(--fb);font-size:17px;color:#14242F;transition:border-color .3s,box-shadow .3s}
.page input:focus,.page textarea:focus{border-color:#0B3B5A;box-shadow:0 0 0 4px rgba(182,209,217,.6);outline:0}
.page .veld{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none}
@keyframes drijfA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-70px,50px) scale(1.12)}}
@keyframes drijfB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(80px,-40px) scale(1.18)}}
@keyframes wieg{0%,100%{transform:rotate(-2.2deg)}50%{transform:rotate(2.2deg)}}
@keyframes band{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes rijs{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes teken{from{stroke-dashoffset:4000}to{stroke-dashoffset:0}}
.page .veld.a{animation:drijfA 19s ease-in-out infinite}
.page .veld.b{animation:drijfB 23s ease-in-out infinite}
.page .wieg{transform-origin:50% 100%;animation:wieg 9s ease-in-out infinite}
.page .band{animation:band 46s linear infinite}
.page .rijs{animation:rijs 1.1s var(--ease) both}
.page .rijs.r2{animation-delay:.12s}.page .rijs.r3{animation-delay:.24s}.page .rijs.r4{animation-delay:.4s}
.page .lijn{stroke-dasharray:4000;animation:teken 5s ease-out both .3s}
@keyframes drijfHa{0%,100%{transform:translate(0,0)}50%{transform:translate(-18px,14px)}}
@keyframes drijfHb{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-12px)}}
@keyframes wiegH{0%,100%{transform:rotate(-0.6deg)}50%{transform:rotate(0.6deg)}}
.page .hero .veld.a{animation:drijfHa 44s ease-in-out infinite}
.page .hero .veld.b{animation:drijfHb 52s ease-in-out infinite}
.page .hero .wieg{animation:wiegH 16s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.page .hero .veld.a,.page .hero .veld.b,.page .hero .wieg,.page .veld,.page .wieg,.page .band,.page .rijs,.page .lijn{animation:none}.page .tile,.page .btn,.page svg{transition:none}}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500 600;font-display:swap;src:url(assets/fonts/cormorant-garamond-latin.woff2) format('woff2')}
@font-face{font-family:'Mulish';font-style:normal;font-weight:400 600;font-display:swap;src:url(assets/fonts/mulish-latin.woff2) format('woff2')}
@font-face{font-family:'Cormorant Fallback';src:local('Georgia'),local('Noto Serif'),local('Times New Roman');size-adjust:88.7%;ascent-override:104.2%;descent-override:32.4%;line-gap-override:0%}
@font-face{font-family:'Mulish Fallback';src:local('Arial'),local('Helvetica'),local('Roboto');size-adjust:103.8%;ascent-override:96.8%;descent-override:24.1%;line-gap-override:0%}

/* ---- site: aanvullingen op het ontwerp ---- */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#FAF7F2}
[hidden]{display:none!important}
img{max-width:100%}
.overslaan{position:absolute;left:-999px;top:0;background:#0B3B5A;color:#FFFFFF;padding:12px 18px;z-index:50;font-family:'Mulish','Mulish Fallback',sans-serif}
.overslaan:focus{left:0}
.page{overflow-x:clip}
.page a{color:#0B3B5A}
.page a:hover{color:#7C3B25}
.page .btn,.page .btn:hover{color:#FFFFFF}
.page .btn.licht,.page .btn.licht:hover,.page .btn.rand{color:#0B3B5A}
.page .btn.rand:hover{color:#FFFFFF}
.page .dark a{color:#FFFFFF}
.page .dark a:hover{color:#B6D1D9}
.page.juridisch h2{font-size:calc(clamp(24px,2.4vw,32px)*var(--fds));line-height:1.2}
.page.juridisch article ul{display:flex;flex-direction:column;gap:8px}
.page.juridisch ol.leden{display:flex;flex-direction:column;gap:10px;list-style:decimal;padding-left:1.5em}
.page.juridisch ol.leden>li::marker{color:#9E4F33;font-weight:600}
.page.juridisch ul.punten{gap:6px}
.page.geen-labels .concept{display:none}
@keyframes wieg{0%,100%{transform:rotate(-0.8deg)}50%{transform:rotate(0.8deg)}}
.page .veld.a{animation:drijfHa 44s ease-in-out infinite}
.page .veld.b{animation:drijfHb 52s ease-in-out infinite}
.page .wieg{animation:wieg 16s ease-in-out infinite}
/* blokken links en rechts */
.page .blok{width:min(100%,800px);box-sizing:border-box;padding:clamp(30px,4.4vw,60px);display:flex;flex-direction:column;gap:18px;align-items:flex-start;background:#FAF7F2;border-radius:28px 140px 28px 28px;box-shadow:0 30px 60px -44px rgba(11,59,90,.45)}
.page .blok.rechts{align-self:flex-end;border-radius:140px 28px 28px 28px;background:linear-gradient(150deg,#B6D1D9 0%,#D5E4E8 100%)}
.page .blok.donker{background:linear-gradient(170deg,#0B3B5A 0%,#072A41 100%);color:#FFFFFF}
.page .blok.donker h2{color:#FFFFFF}
.page .blok:not(.rechts) h2{padding-right:clamp(0px,3vw,36px)}
/* kaarten naast elkaar */
.page .kaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:22px;margin:0;padding:0;list-style:none}
.page .kaart{background:#FAF7F2;border-radius:28px;padding:clamp(28px,3vw,40px);box-sizing:border-box;display:flex;flex-direction:column;gap:14px}
.page .kaart h3{overflow-wrap:break-word;hyphens:auto}
.page .kaart::before{content:"";width:44px;height:2px;background:#9E4F33;margin-bottom:6px}
.page .kaart.zand{background:#F5E3D6}
.page .kaart .vb{margin-top:auto;padding-top:14px;border-top:1px solid rgba(11,59,90,.18);font-size:16px;line-height:1.55;color:#0B3B5A}
/* klantlogo's */
.page .klanten{display:flex;flex-direction:column;gap:26px}
.page .logos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
.page .logos li{background:#FAF7F2;border-radius:20px;height:112px;padding:14px 18px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--fd);font-weight:var(--fdw);font-size:calc(17px*var(--fds));line-height:1.1;color:#0B3B5A}
.page .logos img{max-width:100%;width:auto;height:auto;object-fit:contain;flex:0 1 auto;min-width:0}
@media (max-width:1000px){.page .logos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.page .logos{grid-template-columns:repeat(2,minmax(0,1fr))}.page .logos li{height:96px}}
/* verschijnen bij het scrollen (alleen met JavaScript) */
.js .page .toon{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .page .toon.van-links{transform:translateX(-56px)}
.js .page .toon.van-rechts{transform:translateX(56px)}
.js .page .toon.d1{transition-delay:.12s}
.js .page .toon.d2{transition-delay:.24s}
.js .page .toon.zichtbaar{opacity:1;transform:none}
/* kop en menu */
.page .kop-site{position:relative;z-index:5;max-width:1240px;margin:0 auto;padding:22px 32px;box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px}
.page .kop-site .logo{display:flex;align-items:center;min-height:44px}
.page .kop-site .logo img{height:50px;width:auto;display:block}
.page .kop-site nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px 26px;font-size:16px}
.page .kop-site nav a{padding:10px 0}
.page .kop-site nav a.btn{padding:12px 22px}
.page .kop-site nav a[aria-current="page"]:not(.btn){text-decoration:underline;text-decoration-thickness:1.5px}
.page .menuknop{display:none;font-family:var(--fb);font-weight:600;font-size:16px;min-height:46px;padding:10px 20px;border-radius:999px;border:0;background:transparent;color:#0B3B5A;box-shadow:inset 0 0 0 1.5px #0B3B5A;cursor:pointer}
@media (max-width:1180px){
.page .menuknop{display:inline-flex;align-items:center}
.page .kop-site nav{display:none;flex:1 1 100%;flex-direction:column;align-items:flex-start;gap:0;font-size:19px;padding:8px 0 16px}
.page .kop-site.open nav{display:flex}
.page .kop-site nav a{padding:12px 0;width:100%;border-top:1px solid rgba(11,59,90,.2)}
.page .kop-site nav a.btn{width:auto;margin-top:14px;border-top:0}
}
/* conceptbalk */
.conceptbalk{position:sticky;top:0;z-index:30;background:#0B3B5A;color:#FFFFFF;font-family:'Mulish','Mulish Fallback',sans-serif;font-size:14px;line-height:1.35}
.conceptbalk .in{max-width:1240px;margin:0 auto;padding:8px 32px;box-sizing:border-box}
.conceptbalk p{margin:0;color:#B6D1D9}
.conceptbalk strong{color:#FFFFFF;font-weight:600;margin-right:6px}
@media (max-width:760px){.conceptbalk .in{padding:6px 20px}}
/* cookiebanner */
.cookiebanner{position:fixed;left:16px;right:16px;bottom:16px;z-index:40;max-width:1176px;margin:0 auto;background:#FFFFFF;border:1px solid #E6DCD2;border-radius:22px;padding:16px 20px 16px 26px;box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px;box-shadow:0 24px 50px -24px rgba(11,59,90,.55);font-family:'Mulish','Mulish Fallback',sans-serif;font-size:16px;line-height:1.5;color:#14242F}
.cookiebanner p{margin:0;flex:1 1 380px;min-width:0}
.cookiebanner a{color:#0B3B5A;text-underline-offset:4px}
.cookiebanner .knoppen{display:flex;flex-wrap:wrap;gap:10px}
.cookiebanner .btn{display:inline-flex;align-items:center;font-family:'Mulish','Mulish Fallback',sans-serif;font-weight:600;font-size:16px;min-height:46px;padding:12px 20px;border:0;border-radius:999px;cursor:pointer;background:#9E4F33;color:#FFFFFF;transition:background .3s,color .3s}
.cookiebanner .btn:hover{background:#0B3B5A}
.cookiebanner .btn.rand{background:#FFFFFF;color:#0B3B5A;box-shadow:inset 0 0 0 1.5px #0B3B5A}
.cookiebanner .btn.rand:hover{background:#0B3B5A;color:#FFFFFF}
.cookiebanner .btn:focus-visible{outline:2px solid #9E4F33;outline-offset:3px}
/* formulier */
.page .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.page .btn[disabled]{opacity:.6;cursor:progress}
.page .regel input[aria-invalid="true"]{border-bottom-color:#8A2E1C;background:rgba(138,46,28,.07)}
/* kleine schermen */
@media (max-width:760px){
.page{font-size:17px}
.page .sec{padding:60px 20px 68px;gap:32px}
.page [style*="margin-top: 36px"],.page [style*="margin-top: 56px"],.page [style*="margin-top: 72px"]{margin-top:0!important}
.page [style*="padding-right: 110px"]{padding-right:70px!important}
.page .kop-site{padding:16px 20px}
}
@media (max-width:760px){
.page .blok{border-radius:24px 84px 24px 24px}
.page .blok.rechts{border-radius:84px 24px 24px 24px}
.js .page .toon.van-links,.js .page .toon.van-rechts{transform:translateY(34px)}
}
@media print{.js .page .toon{opacity:1!important;transform:none!important}}
@media (prefers-reduced-motion:reduce){
.js .page .toon{opacity:1!important;transform:none!important}
html{scroll-behavior:auto}
.page *,.page *::before,.page *::after{animation:none!important;transition:none!important}
}