/* WordPress integration layer. Loaded after the reference-site styles. */
html { margin-top: 0 !important; }
body.admin-bar .siteHeader { top: 32px; }
body.admin-bar .siteHeader .mainNav nav.open { top: 108px !important; height: calc(100dvh - 108px); }
.dlsIcon { display: block; width: 1.25em; height: 1.25em; flex: 0 0 auto; }
.hero3d > .heroModel { background-image: var(--dls-hero-bg) !important; }
.desktopNavigation, .mobileNavigation { align-items: center; }
.mobileNavigation { display: none !important; }
.mainNav .navDropdownToggle { font: inherit; }
.mainNav .navDropdownMenu { z-index: 120; }
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.adminNotice {
  margin: 140px auto 60px; width: min(760px, 90%); padding: 24px;
  background: #fff; border-left: 5px solid #f5a027; color: #171918;
}
.adminNotice a { color: #536929; font-weight: 700; }
.entryContent { width: min(900px, 90%); margin: 180px auto 100px; }
.entryContent > * { max-width: 100%; }
.entryContent a { color: #536929; }

/* Homepage: calculator cards now follow the hero directly. */
.home .serviceSection.photoServices {
  padding-top: clamp(56px, 6vw, 96px);
}

.homeMoreControl {
  display: flex;
  justify-content: center;
  padding: 0 5% clamp(64px, 7vw, 110px);
  background: #faf9f5;
}

.homeMoreButton {
  min-width: min(100%, 360px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px 24px;
  border: 0;
  background: #2b1738;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .25s ease, transform .25s ease;
}

.homeMoreButton:hover,
.homeMoreButton:focus-visible {
  background: #3a214b;
  transform: translateY(-2px);
}

.homeMoreButton svg {
  width: 18px;
  height: 18px;
  transition: transform .3s ease;
}

.homeMoreButton[aria-expanded="true"] svg { transform: rotate(180deg); }
.homeMoreContent[hidden] { display: none !important; }
.homeMoreContent.isOpen { animation: dlsMoreReveal .45s ease both; }

/* Calculator-card hotspots reuse the ACF data from their linked solution page. */
.photoServices .servicePhoto .serviceHotspot {
  width: 42px;
  height: 42px;
  transform: translate(-50%, -50%);
  animation-duration: 3.5s;
  box-shadow: 0 6px 18px rgba(43, 23, 56, .28), 0 0 0 4px rgba(255, 255, 255, .72);
}

.photoServices .servicePhoto .serviceHotspot i {
  width: 28px;
  height: 28px;
}

.photoServices .servicePhoto .serviceHotspot i svg {
  width: 18px;
  height: 18px;
}

.photoServices .servicePhoto .serviceHotspot em {
  width: 17px;
  height: 17px;
}

.photoServices .servicePhoto .serviceHotspot em svg {
  width: 10px;
  height: 10px;
}

.photoServices .servicePhoto .serviceHotspot > span {
  width: 175px;
  padding: 10px 12px;
}

.photoServices .servicePhoto .serviceHotspot.selected {
  background: #2b1738;
  color: #c8db83;
}

.photoServices .servicePhoto .serviceHotspot.selected i,
.photoServices .servicePhoto .serviceHotspot.selected i svg {
  color: #c8db83 !important;
  stroke: currentColor !important;
  opacity: 1;
}

.serviceSpotInfo { display: none; }

.serviceCta {
  gap: 12px;
}
.serviceCta i {
  display: grid;
  place-items: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
}
.serviceCta i svg { width: 21px; height: 21px; }
.serviceCta > span { flex: 1; }

.adviceHeroCta {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
}
.adviceHeroCta i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
}
.adviceHeroCta i svg { width: 23px; height: 23px; }
.adviceHeroCta .dlsIconWhatsapp { color: #249642; }

.serviceTitleIcon { display: none; }
.serviceMobileToggle small { display: none; }

@keyframes dlsMoreReveal {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
  /* Let the first hero photograph run underneath the mobile header. */
  .siteHeader.topbar,
  .siteHeader .mainNav {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  .hero.hero3d,
  .subHero.subHeroFull,
  .contactHero.contactHeroFull {
    padding-top: 0 !important;
  }
  .home .heroModel .spot.solar {
    top: calc(var(--spot-y) + 45px) !important;
  }
  /* The two left-side Ramen & deuren markers need their own logo-safe offsets. */
  .subHeroFull .heroHotspot.spot-window {
    transform: translate(-50%, calc(-50% + 50px)) !important;
  }
  .subHeroFull .heroHotspot.spot-glass {
    transform: translate(-50%, calc(-50% + 78px)) !important;
  }
  .siteHeader .mainNav nav.open {
    background: #2b1738 !important;
  }

  .home .serviceSection.photoServices { padding-top: 48px; }
  .homeMoreControl { padding: 0 5% 64px; }
  .homeMoreButton { width: 100%; min-width: 0; }

  .photoServices .servicePhoto .serviceHotspot {
    width: 34px;
    height: 34px;
    animation: none;
    box-shadow: 0 5px 14px rgba(43, 23, 56, .25), 0 0 0 3px rgba(255, 255, 255, .7);
  }

  .photoServices .servicePhoto .serviceHotspot i { width: 24px; height: 24px; }
  .photoServices .servicePhoto .serviceHotspot i svg { width: 16px; height: 16px; }
  .photoServices .servicePhoto .serviceHotspot em { display: none; }
  .photoServices .servicePhoto .serviceHotspot > span { display: none; }

  .serviceSpotInfo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 10px 14px 11px;
    background: #2b1738;
    color: #fff;
    line-height: 1.35;
  }
  .serviceSpotInfo b { font-size: 14px; }
  .serviceSpotInfo span { font-size: 12px; color: #d8ccde; }

  /* Mobile cards are always expanded; the title remains a visual header. */
  .photoServices .service:not(.active) .servicePhoto { display: block; }
  .photoServices .service:not(.active) .serviceTop,
  .photoServices .service:not(.active) .serviceCta { display: flex; }
  .photoServices .service:not(.active) .serviceBody > p { display: block; }
  .photoServices .service:not(.active) .serviceBody > ul { display: grid; }
  .photoServices .serviceBody { position: static !important; min-height: 0 !important; padding: 17px 16px 18px !important; }
  .photoServices .serviceTop { display: none !important; }
  .photoServices .serviceBody .serviceMobileToggle {
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    margin: 0 0 6px !important;
    padding: 0 !important;
  }
  .photoServices .serviceMobileToggle > svg { display: none; }
  .photoServices .serviceMobileToggle .serviceTitleIcon { display: grid; place-items: center; width: 24px; height: 24px; color: var(--tone); }
  .photoServices .serviceMobileToggle .serviceTitleIcon svg { display: block; width: 22px; height: 22px; }
  .photoServices .serviceMobileToggle small { display: block; color: #777a73; font-size: 15px; font-weight: 500; }
  .photoServices .serviceBody > ul { margin-bottom: 0 !important; padding-bottom: 4px; }
  .photoServices .serviceBody .serviceCta { margin-top: 10px !important; align-self: stretch !important; }
}

@media (min-width: 761px) and (max-width: 820px) {
  .serviceSpotInfo {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
    padding: 11px 16px 12px;
    background: #2b1738;
    color: #fff;
    line-height: 1.4;
  }
  .serviceSpotInfo b { font-size: 15px; }
  .serviceSpotInfo span { font-size: 13px; color: #d8ccde; }
  .photoServices .service:not(.active) .servicePhoto { display: block; }
  .photoServices .service:not(.active) .serviceTop,
  .photoServices .service:not(.active) .serviceCta { display: flex; }
  .photoServices .service:not(.active) .serviceBody > p { display: block; }
  .photoServices .service:not(.active) .serviceBody > ul { display: grid; }
  .photoServices .serviceBody { position: static !important; min-height: 0 !important; padding: 19px 18px 20px !important; }
  .photoServices .serviceTop { display: none !important; }
  .photoServices .serviceBody .serviceMobileToggle {
    display: grid !important;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    min-height: 44px;
    margin: 0 0 7px !important;
    padding: 0 !important;
  }
  .photoServices .serviceMobileToggle > svg { display: none; }
  .photoServices .serviceMobileToggle .serviceTitleIcon { display: grid; place-items: center; width: 26px; height: 26px; color: var(--tone); }
  .photoServices .serviceMobileToggle .serviceTitleIcon svg { display: block; width: 23px; height: 23px; }
  .photoServices .serviceMobileToggle small { display: block; color: #777a73; font-size: 15px; font-weight: 500; }
  .photoServices .serviceBody > ul { margin-bottom: 0 !important; padding-bottom: 5px; }
  .photoServices .serviceBody .serviceCta { margin-top: 11px !important; align-self: stretch !important; }
}

@media (prefers-reduced-motion: reduce) {
  .homeMoreContent.isOpen { animation: none; }
}

@media (max-width: 1024px) {
  .desktopNavigation { display: none !important; }
  .mobileNavigation.open { display: flex !important; }
  .siteHeader .mainNav .mobileNavigation > a,
  .siteHeader .mobileNavigation .navDropdown > button { width: 100%; }
  .siteHeader .mobileNavigation .navDropdownMenu { display: none !important; }
  .siteHeader .mobileNavigation .navDropdown.submenuOpen .navDropdownMenu { display: flex !important; }
}

/* v3.1.8 — final mobile hero sizing and unobstructed hotspot captions.
   Kept last intentionally so legacy compact-screen rules cannot override it. */
@media (max-width: 760px) {
  .mobileLandingHeroMedia {
    height: clamp(220px, 60vw, 246px) !important;
    min-height: 220px !important;
    max-height: 246px !important;
    aspect-ratio: auto !important;
    overflow: hidden;
  }
  .mobileLandingHeroMedia > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 52%;
  }
  .mobileLandingSpot { z-index: 4; }
  .mobileLandingSpot.isActive { z-index: 60; }
  .mobileLandingSpot::after {
    z-index: 61;
    left: calc(100% + 7px);
    right: auto;
    top: 50%;
    transform: translateY(-50%) scale(.94);
    width: max-content;
    max-width: 128px;
    white-space: normal;
  }
  .mobileLandingSpot.isActive::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
  }
  .mobileLandingSpot.labelLeft::after {
    left: auto;
    right: calc(100% + 7px);
  }
}

@media (max-width: 380px) and (max-height: 700px) {
  .mobileLandingHeroMedia {
    height: 210px !important;
    min-height: 210px !important;
    max-height: 210px !important;
  }
}

/* v3.3.0 — shared header, readable logo, company page and renovation form. */
.aboutPage { background:#f6f4ef; color:#171917; padding-top:94px; }
.aboutHero { padding:clamp(70px,9vw,130px) 7% 65px; background:#ece9e2; }
.aboutHero>span,.renovationDialog>span { color:#6c852d; font-size:12px; font-weight:800; letter-spacing:.18em; }
.aboutHero h1 { max-width:900px; margin:18px 0 24px; font-size:clamp(44px,6vw,82px); line-height:1; letter-spacing:-.045em; }
.aboutHero p { max-width:900px; margin:0; font-size:clamp(20px,2vw,28px); line-height:1.45; font-weight:700; }
.aboutContent { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr); gap:6vw; padding:80px 7% 110px; }
.aboutCopy { font-size:18px; line-height:1.62; }
.aboutCopy p { margin:0 0 25px; }
.aboutEmphasis { font-weight:800; }
.aboutImages { display:grid; gap:22px; align-content:start; }
.aboutImages img { width:100%; aspect-ratio:1.5; object-fit:cover; }
.renovationModal[hidden] { display:none; }
.renovationModal { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:20px; }
.renovationBackdrop { position:absolute; inset:0; width:100%; height:100%; border:0; background:rgba(27,16,33,.72); backdrop-filter:blur(6px); }
.renovationDialog { position:relative; width:min(620px,100%); max-height:calc(100dvh - 40px); overflow:auto; padding:38px; border-radius:22px; background:#fff; box-shadow:0 30px 90px rgba(20,10,25,.36); }
.renovationDialog h2 { margin:10px 0; color:#26162f; font-size:clamp(30px,4vw,46px); line-height:1.05; }
.renovationDialog>p { color:#5f625d; line-height:1.55; }
.renovationClose { position:absolute; top:18px; right:18px; display:grid; place-items:center; width:38px; height:38px; border:1px solid #ddd7e1; border-radius:50%; background:#fff; color:#30183c; }
.renovationClose svg { width:18px; }
.renovationDialog form { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-top:24px; }
.renovationDialog label { display:grid; gap:7px; color:#2d3030; font-size:13px; font-weight:750; }
.renovationDialog input,.renovationDialog select { width:100%; min-height:48px; padding:10px 13px; border:1px solid #cbc7cf; border-radius:9px; background:#fff; color:#1f211f; font:inherit; }
.renovationDialog form>button { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; min-height:52px; padding:12px 18px; border:0; border-radius:9px; background:#ee982d; color:#24152d; font-weight:850; }
.renovationDialog form>button svg { width:18px; }
.renovationTrap { position:absolute!important; left:-9999px!important; }
.renovationStatus { margin-top:15px; padding:12px 14px; border-radius:8px; font-weight:700; }
.renovationStatus.success { background:#e8f5df; color:#326215; }.renovationStatus.error { background:#fde9e5; color:#8d2f20; }
.modalOpen { overflow:hidden; }

@media (max-width:760px) {
  .siteHeader.topbar { min-height:72px!important; height:72px!important; background:rgba(255,255,255,.46)!important; border-bottom:1px solid rgba(255,255,255,.32)!important; box-shadow:0 4px 14px rgba(31,20,37,.055)!important; backdrop-filter:blur(8px) saturate(1.12)!important; }
  .siteHeader .mainNav { display:grid!important; grid-template-columns:132px minmax(0,1fr) auto!important; gap:8px!important; height:72px!important; padding:0 10px!important; }
  .siteHeader .brand { width:132px!important; height:58px!important; overflow:visible!important; }
  .siteHeader .brand::before,.siteHeader .brand::after { display:none!important; }
  .siteHeader .brand img { display:block!important; width:132px!important; height:58px!important; object-fit:contain!important; filter:brightness(0) saturate(100%) invert(14%) sepia(22%) saturate(1860%) hue-rotate(238deg) brightness(91%) contrast(94%) drop-shadow(0 1px 2px rgba(255,255,255,.9))!important; }
  .siteHeader .desktopNavigation,.siteHeader .menu { display:none!important; }
  .siteHeader .mobileNavigation { position:static!important; display:flex!important; min-width:0!important; width:auto!important; height:auto!important; overflow-x:auto!important; overflow-y:hidden!important; gap:14px!important; padding:0!important; background:transparent!important; box-shadow:none!important; white-space:nowrap!important; scrollbar-width:none; }
  .siteHeader .mobileNavigation::-webkit-scrollbar { display:none; }
  .siteHeader .mobileNavigation>a { flex:0 0 auto!important; width:auto!important; padding:8px 0!important; color:#2b1738!important; font-size:10px!important; font-weight:800!important; text-shadow:0 1px 2px rgba(255,255,255,.95)!important; }
  .mobileHeaderContacts { display:flex!important; gap:4px; }
  .mobileHeaderContacts a { display:grid; place-items:center; width:31px; height:31px; border-radius:50%; background:rgba(255,255,255,.62); color:#2b1738; border:1px solid rgba(43,23,56,.14); }
  .mobileHeaderContacts svg { width:15px; height:15px; }
  .aboutPage { padding-top:72px; }
  .aboutHero { padding:55px 6% 42px; }
  .aboutHero h1 { font-size:42px; }
  .aboutHero p { font-size:19px; }
  .aboutContent { grid-template-columns:1fr; padding:48px 6% 75px; }
  .aboutCopy { font-size:16px; }
  .aboutImages { grid-row:1; grid-template-columns:1fr 1fr; gap:10px; }
  .aboutImages img { aspect-ratio:1; }
  .renovationDialog { padding:30px 20px 22px; border-radius:16px; }
  .renovationDialog form { grid-template-columns:1fr; }
  .renovationDialog form>button { grid-column:1; }
}

/* v3.3.4 — definitive shared mobile header and natural-height inner heroes. */
.siteHeader .brand { position:relative; }
.siteHeader .brandLogo { position:absolute!important; inset:0!important; width:100%!important; height:100%!important; object-fit:contain!important; object-position:left center!important; }
.siteHeader .brandLogoPurple { display:none!important; }
.siteHeader .brand::before,.siteHeader .brand::after { display:none!important; }

@media (min-width:761px) {
  body.page-template-page-over-ons .siteHeader .brandLogoWhite { display:none!important; }
  body.page-template-page-over-ons .siteHeader .brandLogoPurple { display:block!important; filter:drop-shadow(0 2px 6px rgba(43,23,56,.18))!important; }
}

@media (max-width:760px) {
  body .siteHeader.topbar {
    position:absolute!important; height:72px!important; min-height:72px!important;
    background:rgba(255,255,255,.78)!important; border-bottom:1px solid rgba(43,23,56,.10)!important;
    box-shadow:0 4px 14px rgba(31,20,37,.07)!important; backdrop-filter:blur(10px) saturate(1.1)!important;
  }
  body .siteHeader .mainNav {
    display:grid!important; grid-template-columns:132px minmax(0,1fr) auto!important;
    align-items:center!important; gap:7px!important; height:72px!important; min-height:72px!important;
    padding:0 9px!important; overflow:hidden!important; background:transparent!important;
  }
  body .siteHeader .brand { display:block!important; width:132px!important; height:58px!important; overflow:visible!important; }
  body .siteHeader .brandLogoWhite { display:none!important; }
  body .siteHeader .brandLogoPurple { display:block!important; filter:drop-shadow(0 2px 5px rgba(43,23,56,.18))!important; }
  body .siteHeader .desktopNavigation,body .siteHeader .menu { display:none!important; }
  body .siteHeader .mobileNavigation {
    position:static!important; inset:auto!important; display:flex!important; flex-direction:row!important;
    align-items:center!important; justify-content:flex-start!important; min-width:0!important; width:auto!important;
    height:56px!important; min-height:0!important; overflow-x:auto!important; overflow-y:hidden!important;
    gap:14px!important; padding:0!important; background:transparent!important; box-shadow:none!important;
    white-space:nowrap!important; scrollbar-width:none!important;
  }
  body .siteHeader .mobileNavigation::-webkit-scrollbar { display:none!important; }
  body .siteHeader .mobileNavigation>a {
    display:flex!important; flex:0 0 auto!important; width:auto!important; min-height:0!important;
    padding:8px 0!important; color:#432052!important; font-size:9.5px!important; line-height:1.15!important;
    font-weight:800!important; text-shadow:none!important; white-space:nowrap!important;
  }
  body .mobileHeaderContacts { display:flex!important; flex-direction:row!important; flex:0 0 auto!important; gap:4px!important; }
  body .mobileHeaderContacts a { width:31px!important; height:31px!important; }

  .subHero.subHeroFull,.contactHero.contactHeroFull {
    display:block!important; height:auto!important; min-height:0!important; max-height:none!important;
    padding:72px 0 0!important; overflow:visible!important; background:#2b1738!important;
  }
  .subHeroFull .subHeroVisual,.contactHeroFull .contactHeroImage {
    position:relative!important; inset:auto!important; width:100%!important; height:auto!important;
    min-height:0!important; max-height:none!important; overflow:visible!important;
  }
  .subHeroFull .responsiveScene,.subHeroFull .scenePhoto { position:relative!important; width:100%!important; height:auto!important; }
  .subHeroFull .scenePhoto>img,.contactHeroFull .contactHeroImage>img {
    position:static!important; inset:auto!important; display:block!important; width:100%!important; height:auto!important;
    min-height:0!important; max-height:none!important; object-fit:contain!important; transform:none!important;
  }
  .subHeroFull .mobileSpotInfo { position:static!important; margin:0!important; padding:14px 18px 8px!important; }
  .subHeroFloatingActions {
    position:static!important; display:grid!important; grid-template-columns:1fr!important; transform:none!important;
    width:auto!important; margin:0!important; padding:10px 18px 20px!important; background:#2b1738!important;
  }
  .subHeroFloatingActions>a { width:100%!important; min-width:0!important; }
  .contactHeroFull .subHeroFloatingActions { position:relative!important; left:auto!important; right:auto!important; bottom:auto!important; }
}

@media (max-width:370px) {
  body .siteHeader .mainNav { grid-template-columns:118px minmax(0,1fr) auto!important; }
  body .siteHeader .brand { width:118px!important; height:54px!important; }
}

/* v3.3.5 — one physical logo and one shared mobile header on every page. */
.siteHeader .brandPicture {
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
}
body .siteHeader .brandPicture>.brandLogo {
  position:static!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:left center!important;
  filter:drop-shadow(0 2px 6px rgba(31,15,39,.22))!important;
}

@media (max-width:760px) {
  body[class] .siteHeader.topbar {
    position:absolute!important;
    top:0!important;
    left:0!important;
    right:0!important;
    z-index:1000!important;
    width:100%!important;
    height:72px!important;
    min-height:72px!important;
    color:#432052!important;
    background:rgba(255,255,255,.78)!important;
    border:0!important;
    border-bottom:1px solid rgba(67,32,82,.10)!important;
    box-shadow:0 4px 14px rgba(31,20,37,.07)!important;
    backdrop-filter:blur(10px) saturate(1.1)!important;
    overflow:hidden!important;
  }
  body[class] .siteHeader .utilityBar { display:none!important; }
  body[class] .siteHeader .mainNav {
    display:grid!important;
    grid-template-columns:132px minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:7px!important;
    width:100%!important;
    height:72px!important;
    min-height:72px!important;
    padding:0 9px!important;
    background:transparent!important;
    overflow:hidden!important;
  }
  body[class] .siteHeader .brand {
    position:relative!important;
    display:block!important;
    width:132px!important;
    height:58px!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }
  body[class] .siteHeader .brand::before,
  body[class] .siteHeader .brand::after { content:none!important; display:none!important; }
  body[class] .siteHeader .brandPicture>.brandLogo {
    display:block!important;
    width:100%!important;
    height:100%!important;
    filter:drop-shadow(0 2px 5px rgba(43,23,56,.18))!important;
  }
  body[class] .siteHeader .desktopNavigation,
  body[class] .siteHeader .menu { display:none!important; }
  body[class] .siteHeader .mobileNavigation {
    position:static!important;
    inset:auto!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
    min-width:0!important;
    width:auto!important;
    height:56px!important;
    min-height:0!important;
    gap:14px!important;
    padding:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    white-space:nowrap!important;
    scrollbar-width:none!important;
  }
  body[class] .siteHeader .mobileNavigation::-webkit-scrollbar { display:none!important; }
  body[class] .siteHeader .mobileNavigation>a {
    display:flex!important;
    flex:0 0 auto!important;
    width:auto!important;
    min-height:0!important;
    padding:8px 0!important;
    color:#432052!important;
    font-size:9.5px!important;
    font-weight:800!important;
    line-height:1.15!important;
    text-shadow:none!important;
    white-space:nowrap!important;
  }
  body[class] .mobileHeaderContacts {
    display:flex!important;
    flex-direction:row!important;
    flex:0 0 auto!important;
    gap:4px!important;
  }
  body[class] .mobileHeaderContacts a { width:31px!important; height:31px!important; }
}

@media (max-width:370px) {
  body[class] .siteHeader .mainNav { grid-template-columns:118px minmax(0,1fr) auto!important; }
  body[class] .siteHeader .brand { width:118px!important; height:54px!important; }
}

/* v3.3.1 — solid, high-contrast desktop header on the light Over ons page. */
@media (min-width:761px) {
  body.page-template-page-over-ons .siteHeader.topbar {
    background:#fff!important;
    border-bottom:1px solid rgba(43,23,56,.10)!important;
    box-shadow:0 6px 22px rgba(43,23,56,.06)!important;
    backdrop-filter:none!important;
  }
  body.page-template-page-over-ons .siteHeader .mainNav {
    background:#fff!important;
    border:0!important;
    backdrop-filter:none!important;
  }
  body.page-template-page-over-ons .siteHeader .brand {
    position:relative;
    overflow:hidden;
  }
  body.page-template-page-over-ons .siteHeader .brand img {
    filter:brightness(0) saturate(100%) invert(14%) sepia(22%) saturate(1860%) hue-rotate(238deg) brightness(91%) contrast(94%)!important;
  }
  body.page-template-page-over-ons .siteHeader .brand::before {
    content:'';
    position:absolute;
    z-index:2;
    left:0;
    top:50%;
    width:58px;
    height:72px;
    transform:translateY(-50%);
    background:url('../images/dls-logo.png') left center / 202px auto no-repeat;
    pointer-events:none;
  }
  body.page-template-page-over-ons .siteHeader .mainNav nav>a,
  body.page-template-page-over-ons .siteHeader .navDropdown>button {
    color:#432052!important;
    text-shadow:none!important;
  }
  body.page-template-page-over-ons .siteHeader .mainNav nav>a:not(.navCta)::after {
    background:#432052!important;
  }
  body.page-template-page-over-ons .siteHeader .mainNav .navCta {
    color:#291632!important;
  }
}

/* v3.2.3 — cleaner header, taller hero and tighter mobile cards. */
@media (max-width: 760px) {
  .home .siteHeader.topbar {
    background: rgba(255,255,255,.46) !important;
    border-bottom-color: rgba(255,255,255,.32) !important;
    box-shadow: 0 4px 14px rgba(31,20,37,.055) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.12) !important;
    backdrop-filter: blur(8px) saturate(1.12) !important;
  }
  .home .mobileLandingHeroMedia {
    height: clamp(316px, 80vw, 350px) !important;
    min-height: 316px !important;
    max-height: 350px !important;
  }
  .home .mobileServiceCard { min-height: 0 !important; }
  .home .mobileServiceContent {
    min-height: 170px !important;
    padding: 7px 8px !important;
  }
  .home .mobileServiceContent ul {
    gap: 1px !important;
    margin: 4px 0 3px !important;
    padding: 0 !important;
    border: 0 !important;
  }
  .home .mobileServiceContent > a {
    min-height: 28px !important;
    padding: 4px 7px !important;
  }
}

@media (max-width: 380px) and (max-height: 700px) {
  .home .mobileLandingHeroMedia {
    height: 294px !important;
    min-height: 294px !important;
    max-height: 294px !important;
  }
  .home .mobileServiceContent { min-height: 160px !important; }
}

/* Dedicated mobile-first homepage. Desktop remains on the established layout. */
.mobileLanding,
.mobileQuoteCta { display: none; }

@media (max-width: 760px) {
  .home .desktopLanding,
  .home > footer { display: none !important; }
  .home .mobileLanding { display: block; padding-top: 72px; background: #f5f3ee; color: #181818; }

  .home .siteHeader.topbar { position: absolute; min-height: 72px; background: #fff !important; color: #1f1f1f; }
  .home .siteHeader .utilityBar { display: none; }
  .home .siteHeader .mainNav {
    display: grid; grid-template-columns: minmax(84px, 1fr) auto 42px; align-items: center;
    gap: 8px; width: 100%; height: 72px; padding: 0 16px; background: #fff !important;
    border-bottom: 1px solid #ebe8e1 !important;
  }
  .home .siteHeader .brand { display: flex; align-items: center; gap: 7px; width: auto; color: #2b1738; }
  .home .siteHeader .brand img { display: none; }
  .home .siteHeader .brand::before { content: ''; flex: 0 0 27px; width: 27px; height: 27px; border-radius: 9px; background: linear-gradient(135deg, #f5a221 0 42%, #f07512 42% 66%, #432052 66%); transform: rotate(-7deg); }
  .home .siteHeader .brand::after { content: 'D.L.S.'; font-size: 22px; font-weight: 900; line-height: 1; letter-spacing: -.04em; }
  .home .siteHeader .menu { position: static; width: 42px; height: 42px; color: #2b1738; border: 1px solid #d9d4dc; background: #fff; }
  .home .mobileQuoteCta {
    display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 12px;
    border-radius: 9px; background: #76a52d; color: #fff; font-size: 11px; font-weight: 800; line-height: 1.1; text-align: center;
  }
  .home .siteHeader .mainNav nav.open { top: 72px !important; }

  .mobileLandingHero { background: #2b1738; color: #fff; }
  .mobileLandingHeroMedia { position: relative; aspect-ratio: 1.22; overflow: hidden; background: #ddd; }
  .mobileLandingHeroMedia > img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
  .mobileLandingSpot {
    position: absolute; left: clamp(24px, var(--x), calc(100% - 24px)); top: clamp(24px, var(--y), calc(100% - 24px));
    transform: translate(-50%, -50%); display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
    border: 3px solid rgba(255,255,255,.9); border-radius: 50%; background: rgba(255,255,255,.94); color: #71952d;
    box-shadow: 0 5px 14px rgba(32,18,41,.28); z-index: 2;
  }
  .mobileLandingSpot svg { width: 18px; height: 18px; }
  .mobileLandingSpot.isActive { background: #2b1738; color: #c7db76; outline: 3px solid #f5a221; }
  .mobileLandingHeroInfo { display: flex; flex-direction: column; gap: 3px; min-height: 61px; padding: 14px 20px 12px; background: #2b1738; }
  .mobileLandingHeroInfo b { font-size: 17px; line-height: 1.2; }
  .mobileLandingHeroInfo span { color: #e3dce7; font-size: 13px; line-height: 1.4; }
  .mobileLandingHeroActions { display: grid; gap: 9px; padding: 10px 18px 20px; }
  .mobileLandingHeroActions > a { display: grid; grid-template-columns: 35px minmax(0,1fr) 19px; align-items: center; gap: 10px; min-height: 58px; padding: 9px 13px; border-radius: 10px; }
  .mobileLandingHeroActions > a > svg:first-child { width: 23px; height: 23px; }
  .mobileLandingHeroActions > a > svg:last-child { width: 18px; height: 18px; }
  .mobilePrimaryAction { background: #f5a221; color: #1f1622; }
  .mobileAdviceAction { background: #fff; color: #283022; }
  .mobileAdviceAction .dlsIconWhatsapp { color: #249642; }
  .mobileLandingHeroActions b { display: block; font-size: 14px; }
  .mobileLandingHeroActions small { display: block; margin-top: 2px; font-size: 10px; font-weight: 500; }

  .mobileServiceList { display: grid; gap: 18px; padding: 40px 16px 44px; }
  .mobileSectionIntro { padding: 0 4px 4px; }
  .mobileSectionIntro > span, .mobileTrustBlock > span { color: #698c2c; font-size: 11px; font-weight: 800; letter-spacing: .17em; }
  .mobileSectionIntro h2 { margin: 9px 0 8px; font-size: clamp(27px, 8vw, 34px); line-height: 1.05; letter-spacing: -.045em; }
  .mobileSectionIntro p { margin: 0; color: #65655f; font-size: 15px; line-height: 1.55; }
  .mobileServiceCard { overflow: hidden; border: 1px solid #e3dfd7; border-radius: 20px; background: #fff; box-shadow: 0 13px 34px rgba(40,34,26,.09); }
  .mobileServiceImage { position: relative; aspect-ratio: 1.58; overflow: hidden; }
  .mobileServiceImage::after { content: ''; position: absolute; inset: auto 0 0; height: 42%; background: linear-gradient(transparent, rgba(0,0,0,.18)); }
  .mobileServiceImage img { width: 100%; height: 100%; object-fit: cover; }
  .mobileServiceImage > span { position: absolute; top: 14px; left: 14px; z-index: 1; padding: 7px 9px; border-radius: 7px; background: #fff; color: var(--accent); font-size: 11px; font-weight: 900; }
  .mobileServiceContent { padding: 20px; }
  .mobileServiceHeading { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 12px; align-items: start; }
  .mobileServiceHeading > i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: color-mix(in srgb, var(--accent) 13%, white); color: var(--accent); }
  .mobileServiceHeading > i svg { width: 23px; height: 23px; }
  .mobileServiceHeading h2 { margin: 0 0 4px; font-size: 22px; line-height: 1.12; letter-spacing: -.025em; }
  .mobileServiceHeading p { margin: 0; color: #686862; font-size: 14px; line-height: 1.42; }
  .mobileServiceContent ul { display: grid; gap: 9px; margin: 20px 0; padding: 18px 0; border-top: 1px solid #eeeae3; border-bottom: 1px solid #eeeae3; list-style: none; }
  .mobileServiceContent li { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 9px; align-items: start; font-size: 14px; line-height: 1.35; }
  .mobileServiceContent li svg { width: 16px; height: 16px; color: var(--accent); stroke-width: 2.5; }
  .mobileServiceContent > a { display: grid; grid-template-columns: 22px minmax(0,1fr) 18px; gap: 10px; align-items: center; min-height: 54px; padding: 11px 14px; border-radius: 10px; background: var(--accent); color: #fff; }
  .mobileServiceContent > a svg { width: 19px; height: 19px; }
  .mobileServiceContent > a b { font-size: 13px; line-height: 1.25; }

  .mobileTrustBlock { padding: 38px 20px 42px; background: #fff; }
  .mobileTrustBlock h2 { margin: 9px 0 22px; font-size: 29px; line-height: 1.08; letter-spacing: -.04em; }
  .mobileTrustBlock > div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .mobileTrustBlock p { display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: 9px; min-height: 69px; margin: 0; padding: 10px; border: 1px solid #ebe7df; border-radius: 13px; background: #faf9f6; }
  .mobileTrustBlock p:last-child { grid-column: 1 / -1; }
  .mobileTrustBlock i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #edf3e2; color: #6c922d; }
  .mobileTrustBlock i svg { width: 18px; height: 18px; }
  .mobileTrustBlock b { font-size: 12px; line-height: 1.25; }

  .mobileFinalContact { padding: 42px 20px 46px; background: #2b1738; color: #fff; }
  .mobileFinalContact > img { width: 140px; height: auto; }
  .mobileFinalContact h2 { max-width: 330px; margin: 24px 0 27px; color: #fff; font-size: 30px; line-height: 1.08; letter-spacing: -.04em; }
  .mobileFinalContact > div { display: grid; grid-template-columns: minmax(0,1fr) 54px; gap: 10px; }
  .mobileFinalContact > div > a:first-child { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 16px; border-radius: 10px; background: #76a52d; color: #fff; font-size: 14px; font-weight: 800; }
  .mobileFinalContact > div > a:first-child svg { width: 18px; height: 18px; }
  .mobileWhatsapp { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #28a745; color: #fff; }
  .mobileWhatsapp svg { width: 25px; height: 25px; }
}

@media (max-width: 370px) {
  .home .siteHeader .mainNav { grid-template-columns: minmax(75px,1fr) auto 40px; padding-inline: 12px; }
  .home .siteHeader .brand::before { width: 24px; height: 24px; flex-basis: 24px; }
  .home .siteHeader .brand::after { font-size: 20px; }
  .home .mobileQuoteCta { padding-inline: 9px; font-size: 10px; }
  .mobileTrustBlock > div { grid-template-columns: 1fr; }
  .mobileTrustBlock p:last-child { grid-column: auto; }
}

/* v3.1.1 — reference-style compact mobile composition. */
@media (max-width: 760px) {
  .home .siteHeader .brand::before,
  .home .siteHeader .brand::after { display: none; }
  .home .siteHeader .brand { width: clamp(94px, 27vw, 122px); height: 46px; padding: 0; }
  .home .siteHeader .brand img {
    display: block; width: 100%; height: auto;
    filter: brightness(0) saturate(100%) invert(13%) sepia(29%) saturate(1750%) hue-rotate(238deg) brightness(78%) contrast(98%);
  }
  .home .siteHeader .menu {
    display: grid !important; place-items: center; background: #fff !important; color: #2b1738 !important;
    border-color: #d7d0dc !important; opacity: 1 !important;
  }
  .home .siteHeader .menu svg { display: block !important; width: 21px; height: 21px; color: #2b1738; stroke: currentColor; }

  .mobileLandingHeroInfo,
  .mobileLandingHeroActions,
  .mobileSectionIntro { display: none !important; }
  .mobileLandingHero { background: #f5f3ee; }
  .mobileLandingHeroMedia { aspect-ratio: 2.05; min-height: 156px; max-height: 26vh; }
  .mobileLandingSpot { width: clamp(31px, 9vw, 39px); height: clamp(31px, 9vw, 39px); border-width: 2px; }
  .mobileLandingSpot svg { width: 45%; height: 45%; }

  .mobileServiceList {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(7px, 2.2vw, 11px);
    padding: clamp(8px, 2.5vw, 14px); background: #f5f3ee;
  }
  .mobileServiceCard {
    position: relative; min-width: 0; min-height: clamp(215px, 56vw, 245px); border-radius: 11px;
    box-shadow: 0 5px 18px rgba(42,34,27,.075);
  }
  .mobileServiceImage { position: absolute; inset: 0; aspect-ratio: auto; }
  .mobileServiceImage::after {
    height: 100%; background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.96) 47%, rgba(255,255,255,.52) 72%, rgba(255,255,255,.12) 100%);
  }
  .mobileServiceImage img { object-position: 72% center; }
  .mobileServiceImage > span { display: none; }
  .mobileServiceContent {
    position: relative; z-index: 2; display: flex; flex-direction: column; min-height: inherit;
    padding: clamp(10px, 2.8vw, 14px);
  }
  .mobileServiceHeading { grid-template-columns: clamp(26px, 7vw, 34px) minmax(0,1fr); gap: 7px; }
  .mobileServiceHeading > i { width: clamp(26px, 7vw, 34px); height: clamp(26px, 7vw, 34px); border-radius: 8px; background: transparent; }
  .mobileServiceHeading > i svg { width: 100%; height: 100%; stroke-width: 1.8; }
  .mobileServiceHeading h2 { margin: 0 0 2px; font-size: clamp(13px, 3.7vw, 17px); line-height: 1.05; }
  .mobileServiceHeading p { font-size: clamp(8px, 2.2vw, 10px); line-height: 1.25; }
  .mobileServiceContent ul {
    gap: clamp(3px, .9vw, 5px); margin: clamp(8px, 2vw, 11px) 0; padding: 0; border: 0;
  }
  .mobileServiceContent li { grid-template-columns: 13px minmax(0,1fr); gap: 4px; font-size: clamp(8px, 2.15vw, 10px); line-height: 1.2; }
  .mobileServiceContent li svg { width: 11px; height: 11px; padding: 2px; border-radius: 50%; background: var(--accent); color: #fff; stroke-width: 3; }
  .mobileServiceContent > a {
    grid-template-columns: minmax(0,1fr) 13px; gap: 5px; min-height: 35px; margin-top: auto;
    padding: 6px 8px; border-radius: 7px;
  }
  .mobileServiceContent > a svg { width: 13px; height: 13px; }
  .mobileServiceContent > a svg:first-child { display: none; }
  .mobileServiceContent > a b { font-size: clamp(8px, 2.15vw, 10px); line-height: 1.1; }

  .mobileTrustBlock { padding: 12px 10px 14px; }
  .mobileTrustBlock > span,
  .mobileTrustBlock > h2 { display: none; }
  .mobileTrustBlock > div { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 3px; }
  .mobileTrustBlock p,
  .mobileTrustBlock p:last-child {
    grid-column: auto; display: flex; flex-direction: column; justify-content: flex-start; gap: 4px;
    min-width: 0; min-height: 55px; padding: 4px 2px; border: 0; background: transparent; text-align: center;
  }
  .mobileTrustBlock i { width: 25px; height: 25px; background: transparent; color: #2b1738; }
  .mobileTrustBlock i svg { width: 22px; height: 22px; }
  .mobileTrustBlock b { font-size: clamp(6px, 1.75vw, 8px); line-height: 1.15; }

  .mobileFinalContact {
    display: grid; grid-template-columns: 82px minmax(0,1fr) auto; align-items: center; gap: 8px;
    padding: 10px 12px; background: #f4f2f5; color: #2b1738;
  }
  .mobileFinalContact > img {
    width: 78px; filter: brightness(0) saturate(100%) invert(13%) sepia(29%) saturate(1750%) hue-rotate(238deg) brightness(78%) contrast(98%);
  }
  .mobileFinalContact h2 { margin: 0; color: #2b1738; font-size: clamp(9px, 2.4vw, 12px); line-height: 1.25; letter-spacing: 0; text-align: center; }
  .mobileFinalContact > div { grid-template-columns: auto 36px; gap: 5px; }
  .mobileFinalContact > div > a:first-child { min-height: 36px; padding: 0 9px; border-radius: 7px; font-size: clamp(8px, 2vw, 10px); white-space: nowrap; }
  .mobileFinalContact > div > a:first-child svg { display: none; }
  .mobileWhatsapp { width: 36px; height: 36px; }
  .mobileWhatsapp svg { width: 19px; height: 19px; }
}

@media (max-width: 380px) {
  .mobileServiceCard { min-height: 218px; }
  .mobileFinalContact { grid-template-columns: 70px minmax(0,1fr) auto; padding-inline: 8px; }
  .mobileFinalContact > img { width: 68px; }
  .mobileFinalContact h2 { font-size: 8px; }
}

/* v3.1.2 — viewport-height fit and two-colour mobile logo. */
@media (max-width: 760px) {
  .home .mobileLanding { padding-top: 62px; }
  .home .siteHeader.topbar { min-height: 62px; height: 62px !important; }
  .home .siteHeader .mainNav {
    height: 62px !important; grid-template-columns: minmax(92px,1fr) auto 38px;
    gap: 7px; padding: 0 14px !important;
  }
  .home .siteHeader .brand {
    position: relative; width: 112px !important; height: 48px; overflow: hidden;
  }
  .home .siteHeader .brand::before {
    content: ''; display: block; position: absolute; z-index: 2; left: 0; top: 0;
    width: 36px; height: 48px; background: url('../images/dls-logo.png') left center / 112px auto no-repeat;
  }
  .home .siteHeader .brand img {
    display: block !important; width: 112px !important; height: 48px !important; object-fit: contain;
    filter: brightness(0) saturate(100%) invert(13%) sepia(29%) saturate(1750%) hue-rotate(238deg) brightness(78%) contrast(98%) !important;
  }
  .home .siteHeader .menu { width: 38px; height: 38px; }
  .home .mobileQuoteCta { min-height: 36px; padding: 0 11px; border-radius: 8px; }
  .home .siteHeader .mainNav nav.open { top: 62px !important; height: calc(100dvh - 62px) !important; }

  .mobileLandingHeroMedia {
    height: clamp(130px, 21dvh, 164px); min-height: 0; max-height: none; aspect-ratio: auto;
  }
  .mobileLandingHeroMedia > img { object-position: center 52%; }
  .mobileLandingSpot { width: clamp(28px, 8vw, 35px); height: clamp(28px, 8vw, 35px); }

  .mobileServiceList { gap: 6px; padding: 7px; }
  .mobileServiceCard { min-height: clamp(170px, 25.5dvh, 202px); }
  .mobileServiceContent { padding: clamp(8px, 2vw, 11px); }
  .mobileServiceHeading { grid-template-columns: 25px minmax(0,1fr); gap: 5px; }
  .mobileServiceHeading > i { width: 25px; height: 25px; }
  .mobileServiceHeading h2 { font-size: clamp(11px, 3.25vw, 15px); }
  .mobileServiceHeading p { font-size: clamp(6.5px, 1.85vw, 8.5px); line-height: 1.15; }
  .mobileServiceContent ul { gap: 2px; margin: 6px 0; }
  .mobileServiceContent li { grid-template-columns: 11px minmax(0,1fr); gap: 3px; font-size: clamp(6.5px, 1.8vw, 8.5px); line-height: 1.12; }
  .mobileServiceContent li svg { width: 9px; height: 9px; padding: 1.5px; }
  .mobileServiceContent > a { min-height: 30px; padding: 5px 7px; }
  .mobileServiceContent > a b { font-size: clamp(6.5px, 1.8vw, 8.5px); }

  .mobileTrustBlock { padding: 5px 8px 6px; }
  .mobileTrustBlock p,
  .mobileTrustBlock p:last-child { min-height: 43px; gap: 1px; padding: 2px 1px; }
  .mobileTrustBlock i { width: 21px; height: 21px; }
  .mobileTrustBlock i svg { width: 18px; height: 18px; }
  .mobileTrustBlock b { font-size: clamp(5.5px, 1.5vw, 7px); }

  .mobileFinalContact { position: relative; min-height: 43px; padding: 5px 8px; grid-template-columns: 72px minmax(0,1fr) auto; gap: 5px; }
  .mobileFinalContact::before {
    content: ''; position: absolute; z-index: 2; left: 8px; top: 50%; width: 22px; height: 32px;
    transform: translateY(-50%); background: url('../images/dls-logo.png') left center / 68px auto no-repeat;
  }
  .mobileFinalContact > img { width: 68px; }
  .mobileFinalContact h2 { font-size: clamp(7px, 1.9vw, 9px); }
  .mobileFinalContact > div { grid-template-columns: auto 32px; gap: 4px; }
  .mobileFinalContact > div > a:first-child { min-height: 32px; padding: 0 7px; font-size: clamp(6.5px, 1.75vw, 8px); }
  .mobileWhatsapp { width: 32px; height: 32px; }
  .mobileWhatsapp svg { width: 17px; height: 17px; }
}

@media (max-width: 380px) and (max-height: 700px) {
  .mobileLandingHeroMedia { height: 126px; }
  .mobileServiceCard { min-height: 166px; }
  .mobileServiceHeading h2 { font-size: 11px; }
  .mobileServiceHeading p,
  .mobileServiceContent li,
  .mobileServiceContent > a b { font-size: 6.4px; }
}

/* v3.1.6 — exact CTA alignment within each two-card row. */
@media (max-width: 760px) {
  .mobileServiceCard { display: flex; align-self: stretch; }
  .mobileServiceContent { flex: 1 1 auto; width: 100%; height: auto; align-self: stretch; }
  .mobileServiceContent > a { margin-top: auto !important; }
}

/* v3.1.7 — larger hero and collision-safe hotspot labels. */
@media (max-width: 760px) {
  .mobileLandingHeroMedia { height: clamp(190px, 28dvh, 230px); }
  .mobileLandingSpot { z-index: 3; }
  .mobileLandingSpot.isActive { z-index: 30; }
  .mobileLandingSpot::after {
    left: calc(100% + 7px); top: 50%; transform: translateY(-50%) scale(.94);
    width: max-content; max-width: 126px; padding: 5px 8px; font-size: 9px;
    border-color: rgba(43,23,56,.2); box-shadow: 0 5px 15px rgba(43,23,56,.22);
  }
  .mobileLandingSpot.isActive::after { transform: translateY(-50%) scale(1); }
  .mobileLandingSpot.labelLeft::after { left: auto; right: calc(100% + 7px); }
}

@media (max-width: 380px) and (max-height: 700px) {
  .mobileLandingHeroMedia { height: 166px; }
}

/* v3.1.5 — taller hero, slimmer proof strip. */
@media (max-width: 760px) {
  .mobileLandingHeroMedia { height: clamp(146px, 21dvh, 170px); }
  .mobileTrustBlock { padding: 2px 7px 3px; }
  .mobileTrustBlock p,
  .mobileTrustBlock p:last-child { min-height: 34px; gap: 0; padding: 1px; }
  .mobileTrustBlock i { width: 18px; height: 18px; }
  .mobileTrustBlock i svg { width: 15px; height: 15px; }
  .mobileTrustBlock b { font-size: clamp(5px, 1.35vw, 6.5px); line-height: 1.05; }
}

@media (max-width: 380px) and (max-height: 700px) {
  .mobileLandingHeroMedia { height: 132px; }
  .mobileTrustBlock p,
  .mobileTrustBlock p:last-child { min-height: 31px; }
}

/* v3.1.4 — readable typography with row-aligned card actions. */
@media (max-width: 760px) {
  .mobileLandingHeroMedia { height: clamp(122px, 18.5dvh, 146px); }

  .mobileServiceList { align-items: stretch; }
  .mobileServiceCard { height: 100%; min-height: 196px; }
  .mobileServiceImage::after {
    background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 48%, rgba(255,255,255,.48) 72%, rgba(255,255,255,.06) 100%);
  }
  .mobileServiceContent { height: 100%; min-height: 196px; padding: 10px; }
  .mobileServiceHeading { grid-template-columns: 27px minmax(0,1fr); gap: 6px; }
  .mobileServiceHeading > i { width: 27px; height: 27px; }
  .mobileServiceHeading h2 { color: #111; font-size: clamp(13px, 3.45vw, 16px); line-height: 1.08; }
  .mobileServiceHeading p { color: #292929; font-size: clamp(8px, 2.15vw, 10px); line-height: 1.28; font-weight: 540; }
  .mobileServiceContent ul { gap: 3px; margin: 7px 0 5px; }
  .mobileServiceContent li { color: #111; font-size: clamp(8px, 2.15vw, 10px); line-height: 1.22; font-weight: 560; }
  .mobileServiceContent > a { margin-top: auto; min-height: 32px; }
  .mobileServiceContent > a b { font-size: clamp(7.5px, 2vw, 9px); line-height: 1.15; }
}

@media (max-width: 380px) and (max-height: 700px) {
  .mobileLandingHeroMedia { height: 116px; }
  .mobileServiceCard,
  .mobileServiceContent { min-height: 184px; }
  .mobileServiceHeading h2 { font-size: 12px; }
  .mobileServiceHeading p,
  .mobileServiceContent li { font-size: 7.5px; line-height: 1.18; }
}

/* v3.1.3 — hotspot labels, denser cards and stronger final actions. */
@media (max-width: 760px) {
  .mobileLandingSpot::after {
    content: attr(data-label); position: absolute; z-index: 5; left: 50%; top: calc(100% + 5px);
    transform: translateX(-50%) scale(.94); width: max-content; max-width: 112px; padding: 4px 7px;
    border: 1px solid rgba(43,23,56,.14); border-radius: 6px; background: rgba(255,255,255,.96);
    color: #2b1738; box-shadow: 0 4px 12px rgba(43,23,56,.15); font-size: 8px; font-weight: 800;
    line-height: 1.15; white-space: normal; text-align: center; opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
  }
  .mobileLandingSpot.isActive::after { opacity: 1; visibility: visible; transform: translateX(-50%) scale(1); }

  .mobileServiceCard { min-height: 0; }
  .mobileServiceImage img {
    filter: saturate(1.22) contrast(1.1) brightness(1.04);
    transform: scale(1.015);
  }
  .mobileServiceImage::after {
    background: linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.89) 42%, rgba(255,255,255,.35) 68%, rgba(255,255,255,.04) 100%);
  }
  .mobileServiceContent { min-height: 188px; }
  .mobileServiceContent ul { margin-bottom: 3px; }
  .mobileServiceContent > a { margin-top: 2px; }

  .mobileFinalContact {
    min-height: 64px; grid-template-columns: 72px minmax(0,1fr) auto; padding-block: 6px;
  }
  .mobileFinalContact > div { grid-template-columns: minmax(106px,auto) 50px; gap: 7px; }
  .mobileFinalContact > div > a:first-child {
    min-height: 50px; padding: 0 12px; border-radius: 9px; font-size: clamp(8px, 2.25vw, 10px);
  }
  .mobileWhatsapp { width: 50px; height: 50px; }
  .mobileWhatsapp svg { width: 26px; height: 26px; }
}

@media (max-width: 380px) and (max-height: 700px) {
  .mobileServiceContent { min-height: 169px; }
  .mobileFinalContact { min-height: 58px; }
  .mobileFinalContact > div { grid-template-columns: minmax(94px,auto) 44px; }
  .mobileFinalContact > div > a:first-child { min-height: 44px; padding-inline: 9px; }
  .mobileWhatsapp { width: 44px; height: 44px; }
}

@media (min-width: 1025px) {
  .desktopNavigation { display: flex !important; }
  .desktopNavigation .navDropdown:hover .navDropdownMenu,
  .desktopNavigation .navDropdown:focus-within .navDropdownMenu,
  .desktopNavigation .navDropdown.submenuOpen .navDropdownMenu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
  .desktopNavigation .navDropdownToggle { cursor: pointer; }
  .heroModel .spot {
    left: clamp(46px, var(--spot-x, 50%), calc(100% - 46px)) !important;
    top: clamp(132px, var(--spot-y, 50%), calc(100% - 110px)) !important;
  }
}

@media (max-width: 782px) {
  body.admin-bar .siteHeader { top: 46px; }
  body.admin-bar .siteHeader .mainNav nav.open { top: 122px !important; height: calc(100dvh - 122px); }
}

@media (max-width: 600px) {
  body.admin-bar .siteHeader { top: 0; }
  body.admin-bar .siteHeader .mainNav nav.open { top: 76px !important; height: calc(100dvh - 76px); }
  body.home.admin-bar .siteHeader .mainNav nav.open { top: 72px !important; height: calc(100dvh - 72px); }
}

@media (max-width: 1024px) {
  .heroModel .spot {
    left: clamp(22px, var(--spot-x, 50%), calc(100% - 22px)) !important;
    top: clamp(22px, var(--spot-y, 50%), calc(100% - 22px)) !important;
  }

  /* The desktop WordPress background fallback is intentionally disabled once
     the responsive scene switches to an ordinary image + content flow. */
  .hero3d > .heroModel {
    background-color: #2b1738 !important;
    background-image: none !important;
  }

  .hero3d .mobileSpotInfo,
  .hero3d .heroFloatingActions,
  .subHeroFull .mobileSpotInfo,
  .subHeroFull .subHeroFloatingActions {
    background-color: #2b1738;
  }

  /* Keep the active hotspot icon visible against its purple background. */
  .subHeroFull .heroHotspot.selected i,
  .subHeroFull .heroHotspot.selected i svg {
    color: #c8db83;
    stroke: currentColor;
  }
}

/* v3.1.8 cascade lock — must remain the final mobile override. */
@media (max-width: 760px) {
  .mobileLandingHeroMedia {
    height: clamp(220px, 60vw, 246px) !important;
    min-height: 220px !important;
    max-height: 246px !important;
    aspect-ratio: auto !important;
  }
  .mobileLandingHeroMedia > img {
    width: 100%; height: 100%; object-fit: cover; object-position: center 52%;
  }
  .mobileLandingSpot { z-index: 4; }
  .mobileLandingSpot.isActive { z-index: 60; }
  .mobileLandingSpot::after {
    z-index: 61; left: calc(100% + 7px); right: auto; top: 50%;
    transform: translateY(-50%) scale(.94); width: max-content; max-width: 128px;
    white-space: normal;
  }
  .mobileLandingSpot.isActive::after {
    opacity: 1; visibility: visible; transform: translateY(-50%) scale(1);
  }
  .mobileLandingSpot.labelLeft::after { left: auto; right: calc(100% + 7px); }
}

@media (max-width: 380px) and (max-height: 700px) {
  .mobileLandingHeroMedia {
    height: 210px !important; min-height: 210px !important; max-height: 210px !important;
  }
}

/* v3.2.0 — mobile homepage header, service directions and social contacts. */
.mobileHeaderContacts { display: none; }
@media (max-width: 760px) {
  .home .siteHeader.topbar {
    position: absolute !important; height: 64px !important; min-height: 64px !important;
    background: rgba(255,255,255,.96) !important; border-bottom: 1px solid rgba(43,23,56,.10) !important;
    backdrop-filter: blur(12px) !important;
  }
  .home .siteHeader .mainNav {
    display: flex !important; align-items: center; gap: 7px; height: 64px !important;
    padding: 0 8px !important; overflow: visible; background: transparent !important;
  }
  .home .siteHeader .brand {
    position: relative; display: block; flex: 0 0 94px; width: 94px; height: 48px; padding: 0;
  }
  .home .siteHeader .brand::after { display: none !important; }
  .home .siteHeader .brand::before {
    content: ''; position: absolute; z-index: 2; display: block !important;
    left: 0; top: 50%; width: 31px; height: 44px; transform: translateY(-50%);
    border-radius: 0; background: url('../images/dls-logo.png') left center / 94px auto no-repeat;
  }
  .home .siteHeader .brand img {
    display: block !important; width: 94px !important; height: 48px !important; object-fit: contain;
    filter: brightness(0) saturate(100%) invert(13%) sepia(29%) saturate(1750%) hue-rotate(238deg) brightness(78%) contrast(98%) !important;
  }
  .home .siteHeader .desktopNavigation,
  .home .siteHeader .menu,
  .home .mobileQuoteCta { display: none !important; }
  .home .siteHeader .mobileNavigation {
    position: static !important; inset: auto !important; display: flex !important; flex: 1 1 auto;
    align-items: center; justify-content: flex-start; gap: 13px !important; width: auto; height: auto !important;
    min-width: 0; max-width: none; padding: 0 2px !important; overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-inline: contain; scrollbar-width: none; background: transparent !important;
    border: 0; box-shadow: none !important; white-space: nowrap;
  }
  .home .siteHeader .mobileNavigation::-webkit-scrollbar { display: none; }
  .home .siteHeader .mobileNavigation > a {
    display: block !important; flex: 0 0 auto; width: auto !important; min-height: 0;
    padding: 7px 0 !important; color: #2b1738 !important; font-size: 8.5px !important;
    font-weight: 750; line-height: 1; text-shadow: none !important; white-space: nowrap;
  }
  .home .siteHeader .mobileNavigation > a::after { display: none !important; }
  .mobileHeaderContacts { display: flex; flex: 0 0 auto; align-items: center; gap: 3px; }
  .mobileHeaderContacts a {
    display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
    background: #f1eee8; color: #2b1738;
  }
  .mobileHeaderContacts svg { width: 12px; height: 12px; }
  .home .mobileLanding { padding-top: 64px !important; }

  .mobileFinalContact .mobileContactActions {
    display: grid !important; grid-template-columns: minmax(0,1fr) repeat(3, 44px) !important;
    align-items: center; gap: 7px !important;
  }
  .mobileFinalContact .mobileContactPrimary {
    display: flex; align-items: center; justify-content: space-between; min-height: 44px !important;
    padding: 0 11px !important; border-radius: 9px; background: #76a52d; color: #fff;
    font-size: clamp(7.5px, 2.1vw, 10px) !important; font-weight: 800;
  }
  .mobileFinalContact .mobileContactPrimary svg { width: 15px; height: 15px; }
  .mobileFinalContact .mobileSocial {
    display: grid; place-items: center; width: 44px !important; height: 44px !important;
    border-radius: 50%; color: #fff;
  }
  .mobileFinalContact .mobileSocial svg { width: 21px; height: 21px; }
  .mobileWhatsapp { background: #25d366; }
  .mobileFacebook { background: #1877f2; }
  .mobileInstagram { background: linear-gradient(135deg,#833ab4,#fd1d1d 55%,#fcb045); }
}

@media (max-width: 370px) {
  .home .siteHeader .mainNav { gap: 5px; padding-inline: 6px !important; }
  .home .siteHeader .brand { flex-basis: 84px; width: 84px; }
  .home .siteHeader .brand img { width: 84px !important; }
  .home .siteHeader .brand::before { width: 28px; background-size: 84px auto; }
  .home .siteHeader .mobileNavigation { gap: 10px !important; }
  .mobileHeaderContacts a { width: 22px; height: 22px; }
  .mobileFinalContact .mobileContactActions { grid-template-columns: minmax(0,1fr) repeat(3, 40px) !important; gap: 5px !important; }
  .mobileFinalContact .mobileSocial { width: 40px !important; height: 40px !important; }
}

/* v3.2.1 — keep the exposed mobile navigation on one strict row. */
@media (max-width: 760px) {
  .home .siteHeader,
  .home .siteHeader .mainNav { overflow: hidden !important; }
  .home .siteHeader .mobileNavigation {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-content: center !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 44px !important;
    max-height: 44px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  .home .siteHeader .mobileNavigation > a {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: max-content !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .home .mobileHeaderContacts { height: 44px; }
  .home .mobileHeaderContacts a:focus,
  .home .mobileHeaderContacts a:focus-visible {
    outline: 0 !important;
    box-shadow: inset 0 0 0 2px rgba(43,23,56,.14);
  }
}

/* v3.2.2 — translucent header layered over the mobile hero image. */
@media (max-width: 760px) {
  .home .siteHeader.topbar {
    background: rgba(255,255,255,.72) !important;
    border-bottom-color: rgba(255,255,255,.48) !important;
    box-shadow: 0 5px 18px rgba(31,20,37,.08) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.16) !important;
    backdrop-filter: blur(12px) saturate(1.16) !important;
  }
  .home .mobileLanding { padding-top: 0 !important; }
  .home .mobileLandingHeroMedia {
    height: clamp(276px, 72vw, 304px) !important;
    min-height: 276px !important;
    max-height: 304px !important;
  }
  .home .mobileHeaderContacts a { background: rgba(255,255,255,.58); }
}

@media (max-width: 380px) and (max-height: 700px) {
  .home .mobileLandingHeroMedia {
    height: 266px !important;
    min-height: 266px !important;
    max-height: 266px !important;
  }
}

/* v3.2.3 cascade lock — final requested mobile proportions. */
@media (max-width: 760px) {
  .home .siteHeader.topbar {
    background: rgba(255,255,255,.46) !important;
    border-bottom-color: rgba(255,255,255,.32) !important;
    box-shadow: 0 4px 14px rgba(31,20,37,.055) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.12) !important;
    backdrop-filter: blur(8px) saturate(1.12) !important;
  }
  .home .mobileLandingHeroMedia {
    height: clamp(316px, 80vw, 350px) !important;
    min-height: 316px !important;
    max-height: 350px !important;
  }
  .home .mobileServiceCard { min-height: 0 !important; }
  .home .mobileServiceContent { min-height: 170px !important; padding: 7px 8px !important; }
  .home .mobileServiceContent ul {
    gap: 1px !important; margin: 4px 0 3px !important; padding: 0 !important; border: 0 !important;
  }
  .home .mobileServiceContent > a { min-height: 28px !important; padding: 4px 7px !important; }
}

@media (max-width: 380px) and (max-height: 700px) {
  .home .mobileLandingHeroMedia {
    height: 294px !important; min-height: 294px !important; max-height: 294px !important;
  }
  .home .mobileServiceContent { min-height: 160px !important; }
}

/* v3.2.4 — extra hero clearance beneath the translucent header. */
@media (max-width: 760px) {
  .home .mobileLandingHeroMedia {
    height: clamp(340px, 88vw, 382px) !important;
    min-height: 340px !important;
    max-height: 382px !important;
  }
  .home .mobileLandingSpot {
    top: clamp(92px, var(--y), calc(100% - 24px)) !important;
  }
}

@media (max-width: 380px) and (max-height: 700px) {
  .home .mobileLandingHeroMedia {
    height: 324px !important; min-height: 324px !important; max-height: 324px !important;
  }
}

/* v3.3.0 final header lock: identical compact header on every mobile page. */
@media (max-width:760px) {
  body .siteHeader.topbar { min-height:72px!important; height:72px!important; background:rgba(255,255,255,.46)!important; border:0!important; box-shadow:0 4px 14px rgba(31,20,37,.055)!important; backdrop-filter:blur(8px) saturate(1.12)!important; }
  body .siteHeader .mainNav { display:grid!important; grid-template-columns:132px minmax(0,1fr) auto!important; gap:8px!important; height:72px!important; padding:0 10px!important; background:transparent!important; }
  body .siteHeader .brand { position:relative!important; display:block!important; width:132px!important; height:58px!important; overflow:hidden!important; }
  body .siteHeader .brand img { display:block!important; width:132px!important; height:58px!important; object-fit:contain!important; filter:brightness(0) saturate(100%) invert(14%) sepia(22%) saturate(1860%) hue-rotate(238deg) brightness(91%) contrast(94%) drop-shadow(0 1px 2px rgba(255,255,255,.95))!important; }
  body .siteHeader .brand::before { content:''!important; display:block!important; position:absolute!important; z-index:2!important; left:0!important; top:50%!important; width:42px!important; height:58px!important; transform:translateY(-50%)!important; background:url('../images/dls-logo.png') left center / 132px auto no-repeat!important; }
  body .siteHeader .brand::after { display:none!important; }
  body .siteHeader .desktopNavigation,body .siteHeader .menu { display:none!important; }
  body .siteHeader .mobileNavigation { position:static!important; display:flex!important; min-width:0!important; width:auto!important; height:auto!important; overflow-x:auto!important; overflow-y:hidden!important; gap:14px!important; padding:0!important; background:transparent!important; box-shadow:none!important; white-space:nowrap!important; scrollbar-width:none!important; }
  body .siteHeader .mobileNavigation>a { flex:0 0 auto!important; width:auto!important; padding:8px 0!important; color:#2b1738!important; font-size:10px!important; font-weight:800!important; text-shadow:0 1px 2px rgba(255,255,255,.95)!important; }
  body .mobileHeaderContacts { display:flex!important; }
}

/* v3.3.2 — consolidated responsive layer. This intentionally wins over legacy mobile iterations. */
html,body { max-width:100%; overflow-x:clip; }

@media (min-width:761px) and (max-width:1100px) {
  .siteHeader .mainNav { padding-inline:2.5%!important; }
  .siteHeader .mainNav .brand img { width:160px!important; }
  .siteHeader .mainNav nav { gap:11px!important; }
  .siteHeader .mainNav nav>a,.siteHeader .navDropdown>button { font-size:11px!important; }
  .siteHeader .mainNav .navCta { padding:12px 15px!important; }
  .serviceRail { gap:12px; }
  .serviceBody { padding-inline:20px; }
}

@media (max-width:760px) {
  body .siteHeader.topbar,body .siteHeader .mainNav { height:72px!important; min-height:72px!important; }
  body .siteHeader .mainNav { grid-template-columns:118px minmax(0,1fr) auto!important; gap:7px!important; padding-inline:9px!important; }
  body .siteHeader .brand { width:118px!important; height:54px!important; }
  body .siteHeader .brand img { width:118px!important; height:54px!important; }
  body .siteHeader .brand::before { width:38px!important; height:54px!important; background-size:118px auto!important; }
  body .siteHeader .mobileNavigation { gap:12px!important; }
  body .siteHeader .mobileNavigation>a { font-size:9.5px!important; line-height:1.15!important; }
  body .mobileHeaderContacts { gap:3px!important; }
  body .mobileHeaderContacts a { width:30px!important; height:30px!important; }

  .home .mobileLanding { padding-top:0!important; }
  .home .mobileLandingHeroMedia {
    height:clamp(340px,92vw,402px)!important;
    min-height:340px!important;
    max-height:402px!important;
    aspect-ratio:auto!important;
  }
  .home .mobileLandingHeroMedia>img { object-position:center center!important; }
  .home .mobileLandingSpot { top:clamp(94px,var(--y),calc(100% - 25px))!important; }
  .home .mobileLandingSpot::after { max-width:112px!important; font-size:8px!important; }

  .home .mobileServiceList {
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-rows:1fr!important;
    align-items:stretch!important;
    gap:8px!important;
    padding:8px!important;
  }
  .home .mobileServiceCard { display:flex!important; height:100%!important; min-height:0!important; border-radius:11px!important; }
  .home .mobileServiceImage { position:absolute!important; inset:0!important; }
  .home .mobileServiceContent {
    position:relative!important; z-index:2!important; display:flex!important; flex-direction:column!important;
    width:100%!important; height:100%!important; min-height:198px!important; padding:10px!important;
  }
  .home .mobileServiceHeading { grid-template-columns:27px minmax(0,1fr)!important; gap:6px!important; }
  .home .mobileServiceHeading>i { width:27px!important; height:27px!important; }
  .home .mobileServiceHeading h2 { margin:0 0 2px!important; font-size:clamp(12px,3.55vw,16px)!important; line-height:1.05!important; overflow-wrap:anywhere; }
  .home .mobileServiceHeading p { font-size:clamp(7.5px,2.05vw,9.5px)!important; line-height:1.2!important; }
  .home .mobileServiceContent ul { gap:2px!important; margin:7px 0 5px!important; padding:0!important; }
  .home .mobileServiceContent li { grid-template-columns:11px minmax(0,1fr)!important; gap:3px!important; font-size:clamp(7.5px,2.05vw,9.5px)!important; line-height:1.18!important; }
  .home .mobileServiceContent> a { min-height:34px!important; margin-top:auto!important; padding:6px 8px!important; }
  .home .mobileServiceContent>a b { font-size:clamp(7px,1.95vw,9px)!important; line-height:1.1!important; }

  .home .mobileTrustBlock { padding:5px 8px 6px!important; }
  .home .mobileTrustBlock>div { grid-template-columns:repeat(5,minmax(0,1fr))!important; gap:2px!important; }
  .home .mobileTrustBlock p,.home .mobileTrustBlock p:last-child { min-height:42px!important; padding:2px 1px!important; gap:2px!important; }
  .home .mobileTrustBlock i { width:21px!important; height:21px!important; }
  .home .mobileTrustBlock b { font-size:clamp(5.5px,1.45vw,7px)!important; line-height:1.08!important; overflow-wrap:anywhere; }

  .home .mobileFinalContact {
    display:grid!important; grid-template-columns:70px minmax(0,1fr) minmax(0,auto)!important;
    align-items:center!important; gap:6px!important; min-height:58px!important; padding:6px 8px!important;
  }
  .home .mobileFinalContact>img { width:68px!important; }
  .home .mobileFinalContact h2 { font-size:clamp(7px,1.8vw,9px)!important; }
  .home .mobileFinalContact .mobileContactActions { grid-template-columns:minmax(88px,1fr) repeat(3,38px)!important; gap:4px!important; }
  .home .mobileFinalContact .mobileContactPrimary { min-height:38px!important; padding-inline:8px!important; font-size:clamp(7px,1.8vw,9px)!important; }
  .home .mobileFinalContact .mobileSocial { width:38px!important; height:38px!important; }

  .subHero.subHeroFull,.contactHero.contactHeroFull { height:clamp(620px,100svh,760px)!important; min-height:620px!important; }
  .subHeroFull .heroHotspot { width:44px!important; height:44px!important; }
  .subHeroFull .heroHotspot i { width:29px!important; height:29px!important; }
  .subHeroFull .heroHotspot i svg { width:19px!important; height:19px!important; }
  .subHeroFull .mobileSpotInfo { left:14px!important; right:14px!important; }
  .subHeroFloatingActions { left:14px!important; right:14px!important; bottom:14px!important; }

  .aboutPage { padding-top:72px!important; }
  .aboutHero { padding:48px 6% 38px!important; }
  .aboutHero h1 { font-size:clamp(38px,11vw,52px)!important; line-height:1.02!important; overflow-wrap:anywhere; }
  .aboutHero p { font-size:17px!important; line-height:1.45!important; }
  .aboutContent { gap:34px!important; padding:38px 6% 68px!important; }
  .aboutImages { width:100%!important; }
  .aboutImages img { min-width:0!important; }
  .contactFormSection input,.contactFormSection select,.contactFormSection textarea { min-width:0; }
}

@media (max-width:360px) {
  body .siteHeader .mainNav { grid-template-columns:108px minmax(0,1fr) auto!important; }
  body .siteHeader .brand,body .siteHeader .brand img { width:108px!important; }
  body .siteHeader .brand::before { width:35px!important; background-size:108px auto!important; }
  .home .mobileLandingHeroMedia { height:330px!important; min-height:330px!important; }
  .home .mobileServiceContent { min-height:190px!important; padding:8px!important; }
  .home .mobileFinalContact { grid-template-columns:62px minmax(0,1fr)!important; }
  .home .mobileFinalContact>img { width:60px!important; }
  .home .mobileFinalContact h2 { display:none!important; }
}

/* v3.3.3 — one canonical DLS logo asset throughout the site. */
.siteHeader .brand img,.siteFooter img,.mobileFinalContact>img {
  object-fit:contain;
  object-position:left center;
}
.siteHeader .brand img {
  filter:drop-shadow(0 2px 7px rgba(18,9,22,.48))!important;
}
@media (min-width:761px) {
  body.page-template-page-over-ons .siteHeader .brand img {
    filter:brightness(0) saturate(100%) invert(14%) sepia(22%) saturate(1860%) hue-rotate(238deg) brightness(91%) contrast(94%) drop-shadow(0 2px 6px rgba(43,23,56,.18))!important;
  }
}
@media (max-width:760px) {
  body .siteHeader .brand img,.home .mobileFinalContact>img {
    filter:brightness(0) saturate(100%) invert(14%) sepia(22%) saturate(1860%) hue-rotate(238deg) brightness(91%) contrast(94%) drop-shadow(0 2px 5px rgba(43,23,56,.16))!important;
  }
}

/* v3.3.4 cascade lock — superseded by v3.3.5 below. */
.siteHeader .brand::before,.siteHeader .brand::after { display:none!important; }
.siteHeader .brandLogo { position:absolute!important; inset:0!important; width:100%!important; height:100%!important; object-fit:contain!important; object-position:left center!important; }
.siteHeader .brandLogoPurple { display:none!important; }
@media (min-width:761px) {
  body.page-template-page-over-ons .siteHeader .brandLogoWhite { display:none!important; }
  body.page-template-page-over-ons .siteHeader .brandLogoPurple { display:block!important; filter:drop-shadow(0 2px 6px rgba(43,23,56,.18))!important; }
}
@media (max-width:760px) {
  body .siteHeader.topbar { height:72px!important; min-height:72px!important; background:rgba(255,255,255,.78)!important; }
  body .siteHeader .mainNav { display:grid!important; grid-template-columns:132px minmax(0,1fr) auto!important; gap:7px!important; height:72px!important; min-height:72px!important; padding:0 9px!important; overflow:hidden!important; }
  body .siteHeader .brand { position:relative!important; display:block!important; width:132px!important; height:58px!important; overflow:visible!important; }
  body .siteHeader .brandLogoWhite { display:none!important; }
  body .siteHeader .brandLogoPurple { display:block!important; filter:drop-shadow(0 2px 5px rgba(43,23,56,.18))!important; }
  body .siteHeader .desktopNavigation,body .siteHeader .menu { display:none!important; }
  body .siteHeader .mobileNavigation { position:static!important; inset:auto!important; display:flex!important; flex-direction:row!important; align-items:center!important; justify-content:flex-start!important; min-width:0!important; width:auto!important; height:56px!important; min-height:0!important; overflow-x:auto!important; overflow-y:hidden!important; gap:14px!important; padding:0!important; background:transparent!important; box-shadow:none!important; white-space:nowrap!important; }
  body .siteHeader .mobileNavigation>a { display:flex!important; flex:0 0 auto!important; width:auto!important; min-height:0!important; padding:8px 0!important; color:#432052!important; font-size:9.5px!important; line-height:1.15!important; white-space:nowrap!important; }
  body .mobileHeaderContacts { display:flex!important; flex-direction:row!important; flex:0 0 auto!important; gap:4px!important; }
  .subHero.subHeroFull,.contactHero.contactHeroFull { display:block!important; height:auto!important; min-height:0!important; max-height:none!important; padding:72px 0 0!important; overflow:visible!important; }
  .subHeroFull .subHeroVisual,.contactHeroFull .contactHeroImage { position:relative!important; inset:auto!important; width:100%!important; height:auto!important; min-height:0!important; max-height:none!important; overflow:visible!important; }
  .subHeroFull .responsiveScene,.subHeroFull .scenePhoto { position:relative!important; width:100%!important; height:auto!important; }
  .subHeroFull .scenePhoto>img,.contactHeroFull .contactHeroImage>img { position:static!important; inset:auto!important; display:block!important; width:100%!important; height:auto!important; min-height:0!important; max-height:none!important; object-fit:contain!important; transform:none!important; }
  .subHeroFull .mobileSpotInfo { position:static!important; margin:0!important; padding:14px 18px 8px!important; }
  .subHeroFloatingActions { position:static!important; display:grid!important; grid-template-columns:1fr!important; left:auto!important; right:auto!important; bottom:auto!important; transform:none!important; width:auto!important; margin:0!important; padding:10px 18px 20px!important; background:#2b1738!important; }
  .subHeroFloatingActions>a { width:100%!important; min-width:0!important; }
}
@media (max-width:370px) {
  body .siteHeader .mainNav { grid-template-columns:118px minmax(0,1fr) auto!important; }
  body .siteHeader .brand { width:118px!important; height:54px!important; }
}

/* v3.3.5 final cascade lock — one logo and the same mobile header everywhere. */
.siteHeader .brandPicture {
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
}
body .siteHeader .brandPicture>.brandLogo {
  position:static!important;
  inset:auto!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:left center!important;
  filter:drop-shadow(0 2px 6px rgba(31,15,39,.22))!important;
}

/* v3.3.7 — restore the intrinsic desktop space lost when the logo became a picture. */
@media (min-width:761px) {
  body .siteHeader .brand {
    position:relative!important;
    display:block!important;
    flex:0 0 clamp(160px,14vw,190px)!important;
    width:clamp(160px,14vw,190px)!important;
    height:66px!important;
    overflow:visible!important;
  }
  body .siteHeader .brandPicture {
    width:100%!important;
    height:100%!important;
  }
  body .siteHeader .brandPicture>.brandLogo {
    width:100%!important;
    height:100%!important;
  }
  body.page-template-page-over-ons .siteHeader .brandPicture>.brandLogo {
    filter:drop-shadow(0 2px 6px rgba(43,23,56,.18))!important;
  }

  body .siteHeader .mainNav {
    display:grid!important;
    grid-template-columns:clamp(160px,14vw,190px) minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:clamp(14px,2vw,30px)!important;
  }
  body .siteHeader .desktopNavigation {
    position:static!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:clamp(13px,1.7vw,28px)!important;
    width:auto!important;
    min-width:0!important;
    height:auto!important;
    padding:0!important;
    background:transparent!important;
    box-shadow:none!important;
    white-space:nowrap!important;
  }
  body .siteHeader .desktopNavigation>a {
    flex:0 0 auto!important;
    width:auto!important;
    padding:10px 0!important;
    font-size:clamp(10px,.9vw,13px)!important;
    font-weight:800!important;
  }
  body .siteHeader .mobileNavigation,
  body .siteHeader .menu,
  body .siteHeader .mobileNavSwipeHint { display:none!important; }
  body .siteHeader .mobileHeaderContacts {
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:7px!important;
  }
  body .siteHeader .mobileHeaderContacts a {
    display:grid!important;
    place-items:center!important;
    width:36px!important;
    height:36px!important;
    border:1px solid rgba(255,255,255,.55)!important;
    border-radius:50%!important;
    background:rgba(255,255,255,.14)!important;
    color:#fff!important;
  }
  body .siteHeader .mobileHeaderContacts svg { width:15px!important; height:15px!important; }
  body.page-template-page-over-ons .siteHeader .mobileHeaderContacts a {
    border-color:rgba(67,32,82,.18)!important;
    background:#fff!important;
    color:#432052!important;
  }

  .home .heroFloatingActions { display:none!important; }
  .home .desktopLanding #diensten-legacy { display:none!important; }
  .home .desktopServiceGrid {
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    grid-auto-rows:1fr!important;
    align-items:stretch!important;
    gap:14px!important;
    padding:22px 3.5% 42px!important;
    background:#f5f3ee!important;
  }
  .home .desktopServiceGrid .mobileServiceCard {
    position:relative!important;
    display:flex!important;
    min-width:0!important;
    min-height:340px!important;
    height:100%!important;
    overflow:hidden!important;
    border:1px solid rgba(67,32,82,.14)!important;
    border-radius:18px!important;
    background:#fff!important;
    box-shadow:0 15px 36px rgba(40,34,26,.10)!important;
  }
  .home .desktopServiceGrid .mobileServiceImage {
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    overflow:hidden!important;
  }
  .home .desktopServiceGrid .mobileServiceImage::before {
    content:''!important;
    position:absolute!important;
    z-index:1!important;
    inset:0!important;
    background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.92) 56%,rgba(255,255,255,.38) 100%)!important;
  }
  .home .desktopServiceGrid .mobileServiceImage img {
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
    filter:saturate(1.08) contrast(1.04)!important;
  }
  .home .desktopServiceGrid .mobileServiceImage>span {
    position:absolute!important;
    z-index:3!important;
    top:14px!important;
    right:14px!important;
    left:auto!important;
    padding:6px 8px!important;
    border-radius:6px!important;
    background:rgba(255,255,255,.92)!important;
    color:var(--accent)!important;
    font-size:10px!important;
    font-weight:900!important;
  }
  .home .desktopServiceGrid .mobileServiceContent {
    position:relative!important;
    z-index:2!important;
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    min-width:0!important;
    height:100%!important;
    padding:22px 18px 18px!important;
  }
  .home .desktopServiceGrid .mobileServiceHeading {
    display:grid!important;
    grid-template-columns:38px minmax(0,1fr)!important;
    align-items:start!important;
    gap:9px!important;
  }
  .home .desktopServiceGrid .mobileServiceHeading>i {
    display:grid!important;
    place-items:center!important;
    width:38px!important;
    height:38px!important;
    border-radius:11px!important;
    background:color-mix(in srgb,var(--accent) 13%,white)!important;
    color:var(--accent)!important;
  }
  .home .desktopServiceGrid .mobileServiceHeading>i svg { width:21px!important; height:21px!important; }
  .home .desktopServiceGrid .mobileServiceHeading h2 {
    margin:0 0 3px!important;
    font-size:22px!important;
    line-height:1.05!important;
    letter-spacing:-.025em!important;
    overflow-wrap:anywhere!important;
  }
  .home .desktopServiceGrid .mobileServiceHeading p {
    margin:0!important;
    color:#55544f!important;
    font-size:14px!important;
    line-height:1.4!important;
  }
  .home .desktopServiceGrid .mobileServiceContent ul {
    display:grid!important;
    gap:5px!important;
    margin:15px 0 12px!important;
    padding:12px 0!important;
    border-top:1px solid rgba(67,32,82,.12)!important;
    border-bottom:0!important;
    list-style:none!important;
  }
  .home .desktopServiceGrid .mobileServiceContent li {
    display:grid!important;
    grid-template-columns:14px minmax(0,1fr)!important;
    align-items:start!important;
    gap:5px!important;
    color:#181818!important;
    font-size:16px!important;
    line-height:1.35!important;
  }
  .home .desktopServiceGrid .mobileServiceContent li svg {
    width:13px!important;
    height:13px!important;
    color:var(--accent)!important;
    stroke-width:2.5!important;
  }
  .home .desktopServiceGrid .mobileServiceContent>a {
    display:grid!important;
    grid-template-columns:18px minmax(0,1fr) 16px!important;
    align-items:center!important;
    gap:7px!important;
    min-height:44px!important;
    margin-top:auto!important;
    padding:9px 11px!important;
    border-radius:9px!important;
    background:var(--accent)!important;
    color:#fff!important;
    text-decoration:none!important;
  }
  .home .desktopServiceGrid .mobileServiceContent>a svg { width:16px!important; height:16px!important; }
  .home .desktopServiceGrid .mobileServiceContent>a b {
    min-width:0!important;
    font-size:14px!important;
    line-height:1.25!important;
  }
}

@media (min-width:761px) and (max-width:1000px) {
  .home .desktopServiceGrid {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (max-width:760px) {
  body[class] .siteHeader.topbar {
    position:absolute!important;
    top:0!important;
    left:0!important;
    right:0!important;
    z-index:1000!important;
    width:100%!important;
    height:72px!important;
    min-height:72px!important;
    color:#432052!important;
    background:rgba(255,255,255,.78)!important;
    border:0!important;
    border-bottom:1px solid rgba(67,32,82,.10)!important;
    box-shadow:0 4px 14px rgba(31,20,37,.07)!important;
    backdrop-filter:blur(10px) saturate(1.1)!important;
    overflow:hidden!important;
  }
  body[class] .siteHeader .utilityBar { display:none!important; }
  body[class] .siteHeader .mainNav {
    display:grid!important;
    grid-template-columns:132px minmax(0,1fr) 20px auto!important;
    align-items:center!important;
    gap:7px!important;
    width:100%!important;
    height:72px!important;
    min-height:72px!important;
    padding:0 9px!important;
    background:transparent!important;
    overflow:hidden!important;
  }
  body[class] .siteHeader .brand {
    position:relative!important;
    display:block!important;
    width:132px!important;
    height:58px!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }
  body[class] .siteHeader .brand::before,
  body[class] .siteHeader .brand::after { content:none!important; display:none!important; }
  body[class] .siteHeader .brandPicture>.brandLogo {
    display:block!important;
    width:100%!important;
    height:100%!important;
    filter:drop-shadow(0 2px 5px rgba(43,23,56,.18))!important;
  }
  body[class] .siteHeader .desktopNavigation,
  body[class] .siteHeader .menu { display:none!important; }
  body[class] .siteHeader .mobileNavigation {
    position:static!important;
    inset:auto!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
    min-width:0!important;
    width:auto!important;
    height:56px!important;
    min-height:0!important;
    gap:14px!important;
    padding:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    white-space:nowrap!important;
    scrollbar-width:none!important;
  }
  body[class] .siteHeader .mobileNavigation::-webkit-scrollbar { display:none!important; }
  body[class] .siteHeader .mobileNavigation>a {
    display:flex!important;
    flex:0 0 auto!important;
    width:auto!important;
    min-height:0!important;
    padding:8px 0!important;
    color:#432052!important;
    font-size:9.5px!important;
    font-weight:800!important;
    line-height:1.15!important;
    text-shadow:none!important;
    white-space:nowrap!important;
  }
  body[class] .siteHeader .mobileNavSwipeHint {
    display:grid!important;
    place-items:center!important;
    width:20px!important;
    height:32px!important;
    color:#432052!important;
    pointer-events:none!important;
    animation:dlsMobileSwipeHint 1.5s ease-in-out infinite!important;
  }
  body[class] .siteHeader .mobileNavSwipeHint svg {
    width:15px!important;
    height:15px!important;
    stroke-width:2.4!important;
  }
  body[class] .mobileHeaderContacts {
    display:flex!important;
    flex-direction:row!important;
    flex:0 0 auto!important;
    gap:4px!important;
  }
  body[class] .mobileHeaderContacts a { width:31px!important; height:31px!important; }
}

@media (max-width:370px) {
  body[class] .siteHeader .mainNav { grid-template-columns:118px minmax(0,1fr) 18px auto!important; }
  body[class] .siteHeader .brand { width:118px!important; height:54px!important; }
}

@keyframes dlsMobileSwipeHint {
  0%,100% { transform:translateX(-2px); opacity:.55; }
  50% { transform:translateX(3px); opacity:1; }
}

@media (prefers-reduced-motion:reduce) {
  body[class] .siteHeader .mobileNavSwipeHint { animation:none!important; }
}