/* ===== DYAD HERO BLOCK STYLES ====== */
.dyad-hero-container {
	position: relative;
}

.dyad-hero-container .dyad-hero,
.dyad-hero-container img {
	position: relative;
	height: 100vh;
	height: 100svh;
	min-height: 100vh;
	min-height: 100svh;
}

.dyad-hero-container .dyad-image {
	display: block;
	margin: 0;
	position: relative;
	opacity: 1;
	transition: opacity 0.3s ease-in;
}
.dyad-hero-container .dyad-image .ratio {
	width: 100%;
	position: relative;
	padding: 0;
	padding-top: 100%;
	padding-top: var(--padding, 100%);
}
.dyad-hero-container .dyad-image img {
	/* Not being used?? What is .dyad-image??? */
	opacity: 0;
	position: absolute;
	top: 0;
	right: 0;
	bottom: auto;
	left: 0;
	display: block;
	width: 100%;
	margin: 0;
	transition: opacity 1.85s ease-out;
}

.dyad-hero-container .dyad-hero img {
	opacity: 0;
	position: absolute;
	top: 0;
	right: 0;
	bottom: auto;
	left: 0;
	display: block;
	width: 100%;
	margin: 0;
	transition: opacity 0.85s ease-out;
}
.dyad-hero-container .dyad-hero img.lazyloaded {
	opacity: 1;
}

.dyad-hero-container h2 {
	text-align: center;
	width: 100%;
	text-transform: uppercase;
	font-size: clamp(1.2em, 5vw, 1.6em);
	margin-bottom: 0.3em !important;
}

.dyad-hero-container .dyad-hero-innerblock {
	position: relative;
	width: 100%;
	padding: 0 1rem;
	z-index: 10;
}
.dyad-hero:has(.dyad-hero-innerblock p)::after {
	content: "";
	height: auto;
	width: 100%;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #000;
	z-index: 1;
	opacity: 0.25;
}

.dyad-hero-container .dyad-hero-innerblock p {
	font-size: 1em;
	/* font-size: clamp(1em, 1.9vw, 1.4em); */
	line-height: 1.5;
	max-width: 50rem;
	margin: 0 auto 1rem;
}
.dyad-hero-container .dyad-hero-innerblock ul {
	text-align: center;
}
.dyad-hero-container .dyad-hero-innerblock ul li em {
	display: inline-block;
	margin-right: 0.3em;
	letter-spacing: 0.015em;
}
.dyad-hero-container button.scroll-instruct {
	position: absolute;
	top: auto;
	right: 0;
	bottom: 2rem;
	left: 0;
	width: 100%;
	text-align: center;
	color: #cecece;
	transition: opacity 0.65s;
}
.scrolled .dyad-hero-container button.scroll-instruct {
	opacity: 0;
	transition: opacity 0.3s;
}
.dyad-hero-container button.scroll-indicator.arrow-indicator svg {
	transform: rotate(270deg);
	fill: #fff;
	opacity: 0.75;
}
.dyad-hero-container button:hover {
	cursor: pointer;
}
.dyad-hero-container .dyad-image img.lazyload:not([src]) {
	visibility: hidden;
	opacity: 0;
}
.dyad-hero-container .dyad-image .image-holder img[onload],
.dyad-image .image-holder img[onload].image-loading {
	opacity: 0;
	transition: opacity 0.35s ease-out;
}
.dyad-hero-container .dyad-image img.lazyloaded {
	opacity: 1;
}

/* ===== ACF BLOCK STYLES ====== */

#editor .dyad-hero-container,
#editor .dyad-hero-container .dyad-hero,
#editor .dyad-hero-container img {
	height: auto;
	min-height: unset;
}

#editor .dyad-hero,
#editor .dyad-hero-container img {
	height: 30rem;
	opacity: 1;
}
#editor .dyad-hero-container img {
	width: 100%;
	object-fit: cover;
}
#editor .dyad-hero-container .dyad-hero-innerblock {
	padding: 0;
}

#editor .dyad-hero-container h2 {
	font-size: 1.45em;
	line-height: 1.35;
	margin-bottom: 0;
}
#editor .dyad-hero-container p.tagline {
	text-align: center;
	margin: 0 auto 2rem;
	letter-spacing: 0.1rem;
	font-size: 0.9em;
	text-transform: uppercase;
}