/* ==================================================================
   JPM theme - Header mega menus
   ------------------------------------------------------------------
   Two variants, both built on the template's own .dropdown /
   .dropdown-menu so they inherit its surface, its hover-to-open
   behaviour and its light/dark handling for free:

     .megamenu          4 columns - 3 link columns + a promo column
                        holding an offer card with a button below it.
     .megamenu_tabbed   4 columns - column 1 is a vertical tab rail
                        that swaps the content of columns 2-4.

   Every colour here comes from the template's custom properties
   (in light mode --bs-gray-dark is #FFFFFF and --bs-white is #161616),
   so the panels follow the theme automatically and never need a
   parallel set of hard-coded values.

   Below 992px the template turns .dropdown-menu into a static block
   inside the collapsed nav panel; both mega menus follow it there and
   become plain stacked lists, with the tab rail collapsing into an
   accordion.
   ================================================================== */

/* 1 - Shared panel
================================================== */

/* Keep every navigational label on the same type scale. The base theme
   assigns 15px to dropdown links while the page header retunes top-level
   links to 11px, which made children look larger than their parent. */
@media (min-width: 992px) {
  .main_menu_list > li,
  .main_menu_list > li > .nav-link,
  .main_menu_list .dropdown-menu > li > a,
  .main_menu_list .megamenu_tab,
  .main_menu_list .megamenu_list > li > a {
    font-size: 11px;
    line-height: 16px;
  }
}

/* The panel is aligned to the header container, not to the nav link,
   so its edges line up with the logo and the header buttons. The
   container becomes the reference box; the list item is taken out of
   the positioning chain so it cannot capture the absolute panel. */
.site_header .header_bottom .container {
  position: relative;
}

/* Both the list item and the navbar have to step out of the positioning
   chain: Bootstrap gives .navbar position:relative, so without this the
   panel measures itself against the nav column rather than the header
   container. Desktop only - below 992px .main_menu is position:fixed and
   must stay that way. */
@media (min-width: 992px) {
  .main_menu_list > li.has_megamenu {
    position: static;
  }

  .site_header .header_bottom .main_menu.navbar {
    position: static;
  }
}

/* Top-level menu items are uppercase; the panel is body copy and links,
   so the inherited casing is switched off here and re-applied only on
   the pieces that are meant to shout. */
.main_menu_list .dropdown-menu.megamenu {
  text-transform: none;
  letter-spacing: normal;
}

.main_menu_list .dropdown-menu.megamenu {
  left: 0;
  right: 0;
  width: auto;
  min-width: 0;
  padding: 0;
  margin: 0;
  z-index: 100;
  top: 100%;
}

/* The container ends 14px above the header's bottom edge (.header_bottom
   padding), and the nav link ends higher still, so the pointer has to
   cross dead space on its way into the panel. This invisible strip
   bridges that gap. It sits below every nav link, so it never covers
   anything clickable in the header. */
.main_menu_list .dropdown-menu.megamenu:before {
  left: 0;
  right: 0;
  top: -30px;
  height: 30px;
}

/* Sticky trims the header padding to 8px, so the panel and its bridge
   move up with it. */
.site_header.sticky .main_menu_list .dropdown-menu.megamenu {
  top: 100%;
}

.site_header.sticky .main_menu_list .dropdown-menu.megamenu:before {
  top: -24px;
  height: 24px;
}

.megamenu_inner {
  padding: 32px 30px;
}

/* The theme replaces Bootstrap's gutter custom properties with a flat
   .row { margin: -15px } and [class*=col-] { padding: 15px }, so the
   .g-0 utility has nothing to switch off and the row would hang 15px
   outside the panel on every side. Column spacing is handled by
   .megamenu_col instead. */
.megamenu_row {
  margin: 0;
}

.megamenu_row > [class*=col-] {
  padding: 0;
}

/* Column titles are dropdown children, so they stay on the body face
   like the rest of the menu links rather than the display face used by
   the top-level items. */
.megamenu_col_title {
  margin: 0 0 14px;
  position: relative;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bs-primary);
  font-family: var(--bs-font-body);
  padding-bottom: 12px;
}

/* A short accent rule rather than a full-width divider, so the column
   headings read as titles instead of table headers. */
.megamenu_col_title:after {
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  content: "";
  position: absolute;
  background-color: var(--bs-primary);
}

