/* 1) Make the template-part header sticky + pill (you already have this) */
body.page-id-55 .wp-block-template-part.floating-nav{
  position: sticky;
  top: 20px;
  z-index: 9999;
  width: min(1100px, calc(100% - 40px));
  margin-inline: auto;
  background: #fff;
  border-radius: 100px;
  padding: 28px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  overflow: visible;
  isolation: isolate;

  /* NEW: define how much the hero should overlap under the pill */
  --overlap: 60px; /* tweak: 40–80px usually looks great */
}

/* 2) Create the overlap:
   pull the next block up by the overlap amount… */
body.page-id-55 .wp-site-blocks > header.wp-block-template-part.floating-nav{
  margin-bottom: calc(-1 * var(--overlap));
}

/* …and (optionally) give the first section the same padding-top so its text isn’t hidden */
body.page-id-55 .wp-site-blocks > header.wp-block-template-part.floating-nav + *{
  padding-top: var(--overlap);
  /* If your theme injects a top margin, kill it too */
  margin-top: 0 !important;
}

/* Safety: inner group shouldn’t add its own spacing/pill */
body.page-id-55 .wp-block-template-part.floating-nav > .wp-block-group{
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Admin-bar offset for logged-in views */
body.page-id-55.admin-bar .wp-block-template-part.floating-nav{ 
  top: calc(20px + 32px); 
}
@media (max-width: 782px){
  body.page-id-55.admin-bar .wp-block-template-part.floating-nav{ 
    top: calc(20px + 46px); 
  }
}

/* Tune the overlap amount (increase until the sliver disappears) */
body.page-id-55 .wp-block-template-part.floating-nav{
  --overlap: 97px; /* try 64 → 72 → 80 until it’s visually perfect */
}

/* Pull the next section up slightly more than the overlap to kill any seam */
body.page-id-55 .wp-site-blocks > header.wp-block-template-part.floating-nav{
  margin-bottom: calc(-1 * var(--overlap) - 1px); /* the extra -1px erases the sliver */
}

/* Give the first section the same top padding so its text isn’t hidden,
   and nudge it up by 1px to cover any anti-aliasing line */
body.page-id-55 .wp-site-blocks > header.wp-block-template-part.floating-nav + *{
  padding-top: var(--overlap);
  margin-top: -1px !important;    /* anti-alias seam guard */
  border-top: 0 !important;       /* in case a border is present */
}


/* MOBILE: make header a simple full-width sticky bar – PAGE 55 ONLY */
@media (max-width: 768px){

  body.page-id-55 .wp-block-template-part.floating-nav{
    position: sticky;
    top: 0;                      /* stick to very top */
    width: 100%;
    margin-inline: 0;
    border-radius: 0;            /* no pill on mobile */
    padding: 12px 16px;          /* smaller padding */
    box-shadow: 0 4px 16px rgba(0,0,0,.06);
    --overlap: 0;                /* kill the hero overlap */
  }

  /* don’t pull the next section up on mobile */
  body.page-id-55 .wp-site-blocks > header.wp-block-template-part.floating-nav{
    margin-bottom: 0;
  }

  body.page-id-55 .wp-site-blocks > header.wp-block-template-part.floating-nav + *{
    padding-top: 0;
    margin-top: 0 !important;
  }

  /* optionally shrink logo + button a bit */
  body.page-id-55 .floating-nav img{
    max-width: 150px;
    height: auto;
  }

  body.page-id-55 .floating-nav .wp-block-button__link{
    padding: 8px 16px;
    font-size: 14px;
  }
}

/* If logged in, keep some room for the admin bar on small screens – PAGE 55 ONLY */
@media (max-width: 782px){
  body.page-id-55.admin-bar .wp-block-template-part.floating-nav{
    top: 46px;
  }
}

/* MOBILE: hide all menu items + hamburger – PAGE 55 ONLY */
@media (max-width: 768px){

  /* Hide desktop navigation links (your menu block) */
  body.page-id-55 .floating-nav nav,
  body.page-id-55 .floating-nav .wp-block-navigation {
    display: none !important;
  }

  /* Hide the mobile hamburger icon (the ≡ menu button) */
  body.page-id-55 .floating-nav .wp-block-navigation__responsive-container-open,
  body.page-id-55 .floating-nav .wp-block-navigation__responsive-container-close {
    display: none !important;
  }

  /* Optional: tighten spacing for a cleaner single-row layout */
  body.page-id-55 .wp-block-template-part.floating-nav{
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 16px !important;
  }

  /* Ensure the logo + button sit in one row */
  body.page-id-55 .floating-nav > .wp-block-group{
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
  }

  /* Reduce button size slightly for better balance */
  body.page-id-55 .floating-nav .wp-block-button__link {
    padding: 8px 16px;
    font-size: 14px;
    white-space: nowrap;
  }
}

/* Global – safe to keep */
html, body{
  overflow-x: hidden;
}

/* ===== FORCE STICKY HEADER AGAIN (DESKTOP + MOBILE) – PAGE 55 ONLY ===== */

/* Make sure the main wrapper doesn't block sticky */
body.page-id-55 .wp-site-blocks{
  overflow: visible !important;
}

/* ----- FORCE STICKY HEADER BACK ON ----- */

/* Make sure the main wrapper doesn't block sticky */
body.page-id-55 .wp-site-blocks{
  overflow: visible !important;
}

/* Desktop: sticky pill, 20px from top */
@media (min-width: 769px){
  body.page-id-55 .wp-block-template-part.floating-nav{
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 20px !important;
  }
}

/* Mobile: sticky bar right at the top */
@media (max-width: 768px){
  body.page-id-55 .wp-block-template-part.floating-nav{
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
  }
}

/* ==== STICKY FALLBACK: USE FIXED HEADER INSTEAD – PAGE 55 ONLY ==== */

/* Desktop: fixed pill, centred, 20px from top */
@media (min-width: 769px){
  body.page-id-55 .wp-block-template-part.floating-nav{
    position: fixed !important;
    top: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}

/* Mobile: fixed full-width bar at the very top */
@media (max-width: 768px){
  body.page-id-55 .wp-block-template-part.floating-nav{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
  }
}


/****************************************
 *  HOME HEADER – DESKTOP + MEGA MENU
 ****************************************/

/* Sticky pill wrapper on the home page only */
body.tsp-header-v1 .site-header-mw.floating-nav-outer-mw {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: transparent;
}

/* Kill any height/overflow limits that create a scrollbar */
body.tsp-header-v1 .site-header-mw,
body.tsp-header-v1 .floating-nav-outer-mw,
body.tsp-header-v1 .floating-nav-desktop-mw,
body.tsp-header-v1 .floating-nav-inner-mw {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Desktop vs mobile visibility for the two header groups */
@media (min-width: 961px) {
    body.tsp-header-v1 .floating-nav-desktop-mw { display: block; }
    body.tsp-header-v1 .floating-nav-mobile-mw  { display: none; }
}

@media (max-width: 960px) {
    body.tsp-header-v1 .floating-nav-desktop-mw { display: none; }
    body.tsp-header-v1 .floating-nav-mobile-mw  { display: block; }

    /* simple sticky bar for mobile */
    body.tsp-header-v1 .floating-nav-mobile-mw {
        position: sticky;
        top: 0;
        z-index: 9999;
        background: #ffffff;
    }
}

/* The pill itself */
body.tsp-header-v1 .floating-nav-inner-mw {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;

    max-width: 1100px;
    margin: 16px auto;
    padding: 16px 32px;          /* <— tweak this for more/less top & bottom padding */
    background: #ffffff;
    border-radius: 999px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}

/* Logo */
body.tsp-header-v1 .floating-nav-inner-mw img.wp-image-10 {
    height: auto;
    max-height: 44px;
    width: auto;
}

/****************************************
 *  NAV LAYOUT INSIDE PILL (HOME)
 ****************************************/

body.tsp-header-v1 .services-mega-wrapper-mw {
          /* positioning context for the mega menu */
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    gap: 24px;
}

/* Top-level nav */
body.tsp-header-v1 .services-mega-wrapper-mw .wp-block-navigation__container {
    display: flex;
    align-items: center;
    gap: 32px;
}

body.tsp-header-v1 .services-mega-wrapper-mw .wp-block-navigation-item__content {
    font-weight: 900;
    text-decoration: none;
}

/****************************************
 *  MEGA MENU PANEL (HOME)
 ****************************************/

/* Columns */
body.tsp-header-v1 .services-menu__col-mw {
    flex: 1 1 0;
    padding: 0 12px;
}

body.tsp-header-v1 .services-menu__heading-mw {
    font-weight: 900;
    font-size: 16px;
    letter-spacing: 0.08em;
    margin: 0 0 4px;
}

body.tsp-header-v1 .services-menu__separator-mw {
    border: none;
    border-top: 2.5px solid #D2D2D2;
    margin: 0 0 12px;
}

/* Items */
body.tsp-header-v1 .services-menu-item-mw {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

body.tsp-header-v1 .services-icon-mw {
    width: 27px;
    height: auto;
    flex-shrink: 0;
}

body.tsp-header-v1 .services-menu-item-label-mw {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

/****************************************
 *  CTA BUTTON (HOME HEADER)
 ****************************************/

body.tsp-header-v1 .header-cta-btn-mw.wp-block-buttons {
    margin-left: 24px;
}

body.tsp-header-v1 .header-cta-btn-mw .wp-block-button__link {
    border-radius: 999px;
    padding: 10px 32px;
    font-weight: 900;
}

/****************************************
 * HOME – centre mega menu to pill
 ****************************************/

/* Make the pill the positioning context */
body.tsp-header-v1 .floating-nav-inner-mw {
    position: relative !important;
}

/****************************************
 * HOME — Final hover logic (Services only)
 ****************************************/

/* Let the nav wrapper be normal so centring stays correct */
body.tsp-header-v1 .services-mega-wrapper-mw {
  position: static !important;
}

/* Make the “Services” item the hover anchor */
body.tsp-header-v1 .services-trigger-mw {
  position: relative; /* anchor for the pseudo bridge */
}

/* Optional: safety—prevent the whole nav wrapper from opening anything by hover */
body.tsp-header-v1 .services-mega-wrapper-mw:hover .services-menu-mw { /* no-op */ }

/* Positioning context: the pill */
body.tsp-header-v1 .floating-nav-inner-mw { position: relative !important; }

/* Mega menu: hidden by default but laid out (no display:none) */
body.tsp-header-v1 .services-menu-mw {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  margin-top: 0;

  /* layout + visual styles from your earlier block */
  display: flex;                 /* keep columns usable even when hidden */
  padding: 24px 32px;
  width: min(1100px, 90vw);
  background: #ffffff;
  border-radius: 0;
  border: 0;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);

  /* visibility model */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .08s ease;
  z-index: 10000;
}

/* Open state */
body.tsp-header-v1 .services-menu-mw.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* Services LI must be the positioning + stacking anchor */
body.tsp-header-v1 .services-trigger-mw{
  position: relative;
  z-index: 10002;            /* sits above page content */
}
/* Transparent hover corridor between Services and the mega menu */
.hover-bridge-mw{
  position: fixed;          /* follows viewport on scroll */
  pointer-events: auto;     /* must be hoverable */
  background: transparent;  /* keep it invisible */
  z-index: 10003;           /* above content, below menu if you like */
}
/* (debug) uncomment to see the corridor
.hover-bridge-mw{ background: rgba(255,0,0,.1); outline: 1px dashed red; }
*/


/* ==== HOME: make the pill overlap the hero ==== */

/* 1) Define how much overlap you want */
body.tsp-header-v1 .floating-nav-inner-mw{
  --overlap: 80px; /* tweak 60–110px */
  position: relative;
  z-index: 1002;   /* keep pill above hero */
}

/* 2) Ensure the outer wrappers are transparent & don’t clip */
body.tsp-header-v1 .site-header-mw,
body.tsp-header-v1 .floating-nav-outer-mw{
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* 3) Pull the hero up under the pill (negative margin on the header block) */
body.tsp-header-v1 .floating-nav-outer-mw{
  margin-bottom: calc(-1 * var(--overlap));
}

/* 4) Give the first section the same padding so content isn’t hidden */
body.tsp-header-v1 .floating-nav-outer-mw + .wp-block-cover,
body.tsp-header-v1 .floating-nav-outer-mw + .wp-block-group{
  padding-top: var(--overlap);
  margin-top: 0 !important;         /* kill theme gap */
  border-top: 0 !important;         /* if any */
}

/* (Optional) 1px seam guard */
body.tsp-header-v1 .floating-nav-outer-mw + .wp-block-cover,
body.tsp-header-v1 .floating-nav-outer-mw + .wp-block-group{
  margin-top: -1px !important;
}
/* how far the pill overlaps */
body.tsp-header-v1 .floating-nav-inner-mw { --nav-overlap: 90px; } /* tweak 70–120 */

/* make the first hero rise under the pill and reserve space for content */
body.tsp-header-v1 .hero-overlap-mw{
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--nav-overlap, 90px));
  padding-top: var(--nav-overlap, 90px);
}

/* keep the header wrappers transparent and unclipped */
body.tsp-header-v1 header.wp-block-template-part,
body.tsp-header-v1 .site-header-mw,
body.tsp-header-v1 .floating-nav-outer-mw{
  background: transparent !important;
  box-shadow: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  overflow: visible !important;
}

/* tiny seam guard if you see a hairline */
body.tsp-header-v1 .hero-overlap-mw{ margin-top: calc(-1 * var(--nav-overlap, 90px) - 1px); }
/* Remove margin/padding seam under floating nav on HOME */
body.tsp-header-v1 .floating-nav-inner-mw + * {
    margin-top: -4px !important;   /* adjust between -2 and -6 */
    padding-top: 0 !important;
}
body.tsp-header-v1 .floating-nav-outer-mw {
    position: sticky !important;
    top: 20px !important;
    z-index: 9999;
}
/* HOME — keep wrappers transparent */
body.tsp-header-v1 header.wp-block-template-part,
body.tsp-header-v1 .site-header-mw,
body.tsp-header-v1 .floating-nav-outer-mw,
body.tsp-header-v1 .floating-nav-desktop-mw{
  background: transparent !important;
  box-shadow: none !important;
}

/* HOME — sticky offset for the outer wrapper (you already liked this) */
body.tsp-header-v1 .floating-nav-outer-mw{
  position: sticky !important;
  top: 20px !important;       /* move pill down 20px */
  z-index: 9999;
}

/* HOME — put the vertical padding on the pill itself */
body.tsp-header-v1 .floating-nav-inner-mw{
  padding-block: 25px !important;   /* your 25px top/bottom */
  padding-inline: 32px;             /* keep side padding */
}

/* HOME — overlap hero under the pill to kill the white seam */
body.tsp-header-v1 .site-header-mw{
  --overlap: 110px;                          /* ↑ bump if any sliver remains */
  margin-bottom: calc(-1 * var(--overlap) - 2px) !important;
}
body.tsp-header-v1 .site-header-mw + *{
  padding-top: var(--overlap) !important;
  margin-top: -1px !important;               /* anti-alias seam guard */
  border-top: 0 !important;
}
body.tsp-header-v1 .services-menu-mw {
    box-shadow: 0 18px 40px rgba(0,0,0,0.10);
}
/* COLUMN BACKGROUND COLOURS (exact values you provided) */
body.tsp-header-v1 .services-menu__col--residential-mw {
    background: #2E3459 !important;
}

body.tsp-header-v1 .services-menu__col--ci-mw {
    background: #44BA7B !important;
}

body.tsp-header-v1 .services-menu__col--government-mw {
    background: #E2E2E2 !important;
}

body.tsp-header-v1 .services-menu__col--other-mw {
    background: #27383C !important;
}
/* 1) Kill the wrapper padding and set the top pad value we want to reuse */
body.tsp-header-v1 .services-menu-mw{
  --col-pad-top: 24px;      /* this matches your old top padding; change if needed */
  padding: 0 !important;    /* remove parent padding */
}

/* 2) Base padding for every column */
body.tsp-header-v1 .services-menu__col-mw{
  padding-top: var(--col-pad-top);
  padding-bottom: 20px;
}

/* 3) Per-column left/right padding (exact values you specified) */
body.tsp-header-v1 .services-menu__col--residential-mw{ padding-left: 25px; padding-right: 20px; }
body.tsp-header-v1 .services-menu__col--ci-mw        { padding-left: 20px; padding-right: 20px; }
body.tsp-header-v1 .services-menu__col--government-mw{ padding-left: 20px; padding-right: 20px; }
body.tsp-header-v1 .services-menu__col--other-mw     { padding-left: 20px; padding-right: 25px; }

/* RESIDENTIAL heading text */
body.tsp-header-v1 .services-menu__col--residential-mw .services-menu__heading-mw {
    color: #FFFFFF !important;
}

/* RESIDENTIAL submenu labels */
body.tsp-header-v1 .services-menu__col--residential-mw .services-menu-item-label-mw {
    color: #FFFFFF !important;
}
/* OTHER SOLAR heading text */
body.tsp-header-v1 .services-menu__col--other-mw .services-menu__heading-mw {
    color: #FFFFFF !important;
}

/* OTHER SOLAR submenu labels */
body.tsp-header-v1 .services-menu__col--other-mw .services-menu-item-label-mw {
    color: #FFFFFF !important;
}
/* COMMERCIAL & INDUSTRIAL heading text */
body.tsp-header-v1 .services-menu__col--ci-mw .services-menu__heading-mw {
    color: #FFFFFF !important;
}

/* COMMERCIAL & INDUSTRIAL submenu labels */
body.tsp-header-v1 .services-menu__col--ci-mw .services-menu-item-label-mw {
    color: #FFFFFF !important;
}
body.tsp-header-v1 .services-menu__col--government-mw .services-menu-item-label-mw {
    color: #000000 !important;
    font-weight: 600 !important;
}
/* GOVERNMENT column – divider colour override */
body.tsp-header-v1 .services-menu__col--government-mw .services-menu__separator-mw {
    border-top-color: #989898 !important;
}
/* Add bottom padding to ALL mega-menu headings */
body.tsp-header-v1 .services-menu__heading-mw {
    padding-bottom: 6px; /* adjust value to your preference */
}
/* Column 1 — RESIDENTIAL */
body.tsp-header-v1 .services-menu__col--residential-mw {
    width: 241px !important;
    flex: 0 0 241px !important;
}

/* Column 2 — COMMERCIAL & INDUSTRIAL */
body.tsp-header-v1 .services-menu__col--ci-mw {
    width: 358px !important;
    flex: 0 0 358px !important;
}

/* Column 3 — GOVERNMENT */
body.tsp-header-v1 .services-menu__col--government-mw {
    width: 241px !important;
    flex: 0 0 241px !important;
}

/* Column 4 — OTHER SOLAR */
body.tsp-header-v1 .services-menu__col--other-mw {
    width: 193px !important;
    flex: 0 0 193px !important;
}
body.tsp-header-v1 .services-menu-mw {
    width: auto !important;
    max-width: none !important;
}
.services-menu__col--residential-mw {
    position: relative !important;
}

.services-menu__col--residential-mw::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;

    width: 230px;     /* adjust to fit */
    height: 160px;    /* adjust to fit */

    background-image: url("https://tspenergy.com.au/wp-content/uploads/2025/11/White_leaf_from_logo.webp");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left bottom;

    pointer-events: none; /* do not break hovering */
    z-index: 0;
}
/* HOME – mobile overlap for the pill */
@media (max-width: 960px){
  /* tune this to taste: 16–28px usually looks right */
  body.tsp-header-v1 .floating-nav-mobile-mw{ --m-overlap: 24px; }

  /* pull the next block up by the same amount */
  body.tsp-header-v1 .floating-nav-mobile-mw{
    position: sticky;            /* keep your sticky behaviour */
    top: 12px;                   /* or whatever you prefer */
    z-index: 9999;
    margin-bottom: calc(-1 * var(--m-overlap));
  }
  body.tsp-header-v1 .floating-nav-mobile-mw + *{
    padding-top: var(--m-overlap);
    margin-top: 0 !important;
  }
}
/* HOME – keep CTA on one line, don’t shrink */
@media (max-width: 960px){
  body.tsp-header-v1 .floating-nav-mobile-mw .floating-nav-inner-mw{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;                 /* small gap so it fits */
    flex-wrap: nowrap;        /* prevent breaking */
  }

  body.tsp-header-v1 .header-cta-btn-mw{ flex: 0 0 auto; }
  body.tsp-header-v1 .header-cta-btn-mw .wp-block-button__link{
    white-space: nowrap;      /* no wrap */
    line-height: 1;           /* tighter vertical rhythm */
    padding: 10px 16px;       /* tweak if you need more room */
    font-size: clamp(14px, 3.3vw, 16px); /* scales down a touch on very small screens */
  }

  /* optional: constrain logo so the row has room */
  body.tsp-header-v1 .floating-nav-mobile-mw img.wp-image-10{
    max-width: 150px;         /* adjust if needed */
    height: auto;
    flex: 0 0 auto;
  }
}
/* MOBILE (<=960px): make wrapper transparent + sticky, keep pill white */
@media (max-width: 960px){

  /* kill any white parent background behind the pill */
  body.tsp-header-v1 header.wp-block-template-part,
  body.tsp-header-v1 .site-header-mw,
  body.tsp-header-v1 .floating-nav-outer-mw,
  body.tsp-header-v1 .floating-nav-mobile-mw{
    background: transparent !important;
    box-shadow: none !important;
  }

  /* the OUTER group (class on your outer Group): be the sticky anchor */
  body.tsp-header-v1 .floating-nav-mobile-mw{
    position: sticky !important;
    top: 12px !important;
    z-index: 10010;
    margin-bottom: -22px;              /* overlap hero */
    --m-overlap: 22px;
    overflow: visible !important;      /* don't clip the pill */
  }

  /* compensate hero so text isn’t hidden under the pill */
  body.tsp-header-v1 .floating-nav-mobile-mw + *{
    padding-top: var(--m-overlap);
    margin-top: 0 !important;
  }

  /* the INNER row (your pill) stays white */
  body.tsp-header-v1 .floating-nav-inner-mw{
    background: #fff !important;
    border-radius: 9999px !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
  }

  /* ensure no ancestor breaks sticky (overflow/transform kill it) */
  body.tsp-header-v1 .wp-site-blocks,
  body.tsp-header-v1 .site-header-mw,
  body.tsp-header-v1 .floating-nav-outer-mw{
    overflow: visible !important;
  }
  body.tsp-header-v1 .floating-nav-mobile-mw,
  body.tsp-header-v1 .floating-nav-outer-mw{
    transform: none !important;
    filter: none !important;
  }
}
/* Make the OUTER mobile nav wrapper sticky */
body.tsp-header-v1 .floating-nav-mobile-mw {
    position: sticky !important;
    top: 20px !important;
    z-index: 99999 !important;

    /* Remove unwanted background sheet */
    background: transparent !important;

    /* Prevent parent containers from clipping it */
    overflow: visible !important;
}

/* Ensure the inner pill stays clickable and clean */
body.tsp-header-v1 .floating-nav-inner-mw {
    background: #fff !important;
    border-radius: 100px !important;
    overflow: visible !important;
    z-index: 999999 !important;
}
/* MOBILE ONLY */
@media (max-width: 960px){
  /* The element that must be sticky */
  body.tsp-header-v1 .floating-nav-mobile-mw{
    position: -webkit-sticky !important; /* iOS Safari */
    position: sticky !important;
    top: 20px !important;
    z-index: 99999 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  /* Common Gutenberg wrappers that often break sticky by clipping */
  body.tsp-header-v1 .wp-site-blocks,
  body.tsp-header-v1 .entry-content,
  body.tsp-header-v1 .is-layout-constrained,
  body.tsp-header-v1 .is-layout-flow,
  body.tsp-header-v1 .is-layout-flex,
  body.tsp-header-v1 .wp-block-group{
    overflow: visible !important;
  }

  /* The pill row */
  body.tsp-header-v1 .floating-nav-inner-mw{
    background: #fff !important;
    border-radius: 100px !important;
    overflow: visible !important;
    z-index: 999999 !important;
  }
}
@media (max-width: 960px){
  body.tsp-header-v1 .floating-nav-mobile-mw.mw-stuck{
    position: fixed !important;
    top: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(680px, calc(100% - 24px)); /* keep it centred & responsive */
  }
}
/* Bring the pill closer to the top on mobile */
body.tsp-header-v1 .floating-nav-mobile-mw{
  top: 4px !important;            /* was 20px – try 6–12px */
}

/* Logged-in toolbar safety (mobile) */
@media (max-width: 782px){
  body.tsp-header-v1.admin-bar .floating-nav-mobile-mw{
    top: 54px !important;         /* toolbar height + your gap */
  }
}

/* Make sure no stray margins/padding push the pill down */
body.tsp-header-v1 .floating-nav-mobile-mw,
body.tsp-header-v1 .floating-nav-mobile-mw > .floating-nav-inner-mw{
  margin: 0 !important;
}

/* Some themes add margin to the first block – neutralise it */
body.tsp-header-v1 .floating-nav-mobile-mw:first-child{
  margin-top: 0 !important;
}
@media (max-width: 960px){
  /* Approx. pill height + breathing room */
  body.tsp-header-v1 { --pill-clearance-m: 92px; }

  body.tsp-header-v1 .hero-first-mw{
    padding-top: var(--pill-clearance-m) !important;
    margin-top: 0 !important;
  }
}
.group-overlay-rsp { 
  position: relative;
  overflow: hidden;
}

.group-overlay-rsp:before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(236, 236, 236, 0.85); /* #ececec with 85% transparency */
  z-index: 1;
}

.group-overlay-rsp > * {
  position: relative;
  z-index: 2; /* bring text/content above overlay */
}
/* HOME · MOBILE — force the WP Navigation “responsive container” to be a full-screen overlay */
@media (max-width:960px){

  /* Catch every open state WordPress uses */
  body.tsp-header-v1 .wp-block-navigation__responsive-container.is-menu-open,
  body.tsp-header-v1 .wp-block-navigation__responsive-container[aria-hidden="false"],
  body.tsp-header-v1.has-modal-open .wp-block-navigation__responsive-container,
  body.tsp-header-v1 .wp-block-navigation__responsive-dialog.is-menu-open {
    position: fixed !important;
    inset: 0 !important;                /* top/right/bottom/left: 0 */
    width: 100% !important;
    height: 100dvh !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 24px !important;
    background: #fff !important;
    box-shadow: none !important;
    transform: none !important;
    z-index: 10060 !important;          /* above the pill */
    overflow: auto !important;
  }

  /* Hide it completely when closed (prevents it sitting inside the pill) */
  body.tsp-header-v1 .wp-block-navigation__responsive-container[aria-hidden="true"]{
    display: none !important;
  }

  /* Make the inner menu layout behave like a stacked sheet */
  body.tsp-header-v1 .wp-block-navigation__responsive-container .wp-block-navigation__container{
    display: block !important;
    row-gap: 16px !important;
  }

  /* Keep the close button visible */
  body.tsp-header-v1 .wp-block-navigation__responsive-container
  .wp-block-navigation__responsive-container-close{
    position: fixed !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 10070 !important;
  }
}
/* HOME • MOBILE (≤960px) — overlay menu tweaks */
@media (max-width:960px){
  /* 1) Overlay padding left/right = 20px and leave space at bottom for CTA */
  body.tsp-header-v1 .wp-block-navigation__responsive-container.is-menu-open{
    padding: 20px 20px 96px !important;    /* bottom space reserved for CTA */
  }

  /* 2) Left-align the menu items */
  body.tsp-header-v1 .wp-block-navigation__responsive-container.is-menu-open,
  body.tsp-header-v1 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
    text-align: left !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 14px !important;                 /* comfy vertical rhythm */
  }

  /* 3) Font size: +4px vs your current ~16px → use 20px */
  body.tsp-header-v1 .wp-block-navigation__responsive-container.is-menu-open
  a.wp-block-navigation-item__content{
    font-size: 20px !important;
    line-height: 1.35 !important;
    font-weight: 900;                     /* matches your desktop weight */
  }
}

