/* ===========================================================================
   Services mega menu — the Services panel of Elementor header #2249.

   Loads on EVERY page (the header is not a page type), so it is kept small and
   scoped entirely under `.mm`.

   SPECIFICITY NOTE, learned the hard way in the footer build: Elementor writes
   --display / --flex-direction / --e-con-grid-template-columns onto `.e-con`
   (specificity 0,1,0) and reads them back with `display: var(--display)`. Every
   layout declaration here therefore uses a TWO-CLASS selector (0,2,0) so it wins
   outright rather than depending on stylesheet order. `flex-direction` and
   `display` are always stated explicitly, never left to Elementor's variables.

   Icon rules target :is(img,svg) so an icon may be an inline SVG or an <img>
   without changing size — `img` and `svg` are both type selectors, so the
   specificity is identical to the `img` rules these replaced.
   ======================================================================== */

.mm {
	--mm-accent: #0aa3d6;
	--mm-navy: #170d3d;
	--mm-body: #5a5a72;
	--mm-rule: rgba(23, 13, 61, .10);
	--mm-rail-w: 340px;
	--mm-gap: 44px;
}

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

/* The Mega Menu widget is set to full-width, so the panel wrapper is full-bleed
   and this gutter keeps the card off the viewport edges. */
.e-con.mm-panel {
	display: block;
	padding: 0 20px;
	margin: 0;
	background-color: transparent;
}

.e-con.mm {
	display: block;
	width: 100%;
	max-width: 1280px;
	margin-inline: auto;
	background-color: #fff;
	border-radius: 14px;
	box-shadow: 0 24px 60px rgba(23, 13, 61, .14);
	overflow: hidden;
}

.mm .mm__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--mm-rail-w);
	column-gap: var(--mm-gap);
	row-gap: 0;
	align-items: start;
	width: 100%;
	max-width: none;
	padding: 40px 36px 44px;
}

/* No rail (switched off, or empty): the grid takes the full width.

   Scoped per panel rather than to `.mm`, because BOTH mega menus sit in the DOM on every page —
   one shared `mm-no-rail` could not say which rail is off. The Services panel carries `svc-panel`
   and the Industries panel `im-panel`; both also carry `mm-panel`, so they share the card chrome,
   the rail and the CTA card wholesale. */
.mm-no-rail .svc-panel .mm__inner,
.im-no-rail .im-panel .mm__inner {
	grid-template-columns: minmax(0, 1fr);
}

.mm-no-rail .svc-panel .mm-rail,
.im-no-rail .im-panel .mm-rail {
	display: none;
}

/* The Industries panel re-points the shared accent token at its own, so every `.mm-*` rule picks it
   up with no per-panel duplication. Two classes (0,2,0) to beat `.mm`'s own default at 0,1,0. */
.im-panel .mm {
	--mm-accent: var(--im-accent, #0aa3d6);
}

/* --- service grid ------------------------------------------------------ */

.mm .mm-services {
	min-width: 0;
}

.mm .mm-services__grid {
	display: grid;
	column-gap: var(--mm-gap);
	row-gap: 52px;
	align-items: start;
}

.mm .mm-services__grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mm .mm-services__grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mm .mm-services__grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.mm .mm-col {
	min-width: 0;
}

/* --- column head ------------------------------------------------------- */

/* `min-height` reserves two lines and `flex-start` tops the content, so a label that
   wraps ("Marketplace & Ecommerce Growth") does not push its list below the lists in
   the same row. Deterministic across all six columns without relying on subgrid. */
.mm .mm-col__head {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-height: 46px;
	margin-bottom: 14px;
	text-decoration: none;
	color: var(--mm-navy);
}

.mm .mm-col__icon {
	flex: 0 0 auto;
	display: block;
	width: 26px;
	height: 26px;
	margin-top: 1px;
	color: var(--mm-accent);
	transition: transform .18s ease;
}

.mm .mm-col__icon :is(img, svg) {
	display: block;
	width: 26px;
	height: 26px;
	object-fit: contain;
}

.mm .mm-col__title {
	font-family: 'Heebo', sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--mm-navy);
	transition: color .18s ease;
}

.mm a.mm-col__head:hover .mm-col__title,
.mm a.mm-col__head:focus-visible .mm-col__title {
	color: var(--mm-accent);
}

.mm a.mm-col__head:hover .mm-col__icon {
	transform: translateY(-1px);
}

/* --- child links ------------------------------------------------------- */

.mm .mm-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	row-gap: 11px;
}

.mm .mm-links__item {
	margin: 0;
	padding: 0;
}

/* Grid, not flex: a wrapping label ("Marketplace Setup & Launch (Amazon, Ebay,
   Etsy)") keeps its chevron on the first line and its second line aligned to
   the text, not under the chevron. */
.mm .mm-links__item > a {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: 10px;
	font-family: 'Montserrat', sans-serif;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--mm-body);
	text-decoration: none;
	transition: color .18s ease;
}

/* The chevron: 29 of these render on every page, so it is two borders rather
   than an icon font or an inline SVG. */
.mm .mm-links__item > a::before {
	content: "";
	width: 6px;
	height: 6px;
	margin-top: .42em;
	border-top: 1.6px solid var(--mm-accent);
	border-right: 1.6px solid var(--mm-accent);
	transform: rotate(45deg);
	transition: transform .18s ease;
}

.mm .mm-links__item > a:hover,
.mm .mm-links__item > a:focus-visible {
	color: var(--mm-navy);
}

.mm .mm-links__item > a:hover::before {
	transform: rotate(45deg) translate(1.5px, -1.5px);
}

/* --- right rail -------------------------------------------------------- */

.mm .mm-rail {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	min-width: 0;
	padding: 0 0 0 var(--mm-gap);
	border-left: 1px solid var(--mm-rule);
}

.mm .mm-rail > * {
	width: 100%;
}

.mm .mm-rail__eyebrow .elementor-heading-title {
	font-family: 'Heebo', sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mm-accent);
	margin: 0 0 10px;
}

.mm .mm-rail__h .elementor-heading-title {
	font-family: 'Heebo', sans-serif;
	font-size: 27px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--mm-navy);
	margin: 0;
}

.mm .mm-rail__h--accent .elementor-heading-title {
	color: var(--mm-accent);
}

