/* ============================
	LOCATION
============================ */

.location--block {
	background-color: var(--ug-white);
	padding: 7.5rem 0;
}

.location--container {
	max-width: 1700px;
}

.location--title {
	color: var(--ug-blue-deep);
	font-family: 'Gotham Pro', Arial, sans-serif;
	font-size: 2.5rem;
	font-weight: 800;
	letter-spacing: -.035rem;
	line-height: 1;
	margin-bottom: .75rem;
}

.location--description {
	color: var(--ug-text);
	font-size: 1.3rem;
	line-height: 1.5;
	margin: 0 auto 2.5rem auto;
	max-width: 960px;
}


/* ============================
	LOCATION PROJECT SWITCHER
============================ */

.location--project-switcher {
	background-color: var(--ug-light);
	border: 1px solid rgba(10, 10, 135, .07);
	border-radius: 999px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82);
	margin-bottom: 2rem;
	overflow: hidden;
	padding: .55rem .55rem .72rem .55rem;
	position: relative;
	width: fit-content;
}

.location--project-switcher--viewport {
	overflow: hidden;
	width: 100%;
}

.location--project-list {
	align-items: center;
	display: flex;
	gap: .5rem;
	justify-content: center;
	list-style: none;
	margin: 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	padding: 0;
	scroll-behavior: smooth;
	scrollbar-width: none;
	width: 100%;
}

.location--project-list::-webkit-scrollbar {
	display: none;
}

.location--project-list li {
	flex: 0 0 auto;
	list-style: none;
	margin: 0;
	padding: 0;
}

.location--project-button {
	align-items: center;
	background-color: transparent;
	border: 1px solid transparent;
	border-radius: 999px;
	color: #53535F;
	cursor: pointer;
	display: inline-flex;
	font-family: 'Gotham Pro', Arial, sans-serif;
	font-size: .925rem;
	font-weight: 900;
	gap: .55rem;
	justify-content: center;
	letter-spacing: -.0125rem;
	line-height: 1;
	min-height: 44px;
	padding: .8rem 1.1rem .62rem 1.1rem;
	position: relative;
	text-transform: uppercase;
	transition: background-color .3s ease, border-color .3s ease, color .3s ease;
	white-space: nowrap;
}

.location--project-button::before {
	background-color: #B4BBC3;
	border-radius: 50%;
	content: "";
	flex: 0 0 auto;
	height: 7px;
	transition: all .3s ease;
	width: 7px;
}

.location--project-button:hover {
	background-color: var(--ug-white);
	border-color: rgba(10, 10, 135, .08);
	color: var(--ug-blue);
}

.location--project-button:hover::before {
	background-color: var(--ug-orange);
}

.location--project-button.is-active {
	background-color: var(--ug-blue);
	border-color: var(--ug-blue);
	box-shadow: none;
	color: var(--ug-white);
}

.location--project-button.is-active::before {
	background-color: var(--ug-orange);
	box-shadow: 0 0 0 4px rgba(255, 138, 0, .16);
}

.location--project-button:focus-visible {
	outline: 3px solid rgba(255, 138, 0, .45);
	outline-offset: 2px;
}

.location--project-progress {
	background-color: rgba(10, 10, 135, .08);
	bottom: 0;
	height: 3px;
	left: 1.25rem;
	overflow: hidden;
	position: absolute;
	right: 1.25rem;
}

.location--project-progress span {
	background: linear-gradient(90deg,
			var(--ug-blue) 0%,
			var(--ug-orange) 100%);
	display: block;
	height: 100%;
	transition: width .5s ease;
	width: 0;
}


/* ============================
	LOCATION MAP
============================ */

.location--map--outer {
	background-color: var(--ug-light);
	border: 1px solid #E2E6EA;
	border-radius: 2.25rem;
	box-shadow: inset 0 0 12px rgba(0, 0, 0, .035), 0 24px 60px rgba(10, 10, 40, .06);
	padding: 1rem;
	position: relative;
}

.location--map--inner {
	background-color: var(--ug-white);
	border: 1px solid #D9DEE4;
	border-radius: 1.5rem;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .075);
	height: 700px;
	overflow: hidden;
	position: relative;
}

#map {
	height: 100%;
	width: 100%;
}

