/* =========================================================
   Desert Grove — Global Styles (Consolidated)
   Updated: 2025-11-02
   Notes:
   - CSS only (no JS).
   - Desktop hero visible, full-width, anti-flicker.
   - Off-canvas intact. Overlays neutralized.
   - CLS mitigations (header/hero/button).
   ========================================================= */

/* ===== Header/Menu basics ===== */
header#top nav .no-menu-assigned { visibility: hidden; }

body:not(.ascend) header#top nav > ul.buttons,
body.ascend #header-outer[data-full-width="false"]  header#top nav > ul.buttons { margin-left: 15px; }
body.ascend #header-outer[data-full-width="true"]   header#top nav > ul.buttons { margin-left: 0; }
header#top nav > ul.buttons { transition: padding .8s ease; }

#header-outer .sf-menu > li > a{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.35rem; padding:0 10px; white-space:nowrap; text-decoration:none;
}
#header-outer .sf-menu > li > a:hover,
#header-outer .sf-menu > li:hover > a{ text-decoration:none; }
#header-outer .sf-menu > li > a:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

header#top nav > ul .slide-out-widget-area-toggle{ transition: margin .25s ease; }
.side-widget-open header#top nav > ul .slide-out-widget-area-toggle{ transition: margin .75s ease; }
.side-widget-open.no-bg-color{ border-color:transparent !important; }

/* ===== Mobile Off-Canvas (Hamburger) ===== */
#header-outer,
#header-outer .slide-out-widget-area-toggle,
#header-outer .slide-out-widget-area-toggle a,
#header-outer .slide-out-widget-area-toggle button{
  position:relative !important; z-index:10003 !important; pointer-events:auto !important;
}

#slide-out-widget-area,
.slide-out-widget-area,
.off-canvas-menu,
[data-off-canvas-panel]{
  position:fixed !important; top:0; right:0; bottom:0; width:86vw; max-width:420px;
  transform:translateX(100%); opacity:0; visibility:hidden; pointer-events:none;
  background:#fff; z-index:10002;
  transition:transform .35s ease, opacity .25s ease, visibility 0s linear .35s;
}
.side-widget-open #slide-out-widget-area,
.side-widget-open .slide-out-widget-area,
.side-widget-open .off-canvas-menu,
.side-widget-open [data-off-canvas-panel]{
  transform:translateX(0); opacity:1; visibility:visible; pointer-events:auto;
  transition:transform .35s ease, opacity .25s ease;
}
#dg-ocm-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:10001;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.side-widget-open #dg-ocm-overlay{ opacity:1; pointer-events:auto; }
html.side-widget-open, body.side-widget-open{ overflow:hidden; touch-action:none; }

@media (max-width:1024px){
  #slide-out-widget-area,
  .slide-out-widget-area,
  .off-canvas-menu,
  [data-off-canvas-panel]{ display:block !important; }
}

/* ===== Page reveal (global) ===== */
html.rq-hide,
html.rq-hide body,
html.rq-hide #ajax-content-wrap{
  opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
}
html.rq-hide #ajax-loading-screen,
html.rq-hide .page-overlay,
html.rq-hide .ns-loading-cover{
  display:none !important; opacity:0 !important; pointer-events:none !important;
}

/* =========================================================
   HERO / SLIDER — visibility + anti-flicker + full width
   (Nectar/Swiper) — DESKTOP FOCUS
   ========================================================= */

/* Keep slides visible even before JS init */
.nectar-slider-wrap .swiper-slide{
  opacity:1 !important; visibility:visible !important;
}

/* Kill blackout overlays that can sit above hero images */
.nectar-slider-wrap .nectar-slider-loading,
.nectar-slider-wrap .slide-bg-overlay,
.nectar-slider-wrap .color-overlay,
.nectar-slider-wrap .overlays,
.nectar-slider-wrap .bg-overlay,
.nectar-slider-wrap .no-click{
  display:none !important; opacity:0 !important; pointer-events:none !important;
}

/* Ensure the slider stack has dimensions */
.parallax_slider_outer,
.nectar-slider-wrap,
.nectar-slider-wrap .swiper-container,
.nectar-slider-wrap .swiper-wrapper,
.nectar-slider-wrap .swiper-slide{
  width:100% !important; max-width:100% !important;
}

/* Desktop/Tablet hero height */
@media (min-width:1000px){
  .nectar-slider-wrap .swiper-container,
  .nectar-slider-wrap .swiper-wrapper,
  .nectar-slider-wrap .swiper-slide{
    height:70vh !important; min-height:300px !important;
  }
}

/* Mobile hero height */
@media (max-width:999px){
  .nectar-slider-wrap .swiper-container[data-height="auto"],
  .nectar-slider-wrap .swiper-wrapper,
  .nectar-slider-wrap .swiper-slide{
    height:70vh !important; min-height:60vh !important; max-height:100dvh !important;
  }
}

/* Background DIV heroes should cover the slide */
.parallax_slider_outer .image-bg,
.nectar-slider-wrap .image-bg{
  position:absolute !important; inset:0 !important;
  background-position:center !important; background-repeat:no-repeat !important;
  background-size:cover !important; display:block !important;
  opacity:1 !important; visibility:visible !important;
  z-index:1 !important; width:100% !important; height:100% !important;
}

/* Prevent content clipping */
.nectar-slider-wrap .swiper-slide{ overflow:hidden !important; }

/* Some templates hide rows on mobile — force visible */
[data-bg-mobile-hidden]{ display:block !important; }

/* Optional: neutralize any conflicting 'contain' */
.parallax_slider_outer .image-bg{ background-size:cover !important; }

/* ===== Desktop unblocking + overlay defeat (final) ===== */
@media (min-width:1000px){
  /* Put hero on top layer and create its own stacking context */
  .parallax_slider_outer,
  .nectar-slider-wrap{
    position: relative !important;
    z-index: 10010 !important;
    isolation: isolate !important;
  }

  /* Ensure chain is visible & painted */
  .nectar-slider-wrap .swiper-slide{
    position:relative !important; display:block !important; overflow:hidden !important;
    opacity:1 !important; visibility:visible !important; transition:none !important;
  }
  .nectar-slider-wrap .swiper-slide .image-bg{
    position:absolute !important; inset:0 !important; z-index:0 !important;
    pointer-events:none !important; background-position:center !important;
    background-size:cover !important; background-repeat:no-repeat !important;
    -webkit-backface-visibility:hidden; backface-visibility:hidden; transform:translateZ(0);
    will-change:transform;
  }
  .nectar-slider-wrap .swiper-slide .container{ position:relative !important; z-index:2 !important; }

  /* Neutralize runtime hide/display toggles during Swiper init */
  .nectar-slider-wrap .swiper-container[style*="visibility:hidden"],
  .nectar-slider-wrap .swiper-wrapper[style*="visibility:hidden"]{
    visibility:visible !important; opacity:1 !important;
  }
  .nectar-slider-wrap .swiper-container[style*="display:none"],
  .nectar-slider-wrap .swiper-wrapper[style*="display:none"],
  .nectar-slider-wrap .swiper-slide[style*="display:none"],
  .nectar-slider-wrap .swiper-slide .image-bg[style*="display:none"]{
    display:block !important;
  }

  /* Keep decorative row backgrounds below */
  .wpb_row .row-bg-wrap::before,
  .wpb_row .row-bg-wrap::after{
    content:none !important; display:none !important;
    opacity:0 !important; visibility:hidden !important; pointer-events:none !important; z-index:-1 !important;
  }
  .wpb_row .row-bg-wrap,
  .wpb_row .row-bg{ position:relative !important; z-index:0 !important; pointer-events:none !important; }

  /* Prevent the next section overlapping the hero */
  .parallax_slider_outer + .container-wrap,
  .nectar-slider-wrap + .container-wrap{ margin-top:0 !important; }

  /* Kill any lingering global overlays */
  #ajax-loading-screen,
  .page-overlay,
  .ns-loading-cover,
  #slide-out-widget-area-bg,
  .ocm-effect-wrap,
  .ocm-effect-wrap .inner-wrap-bg{
    display:none !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important; z-index:-1 !important;
  }

  /* Swiper fade mode: keep non-active slides visible (no flicker) */
  .nectar-slider-wrap .swiper-container.swiper-container-fade .swiper-slide,
  .nectar-slider-wrap .swiper-slide,
  .nectar-slider-wrap .swiper-slide:not(.swiper-slide-active){
    opacity:1 !important; visibility:visible !important; transition:none !important;
  }
}

/* =========================================================
   Mobile gutter cleanup around hero (optional)
   ========================================================= */
@media (max-width:999px){
  .parallax_slider_outer,
  .nectar-slider-wrap,
  .nectar-slider-wrap .swiper-container{ margin:0 !important; padding:0 !important; }
  .container-wrap,
  .container.main-content,
  .parallax_slider_outer .container,
  .nectar-slider-wrap .container,
  .parallax_slider_outer .row,
  .nectar-slider-wrap .row{
    padding-left:0 !important; padding-right:0 !important;
    margin-left:0 !important; margin-right:0 !important; max-width:none !important;
  }
}

/* =========================================================
   WHY-IMG thumbnails — mobile layout fix
   ========================================================= */
@media (max-width:768px){
  .why-img-list ul{ display:block !important; padding:0 !important; margin:0 auto !important; }
  .why-img-list ul li{ display:block !important; width:100% !important; margin:0 0 12px !important; list-style:none !important; }
  .why-img-list .col{ float:none !important; width:100% !important; padding:0 !important; }
  .why-img-list picture,
  .why-img-list img{ display:block !important; width:100% !important; max-width:100% !important; height:auto !important; visibility:visible !important; opacity:1 !important; }
}

/* (Scoped example row kept for safety) */
@media (max-width:768px){
  #fws_586620de88e05 .why-IMG-list ul{ display:block !important; padding:0 !important; margin:0 auto !important; }
  #fws_586620de88e05 .why-IMG-list ul li{ display:block !important; width:100% !important; margin:0 0 12px !important; list-style:none !important; }
  #fws_586620de88e05 .why-IMG-list .col{ float:none !important; width:100% !important; padding:0 !important; }
  #fws_586620de88e05 .why-IMG-list picture,
  #fws_586620de88e05 .why-IMG-list img{ display:block !important; width:100% !important; max-width:100% !important; height:auto !important; visibility:visible !important; opacity:1 !important; }
}

/* =========================================================
   EmbedSocial — render on mobile
   ========================================================= */
.embedsocial-hashtag{
  display:block !important; opacity:1 !important; visibility:visible !important;
  height:auto !important; min-height:200px; overflow:visible !important; position:relative; z-index:10; margin:0 auto;
}
@media (max-width:768px){
  .embedsocial-hashtag{ width:100% !important; max-width:100% !important; padding-inline:10px; }
}
@media (max-width:768px){
  [data-bg-mobile-hidden] .embedsocial-hashtag,
  .vc_hidden-xs .embedsocial-hashtag,
  .hidden-phone .embedsocial-hashtag{
    display:block !important; opacity:1 !important; visibility:visible !important;
  }
}
.embedsocial-hashtag iframe,
.embedsocial-hashtag img{
  display:block !important; opacity:1 !important; visibility:visible !important; max-width:100% !important;
}

/* =========================================================
   Utilities / Misc
   ========================================================= */
.parallax_slider_outer .image-bg,
.nectar-slider-wrap .swiper-slide .image-bg{ pointer-events:none !important; }
.nectar-slider-wrap .swiper-slide .container{ position:relative !important; z-index:2 !important; }

/* Footer simple defaults */
.footer-widgets{ display:flex; flex-wrap:wrap; gap:30px; }
.footer-widget{ width:calc(33.333% - 20px); box-sizing:border-box; }
@media (max-width:768px){
  .footer-widgets{ flex-direction:column; align-items:center; gap:40px; }
  .footer-widget{ width:100%; max-width:100%; text-align:center; }
}

/* =========================================================
   WhatsApp CTA
   ========================================================= */
.whatsapp-container{ position:fixed; right:20px; bottom:20px; z-index:99999; display:flex; align-items:center; gap:10px; }
.whatsapp-text{ background:#003300; color:#fff; font-weight:700; padding:12px 18px; border-radius:30px; font-size:14px; line-height:1.2; max-width:220px; }
@media (max-width:600px){
  .whatsapp-text{ white-space:nowrap; max-width:calc(75vw - 12px - 60px - 10px - 20px); font-size:clamp(12px, 3.8vw, 16px); }
}

/* =========================================================
   CLS HARDENING (Header/Body/Hero)
   ========================================================= */


/* Prevent layout shifts from global overlays */
.ns-loading-cover,
.ajax-loading-screen,
#slide-out-widget-area-bg,
#slide-out-widget-area,
.ocm-effect-wrap,
.ocm-effect-wrap .inner-wrap-bg {
  display:none !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important; z-index:-1 !important;
}

/* Force hero layers visible even if inline JS toggles opacity */
.parallax_slider_outer,
.parallax_slider_outer .image-bg,
.nectar-slider-wrap,
.nectar-slider-wrap .swiper-slide,
.row-bg-wrap,
.row-bg-wrap .row-bg{
  opacity:1 !important; visibility:visible !important; transition:none !important;
}

/* =========================================================
   POOL COVERS — DESKTOP centering (also safe globally)
   ========================================================= */
@media (min-width:1000px){
  /* Keep the hero image centered and full width */
  .parallax_slider_outer .image-bg,
  .nectar-slider-wrap .image-bg{
    background-position:center center !important;
    background-size:cover !important;
    left:0 !important; right:0 !important;
    margin:0 auto !important;
  }
  /* If a grid wrapper tries to constrain width, neutralize it */
  .blurred-wrap.home-slider-update .container-wrap .nectar-slider-wrap{
    max-width:none !important;
  }
}

/* =========================================================
   MOBILE — Request Quote button sizing (smaller, CLS-safe)
   ========================================================= */
@media (max-width: 999px){
  .btn.btn-danger.dg-btn-right{
    position: fixed !important;
    right: 0 !important;
    bottom: calc(20px + env(safe-area-inset-bottom)) !important;
    transform: none !important;
    transition: none !important;

    width: 135px !important;          /* compact width */
    min-height: 38px !important;      /* accessible tap size */
    padding: 8px 12px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    border-radius: 30px !important;
    box-sizing: border-box !important;
    z-index: 9999 !important;
  }

  /* Neutralize inline transforms if theme injects them */
  .btn.btn-danger.dg-btn-right[style*="top"],
  .btn.btn-danger.dg-btn-right[style*="transform"],
  .btn.btn-danger.dg-btn-right[style*="bottom"]{
    bottom: calc(20px + env(safe-area-inset-bottom)) !important;
    transform: none !important;
  }
}
/* ===== FINAL: Desktop hero full-bleed + centered across ALL pages ===== */
@media (min-width:1000px){
  /* If the hero lives inside a padded .container, break it out to 100vw and center it */
  .container.main-content .parallax_slider_outer,
  .container.main-content .nectar-slider-wrap{
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important; /* center */
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Make sure the internal pieces fill the new full-bleed width */
  .container.main-content .nectar-slider-wrap .swiper-container,
  .container.main-content .nectar-slider-wrap .swiper-wrapper,
  .container.main-content .nectar-slider-wrap .swiper-slide{
    width: 100% !important;
  }

  /* Background image centered & covering */
  .container.main-content .parallax_slider_outer .image-bg,
  .container.main-content .nectar-slider-wrap .image-bg{
    left: 0 !important; right: 0 !important;
    background-position: center center !important;
    background-size: cover !important;
  }

  /* Safety: parent containers shouldn’t clip the full-bleed hero */
  .container-wrap,
  .container.main-content{
    overflow: visible !important;
  }
}
/* ===== FINAL FIX: Mobile Request Quote button true fixed size ===== */
@media (max-width: 999px){
  .btn.btn-danger.dg-btn-right {
    width: 135px !important;
    height: 42px !important;           /* force exact height */
    min-height: 42px !important;       /* prevent expansion */
    max-height: 42px !important;       /* lock it in place */
    padding: 8px 12px !important;
    font-size: 16px !important;
    line-height: 1.4 !important;

    position: fixed !important;
    right: 0 !important;
    bottom: calc(20px + env(safe-area-inset-bottom)) !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 30px !important;
    z-index: 9999 !important;

    /* reset any injected inline heights or transforms */
    height: 42px !important;
    transform: none !important;
    transition: none !important;
  }

  /* neutralize inline attributes like style="height:100vh" */
  .btn.btn-danger.dg-btn-right[style*="height"],
  .btn.btn-danger.dg-btn-right[style*="transform"],
  .btn.btn-danger.dg-btn-right[style*="top"],
  .btn.btn-danger.dg-btn-right[style*="bottom"] {
    height: 42px !important;
    transform: none !important;
    bottom: calc(20px + env(safe-area-inset-bottom)) !important;
  }
}

/* LCP: prevent first-paint delays or shifts on mobile hero image */
@media (max-width: 999px){
  .lcp-hero,
  img[alt~="Desert"][alt~="Grove"][alt~="visual"]{
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;         /* avoids width reflow */
    height: auto !important;
    object-fit: cover !important;

    /* prevent animations/transitions that delay paint */
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* If any wrapper tries to fade/slide the hero in, neutralize it for LCP */
@media (max-width: 999px){
  .lcp-hero-wrapper,
  .hero, .hero-wrap, .banner-container, .image-bg {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;   /* avoid translate that defers paint */
  }
}

/* Hero last-resort visibility if JS is late */
.dg-hero-force .image-bg{
  position:absolute !important; inset:0 !important;
  background-position:center center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  opacity:1 !important; visibility:visible !important;
  z-index:0 !important; pointer-events:none !important;
}
.dg-hero-force{
  position:relative !important; overflow:hidden !important;
  width:100% !important; max-width:100% !important;
  height:70vh !important; min-height:300px !important;
}

/* Minimal default to avoid any layout shift if markup is present */
.mfp-bg,.mfp-wrap{position:fixed;left:0;top:0;width:100%;height:100%;display:none;}

/* ==== MOBILE CLS FIX PACK (put at very end of style.css) ==== */

/* 1) Lock header height on mobile so it doesn't jump when fonts/JS load */
@media (max-width: 999px){
  #header-outer > header#top .container .row{
    min-height: 80px !important;
  }
  /* If your theme uses a spacer that changes later, fix it too */
  #header-space{
    height: 80px !important;
    min-height: 80px !important;
  }
}

/* 2) Reserve hero height on mobile (prevents big initial jump) */
@media (max-width: 999px){
  /* 16:9 placeholder – adjust if your hero is taller/shorter */
  .parallax_slider_outer,
  .nectar-slider-wrap{
    aspect-ratio: 16 / 9;
    min-height: 56.25vw !important; /* 16:9 of viewport width */
  }
  .nectar-slider-wrap .swiper-container,
  .nectar-slider-wrap .swiper-wrapper,
  .nectar-slider-wrap .swiper-slide{
    min-height: 56.25vw !important;
  }
}

/* 3) If you have a fixed bottom CTA (Request Quote), reserve padding so content doesn't jump when it mounts */
@media (max-width: 600px){
  #ajax-content-wrap{
    /* adjust if your button is taller/shorter */
    padding-bottom: 84px !important;
  }
}



/* 5) General image stability: avoid inline style opacity/transform changing layout */
img{
  display: block;
  height: auto;
}

/* Make sure responsive images don’t cause a jump due to max-width recalculation */
img.img-responsive{
  width: 100%;
  height: auto;
}

.img-responsive[width][height] {
  aspect-ratio: attr(width number) / attr(height number);
  height: auto;
  width: 100%;
  max-width: 100%;
  display: block;
}

/* === CLS fix: Request Quote button (mobile & desktop) === */
.btn.dg-btn-right{
  position:fixed !important;
  right:0 !important;
  bottom:20px !important;                 /* stable anchor (no top:-100px jumps) */
  z-index:10050 !important;

  /* Lock metrics so no shift when fonts/styles apply */
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;

  width:165px !important;                 /* same as your inline style */
  height:48px !important;                 /* FIXED height to prevent CLS */
  padding:0 12px !important;
  line-height:48px !important;            /* text vertically centered */
  font-size:16px !important;
  font-weight:700 !important;             /* remove need for <b> */
  letter-spacing:.2px;                     /* tiny stabilizer */
  white-space:nowrap !important;
  text-decoration:none !important;

  border-radius:10px 0 0 10px !important;
  border:0 !important;
  background:#003366 !important;
  color:#fff !important;

  /* Prevent hover-induced layout changes */
  transition:transform .2s ease, opacity .2s ease !important;
  will-change:transform;
}
.btn.dg-btn-right b{                      /* neutralize late bolding */
  font-weight:inherit !important;
}

/* Mobile: keep it modest (was too tall for some devices) */
@media (max-width:600px){
  .btn.dg-btn-right{
    width:150px !important;
    height:44px !important;
    line-height:44px !important;
    font-size:15px !important;
    bottom:16px !important;
  }
}

/* Avoid CLS from borders/shadows appearing later */
.btn.dg-btn-right:hover{
  transform:translateY(-1px);
}

/* Safety: ensure other overlays don’t push/shift viewport */
.ocm-effect-wrap,
#slide-out-widget-area-bg{
  contain:layout paint;                    /* isolate their reflows from viewport */
}

