.map-block {
	position: relative;
	overflow: hidden;
	background: #EBEFF3;
	padding: 0 0 clamp(72px, 9vw, 128px);
}

.map-block__inner {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.map-block__wrap {
	position: relative;
	isolation: isolate;
}

.map-block__wrap::before,
.map-block__wrap::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	pointer-events: none;
	z-index: 4;
}

.map-block__wrap::before {
	top: 0;
	height: clamp(116px, 15vw, 188px);
	background: linear-gradient(to bottom, #26364D 0%, rgba(38, 54, 77, 0) 100%);
}

.map-block__wrap::after {
	content: none;
}

.map-block__surface {
	position: relative;
	container-type: inline-size;
	--map-block-point-size: clamp(44px, 8cqw, 80px);
	--map-block-badge-size: clamp(24px, 4cqw, 40px);
	--map-block-badge-font-size: clamp(14px, 2.2cqw, 22px);
	--map-block-investment-width: clamp(78px, 10cqw, 102px);
	aspect-ratio: 768 / 259;
	min-height: 0;
	overflow: hidden;
	background: #EBEFF3;
	border-radius: 0;
	z-index: 1;
}

.map-block__surface::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: clamp(88px, 12vw, 152px);
	background: linear-gradient(to top, #EBEFF3 0%, rgba(235, 239, 243, 0) 100%);
	pointer-events: none;
	z-index: 3;
}

.map-block__surface.is-map-ready {
	background: #DCE3EA;
}

.map-block__surface::after {
	content: '';
	position: absolute;
	inset: calc(var(--hero-button-outer-border-offset) * -1);
	border: 1px solid rgba(255, 255, 255, 0.72);
	border-radius: 0;
	pointer-events: none;
	z-index: 5;
}

.map-block__canvas,
.map-block__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.map-block__canvas {
	background: #DCE3EA;
	z-index: 1;
	transition: opacity 200ms ease;
}

.map-block__iframe {
	border: 0;
	background: #EBEFF3;
	z-index: 2;
	transition: opacity 200ms ease, visibility 200ms ease;
}

.map-block__surface.is-map-ready .map-block__iframe {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.map-block__point {
	position: absolute;
	left: 0;
	top: 0;
	transform: translate(-50%, -50%);
	z-index: 4;
	pointer-events: none;
}

.map-block__investment {
	position: absolute;
	left: 0;
	top: 0;
	transform: translate(-50%, -100%);
	z-index: 6;
	pointer-events: none;
	width: var(--map-block-investment-width);
}

.map-block__point-core,
.map-block__investment-image {
	opacity: 0;
	transform: scale(0.35);
	transform-origin: 50% 50%;
	transition: opacity 320ms ease, transform 520ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.map-block__point.is-visible .map-block__point-core,
.map-block__investment.is-visible .map-block__investment-image {
	opacity: 1;
	transform: scale(1);
}

.map-block__point-core {
	position: relative;
	width: var(--map-block-point-size);
	height: var(--map-block-point-size);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.98);
	border: 2px solid #2D3D53;
	box-shadow: 0 14px 24px rgba(39, 58, 86, 0.16);
	box-sizing: border-box;
}

.map-block__investment-image {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	filter: drop-shadow(0 14px 24px rgba(39, 58, 86, 0.18));
}

.map-block__point-icon {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.map-block__point-badge {
	position: absolute;
	right: -4px;
	bottom: -4px;
	width: var(--map-block-badge-size);
	height: var(--map-block-badge-size);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: #2D3D53;
	border: 2px solid #ffffff;
	color: #ffffff;
	font-family: var(--font-family-body-accent);
	font-size: var(--map-block-badge-font-size);
	font-weight: 400;
	line-height: 1;
	text-align: center;
	box-shadow: 0 8px 16px rgba(37, 53, 76, 0.22);
	-webkit-text-fill-color: #ffffff;
	z-index: 1;
}

@media (max-width: 1219px) {
	.map-block__wrap::before {
		height: clamp(104px, 14vw, 164px);
	}

	.map-block__surface::before {
		height: clamp(84px, 11vw, 136px);
	}

	.map-block__surface {
		--map-block-point-size: clamp(40px, 7.2cqw, 64px);
		--map-block-badge-size: clamp(22px, 3.8cqw, 34px);
		--map-block-badge-font-size: clamp(12px, 2cqw, 18px);
		--map-block-investment-width: clamp(72px, 9.2cqw, 92px);
		aspect-ratio: 768 / 320;
	}
}

@media (max-width: 767px) {
	.map-block {
		padding: 0 0 clamp(56px, 14vw, 96px);
	}

	.map-block__wrap::before {
		height: clamp(88px, 22vw, 132px);
	}

	.map-block__surface::before {
		height: clamp(72px, 18vw, 112px);
	}

	.map-block__surface {
		--map-block-point-size: clamp(34px, 9cqw, 52px);
		--map-block-badge-size: clamp(18px, 4.8cqw, 28px);
		--map-block-badge-font-size: clamp(11px, 2.8cqw, 16px);
		--map-block-investment-width: clamp(58px, 13.4cqw, 74px);
		aspect-ratio: 4 / 3;
	}
}