/* ==========================================================================
   Verhuisbedrijf Holland - componenten (native blokken + maatwerk-classes).
   ========================================================================== */

:focus-visible { outline: 2.5px solid var(--orange); outline-offset: 3px; border-radius: 4px; }
/* Geen focus-kader bij muis/touch-klik (alleen bij toetsenbord-navigatie). */
:focus:not(:focus-visible) { outline: none; }
.vbh-faq summary:focus:not(:focus-visible) { outline: none; }
body { line-height: 1.7; }

/* ---- helpers ---- */
.eyebrow { font-size: .78rem; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--orange-deep); }
.lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--text-soft); line-height: 1.65; }
.text-soft { color: var(--text-soft); }
.stars { color: #FBBC05; letter-spacing: .02em; }
.dot { color: var(--orange); font-weight: 700; }

/* verticale sectie-ritme */
.vbh-section { padding-block: clamp(3.4rem, 6.5vw, 6rem); }
/* Geen tussenruimte tussen secties: ze sluiten tegen elkaar (padding zit binnenin).
   Ook de template-part-wrapper van de footer (die krijgt anders 24px block-gap). */
.vbh-hero, .vbh-section, .vbh-footer, .wp-block-template-part { margin-block: 0; }

/* html-knop (hero) */
.vbh-btn { display: inline-flex; align-items: center; gap: .5em; background: var(--orange); color: #fff;
  font-weight: 600; font-size: .98rem; padding: .85em 1.6em; border-radius: var(--r-btn); text-decoration: none;
  transition: transform .18s, background .18s; box-shadow: 0 12px 26px -12px rgba(249,135,18,.55); }
.vbh-btn:hover { background: var(--orange-deep); transform: translateY(-2px); color: #fff; }
.arw { vertical-align: middle; }
.vbh-btn .arw { transition: transform .18s; } .vbh-btn:hover .arw { transform: translateX(4px); }
.hero-cta { display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap; margin-top: 1.6rem; }

/* ---- header (fixed, wit) ---- */
.vbh-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; border-bottom: 1px solid var(--line); }
/* Solide witte header (geen blur/transparantie). */
.vbh-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #fff; }
.vbh-header .wp-block-group { min-height: var(--header-h); }
.vbh-header .wp-block-site-logo img { height: 40px; width: auto; }
.vbh-header .wp-block-navigation { font-weight: 500; font-size: .8rem; text-transform: uppercase; letter-spacing: .09em; }
.vbh-header .wp-block-navigation a { color: var(--navy); opacity: .85; }
.vbh-header .wp-block-navigation a:hover { opacity: 1; color: var(--orange-deep); }
/* menu precies in het midden van de header (alleen echte desktop, > tablet) */
@media (min-width: 1025px) {
  .vbh-header .vbh-header-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; }
  .vbh-header .vbh-header-row > .wp-block-site-logo { justify-self: start; }
  .vbh-header .vbh-header-row > .wp-block-navigation { justify-self: center; }
  .vbh-header .vbh-header-row > .wp-block-group { justify-self: end; }
}
.vbh-header .wp-block-button__link { padding: .62em 1.25em; font-size: .9rem; white-space: nowrap; }
.vbh-tel { font-weight: 600; color: var(--navy); white-space: nowrap; font-variant-numeric: tabular-nums; text-decoration: none; }

/* Tablet + mobiel krijgen dezelfde hamburger-header: forceer hamburger t/m 1024px */
@media (max-width: 1024px) {
  .vbh-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }
}

/* Desktop dropdowns voor Diensten en Locaties (openSubmenusOnClick) */
.vbh-header .wp-block-navigation .wp-block-navigation__submenu-icon { margin-left: .35em; }
.vbh-header .wp-block-navigation .wp-block-navigation__submenu-container {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow);
  padding: .6rem; min-width: 260px;
  /* onder de vaste header beginnen, met wat lucht */
  margin-top: 2.1rem; }
/* Dropdown openen bij HOVER (desktop), zonder klik. openSubmenusOnClick houdt de
   ouder een niet-navigeerbare button; deze regels tonen het paneel bij hover/focus. */
@media (min-width: 1025px) {
  .vbh-header .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container,
  .vbh-header .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-container,
  .vbh-header .wp-block-navigation__submenu-container:hover {
    visibility: visible !important; opacity: 1 !important; }
  /* onzichtbare brug over de margin-gap zodat de hover niet wegvalt tussen item en paneel */
  .vbh-header .wp-block-navigation__submenu-container::before {
    content: ""; position: absolute; left: 0; right: 0; top: -2.1rem; height: 2.1rem; }
}
.vbh-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .5rem .8rem; border-radius: 8px; }
.vbh-header .wp-block-navigation__submenu-container a:hover { background: var(--tint); color: var(--orange-deep); opacity: 1; }
/* Diensten: twee kolommen; Locaties: drie kolommen */
.vbh-header .vbh-diensten-menu .wp-block-navigation__submenu-container {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 .4rem; min-width: 460px; }
.vbh-header .vbh-locaties-menu .wp-block-navigation__submenu-container {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 .4rem; min-width: 540px; }

/* Mobiele balk: alleen het logo links en de hamburger rechts. De offerteknop en
   het telefoonnummer gaan eruit (de hero en het menu hebben de CTA al), logo
   iets kleiner. Geldt t/m tablet (1024px), waar ook de hamburger verschijnt. */
@media (max-width: 1024px) {
  .vbh-header .wp-block-site-logo img { height: 30px; }
  .vbh-header .vbh-header-row { justify-content: flex-start; gap: .95rem; }
  .vbh-header .vbh-header-row > .wp-block-site-logo { margin-right: auto; }
  .vbh-header .vbh-header-row > .wp-block-group { display: none; }
  .vbh-header .vbh-header-row > .wp-block-navigation { order: 2; }
  .vbh-tel { display: none; }
}
/* mobiel menu-icoon als 3 streepjes (i.p.v. de standaard 2) */
.vbh-header .wp-block-navigation__responsive-container-open {
  background-color: transparent; border: 0; padding: 0; width: 26px; height: 16px; color: var(--navy);
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-size: 26px 2px; background-repeat: no-repeat; background-position: left top, left center, left bottom; }
.vbh-header .wp-block-navigation__responsive-container-open svg { display: none; }
/* geen kader om de hamburger na klikken/sluiten; alleen een nette ring bij toetsenbord */
.vbh-header .wp-block-navigation__responsive-container-open:focus { outline: none; box-shadow: none; }
.vbh-header .wp-block-navigation__responsive-container-open:focus-visible { outline: 2.5px solid var(--orange); outline-offset: 5px; border-radius: 4px; }
/* Mobiel overlay-menu: schermvullend, items groot en verticaal gecentreerd.
   (De selectors van dit blok waren bij een eerdere bewerking weggevallen.) */
.vbh-header .wp-block-navigation__responsive-container.is-menu-open {
  position: fixed !important; inset: 0 !important;
  width: auto !important; height: auto !important; max-width: none; min-height: 100svh;
  background: #fff; border: 0; border-radius: 0; box-shadow: none; padding: 0; z-index: 200;
  display: flex; flex-direction: column; }
/* hele keten flex:1 zodat de items echt verticaal in het midden komen.
   De zijruimte staat op één laag; op alle drie zou hij stapelen en het menu versmallen. */
.vbh-header .wp-block-navigation__responsive-container.is-menu-open > .wp-block-navigation__responsive-close,
.vbh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
  flex: 1; width: 100%; max-width: none; display: flex; padding: 0 !important; }
.vbh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  flex: 1; width: 100%; max-width: none; display: flex; align-items: center; justify-content: center;
  padding: clamp(1.25rem, 6vw, 2.5rem) !important; }
.vbh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  flex: 0 0 auto; align-self: stretch; width: 100%; height: auto; flex-direction: column; align-items: center;
  justify-content: center; gap: 1.6rem; }
.vbh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-size: 1.9rem; line-height: 1.2; font-weight: 600; color: var(--navy); text-transform: none; letter-spacing: 0;
  opacity: 1; padding: .5rem 0; }
.wp-block-navigation__responsive-container-close { position: absolute; top: clamp(1rem, 5vw, 1.7rem);
  right: clamp(1rem, 5vw, 1.7rem); color: var(--navy); z-index: 2; }
.wp-block-navigation__responsive-container-close svg { width: 26px; height: 26px; }
/* Overlay-submenu's (Diensten/Locaties) op mobiel/tablet: in-lijn, gecentreerd, kleiner, niet afgekapt.
   display blijft bij de accordeonregels verderop (.nv-open), dus hier niet forceren. */
.vbh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  position: static !important; opacity: 1 !important; visibility: visible !important;
  background: transparent; border: 0; box-shadow: none; padding: 0; margin: .5rem 0 0; min-width: 0;
  grid-template-columns: none; flex-direction: column; align-items: center; gap: .15rem; width: 100%; }
.vbh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-size: 1.2rem; font-weight: 500; padding: .4rem 0; }
/* anker-offset onder de vaste header */
[id] { scroll-margin-top: calc(var(--header-h) + 8px); }
.vbh-tel:hover { color: var(--orange-deep); }