/* Reduce reflow scope on heavy sections */
.parallax_slider_outer,
.nectar-slider-wrap,
.container.main-content.dg-content,
#footer-outer,
.embedsocial-hashtag{
  contain: layout paint;               /* isolate layout calculations */
  content-visibility: visible;            /* let browser skip offscreen work */
  contain-intrinsic-size: 800px 600px; /* reserve space to avoid shifts */
}

/* Avoid layout animations (use transform/opacity instead) */
* { animation-timing-function: linear; } /* safety: stop bouncy easing from triggering layout waves */

/* ===== Sticky/Fixed Header – Safe Patch (CSS-only) ===== */
/* 1) Set your header height once here */
:root { --header-h: 90px; }           /* adjust to your actual header height */


@media (max-width: 767px) {
  :root { --header-h: 80px; }         /* mobile header height (adjust if needed) */
}

/* 3) Make the header fixed and stable */
/* Fixed header — no color override */
header, .site-header, #header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  z-index: 9999;
  /* background: #fff;  <-- remove this line */
  will-change: transform;
  transform: translateZ(0);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

/* 4) Handle WordPress admin bar offsets (logged-in) */
.admin-bar header,
.admin-bar .site-header,
.admin-bar #header {
  top: 32px;                           /* desktop admin bar */
}
@media (max-width: 782px) {
  .admin-bar header,
  .admin-bar .site-header,
  .admin-bar #header {
    top: 46px;                         /* mobile admin bar height */
  }
  /* Also offset the page content when admin bar is visible */
  .admin-bar body { margin-top: calc(var(--header-h) + 46px); }
}

/* 5) Neutralize common theme conflicts that break fixed headers */
header.is-transparent,
.site-header.is-transparent,
#header.is-transparent { position: fixed !important; }

header.sticky,
.site-header.sticky,
#header.sticky { position: fixed !important; }

html.has-sticky-header body { margin-top: var(--header-h) !important; }

/* Only if your theme adds a class like .is-sticky / .scrolled */
.is-sticky header,
.is-sticky .site-header,
.scrolled #header {
  /* your solid color here, e.g.: */
  background: var(--header-solid, #0a1f2e);
}

/* === SOLID, HOVERING HEADER (pin the painted container) === */
:root{
  /* Set this to the original header color if needed */
  --dg-header-bg: var(--header-solid, #0a1f2e);
}

/* Make the painted container fixed so it keeps its background */
#header-outer{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 10005 !important;
  background: var(--dg-header-bg) !important; /* solid color */
  /* optional, keep if you want the subtle separation */
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

/* Ensure the inner header doesn't overlay a (transparent) background */
#header-outer > header#top{
  background: transparent !important;
}

/* If theme tries to make it transparent on scroll or on certain pages, override */
#header-outer.transparent,
#header-outer.no-bg-color,
body[data-transparent-header="true"] #header-outer{
  background: var(--dg-header-bg) !important;
  opacity: 1 !important;
}

/* Keep your reserved space logic (already present). If your visual height differs, adjust --header-h. */


/* --- Full-height solid header background (Salient/Nectar safe) --- */
:root { --dg-header-bg: var(--header-solid, #008ae6); } /* set to your exact header color */

/* 1) Paint BOTH the wrapper and the inner header */
#header-outer,
#header-outer > header#top{
  background: var(--dg-header-bg) !important;
  background-image: none !important;
}

/* 2) Nuke theme transparent/gradient modes that leave only a thin strip colored */
#header-outer.transparent,
#header-outer.no-bg-color,
body[data-transparent-header="true"] #header-outer,
#header-outer[data-transparent-header="true"],
#header-outer[data-remove-bordered-subheader="true"]{
  background: var(--dg-header-bg) !important;
  background-image: none !important;
  opacity: 1 !important;
}

/* 3) Some Salient skins draw a partial overlay via ::before/::after – disable it */
#header-outer::before,
#header-outer::after{
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* 4) Ensure all header rows inherit the solid paint */
#header-outer .container,
#header-outer .row,
#header-secondary-outer{
  background: transparent !important;   /* keep children transparent so parent color shows through */
  background-image: none !important;
}

/* 5) Keep it fixed (from earlier patch) */
#header-outer{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 10005 !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

/* === Desktop: perfectly center logo+tagline and main menu in header === */
@media (min-width:1000px){

  /* Make the header row a flex row and center items vertically */
  #header-outer > header#top .container .row{
    display:flex !important;
    align-items:center !important;
    min-height: var(--header-h) !important; /* you set this to 96px */
  }

  /* Ensure both columns center their contents */
  #header-outer .col.span_3.logo-container,
  #header-outer .col.span_9.col_last{
    display:flex !important;
    align-items:center !important;
  }

  /* Keep the logo + tagline as a vertical stack, centered in the column */
  #header-outer .brand-block{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;   /* vertical centering within the column */
    padding-bottom:0 !important;         /* remove the tiny downward bias */
  }

  /* Center the nav vertically within the header height */
  #header-outer nav{
    display:flex !important;
    align-items:center !important;
    height: var(--header-h) !important;
  }

  /* Make top-level menu links align to the middle line */
  #header-outer .sf-menu > li > a{
    display:inline-flex !important;
    align-items:center !important;
    height: var(--header-h) !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    line-height:1.2 !important; /* avoid text vertical stretching */
  }

  /* Neutralize any theme top/bottom padding that nudges content upward */
  #header-outer,
  #header-outer > header#top{
    padding-top:0 !important;
    padding-bottom:0 !important;
  }
}

/* === Desktop: keep main menu on right, adjustable offset === */
@media (min-width:1000px){

  /* 1. The row still aligns items vertically but spreads them horizontally */
  #header-outer > header#top .container .row{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important; /* logo left, menu right */
  }

  /* 2. Keep logo block pinned to the left */
  #header-outer .col.span_3.logo-container{
    justify-content:flex-start !important;
  }

  /* 3. Push main menu group to the right side */
  #header-outer .col.span_9.col_last{
    justify-content:flex-end !important;
  }

  /* 4. Allow custom horizontal offset from right edge (e.g., 40px) */
  #header-outer nav{
    margin-right: var(--dg-menu-offset, 10px) !important;
    display:flex !important;
    align-items:center !important;
  }

  /* Example: if you want tighter or looser spacing, edit this variable: */
  :root{ --dg-menu-offset: 40px; }  /* decrease for closer, increase for further */

  /* Keep links nicely aligned */
  #header-outer .sf-menu > li > a{
    display:inline-flex !important;
    align-items:center !important;
  }
}

/* ===========================================
   GLOBAL HERO FIX (Salient/Nectar slider & BG rows)
   - Makes hero truly 100vw wide inside any container
   - Ensures image covers full banner height
   - Works on desktop and mobile
   =========================================== */

:root{
  --dg-hero-h-desktop: 80vh;  /* tweak as you like site-wide */
  --dg-hero-h-mobile: 70vh;   /* mobile default */
}

/* 1) Full-bleed width for hero wrappers (even when nested in .container) */
.parallax_slider_outer,
.nectar-slider-wrap{
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;   /* center the 100vw block */
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  isolation: isolate; /* clean stacking context */
}

/* 2) Unconstrain internal slider elements and set heights */
.nectar-slider-wrap .swiper-container,
.nectar-slider-wrap .swiper-wrapper,
.nectar-slider-wrap .swiper-slide{
  width: 100% !important;
  height: var(--dg-hero-h-desktop) !important;
  min-height: 300px !important;
  position: relative !important;
  overflow: hidden !important;
}

/* 3) The actual background layer must COVER the whole banner */
.parallax_slider_outer .image-bg,
.nectar-slider-wrap .swiper-slide .image-bg{
  position: absolute !important;
  inset: 0 !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;   /* <— key: replace any "contain" */
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  pointer-events: none !important;     /* avoid eating clicks */
}

/* 4) Prevent parent containers from clipping or constraining width */
.container-wrap,
.container.main-content{
  overflow: visible !important;
}

/* 5) Mobile sizing (safe caps) */
@media (max-width: 999px){
  .nectar-slider-wrap .swiper-container,
  .nectar-slider-wrap .swiper-wrapper,
  .nectar-slider-wrap .swiper-slide{
    height: var(--dg-hero-h-mobile) !important;
    min-height: 56.25vw !important;    /* at least a 16:9 slice */
    max-height: 100dvh !important;     /* never exceed viewport */
  }
}

/* 6) Optional: keep any row-based background heroes full-bleed, too */
.row-bg-wrap,
.row-bg-wrap .row-bg{
  width: 100vw !important;
  max-width: 100vw !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* 7) Belt & suspenders: neutralize any inline visibility/display toggles */
.nectar-slider-wrap .swiper-container[style*="visibility:hidden"],
.nectar-slider-wrap .swiper-wrapper[style*="visibility:hidden"],
.nectar-slider-wrap .swiper-slide[style*="visibility:hidden"]{
  visibility: visible !important; opacity: 1 !important;
}
.nectar-slider-wrap .swiper-container[style*="display:none"],
.nectar-slider-wrap .swiper-wrapper[style*="display:none"],
.nectar-slider-wrap .swiper-slide[style*="display:none"],
.nectar-slider-wrap .swiper-slide .image-bg[style*="display:none"]{
  display: block !important;
}

/* ===== 1) Single source of truth for header height ===== */
:root { --header-h: 90px; }                 /* desktop default */
@media (max-width: 999px){
  :root { --header-h: 80px; }               /* mobile/tablet up to 999px */
}


/* Desktop: use a real spacer so content starts below fixed header */
@media (min-width:1000px){
  :root{ --header-h: 96px; }           /* adjust once if header height differs */
  #header-space{
    display:block !important;
    height:var(--header-h) !important;
    min-height:var(--header-h) !important;
  }
}

/* Mobile/tablet: keep previous zero spacer behavior if desired */
@media (max-width:999px){
  #header-space{
    height:0 !important;
    min-height:0 !important;
    display:block !important;
  }
}

/* If the theme adds header offsets via other flags, normalize them */
html.has-sticky-header body{ margin-top: var(--header-h) !important; }
.admin-bar body{ margin-top: calc(var(--header-h) + 46px) !important; } /* WP mobile bar */
@media (min-width: 783px){
  .admin-bar body{ margin-top: calc(var(--header-h) + 32px) !important; } /* WP desktop bar */
}

/* ===== 2) Make the hero wrapper itself the same height as slides ===== */
/* Desktop */
@media (min-width: 1000px){
  .parallax_slider_outer,
  .nectar-slider-wrap{
    height: var(--dg-hero-h-desktop) !important;   /* e.g., 80vh from your vars */
    min-height: 300px !important;
  }
  .nectar-slider-wrap .swiper-container,
  .nectar-slider-wrap .swiper-wrapper,
  .nectar-slider-wrap .swiper-slide{
    height: var(--dg-hero-h-desktop) !important;
    min-height: 300px !important;
  }
}

/* Mobile/Tablet */
@media (max-width: 999px){
  .parallax_slider_outer,
  .nectar-slider-wrap{
    height: var(--dg-hero-h-mobile) !important;     /* 70vh from your vars */
    min-height: 56.25vw !important;                 /* 16:9 floor */
    max-height: 100dvh !important;
  }
  .nectar-slider-wrap .swiper-container,
  .nectar-slider-wrap .swiper-wrapper,
  .nectar-slider-wrap .swiper-slide{
    height: var(--dg-hero-h-mobile) !important;
    min-height: 56.25vw !important;
    max-height: 100dvh !important;
  }
}

/* The image layer always fills 100% of the banner area */
.parallax_slider_outer .image-bg,
.nectar-slider-wrap .swiper-slide .image-bg{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important; height: 100% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  z-index: 0 !important;
}

/* ===== 3) Remove any accidental gap above/below the hero on mobile ===== */
@media (max-width: 999px){
  .parallax_slider_outer,
  .nectar-slider-wrap,
  .nectar-slider-wrap .swiper-container{
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Ensure the section after the hero doesn’t push down */
  .parallax_slider_outer + .container-wrap,
  .nectar-slider-wrap + .container-wrap{
    margin-top: 0 !important;
  }
}

/* ===== 4) Safety: keep the fixed header painted and consistent ===== */
#header-outer,
#header-outer > header#top{
  background: var(--dg-header-bg) !important;
}
#header-outer{ position: fixed !important; top: 0; left: 0; right: 0; z-index: 10005 !important; }

@media (max-width: 999px){
  body { margin-top: 0 !important; }   /* remove duplicate space */
}

