/* Hero globe (Homepage v11) */
.hero-grid-host { position: relative; isolation: isolate; overflow: clip; }

.hero-globe-bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: clamp(800px, 82vh, 1100px);
	z-index: -1;
	pointer-events: none;
	display: block;
	-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 14%, #000 72%, rgba(0,0,0,0) 100%);
	mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 14%, #000 72%, rgba(0,0,0,0) 100%);
}

@media (max-width: 767.98px) {
	/* phones get a static dot grid behind the headline: kept faint and faded out top and bottom so the copy reads well */
	.hero-globe-bg {
		height: 560px;
		-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 18%, rgba(0,0,0,.55) 62%, rgba(0,0,0,0) 100%);
		mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 18%, rgba(0,0,0,.55) 62%, rgba(0,0,0,0) 100%);
	}
}

/* vertical swipes still scroll the page; horizontal ones turn the globe */
.hero-grid-on { cursor: crosshair; touch-action: pan-y; }
.hero-grid-on a, .hero-grid-on button { cursor: pointer; }
.hero-grid-on .hero-grid-skip { cursor: auto; }