/**
 * TMT Mega Menu
 *
 * Every value an editor can change is read from a custom property. The
 * fallbacks below only matter if the settings option is missing (fresh install,
 * or the option row deleted).
 *
 * Two rules about the selectors here, both deliberate:
 *
 * 1. Nothing selects outside `.tmt-mm`, so the menu can never restyle the
 *    header it is dropped into.
 * 2. Everything is written as `.tmt-mm .tmt-mm__x`, and anything that carries a
 *    colour is element-qualified (`a.tmt-mm__col-link`). A host theme rule such
 *    as `.site-header a { color: … }` is two classes wide and would otherwise
 *    win over a single-class selector and repaint the menu.
 */

.elementor-location-header {
	position: sticky;
	top: 0;
	z-index: 100;
	width: 100%;
}

.tmt-mm {
	--tmt-mm-font: inherit;
	--tmt-mm-max-width: 1240px;
	--tmt-mm-bar-height: 76px;
	--tmt-mm-bar-padding: 24px;
	--tmt-mm-item-gap: 10px;
	--tmt-mm-actions-gap: 20px;
	--tmt-mm-speed: 220ms;
	--tmt-mm-logo-height: 36px;

	--tmt-mm-bar-bg: #16394c;
	--tmt-mm-bar-text: #ffffff;
	/* Inherited by default so the bar items match the header they sit in. */
	--tmt-mm-top-size: inherit;
	--tmt-mm-top-weight: inherit;
	--tmt-mm-top-transform: none;
	/* No hover highlight, but the open item gets the white "pill" from the live
	   site. All four are colour fields in Appearance > Mega Menu. */
	--tmt-mm-top-hover-bg: transparent;
	--tmt-mm-top-hover-text: #ffffff;
	--tmt-mm-top-open-bg: #ffffff;
	--tmt-mm-top-open-text: #16394c;
	--tmt-mm-top-radius: 6px;
	--tmt-mm-top-padding-x: 14px;
	--tmt-mm-top-padding-y: 8px;
	--tmt-mm-current-color: #ffffff;
	--tmt-mm-current-bg: transparent;
	--tmt-mm-burger-color: #ffffff;

	--tmt-mm-panel-bg: #ffffff;
	--tmt-mm-panel-radius: 4px;
	--tmt-mm-panel-padding: 34px;
	--tmt-mm-panel-col-gap: 48px;
	--tmt-mm-panel-offset: 10px;
	--tmt-mm-panel-shadow: 0 18px 40px rgba(9, 30, 42, 0.16);
	--tmt-mm-col-title-size: 16px;
	--tmt-mm-col-title-weight: 400;
	--tmt-mm-col-title-gap: 22px;
	--tmt-mm-col-title-color: #7d95a3;
	--tmt-mm-link-size: 17px;
	--tmt-mm-link-weight: 700;
	--tmt-mm-link-gap: 14px;
	--tmt-mm-link-color: #2b5372;
	--tmt-mm-link-hover-color: #e4572e;
	--tmt-mm-divider-color: #dbe4ea;

	--tmt-mm-drawer-bg: #16394c;
	--tmt-mm-drawer-head-bg: transparent;
	--tmt-mm-drawer-text: #ffffff;
	--tmt-mm-drawer-size: 16px;
	--tmt-mm-drawer-weight: 500;
	--tmt-mm-drawer-row-bg: #2d5568;
	--tmt-mm-drawer-row-hover-bg: #3a6a80;
	--tmt-mm-drawer-row-hover-text: #ffffff;
	--tmt-mm-drawer-row-radius: 4px;
	--tmt-mm-drawer-row-height: 56px;
	--tmt-mm-drawer-row-gap: 6px;
	--tmt-mm-drawer-border-color: rgba(255, 255, 255, 0.1);
	--tmt-mm-drawer-group-bg: #b6ccd8;
	--tmt-mm-drawer-group-color: #1b4257;
	--tmt-mm-drawer-width: 100%;
	--tmt-mm-drawer-overlay: rgba(6, 20, 28, 0.55);

	--tmt-mm-btn-radius: 999px;
	--tmt-mm-btn-size: 15px;
	--tmt-mm-btn-weight: 700;
	--tmt-mm-btn-padding-x: 22px;
	--tmt-mm-btn-padding-y: 12px;
	--tmt-mm-btn1-bg: transparent;
	--tmt-mm-btn1-text: #ffffff;
	--tmt-mm-btn1-border: #ffffff;
	--tmt-mm-btn1-hover-bg: #ffffff;
	--tmt-mm-btn1-hover-text: #16394c;
	--tmt-mm-btn2-bg: #007cbd;
	--tmt-mm-btn2-text: #ffffff;
	--tmt-mm-btn2-border: #007cbd;
	--tmt-mm-btn2-hover-bg: #006fa9;
	--tmt-mm-btn2-hover-text: #ffffff;

	position: relative;
	z-index: 100;
	box-sizing: border-box;
	background: var(--tmt-mm-bar-bg);
	font-family: var(--tmt-mm-font);
	-webkit-font-smoothing: antialiased;
}

