/* OBBE website v2 – huisstijl: Inkt #141414, Gebroken wit #F3F0E8, Z4 #2E5A4C (enkel op licht / als vlak), Z3 #7FA597 (enkel op inkt). Barlow. */
@font-face{font-family:Barlow;font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/barlow-regular.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:500;font-style:normal;font-display:swap;src:url(/assets/fonts/barlow-medium.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:600;font-style:normal;font-display:swap;src:url(/assets/fonts/barlow-semibold.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:700;font-style:normal;font-display:swap;src:url(/assets/fonts/barlow-bold.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:800;font-style:normal;font-display:swap;src:url(/assets/fonts/barlow-extrabold.woff2) format("woff2")}

:root{
  --ink:#141414;--wit:#F3F0E8;--z4:#2E5A4C;--z3:#7FA597;--antr:#4A4946;--grijs:#9A968D;
  --line:rgba(20,20,20,.16);--line-d:rgba(243,240,232,.18);
  --wrap:1240px;--pad:clamp(20px,4vw,48px);
  --band:clamp(64px,8vw,120px);
  --r:4px;
  --hdr:98px;
  --f:Barlow,Arial,Helvetica,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 16px)}
body{margin:0;background:var(--wit);color:var(--ink);font-family:var(--f);font-size:18px;line-height:1.55;font-weight:400;overflow-x:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.15}
ul,ol{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--z4);outline-offset:3px;border-radius:2px}
.band--ink :focus-visible,.ftr :focus-visible{outline-color:var(--z3)}
.band--z4 :focus-visible{outline-color:var(--wit)}
main:focus{outline:none}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-100px;z-index:100;background:var(--ink);color:var(--wit);padding:12px 18px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.wrap{max-width:calc(var(--wrap) + 2*var(--pad));margin:0 auto;padding:0 var(--pad)}

/* placeholders: duidelijk zichtbaar, maar binnen de huisstijl */
.ph{background:rgba(154,150,141,.22);border-bottom:1px dashed currentColor;box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:0 .15em}
.band--ink .ph,.ftr .ph{background:rgba(243,240,232,.10)}
.band--z4 .ph{background:rgba(243,240,232,.14)}

/* ---------- type (huisstijl T1–T3, tagline, caption) */
.h1{font-weight:800;text-transform:uppercase;letter-spacing:.005em;font-size:clamp(34px,4.3vw,60px);line-height:1.04;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.h1--sm{font-size:clamp(32px,3.6vw,48px)}
.h2{font-weight:700;font-size:clamp(26px,2.4vw,34px);line-height:1.15;overflow-wrap:break-word}
.h3{font-weight:600;font-size:clamp(20px,1.6vw,22px);line-height:1.25}
.h4{font-weight:700;font-size:18px;line-height:1.3}
.lead{font-size:clamp(18px,1.4vw,20px);line-height:1.5;max-width:40em;margin-top:18px}
.body{max-width:38em}
.lbl{display:flex;align-items:center;gap:12px;margin:0 0 16px;font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--z4)}
.lbl::before{content:"";width:28px;height:2px;background:currentColor;flex:none}
.band--ink .lbl{color:var(--z3)}
.band--z4 .lbl{color:var(--wit)}
.shead{max-width:760px;margin-bottom:clamp(32px,4vw,56px)}
.shead--wide{max-width:900px}
.shead .lead{color:var(--antr)}
.band--ink .shead .lead,.band--ink .body,.band--ink p{color:rgba(243,240,232,.82)}
.band--z4 .lead,.band--z4 p{color:rgba(243,240,232,.9)}

/* ---------- bands */
.band{padding:var(--band) 0}
.band--tight{padding:clamp(48px,5vw,72px) 0}
.band--flush{padding-top:0}
.band--top{padding-top:clamp(40px,5vw,80px)}
.band--top0{padding-top:8px}
.band--line{border-top:1px solid var(--line)}
.band--wit{background:var(--wit);color:var(--ink)}
.band--ink{background:var(--ink);color:var(--wit)}
.band--z4{background:var(--z4);color:var(--wit)}
.band--anchors{padding:0;position:sticky;top:var(--hdr);z-index:20;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ---------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;border-radius:var(--r);border:2px solid transparent;font-weight:600;font-size:17px;line-height:1.1;text-decoration:none;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s;white-space:nowrap}
.btn svg{width:18px;height:18px;flex:none}
.btn--lg{min-height:54px;padding:14px 26px;font-size:18px}
.btn--z4{background:var(--z4);color:var(--wit)}
.btn--z4:hover{background:#244a3e}
.btn--z3{background:var(--z3);color:var(--ink)}
.btn--z3:hover{background:#93b5a8}
.btn--wit{background:var(--wit);color:var(--ink)}
.btn--wit:hover{background:#fff}
.btn--ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn--ghost:hover{background:var(--ink);color:var(--wit)}
.btn--ghost-dark{border-color:rgba(243,240,232,.5);color:var(--wit);background:transparent}
.btn--ghost-dark:hover{border-color:var(--wit)}
.btnrow{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btnrow:empty{display:none}
.tlink{display:inline-flex;align-items:center;gap:10px;font-weight:600;text-decoration:none;margin:0}
.tlink svg{width:18px;height:18px;color:var(--z4)}
.tlink:hover{text-decoration:underline}
.badge{display:inline-flex;align-items:center;gap:10px;margin:28px 0 0;padding:8px 14px 8px 10px;border:1.5px solid var(--z4);border-radius:var(--r);color:var(--z4);font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.badge svg{width:18px;height:18px}
.badge--dark{border-color:var(--z3);color:var(--z3)}

/* ---------- header */
.hdr{position:sticky;top:0;z-index:50;background:var(--wit);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.hdr.is-scrolled{border-bottom-color:var(--line);box-shadow:0 6px 18px -14px rgba(20,20,20,.5)}
.hdr__in{display:flex;align-items:center;gap:28px;min-height:var(--hdr);padding-top:14px;padding-bottom:14px}
.hdr__logo{flex:none;display:block}
.hdr__logo img{width:160px;height:auto}
.nav{flex:1;display:flex;justify-content:center}
.nav__list{display:flex;gap:4px}
.nav__list>li>a,.nav__list .nav__btn{display:block;padding:10px 12px;font-weight:600;font-size:17px;text-decoration:none;border-bottom:2px solid transparent}
.nav__list a:hover{color:var(--z4)}
.nav__list a[aria-current=page]{color:var(--z4);border-bottom-color:var(--z4)}
.nav__mob{display:none}
.hdr__act{display:flex;align-items:center;gap:18px;flex:none}
.hdr__tel{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;white-space:nowrap}
.hdr__tel svg{width:18px;height:18px;color:var(--z4)}
.hdr__tel:hover{text-decoration:underline}
.hdr__call,.hdr__burger{display:none}
@media (max-width:1320px){.hdr__tel span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)} .hdr__tel{width:44px;height:44px;justify-content:center;border:2px solid var(--line);border-radius:var(--r)}}
@media (max-width:1180px){
  :root{--hdr:92px}
  .hdr__in{gap:16px}
  .hdr__logo img{width:150px}
  .hdr__act{margin-left:auto;gap:10px}
  .hdr__tel{display:none}
  .hdr__call,.hdr__burger{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 14px;border-radius:var(--r);font-weight:600;font-size:16px;text-decoration:none;cursor:pointer}
  .hdr__call{background:var(--z4);color:var(--wit)}
  .hdr__burger{background:transparent;border:2px solid var(--ink)}
  .hdr__call svg,.hdr__burger svg{width:20px;height:20px}
  .nav{position:fixed;inset:var(--hdr) 0 auto 0;max-height:calc(100dvh - var(--hdr));overflow:auto;background:var(--wit);border-top:1px solid var(--line);box-shadow:0 20px 30px -20px rgba(20,20,20,.45);display:none;flex-direction:column;padding:12px var(--pad) 28px}
  .nav.is-open{display:flex}
  .nav__list{flex-direction:column;gap:0}
  .nav__list>li>a,.nav__list .nav__btn{font-size:20px;padding:14px 0;border-bottom:1px solid var(--line)}
  .nav__list a[aria-current=page]{border-bottom-color:var(--line)}
  .nav__mob{display:flex;flex-direction:column;gap:14px;margin-top:22px}
  .nav__mob .btn{align-self:flex-start}
  .nav__line{display:inline-flex;align-items:center;gap:10px;font-weight:600;text-decoration:none}
  .nav__line svg{width:18px;height:18px;color:var(--z4)}
}
@media (max-width:700px){.hdr__cta{display:none}}
@media (max-width:380px){.hdr__call span,.hdr__burger span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)} .hdr__call,.hdr__burger{width:46px;padding:0}}

/* ---------- media / placeholders */
.media{margin:0;position:relative;overflow:hidden;border-radius:var(--r);aspect-ratio:3/2;background:#2a2a28}
.media img{width:100%;height:100%;object-fit:cover}
.media--43{aspect-ratio:4/3}
.media--wide{aspect-ratio:16/9}
.media--ph{background:
  repeating-linear-gradient(135deg,rgba(154,150,141,.20) 0 1px,transparent 1px 14px),#E6E2D8;display:flex;align-items:center;justify-content:center;border:1px solid rgba(154,150,141,.5)}
.band--ink .media--ph{background:repeating-linear-gradient(135deg,rgba(243,240,232,.07) 0 1px,transparent 1px 14px),#24231F;border-color:rgba(243,240,232,.14)}
.media__ph{max-width:80%;text-align:center;font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--antr)}
.band--ink .media__ph{color:var(--grijs)}

/* ---------- home hero */
.hero{padding:clamp(40px,5vw,72px) 0 clamp(56px,6vw,96px)}
.hero__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero__txt .lead{color:var(--antr)}
.hero__media{display:grid;grid-template-columns:1fr .94fr;gap:14px;align-items:end}
.hero__a{aspect-ratio:4/5}
.hero__b{aspect-ratio:4/5;margin-bottom:-40px}
.phero{padding:clamp(40px,5vw,72px) 0 clamp(48px,6vw,88px)}
.phero__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.phero__txt .shead{margin-bottom:0}

/* troeven */
.troeven{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.troef{display:flex;gap:14px;padding:28px 24px 8px 0}
.troef+.troef{padding-left:24px;border-left:1px solid var(--line)}
.troef__ic{flex:none;width:30px;height:30px;border-radius:50%;background:var(--z4);color:var(--wit);display:grid;place-items:center}
.troef__ic svg{width:17px;height:17px}
.troef p{margin:4px 0 0;color:var(--antr);font-size:16px}

/* service cards */
.scards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.scard{display:flex;flex-direction:column;text-decoration:none;background:#1E1E1C;border:1px solid var(--line-d);border-radius:var(--r);overflow:hidden;transition:border-color .2s}
.scard:hover{border-color:var(--z3)}
.scard .media{border-radius:0}
.scard__body{padding:28px 28px 32px}
.scard__body p{margin:12px 0 20px}
.pcard__more{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--z4)}
.band--ink .pcard__more{color:var(--z3)}
.pcard__more svg{width:18px;height:18px;transition:transform .2s}
a:hover .pcard__more svg{transform:translateX(4px)}

/* split */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.split .shead{margin-bottom:24px}
.split--faq{align-items:start;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.split--card{background:transparent}

/* facts */
.facts{display:grid;grid-template-columns:1fr;margin:24px 0 0;border-top:1px solid var(--line)}
.facts div{display:grid;grid-template-columns:minmax(110px,.6fr) 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.facts dt{font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--antr);padding-top:3px}
.facts dd{margin:0;font-weight:600}
.facts--dark,.facts--dark div{border-color:var(--line-d)}
.facts--dark dt{color:var(--grijs)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px);counter-reset:s}
.steps--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.steps--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.steps li{border-top:3px solid var(--z4);padding-top:20px}
.step__n{display:block;font-weight:800;font-size:15px;letter-spacing:.1em;color:var(--z4);margin-bottom:10px}
.steps p{margin:8px 0 0;color:var(--antr)}
.timeline{display:grid;gap:0;border-top:1px solid var(--line)}
.timeline li{display:grid;grid-template-columns:90px 1fr;gap:24px;padding:28px 0;border-bottom:1px solid var(--line)}
.timeline .step__n{font-size:28px;margin:0;line-height:1}
.timeline p{margin:8px 0 0;color:var(--antr);max-width:40em}

/* arch band */
.archband{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.archband>div:first-child{max-width:760px}
.archband .btnrow{margin-top:0}

/* faq */
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q button{all:unset;box-sizing:border-box;width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-weight:600;font-size:clamp(18px,1.5vw,21px);line-height:1.3;cursor:pointer}
.faq__q button:focus-visible{outline:3px solid var(--z4);outline-offset:2px}
.faq__ic{flex:none;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;transition:transform .2s,background-color .2s}
.faq__ic svg{width:16px;height:16px}
.faq__q button[aria-expanded=true] .faq__ic{transform:rotate(45deg);background:var(--ink);color:var(--wit)}
.faq__a{padding:0 56px 22px 0;color:var(--antr)}
.faq__a p{margin:0}

/* anchors */
.anchors{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-top:6px;padding-bottom:6px}
.anchors::-webkit-scrollbar{display:none}
.anchors a{flex:none;padding:10px 14px;font-weight:600;font-size:15px;text-decoration:none;border-radius:var(--r)}
.anchors a:hover{background:rgba(46,90,76,.1);color:var(--z4)}

/* ticks + materials */
.ticks{display:grid;gap:12px;margin:20px 0 0}
.ticks li{display:flex;gap:12px;align-items:flex-start}
.ticks svg{flex:none;width:20px;height:20px;margin-top:3px;color:var(--z4)}
.band--ink .ticks svg{color:var(--z3)}
.ticks--lg li{font-size:20px}
.mats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.mat{padding:28px;border:1px solid rgba(243,240,232,.3);border-radius:var(--r)}
.mat p{margin:10px 0 0}
.mats--light .mat{border-color:var(--line);background:rgba(154,150,141,.08)}
.mats--light .mat p{color:var(--antr)}
.mats--dark .mat{border-color:var(--line-d);background:#1E1E1C}
.gallery3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.5vw,20px)}

/* project cards */
.pcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.5vw,36px)}
.pcard{display:flex;flex-direction:column;text-decoration:none}
.pcard .media{margin-bottom:16px}
.pcard__meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:15px;color:var(--antr);margin-bottom:6px}
.tag{font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--z4);border:1.5px solid var(--z4);border-radius:3px;padding:3px 8px}
.pcard__t{margin-bottom:12px}
.pcard:hover .pcard__t{text-decoration:underline;text-underline-offset:4px}

/* project detail */
.crumbs{padding-top:24px;padding-bottom:16px;font-size:15px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:8px}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--grijs)}
.crumbs a{color:var(--antr)}
.pdetail{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(32px,6vw,96px);padding-top:clamp(40px,5vw,72px)}
.pdetail__facts .facts{margin-top:12px}
.pdetail__body .h2{margin:0 0 14px}
.pdetail__body .body+.h2,.pdetail__body .body+.h3{margin-top:36px}
.nextp{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.nextp .lbl{margin-bottom:8px}
.nextp .h2{margin:0;color:var(--wit)!important}

/* cta band */
.cta__in{display:flex;align-items:flex-end;justify-content:space-between;gap:32px 48px;flex-wrap:wrap}
.cta__in>div:first-child{max-width:720px}
.cta__act{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.cta__tel{display:inline-flex;align-items:center;gap:10px;font-weight:600;text-decoration:none;color:var(--wit)}
.cta__tel svg{width:18px;height:18px}
.cta__tel:hover{text-decoration:underline}

/* footer */
.ftr{background:var(--ink);color:var(--wit);padding:clamp(56px,6vw,88px) 0 28px}
.ftr__grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr) minmax(0,.9fr);gap:40px}
.ftr__brand img{width:180px;margin-bottom:22px}
.ftr__brand p{color:rgba(243,240,232,.78);max-width:28em}
.ftr__h{font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--z3);margin-bottom:16px}
.ftr__list{display:grid;gap:10px}
.ftr__list a{text-decoration:none}
.ftr__list a:hover{text-decoration:underline;color:var(--z3)}
.ftr__contact li,.ftr__contact a{display:inline-flex;align-items:center;gap:10px}
.ftr__contact svg{width:18px;height:18px;color:var(--z3)}
.ftr__legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:56px;padding-top:24px;border-top:1px solid var(--line-d);font-size:15px;color:rgba(243,240,232,.7)}
.ftr__legal p{margin:0}

