/* HBL Rolluiken – huisstijl fixes */
:root {
  --blue: #015f9d !important;
  --red: #00b0ff !important;
  --yellow: #7ec8e3 !important;
  --hbl-sky: #00b0ff;
  --hbl-mid: #015f9d;
  --hbl-navy: #000d3a;
  --hbl-soft: #e8f6fc;
  --white: #fff;
  /* Headerhoogte: past bij groot logo, dropdown blijft compact */
  --nav-bar-height: 10.4rem !important;
}
@media only screen and (max-width: 1023px) {
  :root {
    --nav-bar-height: 9.2rem !important;
  }
}

/* ========== HEADER: sticky under trustbar; transparent only before scroll ========== */
.main-header,
body.home .main-header,
body.home header.main-header,
body:not(.home) .main-header {
  position: fixed !important;
  top: var(--hbl-trustbar-h, 40px) !important;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1100 !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  transition: background-color .25s ease, box-shadow .25s ease !important;
}
.main-header:not(.is-scrolled),
body.home .main-header:not(.is-scrolled),
body:not(.home) .main-header:not(.is-scrolled) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
.main-header:not(.is-scrolled) .nav-bar,
body.home .main-header:not(.is-scrolled) .nav-bar,
.main-header:not(.is-scrolled) .nav-bar::before,
.main-header:not(.is-scrolled) .nav-bar::after {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.main-header:not(.is-scrolled) .nav-bar .wrap,
.main-header:not(.is-scrolled) .nav-bar .wrap.wrap__full-width,
.main-header:not(.is-scrolled) .wrap.wrap__full-width,
.main-header:not(.is-scrolled) .nav-bar__content {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  box-shadow: none !important;
}

/* Menu links: standaard blauw; wit op homepage / over ons / contact / offerte (over hero) */
.main-header .nav-bar__menu-wrap > .menu > .menu-item > a,
.main-header .menu > .menu-item > a,
.main-header .nav-bar .menu > .menu-item > a {
  color: #015f9d !important;
  -webkit-text-fill-color: #015f9d !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding-left: 0.8rem !important;
  padding-right: 0.8rem !important;
}
.main-header .nav-bar .menu > .menu-item > a .menu-item__toggle,
.main-header .menu > .menu-item > a .menu-item__toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 0.4rem !important;
  width: 1.4rem !important;
  height: 1.4rem !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}
.main-header .nav-bar .menu > .menu-item > a .menu-item__toggle svg,
.main-header .nav-bar .menu > .menu-item > a svg.hbl-chevron,
.main-header .menu > .menu-item > a .menu-item__toggle svg {
  width: 1.2rem !important;
  height: 1.2rem !important;
  color: #015f9d !important;
  stroke: #015f9d !important;
  fill: none !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  /* Dicht: pijl omlaag */
  transform: rotate(0deg) !important;
  transition: transform .2s ease !important;
  transform-origin: center !important;
}
/* Open bij hover / open mega / focus: pijl omhoog */
.main-header .nav-bar .menu > .menu-item-has-children:hover > a .menu-item__toggle svg,
.main-header .nav-bar .menu > .menu-item-has-megamenu:hover > a .menu-item__toggle svg,
.main-header .nav-bar .menu > .menu-item.is-mega-open > a .menu-item__toggle svg,
.main-header .nav-bar .menu > .menu-item-has-children:focus-within > a .menu-item__toggle svg,
.main-header .menu > .menu-item-has-children:hover > a .menu-item__toggle svg,
.main-header .menu > .menu-item-has-megamenu:hover > a .menu-item__toggle svg,
.main-header .menu > .menu-item.is-mega-open > a .menu-item__toggle svg,
.main-header .nav-bar .menu > .menu-item-has-children:hover > a svg.hbl-chevron,
.main-header .nav-bar .menu > .menu-item-has-megamenu:hover > a svg.hbl-chevron,
.main-header .nav-bar .menu > .menu-item.is-mega-open > a svg.hbl-chevron {
  transform: rotate(180deg) !important;
}
body.home .main-header .nav-bar__menu-wrap > .menu > .menu-item > a,
body.home .main-header .menu > .menu-item > a,
body.home .main-header .nav-bar .menu > .menu-item > a,
body.page-template-page-about .main-header .nav-bar__menu-wrap > .menu > .menu-item > a,
body.page-template-page-about .main-header .menu > .menu-item > a,
body.page-template-page-about .main-header .nav-bar .menu > .menu-item > a,
body.page-template-page-contact .main-header .nav-bar__menu-wrap > .menu > .menu-item > a,
body.page-template-page-contact .main-header .menu > .menu-item > a,
body.page-template-page-contact .main-header .nav-bar .menu > .menu-item > a,
body.page-template-page-quote .main-header .nav-bar__menu-wrap > .menu > .menu-item > a,
body.page-template-page-quote .main-header .menu > .menu-item > a,
body.page-template-page-quote .main-header .nav-bar .menu > .menu-item > a {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 13, 58, 0.35) !important;
}
body.home .main-header .nav-bar .menu > .menu-item > a .menu-item__toggle svg,
body.home .main-header .nav-bar .menu > .menu-item > a svg.hbl-chevron,
body.home .main-header .menu > .menu-item > a .menu-item__toggle svg,
body.page-template-page-about .main-header .nav-bar .menu > .menu-item > a .menu-item__toggle svg,
body.page-template-page-about .main-header .nav-bar .menu > .menu-item > a svg.hbl-chevron,
body.page-template-page-about .main-header .menu > .menu-item > a .menu-item__toggle svg,
body.page-template-page-contact .main-header .nav-bar .menu > .menu-item > a .menu-item__toggle svg,
body.page-template-page-contact .main-header .nav-bar .menu > .menu-item > a svg.hbl-chevron,
body.page-template-page-contact .main-header .menu > .menu-item > a .menu-item__toggle svg,
body.page-template-page-quote .main-header .nav-bar .menu > .menu-item > a .menu-item__toggle svg,
body.page-template-page-quote .main-header .nav-bar .menu > .menu-item > a svg.hbl-chevron,
body.page-template-page-quote .main-header .menu > .menu-item > a .menu-item__toggle svg {
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.main-header .nav-bar__buttons a,
.main-header .nav-bar__buttons .button,
.nav-bar__buttons a.button {
  background-color: #00b0ff !important;
  border-color: #00b0ff !important;
  color: #fff !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  border-radius: 999px !important;
}
.main-header .nav-bar__buttons a:hover {
  background-color: #015f9d !important;
  border-color: #015f9d !important;
}

.main-header .site-logo img,
.main-header .custom-logo {
  max-height: 128px !important;
  width: auto !important;
  height: auto !important;
  transition: max-height .2s ease !important;
}
.main-header .nav-bar,
.main-header .nav-bar__content {
  min-height: var(--nav-bar-height) !important;
  height: var(--nav-bar-height) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.main-header .nav-bar .wrap,
.main-header .nav-bar .wrap.wrap__full-width {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: center !important;
}

/* ========== MEGA MENU: dichter bij links + radius ========== */
.nav-bar .menu .menu-item.menu-item-has-megamenu {
  position: static !important;
}

.nav-bar .menu .menu-item.menu-item-has-megamenu::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 0.8rem;
  z-index: 1190;
}

.main-header .megamenu-container,
.megamenu-container {
  background: #fff !important;
  position: absolute !important;
  top: calc(100% - 2px) !important;
  left: 0;
  right: 0;
  z-index: 1200 !important;
  transform-origin: top !important;
  border-radius: 1.2rem !important;
  box-shadow: 0 16px 40px rgba(0, 13, 58, 0.14);
  margin-top: 0 !important;
  padding-top: 0.6rem !important;
  padding-bottom: 0.6rem !important;
}

.megamenu-container::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.8rem;
  height: 0.8rem;
  background: transparent;
  pointer-events: auto;
}