.megamenu_list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.megamenu_list > li {
  margin: 0;
  padding: 0;
  display: block;
}

.megamenu_list > li > a {
  display: block;
  padding: 8px 12px;
  margin-left: -12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-transform: none;
  color: var(--bs-body-color);
  font-family: var(--bs-font-body);
  transition: color 0.25s ease, background-color 0.25s ease;
}

.megamenu_list > li > a:hover,
.megamenu_list > li > a:focus-visible {
  color: var(--bs-primary);
  background-color: var(--bs-body-bg);
}

/* Each link column carries the divider on its left rather than the
   right, so the run of columns never ends on a stray rule. */
.megamenu_col {
  height: 100%;
  padding: 0 26px;
  border-left: 1px solid var(--bs-border-color-translucent);
}

.megamenu_row > [class*=col-]:first-child > .megamenu_col {
  padding-left: 0;
  border-left: none;
}

/* 2 - Variant 1: promo column
================================================== */

.megamenu_promo {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-left: 26px;
  border-left: 1px solid var(--bs-border-color-translucent);
}

/* The card is now artwork with a title sitting on it, so the background
   carries four layers, topmost first:

     1. a scrim, dark at the bottom and clearing by the upper third. The
        artwork is at its brightest exactly where the title sits, so white
        type needs this to stay legible - it is not decoration.
     2. the artwork itself.
     3. a gradient standing in for the artwork. If offer-card-bg.jpg is
        missing that layer simply is not painted and this shows through,
        so the card never renders as a bare box.
     4. a flat base colour under everything. */
.megamenu_offer_card {
  flex: 1 1 auto;
  display: flex;
  overflow: hidden;
  min-height: 210px;
  padding: 24px 22px;
  border-radius: 0;
  align-items: flex-end;
  background-color: #00112b;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-image:
    linear-gradient(to top, rgba(0, 12, 30, 0.82) 0%, rgba(0, 12, 30, 0.4) 30%, rgba(0, 12, 30, 0) 58%),
    url("../images/megamenu/offer-card-bg.jpg"),
    radial-gradient(85% 68% at 42% 94%, #00bdf0 0%, #0086c8 26%, rgba(0, 96, 165, 0.5) 52%, rgba(0, 30, 74, 0) 78%),
    radial-gradient(55% 85% at 70% 45%, rgba(0, 104, 180, 0.5) 0%, rgba(0, 20, 52, 0) 72%),
    linear-gradient(160deg, #00070f 0%, #001334 45%, #000a1c 100%);
}

/* The display face, as used by the hero - this is the one piece of the
   panel that is a headline rather than a menu label. */
.megamenu_offer_title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 25px;
  color: #fff;
  font-family: var(--bs-font-heading);
  text-shadow: 0 1px 14px rgba(0, 12, 30, 0.65);
}

/* The button sits below the card, matching the pill treatment the page
   already applies to its other calls to action rather than the
   template's default angular clip-path button. */
.megamenu_promo_btn {
  gap: 10px;
  width: 100%;
  margin-top: 16px;
  padding: 13px 22px;
  font-size: 13px;
  font-weight: 700;
  line-height: 16px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  clip-path: none;
  -webkit-clip-path: none;
  color: #fff;
  background-color: var(--bs-primary);
  font-family: var(--bs-font-body);
}

.megamenu_promo_btn:before {
  content: none;
}

.megamenu_promo_btn:hover,
.megamenu_promo_btn:focus-visible {
  color: #fff;
  background-color: #00294f;
}

/* 3 - Variant 2: vertical tab rail
================================================== */

.megamenu_tabsets {
  position: relative;
}

.megamenu_tab {
  width: 100%;
  border: none;
  display: flex;
  cursor: pointer;
  text-align: left;
  align-items: center;
  padding: 12px 16px;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--bs-body-color);
  background-color: transparent;
  font-family: var(--bs-font-body);
  transition: color 0.25s ease, background-color 0.25s ease;
}

.megamenu_tab i {
  font-size: 12px;
  line-height: 1;
  flex: 0 0 auto;
  margin-left: 10px;
  transition: transform 0.3s ease;
}

/* A tint of the theme blue rather than a separate grey, so the rail reads
   as one colour family from rest through hover to selected. */
.megamenu_tab:hover,
.megamenu_tab:focus-visible {
  color: var(--bs-primary);
  background-color: rgba(0, 53, 102, 0.07);
}