/* ---------- offerte layout */
.formwrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,80px);align-items:start}
.formwrap__intro .shead{margin-bottom:32px}
.formcard{background:var(--wit);color:var(--ink);border-radius:6px;padding:clamp(22px,3vw,44px)}
.formcard--light{border:1px solid var(--line);box-shadow:0 30px 60px -40px rgba(20,20,20,.45)}
.aside .h3{margin-bottom:18px}
.nsteps{display:grid;gap:18px}
.nsteps li{display:flex;gap:14px}
.nsteps__n{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:15px;background:var(--z4);color:var(--wit)}
.band--ink .nsteps__n{background:var(--z3);color:var(--ink)}
.nsteps p{margin:2px 0 0;font-size:16px;color:var(--antr)}
.band--ink .nsteps p{color:rgba(243,240,232,.78)}
.aside__contact{display:grid;gap:10px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.band--ink .aside__contact{border-color:var(--line-d)}
.band--ink .tlink svg{color:var(--z3)}
.aside .badge{margin-top:28px}
.band--ink .aside .badge{border-color:var(--z3);color:var(--z3)}
.shead--form .lead{color:var(--antr)}

/* ---------- formulier */
.of{position:relative}
.prog{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 28px}
.prog__bar{display:block;height:5px;border-radius:3px;background:rgba(154,150,141,.35);overflow:hidden;position:relative}
.prog__bar::after{content:"";position:absolute;inset:0;background:var(--z4);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.prog__seg.is-done .prog__bar::after,.prog__seg.is-cur .prog__bar::after{transform:scaleX(1)}
.prog__lbl{display:block;margin-top:8px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--grijs)}
.prog__seg.is-cur .prog__lbl,.prog__seg.is-done .prog__lbl{color:var(--ink)}
.prog__n{display:none}
.of__step{border:0;margin:0;padding:0;min-width:0}
.js .of__step:not(.is-active){display:none}
.no-js .prog{display:none}
.of__title{display:block;padding:0;margin:0 0 24px;font-weight:700;font-size:clamp(24px,2.2vw,30px);line-height:1.15}
.of__title:focus{outline:none}
.of__count{display:block;font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--z4);margin-bottom:6px}
.fgrp{border:0;margin:0 0 26px;padding:0;min-width:0}
.flbl{display:block;padding:0;font-weight:600;font-size:17px;margin:0 0 10px}
.fhint{font-size:15px;color:var(--antr);margin:-4px 0 12px}
.fhint a,.of a{color:var(--z4);font-weight:600}
.fhint--mail{margin:12px 0 0}
.opt{font-weight:400;color:var(--antr);font-size:15px}
.req{color:var(--z4);font-weight:700}

