/* =========================================
HELUX HEADER
========================================= */

.helux-header {
  --helux-purple: #222052;
  --helux-blue: #00b9f2;
  --helux-blue-hover: #009dcc;
  --helux-grey: #6b6b78;
  --helux-light-grey: #dcddde;
  --helux-border: #e6e6ea;

  position: fixed;
  top: 0;

  z-index: 1000;

  width: 100%;
}

/* =========================================
HEADER BAR
========================================= */

.helux-header__bar {
position: relative;

z-index: 1100;

width: 100%;

background: #ffffff;
}

.helux-header__inner {
display: flex;

align-items: center;

width: 100%;
max-width: 1440px;

min-width: 0;
min-height: 88px;

margin: 0 auto;
padding: 0 40px;

box-sizing: border-box;

overflow: hidden;
}

/* =========================================
LOGO
========================================= */

.helux-header__logo {
display: flex;

align-items: center;

flex: 0 0 auto;

min-width: 0;

text-decoration: none;
}

.helux-header__logo img {
display: block;

max-width: 180px;

height: auto;
}

.helux-header__logo-placeholder {
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 24px;

color: var(--helux-purple);
}

/* =========================================
DESKTOP NAVIGATION
========================================= */

.helux-desktop-nav {
display: flex;

align-items: center;

flex: 1 1 auto;

min-width: 0;

margin-left: auto;
}

.helux-desktop-nav__list {
display: flex;

align-items: center;
justify-content: flex-end;

width: 100%;

margin: 0;
padding: 0;

list-style: none;

gap: 4px;

flex-wrap: nowrap;

min-width: 0;
}

.helux-desktop-nav__item {
position: static;

flex: 1 1 auto;

min-width: 100px;

margin: 0;
padding: 0;

box-sizing: border-box;
}

.helux-desktop-nav__link {
display: flex;

align-items: center;
justify-content: center;

width: 100%;

min-width: 80px;
min-height: 44px;

padding: 10px;

box-sizing: border-box;

border: 0;

background: transparent;

color: var(--helux-purple);

font-family: "Poppins", sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 1.3;

white-space: normal;

overflow-wrap: normal;

text-align: center;

text-decoration: none;

cursor: pointer;

transition:
color 0.2s ease,
background-color 0.2s ease;
}

.helux-desktop-nav__link {
color: var(--helux-blue) !important;
background: white !important;
border: none;
}

/* =========================================
ACTIVE PARENT WHEN MEGA MENU IS OPEN
========================================= */

.helux-desktop-nav__item.helux-mega-menu.is-open
.helux-desktop-nav__link,
.helux-desktop-nav__link:hover,
.helux-desktop-nav__link:active,
.helux-desktop-nav__link:focus {
  color: var(--helux-blue) !important;
  background-color: white !important;
  border: none;
}

/* =========================================
LAST NAV ITEM / CTA
========================================= */

.helux-desktop-nav__item.is-last-item
.helux-desktop-nav__link {

min-width: 80px;

padding-left: 12px;
padding-right: 12px;

border-radius: 4px;

background: var(--helux-blue) !important;

color: #ffffff !important;
}

.helux-desktop-nav__item.is-last-item
.helux-desktop-nav__link {

background: var(--helux-blue-hover) !important;

color: #ffffff !important;
}

/* =========================================
COMMON TYPOGRAPHY
========================================= */

.helux-menu-title {
font-family: "Montserrat", sans-serif;

font-weight: 700;
}

.helux-menu-description {
font-family: "Poppins", sans-serif;

font-weight: 400;
}

/* =========================================
HIDDEN MENU ITEMS
========================================= */

.helux-menu-item-hidden {
display: none !important;
}

/* =========================================
MEGA MENU
========================================= */

.helux-mega-menu {
position: fixed;

top: var(--helux-header-bottom, 88px);
left: 0;

z-index: 1000;

width: 100%;
max-width: 100vw;

box-sizing: border-box;

overflow-x: hidden;

background: #ffffff;

border-top: 1px solid #eeeeee;

box-shadow:
0 12px 30px rgba(36, 33, 82, 0.12);

opacity: 0;

visibility: hidden;

pointer-events: none;

transform: translateY(-8px);

transition:
opacity 0.2s ease,
visibility 0.2s ease,
transform 0.2s ease;
}

.helux-mega-menu.is-open {
opacity: 1;

visibility: visible;

pointer-events: auto;

transform: translateY(0);
}

/* =========================================
MEGA MENU INNER
========================================= */