.mm .mm-rail__intro {
	margin-top: 14px;
}

.mm .mm-rail__intro,
.mm .mm-rail__intro p {
	font-family: 'Montserrat', sans-serif;
	font-size: 14.5px;
	line-height: 1.75;
	color: var(--mm-body);
}

.mm .mm-rail__intro p:last-child {
	margin-bottom: 0;
}

/* Elementor's Image widget centres by default; the rail is left-aligned. */
.mm .mm-rail__art {
	margin: 18px 0 0;
	text-align: left;
}

.mm .mm-rail__art :is(img, svg) {
	display: block;
	width: 100%;
	max-width: 280px;
	height: auto;
	/* WordPress stores no intrinsic dimensions for SVG, so reserve the box here
	   or the panel reflows the first time it opens. */
	aspect-ratio: 519 / 475;
}

/* The Industries illustration is a wider, shorter scene than the Services one, so it needs its own
   reserved box — otherwise the shared ratio letterboxes it and the panel jumps on first open. It
   also fills the rail rather than stopping at 280px: at 1.58:1 the shared cap left the scene too
   small to read its own detail. */
.im-panel .mm-rail__art :is(img, svg) {
	max-width: 100%;
	aspect-ratio: 605 / 384;
}

/* --- CTA card ---------------------------------------------------------- */

.mm .mm-cta {
	display: block;
	margin-top: 20px;
	padding: 22px;
	border-radius: 12px;
	background-color: var(--mm-navy);
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: 100% auto;
	overflow: hidden;
}

.mm-no-cta .svc-panel .mm-cta,
.im-no-cta .im-panel .mm-cta {
	display: none;
}

.mm .mm-cta__title .elementor-heading-title {
	font-family: 'Heebo', sans-serif;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
	margin: 0 0 6px;
}

.mm .mm-cta__text,
.mm .mm-cta__text p {
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .78);
}

.mm .mm-cta__text p:last-child {
	margin-bottom: 0;
}

.mm .mm-cta__btn {
	margin-top: 16px;
}

.mm .mm-cta__btn .elementor-button {
	display: inline-flex;
	align-items: center;
	background-color: var(--mm-accent);
	color: #fff;
	border-radius: 8px;
	padding: 11px 18px;
	font-family: 'Montserrat', sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: filter .18s ease, transform .18s ease;
}

.mm .mm-cta__btn .elementor-button:hover,
.mm .mm-cta__btn .elementor-button:focus-visible {
	filter: brightness(1.08);
	transform: translateY(-1px);
}

/* Arrow drawn from the button, so the ACF label stays plain text. */
.mm .mm-cta__btn .elementor-button-text::after {
	content: "\2192";
	margin-left: 8px;
}

/* ===========================================================================
   Industries panel — icon-tile grid.

   Everything else in the Industries panel (card, rail, CTA) reuses the `.mm-*`
   rules above; only the grid below is specific to it.
   ======================================================================== */

.mm .im-tiles {
	min-width: 0;
}

.mm .im-tiles__grid {
	display: grid;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mm .im-tiles__grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mm .im-tiles__grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mm .im-tiles__grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Divider rules rather than gaps, per the reference. Borders live on the tile so they stretch to
   the full cell height, and are removed on the last column / last row. `nth-child` is
   column-count-specific, hence one block per layout. */
.mm .im-tile {
	margin: 0;
	padding: 0;
	border-right: 1px solid var(--mm-rule);
	border-bottom: 1px solid var(--mm-rule);
}

.mm .im-tiles__grid--cols-2 .im-tile:nth-child(2n),
.mm .im-tiles__grid--cols-3 .im-tile:nth-child(3n),
.mm .im-tiles__grid--cols-4 .im-tile:nth-child(4n) {
	border-right: 0;
}

.mm .im-tiles__grid--cols-2 .im-tile:nth-last-child(-n+2),
.mm .im-tiles__grid--cols-3 .im-tile:nth-last-child(-n+3),
.mm .im-tiles__grid--cols-4 .im-tile:nth-last-child(-n+4) {
	border-bottom: 0;
}

.mm .im-tile__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 18px;
	height: 100%;
	padding: 26px 16px 30px;
	text-decoration: none;
	color: var(--mm-navy);
}

/* Circular icon plate. The accent at 8% keeps the plate legible on white without competing with
   the label — a saturated plate at this size reads as a button, which these are not. */
.mm .im-tile__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background-color: #eaf6fc; /* fallback for engines without color-mix() */
	background-color: color-mix(in srgb, var(--mm-accent) 8%, #fff);
	color: var(--mm-accent);
	transition: background-color .18s ease, transform .18s ease;
}

.mm .im-tile__icon :is(img, svg) {
	display: block;
	width: 34px;
	height: 34px;
	object-fit: contain;
}

.mm .im-tile__text {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-align: center;
}

.mm .im-tile__label {
	font-family: 'Heebo', sans-serif;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--mm-navy);
	transition: color .18s ease;
}

.mm .im-tile__arrow::after,
.mm .im-all__arrow::after {
	content: "\2192";
	display: inline-block;
	color: var(--mm-accent);
	font-size: 15px;
	line-height: 1;
	transition: transform .18s ease;
}

