.partners-map-page {
	--pm-bg: #05090a;
	--pm-text: #f4f7f7;
	--pm-muted: #8d9b9c;
	--pm-teal: #28d7cf;
	--pm-orange: #ff7a2f;
	--pm-amber: #ffb000;
	--pm-line: rgba(255, 255, 255, 0.105);
	--pm-ease: cubic-bezier(0.2, 0.75, 0.22, 1);
	position: relative;
	min-height: 100svh;
	isolation: isolate;
	overflow: hidden;
	color: var(--pm-text);
	background:
		radial-gradient(circle at 75% 13%, rgba(40, 215, 207, 0.11), transparent 30%),
		radial-gradient(circle at 15% 74%, rgba(255, 122, 47, 0.065), transparent 27%),
		linear-gradient(180deg, #071012 0%, #05090a 62%, #040607 100%);
}

.partners-map-page::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0.25;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
	background-size: 54px 54px;
	mask-image: linear-gradient(180deg, #000, transparent 84%);
}

.partners-map-wrap {
	width: min(1420px, calc(100% - 40px));
	margin-inline: auto;
}

.partners-map-hero {
	padding: clamp(145px, 13vw, 185px) 0 70px;
}

.partners-map-heading {
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(330px, 0.68fr);
	align-items: end;
	gap: 44px;
	margin-bottom: 28px;
}

.partners-map-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--pm-teal);
	font-size: 11px;
	font-weight: 700;
}

.partners-map-eyebrow::before {
	content: "";
	width: 30px;
	height: 1px;
	background: currentColor;
}

.partners-map-heading h1 {
	margin: 14px 0 0;
	font-size: clamp(43px, 6.2vw, 84px);
	font-weight: 650;
	line-height: 1.04;
	letter-spacing: -0.065em;
}

.partners-map-heading h1 span { color: #6d7778; }

.partners-map-copy {
	max-width: 530px;
	margin: 0;
	color: var(--pm-muted);
	font-size: 14px;
	line-height: 2;
}

.partners-map-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
}

.partners-map-meta span {
	padding: 8px 12px;
	border: 1px solid var(--pm-line);
	border-radius: 999px;
	color: #acb8b9;
	background: rgba(255, 255, 255, 0.025);
	font-size: 9px;
}

.partners-map-story {
	position: relative;
	min-height: clamp(690px, 60vw, 820px);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: clamp(24px, 3vw, 40px);
	overflow: hidden;
	isolation: isolate;
	background: #081011;
	box-shadow: 0 48px 130px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.partners-map-story::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(4, 8, 9, 0.48), transparent 23%, transparent 72%, rgba(4, 8, 9, 0.18)),
		linear-gradient(180deg, rgba(4, 8, 9, 0.28), transparent 20%, transparent 67%, rgba(4, 8, 9, 0.74));
}

.partners-map-story::after {
	content: "DARC / PARTNERS NETWORK";
	position: absolute;
	right: 30px;
	bottom: 24px;
	z-index: 8;
	color: rgba(255, 255, 255, 0.28);
	font-size: 8px;
	letter-spacing: 0.26em;
	direction: ltr;
	pointer-events: none;
}

#partnersMap {
	position: absolute;
	inset: 0;
	z-index: 1;
	direction: ltr;
}