/* 4) CTA at the bottom of the overlay (only for a CTA placed INSIDE the overlay) */
@media (max-width:960px){
  /* Give the CTA you add inside the overlay this extra class: .menu-cta-mw */
  body.tsp-header-v1 .wp-block-navigation__responsive-container.is-menu-open .menu-cta-mw{
    position: fixed !important;
    left: 20px !important;
    right: 20px !important;
    bottom: 20px !important;
    z-index: 10070 !important;
    width: auto !important;
    margin: 0 !important;
  }
  body.tsp-header-v1 .wp-block-navigation__responsive-container.is-menu-open .menu-cta-mw .wp-block-button__link{
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 14px 18px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }
}
/********  HOME ONLY — MOBILE OVERLAY MENU CTA  ********/

/* 0) Never show the CTA inside the desktop pill */
body.tsp-header-v1 .floating-nav-inner-mw .menu-cta-mw{
    display:none !important;
}

/* 1) Default: hide the menu CTA everywhere */
body.tsp-header-v1 .menu-cta-mw{
    display:none;
}

/* 2) Mobile overlay only */
@media (max-width:960px){

    /* Add the 20px side padding to the overlay container */
    body.tsp-header-v1 .wp-block-navigation__responsive-container.is-menu-open{
        padding-bottom: 100px !important; /* room for the CTA */
    }

    body.tsp-header-v1 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
        padding-inline: 20px !important; /* ← only padding, no alignment */
    }

    /* Show the CTA only in the mobile overlay and fix it to the bottom */
    body.tsp-header-v1 .wp-block-navigation__responsive-container.is-menu-open .menu-cta-mw{
        display: flex !important;
        position: fixed !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        bottom: 16px !important;
        width: calc(100% - 40px) !important; /* 20px padding each side */
        justify-content: center !important;
        z-index: 10070 !important;
    }

    /* Make the CTA button span nicely */
    body.tsp-header-v1 .wp-block-navigation__responsive-container.is-menu-open .menu-cta-mw .wp-block-button__link{
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }
}

