/* Pixel-aligned main hero (live light circular layout) */

.bz-main-hero {
	position: relative;
	background: var(--bz-white);
	overflow: hidden;
	padding-block: clamp(2.5rem, 5vw, 3.75rem) clamp(1.75rem, 3vw, 2.5rem);
	min-height: clamp(460px, 58vh, 580px);
}

.bz-main-hero__track {
	position: relative;
}

.bz-main-hero__slide {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.55s ease, visibility 0.55s ease;
}

.bz-main-hero__slide:not(.is-active) {
	position: absolute;
	inset: 0;
	width: 100%;
}

.bz-main-hero__slide.is-active {
	position: relative;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
	.bz-main-hero__slide {
		transition: none;
	}
}

.bz-main-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-items: center;
}

@media (min-width: 900px) {
	.bz-main-hero__grid {
		grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
		gap: 1.5rem 2rem;
		min-height: 420px;
	}
}

.bz-main-hero__copy {
	position: relative;
	z-index: 2;
	max-width: 28rem;
	padding-block: 0.5rem;
}

.bz-main-hero__title {
	margin: 0;
	font-family: var(--bz-font-display);
	font-size: var(--bz-fs-h1);
	font-weight: 800;
	line-height: var(--bz-lh-tight);
	letter-spacing: -0.03em;
	color: var(--bz-black);
}

.bz-main-hero__title-line {
	display: block;
}

p.bz-main-hero__title {
	/* Inactive slides: same look as H1 without polluting the document outline */
	display: block;
}

.bz-main-hero__lead {
	margin: 1.25rem 0 1.75rem;
	max-width: 26rem;
	font-size: var(--bz-fs-lead);
	line-height: 1.65;
	color: var(--bz-muted);
}

.bz-btn--hero,
.bz-main-hero .bz-btn--hero {
	padding: 0.95rem 2.15rem;
	border-radius: var(--bz-radius);
	background: var(--bz-red);
	color: var(--bz-white);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	box-shadow: 0 10px 26px color-mix(in srgb, var(--bz-red) 38%, transparent);
	border: 2px solid var(--bz-red);
}

.bz-btn--hero:hover,
.bz-main-hero .bz-btn--hero:hover {
	background: var(--bz-red-dark);
	border-color: var(--bz-red-dark);
	color: var(--bz-white);
	box-shadow: 0 14px 32px color-mix(in srgb, var(--bz-red) 48%, transparent);
}

.bz-main-hero__visual {
	position: relative;
	justify-self: center;
	width: min(100%, 480px);
	aspect-ratio: 1;
	isolation: isolate;
}

@media (min-width: 900px) {
	.bz-main-hero__visual {
		width: min(100%, 520px);
		justify-self: end;
	}
}

/* Soft organic blobs behind the photo — colorful brand-tinted cluster */
.bz-main-hero__blob {
	position: absolute;
	border-radius: 50%;
	z-index: 0;
	pointer-events: none;
}