.megamenu-container {
  transform: scaleY(0);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.menu-item-has-megamenu:hover > .megamenu-container,
.menu-item-has-megamenu.is-mega-open > .megamenu-container,
.megamenu-container.megamenu-container--active {
  transform: scaleY(1) !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Gewone sub-menu dropdowns: dichterbij + radius */
.nav-bar .menu .menu-item.menu-item-has-children .sub-menu {
  border-radius: 1.2rem !important;
  top: calc(100% - 2px) !important;
  margin-top: 0 !important;
  padding-top: 0.6rem !important;
  padding-bottom: 0.6rem !important;
}

.megamenu-group__title.active,
.megamenu-branche-link:hover {
  color: #015f9d !important;
}

/* ========== MOBIEL ========== */
@media (max-width: 1023px) {
  /* Alleen children transparant — NIET .main-header zelf (anders blijft scroll-wit weg) */
  .main-header .nav-bar,
  .main-header .nav-bar .wrap,
  .main-header .wrap.wrap__full-width,
  .nav-bar .wrap__full-width,
  .nav-bar__content {
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

.mobile-navigation,
.mobile-navigation .menu .menu-item.menu-item-has-children .sub-menu,
.mobile-navigation .menu .menu-item.menu-item-has-megamenu .sub-menu {
  background: rgba(1, 95, 157, 0.92) !important;
  background-color: rgba(1, 95, 157, 0.92) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff !important;
}

.mobile-navigation .menu .menu-item > a,
.mobile-navigation .menu .menu-item a,
.mobile-navigation .sub-menu__back {
  color: #fff !important;
  background: transparent !important;
}

/* Hamburger: witte strepen + donkere cirkel (altijd zichtbaar op hero) */
.mobile-nav-toggle,
.nav-bar__mobile-toggle,
.hamburger {
  background: transparent !important;
}
body .mobile-nav-toggle__button,
.main-header .mobile-nav-toggle__button,
.nav-bar .mobile-nav-toggle__button {
  background: rgba(0, 13, 58, 0.55) !important;
  background-color: rgba(0, 13, 58, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.95) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(0, 13, 58, 0.25) !important;
}
body .mobile-nav-toggle__button .strokes span,
.main-header .mobile-nav-toggle__button .strokes span,
.nav-bar .mobile-nav-toggle__button .strokes span {
  background: #fff !important;
  background-color: #fff !important;
}

/* Mobiel: Contact-knop met zijkanten / ademruimte */
@media (max-width: 1023px) {
  .main-header .nav-bar .wrap.wrap__full-width,
  .main-header .nav-bar .wrap,
  .main-header .nav-bar__content {
    padding-left: 2.4rem !important;
    padding-right: 2.4rem !important;
  }
  .main-header .site-logo img,
  .main-header .custom-logo {
    max-height: 120px !important;
  }
  .nav-bar__buttons-mobile {
    display: flex !important;
    gap: 1.2rem !important;
    margin-left: 1.2rem !important;
    margin-right: 1.2rem !important;
  }
  .nav-bar__buttons-mobile a.button,
  .nav-bar__buttons-mobile a {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
  .nav-bar__right {
    gap: 1.2rem !important;
    padding-right: 0.4rem !important;
  }
  .mobile-nav-toggle {
    margin-right: 0.4rem !important;
  }
}

/* ========== SCROLLED: wit + zwart (MOET onderaan staan, wint van mobiel) ========== */
.main-header.is-scrolled,
body.home .main-header.is-scrolled,
body:not(.home) .main-header.is-scrolled,
header.main-header.is-scrolled {
  background: #fff !important;
  background-color: #fff !important;
  box-shadow: 0 4px 20px rgba(0, 13, 58, 0.08) !important;
}
/* Sticky wit: kortere header, minder ruimte boven/onder */
.main-header.is-scrolled .nav-bar,
.main-header.is-scrolled .nav-bar__content {
  min-height: var(--nav-bar-height, 10.4rem) !important;
  height: var(--nav-bar-height, 10.4rem) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.main-header.is-scrolled .nav-bar .wrap,
.main-header.is-scrolled .nav-bar .wrap.wrap__full-width,
.main-header.is-scrolled .wrap.wrap__full-width {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: var(--nav-bar-height, 10.4rem) !important;
  height: var(--nav-bar-height, 10.4rem) !important;
  align-items: center !important;
}
.main-header.is-scrolled .site-logo img,
.main-header.is-scrolled .custom-logo {
  max-height: 128px !important;
}
@media only screen and (max-width: 1023px) {
  .main-header.is-scrolled .nav-bar,
  .main-header.is-scrolled .nav-bar__content,
  .main-header.is-scrolled .nav-bar .wrap,
  .main-header.is-scrolled .nav-bar .wrap.wrap__full-width {
    min-height: 7.6rem !important;
    height: 7.6rem !important;
  }
  .main-header.is-scrolled .site-logo img,
  .main-header.is-scrolled .custom-logo {
    max-height: 96px !important;
  }
}
.main-header.is-scrolled .nav-bar,
.main-header.is-scrolled .nav-bar .wrap,
.main-header.is-scrolled .nav-bar .wrap.wrap__full-width,
.main-header.is-scrolled .wrap.wrap__full-width,
.main-header.is-scrolled .nav-bar__content {
  background: #fff !important;
  background-color: #fff !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.main-header.is-scrolled .nav-bar__menu-wrap > .menu > .menu-item > a,
.main-header.is-scrolled .menu > .menu-item > a,
.main-header.is-scrolled .nav-bar .menu > .menu-item > a,
body.home .main-header.is-scrolled .nav-bar .menu > .menu-item > a {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  text-shadow: none !important;
}
.main-header.is-scrolled .nav-bar .menu > .menu-item > a .menu-item__toggle svg,
.main-header.is-scrolled .nav-bar .menu > .menu-item > a svg.hbl-chevron,
.main-header.is-scrolled .menu > .menu-item > a .menu-item__toggle svg,
body.home .main-header.is-scrolled .nav-bar .menu > .menu-item > a .menu-item__toggle svg,
body.home .main-header.is-scrolled .nav-bar .menu > .menu-item > a svg.hbl-chevron {
  color: #111 !important;
  stroke: #111 !important;
  fill: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* Hero-pagina's: na scroll weer donkere menulinks */
body.page-template-page-about .main-header.is-scrolled .nav-bar .menu > .menu-item > a,
body.page-template-page-contact .main-header.is-scrolled .nav-bar .menu > .menu-item > a,
body.page-template-page-quote .main-header.is-scrolled .nav-bar .menu > .menu-item > a {
  color: #111 !important;
  -webkit-text-fill-color: #111 !important;
  text-shadow: none !important;
}
body.page-template-page-about .main-header.is-scrolled .nav-bar .menu > .menu-item > a .menu-item__toggle svg,
body.page-template-page-about .main-header.is-scrolled .nav-bar .menu > .menu-item > a svg.hbl-chevron,
body.page-template-page-contact .main-header.is-scrolled .nav-bar .menu > .menu-item > a .menu-item__toggle svg,
body.page-template-page-contact .main-header.is-scrolled .nav-bar .menu > .menu-item > a svg.hbl-chevron,
body.page-template-page-quote .main-header.is-scrolled .nav-bar .menu > .menu-item > a .menu-item__toggle svg,
body.page-template-page-quote .main-header.is-scrolled .nav-bar .menu > .menu-item > a svg.hbl-chevron {
  color: #111 !important;
  stroke: #111 !important;
}

.main-header.is-scrolled .mobile-nav-toggle__button,
body .main-header.is-scrolled .mobile-nav-toggle__button {
  background: transparent !important;
  background-color: transparent !important;
  border-color: #111 !important;
  color: #111 !important;
  box-shadow: none !important;
}
.main-header.is-scrolled .mobile-nav-toggle__button .strokes span,
body .main-header.is-scrolled .mobile-nav-toggle__button .strokes span {
  background: #111 !important;
  background-color: #111 !important;
}

@media (max-width: 1023px) {
  .main-header.is-scrolled,
  body.home .main-header.is-scrolled,
  .main-header.is-scrolled .nav-bar,
  .main-header.is-scrolled .nav-bar .wrap {
    background: #fff !important;
    background-color: #fff !important;
  }
}

/* ========== FOOTER: donkerblauw behouden ========== */
.footer-top__shape-top svg,
.footer-top__shape-top svg path {
  color: #000d3a !important;
  fill: #000d3a !important;
}

.footer-top {
  background: transparent !important;
  background-color: transparent !important;
}

footer.main-footer,
.site-footer,
.main-footer {
  background: transparent !important;
  background-color: transparent !important;
}

/* Footer content: donkerblauw (niet wit) */
.footer-nav,
.footer-nav .wrap,
.footer-nav .wrap.wrap__full-width,
.footer-nav .wrap.wrap__full-width.bg-blue,
.footer-nav .bg-blue,
.footer-copyright,
.footer-copyright .wrap,
.footer-copyright .wrap.wrap__full-width,
.footer-copyright .wrap.wrap__full-width.bg-blue,
.footer-copyright .bg-blue,
footer.main-footer .bg-blue,
footer.main-footer .footer-nav,
footer.main-footer .footer-copyright {
  background: #000d3a !important;
  background-color: #000d3a !important;
  color: #fff !important;
  border-radius: 0 !important;
}

.footer-nav,
.footer-nav a,
.footer-nav p,
.footer-nav li,
.footer-nav .footer-nav__title,
.footer-nav .footer-nav__slogan p,
.footer-top__slogan p,
.footer-copyright,
.footer-copyright a,
.footer-copyright p,
.footer-copyright li,
.footer-nav .white-text,
.footer-copyright .white-text,
.footer-top .white-text {
  color: #fff !important;
}

.footer-nav .site-logo img,
.footer-top .site-logo img,
.footer-nav .custom-logo,
.footer-nav a.site-logo img {
  filter: none !important;
  -webkit-filter: none !important;
  max-height: 144px !important;
  width: auto !important;
  height: auto !important;
}

/* Knoppen vast */
a.btn, .btn, .button, .megamenu-button,
input[type="submit"], button[type="submit"] {
  background-color: #00b0ff !important;
  border-color: #00b0ff !important;
  color: #fff !important;
  font-weight: 700 !important;
}
a.btn:hover, .btn:hover, .button:hover {
  background-color: #015f9d !important;
  border-color: #015f9d !important;
}

/* Homepage, Over ons, Contact, Offerte: eerste section onder transparante header */
body.home.page-template-page-home .site-content,
body.home.page-template-page-home #content,
body.home.page-template-page-home main,
body.home.page-template-page-home #main,
body.page-template-page-about .site-content,
body.page-template-page-about #content,
body.page-template-page-about main,
body.page-template-page-about #main,
body.page-template-page-contact .site-content,
body.page-template-page-contact #content,
body.page-template-page-contact main,
body.page-template-page-contact #main,
body.page-template-page-quote .site-content,
body.page-template-page-quote #content,
body.page-template-page-quote main,
body.page-template-page-quote #main,
body.page-template-page-prijzen .site-content,
body.page-template-page-prijzen #content,
body.page-template-page-prijzen main,
body.page-template-page-prijzen #main,
body.page-prijzen .site-content,
body.page-prijzen #content,
body.page-prijzen main,
body.page-prijzen #main {
  padding-top: 0 !important;
}

/* Contact + Offerte: blauwe eerste section full-bleed onder header, inhoud met ruimte boven */
body.page-template-page-contact .contact-content,
body.page-template-page-quote .quote-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body.page-template-page-contact .contact-content > .wrap.wrap__full-width,
body.page-template-page-quote .quote-content > .wrap.wrap__full-width {
  padding-top: calc(var(--nav-bar-height) + 2.5rem) !important;
}

/* Overige pagina's: ruimte onder vaste transparante header */
body:not(.page-template-page-home):not(.page-template-page-about):not(.page-template-page-contact):not(.page-template-page-quote):not(.page-template-page-prijzen):not(.page-prijzen) #main,
body.single-service #main,
body.blog #main,
body.single-post #main,
body.archive #main {
  padding-top: calc(var(--nav-bar-height) + 4.5rem) !important;
}
body.blog .header.header-spacing,
body.single-post .header.header-spacing,
body.single-service .header.header-spacing {
  padding-top: 1.5rem !important;
}

/* About hero full-bleed onder header (zelfde idee als homepage video) */
body.page-template-page-about #about-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body.page-template-page-about #about-content .about-content__img,
body.page-template-page-about #about-content .about-content__img-element {
  margin-top: 0 !important;
}

.vacancy-selector,
.vacancy-sticky-finder,
section.vacancy,
.vacancy-selector__grid {
  display: none !important;
}

body.page-dienst {
  background: #fff !important;
}


/* Mobiel: dicht = rechts, open/active = omlaag */
.mobile-navigation .menu-item__toggle svg.hbl-chevron {
  transform: rotate(-90deg) !important;
  transition: transform .2s ease !important;
}
.mobile-navigation .menu-item__toggle.active svg.hbl-chevron,
.mobile-navigation .menu-item:has(> .sub-menu.active) > a .menu-item__toggle svg.hbl-chevron {
  transform: rotate(0deg) !important;
}


/* Footer cleanup */
.footer-nav .sm-icons,
.sm-icons,
.footer-nav__quality-block,
.quality-block-container,
.footer-certification-gallery {
  display: none !important;
}
.footer-nav .site-logo img,
.footer-top .site-logo img,
.footer-nav a.site-logo img {
  filter: none !important;
  -webkit-filter: none !important;
  max-height: 144px !important;
  width: auto !important;
  height: auto !important;
}

/* Mobiel submenu: zichtbaar als active */
@media (max-width: 1023px) {
  .mobile-navigation .menu .menu-item-has-megamenu > .sub-menu.active,
  .mobile-navigation .menu .menu-item-has-children > .sub-menu.active {
    right: 0 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}


/* Footer: 4 gelijke kolommen netjes naast elkaar */
.footer-nav__container.hbl-footer-grid,
.footer-nav .footer-nav__container {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 3.2rem !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 129.6rem !important;
  margin: 0 auto !important;
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}
.footer-nav__container .footer-nav__col,
.footer-nav__container .footer-nav__first-block,
.footer-nav__container .footer-nav__second-block,
.footer-nav__container .footer-nav__third-block,
.footer-nav__container .footer-nav__fourth-block {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}
.footer-nav__left-column,
.footer-nav__right-column {
  display: contents !important; /* flatten old nested grid if still present */
}
.footer-nav__title {
  margin: 0 0 1.2rem !important;
  font-weight: 700 !important;
  font-size: 1.6rem !important;
}
.footer-nav__col .textwidget ul,
.footer-nav__container ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.footer-nav__col .textwidget li,
.footer-nav__container .textwidget li {
  margin: 0 0 0.6rem !important;
  padding: 0 !important;
}
.footer-nav__col .textwidget a,
.footer-nav__container .textwidget a {
  text-decoration: none !important;
}
@media (max-width: 1023px) {
  .footer-nav__container.hbl-footer-grid,
  .footer-nav .footer-nav__container {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 2.4rem !important;
    padding-top: 2.4rem !important;
    padding-bottom: 2.4rem !important;
  }
}
@media (max-width: 600px) {
  .footer-nav__container.hbl-footer-grid,
  .footer-nav .footer-nav__container {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}


/* Trust badges: iconen + nette layout */
.trust-badges__list {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 2.4rem 3.2rem !important;
  align-items: start !important;
}
.trust-badge__item {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 1.6rem !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.trust-badges .trust-badge__title,
.trust-badges .trust-badge__description {
  color: #fff !important;
}
.trust-badge__icon {
  width: 5.6rem !important;
  height: 5.6rem !important;
  min-width: 5.6rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.55) !important;
  border-radius: 999px !important;
}
.trust-badge__icon img.trust-badge-image,
.trust-badge__icon img.trust-badge-icon {
  width: 3rem !important;
  height: 3rem !important;
  object-fit: contain !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}
.trust-badge__content {
  flex: 1 !important;
  min-width: 0 !important;
}
@media (max-width: 767px) {
  .trust-badges__list {
    grid-template-columns: 1fr !important;
  }
}

/* Homepage hero: lichte donkere overlay */
#homepage-content .homepage-content__video::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.22) !important;
  z-index: 4 !important;
  pointer-events: none !important;
}
#homepage-content .homepage-content__video::before {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.18) 0%,
    rgba(0, 0, 0, 0.12) 40%,
    rgba(0, 0, 0, 0.28) 100%
  ) !important;
  animation: none !important;
  transform: none !important;
}


/* removed conflicting body.page #main padding */
/* Hero image altijd zichtbaar */
.header__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}


/* Blog content: leesbare tekst op lichte achtergrond */
body.blog .post-text,
body.single-post .post-text,
body.single-post .post-content-main,
body.single-post .post-text p,
body.single-post .post-text li {
  color: #000d3a !important;
}
body.single-post .post-text h2,
body.single-post .post-content-main h2 {
  color: #015f9d !important;
}
body.single-post section.header .section__title,
body.blog section.header .section__title {
  color: #015f9d !important;
}

/* Lazy images: theme keeps opacity:0 until lazyloaded — show when src is already set */
img.lazy[src]:not([src=""]),
img.lazy.lazyloaded,
img.lazy.lazyload {
  opacity: 1 !important;
}
.section__media img.lazy,
.materials__image img.lazy,
.step-slider img.lazy,
.header__media img.lazy,
figure img.lazy {
  opacity: 1 !important;
}

/* Contact/Offerte: geen zwarte/witte spleet tussen hero en formulier */
body.page-template-page-contact .contact-content__shapes-wrap,
body.page-template-page-quote .quote-content__shapes-wrap {
  background: #fff !important;
  color: #015f9d !important; /* golfkleur = blauwe hero-onderkant */
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
}
body.page-template-page-contact .contact-content__shape-bottom,
body.page-template-page-quote .quote-content__shape-bottom {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}
body.page-template-page-contact .contact-content__shape-bottom svg,
body.page-template-page-quote .quote-content__shape-bottom svg {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  max-height: 80px !important;
}
body.page-template-page-contact .section.form.spacing-row,
body.page-template-page-quote .section.form.spacing-row {
  padding-top: 0 !important;
  padding-bottom: 4rem !important;
  margin-top: 0 !important;
  background: #fff !important;
  position: relative;
  z-index: 1;
}
body.page-template-page-contact .section.form.spacing-row > .section__background,
body.page-template-page-quote .section.form.spacing-row > .section__background {
  padding-top: 2.5rem !important;
  background: #fff !important;
}

/* Force: geen lege ruimte in contact/offerte shape */
body.page-template-page-contact .contact-content .contact-content__shapes-wrap,
body.page-template-page-contact .wrap.wrap__full-width.contact-content__shapes-wrap,
body.page-template-page-quote .quote-content .quote-content__shapes-wrap,
body.page-template-page-quote .wrap.wrap__full-width.quote-content__shapes-wrap {
  padding: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  background: #fff !important;
}
body.page-template-page-contact .contact-content__shapes-wrap .contact-content__shape-bottom,
body.page-template-page-quote .quote-content__shapes-wrap .quote-content__shape-bottom {
  padding: 0 !important;
  margin: 0 !important;
  transform: translateY(0) !important;
}

/* Contact/Offerte: kaarten overlappen in formuliersectie, geen witte band */
body.page-template-page-contact .contact-content {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
body.page-template-page-contact .contact-content > .wrap.bg-blue {
  padding-bottom: 5rem !important;
}
body.page-template-page-contact .section.form.spacing-row {
  margin-top: 0 !important;
  padding-top: 40px !important;
  background: #fff !important;
}
body.page-template-page-contact .section.form.spacing-row > .section__background {
  padding-top: 0 !important;
  background: #fff !important;
}
body.page-template-page-quote .quote-content > .wrap.bg-blue {
  padding-bottom: 3rem !important;
}
body.page-template-page-quote .section.form.spacing-row {
  margin-top: 0 !important;
  padding-top: 40px !important;
  background: #fff !important;
}
body.page-template-page-quote .section.form.spacing-row > .section__background {
  padding-top: 0 !important;
  background: #fff !important;
}

/* page bg (theme had none; prevents black void) */
html,body,#main{background:#fff!important;background-color:#fff!important;}


/* HBL mobile-nav fix: display toggle (no transition — theme inset + transitions fought open state) */
@media (max-width: 1022px) {
  .mobile-navigation {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 99999 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    transition: none !important;
    background: #015f9d !important;
    overflow: auto !important;
  }
  .mobile-navigation.is-open,
  body.mob-nav-active .mobile-navigation {
    display: block !important;
  }
  body.mob-nav-active {
    overflow: hidden !important;
  }
  /* Keep hamburger above full-screen drawer so close still works */
  body.mob-nav-active .main-header {
    z-index: 100000 !important;
  }
  body.mob-nav-active .mobile-nav-toggle,
  body.mob-nav-active .mobile-nav-toggle__button {
    z-index: 100001 !important;
  }

  /* Hamburger must stay clickable above overlapping .wrap layers */
  .main-header,
  .main-header .nav-bar,
  .main-header .nav-bar__content,
  .main-header .nav-bar__right {
    position: relative !important;
    z-index: 1300 !important;
    pointer-events: auto !important;
  }
  .mobile-nav-toggle,
  .mobile-nav-toggle__button {
    position: relative !important;
    z-index: 1400 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }
  .nav-bar__buttons-mobile {
    position: relative !important;
    z-index: 1400 !important;
    pointer-events: auto !important;
  }

  .main-header .nav-bar .wrap.wrap__full-width,
  .main-header .nav-bar .wrap {
    pointer-events: none !important;
  }
  .main-header .nav-bar .wrap a,
  .main-header .nav-bar .wrap button,
  .main-header .nav-bar .wrap .site-logo,
  .main-header .nav-bar .wrap .mobile-nav-toggle,
  .main-header .nav-bar .wrap .nav-bar__buttons-mobile,
  .main-header .nav-bar .wrap .nav-bar__right {
    pointer-events: auto !important;
  }

  .mobile-navigation .wrap {
    padding-top: calc(var(--nav-bar-height, 7.2rem) + 2rem) !important;
  }
  .mobile-navigation .menu > .menu-item > a {
    color: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}


/* Active places section: speed-up video instead of static image */
.active-places__video-wrap {
  position: relative !important;
  overflow: hidden !important;
  margin: 0 !important;
}
.active-places__video-wrap .active-places__video,
.active-places figure.active-places__image video.active-places__video {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 28rem !important;
  object-fit: cover !important;
  border-radius: inherit;
  background: #0b2a4a;
}
@media only screen and (max-width: 750px) {
  .active-places__video-wrap .active-places__video {
    min-height: 22rem !important;
  }
}


/* Header CTA arrow icon (stroke) */
.main-header .nav-bar__buttons a.button svg[stroke] {
  stroke: #fff !important;
  fill: none !important;
  width: 1.4rem !important;
  height: 1.4rem !important;
  filter: none !important;
}


/* Dienstpagina hero: video i.p.v. stilbeeld */
body.single-service .header__image--video,
body.single-service .header__image.header__image--video {
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  height: 100% !important;
}
body.single-service .header__image--video .header__video,
body.single-service .header__media video.header__video {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 40rem !important;
  object-fit: cover !important;
  object-position: center center !important;
  pointer-events: none !important;
}
@media only screen and (max-width: 750px) {
  body.single-service .header__image--video .header__video {
    min-height: 28rem !important;
  }
}

/* Sticky phone dark + flush under trustbar */
.main-header.is-scrolled,
body.home .main-header.is-scrolled,
header.main-header.is-scrolled {
  top: var(--hbl-trustbar-h, 40px) !important;
}
.main-header.is-scrolled a.hbl-btn-tel,
.main-header.is-scrolled a.hbl-btn-tel span,
.main-header.is-scrolled a.hbl-btn-tel .hbl-btn-tel__num {
  color: #000d3a !important;
  -webkit-text-fill-color: #000d3a !important;
}



/* hbl-mobile-sticky-flush */
@media (max-width: 1023px) {
  /* Height comes from JS measure — do NOT hardcode (caused 10px transparent gap) */
  .main-header,
  .main-header.is-scrolled,
  body.home .main-header,
  body.home .main-header.is-scrolled {
    top: var(--hbl-trustbar-h, 32px) !important;
    margin-top: 0 !important;
  }
  .hbl-trustbar { margin: 0 !important; border-bottom: 0 !important; }
  .hbl-lang { display: none !important; }
  /* belknop wit op transparante header */
  .main-header:not(.is-scrolled) .nav-bar__buttons-mobile a.hbl-btn-tel,
  .main-header:not(.is-scrolled) .nav-bar__buttons-mobile a.hbl-btn-tel svg,
  .main-header.main-header--transparent .nav-bar__buttons-mobile a.hbl-btn-tel {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    fill: currentColor !important;
  }
  body.home .main-header:not(.is-scrolled) .nav-bar__buttons-mobile a.hbl-btn-tel,
  body.page-template-page-about .main-header:not(.is-scrolled) .nav-bar__buttons-mobile a.hbl-btn-tel,
  body.page-template-page-contact .main-header:not(.is-scrolled) .nav-bar__buttons-mobile a.hbl-btn-tel,
  body.page-template-page-prijzen .main-header:not(.is-scrolled) .nav-bar__buttons-mobile a.hbl-btn-tel,
  body.page-prijzen .main-header:not(.is-scrolled) .nav-bar__buttons-mobile a.hbl-btn-tel {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }
  body.mob-nav-active .mobile-nav-toggle,
  body.mob-nav-active .mobile-nav-toggle__button {
    z-index: 100002 !important;
    pointer-events: auto !important;
  }
  body.mob-nav-active .hbl-mob-close { display: none !important; }
}


/* Homepage: CTA-marge 0 (niet over reviews/hero trekken), hero-onderkant recht, reviews dichterbij */
body.home .homepage-compensate-top,
body.page-template-page-home .homepage-compensate-top {
  margin-top: 0 !important;
}
body.home #homepage-content .homepage-content__shape-bottom,
body.page-template-page-home #homepage-content .homepage-content__shape-bottom {
  height: 0 !important;
  overflow: hidden !important;
  line-height: 0 !important;
}
body.home #homepage-content .homepage-content__shape-bottom svg,
body.page-template-page-home #homepage-content .homepage-content__shape-bottom svg {
  display: none !important;
}
body.home #homepage-content .homepage-content__shapes-wrap,
body.page-template-page-home #homepage-content .homepage-content__shapes-wrap {
  height: 0 !important;
  bottom: 0 !important;
}
body.home .hbl-reviews,
body.page-template-page-home .hbl-reviews {
  margin-top: 0 !important;
  padding-top: 20px !important;
}

/* ---- Trustbar/header seam: same height as before, no gap ---- */
.hbl-trustbar {
  border-bottom: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
.main-header,
body.home .main-header,
body:not(.home) .main-header,
header.main-header {
  top: var(--hbl-trustbar-h, 36px) !important;
  margin-top: 0 !important;
  border-top: none !important;
}
.main-header.is-scrolled {
  box-shadow: none !important;
}
.main-header.is-scrolled::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: -3px !important;
  height: 6px !important;
  background: #fff !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.main-header.is-scrolled .nav-bar,
.main-header.is-scrolled .nav-bar__content {
  position: relative !important;
  z-index: 1 !important;
  box-shadow: 0 4px 20px rgba(0, 13, 58, 0.08) !important;
}
/* ---- Trustbar/header seam: same height as before, no gap ---- */
.hbl-trustbar {
  border-bottom: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
.main-header,
body.home .main-header,
body:not(.home) .main-header,
header.main-header {
  top: var(--hbl-trustbar-h, 36px) !important;
  margin-top: 0 !important;
  border-top: none !important;
}
.main-header.is-scrolled {
  box-shadow: none !important;
}
.main-header.is-scrolled::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: -3px !important;
  height: 6px !important;
  background: #fff !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.main-header.is-scrolled .nav-bar,
.main-header.is-scrolled .nav-bar__content {
  position: relative !important;
  z-index: 1 !important;
  box-shadow: 0 4px 20px rgba(0, 13, 58, 0.08) !important;
}

/* Homepage hero: snellere fade + tekst gecentreerd tussen header en onderkant */
body.home #homepage-content .animated-view,
body.home #homepage-content .homepage-content__content,
body.home .hbl-hero-trust {
  transition: opacity 0.32s ease-out, transform 0.32s ease-out !important;
}
body.home #homepage-content .animated-view.fade-to-top {
  transform: translateY(1.25rem) !important;
  opacity: 0;
}
body.home #homepage-content .animated-view.fade-to-top.in-view {
  transform: translateY(0) !important;
  opacity: 1 !important;
}
body.home #homepage-content .content-wrap {
  top: 0 !important;
  bottom: 0 !important;
  right: 50% !important;
  transform: translateX(50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: calc(var(--hbl-trustbar-h, 36px) + var(--nav-bar-height, 10.4rem) + 8px) 2rem 6vh !important;
  box-sizing: border-box !important;
}
body.home #homepage-content .homepage-content__content {
  width: 100%;
}
@media (max-width: 1023px) {
  body.home #homepage-content .content-wrap {
    padding: calc(var(--hbl-trustbar-h, 36px) + var(--nav-bar-height, 9.2rem) + 8px) 1.25rem 5vh !important;
  }
}

