/* ============================================================================
 * WoodSucces, site-brede laag
 * ----------------------------------------------------------------------------
 * Eén stylesheet op alle 20 pagina's. De kloon is 20 losse Elementor-bestanden
 * zonder gedeelde include, dus zonder deze laag is elke site-brede wijziging
 * twintig keer dezelfde bewerking.
 *
 * Merk blijft van hem: kleuren, logo, Montserrat, foto's. Wat hier gebeurt is
 * structuur, hiërarchie en mechaniek.
 *
 * SPECIFICITEITSVAL, zie PROBLEMS.md. Het gekloonde thema stijlt elementen op
 * (0,1,1) en Elementor op (0,2,0). Een kale `.ws-` klasse (0,1,0) verliest dan
 * stilletjes. Daarom staan de overrides hieronder expres langer dan mooi is.
 * ========================================================================== */

/* Het `hidden`-attribuut is alleen een UA-regel voor display:none, dus elke
 * eigen display-regel wint ervan. Zonder deze regel blijft een [hidden]
 * element gewoon staan. Staat bewust bovenaan. */
[hidden] { display: none !important; }

:root {
  --ws-cream: #FEFAE0;
  --ws-olive: #283618;
  --ws-olive-hover: #324023;
  --ws-ink: #151515;
  --ws-radius: 25px;

  /* Hoogte van de vaste balk onderaan op mobiel. Als variabele, want de
   * pagina moet er onderaan ruimte voor vrijhouden en de WhatsApp-knop moet
   * erboven zweven. Drie plekken, één getal. */
  --ws-bar-h: 64px;
}

/* ---------------------------------------------------------------------------
 * 1. Vaste header
 * ---------------------------------------------------------------------------
 * De header was `position: static`, dus op desktop verdween de offerteknop bij
 * de eerste scroll van een pagina van 2997px en kwam nooit terug.
 *
 * De bovenste balk (mail + telefoon) wordt door site.js vóór de header
 * verplaatst, zodat die gewoon wegscrollt en de plakkende header een vaste,
 * lagere hoogte houdt. Hoogte verandert nooit tijdens het scrollen: alleen de
 * rand en de schaduw komen erbij. Een header die tijdens het scrollen krimpt
 * laat de documenthoogte schommelen, en dan klopt geen enkele meting meer. */
header.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 900;
  transition: box-shadow .2s ease, border-color .2s ease;
  border-bottom: 1px solid transparent;
}

html.ws-scrolled header.elementor-location-header {
  border-bottom-color: rgba(255, 255, 255, .14);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
}

/* Het logo is 700x700 in de bron en rendert op 104px. Op een fold van 844px
 * kostte de header 165px, 19.5%. Iets kleiner op mobiel, vast, niet
 * geanimeerd. */
@media (max-width: 767px) {
  header.elementor-location-header .elementor-element-ac98e1c img {
    width: 76px;
    height: auto;
  }
}

/* ---------------------------------------------------------------------------
 * 2. De offerteknop, op mobiel
 * ---------------------------------------------------------------------------
 * De knop stond op elke pagina in de markup, maar `elementor-hidden-mobile`
 * zette hem op display:none, dus hij rendeerde als 0x0. De enige overgebleven
 * route naar /offerte-aanvragen/ was een tekstlink in de footer op 92.4%
 * scrolldiepte.
 *
 * Elementor's regel is `.elementor .elementor-hidden-mobile` (0,2,0). Deze
 * selector is (0,3,1) en wint dus op specificiteit, zonder !important. */
@media (max-width: 767px) {
  header.elementor .elementor-element.elementor-element-4611e7c.ws-show-mobile {
    display: block;
  }
  header.elementor .elementor-element-4611e7c.ws-show-mobile .elementor-button {
    padding: 11px 16px;
    font-size: 14px;
    white-space: nowrap;
  }
}

/* Op de smalste toestellen staan logo, knop en hamburger anders te krap. */
@media (max-width: 400px) {
  header.elementor .elementor-element-4611e7c.ws-show-mobile .elementor-button {
    padding: 10px 12px;
    font-size: 13px;
  }
}

/* ---------------------------------------------------------------------------
 * 3. Offerte in het hamburgermenu
 * ---------------------------------------------------------------------------
 * Het uitklapmenu bevatte Home, Schuttingen, Poorten, Opties, Contact. Geen
 * offerte. Wie het menu opent om te bestellen vindt daar niets.
 * Dit item staat bovenaan en is duidelijk een knop, geen zesde link. */
.elementor-nav-menu--dropdown .ws-menu-quote > a.ws-menu-quote__link {
  background: var(--ws-cream);
  color: var(--ws-ink);
  font-weight: 700;
  border-radius: var(--ws-radius);
  margin: 10px 14px 6px;
  padding: 13px 18px;
  text-align: center;
  display: block;
}

.elementor-nav-menu--dropdown .ws-menu-quote > a.ws-menu-quote__link:hover,
.elementor-nav-menu--dropdown .ws-menu-quote > a.ws-menu-quote__link:focus {
  background: #fff;
  color: var(--ws-ink);
}

/* ---------------------------------------------------------------------------
 * 4. Vaste balk onderaan, alleen mobiel
 * ---------------------------------------------------------------------------
 * Bellen en offerte aanvragen, altijd binnen duimbereik. Verschijnt zodra de
 * hero voorbij is en verdwijnt zodra de footer in beeld komt, want daar staan
 * dezelfde twee acties al.
 *
 * De zichtbaarheid wordt in site.js met rAF-geometrie bepaald, niet met een
 * IntersectionObserver. IO vuurt op het KRUISEN van een drempel, niet op de
 * toestand: bij een ankersprong of een herstelde scrollpositie gaat het
 * element van niet-zichtbaar-onder naar niet-zichtbaar-boven zonder dat er
 * ooit een callback afgaat, en dan blijft de balk voorgoed weg. Dat is een
 * echte bug die eerder een vaste koopbalk permanent uit heeft gezet. */
.ws-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 950;
  display: flex;
  gap: 8px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgba(21, 21, 21, .96);
  border-top: 1px solid rgba(255, 255, 255, .12);
  transform: translateY(105%);
  transition: transform .22s ease;
  font-family: "Montserrat", sans-serif;
}

.ws-bar.is-visible { transform: translateY(0); }

@media (min-width: 768px) { .ws-bar { display: none; } }

.ws-bar a.ws-bar__btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;             /* raakdoel, niet kleiner */
  border-radius: var(--ws-radius);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.1;
  padding: 0 12px;
}

.ws-bar a.ws-bar__btn--call {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .45);
}

.ws-bar a.ws-bar__btn--quote {
  background: var(--ws-cream);
  color: var(--ws-ink);
  border: 1px solid var(--ws-cream);
}

.ws-bar__icon { width: 16px; height: 16px; flex: none; fill: currentColor; }

/* Ruimte onderaan de pagina zodat de balk de footer niet afdekt. */
@media (max-width: 767px) {
  body.ws-has-bar { padding-bottom: calc(var(--ws-bar-h) + 8px); }
}

/* ---------------------------------------------------------------------------
 * 5. WhatsApp-knop
 * ---------------------------------------------------------------------------
 * Rechtsonder, op elke pagina. Deelt die hoek op mobiel met de balk hierboven,
 * dus hij gaat er bovenop staan en schuift mee als de balk verschijnt. */
a.ws-wa {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 940;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #25D366;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
  transition: transform .2s ease, bottom .22s ease;
  text-decoration: none;
}

