:root {
        --mm-blue: #216d7f;
        --mm-black: #000;
        --mm-text: #111;
      }

      /* Container */
      .mega-menu {
        position: relative;
        width: 100%;
        z-index: 100;
      }

      /* Toggle (mobile) */
      .mega-menu .mega-menu-toggle {
        display: none;
        background: none;
        border: 0;
        cursor: pointer;
        padding: 12px;
      }

      .mega-menu .mega-menu-toggle .hamburger {
        display: flex;
        flex-direction: column;
        width: 24px;
        height: 18px;
        justify-content: space-between;
      }

      .mega-menu .mega-menu-toggle .hamburger span {
        display: block;
        height: 2px;
        width: 100%;
        background: #fff;
        transition: all .3s ease;
      }

      .mega-menu .mega-menu-toggle.active .hamburger span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
      }

      .mega-menu .mega-menu-toggle.active .hamburger span:nth-child(2) {
        opacity: 0;
      }

      .mega-menu .mega-menu-toggle.active .hamburger span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
      }

      /* Top bar */
      .mega-menu .mega-menu-list {
        display: flex;
        align-items: center;
        gap: 1.2rem;
        list-style: none;
        margin: 0;
        padding: 0 20px 0 40px;
        background: var(--mm-black);
        overflow: visible;
      }

      .mega-menu .mega-menu-list>li {
        position: relative;
      }

      .mega-menu .mega-menu-list>li>a,
      .mega-menu .mega-menu-list>li>a:visited {
        display: block;
        padding: 16px 16px;
        text-transform: uppercase !important;
        text-decoration: none;
        color: #fff;
        font-weight: 600;
        letter-spacing: .02em;
        transition: background .2s ease, color .2s ease;
        position: relative;
      }

      /* Hanging teal strip */
      .mega-menu .mega-menu-list>li>a::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 0;
        background: transparent;
        transition: background .2s ease, height .2s ease;
      }

      @media (hover: hover) {

        .mega-menu .mega-menu-list>li:hover>a,
        .mega-menu .mega-menu-list>li.current-menu-item>a,
        .mega-menu .mega-menu-list>li.current-menu-ancestor>a {
          background: var(--mm-blue);
          color: #fff;
        }
      }

      @media (hover: hover) {

        .mega-menu .mega-menu-list>li:hover>a::after,
        .mega-menu .mega-menu-list>li.current-menu-item>a::after,
        .mega-menu .mega-menu-list>li.current-menu-ancestor>a::after {
          background: var(--mm-blue);
          height: 4px;
        }
      }

      /* Default dropdown (non-mega items) */
      .mega-menu .mega-menu-list .sub-menu {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 220px;
        background: #fff;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
        border-radius: 0 0 0px 0px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: all .2s ease;
        padding: 6px 0;
        z-index: 1000;
        list-style: none;
      }

      @media (hover: hover) {
        .mega-menu .mega-menu-list>li:hover>.sub-menu {
          opacity: 1;
          visibility: visible;
          transform: translateY(0);
        }
      }

      .mega-menu .mega-menu-list .sub-menu li>a {
        display: block;
        padding: 10px 16px;
        color: var(--mm-text);
        text-decoration: none;
      }

      @media (hover: hover) {
        .mega-menu .mega-menu-list .sub-menu li>a:hover {
          background: var(--mm-blue);
          color: #fff;
        }
      }

      /* Mega menu */
      .mega-menu .mega-menu-list>li.mega-menu-item {
        position: static;
      }

      .mega-menu .mega-menu-list>li.mega-menu-item>.mega-menu-content {
        position: absolute;
        left: 0;
        right: 0;
        background: #fff;
        box-shadow: 0 10px 24px rgba(0, 0, 0, .14);
        border-top: 4px solid var(--mm-blue);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: all .22s ease;
        z-index: 1000;
        padding: 24px 32px;
        top: 100%;
      }

      /* OPEN only when the top-level link is hovered OR the panel is hovered */
      .mega-menu .mega-menu-list>li.mega-menu-item>a:hover+.mega-menu-content,
      .mega-menu .mega-menu-list>li.mega-menu-item>.mega-menu-content:hover {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }

      /* Grid */
      .mega-menu .mega-menu-grid {
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 24px;
      }

      /* Column headings (clickable links, teal text only) */
      .mega-menu .mega-menu-column {
        background: #fff;
        border-radius: 0px;
        overflow: hidden;
      }

      .mega-menu .mega-menu-column>h3 {
        margin: 0 0 0px 0;
        padding: 2px 7px;
        background: transparent;
        color: var(--mm-blue);
        font-size: 14px;
        font-weight: 700;
        letter-spacing: .03em;
        border-left: 6px solid #000;
        text-transform: uppercase;
      }

      /* Depth-2 links */
      .mega-menu .mega-menu-column>ul {
        list-style: none;
        margin: 0;
        padding: 6px 0;
      }

      .mega-menu .mega-menu-column>ul li a {
        display: block;
        padding: 10px 14px;
        color: var(--mm-text);
        text-decoration: none;
        transition: background .15s ease, color .15s ease;
      }

      @media (hover: hover) {
        .mega-menu .mega-menu-column>ul li a:hover {
          background: var(--mm-blue);
          color: #fff;
        }
      }

      /* Mobile */
      @media (max-width:1625px) {
        .mega-menu .mega-menu-toggle {
          display: block;
        }

        .mega-menu .mega-menu-container {
          position: absolute;
          top: 100%;
          right: 0%;
          background: #fff;
          box-shadow: 0 6px 18px rgba(0, 0, 0, .1);
          opacity: 0;
          visibility: hidden;
          /* <--- FIXED */
          transform: translateY(-8px);
          transition: all .22s ease;
          z-index: 1000;
        }

        /* === SIMPLE MOBILE SUBMENU (single column, teal bg, white links) === */

        .mega-menu.is-mobile .mega-menu-grid {
          display: block !important;
        }

        .mega-menu.is-mobile .mega-menu-column {
          display: block !important;
          margin: 0 !important;
          padding: 0 !important;
          border: 0 !important;
          background: transparent !important;
          border-radius: 0 !important;
        }

        /* === FIX FOR STANDARD DROPDOWNS ON MOBILE === */
        .mega-menu.is-mobile .mega-menu-list>.menu-item-has-children>.sub-menu>li {
          display: block !important;
        }


        /* Show depth-1 headings in mobile mega panels */
        .mega-menu.is-mobile .mega-menu-column>h3 {
          display: block !important;
          margin: 0 !important;
          padding: 0 !important;
        }

        /* Make the heading links look like normal items in the teal panel */
        .mega-menu.is-mobile .mega-menu-column>h3>a {
          display: block !important;
          padding: 14px 16px !important;
          color: #fff !important;
          text-decoration: none !important;
          border-bottom: 1px solid rgba(255, 255, 255, .15) !important;
          background: transparent !important;
          line-height: 1.35 !important;
        }

        /* Tidy edges + hide truly empty ULs under those columns */
        .mega-menu.is-mobile .mega-menu-column>h3:last-of-type>a {
          border-bottom: 0 !important;
        }

        .mega-menu.is-mobile .mega-menu-column>ul:empty {
          display: none !important;
        }

        .mega-menu.is-mobile .mega-menu-list .sub-menu,
        .mega-menu.is-mobile .mega-menu-list .mega-menu-content {
          position: static !important;
          transform: none !important;
          visibility: visible !important;
          opacity: 1 !important;
          display: none;
          margin: 6px 0 12px !important;
          padding: 0 !important;
          width: 100% !important;
          background: #216d7f !important;
          border: 0 !important;
          border-radius: 0 !important;
          box-shadow: none !important;
          max-height: 65vh;
          overflow: auto;
        }

        .mega-menu.is-mobile .mega-menu-list .sub-menu.active,
        .mega-menu.is-mobile .mega-menu-list .mega-menu-content.active,
        .mega-menu.is-mobile .menu-item-has-children.open>.sub-menu,
        .mega-menu.is-mobile .menu-item-has-children.open>.mega-menu-content {
          display: block !important;
        }

        .mega-menu.is-mobile .mega-menu-list .sub-menu li a,
        .mega-menu.is-mobile .mega-menu-column>ul li a {
          display: block;
          padding: 14px 16px;
          color: #fff !important;
          text-decoration: none;
          line-height: 1.35;
          white-space: normal;
          border-bottom: 1px solid rgba(255, 255, 255, .15);
          background: transparent !important;
        }

        .mega-menu.is-mobile .mega-menu-list .sub-menu li:last-child a,
        .mega-menu.is-mobile .mega-menu-column>ul li:last-child a {
          border-bottom: 0;
        }

        .mega-menu.is-mobile .mega-menu-list .sub-menu .sub-menu li a {
          padding-left: 28px;
        }

        .mega-menu.is-mobile .mega-menu-list>li>a:hover,
        .mega-menu.is-mobile .mega-menu-list>li>a:focus {
          background: transparent !important;
          color: var(--mm-text) !important;
        }

        .mega-menu .mega-menu-container.active {
          opacity: 1;
          visibility: visible;
          transform: translateY(0);
          width: 100%;
        }

        .mega-menu .mega-menu-list {
          background: #fff;
          flex-direction: column;
          gap: 0;
          padding: 8px 12px;
        }

        .mega-menu .mega-menu-list>li {
          width: 100%;
        }

        .mega-menu .mega-menu-list>li>a,
        .mega-menu .mega-menu-list>li>a:visited {
          color: var(--mm-text) !important;
          padding: 8px 0;
          background: transparent;
        }

        .mega-menu .mega-menu-list .sub-menu,
        .mega-menu .mega-menu-list .mega-menu-content {
          position: static;
          box-shadow: none;
          opacity: 1;
          visibility: visible;
          transform: none;
          display: none;
          padding: 0;
          border-top: 0;
        }

        .mega-menu .mega-menu-list .sub-menu.active,
        .mega-menu .mega-menu-list .mega-menu-content.active {
          display: block;
        }

        .mega-menu.is-mobile .mega-menu-list>li {
          display: flex;
          align-items: center;
          gap: 8px;
        }

        .mega-menu.is-mobile .mega-menu-list>li>a {
          flex: 1 1 auto;
        }

        .mega-menu.is-mobile .submenu-toggle {
          flex: 0 0 auto;
          appearance: none;
          background: none;
          border: 0;
          width: 44px;
          height: 44px;
          cursor: pointer;
          display: grid;
          place-items: center;
        }

        .mega-menu.is-mobile .submenu-toggle .chevron {
          width: 10px;
          height: 10px;
          border-right: 2px solid var(--mm-text);
          border-bottom: 2px solid var(--mm-text);
          transform: rotate(-45deg);
          transition: transform .2s ease;
        }

        .mega-menu.is-mobile .menu-item-has-children.open>.submenu-toggle .chevron {
          transform: rotate(45deg);
        }

        /* === NEW STYLES FOR ACTIVE MOBILE LINK === */
        .mega-menu.is-mobile .mega-menu-list>li.current-menu-item>a,
        .mega-menu.is-mobile .mega-menu-list>li.current-menu-ancestor>a {
          color: var(--mm-blue) !important;
          background: transparent !important;
        }

        .mega-menu.is-mobile .mega-menu-list>li>a::after {
          display: none !important;
        }
      }

      /* Tablet & smaller */
      @media (max-width: 768px) {
        .mega-menu .mega-menu-container.active {
          width: auto;
          min-width: 360px;
          max-width: 420px;
        }
      }

      /* -----------------------------
        MIGRATED FROM ADDITIONAL CSS
        (kept at end to safely override)
        ----------------------------- */

      /* Special list item inside mega columns styled as a heading on desktop */
      .menu-heading-item {
        margin-top: 14px !important;
        margin-bottom: 14px !important;
        padding: 0 !important;
        line-height: 1 !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.03em !important;
        border-left: 6px solid #000 !important;
        padding-left: 0 !important;
        color: #216d7f !important;
        background: transparent !important;
        list-style: none !important;
      }

      /* Force link color for heading items */
      .mega-menu .mega-menu-column .mega-submenu>li.menu-heading-item>a,
      .mega-menu .mega-menu-column .mega-submenu>li.menu-heading-item>a:link,
      .mega-menu .mega-menu-column .mega-submenu>li.menu-heading-item>a:visited {
        color: #216d7f !important;
      }

      /* Fixed typo: removed stray comma after :focus */
      .mega-menu .mega-menu-column .mega-submenu>li.menu-heading-item>a:focus {
        color: #216d7f !important;
        text-decoration: none;
      }

      /* Keep heading look consistent on hover/active */
      .menu-heading-item>a:hover,
      .menu-heading-item>a:focus,
      .menu-heading-item>a:active {
        color: #216d7f !important;
        text-decoration: none !important;
        background: transparent !important;
        margin-left: -5px;
        margin-bottom: 14px;
      }



      /* Lock a specific heading link look (Wire Mesh Belts note kept generic) */
      .mega-menu .mega-menu-column .mega-submenu li.menu-heading-item>a,
      .mega-menu .mega-menu-column .mega-submenu li.menu-heading-item>a:hover,
      .mega-menu .mega-menu-column .mega-submenu li.menu-heading-item>a:focus,
      .mega-menu .mega-menu-column .mega-submenu li.menu-heading-item>a:active {
        color: #216d7f !important;
        text-decoration: none !important;
        background: transparent !important;
        margin-left: -5px;
        margin-bottom: 10px;
      }









      /* ======================================
      Mobile: make .menu-heading-item look like <h3> desktop headings
      ====================================== */
      .mega-menu.is-mobile .mega-menu-list .mega-submenu>li.menu-heading-item,
      .mega-menu.is-mobile .mega-menu-list .sub-menu>li.menu-heading-item {
        margin: 10px 0 !important;
        padding: 0 !important;
        border: 0 !important;
        list-style: none !important;
        background: transparent !important;
      }

      /* Bold, uppercase teal heading style with left black bar */
      .mega-menu.is-mobile .mega-menu-list .mega-submenu>li.menu-heading-item>a,
      .mega-menu.is-mobile .mega-menu-list .sub-menu>li.menu-heading-item>a {
        display: block !important;
        padding: 8px 14px !important;
        color: #ffffff !important;
        /* teal text */
        text-decoration: none !important;
        background: transparent !important;
        font-weight: 700 !important;
        /* bold like h3 */
        text-transform: uppercase !important;
        letter-spacing: 0.03em !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
        border-left: 11px solid #000 !important;
        /* black left accent */
        border-bottom: none !important;
        /* no divider lines */
      }

      /* Consistent hover/focus/active behavior */
      .mega-menu.is-mobile .mega-menu-list .mega-submenu>li.menu-heading-item>a:hover,
      .mega-menu.is-mobile .mega-menu-list .mega-submenu>li.menu-heading-item>a:focus,
      .mega-menu.is-mobile .mega-menu-list .mega-submenu>li.menu-heading-item>a:active {
        color: #ffffff !important;
        background: transparent !important;
        text-decoration: none !important;
      }

      /* Remove empty ULs below headings if present */
      .mega-menu.is-mobile .mega-menu-list .mega-submenu>li.menu-heading-item>ul:empty {
        display: none !important;
      }






      /* ========= MEGAMENU OVERRIDES ========= */

      /* Invisible bridge to prevent flicker under top link */
      .mega-menu .mega-menu-list>li.mega-menu-item::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        height: 6px;
        pointer-events: none;
      }

      /* Keep panel above other layers; close underline gap */
      .mega-menu .mega-menu-list>li.mega-menu-item>.mega-menu-content {
        z-index: 9999 !important;
        top: calc(100% - 4px) !important;
      }

      /* Open states (hover/focus and JS .is-open) */
      .mega-menu .mega-menu-list>li.mega-menu-item>a:hover+.mega-menu-content,
      .mega-menu .mega-menu-list>li.mega-menu-item>.mega-menu-content:hover {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
      }

      .mega-menu .mega-menu-column>ul.sub-menu {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
        width: auto !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        transform: none !important;
        line-height: 1.1 !important;
      }

      .mega-menu .mega-menu-column>ul.sub-menu>li {
        display: block !important;
      }

      .mega-menu .mega-menu-column>ul.sub-menu>li>a {
        display: block !important;
        padding: 5px 10px !important;
        color: var(--mm-text) !important;
        text-decoration: none !important;
      }

      .mega-menu .mega-menu-column>ul.sub-menu>li>a:hover {
        background: var(--mm-blue) !important;
        color: #fff !important;
      }

      /* Hide tiny default dropdown under mega parents */
      .mega-menu .mega-menu-list>li.mega-menu-item>ul.sub-menu {
        display: none !important;
      }

      /* Grid columns override for large panels */
      .mega-menu .mega-menu-grid {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(220px, 1fr)) !important;
        gap: 10px !important;
      }

      /* Default hidden + extra padding for panel */
      .mega-menu .mega-menu-list>li.mega-menu-item>.mega-menu-content {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        pointer-events: none;
        padding: 65px;
      }

      /* Remove last column border if used */
      .mega-menu .mega-menu-grid>div:last-child {
        border-right: none;
      }

      /* :has open and focus-within support */
      .mega-menu .mega-menu-list>li.mega-menu-item:has(> a:hover)>.mega-menu-content,
      .mega-menu .mega-menu-list>li.mega-menu-item:has(> .mega-menu-content:hover)>.mega-menu-content,
      .mega-menu .mega-menu-list>li.mega-menu-item:focus-within>.mega-menu-content {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
      }

      /* JS fallback: open via .is-open */
      .mega-menu .mega-menu-list>li.mega-menu-item.is-open>.mega-menu-content {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
      }

      /* Top-level link state */
      .mega-menu-item:hover>a,
      .mega-menu-item.current-page-item>a {
        color: #fff !important;
      }

      /* Chevron hard reset (mobile only – tied to .is-mobile) */
      .mega-menu.is-mobile .submenu-toggle {
        all: unset;
        display: grid !important;
        place-items: center !important;
        width: 44px !important;
        height: 44px !important;
        cursor: pointer !important;
        margin-left: auto;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        outline: none !important;
        -webkit-appearance: none !important;
        appearance: none !important;
      }

      .mega-menu.is-mobile .submenu-toggle::before,
      .mega-menu.is-mobile .submenu-toggle::after {
        content: none !important;
      }

      .mega-menu.is-mobile .submenu-toggle .chevron {
        width: 10px;
        height: 10px;
        border-right: 2px solid var(--mm-text) !important;
        border-bottom: 2px solid var(--mm-text) !important;
        transform: rotate(-45deg);
        transition: transform .2s ease;
        background: transparent !important;
      }

      .mega-menu.is-mobile .menu-item-has-children.open>.submenu-toggle .chevron {
        transform: rotate(45deg);
      }









      /* --- MOBILE: ensure link and chevron never overlap --- */
      @media (max-width: 1625px) {
        .mega-menu.is-mobile .mega-menu-list>li {
          position: relative;
        }

        /* Give the link full row, but leave space for the chevron button */
        .mega-menu.is-mobile .menu-item-has-children>a {
          position: relative;
          z-index: 1;
          display: block;
          padding-right: 56px !important;
          /* room for the 44px chevron + spacing */
        }

        /* Chevron lives on the far right and sits above the background only */
        .mega-menu.is-mobile .submenu-toggle {
          position: absolute !important;
          right: 0;
          top: 0;
          width: 44px !important;
          height: 44px !important;
          z-index: 2;
          margin: 0 !important;
        }

        /* Make sure the chevron doesn’t spill over the text area */
        .mega-menu.is-mobile .submenu-toggle * {
          pointer-events: none;
          /* tap target is the button box only */
        }

        .mega-menu.is-mobile .mega-menu-list>.menu-item {
          flex-direction: column;
          align-items: flex-start !important;
        }
      }