/**
 * HUI Mega Menu
 *
 * Two layouts share this file:
 *   .hmm-nav:not(.et_mobile_menu)  desktop - capsules + floating panels
 *   .et_mobile_menu.hmm-nav        mobile  - stacked accordion
 *
 * Divi sets many of these properties from ID selectors (#top-menu li a), so
 * the overrides below lean on !important deliberately rather than by accident.
 */

:root {
	--hmm-text: #005487;
	--hmm-text-hover: #ffffff;
	--hmm-pill-bg: #188cb1;
	--hmm-active-bg: #188cb1;
	--hmm-active-text: #ffffff;
	--hmm-radius: 999px;
	--hmm-pad-y: 13px;
	--hmm-pad-x: 30px;
	--hmm-gap: 6px;
	--hmm-font-size: 17px;
	--hmm-font-weight: 600;
	--hmm-letter-spacing: 0px;
	--hmm-speed: 220ms;

	--hmm-panel-bg: #ffffff;
	--hmm-panel-radius: 18px;
	--hmm-panel-pad: 32px;
	--hmm-panel-offset: 8px;
	--hmm-panel-shadow: 0 24px 60px rgba(0, 45, 73, 0.16);
	--hmm-panel-max-width: 1200px;
	--hmm-col-gap: 36px;
	--hmm-heading-color: #8a94a6;
	--hmm-heading-size: 12px;
	--hmm-heading-rule: #e5e9f0;
	--hmm-link-color: #005487;
	--hmm-link-hover: #188cb1;
	--hmm-link-hover-bg: #f1f8fb;
	--hmm-link-size: 15px;
	--hmm-desc-color: #6b8494;
	--hmm-badge-bg: #e5f3f8;
	--hmm-badge-color: #188cb1;
	--hmm-bar-border: #e8ecf2;

	--hmm-icon-size: 40px;
	--hmm-icon-radius: 10px;
	--hmm-icon-bg: #f1f5f9;
	--hmm-icon-hover-bg: #ffffff;

	--hmm-card-bg: #f0fdf4;
	--hmm-card-border: #d7f0df;
	--hmm-card-title: #15803d;
	--hmm-card-text: #44574c;
	--hmm-card-link: #16a34a;

	--hmm-m-font-size: 16px;
	--hmm-m-pad-y: 12px;
	--hmm-m-pad-x: 18px;
	--hmm-m-indent: 18px;
	--hmm-m-cols: 1;
	--hmm-m-current: #188cb1;
	--hmm-m-bars: #005487;
	--hmm-m-drawer-width: 100%;
	--hmm-m-drawer-bg: #ffffff;
	--hmm-m-drawer-speed: 320ms;

	/* Set per panel by JS: the dead space between pill and panel. */
	--hmm-bridge: 0px;
}

/* ==========================================================================
   1. Desktop bar
   ========================================================================== */

.hmm-nav:not(.et_mobile_menu) {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--hmm-gap);
	list-style: none !important;
	margin: 0;
	padding: 0 !important;
}

/* The capsule bar needs `!important` to beat Divi's `#top-menu li a` rules, but
   Divi hides its desktop list below the breakpoint with a plain `display: none`
   - so an unscoped `display: flex !important` drags the desktop menu on top of
   the mobile logo. Both halves therefore live in media queries.
   The hide is scoped to Divi's own containers so a non-Divi header that only
   uses .hmm-nav keeps its menu on small screens.
   HMM_Settings::css_vars() reprints these queries with the configured
   breakpoint when it is not 980; inline styles print after this file, and the
   selectors are specificity-matched so the later copy wins. */
@media (min-width: 981px) {
	.hmm-nav:not(.et_mobile_menu) {
		display: flex !important;
	}
}

@media (max-width: 980px) {
	#top-menu.hmm-nav,
	.et_pb_menu__menu .hmm-nav:not(.et_mobile_menu) {
		display: none !important;
	}
}

/* Divi centres the classic header menu with a pair of matched paddings:
   `#et-top-navigation { padding-top: N }` above, and `#et-top-navigation nav >
   ul > li > a { padding-bottom: N }` below. The capsule rewrites that anchor
   padding, so only the top half survives and the bar ends up jammed against the
   bottom edge of the header. Lifting the list by the capsule's own padding and
   handing the same amount back as padding-bottom re-centres it without changing
   the height of the header. */
@media (min-width: 981px) {
	#et-top-navigation .hmm-nav:not(.et_mobile_menu) {
		margin-top: calc(var(--hmm-bar-shift, var(--hmm-pad-y)) * -1);
		padding-bottom: var(--hmm-bar-shift, var(--hmm-pad-y)) !important;
	}
}

