/* =========================================================
   Boyke Dakwerken – homepage
   ========================================================= */

:root{
  --rood:      #e7141b;   /* uit het logo                          */
  --rood-diep: #c20f15;   /* hover op rood                         */
  --ink:       #1b1e20;   /* bijna zwart: tekst en donkere vlakken */
  --donker:    #26292c;   /* donkere banden (usp-balk, contact)    */
  --dieper:    #141618;   /* footer                                */
  --groen:     #2fb16d;   /* alleen de WhatsApp-knop               */
  --light:     #f1f1f1;   /* tekst op een foto                     */
  --vlak:      #f4f3f1;   /* lichte sectie-achtergrond, warm       */
  --grijs:     #6a7075;   /* gedempte tekst op licht               */
  --grijs-op-donker: rgba(255,255,255,.66);
  --lijn:      #e3e1de;
  --container: 1320px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:Poppins,sans-serif;
  font-size:16px;
  font-weight:500;
  line-height:1.6;
  color:var(--ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--ink); text-decoration:none; }
ul{ margin:0 0 1.3em; padding:0; }
p{ margin:0 0 1.3em; }
h1,h2,h4{ margin:0; font-weight:600; color:var(--ink); }
/* de bedrijfsnaam bevat lange woorden ("Vastgoedonderhoud"); op smalle schermen
   moet een kop kunnen afbreken in plaats van buiten beeld te lopen */
h1,h2,h3{ overflow-wrap:break-word; }
@media (max-width:400px){
  .paginakop h1,.gegevens-kop h2{ hyphens:auto; }
}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 15px;
}
.flex-row{ display:flex; align-items:center; }
.flex-col{ position:relative; }
.flex-left{ margin-right:auto; }
.flex-right{ margin-left:auto; }
.fill{ position:absolute; inset:0; }
.text-center{ text-align:center; }
.mobile-only{ display:none; }

/* ---------- knoppen ---------- */
.button{
  display:inline-block;
  position:relative;
  margin:0 14px 14px 0;
  padding:7px 30px;
  border:0;
  border-radius:99px;
  font-family:Poppins,sans-serif;
  font-size:14px;
  font-weight:600;
  line-height:33.6px;
  letter-spacing:.42px;
  text-align:center;
  color:#fff;
  background-color:var(--rood);
  max-width:100%;
  cursor:pointer;
  transition:opacity .2s, transform .2s, box-shadow .2s;
}
.button span{ display:block; }
.button.primary{ background-color:var(--ink); }
.button:hover{ opacity:.92; box-shadow:0 5px 14px rgba(0,0,0,.28); }

/* =========================================================
   TOP BAR
   ========================================================= */
#top-bar{
  position:relative;
  display:flex;
  align-items:center;
  height:40px;
  background-color:var(--ink);
}
#top-bar .container{ display:flex; align-items:center; justify-content:space-between; }

#top-bar .nav{
  display:flex;
  align-items:center;
  list-style:none;
  margin:0;
  padding:0;
}
#top-bar .nav-right{ justify-content:flex-end; }
#top-bar .nav > li{ position:relative; display:flex; align-items:center; margin:0 .7em; }
#top-bar .nav > li:first-child{ margin-left:0; }
#top-bar .nav > li:last-child{ margin-right:0; }

#top-bar .nav a{
  display:inline-flex;
  align-items:center;
  padding:5px 0;
  font-size:12.8px;
  font-weight:400;
  line-height:1.6;
  color:rgba(255,255,255,.8);
  transition:color .2s;
}
#top-bar .header-contact a{ letter-spacing:.256px; }
#top-bar .nav a:hover{ color:#fff; }

/* scheidingsstreepjes tussen de items */
#top-bar .nav-divided > li + li > a::after{
  content:"";
  position:absolute;
  top:50%;
  left:-1em;
  width:1px;
  height:15px;
  margin-top:-7px;
  border-left:1px solid rgba(255,255,255,.2);
}

#top-bar .icon{
  display:block;
  width:18px;
  height:21.1875px;
  margin-right:5px;
  background-repeat:no-repeat;
  background-position:0 0;
  background-size:18px 18px;
  flex:0 0 auto;
}
#top-bar .icon-mail { background-image:url(../icons/mail.svg); }
#top-bar .icon-phone{ background-image:url(../icons/phone.svg); }

/* =========================================================
   MASTHEAD / NAVBAR
   ========================================================= */
#header{ position:relative; z-index:30; }
.header-wrapper{ position:relative; }

#masthead{
  position:relative;
  height:110px;
  background:#faf9f8;
}
#masthead .header-inner{ height:110px; }

#logo{
  width:auto;
  margin-right:30px;
  flex:0 0 auto;
  line-height:1;
}
#logo a{ display:block; }
#logo img{
  width:auto;
  height:62px;              /* + 24px marge boven/onder = 110px kophoogte */
  padding:24px 0;
  box-sizing:content-box;
}

.header-nav-main{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  list-style:none;
  margin:0;
  padding:0;
}
.header-nav-main > li{ position:relative; margin:0 13px; }
.header-nav-main > li:last-child{ margin-right:0; }