/* ---- hero (Cover) ---- */
.vbh-hero { color: #fff; }
/* Overlay altijd op volle dekking: de core-regel has-background-dim-100
   (opacity:1) kan door LiteSpeed "unused CSS" gestript zijn, waardoor de
   overlay op 0.5 terugvalt en de foto te licht blijft. Hier hard afdwingen. */
.vbh-hero .wp-block-cover__background { opacity: 1 !important; }
/* Hero-content krijgt EXACT hetzelfde content-vak als de rest van de pagina:
   contentSize (1240) gecentreerd met 24px zijrand (= de root-padding van het
   thema). content-box + deze padding reproduceert max(24px,(100%-1240)/2) op
   elke breedte. Cruciaal: de cover zelf en de binnengroep mogen GEEN eigen
   zijrand hebben, anders stapelt de inspringing (16+24+24). We houden precies
   één padding, hier op de inner-container. */
.vbh-hero { padding-inline: 0 !important; }
.vbh-hero .wp-block-cover__inner-container { box-sizing: content-box; max-width: var(--content);
  margin-inline: auto; padding-inline: 24px;
  /* Extra bovenruimte zodat de inhoud iets onder het midden uitkomt (de cover centreert,
     dus de helft van deze waarde is de verschuiving naar beneden). */
  padding-block: calc(var(--header-h) + 32px) 0; }
.vbh-hero-inner { max-width: 720px; margin-left: 0; margin-right: auto; padding-inline: 0 !important; }
.vbh-hero h1 { color: #fff !important; font-size: clamp(2.15rem, 4.6vw, 3.6rem); font-weight: 600; line-height: 1.12; letter-spacing: -.01em; }
.vbh-hero .lead { color: #E4E8F2; max-width: 44ch; }
.vbh-hero .eyebrow { color: #FFB25A; }
.vbh-hero-trust { display: flex; flex-wrap: wrap; gap: .6rem 1.3rem; margin-top: 1.5rem; font-size: .86rem; color: #D6DBEA; }
.vbh-hero-trust b { color: #fff; font-weight: 600; }
.vbh-hero .wp-block-buttons { margin-top: .4rem; }
/* Google- + Trustoo-badge naast elkaar in de hero. */
.vbh-hero-badges { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin-top: 1.4rem; }
.vbh-trustoo { display: inline-flex; line-height: 0; border-radius: 10px; overflow: hidden;
  box-shadow: var(--shadow-sm); transition: transform .18s ease; }
.vbh-trustoo:hover { transform: translateY(-2px); }
.vbh-trustoo img { height: 56px; width: auto; display: block; }

/* tekst-link naast knop */
.vbh-textlink a, a.vbh-textlink { color: #fff; font-weight: 500; text-decoration: none; border-bottom: 1.5px solid rgba(255,255,255,.3); padding-bottom: 2px; }
.vbh-textlink a:hover, a.vbh-textlink:hover { border-color: var(--orange); }

/* ---- google badge ---- */
.vbh-gbadge { display: inline-flex; align-items: center; gap: .55rem; background: #fff; color: var(--text);
  border-radius: 999px; padding: .5rem 1rem .5rem .72rem; font-size: .9rem; font-weight: 500;
  box-shadow: var(--shadow-sm); transition: transform .18s ease; text-decoration: none; }
.vbh-gbadge:hover { transform: translateY(-2px); }
.vbh-gbadge .stars { font-size: .95rem; }
.vbh-gbadge b { color: var(--navy); font-weight: 600; }
.vbh-gbadge .arw { color: var(--orange-deep); font-weight: 600; transition: transform .18s ease; }
.vbh-gbadge:hover .arw { transform: translateX(4px); }

/* ---- split (intro / mensen) ---- */
.vbh-split { align-items: center; gap: clamp(2rem, 5vw, 4.5rem) !important; }
.vbh-split .lead, .vbh-split p { line-height: 1.7; }
.portrait img, .vbh-portrait img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--r); box-shadow: var(--shadow); }
.vbh-team-img { overflow: hidden; border-radius: var(--r); box-shadow: var(--shadow); }
.vbh-team-img img { width: 100%; height: auto; display: block; transform: scale(1.06); transform-origin: 50% 42%; }
.vbh-usps { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1.4rem; }
.vbh-usps li { display: flex; gap: .55rem; font-size: .96rem; color: var(--text); }
.vbh-usps li::before { content: "\2713"; color: var(--orange-deep); font-weight: 700; }
/* Mobiel: 6 usps als 3 + 3 naast elkaar (2 kolommen behouden). */
@media (max-width: 600px) { .vbh-usps { gap: .6rem 1rem; font-size: .9rem; } .vbh-usps li { font-size: .88rem; } }

/* ---- reasons ---- */
.vbh-reasons { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 1.1rem; counter-reset: rz; }
.vbh-reasons li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; }
.vbh-reasons li::before { content: "\2192"; width: 36px; height: 36px; border-radius: var(--r);
  background: rgba(249,135,18,.14); color: var(--orange-deep); display: grid; place-items: center; font-weight: 700; font-size: 1.15rem; }
.vbh-reasons b { color: var(--navy); font-weight: 600; display: block; font-size: 1.02rem; }
.vbh-reasons span { color: var(--text-soft); font-size: .94rem; }

/* ---- diensten (inventarislijst) ---- */
.vbh-svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.vbh-svc { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 1.1rem;
  padding: 1.5rem 1.6rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; text-decoration: none; cursor: pointer; }
.vbh-svc:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--orange); }
.vbh-svc .idx { font-size: .82rem; color: var(--orange-deep); font-weight: 600; letter-spacing: 1px; font-variant-numeric: tabular-nums; padding-top: .2rem; }
.vbh-svc h3 { font-size: 1.2rem; color: var(--navy); font-weight: 600; margin: 0 0 .3rem; transition: color .15s; }
.vbh-svc:hover h3 { color: var(--orange-deep); }
.vbh-svc p { font-size: .94rem; color: var(--text-soft); margin: 0; }
.vbh-svc .arw { color: var(--orange-deep); opacity: 1; align-self: center; transition: transform .18s ease; }
.vbh-svc:hover .arw { transform: translateX(4px); }
@media (max-width: 781px) { .vbh-svc-grid { grid-template-columns: 1fr; } }

/* ---- werkwijze ---- */
.vbh-steps { gap: 1.4rem !important; counter-reset: st; }
.vbh-step { position: relative; padding-top: 2.5rem; }
.vbh-step::before { counter-increment: st; content: "0" counter(st); position: absolute; top: 0; left: 0;
  font-size: .9rem; color: var(--orange-deep); font-weight: 600; }
.vbh-step h3 { font-size: 1.1rem; margin: 0 0 .4rem; }
.vbh-step p { font-size: .92rem; color: var(--text-soft); margin: 0; }

/* ---- locaties ---- */
.vbh-city-cols { columns: 3; column-gap: 1.4rem; font-size: .97rem; margin-top: 0; }
.vbh-city-cols a { display: flex; justify-content: space-between; align-items: center; padding: .5rem 0;
  color: var(--navy); border-bottom: 1px solid var(--line); break-inside: avoid; text-decoration: none; transition: color .15s, padding-left .15s; }
.vbh-city-cols a::after { content: "\203A"; color: var(--orange); opacity: .55; transition: transform .15s, opacity .15s; }
.vbh-city-cols a:hover { color: var(--orange-deep); padding-left: .35rem; }
.vbh-city-cols a:hover::after { transform: translateX(3px); opacity: 1; }
@media (max-width: 781px) { .vbh-city-cols { columns: 2; } }

/* ---- carrousel (reviews + blog) ---- */
.vbh-cnav { display: flex; gap: .6rem; }
.vbh-cbtn { width: 44px; height: 44px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff;
  color: var(--navy); font-size: 1.15rem; cursor: pointer; display: grid; place-items: center; transition: border-color .18s, transform .18s; }
.vbh-cbtn:hover { border-color: var(--navy); transform: translateY(-2px); }
.vbh-carousel { display: flex; gap: 1.4rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: .4rem .2rem 1.2rem; margin: 0 -.2rem; scrollbar-width: none; }
/* Extra lucht tussen de reviews-kop en de kaarten (WP-flow reset margin-block:0
   op de kop, dus de ruimte hoort direct op de carrousel). */
/* zelfde kop-tot-kaarten-afstand als de blogsectie */
#reviews .vbh-carousel { margin-top: 1.5rem; }
.vbh-carousel::-webkit-scrollbar { display: none; }

/* review-kaart */
/* Review-cards: ALTIJD zonder schaduw (blijvende afspraak, ook voor toekomstige review-cards). */
.vbh-review { flex: 0 0 clamp(300px, 33%, 380px); scroll-snap-align: start; margin: 0; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r); padding: 1.6rem 1.55rem; box-shadow: none; display: flex; flex-direction: column; }
.vbh-review .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .85rem; }
.vbh-review .top svg { width: 20px; height: 20px; }
.vbh-review p { color: var(--text); font-size: .97rem; line-height: 1.6; margin: 0; }
.vbh-review .who { margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--line); font-size: .9rem; color: var(--text-soft); display: flex; align-items: center; gap: .7rem; }
.vbh-review .who b { color: var(--navy); font-weight: 600; }
.vbh-review .ava { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; background: var(--tint); }
.vbh-review .wsub { display: block; color: var(--text-soft); font-size: .82rem; }

/* google badge groot (klikbaar) */
.big-badge { display: inline-flex; align-items: center; gap: .65rem; background: #fff; padding: .65rem 1.15rem;
  border-radius: 999px; border: 1px solid var(--line); box-shadow: var(--shadow-sm); font-weight: 500; text-decoration: none; transition: transform .18s ease; }
.big-badge:hover { transform: translateY(-2px); }
.big-badge .stars { font-size: 1.05rem; } .big-badge b { color: var(--navy); }
.big-badge .arw { color: var(--orange-deep); font-weight: 600; transition: transform .18s ease; }
.big-badge:hover .arw { transform: translateX(4px); }
.rev-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* ---- blog carrousel (Query Loop) ---- */
.vbh-blog .wp-block-post-template { display: flex !important; gap: 1.4rem; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding: .5rem .4rem 1rem; margin: 0 -.4rem; scrollbar-width: none; list-style: none; }
.vbh-blog .wp-block-post-template::-webkit-scrollbar { display: none; }
.vbh-blog .wp-block-post-template > li { flex: 0 0 clamp(270px, 31%, 350px); scroll-snap-align: start; margin: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: transform .18s, border-color .18s; }
.vbh-blog .wp-block-post-template > li:hover { transform: translateY(-4px); border-color: #d4dae6; }
.vbh-blog .wp-block-post-featured-image { margin: 0; }
.vbh-blog .wp-block-post-featured-image img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.vbh-blog .wp-block-post-title { font-size: 1.12rem; line-height: 1.32; margin: 0 0 .5rem; padding: 1.3rem 1.35rem 0; }
.vbh-blog .wp-block-post-title a { color: var(--navy); text-decoration: none; }
.vbh-blog .wp-block-post-excerpt { font-size: .92rem; color: var(--text-soft); padding: 0 1.35rem 1.4rem; margin: 0; }
.vbh-blog .wp-block-post-template > li > *:first-child { margin-top: 0; }
.vbh-blog-firstpad { padding-top: 1.3rem; }

/* ---- faq (Details-blok) ---- */
/* FAQ krijgt GEEN eigen breedte-override: zo blijft het een gewone constrained-
   child (max-width = content-size, links op dezelfde rand als de titel erboven).
   De antwoordtekst is apart beperkt op 70ch. */
/* Rij/lijn tot 70% van de content (niet de volle breedte); mobiel weer 100%. */
.vbh-faq details { border-top: 1px solid var(--line); max-width: 70%; margin-block: 0; }
.vbh-faq details:last-child { border-bottom: 1px solid var(--line); }
@media (max-width: 900px) { .vbh-faq details { max-width: 100%; } }
/* Padding op de summary zelf, zodat de HELE rij (incl. de ruimte tot de
   volgende vraag) klikbaar is, niet alleen de tekst. */
.vbh-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; font-weight: 500; font-size: 1.08rem; color: var(--navy); padding: .78rem 0; transition: color .15s; }
.vbh-faq summary:hover { color: var(--orange-deep); }
.vbh-faq summary::-webkit-details-marker { display: none; }
.vbh-faq summary::after { content: "+"; color: var(--orange); font-weight: 600; font-size: 1.4rem; line-height: 1; transition: transform .2s; }
.vbh-faq details[open] summary::after { transform: rotate(45deg); }
.vbh-faq details > *:not(summary) { color: var(--text-soft); font-size: .97rem; margin-top: 0; padding-bottom: 1.2rem; max-width: 70ch; }