.hmm-nav:not(.et_mobile_menu) > li.hmm-item {
	position: relative;
	display: block !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: normal;
}

/* Divi's caret glyph - we render our own SVG. */
.hmm-nav .menu-item-has-children > a:first-child::after,
.hmm-nav .hmm-has-panel > a:first-child::after,
.hmm-nav li.mega-menu > a::after {
	display: none !important;
	content: none !important;
}

/* --------------------------------------------------------------- capsule */

.hmm-nav:not(.et_mobile_menu) > li.hmm-item > a.hmm-link {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	padding: var(--hmm-pad-y) var(--hmm-pad-x) !important;
	border-radius: var(--hmm-radius);
	color: var(--hmm-text) !important;
	font-size: var(--hmm-font-size);
	font-weight: var(--hmm-font-weight);
	letter-spacing: var(--hmm-letter-spacing);
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	opacity: 1 !important;
	background-color: transparent;
	transition:
		background-color var(--hmm-speed) ease,
		color var(--hmm-speed) ease;
}

.hmm-nav:not(.et_mobile_menu) > li.hmm-item > a.hmm-link:hover,
.hmm-nav:not(.et_mobile_menu) > li.hmm-item > a.hmm-link:focus-visible,
.hmm-nav:not(.et_mobile_menu) > li.hmm-item.hmm-open > a.hmm-link {
	background-color: var(--hmm-pill-bg);
	color: var(--hmm-text-hover) !important;
	opacity: 1 !important;
}

.hmm-nav:not(.et_mobile_menu) > li.hmm-item.current-menu-item > a.hmm-link,
.hmm-nav:not(.et_mobile_menu) > li.hmm-item.current_page_item > a.hmm-link,
.hmm-nav:not(.et_mobile_menu) > li.hmm-item.current-menu-ancestor > a.hmm-link,
.hmm-nav:not(.et_mobile_menu) > li.hmm-item.current-menu-parent > a.hmm-link,
.hmm-nav:not(.et_mobile_menu) > li.hmm-item.current_page_ancestor > a.hmm-link,
.hmm-nav:not(.et_mobile_menu) > li.hmm-item--cta > a.hmm-link {
	background-color: var(--hmm-active-bg);
	color: var(--hmm-active-text) !important;
}

/* Opt-out: plain text link, no capsule. */
.hmm-nav:not(.et_mobile_menu) > li.hmm-item--plain > a.hmm-link,
.hmm-nav:not(.et_mobile_menu) > li.hmm-item--plain.current-menu-item > a.hmm-link {
	background-color: transparent !important;
	color: var(--hmm-text) !important;
	padding-left: 12px !important;
	padding-right: 12px !important;
}

.hmm-nav:not(.et_mobile_menu) > li.hmm-item--plain > a.hmm-link:hover {
	color: var(--hmm-pill-bg) !important;
}

.hmm-nav:not(.et_mobile_menu) > li.hmm-item--cta > a.hmm-link:hover {
	filter: brightness(1.08);
}

/* ------------------------------------------------------------------ caret */

/* A chevron rather than a filled triangle, so the open state can flip it into
   a real "up" arrow. The rotation is the only thing that moves, which keeps it
   readable at 12px. */
.hmm-caret {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 12px;
	height: 8px;
	flex: 0 0 auto;
	transform-origin: 50% 50%;
	transition: transform var(--hmm-speed) cubic-bezier(0.4, 0, 0.2, 1);
}

.hmm-caret svg {
	width: 12px;
	height: 8px;
	display: block;
	overflow: visible;
}

.hmm-item.hmm-open > .hmm-link .hmm-caret,
.hmm-item.hmm-open > .hmm-link[aria-expanded="true"] .hmm-caret {
	transform: rotate(180deg);
}

/* Nudge the chevron down a hair so it reads as centred against the cap height
   of the label next to it. */
.hmm-nav:not(.et_mobile_menu) > li.hmm-item > a.hmm-link .hmm-caret {
	margin-top: 1px;
}

/* ------------------------------------------------------------------ badge */

.hmm-badge {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--hmm-badge-bg);
	color: var(--hmm-badge-color);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.6;
	vertical-align: middle;
	white-space: nowrap;
}

/* The desktop toggle button only exists for keyboard/touch. */
.hmm-nav:not(.et_mobile_menu) .hmm-toggle {
	display: none;
}

/* ==========================================================================
   2. Standard dropdown (non-mega children)
   ========================================================================== */