/* 3) Desktop guard */
@media (min-width:961px){
    body.tsp-header-v1 .menu-cta-mw{
        display:none !important;
    }
}
/* HOME · MOBILE — reposition CTA reliably inside the overlay */
@media (max-width:960px){

  /* Target the CTA inside the overlay */
  body.tsp-header-v1 .wp-block-navigation__responsive-container.is-menu-open .menu-cta-mw{
    position: absolute !important;  
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 40px !important;   
    margin: 0 !important;
    z-index: 10050 !important;
  }

  /* Give the overlay enough bottom space so links don’t collide */
  body.tsp-header-v1 .wp-block-navigation__responsive-container.is-menu-open{
    padding-bottom: 140px !important;
  }
}

/* Make sure CTA never shows on desktop */
@media (min-width:961px){
  body.tsp-header-v1 .menu-cta-mw{
    display: none !important;
  }
}
/* HOME · MOBILE — overlay CTA anchored to the bottom (inside overlay) */
@media (max-width:960px){
  /* ensure the overlay itself is the positioning context */
  body.tsp-header-v1 .wp-block-navigation__responsive-container.is-menu-open{
    position: fixed !important;      /* WP already does this, we re-assert */
    inset: 0 !important;
  }

  /* CTA button inside the overlay */
  body.tsp-header-v1 .wp-block-navigation__responsive-container.is-menu-open .menu-cta-mw{
    position: absolute !important;   /* ← not fixed (avoids iOS transform bug) */
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    margin: 0 !important;
    z-index: 10070 !important;
  }

  /* leave breathing room for the CTA so links don’t collide */
  body.tsp-header-v1 .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container{
    padding-bottom: 130px !important;
  }
}