.partners-map-page .maplibregl-map { font-family: "Alexandria", sans-serif; }
.partners-map-page .maplibregl-canvas { filter: saturate(0.66) contrast(1.08) brightness(0.72) hue-rotate(142deg); }
.partners-map-page .maplibregl-ctrl-bottom-left { display: none; }
.partners-map-page .maplibregl-ctrl-bottom-right { z-index: 9; margin: 0 22px 18px 0; opacity: 0.58; }
.partners-map-page .maplibregl-ctrl-attrib { color: #94a1a2; background: rgba(4, 8, 9, 0.72) !important; font-size: 8px; }
.partners-map-page .maplibregl-ctrl-attrib a { color: #b9c4c4; }

.partners-map-grid {
	position: absolute;
	inset: 0;
	z-index: 3;
	opacity: 0.16;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
	background-size: 80px 80px;
	mask-image: radial-gradient(circle at center, black, transparent 82%);
}

.partners-map-glow {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	opacity: 0.22;
	background: radial-gradient(circle at 64% 46%, rgba(40, 215, 207, 0.17), transparent 28%);
	mix-blend-mode: screen;
}

.partners-map-loading {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	color: #788687;
	font-size: 11px;
	transition: opacity 0.5s ease;
}

.partners-map-loading::before {
	content: "";
	width: 42px;
	height: 42px;
	margin-left: 12px;
	border: 1px solid rgba(40, 215, 207, 0.18);
	border-top-color: var(--pm-teal);
	border-radius: 50%;
	display: inline-block;
	vertical-align: middle;
	animation: partnersMapSpin 1s linear infinite;
}

.partners-map-story.is-loaded .partners-map-loading { opacity: 0; pointer-events: none; }
@keyframes partnersMapSpin { to { transform: rotate(360deg); } }

.partners-map-topbar {
	position: absolute;
	top: 22px;
	right: 24px;
	left: 24px;
	z-index: 12;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	pointer-events: none;
}

.partners-map-state,
.partners-map-count {
	min-height: 38px;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 0 14px;
	border: 1px solid var(--pm-line);
	border-radius: 999px;
	color: #b2bdbd;
	background: rgba(4, 9, 10, 0.68);
	backdrop-filter: blur(14px);
	font-size: 9px;
}

.partners-map-state b,
.partners-map-count b { color: #fff; font-size: 12px; }

.partners-map-state-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--pm-teal);
	box-shadow: 0 0 0 5px rgba(40, 215, 207, 0.08), 0 0 20px var(--pm-teal);
	animation: partnersMapBreathe 1.6s ease-in-out infinite;
}

@keyframes partnersMapBreathe { 50% { opacity: 0.55; transform: scale(0.72); } }

.partners-map-card {
	position: absolute;
	right: 28px;
	bottom: 62px;
	z-index: 12;
	width: min(400px, calc(100% - 56px));
	padding: 22px;
	border: 1px solid rgba(255, 255, 255, 0.11);
	border-radius: 22px;
	background: linear-gradient(145deg, rgba(12, 21, 23, 0.86), rgba(5, 10, 11, 0.8));
	backdrop-filter: blur(22px) saturate(1.2);
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.partners-map-kicker {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	color: var(--pm-teal);
	font-size: 9px;
	font-weight: 700;
}

#partnersStoryIndex { color: #697576; direction: ltr; letter-spacing: 0.14em; }
.partners-map-card h2 { margin: 12px 0 8px; font-size: clamp(22px, 2.8vw, 34px); line-height: 1.35; font-weight: 600; }
.partners-map-card > p { min-height: 48px; margin: 0; color: #98a5a6; font-size: 11px; line-height: 1.9; }

.partners-map-progress {
	height: 2px;
	margin: 18px 0 16px;
	overflow: hidden;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.09);
}

.partners-map-progress span {
	display: block;
	width: 25%;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--pm-teal), var(--pm-orange));
	transition: width 0.7s var(--pm-ease);
}