.mm .im-tile__link:hover .im-tile__icon,
.mm .im-tile__link:focus-visible .im-tile__icon {
	background-color: #d6eefa; /* fallback for engines without color-mix() */
	background-color: color-mix(in srgb, var(--mm-accent) 16%, #fff);
	transform: translateY(-2px);
}

.mm .im-tile__link:hover .im-tile__label,
.mm .im-tile__link:focus-visible .im-tile__label {
	color: var(--mm-accent);
}

.mm .im-tile__link:hover .im-tile__arrow::after {
	transform: translateX(3px);
}

/* --- "view all" row ---------------------------------------------------- */

.mm .im-all {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 26px;
	padding: 6px;
	text-decoration: none;
}

.mm-no-all .mm .im-all,
.im-no-all .mm .im-all {
	display: none;
}

/* 3x3 dot grid from a tiled radial-gradient — nine dots without an asset or nine elements. */
.mm .im-all__dots {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	color: var(--mm-accent);
	background-image: radial-gradient(currentColor 1.7px, transparent 1.8px);
	background-size: 6px 6px;
	background-position: 1px 1px;
	background-repeat: repeat;
}

.mm .im-all__label {
	font-family: 'Heebo', sans-serif;
	font-size: 15.5px;
	font-weight: 600;
	color: var(--mm-accent);
}

.mm .im-all:hover .im-all__arrow::after {
	transform: translateX(3px);
}

.im-tiles--empty {
	padding: 18px;
	border: 1px dashed var(--mm-rule);
	border-radius: 8px;
	font: 13px/1.5 'Montserrat', sans-serif;
	color: var(--mm-body);
}

/* ===========================================================================
   Locations panel — country columns, with the rail on the LEFT and a
   full-height light CTA card on the RIGHT.

   This is the one panel whose grid differs. The other two are
   [content | rail]; this reference is [rail | countries | CTA]. The DOM order
   is deliberately countries -> rail -> CTA, i.e. NOT the visual order: on a
   phone the grid collapses to one column and follows the DOM, so a menu opens
   on its city links rather than on a marketing blurb. Nothing that gets
   reordered is focusable — the rail is text and an image — so tab order and
   reading order both stay correct.
   ======================================================================== */

.loc-panel .mm {
	--mm-accent: var(--lm-accent, #0aa3d6);
	--lm-cta-w: 300px;
}

/*
 * TWO ROWS, not one.
 *
 * The reference puts the intro copy and the world map side by side across the top, the four country
 * columns underneath them spanning that whole width, and the CTA card full height down the right.
 * So the left region is a 2x2 block and the card spans both of its rows:
 *
 *     [ rail text | map ] [ CTA ]
 *     [ four country columns ] [ CTA ]
 *
 * DOM order stays countries -> rail -> CTA, i.e. NOT the visual order, for the reason given above:
 * on a phone the grid collapses and follows the DOM, so the menu opens on its links rather than on a
 * marketing blurb. Nothing that gets reordered is focusable, so tab order and reading order agree.
 */
.loc-panel .mm .mm__inner {
	grid-template-columns: minmax(0, 1fr) var(--lm-cta-w);
	grid-template-rows: auto auto;
	row-gap: 30px;
}

/* `lm-col` is the location-menu WIDGET WRAPPER, not the <nav> inside it. The grid item is the wrapper
   Elementor emits, so placing `.lm-countries` here would silently do nothing. */
.loc-panel .mm .mm-rail { grid-column: 1; grid-row: 1; }
.loc-panel .mm .lm-col  { grid-column: 1; grid-row: 2; min-width: 0; }
.loc-panel .mm .lm-cta  { grid-column: 2; grid-row: 1 / span 2; }

/* Rail off: the columns take the whole left region and the card still spans what is left. */
.lm-no-rail .loc-panel .mm__inner {
	grid-template-rows: auto;
}

.lm-no-rail .loc-panel .mm-rail {
	display: none;
}

.lm-no-rail .loc-panel .mm .lm-col { grid-column: 1; grid-row: 1; }
.lm-no-rail .loc-panel .mm .lm-cta { grid-column: 2; grid-row: 1; }

.lm-no-cta .loc-panel .mm__inner {
	grid-template-columns: minmax(0, 1fr);
}

.lm-no-cta .loc-panel .lm-cta {
	display: none;
}

.lm-no-cta .loc-panel .mm .lm-col { grid-column: 1; }

/* Both off: one full-width column of countries. */
.lm-no-rail.lm-no-cta .loc-panel .mm__inner {
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto;
}


/* The shared rail carries a LEFT border and left padding, correct when it sits to the right of the
   content. Here it is neither — it is the top row, so the divider becomes a rule underneath it and
   the copy and the map sit side by side within it.

   The rail is an Elementor container, so its direction has to be stated: `.e-con` reads
   `flex-direction: var(--flex-direction)` and defaults to COLUMN. */
.loc-panel .mm .mm-rail {
	display: flex;
	flex-direction: row;
	align-items: center;
	column-gap: 40px;
	padding: 0 0 30px;
	border-left: 0;
	border-right: 0;
	border-bottom: 1px solid var(--mm-rule);
}

/* The copy and the map are two blocks side by side. The four copy widgets are wrapped in a real
   container in the document (`mm-rail__copy`) rather than being held together by nth-child rules —
   the alternative was spanning a grid row count that depends on how many of them are non-empty. */
/* `0 0` and not `0 1`: with the map on `flex: 1 1 auto` its intrinsic width won the negotiation and
   squeezed the copy to 261px, which broke the headline across three lines instead of two. The copy
   block is the fixed side of this row; the map takes whatever is left. */
.loc-panel .mm .mm-rail__copy {
	display: flex;
	flex-direction: column;
	flex: 0 0 400px;
	min-width: 0;
	gap: 0;
}

.loc-panel .mm .mm-rail__copy > * {
	width: 100%;
}

/* `flex-basis: 0` so the map sizes from the space left over rather than from the image's own width. */
.loc-panel .mm .mm-rail__art {
	flex: 1 1 0;
	min-width: 0;
	max-width: none;
	margin-left: auto;
}

/* The rail's second headline line is two widgets — a navy part and an accent part — that have to sit
   on ONE line. A flex row with an explicit gap rather than `display:inline`, so the space between
   them does not depend on whitespace in Elementor's output. */
.loc-panel .mm .mm-rail__hgroup {
	display: flex;
	/* STATED EXPLICITLY, per the note at the top of this file: an Elementor container reads
	   `flex-direction: var(--flex-direction)` and its default is COLUMN, so `display: flex` alone
	   stacked the two words instead of setting them side by side. */
	flex-direction: row;
	flex-wrap: wrap;
	column-gap: .3em;
	align-items: baseline;
}

/* Elementor gives a widget inside a flex container `width: 100%`, which puts each of the two words on
   its own line and defeats the whole point of the row. */
.loc-panel .mm .mm-rail__hgroup > .elementor-widget {
	width: auto;
	flex: 0 0 auto;
}

/* The Locations illustration is a wide, short world map: its own reserved box, or the shared ratio
   letterboxes it and the panel jumps the first time it opens. */
.loc-panel .mm-rail__art :is(img, svg) {
	max-width: 100%;
	aspect-ratio: 620 / 330;
}

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

.mm .lm-countries {
	min-width: 0;
}

.mm .lm-countries__grid {
	display: grid;
	list-style: none;
	margin: 0;
	padding: 0;
	/* The gap sits OUTSIDE each column's own right padding, so the divider lands midway between two
	   columns' text rather than hard against the next one. */
	column-gap: 22px;
}

.mm .lm-countries__grid--cols-1 { grid-template-columns: minmax(0, 1fr); }
.mm .lm-countries__grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mm .lm-countries__grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mm .lm-countries__grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/*
 * Below ~1200 the four columns stop being columns. Measured: at a 1100px viewport the card is
 * 1060 wide, which leaves 644px for the country region once the CTA card and the gap are taken —
 * 145px a column, where "Established Market" alone needs about 118, and every status wrapped.
 * Two by two instead: same reading order, ~300px a column.
 *
 * Placed immediately AFTER the column-count rules on purpose. It is the same (0,2,0) specificity as
 * the rule it overrides, so it only wins by coming later — sitting it earlier in the file, which is
 * where the panel's other layout rules live, silently did nothing.
 */
@media (max-width: 1200px) {
	.mm .lm-countries__grid--cols-3,
	.mm .lm-countries__grid--cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 30px;
	}

	/* The divider follows the new column count, or the second column of each row rules against nothing. */
	.mm .lm-countries__grid--cols-3 .lm-country,
	.mm .lm-countries__grid--cols-4 .lm-country {
		border-right: 1px solid var(--mm-rule);
		max-width: none;
	}

	.mm .lm-countries__grid--cols-3 .lm-country:nth-child(2n),
	.mm .lm-countries__grid--cols-4 .lm-country:nth-child(2n) {
		border-right: 0;
	}
}

/* Vertical rules between columns, per the reference. The border sits on the column so it stretches
   the full cell height; `nth-child` is column-count-specific, hence one selector per layout. */
.mm .lm-country {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* Caps how wide one column can spread. Inert at four columns (each is ~205px), decisive at one:
	   without it a lone country's head stretches the full width while its rows stay short, and the
	   column reads as two unrelated pieces. */
	width: 100%;
	max-width: 260px;
	margin: 0;
	padding: 0 20px 0 0;
	border-right: 1px solid var(--mm-rule);
	text-align: left;
}

.mm .lm-countries__grid--cols-1 .lm-country:nth-child(1n),
.mm .lm-countries__grid--cols-2 .lm-country:nth-child(2n),
.mm .lm-countries__grid--cols-3 .lm-country:nth-child(3n),
.mm .lm-countries__grid--cols-4 .lm-country:nth-child(4n),
.mm .lm-country:last-child {
	border-right: 0;
}

/* LEFT-ALIGNED, not centred: the reference sets the flag beside the country name on one line with
   the status underneath, and four columns of centred text in a 200px track reads as a poster. */
/* 36px and a 10px gap, measured rather than chosen: four columns of a 864px region are ~199px each,
   less 20px of column padding, so the flag and the gap are the only budget the head has. At 44 + 12
   the text got 123px and "Established Market" needs ~118 — it wrapped. At 36 + 10 it gets 133. */
.mm .lm-country__head {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	column-gap: 10px;
	align-items: center;
	width: 100%;
}

/* No flag (the Worldwide column): the name block takes the whole width rather than leaving a hole
   where the plate would be. */
.mm .lm-country__head:not(:has(.lm-country__flag)) {
	grid-template-columns: minmax(0, 1fr);
}

/* Circular flag plate. A ring rather than a shadow: the flags are already full-bleed circles, and a
   shadow at 40px reads as a smudge. */
.mm .lm-country__flag {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	grid-row: 1 / span 2;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(23, 13, 61, .10), 0 2px 8px rgba(23, 13, 61, .10);
	overflow: hidden;
}

/* The Worldwide plate. The globe is drawn by the same masked data URI as its rows, so the column
   needs no flag asset for a thing that is not a country. */
.mm .lm-country__flag--globe {
	background-color: color-mix(in srgb, var(--mm-accent) 12%, #fff);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--mm-accent) 26%, #fff);
}

.mm .lm-country__flag--globe::after {
	content: "";
	width: 20px;
	height: 20px;
	background-color: var(--mm-accent);
	-webkit-mask-image: var(--lm-globe);
	mask-image: var(--lm-globe);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.mm .lm-country__flag :is(img, svg) {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mm .lm-country__name {
	font-family: 'Heebo', sans-serif;
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--mm-navy);
}

/* The status label — "Established Market", "Remote Delivery". Accent-coloured and small, so the
   column head reads as name-then-state rather than as two sentences. */
.mm .lm-country__tagline {
	margin-top: 2px;
	font-family: 'Montserrat', sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--mm-accent);
}

/* The rule now separates the head from the rows and runs the full column width, which is what makes
   four columns read as a table rather than as four posters. */
.mm .lm-country__rule {
	display: block;
	grid-column: 1 / -1;
	width: 100%;
	height: 1px;
	margin: 16px 0 2px;
	border-radius: 0;
	background-color: var(--mm-rule);
}

/* --- city links -------------------------------------------------------- */

.mm .lm-cities {
	list-style: none;
	width: 100%;
	margin: 8px 0 0;
	padding: 0;
}

.mm .lm-city {
	margin: 0;
	padding: 0;
}

.mm .lm-city__link {
	display: flex;
	align-items: center;
	gap: 9px;
	min-height: 34px;
	padding: 4px 2px;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: var(--mm-body);
	text-decoration: none;
	transition: color .18s ease;
}

/* The pin is a masked data URI, not an asset and not an element per city: one declaration recoloured
   by `background-color`, costing nothing per row in a menu that ships on every page. */
.mm .lm-city__pin {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	background-color: var(--mm-accent);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/*
 * Two more marks, same technique and same reason: one masked data URI recoloured by
 * `background-color`, costing nothing per row in a menu that ships on every page of the site.
 * A tick means "something we do", a globe means "somewhere we serve" — neither is a place with a
 * page, which is exactly why those rows are not links.
 *
 * The globe is held in a custom property because the country plate uses the same shape.
 */
.mm .lm-countries {
	--lm-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cellipse cx='12' cy='12' rx='4' ry='10'/%3E%3C/svg%3E");
	--lm-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8.5 12.5 2.5 2.5 4.5-5'/%3E%3C/svg%3E");
}

.mm .lm-country--check .lm-city__pin {
	-webkit-mask-image: var(--lm-check);
	mask-image: var(--lm-check);
}

.mm .lm-country--globe .lm-city__pin {
	-webkit-mask-image: var(--lm-globe);
	mask-image: var(--lm-globe);
}

/* A row with no page behind it. Same rhythm as a city row, none of a link's affordances: no pointer,
   no hover colour, and nothing for the keyboard to land on. */
.mm .lm-city__link--static {
	cursor: default;
	color: var(--mm-body);
}

.mm .lm-city__link:hover .lm-city__label,
.mm .lm-city__link:focus-visible .lm-city__label {
	color: var(--mm-accent);
}

/* --- "View {country} Solutions" --------------------------------------- */

/* `display:block`, not flex, so a label too long for the column wraps and the arrow follows the last
   word. As a flex row the arrow was a sibling of the whole label box, so a two-line label left it
   stranded beside line one.

   Nothing renders on two lines today — the composed default is "View {country} Solutions" and a
   column is 179px at 1440, which holds it. This was measured with "View All Canada Locations"
   (190px with its arrow) before that wording was dropped, and it is kept because the column is only
   ~10px wider than the longest label it currently has: a country named longer than "Canada", or a
   per-term override typed in wp-admin, brings it straight back. */
.mm .lm-country__more {
	display: block;
	width: 100%;
	/* `margin-top: auto` pins it to the bottom of the column, so the links line up across columns
	   whose city lists differ in length. */
	margin-top: auto;
	padding: 13px 2px 2px;
	border-top: 1px solid var(--mm-rule);
	font-family: 'Heebo', sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--mm-accent);
	text-decoration: none;
}

/* The leading NBSP is load-bearing, not spacing: the arrow is drawn by an `::after` that has to stay
   `inline-block` for its hover `transform` to apply, and an inline-block is a break opportunity — so
   even with no whitespace in the markup the arrow dropped onto a line of its own (measured). U+00A0
   is line-break class GL, which forbids a break on either side of it, welding the arrow to the last
   word. The margin is only the visual gap the flex `gap` used to provide. */
.mm .lm-country__more-arrow {
	margin-inline-start: 3px;
	white-space: nowrap;
}

.mm .lm-country__more-arrow::before {
	content: "\00a0";
}

.mm .lm-country__more-arrow::after {
	content: "\2192";
	display: inline-block;
	transition: transform .18s ease;
}

.mm .lm-country__more:hover .lm-country__more-arrow::after {
	transform: translateX(3px);
}

/* --- CTA card (light — the shared .mm-cta is navy) -------------------- */

.e-con.lm-cta {
	display: block;
	align-self: stretch;
	padding: 24px 22px;
	border-radius: 12px;
	background-color: #f2f5ff; /* fallback for engines without color-mix() */
	background-color: color-mix(in srgb, var(--mm-accent) 7%, #f7f8ff);
}

.mm .lm-cta__title .elementor-heading-title,
.mm .lm-cta__title--accent .elementor-heading-title {
	font-family: 'Heebo', sans-serif;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.28;
	color: var(--mm-navy);
	margin: 0;
}

.mm .lm-cta__title--accent .elementor-heading-title {
	color: var(--mm-accent);
}

/* The rule under the CTA headline is drawn from the accent line rather than shipped as an element:
   Elementor has no widget whose job is a 30px bar, and a Divider would bring its own wrapper and
   defaults to override. */
.mm .lm-cta__title--accent .elementor-heading-title::after {
	content: "";
	display: block;
	width: 30px;
	height: 2px;
	margin: 14px 0 13px;
	border-radius: 2px;
	background-color: var(--mm-accent);
}

.mm .lm-cta__text,
.mm .lm-cta__text p {
	font-family: 'Montserrat', sans-serif;
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--mm-body);
}

.mm .lm-cta__text p:last-child {
	margin-bottom: 0;
}

/* The three rows are the shared SaifTec Feature List (source: options), re-laid out from its card
   grid into a vertical icon list. Reusing the widget keeps one repeater renderer in the codebase;
   only the skin changes here. */
.mm .lm-cta__rows .svc1-featlist {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 15px;
	list-style: none;
	margin: 17px 0 0;
	padding: 0;
}

/* Every child is placed EXPLICITLY. The widget emits icon, title and text as three siblings, so
   auto-placement drops the text onto row 2 column 1 — a 38px-wide cell — and "Built for Your Goals"
   comes out one word per line under the icon. Explicit placement also means the row stays correct if
   a future row has no icon, instead of silently reflowing. */
.mm .lm-cta__rows .svc1-featlist__item {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr);
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: 12px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

.mm .lm-cta__rows .svc1-featlist__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	grid-column: 1;
	grid-row: 1 / span 2;
	width: 38px;
	height: 38px;
	margin: 0;
	border-radius: 50%;
	background-color: #fff;
	color: var(--mm-accent);
	box-shadow: 0 1px 4px rgba(23, 13, 61, .10);
}

.mm .lm-cta__rows .svc1-featlist__icon :is(img, svg) {
	display: block;
	width: 19px;
	height: 19px;
	object-fit: contain;
}

.mm .lm-cta__rows .svc1-featlist__title {
	grid-column: 2;
	grid-row: 1;
	align-self: end;
	font-family: 'Heebo', sans-serif;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--mm-navy);
	margin: 0;
}

