/*
 * LMNTRIX site chrome — header + footer, no Elementor.
 *
 * Redesigned to match the new homepage (Elementor page 13519): near-black
 * ground, teal accent, Outfit for display type and Hanken Grotesk for UI,
 * square-cornered buttons with wide letter-spacing. Token values are measured
 * from that page, not invented.
 *
 * Two structural notes that are easy to undo by accident:
 *
 * 1. Every selector that sets a colour is scoped by its root block
 *    (.lmx-header / .lmx-drawer / .lmx-foot / .lmx-panel). Elementor's global
 *    kit styles links as `.elementor-kit-6 a` — specificity (0,1,1) — which
 *    beats a bare single-class rule and turns the nav navy on a dark ground.
 *    The extra ancestor lifts these to (0,2,x).
 *
 * 2. This file must never define --lmx-header-h or style .lmx-btn. The homepage
 *    owns both names: its script writes --lmx-header-h onto <html> after
 *    measuring the real header, and it ships bare .lmx-btn rules with
 *    !important for its hero buttons. Chrome uses --lmx-chrome-* and .lmx-cta.
 */

/*
 * What is left of the parent theme's main.css (2026-09-30).
 *
 * main.css (865 KB) is no longer loaded on our templates: it blocked the
 * first paint and was needed for exactly one rule that the forms and filters
 * leaned on — phlox-pro/css/main.css:6969
 * label { display:block; margin-bottom:1em; font-size:1.1em; color:#3D3D3D }.
 * It is repeated here so that label spacing and size stay as they were; the
 * blocks' own rules come later and override it, exactly as before.
 */
label {
	display: block;
	margin-bottom: 1em;
	font-size: 1.1em;
	color: #3D3D3D;
}

:root {
	/* ground */
	--lmx-bg: #111111;
	--lmx-panel-bg: #181818;

	/* accent — the homepage teal */
	--lmx-teal: #52C7C6;
	--lmx-teal-hi: #83DAD9;
	--lmx-on-teal: #04211F;

	/* type colours */
	--lmx-text: rgba(255, 255, 255, .86);
	--lmx-dim: rgba(255, 255, 255, .72);
	--lmx-muted: rgba(255, 255, 255, .55);
	--lmx-line: rgba(255, 255, 255, .10);
	--lmx-line-soft: rgba(255, 255, 255, .06);

	/* faces */
	--lmx-display: 'Outfit', 'Poppins', sans-serif;
	--lmx-font: 'Hanken Grotesk', Helvetica, Arial, sans-serif;

	/* metrics */
	--lmx-chrome-h: 68px;
	--lmx-chrome-tier-h: 38px;
	--lmx-shell: 1560px;
	--lmx-shell-foot: 1560px;
	--lmx-gutter: 40px;
}

/* Letter spacing of the header, the drawer, the footer and the modals.

   Before Elementor was removed it came from the global kit (`.elementor-kit-6`
   on <body>: `letter-spacing: 2%`), and the whole chrome inherited those 2% —
   the menu items were laid out with them. Without Elementor the value
   disappeared and the menu labels drifted, together with the line height the
   kit set as 110%, which was therefore inherited as ready-made pixels. We set
   the same thing by hand; 2% of the font size is .02em. */
.lmx-header,
.lmx-drawer,
.lmx-foot,
.lmx-modal {
	line-height: 110%;
	/* A percentage is resolved by each descendant against its own size, em once here.
	   The first value is a fallback for engines without percentage support. */
	letter-spacing: .02em;
	letter-spacing: 2%;
}

.lmx-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* external-link glyph, drawn rather than pulled from an icon font */
.lmx-extlink {
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 6px;
	border: 1px solid currentColor;
	border-left-width: 0;
	border-bottom-width: 0;
	transform: rotate(45deg);
	transform-origin: center;
	opacity: .7;
	flex: 0 0 auto;
	align-self: center;
}

/* ================================================================= header */

.lmx-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 9999;
	background: var(--lmx-bg);
	font-family: var(--lmx-font);
	border-bottom: 1px solid var(--lmx-line);
}

.lmx-header__inner {
	display: flex;
	align-items: center;
	gap: 28px;
	width: 100%;
	max-width: var(--lmx-shell);
	margin: 0 auto;
	padding: 0 var(--lmx-gutter);
	box-sizing: border-box;
}

.lmx-header__tier--main .lmx-header__inner {
	min-height: var(--lmx-chrome-h);
}

/*
 * The two tiers still read as one header — same family, one hairline between
 * them — but the strip is lifted off the brand row by a barely-there teal cast
 * (#131A1A over #111) and bracketed by two short teal marks at the shell edges.
 * Enough to register as its own band without turning into a second header.
 */
