.bsw-hero-video {
	position: relative;
	/* 102px = rendered nav height (101px min-height + 1px border), so the
	   nav's bottom edge lands exactly at the fold on load. The admin-bar
	   var (32px when logged in, else 0) keeps it aligned for editors too */
	min-height: calc(100svh - 102px - var(--wp-admin--admin-bar--height, 0px));
	overflow: hidden;
}

.bsw-hero-video__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.bsw-hero-video__player {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	border: 0;
}

/* 3840:1644 cover sizing — references must match the container (100vw wide, 100svh - 102px tall) */
.bsw-hero-video__player--desktop {
	width: max(100%, calc((100svh - 102px - var(--wp-admin--admin-bar--height, 0px)) * 3840 / 1644));
	height: max(100%, calc(100vw * 1644 / 3840));
}

/* 9:16 cover sizing — portrait video in a short, wide box.
   Width references viewport height so it over-covers (avoids a subpixel seam at exactly 100%). */
.bsw-hero-video__player--mobile {
	display: none;
	width: max(100%, calc(100svh * 9 / 16));
	height: max(100%, calc(100vw * 16 / 9));
}

/* Centered title-cluster overlay.
   The cluster is the 910×399 composition (floral spray down to the logos);
   children are positioned as % of that box so the whole thing scales as one. */
.bsw-hero-video__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.bsw-hero-video__cluster {
	position: relative;
	width: min(910px, 90vw);
	aspect-ratio: 910 / 399;
}

/* All children sized/placed per Figma, expressed as % of the 910×399 box */
.bsw-hero-video__cluster img {
	position: absolute;
}

.bsw-hero-video__floral {
	left: 39.67%;
	top: 0;
	width: 20.66%;
	height: 12.03%;
}

.bsw-hero-video__title {
	left: 0;
	top: 19.05%;
	width: 100%;
	height: 24.56%;
}

.bsw-hero-video__at {
	left: 44.35%;
	top: 49.53%;
	width: 12.18%;
	height: 25.16%;
}

.bsw-hero-video__logo--brookstreet {
	left: 17.63%;
	top: 69.64%;
	width: 29.33%;
	height: 30.36%;
}

.bsw-hero-video__logo--marshes {
	left: 56.67%;
	top: 62.07%;
	width: 26.58%;
	height: 37.88%;
}

/* Video credit — same treatment as the gallery lightbox credit, right-aligned */
p.bsw-hero-video__credit {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 2;
	margin: 0;
	padding: 8px 10px;
	text-align: right;
	font-family: var(--wp--preset--font-family--cardo, 'Cardo', serif);
	font-style: italic;
	font-size: 14px;
	line-height: 100%;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

@media (max-width: 767px) {
	.bsw-hero-video {
		min-height: 340px;
	}

	p.bsw-hero-video__credit {
		font-size: 12px;
	}

	.bsw-hero-video__player--desktop {
		display: none;
	}

	.bsw-hero-video__player--mobile {
		display: block;
	}

	/* Cluster is proportionally identical to desktop (same 2.281 aspect ratio
	   and element positions); only its width and vertical placement change.
	   Mobile design sits it in the lower-center within 20px side gutters. */
	.bsw-hero-video__overlay {
		align-items: center;
		padding-bottom: 34px;
	}

	.bsw-hero-video__cluster {
		width: calc(100vw - 40px);
	}
}