/* never show this CTA in the desktop pill */
@media (min-width:961px){
  body.tsp-header-v1 .menu-cta-mw{ display:none !important; }
}
/* HOME · MOBILE OVERLAY — arrow on “Services” + extra spacing */
@media (max-width:960px){
  /* space the overlay links a touch more */
  body.tsp-header-v1 .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container > li{
    margin: 0 0 14px 0;      /* tweak 10–20px */
  }

  /* add a down arrow to the first item (Services) */
  body.tsp-header-v1 .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container > li:first-child
  > a.wp-block-navigation-item__content::after{
    content: "▾";            /* simple, crisp down arrow */
    font-weight: 700;
    margin-left: 2px;        /* gap between text and arrow */
    line-height: 1;
    position: relative;
    top: 1px;
  }
}
/* HOME · MOBILE OVERLAY — remove dotted underline from links */
@media (max-width:960px){
  body.tsp-header-v1 .wp-block-navigation__responsive-container.is-menu-open
  a.wp-block-navigation-item__content{
    text-decoration: none !important; /* kill dotted underline */
  }
}
/* ===========================
   HOME · MOBILE (≤960px) — Services overlay accordion
   Append to END of your CSS
   =========================== */
@media (max-width:960px){

  /* Variables for icon size + gap (tweak if needed) */
  body.tsp-header-v1 {
    --mw-icon-size: 26px;     /* universal icon height */
    --mw-icon-gap: 8px;       /* space between icon and label */
    --mw-indent-1: 16px;      /* indent for sub-menu (categories) */
    --mw-indent-2: 40px;      /* indent for sub-sub-menu items */
  }

  /* Container we inject under Services */
  body.tsp-header-v1 .mw-services-accordion{
    list-style: none;
    margin: 10px 0 0 0;         /* slight gap under “Services” label */
    padding: 0 0 0 var(--mw-indent-1);
  }

  /* Category (Residential / C&I / Government / Other) */
  body.tsp-header-v1 .mw-acc-item{
    margin: 0 0 10px 0;
  }
  body.tsp-header-v1 .mw-acc-toggle{
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
    /* match the overlay link styling (size=20px, weight=900) */
    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
  }

  /* Arrow on category toggles — match Services arrow exactly */
  body.tsp-header-v1 .mw-acc-toggle::after{
    content: "▾";
    font-weight: 700;
    margin-left: 2px;     /* keep identical spacing as Services */
    line-height: 1;
    position: relative;
    top: 1px;             /* same nudge as Services */
  }

  /* Sub-sub-menu list (icons + labels) */
  body.tsp-header-v1 .mw-acc-panel{
    display: none;        /* collapsed by default */
    margin: 8px 0 0 0;
    padding: 0 0 0 var(--mw-indent-2);
    list-style: none;
  }
  body.tsp-header-v1 .mw-acc-panel.is-open{ display: block; }

  /* Each sub-sub-menu row */
  body.tsp-header-v1 .mw-acc-link{
    display: flex;
    align-items: center;
    gap: var(--mw-icon-gap);
    text-decoration: none !important;
    margin: 10px 0;
  }
  body.tsp-header-v1 .mw-acc-icon{
    height: var(--mw-icon-size);
    width: auto;
    flex: 0 0 var(--mw-icon-size);
    display: block;
  }
  /* Sub-sub-menu label: same size as overlay links but REGULAR weight */
  body.tsp-header-v1 .mw-acc-text{
    font-size: 20px !important;   /* same as overlay */
    font-weight: 400 !important;  /* regular weight per your spec */
    line-height: 1.35 !important;
  }

  /* Services (top-level) — make the label clickable to open/close the whole accordion */
  body.tsp-header-v1 .mw-services-toggle{
    /* we attach to the existing Services anchor to keep look & spacing identical */
    cursor: pointer;
  }

  /* When all is open, we may need a touch more bottom padding so CTA never overlaps */
  body.tsp-header-v1 .wp-block-navigation__responsive-container.is-menu-open{
    padding-bottom: 160px !important; /* was ~140px in your CSS, +20 for expanded content */
  }
}
/* Show the injected list only when the overlay is open AND the accordion is opened */
body.tsp-header-v1 .mw-services-accordion{ display:none; }
@media (max-width:960px){
  body.tsp-header-v1 .wp-block-navigation__responsive-container.is-menu-open .mw-services-accordion{ display:none; }
  body.tsp-header-v1 .wp-block-navigation__responsive-container.is-menu-open .mw-services-accordion.is-open{ display:block; }
}

