/* =============================================================================
   TLP Mega Menu — front end
   Namespaced under .tlp-mm-* so nothing here touches Divi or the theme's
   existing style.css.
   ========================================================================== */

:root {
	--tlp-mm-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	--tlp-mm-font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

	--tlp-mm-bg: #fff;
	/* Square corners, hairline top edge, single soft drop shadow — straight
	   from the design's box spec. */
	--tlp-mm-radius: 0px;
	/* Every hairline in the design is the same: 0.5px #C7C7C7. Peak pixel
	   darkness in the exports is 199, which a 1px #E3E3E3 line could not
	   produce (it bottoms out at 227). */
	--tlp-mm-rule: #c7c7c7;
	--tlp-mm-hairline: 0.5px solid var(--tlp-mm-rule);
	--tlp-mm-border-top: var(--tlp-mm-hairline);
	--tlp-mm-shadow: 0 19px 25.1px 0 rgba(0, 0, 0, .13);

	--tlp-mm-heading-color: #000;
	--tlp-mm-link-color: #000;
	--tlp-mm-accent: #f7183a;
	--tlp-mm-link-hover: #194d98;
	--tlp-mm-link-hover-weight: 600;
	--tlp-mm-blue: #1e59d0;
	/* The top-level nav item picks up the panel's own hover blue, so hovering
	   "Products" and then a link inside the panel is one continuous colour
	   rather than a jump from red to blue. */
	--tlp-mm-nav-hover: var(--tlp-mm-link-hover);
	--tlp-mm-open-color: var(--tlp-mm-nav-hover);

	--tlp-mm-pad-y: 30px;
	/* Less below than above: the last link row carries its own trailing
	   leading, so equal padding reads bottom-heavy. Matches the design. */
	--tlp-mm-pad-bottom: 22px;
	--tlp-mm-pad-x: 50px;
	--tlp-mm-gutter: 30px;

	--tlp-mm-scrim: rgba(10, 16, 32, .16);
	--tlp-mm-ease: cubic-bezier(.2, .8, .25, 1);
}

/* -----------------------------------------------------------------------------
   Host menu item
   -------------------------------------------------------------------------- */

.tlp-mm-item {
	position: relative;
}

.tlp-mm-item--caret > a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 9px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .28s var(--tlp-mm-ease);
	opacity: .65;
}

.tlp-mm-item--caret.tlp-mm-item--open > a::after {
	transform: translateY(1px) rotate(-135deg);
	opacity: 1;
}

.tlp-mm-item--open > a {
	color: var(--tlp-mm-open-color);
}

/* Divi styles menu links with a module-specific selector, so the open state
   needs the extra weight to read through. */
.et_pb_menu ul li.tlp-mm-item--open > a,
.et-menu li.tlp-mm-item--open > a {
	color: var(--tlp-mm-open-color) !important;
}

/* Every top-level item in the header nav, not just the ones hosting a panel:
   Divi's default is the theme accent (red), which fought the panel's blue.
   Scoped to .et-l--header so the footer menu and any in-page menu module keep
   whatever they were given in the builder. */
@media (min-width: 981px) {
	.et-l--header .et_pb_menu ul.et-menu > li > a:hover,
	.et-l--header .et_pb_menu ul.et-menu > li > a:focus-visible,
	.et-l--header .et_pb_menu ul.et-menu > li:hover > a,
	.et-l--header .et-menu > li.tlp-mm-item:hover > a {
		color: var(--tlp-mm-nav-hover) !important;
		opacity: 1;
		transition: color .22s ease;
	}
}

/* -----------------------------------------------------------------------------
   Panel shell
   -------------------------------------------------------------------------- */

#tlp-mm-root {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999998;
}

/* Purely decorative: it must never take pointer events, or it would cover the
   menu item that opened the panel and bounce the hover state. Clicking outside
   is handled by the document listener in mega-menu.js. */