.megamenu_tabgroup.active > .megamenu_tab {
  color: #fff;
  background-color: var(--bs-primary);
}

/* The selected tab keeps its fill while the pointer is over it - the
   hover tint would otherwise wash it out. */
.megamenu_tabgroup.active > .megamenu_tab:hover,
.megamenu_tabgroup.active > .megamenu_tab:focus-visible {
  color: #fff;
  background-color: var(--bs-primary);
}

.megamenu_panel_media {
  margin: 0;
  overflow: hidden;
  border-radius: 0;
}

.megamenu_panel_media img {
  width: 100%;
  height: 168px;
  display: block;
  object-fit: cover;
}

.megamenu_panel_caption {
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  color: var(--bs-body-color);
  opacity: 0.72;
  font-family: var(--bs-font-body);
}

/* 4 - Desktop layout
================================================== */

@media (min-width: 992px) {
  /* Rail and panels are interleaved in the DOM so the same markup can
     collapse into an accordion on mobile. display:contents lifts each
     group's button and panel out into this grid, so the buttons stack in
     column 1 while the active panel fills column 2.

     The explicit row list is what keeps the menu honest about its height.
     The buttons take min-content rows and the trailing 1fr row absorbs
     whatever the panel needs beyond them, so the block is exactly as tall
     as its own taller column - never a reserved minimum, and never
     stretched by a different menu. Previously the panels were absolutely
     positioned, which left them unable to size their own container and
     forced a hard-coded min-height.

     The repeat() count tracks the number of tabs - currently 7, for the
     Businesses Divisions rail (Auto, New Energy Vehicles, Casting,
     Electronics Energy, LED Lights, Tools & Dies, Studios). Adding or
     removing a tab means updating this number to match. */
  .megamenu_tabsets {
    display: grid;
    grid-template-columns: 25% 1fr;
    grid-template-rows: repeat(8, min-content) 1fr;
  }

  .megamenu_tabgroup {
    display: contents;
  }

  .megamenu_tab {
    width: auto;
    grid-column: 1;
    margin-left: -16px;
    margin-right: 26px;
  }

  .megamenu_panel {
    display: none;
    grid-column: 2;
    grid-row: 1 / -1;
    padding-left: 26px;
  }

  .megamenu_tabgroup.active > .megamenu_panel {
    display: block;
  }

  /* One continuous rule between the rail and the panels, independent of
     how many tabs there are or how tall the active panel is. */
  .megamenu_tabsets:after {
    top: 0;
    bottom: 0;
    width: 1px;
    left: 25%;
    content: "";
    position: absolute;
    background-color: var(--bs-border-color-translucent);
  }

  .megamenu_panel > .megamenu_row > [class*=col-]:first-child > .megamenu_col {
    padding-left: 0;
    border-left: none;
  }
}

/* 5 - Tablet and mobile layout
================================================== */