/* ---- cta ---- */
.vbh-cta { text-align: left; }
.vbh-cta h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.vbh-cta .lead { margin-inline: 0; }
.vbh-cta-textlink a { color: var(--navy); font-weight: 600; border-bottom: 1.5px solid var(--line); padding-bottom: 2px; }

/* ---- footer (licht) ---- */
.vbh-footer { background: var(--tint); color: var(--text-soft); }
.vbh-footer .wp-block-site-logo { width: 200px; max-width: 60%; }
.vbh-footer .wp-block-site-logo img { height: auto; width: 100%; }
.niwo img.niwo-logo { height: 40px; width: auto; display: block; }
.vbh-footer p { font-size: .92rem; color: var(--text-soft); max-width: 38ch; }
.vbh-footer h4, .vbh-footer .foot-h { font-size: .75rem; letter-spacing: 1.4px; text-transform: uppercase; color: var(--navy); margin: 0 0 1rem; font-weight: 600; }
.vbh-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: .94rem; }
.vbh-footer ul a { color: var(--text-soft); text-decoration: none; }
.vbh-footer ul a:hover { color: var(--orange-deep); }
.vbh-footer .vbh-tel { color: var(--navy); }
.niwo { display: inline-flex; align-items: center; gap: .7rem; margin-top: 1.4rem; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: .6rem .9rem; box-shadow: var(--shadow-sm); }
.niwo .seal { width: 36px; height: 36px; flex: none; border-radius: var(--r); background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .66rem; letter-spacing: .5px; }
.niwo b { display: block; color: var(--navy); font-size: .85rem; font-weight: 600; }
.niwo span { font-size: .75rem; color: var(--text-soft); }
.foot-locaties { margin-top: 2.4rem; padding-top: 1.8rem; border-top: 1px solid var(--line); }
.foot-locaties .cols { columns: 6; column-gap: 1.2rem; font-size: .9rem; }
.foot-locaties a { display: block; padding: .3rem 0; color: var(--text-soft); text-decoration: none; break-inside: avoid; }
.foot-locaties a:hover { color: var(--orange-deep); }
.foot-bottom { margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); display: flex;
  justify-content: space-between; align-items: center; gap: 1rem 1.6rem; flex-wrap: wrap; font-size: .82rem; color: var(--text-soft); }
