/*
 * UAE Talent Map — styles
 *
 * Type and spacing scale from the block's own width using container query
 * units, so the graphic behaves like an image in any column. Every cqw value
 * is preceded by a pixel fallback for browsers without container query support
 * (Safari before 16), and the stacked layout below is declared twice: once as
 * a container query and once as a viewport media query, so small screens get
 * it either way.
 */

.utm-wrap {
	--utm-navy: #14306b;
	--utm-navy-deep: #0e2454;
	--utm-green: #1d6b3f;
	--utm-green-soft: #7bc48f;
	--utm-ink: #3d4a63;
	--utm-red: #d6202f;
	--utm-line: #dbe4f0;
	--utm-card: #fff;
	--utm-speed: 1;

	box-sizing: border-box;
	container-type: inline-size;
	max-width: var(--utm-max, 1440px);
	margin-inline: auto;
	width: 100%;
}

.utm-wrap *,
.utm-wrap *::before,
.utm-wrap *::after {
	box-sizing: border-box;
}

.utm-stage {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	border-radius: 1.1cqw;
	background: linear-gradient(180deg, #f4f8fd 0%, #e6effa 100%);
	font-family: var(--utm-body, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
	color: var(--utm-ink);
	line-height: 1.35;
	isolation: isolate;
}

/* ---------- Map ---------- */

.utm-mapbox {
	position: relative;
	aspect-ratio: 1440 / 730;
}

@supports not (aspect-ratio: 1 / 1) {
	.utm-mapbox {
		height: 0;
		padding-bottom: 50.7%;
	}

	.utm-map {
		position: absolute;
		inset: 0;
	}
}

.utm-map {
	display: block;
	width: 100%;
	height: 100%;
	transform-origin: 24% 45%;
}

.utm-land .utm-c {
	fill: #dde7f3;
	stroke: #f4f8fd;
	stroke-width: 0.7;
}

.utm-land .utm-in { fill: #f6dc95; }
.utm-land .utm-pk { fill: #c3e2c1; }
.utm-land .utm-bd { fill: #c3e2c1; }
.utm-land .utm-np { fill: #cfc8ec; }
.utm-land .utm-th { fill: #dbd1f0; }
.utm-land .utm-ph { fill: #f7ccd5; }
.utm-land .utm-lk { fill: #f7ccd5; }

.utm-land .utm-ae {
	fill: var(--utm-green);
	stroke: #fff;
	stroke-width: 1.4;
}

/* Flight routes and planes */

.utm-route {
	stroke: var(--utm-navy);
	stroke-width: 2;
	stroke-dasharray: 7 7;
	stroke-linecap: round;
	opacity: 0.85;
}

.utm-plane {
	fill: var(--utm-navy);
	opacity: 0;
}

.utm-plane > path {
	transform: scale(0.5) translate(-33.5px, -32px);
}

.utm-plane.is-flying {
	opacity: 1;
}

/* ---------- UAE hub badge ---------- */

.utm-hub-dot {
	fill: var(--utm-red);
	stroke: #fff;
	stroke-width: 2.4;
}

.utm-hub-halo {
	fill: none;
	stroke: var(--utm-green);
	stroke-width: 2;
	opacity: 0.4;
}

.utm-hub-ring {
	fill: none;
	stroke: #fff;
	stroke-width: 7;
	opacity: 0.8;
}

.utm-hub-disc {
	fill: #fff;
	stroke: #dbe6f4;
	stroke-width: 1.5;
}

.utm-hub-shape {
	fill: var(--utm-green);
	stroke: #fff;
	stroke-width: 1.6;
	filter: drop-shadow(0 1px 2px rgba(20, 48, 107, 0.25));
}

.utm-hub-label {
	fill: var(--utm-navy);
	font-family: var(--utm-display, "Barlow Condensed", "Oswald", "Roboto Condensed", "Arial Narrow", Arial, sans-serif);
	font-size: 30px;
	font-weight: 800;
	letter-spacing: 2.5px;
}

/* ---------- Country pins ---------- */

.utm-pins {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.utm-pin {
	position: absolute;
	width: 0;
	height: 0;
}

.utm-dot,
.utm-marker,
.utm-tag {
	position: absolute;
}

.utm-dot {
	left: 0;
	top: 0;
	width: 11px;
	width: 0.75cqw;
	height: 11px;
	height: 0.75cqw;
	min-width: 7px;
	min-height: 7px;
	margin: -5.5px 0 0 -5.5px;
	margin: -0.375cqw 0 0 -0.375cqw;
	border-radius: 50%;
	background: var(--utm-red);
	box-shadow: 0 0 0 2.5px rgba(255, 255, 255, 0.9);
	box-shadow: 0 0 0 0.18cqw rgba(255, 255, 255, 0.9);
}

.utm-marker {
	left: 50%;
	bottom: 0;
	width: 27px;
	width: 1.9cqw;
	min-width: 16px;
	height: auto;
	transform: translate(-50%, 0);
	fill: var(--utm-navy);
	filter: drop-shadow(0 2px 3px rgba(20, 48, 107, 0.3));
}

.utm-tag {
	display: flex;
	align-items: center;
	gap: 6px;
	gap: 0.4cqw;
	padding: 4px 10px 4px 5px;
	padding: 0.3cqw 0.7cqw 0.3cqw 0.35cqw;
	border-radius: 5px;
	border-radius: 0.35cqw;
	background: var(--utm-card);
	box-shadow: 0 2px 7px rgba(20, 48, 107, 0.16);
	white-space: nowrap;
	bottom: -15px;
	bottom: -1.05cqw;
	font-size: 13px;
	font-size: 0.95cqw;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--utm-navy);
}

.utm-pin--right .utm-tag { left: 20px; left: 1.4cqw; }
.utm-pin--left .utm-tag { right: 20px; right: 1.4cqw; }

.utm-flag {
	width: 23px;
	width: 1.6cqw;
	min-width: 16px;
	height: auto;
	flex: none;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(20, 48, 107, 0.12);
}

.utm-legend { display: none; }

/* Keep the on-map labels legible in mid-size columns. */
@container (min-width: 901px) and (max-width: 1200px) {
	.utm-tag { font-size: 1.25cqw; }
	.utm-flag { width: 2cqw; }
	.utm-marker { width: 2.4cqw; }
}

/* ---------- Header ---------- */

.utm-head {
	position: absolute;
	top: 23px;
	top: 1.6cqw;
	left: 50%;
	transform: translateX(-50%);
	width: 92%;
	text-align: center;
	z-index: 3;
}

.utm-title {
	margin: 0;
	font-family: var(--utm-display, "Barlow Condensed", "Oswald", "Roboto Condensed", "Arial Narrow", Arial, sans-serif);
	font-size: 45px;
	font-size: 3.1cqw;
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--utm-navy);
	text-shadow: 0 1px 4px rgba(244, 248, 253, 0.9);
}

.utm-title em {
	font-style: normal;
	color: var(--utm-green);
}

.utm-sub {
	margin: 7px 0 0;
	margin: 0.5cqw 0 0;
	font-size: 21px;
	font-size: 1.45cqw;
	font-weight: 400;
	color: #4a5670;
}

.utm-sub span {
	position: relative;
	padding: 0 35px;
	padding: 0 2.4cqw;
}

.utm-sub span::before,
.utm-sub span::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 29px;
	width: 2cqw;
	height: 1px;
	background: #a8b6cd;
}

.utm-sub span::before { left: 0; }
.utm-sub span::after { right: 0; }

/* ---------- Feature strip and footer bar ---------- */

.utm-features,
.utm-footer {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 76%;
	z-index: 3;
	margin: 0;
}

.utm-features {
	bottom: 109px;
	bottom: 7.6cqw;
	display: grid;
	grid-template-columns: repeat(var(--n, 5), 1fr);
	list-style: none;
	padding: 16px 9px;
	padding: 1.1cqw 0.6cqw;
	border-radius: 7px;
	border-radius: 0.5cqw;
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 4px 16px rgba(20, 48, 107, 0.12);
}

.utm-nofooter .utm-features {
	bottom: 37px;
	bottom: 2.6cqw;
}

.utm-features li {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	gap: 0.7cqw;
	padding: 0 13px;
	padding: 0 0.9cqw;
	font-size: 15px;
	font-size: 1.08cqw;
	font-weight: 500;
	color: #2d3a54;
	text-align: left;
}

.utm-features li + li {
	border-left: 1px solid var(--utm-line);
}

.utm-features li span {
	max-width: 115px;
	max-width: 8cqw;
}

.utm-ficon {
	width: 33px;
	width: 2.3cqw;
	min-width: 20px;
	height: auto;
	flex: none;
	color: var(--utm-green);
}

.utm-footer {
	bottom: 37px;
	bottom: 2.6cqw;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 13px;
	gap: 0.9cqw;
	padding: 14px 17px;
	padding: 0.95cqw 1.2cqw;
	border-radius: 7px;
	border-radius: 0.5cqw;
	background: var(--utm-navy);
	color: #fff;
	font-size: 22px;
	font-size: 1.55cqw;
	box-shadow: 0 4px 16px rgba(14, 36, 84, 0.28);
}

.utm-footer .utm-ficon {
	color: #fff;
	width: 29px;
	width: 2cqw;
}

/* ---------- Replay ---------- */

.utm-replay {
	position: absolute;
	right: 14px;
	top: 14px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border: 1px solid var(--utm-line);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.85);
	color: var(--utm-navy);
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.25s ease, background 0.2s ease;
}

.utm-replay svg {
	width: 14px;
	height: 14px;
}

.utm-stage:hover .utm-replay,
.utm-replay:focus-visible {
	opacity: 1;
}

.utm-replay:hover {
	background: #fff;
}

.utm-replay:focus-visible {
	outline: 2px solid var(--utm-navy);
	outline-offset: 2px;
}

/* ---------- Armed: pre-animation state, added by JS only ---------- */

.utm-armed .utm-map,
.utm-armed .utm-head,
.utm-armed .utm-hub,
.utm-armed .utm-hub-dot,
.utm-armed .utm-dot,
.utm-armed .utm-marker,
.utm-armed .utm-tag,
.utm-armed .utm-features,
.utm-armed .utm-footer {
	opacity: 0;
}

.utm-armed .utm-map { transform: scale(1.04); }

/* ---------- Animation ---------- */

@keyframes utm-map-in {
	from { opacity: 0; transform: scale(1.06); }
	to { opacity: 1; transform: scale(1); }
}

@keyframes utm-fade-down {
	from { opacity: 0; transform: translate(-50%, -13px); }
	to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes utm-fade-up {
	from { opacity: 0; transform: translate(-50%, 17px); }
	to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes utm-fade-plain {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes utm-pop {
	0% { opacity: 0; transform: scale(0.2); }
	60% { opacity: 1; transform: scale(1.25); }
	100% { opacity: 1; transform: scale(1); }
}

@keyframes utm-bubble {
	0% { opacity: 0; transform: translate(-50%, -220%) scale(0.4); }
	65% { opacity: 1; transform: translate(-50%, 6%) scale(1.06); }
	85% { transform: translate(-50%, -6%) scale(0.98); }
	100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@keyframes utm-tag-in {
	from { opacity: 0; transform: translateX(-9px) scale(0.9); }
	to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes utm-tag-in-left {
	from { opacity: 0; transform: translateX(9px) scale(0.9); }
	to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes utm-hub-in {
	0% { opacity: 0; transform: scale(0.5); }
	65% { opacity: 1; transform: scale(1.1); }
	100% { opacity: 1; transform: scale(1); }
}

@keyframes utm-hub-pulse {
	0% { transform: scale(0.9); opacity: 0.55; }
	70% { transform: scale(1.16); opacity: 0; }
	100% { transform: scale(1.16); opacity: 0; }
}

.utm-wrap.utm-armed.utm-run .utm-map {
	animation: utm-map-in calc(1s / var(--utm-speed)) cubic-bezier(0.22, 0.75, 0.3, 1) both;
}

.utm-wrap.utm-armed.utm-run .utm-head {
	animation: utm-fade-down calc(0.8s / var(--utm-speed)) ease-out calc(0.35s / var(--utm-speed)) both;
}

.utm-wrap.utm-armed.utm-run .utm-hub {
	animation: utm-hub-in calc(0.8s / var(--utm-speed)) cubic-bezier(0.2, 1.2, 0.4, 1) calc(0.7s / var(--utm-speed)) both;
}

.utm-wrap.utm-armed.utm-run .utm-hub-dot {
	animation: utm-pop calc(0.5s / var(--utm-speed)) ease-out calc(1.2s / var(--utm-speed)) both;
	transform-box: fill-box;
	transform-origin: center;
}

.utm-wrap .utm-hub,
.utm-wrap .utm-hub-halo,
.utm-wrap .utm-hub-ring {
	transform-box: fill-box;
	transform-origin: center;
}

.utm-wrap.utm-armed.utm-run .utm-hub-halo {
	animation: utm-hub-pulse calc(2.6s / var(--utm-speed)) ease-out calc(1.4s / var(--utm-speed)) 3;
}

/* Markers: dot, then the pin bubbles down, then the label. */

.utm-wrap.utm-armed.utm-run .utm-dot {
	animation: utm-pop calc(0.4s / var(--utm-speed)) ease-out calc((1.05s + var(--i) * 0.13s) / var(--utm-speed)) both;
}

.utm-wrap.utm-armed.utm-run .utm-marker {
	animation: utm-bubble calc(0.65s / var(--utm-speed)) cubic-bezier(0.3, 1.4, 0.45, 1) calc((1.1s + var(--i) * 0.13s) / var(--utm-speed)) both;
}

.utm-wrap.utm-armed.utm-run .utm-pin--right .utm-tag {
	animation: utm-tag-in calc(0.45s / var(--utm-speed)) ease-out calc((1.4s + var(--i) * 0.13s) / var(--utm-speed)) both;
}

.utm-wrap.utm-armed.utm-run .utm-pin--left .utm-tag {
	animation: utm-tag-in-left calc(0.45s / var(--utm-speed)) ease-out calc((1.4s + var(--i) * 0.13s) / var(--utm-speed)) both;
}

.utm-wrap.utm-armed.utm-run .utm-features {
	animation: utm-fade-up calc(0.8s / var(--utm-speed)) ease-out calc(3.5s / var(--utm-speed)) both;
}

.utm-wrap.utm-armed.utm-run .utm-footer {
	animation: utm-fade-up calc(0.8s / var(--utm-speed)) ease-out calc(3.8s / var(--utm-speed)) both;
}

@media (prefers-reduced-motion: reduce) {
	.utm-wrap .utm-hub-halo { animation: none; }
	.utm-wrap .utm-replay { display: none; }
}

/* ---------- Narrow: container query version ---------- */

@container (max-width: 900px) {

	/* Stacked layout: headline, map, flag legend, features, footer bar. */
	.utm-stage {
		display: flex;
		flex-direction: column;
		gap: 14px;
		padding: 16px 12px 18px;
		border-radius: 12px;
	}

	.utm-head,
	.utm-features,
	.utm-footer {
		position: static;
		left: auto;
		right: auto;
		top: auto;
		bottom: auto;
		width: 100%;
		transform: none;
	}

	.utm-head { order: 1; }
	.utm-mapbox { order: 2; }
	.utm-legend { order: 3; }
	.utm-features { order: 4; }
	.utm-footer { order: 5; }
	.utm-stage > *:last-child { margin-bottom: 0; }

	.utm-title {
		font-size: 26px;
		font-size: clamp(20px, 5.6cqw, 34px);
		text-shadow: none;
	}

	.utm-sub {
		margin-top: 6px;
		font-size: 13px;
		font-size: clamp(12px, 2.5cqw, 16px);
	}

	.utm-sub span { padding: 0; }
	.utm-sub span::before,
	.utm-sub span::after { display: none; }

	/* On-map labels would collide at this size, so they move to a legend. */
	.utm-tag { display: none; }

	.utm-marker { width: 18px; min-width: 0; }
	.utm-dot { width: 7px; height: 7px; min-width: 0; min-height: 0; margin: -3.5px 0 0 -3.5px; box-shadow: 0 0 0 2px rgba(255,255,255,.9); }
	.utm-route { stroke-width: 5; stroke-dasharray: 16 16; }
	.utm-plane > path { transform: scale(1.15) translate(-33.5px, -32px); }

	.utm-legend {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 6px 8px;
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.utm-legend li {
		display: flex;
		align-items: center;
		gap: 5px;
		padding: 4px 8px;
		border-radius: 999px;
		background: #fff;
		box-shadow: 0 1px 4px rgba(20, 48, 107, 0.12);
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.02em;
		text-transform: uppercase;
		color: var(--utm-navy);
	}

	.utm-legend .utm-flag { width: 16px; min-width: 0; }

	.utm-features {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
		padding: 12px 10px;
		border-radius: 10px;
	}

	.utm-features li {
		flex-direction: row;
		gap: 8px;
		padding: 0 4px;
		font-size: 12px;
		text-align: left;
	}

	.utm-features li + li { border-left: 0; }
	.utm-features li span { max-width: none; }
	.utm-features li:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.utm-ficon { width: 22px; min-width: 0; }

	.utm-footer {
		gap: 8px;
		padding: 10px 12px;
		border-radius: 10px;
		font-size: 13px;
		text-align: center;
	}

	.utm-footer .utm-ficon { width: 18px; }
	.utm-replay { top: auto; bottom: 8px; right: 8px; opacity: 1; }

	/* The overlay animations translate on X; the stacked ones must not. */
	.utm-wrap.utm-armed.utm-run .utm-head,
	.utm-wrap.utm-armed.utm-run .utm-features,
	.utm-wrap.utm-armed.utm-run .utm-footer {
		animation-name: utm-fade-plain;
	}
}

/* ---------- Narrow: viewport fallback for browsers without container queries ---------- */

@media (max-width: 900px) {

	/* Stacked layout: headline, map, flag legend, features, footer bar. */
	.utm-stage {
		display: flex;
		flex-direction: column;
		gap: 14px;
		padding: 16px 12px 18px;
		border-radius: 12px;
	}

	.utm-head,
	.utm-features,
	.utm-footer {
		position: static;
		left: auto;
		right: auto;
		top: auto;
		bottom: auto;
		width: 100%;
		transform: none;
	}

	.utm-head { order: 1; }
	.utm-mapbox { order: 2; }
	.utm-legend { order: 3; }
	.utm-features { order: 4; }
	.utm-footer { order: 5; }
	.utm-stage > *:last-child { margin-bottom: 0; }

	.utm-title {
		font-size: 26px;
		font-size: clamp(20px, 5.6cqw, 34px);
		text-shadow: none;
	}

	.utm-sub {
		margin-top: 6px;
		font-size: 13px;
		font-size: clamp(12px, 2.5cqw, 16px);
	}

	.utm-sub span { padding: 0; }
	.utm-sub span::before,
	.utm-sub span::after { display: none; }

	/* On-map labels would collide at this size, so they move to a legend. */
	.utm-tag { display: none; }

	.utm-marker { width: 18px; min-width: 0; }
	.utm-dot { width: 7px; height: 7px; min-width: 0; min-height: 0; margin: -3.5px 0 0 -3.5px; box-shadow: 0 0 0 2px rgba(255,255,255,.9); }
	.utm-route { stroke-width: 5; stroke-dasharray: 16 16; }
	.utm-plane > path { transform: scale(1.15) translate(-33.5px, -32px); }

	.utm-legend {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 6px 8px;
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.utm-legend li {
		display: flex;
		align-items: center;
		gap: 5px;
		padding: 4px 8px;
		border-radius: 999px;
		background: #fff;
		box-shadow: 0 1px 4px rgba(20, 48, 107, 0.12);
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.02em;
		text-transform: uppercase;
		color: var(--utm-navy);
	}

	.utm-legend .utm-flag { width: 16px; min-width: 0; }

	.utm-features {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
		padding: 12px 10px;
		border-radius: 10px;
	}

	.utm-features li {
		flex-direction: row;
		gap: 8px;
		padding: 0 4px;
		font-size: 12px;
		text-align: left;
	}

	.utm-features li + li { border-left: 0; }
	.utm-features li span { max-width: none; }
	.utm-features li:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.utm-ficon { width: 22px; min-width: 0; }

	.utm-footer {
		gap: 8px;
		padding: 10px 12px;
		border-radius: 10px;
		font-size: 13px;
		text-align: center;
	}

	.utm-footer .utm-ficon { width: 18px; }
	.utm-replay { top: auto; bottom: 8px; right: 8px; opacity: 1; }

	/* The overlay animations translate on X; the stacked ones must not. */
	.utm-wrap.utm-armed.utm-run .utm-head,
	.utm-wrap.utm-armed.utm-run .utm-features,
	.utm-wrap.utm-armed.utm-run .utm-footer {
		animation-name: utm-fade-plain;
	}
}