a.ws-wa:hover,
a.ws-wa:focus-visible { transform: scale(1.06); color: #fff; }

a.ws-wa svg { width: 30px; height: 30px; fill: currentColor; display: block; }

/* Zodra de balk in beeld staat schuift de knop erboven. */
@media (max-width: 767px) {
  body.ws-bar-visible a.ws-wa {
    bottom: calc(var(--ws-bar-h) + 16px + env(safe-area-inset-bottom, 0px));
  }
  a.ws-wa { width: 50px; height: 50px; }
  a.ws-wa svg { width: 27px; height: 27px; }
}

/* ---------------------------------------------------------------------------
 * 6. LYNQ-credit in de footer
 * ---------------------------------------------------------------------------
 * Overgenomen uit _kb/skills/lynq-footer-credit/credit.css. Niet aanpassen aan
 * deze site: het is één merk op elke oplevering.
 *
 * De maat is gemeten, niet geschat. Het woordmerk heeft een kaphoogte van
 * 281,5 van zijn 381 viewBox, dus het tekent op 74% van de opgegeven hoogte.
 * 1.15em zet de kapitalen van het merk op die van 13px tekst. Op 1em lijkt het
 * op het eerste gezicht goed en is het optisch ~15% te klein, en dat is precies
 * wat een credit erop geplakt laat lijken. De staart van de Q zakt onder de
 * kaplijn, vandaar center en niet baseline. */
.ws-credit { margin-top: 14px; }

.lynq-credit {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: .8125rem;
  line-height: 1;
  color: inherit;
  text-decoration: none;
  opacity: .55;
  transition: opacity .2s ease;
}

.lynq-credit:hover,
.lynq-credit:focus-visible { opacity: 1; color: inherit; }

.lynq-credit__mark { height: 1.15em; width: auto; display: block; flex: none; }

/* Het TIKVLAK, niet de tekst.
 *
 * De regel is 13px tekst op `line-height: 1`, dus het klikbare vlak was
 * 191x15px. Een vinger heeft ongeveer 44px nodig. De link deed het wel, maar
 * een tik die er een paar pixels naast zat gebeurde gewoon niets, en dat is
 * niet van kapot te onderscheiden.
 *
 * De padding vergroot alleen het raakvlak, de negatieve marge haalt diezelfde
 * ruimte er weer af. De credit staat daardoor op exact dezelfde plek als
 * hiervoor: geen enkele pixel verschuift, alleen het vlak eromheen luistert
 * nu mee. */
.lynq-credit {
  padding: 15px 12px;
  margin: -15px -12px;
}

/* ---------------------------------------------------------------------------
 * 7. Kleine correcties in de footer
 * --------------------------------------------------------------------------- */

/* Het jaartal en de credit staan in dezelfde kolom als een tekstwidget met een
 * inline `color:#000000` op een donker verloop. Die inline stijl kunnen wij
 * niet met een selector bereiken, dus site.js haalt hem weg; dit is de kleur
 * die ervoor in de plaats komt. */
.ws-copyright { color: rgba(255, 255, 255, .72); }

/* ---------------------------------------------------------------------------
 * 8. De hero
 * ---------------------------------------------------------------------------
 * De oude hero verkocht niets: een kop tussen aanhalingstekens die geen dienst,
 * plaats of prijs noemde, over 60 seconden bouwplaatsvideo van 19,9 MB waarin
 * de banners van een ander bedrijf leesbaar in beeld stonden, met één knop naar
 * een catalogus.
 *
 * Nu: zijn eigen foto over de volle breedte, een echte h1, en twee knoppen.
 * --------------------------------------------------------------------------- */
.ws-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 78svh;                 /* svh, niet vh: op mobiel telt vh de
                                        adresbalk mee en dan valt de onderste
                                        knop onder de vouw */
  padding: 0;
  overflow: hidden;
  background: var(--ws-ink);
  font-family: "Montserrat", sans-serif;
}

@supports not (min-height: 78svh) { .ws-hero { min-height: 78vh; } }

@media (min-width: 768px)  { .ws-hero { min-height: 70vh; align-items: center; } }
@media (min-width: 1200px) { .ws-hero { min-height: 78vh; } }

.ws-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
}

.ws-hero__media img {
  width: 100%;
  height: 100%;
  /* object-fit werkt alleen als de hoogte niet door het height-attribuut wordt
   * bepaald. Zonder deze regel rendert het beeld op zijn bronhoogte van 1200px
   * en klopt de hele sectie niet. */
  object-fit: cover;
  object-position: center 60%;       /* de schutting, niet de lucht erboven */
  display: block;
}

/* Het scrim is een verloop en geen vlakke laag: de tekst staat onderaan, dus
 * daar mag het donker zijn, en de foto blijft bovenin gewoon zichtbaar.
 * De oude hero haalde op zijn donkerste meetpunt 3,11:1 tegen wit, net boven
 * de AA-drempel van 3:1 voor grote tekst. Met een vaste foto in plaats van 60
 * seconden wisselend beeld kan dat ruimer. */
.ws-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(10, 12, 8, .92) 0%, rgba(10, 12, 8, .72) 38%,
                    rgba(10, 12, 8, .35) 68%, rgba(10, 12, 8, .18) 100%);
}

/* LET OP bij het bijstellen van de hero: deze regel is NIET de regel die op de
 * homepage wint. `body.ws-hero-page .ws-hero__scrim` verderop in dit bestand
 * heeft een hogere specificiteit en overschrijft hem, en die staat er ook nog
 * eens drie keer. De laatste daarvan telt. Zie sectie 16. */
@media (min-width: 768px) {
  .ws-hero__scrim {
    background:
      linear-gradient(to right, rgba(10, 12, 8, .90) 0%, rgba(10, 12, 8, .74) 42%,
                      rgba(10, 12, 8, .30) 78%, rgba(10, 12, 8, .16) 100%);
  }
}

.ws-hero__inner {
  position: relative;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 30px 20px 34px;
  color: #fff;
}

@media (min-width: 768px) { .ws-hero__inner { padding: 56px 32px; max-width: 1340px; } }

.ws-hero__title {
  margin: 0 0 12px;
  font-size: clamp(30px, 7.4vw, 40px);
  line-height: 1.08;
  font-weight: 800;
  /* De oude kop stond op letter-spacing: normal en schaalde daardoor niet mee
   * naar boven: op 40px display-formaat leest normaal spatiëring los. */
  letter-spacing: -0.03em;
  color: #fff;
  text-wrap: balance;
}

@media (min-width: 768px) {
  .ws-hero__title { font-size: clamp(40px, 4.6vw, 60px); max-width: 17ch; }
}

.ws-hero__lead {
  margin: 0 0 22px;
  font-size: clamp(15px, 4vw, 17px);
  line-height: 1.5;
  color: rgba(255, 255, 255, .9);
  max-width: 46ch;
}

/* --- De twee knoppen ---
 * Eén in merkkleur, één van matglas, zoals afgesproken. Het room is dezelfde
 * kleur als de offerteknop die al in zijn header staat, dus de primaire actie
 * ziet er overal op de site hetzelfde uit. */
.ws-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

a.ws-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border-radius: var(--ws-radius);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  text-align: center;
  transition: transform .16s ease, background-color .16s ease;
}

a.ws-btn:active { transform: translateY(1px); }

a.ws-btn--primary {
  background: var(--ws-cream);
  color: var(--ws-ink);
  border: 1px solid var(--ws-cream);
}

a.ws-btn--primary:hover,
a.ws-btn--primary:focus-visible { background: #fff; color: var(--ws-ink); }

/* Matglas. backdrop-filter kan niet overal, dus de achtergrond is op zichzelf
 * al donker genoeg om de tekst te dragen; de vervaging is een extraatje en geen
 * voorwaarde. */
a.ws-btn--frost {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
}

a.ws-btn--frost:hover,
a.ws-btn--frost:focus-visible { background: rgba(255, 255, 255, .24); color: #fff; }

@media (max-width: 419px) {
  .ws-hero__cta { flex-direction: column; align-items: stretch; }
  a.ws-btn { width: 100%; }
}

/* --- De feiten onder de knoppen ---
 * De prijs per meter inclusief BTW en montage stond alleen op tien
 * productpagina's, en op de homepage kwam het teken voor euro niet één keer
 * voor. Dit is het sterkste dat hij te zeggen heeft en het stond tien kliks
 * diep. */
.ws-hero__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, .88);
}

.ws-hero__facts li {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
}