.header-nav-main > li > a.nav-top-link{
  display:inline-flex;
  align-items:center;
  padding:10px 0;
  font-size:14.4px;
  font-weight:500;
  line-height:16px;
  letter-spacing:.288px;
  color:var(--ink);
  transition:color .2s;
}
.header-nav-main > li.active > a.nav-top-link{ color:#000; }
.header-nav-main > li > a.nav-top-link:hover{ color:var(--rood); }

.header-nav-main .icon-angle-down{
  display:block;
  width:10.5781px;
  height:19.1875px;
  margin-left:3.2px;
  opacity:.6;
  background-repeat:no-repeat;
  background-position:0 0;
  background-size:10.5781px 19.1875px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10.58 19.19'%3E%3Cpath d='M0.95 7.35 L5.29 11 L9.63 7.35' fill='none' stroke='%2313283c' stroke-width='1.5'/%3E%3C/svg%3E");
}

.header-nav-main .header-button-1{ margin-left:13px; margin-right:0; }
/* de knop in de kop is bijna zwart; rood blijft voor de call-to-actions
   in de secties zelf */
.header-nav-main .header-button-1 .button{ margin:0; background-color:var(--ink); }
.header-nav-main .header-button-1 .button:hover{ background-color:#000; }

/* dropdown */
.header-nav-main .sub-menu{
  position:absolute;
  top:100%;
  left:-15px;
  z-index:40;
  width:260px;
  margin:0;
  padding:20px;
  list-style:none;
  background:#fff;
  border-radius:10px;
  box-shadow:1px 1px 15px rgba(0,0,0,.15);
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .2s, transform .2s, visibility .2s;
}
.header-nav-main > li.has-dropdown:hover > .sub-menu{
  opacity:1; visibility:visible; transform:translateY(0);
}
.header-nav-main .sub-menu > li{ padding:0 10px; }
.header-nav-main .sub-menu > li > a{
  display:block;
  padding:10px 0;
  border-bottom:1px solid #eceae7;
  font-size:16px;
  font-weight:500;
  line-height:20.8px;
  color:#5c6165;
  transition:color .2s;
}
.header-nav-main .sub-menu > li:last-child > a{ border-bottom:0; }
.header-nav-main .sub-menu > li > a:hover{ color:var(--ink); }

/* hamburger (alleen mobiel) */
.nav-icon{
  width:26px; height:20px;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:0; border:0; background:none; cursor:pointer;
}
.nav-icon span{ display:block; height:2px; background:var(--ink); border-radius:2px; }

/* sticky-jump kop */
body.sticky-on #masthead{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  box-shadow:0 0 10px rgba(0,0,0,.1);
  animation:stickyJump .3s;
}
@keyframes stickyJump{ from{ transform:translateY(-100%);} to{ transform:translateY(0);} }

/* =========================================================
   HERO BANNER
   ========================================================= */
.banner{
  position:relative;
  width:100%;
  padding-top:740px;   /* hoogte van de banner: hoog genoeg voor de offertewizard */
}
.banner-inner{ position:absolute; inset:0; }
.banner-bg{ overflow:hidden; }
.banner .bg{
  background-image:url(../img/hero.jpg);
  background-size:cover;
  background-position:35% 20%;   /* staande foto: dit kadert op het dak in renovatie */
  background-repeat:no-repeat;
}
.banner .overlay{
  position:absolute;
  inset:0;
  background-color:rgba(0,0,0,.58);
}

.banner-layers{
  position:absolute;
  top:0; bottom:0; left:0; right:0;
  margin:0 auto;
}

.text-box{ position:absolute; }
.text-box-content{ position:relative; }
.text-inner{ position:relative; }

/* -- links: koptekst en intro -- */
.hero-left{
  width:44%;
  left:5%;
  top:50%;
  transform:translateY(-50%);
}
.hero-left .text-box-content.dark,
.hero-left .text-box-content.dark p{ color:var(--light); }

.h1-home{ line-height:.75; }
.h1-home h1{
  margin:10.64px 0;
  text-wrap:balance;   /* verdeelt de kop gelijkmatig over de regels */
  font-size:53.2px;
  font-weight:600;
  line-height:53.2px;
  text-align:left;
  color:#fff;
}
.hero-left p{
  margin:16px 0;
  font-size:16px;
  font-weight:500;
  line-height:25.6px;
  text-align:left;
  color:var(--light);
}

/* -- rechts: de offertekaart -- */
.hero-card{
  width:36%;
  min-width:380px;   /* anders wordt de wizard te smal rond 900-1100px */
  right:5%;
  bottom:5%;
}
.hero-card .text-box-content{
  background-color:#fff;
  border-radius:10px;
  overflow:hidden;          /* de stappenbalk loopt tot aan de rand van de kaart */
}

.site-form input[type="text"],
.site-form input[type="tel"],
.site-form input[type="email"],
.site-form textarea{
  flex:1 1 0;
  min-width:0;
  width:100%;
  padding:11px 15px;
  border:1px solid var(--lijn);
  border-radius:8px;
  background:#fff;
  font-family:Poppins,sans-serif;
  font-size:14px;
  font-weight:500;
  line-height:1.5;
  color:var(--ink);
  transition:border-color .15s, box-shadow .15s;
}
.site-form textarea{ resize:vertical; min-height:96px; }

.site-form input::placeholder,
.site-form textarea::placeholder{
  color:rgba(0,0,0,.45);
  font-weight:500;
}

.site-form input:focus,
.site-form textarea:focus{
  outline:none;
  border-color:var(--rood);
  box-shadow:0 0 0 3px rgba(231,20,27,.15);
}

.gap-element{ display:block; clear:both; }

.stack{ display:flex; }
.stack-row{ flex-direction:row; align-items:center; }
.stack-row > * + *{ margin-left:.75rem; }

/* =========================================================
   OFFERTEWIZARD IN DE HERO-KAART (3 stappen)
   ========================================================= */
.offerte-wizard{ margin:0; }

/* -- stappenbalk -- */
.wizard-tabs{
  display:flex;
  border-bottom:1px solid #e6e4e1;
}
.wizard-tab{
  flex:1 1 0;
  min-width:0;
  padding:13px 8px 11px;
  border:0;
  border-bottom:3px solid transparent;
  background:var(--vlak);
  font-family:Poppins,sans-serif;
  font-size:11px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:.9px;
  text-transform:uppercase;
  text-align:center;
  color:#9a9ea1;
  cursor:default;
  transition:color .2s, background-color .2s, border-color .2s;
}
.wizard-tab + .wizard-tab{ border-left:1px solid #e6e4e1; }
.wizard-tab span{ font-weight:700; }

.wizard-tab.actief{
  background:#fff;
  border-bottom-color:var(--rood);
  color:var(--rood);
}
/* een afgeronde stap is groen en blijft aanklikbaar om terug te bladeren */
.wizard-tab.klaar{
  background:#fff;
  border-bottom-color:var(--ink);
  color:var(--ink);
  cursor:pointer;
}
.wizard-tab.klaar:hover{ background:var(--vlak); }
.wizard-tab:focus-visible{ outline:2px solid var(--rood); outline-offset:-2px; }

/* -- panelen -- */
/* Alle panelen liggen in dezelfde grid-cel. Daardoor is de kaart even hoog als de
   langste stap en springt er niets bij het doorklikken; de knoppenrij hangt met
   margin-top:auto onderaan. */
.wizard-body{
  display:grid;
  padding:26px 30px 30px;
}

.wizard-paneel{
  grid-area:1 / 1;
  display:flex;
  flex-direction:column;
  min-width:0;
  margin:0;
  padding:0;
  border:0;
}
.wizard-paneel:not(.actief){
  visibility:hidden;
  pointer-events:none;
}
.wizard-paneel.actief{ animation:wizardIn .22s ease; }
@keyframes wizardIn{
  from{ opacity:0; transform:translateX(10px); }
  to{ opacity:1; transform:none; }
}

.wizard-kop{
  margin:0 0 5px;
  font-size:19px;
  font-weight:600;
  line-height:1.35;
  color:var(--ink);
}
.wizard-sub{
  margin:0 0 20px;
  font-size:13.5px;
  font-weight:500;
  line-height:1.55;
  color:var(--grijs);
}
.wizard-label{
  margin:0 0 10px;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--ink);
}

/* -- keuzetegels -- */
.keuze-grid{ display:grid; gap:12px; margin:0 0 22px; }
.keuze-grid-2{ grid-template-columns:repeat(2,1fr); }
.keuze-grid-3{ grid-template-columns:repeat(3,1fr); }

.keuze{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:18px 12px 16px;
  border:1px solid var(--lijn);
  border-radius:12px;
  background:var(--vlak);
  text-align:center;
  cursor:pointer;
  transition:border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.keuze input{
  position:absolute;
  width:1px; height:1px;
  opacity:0;
  margin:0;
  pointer-events:none;
}
.keuze-icoon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  margin-bottom:12px;
  border-radius:50%;
  background:rgba(231,20,27,.12);
  color:var(--rood);
  flex:0 0 auto;
  transition:background-color .2s ease, color .2s ease;
}
.keuze-icoon svg{ width:21px; height:21px; }
.keuze-titel{
  font-size:14px;
  font-weight:600;
  line-height:1.35;
  color:var(--ink);
  transition:color .2s ease;
}
.keuze-sub{
  margin-top:4px;
  font-size:12px;
  font-weight:500;
  line-height:1.45;
  color:var(--grijs);
}

.keuze:hover{ border-color:#cfccc8; background:#fff; }
.keuze.gekozen{
  border-color:var(--rood);
  background:#fff;
  box-shadow:0 0 0 1px var(--rood) inset, 0 6px 16px rgba(0,0,0,.08);
}
.keuze.gekozen .keuze-icoon{ background:var(--rood); color:#fff; }
.keuze.gekozen .keuze-titel{ color:var(--rood); }
.keuze:has(input:focus-visible){ outline:2px solid var(--rood); outline-offset:2px; }

/* compacte variant: drie naast elkaar bij "soort dak" */
.keuze-compact{ padding:15px 6px 13px; }
.keuze-compact .keuze-icoon{ width:38px; height:38px; margin-bottom:10px; }
.keuze-compact .keuze-icoon svg{ width:18px; height:18px; }
.keuze-compact .keuze-titel{
  font-size:11.5px;
  letter-spacing:.5px;
  text-transform:uppercase;
}

/* -- velden -- */
.offerte-wizard .veld-rij{ display:flex; gap:12px; }
.offerte-wizard .veld{ flex:1 1 0; min-width:0; margin-bottom:16px; }
/* alleen de veldlabels: .keuze en .chip zijn ook <label> en houden hun eigen opmaak */
.offerte-wizard .veld label{
  display:block;
  margin-bottom:7px;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--ink);
}
.offerte-wizard .verplicht{ color:var(--rood); }
.offerte-wizard .optioneel{
  font-weight:500;
  letter-spacing:.4px;
  text-transform:none;
  color:#9a9ea1;
}
.offerte-wizard textarea{ min-height:78px; }

/* -- voorkeurschips -- */
.chips{ display:flex; flex-wrap:wrap; gap:9px; margin:0 0 20px; }
.chip{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 15px;
  border:1px solid var(--lijn);
  border-radius:99px;
  background:#fff;
  font-size:11.5px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--ink);
  cursor:pointer;
  transition:border-color .2s ease, background-color .2s ease, color .2s ease;
}
.chip input{
  position:absolute;
  width:1px; height:1px;
  opacity:0;
  margin:0;
  pointer-events:none;
}
.chip svg{ width:15px; height:15px; color:var(--grijs); flex:0 0 auto; transition:color .2s ease; }
.chip:hover{ border-color:#cfccc8; background:var(--vlak); }
.chip.gekozen{
  border-color:var(--rood);
  background:rgba(231,20,27,.08);
  color:var(--rood);
}
.chip.gekozen svg{ color:var(--rood); }
.chip:has(input:focus-visible){ outline:2px solid var(--rood); outline-offset:2px; }

/* -- knoppenrij -- */
.wizard-knoppen{
  display:flex;
  gap:12px;
  margin-top:auto;
  padding-top:20px;
  border-top:1px solid var(--lijn);
}
.wizard-knoppen .button{ margin:0; }
.wizard-knoppen .button span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
}
.wizard-knoppen .button svg{ width:15px; height:15px; flex:0 0 auto; }

.wizard-verder,
.wizard-verzenden{ flex:1 1 auto; }
.wizard-terug{
  flex:0 0 auto;
  padding:6px 22px;
  border:1px solid var(--lijn);
  background:#fff;
  color:var(--ink);
}
.wizard-terug:hover{
  border-color:#cfccc8;
  background:var(--vlak);
  box-shadow:none;
  opacity:1;
}

.button:disabled{
  background:#c9c7c3;
  color:#fff;
  cursor:not-allowed;
}
.button:disabled:hover{ opacity:1; box-shadow:none; }

/* -- bevestiging -- */
.wizard-klaar{
  align-items:center;
  justify-content:center;
  padding:14px 0;
  text-align:center;
}
.wizard-vink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  margin:0 0 18px;
  border-radius:50%;
  background:rgba(231,20,27,.14);
  color:var(--rood);
}
.wizard-vink svg{ width:26px; height:26px; }
.wizard-klaar .wizard-sub{ margin:0; }
.wizard-klaar a{ color:var(--rood); text-decoration:underline; }