.tlp-mm-scrim {
	position: fixed;
	inset: 0;
	background: var(--tlp-mm-scrim);
	opacity: 0;
	visibility: hidden;
	pointer-events: none !important;
	transition: opacity .3s ease, visibility 0s linear .3s;
	z-index: 1;
}

.tlp-mm-scrim.is-active {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s, 0s;
}

.tlp-mm-panel {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 2;
	box-sizing: border-box;
	width: 771px;
	max-width: calc(100vw - 48px);
	font-family: var(--tlp-mm-font);
	text-align: left;
	background: var(--tlp-mm-bg);
	border-top: var(--tlp-mm-border-top);
	border-radius: var(--tlp-mm-radius);
	box-shadow: var(--tlp-mm-shadow);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate3d(0, 10px, 0);
	transition: opacity .22s ease, transform .34s var(--tlp-mm-ease), visibility 0s linear .34s;
	will-change: transform, opacity;
}

/* JS moves the panels to a body-level root and positions them there. */
#tlp-mm-root .tlp-mm-panel {
	position: fixed;
	top: auto;
	left: auto;
}

.tlp-mm-panel.is-open,
.tlp-mm-item:hover > .tlp-mm-panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate3d(0, 0, 0);
	transition-delay: 0s, 0s, 0s;
}

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

.tlp-mm-panel__inner {
	display: grid;
	/* 364px / 277px of the 641px of track. Keeps the rule at 444px from the
	   card's left edge, as measured off every design export, while giving the
	   statement column the few extra pixels the browser's Inter Tight needs
	   over Figma's to break lines at the same words. */
	grid-template-columns: minmax(0, 1.314fr) minmax(0, 1fr);
	column-gap: var(--tlp-mm-gutter);
	padding: var(--tlp-mm-pad-y) var(--tlp-mm-pad-x) var(--tlp-mm-pad-bottom);
	/* Columns hug their content instead of stretching to the tallest one, so
	   the divider is exactly as tall as the statement beside it, as in the
	   design — not the full height of the link list. */
	align-items: start;
}

.tlp-mm-panel--single .tlp-mm-panel__inner {
	grid-template-columns: minmax(0, 1fr);
}

/* -----------------------------------------------------------------------------
   Left column — heading + links
   -------------------------------------------------------------------------- */

.tlp-mm-heading {
	margin: 0 0 8px;
	padding: 0;
	font-size: 20px;
	line-height: 26px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: uppercase;
	color: var(--tlp-mm-heading-color);
}

/* The heading can carry a link (Menu Column -> Heading link). It keeps the
   heading's own type and colour and borrows the link rows' sliding underline,
   so it reads as the section's own destination rather than a stray link. */
.tlp-mm-heading__link {
	display: inline-block;
	color: inherit;
	font: inherit;
	text-decoration: none;
	transition: color .22s ease;
}

.tlp-mm-heading__text {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1.5px;
	transition: background-size .34s var(--tlp-mm-ease);
	padding-bottom: 2px;
}

.tlp-mm-heading__link:hover,
.tlp-mm-heading__link:focus-visible {
	color: var(--tlp-mm-link-hover);
}

.tlp-mm-heading__link:hover .tlp-mm-heading__text,
.tlp-mm-heading__link:focus-visible .tlp-mm-heading__text {
	background-size: 100% 1.5px;
}

.tlp-mm-heading__link:focus-visible {
	outline: 2px solid var(--tlp-mm-blue);
	outline-offset: 4px;
	border-radius: 2px;
}

.tlp-mm-links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tlp-mm-links__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tlp-mm-link {
	display: block;
	position: relative;
	padding: 6px 0;
	font-size: 16px;
	line-height: 22px;
	/* The label goes semi-bold on hover, which is ~1% wider. Pinning it to a
	   single line means the row height can never change, so nothing reflows —
	   and unlike reserving the bold width, it leaves the column exactly as
	   wide as the design's. The extra pixels grow into the gutter. */
	white-space: nowrap;
	font-weight: 400;
	color: var(--tlp-mm-link-color);
	text-decoration: none;
	transition: color .22s ease;
}