.hmm-nav:not(.et_mobile_menu) > li.hmm-has-dropdown > ul.sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 9999;
	min-width: 240px;
	margin: 0;
	padding: 10px !important;
	list-style: none;
	background: var(--hmm-panel-bg);
	border: 0 !important;
	border-radius: 14px;
	box-shadow: var(--hmm-panel-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	pointer-events: none;
	transition:
		opacity var(--hmm-speed) ease,
		transform var(--hmm-speed) ease,
		visibility var(--hmm-speed);
}

.hmm-nav:not(.et_mobile_menu) > li.hmm-has-dropdown.hmm-open > ul.sub-menu {
	opacity: 1 !important;
	visibility: visible !important;
	transform: none;
	pointer-events: auto;
}

.hmm-nav:not(.et_mobile_menu) ul.sub-menu li {
	display: block !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

.hmm-nav:not(.et_mobile_menu) ul.sub-menu li > a {
	display: block !important;
	width: auto !important;
	padding: 9px 14px !important;
	border-radius: 10px;
	color: var(--hmm-link-color) !important;
	font-size: var(--hmm-link-size);
	line-height: 1.4;
	opacity: 1 !important;
	transition:
		background-color var(--hmm-speed) ease,
		color var(--hmm-speed) ease;
}

.hmm-nav:not(.et_mobile_menu) ul.sub-menu li > a:hover {
	background: var(--hmm-link-hover-bg);
	color: var(--hmm-link-hover) !important;
}

/* ==========================================================================
   3. Mega panel
   ========================================================================== */

.hmm-panel {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 9999;
	box-sizing: border-box;
	max-width: var(--hmm-panel-max-width);
	padding: var(--hmm-panel-pad);
	background: var(--hmm-panel-bg);
	border-radius: var(--hmm-panel-radius);
	box-shadow: var(--hmm-panel-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	pointer-events: none;
	text-align: left;
	transition:
		opacity var(--hmm-speed) ease,
		transform var(--hmm-speed) ease,
		visibility var(--hmm-speed);
}

/* Invisible bridge so the pointer can cross the gap without closing. */
.hmm-panel::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: var(--hmm-bridge);
}

.hmm-item.hmm-open > .hmm-panel {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
}

.hmm-panel__inner {
	position: relative;
}

/* ------------------------------------------------- full-width bar variant */

/* The bar spans the viewport and hangs flush off the bottom of the header, so
   the rounding and the drop shadow go; what separates it from the page is a
   hairline and a very soft lift. The script writes --hmm-bar-x / --hmm-bar-w
   from the measured header container, which is what lines the first column up
   with the logo. */
.hmm-panel--style-bar {
	max-width: none !important;
	padding: var(--hmm-panel-pad) 0;
	border-radius: 0;
	border-bottom: 1px solid var(--hmm-bar-border);
	box-shadow: 0 16px 30px rgba(16, 35, 60, 0.06);
}

.hmm-panel--style-bar > .hmm-panel__inner {
	box-sizing: border-box;
	width: var(--hmm-bar-w, 100%);
	margin-left: var(--hmm-bar-x, 0px);
}

/* "Auto" sizing is a floating-card idea; inside a bar the grid gets the full
   container instead. */
.hmm-panel--style-bar .hmm-cols {
	grid-template-columns: repeat(var(--hmm-cols, 3), minmax(0, 1fr));
}

.hmm-panel--style-bar.hmm-panel--layout {
	padding: 0;
}

/* Undo Divi's `.nav li ul` dropdown treatment for lists inside the panel.
   visibility/opacity are handled separately below: forcing them here would
   un-hide the panel's contents while it is closed, since a descendant can
   override an inherited `visibility: hidden`. */
.hmm-panel ul {
	position: static !important;
	display: block;
	width: auto !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	transform: none !important;
	text-align: left;
}

.hmm-item.hmm-open > .hmm-panel ul {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
}

.hmm-panel li {
	display: block !important;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: normal;
}

/* Divi sizes dropdown anchors (#top-menu li li a { width: 200px }). */
.hmm-panel a {
	width: auto !important;
	border-bottom: 0 !important;
}

/* ---------------------------------------------------------------- columns */

.hmm-cols {
	display: grid !important;
	grid-template-columns: repeat(var(--hmm-cols, 3), minmax(0, 1fr));
	gap: 28px var(--hmm-col-gap);
	align-items: start;
}

/* "Auto" panels shrink to fit, so the grid needs a real minimum - `minmax(0,
   1fr)` would collapse the tracks to nothing inside a shrink-to-fit box. */
.hmm-panel--auto {
	width: max-content;
	max-width: min(var(--hmm-panel-max-width), calc(100vw - 32px));
}

.hmm-panel--auto .hmm-cols {
	grid-template-columns: repeat(var(--hmm-cols, 3), minmax(200px, 1fr));
}

/* The heading sits flush with the column edge and the rule runs the whole
   width of it; the links below are inset by their own row padding, which is
   what gives the panel its hanging-indent look. */
.hmm-panel .hmm-col__heading {
	display: block !important;
	margin: 0 0 14px !important;
	padding: 0 0 12px !important;
	border-bottom: 1px solid var(--hmm-heading-rule);
	color: var(--hmm-heading-color) !important;
	font-size: var(--hmm-heading-size);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase !important;
	line-height: 1.4;
	opacity: 1 !important;
}

.hmm-panel a.hmm-col__heading--link:hover {
	color: var(--hmm-link-hover) !important;
}

.hmm-col__desc {
	display: block;
	margin: -8px 0 12px;
	padding: 0;
	color: var(--hmm-desc-color);
	font-size: 13px;
	line-height: 1.5;
}

/* ------------------------------------------------------------------ leaves */

.hmm-panel .hmm-leaf__link {
	display: flex !important;
	align-items: center;
	gap: 12px;
	width: auto !important;
	padding: 10px 14px !important;
	border-radius: 12px;
	color: var(--hmm-link-color) !important;
	font-size: var(--hmm-link-size);
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	opacity: 1 !important;
	transition:
		background-color var(--hmm-speed) ease,
		color var(--hmm-speed) ease;
}

.hmm-panel .hmm-leaf__link:hover,
.hmm-panel .hmm-leaf__link:focus-visible {
	background: var(--hmm-link-hover-bg);
	color: var(--hmm-link-hover) !important;
}

.hmm-panel .hmm-leaf.current-menu-item > .hmm-leaf__link {
	background: var(--hmm-link-hover-bg);
	color: var(--hmm-link-hover) !important;
}

/* Icons sit in a rounded tile that inverts on hover, so the row reads as one
   object rather than a loose glyph beside some text. */
.hmm-leaf__tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--hmm-icon-size);
	height: var(--hmm-icon-size);
	flex: 0 0 var(--hmm-icon-size);
	border-radius: var(--hmm-icon-radius);
	background: var(--hmm-icon-bg);
	transition: background-color var(--hmm-speed) ease;
}

