#home-hero {
	height: 100vh;
	background-color: var(--site-bg);
	border-bottom: 4px solid #e6007e;
	contain: paint;
}

#hero-canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.cms-hero .hero-copy { z-index: 1; }
.cms-hero .hero-copy p { white-space: pre-wrap; }
.hero-gallery-controls { position: absolute; z-index: 2; left: 2rem; bottom: 1.5rem; display: flex; align-items: center; gap: .85rem; color: #fff; font: .85rem/1.4 "PT Sans", sans-serif; }
.hero-gallery-controls[hidden] { display: none; }
.hero-gallery-controls button { width: 42px; height: 42px; border: 1px solid #ffffff65; border-radius: 50%; color: #fff; background: #080b10b3; cursor: pointer; }
.hero-gallery-controls button:hover { border-color: #fff; background: #080b10; }
.hero-gallery-controls button:focus-visible { outline: 3px solid #54c4bd; outline-offset: 4px; }

@media (max-width: 767px) {
	#home-hero {
		height: 100svh;
	}

	#home-hero .animate-bounce {
		animation: none;
	}
}

@media (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {
	#home-hero .hero-copy {
		z-index: 1;
		bottom: 1rem;
		padding-inline: 1.5rem;
	}

	#home-hero .hero-copy h1 {
		font-size: clamp(1.5rem, 5vh, 2.25rem);
		line-height: 1.1;
	}

	#home-hero .hero-copy p {
		margin-top: 0.5rem;
		font-size: 0.875rem;
	}

	#home-hero > .absolute.bottom-6.right-6 {
		display: none;
	}
}