.tlp-mm-link__text {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size .34s var(--tlp-mm-ease);
	padding-bottom: 2px;
}

.tlp-mm-link:hover,
.tlp-mm-link:focus-visible {
	color: var(--tlp-mm-link-hover);
	font-weight: var(--tlp-mm-link-hover-weight);
}

.tlp-mm-link:hover .tlp-mm-link__text,
.tlp-mm-link:focus-visible .tlp-mm-link__text {
	background-size: 100% 1px;
}

.tlp-mm-link:focus-visible {
	outline: 2px solid var(--tlp-mm-blue);
	outline-offset: 4px;
	border-radius: 2px;
}

/* -----------------------------------------------------------------------------
   Right column — statement
   -------------------------------------------------------------------------- */

.tlp-mm-col--statement {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-left: var(--tlp-mm-gutter);
	border-left: var(--tlp-mm-hairline);
}

.tlp-mm-statement {
	margin: 0;
	padding: 0;
	font-family: var(--tlp-mm-font-display);
	font-size: 22px;
	line-height: 28px;
	font-weight: 600;
	letter-spacing: normal;
	color: var(--tlp-mm-blue);
}

/* The gradient runs across the whole block, so each line picks up its own slice
   of blue → red exactly like the design. */
.tlp-mm-statement--gradient {
	background-image: linear-gradient(90deg, #1e59d0 0%, #f7183a 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.tlp-mm-statement--gradient {
		color: var(--tlp-mm-blue);
		-webkit-text-fill-color: currentColor;
	}
}

.tlp-mm-statement--solid {
	color: var(--tlp-mm-heading-color);
}

.tlp-mm-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
	padding: 13px 24px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: #fff !important;
	text-decoration: none;
	background: var(--tlp-mm-accent);
	border-radius: 3px;
	transition: background-color .3s ease, transform .3s var(--tlp-mm-ease);
}

.tlp-mm-cta:hover {
	background: #000;
	color: #fff !important;
}

.tlp-mm-cta__icon {
	transition: transform .3s var(--tlp-mm-ease);
}

.tlp-mm-cta:hover .tlp-mm-cta__icon {
	transform: translateX(3px);
}

/* -----------------------------------------------------------------------------
   Entrance choreography
   -------------------------------------------------------------------------- */

