/* ============================================================
   AJ STONES — recreatie van aj-stones.nl
   Design tokens 1-op-1 overgenomen uit het originele thema.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400..600;1,6..72,400&family=Archivo:wght@400;500;600;700&display=swap');

:root{
  --ink:#151713;
  --ink-soft:#565b53;
  --paper:#f6f1e8;
  --paper-deep:#e8dfd0;
  --header-surface:rgba(246,241,232,.94);
  --header-surface-solid:#f6f1e8;
  --tab-bg:#eee7dc;
  --tab-bg-hover:#e8dfd2;
  --white:#fff;
  --line:rgba(21,23,19,.14);
  --line-dark:rgba(255,255,255,.16);
  --green:#1d5c42;
  --green-dark:#123727;
  --bronze:#a77b4b;
  --clay:#c9ad8b;
  --gold:#e3c49b;
  --black-glass:rgba(21,23,19,.78);
  --shadow:0 26px 72px rgba(21,23,19,.14);
  --shadow-sm:0 10px 30px rgba(21,23,19,.10);
  --radius:8px;
  --font:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-display:"Newsreader","Georgia","Times New Roman",serif;
  --container:1440px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--paper);
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 clamp(20px,3.2vw,44px)}

/* ---------- Typography ---------- */
h1,h2,h3{font-family:var(--font-display);font-weight:400;letter-spacing:-.008em;text-wrap:pretty}
h1{font-size:clamp(2.5rem,5.2vw,4.5rem);line-height:1.06}
h2{font-size:clamp(1.85rem,3.4vw,2.9rem);line-height:1.12}
h3{font-size:1.35rem;line-height:1.28}
p{color:var(--ink-soft)}
.lede{font-size:clamp(1.04rem,1.3vw,1.2rem);line-height:1.7;color:var(--ink-soft);max-width:62ch}

.eyebrow{
  display:inline-block;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--bronze);
  margin-bottom:1.1rem;
}
.eyebrow.on-dark{color:var(--gold)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;
  font-family:var(--font);font-weight:700;font-size:.95rem;
  padding:.85rem 1.5rem;border-radius:var(--radius);
  border:1px solid transparent;cursor:pointer;
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:var(--green-dark)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:var(--paper-deep)}
.btn-light{background:transparent;color:#fff;border-color:var(--line-dark)}
.btn-light:hover{background:rgba(255,255,255,.10)}
.btn-lg{padding:1rem 1.9rem;font-size:1rem}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--header-surface);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;gap:2.2rem;height:92px}
.logo{display:flex;align-items:center;flex:0 0 auto}
.logo img{height:54px;width:auto;flex-shrink:0}
.main-nav{display:flex;align-items:center;gap:1.75rem;margin-left:auto}
.main-nav > a{font-weight:600;font-size:.98rem;color:var(--ink);position:relative;padding:.3rem 0}
.main-nav > a:hover{color:var(--green)}
.header-phone{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;font-size:.95rem;color:var(--ink);white-space:nowrap;margin-left:.6rem}
.header-phone svg{color:var(--green)}
.header-phone:hover{color:var(--green)}
.header-cta{margin-left:.6rem}
.nav-toggle{display:none;margin-left:auto;background:none;border:0;font-size:1.6rem;cursor:pointer;color:var(--ink)}

/* ---------- Mega menu ---------- */
.mega{position:relative}
.mega-button{
  font-family:var(--font);font-weight:600;font-size:.98rem;color:var(--ink);
  background:none;border:0;cursor:pointer;padding:.3rem 0;display:inline-flex;align-items:center;gap:.28rem;
}
.mega-button::after{content:"⌄";font-size:.9em;opacity:.55;position:relative;top:-1px;transition:transform .2s}
.mega-button:hover,.mega:hover .mega-button{color:var(--green)}
.mega:hover .mega-button::after,.mega.open .mega-button::after{transform:rotate(180deg)}
.mega-panel{
  position:absolute;top:100%;left:-.6rem;
  border-top:16px solid transparent;background:var(--white);background-clip:padding-box;
  border-radius:14px;box-shadow:var(--shadow);
  padding:1.5rem;display:flex;gap:2rem;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:70;
}
.mega-panel--right{left:auto;right:0}
.mega:hover .mega-panel,.mega-panel:hover,.mega.open .mega-panel{opacity:1;visibility:visible;transform:translateY(0)}
.mega-groups{display:flex;gap:1.8rem}
.mega-group{min-width:190px}
.mega-group h4{font-family:var(--font);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze);margin-bottom:.8rem}
.mega-group a{display:block;padding:.42rem .55rem;margin:0 -.55rem;border-radius:8px;transition:background .15s}
.mega-group a:hover{background:var(--paper)}
.mega-group a span{display:block;font-weight:700;font-size:.97rem;color:var(--ink);line-height:1.3}
.mega-group a small{display:block;font-size:.88rem;color:var(--ink-soft);font-weight:500;line-height:1.35}
.mega-group a:hover span{color:var(--green)}
.mega-feature{
  align-self:stretch;min-width:236px;max-width:264px;background:var(--green-dark);color:#fff;
  border-radius:12px;padding:1.3rem;display:flex;flex-direction:column;justify-content:space-between;gap:1rem;
}
.mega-feature strong{font-family:var(--font-display);font-weight:400;font-size:1.3rem;display:block;margin-bottom:.4rem}
.mega-feature p{color:rgba(255,255,255,.8);font-size:.88rem}
.mega-feature .btn{align-self:flex-start}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:700px;
  display:flex;align-items:center;
  color:#fff;
  background-size:cover;background-position:center;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(21,23,19,.86) 0%,rgba(21,23,19,.68) 42%,rgba(21,23,19,.20) 100%);
}
.hero > .container{position:relative;z-index:2;padding-top:clamp(4rem,6.4vw,5.75rem);padding-bottom:clamp(4rem,6.4vw,5.75rem)}
.hero h1{color:#fff;max-width:26ch;margin-bottom:1.5rem;margin-left:-.045em;text-wrap:balance}
.hero .lede{color:rgba(255,255,255,.86);max-width:54ch;margin-bottom:2.1rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem}

/* ---------- Section ---------- */
.section{padding:clamp(4rem,6vw,6.5rem) 0}
.section.tight{padding:clamp(2.5rem,5vw,4rem) 0}
.section-dark{background:var(--green-dark);color:#fff}
.section-dark p,.section-dark .lede{color:rgba(255,255,255,.78)}
.section-paper-deep{background:var(--white)}
.section-head{max-width:820px;margin-bottom:3.4rem}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head h2{margin-bottom:1rem}

/* ---------- Feature strip (3) ---------- */
.feature-strip{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  margin-top:2.5rem;
}
.feature-strip .cell{background:var(--paper);padding:1.6rem 1.5rem}
.feature-strip .cell h4{font-family:var(--font);font-size:1.05rem;font-weight:700;margin-bottom:.3rem;color:var(--ink)}
.feature-strip .cell p{font-size:.95rem;margin:0}

/* ---------- Numbered feature list ---------- */
.numbered{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1.5rem}
.numbered .item{position:relative}
.numbered .n{font-family:var(--font-display);font-size:2.4rem;color:var(--clay);line-height:1;margin-bottom:.6rem;display:block}
.numbered .item h4{font-family:var(--font);font-size:1.05rem;font-weight:700;margin-bottom:.35rem}
.numbered .item p{font-size:.95rem;margin:0}

/* ---------- Cards grid ---------- */
.cards{display:flex;flex-wrap:wrap;gap:1rem}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.7rem;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card .n{font-family:var(--font-display);font-size:1.6rem;color:var(--clay);display:block;margin-bottom:.7rem}
.card h3{font-family:var(--font);font-size:1.2rem;font-weight:700;margin-bottom:.5rem}
.card p{font-size:.96rem;margin:0}
.card.card-green{background:var(--green);color:#fff;border-color:transparent}
.card.card-green p{color:rgba(255,255,255,.82)}
.card.card-green .tag{color:var(--gold)}
.card .tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--bronze);margin-bottom:.6rem}

/* ---------- Material route cards ---------- */
.material-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.6rem}
.material-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease}
.material-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.material-card .mc-body{padding:1.8rem}
.material-card h3{font-family:var(--font);font-size:1.35rem;font-weight:700;margin-bottom:.6rem}
.material-card p{font-size:.96rem;margin-bottom:1.1rem}
.brand-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.3rem}
.brand-tags span{font-size:.78rem;font-weight:700;background:var(--tab-bg);color:var(--ink);padding:.35rem .7rem;border-radius:100px}
.material-card .mc-link{font-weight:700;color:var(--green);font-size:.95rem}

/* ---------- Split (checklist) ---------- */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:3.5rem;align-items:center}
.checklist{list-style:none;display:grid;gap:1rem;margin:1.8rem 0}
.checklist li{position:relative;padding-left:2rem;color:var(--ink);font-weight:500}
.checklist li::before{content:"";position:absolute;left:0;top:.35em;width:1.1rem;height:1.1rem;border-radius:4px;background:var(--green);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z'/%3E%3C/svg%3E") center/contain no-repeat;}
.section-dark .checklist li{color:#fff}
.section-dark .checklist li::before{background:var(--gold)}
.media-frame{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3}
.media-frame img{width:100%;height:100%;object-fit:cover}

/* ---------- Gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem}
.gallery figure{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3}
.gallery figure:nth-child(1){grid-column:span 2}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.gallery figure:hover img{transform:scale(1.05)}
.gallery figcaption{position:absolute;inset:auto 0 0 0;padding:1.2rem;background:linear-gradient(transparent,rgba(21,23,19,.85));color:#fff}
.gallery figcaption strong{display:block;font-family:var(--font-display);font-size:1.25rem;font-weight:400}
.gallery figcaption span{font-size:.85rem;opacity:.82}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.5rem;counter-reset:step}
.step{padding-top:1.4rem;border-top:2px solid var(--line)}
.section-dark .step{border-color:var(--line-dark)}
.step .n{font-family:var(--font-display);font-size:1.5rem;color:var(--bronze);display:block;margin-bottom:.5rem}
.section-dark .step .n{color:var(--gold)}
.step h4{font-family:var(--font);font-size:1.1rem;font-weight:700;margin-bottom:.4rem}
.step p{font-size:.94rem;margin:0}

/* ---------- Product catalog ---------- */
.filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:2rem}
.filter-bar .fl-label{font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft);margin-right:.4rem}
.chip{font-size:.88rem;font-weight:700;padding:.5rem 1rem;border-radius:100px;background:var(--tab-bg);border:1px solid transparent;cursor:pointer;transition:.15s}
.chip:hover{background:var(--tab-bg-hover)}
.chip.active{background:var(--green);color:#fff}
.count{margin-left:auto;font-size:.9rem;color:var(--ink-soft)}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.3rem}
.product{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s}
.product:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.product .thumb{aspect-ratio:4/3;background:var(--paper-deep) center/cover}
.product .p-body{padding:1.1rem 1.2rem 1.3rem}
.product .p-cat{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--bronze)}
.product h3{font-family:var(--font);font-size:1rem;font-weight:700;margin:.35rem 0 .8rem}
.product .p-actions{display:flex;gap:.6rem;font-size:.82rem;font-weight:700}
.product .p-actions a:first-child{color:var(--ink-soft)}
.product .p-actions a:last-child{color:var(--green)}

/* ---------- Wizard ---------- */
.wizard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:2.5rem;max-width:820px;margin:0 auto}
.wizard .step-label{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.wizard h2{margin:.6rem 0 .5rem}
.progress{height:6px;background:var(--tab-bg);border-radius:100px;margin:1.6rem 0;overflow:hidden}
.progress > span{display:block;height:100%;width:16.6%;background:var(--green);border-radius:100px}
.option-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem;margin:1.6rem 0}
.option{border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.2rem;font-weight:700;cursor:pointer;transition:.15s;background:var(--paper)}
.option:hover{border-color:var(--green);background:#fff}
.wizard-actions{display:flex;justify-content:space-between;margin-top:1.4rem}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem}
.info-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:2rem;box-shadow:var(--shadow-sm)}
.info-row{display:flex;flex-direction:column;padding:.9rem 0;border-bottom:1px solid var(--line)}
.info-row:last-child{border-bottom:0}
.info-row .k{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.info-row .v{font-size:1.05rem;font-weight:600;margin-top:.15rem}

/* ---------- CTA band ---------- */
.cta-band{background:var(--green);color:#fff;text-align:center;border-radius:var(--radius);padding:clamp(2.5rem,5vw,4rem)}
.cta-band h2{color:#fff;margin-bottom:.8rem}
.cta-band p{color:rgba(255,255,255,.82);max-width:56ch;margin:0 auto 1.8rem}
.cta-band .hero-actions{justify-content:center}

/* ---------- Footer ---------- */
.site-footer{background:var(--green-dark);color:rgba(255,255,255,.75);}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:2.5rem}

.site-footer h5{color:#fff;font-family:var(--font);font-size:.82rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1rem}
.site-footer ul{list-style:none;display:grid;gap:.6rem}
.site-footer a:hover{color:#fff}

.footer-bottom{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line-dark);font-size:.85rem}
.footer-bottom .legal{display:flex;gap:1.4rem;flex-wrap:wrap}


.fc-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;color:#fff;box-shadow:0 10px 28px rgba(21,23,19,.25);transition:transform .15s ease}
.fc-btn:hover{transform:translateY(-2px)}
.fc-wa{background:#25d366;padding:.7rem 1.15rem;border-radius:100px;font-weight:700;font-size:.95rem}
.fc-call{background:var(--green);width:56px;height:56px;border-radius:50%}
@media(max-width:560px){.fc-wa span{display:none}.fc-wa{width:56px;height:56px;padding:0;border-radius:50%}}

/* ---------- CRO: hero-trust microcopy ---------- */
.hero-trust{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.1rem;margin-top:1.5rem;color:rgba(255,255,255,.9);font-size:.92rem;font-weight:600}
.hero-trust .stars{color:var(--gold);letter-spacing:1px}
.hero-trust .sep{opacity:.4}

/* ---------- CRO: trust strip (score + reviews) ---------- */
.trust-strip{background:var(--green-dark);color:#fff}
.trust-strip .container{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem 2.75rem;padding-top:1.35rem;padding-bottom:1.35rem;text-align:center}
.trust-metric{display:flex;align-items:center;gap:.7rem}
.trust-metric .score{font-family:var(--font-display);font-size:2rem;line-height:1}
.trust-metric .stars{color:var(--gold);font-size:1.05rem;letter-spacing:1px}
.trust-metric .sub{font-size:.82rem;color:rgba(255,255,255,.72);font-weight:500;text-align:left}
.trust-metric b{font-weight:700}
.trust-divider{width:1px;height:34px;background:var(--line-dark)}

/* ---------- CRO: USP row (differentiators) ---------- */
.usp-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem}
.usp{display:flex;gap:.85rem;align-items:flex-start}
.usp .ic{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center}
.usp h4{font-family:var(--font);font-size:1.02rem;font-weight:700;margin-bottom:.2rem}
.usp p{font-size:.9rem;margin:0}

/* ---------- CRO: reviews ---------- */
.review-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.review-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;box-shadow:var(--shadow-sm)}
.review-card .stars{color:#e0a53f;letter-spacing:1px;margin-bottom:.7rem}
.review-card p{color:var(--ink);font-size:.98rem;margin-bottom:1.1rem}
.review-card .who{display:flex;align-items:center;gap:.6rem;font-size:.88rem}
.review-card .who .av{width:34px;height:34px;border-radius:50%;background:var(--paper-deep);color:var(--ink);display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--font-display)}
.review-card .who b{font-weight:700}
.review-card .who span{color:var(--ink-soft)}

/* ---------- CRO: price 'vanaf' cards ---------- */
.price-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.price-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem;box-shadow:var(--shadow-sm);text-align:center;display:flex;flex-direction:column}
.price-card.feature{border-color:var(--green);box-shadow:0 20px 44px rgba(29,92,66,.16)}
.price-card .tag{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--bronze);margin-bottom:.6rem}
.price-card .from{font-size:.85rem;color:var(--ink-soft)}
.price-card .amount{font-family:var(--font-display);font-size:2.6rem;line-height:1;margin:.2rem 0 .1rem}
.price-card .unit{font-size:.85rem;color:var(--ink-soft);margin-bottom:1rem}
.price-card ul{list-style:none;display:grid;gap:.5rem;margin:0 0 1.3rem;text-align:left}
.price-card li{position:relative;padding-left:1.5rem;font-size:.9rem}
.price-card li::before{content:"";position:absolute;left:0;top:.3em;width:1rem;height:1rem;border-radius:3px;background:var(--green);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z'/%3E%3C/svg%3E") center/contain no-repeat}
.price-card .btn{margin-top:auto}
.price-note{text-align:center;color:var(--ink-soft);font-size:.85rem;margin-top:1.4rem}

/* ---------- CRO: sticky mobile action bar ---------- */
.sticky-bar{display:none}

/* ---------- Responsive ---------- */
@media(max-width:1024px){
  .main-nav{
    display:none;position:absolute;top:88px;left:0;right:0;
    background:var(--header-surface-solid);flex-direction:column;align-items:stretch;gap:0;
    padding:.5rem 24px 2rem;border-bottom:1px solid var(--line);
    max-height:calc(100vh - 88px);overflow-y:auto;box-shadow:var(--shadow);
  }
  .main-nav.open{display:flex}
  .nav-toggle{display:block}
  .header-cta,.header-phone{display:none}
  .main-nav > a,.mega-button{padding:1rem 0;border-bottom:1px solid var(--line);width:100%;text-align:left;justify-content:space-between}
  .mega{position:static}
  .mega-panel{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-top:0;
    border-radius:0;padding:.4rem 0 1rem;display:none;flex-direction:column;gap:1.2rem;background:transparent;
  }
  .mega.open .mega-panel{display:flex}
  .mega-groups{flex-direction:column;gap:1.3rem}
  .mega-feature{max-width:none}
  .split{grid-template-columns:1fr;gap:2rem}
  .contact-grid{grid-template-columns:1fr}
  .feature-strip{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .gallery figure:nth-child(1){grid-column:auto}
  .usp-row{grid-template-columns:1fr 1fr}
  .review-cards{grid-template-columns:1fr}
  .price-cards{grid-template-columns:1fr}
}
@media(max-width:560px){
  .footer-grid{grid-template-columns:1fr}
  .hero{min-height:590px}
  h1{line-height:1.08}
  .usp-row{grid-template-columns:1fr}
  .trust-strip .container{gap:.8rem 1.4rem}
  .trust-divider{display:none}
  /* sticky mobiele actiebalk */
  .sticky-bar{
    display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;
    position:fixed;left:0;right:0;bottom:0;z-index:210;
    background:var(--line);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(21,23,19,.12);
  }
  .sticky-bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;
    background:var(--white);color:var(--ink);padding:.6rem .4rem;font-size:.72rem;font-weight:700}
  .sticky-bar a.primary{background:var(--green);color:#fff}
  .sticky-bar a svg{width:20px;height:20px}
  body{padding-bottom:64px}                /* ruimte voor sticky bar */
}


/* ---------- CRO v2: menselijke laag, FAQ en routes ---------- */
.hero-advisor{display:flex;align-items:center;gap:.9rem;margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid var(--line-dark);max-width:560px}
.hero-advisor img{width:54px;height:54px;flex:0 0 auto;border-radius:50%;object-fit:cover;object-position:50% 18%;border:2px solid rgba(255,255,255,.25)}
.hero-advisor p{color:rgba(255,255,255,.8);font-size:.94rem;line-height:1.5;margin:0}
.hero-advisor a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--gold)}
.hero-advisor a:hover{color:var(--gold)}
.ha-face{flex:0 0 auto;width:52px;height:52px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center}
.ha-text{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.ha-text b{color:#fff;font-size:.98rem}
.ha-text span{color:rgba(255,255,255,.78);font-size:.88rem}
.hero-advisor .btn{margin-left:auto;flex:0 0 auto}

.review-card .who .av{width:40px;height:40px;font-size:1rem}

.team-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.member{display:flex;flex-direction:column;gap:.9rem}
.member .mf{display:block;width:100%;aspect-ratio:4/5;box-shadow:var(--shadow-sm);border-radius:var(--radius);overflow:hidden}
.member figcaption{display:flex;flex-direction:column;gap:.25rem}
.member b{font-size:1.02rem;font-weight:700}
.member span{font-size:.9rem;color:var(--ink-soft);line-height:1.5}

.faq-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:3.5rem;align-items:start}
.faq-side{display:flex;flex-direction:column;gap:2.2rem}
.faq-photo{margin:0;position:relative}
.faq-photo img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius);display:block}
.faq-photo figcaption{margin-top:.9rem;font-size:.88rem;line-height:1.6;color:var(--ink-soft);max-width:34ch;padding-left:1rem;border-left:1px solid var(--bronze)}
.inline-link{color:var(--green);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.inline-link:hover{color:var(--green-dark)}
.faq{display:grid;gap:.7rem}
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.05rem 1.3rem}
.faq details[open]{background:#fff;box-shadow:var(--shadow-sm)}
.faq summary{list-style:none;cursor:pointer;font-weight:700;font-size:1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-display);font-size:1.5rem;line-height:1;color:var(--green);flex:0 0 auto}
.faq details[open] summary::after{content:"\2013"}
.faq details p{margin-top:.7rem;font-size:.96rem;max-width:62ch}

.routes{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.route{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.6rem,3vw,2.3rem);display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;box-shadow:var(--shadow-sm)}
.route h3{margin:0}
.route p{margin:0 0 .5rem;font-size:.98rem;max-width:46ch}
.route .btn{margin-top:auto}
.route-green{background:var(--green-dark);border-color:transparent}
.route-green h3{color:#fff}
.route-green p{color:rgba(255,255,255,.78)}
.route-green .btn-primary{background:var(--green)}

@media(max-width:1024px){
  .team-row{grid-template-columns:repeat(2,1fr)}
  .faq-layout{grid-template-columns:1fr;gap:2.2rem}
  .faq-photo img{aspect-ratio:16/9}
}
@media(max-width:760px){
  .hero-advisor{flex-wrap:wrap}
  .hero-advisor .btn{margin-left:0;width:100%;justify-content:center}
  .routes{grid-template-columns:1fr}
}
@media(max-width:560px){
  .team-row{grid-template-columns:1fr}
}


/* ---------- UI polish: bredere container, optische uitlijning ---------- */
.hero > .container{padding-top:clamp(5rem,7vw,7rem);padding-bottom:clamp(5rem,7vw,7rem)}
h2{margin-left:-.03em}
.section-head h2{margin-bottom:1.1rem}
.section-head .eyebrow{margin-bottom:1rem}
.cta-band h2,.section-head.center h2{margin-left:0}
.hero-trust{margin-top:1.7rem}
.feature-strip{margin-top:2.4rem}
.usp-row{gap:2rem 2.4rem}
.cards,.material-cards,.review-cards,.price-cards,.team-row{gap:1.6rem}
.gallery{gap:1.4rem}
.split{gap:clamp(2.5rem,5vw,4.5rem)}
.footer-grid{gap:2.6rem}
@media(max-width:1000px){
  .hero h1{max-width:none;margin-left:-.03em;text-wrap:pretty}
}



/* ---------- Steenlook-marquee ---------- */
.swatch-section{overflow:hidden}
.swatch-marquee{display:flex;gap:1rem;width:max-content;margin:0 0 1.6rem;animation:swatch-scroll 52s linear infinite}
.swatch-marquee:hover{animation-play-state:paused}
.swatch-track{display:flex;gap:1rem;flex:0 0 auto}
.swatch{position:relative;display:block;width:230px;aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.swatch img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
a.swatch:hover img{transform:scale(1.06)}
.swatch > span{position:absolute;left:0;right:0;bottom:0;padding:1.6rem .9rem .8rem;font-size:.85rem;font-weight:700;letter-spacing:.04em;color:#fff;background:linear-gradient(180deg,rgba(21,23,19,0),rgba(21,23,19,.72))}
@keyframes swatch-scroll{from{transform:translateX(0)}to{transform:translateX(calc(-50% - .5rem))}}
.swatch-foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem}
.swatch-foot span{font-size:.88rem;color:var(--ink-soft)}

/* ---------- Micro-interacties ---------- */
.card,.material-card,.review-card,.price-card,.route{transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s ease}
.card:hover,.material-card:hover,.review-card:hover,.price-card:hover,.route:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.gallery figure{overflow:hidden}
.gallery figure img{transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.gallery figure:hover img{transform:scale(1.05)}
.media-frame img{transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.split:hover .media-frame img{transform:scale(1.03)}
.mc-link{font-weight:700;color:var(--green)}
.mc-link:hover{color:var(--green-dark)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}
.section-dark a:focus-visible,.hero a:focus-visible{outline-color:var(--gold)}


@media(prefers-reduced-motion:reduce){
  .swatch-marquee{animation:none;overflow-x:auto}
  .card:hover,.material-card:hover,.review-card:hover,.price-card:hover,.route:hover{transform:none}
  .btn:hover{transform:none}
}
@media(max-width:760px){
  .swatch{width:168px}
}


/* ---------- Cijferbalk, merken, badges, belofte ---------- */
.trust-strip .trust-metric .score{font-size:1.9rem}
.trust-strip .sub{line-height:1.35;display:block}

.badges{list-style:none;display:flex;flex-wrap:wrap;gap:.55rem;margin:1.5rem 0 0;padding:0}
.badges li{display:flex;align-items:center;gap:.45rem;font-size:.86rem;font-weight:700;color:#fff;background:rgba(255,255,255,.10);border:1px solid var(--line-dark);border-radius:100px;padding:.4rem .9rem}
.badges li::before{content:"";width:.95rem;height:.95rem;flex:0 0 auto;background:var(--gold);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z'/%3E%3C/svg%3E") center/contain no-repeat}
.badges-on-green{justify-content:center;margin-top:1.6rem}

.brandbar{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2.2rem;padding:1.4rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bb-label{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.bb-logos{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 2rem;margin-left:auto}
.bb-logos a{font-family:var(--font-display);font-size:1.35rem;color:var(--ink);opacity:.55;transition:opacity .2s,color .2s}
.bb-logos a:hover{opacity:1;color:var(--green)}

.promise{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,4vw,3.5rem);align-items:center}
.promise-photo{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5;box-shadow:var(--shadow)}
.promise-photo img{width:100%;height:100%;object-fit:cover}
.promise-body h2{margin-bottom:1rem}
.promise-sign{display:flex;flex-direction:column;margin:1.6rem 0 .4rem;padding-left:1rem;border-left:2px solid var(--gold)}
.promise-sign b{color:#fff;font-size:1.02rem}
.promise-sign span{color:rgba(255,255,255,.7);font-size:.9rem}

@media(max-width:900px){
  .promise{grid-template-columns:1fr}
  .promise-photo{aspect-ratio:16/10}
  .bb-logos{margin-left:0}
}


/* ---------- Vergelijking en keuzehulp ---------- */
.compare{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--shadow-sm)}
.cmp-row{display:grid;grid-template-columns:1.1fr 1.2fr 1.2fr;gap:1rem;padding:1.05rem 1.4rem;border-top:1px solid var(--line);font-size:.96rem;align-items:center}
.cmp-row:first-child{border-top:0}
.cmp-head{background:var(--paper);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.cmp-head .cmp-us{color:var(--green)}
.cmp-row > span:first-child{font-weight:700}
.cmp-us{background:rgba(29,92,66,.05)}
.cmp-row .yes,.cmp-row .no{position:relative;padding-left:1.7rem}
.cmp-row .yes::before,.cmp-row .no::before{content:"";position:absolute;left:0;top:.25em;width:1.1rem;height:1.1rem}
.cmp-row .yes::before{background:var(--green);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z'/%3E%3C/svg%3E") center/contain no-repeat}
.cmp-row .no{color:var(--ink-soft)}
.cmp-row .no::before{background:var(--ink-soft);opacity:.55;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M19 6.4L17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M19 6.4L17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z'/%3E%3C/svg%3E") center/contain no-repeat}

.quiz{display:grid;gap:1.2rem;max-width:900px;margin:0 auto}
.quiz-q h4{font-family:var(--font);font-size:1.05rem;font-weight:700;margin-bottom:.8rem;display:flex;align-items:center;gap:.6rem}
.quiz-q h4 span{width:26px;height:26px;flex:0 0 auto;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.82rem}
.quiz-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.quiz-opts button{font-family:var(--font);font-size:.93rem;font-weight:600;text-align:left;line-height:1.4;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:.9rem 1rem;cursor:pointer;transition:border-color .18s,background .18s,transform .18s}
.quiz-opts button:hover{border-color:var(--green);transform:translateY(-2px)}
.quiz-opts button.on{background:var(--green);border-color:var(--green);color:#fff}
.quiz-result{background:var(--green-dark);color:#fff;border-radius:var(--radius);padding:clamp(1.6rem,3vw,2.3rem);margin-top:.6rem}
.quiz-result .eyebrow{color:var(--gold)}
.quiz-result h3{color:#fff;margin-bottom:.5rem}
.quiz-result p{color:rgba(255,255,255,.8);max-width:56ch;margin-bottom:1.4rem}
.quiz-reset{margin-top:1.1rem;background:none;border:0;color:rgba(255,255,255,.7);font-family:var(--font);font-size:.86rem;text-decoration:underline;cursor:pointer;padding:0}
.quiz-reset:hover{color:#fff}

@media(max-width:900px){
  .quiz-opts{grid-template-columns:1fr}
  .cmp-row{grid-template-columns:1fr;gap:.35rem;padding:1rem 1.1rem}
  .cmp-head{display:none}
  .cmp-us{background:none}
}


/* ---------- Fotokaarten in 'Wat maken we' ---------- */
.card-photo{padding:0;overflow:hidden;display:flex;flex-direction:column}
.card-photo .cm{display:block;aspect-ratio:16/11;overflow:hidden;background:var(--paper-deep)}
.card-photo .cm img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.card-photo:hover .cm img{transform:scale(1.05)}
.card-photo .n{margin:1.4rem 1.5rem .4rem;font-size:1.35rem}
.card-photo h3{margin:0 1.5rem .5rem}
.card-photo p{margin:0 1.5rem 1.6rem}


/* ---------- Werk: filmstrip met detail-zoom ---------- */
.work-section{overflow:hidden}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:-1.4rem;margin-bottom:1.8rem}
.chips button{font-family:var(--font);font-size:.86rem;font-weight:700;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:100px;padding:.45rem 1.05rem;cursor:pointer;transition:background .18s,border-color .18s,color .18s}
.chips button:hover{border-color:var(--green);color:var(--green)}
.chips button.on{background:var(--green);border-color:var(--green);color:#fff}
.workstrip{display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 clamp(20px,3.2vw,44px) 1.4rem}
.workstrip figure{position:relative;flex:0 0 320px;aspect-ratio:3/4;scroll-snap-align:start;border-radius:var(--radius);overflow:hidden;background:var(--paper-deep);box-shadow:var(--shadow-sm)}
.workstrip figure.off{display:none}
.workstrip img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.workstrip figure:hover img{transform:scale(1.35)}
.workstrip figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:.1rem;padding:2.6rem 1.1rem .95rem;color:#fff;background:linear-gradient(180deg,rgba(21,23,19,0),rgba(21,23,19,.8))}
.workstrip figcaption b{font-size:1rem}
.workstrip figcaption span{font-size:.84rem;color:rgba(255,255,255,.8)}
.workstrip .lens{position:absolute;top:1rem;left:1rem;z-index:2;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:rgba(255,255,255,.94);border-radius:100px;padding:.35rem .8rem;opacity:0;transform:translateY(-6px);transition:opacity .25s,transform .25s}
.workstrip figure:hover .lens{opacity:1;transform:none}
.work-foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem}
.work-foot span{font-size:.88rem;color:var(--ink-soft)}
@media(max-width:760px){
  .workstrip figure{flex-basis:250px}
}
@media(prefers-reduced-motion:reduce){
  .workstrip figure:hover img{transform:none}
}


/* ---------- Slot-CTA met beeld ---------- */
.cta-hero{position:relative;border-radius:14px;overflow:hidden;min-height:520px;display:flex;align-items:center}
.cta-hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(18,55,39,.95) 0%,rgba(18,55,39,.80) 38%,rgba(18,55,39,.10) 100%)}
.cta-hero-txt{position:relative;z-index:2;padding:clamp(2rem,4vw,4rem);max-width:660px;color:#fff}
.cta-hero-txt h2{color:#fff;font-size:clamp(2.2rem,3.6vw,3.4rem);line-height:1.08;margin-bottom:.9rem}
.cta-hero-txt p{color:rgba(255,255,255,.82);max-width:46ch;margin-bottom:1.8rem}
.cta-hero-txt .rule{width:56px;height:2px;background:var(--gold);margin-bottom:1.4rem}
.cta-fine{font-size:.84rem;color:rgba(255,255,255,.62);margin-top:1rem;margin-bottom:0}
@media(max-width:760px){
  .cta-hero{min-height:0}
  .cta-hero::after{background:linear-gradient(180deg,rgba(18,55,39,.86) 0%,rgba(18,55,39,.94) 60%)}
}


/* ---------- Wat maken we: horizontale strip ---------- */
.make-section{overflow:hidden}
.makestrip{display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 clamp(20px,3.2vw,44px) 1.4rem}
.makestrip a{flex:0 0 280px;scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding-bottom:1.4rem;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s}
.makestrip a:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.makestrip .pic{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--paper-deep)}
.makestrip .pic img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.makestrip a:hover .pic img{transform:scale(1.05)}
.makestrip i{display:block;font-style:normal;font-family:var(--font-display);font-size:1.25rem;color:var(--clay);margin:1.05rem 1.3rem .2rem}
.makestrip b{display:block;font-size:1.08rem;margin:0 1.3rem .35rem}
.makestrip .d{display:block;font-size:.91rem;line-height:1.5;color:var(--ink-soft);margin:0 1.3rem}
@media(max-width:760px){
  .makestrip a{flex-basis:240px}
}
@media(prefers-reduced-motion:reduce){
  .makestrip a:hover{transform:none}
}

.promise-photo img{object-position:50% 15%}
@media(max-width:760px){
  .hero-advisor{gap:.8rem}
  .hero-advisor img{width:46px;height:46px}
}


/* Materiaalband: duidelijker welke plaat actief is */
.hb-inner{align-items:center}
.hb-now{align-items:center}
.hb-now b{font-size:1.25rem;line-height:1}
.hb-now > span{padding:.22rem .6rem;border:1px solid rgba(227,196,155,.45);border-radius:100px;line-height:1}
.hb-swrow{gap:.65rem;padding:.45rem 0}
.hb-swrow button{position:relative;transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.hb-swrow img{width:62px;height:44px;border-radius:6px;border:0;opacity:.42;filter:saturate(.75);transition:opacity .25s,filter .25s,box-shadow .25s}
.hb-swrow button:hover img{opacity:.85;filter:none}
.hb-swrow button.on{transform:scale(1.18)}
.hb-swrow button.on img{opacity:1;filter:none;box-shadow:0 0 0 2px var(--gold),0 8px 20px rgba(0,0,0,.35)}
@media(max-width:900px){
  .hb-swrow img{width:54px;height:38px}
}
@media(max-width:520px){
  .hb-swrow img{width:48px;height:34px}
}

/* Band toont nu toegepaste projecten, iets bredere thumbs */
.hb-swrow img{width:78px;height:52px}
.hb-now b{white-space:nowrap}
.hb-now > span{border-color:rgba(227,196,155,.45);white-space:nowrap}
@media(max-width:900px){
  .hb-swrow img{width:66px;height:46px}
}
@media(max-width:520px){
  .hb-swrow img{width:58px;height:40px}
  .hb-now b{font-size:1.1rem}
}

.hb-now > span:not(.hb-bar):empty{display:none}

/* Cijferbalk plus usp's in één strook */
.trust-strip .container{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:1.4rem 3rem;padding-top:1.5rem;padding-bottom:1.5rem;text-align:left}
.trust-score{display:flex;align-items:center;gap:.85rem;flex:0 0 auto}
.trust-score .score{font-family:var(--font-display);font-size:2.4rem;line-height:1;color:#fff}
.trust-score .stars{display:block;color:var(--gold);letter-spacing:2px;font-size:.95rem;line-height:1.2}
.trust-score .sub{display:block;font-size:.86rem;color:rgba(255,255,255,.75);max-width:34ch}
.trust-claims{list-style:none;display:flex;flex-wrap:wrap;gap:.7rem 2rem;margin:0;padding:0;margin-left:auto}
.trust-claims li{position:relative;padding-left:1.7rem;font-size:.92rem;font-weight:600;color:rgba(255,255,255,.9);max-width:32ch}
.trust-claims li::before{content:"";position:absolute;left:0;top:.22em;width:1.1rem;height:1.1rem;background:var(--gold);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z'/%3E%3C/svg%3E") center/contain no-repeat}
@media(max-width:1024px){
  .trust-claims{margin-left:0}
}

/* Populaire steen uitlichten */
.hb-pop{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green-dark);background:var(--gold);border-radius:100px;padding:.26rem .7rem;line-height:1;white-space:nowrap}
.hb-pop::before{content:"\2605";font-size:.85em;letter-spacing:0}
.hb-pop[hidden]{display:none}
.hb-swrow button.pop::after{content:"\2605";position:absolute;top:-5px;right:-5px;width:18px;height:18px;border-radius:50%;background:var(--gold);color:var(--green-dark);font-size:.62rem;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.35)}
@media(max-width:520px){
  .hb-pop{font-size:.66rem;padding:.22rem .55rem}
}

/* Over AJ Stones, hoog op de pagina */
.over-media{position:relative;display:block}
.over-media .om-big{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow)}
.over-media .om-small{position:absolute;right:-1rem;bottom:-2rem;width:44%;aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;border:6px solid var(--paper);box-shadow:var(--shadow)}
.over-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.over-media figure:hover img{transform:scale(1.04)}
.over-section{padding-bottom:clamp(5rem,8vw,8rem)}
@media(max-width:900px){
  .over-media .om-small{right:0;bottom:-1.2rem;width:38%;border-width:4px}
  .over-section{padding-bottom:clamp(4rem,9vw,6rem)}
}

/* Populair-label op de steenlook-swatch */
.pop-tag{position:absolute;top:.7rem;left:.7rem;z-index:2;display:inline-flex;align-items:center;gap:.3rem;font-style:normal;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green-dark);background:var(--gold);border-radius:100px;padding:.28rem .65rem;line-height:1;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.pop-tag::before{content:"\2605";font-size:.85em;letter-spacing:0}

/* Compacte bewijsbalk op één rij */
.trust-strip .container{display:flex;flex-wrap:nowrap;align-items:center;gap:2.2rem;padding-top:.95rem;padding-bottom:.95rem;overflow-x:auto;scrollbar-width:none}
.trust-strip .container::-webkit-scrollbar{display:none}
.ts-score,.ts-item{display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;font-size:.92rem;color:rgba(255,255,255,.86);flex:0 0 auto}
.ts-score b{font-family:var(--font-display);font-weight:400;font-size:1.3rem;color:#fff;line-height:1}
.ts-score .stars{font-style:normal;color:var(--gold);letter-spacing:1px;font-size:.85rem}
.ts-item{font-weight:600;padding-left:1.6rem;position:relative}
.ts-item::before{content:"";position:absolute;left:0;top:.18em;width:1.05rem;height:1.05rem;background:var(--gold);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z'/%3E%3C/svg%3E") center/contain no-repeat}
.ts-item + .ts-item{margin-left:0}
@media(max-width:1024px){
  .trust-strip .container{flex-wrap:wrap;overflow-x:visible;gap:.7rem 1.7rem;padding-top:1.1rem;padding-bottom:1.1rem}
  .ts-item{font-size:.9rem}
}
@media(max-width:900px){
  .trust-strip .container{gap:.6rem 1.4rem}
  .ts-score,.ts-item{font-size:.88rem;white-space:normal}
}

/* Vergelijking: twee lijsten */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;align-items:start}
.vs-col{border-radius:var(--radius);padding:clamp(1.5rem,2.6vw,2.2rem)}
.vs-us{background:var(--green-dark);color:#fff;box-shadow:var(--shadow)}
.vs-them{background:#fff;border:1px solid var(--line)}
.vs-logo{height:42px;width:auto;margin-bottom:1.3rem;filter:brightness(0) invert(1)}
.vs-them h3{font-family:var(--font);font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:1.3rem;height:42px;display:flex;align-items:center}
.vs ul{list-style:none;display:grid;gap:.85rem;margin:0;padding:0}
.vs li{position:relative;padding-left:1.8rem;font-size:1rem;line-height:1.45}
.vs-us li::before{content:"";position:absolute;left:0;top:.22em;width:1.15rem;height:1.15rem;background:var(--gold);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z'/%3E%3C/svg%3E") center/contain no-repeat}
.vs-them li{color:var(--ink-soft)}
.vs-them li::before{content:"";position:absolute;left:.15rem;top:.66em;width:.8rem;height:1px;background:var(--ink-soft);opacity:.55}
@media(max-width:900px){
  .vs{grid-template-columns:1fr}
  .vs-them h3{height:auto;margin-bottom:1rem}
}

/* Twee routes in de slot-CTA */
.cta-hero-txt{max-width:760px}
.cta-routes{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-bottom:.4rem}
.cta-route{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;padding:1.3rem;background:rgba(255,255,255,.08);border:1px solid var(--line-dark);border-radius:var(--radius)}
.cta-route .cr-lbl{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.cta-route b{font-family:var(--font-display);font-weight:400;font-size:1.4rem;line-height:1.1;color:#fff}
.cta-route p{font-size:.92rem;line-height:1.5;color:rgba(255,255,255,.78);margin:0 0 .6rem}
.cta-route .btn{margin-top:auto;width:100%;justify-content:center}
@media(max-width:760px){
  .cta-routes{grid-template-columns:1fr}
}

/* Slot: aanvraagformulier met persoonlijke kolom */
.cta-form{display:grid;grid-template-columns:.78fr 1.22fr;gap:0;background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.cf-side{background:var(--green-dark);color:#fff;padding:clamp(1.6rem,2.8vw,2.4rem);display:flex;flex-direction:column}
.cf-photo{border-radius:12px;overflow:hidden;aspect-ratio:4/5;margin-bottom:1.3rem}
.cf-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.cf-quote{font-family:var(--font-display);font-size:1.35rem;line-height:1.18;color:#fff;margin:0 0 .8rem}
.cf-sign{display:flex;flex-direction:column;margin:0 0 1.4rem;padding-left:.9rem;border-left:2px solid var(--gold)}
.cf-sign b{font-size:.98rem;color:#fff}
.cf-sign span{font-size:.86rem;color:rgba(255,255,255,.7)}
.cf-list{list-style:none;display:grid;gap:.6rem;margin:0 0 1.4rem;padding:0}
.cf-list li{position:relative;padding-left:1.6rem;font-size:.9rem;line-height:1.45;color:rgba(255,255,255,.85)}
.cf-list li::before{content:"";position:absolute;left:0;top:.22em;width:1.05rem;height:1.05rem;background:var(--gold);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2l-3.5-3.5L4 14.2 9 19.2 20 8.2l-1.5-1.5z'/%3E%3C/svg%3E") center/contain no-repeat}
.cf-direct{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto}
.cf-direct a{font-size:.88rem;font-weight:700;color:#fff;background:rgba(255,255,255,.1);border:1px solid var(--line-dark);border-radius:100px;padding:.45rem .95rem}
.cf-direct a:hover{background:rgba(255,255,255,.22)}
.cf-main{padding:clamp(1.7rem,3vw,2.8rem)}
.cf-main .lede{margin-bottom:1.6rem;max-width:52ch}
.cf-form{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.cf-form label{display:block;font-size:.78rem;font-weight:700;color:var(--ink-soft);margin-bottom:.3rem}
.cf-form input,.cf-form select,.cf-form textarea{width:100%;font-family:var(--font);font-size:.95rem;padding:.8rem .95rem;border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink)}
.cf-form textarea{resize:vertical}
.cf-form input:focus,.cf-form select:focus,.cf-form textarea:focus{outline:2px solid var(--green);outline-offset:1px}
.cf-full{grid-column:1 / -1}
.cf-submit{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem;margin-top:.3rem}
.cf-submit span{font-size:.88rem;color:var(--ink-soft)}
.cf-submit a{color:var(--green);font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media(max-width:1000px){
  .cta-form{grid-template-columns:1fr}
  .cf-photo{aspect-ratio:16/9}
}
@media(max-width:600px){
  .cf-form{grid-template-columns:1fr}
}

/* Footer */
.site-footer{background:var(--green-dark);color:#fff;margin-top:0}




.f-score{display:flex;align-items:baseline;gap:.5rem;font-size:.88rem;color:rgba(255,255,255,.75)}
.f-score .stars{color:var(--gold);letter-spacing:1px}
.f-score b{font-family:var(--font-display);font-weight:400;font-size:1.3rem;color:#fff}

.f-col h5{font-family:var(--font);font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:.9rem}
.f-col ul{list-style:none;display:grid;gap:.5rem;margin:0;padding:0}
.f-col a{font-size:.92rem;color:rgba(255,255,255,.78);transition:color .18s,padding-left .18s}
.f-col a:hover{color:#fff;padding-left:.2rem}


.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 2rem;padding-top:1.4rem;font-size:.85rem;color:rgba(255,255,255,.6)}
.footer-bottom .legal{display:flex;flex-wrap:wrap;gap:1.2rem}
.footer-bottom a{color:rgba(255,255,255,.72)}
.footer-bottom a:hover{color:var(--gold)}





/* Materiaalband subtieler */
.hero-band{background:linear-gradient(180deg,rgba(21,23,19,0) 0%,rgba(21,23,19,.45) 100%);backdrop-filter:none;border-top:0}
.hb-inner{padding-top:.7rem;padding-bottom:.9rem}
.hb-swrow{gap:.45rem}
.hb-swrow img{width:52px;height:36px;border-radius:5px;opacity:.32;filter:saturate(.7)}
.hb-swrow button:hover img{opacity:.7}
.hb-swrow button.on{transform:none}
.hb-swrow button.on img{opacity:.95;filter:none;box-shadow:0 0 0 1.5px var(--gold)}
.hb-bar{width:56px;height:2px;background:rgba(255,255,255,.18)}
@media(max-width:900px){
  .hb-swrow img{width:46px;height:32px}
}
@media(max-width:520px){
  .hb-swrow img{width:40px;height:28px}
}

/* Verticale materiaalrail rechts in de hero */
.hero{position:relative}
.hero-rail{position:absolute;top:clamp(7rem,22%,11rem);right:clamp(14px,2.2vw,30px);z-index:4;display:flex;flex-direction:column;align-items:center;gap:.55rem}
.hero-rail .hb-swrow{display:flex;flex-direction:column;gap:.55rem;overflow:visible;margin:0;padding:0}
.hero-rail .hb-swrow button{position:relative;width:14px;height:14px;border-radius:50%;overflow:hidden;transition:width .3s cubic-bezier(.2,.7,.3,1),height .3s cubic-bezier(.2,.7,.3,1),border-radius .3s}
.hero-rail .hb-swrow img{width:100%;height:100%;object-fit:cover;border-radius:inherit;opacity:.55;filter:saturate(.7);transition:opacity .25s,filter .25s;box-shadow:none}
.hero-rail .hb-swrow button::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(255,255,255,.55);transition:border-color .25s}
.hero-rail .hb-swrow button:hover{width:54px;height:54px;border-radius:10px}
.hero-rail .hb-swrow button:hover img{opacity:1;filter:none}
.hero-rail .hb-swrow button.on{width:62px;height:78px;border-radius:10px;transform:none}
.hero-rail .hb-swrow button.on img{opacity:1;filter:none;box-shadow:none}
.hero-rail .hb-swrow button.on::after{border-color:var(--gold);border-width:2px}
.hero-rail .hb-bar{width:2px;height:44px;border-radius:2px;background:rgba(255,255,255,.22);overflow:hidden;display:block}
.hero-rail .hb-bar i{display:block;width:100%;height:0;background:var(--gold);transition:height .1s linear}
@media(max-width:1000px){
  .hero-rail{top:auto;bottom:.9rem;right:50%;transform:translateX(50%);flex-direction:row;gap:.5rem}
  .hero-rail .hb-swrow{flex-direction:row}
  .hero-rail .hb-swrow button.on{width:44px;height:32px}
  .hero-rail .hb-swrow button:hover{width:34px;height:26px}
  .hero-rail .hb-bar{width:34px;height:2px}
  .hero-rail .hb-bar i{width:0;height:100%;transition:width .1s linear}
}

.hero-rail .hb-bar{display:none}

.trust-strip .container{justify-content:center}
@media(max-width:1024px){
  .trust-strip .container{justify-content:center;text-align:center}
}

/* Belofte in drie stappen */
.pledge{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.pl-card{border-top:2px solid rgba(255,255,255,.22);padding-top:1.1rem}
.pl-num{display:block;font-family:var(--font-display);font-size:1.4rem;color:var(--gold);margin-bottom:.35rem}
.pl-card b{display:block;font-size:1.1rem;color:#fff;margin-bottom:.35rem}
.pl-card p{font-size:.94rem;line-height:1.5;color:rgba(255,255,255,.75);margin:0}
.pl-quote{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem 2rem;margin-top:1.4rem;padding-top:1.6rem;border-top:1px solid var(--line-dark)}
.pl-quote p{font-family:var(--font-display);font-size:clamp(1.3rem,2.2vw,1.9rem);line-height:1.2;color:#fff;margin:0;max-width:34ch}
.pl-actions{display:flex;flex-wrap:wrap;gap:.7rem}
@media(max-width:900px){
  .pledge{grid-template-columns:1fr}
}

/* Veelgezochte zoekwoorden in de footer */







/* Belofte: foto links, stappen rechts */
.pledge{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(1.8rem,4vw,3.4rem);align-items:center}
.pl-photo{border-radius:14px;overflow:hidden;aspect-ratio:4/5;box-shadow:var(--shadow)}
.pl-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.pl-body h2{margin-bottom:1.6rem}
.pl-steps{list-style:none;display:grid;gap:1.1rem;margin:0 0 1.6rem;padding:0;counter-reset:none}
.pl-steps li{display:grid;grid-template-columns:2.2rem 1fr;column-gap:1rem;align-items:baseline;padding-bottom:1.1rem;border-bottom:1px solid var(--line-dark)}
.pl-steps li:last-child{border-bottom:0;padding-bottom:0}
.pl-steps span{font-family:var(--font-display);font-size:1.35rem;color:var(--gold);grid-row:span 2}
.pl-steps b{font-size:1.08rem;color:#fff}
.pl-steps em{font-style:normal;font-size:.94rem;line-height:1.5;color:rgba(255,255,255,.75)}
.pl-line{font-family:var(--font-display);font-size:clamp(1.25rem,2vw,1.7rem);line-height:1.2;color:#fff;margin:0 0 1.4rem;padding-left:1rem;border-left:2px solid var(--gold);max-width:38ch}
.pl-actions{display:flex;flex-wrap:wrap;gap:.7rem}
@media(max-width:900px){
  .pledge{grid-template-columns:1fr}
  .pl-photo{aspect-ratio:16/10}
}

@media(max-width:1000px){
  .hero-rail{position:static;transform:none;order:3;align-self:center;margin:0 0 1rem}
  .hero{position:relative}
}

@media(max-width:1000px){
  .hero-rail .hb-swrow{gap:.35rem}
  .hero-rail .hb-swrow button,
  .hero-rail .hb-swrow button:hover,
  .hero-rail .hb-swrow button.on{width:46px;height:34px;border-radius:8px}
  .hero-rail .hb-swrow img{opacity:.5}
  .hero-rail .hb-swrow button.on img{opacity:1}
}

.pl-photo img{object-position:50% 50%}


/* ============================================================
   Subtiele afwerking: grain, hairlines, gloed
   ============================================================ */

/* fijne papierkorrel over de hele pagina */
body::before{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* haarlijn met goudaccent tussen lichte secties */
.section + .section::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(1440px,100% - 40px);height:1px;
  background:linear-gradient(90deg,rgba(21,23,19,0),rgba(167,123,75,.28) 18%,rgba(21,23,19,.10) 50%,rgba(167,123,75,.28) 82%,rgba(21,23,19,0));
}
.section{position:relative}
.section-dark + .section::before,.section + .section-dark::before,.section-dark::before{display:none}

/* zachte gloed en fijn lijnenpatroon in donkere secties */
.section-dark,.site-footer{position:relative;overflow:hidden}
.section-dark::after,.site-footer::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 70% at 88% 8%,rgba(227,196,155,.10) 0%,rgba(227,196,155,0) 62%),
    radial-gradient(50% 60% at 4% 92%,rgba(255,255,255,.05) 0%,rgba(255,255,255,0) 60%),
    radial-gradient(50% 60% at 4% 92%,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 60%);
}
.section-dark > .container,.site-footer > .container{position:relative;z-index:1}

/* eyebrow met kort gouden streepje */
.eyebrow{display:inline-flex;align-items:center;gap:.6rem}
.eyebrow::before{content:"";width:1.6rem;height:1px;background:var(--bronze);opacity:.7}
.eyebrow.on-dark::before{background:var(--gold);opacity:.85}
.section-head.center .eyebrow{justify-content:center}

/* lichte glans over kaarten */
.card,.material-card,.review-card,.route,.vs-them,.cta-form,.makestrip a,.workstrip figure{position:relative}
.card::after,.material-card::after,.review-card::after,.vs-them::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 34%);mix-blend-mode:soft-light;
}

/* crème secties krijgen een nauwelijks zichtbare steenwaas */
.section-paper-deep{position:relative}
.section-paper-deep::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(70% 50% at 50% 0%,rgba(167,123,75,.05) 0%,rgba(167,123,75,0) 70%);
}
.section-paper-deep > .container{position:relative;z-index:1}

/* getallen en koppen iets verfijnder */
.hb-now b,.cf-quote,.pl-line{letter-spacing:.005em}
h2{letter-spacing:-.004em}



.member .mf img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}


/* subtielere zwevende contactknoppen */
.fc-btn{
  box-shadow:0 6px 18px rgba(21,23,19,.14);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(8px);
  opacity:.82;transition:opacity .2s ease,transform .2s ease,box-shadow .2s ease;
}
.fc-btn:hover{opacity:1;transform:translateY(-1px);box-shadow:0 10px 24px rgba(21,23,19,.2)}
.fc-wa{
  background:rgba(21,23,19,.72);color:#fff;
  width:46px;height:46px;padding:0;border-radius:50%;font-size:0;gap:0;
}
.fc-wa span{display:none}
.fc-wa svg{width:20px;height:20px}
.fc-call{background:rgba(28,61,42,.72);width:46px;height:46px}
.fc-call svg{width:19px;height:19px}


/* ============================================================
   Header: drie zones (logo links, menu gecentreerd, acties rechts)
   ============================================================ */
.header-inner{gap:1.6rem}
.main-nav{margin-left:0;flex:1 1 auto;justify-content:center;gap:1.55rem}
.header-phone{margin-left:auto}
.main-nav > a,.mega-button{font-size:.95rem;letter-spacing:.005em}

/* fijn gouden onderstreepje in plaats van kleurwissel */
.main-nav > a::after,.mega-button::before{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;
  background:var(--bronze);transform:scaleX(0);transform-origin:left;
  transition:transform .28s cubic-bezier(.2,.7,.2,1);
}
.mega-button{position:relative}
.main-nav > a:hover::after,.mega:hover .mega-button::before,.mega.open .mega-button::before{transform:scaleX(1)}

/* ============================================================
   Mega-menu: breed, gecentreerd paneel met haarlijnen
   ============================================================ */
@media(min-width:1101px){
  /* paneel centreert op de viewport, niet op het menu-item */
  .mega{position:static}
  .header-inner{position:static}
}
.mega-panel,.mega-panel--right{
  left:50%;right:auto;
  width:min(1180px,calc(100vw - 48px));
  transform:translate(-50%,8px);
  padding:2.1rem 2.2rem 1.9rem;
  border-radius:0 0 4px 4px;
  border:1px solid var(--line);border-top:16px solid transparent;
  box-shadow:0 26px 60px -24px rgba(21,23,19,.28);
  background:
    linear-gradient(180deg,rgba(167,123,75,.05) 0%,rgba(167,123,75,0) 120px),
    var(--white);
  background-clip:padding-box;
}
.mega:hover .mega-panel,.mega-panel:hover,.mega.open .mega-panel{transform:translate(-50%,0)}

.mega-groups{flex:1;gap:0}
.mega-group{flex:1;min-width:0;padding:0 1.7rem}
.mega-group:first-child{padding-left:0}
.mega-groups > .mega-group + .mega-group{
  border-left:1px solid var(--line);
  background:linear-gradient(180deg,rgba(167,123,75,.22),rgba(167,123,75,0)) left top/1px 44px no-repeat;
}
.mega-group h4{font-size:.68rem;letter-spacing:.18em;margin-bottom:1rem;padding-bottom:.6rem;border-bottom:1px solid var(--line)}
.mega-group a{padding:.5rem .6rem;margin:0 -.6rem;border-radius:3px;position:relative}
.mega-group a:hover{background:linear-gradient(90deg,rgba(167,123,75,.09),rgba(167,123,75,0))}
.mega-group a span{font-weight:650}
.mega-group a span::after{content:"→";opacity:0;margin-left:.4rem;transform:translateX(-3px);display:inline-block;transition:opacity .2s,transform .2s;color:var(--bronze)}
.mega-group a:hover span::after{opacity:1;transform:translateX(0)}

.mega-feature{
  min-width:270px;max-width:300px;margin-left:1.9rem;border-radius:3px;padding:1.6rem;
  background:
    radial-gradient(70% 60% at 90% 6%,rgba(227,196,155,.16),rgba(227,196,155,0) 62%),
    var(--green-dark);
  border:1px solid rgba(227,196,155,.2);
}
.mega-feature strong{font-size:1.38rem;line-height:1.15}
.mega-feature strong::before{content:"";display:block;width:1.8rem;height:1px;background:var(--gold);opacity:.8;margin-bottom:.9rem}
.mega-feature p{font-size:.86rem;line-height:1.5}

@media(max-width:1240px){
  .main-nav{gap:1.15rem}
  .main-nav > a,.mega-button{font-size:.9rem}
  .header-phone{display:none}
}
@media(max-width:1024px){
  .mega-panel,.mega-panel--right{left:0;transform:none;width:auto;border:0;box-shadow:none;padding:0 0 .6rem;background:none}
  .mega:hover .mega-panel,.mega.open .mega-panel{transform:none}
  .mega-groups{flex-direction:column;gap:1.2rem}
  .mega-group,.mega-group:first-child{padding:0;border-left:0;background:none}
  .mega-feature{margin-left:0;max-width:none}
}


/* ---------- Materialen-mega: swatch bij elke regel ---------- */
.mega-panel--mat .mega-group{min-width:236px}
.mega-panel--mat .mega-group a.mp-a{
  position:static;display:grid;grid-template-columns:30px 1fr;column-gap:.8rem;align-items:center;
}
.mp-th{
  grid-row:1/3;grid-column:1;display:block;width:30px;height:30px;border-radius:2px;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(21,23,19,.1);
  filter:saturate(.9);transition:filter .25s ease,box-shadow .25s ease;
}
.mp-th img{display:block;width:100%;height:100%;object-fit:cover}
.mp-a > span:not(.mp-th),.mp-a > small{grid-column:2}
.mp-a:hover .mp-th{filter:none;box-shadow:inset 0 0 0 1px rgba(21,23,19,.16)}
.mega-panel--mat .mp-a span:not(.mp-th)::after{content:none}
.mp-idle{display:none}


/* ---------- Zwevende brochure-knop ---------- */
  position:fixed;right:1.6rem;bottom:1.6rem;z-index:60;
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.85rem 1.15rem;border-radius:999px;
  background:var(--green-dark);color:#fff;text-decoration:none;
  font-size:.88rem;font-weight:650;letter-spacing:.01em;
  box-shadow:0 18px 40px -18px rgba(21,23,19,.55);
  border:1px solid rgba(255,255,255,.14);
  transition:background .2s ease,transform .2s ease,box-shadow .2s ease;
}



/* ---------- Brochure ---------- */
.brochure{display:grid;grid-template-columns:300px 1fr;gap:3.2rem;align-items:center}
.br-cover{position:relative;border-radius:3px;overflow:hidden;box-shadow:0 30px 60px -28px rgba(21,23,19,.5);background:var(--green-dark)}
.br-cover > img{display:block;width:100%;height:268px;object-fit:cover}
.br-cover figcaption{padding:1.1rem 1.2rem 1.3rem;color:#fff}
.br-cover .br-logo{width:104px;opacity:.95;margin-bottom:.7rem;filter:brightness(0) invert(1)}
.br-cover b{display:block;font-family:var(--font);font-size:1.02rem;font-weight:700;line-height:1.25}
.br-cover span{display:block;margin-top:.3rem;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.br-pages{position:absolute;inset:0;pointer-events:none;box-shadow:inset -1px 0 0 rgba(255,255,255,.14)}
.br-body h2{margin:0 0 .7rem}
.br-list{list-style:none;margin:1.3rem 0 1.6rem;padding:0;display:grid;gap:.55rem;max-width:52ch}
.br-list li{position:relative;padding-left:1.5rem;font-size:.95rem;color:var(--ink-soft)}
.br-list li::before{content:"";position:absolute;left:0;top:.52em;width:.5rem;height:.5rem;border-radius:50%;background:var(--gold)}
.br-form{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.br-form input{
  flex:1 1 260px;min-width:0;padding:.85rem 1rem;border:1px solid var(--line);border-radius:3px;
  font:inherit;font-size:.95rem;background:#fff;color:var(--ink);
}
.br-form input:focus{outline:none;border-color:var(--green)}
.br-fine{margin:.85rem 0 0;font-size:.82rem;color:var(--ink-soft)}
@media(max-width:900px){
  .brochure{grid-template-columns:1fr;gap:2rem}
  .br-cover{max-width:280px}
  .br-form input,.br-form .btn{flex:1 1 100%;width:100%}
}


/* ================= MOBIEL: header-CTA en algemene opschoning ================= */
.hc-short{display:none}

@media(max-width:1024px){
  html,body{overflow-x:hidden}
  .header-inner{gap:.7rem}
  .header-cta{
    display:inline-flex;margin-left:auto;padding:.68rem 1rem;font-size:.86rem;white-space:nowrap;min-height:44px;align-items:center;
  }
  .nav-toggle{margin-left:0}
  .nav-toggle{
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;flex:0 0 44px;padding:0;
    border:1px solid var(--line);border-radius:4px;background:transparent;
    font-size:1.15rem;line-height:1;color:var(--ink);
  }
  .main-nav{top:100%;max-height:calc(100dvh - 76px);padding:.5rem 20px 2rem}
  .main-nav > a,.mega-button{min-height:48px;display:flex;align-items:center}
  .mega-panel--mat .mega-group{min-width:0}
}
@media(max-width:640px){
  .hc-long{display:none}
  .hc-short{display:inline}
  .header-cta{padding:.6rem .95rem;font-size:.85rem}
  .logo img{height:30px}
}
@media(max-width:360px){
  .header-cta{padding:.55rem .8rem;font-size:.8rem}
}

@media(max-width:760px){
  img,video,svg{max-width:100%}
  .container{padding-left:18px;padding-right:18px}
  .section{padding-top:clamp(2.8rem,9vw,4.2rem);padding-bottom:clamp(2.8rem,9vw,4.2rem)}
  .section-head{margin-bottom:1.6rem}
  h1{font-size:clamp(1.95rem,8.4vw,2.7rem);line-height:1.06}
  h2{font-size:clamp(1.55rem,6.4vw,2.1rem);line-height:1.12}
  h3{font-size:1.12rem}
  p,li{font-size:.98rem}
  .lede{font-size:1rem}
  .btn{min-height:48px;padding-top:.8rem;padding-bottom:.8rem}
  .hero-actions .btn,.cta-route .btn,.br-form .btn{width:100%;justify-content:center}
  .cards,.routes,.review-cards,.make-grid,.price-cards,.team-row{grid-template-columns:1fr}
  .split,.brochure,.promise,.pledge,.cta-form,.vs{grid-template-columns:1fr}
  .over-media .om-small{position:static;width:100%;margin-top:.8rem;border-width:0}

  .footer-bottom{flex-direction:column;align-items:flex-start;gap:.6rem}

  .workstrip{padding-left:18px;padding-right:18px}
  .chips{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .chips button{white-space:nowrap;min-height:40px}
}
@media(max-width:480px){
  .container{padding-left:16px;padding-right:16px}

  .br-cover{max-width:100%}
  .br-form input{flex:1 1 100%}
}


/* ===== Hero-kaart compacter op mobiel ===== */
@media(max-width:1000px){
  .hero > .container{padding-top:clamp(5.5rem,17vh,7.5rem);padding-bottom:1.2rem}
  .hero-glass{padding:1.35rem 1.35rem 1.5rem;border-radius:12px;background:rgba(244,241,234,.96)}
  .hero-glass h1{font-size:clamp(1.7rem,5.6vw,2.3rem);margin-bottom:.7rem}
  .hero-glass .lede{line-height:1.65;margin-bottom:1.2rem}
  .hero-glass .eyebrow{margin-bottom:.5rem}
  .hero-glass .hero-actions{gap:.6rem;margin-bottom:0}
  .hero-glass .hero-advisor{margin-top:1.1rem;padding-top:1rem}
  .hero-glass .hero-advisor p{font-size:.88rem;line-height:1.45}
  .hero-glass .hero-advisor img{width:42px;height:42px}
}
@media(max-width:520px){
  .hero > .container{padding-top:clamp(4.5rem,14vh,6rem);padding-bottom:1rem}
  .hero-glass{padding:1.15rem 1.15rem 1.3rem}
  .hero-glass h1{font-size:clamp(1.6rem,6.4vw,2rem);line-height:1.1}
  .hero-glass .lede{margin-bottom:1.05rem}
  .hero-glass .hero-actions{margin-bottom:0}
  .hero-glass .hero-advisor{margin-top:.95rem;padding-top:.85rem}
  .hero-glass .hero-advisor p{font-size:.85rem}
}


/* ===== Mobiel: steen boven, kaart onderin ===== */
@media(max-width:1000px){
  .hero{min-height:80dvh;justify-content:flex-end}
  .hero::before{background:linear-gradient(180deg,rgba(21,23,19,.1) 0%,rgba(21,23,19,.12) 42%,rgba(21,23,19,.55) 100%)}
  .hero > .container{padding-top:0;padding-bottom:1rem}
  .hero-glass .lede{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
}
@media(max-width:560px){
  .hero{min-height:78dvh}
  .hero-glass .hero-advisor{display:none}
  .hero-glass .lede{-webkit-line-clamp:2;margin-bottom:.95rem}
}


/* ===== Adviseursregel: foto en tekst op één regel, ook mobiel ===== */
@media(max-width:1000px){
  .hero-glass .hero-advisor{display:flex;flex-wrap:nowrap;align-items:center;gap:.75rem}
  .hero-glass .hero-advisor img{flex:0 0 auto}
}
@media(max-width:560px){
  .hero-glass .hero-advisor{display:flex;margin-top:.9rem;padding-top:.8rem}
  .hero-glass .hero-advisor img{width:40px;height:40px}
  .hero-glass .hero-advisor p{font-size:.82rem;line-height:1.4}
}


/* ===== Materiaalroutes als swipe-slider op mobiel ===== */
@media(max-width:760px){
  .material-cards{
    display:grid;grid-auto-flow:column;grid-auto-columns:82%;grid-template-columns:none;
    gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;
    margin:0 -18px;padding:0 18px 1rem;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .material-cards::-webkit-scrollbar{display:none}
  .material-card{scroll-snap-align:start;height:100%}
}
@media(max-width:480px){
  .material-cards{grid-auto-columns:88%;margin:0 -16px;padding:0 16px 1rem}
}


/* ===== Team/mensen als swipe-slider op mobiel ===== */
@media(max-width:760px){
  .team-row{
    display:grid;grid-auto-flow:column;grid-auto-columns:76%;grid-template-columns:none;
    gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;
    margin:0 -18px;padding:0 18px 1rem;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .team-row::-webkit-scrollbar{display:none}
  .team-row > *{scroll-snap-align:start;height:100%}
}
@media(max-width:480px){
  .team-row{grid-auto-columns:84%;margin:0 -16px;padding:0 16px 1rem}
}


/* ===== Secundaire hero-knop: materiaalgids ===== */





/* hero-knoppen: naast elkaar op tablet, onder elkaar op telefoon */
@media(max-width:1000px){
  .hero-glass .hero-actions{display:flex;flex-wrap:nowrap;gap:.6rem}
  .hero .hero-actions .btn{flex:1 1 0;min-width:0;justify-content:center;text-align:center}
}
@media(max-width:640px){
  .hero-glass .hero-actions{flex-wrap:wrap;gap:.55rem}
  .hero .hero-actions .btn{flex:1 1 100%;width:100%;white-space:nowrap;font-size:.92rem}


}


/* ===== Tekstlink met streepje (i.p.v. knop) ===== */
.text-link{
  display:inline-flex;align-items:center;gap:.4rem;
  font-weight:700;font-size:.95rem;color:var(--green);text-decoration:none;
  padding-bottom:.3rem;border-bottom:1px solid var(--gold);
}
.text-link i{font-style:normal;transition:transform .25s ease;color:var(--bronze)}
.text-link:hover{color:var(--green-dark);border-bottom-color:var(--bronze)}
.text-link:hover i{transform:translateX(3px)}


/* ===== Merkenbalk: rustig raster op mobiel ===== */
@media(max-width:760px){
  .brandbar{flex-direction:column;align-items:flex-start;gap:1rem}
  .bb-label{font-size:.72rem;letter-spacing:.16em}
  .bb-logos{
    display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;width:100%;
    background:none;border:0;
  }
  .bb-logos a{
    display:flex;align-items:center;justify-content:center;
    min-height:56px;padding:.6rem .4rem;background:var(--white);
    border:1px solid var(--line);border-radius:3px;
    font-size:.86rem;text-align:center;opacity:1;color:var(--ink-soft);
  }
}
@media(max-width:420px){
  .bb-logos{grid-template-columns:repeat(2,1fr)}
}


/* ===== Hero-rail: rustige, gelijke miniaturen ===== */
.hero-rail{gap:.5rem}
.hero-rail .hb-swrow{gap:.45rem}
.hero-rail .hb-swrow button,
.hero-rail .hb-swrow button:hover,
.hero-rail .hb-swrow button.on{
  width:38px;height:50px;border-radius:4px;
  transition:opacity .3s ease,transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease;
}
.hero-rail .hb-swrow img{opacity:.42;filter:saturate(.85);transition:opacity .3s ease,filter .3s ease}
.hero-rail .hb-swrow button::after{border:1px solid rgba(255,255,255,.28)}
.hero-rail .hb-swrow button:hover img{opacity:.85;filter:none}
.hero-rail .hb-swrow button.on{transform:translateX(-5px);box-shadow:0 10px 24px -14px rgba(0,0,0,.55)}
.hero-rail .hb-swrow button.on img{opacity:1;filter:none}
.hero-rail .hb-swrow button.on::after{border:1px solid var(--gold)}
.hero-rail .hb-swrow button.pop::after{content:none}
.hero-rail .hb-swrow button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

@media(max-width:1000px){
  .hero-rail{gap:.4rem}
  .hero-rail .hb-swrow{gap:.4rem}
  .hero-rail .hb-swrow button,
  .hero-rail .hb-swrow button:hover,
  .hero-rail .hb-swrow button.on{width:42px;height:30px;border-radius:4px}
  .hero-rail .hb-swrow button.on{transform:translateY(-4px)}
}
@media(max-width:520px){
  .hero-rail .hb-swrow button,
  .hero-rail .hb-swrow button:hover,
  .hero-rail .hb-swrow button.on{width:38px;height:28px}
}


/* ===== Hero-rail als diamanttegels, naar het logo ===== */
.hero-rail .hb-swrow{gap:.85rem}
.hero-rail .hb-swrow button,
.hero-rail .hb-swrow button:hover,
.hero-rail .hb-swrow button.on{
  width:34px;height:34px;border-radius:2px;overflow:hidden;
  transform:rotate(45deg);
}
.hero-rail .hb-swrow img{
  transform:rotate(-45deg) scale(1.45);transform-origin:center;
}
.hero-rail .hb-swrow button.on{transform:rotate(45deg) translate(-3px,-3px)}
.hero-rail .hb-swrow button.on::after{border:1.5px solid var(--gold)}

@media(max-width:1000px){
  .hero-rail .hb-swrow{gap:.85rem;flex-direction:row}
  .hero-rail .hb-swrow button,
  .hero-rail .hb-swrow button:hover,
  .hero-rail .hb-swrow button.on{width:30px;height:30px}
  .hero-rail .hb-swrow button.on{transform:rotate(45deg) translate(-3px,-3px)}
}
@media(max-width:520px){
  .hero-rail .hb-swrow{gap:.7rem}
  .hero-rail .hb-swrow button,
  .hero-rail .hb-swrow button:hover,
  .hero-rail .hb-swrow button.on{width:26px;height:26px}
}


/* ===== Hero-rail: strak rechthoekig, chiquer dan de ruiten ===== */
.hero-rail .hb-swrow{gap:.55rem}
.hero-rail .hb-swrow button,
.hero-rail .hb-swrow button:hover,
.hero-rail .hb-swrow button.on{
  width:30px;height:44px;border-radius:0;transform:none;overflow:hidden;
  transition:opacity .35s ease,transform .4s cubic-bezier(.2,.7,.3,1);
}
.hero-rail .hb-swrow img{transform:none;opacity:.34;filter:saturate(.8)}
.hero-rail .hb-swrow button::after{border:1px solid rgba(255,255,255,.22)}
.hero-rail .hb-swrow button:hover img{opacity:.7;filter:none}
.hero-rail .hb-swrow button.on{transform:translateX(-6px);box-shadow:none}
.hero-rail .hb-swrow button.on img{opacity:1;filter:none}
.hero-rail .hb-swrow button.on::after{border:1px solid var(--gold)}

@media(max-width:1000px){
  .hero-rail .hb-swrow{gap:.45rem;flex-direction:row}
  .hero-rail .hb-swrow button,
  .hero-rail .hb-swrow button:hover,
  .hero-rail .hb-swrow button.on{width:40px;height:28px}
  .hero-rail .hb-swrow button.on{transform:translateY(-5px)}
}
@media(max-width:520px){
  .hero-rail .hb-swrow button,
  .hero-rail .hb-swrow button:hover,
  .hero-rail .hb-swrow button.on{width:36px;height:26px}
}


/* ===== Slotblok 11a: crème formulierkaart in het groen ===== */
.cta-form{
  grid-template-columns:.85fr 1.15fr;
  background:var(--green-dark);border:0;
  padding:clamp(1.6rem,3vw,3rem);gap:clamp(1.6rem,3vw,3rem);align-items:start;
}
.cf-side{background:transparent;padding:0}
.cf-side .eyebrow{color:var(--gold)}
.cf-side h2{color:#fff}
.cf-side .lede{color:rgba(255,255,255,.8);margin-bottom:1.4rem;max-width:34ch}
.cf-main{background:var(--paper);border-radius:12px;padding:clamp(1.4rem,2.4vw,2rem)}
.cf-person{display:flex;gap:1rem;align-items:center;margin-bottom:1.3rem;padding-bottom:1.3rem;border-bottom:1px solid var(--line)}
.cf-person .cf-photo{width:64px;height:64px;flex:0 0 auto;aspect-ratio:auto;border-radius:50%;margin:0;overflow:hidden}
.cf-person .cf-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.cf-main .cf-quote{color:var(--ink);font-size:1.15rem;line-height:1.3;margin:0 0 .4rem}
.cf-main .cf-sign{margin:0;padding:0;border:0}
.cf-main .cf-sign b{color:var(--ink)}
.cf-main .cf-sign span{color:var(--ink-soft)}
.cf-direct{margin-top:0}
@media(max-width:1000px){
  .cta-form{grid-template-columns:1fr}
  .cf-person .cf-photo{aspect-ratio:auto;width:58px;height:58px}
}
@media(max-width:520px){
  .cf-person{flex-direction:column;align-items:flex-start;gap:.7rem}
}


/* ===== Materiaalgids: rustiger, ook op mobiel ===== */
.brochure{grid-template-columns:260px 1fr;gap:clamp(2rem,4vw,3.4rem);align-items:center}
.br-cover{box-shadow:0 18px 40px -30px rgba(21,23,19,.45)}
.br-cover > img{height:224px}
.br-cover figcaption{padding:.95rem 1.05rem 1.1rem}
.br-cover .br-logo{width:88px;margin-bottom:.55rem}
.br-cover b{font-size:.95rem}
.br-cover span{font-size:.68rem;letter-spacing:.16em;color:rgba(255,255,255,.6)}
.br-body .lede{max-width:50ch}
.br-list{margin:1.5rem 0 1.7rem;gap:.7rem;max-width:48ch}
.br-list li{font-size:.92rem;line-height:1.5;padding-left:1.35rem}
.br-list li::before{width:.32rem;height:.32rem;top:.6em;background:var(--gold);opacity:.85}
.br-form input{border-radius:6px}
.br-fine{margin-top:.9rem;font-size:.8rem}

@media(max-width:900px){
  .brochure{gap:1.6rem}
  /* cover als rustige liggende strook in plaats van een groot blok */
  .br-cover{max-width:none;display:grid;grid-template-columns:104px 1fr;align-items:center;border-radius:8px;box-shadow:none;border:1px solid var(--line-dark)}
  .br-cover > img{height:100%;min-height:104px}
  .br-cover figcaption{padding:.9rem 1.1rem}
  .br-cover .br-logo{width:74px;margin-bottom:.45rem}
  .br-pages{display:none}
  .br-list{margin:1.2rem 0 1.4rem;gap:.6rem}
}
@media(max-width:600px){
  .br-cover{grid-template-columns:88px 1fr}
  .br-cover > img{min-height:92px}
  .br-cover figcaption{padding:.8rem .95rem}
  .br-cover b{font-size:.9rem}
  .br-list li{font-size:.9rem}
  .br-form{gap:.6rem}
}


/* ===== Scroll-reveal: rustig opkomen ===== */
.reveal-on .rv{opacity:0;transform:translateY(14px);transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1);transition-delay:var(--rvd,0ms);will-change:opacity,transform}
.reveal-on .rv.rv-in{opacity:1;transform:none}
.reveal-on .rv-line{transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.2,.7,.3,1);transition-delay:var(--rvd,0ms)}
.reveal-on .rv-line.rv-in{transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal-on .rv,.reveal-on .rv-line{opacity:1;transform:none;transition:none}
}


/* foto iets rustiger zodat witte highlights de tekst niet storen */
.hero-bgs img{filter:brightness(.9) saturate(.96)}
.hero-glass h1,.hero-glass .lede{text-shadow:none}


/* 1. zachte verdieping vanaf de onderrand */
.hero::before{
  content:"";display:block;position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(10,17,13,.8) 0%,rgba(10,17,13,.62) 26%,rgba(10,17,13,.3) 48%,rgba(10,17,13,.06) 72%,rgba(10,17,13,0) 100%);
}
/* 2. de plaat zelf wordt onderin licht onscherp: rustige ondergrond, geen rand */

.hero > .container{
  position:relative;z-index:2;grid-column:auto;grid-row:auto;background:none;
  max-width:1440px;margin:0 auto;width:100%;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(7rem,14vw,11rem) clamp(20px,3vw,44px) clamp(2.6rem,4vw,3.6rem);
}
.hero-glass{max-width:46rem;color:#fff}
.hero-glass .eyebrow.on-dark{color:var(--gold);border-color:rgba(227,196,155,.4)}
.hero-glass h1{color:#fff;font-size:clamp(2.3rem,4.4vw,4rem)}
.hero-glass .lede{color:rgba(255,255,255,.88);max-width:50ch}



.hero-glass .hero-advisor{border-top-color:rgba(255,255,255,.24)}
.hero-glass .hero-advisor img{border-color:rgba(255,255,255,.3)}
.hero-glass .hero-advisor p{color:rgba(255,255,255,.82)}
.hero-glass .hero-advisor a{color:var(--gold);text-decoration-color:rgba(227,196,155,.6)}
.hero-glass .hero-advisor a:hover{color:#fff}
.hero-rail{position:absolute;top:50%;right:clamp(1rem,1.8vw,2rem);bottom:auto;left:auto;transform:translateY(-50%);z-index:3;margin:0}

@media(max-width:1000px){
  .hero{min-height:min(84vh,700px)}
  .hero-bgs{position:absolute;inset:0;height:auto}
  .hero > .container{padding:clamp(6rem,26vh,9rem) clamp(20px,5vw,28px) clamp(2.2rem,6vw,2.8rem)}
  .hero-glass{max-width:none}
  .hero-glass h1{font-size:clamp(1.95rem,7.4vw,2.7rem)}

  .hero-rail{top:1rem;right:1rem;transform:none}
}


/* Wat maken we: strip start op de containerlijn (logo-lijn) */
.makestrip{
  padding-left:calc(max((100vw - 1440px) / 2, 0px) + clamp(20px,3vw,44px));
  padding-right:calc(max((100vw - 1440px) / 2, 0px) + clamp(20px,3vw,44px));
  scroll-padding-left:calc(max((100vw - 1440px) / 2, 0px) + clamp(20px,3vw,44px));
}


/* Projectenstrip: zelfde startlijn als logo en sectiekop */
.workstrip{
  padding-left:calc(max((100vw - 1440px) / 2, 0px) + clamp(20px,3vw,44px));
  padding-right:calc(max((100vw - 1440px) / 2, 0px) + clamp(20px,3vw,44px));
  scroll-padding-left:calc(max((100vw - 1440px) / 2, 0px) + clamp(20px,3vw,44px));
}
@media(max-width:560px){
  .workstrip,.makestrip{padding-left:20px;padding-right:20px}
}

/* brochure: kort invulveld */
.br-form input{flex:0 1 260px;max-width:260px}
.fo-search input:focus{outline:none;border-color:var(--bronze)}
.fo-group h3{
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 .7rem;padding-bottom:.6rem;border-bottom:1px solid var(--line);
}
.fo{
  display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;width:100%;
  font:inherit;font-size:.92rem;text-align:left;cursor:pointer;background:none;border:0;
  padding:.34rem 0;color:var(--ink-soft);transition:color .16s;position:relative;
}
.fo:hover{color:var(--ink)}
.fo em{font-style:normal;font-size:.74rem;letter-spacing:.04em;color:var(--ink-soft);opacity:.65}
.fo.on{color:var(--green);font-weight:700}
.fo.on span{position:relative}
.fo.on span::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--bronze)}
.fo-sub{
  font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bronze);margin:1rem 0 .2rem;
}
.fo-foot{border-top:1px solid var(--line);padding-top:1rem;display:grid;gap:.7rem}
.fo-reset{font:inherit;font-size:.86rem;font-weight:700;background:none;border:0;padding:0;cursor:pointer;color:var(--green);text-align:left}
.fo-reset:hover{color:var(--bronze)}
.fo-foot p{margin:0;font-size:.82rem;line-height:1.55;color:var(--ink-soft)}

.cat-bar{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-bottom:.9rem;margin-bottom:1.4rem;border-bottom:1px solid var(--line)}
.cat-bar p{margin:0;font-size:.88rem;color:var(--ink-soft)}
.cat-bar b{font-family:var(--font-display);font-size:1.35rem;font-weight:400;color:var(--ink);margin-right:.25rem}
.cat-hint{letter-spacing:.06em;text-transform:uppercase;font-size:.74rem !important;color:var(--bronze) !important}

.mdl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:1.5rem 1.2rem}
.mdl[hidden]{display:none}
.mdl{display:grid;gap:.75rem;text-decoration:none;color:inherit;background:none;border:0;padding:0;transition:none}
.mdl:hover{box-shadow:none;transform:none}
.mdl-pic{position:relative;display:block;overflow:hidden;aspect-ratio:4/5;background:var(--paper-deep);
  box-shadow:0 1px 0 rgba(21,23,19,.06)}
.mdl-pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .4s}
.mdl:hover .mdl-pic img{transform:scale(1.05)}
.mdl-pic::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(21,23,19,.07);transition:box-shadow .25s}
.mdl:hover .mdl-pic::after{box-shadow:inset 0 0 0 1px rgba(167,123,75,.55)}
.mdl-cta{
  position:absolute;left:0;right:0;bottom:0;padding:.7rem .8rem;
  font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:linear-gradient(to top,rgba(16,26,20,.86),rgba(16,26,20,0));
  opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s;
}
.mdl:hover .mdl-cta{opacity:1;transform:none}
.mdl-meta{display:grid;gap:.16rem}
.mdl-meta b{font-family:var(--font-display);font-size:1.06rem;font-weight:400;line-height:1.25;letter-spacing:-.005em}
.mdl-meta em{font-style:normal;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.mdl-empty{grid-column:1/-1;padding:3rem 1.5rem;text-align:center;color:var(--ink-soft);
  border:1px solid var(--line);background:#fff}

@media(max-width:1000px){
  .cat-head{grid-template-columns:1fr;align-items:start;gap:1rem}
  .cat-rail{position:static;grid-template-columns:1fr 1fr;gap:1.2rem 1.8rem;align-items:start}
  .cat-rail .fo-search{grid-column:1/-1}
  .fo-foot{grid-column:1/-1}
  .mdl-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1.2rem .9rem}
  .mdl-cta{opacity:1;transform:none;font-size:.68rem}
}
@media(max-width:560px){
  .cat-rail{grid-template-columns:1fr}
}

/* ============ Modelpagina ============ */
.pdp{padding-top:calc(var(--header-h,84px) + 2.4rem)}
.crumbs{font-size:.82rem;color:var(--ink-soft);margin-bottom:1.6rem}
.crumbs a{color:var(--ink-soft);text-decoration:none}
.crumbs a:hover{color:var(--green)}
.pdp-top{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1.6rem,3vw,3rem);align-items:start}
.pdp-pic{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:0 18px 44px rgba(21,23,19,.1)}
.pdp-pic img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.pdp-info h1{font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.12;margin:.5rem 0 .9rem}
.pdp-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;margin:1.3rem 0 1.5rem}
.pdp-price span{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.pdp-price b{font-family:var(--font-display);font-size:2rem;font-weight:400;color:var(--green)}
.pdp-price small{font-size:.82rem;color:var(--ink-soft);flex:1 1 12rem}
.pdp-usp{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;gap:.55rem;border-top:1px solid var(--line);padding-top:1.3rem}
.pdp-usp li{position:relative;padding-left:1.5rem;font-size:.92rem;color:var(--ink-soft)}
.pdp-usp li::before{content:"";position:absolute;left:0;top:.42em;width:.7rem;height:.4rem;border-left:2px solid var(--bronze);border-bottom:2px solid var(--bronze);transform:rotate(-45deg)}
.pdp-body{display:grid;grid-template-columns:1.4fr .8fr;gap:clamp(1.8rem,3vw,3.4rem);align-items:start}
.pdp-text h2{font-size:clamp(1.5rem,2.2vw,2rem);margin:0 0 .8rem}
.pdp-text h3{font-size:1.05rem;margin:1.8rem 0 .5rem}
.pdp-text p{color:var(--ink-soft);line-height:1.7;margin:0}
.pdp-spec{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem}
.pdp-spec h3{margin:0 0 1rem;font-size:1rem}
.pdp-spec dl{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1rem;margin:0 0 1.4rem;font-size:.88rem}
.pdp-spec dt{color:var(--ink-soft)}
.pdp-spec dd{margin:0;font-weight:600}
.pdp-spec .btn{width:100%;justify-content:center}

@media(max-width:900px){
  .pdp-top,.pdp-body{grid-template-columns:1fr}
  .mdl-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.8rem}
}

.mdl-more{display:flex;justify-content:center;margin-top:2.4rem}
.mdl-more[hidden]{display:none}
.mdl-more button{
  font:inherit;font-size:.86rem;font-weight:700;letter-spacing:.06em;cursor:pointer;
  background:none;border:0;padding:.5rem 0;color:var(--green);
  border-bottom:1px solid var(--bronze);transition:color .2s,border-color .2s;
}
.mdl-more button:hover{color:var(--bronze)}

#modellen.cat{padding-top:var(--section-pad,64px)}


/* ===== Catalogusfilter: steenswatches ===== */
.fo-search{position:relative;display:flex;align-items:center}
.fo-search svg{position:absolute;left:.7rem;color:var(--ink-soft);pointer-events:none}
.fo-search input{padding-left:2.05rem;border-radius:2px;background:#fff}
.fo-search input::placeholder{color:var(--ink-soft);opacity:.7}

.ft-set{display:grid;gap:.4rem}
.ft{
  display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:.7rem;
  width:100%;font:inherit;font-size:.94rem;text-align:left;cursor:pointer;
  background:none;border:0;border-bottom:1px solid transparent;padding:.3rem 0;
  color:var(--ink-soft);transition:color .18s,border-color .18s;
}
.ft:hover{color:var(--ink)}
.ft-pic{width:34px;height:34px;overflow:hidden;border-radius:1px;position:relative;
  box-shadow:inset 0 0 0 1px rgba(21,23,19,.12);filter:saturate(.88);transition:filter .25s,box-shadow .25s}
.ft-pic img{width:100%;height:100%;object-fit:cover;display:block}
.ft:hover .ft-pic{filter:none}
.ft-name{font-weight:600}
.ft-n{font-size:.74rem;color:var(--ink-soft);opacity:.6}
.ft.on{color:var(--green)}
.ft.on .ft-name{font-weight:700}
.ft.on .ft-pic{filter:none;box-shadow:inset 0 0 0 1px var(--bronze),0 0 0 1px var(--bronze)}
.ft-all{grid-template-columns:34px 1fr auto}
.ft-all::before{content:"";width:34px;height:34px;border:1px solid var(--line);border-radius:1px;
  background:linear-gradient(135deg,var(--paper-deep) 0 33%,#e3e0d8 33% 66%,#d6cec0 66%)}
.ft-all.on::before{border-color:var(--bronze)}

.fo{display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:.6rem}
.fo-any,.fo[data-v="all"]{grid-template-columns:1fr auto}
.fo-sw{width:18px;height:18px;overflow:hidden;border-radius:1px;
  box-shadow:inset 0 0 0 1px rgba(21,23,19,.14);filter:saturate(.85);transition:filter .2s,box-shadow .2s}
.fo-sw img{width:100%;height:100%;object-fit:cover;display:block}
.fo:hover .fo-sw{filter:none}
.fo.on .fo-sw{filter:none;box-shadow:inset 0 0 0 1px var(--bronze)}
.fo.on span:not(.fo-sw)::after{bottom:-2px}
.fo-sub{margin:1.1rem 0 .35rem}
.fo-sub + .fo{margin-top:.1rem}

@media(max-width:1000px){
  .ft-set{grid-template-columns:repeat(2,1fr);gap:.5rem 1.4rem}
}


/* Filterkolom: eigen scroll, blijft altijd binnen beeld */
@media(min-width:1001px){
  .cat-rail{
    max-height:calc(100vh - var(--header-h,84px) - 2.8rem);
    overflow-y:auto;overscroll-behavior:contain;
    padding-right:.7rem;margin-right:-.7rem;
    scrollbar-width:thin;scrollbar-color:rgba(21,23,19,.2) transparent;
  }
  .cat-rail::-webkit-scrollbar{width:5px}
  .cat-rail::-webkit-scrollbar-thumb{background:rgba(21,23,19,.18);border-radius:3px}
  .cat-rail::-webkit-scrollbar-track{background:transparent}
  .cat-rail .fo-search{position:sticky;top:0;z-index:2;background:var(--paper);padding-bottom:.6rem}
  .section-paper-deep .cat-rail .fo-search{background:var(--paper-deep)}
}


/* ===== Modelpagina: tabs (CSS-only) ===== */
.pdp-tabs input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.pdp-tabnav{display:flex;flex-wrap:wrap;gap:.2rem 1.6rem;border-bottom:1px solid var(--line);margin-bottom:1.8rem}
.pdp-tabnav label{
  font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);cursor:pointer;padding:.3rem 0 .8rem;position:relative;transition:color .2s;
  white-space:nowrap;
}
.pdp-tabnav label:hover{color:var(--ink)}
.pdp-tabnav label::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--bronze);opacity:0;transition:opacity .2s}
.pdp-panel{display:none}
.pdp-panel h3{font-size:1.05rem;margin:1.6rem 0 .5rem}
.pdp-panel h3:first-child{margin-top:0}
.pdp-panel p{color:var(--ink-soft);line-height:1.75;margin:0 0 .9rem}
.pdp-panel ul{list-style:none;padding:0;margin:0 0 1rem;display:grid;gap:.5rem}
.pdp-panel li{position:relative;padding-left:1.4rem;color:var(--ink-soft);line-height:1.6}
.pdp-panel li::before{content:"";position:absolute;left:0;top:.55em;width:.42rem;height:.42rem;background:var(--bronze);transform:rotate(45deg)}
.pdp-panel dl.mini{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1.2rem;margin:0 0 1rem;font-size:.92rem}
.pdp-panel dl.mini dt{color:var(--ink);font-weight:700}
.pdp-panel dl.mini dd{margin:0;color:var(--ink-soft)}
#pt1:checked ~ .pdp-tabnav label[for=pt1],
#pt2:checked ~ .pdp-tabnav label[for=pt2],
#pt3:checked ~ .pdp-tabnav label[for=pt3],
#pt4:checked ~ .pdp-tabnav label[for=pt4],
#pt5:checked ~ .pdp-tabnav label[for=pt5]{color:var(--green)}
#pt1:checked ~ .pdp-tabnav label[for=pt1]::after,
#pt2:checked ~ .pdp-tabnav label[for=pt2]::after,
#pt3:checked ~ .pdp-tabnav label[for=pt3]::after,
#pt4:checked ~ .pdp-tabnav label[for=pt4]::after,
#pt5:checked ~ .pdp-tabnav label[for=pt5]::after{opacity:1}
#pt1:checked ~ .pdp-panels > .pp1,
#pt2:checked ~ .pdp-panels > .pp2,
#pt3:checked ~ .pdp-panels > .pp3,
#pt4:checked ~ .pdp-panels > .pp4,
#pt5:checked ~ .pdp-panels > .pp5{display:block}
@media(max-width:700px){
  .pdp-tabnav{gap:.2rem 1.1rem;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .pdp-tabnav::-webkit-scrollbar{display:none}
  .pdp-tabnav label{font-size:.76rem}
}


/* Bewijsbalk in ink i.p.v. groen, zodat de groene knop de enige groene actie blijft */
.trust-strip{background:var(--ink);color:rgba(255,255,255,.9)}
.trust-strip .container{border-bottom:1px solid rgba(255,255,255,.08)}


/* ===== Materiaalpagina ===== */
.matpage{padding-top:calc(var(--header-h,84px) + 2.4rem);padding-bottom:2.8rem}
.mp-head{display:grid;grid-template-columns:1.35fr .8fr;gap:clamp(1.8rem,4vw,4rem);align-items:start}
.mp-head h1{font-size:clamp(2rem,3.4vw,3.05rem);line-height:1.08;margin:.5rem 0 1rem}
.mp-head .lede{margin:0 0 1.8rem;max-width:52ch}
.mp-facts{display:grid;gap:0;margin:.4rem 0 0;border-top:1px solid var(--line)}
.mp-facts > div{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:baseline;
  padding:.78rem 0;border-bottom:1px solid var(--line)}
.mp-facts dt{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.mp-facts dd{margin:0;text-align:right;font-weight:600;font-size:.96rem}

.section-flush{padding:0 0 clamp(3rem,6vw,5rem)}
.mp-gallery{
  display:grid;gap:.6rem;
  grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(120px,15vw,215px);
  padding:0 clamp(20px,3vw,44px);max-width:1440px;margin:0 auto;
}
.mp-gallery figure{margin:0;position:relative;overflow:hidden;background:var(--paper-deep)}
.mp-gallery img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.mp-gallery figure:hover img{transform:scale(1.04)}
.mp-gallery figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.4rem .9rem .8rem;
  font-size:.78rem;line-height:1.4;color:#fff;
  background:linear-gradient(to top,rgba(10,17,13,.82),rgba(10,17,13,0));
  opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s;
}
.mp-gallery figure:hover figcaption{opacity:1;transform:none}
.mp-gallery .g1{grid-column:span 2;grid-row:span 2}
.mp-gallery .g2{grid-column:span 2;grid-row:span 1}
.mp-gallery .g3{grid-column:span 1;grid-row:span 1}
.mp-gallery .g4{grid-column:span 1;grid-row:span 1}
.mp-gallery .g5{grid-column:span 4;grid-row:span 1}

.mp-body{display:grid;grid-template-columns:1.5fr .78fr;gap:clamp(2rem,4vw,4rem);align-items:start}
.mp-text h2{font-size:clamp(1.4rem,2.1vw,1.85rem);line-height:1.2;margin:2.4rem 0 .7rem}
.mp-text h2:first-child{margin-top:0}
.mp-text p{color:var(--ink-soft);line-height:1.78;margin:0 0 1rem;max-width:66ch}
.mp-aside{display:grid;gap:1rem;position:sticky;top:calc(var(--header-h,84px) + 1.4rem)}
.mp-card{background:#fff;border:1px solid var(--line);padding:1.5rem}
.mp-card h3{margin:0 0 1rem;font-size:1rem}
.mp-card dl{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1rem;margin:0 0 1.4rem;font-size:.88rem}
.mp-card dt{color:var(--ink-soft)}
.mp-card dd{margin:0;font-weight:600;text-align:right}
.mp-card .btn{width:100%;justify-content:center}
.mp-card-dark{background:var(--green-dark);border-color:var(--green-dark);color:#fff}
.mp-card-dark h3{color:#fff}
.mp-card-dark p{color:rgba(255,255,255,.82);font-size:.9rem;line-height:1.6;margin:0 0 1.2rem}

@media(max-width:1000px){
  .mp-head{grid-template-columns:1fr;gap:1.6rem}
  .mp-body{grid-template-columns:1fr}
  .mp-aside{position:static;grid-template-columns:1fr 1fr}
  .mp-gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(130px,26vw,200px)}
  .mp-gallery .g1{grid-column:span 2;grid-row:span 2}
  .mp-gallery .g2,.mp-gallery .g3,.mp-gallery .g4{grid-column:span 1;grid-row:span 1}
  .mp-gallery .g5{grid-column:span 2}
  .mp-gallery figcaption{opacity:1;transform:none;font-size:.72rem}
}
@media(max-width:620px){
  .mp-aside{grid-template-columns:1fr}
  .mp-facts dd{font-size:.9rem}
}


/* Adviseurskaart in de modelzijbalk */
.mp-help{background:var(--paper-deep);border:1px solid var(--line);padding:1.4rem}
.mp-help-top{display:flex;align-items:center;gap:.85rem;margin-bottom:.9rem}
.mp-help-top img{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:50% 18%;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(21,23,19,.1)}
.mp-help-top b{display:block;font-size:.95rem;line-height:1.3}
.mp-help-top span{display:block;font-size:.78rem;color:var(--ink-soft);letter-spacing:.04em}
.mp-help p{margin:0 0 1rem;font-size:.9rem;line-height:1.6;color:var(--ink-soft)}
.mp-help p em{font-style:italic;color:var(--ink)}
.mp-help-acts{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem}
.mp-help-acts a{font-size:.88rem;font-weight:700;color:var(--green);padding-bottom:.2rem;
  border-bottom:1px solid var(--bronze);text-decoration:none}
.mp-help-acts a:hover{color:var(--bronze)}


/* ===== Subpagina-hero: tekst links op crème, één plaat rechts ===== */
.pagehero{
  padding-top:calc(var(--header-h,84px) + clamp(2.4rem,4vw,3.6rem));
  padding-bottom:clamp(2.4rem,4vw,3.6rem);
  background:var(--paper);border-bottom:1px solid var(--line);
}
.pagehero-in{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.pagehero .crumbs{margin-bottom:1.2rem}
.pagehero h1{font-size:clamp(1.95rem,3.3vw,3rem);line-height:1.08;margin:.5rem 0 1rem;max-width:22ch}
.pagehero .lede{margin:0 0 1.8rem;max-width:50ch}
.pagehero-facts{display:flex;flex-wrap:wrap;gap:0;margin:2rem 0 0;border-top:1px solid var(--line)}
.pagehero-facts > div{padding:.9rem 2.2rem .2rem 0;display:grid;gap:.15rem}
.pagehero-facts dt{font-size:.68rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft)}
.pagehero-facts dd{margin:0;font-family:var(--font-display);font-weight:400;font-size:1.32rem;color:var(--ink)}
.pagehero-pic{margin:0;position:relative;overflow:hidden;border-radius:2px;
  box-shadow:0 26px 60px rgba(21,23,19,.14)}
.pagehero-pic img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.pagehero-pic figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:2.2rem 1.1rem .9rem;
  font-size:.78rem;color:#fff;line-height:1.4;
  background:linear-gradient(to top,rgba(10,17,13,.8),rgba(10,17,13,0));
}
@media(max-width:1000px){
  .pagehero-in{grid-template-columns:1fr;gap:1.8rem}
  .pagehero h1{max-width:none}
  .pagehero-pic img{aspect-ratio:16/10}
}
@media(max-width:560px){
  .pagehero-facts > div{padding-right:1.5rem}
  .pagehero-facts dd{font-size:1.15rem}
}


/* Vergelijkbare modellen als horizontale strip */
.mdl-strip{
  display:flex;gap:1.2rem;overflow-x:auto;scroll-snap-type:x proximity;
  padding-bottom:.8rem;margin-bottom:-.8rem;
  scrollbar-width:thin;scrollbar-color:rgba(21,23,19,.18) transparent;
}
.mdl-strip::-webkit-scrollbar{height:5px}
.mdl-strip::-webkit-scrollbar-thumb{background:rgba(21,23,19,.18);border-radius:3px}
.mdl-strip::-webkit-scrollbar-track{background:transparent}
.mdl-strip > .mdl{flex:0 0 clamp(168px,20vw,216px);scroll-snap-align:start}


/* Ontbrekende knopstijl + header-hoogte */
:root{--header-h:93px}
.btn-outline{background:none;border:1px solid var(--line);color:var(--ink)}
.btn-outline:hover{border-color:var(--bronze);color:var(--green)}
.btn-outline-light{background:none;border:1px solid rgba(255,255,255,.36);color:#fff}
.btn-outline-light:hover{border-color:var(--gold);color:var(--gold)}

/* header is sticky en staat in de flow: geen extra compensatie in de padding */
.pagehero{padding-top:clamp(2.4rem,4vw,3.6rem)}
.matpage,.cat,.subhero,.pdp{padding-top:clamp(2.4rem,4vw,3.6rem)}
#modellen.cat{padding-top:clamp(3rem,5vw,4.6rem)}


/* Modelpagina: plaat groot + toepassingsfoto's eronder */
.pdp-pic{margin:0}
.pdp-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;margin-top:.5rem}
.pdp-thumbs figure{margin:0;position:relative;overflow:hidden;aspect-ratio:1/1;background:var(--paper-deep);cursor:default}
.pdp-thumbs img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .3s;filter:saturate(.92)}
.pdp-thumbs figure:hover img{transform:scale(1.06);filter:none}
.pdp-thumbs figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.4rem .5rem .45rem;
  font-size:.66rem;line-height:1.3;color:#fff;text-align:center;
  background:linear-gradient(to top,rgba(10,17,13,.82),rgba(10,17,13,0));
  opacity:0;transition:opacity .25s;
}
.pdp-thumbs figure:hover figcaption{opacity:1}
@media(max-width:700px){
  .pdp-thumbs{grid-template-columns:repeat(5,1fr);gap:.35rem}
  .pdp-thumbs figcaption{display:none}
}


/* Galerij hoort in de linkerkolom, onder de hoofdfoto */
.pdp-top{grid-template-columns:1.05fr 1fr}
.pdp-pic{grid-column:1;grid-row:1}
.pdp-thumbs{grid-column:1;grid-row:2;margin-top:.55rem}
.pdp-info{grid-column:2;grid-row:1/3}
.pdp-thumbs figure{cursor:pointer}
.pdp-thumbs figure[aria-current=true]{box-shadow:0 0 0 1px var(--bronze)}
.pdp-thumbs figure[aria-current=true] img{filter:none}
@media(max-width:900px){
  .pdp-pic,.pdp-thumbs,.pdp-info{grid-column:1}
  .pdp-info{grid-row:3}
}
.pdp-thumbs{grid-template-columns:repeat(6,1fr)}
@media(max-width:700px){.pdp-thumbs{grid-template-columns:repeat(6,1fr)}}


/* Slotregel onder de modellenstrip: meer lucht en een eigen scheiding */
.mdl-strip + 


/* Galerij sluit aan op de hoofdfoto: zelfde radius, kleine tussenruimte */
.pdp-pic{border-radius:var(--radius);overflow:hidden}
.pdp-thumbs{margin-top:.4rem;gap:.4rem}
.pdp-thumbs figure{border-radius:var(--radius);overflow:hidden}
.pdp-thumbs figure[aria-current=true]{box-shadow:inset 0 0 0 1px var(--bronze),0 0 0 1px var(--bronze)}

.pdp-thumbs figure{aspect-ratio:4/3}


/* Modelpagina: adviseursregel boven de titel + derde CTA */
.pdp-person{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem;padding-bottom:1rem;
  border-bottom:1px solid var(--line)}
.pdp-person img{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:50% 18%;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(21,23,19,.1)}
.pdp-person p{margin:0;font-size:.86rem;line-height:1.45;color:var(--ink-soft)}
.pdp-person a{font-weight:700;color:var(--green);text-decoration:underline;text-decoration-color:var(--bronze);text-underline-offset:3px}
.pdp-person a:hover{color:var(--bronze)}
.pdp-guide{display:inline-flex;align-items:center;gap:.45rem;margin-top:1rem;
  font-size:.88rem;font-weight:700;color:var(--green);text-decoration:none;
  border-bottom:1px solid var(--bronze);padding-bottom:.2rem}
.pdp-guide:hover{color:var(--bronze)}
.pdp-guide svg{color:var(--bronze)}


/* Galerij sluit direct aan: rij 1 volgt de fotohoogte */
.pdp-top{grid-template-rows:max-content 1fr;grid-template-columns:1.18fr 1fr}
.pdp-thumbs{grid-template-columns:repeat(5,1fr);gap:.45rem}
.pdp-thumbs figure{aspect-ratio:1/1}
.pdp-thumbs figure:nth-child(6){display:none}
@media(max-width:900px){
  .pdp-top{grid-template-rows:auto auto auto}
  .pdp-thumbs figure{aspect-ratio:4/3}
}


/* Galerij: alle zes tegels zichtbaar, geen rij-lucht boven de galerij */
.pdp-top{row-gap:0}
.pdp-thumbs{grid-template-columns:repeat(6,1fr);margin-top:.4rem}
.pdp-thumbs figure:nth-child(6){display:block}


/* Galerij: pijlen en teller op de hoofdfoto */
.pdp-pic{position:relative}
.pdp-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.9);color:var(--ink);
  box-shadow:0 4px 16px rgba(21,23,19,.18);
  opacity:0;transition:opacity .25s,background .2s,transform .2s;
}
.pdp-pic:hover .pdp-nav,.pdp-pic:focus-within .pdp-nav{opacity:1}
.pdp-nav:hover{background:#fff}
.pdp-prev{left:.8rem}
.pdp-next{right:.8rem}
.pdp-count{
  position:absolute;right:.9rem;bottom:.9rem;
  padding:.28rem .6rem;border-radius:999px;
  font-size:.74rem;font-weight:700;letter-spacing:.06em;
  background:rgba(10,17,13,.62);color:#fff;
}
@media(max-width:700px){
  .pdp-nav{opacity:1;width:38px;height:38px}
  .pdp-prev{left:.5rem}.pdp-next{right:.5rem}
}


/* ===== 15h: zijbalk kaal en rustig, alleen lijnen ===== */
.pdp-spec{background:none;border:0;padding:0}
.pdp-spec h3{font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 .8rem}
.pdp-spec dl{
  display:grid;grid-template-columns:1fr auto;gap:0;margin:0 0 1.1rem;font-size:.9rem;
  border-top:1px solid var(--line);
}
.pdp-spec dt{padding:.62rem 1rem .62rem 0;border-bottom:1px solid var(--line);color:var(--ink-soft)}
.pdp-spec dd{padding:.62rem 0;border-bottom:1px solid var(--line);margin:0;font-weight:600;text-align:right}
.pdp-spec > .btn{width:100%;justify-content:center}

.mp-help{background:none;border:0;padding:1.3rem 0 0;margin-top:.2rem}
.mp-help-top{gap:.7rem;margin-bottom:0;align-items:center}
.mp-help-top img{width:40px;height:40px}
.mp-help-top b{font-size:.9rem;font-weight:700}
.mp-help-top span{font-size:.76rem}
.mp-help p{display:none}
.mp-help-acts{margin-top:.75rem;gap:.4rem 1.2rem}
.mp-help-acts a{font-size:.86rem}


/* ===== 17c: drie staande kolommen naast de tekst, middelste hoger ===== */
@media(min-width:1001px){.pagehero-in{grid-template-columns:1fr 1fr}}
.pagehero-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;align-items:center;min-width:0}
.pagehero-gal figure{
  margin:0;position:relative;overflow:hidden;border-radius:4px;
  aspect-ratio:2/3;background:var(--paper-deep);
  box-shadow:0 10px 26px rgba(21,23,19,.1);
}
.pagehero-gal figure:nth-child(2){aspect-ratio:2/3.6;box-shadow:0 16px 38px rgba(21,23,19,.16)}
.pagehero-gal img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.pagehero-gal figure:hover img{transform:scale(1.05)}
.pagehero-gal figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.6rem .7rem .6rem;
  font-size:.72rem;line-height:1.35;color:#fff;
  background:linear-gradient(to top,rgba(10,17,13,.84),rgba(10,17,13,0));
  opacity:0;transition:opacity .28s;
}
.pagehero-gal figure:hover figcaption{opacity:1}
@media(max-width:1000px){
  .pagehero-gal figure{aspect-ratio:3/4}
  .pagehero-gal figure:nth-child(2){aspect-ratio:3/3.6}
  .pagehero-gal figcaption{opacity:1;font-size:.68rem}
}
@media(max-width:560px){
  .pagehero-gal{grid-template-columns:1fr 1fr;gap:.4rem}
  .pagehero-gal figure:nth-child(3){display:none}
}


/* Materiaalroutes op keukenbladen */
.mat-routes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.mat-routes a{display:grid;gap:.6rem;text-decoration:none;color:inherit}
.mat-routes .mr-pic{display:block;overflow:hidden;border-radius:4px;aspect-ratio:16/10;background:var(--paper-deep)}
.mat-routes .mr-pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.mat-routes a:hover .mr-pic img{transform:scale(1.05)}
.mat-routes b{font-family:var(--font-display);font-weight:400;font-size:1.35rem}
.mat-routes .mr-d{font-size:.88rem;color:var(--ink-soft)}

/* Vergelijkingstabel op materialen */
.mat-compare{overflow-x:auto}
.mat-compare table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:620px}
.mat-compare th,.mat-compare td{text-align:left;padding:.8rem 1rem;border-bottom:1px solid var(--line)}
.mat-compare thead th{font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);border-bottom-color:var(--ink)}
.mat-compare tbody th{font-weight:600;color:var(--ink);width:34%}
.mat-compare tbody td{color:var(--ink-soft)}
.mat-compare tbody tr:hover td,.mat-compare tbody tr:hover th{background:rgba(167,123,75,.05)}
@media(max-width:800px){
  .mat-routes{grid-template-columns:1fr;gap:1.4rem}
}


/* Stappen als article met nummer (keukenbladen, over ons) */
.steps > article{padding-top:1.3rem;border-top:2px solid var(--line)}
.section-dark .steps > article{border-color:var(--line-dark)}
.steps > article i{
  display:block;font-family:var(--font-display);font-style:normal;font-weight:400;
  font-size:1.5rem;color:var(--bronze);line-height:1;margin-bottom:.5rem;
}
.steps > article h3{margin:0 0 .4rem;font-size:1.02rem}
.steps > article p{margin:0;font-size:.9rem;line-height:1.6;color:var(--ink-soft)}
.section-dark .steps > article p{color:rgba(255,255,255,.76)}
.section-dark .steps > article h3{color:#fff}

/* Teamraster (over ons) */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.4rem}
.team-grid article{display:grid;gap:.7rem}
.team-grid .tg-pic{display:block;overflow:hidden;aspect-ratio:4/3;background:var(--paper-deep)}
.team-grid .tg-pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.team-grid article:hover .tg-pic img{transform:scale(1.05)}
.team-grid h3{margin:0;font-size:1rem}
.team-grid p{margin:0;font-size:.89rem;line-height:1.6;color:var(--ink-soft)}
@media(max-width:700px){
  .team-grid{grid-template-columns:1fr 1fr;gap:1rem}
  .team-grid p{font-size:.84rem}
}


/* Contactformulier */
.cform{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(1.8rem,3.4vw,3.4rem);align-items:start}
.cf-side h2{font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.18;margin:.5rem 0 .8rem}
.cf-side .lede{margin:0 0 1.5rem}
.cf-person{display:flex;align-items:center;gap:.75rem;padding:1.1rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cf-person img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 18%;flex:0 0 auto;box-shadow:0 0 0 1px rgba(21,23,19,.1)}
.cf-person p{margin:0;font-size:.88rem;line-height:1.5;color:var(--ink-soft)}
.cf-person a{font-weight:700;color:var(--green);text-decoration:underline;text-decoration-color:var(--bronze);text-underline-offset:3px}
.cf-points{list-style:none;padding:0;margin:1.3rem 0 0;display:grid;gap:.55rem}
.cf-points li{position:relative;padding-left:1.5rem;font-size:.9rem;line-height:1.55;color:var(--ink-soft)}
.cf-points li::before{content:"";position:absolute;left:0;top:.45em;width:.7rem;height:.4rem;border-left:2px solid var(--bronze);border-bottom:2px solid var(--bronze);transform:rotate(-45deg)}

.cf-form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.3rem,2.4vw,1.9rem);display:grid;gap:1rem}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.cf-form label{display:grid;gap:.35rem;font-size:.8rem;font-weight:700;letter-spacing:.04em;color:var(--ink-soft)}
.cf-form input,.cf-form select,.cf-form textarea{
  font:inherit;font-size:.94rem;font-weight:400;color:var(--ink);
  padding:.66rem .8rem;border:1px solid var(--line);border-radius:4px;background:var(--paper);
}
.cf-form input:focus,.cf-form select:focus,.cf-form textarea:focus{outline:none;border-color:var(--bronze);background:#fff}
.cf-form textarea{resize:vertical}
.cf-form .btn{justify-self:start}
.cf-fine{margin:0;font-size:.8rem;color:var(--ink-soft)}
@media(max-width:900px){
  .cform{grid-template-columns:1fr}
}
@media(max-width:520px){
  .cf-row{grid-template-columns:1fr}
  .cf-form .btn{justify-self:stretch;text-align:center;justify-content:center}
}


/* ===================== Offerte-configurator ===================== */
.cfg{padding-top:clamp(2.2rem,4vw,3.4rem)}
.cfg-head{max-width:60ch;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.cfg-head h1{font-size:clamp(1.9rem,3.2vw,2.9rem);line-height:1.1;margin:.5rem 0 .9rem}
.cfg-head h1 em{font-style:italic;color:var(--green)}
.cfg-head .lede{margin:0}
.cfg-layout{display:grid;grid-template-columns:1fr 350px;gap:clamp(1.4rem,2.4vw,2.2rem);align-items:start}

.cfg-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:clamp(1.4rem,2.6vw,2.2rem);
  box-shadow:0 18px 44px rgba(21,23,19,.06)}
.cfg-steps{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;margin:0 0 1.8rem;padding:0}
.cfg-steps li{
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
  padding-top:.7rem;border-top:2px solid var(--paper-deep);cursor:pointer;transition:color .2s,border-color .2s;
}
.cfg-steps li b{font-weight:700}
.cfg-steps li.on{border-top-color:var(--green);color:var(--ink)}
.cfg-steps li.cur{color:var(--green)}
.cfg-steps li:hover{color:var(--ink)}

.cfg-panel{display:none}
.cfg-panel.on{display:block;animation:cfgIn .28s ease}
@keyframes cfgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cfg-kicker{display:block;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze);margin-bottom:.5rem}
.cfg-panel h2{font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.14;margin:0 0 .5rem}
.cfg-sub{margin:0 0 1.4rem;color:var(--ink-soft);font-size:.94rem;line-height:1.6;max-width:56ch}

.cf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}
.cf-grid-3{grid-template-columns:repeat(3,1fr)}
.cf-grid-4{grid-template-columns:repeat(4,1fr)}
.cf-opt{
  font:inherit;text-align:left;cursor:pointer;display:grid;gap:0;padding:0;overflow:hidden;
  background:var(--paper);border:1px solid var(--line);border-radius:10px;color:inherit;
  transition:border-color .2s,box-shadow .2s,transform .2s;position:relative;
}
.cf-opt:hover{border-color:var(--bronze);transform:translateY(-2px);box-shadow:0 10px 24px rgba(21,23,19,.08)}
.cf-opt.on{border-color:var(--green);box-shadow:0 0 0 1px var(--green)}
.cf-opt.on::after{
  content:"";position:absolute;top:.55rem;right:.55rem;width:22px;height:22px;border-radius:50%;
  background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
}
.cf-opt .o-pic{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--paper-deep)}
.cf-opt .o-pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.cf-opt:hover .o-pic img{transform:scale(1.05)}
.cf-opt .o-txt{display:grid;gap:.2rem;padding:.75rem .85rem .9rem}
.cf-opt .o-txt b{font-size:.94rem;font-weight:700;line-height:1.3}
.cf-opt .o-txt small{font-size:.8rem;color:var(--ink-soft);line-height:1.45}
.cf-opt .o-txt em{font-style:normal;font-size:.82rem;font-weight:700;color:var(--green);margin-top:.15rem}
.cf-plain .cf-opt{align-content:start}
.cf-opt .o-ico{display:flex;align-items:center;justify-content:center;height:52px;padding-top:.6rem}
.cf-opt .o-ico i{display:block;background:var(--ink-soft);transition:background .2s}
.cf-opt.on .o-ico i{background:var(--green)}
.ic-recht{width:34px;height:4px;border-radius:2px}
.ic-hoek{width:26px;height:26px;background:none !important;border-left:4px solid currentColor;border-top:4px solid currentColor;color:var(--ink-soft)}
.cf-opt.on .ic-hoek{color:var(--green)}
.ic-eiland{width:30px;height:5px;border-radius:2px;box-shadow:0 9px 0 -2px currentColor;color:transparent}
.ic-zelf{width:24px;height:24px;background:none !important;border:2px solid var(--ink-soft);border-radius:3px;transform:rotate(45deg)}
.cf-opt.on .ic-zelf{border-color:var(--green)}
.ic-d1{width:30px;height:3px}.ic-d2{width:30px;height:5px}.ic-d3{width:30px;height:7px}.ic-d4{width:30px;height:10px}
.ic-r1{width:30px;height:6px}
.ic-r2{width:30px;height:6px;clip-path:polygon(0 0,100% 0,100% 100%,3px 100%)}
.ic-r3{width:30px;height:8px;border-radius:4px}
.ic-r4{width:30px;height:11px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 60%,6px 60%)}
.o-pic-plain{display:flex !important;align-items:center;justify-content:center;aspect-ratio:16/10;background:rgba(30,74,53,.06)}
.ic-drop{width:16px;height:20px;background:var(--green);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2s6 7 6 11a6 6 0 0 1-12 0c0-4 6-11 6-11z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2s6 7 6 11a6 6 0 0 1-12 0c0-4 6-11 6-11z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat}

.cf-unsure{
  display:block;width:100%;margin-top:.7rem;font:inherit;font-size:.9rem;cursor:pointer;
  padding:.75rem;border:1px dashed var(--line);border-radius:10px;background:none;color:var(--ink-soft);
  transition:border-color .2s,color .2s;
}
.cf-unsure:hover,.cf-unsure.on{border-color:var(--bronze);color:var(--ink)}
.cf-modelwrap{margin-top:1.6rem}
.cf-label{margin:1.6rem 0 .7rem;font-size:.86rem;font-weight:700;color:var(--ink)}
.cf-label span{font-weight:400;color:var(--ink-soft)}
.cf-modelwrap .cf-label{margin-top:0}
.cf-model[hidden]{display:none}

.cf-fields{display:grid;gap:1rem;margin-top:1.5rem}
.cf-fields label{display:grid;gap:.4rem;font-size:.86rem;font-weight:700}
.cf-fields label span{font-weight:400;color:var(--ink-soft)}
.cf-unit{position:relative;display:block}
.cf-unit input{
  width:100%;font:inherit;font-size:1rem;padding:.72rem 3rem .72rem .85rem;
  border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);
}
.cf-unit input:focus{outline:none;border-color:var(--bronze);background:#fff}
.cf-unit i{position:absolute;right:.9rem;top:50%;transform:translateY(-50%);font-style:normal;font-size:.85rem;color:var(--ink-soft)}
.cf-area{margin:1rem 0 0;font-size:.92rem;color:var(--ink-soft)}
.cf-area b{color:var(--ink)}

.cf-rows{display:grid;gap:.5rem}
.cf-row{
  display:grid;grid-template-columns:1fr auto auto;gap:1rem;align-items:center;cursor:pointer;
  padding:.8rem 1rem;border:1px solid var(--line);border-radius:10px;background:var(--paper);
  transition:border-color .2s,box-shadow .2s;
}
.cf-row:hover{border-color:var(--bronze)}
.cf-row.on{border-color:var(--green);box-shadow:0 0 0 1px var(--green);background:rgba(30,74,53,.04)}
.cf-row .cr-t{display:grid;gap:.1rem}
.cf-row .cr-t b{font-size:.92rem}
.cf-row .cr-t small{font-size:.8rem;color:var(--ink-soft)}
.cf-row .cr-p{font-size:.86rem;font-weight:700;color:var(--green)}
.cf-row input{width:18px;height:18px;accent-color:var(--green)}

.cf-summary{margin:0 0 1.4rem;padding:.9rem 1rem;background:var(--paper);border-left:2px solid var(--bronze);
  font-size:.92rem;line-height:1.6;color:var(--ink-soft)}
.cf-summary b{color:var(--ink)}
.cf-form-flat{background:none;border:0;padding:0;gap:1rem}
.cf-row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.cf-form-flat label{display:grid;gap:.35rem;font-size:.86rem;font-weight:700;color:var(--ink)}
.cf-form-flat label span{font-weight:400;color:var(--ink-soft)}
.cf-form-flat input[type=text],.cf-form-flat input[type=tel],.cf-form-flat input[type=email],
.cf-form-flat select,.cf-form-flat textarea{
  font:inherit;font-size:.96rem;font-weight:400;color:var(--ink);
  padding:.72rem .85rem;border:1px solid var(--line);border-radius:8px;background:var(--paper);
}
.cf-form-flat input:focus,.cf-form-flat select:focus,.cf-form-flat textarea:focus{outline:none;border-color:var(--bronze);background:#fff}
.cf-check{display:flex !important;align-items:flex-start;gap:.6rem;font-weight:400 !important;font-size:.88rem;color:var(--ink-soft)}
.cf-check input{width:17px;height:17px;margin-top:.15rem;accent-color:var(--green)}

.cfg-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--line)}

/* zijbalk met live prijs */
.cfg-side{position:sticky;top:calc(var(--header-h,93px) + 1.2rem)}
.cs-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.5rem;
  box-shadow:0 18px 44px rgba(21,23,19,.06)}
.cs-kicker{display:block;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.5rem}
.cs-price{margin:0 0 .5rem;font-family:var(--font-display);font-weight:400;font-size:clamp(1.5rem,2.2vw,1.95rem);line-height:1.1;color:var(--ink)}
.cs-price span{font-size:.7em;color:var(--ink-soft)}
.cs-note{margin:0 0 1.1rem;font-size:.84rem;line-height:1.5;color:var(--ink-soft)}
.cs-lines{display:grid;gap:.5rem;margin:0 0 1rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.86rem}
.cs-lines > div{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:baseline}
.cs-lines dt{margin:0;color:var(--ink-soft);line-height:1.4}
.cs-lines dd{margin:0;font-weight:700;text-align:right;white-space:nowrap}
.cs-lines .cs-free{color:var(--green)}
.cs-lines .cs-free span,.cs-lines dd span{font-weight:400;font-size:.9em;color:var(--ink-soft)}
.cs-fine{margin:0 0 1.1rem;font-size:.8rem;line-height:1.5;color:var(--ink-soft)}
.cs-trust{list-style:none;padding:1rem 0 0;margin:0 0 1.2rem;border-top:1px solid var(--line);display:grid;gap:.55rem;font-size:.86rem;color:var(--ink-soft)}
.cs-stars{display:flex;align-items:center;gap:.5rem}
.cs-stars i{font-style:normal;color:var(--gold);letter-spacing:1px;font-size:.85rem}
.cs-stars b{color:var(--ink)}
.cs-ic{position:relative;padding-left:1.4rem}
.cs-ic::before{content:"";position:absolute;left:0;top:.15em;width:1rem;height:1rem;background:var(--bronze)}
.cs-clock::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat}
.cs-pin::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 21s7-6.4 7-11a7 7 0 1 0-14 0c0 4.6 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 21s7-6.4 7-11a7 7 0 1 0-14 0c0 4.6 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E") center/contain no-repeat}
.cs-person{display:flex;align-items:center;gap:.7rem;padding:.9rem;background:var(--paper);border-radius:10px;margin-bottom:.7rem}
.cs-person img{width:42px;height:42px;border-radius:50%;object-fit:cover;object-position:50% 18%;flex:0 0 auto}
.cs-person b{display:block;font-size:.9rem}
.cs-person small{display:block;font-size:.78rem;color:var(--ink-soft)}
.cs-acts{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.cs-acts .btn{justify-content:center;padding:.6rem;font-size:.88rem}

@media(max-width:1080px){
  .cfg-layout{grid-template-columns:1fr}
  .cfg-side{position:static;order:-1}
  .cs-card{display:grid;grid-template-columns:1fr 1fr;gap:0 1.6rem;align-items:start}
  .cs-card .cs-kicker,.cs-card .cs-price,.cs-card .cs-note{grid-column:1}
  .cs-lines,.cs-fine{grid-column:1}
  .cs-trust{grid-column:2;grid-row:1/4;border-top:0;padding-top:0}
  .cs-person,.cs-acts{grid-column:2}
}
@media(max-width:820px){
  .cf-grid,.cf-grid-3,.cf-grid-4{grid-template-columns:repeat(2,1fr)}
  .cfg-steps{grid-template-columns:repeat(5,1fr);gap:.3rem}
  .cfg-steps li{font-size:.6rem;letter-spacing:.06em}
  .cf-row2{grid-template-columns:1fr}
  .cs-card{grid-template-columns:1fr}
  .cs-card > *{grid-column:1 !important;grid-row:auto !important}
  .cs-trust{border-top:1px solid var(--line);padding-top:1rem}
}
@media(max-width:520px){
  .cfg-nav{flex-direction:column-reverse;align-items:stretch}
  .cfg-nav .btn{justify-content:center;text-align:center}
  .cf-row{grid-template-columns:1fr auto;gap:.5rem 1rem}
  .cf-row input{grid-column:2}
}


/* Duidelijker iconen in de configurator */
.cf-opt .o-ico{height:60px}
.ic-eiland{width:30px;height:5px;border-radius:2px;box-shadow:0 10px 0 -1px var(--ink-soft)}
.cf-opt.on .ic-eiland{box-shadow:0 10px 0 -1px var(--green)}
.ic-r1{width:34px;height:14px;border-radius:0}
.ic-r2{width:34px;height:14px;clip-path:polygon(0 0,100% 0,100% 100%,10px 100%)}
.ic-r3{width:34px;height:16px;border-radius:8px}
.ic-r4{width:34px;height:22px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 45%,9px 45%)}
.ic-d1{width:34px;height:4px}.ic-d2{width:34px;height:8px}.ic-d3{width:34px;height:13px}.ic-d4{width:34px;height:19px}

/* Bevestiging na verzenden */
.cf-done{display:grid;gap:1rem;justify-items:start;padding:1.4rem 0}
.cf-done .cf-tick{width:46px;height:46px;border-radius:50%;background:var(--green);
  display:flex;align-items:center;justify-content:center}
.cf-done .cf-tick svg{color:#fff}
.cf-done h2{margin:0}
.cf-done p{margin:0;color:var(--ink-soft);line-height:1.65;max-width:56ch}


/* ===================================================================
   Uniform: tekst en beeld naast elkaar altijd 50/50 met dezelfde ruimte
   =================================================================== */
:root{--split-gap:clamp(2rem,4vw,3.6rem)}
@media(min-width:1001px){
  .split,
  .promise,
  .pledge,
  .faq-layout,
  .pagehero-in,
  .mp-head,
  .cat-head,
  .cform,
  .pdp-top{
    grid-template-columns:1fr 1fr;
  }
}
.split,.promise,.pledge,.faq-layout,.pagehero-in,.mp-head,.cat-head,.cform,.pdp-top{
  column-gap:var(--split-gap);
}
.split,.promise,.pledge,.faq-layout,.pagehero-in,.mp-head,.cform{row-gap:var(--split-gap)}
.pdp-top{row-gap:0}
.cta-form{column-gap:var(--split-gap)}
@media(min-width:1001px){.cta-form{grid-template-columns:1fr 1fr}}


/* Eén gedeeld breekpunt voor alle splitsecties: geen tussenband meer */
@media(max-width:1000px){
  .split,.promise,.pledge,.faq-layout,.pagehero-in,.mp-head,.cat-head,.cform,.cta-form,.pdp-top{
    grid-template-columns:1fr;
  }
}


/* ===================== Zakelijk (B2B) ===================== */
.b2b-bar{background:var(--ink);color:#fff}
.b2b-bar .container{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem 2rem;
  padding-top:1.6rem;padding-bottom:1.6rem}
.b2b-bar div{display:grid;gap:.2rem}
.b2b-bar b{font-family:var(--font-display);font-weight:400;font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1;color:#fff}
.b2b-bar span{font-size:.84rem;line-height:1.4;color:rgba(255,255,255,.68)}

.b2b-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.b2b-cards article{display:grid;gap:.45rem;align-content:start;padding-top:1.2rem;border-top:2px solid var(--line)}
.b2b-cards i{font-style:normal;font-family:var(--font-display);font-size:1.4rem;color:var(--bronze);line-height:1}
.b2b-cards h3{margin:0;font-size:1.05rem}
.b2b-cards p{margin:0;font-size:.92rem;line-height:1.65;color:var(--ink-soft)}

.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:1.1rem}
.flow article{display:grid;gap:.4rem;align-content:start;padding-top:1.1rem;border-top:2px solid var(--bronze);position:relative}
.flow .fl-d{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze)}
.flow h3{margin:0;font-size:1rem}
.flow p{margin:0;font-size:.88rem;line-height:1.6;color:var(--ink-soft)}

.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;align-items:start}
.tiers article{background:rgba(255,255,255,.06);border:1px solid var(--line-dark);border-radius:14px;
  padding:clamp(1.3rem,2.4vw,1.9rem);display:grid;gap:.5rem;align-content:start;position:relative}
.tiers .ti-mid{background:#fff;border-color:#fff;color:var(--ink);box-shadow:0 22px 50px rgba(0,0,0,.22)}
.tiers h3{margin:0;font-size:1.15rem;color:#fff}
.tiers .ti-mid h3{color:var(--ink)}
.tiers .ti-sub{margin:0 0 .6rem;font-size:.84rem;color:rgba(255,255,255,.6)}
.tiers .ti-mid .ti-sub{color:var(--ink-soft)}
.tiers ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.tiers li{position:relative;padding-left:1.4rem;font-size:.9rem;line-height:1.55;color:rgba(255,255,255,.8)}
.tiers .ti-mid li{color:var(--ink-soft)}
.tiers li::before{content:"";position:absolute;left:0;top:.45em;width:.68rem;height:.38rem;
  border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}
.tiers .ti-mid li::before{border-color:var(--bronze)}
.ti-badge{position:absolute;top:-.7rem;left:clamp(1.3rem,2.4vw,1.9rem);
  font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:var(--bronze);color:#fff;padding:.3rem .55rem;border-radius:3px}
.ti-fine{margin:1.8rem 0 0;font-size:.88rem;color:rgba(255,255,255,.62)}
.ti-fine a{color:var(--gold);font-weight:700}

.b2b-cta{display:grid;grid-template-columns:1fr 1fr;gap:var(--split-gap);align-items:start;text-align:left}
.b2b-cta h2{margin:.4rem 0 .8rem}
.b2b-cta > div > p{margin:0 0 1.6rem;color:rgba(255,255,255,.8);line-height:1.7;max-width:46ch}
.b2b-contact{display:flex;align-items:center;gap:.8rem;padding-top:1.3rem;border-top:1px solid var(--line-dark)}
.b2b-contact img{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:50% 18%;flex:0 0 auto}
.b2b-contact b{display:block;font-size:.94rem;color:#fff}
.b2b-contact span{display:block;font-size:.86rem;color:rgba(255,255,255,.72)}
.b2b-contact a{color:var(--gold);font-weight:700}
.b2b-form{background:var(--paper);border-radius:14px;padding:clamp(1.3rem,2.4vw,1.9rem);display:grid;gap:1rem;text-align:left}
.b2b-form label{display:grid;gap:.35rem;font-size:.84rem;font-weight:700;color:var(--ink)}
.b2b-form label span{font-weight:400;color:var(--ink-soft)}
.b2b-form input,.b2b-form select,.b2b-form textarea{
  font:inherit;font-size:.95rem;font-weight:400;color:var(--ink);
  padding:.7rem .85rem;border:1px solid var(--line);border-radius:8px;background:#fff;
}
.b2b-form input:focus,.b2b-form select:focus,.b2b-form textarea:focus{outline:none;border-color:var(--bronze)}
.b2b-form textarea{resize:vertical}
.b2b-form .btn{justify-self:start}
.b2b-form .cf-fine{color:var(--ink-soft)}

@media(max-width:1000px){
  .b2b-bar .container{grid-template-columns:repeat(2,1fr)}
  .b2b-cards{grid-template-columns:repeat(2,1fr)}
  .flow{grid-template-columns:repeat(2,1fr);gap:1.3rem}
  .tiers{grid-template-columns:1fr}
  .b2b-cta{grid-template-columns:1fr}
}
@media(max-width:600px){
  .b2b-cards{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr}
  .b2b-form .btn{justify-self:stretch;justify-content:center}
}


/* Foto in een split-blok: liggend en begrensd, niet de portretmaat van .pledge */
.split .pl-photo{aspect-ratio:4/3;max-height:520px;border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.split .pl-photo img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:1000px){
  .split .pl-photo{aspect-ratio:16/10;max-height:340px}
}
:root{--rvd:0ms;--section-pad:clamp(3rem,6vw,5.5rem)}


/* Probleem naast oplossing (B2B-subpagina's) */
.pain-rows{display:grid;gap:0;border-top:1px solid var(--line)}
.pain-rows article{
  display:grid;grid-template-columns:1fr 1.15fr;gap:.5rem var(--split-gap);
  padding:1.15rem 0;border-bottom:1px solid var(--line);align-items:start;
}
.pain-rows .pr-p{
  position:relative;padding-left:1.6rem;font-weight:700;color:var(--ink);line-height:1.5;
}
.pain-rows .pr-p::before{
  content:"";position:absolute;left:0;top:.42em;width:.8rem;height:.8rem;
  background:var(--clay,#b4553f);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/contain no-repeat;
}
.pain-rows .pr-s{
  position:relative;padding-left:1.6rem;color:var(--ink-soft);line-height:1.65;font-size:.95rem;
}
.pain-rows .pr-s::before{
  content:"";position:absolute;left:0;top:.5em;width:.7rem;height:.4rem;
  border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg);
}
@media(max-width:700px){
  .pain-rows article{grid-template-columns:1fr;gap:.5rem;padding:1rem 0}
}


/* Middelste hero-foto blijft ook gestapeld de hoogste; split-foto vult zijn kolom */
@media(max-width:1000px){
  .pagehero-gal figure{aspect-ratio:3/4}
  .pagehero-gal figure:nth-child(2){aspect-ratio:3/4.6}
  .split .pl-photo{aspect-ratio:auto;max-height:none;width:100%}
  .split .pl-photo img{width:100%;height:auto;max-height:340px;object-fit:cover}
}


/* ===== Typografie: Newsreader (display) + Archivo (tekst) ===== */
h1,h2,h3{font-weight:400;letter-spacing:-.012em}
h1{font-optical-sizing:auto}
.hero-glass h1,.pagehero h1,.cfg-head h1,.cat-head h1,.mp-head h1{font-weight:400}
body{letter-spacing:-.002em}
.eyebrow,.f-col h5,.mega-group h4,.cfg-kicker,.cs-kicker,.fo-group h3,.mf-label,.cf-label,
.fl-d,.ti-badge,.mdl-meta em,.crumbs{letter-spacing:.14em}
.btn{font-weight:700;letter-spacing:.005em}
.lede{font-weight:400}
strong,b{font-weight:700}
.mdl-meta b,.cs-price,.pdp-price b,.b2b-bar b,.pagehero-facts dd,.cat-bar b{
  font-family:var(--font-display);font-weight:400;letter-spacing:-.015em;
}
.faq summary{font-weight:700;letter-spacing:-.004em}


/* ===== Contactformulier (eigen klassen, geen conflict met het slotformulier) ===== */
.ct-wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--split-gap);align-items:start}
.ct-side h2{font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.18;margin:.5rem 0 .8rem}
.ct-side .lede{margin:0 0 1.5rem}
.ct-person{display:flex;align-items:center;gap:.75rem;padding:1.1rem 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ct-person img{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:50% 18%;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(21,23,19,.1)}
.ct-person p{margin:0;font-size:.9rem;line-height:1.5;color:var(--ink-soft)}
.ct-person a{font-weight:700;color:var(--green);text-decoration:underline;text-decoration-color:var(--bronze);text-underline-offset:3px}
.ct-points{list-style:none;padding:0;margin:1.3rem 0 0;display:grid;gap:.55rem}
.ct-points li{position:relative;padding-left:1.5rem;font-size:.92rem;line-height:1.55;color:var(--ink-soft)}
.ct-points li::before{content:"";position:absolute;left:0;top:.45em;width:.7rem;height:.4rem;
  border-left:2px solid var(--bronze);border-bottom:2px solid var(--bronze);transform:rotate(-45deg)}

.ct-form{background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:clamp(1.4rem,2.6vw,2.1rem);display:grid;gap:1.05rem;
  box-shadow:0 18px 44px rgba(21,23,19,.06)}
.ct-row{display:grid;grid-template-columns:1fr 1fr;gap:1.05rem}
.ct-form label{display:grid;gap:.4rem;font-size:.84rem;font-weight:700;color:var(--ink)}
.ct-form input,.ct-form select,.ct-form textarea{
  font:inherit;font-size:.96rem;font-weight:400;color:var(--ink);
  padding:.75rem .9rem;border:1px solid var(--line);border-radius:8px;background:var(--paper);
  transition:border-color .18s,background .18s;
}
.ct-form input:focus,.ct-form select:focus,.ct-form textarea:focus{outline:none;border-color:var(--bronze);background:#fff}
.ct-form input:invalid:not(:placeholder-shown),.ct-form textarea:invalid:not(:placeholder-shown){border-color:var(--clay,#b4553f)}
.ct-form textarea{resize:vertical;min-height:120px}
.ct-form .btn{justify-self:start;margin-top:.2rem}
.ct-fine{margin:0;font-size:.82rem;line-height:1.5;color:var(--ink-soft)}

.ct-done{background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:clamp(1.6rem,3vw,2.4rem);display:grid;gap:.8rem;justify-items:start;
  box-shadow:0 18px 44px rgba(21,23,19,.06)}
.ct-tick{width:46px;height:46px;border-radius:50%;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center}
.ct-done h3{margin:0;font-size:clamp(1.3rem,2vw,1.7rem)}
.ct-done p{margin:0;color:var(--ink-soft);line-height:1.65;max-width:48ch}

@media(max-width:1000px){.ct-wrap{grid-template-columns:1fr}}
@media(max-width:560px){
  .ct-row{grid-template-columns:1fr}
  .ct-form .btn{justify-self:stretch;justify-content:center}
}


/* ===== Inspiratie: projecten onder elkaar, tekst naast beeld ===== */
.proj-list{display:grid;gap:clamp(3rem,6vw,5rem)}
.proj{display:grid;grid-template-columns:1fr 1fr;gap:var(--split-gap);align-items:center}
.proj:nth-child(even) .proj-pics{order:2}
.proj-pics{position:relative;padding-bottom:2.6rem;padding-right:1.6rem}
.pp-main{margin:0;overflow:hidden;border-radius:4px;aspect-ratio:4/3;background:var(--paper-deep);
  box-shadow:0 18px 44px rgba(21,23,19,.12)}
.pp-main img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.proj:hover .pp-main img{transform:scale(1.04)}
.pp-det{position:absolute;right:0;bottom:0;width:40%;margin:0;overflow:hidden;border-radius:4px;
  aspect-ratio:1/1;border:5px solid var(--paper);box-shadow:0 14px 34px rgba(21,23,19,.18)}
.section-paper-deep .pp-det{border-color:var(--paper-deep)}
.pp-det img{width:100%;height:100%;object-fit:cover;display:block}
.proj-n{display:block;font-family:var(--font-display);font-size:1.25rem;color:var(--bronze);line-height:1;margin-bottom:.5rem}
.proj-txt h3{font-size:clamp(1.4rem,2.3vw,2rem);line-height:1.14;margin:0 0 1rem}
.proj-meta{display:flex;flex-wrap:wrap;gap:0 2.4rem;margin:0 0 1.1rem;padding-bottom:1.1rem;border-bottom:1px solid var(--line)}
.proj-meta > div{display:grid;gap:.15rem}
.proj-meta dt{font-size:.68rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft)}
.proj-meta dd{margin:0;font-weight:600;font-size:.95rem}
.proj-txt p{margin:0 0 1.2rem;color:var(--ink-soft);line-height:1.75;max-width:52ch}
@media(max-width:1000px){
  .proj{grid-template-columns:1fr;gap:1.4rem}
  .proj:nth-child(even) .proj-pics{order:0}
  .proj-pics{padding-bottom:2rem;padding-right:1rem}
  .pp-det{width:36%}
}
@media(max-width:560px){
  .pp-main{aspect-ratio:16/11}
  .proj-meta{gap:0 1.6rem}
}


/* ===== Projectkaarten en projectpagina ===== */














.prj{padding-top:clamp(2.2rem,4vw,3.4rem)}
.prj-head{display:grid;grid-template-columns:1fr auto;gap:var(--split-gap);align-items:end;
  padding-bottom:1.8rem;margin-bottom:1.6rem;border-bottom:1px solid var(--line)}
.prj-head h1{font-size:clamp(1.9rem,3.2vw,2.9rem);line-height:1.1;margin:.5rem 0 .8rem}
.prj-head .lede{margin:0;max-width:52ch}
.prj-meta{display:flex;flex-wrap:wrap;gap:1.2rem 2.4rem;margin:0}
.prj-meta > div{display:grid;gap:.15rem}
.prj-meta dt{font-size:.68rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft)}
.prj-meta dd{margin:0;font-family:var(--font-display);font-weight:400;font-size:1.2rem}
.prj-hero{margin:0;overflow:hidden;border-radius:6px;aspect-ratio:16/9;background:var(--paper-deep);
  box-shadow:0 24px 56px rgba(21,23,19,.14)}
.prj-hero img{width:100%;height:100%;object-fit:cover;display:block}

.prj-gal{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
.prj-gal figure{margin:0;position:relative;overflow:hidden;border-radius:4px;aspect-ratio:1/1;background:var(--paper-deep)}
.prj-gal img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.prj-gal figure:hover img{transform:scale(1.05)}
.prj-gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.5rem .8rem .6rem;
  font-size:.76rem;color:#fff;background:linear-gradient(to top,rgba(10,17,13,.84),rgba(10,17,13,0));
  opacity:0;transition:opacity .25s}
.prj-gal figure:hover figcaption{opacity:1}

@media(max-width:1000px){
  
  .prj-head{grid-template-columns:1fr;align-items:start;gap:1.4rem}
  .prj-gal{grid-template-columns:repeat(2,1fr)}
  .prj-gal figcaption{opacity:1;font-size:.72rem}
}
@media(max-width:560px){
  .prj-hero-img{aspect-ratio:4/3}
}


/* Persoonlijk contactblok (projectpagina's) */
.pnl{display:grid;grid-template-columns:1fr 1fr;gap:var(--split-gap);align-items:center}
.pnl-txt h2{font-size:clamp(1.5rem,2.3vw,2.05rem);line-height:1.16;margin:.5rem 0 .8rem}
.pnl-txt .lede{margin:0 0 1.4rem;max-width:46ch}
.pnl-acts{display:flex;flex-wrap:wrap;gap:.7rem}
.pnl-points{list-style:none;padding:1.3rem 0 0;margin:1.4rem 0 0;border-top:1px solid var(--line);display:grid;gap:.55rem}
.pnl-points li{position:relative;padding-left:1.5rem;font-size:.92rem;line-height:1.55;color:var(--ink-soft)}
.pnl-points li::before{content:"";position:absolute;left:0;top:.45em;width:.7rem;height:.4rem;
  border-left:2px solid var(--bronze);border-bottom:2px solid var(--bronze);transform:rotate(-45deg)}
.pnl-pic{margin:0;overflow:hidden;border-radius:6px;aspect-ratio:4/3;background:var(--paper-deep);
  box-shadow:0 20px 48px rgba(21,23,19,.12)}
.pnl-pic img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:1000px){
  .pnl{grid-template-columns:1fr}
  .pnl-pic{aspect-ratio:16/10}
  .pnl-acts .btn{flex:1 1 auto;justify-content:center}
}


/* Waar we in geloven: cijfer, foto en tekst */
.creed{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.creed article{display:grid;gap:.55rem;align-content:start}
.creed .cr-pic{display:block;overflow:hidden;border-radius:4px;aspect-ratio:4/3;background:var(--paper);margin-bottom:.35rem}
.creed .cr-pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.creed article:hover .cr-pic img{transform:scale(1.05)}
.creed i{font-style:normal;font-family:var(--font-display);font-size:2.6rem;line-height:.9;
  color:transparent;-webkit-text-stroke:1px var(--bronze)}
.creed h3{margin:0;font-size:1.05rem}
.creed p{margin:0;color:var(--ink-soft);font-size:.92rem;line-height:1.65}
@media(max-width:1000px){
  .creed{grid-template-columns:repeat(2,1fr);gap:1.6rem 1.2rem}
}
@media(max-width:560px){
  .creed{grid-template-columns:1fr}
  .creed .cr-pic{aspect-ratio:16/10}
}


/* ===== Over ons: verhaal tussen twee foto's (20e) ===== */
.ab-trio{display:grid;grid-template-columns:1fr 1.35fr 1fr;gap:var(--split-gap);align-items:center}
.ab-side{margin:0;overflow:hidden;border-radius:4px;aspect-ratio:3/4;background:var(--paper-deep);
  box-shadow:0 18px 42px rgba(21,23,19,.12)}
.ab-side img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.ab-side:hover img{transform:scale(1.04)}
.ab-mid{text-align:center}
.ab-mid h2{font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.16;margin:.5rem auto 1.3rem;max-width:24ch}
.ab-mid p{margin:0 auto 1rem;color:var(--ink-soft);line-height:1.8;max-width:46ch}
.ab-mid .ab-sign{display:grid;gap:.1rem;justify-items:center;border-left:0;padding-left:0;
  margin-top:1.6rem !important;padding-top:1.2rem;border-top:1px solid var(--line);max-width:46ch}
@media(max-width:1000px){
  .ab-trio{grid-template-columns:1fr 1fr;gap:1.6rem}
  .ab-mid{grid-column:1/-1;order:-1;text-align:left}
  .ab-mid h2,.ab-mid p{margin-left:0;max-width:none}
  .ab-mid .ab-sign{justify-items:start}
  .ab-side{aspect-ratio:4/3}
}
@media(max-width:560px){
  .ab-side:nth-of-type(2){display:none}
  .ab-trio{grid-template-columns:1fr}
}

.ab-mid h2{font-size:clamp(2.3rem,4.6vw,3.6rem);line-height:1.12}


/* Toegankelijkheid: skip-link naar de hoofdinhoud */
.skip-link{
  position:absolute;left:1rem;top:-4rem;z-index:1000;
  background:var(--green);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 6px 6px;
  font-weight:700;font-size:.9rem;text-decoration:none;transition:top .18s;
}
.skip-link:focus{top:0;outline:2px solid var(--gold);outline-offset:2px}

/* Zonder JS blijven reveal-elementen zichtbaar */
.no-js .rv{opacity:1 !important;transform:none !important}


/* ===== Responsive naloop ===== */
@media(max-width:760px){
  .cf-grid{grid-template-columns:repeat(2,1fr)}
  .cf-grid-3{grid-template-columns:repeat(2,1fr)}
  .cf-grid-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:420px){
  .cf-grid,.cf-grid-3,.cf-grid-4{grid-template-columns:1fr}
}
/* vergelijkingstabel: scrollhint i.p.v. onopgemerkt afkappen */
.mat-compare{position:relative}
@media(max-width:700px){
  .mat-compare::after{
    content:"Veeg opzij voor alle kolommen";display:block;margin-top:.7rem;
    font-size:.78rem;color:var(--ink-soft);font-style:italic;
  }
}
/* geen enkele lopende tekst onder 14px op kleine schermen */
@media(max-width:560px){
  .mdl-meta em,.proj-meta dt,.mp-facts dt,.pdp-usp li,.cf-fine,.ct-fine,
}


/* ===== Responsive naloop 2: gemeten knelpunten ===== */
@media(max-width:760px){
  /* dl met auto-kolom rekt op bij lange termen -> stapelen */
  .pdp-panel dl.mini{grid-template-columns:1fr;gap:.15rem}
  .pdp-panel dl.mini dt{margin-top:.6rem}
  .pdp-panel dl.mini dt:first-child{margin-top:0}
  .pdp-spec dl{grid-template-columns:1fr auto}
  .pdp-tabs,.pdp-panels,.pdp-panel{min-width:0;max-width:100%}
  .pdp-panel h3,.pdp-panel p,.pdp-panel li{overflow-wrap:anywhere}
}
@media(max-width:420px){
  .cfg-card,.cfg-side,.cs-card{min-width:0}
  .cs-lines dd{white-space:normal}
}
/* raakvlakken: minimaal 44px op touch */
@media(max-width:760px){
  .fo,.ft{min-height:44px;padding-top:.5rem;padding-bottom:.5rem}
  .mf-chip,.chips button,.quiz-opts button{min-height:44px}
  .pdp-tabnav label{min-height:44px;display:inline-flex;align-items:center}
  .footer-links a,.site-footer ul a{display:inline-block;padding:.28rem 0}
  .crumbs a{display:inline-block;padding:.2rem 0}
}
/* geen lopende tekst onder 13px */
.mdl-meta em{font-size:.8rem}
.swatch span,.sw-label{font-size:.8rem}
@media(max-width:760px){
  .proj-meta dt,.mp-facts dt,.fo-sub,.mega-group h4,.cat-hint{font-size:.76rem}
  .mdl-meta em,.ft-n,.fo em{font-size:.8rem}
}


/* Breadcrumb: fluisterniveau, niet concurreren met de eyebrow eronder */
.pagehero .crumbs,.pdp .crumbs,.cat .crumbs{
  font-size:.76rem;letter-spacing:.02em;color:var(--ink-soft);opacity:.6;
  margin-bottom:1.6rem;
}
.pagehero .crumbs a,.pdp .crumbs a,.cat .crumbs a{color:inherit;text-decoration:none}
.pagehero .crumbs a:hover,.pdp .crumbs a:hover,.cat .crumbs a:hover{color:var(--green);text-decoration:underline;text-underline-offset:3px}
.pagehero .crumbs span,.pdp .crumbs span{color:var(--ink);opacity:.8}


/* ==========================================================
   EEN KAARTSTIJL — de catalogusstijl geldt voor alle
   beeld-plus-tekst blokken. Geen witte kaders met schaduw,
   geen optillen: beeld met haarlijn, serif titel, caps-meta,
   gouden lijn bij hover.
   ========================================================== */
.material-card,.makestrip a,.card-photo,.product,.workstrip figure,.mdl,.mat-routes a,.team-grid article{
  background:none;border:0;box-shadow:none;border-radius:0;padding:0;
}
.material-card:hover,.makestrip a:hover,.card-photo:hover,.product:hover,
.mdl:hover,.mat-routes a:hover,.team-grid article:hover,
.card:hover,.review-card:hover,.price-card:hover,.route:hover{
  transform:none;box-shadow:none;
}
/* het beeldvlak */
.material-card .mc-pic,.media-frame,.makestrip .pic,.card-photo .cm,
.product .thumb,.mdl-pic,.mat-routes .mr-pic,.team-grid .tg-pic,.gallery figure,.workstrip figure,.pj{
  position:relative; !important;overflow:hidden;background:var(--paper-deep);
  box-shadow:none;
}
.material-card .mc-pic::after,.media-frame::after,.makestrip .pic::after,
.card-photo .cm::after,.product .thumb::after,.mdl-pic::after,.mat-routes .mr-pic::after,
.team-grid .tg-pic::after,.gallery figure::after,.workstrip figure::after,.pj::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(21,23,19,.08);transition:box-shadow .25s;
}
.material-card:hover .mc-pic::after,.material-card:hover .media-frame::after,a:hover > .media-frame::after,
.makestrip a:hover .pic::after,.card-photo:hover .cm::after,.product:hover .thumb::after,
.mdl:hover .mdl-pic::after,.mat-routes a:hover .mr-pic::after,
.team-grid article:hover .tg-pic::after,.gallery figure:hover::after,.workstrip figure:hover::after,.pj:hover::after{
  box-shadow:inset 0 0 0 1px rgba(167,123,75,.55);
}
/* uniforme inzoom */
.material-card img,.makestrip .pic img,.card-photo .cm img,.product .thumb img,
.mdl-pic img,.mat-routes .mr-pic img,.team-grid .tg-pic img,.gallery img,.workstrip img{
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.material-card:hover img,.makestrip a:hover .pic img,.card-photo:hover .cm img,
.mdl:hover .mdl-pic img,.mat-routes a:hover .mr-pic img,.team-grid article:hover .tg-pic img,
.gallery figure:hover img,.workstrip figure:hover img{transform:scale(1.05)}
/* titels in serif, meta in caps */
.material-card h3,.mat-routes b,.team-grid h3,.makestrip b,.card-photo h3,.product h3{
  font-family:var(--font-display);font-weight:400;letter-spacing:-.005em;
}
.material-card h3{font-size:1.35rem}
.mat-routes b{font-size:1.3rem}
.team-grid h3{font-size:1.2rem}
.makestrip b{font-size:1.2rem}
.product h3{font-size:1.1rem}
.makestrip i,.product .p-cat,.mdl-meta em,.mat-routes .mr-d,.b2b-cards i{
  font-family:var(--font);font-style:normal;
}
.makestrip i,.product .p-cat{
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
}
/* tekst onder het beeld: gelijke ademruimte, geen binnenpadding meer */
.material-card .mc-body,.product .p-body{padding:.85rem 0 0}
.makestrip i{margin:.9rem 0 .25rem}
.makestrip b{margin:0 0 .3rem}
.makestrip .d{margin:0}
.material-card{display:grid;gap:0}
.mat-routes a,.team-grid article{gap:.65rem}

.mdl-pic{box-shadow:none}
.review-card{background:none;border:0;border-radius:0;box-shadow:none;padding:1.3rem 0 0;border-top:1px solid var(--line)}
.review-card:hover{transform:none;box-shadow:none}
.review-card .stars{color:var(--gold)}


/* ===== Materiaalgids: drie covers als fan links, tekst en veld rechts ===== */
.brochure{display:grid;grid-template-columns:1fr 1fr;gap:var(--split-gap);align-items:center}
.br-fan{position:relative;display:flex;justify-content:center;align-items:center;min-height:clamp(300px,32vw,430px)}
.br-fan figure{
  position:absolute;margin:0;width:clamp(150px,17vw,215px);aspect-ratio:3/4;
  border-radius:3px;overflow:hidden;background:var(--paper-deep);
  box-shadow:0 20px 46px rgba(21,23,19,.22);
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.br-fan figure img{width:100%;height:100%;object-fit:cover;display:block}
.br-fan figure::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(21,23,19,.1);pointer-events:none}
.br-fan figure:nth-child(1){transform:rotate(-8deg) translateX(-58%)}
.br-fan figure:nth-child(2){z-index:2}
.br-fan figure:nth-child(3){transform:rotate(8deg) translateX(58%)}
.brochure:hover .br-fan figure:nth-child(1){transform:rotate(-11deg) translateX(-64%)}
.brochure:hover .br-fan figure:nth-child(3){transform:rotate(11deg) translateX(64%)}
.br-fan figcaption{
  position:absolute;inset:auto 0 0 0;padding:2.4rem .9rem .9rem;color:#fff;
  background:linear-gradient(to top,rgba(10,17,13,.92),rgba(10,17,13,.55) 55%,transparent);
}
.br-fan .br-logo{height:20px;width:auto;filter:brightness(0) invert(1);opacity:.9;margin-bottom:.5rem}
.br-fan figcaption b{display:block;font-family:var(--font-display);font-weight:400;font-size:1.12rem;line-height:1.2}
.br-fan figcaption span{display:block;font-size:.76rem;color:rgba(255,255,255,.75);margin-top:.1rem}

.br-body h2{margin:.4rem 0 .8rem}
.br-list{list-style:none;padding:0;margin:0 0 1.6rem;display:grid;gap:.6rem}
.br-list li{position:relative;padding-left:1.6rem;font-size:.95rem;line-height:1.6;color:var(--ink-soft)}
.br-list li::before{content:"";position:absolute;left:0;top:.5em;width:.75rem;height:.42rem;
  border-left:2px solid var(--bronze);border-bottom:2px solid var(--bronze);transform:rotate(-45deg)}
.br-form{display:flex;flex-wrap:wrap;gap:.6rem;max-width:30rem}
.br-form input{flex:1 1 12rem;min-width:0;font:inherit;font-size:.96rem;color:var(--ink);
  padding:.78rem .95rem;border:1px solid var(--line);border-radius:8px;background:#fff}
.br-form input:focus{outline:none;border-color:var(--bronze)}
.br-fine{margin:.9rem 0 0;font-size:.82rem;line-height:1.5;color:var(--ink-soft);max-width:44ch}

@media(max-width:1000px){
  .brochure{grid-template-columns:1fr;gap:2rem}
  .br-fan{min-height:290px}
  .br-fan figure{width:clamp(140px,32vw,190px)}
  .br-fan figure:nth-child(1){transform:rotate(-8deg) translateX(-52%)}
  .br-fan figure:nth-child(3){transform:rotate(8deg) translateX(52%)}
}
@media(max-width:520px){
  .br-fan{min-height:250px}
  .br-fan figure{width:132px}
  .br-fan figure:nth-child(1){transform:rotate(-7deg) translateX(-46%)}
  .br-fan figure:nth-child(3){transform:rotate(7deg) translateX(46%)}
  .br-form input{flex:1 1 100%}
  .br-form .btn{width:100%;justify-content:center}
}

/* Gidsinhoud als beknopte inhoudsopgave i.p.v. vinkjes */
ol.br-list{
  list-style:none;padding:0;margin:0 0 1.7rem;display:grid;gap:0;counter-reset:br;
  border-top:1px solid var(--line);
}
ol.br-list li{
  counter-increment:br;display:grid;grid-template-columns:1.9rem 1fr;gap:.1rem .8rem;
  padding:.72rem 0;border-bottom:1px solid var(--line);
}
ol.br-list li::before{
  content:counter(br,decimal-leading-zero);grid-row:span 2;
  font-family:var(--font-display);font-size:.95rem;color:var(--bronze);line-height:1.5;
}
ol.br-list b,ol.br-list span{grid-column:2}
ol.br-list b{font-size:.96rem;font-weight:700;color:var(--ink)}
ol.br-list span{font-size:.88rem;line-height:1.5;color:var(--ink-soft)}

/* Gidsinhoud als register met paginanummers */
dl.br-list{margin:0 0 1.7rem;display:grid;gap:0;border-top:1px solid var(--line)}
dl.br-list > div{
  display:grid;grid-template-columns:1fr auto;gap:.12rem 1rem;align-items:baseline;
  padding:.78rem 0;border-bottom:1px solid var(--line);
}
dl.br-list dt{grid-column:1;font-size:.98rem;font-weight:700;color:var(--ink)}
dl.br-list dd{grid-column:1;margin:0;font-size:.88rem;line-height:1.5;color:var(--ink-soft)}
dl.br-list i{
  grid-column:2;grid-row:1/3;font-style:normal;font-family:var(--font-display);
  font-size:.9rem;color:var(--bronze);white-space:nowrap;
}

/* "Via [logo]" tegenover "Via een keukenzaak" */
.vs-us h3{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin:0 0 1.2rem}
.vs-us h3 .vs-logo{height:26px;width:auto;margin:0;display:inline-block;filter:brightness(0) invert(1)}
.vs-them h3{margin:0 0 1.2rem}


/* ==========================================================
   Reviews: scoreblok links, echte Google-reviews als slider
   ========================================================== */
.rv-section{overflow:hidden}
.rv-wrap{display:grid;grid-template-columns:220px 1fr;gap:clamp(1.6rem,3vw,3rem);align-items:center}
.rv-score{text-align:left}
.rv-num{display:block;font-family:var(--font-display);font-weight:400;font-size:clamp(3rem,5vw,4.2rem);line-height:.95;color:var(--ink);margin:.4rem 0 .2rem}
.rv-stars{color:var(--gold);letter-spacing:2px;font-size:.95rem;line-height:1}
.rv-stars-lg{font-size:1.15rem;letter-spacing:3px;margin-bottom:.8rem}
.rv-sub{margin:0 0 1.1rem;font-size:.9rem;line-height:1.5;color:var(--ink-soft)}
.rv-sub b{color:var(--ink);font-weight:700}
.rv-link{display:inline-block;font-size:.86rem;font-weight:700;color:var(--green);text-decoration:none;
  border-bottom:1px solid var(--bronze);padding-bottom:.15rem}
.rv-link:hover{color:var(--bronze)}

.rv-rail{position:relative;min-width:0}
.rv-track{
  display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:.3rem .3rem 1.2rem;margin:-.3rem -.3rem 0;
  scrollbar-width:none;
}
.rv-track::-webkit-scrollbar{display:none}
.rv-card{
  flex:0 0 clamp(250px,26vw,320px);scroll-snap-align:start;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.3rem;display:grid;gap:.7rem;align-content:start;
}
.rv-top{display:flex;align-items:center;gap:.7rem}
.rv-av{
  width:38px;height:38px;flex:0 0 auto;border-radius:50%;
  background:var(--paper-deep);color:var(--ink);display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.95rem;
}
.rv-who{display:grid;gap:.05rem;min-width:0}
.rv-who b{font-size:.94rem;font-weight:700}
.rv-who em{font-style:normal;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.rv-card p{margin:0;font-size:.92rem;line-height:1.65;color:var(--ink-soft)}

.rv-nav{
  position:absolute;top:calc(50% - .6rem);z-index:2;width:40px;height:40px;border-radius:50%;
  background:var(--white);border:1px solid var(--line);color:var(--ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px rgba(21,23,19,.1);transition:border-color .2s,color .2s,opacity .2s;
}
.rv-nav:hover{border-color:var(--bronze);color:var(--green)}
.rv-nav:disabled{opacity:0;pointer-events:none}
.rv-prev{left:-12px;transform:translateY(-50%)}
.rv-next{right:-12px;transform:translateY(-50%)}

@media(max-width:900px){
  .rv-wrap{grid-template-columns:1fr;gap:1.4rem}
  .rv-score{display:grid;grid-template-columns:auto 1fr;gap:.2rem 1.1rem;align-items:center}
  .rv-score .eyebrow{grid-column:1/-1}
  .rv-num{grid-row:2/4;margin:0;font-size:2.9rem}
  .rv-stars-lg{margin-bottom:.2rem}
  .rv-sub{margin:0}
  .rv-sub br{display:none}
  .rv-link{grid-column:1/-1;margin-top:.7rem}
  .rv-nav{display:none}
  .rv-track{scroll-snap-type:x proximity}
}
@media(max-width:560px){
  .rv-card{flex:0 0 84%}
}


/* ===== Reviews: score boven, Google-badge, slider eronder ===== */
.rv-wrap{display:block}
.rv-head{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.7rem 1.8rem;text-align:center;margin-bottom:2rem;
  padding-bottom:1.5rem;border-bottom:1px solid var(--line);
}
.rv-badge{display:inline-flex;align-items:center;gap:.5rem;font-size:.86rem;font-weight:700;color:var(--ink)}
.rv-badge .rv-g{flex:0 0 auto}
.rv-meta{display:inline-flex;align-items:center;gap:.7rem;flex-wrap:wrap;justify-content:center}
.rv-meta .rv-num{display:inline-block;font-size:clamp(1.9rem,3vw,2.5rem);margin:0;line-height:1}
.rv-meta .rv-stars-lg{margin:0}
.rv-meta .rv-sub{margin:0;font-size:.9rem}
.rv-head .rv-link{margin-left:auto}
@media(max-width:760px){
  .rv-head{justify-content:flex-start;text-align:left;gap:.6rem 1.2rem}
  .rv-head .rv-link{margin-left:0;flex:1 1 100%}
  .rv-meta .rv-num{font-size:2rem}
}

/* Filter: links naar een ander materiaal, zelfde vorm als de knoppen */
.fo-x{text-decoration:none;color:var(--ink-soft)}
.fo-x:hover{color:var(--green)}


/* ===== Breadcrumb: fijner, met een gouden scheidingsteken ===== */
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:.1rem;
  font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);opacity:.75;margin-bottom:1.7rem;
}
.crumbs a,.crumbs span{padding:.12rem 0}
.crumbs a{
  color:inherit;text-decoration:none;position:relative;
  transition:color .18s;
}
.crumbs a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--bronze);transform:scaleX(0);transform-origin:left;transition:transform .22s;
}
.crumbs a:hover{color:var(--green)}
.crumbs a:hover::after{transform:scaleX(1)}
.crumbs > *:not(:last-child)::before{content:none}
.crumbs a:not(:last-child)::after{bottom:0}
/* het scheidingsteken in brons, met lucht eromheen */
.crumbs{--sep:.55rem}
.crumbs a + a,.crumbs a + span{margin-left:0}
.crumbs span:last-child{color:var(--ink);opacity:1;font-weight:600}
@media(max-width:560px){
  .crumbs{font-size:.7rem;margin-bottom:1.3rem}
}

.cb-sep{font-style:normal;color:var(--bronze);opacity:.75;margin:0 .5rem;font-size:.8rem}


/* Materiaalwissel in de filterkolom: duidelijk navigatie, geen filterknop */
.fo-switch{
  display:grid;gap:.1rem;padding-top:1.2rem;margin-top:.2rem;border-top:1px solid var(--line);
}
.fo-switch-lbl{
  font-size:.68rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-soft);opacity:.75;margin-bottom:.45rem;
}
.fo-switch a{
  display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;
  font-size:.9rem;color:var(--ink-soft);text-decoration:none;padding:.36rem 0;
  transition:color .16s;
}
.fo-switch a::before{
  content:"\2192";margin-right:.45rem;color:var(--bronze);font-size:.85rem;
  transform:translateX(-2px);transition:transform .18s;
}
.fo-switch a > em{
  font-style:normal;font-size:.76rem;color:var(--ink-soft);opacity:.6;margin-left:auto;
}
.fo-switch a:hover{color:var(--green)}
.fo-switch a:hover::before{transform:none}
.fo-switch a:last-child{
  margin-top:.35rem;padding-top:.6rem;border-top:1px solid var(--line);
  font-weight:700;color:var(--ink);
}


/* Materiaalroutes: rijker, met aantal, prijs en merken */
.mat-routes a{display:grid;gap:.85rem;align-content:start}
.mr-body{display:grid;gap:.5rem}
.mr-top{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;
  padding-bottom:.5rem;border-bottom:1px solid var(--line)}
.mat-routes b{font-family:var(--font-display);font-weight:400;font-size:1.35rem;line-height:1.1}
.mr-top i{font-style:normal;font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--bronze)}
.mat-routes .mr-d{font-size:.92rem;line-height:1.6;color:var(--ink-soft)}
.mr-facts{display:flex;flex-wrap:wrap;gap:.4rem}
.mr-facts span{
  font-size:.78rem;font-weight:600;color:var(--ink);
  padding:.24rem .55rem;border:1px solid var(--line);border-radius:3px;background:var(--white);
}
.mr-brands{font-size:.8rem;letter-spacing:.04em;color:var(--ink-soft);opacity:.85}
.mat-routes a::after{
  content:"Bekijk \2192";font-size:.84rem;font-weight:700;color:var(--green);
  padding-top:.2rem;transition:color .18s;
}
.mat-routes a:hover::after{color:var(--bronze)}
@media(max-width:800px){
  .mat-routes .mr-pic{aspect-ratio:16/9}
}


/* ===== Offerteformulier, stap 5: eigen raster en strakke velden ===== */
.cf-form-flat{
  display:grid !important;grid-template-columns:1fr !important;gap:1.05rem;
  background:none;border:0;padding:0;max-width:640px;
}
.cf-form-flat .cf-row2{grid-template-columns:1fr 1fr;gap:1.05rem}
.cf-form-flat label{grid-column:1/-1}
.cf-form-flat .cf-row2 label{grid-column:auto}
.cf-form-flat input[type=text],.cf-form-flat input[type=tel],.cf-form-flat input[type=email],
.cf-form-flat select,.cf-form-flat textarea{
  width:100%;min-height:46px;padding:.68rem .85rem;line-height:1.35;
  border:1px solid var(--line);border-radius:8px;background:#fff;
}
.cf-form-flat textarea{min-height:104px;resize:vertical}
.cf-form-flat select{
  appearance:none;-webkit-appearance:none;padding-right:2.1rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2362675f' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;
}
.cf-form-flat label > span{font-weight:400;color:var(--ink-soft);font-size:.82rem}

/* akkoordregel: eigen blok, niet als veldlabel */
.cf-check{
  grid-column:1/-1;display:flex !important;align-items:flex-start;gap:.7rem;
  font-weight:400 !important;font-size:.9rem;line-height:1.5;color:var(--ink-soft);
  padding:.9rem 1rem;background:var(--paper);border-radius:8px;cursor:pointer;
}
.cf-check input[type=checkbox]{
  width:18px !important;height:18px !important;min-height:0 !important;flex:0 0 18px;
  margin:.1rem 0 0;padding:0 !important;accent-color:var(--green);border-radius:3px !important;
}
.cf-form-flat .cf-fine{grid-column:1/-1;margin:0}

/* navigatie onderaan: knoppen naast elkaar links, niet uit elkaar getrokken */
.cf-form-flat .cfg-nav{
  grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:.7rem;
  margin-top:.4rem;padding-top:1.2rem;border-top:1px solid var(--line);
}
@media(max-width:640px){
  .cf-form-flat .cf-row2{grid-template-columns:1fr}
  .cf-form-flat .cfg-nav .btn{width:100%;justify-content:center}
}

/* select gelijk aan de tekstvelden */
.cf-form-flat select{height:46px;min-height:46px;padding-top:0;padding-bottom:0}


/* ===== FAQ: kop boven, vragen in twee kolommen, geen foto ===== */
.faq-block{display:grid;gap:0}
.faq-block .section-head{max-width:none;margin-bottom:2rem}
.faq-block .section-head .lede{max-width:56ch}
.faq-block .faq{
  display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2rem,4vw,3.6rem);
  align-items:start;
}
.faq-block .faq details{
  background:none;border:0;border-radius:0;box-shadow:none;padding:0;
  border-bottom:1px solid var(--line);
}
.faq-block .faq details:first-child,
.faq-block .faq details:nth-child(n){border-top:0}
.faq-block .faq summary{
  padding:1.05rem 2.2rem 1.05rem 0;font-size:1rem;font-weight:700;line-height:1.4;
  position:relative;transition:color .18s;
}
.faq-block .faq summary:hover{color:var(--green)}
.faq-block .faq summary::after{
  content:"";position:absolute;right:.25rem;top:1.45rem;
  width:.6rem;height:.6rem;border-right:1.5px solid var(--bronze);border-bottom:1.5px solid var(--bronze);
  transform:rotate(45deg);transition:transform .22s;
}
.faq-block .faq details[open] summary::after{transform:rotate(225deg);top:1.55rem}
.faq-block .faq details[open]{background:none;box-shadow:none}
.faq-block .faq details p{
  margin:0 0 1.2rem;padding-right:2.2rem;font-size:.94rem;line-height:1.7;max-width:52ch;
}
@media(max-width:900px){
  .faq-block .faq{grid-template-columns:1fr;gap:0}
  .faq-block .faq details p{padding-right:0}
}


/* Alles staat direct in beeld: geen scroll-reveal meer */
.rv,.rv-1,.rv-2,.rv-3,.rv-4,[class*="rv-d"]{opacity:1 !important;transform:none !important;animation:none !important;transition:none !important}


/* Merkenbalk met echte logo's: grijs, op kleur bij hover */
.bb-logos{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem clamp(1.8rem,3.4vw,3.2rem);margin-left:auto}
.bb-logos a{display:flex;align-items:center;padding:.2rem 0}
.bb-logos img{
  height:clamp(20px,2vw,26px);width:auto;display:block;
  filter:grayscale(1) opacity(.5);transition:filter .25s;
}
.bb-logos a:hover img{filter:grayscale(0) opacity(1)}
.bb-logos a[title*="Neolith"] img,.bb-logos a[title*="Laminam"] img{height:clamp(15px,1.5vw,19px)}
.bb-logos a[title*="Technistone"] img{height:clamp(17px,1.7vw,21px)}
@media(max-width:760px){
  .brandbar{flex-direction:column;align-items:flex-start;gap:1rem}
  .bb-logos{margin-left:0;gap:1rem 1.8rem}
}

/* Logo's optisch gelijk: dekking hoger en per merk een hoogte op basis van de verhouding */
.bb-logos img{filter:grayscale(1) opacity(.78);height:auto;width:auto}
.bb-logos a:hover img{filter:grayscale(0) opacity(1)}
.bb-logos a[title*="Dekton"] img{height:clamp(19px,1.9vw,24px)}
.bb-logos a[title*="Neolith"] img{height:clamp(15px,1.5vw,19px)}
.bb-logos a[title*="Laminam"] img{height:clamp(20px,2vw,26px)}
.bb-logos a[title*="Silestone"] img{height:clamp(22px,2.2vw,28px)}
.bb-logos a[title*="Diresco"] img{height:clamp(24px,2.4vw,31px)}
.bb-logos a[title*="Technistone"] img{height:clamp(17px,1.7vw,22px)}

/* Merklogo's groter en duidelijk aanklikbaar */
.bb-logos{gap:1.4rem clamp(2rem,3.6vw,3.4rem)}
.bb-logos a{transition:transform .2s}
.bb-logos a:hover{transform:translateY(-2px)}
.bb-logos a[title*="Dekton"] img{height:clamp(26px,2.6vw,34px)}
.bb-logos a[title*="Neolith"] img{height:clamp(21px,2.1vw,27px)}
.bb-logos a[title*="Laminam"] img{height:clamp(28px,2.8vw,36px)}
.bb-logos a[title*="Silestone"] img{height:clamp(30px,3vw,39px)}
.bb-logos a[title*="Diresco"] img{height:clamp(34px,3.4vw,44px)}
.bb-logos a[title*="Technistone"] img{height:clamp(23px,2.3vw,30px)}
.bb-label{align-self:center}

/* Feitenregel in de hero: drie gelijke kolommen die precies opgaan */
.pagehero-facts{
  display:grid !important;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--line);
}
.pagehero-facts > div{
  display:grid;gap:.2rem;align-content:start;
  padding:.95rem 1.1rem .95rem 0;border-right:1px solid var(--line);
}
.pagehero-facts > div:first-child{padding-left:0}
.pagehero-facts > div:not(:first-child){padding-left:1.1rem}
.pagehero-facts > div:last-child{border-right:0;padding-right:0}
.pagehero-facts dt{
  font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin:0;
}
.pagehero-facts dd{
  margin:0;font-size:.94rem;font-weight:600;line-height:1.4;text-wrap:balance;
}
@media(max-width:640px){
  .pagehero-facts{grid-template-columns:1fr}
  .pagehero-facts > div{border-right:0;border-bottom:1px solid var(--line);padding:.8rem 0 !important}
  .pagehero-facts > div:last-child{border-bottom:0}
}


/* Mega-menu: onderrij met de drie vervolgstappen */
.mega-foot{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  margin-top:1.3rem;padding-top:1.1rem;border-top:1px solid var(--line);
}
.mega-foot a{
  display:grid;gap:.12rem;padding:.6rem 1.1rem .6rem 0;text-decoration:none;
  border-right:1px solid var(--line);
}
.mega-foot a:not(:first-child){padding-left:1.1rem}
.mega-foot a:last-child{border-right:0}
.mega-foot a:hover{background:none}
.mega-foot b{font-size:.92rem;font-weight:700;color:var(--ink);transition:color .16s}
.mega-foot a:hover b{color:var(--green)}
.mega-foot span{font-size:.8rem;line-height:1.4;color:var(--ink-soft)}
.mega-group h4 + a{margin-top:0}
@media(max-width:1024px){
  .mega-foot{grid-template-columns:1fr;margin-top:.8rem}
  .mega-foot a{border-right:0;border-bottom:1px solid var(--line);padding:.7rem 0 !important}
  .mega-foot a:last-child{border-bottom:0}
}

/* Ankerdoelen niet onder de sticky header */
#prijs,#modellen,#brochure,#formulier,#partner,#verhaal{scroll-margin-top:calc(var(--header-h,93px) + 1rem)}

/* Knoppen zonder schaduw */
.btn,.btn:hover,.btn:focus,.btn:active{box-shadow:none}


/* ============================================================
   Één beeldstijl: gelijke hoekafronding op alle foto's
   ============================================================ */
:root{--radius-img:6px}

.media-frame,.gallery figure,.mdl-pic,.pdp-pic,.pdp-thumbs figure,.mp-gallery figure,
.pagehero-gal figure,.faq-photo img,.pl-photo,.promise-photo,.over-media .om-big,
.over-media .om-small,.ab-side,.ab-portrait img,.swatch,.workstrip figure,.makestrip .pic,
.material-card .mc-pic,.mat-routes .mr-pic,.team-grid .tg-pic,.member .mf,.mdl-more,
.pp-main,.pp-det,.i-photo,.cta-hero,.proj-pics figure,.tg-pic,.mr-pic,.mc-pic,
.ft-pic,.fo-sw,.mp-card img,figure.faq-photo,.bb-logos img{
  border-radius:var(--radius-img);
}
/* kleine steenvakjes blijven vierkanter, anders wordt de vorm rommelig */
.ft-pic,.fo-sw,.mp-th{border-radius:2px}
/* logo's krijgen geen afronding */
.bb-logos img,.logo img,.footer-logo img{border-radius:0}
/* ronde portretten blijven rond */
.hero-advisor img,.ct-person img,.b2b-contact img,.mp-help-top img,.pdp-person img,
.rv-avatar,.review-card .rv-av,.ab-portrait.round img{border-radius:50%}
/* beeld binnen een afgerond kader hoeft zelf geen radius */
.media-frame img,.gallery img,.mdl-pic img,.pdp-pic img,.mp-gallery img,
.pagehero-gal img,.pl-photo img,.promise-photo img,.over-media img,.ab-side img,
.swatch img,.workstrip img,.makestrip .pic img,.mc-pic img,.mr-pic img,.tg-pic img,
.member .mf img,.pp-main img,.pp-det img{border-radius:0}

/* Materiaalpagina: toepassingsregel onder de inleiding */
.mp-also{
  margin:-.3rem 0 1.5rem;padding-left:.9rem;border-left:2px solid var(--bronze);
  font-size:.9rem;line-height:1.65;color:var(--ink-soft);max-width:56ch;
}
.mp-also a{color:var(--green);font-weight:600;text-decoration:underline;
  text-decoration-color:rgba(167,123,75,.45);text-underline-offset:3px}
.mp-also a:hover{color:var(--bronze)}


/* ============================================================
   Mega-menu Materialen: twee niveaus (25a)
   materiaal links, de platen zelf rechts
   ============================================================ */
.mega-panel--two{
  display:grid;grid-template-columns:236px 1fr;gap:0;padding:0;overflow:hidden;
  width:min(980px,calc(100vw - 3rem));
}
.mm-lv1{
  background:var(--paper);border-right:1px solid var(--line);
  padding:1.1rem .9rem;display:grid;gap:.1rem;align-content:start;
}
.mm-lv1 a{
  display:grid;gap:.1rem;padding:.62rem .75rem;border-radius:4px;text-decoration:none;
  position:relative;transition:background .16s;
}
.mm-lv1 a b{font-size:.94rem;font-weight:700;color:var(--ink);line-height:1.3}
.mm-lv1 a small{font-size:.77rem;line-height:1.35;color:var(--ink-soft)}
.mm-lv1 a:hover{background:rgba(255,255,255,.7)}
.mm-lv1 a.on{background:#fff;box-shadow:0 1px 0 rgba(21,23,19,.06)}
.mm-lv1 a.on b{color:var(--green)}
.mm-lv1 a:not(.mm-x)::after{
  content:"";position:absolute;right:.7rem;top:50%;width:.42rem;height:.42rem;
  border-right:1.5px solid var(--bronze);border-bottom:1.5px solid var(--bronze);
  transform:translateY(-50%) rotate(-45deg);opacity:0;transition:opacity .16s,right .16s;
}
.mm-lv1 a.on::after,.mm-lv1 a:hover:not(.mm-x)::after{opacity:1}
.mm-lv1 a:hover:not(.mm-x)::after{right:.5rem}
.mm-lv1 .mm-x{margin-top:.15rem}
.mm-lv1 .mm-x:first-of-type{margin-top:.6rem;padding-top:.75rem;border-top:1px solid var(--line);border-radius:0}
.mm-lv1 .mm-x b{font-weight:600;color:var(--ink-soft)}
.mm-lv1 .mm-x:hover b{color:var(--green)}

.mm-lv2{padding:1.2rem 1.3rem 1.3rem;background:#fff}
.mm-set[hidden]{display:none}
.mm-brands{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.1rem;
  padding-bottom:.8rem;margin-bottom:1rem;border-bottom:1px solid var(--line);
}
.mm-brands > span{
  font-size:.66rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bronze);margin-right:.2rem;
}
.mm-brands a{
  font-size:.88rem;font-weight:700;color:var(--ink);text-decoration:none;
  padding-bottom:.15rem;border-bottom:1px solid transparent;transition:border-color .16s,color .16s;
}
.mm-brands a:hover{color:var(--green);border-bottom-color:var(--bronze)}

.mm-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:.85rem .7rem}
.mm-tiles a{display:grid;gap:.35rem;text-decoration:none}
.mm-ph{
  display:block;aspect-ratio:3/4;border-radius:3px;overflow:hidden;background:var(--paper-deep);
  box-shadow:inset 0 0 0 1px rgba(21,23,19,.07);
}
.mm-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.mm-tiles a:hover .mm-ph img{transform:scale(1.06)}
.mm-tiles a:hover .mm-ph{box-shadow:inset 0 0 0 1px var(--bronze)}
.mm-tiles b{font-size:.8rem;font-weight:700;line-height:1.25;color:var(--ink)}
.mm-tiles em{font-style:normal;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.mm-all{
  display:inline-block;margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--line);
  width:100%;font-size:.88rem;font-weight:700;color:var(--green);text-decoration:none;
}
.mm-all:hover{color:var(--bronze)}

@media(max-width:1024px){
  .mega-panel--two{grid-template-columns:1fr;width:auto}
  .mm-lv1{border-right:0;border-bottom:1px solid var(--line);padding:.6rem .2rem}
  .mm-lv1 a{padding:.6rem .6rem}
  .mm-lv1 a::after{display:none}
  .mm-lv2{padding:1rem .2rem 0}
  .mm-set[hidden]{display:block}
  .mm-tiles{grid-template-columns:repeat(4,1fr);gap:.7rem .5rem}
  .mm-brands{gap:.4rem .8rem}
}
@media(max-width:560px){
  .mm-tiles{grid-template-columns:repeat(3,1fr)}
  .mm-tiles b{font-size:.76rem}
}


/* 25a op tablet en mobiel: geen platenmuur, wel materiaalnaam en merken */
@media(max-width:1024px){
  .mm-set{padding:.85rem 0;border-bottom:1px solid var(--line)}
  .mm-set:last-child{border-bottom:0}
  .mm-set::before{
    content:attr(data-set);display:block;
    font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
    color:var(--bronze);margin-bottom:.5rem;
  }
  .mm-set .mm-tiles{display:none}
  .mm-set .mm-brands{border-bottom:0;padding-bottom:0;margin-bottom:0}
  .mm-set .mm-brands > span{display:none}
  .mm-set .mm-all{margin-top:.55rem;padding-top:0;border-top:0;font-size:.86rem}
}

/* Merklinks in het mobiele menu als echte tikdoelen */
@media(max-width:1024px){
  .mm-set .mm-brands{gap:.4rem .5rem}
  .mm-set .mm-brands a{
    min-height:44px;display:inline-flex;align-items:center;
    padding:.35rem .8rem;border:1px solid var(--line);border-radius:999px;
    background:#fff;border-bottom-color:var(--line);
  }
  .mm-set .mm-brands a:hover,.mm-set .mm-brands a:active{border-color:var(--bronze)}
  .mm-set .mm-all{min-height:44px;display:inline-flex;align-items:center;margin-top:.9rem}
}

/* Menuplaten iets kleiner */
.mega-panel--two{width:min(900px,calc(100vw - 3rem))}
.mm-tiles{gap:.75rem .6rem}
.mm-ph{aspect-ratio:3/3.6}


/* ============================================================
   Mega-menu Keukenbladen: 31a — naam in de foto
   ============================================================ */
.mega-panel--kb{grid-template-columns:230px 1fr}
.kb-lv1{background:var(--paper);border-right:1px solid var(--line);padding:1.1rem .9rem;
  display:grid;gap:.1rem;align-content:start}
.kb-lv1 a{display:grid;gap:.1rem;padding:.62rem .75rem;border-radius:4px;position:relative;
  text-decoration:none;transition:background .16s}
.kb-lv1 a b{font-size:.94rem;font-weight:700;color:var(--ink);line-height:1.3}
.kb-lv1 a small{font-size:.77rem;color:var(--ink-soft);line-height:1.35}
.kb-lv1 a:hover{background:rgba(255,255,255,.7)}
.kb-lv1 a.on{background:#fff;box-shadow:0 1px 0 rgba(21,23,19,.06)}
.kb-lv1 a.on b{color:var(--green)}
.kb-lv1 a:not(.kb-x)::after{content:"";position:absolute;right:.7rem;top:50%;width:.42rem;height:.42rem;
  border-right:1.5px solid var(--bronze);border-bottom:1.5px solid var(--bronze);
  transform:translateY(-50%) rotate(-45deg);opacity:0;transition:opacity .16s,right .16s}
.kb-lv1 a.on::after,.kb-lv1 a:hover:not(.kb-x)::after{opacity:1}
.kb-lv1 a:hover:not(.kb-x)::after{right:.5rem}
.kb-lv1 .kb-x:first-of-type{margin-top:.6rem;padding-top:.75rem;border-top:1px solid var(--line);border-radius:0}
.kb-lv1 .kb-x b{font-weight:600;color:var(--ink-soft)}
.kb-lv1 .kb-x:hover b{color:var(--green)}

.kb-lv2{padding:1.2rem 1.3rem;background:#fff}
.kb-set{display:grid;gap:.6rem;grid-template-columns:repeat(3,1fr)}
.kb-set[hidden]{display:none}
.kb-set a{position:relative;display:block;overflow:hidden;border-radius:3px;aspect-ratio:4/3;
  background:var(--paper-deep);text-decoration:none;box-shadow:inset 0 0 0 1px rgba(21,23,19,.07)}
.kb-set a img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.kb-set a:hover img{transform:scale(1.06)}
.kb-set a:hover{box-shadow:inset 0 0 0 1px var(--bronze)}
.kb-ttl{position:absolute;left:0;right:0;bottom:0;padding:1.1rem .7rem .55rem;color:#fff;
  font-size:.82rem;font-weight:700;line-height:1.25;
  background:linear-gradient(to top,rgba(10,17,13,.9) 0%,rgba(10,17,13,.45) 55%,rgba(10,17,13,0) 100%)}
.kb-ttl{font-size:.85rem}

@media(max-width:1024px){
  .mega-panel--kb{grid-template-columns:1fr}
  .kb-lv1{border-right:0;border-bottom:1px solid var(--line);padding:.6rem .2rem}
  .kb-lv1 a{padding:.6rem .6rem;min-height:44px}
  .kb-lv1 a::after{display:none}
  .kb-lv2{padding:.9rem .2rem 0}
  .kb-set{grid-template-columns:repeat(3,1fr);grid-auto-rows:auto;margin-bottom:.9rem}
  .kb-set a{aspect-ratio:16/10;height:auto}
  .kb-set a:first-child{grid-row:auto;grid-column:1/-1;aspect-ratio:16/9}
  .kb-set::before{content:attr(data-kbset);display:none}
}


/* ============================================================
   Mega-menu Zakelijk: 32j — brede rijen met foto
   ============================================================ */
.mega-panel--zk{
  display:block;padding:1.1rem 1.3rem;width:min(560px,calc(100vw - 3rem));
}
.zk-r{
  display:grid;grid-template-columns:88px 1fr auto;gap:1rem;align-items:center;
  padding:.7rem 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;
}
.zk-r:last-child{border-bottom:0}
.zk-r:hover{background:none}
.zk-ph{display:block;width:88px;aspect-ratio:16/10;border-radius:3px;overflow:hidden;background:var(--paper-deep)}
.zk-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.zk-r:hover .zk-ph img{transform:scale(1.06)}
.zk-tx{display:grid;gap:.1rem}
.zk-tx b{font-size:.95rem;font-weight:700;color:var(--ink);line-height:1.3;transition:color .16s}
.zk-tx small{font-size:.78rem;line-height:1.35;color:var(--ink-soft)}
.zk-r:hover .zk-tx b{color:var(--green)}
.zk-r i{font-style:normal;color:var(--bronze);font-size:1rem;transition:transform .18s;transform:translateX(-2px)}
.zk-r:hover i{transform:none}

@media(max-width:1024px){
  .mega-panel--zk{width:auto;padding:.6rem .2rem}
  .zk-r{grid-template-columns:64px 1fr auto;gap:.8rem;min-height:44px}
  .zk-ph{width:64px}
}
@media(max-width:560px){
  .zk-r{grid-template-columns:1fr auto}
  .zk-ph{display:none}
}


/* Transparant prijsblok zonder bedragen */
.price-open{display:grid;grid-template-columns:1fr 1fr;gap:var(--split-gap);align-items:start}
.price-open h3{font-size:1.05rem;margin:0 0 1rem;padding-bottom:.7rem;border-bottom:1px solid var(--line)}
.checklist-soft li{color:var(--ink-soft)}
.checklist-soft li::before{border-color:var(--ink-soft);opacity:.6}
.po-note{margin:1.2rem 0 0;padding-left:.9rem;border-left:2px solid var(--bronze);
  font-size:.92rem;line-height:1.6;color:var(--ink-soft)}
@media(max-width:900px){.price-open{grid-template-columns:1fr;gap:2rem}}

/* Prijs nog niet publiceerbaar: zachte weergave i.p.v. bedrag */
.cs-price-soft{font-size:clamp(1.4rem,2.4vw,1.9rem) !important;line-height:1.15}


/* ============================================================
   Proof-strip: bewijs pal onder de hero
   ============================================================ */
.proof-strip{background:var(--ink);color:rgba(255,255,255,.86)}
.proof-strip .container{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.6rem clamp(1.4rem,3vw,2.8rem);
  padding-top:1rem;padding-bottom:1rem;
}
.ps-score{display:inline-flex;align-items:baseline;gap:.45rem;white-space:nowrap}
.ps-score .stars{font-style:normal;color:var(--gold);font-size:.86rem;letter-spacing:.06em}
.ps-score b{font-family:var(--font-display);font-weight:400;font-size:1.22rem;color:#fff;line-height:1}
.ps-score > span{font-size:.84rem;color:rgba(255,255,255,.68)}
.ps-item{position:relative;padding-left:1.25rem;font-size:.86rem;line-height:1.4}
.ps-item::before{
  content:"";position:absolute;left:0;top:.42em;width:.62rem;height:.36rem;
  border-left:1.6px solid var(--gold);border-bottom:1.6px solid var(--gold);transform:rotate(-45deg);
}
@media(max-width:900px){
  .proof-strip .container{justify-content:flex-start;gap:.5rem 1.4rem}
  .ps-item{font-size:.82rem}
}

/* ============================================================
   Steenzeker: garantieblok en compacte strip
   ============================================================ */
.szk{background:var(--green-dark);color:#fff}
.szk .container{display:grid;grid-template-columns:1fr 1fr;gap:var(--split-gap);align-items:start}
.szk-head .eyebrow{color:var(--gold);border-color:rgba(227,196,155,.4)}
.szk-head h2{color:#fff;margin:.4rem 0 1rem;font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.15}
.szk-head p{margin:0 0 1.6rem;color:rgba(255,255,255,.8);line-height:1.75;max-width:46ch}
.szk-bonus{padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.18)}
.szk-bonus h3{margin:0 0 .8rem;font-size:.72rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--gold)}
.szk-bonus ul{list-style:none;padding:0;margin:0;display:grid;gap:.45rem}
.szk-bonus li{position:relative;padding-left:1.4rem;font-size:.9rem;line-height:1.55;color:rgba(255,255,255,.82)}
.szk-bonus li::before{content:"";position:absolute;left:0;top:.45em;width:.62rem;height:.36rem;
  border-left:1.6px solid var(--gold);border-bottom:1.6px solid var(--gold);transform:rotate(-45deg)}
.szk-list{display:grid;gap:0;counter-reset:szk}
.szk-list article{
  display:grid;grid-template-columns:2.1rem 1fr;gap:.2rem .9rem;
  padding:1rem 0;border-bottom:1px solid rgba(255,255,255,.16);
}
.szk-list article:first-child{border-top:1px solid rgba(255,255,255,.16)}
.szk-list i{
  grid-row:1/3;font-style:normal;font-family:var(--font-display);font-weight:400;
  font-size:1.15rem;color:var(--gold);line-height:1.3;
}
.szk-list b{font-size:1rem;font-weight:700;color:#fff;line-height:1.35}
.szk-list span{font-size:.9rem;line-height:1.6;color:rgba(255,255,255,.76)}
.szk-cta{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;
  margin-top:.6rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.18)}
.szk-cta p{margin:0;font-size:.86rem;color:rgba(255,255,255,.66)}

/* compacte Steenzeker-strip voor subpagina's */
.szk-strip{background:var(--paper-deep)}
.szk-strip .container{
  display:grid;grid-template-columns:auto repeat(3,1fr) auto;gap:1rem clamp(1.2rem,2.6vw,2.4rem);
  align-items:center;padding-top:1.2rem;padding-bottom:1.2rem;
}
.szk-strip .sz-lbl{font-size:.7rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--bronze)}
.szk-strip .sz-i{display:grid;gap:.1rem}
.szk-strip .sz-i b{font-size:.92rem;font-weight:700;color:var(--ink)}
.szk-strip .sz-i span{font-size:.8rem;line-height:1.4;color:var(--ink-soft)}
.szk-strip .sz-more{font-size:.86rem;font-weight:700;color:var(--green);text-decoration:none;
  border-bottom:1px solid var(--bronze);padding-bottom:.15rem;white-space:nowrap}
.szk-strip .sz-more:hover{color:var(--bronze)}

@media(max-width:1000px){
  .szk .container{grid-template-columns:1fr;gap:2rem}
  .szk-strip .container{grid-template-columns:1fr 1fr;gap:1rem 1.6rem}
  .szk-strip .sz-lbl,.szk-strip .sz-more{grid-column:1/-1}
}
@media(max-width:560px){
  .szk-strip .container{grid-template-columns:1fr}
}

/* Microcopy onder de hero-knoppen */
.hero-micro{margin:.9rem 0 0;font-size:.85rem;line-height:1.5;color:rgba(255,255,255,.76);max-width:44ch}

/* Risk-reversal naast het vergelijkingsblok */
.rrv{margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.rrv h3{font-size:1.05rem;margin:0 0 1rem}
.rrv .checklist{margin-bottom:1.2rem}
@media(min-width:1001px){
  .rrv{display:grid;grid-template-columns:auto 1fr;gap:.4rem var(--split-gap);align-items:start}
  .rrv h3{grid-column:1;max-width:12ch}
  .rrv .checklist{grid-column:2;grid-row:1;columns:2;column-gap:var(--split-gap)}
  .rrv .mc-link{grid-column:2}
}

/* Vakwerk-tegels */
.craft{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.cf-tile{display:grid;gap:.6rem;text-decoration:none;color:inherit;align-content:start}
.cf-tile .ph{display:block;overflow:hidden;border-radius:var(--radius-img,6px);aspect-ratio:4/3;background:var(--paper)}
.cf-tile .ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.cf-tile:hover .ph img{transform:scale(1.05)}
.cf-tile b{font-size:1.05rem;font-weight:700}
.cf-tile .d{font-size:.92rem;line-height:1.6;color:var(--ink-soft)}
@media(max-width:900px){.craft{grid-template-columns:1fr;gap:1.6rem}}


/* ============================================================
   Keuzehulp op gebruik, met eerlijk 'minder geschikt als'
   ============================================================ */
.kz{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.kz-card{display:grid;gap:.75rem;align-content:start;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem}
.kz-ph{display:block;overflow:hidden;border-radius:4px;aspect-ratio:16/9;background:var(--paper-deep)}
.kz-ph img{width:100%;height:100%;object-fit:cover;display:block}
.kz-card h3{margin:.2rem 0 0;font-size:1.2rem}
.kz-for{margin:0;font-size:.94rem;line-height:1.6;color:var(--ink-soft)}
.kz-spec{display:grid;gap:0;margin:.3rem 0 0;border-top:1px solid var(--line)}
.kz-spec > div{display:grid;grid-template-columns:1fr auto;gap:.4rem .8rem;align-items:baseline;
  padding:.5rem 0;border-bottom:1px solid var(--line)}
.kz-spec dt{margin:0;font-size:.84rem;color:var(--ink-soft)}
.kz-spec dd{margin:0;font-size:.84rem;font-weight:700;text-align:right}
.kz-spec dd.ok{color:var(--green)}
.kz-spec dd.mid{color:var(--bronze)}
.kz-spec dd.no{color:var(--clay,#b4553f)}
.kz-not{margin:.4rem 0 0;padding-left:.85rem;border-left:2px solid var(--clay,#b4553f);
  font-size:.88rem;line-height:1.6;color:var(--ink-soft)}
.kz-not b{color:var(--ink);font-weight:700}
.kz-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.6rem;
  margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.kz-foot p{margin:0;font-size:.94rem;color:var(--ink-soft);max-width:44ch}
@media(max-width:1000px){.kz{grid-template-columns:1fr;gap:1.4rem}}

/* Eerlijk over de grenzen: het vertrouwensblok op materiaalpagina's */
.mp-honest{margin:2.4rem 0 0;padding:1.4rem 1.5rem;background:var(--paper-deep);border-radius:var(--radius)}
.section-paper-deep .mp-honest{background:var(--white)}
.mp-honest h3{margin:0 0 .8rem;font-size:1.05rem}
.mp-honest p{margin:0 0 .8rem;font-size:.94rem;line-height:1.7;color:var(--ink-soft)}
.mp-honest p:last-child{margin-bottom:0}
.mp-honest b{color:var(--ink)}
.mp-honest-alt{padding-top:.9rem;border-top:1px solid var(--line);font-size:.9rem !important}
.mp-honest-alt a{color:var(--green);font-weight:600;text-decoration:underline;
  text-decoration-color:rgba(167,123,75,.45);text-underline-offset:3px}

/* Footer: NAP, openingstijden en werkgebied */





.f-area{
  margin:1.6rem 0 0;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.14);
  font-size:.84rem;line-height:1.6;color:rgba(255,255,255,.6);
}
.f-area a{color:var(--gold);font-weight:600;text-decoration:none;white-space:nowrap}
.f-area a:hover{text-decoration:underline}

.szk-reserve{margin:1.1rem 0 0;padding-left:.85rem;border-left:2px solid var(--gold);
  font-size:.88rem;line-height:1.6;color:rgba(255,255,255,.78)}

/* Fotoplaceholder voor teamleden die AJ nog aanlevert */
.tg-ph{display:flex;align-items:center;justify-content:center;background:var(--paper-deep);
  box-shadow:inset 0 0 0 1px var(--line)}
.tg-ph span{font-size:.78rem;font-weight:700;letter-spacing:.14em;color:var(--ink-soft);opacity:.6}

/* Zagerij: beeld voert het bewijs, niet de tekst */
.zag-media{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:auto auto;gap:.9rem}
.zag-media figure{margin:0;overflow:hidden;border-radius:var(--radius-img,6px);background:var(--paper-deep);position:relative}
.zag-media img{width:100%;height:100%;object-fit:cover;display:block}
.zm-big{grid-row:1/3;aspect-ratio:4/3}
.zm-s{aspect-ratio:16/10}
.zm-big figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.6rem .9rem .8rem;color:#fff;
  font-size:.76rem;font-weight:700;letter-spacing:.06em;
  background:linear-gradient(to top,rgba(10,17,13,.86),transparent);
}
@media(max-width:800px){
  .zag-media{grid-template-columns:1fr 1fr}
  .zm-big{grid-row:auto;grid-column:1/-1;aspect-ratio:16/9}
}


/* ============================================================
   Sticky actiebalk op mobiel
   ============================================================ */
@media(max-width:760px){
    display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:1px;
    position:fixed;left:0;right:0;bottom:0;z-index:220;
    background:var(--line);border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom,0);
  }
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;
    min-height:56px;background:var(--white);color:var(--ink);text-decoration:none;
    font-size:.76rem;font-weight:700;letter-spacing:.02em;
  }
  body{padding-bottom:56px}
}

/* Zagerij-raster: kleine foto's vullen hun rij, gelijk met de grote */
.zm-s{aspect-ratio:auto;height:100%;min-height:0}

/* Zagerij-raster: de container bepaalt de hoogte, niet de beeldverhouding */
.zag-media{height:clamp(320px,38vw,520px);grid-template-rows:1fr 1fr}
.zm-big,.zm-s{aspect-ratio:auto;height:100%;min-height:0}
.zag-media img{height:100%;object-fit:cover}
@media(max-width:800px){
  .zag-media{height:auto;grid-template-rows:auto auto}
  .zm-big{aspect-ratio:16/9;height:auto}
  .zm-s{aspect-ratio:16/10;height:auto}
}

/* Naad-sectie */
.naad-ph{position:relative}
.naad-ph figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.6rem .9rem .8rem;color:#fff;
  font-size:.76rem;font-weight:700;letter-spacing:.06em;
  background:linear-gradient(to top,rgba(10,17,13,.86),transparent);
}
.naad-belofte{
  margin:1.3rem 0 0;padding:.9rem 1.1rem;background:var(--paper-deep);border-radius:var(--radius);
  font-size:.93rem;line-height:1.65;color:var(--ink-soft);
}
.section-paper-deep .naad-belofte{background:var(--white)}
.naad-belofte b{color:var(--ink)}
.naad-belofte a{color:var(--green);font-weight:600;text-decoration:underline;
  text-decoration-color:rgba(167,123,75,.45);text-underline-offset:3px}

/* Jouw plaat + visual */
.zeker2{display:grid;grid-template-columns:1fr 1fr;gap:var(--split-gap)}
.zk2{display:grid;gap:.9rem;align-content:start}
.zk2-ph{margin:0;position:relative;overflow:hidden;border-radius:var(--radius-img,6px);aspect-ratio:16/10;background:var(--paper)}
.zk2-ph img{width:100%;height:100%;object-fit:cover;display:block}
.zk2-ph figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.5rem .9rem .75rem;color:#fff;
  font-size:.74rem;font-weight:700;letter-spacing:.06em;
  background:linear-gradient(to top,rgba(10,17,13,.86),transparent)}
.zk2 h3{margin:0;font-size:1.25rem}
.zk2 p{margin:0;font-size:.96rem;line-height:1.75;color:var(--ink-soft)}
.zk2-sig{font-weight:700;color:var(--ink) !important;font-size:.9rem !important}
.zk2 .btn{justify-self:start;margin-top:.3rem}
@media(max-width:900px){.zeker2{grid-template-columns:1fr;gap:2.2rem}}

/* Eerlijk over de prijs */
.geenlok{margin:2rem 0 0;padding:1.3rem 1.5rem;background:var(--paper-deep);border-radius:var(--radius);
  border-left:3px solid var(--bronze)}
.section-paper-deep .geenlok{background:var(--white)}
.geenlok h3{margin:0 0 .5rem;font-size:1.05rem}
.geenlok p{margin:0;font-size:.94rem;line-height:1.7;color:var(--ink-soft);max-width:66ch}

/* AJ Trade */
.trade-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem var(--split-gap)}
.trade-grid article{padding-top:1.1rem;border-top:2px solid var(--line)}
.trade-grid h3{margin:0 0 .5rem;font-size:1.05rem}
.trade-grid p{margin:0;font-size:.94rem;line-height:1.7;color:var(--ink-soft)}
@media(max-width:800px){.trade-grid{grid-template-columns:1fr;gap:1.4rem}}

/* Hero-lede op mobiel niet afknippen: de slotzin draagt de belofte */
@media(max-width:760px){
  .hero-glass .lede{-webkit-line-clamp:none;line-clamp:none;overflow:visible;display:block}
}

/* Reststuk-cadeau */

.szk-gift-ph{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;
  background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  font-size:.62rem;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.6);text-align:center;padding:.3rem}
.szk-gift p{margin:0;font-size:.9rem;line-height:1.6;color:rgba(255,255,255,.82)}
.szk-gift b{color:#fff}

/* WhatsApp-foto-first */
.wafoto{background:var(--green-dark);color:#fff}
.wa-in{display:grid;grid-template-columns:auto 1fr auto;gap:1.4rem clamp(1.4rem,3vw,2.4rem);align-items:center}
.wa-por{width:66px;height:66px;border-radius:50%;object-fit:cover;object-position:50% 18%;
  box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.wa-tx h2{margin:0 0 .4rem;font-size:clamp(1.2rem,2.1vw,1.7rem);line-height:1.25;color:#fff}
.wa-tx p{margin:0;font-size:.94rem;line-height:1.65;color:rgba(255,255,255,.8);max-width:62ch}
.wafoto .btn{white-space:nowrap}
@media(max-width:900px){
  .wa-in{grid-template-columns:auto 1fr;gap:1rem}
  .wafoto .btn{grid-column:1/-1;justify-content:center}
}

/* Matched bundels */
.bundel{display:grid;grid-template-columns:1fr .85fr;gap:var(--split-gap);align-items:center;
  margin-top:2.4rem;padding-top:2rem;border-top:1px solid var(--line)}
.bd-tx h3{margin:0 0 .6rem;font-size:1.15rem}
.bd-tx p{margin:0 0 .9rem;font-size:.95rem;line-height:1.7;color:var(--ink-soft);max-width:56ch}
.bd-ph{margin:0;position:relative;overflow:hidden;border-radius:var(--radius-img,6px);aspect-ratio:16/10}
.bd-ph img{width:100%;height:100%;object-fit:cover;display:block}
.bd-ph figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.4rem .8rem .65rem;color:#fff;
  font-size:.72rem;font-weight:700;letter-spacing:.06em;
  background:linear-gradient(to top,rgba(10,17,13,.86),transparent)}
@media(max-width:900px){.bundel{grid-template-columns:1fr;gap:1.4rem}}

/* Matched bundel loopt over beide kolommen van de split */
.container.split > .bundel{grid-column:1/-1}


/* ============================================================
   Placeholders: onmiskenbaar tijdelijk
   ============================================================ */
.ph-media{
  position:relative;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg,rgba(167,123,75,.07) 0 10px,rgba(167,123,75,.13) 10px 20px);
  border:2px dashed var(--bronze);border-radius:var(--radius-img,6px);overflow:hidden;
}
.ph-media > span{
  font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bronze);text-align:center;padding:.6rem;line-height:1.4;
}
.ph-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.22}
.ph-16-10{aspect-ratio:16/10}
.ph-4-3{aspect-ratio:4/3}
.ph-1-1{aspect-ratio:1/1}
.ph-21-9{aspect-ratio:21/9}
.ph-tag{
  display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bronze);background:rgba(167,123,75,.12);border:1px dashed var(--bronze);
  padding:.14rem .5rem;border-radius:3px;
}
.ph-txt{color:var(--bronze);font-weight:700}

/* Placeholder-verhoudingen winnen altijd, ook binnen .split op mobiel */
.ph-media.ph-16-10{aspect-ratio:16/10 !important}
.ph-media.ph-4-3{aspect-ratio:4/3 !important}
.ph-media.ph-1-1{aspect-ratio:1/1 !important}
.ph-media.ph-21-9{aspect-ratio:21/9 !important}
.ph-media{min-height:180px}
.split .pl-photo.ph-media img{height:100% !important;max-height:none !important}


/* ============================================================
   Zagerij-sectie: beeld, feiten en een woord van Ilyas
   ============================================================ */
.zag-head{display:grid;grid-template-columns:1fr 1fr;gap:1rem var(--split-gap);align-items:end;margin-bottom:1.6rem}
.zag-head h2{margin:.4rem 0 0}
.zag-head .lede{margin:0}

.zag-media{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:.7rem;
  height:clamp(340px,36vw,520px)}
.zag-media figure{margin:0;position:relative;overflow:hidden;border-radius:var(--radius-img,6px);
  background:var(--paper-deep);height:100%;min-height:0}
.zag-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.zag-media figure:hover img{transform:scale(1.03)}
.zm-big{grid-row:1/3;cursor:pointer}
.zm-big::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.9);
  box-shadow:0 8px 24px rgba(10,17,13,.22);transition:transform .25s,background .25s}
.zm-big::before{content:"";position:absolute;left:50%;top:50%;z-index:3;transform:translate(-40%,-50%);
  border-left:16px solid var(--green);border-top:10px solid transparent;border-bottom:10px solid transparent}
.zm-big:hover::after{transform:translate(-50%,-50%) scale(1.06);background:#fff}
.zm-big .vlbl{position:absolute;left:.85rem;bottom:.85rem;z-index:4;
  font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:rgba(10,17,13,.62);padding:.26rem .6rem;border-radius:2px}
.zm-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.4rem .8rem .6rem;
  color:#fff;font-size:.8rem;font-weight:600;
  background:linear-gradient(to top,rgba(10,17,13,.82),transparent)}

.zag-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem clamp(1.4rem,3vw,2.6rem);
  margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.zag-facts div{display:grid;gap:.2rem;align-content:start}
.zag-facts b{font-family:var(--font-display);font-weight:400;font-size:1.5rem;color:var(--green);line-height:1}
.zag-facts span{font-size:.85rem;line-height:1.5;color:var(--ink-soft)}

.zag-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.2rem var(--split-gap);margin-top:1.8rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.zag-quote{display:flex;align-items:center;gap:.9rem;max-width:52ch}
.zag-quote img{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:50% 18%;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(21,23,19,.1)}
.zag-quote p{margin:0 0 .2rem;font-family:var(--font-display);font-weight:400;font-size:1.06rem;
  line-height:1.45;color:var(--ink)}
.zag-quote span{font-size:.82rem;color:var(--ink-soft)}

@media(max-width:1000px){
  .zag-head{grid-template-columns:1fr;gap:.6rem}
  .zag-facts{grid-template-columns:1fr 1fr}
}
@media(max-width:800px){
  .zag-media{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;height:auto}
  .zm-big{grid-row:auto;grid-column:1/-1;aspect-ratio:16/9;height:auto}
  .zm-s{aspect-ratio:4/3;height:auto}
  .zag-foot{flex-direction:column;align-items:flex-start}
}

/* Wat je niet verliest: rustig blok onder de vergelijking */
.rrv{
  margin-top:2.4rem;padding:1.5rem 1.7rem;background:var(--paper-deep);border-radius:var(--radius);
  border-top:0;display:grid;grid-template-columns:1fr;gap:1rem;
}
.section-paper-deep .rrv{background:var(--white)}
.rrv h3{grid-column:1;max-width:none;margin:0;font-size:.72rem;font-weight:800;
  letter-spacing:.15em;text-transform:uppercase;color:var(--bronze)}
.rrv .checklist{grid-column:1;grid-row:auto;columns:2;column-gap:clamp(1.6rem,3vw,3rem);margin:0}
.rrv .checklist li{break-inside:avoid;margin-bottom:.55rem;font-size:.93rem}
.rrv .mc-link{grid-column:1;justify-self:start;padding-top:.9rem;border-top:1px solid var(--line);width:100%}
@media(max-width:760px){
  .rrv{padding:1.2rem 1.3rem}
  .rrv .checklist{columns:1}
}

/* rrv-lijst blijft grid, dus met grid-kolommen i.p.v. multi-column */
.rrv .checklist{columns:auto;display:grid;grid-template-columns:1fr 1fr;gap:.55rem clamp(1.6rem,3vw,3rem)}
@media(max-width:760px){.rrv .checklist{grid-template-columns:1fr}}


/* ============================================================
   Steenzeker 42i: kaartjes met gouden hoek op de zagerijfoto
   ============================================================ */
.szk{background:var(--ink);padding:0}
.szk > .container{position:relative;padding-top:clamp(2.4rem,5vw,4rem);padding-bottom:clamp(2.4rem,5vw,4rem);
  max-width:none}
.szk-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.szk-veil{position:absolute;inset:0;background:rgba(10,17,13,.78)}
.szk-in{position:relative;z-index:2;max-width:var(--container,1440px);margin:0 auto;
  padding:0 clamp(20px,3vw,44px)}
.szk-in h2{color:#fff;margin:.4rem 0 .7rem;font-size:clamp(1.6rem,2.8vw,2.4rem);line-height:1.16}
.szk-lede{margin:0 0 1.5rem;color:rgba(255,255,255,.82);line-height:1.7;max-width:52ch}

.szk-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.7rem}
.szk-grid article{
  position:relative;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  border-radius:6px;padding:1.2rem 1.1rem;backdrop-filter:blur(7px);overflow:hidden;
}
.szk-grid article::before{
  content:"";position:absolute;right:0;top:0;border-width:0 26px 26px 0;border-style:solid;
  border-color:transparent var(--gold) transparent transparent;
}
.szk-grid b{display:block;font-size:1rem;color:#fff;margin-bottom:.25rem}
.szk-grid span{font-size:.84rem;line-height:1.55;color:rgba(255,255,255,.74)}

.szk-extra{display:grid;grid-template-columns:1fr 1fr;gap:var(--split-gap);
  margin-top:1.8rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.2)}

.szk-gift-ph{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;
  background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
  font-size:.6rem;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.62);text-align:center;padding:.3rem}
.szk-gift p{margin:0;font-size:.9rem;line-height:1.6;color:rgba(255,255,255,.8)}
.szk-gift b{color:#fff}
.szk-bonus h3{margin:0 0 .7rem;font-size:.72rem;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold)}
.szk-bonus ul{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}
.szk-bonus li{position:relative;padding-left:1.35rem;font-size:.89rem;line-height:1.5;color:rgba(255,255,255,.8)}
.szk-bonus li::before{content:"";position:absolute;left:0;top:.42em;width:.6rem;height:.34rem;
  border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}

.szk-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.4rem;
  margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.2)}
.szk-cta p{margin:0;font-size:.86rem;color:rgba(255,255,255,.68)}

@media(max-width:1024px){
  .szk-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:820px){
  .szk-grid{grid-template-columns:1fr 1fr}
  .szk-extra{grid-template-columns:1fr;gap:1.6rem}
}
@media(max-width:560px){
  .szk-grid{grid-template-columns:1fr}
  .szk-cta .btn{width:100%;justify-content:center}
}


/* ============================================================
   Steenzeker 43h: genummerde kaarten met cadeaukaart ertussen
   ============================================================ */
.szk{background:var(--paper-deep);color:var(--ink);padding:var(--section-pad) 0}
.szk > .container{position:static;max-width:var(--container,1440px);padding:0 clamp(20px,3vw,44px)}
.szk-bg,.szk-veil,.szk-in{display:none}
.szk .eyebrow{color:var(--bronze);border-color:rgba(167,123,75,.35)}
.szk h2{color:var(--ink);margin:.4rem 0 .6rem;font-size:clamp(1.6rem,2.8vw,2.4rem);line-height:1.16}
.szk-lede{margin:0 0 1.5rem;color:var(--ink-soft);line-height:1.7;max-width:52ch}

.szk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.szk-grid article{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.3rem;backdrop-filter:none;
}
.szk-grid article::before{content:none}
.szk-grid i{
  display:block;font-style:normal;font-family:var(--font-display);font-weight:400;
  font-size:1.05rem;color:var(--bronze);margin-bottom:.35rem;
}
.szk-grid b{display:block;font-size:1rem;color:var(--ink);margin-bottom:.2rem}
.szk-grid span{font-size:.88rem;line-height:1.6;color:var(--ink-soft)}


.szk-gift-ph{
  display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;
  background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
  font-size:.58rem;font-weight:700;letter-spacing:.05em;color:rgba(255,255,255,.62);
  text-align:center;padding:.3rem;line-height:1.35;
}
.szk-grid .szk-gift p{margin:0;font-size:.87rem;line-height:1.55;color:rgba(255,255,255,.8)}
.szk-grid .szk-gift b{color:#fff;display:inline}

.szk-bonus{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.6rem;
  margin-top:1.4rem;padding-top:1.3rem;border-top:1px solid var(--line);
}
.szk-bonus h3{
  margin:0;font-size:.68rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--bronze);
}
.szk-bonus span{
  position:relative;padding-left:1.25rem;font-size:.88rem;color:var(--ink-soft);
}
.szk-bonus span::before{
  content:"";position:absolute;left:0;top:.42em;width:.62rem;height:.35rem;
  border-left:2px solid var(--bronze);border-bottom:2px solid var(--bronze);transform:rotate(-45deg);
}
.szk-bonus ul,.szk-reserve{display:none}

.szk-cta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.4rem;
  margin-top:1.4rem;padding-top:0;border-top:0;
}
.szk-cta p{margin:0;font-size:.86rem;color:var(--ink-soft)}
.szk-extra{display:none}

@media(max-width:1000px){
  .szk-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .szk-grid{grid-template-columns:1fr}
  .szk-cta .btn{width:100%;justify-content:center}
}

/* 43h: sectie is een normale kolomsectie, geen split-grid */
.szk > .container{display:block}
.szk .section-head{max-width:none}


/* Cadeaukaart: echte foto met placeholder-label eroverheen */
.szk-gift-ph{margin:0;position:relative;overflow:hidden;padding:0;box-shadow:none;display:block}
.szk-gift-ph img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
.szk-gift-ph span{
  position:absolute;left:0;right:0;bottom:0;padding:.9rem .35rem .28rem;text-align:center;
  font-size:.54rem;font-weight:700;letter-spacing:.06em;color:#fff;
  background:linear-gradient(to top,rgba(10,17,13,.86),transparent);
}


/* ============================================================
   Steenzeker 44g: groen blok met crème kaarten
   ============================================================ */
.szk{background:var(--paper);padding:var(--section-pad) 0}
.szk-box{background:var(--green-dark);border-radius:var(--radius);padding:clamp(1.6rem,3.2vw,2.8rem)}
.szk-box .eyebrow{color:var(--gold);border-color:rgba(227,196,155,.4)}
.szk-box h2{color:#fff;margin:.4rem 0 .6rem;font-size:clamp(1.6rem,2.8vw,2.4rem);line-height:1.16}
.szk-box .szk-lede{margin:0 0 1.5rem;color:rgba(255,255,255,.8);line-height:1.7;max-width:52ch}

.szk-box .szk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem}
.szk-box .szk-grid article{
  background:var(--paper);border:0;border-radius:6px;padding:1.15rem 1.2rem;
}
.szk-box .szk-grid i{
  display:block;font-style:normal;font-family:var(--font-display);font-weight:400;
  font-size:1rem;color:var(--bronze);margin-bottom:.26rem;
}
.szk-box .szk-grid b{display:block;font-size:.96rem;color:var(--ink);margin-bottom:.16rem}
.szk-box .szk-grid span{font-size:.86rem;line-height:1.55;color:var(--ink-soft)}

.szk-box .szk-gift{
  display:grid;grid-template-columns:92px 1fr;gap:.9rem;align-items:center;
  background:var(--paper);
}
.szk-box .szk-gift-ph{margin:0;position:relative;overflow:hidden;aspect-ratio:4/3;
  background:var(--paper-deep);box-shadow:none;display:block;padding:0}
.szk-box .szk-gift-ph img{width:100%;height:100%;object-fit:cover;display:block}
.szk-box .szk-gift-ph span{
  position:absolute;left:0;right:0;bottom:0;padding:.8rem .3rem .24rem;text-align:center;
  font-size:.52rem;font-weight:700;letter-spacing:.05em;color:#fff;line-height:1.3;
  background:linear-gradient(to top,rgba(10,17,13,.86),transparent);
}
.szk-box .szk-gift p{margin:0;font-size:.86rem;line-height:1.55;color:var(--ink-soft)}


.szk-box .szk-bonus{
  display:flex;flex-wrap:wrap;align-items:center;gap:.45rem 1.5rem;
  margin-top:1.4rem;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.2);
}
.szk-box .szk-bonus h3{margin:0;font-size:.67rem;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold)}
.szk-box .szk-bonus span{position:relative;padding-left:1.2rem;font-size:.87rem;color:rgba(255,255,255,.78)}
.szk-box .szk-bonus span::before{content:"";position:absolute;left:0;top:.42em;width:.6rem;height:.34rem;
  border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}

.szk-box .szk-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.4rem;
  margin-top:1.4rem;padding-top:0;border-top:0}
.szk-box .szk-cta p{margin:0;font-size:.86rem;color:rgba(255,255,255,.7)}

@media(max-width:1000px){
  .szk-box .szk-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .szk-box .szk-grid{grid-template-columns:1fr}
  .szk-box .szk-cta .btn{width:100%;justify-content:center}
}

/* Cadeaukaart: eigen kop en label, beeld boven de tekst */
.szk-box .szk-gift{
  grid-template-columns:1fr;gap:.75rem;align-items:start;
  background:var(--paper-deep);position:relative;
}
.szk-box .szk-gift-ph{aspect-ratio:16/10;width:100%}
.szk-gift-tag{
  position:absolute;right:1.1rem;top:1.1rem;z-index:3;
  font-size:.62rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-dark);background:var(--gold);padding:.24rem .55rem;border-radius:2px;
}



/* Cadeaukaart: tekst eerst, beeld sluit af */

.szk-box .szk-gift-ph{aspect-ratio:16/9;margin-top:.35rem}
.szk-gift-tag{position:static;justify-self:start;margin-bottom:.15rem}



/* ============================================================
   Zagerij 45a: tekst links, video rechts in 4:3 zoals elders
   ============================================================ */

.zag-wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--split-gap);align-items:center}
.zag-tx h2{margin:.4rem 0 .8rem;font-size:clamp(1.6rem,2.8vw,2.4rem);line-height:1.16;max-width:24ch}
.zag-tx .lede{margin:0 0 1rem}
.zag-tx p{margin:0 0 1rem;color:var(--ink-soft);line-height:1.75;max-width:52ch}
.zag-tx p:last-of-type{margin-bottom:1.4rem}
.zag-v{
  margin:0;position:relative;overflow:hidden;border-radius:var(--radius-img,6px);
  aspect-ratio:4/3;background:var(--paper-deep);cursor:pointer;box-shadow:var(--shadow);
}
.zag-v img{width:100%;height:100%;object-fit:cover;display:block}
.zag-v::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.9);
  box-shadow:0 8px 24px rgba(10,17,13,.22);transition:transform .25s,background .25s;
}
.zag-v::before{
  content:"";position:absolute;left:50%;top:50%;z-index:2;transform:translate(-40%,-50%);
  border-left:16px solid var(--green);border-top:10px solid transparent;border-bottom:10px solid transparent;
}
.zag-v:hover::after{transform:translate(-50%,-50%) scale(1.06);background:#fff}
.zag-lbl{
  position:absolute;left:.85rem;bottom:.85rem;z-index:3;
  font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:rgba(10,17,13,.62);padding:.26rem .6rem;border-radius:2px;
}
@media(max-width:1000px){
  .zag-wrap{grid-template-columns:1fr;gap:1.8rem}
  .zag-tx h2,.zag-tx p{max-width:none}
}

/* Geen dode play-knop tot de opname er is: gelabelde foto, geen bedieningselement */
.zag-v{cursor:default}
.zag-v::after,.zag-v::before{content:none}
.zag-v img{object-position:50% 42%}
.zag-lbl{background:rgba(10,17,13,.72)}

/* Cadeaukaart lijnt uit met de garantiekaarten: geen restmarge meer */
.szk-box .szk-gift{margin-top:0;padding-top:1.15rem;border-top:0}

/* Cadeaufoto vult de kaart */



/* Echte video in de zagerij-sectie */
.zag-v video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:var(--ink)}
.zag-lbl{display:none}


/* ============================================================
   Reels: korte video's uit de werkplaats
   ============================================================ */

.reel{
  position:relative;display:block;padding:0;border:0;cursor:pointer;overflow:hidden;
  border-radius:var(--radius-img,6px);background:var(--ink);aspect-ratio:9/16;
  box-shadow:inset 0 0 0 1px rgba(21,23,19,.08);
}
.reel video{width:100%;height:100%;object-fit:cover;display:block}
.reel::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.9);
  box-shadow:0 6px 18px rgba(10,17,13,.24);transition:transform .25s,opacity .25s;
}
.reel::before{
  content:"";position:absolute;left:50%;top:50%;z-index:3;transform:translate(-38%,-50%);
  border-left:13px solid var(--green);border-top:8px solid transparent;border-bottom:8px solid transparent;
  transition:opacity .25s;
}
.reel:hover::after{transform:translate(-50%,-50%) scale(1.06)}
.reel > span{
  position:absolute;left:0;right:0;bottom:0;z-index:4;padding:1.4rem .7rem .6rem;
  font-size:.78rem;font-weight:700;color:#fff;text-align:left;
  background:linear-gradient(to top,rgba(10,17,13,.88),transparent);
}

.reel-modal{
  position:fixed;inset:0;z-index:400;background:rgba(10,17,13,.92);
  display:flex;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem);
}
.reel-modal[hidden]{display:none}
.reel-modal video{
  max-width:min(460px,92vw);max-height:86vh;width:auto;height:auto;
  border-radius:8px;background:#000;box-shadow:0 30px 70px rgba(0,0,0,.5);
}
.rm-close{
  position:absolute;top:clamp(.8rem,3vw,1.6rem);right:clamp(.8rem,3vw,1.6rem);
  width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;font-size:1.6rem;line-height:1;
}
.rm-close:hover{background:rgba(255,255,255,.24)}

@media(max-width:900px){
  
  .reel > span{font-size:.72rem;padding:1.2rem .55rem .5rem}
}


/* Reels: poster is zichtbaar tot de video speelt */
.reel video{background:transparent}
.reel > span.ph-txt{color:#fff;font-size:.68rem;letter-spacing:.06em}


/* ============================================================
   Voordat we zagen (46j): tekstkaart over de foto
   ============================================================ */
.pv-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,3vw,2.8rem)}
.pv-ph{margin:0;position:relative;overflow:hidden;border-radius:var(--radius-img,6px);
  aspect-ratio:4/3;background:var(--paper)}
.pv-ph img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.pv-item:hover .pv-ph img{transform:scale(1.03)}
.pv-lbl{position:absolute;left:.75rem;bottom:.75rem;z-index:3;
  font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:rgba(10,17,13,.66);padding:.22rem .55rem;border-radius:2px}
.pv-card{
  position:relative;z-index:4;margin:-2.4rem 1.4rem 0;
  background:var(--white);border-radius:var(--radius);padding:1.3rem 1.4rem;
  box-shadow:0 14px 34px rgba(21,23,19,.1);
}
.pv-card h3{margin:0 0 .45rem;font-size:1.15rem}
.pv-card p{margin:0;font-size:.93rem;line-height:1.7;color:var(--ink-soft)}
.pv-sig{margin-top:.7rem !important;font-weight:700;color:var(--ink) !important;font-size:.86rem !important}
.pv-wa{display:inline-flex;align-items:center;gap:.4rem;margin-top:.9rem;
  font-size:.88rem;font-weight:700;color:var(--green);text-decoration:none;
  border-bottom:1px solid var(--bronze);padding-bottom:.15rem}
.pv-wa:hover{color:var(--bronze)}
@media(max-width:900px){
  .pv-duo{grid-template-columns:1fr;gap:2rem}
  .pv-card{margin:-1.8rem .9rem 0}
}

/* Naad: echte close-up met een klein label, geen gestippeld vlak */
.naad-fig{margin:0;position:relative;overflow:hidden;border-radius:var(--radius-img,6px);
  aspect-ratio:4/3;background:var(--paper-deep);box-shadow:var(--shadow)}
.naad-fig img{width:100%;height:100%;object-fit:cover;object-position:50% 55%;display:block}
.naad-lbl{position:absolute;left:.75rem;bottom:.75rem;z-index:3;
  font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:rgba(10,17,13,.66);padding:.22rem .55rem;border-radius:2px}
@media(max-width:1000px){.naad-fig{aspect-ratio:16/10}}


/* ============================================================
   Eén hoekafronding voor alle beeldvlakken (sluitregel)
   ============================================================ */
.media-frame,.gallery figure,.mdl-pic,.pdp-pic,.pdp-thumbs figure,.mp-gallery figure,
.pagehero-gal figure,.faq-photo img,.pl-photo,.promise-photo,.ab-side,.ab-portrait img,
.swatch,.workstrip figure,.makestrip .pic,.material-card .mc-pic,.mat-routes .mr-pic,
.team-grid .tg-pic,.member .mf,.pp-main,.pp-det,.cta-hero,.proj-pics figure,
.zag-v,.zag-media figure,.zk2-ph,.bd-ph,.naad-fig,.pv-ph,.reel,
.kz-ph,.cf-tile .ph,.szk-gift-ph,.mm-ph,.kb-set a,.zk-ph,.ph-media,
.i-photo,.mdl-more,.tg-pic,.mr-pic,.mc-pic{
  border-radius:var(--radius-img,6px);
}
/* kleine steenvakjes en logo's houden hun eigen vorm */
.ft-pic,.fo-sw,.mp-th{border-radius:2px}
.bb-logos img,.logo img,.f-logo{border-radius:0}
/* ronde portretten blijven rond */
.hero-advisor img,.ct-person img,.b2b-contact img,.mp-help-top img,.pdp-person img,
.rv-avatar,.zag-quote img,.wa-por,.team-grid .tg-pic.round{border-radius:50%}
/* beeld binnen een afgerond kader hoeft zelf geen radius */
.zag-v video,.zag-media img,.naad-fig img,.pv-ph img,.zk2-ph img,.bd-ph img,
.reel video,.kz-ph img,.cf-tile .ph img,.szk-gift-ph img,.mm-ph img,.kb-set img,
.pl-photo img,.pagehero-gal img,.mp-gallery img,.mdl-pic img,.ph-media img{border-radius:0}

/* Sluitregel hoekafronding: één waarde, hoogste specificiteit */
.team-grid .tg-pic,.szk-box .szk-grid .szk-gift .szk-gift-ph,.szk-box .szk-gift-ph{
  border-radius:var(--radius-img,6px) !important;
}
.team-grid .tg-pic img,.szk-box .szk-gift-ph img{border-radius:0 !important}
.hero-advisor img,.ct-person img,.b2b-contact img,.pdp-person img,
.rv-avatar,.zag-quote img,.wa-por{border-radius:50% !important}


/* ============================================================
   Reels 47j: liggende tegels als slider
   ============================================================ */
.reels-head{display:grid;grid-template-columns:1fr 1fr auto;gap:1rem var(--split-gap);
  align-items:end;margin-bottom:1.4rem}
.reels-head h2{margin:.4rem 0 0}
.reels-head .lede{margin:0}

.rn-btn{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--white);
  color:var(--ink);font-size:1.3rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:border-color .18s,color .18s,opacity .18s;
}
.rn-btn:hover:not(:disabled){border-color:var(--bronze);color:var(--green)}
.rn-btn:disabled{opacity:.32;cursor:default}

.reels{
  display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 3 * 1rem) / 4);
  gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:.4rem;scrollbar-width:none;
}
.reels::-webkit-scrollbar{display:none}
.reel{
  scroll-snap-align:start;aspect-ratio:4/5;
  position:relative;display:block;padding:0;border:0;cursor:pointer;overflow:hidden;
  border-radius:var(--radius-img,6px);background:var(--ink);
}
.reel video{width:100%;height:100%;object-fit:cover;display:block;background:transparent}
.reel::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.88);
  box-shadow:0 5px 16px rgba(10,17,13,.22);transition:transform .25s;
}
.reel::before{
  content:"";position:absolute;left:50%;top:50%;z-index:3;transform:translate(-36%,-50%);
  border-left:12px solid var(--green);border-top:8px solid transparent;border-bottom:8px solid transparent;
}
.reel:hover::after{transform:translate(-50%,-50%) scale(1.08)}

@media(max-width:1000px){
  .reels-head{grid-template-columns:1fr;align-items:start}
  .reels-nav{display:none}
  .reels{grid-auto-columns:calc((100% - 1rem) / 2.2)}
}
@media(max-width:560px){
  .reels{grid-auto-columns:78%}
}

/* Teamportretten: gezicht in beeld, gelijke hoogte */
.team-grid .tg-pic{aspect-ratio:4/5;display:block;overflow:hidden;background:var(--paper-deep)}
.team-grid .tg-pic img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.team-grid .tg-pic.ph-media{aspect-ratio:4/5 !important}


/* ============================================================
   Mega-menu Zakelijk: twee niveaus, zoals Materialen
   ============================================================ */
.mega-panel--zk2{grid-template-columns:250px 1fr;width:min(760px,calc(100vw - 3rem))}
.zk-lv1{background:var(--paper);border-right:1px solid var(--line);padding:1.1rem .9rem;
  display:grid;gap:.1rem;align-content:start}
.zk-lv1 a{display:grid;gap:.1rem;padding:.62rem .75rem;border-radius:4px;position:relative;
  text-decoration:none;transition:background .16s}
.zk-lv1 a b{font-size:.94rem;font-weight:700;color:var(--ink);line-height:1.3}
.zk-lv1 a small{font-size:.77rem;color:var(--ink-soft);line-height:1.35}
.zk-lv1 a:hover{background:rgba(255,255,255,.7)}
.zk-lv1 a.on{background:#fff;box-shadow:0 1px 0 rgba(21,23,19,.06)}
.zk-lv1 a.on b{color:var(--green)}
.zk-lv1 a:not(.zk-x)::after{content:"";position:absolute;right:.7rem;top:50%;width:.42rem;height:.42rem;
  border-right:1.5px solid var(--bronze);border-bottom:1.5px solid var(--bronze);
  transform:translateY(-50%) rotate(-45deg);opacity:0;transition:opacity .16s}
.zk-lv1 a.on::after,.zk-lv1 a:hover:not(.zk-x)::after{opacity:1}
.zk-lv1 .zk-x{margin-top:.6rem;padding-top:.75rem;border-top:1px solid var(--line);border-radius:0}
.zk-lv1 .zk-x b{color:var(--green)}

.zk-lv2{padding:1.2rem 1.3rem;background:none}
.zk-set{display:grid;grid-template-columns:1fr 132px;gap:.4rem 1.2rem;align-items:start}
.zk-set[hidden]{display:none}
.zk-kick{grid-column:1;margin:0 0 .6rem;font-size:.66rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bronze)}
.zk-set ul{grid-column:1;list-style:none;padding:0;margin:0;display:grid;gap:.42rem}
.zk-set li{position:relative;padding-left:1.25rem;font-size:.88rem;line-height:1.5;color:var(--ink-soft)}
.zk-set li::before{content:"";position:absolute;left:0;top:.42em;width:.6rem;height:.34rem;
  border-left:2px solid var(--bronze);border-bottom:2px solid var(--bronze);transform:rotate(-45deg)}
.zk-go{grid-column:1;margin-top:.9rem;font-size:.88rem;font-weight:700;color:var(--green);
  text-decoration:none;border-bottom:1px solid var(--bronze);padding-bottom:.15rem;justify-self:start}
.zk-go:hover{color:var(--bronze)}
.zk-set figure{grid-column:2;grid-row:1/5;margin:0;overflow:hidden;border-radius:var(--radius-img,6px);
  aspect-ratio:3/4;background:var(--paper-deep)}
.zk-set figure img{width:100%;height:100%;object-fit:cover;display:block}

@media(max-width:1024px){
  .mega-panel--zk2{grid-template-columns:1fr;width:auto}
  .zk-lv1{border-right:0;border-bottom:1px solid var(--line);padding:.6rem .2rem}
  .zk-lv1 a{padding:.6rem;min-height:44px}
  .zk-lv1 a::after{display:none}
  .zk-lv2{display:none}
}


/* ============================================================
   Samengevoegd maker-blok: zagerij, vakwerk, video
   ============================================================ */
.zag-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--split-gap);align-items:center;margin-bottom:2.4rem}
.zag-tx h2{margin:.4rem 0 .9rem;font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.18;max-width:24ch}
.zag-tx p{margin:0 0 1rem;color:var(--ink-soft);line-height:1.75;max-width:52ch}
.zag-tx .hero-actions{margin-top:1.3rem}
.zag-v{margin:0;position:relative;overflow:hidden;border-radius:var(--radius-img,6px);
  aspect-ratio:4/3;background:var(--ink)}
.zag-v video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

.zag-reels{margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.zag-reels-kick{margin:0 0 1rem;font-size:.9rem;color:var(--ink-soft)}

/* WhatsApp-sectie met visual ernaast */
.wa-duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--split-gap);align-items:center}
.wa-tx h2{color:#fff;margin:.4rem 0 .8rem;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.2}
.wa-tx p{margin:0 0 1.4rem;color:rgba(255,255,255,.82);line-height:1.75;max-width:50ch}
.wa-who{display:flex;align-items:center;gap:.75rem;margin-bottom:1.4rem;padding-bottom:1.3rem;
  border-bottom:1px solid rgba(255,255,255,.2)}
.wa-who img{width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:50% 22%;flex:0 0 auto}
.wa-who span{display:grid;gap:.05rem;font-size:.85rem;color:rgba(255,255,255,.7)}
.wa-who b{color:#fff;font-size:.94rem}
.wa-ph{margin:0;position:relative;overflow:hidden;border-radius:var(--radius-img,6px);
  aspect-ratio:4/3;background:var(--green)}
.wa-ph img{width:100%;height:100%;object-fit:cover;display:block}
.wa-lbl{position:absolute;left:.75rem;bottom:.75rem;z-index:3;
  font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:rgba(10,17,13,.66);padding:.22rem .55rem;border-radius:2px}

@media(max-width:900px){
  .zag-split,.wa-duo{grid-template-columns:1fr;gap:1.6rem}
  .zag-reels{margin-top:1.8rem}
}

.rv-all{margin:1.4rem 0 0;text-align:center}
.rv-all a{font-size:.9rem;font-weight:700;color:var(--green);text-decoration:none;
  border-bottom:1px solid var(--bronze);padding-bottom:.15rem}
.rv-all a:hover{color:var(--bronze)}

/* Slotblok: configurator als hoofdroute, Ilyas ernaast */
.slot2{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--split-gap);align-items:center}
.slot2-tx h2{color:#fff;margin:.4rem 0 .8rem;font-size:clamp(1.6rem,2.8vw,2.3rem);line-height:1.18;max-width:24ch}
.slot2-tx p{margin:0 0 1.4rem;color:rgba(255,255,255,.82);line-height:1.75;max-width:50ch}
.slot2-list{list-style:none;padding:0;margin:1.4rem 0 0;display:flex;flex-wrap:wrap;gap:.4rem 1.6rem}
.slot2-list li{position:relative;padding-left:1.25rem;font-size:.87rem;color:rgba(255,255,255,.72)}
.slot2-list li::before{content:"";position:absolute;left:0;top:.42em;width:.6rem;height:.34rem;
  border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}
.slot2-who{background:rgba(255,255,255,.07);border-radius:var(--radius);padding:1.5rem;
  display:grid;gap:.7rem;justify-items:start}
.slot2-who img{width:60px;height:60px;border-radius:50%;object-fit:cover;object-position:50% 22%}
.slot2-who p{margin:0;font-family:var(--font-display);font-weight:400;font-size:1.08rem;
  line-height:1.5;color:#fff}
.slot2-who > span{font-size:.84rem;color:rgba(255,255,255,.66)}
.slot2-links{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;margin-top:.3rem}
.slot2-links a{font-size:.9rem;font-weight:700;color:var(--gold);text-decoration:none;
  border-bottom:1px solid rgba(227,196,155,.5);padding-bottom:.12rem}
.slot2-links a:hover{color:#fff}
@media(max-width:900px){.slot2{grid-template-columns:1fr;gap:1.8rem}}

/* Reels-kop met navigatie */
.zag-reels-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.8rem 1.6rem;margin-bottom:1rem}
.zag-reels-kick{margin:0 !important}
@media(max-width:1000px){.zag-reels-head .reels-nav{display:none}}

/* Teamraster: 2+2 in de band waar 3 kolommen een weeskaart geven */
@media(min-width:820px) and (max-width:1080px){
  .team-grid{grid-template-columns:repeat(2,1fr)}
}

.szk-after{margin:1.3rem 0 0;padding-left:.9rem;border-left:2px solid var(--gold);
  font-size:.9rem;line-height:1.65;color:rgba(255,255,255,.8);max-width:60ch}


/* ============================================================
   Footer: merk links, drie kolommen, met belofteband
   ============================================================ */
.site-footer{
  background:var(--green-dark);color:rgba(255,255,255,.74);
  position:relative;
}
.site-footer a{color:rgba(255,255,255,.74);text-decoration:none;transition:color .16s}
.site-footer a:hover{color:var(--gold)}

/* belofteband */
.f-promise{border-bottom:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.16)}
.f-promise .container{
  display:flex;flex-wrap:wrap;align-items:center;gap:.55rem clamp(1.2rem,2.6vw,2.4rem);
  padding-top:1rem;padding-bottom:1rem;
}
.f-promise span{
  position:relative;padding-left:1.25rem;font-size:.85rem;line-height:1.4;color:rgba(255,255,255,.82);
}
.f-promise span::before{
  content:"";position:absolute;left:0;top:.42em;width:.62rem;height:.36rem;
  border-left:1.7px solid var(--gold);border-bottom:1.7px solid var(--gold);transform:rotate(-45deg);
}
.fp-more{
  margin-left:auto;font-size:.85rem;font-weight:700;color:var(--gold) !important;
  border-bottom:1px solid rgba(227,196,155,.45);padding-bottom:.12rem;white-space:nowrap;
}
.fp-more:hover{border-bottom-color:var(--gold)}

/* hoofdraster */
.f-main{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.15fr;
  gap:2rem clamp(1.6rem,3vw,2.8rem);
  padding-top:clamp(2rem,4vw,3.2rem);padding-bottom:clamp(1.6rem,3vw,2.4rem);
}
.f-logo{height:30px;width:auto;display:block;filter:brightness(0) invert(1);opacity:.94}
.f-claim{margin:1.1rem 0 1.2rem;font-size:.88rem;line-height:1.7;color:rgba(255,255,255,.66);max-width:34ch}

.f-score{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.5rem .8rem;border-radius:6px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);transition:border-color .18s,background .18s;
}
.f-score:hover{background:rgba(255,255,255,.12);border-color:rgba(227,196,155,.4)}
.f-score b{font-family:var(--font-display);font-weight:400;font-size:1.2rem;color:#fff;line-height:1}
.f-stars{font-style:normal;color:var(--gold);font-size:.8rem;letter-spacing:.04em}
.f-score > span{font-size:.82rem;color:rgba(255,255,255,.62)}

.f-ilyas{
  display:flex;align-items:center;gap:.75rem;margin-top:1.4rem;padding-top:1.3rem;
  border-top:1px solid rgba(255,255,255,.12);
}
.f-ilyas img{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:50% 22%;flex:0 0 auto}
.f-ilyas p{margin:0;font-size:.87rem;line-height:1.5;color:rgba(255,255,255,.8)}
.f-ilyas p span{display:block;font-size:.79rem;color:rgba(255,255,255,.5);margin-top:.1rem}

.f-col h5{
  margin:0 0 .9rem;font-size:.67rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);
}
.f-col ul{list-style:none;padding:0;margin:0;display:grid;gap:.45rem;font-size:.88rem;line-height:1.5}
.f-adr,.f-open{color:rgba(255,255,255,.58)}
.f-open{font-size:.82rem;line-height:1.55}
.f-tel{font-weight:700;color:#fff !important;font-size:.95rem}
.f-tel:hover{color:var(--gold) !important}

.f-acts{display:grid;gap:.5rem;margin-top:1.1rem}
.f-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.62rem 1rem;border-radius:var(--radius);font-size:.86rem;font-weight:700;
  text-align:center;transition:background .18s,border-color .18s,color .18s;
}
.f-btn-gold{background:var(--gold);color:var(--green-dark) !important;border:1px solid var(--gold)}
.f-btn-gold:hover{background:#fff;border-color:#fff;color:var(--green-dark) !important}
.f-btn-ghost{background:none;border:1px solid rgba(255,255,255,.28);color:#fff !important}
.f-btn-ghost:hover{border-color:var(--gold);color:var(--gold) !important}

.f-bottom{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.5rem;
  padding-top:1.2rem;padding-bottom:1.4rem;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:.8rem;color:rgba(255,255,255,.5);
}
.f-area{margin:0;flex:1 1 24rem;border:0;padding:0}
.f-copy{margin:0}
.f-legal{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;margin-left:auto}
.f-legal a{color:rgba(255,255,255,.5)}

@media(max-width:700px){
  .f-legal{margin-left:0;width:100%}
}
@media(max-width:760px){
  .site-footer{padding-bottom:56px}
}


/* ============================================================
   Wat maken we: vast raster van acht (50c)
   ============================================================ */

.wm-it{
  position:relative;display:block;aspect-ratio:4/3;overflow:hidden;
  border-radius:var(--radius-img,6px);background:var(--paper);text-decoration:none;
  box-shadow:inset 0 0 0 1px rgba(21,23,19,.07);
}
.wm-it img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.wm-it:hover img{transform:scale(1.05)}
.wm-it::after{content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 0 1px rgba(21,23,19,.07);transition:box-shadow .25s;pointer-events:none}
.wm-it:hover::after{box-shadow:inset 0 0 0 1px var(--bronze)}
.wm-t{
  position:absolute;inset:auto 0 0 0;z-index:2;padding:1.6rem .85rem .7rem;
  color:#fff;font-weight:700;font-size:.95rem;line-height:1.3;
  background:linear-gradient(to top,rgba(10,17,13,.9) 0%,rgba(10,17,13,.4) 55%,rgba(10,17,13,0) 100%);
}



/* 8 items: vol in 4 of 2 kolommen, nooit een gat in de laatste rij */



/* ============================================================
   Elementor-proof: statische hero
   ============================================================ */
.hero{position:relative;overflow:hidden;display:flex;align-items:center;
  min-height:clamp(500px,42vw,600px);background:var(--ink)}
.hero .hero-bg{position:absolute;inset:0;z-index:0}
.hero .hero-bg img{width:100%;height:100%;object-fit:cover;display:block}
.hero::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(10,17,13,.95) 0%,rgba(10,17,13,.84) 40%,rgba(10,17,13,.36) 68%,rgba(10,17,13,.10) 100%)}

.hero > .container{position:relative;z-index:3}
.hero-glass{max-width:44rem}
.hero-glass h1{max-width:20ch}
.hero-steps{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px 24px;margin:0 0 24px}
.hero-steps li{display:inline-flex;align-items:center;gap:8px;font-size:.86rem;font-weight:600;
  color:rgba(255,255,255,.86);white-space:nowrap}
.hero-steps i{display:inline-flex;align-items:center;justify-content:center;font-style:normal;
  width:22px;height:22px;border-radius:50%;background:rgba(227,196,155,.18);
  border:1px solid rgba(227,196,155,.5);color:var(--gold);font-size:.7rem;font-weight:800}
@media(max-width:1024px){
  .hero{min-height:480px}
  .hero::before{background:linear-gradient(to top,rgba(10,17,13,.95) 0%,rgba(10,17,13,.8) 44%,rgba(10,17,13,.3) 80%,transparent)}
}
@media(max-width:767px){
  .hero{display:block;min-height:0}
  
  .hero::before{content:none}
  .hero > .container{background:none;padding-top:clamp(4.5rem,22vh,7rem);padding-bottom:2.2rem}
  .hero-glass h1{font-size:1.9rem}
  .hero-glass .lede{font-size:.95rem}
  .hero-steps{gap:8px 16px}
  .hero-steps li{font-size:.8rem}
  .hero .hero-actions .btn{width:100%;justify-content:center;min-height:44px}
}


/* ============================================================
   Elementor-proof: steenlooks als wrappende flexrij
   ============================================================ */
.swatch-row{display:flex;flex-wrap:wrap;gap:16px}
.swatch-row .swatch{flex:1 1 calc((100% - 4 * 16px) / 5);min-width:140px;max-width:100%;
  position:relative;display:block;text-decoration:none;color:inherit}
.swatch-row .swatch img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  border-radius:var(--radius-img,6px)}
.swatch-row .swatch span{display:block;margin-top:8px;font-size:.88rem;font-weight:600;color:var(--ink)}
.swatch-row .swatch:hover span{color:var(--green)}
.swatch-row .pop-tag{position:absolute;left:8px;top:8px;z-index:2;font-style:normal;
  font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--green-dark);background:var(--gold);padding:3px 8px;border-radius:2px}
@media(max-width:1024px){
  .swatch-row .swatch{flex:1 1 calc((100% - 2 * 16px) / 3)}
}
@media(max-width:767px){
  .swatch-row{gap:8px}
  .swatch-row .swatch{flex:1 1 calc((100% - 8px) / 2)}
}


/* ============================================================
   Elementor-proof: reels als wrappende flexrij, klik om te kijken
   ============================================================ */

.reels .reel{aspect-ratio:4/5;
  position:relative;display:block;overflow:hidden;border-radius:var(--radius-img,6px);
  background:var(--ink);border:0;padding:0;cursor:pointer}
.reels .reel img{width:100%;height:100%;object-fit:cover;display:block}
.reels-nav{display:none}
@media(max-width:1024px){
  .reels .reel{flex:1 1 calc((100% - 16px) / 2)}
}


/* ============================================================
   Elementor-proof: CSS Grid vervangen door wrappende flexrijen
   ============================================================ */
.cards,.team-grid,.craft,.kz,.b2b-cards,.trade-grid,.mat-routes,.material-cards,
.make-grid,.steps,.flow,.zeker2,.reels-head{display:flex;flex-wrap:wrap;gap:24px}
.material-cards > *,.mat-routes > *,.kz > *,.craft > *{flex:1 1 calc((100% - 2 * 24px) / 3);min-width:260px}
.cards > *{flex:1 1 calc((100% - 3 * 24px) / 4);min-width:200px}
.team-grid > *{flex:1 1 calc((100% - 3 * 24px) / 4);min-width:200px}
.b2b-cards > *,.trade-grid > *{flex:1 1 calc((100% - 24px) / 2);min-width:260px}
.steps > *,.flow > *{flex:1 1 calc((100% - 3 * 24px) / 4);min-width:200px}
.zeker2 > *{flex:1 1 calc((100% - 24px) / 2);min-width:280px}
.make-grid > *{flex:1 1 calc((100% - 3 * 16px) / 4);min-width:180px}
.reels-head{align-items:flex-end;justify-content:space-between}
.reels-head > div{flex:1 1 24rem}
.reels-head .lede{flex:1 1 20rem;margin:0}
@media(max-width:1024px){
  .cards > *,.material-cards > *,.mat-routes > *,.kz > *,.craft > *,
  .team-grid > *,.steps > *,.flow > *,.make-grid > *{flex:1 1 calc((100% - 24px) / 2);min-width:0}
}
@media(max-width:767px){
  .cards,.team-grid,.craft,.kz,.b2b-cards,.trade-grid,.mat-routes,.material-cards,
  .make-grid,.steps,.flow,.zeker2{gap:16px}
  .cards > *,.material-cards > *,.mat-routes > *,.kz > *,.craft > *,.team-grid > *,
  .steps > *,.flow > *,.b2b-cards > *,.trade-grid > *,.zeker2 > *{flex:1 1 100%}
  .make-grid > *{flex:1 1 calc((100% - 16px) / 2)}
}


/* Steenlooks: naam in de foto, wit op een zachte gradient */
.swatch-row .swatch{overflow:hidden;border-radius:var(--radius-img,6px)}
.swatch-row .swatch img{border-radius:0}
.swatch-row .swatch span{
  position:absolute;left:0;right:0;bottom:0;margin:0;padding:1.5rem .7rem .55rem;
  color:#fff;font-weight:700;font-size:.86rem;line-height:1.3;
  background:linear-gradient(to top,rgba(10,17,13,.88) 0%,rgba(10,17,13,.5) 45%,rgba(10,17,13,0) 100%);
  text-shadow:0 1px 6px rgba(10,17,13,.4);
}
.swatch-row .swatch:hover span{color:var(--gold)}


/* ============================================================
   Steenzeker 55a: tekst links, beeld rechts met cadeaukaart
   ============================================================ */
.szk-split{display:flex;flex-wrap:wrap;border-radius:var(--radius);overflow:hidden;
  background:var(--green-dark);color:#fff}
.szk-split .szk-pad{flex:1 1 56%;padding:clamp(1.6rem,3.2vw,2.8rem)}
.szk-split .szk-fig{flex:1 1 34%;min-height:440px;margin:0;position:relative;overflow:hidden;
  order:2;background:var(--paper-deep)}
.szk-split .szk-fig img{width:100%;height:100%;object-fit:cover;display:block}
.szk-split .eyebrow{color:var(--gold);border-color:rgba(227,196,155,.4)}
.szk-split h2{margin:.4rem 0 .6rem;font-size:clamp(1.55rem,2.7vw,2.3rem);line-height:1.16;color:#fff}
.szk-split .szk-lede{margin:0 0 1.4rem;line-height:1.7;max-width:48ch;color:rgba(255,255,255,.8)}

.szk-rows{display:flex;flex-wrap:wrap;gap:.7rem}
.szk-rows article{flex:1 1 100%;background:rgba(255,255,255,.07);border-radius:6px;
  display:flex;gap:.9rem;align-items:flex-start;padding:.85rem 1rem}
.szk-rows i{font-style:normal;font-family:var(--font-display);font-weight:400;
  color:var(--gold);font-size:1rem;flex:0 0 auto;line-height:1.35}
.szk-rows div{display:grid;gap:.1rem}
.szk-rows b{font-size:.96rem;color:#fff}
.szk-rows span{font-size:.86rem;line-height:1.55;color:rgba(255,255,255,.74)}

.szk-split .szk-bonus{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem 1.5rem;
  margin-top:1.3rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.2)}
.szk-split .szk-bonus h3{margin:0;font-size:.67rem;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold)}
.szk-split .szk-bonus span{position:relative;padding-left:1.2rem;font-size:.86rem;color:rgba(255,255,255,.78)}
.szk-split .szk-bonus span::before{content:"";position:absolute;left:0;top:.42em;width:.6rem;height:.34rem;
  border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}

.szk-split .szk-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.4rem;margin-top:1.4rem}
.szk-split .szk-cta p{margin:0;font-size:.86rem;color:rgba(255,255,255,.7)}

.szk-split .szk-gift{position:absolute;left:1rem;right:1rem;bottom:1rem;z-index:4;
  background:var(--paper);border-radius:6px;padding:.9rem 1rem}
.szk-split .szk-gift em{font-style:normal;display:inline-block;font-size:.6rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--green-dark);background:var(--gold);
  padding:.2rem .5rem;border-radius:2px;margin-bottom:.3rem}
.szk-split .szk-gift b{display:block;font-size:.94rem;color:var(--ink);margin-bottom:.15rem}
.szk-split .szk-gift p{margin:0;font-size:.82rem;line-height:1.5;color:var(--ink-soft)}

@media(max-width:900px){
  .szk-split .szk-pad,.szk-split .szk-fig{flex:1 1 100%}
  .szk-split .szk-fig{min-height:0;aspect-ratio:16/9;order:0}
  .szk-split .szk-cta .btn{width:100%;justify-content:center}
}


/* ============================================================
   Keuzehulp: één vraag, drie antwoorden
   ============================================================ */
.kz-q{
  margin:0 0 1.1rem;font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.25rem,2.1vw,1.7rem);line-height:1.25;color:var(--ink);
}
.kz-opts{display:flex;flex-wrap:wrap;gap:1rem}
.kz-opts a{
  flex:1 1 17rem;display:grid;gap:.5rem;align-content:start;text-decoration:none;color:inherit;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.1rem 1.2rem 1.3rem;transition:border-color .2s,transform .2s;
}
.kz-opts a:hover{border-color:var(--bronze);transform:translateY(-2px)}
.kz-pic{display:block;overflow:hidden;border-radius:var(--radius-img,6px);aspect-ratio:16/9;
  background:var(--paper-deep);margin-bottom:.2rem}
.kz-pic img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.kz-opts a:hover .kz-pic img{transform:scale(1.04)}
.kz-opts b{font-size:1.06rem;line-height:1.35}
.kz-opts .kz-d{font-size:.92rem;line-height:1.6;color:var(--ink-soft)}
.kz-opts em{font-style:normal;font-size:.86rem;font-weight:700;color:var(--green);margin-top:.15rem}
.kz-opts a:hover em{color:var(--bronze)}

.kz-foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.9rem 1.6rem;
  margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid var(--line);
}
.kz-foot p{margin:0;font-size:.94rem;line-height:1.6;color:var(--ink-soft);max-width:48ch}
@media(max-width:560px){
  .kz-foot .btn{width:100%;justify-content:center}
}

/* Koppen niveau 2 zwaarder */
h2,.section-head h2,.szk-box h2,.hv h2,.vg h2,.kh h2{font-weight:600}


/* ============================================================
   Slotformulier 58d: portret groot naast het formulier
   ============================================================ */
.of-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.8rem,3.4vw,3.4rem);align-items:center}
.of-form{display:grid;gap:.9rem;margin-top:1.3rem;max-width:34rem}
.of-two{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.of-form label{display:grid;gap:.32rem;font-size:.86rem;font-weight:700;color:var(--ink)}
.of-form input,.of-form select,.of-form textarea{
  font:inherit;font-size:.94rem;font-weight:400;color:var(--ink);
  padding:.7rem .85rem;min-height:46px;border:1px solid var(--line);border-radius:8px;background:#fff;
}
.of-form textarea{min-height:92px;resize:vertical}
.of-form select{
  appearance:none;-webkit-appearance:none;height:46px;padding-right:2.1rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2362675f' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;
}
.of-form input:focus,.of-form select:focus,.of-form textarea:focus{outline:none;border-color:var(--bronze)}
.of-form .btn{justify-self:start;margin-top:.2rem}
.of-fine{margin:0;font-size:.84rem;line-height:1.6;color:var(--ink-soft)}
.of-fine a{color:var(--green);font-weight:600;text-decoration:underline;
  text-decoration-color:rgba(167,123,75,.45);text-underline-offset:3px}

.of-por figure{margin:0;overflow:hidden;border-radius:var(--radius-img,6px);
  aspect-ratio:4/5;background:var(--paper-deep)}
.of-por figure img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.of-quote{margin:1rem 0 0;font-family:var(--font-display);font-weight:400;font-size:1.15rem;
  line-height:1.4;color:var(--ink)}
.of-sign{margin:.3rem 0 0;font-size:.86rem;color:var(--ink-soft)}
.of-sign b{color:var(--ink)}

@media(max-width:900px){
  .of-wrap{grid-template-columns:1fr;gap:1.8rem}
  .of-por figure{aspect-ratio:16/10}
  .of-por{order:-1}
}
@media(max-width:560px){
  .of-two{grid-template-columns:1fr}
  .of-form .btn{width:100%;justify-content:center}
}


/* ============================================================
   Wat maken we: slider met dezelfde bediening als de reels
   ============================================================ */
.wm-head{display:grid;grid-template-columns:1fr 1fr auto;gap:1rem var(--split-gap);
  align-items:end;margin-bottom:1.4rem}
.wm-head h2{margin:.4rem 0 0}
.wm-head .lede{margin:0}

.wn-btn{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--white);
  color:var(--ink);font-size:1.3rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:border-color .18s,color .18s,opacity .18s;
}
.wn-btn:hover:not(:disabled){border-color:var(--bronze);color:var(--green)}
.wn-btn:disabled{opacity:.32;cursor:default}

.wm-grid{
  display:grid;grid-template-columns:none;grid-auto-flow:column;
  grid-auto-columns:calc((100% - 3 * 1rem) / 4);gap:1rem;
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.4rem;scrollbar-width:none;
}
.wm-grid::-webkit-scrollbar{display:none}
.wm-it{scroll-snap-align:start}

@media(max-width:1000px){
  .wm-head{grid-template-columns:1fr;align-items:start}
  .wm-nav{display:none}
  .wm-grid{grid-auto-columns:calc((100% - 1rem) / 2.2)}
}
@media(max-width:560px){
  .wm-grid{grid-auto-columns:72%}
}

@media(max-width:700px){.wm-t{font-size:.88rem;padding:1.4rem .7rem .6rem}}


/* ============================================================
   Sluitregel kopgewichten: één schaal voor de hele site
   Display-koppen (Newsreader) op 600, kleine kapitaal-labels
   houden hun eigen gewicht.
   ============================================================ */
h1,
.hero-glass h1,.pagehero h1,.cfg-head h1,.cat-head h1,.mp-head h1,
.hv h1,.hx h1{
  font-weight:600;
}
h2,
.section-head h2,.szk-box h2,.szk-split h2,.hv h2,.vg h2,.kh h2,
.ab-mid h2,.wm-head h2,.reels-head h2,.zag-head h2,.mp-head h2{
  font-weight:600;
}
/* serif-titels op h3-niveau volgen dezelfde schaal */
.material-card h3,.team-grid h3,.card-photo h3,.kz-card h3,
.zk2 h3,.pv-card h3,.trade-grid h3,.mp-card h3{
  font-weight:600;
}
/* uitzondering: kleine kapitaal-labels blijven Archivo 700/800 */
.fo-group h3,.pdp-spec h3,.szk-bonus h3,.szk-box .szk-bonus h3,
.szk-split .szk-bonus h3,.rrv h3,.vs-them h3,.mega-group h4{
  font-family:var(--font);
  font-weight:800;
}

/* Beide kolomkoppen van het vergelijkingsblok identiek */
.vs-us h3,.vs-them h3{
  font-family:var(--font);font-size:.8rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:1.3rem;
  height:42px;display:flex;align-items:center;gap:.5rem;
}
.vs-us h3{color:var(--gold)}
.vs-us h3 img{height:20px !important;width:auto}


/* ============================================================
   Waar we in geloven (58d): vier kaarten zonder foto
   ============================================================ */
.creed{display:flex;flex-wrap:wrap;gap:1rem}
.creed article{
  flex:1 1 calc((100% - 3 * 1rem) / 4);min-width:0;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.4rem;display:grid;gap:.5rem;align-content:start;transition:border-color .2s;
}
.creed article:hover{border-color:var(--bronze)}
.creed article i{
  font-style:normal;display:inline-flex;align-items:center;justify-content:center;
  width:1.8rem;height:1.8rem;border-radius:50%;border:1px solid var(--bronze);
  color:var(--bronze);font-size:.78rem;font-weight:800;
}
.creed article h3{margin:0;font-family:var(--font-display);font-weight:600;font-size:1.1rem;letter-spacing:-.01em}
.creed article p{margin:0;font-size:.9rem;line-height:1.65;color:var(--ink-soft)}
.creed article .cr-pic{display:none}
@media(max-width:1000px){.creed article{flex:1 1 calc((100% - 1rem) / 2)}}
@media(max-width:560px){.creed article{flex:1 1 100%}}


/* ============================================================
   Direct bij de steenspecialist (60c): krijgen tegenover overslaan
   ============================================================ */
.dz-two{display:flex;flex-wrap:wrap;gap:1rem;align-items:stretch}
.dz-two article{flex:1 1 20rem;border-radius:var(--radius);padding:clamp(1.3rem,2.4vw,1.9rem)}
.dz-get{background:var(--green-dark);color:#fff}
.dz-skip{background:var(--paper-deep)}
.section-paper-deep .dz-skip{background:var(--white)}
.dz-two h3{margin:0 0 1rem;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.dz-get h3{color:var(--gold)}
.dz-skip h3{color:var(--ink-soft)}
.dz-two ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.dz-two li{font-size:.95rem;line-height:1.55;position:relative;padding-left:1.5rem}
.dz-get li{color:#fff}
.dz-get li::before{content:"";position:absolute;left:0;top:.42em;width:.64rem;height:.36rem;
  border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}
.dz-skip li{color:var(--ink-soft)}
.dz-skip li::before{content:"";position:absolute;left:0;top:.6em;width:.64rem;height:2px;
  background:var(--clay,#b4553f);opacity:.55}
.dz-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.4rem;margin-top:1.5rem}


/* ============================================================
   Merkenbalk: één lijn, één logohoogte
   ============================================================ */
.brandbar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem clamp(1.6rem,3vw,2.6rem);
  padding:1.6rem 0 0;border-top:1px solid var(--line);border-bottom:0;
}
.bb-label{
  font-size:.7rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-soft);opacity:.8;align-self:center;
}
.bb-logos{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;
  gap:1.2rem clamp(2rem,3.6vw,3.4rem);margin-left:auto;
  background:none;border:0;
}
.bb-logos a{
  display:flex;align-items:center;justify-content:center;padding:0;
  background:none;border:0;min-height:0;transition:opacity .22s;
}
.bb-logos a:hover{transform:none;opacity:1}
.bb-logos img{
  width:auto;display:block;border-radius:0;
  filter:grayscale(1);opacity:.45;transition:filter .22s,opacity .22s;
}
.bb-logos a:hover img{filter:grayscale(0);opacity:1}
/* optisch gelijk gewicht per logo */
.bb-logos a[title*="Dekton"] img{height:clamp(20px,2vw,25px)}
.bb-logos a[title*="Neolith"] img{height:clamp(16px,1.6vw,20px)}
.bb-logos a[title*="Laminam"] img{height:clamp(21px,2.1vw,26px)}
.bb-logos a[title*="Silestone"] img{height:clamp(22px,2.2vw,28px)}
.bb-logos a[title*="Diresco"] img{height:clamp(25px,2.5vw,32px)}
.bb-logos a[title*="Technistone"] img{height:clamp(18px,1.8vw,22px)}

@media(max-width:820px){
  .brandbar{flex-direction:column;align-items:flex-start;gap:1.1rem}
  .bb-logos{margin-left:0;justify-content:flex-start;gap:1.1rem 2rem}
  .bb-logos a{min-height:0;padding:0;background:none;border:0}
}


/* Reviewkop: H2 met score en Google-logo op één regel */
.rv-head{display:grid;grid-template-columns:1fr auto auto;gap:.8rem clamp(1.4rem,3vw,2.4rem);
  align-items:end;padding-bottom:1.2rem;margin-bottom:1.4rem;border-bottom:1px solid var(--line)}
.rv-hd-tx h2{margin:.35rem 0 0}
.rv-hd-sc{display:flex;align-items:center;gap:.55rem}
.rv-hd-sc .rv-g{flex:0 0 auto}
.rv-hd-sc .rv-num{font-family:var(--font-display);font-weight:400;font-size:clamp(1.7rem,2.6vw,2.3rem);
  line-height:1;color:var(--ink)}
.rv-hd-sc .rv-stars-lg{color:var(--gold);font-size:1rem;letter-spacing:.1em}
.rv-head .rv-link{align-self:end;white-space:nowrap}
@media(max-width:900px){
  .rv-head{grid-template-columns:1fr;align-items:start;gap:.9rem}
  .rv-head .rv-link{justify-self:start}
}

/* Reviewkop: alles links uitgelijnd, geen link rechts */
.rv-head{display:block;text-align:left}
.rv-head h2{margin:.35rem 0 .8rem}
.rv-head .rv-hd-sc{display:flex;align-items:center;gap:.55rem;justify-content:flex-start}

/* Reviewkop: score rechts naast de titel */
.rv-head{display:grid;grid-template-columns:1fr auto;gap:.4rem clamp(1.4rem,3vw,2.4rem);
  align-items:end;text-align:left}
.rv-head .eyebrow{grid-column:1;grid-row:1}
.rv-head h2{grid-column:1;grid-row:2;margin:.35rem 0 0}
.rv-head .rv-hd-sc{grid-column:2;grid-row:2;justify-content:flex-end;align-self:end}
@media(max-width:820px){
  .rv-head{grid-template-columns:1fr}
  .rv-head .rv-hd-sc{grid-column:1;grid-row:3;justify-content:flex-start;margin-top:.7rem}
}

/* Showroom Velp: donkere sectie met een zachte groene lichtval */
.section-dark{
  background:linear-gradient(135deg,rgba(29,92,66,.18),transparent 42%),#151713;
}

/* Toepassingskaarten wat hoger */
.wm-it{aspect-ratio:3/4}
@media(max-width:560px){.wm-it{aspect-ratio:4/5}}

/* Merkenbalk zonder scheidingslijn erboven */
.brandbar{border-top:0;padding-top:0}

/* Slot-CTA op hetzelfde donkere vlak als de showroomsectie */
#aanvraag,.of-sec,section.of{
  background:linear-gradient(135deg,rgba(29,92,66,.18),transparent 42%),#151713;
}
#aanvraag .eyebrow{color:var(--gold);border-color:rgba(227,196,155,.4)}
#aanvraag h2,#aanvraag h3{color:#fff}
#aanvraag .lede,#aanvraag p{color:rgba(255,255,255,.8)}
#aanvraag .of-wrap,#aanvraag .of-card{background:transparent}

/* Slot-CTA: velden en kaart leesbaar op het donkere vlak */
#aanvraag .of-form label{color:rgba(255,255,255,.86)}
#aanvraag .of-form input,#aanvraag .of-form select,#aanvraag .of-form textarea{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.24);color:#fff;
}
#aanvraag .of-form input::placeholder,#aanvraag .of-form textarea::placeholder{color:rgba(255,255,255,.45)}
#aanvraag .of-form input:focus,#aanvraag .of-form select:focus,#aanvraag .of-form textarea:focus{
  border-color:var(--gold);background:rgba(255,255,255,.12);outline:none;
}
#aanvraag .of-form select option{color:var(--ink)}
#aanvraag .of-fine,#aanvraag .of-sig span,#aanvraag small{color:rgba(255,255,255,.62)}
#aanvraag .of-side,#aanvraag .of-card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16)}
#aanvraag .checklist li,#aanvraag li{color:rgba(255,255,255,.82)}
#aanvraag .checklist li::before{border-color:var(--gold)}
#aanvraag a:not(.btn){color:var(--gold)}
#aanvraag .btn-outline{border-color:rgba(255,255,255,.4);color:#fff}
#aanvraag .btn-outline:hover{border-color:var(--gold);color:var(--gold)}
#aanvraag hr,#aanvraag .of-wrap > div{border-color:rgba(255,255,255,.16)}

/* Slot-CTA: geërfde inktkleur binnen de donkere sectie neutraliseren */
#aanvraag .of-por,#aanvraag .of-sign{color:rgba(255,255,255,.8)}
#aanvraag .of-sign b,#aanvraag b,#aanvraag strong{color:#fff}


/* ============================================================
   Projectkaarten: zelfde stijl als de homepage, drie kolommen
   ============================================================ */
.pj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.pj{
  position:relative;display:block;overflow:hidden;border-radius:var(--radius-img,6px);
  aspect-ratio:4/3;background:var(--paper-deep);text-decoration:none;color:inherit;
}
.pj img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.pj:hover img{transform:scale(1.05)}
.pj[hidden]{display:none}
.pj .lens{
  position:absolute;top:.8rem;right:.8rem;z-index:3;
  font-size:.7rem;font-weight:700;letter-spacing:.06em;color:#fff;
  background:rgba(10,17,13,.66);padding:.28rem .62rem;border-radius:2px;
  opacity:0;transform:translateY(-4px);transition:opacity .22s,transform .22s;
}
.pj:hover .lens{opacity:1;transform:none}
.pj-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;display:grid;gap:.1rem;
  padding:1.9rem 1rem .85rem;color:#fff;
  background:linear-gradient(to top,rgba(10,17,13,.9) 0%,rgba(10,17,13,.45) 55%,transparent);
}
.pj-cap b{font-size:1.02rem;font-weight:700;line-height:1.3}
.pj-cap span{font-size:.82rem;color:rgba(255,255,255,.76)}

@media(max-width:1000px){.pj-grid{grid-template-columns:repeat(2,1fr);gap:1rem}}
@media(max-width:600px){.pj-grid{grid-template-columns:1fr}}

/* Projectkaart: identiek aan .workstrip figure op de homepage */
.pj{aspect-ratio:3/4;border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.pj img{transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.pj:hover img{transform:scale(1.35)}
.pj .lens{
  top:1rem;left:1rem;right:auto;
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);background:rgba(255,255,255,.94);border-radius:100px;
  padding:.35rem .8rem;transform:translateY(-6px);transition:opacity .25s,transform .25s;
}
.pj-cap{padding:2.6rem 1.1rem .95rem;
  background:linear-gradient(180deg,rgba(21,23,19,0),rgba(21,23,19,.8))}
.pj-cap b{font-size:1rem}
.pj-cap span{font-size:.84rem;color:rgba(255,255,255,.8)}
@media(prefers-reduced-motion:reduce){.pj:hover img{transform:none}}


/* ============================================================
   Contactpagina: formulier en gegevens boven de vouw
   ============================================================ */
.ct-top{padding-top:clamp(1.6rem,3vw,2.6rem);padding-bottom:clamp(2rem,4vw,3.2rem)}
.ct-grid{display:grid;grid-template-columns:1.35fr .8fr;gap:clamp(1.8rem,3.4vw,3.4rem);align-items:start}
.ct-form-col h1{margin:.3rem 0 .5rem;font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.14;max-width:20ch}
.ct-sub{margin:0 0 1.4rem;font-size:1rem;line-height:1.7;color:var(--ink-soft);max-width:46ch}

.ct2-form{display:grid;gap:.85rem;max-width:34rem}
.ct2-row{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.ct2-form label{display:grid;gap:.3rem;font-size:.84rem;font-weight:700;color:var(--ink)}
.ct2-form input,.ct2-form textarea{
  font:inherit;font-size:.95rem;font-weight:400;padding:.7rem .9rem;min-height:46px;
  border:1px solid var(--line);border-radius:8px;background:var(--white);color:var(--ink);
}
.ct2-form textarea{min-height:112px;resize:vertical;line-height:1.6}
.ct2-form input:focus,.ct2-form textarea:focus{outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px rgba(29,92,66,.12)}
.ct2-form .btn{justify-self:start;margin-top:.2rem}
.ct2-fine{margin:0;font-size:.82rem;line-height:1.55;color:var(--ink-soft)}

.ct-nap{background:var(--paper-deep);border-radius:var(--radius);padding:1.4rem 1.5rem;position:sticky;top:110px}
.ct-nap h2{margin:0 0 1rem;font-size:1.1rem}
.ct-nap ul{list-style:none;padding:0;margin:0;display:grid;gap:0}
.ct-nap li{display:grid;gap:.1rem;padding:.7rem 0;border-bottom:1px solid rgba(21,23,19,.09)}
.ct-nap li:last-child{border-bottom:0}
.ct-nap li > span{font-size:.7rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft)}
.ct-nap li a,.ct-nap li em{font-style:normal;font-size:.96rem;font-weight:600;color:var(--ink);
  text-decoration:none;line-height:1.5}
.ct-nap li a:hover{color:var(--green)}
.ct-nap li em{font-weight:400;color:var(--ink-soft);font-size:.88rem}
.ct-score{display:flex;align-items:center;gap:.45rem;margin-top:1.1rem;padding-top:1rem;
  border-top:1px solid rgba(21,23,19,.09)}
.ct-score b{font-family:var(--font-display);font-weight:400;font-size:1.4rem;line-height:1;color:var(--ink)}
.ct-stars{color:var(--gold);font-size:.82rem;letter-spacing:.06em}
.ct-score em{font-style:normal;font-size:.82rem;color:var(--ink-soft)}

.ct-map{line-height:0}
.ct-map iframe{width:100%;height:clamp(260px,32vw,380px);border:0;display:block;filter:grayscale(.25)}

@media(max-width:900px){
  .ct-grid{grid-template-columns:1fr;gap:1.6rem}
  .ct-nap{position:static}
  .ct2-form{max-width:none}
  .ct2-form .btn{width:100%;justify-content:center}
}
@media(max-width:520px){
  .ct2-row{grid-template-columns:1fr}
}

/* Slidernavigatie rechtsonder de kaarten in plaats van bij de kop */
.wm-head,.reels-head{grid-template-columns:1fr 1fr;align-items:end}



@media(max-width:1000px){
  .wm-grid + .wm-nav,.reels + .reels-nav{display:none}
}

/* Projectenslider: navigatie rechtsonder, in lijn met de andere sliders */
.work-foot{justify-content:space-between}
.work-nav{display:flex;gap:.5rem;order:2;margin-left:auto}
.work-foot > .btn{order:1}
.work-foot > span{order:3;flex-basis:100%}
@media(max-width:1000px){.work-nav{display:none}}


/* ============================================================
   Slidernavigatie: één definitie voor alle sliders
   ============================================================ */
.wm-nav,.reels-nav,.work-nav,.rv-nav-wrap{
  display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem;
  position:static;grid-column:auto;
}
.wm-head .wm-nav,.reels-head .reels-nav{display:none}
.wn-btn,.rn-btn,.rv-nav{
  width:42px;height:42px;flex:0 0 auto;border-radius:50%;
  border:1px solid var(--line);background:var(--white);color:var(--ink);
  font-size:1.3rem;line-height:1;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .18s,color .18s,opacity .18s;
  position:static;transform:none;box-shadow:none;
}
.wn-btn:hover:not(:disabled),.rn-btn:hover:not(:disabled),.rv-nav:hover:not(:disabled){
  border-color:var(--bronze);color:var(--green)
}
.wn-btn:disabled,.rn-btn:disabled,.rv-nav:disabled{opacity:.32;cursor:default}
@media(max-width:1000px){
  .wm-nav,.reels-nav,.work-nav,.rv-nav-wrap{display:none}
}


/* ============================================================
   Steenlooks: platenstrip onder de proof-strip
   ============================================================ */
.sl-head{display:grid;grid-template-columns:1fr 1fr;gap:.8rem var(--split-gap);
  align-items:end;margin-bottom:1.2rem}
.sl-head h2{margin:.35rem 0 0}
.sl-head .lede{margin:0}
.sl-strip{
  display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 4 * .8rem) / 5);
  gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:.4rem;scrollbar-width:none;
}
.sl-strip::-webkit-scrollbar{display:none}
.sl-it{
  position:relative;display:block;scroll-snap-align:start;aspect-ratio:1/1;
  overflow:hidden;border-radius:var(--radius-img,6px);background:var(--paper-deep);
  text-decoration:none;box-shadow:inset 0 0 0 1px rgba(21,23,19,.08);
}
.sl-it img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.sl-it:hover img{transform:scale(1.06)}
.sl-it:hover{box-shadow:inset 0 0 0 1px rgba(167,123,75,.55)}
.sl-nm{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.5rem .7rem .55rem;
  font-size:.82rem;font-weight:700;color:#fff;
  background:linear-gradient(to top,rgba(10,17,13,.88),transparent);
}
.sl-pop{
  position:absolute;left:.5rem;top:.5rem;z-index:3;
  font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--green-dark);background:var(--gold);padding:.2rem .5rem;border-radius:2px;
}
.sl-nav{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem}
@media(max-width:1000px){
  .sl-head{grid-template-columns:1fr;align-items:start}
  .sl-strip{grid-auto-columns:calc((100% - 1.6rem) / 3.4)}
  .sl-nav{display:none}
}
@media(max-width:560px){
  .sl-strip{grid-auto-columns:calc((100% - .8rem) / 2.3)}
}


/* ============================================================
   Google Ads-landingspagina (ads-showroom.html)
   ============================================================ */
.lp{padding-bottom:0}
.lp-bar{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100}
.lp-bar-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-top:.8rem;padding-bottom:.8rem}
.lp-logo{height:34px;width:auto;display:block}
.lp-tel{display:inline-flex;align-items:center;gap:.45rem;font-size:.95rem;font-weight:700;
  color:var(--ink);text-decoration:none}
.lp-tel:hover{color:var(--green)}
.lp-tel svg{color:var(--green)}

.lp-hero{position:relative;overflow:hidden;min-height:clamp(440px,46vw,580px);display:flex;align-items:center}
.lp-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.lp-hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(10,17,13,.94) 0%,rgba(10,17,13,.82) 42%,rgba(10,17,13,.34) 72%,rgba(10,17,13,.12) 100%)}
.lp-hero-in{position:relative;z-index:2;padding-top:clamp(2rem,4vw,3.4rem);padding-bottom:clamp(2rem,4vw,3.4rem)}
.lp-hero-tx{max-width:44rem}
.lp-hero h1{font-family:var(--font-display);font-weight:400;color:#fff;
  font-size:clamp(2rem,3.8vw,3.2rem);line-height:1.08;margin:.5rem 0 .9rem;max-width:19ch}
.lp-sub{margin:0 0 1.4rem;font-size:clamp(.96rem,1.1vw,1.06rem);line-height:1.7;
  color:rgba(255,255,255,.86);max-width:50ch}
.lp-proof{display:flex;align-items:center;gap:.5rem;margin-top:1.3rem;color:rgba(255,255,255,.8)}
.lp-proof b{font-family:var(--font-display);font-weight:400;font-size:1.4rem;color:#fff;line-height:1}
.lp-stars{color:var(--gold);font-size:.86rem;letter-spacing:.06em}
.lp-proof em{font-style:normal;font-size:.86rem}

.lp-sec{padding-top:clamp(2.4rem,5vw,4rem);padding-bottom:clamp(2.4rem,5vw,4rem)}
.lp-narrow{max-width:62ch}
.lp-narrow h2{margin:.4rem 0 .8rem}
.lp-narrow p{margin:0 0 1rem;line-height:1.75;color:var(--ink-soft)}

.lp-baten{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.lp-baten figure{margin:0 0 .9rem;overflow:hidden;border-radius:var(--radius-img,6px);aspect-ratio:4/3;background:var(--white)}
.lp-baten img{width:100%;height:100%;object-fit:cover;display:block}
.lp-baten h3{margin:0 0 .4rem;font-size:1.08rem}
.lp-baten p{margin:0;font-size:.93rem;line-height:1.7;color:var(--ink-soft)}

.lp-stappen{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.lp-stappen article{padding-top:1rem;border-top:2px solid var(--line)}
.lp-stappen i{font-style:normal;font-family:var(--font-display);font-size:1.05rem;color:var(--bronze)}
.lp-stappen h3{margin:.3rem 0 .4rem;font-size:1.08rem}
.lp-stappen p{margin:0;font-size:.93rem;line-height:1.7;color:var(--ink-soft)}

.lp-rev{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.lp-rev blockquote{margin:0;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.2rem 1.3rem}
.lp-rev p{margin:0 0 .7rem;font-size:.94rem;line-height:1.7;color:var(--ink)}
.lp-rev cite{font-style:normal;font-size:.86rem;font-weight:700;color:var(--ink-soft)}

.lp-bezwaar{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem 2rem;margin-top:.6rem}
.lp-bezwaar b{display:block;margin-bottom:.3rem;font-size:.98rem}
.lp-bezwaar p{margin:0;font-size:.92rem;line-height:1.7;color:var(--ink-soft)}

.lp-form-sec{background:linear-gradient(135deg,rgba(29,92,66,.18),transparent 42%),#151713}
.lp-form-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(1.8rem,3.4vw,3.4rem);align-items:start}
.lp-form-sec h2{color:#fff;margin:.4rem 0 .7rem}
.lp-form-sec .eyebrow{color:var(--gold);border-color:rgba(227,196,155,.4)}
.lp-form-sec .checklist li{color:rgba(255,255,255,.84)}
.lp-form-sec .checklist li::before{border-color:var(--gold)}
.lp-sig{display:flex;align-items:center;gap:.75rem;margin:1.4rem 0 0;padding-top:1.2rem;
  border-top:1px solid rgba(255,255,255,.2)}
.lp-sig img{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:50% 20%}
.lp-sig span{display:grid;font-size:.86rem;color:rgba(255,255,255,.72)}
.lp-sig b{color:#fff;font-size:.95rem}

.lp-form{display:grid;gap:.85rem;background:var(--paper);border-radius:var(--radius);
  padding:clamp(1.3rem,2.6vw,1.9rem)}
.lp-row{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.lp-form label{display:grid;gap:.3rem;font-size:.84rem;font-weight:700;color:var(--ink)}
.lp-form input,.lp-form select{font:inherit;font-size:.95rem;font-weight:400;
  padding:.7rem .9rem;height:46px;border:1px solid var(--line);border-radius:8px;
  background:var(--white);color:var(--ink)}
.lp-form select{appearance:none;-webkit-appearance:none;padding-right:2.1rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2362675f' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center}
.lp-form input:focus,.lp-form select:focus{outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px rgba(29,92,66,.12)}
.lp-form .btn{width:100%;justify-content:center;margin-top:.2rem}
.lp-fine{margin:0;font-size:.82rem;line-height:1.55;color:var(--ink-soft)}
.lp-ok{margin:0;padding:.8rem 1rem;background:rgba(29,92,66,.1);border-radius:8px;
  font-size:.9rem;font-weight:600;color:var(--green)}

.lp-endcta{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.4rem;
  margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.lp-endcta span{font-size:.92rem;color:var(--ink-soft)}
.lp-endcta a:not(.btn){color:var(--green);font-weight:700}

.lp-foot{background:var(--ink);color:rgba(255,255,255,.7);padding:1.6rem 0;text-align:center}
.lp-foot p{margin:0;font-size:.88rem;line-height:1.7}
.lp-foot b{color:#fff}
.lp-foot a{color:var(--gold);text-decoration:none}
.lp-open{font-size:.82rem;color:rgba(255,255,255,.5);margin-top:.3rem}

.lp-sticky{display:none}
@media(max-width:760px){
  .lp-sticky{display:grid;grid-template-columns:1.6fr 1fr;gap:1px;
    position:fixed;left:0;right:0;bottom:0;z-index:200;background:var(--line);
    border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0)}
  .lp-sticky a{display:flex;align-items:center;justify-content:center;min-height:54px;
    background:var(--white);color:var(--ink);text-decoration:none;font-size:.92rem;font-weight:700}
  .lp-sticky-main{background:var(--green);color:#fff !important}
  body.lp{padding-bottom:54px}
}
@media(max-width:1000px){
  .lp-baten,.lp-stappen,.lp-rev,.lp-form-grid{grid-template-columns:1fr;gap:1.4rem}
  .lp-bezwaar{grid-template-columns:1fr}
  .lp-hero{min-height:0}
  .lp-hero-in{padding-top:2.4rem;padding-bottom:2.4rem}
}
@media(max-width:520px){
  .lp-row{grid-template-columns:1fr}
}

/* Batenkaarten: staande beelden hoog uitsnijden, zoals elders op de site */
.lp-baten img{object-position:50% 20%}

/* Eén dominante batenkaart, twee secundair */
@media(min-width:1001px){
  .lp-baten-lead{grid-template-columns:1.5fr 1fr 1fr;align-items:start}
  .lp-baten-lead > article:first-child figure{aspect-ratio:3/4}
  .lp-baten-lead > article:first-child h3{font-size:1.3rem}
  .lp-baten-lead > article:first-child p{font-size:1rem}
  .lp-baten-lead > article:not(:first-child) figure{aspect-ratio:16/10}
  .lp-baten-lead > article:not(:first-child) h3{font-size:1rem}
}

/* Reviewkaarten zonder slider (ads-pagina) */
.rv-plain{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:900px){.rv-plain{grid-template-columns:1fr}}
/* Dominante batenkaart */
.kz-lead{border-color:var(--bronze)}

/* Ads-pagina: drie gelijke batenkaarten op één rij */
.lp .kz .kz-card{flex:1 1 calc(33.333% - 16px)}
@media(max-width:820px){.lp .kz .kz-card{flex:1 1 100%}}

/* Ads-pagina: vier gezichten op één rij */
.lp .team-grid > *{flex:1 1 calc(25% - 12px)}
@media(max-width:900px){.lp .team-grid > *{flex:1 1 calc(50% - 12px)}}
@media(max-width:560px){.lp .team-grid > *{flex:1 1 100%}}

/* Ads-pagina: vier gezichten op één rij, ook onder 1000px kolomregels */
.lp .team-grid{display:flex;flex-wrap:wrap;gap:1rem}
.lp .team-grid > article{flex:0 1 calc(25% - .75rem);min-width:0}
@media(max-width:900px){.lp .team-grid > article{flex:0 1 calc(50% - .5rem)}}
@media(max-width:560px){.lp .team-grid > article{flex:0 1 100%}}

/* Steenzeker: compacter, minder hoogte */
.szk{padding:clamp(2.6rem,5vw,4.4rem) 0}
.szk-pad{padding:clamp(1.4rem,2.6vw,2.2rem) !important}
.szk-lede{margin-bottom:1.1rem !important;font-size:.95rem}
.szk-rows article{padding:.62rem .95rem !important}
.szk-rows article span{font-size:.86rem;line-height:1.5}
.szk-rows article i{font-size:.86rem}
.szk-bonus{margin-top:1rem !important;padding-top:.95rem !important;gap:.35rem 1.2rem !important}
.szk-bonus span{font-size:.82rem}
.szk-cta{margin-top:1.1rem !important;gap:.6rem 1.2rem !important}
.szk-cta p{font-size:.82rem}
.szk-gift{padding:.9rem 1rem !important}
.szk-gift b{font-size:1rem !important}
.szk-gift p{font-size:.84rem !important}


/* Keuzehulpkaarten B3: breed beeld boven de tekst */
.kz-opts a{padding:0 !important;overflow:hidden;display:flow-root !important;height:auto}
.kz-opts .kz-pic{display:block;height:110px;overflow:hidden;border-radius:0;margin:0}
.kz-opts .kz-pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.kz-opts b{display:block;padding:1.1rem 1.2rem 0}
.kz-opts .kz-d{display:block;padding:.4rem 1.2rem 0}
.kz-opts em{display:block;padding:.6rem 1.2rem 1.2rem}

/* Keuzehulpkaart: beeld volledig tot de randen */
.kz-opts .kz-pic{width:100%;margin:0;border-radius:0;box-shadow:none}
.kz-opts .kz-pic img{width:100%;height:110px;object-fit:cover;border-radius:0}


/* ============================================================
   Pagehero donker: zelfde opbouw, lichte tekst
   ============================================================ */
.pagehero{
  background:linear-gradient(135deg,rgba(29,92,66,.18),transparent 42%),#151713;
  border-bottom:0;
}
.pagehero .crumbs{color:rgba(255,255,255,.6)}
.pagehero .crumbs a{color:rgba(255,255,255,.75)}
.pagehero .crumbs a:hover{color:var(--gold)}
.pagehero .cb-sep{color:rgba(227,196,155,.6)}
.pagehero .crumbs span:last-child{color:#fff}
.pagehero .eyebrow{color:var(--gold);border-color:rgba(227,196,155,.4)}
.pagehero h1{color:#fff}
.pagehero .lede{color:rgba(255,255,255,.82)}
.pagehero-facts{border-top-color:rgba(255,255,255,.2)}
.pagehero-facts dt{color:rgba(255,255,255,.6)}
.pagehero-facts dd{color:#fff}
.pagehero .btn-outline{border-color:rgba(255,255,255,.35);color:#fff}
.pagehero .btn-outline:hover{border-color:var(--gold);color:var(--gold)}
.pagehero .mp-also{border-left-color:var(--gold);color:rgba(255,255,255,.78)}
.pagehero .mp-also a{color:var(--gold)}
.pagehero .ph-txt{color:var(--gold)}

/* Kaartraster: altijd vier op een rij (flex, zie Elementor-pass) */
.cards{gap:1rem}
.cards > *{flex:1 1 calc((100% - 3 * 1rem) / 4)}
@media(max-width:1000px){.cards > *{flex:1 1 calc((100% - 1rem) / 2)}}
@media(max-width:600px){.cards > *{flex:1 1 100%}}


/* ============================================================
   Slot-CTA: tekst links, formulier op een kaart rechts
   ============================================================ */
#aanvraag{background:linear-gradient(135deg,rgba(29,92,66,.18),transparent 42%),#151713}
#aanvraag .of-wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,4vw,4rem);align-items:start}
#aanvraag .eyebrow{color:var(--gold);border-color:rgba(227,196,155,.4)}
#aanvraag h2{color:#fff;margin:.4rem 0 .7rem}
#aanvraag .lede{color:rgba(255,255,255,.82);margin:0;max-width:46ch}

#aanvraag .of-person{
  display:flex;align-items:center;gap:.85rem;
  margin:1.5rem 0;padding:1.3rem 0;
  border-top:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18);
}
#aanvraag .of-person img{width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:50% 20%;flex:0 0 auto}
#aanvraag .of-person p{margin:0;font-size:.92rem;line-height:1.55;color:rgba(255,255,255,.78)}
#aanvraag .of-person a{color:var(--gold);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(227,196,155,.5)}
#aanvraag .of-person a:hover{color:#fff;border-bottom-color:#fff}

#aanvraag .of-pts{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
#aanvraag .of-pts li{position:relative;padding-left:1.5rem;font-size:.92rem;line-height:1.6;color:rgba(255,255,255,.8)}
#aanvraag .of-pts li::before{content:"";position:absolute;left:0;top:.42em;width:.62rem;height:.34rem;
  border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}
#aanvraag .of-pts a{color:var(--gold);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(227,196,155,.5)}
#aanvraag .of-pts a:hover{color:#fff}

#aanvraag .of-card{background:var(--white);border-radius:var(--radius);padding:clamp(1.4rem,2.8vw,2.2rem)}
#aanvraag .of-form{display:grid;gap:1rem}
#aanvraag .of-two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
#aanvraag .of-form label{display:grid;gap:.42rem;font-size:.86rem;font-weight:700;color:var(--ink)}
#aanvraag .of-form input,#aanvraag .of-form select,#aanvraag .of-form textarea{
  font:inherit;font-size:.94rem;font-weight:400;color:var(--ink);
  padding:.72rem .9rem;min-height:48px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
  transition:border-color .18s,background .18s;
}
#aanvraag .of-form textarea{min-height:132px;resize:vertical;line-height:1.6}
#aanvraag .of-form select{
  appearance:none;-webkit-appearance:none;padding-right:2.2rem;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2362675f' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .95rem center;
}
#aanvraag .of-form input:focus,#aanvraag .of-form select:focus,#aanvraag .of-form textarea:focus{
  outline:none;border-color:var(--green);background:var(--white);
}
#aanvraag .of-form input::placeholder,#aanvraag .of-form textarea::placeholder{color:var(--ink-soft);opacity:.75}
#aanvraag .of-form .btn{justify-self:start;margin-top:.2rem}
#aanvraag .of-fine{margin:0;font-size:.84rem;line-height:1.6;color:var(--ink-soft)}
#aanvraag .of-fine a{color:var(--green);font-weight:700;text-decoration:none;border-bottom:1px solid var(--bronze)}
#aanvraag .of-fine a:hover{color:var(--bronze)}

@media(max-width:1000px){
  #aanvraag .of-wrap{grid-template-columns:1fr;gap:2rem}
}
@media(max-width:600px){
  #aanvraag .of-two{grid-template-columns:1fr}
  #aanvraag .of-form .btn{justify-self:stretch;width:100%;justify-content:center}
}


/* Werkwijze: lijst met beeld rechts */
.wf-split{display:grid;grid-template-columns:1fr .85fr;gap:clamp(1.6rem,3vw,3rem);align-items:center}
.wf-lijst{display:grid;gap:0}
.wf-lijst article{display:grid;grid-template-columns:auto 1fr;gap:.2rem .9rem;align-items:baseline;
  padding:.85rem 0;border-bottom:1px solid var(--line)}
.wf-lijst article:first-child{border-top:1px solid var(--line)}
.wf-n{font-family:var(--font-display);font-weight:400;font-size:.95rem;color:var(--bronze)}
.wf-lijst h3{margin:0;font-size:1.02rem;line-height:1.35}
.wf-lijst p{grid-column:2;margin:0;font-size:.88rem;line-height:1.6;color:var(--ink-soft)}
.wf-pic{margin:0;border-radius:var(--radius-img,6px);overflow:hidden;aspect-ratio:4/5}
.wf-pic img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:1000px){
  .wf-split{grid-template-columns:1fr;gap:1.6rem}
  .wf-pic{aspect-ratio:16/9}
}

/* CTA-band: donkere achtergrond gelijk aan de slot-CTA */
.cta-band{background:linear-gradient(135deg,rgba(29,92,66,.18),transparent 42%),#151713}
.cta-band .eyebrow{color:var(--gold);border-color:rgba(227,196,155,.4)}
.cta-band .btn-light{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff}
.cta-band .btn-light:hover{border-color:var(--gold);color:var(--gold);background:transparent}


/* ============================================================
   Projectgalerij: slider (eigen klassen, geen collisie met .prj-gal)
   ============================================================ */
.pjg{position:relative;display:block;overflow:hidden;border-radius:var(--radius-img,6px);background:var(--paper-deep)}
.pjg-track{display:flex;width:100%;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.pjg-s{flex:0 0 100%;margin:0;aspect-ratio:4/3;overflow:hidden}
.pjg-s img{width:100%;height:100%;object-fit:cover;display:block}
.pjg-btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.9);color:var(--ink);font-size:1.4rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(10,17,13,.2);transition:background .18s,transform .18s;
}
.pjg-btn:hover{background:#fff;transform:translateY(-50%) scale(1.05)}
.pjg-prev{left:.8rem}
.pjg-next{right:.8rem}
.pjg-dots{position:absolute;left:0;right:0;bottom:.9rem;z-index:3;display:flex;justify-content:center;gap:.4rem}
.pjg-dot{
  width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.5);transition:background .2s,transform .2s;
}
.pjg-dot.on{background:#fff;transform:scale(1.25)}
.pjg-dot:hover{background:rgba(255,255,255,.85)}
@media(max-width:700px){
  .pjg-btn{width:36px;height:36px;font-size:1.2rem}
  .pjg-prev{left:.5rem}
  .pjg-next{right:.5rem}
}

/* Werkwijze: langere labels (Dag 0, Week 2 tot 4) netjes laten vallen */
.wf-lijst article{grid-template-columns:minmax(3.4rem,auto) 1fr}
.wf-n{white-space:nowrap;font-size:.82rem;letter-spacing:.02em}
@media(max-width:560px){
  .wf-lijst article{grid-template-columns:1fr}
  .wf-lijst p{grid-column:1}
}

/* Modelpagina: inbegrepen in plaats van een lege prijsregel */
.pdp-inc{list-style:none;padding:0;margin:0 0 1.4rem;display:grid;gap:.5rem}
.pdp-inc li{position:relative;padding-left:1.5rem;font-size:.93rem;line-height:1.6;color:var(--ink-soft)}
.pdp-inc li::before{content:"";position:absolute;left:0;top:.44em;width:.62rem;height:.34rem;
  border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg)}
.pdp-inc li:first-child{color:var(--ink);font-weight:600}


/* ============================================================
   Mobiel menu: scroll-lock en paneel
   ============================================================ */
body.nav-open{overflow:hidden}
@media(max-width:1024px){
  /* backdrop-filter maakt de header een containing block voor fixed kinderen */
  .site-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--header-surface-solid,var(--paper))}
  .main-nav{
    position:fixed;left:0;right:0;top:var(--header-h,93px);bottom:0;z-index:180;
    display:block;overflow-y:auto;-webkit-overflow-scrolling:touch;
    background:var(--paper);padding:1.2rem clamp(20px,4vw,32px) 3rem;
    transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.7,.2,1);
    visibility:hidden;
    height:auto;max-height:none;min-height:0;
  }
  body.nav-open .main-nav{transform:none;visibility:visible}
  .nav-toggle{display:flex}
}
@media(min-width:1025px){
  .nav-toggle{display:none}
}

/* ============================================================
   Rasters die op tablet en mobiel moeten meebuigen
   ============================================================ */
@media(max-width:1024px){
  .szk-grid,.flow,.cfg-steps{grid-template-columns:repeat(2,1fr)}
  .zag-facts,.cf-grid,.cf-grid-4,.b2b-bar .container,.creed,.team-row,.mp-gallery,.prj-gal{
    grid-template-columns:repeat(2,1fr)
  }
  .pdp-thumbs{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:560px){
  .szk-grid,.flow,.cfg-steps,.zag-facts,.cf-grid,.cf-grid-4,
  .b2b-bar .container,.creed,.team-row,.mp-gallery,.prj-gal{grid-template-columns:1fr}
  .pdp-thumbs{grid-template-columns:repeat(2,1fr)}
}

/* Vergelijkingstabel: blokken per rij i.p.v. horizontaal scrollen */
@media(max-width:700px){
  .mat-compare table{min-width:0;display:block}
  .mat-compare thead{display:none}
  .mat-compare tbody,.mat-compare tfoot{display:block}
  .mat-compare tr{display:block;padding:.9rem 0;border-bottom:1px solid var(--line)}
  .mat-compare tr:last-child{border-bottom:0}
  .mat-compare th,.mat-compare td{display:block;padding:.2rem 0;border:0}
  .mat-compare tbody th{width:auto;font-size:.78rem;font-weight:800;letter-spacing:.1em;
    text-transform:uppercase;color:var(--bronze);margin-bottom:.3rem}
  .mat-compare td::before{content:attr(data-kop);display:block;font-size:.76rem;font-weight:700;
    color:var(--ink-soft);margin-bottom:.1rem}
}


/* ============================================================
   Navigatiegrens: één breekpunt op 1024px
   ============================================================ */
@media(max-width:1024px){
  .main-nav{display:block}
  .nav-toggle{display:flex}
}
@media(min-width:1025px){
  .main-nav{position:static;transform:none;visibility:visible;background:none;padding:0;overflow:visible}
  .nav-toggle{display:none}
  body.nav-open{overflow:auto}
  
}


/* ============================================================
   Kaartrasters op mobiel: carrousel met 1,5 kaart in beeld
   ============================================================ */
@media(max-width:640px){
  .kz-opts,.cards,.material-cards,.mat-routes,.creed,.team-grid{
    display:grid !important;grid-template-columns:none !important;
    grid-auto-flow:column;grid-auto-columns:68%;
    gap:.85rem;overflow-x:auto;scroll-snap-type:x proximity;
    padding-bottom:.5rem;margin-right:calc(-1 * var(--pad,20px));
    padding-right:var(--pad,20px);scrollbar-width:none;
  }
  .kz-opts::-webkit-scrollbar,.cards::-webkit-scrollbar,.material-cards::-webkit-scrollbar,
  .mat-routes::-webkit-scrollbar,.creed::-webkit-scrollbar,.team-grid::-webkit-scrollbar{display:none}
  .kz-opts > *,.cards > *,.material-cards > *,.mat-routes > *,.creed > *,.team-grid > *{
    scroll-snap-align:start;flex:none !important;min-width:0;
  }
}

/* Detailraster projectpagina's: op mobiel schuivend met 1,5 foto in beeld */
@media(max-width:640px){
  .prj-gal{
    display:grid !important;grid-template-columns:none !important;
    grid-auto-flow:column;grid-auto-columns:68%;
    gap:.7rem;overflow-x:auto;scroll-snap-type:x proximity;
    padding-bottom:.5rem;margin-right:calc(-1 * var(--pad,20px));
    padding-right:var(--pad,20px);scrollbar-width:none;
  }
  .prj-gal::-webkit-scrollbar{display:none}
  .prj-gal > figure{scroll-snap-align:start;flex:none !important;min-width:0;margin:0}
}

/* Andere projecten: op mobiel schuivend met 1,5 kaart in beeld */
@media(max-width:640px){
  .pj-grid{
    display:grid !important;grid-template-columns:none !important;
    grid-auto-flow:column;grid-auto-columns:68%;
    gap:.85rem;overflow-x:auto;scroll-snap-type:x proximity;
    padding-bottom:.5rem;margin-right:calc(-1 * var(--pad,20px));
    padding-right:var(--pad,20px);scrollbar-width:none;
  }
  .pj-grid::-webkit-scrollbar{display:none}
  .pj-grid > *{scroll-snap-align:start;flex:none !important;min-width:0}
}


/* ============================================================
   Mobiel menu: alleen tekstlinks, geen beeld
   ============================================================ */
@media(max-width:1024px){
  .main-nav .mp-th,.main-nav .mm-ph,.main-nav .kb-set img,
  .main-nav .zk-ph,.main-nav img{display:none !important}
  .main-nav .mm-tiles{display:none !important}
  .main-nav .mega-feature,.main-nav .mm-lv2 .mm-brands > span{display:none !important}

  .main-nav > a,.main-nav .mega-button{
    display:block;width:100%;text-align:left;
    padding:.95rem 0;border-bottom:1px solid var(--line);
    font-size:1.02rem;font-weight:700;
  }
  .main-nav .mega{border-bottom:1px solid var(--line)}
  .main-nav .mega-button{border-bottom:0}
  .main-nav .mega-panel{
    position:static;transform:none;box-shadow:none;border:0;background:none;
    width:auto;padding:0 0 .8rem;margin:0;opacity:1;visibility:visible;pointer-events:auto;
    display:none;
  }
  .main-nav .mega.open .mega-panel{display:block}
  .main-nav .mega-groups,.main-nav .mm-lv1,.main-nav .mm-lv2,
  .main-nav .kb-lv1,.main-nav .kb-lv2,.main-nav .mega-panel--zk{
    display:block;grid-template-columns:none;border:0;background:none;padding:0;
  }
  .main-nav .mega-group h4,.main-nav .mm-lv2 h3{
    margin:.8rem 0 .3rem;font-size:.7rem;font-weight:800;letter-spacing:.14em;
    text-transform:uppercase;color:var(--bronze);
  }
  .main-nav .mega-group a,.main-nav .mm-lv1 a,.main-nav .zk-r,
  .main-nav .kb-lv1 a,.main-nav .mm-brands a,.main-nav .mm-all{
    display:block;padding:.6rem 0 .6rem .9rem;border:0;border-radius:0;background:none;
    font-size:.95rem;font-weight:600;min-height:44px;
  }
  .main-nav .mega-group a small,.main-nav .mm-lv1 a small,
  .main-nav .kb-lv1 a small,.main-nav .zk-tx small{
    display:block;font-size:.82rem;font-weight:400;color:var(--ink-soft);margin-top:.1rem;
  }
  .main-nav .zk-r{grid-template-columns:1fr}
  .main-nav .mm-lv1 a::after,.main-nav .kb-lv1 a::after{display:none}
  .main-nav .header-cta{
    display:flex;justify-content:center;margin-top:1.2rem;width:100%;
  }
}


/* ============================================================
   Mobiel menu: geen losse sluier, paneel zelf dekkend en klikbaar
   ============================================================ */
@media(max-width:1024px){
  .site-header{z-index:300}
  .main-nav{
    z-index:2;background:var(--paper);
    box-shadow:0 18px 44px rgba(10,17,13,.22);
    pointer-events:auto;
  }
  body.nav-open .main-nav{pointer-events:auto}
  .main-nav a,.main-nav button{position:relative;z-index:3;pointer-events:auto}
}
@media(min-width:1025px){
  body.nav-open::after{content:none}
}


/* Keukenbladen-menu op mobiel: tekstlinks blijven, alleen het beeld gaat weg */
@media(max-width:1024px){
  .main-nav .kb-set:not([hidden]){display:block !important}
  .main-nav .kb-set a{
    display:block;aspect-ratio:auto;height:auto;min-height:44px;
    background:none;box-shadow:none;border-radius:0;overflow:visible;
    padding:.6rem 0 .6rem .9rem;
  }
  .main-nav .kb-set a img{display:none !important}
  .main-nav .kb-ttl{
    position:static;padding:0;background:none;
    font-size:.95rem;font-weight:600;color:var(--ink);
  }
  .main-nav .kb-set a:hover .kb-ttl{color:var(--green)}
}

/* Containerpadding als token, zodat carrousels tot de schermrand lopen */
:root{--pad:clamp(1rem,4vw,1.5rem)}

/* Keukenbladen-menu: zones zijn knoppen, geen dubbele bestemmingen */
.kb-lv1 button{
  display:grid;gap:.1rem;padding:.62rem .75rem;border:0;border-radius:4px;
  background:none;font:inherit;text-align:left;cursor:pointer;position:relative;width:100%;
  transition:background .16s;
}
.kb-lv1 button b{font-size:.94rem;font-weight:700;color:var(--ink);line-height:1.3}
.kb-lv1 button small{font-size:.77rem;color:var(--ink-soft);line-height:1.35}
.kb-lv1 button:hover{background:rgba(255,255,255,.7)}
.kb-lv1 button.on{background:#fff;box-shadow:0 1px 0 rgba(21,23,19,.06)}
.kb-lv1 button.on b{color:var(--green)}
.kb-lv1 button::after{
  content:"";position:absolute;right:.7rem;top:50%;width:.42rem;height:.42rem;
  border-right:1.5px solid var(--bronze);border-bottom:1.5px solid var(--bronze);
  transform:translateY(-50%) rotate(-45deg);opacity:0;transition:opacity .16s;
}
.kb-lv1 button.on::after,.kb-lv1 button:hover::after{opacity:1}
@media(max-width:1024px){
  .kb-lv1 button{padding:.6rem .6rem;min-height:44px}
  .kb-lv1 button::after{display:none}
}

/* Keukenbladen-menu op mobiel: echte accordeon, één zone open */
@media(max-width:1024px){
  .kb-set[hidden]{display:none}
  .kb-lv1 button::after{
    display:block;content:"";position:absolute;right:.5rem;top:50%;
    width:.5rem;height:.5rem;opacity:1;
    border-right:1.6px solid var(--bronze);border-bottom:1.6px solid var(--bronze);
    transform:translateY(-70%) rotate(45deg);transition:transform .2s;
  }
  .kb-lv1 button.on::after{transform:translateY(-30%) rotate(225deg)}
  .kb-lv2{padding-top:.2rem}
}


/* ============================================================
   Hero op mobiel: zelfde taal als desktop, plaat vol met scrim
   ============================================================ */
@media(max-width:640px){
  .hero{
    display:flex;flex-direction:column;justify-content:flex-end;
    grid-template-columns:none;min-height:88svh;background:var(--ink);
  }
  .hero .hero-bg,.hero .hero-bgs{position:absolute;inset:0;z-index:0;height:auto;aspect-ratio:auto}
  .hero-bg img,.hero-bgs img{width:100%;height:100%;object-fit:cover;object-position:58% 42%}

  .hero > .container{position:relative;z-index:3}
  .hero-glass{max-width:none}
  .hero-glass h1{max-width:18ch;text-shadow:0 2px 22px rgba(10,17,13,.5)}
  .hero-glass .lede{text-shadow:0 1px 16px rgba(10,17,13,.5)}
  .hero-glass .hero-actions .btn{width:100%;justify-content:center}
  .hero-glass .hero-advisor{
    margin-top:1.1rem;padding-top:.95rem;
    border-top:1px solid rgba(255,255,255,.22);
  }
  .hero .steps4{display:flex;flex-wrap:wrap;gap:.4rem .9rem}
}




/* ============================================================
   HERO — één definitie, mobile first
   Structuur: <section.hero> > .hero-bg (foto) + .container > .hero-glass
   ============================================================ */
.hero{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:88svh;
  overflow:hidden;
  background:var(--ink);
  padding:0;
}

/* 1. beeldlaag */
.hero > .hero-bg,
.hero > .hero-bgs{
  position:absolute;
  inset:0;
  z-index:0;
  margin:0;
  height:auto;
  aspect-ratio:auto;
}
.hero > .hero-bg img,
.hero > .hero-bgs img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:64% 46%;
  display:block;
  filter:brightness(.66) saturate(.95);
}

/* 2. scrim: één laag, van onder naar boven */
.hero::before{content:none}


/* 3. tekstlaag */
.hero > .container{
  position:relative;
  z-index:2;
  background:none;
  padding-top:clamp(4.5rem,20vh,7rem);
  padding-bottom:clamp(2rem,6vh,3rem);
}
.hero-glass{
  max-width:none;
  background:none;
  padding:0;
  color:#fff;
}
.hero-glass .eyebrow{color:var(--gold);border-color:rgba(227,196,155,.42)}
.hero-glass h1{
  font-family:var(--font-display);
  font-weight:400;
  color:#fff;
  font-size:clamp(1.95rem,7.4vw,3.1rem);
  line-height:1.1;
  letter-spacing:-.01em;
  margin:.5rem 0 .8rem;
  max-width:18ch;
  text-shadow:0 2px 24px rgba(9,16,12,.5);
}
.hero-glass .lede{
  margin:0 0 1.3rem;
  font-size:clamp(.95rem,1.1vw,1.05rem);
  line-height:1.7;
  color:rgba(255,255,255,.88);
  max-width:46ch;
  text-shadow:0 1px 16px rgba(9,16,12,.5);
}

/* 4. stappenrij */
.hero-steps{
  list-style:none;padding:0;
  margin:0 0 1.3rem;
  display:flex;flex-wrap:wrap;gap:.55rem 1.1rem;
}
.hero-steps li{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.85rem;font-weight:600;color:rgba(255,255,255,.88);
}
.hero-steps i{
  display:inline-flex;align-items:center;justify-content:center;
  font-style:normal;width:1.35rem;height:1.35rem;border-radius:50%;
  background:rgba(227,196,155,.18);border:1px solid rgba(227,196,155,.5);
  color:var(--gold);font-size:.7rem;font-weight:800;flex:0 0 auto;
}

/* 5. knoppen */
.hero-glass .hero-actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;
}
.hero-glass .hero-actions .btn{width:100%;justify-content:center}

/* 6. adviseursregel */
.hero-glass .hero-advisor{
  display:flex;align-items:center;gap:.75rem;
  margin-top:1.2rem;padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.22);
  max-width:44ch;
}
.hero-glass .hero-advisor img{
  width:42px;height:42px;border-radius:50%;flex:0 0 auto;
  object-fit:cover;object-position:50% 20%;
  border:1px solid rgba(255,255,255,.28);
}
.hero-glass .hero-advisor p{
  margin:0;font-size:.86rem;line-height:1.5;color:rgba(255,255,255,.78);
}
.hero-glass .hero-advisor a{color:var(--gold);font-weight:700;text-decoration:none}
.hero-glass .hero-advisor a:hover{color:#fff}
.hero-micro{margin:.9rem 0 0;font-size:.84rem;line-height:1.5;color:rgba(255,255,255,.74)}

/* ---------- tablet ---------- */
@media(min-width:641px){
  .hero{min-height:min(76vh,620px)}
  .hero > .container{padding-top:clamp(5rem,14vh,7rem)}
  .hero-glass{max-width:40rem}
  .hero-glass .hero-actions .btn{width:auto}
  .hero > .hero-bg img,.hero > .hero-bgs img{filter:brightness(.74) saturate(.96)}
  .hero::after{
    background:linear-gradient(to top,
      rgba(9,16,12,.9) 0%,
      rgba(9,16,12,.74) 38%,
      rgba(9,16,12,.5) 66%,
      rgba(9,16,12,.32) 100%);
  }
}

/* ---------- desktop ---------- */
@media(min-width:1025px){
  .hero{justify-content:center;min-height:min(84vh,720px)}
  .hero > .container{padding-top:0;padding-bottom:0}
  .hero-glass{max-width:44rem}
  .hero-glass h1{max-width:20ch;font-size:clamp(2.3rem,3.6vw,3.2rem)}
  .hero > .hero-bg img,.hero > .hero-bgs img{filter:brightness(.82) saturate(.98)}
  .hero::after{
    background:linear-gradient(100deg,
      rgba(9,16,12,.94) 0%,
      rgba(9,16,12,.84) 36%,
      rgba(9,16,12,.5) 60%,
      rgba(9,16,12,.18) 82%,
      rgba(9,16,12,.06) 100%);
  }
}

/* Hero: secundaire knop leesbaar op de plaat */
.hero-glass .hero-actions .btn-guide{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  width:100%;padding:.85rem 1.4rem;border-radius:var(--radius);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.42);
  color:#fff;font-weight:700;font-size:.95rem;text-decoration:none;
  backdrop-filter:blur(6px);transition:background .2s,border-color .2s,color .2s;
}
.hero-glass .hero-actions .btn-guide svg{color:var(--gold);flex:0 0 auto}
.hero-glass .hero-actions .btn-guide:hover{
  background:rgba(255,255,255,.94);border-color:#fff;color:var(--ink);
}
.hero-glass .hero-actions .btn-guide:hover svg{color:var(--green)}
@media(min-width:641px){
  .hero-glass .hero-actions .btn-guide{width:auto}
}

/* Hero-scrim: dieper contrast, tekst altijd leesbaar */
.hero > .hero-bg img,.hero > .hero-bgs img{filter:brightness(.56) saturate(.92)}
.hero::after{
  background:
    linear-gradient(to top,
      rgba(7,13,10,.94) 0%,
      rgba(7,13,10,.88) 30%,
      rgba(7,13,10,.78) 56%,
      rgba(7,13,10,.7) 80%,
      rgba(7,13,10,.64) 100%);
}
@media(min-width:641px){
  .hero > .hero-bg img,.hero > .hero-bgs img{filter:brightness(.6) saturate(.94)}
  .hero::after{
    background:
      linear-gradient(105deg,
        rgba(7,13,10,.95) 0%,
        rgba(7,13,10,.88) 34%,
        rgba(7,13,10,.66) 58%,
        rgba(7,13,10,.44) 78%,
        rgba(7,13,10,.34) 100%),
      linear-gradient(to top,
        rgba(7,13,10,.55) 0%,
        rgba(7,13,10,.2) 45%,
        transparent 75%);
  }
}
@media(min-width:1025px){
  .hero > .hero-bg img,.hero > .hero-bgs img{filter:brightness(.66) saturate(.96)}
  .hero::after{
    background:
      linear-gradient(100deg,
        rgba(7,13,10,.96) 0%,
        rgba(7,13,10,.9) 32%,
        rgba(7,13,10,.68) 54%,
        rgba(7,13,10,.34) 76%,
        rgba(7,13,10,.16) 100%),
      linear-gradient(to top,
        rgba(7,13,10,.4) 0%,
        transparent 55%);
  }
}

/* Hero-scrim nog dieper: maximale leesbaarheid */
.hero > .hero-bg img,.hero > .hero-bgs img{filter:brightness(.44) saturate(.9)}
.hero::after{
  background:linear-gradient(to top,
    rgba(5,10,8,.97) 0%,rgba(5,10,8,.93) 32%,rgba(5,10,8,.86) 60%,rgba(5,10,8,.8) 100%);
}
@media(min-width:641px){
  .hero > .hero-bg img,.hero > .hero-bgs img{filter:brightness(.5) saturate(.92)}
  .hero::after{
    background:
      linear-gradient(105deg,rgba(5,10,8,.97) 0%,rgba(5,10,8,.93) 36%,rgba(5,10,8,.76) 60%,rgba(5,10,8,.54) 80%,rgba(5,10,8,.42) 100%),
      linear-gradient(to top,rgba(5,10,8,.6) 0%,rgba(5,10,8,.24) 45%,transparent 75%);
  }
}
@media(min-width:1025px){
  .hero > .hero-bg img,.hero > .hero-bgs img{filter:brightness(.56) saturate(.94)}
  .hero::after{
    background:
      linear-gradient(100deg,rgba(5,10,8,.97) 0%,rgba(5,10,8,.94) 34%,rgba(5,10,8,.78) 56%,rgba(5,10,8,.46) 76%,rgba(5,10,8,.24) 100%),
      linear-gradient(to top,rgba(5,10,8,.46) 0%,transparent 55%);
  }
}

/* Hero-scrim maximaal: tekst voorop, plaat als achtergrond */
.hero > .hero-bg img,.hero > .hero-bgs img{filter:brightness(.34) saturate(.86)}
.hero::after{background:rgba(5,10,8,.7)}
@media(min-width:641px){
  .hero > .hero-bg img,.hero > .hero-bgs img{filter:brightness(.4) saturate(.88)}
  .hero::after{
    background:
      linear-gradient(105deg,rgba(5,10,8,.98) 0%,rgba(5,10,8,.96) 38%,rgba(5,10,8,.86) 62%,rgba(5,10,8,.68) 82%,rgba(5,10,8,.56) 100%),
      linear-gradient(to top,rgba(5,10,8,.7) 0%,rgba(5,10,8,.34) 45%,rgba(5,10,8,.12) 75%);
  }
}
@media(min-width:1025px){
  .hero > .hero-bg img,.hero > .hero-bgs img{filter:brightness(.46) saturate(.9)}
  .hero::after{
    background:
      linear-gradient(100deg,rgba(5,10,8,.98) 0%,rgba(5,10,8,.96) 36%,rgba(5,10,8,.86) 58%,rgba(5,10,8,.6) 78%,rgba(5,10,8,.36) 100%),
      linear-gradient(to top,rgba(5,10,8,.55) 0%,rgba(5,10,8,.16) 55%,transparent 80%);
  }
}

/* Steenzeker: zelfde donkere achtergrond als 'Even kennismaken' */
.szk{background:linear-gradient(135deg,rgba(29,92,66,.18),transparent 42%),#151713}
.szk-box{background:none;border-radius:0;padding:0}


/* ============================================================
   Werkwijze: kaarten met cijfer (i.p.v. lijst met foto)
   ============================================================ */
.wf-cards .row{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.wf-cards article{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.1rem 1.1rem 1.2rem;display:grid;gap:.4rem;align-content:start}
.wf-cards .num{font-family:var(--font-display);font-size:1.5rem;color:var(--bronze);line-height:1}
.wf-cards .lbl{font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--green)}
.wf-cards h4{margin:0;font-size:1.02rem;line-height:1.3}
.wf-cards p.tx{margin:0;font-size:.88rem;line-height:1.6;color:var(--ink-soft)}
@media(max-width:1000px){.wf-cards .row{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.wf-cards .row{grid-template-columns:1fr}}


/* Sluitregel: thumbnails op mobiel op één rij, klein */
@media(max-width:700px){
  .pdp-thumbs{grid-template-columns:repeat(6,1fr) !important;gap:.3rem !important}
  .pdp-thumbs figure{aspect-ratio:1/1 !important}
  .pdp-thumbs figure:nth-child(6){display:block !important}
}

/* Related-links regel onderaan modellen/materialen: subtieler, geen groen */
.pc-fine{font-size:.82rem;color:var(--ink-soft);opacity:.85}
.pc-fine .inline-link{color:var(--ink-soft);font-weight:600;text-decoration:underline;
  text-decoration-color:rgba(98,103,95,.35);text-underline-offset:2px}
.pc-fine .inline-link:hover{color:var(--ink)}

/* Tab-titels: consistente, duidelijk dikkere weergave */
.pdp-panel h3{font-family:var(--font);font-weight:800;color:var(--ink)}

/* Materiaalgids-sectie: witte achtergrond */
#brochure{background:var(--white)}


/* ============================================================
   Meer rust: ruimere witruimte site-breed
   ============================================================ */
:root{
  --section-pad:clamp(4.5rem,8vw,8rem);
  --split-gap:clamp(2.6rem,5vw,5rem);
}
.section{padding:clamp(5rem,8vw,8.5rem) 0}
.section.tight{padding:clamp(3rem,5vw,4.5rem) 0}
.section-head{margin-bottom:clamp(2.8rem,4.5vw,4.4rem)}
.section-head .lede{margin-top:1rem}

/* kaart- en itemrasters ruimer */
.cards,.wm-grid,.reels,.team-grid,.kz-opts,.mat-routes,.material-cards,
.craft,.four,.creed,.pj-grid,.mdl-grid{gap:clamp(1.4rem,2.4vw,2.2rem)}
.cards > *,.team-grid > *{--gapcalc:clamp(1.4rem,2.4vw,2.2rem)}

/* binnen kaarten iets meer lucht */
.card,.kz-opts a,.szk-rows article,.wf-lijst article{line-height:1.65}
.card{padding:clamp(1.3rem,2.2vw,1.8rem)}

/* lijsten en checklists */
.checklist{gap:.8rem}
.wf-lijst article{padding:1.15rem 0}
.faq-block .faq details summary{padding-top:1.25rem;padding-bottom:1.25rem}
.faq-block .faq details p{margin-bottom:1.45rem}

/* koppen ademen */
h2{margin-bottom:1rem}
h3{margin-bottom:.6rem}
.lede{line-height:1.8}

/* strips en banden */
.proof-strip .container{padding-top:1.25rem;padding-bottom:1.25rem}
.szk-strip .container{padding-top:1.6rem;padding-bottom:1.6rem}
.brandbar{padding-top:0;margin-top:.5rem}

/* hero-inhoud iets ruimer */
.hero .container{padding-top:clamp(2.5rem,5vw,4rem);padding-bottom:clamp(2.5rem,5vw,4rem)}
.hero .acts,.hero .hero-actions{margin-top:1.6rem}

/* mobiel: rust zonder eindeloos scrollen */
@media(max-width:760px){
  .section{padding:clamp(3.2rem,9vw,4.5rem) 0}
  .section.tight{padding:2.4rem 0}
  .section-head{margin-bottom:2.2rem}
}

/* Hero-lede: nooit afkappen, op geen enkele breedte */
.hero-glass .lede,.hero .lede{
  -webkit-line-clamp:none !important;line-clamp:none !important;
  display:block !important;overflow:visible !important;
}

/* Waar we in geloven: vier kaarten dichter bij elkaar */
.creed{gap:.55rem}
.creed article{flex:1 1 calc((100% - 3 * .55rem) / 4);padding:1.2rem 1.15rem}
@media(max-width:1000px){.creed article{flex:1 1 calc((100% - .55rem) / 2)}}
@media(max-width:560px){.creed article{flex:1 1 100%}}

/* Team: altijd vier personen naast elkaar */
.team-grid{display:flex;flex-wrap:wrap;gap:1rem}
.team-grid > article{flex:1 1 calc((100% - 3 * 1rem) / 4);min-width:0}
@media(max-width:900px){.team-grid > article{flex:1 1 calc((100% - 1rem) / 2)}}
@media(max-width:560px){.team-grid > article{flex:1 1 100%}}

/* Slot-CTA: tekst en formulier gelijk verdeeld, gelijke ademruimte */
#aanvraag .of-wrap{grid-template-columns:1fr 1fr;align-items:stretch}
#aanvraag .of-tx{align-self:center}
#aanvraag .of-card{align-self:center;width:100%}
@media(max-width:1000px){#aanvraag .of-wrap{grid-template-columns:1fr}}

/* Hero-tekstkolom breder: twee derde van de container */
.hero-glass{max-width:min(66%,58rem)}
.hero-glass h1{max-width:26ch}
.hero-glass .lede{max-width:58ch}
@media(max-width:1000px){.hero-glass{max-width:none}}


/* ============================================================
   Hero-slider met verticale plaatrail rechts
   ============================================================ */
.hero-bgs{position:absolute;inset:0;z-index:0}
.hero-bgs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity 1.1s ease;filter:brightness(.44) saturate(.9)}
.hero-bgs img.on{opacity:1}

.hero-rail{position:absolute;right:clamp(1rem,2.5vw,2rem);top:50%;transform:translateY(-50%);
  z-index:4;display:grid;gap:.45rem}
.hero-rail button{width:52px;height:52px;padding:0;border:0;border-radius:4px;overflow:hidden;
  cursor:pointer;background:none;opacity:.45;filter:saturate(.85);
  transition:opacity .25s,filter .25s,box-shadow .25s}
.hero-rail button img{width:100%;height:100%;object-fit:cover;display:block}
.hero-rail button:hover{opacity:.8}
.hero-rail button.on{opacity:1;filter:none;box-shadow:0 0 0 1px var(--gold)}

@media(min-width:641px){
  .hero-bgs img{filter:brightness(.5) saturate(.92)}
}
@media(min-width:1025px){
  .hero-bgs img{filter:brightness(.56) saturate(.94)}
}
@media(max-width:760px){
  .hero-rail{right:.6rem;gap:.3rem}
  .hero-rail button{width:36px;height:36px}
}

/* Hero-rail nooit over de tekst: ruimte reserveren, op smal naar rechtsboven */
.hero-glass{padding-right:calc(52px + 2rem)}
@media(max-width:1000px){
  .hero-rail{right:.7rem;top:.7rem;bottom:auto;transform:none;grid-auto-flow:column;gap:.3rem}
  .hero-glass{padding-right:0}
}
@media(max-width:760px){
  .hero-rail button{width:34px;height:34px}
}

/* Materiaalgids-blok rustiger: minder lijnen, meer lucht */
.br-body{display:grid;gap:0}
.br-body h2{margin:.4rem 0 .7rem}
.br-body > p{margin:0 0 1.6rem;line-height:1.8;max-width:48ch}
.br-body dl{display:grid;gap:0;margin:0 0 1.8rem;border-top:1px solid var(--line)}
.br-body dl > div{display:grid;grid-template-columns:1fr auto;gap:.15rem 1rem;align-items:baseline;
  padding:.85rem 0;border-bottom:1px solid var(--line)}
.br-body dt{margin:0;font-size:.98rem;font-weight:700;color:var(--ink)}
.br-body dd{margin:0;font-size:.78rem;color:var(--ink-soft);opacity:.7;grid-row:1;grid-column:2;white-space:nowrap}
.br-body dl > div > span,.br-body dl .sub{grid-column:1;font-size:.86rem;line-height:1.55;color:var(--ink-soft)}
.br-body form{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 .9rem;max-width:32rem}
.br-body form input{flex:1 1 14rem;min-height:48px;padding:.7rem .95rem;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font:inherit;font-size:.94rem}
.br-body form input:focus{outline:none;border-color:var(--green);background:var(--white)}
.br-body form .btn{flex:0 0 auto}
.br-body > p:last-child{margin:0;font-size:.84rem;color:var(--ink-soft);opacity:.8}

/* Hero-rail alleen op desktop */
@media(max-width:760px){.hero-rail{display:none}}



.zk-set figure{margin:0;border-radius:var(--radius-img,6px);overflow:hidden;aspect-ratio:16/10}
.zk-set figure img{width:100%;height:100%;object-fit:cover;display:block}
.zk-go{justify-self:start;font-size:.9rem;font-weight:700;color:var(--green);text-decoration:none;
  border-bottom:1px solid var(--bronze);padding-bottom:.15rem}
.zk-go:hover{color:var(--bronze)}









/* Kaartraster: vier kolommen (flex, want de kinderen gebruiken flex-basis) */
.cards{display:flex;flex-wrap:wrap;gap:1rem}
.cards > *{flex:1 1 calc((100% - 3 * 1rem) / 4);min-width:0}
@media(max-width:1000px){.cards > *{flex:1 1 calc((100% - 1rem) / 2)}}
@media(max-width:600px){.cards > *{flex:1 1 100%}}


/* Header alles op één regel, geen wrap */
.site-header{flex-wrap:nowrap}
.header-inner{flex-wrap:nowrap}
.main-nav{flex-wrap:nowrap;white-space:nowrap}

.mega-panel--kb-flat{display:flex;gap:2.2rem;padding:1.6rem;width:640px}
.mega-panel--kb-flat .kb-col{flex:1 1 0;display:flex;flex-direction:column;gap:.15rem}
.mega-panel--kb-flat h4{margin:0 0 .6rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.mega-panel--kb-flat .kb-x{display:block;padding:.55rem 0;text-decoration:none}
.mega-panel--kb-flat .kb-x b{display:block;font-size:.95rem;color:var(--ink);font-weight:600}
.mega-panel--kb-flat .kb-x small{display:block;font-size:.8rem;color:var(--ink-soft);margin-top:.1rem}
.mega-panel--kb-flat .kb-x:hover b{color:var(--green)}

.site-header .header-inner{flex:1 1 auto;min-width:0}
.site-header .main-nav{flex:0 1 auto;min-width:0}
.site-header > a:not(.logo):not(.header-phone):not(.header-cta){flex:0 0 auto}


/* ============================================================
   HEADER — complete herbouw, laatste regel wint
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:200;
  background:var(--header-surface,rgba(246,241,232,.96));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.site-header .header-inner{
  max-width:1440px;margin:0 auto;
  padding:0 clamp(20px,4vw,44px);
  height:88px;
  display:flex;align-items:center;flex-wrap:nowrap;
  gap:clamp(1rem,2vw,2.2rem);
}
.site-header .logo{flex:0 0 auto;display:flex;align-items:center}
.site-header .logo img{height:48px;width:auto;display:block}

@media(min-width:1025px){
  .site-header .main-nav{
    display:flex !important;position:static !important;
    flex:1 1 auto;flex-wrap:nowrap;align-items:center;
    gap:clamp(1.1rem,1.8vw,1.8rem);
    background:none;box-shadow:none;padding:0;overflow:visible;
    height:auto;max-height:none;transform:none;visibility:visible;
  }
  .site-header .main-nav > a,
  .site-header .main-nav .mega > .mega-button{
    flex:0 0 auto;white-space:nowrap;font-weight:600;font-size:.95rem;color:var(--ink);
  }
  .site-header .header-phone{flex:0 0 auto;white-space:nowrap;margin-left:auto}
  .site-header .header-cta{flex:0 0 auto}
  .site-header .nav-toggle{display:none !important}
}

@media(max-width:1024px){
  .site-header .header-inner{height:76px}
  .site-header .main-nav{
    display:block !important;position:fixed !important;
    left:0;right:0;top:76px;bottom:0;
    background:var(--header-surface-solid,var(--paper));
    padding:1rem 20px 2rem;overflow-y:auto;
    transform:translateY(-8px);opacity:0;visibility:hidden;
    transition:opacity .2s,transform .2s,visibility .2s;
    z-index:190;
  }
  body.nav-open .main-nav{transform:translateY(0);opacity:1;visibility:visible}
  .site-header .header-phone .hp-num,.site-header .header-cta{display:none}
  .site-header .nav-toggle{display:flex !important;flex:0 0 auto;margin-left:auto}
}


/* ============================================================
   HEADER — rebuild per spec: logo / nav / phone+CTA, single row
   ============================================================ */
.site-header .header-inner{
  max-width:1440px;margin:0 auto;box-sizing:border-box;
  padding:0 40px;
  height:96px;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:nowrap;gap:20px;
}
.site-header .logo{flex:0 0 auto;display:flex;align-items:center}
.site-header .logo img{height:48px;width:auto;display:block}

@media(min-width:1025px){
  .site-header .main-nav{
    display:flex !important;position:static !important;
    flex:1;justify-content:center;align-items:center;
    gap:24px;white-space:nowrap;
    background:none;box-shadow:none;padding:0;overflow:visible;
    height:auto;max-height:none;transform:none;visibility:visible;inset:auto;
  }
  .site-header .main-nav > a,
  .site-header .main-nav .mega > .mega-button{
    flex:0 0 auto;font-weight:600;font-size:16px;color:var(--ink);white-space:nowrap;
  }
  .site-header .right-group{
    display:flex;align-items:center;gap:20px;flex:0 0 auto;white-space:nowrap;
  }
  .site-header .header-phone{display:flex;align-items:center;gap:.4rem;flex:0 0 auto;white-space:nowrap}
  .site-header .header-cta{flex:0 0 auto}
  .site-header .nav-toggle{display:none !important}
}
@media(max-width:1280px){
  .site-header .main-nav{gap:16px}
  .site-header .main-nav > a,.site-header .main-nav .mega > .mega-button{font-size:15px}
}

@media(max-width:1024px){
  .site-header .header-inner{height:76px}
  .site-header .main-nav{
    display:block !important;position:fixed !important;
    left:0;right:0;top:76px;bottom:0;
    background:var(--header-surface-solid,var(--paper));
    padding:1rem 20px 2rem;overflow-y:auto;
    transform:translateY(-8px);opacity:0;visibility:hidden;
    transition:opacity .2s,transform .2s,visibility .2s;z-index:190;
  }
  body.nav-open .main-nav{transform:translateY(0);opacity:1;visibility:visible}
  .site-header .right-group{display:flex;align-items:center;gap:12px}
  .site-header .header-phone .hp-num{display:none}
  .site-header .nav-toggle{display:flex !important;flex:0 0 auto}
}

.main-nav > a.mm-a{ } /* ensure specificity parity, no override needed — inherits .main-nav > a rules */


/* ============================================================
   HEADER MOBIEL NAV — definitieve sluitregel, wint alle conflicten
   ============================================================ */
@media(max-width:1024px){
  .site-header .main-nav{
    display:block !important;
    position:fixed !important;
    left:0 !important;right:0 !important;
    top:76px !important;
    bottom:auto !important;
    height:calc(100dvh - 76px) !important;
    max-height:calc(100dvh - 76px) !important;
    overflow-y:auto !important;
    background:var(--header-surface-solid,var(--paper)) !important;
    padding:1rem 20px 3rem !important;
    transform:translateY(-8px);opacity:0;visibility:hidden;
    transition:opacity .2s,transform .2s,visibility .2s;
    z-index:190 !important;
  }
  body.nav-open .main-nav{
    transform:translateY(0) !important;opacity:1 !important;visibility:visible !important;
  }
}

/* Materialen mega: lv1 als tabs (zoals Keukenbladen), secundaire links naar footer */
.mm-lv1 button{width:100%;text-align:left;background:none;border:0;cursor:pointer;font:inherit}
.mm-foot{display:flex;flex-wrap:wrap;gap:.4rem 1rem;padding:.9rem 1.1rem 0;margin-top:.6rem;
  border-top:1px solid var(--line)}
.mm-foot a{font-size:.82rem;color:var(--ink-soft);text-decoration:none;white-space:nowrap}
.mm-foot a:hover{color:var(--green)}


/* ============================================================
   HEADER — final authoritative rules (overrides all earlier ones)
   ============================================================ */
.site-header{position:sticky;top:0;z-index:200;background:var(--header-surface,rgba(246,241,232,.96));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.site-header .header-inner{
  max-width:1440px;margin:0 auto;box-sizing:border-box;
  padding:0 40px;height:96px;
  display:flex !important;align-items:center;justify-content:space-between;
  flex-wrap:nowrap !important;gap:20px;
}
.site-header .logo{flex:0 0 auto;display:flex;align-items:center}
.site-header .logo img{height:48px;width:auto;display:block}
.site-header .right-group{display:flex;align-items:center;gap:20px;flex:0 0 auto;white-space:nowrap}
.site-header .header-phone{display:flex;align-items:center;gap:.4rem;color:var(--ink);text-decoration:none;font-weight:600;font-size:.92rem}
.site-header .header-cta{flex:0 0 auto}

@media(min-width:1025px){
  .site-header .main-nav{
    display:flex !important;position:static !important;
    flex:1 1 auto;flex-wrap:nowrap !important;justify-content:center;align-items:center;
    gap:24px;white-space:nowrap;
    background:none;box-shadow:none;padding:0;overflow:visible;
    height:auto;max-height:none;transform:none;visibility:visible;inset:auto;
    margin-left:0;
  }
  .site-header .main-nav > a,
  .site-header .main-nav .mega > .mega-button{
    flex:0 0 auto;white-space:nowrap;font-weight:600;font-size:.95rem;color:var(--ink);background:none;border:0;
  }
  .site-header .nav-toggle{display:none !important}
}
@media(max-width:1439px) and (min-width:1280px){
  .site-header .main-nav{gap:24px}
}
@media(max-width:1279px) and (min-width:1025px){
  .site-header .main-nav{gap:16px}
  .site-header .main-nav > a,
  .site-header .main-nav .mega > .mega-button{font-size:.85rem}
}

@media(max-width:1024px){
  .site-header .header-inner{height:76px}
  .site-header .main-nav{
    display:block !important;position:fixed !important;
    left:0 !important;right:0 !important;top:76px !important;bottom:0 !important;
    height:calc(100dvh - 76px) !important;max-height:calc(100dvh - 76px) !important;
    overflow-y:auto !important;
    background:var(--header-surface-solid,var(--paper)) !important;
    padding:1rem 20px 3rem !important;
    transform:translateY(-8px);opacity:0;visibility:hidden;
    transition:opacity .2s,transform .2s,visibility .2s;
    z-index:190 !important;
  }
  body.nav-open .main-nav{transform:translateY(0) !important;opacity:1 !important;visibility:visible !important}
  .site-header .header-phone .hp-num{display:none}
  .site-header .nav-toggle{display:flex !important;flex:0 0 auto}
  .site-header .header-cta{display:inline-flex}
}


/* ============================================================
   FINAL FIX: prevent any .mega item from stretching to full row width
   ============================================================ */
@media(min-width:1025px){
  .site-header .main-nav > .mega{flex:0 0 auto !important;width:auto !important;position:relative !important;display:inline-flex !important}
  .site-header .main-nav > .mega > .mega-button{flex:0 0 auto !important;width:auto !important}
  .site-header .main-nav > a{flex:0 0 auto !important;width:auto !important}
}


/* ============================================================
   Hero 62b: verloop van onder, stappenrij en twijfelregel
   ============================================================ */
.hero-b{display:flex;align-items:flex-end;min-height:clamp(560px,46vw,660px)}
.hero-b::after{
  background:linear-gradient(to top,
    rgba(7,13,10,.95) 0%,rgba(7,13,10,.82) 38%,rgba(7,13,10,.42) 72%,rgba(7,13,10,.18) 100%) !important;
}
.hero-b .hero-glass{max-width:min(62ch,62%);padding-right:0}
.hero-b h1{max-width:22ch}

.hero-steps{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin:0 0 1.5rem}
.hero-steps span{display:inline-flex;align-items:center;gap:.5rem;
  font-size:.88rem;font-weight:600;color:rgba(255,255,255,.88);white-space:nowrap}
.hero-steps i{display:inline-flex;align-items:center;justify-content:center;font-style:normal;
  width:1.4rem;height:1.4rem;border-radius:50%;background:rgba(227,196,155,.16);
  border:1px solid rgba(227,196,155,.52);color:var(--gold);font-size:.7rem;font-weight:800}

.hero-link{display:inline-flex;align-items:center;gap:.4rem;color:#fff;font-weight:700;font-size:.94rem;
  text-decoration:none;padding-bottom:.22rem;border-bottom:1px solid rgba(227,196,155,.6)}
.hero-link:hover{color:var(--gold);border-bottom-color:var(--gold)}

.hero-doubt{display:flex;align-items:center;gap:.8rem;max-width:46ch;
  margin-top:1.5rem;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.22)}
.hero-doubt img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 20%;
  flex:0 0 auto;box-shadow:0 0 0 1px rgba(255,255,255,.26)}
.hero-doubt p{margin:0;font-size:.9rem;line-height:1.55;color:rgba(255,255,255,.8)}
.hero-doubt a{color:var(--gold);font-weight:700;text-decoration:none;
  border-bottom:1px solid rgba(227,196,155,.5)}
.hero-doubt a:hover{color:#fff;border-bottom-color:#fff}

@media(max-width:1000px){
  .hero-b .hero-glass{max-width:none}
}
@media(max-width:640px){
  .hero-steps{gap:.45rem 1.1rem}
  .hero-steps span{font-size:.82rem}
  .hero-doubt{max-width:none}
}

/* Hero 62b: dieper verloop voor meer contrast */
.hero-b .hero-bgs img{filter:brightness(.4) saturate(.88)}
.hero-b::after{
  background:linear-gradient(to top,
    rgba(5,10,8,.97) 0%,rgba(5,10,8,.9) 36%,rgba(5,10,8,.62) 70%,rgba(5,10,8,.4) 100%) !important;
}

/* Hero 62b: hoger, meer lucht rond de tekst */
.hero-b{min-height:clamp(660px,54vw,780px)}
.hero-b .container{padding-top:clamp(3rem,6vw,5rem);padding-bottom:clamp(3rem,6vw,5rem)}
@media(max-width:1000px){.hero-b{min-height:0}}

/* Hero-tekstblok breder: titel op twee regels */
.hero-b .hero-glass{max-width:min(72ch,74%)}
.hero-b h1{max-width:30ch}
@media(max-width:1000px){.hero-b .hero-glass{max-width:none}}

/* Bundelblok: kop op sectiekop-formaat, gelijk aan de naadsectie */
.bundel .bd-tx h3{font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.55rem,2.7vw,2.2rem);line-height:1.16;margin:0 0 .7rem;color:var(--ink)}

/* Materiaalroutes: altijd drie naast elkaar */
.mat-routes{display:flex;flex-wrap:nowrap;gap:1.2rem}
.mat-routes > *{flex:1 1 0;min-width:0}
@media(max-width:800px){
  .mat-routes{flex-wrap:wrap}
  .mat-routes > *{flex:1 1 100%}
}

/* Materiaalgids-sectie: lichte crème achtergrond zoals de andere secties */
#brochure{background:var(--paper-deep)}


/* ============================================================
   Keukenbladen-dropdown: alle acht toepassingen in één oogopslag
   ============================================================ */
.mega-panel--kbflat{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.4rem clamp(1.4rem,2.2vw,2.2rem);
  width:min(880px,calc(100vw - 3rem));padding:1.4rem 1.5rem 1.6rem;
}
.mega-panel--kbflat .kbf-group h4{
  margin:0 0 .7rem;font-size:.68rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);
  padding-bottom:.5rem;border-bottom:1px solid var(--line);
}
.mega-panel--kbflat .kbf-row{display:grid;gap:.55rem}
.mega-panel--kbflat a{
  display:block;position:relative;overflow:hidden;border-radius:4px;
  text-decoration:none;aspect-ratio:16/9;background:var(--paper-deep);
}
.mega-panel--kbflat a img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.mega-panel--kbflat a:hover img{transform:scale(1.05)}
.mega-panel--kbflat .kb-ttl{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:1.3rem .7rem .55rem;color:#fff;font-size:.85rem;font-weight:700;line-height:1.3;
  background:linear-gradient(to top,rgba(10,17,13,.9),transparent);
}
@media(max-width:1024px){
  .mega-panel--kbflat{display:block;width:auto;padding:.4rem 0}
  .mega-panel--kbflat .kbf-group{margin-bottom:1rem}
  .mega-panel--kbflat .kbf-row{grid-template-columns:1fr 1fr;display:grid;gap:.45rem}
  .mega-panel--kbflat a{aspect-ratio:16/10}
}

/* Keukenbladen-dropdown: subtieler, kleine miniatuur naast de naam */
.mega-panel--kbflat{width:min(720px,calc(100vw - 3rem));padding:1.2rem 1.3rem 1.4rem;
  gap:1.1rem clamp(1.2rem,2vw,1.8rem)}
.mega-panel--kbflat .kbf-row{gap:.15rem}
.mega-panel--kbflat a{
  display:flex;align-items:center;gap:.7rem;aspect-ratio:auto;background:none;
  border-radius:4px;padding:.42rem .5rem;overflow:visible;
  transition:background .18s;
}
.mega-panel--kbflat a:hover{background:rgba(167,123,75,.07)}
.mega-panel--kbflat a img{
  width:38px;height:38px;flex:0 0 auto;border-radius:3px;object-fit:cover;
  box-shadow:inset 0 0 0 1px rgba(21,23,19,.08);
}
.mega-panel--kbflat a:hover img{transform:none}
.mega-panel--kbflat .kb-ttl{
  position:static;padding:0;background:none;color:var(--ink);
  font-size:.9rem;font-weight:600;line-height:1.35;
}
.mega-panel--kbflat a:hover .kb-ttl{color:var(--green)}
@media(max-width:1024px){
  .mega-panel--kbflat .kbf-row{grid-template-columns:1fr}
  .mega-panel--kbflat a{aspect-ratio:auto}
}

/* Keukenbladen-dropdown: alleen tekst */
.mega-panel--kbflat a img{display:none}
.mega-panel--kbflat a{gap:0;padding:.36rem .5rem}


/* Zakelijke dropdown: rustige tekstlijst, alles in één oogopslag */
.mega-panel--zkflat{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.1rem clamp(1.4rem,2.2vw,2.2rem);
  width:min(520px,calc(100vw - 3rem));padding:1.2rem 1.3rem 1.4rem;
}
.mega-panel--zkflat .zkf-group h4{
  margin:0 0 .7rem;font-size:.68rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);
  padding-bottom:.5rem;border-bottom:1px solid var(--line);
}
.mega-panel--zkflat .zkf-row{display:grid;gap:.15rem}
.mega-panel--zkflat a{
  display:block;padding:.36rem .5rem;border-radius:4px;text-decoration:none;
  font-size:.9rem;font-weight:600;line-height:1.35;color:var(--ink);
  transition:background .18s,color .18s;
}
.mega-panel--zkflat a:hover{background:rgba(167,123,75,.07);color:var(--green)}
@media(max-width:1024px){
  .mega-panel--zkflat{display:block;width:auto;padding:.4rem 0}
  .mega-panel--zkflat .zkf-group{margin-bottom:1rem}
}

/* Dropdown-links: naam met voorbeeld eronder */
.mega-panel--kbflat a{flex-direction:column;align-items:flex-start;gap:.1rem}
.mega-panel--kbflat a small{display:block;font-size:.79rem;font-weight:400;line-height:1.45;
  color:var(--ink-soft)}
.mega-panel--kbflat a:hover small{color:var(--ink-soft)}

/* Materiaalkaarten klikbaar */
a.card{text-decoration:none;color:inherit;display:block;transition:border-color .18s}
a.card:hover{border-color:var(--bronze)}
a.card:hover h3{color:var(--green)}


/* Filter: look-groep, chips en reset bovenaan */
.ft-looks{display:flex;flex-wrap:wrap;gap:.35rem}
.fl{
  font:inherit;font-size:.84rem;font-weight:600;cursor:pointer;
  padding:.34rem .7rem;border-radius:999px;
  border:1px solid var(--line);background:var(--white);color:var(--ink-soft);
  transition:border-color .18s,color .18s,background .18s;
}
.fl:hover{border-color:var(--bronze);color:var(--ink)}
.fl.on{border-color:var(--green);background:var(--green);color:#fff}

.fo-reset-top{
  display:block;width:100%;margin:.6rem 0 0;font:inherit;font-size:.84rem;font-weight:600;
  cursor:pointer;padding:.42rem .7rem;border-radius:var(--radius);
  border:1px solid var(--line);background:none;color:var(--ink-soft);
  transition:border-color .18s,color .18s;
}
.fo-reset-top:hover{border-color:var(--bronze);color:var(--green)}

.cat-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.7rem 0 0}
.cat-chip{
  display:inline-flex;align-items:center;gap:.35rem;font:inherit;font-size:.82rem;font-weight:600;
  cursor:pointer;padding:.3rem .6rem;border-radius:999px;
  border:1px solid var(--bronze);background:rgba(167,123,75,.08);color:var(--ink);
  transition:background .18s;
}
.cat-chip:hover{background:rgba(167,123,75,.16)}
.cat-chip i{font-style:normal;color:var(--bronze);font-size:.95rem;line-height:1}
.cat-chip-all{border-color:var(--line);background:none;color:var(--ink-soft)}
.cat-chip-all:hover{border-color:var(--bronze);color:var(--green)}

/* Materiaalkaarten: altijd drie kolommen */
.material-cards{display:flex;flex-wrap:nowrap;gap:1.2rem}
.material-cards > *{flex:1 1 0;min-width:0}
@media(max-width:800px){
  .material-cards{flex-wrap:wrap}
  .material-cards > *{flex:1 1 100%}
}


/* Materialen-dropdown: rustiger, kleinere platen en minder contrast */
.mega-panel--mat{width:min(700px,calc(100vw - 3rem));padding:1.2rem 1.3rem 1.3rem}
.mega-panel--mat .mm-lv1{gap:.1rem;border-right:1px solid var(--line);padding-right:1.1rem}
.mega-panel--mat .mm-lv1 > *{padding:.44rem .55rem;border-radius:4px;transition:background .18s}
.mega-panel--mat .mm-lv1 > *:hover,.mega-panel--mat .mm-lv1 > *.on{background:rgba(167,123,75,.07)}
.mega-panel--mat .mm-lv1 b{font-size:.9rem;font-weight:600;color:var(--ink)}
.mega-panel--mat .mm-lv1 small{font-size:.78rem;line-height:1.45;color:var(--ink-soft)}
.mega-panel--mat .mm-lv1 > *.on b{color:var(--green)}

.mega-panel--mat .mm-tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.mega-panel--mat .mm-tiles a{aspect-ratio:1/1;border-radius:3px}
.mega-panel--mat .mm-tiles a img{filter:saturate(.9)}
.mega-panel--mat .mm-tiles b,.mega-panel--mat .mm-tiles em{display:none}

.mega-panel--mat .mm-foot{gap:.2rem;padding-top:.8rem;margin-top:.9rem;border-top:1px solid var(--line)}
.mega-panel--mat .mm-foot a{font-size:.85rem;font-weight:600;color:var(--ink);
  padding:.34rem .5rem;border-radius:4px;text-decoration:none;transition:background .18s,color .18s}
.mega-panel--mat .mm-foot a:hover{background:rgba(167,123,75,.07);color:var(--green)}


/* Materialen-dropdown: drie categorieën in één oogopslag */
.mega-panel--matflat{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.2rem clamp(1.4rem,2.2vw,2.2rem);
  width:min(760px,calc(100vw - 3rem));padding:1.3rem 1.4rem 1.4rem;
}
.mega-panel--matflat .mmf-group h4{
  margin:0 0 .7rem;font-size:.68rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);
  padding-bottom:.5rem;border-bottom:1px solid var(--line);
}
.mega-panel--matflat .mmf-row{display:grid;gap:.12rem}
.mega-panel--matflat .mmf-row a{
  display:block;padding:.38rem .5rem;border-radius:4px;text-decoration:none;
  transition:background .18s;
}
.mega-panel--matflat .mmf-row a:hover{background:rgba(167,123,75,.07)}
.mega-panel--matflat .mmf-row a span{
  display:block;font-size:.9rem;font-weight:600;line-height:1.35;color:var(--ink);
}
.mega-panel--matflat .mmf-row a:hover span{color:var(--green)}
.mega-panel--matflat .mmf-row a small{
  display:block;font-size:.78rem;font-weight:400;line-height:1.45;color:var(--ink-soft);
}
.mega-panel--matflat .mmf-foot{
  grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.2rem 1rem;
  padding-top:.9rem;margin-top:.1rem;border-top:1px solid var(--line);
}
.mega-panel--matflat .mmf-foot a{
  font-size:.85rem;font-weight:600;color:var(--ink);text-decoration:none;
  padding:.32rem .5rem;border-radius:4px;transition:background .18s,color .18s;
}
.mega-panel--matflat .mmf-foot a:hover{background:rgba(167,123,75,.07);color:var(--green)}
@media(max-width:1024px){
  .mega-panel--matflat{display:block;width:auto;padding:.4rem 0}
  .mega-panel--matflat .mmf-group{margin-bottom:1rem}
  .mega-panel--matflat .mmf-foot{margin-top:0}
}

/* Materiaalkaarten: gelijke beeldhoogte en lucht tot de titel */
.material-cards .mc-pic{aspect-ratio:16/10;height:auto;overflow:hidden;display:block;margin:0 0 1rem}
.material-cards .mc-pic img{width:100%;height:100%;object-fit:cover;display:block}
.material-cards article > h3{margin-top:0}

/* Responsive sluitregels na de laatste ronde */
.mega-panel--mat .mm-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1024px){
  .mega-panel--mat .mm-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* header mag onder de hamburgergrens wél afbreken als iets niet past */
@media(max-width:420px){
  .site-header .header-inner{gap:.5rem}
  .site-header .logo img{height:38px}
}


/* ============================================================
   Zwevende WhatsApp-knop, donker
   ============================================================ */
.wa-float{
  position:fixed;right:clamp(1rem,2vw,1.6rem);bottom:clamp(1rem,2vw,1.6rem);z-index:180;
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.78rem 1.15rem;border-radius:999px;
  background:var(--ink);color:#fff;text-decoration:none;
  font-size:.92rem;font-weight:700;line-height:1;
  box-shadow:0 8px 24px rgba(10,17,13,.28);
  transition:background .2s,transform .2s,box-shadow .2s;
}
.wa-float:hover{background:var(--green-dark);transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(10,17,13,.34)}
.wa-float svg{flex:0 0 auto}
@media(max-width:560px){
  .wa-float{padding:0;width:52px;height:52px;justify-content:center}
  .wa-float span{display:none}
}


/* ============================================================
   Prijspagina: visuele opbouw in plaats van tekstkolom
   ============================================================ */
.pf-lok{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.pf-lok-a,.pf-lok-b{border-radius:var(--radius);padding:clamp(1.3rem,2.4vw,1.9rem)}
.pf-lok-a{background:var(--paper-deep);border:1px solid var(--line)}
.pf-lok-b{background:var(--green-dark);color:#fff}
.pf-tag{display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:.8rem}
.pf-tag-on{color:var(--gold)}
.pf-big{margin:0 0 1.1rem;font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.2;color:var(--ink-soft)}
.pf-big b{font-weight:400;color:var(--ink)}
.pf-lok-b .pf-big{color:rgba(255,255,255,.7)}
.pf-lok-b .pf-big b{color:#fff}
.pf-lok ul{list-style:none;padding:0;margin:0 0 1rem;display:grid;gap:.45rem}
.pf-lok li{position:relative;padding-left:1.4rem;font-size:.92rem;line-height:1.55;color:var(--ink-soft)}
.pf-lok-a li::before{content:"";position:absolute;left:0;top:.62em;width:.62rem;height:2px;background:var(--line)}
.pf-lok-b li{color:rgba(255,255,255,.82)}
.pf-lok-b li::before{content:"";position:absolute;left:0;top:.42em;width:.62rem;height:.34rem;
  border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}
.pf-note{margin:0;font-size:.86rem;line-height:1.6;color:var(--ink-soft);
  padding-top:.9rem;border-top:1px solid var(--line)}
.pf-lok-b .pf-note{color:rgba(255,255,255,.72);border-top-color:rgba(255,255,255,.2)}

.pf-factors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem}
.pf-factors article{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.3rem 1.4rem 1.4rem;display:grid;gap:.5rem;align-content:start}
.pf-n{font-family:var(--font-display);font-weight:400;font-size:1.5rem;color:var(--bronze);line-height:1}
.pf-factors h3{margin:0;font-size:1.08rem;line-height:1.3}
.pf-factors p{margin:0;font-size:.9rem;line-height:1.65;color:var(--ink-soft)}
.pf-scale{display:flex;align-items:center;gap:.6rem;margin-top:.35rem;
  font-size:.74rem;font-weight:700;letter-spacing:.02em;color:var(--ink-soft)}
.pf-scale i{flex:1;height:3px;border-radius:2px;
  background:linear-gradient(to right,rgba(29,92,66,.35),var(--bronze))}
.pf-link{font-size:.86rem;font-weight:700;color:var(--green);text-decoration:none;
  border-bottom:1px solid var(--bronze);padding-bottom:.12rem;justify-self:start;margin-top:.2rem}
.pf-link:hover{color:var(--bronze)}
.pf-help{background:var(--green-dark) !important;border-color:var(--green-dark) !important}
.pf-help h3{color:#fff}
.pf-help p{color:rgba(255,255,255,.8)}
.pf-help .btn{justify-self:start;margin-top:.3rem}

.pf-steps{margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.pf-steps-lb{display:block;font-size:.68rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:1rem}
.pf-steps-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-bottom:1.5rem}
.pf-steps-row div{font-size:.9rem;line-height:1.55;color:var(--ink-soft);
  padding-top:.8rem;border-top:2px solid var(--line)}
.pf-steps-row b{display:block;font-family:var(--font-display);font-weight:400;
  font-size:1.1rem;color:var(--bronze);margin-bottom:.25rem}

@media(max-width:1000px){
  .pf-factors{grid-template-columns:1fr 1fr}
  .pf-steps-row{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .pf-lok,.pf-factors,.pf-steps-row{grid-template-columns:1fr}
}

/* Wat maken we: zelfde gap als de andere carrousels */
.wm-grid{gap:1rem;grid-auto-columns:calc((100% - 3 * 1rem) / 4)}
@media(max-width:1000px){.wm-grid{grid-auto-columns:calc((100% - 1rem) / 2.2)}}
@media(max-width:560px){.wm-grid{grid-auto-columns:72%}}

/* Steenlooks-strook: zelfde tussenruimte als de andere carrousels */
.sl-strip{gap:1rem;grid-auto-columns:calc((100% - 4 * 1rem) / 5)}
@media(max-width:1000px){.sl-strip{grid-auto-columns:calc((100% - 1rem) / 2.2)}}
@media(max-width:560px){.sl-strip{grid-auto-columns:72%}}

/* Merkpagina-hero: rustiger, minder concurrerende elementen */
.pagehero .crumbs{margin-bottom:1.1rem}
.pagehero-text .eyebrow{margin-bottom:.2rem}
.pagehero h1{max-width:22ch}
.pagehero .lede{max-width:46ch;margin-bottom:1.5rem}
.pagehero-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem 1.6rem;
  margin-top:1.5rem;padding-top:1.3rem}
@media(max-width:560px){.pagehero-facts{grid-template-columns:1fr}}

/* Dropdowns: alleen de namen, geen ondertitels */
.mega-panel--kbflat a small,.mega-panel--matflat .mmf-row a small{display:none}
.mega-panel--kbflat a{padding:.34rem .5rem}
.mega-panel--matflat .mmf-row a{padding:.34rem .5rem}

/* Steenzeker-sectie: subtieler, zonder foto */
.szk-split > figure,.szk-split .szk-pic,#steenzeker figure{display:none}
.szk-split{display:block}
.szk-pad{padding:0 !important;max-width:none}
.szk{background:var(--paper-deep);padding:clamp(2.4rem,4.4vw,3.8rem) 0}
.szk .eyebrow{color:var(--bronze);border-color:rgba(167,123,75,.35)}
.szk h2{color:var(--ink)}
.szk-lede{color:var(--ink-soft) !important}
.szk-rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem 1.4rem}
.szk-rows article{padding:.9rem 0 0 !important;border-top:1px solid var(--line);border-bottom:0;
  background:none;display:grid;grid-template-columns:auto 1fr;gap:.2rem .8rem;align-items:baseline}
.szk-rows article i{font-style:normal;font-size:.74rem;font-weight:800;color:var(--bronze)}
.szk-rows article b{font-size:.96rem;color:var(--ink)}
.szk-rows article span{font-size:.86rem;line-height:1.55;color:var(--ink-soft);grid-column:2}
.szk-bonus{border-top-color:var(--line) !important;margin-top:1.5rem !important;padding-top:1.2rem !important}
.szk-bonus h3{color:var(--bronze) !important}
.szk-bonus span{color:var(--ink-soft) !important}
.szk-bonus span::before{border-left-color:var(--green) !important;border-bottom-color:var(--green) !important}
.szk-cta p{color:var(--ink-soft) !important}
.szk-gift,.szk-reserve{display:none}
@media(max-width:900px){.szk-rows{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.szk-rows{grid-template-columns:1fr}}

/* Materialen-dropdown: kopjes zijn links */
.mega-panel--matflat .mmf-group h4 a{color:var(--ink-soft);text-decoration:none;transition:color .18s}
.mega-panel--matflat .mmf-group h4 a:hover{color:var(--green)}


/* ============================================================
   Steenzeker: rustig vertrouwensblok
   ============================================================ */
.szk{background:var(--paper-deep);padding:clamp(3rem,5.5vw,4.6rem) 0}
.szk-split{display:block}
.szk-pad{padding:0 !important;max-width:none}
.szk .eyebrow{color:var(--bronze);border-color:rgba(167,123,75,.35)}
.szk h2{color:var(--ink);max-width:24ch}
.szk-lede{color:var(--ink-soft) !important;max-width:52ch;margin-bottom:2rem !important}

.szk-rows{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
.szk-rows article{
  padding:0 clamp(.9rem,1.6vw,1.4rem) !important;
  border-left:1px solid var(--line);border-top:0;border-bottom:0;background:none;
  display:grid;gap:.45rem;align-content:start;
}
.szk-rows article:first-child{border-left:0}

.szk-rows article i{
  display:flex;align-items:center;justify-content:center;font-style:normal;
  width:2rem;height:2rem;border-radius:50%;
  background:rgba(29,92,66,.09);color:var(--green);
  font-size:.78rem;font-weight:800;letter-spacing:0;
}
.szk-rows article b{display:block;font-size:1rem;line-height:1.3;color:var(--ink)}
.szk-rows article span{font-size:.87rem;line-height:1.6;color:var(--ink-soft)}
.szk-rows article > div{display:grid;gap:.2rem}

.szk-bonus{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.6rem;
  margin-top:2.2rem !important;padding-top:1.4rem !important;
  border-top:1px solid var(--line) !important;
}
.szk-bonus h3{
  margin:0;font-size:.68rem !important;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--bronze) !important;
}
.szk-bonus span{
  position:relative;padding-left:1.3rem;font-size:.87rem;color:var(--ink-soft) !important;
}
.szk-bonus span::before{
  content:"";position:absolute;left:0;top:.44em;width:.6rem;height:.34rem;
  border-left:2px solid var(--green) !important;border-bottom:2px solid var(--green) !important;
  transform:rotate(-45deg);
}

.szk-cta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.4rem;
  margin-top:1.6rem !important;padding-top:0;border-top:0;
}
.szk-cta p{margin:0;font-size:.87rem;color:var(--ink-soft) !important}

.szk-gift,.szk-reserve,.szk-split > figure,#steenzeker figure{display:none}

@media(max-width:1000px){
  .szk-rows{grid-template-columns:1fr 1fr;gap:1.4rem 0}
  .szk-rows article{border-left:0;border-top:1px solid var(--line);padding:1rem 0 0 !important}
  .szk-rows article:first-child{border-top:1px solid var(--line)}
}
@media(max-width:600px){
  .szk-rows{grid-template-columns:1fr}
  .szk-cta .btn{width:100%;justify-content:center}
}

/* Hero-feiten: altijd naast elkaar op één rij */
.pagehero-facts{display:flex;flex-wrap:nowrap;gap:1rem clamp(1.4rem,2.6vw,2.4rem);
  grid-template-columns:none}
.pagehero-facts > div{flex:1 1 0;min-width:0}
@media(max-width:700px){
  .pagehero-facts{flex-wrap:wrap}
  .pagehero-facts > div{flex:1 1 40%}
}

/* Hero-feiten definitief op één rij */
.pagehero-facts{display:flex !important;flex-wrap:nowrap !important;
  grid-template-columns:none !important;gap:1rem clamp(1.4rem,2.6vw,2.4rem)}
.pagehero-facts > div{flex:1 1 0 !important;min-width:0}
@media(max-width:700px){
  .pagehero-facts{flex-wrap:wrap !important}
  .pagehero-facts > div{flex:1 1 40% !important}
}


/* ============================================================
   Steenzeker variant D: op groen met crème kaarten
   ============================================================ */
.szk{background:var(--green-dark) !important;padding:clamp(2.8rem,5vw,4.2rem) 0}
.szk-split{display:block}
.szk-pad{padding:0 !important;max-width:none}
.szk .eyebrow{color:var(--gold) !important;border-color:rgba(227,196,155,.42) !important}
.szk h2{color:#fff !important;max-width:24ch}
.szk-lede{color:rgba(255,255,255,.8) !important;max-width:52ch;margin-bottom:1.8rem !important}

.szk-rows{display:grid !important;grid-template-columns:repeat(5,minmax(0,1fr)) !important;gap:.8rem !important}
.szk-rows article{
  background:var(--paper) !important;border:0 !important;border-radius:6px;
  padding:1.1rem 1.15rem 1.2rem !important;
  display:grid !important;gap:.35rem;align-content:start;grid-template-columns:1fr !important;
}
.szk-rows article i{
  display:block;width:auto;height:auto;background:none;border-radius:0;
  font-style:normal;font-size:.72rem;font-weight:800;letter-spacing:.08em;color:var(--bronze);
}
.szk-rows article > div{display:grid;gap:.25rem}
.szk-rows article b{display:block;font-size:.98rem;line-height:1.3;color:var(--ink)}
.szk-rows article span{display:block;font-size:.86rem;line-height:1.6;color:var(--ink-soft);grid-column:auto}

.szk-bonus{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.5rem;
  margin-top:1.8rem !important;padding-top:1.3rem !important;
  border-top:1px solid rgba(255,255,255,.2) !important;
}
.szk-bonus h3{margin:0;font-size:.66rem !important;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--gold) !important}
.szk-bonus span{position:relative;padding-left:1.3rem;font-size:.86rem;color:rgba(255,255,255,.78) !important}
.szk-bonus span::before{content:"";position:absolute;left:0;top:.44em;width:.6rem;height:.34rem;
  border-left:2px solid var(--gold) !important;border-bottom:2px solid var(--gold) !important;
  transform:rotate(-45deg)}

.szk-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.4rem;
  margin-top:1.5rem !important;padding-top:0;border-top:0}
.szk-cta p{margin:0;font-size:.87rem;color:rgba(255,255,255,.72) !important}
.szk-gift,.szk-reserve,.szk-split > figure,#steenzeker figure{display:none}

@media(max-width:1000px){
  .szk-rows{grid-template-columns:1fr 1fr !important}
}
@media(max-width:620px){
  .szk-rows{grid-template-columns:1fr !important}
  .szk-cta .btn{width:100%;justify-content:center}
}


/* Materiaalkaart: pijl-badge rechtsboven in het beeld, geen 'Bekijk'-regel */
.mat-routes .mr-pic{position:relative}
.mat-routes .mr-arrow{
  position:absolute;top:.7rem;right:.7rem;z-index:3;
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.22);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
  color:#fff;transition:background .22s,transform .22s;
}
.mat-routes a:hover .mr-arrow{background:rgba(255,255,255,.34);transform:translate(2px,-2px)}
.mat-routes a::after{content:none !important}

/* Toepassingskaart: pijl-badge rechtsboven, zelfde taal als de materiaalkaart */
.wm-it{position:relative}
.wm-arrow{
  position:absolute;top:.7rem;right:.7rem;z-index:4;
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.22);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
  color:#fff;transition:background .22s,transform .22s;
}
.wm-it:hover .wm-arrow{background:rgba(255,255,255,.34);transform:translate(2px,-2px)}


/* ============================================================
   Pagehero: één primaire CTA, twijfels weggenomen
   ============================================================ */
.ph-usp{list-style:none;padding:0;margin:1.3rem 0 1.5rem;display:grid;gap:.55rem}
.ph-usp li{position:relative;padding-left:1.6rem;font-size:.94rem;line-height:1.6;
  color:rgba(255,255,255,.86)}
.ph-usp li::before{content:"";position:absolute;left:0;top:.42em;width:.66rem;height:.36rem;
  border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}

.pagehero .hero-actions{align-items:center;gap:.9rem 1.6rem}
.ph-alt{display:inline-flex;align-items:center;gap:.4rem;font-size:.94rem;font-weight:700;
  color:#fff;text-decoration:none;padding-bottom:.22rem;border-bottom:1px solid rgba(227,196,155,.6);
  transition:color .2s,border-color .2s}
.ph-alt:hover{color:var(--gold);border-bottom-color:var(--gold)}

.ph-micro{margin:.9rem 0 0;font-size:.86rem;line-height:1.55;color:rgba(255,255,255,.66)}

.ph-adv{display:flex;align-items:center;gap:.8rem;max-width:44ch;
  margin-top:1.5rem;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.2)}
.ph-adv img{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:50% 20%;
  flex:0 0 auto;box-shadow:0 0 0 1px rgba(255,255,255,.22)}
.ph-adv p{margin:0;font-size:.9rem;line-height:1.55;color:rgba(255,255,255,.78)}
.ph-adv a{color:var(--gold);font-weight:700;text-decoration:none;
  border-bottom:1px solid rgba(227,196,155,.5)}
.ph-adv a:hover{color:#fff;border-bottom-color:#fff}

@media(max-width:640px){
  .pagehero .hero-actions .btn{width:100%;justify-content:center}
  .ph-alt{width:100%}
}

/* Kaart sluit direct aan op de footer, geen sectiepadding */
.ct-map{padding:0 !important;margin:0 !important;line-height:0}


/* ============================================================
   Single project: full-bleed hero met tekst op het beeld
   ============================================================ */
.prj-hero{
  position:relative;min-height:clamp(460px,52vw,620px);
  display:flex;align-items:flex-end;overflow:hidden;background:var(--ink);
}
.prj-hero-img{position:absolute;inset:0;margin:0}
.prj-hero-img img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.62)}
.prj-hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,
    rgba(5,10,8,.94) 0%,rgba(5,10,8,.78) 34%,rgba(5,10,8,.34) 66%,rgba(5,10,8,.14) 100%);
}
.prj-hero-in{position:relative;z-index:2;width:100%;padding:clamp(2.2rem,5vw,4rem) 0}
.prj-hero .crumbs{color:rgba(255,255,255,.6);margin-bottom:.8rem}
.prj-hero .crumbs a{color:rgba(255,255,255,.75)}
.prj-hero .crumbs a:hover{color:var(--gold)}
.prj-hero .crumbs .cb-sep{color:rgba(227,196,155,.55)}
.prj-hero .crumbs span:last-child{color:#fff}
.prj-hero .eyebrow{color:var(--gold);border-color:rgba(227,196,155,.42)}
.prj-hero h1{
  margin:.5rem 0 .9rem;color:#fff;max-width:22ch;
  font-size:clamp(2.1rem,4vw,3.4rem);line-height:1.08;
  text-shadow:0 2px 24px rgba(5,10,8,.4);
}
.prj-hero-lede{
  margin:0 0 1.8rem;max-width:52ch;
  font-size:clamp(.98rem,1.15vw,1.1rem);line-height:1.7;color:rgba(255,255,255,.86);
  text-shadow:0 1px 14px rgba(5,10,8,.45);
}
.prj-hero-meta{
  display:flex;flex-wrap:wrap;gap:1rem clamp(2rem,4vw,3.6rem);
  margin:0;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.24);
}
.prj-hero-meta > div{display:grid;gap:.2rem}
.prj-hero-meta dt{margin:0;font-size:.68rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.58)}
.prj-hero-meta dd{margin:0;font-size:1rem;font-weight:600;color:#fff}
.prj-hero-meta dd a{color:var(--gold);text-decoration:none;
  border-bottom:1px solid rgba(227,196,155,.5)}
.prj-hero-meta dd a:hover{color:#fff;border-bottom-color:#fff}

/* Galerij: één breed beeld plus twee details */
.prj-shots{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.7rem,1.4vw,1.1rem)}
.prj-shots figure{margin:0;overflow:hidden;border-radius:var(--radius-img,6px);
  background:var(--paper-deep);aspect-ratio:4/3}
.prj-shots .ps-big{grid-column:1/-1;aspect-ratio:16/9}
.prj-shots img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.prj-shots figure:hover img{transform:scale(1.03)}

@media(max-width:700px){
  .prj-hero{min-height:0;display:block}
  .prj-hero-img{position:relative;inset:auto;aspect-ratio:4/3}
  .prj-hero::after{content:none}
  .prj-hero-in{background:var(--ink)}
  .prj-hero h1{text-shadow:none}
  .prj-hero-lede{text-shadow:none}
  .prj-shots{grid-template-columns:1fr}
  .prj-shots .ps-big{aspect-ratio:4/3}
}


/* Projectcarrousel: zelfde bediening als de andere sliders */
.prj-car{position:relative}
.pc-track{
  display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2 * 1rem) / 3);
  gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:.4rem;scrollbar-width:none;
}
.pc-track::-webkit-scrollbar{display:none}
.pc-s{margin:0;scroll-snap-align:start;aspect-ratio:4/3;overflow:hidden;
  border-radius:var(--radius-img,6px);background:var(--paper-deep)}
.pc-s img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.pc-s:hover img{transform:scale(1.03)}
.pc-nav{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem}
.pc-btn{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--white);
  color:var(--ink);font-size:1.3rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .18s,color .18s,opacity .18s;
}
.pc-btn:hover:not(:disabled){border-color:var(--bronze);color:var(--green)}
.pc-btn:disabled{opacity:.32;cursor:default}
@media(max-width:1000px){
  .pc-track{grid-auto-columns:calc((100% - 1rem) / 2)}
  .pc-nav{display:none}
}
@media(max-width:600px){
  .pc-track{grid-auto-columns:80%}
}

/* Steenzeker-kaart: gelijke ademruimte aan alle kanten */
.szk-rows article{padding:1.1rem 1.2rem 1.2rem !important}


/* ============================================================
   Pagehero full-bleed: zelfde taal als de projecthero
   ============================================================ */
.pagehero-full{
  position:relative;min-height:clamp(420px,44vw,540px);
  display:flex;align-items:flex-end;overflow:hidden;background:var(--ink);
  padding:0;
}
.pagehero-full .ph-bg{position:absolute;inset:0;margin:0}
.pagehero-full .ph-bg img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.6)}
.pagehero-full::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,
    rgba(5,10,8,.94) 0%,rgba(5,10,8,.78) 34%,rgba(5,10,8,.34) 66%,rgba(5,10,8,.14) 100%);
}
.pagehero-full .ph-in{position:relative;z-index:2;width:100%;padding:clamp(2rem,4.5vw,3.4rem) 0}
.pagehero-full .crumbs{color:rgba(255,255,255,.6);margin-bottom:.8rem}
.pagehero-full .crumbs a{color:rgba(255,255,255,.75)}
.pagehero-full .crumbs a:hover{color:var(--gold)}
.pagehero-full .crumbs .cb-sep{color:rgba(227,196,155,.55)}
.pagehero-full .crumbs span:last-child{color:#fff}
.pagehero-full .eyebrow{color:var(--gold);border-color:rgba(227,196,155,.42)}
.pagehero-full h1{
  margin:.5rem 0 .9rem;color:#fff;max-width:24ch;
  font-size:clamp(2rem,3.8vw,3.2rem);line-height:1.1;
  text-shadow:0 2px 24px rgba(5,10,8,.4);
}
.pagehero-full .lede{
  margin:0 0 1.6rem;max-width:54ch;
  font-size:clamp(.98rem,1.15vw,1.08rem);line-height:1.7;color:rgba(255,255,255,.86);
  text-shadow:0 1px 14px rgba(5,10,8,.45);
}
.pagehero-full .hero-actions{margin-bottom:1.6rem}
.pagehero-full .btn-outline{border-color:rgba(255,255,255,.35);color:#fff}
.pagehero-full .btn-outline:hover{border-color:var(--gold);color:var(--gold);background:transparent}
.pagehero-full .pagehero-facts{
  display:flex !important;flex-wrap:wrap;gap:1rem clamp(2rem,4vw,3.6rem);
  margin:0;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.24);
}
.pagehero-full .pagehero-facts > div{display:grid;gap:.2rem}
.pagehero-full .pagehero-facts dt{margin:0;font-size:.68rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.58)}
.pagehero-full .pagehero-facts dd{margin:0;font-size:.98rem;font-weight:600;color:#fff}

@media(max-width:700px){
  .pagehero-full{min-height:0;display:block}
  .pagehero-full .ph-bg{position:relative;inset:auto;aspect-ratio:4/3}
  .pagehero-full::after{content:none}
  .pagehero-full .ph-in{background:var(--ink)}
  .pagehero-full h1,.pagehero-full .lede{text-shadow:none}
  .pagehero-full .hero-actions .btn{width:100%;justify-content:center}
}

/* Breadcrumb-balk onder de bewijsbalk: subtiel, één regel */
.crumbbar .container{display:flex;align-items:center;flex-wrap:wrap;gap:.3rem;
  font-weight:600;text-transform:uppercase}
.crumbbar a{text-decoration:none;transition:color .18s}
.crumbbar .cb-sep{font-style:normal;margin:0 .25rem}

/* Breadcrumb-balk nog subtieler: geen achtergrond, kleiner en grijzer */
.crumbbar{background:transparent}
.crumbbar .container{padding-top:1.1rem;padding-bottom:0;
  font-size:.66rem;letter-spacing:.11em;color:rgba(98,103,95,.6)}
.crumbbar a{color:rgba(98,103,95,.6);opacity:1}
.crumbbar a:hover{color:var(--ink-soft)}
.crumbbar .cb-sep{color:rgba(98,103,95,.4)}
.crumbbar span:last-child{color:rgba(98,103,95,.75);opacity:1}

/* Breadcrumb loopt door in de sectie eronder: zelfde witte achtergrond */
.crumbbar{background:var(--white)}
.crumbbar .container{padding-top:1.3rem;padding-bottom:0}

/* Hero-feiten dichter bij elkaar */
.pagehero-full .pagehero-facts{gap:1rem clamp(1.4rem,2.4vw,2.2rem)}

/* Hero-feiten: kolommen dicht bij elkaar, niet verspreid over de breedte */
.pagehero-full .pagehero-facts{
  display:flex !important;justify-content:flex-start;
  gap:.9rem clamp(1.1rem,1.8vw,1.6rem);width:auto;
}
.pagehero-full .pagehero-facts > div{flex:0 0 auto}

/* Hero-feiten: compacte blok, kolommen smal */
.pagehero-full .pagehero-facts{
  gap:.8rem 1.1rem;max-width:34rem;
}
.pagehero-full .pagehero-facts > div{max-width:10rem}
.pagehero-full .pagehero-facts dt{font-size:.64rem;letter-spacing:.12em}
.pagehero-full .pagehero-facts dd{font-size:.92rem;line-height:1.35}

/* Hero iets hoger */
.pagehero-full{min-height:clamp(500px,50vw,620px)}

/* Hero flink hoger */
.pagehero-full{min-height:clamp(620px,62vw,780px)}

/* Hero-tekst breder: kop op één regel, lede op twee */
.pagehero-full h1{max-width:none;white-space:nowrap}
.pagehero-full .lede{max-width:76ch}
@media(max-width:1200px){
  .pagehero-full h1{white-space:normal;max-width:28ch}
}


/* ============================================================
   Hero C: tekst links, verloop van links, stappenbalk onderaan
   ============================================================ */
.hero-c{
  position:relative;min-height:clamp(640px,88vh,860px);
  display:flex;flex-direction:column;justify-content:flex-start;
  overflow:hidden;background:var(--ink);padding:0;
}
.hero-c .hero-bgs{position:absolute;inset:0;z-index:0}
.hero-c .hero-bgs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;opacity:0;transition:opacity 1.2s ease;filter:brightness(.58) saturate(.9)}
.hero-c .hero-bgs img.on{opacity:1}
.hero-c::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg,rgba(5,10,8,.94) 0%,rgba(5,10,8,.84) 30%,rgba(5,10,8,.5) 56%,rgba(5,10,8,.2) 78%,rgba(5,10,8,.08) 100%),
    linear-gradient(to top,rgba(5,10,8,.72) 0%,rgba(5,10,8,.14) 40%,transparent 70%);
}
.hero-c-in{position:relative;z-index:3;width:100%;flex:1 1 auto;
  display:flex;align-items:center;padding:clamp(2rem,5vw,3.4rem) 0}

.hc-kick{
  display:block;margin-bottom:1.4rem;
  font-size:.72rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(227,196,155,.9);
}
.hero-c h1{
  margin:0 0 1.5rem;color:#fff;max-width:22ch;
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(2.6rem,6vw,5rem);line-height:1.02;letter-spacing:-.015em;
  text-shadow:0 2px 30px rgba(5,10,8,.4);
}
.hero-c h1 span{display:block}
.hero-c h1 .hc-dim{color:rgba(255,255,255,.5)}

.hc-lede{
  position:relative;margin:0 0 2rem;padding-top:1.5rem;max-width:46ch;
  font-size:clamp(.98rem,1.15vw,1.08rem);line-height:1.75;color:rgba(255,255,255,.8);
}
.hc-lede::before{content:"";position:absolute;top:0;left:0;width:3.4rem;height:1px;
  background:rgba(227,196,155,.6)}

.hc-acts{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.6rem}
.hc-acts .btn{gap:.55rem}
.hc-play{
  display:inline-flex;align-items:center;gap:.7rem;
  font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;text-decoration:none;transition:color .2s;
}
.hc-play-ic{
  width:44px;height:44px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.38);color:#fff;
  transition:border-color .2s,background .2s,transform .2s;
}
.hc-play:hover{color:var(--gold)}
.hc-play:hover .hc-play-ic{border-color:var(--gold);background:rgba(227,196,155,.12);transform:scale(1.05)}

.hero-c-stats{
  position:relative;z-index:3;width:100%;flex:0 0 auto;margin-top:auto;
  border-top:1px solid rgba(255,255,255,.16);
  padding:clamp(1.1rem,2vw,1.6rem) 0;
}
.hero-c-stats .container{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 0}
.hc-s{
  flex:1 1 0;min-width:0;display:flex;align-items:center;gap:.7rem;
  padding:0 clamp(.9rem,2vw,1.8rem);
  border-left:1px solid rgba(255,255,255,.14);
}
.hc-s:first-child{border-left:0;padding-left:0}
.hc-s b{
  font-family:var(--font-display);font-weight:400;font-size:1.7rem;line-height:1;
  color:var(--gold);flex:0 0 auto;
}
.hc-s span{font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.66);line-height:1.4}
.hc-adv{flex:1 1 auto}
.hc-adv img{width:38px;height:38px;border-radius:50%;object-fit:cover;object-position:50% 20%;
  flex:0 0 auto;box-shadow:0 0 0 1px rgba(255,255,255,.24)}
.hc-adv span{text-transform:none;letter-spacing:0;font-size:.86rem;font-weight:400}
.hc-adv a{color:var(--gold);font-weight:700;text-decoration:none;
  border-bottom:1px solid rgba(227,196,155,.5)}
.hc-adv a:hover{color:#fff;border-bottom-color:#fff}

@media(max-width:1100px){
  .hero-c h1{font-size:clamp(2.4rem,5.4vw,3.6rem)}
  .hero-c-stats .container{gap:1rem clamp(1rem,3vw,2rem)}
  .hc-s{flex:0 1 auto;border-left:0;padding:0}
  .hc-adv{flex:1 1 100%;padding-top:1rem;border-top:1px solid rgba(255,255,255,.14)}
}
@media(max-width:700px){
  .hero-c{min-height:0;display:block}
  .hero-c .hero-bgs{position:relative;height:clamp(240px,46vw,340px)}
  .hero-c::after{content:none}
  .hero-c-in{background:var(--ink)}
  .hero-c h1{text-shadow:none;font-size:clamp(2.1rem,8vw,2.8rem)}
  .hero-c-stats{background:var(--ink)}
  .hc-acts .btn{width:100%;justify-content:center}
  .hc-play{width:100%}
  .hc-s{flex:1 1 40%}
}

/* Rail niet gekneld onder de sticky header op tablet */
@media(max-width:1000px){.hero-rail{top:auto;bottom:1rem}}

/* Hero C: secundaire knop met witte omlijning */
.hero-c .btn-outline{border-color:rgba(255,255,255,.4);color:#fff;background:transparent}
.hero-c .btn-outline:hover{border-color:var(--gold);color:var(--gold);background:transparent}

/* Projectfoto: pijl-badge rechtsboven, zelfde taal als de andere kaarten */
.workstrip figure{position:relative}
.ws-arrow{
  position:absolute;top:.7rem;right:.7rem;z-index:4;
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.22);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
  color:#fff;transition:background .22s,transform .22s;
}
.workstrip figure:hover .ws-arrow{background:rgba(255,255,255,.34);transform:translate(2px,-2px)}

/* Sectie-inleiding op één regel */
#main > section:nth-child(2) .section-head .lede{max-width:none;white-space:nowrap}
@media(max-width:1200px){
  #main > section:nth-child(2) .section-head .lede{white-space:normal}
}

/* Projecten-inleiding op twee regels */
.work-section .section-head .lede{max-width:68ch}

/* Breadcrumb loopt door in de catalogussectie eronder */
.crumbbar:has(+ .cat){background:var(--white)}
.cat{background:var(--paper)}
.crumbbar{background:var(--white)}

/* Breadcrumb-achtergrond volgt de catalogussectie eronder */
.crumbbar{background:var(--paper)}
.cat{background:var(--paper)}

/* Pagehero-galerij: geen hover-effect */
.pagehero-gal figure:hover img{transform:none}
.pagehero-gal figure:hover::after{box-shadow:none}

/* Steenzeker-garanties op mobiel als slider */
@media(max-width:760px){
  .szk-rows{
    display:grid !important;grid-template-columns:none !important;
    grid-auto-flow:column;grid-auto-columns:82%;
    gap:.7rem !important;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:.4rem;scrollbar-width:none;
  }
  .szk-rows::-webkit-scrollbar{display:none}
  .szk-rows article{scroll-snap-align:start;flex:none !important}
}

/* Pagehero op mobiel: foto blijft achtergrond, tekst eroverheen */
@media(max-width:700px){
  .pagehero-full{min-height:clamp(460px,78vh,600px);display:flex;align-items:flex-end}
  .pagehero-full .ph-bg{position:absolute;inset:0;aspect-ratio:auto}
  .pagehero-full .ph-bg img{width:100%;height:100%;object-fit:cover}
  .pagehero-full::after{
    content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(to top,
      rgba(5,10,8,.95) 0%,rgba(5,10,8,.82) 38%,rgba(5,10,8,.42) 70%,rgba(5,10,8,.2) 100%);
  }
  .pagehero-full .ph-in{background:none;position:relative;z-index:2}
  .pagehero-full h1,.pagehero-full .lede{text-shadow:0 1px 16px rgba(5,10,8,.5)}
}

/* Slot-CTA: USP's minder prominent */
#aanvraag .of-pts li{opacity:.62;font-size:.88rem}
#aanvraag .of-pts li::before{opacity:.7}
#aanvraag .of-pts a{opacity:.85}

/* Adviseursregel zonder scheidingslijnen */
#aanvraag .of-person{border-top:0;border-bottom:0;padding:0;margin:1.3rem 0}


/* Verder kijken: donker en rustig */
.vk-dark{background:linear-gradient(135deg,rgba(29,92,66,.18),transparent 42%),#151713}
.vk-dark .eyebrow{color:var(--gold);border-color:rgba(227,196,155,.42)}
.vk-dark h2{color:#fff}
.vk-dark .lede{color:rgba(255,255,255,.72)}
.vk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.vk-grid a{
  display:grid;gap:.3rem;align-content:start;text-decoration:none;
  padding:1.3rem clamp(1rem,1.8vw,1.6rem);
  border-left:1px solid rgba(255,255,255,.16);transition:background .2s;
}
.vk-grid a:first-child{border-left:0;padding-left:0}
.vk-grid a:last-child{padding-right:0}
.vk-grid a:hover{background:rgba(255,255,255,.04)}
.vk-grid b{font-size:1.05rem;color:#fff;font-weight:700}
.vk-grid span{font-size:.88rem;line-height:1.55;color:rgba(255,255,255,.6)}
.vk-grid a:hover b{color:var(--gold)}
@media(max-width:900px){
  .vk-grid{grid-template-columns:1fr 1fr}
  .vk-grid a{border-left:0;border-top:1px solid rgba(255,255,255,.16);padding:1.1rem 0}
  .vk-grid a:nth-child(2){padding-left:1.2rem;border-left:1px solid rgba(255,255,255,.16)}
  .vk-grid a:nth-child(4){padding-left:1.2rem;border-left:1px solid rgba(255,255,255,.16)}
}
@media(max-width:560px){
  .vk-grid{grid-template-columns:1fr}
  .vk-grid a,.vk-grid a:nth-child(2),.vk-grid a:nth-child(4){padding:1.1rem 0;border-left:0}
}

/* Verder kijken: lichte kaarten met pijl-badge */
.vk-grid{grid-template-columns:repeat(4,1fr);gap:.9rem}
.vk-grid a{
  position:relative;background:var(--paper);border-radius:var(--radius);
  padding:1.2rem 1.25rem 1.3rem;border-left:0 !important;
  transition:background .2s,transform .2s;
}
.vk-grid a:first-child,.vk-grid a:last-child{padding:1.2rem 1.25rem 1.3rem}
.vk-grid a:hover{background:var(--white);transform:translateY(-2px)}
.vk-grid b{color:var(--ink);padding-right:2.4rem}
.vk-grid span{color:var(--ink-soft)}
.vk-grid a:hover b{color:var(--green)}
.vk-grid a::after{
  content:"";position:absolute;top:1rem;right:1rem;
  width:30px;height:30px;border-radius:50%;
  background:rgba(21,23,19,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231D5C42' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E") no-repeat center;
  transition:background-color .2s,transform .2s;
}
.vk-grid a:hover::after{background-color:rgba(167,123,75,.16);transform:translate(2px,-2px)}
@media(max-width:900px){
  .vk-grid{grid-template-columns:1fr 1fr}
  .vk-grid a,.vk-grid a:nth-child(2),.vk-grid a:nth-child(4){
    padding:1.2rem 1.25rem 1.3rem;border-top:0;border-left:0}
}
@media(max-width:560px){
  .vk-grid{grid-template-columns:1fr}
  .vk-grid a,.vk-grid a:nth-child(2),.vk-grid a:nth-child(4){padding:1.2rem 1.25rem 1.3rem}
}


/* Verder kijken: beeldkaarten met tekst eroverheen */
.vk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
.vk-grid a{
  position:relative;display:block;padding:0 !important;overflow:hidden;
  border-radius:var(--radius);background:var(--ink);aspect-ratio:3/4;
  text-decoration:none;transition:transform .25s;
}
.vk-grid a:hover{background:var(--ink);transform:translateY(-3px)}
.vk-grid a img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.vk-grid a:hover img{transform:scale(1.04)}
.vk-grid a::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(5,10,8,.9) 0%,rgba(5,10,8,.45) 42%,transparent 72%);
}
.vk-grid a::after{content:none}
.vk-arrow{
  position:absolute;top:.85rem;right:.85rem;z-index:3;
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.22);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
  color:#fff;transition:background .22s,transform .22s;
}
.vk-grid a:hover .vk-arrow{background:rgba(255,255,255,.34);transform:translate(2px,-2px)}
.vk-tx{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:grid;gap:.2rem;padding:1.1rem 1.2rem 1.2rem;
}
.vk-tx b{font-size:1.08rem;color:#fff;font-weight:700;padding-right:0}
.vk-tx span{font-size:.86rem;line-height:1.5;color:rgba(255,255,255,.75)}
.vk-grid a:hover .vk-tx b{color:var(--gold)}
@media(max-width:900px){
  .vk-grid{grid-template-columns:1fr 1fr}
  .vk-grid a{aspect-ratio:4/3}
}
@media(max-width:560px){
  .vk-grid{grid-template-columns:1fr}
  .vk-grid a{aspect-ratio:16/10}
}

/* Steenzeker: zelfde donkere achtergrond als 'Verder kijken' */
.szk{background:linear-gradient(135deg,rgba(29,92,66,.18),transparent 42%),#151713 !important}

/* Steenzeker-tekstblok zonder eigen vlak */
.szk-pad{background:none !important;box-shadow:none !important;border:0 !important}

/* Steenzeker-binnenvlak weg: alleen de sectie-achtergrond blijft */
.szk-split{background:none !important;border-radius:0 !important;box-shadow:none !important;padding:0 !important}
.szk-box{background:none !important;border-radius:0 !important;padding:0 !important}

/* Steenzeker-kaarten: glas op donker, subtiel en luxe */
.szk-rows article{
  background:rgba(255,255,255,.06) !important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:8px;
  transition:background .25s,border-color .25s;
}
.szk-rows article:hover{
  background:rgba(255,255,255,.1) !important;
  border-color:rgba(227,196,155,.35) !important;
}
.szk-rows article i{color:var(--gold)}
.szk-rows article b{color:#fff}
.szk-rows article span{color:rgba(255,255,255,.7)}
.szk-rows article .ph-txt{color:var(--gold)}

/* Steenzeker: zelfde sectiepadding als de overige secties */
.szk{padding:var(--section-pad,80px) 0 !important}

/* Werkwijze op over-ons: vier kaarten in plaats van vijf */
.szk-rows{grid-template-columns:repeat(5,minmax(0,1fr))}
.szk-rows:has(article:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1000px){
  .szk-rows:has(article:nth-child(4):last-child){grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .szk-rows:has(article:nth-child(4):last-child){grid-template-columns:1fr}
}

/* Werkwijze op over-ons: vier kaarten echt op één rij */
.szk-rows:has(article:nth-child(4):last-child){
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}
@media(max-width:1000px){
  .szk-rows:has(article:nth-child(4):last-child){grid-template-columns:1fr 1fr !important}
}
@media(max-width:620px){
  .szk-rows:has(article:nth-child(4):last-child){grid-template-columns:1fr !important}
}

/* Steenzeker-kaarten: meer lucht binnenin */
.szk-rows article{padding:1.4rem 1.5rem 1.5rem !important;gap:.55rem}
.szk-rows article > div{gap:.4rem}
.szk-rows article b{margin-bottom:.15rem}
.szk-rows article span{line-height:1.65}
@media(max-width:760px){
  .szk-rows article{padding:1.3rem 1.4rem 1.4rem !important}
}

/* Steenzeker-kaarten: hoger, tekst bovenaan */
.szk-rows article{min-height:clamp(220px,17vw,270px);align-content:start}
@media(max-width:760px){.szk-rows article{min-height:0}}

/* Kaarten weer normale hoogte, wel ruime padding */
.szk-rows article{min-height:0 !important;padding:1.5rem 1.6rem 1.6rem !important}


/* ============================================================
   Header: donker met groene lichtval, zoals Steenzeker
   ============================================================ */
.site-header{
  background:linear-gradient(135deg,rgba(29,92,66,.18),transparent 42%),#151713 !important;
  border-bottom:1px solid rgba(255,255,255,.1) !important;
}
.site-header .logo img{filter:brightness(0) invert(1)}
.site-header .main-nav > a,
.site-header .main-nav .mega > .mega-button{color:rgba(255,255,255,.86) !important}
.site-header .main-nav > a:hover,
.site-header .main-nav .mega > .mega-button:hover,
.site-header .main-nav .mega:hover > .mega-button{color:var(--gold) !important}
.site-header .main-nav > a.nav-home{color:rgba(255,255,255,.86) !important}
.site-header .header-phone{color:rgba(255,255,255,.86) !important}
.site-header .header-phone:hover{color:var(--gold) !important}
.site-header .header-phone svg{color:var(--gold)}

/* mobiel paneel volgt dezelfde donkere taal */
@media(max-width:1024px){
  .site-header .main-nav{
    background:linear-gradient(135deg,rgba(29,92,66,.18),transparent 42%),#151713 !important;
  }
  .site-header .main-nav a,
  .site-header .main-nav .mega-button{color:rgba(255,255,255,.86) !important}
  .site-header .main-nav a small{color:rgba(255,255,255,.55) !important}
  .site-header .main-nav .mega-panel{background:none !important;box-shadow:none !important}
}

/* Hamburger zichtbaar op de donkere header */
.site-header .nav-toggle{color:#fff !important;border-color:rgba(255,255,255,.24) !important}
.site-header .nav-toggle:hover{color:var(--gold) !important;border-color:rgba(227,196,155,.4) !important}

/* Tijdlabel in de werkwijze-kaarten */
.szk-when{display:block;font-style:normal;margin-top:.5rem;padding-top:.5rem;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}

/* Beeldkaarten ook op lichte secties leesbaar */
.section:not(.vk-dark) .vk-grid a{background:var(--ink)}


/* B2B-beloftes als beeldslider */
.b2b-head{display:flex;justify-content:flex-end;margin-bottom:1rem}
.b2b-nav{display:flex;gap:.5rem}
.b2b-cards{
  display:grid !important;grid-template-columns:none !important;
  grid-auto-flow:column;grid-auto-columns:calc((100% - 3 * 1rem) / 4);
  gap:1rem !important;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:.4rem;scrollbar-width:none;
}
.b2b-cards::-webkit-scrollbar{display:none}
.b2b-cards article{
  position:relative;scroll-snap-align:start;overflow:hidden;
  border-radius:var(--radius);background:var(--ink);aspect-ratio:3/4;
  padding:0 !important;border:0 !important;
}
.b2b-cards article img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.b2b-cards article:hover img{transform:scale(1.04)}
.b2b-cards article::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(5,10,8,.9) 0%,rgba(5,10,8,.45) 42%,transparent 72%);
}
.b2b-cards .vk-tx{position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:grid;gap:.2rem;padding:1.1rem 1.2rem 1.2rem}
.b2b-cards .vk-tx b{font-size:1.02rem;color:#fff;font-weight:700}
.b2b-cards .vk-tx span{font-size:.85rem;line-height:1.5;color:rgba(255,255,255,.75)}
@media(max-width:1000px){
  .b2b-nav{display:none}
  .b2b-cards{grid-auto-columns:calc((100% - 1rem) / 2.2)}
}
@media(max-width:560px){
  .b2b-cards{grid-auto-columns:78%}
}

/* B2B-navigatie onder de slider */
.b2b-head{margin:1.1rem 0 0 !important}


.site-footer .f-cols{gap:clamp(2.4rem,5vw,4.4rem)}
.site-footer .f-col ul{display:grid;gap:.85rem}
.site-footer .f-col h5{margin-bottom:1.3rem;letter-spacing:.2em;opacity:.45}
.site-footer .f-col a{font-size:.9rem;opacity:.75;transition:opacity .18s,color .18s}
.site-footer .f-col a:hover{opacity:1}
.site-footer .f-claim{line-height:1.9;max-width:32ch;opacity:.75}
.site-footer .f-logo{margin-bottom:1.3rem}
.site-footer .f-bottom{
  padding-top:clamp(2rem,3.5vw,2.8rem);padding-bottom:clamp(2rem,3.5vw,2.8rem);
  font-size:.82rem;opacity:.6;
}
.site-footer .f-nap,.site-footer .f-hours{line-height:1.9;opacity:.75}

/* Footer net iets dieper dan de sectie erboven */
.site-footer{background:#0d1310}

/* Gelijke afstand tussen sectiekop en slider/raster */
.work-section .section-head,
.make-section .section-head,
.wm-head,.reels-head,.sl-head,.b2b-head{margin-bottom:1.4rem}
.work-section .section-head{margin-bottom:1.4rem !important}
.work-section .work-strip,.work-section .proj-grid,.work-section .pj-grid{margin-top:0}


/* ============================================================
   Sluitregel: één afstand tussen elke sectiekop en de inhoud
   ============================================================ */
.section-head,
.zag-head,.reels-head,.wm-head,.sl-head,.b2b-head,.zag-reels-head,
.faq-block .section-head,.cat-head,.cfg-head{
  margin-bottom:clamp(2rem,3.4vw,2.8rem) !important;
}
.prj-head{padding-bottom:clamp(1.4rem,2.4vw,1.8rem);margin-bottom:clamp(2rem,3.4vw,2.8rem) !important}
.rv-head{margin-bottom:clamp(2rem,3.4vw,2.8rem) !important}

/* Slot-CTA: subtiele steenfoto achter de donkere laag */
#aanvraag{position:relative;isolation:isolate;overflow:hidden}
#aanvraag::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url('assets/products/kwartsiet-2.jpg') center/cover no-repeat;
  opacity:.12;filter:grayscale(.35);
}
#aanvraag::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(135deg,rgba(29,92,66,.2),transparent 45%),rgba(21,23,19,.86);
}

/* Eigen achtergrond weg zodat de fotolaag zichtbaar is */
#aanvraag{background:#151713 !important}
#aanvraag::before{z-index:0;opacity:.18}
#aanvraag::after{z-index:1}
#aanvraag > .container{position:relative;z-index:2}


/* ============================================================
   Footer B: crème-diep met inkt-tekst
   ============================================================ */
.site-footer{background:var(--paper-deep) !important;border-top:1px solid var(--line) !important;color:var(--ink)}
.site-footer::before,.site-footer::after{content:none !important}
.site-footer .f-logo{filter:none !important}
.site-footer .f-claim,
.site-footer .f-col a,
.site-footer .f-col ul li,
.site-footer .f-nap,
.site-footer .f-hours,
.site-footer .f-area,
.site-footer .f-cred,
.site-footer .f-bottom,
.site-footer p,
.site-footer span,
.site-footer small{color:var(--ink-soft) !important}
.site-footer .f-col h5{color:var(--ink) !important;opacity:.55}
.site-footer .f-col a:hover{color:var(--green) !important}
.site-footer .f-score{color:var(--ink) !important}
.site-footer .f-score b{color:var(--ink) !important}
.site-footer .f-score .stars,.site-footer .stars{color:var(--bronze) !important}
.site-footer .f-bottom{border-top:1px solid var(--line) !important}
.site-footer .f-bottom a{color:var(--ink-soft) !important}
.site-footer .f-bottom a:hover{color:var(--green) !important}
.site-footer .f-tags span{border-color:var(--line) !important;color:var(--ink-soft) !important}
.site-footer a{color:var(--ink-soft)}
.site-footer a:hover{color:var(--green)}
.site-footer b,.site-footer strong{color:var(--ink) !important}

/* Google-score in de footer: leesbaar op crème */
.site-footer .f-score{
  display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  text-decoration:none;padding:.55rem .85rem;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  transition:border-color .18s;
}
.site-footer .f-score:hover{border-color:var(--bronze)}
.site-footer .f-score .f-g{flex:0 0 auto}
.site-footer .f-score b{
  font-family:var(--font-display);font-weight:400;font-size:1.25rem;line-height:1;
  color:var(--ink) !important;
}
.site-footer .f-score i{font-style:normal;color:var(--bronze) !important;font-size:.82rem;letter-spacing:.06em}
.site-footer .f-score > span{font-size:.84rem;color:var(--ink-soft) !important}

/* Subtiele iconen bij telefoon en mail in de footer */




/* Icoon in een rondje bij telefoon en mail */
.site-footer .f-ic{
  box-sizing:content-box;width:14px;height:14px;padding:7px;
  border-radius:50%;background:rgba(167,123,75,.12);
  box-shadow:inset 0 0 0 1px rgba(167,123,75,.24);
  opacity:1;transition:background .18s,box-shadow .18s;
}
.site-footer .f-visit a:hover .f-ic{background:rgba(167,123,75,.2);box-shadow:inset 0 0 0 1px rgba(167,123,75,.4)}
.site-footer .f-visit a{gap:.6rem}






/* ============================================================
   Mobiel filter: knop plus paneel (herbouwd, sluitende versie)
   ============================================================ */
.mf-bar,.mf-head,.mf-apply,.mf-backdrop{display:none}

@media(max-width:900px){
  .cat-layout{display:block}

  .mf-bar{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    margin:0 0 1.2rem;
  }
  .mf-open{
    display:inline-flex;align-items:center;gap:.5rem;
    font:inherit;font-size:.92rem;font-weight:700;color:var(--ink);
    background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
    padding:.65rem 1.1rem;min-height:44px;cursor:pointer;
  }
  .mf-open:hover{border-color:var(--bronze)}
  .mf-count{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:20px;height:20px;padding:0 .35rem;border-radius:999px;
    background:var(--green);color:#fff;font-size:.72rem;font-weight:800;
  }
  .mf-res{font-size:.86rem;color:var(--ink-soft)}

  .mf-backdrop{
    display:block;position:fixed;inset:0;z-index:300;
    background:rgba(10,17,13,.5);
    opacity:0;pointer-events:none;transition:opacity .25s;
  }
  body.mf-on .mf-backdrop{opacity:1;pointer-events:auto}
  .mf-backdrop[hidden]{display:block}

  .cat-rail#filters{
    display:block !important;
    position:fixed !important;
    left:0 !important;right:0 !important;bottom:0 !important;top:auto !important;
    width:auto !important;max-width:none !important;margin:0 !important;
    z-index:310 !important;
    max-height:82vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
    background:var(--white);border-radius:14px 14px 0 0;
    padding:0 1.2rem 1.4rem;
    box-shadow:0 -14px 44px rgba(10,17,13,.28);
    transform:translateY(101%);
    transition:transform .3s cubic-bezier(.2,.8,.2,1);
  }
  body.mf-on .cat-rail#filters{transform:translateY(0) !important}
  body.mf-on{overflow:hidden}

  .mf-head{
    display:flex;align-items:center;justify-content:space-between;
    position:sticky;top:0;z-index:2;
    padding:1.1rem 0 .9rem;margin-bottom:.6rem;
    background:var(--white);border-bottom:1px solid var(--line);
  }
  .mf-head b{font-size:1.05rem}
  .mf-close{
    width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
    background:var(--paper);color:var(--ink);font-size:1.5rem;line-height:1;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
  }
  .mf-apply{
    display:flex;position:sticky;bottom:0;z-index:2;
    width:100%;justify-content:center;margin-top:1.2rem;
  }
}


/* Filterpaneel als bottom sheet, ook buiten .cat-layout (portal) */
@media(max-width:900px){
  body > .cat-rail#filters,
  .cat-layout .cat-rail#filters{
    position:fixed !important;left:0 !important;right:0 !important;
    bottom:0 !important;top:auto !important;
    width:auto !important;max-width:none !important;margin:0 !important;
    z-index:310 !important;
    max-height:85dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;
    background:var(--white);border-radius:14px 14px 0 0;
    padding:0 1.2rem 1.4rem;
    box-shadow:0 -14px 44px rgba(10,17,13,.28);
    transform:translateY(101%);
    transition:transform .3s cubic-bezier(.2,.8,.2,1);
    will-change:transform;
  }
  body.mf-on > .cat-rail#filters,
  body.mf-on .cat-layout .cat-rail#filters{transform:translateY(0) !important}
  body > .mf-backdrop{position:fixed;inset:0;z-index:300}
}

/* Adviesregel onderaan het filter niet op mobiel */
@media(max-width:900px){.cat-rail .fo-foot p:last-child{display:none}}

/* Plaatrail uit de hero */
.hero-rail{display:none !important}




/* ============================================================
   Hero: uitgelicht project als beeldkaart rechtsonder
   ============================================================ */
.hc-proj{
  position:absolute;right:clamp(1.2rem,3vw,2.6rem);bottom:clamp(1.6rem,3.4vw,2.8rem);z-index:4;
  display:block;overflow:hidden;text-decoration:none;
  width:min(340px,38vw);aspect-ratio:16/10;
  border-radius:10px;background:var(--ink);
  transition:transform .25s;
}
.hc-proj:hover{transform:translateY(-3px)}
.hc-proj img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.hc-proj:hover img{transform:scale(1.05)}
.hc-proj::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(5,10,8,.92) 0%,rgba(5,10,8,.35) 50%,transparent 78%);
}
.hc-proj-ar{
  position:absolute;top:.8rem;right:.8rem;z-index:3;
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.22);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
  color:#fff;transition:background .22s,transform .22s;
}
.hc-proj:hover .hc-proj-ar{background:rgba(255,255,255,.34);transform:translate(2px,-2px)}
.hc-proj-tx{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:grid;gap:.2rem;padding:1rem 1.1rem 1.1rem;
}
.hc-proj-tx b{font-size:1rem;font-weight:700;color:#fff;line-height:1.25}
.hc-proj-tx > span{font-size:.8rem;color:rgba(255,255,255,.72)}

@media(max-width:1100px){
  .hc-proj{position:static;width:100%;max-width:360px;margin-top:1.8rem}
}

/* Projectenstrip binnen de container, zoals de andere carrousels */
.workstrip{padding-left:0 !important;padding-right:0 !important}
.work-section .workstrip{margin:0}

/* Privacylink net zo licht als de omringende tekst */
#aanvraag .of-fine a{font-weight:400 !important;color:var(--ink-soft) !important;
  border-bottom:1px solid rgba(98,103,95,.4)}
#aanvraag .of-fine a:hover{color:var(--ink) !important}

.site-footer .f-visit .f-acts{display:none !important}

.site-footer .f-brand .f-logo{height:54px !important;width:auto}

/* Steenzeker-strip boven de footer: leesbaar op de lichte band */
.szk-strip{background:var(--paper-deep);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.szk-strip span,.szk-strip li{color:var(--ink-soft) !important}
.szk-strip span::before,.szk-strip li::before{border-left-color:var(--green) !important;border-bottom-color:var(--green) !important}
.szk-strip a{color:var(--green) !important;font-weight:700;
  border-bottom:1px solid rgba(167,123,75,.45);text-decoration:none}
.szk-strip a:hover{color:var(--bronze) !important;border-bottom-color:var(--bronze)}

/* Projectkaart uitlijnen op de containerlijn */
.hero-c .container{position:relative}
.hc-proj{position:absolute;right:0;bottom:0;margin:0}
@media(max-width:1100px){
  .hc-proj{position:static;width:100%;max-width:360px;margin-top:1.8rem}
}

/* Link in de belofteband: leesbaar op de lichte band */
.f-promise .fp-more{color:var(--green) !important;font-weight:700;
  border-bottom:1px solid rgba(167,123,75,.5);text-decoration:none}
.f-promise .fp-more:hover{color:var(--bronze) !important;border-bottom-color:var(--bronze)}

/* Projecthero op mobiel: tekst altijd zichtbaar */
@media(max-width:700px){
  .prj-hero{aspect-ratio:auto !important;min-height:0 !important;display:block !important;overflow:visible}
  .prj-hero-in{display:block !important;background:var(--ink)}
  .prj-hero-in .container{padding-top:1.6rem;padding-bottom:1.8rem}
}

/* Projecthero op mobiel: tekst over het beeld, net als desktop */
@media(max-width:700px){
  .prj-hero{
    position:relative !important;display:flex !important;align-items:flex-end !important;
    min-height:clamp(420px,78vw,560px) !important;overflow:hidden !important;
  }
  .prj-hero-img{position:absolute !important;inset:0 !important;aspect-ratio:auto !important}
  .prj-hero-img img{width:100%;height:100%;object-fit:cover}
  .prj-hero::after{
    content:"" !important;position:absolute;inset:0;z-index:1;
    background:linear-gradient(to top,
      rgba(5,10,8,.95) 0%,rgba(5,10,8,.82) 36%,rgba(5,10,8,.42) 68%,rgba(5,10,8,.16) 100%);
  }
  .prj-hero-in{position:relative;z-index:2;background:none !important;width:100%}
  .prj-hero h1,.prj-hero-lede{text-shadow:0 1px 16px rgba(5,10,8,.5)}
}
@media(max-width:560px){
  .prj-hero-img{aspect-ratio:auto !important}
}

@media(max-width:700px){
  .prj-hero{min-height:clamp(560px,105vw,760px) !important}
}

/* Reviewkop zonder scheidingslijn */
.rv-head{border-bottom:0 !important;padding-bottom:0 !important}


/* ============================================================
   Mega-menu: doorlopend met de donkere header
   ============================================================ */
@media(min-width:1025px){
  .site-header .main-nav{position:static}
  .mega{position:static}
  .mega-panel{
    position:absolute;top:100%;left:50%;transform:translateX(-50%);
    width:min(1440px,calc(100vw - 2 * clamp(20px,4vw,44px)));
    margin:0;border-radius:0;box-shadow:none;
    background:#12140f;
    border:0;border-top:1px solid rgba(255,255,255,.08);
    padding:clamp(1.4rem,2.4vw,2rem) clamp(20px,4vw,44px) clamp(1.6rem,2.8vw,2.4rem);
  }
  .mega-panel::before,.mega-panel::after{content:none}

  /* kopjes */
  .mega-panel h4,.mega-panel .mm-lbl,.mega-panel .kb-lv1 > a > b{
    color:var(--gold);
  }
  .mega-panel h4{border-bottom-color:rgba(255,255,255,.12)}

  /* links */
  .mega-panel a{color:rgba(255,255,255,.86)}
  .mega-panel a:hover{color:var(--gold)}
  .mega-panel a b{color:#fff}
  .mega-panel a:hover b{color:var(--gold)}
  .mega-panel a small{color:rgba(255,255,255,.55)}

  /* niveau-1 kolom */
  .kb-lv1,.mm-lv1,.zk-lv1{background:none;border-right:1px solid rgba(255,255,255,.1)}
  .kb-lv1 > a,.mm-lv1 > a,.mm-lv1 > button,.zk-lv1 > a{color:rgba(255,255,255,.86);background:none}
  .kb-lv1 > a:hover,.kb-lv1 > a.on,
  .mm-lv1 > a:hover,.mm-lv1 > a.on,.mm-lv1 > button:hover,.mm-lv1 > button.on,
  .zk-lv1 > a:hover,.zk-lv1 > a.on{background:rgba(255,255,255,.06);color:#fff}
  .kb-lv1 > a.on b,.mm-lv1 > .on b,.zk-lv1 > a.on b{color:var(--gold)}

  /* niveau-2 vlak */
  .kb-lv2,.mm-lv2,.zk-lv2{background:none}
  .kb-ttl{color:#fff}

  /* scheidingslijnen */
  .mega-panel hr,.mega-panel .mm-sep{border-color:rgba(255,255,255,.12)}
  .mega-group + .mega-group{border-left-color:rgba(255,255,255,.1)}
}

@media(min-width:1025px){
  .mega-panel,.mega-panel *{color:rgba(255,255,255,.86)}
  .mega-panel a,.mega-panel a b,.mega-panel .kb-ttl,.mega-panel b{color:#fff !important}
  .mega-panel a small,.mega-panel small,.mega-panel p{color:rgba(255,255,255,.58) !important}
  .mega-panel h4,.mega-panel .mm-lbl,.mega-panel .fo-sub{color:var(--gold) !important}
  .mega-panel a:hover,.mega-panel a:hover b{color:var(--gold) !important}
  .mega-panel .kb-set a,.mega-panel .mm-tiles a{color:#fff !important}
}



@media(min-width:1025px){
  .mega-panel--mat a,.mega-panel--mat a b,.mega-panel--mat .mm-tiles a,
  .mega-panel--mat .mm-lv1 a,.mega-panel--mat .mm-lv1 button,
  .mega-panel--mat .mm-foot a,.mega-panel--mat .mm-x b{color:#fff !important}
  .mega-panel--mat a small,.mega-panel--mat small{color:rgba(255,255,255,.58) !important}
  .mega-panel--mat a:hover,.mega-panel--mat a:hover b,
  .mega-panel--mat .mm-foot a:hover{color:var(--gold) !important}
  .mega-panel--mat .mm-lv1 button.on,.mega-panel--mat .mm-lv1 a.on{color:var(--gold) !important}
}



@media(min-width:1025px){
  .mega-panel--mat .mm-lv2 a,
  .mega-panel--mat .mm-set a,
  .mega-panel--mat .mm-tiles a,
  .mega-panel--mat .mega-group a{color:#fff !important;opacity:1 !important}
  .mega-panel--mat .mm-lv2 a b,
  .mega-panel--mat .mega-group a b{color:#fff !important}
  .mega-panel--mat .mm-lv2 a:hover,
  .mega-panel--mat .mega-group a:hover{color:var(--gold) !important}
}


/* ============================================================
   Mega-menu: compacte zwevende dropdown
   ============================================================ */
@media(min-width:1025px){
  .site-header .main-nav{position:static}
  .mega{position:relative}
  .mega-panel{
    position:absolute !important;top:calc(100% + .6rem) !important;
    left:0 !important;right:auto !important;transform:translateY(-6px) !important;
    width:max-content !important;max-width:720px !important;min-width:0 !important;
    margin:0 !important;
    background:#12140f;border:1px solid rgba(255,255,255,.1);border-top:0;
    border-radius:8px;box-shadow:0 24px 60px rgba(5,10,8,.5);
    padding:2rem !important;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .15s ease,transform .15s ease,visibility .15s;
  }
  .mega:hover > .mega-panel,
  .mega:focus-within > .mega-panel,
  .mega.open > .mega-panel{
    opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) !important;
  }
  /* onzichtbare brug zodat het paneel openblijft tussen knop en paneel */
  .mega-panel::before{
    content:"";position:absolute;left:0;right:0;top:-.7rem;height:.7rem;
  }

  /* drie kolommen, breedte volgt de inhoud */
  .mega-panel .kb-cols,.mega-panel .mm-cols,.mega-panel .zk-cols,
  .mega-panel .mega-groups{
    display:flex !important;gap:48px !important;align-items:flex-start;
  }
  .mega-panel .mega-group,.mega-panel .kb-col{
    max-width:none !important;width:max-content;min-width:0;
    border-left:0 !important;padding-left:0 !important;
  }
  .mega-panel h4,.mega-panel .mm-lbl{
    margin-bottom:1rem !important;padding-bottom:0 !important;border-bottom:0 !important;
    font-size:.66rem;letter-spacing:.16em;
  }
  .mega-panel ul,.mega-panel .kb-col > div{display:grid;gap:.55rem}
  .mega-panel a{white-space:nowrap;transition:color .15s}
}

/* Sluitregel: alle dropdown-links leesbaar wit, hover goud */
@media(min-width:1025px){
  .mega-panel a,
  .mega-panel a *,
  .mega-panel ul li a,
  .mega-panel .mega-group a,
  .mega-panel .mega-group ul li a{
    color:#fff !important;opacity:1 !important;
  }
  .mega-panel a small{color:rgba(255,255,255,.62) !important;opacity:1 !important}
  .mega-panel h4,.mega-panel .mm-lbl{color:var(--gold) !important;opacity:1 !important}
  .mega-panel a:hover,.mega-panel a:hover *{color:var(--gold) !important}
}

/* Materialen-dropdown: secundaire rij onderaan */
@media(min-width:1025px){
  .mega-panel--mat .mm-foot{
    display:flex !important;flex-wrap:nowrap;align-items:center;gap:32px;
    margin-top:1.2rem;padding-top:1.1rem;
    border-top:1px solid rgba(255,255,255,.1);
  }
  .mega-panel--mat .mm-foot a{
    white-space:nowrap;font-size:.84rem;opacity:.7 !important;
    color:#fff !important;transition:opacity .15s,color .15s;
  }
  .mega-panel--mat .mm-foot a:hover{opacity:1 !important;color:var(--gold) !important}
}

/* Footer-rij in de dropdowns: altijd op één regel */
@media(min-width:1025px){
  .mega-panel{max-width:860px !important}
  .mega-panel--mat .mm-foot,
  .mega-panel .mm-foot{
    display:flex !important;flex-wrap:nowrap !important;white-space:nowrap;
    align-items:center;gap:32px !important;
    margin-top:.9rem !important;padding-top:.9rem !important;
    border-top:1px solid rgba(255,255,255,.1);
  }
  .mega-panel .mm-foot a{
    white-space:nowrap !important;flex:0 0 auto;
    font-size:.83rem;color:#fff !important;opacity:.6 !important;
    transition:opacity .15s;
  }
  .mega-panel .mm-foot a:hover{opacity:1 !important;color:#fff !important}
}

/* Homepage-hero op mobiel: tekst over het beeld */
@media(max-width:760px){
  .hero-c{
    position:relative !important;display:flex !important;align-items:flex-end !important;
    min-height:clamp(560px,100vw,760px) !important;overflow:hidden !important;
  }
  .hero-c .hero-bg,.hero-c .hero-bgs{
    position:absolute !important;inset:0 !important;aspect-ratio:auto !important;height:auto !important;
  }
  .hero-c .hero-bg img,.hero-c .hero-bgs img{
    position:absolute !important;inset:0;width:100%;height:100%;object-fit:cover;
  }
  .hero-c::after{
    content:"" !important;position:absolute;inset:0;z-index:1;
    background:linear-gradient(to top,
      rgba(5,10,8,.95) 0%,rgba(5,10,8,.84) 38%,rgba(5,10,8,.46) 70%,rgba(5,10,8,.18) 100%);
  }
  .hero-c-in{position:relative;z-index:2;background:none !important;width:100%}
  .hero-c h1,.hero-c .hc-lede{text-shadow:0 1px 16px rgba(5,10,8,.5)}
}

/* Projectkaart alleen op desktop */
@media(max-width:1100px){.hc-proj{display:none !important}}

/* Projectkaart: anker op de hero zelf, rechtsonder */
@media(min-width:1101px){
  .hero-c{position:relative}
  .hero-c .hc-proj{
    position:absolute !important;
    top:auto !important;left:auto !important;
    right:clamp(1.5rem,4vw,3rem) !important;
    bottom:clamp(2rem,4vw,3.4rem) !important;
    z-index:5;width:min(340px,30vw);
  }
}

/* Footer-rij in de dropdowns: kleiner en altijd op één regel */
@media(min-width:1025px){
  .mega-panel{max-width:none !important}
  .mega-panel .mm-foot{gap:24px !important}
  .mega-panel .mm-foot a{font-size:.75rem !important;letter-spacing:.01em}
}

/* Materialen-dropdown: secundaire linkrij, ondergeschikt aan de kolommen */
@media(min-width:1025px){
  .mega-panel .mm-foot{
    display:flex !important;flex-wrap:wrap !important;align-items:center;
    justify-content:flex-start;gap:24px !important;
    margin-top:1rem !important;padding-top:1rem !important;
    border-top:1px solid rgba(255,255,255,.1) !important;
  }
  .mega-panel .mm-foot a{
    flex:0 0 auto;white-space:nowrap;
    font-size:13px !important;font-weight:400 !important;letter-spacing:0;
    color:#fff !important;opacity:.5 !important;
    transition:opacity .15s;
  }
  .mega-panel .mm-foot a:hover{opacity:1 !important;color:#fff !important}
}

/* Sluitregel: secundaire linkrij materialen-dropdown */
@media(min-width:1025px){
  .mega-panel--mat .mm-foot,
  .site-header .mega-panel--mat .mm-foot{
    display:flex !important;flex-wrap:nowrap !important;
    align-items:center;justify-content:flex-start;gap:24px !important;
    margin-top:1rem !important;padding:1rem 0 0 0 !important;
    border-top:1px solid rgba(255,255,255,.1) !important;
    background:none !important;
  }
  .mega-panel--mat .mm-foot a,
  .site-header .mega-panel--mat .mm-foot a{
    flex:0 0 auto;white-space:nowrap !important;
    padding:0 !important;margin:0 !important;
    background:none !important;border:0 !important;border-radius:0 !important;
    font-size:13px !important;font-weight:400 !important;
    color:#fff !important;opacity:.5 !important;
  }
  .mega-panel--mat .mm-foot a:hover{opacity:1 !important;background:none !important}
  .mega-panel--mat{width:max-content !important;max-width:none !important}
}

/* Mobiel menu: alle tekst licht en leesbaar */
@media(max-width:1024px){
  .site-header .main-nav,
  .site-header .main-nav *{color:rgba(255,255,255,.86) !important}
  .site-header .main-nav a,
  .site-header .main-nav a b,
  .site-header .main-nav b,
  .site-header .main-nav .mega-button,
  .site-header .main-nav .kb-ttl,
  .site-header .main-nav .mm-x b,
  .site-header .main-nav .zk-x b{color:#fff !important}
  .site-header .main-nav a small,
  .site-header .main-nav small,
  .site-header .main-nav p,
  .site-header .main-nav .mm-foot a{color:rgba(255,255,255,.6) !important}
  .site-header .main-nav h4,
  .site-header .main-nav .mm-lbl,
  .site-header .main-nav .fo-sub{color:var(--gold) !important}
  .site-header .main-nav a:hover,
  .site-header .main-nav a:hover b{color:var(--gold) !important}
  .site-header .main-nav .mega-panel{background:none !important}
  .site-header .main-nav .mega-panel a{background:none !important}
}


/* ============================================================
   Mobiel menu: drill-down, paneel schuift van rechts in
   ============================================================ */
@media(max-width:1024px){
  .site-header .main-nav{overflow-x:hidden !important}

  /* niveau 1: de hoofditems */
  .site-header .main-nav > a,
  .site-header .main-nav > .mega > .mega-button{
    display:flex !important;align-items:center;justify-content:space-between;
    width:100%;padding:1.05rem .2rem !important;margin:0 !important;
    font-size:1.05rem !important;font-weight:600;
    border-bottom:1px solid rgba(255,255,255,.1);
    background:none !important;text-align:left;
  }
  .site-header .main-nav > .mega > .mega-button::after{
    content:"";flex:0 0 auto;width:8px;height:8px;
    border-top:2px solid var(--gold);border-right:2px solid var(--gold);
    transform:rotate(45deg);transition:none;
  }

  /* niveau 2: schuift van rechts over niveau 1 */
  .site-header .main-nav .mega-panel{
    position:fixed !important;top:76px;left:0;right:0;bottom:0;z-index:5;
    display:block !important;
    background:linear-gradient(135deg,rgba(29,92,66,.18),transparent 42%),#151713 !important;
    padding:0 20px 2rem !important;overflow-y:auto;
    transform:translateX(100%);transition:transform .26s cubic-bezier(.2,.7,.2,1);
    border:0 !important;border-radius:0 !important;box-shadow:none !important;
    opacity:1 !important;visibility:visible !important;pointer-events:auto !important;
    max-width:none !important;width:auto !important;margin:0 !important;
  }
  .site-header .main-nav .mega.open > .mega-panel{transform:translateX(0)}

  /* terug-balk bovenaan het subpaneel */
  .site-header .main-nav .mega-panel::before{
    content:"‹ Terug";display:flex;align-items:center;
    position:sticky;top:0;z-index:2;
    padding:1.05rem 0;margin:0 0 .4rem;
    font-size:.95rem;font-weight:700;color:var(--gold);
    background:#151713;border-bottom:1px solid rgba(255,255,255,.1);
    cursor:pointer;
  }

  /* kolommen onder elkaar, geen kaders */
  .site-header .main-nav .mega-panel .kb-cols,
  .site-header .main-nav .mega-panel .mm-cols,
  .site-header .main-nav .mega-panel .zk-cols,
  .site-header .main-nav .mega-panel .mega-groups{
    display:block !important;gap:0 !important;
  }
  .site-header .main-nav .mega-panel .mega-group,
  .site-header .main-nav .mega-panel .kb-col{
    width:auto !important;max-width:none !important;margin-bottom:1.6rem;
  }
  .site-header .main-nav .mega-panel h4,
  .site-header .main-nav .mega-panel .mm-lbl{
    margin:0 0 .6rem !important;font-size:.66rem;letter-spacing:.16em;
  }
  .site-header .main-nav .mega-panel ul{display:grid;gap:0}
  .site-header .main-nav .mega-panel a{
    display:block;padding:.85rem .2rem !important;
    border-bottom:1px solid rgba(255,255,255,.07);
    white-space:normal !important;min-height:44px;
  }
  .site-header .main-nav .mega-panel .mm-foot{
    display:grid !important;gap:0 !important;margin-top:1rem !important;
    padding-top:.6rem !important;border-top:1px solid rgba(255,255,255,.1) !important;
  }
  .site-header .main-nav .mega-panel .mm-foot a{font-size:.92rem !important;opacity:.7 !important}

  /* beeldtegels compact */
  .site-header .main-nav .mega-panel .kb-set,
  .site-header .main-nav .mega-panel .mm-tiles{
    display:grid !important;grid-template-columns:1fr 1fr;gap:.6rem !important;
  }
  .site-header .main-nav .mega-panel .kb-set a,
  .site-header .main-nav .mega-panel .mm-tiles a{
    padding:0 !important;border-bottom:0;
  }
}

@media(max-width:1024px){
  /* geen transform op .main-nav: anders wordt hij containing block voor het subpaneel */
  .site-header .main-nav,
  body.nav-open .site-header .main-nav,
  body.nav-open .main-nav{transform:none !important}
  .site-header .main-nav{opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
  body.nav-open .site-header .main-nav{opacity:1 !important;visibility:visible !important}

  /* subpaneel absoluut binnen .main-nav i.p.v. fixed */
  .site-header .main-nav .mega-panel{
    position:absolute !important;top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;
    height:auto !important;
  }
}


/* ============================================================
   Mobiel menu: drill-down met meeschuivend hoofdmenu
   ============================================================ */
@media(max-width:1024px){
  .site-header .main-nav{
    overflow-x:hidden !important;
    display:block !important;
  }
  /* hoofdmenu schuift 30% mee naar links */
  .site-header .main-nav > a,
  .site-header .main-nav > .mega > .mega-button,
  .site-header .main-nav > .nav-cta{
    transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .28s cubic-bezier(.4,0,.2,1);
  }
  body.sub-open .site-header .main-nav > a,
  body.sub-open .site-header .main-nav > .mega > .mega-button,
  body.sub-open .site-header .main-nav > .nav-cta{
    transform:translateX(-30%);opacity:.35;
  }

  .site-header .main-nav .mega-panel{
    position:absolute !important;inset:0 !important;z-index:6;
    transform:translateX(100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    overflow-y:auto;
  }
  .site-header .main-nav .mega.open > .mega-panel{transform:translateX(0)}
  .site-header .main-nav .mega-panel[inert]{pointer-events:none}
  .site-header .main-nav .mega-panel::before{content:none !important}

  /* terug-balk met categorienaam */
  .mp-back{
    display:flex;align-items:center;gap:.5rem;width:100%;
    position:sticky;top:0;z-index:3;
    padding:1.05rem .2rem;margin:0 0 .4rem;
    font:inherit;font-size:.98rem;font-weight:700;color:var(--gold);
    background:#151713;border:0;border-bottom:1px solid rgba(255,255,255,.1);
    cursor:pointer;text-align:left;min-height:48px;
  }
  .mp-back::before{
    content:"";flex:0 0 auto;width:8px;height:8px;
    border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);
    transform:rotate(45deg);
  }
  .mp-back:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
  .mp-all{
    display:flex;align-items:center;justify-content:space-between;
    padding:.9rem .2rem !important;margin-bottom:1rem;
    border-bottom:1px solid rgba(255,255,255,.1);
    font-weight:700;color:#fff !important;
  }
  .mp-all::after{
    content:"";width:7px;height:7px;
    border-top:2px solid var(--gold);border-right:2px solid var(--gold);transform:rotate(45deg);
  }
}
@media(min-width:1025px){
  .mp-back,.mp-all{display:none !important}
}

/* Bewijsbalk op mobiel: alleen de score */
@media(max-width:700px){
  .proof-strip .container > span:not(.ts-score):not(:first-child){display:none}
  .proof-strip .container{justify-content:center}
}

@media(max-width:700px){
  .proof-strip .container > span:nth-child(2){display:inline-flex}
}

@media(max-width:700px){
  .proof-strip .ps-item{display:none !important}
  .proof-strip .ps-item:first-of-type{display:inline-flex !important}
}



/* Projectkaart klikbaar zonder de opmaak te wijzigen */
.workstrip figure{position:relative}
.workstrip .ws-link{position:absolute;inset:0;z-index:5;display:block}


/* ============================================================
   Footer: licht, twee zones plus linkkolommen
   ============================================================ */
.site-footer{
  background:var(--paper-deep) !important;border-top:1px solid var(--line) !important;
  color:var(--ink);padding:0 !important;
}
.site-footer::before,.site-footer::after{content:none !important}

.site-footer .f-top{
  display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(2.4rem,5vw,5rem);
  padding-top:clamp(3.4rem,6vw,5.2rem);padding-bottom:clamp(2.8rem,5vw,4rem);
}
.site-footer .f-brand{position:relative}
.site-footer .f-top::after{
  content:"";position:absolute;left:calc(50% + clamp(1.2rem,2.5vw,2.5rem));
  top:clamp(3.4rem,6vw,5.2rem);bottom:clamp(2.8rem,5vw,4rem);
  width:1px;background:var(--line);
}
.site-footer .f-top{position:relative}
.site-footer .f-logo{height:54px;width:auto;display:block;margin-bottom:1.8rem;filter:none}
.site-footer .f-claim{
  margin:0 0 .9rem;max-width:24ch;
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.24;color:var(--ink) !important;
}
.site-footer .f-sub{margin:0 0 2rem;font-size:.92rem;color:var(--ink-soft) !important}
.site-footer .f-score{
  display:inline-flex;align-items:baseline;gap:.6rem;text-decoration:none;
  padding:0;background:none;border:0;
}
.site-footer .f-score b{
  font-family:var(--font-display);font-weight:400;font-size:1.8rem;line-height:1;
  color:var(--ink) !important;
}
.site-footer .f-score .stars{font-style:normal;color:var(--bronze) !important;font-size:.86rem;letter-spacing:.08em}
.site-footer .f-score span{
  font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft) !important;
}
.site-footer .f-score:hover b{color:var(--green) !important}

.site-footer .f-visit h5{
  margin:0 0 1.4rem;font-size:.66rem;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft) !important;opacity:.7;
}
.site-footer .f-adr{margin:0 0 1.4rem;font-size:1rem;line-height:1.7;color:var(--ink) !important}
.site-footer .f-tel{
  display:inline-block;margin-bottom:1rem;
  font-family:var(--font-display);font-weight:400;font-size:1.5rem;line-height:1;
  color:var(--ink) !important;text-decoration:none;
  border-bottom:1px solid var(--bronze);padding-bottom:.2rem;
}
.site-footer .f-tel:hover{color:var(--green) !important;border-bottom-color:var(--green)}
.site-footer .f-mail{
  display:block;margin-bottom:1.6rem;font-size:.95rem;
  color:var(--ink-soft) !important;text-decoration:none;
}
.site-footer .f-mail:hover{color:var(--green) !important}
.site-footer .f-hours{margin:0;font-size:.95rem;line-height:1.7;color:var(--ink) !important}
.site-footer .f-hours span{font-size:.88rem;color:var(--ink-soft) !important}
.site-footer .f-person{
  display:flex;align-items:center;gap:.9rem;
  margin-top:1.8rem;padding-top:1.6rem;border-top:1px solid var(--line);
}
.site-footer .f-person img{
  width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:50% 20%;flex:0 0 auto;
}
.site-footer .f-person p{margin:0 0 .2rem;font-size:.95rem;color:var(--ink) !important}
.site-footer .f-person span{
  font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft) !important;
}

.site-footer .f-cols{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,5vw,4rem);
  padding-top:clamp(2.4rem,4vw,3.4rem);padding-bottom:clamp(2.4rem,4vw,3.4rem);
  border-top:1px solid var(--line);
}
.site-footer .f-col h5{
  margin:0 0 1.4rem;font-size:.64rem;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bronze) !important;
}
.site-footer .f-col ul{list-style:none;padding:0;margin:0;display:grid;gap:.85rem}
.site-footer .f-col a{
  font-size:.98rem;color:var(--ink) !important;text-decoration:none;transition:color .18s;
}
.site-footer .f-col a:hover{color:var(--green) !important}

.site-footer .f-bottom{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem 2rem;
  padding-top:1.6rem;padding-bottom:1.8rem;border-top:1px solid var(--line);
  font-size:.85rem;color:var(--ink-soft) !important;
}
.site-footer .f-legal{display:flex;flex-wrap:wrap;gap:1.4rem}
.site-footer .f-bottom a{color:var(--ink-soft) !important;text-decoration:none}
.site-footer .f-bottom a:hover{color:var(--green) !important}

@media(max-width:900px){
  .site-footer .f-top{grid-template-columns:1fr;gap:2.6rem}
  .site-footer .f-top::after{display:none}
  .site-footer .f-cols{grid-template-columns:1fr 1fr;gap:2rem}
}
@media(max-width:560px){
  .site-footer .f-cols{grid-template-columns:1fr}
}

.site-footer .f-claim{font-weight:500}

.rv-all{display:none !important}

/* Catalogus: zijbalk links, raster rechts (basisregel was verdwenen) */
.cat-layout{display:grid}
@media(min-width:901px){
  .cat-layout{
    display:grid;
    grid-template-columns:250px minmax(0,1fr);
    gap:clamp(1.8rem,3vw,3rem);
    align-items:start;
  }
  .cat-layout .cat-rail{
    position:sticky;top:calc(88px + 1.2rem);
    display:grid;gap:1.4rem;align-content:start;
  }
}

/* Filterpaneel echt verborgen zolang het dicht is */
@media(max-width:900px){
  body > .cat-rail#filters,
  .cat-layout .cat-rail#filters{visibility:hidden;pointer-events:none}
  body.mf-on > .cat-rail#filters,
  body.mf-on .cat-layout .cat-rail#filters{visibility:visible;pointer-events:auto}
}