/* HOME · MOBILE overlay — colour + icon box normalisation */
@media (max-width:960px){
  /* Force headings (Residential, C&I, Government, Other) to black */
  body.tsp-header-v1 .mw-acc-toggle{
    color: #000 !important;
  }
  /* Also force the Services label to black */
  body.tsp-header-v1 .mw-services-toggle{
    color: #000 !important;
  }

  /* Normalise icons to a consistent square box to fix the C&I “Service & Maintenance” line */
  body.tsp-header-v1 .mw-acc-icon{
    height: var(--mw-icon-size);
    width: var(--mw-icon-size);        /* give a square box */
    object-fit: contain;               /* no distortion */
    display: block;
  }
}
/* HOME · MOBILE — rotate the ▼ arrow when expanded */
@media (max-width:960px){

  /* SERVICES arrow rotation */
  body.tsp-header-v1 .mw-services-toggle[aria-expanded="true"]::after{
    transform: rotate(180deg);
  }

  /* CATEGORY headings arrow rotation */
  body.tsp-header-v1 .mw-acc-toggle[aria-expanded="true"]::after{
    transform: rotate(180deg);
  }

  /* Smooth animation for all arrows */
  body.tsp-header-v1 .mw-services-toggle::after,
  body.tsp-header-v1 .mw-acc-toggle::after{
    transition: transform 0.15s ease;
    display: inline-block;  /* required for rotation */
  }
}

