/*
	Video hero — used only on smd.html. Overrides the default hero
	with a full-bleed background video that fades to the snow page
	colour at top (for nav/headline legibility) and bottom (so it
	blends seamlessly into the section below). Loaded after hero.css
	so its rules win; nothing here affects index.html.
*/
.hero--video {
	position: relative;
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	/* -1px bottom swallows any sub-pixel seam against the next section */
	margin-bottom: -1px;
	min-height: 92svh;
	padding: 0;
	display: flex;
	align-items: center;
	overflow: hidden;
	/* Black canvas behind the dimmed video */
	background: var(--colorBlack);
}

.hero__video {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Lighten the footage against the black backdrop */
	opacity: 0.62;
}

/*
	The fade now resolves to BLACK at the bottom so the dark hero blends
	into the black section below. A single black-tinted ramp does both
	jobs — darkening the footage for headline legibility at the top and
	melting to solid black at the bottom — staying within one hue so it
	never bands.
*/
.hero__videoFade {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.55) 0%,
		rgba(0, 0, 0, 0.2) 26%,
		rgba(0, 0, 0, 0.2) 58%,
		rgba(0, 0, 0, 0.55) 78%,
		rgba(0, 0, 0, 0.9) 90%,
		rgba(0, 0, 0, 1) 98%,
		rgba(0, 0, 0, 1) 100%
	);
}

.hero--video .hero__content {
	position: relative;
	z-index: 2;
	width: var(--widthViewport);
	max-width: var(--widthContent);
	margin: 0 auto;
	/* Slight top bias keeps the block optically centred under the nav */
	padding-top: clamp(2rem, 5vh, 4rem);
	padding-bottom: 0;
}

/* White headline and subline over the dark video */
.hero--video .hero__title {
	color: var(--colorWhite);
}

.hero--video .hero__sub {
	max-width: min(32rem, 100%);
	color: rgba(255, 255, 255, 0.85);
}

/*
	Nav over the dark hero. Absolutely positioned over the top of the
	footage (so the video runs to the very top edge) but in the page's
	scroll, so it scrolls away with the content — once it leaves, the
	floating menu pill takes over. Transparent with a white logo and
	white links. Scoped to this smd-only sheet.
*/
.siteNav {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: transparent;
}

.siteNav__logo {
	/* Re-colour the blue logo to solid white over the dark hero */
	filter: brightness(0) invert(1);
}

.siteNav__links a:not(.siteNav__pill):not(.siteNav__cta) {
	color: var(--colorWhite);
}

.siteNav__links a:not(.siteNav__pill):not(.siteNav__cta)::after {
	background: var(--colorWhite);
}

.siteNav__pill {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.6);
	color: var(--colorWhite);
}

.siteNav__cta {
	background: var(--colorWhite);
	color: var(--colorBlack);
}

@media (max-width: 720px) {
	.siteNav {
		pointer-events: none;
	}

	.siteNav__brand {
		pointer-events: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero__video {
		display: none;
	}

	.hero--video {
		background: var(--colorBlack);
	}
}

/*
	"What we do" continues the dark hero — a full-bleed black band with
	light text. The section keeps its centred content column; a -50vw
	pseudo-element paints the black edge to edge behind it so the text
	never runs full width. The pill inverts to white for contrast.
*/
#services {
	position: relative;
	background: var(--colorBlack);
	box-shadow: 0 0 0 100vmax var(--colorBlack);
	clip-path: inset(0 -100vmax);
	color: var(--colorWhite);
}

#services::before {
	display: none;
}

#services .sectionIntro__lede {
	color: rgba(255, 255, 255, 0.72);
}

#services .pillButton {
	background: var(--colorWhite);
	border-color: var(--colorWhite);
	color: var(--colorBlack);
}

/* Service cards on the black band — dark theme */
#services .serviceCard {
	background: rgba(255, 255, 255, 0.105);
	border-color: transparent;
}

#services .serviceCard:hover {
	border-color: var(--colorBrandBlue);
	box-shadow: 0 22px 48px -26px rgba(0, 0, 0, 0.7);
}

#services .serviceCard__title {
	color: var(--colorWhite);
}

#services .serviceCard__text {
	color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 720px) {
	.hero--video {
		min-height: 82svh;
	}

	.hero--video .hero__content {
		width: min(100% - 2rem, var(--widthContent));
		padding-top: 4.5rem;
	}

	.hero--video .hero__sub {
		max-width: 19rem;
		line-height: 1.35;
	}
}