.mm .lm-cta__rows .svc1-featlist__text,
.mm .lm-cta__rows .svc1-featlist__text p {
	grid-column: 2;
	grid-row: 2;
	align-self: start;
	font-family: 'Montserrat', sans-serif;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--mm-body);
	margin: 1px 0 0;
}

.mm .lm-cta__btn {
	margin-top: 20px;
}

.mm .lm-cta__btn .elementor-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	background-color: var(--mm-navy);
	color: #fff;
	border-radius: 8px;
	padding: 13px 16px;
	font-family: 'Montserrat', sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: filter .18s ease, transform .18s ease;
}

.mm .lm-cta__btn .elementor-button:hover,
.mm .lm-cta__btn .elementor-button:focus-visible {
	filter: brightness(1.35);
	transform: translateY(-1px);
}

.mm .lm-cta__btn .elementor-button-text::after {
	content: "\2192";
	margin-left: 8px;
}

.mm .lm-cta__note,
.mm .lm-cta__note p {
	margin: 11px 0 0;
	font-family: 'Montserrat', sans-serif;
	font-size: 12px;
	line-height: 1.4;
	color: var(--mm-body);
	text-align: center;
}

.lm-countries--empty {
	padding: 18px;
	border: 1px dashed var(--mm-rule);
	border-radius: 8px;
	font: 13px/1.5 'Montserrat', sans-serif;
	color: var(--mm-body);
}