@keyframes tlp-mm-rise {
	from {
		opacity: 0;
		transform: translate3d(0, 8px, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.tlp-mm-panel.is-open .tlp-mm-heading,
.tlp-mm-panel.is-open .tlp-mm-links__item,
.tlp-mm-panel.is-open .tlp-mm-col--statement > * {
	animation: tlp-mm-rise .44s var(--tlp-mm-ease) both;
}

.tlp-mm-panel.is-open .tlp-mm-heading {
	animation-delay: .04s;
}

.tlp-mm-panel.is-open .tlp-mm-links__item {
	animation-delay: calc(var(--tlp-mm-i, 0) * 26ms + 70ms);
}

.tlp-mm-panel.is-open .tlp-mm-col--statement > * {
	animation-delay: .1s;
}

/* -----------------------------------------------------------------------------
   Mobile — the panel becomes an accordion inside Divi's mobile menu
   -------------------------------------------------------------------------- */

.et_mobile_menu .tlp-mm-item {
	position: relative;
}

.tlp-mm-mobile-toggle {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Matches the mobile row height, so the whole right-hand end of the row is
	   a tap target rather than a small icon. */
	width: 60px;
	height: 58px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.tlp-mm-mobile-toggle::after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 1.8px solid currentColor;
	border-bottom: 1.8px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .3s var(--tlp-mm-ease);
	opacity: .6;
}

.tlp-mm-mobile-toggle[aria-expanded="true"]::after {
	transform: translateY(2px) rotate(-135deg);
	opacity: 1;
}

.tlp-mm-mobile {
	overflow: hidden;
	max-height: 0;
	transition: max-height .38s var(--tlp-mm-ease);
	font-family: var(--tlp-mm-font);
}

.tlp-mm-mobile__pad {
	padding: 0 24px 20px;
}

.tlp-mm-mobile .tlp-mm-heading {
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #8b8f96;
	margin-bottom: 4px;
}

/* Inside .et_mobile_menu the heading anchor matches Divi's `ul li a` rule, so
   it needs the same class weight the link rows below use to win it back. */
.tlp-mm-mobile p.tlp-mm-heading a.tlp-mm-heading__link {
	display: inline-block;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: inherit;
	border: 0;
	background: none;
	opacity: 1;
}

.tlp-mm-mobile p.tlp-mm-heading a.tlp-mm-heading__link:hover,
.tlp-mm-mobile p.tlp-mm-heading a.tlp-mm-heading__link:focus {
	color: var(--tlp-mm-link-hover);
	opacity: 1;
	background: none;
}

.tlp-mm-mobile .tlp-mm-heading__text {
	background-image: none;
}

/* Divi indents nested lists in the mobile menu with
   `.et_pb_menu .et_mobile_menu li ul { padding-left: 10px }`, which pushed the
   links 10px past the item's own label. Four classes to outrank it, so the
   links, the heading and the statement all share one left edge. */
.et-l--header .et_mobile_menu .tlp-mm-mobile ul.tlp-mm-links,
.et-l--header .et_mobile_menu .tlp-mm-mobile .tlp-mm-links__item,
.tlp-mm-mobile .tlp-mm-links,
.tlp-mm-mobile .tlp-mm-links__item {
	padding-left: 0;
	margin-left: 0;
}

/* Divi styles mobile menu links with a module-specific selector
   (.et_pb_menu_0_tb_header.et_pb_menu ul li a), so these need the same weight
   to win — hence the longer selectors rather than !important. */
.tlp-mm-mobile ul.tlp-mm-links li.tlp-mm-links__item a.tlp-mm-link {
	display: block;
	padding: 9px 0;
	font-size: 15px;
	line-height: 1.45;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	white-space: normal;
	color: var(--tlp-mm-link-color);
	border: 0;
	background: none;
	opacity: 1;
}

.tlp-mm-mobile ul.tlp-mm-links li.tlp-mm-links__item a.tlp-mm-link:hover,
.tlp-mm-mobile ul.tlp-mm-links li.tlp-mm-links__item a.tlp-mm-link:focus {
	color: var(--tlp-mm-link-hover);
	font-weight: var(--tlp-mm-link-hover-weight);
	opacity: 1;
	background: none;
}

.tlp-mm-mobile .tlp-mm-link__text {
	background-image: none;
}

.tlp-mm-mobile .tlp-mm-statement {
	font-size: 17px;
	line-height: 1.32;
}

.tlp-mm-mobile .tlp-mm-cta {
	margin-top: 16px;
}

@media (max-width: 980px) {
	#tlp-mm-root .tlp-mm-panel,
	.tlp-mm-item > .tlp-mm-panel {
		display: none !important;
	}

	.tlp-mm-item--caret > a::after {
		display: none;
	}
}

/* -----------------------------------------------------------------------------
   Narrow desktop fallback
   -------------------------------------------------------------------------- */

@media (min-width: 981px) and (max-width: 1180px) {
	.tlp-mm-panel__inner {
		padding: 24px 34px 20px;
	}

	.tlp-mm-statement {
		font-size: 20px;
		line-height: 26px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tlp-mm-panel,
	.tlp-mm-link,
	.tlp-mm-link__text,
	.tlp-mm-heading__link,
	.tlp-mm-heading__text,
	.tlp-mm-cta,
	.tlp-mm-mobile {
		transition-duration: .01ms !important;
	}

	.tlp-mm-panel.is-open .tlp-mm-heading,
	.tlp-mm-panel.is-open .tlp-mm-links__item,
	.tlp-mm-panel.is-open .tlp-mm-col--statement > * {
		animation: none !important;
	}
}

/* Stacked columns inside the mobile accordion. */
.tlp-mm-mobile .tlp-mm-col--statement {
	border-left: 0;
	padding-left: 0;
	margin-top: 16px;
}

/* =============================================================================
   Layout: Company — link list + stats table

   Measured off the design at 1.344 image px per CSS px. The table bleeds to the
   card's top, right and bottom edges, so the panel carries no padding of its
   own here — the left column supplies its own, and the rows set the height.
   ========================================================================== */

.tlp-mm-panel--company .tlp-mm-panel__inner {
	grid-template-columns: minmax(0, 0.858fr) minmax(0, 1fr);
	column-gap: 0;
	padding: 0;
	align-items: stretch;
}

.tlp-mm-panel--company .tlp-mm-col--links {
	padding: var(--tlp-mm-pad-y) 24px var(--tlp-mm-pad-bottom) var(--tlp-mm-pad-x);
}

/* This list sits tighter than the one in the products layout. */
.tlp-mm-panel--company .tlp-mm-heading {
	margin-bottom: 12px;
}

.tlp-mm-panel--company .tlp-mm-link {
	padding: 3.4px 0;
}

/* Stats table ------------------------------------------------------------ */

.tlp-mm-stats {
	margin: 0;
	padding: 0;
	border-left: var(--tlp-mm-hairline);
}

.tlp-mm-stat {
	display: grid;
	grid-template-columns: 186px minmax(0, 1fr);
	align-items: stretch;
	/* The divider between the cells starts here, 24px below the row's top, and
	   runs to the row's bottom edge — measured consistently across all four
	   rows. Putting the row's top padding here and the rest on the cells is
	   what produces that: the cells stretch from 24px down to the row bottom,
	   so the border on the description cell spans exactly that. */
	padding-top: 24px;
}

.tlp-mm-stat + .tlp-mm-stat {
	border-top: var(--tlp-mm-hairline);
}

.tlp-mm-stat__figure {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0 12px 11px 22px;
	font-family: var(--tlp-mm-font-display);
	font-size: 26px;
	line-height: 30px;
	font-weight: 800;
	letter-spacing: normal;
	color: var(--tlp-mm-blue);
}

/* The gradient runs blue -> red across each figure individually, so the box it
   paints into has to hug the glyphs rather than fill the cell. Sampled off the
   design: every figure ends on #F7183A whatever its length, which only happens
   if each one gets the whole gradient. An inline-block span does that, and
   keeps desktop and the mobile accordion identical for free. */
.tlp-mm-stat__value {
	display: inline-block;
	background-image: linear-gradient(90deg, #1e59d0 0%, #f7183a 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.tlp-mm-stat__value {
		color: var(--tlp-mm-blue);
		-webkit-text-fill-color: currentColor;
	}
}

/* Top-aligned, not centred: the description's first line sits on the row's
   24px top padding, while the figure centres against it. */
.tlp-mm-stat__text {
	margin: 0;
	padding: 0 20px 11px 12px;
	font-size: 14px;
	line-height: 18px;
	font-weight: 400;
	color: #000;
	border-left: var(--tlp-mm-hairline);
}

.tlp-mm-panel.is-open .tlp-mm-stat {
	animation: tlp-mm-rise .44s var(--tlp-mm-ease) both;
	animation-delay: calc(var(--tlp-mm-i, 0) * 34ms + 70ms);
}

/* Mobile: the table stacks under the links. */
.tlp-mm-mobile .tlp-mm-stats {
	border-left: 0;
	margin-top: 12px;
}

.tlp-mm-mobile .tlp-mm-stat {
	grid-template-columns: minmax(0, 1fr);
}

.tlp-mm-mobile .tlp-mm-stat {
	padding-top: 0;
}

.tlp-mm-mobile .tlp-mm-stat__figure {
	padding: 12px 0 0;
	font-size: 22px;
}

.tlp-mm-mobile .tlp-mm-stat__text {
	padding: 2px 0 12px;
	border-left: 0;
}