/* About + Prijzen: no curved bottom — straight hero edge */
body.page-template-page-about #about-content .about-content__shapes-wrap,
body.page-template-page-prijzen #about-content .about-content__shapes-wrap,
body.page-prijzen #about-content .about-content__shapes-wrap,
body.page-template-page-about #about-content .about-content__shape-bottom,
body.page-template-page-prijzen #about-content .about-content__shape-bottom,
body.page-prijzen #about-content .about-content__shape-bottom {
  display: none !important;
  height: 0 !important;
}

/* Phone white on transparent header */
.main-header:not(.is-scrolled) a.hbl-btn-tel,
.main-header:not(.is-scrolled) a.hbl-btn-tel .hbl-btn-tel__num,
.main-header:not(.is-scrolled) a.hbl-btn-tel .hbl-btn-tel__icon,
.main-header:not(.is-scrolled) a.hbl-btn-tel svg path {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  fill: #fff !important;
}
.main-header.is-scrolled a.hbl-btn-tel,
.main-header.is-scrolled a.hbl-btn-tel .hbl-btn-tel__num,
.main-header.is-scrolled a.hbl-btn-tel svg path {
  color: #000d3a !important;
  -webkit-text-fill-color: #000d3a !important;
  fill: #000d3a !important;
}
/* Lang subtle */
.hbl-lang__btn {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.hbl-reviews-float__row--label { gap: 4px !important; }

/* Trustbar = zelfde lichtblauw als CTA-knoppen */
.hbl-trustbar {
  background: #00b0ff !important;
  background-color: #00b0ff !important;
  border-bottom: none !important;
}
.hbl-reviews-float {
  bottom: 18px !important;
}
@media (max-width: 767px) {
  .hbl-reviews-float {
    left: 12px !important;
    bottom: 16px !important;
  }
}


/* ---- Home slideshow: desktop hero fullscreen + CTA 2e image ---- */
.hbl-hero-slides {
  display: none;
}
@media (min-width: 1024px) {
  /* Video uit op desktop; slideshow vult zelfde video-vak (height/layout gelijk) */
  body.hbl-home-hero-slides #homepage-content .homepage-content__video > video {
    display: none !important;
    visibility: hidden !important;
  }
  body.hbl-home-hero-slides .hbl-hero-slides {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
  body.hbl-home-hero-slides .hbl-hero-slides__img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    opacity: 0;
    transition: opacity 0.55s ease;
  }
  body.hbl-home-hero-slides .hbl-hero-slides__img.is-active {
    opacity: 1;
  }
  /* overlays blijven boven slides */
  body.hbl-home-hero-slides #homepage-content .homepage-content__video::before,
  body.hbl-home-hero-slides #homepage-content .homepage-content__video::after {
    z-index: 4 !important;
  }
  body.hbl-home-hero-slides #homepage-content .homepage-content__shapes-wrap {
    z-index: 6 !important;
  }
  body.hbl-home-hero-slides #homepage-content .content-wrap {
    z-index: 60 !important;
  }
}
@media (max-width: 1023px) {
  .hbl-hero-slides { display: none !important; }
}