/* --- focus ------------------------------------------------------------- */

.mm a:focus-visible {
	outline: 2px solid var(--mm-accent);
	outline-offset: 3px;
	border-radius: 3px;
}

/* --- editor hint ------------------------------------------------------- */

.mm-services--empty {
	padding: 18px;
	border: 1px dashed var(--mm-rule);
	border-radius: 8px;
	font: 13px/1.5 'Montserrat', sans-serif;
	color: var(--mm-body);
}

/* ===========================================================================
   Responsive.

   Elementor Pro's Mega Menu collapses at its `breakpoint_selector` (tablet =
   1024px here) and reparents the panel into its own off-canvas markup. Verify
   below 1024 inside that markup, not by narrowing the desktop layout.
   ======================================================================== */

@media (max-width: 1280px) {
	.mm {
		--mm-rail-w: 300px;
		--mm-gap: 32px;
	}

	.mm .mm__inner {
		padding: 32px 26px 36px;
	}

	.mm .mm-services__grid {
		row-gap: 40px;
	}

	.loc-panel .mm {
		--lm-cta-w: 238px;
	}

	.mm .lm-country {
		padding: 0 12px;
	}
}

@media (max-width: 1024px) {
	/* PRE-EXISTING BUG, fixed here: the entire collapsed navigation was invisible.
	   White text on a white background, for all seven menu items, at every width
	   below the breakpoint.

	   Diagnosed with CSS.getMatchedStylesForNode rather than guessed. Two rules
	   collide, and only in dropdown mode:
	     - the widget's own setting paints the title text #ffffff (correct on the dark
	       desktop header, where the title background is transparent), and
	     - Pro's widget-mega-menu.min.css adds
	         .elementor-widget-n-menu .e-n-menu[data-layout="dropdown"] .e-n-menu-title
	           { background-color: #fff }
	       which applies ONLY once collapsed.
	   Desktop is unaffected: there the computed title background is rgba(0,0,0,0).

	   Fixed by keeping the white text (the design intent) and giving it a navy ground:
	   the wrapper carries the colour, the titles go transparent so there is one source
	   of truth. Recolouring the text instead would have diverged from the desktop
	   header for no reason.

	   SPECIFICITY: Pro's selectors are 0,4,0 (three classes + one attribute), so a
	   0,2,0 rule loses outright. Duplicating the final class lifts these to 0,5,0 —
	   winning on specificity rather than on load order, with no !important. Matching
	   the breakpoint class (.e-n-menu-tablet) would have been fragile: it changes if
	   the widget's breakpoint setting changes. */
	.elementor-widget-n-menu .e-n-menu[data-layout="dropdown"] .e-n-menu-wrapper.e-n-menu-wrapper {
		background-color: #170d3d;
		padding-bottom: 4px;
	}

	.elementor-widget-n-menu .e-n-menu[data-layout="dropdown"] .e-n-menu-title.e-n-menu-title {
		background-color: transparent;
		border-bottom: 1px solid rgba(255, 255, 255, .08);
	}

	.e-con.mm-panel {
		padding: 0;
	}

	.e-con.mm {
		border-radius: 0;
		box-shadow: none;
	}

	.mm .mm__inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 28px;
		padding: 20px 16px 24px;
	}

	.mm .mm-services__grid,
	.mm .mm-services__grid--cols-2,
	.mm .mm-services__grid--cols-3,
	.mm .mm-services__grid--cols-4 {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 26px;
	}

	.mm .mm-rail {
		padding: 24px 0 0;
		border-left: 0;
		border-top: 1px solid var(--mm-rule);
	}

	/* Decorative only, and the tallest thing in the panel — drop it rather than
	   make a touch user scroll past it to reach the CTA. */
	.mm .mm-rail__art {
		display: none;
	}

	/* Stacked: nothing to align across, so drop the reserved two-line height. */
	.mm .mm-col__head {
		min-height: 0;
		align-items: center;
		margin-bottom: 8px;
	}

	/* ≥44px touch targets. */
	.mm .mm-links {
		row-gap: 2px;
	}

	/* min-height, not padding: 14px text at 1.5 line-height plus 11px padding lands on
	   43px, and "about 44" is not a touch target. */
	.mm .mm-links__item > a {
		min-height: 44px;
		align-content: center;
		padding-block: 10px;
	}

	/* Industry tiles: two columns, not one. Nine stacked 76px plates would be ~1300px of
	   scrolling inside a dropdown. */
	.mm .im-tiles__grid,
	.mm .im-tiles__grid--cols-2,
	.mm .im-tiles__grid--cols-3,
	.mm .im-tiles__grid--cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mm .im-tiles__grid .im-tile:nth-child(2n) {
		border-right: 0;
	}

	.mm .im-tiles__grid .im-tile:nth-child(2n+1) {
		border-right: 1px solid var(--mm-rule);
	}

	.mm .im-tiles__grid .im-tile:nth-last-child(-n+2) {
		border-bottom: 0;
	}

	.mm .im-tile__link {
		gap: 12px;
		padding: 18px 10px 20px;
	}

	.mm .im-tile__icon {
		width: 58px;
		height: 58px;
	}

	.mm .im-tile__icon :is(img, svg) {
		width: 26px;
		height: 26px;
	}

	.mm .im-tile__label {
		font-size: 14.5px;
	}

	.mm .mm-col__head {
		padding-block: 6px;
	}

	/* Locations: the three-column grid has to be undone explicitly. `.loc-panel .mm .mm__inner` is
	   0,3,0, so the shared single-column rule above (0,2,0) does NOT reach it — the panel would keep
	   a 300px rail and a 268px CTA inside a 390px viewport. */
	.loc-panel .mm .mm__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Placement back to auto, so the stack follows the DOM: cities, then rail, then CTA. */
	.loc-panel .mm .mm-rail,
	.loc-panel .mm .lm-col,
	.loc-panel .mm .lm-cta {
		grid-column: auto;
		grid-row: auto;
	}

	.mm .lm-countries__grid,
	.mm .lm-countries__grid--cols-1,
	.mm .lm-countries__grid--cols-2,
	.mm .lm-countries__grid--cols-3,
	.mm .lm-countries__grid--cols-4 {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The rail's own overrides above are 0,3,0, so the shared 0,2,0 mobile reset for `.mm .mm-rail`
	   does NOT reach them: without this the rail keeps a right border and right padding once stacked. */
	.loc-panel .mm .mm-rail {
		padding: 24px 0 0;
		border-right: 0;
		border-top: 1px solid var(--mm-rule);
	}

	/* Stacked, the vertical rules become horizontal ones and centred text becomes left-aligned — a
	   centred column head above a left-read list of cities has no axis to sit on. The desktop
	   max-width has to go too, or the whole block sits indented in a 232px box centred in the panel. */
	.mm .lm-country {
		align-items: flex-start;
		max-width: none;
		margin: 0;
		padding: 16px 0;
		border-right: 0;
		border-bottom: 1px solid var(--mm-rule);
		text-align: left;
	}

	.mm .lm-country:last-child {
		border-bottom: 0;
	}

	.mm .lm-country__head {
		align-items: flex-start;
	}

	.mm .lm-country__flag {
		width: 36px;
		height: 36px;
		margin-bottom: 10px;
	}

	.mm .lm-country__rule {
		margin-inline: 0;
	}

	/* ≥44px touch targets, by min-height rather than padding. */
	.mm .lm-city__link {
		min-height: 44px;
		align-items: center;
		padding-block: 8px;
	}

	.e-con.lm-cta {
		align-self: auto;
	}
}