@media (prefers-reduced-motion:reduce){
  .wizard-paneel.actief{ animation:none; }
  .keuze,.keuze-icoon,.keuze-titel,.chip,.chip svg,.wizard-tab{ transition:none; }
}

/* =========================================================
   USP-STRIP
   ========================================================= */
.usp-spacer{ display:none; }

.usp-strip{
  position:relative;
  background:var(--donker);
  color:#fff;
}
.usp-strip .section-content{ position:relative; }
.usp-strip .row{
  display:flex;
  width:100%;
  max-width:var(--container);
  margin:0 auto;
}
.usp-strip .col{ width:100%; padding:0 15px; }
.usp-strip .col-inner{ padding:26px 0; }
/* gap in plaats van een vaste marge: tussen 850 en 1000px passen de vijf punten
   anders niet naast elkaar en steekt de balk buiten het scherm */
.usp-strip .stack-row{
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 3.5rem;
}
.usp-strip .stack-row > * + *{ margin-left:0; }
.usp-strip ul{ margin:0; list-style:none; }
.usp-strip li{
  margin:0 0 0 2px;
  padding:0 0 0 40px;
  font-size:16px;
  line-height:25.6px;
  background-image:url(../icons/check.svg);
  background-repeat:no-repeat;
  background-position:0 50%;
}
.usp-strip li strong{ font-weight:700; color:#fff; }

.gap-80{ padding-top:80px; }

/* =========================================================
   SECTIE 2
   ========================================================= */
#section-2{
  display:flex;
  align-items:center;
  width:100%;
  max-width:var(--container);
  margin:0 auto;
}
#section-2 .col{
  position:relative;
  flex:0 0 50%;
  max-width:50%;
  padding:0 15px 30px;
}
#section-2 .col-text .col-inner{ padding:0 80px 0 0; }

.sec2-title h2{
  margin:0 0 19.2px;
  font-size:38.4px;
  font-weight:600;
  line-height:49.92px;
  text-align:left;
  color:var(--ink);
}
#section-2 .col-text p{
  margin:0 0 20.8px;
  font-size:16px;
  font-weight:500;
  line-height:25.6px;
}
#section-2 .col-text p a{ color:inherit; }
#section-2 .col-text p a:hover{ color:var(--rood); }

.sec2-img{ width:100%; margin:0 auto; }
.sec2-img .img-inner{
  overflow:hidden;
  border-radius:16px;
}
/* de foto is staand, het vak liggend: vaste beeldverhouding + cover, anders
   wordt de kolom veel hoger dan de tekst ernaast */
.sec2-img img{
  width:100%;
  aspect-ratio:1400 / 1241;
  height:auto;
  object-fit:cover;
  object-position:50% 30%;
  display:block;
}

/* =========================================================
   RESPONSIVE – kop, hero, sectie 2
   ========================================================= */
@media (max-width:1439px){
  .container,.usp-strip .row,#section-2{ max-width:1320px; }
}

@media (max-width:1100px){
  .header-nav-main > li{ margin:0 8px; }
  .h1-home h1{ font-size:44px; line-height:46px; }
  .sec2-title h2{ font-size:32px; line-height:42px; }
  #section-2 .col-text .col-inner{ padding-right:40px; }
}

@media (max-width:849px){
  .mobile-only{ display:block; }
  .header-nav-main,#top-bar .top-bar-nav{ display:none; }
  #top-bar .container{ justify-content:center; }
  #top-bar .flex-left{ margin:0 auto; }

  .banner{ padding-top:0; }
  .banner-inner{ position:relative; }
  .banner-bg{ position:absolute; }
  .banner-layers{ position:relative; padding:60px 15px; }
  .hero-left,.hero-card{
    position:relative;
    width:100%;
    min-width:0;          /* de desktopbodem van 380px geldt hier niet */
    left:auto; right:auto; top:auto; bottom:auto;
    transform:none;
    margin:0 auto;
  }
  .hero-card{ margin-top:40px; }
  .wizard-body{ padding:24px 24px 26px; }

  /* de kaart staat hier gewoon in de flow, dus hoeft hij niet zo hoog te zijn
     als de langste stap: elk paneel krijgt zijn eigen hoogte */
  .wizard-body{ display:block; }
  .wizard-paneel:not(.actief){ display:none; }
  .wizard-knoppen{ margin-top:24px; }

  #masthead,#masthead .header-inner{ height:80px; }
  #logo img{ height:44px; padding:18px 0; }
  .h1-home h1{ font-size:26px; line-height:31px; }
  .sec2-title h2{ font-size:28.8px; line-height:37.44px; }

  .usp-spacer,
  .usp-strip{ display:none; }

  #section-2{ flex-direction:column; }
  #section-2 .col{ flex:0 0 100%; max-width:100%; }
  #section-2 .col-text .col-inner{ padding:0; }
}

/* de wizard op smalle schermen */
@media (max-width:479px){
  .wizard-tab{ font-size:10px; letter-spacing:.4px; padding:12px 5px 10px; }
  .wizard-body{ padding:22px 20px 24px; }
  .keuze{ padding:15px 8px 13px; }
  .keuze-icoon{ width:38px; height:38px; margin-bottom:9px; }
  .keuze-icoon svg{ width:18px; height:18px; }
  .keuze-titel{ font-size:13px; }
  .keuze-sub{ font-size:11.5px; }
  .keuze-compact{ padding:13px 4px 11px; }
  .keuze-compact .keuze-icoon{ width:34px; height:34px; }
  .keuze-compact .keuze-titel{ font-size:10.5px; letter-spacing:.3px; }
  .offerte-wizard .veld-rij{ flex-direction:column; gap:0; }
  .chip{ padding:8px 13px; font-size:11px; }
  .wizard-knoppen{ flex-wrap:wrap; }
  .wizard-terug{ padding:6px 18px; }
}

/* =========================================================
   SECTIE 3 – DIENSTEN
   ========================================================= */