@media screen and (max-width: 991px) {
  html.mobile-drawer-open,
  html.mobile-drawer-open body {
    overflow: hidden;
    overscroll-behavior: none;
  }

  .main_menu_list > li,
  .main_menu_list > li > .nav-link,
  .main_menu_list .dropdown-menu > li > a,
  .main_menu_list .megamenu_tab,
  .main_menu_list .megamenu_list > li > a {
    font-size: 15px !important;
    line-height: 20px;
  }

  /* The template drops .dropdown-menu into the flow inside the collapsed
     nav panel; the mega menus follow, losing the container alignment and
     the hover bridge along with it. */
  .main_menu_list .dropdown-menu.megamenu {
    top: auto;
    left: auto;
    right: auto;
    border: none;
    box-shadow: none;
    background-color: transparent;
  }

  .main_menu_list .dropdown-menu.megamenu:before {
    content: none;
  }

  /* The nav keeps a 20px gap between top-level items, which is invisible
     on a text link but leaves the stacked panel narrower than everything
     above it. */
  .main_menu_list > li.has_megamenu {
    margin-right: 0;
  }

  /* The mobile drawer is its own full-width navigation surface.  Do not
     inherit the desktop container width, centred labels or floating-card
     dropdown treatment. */
  .site_header .main_menu_list {
    width: 100%;
    max-width: none;
    min-height: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(6, minmax(64px, 1fr));
    justify-content: stretch;
    justify-items: stretch;
    align-content: stretch;
    align-items: stretch;
    text-align: left;
  }

  .site_header .main_menu_list > li {
    width: 100%;
    min-width: 0;
    height: 100%;
    margin: 0 !important;
    padding: 0;
    display: flex;
    flex-direction: column;
  }

  .site_header .main_menu_list > li > .nav-link {
    width: 100%;
    min-height: 64px;
    height: 100%;
    margin: 0;
    padding: 16px 24px !important;
    display: flex;
    align-items: center;
    justify-content: space-between !important;
    gap: 16px;
    text-align: left !important;
    border-bottom: 1px solid var(--bs-border-color-translucent);
  }

  .site_header .main_menu_list > li > .nav-link:after,
  .site_header .main_menu_list > li > .nav-link > i,
  .site_header .main_menu_list > li > .nav-link > svg {
    flex: 0 0 auto;
    margin-left: auto;
  }

  /* Once a branch expands, its content joins the document flow and the
     drawer scrolls. Closed top-level rows retain the same 64px rhythm. */
  .site_header .main_menu_list:has(> li > .dropdown-menu.show) {
    height: auto;
    display: block;
  }

  .site_header .main_menu_list:has(> li > .dropdown-menu.show) > li {
    height: auto;
    display: block;
  }

  .site_header .main_menu_list .dropdown-menu,
  .site_header .main_menu_list .dropdown-menu.megamenu {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #f7f8fa;
  }

  .site_header .main_menu_list .dropdown-menu > li {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .site_header .main_menu_list .dropdown-menu > li > a,
  .site_header .main_menu_list .megamenu_list > li > a {
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 14px 24px !important;
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
    gap: 12px;
    text-align: left !important;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
  }

  .megamenu_inner {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  /* Stacked columns read as one list, so the vertical rules and the
     indent that separated them on desktop come off. */
  .megamenu_col,
  .megamenu_promo {
    width: 100%;
    margin: 0;
    padding: 0;
    border-left: none;
  }

  .megamenu_col_title {
    margin: 0;
    padding: 13px 24px;
    font-size: 13px;
    line-height: 18px;
    text-align: left;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
  }

  .megamenu_col_title:after {
    content: none;
  }

  .megamenu_row > [class*=col-]:first-child > .megamenu_col > .megamenu_col_title {
    margin-top: 4px;
  }

  .megamenu_list > li > a {
    margin-left: 0;
    font-size: 14px !important;
  }

  .megamenu_promo {
    display: none;
  }

  .megamenu_offer_card {
    flex: 0 0 auto;
    min-height: 0;
    margin: 0;
    padding: 16px 24px;
    border-radius: 0;
    box-shadow: none;
  }

  /* Column 1 becomes an accordion: each tab keeps its own panel directly
     beneath it instead of the panels being laid over a separate area. */
  .megamenu_tabsets {
    min-height: 0;
  }

  .megamenu_tabgroup {
    width: 100%;
    display: block;
    border-bottom: 1px solid var(--bs-border-color-translucent);
  }

  .megamenu_tabgroup:last-child {
    border-bottom: none;
  }

  /* The fill runs to the edges of the collapsed nav panel while the label
     stays aligned with the menu items above it. */
  .megamenu_tab {
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 15px 24px;
    font-size: 15px;
    justify-content: space-between;
    gap: 16px;
    text-align: left;
    color: var(--bs-body-color);
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }

  .megamenu_tabgroup.active > .megamenu_tab,
  .megamenu_tabgroup.active > .megamenu_tab:hover,
  .megamenu_tabgroup.active > .megamenu_tab:focus-visible {
    color: var(--bs-primary);
    background: #edf4fb;
    box-shadow: none;
  }

  .megamenu_tab i {
    flex: 0 0 auto;
    margin-left: auto;
    transform: rotate(90deg);
  }

  .megamenu_tabgroup.active > .megamenu_tab i {
    transform: rotate(-90deg);
  }

  .megamenu_panel {
    display: none;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
    background: #fff;
    border: 0;
    box-shadow: none;
  }

  .megamenu_tabgroup.active > .megamenu_panel {
    display: block;
  }

  .megamenu_panel .megamenu_col_title {
    margin-top: 0;
  }

  .megamenu_panel .row,
  .megamenu_panel .megamenu_row {
    width: 100%;
    margin: 0;
  }

  .megamenu_panel [class*=col-] {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .megamenu_panel_media img {
    height: 190px;
  }

  .megamenu_panel_media {
    margin-top: 14px;
  }
}

/* 6 - Unified desktop Explore JPM menu
================================================== */

.desktop_explore_item,
.desktop_call_item,
.desktop_explore_menu {
  display: none;
}

@media screen and (min-width: 992px) {
  html.desktop-explore-open,
  html.desktop-explore-open body {
    overflow: hidden;
  }

  /* Desktop uses the unified overlay. The original navigation remains in
     the DOM so the proven Bootstrap drawer can continue unchanged below
     this breakpoint. */
  .site_header .main_menu {
    display: none !important;
  }

  .desktop_explore_item,
  .desktop_call_item {
    display: flex !important;
  }

  .site_header .btn_call_icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border: 1px solid #003566 !important;
    border-radius: 50% !important;
    color: #003566 !important;
    background: #fff !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    transition: color 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease, transform 0.24s ease;
  }

  .site_header .btn_call_icon::before {
    content: none !important;
  }

  .site_header .btn_call_icon .btn_text {
    display: none !important;
  }

  .site_header .btn_call_icon i {
    margin: 0;
    color: inherit !important;
    font-size: 17px;
    line-height: 1;
  }

  .site_header .btn_call_icon:hover,
  .site_header .btn_call_icon:focus-visible {
    color: #00294f !important;
    border-color: #00294f !important;
    background: #fff !important;
    box-shadow: 0 8px 22px rgba(0, 53, 102, 0.16);
    transform: translateY(-1px);
  }

  .site_header .btn_call_icon:focus-visible {
    outline: 3px solid rgba(0, 83, 155, 0.28);
    outline-offset: 3px;
  }

  .desktop_explore_btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 17px;
    border: 1px solid #003566;
    border-radius: 999px;
    color: #003566;
    background: #fff;
    font-family: var(--bs-font-body);
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    white-space: nowrap;
    transition: color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
  }

  .desktop_explore_btn svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
  }

  .desktop_explore_btn i {
    font-size: 12px;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  }

  .desktop_explore_btn:hover,
  .desktop_explore_btn:focus-visible,
  .desktop_explore_btn[aria-expanded="true"] {
    color: #fff;
    background: #003566;
    box-shadow: 0 8px 24px rgba(0, 53, 102, 0.18);
  }

  .desktop_explore_btn:focus-visible {
    outline: 3px solid rgba(0, 83, 155, 0.28);
    outline-offset: 3px;
  }

  .desktop_explore_btn[aria-expanded="true"] i {
    transform: rotate(180deg);
  }

  /* Header utility styles loaded after this file set button children back to
     the default ink colour. Keep every part of the active control legible. */
  .site_header .desktop_explore_btn[aria-expanded="true"],
  .site_header .desktop_explore_btn:hover,
  .site_header .desktop_explore_btn:focus-visible,
  .site_header .desktop_explore_btn[aria-expanded="true"] span,
  .site_header .desktop_explore_btn:hover span,
  .site_header .desktop_explore_btn:focus-visible span,
  .site_header .desktop_explore_btn[aria-expanded="true"] i,
  .site_header .desktop_explore_btn:hover i,
  .site_header .desktop_explore_btn:focus-visible i {
    color: #fff !important;
  }

  .site_header .desktop_explore_btn[aria-expanded="true"] svg,
  .site_header .desktop_explore_btn:hover svg,
  .site_header .desktop_explore_btn:focus-visible svg {
    color: #fff !important;
    stroke: #fff !important;
  }

  .desktop_explore_menu {
    position: fixed;
    top: var(--jpm-header-h, 88px);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 98;
    display: block;
    width: 100%;
    height: calc(100vh - var(--jpm-header-h, 88px));
    height: calc(100dvh - var(--jpm-header-h, 88px));
    color: #161616;
    background: #f7f8fa;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.38s ease, visibility 0s linear 0.38s;
  }

  html.desktop-explore-open .desktop_explore_menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }

  .desktop_explore_surface {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    padding: clamp(28px, 4vh, 52px) clamp(36px, 5vw, 76px) clamp(28px, 4vh, 52px);
    overflow: hidden;
    background:
      linear-gradient(rgba(0, 53, 102, 0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 53, 102, 0.035) 1px, transparent 1px),
      #f7f8fa;
    background-size: 72px 72px;
    transform: translateY(-18px);
    transition: transform 0.52s cubic-bezier(0.22, 1, 0.36, 1);
  }

  html.desktop-explore-open .desktop_explore_surface {
    transform: translateY(0);
  }

  .desktop_explore_surface:focus {
    outline: none;
  }

  .desktop_explore_layout {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 80px);
    padding-top: 0;
  }

  .desktop_explore_tabs {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: clamp(24px, 3vw, 42px);
    overflow-y: auto;
    border-right: 1px solid rgba(0, 53, 102, 0.14);
  }

  /* Slim, scoped scrollbars replace the browser's heavy default tracks. */
  .desktop_explore_tabs,
  .desktop_explore_panel {
    scrollbar-width: thin;
    scrollbar-color: #006bb6 rgba(0, 53, 102, 0.08);
  }

  .desktop_explore_tabs::-webkit-scrollbar,
  .desktop_explore_panel::-webkit-scrollbar {
    width: 7px;
  }

  .desktop_explore_tabs::-webkit-scrollbar-track,
  .desktop_explore_panel::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(0, 53, 102, 0.07);
  }

  .desktop_explore_tabs::-webkit-scrollbar-thumb,
  .desktop_explore_panel::-webkit-scrollbar-thumb {
    min-height: 54px;
    border: 1px solid #e8f0f7;
    border-radius: 999px;
    background: linear-gradient(180deg, #0075bd 0%, #003566 100%);
  }

  .desktop_explore_tabs::-webkit-scrollbar-thumb:hover,
  .desktop_explore_panel::-webkit-scrollbar-thumb:hover {
    background: #002b54;
  }

  .desktop_explore_tab {
    width: 100%;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 16px;
    border: 0;
    color: #25282d;
    background: transparent;
    font-family: var(--bs-font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-align: left;
    transition: color 0.24s ease, background-color 0.24s ease, transform 0.24s ease;
  }

  .desktop_explore_tab i {
    color: #006bb6;
    transition: color 0.24s ease, transform 0.24s ease;
  }

  .desktop_explore_tab:hover,
  .desktop_explore_tab:focus-visible {
    color: #003566;
    background: rgba(0, 53, 102, 0.07);
    transform: translateX(4px);
  }

  .desktop_explore_tab:focus-visible {
    outline: 2px solid rgba(0, 83, 155, 0.38);
    outline-offset: -2px;
  }

  .desktop_explore_tab.is-active {
    color: #fff;
    background: #003566;
    transform: none;
  }

  .desktop_explore_tab.is-active i {
    color: #fff;
    transform: translateX(3px);
  }

  .desktop_explore_panels {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }

  .desktop_explore_panel {
    position: absolute;
    inset: 0;
    padding: 0 clamp(8px, 1vw, 16px) 26px 0;
    overflow-x: hidden;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(24px);
    transition: opacity 0.25s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.4s;
  }

  .desktop_explore_panel.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
    transition-delay: 0s;
  }

  .desktop_explore_links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
  }

  .desktop_explore_links > a {
    position: relative;
    min-height: 88px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: center;
    gap: 3px 14px;
    padding: 17px 18px;
    border: 1px solid rgba(0, 53, 102, 0.16);
    color: #17191d;
    background: rgba(255, 255, 255, 0.78);
    font-family: var(--bs-font-body);
    text-decoration: none;
    transition: color 0.24s ease, border-color 0.24s ease, background-color 0.24s ease, transform 0.24s ease;
  }

  .desktop_explore_links > a span {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
  }

  .desktop_explore_links > a small {
    grid-column: 1;
    color: #73777d;
    font-size: 11px;
    line-height: 17px;
  }

  .desktop_explore_links > a i {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    color: #006bb6;
    transition: color 0.24s ease, transform 0.24s ease;
  }

  .desktop_explore_links > a:hover,
  .desktop_explore_links > a:focus-visible {
    color: #fff;
    border-color: #003566;
    background: #003566;
    transform: translateY(-2px);
  }

  .desktop_explore_links > a:hover small,
  .desktop_explore_links > a:focus-visible small,
  .desktop_explore_links > a:hover i,
  .desktop_explore_links > a:focus-visible i {
    color: #fff;
  }

  .desktop_explore_links > a:hover i,
  .desktop_explore_links > a:focus-visible i {
    transform: translateX(4px);
  }

  .desktop_explore_links > a:focus-visible,
  .desktop_explore_link_groups a:focus-visible {
    outline: 3px solid rgba(0, 105, 183, 0.34);
    outline-offset: 2px;
  }

  .desktop_explore_link_groups {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 42px);
  }

  .desktop_explore_link_groups > div {
    padding: 0;
    border: 0;
    background: transparent;
  }

  .desktop_explore_link_groups h4 {
    margin: 0 0 15px;
    color: #003566;
    font-family: var(--bs-font-body);
    font-size: 13px;
    font-weight: 700;
    line-height: 18px;
    text-transform: uppercase;
  }

  .desktop_explore_link_groups ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .desktop_explore_link_groups li + li {
    border-top: 0;
  }

  .desktop_explore_link_groups a {
    display: block;
    padding: 9px 0;
    color: #3e4248;
    font-family: var(--bs-font-body);
    font-size: 11px;
    font-weight: 500;
    line-height: 17px;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
  }

  .desktop_explore_link_groups a:hover,
  .desktop_explore_link_groups a:focus-visible {
    color: #006bb6;
    transform: translateX(4px);
  }
}