/* === DESKTOP HERO GAP FIX — full-bleed without transform === */
@media (min-width:1000px){
  /* Break out of centered container with negative margins (no subpixel gap) */
  .parallax_slider_outer,
  .nectar-slider-wrap,
  .row-bg-wrap,
  .row-bg-wrap .row-bg{
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;

    /* breakout without translate */
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    transform: none !important;            /* kill old translateX(-50%) */
  }

  /* Make sure the inner hero stack fills the breakout */
  .nectar-slider-wrap .swiper-container,
  .nectar-slider-wrap .swiper-wrapper,
  .nectar-slider-wrap .swiper-slide{
    width: 100% !important;
  }

  /* Remove any container padding that would show as a “gap” */
  .parallax_slider_outer .container,
  .nectar-slider-wrap .container,
  .container-wrap > .container{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Ensure the image truly covers the banner (both desktop & mobile) */
.parallax_slider_outer .image-bg,
.nectar-slider-wrap .swiper-slide .image-bg{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* Belt & suspenders: prevent any horizontal scroll revealing page bg */
html, body{ overflow-x: hidden; }

/* When off-canvas is closed, ensure fixed elements are fixed to the viewport */
html:not(.side-widget-open) .ocm-effect-wrap,
html:not(.side-widget-open) .ocm-effect-wrap .inner-wrap,
html:not(.side-widget-open) #ajax-content-wrap{
  transform: none !important;
}
/* Always fixed to viewport, never clipped by page wrappers */
a.btn.btn-danger.dg-btn-right,
.whatsapp-container{
  position: fixed !important;
  z-index: 100050 !important;   /* above sliders/overlays */
  pointer-events: auto !important;
}

/* Prevent theme wrappers from overlaying them */
#ajax-loading-screen,
.page-overlay,
.ns-loading-cover,
#slide-out-widget-area-bg,
.ocm-effect-wrap .inner-wrap-bg{
  z-index: 10000 !important;
}

/* === Make Request Quote button shape identical on mobile & desktop === */
.btn.btn-danger.dg-btn-right {
  border-radius: 10px 0 0 10px !important; /* rounded on left side only */
  border: none !important;
  background: #003366 !important;          /* ensure same color */
  color: #fff !important;
  font-weight: 700 !important;
  text-align: center !important;
  box-sizing: border-box !important;
  line-height: 1.2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Optional: keep the hover lift consistent across devices */
.btn.btn-danger.dg-btn-right:hover {
  transform: translateY(-1px);
  transition: transform 0.2s ease;
}

/* Only the hero should use 16:9, and only in PORTRAIT */
@media (max-width: 999px) and (orientation: portrait){
  .parallax_slider_outer,
  .nectar-slider-wrap{
    aspect-ratio: 16 / 9 !important;
    min-height: 56.25vw !important; /* 16:9 floor */
  }
  .nectar-slider-wrap .swiper-container,
  .nectar-slider-wrap .swiper-wrapper,
  .nectar-slider-wrap .swiper-slide{
    min-height: 56.25vw !important;
  }
}

/* In LANDSCAPE, do NOT enforce 16:9 – fill the viewport below header */
@media (max-width: 999px) and (orientation: landscape){
  .parallax_slider_outer,
  .nectar-slider-wrap{
    aspect-ratio: auto !important;
  }
  .parallax_slider_outer,
  .nectar-slider-wrap,
  .nectar-slider-wrap .swiper-container,
  .nectar-slider-wrap .swiper-wrapper,
  .nectar-slider-wrap .swiper-slide{
    height: calc(100dvh - var(--header-h)) !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

/* Safety: NEVER apply aspect-ratio to the whole page */
html, body, #ajax-content-wrap { aspect-ratio: auto !important; }

/* Only the hero should use 16:9, and only in PORTRAIT */
@media (max-width: 999px) and (orientation: portrait){
  .parallax_slider_outer,
  .nectar-slider-wrap{
    aspect-ratio: 16 / 9 !important;
    min-height: 56.25vw !important; /* 16:9 floor */
  }
  .nectar-slider-wrap .swiper-container,
  .nectar-slider-wrap .swiper-wrapper,
  .nectar-slider-wrap .swiper-slide{
    min-height: 56.25vw !important;
  }
}

/* In LANDSCAPE, do NOT enforce 16:9 – fill the viewport below header */
@media (max-width: 999px) and (orientation: landscape){
  .parallax_slider_outer,
  .nectar-slider-wrap{
    aspect-ratio: auto !important;
  }
  .parallax_slider_outer,
  .nectar-slider-wrap,
  .nectar-slider-wrap .swiper-container,
  .nectar-slider-wrap .swiper-wrapper,
  .nectar-slider-wrap .swiper-slide{
    height: calc(100dvh - var(--header-h)) !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

/* Safety: NEVER apply aspect-ratio to the whole page */
html, body, #ajax-content-wrap { aspect-ratio: auto !important; }

/* Mobile header row as a simple flex line */
@media (max-width: 999px){
  #header-outer > header#top .container .row{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important; /* space between logo and controls */
    gap: 8px !important;
    min-height: var(--header-h) !important;
  }

  /* Explicit ordering so theme updates can't flip sides */
  /* Adjust selectors to your markup if needed */
  .logo-container{ order: 1 !important; }
  header#top nav{ order: 2 !important; }
  .slide-out-widget-area-toggle{ order: 3 !important; margin-left: auto !important; }

  /* Ensure the actual clickable icon stays at the far right */
  .slide-out-widget-area-toggle,
  .slide-out-widget-area-toggle a,
  .slide-out-widget-area-toggle button{
    float: none !important;
    margin-right: 8px !important;
  }

  /* Prevent stray text/padding from nudging the icon left */
  header#top nav > ul.buttons{
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
}

/* Fill the banner 100% in both orientations */
.parallax_slider_outer .image-bg,
.nectar-slider-wrap .swiper-slide .image-bg{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* =========================
   MOBILE HEADER DIRECTION
   - Keep PORTRAIT untouched
   - Only adjust in LANDSCAPE
   ========================= */

/* LANDSCAPE ONLY: arrange logo -> nav -> hamburger (right) */
@media (max-width: 999px) and (orientation: landscape){
  #header-outer > header#top .container .row{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-height: var(--header-h) !important;
  }

  /* Explicit order */
  .logo-container{ order: 1 !important; }
  header#top nav{ order: 2 !important; }
  .slide-out-widget-area-toggle{ order: 3 !important; margin-left: auto !important; }

  /* Keep the icon pinned right */
  .slide-out-widget-area-toggle,
  .slide-out-widget-area-toggle a,
  .slide-out-widget-area-toggle button{
    float: none !important;
    margin-right: 8px !important;
  }

  /* Remove stray spacing that can push the burger left */
  header#top nav > ul.buttons{
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
}

/* PORTRAIT: reset to theme defaults (no forced flex/order) */
@media (max-width: 999px) and (orientation: portrait){
  #header-outer > header#top .container .row{
    display: block !important;            /* revert from flex */
    justify-content: unset !important;
    align-items: unset !important;
    gap: 0 !important;
  }

  /* Remove any forced ordering/margins */
  .logo-container,
  header#top nav,
  .slide-out-widget-area-toggle{
    order: 0 !important;
    margin-left: unset !important;
  }

  /* Let the theme handle placement; do not force floats */
  .slide-out-widget-area-toggle,
  .slide-out-widget-area-toggle a,
  .slide-out-widget-area-toggle button{
    float: unset !important;
    margin-right: unset !important;
  }
}
/* =========================
   MOBILE LANDSCAPE = PORTRAIT
   (Logo left, burger right)
   ========================= */
@media (max-width: 999px) and (orientation: landscape){
  /* Use the theme’s portrait flow (no forced flex/order) */
  #header-outer > header#top .container .row{
    display: block !important;
    justify-content: unset !important;
    align-items: unset !important;
    gap: 0 !important;
    min-height: var(--header-h) !important;
  }

  /* Remove any prior ordering from earlier patches */
  .logo-container,
  header#top nav,
  .slide-out-widget-area-toggle{
    order: 0 !important;
    margin-left: unset !important;
  }

  /* Explicitly keep the hamburger on the RIGHT in landscape */
  .slide-out-widget-area-toggle,
  .slide-out-widget-area-toggle a,
  .slide-out-widget-area-toggle button{
    float: right !important;
    margin-right: 8px !important;
  }

  /* Avoid stray left-push from button group spacing */
  header#top nav > ul.buttons{
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
}
/* ================================
   MOBILE LANDSCAPE HEADER ALIGNMENT
   (logo left, burger right, same line)
   ================================ */
@media (max-width: 999px) and (orientation: landscape){
  /* Flex row to keep both on same line */
  #header-outer > header#top .container .row{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: var(--header-h) !important;
    padding: 0 10px !important;
  }

  /* Logo stays on the left */
  .logo-container{
    order: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  /* Main nav (if visible) stays centered or hidden depending on your theme */
  header#top nav{
    order: 2 !important;
    flex: 1 1 auto !important;
    justify-content: center !important;
  }

  /* Burger menu on the right */
  .slide-out-widget-area-toggle{
    order: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
  }

  /* Keep the icon exactly on right edge */
  .slide-out-widget-area-toggle,
  .slide-out-widget-area-toggle a,
  .slide-out-widget-area-toggle button{
    float: right !important;
    margin-right: 8px !important;
  }
}
/* ============================================
   FINAL — MOBILE LANDSCAPE = PORTRAIT STYLE
   (Logo left, burger right, same spacing & height)
   ============================================ */
@media (max-width: 999px) and (orientation: landscape) {

  /* Inherit portrait header proportions */
  #header-outer > header#top .container .row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;

    height: var(--header-h) !important;
    min-height: var(--header-h) !important;

    padding: 0 15px !important;     /* match portrait horizontal spacing */
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* === Logo block === */
  .logo-container {
    order: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 0 0 auto !important;
  }

  /* === Navigation / middle space (if any) === */
  header#top nav {
    order: 2 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* === Burger toggle === */
  .slide-out-widget-area-toggle {
    order: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }

  .slide-out-widget-area-toggle,
  .slide-out-widget-area-toggle a,
  .slide-out-widget-area-toggle button {
    float: none !important;
    margin-right: 0 !important;
    padding: 0 !important;
  }

  /* Keep background solid and prevent layout shifts */
  #header-outer,
  #header-outer > header#top {
    background: var(--dg-header-bg) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
  }

  /* Match portrait sizing and prevent overflow */
  #header-outer {
    height: var(--header-h) !important;
    min-height: var(--header-h) !important;
    overflow: visible !important;
  }
}
/* =====================================================
   MOBILE LANDSCAPE — HERO TRUE FULL WIDTH (100vw edge to edge)
   ===================================================== */
@media (max-width: 999px) and (orientation: landscape) {

  /* 1️⃣ Break hero wrappers out of any centered .container */
  .parallax_slider_outer,
  .nectar-slider-wrap {
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    transform: none !important; /* kill translateX(-50%) if present */
    padding: 0 !important;
  }

  /* 2️⃣ Make sure the slider chain fills that full width */
  .nectar-slider-wrap .swiper-container,
  .nectar-slider-wrap .swiper-wrapper,
  .nectar-slider-wrap .swiper-slide {
    width: 100% !important;
    min-width: 100% !important;
    height: calc(100dvh - var(--header-h)) !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* 3️⃣ The background image must actually cover */
  .parallax_slider_outer .image-bg,
  .nectar-slider-wrap .swiper-slide .image-bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    display: block !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }

  /* 4️⃣ Prevent parent containers from clipping it */
  .container-wrap,
  .container.main-content {
    overflow: visible !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 5️⃣ Belt-and-suspenders: prevent horizontal scroll revealing bg */
  html, body {
    overflow-x: hidden !important;
  }
}

/* ================================================
   MOBILE LANDSCAPE — FORCE TRUE FULL-BLEED HERO
   (Fix for pages like "Learn About" where wrappers
   or row-bg add padding/width caps)
   ================================================ */
@media (max-width: 999px) and (orientation: landscape){

  /* 0) Kill horizontal scroll caused by fractional overflow */
  html, body { overflow-x: hidden !important; }

  /* 1) Remove side padding/caps from page wrappers */
  .container-wrap,
  .container.main-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
    width: 100svw !important;            /* use small-viewport width */
  }

  /* 2) Break the hero wrappers out of any centered container */
  .parallax_slider_outer,
  .nectar-slider-wrap,
  .row-bg-wrap,
  .row-bg-wrap .row-bg {
    position: relative !important;
    left: 50% !important;
    width: 100svw !important;            /* avoids scrollbar-width quirks */
    max-width: 100svw !important;
    margin-left: calc(50% - 50svw) !important; /* true edge-to-edge */
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    transform: none !important;          /* override any translateX(-50%) */
  }

  /* 3) Ensure the slider chain actually fills that width */
  .nectar-slider-wrap .swiper-container,
  .nectar-slider-wrap .swiper-wrapper,
  .nectar-slider-wrap .swiper-slide {
    width: 100% !important;
    min-width: 100% !important;
  }

  /* 4) Image layer must cover the banner fully */
  .parallax_slider_outer .image-bg,
  .nectar-slider-wrap .swiper-slide .image-bg,
  .row-bg-wrap .row-bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    display: block !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }

  /* 5) Height for landscape: fill viewport under fixed header */
  .parallax_slider_outer,
  .nectar-slider-wrap,
  .row-bg-wrap,
  .row-bg-wrap .row-bg,
  .nectar-slider-wrap .swiper-container,
  .nectar-slider-wrap .swiper-wrapper,
  .nectar-slider-wrap .swiper-slide {
    height: calc(100svh - var(--header-h)) !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* 6) Make sure the section after hero doesn't add a visible seam */
  .parallax_slider_outer + .container-wrap,
  .nectar-slider-wrap + .container-wrap,
  .row-bg-wrap + .container-wrap {
    margin-top: 0 !important;
  }
}

/* Safety: if any ancestor uses a transform that creates a new containing block,
   it can clip full-bleed. Neutralize on the hero line only. */
@media (max-width: 999px) and (orientation: landscape){
  .container-wrap [style*="transform"],
  .container.main-content [style*="transform"]{
    transform: none !important;
  }
}

/* ================================================
   HOTFIX — Mobile Landscape hero not visible
   Replace complex centering; use safer vh fallbacks
   ================================================ */
@media (max-width: 999px) and (orientation: landscape){

  /* 0) Avoid horizontal scroll */
  html, body { overflow-x: hidden !important; }

  /* 1) Un-cap page wrappers, but DO NOT offset with left:50% */
  .container-wrap,
  .container.main-content{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
    width: 100vw !important;
  }

  /* 2) Hero wrappers: keep them edge-to-edge without left:50% math */
  .parallax_slider_outer,
  .nectar-slider-wrap,
  .row-bg-wrap,
  .row-bg-wrap .row-bg{
    position: relative !important;
    left: auto !important;            /* undo left:50% */
    right: auto !important;
    transform: none !important;       /* undo translate tricks */
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 3) Height: robust fallback chain (works across iOS/Chrome quirks) */
  :root{
    --dg-hero-h-landscape: calc(100dvh - var(--header-h, 72px));
  }
  @supports (height: 100svh){
    :root{ --dg-hero-h-landscape: calc(100svh - var(--header-h, 72px)); }
  }
  @supports (height: 100lvh){
    :root{ --dg-hero-h-landscape: calc(100lvh - var(--header-h, 72px)); }
  }

  .nectar-slider-wrap,
  .parallax_slider_outer,
  .row-bg-wrap,
  .row-bg-wrap .row-bg,
  .nectar-slider-wrap .swiper-container,
  .nectar-slider-wrap .swiper-wrapper,
  .nectar-slider-wrap .swiper-slide{
    height: var(--dg-hero-h-landscape) !important;
    min-height: 240px !important;     /* safety floor */
    max-height: none !important;
  }

  /* 4) Make sure the actual image is painted & covering */
  .parallax_slider_outer .image-bg,
  .nectar-slider-wrap .swiper-slide .image-bg,
  .row-bg-wrap .row-bg{
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 100% !important;
    height: 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }

  /* 5) No seam above/below */
  .parallax_slider_outer + .container-wrap,
  .nectar-slider-wrap + .container-wrap,
  .row-bg-wrap + .container-wrap{
    margin-top: 0 !important;
  }
}

/* If a specific template still hides the slide chain with inline styles */
@media (max-width: 999px) and (orientation: landscape){
  .nectar-slider-wrap .swiper-container[style*="display:none"],
  .nectar-slider-wrap .swiper-wrapper[style*="display:none"],
  .nectar-slider-wrap .swiper-slide[style*="display:none"]{
    display: block !important;
  }
  .nectar-slider-wrap .swiper-container[style*="visibility:hidden"],
  .nectar-slider-wrap .swiper-wrapper[style*="visibility:hidden"],
  .nectar-slider-wrap .swiper-slide[style*="visibility:hidden"]{
    visibility: visible !important; opacity: 1 !important;
  }
}

/* ================================================
   NO-GAP ABOVE HERO — Mobile Landscape
   Kills any extra top padding/margin/spacers
   ================================================ */
@media (max-width: 999px) and (orientation: landscape){

  /* Kill theme spacer completely */
  #header-space{
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
  }

  /* Remove top padding/margin on primary wrappers */
  #ajax-content-wrap,
  .container-wrap,
  .container.main-content,
  body .container-wrap > .container{
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Ensure the hero itself has no top offset */
  .parallax_slider_outer,
  .nectar-slider-wrap{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Some Salient/skins add page-template padding – neutralize */
  [class*="page-template"] .container-wrap{
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* If sticky header logic tries to add an extra offset, ignore it here */
  html.has-sticky-header #ajax-content-wrap{
    margin-top: 0 !important;
  }
}

/* =========================================
   LANDSCAPE: correct header height + no gap
   ========================================= */
@media (max-width: 999px) and (orientation: landscape){
  /* 1) Use the real header height in landscape (Salient typically ~56px) */
  :root{ --header-h: 56px; }           /* adjust to your exact measured px if needed */

  /* 2) Keep the single reservation method consistent */
  body{ margin-top: var(--header-h) !important; }

  /* 3) Nuke any extra top spacing wrappers might add */
  #header-space{
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
  }
  #ajax-content-wrap,
  .container-wrap,
  .container.main-content,
  body .container-wrap > .container{
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* 4) Ensure the hero has no accidental top offset */
  .parallax_slider_outer,
  .nectar-slider-wrap,
  .nectar-slider-wrap .swiper-container{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* 5) Some templates add a top spacer to the first row—neutralize it */
  .wpb_row:first-child,
  .vc_row-fluid:first-child{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* ===============================================
   MOBILE LANDSCAPE — remove gap under fixed header
   Strategy:
   - No margin/padding on <body>
   - Reserve space ONLY on #ajax-content-wrap
   - Use a smaller, accurate header var for landscape
   =============================================== */
@media (max-width: 999px) and (orientation: landscape){

  /* 0) Pick a tighter header height for landscape */
  :root{
    --header-h-landscape: 48px; /* try 46–52 if needed */
  }

  /* 1) Zero ALL global offsets in landscape */
  body{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  html.has-sticky-header body,
  .admin-bar body{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* 2) Reserve the header height ONLY on the content wrapper */
  #ajax-content-wrap{
    padding-top: var(--header-h-landscape) !important;
    margin-top: 0 !important;
  }

  /* 3) Kill any theme spacer/dup offsets */
  #header-space{
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
  }

  /* 4) Ensure header element is actually this tall */
  #header-outer,
  #header-outer > header#top,
  header, .site-header, #header{
    height: var(--header-h-landscape) !important;
    min-height: var(--header-h-landscape) !important;
  }

  /* 5) Prevent first section from re-introducing a gap */
  .parallax_slider_outer,
  .nectar-slider-wrap,
  .wpb_row:first-child,
  .vc_row-fluid:first-child{
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
  }

  /* 6) Make sure hero sits flush and fills */
  .nectar-slider-wrap,
  .nectar-slider-wrap .swiper-container,
  .nectar-slider-wrap .swiper-wrapper,
  .nectar-slider-wrap .swiper-slide{
    margin-top: 0 !important;
    height: 100dvh !important;           /* fill the landscape viewport */
    min-height: 100dvh !important;
    max-height: 100dvh !important;
  }
  .nectar-slider-wrap .swiper-slide .image-bg{
    inset: 0 !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  /* 7) If logged in (admin bar), add its height on top */
  .admin-bar #ajax-content-wrap{
    padding-top: calc(var(--header-h-landscape) + 46px) !important;
  }
}
/* ===== SUBMENU NORMALIZATION (all pages) ===== */
header#top nav > ul.sf-menu > li { position: relative !important; }

