/* ==========================================================================
   Digital ROI — Hero headline + video section ([droi_hero_video])
   ========================================================================== */

.droi-hv {
	--hv-accent: #ed3d0e;
	--hv-ink: #14110f;
	position: relative;
	padding: 70px 0 0;            /* no side padding — video is full-bleed */
	background: #ffffff;
	overflow: hidden;
}

/* ---- Headline (constrained / centred) ---- */
.droi-hv__head {
	max-width: 1000px;
	margin: 0 auto clamp(30px, 4vw, 52px);
	padding: 0 24px;
	text-align: center;
}

.droi-hv .droi-hv__title {
	margin: 0 auto;
	max-width: 16ch;
	color: #0a0a0a !important;
	font-family: inherit;
	font-weight: 800 !important;
	font-size: clamp(40px, 7vw, 88px) !important;    /* matches service-page hero H1 */
	line-height: 1.0 !important;
	letter-spacing: -0.03em !important;
	text-transform: none !important;                 /* theme forces uppercase */
}

.droi-hv__accent { color: var(--hv-accent); }
/* Orange full stop, same as the service-page hero "Agency." */
.droi-hv__dot { color: var(--hv-accent); }

/* ---- Full-bleed video ---- */
.droi-hv__video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	overflow: hidden;
}

.droi-hv__video iframe,
.droi-hv__player {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* ---- Unmute prompt ---- */
.droi-hv__unmute {
	position: absolute;
	left: 24px;
	bottom: 24px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 18px;
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	background: rgba(10, 10, 10, 0.72);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 100px;
	cursor: pointer;
	transition: background 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}

.droi-hv__unmute:hover {
	background: var(--hv-accent);
	transform: translateY(-1px);
}

.droi-hv__unmute-icon {
	display: inline-flex;
}

.droi-hv.is-unmuted .droi-hv__unmute,
.droi-hv__video.is-unmuted .droi-hv__unmute {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

@media (max-width: 768px) {
	.droi-hv {
		padding: 48px 0 0;
	}
	.droi-hv__unmute {
		left: 14px;
		bottom: 14px;
		padding: 9px 14px;
		font-size: 13px;
	}
}

@media (max-width: 480px) {
	.droi-hv { padding: 36px 0 0; }
	.droi-hv__head { padding: 0 16px; }
}