@media (max-width:960px){
  body.tsp-header-v1 .mw-acc-link .mw-acc-icon{pointer-events:none;}
}
/* Desktop mega menu: keep link styling identical to the old divs */
@media (min-width:961px){
  body.tsp-header-v1 .services-menu-mw a.services-menu-item-mw{
    text-decoration: none !important;
    color: inherit !important;
  }
}
/***** HOME — DESKTOP ONLY: fixed-on-scroll pill *****/
@media (min-width:961px){

  /* don’t let ancestors kill stacking */
  body.tsp-header-v1 .wp-site-blocks,
  body.tsp-header-v1 header.wp-block-template-part,
  body.tsp-header-v1 .site-header-mw,
  body.tsp-header-v1 .floating-nav-outer-mw{
    overflow: visible !important;
    transform: none !important;
    filter: none !important;
  }

  /* when JS toggles the class, fix the DESKTOP wrapper */
  body.tsp-header-v1 .floating-nav-desktop-mw.mw-stuck{
    position: fixed !important;
    top: 20px !important;                 /* same gap you like */
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(1100px, calc(100% - 40px)) !important;
    z-index: 10020 !important;            /* below menu panel/bridge */
  }

  /* spacer we inject to preserve layout height when fixed */
  body.tsp-header-v1 .mw-sticky-spacer{
    display: block;
    height: 0;                            /* JS will set a height when stuck */
  }

  /* keep the hover bridge definitely above */
  .hover-bridge-mw{ z-index: 10030 !important; }
  body.tsp-header-v1 .services-menu-mw{ z-index: 10040 !important; }
}
/* HOME — remove any top padding/margins/pseudo-spacers above the header */
@media (min-width:961px){

  /* 0) kill any accidental spacer divs we might have created earlier */
  body.tsp-header-v1 .mw-sticky-spacer{ display:none !important; height:0 !important; }

  /* 1) wp-site-blocks sometimes has global padding/margin */
  body.tsp-header-v1 .wp-site-blocks{
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* 2) first child of wp-site-blocks (often a group wrapper) */
  body.tsp-header-v1 .wp-site-blocks > :first-child{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* 3) if that first child is the template part or a group, reset it too */
  body.tsp-header-v1 .wp-site-blocks > .wp-block-template-part:first-child,
  body.tsp-header-v1 .wp-site-blocks > .wp-block-group:first-child{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* 4) some themes add a pseudo-element as global padding—turn it off */
  body.tsp-header-v1 .wp-site-blocks::before,
  body.tsp-header-v1 header.wp-block-template-part::before{
    content: none !important;
    display: none !important;
  }

  /* 5) keep your sticky gap behaviour */
  body.tsp-header-v1 .floating-nav-outer-mw{
    position: sticky !important;
    top: 20px !important;
    z-index: 10020 !important;
  }
}
/* HOME + RS: keep pill contents inside at very small widths */
@media (max-width: 395px){
  /* Scope to both pages */
  body.tsp-header-v1 .floating-nav-inner-mw{
    gap: 8px !important;                /* tighter gap */
    padding-inline: 16px !important;    /* a bit less side padding */
  }

  /* Logo: allow a little shrink */
  body.tsp-header-v1 .floating-nav-inner-mw img.wp-image-10{
    max-width: 138px !important;        /* was ~150–160; tweakable */
    height: auto !important;
    flex: 0 1 auto !important;          /* allow slight shrink instead of overflow */
  }

  /* Button: trim padding + slightly smaller text */
  body.tsp-header-v1 .header-cta-btn-mw .wp-block-button__link{
    padding: 8px 14px !important;
    font-size: clamp(13px, 3.6vw, 15px) !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }
}
@media (max-width: 350px){
  body.tsp-header-v1 .floating-nav-inner-mw{
    gap: 6px !important;
    padding-inline: 12px !important;
  }

  body.tsp-header-v1 .floating-nav-inner-mw img.wp-image-10{
    max-width: 122px !important;
  }

  body.tsp-header-v1 .header-cta-btn-mw .wp-block-button__link{
    padding: 7px 12px !important;
    font-size: 13px !important;
  }
}
@media (max-width: 960px){
  body.tsp-header-v1 .floating-nav-inner-mw{
    display: flex !important;
    flex-wrap: nowrap !important;     /* keep one line */
    align-items: center !important;
  }
}
/******** RESPONSIVE SAFETY NETS ********/

/* 0) Ensure we always use the MOBILE pill below 961px */
@media (max-width:960px){
  body.tsp-header-v1 .floating-nav-desktop-mw{ display:none !important; }
  body.tsp-header-v1 .floating-nav-mobile-mw{ display:block !important; }
}

/* 1) Compact the MOBILE pill on very small phones (≤360px) */
@media (max-width:360px){
  body.tsp-header-v1 .floating-nav-inner-mw{
    gap: 8px !important;
    padding: 10px 14px !important;   /* tighter padding */
  }

  /* logo */
  body.tsp-header-v1 .floating-nav-mobile-mw img.wp-image-10{
    max-width: 132px !important;     /* was ~150 */
    height: auto !important;
    flex: 0 0 auto !important;
  }

  /* CTA button */
  body.tsp-header-v1 .header-cta-btn-mw .wp-block-button__link{
    padding: 8px 14px !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }
}

/* 1b) Ultra-small safety (≤330px, e.g., legacy 320-wide devices) */
@media (max-width:330px){
  body.tsp-header-v1 .floating-nav-mobile-mw img.wp-image-10{
    max-width: 120px !important;
  }
  body.tsp-header-v1 .header-cta-btn-mw .wp-block-button__link{
    padding: 7px 12px !important;
    font-size: 12px !important;
  }
}