.foot-bottom a { color: var(--text-soft); text-decoration: none; } .foot-bottom a:hover { color: var(--navy); }
.foot-bottom .links { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.foot-bottom .pw a { color: var(--orange-deep); font-weight: 600; }
@media (max-width: 781px) { .foot-locaties .cols { columns: 3; } }
@media (max-width: 520px) { .foot-locaties .cols { columns: 2; } }


/* ---- offerteformulier (2 kolommen, placeholders = veldfunctie) ---- */
/* Eén grid-gap => verticale en horizontale spacing tussen velden zijn gelijk. */
.vbh-form { text-align: left; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
/* Brede velden over beide kolommen. */
.vbh-form textarea, .vbh-form .vbh-check, .vbh-form .vbh-btn, .vbh-form-note { grid-column: 1 / -1; }
@media (max-width: 560px) { .vbh-form { grid-template-columns: 1fr; } }
.vbh-form input, .vbh-form textarea { box-sizing: border-box; font: inherit; color: var(--text); background: #fff;
  border: 1px solid var(--line); border-radius: var(--r); padding: .82rem .95rem; width: 100%; }
.vbh-form input::placeholder, .vbh-form textarea::placeholder { color: #6a7285; }
.vbh-form input:focus, .vbh-form textarea:focus { outline: none; border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(249,135,18,.15); }
.vbh-form textarea { resize: vertical; min-height: 108px; }
/* datumveld: altijd type=date (stabiel + icoon altijd zichtbaar), met eigen placeholder */
.vbh-date { position: relative; }
.vbh-date > span { position: absolute; left: .96rem; top: 50%; transform: translateY(-50%); color: #6a7285; pointer-events: none; font: inherit; }
.vbh-date input:focus + span, .vbh-date input.has-val + span { display: none; }
.vbh-date input:not(:focus):not(.has-val)::-webkit-datetime-edit { opacity: 0; }
.vbh-date input::-webkit-calendar-picker-indicator { opacity: .6; cursor: pointer; }
/* akkoord-checkbox */
.vbh-check { display: flex; align-items: flex-start; gap: .55rem; font-size: .9rem; color: var(--text-soft); line-height: 1.45; cursor: pointer; }
.vbh-check input { width: auto; margin: .15rem 0 0; accent-color: var(--orange); flex: none; }
.vbh-check a { color: var(--orange-deep); font-weight: 600; }
/* knop op dezelfde afstand als tussen de velden (grid-gap) */
.vbh-form .vbh-btn { justify-self: start; border: 0; cursor: pointer; margin-top: 0; }
.vbh-form-note { font-size: .9rem; color: var(--text-soft); margin: .1rem 0 0; }
.vbh-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vbh-form-ok, .vbh-form-err { border-radius: var(--r); padding: 1rem 1.2rem; font-weight: 500; }
.vbh-form-ok { background: rgba(52,168,83,.1); border: 1px solid rgba(52,168,83,.4); color: #1e7e34; }
.vbh-form-err { background: rgba(234,67,53,.08); border: 1px solid rgba(234,67,53,.4); color: #c0392b; }

/* ---- offerte-sectie (lichte band, hoger, formulier als witte kaart rechts) ---- */
.vbh-cta { padding-block: clamp(4.5rem, 8vw, 7.5rem); }
.vbh-cta-usps { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .75rem; }
.vbh-cta-usps li { display: flex; gap: .6rem; color: var(--text); font-size: 1rem; }
.vbh-cta-usps li::before { content: "\2713"; color: var(--orange-deep); font-weight: 700; }
/* formulier als witte kaart in de rechterkolom */
.vbh-cta .vbh-form { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow);
  padding: clamp(1.6rem, 3vw, 2.3rem); border-radius: var(--r); margin: 0; }
.vbh-cta .vbh-form-ok, .vbh-cta .vbh-form-err { margin: 0 0 1rem; }
/* donkere offerte-CTA (blogartikel): navy band, witte formulierkaart */
.vbh-cta-dark { background: linear-gradient(120deg, var(--navy) 0%, #060a1c 100%) !important; }
.vbh-cta-dark .eyebrow { color: var(--orange); }
.vbh-cta-dark h2 { color: #fff; }
.vbh-cta-dark .lead { color: #d7dcea; }
.vbh-cta-dark .vbh-cta-usps li { color: #e8ebf3; }
.vbh-cta-dark .vbh-cta-usps li::before { color: var(--orange); }

/* ---- cookiebanner (niet-blokkerend, linksonder) ---- */
.vbh-cookie-overlay { position: fixed; left: clamp(14px, 3vw, 26px); bottom: clamp(14px, 3vw, 26px);
  z-index: 9999; width: min(400px, calc(100% - 28px)); }
html.cookie-ok .vbh-cookie-overlay { display: none; }
.vbh-cookie-card { background: #fff; border-radius: var(--r); box-shadow: var(--shadow);
  max-width: 470px; width: 100%; padding: clamp(1.6rem, 4vw, 2.3rem); }
.vbh-cookie-title { color: var(--navy); font-size: 1.3rem; font-weight: 600; margin: 0 0 .5rem; }
.vbh-cookie-text { color: var(--text-soft); font-size: .94rem; line-height: 1.6; margin: 0; }
.vbh-cookie-card a { color: var(--orange-deep); font-weight: 600; }
/* categorieën met toggles */
.vbh-cookie-cats { display: grid; gap: 1rem; margin: 1.3rem 0 1.5rem; }
.vbh-cookie-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.vbh-cookie-cat-name { font-weight: 600; color: var(--navy); font-size: .96rem; }
.vbh-cookie-always { font-size: .8rem; color: var(--text-soft); }
.vbh-cookie-cat-desc { margin: .25rem 0 0; font-size: .85rem; color: var(--text-soft); line-height: 1.5; }
/* toggle-switch */
.vbh-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: none; }
.vbh-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.vbh-switch-slider { position: absolute; inset: 0; background: #cfd5e2; border-radius: 999px; transition: background .18s; }
.vbh-switch-slider::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform .18s; box-shadow: 0 1px 3px rgba(20,27,55,.25); }
.vbh-switch input:checked + .vbh-switch-slider { background: var(--orange); }
.vbh-switch input:checked + .vbh-switch-slider::before { transform: translateX(18px); }
/* knoppen: Selectie opslaan (ghost, links) + Alles accepteren (primair, rechts) */
.vbh-cookie-actions { display: flex; gap: .7rem; flex-wrap: wrap; justify-content: flex-end; }
.vbh-cookie-actions .vbh-btn { cursor: pointer; border: 0; }
.vbh-cookie-ghost { background: transparent; border: 1px solid var(--line); color: var(--navy);
  font: inherit; font-weight: 600; padding: .85em 1.4em; border-radius: var(--r-btn); cursor: pointer;
  transition: border-color .18s, color .18s; }
.vbh-cookie-ghost:hover { border-color: var(--navy); }

/* Google-pill onder NIWO: even breed als de NIWO-card in de footer */
.vbh-footer .niwo, .vbh-footer .vbh-foot-gbadge { display: flex; width: 100%; max-width: 305px; box-sizing: border-box; }
.vbh-foot-gbadge { margin-top: 1rem; justify-content: center; white-space: nowrap; }

/* ---- juridische / content-pagina's ---- */
.vbh-legal { padding: calc(var(--header-h) + clamp(2.5rem, 6vw, 4.2rem)) 0 clamp(3.5rem, 7vw, 6rem); }
.vbh-legal > .wp-block-post-title { font-size: clamp(2rem, 4vw, 2.8rem); color: var(--navy); font-weight: 600;
  line-height: 1.15; margin: 0 auto 1.6rem; max-width: 800px; }
.vbh-legal .wp-block-post-content { max-width: 800px; margin-inline: auto; }
.vbh-legal h2 { font-size: 1.35rem; color: var(--navy); font-weight: 600; margin: 2.2rem 0 .7rem; }
.vbh-legal h3 { font-size: 1.08rem; color: var(--navy); font-weight: 600; margin: 1.6rem 0 .5rem; }
.vbh-legal p, .vbh-legal li { color: var(--text-soft); line-height: 1.7; }
.vbh-legal p { margin: 0 0 1rem; }
.vbh-legal ul, .vbh-legal ol { margin: 0 0 1.1rem; padding-left: 1.3rem; }
.vbh-legal li { margin-bottom: .4rem; }
.vbh-legal a { color: var(--orange-deep); font-weight: 600; }
.vbh-legal strong { color: var(--navy); }

/* CTA-blok onderaan dienst-/stadspagina's */
.vbh-page-cta { max-width: 800px; margin: 2.6rem auto 0; background: var(--tint); border: 1px solid var(--line);
  border-radius: var(--r); padding: clamp(1.6rem, 4vw, 2.3rem); }
.vbh-page-cta h2 { margin: 0 0 .5rem; color: var(--navy); font-size: 1.35rem; }
.vbh-page-cta p { color: var(--text-soft); margin: 0 0 1.1rem; line-height: 1.6; }
.vbh-page-cta .vbh-cta-row { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; margin: 0; }
.vbh-page-cta .vbh-tel { color: var(--navy); }
/* interne dienstenlijst op de overzichtspagina */
.vbh-diensten-index { max-width: 800px; margin: 1.5rem auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; padding: 0; list-style: none; }
.vbh-diensten-index a { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.2rem; color: var(--navy); font-weight: 600; text-decoration: none; transition: border-color .18s, transform .18s; }
.vbh-diensten-index a:hover { border-color: var(--orange); transform: translateY(-2px); }
@media (max-width: 560px) { .vbh-diensten-index { grid-template-columns: 1fr; } }

/* ===================================================================
   Landingspagina's (diensten + steden) - vbh-landing template
   =================================================================== */
/* Hero op subpagina's: exact één scherm, gelijk aan de homepage (svh = small viewport height,
   fit precies ook met een dynamische browserbalk; 100vh kan op mobiel te hoog uitvallen) */
.vbh-hero.is-page { min-height: 100svh; }
/* Landingssjabloon: post-content krijgt standaard 24px blok-tussenruimte bovenaan (WP block-gap),
   waardoor de hero 24px omlaag zakt en niet exact het scherm vult. Op nul -> hero start op y=0.
   Simpele class + !important zodat LiteSpeed's unused-CSS-removal hem niet stript. */
.wp-block-post-content { margin-block-start: 0 !important; }

/* Landingspagina-FAQ (1 kolom) op volle contentbreedte, gelijk aan de rest (homepage-FAQ blijft 70%) */
.vbh-faq-wide details { max-width: 100%; }

/* FAQ in twee gelijke kolommen wanneer er meer dan 6 vragen zijn.
   GEEN max-width hier: dan houdt WP's constrained layout de FAQ op de contentbreedte (1240),
   gelijk aan de kop en de overige secties. */
.vbh-faq.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(2rem, 4vw, 3.5rem); }
.vbh-faq.two-col .vbh-faq-col { min-width: 0; }
.vbh-faq.two-col details { max-width: 100%; }
.vbh-faq.two-col .vbh-faq-col details:last-child { border-bottom: 1px solid var(--line); }
@media (max-width: 760px) { .vbh-faq.two-col { grid-template-columns: 1fr; } }

/* Checklist met vetgedrukte term + uitleg (nette weergave i.p.v. krappe 2-koloms vinkjes) */
.vbh-checklist { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .85rem; }
.vbh-checklist li { position: relative; padding-left: 1.9rem; color: var(--text-soft); line-height: 1.6; font-size: .97rem; }
.vbh-checklist li::before { content: "\2713"; position: absolute; left: 0; top: 0; width: 1.3rem; height: 1.3rem; color: var(--orange-deep); font-weight: 700; }
.vbh-checklist li b { color: var(--navy); font-weight: 600; display: block; margin-bottom: .1rem; }

/* Scroll-hint onderin de hero (klikbaar, scrollt naar de volgende sectie) */
.vbh-scroll-cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 4;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0;
  color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.5); border-radius: 999px;
  cursor: pointer; backdrop-filter: blur(2px); transition: background .2s, border-color .2s, transform .2s; }
.vbh-scroll-cue:hover { background: rgba(255,255,255,.22); border-color: #fff; }
.vbh-scroll-cue svg { width: 22px; height: 22px; }
/* beweegt alleen bij hover */
.vbh-scroll-cue:hover svg { animation: vbh-bob 1.8s ease-in-out infinite; }
@keyframes vbh-bob { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .vbh-scroll-cue:hover svg { animation: none; } }

/* Leesbare tekstsectie (bredere kolom dan de juridische pagina's) */
.vbh-prose { padding-block: clamp(3rem, 6vw, 5.2rem) clamp(2rem, 4vw, 3.2rem); }
.vbh-prose > * { max-width: 820px; margin-inline: auto; }
.vbh-prose > :first-child { margin-top: 0; }
.vbh-prose h2 { font-size: clamp(1.45rem, 2.6vw, 1.9rem); color: var(--navy); font-weight: 600; margin: 2.4rem auto .75rem; }
.vbh-prose h3 { font-size: 1.14rem; color: var(--navy); font-weight: 600; margin: 1.8rem auto .5rem; }
.vbh-prose p, .vbh-prose li { color: var(--text-soft); line-height: 1.75; font-size: 1.03rem; }
.vbh-prose p { margin: 0 auto 1.1rem; }
.vbh-prose ul { margin: 0 auto 1.3rem; padding-left: 1.3rem; }
.vbh-prose li { margin-bottom: .5rem; }
.vbh-prose a { color: var(--orange-deep); font-weight: 600; }
.vbh-prose strong { color: var(--navy); }

/* Foto in de media-band (liggend formaat) */
.vbh-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r); box-shadow: var(--shadow); }

/* Foto in de split-secties: liggend en begrensd in hoogte, zodat hij niet te groot wordt t.o.v. de tekst */
.vbh-split-img img { width: 100%; aspect-ratio: 4/3; max-height: 400px; object-fit: cover; border-radius: var(--r); box-shadow: var(--shadow); }

/* Kop met knop-rij in secties (bv. offerte-anker onderaan) */
.vbh-landing-cta .vbh-cta-row { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; margin: 1.4rem 0 0; }
.vbh-landing-cta .vbh-tel { color: var(--navy); font-weight: 600; }

/* ===================================================================
   Blog: overzicht (home.html) + artikel (single.html)
   =================================================================== */
/* Overzicht */
.vbh-blogindex { padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 4.5rem)); }
.vbh-blogindex h1 { color: var(--navy); font-size: clamp(2.2rem, 4.6vw, 3.2rem); font-weight: 600; }
.vbh-blog-grid .wp-block-post-template { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.2rem); list-style: none; margin: 0; padding: 0; }
.vbh-blog-grid li.wp-block-post { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; transition: border-color .18s, transform .18s; }
.vbh-blog-grid li.wp-block-post:hover { border-color: var(--orange); transform: translateY(-3px); }
.vbh-blog-grid .wp-block-post-featured-image { margin: 0; }
.vbh-blog-grid .wp-block-post-featured-image img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.vbh-blog-grid .wp-block-post-title { font-size: 1.15rem; line-height: 1.3; margin: 1rem 1.1rem .4rem; }
.vbh-blog-grid .wp-block-post-title a { color: var(--navy); text-decoration: none; }
.vbh-blog-grid .wp-block-post-title a:hover { color: var(--orange-deep); }
.vbh-blog-grid .wp-block-post-excerpt { margin: 0 1.1rem 1.2rem; }
.vbh-blog-grid .wp-block-post-excerpt p { color: var(--text-soft); font-size: .95rem; line-height: 1.6; margin: 0 0 .5rem; }
.vbh-blog-grid .wp-block-post-excerpt__more-link { color: var(--orange-deep); font-weight: 600; }
@media (max-width: 900px) { .vbh-blog-grid .wp-block-post-template { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .vbh-blog-grid .wp-block-post-template { grid-template-columns: 1fr; } }

/* Artikel-hero meta */
.vbh-hero-post .vbh-postmeta { color: #E4E8F2; display: flex; gap: .7rem; align-items: center; font-size: .92rem; margin: .3rem 0 0; }
.vbh-postmeta .dot { opacity: .55; }

/* Gerelateerde artikelen onderaan */
.vbh-post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 3vw, 2rem); margin-bottom: clamp(2rem, 4vw, 3rem); }
.vbh-post-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; transition: border-color .18s, transform .18s; }
.vbh-post-card:hover { border-color: var(--orange); transform: translateY(-3px); }
.vbh-post-thumb img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.vbh-post-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; }
.vbh-post-body .vbh-post-h { font-size: 1.08rem; color: var(--navy); margin: 0; line-height: 1.3; }
.vbh-post-more { color: var(--orange-deep); font-weight: 600; font-size: .9rem; }
@media (max-width: 900px) { .vbh-post-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .vbh-post-grid { grid-template-columns: 1fr; } }