.lmx-header__tier--products {
	background: #131A1A;
	border-bottom: 1px solid var(--lmx-line-soft);
}

/*
 * Top row: the menu centred, the portal links on the right (2026-10-01).
 *
 * A 1fr auto 1fr grid instead of justify-content:center. The empty first
 * column and the links column are equally flexible, so the menu sits exactly
 * where it sat before the links appeared: nothing shifts and nothing is cut.
 * Free space measured to the right of the menu: 195px at 1025, 233 at 1100,
 * 323 at 1280, 335 at 1366, 372 at 1440 and 431 from 1600 up; the links need
 * about 255px, so from 1280 they fit next to the centred menu, and below that
 * the row switches to “menu left, links right” (media query further down).
 */
.lmx-header__tier--products .lmx-header__inner {
	min-height: var(--lmx-chrome-tier-h);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	column-gap: 16px;
	justify-content: initial;
}

.lmx-header__tier-spacer {
	display: block;
}

.lmx-logins {
	display: flex;
	align-items: center;
	justify-self: end;
	gap: 10px;
	min-width: 0;
}

/* Typography exactly as the items of this row (.lmx-nav--secondary). */
.lmx-logins__link {
	display: inline-flex;
	align-items: center;
	padding: 11px 0;
	color: var(--lmx-muted);
	font: 500 11px/1 var(--lmx-font);
	text-transform: uppercase;
	letter-spacing: .09em;
	text-decoration: none;
	white-space: nowrap;
	transition: color .18s ease;
}

.lmx-logins__link:hover,
.lmx-logins__link:focus-visible {
	color: var(--lmx-teal);
}

/* A thin separator in the site's separator colour. */
.lmx-logins__sep {
	display: block;
	width: 1px;
	height: 12px;
	background: var(--lmx-line);
	flex: 0 0 auto;
}

/*
 * Vertical centring of the menus.
 *
 * The <nav> is a stretched flex item, so it inherits the tier's full height and
 * the <ul> inside it was inheriting that height too — leaving the items pinned
 * to the top while the logo and buttons (direct flex children) sat centred.
 * Making the nav a flex box with centred items stops the list stretching.
 */
.lmx-header .lmx-nav {
	display: flex;
	align-items: center;
}

.lmx-header__nav {
	align-items: center;
}

.lmx-header__logo {
	display: block;
	flex: 0 0 auto;
	line-height: 0;
}

.lmx-header__logo img {
	display: block;
	width: auto;
	height: 38px;
	max-width: 100%;
}

.lmx-header__nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	min-width: 0;
}

.lmx-header__actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
}

/* ------------------------------------------------------------------- nav */

.lmx-nav__list {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * The theme ships a bare `li { margin-bottom: 1em }`. Inside these flex lists
 * that 17px rides along as part of each item's outer box, so the box already
 * filled the row and `align-items: center` had nothing left to centre — the
 * labels sat pinned to the top while the logo and buttons looked fine. Every
 * list in the chrome resets it.
 */
.lmx-nav__list li,
.lmx-drawer__list li,
.lmx-foot__links li,
.lmx-foot__legal li,
.lmx-socials li {
	margin: 0;
}

.lmx-nav__item {
	position: relative;
	display: flex;
	align-items: center;
}

/* An item with a dropdown but no page of its own is printed as a <button> —
   hence the button defaults reset; for an <a> they are harmless. */
.lmx-header .lmx-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	border: 0;
	background: none;
	color: var(--lmx-text);
	font: inherit;
	letter-spacing: inherit;
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: color .18s ease;
}
.lmx-header button.lmx-nav__link {
	appearance: none;
	-webkit-appearance: none;
}

/* brand row — the loud one */
.lmx-header .lmx-nav--primary .lmx-nav__link {
	padding: 22px 15px;
	color: rgba(255, 255, 255, .92);
	font: 400 16px/1 var(--lmx-font);
}

/* product strip — same ground, deliberately quieter and tighter */
.lmx-header .lmx-nav--secondary .lmx-nav__link {
	padding: 11px 14px;
	color: var(--lmx-muted);
	font: 500 11px/1 var(--lmx-font);
	text-transform: uppercase;
	letter-spacing: .09em;
}

.lmx-header .lmx-nav__item:hover > .lmx-nav__link,
.lmx-header .lmx-nav__link:focus-visible,
.lmx-header .lmx-nav__item.is-open > .lmx-nav__link {
	color: var(--lmx-teal);
}