.hmm-leaf__icon {
	width: 55%;
	height: 55%;
	max-width: none;
	object-fit: contain;
	display: block;
}

.hmm-panel .hmm-leaf__link:hover .hmm-leaf__tile,
.hmm-panel .hmm-leaf__link:focus-visible .hmm-leaf__tile,
.hmm-panel .hmm-leaf.current-menu-item > .hmm-leaf__link .hmm-leaf__tile {
	background: var(--hmm-icon-hover-bg);
}

.hmm-leaf__body {
	display: block;
	min-width: 0;
}

.hmm-leaf__title {
	display: block;
	font-weight: 600;
}

.hmm-leaf__desc {
	display: block;
	margin-top: 2px;
	color: var(--hmm-desc-color);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
}

/* --------------------------------------------------------- feature card */

/* A depth-1 column ticked as "Feature card": a tinted promo block that fills
   its grid cell, with the call to action pinned to the bottom so a row of
   cards lines up however long the copy is. */
.hmm-col--card {
	align-self: stretch;
}

.hmm-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	box-sizing: border-box;
	height: 100%;
	padding: 22px;
	background: var(--hmm-card-bg);
	border: 1px solid var(--hmm-card-border);
	border-radius: 14px;
}

.hmm-panel .hmm-card__title {
	display: block !important;
	padding: 0 !important;
	color: var(--hmm-card-title) !important;
	font-size: calc(var(--hmm-link-size) + 1px);
	font-weight: 700;
	line-height: 1.35;
	text-decoration: none;
	opacity: 1 !important;
}

.hmm-panel a.hmm-card__title:hover {
	text-decoration: underline;
}

.hmm-card__desc {
	display: block;
	color: var(--hmm-card-text);
	font-size: 14px;
	line-height: 1.6;
}

.hmm-panel .hmm-card__link {
	display: inline-flex !important;
	align-items: center;
	gap: 7px;
	margin-top: auto;
	padding: 0 !important;
	color: var(--hmm-card-link) !important;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	opacity: 1 !important;
}

.hmm-card__arrow {
	display: inline-flex;
	width: 14px;
	height: 10px;
	transition: transform var(--hmm-speed) cubic-bezier(0.4, 0, 0.2, 1);
}

.hmm-card__arrow svg {
	width: 14px;
	height: 10px;
	display: block;
}

.hmm-panel .hmm-card__link:hover .hmm-card__arrow,
.hmm-panel .hmm-card__link:focus-visible .hmm-card__arrow {
	transform: translateX(4px);
}