@media (max-width: 767px) {
	.mm .mm__inner {
		padding: 16px 14px 20px;
	}

	.mm .mm-col__title {
		font-size: 15px;
	}

	.mm .mm-links__item > a {
		font-size: 14px;
	}

	.mm .mm-rail__h .elementor-heading-title {
		font-size: 23px;
	}

	/* One column, and the tile turns into a row: icon left, label right, arrow trailing.
	   A centred 58px plate above a centred label wastes most of a 390px viewport. */
	.mm .im-tiles__grid,
	.mm .im-tiles__grid--cols-2,
	.mm .im-tiles__grid--cols-3,
	.mm .im-tiles__grid--cols-4 {
		grid-template-columns: minmax(0, 1fr);
	}

	.mm .im-tiles__grid .im-tile,
	.mm .im-tiles__grid .im-tile:nth-child(2n),
	.mm .im-tiles__grid .im-tile:nth-child(2n+1) {
		border-right: 0;
		border-bottom: 1px solid var(--mm-rule);
	}

	.mm .im-tiles__grid .im-tile:last-child {
		border-bottom: 0;
	}

	.mm .im-tile__link {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 14px;
		min-height: 56px;
		padding: 8px 4px;
	}

	.mm .im-tile__icon {
		width: 44px;
		height: 44px;
	}

	.mm .im-tile__icon :is(img, svg) {
		width: 22px;
		height: 22px;
	}

	.mm .im-tile__text {
		flex: 1 1 auto;
		justify-content: space-between;
		text-align: left;
	}

	.mm .im-all {
		justify-content: flex-start;
		margin-top: 18px;
		min-height: 44px;
	}

	.mm .lm-country__name {
		font-size: 16.5px;
	}

	.mm .lm-cta__title .elementor-heading-title,
	.mm .lm-cta__title--accent .elementor-heading-title {
		font-size: 17.5px;
	}
}