/* Anchor first-level dropdown exactly under its parent LI */
header#top nav .sf-menu > li > ul{
  position: absolute !important;
  left: 0 !important;
  top: calc(100% + var(--submenu-offset, 0px)) !important;
  margin: 0 !important;                 /* kill negative/extra margins */
  transform: translateY(0) !important;  /* neutralize theme shifts */
}

/* Hover/focus open – same vertical offset */
header#top nav .sf-menu > li:hover > ul,
header#top nav .sf-menu > li.sfHover > ul{
  top: calc(100% + var(--submenu-offset, 0px)) !important;
}

/* 2nd+ level flyouts align to the edge of their parent LI */
header#top nav .sf-menu li li > ul{
  top: calc(0px + var(--submenu-offset, 0px)) !important;
  left: 100% !important;
}

/* ===== Match “Learn About” offset on Commercial Projects only ===== */
body.layout-commercial [data-nav-scope]{
  --submenu-offset: 35px; /* same value you use on Learn About */
}

/* Safety: ensure dropdown isn’t clipped by any header wrappers */
#header-outer, 
#header-outer .container, 
#header-outer .row{
  overflow: visible !important;
}

/* ======================================================
   MOBILE BURGER MENU — Full Header Height Click Zone (no visual shift)
   ====================================================== */
@media (max-width: 999px){

  /* 1. Full-height invisible tap zone */
  #header-outer .slide-out-widget-area-toggle{
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 64px !important;              /* tap area width */
    height: 100% !important;             /* matches header height */
    z-index: 10050 !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* 2. Keep the icon exactly where it was */
  #header-outer .slide-out-widget-area-toggle > i,
  #header-outer .slide-out-widget-area-toggle > svg{
    position: absolute !important;
    top: 50% !important;                 /* vertical centering relative to header */
    right: 20px !important;              /* stays near header edge */
    transform: translateY(-50%) !important;
    font-size: 22px !important;
    pointer-events: none !important;
  }

  /* 3. Ensure the icon’s container doesn’t visually move anything */
  #header-outer .slide-out-widget-area-toggle{
    display: block !important;
  }

  /* 4. Prevent any other header layers from stealing clicks */
  #header-outer .slide-out-widget-area-toggle *{
    pointer-events: none !important;
  }

  /* 5. Safety: make sure header stays clean */
  #header-outer{
    overflow: visible !important;
    position: relative !important;
  }
}

/* ================================================
   MOBILE BURGER — make first tap reliable on iOS
   ================================================ */
@media (max-width: 999px){

  /* A) Avoid iOS first-tap miss on transformed fixed headers */
  #header-outer,
  #header-outer > header#top{
    transform: none !important;            /* remove translateZ(0) for hit-test */
    will-change: auto !important;
  }

  /* B) Full-height tap zone stays, anchored to the right */
  #header-outer .slide-out-widget-area-toggle{
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 64px !important;                /* tap width */
    height: 100% !important;               /* full header height */
    z-index: 10060 !important;
    cursor: pointer !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* C) IMPORTANT: let the theme’s real control catch the click */
  #header-outer .slide-out-widget-area-toggle a,
  #header-outer .slide-out-widget-area-toggle button{
    position: absolute !important;
    inset: 0 !important;                   /* fill the tap zone */
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    border: 0 !important;
    pointer-events: auto !important;       /* <-- first tap reaches JS handler */
  }

  /* D) Icon stays visually centered and doesn’t steal events */
  #header-outer .slide-out-widget-area-toggle > i,
  #header-outer .slide-out-widget-area-toggle > svg{
    position: absolute !important;
    top: 50% !important;
    right: 20px !important;
    transform: translateY(-50%) !important;
    font-size: 22px !important;
    pointer-events: none !important;       /* clicks pass through to anchor */
  }

  /* E) Kill any header adornments that might intercept first tap */
  #header-outer::before,
  #header-outer::after{
    pointer-events: none !important;
  }
}

@media (max-width: 999px){
  /* Header must always be the topmost hit target on mobile */
  #header-outer{ z-index: 2147483000 !important; transform: none !important; }

  /* Make the burger’s hit area cover the full header height without moving the icon */
  #header-outer .slide-out-widget-area-toggle{
    position: absolute !important; top:0 !important; right:0 !important;
    height: 100% !important; width: 72px !important;
    cursor: pointer; pointer-events: auto !important; z-index: 2147483600 !important;
  }
  #header-outer .slide-out-widget-area-toggle a,
  #header-outer .slide-out-widget-area-toggle button{
    position: absolute !important; inset:0 !important; display:block !important;
    width:100% !important; height:100% !important; background:transparent !important;
    border:0 !important; pointer-events:auto !important;
  }
  #header-outer .slide-out-widget-area-toggle > i,
  #header-outer .slide-out-widget-area-toggle > svg{
    position:absolute !important; top:50% !important; right:20px !important;
    transform:translateY(-50%) !important; pointer-events:none !important;
    font-size:22px !important;
  }

  /* While panel is closed or just opening, overlays can’t steal the first tap */
  #ajax-loading-screen, .page-overlay, .ns-loading-cover, #slide-out-widget-area-bg{
    pointer-events: none !important;
  }
}

/* === Burger: make the clickable area as wide as the header edge, without shifting the icon === */
:root{ --dg-burger-hit-w: clamp(56px, 12vw, 80px); } /* comfy target (>=56px) */

#header-outer .slide-out-widget-area-toggle{
  position: relative !important;         /* anchor the overlay */
  z-index: 10006 !important;             /* above header paint */
}

/* Stretch the actual control behind the bars */
#header-outer .slide-out-widget-area-toggle > a,
#header-outer .slide-out-widget-area-toggle > button,
#header-outer .slide-out-widget-area-toggle a.slide-out-widget-area-toggle,
#header-outer .slide-out-widget-area-toggle button.slide-out-widget-area-toggle{
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;                   /* keep it at the right edge */
  width: var(--dg-burger-hit-w) !important;
  height: var(--header-h) !important;    /* full header height */
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  z-index: 1 !important;                 /* under the visual bars */
  pointer-events: auto !important;
  -webkit-tap-highlight-color: transparent;
}

/* Keep the 3 bars exactly where they were, above the widened hit area */
#header-outer .slide-out-widget-area-toggle svg,
#header-outer .slide-out-widget-area-toggle i,
#header-outer .slide-out-widget-area-toggle .lines,
#header-outer .slide-out-widget-area-toggle .hamburger{
  position: relative !important;
  z-index: 2 !important;                 /* draw on top of the clickable layer */
  pointer-events: none !important;       /* all taps go to the stretched control */
}

/* Mobile portrait/landscape: same behavior */
@media (max-width: 999px){
  #header-outer .slide-out-widget-area-toggle > a,
  #header-outer .slide-out-widget-area-toggle > button{
    height: var(--header-h) !important;
    width: var(--dg-burger-hit-w) !important;
  }
}

#header-outer .slide-out-widget-area-toggle > a,
#header-outer .slide-out-widget-area-toggle > button {
  position: absolute !important;
  inset: 0 !important;
  width: 72px !important;              /* full clickable width */
  height: var(--header-h) !important;  /* full header height */
  background: transparent !important;
  border: 0 !important;
  pointer-events: auto !important;
  -webkit-tap-highlight-color: transparent;
}
#header-outer .slide-out-widget-area-toggle i,
#header-outer .slide-out-widget-area-toggle svg {
  pointer-events: none !important;     /* visual only */
}

/* Kill any drawer overlays/shadows everywhere */
#slide-out-widget-area-bg,
.ocm-effect-wrap,
.ocm-effect-wrap .inner-wrap-bg,
#dg-ocm-overlay{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

#header-outer .slide-out-widget-area-toggle{
  position: relative !important;
  width: 72px !important;
  height: var(--header-h) !important;
}
#header-outer .slide-out-widget-area-toggle > a,
#header-outer .slide-out-widget-area-toggle > button{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  border: 0 !important;
  pointer-events: auto !important;
  -webkit-tap-highlight-color: transparent;
}
#header-outer .slide-out-widget-area-toggle i,
#header-outer .slide-out-widget-area-toggle svg{ pointer-events: none !important; }

html.side-widget-open:not(.dg-ocm-live),
body.side-widget-open:not(.dg-ocm-live){
  overflow: auto !important;
  touch-action: auto !important;
}

/* Panel default & open state (no overlay, no shadow) */
#slide-out-widget-area,
.slide-out-widget-area,
[data-off-canvas-panel]{
  transform: translateX(100%);
  pointer-events: none;
  transition: transform .35s ease;
  will-change: transform;
}
html.dg-ocm-open #slide-out-widget-area,
html.dg-ocm-open .slide-out-widget-area,
html.dg-ocm-open [data-off-canvas-panel]{
  transform: translateX(0);
  pointer-events: auto;
}

/***** FIX PACK — append at end of style.css *****/

/* 1) DO NOT globally hide the actual panel */
.ns-loading-cover,
.ajax-loading-screen,
#slide-out-widget-area-bg,
.ocm-effect-wrap,
.ocm-effect-wrap .inner-wrap-bg {
  /* keep these hidden */
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
  z-index:-1 !important;
}

/* Explicitly re-allow the panel (we removed it from the hide list) */
#slide-out-widget-area,
.slide-out-widget-area,
[data-off-canvas-panel]{
  display:block !important;                /* ensure it can render */
  visibility:hidden; opacity:0; pointer-events:none;
  position:fixed !important; top:0; right:0; bottom:0;
  width:86vw; max-width:420px;
  background:#fff; z-index:10002;
  transform:translateX(100%);
  transition:transform .35s ease, opacity .25s ease;
}

/* Open state driven by your JS */
html.dg-ocm-open #slide-out-widget-area,
html.dg-ocm-open .slide-out-widget-area,
html.dg-ocm-open [data-off-canvas-panel]{
  visibility:visible; opacity:1; pointer-events:auto;
  transform:translateX(0);
}

/* 2) Single source of truth for mobile header offset (portrait & landscape) */
:root { --header-h: 90px; }                /* desktop */
@media (max-width:999px){
  :root { --header-h: 72px; }              /* mobile default */
}
body{ margin-top: var(--header-h) !important; }

/* In landscape, if your real header is shorter, adjust here once */
@media (max-width:999px) and (orientation:landscape){
  :root { --header-h: 56px; }              /* tweak to your real measured px */
  body{ margin-top: var(--header-h) !important; }
}

/* Kill the old duplicates that zeroed body margin-top on mobile */
@media (max-width:999px){
  body{ margin-top: var(--header-h) !important; } /* override any earlier 0 */
}

/* 3) Choose one hero strategy: keep svw full-bleed in landscape only */
@media (max-width:999px) and (orientation:landscape){
  .parallax_slider_outer,
  .nectar-slider-wrap{
    position:relative !important;
    width:100svw !important; max-width:100svw !important;
    margin:0 !important; left:auto !important; right:auto !important;
    transform:none !important; padding:0 !important;
    height:calc(100svh - var(--header-h)) !important;
  }
  .nectar-slider-wrap .swiper-container,
  .nectar-slider-wrap .swiper-wrapper,
  .nectar-slider-wrap .swiper-slide{
    width:100% !important;
    height:calc(100svh - var(--header-h)) !important;
    min-height:0 !important; max-height:none !important;
  }
  .parallax_slider_outer .image-bg,
  .nectar-slider-wrap .swiper-slide .image-bg{
    inset:0 !important; width:100% !important; height:100% !important;
    background-size:cover !important; background-position:center !important;
  }
  /* prevent seams */
  .parallax_slider_outer + .container-wrap,
  .nectar-slider-wrap + .container-wrap{ margin-top:0 !important; }
  html,body{ overflow-x:hidden !important; }
}

/* 4) Burger: one clean, reliable tap zone that doesn’t move the icon */
:root{ --dg-burger-hit-w: clamp(56px, 12vw, 80px); }

@media (max-width:999px){
  #header-outer{ z-index: 2147483000 !important; transform:none !important; }

  #header-outer .slide-out-widget-area-toggle{
    position:absolute !important; top:0 !important; right:0 !important;
    width:var(--dg-burger-hit-w) !important;
    height:var(--header-h) !important;
    z-index:2147483600 !important;
    cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  }
  #header-outer .slide-out-widget-area-toggle a,
  #header-outer .slide-out-widget-area-toggle button{
    position:absolute !important; inset:0 !important;
    width:100% !important; height:100% !important;
    background:transparent !important; border:0 !important;
    pointer-events:auto !important;
  }
  #header-outer .slide-out-widget-area-toggle i,
  #header-outer .slide-out-widget-area-toggle svg{
    position:absolute !important; top:50% !important; right:20px !important;
    transform:translateY(-50%) !important;
    pointer-events:none !important; font-size:22px !important;
  }
}

/* 5) Make sure nothing else steals the first tap */
#ajax-loading-screen, .page-overlay, .ns-loading-cover, #slide-out-widget-area-bg{
  pointer-events:none !important;
}

/* ==== OFF-CANVAS SUBMENU ARROW — lock to the title line ==== */

/* 1) Make the label row the positioning context */
#slide-out-widget-area .menu-item-has-children > a,
.slide-out-widget-area  .menu-item-has-children > a{
  position: relative !important;
  display: flex !important;             /* use flex to keep text & arrow aligned */
  align-items: center !important;        /* vertical center on the TEXT line */
  gap: .5rem !important;
  min-height: 48px !important;           /* comfy tap target */
  padding-right: 42px !important;        /* room for the arrow */
  line-height: 1.2 !important;
  white-space: nowrap;                   /* avoid wrapped titles affecting arrow */
}

/* 2) Absolutely pin the arrow inside the anchor row (not the <li>) */
#slide-out-widget-area .menu-item-has-children > a > .sf-sub-indicator,
#slide-out-widget-area .menu-item-has-children > a > .nectar-menu-arrow,
#slide-out-widget-area .menu-item-has-children > a > i[class*="icon-"]:last-child,
.slide-out-widget-area  .menu-item-has-children > a > .sf-sub-indicator,
.slide-out-widget-area  .menu-item-has-children > a > .nectar-menu-arrow,
.slide-out-widget-area  .menu-item-has-children > a > i[class*="icon-"]:last-child{
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) rotate(0deg) !important; /* always aligned */
  pointer-events: none !important;        /* taps go to the row */
  margin: 0 !important;
}

/* 3) If theme rotates arrow on open, keep rotation but preserve vertical lock */
#slide-out-widget-area .menu-item-has-children.open  > a > .sf-sub-indicator,
#slide-out-widget-area .menu-item-has-children.sfHover > a > .sf-sub-indicator,
.slide-out-widget-area  .menu-item-has-children.open  > a > .sf-sub-indicator,
.slide-out-widget-area  .menu-item-has-children.sfHover > a > .sf-sub-indicator{
  transform: translateY(-50%) rotate(180deg) !important;
  transition: transform .2s ease;
}

/* 4) Prevent the <li> becoming a flex container (which re-centers the arrow) */
#slide-out-widget-area .menu-item-has-children,
.slide-out-widget-area  .menu-item-has-children{
  display: block !important;
  align-items: stretch !important;
}

/* 5) Don't let opening submenu push the label row height */
#slide-out-widget-area .menu-item-has-children > ul,
.slide-out-widget-area  .menu-item-has-children > ul{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 6) Some skins put the arrow as a sibling span (not child). Catch that too. */
#slide-out-widget-area .menu-item-has-children > a + .sf-sub-indicator,
.slide-out-widget-area  .menu-item-has-children > a + .sf-sub-indicator{
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
}
/* ===== OFF-CANVAS: keep submenu arrow on same line as title ===== */

/* A) Common case: arrow is INSIDE the <a> (child) */
#slide-out-widget-area .menu-item-has-children > a,
.slide-out-widget-area  .menu-item-has-children > a{
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  min-height: 48px !important;       /* comfy tap target */
  padding-right: 42px !important;     /* room for arrow */
  line-height: 1.2 !important;
}

#slide-out-widget-area .menu-item-has-children > a > .sf-sub-indicator,
#slide-out-widget-area .menu-item-has-children > a > .nectar-menu-arrow,
#slide-out-widget-area .menu-item-has-children > a > .sub-arrow,
.slide-out-widget-area  .menu-item-has-children > a > .sf-sub-indicator,
.slide-out-widget-area  .menu-item-has-children > a > .nectar-menu-arrow,
.slide-out-widget-area  .menu-item-has-children > a > .sub-arrow{
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) rotate(0deg) !important;
  margin: 0 !important;
  pointer-events: none !important;
}

/* Keep rotation on open without breaking the vertical lock */
#slide-out-widget-area .menu-item-has-children.open  > a > .sf-sub-indicator,
#slide-out-widget-area .menu-item-has-children.sfHover > a > .sf-sub-indicator,
.slide-out-widget-area  .menu-item-has-children.open  > a > .sf-sub-indicator,
.slide-out-widget-area  .menu-item-has-children.sfHover > a > .sf-sub-indicator{
  transform: translateY(-50%) rotate(180deg) !important;
  transition: transform .2s ease;
}

/* B) Alternate markup: arrow is a SIBLING of <a> (not inside it)
   -> Use CSS grid to pin arrow to row 1 with the title. */
#slide-out-widget-area .menu-item-has-children,
.slide-out-widget-area  .menu-item-has-children{
  display: grid !important;
  grid-template-columns: 1fr auto !important;  /* title | arrow */
  grid-auto-rows: auto !important;
  align-items: center !important;
}

/* Title row sits in row 1, col 1 */
#slide-out-widget-area .menu-item-has-children > a,
.slide-out-widget-area  .menu-item-has-children > a{
  grid-column: 1 / 2 !important;
  grid-row: 1 !important;
}