/* keuzekaarten (echte checkboxen) */
.tcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tcard{position:relative;display:block;cursor:pointer}
.tcard input,.chip input,.check input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.tcard__box{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px;height:100%;padding:18px 16px 16px;border:1.5px solid rgba(20,20,20,.28);border-radius:var(--r);background:#FAF8F3;transition:border-color .15s,background-color .15s,box-shadow .15s}
.tcard__ic{width:40px;height:40px;color:var(--antr)}
.tcard__t{font-weight:600;font-size:17px;line-height:1.2}
.tcard__ck{position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(20,20,20,.35);display:grid;place-items:center;color:transparent;background:#fff}
.tcard__ck svg{width:14px;height:14px}
.tcard:hover .tcard__box{border-color:var(--ink)}
.tcard input:checked+.tcard__box{border-color:var(--z4);background:rgba(46,90,76,.08);box-shadow:inset 0 0 0 1px var(--z4)}
.tcard input:checked+.tcard__box .tcard__ic{color:var(--z4)}
.tcard input:checked+.tcard__box .tcard__ck{background:var(--z4);border-color:var(--z4);color:var(--wit)}
.tcard input:focus-visible+.tcard__box{outline:3px solid var(--z4);outline-offset:3px}

/* chips (echte radio's) */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{position:relative;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:44px;padding:9px 16px;border:1.5px solid rgba(20,20,20,.28);border-radius:999px;background:#FAF8F3;font-weight:500;font-size:16px;line-height:1.2;transition:border-color .15s,background-color .15s,color .15s}
.chip:hover span{border-color:var(--ink)}
.chip input:checked+span{background:var(--z4);border-color:var(--z4);color:var(--wit)}
.chip input:checked+span .ph{background:rgba(243,240,232,.2)}
.chip input:focus-visible+span{outline:3px solid var(--z4);outline-offset:3px}

/* checkbox */
.check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;position:relative;font-size:16px;line-height:1.45}
.check__box{flex:none;width:24px;height:24px;margin-top:0;border:1.5px solid rgba(20,20,20,.45);border-radius:4px;background:#fff;display:grid;place-items:center;color:transparent;transition:background-color .15s}
.check__box svg{width:16px;height:16px}
.check input:checked+.check__box{background:var(--z4);border-color:var(--z4);color:var(--wit)}
.check input:focus-visible+.check__box{outline:3px solid var(--z4);outline-offset:3px}

/* velden */
.frow{display:flex;flex-wrap:wrap;gap:16px}
.fld{display:flex;flex-direction:column;gap:6px;margin-bottom:18px;min-width:0}
.frow .fld{margin-bottom:0}
.frow{margin-bottom:22px}
.fld--full{flex:1 1 100%}
.fld--half{flex:1 1 220px}
.fld--pc{flex:0 0 140px}
.fld--grow{flex:1 1 200px}
.fld>label{font-weight:600;font-size:16px}
.fld .fhint{margin:0 0 4px}
.inp{width:100%;min-height:50px;padding:12px 14px;border:1.5px solid rgba(20,20,20,.35);border-radius:var(--r);background:#fff;font-size:17px;transition:border-color .15s,box-shadow .15s}
textarea.inp{min-height:120px;resize:vertical;line-height:1.45}
.inp:hover{border-color:var(--ink)}
.inp:focus{outline:none;border-color:var(--z4);box-shadow:0 0 0 3px rgba(46,90,76,.28)}
.inp[aria-invalid=true]{border-color:#A3261B;box-shadow:0 0 0 1px #A3261B}
.ferr{display:flex;gap:8px;align-items:flex-start;margin:8px 0 0;font-size:15px;font-weight:600;color:#A3261B}
.ferr::before{content:"!";flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;background:#A3261B;color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center}
.fgrp.is-invalid .tcard__box,.fgrp.is-invalid .check__box{border-color:#A3261B}
.of__alert{margin:0 0 20px;padding:14px 16px;border-left:4px solid #A3261B;background:rgba(163,38,27,.07);font-weight:600;font-size:16px}

/* upload */
.drop{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:26px 18px;border:2px dashed rgba(20,20,20,.35);border-radius:6px;background:#FAF8F3;transition:border-color .15s,background-color .15s}
.drop.is-over{border-color:var(--z4);background:rgba(46,90,76,.08)}
.drop:focus-within{border-color:var(--z4);box-shadow:0 0 0 3px rgba(46,90,76,.28)}
.drop__inp{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.drop__ic{width:40px;height:40px;border-radius:50%;background:var(--z4);color:var(--wit);display:grid;place-items:center}
.drop__ic svg{width:20px;height:20px}
.drop__t{font-size:16px}
.drop__btn{font-weight:700;color:var(--z4);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.drop__h{font-size:14px;color:var(--antr)}
.files{display:grid;gap:8px;margin-top:10px}
.files:empty{display:none}
.files li{display:flex;align-items:center;gap:12px;padding:8px 10px 8px 12px;border:1px solid var(--line);border-radius:var(--r);background:#fff;font-size:15px}
.files .f__n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.files .f__s{color:var(--antr);flex:none}
.files button{flex:none;border:0;background:transparent;color:var(--z4);font-weight:600;font-size:15px;cursor:pointer;text-decoration:underline;padding:6px}
.files .f__th{flex:none;width:36px;height:36px;border-radius:3px;object-fit:cover;background:#E6E2D8;display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--antr)}

/* nav + reassurance */
.of__nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.reassure{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:14px 0 0;font-size:14px;color:var(--antr);text-align:right}
.reassure svg{width:16px;height:16px;color:var(--z4);flex:none}

/* review */
.review{display:grid;gap:14px;margin-bottom:24px}
.rv{border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;background:#FAF8F3}
.rv__h{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}
.rv__h h3{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--z4);margin:0}
.rv__h button{border:0;background:none;padding:6px 0;color:var(--z4);font-weight:600;font-size:15px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.rv dl{margin:0;display:grid;gap:6px}
.rv dl div{display:grid;grid-template-columns:150px 1fr;gap:12px;font-size:16px}
.rv dt{color:var(--antr)}
.rv dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.of.is-sending [data-submit]{opacity:.7;pointer-events:none}

/* thanks / 404 / privacy */
.thanks{max-width:820px}
.thanks__ic{width:56px;height:56px;border-radius:50%;background:var(--z4);color:var(--wit);display:grid;place-items:center;margin-bottom:24px}
.thanks__ic svg{width:28px;height:28px}
.thanks .lead{color:var(--antr)}
.thanks__next{margin-top:36px;padding:24px 26px;border-left:4px solid var(--z4);background:rgba(46,90,76,.07)}
.thanks__next p{margin:8px 0 0}
.thanks__grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px}
.thanks__grid .h4{margin-bottom:6px}
.thanks__grid p{margin:0}
.linklist{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;margin-top:28px;border-top:1px solid var(--line)}
.linklist a{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);font-weight:600;text-decoration:none}
.linklist svg{width:18px;height:18px;color:var(--z4)}
.linklist a:hover{color:var(--z4)}
.prose{max-width:760px}
.prose .h3{margin:36px 0 10px}
.prose p{color:var(--antr)}
.prose a{color:var(--z4);font-weight:600}

/* ---------- responsive */
@media (max-width:1100px){
  .tcards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .troeven{grid-template-columns:repeat(2,minmax(0,1fr))}
  .troef:nth-child(3){padding-left:0;border-left:0}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
  .pcards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .formwrap{grid-template-columns:1fr}
  .formwrap__intro .aside{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
  .formwrap__intro .aside>.h3{grid-column:1/-1}
  .formwrap__intro .aside .aside__contact{margin-top:0;padding-top:0;border-top:0}
  .formwrap__intro .aside .badge{grid-column:1/-1}
}
@media (max-width:900px){
  .hero__in,.phero__in,.split,.split--faq,.pdetail{grid-template-columns:1fr}
  .split--rev>.media{order:2}
  .hero__media{max-width:640px}
  .scards,.mats{grid-template-columns:1fr}
  .gallery3{grid-template-columns:1fr 1fr}
  .gallery3>:first-child{grid-column:1/-1}
  .ftr__grid{grid-template-columns:1fr 1fr}
  .ftr__brand{grid-column:1/-1}
}
@media (max-width:640px){
  body{font-size:17px}
  .troeven{grid-template-columns:1fr}
  .troef,.troef+.troef{padding:18px 0;border-left:0}
  .troef+.troef{border-top:1px solid var(--line)}
  .steps,.steps--2,.steps--3,.pcards{grid-template-columns:1fr}
  .hero__media{grid-template-columns:1fr .94fr;gap:10px}
  .hero__b{margin-bottom:-24px}
  .timeline li{grid-template-columns:52px 1fr;gap:14px}
  .timeline .step__n{font-size:22px}
  .formwrap__intro .aside{display:block}
  .formwrap__intro .aside .aside__contact{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
  .band--ink .formwrap__intro .aside .aside__contact{border-top-color:var(--line-d)}
  .formcard{margin:0 calc(-1 * var(--pad) + 8px);padding:22px 16px}
  .tcards{gap:10px}
  .tcard__box{padding:14px 12px}
  .tcard__ic{width:34px;height:34px}
  .tcard__t{font-size:16px}
  .prog__lbl{font-size:0}
  .prog__seg.is-cur .prog__lbl{font-size:12px}
  .of__nav .btn--lg{padding:12px 18px;font-size:17px}
  .reassure{justify-content:flex-start;text-align:left}
  .rv dl div{grid-template-columns:1fr;gap:0}
  .rv dl div+div{margin-top:6px}
  .ftr__grid{grid-template-columns:1fr}
  .facts div{grid-template-columns:1fr;gap:2px}
  .thanks__grid,.linklist{grid-template-columns:1fr}
  .faq__a{padding-right:0}
  .cta__act{width:100%}
  .btnrow .btn{flex:1 1 auto}
  .gallery3{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}
/* formulierkaart op donkere band: kleuren terugzetten naar licht */
.band--ink .formcard p{color:var(--ink)}
.band--ink .formcard .fhint,.band--ink .formcard .reassure,.band--ink .formcard .drop__h{color:var(--antr)}
.band--ink .formcard .ferr{color:#A3261B}
.band--ink .formcard :focus-visible{outline-color:var(--z4)}
.band--ink .formcard .ph{background:rgba(154,150,141,.22)}

/* ---------- v2: foto's, galerij, lightbox, voor/na, filters */
.media picture{display:contents}
.media--34{aspect-ratio:3/4}
.media--45{aspect-ratio:4/5}
.media figcaption{position:absolute;left:12px;bottom:12px;background:var(--ink);color:var(--wit);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:2px}
.media--ph figcaption{position:absolute}
.scard__img{aspect-ratio:16/10}
.shead-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:8px}
.shead-row .shead{margin-bottom:0}
.shead-row+.pcards{margin-top:40px}
.pcards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mats--top{margin-top:48px}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:8px}
.gallery--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.gallery--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.gallery--stack{grid-template-columns:1fr;gap:12px}
.gallery--stack .media{aspect-ratio:16/9}
.gal__a{display:block;position:relative;border-radius:var(--r);text-decoration:none}
.gal__a .media{transition:transform .35s ease}
.gal__a:hover .media img{transform:scale(1.03)}
.gal__a .media img{transition:transform .5s ease}
.gal__a::after{content:"";position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:2px;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3F0E8' stroke-width='2'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center/18px no-repeat;opacity:.9}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.note{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:40px;padding:24px 28px;border:1px solid var(--line);border-left:4px solid var(--z4);border-radius:var(--r)}
.note p{margin:4px 0 0;color:var(--antr)}
.note--dark{border-color:var(--line-d);border-left-color:var(--z3)}
.note--dark p{color:var(--grijs)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:980px}
.vn{margin-top:8px}
.split--ba{align-items:start;grid-template-columns:1.25fr 1fr}
.phero__in--proj{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(24px,4vw,64px);align-items:center}
/* voor/na-slider */
.ba{max-width:720px}
.ba__fig{position:relative;margin:0;aspect-ratio:3/4;overflow:hidden;border-radius:var(--r);background:#2a2a28;--pos:50%;touch-action:pan-y}
.ba__na,.ba__voor{position:absolute;inset:0}
.ba__na img,.ba__voor img{width:100%;height:100%;object-fit:cover}
.ba__na picture,.ba__voor picture{display:contents}
.ba__voor{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba__line{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:var(--wit);pointer-events:none}
.ba__knob{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:var(--wit);color:var(--ink);display:grid;place-items:center;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.ba__knob svg{width:22px;height:22px}
.ba__tag{position:absolute;top:12px;background:var(--ink);color:var(--wit);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:2px;pointer-events:none}
.ba__tag--voor{left:12px}.ba__tag--na{right:12px}
.ba__range{display:block;width:100%;margin:14px 0 0;accent-color:var(--z4);height:28px;cursor:ew-resize}
.band--ink .ba__range{accent-color:var(--z3)}
.ba__hint{font-size:14px;color:var(--antr);margin:6px 0 0}
.ba__fig{cursor:ew-resize}
/* filters */
.fchips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.fchips[hidden]{display:none}
.fchip{border:2px solid var(--ink);background:transparent;border-radius:999px;padding:9px 18px;font-weight:600;font-size:16px;cursor:pointer;min-height:44px}
.fchip:hover{background:rgba(20,20,20,.06)}
.fchip[aria-pressed="true"]{background:var(--ink);color:var(--wit)}
.pcard[hidden]{display:none}
/* lightbox */
.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(20,20,20,.94);color:var(--wit)}
.lb::backdrop{background:rgba(20,20,20,.94)}
.lb__in{position:absolute;inset:0;display:grid;grid-template-columns:64px 1fr 64px;grid-template-rows:64px 1fr auto;align-items:center}
.lb__img{grid-column:2;grid-row:2;max-width:100%;max-height:calc(100vh - 140px);width:auto;height:auto;margin:auto;object-fit:contain}
.lb__cap{grid-column:2;grid-row:3;text-align:center;font-size:15px;color:var(--grijs);padding:10px 0 22px}
.lb button{background:transparent;border:2px solid var(--line-d);color:var(--wit);width:48px;height:48px;border-radius:50%;display:grid;place-items:center;cursor:pointer;margin:auto}
.lb button:hover{border-color:var(--wit)}
.lb button svg{width:22px;height:22px}
.lb__close{grid-column:3;grid-row:1}
.lb__prev{grid-column:1;grid-row:2}.lb__next{grid-column:3;grid-row:2}
.lb :focus-visible{outline-color:var(--z3)}
@media (max-width:1100px){.gallery--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .split--ba,.phero__in--proj{grid-template-columns:1fr}
  .pcards--2{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .pcards--2,.pair{grid-template-columns:1fr}
  .gallery,.gallery--4{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .lb__in{grid-template-columns:52px 1fr 52px}
  .note{padding:20px}
}
@media (prefers-reduced-motion:reduce){.gal__a .media img{transition:none}.gal__a:hover .media img{transform:none}}
.pcard__sub,.h2__sub{display:block;margin-top:4px;font-size:.62em;font-weight:600;letter-spacing:0;text-transform:none;opacity:.75}
.h1__sub{display:block;margin-top:8px;font-size:.42em;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--z4)}
.pcard__sub:empty,.h1__sub:empty,.h2__sub:empty{display:none}

/* ===== v2 – teksten-v2 (steering 4) ===== */
.nav__list{gap:0}
.nav__list>li>a,.nav__list .nav__btn{font-size:16px;padding:10px 9px}
.hdr__in{gap:20px}
@media (max-width:1500px){.hdr__tel span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)} .hdr__tel{width:44px;height:44px;justify-content:center;border:2px solid var(--line);border-radius:var(--r)}}
@media (max-width:1280px) and (min-width:1181px){.nav__list>li>a,.nav__list .nav__btn{font-size:15px;padding:10px 7px}.hdr__logo img{width:140px}}
/* CTA-band */
.cta__small{margin:0;font-size:15px}
.cta__small a{color:var(--wit);font-weight:600}
/* footer 4 kolommen */
.ftr__grid--4{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,.9fr))}
.ftr__brand p{margin:12px 0 0}
.ftr__brand p+p{margin-top:4px}
/* home */
.troef--1{align-items:center}
.troef--1 .h4{margin:0;color:var(--ink);font-size:17px}
.scards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.scards--3 .scard__img{aspect-ratio:4/3}
.steps--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.vnfig{margin:0}
.vnfig figcaption{margin-top:12px;font-size:15px;color:var(--antr)}
.band--ink .duo .media figcaption,.band--ink .trio .media figcaption{color:var(--grijs)}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:48px}
.duo--step{margin-top:18px;max-width:560px}
.note--sm{margin-top:32px}
/* formulier: profielkeuze */
.of__req{margin:0 0 16px;font-size:14px;color:var(--antr)}
.pchips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pchip{position:relative;cursor:pointer;display:block}
.pchip input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.pchip>span{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:54px;padding:12px 16px;border:1.5px solid rgba(20,20,20,.28);border-radius:var(--r);background:#FAF8F3;font-weight:600;font-size:16px;line-height:1.25}
.pchip:hover>span{border-color:var(--ink)}
.pchip input:checked+span{border-color:var(--z4);background:rgba(46,90,76,.08);box-shadow:inset 0 0 0 1px var(--z4)}
.pchip input:checked+span .tcard__ck{background:var(--z4);border-color:var(--z4);color:var(--wit)}
.pchip input:focus-visible+span{outline:3px solid var(--z4);outline-offset:3px}
.pchip .tcard__ck{position:static;flex:none}
.fhint--ind{margin:6px 0 0 40px}
.ticks--aside{margin:16px 0 0}
/* contact */
.cgrid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);align-items:stretch}
.cblock{padding:clamp(24px,3vw,40px);border:1px solid var(--line);border-radius:var(--r)}
.cblock--z4{background:var(--z4);color:var(--wit);border-color:var(--z4)}
.cblock--z4 p{color:rgba(243,240,232,.9)}
.clist{display:grid;gap:18px;margin:0 0 24px}
.tlink--lg{font-size:22px}
.tlink--lg svg{width:22px;height:22px}
/* mobiele contactbalk */
.mbar{display:none}
@media (max-width:760px){
  .mbar{display:grid;grid-template-columns:1fr 1.4fr;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--ink);padding:8px 10px calc(8px + env(safe-area-inset-bottom));gap:8px;box-shadow:0 -8px 20px -10px rgba(0,0,0,.5)}
  .mbar a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:var(--r);font-weight:700;font-size:16px;text-decoration:none}
  .mbar svg{width:18px;height:18px}
  .mbar__tel{border:1.5px solid var(--line-d);color:var(--wit)}
  .mbar__cta{background:var(--z4);color:var(--wit)}
  body{padding-bottom:72px}
}
@media (max-width:1100px){
  .steps--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr__grid--4{grid-template-columns:1fr 1fr 1fr}
  .ftr__grid--4 .ftr__brand{grid-column:1/-1}
}
@media (max-width:900px){
  .scards--3{grid-template-columns:1fr}
  .cgrid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .pchips{grid-template-columns:1fr}
  .steps--4{grid-template-columns:1fr}
  .trio{grid-template-columns:1fr 1fr}
  .trio>:first-child{grid-column:1/-1}
  .ftr__grid--4{grid-template-columns:1fr 1fr}
  .tlink--lg{font-size:19px}
}

/* contrast: stappen/waarden op zwart */
.band--ink .steps p{color:rgba(243,240,232,.78)}
[hidden]{display:none!important}
.is-invalid .pchip{border-color:#A3261B}
/* materialen (terrassen) */
.mats--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mat--foto{padding:0;overflow:hidden}
.mat--foto .media{border-radius:0;margin:0}
.mat--foto h3,.mat--foto p{padding:0 24px}
.mat--foto h3{margin-top:20px}
.mat--foto p{padding-bottom:24px}
@media (max-width:760px){.mats--2{grid-template-columns:1fr}}
.split--top{align-items:start}
.ticks + .body{margin-top:20px}

/* v2 – 26-10 avond */
.trio--step{margin-top:18px;max-width:760px}
.js [data-faq]:not(.is-ready) .faq__a{display:none}
.faqpage{display:grid;gap:clamp(40px,5vw,64px);max-width:860px}
.faqgrp>.h3{margin:0 0 14px}
.faq__item{scroll-margin-top:110px}
@media (min-width:1181px){.pcards--4{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}.pcards--4 .pcard__t{font-size:20px}}
.gallery--5{grid-template-columns:repeat(6,minmax(0,1fr))}
.gallery--5>li{grid-column:span 2}
.gallery--5>li:nth-child(n+4){grid-column:span 3}
@media (max-width:760px){.gallery--5{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery--5>li,.gallery--5>li:nth-child(n+4){grid-column:auto}.gallery--5>li:first-child{grid-column:1/-1}}

/* portretprojecten (staande foto's): hero 4:5, galerij met staande cellen */
.media--32{aspect-ratio:3/2}
.phero__in--portrait{grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr)}
.phero__in--portrait .media--hero{justify-self:end;width:100%;max-width:520px}
.pdetail__why{margin:32px 0 8px}
.gallery--portrait{grid-auto-flow:dense}
.gallery--portrait>li.is-wide{grid-column:span 2}
@media (max-width:900px){
  .phero__in--portrait{grid-template-columns:1fr}
  .phero__in--portrait .media--hero{justify-self:start;max-width:520px}
  .gallery--portrait>li:last-child{grid-column:1/-1}
}
/* galerijen met een oneven aantal in 2 kolommen: laatste foto over de volle breedte (geen halflege rij) */
@media (max-width:900px){
  .gallery:not(.gallery--5):not(.gallery--portrait):not(.gallery--4)>li:last-child:nth-child(odd){grid-column:1/-1}
}
@media (max-width:1100px){
  .gallery--4:not(.gallery--portrait)>li:last-child:nth-child(odd){grid-column:1/-1}
}
/* 5 kaarten (Terrassen): 3 + 2 */
@media (min-width:1181px){
  .pcards--5{grid-template-columns:repeat(6,minmax(0,1fr))}
  .pcards--5>.pcard{grid-column:span 2}
  .pcards--5>.pcard:nth-child(n+4){grid-column:span 3}
}
@media (max-width:1100px) and (min-width:641px){.pcards--5>.pcard:last-child{grid-column:1/-1}}
@media (min-width:901px){.gallery--portrait>li.is-wide>.gal__a,.gallery--portrait>li.is-wide .media{height:100%;aspect-ratio:auto}}
.hero__txt .h1{hyphens:manual;-webkit-hyphens:manual;text-wrap:balance}

/* Home-H1: maximaal drie regels. Bredere tekstkolom + iets kleinere schaal op desktop. */
.hero__in{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}
.hero__txt .h1{font-size:clamp(30px,3.7vw,54px);text-wrap:balance}
@media (max-width:1100px){.hero__in{grid-template-columns:1fr}.hero__txt .h1{font-size:clamp(30px,5.6vw,48px)}}
@media (max-width:480px){.hero__txt .h1{font-size:clamp(27px,8vw,34px)}}
.duo--basis{margin-top:48px;max-width:760px}
.gallery--p4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.gallery--p4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.gallery--portrait.gallery--p4>li:last-child{grid-column:auto}}

/* 3 staande foto's + 1 liggende (Ukkel): 3 kolommen, de liggende over de volle breedte */
.gallery--pw{grid-template-columns:repeat(3,minmax(0,1fr))}
.gallery--pw>li.is-wide{grid-column:1/-1}
.gallery--portrait.gallery--pw>li.is-wide>.gal__a,.gallery--portrait.gallery--pw>li.is-wide .media{height:auto;aspect-ratio:16/9}
@media (max-width:900px){
  .gallery--pw{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery--portrait.gallery--pw>li:last-child,.gallery--pw>li:nth-child(3){grid-column:1/-1}
  .gallery--portrait.gallery--pw>li:nth-child(3) .media{aspect-ratio:3/4}
}

/* ===== ronde TGW: terrassen / gevel / werkwijze ===== */
.mats--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mats--rows{grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
.mats--rows .mat{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.6fr);gap:32px;padding:28px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none}
.mats--rows .mat h3{margin:0}
.mats--rows .mat__txt p{margin:0 0 12px;color:var(--antr);max-width:46em}
.mats--rows .mat__txt p:last-child{margin-bottom:0}
.mats--rows .mat__txt strong{color:var(--ink)}
.mat--link{display:block;position:relative;text-decoration:none;color:inherit;padding-bottom:56px;transition:border-color .15s}
.mat--link:hover{border-color:var(--z4)}
.mat__go{position:absolute;right:24px;bottom:22px;color:var(--z4)}
.mat__go svg{width:22px;height:22px}
.mat__eg{margin:4px 0 0;font-size:14px;letter-spacing:.02em;color:var(--grijs)!important}
.smallfig{max-width:360px;width:100%;justify-self:end}
.ground-cta{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between;margin-top:36px}
.ground-cta .body{margin:0;max-width:38em}
.ground-cta .btnrow{margin:0}
.note--dark h3{color:var(--wit)}
.step__head{display:flex;align-items:center;gap:16px}
.step__head .h3{margin:0}
.step__ic{flex:none;width:52px;height:52px;color:var(--z4)}
.band--ink .step__ic{color:var(--z3)}
.kort{margin-top:40px;padding:24px 0 0;border-top:1px solid var(--line)}
.kort ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:12px 0 0}
.kort li{padding-left:16px;border-left:3px solid var(--z4);font-weight:600;line-height:1.35}
/* Project in de kijker (gevel): tekst links, foto's rechts; knop nooit over de foto */
.oli-feat{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:56px;align-items:center}
.oli-feat__txt .btnrow{margin-top:28px}
.oli-feat .pair{max-width:none}
@media (max-width:1000px){
  .mats--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .oli-feat{grid-template-columns:1fr;gap:36px}
  .kort ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .smallfig{justify-self:start}
}
@media (max-width:760px){
  .mats--3{grid-template-columns:1fr}
  .mats--rows .mat{grid-template-columns:1fr;gap:12px}
  .kort ul{grid-template-columns:1fr;gap:14px}
  .step__ic{width:44px;height:44px}
  .step__head{gap:12px}
  .oli-feat .pair{grid-template-columns:1fr 1fr;gap:10px}
}

/* ronde Ertvelde: aantal op de filterknoppen */
.fchip__n{margin-left:6px;font-weight:500;opacity:.7;font-variant-numeric:tabular-nums}
.fchip[aria-pressed="true"] .fchip__n{opacity:.85}

/* twee staande foto's: niet over de volle breedte uitrekken */
.gallery--duo{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}

#brandregels{margin-top:clamp(28px,3vw,44px);scroll-margin-top:96px}
@media (max-width:600px){.gallery--duo,.gallery--portrait.gallery--duo{grid-template-columns:1fr}.gallery--portrait.gallery--duo>li:last-child{grid-column:auto}}

/* ---------- ronde Tuinwanden (27-10-2026) */
/* Home: 4 diensten = 4 kolommen op breed scherm, 2×2 op middelgroot, 1 kolom op mobiel */
.scards--4{grid-template-columns:repeat(2,minmax(0,1fr))}
.scards--4 .scard__img{aspect-ratio:4/3}
@media (min-width:1201px){
  .scards--4{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,1.8vw,28px)}
  .scards--4 .scard__body{padding:22px 22px 26px}
  .scards--4 .scard__body .h3{font-size:clamp(20px,1.7vw,24px)}
  .scards--4 .scard__body p{font-size:16px}
}
@media (max-width:700px){.scards--4{grid-template-columns:1fr}}
.scards--4 .scard{height:100%}
/* offertekeuze met 5 werktypes: 3 + 2 (breed), 2 + 2 + 1 (smal) */
.tcards--5{grid-template-columns:repeat(6,minmax(0,1fr))}
.tcards--5 .tcard{grid-column:span 2}
.tcards--5 .tcard:nth-child(n+4){grid-column:span 3}
@media (max-width:1100px){
  .tcards--5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tcards--5 .tcard,.tcards--5 .tcard:nth-child(n+4){grid-column:auto}
  .tcards--5 .tcard:last-child{grid-column:1/-1}
}

/* /tuinwanden/ */
.pcards--solo{grid-template-columns:minmax(0,420px);margin-bottom:clamp(32px,4vw,56px)}
.matblok{align-items:start}
.matblok .smallfig{max-width:360px}
@media (max-width:900px){.pcards--solo{grid-template-columns:1fr}.matblok .smallfig{max-width:none}}
.mats--1{grid-template-columns:minmax(0,560px)}
@media (max-width:760px){.mats--1{grid-template-columns:1fr}}

/* 8 menu-items (met Tuinwanden): nooit afbreken, wat strakker in de breedte */
.nav__list>li>a,.nav__list .nav__btn{white-space:nowrap}
@media (min-width:1181px){
  .hdr__in{gap:20px}
  .nav__list{gap:0}
  .nav__list>li>a,.nav__list .nav__btn{padding:10px 9px;font-size:16px}
  .hdr__act{gap:12px}
}
@media (min-width:1181px) and (max-width:1300px){.hdr__logo img{width:140px}.nav__list>li>a,.nav__list .nav__btn{padding:10px 7px;font-size:15px}.hdr__act .btn{padding-left:16px;padding-right:16px}}
@media (min-width:1181px) and (max-width:1240px){.hdr__in{gap:12px}.nav__list>li>a,.nav__list .nav__btn{padding:10px 5px;font-size:15px}.hdr__logo img{width:130px}}
@media (max-width:900px){
  .gallery--portrait.gallery--pw5>li:nth-child(3){grid-column:auto}
  .gallery--portrait.gallery--pw5>li:nth-child(4){grid-column:1/-1}
  .gallery--portrait.gallery--pw5>li:nth-child(4) .media{aspect-ratio:4/5}
}
@media (max-width:900px){
  .gallery--portrait.gallery--pw5>li:nth-child(3){grid-column:auto}
  .gallery--portrait.gallery--pw5>li:nth-child(4){grid-column:1/-1}
  .gallery--portrait.gallery--pw5>li:nth-child(4) .media{aspect-ratio:4/5}
}

/* ---- Tuinwanden, ronde 27-10-2026 (tweede stuk) ---- */
.smallfig--tw{max-width:240px;justify-self:start;margin-top:32px}
.band--ink .smallfig--tw figcaption,#isolatie.band--ink .smallfig figcaption{background:var(--wit);color:var(--ink)}
/* materialen: Millboard (met foto) links, de drie andere materialen rechts onder elkaar */
.mats--tw{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:stretch;margin-top:clamp(28px,3vw,44px)}
.mats--tw .mat--tw-foto{grid-row:1/4;display:flex;flex-direction:column}
.mats--tw .mat--tw-foto .media{flex:1 1 auto;min-height:300px;aspect-ratio:auto}
.mats--tw .mat--tw-foto .media img{position:absolute;inset:0}
.mats--tw .mat--tw-foto .mat__txt{padding:0 0 4px}
.mats--tw .mat--tw-foto .mat__txt h3,.mats--tw .mat--tw-foto .mat__txt p{padding:0 24px}
.mats--tw .mat--tw-foto .mat__txt h3{margin-top:20px}
.mats--tw .mat--tw-foto .mat__txt p{padding-bottom:24px}
@media (max-width:900px){
  .mats--tw{grid-template-columns:1fr}
  .mats--tw .mat--tw-foto{grid-row:auto}
  .mats--tw .mat--tw-foto .media{flex:none;min-height:0;aspect-ratio:4/3}
}
.pcards__vraag{align-self:center;max-width:36em;margin:0}
.pcards--solo:has(.pcards__vraag){grid-template-columns:minmax(0,420px) minmax(0,1fr);align-items:center;gap:clamp(20px,3vw,48px)}
@media (max-width:900px){.pcards--solo:has(.pcards__vraag){grid-template-columns:1fr}}
/* galerij Temse (5 foto's: liggend + staand, staand + liggend + staand) */
.gallery--tw5,.gallery--tw2{grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;align-items:stretch}
.gallery--tw5>li,.gallery--tw2>li{display:block;position:relative;min-width:0}
.gallery--tw5 .gal__a,.gallery--tw2 .gal__a{display:block;height:100%}
.gallery--tw5 .media,.gallery--tw2 .media{height:100%;aspect-ratio:auto}
.gallery--tw5 .media img,.gallery--tw2 .media img{position:absolute;inset:0}
.gallery--tw5>li:nth-child(1){grid-column:span 8;aspect-ratio:4/3}
.gallery--tw5>li:nth-child(2){grid-column:span 4}
.gallery--tw5>li:nth-child(3){grid-column:span 3;aspect-ratio:3/5}
.gallery--tw5>li:nth-child(4){grid-column:span 6}
.gallery--tw5>li:nth-child(5){grid-column:span 3}
.gallery--tw2>li:nth-child(1){grid-column:span 4;aspect-ratio:1265/2000}
.gallery--tw2>li:nth-child(2){grid-column:span 8}
@media (max-width:900px){
  .gallery--tw5{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .gallery--tw5>li:nth-child(1),.gallery--tw5>li:nth-child(4){grid-column:1/-1;aspect-ratio:4/3}
  .gallery--tw5>li:nth-child(2),.gallery--tw5>li:nth-child(3){grid-column:auto;aspect-ratio:4/5}
  .gallery--tw5>li:nth-child(5){grid-column:1/-1;aspect-ratio:4/5;max-width:420px;justify-self:center;width:100%}
}
@media (max-width:760px){
  .gallery--tw2{grid-template-columns:1fr;gap:8px}
  .gallery--tw2>li:nth-child(1),.gallery--tw2>li:nth-child(2){grid-column:1/-1}
  .gallery--tw2>li:nth-child(1){aspect-ratio:4/5}
  .gallery--tw2>li:nth-child(2){aspect-ratio:3/2}
}

.soorten__slot{margin-top:28px;max-width:62ch}

/* Terrassen: blok 'Twee soorten' op eigen Z4-vlak, met ecru knoppen (Z4-tekst op ecru) */
.band--soort .mat--link{background:var(--wit);border:2px solid var(--wit);color:var(--z4);box-shadow:0 0 0 0 rgba(0,0,0,0);transition:background .15s,box-shadow .15s,transform .15s}
.band--soort .mat--link h3{color:var(--z4)}
.band--soort .mat--link p{color:var(--z4)}
.band--soort .mat__go{color:var(--z4);transition:transform .15s}
.band--soort .mat--link:hover{background:#fff;border-color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.28);transform:translateY(-2px)}
.band--soort .mat--link:hover .mat__go{transform:translateX(4px)}
.band--soort .mat--link:hover h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.band--soort .mat--link:focus-visible{outline:3px solid var(--wit);outline-offset:4px;box-shadow:0 0 0 7px var(--z4)}
@media (prefers-reduced-motion:reduce){.band--soort .mat--link,.band--soort .mat__go{transition:none}.band--soort .mat--link:hover{transform:none}}

/* ---- hoofdmenu: uitklapmenu 'Meer' (knop met aria-expanded; subpagina's) ---- */
.nav__list .nav__btn{display:inline-flex;align-items:center;gap:6px}
.nav__btn{background:none;border:0;border-bottom:2px solid transparent;border-radius:0;color:inherit;font-family:inherit;font-weight:600;cursor:pointer;line-height:inherit;white-space:nowrap}
.nav__btn:hover,.nav__more.is-open .nav__btn{color:var(--z4)}
.nav__btn.is-current{color:var(--z4);border-bottom-color:var(--z4)}
.nav__chev{width:16px;height:16px;flex:none;transition:transform .15s}
.nav__btn[aria-expanded=true] .nav__chev{transform:rotate(180deg)}
.nav__more{position:relative}
.nav__sub{margin:0;padding:6px 0;list-style:none}
.nav__sub a{display:block;padding:11px 18px;font-weight:600;font-size:16px;line-height:1.3;text-decoration:none;color:var(--ink);border-bottom:0;white-space:nowrap}
.nav__sub a:hover{color:var(--z4);background:rgba(46,90,76,.07)}
.nav__sub a[aria-current=page]{color:var(--z4);border-bottom:0;box-shadow:inset 3px 0 0 var(--z4)}
@media (min-width:1181px){
  .nav__sub{position:absolute;top:calc(100% + 4px);left:0;z-index:60;min-width:230px;background:var(--wit);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 14px 30px -14px rgba(20,20,20,.45)}
  /* zonder JS: uitklappen bij hover/focus; met JS: enkel via de knop */
  .nav__more:not([data-js]) .nav__sub{display:none}
  .nav__more:not([data-js]):hover .nav__sub,.nav__more:not([data-js]):focus-within .nav__sub{display:block}
  .nav__more[data-js] .nav__sub{display:none}
  .nav__more[data-js].is-open .nav__sub{display:block}
}
@media (max-width:1180px){
  .nav__list .nav__btn{display:flex;width:100%;justify-content:space-between;text-align:left;font-size:20px;padding:14px 0;border-bottom:1px solid var(--line)}
  .nav__btn.is-current{border-bottom-color:var(--line)}
  .nav__sub{padding:0 0 0 16px;border-bottom:1px solid var(--line)}
  .nav__sub a{font-size:18px;padding:12px 0;border-bottom:1px solid var(--line);white-space:normal}
  .nav__sub li:last-child a{border-bottom:0}
  .nav__sub a[aria-current=page]{box-shadow:none;padding-left:12px;box-shadow:inset 3px 0 0 var(--z4)}
  .nav__more[data-js] .nav__sub{display:none}
  .nav__more[data-js].is-open .nav__sub{display:block}
}

/* r20: nieuwsbrief (concept, post nergens naartoe) */
.nb{padding:clamp(40px,5vw,64px) 0}
.nb__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,4vw,64px);align-items:start}
.nb__txt .lbl{margin-bottom:10px}
.nb__txt .body{margin-top:10px;color:var(--antr)}
.nb__form fieldset{border:0;margin:0;padding:0;min-width:0}
.nb__row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.nb__fld{flex:1 1 260px;margin-bottom:0}
.nb__btn{flex:none}
.nb__toe{margin:14px 0 0;font-size:15px;line-height:1.45;color:var(--antr);max-width:38em}
.nb__toe a{color:var(--z4)}
.nb__ok{margin:0;padding:18px 20px;border:1px solid var(--line);border-left:4px solid var(--z4);border-radius:var(--r);font-weight:600}
.nb__concept{display:block;margin-top:6px;font-weight:400;font-size:15px;color:var(--antr)}
/* r20: artikels (concept) */
.pcard__x{color:var(--antr);margin:0 0 14px;max-width:34em}
.pcard--concept .pcard__t{text-decoration:none!important}
.art{max-width:960px}
.art__head{max-width:760px;margin-bottom:32px}
.art__meta{margin-top:14px;font-size:15px;color:var(--antr)}
.art__hero{margin:0 0 clamp(32px,4vw,48px)}
.art__body{max-width:720px}
.art__body .h2{margin:clamp(28px,3vw,40px) 0 12px}
.art__body .h2:first-child{margin-top:0}
.art__body .body+.body{margin-top:14px}
.art__body .ticks{margin-top:16px}
.art__fig{margin:28px 0 0}
.art__fig figcaption{position:static;display:block;margin-top:10px;padding:0;background:none;color:var(--antr);font-size:15px;font-weight:400;letter-spacing:0;text-transform:none}
.art__terug{margin-top:28px}
@media (max-width:900px){.nb__in{grid-template-columns:1fr}}
@media (max-width:480px){.nb__btn{width:100%}}
/* r22: plek van de Turnstile-controle in stap 4 */
.ts{margin-top:4px}
.ts__box{min-height:65px}
.ts__box--preview{display:flex;align-items:center;justify-content:center;width:300px;max-width:100%;height:65px;padding:8px 12px;border:1.5px dashed var(--grijs);border-radius:var(--r);font-size:14px;line-height:1.35;color:var(--antr);text-align:center}