.diensten{
  margin-top:80px;
  scroll-margin-top:130px;
  padding:80px 0 130px;
  background:#fff;
}

.diensten-titel{
  margin:0 0 16px;
  padding:0 15px;
  font-size:38.4px;
  font-weight:600;
  line-height:49.92px;
  color:var(--ink);
}

.diensten-intro{
  max-width:610px;
  margin:0 0 44px;
  padding:0 15px;
  font-size:16px;
  font-weight:500;
  line-height:25.6px;
  color:var(--ink);
}

.dienst-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
  padding:0 15px;
}

.dienst-card{
  display:block;
  padding:32px;
  border-radius:14px;
  background:var(--vlak);
  color:var(--ink);
  transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.dienst-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:12px;
  background:#fff;
  color:var(--ink);
  transition:background-color .25s ease, color .25s ease;
}
.dienst-icon svg{ width:23px; height:23px; }

.dienst-card h3{
  margin:22px 0 10px;
  font-size:18px;
  font-weight:600;
  line-height:1.4;
  color:var(--ink);
}

.dienst-card p{
  margin:0 0 18px;
  font-size:15px;
  font-weight:500;
  line-height:1.6;
  color:var(--grijs);
}

.dienst-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:600;
  letter-spacing:.2px;
  color:var(--rood);
}
.dienst-link svg{
  width:16px;
  height:16px;
  transition:transform .25s ease;
}

.dienst-card:hover{
  transform:translateY(-4px);
  background:#fff;
  box-shadow:0 2px 4px rgba(0,0,0,.05), 0 14px 32px rgba(0,0,0,.12);
}
.dienst-card:hover .dienst-icon{
  background:rgba(231,20,27,.14);
  color:var(--rood);
}
.dienst-card:hover .dienst-link svg{ transform:translateX(4px); }

.dienst-card:focus-visible{
  outline:2px solid var(--rood);
  outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
  .dienst-card,.dienst-icon,.dienst-link svg{ transition:none; }
  .dienst-card:hover{ transform:none; }
  .dienst-card:hover .dienst-link svg{ transform:none; }
}

@media (max-width:1099px){
  .dienst-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:849px){
  .diensten{ margin-top:60px; padding:60px 0 90px; }
  .diensten-titel{ font-size:28.8px; line-height:37.44px; margin-bottom:12px; }
  .diensten-intro{ margin-bottom:30px; }
}

@media (max-width:699px){
  .dienst-grid{ grid-template-columns:1fr; gap:20px; }
  .dienst-card{ padding:26px; }
}

/* =========================================================
   SECTIE 4 – WAAROM BOYKE DAKWERKEN
   ========================================================= */
.waarom{
  padding:80px 0 90px;
  background:var(--ink);
  color:#fff;
}

.waarom-cijfers{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
  padding:0 15px;
}
.cijfer{ display:flex; flex-direction:column; gap:10px; }

.cijfer-groot{
  display:flex;
  align-items:center;
  height:47px;
  font-size:44px;
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.5px;
  color:var(--rood);
}
.cijfer-vink svg{ width:auto; height:31px; }

.cijfer-label{
  font-size:15px;
  font-weight:500;
  line-height:1.5;
  color:var(--grijs-op-donker);
}

.waarom-lijn{
  height:1px;
  margin:56px 15px 60px;
  background:rgba(255,255,255,.14);
}

.waarom-body{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:80px;
  padding:0 15px;
}

.sectie-label{
  display:flex;
  align-items:flex-start;   /* streepje op de eerste regel houden, ook als het label afbreekt */
  gap:14px;
  margin:0 0 18px;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--rood);
}
.sectie-label .streep{
  width:34px;
  height:2px;
  margin-top:9px;           /* midden van de eerste regel (20px regelhoogte) */
  background:var(--rood);
  flex:0 0 auto;
}

.waarom-tekst h2{
  margin:0 0 20px;
  font-size:38.4px;
  font-weight:600;
  line-height:49.92px;
  color:#fff;
}
.waarom-intro{
  max-width:460px;
  margin:0;
  font-size:16px;
  font-weight:500;
  line-height:25.6px;
  color:var(--grijs-op-donker);
}

.waarom-lijst{
  margin:0;
  padding:0;
  list-style:none;
}
.waarom-lijst li{
  display:flex;
  gap:18px;
  padding:22px 0;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.waarom-lijst li:first-child{ padding-top:4px; }
.waarom-lijst li:last-child{ border-bottom:0; padding-bottom:0; }

.waarom-check{
  display:flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  margin-top:2px;
  border-radius:50%;
  background:rgba(231,20,27,.18);
  color:var(--rood);
  flex:0 0 auto;
}
.waarom-check svg{ width:14px; height:14px; }

.waarom-lijst h3{
  margin:0 0 5px;
  font-size:16px;
  font-weight:600;
  line-height:1.5;
  color:#fff;
}
.waarom-lijst p{
  margin:0;
  font-size:15px;
  font-weight:500;
  line-height:1.6;
  color:var(--grijs-op-donker);
}

@media (max-width:1099px){
  .waarom-body{ gap:50px; }
  .waarom-tekst h2{ font-size:32px; line-height:42px; }
}

@media (max-width:849px){
  .waarom{ padding:60px 0 66px; }
  .waarom-body{ grid-template-columns:1fr; gap:36px; }
  .waarom-lijn{ margin:44px 15px 44px; }
  .waarom-tekst h2{ font-size:28.8px; line-height:37.44px; }
  .waarom-intro{ max-width:none; }
}

@media (max-width:699px){
  .waarom-cijfers{ grid-template-columns:repeat(2,1fr); gap:28px 20px; }
  .cijfer-groot{ font-size:36px; height:40px; }
  .cijfer-vink svg{ width:auto; height:25px; }
}

/* =========================================================
   SECTIE 5 – WERKGEBIED
   ========================================================= */
.werkgebied{
  padding:90px 0 100px;
  background:#fff;
}

.werkgebied-body{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:80px;
  align-items:center;
  padding:0 15px;
}

.werkgebied-tekst h2{
  margin:0 0 20px;
  font-size:38.4px;
  font-weight:600;
  line-height:49.92px;
  color:var(--ink);
}

.werkgebied-intro{
  max-width:520px;
  margin:0 0 20px;
  font-size:16px;
  font-weight:500;
  line-height:25.6px;
  color:var(--grijs);
}

/* kopje boven een rij plaatsnamen */
.plaatsen-kop{
  margin:0 0 12px;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--ink);
}
.plaatsen-kop-tweede{ margin-top:26px; }

.plaatsen{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.plaats{
  display:inline-flex;
  align-items:center;
  padding:9px 18px;
  border:1px solid var(--lijn);
  border-radius:99px;
  background:#fff;
  font-size:14.5px;
  font-weight:500;
  line-height:1.4;
  color:var(--ink);
  transition:border-color .2s ease, color .2s ease, background-color .2s ease;
}
a.plaats:hover{
  border-color:var(--rood);
  background:rgba(231,20,27,.06);
  color:var(--rood);
}
a.plaats:focus-visible{
  outline:2px solid var(--rood);
  outline-offset:2px;
}
/* plaatsen zonder eigen pagina staan in dezelfde ovaal, maar zijn geen link */
span.plaats{ cursor:default; }

.werkgebied-intro:last-of-type{ margin-bottom:30px; }

/* link in de werkgebied-intro */
.werkgebied-intro a{ color:var(--rood); text-decoration:underline; }
.werkgebied-intro a:hover{ color:var(--ink); }

.werkgebied-beeld img{
  width:100%;
  aspect-ratio:1920 / 1536;
  height:auto;
  object-fit:cover;
  object-position:50% 50%;
  border-radius:16px;
  display:block;
}

@media (prefers-reduced-motion:reduce){
  .plaats{ transition:none; }
}

@media (max-width:1099px){
  .werkgebied-body{ gap:50px; }
  .werkgebied-tekst h2{ font-size:32px; line-height:42px; }
}

@media (max-width:849px){
  .werkgebied{ padding:64px 0 70px; }
  .werkgebied-body{ grid-template-columns:1fr; gap:36px; }
  .werkgebied-tekst h2{ font-size:28.8px; line-height:37.44px; }
  .werkgebied-intro{ max-width:none; }
}

/* =========================================================
   SECTIE 6 – REVIEWS
   ========================================================= */
.reviews{
  padding:90px 0 100px;
  background:var(--vlak);
}

.reviews-kop{
  max-width:640px;
  margin:0 auto 44px;
  padding:0 15px;
  text-align:center;
}
.reviews-kop .sectie-label{ justify-content:center; }

.reviews-kop h2{
  margin:0 0 16px;
  font-size:38.4px;
  font-weight:600;
  line-height:49.92px;
  color:var(--ink);
}

.reviews-score{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:0;
  font-size:15px;
  font-weight:500;
  color:var(--grijs);
}

.sterren{
  display:inline-flex;
  gap:3px;
  color:var(--rood);
}
.sterren svg{ width:17px; height:17px; }

.review-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:30px;
  padding:0 15px;
}

