/* Lettertypes lokaal (Bodoni Moda en Jost, latin) */
@font-face{font-family:"Bodoni Moda";src:url("fonts/bodoni-moda.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url("fonts/bodoni-moda-italic.woff2") format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Jost";src:url("fonts/jost.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
/* DVJ Schilderwerken — huisstijl afgeleid van het logo
   Indeling: licht en ruim; antraciet als basis, goud alleen als detail (lijnen, accenten), schreefkoppen zoals het logo. */
:root{
  --wit:#FFFFFF;
  --steen:#F3F3F1;          /* lichte sectie-achtergrond, neutraal grijs */
  --lijn:#E2E1DC;
  --antraciet:#2B2C2D;      /* logo: zwart */
  --antraciet-diep:#1F2021;
  --tekst-zacht:#5D5F61;
  --goud:#B8A27C;           /* logo: goud, alleen voor lijnen/vlakken */
  --goud-licht:#E9E1D2;
  --goud-tekst:#7A6743;     /* goud dat leesbaar is als tekst op wit */
  --radius:2px;
  --max:1200px;
  --display:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --sans:"Jost","Futura","Century Gothic",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--wit);color:var(--antraciet);font-family:var(--sans);font-size:1.0625rem;line-height:1.65;font-weight:400}
img{max-width:100%;height:auto;display:block}
a{color:var(--antraciet);text-decoration-color:var(--goud);text-decoration-thickness:1.5px;text-underline-offset:4px}
a:hover{color:var(--goud-tekst)}
:focus-visible{outline:2px solid var(--goud);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--antraciet);color:#fff;padding:.6rem 1rem;z-index:100}
.skip:focus{left:1rem}

/* Typografie */
h1,h2,h3{margin:0 0 .55em;color:var(--antraciet);text-wrap:balance}
.display,h2{font-family:var(--display);font-weight:500;letter-spacing:-.01em;line-height:1.08}
h2{font-size:clamp(1.9rem,3.4vw,2.85rem)}
h3{font-family:var(--sans);font-weight:500;font-size:1.25rem;line-height:1.3}
p{margin:0 0 1em;max-width:66ch}
.lead{font-size:1.2rem;color:var(--tekst-zacht);font-weight:300;line-height:1.6}
/* Gespatieerde kapitalen zoals 'SCHILDERWERKEN' in het logo: alleen voor de plaats-/merkregel */
.merkregel{font-family:var(--sans);font-size:.82rem;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--tekst-zacht);margin:0 0 1.4rem}
.goudlijn{display:block;width:64px;height:1.5px;background:var(--goud);border:0;margin:1.4rem 0 1.6rem}
.kop .goudlijn{margin-top:.2rem}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:24px}
section{padding-block:clamp(64px,9vw,120px)}
.steen{background:var(--steen)}
.donker{background:var(--antraciet);color:#E8E8E6}
.donker h2,.donker h3{color:#fff}
.donker p{color:#C9CACA}
.donker a{color:#fff}
.sectiekop{max-width:720px;margin-bottom:clamp(36px,5vw,56px)}
.sectiekop .goudlijn{margin:0 0 1.4rem}

/* Knoppen */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;font:inherit;font-weight:500;font-size:1rem;letter-spacing:.02em;padding:1em 1.7em;border-radius:var(--radius);border:1.5px solid transparent;text-decoration:none;cursor:pointer;line-height:1.2;transition:background .15s,color .15s,border-color .15s}
.btn-donker{background:var(--antraciet);color:#fff}
.btn-donker:hover{background:var(--antraciet-diep);color:#fff;border-color:var(--goud)}
.btn-goud{background:var(--goud);color:var(--antraciet-diep)}
.btn-goud:hover{background:#C9B48E;color:var(--antraciet-diep)}
.btn-rand{border-color:var(--antraciet);color:var(--antraciet);background:transparent}
.btn-rand:hover{background:var(--antraciet);color:#fff}
.donker .btn-rand{border-color:rgba(255,255,255,.6);color:#fff}
.donker .btn-rand:hover{background:#fff;color:var(--antraciet)}
.knoppen{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.8rem}

/* Header */
.kop{background:var(--wit);border-bottom:1px solid var(--lijn);position:sticky;top:0;z-index:40}
.kop-in{display:flex;align-items:center;gap:28px;min-height:84px}
.merk{display:flex;align-items:center;gap:14px;text-decoration:none;flex-shrink:0}
.merk img{height:46px;width:auto}
.merk span{font-size:.72rem;letter-spacing:.34em;font-weight:500;color:var(--antraciet);padding-left:14px;border-left:1px solid var(--goud);line-height:1.2}
.nav{margin-left:auto}
.nav > ul{list-style:none;margin:0;padding:0;display:flex;gap:2px;align-items:center}
.nav a{display:block;text-decoration:none;padding:.5em .75em;font-size:.98rem;white-space:nowrap;color:var(--antraciet)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--goud-tekst)}
.nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--goud)}
.nav .sub{position:relative}
.nav .sub > ul{list-style:none;margin:0;padding:10px 0;position:absolute;top:100%;left:0;min-width:240px;background:var(--wit);border:1px solid var(--lijn);border-top:2px solid var(--goud);display:none}
.nav .sub:hover > ul,.nav .sub:focus-within > ul{display:block}
.nav .sub > ul a{padding:.55em 1.1em}
.nav .sub > a::after{content:"";display:inline-block;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);margin-left:8px}
.kop-acties{display:flex;align-items:center;gap:18px;flex-shrink:0}
.kop-tel{text-decoration:none;font-weight:500;white-space:nowrap;display:flex;flex-direction:column;line-height:1.2;font-size:1.02rem}
.kop-tel small{font-size:.75rem;color:var(--tekst-zacht);font-weight:400}
.kop-acties .btn{padding:.85em 1.3em;white-space:nowrap}
.menu{display:none}
@media (max-width:1240px){.kop-tel{display:none}}
@media (max-width:1080px){
  .nav{display:none}
  .kop-acties{margin-left:auto}
  .menu{display:block}
  .menu summary{list-style:none;cursor:pointer;border:1.5px solid var(--antraciet);border-radius:var(--radius);padding:.55em .95em;font-weight:500}
  .menu summary::-webkit-details-marker{display:none}
  .menu-paneel{position:absolute;left:0;right:0;top:100%;background:var(--wit);border-bottom:2px solid var(--goud);padding:8px 24px 24px;max-height:calc(100vh - 84px);overflow:auto}
  .menu-paneel a{display:block;text-decoration:none;padding:.85em 0;border-bottom:1px solid var(--lijn);font-size:1.1rem}
  .menu-paneel a.in{padding-left:1.2em;font-size:1rem}
}
@media (max-width:600px){
  .kop-acties .btn{display:none}
  .merk img{height:38px}
  .merk span{font-size:.62rem;letter-spacing:.28em;padding-left:10px}
  .kop-in{min-height:70px}
}

/* Hero */
.hero{padding-block:clamp(40px,6vw,88px) clamp(56px,7vw,104px)}
.hero-grid{display:grid;grid-template-columns:1fr 1.02fr;gap:clamp(32px,5vw,80px);align-items:center}
.hero .display{font-size:clamp(2.9rem,6.6vw,5.4rem);line-height:1.02;margin:0}
.hero h1{margin:0}
.hero .lead{margin-top:.2rem}
.hero-beeld{position:relative;padding-bottom:120px}
.hero-beeld .ph,.hero-beeld img.foto{aspect-ratio:4/5;width:86%;margin-left:auto;object-fit:cover}
.hero-form{position:absolute;left:0;bottom:0;width:min(400px,78%);z-index:2}
.beloftes{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;gap:.55rem}
.beloftes li{display:flex;gap:.8em;align-items:baseline}
.beloftes li::before{content:"";flex:0 0 18px;height:1.5px;background:var(--goud);transform:translateY(-.3em)}
.google-score{display:flex;align-items:center;gap:12px;margin-top:2rem;font-size:.95rem;color:var(--tekst-zacht)}
.sterren{color:var(--goud);letter-spacing:.1em;font-size:1.05rem}
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr}
  .hero-beeld{padding-bottom:0;display:grid;gap:20px}
  .hero-beeld .ph,.hero-beeld img.foto{width:100%;aspect-ratio:4/3}
  .hero-form{position:static;width:100%}
}

/* Cijferband */
.cijfers{border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);padding-block:34px}
.cijfers ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.cijfers li{padding:0 24px;border-left:1px solid var(--goud)}
.cijfers li:first-child{border-left:0;padding-left:0}
.cijfers strong{display:block;font-family:var(--display);font-weight:500;font-size:2.2rem;line-height:1.1}
.cijfers span{font-size:.95rem;color:var(--tekst-zacht)}
@media (max-width:760px){.cijfers ul{grid-template-columns:1fr 1fr;row-gap:24px}.cijfers li:nth-child(3){border-left:0;padding-left:0}}

/* Placeholders voor foto's die nog komen */
.ph{background:linear-gradient(135deg,#ECEBE7,#E3E1DB);display:flex;align-items:flex-end;justify-content:flex-start;color:var(--tekst-zacht);font-size:.85rem;padding:18px;min-height:150px;position:relative}
.ph::before{content:"";position:absolute;inset:14px;border:1px solid rgba(184,162,124,.55);pointer-events:none}
.ph span{position:relative;max-width:30ch}

/* Diensten */
.diensten{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,40px)}
.dienst{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.dienst .ph,.dienst img{aspect-ratio:4/5;margin-bottom:22px}
.dienst h3{font-family:var(--display);font-size:1.75rem;font-weight:500;margin-bottom:.4em}
.dienst p{color:var(--tekst-zacht)}
.dienst .meer{margin-top:auto;font-weight:500;text-decoration:underline;text-decoration-color:var(--goud);text-underline-offset:5px}
a.dienst:hover h3{color:var(--goud-tekst)}
@media (max-width:860px){.diensten{grid-template-columns:1fr}.dienst .ph,.dienst img{aspect-ratio:3/2}}

/* Beloftes: vijf zorgen weggenomen */
.verwacht{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,6vw,96px);align-items:start}
.verwacht-kop{position:sticky;top:120px}
.belofte-lijst{list-style:none;margin:0;padding:0}
.belofte-lijst li{display:grid;grid-template-columns:1fr;padding:26px 0;border-top:1px solid var(--lijn)}
.belofte-lijst li:last-child{border-bottom:1px solid var(--lijn)}
.belofte-lijst h3{font-family:var(--display);font-size:1.6rem;margin-bottom:.3em}
.belofte-lijst p{color:var(--tekst-zacht);margin:0}
@media (max-width:860px){.verwacht{grid-template-columns:1fr}.verwacht-kop{position:static}}

/* Twee kolommen */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,88px);align-items:center}
.duo.boven{align-items:start}
.duo-tekst{grid-template-columns:1.35fr .85fr;align-items:start}
.duo > *{min-width:0}
@media (max-width:900px){.duo,.duo-tekst{grid-template-columns:1fr}}

/* Voor/na */
.ba{position:relative;aspect-ratio:3/2;overflow:hidden;--pos:50%;user-select:none;max-width:100%}
.ba > .ph,.ba > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;margin:0}
.ba .na{clip-path:inset(0 0 0 var(--pos))}
.ba .ph.voor{background:linear-gradient(135deg,#D9D8D3,#CFCDC6)}
.ba .ph.na{justify-content:flex-end;text-align:right;background:linear-gradient(135deg,#F1EFEA,#E8E5DE)}
.ba::after{content:"";position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:var(--goud);pointer-events:none}
.ba-greep{position:absolute;top:50%;left:var(--pos);width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:var(--wit);border:1.5px solid var(--goud);pointer-events:none;z-index:2}
.ba-greep::before,.ba-greep::after{content:"";position:absolute;top:50%;width:7px;height:7px;border-left:1.5px solid var(--antraciet);border-bottom:1.5px solid var(--antraciet);margin-top:-3.5px}
.ba-greep::before{left:11px;transform:rotate(45deg)}
.ba-greep::after{right:11px;transform:rotate(-135deg)}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;z-index:3}
.ba-label{position:absolute;top:16px;background:var(--wit);color:var(--antraciet);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;padding:4px 12px;z-index:2;pointer-events:none}
.ba-label.l{left:16px}.ba-label.r{right:16px}

/* Over Jop en Danilo */
.citaat{font-family:var(--display);font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.3;margin:1.6rem 0;padding-left:24px;border-left:1.5px solid var(--goud);font-style:italic}
.citaat footer{font-family:var(--sans);font-style:normal;font-size:.95rem;color:var(--tekst-zacht);margin-top:.8rem}
.duo-foto{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.duo-foto .ph{aspect-ratio:3/4}
.duo-foto .ph:nth-child(2){margin-top:48px}

/* Stappen (echte volgorde) */
.stappen{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,36px);counter-reset:stap}
.stappen li{counter-increment:stap;border-top:1.5px solid var(--goud);padding-top:22px}
.stappen li::before{content:counter(stap);display:block;font-family:var(--display);font-size:2.4rem;line-height:1;margin-bottom:14px;color:var(--goud-tekst)}
.donker .stappen li::before{color:var(--goud)}
.stappen h3{font-size:1.15rem}
.stappen p{font-size:1rem;margin:0}
@media (max-width:900px){.stappen{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.stappen{grid-template-columns:1fr}}

/* Reviews: score links, drie reviews rechts */
.sterren{color:var(--goud);letter-spacing:.12em;font-size:1rem;line-height:1}
.reviews-blok{display:grid;grid-template-columns:300px 1fr;gap:clamp(28px,4vw,56px);align-items:stretch}
.reviews-blok.zonder-score{grid-template-columns:1fr}
.score{background:var(--antraciet);color:#E8E8E6;padding:36px 32px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.score-getal{font-family:var(--display);font-size:4.4rem;line-height:1;color:#fff;margin:0}
.score .sterren{font-size:1.3rem}
.score-tekst{font-size:.95rem;color:#C9CACA;margin:4px 0 18px}
.score .btn{width:100%;margin-top:auto;padding-inline:1em;white-space:nowrap}
.score .btn-donker{background:var(--goud);color:var(--antraciet-diep)}
.score .btn-donker:hover{background:#C9B48E;border-color:transparent;color:var(--antraciet-diep)}
.score-link{color:#fff;font-size:.92rem;margin-top:6px}
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.5vw,28px)}
.review{margin:0;padding:28px 26px;background:var(--wit);border:1px solid var(--lijn);border-top:2px solid var(--goud);display:flex;flex-direction:column;gap:16px}
.steen .review{border-color:var(--wit);border-top-color:var(--goud)}
.review blockquote{margin:0}
.review p{font-family:var(--display);font-size:1.12rem;line-height:1.5;margin:0}
.review figcaption{margin-top:auto;font-size:.92rem;color:var(--tekst-zacht);display:flex;flex-direction:column;gap:2px}
.review figcaption strong{color:var(--antraciet);font-weight:500}
.review-dienst{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--goud-tekst);margin-top:6px}
@media (max-width:1060px){.reviews-blok{grid-template-columns:1fr}.score{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 20px}.score .btn{width:auto;margin-top:0}.score-tekst{margin:0}}
@media (max-width:860px){.reviews{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:86%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;margin-right:-24px;padding-right:24px}.review{scroll-snap-align:start}}

/* Extra routes in de hero */
.btn-tekst{padding-inline:.4em;color:var(--antraciet);text-decoration:underline;text-decoration-color:var(--goud);text-underline-offset:6px}
.btn-tekst:hover{color:var(--goud-tekst)}
.btn-tekst .sterren{font-size:.85rem}
.hero-bel{margin-top:1.2rem;font-size:.95rem;color:var(--tekst-zacht)}
.hero-bel a{font-weight:500;color:var(--antraciet)}
/* Offerteknop bovenaan projecten */
.kop-cta{border-left:1.5px solid var(--goud);padding-left:28px}
.kop-cta p{margin-bottom:14px}
.kop-cta .klein{margin:14px 0 0}
.raster-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;margin-top:48px;padding-top:32px;border-top:1px solid var(--lijn)}
.raster-cta p{margin:0;font-size:1.1rem}
@media (max-width:900px){.kop-cta{border-left:0;padding-left:0;border-top:1.5px solid var(--goud);padding-top:22px}}

/* Werkgebied */
.plaatsen{list-style:none;padding:0;margin:1.4rem 0 0;display:flex;flex-wrap:wrap;gap:10px}
.plaatsen li a,.plaatsen li span{display:inline-block;border:1px solid var(--lijn);padding:.45em 1.1em;font-size:.98rem;text-decoration:none;background:var(--wit)}
.plaatsen li a{border-color:var(--goud)}
.plaatsen li a:hover{background:var(--antraciet);color:#fff;border-color:var(--antraciet)}

/* Lijst met gouden streepjes */
.streep{list-style:none;padding:0;margin:0 0 1.2em}
.streep li{position:relative;padding-left:30px;margin-bottom:.6em}
.streep li::before{content:"";position:absolute;left:0;top:.8em;width:16px;height:1.5px;background:var(--goud)}

/* Paginakop subpagina's */
.paginakop{padding-block:clamp(36px,5vw,64px) clamp(48px,6vw,80px);border-bottom:1px solid var(--lijn)}
.paginakop h1{font-family:var(--display);font-weight:500;font-size:clamp(2.4rem,5vw,4rem);line-height:1.05;max-width:18ch;margin-bottom:.3em}
.paginakop .lead{max-width:58ch}
.paginakop-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(32px,5vw,72px);align-items:end}
.paginakop-grid .ph{aspect-ratio:4/3}
@media (max-width:900px){.paginakop-grid{grid-template-columns:1fr}}
.kruimel{font-size:.88rem;margin-bottom:28px;color:var(--tekst-zacht)}
.kruimel ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.kruimel li+li::before{content:"/";margin-right:8px;color:var(--goud)}
.kruimel a{color:var(--tekst-zacht);text-decoration:none}
.kruimel a:hover{color:var(--antraciet)}

/* Tekstpagina's */
.tekst h2{font-size:clamp(1.6rem,2.6vw,2.1rem);margin-top:1.7em}
.tekst h2:first-child{margin-top:0}
.tekst h3{margin-top:1.4em}
.tekst ol{padding-left:1.2em}
.tekst ol li{margin-bottom:.7em;padding-left:.3em}
.tekst ol li::marker{font-family:var(--display);color:var(--goud-tekst)}
.zijkolom{position:sticky;top:112px;display:grid;gap:24px}
.kader{border:1px solid var(--lijn);padding:28px;background:var(--wit)}
.kader h3{font-family:var(--display);font-size:1.4rem}
.kader.steen{background:var(--steen);border-color:var(--steen)}

/* FAQ */
.faq details{border-top:1px solid var(--lijn)}
.faq details:last-child{border-bottom:1px solid var(--lijn)}
.faq summary{cursor:pointer;font-weight:500;font-size:1.1rem;padding:20px 40px 20px 0;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after,.faq summary::before{content:"";position:absolute;right:6px;top:50%;width:14px;height:1.5px;background:var(--goud);transition:transform .2s}
.faq summary::before{transform:rotate(90deg)}
.faq details[open] summary::before{transform:rotate(0)}
.faq details p{color:var(--tekst-zacht);padding-bottom:12px}

/* Kaarten projecten/blog */
.raster{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,40px)}
.kaart{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.kaart .ph,.kaart img{aspect-ratio:4/3;margin-bottom:18px}
.kaart h3{font-family:var(--display);font-size:1.45rem;margin-bottom:.3em}
.kaart p{color:var(--tekst-zacht);font-size:.98rem;margin:0}
.kaart .meta{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--goud-tekst);margin-bottom:.6em;font-weight:500}
a.kaart:hover h3{color:var(--goud-tekst)}
@media (max-width:900px){.raster{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.raster{grid-template-columns:1fr}}
.filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:36px}
.filter button{font:inherit;font-size:.95rem;background:var(--wit);border:1px solid var(--lijn);padding:.5em 1.2em;cursor:pointer;color:var(--antraciet);border-radius:var(--radius)}
.filter button[aria-pressed="true"]{background:var(--antraciet);border-color:var(--antraciet);color:#fff}

/* Formulier */
.form{background:var(--wit);padding:clamp(24px,3.5vw,36px);border:1px solid var(--lijn);border-top:3px solid var(--goud);box-shadow:0 24px 48px -28px rgba(31,32,33,.35)}
.form h2,.form .form-titel{font-family:var(--display);font-weight:500;font-size:1.65rem;line-height:1.15;margin:0 0 .3em}
.form .intro{font-size:.95rem;color:var(--tekst-zacht);margin-bottom:1.2rem}
.veld{margin-bottom:14px}
.veld label,.veld legend{display:block;font-weight:500;margin-bottom:6px;font-size:.92rem}
.veld .opt{font-weight:400;color:var(--tekst-zacht)}
.veld input[type=text],.veld input[type=tel],.veld input[type=email],.veld select,.veld textarea{width:100%;font:inherit;font-size:1rem;padding:.8em .9em;border:1px solid #CFCDC7;border-radius:var(--radius);background:#fff;color:var(--antraciet)}
.veld input:focus,.veld select:focus,.veld textarea:focus{border-color:var(--antraciet);outline:1.5px solid var(--antraciet);outline-offset:0}
.veld textarea{min-height:110px;resize:vertical}
.twee{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.twee > *{min-width:0}
@media (max-width:520px){.twee{grid-template-columns:1fr}}
fieldset.veld{border:0;padding:0;margin:0 0 14px}
.keuzes{display:flex;flex-wrap:wrap;gap:8px}
.keuzes label{font-weight:400;border:1px solid #CFCDC7;padding:.55em 1em;cursor:pointer;display:flex;gap:.55em;align-items:center;margin:0;border-radius:var(--radius)}
.keuzes input{accent-color:var(--antraciet)}
.keuzes label:has(input:checked){border-color:var(--antraciet);background:var(--steen)}
.klein{font-size:.85rem;color:var(--tekst-zacht)}
.form .btn{width:100%;margin-top:4px}
.form .zekerheid{display:flex;flex-wrap:wrap;gap:4px 16px;margin:12px 0 0;padding:0;list-style:none;font-size:.85rem;color:var(--tekst-zacht)}
.form .zekerheid li::before{content:"✓";color:var(--goud-tekst);margin-right:.4em}
.verborgen{display:none}

/* Contact */
.contact-lijst{list-style:none;padding:0;margin:0}
.contact-lijst li{padding:14px 0;border-bottom:1px solid var(--lijn)}
.contact-lijst li:last-child{border:0}
.contact-lijst strong{display:block;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tekst-zacht);font-weight:500}
.contact-lijst a{font-size:1.15rem;text-decoration:none;font-weight:500}

/* CTA-band */
.cta-band .duo{align-items:center}
.cta-band .display{font-size:clamp(2.2rem,4.4vw,3.6rem);color:#fff;margin:0 0 .4em}
.cta-band .streep li{color:#E8E8E6}

/* Footer */
.voet{background:var(--antraciet-diep);color:#B9BABA;padding-block:72px 28px;font-size:.98rem}
.voet a{color:#E8E8E6;text-decoration:none}
.voet a:hover{color:var(--goud)}
.voet-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:40px}
.voet-logo{width:180px;margin-bottom:20px}
.voet h2{font-family:var(--sans);font-size:.8rem;letter-spacing:.28em;text-transform:uppercase;color:var(--goud);font-weight:500;margin-bottom:1.1em}
.voet ul{list-style:none;padding:0;margin:0}
.voet li{margin-bottom:.5em}
.voet-onder{border-top:1px solid rgba(255,255,255,.12);margin-top:52px;padding-top:22px;display:flex;flex-wrap:wrap;gap:8px 28px;font-size:.86rem}
@media (max-width:900px){.voet-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.voet-grid{grid-template-columns:1fr}}

/* Mobiele actiebalk */
.actiebalk{display:none}
@media (max-width:760px){
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .actiebalk{display:grid;grid-template-columns:1fr 1fr 1.35fr;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--wit);border-top:1px solid var(--lijn);padding-bottom:env(safe-area-inset-bottom,0px)}
  .actiebalk a{display:flex;align-items:center;justify-content:center;gap:7px;min-height:64px;font-weight:500;text-decoration:none;color:var(--antraciet);font-size:.95rem}
  .actiebalk a + a{border-left:1px solid var(--lijn)}
  .actiebalk a.hoofd{background:var(--antraciet);color:#fff}
  .actiebalk svg{width:19px;height:19px}
}

/* Artikel */
.artikel{max-width:720px}
.artikel p,.artikel li{font-size:1.1rem}
.artikel .ph{aspect-ratio:3/2;margin:1.8em 0}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.ph{min-width:0;overflow:hidden}
.duo-foto > *{min-width:0}
@media (min-width:961px){.hero-beeld{padding-bottom:210px}}

/* Echte foto's: zelfde vormen als de plekhouders */
img.foto{display:block;width:100%;height:auto;object-fit:cover;background:var(--steen)}
.duo-foto img.foto{aspect-ratio:3/4}
.duo-foto img.foto:nth-child(2){margin-top:48px}
.paginakop-grid img.foto,.zijkolom > img.foto,.kaart img.foto{aspect-ratio:4/3}
.artikel img.foto{aspect-ratio:3/2;margin:1.8em 0}
.bedankt-foto img.foto,.duo > img.foto{aspect-ratio:4/3}

[id]{scroll-margin-top:100px}

/* Reviews: scorebalk + rustig doorlopende band */
.score-balk{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;padding:26px 30px;background:var(--antraciet);color:#E8E8E6;margin-bottom:36px}
.score-samenvatting{display:flex;align-items:center;gap:20px}
.score-getal{font-family:var(--display);font-size:3.6rem;line-height:1;color:#fff;margin:0}
.score-tekst{font-size:.95rem;color:#C9CACA;margin:6px 0 0}
.score-acties{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.score-acties .btn{background:var(--goud);color:var(--antraciet-diep)}
.score-acties .btn:hover{background:#C9B48E;color:var(--antraciet-diep);border-color:transparent}
.score-link{color:#fff;font-size:.95rem}
.reviews-band{width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.reviews-spoor{display:flex;width:max-content;animation:reviews-loop 80s linear infinite}
.reviews-band:hover .reviews-spoor,.reviews-band:focus-within .reviews-spoor{animation-play-state:paused}
.reviews-set{display:flex;gap:24px;padding-right:24px}
.reviews-set .review{width:360px;flex:0 0 360px}
@keyframes reviews-loop{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:600px){.reviews-set .review{width:290px;flex-basis:290px}.score-balk{padding:22px}.score-getal{font-size:3rem}}
@media (prefers-reduced-motion:reduce){
  .reviews-spoor{animation:none}
  .reviews-band{overflow-x:auto;-webkit-mask-image:none;mask-image:none;padding-inline:24px}
  .reviews-set[aria-hidden="true"]{display:none}
}

/* Projectpagina */
.feiten{margin:0;border-top:1.5px solid var(--goud)}
.feiten div{display:grid;grid-template-columns:130px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--lijn)}
.feiten dt{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tekst-zacht);padding-top:3px}
.feiten dd{margin:0}
.fases{list-style:none;padding:0;margin:1.6em 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:22px;counter-reset:fase}
.fases li{counter-increment:fase}
.fases figure{margin:0}
.fases img.foto{aspect-ratio:4/3}
.fases figcaption{font-size:.92rem;color:var(--tekst-zacht);padding-top:10px}
.fases figcaption strong{display:block;color:var(--antraciet);font-weight:500}
.fases figcaption strong::before{content:counter(fase) ". ";font-family:var(--display);color:var(--goud-tekst)}
.ba-project{margin:1.6em 0 0}
@media (max-width:520px){.fases{grid-template-columns:1fr}}
.tekst .fases{padding-left:0}
.tekst .fases li{padding-left:0;margin:0}
.feiten div{grid-template-columns:150px 1fr}
.feiten dt{letter-spacing:.12em;font-size:.74rem}

/* Reviews: scoreblok links, doorlopende reviews rechts (3 in beeld) */
.reviews-blok{display:grid;grid-template-columns:300px minmax(0,1fr);gap:clamp(24px,3vw,40px);align-items:stretch}
.reviews-blok .reviews-band{width:auto;margin-left:0;min-width:0;display:flex;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 92%,transparent)}
.reviews-blok .reviews-spoor{animation-duration:70s}
.reviews-blok .reviews-set{gap:20px;padding-right:20px}
.reviews-blok .reviews-set .review{width:280px;flex:0 0 280px}
.reviews-blok .score-getal{font-size:4.4rem}
@media (max-width:1060px){.reviews-blok{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.reviews-blok .reviews-band{overflow-x:auto;padding-inline:0}}

/* Dienstfoto's: omlijning en licht naar voren bij hover */
.dienst img.foto,.dienst .ph{transition:transform .35s ease,box-shadow .35s ease,outline-color .35s ease;outline:1.5px solid transparent;outline-offset:6px}
a.dienst:hover img.foto,a.dienst:focus-visible img.foto,a.dienst:hover .ph{outline-color:var(--goud);transform:translateY(-4px) scale(1.015);box-shadow:0 22px 40px -26px rgba(31,32,33,.55)}
a.dienst:focus-visible{outline:none}

/* Mobiel: foto van Jop en Danilo als achtergrond van de hero, tekst erover */
@media (max-width:960px){
  .hero{padding-top:0}
  .hero-tekst{position:relative;margin-inline:-24px;padding:calc(100vw * 0.62) 24px 36px;
    background:linear-gradient(180deg,rgba(31,32,33,0) 0,rgba(31,32,33,0) calc(100vw * .42),rgba(31,32,33,.78) calc(100vw * .78),var(--antraciet-diep) calc(100vw * 1.15)),
               url('../img/team-hero-mobiel.webp') center top / 100% auto no-repeat,var(--antraciet-diep);color:#fff}
  .hero-tekst .merkregel{color:rgba(255,255,255,.82)}
  .hero-tekst .display{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.35)}
  .hero-tekst .lead{color:rgba(255,255,255,.88)}
  .hero-tekst .beloftes li{color:#fff}
  .hero-tekst .btn-rand{border-color:rgba(255,255,255,.7);color:#fff}
  .hero-tekst .btn-tekst{color:#fff}
  .hero-tekst .hero-bel{color:rgba(255,255,255,.8)}
  .hero-tekst .hero-bel a{color:#fff}
  .hero-beeld > img.foto,.hero-beeld > .ph{display:none}
  .hero-beeld{margin-top:28px}
}
@media (prefers-reduced-motion:reduce){a.dienst:hover img.foto{transform:none}}
.plaats-project{display:block;text-decoration:none;color:inherit}
.plaats-project img.foto{aspect-ratio:4/3}
.plaats-project span{display:block;padding-top:10px;font-size:.95rem;text-decoration:underline;text-decoration-color:var(--goud);text-underline-offset:5px}
.plaats-project:hover span{color:var(--goud-tekst)}
.fases li:last-child:nth-child(odd){grid-column:1/-1}
.fases li:last-child:nth-child(odd) img.foto{aspect-ratio:auto}

/* Beloftes schuiven van rechts in beeld (alleen met JavaScript, nooit bij 'minder beweging') */
.js-schuif .belofte-lijst li{opacity:0;transform:translateX(48px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js-schuif .belofte-lijst li.in-beeld{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js-schuif .belofte-lijst li{opacity:1;transform:none}}

/* Galerij: tekst links, mozaïek rechts. Foto's altijd volledig (geen uitsnede) */
.galerij{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(32px,5vw,72px);align-items:center}
.galerij > *{min-width:0}
.galerij-tekst .knoppen{align-items:center}
.mozaiek{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;align-items:start}
.m-kol{display:grid;gap:12px;min-width:0}
.mozaiek figure{margin:0;position:relative;min-width:0}
.mozaiek img.foto{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;display:block}
.mozaiek figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 14px 10px;font-size:.82rem;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(20,21,22,.62));opacity:0;transition:opacity .3s ease}
.mozaiek figure:hover figcaption{opacity:1}
@media (hover:none){.mozaiek figcaption{opacity:1}}
@media (max-width:960px){.galerij{grid-template-columns:1fr}}
@media (max-width:560px){.mozaiek{grid-template-columns:1fr 1fr}.m-groot{grid-column:1/-1}}
/* echte foto's nooit bijsnijden */
.paginakop-grid img.foto.kopfoto{aspect-ratio:auto;height:auto;max-height:none;object-fit:contain}
.paginakop-grid img.foto.kopfoto[width="900"]{max-width:380px;justify-self:end}
.dienst img.foto,.dienst .ph{aspect-ratio:3/4}
@media (max-width:860px){.dienst img.foto,.dienst .ph{aspect-ratio:3/4}}
.belofte-lijst{overflow-x:clip}
html,body{overflow-x:clip}

/* Fotorijen: elke rij vult de breedte, foto's even hoog, nooit bijgesneden */
.fotorijen{display:grid;gap:12px}
.fotorij{display:flex;gap:12px;align-items:flex-start}
.fotorij figure{margin:0;position:relative;min-width:0}
.fotorij img.foto{width:100%;height:auto;display:block}
.fotorij figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 9px;font-size:.8rem;color:#fff;line-height:1.35;
  background:linear-gradient(180deg,transparent,rgba(20,21,22,.66));opacity:0;transition:opacity .3s ease}
.fotorij figure:hover figcaption{opacity:1}
.fotorijen.genummerd figcaption,.fotorijen.genummerd figure figcaption{opacity:1}
.fotorij figcaption b{color:var(--goud);font-weight:600}
@media (hover:none){.fotorij figcaption{opacity:1}}
.tekst .fotorijen{margin:1.6em 0}
@media (max-width:640px){
  .fotorijen{display:block;columns:2;column-gap:10px}
  .fotorij{display:contents}
  .fotorij figure{break-inside:avoid;margin-bottom:10px}
}
/* Projectenpagina: kaarten in metselverband, foto's in eigen verhouding */
.raster-projecten{display:block;columns:3;column-gap:clamp(24px,3vw,40px)}
.raster-projecten .kaart{break-inside:avoid;margin-bottom:clamp(28px,3vw,44px)}
.raster-projecten .kaart img.foto{aspect-ratio:auto;height:auto}
@media (max-width:900px){.raster-projecten{columns:2}}
@media (max-width:600px){.raster-projecten{columns:1}}
.plaats-project img.foto{aspect-ratio:auto;height:auto;max-width:380px;margin-left:auto}

/* Projectpagina: foto als achtergrond van de hero, tekst erover */
.project-hero{position:relative;background-color:var(--antraciet-diep);background-size:cover;background-repeat:no-repeat;color:#fff;
  padding-block:clamp(28px,4vw,48px) clamp(56px,8vw,110px);min-height:clamp(460px,62vh,640px);display:flex;align-items:flex-end}
.project-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,21,22,.86) 0%,rgba(20,21,22,.62) 48%,rgba(20,21,22,.25) 100%),linear-gradient(0deg,rgba(20,21,22,.55),transparent 45%)}
.project-hero > .wrap{position:relative;width:100%}
.project-hero .kruimel a,.project-hero .kruimel{color:rgba(255,255,255,.8)}
.project-hero .kruimel li+li::before{color:var(--goud)}
.project-hero h1{font-family:var(--display);font-weight:500;font-size:clamp(2.2rem,4.6vw,3.8rem);line-height:1.05;color:#fff;max-width:18ch;margin-bottom:.35em}
.project-hero .merkregel{color:rgba(255,255,255,.8)}
.project-hero .lead{color:rgba(255,255,255,.9);max-width:54ch}
.project-hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,5vw,72px);align-items:end;margin-top:clamp(40px,8vw,120px)}
.project-hero .feiten{background:rgba(20,21,22,.55);border-top:1.5px solid var(--goud);padding:4px 20px;backdrop-filter:blur(4px)}
.project-hero .feiten div{border-color:rgba(255,255,255,.15)}
.project-hero .feiten dt{color:rgba(255,255,255,.7)}
.project-hero .feiten dd{color:#fff}
@media (max-width:900px){
  .project-hero{min-height:0}
  .project-hero::before{background:linear-gradient(180deg,rgba(20,21,22,.45) 0%,rgba(20,21,22,.8) 45%,rgba(20,21,22,.92) 100%)}
  .project-hero-grid{grid-template-columns:1fr;margin-top:clamp(120px,40vw,220px)}
}

/* Foto's vergroten */
.fotorijen.genummerd img.foto{cursor:zoom-in}
.foto-tip{margin-top:-.6em}
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(15,16,17,.94);display:flex;align-items:center;justify-content:center;padding:56px 64px}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center}
.lightbox img{max-width:min(1100px,100%);max-height:calc(100vh - 140px);width:auto;height:auto;object-fit:contain}
.lightbox figcaption{color:#E8E8E6;font-size:.95rem;margin-top:12px;text-align:center}
.lightbox button{position:absolute;background:transparent;border:1.5px solid rgba(255,255,255,.5);color:#fff;width:48px;height:48px;border-radius:50%;font-size:1.4rem;line-height:1;cursor:pointer}
.lightbox button:hover{border-color:var(--goud);color:var(--goud)}
.lightbox .lb-sluit{top:16px;right:16px}
.lightbox .lb-vorige{left:12px;top:50%;margin-top:-24px}
.lightbox .lb-volgende{right:12px;top:50%;margin-top:-24px}
@media (max-width:600px){.lightbox{padding:64px 12px}.lightbox .lb-vorige,.lightbox .lb-volgende{top:auto;bottom:14px;margin:0}}
.fotorij figure:only-child{flex:0 1 auto!important;max-width:min(460px,100%)}

/* Dienstpagina's: zelfde foto-hero als projecten */
.project-hero .btn-rand{border-color:rgba(255,255,255,.7);color:#fff}
.project-hero .btn-rand:hover{background:#fff;color:var(--antraciet)}
.hero-punten{list-style:none;margin:0;padding:18px 22px;background:rgba(20,21,22,.55);border-top:1.5px solid var(--goud);backdrop-filter:blur(4px);display:grid;gap:10px}
.hero-punten li{display:flex;gap:.8em;align-items:baseline;color:#fff}
.hero-punten li::before{content:"";flex:0 0 16px;height:1.5px;background:var(--goud);transform:translateY(-.3em)}

/* Verborgen elementen (o.a. projectfilter) altijd verbergen, ook als een klasse display zet */
[hidden]{display:none!important}

/* Hero: echte teamfoto (vierkant uitgesneden) */
@media (min-width:961px){
  .hero-beeld{padding-bottom:0;display:grid}
  .hero-beeld img.hero-foto{aspect-ratio:4/3;width:100%;object-position:60% top}
  .hero-form{position:relative;margin-top:-24%;width:min(400px,80%)}
}

/* Projectenpagina: teamfoto als achtergrond, zoals bij de projectpagina's */
.projecten-hero .knoppen{flex-wrap:wrap}
@media (max-width:960px){.project-hero:not(.projecten-hero){background-image:var(--hero-m)!important}}
@media (max-width:960px){
  .projecten-hero{background-image:linear-gradient(180deg,rgba(20,21,22,0) 50%,var(--antraciet-diep) 92%),url('../img/team-ons-werk-mobiel.webp')!important;background-size:100% 124vw,100% auto;background-position:center top!important}
  .projecten-hero .project-hero-grid{margin-top:62vw}
}

/* Hero-foto in <picture>: op desktop gewoon tonen, op mobiel verbergen (daar staat de foto als achtergrond) */
.hero-beeld picture{display:contents}
@media (max-width:960px){.hero-beeld > picture{display:none}}

/* Liggende foto in de kop: op mobiel de hele foto bovenaan, tekst eronder (zoals Projecten) */
@media (max-width:960px){
  .project-hero.hero-liggend{background-image:linear-gradient(180deg,rgba(20,21,22,0) 50%,var(--antraciet-diep) 92%),var(--hero-m)!important;background-size:100% calc(100vw * var(--ratio) + 1px),100% auto;background-position:center top!important}
  .project-hero.hero-liggend .project-hero-grid{margin-top:calc(100vw * var(--ratio) - 90px)}
}

/* Instagram-profiel op de blogpagina */
.insta-kader{max-width:720px;margin-inline:auto;background:var(--wit);border:1px solid var(--lijn)}
.insta-kader iframe{display:block;width:100%;height:calc(170px + min(100vw - 48px, 720px) * 0.67);border:0}
.insta-link{text-align:center;margin-top:24px}

/* Blog: vier artikelen in twee kolommen */
@media (min-width:601px){.raster-blog{grid-template-columns:1fr 1fr}}
.raster-blog .kaart img.foto{aspect-ratio:3/2}

/* Instagram-posts als schuivende strook (zelfde beweging als de reviews) */
.insta-band{margin-top:8px}
.insta-band .reviews-spoor{animation-duration:55s}
.insta-band .reviews-set{gap:16px;padding-right:16px}
.insta-post{position:relative;display:block;flex:0 0 240px;width:240px;aspect-ratio:4/5;overflow:hidden;background:var(--steen);color:#fff;text-decoration:none}
.insta-post img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.insta-post:hover img,.insta-post:focus-visible img{transform:scale(1.04)}
.insta-tekst{position:absolute;left:0;right:0;bottom:0;padding:40px 14px 12px;font-size:.92rem;line-height:1.3;background:linear-gradient(180deg,rgba(20,21,22,0),rgba(20,21,22,.82))}
@media (max-width:600px){.insta-post{flex-basis:200px;width:200px}}
.insta-band + .insta-link{margin-top:36px}

/* Header: bel- en WhatsApp-knop in dezelfde stijl als Gratis offerte */
.kop-acties{gap:10px}
.kop-contact svg{width:18px;height:18px;flex:0 0 18px}
.kop-in{gap:20px}
.kop-contact{padding-inline:1.05em!important}
@media (max-width:1250px){.kop-contact{padding-inline:.95em!important}.kop-contact span{display:none}}
@media (max-width:760px){.kop-contact{display:none!important}}

/* Plaatspagina's: link naar project in de hero */
.hero-punten li.hero-link::before{display:none}
.hero-punten li.hero-link{padding-top:8px;border-top:1px solid rgba(255,255,255,.18)}
.hero-punten li.hero-link a{color:var(--goud);text-decoration:none;font-weight:500}
.hero-punten li.hero-link a:hover{text-decoration:underline}

/* grotere hero-foto op laptop/desktop, foto loopt door tot de rechterrand */
@media (min-width:961px){
  .hero{overflow-x:clip;padding-top:clamp(36px,4vw,56px)}
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(36px,4vw,56px);align-items:start}
  .hero-tekst{padding-top:clamp(28px,3.4vw,56px)}
  .hero-beeld{--uitloop:max(24px,calc((100vw - var(--max)) / 2 + 24px))}
  .hero-beeld img.hero-foto{aspect-ratio:auto;height:clamp(440px,40vw,600px);width:calc(100% + var(--uitloop));max-width:none;object-position:62% 22%}
  .hero-form{margin-top:clamp(-210px,-15vw,-150px);width:min(410px,82%)}
}

/* Hamburgermenu: strak en overzichtelijk */
@media (max-width:1080px){
  .menu-paneel{display:grid;grid-template-columns:1fr 1fr;gap:8px 48px;padding:22px 24px 26px;box-shadow:0 18px 30px -18px rgba(20,21,22,.35)}
  .menu-paneel .menu-groep{display:flex;flex-direction:column;min-width:0}
  .menu-paneel .menu-kop{margin:0 0 6px;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--goud-tekst);font-weight:500}
  .menu-paneel .menu-groep a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:.62em 0;border:0;font-size:1.08rem;color:var(--antraciet);text-decoration:none}
  .menu-paneel .menu-groep a::after{content:"";width:7px;height:7px;border-right:1.5px solid var(--lijn-donker,#B9B6AE);border-top:1.5px solid var(--lijn-donker,#B9B6AE);transform:rotate(45deg);flex:0 0 auto}
  .menu-paneel .menu-groep a:hover,.menu-paneel .menu-groep a[aria-current="page"]{color:var(--goud-tekst)}
  .menu-paneel .menu-groep a[aria-current="page"]::after{border-color:var(--goud)}
  .menu-paneel .menu-contact{grid-column:1/-1;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:10px;margin-top:14px;padding-top:20px;border-top:1px solid var(--lijn)}
  .menu-paneel .menu-contact .btn{display:flex;padding:.9em 1em;border-bottom-width:1.5px;font-size:.98rem}
  .menu-paneel .menu-contact .btn-donker{color:#fff}
}
@media (max-width:760px){
  .menu-paneel{grid-template-columns:1fr;gap:18px;padding:18px 24px 24px;max-height:calc(100dvh - 70px - 64px)}
  .menu-paneel .menu-groep + .menu-groep{padding-top:16px;border-top:1px solid var(--lijn)}
  .menu-paneel .menu-contact{display:none}
}

/* Instagram: alle posts in een raster, in een oogopslag zichtbaar */
.insta-raster{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:8px}
.insta-raster .insta-post{width:auto;flex:none}
.insta-raster .insta-tekst{font-size:.82rem;padding:32px 10px 10px}
@media (max-width:960px){.insta-raster{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.insta-raster{gap:4px;margin-inline:-12px}.insta-raster .insta-tekst{display:none}}
.insta-raster + .insta-link{max-width:none;margin-top:32px}

/* Instagram: officiele profiel-embed van Instagram */
.insta-embed{display:flex;justify-content:center}
.insta-embed .instagram-media{background:var(--wit)!important;border:1px solid var(--lijn)!important;border-radius:0!important;box-shadow:none!important;margin:0 auto!important;max-width:540px!important;min-width:280px!important;width:100%!important;padding:28px!important;text-align:center}
.insta-embed iframe.instagram-media{padding:0!important}
@media (min-width:961px){.raster-blog{grid-template-columns:repeat(3,1fr)}}
.insta-embed{max-width:640px;margin-inline:auto;background:var(--wit);border:1px solid var(--lijn)}
.insta-embed iframe{display:block;width:100%;height:calc(300px + min(100vw - 48px, 640px) * 0.667);border:0;background:var(--wit)}
.insta-embed + .insta-link{max-width:none;margin-top:28px}

/* ===== cookiebalk ===== */
.cookiebalk{position:fixed;left:16px;right:16px;bottom:16px;z-index:200;max-width:980px;margin:0 auto;background:var(--wit);color:var(--antraciet);border:1px solid var(--lijn);border-top:3px solid var(--goud);box-shadow:0 24px 60px -20px rgba(31,32,33,.35);transform:translateY(130%);opacity:0;transition:transform .35s ease,opacity .35s ease}
.cookiebalk.open{transform:none;opacity:1}
.cb-in{display:flex;gap:28px;align-items:center;padding:22px 26px}
.cb-tekst{flex:1;font-size:.93rem;line-height:1.55;color:var(--tekst-zacht)}
.cb-tekst p{margin:0}
.cb-kop{font-family:var(--display);font-size:1.25rem;color:var(--antraciet);margin:0 0 4px!important}
.cb-tekst a{color:var(--goud-tekst)}
.cb-opties{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px}
.cb-opties[hidden]{display:none}
.cb-opties label{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--antraciet);cursor:pointer}
.cb-opties small{color:var(--tekst-zacht);font-size:.78rem}
.cb-opties input{accent-color:var(--antraciet);width:16px;height:16px}
.cb-knoppen{display:flex;flex-direction:column;gap:8px;flex:none;min-width:200px}
.cookiebalk .btn{display:inline-flex;width:100%;margin:0;padding:.8em 1.2em;font-size:.95rem}
.cookiebalk .btn-donker{background:var(--antraciet);color:#fff}
.cookiebalk .cb-rand{border-color:var(--antraciet);color:var(--antraciet);background:transparent}
.cb-link{background:none;border:0;font:inherit;font-size:.85rem;color:var(--tekst-zacht);text-decoration:underline;cursor:pointer;padding:4px}
@media (max-width:760px){.cookiebalk{left:8px;right:8px;bottom:8px}.cb-in{flex-direction:column;align-items:stretch;gap:14px;padding:18px}.cb-knoppen{min-width:0}}