/* CTA: eerste image verbergen */
/* Eerste CTA-image: alleen op mobiel verbergen */
@media (max-width: 1023px) {
  .homepage-content__cta-image.hbl-cta-image--mobile-hide {
    display: none !important;
  }
}

/* CTA: slideshow in tweede image-slot */
.homepage-content__cta-golden-smile-image.hbl-cta-slides-host {
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
}
.homepage-content__cta-golden-smile-image .hbl-cta-slides {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.homepage-content__cta-golden-smile-image .hbl-cta-slides__img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: 0;
  transition: opacity 0.55s ease;
}
.homepage-content__cta-golden-smile-image .hbl-cta-slides__img.is-active {
  opacity: 1;
}

/* Oude phone-mockup nooit tonen */
.hbl-phone-show { display: none !important; }

/* ---- Prijzen/Over ons hero: flush + tekst zichtbaar ---- */
body.page-template-page-prijzen #main,
body.page-prijzen #main,
body.page-template-page-about #main {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body.page-template-page-prijzen #about-content,
body.page-prijzen #about-content,
body.page-template-page-about #about-content {
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}
body.page-template-page-prijzen #about-content .about-content__img.hbl-about-hero,
body.page-prijzen #about-content .about-content__img.hbl-about-hero,
body.page-template-page-about #about-content .about-content__img.hbl-about-hero {
  min-height: 70vh !important;
  margin: 0 !important;
  background: #000d3a !important;
}
body.page-template-page-prijzen #about-content .content-wrap,
body.page-prijzen #about-content .content-wrap,
body.page-template-page-about #about-content .content-wrap {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  right: 0 !important;
  left: 0 !important;
  transform: none !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: calc(var(--hbl-trustbar-h, 36px) + var(--nav-bar-height, 10.4rem) + 16px) 1.5rem 4rem !important;
  z-index: 12 !important;
  box-sizing: border-box !important;
}
body.page-template-page-prijzen #about-content .animated-view,
body.page-prijzen #about-content .animated-view,
body.page-template-page-about #about-content .animated-view {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
body.page-template-page-prijzen #about-content .about-content__content-title,
body.page-prijzen #about-content .about-content__content-title,
body.page-template-page-about #about-content .about-content__content-title,
body.page-template-page-prijzen #about-content .about-content__content-text,
body.page-prijzen #about-content .about-content__content-text,
body.page-template-page-about #about-content .about-content__content-text,
body.page-template-page-prijzen #about-content .about-content__content-text p,
body.page-prijzen #about-content .about-content__content-text p,
body.page-template-page-about #about-content .about-content__content-text p {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* Header transparant over hero, geen witte band */
body.page-template-page-prijzen .main-header:not(.is-scrolled),
body.page-prijzen .main-header:not(.is-scrolled),
body.page-template-page-about .main-header:not(.is-scrolled) {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
body.page-template-page-prijzen .main-header:not(.is-scrolled) .nav-bar,
body.page-prijzen .main-header:not(.is-scrolled) .nav-bar,
body.page-template-page-about .main-header:not(.is-scrolled) .nav-bar,
body.page-template-page-prijzen .main-header:not(.is-scrolled) .nav-bar .wrap,
body.page-prijzen .main-header:not(.is-scrolled) .nav-bar .wrap,
body.page-template-page-about .main-header:not(.is-scrolled) .nav-bar .wrap {
  background: transparent !important;
  background-color: transparent !important;
}

/* ---- Desktop/tablet: schuine video-telefoon RECHTS tussen sectie 1 en 2 ---- */
.hbl-bridge-phone {
  display: none;
}
@media (min-width: 768px) {
  body.hbl-has-bridge-phone #homepage-content,
  body.hbl-has-bridge-phone .homepage-compensate-top {
    position: relative !important;
    overflow: visible !important;
  }
  body.hbl-has-bridge-phone .hbl-bridge-phone {
    display: block !important;
    position: relative !important;
    z-index: 20 !important;
    height: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
  }
  /* Iets groter dan origineel (~240), niet 2x — nette iPhone-verhoudingen */
  body.hbl-has-bridge-phone .hbl-bridge-phone__device {
    position: absolute !important;
    right: max(28px, 4vw) !important;
    left: auto !important;
    top: 0 !important;
    transform: translateY(-68%) rotate(8deg) !important;
    width: 290px !important;
    height: auto !important;
    aspect-ratio: 9 / 19 !important;
    background: #0b1220 !important;
    border-radius: 40px !important;
    padding: 11px !important;
    box-sizing: border-box !important;
    box-shadow:
      0 0 0 2px #1c2433,
      0 0 0 4px #0b1220,
      0 18px 40px rgba(0, 0, 0, 0.32) !important;
  }
  /* Dynamic Island: vaste px, niet % van te groot frame */
  body.hbl-has-bridge-phone .hbl-bridge-phone__notch {
    position: absolute !important;
    top: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 102px !important;
    height: 26px !important;
    background: #0b1220 !important;
    border-radius: 14px !important;
    z-index: 3 !important;
  }
  body.hbl-has-bridge-phone .hbl-bridge-phone__bar {
    position: absolute !important;
    bottom: 7px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 88px !important;
    height: 4px !important;
    background: rgba(255,255,255,0.35) !important;
    border-radius: 3px !important;
    z-index: 3 !important;
  }
  body.hbl-has-bridge-phone .hbl-bridge-phone__screen {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 32px !important;
    overflow: hidden !important;
    background: #111 !important;
  }
  body.hbl-has-bridge-phone .hbl-bridge-phone__video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }
  /* H1 smaller width → meer ruimte rechts voor telefoon */
  body.hbl-has-bridge-phone #homepage-content .content-wrap {
    max-width: min(640px, 54vw) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-right: 400px !important;
    box-sizing: border-box !important;
  }
  body.hbl-has-bridge-phone #homepage-content h1 {
    max-width: min(36ch, 48vw) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body.hbl-has-bridge-phone .homepage-content__cta-inner {
    padding-right: min(420px, 34vw) !important;
  }
}
@media (min-width: 1100px) {
  body.hbl-has-bridge-phone .hbl-bridge-phone__device {
    width: 300px !important;
  }
}
@media (max-width: 1023px) and (min-width: 768px) {
  body.hbl-has-bridge-phone .hbl-bridge-phone__device {
    width: 320px !important;
  }
  body.hbl-has-bridge-phone #homepage-content .content-wrap {
    padding-right: 340px !important;
  }
}
@media (max-width: 767px) {
  .hbl-bridge-phone { display: none !important; }
}