/* Blog-overzicht: kaarten strak uitlijnen (WP block-gap zet anders 24px op kaart 2+) */
.vbh-blog-grid .wp-block-post { margin: 0 !important; }
.vbh-pagination { margin-top: clamp(2rem, 4vw, 3rem); gap: .4rem; }
.vbh-pagination .wp-block-query-pagination-numbers a,
.vbh-pagination a, .vbh-pagination .page-numbers { color: var(--navy); font-weight: 600; padding: .3rem .7rem; border-radius: 8px; text-decoration: none; }
.vbh-pagination .page-numbers.current { background: var(--orange); color: #fff; }
.vbh-pagination a:hover { color: var(--orange-deep); }

/* Blog-artikel: 2 kolommen (content + zijbalk) */
.vbh-article-wrap { padding-top: clamp(2.4rem, 4vw, 3.6rem); }
.vbh-article-cols { gap: clamp(2rem, 4vw, 3.5rem) !important; align-items: start; }
.vbh-article-cols > .wp-block-column:first-child { flex-basis: 70% !important; }
.vbh-article-cols > .wp-block-column:last-child { flex-basis: 30% !important; }
.vbh-article.vbh-prose { padding-block: 0; }
.vbh-article.vbh-prose > * { margin-left: 0; margin-right: 0; }

/* "Geschreven door"-card onder de content */
.vbh-authorbox { display: flex; gap: 1.1rem; align-items: flex-start; margin-top: clamp(2rem, 4vw, 3rem);
  padding: 1.4rem 1.5rem; background: var(--tint); border: 1px solid var(--line); border-radius: var(--r); }
.vbh-authorbox-badge { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; letter-spacing: .04em; }
.vbh-authorbox-label { text-transform: uppercase; letter-spacing: 1.5px; font-size: .72rem; color: var(--orange-deep); font-weight: 600; margin: 0 0 .1rem; }
.vbh-authorbox h3 { font-size: 1.1rem; color: var(--navy); margin: 0 0 .4rem; }
.vbh-authorbox p { color: var(--text-soft); font-size: .95rem; line-height: 1.6; margin: 0; }

/* "Neem contact op"-card in de zijbalk (sticky) */
.vbh-contactcard { position: sticky; top: calc(var(--header-h) + 1.2rem); background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); padding: 1.6rem 1.5rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; align-items: flex-start; }
.vbh-contactcard h3 { color: var(--navy); font-size: 1.25rem; margin: .2rem 0 .5rem; }
.vbh-contactcard p { color: var(--text-soft); font-size: .95rem; line-height: 1.6; margin: 0 0 1rem; }
.vbh-contactcard .vbh-btn { align-self: flex-start; }
.vbh-contactcard-tel { margin-top: .7rem; color: var(--navy); font-weight: 600; text-decoration: none; font-size: .92rem; }
.vbh-contactcard-tel:hover { color: var(--orange-deep); }
.vbh-contactcard-usps { display: flex; flex-direction: column; gap: .4rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line); width: 100%; }
.vbh-contactcard-usps span { color: var(--text-soft); font-size: .9rem; }
@media (max-width: 781px) { .vbh-contactcard { position: static; } }

/* Blog-FAQ (zelfde stijl als locaties) */
.vbh-faq-title { color: var(--navy); font-weight: 600; margin: 0 0 clamp(1.8rem, 3.5vw, 2.8rem); }

/* Gerelateerde artikelen: carrousel zoals homepage */
.vbh-related-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: clamp(1.8rem, 3vw, 2.4rem); }
.vbh-related-head .vbh-related-h { color: var(--navy); font-weight: 600; margin: 0; }
.vbh-post-carousel { display: flex; gap: 1.4rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: .5rem; }
.vbh-post-carousel::-webkit-scrollbar { display: none; }
.vbh-post-carousel .vbh-post-card { flex: 0 0 clamp(270px, 32%, 360px); scroll-snap-align: start; }
.vbh-post-carousel .vbh-post-thumb { height: clamp(170px, 19vw, 210px); overflow: hidden; }
.vbh-post-carousel .vbh-post-thumb img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }

/* Contact-card met foto van Sam */
.vbh-contactcard { align-items: stretch; text-align: left; }
.vbh-contactcard-photo { width: 100%; height: auto; aspect-ratio: 1/1; border-radius: var(--r); object-fit: cover; object-position: center 45%; display: block; margin: 0 0 1.4rem; }
.vbh-contactcard h3 { margin: .3rem 0 .5rem; }
.vbh-contactcard p.vbh-contactcard-role { text-transform: uppercase; letter-spacing: 1.2px; font-size: .72rem; color: var(--orange-deep); font-weight: 600; margin: .15rem 0 1rem; }
.vbh-contactcard .vbh-contactcard-tel { align-self: flex-start; }
/* Gerelateerd-carrousel: kaarten netjes, niet uitgerekt */
.vbh-post-carousel { align-items: stretch; }
.vbh-post-carousel .vbh-post-card { align-self: stretch; }
.vbh-post-carousel .vbh-post-body { flex: 1; }
.vbh-related-head .vbh-related-h { color: var(--navy); font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 1.9rem); margin: 0; }

/* Post-kaart is nu een div met uitgerekte link (wpautop-veilig) */
.vbh-post-card { position: relative; }
.vbh-post-cardlink { position: absolute; inset: 0; z-index: 2; }
.vbh-post-card > p { margin: 0; }
.vbh-post-card > p:empty { display: none; }

/* Contact-card: telefoon op eigen regel (niet inline naast de knop) */
.vbh-contactcard .vbh-btn { display: inline-flex; }
.vbh-contactcard-tel { display: block; }
.vbh-contactcard-tel { margin-top: 1rem; }
.vbh-contactcard p { margin-bottom: 1.4rem; }
.vbh-contactcard > p:has(.vbh-btn), .vbh-contactcard p:has(.vbh-btn) { margin: 0; }

/* portrait-beeld in de lokale sectie (hoger, past bij lang tekstblok) */
.vbh-split-img.vbh-portrait img { aspect-ratio: 3/4; max-height: 700px; }

/* ---- taalwisselaar (Polylang) ---- */
.vbh-langsw { position: relative; }
.vbh-langsw__btn { display: inline-flex; align-items: center; gap: .35rem; background: none; border: 1px solid var(--line); border-radius: 999px; padding: .42rem .7rem; color: var(--navy); font-weight: 600; font-size: .8rem; cursor: pointer; line-height: 1; }
.vbh-langsw__btn:hover { border-color: var(--orange); color: var(--orange-deep); }
.vbh-langsw__menu { position: absolute; top: calc(100% + .5rem); right: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: .4rem; min-width: 180px; display: none; z-index: 60; }
.vbh-langsw:hover .vbh-langsw__menu, .vbh-langsw:focus-within .vbh-langsw__menu { display: block; }
.vbh-langsw__opt { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem .7rem; border-radius: 8px; text-decoration: none; color: var(--navy); font-size: .9rem; }
.vbh-langsw__opt:hover { background: var(--tint); color: var(--orange-deep); }
.vbh-langsw__opt.is-active { color: var(--orange-deep); font-weight: 600; }
.vbh-langsw__code { color: var(--text-soft); font-size: .78rem; font-variant-numeric: tabular-nums; }
.vbh-langsw__caret { transition: transform .15s; }
.vbh-langsw:hover .vbh-langsw__caret { transform: rotate(180deg); }
@media (max-width: 1024px) { .vbh-langsw__btn { padding: .38rem .55rem; } .vbh-langsw__menu { right: auto; left: 0; } }

/* hover-bruggen dropdowns: geen gat meer tussen trigger en menu */
.vbh-langsw__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -.7rem; height: .7rem; }
.vbh-header .wp-block-navigation__submenu-container::before { top: -2.4rem; height: 2.4rem; }

/* dropdowns consistent: zelfde afstand tot de header-items + zelfde hover-brug */
.vbh-langsw__menu { top: calc(100% + 1.8rem); }
.vbh-langsw__menu::before { top: -2.2rem; height: 2.2rem; }
.vbh-header .wp-block-navigation__submenu-container::before { top: -2.2rem; height: 2.2rem; }

/* ---- 404 (compact, past binnen 100svh, met VBH-verhuiswagen) ---- */
/* Sectie = precies 1 scherm; content op het schermmidden gecentreerd. Symmetrische
   verticale padding (= headerhoogte boven en onder) houdt het midden gelijk aan het
   schermmidden terwijl de content vrij blijft van de vaste header. margin:0 tegen block-gap. */
.vbh-404 { min-height: 100svh; margin: 0; display: grid; place-items: center; box-sizing: border-box;
  padding: var(--header-h) 24px; }
.vbh-404__inner { display: grid; grid-template-columns: 1fr 1.05fr; align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem); max-width: 1180px; width: 100%; }
.vbh-404__num { font-size: clamp(3rem, 8vw, 5.5rem); font-weight: 700; color: var(--orange);
  line-height: .85; letter-spacing: -.03em; margin: 0 0 .5rem; }
.vbh-404 h1 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); color: var(--navy); line-height: 1.1;
  margin: 0 0 .85rem; }
.vbh-404 .lead { color: var(--text); font-size: 1.05rem; line-height: 1.6; max-width: 44ch; margin: 0 0 1.7rem; }
.vbh-404__btns { display: flex; flex-wrap: wrap; gap: .75rem; }
.vbh-404__ghost { display: inline-flex; align-items: center; gap: .45em; padding: .72em 1.3em;
  border: 1.5px solid var(--line); border-radius: 999px; color: var(--navy); font-weight: 600;
  transition: border-color .18s, transform .18s; }
.vbh-404__ghost:hover { border-color: var(--navy); transform: translateY(-2px); }
.vbh-404__img { margin: 0; }
.vbh-404__img img { display: block; width: 100%; height: auto; max-height: 60svh; object-fit: cover;
  border-radius: 22px; box-shadow: var(--shadow); }
@media (max-width: 860px) {
  .vbh-404__inner { grid-template-columns: 1fr; text-align: center; gap: 1.4rem; }
  .vbh-404__img { order: -1; }
  .vbh-404__img img { max-height: 30svh; }
  .vbh-404 .lead { margin-inline: auto; }
  .vbh-404__num { margin-top: .3rem; }
  .vbh-404__btns { justify-content: center; }
}