.review{
  flex:0 1 400px;
  display:flex;
  flex-direction:column;
  gap:16px;
  margin:0;
  padding:32px;
  border-radius:14px;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.05);
}

.review blockquote{
  margin:0;
  font-size:16px;
  font-weight:500;
  line-height:26px;
  color:var(--ink);
}
.review blockquote::before{ content:"\201C"; }
.review blockquote::after{ content:"\201D"; }

.review figcaption{
  margin-top:auto;
  font-size:14.5px;
  font-weight:600;
  color:var(--grijs);
}

@media (max-width:849px){
  .reviews{ padding:64px 0 70px; }
  .reviews-kop{ margin-bottom:32px; }
  .reviews-kop h2{ font-size:28.8px; line-height:37.44px; }
}

@media (max-width:699px){
  .review-grid{ gap:20px; }
  .review{ flex:1 1 100%; padding:26px; }
}

/* =========================================================
   SECTIE 7 – OVER ONS
   ========================================================= */
.over-ons{
  padding:90px 0 100px;
  background:var(--ink);
  color:#fff;
}

.over-inner{
  max-width:780px;
  margin:0 auto;
  padding:0 15px;
  text-align:center;
}
.over-inner .sectie-label{ justify-content:center; }

.over-inner h2{
  margin:0 0 22px;
  text-wrap:balance;   /* gecentreerde kop gelijkmatig over de regels */
  font-size:38.4px;
  font-weight:600;
  line-height:49.92px;
  color:#fff;
}

.over-inner p{
  margin:0 0 20px;
  font-size:16px;
  font-weight:500;
  line-height:25.6px;
  color:rgba(255,255,255,.75);
}
.over-inner p:last-of-type{ margin-bottom:34px; }

.over-knoppen{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
}
.over-knoppen .button{ margin:0; }

.button.licht{
  background:transparent;
  border:2px solid rgba(255,255,255,.35);
  padding:5px 28px;
  color:#fff;
}
.button.licht:hover{
  border-color:#fff;
  background:rgba(255,255,255,.08);
  box-shadow:none;
  opacity:1;
}

@media (max-width:849px){
  .over-ons{ padding:64px 0 70px; }
  .over-inner h2{ font-size:28.8px; line-height:37.44px; }
}

@media (max-width:479px){
  .over-knoppen{ flex-direction:column; }
  .over-knoppen .button{ width:100%; }
}

/* =========================================================
   SECTIE 8 – VEELGESTELDE VRAGEN
   ========================================================= */
.faq{
  padding:90px 0 100px;
  background:#fff;
}

.faq-kop{
  max-width:640px;
  margin:0 auto 44px;
  padding:0 15px;
  text-align:center;
}
.faq-kop .sectie-label{ justify-content:center; }

.faq-kop h2{
  margin:0;
  font-size:38.4px;
  font-weight:600;
  line-height:49.92px;
  color:var(--ink);
}

.faq-lijst{
  max-width:820px;
  margin:0 auto;
  padding:0 15px;
}

.faq-item{
  border-bottom:1px solid var(--lijn);
}
.faq-item:first-child{ border-top:1px solid var(--lijn); }

.faq-item summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:22px 2px;
  cursor:pointer;
  list-style:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:focus-visible{
  outline:2px solid var(--rood);
  outline-offset:3px;
  border-radius:4px;
}

.faq-vraag{
  font-size:17px;
  font-weight:600;
  line-height:1.5;
  color:var(--ink);
  transition:color .2s ease;
}
.faq-item summary:hover .faq-vraag{ color:var(--rood); }

.faq-plus{
  position:relative;
  width:16px;
  height:16px;
  flex:0 0 auto;
}
.faq-plus::before,
.faq-plus::after{
  content:"";
  position:absolute;
  top:50%;
  left:0;
  width:16px;
  height:2px;
  margin-top:-1px;
  border-radius:1px;
  background:var(--rood);
  transition:transform .25s ease, opacity .25s ease;
}
.faq-plus::after{ transform:rotate(90deg); }
.faq-item[open] .faq-plus::after{ transform:rotate(0deg); }

.faq-antwoord{
  padding:0 46px 24px 2px;
}
.faq-antwoord p{
  margin:0;
  font-size:16px;
  font-weight:500;
  line-height:25.6px;
  color:var(--grijs);
}
.faq-item[open] .faq-antwoord{
  animation:faqOpen .25s ease;
}
@keyframes faqOpen{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion:reduce){
  .faq-plus::before,.faq-plus::after,.faq-vraag{ transition:none; }
  .faq-item[open] .faq-antwoord{ animation:none; }
}

@media (max-width:849px){
  .faq{ padding:64px 0 70px; }
  .faq-kop{ margin-bottom:32px; }
  .faq-kop h2{ font-size:28.8px; line-height:37.44px; }
  .faq-vraag{ font-size:16px; }
  .faq-antwoord{ padding-right:24px; }
}

/* =========================================================
   SECTIE 9 – CONTACT
   ========================================================= */
.contact{
  padding:90px 0 100px;
  background:var(--ink);
  color:#fff;
}

.contact-body{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:80px;
  align-items:start;
  padding:0 15px;
}

.contact-tekst h2{
  margin:0 0 20px;
  font-size:38.4px;
  font-weight:600;
  line-height:49.92px;
  color:#fff;
}
.contact-intro{
  max-width:460px;
  margin:0 0 30px;
  font-size:16px;
  font-weight:500;
  line-height:25.6px;
  color:rgba(255,255,255,.75);
}

.contact-knoppen{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:40px;
}
.contact-knoppen .button{ margin:0; }
.contact-tel span,
.versturen span{
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.contact-tel svg,
.versturen svg{ width:17px; height:17px; }

.button.whatsapp{ background:var(--groen); }

.contact-gegevens{
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid rgba(255,255,255,.12);
}
.contact-gegevens li{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.contact-icoon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:10px;
  background:rgba(255,255,255,.08);
  color:var(--rood);
  flex:0 0 auto;
}
.contact-icoon svg{ width:19px; height:19px; }
.contact-soort{
  display:block;
  font-size:13.5px;
  font-weight:500;
  color:rgba(255,255,255,.6);
}
.contact-waarde{
  display:block;
  font-size:16px;
  font-weight:600;
  color:#fff;
}

.contact-kaart{
  padding:34px;
  border-radius:14px;
  background:#fff;
}

.contact-form .veld-rij{
  display:flex;
  gap:14px;
}
.contact-form .veld{
  flex:1 1 0;
  min-width:0;
  margin-bottom:16px;
}
.contact-form label{
  display:block;
  margin-bottom:7px;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--ink);
}
.contact-form .verplicht{ color:var(--rood); }
.contact-form .optioneel{
  font-weight:500;
  letter-spacing:.4px;
  text-transform:none;
  color:#9a9ea1;
}

.akkoord{
  display:flex !important;
  align-items:flex-start;
  gap:11px;
  margin:4px 0 22px;
  font-size:14px;
  font-weight:500;
  line-height:1.55;
  letter-spacing:0 !important;
  text-transform:none !important;
  color:var(--grijs) !important;
  cursor:pointer;
}
.akkoord input{
  width:17px;
  height:17px;
  margin-top:2px;
  accent-color:var(--rood);
  flex:0 0 auto;
  cursor:pointer;
}
.akkoord a{ color:var(--rood); text-decoration:underline; }

