@charset "UTF-8";
/* Native dialog occupies the browser's top layer above the menu and overlays. */
body.h26 dialog.h26-search {
  box-sizing: border-box; position: fixed; inset: 0; margin: auto;
  width: min(760px, calc(100% - 40px)); max-width: none; height: fit-content;
  max-height: calc(100dvh - 40px); padding: 0; overflow: auto;
  color: #f5f6f8; background: #0c1018;
  border: 1px solid #343c48; border-radius: 18px;
  box-shadow: 0 24px 80px #0008;
  font-family: Montserrat, sans-serif; text-align: left;
}
body.h26 dialog.h26-search:not([open]) { display: none; }
body.h26 dialog.h26-search[open] { display: block; }
body.h26 dialog.h26-search::backdrop { background: rgb(3 5 9 / 82%); backdrop-filter: blur(6px); }
body.h26 .h26-search__panel { position: relative; padding: 56px 48px 40px; }
body.h26 .h26-search__close {
  position: absolute; top: 12px; right: 12px; display: grid; place-items: center;
  width: 44px; height: 44px; min-width: 44px; padding: 0; margin: 0;
  border: 1px solid #45505e; border-radius: 50%; color: #f5f6f8;
  background: transparent; font: 30px/1 Arial, sans-serif; cursor: pointer;
}
body.h26 .h26-search__eyebrow { margin: 0 0 16px; color: #00aeef; font-size: 12px; font-weight: 700; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; }
body.h26 #h26-search-title { margin: 0; max-width: 560px; color: #f5f6f8; font-size: clamp(28px, 3.2vw, 40px); font-weight: 700; line-height: 1.15; letter-spacing: -.025em; }
body.h26 .h26-search__intro { margin: 18px 0 30px; color: #bdc6d2; font-size: 16px; line-height: 1.6; }
body.h26 .h26-search__form { display: block; margin: 0; padding: 0; width: 100%; height: auto; }
body.h26 .h26-search__form label { display: block; margin: 0 0 10px; color: #f5f6f8; font-size: 14px; font-weight: 600; }
body.h26 .h26-search__field { display: flex; align-items: center; gap: 8px; padding: 6px; border: 1px solid #657181; border-radius: 32px; background: #151c26; }
body.h26 .h26-search__field:focus-within { border-color: #00aeef; outline: 2px solid #00aeef; outline-offset: 3px; }
body.h26 .h26-search__field input {
  box-sizing: border-box; flex: 1; min-width: 0; width: 100%; height: 48px;
  margin: 0; padding: 10px 16px; border: 0; border-radius: 24px;
  background: transparent; box-shadow: none; color: #f5f6f8;
  font: 500 16px/1.5 Montserrat, sans-serif; outline: none;
}
body.h26 .h26-search__field input::placeholder { color: #aeb9c8; opacity: 1; }
body.h26 .h26-search__field button {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 16px;
  width: auto; min-width: 124px; min-height: 48px; margin: 0; padding: 12px 22px;
  border: 0; border-radius: 26px; background: #00aeef; color: #071019;
  font: 700 14px/1.5 Montserrat, sans-serif; cursor: pointer; white-space: nowrap;
}
body.h26 .h26-search__field button:hover { background: #48caff; }
body.h26 .h26-search__close:hover { background: #273342; }
body.h26 .h26-search button:focus-visible { outline: 2px solid #f5f6f8; outline-offset: 3px; }
body.h26 .h26-search__hint { margin: 18px 0 0; color: #aeb9c8; font-size: 12px; line-height: 1.5; }
@media (max-width: 600px) {
  body.h26 dialog.h26-search { width: calc(100% - 24px); max-height: calc(100dvh - 24px); border-radius: 14px; }
  body.h26 .h26-search__panel { padding: 64px 22px 28px; }
  body.h26 .h26-search__field { display: grid; gap: 12px; padding: 0; border: 0; border-radius: 0; background: transparent; }
  body.h26 .h26-search__field:focus-within { outline: none; }
  body.h26 .h26-search__field input { border: 1px solid #657181; background: #151c26; height: 54px; }
  body.h26 .h26-search__field input:focus { outline: 2px solid #00aeef; outline-offset: 3px; }
  body.h26 .h26-search__field button { width: 100%; }
  body.h26 .h26-search__hint { display: none; }
}
/* ============================================================================
   2026 design layer for the real WordPress mega menu.

   The markup and behaviour are the theme's own (lib/layout/header.php +
   PDM_Navwalker), so editors keep managing it in Appearance > Menus. This file
   only restyles it: transparent header over the hero, comp typography, dark
   mega panels, and a full-screen mobile drawer.
   ========================================================================== */

.h26 {
  --nav-h: 68px;
  --nav-panel: #080b18;
  --c-accent: #00aeef;
  --c-red: #c20430;
  /* The page container (--container 1204px + 24px padding) expressed as an
     inline offset, so the logo, the nav, the mega-panel columns and every
     section below share one left edge. */
  --nav-inset: max(24px, calc((100% - 1204px) / 2 + 24px));
}

/* ---------- bar ---------------------------------------------------------- */

.h26 .gheader,
.h26 .gheader.gheader--sitewide-custom {
  position: absolute; top: 0; left: 0; right: 0; z-index: 60;
  background: transparent; box-shadow: none; border: 0;
  padding: 0; margin: 0; min-height: 0;
}
/* The WordPress admin bar is fixed above the page; keep this sitewide header
   below it for logged-in reviewers on desktop and mobile. */
body.h26:has(#wpadminbar) .gheader.gheader--sitewide-custom {
  top: var(--wp-admin--admin-bar--height, 32px);
}
/* lib/layout/header.php prints an inline <style> setting this to a 1560px
   container — wider than the page, so the logo sat ~190px left of the content
   below it. That block is later in document order and (0,3,0), so this has to
   outweigh it on specificity rather than order. --nav-h has to match the bar
   it actually renders, because the mega panel hangs off the bottom of it. */
body.h26 .gheader.gheader--sitewide-custom .gheader__bottom,
.h26 .gheader__bottom {
  max-width: none; margin: 0;
  padding: 0 var(--nav-inset);
  min-height: var(--nav-h);
  display: flex; align-items: center; gap: 20px;
  background: transparent; border: 0;
  box-sizing: border-box;
}
.h26 .gheader__logo { flex: 0 0 auto; margin: 0; }
.h26 .gheader__logo .site-logo { display: block; }
.h26 .gheader__logo img {
  width: 173px; max-width: 173px; height: auto; display: block;
}

/* ---------- desktop nav -------------------------------------------------- */

.h26 .menu--main {
  flex: 1 1 auto; display: flex; align-items: center;
  background: transparent; position: static;
}
.h26 .menu--main > ul {
  display: flex; align-items: center; gap: 22px;
  margin: 0; padding: 0; list-style: none; position: static;
}
.h26 .menu--main > ul > li { position: static; margin: 0; }
.h26 .menu--main > ul > li > a {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 0; position: relative;
  font-size: 11.65px !important; font-weight: 700; line-height: 1.2;
  letter-spacing: .1px; color: #fff !important; text-decoration: none; text-transform: none;
  background: none;
  border: 0; border-bottom: 2px solid transparent;
  transition: border-color .22s ease;
}
/* The legacy sheet owns .nav-link::after (a sized chevron indicator) and wins
   on specificity, so it is hidden outright and the hover underline is drawn on
   the <li> instead — no fight, no stray coloured tab. */
.h26 .menu--main > ul > li > a::after,
.h26 .menu--main > ul > li > a::before { display: none !important; content: none !important; }

.h26 .menu--main > ul > li { position: static; margin: 0; }
.h26 .menu--main > ul > li > a { position: relative; }
/* border-based underline: no pseudo-element, so nothing competes with the
   legacy chevron and the <li> can stay position:static for the mega panel. */
.h26 .menu--main > ul > li:hover > a,
.h26 .menu--main > ul > li.current-menu-item > a { border-bottom-color: var(--c-accent); }

/* ---------- mega panels: colour ------------------------------------------
   Geometry is owned by the "mega panel layout" block near the end of this
   file; only surface colour lives here. */

.h26 .menu--main li.megamenu { background: transparent; }
.h26 .menu--main .dropdown-menu { color: #fff; }
.h26 .menu--main .dropdown-menu a { color: #fff; }
.h26 .menu--main .dropdown-menu a:hover { color: var(--c-accent); }
.h26 .menu--main .megamenu-info-item__pre { color: var(--c-accent); }
.h26 .nav-bg, .h26 .nav-bg--lg { background: transparent; }
.h26 .menu--main .svg-icon { fill: currentColor; }
.h26 .menu--main .nav-item, .h26 .menu--main .item-lvl-0 { background: transparent; border: 0; }

/* ---------- right-hand tools --------------------------------------------
   lib/layout/header.php prints an inline <style> that wins on document order
   and uses !important, so these overrides match its specificity and only
   change size/colour — its ::before icons are left in place. */

.h26 .gheader .menu-btn {
  margin-left: auto; display: flex; align-items: center; gap: 12px;
  background: transparent; padding: 0; border: 0; float: none; width: auto;
}

body.h26 .gheader.gheader--sitewide-custom .menu-btn .open-search {
  width: 106px !important; height: 24px !important; border-radius: 12px !important;
  background-color: #fff !important; color: #6b6b6b !important;
  font-size: 10px !important; font-weight: 500 !important; padding: 0 10px !important;
}
body.h26 .gheader.gheader--sitewide-custom .menu-btn .open-search::before {
  width: 12px !important; height: 12px !important; margin-right: 6px !important;
}

body.h26 .gheader.gheader--sitewide-custom .menu-btn .head-btn-red,
body.h26 .gheader.gheader--sitewide-custom .menu-btn .btn--red {
  height: 24px !important; padding: 0 14px !important; border-radius: 12px !important;
  background: transparent !important; border: 1px solid var(--c-red) !important;
  color: #fff !important; font-size: 8.8px !important; font-weight: 700 !important;
  letter-spacing: .2px !important;
}
body.h26 .gheader.gheader--sitewide-custom .menu-btn .head-btn-red:hover,
body.h26 .gheader.gheader--sitewide-custom .menu-btn .btn--red:hover {
  background: var(--c-red) !important;
}

body.h26 .gheader.gheader--sitewide-custom .menu-btn .head-login {
  height: 24px !important; font-size: 10.5px !important; font-weight: 700 !important;
}
body.h26 .gheader.gheader--sitewide-custom .menu-btn .head-login::before {
  width: 14px !important; height: 14px !important; margin-right: 5px !important;
}

/* comp shows a bare phone glyph, not a bordered disc */
body.h26 .gheader.gheader--sitewide-custom .menu-btn .head-phone {
  width: 20px !important; height: 20px !important;
  border: 0 !important; border-radius: 0 !important; background: transparent !important;
}
body.h26 .gheader.gheader--sitewide-custom .menu-btn .head-phone::before {
  width: 17px !important; height: 17px !important;
}

/* search overlay */
.h26 .search-menu { background: rgba(4, 6, 14, .96); backdrop-filter: blur(8px); z-index: 80; }
.h26 .search-menu.active { display: flex; }
.h26 .search-menu input[type="text"] {
  background: transparent; border: 0; border-bottom: 2px solid rgba(255, 255, 255, .35);
  color: #fff; font-size: 22px; padding: 12px 0;
}
.h26 .search-menu input[type="text"]::placeholder { color: rgba(255, 255, 255, .55); }

/* ---------- burger ------------------------------------------------------- */

.h26 .mobile-right { display: none; margin-left: auto; }
.h26 .menu-burger {
  width: 40px; height: 40px; background: none; border: 0; padding: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.h26 .menu-burger__text { display: none; }
.h26 .menu-burger__icon,
.h26 .menu-burger__icon span,
.h26 .menu-burger__icon::before,
.h26 .menu-burger__icon::after {
  display: block; width: 24px; height: 2px; border-radius: 2px; background: #fff;
  transition: transform .22s ease, opacity .18s ease;
}
.h26 .menu-burger__icon { position: relative; background: transparent; }
.h26 .menu-burger__icon span { position: absolute; top: 50%; margin-top: -1px; }
.h26 .menu-burger__icon::before { content: ""; position: absolute; top: -7px; }
.h26 .menu-burger__icon::after  { content: ""; position: absolute; top: 7px; }
.h26 .menu-burger.active .menu-burger__icon span { opacity: 0; }
.h26 .menu-burger.active .menu-burger__icon::before { transform: translateY(7px) rotate(45deg); }
.h26 .menu-burger.active .menu-burger__icon::after  { transform: translateY(-7px) rotate(-45deg); }

.h26 .header-mobile-btns { display: none; }
.h26 body.no-scroll, body.no-scroll { overflow: hidden; }

/* ---------- mobile / tablet --------------------------------------------- */

@media (max-width: 1459px) {
  /* The drawer hangs off the bar, so the bar height stays a single variable. */
  .h26 { --nav-h: 74px; }
  body.h26 .gheader.gheader--sitewide-custom .gheader__bottom,
  .h26 .gheader__bottom { gap: 12px; }
  /* the legacy burger wrapper carries 1.5em of padding, making it 80px tall —
     taller than the bar, so it was the thing setting the bar's height */
  .h26 .mobile-right { display: flex; align-items: center; }
  .h26 .gheader .mobile-right .burger-container {
    height: auto; min-height: 0; width: auto; padding: 0; margin: 0;
    display: flex; align-items: center;
  }

  /* full-screen drawer */
  .h26 .menu--main {
    position: fixed; inset: var(--nav-h) 0 0; z-index: 70;
    display: block; flex: none;
    background: var(--nav-panel);
    padding: 18px 22px 40px;
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(100%); visibility: hidden;
    transition: transform .28s ease, visibility .28s ease;
  }
  .h26 .menu--main.active { transform: none; visibility: visible; }

  .h26 .menu--main > ul { display: block; }
  /* header.php's inline <style> draws these dividers in accent blue, which is
     far too loud against the dark drawer */
  body.h26 .gheader .menu--main > ul > li,
  .h26 .menu--main > ul > li { border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .h26 .menu--main > ul > li > a {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 0; font-size: 16px;
  }
  .h26 .menu--main > ul > li > a::after { display: none; }

  /* accordion: panels are closed until the item gets .active.
     `.megamenu` is the class the navwalker puts on the top-level <li>, not on
     the panel — hiding it took four of the five nav items out of the drawer. */
  .h26 .menu--main .dropdown-menu {
    position: static; display: none; width: auto; min-width: 0;
    box-shadow: none; border: 0; border-radius: 0;
    background: rgba(255, 255, 255, .03);
    padding: 6px 0 14px; margin: 0 0 12px; opacity: 1; visibility: visible;
    transform: none; max-height: none;
    /* the site-wide Additional CSS pins .dropdown-menu.depth-0 to 328px for the
       desktop rail, which left a tall empty gap under every accordion */
    min-height: 0 !important;
  }
  .h26 .menu--main > ul > li.megamenu { display: block; }
  .h26 .menu--main .menu-item.active > .dropdown-menu { display: block; }
  .h26 .menu--main .megamenu ul { display: block; }
  .h26 .menu--main .megamenu li > a { display: block; padding: 9px 0; font-size: 14px; }
  .h26 .menu--main .megamenu-info { display: none; }

  .h26 .mobile-arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; margin-left: auto; flex: 0 0 34px;
    background: none; border: 0; position: relative;
  }
  /* the button already contains a legacy plus-sign <svg>; leaving it visible
     tangled it with the chevron drawn below */
  .h26 .mobile-arrow .svg-icon { display: none !important; }
  .h26 .mobile-arrow::after {
    content: ""; width: 9px; height: 9px; border-right: 2px solid #fff; border-bottom: 2px solid #fff;
    transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease;
  }
  .h26 .menu-item.active > a .mobile-arrow::after,
  .h26 .menu-item.active > .mobile-arrow::after { transform: rotate(-135deg) translate(-2px, -2px); }

  /* The desktop tool row becomes the drawer footer. These have to carry the
     same weight as the comp-sized desktop rules above (which are !important at
     (0,5,1) and not media-scoped), or the pill stays 106px wide in here. */
  body.h26 .gheader.gheader--sitewide-custom .menu-btn,
  .h26 .gheader .menu-btn {
    margin: 26px 0 0 !important; display: flex; flex-wrap: wrap;
    gap: 14px; width: 100%; align-items: center; justify-content: center;
  }
  body.h26 .gheader.gheader--sitewide-custom .menu-btn .open-search {
    width: 100% !important; height: 44px !important; border-radius: 22px !important;
    font-size: 14px !important; padding: 0 18px !important; justify-content: flex-start;
  }
  body.h26 .gheader.gheader--sitewide-custom .menu-btn .open-search::before {
    width: 16px !important; height: 16px !important; margin-right: 10px !important;
  }
  body.h26 .gheader.gheader--sitewide-custom .menu-btn .head-btn-red {
    height: 44px !important; border-radius: 22px !important;
    font-size: 13px !important; padding: 0 22px !important; flex: 1 1 auto;
  }
  body.h26 .gheader.gheader--sitewide-custom .menu-btn .head-login {
    height: 44px !important; font-size: 14px !important;
  }
  body.h26 .gheader.gheader--sitewide-custom .menu-btn .head-login::before {
    width: 18px !important; height: 18px !important; margin-right: 8px !important;
  }
  body.h26 .gheader.gheader--sitewide-custom .menu-btn .head-phone {
    width: 24px !important; height: 24px !important;
  }
  body.h26 .gheader.gheader--sitewide-custom .menu-btn .head-phone::before {
    width: 22px !important; height: 22px !important;
  }

  .h26 .header-mobile-btns { display: none; }
}

@media (max-width: 600px) {
  .h26 .gheader__logo img { width: 148px; max-width: 148px; }
  .h26 .menu--main { inset: var(--nav-h) 0 0; padding-inline: 18px; }
}

/* ---------- mega panel layout -------------------------------------------
   The legacy sheet lays these panels out for a light, full-bleed header:
   `width:100vw !important`, percentage padding (12% left / 28% right), CSS
   multi-columns, a contact rail absolutely positioned against the viewport
   edge, a decorative watermark — and all of it behind `min-width:1460px`, so
   between 1181px and 1459px the panels never opened at all. The legacy sheet
   also swings the whole nav off-canvas below 1460px, so 1460 is the real
   desktop boundary for this header and every rule below keys off it.

   None of that geometry lines up with the 2026 page container, so this block
   takes the layout over. One centred 1232px content area shared with the rest
   of the page; link lists in real columns; the contact rail as the last
   column instead of a box floating in dead space. The markup is untouched —
   editors keep managing the menu in Appearance > Menus.                     */

@media (min-width: 1460px) {

  .h26 {
    --nav-gutter: var(--nav-inset);
    --nav-rail: 264px;
    --nav-gap: 40px;
    /* the contact rail's natural height — see the variant A min-height below */
    --nav-rail-h: 300px;
    --nav-pad-y: 32px;
  }

  /* --- the bar itself: full-height hit areas ------------------------------
     Each top-level item stretches to the full 90px bar so its bottom edge
     meets the panel. Without this there is a dead strip between link and
     panel and the menu closes as the pointer travels down. */
  .h26 .menu--main { align-self: stretch; }
  .h26 .menu--main > ul { height: 100%; }
  .h26 .menu--main > ul > li { align-self: stretch; display: flex; align-items: center; }
  .h26 .menu--main .mobile-arrow { display: none !important; }

  /* --- panel shell -------------------------------------------------------- */
  .h26 .menu--main > ul > li.megamenu { position: static !important; }

  .h26 .menu--main > ul > li.megamenu > .dropdown-menu {
    position: absolute !important;
    top: var(--nav-h) !important;
    left: 0 !important; right: 0 !important; bottom: auto !important;
    width: auto !important; max-width: none !important; min-width: 0 !important;
    height: auto !important;
    /* `overflow-y:auto` here reserves an 11px scrollbar gutter even with
       nothing to scroll, which shrinks the padding box the rail is positioned
       against and pulled it 5px off the page's right edge. The tallest panel
       is ~500px, so scrolling is only wired up for genuinely short viewports
       (below). */
    overflow: visible;
    margin: 0 !important;
    padding: 32px var(--nav-gutter) 38px !important;
    background: var(--nav-panel);
    border: 0 !important; border-top: 1px solid rgba(0, 174, 239, .28) !important;
    border-radius: 0;
    box-shadow: 0 28px 56px rgba(0, 0, 0, .55);
    list-style: none;
    z-index: 70;
    animation: h26-mega-in .16s ease-out both;
  }

  /* the legacy watermark plate sits behind the links and reads as a smudge */
  .h26 .menu--main > ul > li.megamenu > .dropdown-menu::before,
  .h26 .menu--main > ul > li.megamenu > .dropdown-menu::after { content: none !important; }

  /* open on hover *and* keyboard focus, from the first desktop breakpoint */
  .h26 .menu--main > ul > li.megamenu:hover > .dropdown-menu,
  .h26 .menu--main > ul > li.megamenu:focus-within > .dropdown-menu {
    display: block !important;
  }

  /* --- variant A: flat link list (Who We Serve, Who We Are, Learning Center)
     Multi-column, so the list still reads top-to-bottom then across. The
     right-hand gutter is reserved by padding and the rail is placed into it. */
  .h26 .menu--main > ul > li.megamenu > .dropdown-menu {
    padding-right: calc(var(--nav-gutter) + var(--nav-rail) + var(--nav-gap)) !important;
    column-count: 3;
    column-gap: var(--nav-gap);
    /* The rail is out of flow here, so the panel has to reserve room for it or
       a short list (Learning Center has five) lets it hang out of the bottom.
       The site-wide Additional CSS pins every panel to 328px for this reason;
       that is undone below so long panels are no longer padded out with dead
       space, and this replaces it with the height the rail actually needs. */
    min-height: calc(var(--nav-rail-h) + var(--nav-pad-y) * 2) !important;
  }
  .h26 .menu--main > ul > li.megamenu--one > .dropdown-menu { column-count: 2; }
  .h26 .menu--main > ul > li.megamenu > .dropdown-menu > li { break-inside: avoid; }

  /* --- variant B: grouped columns (What We Do)
     Three heading + sub-list groups plus the rail, as four real grid tracks. */
  .h26 .menu--main > ul > li.megamenu--show-drop > .dropdown-menu {
    column-count: auto !important;
    padding-right: var(--nav-gutter) !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) var(--nav-rail);
    column-gap: var(--nav-gap);
    align-items: start;
    /* the rail is a real grid track here, so content alone sets the height */
    min-height: 0 !important;
  }
  .h26 .menu--main > ul > li.megamenu--show-drop:hover > .dropdown-menu,
  .h26 .menu--main > ul > li.megamenu--show-drop:focus-within > .dropdown-menu {
    display: grid !important;
  }
  /* the rail's wrapper is the first child, so it has to be placed explicitly */
  .h26 .menu--main > ul > li.megamenu--show-drop > .dropdown-menu > li:first-child {
    grid-column: 4; grid-row: 1;
  }
  .h26 .menu--main .megamenu--show-drop > .dropdown-menu > li.item-lvl-1 {
    width: auto !important; padding: 0 !important;
  }
  /* the nested <ul> inside a group inherits every panel rule otherwise */
  .h26 .menu--main .dropdown-menu .item-lvl-1 > ul.dropdown-menu {
    position: static !important; display: block !important;
    width: auto !important; max-width: none !important;
    height: auto !important; min-height: 0 !important; max-height: none !important;
    left: auto !important; top: auto !important;
    margin: 0 !important; padding: 0 !important;
    background: none !important; box-shadow: none !important; border: 0 !important;
    column-count: auto !important; overflow: visible !important;
    animation: none !important;
  }

  /* --- the contact rail ---------------------------------------------------
     Variant B makes it a grid cell. Variant A cannot (its links are siblings
     of the rail, and multi-column would flow it into the first column), so
     there it is absolutely positioned — into the gutter reserved for it
     above, never over the links. */
  .h26 .menu--main .dropdown-menu .megamenu-info {
    position: absolute !important;
    top: 32px !important; right: var(--nav-gutter) !important;
    left: auto !important; bottom: auto !important;
    width: var(--nav-rail);
    display: flex !important; flex-direction: column;
    margin: 0 !important; padding: 22px 24px !important;
    background: rgba(255, 255, 255, .045) !important;
    border: 1px solid rgba(255, 255, 255, .07) !important;
    border-radius: 12px;
    text-align: left !important;
  }
  .h26 .menu--main .megamenu--show-drop .megamenu-info {
    position: static !important; width: auto;
  }
}

/* rail internals (shared with the tablet range, hidden on the drawer) */
.h26 .menu--main .megamenu-info > li { margin: 0 0 18px !important; }
.h26 .menu--main .megamenu-info > li:last-child { margin-bottom: 0 !important; }
.h26 .menu--main .megamenu-info .megamenu-info-item { margin: 0 !important; padding: 0 !important; }
.h26 .menu--main .megamenu-info-item__pre {
  color: var(--c-accent) !important;
  font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: .7px; text-transform: uppercase;
  margin: 0 0 6px !important;
}
.h26 .menu--main .megamenu-info .h4 {
  font-size: 12.5px !important; font-weight: 600 !important; line-height: 1.55 !important;
  margin: 0 !important; color: #fff !important;
}
.h26 .menu--main .megamenu-info a { color: #fff !important; }
.h26 .menu--main .megamenu-info a:hover { color: var(--c-accent) !important; }
.h26 .menu--main .megamenu-info__social {
  display: flex !important; gap: 16px; margin: 4px 0 0 !important; padding: 0 !important;
}
.h26 .menu--main .megamenu-info__social li { margin: 0 !important; }
.h26 .menu--main .megamenu-info__social a { margin: 0 !important; }

/* The social glyphs are inline <svg>, not mask sprites — colouring them with
   background-color painted a white square around each one. Fill the paths. */
.h26 .menu--main .megamenu-info .svg-icon,
.h26 .menu--main .megamenu-info__social .svg-icon,
.h26 .menu--main .megamenu-info__social a .svg-icon {
  background: none !important; opacity: .85;
  transition: opacity .15s ease;
}
.h26 .menu--main .megamenu-info__social svg,
.h26 .menu--main .megamenu-info__social svg path {
  fill: #fff !important; stroke: none;
}
/* X is a bitmap embedded in SVG; path fill rules cannot recolor it. */
.h26 .menu--main .megamenu-info__social .svg-icon--x svg { filter: brightness(0) invert(1); }
.h26 .menu--main .megamenu-info__social a:hover .svg-icon { opacity: 1; }
.h26 .menu--main .megamenu-info__social a:hover svg path { fill: var(--c-accent) !important; }

/* ---------- mega panel rows ---------------------------------------------
   The legacy sheet draws #ededed hairlines and white row fills for a light
   header. Everything in here is reset to nothing, then exactly one hairline
   is put back — under link rows only, so it can never span the panel. */

.h26 .menu--main .dropdown-menu li,
.h26 .menu--main .dropdown-menu .menu-item {
  background: transparent !important;
  border: 0 !important;
  margin: 0; padding: 0;
  list-style: none;
}
.h26 .menu--main .megamenu:not(.megamenu--show-drop) > .dropdown-menu > li.item-lvl-1,
.h26 .menu--main .megamenu--show-drop .item-lvl-2 {
  border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
}

/* `a.nav-link` only: the contact rail's links are bare <a>, and turning those
   into padded flex rows broke "Sales: 866-488-2024" onto two lines. */
.h26 .menu--main .dropdown-menu a.nav-link {
  display: flex !important; align-items: center; gap: 10px;
  padding: 9px 0 !important; margin: 0 !important;
  font-size: 12.5px !important; font-weight: 500 !important; line-height: 1.35 !important;
  color: #dfe5ef !important;
  background: none !important;
  text-decoration: none;
  transition: color .15s ease, transform .15s ease;
}
.h26 .menu--main .dropdown-menu a.nav-link:hover { color: var(--c-accent) !important; }
.h26 .menu--main .megamenu:not(.megamenu--show-drop) .dropdown-menu a.nav-link:hover,
.h26 .menu--main .megamenu--show-drop .item-lvl-2 > a:hover { transform: translateX(3px); }

/* Link labels live in a <span class="inner">, so the colour has to reach it. */
.h26 .menu--main .dropdown-menu a .inner { color: inherit !important; }

/* group headings (What We Do) */
.h26 .menu--main .megamenu--show-drop > .dropdown-menu > li.item-lvl-1 > a.nav-link {
  font-size: 13px !important; font-weight: 700 !important;
  color: #fff !important;
  padding: 0 0 12px !important; margin: 0 0 6px !important;
  border-bottom: 1px solid rgba(0, 174, 239, .45) !important;
  transform: none !important;
}
.h26 .menu--main .megamenu--show-drop > .dropdown-menu > li.item-lvl-1 > a.nav-link::before {
  display: none !important;
}

/* Row icons are background-image SVGs drawn for a white header, and the
   legacy rule sizes them with padding instead of a box. Both are redone here
   so they sit in the flex row and read as light-on-dark. */
.h26 .menu--main .dropdown-menu .nav-bg > a::before {
  content: "" !important;
  flex: 0 0 17px; width: 17px; height: 17px;
  padding: 0 !important; margin: 0 !important;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  filter: brightness(0) invert(1); opacity: .58;
  transition: opacity .15s ease;
}
.h26 .menu--main .dropdown-menu .nav-bg > a:hover::before { opacity: 1; }
.h26 .menu--main .dropdown-menu .item-lvl-2 > a::before { display: none !important; }

/* Short desktop viewport: let a tall panel scroll rather than run off screen. */
@media (min-width: 1460px) and (max-height: 620px) {
  .h26 .menu--main > ul > li.megamenu > .dropdown-menu {
    max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
  }
}

@keyframes h26-mega-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .h26 .menu--main .dropdown-menu { animation: none !important; }
  .h26 .menu--main .dropdown-menu a { transition: none !important; }
}

/* ---------- mobile drawer: beat the legacy sheet's own transforms --------- */
@media (max-width: 1459px) {
  .h26 .gheader .menu--main {
    position: fixed !important;
    top: var(--nav-h) !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: auto !important; height: auto !important; max-height: none !important;
    /* the legacy off-canvas rule adds `margin: auto` + a 56px top margin, which
       pushed the drawer down and left a strip of page showing under the bar */
    margin: 0 !important;
    transform: translateX(100%) !important;
    visibility: hidden !important; opacity: 1 !important;
    display: block !important;
    background: var(--nav-panel) !important;
    padding: 18px 22px 40px !important;
    overflow-y: auto !important;
    transition: transform .28s ease, visibility .28s ease !important;
    z-index: 70 !important;
  }
  .h26 .gheader .menu--main.active {
    transform: translateX(0) !important;
    visibility: visible !important;
  }
  .h26 .gheader .menu--main > ul { display: block !important; }
  .h26 .gheader .menu--main .dropdown-menu {
    position: static !important; width: auto !important;
    max-width: none !important; transform: none !important;
    padding: 4px 0 12px !important;
  }
  .h26 .gheader .menu--main .menu-item.active > .dropdown-menu { display: block !important; }
  .h26 .gheader .menu--main .menu-item:not(.active) > .dropdown-menu { display: none !important; }
  .h26 .gheader .menu--main .dropdown-menu .megamenu-info { display: none !important; }
  .h26 .gheader .menu--main .mobile-arrow { display: inline-flex !important; }
  /* header.php's inline <style> hides the tool row outright below 1460px in
     favour of its own .header-mobile-btns. The 2026 drawer uses this row as
     its footer instead, so it has to outrank that on specificity. */
  body.h26 .gheader.gheader--sitewide-custom .menu-btn,
  .h26 .gheader .menu-btn { display: flex !important; }
}

/* Highest-specificity open state: the legacy sheet also declares transform and
   visibility on this element with !important, so the drawer's open rule has to
   outrank it on selector weight, not just importance. */
@media (max-width: 1459px) {
  body.h26 .gheader nav.menu--main.active,
  body.h26 .gheader .global.menu.menu--main.active {
    transform: translateX(0) !important;
    -webkit-transform: translateX(0) !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}