/* Global Offices Map component. Marker positions can be adjusted here. */
.cd-global-offices {
	--india-x: 66.6%;
	--india-y: 39.5%;
	--canada-x: 14.80%;
	--canada-y: 28.5%;
	--cd-global-offices-accent: #ff09e6;
	padding: clamp(4rem, 5vw, 5rem) 1.25rem;
	background: #101013;
	color: #fff;
}

.cd-global-offices *,
.cd-global-offices *::before,
.cd-global-offices *::after { box-sizing: border-box; }

.cd-global-offices__inner { width: min(100%, 90rem); margin: 0 auto; }
.cd-global-offices__header { max-width: 42rem; margin-bottom: clamp(2.25rem, 5vw, 4.25rem); }
.cd-global-offices__eyebrow { margin: 0 0 .75rem; color: var(--cd-global-offices-accent); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.cd-global-offices__header h2 { margin: 0; color: inherit; font-size: clamp(2rem, 4vw, 4rem); font-weight: 600;  line-height: 1; }

.cd-global-offices__map { position: relative; width: 100%; isolation: isolate; }
.cd-global-offices__map-image { display: block; width: 100%; height: auto; opacity: .9; user-select: none; }
.cd-global-offices__marker { position: absolute; z-index: 1; display: block; width: 1.125rem; height: 1.125rem; border-radius: 50%; transform: translate(-50%, -50%); color: #19171a; text-decoration: none; outline: none; }
.cd-global-offices__marker--india { left: var(--india-x); top: var(--india-y); }
.cd-global-offices__marker--canada { left: var(--canada-x); top: var(--canada-y); }
.cd-global-offices__dot { position: absolute; z-index: 2; inset: .28rem; border: 2px solid #fff; border-radius: inherit; background: var(--cd-global-offices-accent); box-shadow: 0 0 0 .2rem rgba(255, 9, 230, .22), 0 .25rem 1rem rgba(0, 0, 0, .32); }
.cd-global-offices__ripples, .cd-global-offices__ripples span { position: absolute; inset: 0; border-radius: inherit; }
.cd-global-offices__ripples { pointer-events: none; }
.cd-global-offices__ripples span { border: 2px solid rgba(255, 9, 230, 1); animation: cd-global-offices-ripple 3.6s cubic-bezier(.18, .76, .24, 1) infinite; }
.cd-global-offices__ripples span:nth-child(2) { animation-delay: 1.2s; }
.cd-global-offices__ripples span:nth-child(3) { animation-delay: 2.4s; }

.cd-global-offices__tooltip { position: absolute; bottom: calc(100% + 1.05rem); left: 50%; display: grid; min-width: 10.5rem; gap: .25rem; padding: .875rem 1rem; border: 1px solid rgba(255, 255, 255, .13); border-radius: .75rem; background: #fff; box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .24); opacity: 0; pointer-events: none; transform: translate(-50%, .5rem) scale(.97); transform-origin: bottom center; transition: opacity .25s ease, transform .25s ease; }
.cd-global-offices__tooltip::after { position: absolute; bottom: -.35rem; left: 50%; width: .65rem; height: .65rem; background: #fff; content: ''; transform: translateX(-50%) rotate(45deg); }
.cd-global-offices__tooltip-title { font-size: .8125rem; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.cd-global-offices__tooltip-city { color: #68636a; font-size: .75rem; line-height: 1.25; }
.cd-global-offices__tooltip-link { margin-top: .25rem; color: var(--cd-global-offices-accent); font-size: .75rem; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.cd-global-offices__marker:hover .cd-global-offices__tooltip, .cd-global-offices__marker:focus-visible .cd-global-offices__tooltip { opacity: 1; transform: translate(-50%, 0) scale(1); }
.cd-global-offices__marker:focus-visible .cd-global-offices__dot { box-shadow: 0 0 0 .2rem rgba(255, 9, 230, .22), 0 0 0 .4rem #fff, 0 .25rem 1rem rgba(0, 0, 0, .32); }

@keyframes cd-global-offices-ripple { 0% { opacity: .75; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(4.5); } }

@media (max-width: 640px) {
	.cd-global-offices { --india-x: 67%; --india-y: 39%; --canada-x: 15%; --canada-y: 28%; padding-inline: 1.371rem; }
	.cd-global-offices__tooltip { min-width: 9.75rem; padding: .75rem .875rem; }
	.cd-global-offices__marker--canada .cd-global-offices__tooltip { left: 0; transform: translate(0, .5rem) scale(.97); transform-origin: bottom left; }
	.cd-global-offices__marker--canada:hover .cd-global-offices__tooltip, .cd-global-offices__marker--canada:focus-visible .cd-global-offices__tooltip { transform: translate(0, 0) scale(1); }
	.cd-global-offices__marker--canada .cd-global-offices__tooltip::after { left: .55rem; transform: rotate(45deg); }
}

@media (prefers-reduced-motion: reduce) {
	.cd-global-offices__ripples span { animation: none; opacity: .45; transform: scale(1.75); }
	.cd-global-offices__tooltip { transition: none; }
}