.helux-mega-menu__inner {
display: grid;

grid-template-columns:
minmax(220px, 0.75fr)
minmax(0, 2fr);

gap: 50px;

width: 100%;
max-width: 1440px;

min-width: 0;

margin: 0 auto;

padding: 48px 40px 52px;

box-sizing: border-box;
}

/* =========================================
SIDEBAR
========================================= */

.helux-mega-menu__sidebar {
min-width: 0;
}

/* =========================================
MEGA MENU SUBHEADINGS / EYEBROWS
========================================= */

.helux-mega-menu__eyebrow,
.helux-mega-panel__eyebrow {

display: flex;

align-items: flex-start;

gap: 12px;

margin-bottom: 12px;

color: var(--helux-grey);

font-family: "Montserrat", sans-serif;

font-size: 12px;

font-weight: 700;

line-height: 1.3;

text-transform: uppercase;

letter-spacing: 0.04em;
}

/* =========================================
DESCRIPTIONS
========================================= */

.helux-mega-menu__description {
max-width: 340px;

margin-bottom: 28px;

color: var(--helux-grey);

font-family: "Poppins", sans-serif;

font-size: 14px;

font-weight: 400;

line-height: 1.7;
}

.helux-mega-panel__description {
margin-bottom: 26px;

color: var(--helux-grey);

font-family: "Poppins", sans-serif;

font-size: 14px;

font-weight: 400;

line-height: 1.65;
}

/* =========================================
MENU ICON
========================================= */

.helux-menu-icon {
display: inline-block;

flex: 0 0 auto;

width: 24px;
height: 24px;

background-position: center;
background-repeat: no-repeat;
background-size: contain;
}

.helux-menu-icon {
display: none;
}

/* =========================================
CATEGORY / CHILD LIST
========================================= */

.helux-mega-menu__categories {
display: flex;

flex-direction: column;

gap: 6px;

width: 100%;
}

.helux-mega-menu__category {
display: flex;

align-items: center;

width: 100%;

min-width: 0;

padding: 13px 14px;

border: 1px solid transparent;

border-radius: 4px;

background: transparent;

color: var(--helux-purple);

text-align: left;

cursor: pointer;

box-sizing: border-box;

transition:
background-color 0.2s ease,
border-color 0.2s ease,
color 0.2s ease,
box-shadow 0.2s ease;
}

.helux-mega-menu__category-content {
display: flex;

align-items: center;

gap: 12px;

min-width: 0;

width: 100%;
}

.helux-mega-menu__category
.helux-menu-title {

min-width: 0;

overflow-wrap: normal;

font-size: 14px;

line-height: 1.4;
}

/* =========================================
ACTIVE / HOVER CHILD
========================================= */

.helux-mega-menu__category,
.helux-mega-menu__category.is-active {

background: #ffffff !important;

border-color: var(--helux-blue) !important;

color: var(--helux-blue);

box-shadow:
4px 4px 0 0 var(--helux-light-grey);
}

/* =========================================
CONTENT AREA
========================================= */

.helux-mega-menu__content {
width: 100%;
max-width: 100%;

min-width: 0;

box-sizing: border-box;

overflow: hidden;
}

/* =========================================
PANELS
========================================= */

.helux-mega-panel {
display: none;

width: 100%;
max-width: 100%;

min-width: 0;

box-sizing: border-box;

overflow: hidden;
}

.helux-mega-panel.is-active {
display: block;
}

/*

A hidden child panel must stay hidden even

if JavaScript or another class attempts to

make it active.
*/
.helux-mega-panel.helux-menu-item-hidden {
display: none !important;
}

/* =========================================
PANEL ITEMS
========================================= */

.helux-mega-panel__items {
width: 100%;
max-width: 100%;

min-width: 0;

box-sizing: border-box;
}

/* =========================================
GRANDCHILD GRID
========================================= */

.helux-grandchild-grid {
display: grid;

grid-template-columns:
repeat(2, minmax(0, 1fr));

grid-auto-flow: row;

gap: 14px 18px;

width: 100%;
max-width: 100%;

min-width: 0;

box-sizing: border-box;
}

/* =========================================
GRANDCHILD CARDS
========================================= */

.helux-mega-card {
display: flex;

align-items: flex-start;

width: calc(100% - 8px);
max-width: calc(100% - 8px);

min-width: 0;

box-sizing: border-box;

padding: 12px;

margin: 4px;

border: 1px solid var(--helux-border);

border-radius: 5px;

background: #ffffff;

color: var(--helux-purple);

text-decoration: none;

overflow: hidden;

transition:
background-color 0.2s ease,
border-color 0.2s ease,
color 0.2s ease,
box-shadow 0.2s ease;
}