/*
 * Keyboard focus is shown by an outline, not by colour alone.
 *
 * Focus used to only repaint the item teal — the same colour as hover and the
 * same colour that marks the current page. Someone moving by keyboard could
 * not tell where they were (audit 2026-09-22: not a single link in the
 * header, the panels or the footer had a visible focus ring).
 */
.lmx-header .lmx-nav__link:focus-visible,
.lmx-header .lmx-nav__toggle:focus-visible,
.lmx-header a:focus-visible,
.lmx-header button:focus-visible,
.lmx-panel a:focus-visible,
.lmx-panel .lmx-panel__item:focus-visible,
.lmx-drawer a:focus-visible,
.lmx-drawer button:focus-visible,
.lmx-foot a:focus-visible,
.lmx-foot button:focus-visible {
	outline: 2px solid var(--lmx-teal);
	outline-offset: 3px;
	border-radius: 2px;
}

.lmx-header .lmx-nav__item.is-current > .lmx-nav__link, .lmx-header .lmx-nav__link[aria-current="page"] {
	color: var(--lmx-teal);
}

/* underline that grows from the centre on hover — tier 2 only */
.lmx-nav--secondary .lmx-nav__item::after {
	content: '';
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 5px;
	height: 1px;
	background: var(--lmx-teal);
	transform: scaleX(0);
	transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}

.lmx-nav--secondary .lmx-nav__item:hover::after,
.lmx-nav--secondary .lmx-nav__item.is-open::after {
	transform: scaleX(1);
}

.lmx-caret {
	width: 0;
	height: 0;
	border-left: 3.5px solid transparent;
	border-right: 3.5px solid transparent;
	border-top: 4.5px solid currentColor;
	opacity: .8;
	transition: transform .18s ease;
}

.lmx-nav__item:hover .lmx-caret,
.lmx-nav__item.is-open .lmx-caret {
	transform: rotate(180deg);
}

/*
 * An item without a page of its own (Knowledge Hub): the arrow lives inside
 * its button and therefore used to sit closer to the text and further right
 * than its neighbours. The cell now repeats the geometry of .lmx-nav__toggle —
 * the same 22px and the same alignment.
 */
.lmx-header .lmx-nav__caretslot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Measured against the neighbours: the arrow sits 2px from the label and 12px from the item edge. */
.lmx-header .lmx-nav--primary .lmx-nav__link--nourl {
	gap: 2px;
	padding-right: 12px;
}

/* The arrow is a button next to the title link (2026-09-15): its own target
   for mouse and keyboard, it opens the panel; the title leads to the page. */
.lmx-header .lmx-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	align-self: stretch;
	margin: 0 0 0 -10px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}
.lmx-header .lmx-nav--primary .lmx-nav__link + .lmx-nav__toggle {
	margin-right: 4px;
	color: rgba(255, 255, 255, .92);
}
.lmx-header .lmx-nav--secondary .lmx-nav__link + .lmx-nav__toggle {
	margin-right: 2px;
	color: var(--lmx-muted);
}
/* For an item with a separate arrow the right padding lives on the arrow, not on the link. */
.lmx-header .lmx-nav__item--has-panel > a.lmx-nav__link {
	padding-right: 4px;
}
.lmx-header .lmx-nav__item:hover > .lmx-nav__toggle,
.lmx-header .lmx-nav__toggle:focus-visible,
.lmx-header .lmx-nav__item.is-open > .lmx-nav__toggle {
	color: var(--lmx-teal);
}
.lmx-header .lmx-nav__toggle:focus-visible {
	outline: 2px solid var(--lmx-teal);
	outline-offset: -2px;
}

/* ---------------------------------------------------------- mega panels */

.lmx-panel {
	position: absolute;
	top: 100%;
	z-index: 20;
	width: var(--lmx-panel-w, 600px);
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - 130px);
	overflow-y: auto;
	overscroll-behavior: contain;
	/* Scrolling is rarely needed (very short windows), but then the bar is ours, not the system one. */
	scrollbar-width: thin;
	scrollbar-color: rgba(82, 199, 198, .45) transparent;
	padding: 22px 24px 24px;
	box-sizing: border-box;
	background: var(--lmx-panel-bg);
	border: 1px solid var(--lmx-line);
	border-top: 2px solid var(--lmx-teal);
	box-shadow: 0 28px 60px rgba(0, 0, 0, .55);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .18s ease-out, transform .18s ease-out, visibility .18s;
}

.lmx-panel::-webkit-scrollbar {
	width: 8px;
}

.lmx-panel::-webkit-scrollbar-track {
	background: transparent;
}

.lmx-panel::-webkit-scrollbar-thumb {
	background: rgba(82, 199, 198, .35);
	border-radius: 8px;
}

.lmx-panel::-webkit-scrollbar-thumb:hover {
	background: rgba(82, 199, 198, .55);
}

