/* Gegenereerd door scripts/build_site.py uit scripts/basis.css, de paginastijl en scripts/site-extra.css. Niet met de hand aanpassen. */
/* HP Decor & Concept, ronde A5: gedeelde stijl, desktop 1440 en mobiel 390 */
:root{
  --wit:#FFFFFF;--zand:#F7F3EE;--poeder:#F6E7E0;--klei:#C7694F;--kleid:#A3503A;
  --antr:#2A2622;--grijs:#6E6660;--tekst2:#4A433E;--lijn:#E8E2DC;--pad:64px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Source Sans 3',sans-serif;color:var(--antr);-webkit-font-smoothing:antialiased;background:var(--wit)}
h1,h2,h3,h4{font-family:'Montserrat',sans-serif;letter-spacing:-0.015em}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.ph{display:block;width:100%;height:100%;object-fit:cover}
.r{border-radius:22px;overflow:hidden}
.nowrap{white-space:nowrap}

/* ritme */
.sec{padding:120px var(--pad)}
.sec.kort{padding-top:84px;padding-bottom:84px}
.zand{background:var(--zand)}
.wit{background:var(--wit)}

/* typografie */
.h2{font-size:42px;line-height:1.12;font-weight:600}
.h2l{font-size:52px;line-height:1.08;font-weight:300}
.h2l strong,.h1 strong{font-weight:700}
.h3{font-size:22px;font-weight:600;line-height:1.3}
.lead{font-size:20px;line-height:1.65;color:var(--tekst2)}
.body p{font-size:18px;line-height:1.75;color:var(--tekst2);max-width:62ch}
.body p+p{margin-top:18px}
.body p.antwoord{font-size:21px;line-height:1.65;color:var(--antr)}
.muted{color:var(--grijs)}
.ilink{color:var(--kleid);border-bottom:1.5px solid #E4B9AA;padding-bottom:1px;font-weight:500}
.cap{font-size:14px;color:var(--grijs);margin-top:10px;line-height:1.45}

/* knoppen */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--klei);color:#fff;padding:17px 32px;border-radius:999px;font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;min-height:50px}
.pill.wit{background:#fff;color:var(--antr)}
.ghost{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1.5px solid var(--antr);color:var(--antr);padding:16px 28px;border-radius:999px;font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;min-height:50px}
.ghost.licht{color:#fff;border-color:rgba(255,255,255,.75)}
.tlink{font-weight:600;font-size:15px;color:var(--kleid);border-bottom:1.5px solid #E4B9AA;padding-bottom:3px}
.knoppen{display:flex;gap:14px;align-items:center;flex-wrap:wrap}

/* navigatie */
.nav{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:28px var(--pad);color:var(--antr)}
.nav .logo{height:40px}
.nav .menu{display:flex;gap:44px;font-size:15px;font-weight:500;align-items:center}
.nav .menu button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.nav .menu .actief{box-shadow:inset 0 -2px 0 currentColor;padding-bottom:6px}
.nav .rechts{display:flex;align-items:center;gap:26px;font-size:15px;font-weight:500}
.nav .rechts .pill{padding:14px 26px;font-size:13px;min-height:0}
.nav .hamb{display:none}
.paneel[hidden]{display:none}
.sticky{display:none}

/* hero met foto */
.hero{position:relative;height:680px;overflow:hidden;color:#fff}
.hero picture,.hero>img{position:absolute;inset:0}
.hero picture>img{width:100%;height:100%;object-fit:cover}
.hero .sluier{position:absolute;inset:0;background:linear-gradient(to right,rgba(28,20,16,.66) 0%,rgba(28,20,16,.42) 42%,rgba(28,20,16,.05) 75%),linear-gradient(to bottom,rgba(28,20,16,.42) 0%,rgba(28,20,16,0) 22%)}
.hero .inhoud{position:absolute;left:var(--pad);bottom:84px;max-width:820px}
.hero h1{font-size:58px;line-height:1.08;font-weight:300}
.hero h1 strong{font-weight:700}
.hero .sub{font-size:20px;line-height:1.6;max-width:50ch;margin:24px 0 34px;opacity:.94}
.hero.laag{height:500px}

/* rustige hero */
.hero-rust{background:var(--zand);padding:200px var(--pad) 72px;position:relative}
.hero-rust h1{font-size:64px;line-height:1.06;font-weight:300;max-width:19ch}
.hero-rust h1 strong{font-weight:700}
.hero-rust .sub{font-size:20px;line-height:1.6;color:var(--tekst2);max-width:54ch;margin-top:24px}
.hero-rust .knoppen{margin-top:34px}

/* gesplitste hero (over Peter) */
.hero-split{display:grid;grid-template-columns:1fr 1fr;min-height:760px;background:var(--zand)}
.hero-split .tekst{padding:200px var(--pad) 90px;display:flex;flex-direction:column;justify-content:center}
.hero-split h1{font-size:68px;line-height:1.04;font-weight:300}
.hero-split h1 strong{font-weight:700}
.hero-split .sub{font-size:21px;line-height:1.6;color:var(--tekst2);margin:24px 0 36px;max-width:36ch}

/* praktisch-strook direct onder de hero */
.strook{display:grid;border-bottom:1px solid var(--lijn);padding:0 var(--pad)}
.strook>div{padding:26px 26px 26px 0;margin-right:26px;border-right:1px solid var(--lijn)}
.strook>div:last-child{border-right:0;margin-right:0}
.strook b{display:block;font-family:Montserrat;font-weight:600;font-size:15px;margin-bottom:5px}
.strook>div>span{display:block;font-size:15.5px;line-height:1.5;color:var(--tekst2)}
.strook>div>span::first-letter{text-transform:uppercase}
.hero-rust+.strook,.strook.zand{background:var(--zand);border-top:1px solid var(--lijn)}

/* twee kolommen: kop en tekst */
.tk{display:grid;grid-template-columns:5fr 7fr;gap:96px;align-items:start}

/* tekst naast een groot beeld */
.naast{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:center}
.naast.smal{grid-template-columns:7fr 5fr}
.naast.breed{grid-template-columns:5fr 7fr}
.naast .beeld{height:640px}

/* lijst met dunne lijnen */
.lijst{border-top:1px solid var(--lijn)}
.lijst .rij{display:grid;grid-template-columns:minmax(220px,2fr) 3fr;gap:40px;padding:26px 0;border-bottom:1px solid var(--lijn);align-items:baseline}
.lijst .rij h3{font-size:20px;font-weight:600;line-height:1.3}
.lijst .rij p{font-size:17px;line-height:1.65;color:var(--tekst2)}
.lijst.een .rij{grid-template-columns:1fr;gap:8px}
.lijst .rij.thumb{grid-template-columns:96px minmax(200px,2fr) 3fr;align-items:center}
.lijst .rij.thumb .t{width:96px;height:96px;border-radius:14px;overflow:hidden}


/* projectblok */
.project{display:grid;grid-template-columns:1.6fr 1fr;gap:28px;align-items:end}
.project .groot{height:720px}
.project .klein{height:380px}

/* volle fotoband */
.band{position:relative;height:620px;overflow:hidden}
.band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band .bandcap{position:absolute;left:var(--pad);bottom:34px;color:#fff;font-size:15px;background:rgba(30,22,18,.45);padding:10px 16px;border-radius:12px}

/* galerij asymmetrisch */
.asym{display:grid;grid-template-columns:1.5fr 1fr 1fr;grid-auto-rows:300px;gap:20px}
.asym figure{position:relative}
.asym figure:first-child{grid-row:span 2}
.asym .f{height:100%;border-radius:20px;overflow:hidden}
.asym figcaption{position:absolute;left:0;right:0;bottom:0;padding:50px 18px 14px;background:linear-gradient(to top,rgba(30,22,18,.6),rgba(30,22,18,0));color:#fff;font-size:14px;border-radius:0 0 20px 20px}

/* faq */
.faq details{border-top:1px solid var(--lijn)}
.faq details:last-child{border-bottom:1px solid var(--lijn)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;font-family:Montserrat;font-weight:600;font-size:19px;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--lijn);position:relative}
.faq summary .pm:before,.faq summary .pm:after{content:"";position:absolute;left:8px;right:8px;top:13px;height:1.5px;background:var(--klei)}
.faq summary .pm:after{transform:rotate(90deg)}
.faq details[open] .pm:after{display:none}
.faq details p{font-size:17px;line-height:1.7;color:var(--tekst2);padding:0 60px 26px 0;max-width:70ch}

/* stappen */
.stappen{display:grid;gap:44px}
.stap{border-top:1px solid var(--lijn);padding-top:26px}
.stap .n{font-family:Montserrat;font-weight:300;font-size:52px;color:var(--klei);line-height:1}
.stap h3{font-size:20px;font-weight:600;margin:20px 0 10px;line-height:1.3}
.stap p{font-size:16.5px;line-height:1.65;color:var(--grijs)}
.vstap{display:grid;grid-template-columns:64px 1fr;gap:20px;padding:24px 0;border-top:1px solid var(--lijn)}
.vstap .n{font-family:Montserrat;font-weight:300;font-size:36px;color:var(--klei);line-height:1}
.vstap h3{font-size:19px;font-weight:600;margin-bottom:6px}
.vstap p{font-size:16.5px;line-height:1.6;color:var(--tekst2)}

/* kleine cta-regel */
.ctaregel{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:30px 0;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.ctaregel p{font-family:Montserrat;font-weight:500;font-size:22px}

/* slotoproep: de enige poederklei */
.slot{background:var(--poeder);padding:130px var(--pad);text-align:center}
.slot h2{font-size:56px;line-height:1.08;font-weight:300;margin:0 auto 22px;max-width:22ch}
.slot p{font-size:19px;line-height:1.65;color:var(--tekst2);max-width:48ch;margin:0 auto 40px}
.slot .knoppen{justify-content:center}
.slot-foto{background:var(--poeder);display:grid;grid-template-columns:620px 1fr;min-height:600px}
.slot-foto .t{padding:100px 110px 100px 100px;display:flex;flex-direction:column;justify-content:center}
.slot-foto h2{font-size:56px;line-height:1.06;font-weight:300;margin-bottom:24px}

/* ankerstrook */
.ankers{display:flex;gap:12px;padding:22px var(--pad);border-bottom:1px solid var(--lijn);background:#fff;flex-wrap:wrap}
.ankers a{padding:10px 20px;border:1px solid var(--lijn);border-radius:999px;font-weight:600;font-size:15px}

/* formulier */
.veld{margin-bottom:22px}
.veld label{display:block;font-weight:600;font-size:15px;margin-bottom:8px}
.veld label i{font-style:normal;color:var(--klei)}
.veld .in{height:56px;border:1px solid #D9D1C9;border-radius:14px;background:#fff}
.veld .in.groot{height:150px}
.veld .hulp{font-size:14px;color:var(--grijs);margin-top:7px}

/* juridisch */
.jur{max-width:780px}
.jur h2{font-size:26px;font-weight:600;margin:52px 0 14px}
.jur h2:first-child{margin-top:0}
.jur p{font-size:18px;line-height:1.75;color:var(--tekst2)}

/* footer */
.foot{background:var(--antr);color:#F3EFEA;padding:84px var(--pad) 36px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px}
.foot .fkop{font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:16px;opacity:.6;font-weight:600}
.foot li{list-style:none;line-height:2;font-size:15px;opacity:.85}
.foot p{font-size:15px;line-height:1.8;opacity:.8}
.fonder{display:flex;justify-content:space-between;margin-top:64px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);font-size:13px;opacity:.6}

/* ---------- mobiel ---------- */
@media (max-width:960px){
  :root{--pad:20px}
  .sec{padding:72px var(--pad)}
  .sec.kort{padding-top:52px;padding-bottom:52px}
  .h2{font-size:30px}.h2l{font-size:36px}
  .lead{font-size:18px}
  .body p{font-size:17px}.body p.antwoord{font-size:18.5px}
  .nav{padding:18px var(--pad)}
  .nav .logo{height:30px}
  .nav .menu,.nav .rechts{display:none}
  .nav .hamb{display:block}
  .hero{height:auto;min-height:640px}
  .hero .inhoud{left:var(--pad);right:var(--pad);bottom:40px}
  .hero h1{font-size:36px}
  .hero .sub{font-size:17px;margin:16px 0 24px}
  .hero .sluier{background:linear-gradient(to top,rgba(28,20,16,.78) 0%,rgba(28,20,16,.35) 55%,rgba(28,20,16,.3) 100%)}
  .knoppen{flex-direction:column;align-items:stretch}
  .knoppen>a{width:100%}
  .hero-rust{padding:120px var(--pad) 44px}
  .hero-rust h1{font-size:38px}
  .strook{grid-template-columns:1fr 1fr !important;gap:0}
  .strook>div{padding:16px 12px 16px 0;margin:0;border-right:0;border-bottom:1px solid var(--lijn)}
  .strook>div:nth-child(odd){padding-right:14px}
  .strook b{font-size:13.5px}.strook>div>span{font-size:14px}
  .tk,.naast,.naast.smal,.naast.breed,.project{grid-template-columns:1fr;gap:28px}
  .naast .beeld{height:420px}
  .naast .eerst-m{order:-1}
  .project .groot{height:440px}.project .klein{height:260px}
  .lijst .rij,.lijst .rij.thumb{grid-template-columns:1fr;gap:6px}
  .asym{grid-template-columns:1fr 1fr;grid-auto-rows:200px;gap:12px}
  .asym figure:first-child{grid-column:span 2;grid-row:span 1;height:auto}
  .faq summary{font-size:17px}
  .faq details p{padding-right:0}
  .stappen{grid-template-columns:1fr !important;gap:0}
  .stap{padding:20px 0}
  .stap .n{font-size:34px}
  .stap h3{margin:10px 0 6px}
  .band{height:380px}
  .slot{padding:80px var(--pad) 110px}
  .slot h2{font-size:36px}
  .slot-foto{grid-template-columns:1fr}
  .slot-foto>div:first-child{height:320px}
  .slot-foto .t{padding:56px var(--pad) 110px}
  .slot-foto h2{font-size:36px}
  .ctaregel{flex-direction:column;align-items:stretch}
  .foot{padding:60px var(--pad) 110px}
  .fgrid{grid-template-columns:1fr 1fr;gap:32px}
  .fgrid>div:first-child{grid-column:span 2}
  .fonder{flex-direction:column;gap:8px}
  .sticky{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:20;padding:12px 14px 20px;background:#fff;border-top:1px solid var(--lijn)}
  .sticky a{display:flex;align-items:center;justify-content:center;height:50px;border-radius:999px;font-weight:600;font-size:14px;letter-spacing:.05em;text-transform:uppercase}
  .m-verberg{display:none !important}
}
.m-toon{display:none}
@media (max-width:960px){
  .m-toon{display:inline-block}
  .asym.zes{grid-template-columns:1fr 1fr !important}
  .asym.zes figure{grid-column:auto !important;grid-row:auto !important}
  .asym.zes figure.a0{grid-column:span 2 !important}
}
@media (max-width:960px){
  .naast figure .r,.project figure .r,.tk figure .r,.pg figure .r{height:400px !important}
  .project figure:last-child .r{height:260px !important}
  .galhead{flex-direction:column;align-items:flex-start !important;gap:14px !important}
  .asym.zes figure.a5{grid-column:span 2 !important}
  .merkrij{font-size:30px !important;margin-bottom:36px !important}
  .hero-split .tekst{padding:120px var(--pad) 40px}
  .hero-split h1{font-size:40px !important}
}

/* ---------- per pagina ---------- */
.hhero{position:relative;height:720px;overflow:hidden;color:#fff}
.hhero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.hhero .s1{position:absolute;inset:0;background:linear-gradient(to right,rgba(28,20,16,.62) 0%,rgba(28,20,16,.38) 38%,rgba(28,20,16,0) 68%),linear-gradient(to bottom,rgba(28,20,16,.45) 0%,rgba(28,20,16,0) 18%)}
.hhero .in{position:absolute;left:var(--pad);top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;max-width:720px;padding-top:60px}
.hhero h1{font-size:68px;line-height:1.06;font-weight:300}
.hhero h1 strong{font-weight:700}
.hhero .sub{font-size:20px;line-height:1.6;max-width:44ch;margin:28px 0 38px;opacity:.94}
.mcrow{display:grid;grid-template-columns:780px 1fr;gap:96px;align-items:center}
.mccol{display:grid;grid-template-columns:1.2fr 1fr;gap:20px}
.groot2{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:110px}
.groot2 .b{height:460px}
.klein3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:56px;border-top:1px solid var(--lijn);padding-top:40px}
.kk{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:start}
.kk .b{height:120px;border-radius:16px;overflow:hidden}
.kk h3{font-size:19px;font-weight:600;margin-bottom:6px}
.kk p{font-size:15.5px;line-height:1.55;color:var(--tekst2);margin-bottom:10px}
.introband{position:relative;height:640px}
.introband>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.introband .paneel2{position:absolute;left:var(--pad);bottom:64px;background:#fff;border-radius:24px;padding:48px 52px;max-width:640px}
.introband .paneel2 p{font-family:Montserrat;font-weight:300;font-size:27px;line-height:1.45}
.bento{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;grid-template-rows:330px 330px;gap:20px}
.tile{position:relative;border-radius:22px;overflow:hidden;margin:0}
.tile figcaption{position:absolute;left:0;right:0;bottom:0;padding:60px 22px 18px;background:linear-gradient(to top,rgba(30,22,18,.6),rgba(30,22,18,0));color:#fff;font-size:14px}
@media (max-width:960px){
 .hhero{height:680px}.hhero .in{right:var(--pad);justify-content:flex-end;padding-bottom:40px}
 .hhero h1{font-size:38px}.hhero .sub{font-size:17px;margin:16px 0 24px}
 .hhero .s1{background:linear-gradient(to top,rgba(28,20,16,.8) 0%,rgba(28,20,16,.3) 60%,rgba(28,20,16,.35) 100%)}
 .mcrow,.groot2,.klein3{grid-template-columns:1fr;gap:28px}
 .mccol>div:first-child .r{height:380px !important}
 .mcrow h3{font-size:38px !important}
 .mccol{grid-template-columns:1fr 1fr;gap:12px}
 .mccol .kol2{padding-top:0 !important}
 .mccol .kol2 .r{height:178px !important}
 .groot2{margin-top:56px}.groot2 .b{height:300px}
 .klein3{margin-top:32px;padding-top:28px}
 .kk{grid-template-columns:96px 1fr}.kk .b{height:96px}
 .introband{height:auto}.introband>img{position:static;height:300px}
 .introband .paneel2{position:static;border-radius:0;padding:36px var(--pad);max-width:none}
 .introband .paneel2 p{font-size:21px}
 .bento{grid-template-columns:1fr 1fr;grid-template-rows:240px;grid-auto-rows:170px;gap:12px}
 .bento .tile{grid-row:auto !important;grid-column:auto !important}
 .bento .tile:first-child{grid-column:span 2 !important}
 .bento .tile:last-child{grid-column:span 2 !important}
 .overblok{grid-template-columns:1fr !important;gap:32px !important}
 .overblok>div:first-child{height:420px !important}
}
.deco{display:grid;grid-template-columns:1fr 1fr;min-height:760px;background:var(--wit)}.deco .t{padding:110px var(--pad) 110px 96px;display:flex;flex-direction:column;justify-content:center}
@media (max-width:960px){.deco{grid-template-columns:1fr}.deco>div:first-child{height:420px}.deco .t{padding:56px var(--pad)}}
.tijdlijn{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:40px;position:relative;margin-top:64px}
.tijdlijn:before{content:"";position:absolute;left:28px;right:calc(100% / 4 - 28px);top:28px;height:2px;background:var(--klei);opacity:.35}
.tijdlijn li{position:relative}.tijdlijn .bol{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--klei);color:#fff;font-family:Montserrat;font-weight:600;font-size:20px;margin-bottom:28px;box-shadow:0 0 0 10px var(--zand)}
.tijdlijn h3{font-size:21px;font-weight:600;margin-bottom:10px}.tijdlijn p{font-size:17px;line-height:1.65;color:var(--tekst2);max-width:28ch}
@media (max-width:960px){.tijdlijn{grid-template-columns:1fr;gap:30px}.tijdlijn:before{left:27px;right:auto;width:2px;top:28px;bottom:28px;height:auto}.tijdlijn li{padding-left:84px}.tijdlijn .bol{position:absolute;left:0;top:0}}
.mozaiek{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:300px 300px;gap:18px}.mozaiek figure{position:relative}.mozaiek .f{height:100%;border-radius:20px;overflow:hidden}.mozaiek figcaption{position:absolute;left:14px;bottom:12px;background:rgba(255,255,255,.88);padding:6px 12px;border-radius:10px;font-size:13.5px}
@media (max-width:960px){.mozaiek{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:170px}.mozaiek figure{grid-column:auto !important;grid-row:auto !important}}
.qs{display:grid;grid-template-columns:1fr 1fr;min-height:760px;background:var(--zand)}.qs .t{padding:110px var(--pad) 110px 96px;display:flex;flex-direction:column;justify-content:center}
@media (max-width:960px){.qs{grid-template-columns:1fr}.qs>div:first-child{height:380px}.qs .t{padding:56px var(--pad)}}
@media (max-width:960px){.pg{grid-template-columns:1fr !important}.pg .r{height:300px !important}}
@media (max-width:960px){.hero-split{grid-template-columns:1fr}.pg{grid-template-columns:1fr !important}}
/* ---------- echte site: aanvullingen op het A5-ontwerp ----------
   Wat de mockups niet tonen: knopstaten, focus, het dienstenpaneel, het mobiele menu,
   het formulier, de tussenmaten (tablet en kleine laptop) en contrast voor knoppen. */
html{scroll-behavior:smooth}
body{position:relative}
img{height:auto}
:focus-visible{outline:2px solid var(--kleid);outline-offset:3px}
.skip-link{position:absolute;left:-999px;top:0;z-index:100;background:var(--antr);color:#fff;padding:10px 14px;border-radius:8px}
.skip-link:focus{left:16px;top:16px}

/* knoppen: klei donker voor leesbare witte tekst (WCAG AA) */
.pill{background:var(--kleid);border:0;cursor:pointer;font-family:inherit;transition:background .2s}
.pill:hover{background:#8C4431}
.pill.wit{background:#fff;color:var(--antr)}
.pill.wit:hover{background:var(--zand)}
.ghost{transition:background .2s,color .2s}
.ghost:hover{background:var(--antr);color:#fff}
.ghost.licht:hover{background:#fff;color:var(--antr)}
.tlink:hover,.ilink:hover{border-bottom-color:var(--kleid)}

/* navigatie: donker op zand of wit, licht over een foto */
.nav .logo{width:auto}
.nav .logo-licht{display:none}
.nav-licht .nav{color:#fff}
.nav-licht .nav .logo-licht{display:block}
.nav-licht .nav .logo-donker{display:none}
.nav-licht .nav .npill{background:#fff;color:var(--antr)}
.nav-licht .nav .npill:hover{background:var(--zand)}
.zonder-navknop .nav .npill{display:none}
.nav .menu a,.nav .dknop{padding:6px 0}
.nav .menu>a:hover,.nav .dknop:hover{opacity:.75}
.nav .menu a[aria-current="page"],.actief-diensten .nav .dknop{box-shadow:inset 0 -2px 0 currentColor}
.ntel{display:flex;align-items:center;gap:9px}
.ntel:hover{opacity:.75}
.dwrap{position:relative}
.dknop svg{transition:transform .2s}
.dknop[aria-expanded="true"] svg{transform:rotate(180deg)}
.paneel{position:absolute;top:calc(100% + 16px);left:-24px;width:460px;background:#fff;color:var(--antr);border-radius:20px;box-shadow:0 24px 60px rgba(42,38,34,.18);padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:2px;z-index:10}
.paneel:before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.paneel a{padding:12px 16px;border-radius:12px;font-weight:500;font-size:15px;box-shadow:none !important}
.paneel a:hover{background:var(--zand)}
.paneel a.uit{grid-column:span 2;background:var(--poeder);padding:16px 18px;margin-bottom:6px}
.paneel a.uit b{display:block;font-family:Montserrat,sans-serif;font-weight:600;font-size:17px}
.paneel a.uit span{display:block;font-size:14px;color:var(--tekst2);margin-top:3px;font-weight:400}
.paneel a.uit:hover{background:#F1DCD3}
.paneel a.alle{grid-column:span 2;border-top:1px solid var(--lijn);border-radius:0 0 12px 12px;margin-top:6px;color:var(--kleid);font-weight:600}

/* mobiel menu */
.hamb{all:unset;cursor:pointer;display:none;padding:10px;margin-right:-10px;color:inherit;line-height:0}
.hamb .ic-dicht{display:none}
.mmenu{position:fixed;inset:0;z-index:30;background:#fff;padding:104px var(--pad) 48px;overflow-y:auto}
.mmenu[hidden]{display:none}
.mmenu .mkop{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--grijs);font-weight:600;margin-bottom:6px}
.mmenu ul{list-style:none}
.mmenu li a{display:block;padding:12px 0;font-family:Montserrat,sans-serif;font-size:21px;font-weight:500;border-bottom:1px solid var(--lijn)}
.mmenu .mrest{margin:22px 0 32px}
.mmenu .mrest a{font-size:23px;font-weight:600}
.menu-open{overflow:hidden}
.menu-open .nav{position:fixed;z-index:40;color:var(--antr) !important;background:#fff}
.menu-open .nav .logo-licht{display:none !important}
.menu-open .nav .logo-donker{display:block !important}
.menu-open .hamb .ic-open{display:none}
.menu-open .hamb .ic-dicht{display:block}
@media (max-width:1100px){
  .nav .menu,.nav .rechts{display:none}
  .nav .hamb{display:block}
}
@media (min-width:1101px){.mmenu{display:none !important}}

/* formulier */
.veld input,.veld textarea{display:block;width:100%;height:56px;border:1px solid #8C837B;border-radius:14px;background:#fff;padding:0 18px;font:inherit;font-size:17px;color:var(--antr)}
.veld textarea{height:150px;padding:14px 18px;resize:vertical;line-height:1.5}
.veld input:focus,.veld textarea:focus{outline:none;border-color:var(--kleid);box-shadow:0 0 0 3px rgba(163,80,58,.18)}
.offerte .pill{width:auto}
.form-msg{display:none;margin-top:18px;padding:18px 20px;border-radius:14px;font-size:17px;line-height:1.6}
.form-msg.show{display:block}
.form-success{background:var(--zand)}
.form-error{background:var(--poeder);color:var(--kleid)}

/* footer en snelbalk */
.foot .fkop{font-family:Montserrat,sans-serif;font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:16px;opacity:.7;font-weight:600}
.foot address{font-style:normal}
.foot a:hover{text-decoration:underline}
.flogo{height:38px;width:auto}
.fzin{margin-top:22px;max-width:30ch}
.sticky .s-bel{border:1.5px solid var(--antr)}
.sticky .s-off{background:var(--kleid);color:#fff}
.zonder-sticky .sticky{display:none !important}

/* tussenmaten: kleine laptop en tablet liggend */
@media (min-width:961px) and (max-width:1280px){
  :root{--pad:48px}
  .tk,.naast{gap:56px}
  .mcrow{grid-template-columns:1.2fr 1fr !important;gap:56px !important}
  .mcrow h3{font-size:42px !important}
  .overblok{grid-template-columns:1fr 1.2fr !important;gap:64px !important}
  .slot-foto{grid-template-columns:1fr 1fr}
  .slot-foto .t{padding:80px 56px}
  .deco .t,.qs .t{padding-left:56px !important}
  .hhero h1{font-size:58px}
  .hero h1{font-size:50px}
  .hero-split h1{font-size:56px}
  .tijdlijn{gap:28px !important}
}
@media (max-width:1100px) and (min-width:961px){
  .groot2 .b{height:380px}
  .fgrid{grid-template-columns:1fr 1fr}
  .lijst .rij{grid-template-columns:1fr 1.5fr}
}
/* grids mogen nooit breder worden dan hun kolom; op mobiel wint de mobiele opbouw van inline kolommen */
.tk>*,.naast>*,.project>*,.pg>*,.mcrow>*,.overblok>*{min-width:0}
h1,h2,h3{overflow-wrap:break-word}
@media (max-width:960px){
  .tk,.naast,.naast.smal,.naast.breed,.project,.pg,.overblok{grid-template-columns:1fr !important;gap:28px !important}
  .galhead h2{max-width:100%}
  .naast figure .r[style*="aspect-ratio"]{height:auto !important}
}

/* tablet staand: de mobiele opbouw, met wat meer lucht en grotere titels */
@media (min-width:761px) and (max-width:960px){
  :root{--pad:40px}
  .hhero h1,.hero h1{font-size:46px}
  .hero-rust h1,.hero-split h1{font-size:48px !important}
  .h2{font-size:34px}.h2l{font-size:40px}
  .slot h2,.slot-foto h2{font-size:44px}
  .strook{grid-template-columns:repeat(3,1fr) !important}
}

/* cookiebanner: weigeren even makkelijk als akkoord, dus twee gelijke knoppen */
.cookiebanner{position:fixed;left:24px;bottom:24px;z-index:50;max-width:440px;background:#fff;color:var(--antr);border-radius:20px;box-shadow:0 20px 50px rgba(42,38,34,.2);padding:22px 24px}
.cookiebanner[hidden]{display:none}
.cookiebanner p{font-size:15.5px;line-height:1.55;color:var(--tekst2);margin-bottom:16px}
.ckknoppen{display:flex;gap:10px}
.ckknoppen .ghost{flex:1;padding:12px 18px;min-height:44px;font-size:13px;cursor:pointer;background:#fff;font-family:inherit}
@media (max-width:960px){.cookiebanner{left:12px;right:12px;bottom:90px;max-width:none}}