/* Arrow sibling stays in row 1, col 2 */
#slide-out-widget-area .menu-item-has-children > .sf-sub-indicator,
#slide-out-widget-area .menu-item-has-children > .nectar-menu-arrow,
#slide-out-widget-area .menu-item-has-children > .sub-arrow,
.slide-out-widget-area  .menu-item-has-children > .sf-sub-indicator,
.slide-out-widget-area  .menu-item-has-children > .nectar-menu-arrow,
.slide-out-widget-area  .menu-item-has-children > .sub-arrow{
  grid-column: 2 / 3 !important;
  grid-row: 1 !important;
  position: static !important;          /* grid handles placement */
  align-self: center !important;
  justify-self: end !important;
  margin-right: 14px !important;
  transform: rotate(0deg) !important;
  pointer-events: none !important;
}

/* Rotate sibling arrow when open */
#slide-out-widget-area .menu-item-has-children.open  > .sf-sub-indicator,
#slide-out-widget-area .menu-item-has-children.sfHover > .sf-sub-indicator,
.slide-out-widget-area  .menu-item-has-children.open  > .sf-sub-indicator,
.slide-out-widget-area  .menu-item-has-children.sfHover > .sf-sub-indicator{
  transform: rotate(180deg) !important;
  transition: transform .2s ease;
}

/* Submenu always flows on row 2, full width */
#slide-out-widget-area .menu-item-has-children > ul.sub-menu,
.slide-out-widget-area  .menu-item-has-children > ul.sub-menu{
  grid-column: 1 / -1 !important;       /* span both columns */
  grid-row: 2 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Safety: prevent LI-level flex from recentering arrow when submenu expands */
#slide-out-widget-area .menu-item-has-children.sfHover,
.slide-out-widget-area  .menu-item-has-children.sfHover{
  align-items: start !important;
}

/* ===== OFF-CANVAS: keep submenu arrow on same line as title ===== */

/* A) Common case: arrow is INSIDE the <a> (child) */
#slide-out-widget-area .menu-item-has-children > a,
.slide-out-widget-area  .menu-item-has-children > a{
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  min-height: 48px !important;       /* comfy tap target */
  padding-right: 42px !important;     /* room for arrow */
  line-height: 1.2 !important;
}

#slide-out-widget-area .menu-item-has-children > a > .sf-sub-indicator,
#slide-out-widget-area .menu-item-has-children > a > .nectar-menu-arrow,
#slide-out-widget-area .menu-item-has-children > a > .sub-arrow,
.slide-out-widget-area  .menu-item-has-children > a > .sf-sub-indicator,
.slide-out-widget-area  .menu-item-has-children > a > .nectar-menu-arrow,
.slide-out-widget-area  .menu-item-has-children > a > .sub-arrow{
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) rotate(0deg) !important;
  margin: 0 !important;
  pointer-events: none !important;
}

/* Keep rotation on open without breaking the vertical lock */
#slide-out-widget-area .menu-item-has-children.open  > a > .sf-sub-indicator,
#slide-out-widget-area .menu-item-has-children.sfHover > a > .sf-sub-indicator,
.slide-out-widget-area  .menu-item-has-children.open  > a > .sf-sub-indicator,
.slide-out-widget-area  .menu-item-has-children.sfHover > a > .sf-sub-indicator{
  transform: translateY(-50%) rotate(180deg) !important;
  transition: transform .2s ease;
}

/* B) Alternate markup: arrow is a SIBLING of <a> (not inside it)
   -> Use CSS grid to pin arrow to row 1 with the title. */
#slide-out-widget-area .menu-item-has-children,
.slide-out-widget-area  .menu-item-has-children{
  display: grid !important;
  grid-template-columns: 1fr auto !important;  /* title | arrow */
  grid-auto-rows: auto !important;
  align-items: center !important;
}

/* Title row sits in row 1, col 1 */
#slide-out-widget-area .menu-item-has-children > a,
.slide-out-widget-area  .menu-item-has-children > a{
  grid-column: 1 / 2 !important;
  grid-row: 1 !important;
}

/* Arrow sibling stays in row 1, col 2 */
#slide-out-widget-area .menu-item-has-children > .sf-sub-indicator,
#slide-out-widget-area .menu-item-has-children > .nectar-menu-arrow,
#slide-out-widget-area .menu-item-has-children > .sub-arrow,
.slide-out-widget-area  .menu-item-has-children > .sf-sub-indicator,
.slide-out-widget-area  .menu-item-has-children > .nectar-menu-arrow,
.slide-out-widget-area  .menu-item-has-children > .sub-arrow{
  grid-column: 2 / 3 !important;
  grid-row: 1 !important;
  position: static !important;          /* grid handles placement */
  align-self: center !important;
  justify-self: end !important;
  margin-right: 14px !important;
  transform: rotate(0deg) !important;
  pointer-events: none !important;
}

/* Rotate sibling arrow when open */
#slide-out-widget-area .menu-item-has-children.open  > .sf-sub-indicator,
#slide-out-widget-area .menu-item-has-children.sfHover > .sf-sub-indicator,
.slide-out-widget-area  .menu-item-has-children.open  > .sf-sub-indicator,
.slide-out-widget-area  .menu-item-has-children.sfHover > .sf-sub-indicator{
  transform: rotate(180deg) !important;
  transition: transform .2s ease;
}

/* Submenu always flows on row 2, full width */
#slide-out-widget-area .menu-item-has-children > ul.sub-menu,
.slide-out-widget-area  .menu-item-has-children > ul.sub-menu{
  grid-column: 1 / -1 !important;       /* span both columns */
  grid-row: 2 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Safety: prevent LI-level flex from recentering arrow when submenu expands */
#slide-out-widget-area .menu-item-has-children.sfHover,
.slide-out-widget-area  .menu-item-has-children.sfHover{
  align-items: start !important;
}

/* === GLOBAL SLIDER RESCUE (Salient/Nectar/Swiper) — 2025-11-03 === */
/* Always visible/painted; prevent theme/inline init from hiding things */
.nectar-slider-wrap,
.nectar-slider-wrap .swiper-container,
.nectar-slider-wrap .swiper-wrapper,
.nectar-slider-wrap .swiper-slide {
  opacity: 1 !important;
  visibility: visible !important;
}

.nectar-slider-wrap .swiper-container[style*="visibility:hidden"],
.nectar-slider-wrap .swiper-wrapper[style*="visibility:hidden"],
.nectar-slider-wrap .swiper-slide[style*="visibility:hidden"] {
  visibility: visible !important;
  opacity: 1 !important;
}
.nectar-slider-wrap .swiper-container[style*="display:none"],
.nectar-slider-wrap .swiper-wrapper[style*="display:none"],
.nectar-slider-wrap .swiper-slide[style*="display:none"],
.nectar-slider-wrap .swiper-slide .image-bg[style*="display:none"] {
  display: block !important;
}

/* Give the slider a reliable height on both breakpoints */
:root{
  --dg-hero-h-desktop: 80vh;
  --dg-hero-h-mobile: 70vh;
}

.nectar-slider-wrap .swiper-container,
.nectar-slider-wrap .swiper-wrapper,
.nectar-slider-wrap .swiper-slide {
  width: 100% !important;
}

@media (min-width: 1000px){
  .nectar-slider-wrap .swiper-container,
  .nectar-slider-wrap .swiper-wrapper,
  .nectar-slider-wrap .swiper-slide {
    height: var(--dg-hero-h-desktop) !important;
    min-height: 300px !important;
  }
}
@media (max-width: 999px){
  .nectar-slider-wrap .swiper-container,
  .nectar-slider-wrap .swiper-wrapper,
  .nectar-slider-wrap .swiper-slide {
    height: var(--dg-hero-h-mobile) !important;
    min-height: 56.25vw !important;   /* 16:9 floor */
    max-height: 100dvh !important;
  }
}

/* Background layer must actually paint & cover */
.parallax_slider_outer .image-bg,
.nectar-slider-wrap .swiper-slide .image-bg {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 0 !important;
  pointer-events: none !important; /* don’t steal clicks */
}

/* Ensure outer wrappers don’t clip or hide during init */
.parallax_slider_outer,
.nectar-slider-wrap {
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Kill any “loading/overlay” that might sit above the hero */
#ajax-loading-screen,
.page-overlay,
.ns-loading-cover,
.nectar-slider-wrap .nectar-slider-loading,
.nectar-slider-wrap .slide-bg-overlay,
.nectar-slider-wrap .color-overlay,
.nectar-slider-wrap .overlays,
.nectar-slider-wrap .bg-overlay,
.nectar-slider-wrap .no-click {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Some templates push the next section up; keep a clean seam */
.parallax_slider_outer + .container-wrap,
.nectar-slider-wrap + .container-wrap {
  margin-top: 0 !important;
}

/* === HERO IMAGE VISIBLE HOTFIX — 2025-11-03 === */
/* 1) Never defer paint for hero/row backgrounds (can hide bg images) */
.parallax_slider_outer,
.nectar-slider-wrap,
.row-bg-wrap,
.row-bg-wrap .row-bg {
  content-visibility: visible !important;
  contain: none !important;
  contain-intrinsic-size: auto !important;
}

/* 2) Cover ALL Salient/Nectar bg variants, not just .swiper-slide .image-bg */
.parallax_slider_outer .image-bg,
.nectar-slider-wrap .image-bg,
.nectar-slider-wrap .slide-bg-wrap .image-bg,
.nectar-slider-wrap .swiper-slide .image-bg,
.row-bg-wrap .row-bg {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* 3) Ensure slide and wrapper have a real stacking context & height */
.nectar-slider-wrap,
.nectar-slider-wrap .swiper-container,
.nectar-slider-wrap .swiper-wrapper,
.nectar-slider-wrap .swiper-slide,
.parallax_slider_outer {
  position: relative !important;
  overflow: hidden !important;
}

@media (min-width:1000px){
  .nectar-slider-wrap .swiper-container,
  .nectar-slider-wrap .swiper-wrapper,
  .nectar-slider-wrap .swiper-slide,
  .parallax_slider_outer,
  .nectar-slider-wrap {
    height: var(--dg-hero-h-desktop, 80vh) !important;
    min-height: 300px !important;
  }
}

@media (max-width:999px){
  .nectar-slider-wrap .swiper-container,
  .nectar-slider-wrap .swiper-wrapper,
  .nectar-slider-wrap .swiper-slide,
  .parallax_slider_outer,
  .nectar-slider-wrap {
    height: var(--dg-hero-h-mobile, 70vh) !important;
    min-height: 56.25vw !important;
    max-height: 100dvh !important;
  }
}

/* 4) If any theme/inline rule sets the image holder to display:none or hidden, undo it */
.nectar-slider-wrap .swiper-container[style*="display:none"],
.nectar-slider-wrap .swiper-wrapper[style*="display:none"],
.nectar-slider-wrap .swiper-slide[style*="display:none"],
.nectar-slider-wrap .slide-bg-wrap .image-bg[style*="display:none"],
.nectar-slider-wrap .image-bg[style*="display:none"] {
  display: block !important;
}
.nectar-slider-wrap .swiper-container[style*="visibility:hidden"],
.nectar-slider-wrap .swiper-wrapper[style*="visibility:hidden"],
.nectar-slider-wrap .swiper-slide[style*="visibility:hidden"],
.nectar-slider-wrap .slide-bg-wrap .image-bg[style*="visibility:hidden"],
.nectar-slider-wrap .image-bg[style*="visibility:hidden"] {
  visibility: visible !important; opacity: 1 !important;
}

/* 5) Prevent loading overlay CLS but keep interactive layers alive */
#ajax-loading-screen {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: -1 !important;
  transition: opacity .3s ease;
}

/* Keep page overlays hidden only during initial load */
body:not(.loaded) .page-overlay,
body:not(.loaded) .ns-loading-cover {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* Once body.loaded is present (theme adds this after load), allow normal display */
body.loaded .page-overlay,
body.loaded .ns-loading-cover {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 999 !important;
}

/* Ensure fixed CTAs always sit above overlays */
.whatsapp-container,
#latest-projects-cta,
.btn.dg-btn-right {
  z-index: 2147483647 !important;
  pointer-events: auto !important;
}

/* === Safe Swiper / Nectar Slider defaults === */
.nectar-slider-wrap .swiper-container {
  overflow: hidden;
}

.nectar-slider-wrap .swiper-wrapper {
  will-change: transform;
}

.nectar-slider-wrap .swiper-slide {
  position: relative;
}

.nectar-slider-wrap .image-bg {
  position: absolute;
  inset: 0;
}

[inert] { pointer-events: none; }
[inert] * { pointer-events: none; }

/* Kill the extra offset on #ajax-content-wrap in the mid-desktop band */
@media (min-width:1000px) and (max-width:1300px){
  /* Salient’s wrapper that often adds padding-top for fixed header */
  #ajax-content-wrap,
  .ajax-content-wrap {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* If you’re using the spacer, keep it 0 here too (prevents double offset) */
  #header-space{
    height: 0 !important;
    min-height: 0 !important;
  }
}

/* WhatsApp button container: fix position only (don’t force size/look) */
.whatsapp-container{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2147483000;           /* stay on top */
  display: flex;                  /* allow icon + optional text */
  align-items: center;
  gap: 10px;                      /* space between icon and text */
  pointer-events: auto;
  /* DO NOT set width/height here – let inner elements size themselves */
  /* DO NOT use contain:size/paint – it clips/hides the text bubble’s growth */
  /* DO NOT force transform:none – keep any subtle animations you use */
}

/* Mobile: keep same position; sizing comes from inner elements */
@media (max-width: 600px){
  .whatsapp-container{
    right: 20px;
    bottom: 20px;
    gap: 10px;
  }
}



/* Reserve hero height immediately */
.parallax_slider_outer,
.nectar-slider-wrap .swiper-container {
  min-height: 70vh;              /* matches your runtime height */
  height: 70vh;                  /* reserve space before JS runs */
  background: #000;              /* matches current hero bg to avoid flash */
}

/* Make the inner chain also non-collapsing */
.nectar-slider-wrap .swiper-wrapper { min-height: 100%; }
.nectar-slider-wrap .swiper-slide   { min-height: 100%; }

/* Keep layout width stable whether scrollbar shows or not */
html{ scrollbar-gutter: stable both-edges; }

/* Never let legacy loaders pop in after paint */
#ajax-loading-screen,
.ajax-loading-screen{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Ensure FA swap never reflows text metrics */
@font-face{
  font-family:"FontAwesome";
  src:url("/themes/desert-grove/assets/fonts/fontawesome-webfont.woff2?v=4.7.0") format("woff2");
  font-weight:normal;
  font-style:normal;
  font-display:swap;  /* or 'swap' if you prefer; 'optional' minimizes CLS */
}

/* Icons occupy a fixed inline box immediately, so no jump on swap */
.fa, [class^="fa-"], [class*=" fa-"],
.icon-salient-search{
  display:inline-block;      /* prevents width collapse */
  width:1em;                 /* reserve space equal to font-size */
  line-height:1em;           /* stable line box */
  text-rendering:auto;       /* avoid odd shaping pre-swap */
}

/* --- Neutralize icon metric shifts (FontAwesome) --- */
.fa,
[class^="fa-"],
[class*=" fa-"] {
  display: inline-block;
  width: 1em;                 /* reserve width so fallback ≈ real icon */
  text-rendering: optimizeLegibility;
}


/* --- CLS: stable hero height without 80vh inline --- */
.parallax_slider_outer:first-of-type,
.nectar-slider-wrap:first-of-type{
  aspect-ratio: 16 / 9;       /* reserves space immediately */
  min-height: 56.25vw;        /* 16:9 of viewport width as a floor */
}

/* Prefer the new dynamic viewport units on modern browsers */
@supports (height: 100svh){
  @media (min-width: 1000px){
    .parallax_slider_outer:first-of-type,
    .nectar-slider-wrap:first-of-type{
      height: 80svh;          /* stable vs 80vh on mobile */
      aspect-ratio: auto;     /* let svh take over on desktop/tablet */
    }
  }
}

/* === Text font: ensure swap to prevent CLS === */
@font-face {
  font-family: "YourTextFont";
  src: url("/themes/desert-grove/assets/fonts/YourTextFont.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap; /* or 'optional' to minimize CLS even more */
  /* Optional fine-tuning if letters still shift slightly */
  /* size-adjust: 100%; ascent-override: 90%; descent-override: 20%; */
}

/* fixed size + neutralize inline mutations */
.btn.dg-btn-right{
  width:165px !important;
  height:58px !important;
  line-height:48px !important;
  position:fixed !important; right:0 !important; bottom:20px !important;
  transform:none !important; transition:none !important;
}
@media (max-width:600px){
  .btn.dg-btn-right{ width:150px !important; height:44px !important; line-height:44px !important; }
  #ajax-content-wrap{ padding-bottom:84px !important; } /* reserve space from first paint */
}
.btn.dg-btn-right[style*="height"],
.btn.dg-btn-right[style*="transform"],
.btn.dg-btn-right[style*="top"],
.btn.dg-btn-right[style*="bottom"]{
  height: inherit !important; transform:none !important; bottom:inherit !important;
}

/* Fixed from first paint + stable size */
#latest-projects-cta.btn.dg-btn-right{
  position: fixed !important;
  right: 0 !important; bottom: 20px !important;
  width: 165px !important; height: 48px !important; line-height: 48px !important;
  transform: none !important; transition: none !important; opacity: 1 !important;
  z-index: 1000;
}

/* Mobile tune + reserve room so no late overlap “adjustments” occur */
@media (max-width:600px){
  #latest-projects-cta.btn.dg-btn-right{
    width: 150px !important; height: 44px !important; line-height: 44px !important;
  }
  #ajax-content-wrap{ padding-bottom: 84px !important; } /* space for the fixed CTA */
}

/* If any inline style tries to set height/position, neutralize it */
#latest-projects-cta[style*="height"],
#latest-projects-cta[style*="transform"],
#latest-projects-cta[style*="top"],
#latest-projects-cta[style*="bottom"]{
  height: inherit !important; transform: none !important; bottom: inherit !important;
}

/* Desktop: make the Request Quote button taller */
@media (min-width: 1000px){
  .btn.btn-danger.dg-btn-right{
    height: 48px !important;
    line-height: 48px !important;
    padding: 0 16px !important;   /* a bit more breathing room */
    font-size: 17px !important;   /* looks balanced at 56px */
  }
}

/* === CLS fix v2: Diver hero full-height & stable === */
.vc_row[data-bg-cover] > .vc_column_container,
.vc_column_container[data-bg-cover] {
  position: relative !important;
  width: 100vw !important;
  left: 50% !important;
  margin-left: -50vw !important;

  /* Fill viewport height immediately */
  height: 100svh !important;
  min-height: 100svh !important;
  max-height: 100svh !important;

  /* Background behaviour */
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  overflow: hidden !important;
  will-change: transform, opacity;
}

/* Neutralize late theme transitions on mobile that cause resizing */
@media (max-width: 999px){
  .vc_row[data-bg-cover] > .vc_column_container,
  .vc_column_container[data-bg-cover]{
    transition: none !important;
    animation: none !important;
  }
}
/* === Desktop CLS fix: Diver hero lock === */
@media (min-width:1000px){
  body.page-id-2129 .vc_column_container[data-bg-cover] {
    height: 80vh !important;
    min-height: 80vh !important;
    background-color: #000;               /* average color of the hero image */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
    transition: none !important;
    animation: none !important;
  }
}

/* Lock header/menu line height to avoid shift on font load */
.sf-menu > li > a {
  line-height: 1.2em;
  display: inline-block;
  vertical-align: middle;
}
@media (min-width:1000px){
  #header-outer #top nav > ul.sf-menu {
    min-height: 96px !important;     /* your actual header height */
    align-items: center;
  }
}

/* Tighten the gap between hero and the first content row (page 3176) */
@media (min-width:1000px){
  body.page-id-3176 .parallax_slider_outer{ margin-bottom: 0 !important; }
  body.page-id-3176 .dg-content > .row:first-of-type{
    margin-top: 16px !important;   /* was inheriting large default */
    padding-top: 0 !important;
  }
  body.page-id-3176 .dg-content > .row:first-of-type .span_12{
    padding-top: 0 !important;
  }
  /* In case WPBakery added section padding on the hero row */
  body.page-id-3176 .vc_row.standard_section{ padding-top: 0 !important; padding-bottom: 0 !important; }
}

/* Mobile/tablet: same idea, a little looser */
@media (max-width:999px){
  body.page-id-3176 .parallax_slider_outer{ margin-bottom: 0 !important; }
  body.page-id-3176 .dg-content > .row:first-of-type{
    margin-top: 12px !important;
    padding-top: 0 !important;
  }
}

/* ---- CLS: kill hardcoded 823px hero/row height on mobile ---- */
@media (max-width: 999px){
  /* Any builder block that shipped with a hard inline height */
  [data-bg-cover][style*="height: 823px"],
  .vc_row[style*="height: 823px"],
  .vc_col-sm-12[style*="height: 823px"]{
    height: auto !important;
    min-height: auto !important;
  }

  /* Replace hard height with aspect-ratio so space is reserved without jumping */
  /* Add a class 'dg-visual' in the page builder to the culprit row/column */
  .dg-visual{
    position: relative !important;
    aspect-ratio: 16 / 9;        /* adjust to your art direction (e.g., 5/4 or 3/2) */
    min-height: 56.25vw !important; /* 16:9 placeholder off viewport width */
    overflow: hidden !important;
  }
  .dg-visual > .row-bg, 
  .dg-visual .image-bg{
    position: absolute !important; inset: 0 !important;
    background-position: center !important;
    background-size: cover !important;
  }

  /* If that visual is an <img>, make it fill without layout changes */
  .dg-visual img{
    display:block !important; width:100% !important; height:100% !important; object-fit:cover !important;
  }
}

/* CLS: Request Quote button — fixed metrics + bold neutralized */
.btn.dg-btn-right{
  position:fixed !important; right:0 !important; bottom:20px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  box-sizing:border-box !important;
  width:165px !important; height:48px !important; line-height:48px !important;
  padding:0 12px !important; font-size:16px !important; font-weight:700 !important;
  white-space:nowrap !important; border:0 !important; border-radius:10px 0 0 10px !important;
  transition:transform .2s ease, opacity .2s ease !important;
}
.btn.dg-btn-right b{ font-weight:inherit !important; }  /* prevents late bold swap */
@media (max-width:600px){
  .btn.dg-btn-right{ width:150px !important; height:44px !important; line-height:44px !important; }
}

/* FINAL – mobile hero CLS guard */
@media (max-width: 999px){
  .parallax_slider_outer:first-of-type,
  .nectar-slider-wrap:first-of-type{
    aspect-ratio: 16/9;                /* reserve space deterministically */
    min-height: 56.25vw !important;    /* 16:9 of viewport width */
  }
  .nectar-slider-wrap .swiper-container,
  .nectar-slider-wrap .swiper-wrapper,
  .nectar-slider-wrap .swiper-slide{
    min-height: 56.25vw !important;
  }
  /* kill any runtime fades/transforms that delay paint */
  .lcp-hero, .lcp-hero-wrapper, .image-bg, .hero, .hero-wrap {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }
}

/* Mobile hero focal point */
@media (max-width: 999px){
  #ns-hero .image-cover > img{
    object-position: 50% 30% !important; /* was center center; 30% shows higher area */
  }
}