.lmx-panel--align-item { left: 0; }
.lmx-panel--align-start { left: 0; }
.lmx-panel--align-end { left: auto; right: 0; }

.lmx-nav__item.is-open > .lmx-panel,
.lmx-nav__item:hover > .lmx-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.lmx-panel__title {
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--lmx-line);
}

.lmx-panel .lmx-panel__title a,
.lmx-panel .lmx-panel__title span {
	color: #fff;
	font: 300 22px/1.2 var(--lmx-display);
	letter-spacing: .01em;
	text-decoration: none;
}

.lmx-panel .lmx-panel__title a:hover {
	color: var(--lmx-teal);
}

.lmx-panel__cols {
	display: grid;
	grid-template-columns: repeat(var(--lmx-panel-cols, 1), minmax(0, 1fr));
	gap: 26px;
}

.lmx-panel[data-cols="1"] { --lmx-panel-cols: 1; }
.lmx-panel[data-cols="2"] { --lmx-panel-cols: 2; }
.lmx-panel[data-cols="3"] { --lmx-panel-cols: 3; }

.lmx-panel__heading {
	margin-bottom: 12px;
}

.lmx-panel .lmx-panel__heading a,
.lmx-panel .lmx-panel__heading span {
	color: var(--lmx-teal);
	font: 600 11px/1.3 var(--lmx-font);
	text-transform: uppercase;
	letter-spacing: .12em;
	text-decoration: none;
}

.lmx-panel .lmx-panel__heading a:hover {
	color: var(--lmx-teal-hi);
}

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

.lmx-panel__item {
	display: block;
	padding: 7px 0;
	text-decoration: none;
	border-left: 1px solid transparent;
	padding-left: 0;
	transition: border-color .18s ease, padding-left .18s ease;
}

.lmx-panel .lmx-panel__item-label {
	display: block;
	color: var(--lmx-text);
	font: 400 14.5px/1.35 var(--lmx-font);
	transition: color .18s ease;
}

.lmx-panel .lmx-panel__item-desc {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	margin-top: 3px;
	color: var(--lmx-muted);
	font: 400 12px/1.4 var(--lmx-font);
}

/*
 * Laptops: the panel of the longest menu (MXDR, twelve services) has to fit
 * without scrolling. Padding and gaps are tightened, font sizes untouched.
 */
@media (max-height: 860px) {
	.lmx-panel {
		max-height: calc(100vh - 110px);
		padding: 16px 20px 18px;
	}

	.lmx-panel__title {
		margin-bottom: 12px;
		padding-bottom: 9px;
	}

	.lmx-panel .lmx-panel__title a,
	.lmx-panel .lmx-panel__title span {
		font-size: 19px;
	}

	.lmx-panel__cols {
		gap: 20px;
	}

	.lmx-panel__item {
		padding: 5px 0;
	}

	.lmx-panel__heading {
		margin-bottom: 9px;
	}
}

.lmx-panel .lmx-panel__item:hover {
	border-left-color: var(--lmx-teal);
	padding-left: 10px;
}

.lmx-panel .lmx-panel__item:hover .lmx-panel__item-label {
	color: var(--lmx-teal);
}

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

/* .lmx-cta, never .lmx-btn — see the file header.
   This is now a <button type="button" data-lmx-modal>, not an <a href="#">:
   browser padding and border are reset so the button is drawn exactly as the
   link used to be. */
.lmx-cta {
	margin: 0;
	font-family: var(--lmx-font);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 22px;
	box-sizing: border-box;
	border-radius: 0;
	font: 600 12px/1 var(--lmx-font);
	text-transform: uppercase;
	letter-spacing: .12em;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .22s ease, color .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}

.lmx-cta.lmx-cta--outline {
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .5);
	background: transparent;
}

/* Hover of the outline button: a teal border and a light fill. The lift, the
   glow and the sheen come from the shared .lmx-btn-fx component
   (assets/css/shared/buttons.css). */
.lmx-cta.lmx-cta--outline:hover {
	color: #fff;
	background: rgba(82, 199, 198, .12);
	border-color: var(--lmx-teal);
}

.lmx-cta.lmx-cta--solid {
	color: var(--lmx-on-teal);
	background: var(--lmx-teal);
	border: 1px solid var(--lmx-teal);
}

.lmx-cta.lmx-cta--solid:hover {
	background: var(--lmx-teal-hi);
	border-color: var(--lmx-teal-hi);
}

/* --------------------------------------------------------------- socials */

.lmx-socials {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lmx-header .lmx-social,
.lmx-drawer .lmx-social,
.lmx-foot .lmx-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--lmx-dim);
	background: transparent;
	border: 1px solid var(--lmx-line);
	transition: color .18s ease, border-color .18s ease;
}