/* ---- Desktop/tablet: schuine video-telefoon RECHTS tussen sectie 1 en 2 ---- */
.hbl-bridge-phone {
  display: none;
}
@media (min-width: 768px) {
  body.hbl-has-bridge-phone #homepage-content,
  body.hbl-has-bridge-phone .homepage-compensate-top {
    position: relative !important;
    overflow: visible !important;
  }
  body.hbl-has-bridge-phone .hbl-bridge-phone {
    display: block !important;
    position: relative !important;
    z-index: 20 !important;
    height: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
  }
  /* Zelfde nette formaat als eerder (~290), alleen hoger gezet */
  body.hbl-has-bridge-phone .hbl-bridge-phone__device {
    position: absolute !important;
    right: max(28px, 4vw) !important;
    left: auto !important;
    top: 0 !important;
    transform: translateY(-82%) rotate(8deg) !important;
    width: 250px !important;
    height: auto !important;
    aspect-ratio: 9 / 19.5 !important;
    background: #0b1220 !important;
    border-radius: 32px !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    box-shadow:
      0 0 0 2px #1c2433,
      0 0 0 4px #0b1220,
      0 18px 40px rgba(0, 0, 0, 0.32) !important;
  }
  body.hbl-has-bridge-phone .hbl-bridge-phone__notch {
    position: absolute !important;
    top: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 86px !important;
    height: 22px !important;
    background: #0b1220 !important;
    border-radius: 14px !important;
    z-index: 3 !important;
  }
  body.hbl-has-bridge-phone .hbl-bridge-phone__bar {
    position: absolute !important;
    bottom: 7px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 72px !important;
    height: 3px !important;
    background: rgba(255,255,255,0.35) !important;
    border-radius: 3px !important;
    z-index: 3 !important;
  }
  body.hbl-has-bridge-phone .hbl-bridge-phone__screen {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 26px !important;
    overflow: hidden !important;
    background: #111 !important;
  }
  body.hbl-has-bridge-phone .hbl-bridge-phone__video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }
  /* H1: max ~2 regels, zo smal mogelijk zonder 5+ regels */
  body.hbl-has-bridge-phone #homepage-content .content-wrap {
    max-width: none !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
  body.hbl-has-bridge-phone #homepage-content h1 {
    max-width: min(36ch, 48vw) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body.hbl-has-bridge-phone .homepage-content__cta-inner {
    padding-right: min(340px, 28vw) !important;
  }
}
@media (min-width: 1100px) {
  body.hbl-has-bridge-phone .hbl-bridge-phone__device {
    width: 260px !important;
  }
}
@media (max-width: 1023px) and (min-width: 768px) {
  body.hbl-has-bridge-phone .hbl-bridge-phone__device {
    width: 220px !important;
  }
}
@media (max-width: 767px) {
  .hbl-bridge-phone { display: none !important; }
}