/* === Nova: hero met offerteformulier (split) === */
.vbh-hero-split .wp-block-cover__inner-container { max-width: var(--content); }
.vbh-hero-cols { align-items: center; gap: clamp(1.5rem, 4vw, 3.4rem) !important; width: 100%; }
.vbh-hero-cols > .wp-block-column { min-width: 0; }
.vbh-hero-form { background: #fff; border-radius: var(--r); box-shadow: 0 26px 64px rgba(5,4,17,.5);
  padding: clamp(1.3rem, 2.2vw, 1.9rem); color: var(--text); }
.vbh-hero-form .hf-head { margin-bottom: 1rem; }
.vbh-hero-form .hf-head b { display: block; font-size: 1.25rem; font-weight: 600; color: var(--text); letter-spacing: -.01em; }
.vbh-hero-form .hf-head span { display: block; margin-top: .25rem; font-size: .87rem; color: var(--text-soft); }
.vbh-hero-form .vbh-form { grid-template-columns: 1fr; gap: .65rem; }
.vbh-hero-form .vbh-form textarea { min-height: 78px; }
.vbh-hero-form .vbh-form .vbh-btn { width: 100%; justify-content: center; justify-self: stretch; }
.vbh-cta-cols { align-items: center; gap: clamp(1.8rem, 4vw, 3.6rem) !important; }
.vbh-cta-cols > .wp-block-column { min-width: 0; }
@media (max-width: 900px) {
  .vbh-hero-cols { flex-wrap: wrap; }
  .vbh-hero-cols > .wp-block-column { flex-basis: 100% !important; }
  .vbh-hero-form { margin-top: .3rem; }
}

/* === Nova footer (donker, eigen identiteit) === */
.vbh-footer { background: var(--navy-900); color: var(--on-navy-soft); border-top: 3px solid var(--orange); }
.vbh-footer p { color: var(--on-navy-soft); max-width: 34ch; font-size: .92rem; line-height: 1.65; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: clamp(1.8rem, 4vw, 3rem); align-items: start; }
.foot-logo { margin-bottom: 1.1rem; }
.vbh-footer .foot-h { font-size: .72rem; letter-spacing: 1.6px; text-transform: uppercase; color: #fff; margin: 0 0 1.1rem; font-weight: 700; }
.foot-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; font-size: .94rem; }
.foot-links a { color: var(--on-navy-soft); text-decoration: none; transition: color .16s; }
.foot-links a:hover { color: var(--orange); }
.foot-contact { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .7rem; font-size: .93rem; }
.foot-contact li { display: flex; align-items: flex-start; gap: .65rem; }
.foot-contact svg { width: 18px; height: 18px; fill: var(--orange); flex: none; margin-top: .12rem; }
.foot-contact a, .foot-contact span { color: var(--on-navy-soft); text-decoration: none; }
.foot-contact a:hover { color: #fff; }
.foot-contact .vbh-tel { color: #fff; font-weight: 600; }
.foot-cta-text { font-size: .9rem; margin: 0 0 1.1rem; }
.foot-cta-col .vbh-btn { font-size: .92rem; }
.foot-bottom { margin-top: clamp(2.4rem,4vw,3.2rem); padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; align-items: center; justify-content: space-between; font-size: .84rem; color: var(--on-navy-soft); }
.foot-bottom .links { display: flex; gap: 1.3rem; flex-wrap: wrap; }
.foot-bottom a { color: var(--on-navy-soft); text-decoration: none; }
.foot-bottom a:hover { color: #fff; }
.foot-bottom .pw a { color: var(--orange); font-weight: 600; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } .foot-bottom { justify-content: flex-start; } }

/* === Nova: dienst-iconen + hero-trust iconen === */
.vbh-svc .svc-ico { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  border-radius: var(--r); background: rgba(255,93,3,.1); flex: none; transition: background .18s; }
.vbh-svc .svc-ico svg { width: 25px; height: 25px; fill: var(--orange-deep); transition: fill .18s; }
.vbh-svc:hover .svc-ico { background: var(--orange); }
.vbh-svc:hover .svc-ico svg { fill: #fff; }
.vbh-hero-trust svg { width: 15px; height: 15px; fill: var(--orange); flex: none; }
.vbh-hero-trust span { display: inline-flex; align-items: center; gap: .4rem; }

/* ==========================================================================
   NOVA - eigen designtaal (nv-): typografie, editoriale secties, Lucide-iconen.
   Bewust anders dan de VBH-basis (kaarten/checkmarks/pijltjes vervangen).
   ========================================================================== */

/* Koppen in Space Grotesk */
h1, h2, h3, h4, .wp-block-heading, .vbh-hero h1, .vbh-cta h2, .vbh-step h3, .nv-svc__body h3 {
  font-family: var(--font-head); letter-spacing: -.02em; }

/* Kicker (vervangt VBH-eyebrow): Space Grotesk + oranje streepje */
.eyebrow { font-family: var(--font-head); display: inline-flex; align-items: center; gap: .6rem;
  font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--orange-deep); }
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--orange); display: inline-block; flex: none; }
.vbh-hero .eyebrow { color: #FFB25A; }
.vbh-hero .eyebrow::before { background: var(--orange); }

/* Lucide-icoonbasis (stroke, currentColor) */
.nv-ic { display: inline-block; width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round; fill: none; flex: none; vertical-align: middle; }

/* --- Diensten: editoriale hairline-rijen (geen kaarten, geen pijltjes) --- */
.nv-svc { border-top: 1px solid var(--line); margin-top: clamp(1.4rem,3vw,2.2rem); }
.nv-svc a { display: grid; grid-template-columns: 2.8rem 3rem 1fr 1.4rem; align-items: center; gap: 1.3rem;
  padding: 1.5rem .3rem; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--navy);
  transition: background .16s ease, padding .16s ease; }
.nv-svc a:hover { background: #fff; padding-left: 1.1rem; padding-right: 1.1rem; }
.nv-svc__num { font-family: var(--font-head); font-size: 1rem; color: var(--text-soft); font-weight: 500; }
.nv-svc__ic { width: 3rem; height: 3rem; border: 1px solid var(--line); border-radius: 50%; display: flex;
  align-items: center; justify-content: center; color: var(--orange-deep); background: #fff;
  transition: background .16s, color .16s, border-color .16s; }
.nv-svc__ic .nv-ic { width: 25px; height: 25px; }
.nv-svc a:hover .nv-svc__ic { background: var(--orange); color: #fff; border-color: var(--orange); }
.nv-svc__body h3 { font-size: 1.22rem; font-weight: 600; margin: 0 0 .18rem; color: var(--navy); transition: color .15s; }
.nv-svc a:hover .nv-svc__body h3 { color: var(--orange-deep); }
.nv-svc__body p { font-size: .95rem; color: var(--text-soft); margin: 0; max-width: 62ch; }
.nv-svc__go { color: var(--text-soft); transition: color .16s, transform .16s; }
.nv-svc a:hover .nv-svc__go { color: var(--orange-deep); transform: translate(3px,-3px); }
@media (max-width: 700px) { .nv-svc a { grid-template-columns: 2rem 1fr 1.2rem; gap: .9rem; } .nv-svc__ic { display: none; } }

/* --- Icon-feature grid (intro USP's; vervangt checkmark-lijst) --- */
.nv-usp { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.6rem; }
.nv-usp li { display: flex; align-items: center; gap: .7rem; font-size: .97rem; color: var(--navy); font-weight: 500; }
.nv-usp .nv-ic { width: 21px; height: 21px; color: var(--orange-deep); }
@media (max-width: 600px) {
  /* twee kolommen van drie blijven staan; kleiner zodat het past */
  .nv-usp { grid-template-columns: 1fr 1fr; gap: .7rem .8rem; margin-top: 1.2rem; }
  .nv-usp li { font-size: .82rem; gap: .45rem; align-items: flex-start; line-height: 1.3; }
  .nv-usp .nv-ic { width: 17px; height: 17px; margin-top: .05rem; flex: none; } }

/* --- Reasons: icoon-rijen met hairline (over ons + cta; vervangt pijl-boxes) --- */
.nv-reasons { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 0; }
.nv-reasons li { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start;
  padding: 1.05rem 0; border-top: 1px solid var(--line); }
.nv-reasons li:last-child { border-bottom: 1px solid var(--line); }
.nv-reasons .nv-ic { width: 23px; height: 23px; color: var(--orange-deep); margin-top: .12rem; }
.nv-reasons b { font-family: var(--font-head); color: var(--navy); font-weight: 600; display: block; font-size: 1.02rem; margin-bottom: .12rem; }
.nv-reasons .rz-sub { color: var(--text-soft); font-size: .94rem; }
.nv-reasons .rz-sub a { color: var(--orange-deep); font-weight: 600; }

/* --- Werkwijze: horizontale tijdlijn met verbindingslijn --- */
.nv-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; margin-top: clamp(1.6rem,3vw,2.6rem); position: relative; }
/* Verbindingslijn tussen de stappen verwijderd: liep door de cijfers heen. */
.nv-step { position: relative; }
.nv-step__top { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.nv-step__node { width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center; flex: none; position: relative; z-index: 1; }
.nv-step__node .nv-ic { width: 26px; height: 26px; }
.nv-step__num { font-family: var(--font-head); font-weight: 600; color: var(--orange-deep); font-size: 1.15rem; }
.nv-step h3 { font-size: 1.08rem; font-weight: 600; color: var(--navy); margin: 0 0 .3rem; }
.nv-step p { font-size: .92rem; color: var(--text-soft); margin: 0; }
@media (max-width: 781px) { .nv-timeline { grid-template-columns: 1fr; gap: 0; } .nv-timeline::before { display: none; }
  .nv-step { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1.1rem 0; border-top: 1px solid var(--line); }
  .nv-step:last-child { border-bottom: 1px solid var(--line); } .nv-step__top { margin: 0; } .nv-step__node { width: 2.9rem; height: 2.9rem; } }

/* --- Footer contact-iconen (Lucide) --- */
.foot-contact svg.nv-ic { width: 19px; height: 19px; stroke: var(--orange); fill: none; }

/* --- Hero: kleinere offertekaart --- */
.vbh-hero-split .vbh-hero-form { max-width: 360px; margin-left: auto; padding: clamp(1.05rem,1.5vw,1.4rem); }
.vbh-hero-form .hf-head { margin-bottom: .85rem; }
.vbh-hero-form .hf-head b { font-size: 1.1rem; }
.vbh-hero-form .hf-head span { font-size: .82rem; }
.vbh-hero-form .vbh-form { gap: .55rem; }
.vbh-hero-form .vbh-form input, .vbh-hero-form .vbh-form textarea { padding: .68rem .8rem; font-size: .95rem; }
.vbh-hero-trust .nv-ic { width: 16px; height: 16px; color: var(--orange); }

/* Knoppen zonder tekstpijl: strak (Lucide-pijl optioneel via .nv-ic) */
.vbh-btn .nv-ic { width: 18px; height: 18px; }

/* ==========================================================================
   NOVA - correcties (nv2): koppen terug DM Sans, kickers Grotesk + uitlijning,
   hero 100vh + scroll-indicator, hero-form tel+email op één regel.
   ========================================================================== */

/* Titels terug naar DM Sans; alleen pre-titles blijven Space Grotesk */
h1, h2, h3, h4, .wp-block-heading, .vbh-hero h1, .vbh-cta h2,
.nv-svc__body h3, .nv-step h3, .vbh-step h3, .nv-reasons b {
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: -.01em; }

/* Kicker: block-level flex -> volgt de constrained-marge (lijnt met h2) */
.eyebrow { display: flex; }

/* Hero: volledige viewport incl. header + scroll-indicator */
.vbh-hero.vbh-hero-split { min-height: calc(100svh - var(--header-h)) !important; position: relative; }
.nv-scroll { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 4;
  width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.4);
  backdrop-filter: blur(2px); transition: background .18s, border-color .18s; animation: nv-bob 1.9s ease-in-out infinite; }
.nv-scroll:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
.nv-scroll .nv-ic { width: 24px; height: 24px; }
@keyframes nv-bob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } }
@media (max-width: 900px) { .nv-scroll { display: none; } }