.helux-mega-card,
.helux-mega-card.is-active {

background: #ffffff;

border-color: var(--helux-blue);

color: var(--helux-blue);

box-shadow:
4px 4px 0 0 var(--helux-light-grey);
}

/* =========================================
CARD BODY
========================================= */

.helux-mega-card__body {
display: flex;

flex-direction: column;

flex: 1 1 auto;

min-width: 0;
}

/* =========================================
CARD TITLE ROW
========================================= */

.helux-mega-card__title-row {
display: grid;

grid-template-columns: 32px minmax(0, 1fr);

column-gap: 12px;

align-items: center;

min-width: 0;

width: 100%;
}

/* =========================================
CARD ICON
========================================= */

.helux-mega-card__icon {
display: block;

width: 24px;
height: 24px;

min-width: 24px;

background-position: center;
background-repeat: no-repeat;
background-size: contain;
}

/* =========================================
CARD TITLE
========================================= */

.helux-mega-card__title {
display: block;

min-width: 0;

overflow-wrap: normal;

font-size: 14px;

line-height: 1.35;
}

/* =========================================
CARD DESCRIPTION
========================================= */

.helux-mega-card__description {
display: block;

margin-top: 5px;
margin-left: 44px;

color: var(--helux-grey);

font-family: "Poppins", sans-serif;

font-size: 12px;

font-weight: 400;

line-height: 1.55;
}

.helux-mega-card
.helux-mega-card__description {

color: var(--helux-grey);
}

/* =========================================
CHILD WITH NO GRANDCHILDREN
========================================= */

.helux-mega-card--child-link {
max-width: 520px;
}

/* =========================================
MOBILE TOGGLE
========================================= */

.helux-mobile-toggle {
display: none;

flex: 0 0 44px;

align-items: center;
justify-content: center;

width: 44px;
height: 44px;

min-width: 44px;
max-width: 44px;

margin-left: auto;

padding: 0;

border: 0;
outline: none;

background: transparent;

cursor: pointer;

box-sizing: border-box;

font-size: 0;
line-height: 0;
}

.helux-mobile-toggle__icon {
display: block;

width: 24px;
height: 24px;

flex: 0 0 24px;

overflow: visible;
}

.helux-mobile-toggle__line {
fill: var(--helux-purple);

transform-box: fill-box;

transform-origin: center;

transition:
transform 0.2s ease,
opacity 0.2s ease;
}

/* =========================================
HAMBURGER → X
========================================= */

.helux-mobile-toggle.is-open
.helux-mobile-toggle__line--1 {

transform:
translateY(6px)
rotate(45deg);
}

.helux-mobile-toggle.is-open
.helux-mobile-toggle__line--2 {

opacity: 0;
}

.helux-mobile-toggle.is-open
.helux-mobile-toggle__line--3 {

transform:
translateY(-6px)
rotate(-45deg);
}

/* =========================================
DYNAMIC MOBILE MODE
========================================= */

.helux-header.is-mobile-mode
.helux-desktop-nav {

display: none;
}

.helux-header.is-mobile-mode
.helux-mobile-toggle {

display: flex;

background-color: white !important;

border: none !important;
}

.helux-header.is-mobile-mode
.helux-header__logo {

max-width: 100%;
}

.helux-header.is-mobile-mode
.helux-header__logo img {

max-width: 150px;

height: auto;
}

/* =========================================
MOBILE NAV
========================================= */

.helux-mobile-nav {

position: fixed;

top: var(--helux-header-bottom, 88px);

left: 0;
right: 0;

z-index: 1050;

width: 100%;

height:
calc(
100dvh -
var(--helux-header-bottom, 88px)
);

max-height:
calc(
100dvh -
var(--helux-header-bottom, 88px)
);

box-sizing: border-box;

overflow-x: hidden;
overflow-y: auto;

overscroll-behavior: contain;

background: #ffffff;

opacity: 0;

visibility: hidden;

pointer-events: none;

transform: translateY(-8px);

transition:
opacity 0.2s ease,
visibility 0.2s ease,
transform 0.2s ease;
}

.helux-mobile-nav.is-open {

opacity: 1;

visibility: visible;

pointer-events: auto;

transform: translateY(0);
}

/* =========================================
MOBILE INNER
========================================= */