.ws-hero__facts li::before {
  content: "";
  width: 15px;
  height: 15px;
  flex: none;
  border-radius: 50%;
  background: var(--ws-cream);
  /* Vinkje als masker, zodat er geen tweede afbeelding voor nodig is. */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat,
          linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat,
                linear-gradient(#000, #000);
          mask-composite: exclude;
}

/* ---------------------------------------------------------------------------
 * 9. Kleine correcties na het verplaatsen van de bovenbalk
 * --------------------------------------------------------------------------- */

/* Het omhulsel dat site.js om de bovenbalk zet mag zelf geen ruimte of
 * achtergrond toevoegen, het draagt alleen de Elementor-klassen mee zodat de
 * opmaak van de balk blijft werken. */
[data-ws-topbar] { display: block; }

/* De hamburger stond in de DOM vóór de offerteknop, dus op mobiel kwam hij
 * tussen het logo en de knop in te staan. Naar rechts, waar een hamburger
 * hoort, zonder de DOM-volgorde en daarmee de tabvolgorde overhoop te halen. */
@media (max-width: 767px) {
  header.elementor .elementor-element-0089c89 > .e-con-inner { align-items: center; }
  header.elementor .elementor-element-0089c89 .elementor-element-ac98e1c { order: 1; }
  header.elementor .elementor-element-0089c89 .elementor-element-4611e7c { order: 2; }
  header.elementor .elementor-element-0089c89 .elementor-element-dd6669e { order: 3; }
}

/* De WhatsApp-knop zweeft rechtsonder en zou anders over de laatste regel van
 * de feitenlijst vallen. */
@media (max-width: 767px) {
  .ws-hero__facts { padding-right: 64px; }
}

/* ---------------------------------------------------------------------------
 * 10. Doorlopende hero, navigatie op de foto
 * ---------------------------------------------------------------------------
 * Alleen op pagina's met een hero, dus in de praktijk de homepage. De foto
 * loopt door tot achter de header; logo, menu en offerteknop staan erop.
 *
 * Twee toestanden:
 *   begin        header absoluut over de hero, geen eigen achtergrond
 *   .ws-past-hero  header vast bovenaan, eigen donkere achtergrond terug,
 *                  bovenregel eruit zodat de hoogte laag blijft
 *
 * De specificiteit is expres hoog. Elementor zet de achtergronden met
 * `.elementor-33 .elementor-element.elementor-element-cde8b60:not(...)`, wat
 * (0,4,0) is. Een kortere selector verliest en dan blijft de balk gewoon wit.
 * --------------------------------------------------------------------------- */

body.ws-hero-page header.elementor-location-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-bottom-color: transparent;
  box-shadow: none;
}

/* Achtergronden weg, zodat de foto er doorheen komt. */
body.ws-hero-page header.elementor-33 .elementor-element.elementor-element-cde8b60:not(.elementor-motion-effects-element-type-background),
body.ws-hero-page header.elementor-33 .elementor-element.elementor-element-0089c89:not(.elementor-motion-effects-element-type-background) {
  background-color: transparent;
}

/* De bovenregel stond in zwart op wit. Op de foto moet dat wit worden, iconen
 * incl., anders leest hij niet. */
body.ws-hero-page header.elementor-location-header .elementor-element-cde8b60 .elementor-icon-list-text,
body.ws-hero-page header.elementor-location-header .elementor-element-cde8b60 a {
  color: #fff;
}
body.ws-hero-page header.elementor-location-header .elementor-element-cde8b60 svg {
  fill: #fff;
}

/* De hero begint bovenaan de pagina en houdt vanbinnen ruimte vrij voor de
 * header die eroverheen staat. --ws-header-h wordt door site.js gemeten, met
 * een terugvalwaarde voor het geval het script niet draait. */
body.ws-hero-page .ws-hero { padding-top: var(--ws-header-h, 150px); }

/* Vast bovenaan zodra de hero voorbij is. */
html.ws-past-hero .ws-hero-page header.elementor-location-header {
  position: fixed;
  animation: ws-drop .22s ease both;
}

@keyframes ws-drop { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* Achtergronden terug. */
html.ws-past-hero .ws-hero-page header.elementor-33 .elementor-element.elementor-element-0089c89:not(.elementor-motion-effects-element-type-background) {
  background-color: #151515;
}

/* De bovenregel eruit zodra de header meeloopt: die 53px hoort bij de rust
 * bovenaan de pagina, niet bij een balk die de hele pagina meereist. */
html.ws-past-hero .ws-hero-page header.elementor-location-header .elementor-element-cde8b60 {
  display: none;
}

html.ws-past-hero .ws-hero-page header.elementor-location-header {
  border-bottom-color: rgba(255, 255, 255, .14);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
}

/* Op een hero-pagina moet er boven de foto niets meer donker zijn: de video
 * had zijn eigen zwarte laag, de foto krijgt hem van het scrim hieronder. */
body.ws-hero-page .ws-hero__scrim {
  background:
    linear-gradient(to bottom, rgba(10, 12, 8, .62) 0%, rgba(10, 12, 8, .18) 18%,
                    rgba(10, 12, 8, 0) 34%),
    linear-gradient(to top, rgba(10, 12, 8, .92) 0%, rgba(10, 12, 8, .72) 38%,
                    rgba(10, 12, 8, .30) 68%, rgba(10, 12, 8, .12) 100%);
}

@media (min-width: 768px) {
  body.ws-hero-page .ws-hero__scrim {
    background:
      linear-gradient(to bottom, rgba(10, 12, 8, .58) 0%, rgba(10, 12, 8, .16) 20%,
                      rgba(10, 12, 8, 0) 36%),
      linear-gradient(to right, rgba(10, 12, 8, .88) 0%, rgba(10, 12, 8, .70) 44%,
                      rgba(10, 12, 8, .26) 78%, rgba(10, 12, 8, .12) 100%);
  }
}

/* ---------------------------------------------------------------------------
 * 11. De offerteknop in de header als pil
 * ---------------------------------------------------------------------------
 * Stond op `border-radius: 0px 0px 0px 0px`, terwijl elke andere knop op zijn
 * site op 25px staat. Nu overal dezelfde vorm. Elementor's regel is
  * `.elementor-33 .elementor-element.elementor-element-4611e7c .elementor-button`, oftewel
 * (0,4,0) met VIER klassen. Een selector met drie klassen verliest daarvan, ook al ziet hij er
 * langer uit. Deze heeft er vier plus een element.
 * --------------------------------------------------------------------------- */
header.elementor-33 .elementor-element.elementor-element-4611e7c .elementor-button {
  border-radius: var(--ws-radius);
  padding: 16px 26px;
}

/* Op de foto krijgt de pil een randje, zodat hij ook op een licht stuk hout
 * nog als knop leest en niet als een lichte vlek. */
body.ws-hero-page header.elementor .elementor-element-4611e7c .elementor-button {
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
}

/* Eigen verloop achter de header op een hero-pagina.
 *
 * Het scrim van de hero alleen is hier niet genoeg: dat is gemaakt om de kop
 * onderin te dragen, en boven in beeld is het juist licht zodat de foto te zien
 * blijft. De menuregel staat daar wel, en op een foto met een lichte carport of
 * een witte lucht erachter zakt "Contact" dan tot onder de leesbaarheidsgrens.
 * Dit verloop hangt aan de header zelf, dus het beschermt de tekst bij elke
 * foto die er ooit in gaat, ook een die wij nu niet kennen. */
body.ws-hero-page header.elementor-location-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(100% + 46px);
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(to bottom,
              rgba(8, 10, 6, .72) 0%,
              rgba(8, 10, 6, .52) 46%,
              rgba(8, 10, 6, .22) 78%,
              rgba(8, 10, 6, 0) 100%);
}

/* Zodra de header meeloopt heeft hij zijn eigen dekkende achtergrond en zou het
 * verloop er alleen een vuile rand onder leggen. */
html.ws-past-hero .ws-hero-page header.elementor-location-header::before { display: none; }

