/* BIOKAY 1.2.0 – the approved house-led homepage direction. */
@media (min-width: 861px) {
	.bio-hero {
		padding: 0;
		background: #f5f2e9;
	}

	.bio-hero > .bio-container {
		width: 100%;
		max-width: none;
	}

	.bio-hero__grid {
		grid-template-columns: minmax(520px, 50%) minmax(0, 50%);
		gap: 0;
		min-height: 650px;
	}

	.bio-hero__copy {
		width: 100%;
		padding: 72px 24px 72px max(48px, calc((100vw - var(--bio-max)) / 2 + 22px));
		overflow: hidden;
	}

	.bio-hero__copy h1 {
		white-space: nowrap;
		font-size: clamp(58px, 5vw, 84px);
	}

	.bio-hero__copy .bio-lead {
		width: min(680px, calc(50vw - max(48px, calc((100vw - var(--bio-max)) / 2 + 22px)) - 48px));
		max-width: none;
		color: #40584f;
	}

	.bio-hero__visual {
		position: relative;
		height: 100%;
		min-height: 650px;
	}

	.bio-hero__visual::before {
		display: none;
	}

	.bio-hero__visual > img {
		height: 100%;
		aspect-ratio: auto;
		border-radius: 0;
		box-shadow: none;
		object-fit: cover;
		object-position: center;
		-webkit-mask-image:
			radial-gradient(ellipse 24% 27% at 18% 11%, #000 0 38%, rgb(0 0 0 / 72%) 52%, transparent 79%),
			radial-gradient(ellipse 29% 34% at 14% 46%, #000 0 35%, rgb(0 0 0 / 70%) 51%, transparent 78%),
			radial-gradient(ellipse 22% 29% at 19% 82%, #000 0 39%, rgb(0 0 0 / 68%) 54%, transparent 80%),
			linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 16%) 7%, rgb(0 0 0 / 58%) 15%, #000 25%, #000 100%);
		-webkit-mask-composite: source-over, source-over, source-over, source-over;
		-webkit-mask-position: center;
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-size: 100% 100%;
		mask-image:
			radial-gradient(ellipse 24% 27% at 18% 11%, #000 0 38%, rgb(0 0 0 / 72%) 52%, transparent 79%),
			radial-gradient(ellipse 29% 34% at 14% 46%, #000 0 35%, rgb(0 0 0 / 70%) 51%, transparent 78%),
			radial-gradient(ellipse 22% 29% at 19% 82%, #000 0 39%, rgb(0 0 0 / 68%) 54%, transparent 80%),
			linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 16%) 7%, rgb(0 0 0 / 58%) 15%, #000 25%, #000 100%);
		mask-composite: add, add, add, add;
		mask-position: center;
		mask-repeat: no-repeat;
		mask-size: 100% 100%;
	}

	.bio-hero__copy {
		position: relative;
		z-index: 3;
		background-image: radial-gradient(circle at 16% 30%, rgb(73 107 85 / 4%) 0 1px, transparent 1.5px);
		background-size: 19px 19px;
	}
}

.bio-hero__subtitle {
	margin: 20px 0 0;
	color: var(--bio-ink);
	font: 500 clamp(23px, 1.8vw, 30px) / 1.25 Georgia, "Times New Roman", serif;
	white-space: nowrap;
}

.bio-hero__quote {
	position: absolute;
	right: 42px;
	bottom: 35px;
	margin: 0;
	padding: 18px 0 0 34px;
	border-top: 1px solid rgb(255 255 255 / 80%);
	color: #fff;
	font: 500 18px / 1.45 Georgia, "Times New Roman", serif;
	text-shadow: 0 2px 15px rgb(0 0 0 / 55%);
}

.bio-hero .bio-button span {
	margin-left: 8px;
}

@media (max-width: 860px) {
	.bio-hero__copy h1,
	.bio-hero__subtitle {
		white-space: normal;
	}

	.bio-hero__visual::before {
		display: none;
	}

	.bio-hero__visual > img {
		object-position: center;
		box-shadow: var(--bio-shadow);
		-webkit-mask-image: none;
		mask-image: none;
	}

	.bio-hero__quote {
		right: 24px;
		bottom: 24px;
		font-size: 16px;
	}
}

@media (max-width: 620px) {
	.bio-hero__subtitle {
		font-size: 23px;
	}

	.bio-hero__quote {
		right: 16px;
		bottom: 14px;
		padding: 10px 0 0 18px;
		font-size: 14px;
	}
}