.partners-map-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.partners-map-steps button {
	min-height: 38px;
	padding: 0 8px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	color: #829091;
	background: rgba(255, 255, 255, 0.025);
	font-size: 9px;
	cursor: pointer;
	transition: 0.25s ease;
}
.partners-map-steps button:hover { color: #fff; transform: translateY(-1px); }
.partners-map-steps button.is-active { color: #071011; border-color: var(--pm-teal); background: var(--pm-teal); font-weight: 700; }

.partners-map-replay {
	position: absolute;
	left: 26px;
	bottom: 62px;
	z-index: 12;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 0 16px;
	border: 1px solid var(--pm-line);
	border-radius: 999px;
	color: #fff;
	background: rgba(4, 9, 10, 0.66);
	backdrop-filter: blur(14px);
	font-size: 10px;
	cursor: pointer;
	transition: 0.25s ease;
}
.partners-map-replay:hover { border-color: rgba(40, 215, 207, 0.5); background: rgba(8, 20, 21, 0.88); transform: translateY(-2px); }
.partners-map-replay i { color: var(--pm-teal); font-size: 17px; font-style: normal; }

.partners-map-marker-anchor { position: relative; width: 32px; height: 42px; display: grid; place-items: end center; }
.partners-map-marker {
	--marker: var(--pm-teal);
	position: absolute;
	bottom: 0;
	width: 24px;
	height: 24px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50% 50% 50% 8px;
	color: #061011;
	background: var(--marker);
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--marker) 16%, transparent), 0 10px 24px color-mix(in srgb, var(--marker) 35%, transparent);
	cursor: pointer;
	transform: rotate(-45deg) scale(0);
	opacity: 0;
	transition: transform 0.58s var(--pm-ease), opacity 0.4s ease;
}
.partners-map-marker::before,
.partners-map-marker::after {
	content: "";
	position: absolute;
	inset: -8px;
	border: 1px solid var(--marker);
	border-radius: 50%;
	opacity: 0;
}
.partners-map-marker.is-visible { opacity: 1; transform: rotate(-45deg) scale(1); }
.partners-map-marker.is-visible::before { animation: partnersMapPing 2.1s ease-out infinite; }
.partners-map-marker.is-visible::after { animation: partnersMapPing 2.1s ease-out infinite 0.7s; }
.partners-map-marker:hover,
.partners-map-marker:focus-visible { transform: rotate(-45deg) scale(1.28); z-index: 10; }
.partners-map-marker.is-international { --marker: var(--pm-orange); width: 29px; height: 29px; }
.partners-map-marker.is-primary { --marker: var(--pm-amber); width: 32px; height: 32px; }
.partners-map-marker span { transform: rotate(45deg); font-size: 8px; font-weight: 800; }
@keyframes partnersMapPing { from { opacity: 0.5; transform: scale(0.35); } to { opacity: 0; transform: scale(1.8); } }

.partners-map-page .maplibregl-popup { z-index: 20; }
.partners-map-page .maplibregl-popup-content {
	padding: 11px 14px;
	border: 1px solid var(--pm-line);
	border-radius: 12px;
	color: #fff;
	background: rgba(5, 11, 12, 0.91);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
	font: 600 10px/1.5 "Alexandria", sans-serif;
}
.partners-map-page .maplibregl-popup-content small { display: block; margin-top: 2px; color: #829091; font-size: 7px; direction: ltr; }

.partners-map-fallback {
	position: absolute;
	inset: 0;
	z-index: 2;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.6s ease;
	background:
		radial-gradient(ellipse at 66% 55%, rgba(40, 215, 207, 0.14), transparent 24%),
		radial-gradient(ellipse at 27% 27%, rgba(255, 122, 47, 0.1), transparent 20%),
		linear-gradient(145deg, #071214, #030708);
}
.partners-map-story.is-fallback .partners-map-fallback { opacity: 1; }
.partners-map-fallback::before {
	content: "";
	position: absolute;
	inset: 8% 5%;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 50%;
	transform: rotate(-8deg);
	box-shadow: 0 0 0 70px rgba(255, 255, 255, 0.012), 0 0 0 140px rgba(255, 255, 255, 0.01), 0 0 0 210px rgba(255, 255, 255, 0.008);
}
.partners-map-route {
	position: absolute;
	z-index: 1;
	height: 1px;
	opacity: 0;
	transform-origin: right center;
	background: linear-gradient(90deg, transparent, var(--pm-teal));
	box-shadow: 0 0 10px rgba(40, 215, 207, 0.45);
	transition: opacity 0.5s ease;
}
.partners-map-route--regional { right: 33%; top: 45%; width: 15%; transform: rotate(-31deg); }
.partners-map-route--global { right: 34%; top: 44%; width: 43%; transform: rotate(29deg); background: linear-gradient(90deg, var(--pm-orange), transparent); }
.partners-map-route.is-visible { opacity: 0.75; animation: partnersMapRouteGlow 1.8s ease-in-out infinite; }
.partners-map-hub {
	--hub: var(--pm-teal);
	position: absolute;
	z-index: 3;
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.25);
	transition: opacity 0.45s ease, transform 0.65s var(--pm-ease);
}
.partners-map-hub.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.partners-map-hub::before {
	content: "";
	display: block;
	width: 18px;
	height: 18px;
	border: 5px solid #061011;
	border-radius: 50%;
	background: var(--hub);
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--hub) 18%, transparent), 0 0 28px var(--hub);
	animation: partnersMapHubPulse 1.6s ease-in-out infinite;
}
.partners-map-hub span {
	position: absolute;
	top: 25px;
	left: 50%;
	min-width: max-content;
	padding: 6px 9px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	color: #fff;
	background: rgba(5, 10, 11, 0.78);
	font-size: 9px;
	transform: translateX(-50%);
}
.partners-map-hub--saudi { right: 31%; top: 56%; }
.partners-map-hub--kuwait { --hub: var(--pm-orange); right: 42%; top: 34%; }
.partners-map-hub--germany { --hub: var(--pm-orange); right: 75%; top: 26%; }
@keyframes partnersMapRouteGlow { 50% { opacity: 0.28; } }
@keyframes partnersMapHubPulse { 50% { transform: scale(1.24); } }