/* =========================================================================
 * HEADER ROW — keep the top-level nav on ONE line down to 1025px.
 *
 * THE CAUSE (measured, not guessed): the header row is three V4 atomic columns at a fixed
 * 25% / 50% / 25%, generated as `.elementor .e-2a00b1fc-810f732 { width: 50% }`. So the nav is
 * handed exactly half the row no matter what it contains, while its six items need ~651px:
 *
 *     width   nav column gets   nav needs   result
 *     1440px       700px          651px     fits
 *     1366px       666px          651px     wrapped (heading box was 646px — short by 5px)
 *     1025px       495px          651px     wrapped badly
 *
 * Meanwhile the logo column held 248px for a 171px logo, and the button column held 248px for a
 * 250px button — i.e. the surplus was on the wrong side of the row.
 *
 * TWO CHANGES, both needed. Content-sizing alone releases ~75px (495 -> 570 at 1025px), which is
 * still short of 651, so the item padding tightens as well below 1440px.
 *
 * WHY `:has()` AND NOT THE GENERATED CLASS: `e-2a00b1fc-810f732` is a hash Elementor regenerates
 * when the template is re-saved, so hardcoding it would silently stop applying one day. Selecting
 * the column *that contains the nav widget* survives that. `.elementor-location-header .e-con:has(…)`
 * is 0,3,0, which clears Elementor's 0,2,0 without !important.
 *
 * SCOPE — this used to be >=1025px, on the reasoning that "at <=767px Elementor's own mobile CSS
 * re-lays the row, and 768-1024px is the tablet/hamburger range the panels already target at
 * max-width:1024px." Both halves of that were wrong, and the gap it left broke every page:
 *
 *   - Elementor's mobile CSS re-lays the row at <=767px, NOT <=1024px.
 *   - `max-width:1024px` in this file restyles the PANELS only; it never touches the header row's
 *     three atomic columns.
 *
 * So 768-1024px had no rule from either side. The CTA column stayed `width:25%` while the button
 * inside kept its desktop `width:250px` — and because the column is `flex-direction:column`, that
 * width is a CROSS-axis size, which flex-shrink cannot compress. Measured at 768px: the button
 * reached 776.4px in a 768px viewport and was visibly clipped. The nav column also stayed at 50%,
 * leaving the hamburger stranded in the middle of the page instead of at the right edge.
 *
 * The tablet band is handled in its own block BELOW rather than by lowering this bound, because the
 * "siblings size to their content" rule reaches the LOGO column too (`:has(+ .e-con > …)` selects
 * the element before the nav). At >=1025px that is wanted. At 768-1024px it is not: releasing the
 * logo column from its 25% let the logo grow 147px -> 225px, which pushed the header from 114px to
 * 153px tall and put the logo back under the page content. Measured, after trying exactly that.
 * ====================================================================== */

@media (min-width: 1025px) {
	/* The nav column takes the space that is actually left over. */
	.elementor-location-header .e-con:has(> .elementor-widget-n-menu) {
		width: auto;
		flex: 1 1 auto;
		min-width: 0;
	}

	/* Its siblings (logo, quote button) size to their content and release the surplus.
	   The second selector is the preceding sibling — :has() reaches backwards, which a
	   general sibling combinator cannot. */
	.elementor-location-header .e-con:has(> .elementor-widget-n-menu) ~ .e-con,
	.elementor-location-header .e-con:has(+ .e-con > .elementor-widget-n-menu) {
		width: auto;
		flex: 0 0 auto;
	}

	/* Never let the row itself wrap onto a second line. */
	.elementor-location-header .e-con:has(> .e-con > .elementor-widget-n-menu) {
		flex-wrap: nowrap;
	}

	/* The item row must not wrap either — it is a single-line nav by definition. */
	.elementor-widget-n-menu .e-n-menu-heading {
		flex-wrap: nowrap;
	}
}

/* ======================================================================
 * TABLET BAND (768-1024px) — the hamburger range.
 *
 * Same problem the >=1025px block solves, minus the logo column. Without this, the CTA column kept
 * its desktop 25% while the button inside kept width:250px — a CROSS-axis size in a column flex,
 * so flex-shrink could not compress it. At 768px the button reached 776.4px in a 768px viewport and
 * was visibly clipped. The nav column stayed at 50%, leaving the hamburger stranded mid-page.
 *
 * The logo column is deliberately left at its Elementor width here: releasing it grows the logo to
 * 225px and makes the header 153px tall, which collides with page content.
 * ====================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
	/* Nav column takes the leftover space, so the hamburger sits at the right edge. */
	.elementor-location-header .e-con:has(> .elementor-widget-n-menu) {
		width: auto;
		flex: 1 1 auto;
		min-width: 0;
	}

	/* Only the FOLLOWING sibling — the quote-button column — sizes to its content. */
	.elementor-location-header .e-con:has(> .elementor-widget-n-menu) ~ .e-con {
		width: auto;
		flex: 0 0 auto;
	}

	/* The row must never wrap onto a second line. */
	.elementor-location-header .e-con:has(> .e-con > .elementor-widget-n-menu) {
		flex-wrap: nowrap;
	}
}

/* Tighten the items where the row is genuinely narrow. The doubled class matches the
   specificity pattern already used for .e-n-menu-title in this file. */
@media (min-width: 1025px) and (max-width: 1439px) {
	.elementor-widget-n-menu .e-n-menu-title.e-n-menu-title {
		padding-right: 10px;
		padding-left: 10px;
	}
}

@media (min-width: 1025px) and (max-width: 1199px) {
	.elementor-widget-n-menu .e-n-menu-title.e-n-menu-title {
		padding-right: 8px;
		padding-left: 8px;
		font-size: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mm .mm-col__icon,
	.mm .mm-col__title,
	.mm .mm-links__item > a,
	.mm .mm-links__item > a::before,
	.mm .mm-cta__btn .elementor-button,
	.mm .lm-city__link,
	.mm .lm-country__more-arrow::after,
	.mm .lm-cta__btn .elementor-button {
		transition: none;
	}
}

/* ==========================================================================
 * TOUCH TARGETS ON THE CONTROLS ELEMENTOR PRO OWNS
 *
 * This file already sizes the two link lists to 44px on purpose (`.mm-links__item > a` and
 * `.lm-city__link` in the <=1024px block). The controls Pro renders were never styled at all,
 * and they are the ones that matter most:
 *
 *   .e-n-menu-toggle        ~20x20px — the hamburger. The primary navigation control on every
 *                           page at every width below 1025px.
 *   .e-n-menu-dropdown-icon ~16x24px — the caret. Disproportionately important because when the
 *                           menu is collapsed this is the ONLY way to open the Industries and
 *                           Locations panels: their titles are real links that navigate away.
 *
 * NEVER SET `display` ON EITHER OF THESE. Pro controls their visibility with `display` —
 * `.e-n-menu-toggle{display:none}` by default, flipped to `flex` only inside its own
 * `@media (max-width:1024px)`. An unscoped `display:flex` here (which is what this block did on the
 * first attempt) beats that at every width and forces the hamburger onto desktop, replacing the
 * real navigation. Size the hit area with min-width/min-height only and let Pro own `display`.
 *
 * Also scoped to <=1024px, so nothing in this block can reach the desktop header at all.
 * ========================================================================== */

@media (max-width: 1024px) {
	.elementor-widget-n-menu .e-n-menu-toggle {
		min-width: 44px;
		min-height: 44px;
	}

	.elementor-widget-n-menu .e-n-menu-title .e-n-menu-dropdown-icon {
		min-width: 44px;
		min-height: 44px;
	}
}

@media (max-width: 1024px) {
	/* Three theme-owned controls that fall through the existing 44px rules.
	   `.mm-col__head` loses its desktop `min-height:46px` in the collapsed block above and only
	   gets 12px of padding back; `.im-all` is given 44px at <=767px but not in the 768-1024
	   hamburger band; `.lm-country__more` has no touch override at any width. */
	.mm .mm-col__head {
		min-height: 44px;
	}
	.mm .im-all {
		min-height: 44px;
		display: flex;
		align-items: center;
	}
	/* `.lm-country__more` gets its 44px from padding, not from `display:flex` — flex is what stranded
	   the arrow beside line one of a wrapped label on desktop, and there is no reason for the two
	   bands to lay the same link out differently. */
	.mm .lm-country__more {
		min-height: 44px;
		padding-top: 15px;
		padding-bottom: 10px;
	}
}