/* contact: enkel wat specifiek is voor deze pagina. Laadt na site.css. */
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;padding:0}
.skip{position:fixed;left:var(--gutter);top:12px;z-index:100;background:var(--white);color:var(--night)!important;padding:12px 18px;border-radius:var(--radius);font:500 14px/1 var(--font-body);transform:translateY(-200%)}
.ph-block{border:1px dashed currentColor;border-radius:var(--radius);padding:16px 18px;font-size:var(--small);line-height:1.5}
.logo{display:block;text-decoration:none;padding:6px 0}
.hd .logo{display:flex;align-items:center;min-height:44px}
.hl{position:relative;pointer-events:none}
.page-hero{padding:calc(var(--hh) + 32px) 0 36px}
.page-hero h1{font:200 clamp(38px,5.4vw,82px)/1.04 var(--font-head);letter-spacing:0;color:var(--white);max-width:20ch;text-wrap:balance}
.page-hero .h1-label{margin-bottom:16px}
.page-hero .hero-sub{margin:18px 0 0;max-width:60ch;font-size:17px}
.page-hero .actions{margin-top:28px}
@media (min-width:1024px){
.page-hero{padding-top:calc(var(--hh) + 40px)}
}
.tag{display:inline-flex;align-items:center;justify-content:center;min-width:62px;height:30px;padding:0 12px;border:1px solid var(--ink);border-radius:var(--radius);font:500 13px/1 var(--font-body);letter-spacing:.02em;flex:none}
.tag.jens{background:var(--ink);color:var(--paper)}
.dark .tag{border-color:var(--white);color:var(--white)}
.dark .tag.jens{background:var(--white);color:var(--night)}
.tag.keur{background:transparent;border-style:dashed;border-color:currentColor}
.kr-panel{position:relative;margin-top:56px;padding:44px 24px 36px;border-radius:var(--radius);overflow:hidden}
.kr-panel>.hl .gl{height:140px;background:radial-gradient(ellipse 60% 100% at 30% 0%,rgba(244,217,168,.2),rgba(244,217,168,.07) 45%,rgba(244,217,168,0) 75%)}
.kr{position:relative;display:grid;gap:40px}
.kr-dot{position:absolute;left:0;top:4px;z-index:1;width:11px;height:11px;border-radius:50%;border:1.5px solid var(--light);background:var(--light)}
.kr-seg{position:absolute;left:5px;top:15px;width:1px;height:calc(100% + 29px);overflow:visible}
@media (min-width:1024px){
.kr-panel{padding:64px 48px 52px}
.kr{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.kr-dot{top:0}
.kr-seg{left:11px;top:5px;width:calc(100% + 48px - 11px);height:1px}
}
.panels{display:grid;gap:56px;margin-top:64px}
.panel{position:relative;padding-top:40px}
.pl-line line{stroke:var(--ink);stroke-width:1}
.dark .pl-line line{stroke:var(--white)}
.js .pl-line line{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 900ms var(--ease)}
.js .pl-line.is-drawn line{stroke-dashoffset:0}
@media (min-width:768px){
.panels{grid-template-columns:1fr 1fr;gap:0}
}
.fl-pts{display:grid;gap:8px;font-size:15px;line-height:1.45;color:var(--muted)}
.bs-grid{display:grid;gap:12px}
.bs-row{display:flex;flex-direction:column;gap:12px;padding:24px;border:1px solid var(--line-dark);border-radius:var(--radius)}
.bs-small{margin-top:24px;font-size:var(--small);color:var(--muted);max-width:66ch}
@media (min-width:1024px){
.bs-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.bs-row{padding:28px}
}
.compact{padding:calc(var(--section)*.75) 0}
.pm{position:relative;flex:none;width:16px;height:16px}
.faq.dark .qa,.faq.dark .qa details{border-color:var(--line-dark)}
.faq.dark .pm::before,.faq.dark .pm::after{background:var(--white)}
.faq.dark .ans{color:var(--muted)}
.closer{position:relative;overflow:hidden;text-align:center;padding:calc(var(--section) + 40px) 0}
.has-hl{position:relative}
.has-hl > .hl .gl{height:110px;background:radial-gradient(ellipse 55% 100% at 50% 0%,rgba(244,217,168,.19),rgba(244,217,168,.08) 45%,rgba(244,217,168,0) 75%)}
.closer .actions{margin-top:44px;justify-content:center;align-items:stretch}
@media (min-width:600px){
.closer .actions{align-items:center}
}
.ft{border-top:1px solid var(--line-dark);padding:72px 0 40px;font-size:14px}
@media (min-width:1024px){
.ft{padding-top:96px}
}
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:45;height:calc(64px + env(safe-area-inset-bottom));padding:8px var(--gutter) calc(8px + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1fr;gap:8px;background:var(--night);border-top:1px solid var(--line-dark);transition:transform 300ms var(--ease),visibility 0s}
@media (min-width:1024px){
.mbar{display:none}
}
.sw-l{font:500 14px/1.35 var(--font-body);color:var(--stone);cursor:pointer;-webkit-user-select:none;user-select:none}
.sw-l.on{color:var(--ink)}
.sw-l{position:relative;transition:color 400ms var(--ease)}
.sw{position:relative;background:none;border:0;padding:0;cursor:pointer;color:var(--ink);border-radius:var(--radius);-webkit-tap-highlight-color:transparent}
.rich{background-color:var(--paper);background-image:linear-gradient(rgba(11,13,16,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(11,13,16,.035) 1px,transparent 1px);background-size:64px 64px;background-position:-1px -1px}
.rich .label{color:var(--stone)}
@media (min-width:1024px){
.sw-l{font-size:15px}
}
.sec-head{max-width:780px}
.light + .light{border-top:var(--hair) solid var(--line-light)}
.dark + .dark{border-top:var(--hair) solid var(--line-dark)}
.tag.nn{border-style:dashed;border-color:var(--stone);color:var(--stone);background:transparent}
.after{margin-top:40px;display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.bord-foto{margin:20px 0 0;max-width:220px;border-radius:var(--radius);overflow:hidden}
.sw-row{display:none}
.js .sw-row{display:grid}
.vd-sum{display:none;margin-top:20px;color:var(--ink);min-height:1.6em}
.js .vd-sum{display:block}
.vd-top{display:grid;gap:40px}
@media (min-width:1024px){
.vd-top{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:end}
}
@media (max-width:1023.98px){
.vd-top{display:contents}
.sw-bar{display:block;margin-top:32px}
.js .sw-bar{position:sticky;top:var(--hh);z-index:5;margin:0 calc(-1*var(--gutter));padding:14px var(--gutter) 12px;background:var(--paper);border-bottom:1px solid var(--line-light)}
.js .vd-sum{margin-top:10px;font-size:14px;text-align:center}
}
.sp-h{display:flex;align-items:center;gap:14px;padding-bottom:20px;border-bottom:1px solid var(--ink)}
.sp-ht{display:grid;font:400 var(--label)/1.5 var(--font-head);letter-spacing:.32em;text-transform:uppercase;color:var(--stone)}
.sp-note{margin-top:16px;font-size:15px;line-height:1.55;color:var(--ink);max-width:46ch}
.num{font:200 30px/1 var(--font-head);color:var(--stone)}
.sp-keur{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:40px;padding:20px 24px;border:1px dashed var(--stone);border-radius:var(--radius);font-size:15px;color:var(--stone)}
.sp-keur .num{font-size:26px}
@media (min-width:1024px){
.sp-jij{padding-right:56px;align-self:start;position:static;top:calc(var(--hh) + 120px)}
.sp-jens{padding-left:56px;border-left:1px solid var(--line-light)}
}
html:not(.js) .own .ot,html:not(.js) .sp-ht .ot{display:none}
.kr-wrap{margin-top:64px}
.kq{display:grid;margin-top:72px;border-top:1px solid var(--line-dark)}
.kq-open{margin-top:24px;font-size:var(--small);color:var(--muted);max-width:80ch}
@media (min-width:1024px){
.kq{grid-template-columns:1fr 1fr;column-gap:64px;border-top:0}
}
.cmp{margin-top:56px;border-top:1px solid var(--line-dark)}
.cmp-r{display:grid;gap:8px;padding:20px 0;border-bottom:1px solid var(--line-dark)}
.cmp-r>*{font-size:15px;line-height:1.5}
.cmp-k{font:400 var(--label)/1.5 var(--font-head);letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}
.cmp-hd{display:none}
.cmp .tag{margin-right:8px}
.tip{position:relative;margin-top:40px;padding:4px 0 4px 24px;max-width:62ch}
.tip .link{margin-top:8px}
@media (min-width:768px){
.cmp-r{grid-template-columns:minmax(0,3fr) minmax(0,4.5fr) minmax(0,4.5fr);gap:32px;align-items:baseline}
.cmp-hd{display:grid;border-bottom:0;padding:0 0 16px}
}
.wy{display:grid;gap:40px;margin-top:56px}
@media (min-width:768px){
.wy{grid-template-columns:1fr 1fr;gap:48px 40px}
}
@media (min-width:1024px){
.wy{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.faq.light .pm::before,.faq.light .pm::after{background:var(--ink)}
.of{display:grid;gap:56px}
@media (min-width:1024px){
.of{grid-template-columns:minmax(0,4.5fr) minmax(0,7.5fr);gap:80px}
.of-side{position:static;top:calc(var(--hh) + 48px);align-self:start}
}
@media (min-width:1024px) and (min-height:880px){
.of-side,.sp-jij{position:sticky}
}
.dl{margin-top:44px;border-top:1px solid var(--line-light)}
.dl li{display:grid;gap:4px;padding:20px 0;border-bottom:1px solid var(--line-light)}
.dl .k{font:400 var(--label)/1.5 var(--font-head);letter-spacing:.32em;text-transform:uppercase;color:var(--stone)}
.dl .v{font:300 clamp(22px,2vw,28px)/1.25 var(--font-head);text-decoration:none}
.dl a.v{display:inline-flex;align-items:center;gap:10px;min-height:44px;width:fit-content;--bar:var(--ink)}
.dl a.v .bars{width:12px}
.dl a.v>span:last-child{display:block}
@media (hover:hover){
.dl a.v:hover .bars i{transform:scaleX(1);opacity:1}
}
.dl a.v:focus-visible .bars i{transform:scaleX(1);opacity:1}
.of-note{margin-top:24px;font-size:var(--small);color:var(--stone);max-width:44ch}
.fm{position:relative;background:var(--white);border:1px solid rgba(11,13,16,.2);border-radius:var(--radius);padding:36px 22px 32px;box-shadow:0 30px 60px -44px rgba(11,13,16,.5)}
@media (min-width:1024px){
.fm{padding:52px 48px 48px}
}
.fm fieldset{border:0;margin:0;padding:0;min-width:0}
.fm-s{display:grid;gap:28px;padding:40px 0;border-top:1px solid var(--line-light)}
.fm-s:first-of-type{padding-top:0;border-top:0}
.fm-s>legend{display:flex;align-items:baseline;gap:16px;padding:0;margin-bottom:28px;font:400 var(--h3)/1.25 var(--font-head);float:left;width:100%}
.fm-s>legend+*{clear:both}
.fm-s>legend .num{font-size:26px}
.f{display:grid;gap:10px;min-width:0}
.f>label,.f>.fl{font:500 14px/1.4 var(--font-body);color:var(--ink)}
.f .opt{font-weight:400;color:var(--stone)}
.in{width:100%;min-height:52px;padding:14px 16px;border:1px solid rgba(11,13,16,.28);border-radius:var(--radius);background:var(--paper);font:400 16px/1.4 var(--font-body);color:var(--ink);transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease),background-color var(--fast) var(--ease);-webkit-appearance:none;appearance:none}
.in::placeholder{color:#8A9098}
@media (hover:hover){
.in:hover{border-color:rgba(11,13,16,.5)}
}
.in:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);background:var(--white)}
textarea.in{min-height:168px;resize:vertical;line-height:1.55}
.two{display:grid;gap:24px}
@media (min-width:600px){
.two{grid-template-columns:1fr 1fr}
}
.ck{display:grid;grid-template-columns:24px minmax(0,1fr);gap:14px;align-items:start;align-content:center;min-height:44px;font-size:14px;line-height:1.55;color:var(--stone);cursor:pointer}
.ck input{-webkit-appearance:none;appearance:none;width:24px;height:24px;margin:0;border:1px solid rgba(11,13,16,.4);border-radius:var(--radius);background:var(--white) center/12px no-repeat;cursor:pointer;transition:background-color var(--fast) var(--ease)}
.ck input:checked{background-color:var(--ink);border-color:var(--ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3.5' fill='none' stroke='%23F4D9A8' stroke-width='1.6'/%3E%3C/svg%3E")}
.ck a{color:var(--ink);text-underline-offset:3px}
.fm-end{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding-top:36px;border-top:1px solid var(--line-light)}
.fm-end .btn{min-width:220px;justify-content:center}
.fm-end p{font-size:var(--small);color:var(--stone)}
.fm-err{display:none;font-size:14px;color:var(--ink);padding:12px 16px;border-left:1.5px solid var(--ink);background:var(--paper)}
.fm-err.on{display:block}
.fm-ok{display:none;position:relative;overflow:hidden;background:var(--ink);color:var(--white);border-radius:var(--radius);padding:56px 28px 52px}
.fm-ok.on{display:block;animation:ans 500ms var(--ease)}
.fm-ok::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--light);box-shadow:0 0 12px rgba(244,217,168,.5)}
.fm-ok::after{content:"";position:absolute;left:0;right:0;top:0;height:160px;background:radial-gradient(ellipse 60% 100% at 30% 0%,rgba(244,217,168,.2),rgba(244,217,168,0) 75%);pointer-events:none}
.fm-ok>*{position:relative;z-index:1}
.fm-ok h3{font:200 clamp(32px,3.6vw,48px)/1.1 var(--font-head);max-width:16ch;margin-top:20px}
.fm-ok p{margin-top:20px;color:var(--muted);max-width:44ch}
.fm-ok .ph{background:rgba(244,217,168,.11)}
.fm-ok .actions{margin-top:32px}
.fm-ok .btn--secondary{color:var(--white);border-color:rgba(255,255,255,.5);background:transparent;--bar:var(--light)}
.fm-ok .tag{border-color:var(--white);color:var(--ink);background:var(--white)}
@media (min-width:1024px){
.fm-ok{padding:72px 56px 64px}
}
.form-wrap.sent .fm{display:none}
.loc{display:grid;gap:48px;align-items:start}
@media (min-width:1024px){
.loc{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:80px}
}
.loc address{font-style:normal;font:300 clamp(24px,2.4vw,34px)/1.3 var(--font-head);margin-top:28px}
.loc .kq{margin-top:48px;grid-template-columns:1fr}
.loc .kq>div{padding:22px 0}
.map{aspect-ratio:4/3;width:100%;min-height:0}
@media (min-width:600px){
.map{min-height:280px}
}
.map .pin{position:absolute;left:50%;top:46%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--light);box-shadow:0 0 0 8px rgba(244,217,168,.12),0 0 40px 10px rgba(244,217,168,.25)}
.fm-s{display:grid;gap:28px;padding:44px 0;border-top:1px solid var(--line-light)}
.fm-s:first-child{padding-top:0;border-top:0}
.fm-h{display:flex;align-items:baseline;gap:16px;font:400 var(--h3)/1.25 var(--font-head)}
.fm-h .num{font-size:26px}
.qa-g+.qa-g{margin-top:56px}
@media (max-height:500px) and (orientation:landscape){
.hero,.page-hero{min-height:0}
.hero h1,.page-hero h1{font-size:clamp(36px,6vw,56px)}
.of-side,.sp-jij,.js .sw-bar{position:static}
}
.qa-g>.label{margin-bottom:12px}
.ws{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity 300ms cubic-bezier(.2,.7,.2,1),visibility 0s 300ms}
.ws-b{position:relative;overflow:hidden;width:min(100%,480px);background:#0E0F11;color:#fff;border:1px solid rgba(255,255,255,.14);border-radius:2px;padding:52px 32px 36px;transform:translateY(14px);transition:transform 450ms cubic-bezier(.2,.7,.2,1);box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.ws-b>*{position:relative;z-index:1}
.ws-l{display:block;font:400 12px/1.5 "Jost","Jost Fallback",system-ui,sans-serif;letter-spacing:.32em;text-transform:uppercase;color:#A1A8B0;margin:0 0 20px}
.ws-h{margin:0;font:200 clamp(30px,5vw,40px)/1.12 "Jost","Jost Fallback",system-ui,sans-serif;color:#fff;text-wrap:balance}
.ws-x{display:inline-flex;align-items:center;gap:12px;min-height:52px;margin-top:36px;padding:0 26px;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5);border-radius:2px;font:500 14px/1 "Inter","Inter Fallback",system-ui,sans-serif;letter-spacing:.02em;cursor:pointer}
/* fout na controle op de server (zelfde stijl als .dd.err) */
.in[aria-invalid="true"],.pk[aria-invalid="true"] span{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
/* keuze bovenaan het formulier: vraag of offerte (gewone radioknoppen, werkt ook zonder JS) */
.sg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:1px solid rgba(11,13,16,.28);border-radius:var(--radius);background:var(--paper)}
.sg label{position:relative;display:block;cursor:pointer}
.sg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.sg span{display:flex;align-items:center;justify-content:center;min-height:44px;padding:6px 12px;border-radius:var(--radius);font:500 14px/1.3 var(--font-body);color:var(--stone);text-align:center;transition:background-color var(--fast) var(--ease),color var(--fast) var(--ease)}
.sg input:checked+span{background:var(--ink);color:var(--paper)}
.sg input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
@media (hover:hover){
.sg input:not(:checked):hover+span{color:var(--ink)}
}
/* adres als link naar de kaart, zelfde stijl als bellen en mailen */
.loc address a.v{display:inline-flex;align-items:center;gap:12px;min-height:44px;color:inherit;text-decoration:none;--bar:var(--light)}
.loc address a.v .bars{width:12px}
@media (hover:hover){
.loc address a.v:hover .bars i{transform:scaleX(1);opacity:1}
}
.loc address a.v:focus-visible .bars i{transform:scaleX(1);opacity:1}
/* offertevelden: keuzeknoppen, verborgen bij een vraag (JavaScript zet de fieldset uit) */
.ofx{display:grid;gap:28px;margin:0;padding:28px 0;border:0;border-top:1px solid var(--line-light);border-bottom:1px solid var(--line-light);min-width:0}
.ofx-l{float:left;width:100%;padding:0;font:400 var(--label)/1.5 var(--font-head);letter-spacing:.32em;text-transform:uppercase;color:var(--stone)}
.ofx-l+*{clear:both}
.js .ofx-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.js .ofx[disabled]{display:none}
.js .ofx:not([disabled]){animation:ans 320ms var(--ease)}
.pk{display:flex;flex-wrap:wrap;gap:8px}
.pk label{position:relative;display:block;cursor:pointer}
.pk input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pk span{display:flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid rgba(11,13,16,.28);border-radius:var(--radius);background:var(--paper);font:400 15px/1.3 var(--font-body);color:var(--ink);transition:background-color var(--fast) var(--ease),color var(--fast) var(--ease),border-color var(--fast) var(--ease)}
.pk input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pk input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
@media (hover:hover){
.pk input:not(:checked):hover+span{border-color:rgba(11,13,16,.5)}
}
@media (prefers-reduced-motion:reduce){
.js .ofx:not([disabled]){animation:none}
}
/* kaart: vaste afbeelding uit OpenStreetMap, Budingen exact in het midden */
.kaart{margin:0}
.kaart-a{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line-dark);border-radius:var(--radius);background:var(--carbon)}
.kaart-a img{width:100%;height:100%;object-fit:cover;transition:filter var(--base) var(--ease)}
.kaart .pin{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--light);box-shadow:0 0 0 8px rgba(244,217,168,.16),0 0 40px 10px rgba(244,217,168,.3)}
@media (hover:hover){.kaart-a:hover img{filter:brightness(1.25)}}
.kaart figcaption{margin-top:10px;font-size:12px;color:var(--muted)}
.kaart figcaption a{color:inherit}
/* samenwerken: licht even op als je via de link op de homepagina binnenkomt (#samenwerken) */
.samen-a{--bar:var(--light);display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:8px;color:var(--white);text-decoration:none;font:400 17px/1.25 var(--font-head)}
.samen-a .bars{width:10px}
@media (hover:hover){.samen-a:hover .bars i{transform:scaleX(1);opacity:1}}
.samen-a:focus-visible .bars i{transform:scaleX(1);opacity:1}
.loc .kq>.samen{border-radius:var(--radius);scroll-margin-top:max(0px,calc(50vh - var(--hh) / 2 - 140px))}
/* bij aankomst via #samenwerken: het blok ongeveer in het midden van het scherm, met Langskomen erboven */
.loc .kq>.samen:target{animation:samen-licht 3200ms var(--ease) 300ms both}
.loc .kq>.samen:target h3{animation:samen-kop 3200ms var(--ease) 300ms both}
@keyframes samen-licht{
0%{background:rgba(244,217,168,0);box-shadow:0 0 0 0 rgba(244,217,168,0),0 0 0 0 rgba(244,217,168,0)}
10%,55%{background:rgba(244,217,168,.07);box-shadow:0 0 0 20px rgba(244,217,168,.07),0 0 80px 24px rgba(244,217,168,.09)}
100%{background:rgba(244,217,168,0);box-shadow:0 0 0 20px rgba(244,217,168,0),0 0 80px 24px rgba(244,217,168,0)}
}
@keyframes samen-kop{0%,100%{color:inherit}10%,55%{color:var(--light)}}
@media (prefers-reduced-motion:reduce){
.loc .kq>.samen:target,.loc .kq>.samen:target h3{animation-timing-function:steps(1,end);animation-duration:2200ms}
.kaart-a img{transition:none}
}