/* De hero mag op desktop wat meer van de fold pakken nu de header erop staat en
 * dus geen eigen 165px meer kost. Net niet de volle hoogte, zodat er zichtbaar
 * iets onder staat en de bezoeker weet dat er verder gescrold kan worden. */
@media (min-width: 768px)  { body.ws-hero-page .ws-hero { min-height: 86vh; } }
@media (min-width: 1200px) { body.ws-hero-page .ws-hero { min-height: 90vh; } }

/* ---------------------------------------------------------------------------
 * 12. Iconen in de header
 * ---------------------------------------------------------------------------
 * Gemeten, niet gegokt: getComputedStyle gaf fill #000000 op de iconen van de
 * bovenregel en #33373D op de hamburger, terwijl de tekst ernaast al wit was.
 *
 * De eerdere poging verloor op specificiteit. Elementor's regel is
 * `.elementor-33 .elementor-element.elementor-element-d3e92f2
 *  .elementor-icon-list-icon svg`, oftewel (0,4,1). Een selector met drie
 * klassen haalt dat niet, hoe lang hij er ook uitziet. Deze heeft er vijf.
 * --------------------------------------------------------------------------- */
body.ws-hero-page header.elementor-33 .elementor-element.elementor-element-d3e92f2 .elementor-icon-list-icon svg {
  fill: #fff;
}

/* De hamburger stond op #33373D tegen een header van #151515. Dat is een
 * contrast van ongeveer 1,2:1 en dus praktisch onzichtbaar, ook op de negentien
 * pagina's zonder hero. Daarom niet alleen op de homepage rechtgezet. */
header.elementor-location-header .elementor-menu-toggle svg {
  fill: #fff;
}

/* ===========================================================================
 * 13. Secties op de homepage
 * ===========================================================================
 * Zijn palet, niet een nieuw palet: room #FEFAE0, olijf #283618, inkt #151515,
 * Montserrat. Wat verandert is welke informatie waar staat, niet hoe het merk
 * eruitziet.
 * =========================================================================== */

.ws-wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

@media (min-width: 768px) { .ws-wrap { padding: 0 32px; } }

.ws-sec {
  font-family: "Montserrat", sans-serif;
  padding: 48px 0;
  color: var(--ws-ink);
  background: #fff;
}

@media (min-width: 768px) { .ws-sec { padding: 76px 0; } }

.ws-sec__title {
  margin: 0 0 10px;
  font-size: clamp(24px, 5.6vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--ws-ink);
}

@media (min-width: 768px) { .ws-sec__title { font-size: clamp(30px, 3vw, 38px); } }

.ws-sec__intro {
  margin: 0 0 26px;
  font-size: 16px;
  line-height: 1.55;
  color: #4a4a4a;
  max-width: 62ch;
}

.ws-sec__noot {
  margin: 14px 0 0;
  font-size: 14px;
  color: #5a5a5a;
}

/* Alleen voor schermlezers, maar wel in de toegankelijkheidsboom. Niet
 * display:none, want dan is het er ook voor hen niet meer. */
.ws-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Bewijsstrook ------------------------------------------------------- */
.ws-proof {
  font-family: "Montserrat", sans-serif;
  background: var(--ws-ink);
  color: #fff;
  padding: 26px 0;
}

.ws-proof__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 16px;
}

/* Vier vaste kolommen klopte toen er vier tegels waren. Sinds het
 * Werkspot-cijfer erbij is gekomen zijn het er vijf, en dan viel de vijfde,
 * het KvK-nummer, op een tweede rij onder de vouw. Met auto-fit gaan ze op
 * een breed scherm naast elkaar en op 768 netjes in twee rijen, zonder dat
 * het aantal hier vastligt: komt er ooit een tegel bij of af, dan klopt dit
 * nog steeds. */
@media (min-width: 768px) {
  .ws-proof__list { grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 24px 20px; }
}

.ws-proof__list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding-left: 14px;
  border-left: 2px solid var(--ws-cream);
}

.ws-proof__list strong {
  font-size: clamp(17px, 4.4vw, 21px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ws-cream);
  line-height: 1.1;
}

.ws-proof__list span {
  font-size: 12.5px;
  line-height: 1.35;
  color: rgba(255, 255, 255, .78);
}

/* --- Prijstabel ---------------------------------------------------------- */
.ws-sec--prijzen { background: var(--ws-cream); }

/* Brede inhoud scrollt binnen zijn eigen kader; de pagina zelf mag nooit
 * horizontaal schuiven. */
.ws-table__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.ws-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
}

table.ws-table th,
table.ws-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid #ece7cf;
  vertical-align: middle;
}

table.ws-table thead th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6b6b6b;
  font-weight: 700;
  background: #fbf7e6;
}

table.ws-table tbody th { font-weight: 700; white-space: nowrap; }
table.ws-table tbody tr:last-child th,
table.ws-table tbody tr:last-child td { border-bottom: 0; }

.ws-table__prijs {
  font-weight: 800;
  font-size: 17px;
  white-space: nowrap;
  color: var(--ws-olive);
}

table.ws-table td a { color: var(--ws-olive); font-weight: 600; white-space: nowrap; }

a.ws-btn--dark {
  background: var(--ws-olive);
  color: var(--ws-cream);
  border: 1px solid var(--ws-olive);
  margin-top: 22px;
}

a.ws-btn--dark:hover,
a.ws-btn--dark:focus-visible { background: var(--ws-olive-hover); color: var(--ws-cream); }

a.ws-btn--ghost {
  background: transparent;
  color: var(--ws-cream);
  border: 1px solid rgba(254, 250, 224, .55);
}

a.ws-btn--ghost:hover,
a.ws-btn--ghost:focus-visible { background: rgba(254, 250, 224, .12); color: var(--ws-cream); }

/* --- Voor en na ---------------------------------------------------------- */
.ws-vn {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  line-height: 0;
  touch-action: pan-y;                /* verticaal scrollen blijft werken */
  background: #ddd;
}

.ws-vn__img {
  width: 100%;
  height: auto;                        /* zonder dit wint het height-attribuut
                                          van 1250 en rekt het beeld uit */
  display: block;
}

/* De voor-foto ligt bovenop en wordt van rechts weggeknipt. clip-path en geen
 * breedte op de wrapper: dan blijft de foto eronder op zijn plek staan in
 * plaats van mee te schuiven, en dat is precies wat een voor-en-na moet doen. */
.ws-vn__clip {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--ws-vn, 50%)) 0 0);
}

.ws-vn__clip .ws-vn__img { height: 100%; object-fit: cover; }

.ws-vn__label {
  position: absolute;
  top: 12px;
  z-index: 3;
  padding: 5px 11px;
  border-radius: 999px;
  font-family: "Montserrat", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.4;
  background: rgba(21, 21, 21, .74);
  color: #fff;
}

.ws-vn__label--voor { left: 12px; }
.ws-vn__label--na { right: 12px; }

.ws-vn__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--ws-vn, 50%);
  width: 2px;
  margin-left: -1px;
  background: var(--ws-cream);
  z-index: 4;
  pointer-events: none;
}

.ws-vn__handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42px;
  height: 42px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--ws-cream);
  box-shadow: 0 3px 14px rgba(0, 0, 0, .35);
}

/* Een echte range-input als bediening. Onzichtbaar maar wel aanwezig: dan werkt
 * de schuif met een muis, met een vinger, met de pijltjestoetsen en met een
 * schermlezer, zonder dat daar eigen toetsafhandeling voor geschreven hoeft te
 * worden. */
.ws-vn__range {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

.ws-vn__range:focus-visible ~ .ws-vn__handle {
  box-shadow: 0 0 0 3px rgba(254, 250, 224, .6);
}

.ws-vn__range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100%; }
.ws-vn__range::-moz-range-thumb { width: 44px; height: 100%; border: 0; opacity: 0; }

/* --- Stappen ------------------------------------------------------------- */
.ws-sec--proces { background: var(--ws-cream); }

.ws-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