.partners-map-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	padding-top: 14px;
}
.partners-map-stats > div {
	min-height: 82px;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 17px;
	border: 1px solid var(--pm-line);
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.022);
}
.partners-map-stats b { min-width: 42px; color: var(--pm-teal); font-size: 27px; font-weight: 500; direction: ltr; }
.partners-map-stats span { color: #d6dddd; font-size: 10px; line-height: 1.7; }
.partners-map-stats small { display: block; color: #677374; font-size: 8px; direction: ltr; }

.partners-map-directory {
	margin-top: 14px;
	padding: 22px;
	border: 1px solid var(--pm-line);
	border-radius: 22px;
	background: rgba(255, 255, 255, 0.022);
}

.partners-map-directory__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 16px;
}

.partners-map-directory__head h2 {
	margin: 0;
	color: #dce3e3;
	font-size: 14px;
	font-weight: 600;
}

.partners-map-directory__head span {
	color: #657172;
	font-size: 8px;
	direction: ltr;
	letter-spacing: 0.14em;
}

.partners-map-directory__list {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 8px;
}

.partners-map-directory__list span {
	min-height: 42px;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 11px;
	border: 1px solid rgba(255, 255, 255, 0.075);
	border-radius: 12px;
	color: #aeb9ba;
	background: rgba(4, 9, 10, 0.34);
	font-size: 9px;
}

.partners-map-directory__list b {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	border: 1px solid rgba(40, 215, 207, 0.25);
	border-radius: 50%;
	color: var(--pm-teal);
	font-size: 7px;
	font-weight: 600;
	direction: ltr;
}
.partners-map-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 25px;
	padding: 28px 2px 0;
	color: #687475;
	font-size: 9px;
	line-height: 1.8;
}
.partners-map-cta strong { color: #c5cecf; font-weight: 500; }
.partners-map-cta a { display: inline-flex; align-items: center; gap: 9px; color: #e9eeee; font-size: 11px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.partners-map-cta i { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--pm-line); border-radius: 50%; color: var(--pm-teal); font-style: normal; transition: 0.25s ease; }
.partners-map-cta a:hover i { color: #061011; border-color: var(--pm-teal); background: var(--pm-teal); transform: translateX(-3px); }

@media (max-width: 980px) {
	.partners-map-directory__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.partners-map-heading { grid-template-columns: 1fr; gap: 24px; }
	.partners-map-story { min-height: 760px; }
	.partners-map-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
	.partners-map-directory { padding: 18px 14px; }
	.partners-map-directory__head { align-items: flex-start; flex-direction: column; gap: 5px; }
	.partners-map-directory__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.partners-map-wrap { width: min(100% - 24px, 1420px); }
	.partners-map-hero { padding-top: 115px; }
	.partners-map-heading h1 { font-size: clamp(40px, 13vw, 62px); }
	.partners-map-story { min-height: 720px; border-radius: 24px; }
	.partners-map-topbar { top: 14px; right: 14px; left: 14px; }
	.partners-map-count { display: none; }
	.partners-map-card { right: 12px; bottom: 66px; width: calc(100% - 24px); padding: 18px; border-radius: 18px; }
	.partners-map-card h2 { font-size: 24px; }
	.partners-map-steps { grid-template-columns: repeat(2, 1fr); }
	.partners-map-replay { left: 14px; bottom: 14px; min-height: 40px; }
	.partners-map-story::after { right: 16px; bottom: 26px; font-size: 6px; }
	.partners-map-stats { grid-template-columns: 1fr; }
	.partners-map-stats > div { min-height: 70px; }
	.partners-map-cta { align-items: flex-start; flex-direction: column; }
}