.tmt-mm *,
.tmt-mm *::before,
.tmt-mm *::after {
	box-sizing: border-box;
}

/*
 * Font guard.
 *
 * A host theme rule such as `.site-header a { font-family: … }` targets our
 * anchors directly, and direct targeting always beats inheritance from
 * `.tmt-mm` however the root is styled. Doubling the root class gets these to
 * two-classes-plus-an-element, which outranks the usual theme selectors without
 * resorting to !important. Colours and sizes are safe already: each component
 * rule below is element-qualified for the same reason.
 */
.tmt-mm.tmt-mm a,
.tmt-mm.tmt-mm button,
.tmt-mm.tmt-mm span,
.tmt-mm.tmt-mm li,
.tmt-mm.tmt-mm div {
	/* font-family: inherit; */
	letter-spacing: inherit;
	text-shadow: none;
	font-family: "Interstate", Arial, Helvetica, sans-serif;
}

/* Anything that goes somewhere, or opens something, shows the hand cursor --
   set once here so no element can be missed. Labels with no destination are
   put back to the default arrow further down. */
.tmt-mm.tmt-mm a[href],
.tmt-mm.tmt-mm button {
	cursor: pointer;
}

/*
 * Button guard.
 *
 * A parent item ("Solutions", "About us") is a <button>, because a control that
 * opens a panel is a button and not a link. Themes and page builders style bare
 * <button> elements as call-to-action buttons -- Hello Elementor and the
 * Elementor kit both do -- which is what turns those two items into coloured
 * pills. This strips the element back to plain text; the component rules below
 * are written one class heavier, so they still get to restyle it.
 */
.tmt-mm.tmt-mm button {
	width: auto;
	min-width: 0;
	min-height: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: none;
	background-color: transparent;
	box-shadow: none;
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-transform: none;
	text-decoration: none;
	-webkit-appearance: none;
	appearance: none;
	font-family: "Interstate", Arial, Helvetica, sans-serif;
}

.tmt-mm.tmt-mm button:hover,
.tmt-mm.tmt-mm button:focus,
.tmt-mm.tmt-mm button:active {
	background: none;
	background-color: transparent;
	box-shadow: none;
}

/* The attribute is the single source of truth for "closed". */
.tmt-mm [hidden] {
	display: none !important;
}

.tmt-mm.tmt-mm--sticky {
	position: sticky;
	top: 0;
}

.tmt-mm .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

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

.tmt-mm.tmt-mm .tmt-mm__bar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--tmt-mm-actions-gap);
	width: 100%;
	max-width: var(--tmt-mm-max-width);
	min-height: var(--tmt-mm-bar-height);
	margin: 0 auto;
	padding: 0 var(--tmt-mm-bar-padding);
}

/*
 * Embed mode: the menu is a widget inside a header that already provides the
 * background, the height, the width limit and the padding. Everything the bar
 * would otherwise impose on that header is switched off, so dropping the widget
 * in changes nothing but adding the menu itself.
 */
.tmt-mm.tmt-mm--embed {
	background: transparent;
}

.tmt-mm.tmt-mm--embed .tmt-mm__bar {
	max-width: none;
	min-height: 0;
	padding: 0;
}

/* Where the menu sits when the bar is wider than its contents. */
.tmt-mm.tmt-mm--bar-left .tmt-mm__bar {
	justify-content: flex-start;
}

.tmt-mm.tmt-mm--bar-center .tmt-mm__bar {
	justify-content: center;
}

.tmt-mm.tmt-mm--bar-between .tmt-mm__bar {
	justify-content: space-between;
}

.tmt-mm.tmt-mm--bar-between .tmt-mm__desktop {
	flex: 1 1 auto;
	justify-content: space-between;
}