/* Hero-form: naam volledig, telefoon + e-mail op één regel */
.vbh-hero-form .vbh-form { grid-template-columns: 1fr 1fr; gap: .55rem; }
.vbh-hero-form .vbh-form input[name="naam"] { grid-column: 1 / -1; }

/* === Nova hero-hoogte fix: header is fixed (overlay) -> hero = volle 100svh === */
.vbh-hero.vbh-hero-split { min-height: 100svh !important; }
/* inner-container vult de hero-hoogte (content gecentreerd onder de vaste header),
   zodat de scroll-indicator echt onderaan de hero staat */
.vbh-hero-split .wp-block-cover__inner-container {
  min-height: calc(100svh - var(--header-h)); padding-top: var(--header-h);
  display: flex; flex-direction: column; justify-content: center; }

/* ==========================================================================
   NOVA revisie 4: hero-hoogte, kickers zonder streep, werkwijze-iconen,
   FAQ 2-koloms, witte footer met oranje contact.
   ========================================================================== */

/* 1. Hero exact 100svh; content gecentreerd (niet te laag, geen dubbele header-padding) */
.vbh-hero.vbh-hero-split { min-height: 100svh !important; }
.vbh-hero-split .wp-block-cover__inner-container {
  min-height: 100svh; padding-block: 0 !important;
  display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 900px) {
  .vbh-hero-split .wp-block-cover__inner-container {
    padding-block: calc(var(--header-h) + .5rem) 1.5rem !important; justify-content: flex-start; } }

/* 2. Geen streepje voor de pre-titles */
.eyebrow::before { display: none !important; }

/* 3. Werkwijze-nodes: oranje rondje, wit icoon */
.nv-step__node { background: var(--orange); color: #fff; }

/* 4. FAQ 2-koloms borders netjes (gebruikt bestaande .two-col grid) */
.vbh-faq.two-col .vbh-faq-col details:first-child { border-top: 1px solid var(--line); }

/* 5. Footer: alle tekst wit; telefoon + e-mail oranje onderstreept */
.vbh-footer, .vbh-footer p, .vbh-footer .foot-h, .foot-links a, .foot-cta-text,
.foot-contact span, .foot-bottom, .foot-bottom a, .foot-bottom .pw a { color: #fff; }
.foot-links a:hover, .foot-bottom a:hover, .foot-bottom .pw a:hover { color: var(--orange); }
.foot-contact .vbh-tel, .foot-contact a[href^="mailto"] {
  color: var(--orange) !important; text-decoration: underline; text-underline-offset: 2px; }
.foot-contact .vbh-tel:hover, .foot-contact a[href^="mailto"]:hover { color: var(--orange-deep) !important; }

/* ==========================================================================
   NOVA revisie 5: hero exact 100svh, FAQ uitgelijnd grid, footer volledig wit.
   ========================================================================== */

/* Hero: de cover centreert de content zelf; chevron hangt aan de cover-onderkant.
   Inner-container niet forceren -> hero = exact 100svh (geen overflow). */
.vbh-hero-split .wp-block-cover__inner-container { min-height: 0 !important; padding-block: 0 !important; display: block; }
@media (max-width: 900px) {
  .vbh-hero-split .wp-block-cover__inner-container { padding-block: calc(var(--header-h) + .5rem) 1.5rem !important; } }

/* FAQ: één uitgelijnd 2-koloms grid (rijen lijnen over kolommen heen uit) */
.nv-faq-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 4vw, 3.5rem); }
.nv-faq-grid details { max-width: 100% !important; border-top: 1px solid var(--line); }
.nv-faq-grid details:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
@media (max-width: 760px) { .nv-faq-grid { grid-template-columns: 1fr; }
  .nv-faq-grid details:nth-last-child(2) { border-bottom: 0; } }