@media (min-width: 700px)  { .ws-steps { grid-template-columns: repeat(2, 1fr); gap: 18px 26px; } }
@media (min-width: 1000px) { .ws-steps { grid-template-columns: repeat(3, 1fr); } }

.ws-steps li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 0;
  padding: 18px;
  background: #fff;
  border-radius: 14px;
}

.ws-steps__n {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ws-olive);
  color: var(--ws-cream);
  font-weight: 800;
  font-size: 14px;
}

.ws-steps__b { font-size: 14.5px; line-height: 1.5; color: #4a4a4a; }
.ws-steps__b strong { display: block; color: var(--ws-ink); font-size: 15.5px; margin-bottom: 3px; }

/* --- FAQ ----------------------------------------------------------------- */
.ws-faq { max-width: 820px; }

details.ws-faq__item {
  border-bottom: 1px solid #e6e6e6;
  padding: 0;
}

details.ws-faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 17px 40px 17px 0;
  position: relative;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ws-ink);
}

details.ws-faq__item summary::-webkit-details-marker { display: none; }

/* Chevron uit twee randen in plaats van een achtergrondafbeelding: geen extra
 * bestand, en hij draait netjes mee bij het openklappen. */
details.ws-faq__item summary::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -7px;
  border-right: 2px solid var(--ws-olive);
  border-bottom: 2px solid var(--ws-olive);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform .18s ease;
}

details.ws-faq__item[open] summary::after {
  transform: rotate(-135deg);
  margin-top: -3px;
}