.nectar-slider-wrap .nectar-slider-loading,
.nectar-slider-wrap .slide-bg-overlay,
.nectar-slider-wrap .color-overlay,
.nectar-slider-wrap .overlays,
.nectar-slider-wrap .bg-overlay,
.nectar-slider-wrap .no-click{
  display:none !important; opacity:0 !important; pointer-events:none !important;
}

/* --- Desktop: lock the hero height to a stable, responsive range --- */
@media (min-width: 1000px){
  #ns-hero .swiper-container{
    height: clamp(620px, 46vw, 940px) !important; /* single stable value all init phases */
  }
  #ns-hero .swiper-wrapper, #ns-hero .swiper-slide{ height:100% !important; }
  #ns-hero .image-cover{ height:100%; overflow:hidden; }
  #ns-hero .image-cover > img{ width:100%; height:100%; object-fit:cover; display:block; }
}

/* --- Mobile/Tablet: reserve space immediately (prevents first-paint jump) --- */
@media (max-width: 999px){
  .parallax_slider_outer:first-of-type,
  .nectar-slider-wrap:first-of-type{
    aspect-ratio: 16 / 9;
    min-height: 56.25vw;        /* reserves space at first paint */
  }
}

/* Kill hardcoded inline heights some builders inject (the 823px you saw) */
@media (max-width: 999px){
  [data-bg-cover][style*="height: 823px"],
  .vc_row[style*="height: 823px"],
  .vc_col-sm-12[style*="height: 823px"]{
    height:auto !important; min-height:auto !important;
  }
}

/* === Final header height guard === */
:root { --header-h: 96px; }                     /* desktop fixed height */
@media (max-width:999px){ :root { --header-h:72px; } }  /* mobile */

#header-space{
  height: var(--header-h) !important;
  min-height: var(--header-h) !important;
}
#header-outer{
  height: var(--header-h) !important;
  min-height: var(--header-h) !important;
  transition:none !important;
  animation:none !important;
}
body{ margin-top: 0 !important; } /* prevent double spacing */

/* --- Hero section: Prevent layout shift for the diver visual --- */
.dg-visual {
  position: relative !important;
  aspect-ratio: 16 / 9;       /* keeps a 16:9 box before the image loads */
  min-height: 56.25vw;        /* reserves space based on viewport width */
  overflow: hidden !important;
}

@media (min-width: 1000px) {
  .dg-visual {
    aspect-ratio: auto;
    height: clamp(620px, 46vw, 940px) !important; /* stable desktop height */
    min-height: 620px !important;
  }
}

.dg-visual img,
.dg-visual .image-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 1) Reserve space using aspect-ratio (prevents any reflow) */
@media (min-width: 1000px){
  .dg-visual{
    aspect-ratio: 16 / 9;           /* tweak if your art is taller/shorter (try 5/4 or 3/2) */
    overflow: hidden;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
  }
}

/* 2) Neutralize any inline height/min-height the builder injects */
.dg-visual[style*="height:"],
.dg-visual[style*="min-height"]{
  height: auto !important;
  min-height: auto !important;
}

.dg-visual > img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 1000px){
  #header-space{
    display:block !important;
    height: 96px !important;      /* set to your final sticky header height */
  }
  #header-outer, #header-secondary-outer{
    min-height: 96px !important;
    transition: none !important;  /* no height transitions */
  }
}
/* Make sure we’re not double-reserving */
body.page{ margin-top:0 !important; padding-top:0 !important; }

/* 1) Prevent wrap/line-height shifts while webfont loads */
@media (min-width: 1000px){
  .sf-menu{ white-space: nowrap; }
  .sf-menu > li{ display: inline-block; }
  .sf-menu > li > a{
    display: inline-block;
    height: 64px;                 /* match your header line height */
    line-height: 64px;            /* lock baseline */
    /* Pre-reserve hover underline/border so hover doesn’t nudge */
    border-bottom: 2px solid transparent;
  }
  /* your hover/focus just changes color, not size */
  .sf-menu > li > a:hover,
  .sf-menu > li > a:focus{ border-bottom-color: currentColor; }
}

/* 2) If your menu items translate on hover, remove vertical motion */
.sf-menu > li > a{ transform: translateY(0) !important; }

/* --- Fix short mobile hero height --- */
@media (max-width: 999px){
  .dg-visual{
    aspect-ratio: auto !important;
    height: 86svh !important;       /* stable tall viewport height */
    min-height: 86svh !important;
    overflow: hidden !important;
    background-position: center center !important;
    background-size: cover !important;
  }

  /* Fallback for older browsers */
  @supports not (height: 1svh){
    .dg-visual{
      height: 86vh !important;
      min-height: 86vh !important;
    }
  }
}

/* --- Clamp the mobile hero height (prevents 2430 px explosion) --- */
@media (max-width: 999px){
  .dg-visual{
    aspect-ratio: auto !important;
    height: 86svh !important;
    min-height: 70svh !important;
    max-height: 100svh !important;
    overflow: hidden !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }

  .dg-visual > img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }
}

@supports not (height: 1svh){
  @media (max-width: 999px){
    .dg-visual{
      height: 86vh !important;
      min-height: 70vh !important;
      max-height: 100vh !important;
    }
  }
}

/* --- Replace vw floor with svh on phones/tablets --- */
@media (max-width: 999px){
  .dg-visual{
    aspect-ratio:auto!important;
    height:86svh!important;
    min-height:70svh!important;
    max-height:100svh!important;
    overflow:hidden!important;
    background-position:center!important;
    background-size:cover!important;
  }
}

@supports not (height:1svh){
  @media (max-width: 999px){
    .dg-visual{
      height:86vh!important;
      min-height:70vh!important;
      max-height:100vh!important;
    }
  }
}
/* --- Reserve the first content row so font/menu hydration can't nudge it --- */
@media (max-width: 999px){
  .row.container--narrow{
    /* give the first row a small predictable floor */
    min-height: clamp(120px, 18svh, 240px);
  }

  /* keep title/navigation from changing line-height on swap */
  .row.container--narrow h1,
  .row.container--narrow .page-title{
    line-height: 1.15 !important;
    /* prevent sudden underline/border-on-hover from changing height */
    border-bottom: 2px solid transparent;
  }
}

/* if you have fixed CTAs (WhatsApp / Request Quote), reserve bottom space on mobile */
@media (max-width: 999px){
  body{ padding-bottom: 72px; }  /* match your fixed CTA height */
}
/* === GLOBAL: Mobile hero fix + flush content start (wins over inline) === */
@media (max-width: 999px){

  /* 1) Override INLINE heights on Nectar/Parallax hero + Swiper parts */
  .parallax_slider_outer[style*="height"],
  .nectar-slider-wrap[style*="height"],
  .nectar-slider-wrap .swiper-container[style*="height"],
  .nectar-slider-wrap .swiper-wrapper[style*="height"],
  .nectar-slider-wrap .swiper-slide[style*="height"]{
    height: 86svh !important;       /* stable mobile viewport height */
    min-height: 70svh !important;
    max-height: 100svh !important;
  }

  /* If any inline min-height sneaks in, squash it too */
  .parallax_slider_outer[style*="min-height"],
  .nectar-slider-wrap[style*="min-height"],
  .nectar-slider-wrap .swiper-container[style*="min-height"],
  .nectar-slider-wrap .swiper-wrapper[style*="min-height"],
  .nectar-slider-wrap .swiper-slide[style*="min-height"]{
    min-height: 70svh !important;
  }

  /* 2) Make sure nothing adds a top gap right after the hero */
  .parallax_slider_outer + * ,
  .nectar-slider-wrap + * {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
  }

  /* 3) Belt & suspenders: first content containers/rows */
  #ajax-content-wrap > .container.main-content:first-child,
  .container-wrap > .container.main-content:first-child,
  #ajax-content-wrap .wpb_row:first-child,
  #ajax-content-wrap .vc_row:first-child,
  .container.main-content .wpb_row:first-child,
  .container.main-content .vc_row:first-child{
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
  }

  /* 4) Kill any empty spacer at the very top (common in WPBakery/VC) */
  .wpb_row:first-child .vc_empty_space:first-child{
    display: none !important;
    height: 0 !important;
  }
}

/* === GLOBAL MOBILE: remove grey band between banner and content === */
@media (max-width: 999px){

  /* 1) Kill row background overlays/wraps that can paint a slab under the hero */
  .wpb_row .row-bg-wrap::before,
  .wpb_row .row-bg-wrap::after{
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .wpb_row .row-bg-wrap,
  .wpb_row .row-bg{
    background: none !important;
    position: relative !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }

  /* 2) Make the section after the hero start flush (no margin/padding) */
  .parallax_slider_outer + *,
  .nectar-slider-wrap + *{
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
  }

  /* 3) Belt & suspenders for first content container/row */
  #ajax-content-wrap > .container.main-content:first-child,
  .container-wrap > .container.main-content:first-child,
  #ajax-content-wrap .wpb_row:first-child,
  #ajax-content-wrap .vc_row:first-child{
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
  }

  /* 4) If the hero itself has a bottom margin, remove it */
  .parallax_slider_outer,
  .nectar-slider-wrap{
    margin-bottom: 0 !important;
  }
}

/* === GLOBAL HERO FIX (mobile + desktop) === */

/* Reserve predictable header height */
:root {
  --header-h: 96px;          /* desktop */
}
@media (max-width: 768px){
  :root { --header-h: 80px; } /* mobile */
}

/* Stable hero sizing */
.hero,
.parallax_slider_outer:first-of-type,
.nectar-slider-wrap:first-of-type {
  position: relative !important;
  aspect-ratio: 16 / 9;
  min-height: 56.25vw; /* 16:9 ratio floor */
  width: 100vw !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* Prefer stable svh on supported browsers */
@supports (height: 100svh) {
  .has-svh .hero,
  .has-svh .parallax_slider_outer:first-of-type,
  .has-svh .nectar-slider-wrap:first-of-type {
    height: 86svh;  /* fixed from Pool Covers */
    aspect-ratio: auto;
  }
}

/* Fallback for browsers without svh */
.hero,
.parallax_slider_outer:first-of-type,
.nectar-slider-wrap:first-of-type {
  height: calc(var(--vh, 1vh) * 86);
}

/* Always push content below fixed header */
body {
  padding-top: var(--header-h);
}

/* Prevent hidden hero under header on mobile */
@media (max-width: 999px){
  .parallax_slider_outer,
  .nectar-slider-wrap {
    margin-top: var(--header-h);
  }
}

/* === MOBILE ONLY: keep first hero just below the fixed header === */
@media (max-width: 999px){
  :root{
    --dg-header-h-mobile: 65px;  /* tweak to taste: 60–72px usually works */
  }

  /* If the theme renders #header-space, make sure it reserves room */
  #header-space{
    display:block !important;
    height: var(--dg-header-h-mobile) !important;
    min-height: var(--dg-header-h-mobile) !important;
  }

  /* If there's no spacer before the hero, nudge the hero down by header height */
  header#top + .parallax_slider_outer,
  header#top + .nectar-slider-wrap{
    margin-top: var(--dg-header-h-mobile) !important;
  }

  /* When spacer exists, avoid double gap */
  #header-space + .parallax_slider_outer,
  #header-space + .nectar-slider-wrap{
    margin-top: 0 !important;
  }

  /* Keep hero stack sane on mobile */
  .nectar-slider-wrap .swiper-container,
  .nectar-slider-wrap .swiper-wrapper,
  .nectar-slider-wrap .swiper-slide{
    height: auto !important;
    min-height: 56.25vw !important; /* 16:9 floor */
  }

  /* If browser supports svh, allow tall, stable hero height */
  .has-svh .parallax_slider_outer:first-of-type,
  .has-svh .nectar-slider-wrap:first-of-type{
    height: 86svh !important;
    min-height: 56.25vw !important;
  }
}

/* === Concrete Pools (page-id-2129) — normalize hero on mobile & desktop === */

/* Desktop/tablet: match Residential banner height (tweak as needed) */
:root{
  --cp-hero-desktop: 80vh;   /* set to your Residential desktop hero height if you want an exact match */
  --cp-hero-mobile: 86svh;   /* mobile hero height (stable viewport units) */
}

/* Kill the inline 80vh and let our values win */
body.page-id-2129 .parallax_slider_outer,
body.page-id-2129 .nectar-slider-wrap,
body.page-id-2129 .nectar-slider-wrap .swiper-container,
body.page-id-2129 .nectar-slider-wrap .swiper-wrapper,
body.page-id-2129 .nectar-slider-wrap .swiper-slide{
  height: auto !important;
  min-height: var(--cp-hero-desktop) !important;   /* desktop default */
}