.versturen{
  display:block;
  width:100%;
  margin:0;
  cursor:pointer;
}
.contact-noot{
  margin:14px 0 0;
  font-size:13px;
  font-weight:500;
  line-height:1.5;
  text-align:center;
  color:#9a9ea1;
}

@media (max-width:1099px){
  .contact-body{ gap:50px; }
  .contact-tekst h2{ font-size:32px; line-height:42px; }
}

@media (max-width:849px){
  .contact{ padding:64px 0 70px; }
  .contact-body{ grid-template-columns:1fr; gap:40px; }
  .contact-tekst h2{ font-size:28.8px; line-height:37.44px; }
  .contact-intro{ max-width:none; }
  .contact-kaart{ padding:26px; }
}

@media (max-width:479px){
  .contact-form .veld-rij{ flex-direction:column; gap:0; }
  .contact-knoppen .button{ width:100%; text-align:center; }
  .contact-tel span,.versturen span{ justify-content:center; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  padding:70px 0 28px;
  background:var(--dieper);
  color:rgba(255,255,255,.72);
  font-size:15px;
  line-height:25px;
}
.site-footer .container{ max-width:var(--container); }

.footer-body{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:56px;
  padding:0 15px 50px;
}

.footer-merk img{
  height:52px;
  width:auto;
  margin:0 0 24px;
}
.footer-merk p{
  max-width:340px;
  margin:0 0 24px;
  color:rgba(255,255,255,.62);
}
.footer-merk .button{ margin:0; }

.footer-kop{
  margin:0 0 18px;
  font-size:13px;
  font-weight:600;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:#fff;
}

.footer-kolom ul{
  margin:0;
  padding:0;
  list-style:none;
}
.footer-kolom li{ margin-bottom:9px; }
.footer-kolom a{
  color:rgba(255,255,255,.72);
  transition:color .15s;
}
.footer-kolom a:hover{ color:#fff; text-decoration:underline; }
.footer-alle{ font-weight:600; color:var(--rood) !important; }
.footer-alle:hover{ color:var(--rood) !important; }

.footer-contact li{ margin-bottom:16px; }
.footer-soort{
  display:block;
  font-size:12.5px;
  color:rgba(255,255,255,.45);
}

.footer-onder{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:0 15px;
  padding-top:26px;
  border-top:1px solid rgba(255,255,255,.10);
  font-size:14px;
  color:rgba(255,255,255,.5);
}
.footer-onder p{ margin:0; }
.footer-onder ul{
  display:flex;
  flex-wrap:wrap;
  gap:22px;
  margin:0;
  padding:0;
  list-style:none;
}
.footer-onder a{ color:rgba(255,255,255,.5); }
.footer-onder a:hover{ color:#fff; text-decoration:underline; }

@media (max-width:1099px){
  .footer-body{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:44px; }
}
@media (max-width:849px){
  .site-footer{ padding:56px 0 24px; }
  .footer-body{ padding-bottom:40px; }
}
@media (max-width:599px){
  .footer-body{ grid-template-columns:1fr; gap:36px; }
  .footer-onder{ flex-direction:column; align-items:flex-start; }
}

/* het offerteformulier is een ankerdoel voor de knop in de navbar */
#offerte{ scroll-margin-top:130px; }

/* =========================================================
   MOBIEL MENU  (< 850px)
   ========================================================= */
.sub-toggle{ display:none; }

.nav-icon span{ transition:transform .2s, opacity .2s; }
body.menu-open .nav-icon span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
body.menu-open .nav-icon span:nth-child(2){ opacity:0; }
body.menu-open .nav-icon span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

@media (max-width:849px){
  #masthead .flex-col.flex-right{ position:static; }

  .header-nav-main{
    display:block;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    z-index:60;
    max-height:calc(100vh - 120px);
    max-height:calc(100dvh - 120px);
    overflow-y:auto;
    overscroll-behavior:contain;
    margin:0;
    padding:6px 20px 26px;
    background:#fff;
    border-top:1px solid #e6e4e1;
    box-shadow:0 18px 30px rgba(0,0,0,.16);
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:opacity .22s, transform .22s, visibility .22s;
  }
  body.menu-open .header-nav-main{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
  body.menu-open{ overflow:hidden; }

  .header-nav-main > li{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    margin:0;
    border-bottom:1px solid #eceae7;
  }
  .header-nav-main > li > a.nav-top-link{
    flex:1 1 auto;
    padding:15px 0;
    font-size:16px;
    line-height:22px;
  }
  .header-nav-main > li.active > a.nav-top-link{ color:var(--rood); font-weight:600; }
  .header-nav-main .icon-angle-down{ display:none; }

  .sub-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    flex:0 0 auto;
    padding:0;
    border:0;
    background:none;
    cursor:pointer;
  }
  .sub-toggle::before{
    content:"";
    width:10px;
    height:10px;
    border-right:2px solid var(--ink);
    border-bottom:2px solid var(--ink);
    transform:translateY(-2px) rotate(45deg);
    transition:transform .2s;
  }
  .header-nav-main > li.open > .sub-toggle::before{ transform:translateY(2px) rotate(-135deg); }

  /* submenu staat in de lijst zelf in plaats van in een zwevend kaartje */
  .header-nav-main .sub-menu{
    position:static;
    display:none;
    width:auto;
    flex:0 0 100%;
    margin:0;
    padding:0 0 10px 14px;
    background:none;
    border-radius:0;
    box-shadow:none;
    opacity:1;
    visibility:visible;
    transform:none;
    transition:none;
  }
  .header-nav-main > li.open > .sub-menu{ display:block; }
  .header-nav-main .sub-menu > li{ padding:0; }
  .header-nav-main .sub-menu > li > a{ padding:11px 0; font-size:15px; }

  /* de offerteknop onderaan, over de volle breedte */
  .header-nav-main .header-button-1{
    display:block;
    margin:18px 0 0;
    border-bottom:0;
  }
  .header-nav-main .header-button-1 .button{
    display:block;
    width:100%;
    text-align:center;
  }
}

/* Met "Werkgebied" erbij telt de balk zes items plus de offerteknop. Tussen het
   mobiele omslagpunt (850px) en ongeveer 1000px moet dat krapper, anders loopt de
   kop buiten het scherm. */
@media (max-width:1023px){
  .header-nav-main > li{ margin:0 5px; }
  .header-nav-main > li > a.nav-top-link{
    font-size:13.5px;
    letter-spacing:.2px;
  }
  .header-nav-main .icon-angle-down{ margin-left:2px; }
  .header-nav-main .header-button-1{ margin-left:8px; }
  .header-nav-main .header-button-1 .button{
    padding:7px 18px;
    font-size:13px;
    letter-spacing:.3px;
  }
}

/* =========================================================
   SUBPAGINA'S – PAGINAKOP
   ========================================================= */
.paginakop{
  padding:44px 0 0;
  background:var(--ink);
  color:#fff;
}
.paginakop .container{ max-width:var(--container); }

/* een kop zonder offerteformulier heeft onderaan wel ruimte nodig */
.paginakop.zonder-formulier{ padding:44px 0 72px; }

.kruimelpad{
  margin:0 0 34px;
  padding:0;
  font-size:13.5px;
  font-weight:500;
  color:rgba(255,255,255,.6);
}
.kruimelpad ol{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.kruimelpad li{ display:flex; align-items:center; gap:8px; }
.kruimelpad li + li::before{ content:"/"; color:rgba(255,255,255,.3); }
.kruimelpad a{ color:rgba(255,255,255,.72); }
.kruimelpad a:hover{ color:#fff; text-decoration:underline; }
.kruimelpad [aria-current]{ color:#fff; }

.paginakop h1{
  max-width:760px;
  margin:0 0 20px;
  font-size:53.2px;
  font-weight:600;
  line-height:1.08;
  text-wrap:balance;
  color:#fff;
}
.paginakop-intro{
  max-width:660px;
  margin:0 0 32px;
  font-size:17px;
  font-weight:500;
  line-height:28px;
  color:rgba(255,255,255,.78);
}
.paginakop-intro strong{ font-weight:600; color:#fff; }
.paginakop-intro a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }
.paginakop-intro a:hover{ color:var(--rood); }

.paginakop-knoppen{ display:flex; flex-wrap:wrap; gap:14px; }
.paginakop-knoppen .button{ margin:0; }

/* --- paginakop met een foto erachter --- */
.paginakop.met-foto{ position:relative; overflow:hidden; }
.paginakop.met-foto::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--kopfoto);
  background-position:var(--kopfoto-positie, 50% 38%);
  background-size:cover;
  background-repeat:no-repeat;
}
/* Donkere laag over de foto. Staat er rechts een witte kaart, dan mag de laag
   daar oplichten. Loopt de tekst door tot rechts, dan moet hij donkerder blijven,
   anders zakt de intro onder 4,5:1 contrast. */
.paginakop.met-foto::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    rgba(20,22,24,.90) 0%, rgba(20,22,24,.86) 45%, rgba(20,22,24,.80) 100%);
}
.paginakop.met-foto.zonder-formulier::after{
  background:linear-gradient(90deg,
    rgba(20,22,24,.94) 0%, rgba(20,22,24,.90) 42%, rgba(20,22,24,.78) 100%);
}
.paginakop.met-foto > .container{ position:relative; z-index:1; }

/* welke foto bij welke kop hoort */
.paginakop.kopfoto-over{
  --kopfoto:url(../img/over-kop.jpg);
  --kopfoto-positie:50% 62%;
}

/* =========================================================
   SUBPAGINA'S – TEKSTBLOK
   ========================================================= */
.inhoud{
  padding:90px 0;
  background:#fff;
}
.inhoud .container{ max-width:var(--container); }

.inhoud h2{
  margin:0 0 20px;
  font-size:32px;
  font-weight:600;
  line-height:42px;
  color:var(--ink);
}
.inhoud h3{
  margin:34px 0 10px;
  font-size:19px;
  font-weight:600;
  line-height:1.5;
  color:var(--ink);
}
.inhoud p{
  margin:0 0 20px;
  font-size:16px;
  font-weight:500;
  line-height:26px;
  color:var(--grijs);
}
.inhoud p a{ color:var(--rood); text-decoration:underline; }
.inhoud p a:hover{ color:var(--ink); }

/* tekst links, foto rechts */
.inhoud-body{
  display:grid;
  grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:70px;
  align-items:start;
  padding:0 15px;
}
.inhoud-body .inhoud-tekst > :first-child{ margin-top:0; }

.inhoud-foto img{
  width:100%;
  aspect-ratio:4 / 5;
  height:auto;
  object-fit:cover;
  object-position:50% 50%;
  border-radius:16px;
}

/* =========================================================
   SUBPAGINA'S – STAPPENKAARTEN ("Zo werkt het")
   ========================================================= */
.materialen{
  padding:90px 0;
  background:var(--vlak);
}
.materialen-kop{ max-width:700px; margin:0 0 40px; padding:0 15px; }
.materialen-kop h2{
  margin:0 0 16px;
  font-size:32px;
  font-weight:600;
  line-height:42px;
  color:var(--ink);
}
.materialen-kop p{
  margin:0;
  font-size:16px;
  font-weight:500;
  line-height:25.6px;
  color:var(--grijs);
}
.materiaal-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:24px;
  padding:0 15px;
}
.materiaal{
  padding:28px;
  border-radius:14px;
  background:#fff;
}
.materiaal h3{
  margin:0 0 10px;
  font-size:18px;
  font-weight:600;
  line-height:1.4;
  color:var(--ink);
}
.materiaal p{
  margin:0;
  font-size:15px;
  font-weight:500;
  line-height:24px;
  color:var(--grijs);
}

/* genummerde stap, verder dezelfde kaart als .materiaal */
.stap-nummer{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  margin:0 0 16px;
  border-radius:50%;
  background:var(--rood);
  font-size:15px;
  font-weight:600;
  line-height:1;
  color:#fff;
}

@media (max-width:1099px){
  .paginakop h1{ font-size:42px; }
  .inhoud-body{ gap:44px; }
  .materiaal-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:849px){
  .paginakop{ padding:30px 0 0; }
  .paginakop.zonder-formulier{ padding:30px 0 52px; }
  .paginakop h1{ font-size:32px; }
  .inhoud,.materialen{ padding:60px 0; }
  .inhoud h2,.materialen-kop h2{ font-size:26px; line-height:36px; }
  .inhoud-body{ grid-template-columns:1fr; gap:36px; }
  .inhoud-foto img{ aspect-ratio:4 / 3; }
}
@media (max-width:599px){
  .materiaal-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   CONTACTPAGINA – GEGEVENSKAARTEN
   ========================================================= */
.gegevens{
  padding:90px 0;
  background:#fff;
}
.gegevens .container{ max-width:var(--container); }

.gegevens-kop{ margin:0 0 40px; padding:0 15px; }
.gegevens-kop h2{
  margin:0;
  font-size:44px;
  font-weight:600;
  line-height:1.15;
  text-wrap:balance;
  color:var(--ink);
}

.gegeven-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:24px;
  padding:0 15px;
}
.gegeven{
  padding:28px;
  border:1px solid var(--lijn);
  border-radius:14px;
  background:#fff;
}
.gegeven-icoon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  margin:0 0 26px;
  border-radius:12px;
  background:var(--vlak);
  color:var(--ink);
}
.gegeven-icoon svg{ width:21px; height:21px; }
.gegeven h3{
  margin:0 0 8px;
  font-size:17px;
  font-weight:600;
  line-height:1.4;
  color:var(--ink);
}
.gegeven p{
  margin:0;
  font-size:15px;
  font-weight:500;
  line-height:24px;
  color:var(--grijs);
}
.gegeven a{
  color:var(--rood);
  font-weight:600;
}
.gegeven a:hover{ text-decoration:underline; }