.bz-main-hero__blob--a {
	width: 72%;
	height: 72%;
	left: 2%;
	top: 14%;
	opacity: 1;
	background: linear-gradient(
		145deg,
		color-mix(in srgb, var(--bz-red) 55%, #ff8a95) 0%,
		var(--bz-red) 48%,
		var(--bz-red-dark) 100%
	);
}

.bz-main-hero__blob--b {
	width: 48%;
	height: 48%;
	left: -4%;
	bottom: 6%;
	opacity: 0.92;
	background: linear-gradient(
		160deg,
		color-mix(in srgb, var(--bz-red) 40%, #ffb3bb) 0%,
		color-mix(in srgb, var(--bz-red) 70%, #c94a52) 100%
	);
}

.bz-main-hero__blob--c {
	width: 36%;
	height: 36%;
	left: 18%;
	top: 0;
	opacity: 0.88;
	background: linear-gradient(
		200deg,
		#ff6b78 0%,
		var(--bz-red) 55%,
		color-mix(in srgb, var(--bz-red-dark) 80%, #5a1015) 100%
	);
}

/* Perfect circle: equal box on all sides (asymmetric inset was making an oval) */
.bz-main-hero__circle {
	position: absolute;
	top: 50%;
	left: 54%;
	z-index: 1;
	width: 88%;
	height: 88%;
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	overflow: hidden;
	background: var(--bz-wash);
	border: 12px solid var(--bz-white);
	box-shadow:
		0 0 0 1px var(--bz-hero-ring),
		0 20px 50px rgba(0, 0, 0, 0.1);
}

.bz-main-hero__circle img,
.bz-main-hero__img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	object-position: center center !important;
	border-radius: 50% !important;
}

.bz-main-hero__nav {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.25rem;
	position: relative;
	z-index: 3;
}

.bz-main-hero__dots {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.bz-main-hero__dot {
	width: 0.55rem;
	height: 0.55rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #cfcfcf;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease, width 0.2s ease;
}

.bz-main-hero__dot.is-active {
	width: 1.35rem;
	background: var(--bz-red, #a31820);
}

.bz-main-hero__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 0.55rem;
	border: 1px solid color-mix(in srgb, var(--bz-red) 25%, transparent);
	background: color-mix(in srgb, var(--bz-red) 12%, #fff);
	color: var(--bz-red);
	cursor: pointer;
	transition: background-color var(--bz-duration) var(--bz-ease), color var(--bz-duration) var(--bz-ease), border-color var(--bz-duration) var(--bz-ease), box-shadow var(--bz-duration) var(--bz-ease);
}

.bz-main-hero__arrow:hover {
	background: var(--bz-red);
	border-color: var(--bz-red);
	color: var(--bz-white);
	box-shadow: 0 6px 16px color-mix(in srgb, var(--bz-red) 28%, transparent);
}

/* ——— Mobile / tablet: keep circle fully in-frame (body uses overflow-x: clip) ——— */
@media (max-width: 899px) {
	.bz-main-hero {
		min-height: 0;
		overflow: hidden;
		padding-block: 1.25rem 1.5rem;
	}

	/* Avoid absolute inactive slides stretching / fighting height on small screens */
	.bz-main-hero__slide:not(.is-active) {
		position: absolute;
		inset: auto;
		top: 0;
		left: 0;
		width: 100%;
		height: 0;
		overflow: hidden;
	}

	.bz-main-hero .bz-container.bz-main-hero__grid {
		gap: 1.35rem;
		justify-items: stretch;
		align-items: start;
	}

	.bz-main-hero__copy {
		text-align: left;
		max-width: none;
		width: 100%;
		padding-block: 0;
		min-width: 0;
	}

	.bz-main-hero__title {
		font-size: clamp(1.75rem, 8vw, 2.25rem);
		line-height: 1.1;
		margin: 0;
	}

	.bz-main-hero__title.bz-heading-underline::after {
		margin-top: 0.65rem;
	}

	.bz-main-hero__lead {
		margin: 0.85rem 0 1.15rem;
		font-size: 0.9375rem;
		line-height: 1.55;
		max-width: none;
	}

	.bz-btn--hero {
		padding: 0.8rem 1.5rem;
		min-height: 2.75rem;
		width: auto;
		max-width: 100%;
	}

	.bz-main-hero__visual {
		width: min(100%, 300px);
		max-width: 100%;
		aspect-ratio: 1;
		justify-self: center;
		margin-inline: auto;
		/* Room inside the box so border + shadow never clip */
		overflow: visible;
	}

	/*
	 * In-flow circle frame: no sideways offset (left:54% + transform was
	 * getting clipped by body overflow-x: clip and looked cut off).
	 */
	.bz-main-hero__circle {
		position: absolute;
		inset: 5%;
		top: 5%;
		left: 5%;
		right: 5%;
		bottom: 5%;
		width: auto;
		height: auto;
		transform: none;
		border-width: 8px;
		box-shadow:
			0 0 0 1px var(--bz-hero-ring),
			0 12px 28px rgba(0, 0, 0, 0.1);
	}

	.bz-main-hero__blob--a {
		width: 68%;
		height: 68%;
		left: 8%;
		top: 16%;
	}

	.bz-main-hero__blob--b {
		width: 40%;
		height: 40%;
		left: 2%;
		bottom: 8%;
	}

	.bz-main-hero__blob--c {
		width: 28%;
		height: 28%;
		left: 24%;
		top: 4%;
	}

	.bz-main-hero__nav {
		margin-top: 0.85rem;
		gap: 0.5rem;
	}

	.bz-main-hero__arrow {
		width: 40px;
		height: 40px;
	}
}

@media (max-width: 479px) {
	.bz-main-hero {
		padding-block: 1rem 1.25rem;
	}

	.bz-main-hero .bz-container.bz-main-hero__grid {
		gap: 1.1rem;
	}

	.bz-main-hero__visual {
		width: min(100%, 260px);
	}

	.bz-main-hero__circle {
		inset: 4%;
		top: 4%;
		left: 4%;
		right: 4%;
		bottom: 4%;
		border-width: 6px;
	}

	.bz-main-hero__lead {
		margin: 0.7rem 0 1rem;
		font-size: 0.9rem;
	}

	.bz-main-hero__title {
		font-size: clamp(1.6rem, 8.5vw, 2rem);
	}
}