/* Desktop: enforce consistent banner height */
@media (min-width:1000px){
  body.page-id-2129 .parallax_slider_outer:first-of-type,
  body.page-id-2129 .nectar-slider-wrap:first-of-type{
    height: var(--cp-hero-desktop) !important;
    min-height: var(--cp-hero-desktop) !important;
  }
}

/* Mobile: make the hero a bit shorter and align the image to the top */
@media (max-width: 999px){
  body.page-id-2129 .parallax_slider_outer:first-of-type,
  body.page-id-2129 .nectar-slider-wrap:first-of-type{
    height: var(--cp-hero-mobile) !important;
    min-height: var(--cp-hero-mobile) !important;
  }

  /* keep the background framed correctly on mobile */
  body.page-id-2129 .nectar-slider-wrap .slide-bg-wrap .image-bg{
    background-size: cover !important;
    background-position: center top !important;   /* nudge visual up so it’s not “too high inside” */
    background-repeat: no-repeat !important;
  }
}

/* Safety: no extra gap below the hero on this page */
body.page-id-2129 .parallax_slider_outer,
body.page-id-2129 .nectar-slider-wrap{
  margin-bottom: 0 !important;
}

/* === Desktop hero unifier (overrides inline 80vh) === */
@media (min-width:1000px){
  /* set the desktop hero height you want across pages */
  :root { --dg-hero-h-desktop: 80vh; } /* tweak 70–86vh to taste */

  /* override both the outer wrapper and the slider that have inline heights */
  .parallax_slider_outer,
  .parallax_slider_outer[style*="height"],
  .nectar-slider-wrap,
  .nectar-slider-wrap[style*="height"],
  .nectar-slider-wrap .swiper-container,
  .nectar-slider-wrap .swiper-wrapper,
  .nectar-slider-wrap .swiper-slide{
    height: var(--dg-hero-h-desktop) !important;
    min-height: var(--dg-hero-h-desktop) !important;
  }
}

/* === Concrete Pools — DESKTOP hero: force visible height & background === */
@media (min-width:1000px){

  /* 1) Set target height for the hero (match Residential if you want) */
  body.page-id-2129 #fws_585b01e3db60c .parallax_slider_outer,
  body.page-id-2129 #fws_585b01e3db60c .nectar-slider-wrap{
    height: 70vh !important;         /* tweak 72–86vh to taste */
    min-height: 480px !important;    /* safety floor */
    position: relative !important;
    margin-bottom: 0 !important;
  }

  /* 2) Propagate height down the Swiper chain so slides actually fill */
  body.page-id-2129 #fws_585b01e3db60c .nectar-slider-wrap .swiper-container,
  body.page-id-2129 #fws_585b01e3db60c .nectar-slider-wrap .swiper-wrapper,
  body.page-id-2129 #fws_585b01e3db60c .nectar-slider-wrap .swiper-slide{
    height: 100% !important;
    min-height: inherit !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* 3) Ensure the image background actually paints over the full area */
  body.page-id-2129 #fws_585b01e3db60c .parallax_slider_outer .image-bg,
  body.page-id-2129 #fws_585b01e3db60c .nectar-slider-wrap .swiper-slide .image-bg{
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1 !important;
  }

  /* 4) Keep any slide content above the background */
  body.page-id-2129 #fws_585b01e3db60c .nectar-slider-wrap .swiper-slide .content{
    position: relative !important;
    z-index: 2 !important;
  }

  /* 5) Make sure the spacer exists on desktop so header doesn’t overlap */
  #header-space{
    display: block !important;
    height: 96px !important;         /* your desktop header height */
    min-height: 96px !important;
  }
}

/* === GLOBAL MOBILE FIX: floating buttons stay below burger drawer === */
@media (max-width: 999px){

  :root{
    --drawer-z: 9998;  /* typical Salient/Off-Canvas menu z-index */
    --cta-z: 9990;     /* both buttons just below drawer */
  }

  /* Ensure the drawer and its backdrop stay on top */
  #slide-out-widget-area-bg,
  #slide-out-widget-area,
  .ocm-effect-wrap{
    z-index: var(--drawer-z) !important;
  }

  /* Apply to ALL floating CTAs sharing the right-side style */
  .btn.dg-btn-right,
  #latest-projects-cta.btn.dg-btn-right{
    position: fixed !important;
    z-index: var(--cta-z) !important;
    transition: opacity .25s ease;
  }

  /* When the drawer is open, hide them completely */
  html.side-widget-open .btn.dg-btn-right,
  html.side-widget-open #latest-projects-cta.btn.dg-btn-right{
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Restore visibility when drawer closes */
  html:not(.side-widget-open) .btn.dg-btn-right,
  html:not(.side-widget-open) #latest-projects-cta.btn.dg-btn-right{
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* === MOBILE: position Request Quote & Latest Projects midway on screen === */
@media (max-width: 999px){

  /* Position both floating buttons roughly halfway up the right side */
  .btn.dg-btn-right,
  #latest-projects-cta.btn.dg-btn-right{
    position: fixed !important;
    right: 0 !important;
    top: 50% !important;           /* halfway vertically */
    transform: translateY(-50%) !important;
    bottom: auto !important;       /* remove bottom anchor */
    z-index: var(--cta-z, 9990) !important;
    transition: opacity .25s ease;
  }

  /* When burger drawer opens, hide them */
  html.side-widget-open .btn.dg-btn-right,
  html.side-widget-open #latest-projects-cta.btn.dg-btn-right{
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Restore on close */
  html:not(.side-widget-open) .btn.dg-btn-right,
  html:not(.side-widget-open) #latest-projects-cta.btn.dg-btn-right{
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Optional: leave breathing room so they don’t overlap hero or footer */
  #ajax-content-wrap{
    padding-bottom: 40px !important;
  }
}

/* === MOBILE: stacked floating buttons (Request Quote mid, Latest Projects lower) === */
@media (max-width: 999px){

  :root{
    --cta-z: 9990;
  }

  /* --- Request Quote --- */
  .btn.dg-btn-right:not(#latest-projects-cta){
    position: fixed !important;
    right: 0 !important;
    top: 50% !important;                 /* halfway up */
    transform: translateY(-50%) !important;
    bottom: auto !important;
    z-index: var(--cta-z) !important;
    transition: opacity .25s ease;
  }

  /* --- Latest Projects --- */
  #latest-projects-cta.btn.dg-btn-right{
    position: fixed !important;
    right: 0 !important;
    bottom: 25% !important;              /* 25% above bottom of viewport */
    top: auto !important;
    transform: none !important;
    z-index: var(--cta-z) !important;
    transition: opacity .25s ease;
  }

  /* --- Hide both when burger menu open --- */
  html.side-widget-open .btn.dg-btn-right,
  html.side-widget-open #latest-projects-cta.btn.dg-btn-right{
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* --- Restore visibility when menu closed --- */
  html:not(.side-widget-open) .btn.dg-btn-right,
  html:not(.side-widget-open) #latest-projects-cta.btn.dg-btn-right{
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* --- Optional: extra breathing room --- */
  #ajax-content-wrap{
    padding-bottom: 40px !important;
  }
}

/* === WhatsApp: force bottom-right on mobile (global) === */
@media (max-width: 768px){
  html body .whatsapp-container{
    position: fixed !important;
    inset: auto !important;
    left: auto !important;
    right: 20px !important;
    bottom: 20px !important;
    transform: none !important;
    z-index: 100050 !important; /* above sliders/overlays, below drawer */
  }
  /* Safety for RTL documents */
  html[dir="rtl"] body .whatsapp-container{
    left: auto !important;
    right: 20px !important;
  }
}

/* === ABOUT US (desktop): make hero image fill the banner height === */
@media (min-width: 1000px){
  /* Make the background actually cover the full hero box */
  body.layout-about #fws_585b01e3db61c .image-bg{
    background-size: cover !important;      /* was 'contain' in page CSS */
    background-position: center center !important;
    background-repeat: no-repeat !important;
    height: 100% !important;                /* belt & suspenders */
  }

  /* Ensure the whole slider chain keeps the 75vh box consistently */
  body.layout-about #fws_585b01e3db61c .parallax_slider_outer,
  body.layout-about #fws_585b01e3db61c .nectar-slider-wrap,
  body.layout-about #fws_585b01e3db61c .swiper-container,
  body.layout-about #fws_585b01e3db61c .swiper-wrapper,
  body.layout-about #fws_585b01e3db61c .swiper-slide{
    height: 75vh !important;
    min-height: 560px !important;           /* safe floor if you want it */
  }
}

/* === FIX: Mobile portfolio cut-off (disable content-visibility/contain) === */
@media (max-width: 1024px){
  /* Ensure the main content and portfolio containers can grow naturally */
  .container.main-content,
  .container.main-content.dg-content,
  .portfolio-wrap,
  .portfolio-wrap .portfolio-items{
    content-visibility: visible !important;
    contain: none !important;
    contain-intrinsic-size: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* Also neutralize absolute positioning from masonry on small screens */
  .portfolio-items.masonry-items{
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
  .portfolio-items.masonry-items .col.elastic-portfolio-item{
    position: static !important;
    top: auto !important;
    left: auto !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .portfolio-items.masonry-items::after{
    content:"";
    display:block;
    clear:both;
  }
}
@media (max-width:1024px){
  .portfolio-items.masonry-items{
    display:block !important;
    height:auto !important;
    overflow:visible !important;
  }
  .portfolio-items.masonry-items .col.elastic-portfolio-item{
    position:static !important;
    top:auto !important;
    left:auto !important;
    float:none !important;
    width:100% !important;
    margin:0 !important;
  }
  .portfolio-items.masonry-items::after{
    content:""; display:block; clear:both;
  }
}

/* === ABOUT US (desktop): make hero image fill the banner height === */
@media (min-width: 1000px){
  /* Make the background actually cover the full hero box */
  body.layout-about #fws_585b01e3db61c .image-bg{
    background-size: cover !important;      /* was 'contain' in page CSS */
    background-position: center center !important;
    background-repeat: no-repeat !important;
    height: 100% !important;                /* belt & suspenders */
  }

  /* Ensure the whole slider chain keeps the 75vh box consistently */
  body.layout-about #fws_585b01e3db61c .parallax_slider_outer,
  body.layout-about #fws_585b01e3db61c .nectar-slider-wrap,
  body.layout-about #fws_585b01e3db61c .swiper-container,
  body.layout-about #fws_585b01e3db61c .swiper-wrapper,
  body.layout-about #fws_585b01e3db61c .swiper-slide{
    height: 75vh !important;
    min-height: 560px !important;           /* safe floor if you want it */
  }
}

/* === FIX: Mobile portfolio cut-off (disable content-visibility/contain) === */
@media (max-width: 1024px){
  /* Ensure the main content and portfolio containers can grow naturally */
  .container.main-content,
  .container.main-content.dg-content,
  .portfolio-wrap,
  .portfolio-wrap .portfolio-items{
    content-visibility: visible !important;
    contain: none !important;
    contain-intrinsic-size: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* Also neutralize absolute positioning from masonry on small screens */
  .portfolio-items.masonry-items{
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
  .portfolio-items.masonry-items .col.elastic-portfolio-item{
    position: static !important;
    top: auto !important;
    left: auto !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .portfolio-items.masonry-items::after{
    content:"";
    display:block;
    clear:both;
  }
}
@media (max-width:1024px){
  .portfolio-items.masonry-items{
    display:block !important;
    height:auto !important;
    overflow:visible !important;
  }
  .portfolio-items.masonry-items .col.elastic-portfolio-item{
    position:static !important;
    top:auto !important;
    left:auto !important;
    float:none !important;
    width:100% !important;
    margin:0 !important;
  }
  .portfolio-items.masonry-items::after{
    content:""; display:block; clear:both;
  }
}

/* === FIX: remove black band below footer on mobile, keep footer image === */
@media (max-width: 1024px){
  html, body{
    background-color: #fff !important;   /* only color, don't use 'background' */
  }

  /* Let the page content be transparent so the footer image shows normally */
  #ajax-content-wrap,
  .container-wrap{
    background-color: transparent !important;
  }

  /* If any pseudo-element paints a strip, kill it */
  #ajax-content-wrap::after,
  .container-wrap::after{
    content: none !important;
    display: none !important;
    background: transparent !important;
  }

  /* DO NOT style #footer-outer here — it already has your gradient+image */
}

/* === GLOBAL MOBILE FIX: remove extra gap under footer on all pages === */
@media (max-width:1024px){
  html, body{
    margin:0 !important;
    padding:0 !important;
    height:auto !important;
    min-height:0 !important;
    background-color:#fff !important; /* keep white background */
  }

  #ajax-content-wrap,
  .container-wrap,
  .container.main-content{
    margin-bottom:0 !important;
    padding-bottom:0 !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
  }

  #footer-outer .row,
  #copyright{
    margin-bottom:0 !important;
    padding-bottom:0 !important;
  }

  #ajax-content-wrap::after,
  .container-wrap::after{
    content:none !important;
    display:none !important;
  }

  [class*="vh-100"],
  [style*="100vh"],
  [style*="min-height:100vh"]{
    height:auto !important;
    min-height:0 !important;
  }

  body[data-footer-reveal] #footer-outer{
    position:static !important;
    transform:none !important;
  }
}/* === GLOBAL MOBILE: remove the tiny extra scroll after footer === */
@media (max-width:1024px){
  /* 1) Nuke Salient footer-reveal shadow & any footer pseudo-elements */
  body[data-footer-reveal-shadow] #footer-outer::after,
  #footer-outer::after,
  #footer-outer::before{
    content:none !important;
    display:none !important;
    height:0 !important;
  }

  /* 2) Ensure no hidden spacing via margins/paddings/min-heights */
  #footer-outer,
  #footer-outer .row,
  #copyright{
    margin-bottom:0 !important;
    padding-bottom:0 !important;
    min-height:0 !important;
  }

  /* 3) Make sure the page wrappers don’t add trailing space */
  #ajax-content-wrap,
  .container-wrap,
  .container.main-content{
    padding-bottom:0 !important;
    margin-bottom:0 !important;
    min-height:0 !important;
    height:auto !important;
  }

  /* 4) Prevent overscroll effects from creating phantom space on mobile */
  html, body{
    overscroll-behavior-y: contain;   /* stops rubber-band adding extra scroll */
  }
}

/* === GLOBAL MOBILE: remove the tiny extra scroll after the footer === */
@media (max-width:1024px){

  /* 1) Absolutely no trailing space from the last block on the page */
  body > *:last-child{
    margin-bottom:0 !important;
    padding-bottom:0 !important;
  }

  /* 2) Common wrappers that sometimes add a few pixels at the end */
  #ajax-content-wrap,
  .container-wrap,
  .container.main-content,
  #footer-outer,
  #footer-outer .row,
  #copyright{
    margin-bottom:0 !important;
    padding-bottom:0 !important;
    min-height:0 !important;
    height:auto !important;
  }

  /* 3) Kill any reveal/shadow pseudo-element that extends below the footer */
  #footer-outer::after,
  #footer-outer::before,
  #ajax-content-wrap::after,
  .container-wrap::after{
    content:none !important;
    display:none !important;
    height:0 !important;
  }

  /* 4) Page builders often leave spacing on the last row — neutralize it */
  .wpb_row:last-of-type,
  .vc_row:last-of-type,
  .row:last-of-type{
    margin-bottom:0 !important;
    padding-bottom:0 !important;
  }

  /* 5) Salient-specific: shape divider wrappers can create a tiny tail */
  .nectar-shape-divider-wrap{
    height:auto !important;
    min-height:0 !important;
  }
}

/* ====== MOBILE LANDSCAPE OVERFLOW FIXES ====== */

/* 1) Fix the rotated CTA ribbon so it stays inside the viewport */
@media (max-width: 1024px) and (orientation: landscape) {
  .dg-btn-right{
    /* keep rotation, remove the extra push that caused overflow */
    transform: rotate(90deg) translate(0, 0) !important;
    right: 8px !important;            /* keep it visually on the edge */
    inset-inline-end: 8px;            /* logical fallback */
  }
}

/* 2) Stop helper strips from exceeding the viewport on small screens */
@media (max-width: 1024px){
  .dg-questions-break{
    width: 100% !important;
    margin-left: 0 !important;
  }
}

/* 3) Absolute guard: never allow closed panels/anything to widen the page */
@media (max-width: 1024px){
  html, body{
    overflow-x: clip;                 /* modern */
  }
  /* fallback for older browsers */
  @supports not (overflow-x: clip){
    html, body{ overflow-x: hidden; }
  }

  /* ensure off-canvas panel never adds layout width when hidden */
  #slide-out-widget-area,
  .slide-out-widget-area,
  .off-canvas-menu,
  [data-off-canvas-panel]{
    max-width: 100vw;                 /* belt-and-suspenders */
    contain: layout paint;            /* isolate its rendering box */
  }
}

/* ====== MOBILE LANDSCAPE CONTENT CENTERING ====== */
@media (max-width: 1024px) and (orientation: landscape) {

  /* 1. Re-center the primary content container */
  .container-wrap,
  .container.main-content {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding-left: 4vw !important;   /* subtle breathing room */
    padding-right: 4vw !important;
    box-sizing: border-box;
  }

  /* 2. Ensure parallax/hero blocks remain truly full-bleed */
  .parallax_slider_outer,
  .nectar-slider-wrap,
  .row-bg-wrap {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;
    margin: 0 auto !important;
  }

  /* 3. Neutralize any stray alignment or flex offsets */
  #ajax-content-wrap,
  .main-content > .row,
  .main-content .wpb_row {
    justify-content: center !important;
    text-align: center !important;
  }
}