.ws-faq__a { padding: 0 40px 18px 0; }
.ws-faq__a p { margin: 0; font-size: 15.5px; line-height: 1.6; color: #4a4a4a; }

/* --- Slot ---------------------------------------------------------------- */
.ws-sec--slot { background: var(--ws-ink); }
.ws-sec--slot .ws-sec__title { color: #fff; }
.ws-sec--slot .ws-sec__intro { color: rgba(255, 255, 255, .8); }

.ws-slot { text-align: center; }
.ws-slot .ws-sec__intro { margin-left: auto; margin-right: auto; }

.ws-slot__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.ws-slot__cta a.ws-btn--dark {
  margin-top: 0;
  background: var(--ws-cream);
  color: var(--ws-ink);
  border-color: var(--ws-cream);
}

.ws-slot__cta a.ws-btn--dark:hover { background: #fff; color: var(--ws-ink); }

@media (max-width: 419px) {
  .ws-slot__cta { flex-direction: column; }
}

/* ---------------------------------------------------------------------------
 * 14. Losse onderdelen
 * --------------------------------------------------------------------------- */

/* Offerteknop op de drie categoriekaarten van de homepage. De tekstlink
 * "lees meer over ... >" mat 15px hoog en was daarmee geen raakdoel; hij blijft
 * staan, want hij doet iets anders, maar hij is niet langer de enige uitgang. */
.ws-card-cta { margin: 14px 0 0; }

.ws-card-cta a.ws-btn--dark {
  margin-top: 0;
  min-height: 46px;
  font-size: 15px;
  padding: 0 20px;
}

/* De feitenlijst uit de hero, maar dan op een lichte achtergrond. */
.ws-facts--licht {
  color: #4a4a4a;
  font-size: 14px;
  gap: 8px 20px;
  padding-right: 0;
}

.ws-facts--licht li::before { background: var(--ws-olive); }

/* De samengevoegde sectie op de contactpagina. */
.ws-sec--overons { background: var(--ws-cream); }

/* Wie via /over-ons/ binnenkomt landt op #over-ons. Zonder deze marge schuift
 * de meelopende header de kop eronder weg. */
[id="over-ons"],
[id="prijzen"],
[id="veelgestelde-vragen"],
[id="route"] { scroll-margin-top: calc(var(--ws-header-h, 120px) + 12px); }

/* ===========================================================================
 * 15. Correctieronde 2026-09-02
 * ===========================================================================
 * Vier dingen uit de doorloop op de telefoon. Drie ervan zijn dezelfde fout van
 * mij: Elementor stijlt met vier klassen, (0,4,0), en een override die er langer
 * uitziet maar er drie heeft verliest daar stilletjes van. Onder elke regel
 * hieronder staat daarom welke regel hij precies moet verslaan.
 * =========================================================================== */

/* --- 15a. Het logo hing onder de balk uit ---------------------------------
 * Elementor zet `.elementor-element-ac98e1c img { width: 140px }` en geeft de
 * widget daarnaast `margin: -25px 0 -25px 0`. Die negatieve marges zijn de
 * reden dat het logo buiten de header steekt: het beeld is hoger dan de balk en
 * mag er aan beide kanten uit hangen.
 *
 * Marges terug naar nul en het logo op een hoogte die in de balk past. Te
 * verslaan: (0,4,1) voor de img en (0,4,0) voor de container, dus hier vijf
 * klassen plus een element. */
header.elementor-33.elementor-location-header .elementor-element.elementor-element-ac98e1c > .elementor-widget-container {
  margin: 0;
}

header.elementor-33.elementor-location-header .elementor-element.elementor-element-ac98e1c img {
  width: auto;
  height: 62px;
  max-height: 62px;
  display: block;
}

@media (min-width: 768px) {
  header.elementor-33.elementor-location-header .elementor-element.elementor-element-ac98e1c img {
    height: 74px;
    max-height: 74px;
  }
}

/* --- 15b. De hamburger stond op een eigen regel ---------------------------
 * De headerrij had `--flex-wrap-mobile: wrap`, dus met logo, offerteknop én
 * hamburger erin brak de hamburger af naar een tweede regel. Daar kwam het
 * kruisje links onder het logo terecht, en het uitklapmenu hing er los onder met
 * een gat ertussen.
 *
 * Niet meer afbreken, en de drie dingen op één rij: logo links, knop in het
 * midden, hamburger rechts. */
@media (max-width: 767px) {
  header.elementor .elementor-element.elementor-element-0089c89 {
    --flex-wrap-mobile: nowrap;
  }

  header.elementor .elementor-element-0089c89 > .e-con-inner {
    flex-wrap: nowrap;
    gap: 10px;
  }

  /* De navigatiewidget draagt de hamburger. Hij moet niet meegroeien met de
   * ruimte, alleen zijn eigen breedte pakken, anders duwt hij de knop weg. */
  header.elementor .elementor-element-0089c89 .elementor-element-dd6669e {
    --container-widget-flex-grow: 0;
    flex: 0 0 auto;
    width: auto;
    margin-left: auto;
  }

  header.elementor .elementor-element-0089c89 .elementor-element-ac98e1c { flex: 0 0 auto; }
  header.elementor .elementor-element-0089c89 .elementor-element-4611e7c { flex: 0 1 auto; }
}

/* Het uitklapmenu hing los onder de hamburger. De navigatiewidget is lager dan
 * de header, en Elementor hangt het paneel op 100% van die widget, dus er bleef
 * een strook header tussen het paneel en de balk staan. De widget over de volle
 * hoogte rekken zet de onderkant ervan gelijk aan die van de header, en dan
 * sluit het paneel er strak op aan. */
header.elementor .elementor-element-0089c89 .elementor-element-dd6669e {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* --- 15c. "Offerte aanvragen" in het uitklapmenu was wit op room -----------
 * Te verslaan:
 *   .elementor-33 .elementor-element.elementor-element-dd6669e
 *   .elementor-nav-menu--dropdown a           -> (0,4,0), color #FFFFFF
 * Deze selector heeft vijf klassen plus een element. */
header.elementor-33 .elementor-element.elementor-element-dd6669e .elementor-nav-menu--dropdown a.ws-menu-quote__link {
  color: var(--ws-ink);
  background: var(--ws-cream);
}

header.elementor-33 .elementor-element.elementor-element-dd6669e .elementor-nav-menu--dropdown a.ws-menu-quote__link:hover,
header.elementor-33 .elementor-element.elementor-element-dd6669e .elementor-nav-menu--dropdown a.ws-menu-quote__link:focus {
  color: var(--ws-ink);
  background: #fff;
}

/* --- 15d. De footer -------------------------------------------------------
 * De voettekst stond op wit. Dat was geschreven alsof de footer donker is, en
 * hij is roomkleurig, dus "© 2026 woodsucces.nl" was wit op room en daarmee
 * onleesbaar. */
.ws-copyright { color: #4a4636; }

/* De credit erft `currentColor`. Op een lichte achtergrond wordt dat met
 * opacity .55 te bleek, dus de kleur eronder gaat naar inkt in plaats van naar
 * wat de footer toevallig meegeeft. Opacity blijft .55 naar 1, dat is het
 * merkteken zoals het hoort.
 *
 * De stip is de enige vaste kleur van het merk. Op een licht vlak verdwijnt het
 * limoen, en de skill zegt: donkerder maken, nooit weghalen. */
.ws-credit .lynq-credit {
  color: var(--ws-ink);
  --lynq-dot: #7CB518;
}

/* De witte strook onder de footer.
 * De ruimte voor de vaste balk stond op `body`, dus die kwam ónder de footer
 * te staan in de achtergrondkleur van de pagina: een witte band onder het room.
 * De ruimte hoort in de footer zelf, dan loopt de achtergrond gewoon door. */
@media (max-width: 767px) {
  body.ws-has-bar { padding-bottom: 0; }
  body.ws-has-bar footer.elementor-location-footer {
    padding-bottom: calc(var(--ws-bar-h) + 8px);
  }
}

/* --- 15e. Hero gecentreerd ------------------------------------------------
 * Op mobiel en op desktop. Met gecentreerde tekst klopt een verloop dat van
 * links naar rechts donkerder wordt niet meer, dus het scrim op desktop gaat
 * ook van onder naar boven, net als op de telefoon. */
.ws-hero__inner { text-align: center; }

.ws-hero__title,
.ws-hero__lead {
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .ws-hero__title { max-width: 20ch; }
}

.ws-hero__cta { justify-content: center; }

.ws-hero__facts {
  justify-content: center;
  padding-right: 0;                  /* stond er voor de WhatsApp-knop, maar
                                        gecentreerd zou dat de lijst scheef
                                        trekken */
}

.ws-hero__facts li { text-align: left; }

@media (min-width: 768px) {
  body.ws-hero-page .ws-hero__scrim {
    background:
      linear-gradient(to bottom, rgba(10, 12, 8, .58) 0%, rgba(10, 12, 8, .16) 20%,
                      rgba(10, 12, 8, 0) 36%),
      linear-gradient(to top, rgba(10, 12, 8, .88) 0%, rgba(10, 12, 8, .66) 34%,
                      rgba(10, 12, 8, .34) 62%, rgba(10, 12, 8, .14) 100%);
  }
}

/* De WhatsApp-knop zweeft rechtsonder en zou over de laatste regel van de
 * gecentreerde feitenlijst kunnen vallen. Onderaan wat extra lucht in plaats
 * van rechts inspringen, zodat de centrering heel blijft. */
@media (max-width: 767px) {
  .ws-hero__inner { padding-bottom: 76px; }
}

/* --- 15f. De offerteknop in de header op mobiel ---------------------------
 * De pilregel van 15 staat LATER in dit bestand dan de mobiele maatvoering in
 * blok 2, en heeft dezelfde specificiteit (0,4,1). Bij gelijke specificiteit
 * wint de laatste, dus de knop kreeg de desktoppadding van 16px 26px terug en
 * duwde het logo klem. Daarom hier nogmaals, en nu wel als laatste.
 * De ronding blijft, alleen de maat gaat terug. */
@media (max-width: 767px) {
  header.elementor-33 .elementor-element.elementor-element-4611e7c .elementor-button {
    padding: 12px 16px;
    font-size: 13.5px;
    white-space: nowrap;
  }
}

@media (max-width: 400px) {
  header.elementor-33 .elementor-element.elementor-element-4611e7c .elementor-button {
    padding: 11px 13px;
    font-size: 12.5px;
  }
}

/* ===========================================================================
 * 16. Correctieronde twee
 * =========================================================================== */

/* --- 16a. De verticale uitlijning in de header, één oorzaak ----------------
 * Alles in die balk stond te hoog, en het is overal dezelfde oorzaak.
 *
 * Elementor zet op de headerrij `--container-widget-height: 100%` en
 * `--container-widget-align-self: stretch`. Elke widget wordt daardoor even
 * hoog als de hele rij, en de inhoud gaat vervolgens bovenin die widget staan.
 * De rij zelf staat wél op `align-items: center`, maar die centreert de
 * widgets, en die vullen de hoogte al, dus er valt niets meer te centreren.
 *
 * Gemeten: de hamburger liep van 51 tot 84 in een rij van 51 tot 119. Midden
 * van de rij is 85, midden van de hamburger 67,5. Zeventien pixels te hoog.
 *
 * De oplossing is één regel voor alle widgets tegelijk: laat ze hun eigen
 * hoogte pakken, dan doet de `align-items: center` die er al staat zijn werk.
 * Dit raakt logo, menu, hamburger en offerteknop in één keer. */
header.elementor .elementor-element-0089c89 > .e-con-inner > .elementor-widget {
  --container-widget-height: auto;
  align-self: center;
  height: auto;
}

/* Het uitklapmenu hing aan de navigatiewidget, en die is nu niet meer even hoog
 * als de header, dus het paneel zou weer los onder de hamburger komen te hangen.
 * Daarom hangt het nu aan de HEADER zelf. Die is `sticky` of `absolute` en
 * daarmee het positioneringskader, dus `top: 100%` is precies de onderkant van
 * de balk, ongeacht hoe hoog de widget erin toevallig is. */
header.elementor .elementor-element-dd6669e nav.elementor-nav-menu--dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0;
}

/* --- 16b. Het logo wat groter --------------------------------------------- */
header.elementor-33.elementor-location-header .elementor-element.elementor-element-ac98e1c img {
  height: 72px;
  max-height: 72px;
}

@media (min-width: 768px) {
  header.elementor-33.elementor-location-header .elementor-element.elementor-element-ac98e1c img {
    height: 92px;
    max-height: 92px;
  }
}

/* --- 16c. De witte strook onder de footer ---------------------------------
 * De vorige poging zette de ruimte voor de vaste balk op het footer-element,
 * maar de roomkleur zit niet daarop: die zit op de container erbinnen. De
 * opvulling viel dus buiten het gekleurde vlak en kwam als witte band onder de
 * footer te staan. Gemeten: 72px onder de onderkant van het gekleurde deel.
 *
 * De ruimte hoort dus in die container, niet eromheen. */
@media (max-width: 767px) {
  body.ws-has-bar footer.elementor-location-footer { padding-bottom: 0; }
  body.ws-has-bar footer.elementor-location-footer .elementor-element-058b934 {
    padding-bottom: calc(var(--ws-bar-h) + 20px);
  }
}

/* --- 16d. Copyright en credit onder elkaar --------------------------------
 * De onderste footerkolom stond op `flex-direction: row`, dus op desktop kwam
 * de credit naast het copyright te staan in plaats van eronder, en dan lijnt
 * niets meer uit. Onder elkaar, gecentreerd, op elke breedte hetzelfde. */
footer.elementor-location-footer .elementor-element-520fce8 {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.ws-credit { margin-top: 4px; text-align: center; }

/* --- 16e. Hero weer links uitlijnen ---------------------------------------
 * Terug naar links, op mobiel en op desktop. Alleen de vinkjes blijven
 * gecentreerd staan, dat leest daar rustiger. */
.ws-hero__inner { text-align: left; }

.ws-hero__title,
.ws-hero__lead { margin-left: 0; margin-right: 0; }

@media (min-width: 768px) {
  .ws-hero__title { max-width: 17ch; }
}

.ws-hero__cta { justify-content: flex-start; }

.ws-hero__facts { justify-content: center; }

/* Het scrim op desktop hoort weer bij tekst die links staat: van links naar
 * rechts donker, zodat de foto rechts open blijft.
 *
 * DIT IS DE REGEL DIE WINT. Er staan er vier van in dit bestand en dit is de
 * laatste, dus hier bijstellen en niet bovenin.
 *
 * 2026-09-04 aangezet met de nieuwe herofoto. Die heeft rechtsboven een
 * lichte gevel in de zon staan, en precies daar staan de navigatie, "Mail
 * ons" en het telefoonnummer in het wit. Op de vorige foto was die hoek
 * donker en viel het niet op. De bovenste laag is daarom zwaarder en loopt
 * verder door, en de rechterkant van de horizontale laag is opgetrokken zodat
 * de gevel ook onder de menubalk niet meer uitslaat. Onder een derde hoogte
 * doet de bovenste laag niets, dus de schutting zelf blijft even helder. */
@media (min-width: 768px) {
  body.ws-hero-page .ws-hero__scrim {
    background:
      linear-gradient(to bottom, rgba(10, 12, 8, .72) 0%, rgba(10, 12, 8, .42) 14%,
                      rgba(10, 12, 8, .16) 26%, rgba(10, 12, 8, 0) 38%),
      linear-gradient(to right, rgba(10, 12, 8, .90) 0%, rgba(10, 12, 8, .74) 44%,
                      rgba(10, 12, 8, .38) 78%, rgba(10, 12, 8, .26) 100%);
  }
}

/* ===========================================================================
 * 17. De lade, het menu op mobiel
 * ===========================================================================
 * Vervangt het uitklappaneel van Elementor. Dat paneel werd door Elementor Pro
 * met eigen JavaScript en inline stijlen onder de balk gehangen, en elke keer
 * dat de aansluiting rechtgezet werd kwam er een haarlijn ergens anders terug.
 * Deze lade hangt aan de body en niet aan de header, dus er is niets meer om
 * verkeerd op aan te sluiten.
 * =========================================================================== */

/* Het originele paneel gaat pas weg als de lade er echt staat. site.js zet
 * `ws-drawer-ready` op <html> als allerlaatste stap. Draait het script niet,
 * dan blijft Elementor's eigen menu gewoon werken en is de navigatie nooit
 * onbereikbaar. Het !important is nodig omdat Elementor Pro de hoogte en
 * zichtbaarheid van dat paneel inline zet, en inline wint van elke selector. */
html.ws-drawer-ready header.elementor .elementor-element-dd6669e nav.elementor-nav-menu--dropdown {
  display: none !important;
}

.ws-drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  visibility: hidden;
  pointer-events: none;
  font-family: "Montserrat", sans-serif;
}

.ws-drawer.is-open { visibility: visible; pointer-events: auto; }

.ws-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 8, .55);
  opacity: 0;
  transition: opacity .24s ease;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}

.ws-drawer.is-open .ws-drawer__overlay { opacity: 1; }

.ws-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(84vw, 340px);
  display: flex;
  flex-direction: column;
  background: var(--ws-olive);
  color: #fff;
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.22, .61, .36, 1);
  box-shadow: -6px 0 30px rgba(0, 0, 0, .35);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

.ws-drawer.is-open .ws-drawer__panel { transform: translateX(0); }

/* Wie liever geen beweging ziet, krijgt hem ook niet. */
@media (prefers-reduced-motion: reduce) {
  .ws-drawer__panel,
  .ws-drawer__overlay { transition: none; }
}

.ws-drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.ws-drawer__brand {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}

button.ws-drawer__close {
  appearance: none;
  border: 0;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: none;
  padding: 0;
}

button.ws-drawer__close:hover { background: rgba(255, 255, 255, .18); }
button.ws-drawer__close svg { width: 18px; height: 18px; fill: currentColor; display: block; }

.ws-drawer__nav { flex: 1 1 auto; padding: 8px 0; }

ul.ws-drawer__list,
ul.ws-drawer__sub {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ws-drawer__item { margin: 0; }

a.ws-drawer__link {
  display: block;
  padding: 14px 18px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  text-decoration: none;
  border-left: 3px solid transparent;
}

a.ws-drawer__link:hover,
a.ws-drawer__link:focus-visible {
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

a.ws-drawer__link.is-current {
  border-left-color: var(--ws-cream);
  background: rgba(255, 255, 255, .06);
}

a.ws-drawer__link--sub {
  padding: 11px 18px 11px 32px;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, .78);
}

.ws-drawer__cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px 8px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.ws-drawer__cta a.ws-btn { width: 100%; min-height: 50px; }

a.ws-btn--drawerghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .45);
}