/* 2) Tablet gap (600–767 & 768–960): make sure the mobile pill stays clean */
@media (min-width:600px) and (max-width:960px){
  /* keep one row, balance spacing */
  body.tsp-header-v1 .floating-nav-inner-mw{
    gap: 12px !important;
    padding: 14px 18px !important;
  }
  body.tsp-header-v1 .floating-nav-mobile-mw img.wp-image-10{
    max-width: 160px !important;
  }
  body.tsp-header-v1 .header-cta-btn-mw .wp-block-button__link{
    padding: 10px 16px !important;
    font-size: 15px !important;
  }
}

/* 3) Narrow desktop (961–989px): prevent wrapping inside the desktop pill */
@media (min-width:961px) and (max-width:989px){
  /* tighten global pill spacing */
  body.tsp-header-v1 .floating-nav-inner-mw{
    gap: 20px !important;
    padding-inline: 28px !important;
  }

  /* shrink logo a touch */
  body.tsp-header-v1 .floating-nav-inner-mw img.wp-image-10{
    max-height: 40px !important;
  }

  /* reduce nav link gap */
  body.tsp-header-v1 .services-mega-wrapper-mw .wp-block-navigation__container{
    gap: 20px !important;
  }

  /* trim CTA a bit */
  body.tsp-header-v1 .header-cta-btn-mw .wp-block-button__link{
    padding: 10px 22px !important;
    font-size: 15.5px !important;
  }
}
/* TABLET RANGE = use MOBILE pill (hide desktop nav) */
@media (min-width:600px) and (max-width:960px){
  /* hide every desktop header wrapper */
  body.tsp-header-v1 .floating-nav-desktop-mw,
  body.tsp-header-v1 .services-mega-wrapper-mw{
    display: none !important;
  }

  /* show the mobile pill version */
  body.tsp-header-v1 .floating-nav-mobile-mw{
    display: block !important;
    position: sticky !important;
    top: 12px !important;
    z-index: 10010 !important;
    margin-bottom: -22px !important;    /* maintain hero overlap */
    --m-overlap: 22px;
  }

  /* keep pill compact so logo+CTA fit nicely on tablets */
  body.tsp-header-v1 .floating-nav-inner-mw{
    gap: 12px !important;
    padding: 14px 18px !important;
  }
  body.tsp-header-v1 .floating-nav-mobile-mw img.wp-image-10{
    max-width: 160px !important;
    height: auto !important;
  }
  body.tsp-header-v1 .header-cta-btn-mw .wp-block-button__link{
    padding: 10px 16px !important;
    font-size: 15px !important;
    white-space: nowrap !important;
  }

  /* make sure the hamburger opener is visible (some themes hide/show oddly) */
  body.tsp-header-v1 .wp-block-navigation__responsive-container-open{
    display: inline-flex !important;
  }
}

/* Mobile overlay: full-bleed on tablets too */
@media (min-width:600px) and (max-width:960px){
  body.tsp-header-v1 .wp-block-navigation__responsive-container.is-menu-open,
  body.tsp-header-v1 .wp-block-navigation__responsive-dialog.is-menu-open{
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    padding: 20px 20px 140px !important;
    background: #fff !important;
    overflow: auto !important;
    transform: none !important;
    z-index: 10060 !important;
  }
}
/* TABLET (600–960): show *only* the MOBILE pill */
@media (min-width:600px) and (max-width:960px){

  /* 1) Force-hide every desktop header group, no matter the wrapper */
  body.tsp-header-v1 .site-header-mw > .floating-nav-desktop-mw,
  body.tsp-header-v1 .floating-nav-desktop-mw,
  body.tsp-header-v1 .floating-nav-desktop-mw .wp-block-navigation,
  body.tsp-header-v1 .services-mega-wrapper-mw{
    display: none !important;
    visibility: hidden !important;
  }

  /* 2) Force-show the MOBILE pill wrapper */
  body.tsp-header-v1 .floating-nav-mobile-mw{
    display: block !important;
    position: sticky !important;
    top: 12px !important;
    z-index: 10010 !important;
    margin-bottom: -22px !important;  /* keep the hero overlap */
    --m-overlap: 22px;
  }

  /* 3) Keep the inner pill tidy on tablets */
  body.tsp-header-v1 .floating-nav-mobile-mw .floating-nav-inner-mw{
    gap: 12px !important;
    padding: 14px 18px !important;
  }
  body.tsp-header-v1 .floating-nav-mobile-mw img.wp-image-10{
    max-width: 160px !important;
    height: auto !important;
  }
  body.tsp-header-v1 .header-cta-btn-mw .wp-block-button__link{
    padding: 10px 16px !important;
    font-size: 15px !important;
    white-space: nowrap !important;
  }

  /* 4) Make sure the hamburger opener is visible */
  body.tsp-header-v1 .wp-block-navigation__responsive-container-open{
    display: inline-flex !important;
  }
}

