/* ═══════════════════════════════════════════════════════
   Sign Company · design systeem "de werktekening" · site-breed
   Beeld draagt de pagina. Tanker schreeuwt, Barlow werkt,
   mono annoteert. Maatlijnen en titelblok structureren.
   Kleur = dienst: oranje/geel/roze/teal.
   ═══════════════════════════════════════════════════════ */

@font-face{font-family:'Excon';src:url('/fonts/excon-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Excon';src:url('/fonts/excon-900.woff2') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'Barlow Semi Condensed';src:url('/fonts/barlow-semi-condensed-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Barlow Semi Condensed';src:url('/fonts/barlow-semi-condensed-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Barlow Semi Condensed';src:url('/fonts/barlow-semi-condensed-800.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Supreme';src:url('/fonts/supreme-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Supreme';src:url('/fonts/supreme-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Supreme';src:url('/fonts/supreme-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Barlow';src:url('/fonts/barlow-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Barlow';src:url('/fonts/barlow-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Barlow';src:url('/fonts/barlow-600.woff2') format('woff2');font-weight:600;font-display:swap}

:root{
  --ink:#1A3752;
  --nacht:#13293E;
  --paper:#F7F4F0;
  --zwart:#141414;
  --oranje:#E57324;      /* 01 gevelreclame */
  --oranje-aa:#B5530D;
  --geel:#F0AA04;        /* 02 autobelettering */
  --roze:#D83255;        /* 03 event & promotie */
  --teal:#00BFA5;        /* 04 interieur & printerieur */
  --grijs:#4A5560;
  --lijn:rgba(26,55,82,.2);
  --lijn-zwaar:rgba(26,55,82,.45);
  --lijn-wit:rgba(247,244,240,.25);
  --wit-60:rgba(247,244,240,.65);
  --wit-85:rgba(247,244,240,.9);

  --f-disp:'Excon',sans-serif;
  --f-kop:'Barlow Semi Condensed',sans-serif;
  --f-body:'Supreme','Barlow',sans-serif;
  --f-spec:ui-monospace,'SF Mono','Cascadia Mono',Menlo,monospace;
  --t-kop:clamp(2.4rem,4.6vw,4rem);
  --t-sub:clamp(1.45rem,2.2vw,1.9rem);
  --t-lead:1.25rem;
  --t-body:1.125rem;
  --t-spec:.8125rem;

  --s-1:.5rem; --s-2:1rem; --s-3:1.5rem; --s-4:2rem;
  --s-6:3rem; --s-8:4rem; --s-12:6rem;

  --raster:1320px;
  --rand:clamp(20px,3.4vw,40px);
  --tegel:6px; /* voeg tussen beeldtegels */
  --rond:18px;   /* beelden, panelen, formulier */
  --rond-klein:12px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--f-body);font-size:var(--t-body);line-height:1.6;
  color:var(--zwart);background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}
:focus-visible{outline:3px solid var(--oranje);outline-offset:2px}
::selection{background:var(--ink);color:var(--paper)}

.raster{max-width:var(--raster);margin:0 auto;padding:0 var(--rand)}

h1,h2,h3{color:var(--ink)}
.t-disp{font-family:var(--f-disp);font-weight:900;letter-spacing:-.015em;line-height:1}
.t-kop{font-family:var(--f-disp);font-weight:900;font-size:var(--t-kop);line-height:1;letter-spacing:-.015em}
.t-sub{font-family:var(--f-kop);font-weight:700;font-size:var(--t-sub);line-height:1.15}
.lead{font-size:var(--t-lead);line-height:1.55}

.spec{font-family:var(--f-spec);font-size:var(--t-spec);letter-spacing:.01em;color:var(--grijs)}
.spec b{font-weight:600;color:var(--zwart)}

/* ── maatlijn ── */
.maatlijn{display:flex;align-items:center;gap:14px;color:var(--grijs)}
.maatlijn .tik{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;opacity:.7}
.maatlijn .ln{flex:1;height:1px;background:currentColor;opacity:.45}
.maatlijn .lbl{color:inherit;white-space:nowrap}
.maatlijn.op-nacht{color:var(--wit-60)}
.maatlijn.op-nacht .lbl b{color:var(--paper)}
.divider{padding:var(--s-2) 0 var(--s-6)}

/* ── knoppen ── */
.knop{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  font-family:var(--f-kop);font-weight:700;font-size:1.125rem;
  padding:16px 32px;background:var(--oranje);color:var(--paper);
  border:none;border-radius:999px;transition:background .18s,color .18s;cursor:pointer;
}
.knop:hover{background:var(--paper);color:var(--zwart)}
.knop.donker{background:var(--nacht);color:var(--paper)}
.knop.donker:hover{background:var(--zwart);color:#fff}
.knop .pijl{font-family:var(--f-spec);font-weight:600}

.tlink{
  font-weight:600;color:var(--ink);
  text-decoration:underline;text-decoration-thickness:1.5px;
  text-underline-offset:4px;text-decoration-color:var(--lijn-zwaar);
  transition:color .18s,text-decoration-color .18s;
}
.tlink:hover{color:var(--oranje-aa);text-decoration-color:var(--oranje-aa)}

/* ── header: licht, vertrouwd ── */
.kop-balk{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--lijn)}
.kop-balk .raster{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);padding-top:15px;padding-bottom:15px}
.kop-logo img{height:28px;width:auto}
.kop-nav{display:flex;gap:32px;font-weight:500;font-size:1rem;color:var(--zwart)}
.kop-nav a{padding:4px 0;border-bottom:1.5px solid transparent;transition:border-color .18s,color .18s}
.kop-nav a:hover{color:var(--ink);border-bottom-color:var(--oranje)}
.kop-acties{display:flex;align-items:center;gap:16px}
.kop-mail{font-family:var(--f-spec);font-size:.78rem;color:var(--grijs)}
.kop-mail:hover{color:var(--ink)}
@media (max-width:1280px){.kop-mail{display:none}}
.kop-tel{font-family:var(--f-spec);font-size:.78rem;color:var(--grijs)}
.kop-tel:hover{color:var(--ink)}
.kop-cta{font-family:var(--f-kop);font-weight:700;font-size:1rem;background:var(--oranje);color:var(--paper);padding:11px 22px;border-radius:999px;transition:background .18s}
.kop-cta:hover{background:var(--ink);color:var(--paper)}


/* ── mobiel menu (menu.js-compatibel) ── */
.menu-knop{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:10px 6px}
.menu-knop span{display:block;width:24px;height:2.5px;background:var(--ink);border-radius:2px;transition:transform .25s ease,opacity .2s}
.menu-knop[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.menu-knop[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-knop[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.mobiel-menu{display:none;flex-direction:column;border-top:1px solid var(--lijn);padding:8px var(--rand) 26px;background:var(--paper)}
.mobiel-menu.open{display:flex}
.mobiel-menu a{display:flex;align-items:center;gap:12px;padding:14px 0;font-weight:500;font-size:1.05rem;border-bottom:1px solid var(--lijn)}
.mobiel-menu .stip{width:10px;height:10px;border-radius:50%;background:var(--k,var(--oranje));flex:none}
.mobiel-menu .mob-cta{justify-content:center;margin-top:18px;background:var(--oranje);color:var(--paper);border-radius:999px;border-bottom:none;padding:15px 0;font-weight:700;font-family:var(--f-kop)}
@media (max-width:1020px){.menu-knop{display:flex}}

/* ── hero: het werk vult het scherm ── */
.hero{position:relative;background:var(--nacht);color:var(--paper);min-height:min(88vh,860px);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.hero-beeld{position:absolute;inset:0}
.hero-beeld img{width:100%;height:100%;object-fit:cover}
.hero-beeld::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(19,41,62,.88) 0%,rgba(19,41,62,.42) 38%,rgba(19,41,62,.06) 60%,rgba(19,41,62,.5) 100%);
}
.hero .raster{position:relative;z-index:2;width:100%}

.hero-blok .kicker{display:block;color:var(--wit-85);margin-bottom:var(--s-3)}
.hero-onder{padding-bottom:var(--s-8);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,660px);gap:var(--s-6);align-items:end}
.hero-blok{grid-column:2}
.hero-onder .hero-caption{grid-column:1;grid-row:1;align-self:end;justify-self:start}
.hero h1 .r1{
  display:block;font-family:var(--f-kop);font-weight:700;
  font-size:clamp(1.6rem,2.7vw,2.4rem);line-height:1.2;color:var(--paper);
}
.hero h1 .r2{
  display:block;font-family:var(--f-disp);font-weight:900;
  font-size:clamp(3rem,8.6vw,7.8rem);line-height:.96;
  letter-spacing:-.02em;color:var(--oranje);margin-top:.05em;
  text-shadow:0 2px 40px rgba(19,41,62,.4);
}
.hero-acties{margin-top:var(--s-4);display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap}
.hero-bel{color:var(--wit-85)}
.hero-bel a{font-family:var(--f-spec);font-weight:600;color:#fff;font-size:1.0625rem}
.hero-bel a:hover{color:var(--oranje)}
.hero-belofte{display:block;margin-top:var(--s-3);color:var(--wit-85);text-align:left}
.hero-belofte b{color:#fff}
.hero-caption{color:var(--wit-60);text-align:left;max-width:300px}
.hero-caption b{color:var(--paper)}

/* zegel: statisch keurmerk, gevestigd sinds 1983 */
.zegel{position:absolute;top:96px;right:var(--rand);z-index:3;width:118px;height:118px}
.zegel svg{position:absolute;inset:0;width:100%;height:100%}
.zegel svg text{font-family:var(--f-spec);font-size:10.5px;letter-spacing:.24em;fill:rgba(247,244,240,.85)}
.zegel b{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--f-disp);font-weight:900;font-size:2rem;line-height:1;color:var(--paper)}
.zegel b span{font-family:var(--f-spec);font-weight:400;font-size:.6875rem;letter-spacing:.12em;margin-top:2px;color:rgba(247,244,240,.85)}

/* legenda-strip: bewegwijzering direct onder het beeld */
.legenda{background:var(--nacht);border-top:1px solid var(--lijn-wit);display:grid;grid-template-columns:repeat(4,1fr)}
.legenda a{
  display:flex;align-items:center;gap:12px;
  padding:18px 22px;border-left:1px solid var(--lijn-wit);
  transition:background .18s;
}
.legenda a:first-child{border-left:none}
.legenda .vak{width:12px;height:12px;border-radius:50%;background:var(--k);flex:none}
.legenda .num{font-family:var(--f-spec);font-size:var(--t-spec);color:var(--wit-60)}
.legenda .naam{font-family:var(--f-kop);font-weight:700;font-size:1.0625rem;color:var(--wit-85);white-space:nowrap;transition:color .18s}
.legenda a:hover{background:rgba(247,244,240,.05)}
.legenda a:hover .naam{color:#fff}

/* ── klantenband: compact bewijs ── */
.band-klanten{padding:var(--s-6) 0;border-bottom:1px solid var(--lijn)}
.klanten-rij{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-8);align-items:center}
.klanten-zin{
  font-family:var(--f-kop);font-weight:600;
  font-size:clamp(1.25rem,1.8vw,1.55rem);line-height:1.35;color:var(--ink);
}
.klanten-zin strong{font-weight:800;color:var(--zwart)}
.logo-rij{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-3) var(--s-4);align-items:center}
.logo-rij img{height:36px;width:100%;object-fit:contain;filter:brightness(0);opacity:.7}

.klanten-trust{margin-top:var(--s-3)}
.klanten-trust b{color:var(--ink)}

/* ── secties ── */
.sectie{padding:var(--s-8) 0}
.sectie-kop{margin-bottom:var(--s-6)}
.sectie-kop .t-kop{max-width:40ch}

/* diensten op wit: rustige afwisseling paper/wit/nacht */
#diensten{background:#fff;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}

/* ── diensten: vier beeldpanelen ── */
.paneel-net{display:grid;grid-template-columns:1fr 1fr;gap:var(--tegel)}
.paneel{position:relative;display:block;height:clamp(280px,30vw,420px);overflow:hidden;background:var(--nacht);border-radius:var(--rond)}
.paneel img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.paneel:hover img{transform:scale(1.03)}
.paneel::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(19,41,62,.85) 0%,rgba(19,41,62,.25) 40%,transparent 65%)}
.paneel-tekst{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-4);
  padding:0 22px 16px 22px;
}
.paneel-naam{display:flex;align-items:baseline;gap:14px}
.paneel-naam .num{font-family:var(--f-spec);font-size:var(--t-spec);color:var(--wit-60)}
.paneel-naam .naam{font-family:var(--f-disp);font-weight:900;font-size:clamp(1.35rem,1.9vw,1.8rem);line-height:1.05;color:#fff;letter-spacing:-.01em}
.paneel .verder{font-family:var(--f-spec);font-size:.75rem;color:var(--wit-60);transition:color .18s;white-space:normal;text-align:right;max-width:46%;line-height:1.5}
.paneel:hover .verder{color:#fff}
.paneel::before{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--k);z-index:3}

/* ── conversieband ── */
.cta-band{background:var(--oranje);color:var(--zwart)}
.cta-band .raster{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;padding-top:var(--s-4);padding-bottom:var(--s-4)}
.cta-band .zin{font-family:var(--f-disp);font-weight:900;font-size:clamp(1.7rem,3vw,2.6rem);line-height:1;letter-spacing:-.01em}
.cta-band .rechts{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap}
.cta-band .bel{font-weight:600}
.cta-band .bel a{font-family:var(--f-spec);font-weight:600;border-bottom:2px solid var(--zwart)}
.cta-band .bel a:hover{color:var(--nacht)}

/* ── werkmuur ── */
.muur{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--tegel);grid-auto-rows:240px;grid-auto-flow:dense}
.tegel{position:relative;display:block;overflow:hidden;background:var(--nacht);border-radius:var(--rond-klein)}
.tegel.staand{grid-row:span 2}
.tegel img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.tegel:hover img{transform:scale(1.03)}
.tegel figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:26px 16px 12px;color:#fff;
  background:linear-gradient(to top,rgba(19,41,62,.85),transparent);
  font-family:var(--f-spec);font-size:.78rem;
  opacity:0;transition:opacity .25s;
}
.tegel:hover figcaption{opacity:1}
.tegel figcaption b{font-weight:600}
.sectie-slotlink{margin-top:var(--s-4);display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);flex-wrap:wrap}

/* ── de makers ── */
.sectie-familie{background:#fff;border-top:1px solid var(--lijn)}
.familie-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s-8);align-items:center;padding:var(--s-8) 0}
.familie-foto img{width:100%;height:auto;border-radius:var(--rond)}
.familie-foto figcaption{padding-top:12px;border-top:1px solid var(--lijn);margin-top:12px}
.familie-tekst{display:flex;flex-direction:column;gap:var(--s-3);max-width:56ch}
.familie-tekst .alinea{color:var(--grijs)}
.citaat{
  font-family:var(--f-kop);font-weight:700;font-size:var(--t-sub);line-height:1.25;
  color:var(--ink);max-width:26ch;margin:var(--s-2) 0;
  padding-left:var(--s-3);border-left:4px solid var(--oranje);border-radius:3px;
}
.feiten{display:grid;grid-template-columns:repeat(3,1fr);margin-top:var(--s-3);border:1px solid var(--lijn-zwaar);border-radius:var(--rond-klein);overflow:hidden}
.feiten>div{padding:18px 22px;border-left:1px solid var(--lijn)}
.feiten>div:first-child{border-left:none}
.feiten dt{font-family:var(--f-disp);font-weight:900;font-size:2.7rem;line-height:1;color:var(--ink)}
.feiten dd{margin-top:6px;color:var(--grijs)}

/* ── slot: aanvraag ── */
.slot{background:var(--nacht);color:var(--paper);position:relative}
.slot::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(247,244,240,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(247,244,240,.05) 1px,transparent 1px);
  background-size:72px 72px;
}
.slot .raster{position:relative}
.slot-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--s-8);align-items:start;padding-bottom:var(--s-8)}
.slot .t-kop{color:var(--paper);max-width:15ch}
.slot-tekst{display:flex;flex-direction:column;gap:var(--s-3)}
.slot-sub{color:var(--wit-85);max-width:44ch;font-size:var(--t-lead);line-height:1.5}
.slot-sub strong{color:#fff}
.slot-checks{display:flex;flex-direction:column;gap:12px;color:var(--wit-85)}
.slot-checks li{display:flex;gap:14px;align-items:baseline}
.slot-checks li::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--oranje);flex:none;transform:translateY(-1px)}
.slot-bel{margin-top:var(--s-3);color:var(--wit-60);line-height:2}
.slot-bel a{font-family:var(--f-spec);font-size:1.35rem;font-weight:600;color:#fff;border-bottom:2px solid var(--oranje);padding-bottom:3px}
.slot-bel a:hover{color:var(--oranje)}

.aanvraag{background:var(--paper);color:var(--zwart);padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-3);border-radius:var(--rond)}
.aanvraag-kop{color:var(--ink);font-family:var(--f-disp);font-weight:900;font-size:1.7rem;line-height:1;letter-spacing:-.01em}
.veld-rij{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.veld{display:flex;flex-direction:column;gap:6px}
.veld label{font-weight:500;font-size:.9375rem;color:var(--ink)}
.veld input,.veld select,.veld textarea{
  font-family:var(--f-body);font-size:1rem;padding:12px 14px;
  border:1px solid var(--lijn-zwaar);background:#fff;color:var(--zwart);
  width:100%;transition:border-color .18s,box-shadow .18s;border-radius:10px;
}
.veld input:focus,.veld select:focus,.veld textarea:focus{
  outline:none;border-color:var(--oranje-aa);box-shadow:0 0 0 3px color-mix(in srgb,var(--oranje) 25%,transparent);
}
.veld textarea{min-height:96px;resize:vertical}
.aanvraag .knop{width:100%}
.aanvraag .knop:hover{background:var(--ink);color:var(--paper)}
.aanvraag-noot{text-align:center}

/* ── footer: het titelblok ── */
footer{background:var(--nacht);color:var(--wit-85);font-size:1rem;padding-bottom:var(--s-6)}
/* footer-cta: het laatste beslismoment, op elke pagina */
.voet-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s-3) var(--s-8);padding-top:var(--s-8)}
.voet-cta .zin{font-family:var(--f-disp);font-weight:900;font-size:clamp(2rem,3.8vw,3.2rem);line-height:1;color:var(--paper)}
.voet-cta .sub{margin-top:10px;color:var(--wit-85);max-width:46ch}
.voet-cta .sub b{color:#fff}
.voet-cta .rechts{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.voet-cta .bel{color:var(--wit-60)}
@media (max-width:820px){.voet-cta{grid-template-columns:1fr}.voet-cta .rechts{align-items:flex-start}}
.voet-cta .bel a{font-weight:600;color:var(--paper);border-bottom:1.5px solid var(--oranje);padding-bottom:2px}
.voet-cta .bel a:hover{color:var(--oranje)}
.voet-route{font-family:var(--f-spec);font-size:var(--t-spec);color:var(--wit-60);border-bottom:1px solid var(--lijn-wit);padding-bottom:2px}
.voet-route:hover{color:var(--oranje);border-color:var(--oranje)}
.kleurstrip{display:flex;height:5px}
.kleurstrip span{flex:1}
.kleurstrip span:nth-child(1){background:var(--oranje)}
.kleurstrip span:nth-child(2){background:var(--geel)}
.kleurstrip span:nth-child(3){background:var(--roze)}
.kleurstrip span:nth-child(4){background:var(--teal)}
.titelblok{border:1px solid var(--lijn-wit);margin-top:var(--s-6);border-radius:var(--rond);overflow:hidden}
.tb-rij{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;border-top:1px solid var(--lijn-wit)}
.tb-rij:first-child{border-top:none}
.tb-cel{padding:18px 22px;border-left:1px solid var(--lijn-wit);display:flex;flex-direction:column;gap:10px}
.tb-cel:first-child{border-left:none}
.tb-cel .lbl{font-family:var(--f-spec);font-size:.75rem;color:var(--wit-60)}
.tb-cel.breed{grid-column:span 2}
.tb-cel .twee-kolom{display:grid;grid-template-columns:1fr 1fr;gap:4px var(--s-4)}
.tb-cel li a{display:inline-flex;align-items:center;gap:10px}
.tb-cel .vak{width:10px;height:10px;border-radius:50%;background:var(--k);flex:none}
.op-tb{color:var(--wit-60)}
.tb-spec-rij{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--lijn-wit)}
.tb-spec-cel{padding:12px 22px;border-left:1px solid var(--lijn-wit);font-family:var(--f-spec);font-size:.78rem;color:var(--wit-60)}
.tb-spec-cel:first-child{border-left:none}
.tb-spec-cel b{font-weight:600;color:var(--wit-85)}
.tb-cel p,.tb-cel li{color:var(--wit-85);line-height:1.65}
.tb-cel li{margin-bottom:4px}
.tb-cel a:hover{color:var(--oranje)}
.tb-cel .spec{color:var(--wit-85)}
.voet-logo{width:230px;max-width:100%;height:auto}
.voet-onder{display:flex;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;padding-top:var(--s-3);color:var(--wit-60);font-family:var(--f-spec);font-size:.8125rem}

/* ── responsief ── */
@media (max-width:1020px){
  .kop-nav{display:none}
  .legenda{grid-template-columns:1fr 1fr}
  .legenda a:nth-child(odd){border-left:none}
  .klanten-rij{grid-template-columns:1fr;gap:var(--s-4)}
  .muur{grid-template-columns:1fr 1fr;grid-auto-rows:220px}
  .familie-grid{grid-template-columns:1fr;gap:var(--s-6)}
  .slot-grid{grid-template-columns:1fr;gap:var(--s-6)}
  .tb-rij{grid-template-columns:1fr 1fr}
  .tb-cel{border-top:1px solid var(--lijn-wit);margin-top:-1px}
  .tb-spec-rij{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .kop-tel{display:none}
  .zegel{display:none}
  .hero{min-height:78vh}
  .hero-onder{padding-bottom:var(--s-4)}
  .hero-caption{display:none}
  .legenda a{padding:13px 14px;gap:8px}
  .legenda .naam{font-size:.9375rem;white-space:normal}
  .paneel-net{grid-template-columns:1fr}
  .muur{grid-template-columns:1fr 1fr;grid-auto-rows:170px}
  .tegel figcaption{opacity:1;font-size:.7rem;padding:18px 10px 8px}
  .cta-band .raster{flex-direction:column;align-items:flex-start}
  .veld-rij{grid-template-columns:1fr}
  .feiten{grid-template-columns:1fr}
  .feiten>div{border-left:none;border-top:1px solid var(--lijn)}
  .feiten>div:first-child{border-top:none}
  .tb-rij{grid-template-columns:1fr}
  .tb-spec-rij{grid-template-columns:1fr}
  .tb-spec-cel{border-left:none}
  .tb-cel.breed{grid-column:auto}
  .maatlijn .lbl{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
  .paneel:hover img,.tegel:hover img{transform:none}
}

/* ═══════════════════════════════════════════════════════
   COMPATIBILITEITSLAAG · herstijlt de bestaande content-
   componenten (detail-, kb-, product-, lokaal-templates)
   in de werktekening-taal, zonder markup-wijzigingen.
   ═══════════════════════════════════════════════════════ */

:root{
  /* legacy-aliassen */
  --accent:var(--oranje);
  --accent-diep:var(--oranje-aa);
  --accent-diep-licht:var(--oranje-aa);
  --ink-diep:var(--nacht);
  --kop-1:clamp(2.6rem,5vw,4.4rem);
  --kop-2:var(--t-kop);
  --kop-3:clamp(1.9rem,3vw,2.7rem);
  --dk:var(--oranje);--nt:#141414;
}
.schil{max-width:var(--raster);margin:0 auto;padding:0 var(--rand)}
.kop,h1.kop,h2.kop,h3.kop{font-family:var(--f-disp);font-weight:900;letter-spacing:-.015em;line-height:1.02;color:var(--ink)}
h1.kop{font-size:var(--kop-1)}
.pagina-hero h1,.detail-hero h1{font-family:var(--f-disp);font-weight:900;letter-spacing:-.015em;line-height:1.02;color:var(--ink);font-size:var(--kop-1)}

/* eyebrow-labels worden spec-regels */
.label{font-family:var(--f-spec);font-weight:400;font-size:var(--t-spec);letter-spacing:.01em;text-transform:lowercase;color:var(--grijs)}
.sectie-kop .label::before,.familie-tekst .label::before,.held-brow::before{display:none}

/* plak-woorden: gewoon accentkleur, geen vlak of rotatie */
em.plak,h1 em.plak,h2 em.plak{background:none!important;box-shadow:none!important;transform:none!important;padding:0!important;color:var(--oranje-aa);font-style:normal}
.slot em.plak,.band-donker em.plak,[class*="band-donker"] em.plak{color:var(--oranje)}
.plak.uitrol{animation:none!important;clip-path:none!important}
.plak .rol{display:none!important}

/* decoratie uit: stickers, lichtkrant, bulbs, reveals, tellers */
.sticker{display:none!important}
.lichtkrant,.detail-band{display:none!important}
.tint-oranje::before,.tint-geel::before,.tint-roze::before,.tint-teal::before,.vol-roze::before,.slot::after{display:none!important}
.reveal{opacity:1!important;transform:none!important;transition:none!important}
.kleurbalk{position:static;display:flex;height:4px;animation:none!important;transform:none!important}
.kleurbalk span:nth-child(1){background:var(--oranje)}
.kleurbalk span:nth-child(2){background:var(--geel)}
.kleurbalk span:nth-child(3){background:var(--roze)}
.kleurbalk span:nth-child(4){background:var(--teal)}

/* pijlknoppen: pill, vlak */
.pijlknop{font-family:var(--f-kop);font-weight:700;font-size:1.0625rem;display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border:1.5px solid transparent;border-radius:999px;position:relative;overflow:visible;transition:background .18s,color .18s,border-color .18s;text-decoration:none}
.pijlknop::before{display:none!important}
.pijlknop:hover{transform:none}
.pijlknop .pijl{width:auto;height:auto;border-radius:0;background:none!important;font-family:var(--f-spec);font-weight:600;display:inline;transition:none}
.pijlknop.vol{background:var(--oranje);color:var(--paper);box-shadow:none}
.pijlknop.vol:hover{background:var(--ink);color:var(--paper)}
.pijlknop.rand{border-color:var(--lijn-zwaar);background:transparent;color:var(--ink)}
.pijlknop.rand:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pijlknop.rand.op-donker{border-color:rgba(247,244,240,.55);color:var(--paper);background:transparent}
.pijlknop.rand.op-donker:hover{background:var(--paper);color:var(--ink)}

/* subnav-pills */
.cat-nav{position:sticky;top:67px;z-index:40;background:rgba(247,244,240,.94);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.cat-nav .schil{display:flex;gap:12px;padding-top:12px;padding-bottom:12px;overflow-x:auto;scrollbar-width:none}
.cat-link{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-kop);font-weight:600;font-size:.9375rem;padding:10px 20px;border-radius:999px;border:1px solid var(--lijn);background:#fff;white-space:nowrap;transition:border-color .18s,background .18s,color .18s;cursor:pointer}
.cat-link:hover{border-color:var(--sk,var(--oranje))}
.cat-link.actief{background:var(--sk,var(--ink));border-color:transparent;color:var(--ct,#fff);transform:none;box-shadow:none}
.cat-link.actief:hover{transform:none}
.stip{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--sk,var(--oranje));flex:none}

/* secties en hero's */
.sectie{padding:var(--s-8) 0;border-bottom:1px solid var(--lijn);position:relative;overflow:visible}
.sectie-kop{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;margin-bottom:var(--s-6)}
.sectie-kop h2{font-size:var(--t-kop)}
.sectie-intro{max-width:60ch;color:var(--grijs);margin:-24px 0 var(--s-6)}
.sectie-link{font-family:var(--f-kop);font-weight:700;font-size:1rem;display:inline-flex;align-items:center;gap:8px;border-bottom:2px solid var(--oranje);padding-bottom:3px;color:var(--ink)}
.sectie-link:hover{color:var(--oranje-aa)}
.pagina-hero{padding:var(--s-8) 0 var(--s-6)}
.pagina-hero .sub,.detail-hero .sub{margin-top:20px;max-width:56ch;font-size:var(--t-lead);color:var(--grijs);line-height:1.55}
.detail-hero{padding:var(--s-8) 0}
.detail-hero .schil{display:grid;grid-template-columns:1.02fr .98fr;gap:var(--s-8);align-items:center}
.kruimel{display:inline-flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.kruimel a{color:var(--grijs)}
.kruimel a:hover{color:var(--oranje-aa)}
.detail-checks{margin-top:24px;display:flex;flex-direction:column;gap:10px;font-weight:500}
.detail-checks li{display:flex;align-items:baseline;gap:12px}
.detail-checks .v{font-family:var(--f-spec);font-weight:600;color:var(--dk,var(--oranje-aa))}
.detail-knoppen{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}
.detail-foto{position:relative;border-radius:var(--rond);overflow:hidden;min-height:420px;height:100%}
.detail-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.detail-foto figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 20px 14px;background:linear-gradient(to top,rgba(19,41,62,.85),transparent);color:#fff;font-family:var(--f-spec);font-size:var(--t-spec)}
.foto-sticker{position:absolute;top:16px;left:16px;font-family:var(--f-kop);font-weight:700;font-size:.9375rem;padding:8px 16px;border-radius:999px;transform:none;background:var(--dk,var(--oranje));color:var(--nt,#141414);box-shadow:none}
.held-onderschrift.werkbon{transform:none;border-radius:10px;box-shadow:none}

/* dienst-kaarten */
.diensten-net{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.kaarten-net{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 20px}
.dienst{display:flex;flex-direction:column;background:#fff;border:1px solid var(--lijn);border-radius:var(--rond);padding:10px 10px 20px;transition:border-color .18s}
.dienst:hover{transform:none;box-shadow:none;border-color:var(--dk,var(--oranje))}
.dienst-foto{aspect-ratio:4/3;overflow:hidden;border-radius:var(--rond-klein);box-shadow:none}
.dienst-foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.dienst:hover .dienst-foto img{transform:scale(1.03)}
.dienst-naam{font-family:var(--f-disp);font-weight:900;font-size:1.35rem;align-self:auto;display:flex;align-items:center;gap:10px;padding:0;margin:16px 6px 0;position:static;border-radius:0;background:none;color:var(--ink);box-shadow:none;transform:none!important}
.dienst-naam::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--dk,var(--oranje));flex:none}
.dienst-tekst{padding:6px 6px 0;display:flex;flex-direction:column;gap:12px;flex:1}
.dienst-tekst p{font-size:1rem;line-height:1.55;color:var(--grijs);flex:1}
.dienst .verder{font-family:var(--f-spec);font-size:var(--t-spec);display:inline-flex;gap:8px;align-items:center;color:var(--grijs);transition:color .18s}
.dienst:hover .verder{color:var(--oranje-aa)}
.vinkjes{display:flex;flex-direction:column;gap:6px}
.vinkje{display:flex;gap:9px;align-items:baseline;font-size:.875rem;color:var(--grijs)}
.vinkje .v{font-family:var(--f-spec);font-weight:600;font-size:.8125rem;color:var(--dk,var(--oranje));flex:none}

/* projecten-tegels en muren */
.praktijk-net{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--tegel)}
.muur-net{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--tegel)}
.project{position:relative;display:block;border-radius:var(--rond-klein);overflow:hidden;background:var(--nacht)}
.praktijk-net .project{height:280px}
.project-foto{position:absolute;inset:0}
.project-foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.project:hover .project-foto img{transform:scale(1.03)}
.project-tekst{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding:44px 18px 14px;background:linear-gradient(to top,rgba(19,41,62,.88),transparent)}
.project-cat{display:flex;align-items:center;gap:8px;font-family:var(--f-spec);font-weight:400;font-size:.75rem;letter-spacing:.01em;text-transform:lowercase;color:rgba(247,244,240,.8);margin-bottom:4px}
.project-naam{font-family:var(--f-kop);font-weight:700;font-size:1.15rem;color:#fff}
.project .pijl{font-family:var(--f-spec);font-weight:600;color:rgba(247,244,240,.6)}
.project:hover .pijl{color:var(--sk,var(--oranje));transform:none}
.muur-balk{margin-bottom:var(--s-3)}
.muur-telling{font-family:var(--f-spec);font-size:var(--t-spec);color:var(--grijs)}
.project.weg{display:none}

/* verhaal, galerij, verwant (projectpagina's) */
.verhaal{max-width:64ch;display:flex;flex-direction:column;gap:18px;color:var(--grijs)}
.verhaal p:first-child{font-size:var(--t-lead);color:var(--zwart);line-height:1.5}
.galerij-net{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-flow:dense;gap:var(--tegel)}
.galerij-net figure{border-radius:var(--rond-klein);overflow:hidden;aspect-ratio:4/3;margin:0}
.galerij-net figure:first-child{grid-column:span 2;aspect-ratio:8/4.5}
.galerij-net figure.staand{grid-row:span 2;aspect-ratio:auto}
.galerij-net img{width:100%;height:100%;object-fit:cover}
.verwant-net{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--tegel)}
.verwant{position:relative;display:block;border-radius:var(--rond-klein);overflow:hidden;height:150px;background:var(--nacht)}
.verwant img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.verwant:hover img{transform:scale(1.04)}
.verwant span{position:absolute;left:0;right:0;bottom:0;padding:30px 12px 10px;background:linear-gradient(to top,rgba(19,41,62,.88),transparent);color:#fff;font-family:var(--f-kop);font-weight:700;font-size:.9rem}
.project-meta{display:flex;align-items:center;gap:9px;margin-top:14px;font-family:var(--f-spec);font-size:var(--t-spec);color:var(--grijs)}
.project-meta a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.project-meta a:hover{color:var(--oranje-aa)}

/* mat-kaarten, stappen, banden */
.mat-net{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mat{background:#fff;border:1px solid var(--lijn);border-radius:var(--rond-klein);padding:24px 22px;transition:border-color .18s}
.mat:hover{border-color:var(--oranje);transform:none}
/* een mat zonder link is geen klikdoel: geen hover-affordance */
div.mat:hover{border-color:var(--lijn)}
.mat h3{font-family:var(--f-kop);font-weight:700;font-size:1.1rem;display:flex;align-items:center;gap:10px;margin-bottom:8px;color:var(--ink)}
.mat p{font-size:.9375rem;color:var(--grijs)}
.mat p a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--oranje);text-underline-offset:3px}
.mat p a:hover{color:var(--oranje-aa)}
.mat.met-foto{padding:0;overflow:hidden;display:flex;flex-direction:column}
.mat-foto{aspect-ratio:16/10;overflow:hidden;flex:none}
.mat-foto img{width:100%;height:100%;object-fit:cover}
.mat-tekst{padding:20px 22px 24px}
.band-donker{background:var(--nacht);color:var(--paper);border-bottom:none}
.band-donker .kop,.band-donker h2,.band-donker h3{color:var(--paper)}
.band-donker .sectie-kop .label{color:var(--wit-60)}
.stappen{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.stap{background:rgba(247,244,240,.05);border:1px solid var(--lijn-wit);border-radius:var(--rond-klein);padding:26px 24px}
.stap b{font-family:var(--f-disp);font-weight:900;font-size:1.9rem;color:var(--dk,var(--oranje));display:block;line-height:1;margin-bottom:12px}
.stap h3{font-family:var(--f-kop);font-weight:700;font-size:1.1rem;margin-bottom:8px;color:var(--paper)}
.stap p{font-size:.9375rem;color:rgba(247,244,240,.78)}
.band-logos{background:var(--nacht);color:var(--paper)}
.band-logos .label{color:var(--wit-60);display:block;text-align:center;padding:15px var(--rand);border-bottom:1px solid var(--lijn-wit)}
.logo-strip{display:grid;grid-template-columns:repeat(8,1fr);gap:1px;background:var(--lijn-wit)}
.logo-cel{background:var(--nacht);display:flex;align-items:center;justify-content:center;padding:26px 16px}
.logo-cel img{height:38px;width:auto;max-width:120px;object-fit:contain;filter:brightness(0) invert(1);opacity:.8}

/* faq */
.faq{columns:2;column-gap:14px}
.faq details{background:#fff;border:1px solid var(--lijn);border-radius:var(--rond-klein);padding:0 20px;margin-bottom:14px;break-inside:avoid;transition:border-color .18s}
.faq details[open]{border-color:var(--dk,var(--oranje));box-shadow:none}
.faq summary{cursor:pointer;font-family:var(--f-kop);font-weight:700;font-size:1.02rem;padding:16px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-spec);font-weight:600;font-size:1.2rem;color:var(--oranje-aa);transition:transform .2s;flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 16px;color:var(--grijs);font-size:.9375rem;max-width:64ch}
.faq details p strong{color:var(--zwart)}
@media (max-width:900px){.faq{columns:1}}

/* legacy slot-cta */
.slot .schil{position:relative;z-index:1}
.slot h2,.slot .kop{color:var(--paper);font-family:var(--f-disp);font-weight:900;font-size:var(--t-kop);max-width:20ch}
.slot h2 em{font-style:normal;color:var(--oranje)}
.slot-sub{margin:20px 0 0;max-width:52ch;font-size:var(--t-lead);color:var(--wit-85)}
.slot-onder{margin-top:32px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.slot-bel{color:var(--wit-60)}
.slot-bel a{font-family:var(--f-spec);font-weight:600;color:#fff;border-bottom:2px solid var(--oranje);padding-bottom:2px}
.slot-bel a:hover{color:var(--oranje)}
.slot .slot-checks{margin-top:32px;display:flex;flex-direction:row;gap:26px;flex-wrap:wrap;color:var(--wit-85);font-size:.9375rem}
.slot .slot-checks li:has(.v)::before{display:none}
.slot .slot-checks .v-oud{font-family:var(--f-spec);font-weight:600;color:var(--oranje);margin-right:8px}
.midden-cta{margin-top:32px;text-align:center}
.midden-cta p{font-family:var(--f-kop);font-weight:700;font-size:1.1rem;margin-bottom:16px}

/* formulier-legacy (contact + popup) */
.aanvraag{background:var(--paper);border:1px solid var(--lijn);border-radius:var(--rond);padding:28px;display:flex;flex-direction:column;gap:14px;color:var(--zwart);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.aanvraag-kop{font-family:var(--f-disp);font-weight:900;font-size:1.6rem;color:var(--ink);display:flex;align-items:center;gap:10px}
.aanvraag-kop::before{display:none}
.veld label{font-family:var(--f-body);font-weight:500;font-size:.9375rem;letter-spacing:0;text-transform:none;color:var(--ink)}
.veld input,.veld select,.veld textarea{font-family:var(--f-body);font-size:1rem;padding:12px 14px;border:1px solid var(--lijn-zwaar);border-radius:10px;background:#fff}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:none;border-color:var(--oranje-aa);box-shadow:0 0 0 3px color-mix(in srgb,var(--oranje) 25%,transparent)}
.veld input[type=file]::file-selector-button{font-family:var(--f-kop);font-weight:700;font-size:.8125rem;margin-right:12px;padding:8px 15px;border:none;border-radius:999px;background:var(--ink);color:#fff;cursor:pointer}
.aanvraag .pijlknop{justify-content:center;border:none;cursor:pointer;width:100%}
.aanvraag-noot{font-family:var(--f-spec);font-size:var(--t-spec);color:var(--grijs);text-align:center}

/* product-slider */
.detail-foto.product-slider{aspect-ratio:1/1;min-height:0;height:auto}
.product-slider-track{display:flex;height:100%;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.product-slider-slide{flex:0 0 100%;height:100%}
.product-slider-slide img{position:static;width:100%;height:100%;object-fit:cover}
.product-slider-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.95);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:20px;color:var(--ink);z-index:3}
.product-slider-nav.prev{left:14px}
.product-slider-nav.next{right:14px}
.product-slider-dots{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:center;gap:8px;z-index:3}
.product-slider-dots button{width:8px;height:8px;border-radius:50%;border:none;background:rgba(255,255,255,.6);padding:0;cursor:pointer}
.product-slider-dots button.actief{background:#fff;transform:scale(1.3)}
.product-slider[data-count="1"] .product-slider-nav,.product-slider[data-count="1"] .product-slider-dots{display:none}

/* freesletters-proef en overige detail-interactie */
.frees3d{font-style:normal;color:var(--fk,var(--oranje))}
.demo-woord{font-family:var(--f-disp);font-weight:900;font-size:clamp(3rem,7vw,6rem);line-height:1;transform:none;text-align:center;padding:28px 0}
.dikte-demo{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--s-8);align-items:center}
.dikte-knoppen{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.dikte-knop{font-family:var(--f-kop);font-weight:700;font-size:.9375rem;padding:11px 22px;border-radius:999px;border:1px solid var(--lijn);background:#fff;cursor:pointer;transition:border-color .18s,background .18s,color .18s}
.dikte-knop:hover{border-color:var(--oranje);transform:none}
.dikte-knop.actief{background:var(--oranje);border-color:transparent;color:var(--zwart);transform:none;box-shadow:none}
.proef-groep .groep-label{font-family:var(--f-spec);font-size:.75rem;letter-spacing:.01em;text-transform:lowercase;color:var(--grijs);display:block;margin-bottom:10px}
.stalen{display:flex;gap:10px;flex-wrap:wrap}
.staal{width:34px;height:34px;border-radius:50%;border:3px solid #fff;background:var(--sw);cursor:pointer;box-shadow:0 0 0 1.5px var(--lijn)}
.staal.actief{box-shadow:0 0 0 2.5px var(--ink)}
.demo-hint{text-align:center;font-family:var(--f-spec);font-size:var(--t-spec);color:var(--grijs);margin-top:6px}

/* responsief (compat) */
@media (max-width:1020px){
  .diensten-net{grid-template-columns:1fr 1fr}
  .kaarten-net{grid-template-columns:1fr 1fr}
  .detail-hero .schil{grid-template-columns:1fr;gap:var(--s-6)}
  .detail-foto{min-height:340px}
  .mat-net{grid-template-columns:1fr 1fr}
  .stappen{grid-template-columns:1fr}
  .praktijk-net,.muur-net{grid-template-columns:1fr 1fr}
  .verwant-net{grid-template-columns:repeat(3,1fr)}
  .galerij-net{grid-template-columns:1fr 1fr}
  .logo-strip{grid-template-columns:repeat(4,1fr)}
  .dikte-demo{grid-template-columns:1fr}
  .cat-nav{top:63px}
}
@media (max-width:640px){
  .diensten-net,.kaarten-net,.mat-net,.praktijk-net,.muur-net{grid-template-columns:1fr}
  .verwant-net{grid-template-columns:1fr 1fr}
  .verwant{height:130px}
  .galerij-net{grid-template-columns:1fr}
  .galerij-net figure:first-child{grid-column:auto;aspect-ratio:4/3}
  .logo-strip{grid-template-columns:1fr 1fr}
  .praktijk-net .project{height:250px}
  .faq{columns:1}
}

/* ── dienst-template: nacht-hero + secties voor /oplossingen/ ── */
.hero-dienst{min-height:0;display:block;padding:var(--s-4) 0 var(--s-8)}
.hero-dienst::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(247,244,240,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(247,244,240,.045) 1px,transparent 1px);background-size:72px 72px}
.hero-dienst .raster{position:relative;z-index:1}
.hero-dienst .kruimel{color:var(--wit-60);margin-bottom:0}
.hero-dienst .kruimel a{color:var(--wit-60)}
.hero-dienst .kruimel a:hover{color:var(--paper)}
.hero-net{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--s-6) var(--s-8);align-items:center;margin-top:var(--s-4)}
.hero-dienst h1{font-family:var(--f-disp);font-weight:900;font-size:clamp(2.5rem,4.6vw,4.1rem);line-height:1.02;letter-spacing:-.015em;color:var(--paper)}
.hero-dienst h1 em{font-style:normal;color:var(--oranje)}
.hero-lead{margin-top:20px;max-width:52ch;font-size:var(--t-lead);line-height:1.55;color:var(--wit-85)}
.hero-checks{margin-top:24px;display:flex;flex-direction:column;gap:10px;color:var(--wit-85);font-weight:500}
.hero-checks li{display:flex;gap:13px;align-items:baseline}
.hero-checks li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--dk,var(--oranje));flex:none;transform:translateY(-1px)}
.hero-foto{min-height:400px;height:100%}
.hero-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.t-kop em{font-style:normal;color:var(--oranje-aa)}
.band-donker .t-kop em,.slot .t-kop em{color:var(--oranje)}
@media (max-width:1020px){.hero-net{grid-template-columns:1fr}.hero-foto{min-height:340px}}
@media (max-width:640px){.hero-foto{min-height:260px}.hero-dienst h1{font-size:clamp(2.1rem,8.6vw,2.6rem)}}

/* popup (menu.js) in de nieuwe taal */
.skip{position:fixed;left:16px;top:-60px;z-index:200;background:var(--ink);color:#fff;padding:10px 18px;border-radius:0 0 10px 10px;font-family:var(--f-kop);font-weight:700;font-size:14px;transition:top .2s}
.skip:focus{top:0}
.popup-laag{position:fixed;inset:0;z-index:120;display:none;align-items:flex-start;justify-content:center;padding:4vh 18px;background:rgba(19,41,62,.65);overflow-y:auto}
.popup-laag.aan{display:flex}
body.popup-open{overflow:hidden}
.popup-venster{max-width:600px;width:100%;position:relative;margin:auto 0}
.popup-venster.aanvraag{padding:30px 28px 26px}
.popup-sluit{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;border:1px solid var(--lijn);background:#fff;cursor:pointer;font-size:17px;line-height:1;color:var(--ink);z-index:2}
.popup-sluit:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.popup-balk{display:flex;height:5px;border-radius:3px;overflow:hidden;margin-bottom:14px}
.popup-balk span{flex:1}
.popup-balk span:nth-child(1){background:var(--oranje)}
.popup-balk span:nth-child(2){background:var(--geel)}
.popup-balk span:nth-child(3){background:var(--roze)}
.popup-balk span:nth-child(4){background:var(--teal)}
.popup-kop-rij{display:flex;align-items:center;gap:14px}
.popup-gezicht{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none}
.popup-sub{color:var(--grijs);font-size:.9375rem;margin-top:2px}
.popup-checks{display:flex;gap:16px;flex-wrap:wrap;font-size:.8125rem;color:var(--grijs);margin-top:4px}
.popup-checks .v{font-family:var(--f-spec);font-weight:600;color:var(--oranje-aa);margin-right:6px}
.popup-bel{text-align:center;font-size:.9375rem;color:var(--grijs)}
.popup-bel a{font-family:var(--f-spec);font-weight:600;color:var(--ink)}
.popup-bel a:hover{color:var(--oranje-aa)}

/* kennisbank-relatiekaarten en feedback */
.kb-rel-net{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.kb-rel-kaart{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--lijn);border-radius:var(--rond-klein);padding:20px;transition:border-color .18s}
.kb-rel-kaart:hover{border-color:var(--oranje)}
.kb-rel-cat{font-family:var(--f-spec);font-size:.75rem;text-transform:lowercase;color:var(--grijs)}
.kb-rel-titel{font-family:var(--f-kop);font-weight:700;font-size:1.05rem;color:var(--ink);line-height:1.3}
.kb-rel-kaart .verder{font-family:var(--f-spec);font-size:var(--t-spec);color:var(--grijs);margin-top:auto}
.kb-rel-kaart:hover .verder{color:var(--oranje-aa)}
@media (max-width:900px){.kb-rel-net{grid-template-columns:1fr}}

/* ── smoel-upgrade: subpagina's krijgen het homepage-karakter ── */
/* nacht-hero's */
.detail-hero,.pagina-hero,.contact-hero{background:var(--nacht);color:var(--paper);border-bottom:none;position:relative;overflow:hidden}
.detail-hero::after,.pagina-hero::after,.contact-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(247,244,240,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(247,244,240,.045) 1px,transparent 1px);background-size:72px 72px}
.detail-hero .schil,.pagina-hero .schil,.contact-hero .schil{position:relative;z-index:1}
.detail-hero h1,.pagina-hero h1,.contact-hero h1,.detail-hero .kop,.pagina-hero .kop{color:var(--paper)}
.detail-hero h1 em.plak,.pagina-hero h1 em.plak,.contact-hero h1 em.plak{color:var(--oranje)}
.detail-hero .sub,.pagina-hero .sub,.contact-hero .sub{color:var(--wit-85)}
.detail-hero .label,.pagina-hero .label,.contact-hero .label,
.detail-hero .kruimel,.detail-hero .kruimel a,.contact-hero .kruimel,.contact-hero .kruimel a{color:var(--wit-60)}
.detail-hero .kruimel a:hover,.contact-hero .kruimel a:hover{color:var(--paper)}
.detail-hero .detail-checks,.contact-hero .detail-checks{color:var(--wit-85)}
.detail-hero .detail-checks .v,.contact-hero .detail-checks .v{color:var(--oranje)}
.detail-hero .pijlknop.rand,.pagina-hero .pijlknop.rand,.contact-hero .pijlknop.rand{border-color:rgba(247,244,240,.55);color:var(--paper);background:transparent}
.detail-hero .pijlknop.rand:hover,.pagina-hero .pijlknop.rand:hover,.contact-hero .pijlknop.rand:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.detail-hero .sectie-kop h2,.pagina-hero .sectie-kop h2{color:var(--paper)}
.pagina-hero .sectie-intro{color:var(--wit-85)}
.contact-hero::before{display:none!important}
.detail-hero .project-meta,.detail-hero .project-meta a{color:var(--wit-85)}

/* maatlijn-divider uit de bestaande labels */
.sectie-kop{display:block;margin-bottom:var(--s-6)}
.sectie-kop .label{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.sectie-kop .label::before,.sectie-kop .label::after{content:"";flex:1;height:1px;background:var(--lijn-zwaar);opacity:.55}
.detail-hero .sectie-kop .label::before,.detail-hero .sectie-kop .label::after,
.pagina-hero .sectie-kop .label::before,.pagina-hero .sectie-kop .label::after,
.band-donker .sectie-kop .label::before,.band-donker .sectie-kop .label::after{background:var(--lijn-wit);opacity:1}
.sectie-kop .sectie-link{margin-top:10px;display:inline-flex}

/* rustiger sectieritme + blauwdruk in donkere banden */
.sectie{border-bottom:none}
.band-donker{position:relative;overflow:hidden}
.band-donker::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(247,244,240,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(247,244,240,.045) 1px,transparent 1px);background-size:72px 72px}
.band-donker .schil{position:relative;z-index:1}

/* ═══════════════════════════════════════════════════════
   UITROL-RONDE · producten, lokaal, over-ons, contact,
   bedankt/404 in de werktekening-taal.
   ═══════════════════════════════════════════════════════ */

/* nacht-hero: kruimel/checks/links ook op pagina-hero */
.pagina-hero .kruimel,.pagina-hero .kruimel a{color:var(--wit-60)}
.pagina-hero .kruimel a:hover{color:var(--paper)}
.pagina-hero .detail-checks{color:var(--wit-85)}
.pagina-hero .detail-checks .v{color:var(--oranje)}
.detail-hero .sub a,.pagina-hero .sub a{color:#fff;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.detail-hero .sub a:hover,.pagina-hero .sub a:hover{color:var(--oranje)}
.contact-hero .schil{align-items:start}

/* werkbon-caption op de product-slider vrij van de dots */
.detail-foto.product-slider figcaption{padding:56px 20px 34px}

/* producten-hub: kaarten als beeldtegels */
.produkt-muur{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--tegel)}
.produkt-muur .dienst{position:relative;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:var(--nacht);border:none;border-radius:var(--rond-klein);padding:0;aspect-ratio:1/1.06}
.produkt-muur .dienst-foto{position:absolute;inset:0;aspect-ratio:auto;border-radius:0}
.produkt-muur .dienst-foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.produkt-muur .dienst:hover .dienst-foto img{transform:scale(1.03)}
.produkt-muur .dienst::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(19,41,62,.88) 0%,rgba(19,41,62,.3) 45%,transparent 70%)}
.produkt-muur .dienst-naam{position:relative;z-index:2;margin:0 16px 2px;color:#fff;font-size:1.15rem}
.produkt-muur .dienst-naam::before{display:none}
.produkt-muur .dienst-tekst{position:relative;z-index:2;padding:0 16px 13px;gap:6px;flex:none}
.produkt-muur .dienst-tekst p{color:var(--wit-85);font-size:.875rem;line-height:1.45;flex:none;opacity:0;transition:opacity .25s}
.produkt-muur .dienst:hover .dienst-tekst p{opacity:1}
.produkt-muur .verder{color:var(--wit-60)}
.produkt-muur .dienst:hover .verder{color:#fff}
@media (max-width:1020px){.produkt-muur{grid-template-columns:repeat(2,1fr)}.produkt-muur .dienst-tekst p{opacity:1}}
@media (max-width:640px){.produkt-muur{grid-template-columns:1fr}.produkt-muur .dienst{aspect-ratio:4/3.4}}

/* over-ons: tijdlijn als werkbon-prints, zonder rotaties */
.tijdlijn{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4) 14px}
.moment{margin:0}
.moment .jaar{display:block;margin-bottom:10px}
.moment img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--rond-klein)}
.moment figcaption{padding-top:12px;margin-top:12px;border-top:1px solid var(--lijn);font-family:var(--f-spec);font-size:var(--t-spec);letter-spacing:.01em;color:var(--grijs);line-height:1.6}
.nu-vlak{aspect-ratio:1;border-radius:var(--rond-klein);background:var(--nacht);display:grid;place-items:center;text-align:center;padding:18px;position:relative;overflow:hidden}
.nu-vlak::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(247,244,240,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(247,244,240,.05) 1px,transparent 1px);background-size:36px 36px}
.nu-vlak p{position:relative;font-family:var(--f-disp);font-weight:900;font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.2;letter-spacing:-.01em;color:var(--paper);max-width:11ch}
.nu-vlak em{font-style:normal;color:var(--oranje)}
.moment-nu figcaption a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.moment-nu figcaption a:hover{color:var(--oranje-aa)}
.tijdlijn+.feiten{margin-top:var(--s-6)}
.feiten.vier{grid-template-columns:repeat(4,1fr)}

/* over-ons: team als beeldtegels met werkbon-rol */
.team-net{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--tegel)}
.lid{position:relative;margin:0;border-radius:var(--rond-klein);overflow:hidden;background:var(--nacht);aspect-ratio:5/6}
.lid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.lid:hover img{transform:scale(1.03)}
.lid-tekst{position:absolute;left:0;right:0;bottom:0;padding:46px 16px 13px;background:linear-gradient(to top,rgba(19,41,62,.88),transparent)}
.lid-rol{display:block;font-family:var(--f-spec);font-size:.75rem;letter-spacing:.01em;text-transform:lowercase;color:var(--wit-60);margin-bottom:3px}
.lid-tekst h3{font-family:var(--f-kop);font-weight:700;font-size:1.1rem;color:#fff}
.team-onder{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-8);align-items:center;margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--lijn)}

/* over-ons: redenen als stappen-cellen 2x2 */
.redenen-net{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.redenen-net .vinkjes{margin-top:14px}
.redenen-net .vinkje{color:rgba(247,244,240,.75)}

/* contact: gegevens als titelblok-cellen */
.gegevens-net{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--lijn-zwaar);border-radius:var(--rond-klein);overflow:hidden}
.gegevens-net .gegeven{padding:20px 22px;border-left:1px solid var(--lijn);display:flex;flex-direction:column;gap:8px}
.gegevens-net .gegeven:first-child{border-left:none}
.gegeven .lbl{font-family:var(--f-spec);font-size:.75rem;letter-spacing:.01em;text-transform:lowercase;color:var(--grijs)}
.gegeven b{display:block;font-family:var(--f-kop);font-weight:700;font-size:1.05rem;color:var(--ink);margin-bottom:2px}
.gegeven p{font-size:.9375rem;color:var(--grijs);line-height:1.6}
.gegeven a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--lijn-zwaar);text-underline-offset:3px}
.gegeven a:hover{color:var(--oranje-aa)}

.veld-optie{font-family:var(--f-spec);font-size:.75rem;font-weight:400;color:var(--grijs);margin-left:6px}

/* bedankt: foutmelding + ok-onderdelen */
.fout-melding{background:#fff;border:1.5px solid var(--roze);border-radius:var(--rond-klein);padding:18px 22px;margin-bottom:30px;max-width:56ch}
.fout-melding p{font-size:.9375rem;color:var(--grijs)}
.fout-melding strong{color:var(--ink)}
.fout-melding a{font-weight:700;color:var(--ink);border-bottom:2px solid var(--oranje)}
body.fout .alleen-ok{display:none}

@media (max-width:1020px){
  .tijdlijn{grid-template-columns:1fr 1fr}
  .team-net{grid-template-columns:1fr 1fr}
  .team-onder{grid-template-columns:1fr;gap:var(--s-4)}
  .redenen-net{grid-template-columns:1fr}
  .gegevens-net{grid-template-columns:1fr 1fr}
  .gegevens-net .gegeven{border-top:1px solid var(--lijn);margin-top:-1px}
}
@media (max-width:640px){
  .tijdlijn{grid-template-columns:1fr}
  .feiten.vier{grid-template-columns:1fr 1fr}
  .gegevens-net{grid-template-columns:1fr}
  .gegevens-net .gegeven{border-left:none}
}

/* ── oplossingen-keuzepagina: hero-keuzepanelen + dicht keuzeraster ── */
.hero-opl .kicker{color:var(--wit-60)}
.hero-opl h1{margin-top:var(--s-4)}
.hero-opl .hero-lead{max-width:62ch}
.hero-keuze{margin-top:var(--s-6)}
.hero-keuze .paneel{height:clamp(190px,20vw,280px)}
.keuze-net{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.keuze{display:flex;flex-direction:column;background:#fff;border:1px solid var(--lijn);border-radius:var(--rond-klein);padding:8px 8px 16px;transition:border-color .18s}
.keuze:hover{border-color:var(--dk,var(--oranje))}
.keuze-foto{aspect-ratio:16/10;overflow:hidden;border-radius:8px}
.keuze-foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.keuze:hover .keuze-foto img{transform:scale(1.03)}
.keuze-naam{font-family:var(--f-disp);font-weight:900;font-size:1.2rem;letter-spacing:-.01em;line-height:1.1;color:var(--ink);display:flex;align-items:center;gap:10px;margin:13px 8px 0}
.keuze-naam::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--dk,var(--oranje));flex:none}
.keuze-spec{font-family:var(--f-spec);font-size:.78rem;letter-spacing:.01em;color:var(--grijs);line-height:1.55;margin:6px 8px 0 27px}
@media (max-width:1020px){.keuze-net{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
  .keuze-net{grid-template-columns:1fr 1fr;gap:10px}
  .keuze-naam{font-size:1rem;gap:8px}
  .keuze-spec{margin-left:8px;font-size:.72rem}
  .hero-keuze .paneel{height:150px}
}

/* archief-muur (over-ons): 5 kolommen, altijd zichtbare captions */
.archief-muur{grid-template-columns:repeat(5,1fr);grid-auto-rows:190px}
.archief-muur .tegel figcaption{opacity:1}
@media (max-width:1020px){.archief-muur{grid-template-columns:repeat(3,1fr);grid-auto-rows:170px}}
@media (max-width:640px){.archief-muur{grid-template-columns:1fr 1fr;grid-auto-rows:150px}}

/* popup-versterking */
.popup-venster{max-width:640px}
.popup-gezicht{width:64px;height:64px}
.popup-kop-rij .aanvraag-kop{font-size:1.8rem}
.popup-belofte{font-family:var(--f-spec);font-size:var(--t-spec);color:var(--grijs);margin-top:4px}
.popup-belofte b{font-weight:600;color:var(--zwart)}
.popup-sub{margin-top:2px}
.popup-spec{font-family:var(--f-spec);font-size:var(--t-spec);color:var(--grijs);text-align:center}
.kop-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--oranje)}

/* ── homepage-hero v2: statement op het grid, beeld als paneel ── */
.hero-thuis{display:block;min-height:0;padding:calc(var(--s-8) + 12px) 0 var(--s-8)}
.hero-thuis::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(247,244,240,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(247,244,240,.045) 1px,transparent 1px);background-size:72px 72px}
.hero-grid2{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-8);align-items:center;width:100%}
.hero-thuis .hero-blok{grid-column:auto;max-width:none}
.hero-thuis h1 .r1{font-size:clamp(1.7rem,2.9vw,2.6rem)}
.hero-thuis h1 .r2{font-size:clamp(3.4rem,7.2vw,7rem);line-height:.94;text-shadow:none}
.hero-thuis .hero-acties{margin-top:var(--s-6)}
.hero-paneel{position:relative;border-radius:var(--rond);overflow:visible}
.hero-paneel img{width:100%;height:clamp(400px,52vh,560px);object-fit:cover;border-radius:var(--rond)}
.hero-paneel figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 20px 14px;border-radius:0 0 var(--rond) var(--rond);background:linear-gradient(to top,rgba(19,41,62,.85),transparent);color:var(--wit-85)}
.hero-paneel figcaption b{color:#fff}
.hero-paneel .zegel{top:-34px;right:-26px}
@media (max-width:1020px){
  .hero-grid2{grid-template-columns:1fr;gap:var(--s-6)}
  .hero-paneel img{height:52vw;max-height:420px}
  .hero-paneel .zegel{top:-24px;right:6px}
}

/* hero-signatuur: maatlijn meet de kop op + rustige entree */
.hero-thuis .maatlijn{margin:var(--s-4) 0 0;max-width:520px}
.hero-thuis .hero-acties{margin-top:var(--s-4)}
@keyframes sc-op{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes sc-lijn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero-thuis h1 .r1{animation:sc-op .6s cubic-bezier(.2,.7,.2,1) .05s both}
.hero-thuis h1 .r2{animation:sc-op .6s cubic-bezier(.2,.7,.2,1) .18s both}
.hero-thuis .maatlijn .ln:first-of-type{transform-origin:left;animation:sc-lijn .6s cubic-bezier(.2,.7,.2,1) .5s both}
.hero-thuis .maatlijn .ln:last-of-type{transform-origin:right;animation:sc-lijn .6s cubic-bezier(.2,.7,.2,1) .5s both}
.hero-thuis .maatlijn .tik,.hero-thuis .maatlijn .lbl{animation:sc-op .5s ease .95s both}
.hero-thuis .hero-acties{animation:sc-op .6s cubic-bezier(.2,.7,.2,1) .35s both}
.hero-thuis .hero-paneel{animation:sc-op .7s cubic-bezier(.2,.7,.2,1) .15s both}

/* mobiele belbalk */
.belbalk{display:none}
@media (max-width:900px){
  .belbalk{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:1px;background:var(--lijn);border-top:1px solid var(--lijn);padding-bottom:env(safe-area-inset-bottom)}
  .belbalk a{flex:1;display:flex;align-items:center;justify-content:center;padding:15px 10px;font-family:var(--f-kop);font-weight:700;font-size:1rem}
  .bb-bel{background:var(--nacht);color:var(--paper)}
  .bb-offerte{background:var(--oranje);color:var(--zwart)}
  body{padding-bottom:54px}
  body.popup-open .belbalk{display:none}
}

/* google-score */
.ster{color:var(--geel);font-weight:400}

/* strakke mobiele header */
@media (max-width:640px){
  .kop-balk .raster{padding-top:10px;padding-bottom:10px;gap:12px}
  .kop-logo img{height:21px}
  .kop-acties{gap:10px}
  .kop-cta{padding:9px 14px;font-size:0}
  .kop-cta::after{content:"Offerte";font-size:.9375rem;color:var(--zwart);font-weight:700}
  .menu-knop{padding:8px 2px}
  .menu-knop span{width:22px}
}

/* hero full-width: beeld vult, tekst rechts in de lucht */
.hero-vol{display:flex;align-items:center;min-height:min(86vh,820px);padding:var(--s-8) 0}
.hero-vol .hero-beeld{position:absolute;inset:0}
.hero-vol .hero-beeld img{width:100%;height:100%;object-fit:cover;border-radius:0}
.hero-vol .hero-beeld::after{content:"";position:absolute;inset:0;background:linear-gradient(to left,rgba(19,41,62,.78) 0%,rgba(19,41,62,.45) 42%,rgba(19,41,62,.06) 70%)}
.hero-vol::after{display:none}
.hero-vol .raster{position:relative;z-index:2;width:100%}
.hero-vol .hero-blok{max-width:640px;margin-left:auto}
.hero-vol .zegel{position:absolute;top:40px;right:var(--rand);z-index:3}
@media (max-width:900px){
  .hero-vol .hero-blok{margin-left:0}
  .hero-vol .hero-beeld::after{background:linear-gradient(to top,rgba(19,41,62,.85) 0%,rgba(19,41,62,.45) 60%,rgba(19,41,62,.2) 100%)}
}

/* hero-tekst opvallender */
.hero-vol .hero-blok{max-width:760px}
.hero-vol h1 .r1{font-size:clamp(2rem,3.3vw,3.1rem);font-weight:800;text-shadow:0 2px 24px rgba(19,41,62,.5)}
.hero-vol h1 .r2{font-size:clamp(3.8rem,8.8vw,8.6rem);line-height:.92;text-shadow:0 4px 34px rgba(19,41,62,.55)}
.hero-vol .hero-beeld::after{background:linear-gradient(to left,rgba(19,41,62,.85) 0%,rgba(19,41,62,.55) 40%,rgba(19,41,62,.08) 72%)}
.hero-vol .hero-acties{margin-top:var(--s-5,28px)}
.hero-vol .knop{font-size:1.1875rem;padding:18px 34px}

/* zegel rechtsbovenin opvallender */
.hero-vol .zegel{width:148px;height:148px;top:34px}
.hero-vol .zegel svg circle{stroke:rgba(247,244,240,.8)}
.hero-vol .zegel svg text{fill:rgba(247,244,240,.95);font-size:11px}
.hero-vol .zegel b{font-size:2.5rem;color:var(--oranje)}
.hero-vol .zegel b span{color:var(--paper)}

/* gezicht bij de belofte (boven de vouw) */
.hero-trust{display:flex;align-items:center;gap:12px;margin-top:var(--s-3)}
.hero-trust img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid rgba(247,244,240,.65);flex:none}
.hero-trust .spec{color:var(--wit-85)}
.hero-trust .spec b{color:#fff}
.hero-trust .ster{color:var(--geel)}
/* vierkleuren-draad boven diensten */
#diensten{position:relative}
#diensten::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--oranje) 0 25%,var(--geel) 0 50%,var(--roze) 0 75%,var(--teal) 0)}


/* footer zonder vakjes: open kolommen */
.titelblok{border:none;border-radius:0;overflow:visible;margin-top:var(--s-6);border-top:1px solid var(--lijn-wit);padding-top:var(--s-6)}
.tb-rij{border-top:none}
.tb-rij + .tb-rij{margin-top:var(--s-4)}
.tb-cel{border:none!important;padding:0 24px 0 0;margin-top:0}
.voet-onder{border-top:1px solid var(--lijn-wit);margin-top:var(--s-6);padding-top:var(--s-3)}
@media (max-width:1020px){.tb-cel{padding:0;margin-bottom:var(--s-3)}}

/* feiten zonder vakjes: open cijfers boven een hairline */
.feiten{border:none;border-radius:0;overflow:visible;border-top:1px solid var(--lijn-zwaar);padding-top:var(--s-3);gap:var(--s-4)}
.feiten>div{border:none!important;padding:0}