.lmx-header .lmx-social:hover,
.lmx-drawer .lmx-social:hover,
.lmx-foot .lmx-social:hover {
	color: var(--lmx-teal);
	border-color: var(--lmx-teal);
}

.lmx-social svg {
	width: 13px;
	height: 13px;
	fill: currentColor;
}

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

.lmx-header__mobile {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 18px;
	background: var(--lmx-bg);
}

.lmx-header__mobile .lmx-header__logo img {
	width: auto;
	height: 30px;
	object-fit: contain;
}

.lmx-header__mobile-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

/*
 * Header icon button: the magnifier on desktop, the magnifier and the burger
 * on a phone (2026-09-30).
 *
 * There were three differences from the FREE TRIAL and GET QUOTE buttons next
 * to it:
 *
 *   — the parent theme gives every <button> margin-bottom .8125em; .lmx-cta
 *     resets it, this one did not, and with align-items:center the extra
 *     bottom margin lifted the magnifier 7px above the centre of the buttons
 *     (measured: magnifier centre 66px, FREE TRIAL centre 73px);
 *   — the border was var(--lmx-line) = rgba(255,255,255,.1), five times
 *     paler than the FREE TRIAL border (rgba(255,255,255,.5));
 *   — hover painted the icon and the border teal, while FREE TRIAL has white
 *     text, a teal border and a light teal fill.
 *
 * The height matches .lmx-cta at every width: 40px, and 36px below 1280px
 * (the rule sits in the same media query where .lmx-cta drops to 36px). The
 * width equals the height, so the button is square. It does not shrink on a
 * phone: the 36px rule is scoped to .lmx-header__actions, while the mobile bar
 * has its own wrapper, .lmx-header__mobile-actions.
 */
.lmx-header .lmx-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	width: 40px;
	height: 40px;
	padding: 0;
	box-sizing: border-box;
	color: #fff;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .5);
	cursor: pointer;
	transition: color .22s ease, background-color .22s ease, border-color .22s ease;
}

.lmx-header .lmx-iconbtn:hover,
.lmx-header .lmx-iconbtn:focus-visible {
	color: #fff;
	background: rgba(82, 199, 198, .12);
	border-color: var(--lmx-teal);
}

.lmx-iconbtn svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
}

/* ================================================================ drawer */

.lmx-drawer {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(0, 0, 0, .6);
}

.lmx-drawer[hidden] {
	display: none;
}

.lmx-drawer__panel {
	position: absolute;
	inset: 0 0 0 auto;
	width: min(92vw, 420px);
	padding: 26px 22px 44px;
	box-sizing: border-box;
	overflow-y: auto;
	background: var(--lmx-bg);
	border-left: 1px solid var(--lmx-line);
	font-family: var(--lmx-font);
}