.tmt-mm.tmt-mm .tmt-mm__logo {
	display: block;
	width: auto;
	height: var(--tmt-mm-logo-height);
	max-width: 100%;
}

/* `em`, not a calc() on the top-level size: that size can be `inherit`, and
   calc() cannot do arithmetic on a keyword. */
.tmt-mm.tmt-mm .tmt-mm__logo-text {
	overflow: hidden;
	color: var(--tmt-mm-drawer-text);
	font-size: 1.35em;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* The generated breakpoint CSS flips this to `none` below the breakpoint. The
   value here is the fallback if that inline block is ever missing: desktop bar
   visible, drawer hidden, which is the safe way round. */
.tmt-mm.tmt-mm .tmt-mm__desktop {
	display: flex;
	align-items: center;
	gap: var(--tmt-mm-actions-gap);
}

.tmt-mm.tmt-mm .tmt-mm__list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--tmt-mm-item-gap);
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tmt-mm.tmt-mm .tmt-mm__item {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tmt-mm.tmt-mm a.tmt-mm__top-link,
.tmt-mm.tmt-mm button.tmt-mm__top-link,
.tmt-mm.tmt-mm button.tmt-mm__top-toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: var(--tmt-mm-top-padding-y) var(--tmt-mm-top-padding-x);
	border: 0;
	border-radius: var(--tmt-mm-top-radius);
	/*
	 * The one place !important is used, and only for colour.
	 *
	 * Themes reach these items through generic selectors (`.site-header a`,
	 * `.current-menu-item a`, link colours from an Elementor kit) that are hard
	 * to outrank reliably. Both values still come from the admin settings -- the
	 * custom property is what carries them -- so nothing here is less
	 * configurable than the rest; the colour just stops being negotiable with
	 * whatever theme the menu is dropped into. Size and weight are left alone so
	 * the widget's typography controls keep working.
	 */
	background: transparent !important;
	color: var(--tmt-mm-bar-text) !important;
	font-family: inherit;
	font-size: var(--tmt-mm-top-size);
	font-weight: var(--tmt-mm-top-weight);
	line-height: 1.25;
	text-transform: var(--tmt-mm-top-transform);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--tmt-mm-speed) ease, color var(--tmt-mm-speed) ease;
	-webkit-appearance: none;
	appearance: none;
}

.tmt-mm.tmt-mm .tmt-mm__top-link .tmt-mm__desc {
	display: none;
}

/* Every state repeats !important, otherwise the base rule above would win. */
.tmt-mm.tmt-mm a.tmt-mm__top-link:hover,
.tmt-mm.tmt-mm a.tmt-mm__top-link:focus-visible,
.tmt-mm.tmt-mm button.tmt-mm__top-link:hover,
.tmt-mm.tmt-mm button.tmt-mm__top-link:focus-visible {
	background: var(--tmt-mm-top-hover-bg) !important;
	color: var(--tmt-mm-top-hover-text) !important;
}

.tmt-mm.tmt-mm .tmt-mm__item.tmt-mm-is-current>.tmt-mm__top-link,
.tmt-mm.tmt-mm .tmt-mm__item.tmt-mm-is-current>.tmt-mm__top-split>.tmt-mm__top-link {
	background: var(--tmt-mm-current-bg) !important;
	color: var(--tmt-mm-current-color) !important;
}

/* Open state: the white "pill" from the live site. */
.tmt-mm.tmt-mm .tmt-mm__item.is-open>.tmt-mm__top-link,
.tmt-mm.tmt-mm .tmt-mm__item.is-open>.tmt-mm__top-split {
	background: var(--tmt-mm-top-open-bg) !important;
	color: var(--tmt-mm-top-open-text) !important;
	border-radius: var(--tmt-mm-top-radius);
}

.tmt-mm.tmt-mm .tmt-mm__item.is-open>.tmt-mm__top-split>.tmt-mm__top-link,
.tmt-mm.tmt-mm .tmt-mm__item.is-open>.tmt-mm__top-split>.tmt-mm__top-toggle {
	background: transparent !important;
	color: var(--tmt-mm-top-open-text) !important;
}

.tmt-mm.tmt-mm .tmt-mm__top-split {
	display: inline-flex;
	align-items: center;
	border-radius: var(--tmt-mm-top-radius);
	transition: background var(--tmt-mm-speed) ease, color var(--tmt-mm-speed) ease;
}

.tmt-mm.tmt-mm .tmt-mm__top-split>.tmt-mm__top-link {
	padding-right: 6px;
}