/* Links nested under a card sit inside it, so they lose the row inset. */
.hmm-card .hmm-col__list {
	width: 100%;
}

.hmm-panel .hmm-card .hmm-leaf__link {
	padding: 7px 0 !important;
	background: none !important;
}

.hmm-panel .hmm-card .hmm-leaf__link:hover {
	color: var(--hmm-card-link) !important;
}

/* ------------------------------------------------------------------- note */

.hmm-panel__note {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid rgba(0, 84, 135, 0.1);
	color: var(--hmm-desc-color);
	font-size: 13px;
	line-height: 1.6;
}

.hmm-panel__note a {
	display: inline !important;
	padding: 0 !important;
	color: var(--hmm-link-hover) !important;
	text-decoration: underline;
	opacity: 1 !important;
}

/* --------------------------------------------------- Divi Library layouts */

.hmm-panel--layout {
	padding: 0;
	overflow: hidden;
}

.hmm-panel--layout .hmm-panel__note {
	margin: 0;
	padding: 18px var(--hmm-panel-pad);
	border-top: 1px solid rgba(0, 84, 135, 0.1);
}

.hmm-layout .et_pb_section {
	padding: 0;
	background-color: transparent;
}

.hmm-layout .et_pb_row {
	width: 100%;
	max-width: none;
	padding: var(--hmm-panel-pad);
	margin: 0 auto;
}

/* ==========================================================================
   4. Mobile - off-canvas drawer
   ========================================================================== */

/* Divi opens its mobile list with jQuery slideToggle(), which writes inline
   display/height/margin/padding/overflow while it animates and leaves
   `display: none` behind when it finishes. The drawer overrides every one of
   those properties so the slide is ours; Divi's `.opened` class on .mobile_nav
   stays the single source of truth for open state.

   The .hmm-drawer class is added by the script once it has found the
   .mobile_nav wrapper it needs. Without it - no JS, or markup we do not
   recognise - none of this applies and Divi's own slide-down list is left
   alone, rather than a fixed panel that nothing can ever open. */
.et_mobile_menu.hmm-drawer {
	position: fixed !important;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 999999;
	display: block !important;
	box-sizing: border-box;
	width: var(--hmm-m-drawer-width) !important;
	max-width: 100vw;
	height: 100% !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 76px 16px 32px !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	background: var(--hmm-m-drawer-bg) !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: 0 0 40px rgba(0, 45, 73, 0.18);
	transform: translateX(-100%);
	visibility: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	transition:
		transform var(--hmm-m-drawer-speed) ease,
		visibility var(--hmm-m-drawer-speed);
}

.hmm-drawer-right .et_mobile_menu.hmm-drawer {
	left: auto;
	right: 0;
	transform: translateX(100%);
}

.mobile_nav.opened .et_mobile_menu.hmm-drawer {
	transform: none;
	visibility: visible;
}

/* ------------------------------------------------------- hamburger / cross */

/* Divi draws the hamburger as an icon-font glyph; the script replaces it with
   three <i> bars so it can morph. Scoped to .hmm-drawer-nav, a class the script
   only adds once that swap has happened - otherwise a JS-less page would be
   left with no icon at all. */
.mobile_nav.hmm-drawer-nav .mobile_menu_bar::before,
.mobile_nav.hmm-drawer-nav .mobile_menu_bar::after {
	display: none !important;
	content: none !important;
}

.mobile_nav.hmm-drawer-nav .mobile_menu_bar {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--hmm-m-bars);
	cursor: pointer;
}

.hmm-bars {
	position: relative;
	display: block;
	width: 26px;
	height: 18px;
}

.hmm-bars i {
	position: absolute;
	top: 50%;
	left: 0;
	display: block;
	width: 100%;
	height: 2px;
	margin-top: -1px;
	border-radius: 2px;
	background: currentColor;
	transition:
		transform var(--hmm-m-drawer-speed) ease,
		opacity calc(var(--hmm-m-drawer-speed) / 2) ease;
}

.hmm-bars i:nth-child(1) {
	transform: translateY(-7px);
}

.hmm-bars i:nth-child(3) {
	transform: translateY(7px);
}

.mobile_nav.opened .hmm-bars i:nth-child(1) {
	transform: rotate(45deg);
}

.mobile_nav.opened .hmm-bars i:nth-child(2) {
	opacity: 0;
	transform: scaleX(0.1);
}

.mobile_nav.opened .hmm-bars i:nth-child(3) {
	transform: rotate(-45deg);
}