.location--map--loading {
	align-items: center;
	background-color: rgba(242, 244, 245, .96);
	color: var(--ug-blue);
	display: flex;
	font-family: 'Gotham Pro', Arial, sans-serif;
	font-size: .95rem;
	font-weight: 900;
	gap: .8rem;
	inset: 0;
	justify-content: center;
	letter-spacing: -.01rem;
	opacity: 1;
	position: absolute;
	text-transform: uppercase;
	transition: opacity .4s ease, visibility .4s ease;
	visibility: visible;
	z-index: 20;
}

.location--map--loading.is-hidden {
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
}

.location--map--loading.has-error {
	background-color: rgba(255, 255, 255, .97);
	color: var(--ug-text);
}

.location--map--spinner {
	animation: locationMapSpinner .8s linear infinite;
	border: 3px solid rgba(10, 10, 135, .12);
	border-radius: 50%;
	border-top-color: var(--ug-blue);
	height: 24px;
	width: 24px;
}

@keyframes locationMapSpinner {
	to {
		transform: rotate(360deg);
	}
}


/* ============================
	LOCATION PROJECT PANEL
============================ */

.location--panel {
	background-color: var(--ug-white);
	border-radius: 1.75rem;
	box-shadow: 0 24px 54px rgba(2, 2, 36, .22);
	left: 1.5rem;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	top: 1.5rem;
	transform: translateY(14px);
	transition: opacity .35s ease, transform .35s ease, visibility .35s ease;
	visibility: hidden;
	width: min(410px, calc(100% - 3rem));
	z-index: 8;
}

.location--panel.is-visible {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
}

.location--panel.is-changing {
	opacity: .55;
	transform: translateY(7px) scale(.99);
}

.location--panel--image {
	background-color: var(--ug-light);
	height: 235px;
	overflow: visible;
	position: relative;
}