@media screen and (min-width: 992px) and (max-height: 760px) {
  .desktop_explore_surface {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .desktop_explore_layout {
    padding-top: 0;
  }

  .desktop_explore_tab {
    min-height: 46px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .desktop_explore_links > a {
    min-height: 72px;
    padding-top: 13px;
    padding-bottom: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .desktop_explore_menu,
  .desktop_explore_surface,
  .desktop_explore_panel,
  .desktop_explore_tab,
  .desktop_explore_links > a,
  .desktop_explore_btn,
  .desktop_explore_btn i {
    transition: none !important;
  }
}

/* 7 - Mobile nav drawer
================================================== */

@media screen and (max-width: 991px) {
  .desktop_explore_item,
  .desktop_call_item,
  .desktop_explore_menu {
    display: none !important;
  }

  /* The theme pins the drawer with a hard-coded top (82px here) that was
     written for a taller header than this page uses, which left a strip of
     hero showing between the two. --jpm-header-h is the measured header
     height, published by megamenu.js and updated when the header shrinks
     on sticky; the literal is only a fallback for a no-JS load.

     Anchoring the bottom as well is what makes the drawer full height -
     without it the panel stopped at its content height and the page
     showed through underneath. */
  .site_header .main_menu {
    left: 0;
    right: 0;
    width: 100vw;
    max-width: none;
    margin: 0;
    padding: 0;
    top: var(--jpm-header-h, 82px) !important;
    bottom: 0;
    height: calc(100vh - var(--jpm-header-h, 82px));
    height: calc(100dvh - var(--jpm-header-h, 82px));
    z-index: 98;
    align-items: stretch;
    /* Bootstrap collapses .main_menu_inner, not this fixed full-viewport
       wrapper. Without disabling hit-testing here, the transparent wrapper
       remains over the page and blocks every mobile control beneath it. */
    pointer-events: none;
  }

  .site_header.sticky .main_menu {
    top: var(--jpm-header-h, 64px) !important;
    height: calc(100vh - var(--jpm-header-h, 64px));
    height: calc(100dvh - var(--jpm-header-h, 64px));
  }

  .site_header .header_bottom,
  .site_header .header_bottom .container,
  .site_header .header_btns_group {
    position: relative;
  }

  .site_header .header_bottom {
    z-index: 100;
  }

  .site_header .header_btns_group {
    z-index: 101;
  }

  .site_header .main_menu_inner {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    height: 100%;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* The real drawer opts back into input only while Bootstrap renders it.
       When collapsed it is display:none, so no invisible hit area remains. */
    pointer-events: auto;
  }

  .site_header .mobile_menu_btn {
    position: relative;
    z-index: 102;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
  }

  /* Touch devices leave :hover stuck on whatever was tapped last, so the
     theme's hover-to-open rule kept re-opening the panel the moment
     Bootstrap removed .show - the menu could not be closed by tapping its
     own toggle. Below the desktop breakpoint the panels answer to .show
     alone. */
  .main_menu_list .dropdown:hover > .dropdown-menu:not(.show) {
    display: none;
  }
}

/* Same trap on a touch screen wide enough to use the desktop layout. */
@media (hover: none) {
  .main_menu_list .dropdown:hover > .dropdown-menu:not(.show) {
    display: none;
  }
}