/*!
 * Verfijning bovenop de Webflow-export.
 *
 * Twee problemen die de pagina lang en onrustig maken vergeleken met sterk
 * converterende concurrenten:
 *
 * 1. Koppen schalen niet. Van 768px tot 1920px is een h1 altijd 120px. Op een
 *    laptop is dat 15,6% van de schermbreedte, op een breed scherm 6,3%.
 * 2. Sectiepadding kent zeven verschillende combinaties (168/80, 160/160,
 *    120/96, 120/120, 80/80, 80/120). Referentiesites gebruiken er drie.
 *
 * Gevolg: de pagina is 13 schermen lang met 12 secties, waar de referentie
 * 13 secties in 8,9 schermen kwijt kan. Elke sectie is 58% hoger dan nodig.
 *
 * Deze regels laten de Webflow-export intact en corrigeren alleen de maatvoering.
 * Verankerd op de bestaande waarden bij 1440px, zodat daar niets verschuift.
 */

/* ---------------------------------------------- 1. vloeiende koppen */
/* LET OP: Webflow koppelt de tags kruislings aan de variabelen. Een h2 gebruikt
   --h3--font-size (64px), een h3 gebruikt --h4 (48px). Wie de h2-variabele
   aanhoudt maakt de koppen juist grooter. Onderstaande maxima zijn de maten
   zoals ze nu op 1440px renderen; de minima die van de mobiele stijl. */
/* Schaal overgenomen van besteleendakkapel.nl (01-09-2026). Hun stylesheet
   zet `:root` op 20px, dus hun rem-waarden zijn hier naar pixels omgerekend:

     .alpha / h1   clamp(2.125rem, 1.25rem  + 3.88889vw, 5.625rem)
     .beta  / h2   clamp(2.0625rem, 1.5625rem + 2.22222vw, 4.0625rem)

   Het verschil met wat hier stond zit vooral aan de ondergrens: onze h1 zakte
   niet verder dan 64px, en dat is op een telefoon van 390px ongeveer vijf
   letters per regel. Aan de bovenkant scheelt het weinig (112 tegen 120). */
h1, .text-h1, .h1-small { font-size: clamp(42px, calc(25px + 3.8889vw), 112px); }
h2, .text-h2            { font-size: clamp(41px, calc(31px + 2.2222vw), 81px); }
/* h3 is bij ons de sectiekop op 48px; die bovengrens houden we, want het
   playbook legt hem vast. Alleen de ondergrens volgt hun verhouding. */
h3, .text-h3, .text-h4  { font-size: clamp(27px, calc(13.714px + 2.381vw), 48px); }
h4                      { font-size: clamp(32px, calc(13.714px + 2.381vw), 48px); }
.text-h5                { font-size: clamp(28px, calc(14.286px + 1.7857vw), 40px); }
.text-h6                { font-size: clamp(24px, calc(14.857px + 1.1905vw), 32px); }
.text-h7                { font-size: clamp(20px, calc(17.714px + 0.2976vw), 22px); }

/* De hero mag groter blijven dan de rest, maar wel meeschalen. */
/* De hero-h1 draagt .h1-small._2 en dat wint van de regel hierboven; hij
   moet dus dezelfde schaal krijgen, anders blijft hij op 120px staan. */
.h1-small._2            { font-size: clamp(42px, calc(25px + 3.8889vw), 112px); }

/* ------------------------------------------ 2. één padding-schaal */
/* Referentie gebruikt drie banden: klein 64-80, normaal 64-120, groot 96-160.
   Hier teruggebracht naar één vloeiende schaal in plaats van zeven vaste waarden.
   De selectors moeten net zo specifiek zijn als die van Webflow
   (.section.home-c-column-section), anders winnen die. */
.section.home-c-column-section,
.section.home-b-main-features-section,
.section.home-slider-section,
.section.home-a-testimonial-section,
.section.home-b-blog-section,
.section.faq-section,
.section.latest-article-section,
.section.home-a-faq-section {
  padding-top: clamp(56px, 6.4vw, 92px);
  padding-bottom: clamp(56px, 6.4vw, 92px);
}

/* De hero-bovenpadding staat in §30 (vaste header), niet meer hier. */

/* De footer heeft sinds 07-09-2026 zijn eigen klassen (§31, hr-voet). */

/* ------------------------------------ 3. rustiger ruimte binnen secties */
.body-article.w-richtext > * + *,
.rich-text-block.w-richtext > * + * { margin-top: .7em; }

.body-article.w-richtext h2,
.body-article.w-richtext h3,
.rich-text-block.w-richtext h2,
.rich-text-block.w-richtext h3 { margin-top: 1.1em; }

/* ------------------------------------------ 4. beeldhoogte beteugelen */
/* .column-image-wrap staat vast op 680px. Bij drie kolomsecties op een pagina
   is dat ruim 2000px alleen aan beeld. De referentie houdt sectiebeelden rond
   de 450-550px. Vloeiend, zodat het op smalle schermen niet dominant wordt. */
.column-image-wrap { height: clamp(280px, 34vw, 520px); }

/* De hero-afbeelding op artikel- en locatiepagina's mag iets ruimer. */
.article-main-image { height: clamp(240px, 30vw, 420px); }

/* ------------------------------- 5. lucht binnen de feature-lijsten */
/* De tegels onder een kop staan ver uit elkaar, waardoor drie punten al
   800px innemen. */
.main-features-list { gap: clamp(14px, 1.4vw, 22px); }
.main-features-item { padding-top: 0; padding-bottom: 0; }
.feature-tile { padding-top: clamp(10px, 1.1vw, 16px); padding-bottom: clamp(10px, 1.1vw, 16px); }

/* ---------------------------------- 6. secties niet forceren op schermhoogte */
/* .section.home-b-main-features-section staat op min-height:100svh. Op de
   uitbouwpagina heeft zo'n sectie 490px inhoud maar wordt hij 900px hoog:
   410px lege ruimte, en dat drie keer per pagina. Een sjabloon-standaard die
   niet bij deze hoeveelheid content past.
   De hero houdt wel volle hoogte; daar hoort het bij. */
.section.home-b-main-features-section { min-height: auto; }

/* ------------------------------------------- 7. reactie op aanwijzen (hover) */
/* Overgenomen van de referentiesite, op verzoek van 31-08-2026. Hun twee
   curves en duren:
     vlakken  0,5s cubic-bezier(.22, .61, .36, 1)
     knoppen  0,3s cubic-bezier(.4, 0, .2, 1)

   Hun systeem maakt één onderscheid dat we aanhouden: beweging betekent
   klikbaar. Bij hen krijgt alleen `a.o-card` een transform; hun 39 andere
   hover-regels veranderen uitsluitend kleur. Kaarten die geen link zijn
   krijgen hier dus wel kleur en schaduw, maar geen beweging — anders belooft
   een kaart een klik die er niet is. */

/* Zie sectie 10: de kaartbehandeling is daar samengebracht. */

/* Projectkaarten zijn wél een link. Webflow doet daar al de beeldzoom en de
   overlay; wat ontbrak is dat de kaart zelf naar voren komt. Dat is precies
   hun `a.o-card { transition: box-shadow .5s ... }`. */
a.story-item {
  transition: box-shadow .5s cubic-bezier(.22, .61, .36, 1);
}
a.story-item:hover {
  box-shadow: 0 14px 40px -6px rgba(31, 25, 21, .18);
}

/* Knoppen liepen op .2s zonder curve; hun micro-timing is .3s met een ease. */
.cta-main {
  transition: color .3s cubic-bezier(.4, 0, .2, 1),
              background-color .3s cubic-bezier(.4, 0, .2, 1),
              border-color .3s cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .card-why-us, a.story-item, .cta-main { transition-duration: .01ms; }
}

/* ------------------------------------------ 8. de knoppenrij in de hero */
/* De hero heeft sinds 31-08-2026 drie CTA's (offerte, adviesgesprek,
   prijsindicatie): de drie drempelniveaus uit het playbook.

   .div-block-4 is een pilvormige houder — donkere vulling, radius 48px,
   3px padding — gemaakt voor twee knoppen op één regel. Met drie knoppen
   liep de pagina over de rand, en liet je hem afbreken dan viel de pilvorm
   uit elkaar: een lozenge van 107px hoog met knoppen die er half in hangen.

   De configurator zit daarom niet in de pil maar als tekstlink eronder: hij
   is het laagste drempelniveau en hoort niet te concurreren met de offerte.

   Boven 768px blijft het dus de oorspronkelijke pil met twee knoppen op één
   regel. Geen flex-wrap: bij 1024px werden de knoppen 232px breed en pasten
   ze samen net niet meer, waardoor de pil een lozenge van 134px werd.
   Daaronder laten we de pilvorm helemaal los. */