.location--panel--image::after {
	background: linear-gradient(180deg,
			rgba(3, 3, 40, 0) 45%,
			rgba(3, 3, 40, .36) 100%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.location--panel--image>img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.location--panel--brand {
	align-items: center;
	background-color: var(--ug-white);
	border: 1px solid rgba(10, 10, 135, .08);
	border-radius: 50%;
	bottom: -36px;
	box-shadow:
		0 5px 32px rgba(1, 1, 42, .18),
		0 0 0 7px rgba(255, 255, 255, .25);
	display: flex;
	height: 74px;
	justify-content: center;
	overflow: hidden;
	padding: .25rem;
	position: absolute;
	right: 1.4rem;
	width: 74px;
	z-index: 3;
}

.location--panel--brand img {
	height: 100%;
	object-fit: contain;
	width: 100%;
}

.location--panel--counter {
	align-items: center;
	background-color: rgba(255, 255, 255, .94);
	border-radius: 999px;
	bottom: 1rem;
	color: var(--ug-blue-deep);
	display: inline-flex;
	font-family: 'Gotham Pro', Arial, sans-serif;
	font-size: .72rem;
	font-weight: 900;
	justify-content: center;
	line-height: 1;
	padding: .55rem .7rem .4rem .7rem;
	position: absolute;
	left: 1rem;
	z-index: 3;
}

.location--panel--content {
	padding: 1.8rem 1.4rem 1.5rem 1.4rem;
}

.location--panel--eyebrow {
	color: var(--ug-orange);
	display: block;
	font-family: 'Gotham Pro', Arial, sans-serif;
	font-size: .82rem;
	font-weight: 900;
	letter-spacing: .015rem;
	line-height: 1;
	margin-bottom: .65rem;
	text-transform: uppercase;
}

.location--panel h3 {
	color: var(--ug-blue-deep);
	font-family: 'Gotham Pro', Arial, sans-serif;
	font-size: 1.85rem;
	font-weight: 900;
	letter-spacing: -.025rem;
	line-height: 1;
	margin-bottom: .5rem;
}

.location--panel--location {
	color: #555563;
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.35;
	margin-bottom: 1.15rem;
}

.location--panel a {
	align-items: center;
	background-color: var(--ug-blue);
	border-top-right-radius: 1rem;
	color: var(--ug-white);
	display: inline-flex;
	font-family: 'Gotham Pro', Arial, sans-serif;
	font-size: .9rem;
	font-weight: 900;
	gap: .6rem;
	justify-content: center;
	line-height: 1;
	padding: .88rem 1rem .68rem 1rem;
	text-transform: uppercase;
	transition:
		background-color .3s ease,
		box-shadow .3s ease,
		transform .3s ease;
}

.location--panel a i {
	font-size: .9rem;
	transition: transform .3s ease;
}

.location--panel a:hover {
	background-color: var(--ug-blue-dark);
	box-shadow: 0 10px 22px rgba(10, 10, 135, .2);
	color: var(--ug-white);
	transform: translateY(-2px);
}

.location--panel a:hover i {
	transform: translate(2px, -2px);
}


/* ============================
	LOCATION CUSTOM MARKERS
============================ */

.location--marker {
	background-color: transparent;
	border: 0;
	cursor: pointer;
	height: 50px;
	margin: 0;
	overflow: visible;
	padding: 0;
	position: absolute;
	transform: translate(-50%, -100%);
	width: 36px;
}

.location--marker::before {
	background-color: rgba(5, 5, 80, .38);
	border: 1px solid rgba(2, 2, 40, .5);
	border-radius: 50%;
	bottom: -2px;
	box-shadow:
		0 5px 14px rgba(2, 2, 40, .36),
		0 0 0 3px rgba(10, 10, 135, .1);
	content: "";
	height: 18px;
	left: 50%;
	opacity: 0;
	position: absolute;
	transform: translateX(-50%) scale(.5);
	transition:
		opacity .3s ease,
		transform .3s ease;
	width: 32px;
	z-index: -1;
}

.location--marker.is-active::before {
	animation: locationMarkerPulse 4s ease-out infinite;
	opacity: 1;
}

.location--marker img {
	filter: drop-shadow(0 7px 9px rgba(2, 2, 40, .42));
	height: 50px;
	max-height: 50px;
	pointer-events: none;
	transform: translateY(0) scale(1);
	transform-origin: center bottom;
	transition:
		filter .3s ease,
		transform .3s cubic-bezier(.2, .7, .2, 1);
	width: auto;
}

.location--marker:hover img,
.location--marker:focus-visible img {
	filter: drop-shadow(0 9px 11px rgba(2, 2, 40, .5));
	transform: translateY(-2px) scale(1.05);
}

.location--marker.is-active::before {
	animation: locationMarkerPulse 2.2s ease-out infinite;
	opacity: 1;
}

.location--marker.is-active img {
	filter: drop-shadow(0 10px 13px rgba(2, 2, 40, .55));
	transform: translateY(-3px) scale(1.09);
}

.location--marker:focus-visible {
	outline: none;
}

.location--marker:focus-visible img {
	filter:
		drop-shadow(0 9px 11px rgba(2, 2, 40, .5)) drop-shadow(0 0 6px rgba(255, 138, 0, .82));
}


@keyframes locationMarkerPulse {
	0% {
		opacity: .9;
		transform: translateX(-50%) scale(.55);
	}

	70% {
		opacity: .18;
		transform: translateX(-50%) scale(2.5);
	}

	100% {
		opacity: 0;
		transform: translateX(-50%) scale(2.8);
	}
}



/* ============================
	LOCATION GOOGLE CONTROLS
============================ */

.location--map--inner .gm-control-active,
.location--map--inner .gm-fullscreen-control {
	border-radius: 50% !important;
	box-shadow: 0 8px 20px rgba(2, 2, 35, .16) !important;
}

.location--map--inner .gm-bundled-control {
	margin: 16px !important;
}

.location--map--inner .gm-svpc {
	border-radius: 50% !important;
}


#location.location--block .cta--button {
	background-color: var(--ug-blue);
	border-top-right-radius: 1.25rem;
	color: var(--ug-white);
	font-family: 'Gotham Pro', Arial, sans-serif;
	font-size: 1.25rem;
	font-weight: 900;
	letter-spacing: -.025rem;
	line-height: 1;
	padding: .95rem 1.15rem .72rem 1.15rem;
	text-transform: uppercase;
	transition: all .3s ease;
}

#location.location--block .cta--button:hover {
	background-color: var(--ug-blue-dark);
	color: var(--ug-white);
	transform: translateY(-2px);
}