.lmx-drawer .lmx-drawer__close {
	position: absolute;
	top: 14px;
	right: 16px;
	width: 40px;
	height: 40px;
	color: #fff;
	font-size: 26px;
	line-height: 1;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.lmx-drawer .lmx-drawer__close:hover {
	color: var(--lmx-teal);
}

/* The caption of a group carries no rule of its own (2026-10-05): the last row
   of the previous list already ends with one, and the two together left an
   empty row with two lines between the groups. Now there is a single separator
   with the spacing of the rest of the drawer. */
.lmx-drawer .lmx-drawer__caption {
	margin: 28px 0 4px;
	padding-top: 0;
	color: var(--lmx-teal);
	font: 600 11px/1 var(--lmx-font);
	text-transform: uppercase;
	letter-spacing: .16em;
	border-top: 0;
}

.lmx-drawer__list {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

/* the first caption clears the close button */
.lmx-drawer__caption:first-of-type {
	margin-top: 40px;
}

.lmx-drawer__item {
	border-bottom: 1px solid var(--lmx-line-soft);
}

.lmx-drawer .lmx-drawer__link,
.lmx-drawer .lmx-drawer__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	padding: 15px 0;
	color: var(--lmx-text);
	font: 400 16px/1.2 var(--lmx-font);
	text-align: left;
	text-decoration: none;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.lmx-drawer .lmx-drawer__link:hover,
.lmx-drawer .lmx-drawer__toggle:hover,
.lmx-drawer .lmx-drawer__toggle[aria-expanded="true"] {
	color: var(--lmx-teal);
}

/* A drawer item with a page of its own (2026-09-15): the title is a full-width
   link and the arrow is a 44px square button on the right that opens the
   sublist. */
.lmx-drawer__row {
	display: flex;
	align-items: stretch;
}
.lmx-drawer .lmx-drawer__link--parent {
	flex: 1 1 auto;
	min-width: 0;
}
.lmx-drawer .lmx-drawer__toggle--arrow {
	flex: 0 0 44px;
	width: 44px;
	min-height: 44px;
	justify-content: center;
	padding: 0;
	margin-right: -8px;
}
.lmx-drawer .lmx-drawer__toggle--arrow .lmx-caret {
	border-left-width: 5px;
	border-right-width: 5px;
	border-top-width: 6px;
}
.lmx-drawer .lmx-drawer__toggle[aria-expanded="true"] .lmx-caret {
	transform: rotate(180deg);
}

/*
 * An item without a page of its own: a row of the same height as the items
 * that have one, and an arrow in the same 44px square cell at the right edge
 * (bug 7).
 */
.lmx-drawer .lmx-drawer__toggle--nourl {
	/* The same row height as the other drawer items. */
	padding: 15px 0;
	min-height: 44px;
}

.lmx-drawer .lmx-drawer__caretslot {
	display: flex;
	flex: 0 0 44px;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	margin-right: -8px;
}

.lmx-drawer .lmx-drawer__caretslot .lmx-caret {
	border-left-width: 5px;
	border-right-width: 5px;
	border-top-width: 6px;
}
.lmx-drawer .lmx-drawer__link--child-current {
	color: var(--lmx-teal);
}
.lmx-drawer__sub {
	padding: 2px 0 16px 14px;
	border-left: 1px solid var(--lmx-line);
	margin-bottom: 12px;
}

.lmx-drawer .lmx-drawer__subhead {
	display: block;
	margin: 14px 0 6px;
	color: var(--lmx-teal);
	/* 11px is the lower bound for small labels on a phone. */
	font: 600 11px/1.3 var(--lmx-font);
	text-transform: uppercase;
	letter-spacing: .13em;
	text-decoration: none;
}

.lmx-drawer .lmx-drawer__sublink {
	display: block;
	padding: 8px 0;
	color: var(--lmx-dim);
	font: 400 14.5px/1.35 var(--lmx-font);
	text-decoration: none;
}

.lmx-drawer .lmx-drawer__sublink:hover {
	color: var(--lmx-teal);
}

.lmx-drawer .lmx-drawer__sublink--lead {
	color: #fff;
	font-weight: 600;
}

.lmx-drawer .lmx-drawer__subdesc {
	display: block;
	margin-top: 2px;
	color: var(--lmx-muted);
	font: 400 12px/1.35 var(--lmx-font);
}

.lmx-drawer__actions {
	display: flex;
	gap: 10px;
	margin: 30px 0 22px;
}

.lmx-drawer__actions .lmx-cta {
	flex: 1 1 0;
	/* In the drawer the buttons are pressed with a finger: at least 44px tall. */
	height: 44px;
}

/* Drawer: the same two links in one row under the Free Trial / Get Quote buttons. */
.lmx-logins--drawer {
	justify-content: center;
	gap: 12px;
	margin: 14px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--lmx-line-soft);
}

.lmx-logins--drawer .lmx-logins__link {
	/* In the drawer the link is hit with a finger: the target is at least 44px, like the buttons. */
	min-height: 44px;
	padding: 0 6px;
	font-size: 12px;
	letter-spacing: .1em;
	color: #fff;
}

.lmx-logins--drawer .lmx-logins__sep {
	height: 14px;
}

/* ================================================================ footer */

.lmx-foot {
	background: var(--lmx-bg);
	border-top: 1px solid var(--lmx-line);
	font-family: var(--lmx-font);
}

.lmx-foot__inner {
	display: grid;
	/* brand + Platform (two link columns) + Services + Company + Knowledge Hub */
	grid-template-columns: 1.35fr 1.5fr 1fr 1fr 1fr;
	gap: 40px 32px;
	max-width: var(--lmx-shell-foot);
	margin: 0 auto;
	padding: 84px var(--lmx-gutter) 64px;
	box-sizing: border-box;
}

.lmx-foot__col {
	min-width: 0;
}

.lmx-foot__col--brand {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.lmx-foot__logo {
	display: block;
	line-height: 0;
}

/*
 * The footer mark is as tall as the mark in the header.
 *
 * The selector is .lmx-foot .lmx-foot__logo img rather than .lmx-foot__logo
 * img: the page frames carry a .lmx-home img / .lmx-ms img { height: auto }
 * rule (same specificity, file loaded later), and a footer inside such a frame
 * took its height from there — the mark stretched across the whole column,
 * 290x64 instead of 136x30. A third class raises the specificity without
 * !important.
 */
.lmx-foot .lmx-foot__logo img {
	display: block;
	width: auto;
	height: 30px;
	max-width: 100%;
}

.lmx-foot .lmx-foot__copy {
	margin: 0;
	color: var(--lmx-muted);
	font: 400 13px/1.5 var(--lmx-font);
}

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

.lmx-foot .lmx-foot__legal a,
.lmx-foot .lmx-foot__legal .lmx-foot__legal-btn {
	display: block;
	padding: 5px 0;
	color: var(--lmx-dim);
	font: 400 14px/1.5 var(--lmx-font);
	text-decoration: none;
	transition: color .18s ease;
}

/* The “Cookie settings” item is a button: the browser border, background and
   padding are removed so that it does not differ from the links next to it. */
.lmx-foot .lmx-foot__legal .lmx-foot__legal-btn {
	margin: 0;
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
	width: auto;
}

.lmx-foot .lmx-foot__head {
	margin: 0 0 16px;
	color: var(--lmx-teal);
	font: 600 11px/1.2 var(--lmx-font);
	text-transform: uppercase;
	letter-spacing: .14em;
}

.lmx-foot .lmx-foot__head a {
	color: inherit;
	text-decoration: none;
}

.lmx-foot .lmx-foot__head a:hover {
	color: var(--lmx-teal-hi);
}

.lmx-foot__head--office {
	margin-bottom: 14px;
}

/* the old teal rule under each office name */
.lmx-foot__divider {
	width: 22px;
	height: 1px;
	margin: -10px 0 14px;
	background: var(--lmx-line);
}

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

.lmx-foot .lmx-foot__links a {
	display: inline-block;
	padding: 6px 0;
	color: var(--lmx-dim);
	font: 400 14px/1.5 var(--lmx-font);
	text-decoration: none;
	transition: color .18s ease;
}

.lmx-foot .lmx-foot__links a:hover,
.lmx-foot .lmx-foot__legal a:hover,
.lmx-foot .lmx-foot__legal .lmx-foot__legal-btn:hover,
.lmx-foot .lmx-foot__legal .lmx-foot__legal-btn:focus-visible {
	color: var(--lmx-teal);
}

/*
 * The long list (twelve MXDR services and the demo) runs in two text columns:
 * in a single column it would be twice as tall as its neighbours and would
 * drag the footer down.
 */
.lmx-foot__links--two {
	columns: 2;
	column-gap: 22px;
}

.lmx-foot__links--two li {
	break-inside: avoid;
}

/* Offices are a separate row under the navigation, three across on desktop. */
.lmx-foot__col--offices {
	grid-column: 1 / -1;
	padding-top: 36px;
	border-top: 1px solid var(--lmx-line);
}

.lmx-foot__offices {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lmx-foot__office {
	min-width: 0;
}

.lmx-foot__office .lmx-foot__addr:last-child {
	margin-bottom: 0;
}

.lmx-foot__addr {
	margin: 0 0 18px;
	color: var(--lmx-text);
	font: 400 13.5px/1.55 var(--lmx-font);
}

.lmx-foot .lmx-foot__addr a {
	color: inherit;
	text-decoration: none;
	transition: color .18s ease;
}

.lmx-foot .lmx-foot__addr a:hover {
	color: var(--lmx-teal);
}

/* The modal shell (.lmx-modal) and the forms live in assets/css/cta-forms.css:
   one component for every page, the markup is printed by inc/cta-forms.php. */
/* =========================================================== breakpoints */

/* wide laptops — pull the tiers in before anything can collide */
@media (max-width: 1440px) {
	:root {
		--lmx-gutter: 28px;
	}

	.lmx-header .lmx-nav--primary .lmx-nav__link {
		padding: 22px 11px;
		font-size: 14.5px;
	}

	.lmx-header .lmx-nav--secondary .lmx-nav__link {
		padding: 14px 12px;
		font-size: 11.5px;
		letter-spacing: .08em;
	}

	/* The portal links follow the size and tracking of this same row. */
	.lmx-logins__link {
		font-size: 11.5px;
		letter-spacing: .08em;
	}

	.lmx-nav--secondary .lmx-nav__item::after {
		left: 12px;
		right: 12px;
	}

	.lmx-header__inner {
		gap: 18px;
	}
}

/* narrow laptops — the tightest the two-tier layout goes */
@media (max-width: 1280px) {
	.lmx-header__logo img {
		height: 32px;
	}

	.lmx-header .lmx-nav--primary .lmx-nav__link {
		padding: 20px 8px;
		font-size: 13.5px;
	}

	.lmx-header .lmx-nav--secondary .lmx-nav__link {
		padding: 13px 9px;
		font-size: 11px;
		letter-spacing: .06em;
	}

	/*
	 * There is no longer room for both a centred menu and the links (only
	 * 167…205px are left to the right of the menu against the ~255px needed),
	 * so the row switches to two groups: the menu at the left edge, the portals
	 * at the right. The empty column is dropped, otherwise it would eat width.
	 */
	.lmx-header__tier--products .lmx-header__inner {
		grid-template-columns: auto auto;
		justify-content: space-between;
		column-gap: 12px;
	}

	.lmx-header__tier-spacer {
		display: none;
	}

	/* The size is not reduced: in two groups the row fits with room to spare
	   (at 1025 there are 86px between the menu and the links), and 11px is the
	   lower bound for small labels on this site. The tracking is taken from the
	   items of the row. */
	.lmx-logins {
		gap: 8px;
	}

	.lmx-logins__link {
		font-size: 11px;
		letter-spacing: .06em;
	}

	.lmx-nav--secondary .lmx-nav__item::after {
		left: 9px;
		right: 9px;
	}

	.lmx-cta {
		height: 36px;
		padding: 0 15px;
		font-size: 11px;
		letter-spacing: .09em;
	}

	/* The magnifier next to them keeps the same height and stays square. */
	.lmx-header__actions .lmx-iconbtn {
		width: 36px;
		height: 36px;
	}

	.lmx-header__actions .lmx-iconbtn svg {
		width: 16px;
		height: 16px;
	}

	.lmx-header__actions {
		gap: 8px;
	}

	.lmx-foot__inner {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 44px 32px;
	}

	.lmx-foot__offices {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/*
 * No breakpoint rule keeps the wide panels on screen: which ones overflow
 * depends on each panel's width and its item's position, so it changes with
 * every label and every viewport. chrome.js measures them instead and nudges
 * them with margin-left (margin, not transform — transform carries the
 * open/close animation).
 */

/* phones and small tablets — one bar plus the drawer */
@media (max-width: 1023px) {
	.lmx-header__tier--main .lmx-header__inner,
	.lmx-header__tier--products {
		display: none;
	}

	.lmx-header__mobile {
		display: flex;
	}

	.lmx-foot__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 38px 26px;
		padding: 56px 22px 48px;
	}

	.lmx-foot__col--brand {
		grid-column: 1 / -1;
	}

	.lmx-foot__offices {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 26px 24px;
	}

	.lmx-foot__col--offices {
		padding-top: 30px;
	}
}

@media (max-width: 600px) {
	.lmx-foot__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.lmx-foot__links--two {
		columns: 2;
		column-gap: 18px;
	}

	.lmx-foot__offices {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.lmx-drawer__actions {
		flex-direction: column;
	}

	/*
	 * flex-basis has to go back to auto here: the row layout above uses
	 * `flex: 1 1 0` to split the width evenly, but once the axis turns vertical
	 * that same basis zeroes the buttons' height and beats the `height` rule,
	 * collapsing them to the line box.
	 */
	.lmx-drawer__actions .lmx-cta {
		flex: 0 0 auto;
		width: 100%;
	}
}

/* =========================================== prefers-reduced-motion =======
 * Nothing is switched off “just in case”: only what actually moves is calmed
 * down — panels opening, the underline in the product row, the button lift
 * and the drawer sliding in. States (colour, visibility) stay as they are,
 * otherwise the menu would simply stop opening.
 * ====================================================================== */
@media (prefers-reduced-motion: reduce) {
	.lmx-header .lmx-nav__link,
	.lmx-panel,
	.lmx-caret,
	.lmx-cta,
	.lmx-panel .lmx-panel__item,
	.lmx-panel .lmx-panel__item-label,
	.lmx-header .lmx-social,
	.lmx-drawer .lmx-social,
	.lmx-foot .lmx-social,
	.lmx-header .lmx-iconbtn,
	.lmx-foot .lmx-foot__links a,
	.lmx-foot .lmx-foot__legal a,
	.lmx-foot .lmx-foot__legal .lmx-foot__legal-btn,
	.lmx-logins__link,
	.lmx-foot .lmx-foot__addr a,
	.lmx-nav--secondary .lmx-nav__item::after {
		transition: none;
	}
}

/* The current page in the mega menu and in the mobile drawer
   (aria-current="page"). The attribute is set by lmx_nav_is_current() on
   inner pages only — on the home page the header markup is unchanged. */
.lmx-header .lmx-panel__item[aria-current="page"] .lmx-panel__item-label,
.lmx-drawer .lmx-drawer__sublink[aria-current="page"], .lmx-drawer .lmx-drawer__link[aria-current="page"] {
	color: var(--lmx-teal);
}