/* Homepage hero: lager zodat reviews ("klanten over HBL") mee in beeld komen */
body.home #homepage-content,
body.page-template-page-home #homepage-content {
  margin-bottom: 0 !important;
}
body.home #homepage-content .homepage-content__video,
body.page-template-page-home #homepage-content .homepage-content__video {
  min-height: 84vh !important;
  height: 84vh !important;
  max-height: none !important;
}
@media (max-width: 1023px) {
  body.home #homepage-content .homepage-content__video,
  body.page-template-page-home #homepage-content .homepage-content__video {
    min-height: 84vh !important;
    height: 84vh !important;
    max-height: none !important;
  }
}

/* Bridge phone: iets kleiner + H1 altijd boven de telefoon */
@media (min-width: 768px) {
  body.hbl-has-bridge-phone .hbl-bridge-phone {
    z-index: 20 !important;
  }
  body.hbl-has-bridge-phone .hbl-bridge-phone__device {
    width: 250px !important;
    aspect-ratio: 9 / 19.5 !important;
    border-radius: 32px !important;
    padding: 8px !important;
  }
  body.hbl-has-bridge-phone .hbl-bridge-phone__notch {
    width: 78px !important;
    height: 20px !important;
    top: 11px !important;
  }
  body.hbl-has-bridge-phone .hbl-bridge-phone__bar {
    width: 64px !important;
    height: 3px !important;
  }
  body.hbl-has-bridge-phone .hbl-bridge-phone__screen {
    border-radius: 24px !important;
  }
  /* H1 / hero-tekst BOVEN de telefoon-video */
  body.hbl-has-bridge-phone #homepage-content .content-wrap {
    z-index: 60 !important;
    position: absolute !important;
  }
  body.hbl-has-bridge-phone #homepage-content .homepage-content__content,
  body.hbl-has-bridge-phone #homepage-content .homepage-content__content-inner,
  body.hbl-has-bridge-phone #homepage-content h1,
  body.hbl-has-bridge-phone .hbl-hero-trust {
    position: relative !important;
    z-index: 61 !important;
  }
}
@media (min-width: 1100px) {
  body.hbl-has-bridge-phone .hbl-bridge-phone__device {
    width: 260px !important;
  }
}
@media (max-width: 1023px) and (min-width: 768px) {
  body.hbl-has-bridge-phone .hbl-bridge-phone__device {
    width: 220px !important;
  }
}