/* ===== Vertical Tabs (jQuery UI) — universal landscape fix (≤1024px) ===== */
@media (max-width: 1024px) and (orientation: landscape){

  /* Put the whole tabs widget into a 2-column flex row so height is in-flow */
  .ui-tabs-vertical{
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    width: 100% !important;
  }

  /* Left column: tabs list — remove absolute/100% height; keep styling */
  .ui-tabs-vertical .ui-tabs-nav{
    position: static !important;      /* was absolute — causes footer overlap */
    float: none !important;
    height: auto !important;          /* was 100% */
    width: 36% !important;            /* comfortable column in landscape */
    max-width: 40vw !important;
    padding: .2em .8em !important;
    box-sizing: border-box !important;
    /* keep your existing background from page CSS, e.g. #dcdee0 */
  }

  /* Right column: content panel — sits beside the tabs; controls total height */
  .ui-tabs-vertical .ui-tabs-panel{
    width: 64% !important;            /* 100 - 36 */
    margin-left: 0 !important;        /* was 25% push */
    padding: 1em .8em !important;
    box-sizing: border-box !important;
  }

  /* Readability on narrow landscape: allow wrapping & left-align */
  .ui-tabs-vertical .ui-tabs-nav li a{
    text-align: left !important;
    white-space: normal !important;
  }

  /* Make sure parent containers don’t clip the taller column */
  .ui-tabs-vertical,
  .ui-tabs-vertical *{
    overflow: visible !important;
  }
}

/* Optional: if you want the tabs list to remain visible while scrolling,
   swap "position: static" above with this sticky block */
@media (max-width: 1024px) and (orientation: landscape){
  /* .ui-tabs-vertical .ui-tabs-nav{
    position: sticky !important;
    top: calc(var(--header-h, 64px) + 8px);
  } */
}

/* ===== Accordions/toggles: default closed + smooth height ===== */
.toggles .toggle .wpb_text_column{
  overflow: hidden;
  max-height: 0;
  opacity: .02;
  transition: max-height .28s ease, opacity .18s ease;
  will-change: max-height, opacity;
}

/* when open */
.toggles .toggle.is-open .wpb_text_column{
  max-height: 1000vh;          /* effectively “auto” for any length */
  opacity: 1;
}

/* cursor hint on the header */
.toggles .toggle h3 > a{
  cursor: pointer;
  text-decoration: none;
}

/* optional: swap the +/− icon if you use font-awesome */
.toggles .toggle.is-open h3 > a i.fa{
  transform: rotate(90deg);
  transition: transform .2s ease;
}

/* ==== Universal fix for all pages using Salient-style .toggles ==== */
.toggles .toggle > .wpb_text_column{
  overflow: hidden;                 /* hide while animating */
  max-height: 0;                    /* collapsed */
  transition: max-height .35s ease; /* smooth open/close */
  /* never “display:none” here or scrollHeight becomes 0 */
}

/* When the parent .toggle is open, let the panel grow */
.toggles .toggle.is-open > .wpb_text_column{
  max-height: 2000px;               /* large enough for your longest FAQ */
}

/* Optional: inner padding (doesn't affect hero/slider) */
.toggles .toggle > .wpb_text_column > .wpb_wrapper{
  padding: 10px 14px;
}

/* ===== DG Accordions – make the body actually open when header is “open” ===== */
.toggles .toggle > .wpb_text_column{
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}

/* Open states from different scripts/themes */
.toggles .toggle.open > .wpb_text_column,
.toggles .toggle.is-open > .wpb_text_column,
.toggles .toggle > h3 > a.open + .wpb_text_column,
.toggles .toggle > h3 > a[aria-expanded="true"] + .wpb_text_column{
  display: block !important;     /* override any display:none from theme */
  max-height: 4000px;            /* big enough for long answers */
}
/* GLOBAL (desktop): remove the grey spacer below any hero/slider site-wide
   Works for Salient/VC structures where a hero is followed by .container-wrap/.container.main-content
*/
@media (min-width:1000px){

  /* If a parallax/nectar hero is immediately followed by a container-wrap, kill the top seam */
  .parallax_slider_outer + .container-wrap,
  .nectar-slider-wrap + .container-wrap{
    padding-top: 0 !important;
    margin-top: 0 !important;
    background-color: transparent !important; /* avoid grey band reveal */
  }

  /* Some pages go straight to .container.main-content instead of .container-wrap */
  .parallax_slider_outer + .container.main-content,
  .nectar-slider-wrap + .container.main-content{
    padding-top: 0 !important;
    margin-top: 0 !important;
    background-color: transparent !important;
  }

  /* Safety: if the first block inside that container is a row, don't let it re-add spacing */
  .parallax_slider_outer + .container-wrap .row:first-child,
  .nectar-slider-wrap + .container-wrap .row:first-child,
  .parallax_slider_outer + .container.main-content .row:first-child,
  .nectar-slider-wrap + .container.main-content .row:first-child{
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* GLOBAL FIX — Remove grey spacer under hero sections on desktop */
@media (min-width:1000px){
  .container-wrap{
    padding-top: 0 !important;
    margin-top: 0 !important;
    background-color: transparent !important;
  }
}

/* GLOBAL: remove extra white gap between hero bottom and first H1 block (desktop only) */
@media (min-width:1000px){

  /* 1️⃣ Kill top padding/margin on the first row after any hero */
  .parallax_slider_outer + .container-wrap .row:first-child,
  .nectar-slider-wrap + .container-wrap .row:first-child,
  .parallax_slider_outer + .container.main-content .row:first-child,
  .nectar-slider-wrap + .container.main-content .row:first-child{
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* 2️⃣ If first column adds extra padding, reset it */
  .parallax_slider_outer + .container-wrap .row:first-child .col:first-child,
  .nectar-slider-wrap + .container-wrap .row:first-child .col:first-child{
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* 3️⃣ Remove any <br> tags that sneak in as first child (often from WP editor) */
  .parallax_slider_outer + .container-wrap .row:first-child br:first-child,
  .nectar-slider-wrap + .container-wrap .row:first-child br:first-child{
    display: none !important;
  }

  /* 4️⃣ Ensure the first H1 starts flush with the container top */
  .parallax_slider_outer + .container-wrap h1:first-of-type,
  .nectar-slider-wrap + .container-wrap h1:first-of-type{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}
/* =========================================
   GLOBAL (desktop): place hero below header
   and keep its visible height consistent
   Works for Salient nectar/parallax sliders.
========================================= */
@media (min-width:1000px){

  /* Set your real desktop header height once */
  :root { --dg-header-h-desktop: 96px; } /* ← adjust if needed */

  /* If the theme uses an overlay/transparent header, there's no spacer.
     Push any hero down by the header height. */
  body[data-permanent-transparent="1"] .parallax_slider_outer,
  body[data-permanent-transparent="1"] .nectar-slider-wrap{
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin-top: var(--dg-header-h-desktop) !important;
    overflow: hidden !important;
  }

  /* Keep the hero’s visible height ≈ 80vh AFTER pushing it down.
     Targets common inline 80vh cases without touching other heights. */
  body[data-permanent-transparent="1"] .parallax_slider_outer[style*="80vh"],
  body[data-permanent-transparent="1"] .nectar-slider-wrap[style*="80vh"],
  body[data-permanent-transparent="1"] .nectar-slider-wrap .swiper-container[style*="80vh"]{
    height: calc(80vh - var(--dg-header-h-desktop)) !important;
    min-height: 520px; /* safety */
    width: 100% !important;
  }

  /* Make slides fill the container (prevents off-screen drift) */
  .swiper-container,
  .swiper-wrapper,
  .swiper-slide{
    height: 100% !important;
    width: 100% !important;
  }

  /* Ensure background images actually cover the hero */
  .slide-bg-wrap{
    position: relative !important;
    height: 100% !important;
    width: 100% !important;
  }
  .image-bg{
    position: absolute !important;
    inset: 0 !important;                 /* top/right/bottom/left: 0 */
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  /* Header stays above */
  #header-outer{ z-index: 10000 !important; }

  /* Remove the seam below heroes globally */
  .parallax_slider_outer + .container-wrap,
  .nectar-slider-wrap + .container-wrap,
  .parallax_slider_outer + .container.main-content,
  .nectar-slider-wrap + .container.main-content{
    margin-top: 0 !important;
    padding-top: 0 !important;
    background: transparent !important;
  }

  /* Belt & suspenders: first row under the hero shouldn't re-add space */
  .parallax_slider_outer + .container-wrap .row:first-child,
  .nectar-slider-wrap + .container-wrap .row:first-child,
  .parallax_slider_outer + .container.main-content .row:first-child,
  .nectar-slider-wrap + .container.main-content .row:first-child{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* =========================================
   GLOBAL: Full-height hero banners (desktop)
   Makes all nectar/parallax sliders fill
   100% of the viewport height, adjusted
   for fixed/transparent headers.
========================================= */
@media (min-width:1000px){

  /* Define your actual header height */
  :root { --dg-header-h-desktop: 96px; } /* adjust if needed */

  /* Force every hero section to fill 100% viewport height below header */
  body[data-permanent-transparent="1"] .parallax_slider_outer,
  body[data-permanent-transparent="1"] .nectar-slider-wrap,
  body[data-permanent-transparent="1"] .nectar-slider-wrap .swiper-container{
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: calc(100vh - var(--dg-header-h-desktop)) !important;
    min-height: 100vh !important;
    margin-top: var(--dg-header-h-desktop) !important;
    overflow: hidden !important;
  }

  /* Slides should stretch to fill */
  .swiper-container,
  .swiper-wrapper,
  .swiper-slide{
    height: 100% !important;
    width: 100% !important;
  }

  /* Ensure the background fills perfectly */
  .slide-bg-wrap{
    position: relative !important;
    height: 100% !important;
    width: 100% !important;
  }
  .image-bg{
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  /* Keep header on top */
  #header-outer{ z-index: 10000 !important; }

  /* Remove any top seam or padding below heroes */
  .parallax_slider_outer + .container-wrap,
  .nectar-slider-wrap + .container-wrap,
  .parallax_slider_outer + .container.main-content,
  .nectar-slider-wrap + .container.main-content{
    margin-top: 0 !important;
    padding-top: 0 !important;
    background: transparent !important;
  }
}

/* =========================================================
   GLOBAL (desktop): keep hero image centered INSIDE banner
   and make slides fill the banner frame consistently.
   Targets Salient nectar/parallax slider structure.
========================================================= */
@media (min-width:1000px){

  /* Make the hero frame authoritative & clip any overflow */
  .parallax_slider_outer,
  .nectar-slider-wrap,
  .nectar-slider-wrap .swiper-container{
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  /* Slides should fully fill the banner frame */
  .nectar-slider-wrap .swiper-container,
  .nectar-slider-wrap .swiper-wrapper,
  .nectar-slider-wrap .swiper-slide{
    height: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  /* Background wrapper spans the entire banner area */
  .nectar-slider-wrap .slide-bg-wrap{
    position: relative !important;
    height: 100% !important;
    width: 100% !important;
  }

  /* 🔑 Center the image inside the banner & remove any inline text node (&nbsp;) effects */
  .nectar-slider-wrap .image-bg{
    position: absolute !important;
    inset: 0 !important; /* top/right/bottom/left: 0 */
    display: block !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    font-size: 0 !important;   /* neutralize stray &nbsp; */
    line-height: 0 !important;
  }
}

/* ===============================
   GLOBAL (desktop) — Hero image must start at top of banner
   and be perfectly centered inside it (Salient nectar slider)
================================ */
@media (min-width:1000px){

  /* If the theme's spacer ever gets inserted inside the banner, hide it there */
  .parallax_slider_outer #header-space,
  .nectar-slider-wrap #header-space{
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
  }

  /* Make the banner frame authoritative (we keep your set height e.g. 80vh) */
  .parallax_slider_outer,
  .nectar-slider-wrap,
  .nectar-slider-wrap .swiper-container{
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;  /* no bleed */
  }

  /* Remove ANY top offset inside the slider stack */
  .nectar-slider-wrap .swiper-container,
  .nectar-slider-wrap .swiper-wrapper,
  .nectar-slider-wrap .swiper-slide,
  .nectar-slider-wrap .swiper-slide > *,
  .nectar-slider-wrap .slide-bg-wrap{
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
  }

  /* Kill theme shims that sometimes add top space */
  .nectar-slider-wrap .swiper-slide::before,
  .nectar-slider-wrap .slide-bg-wrap::before{
    content: none !important;
    display: none !important;
  }

  /* The background image box fills the banner from the VERY TOP */
  .nectar-slider-wrap .image-bg,
  .parallax_slider_outer .image-bg{
    position: absolute !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
    display: block !important;
    width: 100% !important; height: 100% !important;
    background-size: cover !important;
    background-position: center center !important;  /* horizontal + vertical center */
    background-repeat: no-repeat !important;
    line-height: 0 !important;                      /* neutralize stray &nbsp; */
    font-size: 0 !important;
  }

  /* Legacy fixed heights (some Salient builds default to 800px) */
  .swiper-container,
  .swiper-slide{
    height: 100% !important;
  }
}

.image-bg {
  /* drive Y offset via a CSS var instead of inline background-position calc */
  background-position: center var(--hero-bg-offset, 0px) !important;
}

/* make sure the first menu item can't be hidden by theme CSS */
.off-canvas-menu-container .menu > li:first-child,
.off-canvas-menu-container .menu > li:first-child > a {
  display: list-item !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
}

/* Give space under the close button and bring menu layer above it */
#slide-out-widget-area .inner { padding-top: 84px !important; position: relative; }
#slide-out-widget-area .slide_out_area_close { position: absolute; top: 16px; right: 16px; z-index: 10; }
.off-canvas-menu-container { position: relative; z-index: 11; }

/* Remove any negative margin that pushes the first <li> off-screen */
.off-canvas-menu-container .menu { margin-top: 0 !important; padding-top: 0 !important; }

/* In case the container clips the first item */
#slide-out-widget-area, #slide-out-widget-area .inner-wrap,
.off-canvas-menu-container, .off-canvas-menu-container .menu {
  overflow: visible !important;
}

/* Ensure current page link still shows inside the off-canvas */
.off-canvas-menu-container .menu .current-menu-item > a {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Hide 'Home' only on desktop header menu, but keep it in toggle/off-canvas */
@media (min-width: 1000px) {
  #header-outer header#top nav > ul.sf-menu > li > a[href="https://desertgrove.com/"],
  #header-outer header#top nav > ul.sf-menu > li > a[href="/"] {
    display: none !important;
  }
}

/* ==============================
   FORCE COLOR SOCIAL ICONS
============================== */
#footer-outer #social a i {
  font-size: 24px !important;
  transition: transform 0.3s ease, color 0.3s ease !important;
}

/* Brand colors — forced override */
#footer-outer #social a[href*="facebook"] i { color: #1877F2 !important; }
#footer-outer #social a[href*="instagram"] i { color: #E1306C !important; }
#footer-outer #social a[href*="linkedin"] i { color: #0A66C2 !important; }
#footer-outer #social a[href*="youtube"] i { color: #FF0000 !important; }
#footer-outer #social a[href*="twitter"] i { color: #1DA1F2 !important; }
#footer-outer #social a[href*="pinterest"] i { color: #E60023 !important; }

/* Optional hover effect */
#footer-outer #social a:hover i {
  transform: scale(1.25) !important;
  opacity: 0.9 !important;
}

/* ==============================================
   MOBILE COPYRIGHT TEXT - TWO LINE CENTERED
============================================== */
@media (max-width: 580px) {
  #footer-outer #copyright p {
    white-space: normal !important;   /* Allow wrapping */
    text-align: center !important;    /* Center both lines */
    font-size: 13px !important;       /* Slightly smaller for balance */
    line-height: 1.4 !important;      /* Better spacing between lines */
    margin: 0 auto !important;        /* Center horizontally */
    max-width: 90%;                   /* Avoid touching screen edges */
  }
}

/* ==============================================
   MOBILE FOOTER - EXTRA SPACE BELOW SOCIAL ICONS
============================================== */
@media (max-width: 580px) {
  #footer-outer #social {
    margin-bottom: 80px !important;   /* adjust value to your taste */
  }
}

/* ==============================================
   SOCIAL ICONS - KEEP IN ONE ROW ALWAYS
============================================== */
#footer-outer #social {
  display: flex !important;
  flex-wrap: nowrap !important;        /* ❌ prevents icons from breaking into 2 rows */
  justify-content: center !important;  /* centers the row */
  align-items: center !important;
  gap: 15px !important;                /* consistent spacing between icons */
  overflow-x: auto !important;         /* enables smooth scroll on tiny screens */
  -webkit-overflow-scrolling: touch;   /* better touch scrolling on iOS */
  scrollbar-width: none;               /* hide scrollbar on Firefox */
}

#footer-outer #social::-webkit-scrollbar {
  display: none;                       /* hide scrollbar on Chrome/Safari */
}

/* Make icons shrink slightly on very small screens so they still fit */
@media (max-width: 400px) {
  #footer-outer #social i {
    font-size: 20px !important;
  }
}

/* ==============================================
   MOBILE FOOTER - REDUCE SPACE BETWEEN SOCIAL ICONS
============================================== */
@media (max-width: 580px) {
  #footer-outer #social {
    gap: 12.5px !important; /* 10% smaller than 15px */
  }
}
/* Social Icons Container - Full Width */
#social {
  width: 100% !important;
  max-width: none !important;           
  overflow: visible !important;         
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;                       
  gap: 12px;
  padding-inline: 12px;                  
  box-sizing: border-box;
}

/* Individual Icon Links */
#social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);  /* subtle glow */
  transition: all 0.3s ease;
}

/* Icon Hover Effect */
#social a:hover {
  background-color: #fff;
  color: #000;
  transform: scale(1.1);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
}

/* Icon itself */
#social i {
  font-size: 18px;
  line-height: 1;
  position: relative;
  top: 10px; /* fine-tune vertical alignment */
  pointer-events: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #social {
    gap: 8px;
  }
  #social a {
    width: 30px;
    height: 30px;
  }
  #social i {
    font-size: 14px;
    top: 10px; /* subtle tweak for optical centering on small screens */
    position: relative;
      
  }
}

/* If any parent adds clipping, neutralize it */
#footer-outer .container,
#footer-outer .row,
#footer-outer .col {
  overflow: visible;
}