.hero-button-wrap .div-block-4 > .cta-main {
  flex: 0 1 auto;
}
/* In een pilvormige knoppenrij hoort een label niet af te breken: tussen
   1024 en 1150px viel "Offerte aanvragen" over twee regels en werd de pil
   90px hoog in plaats van 60px. */
.hero-button-wrap .div-block-4 .button-text,
.hero-button-wrap .div-block-4 .button-text-small {
  white-space: nowrap;
}

@media (max-width: 767px) {
  /* Ook de omhullende wrap krimpt naar zijn inhoud; die moet mee, anders
     blijven de knoppen op 178px staan hoe vaak je width:100% ook zet. */
  .hero-button-wrap,
  .hero-button-wrap.under {
    width: 100%;
    align-self: stretch;
  }

  .hero-button-wrap .div-block-4,
  .hero-button-wrap.under .div-block-4 {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    background: transparent;
    border-radius: 0;
    padding: 0;
    /* Zonder dit krimpt de houder naar de breedte van zijn breedste knop:
       met flex-direction:column is dat de intrinsieke breedte. */
    width: 100%;
  }
  /* Vol breed. .cta-main is inline-block met een eigen breedte, dus
     align-items:stretch alleen is niet genoeg. */
  .hero-button-wrap .div-block-4 > .cta-main,
  .hero-button-wrap.under .div-block-4 > .cta-main {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: none;
  }
  /* De secundaire knoppen houden hun donkere vulling en dus lichte tekst.
     Die op donker zetten gaf een contrast van ongeveer 1:1. */
  .hero-button-wrap .div-block-4 > .cta-main:not(.accent-5) .button-text,
  .hero-button-wrap .div-block-4 > .cta-main:not(.accent-5) .button-text-small {
    color: var(--_colors---color--light, #fffdf6);
  }
}


/* --------------------------------------- 9. letterspatiëring en regelhoogte */
/* Het thema zet -3px op h1 en -2px op de rest, ongeacht de tekengrootte. Op
   een kop van 112px is dat 2,7% en prima; op 48px is het 4,2% en op 21px
   14%, en dan plakken de woorden aan elkaar. besteleendakkapel gebruikt
   `letter-spacing: normal` op al zijn koppen; dat nemen we over.

   De regelhoogte gaat mee naar 1,05. Zij staan op 1; dat is bij Outfit net
   te krap voor koppen die over twee regels lopen. */
h1, h2, h3, h4, h5, h6,
.text-h1, .text-h2, .text-h3, .text-h4, .text-h5, .text-h6, .text-h7,
.h1-small {
  letter-spacing: normal;
  line-height: 1.05;
}

/* Lopende tekst houdt zijn eigen regelhoogte: 1,05 is voor koppen. */
p, li, .text-body, .paragraph { line-height: 1.55; }


/* ------------------------------------------ 10. één kaartbehandeling */
/* Er stonden drie behandelingen naast elkaar voor dezelfde soort kaart:

     .card-why-us        #fcfaf5 met schaduw
     .card-testimonial   #fffdf6 zonder schaduw
     .expandable-single  #fcfaf5 met schaduw   (de FAQ-accordeon)

   Alle drie zijn een inhoudskaart met een icoon of een vraag erin, dus er
   was geen reden om ze verschillend te behandelen. Ze volgen nu de kaart uit
   de configurator: wit vlak, dunne rand, geen schaduw in rust, schaduw pas
   bij aanwijzen.

   Wat hier bewust NIET in meegaat:
     .story-item    is een beeldtegel; de foto is de kaart, en het
                    miniatuur heeft al r16 met overflow:hidden
     .feature-tile  is een lijstitem, geen kaart */
.card-why-us,
.card-testimonial,
.expandable-single {
  background-color: #fff;
  border: 1px solid var(--_colors---color--dark-16, #1f191529);
  box-shadow: none;
  transition: box-shadow .5s cubic-bezier(.22, .61, .36, 1),
              border-color .3s cubic-bezier(.22, .61, .36, 1);
}

/* Aanwijzen geeft dieptewerking, geen beweging: deze kaarten zijn geen link.
   Zie de regel in sectie 7. De FAQ-kaart is wél klikbaar en krijgt daarom
   ook een duidelijker rand. */
.card-why-us:hover,
.card-testimonial:hover {
  box-shadow: 0 10px 34px 2px rgba(31, 25, 21, .10);
}
.expandable-single:hover {
  border-color: var(--_colors---color--dark-32, #1f191552);
  box-shadow: 0 10px 34px 2px rgba(31, 25, 21, .10);
}

@media (prefers-reduced-motion: reduce) {
  .card-why-us, .card-testimonial, .expandable-single { transition-duration: .01ms; }
}


/* ------------------------------- 11. vaste elementen botsen niet meer */
/* De cookievoorkeurenknop staat rechtsonder vast, en daar staat ook de
   contactbalk. Gemeten op 01-09-2026: op desktop overlapten ze elkaar
   (balk x1096-1420, knop x1299-1426), op een telefoon lag de knop midden
   op de balk. De knop wijkt nu omhoog zodra de balk verschijnt. */
body.hr-actiebalk-zichtbaar #hrc-herroep {
  bottom: 96px;
  transition: bottom .3s cubic-bezier(.4, 0, .2, 1);
}
@media (min-width: 900px) {
  body.hr-actiebalk-zichtbaar #hrc-herroep { bottom: 100px; }
}

/* ------------------------------------ 12. lucht binnen de kaarten */
/* De kaarten staan op justify-content:space-between en krijgen hun hoogte
   van de langste kaart in de rij. Bij een korte kaart viel daardoor 77px
   dood gat tussen het icoon en de kop. De inhoud gaat naar boven; de
   overgebleven ruimte valt onderaan, waar hij niet opvalt. */
.card-why-us { justify-content: flex-start; }


/* --------------------------------------------- 13. één sectieritme */
/* Gemeten op 01-09-2026 over zeven pagina's: 92/92 komt 28 keer voor en is
   dus de norm (die staat in sectie 4 hierboven). Wat eromheen zwierf:

     home-a-about-section.dark   120/120
     about-b-vision-section      120/120
     about-b-features-section    120/160
     een naamloze sectie         80/80

   Vier afwijkingen op ruim veertig secties. Ze gaan mee in het ritme, zodat
   scrollen door de site een voorspelbare maat krijgt. */
.section.home-a-about-section,
.section.about-b-vision-section,
.section.about-b-features-section {
  padding-top: clamp(56px, 6.4vw, 92px);
  padding-bottom: clamp(56px, 6.4vw, 92px);
}

/* Een kale <section class="section"> zonder variant valt terug op de basis
   van 80/80. Die basis gaat mee in het ritme; de varianten hierboven hebben
   twee klassen en winnen dus waar ze gelden. */
.section {
  padding-top: clamp(56px, 6.4vw, 92px);
  padding-bottom: clamp(56px, 6.4vw, 92px);
}

/* De heroes hadden vier maten: 130/80 op de dienst- en locatiepagina's,
   168/120 op projecten, 0/80 op over-ons. De eerste wordt de norm.

   Ze staan hier expliciet omdat de basisregel hierboven ze anders overneemt:
   hun eigen padding komt van één klasse (.hero-home-b) en weegt dus even
   zwaar als .section, waarna de latere regel wint. Met :not() eromheen zou
   de specificiteit juist boven de variantregels uitkomen en die breken. */
.section.hero-home-b,
.section.hero-article,
.section.hero-stories {
  padding-bottom: clamp(48px, 5.6vw, 80px);
}
/* Over-ons houdt zijn 0 bovenaan: daar loopt het beeld tot tegen de
   navigatie aan. */
.section.hero-about-b {
  padding-top: 0;
  padding-bottom: clamp(48px, 5.6vw, 80px);
}

/* -------------------------------------------- 14. formulieren gelijk */
/* De site kent twee knopkleuren en dat is een systeem, geen toeval:
     .accent-5  oranje  = conversie (offerte, adviesgesprek)
     .accent    blauw   = navigatie (Ontdek, Bekijk project)

   Eén knop viel buiten dat systeem: "Plan uw afspraak" verstuurt een
   formulier — een conversie — maar droeg de navigatiekleur. Op 56 pagina's.
   De 28 andere blauwe knoppen zijn wél navigatie en blijven blauw. */
#wf-form-Vrijblijvend-gesprek-form .cta-main.accent,
form[data-name="Vrijblijvend gesprek form"] .cta-main.accent {
  background-color: var(--_colors---color--orange, #ff7600);
}
#wf-form-Vrijblijvend-gesprek-form .cta-main.accent:hover,
form[data-name="Vrijblijvend gesprek form"] .cta-main.accent:hover {
  background-color: #e66a00;
}

/* De velden van dat formulier stonden op r4 met een felblauwe rand. De
   configurator gebruikt een rustiger rand met een duidelijke focusring; dat
   is beter te lezen en het maakt duidelijk waar je bent. */
.text-field.contact-field {
  border-radius: var(--radius--10, 10px);
  border-color: var(--_colors---color--dark-16, #1f191529);
  transition: border-color .3s cubic-bezier(.4, 0, .2, 1),
              box-shadow .3s cubic-bezier(.4, 0, .2, 1);
}
.text-field.contact-field:focus {
  outline: 0;
  border-color: var(--_colors---color--accent, #189be9);
  box-shadow: 0 0 0 3px #189be92e;
}
.text-field.contact-field::placeholder {
  color: var(--_colors---color--dark-48, #1f19157a);
}

@media (prefers-reduced-motion: reduce) {
  .text-field.contact-field { transition-duration: .01ms; }
}

/* ----------------------------------------- 15. USP-rij in de hero */
/* Marktleiders (Prefast, De Prefabriek, Hollands Prefab) zetten garantie,
   ervaring en aantal klanten boven de vouw. Bij ons stonden dezelfde feiten
   pas halverwege de pagina. Dit zijn uitsluitend claims die elders op de
   pagina al staan. */
.hero-usp {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  list-style: none; margin: 18px 0 0; padding: 0;
  font-family: var(--font--secondary, sans-serif); font-size: 14px; font-weight: 500;
  color: var(--_colors---color--dark, #1f1915);
}
.hero-usp li { display: inline-flex; align-items: center; gap: 7px; }
.hero-usp li::before {
  content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%;
  background: var(--_colors---color--accent, #189be9)
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m4 8.5 2.6 2.6L12 5.6"/></svg>') center/10px no-repeat;
}

/* ------------------------------------ 16. stappenproces "Zo werkt het" */
/* Alle drie de marktleiders tonen een genummerd proces; hier ontbrak het.
   Zelfde kaart als "Dit moet u weten", met een stapnummer op de plek van
   het icoon. */
.stap-nr {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--_colors---color--accent, #189be9); color: #fff;
  font-family: var(--font--main, sans-serif); font-size: 18px; font-weight: 600; line-height: 1;
}
.vwb { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ------------------------------------------------ 17. offertepagina */
/* Marktleiders sturen 'offerte' rechtstreeks naar hun calculator. Deze pagina
   bedient tien diensten, dus hij blijft een formulier; maar voor een uitbouw
   staat de configurator bovenaan als laagste drempel. */
.offerte-cfg {
  display: grid; gap: 6px; margin: 0 0 26px; padding: 18px 20px;
  background: var(--_colors---color--bg-3, #eff9fe); border: 1px solid #cbe8f8;
  border-radius: var(--radius--16, 16px); color: var(--_colors---color--dark, #1f1915);
  text-decoration: none; transition: box-shadow .5s cubic-bezier(.22,.61,.36,1), border-color .3s cubic-bezier(.22,.61,.36,1);
}
.offerte-cfg:hover { border-color: var(--_colors---color--accent, #189be9); box-shadow: 0 10px 30px -8px rgba(24,155,233,.35); }
.offerte-cfg[hidden] { display: none; }
.offerte-cfg__kop { font-family: var(--font--main, sans-serif); font-size: 19px; font-weight: 600; }
.offerte-cfg__tekst { font-family: var(--font--secondary, sans-serif); font-size: 14px; color: var(--_colors---color--dark-64, #1f1915a3); }
.offerte-cfg__knop { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-family: var(--font--secondary, sans-serif); font-size: 14px; font-weight: 600; color: var(--_colors---color--blue-2, #005aa7); }

/* Stapaanduiding: eerst waar het om gaat, dan wie je bent. Zelfde nummerbadge
   als "Zo werkt het" op de uitbouwpagina. */
.offerte-stap { display: flex; align-items: center; gap: 10px; margin: 6px 0 14px; font-family: var(--font--main, sans-serif); font-size: 17px; font-weight: 600; color: var(--_colors---color--dark, #1f1915); }
.offerte-stap + .offerte-stap, .field_wrap + .offerte-stap { margin-top: 30px; }
.offerte-stap__nr { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--_colors---color--accent, #189be9); color: #fff; font-size: 14px; }
.field_optioneel { font-family: var(--font--secondary, sans-serif); font-size: 12px; font-weight: 500; color: var(--_colors---color--dark-48, #1f19157a); margin-left: 8px; vertical-align: middle; }

/* De onderstreepte velden hadden bij focus alleen een zwarte lijn. Nu de
   accentkleur, dik genoeg om te zien waar je bent. */
.field.w-input:focus, textarea.field:focus { outline: 0; border-bottom: 2px solid var(--_colors---color--accent, #189be9); }

/* 18. Blokken die met hun inhoud meegroeien
   ------------------------------------------------------------------
   Reviewkaart: het thema zet op telefoons `height: 340px` en overal
   `min-height: 350px`; de min wint, dus de kaart staat vast op 350px.
   De langste review heeft op 360–430px 378px nodig en hing daardoor
   met naam en Google-logo onder de kaart uit. De slider zelf staat al
   op `height: auto` en slide en masker volgen met `height: 100%`, dus
   alleen de kaart hoefde los. */
.slide-card .card-testimonial { height: auto; min-height: 350px; }
@media (max-width: 479px) {
  .slide-card .card-testimonial { height: auto; min-height: 340px; }
}

/* Smalste telefoons (≤339px): de Google-badge is 308px en mag niet krimpen,
   waardoor navigatie en actiebalk met hun 10px zijmarge 10px over de rand
   vielen en de pagina horizontaal scrolde. Zonder zijmarge past alles. */
@media (max-width: 339px) {
  .top-bar-wrapper---brix, .div-block-7, .div-block-8 { margin-left: 0; margin-right: 0; }
  .div-block-7 { border-radius: 0; }
  .google-basic-badge-3 { max-width: 100%; }
}

/* Prijsschuif in de waardesectie: .range-box is een vaste 360px in een
   container die op 320px nog 288px breed is, gecentreerd, dus 20px over
   beide randen. Dat was de laatste horizontale scroll op smalle telefoons. */
.range-wrapper, .range-box { max-width: 100%; }
/* .range-wrapper is een flex-kind dat zijn breedte van .range-box krijgt; een
   max-width op de schuif alleen is dan circulair (100% van 360 = 360). */

/* 19. Lange woorden in koppen en artikeltekst
   ------------------------------------------------------------------
   "Pijnacker/Nootdorp?", "Financieringsmogelijkheden" en
   "Uitbreidingsoplossingen" pasten op 390px niet in de kolom en duwden de
   pagina 50 tot 140px breder dan het scherm. overflow-wrap: anywhere breekt
   alléén een woord dat in zijn eentje niet op de regel past; hyphens: auto
   deed dat ook waar het niet nodig was ("aan-bouw", "Renova-tie") en is
   daarom weer weg. */
.hero-article h1, .hero-article h2, .headline-article h1, .headline-article h2,
.body-article, .body-article h1, .body-article h2, .body-article h3,
.faq-paragraph, .text-h7 {
  overflow-wrap: anywhere;
}

/* Google-badge in de navigatie op de smalste telefoons: 308px breed plus
   32px containerpadding is 340px, dus 20px scroll op 320px. Iets kleiner
   zetten is genoeg; boven 339px verandert er niets. */
@media (max-width: 339px) {
  .google-basic-badge-3 { font-size: 12px; column-gap: 1px; padding-left: 6px; padding-right: 6px; }
  .google-basic-badge-3 svg { width: 13px; height: 13px; }
}

/* Kolomsecties: .heading-column is een flex-kind met min-width: auto, dus een
   lang woord in de kop ("Woningrenovatie:") maakte de kolom breder dan het
   scherm op 320px. Krimpen toestaan en het woord laten afbreken. */
.heading-column, .column-content-wrap { min-width: 0; }
.heading-column h2, .heading-column h3, .w-richtext h2, .w-richtext h3 { overflow-wrap: anywhere; }

/* 20. Bento: een opsomming als kaarten
   ------------------------------------------------------------------
   "Klassieke aanbouw / Zij-aanbouw / Serre / Prefab" als vier losse regels
   zegt niets. Als kaart met een lijntekening en één regel uitleg wel. Zelfde
   taal als de keuzekaarten van de configurator: wit vlak, dunne rand,
   lijntekening in currentColor, zachte schaduw bij hover. */
.hr-bento {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.hr-bento--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 479px) { .hr-bento, .hr-bento--3 { grid-template-columns: minmax(0, 1fr); } }
.hr-bento__kaart {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 18px 16px;
  background: #fff;
  border: 1px solid var(--_colors---color--dark-16, #e8e4dc);
  border-radius: 16px;
  transition: box-shadow .5s cubic-bezier(.22,.61,.36,1), transform .5s cubic-bezier(.22,.61,.36,1);
}
.hr-bento__kaart:hover { box-shadow: 0 14px 34px -22px rgba(28, 25, 23, .35); transform: translateY(-2px); }
.hr-bento__beeld { width: 64px; height: 44px; color: var(--_colors---color--accent, #189be9); flex: none; }
.hr-bento__kop { font-family: var(--font--main, inherit); font-weight: 600; font-size: 17px; line-height: 1.25; color: var(--_colors---color--dark, #1f1915); }
.hr-bento__tekst { margin: 0; font-size: 15px; line-height: 1.5; color: var(--_colors---color--dark-64, #5a544e); }
.w-richtext .hr-bento__tekst { margin: 0; }
@media (prefers-reduced-motion: reduce) { .hr-bento__kaart { transition-duration: .01ms; } }

/* Korte opsommingen in artikeltekst (locatiepagina's, projecten): een lijst
   met vinkjes in twee kolommen in plaats van bolletjes onder elkaar. Alleen
   waar scripts/lijsten-bento.py de klasse zet, dus nooit op lange alinea's. */
ul.hr-lijst {
  list-style: none;
  margin: 14px 0 18px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
}
@media (max-width: 767px) { ul.hr-lijst { grid-template-columns: minmax(0, 1fr); } }
ul.hr-lijst > li {
  position: relative;
  padding: 10px 14px 10px 40px;
  background: #fff;
  border: 1px solid var(--_colors---color--dark-16, #e8e4dc);
  border-radius: 12px;
  line-height: 1.45;
}
ul.hr-lijst > li::before {
  content: "";
  position: absolute;
  left: 14px; top: 13px;
  width: 16px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23189be9'/%3E%3Cpath d='M4.5 8.3l2.4 2.4 4.8-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Bento met drie kaarten en de zachte link eronder (dienstpagina's). */
@media (max-width: 767px) { .hr-bento--3 { grid-template-columns: minmax(0, 1fr); } }
.hr-bento__link { margin: 14px 0 0; font-size: 15px; }
.hr-bento__link a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.w-richtext .hr-bento__link { margin: 14px 0 0; }

/* 21. Uitlijning op het raster
   ------------------------------------------------------------------
   Op 1440px begint elke sectie op x=32 (site-padding), behalve de
   kolomsecties: Webflow's .w-col heeft 10px padding maar .column mist de
   bijbehorende negatieve rijmarge, dus tekst en beeld stonden op x=42.
   Vanaf 768px trekken we de rij 10px naar buiten; op een telefoon hebben de
   kolommen geen padding en klopt het al. */
@media (min-width: 768px) {
  .column-master .column.w-row { margin-left: -10px; margin-right: -10px; width: calc(100% + 20px); max-width: none; }
  /* .column-right is al flex met verticale centrering; .column-left niet,
     waardoor een foto links bovenaan hing met een gat eronder zodra de tekst
     langer was. Zelfde gedrag voor beide kolommen. */
  .column-master .column-left { display: flex; justify-content: flex-start; }
}

/* Verhaalpagina's zonder eigen foto tonen een lege Webflow-placeholder van
   480px hoog. Weg ermee zolang er geen foto is. */
.article-main-image:has(> img.w-dyn-bind-empty) { display: none; }

/* Artikelpagina's (locatie, projecten, verhalen): de kop en de foto staan in
   een brede container (vanaf x=32), de tekst in een smalle van 750px (vanaf
   x=377). De kop volgt nu dezelfde kolom als de tekst; de foto blijft breed. */
.hero-article .headline-article,
.hero-article .headline-article.left { max-width: 686px; margin-left: auto; margin-right: auto; }

/* Verhaalpagina's: de CMS-titel stond gecentreerd boven een links uitgelijnde
   tekstkolom die zelf met een h1 op 112px opent. Beide koppen links, en de
   h1 in de tekst op de h2-maat: het is een artikelkop, geen hero. */
.hero-article .headline-article { text-align: left; align-items: flex-start; }
.body-article h1 { font-size: clamp(34px, calc(22px + 1.8vw), 52px); }
/* Tussenkoppen in artikeltekst volgen een leesschaal, niet de hero-schaal:
   een h2 van 81px onder een artikelkop van 52px stond op zijn kop. */
.body-article h2 { font-size: clamp(28px, calc(18px + 1.4vw), 40px); }
.body-article h3 { font-size: clamp(22px, calc(16px + 0.9vw), 28px); }

/* 22. Niets start onzichtbaar
   ------------------------------------------------------------------
   Webflow zet koppen en beelden met style="opacity:0" in de HTML en laat ze
   pas infaden als zijn animatiescript geladen en uitgevoerd is. Op mobiel
   was de kop van de homepage daardoor pas na 9,8 s zichtbaar (LCP), terwijl
   de tekst er allang stond. Alles staat nu direct; de fade vervalt. */
[data-w-id][style*="opacity:0"], [data-w-id][style*="opacity: 0"] { opacity: 1 !important; }

/* 23. Homepage: hero op foto, drie panelen, maatkiezer
   ------------------------------------------------------------------
   Naar het stramien van de referentie: gecentreerde kop met accentwoord,
   knoppenpil en microcopy boven een brede foto; daarna een band met drie
   panelen (donkerblauw · foto · blauw) en een maatkiezer die direct naar een
   maat in de configurator linkt. Kleuren en knoppen zijn die van de site. */
.hr-hero { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 72px); background: var(--_colors---color--bg-1, #fffdf6); }
.hr-hero__kop { display: grid; justify-items: center; text-align: center; gap: 18px; max-width: 880px; margin: 0 auto; }
.hr-hero__titel { font-size: clamp(38px, calc(20px + 4.2vw), 88px); line-height: 1.02; letter-spacing: -.02em; margin: 0; text-wrap: balance; max-width: 16ch; }
.hr-hero__accent { color: var(--_colors---color--accent, #189be9); }
.hr-hero__sub { font-size: clamp(17px, calc(15px + .5vw), 21px); line-height: 1.5; max-width: 54ch; margin: 0; color: var(--_colors---color--dark-64, #5a544e); }
.hr-hero__knoppen { margin: 6px 0 0; }
.hr-hero__knoppen .div-block-4 { justify-content: center; }
.hr-hero__micro { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: 14px; color: var(--_colors---color--dark-64, #5a544e); }
.hr-hero__micro svg { color: var(--_colors---color--accent, #189be9); flex: none; }
.hr-hero__usp { justify-content: center; margin-top: 4px; }
.hr-hero__beeld { position: relative; margin: clamp(28px, 4vw, 48px) auto 0; border-radius: 24px; overflow: hidden; aspect-ratio: 16 / 7; background: var(--_colors---color--dark-16, #e8e4dc); }
.hr-hero__beeld img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hr-hero__bewijs { position: absolute; left: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 100vw; background: #fff; color: var(--_colors---color--dark, #1f1915); font-size: 14px; box-shadow: 0 10px 30px -18px rgba(0,0,0,.5); }
.hr-hero__ster { color: var(--_colors---color--accent-2, #ff7600); font-size: 15px; line-height: 1; }
@media (max-width: 767px) {
  .hr-hero__beeld { aspect-ratio: 4 / 3; border-radius: 18px; }
  .hr-hero__bewijs { left: 12px; bottom: 12px; font-size: 13px; }
  .hr-hero__usp { justify-content: flex-start; }
}

.hr-panelen { padding: 0; }
.hr-panelen__raster { display: grid; grid-template-columns: 1.05fr 1fr 1.05fr; min-height: 560px; }
.hr-panelen__paneel { display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 4vw, 64px); }
.hr-panelen__paneel--donker { background: var(--_colors---color--bg-blue, #005aa7); color: #fff; }
.hr-panelen__paneel--licht { background: var(--_colors---color--accent, #189be9); color: #fff; }
.hr-panelen__label { font-family: var(--font--main, inherit); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; opacity: .85; margin: 0 0 14px; }
.hr-panelen__kop { color: inherit; font-size: clamp(30px, calc(20px + 1.6vw), 46px); line-height: 1.05; margin: 0 0 16px; text-wrap: balance; }
.hr-panelen__tekst { font-size: 17px; line-height: 1.55; margin: 0 0 24px; max-width: 34ch; opacity: .92; }
.hr-panelen__knop { align-self: flex-start; }
.hr-panelen__foto { position: relative; min-height: 320px; }
.hr-panelen__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hr-panelen__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.hr-panelen__lijst li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; }
.hr-panelen__lijst svg { margin-top: 2px; }
.hr-panelen__lijst h3 { color: inherit; font-size: 18px; line-height: 1.25; margin: 0 0 4px; }
.hr-panelen__lijst p { margin: 0; font-size: 15px; line-height: 1.5; opacity: .92; }
@media (max-width: 991px) {
  .hr-panelen__raster { grid-template-columns: 1fr 1fr; }
  .hr-panelen__paneel--licht { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .hr-panelen__raster { grid-template-columns: 1fr; }
  .hr-panelen__foto { min-height: 260px; order: -1; }
}

.hr-maatkiezer { background: var(--_colors---color--bg-blue, #005aa7); color: #fff; }
.hr-maatkiezer__kop { text-align: center; max-width: 640px; margin: 0 auto 28px; }
.hr-maatkiezer__titel { color: inherit; font-size: clamp(30px, calc(20px + 1.8vw), 50px); line-height: 1.05; margin: 0 0 12px; text-wrap: balance; }
.hr-maatkiezer__sub { margin: 0; font-size: 17px; line-height: 1.5; opacity: .9; }
.hr-maatkiezer__raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 991px) { .hr-maatkiezer__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .hr-maatkiezer__raster { grid-template-columns: minmax(0, 1fr); } }
.hr-maat { display: grid; gap: 4px; padding: 20px 20px 18px; background: #fff; color: var(--_colors---color--dark, #1f1915); border-radius: 16px; text-decoration: none; transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s cubic-bezier(.22,.61,.36,1); }
.hr-maat:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -22px rgba(0,0,0,.55); }
.hr-maat__maat { font-family: var(--font--main, inherit); font-weight: 700; font-size: 28px; line-height: 1.1; }
.hr-maat__m2 { font-size: 14px; color: var(--_colors---color--dark-64, #5a544e); }
.hr-maat__prijs { margin-top: 8px; font-weight: 600; font-size: 16px; color: var(--_colors---color--accent-2, #ff7600); }
.hr-maat__pijl { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 14px; color: var(--_colors---color--accent, #189be9); }
.hr-maatkiezer__voet { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 22px; margin: 26px 0 0; }
.hr-maatkiezer__voet .hr-hero__micro { color: #fff; opacity: .9; }
.hr-maatkiezer__voet .hr-hero__micro svg { color: #fff; }
@media (prefers-reduced-motion: reduce) { .hr-maat { transition-duration: .01ms; } }
/* De navigatie is vast en 150–160px hoog; de hero begint daaronder, net als
   de andere hero's (thematoken hero-top-padding = 168px). */
/* Bovenpadding van .hr-hero: zie §30. */

/* 24. Dienstenoverzicht op de homepage
   ------------------------------------------------------------------
   Uitbouw is de hoofdingang, maar HR doet dertien dingen. Kaarten met het
   menubeeld, de naam en één regel; de drie kerndiensten dragen een label. */
.hr-diensten { background: var(--_colors---color--bg-1, #fffdf6); }
.hr-diensten__kop { max-width: 640px; margin: 0 0 26px; }
.hr-diensten__titel { font-size: clamp(30px, calc(20px + 1.8vw), 50px); line-height: 1.05; margin: 0 0 10px; text-wrap: balance; }
.hr-diensten__sub { margin: 0; font-size: 17px; line-height: 1.5; color: var(--_colors---color--dark-64, #5a544e); max-width: 56ch; }
.hr-diensten__raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 991px) { .hr-diensten__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .hr-diensten__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.hr-dienst { display: grid; gap: 4px; text-decoration: none; color: var(--_colors---color--dark, #1f1915); background: #fff; border: 1px solid var(--_colors---color--dark-16, #e8e4dc); border-radius: 16px; padding: 10px 10px 14px; transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s cubic-bezier(.22,.61,.36,1); }
.hr-dienst:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -22px rgba(0,0,0,.45); }
.hr-dienst__beeld { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--_colors---color--dark-16, #e8e4dc); }
.hr-dienst__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hr-dienst__tag { position: absolute; left: 8px; top: 8px; padding: 4px 9px; border-radius: 100vw; background: #ff7600; color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.hr-dienst__naam { font-family: var(--font--main, inherit); font-weight: 600; font-size: 17px; line-height: 1.25; margin-top: 8px; padding: 0 4px; }
.hr-dienst__regel { font-size: 14px; line-height: 1.45; color: var(--_colors---color--dark-64, #5a544e); padding: 0 4px; }
@media (prefers-reduced-motion: reduce) { .hr-dienst { transition-duration: .01ms; } }

/* 25. Diensten-uitklapmenu
   ------------------------------------------------------------------
   Dertien diensten in drie groepen (Meer ruimte · Dak · Binnen) met een groter
   beeld en één regel per dienst, en rechts een promopaneel naar de
   configurator. Webflow's dropdown en de mobiele accordeon blijven zoals ze
   waren; op een telefoon vervalt het paneel en staan de groepen onder elkaar. */
@media (min-width: 992px) {
  .mega-menu-halves { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
  .collection-list.header { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 28px; width: 100%; }
}
.hr-menu__groep { display: grid; gap: 4px; align-content: start; }
.hr-menu__kop { font-family: var(--font--main, inherit); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--_colors---color--dark-64, #6f6862); padding: 6px 8px 8px; }
.hr-menu__item { display: flex; align-items: center; gap: 12px; padding: 7px 8px; border-radius: 12px; transition: background-color .3s cubic-bezier(.4,0,.2,1); }
.hr-menu__item:hover { background: var(--_colors---color--bg-2, #f3efe7); }
.hr-menu__beeld { width: 62px; height: 46px; flex: none; border-radius: 10px; overflow: hidden; }
.hr-menu__beeld img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.hr-menu__tekst { display: grid; gap: 1px; min-width: 0; }
.hr-menu__tekst .nav-link.dienst { font-size: 16px; font-weight: 600; padding: 0; line-height: 1.25; }
.hr-menu__regel { font-size: 13px; line-height: 1.35; color: var(--_colors---color--dark-64, #6f6862); }
.hr-menu__promo { display: none; }
@media (min-width: 992px) {
  .hr-menu__promo { display: block; }
  .hr-menu__promokaart { display: grid; gap: 10px; padding: 24px; border-radius: 18px; background: var(--_colors---color--bg-blue, #005aa7); color: #fff; text-decoration: none; min-height: 100%; }
  .hr-menu__promolabel { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
  .hr-menu__promokop { font-family: var(--font--main, inherit); font-size: 24px; font-weight: 700; line-height: 1.1; }
  .hr-menu__promotekst { font-size: 14px; line-height: 1.5; opacity: .9; }
  .hr-menu__promoknop { margin-top: 6px; justify-self: start; }
}
@media (max-width: 991px) {
  .hr-menu__kop { padding-top: 14px; }
  .hr-menu__item { padding: 6px 0; }
}
/* Dienstkaarten op 320px in WebKit: "Badkamerrenovatie" is als één woord
   breder dan de kolom en het kaartje (min-width: auto) groeide mee. */
.hr-dienst { min-width: 0; }
.hr-dienst__naam, .hr-dienst__regel { overflow-wrap: anywhere; }

/* 26. Foto even hoog als de tekst ernaast
   ------------------------------------------------------------------
   De fotokolom had een vaste hoogte (680px) en zweefde gecentreerd naast een
   langere tekstkolom. Vanaf 768px rekt de foto nu mee met de rij en vult hij
   het kader (object-fit: cover); bij korte tekst houdt hij een minimum. */
@media (min-width: 768px) {
  .column-master .column.w-row { align-items: stretch; }
  .column-master .column-left, .column-master .column-right { align-items: stretch; }
  .column-master .column-image-wrap { height: auto; min-height: 520px; align-self: stretch; }
  .column-master .column-image-wrap > img.image-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .column-master .column-content-wrap { justify-content: center; }
}
/* Het thema maakte de foto 150% hoog en schoof hem 10% omhoog (parallax-look).
   Met een kader op tekst-hoogte liet dat onderaan 104px leeg; de foto vult
   nu gewoon het kader. !important omdat Webflow de transform inline kan zetten. */
@media (min-width: 768px) {
  .column-master .column-image-wrap > img.image-cover.parallax { transform: none !important; height: 100%; }
}

/* 27. Prijssectie: tekstkolom niet tegen de rand
   ------------------------------------------------------------------
   De tekstkolom (max 456px) raakte op vensters rond 1000–1200px de rechter-
   rand van de donkere helft. Een meeschalende rechtermarge houdt lucht. */
@media (min-width: 768px) {
  .home-b-main-features-section .main-features-right { max-width: min(456px, calc(100% - clamp(24px, 4vw, 64px))); }
}
/* Hero-foto (fotoshoot Dordrecht): de eettafel en de tuin zitten in de onderste
   helft; het brede kader snijdt anders precies dat stuk weg. */
.hr-hero__beeld img { object-position: 50% 68%; }

/* 28. Mobiel: tikdoelen, leesbaarheid, invoervelden
   ------------------------------------------------------------------
   Gemeten op 390px (07-09-2026): tikdoelen van 16–23px, kaarttekst van 12px,
   invoervelden van 14px (iOS zoomt dan in bij focus), de reviewkop 29px
   buiten beeld en de zachte link onder de prijssectie tegen de linkerrand. */
/* Kaarttekst: het thema zet .text-small-2 op telefoons terug naar 12px. */
@media (max-width: 767px) {
  .text-small-2 { font-size: 14px; line-height: 1.5; }
  .button-text-small { font-size: 13px; }
  .text-small { font-size: 12px; }
  .hr-hero__bewijs { font-size: 14px; }
}
/* Invoervelden minstens 16px, anders zoomt iOS in bij focus. */
@media (max-width: 767px) {
  .w-input, .w-select, .field, .text-field, textarea, select, input:not([type=hidden]):not([type=checkbox]):not([type=radio]), .w-button, input[type=submit] { font-size: 16px !important; }
}
/* Tikdoelen: 44px is de ondergrens die Apple en Google hanteren. */
.div-block-9 { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.hero-home-b a[style*="inline-flex"], section[id^="wat-kost"] a[href="/configurator"], .body-article a[style*="inline-flex"] { min-height: 44px; align-items: center; }
@media (max-width: 767px) {
  .cfg-overzicht__regel { min-height: 44px; }
  .hr-lijst > li { min-height: 44px; }
}
/* Reviewkop: de h4 stond op nowrap en liep 29px buiten het scherm. */
.headline-testimonials, .heading-testimonials { max-width: 100%; min-width: 0; }
.heading-testimonials .text-h4 { white-space: normal; overflow-wrap: anywhere; }
/* Zachte link onder de prijssectie staat buiten de container: zelfde marge. */
section[id^="wat-kost"] > div[style*="margin-top:18px"] { padding-left: var(--_spacing---site-padding--main, 16px); padding-right: var(--_spacing---site-padding--main, 16px); }
@media (min-width: 992px) { section[id^="wat-kost"] > div[style*="margin-top:18px"] { padding-left: 0; padding-right: 0; } }
@media (max-width: 767px) {
  .button-text.text-underline, .contact-address-tile .link-block { display: inline-block; padding: 10px 0; }
}
/* Offerteformulier (zwevend label in het veld): het veld is 1,5em hoog op een
   letter van 2,5em. Met 16px werd het 24px en viel het label onder de lijn.
   Op telefoons een eigen maat, en het label daarop afgestemd. */
@media (max-width: 767px) {
  .field_wrap input.field.w-input, .field_wrap textarea.field { font-size: 22px !important; height: 1.6em; min-height: 1.6em; }
  .field_wrap textarea.field.message { height: 3.4em; }
  .field_label.large { transform: translate(0, 1.15em); }
}

/* §29 Lightbox boven de vaste balken. Webflow zet de lightbox op z-index 2000,
   maar de actiebalk (js/actiebalk.js) en de cookie-knop staan op 2.147.482.xxx.
   Op mobiel stonden daardoor Bellen/WhatsApp/Offerte én de header over de foto. */
.w-lightbox-backdrop { z-index: 2147482500 !important; }

/* §30 Ruimte onder de vaste header
   De header (.nav-wrap.static) staat fixed en bestaat uit drie rijen: de
   actiebalk, de navigatie en de rij met de Google-badge. Zijn hoogte hangt
   van de breedte af; gemeten op 07-09-2026 (onderkant in px):
     ≤599: 163–169   600–767: 152   768–991: 193   992–1279: 218 (nav in
     twee rijen)   ≥1280: 150.
   De eerste sectie van elke pagina begint daaronder, met 16px lucht. De
   vorige clamp(72px, 9vw, 130px) was te klein: op mobiel viel de badge over
   de H1, op locatiepagina's de hele navigatie. Over-ons houdt 0: daar loopt
   het beeld bewust tot achter de navigatie. */
:root { --kop: 166px; }
@media (max-width: 1279px) { :root { --kop: 234px; } }
@media (max-width: 991px)  { :root { --kop: 210px; } }
@media (max-width: 767px)  { :root { --kop: 168px; } }
@media (max-width: 599px)  { :root { --kop: 186px; } }
/* Ankerdoelen (#wat-kost-…) landen onder de header. Niet als scroll-padding op html:
   dan blijft Playwright's scrollIntoView eindeloos herpositioneren (hover.spec op mobiel). */
[id]:not(body):not(html) { scroll-margin-top: calc(var(--kop) + 8px); }
/* De header zit op de meeste pagina's in div.navigation-master, op de dienst-, project- en
   locatiepagina's direct in body; daarom geen kind-combinator in :has(). */
body:has(.nav-wrap.static .google-basic-badge-3) > section:first-of-type:not(.hero-about-b) { padding-top: var(--kop); }
/* De diensten-hero heeft al ±44px eigen ruimte boven de kop (labelrij). */
body:has(.nav-wrap.static .google-basic-badge-3) > section.hero-home-b:first-of-type { padding-top: calc(var(--kop) - 44px); }
/* Contact: de secties zitten in .main-wrapper en hebben ±150px eigen ruimte. */
body:has(.nav-wrap.static .google-basic-badge-3) .main-wrapper > .section-2.bg:first-child { padding-top: max(0px, calc(var(--kop) - 150px)); }

/* §31 Footer (scripts/footer-bouwen.py)
   Eigen klassen (hr-voet*), zodat de Webflow-cascade (.footer-right met
   flex: none, .brand-link met filter, .footer-link in text-large) er niet
   aan komt. Donker vlak zoals voorheen; kop met logo, bedrijfsregel, badge en
   de drie CTA's; vier kolommen; onderregel. */
.hr-voet { background: var(--_colors---color--bg-blue, #1c1e26); color: var(--_colors---color--light, #fffdf6); padding: clamp(40px, 6vw, 80px) 0 calc(24px + var(--hr-actiebalk-hoogte, 0px)); overflow: visible; }
.hr-voet__binnen { width: min(1200px, calc(100% - clamp(32px, 6vw, 96px))); margin: 0 auto; }
.hr-voet__kop { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 4vw, 64px); align-items: start; padding-bottom: clamp(32px, 4vw, 56px); border-bottom: 1px solid rgba(255, 253, 246, .14); }
.hr-voet__logo { display: inline-block; width: min(300px, 70%); }
.hr-voet__logo img { display: block; width: 100%; height: auto; filter: brightness(0) invert(1); }
.hr-voet__intro { margin: 20px 0 16px; max-width: 52ch; font-size: 16px; line-height: 1.55; color: rgba(255, 253, 246, .78); }
.hr-voet__reviews { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-size: 15px; min-height: 44px; }
.hr-voet__reviews:hover span:last-child { text-decoration: underline; }
.hr-voet__sterren { display: inline-flex; gap: 2px; }
.hr-voet__ctas { display: grid; grid-template-columns: repeat(2, auto); gap: 12px; justify-self: end; justify-content: end; }
.hr-voet__knop { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 12px 22px; border-radius: 999px; border: 1px solid rgba(255, 253, 246, .28); color: var(--_colors---color--light, #fffdf6); font-weight: 600; font-size: 15px; text-decoration: none; transition: background-color .2s, border-color .2s, color .2s; }
.hr-voet__knop:hover { background: rgba(255, 253, 246, .1); border-color: rgba(255, 253, 246, .5); }
.hr-voet__knop--offerte { background: var(--_colors---color--orange, #f97316); border-color: transparent; color: #fff; }
.hr-voet__knop--offerte:hover { background: #f60; border-color: transparent; }
.hr-voet__knop--wa { background: #25d366; border-color: transparent; color: #fff; }
.hr-voet__knop--wa:hover { background: #1fbf5a; border-color: transparent; }
.hr-voet__kolommen { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); padding: clamp(32px, 4vw, 56px) 0; border-bottom: 1px solid rgba(255, 253, 246, .14); }
.hr-voet__titel { font-family: var(--font--secondary, inherit); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 253, 246, .55); margin: 0 0 14px; line-height: 1.3; }
.hr-voet__lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.hr-voet__lijst--twee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.hr-voet__lijst a, .hr-voet__stil { display: inline-block; padding: 7px 0; color: var(--_colors---color--light, #fffdf6); font-size: 15px; line-height: 1.4; text-decoration: none; }
.hr-voet__lijst a { border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.hr-voet__lijst a:hover { color: #fff; border-bottom-color: rgba(255, 253, 246, .5); }
.hr-voet__lijst a[aria-current="page"] { color: var(--_colors---color--accent, #189be9); }
.hr-voet__lijst--contact a { padding: 6px 0; }
.hr-voet__stil { color: rgba(255, 253, 246, .55); }
.hr-voet__onder { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; padding-top: 24px; font-size: 13px; color: rgba(255, 253, 246, .6); }
.hr-voet__onder p { margin: 0; }
.hr-voet__maker { margin-left: auto; }
.hr-voet__maker a, .hr-voet__cookies a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.hr-voet__social { display: flex; gap: 6px; }
.hr-voet__social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: var(--_colors---color--light, #fffdf6); opacity: .7; transition: opacity .2s, background-color .2s; }
.hr-voet__social a:hover { opacity: 1; background: rgba(255, 253, 246, .1); }
.hr-voet a:focus-visible, .hr-voet__knop:focus-visible { outline: 2px solid var(--_colors---color--accent, #189be9); outline-offset: 3px; }
@media (max-width: 991px) {
  .hr-voet__kop { grid-template-columns: 1fr; }
  .hr-voet__ctas { justify-self: start; }
  .hr-voet__kolommen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hr-voet__kolom--diensten { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .hr-voet__logo { width: min(260px, 80%); }
  .hr-voet__ctas { grid-template-columns: 1fr; justify-content: stretch; justify-self: stretch; }
  .hr-voet__knop { justify-content: center; }
  .hr-voet__kolommen { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .hr-voet__kolom--contact { grid-column: 1 / -1; }
  .hr-voet__lijst a, .hr-voet__stil { padding: 9px 0; font-size: 15px; }
  .hr-voet__onder { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hr-voet__maker { margin-left: 0; }
}

/* §32 Kostenblok op de dienstpagina's in de panelenstijl van de homepage
   (scripts/kosten-panelen.py). Zelfde raster; het donkere paneel draagt de
   vanafprijs groot, de zachte link staat onder de knop. */
.hr-panelen--kosten { scroll-margin-top: calc(var(--kop) + 8px); }
.hr-panelen--kosten .hr-panelen__prijs { font-family: var(--font--main, inherit); font-weight: 600; font-size: 22px; line-height: 1.2; margin: 0 0 12px; color: #8fd0f7; }
.hr-panelen--kosten .hr-panelen__zacht { margin: 18px 0 0; font-size: 15px; }
.hr-panelen--kosten .hr-panelen__zacht a { color: #fff; opacity: .85; text-decoration: underline; text-underline-offset: 3px; }
.hr-panelen--kosten .hr-panelen__zacht a:hover { opacity: 1; }
.hr-panelen--kosten + .hr-maatkiezer { border-top: 1px solid rgba(255, 253, 246, .12); }

/* §33 FAQ op de dienstpagina's: lucht tussen kop en vragen, zoals elk ander
   blok die heeft (de kop stond tegen de eerste vraag aan, 08-09-2026). */
.faq-section .align-center { margin-bottom: clamp(24px, 3vw, 40px); }

/* §34 Energieblok over de foto (uitbouwpagina). Stond onder de tekstkolom en
   maakte die te lang; nu linksonder in de foto, in de overlay die het thema al
   had (.image-abosolute-text). */
.image-abosolute-text.hr-fotoblok { height: auto; max-height: none; padding: clamp(20px, 3vw, 32px); background-image: linear-gradient(0deg, rgba(31, 25, 21, .72), rgba(31, 25, 21, 0)); pointer-events: none; }
.image-abosolute-text.hr-fotoblok > * { pointer-events: auto; }
.hr-fotoblok__kop { color: #fff; font-size: clamp(20px, 1.6vw, 26px); line-height: 1.15; margin: 0 0 12px; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.hr-fotoblok ul.hr-lijst { grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0; max-width: 340px; }
.hr-fotoblok ul.hr-lijst li { font-size: 15px; }
@media (max-width: 767px) {
  .hr-fotoblok ul.hr-lijst { max-width: none; }
  .hr-fotoblok__kop { font-size: 20px; }
}
/* De fotowrap in deze sectie is niet gepositioneerd; zonder dit stond het blok
   linksboven in de pagina in plaats van in de foto. */
.column-image-wrap:has(> .hr-fotoblok) { position: relative; }
/* De foto zelf staat op z-index 1 (image-cover), dus de overlay moet erboven;
   en de kaartjes houden hun donkere tekst, niet het wit van de overlay. */
.image-abosolute-text.hr-fotoblok { z-index: 2; }
.hr-fotoblok ul.hr-lijst li { color: var(--_colors---color--dark, #1f1915); }
/* Mobiel: het blok niet óver de foto (die is te sterk om af te dekken) maar
   eronder, binnen dezelfde kaart; de foto wordt dan een gewoon beeld op 4:3. */
@media (max-width: 767px) {
  .column-image-wrap:has(> .hr-fotoblok) { min-height: 0; height: auto; display: flex; flex-direction: column; }
  .column-image-wrap:has(> .hr-fotoblok) img { position: static; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
  .image-abosolute-text.hr-fotoblok { position: static; background-image: none; padding: 18px 16px 16px; color: var(--_colors---color--dark, #1f1915); background: #fff; }
  .hr-fotoblok__kop { color: var(--_colors---color--dark, #1f1915); text-shadow: none; }
}

/* §35 Artikelpagina's op sitebreedte (Jarne, 09-09-2026: "geen enkele pagina
   zo smal, gewoon de breedte van de rest van de website aanhouden"). De
   locatie-, project- en verhaalpagina's stonden in .small-container (750px)
   met de kop op 686px, terwijl elke andere pagina de main-container vult. */
.main-container.small-container { max-width: var(--container-width--main); }
.hero-article .headline-article,
.hero-article .headline-article.left { max-width: none; }

/* §36 Google Ads-landingspagina's (lp/<dienst>.html, scripts/lp-bouwen.py).
   Eigen compacte kop zonder menu, hero met formulier naast de tekst, en een
   vaste contactbalk op mobiel. Kleuren en knoppen zijn die van de site. */
.lp-body { background: var(--_colors---color--bg-1, #fffdf6); }
.lp-kop { position: sticky; top: 0; z-index: 50; background: rgba(255, 253, 246, .96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--_colors---color--dark-16, #e8e4dc); }
.lp-kop__rij { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; padding-bottom: 12px; }
.lp-kop__logo img { display: block; width: auto; height: 40px; }
.lp-kop__acties { display: flex; align-items: center; gap: 10px; }
.lp-hero { padding-top: clamp(32px, 4vw, 64px); padding-bottom: clamp(24px, 3vw, 40px); }
.lp-hero__raster { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.lp-hero__titel { font-size: clamp(34px, calc(18px + 3vw), 64px); line-height: 1.04; margin: 8px 0 16px; text-wrap: balance; }
.lp-hero__sub { font-size: clamp(17px, calc(15px + .4vw), 20px); line-height: 1.55; margin: 0 0 18px; max-width: 60ch; color: var(--_colors---color--dark, #1f1915); }
.lp-hero__usps { margin: 0 0 18px; }
.lp-hero__bewijs { margin: 0; font-size: 15px; color: var(--_colors---color--dark, #1f1915); }
.lp-sterren { color: var(--_colors---color--accent-2, #ff7600); letter-spacing: 1px; }
.lp-kaart { background: #fff; border: 1px solid var(--_colors---color--dark-16, #e8e4dc); border-radius: 20px; padding: clamp(20px, 2.4vw, 32px); box-shadow: 0 18px 50px rgba(31, 25, 21, .08); scroll-margin-top: 90px; }
.lp-kaart__kop { font-size: clamp(24px, calc(18px + 1vw), 30px); line-height: 1.15; margin: 0 0 8px; }
.lp-kaart__tekst { margin: 0 0 18px; font-size: 15px; line-height: 1.5; color: var(--_colors---color--dark, #1f1915); opacity: .85; }
.lp-form__velden { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.lp-form__veld { display: grid; gap: 5px; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.lp-form__veld:first-child { grid-column: span 2; }
.lp-form__veld input { margin: 0; width: 100%; }
.lp-form__knop { width: 100%; border: 0; cursor: pointer; justify-content: center; scroll-margin-bottom: 110px; }
.lp-form__micro { margin-top: 12px; }
.lp-kaart__anders { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--_colors---color--dark-16, #e8e4dc); font-size: 14px; line-height: 1.5; }
.lp-kaart__anders a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.lp-beeld { padding-top: 0; padding-bottom: clamp(24px, 3vw, 40px); }
.lp-beeld__kader { margin-top: 0; }
.lp-sectiekop { max-width: 640px; margin: 0 0 clamp(20px, 2.4vw, 32px); }
.lp-sectiekop h2 { font-size: clamp(28px, calc(20px + 1.6vw), 46px); line-height: 1.1; margin: 6px 0 0; }
.lp-stappen__lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: stap; }
.lp-stap { display: grid; gap: 12px; align-content: start; padding: 22px 20px; background: #fff; border: 1px solid var(--_colors---color--dark-16, #e8e4dc); border-radius: 16px; }
.lp-stap h3 { font-size: 18px; line-height: 1.25; margin: 0 0 6px; }
.lp-stap p { margin: 0; font-size: 15px; line-height: 1.5; }
.lp-stappen__voet { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: clamp(20px, 2.4vw, 32px); }
.lp-projecten__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lp-project { margin: 0; }
.lp-project img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }
.lp-project figcaption { margin-top: 10px; font-weight: 600; font-size: 15px; }
.lp-slot { background: var(--_colors---color--bg-blue, #005aa7); color: #fff; }
.lp-slot__raster { display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px 48px; align-items: center; }
.lp-slot__kop { color: inherit; font-size: clamp(28px, calc(20px + 1.6vw), 44px); line-height: 1.1; margin: 0 0 10px; }
.lp-slot__tekst { margin: 0; font-size: 17px; line-height: 1.55; opacity: .92; }
.lp-slot__acties { display: grid; gap: 12px; justify-items: start; }
.lp-slot__tel { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.lp-voet { padding: 24px 0 96px; font-size: 13px; color: var(--_colors---color--dark, #1f1915); }
.lp-voet__rij { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.lp-voet p { margin: 0; opacity: .8; }
.lp-voet a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.lp-balk { display: none; }
.lp-body .home-a-testimonial-section .heading-testimonials span { color: inherit; }
@media (max-width: 991px) {
  .lp-hero__raster { grid-template-columns: 1fr; }
  .lp-stappen__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-slot__raster { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .lp-kop__tel { display: none; }
  .lp-kop__logo img { height: 34px; }
  .lp-form__velden { grid-template-columns: 1fr; }
  .lp-form__veld:first-child { grid-column: auto; }
  .lp-stappen__lijst, .lp-projecten__raster { grid-template-columns: 1fr; }
  .lp-balk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(31, 25, 21, .96); backdrop-filter: blur(8px); }
  .lp-balk__knop { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 10px; border-radius: 10px; background: #fff; color: var(--_colors---color--dark, #1f1915); font-weight: 600; font-size: 14px; text-decoration: none; }
  .lp-balk__knop--wa { background: #25d366; color: #fff; }
  .lp-balk__knop--accent { background: var(--_colors---color--accent-2, #ff7600); color: #fff; }
  .lp-voet { padding-bottom: 110px; }
}

/* §36b Landingspagina, tweede ronde (11-09-2026): lichter en scherper.
   Geen Webflow-scripts meer nodig: reviews als vaste kaarten, FAQ als
   details/summary. Mobiel: knop direct onder de intro, compacte USP's. */
.lp-hero__mobielknop { display: none; }
.lp-form__privacy { margin: 10px 0 0; font-size: 12px; line-height: 1.45; opacity: .7; }
.lp-cijfers { padding-top: 0; padding-bottom: clamp(24px, 3vw, 40px); }
.lp-cijfers__lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.lp-cijfers__lijst li { display: grid; gap: 2px; padding: 16px 18px; background: #fff; border: 1px solid var(--_colors---color--dark-16, #e8e4dc); border-radius: 14px; }
.lp-cijfers__lijst strong { font-family: var(--font--main, inherit); font-size: clamp(22px, calc(16px + 1vw), 30px); line-height: 1.1; color: var(--_colors---color--accent, #189be9); }
.lp-cijfers__lijst span { font-size: 14px; line-height: 1.4; }
.lp-typen__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lp-type { display: grid; gap: 8px; align-content: start; padding: 24px 22px; background: #fff; border: 1px solid var(--_colors---color--dark-16, #e8e4dc); border-radius: 16px; }
.lp-type h3 { font-size: 20px; line-height: 1.2; margin: 0; }
.lp-type p { margin: 0; font-size: 15px; line-height: 1.5; }
.lp-type__prijs { font-weight: 700; color: var(--_colors---color--accent, #189be9); }
.lp-type__link { margin-top: 6px; font-weight: 600; font-size: 15px; color: var(--_colors---color--dark, #1f1915); text-decoration: underline; text-underline-offset: 3px; }
.lp-reviews .headline-testimonials { margin-bottom: clamp(20px, 2.4vw, 32px); }
.lp-reviews__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lp-reviews__raster .card-testimonial { height: 100%; margin: 0; }
.lp-faq-blok { display: grid; gap: 10px; }
.lp-faq { background: #fff; border: 1px solid var(--_colors---color--dark-16, #e8e4dc); border-radius: 14px; padding: 0 20px; }
.lp-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary .text-h7 { margin: 0; }
.lp-faq__teken { position: relative; flex: none; width: 22px; height: 22px; }
.lp-faq__teken::before, .lp-faq__teken::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; background: var(--_colors---color--accent, #189be9); transform: translate(-50%, -50%); transition: transform .2s; }
.lp-faq__teken::after { transform: translate(-50%, -50%) rotate(90deg); }
.lp-faq[open] .lp-faq__teken::after { transform: translate(-50%, -50%) rotate(0); }
.lp-faq .faq-paragraph { margin: 0; padding: 0 0 18px; }
.lp-faq summary:focus-visible { outline: 2px solid var(--_colors---color--accent, #189be9); outline-offset: 4px; border-radius: 8px; }
@media (max-width: 991px) {
  .lp-cijfers__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-typen__raster, .lp-reviews__raster { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .lp-hero__mobielknop { display: grid; gap: 10px; justify-items: start; margin: 0 0 16px; }
  .lp-hero__mobielknop .cta-main { width: 100%; justify-content: center; }
  .lp-hero__titel { font-size: clamp(30px, 8.5vw, 38px); }
  .lp-hero__sub { font-size: 16px; }
  ul.hr-lijst.lp-hero__usps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
  ul.hr-lijst.lp-hero__usps > li { padding: 8px 10px 8px 30px; font-size: 13px; line-height: 1.35; border-radius: 10px; }
  ul.hr-lijst.lp-hero__usps > li::before { left: 9px; top: 9px; width: 14px; height: 14px; }
  .lp-cijfers__lijst li { padding: 12px 14px; }
}

/* §37 Offertepagina: bedrijfsregel en cookievoorkeuren onderin het lichtblauwe
   vlak (Jarne, 14-09-2026), in plaats van een losse footer eronder. */
.contact_column.is-left { display: flex; flex-direction: column; }
.contact_column.is-left .div-block-10 { flex: 1 1 auto; }
.offerte-voet { margin: 24px 0 0; font-size: 12px; line-height: 1.6; color: var(--_colors---color--dark, #1f1915); opacity: .7; }
.offerte-voet a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }