/*
 * Italthai Language Switcher
 *
 * WPML adds the switcher as an ordinary menu item, so what is styled here is
 * li.wpml-ls-current-language inside an Elementor nav menu -- not a WPML widget. That class
 * exists nowhere else, so no widget id is needed to keep this off the rest of the menu.
 *
 * Design: a mint rule after the last link, the language in bold Midnight Blue, and a thin
 * mint chevron that turns over when the panel opens (header nodes 1:362 to 1:366).
 *
 * The pale pill behind a hovered or current menu link is at the end of this file.
 */

.elementor-nav-menu > li.wpml-ls-current-language {
	--lang-mint: #90d2c1;
	--lang-navy: #02274c;

	/*
	 * Extra space before the rule, on top of the previous link's own padding. Zero: that
	 * padding is already enough, and 26px here pushed the whole item out past the header's
	 * right edge.
	 */
	--lang-space: 0px;
	--lang-rule-w: 1.5px;
	--lang-rule-h: 22px;

	/* Figma: the rule 15 after CONTACT US and the language 15 after the rule. Elementor spaces
	 * the menu with 14 on each side of every link, so the item adds 1 to the 14 already there,
	 * and the language link drops its own 14 for the 15 inside the item. */
	--lang-gap: 15px;

	position: relative;
	margin-left: calc(var(--lang-space) + var(--lang-gap) - var(--e-nav-menu-horizontal-menu-item-margin, 14px));
	padding-left: var(--lang-gap);
}

.elementor-nav-menu--main .elementor-nav-menu > li.wpml-ls-current-language > a.elementor-item {
	margin-left: 0;
}

/*
 * The rule is on the list item, not on the link.
 *
 * The link was tried and is a dead end: Elementor uses .elementor-item::before and ::after
 * for its menu pointer effects, and this menu is set to "none", which turns both off with
 * display: none. A rule drawn there computes the right size and colour and never paints --
 * which is exactly what happened, because the check looked at width and colour and not at
 * display.
 *
 * So the offset from the label is Elementor's own 14px link margin, with the item's padding
 * left at zero so nothing adds to it. That is close enough to the design's gap that inventing
 * a way to override the margin is not worth it.
 */
.elementor-nav-menu > li.wpml-ls-current-language::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	translate: 0 -50%;
	width: var(--lang-rule-w);
	height: var(--lang-rule-h);
	border-radius: 1px;
	background-color: var(--lang-mint);
}

.elementor-nav-menu li.wpml-ls-current-language > .elementor-item {
	align-items: center;
	gap: 6px;
}

/*
 * The text is styled on WPML's inner span, not on the anchor.
 *
 * Elementor's Nav Menu widget writes the item colour and weight with !important -- an inline
 * style on the anchor loses to it, which is how that was established rather than assumed.
 * Answering with another !important would just leave the next person a fight they cannot win,
 * so the declarations go on the span inside instead: nothing competes for it, and a plain
 * declaration there beats what the span would otherwise inherit.
 *
 * Side effect, and a wanted one: changing the menu's colour in the Elementor panel no longer
 * drags this item with it. It is meant to be the odd one out.
 */
.elementor-nav-menu li.wpml-ls-current-language .wpml-ls-display {
	/*
	 * WPML gives this span a margin of its own -- room for the flag icon it can optionally
	 * show. There is no flag here, so it was 14px of nothing sitting between the rule and the
	 * label and the reason --lang-gap did not add up.
	 */
	margin: 0;
	color: var(--lang-navy);
	font-family: "Montserrat", "Gotham", sans-serif;
	font-weight: 700;
	letter-spacing: 0.7px;
}

/* The chevron is drawn even while no other language is published (no sub-arrow then), as the
 * design always shows it. !important answers the pointer "none" rule, as with the pill below. */
.elementor-nav-menu--main li.wpml-ls-current-language > a.elementor-item:not(:has(.sub-arrow))::after {
	content: "" !important;
	display: block !important;
	position: static;
	width: 5px;
	height: 5px;
	margin-left: 4px;
	border-right: 1.5px solid var(--lang-mint);
	border-bottom: 1.5px solid var(--lang-mint);
	background: none !important;
	opacity: 1 !important;
	translate: 0 -2px;
	rotate: 45deg;
}

/* ---------------------------------------------------------------------------
 * The chevron
 *
 * Elementor's own mark is a solid caret triangle in an inline SVG, and no styling turns that
 * path into the design's thin two-stroke chevron. So the SVG is hidden and the chevron drawn
 * from two borders on a rotated box -- which also makes it flip on open for free.
 * ------------------------------------------------------------------------ */

.elementor-nav-menu li.wpml-ls-current-language .sub-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 10px;
	height: 10px;
	margin: 0;
	padding: 0;
}

.elementor-nav-menu li.wpml-ls-current-language .sub-arrow svg,
.elementor-nav-menu li.wpml-ls-current-language .sub-arrow i {
	display: none;
}

.elementor-nav-menu li.wpml-ls-current-language .sub-arrow::after {
	content: "";
	display: block;
	width: 7px;
	height: 7px;
	border-right: 1.8px solid var(--lang-mint);
	border-bottom: 1.8px solid var(--lang-mint);

	/* Lifted a pixel: a rotated square's visual centre sits below its box centre. */
	translate: 0 -2px;
	rotate: 45deg;
	transition: rotate 220ms ease, translate 220ms ease;
}

/*
 * Keyed off aria-expanded, which SmartMenus maintains itself, so the chevron cannot fall out
 * of step with the panel it describes.
 */
.elementor-nav-menu li.wpml-ls-current-language > .elementor-item[aria-expanded="true"] .sub-arrow::after {
	translate: 0 1px;
	rotate: 225deg;
}

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

/*
 * Same look as the Services panel further down (UI kit "Dropdown", user 2026-10-29): a pale
 * #F0F9FC panel on the bar's foot, rows 45 tall in Book 14 uppercase navy, the hovered one on a
 * 5% navy pill and bold. Centred under the EN link, which sits --lang-gap right of the item's
 * left edge (the mint rule), hence the half-gap. SmartMenus writes left, margin and width
 * inline, hence the !important on those.
 */
.elementor-nav-menu--main .elementor-nav-menu > li.wpml-ls-current-language > .sub-menu.elementor-nav-menu--dropdown {
	--svc-gap: 27px;

	left: calc(50% + var(--lang-gap) / 2) !important;
	/* Fixed, not max-content: the bold hover would widen the panel by a few px. */
	width: 120px !important;
	min-width: 0 !important;
	margin-left: 0 !important;
	/* Even all round: with one row, Services' 12 / 16 top and bottom reads as lopsided. */
	padding: 11px;
	border: 0;
	border-radius: 30px;
	background-color: #f0f9fc;
	box-shadow: none;
	transform: translate(-50%, var(--svc-gap));

	/*
	 * An animation, not a transition. SmartMenus opens the panel by flipping display from none
	 * to block, and a transition has no start to run from across that -- an animation restarts
	 * every time an element comes back into rendering, so this plays on each open.
	 */
	animation: itlang-drop 190ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Bridge over the gap so the panel stays open while the pointer crosses it. */
.elementor-nav-menu--main .elementor-nav-menu > li.wpml-ls-current-language > .sub-menu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: var(--svc-gap);
}

.elementor-nav-menu--main .elementor-nav-menu > li.wpml-ls-current-language > .sub-menu .elementor-sub-item {
	justify-content: center;
	padding: 0 19px;
	border: 0;
	border-radius: 52px;
	background-color: transparent;
	line-height: 45px;
	transition: background-color 200ms ease;
}

/* The text is WPML's span again (see .wpml-ls-display above for why). */
.elementor-nav-menu--main .elementor-nav-menu > li.wpml-ls-current-language > .sub-menu .wpml-ls-display {
	color: #02274c;
	font-family: "Gotham", sans-serif;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	text-shadow: 0.4px 0 0 transparent, -0.4px 0 0 transparent;
	transition: text-shadow 250ms ease;
}

.elementor-nav-menu--main .elementor-nav-menu > li.wpml-ls-current-language > .sub-menu .elementor-sub-item:hover,
.elementor-nav-menu--main .elementor-nav-menu > li.wpml-ls-current-language > .sub-menu .elementor-sub-item:focus-visible {
	background-color: rgba(2, 39, 76, 0.05);
}

.elementor-nav-menu--main .elementor-nav-menu > li.wpml-ls-current-language > .sub-menu .elementor-sub-item:hover .wpml-ls-display,
.elementor-nav-menu--main .elementor-nav-menu > li.wpml-ls-current-language > .sub-menu .elementor-sub-item:focus-visible .wpml-ls-display {
	text-shadow: 0.4px 0 0 currentColor, -0.4px 0 0 currentColor;
}

@keyframes itlang-drop {
	from {
		opacity: 0;
		translate: 0 -8px;
	}

	to {
		opacity: 1;
		translate: 0 0;
	}
}

/* The movement is decoration; the panel still opens without it. */
@media (prefers-reduced-motion: reduce) {
	.elementor-nav-menu li.wpml-ls-current-language > .sub-menu.elementor-nav-menu--dropdown {
		animation: none;
	}

	.elementor-nav-menu li.wpml-ls-current-language .sub-arrow::after {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Small screens
 *
 * The menu collapses to Elementor's burger panel, where the items are stacked full width.
 * A vertical rule and a right-hand chevron both stop making sense there.
 * ------------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.elementor-nav-menu--dropdown > li.wpml-ls-current-language {
		margin-left: 0;
	}

	.elementor-nav-menu--dropdown > li.wpml-ls-current-language::before {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * The hover / current pill
 *
 * A pale rounded panel behind whichever link is hovered or is the page you are on.
 *
 * It is the link's own ::before, inset past both edges. Two things had to be learned to get
 * here, and both are worth knowing before editing this:
 *
 * 1. Padding is not an option. The eight links already fill 1203px of a 1274px header, so
 *    16px either side would add 256px and push the menu out of it. The pill is therefore
 *    sized with negative insets, taking up no room at all.
 *
 * 2. It cannot hang off the list item either. 100% there resolves against the item, which is
 *    wider than the link by the 14px margin between links -- so a centred pill sat 7px to the
 *    right of the text it was meant to sit behind. On the link, left and right simply mirror.
 *
 * The two !important declarations are not decoration. Elementor's menu is set to pointer
 * "none", which sets content: none on this pseudo-element and a background with !important;
 * both have to be answered in kind. Nothing else here needs one.
 * ------------------------------------------------------------------------ */

.elementor-nav-menu > li:not(.wpml-ls-current-language) > a.elementor-item::before,
.elementor-nav-menu--main .elementor-nav-menu > li.wpml-ls-current-language > a.elementor-item::before {
	/* Figma: rgba(0, 147, 213, 0.06), 45 tall, 17 past the words -- but never further than the
	 * space to the next link, or a hovered pill and the current-page pill run into each other (and
	 * the last one into EN's rule). So: 2px short of each link's margin -- 12 at the usual 14,
	 * 8 where the laptop bar tightens the links to 10. */
	--pill-bg: rgba(0, 147, 213, 0.06);
	--pill-grow: min(17px, calc(var(--e-nav-menu-horizontal-menu-item-margin, 14px) - 2px));
	--pill-h: 45px;

	content: "" !important;
	display: block;
	position: absolute;
	left: calc(-1 * var(--pill-grow));
	right: calc(-1 * var(--pill-grow));
	top: 50%;
	translate: 0 -50%;
	height: var(--pill-h);
	border-radius: 999px;
	background-color: var(--pill-bg) !important;

	/* Behind the label. The link sets no z-index of its own, so the text stays above. */
	z-index: -1;
	opacity: 0;
	transition: opacity 200ms ease;
	pointer-events: none;
}

/*
 * :has() rather than a class on the item, because the current page is marked on the link
 * while both of WordPress's and Elementor's markers are listed -- they do not always agree
 * on which one is present.
 */
.elementor-nav-menu > li:not(.wpml-ls-current-language) > a.elementor-item:hover::before,
.elementor-nav-menu > li:not(.wpml-ls-current-language) > a.elementor-item:focus-visible::before,
.elementor-nav-menu > li:not(.wpml-ls-current-language) > a.elementor-item.elementor-item-active::before,
.elementor-nav-menu > li.current-menu-item:not(.wpml-ls-current-language) > a.elementor-item::before,
.elementor-nav-menu--main .elementor-nav-menu > li.wpml-ls-current-language:hover > a.elementor-item::before,
.elementor-nav-menu--main .elementor-nav-menu > li.wpml-ls-current-language > a.elementor-item[aria-expanded="true"]::before {
	opacity: 1;
}

/* Stacked full width in the burger panel, where a pill centred on the text reads as a stray
 * blob rather than a highlight. */
@media (max-width: 1024px) {
	.elementor-nav-menu--dropdown > li > a.elementor-item::before {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * The sticky header, once the page has moved
 *
 * White from the moment Elementor marks the header as scrolled -- its own
 * elementor-sticky--effects state, which it adds past the 10px offset set on the container.
 * At the top of the page nothing changes: the header keeps the faint grey it has always had.
 *
 * The header template already carries a rule meant to do this, and it cannot work: it looks for
 * .elementor-sticky--effects on an ANCESTOR of the container while Elementor puts that class on
 * the container itself, so it has never matched anything. Hence this one.
 *
 * Five classes and an !important, because the home page sets its own grey at (0,4,0) with an
 * !important of its own -- all five are already on the element, no widget id in sight, so a
 * rebuilt header keeps this as long as it keeps .ct-header.
 *
 * Two selectors, both (0,5,0), because .ct-header came off the container at some point while
 * the header was being edited and the rule stopped matching anything. The second names no class
 * of ours at all -- it is the sticky container inside the header template, whatever it is
 * called -- so this keeps working whether that class comes back or not.
 *
 * Laptop and desktop only, as asked.
 * ------------------------------------------------------------------------ */

@media (min-width: 1025px) {
	.elementor-location-header .e-con.e-con-full.ct-header.elementor-sticky--effects,
	.elementor-location-header .e-con.e-con-full.e-child.elementor-sticky--effects {
		background-color: #ffffff !important;
	}
}

/* ---------------------------------------------------------------------------
 * The Services panel (laptop Figma 198:4605)
 *
 * Any other item with children in the bar -- today only Services and its eight services --
 * opens a pale #F0F9FC panel 377 wide, centred under the item and starting on the bar's foot;
 * rows 45 tall in Book 14 uppercase navy, the hovered or current one on a 5% navy pill and
 * bold. The chevron is drawn like the language one, in the link's navy.
 *
 * SmartMenus writes left, margin and width inline when it opens the panel, hence the
 * !important on those four. The panel hangs 27 below the link (the bar's foot); an invisible
 * bridge over that gap keeps it open while the pointer crosses.
 * ------------------------------------------------------------------------ */

.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children:not(.wpml-ls-current-language) > a.elementor-item {
	gap: 6px;
}

.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children:not(.wpml-ls-current-language) .sub-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 10px;
	height: 10px;
	margin: 0;
	padding: 0;
}

.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children:not(.wpml-ls-current-language) > a > .sub-arrow svg,
.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children:not(.wpml-ls-current-language) > a > .sub-arrow i {
	display: none;
}

.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children:not(.wpml-ls-current-language) > a > .sub-arrow::after {
	content: "";
	display: block;
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	translate: 0 -2px;
	rotate: 45deg;
	transition: rotate 220ms ease, translate 220ms ease;
}

.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children:not(.wpml-ls-current-language) > a[aria-expanded="true"] > .sub-arrow::after {
	translate: 0 1px;
	rotate: 225deg;
}

.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children:not(.wpml-ls-current-language) > .sub-menu {
	--svc-gap: 27px;

	left: 50% !important;
	width: 377px !important;
	min-width: 0 !important;
	margin-left: 0 !important;
	padding: 12px 11px 16px;
	border: 0;
	border-radius: 30px;
	background-color: #f0f9fc;
	box-shadow: none;
	transform: translate(-50%, var(--svc-gap));
	animation: itlang-drop 190ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children:not(.wpml-ls-current-language) > .sub-menu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: var(--svc-gap);
}

.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children:not(.wpml-ls-current-language) > .sub-menu .elementor-sub-item {
	padding: 0 19px;
	border: 0;
	border-radius: 52px;
	background-color: transparent;
	color: #02274c;
	font-family: "Gotham", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 45px;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	white-space: nowrap;
	text-shadow: 0.4px 0 0 transparent, -0.4px 0 0 transparent;
	transition: background-color 200ms ease, text-shadow 250ms ease;
}

.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children:not(.wpml-ls-current-language) > .sub-menu .elementor-sub-item:hover,
.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children:not(.wpml-ls-current-language) > .sub-menu .elementor-sub-item:focus-visible,
.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children:not(.wpml-ls-current-language) > .sub-menu .elementor-sub-item.elementor-item-active {
	background-color: rgba(2, 39, 76, 0.05);
	color: #02274c;
	/* Bold by stroke, not weight: a weight change cannot animate and widens the label. */
	text-shadow: 0.4px 0 0 currentColor, -0.4px 0 0 currentColor;
}

@media (prefers-reduced-motion: reduce) {
	.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children:not(.wpml-ls-current-language) > .sub-menu {
		animation: none;
	}
}

/* The narrowest laptop bar (1201-1260): 10 between links instead of 14, so the menu with EN still
 * fits on one line beside a desktop scrollbar. The EN rule above follows the same variable. */
@media (min-width: 1201px) and (max-width: 1260px) {
	.elementor-location-header .elementor-nav-menu--main {
		--e-nav-menu-horizontal-menu-item-margin: 10px;
	}
}

/* ---------------------------------------------------------------------------
 * Phones (<= 767): the header and its menu, from Figma "Mobile: V1" (menu frames 4782:1948, 4782:2791)
 *
 * The bar's size is set in Elementor (header template, phone values). Here:
 *  - the bar is white, and on the home page takes the design's faint grey while the page sits at
 *    its top (html.it-top, set by this plugin's few lines of script);
 *  - the burger becomes the design's list icon (navy, 24);
 *  - the dropdown becomes a full-screen #F7F7F8 page with the items centred inside a ring that
 *    fades out towards the bottom: 45-tall rows 18 apart, the current one on a pale pill, Services
 *    with a mint chevron opening its eight services as 45-tall lines over a hairline, and EN / TH
 *    as a two-part pill at the foot.
 * Scoped by .it-mhead (the phone/tablet header) and this media query; tablet keeps its own look.
 * ------------------------------------------------------------------------ */

@media (max-width: 767px) {
	.it-mhead {
		--mh-navy: #02274c;
		--mh-pill: rgba(0, 147, 213, 0.06);
	}

	.it-mhead > .e-con {
		background-color: #ffffff;
	}

	/* Logo and icon stay above the open menu. */
	.it-mhead .elementor-widget-theme-site-logo,
	.it-mhead .elementor-menu-toggle {
		position: relative;
		z-index: 2;
	}

	.it-mhead .elementor-menu-toggle {
		width: 24px;
		height: 24px;
		padding: 0;
		border: 0;
		background: none !important;
	}

	.it-mhead .elementor-menu-toggle svg,
	.it-mhead .elementor-menu-toggle i {
		display: none !important;
	}

	.it-mhead .elementor-menu-toggle::before {
		content: "";
		display: block;
		width: 24px;
		height: 24px;
		background-color: var(--mh-navy);
		-webkit-mask: 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='M3 5h.01M3 12h.01M3 19h.01M8 5h13M8 12h13M8 19h13'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
		mask: 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='M3 5h.01M3 12h.01M3 19h.01M8 5h13M8 12h13M8 19h13'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
	}

	/* The menu: a page of its own, faded in. Elementor's stretch writes width and left inline. */
	body .it-mhead.e-con .elementor-menu-toggle + .elementor-nav-menu__container.elementor-nav-menu--dropdown {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		z-index: 1;
		width: 100% !important;
		height: 100vh;
		height: 100dvh;
		max-height: none !important;
		margin: 0 !important;
		padding: 100px 36px 60px;
		overflow-y: auto !important;
		overscroll-behavior: contain;
		background-color: #f7f7f8;
		box-shadow: none;
		transform: none !important;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0s linear 0.3s !important;
	}

	body .it-mhead.e-con .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container.elementor-nav-menu--dropdown {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.3s ease !important;
	}

	.it-mhead .elementor-nav-menu--dropdown > ul.elementor-nav-menu {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 18px;
		min-height: 796px;
		padding: 82px 0 60px;
	}

	/* The ring: 2px, navy at the top, mint lower down, gone before the bottom (Figma's gradient). */
	.it-mhead .elementor-nav-menu--dropdown > ul.elementor-nav-menu::before {
		content: "";
		position: absolute;
		inset: 0;
		border: 2px solid transparent;
		border-radius: 50px;
		background: linear-gradient(180deg, #387ea8 0%, #387ea8 23%, #90d2c1 58.5%, rgba(144, 210, 193, 0.22) 70.4%, rgba(144, 210, 193, 0) 92.8%) border-box;
		-webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
		-webkit-mask-composite: xor;
		mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
		pointer-events: none;
	}

	.it-mhead .elementor-nav-menu--dropdown li {
		width: 100%;
		border: 0 !important;
		text-align: center;
	}

	.it-mhead .elementor-nav-menu--dropdown .elementor-item {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		gap: 6px;
		min-width: 176px;
		height: 45px;
		padding: 0 24px !important;
		border: 0 !important;
		border-radius: 48px;
		background-color: transparent !important;
		color: var(--mh-navy) !important;
		line-height: 1 !important;
	}

	/* The bar's hover pill (a ::before, top of this file) is not for this menu: it has its own. */
	.it-mhead .elementor-nav-menu--dropdown .elementor-item::before {
		display: none !important;
	}

	.it-mhead .elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
	.it-mhead .elementor-nav-menu--dropdown .elementor-item.highlighted,
	.it-mhead .elementor-nav-menu--dropdown .elementor-sub-item.elementor-item-active {
		background-color: var(--mh-pill) !important;
		font-weight: 500;
	}

	/* Services' chevron: mint, down when closed, up when open. */
	.it-mhead .elementor-nav-menu--dropdown .elementor-item .sub-arrow {
		display: block;
		width: 8px;
		height: 5px;
		margin: 0;
		padding: 0;
	}

	.it-mhead .elementor-nav-menu--dropdown .elementor-item .sub-arrow svg,
	.it-mhead .elementor-nav-menu--dropdown .elementor-item .sub-arrow i {
		display: none;
	}

	.it-mhead .elementor-nav-menu--dropdown .elementor-item .sub-arrow::after {
		content: "";
		display: block;
		width: 8px;
		height: 5px;
		background-color: #90d2c1;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8.235 5.178' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M.53 4.648 4.117 1.06l3.587 3.587'/%3E%3C/svg%3E") center / 8px 5px no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8.235 5.178' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M.53 4.648 4.117 1.06l3.587 3.587'/%3E%3C/svg%3E") center / 8px 5px no-repeat;
		rotate: 180deg;
		transition: rotate 220ms ease;
	}

	.it-mhead .elementor-nav-menu--dropdown .elementor-item.highlighted .sub-arrow::after {
		rotate: 0deg;
	}

	.it-mhead .elementor-nav-menu--dropdown .sub-menu {
		position: static !important;
		width: 100% !important;
		min-width: 0 !important;
		margin: 6px 0 0 !important;
		padding: 0;
		border: 0 !important;
		background: none !important;
		box-shadow: none !important;
	}

	.it-mhead .elementor-nav-menu--dropdown li:not(.wpml-ls-current-language) > .sub-menu::after {
		content: "";
		display: block;
		width: 316px;
		max-width: 90%;
		margin: 21px auto 0;
		border-top: 1px solid rgba(167, 169, 172, 0.3);
	}

	.it-mhead .elementor-nav-menu--dropdown .elementor-sub-item {
		display: block !important;
		width: 343px;
		max-width: 100%;
		height: 45px;
		margin: 0 auto;
		padding: 0 8px !important;
		border: 0 !important;
		border-radius: 48px;
		background-color: transparent !important;
		color: var(--mh-navy) !important;
		line-height: 45px !important;
		text-align: center;
		white-space: nowrap;
	}

	/* EN / TH: a 194 x 55 pale pill, the current language on a white 94 x 45 inside it. */
	/* Figma 4782:2785 / 2728: the pill 194 x 55, 64 under CONTACT US's letters; the white 94 x 45 in
	 * 7 from the left and 5 down; TH centred 47.5 in from the right (the rest of the pill, 91 wide). */
	.it-mhead .elementor-nav-menu--dropdown > ul > li.wpml-ls-current-language {
		display: flex;
		box-sizing: border-box;
		width: 194px;
		height: 55px;
		margin: 15.5px auto 0;
		padding: 5px 2px 5px 7px;
		border-radius: 48px;
		background-color: var(--mh-pill);
	}

	.it-mhead .elementor-nav-menu--dropdown li.wpml-ls-current-language > .sub-menu {
		display: block !important;
		width: auto !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.it-mhead .elementor-nav-menu--dropdown li.wpml-ls-current-language .elementor-item,
	.it-mhead .elementor-nav-menu--dropdown li.wpml-ls-current-language .elementor-sub-item {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 94px;
		min-width: 0;
		height: 45px;
		padding: 0 !important;

		/* Montserrat Bold 14, 5% tracking; !important because the menu's own typography outranks a class rule. */
		font-family: "Montserrat", "Gotham", sans-serif !important;
		font-size: 14px !important;
		font-weight: 700 !important;
		letter-spacing: 0.7px !important;
		line-height: 17px !important;
	}

	.it-mhead .elementor-nav-menu--dropdown li.wpml-ls-current-language .elementor-sub-item {
		width: 91px;
	}

	.it-mhead .elementor-nav-menu--dropdown li.wpml-ls-current-language > .elementor-item {
		background-color: #ffffff !important;
	}

	.it-mhead .elementor-nav-menu--dropdown li.wpml-ls-current-language .sub-arrow {
		display: none;
	}

	/* The bar's mint rule before EN does not belong in the pill. */
	.it-mhead .elementor-nav-menu--dropdown li.wpml-ls-current-language::before {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * The home page header before it sticks: the design's faint grey (rgba(167,169,172,.09), #F7F7F7 on
 * the white page), so the bar reads as a panel instead of vanishing into the white hero -- only
 * while the page sits at its very top (html.it-top); from the first pixel of scroll it is white,
 * at once, like every other page. The bar is the one
 * container with Elementor's sticky class; the menu container inside it is left alone.
 * Below 1201 the burger bar does the same while the page sits at its top (html.it-top).
 * ------------------------------------------------------------------------ */

@media (min-width: 1201px) {
	/* White the moment the page moves (html.it-top drops at the first pixel) -- no fade. */
	body.home .elementor-location-header .e-con.elementor-sticky:not(.elementor-sticky__spacer) {
		transition-property: none !important;
	}

	html.it-top body.home .elementor-location-header .e-con.elementor-sticky:not(.elementor-sticky__spacer) {
		background-color: rgba(167, 169, 172, 0.09) !important;
	}
}

@media (max-width: 1200px) {
	html.it-top body.home .it-mhead > .e-con {
		background-color: rgba(167, 169, 172, 0.09);
		box-shadow: none;
	}
}

/* Phone menu, opening (user request): the page of links flows down from the top edge instead of
 * only fading -- revealed top to bottom with a soft ease-out, the ring drifting down into place and
 * the links arriving one after another. Closing runs it back up, quicker. Elementor still owns the
 * open state (.elementor-active on the toggle); only the motion is set here. */
@media (max-width: 767px) {
	body .it-mhead.e-con .elementor-menu-toggle + .elementor-nav-menu__container.elementor-nav-menu--dropdown {
		clip-path: inset(0 0 100% 0);
		transition:
			clip-path 0.42s cubic-bezier(0.4, 0, 0.2, 1),
			opacity 0.3s ease 0.12s,
			visibility 0s linear 0.42s !important;
	}

	body .it-mhead.e-con .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container.elementor-nav-menu--dropdown {
		clip-path: inset(0 0 0 0);
		transition:
			clip-path 0.65s cubic-bezier(0.22, 1, 0.36, 1),
			opacity 0.2s ease,
			visibility 0s !important;
	}

	.it-mhead .elementor-nav-menu--dropdown > ul.elementor-nav-menu {
		opacity: 0;
		transform: translateY(-28px);
		transition: transform 0.35s ease, opacity 0.25s ease;
	}

	.it-mhead .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown > ul.elementor-nav-menu {
		opacity: 1;
		transform: none;
		transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.08s, opacity 0.45s ease 0.08s;
	}

	.it-mhead .elementor-nav-menu--dropdown > ul.elementor-nav-menu > li {
		opacity: 0;
		transform: translateY(-14px);
		transition: transform 0.25s ease, opacity 0.2s ease;
	}

	.it-mhead .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown > ul.elementor-nav-menu > li {
		opacity: 1;
		transform: none;
		transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) var(--it-mm-delay, 0.2s), opacity 0.45s ease var(--it-mm-delay, 0.2s);
	}

	.it-mhead .elementor-nav-menu--dropdown > ul.elementor-nav-menu > li:nth-child(1) { --it-mm-delay: 0.18s; }
	.it-mhead .elementor-nav-menu--dropdown > ul.elementor-nav-menu > li:nth-child(2) { --it-mm-delay: 0.23s; }
	.it-mhead .elementor-nav-menu--dropdown > ul.elementor-nav-menu > li:nth-child(3) { --it-mm-delay: 0.28s; }
	.it-mhead .elementor-nav-menu--dropdown > ul.elementor-nav-menu > li:nth-child(4) { --it-mm-delay: 0.33s; }
	.it-mhead .elementor-nav-menu--dropdown > ul.elementor-nav-menu > li:nth-child(5) { --it-mm-delay: 0.38s; }
	.it-mhead .elementor-nav-menu--dropdown > ul.elementor-nav-menu > li:nth-child(6) { --it-mm-delay: 0.43s; }
	.it-mhead .elementor-nav-menu--dropdown > ul.elementor-nav-menu > li:nth-child(7) { --it-mm-delay: 0.48s; }
	.it-mhead .elementor-nav-menu--dropdown > ul.elementor-nav-menu > li:nth-child(n+8) { --it-mm-delay: 0.53s; }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	body .it-mhead.e-con .elementor-menu-toggle + .elementor-nav-menu__container.elementor-nav-menu--dropdown,
	body .it-mhead.e-con .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container.elementor-nav-menu--dropdown {
		clip-path: none;
	}

	.it-mhead .elementor-nav-menu--dropdown > ul.elementor-nav-menu,
	.it-mhead .elementor-nav-menu--dropdown > ul.elementor-nav-menu > li {
		transform: none !important;
		transition-duration: 0.01ms !important;
	}
}

/* The page you are on reads a step heavier than the rest (Gotham Medium), on top of its pill.
 * Two extra classes up front: the header's own typography rule is (0,5,0). */
.elementor-widget-nav-menu.elementor-element .elementor-nav-menu > li:not(.wpml-ls-current-language) > a.elementor-item.elementor-item-active,
.elementor-widget-nav-menu.elementor-element .elementor-nav-menu > li.current-menu-item:not(.wpml-ls-current-language) > a.elementor-item,
.elementor-widget-nav-menu.elementor-element .elementor-nav-menu > li.current-menu-ancestor:not(.wpml-ls-current-language) > a.elementor-item {
	font-weight: 500;
}

/* Sections the footer links to (#board-of-directors ...) stop below the sticky header. */
.elementor-element[id]:not([id^="elementor"]) {
	scroll-margin-top: 120px;
}

/* Footer copyright line: the Privacy Policy link sits in the line's own colour; on hover it turns sky blue
 * and an underline draws in from left to right. */
.elementor-location-footer .elementor-heading-title a.it-privacy {
	color: inherit;
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
	padding-bottom: 2px;
	transition: color 0.3s, background-size 0.3s ease;
}
.elementor-location-footer .elementor-heading-title a.it-privacy:hover,
.elementor-location-footer .elementor-heading-title a.it-privacy:focus-visible {
	color: var(--e-global-color-secondary, #387EA8);
	background-size: 100% 1px;
}

/* Footer menus: the link for the page you're on stays bold. */
.elementor-location-footer .elementor-icon-list-item a[aria-current="page"] .elementor-icon-list-text {
	font-weight: 700;
}

/* The language pill stays clear of the mint rule drawn at the item's left edge:
 * label 23px from the rule (8 here + 15 from the item), pill 12px past it: 9.5px clear. */
:lang(th) .elementor-nav-menu--main .elementor-nav-menu > li.wpml-ls-current-language > a.elementor-item {
	margin-inline-start: 8px;
}
/* ...and the rule itself stays clear of the last link's pill. Thai only: the EN bar has
 * no spare width at 1280 and its pills already clear the rule. */
:lang(th) .elementor-nav-menu--main .elementor-nav-menu > li.wpml-ls-current-language {
	margin-inline-start: 12px;
}
.elementor-nav-menu--main .elementor-nav-menu > li.wpml-ls-current-language > a.elementor-item::before {
	--pill-grow: 12px;
}