.helux-mobile-nav__inner {

width: 100%;

max-width: 1440px;

margin: 0 auto;

padding: 25px 24px 40px;

box-sizing: border-box;
}

/* =========================================
MOBILE LISTS
========================================= */

.helux-mobile-nav__list,
.helux-mobile-nav__list ul {

margin: 0;
padding: 0;

list-style: none;
}

.helux-mobile-nav__item {

width: 100%;

border-bottom:
1px solid var(--helux-border);
}

/* =========================================
MOBILE LINKS
========================================= */

.helux-mobile-nav__link {

display: flex;

align-items: center;
justify-content: space-between;

width: 100%;

min-height: 52px;

padding: 12px 24px;

border: 0;

background: transparent;

color: var(--helux-purple);

font-family: "Poppins", sans-serif;

font-size: 16px;

text-decoration: none;

text-align: left;

cursor: pointer;

box-sizing: border-box;
}

.helux-mobile-nav__link-content {

display: flex;

align-items: center;

gap: 12px;

min-width: 0;
}

.helux-mobile-nav__link .helux-menu-title {

overflow-wrap: normal;
}

/* =========================================
MOBILE ARROWS
========================================= */

.helux-mobile-nav__arrow {

flex: 0 0 auto;

margin-left: 15px;

font-size: 22px;

font-weight: 300;

line-height: 1;

transition:
transform 0.2s ease;
}

.helux-mobile-nav__accordion.is-open
.helux-mobile-nav__arrow,

.helux-mobile-nav__subaccordion.is-open
.helux-mobile-nav__arrow {

transform:
rotate(45deg);
}

/* =========================================
MOBILE SUBMENUS
========================================= */

.helux-mobile-submenu {

display: none;

width: 100%;

margin: 0;

padding:
0
0
8px
20px;

box-sizing: border-box;
}

.helux-mobile-submenu.is-open {

display: block;
}

.helux-mobile-submenu li {

width: 100%;

margin: 0;

padding: 6px;

border: 0;

box-sizing: border-box;
}

.helux-mobile-submenu li > a,
.helux-mobile-submenu .helux-mobile-nav__link {

width: 100%;

min-height: 44px;

margin: 0;

padding:
12px
0;

font-size: 14px;

box-sizing: border-box;
text-decoration: none;
color: black;
}

/* =========================================
NESTED GRANDCHILD MENU
========================================= */

.helux-mobile-submenu--nested {

width: 100%;

margin: 0;

padding:
0
0
8px
20px;

box-sizing: border-box;
}

These are grandchildren that belonged to
a hidden child.

They have been physically moved into the
parent's list by JavaScript.
========================================= */

.helux-mobile-nav__flattened-item {

width: 100%;

margin: 0;

padding: 0;

border: 0;
}

.helux-mobile-nav__flattened-item > a {

width: 100%;

min-height: 44px;

margin: 0;

padding:
12px
0;

font-size: 14px;

box-sizing: border-box;
}

/* =========================================
HIDDEN MOBILE ITEMS
========================================= */

.helux-mobile-menu-item-hidden {

display: none !important;
}

/* =========================================
RESPONSIVE MEGA MENU
========================================= */

@media (max-width: 1100px) {

.helux-header__inner {

padding-left: 24px;

padding-right: 24px;

}

.helux-desktop-nav__link {

font-size: 14px;

}

.helux-mega-menu__inner {

grid-template-columns:
  minmax(200px, 0.7fr)
  minmax(0, 1.8fr);

gap: 30px;

padding-left: 24px;

padding-right: 24px;

}

}

/* =========================================
TABLET / SMALL DESKTOP
========================================= */

@media (max-width: 800px) {

.helux-grandchild-grid {

grid-template-columns: 1fr;

}

}

/* =========================================
SMALL MOBILE
========================================= */

@media (max-width: 600px) {

.helux-header__inner {

padding-left: 18px;

padding-right: 18px;

}

.helux-header__logo img {

max-width: 150px;

}

.helux-mobile-nav__inner {

padding-left: 18px;

padding-right: 18px;

}

}

/* =========================================
PREVENT PAGE SCROLLING WHEN MOBILE MENU
IS OPEN
========================================= */

body.helux-mobile-menu-open {

overflow: hidden;
}

/* Placeholder space due to sticky not working; must use fixed */
header.header {
  height: 88px;
}

/* Override Hubspot's styling */
.helux-menu-title > .header span {
  color: var(--helux-blue);
}