/* Open, the cross has to sit above the drawer and stay put while the drawer
   scrolls - and the header it normally lives in may be scrolled out of view
   entirely, so it is pinned to the drawer's own top corner rather than left
   in flow. Both live inside .mobile_nav, so the z-index comparison holds
   whatever stacking context Divi's header creates around them. */
.mobile_nav.hmm-drawer-nav.opened .mobile_menu_bar,
.hmm-drawer-close {
	position: fixed;
	top: 16px;
	left: calc(var(--hmm-m-drawer-width) - 54px);
	z-index: 1000001;
}

/* The cross belongs in the drawer's own top-right corner either way: for a
   right-hand drawer that corner is simply the viewport's. */
.hmm-drawer-right .mobile_nav.hmm-drawer-nav.opened .mobile_menu_bar,
.hmm-drawer-right .hmm-drawer-close {
	left: auto;
	right: 16px;
}

/* Fallback for markup with no hamburger to morph. */
.hmm-drawer-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--hmm-m-bars);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	-webkit-appearance: none;
	appearance: none;
	transition:
		opacity var(--hmm-m-drawer-speed) ease,
		visibility var(--hmm-m-drawer-speed);
}

.mobile_nav.opened .hmm-drawer-close {
	opacity: 1;
	visibility: visible;
}

.hmm-drawer-close svg {
	width: 18px;
	height: 18px;
	display: block;
}

/* A narrower drawer leaves page behind it visible and tappable. */
.hmm-drawer-scrim {
	position: fixed;
	inset: 0;
	z-index: 999998;
	background: rgba(0, 32, 52, 0.45);
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--hmm-m-drawer-speed) ease,
		visibility var(--hmm-m-drawer-speed);
}

.mobile_nav.opened .hmm-drawer-scrim {
	opacity: 1;
	visibility: visible;
}

/* Kill the page scroll underneath the open drawer. */
html.hmm-drawer-open,
html.hmm-drawer-open body {
	overflow: hidden !important;
}

.et_mobile_menu.hmm-nav,
.et_mobile_menu.hmm-nav li {
	list-style: none;
}

.et_mobile_menu.hmm-nav > li.hmm-item {
	position: relative;
	padding: 0 !important;
	border: 0 !important;
}

/* No capsule here - plain rows, the current page marked with colour. */
.et_mobile_menu.hmm-nav > li.hmm-item > a.hmm-link {
	display: flex !important;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	padding: var(--hmm-m-pad-y) var(--hmm-m-pad-x) !important;
	margin: 0;
	border: 0 !important;
	border-radius: 0;
	color: var(--hmm-text) !important;
	font-size: var(--hmm-m-font-size);
	font-weight: var(--hmm-font-weight);
	line-height: 1.3;
	opacity: 1 !important;
	background: none !important;
	background-color: transparent !important;
	transition: color var(--hmm-speed) ease;
}

.et_mobile_menu.hmm-nav > li.hmm-item.hmm-open > a.hmm-link,
.et_mobile_menu.hmm-nav > li.hmm-item.current-menu-item > a.hmm-link,
.et_mobile_menu.hmm-nav > li.hmm-item.current_page_item > a.hmm-link,
.et_mobile_menu.hmm-nav > li.hmm-item.current-menu-ancestor > a.hmm-link,
.et_mobile_menu.hmm-nav > li.hmm-item--cta > a.hmm-link {
	background: none !important;
	background-color: transparent !important;
	color: var(--hmm-m-current) !important;
}

/* The caret sits inside the link; push it to the far edge. */
.et_mobile_menu.hmm-nav > li.hmm-item > a.hmm-link .hmm-caret {
	display: none;
}

/* Leave room for the toggle button that overlays the right end of the row. */
.et_mobile_menu.hmm-nav > li.hmm-has-panel > a.hmm-link,
.et_mobile_menu.hmm-nav > li.hmm-has-dropdown > a.hmm-link {
	padding-right: 56px !important;
}

/* Tap target for the accordion. Sized to the link row, not the whole li,
   because the li grows to contain the expanded panel. */