/* Tablet overlay: keep it full-screen when open */
@media (min-width:600px) and (max-width:960px){
  body.tsp-header-v1 .wp-block-navigation__responsive-container.is-menu-open,
  body.tsp-header-v1 .wp-block-navigation__responsive-dialog.is-menu-open{
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    padding: 20px 20px 140px !important;
    background: #fff !important;
    overflow: auto !important;
    transform: none !important;
    z-index: 10060 !important;
  }
}
/* ===== TABLET 600–960px: HARD-SWITCH TO MOBILE PILL ONLY ===== */
@media (min-width:600px) and (max-width:960px){

  /* Hide + collapse ANY desktop pill wrappers */
  body.tsp-header-v1 .floating-nav-desktop-mw,
  body.tsp-header-v1 header .floating-nav-desktop-mw,
  body.tsp-header-v1 .floating-nav-outer-mw .floating-nav-desktop-mw,
  body.tsp-header-v1 .floating-nav-desktop-mw .wp-block-navigation{
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* Force-show the MOBILE pill wrapper */
  body.tsp-header-v1 .floating-nav-mobile-mw{
    display: block !important;
    position: sticky !important;
    top: 12px !important;
    z-index: 10010 !important;
    margin-bottom: -22px !important; /* keep your overlap */
  }

  /* Make sure the inner row behaves like a single line */
  body.tsp-header-v1 .floating-nav-mobile-mw .floating-nav-inner-mw{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
  }

  /* Small tidy-ups at this width */
  body.tsp-header-v1 .floating-nav-mobile-mw img.wp-image-10{
    max-width: 160px !important;
    height: auto !important;
  }
  body.tsp-header-v1 .header-cta-btn-mw .wp-block-button__link{
    padding: 10px 16px !important;
    font-size: 15px !important;
    white-space: nowrap !important;
  }
}

/* 600–960px — guarantee the overlay shows its items when open */
@media (min-width:600px) and (max-width:960px){
  /* the overlay shell */
  body.tsp-header-v1 .wp-block-navigation__responsive-container.is-menu-open,
  body.tsp-header-v1 .wp-block-navigation__responsive-dialog.is-menu-open{
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  /* the actual list inside the overlay */
  body.tsp-header-v1 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
    display: block !important;
  }
}
/* 600–960px: hide ONLY the inline list in the pill (keep hamburger) */
@media (min-width:600px) and (max-width:960px){
  body.tsp-header-v1 .floating-nav-mobile-mw nav.mobile-pill-nav-mw > .wp-block-navigation__container{
    display: none !important;
  }
  body.tsp-header-v1 .floating-nav-mobile-mw nav.mobile-pill-nav-mw .wp-block-navigation__responsive-container-open{
    display: inline-flex !important;
  }
}

/* 600–960px: FORCE the overlay to show its contents when open */
@media (min-width:600px) and (max-width:960px){
  /* Overlay shells */
  body.tsp-header-v1 nav.mobile-pill-nav-mw .wp-block-navigation__responsive-container.is-menu-open,
  body.tsp-header-v1 nav.mobile-pill-nav-mw .wp-block-navigation__responsive-dialog.is-menu-open{
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  /* Inner content wrappers that sometimes get hidden */
  body.tsp-header-v1 nav.mobile-pill-nav-mw .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
  body.tsp-header-v1 nav.mobile-pill-nav-mw .wp-block-navigation__responsive-dialog.is-menu-open .wp-block-navigation__container,
  body.tsp-header-v1 nav.mobile-pill-nav-mw .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
  body.tsp-header-v1 nav.mobile-pill-nav-mw .wp-block-navigation__responsive-dialog.is-menu-open .wp-block-navigation__responsive-container-content{
    display: block !important;
  }
}

/* 0–960 : FORCE the overlay to actually show its menu when open */
@media (max-width:960px){
  /* the overlay shell when open */
  body.tsp-header-v1 .wp-block-navigation__responsive-container[aria-hidden="false"],
  body.tsp-header-v1 .wp-block-navigation__responsive-dialog.is-menu-open{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  /* the list inside the overlay */
  body.tsp-header-v1 .wp-block-navigation__responsive-container[aria-hidden="false"] .wp-block-navigation__container{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  /* make sure items render as rows */
  body.tsp-header-v1 .wp-block-navigation__responsive-container .wp-block-navigation__container > li{
    display:block !important;
    margin:0 0 14px;
  }

  /* colour safety (in case theme sets white) */
  body.tsp-header-v1 .wp-block-navigation__responsive-container a.wp-block-navigation-item__content{
    color:#000 !important;
    text-decoration:none !important;
  }
}

/* FINAL PATCH — tablet 600–960: hide inline list ONLY, never the overlay */
@media (min-width:600px) and (max-width:960px){

  /* 1) Hide just the inline list inside the pill (note the > child selector + class) */
  body.tsp-header-v1 .floating-nav-mobile-mw nav.mobile-pill-nav-mw > .wp-block-navigation__container{
    display: none !important;
  }

  /* 2) Keep the hamburger visible in the pill */
  body.tsp-header-v1 .floating-nav-mobile-mw nav.mobile-pill-nav-mw .wp-block-navigation__responsive-container-open{
    display: inline-flex !important;
  }

  /* 3) FORCE the overlay’s list to show when the menu is open */
  body.tsp-header-v1 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
  body.tsp-header-v1 .wp-block-navigation__responsive-dialog.is-menu-open .wp-block-navigation__container{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}











/* Pill side gutters on ≤960px */
@media (max-width:960px){
  body.tsp-header-v1 .floating-nav-mobile-mw{
    padding-left:10px !important;
    padding-right:10px !important;
  }
  body.tsp-header-v1 .floating-nav-mobile-mw .floating-nav-inner-mw{
    margin: 0 auto !important;
    width: 100% !important;
  }
}

/* Reassert desktop sticky (≥961px) */
@media (min-width:961px){
  body.tsp-header-v1 .floating-nav-outer-mw{
    position: sticky !important;
    top: 20px !important;
    z-index: 9999 !important;
  }
  /* When JS adds .mw-stuck, fix the inner desktop group centered */
  body.tsp-header-v1 .floating-nav-desktop-mw.mw-stuck{
    position: fixed !important;
    top: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(1100px, calc(100% - 40px)) !important;
    z-index: 10020 !important;
  }
}






/* Reassert mobile sticky and fixed fallback (≤960px) */
@media (max-width:960px){
  body.tsp-header-v1 .floating-nav-mobile-mw{
    position: sticky !important;
    top: 12px !important;
    z-index: 10010 !important;
  }
  body.tsp-header-v1 .floating-nav-mobile-mw.mw-stuck{
    position: fixed !important;
    top: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(680px, calc(100% - 24px)) !important;
    z-index: 10020 !important;
  }
}






/* TSP Header v1 — full-bleed mobile/tablet overlay (no outer gap) */
body.tsp-header-v1 .wp-block-navigation__responsive-container.is-menu-open,
body.tsp-header-v1 .wp-block-navigation__responsive-dialog.is-menu-open,
body.tsp-header-v1 .wp-block-navigation__responsive-container[aria-hidden="false"]{
  padding: 0 !important;          /* remove outer gutter */
  inset: 0 !important;            /* ensure it touches all edges */
  width: 100% !important;
  height: 100dvh !important;
  background: #fff !important;    /* solid backdrop */
}

/* Add inner breathing room to the list instead (so text isn't hard to the edge) */
@media (max-width:960px){
  body.tsp-header-v1 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
    padding: 20px !important;
  }
  /* keep room for the CTA at the bottom if you use it */
  body.tsp-header-v1 .wp-block-navigation__responsive-container.is-menu-open{
    padding-bottom: 120px !important;
  }
  body.tsp-header-v1 .wp-block-navigation__responsive-container.is-menu-open .menu-cta-mw{
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 20px !important;
    width: calc(100% - 40px) !important;
  }
}











/* TSP Header v1 — remove outer gutter on mobile/tablet overlay */
body.tsp-header-v1 .wp-block-navigation__responsive-container.is-menu-open,
body.tsp-header-v1 .wp-block-navigation__responsive-dialog.is-menu-open,
body.tsp-header-v1 .wp-block-navigation__responsive-container[aria-hidden="false"]{
  position: fixed !important;
  inset: 0 !important;                 /* touch all edges */
  width: 100% !important;
  height: 100dvh !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;               /* remove the frame */
  background: #fff !important;
  box-shadow: none !important;
  transform: none !important;
  z-index: 10060 !important;
}

/* Nuke margins/padding from any constrained wrappers inside the overlay */
body.tsp-header-v1 .wp-block-navigation__responsive-container.is-menu-open .is-layout-constrained,
body.tsp-header-v1 .wp-block-navigation__responsive-container.is-menu-open .wp-block-group{
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}

/* Put the breathing room on the actual list instead */
@media (max-width:960px){
  body.tsp-header-v1 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
    padding: 20px !important;          /* inner gutter for content */
  }
  /* keep space for bottom CTA if you use it */
  body.tsp-header-v1 .wp-block-navigation__responsive-container.is-menu-open{
    padding-bottom: 120px !important;
  }
  body.tsp-header-v1 .wp-block-navigation__responsive-container.is-menu-open .menu-cta-mw{
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 20px !important;
    width: calc(100% - 40px) !important;
  }
}

















/* ===== Mobile/Tablet overlay CTA — center and keep in-flow (no overlay padding edits) ===== */
@media (max-width:960px){

  /* Reset all legacy/fixed positioning so CTA behaves normally */
  body.tsp-header-v1 .menu-cta-mw{
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;

    display: block !important;
    margin: 75px auto 12px !important;   /* center horizontally */
    width: calc(100% - 40px) !important; /* keep 20px gap each side */
    max-width: 520px !important;         /* optional, can remove */
  }
}