/* Hero Bel ons under H1 */
.hbl-hero-bel {
  display: flex;
  justify-content: center;
  margin-top: 1.4rem;
  position: relative;
  z-index: 62;
}
.hbl-hero-bel__btn.button,
a.button.hbl-hero-bel__btn {
  border-radius: 50px !important;
  background: #00b0ff !important;
  background-color: #00b0ff !important;
  border-color: #00b0ff !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  padding: 0.85rem 1.6rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
.hbl-hero-bel__btn.button:hover,
a.button.hbl-hero-bel__btn:hover {
  background: #015f9d !important;
  background-color: #015f9d !important;
  border-color: #015f9d !important;
  color: #fff !important;
}

/* ---- Flush heroes: geen witte band onder Contact / Prijzen / EN SEO-hero ---- */
body.page-template-page-contact .hbl-page-hero,
body.page-template-page-quote .hbl-page-hero,
body.page-template-page-prijzen #about-content,
body.page-prijzen #about-content,
body.page-template-page-about #about-content {
  margin: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
body.page-template-page-prijzen .hbl-pricing,
body.page-prijzen .hbl-pricing,
body.page-template-page-prijzen .section.hbl-pricing,
body.page-prijzen .section.hbl-pricing {
  margin-top: 0 !important;
  padding-top: 48px !important;
}
/* Kill old wave-overlap spacers that leave a white strip when hero has no curve */
body.page-template-page-contact .section.form.spacing-row,
body.page-template-page-quote .section.form.spacing-row {
  margin-top: 0 !important;
}
body.page-template-page-contact .section.form.spacing-row > .section__background,
body.page-template-page-quote .section.form.spacing-row > .section__background {
  padding-top: 0 !important;
}
/* EN contact / SEO pages: hero flush + form direct eronder */
.hbl-seo-hero {
  margin: 0 !important;
  margin-bottom: 0 !important;
  padding-top: calc(var(--hbl-trustbar-h, 36px) + var(--nav-bar-height, 10.4rem) + 28px) !important;
  padding-bottom: 36px !important;
}
.hbl-seo-hero + .hbl-seo-section,
.hbl-seo-section {
  margin-top: 0 !important;
  padding-top: 40px !important;
}
body.hbl-lang-en.page-prijzen #main,
body.hbl-lang-en #main {
  padding-top: 0 !important;
}
/* Contact page-hero sits under sticky header like about */
body.page-template-page-contact .hbl-page-hero,
body.page-template-page-quote .hbl-page-hero {
  margin-top: 0 !important;
}

/* ---- Contact: meer ruimte onder header voor hero-tekst ---- */
body.page-template-page-contact .hbl-page-hero__content,
body.page-template-page-quote .hbl-page-hero__content {
  padding-top: calc(var(--hbl-trustbar-h, 36px) + var(--nav-bar-height, 10.4rem) + 56px) !important;
  padding-bottom: 56px !important;
}
@media (max-width: 1023px) {
  body.page-template-page-contact .hbl-page-hero__content,
  body.page-template-page-quote .hbl-page-hero__content {
    padding-top: calc(var(--hbl-trustbar-h, 36px) + var(--nav-bar-height, 9.2rem) + 40px) !important;
  }
}