a.ws-btn--drawerghost:hover,
a.ws-btn--drawerghost:focus-visible {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}

a.ws-drawer__wa {
  display: block;
  text-align: center;
  padding: 10px 0 2px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, .72);
  text-decoration: underline;
}

a.ws-drawer__wa:hover { color: #fff; }

/* Boven 768 past het menu gewoon in de balk en is de hamburger weg. */
@media (min-width: 768px) { .ws-drawer { display: none; } }

/* De zwevende WhatsApp-knop en de vaste balk horen niet over de lade heen te
 * liggen. Ze zitten lager in de stapeling, maar ze staan wel nog onder het
 * overlay te reageren op een tik, dus ze gaan er even helemaal uit. */
html.ws-drawer-open a.ws-wa,
html.ws-drawer-open .ws-bar { display: none; }

/* ===========================================================================
 * 18. De reviewstrook
 * ===========================================================================
 * Twintig echte beoordelingen op Werkspot, en tot 4 september 2026 stond er
 * geen enkele op zijn eigen site. Dat was punt 3 van de audit.
 *
 * De band loopt van rechts naar links, op verzoek van de klant. De truc is
 * dat de lijst twee keer in de band staat en de animatie precies de helft
 * opschuift: op het moment van terugspringen staat er hetzelfde beeld, dus
 * de sprong is niet te zien. De duur hangt aan het aantal kaarten, niet aan
 * een vast getal, anders raast hij bij dertien reviews voorbij.
 * ========================================================================= */
.ws-sec--rev { background: var(--ws-cream); overflow: hidden; }

.ws-rev__link {
  display: inline-block;
  margin-left: 6px;
  color: var(--ws-olive);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ws-rev__band {
  margin-top: 26px;
  /* De band loopt van rand tot rand, ook al zit de kop in een .ws-wrap.
   * Een band die netjes binnen de kolom blijft ziet eruit als een tabel. */
  width: 100%;
  overflow: hidden;
  /* Aan beide kanten uitvagen, zodat kaarten niet halverwege worden
   * afgehakt maar het beeld uit lijken te lopen. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.ws-rev__track {
  display: flex;
  width: max-content;
  animation: ws-rev-loop 92s linear infinite;
}

/* Stilzetten om te kunnen lezen. Ook op focus, want met het toetsenbord door
 * een bewegende strook tabben is niet te doen. */
.ws-rev__band:hover .ws-rev__track,
.ws-rev__band:focus-within .ws-rev__track { animation-play-state: paused; }

@keyframes ws-rev-loop {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.ws-rev__list {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0 8px;
  list-style: none;
}

.ws-rev__item { display: flex; }

.ws-rev__card {
  display: flex;
  flex-direction: column;
  width: 300px;
  padding: 18px 20px 16px;
  background: #fff;
  border: 1px solid #e2e0cf;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(21, 21, 21, .04);
}

.ws-rev__stars {
  color: #d4a017;
  font-size: 15px;
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.ws-rev__text {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.55;
  color: #2b2b26;
  /* Een enkele review is 60 woorden en een andere is er zes. Zonder grens
   * wordt de hele band zo hoog als de langste. Wie meer wil lezen gaat naar
   * Werkspot, en die knop staat eronder. */
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ws-rev__who {
  margin: auto 0 0;
  font-size: 13px;
  line-height: 1.4;
}

.ws-rev__who strong { display: block; color: var(--ws-olive); }
.ws-rev__who span { color: #6b6b60; }

.ws-rev__foot { margin-top: 26px; text-align: center; }

/* Wie beweging heeft uitgezet krijgt geen lopende band maar een rij die je
 * zelf opzij veegt. De inhoud blijft dus volledig bereikbaar. */
@media (prefers-reduced-motion: reduce) {
  .ws-rev__band { overflow-x: auto; }
  .ws-rev__track { animation: none; }
  .ws-rev__list + .ws-rev__list { display: none; }
}

@media (max-width: 767px) {
  .ws-rev__card { width: 260px; }
  .ws-rev__track { animation-duration: 76s; }
}

/* ===========================================================================
 * 19. Bredere inhoudskolom op desktop
 * ===========================================================================
 * Op een breed scherm stond de koptekst als een smal blokje in het midden met
 * ruim 300px leegte aan weerskanten: op 1920 was de kolom 1300 breed. Dat is
 * de standaardmaat van de Elementor-kit en die is nooit op dit scherm gezet.
 *
 * De kit zet hem op drie plekken, en er zijn vier onderdelen die er zelf
 * overheen gaan met een eigen `--content-width`. Die moeten hier alle vier bij
 * naam genoemd worden, want `.elementor-33 .elementor-element.elementor-element-0089c89`
 * scoort hoger dan een losse `.e-con`. Zonder die vier bleef de koptekst,
 * precies waar het om begon, gewoon op 1300 staan.
 *
 * Alleen boven 1024px. Daaronder zet de kit zijn eigen kleinere maxima en
 * daar was niets mis mee.
 *
 * `.ws-wrap` gaat mee, anders staan onze eigen secties 260px smaller dan de
 * secties van de klant en verspringt de linkerrand halverwege de pagina.
 * ========================================================================= */
@media (min-width: 1025px) {
  .e-con { --container-max-width: 1440px; }
  .elementor-section.elementor-section-boxed > .elementor-container { max-width: 1440px; }

  .elementor-33 .elementor-element.elementor-element-0089c89,
  .elementor-11 .elementor-element.elementor-element-e0e3d3e,
  .elementor-11 .elementor-element.elementor-element-a83971a,
  .elementor-11 .elementor-element.elementor-element-9cf8929 { --content-width: 1440px; }

  .ws-wrap { max-width: 1440px; }
}

/* Lopende tekst wordt niet breder dan prettig leest. De kolom mag 1440 zijn,
 * een zin van 1440px niet: het oog raakt de volgende regel kwijt. Alles wat
 * een raster of een tabel is mag de volle breedte hebben, alleen deze twee
 * tekstblokken houden hun maat. */
@media (min-width: 1025px) {
  .ws-sec__intro,
  .ws-faq__q + .ws-faq__a { max-width: 76ch; }
}

/* Twee kolommen van 50% plus een tussenruimte passen niet in 100%.
 *
 * Op /opties/ staan twee kolommen van `--width: 50%` in een rij met 50px
 * gap, en met `flex: 0 0 auto` erbij mogen ze niet krimpen: samen zijn ze
 * altijd precies de gap te breed. Dat was al zo, maar de kolom was smaller dan
 * het scherm en de overloop viel binnen de marge weg. Nu de kolom het scherm
 * vult, duwt diezelfde 50px de pagina opzij.
 *
 * Een flexkind hoort niet buiten zijn ouder te vallen, dus krijgt het de
 * ruimte om te krimpen. Dat grijpt alleen in waar het anders zou overlopen:
 * past een rij wel, dan verandert er niets. */
@media (min-width: 1025px) {
  .e-con-inner > .e-con { min-width: 0; flex-shrink: 1; }
}

/* Lange samenstellingen mogen afbreken.
 *
 * Op /schuttingen/ stak de kop 17px buiten het scherm op 768. De oorzaak was
 * niet de rij eromheen, zoals eerder gedacht, maar EEN woord: de kop staat in
 * een kolom van 189px en het woord "schuttingen" is er breder dan dat. Een
 * woord breekt standaard nergens af, dus stak het er gewoon uit en schoof de
 * hele pagina opzij.
 *
 * Nederlands zit vol met dit soort samenstellingen, dus dit staat er voor alle
 * koppen en niet alleen voor die ene. `break-word` breekt pas als het woord
 * anders echt niet past, dus aan een kop die wel past verandert niets. */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title { overflow-wrap: break-word; }

/* ---------------------------------------------------------------------------
 * Contactformulier: honeypot en statusregel
 * ---------------------------------------------------------------------------
 * De honeypot staat buiten beeld en NIET op `display: none`. Een deel van de
 * bots slaat verborgen velden over, maar vult wel alles wat in de DOM staat;
 * buiten beeld schuiven vangt er dus meer. `aria-hidden` op het omhulsel houdt
 * het weg bij een schermlezer. */
.ws-gotcha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* De statusregel staat onder de verzendknop en verschijnt pas na een poging.
 * `role="status"` staat in de HTML, zodat een schermlezer de uitkomst hoort
 * zonder dat de focus verspringt. */
.ws-form-status {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.45;
}
.ws-form-status.is-ok   { background: #E8F0DC; color: var(--ws-olive); }
.ws-form-status.is-fout { background: #F6E2DC; color: #7A2E1D; }

/* ---------------------------------------------------------------------------
 * Tikvlakken voor kleine tekstlinks
 * ---------------------------------------------------------------------------
 * Zelfde verhaal als bij de LYNQ-credit hierboven. Deze acht links op de
 * homepage waren 15 tot 19px hoog: de drie `lees meer over ...` onder de
 * categoriekaarten en de vijf `Bekijk deze schutting` in de prijstabel. Ze
 * werkten wel, maar een tik die er net naast zat deed niets, en dat voelt als
 * een kapotte link.
 *
 * Padding eruit, dezelfde marge er weer af, dus er verschuift geen pixel. Het
 * blijft bij deze acht: bij lopende tekst met meerdere links onder elkaar
 * zouden de vlakken over elkaar heen vallen en zou de onderste de tik van de
 * bovenste afpakken. Dat is erger dan een klein doel. */
.ws-tap {
  display: inline-block;
  padding-block: 15px;
  margin-block: -15px;
}

/* De twee regels in de bovenbalk, mail en telefoon, waren 21px hoog. Dat is
 * onder de 24px die WCAG 2.2 AA als ondergrens voor een bedieningselement
 * aanhoudt. Vier pixels padding erbij en dezelfde marge eraf: het vlak wordt
 * 29px en er verschuift niets.
 *
 * Dit staat op de icon-lists in het algemeen, dus de footerregels van 24px
 * krijgen hem ook. Daar is de tussenruimte 10px en de padding samen 8px, dus
 * de vlakken van twee regels onder elkaar raken elkaar niet. Zouden ze dat wel
 * doen, dan pakt de onderste de tik van de bovenste af en is de kwaal erger
 * dan de kuur. */
.elementor-icon-list-item > a {
  padding-block: 4px;
  margin-block: -4px;
}

/* De WhatsApp-link in de zin boven het contactformulier was 117x23, net onder
 * de 24px. Drie pixels erbij en er weer af. Klein gehouden met opzet: deze
 * link staat middenin lopende tekst, en een vlak dat over de regel erboven
 * heen valt zou daar tikken afvangen.
 *
 * Niet op de zwevende knop (.ws-wa) en niet op de link in het menu
 * (.ws-drawer__wa): allebei zijn het ook wa.me-links, en deze regel staat later
 * met dezelfde specificiteit. Hij won het van de inline-flex van de knop, wat
 * het icoon uit het midden zette, en van de padding van de menulink.
 *
 * De uitzondering staat in :where(), want die telt niet mee in de specificiteit.
 * Met een kale :not() werd de regel zwaarder dan die van Elementor op de
 * footerregel, en kwamen icoon en nummer daar onder elkaar te staan. */
a[href^="https://wa.me/"]:where(:not(.ws-wa):not(.ws-drawer__wa)) {
  display: inline-block;
  padding-block: 3px;
  margin-block: -3px;
}