/* Footer: ALLE tekst wit; alleen de onderstreping van telefoon/e-mail oranje */
.vbh-footer, .vbh-footer p, .vbh-footer .foot-h, .vbh-footer .foot-links a, .foot-cta-text,
.foot-contact span, .foot-contact a, .foot-contact .vbh-tel,
.foot-bottom, .foot-bottom a, .foot-bottom .pw a { color: #fff !important; }
.vbh-footer .foot-links a:hover, .foot-bottom a:hover, .foot-bottom .pw a:hover, .foot-contact a:hover {
  color: #fff !important; text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; }
.foot-contact .vbh-tel, .foot-contact a[href^="mailto"] {
  text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Footer e-mail/telefoon: witte tekst, alleen oranje onderstreping (specificiteit boven oude regel) */
.vbh-footer .foot-contact a[href^="mailto"], .vbh-footer .foot-contact .vbh-tel { color: #fff !important; }

/* ==========================================================================
   NOVA servicepagina's: compacte page-hero + hero-CTA.
   ========================================================================== */
.vbh-hero.is-page { min-height: 64svh !important; }
.vbh-hero.is-page .wp-block-cover__inner-container {
  min-height: 0 !important; padding-block: calc(var(--header-h) + 1.6rem) 1.6rem !important;
  display: flex; flex-direction: column; justify-content: center; }
.vbh-hero.is-page h1 { max-width: 22ch; }
.vbh-hero.is-page .lead { max-width: 54ch; }
.vbh-hero-cta { display: flex; gap: .9rem 1.4rem; align-items: center; flex-wrap: wrap; margin-top: 1.8rem; }
.vbh-hero-cta .vbh-textlink { color: #fff; font-weight: 600; display: inline-flex; align-items: center; gap: .4rem; }
.vbh-hero-cta .vbh-textlink:hover { color: var(--orange); }
.vbh-hero-cta .vbh-textlink .nv-ic { width: 18px; height: 18px; }

/* Servicepagina-hero = zelfde als homepage-hero: volle 100svh, content gecentreerd */
.vbh-hero.is-page { min-height: 100svh !important; }
.vbh-hero.is-page .wp-block-cover__inner-container {
  /* Bovenruimte duwt de gecentreerde inhoud een klein stukje onder het midden. */
  min-height: 100svh; padding-block: 2rem 0 !important;
  display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 900px) {
  .vbh-hero.is-page .wp-block-cover__inner-container { padding-block: calc(var(--header-h) + .5rem) 1.5rem !important; } }

/* Homepage-hero: offerteformulier verbergen op mobiel (te druk); formulier onderaan blijft) */
@media (max-width: 781px) { .vbh-hero-split .vbh-hero-form { display: none !important; } }

/* Mobiel overlay-menu: Diensten/Locaties als ingeklapte dropdowns (klik om te openen) */

/* Mobiel overlay-menu: submenu-accordion via .nv-open (eigen JS, onafhankelijk van WP-interactivity) */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { display: none !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child.nv-open > .wp-block-navigation__submenu-container { display: flex !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle .wp-block-navigation__submenu-icon svg { transition: transform .2s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child.nv-open .wp-block-navigation__submenu-icon svg { transform: rotate(180deg); }

/* Overlay-menu: duidelijke chevron op Diensten/Locaties (eigen, i.p.v. WP-icoon) */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon { display: none !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content::after {
  content: ""; display: inline-block; width: .5em; height: .5em; margin-left: .55em; vertical-align: middle;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-.16em) rotate(45deg);
  transition: transform .2s; opacity: .75; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child.nv-open > .wp-block-navigation-item__content::after { transform: translateY(.1em) rotate(-135deg); }

/* Desktop: dropdowns openen bij HOVER (display forceren; openSubmenusOnClick verbergt met display) */
@media (min-width: 1025px) {
  .vbh-header .vbh-diensten-menu.has-child:hover > .wp-block-navigation__submenu-container,
  .vbh-header .vbh-diensten-menu.has-child:focus-within > .wp-block-navigation__submenu-container,
  .vbh-header .vbh-diensten-menu > .wp-block-navigation__submenu-container:hover {
    display: grid !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; }
  .vbh-header .vbh-locaties-menu.has-child:hover > .wp-block-navigation__submenu-container,
  .vbh-header .vbh-locaties-menu.has-child:focus-within > .wp-block-navigation__submenu-container,
  .vbh-header .vbh-locaties-menu > .wp-block-navigation__submenu-container:hover {
    display: grid !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; }
}

/* FAQ 2-koloms: beide kolommen op gelijke hoogte laten beginnen (WP block-gap zette een marge boven de 2e kolom) */
.vbh-faq.two-col { align-items: start; }
.vbh-faq.two-col > .vbh-faq-col { margin-top: 0 !important; margin-block-start: 0 !important; }

/* ==========================================================================
   NOVA: hero-afstelling.
   - Inhoud staat net onder het midden (de cover centreert, dus de helft van de
     bovenruimte is de verschuiving).
   - De hero van een blogartikel is lager dan die van een pagina.
   ========================================================================== */
.vbh-hero-split .wp-block-cover__inner-container { padding-block: 2rem 0 !important; }
.vbh-hero.is-page.vbh-hero-post { min-height: 70svh !important; }
.vbh-hero.is-page.vbh-hero-post .wp-block-cover__inner-container { min-height: 70svh; }
@media (max-width: 900px) {
  .vbh-hero.is-page.vbh-hero-post { min-height: 66svh !important; }
  .vbh-hero.is-page.vbh-hero-post .wp-block-cover__inner-container { min-height: 66svh; } }

/* Logo wordt bijgesneden aangeleverd, dus geen correctie met marges nodig. */

/* Contactpagina heeft geen lange hero nodig. */
.page-id-63 .vbh-hero.is-page { min-height: 62svh !important; }
.page-id-63 .vbh-hero.is-page .wp-block-cover__inner-container { min-height: 62svh; }

/* ==========================================================================
   NOVA: hero-uitsnede per foto. De cover snijdt bij, dus zonder zwaartepunt
   vallen gezichten er soms buiten. Percentage = verticaal zwaartepunt.
   ========================================================================== */
.vbh-hero img[src*="televisie-demonteren"] { object-position: 50% 22%; }
.vbh-hero img[src*="team-voor-bakwagen"] { object-position: 50% 45%; }
.vbh-hero img[src*="bank-tillen-woonkamer"] { object-position: 50% 25%; }
.vbh-hero img[src*="bureaustoel-laadklep"] { object-position: 50% 25%; }
.vbh-hero img[src*="tafel-wikkelen-folie"] { object-position: 50% 30%; }
.vbh-hero img[src*="ingepakt-meubel-naar-laadklep"] { object-position: 50% 30%; }
.vbh-hero img[src*="vloer-verwijderen-lege-kamer"] { object-position: 50% 30%; }
.vbh-hero img[src*="bakwagen-laadklep-inladen"] { object-position: 50% 35%; }
.vbh-hero img[src*="wandbeugel-losschroeven"] { object-position: 50% 30%; }
.vbh-hero img[src*="opname-klembord-bakwagen"] { object-position: 50% 20%; }
.vbh-hero img[src*="wasmachine-naar-bakwagen"] { object-position: 50% 45%; }
.vbh-hero img[src*="kast-inpakken-deken-folie"] { object-position: 50% 25%; }
.vbh-hero img[src*="afspraken-noteren-woonkamer"] { object-position: 50% 25%; }
.vbh-hero img[src*="muur-plamuren-oplevering"] { object-position: 50% 20%; }

/* Zijbalkkaart: vierkante foto in dezelfde ronding als de kaart, kaart iets smaller. */
.vbh-article-cols > .wp-block-column:last-child { max-width: 320px; }

/* Google-badge in de hero: hoekradius van het merk in plaats van een pilvorm. */
.vbh-hero .vbh-gbadge { border-radius: var(--r); padding: .55rem 1.05rem .55rem .8rem; box-shadow: var(--shadow-sm); }
.vbh-hero .vbh-gbadge:hover { transform: translateY(-1px); }

/* Badge compact houden: één regel, en op smalle schermen zonder het woord Google. */
.vbh-hero .vbh-gbadge { white-space: nowrap; width: fit-content; }
.vbh-hero .vbh-gbadge .stars { white-space: nowrap; letter-spacing: -.02em; }
@media (max-width: 520px) {
  .vbh-hero .vbh-gbadge { font-size: .8rem; padding: .45rem .8rem .45rem .6rem; gap: .4rem; }
  .vbh-hero .vbh-gbadge .gb-merk { display: none; }
  .vbh-hero .vbh-gbadge svg:first-child { width: 15px; height: 15px; }
}

/* ==========================================================================
   NOVA mobiel: foto zichtbaar maken binnen de hero.
   De overlay is een horizontaal verloop (donker links, licht rechts): op
   desktop staat de tekst links, maar op mobiel loopt die over de volle
   breedte, waardoor de foto overal donker bleef. Staand verloop dus: donker
   achter de tekst bovenin, oplopend lichter naar onderen. De hero is er ook
   iets lager, zodat de liggende foto minder ver wordt ingezoomd.
   ========================================================================== */
@media (max-width: 1024px) and (orientation: portrait) {
  .vbh-hero.is-page { min-height: 90svh !important; }
  .vbh-hero.is-page .wp-block-cover__inner-container,
  .vbh-hero.vbh-hero-split .wp-block-cover__inner-container {
    justify-content: flex-start;
    padding-block: calc(var(--header-h) + 1.1rem) 1rem !important; }
  /* geen verloop maar één egale, lichte donkere laag over de hele foto */
  .vbh-hero .wp-block-cover__background {
    background: rgba(0,0,0,.42) !important; }
  /* Horizontale uitsnede per foto: bepaalt welke verticale strook zichtbaar is.
     !important omdat het cover-blok een inline object-position meegeeft. */
  .vbh-hero img[src*="televisie-demonteren"] { object-position: 74% 30% !important; }
  .vbh-hero img[src*="na-overlijden"] { object-position: 32% 40% !important; }
  .vbh-hero img[src*="spoedontruiming"] { object-position: 60% 40% !important; }
  .vbh-hero img[src*="tafel-wikkelen-folie"] { object-position: 74% 35% !important; }
  .vbh-hero img[src*="wandbeugel-losschroeven"] { object-position: 45% 40% !important; }
  .vbh-hero img[src*="bank-tillen-woonkamer"] { object-position: 56% 35% !important; }
}

/* ==========================================================================
   NOVA mobiel menu: de uitklapper van Diensten en Locaties als eigen paneel.
   ========================================================================== */
@keyframes nv-sub-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* de hoofditems zijn flex-items met inhoudbreedte; stretchen zodat het paneel
   eronder de volle menubreedte kan pakken */
.vbh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
  align-self: stretch; align-items: center; }
/* core zet in de overlay padding-inline:2rem en width:auto met hogere
   specificiteit, vandaar de !important hieronder. Geen achtergrondvlak:
   de items staan als gewone tekst onder het menu-item. */
.vbh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  background: transparent !important;
  width: min(86vw, 420px) !important; margin: .7rem auto .2rem;
  padding: 0 !important;
  gap: .05rem; animation: nv-sub-in .22s ease both; }
.vbh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
  width: 100%; }
.vbh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block; width: 100%; text-align: center; font-size: 1.08rem; font-weight: 400;
  color: var(--navy) !important; opacity: .8; padding: .45rem .4rem !important; border-radius: 10px; }
.vbh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:active,
.vbh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: transparent; color: var(--orange-deep); opacity: 1; text-decoration: none; }
/* Locaties: twaalf plaatsen in twee kolommen, zodat het menu niet hoeft te scrollen */
.vbh-header .wp-block-navigation__responsive-container.is-menu-open .vbh-locaties-menu.has-child.nv-open > .wp-block-navigation__submenu-container {
  display: grid !important; grid-template-columns: 1fr 1fr; gap: .1rem .4rem; }
.vbh-header .wp-block-navigation__responsive-container.is-menu-open .vbh-locaties-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-size: 1rem; padding: .5rem .3rem !important; }

/* ==========================================================================
   Cookiebanner op mobiel compacter: hij vulde ruim de helft van het scherm.
   De categorieën met hun schakelaars blijven staan, alleen de toelichting
   per categorie vervalt (die staat in het cookiebeleid, link staat erboven).
   ========================================================================== */
.vbh-cookie-card { box-sizing: border-box; }
@media (max-width: 600px) {
  .vbh-cookie-overlay { left: 10px; right: 10px; bottom: 10px; width: auto; }
  .vbh-cookie-card { padding: 1.05rem 1.1rem; max-width: none; }
  .vbh-cookie-title { font-size: 1.05rem; margin: 0 0 .3rem; }
  .vbh-cookie-text { font-size: .85rem; line-height: 1.45; }
  .vbh-cookie-cats { gap: .5rem; margin: .85rem 0 .95rem; }
  .vbh-cookie-cat-desc { display: none; }
  .vbh-cookie-cat-name { font-size: .92rem; }
  .vbh-switch { width: 38px; height: 22px; }
  .vbh-switch-slider::before { width: 16px; height: 16px; }
  .vbh-switch input:checked + .vbh-switch-slider::before { transform: translateX(16px); }
  .vbh-cookie-actions { gap: .5rem; flex-wrap: nowrap; }
  .vbh-cookie-actions .vbh-btn,
  .vbh-cookie-actions .vbh-cookie-ghost {
    flex: 1 1 0; justify-content: center; text-align: center;
    padding: .72em .6em; font-size: .88rem; white-space: nowrap; }
}

/* ==========================================================================
   Diensten-rijen: duidelijk maken dat de vier diensten doorklikken.
   Op een telefoon is er geen hover, dus de pijl en de titelkleur moeten ook
   zonder aanwijzer al vertellen dat je erop kunt tikken.
   ========================================================================== */
.nv-svc__go { color: var(--orange-deep); }
.nv-svc a:active { background: #fff; }
.nv-svc a:active .nv-svc__body h3 { color: var(--orange-deep); }
@media (max-width: 700px) {
  .nv-svc a { padding: 1.15rem .2rem; align-items: start; }
  .nv-svc__body h3 { font-size: 1.08rem; }
  .nv-svc__body p { font-size: .88rem; }
  .nv-svc__go { align-self: center; }
  .nv-svc__go .nv-ic { width: 20px; height: 20px; }
}

/* ==========================================================================
   Werkwijze op mobiel: titel op dezelfde regel als het nummer, tekst eronder.
   ========================================================================== */
@media (max-width: 781px) {
  .nv-step { grid-template-columns: auto 1fr; column-gap: .9rem; row-gap: .3rem; align-items: start; }
  .nv-step__body { display: contents; }
  .nv-step__top { grid-column: 1; grid-row: 1; align-self: center; }
  .nv-step h3 { grid-column: 2; grid-row: 1; align-self: center; margin: 0; }
  .nv-step p { grid-column: 2; grid-row: 2; }
}