/* ---- Prijzen: witte band weg (spacing-row margin) + hero flush ---- */
body.page-template-page-prijzen #about-content,
body.page-prijzen #about-content,
body.page-template-page-prijzen #about-content.section,
body.page-prijzen #about-content.section {
  margin: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}
body.page-template-page-prijzen #about-content .about-content__img,
body.page-prijzen #about-content .about-content__img,
body.page-template-page-prijzen #about-content .about-content__img.hbl-about-hero,
body.page-prijzen #about-content .about-content__img.hbl-about-hero {
  margin: 0 !important;
  min-height: 58vh !important;
  max-height: 640px !important;
}
body.page-template-page-prijzen .section.hbl-pricing,
body.page-prijzen .section.hbl-pricing,
body.page-template-page-prijzen .hbl-pricing.spacing-row,
body.page-prijzen .hbl-pricing.spacing-row,
body.page-template-page-prijzen .section.spacing-row.hbl-pricing,
body.page-prijzen .section.spacing-row.hbl-pricing {
  margin-top: 0 !important;
  margin-bottom: 4rem !important;
  padding-top: 48px !important;
  padding-bottom: 64px !important;
}
/* EN prices same */
body.hbl-lang-en.page-prijzen #about-content,
body.hbl-lang-en.page-template-page-prijzen #about-content {
  margin-bottom: 0 !important;
}
body.hbl-lang-en .section.hbl-pricing.spacing-row {
  margin-top: 0 !important;
}

/* ---- Mobiel menu: geen extra sluitknop, goed kruisje, geen witte header in menu, trustbar flush ---- */
@media (max-width: 1023px) {
  /* Extra close-knop nooit tonen */
  .hbl-mob-close {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Hamburger → X: theme mapping (streep 1+2 kruisen, 3 verborgen).
     Eerdere fout: streep 2 verbergen + 3 draaien → half-X door conflict met theme. */
  body.mob-nav-active .mobile-nav-toggle__button .strokes,
  .mobile-nav-toggle__button.is-open .strokes {
    height: 1.8rem !important;
    width: 1.8rem !important;
    position: absolute !important;
  }
  body.mob-nav-active .mobile-nav-toggle__button .strokes span:nth-child(1),
  body.mob-nav-active .mobile-nav-toggle__button .strokes span:first-child,
  .mobile-nav-toggle__button.is-open .strokes span:nth-child(1),
  .mobile-nav-toggle__button.is-open .strokes span:first-child {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 1.8rem !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, -50%) rotate(45deg) !important;
    transform-origin: center center !important;
  }
  body.mob-nav-active .mobile-nav-toggle__button .strokes span:nth-child(2),
  .mobile-nav-toggle__button.is-open .strokes span:nth-child(2) {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 1.8rem !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, -50%) rotate(-45deg) !important;
    transform-origin: center center !important;
  }
  body.mob-nav-active .mobile-nav-toggle__button .strokes span:nth-child(3),
  .mobile-nav-toggle__button.is-open .strokes span:nth-child(3) {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  /* Open menu: sticky header NIET wit over blauw menu */
  body.mob-nav-active .main-header,
  body.mob-nav-active .main-header.is-scrolled,
  body.mob-nav-active .main-header.is-scrolled .nav-bar,
  body.mob-nav-active .main-header.is-scrolled .nav-bar__content,
  body.mob-nav-active .main-header.is-scrolled .nav-bar .wrap,
  body.mob-nav-active .main-header.is-scrolled .wrap.wrap__full-width {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
  }
  body.mob-nav-active .main-header.is-scrolled::before {
    display: none !important;
  }
  body.mob-nav-active .mobile-nav-toggle__button,
  body.mob-nav-active .main-header.is-scrolled .mobile-nav-toggle__button {
    background: rgba(0, 0, 0, 0.22) !important;
    border-color: #fff !important;
    color: #fff !important;
  }
  body.mob-nav-active .mobile-nav-toggle__button .strokes span,
  body.mob-nav-active .main-header.is-scrolled .mobile-nav-toggle__button .strokes span {
    background: #fff !important;
    background-color: #fff !important;
  }
}

/* Trustbar + sticky header: geen transparante spleet */
.hbl-trustbar {
  border-bottom: none !important;
  margin: 0 !important;
  padding-bottom: 0 !important;
}
.main-header,
.main-header.is-scrolled,
body.home .main-header.is-scrolled,
header.main-header.is-scrolled {
  top: var(--hbl-trustbar-h, 36px) !important;
  margin-top: 0 !important;
  border-top: none !important;
}
.main-header.is-scrolled::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: -2px !important;
  height: 4px !important;
  background: #fff !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* ---- FINAL FIX 20261027mobfix3: seam + X + prijzen wit ---- */
.hbl-trustbar {
  z-index: 10050 !important;
}
.main-header,
.main-header.is-scrolled,
body.home .main-header.is-scrolled,
header.main-header.is-scrolled {
  top: var(--hbl-trustbar-h, 32px) !important;
}
/* Overlap 1px under trustbar — JS also pins exact px */
html.hbl-trustbar-ready .main-header,
html.hbl-trustbar-ready .main-header.is-scrolled {
  top: var(--hbl-trustbar-h) !important;
}
.main-header.is-scrolled,
.main-header.is-scrolled .nav-bar,
.main-header.is-scrolled .nav-bar__content,
.main-header.is-scrolled .nav-bar .wrap {
  background: #fff !important;
  background-color: #fff !important;
}
.main-header.is-scrolled::before { display: none !important; }
.hbl-trustbar::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -2px !important;
  height: 3px !important;
  background: #00b0ff !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

/* Prijzen: geen witte band onder hero */
body.page-template-page-prijzen #about-content,
body.page-prijzen #about-content,
body.page-template-page-about #about-content {
  margin: 0 !important;
  padding: 0 !important;
  background: #000d3a !important;
  overflow: hidden !important;
}
body.page-template-page-prijzen #about-content .about-content__img,
body.page-prijzen #about-content .about-content__img,
body.page-template-page-prijzen #about-content .about-content__img.hbl-about-hero,
body.page-prijzen #about-content .about-content__img.hbl-about-hero,
body.page-template-page-about #about-content .about-content__img.hbl-about-hero {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 58vh !important;
  max-height: none !important;
  background: #000d3a !important;
  background-color: #000d3a !important;
}
body.page-template-page-prijzen #about-content .wrap,
body.page-prijzen #about-content .wrap,
body.page-template-page-about #about-content .wrap {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
body.page-template-page-prijzen .section.hbl-pricing,
body.page-prijzen .section.hbl-pricing,
body.page-template-page-prijzen .hbl-pricing {
  margin-top: 0 !important;
  padding-top: 28px !important;
  background: #f4f8fc !important;
}
body.page-template-page-prijzen #main,
body.page-prijzen #main {
  background: #f4f8fc !important;
}

/* ---- PRIJZEN witruimte FIX: #main spacer was 149px door :not()-specificiteit ---- */
html body.page-template-page-prijzen.page-prijzen #main,
html body.page-template-page-prijzen #main,
html body.page-prijzen #main,
html body.page-template-page-prijzen .site-content,
html body.page-prijzen .site-content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
}
html body.page-template-page-prijzen #about-content,
html body.page-prijzen #about-content {
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  top: 0 !important;
  background: #000d3a !important;
  overflow: hidden !important;
}
html body.page-template-page-prijzen #about-content .about-content__img.hbl-about-hero,
html body.page-prijzen #about-content .about-content__img.hbl-about-hero {
  min-height: 72vh !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #000d3a !important;
}
html body.page-template-page-prijzen #about-content .content-wrap,
html body.page-prijzen #about-content .content-wrap {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: calc(var(--hbl-trustbar-h, 32px) + var(--nav-bar-height, 10.4rem) + 12px) 1.5rem 3rem !important;
  z-index: 12 !important;
  margin: 0 !important;
}
html body.page-template-page-prijzen .section.hbl-pricing,
html body.page-prijzen .section.hbl-pricing {
  margin-top: 0 !important;
  padding-top: 40px !important;
}