.tmt-mm.tmt-mm button.tmt-mm__top-toggle {
	padding-left: 4px;
	padding-right: 12px;
}

.tmt-mm.tmt-mm .tmt-mm__caret {
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	transition: transform var(--tmt-mm-speed) ease;
}

.tmt-mm.tmt-mm .tmt-mm__item.is-open .tmt-mm__caret {
	transform: rotate(180deg);
}

/* -------------------------------------------------------------- panel */

/*
 * The panel is absolutely positioned inside its (narrow) list item, so its
 * shrink-to-fit width would be capped by that item and every long label would
 * wrap. `max-content` sizes it to the widest column instead, and max-width
 * keeps it inside the viewport -- the flip class handles the right edge.
 */
.tmt-mm.tmt-mm .tmt-mm__panel {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	width: max-content;
	min-width: 240px;
	max-width: calc(100vw - 2 * var(--tmt-mm-bar-padding));
	/* Distance between the bar item and the card. Identical for the mega panel
	   and the plain dropdown, so both open the same way. */
	padding-top: var(--tmt-mm-panel-offset);
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity var(--tmt-mm-speed) ease, transform var(--tmt-mm-speed) ease;
	pointer-events: none;
}

.tmt-mm.tmt-mm .tmt-mm__panel.is-open {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* The card. The grid lives on the list inside it, so the columns are real list
   items rather than anonymous boxes -- see .tmt-mm__panel-list. */
.tmt-mm.tmt-mm .tmt-mm__panel-inner {
	padding: var(--tmt-mm-panel-padding);
	border-radius: var(--tmt-mm-panel-radius);
	background: var(--tmt-mm-panel-bg);
	box-shadow: var(--tmt-mm-panel-shadow);
}

/*
 * One list, one item per column.
 *
 * --tmt-mm-cols is written inline by the renderer from the number of groups it
 * found, so adding a column to the menu widens the grid on its own -- there is
 * no count to keep in step anywhere in this file.
 */
.tmt-mm.tmt-mm .tmt-mm__panel-list {
	display: grid;
	grid-template-columns: repeat(var(--tmt-mm-cols, 2), minmax(140px, auto));
	column-gap: var(--tmt-mm-panel-col-gap);
	row-gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tmt-mm.tmt-mm .tmt-mm__col {
	list-style: none;
}

/* A plain dropdown is one column of the same card -- same padding, same link
   spacing -- so "About us" and "Solutions" read as the same component. */
.tmt-mm.tmt-mm .tmt-mm__panel--plain .tmt-mm__panel-list {
	grid-template-columns: minmax(180px, auto);
}

.tmt-mm.tmt-mm .tmt-mm__col {
	position: relative;
	min-width: 0;
}

/* The divider sits in the middle of the gap rather than against a column. */
.tmt-mm.tmt-mm .tmt-mm__col+.tmt-mm__col::before {
	content: "";
	position: absolute;
	top: 2px;
	bottom: 2px;
	left: calc(var(--tmt-mm-panel-col-gap) / -2);
	width: 1px;
	background: var(--tmt-mm-divider-color);
}

/*
 * Column heading ("Features", "Customers"): lighter, lighter-weight and a
 * different colour from the links underneath, which is what separates the two
 * levels visually. Colour is forced for the same reason as the bar items --
 * a theme link colour must not be able to flatten the two levels into one.
 */
.tmt-mm.tmt-mm .tmt-mm__col-title,
.tmt-mm.tmt-mm a.tmt-mm__col-title {
	display: block;
	margin: 0 0 var(--tmt-mm-col-title-gap);
	color: #2b5372 !important;
	font-size: var(--tmt-mm-col-title-size);
	font-weight: var(--tmt-mm-col-title-weight);
	line-height: 1.3;
	text-decoration: none;
	font-size: 18px !important;
	font-weight: 400;
	font-family: "Interstate", Arial, Helvetica, sans-serif;
}

.tmt-mm.tmt-mm a.tmt-mm__col-title--link {
	cursor: pointer;
}

.tmt-mm.tmt-mm a.tmt-mm__col-title--link:hover,
.tmt-mm.tmt-mm a.tmt-mm__col-title--link:focus-visible {
	color: var(--tmt-mm-link-hover-color);
}

.tmt-mm.tmt-mm .tmt-mm__col-list,
.tmt-mm.tmt-mm .tmt-mm__col-sublist {
	display: grid;
	gap: var(--tmt-mm-link-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tmt-mm.tmt-mm .tmt-mm__col-sublist {
	margin-top: var(--tmt-mm-link-gap);
	padding-left: 14px;
}

.tmt-mm.tmt-mm .tmt-mm__col-item,
.tmt-mm.tmt-mm .tmt-mm__col-subitem {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tmt-mm.tmt-mm a.tmt-mm__col-link,
.tmt-mm.tmt-mm a.tmt-mm__col-sublink,
.tmt-mm.tmt-mm .tmt-mm__col-link,
.tmt-mm.tmt-mm .tmt-mm__col-sublink {
	display: block;
	color: #2b5372 !important;
	font-size: var(--tmt-mm-link-size);
	font-weight: var(--tmt-mm-link-weight);
	line-height: 1.3;
	text-decoration: none;
	transition: color var(--tmt-mm-speed) ease;
	font-size: 20px;
}

.tmt-mm.tmt-mm a.tmt-mm__col-link,
.tmt-mm.tmt-mm a.tmt-mm__col-sublink {
	cursor: pointer;
}

.tmt-mm.tmt-mm .tmt-mm__col-sublink {
	font-size: calc(var(--tmt-mm-link-size) - 2px);
	font-weight: 400;
}

.tmt-mm.tmt-mm a.tmt-mm__col-link:hover,
.tmt-mm.tmt-mm a.tmt-mm__col-link:focus-visible,
.tmt-mm.tmt-mm a.tmt-mm__col-sublink:hover,
.tmt-mm.tmt-mm a.tmt-mm__col-sublink:focus-visible {
	color: var(--tmt-mm-link-hover-color) !important;
}

.tmt-mm.tmt-mm .tmt-mm__col-item.tmt-mm-is-current>.tmt-mm__col-link {
	color: var(--tmt-mm-link-hover-color) !important;
}

.tmt-mm.tmt-mm .tmt-mm__desc {
	display: block;
	margin-top: 3px;
	color: var(--tmt-mm-col-title-color);
	font-size: calc(var(--tmt-mm-link-size) - 4px);
	font-weight: 400;
	line-height: 1.35;
}

/* A menu item with no destination is a label, and must not look clickable. */
.tmt-mm.tmt-mm .tmt-mm__is-static {
	cursor: default;
}

/* Panel alignment modes. Centring or stretching the panel needs it to be
   positioned against the bar, so the list item stops being the containing
   block in those modes. */
.tmt-mm.tmt-mm--align-center .tmt-mm__item,
.tmt-mm.tmt-mm--align-right .tmt-mm__item,
.tmt-mm.tmt-mm--align-full .tmt-mm__item {
	position: static;
}

.tmt-mm.tmt-mm--align-center .tmt-mm__panel {
	left: 50%;
	transform: translateX(-50%) translateY(-6px);
}

.tmt-mm.tmt-mm--align-center .tmt-mm__panel.is-open {
	transform: translateX(-50%) translateY(0);
}

.tmt-mm.tmt-mm--align-right .tmt-mm__panel {
	left: auto;
	right: var(--tmt-mm-bar-padding);
}

.tmt-mm.tmt-mm--align-full .tmt-mm__panel {
	left: var(--tmt-mm-bar-padding);
	right: var(--tmt-mm-bar-padding);
	width: auto;
	max-width: none;
}

/* Keep an item-anchored panel inside the viewport near the right edge. */
.tmt-mm.tmt-mm .tmt-mm__item--flip .tmt-mm__panel {
	left: auto;
	right: 0;
}

/* ------------------------------------------------------------ buttons */

.tmt-mm.tmt-mm .tmt-mm__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

.tmt-mm.tmt-mm a.tmt-mm__btn,
.tmt-mm.tmt-mm .tmt-mm__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--tmt-mm-btn-padding-y) var(--tmt-mm-btn-padding-x);
	border: 1px solid transparent;
	border-radius: var(--tmt-mm-btn-radius);
	font-family: "Interstate", Arial, Helvetica, sans-serif;
	font-size: var(--tmt-mm-btn-size);
	font-weight: var(--tmt-mm-btn-weight);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--tmt-mm-speed) ease, color var(--tmt-mm-speed) ease,
		border-color var(--tmt-mm-speed) ease;
}

.tmt-mm.tmt-mm a.tmt-mm__btn {
	cursor: pointer;
}

.tmt-mm.tmt-mm .tmt-mm__btn .tmt-mm__desc {
	display: none;
}

.tmt-mm.tmt-mm a.tmt-mm__btn--outline,
.tmt-mm.tmt-mm .tmt-mm__btn--outline {
	background: var(--tmt-mm-btn1-bg);
	border-color: var(--tmt-mm-btn1-border);
	color: var(--tmt-mm-btn1-text);
}

.tmt-mm.tmt-mm a.tmt-mm__btn--outline:hover,
.tmt-mm.tmt-mm a.tmt-mm__btn--outline:focus-visible {
	background: var(--tmt-mm-btn1-hover-bg);
	color: var(--tmt-mm-btn1-hover-text);
}

.tmt-mm.tmt-mm a.tmt-mm__btn--solid,
.tmt-mm.tmt-mm .tmt-mm__btn--solid {
	background: #007cbd;
	border-color: #007cbd;
	color: var(--tmt-mm-btn2-text);
}

.tmt-mm.tmt-mm a.tmt-mm__btn--solid:hover,
.tmt-mm.tmt-mm a.tmt-mm__btn--solid:focus-visible {
	background: #006fa9;
	color: var(--tmt-mm-btn2-hover-text);
}

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

.tmt-mm.tmt-mm button.tmt-mm__burger {
	display: none;
	/* Turned on by the generated breakpoint CSS. */
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 44px;
	margin-left: auto;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--tmt-mm-burger-color);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.tmt-mm.tmt-mm .tmt-mm__burger-box {
	display: block;
	width: 26px;
}

.tmt-mm.tmt-mm .tmt-mm__burger-box span {
	display: block;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

.tmt-mm.tmt-mm .tmt-mm__burger-box span+span {
	margin-top: 6px;
}

/* ------------------------------------------------------------- drawer */

.tmt-mm.tmt-mm .tmt-mm__overlay {
	position: fixed;
	inset: 0;
	z-index: 99998;
	background: var(--tmt-mm-drawer-overlay);
	opacity: 0;
	transition: opacity var(--tmt-mm-speed) ease;
	cursor: pointer;
}

.tmt-mm.tmt-mm .tmt-mm__overlay.is-open {
	opacity: 1;
}

.tmt-mm.tmt-mm .tmt-mm__drawer {
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	z-index: 99999;
	width: var(--tmt-mm-drawer-width);
	max-width: 100%;
	overflow: hidden;
	background: var(--tmt-mm-drawer-bg);
	color: var(--tmt-mm-drawer-text);
	transform: translateX(100%);
	transition: transform var(--tmt-mm-speed) ease;
}

.tmt-mm.tmt-mm--drawer-left .tmt-mm__drawer {
	right: auto;
	left: 0;
	transform: translateX(-100%);
}

.tmt-mm.tmt-mm .tmt-mm__drawer.is-open {
	transform: translateX(0);
}

.tmt-mm.tmt-mm .tmt-mm__drawer-head {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 76px;
	padding: 14px 20px;
	background: var(--tmt-mm-drawer-head-bg);
}

.tmt-mm.tmt-mm .tmt-mm__drawer-brand {
	display: inline-flex;
	align-items: center;
	margin-right: auto;
	text-decoration: none;
	line-height: 0;
	cursor: pointer;
}

.tmt-mm.tmt-mm .tmt-mm__drawer-brand .tmt-mm__logo {
	height: var(--tmt-mm-logo-height);
}

.tmt-mm.tmt-mm .tmt-mm__drawer-brand .tmt-mm__logo-text {
	color: var(--tmt-mm-drawer-text);
}

.tmt-mm.tmt-mm button.tmt-mm__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--tmt-mm-drawer-text);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.tmt-mm.tmt-mm .tmt-mm__close-icon {
	position: relative;
	display: block;
	width: 20px;
	height: 20px;
}

.tmt-mm.tmt-mm .tmt-mm__close-icon::before,
.tmt-mm.tmt-mm .tmt-mm__close-icon::after {
	content: "";
	position: absolute;
	top: 9px;
	left: 0;
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

.tmt-mm.tmt-mm .tmt-mm__close-icon::before {
	transform: rotate(45deg);
}

.tmt-mm.tmt-mm .tmt-mm__close-icon::after {
	transform: rotate(-45deg);
}

.tmt-mm.tmt-mm .tmt-mm__drawer-body,
.tmt-mm.tmt-mm .tmt-mm__subpanel-body {
	max-height: calc(100vh - 76px);
	padding: 6px 20px 40px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

.tmt-mm.tmt-mm .tmt-mm__drawer-list {
	display: grid;
	gap: var(--tmt-mm-drawer-row-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tmt-mm.tmt-mm .tmt-mm__drawer-li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tmt-mm.tmt-mm a.tmt-mm__drawer-row,
.tmt-mm.tmt-mm button.tmt-mm__drawer-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: var(--tmt-mm-drawer-row-height);
	padding: 12px 18px;
	border: 1px solid var(--tmt-mm-drawer-border-color);
	border-radius: var(--tmt-mm-drawer-row-radius);
	background: var(--tmt-mm-drawer-row-bg);
	color: var(--tmt-mm-drawer-text);
	font-family: inherit;
	font-size: var(--tmt-mm-drawer-size);
	font-weight: var(--tmt-mm-drawer-weight);
	line-height: 1.3;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--tmt-mm-speed) ease, color var(--tmt-mm-speed) ease;
	-webkit-appearance: none;
	appearance: none;
}

.tmt-mm.tmt-mm .tmt-mm__drawer-row+.tmt-mm__drawer-row {
	margin-top: var(--tmt-mm-drawer-row-gap);
}

/*
 * Small-screen hover / tap feedback.
 *
 * The drawer only exists below the breakpoint, so these rules are by definition
 * "below 768px" behaviour. `:active` is included because a touch device fires it
 * on tap, which is what actually gives the highlight on a phone. Items that open
 * a sub-menu (Solutions, About us) also nudge their chevron.
 */
.tmt-mm.tmt-mm a.tmt-mm__drawer-row:hover,
.tmt-mm.tmt-mm a.tmt-mm__drawer-row:focus-visible,
.tmt-mm.tmt-mm a.tmt-mm__drawer-row:active,
.tmt-mm.tmt-mm button.tmt-mm__drawer-row:hover,
.tmt-mm.tmt-mm button.tmt-mm__drawer-row:focus-visible,
.tmt-mm.tmt-mm button.tmt-mm__drawer-row:active {
	background: var(--tmt-mm-drawer-row-hover-bg);
	color: var(--tmt-mm-drawer-row-hover-text);
}

.tmt-mm.tmt-mm .tmt-mm__drawer-row--parent:hover .tmt-mm__chev,
.tmt-mm.tmt-mm .tmt-mm__drawer-row--parent:focus-visible .tmt-mm__chev,
.tmt-mm.tmt-mm .tmt-mm__drawer-row--parent:active .tmt-mm__chev {
	transform: translateX(3px) rotate(45deg);
}

.tmt-mm.tmt-mm button.tmt-mm__drawer-row--parent[aria-expanded="true"] {
	background: var(--tmt-mm-drawer-row-hover-bg);
	color: var(--tmt-mm-drawer-row-hover-text);
}

.tmt-mm.tmt-mm .tmt-mm__drawer-li.tmt-mm-is-current>.tmt-mm__drawer-row {
	background: var(--tmt-mm-drawer-row-hover-bg);
}

.tmt-mm.tmt-mm .tmt-mm__drawer-row--nested {
	margin-top: var(--tmt-mm-drawer-row-gap);
	padding-left: 34px;
	font-weight: 400;
}

.tmt-mm.tmt-mm .tmt-mm__drawer-row--overview {
	font-weight: 700;
}

.tmt-mm.tmt-mm .tmt-mm__drawer-label {
	display: block;
	min-width: 0;
}

.tmt-mm.tmt-mm .tmt-mm__drawer-row .tmt-mm__desc {
	color: inherit;
	opacity: 0.75;
	font-size: calc(var(--tmt-mm-drawer-size) - 3px);
}

.tmt-mm.tmt-mm .tmt-mm__chev {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--tmt-mm-speed) ease;
}

.tmt-mm.tmt-mm .tmt-mm__drawer-actions {
	display: grid;
	gap: 12px;
	margin-top: 26px;
}

.tmt-mm.tmt-mm .tmt-mm__btn--drawer {
	width: 100%;
	padding: 15px var(--tmt-mm-btn-padding-x);
}

/* ---------------------------------------------------------- subpanel */

.tmt-mm.tmt-mm .tmt-mm__subpanel {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	flex-direction: column;
	background: var(--tmt-mm-drawer-bg);
	transform: translateX(100%);
	transition: transform var(--tmt-mm-speed) ease;
}

.tmt-mm.tmt-mm--drawer-left .tmt-mm__subpanel {
	transform: translateX(-100%);
}

.tmt-mm.tmt-mm .tmt-mm__subpanel.is-open {
	transform: translateX(0);
}

.tmt-mm.tmt-mm .tmt-mm__subpanel-head {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 76px;
	padding: 14px 20px;
	background: var(--tmt-mm-drawer-head-bg);
}

.tmt-mm.tmt-mm .tmt-mm__subpanel-title {
	flex: 1 1 auto;
	color: var(--tmt-mm-drawer-text);
	font-size: var(--tmt-mm-drawer-size);
	font-weight: 700;
	text-align: center;
}

.tmt-mm.tmt-mm .tmt-mm__subpanel-title .tmt-mm__desc {
	display: none;
}

.tmt-mm.tmt-mm button.tmt-mm__back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--tmt-mm-drawer-text);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.tmt-mm.tmt-mm .tmt-mm__back-icon {
	display: block;
	width: 10px;
	height: 10px;
	border-bottom: 2px solid currentColor;
	border-left: 2px solid currentColor;
	transform: rotate(45deg);
}

.tmt-mm.tmt-mm .tmt-mm__subpanel-body {
	flex: 1 1 auto;
	max-height: none;
}

.tmt-mm.tmt-mm .tmt-mm__group+.tmt-mm__group,
.tmt-mm.tmt-mm .tmt-mm__subpanel-body>.tmt-mm__drawer-list+.tmt-mm__group {
	margin-top: 22px;
}

.tmt-mm.tmt-mm .tmt-mm__group-title,
.tmt-mm.tmt-mm a.tmt-mm__group-title {
	display: block;
	margin-bottom: var(--tmt-mm-drawer-row-gap);
	padding: 9px 18px;
	border-radius: var(--tmt-mm-drawer-row-radius);
	background: var(--tmt-mm-drawer-group-bg);
	color: var(--tmt-mm-drawer-group-color);
	font-size: var(--tmt-mm-drawer-size);
	font-weight: 400;
	line-height: 1.3;
	text-decoration: none;
}

.tmt-mm.tmt-mm a.tmt-mm__group-title--link {
	cursor: pointer;
}

.tmt-mm.tmt-mm a.tmt-mm__group-title--link:hover,
.tmt-mm.tmt-mm a.tmt-mm__group-title--link:focus-visible {
	filter: brightness(0.95);
}

/* ------------------------------------------------------------- misc */

.tmt-mm a:focus-visible,
.tmt-mm button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Set on <html> while the drawer is open. */
.tmt-mm-locked {
	overflow: hidden !important;
	touch-action: none;
}

@media (prefers-reduced-motion: reduce) {

	.tmt-mm,
	.tmt-mm * {
		transition-duration: 1ms !important;
	}
}


@media (min-width: 1024px) {
	.tmt-mm.tmt-mm .tmt-mm__item--mega .tmt-mm__panel {
		min-width: 492px !important;
		top: 125%;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.hfe-site-logo-img {
		max-width: 146px !important;
	}

	.tmt-mm.tmt-mm a.tmt-mm__btn--outline,
	.tmt-mm.tmt-mm .tmt-mm__btn--outline {
		font-size: 10px;
		padding-block: 7px;
	}

	.tmt-mm.tmt-mm a.tmt-mm__btn--solid,
	.tmt-mm.tmt-mm .tmt-mm__btn--solid {
		font-size: 10px;
		padding-block: 7px;
	}
}


@media (max-width:767px) {
	.tmt-quotes__track {
		padding-inline: 15px;
	}

	.tmt-mm.tmt-mm .tmt-mm__is-static {
		cursor: default;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		min-height: var(--tmt-mm-drawer-row-height);
		padding: 12px 18px;
		border: 1px solid var(--tmt-mm-drawer-border-color);
		border-radius: var(--tmt-mm-drawer-row-radius);
		background: var(--tmt-mm-drawer-row-bg);
		color: var(--tmt-mm-drawer-text);
		font-family: inherit;
		font-size: var(--tmt-mm-drawer-size);
		font-weight: var(--tmt-mm-drawer-weight);
		line-height: 1.3;
		text-align: left;
		text-decoration: none;
		cursor: pointer;
		transition: background var(--tmt-mm-speed) ease, color var(--tmt-mm-speed) ease;
		-webkit-appearance: none;
		appearance: none;
	}
}