/* de foto achter de kop van de contactpagina */
.paginakop.kopfoto-contact{
  --kopfoto:url(../img/contact-kop.jpg);
  --kopfoto-positie:50% 25%;   /* dakvlak plus het groen erachter: onder de donkere
                                  laag blijft een lager uitgesneden dak bijna zwart */
}

@media (max-width:1099px){
  .gegevens-kop h2{ font-size:36px; }
  .gegeven-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:849px){
  .gegevens{ padding:60px 0; }
  .gegevens-kop h2{ font-size:30px; }
  /* op smalle schermen loopt de tekst over de volle breedte, dus de donkere
     laag mag rechts niet oplichten */
  .paginakop.met-foto::after{
    background:linear-gradient(90deg, rgba(20,22,24,.94) 0%, rgba(20,22,24,.88) 100%);
  }
}
@media (max-width:599px){
  .gegeven-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   DIENSTENPAGINA – KOP MET OFFERTEWIZARD ERNAAST
   ========================================================= */
.paginakop-body{
  display:grid;
  grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:70px;
  align-items:start;
}

/* de wizard staat op de homepage absoluut in de hero; hier gewoon in de kolom */
.paginakop .hero-card{
  position:static;
  width:auto;
  min-width:0;
  right:auto;
  bottom:auto;
  margin:0;
  transform:none;
}
.paginakop .wizard-body{ padding:26px 30px 30px; }

@media (max-width:1099px){
  .paginakop-body{ gap:44px; }
}
@media (max-width:849px){
  .paginakop-body{ grid-template-columns:1fr; gap:36px; }
  .paginakop .wizard-body{ padding:24px 24px 26px; }
}

/* lijstjes in een tekstblok */
.inhoud ul{ margin:0 0 20px; padding-left:22px; }
.inhoud li{
  margin-bottom:9px;
  font-size:16px;
  font-weight:500;
  line-height:26px;
  color:var(--grijs);
}
.inhoud li a{ color:var(--rood); text-decoration:underline; }
.inhoud li a:hover{ color:var(--ink); }

/* =========================================================
   UITGELICHT TEKSTBLOK
   ========================================================= */
.uitgelicht{
  padding:80px 0 90px;
  background:var(--vlak);
}
.uitgelicht-inner{
  max-width:820px;
  padding:0 15px;
}
.uitgelicht h2{
  margin:0 0 20px;
  font-size:32px;
  font-weight:600;
  line-height:42px;
  color:var(--ink);
}
.uitgelicht p{
  margin:0 0 20px;
  font-size:16px;
  font-weight:500;
  line-height:26px;
  color:var(--grijs);
}
.uitgelicht ul{ margin:0 0 20px; padding-left:22px; }
.uitgelicht li{
  margin-bottom:9px;
  font-size:16px;
  font-weight:500;
  line-height:26px;
  color:var(--grijs);
}
.uitgelicht p a,
.uitgelicht li a{ color:var(--rood); text-decoration:underline; }
.uitgelicht .button{ margin:8px 0 0; color:#fff; text-decoration:none; }

/* de foto bij de dakinspectiepagina */
.paginakop.kopfoto-inspectie{
  --kopfoto:url(../img/inspectie-kop.jpg);
  --kopfoto-positie:50% 0%;   /* de gevel en de lichtkoepel erbij: alleen het
                                 dakvlak wordt onder de donkere laag bijna zwart */
}

@media (max-width:849px){
  .uitgelicht{ padding:60px 0 66px; }
  .uitgelicht h2{ font-size:26px; line-height:36px; }
}

/* =========================================================
   SECTIEVARIANTEN – om licht en donker te laten alterneren
   op pagina's met veel secties achter elkaar
   ========================================================= */
.uitgelicht.op-wit{ background:#fff; }
.faq.op-vlak{ background:var(--vlak); }
.faq.op-vlak .faq-item{ border-color:#d9d6d2; }
.faq.op-vlak .faq-item:first-child{ border-top-color:#d9d6d2; }

/* de foto bij de pagina over platte daken */
.paginakop.kopfoto-plat{
  --kopfoto:url(../img/sectie2.jpg);
  --kopfoto-positie:50% 40%;
}

/* kopfoto's van de overige dienstenpagina's */
.paginakop.kopfoto-hellend{
  --kopfoto:url(../img/werkgebied.jpg);
  --kopfoto-positie:50% 45%;
}
.paginakop.kopfoto-goten{
  --kopfoto:url(../img/over-kop.jpg);
  --kopfoto-positie:50% 55%;
}
.paginakop.kopfoto-dakkapel{
  --kopfoto:url(../img/hero.jpg);
  --kopfoto-positie:50% 30%;
}
.paginakop.kopfoto-isolatie{
  --kopfoto:url(../img/inspectie-werk.jpg);
  --kopfoto-positie:50% 50%;
}
.paginakop.kopfoto-lekkage{
  --kopfoto:url(../img/contact-kop.jpg);
  --kopfoto-positie:50% 30%;
}
.paginakop.kopfoto-reparatie{
  --kopfoto:url(../img/over-werk.jpg);
  --kopfoto-positie:50% 35%;
}
.paginakop.kopfoto-loodwerk{
  --kopfoto:url(../img/inspectie-kop.jpg);
  --kopfoto-positie:50% 15%;
}

/* =========================================================
   WERKGEBIEDPAGINA
   ========================================================= */

/* dezelfde kaart als .materiaal, maar aanklikbaar */
a.materiaal{
  display:block;
  transition:transform .2s, box-shadow .2s;
}
a.materiaal:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 24px rgba(0,0,0,.10);
}
a.materiaal .materiaal-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
  font-size:14px;
  font-weight:600;
  color:var(--rood);
}
a.materiaal .materiaal-link svg{
  width:15px;
  height:15px;
  transition:transform .2s;
}
a.materiaal:hover .materiaal-link svg{ transform:translateX(4px); }

@media (prefers-reduced-motion:reduce){
  a.materiaal,a.materiaal .materiaal-link svg{ transition:none; }
  a.materiaal:hover{ transform:none; }
}

/* negen dienstenkaarten staan het mooist in 3x3 in plaats van 4+4+1 */
.materiaal-grid.drie{ grid-template-columns:repeat(3,1fr); }
@media (max-width:1099px){
  .materiaal-grid.drie{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:599px){
  .materiaal-grid.drie{ grid-template-columns:1fr; }
}

/* vervolgtekst onder het tekst/foto-blok, over de volle breedte van de kolom */
.inhoud-vervolg{
  max-width:820px;
  margin:56px 0 0;
  padding:0 15px;
}
.inhoud-vervolg > :first-child{ margin-top:0; }

/* spoedmelding: valt op tussen de lopende tekst */
.spoed{
  display:flex;
  gap:16px;
  margin:0 0 20px;
  padding:20px 22px;
  border-left:3px solid var(--rood);
  border-radius:0 12px 12px 0;
  background:var(--vlak);
}
.spoed-icoon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:50%;
  background:rgba(231,20,27,.12);
  color:var(--rood);
  flex:0 0 auto;
}
.spoed-icoon svg{ width:19px; height:19px; }
.spoed p{ margin:0; }
.spoed p + p{ margin-top:8px; }
.spoed strong{ font-weight:600; color:var(--ink); }

@media (max-width:479px){
  .spoed{ flex-direction:column; gap:12px; padding:18px; }
}

.paginakop.kopfoto-denbosch{
  --kopfoto:url(../img/over-kop.jpg);
  --kopfoto-positie:50% 62%;
}
.paginakop.kopfoto-rosmalen{
  --kopfoto:url(../img/werkgebied.jpg);
  --kopfoto-positie:50% 45%;
}
.paginakop.kopfoto-vught{
  --kopfoto:url(../img/hero.jpg);
  --kopfoto-positie:35% 25%;
}
.paginakop.kopfoto-drunen{
  --kopfoto:url(../img/contact-kop.jpg);
  --kopfoto-positie:50% 25%;
}
.paginakop.kopfoto-vlijmen{
  --kopfoto:url(../img/over-kop.jpg);
  --kopfoto-positie:35% 45%;
}
.paginakop.kopfoto-boxtel{
  --kopfoto:url(../img/inspectie-kop.jpg);
  --kopfoto-positie:50% 20%;
}
.paginakop.kopfoto-zaltbommel{
  --kopfoto:url(../img/sectie2.jpg);
  --kopfoto-positie:50% 25%;
}
.paginakop.kopfoto-oss{
  --kopfoto:url(../img/hero.jpg);
  --kopfoto-positie:60% 45%;
}
.paginakop.kopfoto-veghel{
  --kopfoto:url(../img/over-werk.jpg);
  --kopfoto-positie:50% 20%;
}

/* =========================================================
   OVERZICHTSPAGINA'S
   ========================================================= */

/* de dienstenkaarten van de homepage, hergebruikt op het overzicht:
   daar staat de sectie direct onder de paginakop en is de extra ruimte niet nodig */
.diensten.overzicht{
  margin-top:0;
  padding:80px 0 90px;
}
@media (max-width:849px){
  .diensten.overzicht{ padding:60px 0 66px; }
}

.paginakop.kopfoto-diensten{
  --kopfoto:url(../img/inspectie-kop.jpg);
  --kopfoto-positie:50% 20%;
}
.paginakop.kopfoto-werkgebied{
  --kopfoto:url(../img/over-kop.jpg);
  --kopfoto-positie:50% 55%;
}

/* compacte plaatskaartjes op het werkgebiedoverzicht: alleen de naam,
   voor plaatsen zonder eigen pagina */
.stad-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
  margin:0 0 44px;
  padding:0 15px;
}
.stad{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:15px 12px;
  border:1px solid var(--lijn);
  border-radius:12px;
  background:#fff;
  font-size:15px;
  font-weight:600;
  line-height:1.4;
  text-align:center;
  color:var(--ink);
}

/* de kopjes en de toelichting boven een rij plaatsen */
.materialen .plaatsen-kop{ padding:0 15px; }
.plaatsen-toelichting{
  margin:-4px 0 20px;
  padding:0 15px;
  font-size:16px;
  font-weight:500;
  line-height:25.6px;
  color:var(--grijs);
}

@media (max-width:1099px){
  .stad-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:599px){
  .stad-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
}