.et_mobile_menu.hmm-nav .hmm-toggle {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: calc(var(--hmm-m-pad-y) * 2 + var(--hmm-m-font-size) * 1.3);
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.et_mobile_menu.hmm-nav > li.hmm-item > .hmm-toggle {
	color: var(--hmm-text);
}

.et_mobile_menu.hmm-nav > li.hmm-item.hmm-open > .hmm-toggle,
.et_mobile_menu.hmm-nav > li.hmm-item.current-menu-item > .hmm-toggle,
.et_mobile_menu.hmm-nav > li.hmm-item.current-menu-ancestor > .hmm-toggle,
.et_mobile_menu.hmm-nav > li.hmm-item--cta > .hmm-toggle {
	color: var(--hmm-m-current);
}

.et_mobile_menu.hmm-nav .hmm-toggle .hmm-caret {
	width: 12px;
	height: 8px;
}

.et_mobile_menu.hmm-nav .hmm-toggle .hmm-caret svg {
	width: 12px;
	height: 8px;
}

.et_mobile_menu.hmm-nav .hmm-toggle[aria-expanded="true"] .hmm-caret {
	transform: rotate(180deg);
}

/* Panels and dropdowns become collapsed blocks. */
.et_mobile_menu.hmm-nav .hmm-panel,
.et_mobile_menu.hmm-nav > li > ul.sub-menu {
	position: static !important;
	display: block;
	width: auto !important;
	max-width: none;
	max-height: 0;
	margin: 0 0 0 var(--hmm-m-indent) !important;
	padding: 0 !important;
	overflow: hidden;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	opacity: 1 !important;
	visibility: hidden;
	transform: none !important;
	pointer-events: auto !important;
	transition:
		max-height var(--hmm-speed) ease,
		visibility var(--hmm-speed);
}

.et_mobile_menu.hmm-nav .hmm-panel::before {
	display: none;
}

.et_mobile_menu.hmm-nav > li.hmm-open > .hmm-panel,
.et_mobile_menu.hmm-nav > li.hmm-open > ul.sub-menu {
	max-height: 2400px;
	visibility: visible;
	padding: 6px 0 14px !important;
}

.et_mobile_menu.hmm-nav .hmm-cols {
	grid-template-columns: repeat(var(--hmm-m-cols), minmax(0, 1fr));
	gap: 18px;
}

.et_mobile_menu.hmm-nav .hmm-col__heading,
.et_mobile_menu.hmm-nav .hmm-col__desc {
	padding: 0 10px !important;
	border-bottom: 0 !important;
}

/* The drawer is narrow: a bar panel has no container to align to, and the
   feature card drops its tint so the accordion stays one flat list. */
.et_mobile_menu.hmm-nav .hmm-panel--style-bar {
	border-bottom: 0 !important;
}

.et_mobile_menu.hmm-nav .hmm-panel--style-bar > .hmm-panel__inner {
	width: auto;
	margin-left: 0;
}

.et_mobile_menu.hmm-nav .hmm-card {
	height: auto;
	padding: 14px;
	border-radius: 12px;
}

.et_mobile_menu.hmm-nav .hmm-leaf__link {
	padding: 9px 10px !important;
	border-bottom: 0 !important;
}

.et_mobile_menu.hmm-nav ul.sub-menu li > a {
	display: block !important;
	padding: 9px 10px !important;
	border-bottom: 0 !important;
	border-radius: 10px;
	color: var(--hmm-link-color) !important;
	font-size: var(--hmm-link-size);
	opacity: 1 !important;
}

.et_mobile_menu.hmm-nav .hmm-panel__note {
	margin: 10px 10px 0;
	padding-top: 12px;
}

/* Divi force-shows nested lists inside .et_mobile_menu, but only an open
   accordion should reveal them. */
.et_mobile_menu.hmm-nav > li.hmm-open > .hmm-panel ul,
.et_mobile_menu.hmm-nav > li.hmm-open > ul.sub-menu ul {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* Divi hides sub-menus until the parent is tapped in some versions. */
.et_mobile_menu.hmm-nav > li.hmm-item > .hmm-panel {
	display: block !important;
}

/* Divi's own mobile arrows would double up with ours. */
.et_mobile_menu.hmm-nav .menu-item-has-children > a::after,
.et_mobile_menu.hmm-nav .hmm-has-panel > a::after {
	display: none !important;
	content: none !important;
}

/* --------------------------------------------------- sliding sub-levels */

/* Every level below the first gets the whole drawer to itself and slides in
   over the level above, so a deep menu never turns into one long accordion.

   The views are `position: fixed` with the drawer's own geometry rather than
   absolutely positioned inside it: the parent <li> has to stay `relative` for
   the toggle button, which would otherwise become the containing block. Fixed
   with matching coordinates lands on the drawer either way - and while the
   drawer is mid-slide its transform makes it the containing block, so the
   views travel with it instead of detaching. */
.et_mobile_menu.hmm-nav.hmm-drawer--slide .hmm-panel,
.et_mobile_menu.hmm-nav.hmm-drawer--slide ul.sub-menu {
	position: fixed !important;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	box-sizing: border-box;
	/* The accordion rules above carry `width: auto !important`, which would
	   shrink-wrap a fixed box instead of filling the drawer. */
	width: var(--hmm-m-drawer-width) !important;
	max-width: 100vw !important;
	right: auto;
	height: auto !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 76px 16px 32px !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	background: var(--hmm-m-drawer-bg) !important;
	visibility: hidden;
	transform: translateX(100%);
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	transition:
		transform var(--hmm-m-drawer-speed) ease,
		visibility var(--hmm-m-drawer-speed);
}

/* A right-hand drawer slides its children in from the opposite edge. */
.hmm-drawer-right .et_mobile_menu.hmm-nav.hmm-drawer--slide .hmm-panel,
.hmm-drawer-right .et_mobile_menu.hmm-nav.hmm-drawer--slide ul.sub-menu {
	left: auto;
	right: 0;
	transform: translateX(-100%);
}

/* A level that is open but has a level of its own open on top of it stays put
   underneath, so the stack does not shuffle while the top one animates. */
.et_mobile_menu.hmm-nav.hmm-drawer--slide li.hmm-open > .hmm-panel,
.et_mobile_menu.hmm-nav.hmm-drawer--slide li.hmm-open > ul.sub-menu {
	z-index: 2;
}

.et_mobile_menu.hmm-nav.hmm-drawer--slide > li.hmm-open > .hmm-panel,
.et_mobile_menu.hmm-nav.hmm-drawer--slide > li.hmm-open > ul.sub-menu,
.et_mobile_menu.hmm-nav.hmm-drawer--slide li.hmm-open > .hmm-panel,
.et_mobile_menu.hmm-nav.hmm-drawer--slide li.hmm-open > ul.sub-menu {
	visibility: visible;
	transform: translateX(0);
	padding: 76px 16px 32px !important;
}

/* The panel is a full view now, so its inner wrapper stops being indented. */
.et_mobile_menu.hmm-nav.hmm-drawer--slide .hmm-panel__inner {
	width: auto;
	margin: 0;
}

.et_mobile_menu.hmm-nav.hmm-drawer--slide .hmm-cols {
	gap: 22px;
}

/* Pointing right reads as "there is another level", where down would promise
   an accordion that is not coming. */
.et_mobile_menu.hmm-nav.hmm-drawer--slide .hmm-toggle .hmm-caret,
.et_mobile_menu.hmm-nav.hmm-drawer--slide .hmm-toggle[aria-expanded="true"] .hmm-caret {
	transform: rotate(-90deg);
}

/* ----------------------------------------------------------- back button */

.hmm-subback-li {
	list-style: none;
}

.hmm-subback {
	display: flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 10px;
	padding: 0 0 14px;
	border: 0;
	border-bottom: 1px solid var(--hmm-heading-rule);
	border-radius: 0;
	background: none;
	color: var(--hmm-text);
	font-size: var(--hmm-m-font-size);
	font-weight: var(--hmm-font-weight);
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.hmm-subback:hover,
.hmm-subback:focus-visible {
	color: var(--hmm-m-current);
}

/* The shared chevron, turned to point back the way the view came from. */
.hmm-subback .hmm-caret {
	transform: rotate(90deg);
}

.hmm-drawer-right .hmm-subback .hmm-caret {
	transform: rotate(-90deg);
}

.hmm-subback__label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ==========================================================================
   5. Fixed header - hold the logo at its resting size
   ========================================================================== */

/* Divi shrinks #main-header on scroll (padding drops, .et-fixed-header goes
   on) and the logo, sized as a percentage of that box, shrinks with it. The
   script measures the resting header once and publishes the three numbers
   below; this block hands them straight back to the fixed state, so nothing
   moves. The html class is only present above the mobile breakpoint, which is
   what keeps Divi's own mobile header untouched. */
html.hmm-lock-logo #main-header.et-fixed-header {
	padding-top: var(--hmm-hdr-pt) !important;
	padding-bottom: var(--hmm-hdr-pb) !important;
}

html.hmm-lock-logo .et-fixed-header #et-top-navigation {
	padding-top: var(--hmm-nav-pt) !important;
}

html.hmm-lock-logo .et-fixed-header #logo,
html.hmm-lock-logo .et-fixed-header .et_pb_menu__logo img,
html.hmm-lock-logo .et-fixed-header .et_pb_menu__logo-wrap img {
	height: var(--hmm-logo-h) !important;
	max-height: var(--hmm-logo-h) !important;
	width: auto !important;
	transition: none !important;
}

/* ==========================================================================
   6. Utilities
   ========================================================================== */

.hmm-nav .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.hmm-nav,
	.hmm-nav *,
	.hmm-panel,
	.hmm-panel *,
	.hmm-drawer-close,
	.hmm-drawer-scrim,
	.hmm-bars i {
		transition-duration: 0.01ms !important;
	}
}