/**
 * Block 1 - DLS Home: Hero (DLS-142)
 * Ported from Homepage.html `.hero` (r61). Variables come from ss-brand-tokens.css.
 */
.dls-hero {
	background: var(--white);
	height: 639px;
	display: flex;
	align-items: center;
	padding: var(--s-5xl) max(var(--pad), calc((100% - var(--content)) / 2));
	position: relative;
	isolation: isolate;
	z-index: 0; /* an explicit level for the hero's stacking context: iPhone Safari drew the video / blur layers over the header's search results panel */
	overflow: clip;
	box-sizing: border-box;
	font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.dls-hero *, .dls-hero *::before, .dls-hero *::after { box-sizing: border-box; }

.dls-hero__bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; overflow: clip; background: var(--black); -webkit-transform: translateZ(0); transform: translateZ(0); /* iPhone Safari: the video's layer stays inside the hero and cannot be drawn over the header's search panels */ }
.dls-hero__photo { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.dls-hero__photo picture { display: block; width: 100%; height: 100%; }
/* .dls-hero prefix: beat the theme/Elementor `img { height:auto; max-width:100% }` rules */
.dls-hero .dls-hero__still,
.dls-hero .dls-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; }
/* the video fades in over the still once it is really playing */
.dls-hero__video { opacity: 0; transition: opacity .6s var(--ease); }
.dls-hero__video.is-playing { opacity: 1; }

/* Blur panel: full blur under the text column, feathered to sharp on the right.
   A mask on a backdrop-filter element masks the blur itself. */
.dls-hero__ov1 {
	position: absolute; left: 0; top: 0; width: 100%; height: 100%;
	backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
	background: linear-gradient(257.727deg, rgba(0, 0, 0, 0) 7.41%, rgba(0, 0, 0, .05) 77.35%);
	--hero-blur-end: calc(max(var(--pad), (100% - var(--content)) / 2) + 800px);
	-webkit-mask-image: linear-gradient(90deg, #000 var(--hero-blur-end), transparent calc(var(--hero-blur-end) + 24vw));
	        mask-image: linear-gradient(90deg, #000 var(--hero-blur-end), transparent calc(var(--hero-blur-end) + 24vw));
}
.dls-hero__ov2 {
	position: absolute; left: 0; top: 0; width: 100%; height: 100%;
	background: linear-gradient(63.458deg, rgb(29, 11, 38) 33.5%, rgba(45, 45, 45, 0) 90.12%);
}

.dls-hero__text {
	position: relative; z-index: 2; width: 798px; max-width: 100%; color: var(--white);
	display: flex; flex-direction: column; gap: var(--s-lg);
}
.dls-hero .dls-hero__h1 {
	margin: 0; color: inherit; font-family: inherit;
	font-size: var(--fs-6xl); line-height: var(--lh-6xl); font-weight: 600; letter-spacing: -.5px;
}
.dls-hero .dls-hero__sub {
	margin: 0; color: inherit; font-family: inherit;
	font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: 500;
}

/* Desktop: grow toward the video's own 16:9, never below the 639px design height,
   never more than 88vh (keeps the next strip peeking) or 900px. */
@media (min-width: 901px) {
	.dls-hero { height: clamp(639px, min(56.25vw, 88vh), 900px); }
}
@media (max-width: 1240px) {
	.dls-hero { padding-top: 150px; padding-bottom: 110px; min-height: 560px; }
}
@media (max-width: 900px) {
	/* the template keeps the 639px height here (only padding and min-height change), so the text block sits centred in 639px */
	.dls-hero { padding-top: 120px; padding-bottom: 80px; min-height: 520px; }
	.dls-hero__ov1 {
		-webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 100%);
		        mask-image: linear-gradient(90deg, #000 40%, transparent 100%);
	}
	/* readability scrim on small screens only */
	.dls-hero__bg::after {
		content: ""; position: absolute; inset: 0;
		background: linear-gradient(to top, rgba(24, 10, 34, .72) 0%, rgba(24, 10, 34, .18) 58%, rgba(24, 10, 34, 0) 100%);
	}
}
@media (prefers-reduced-motion: reduce) {
	.dls-hero__video { display: none; }
}

/* sub-line is rich text now (a <div> holding the editor's own paragraphs): keep the look of the old plain line */
.dls-hero .dls-hero__sub p { margin: 0; font: inherit; color: inherit; }
.dls-hero .dls-hero__sub p + p { margin-top: var(--s-xs); }
.dls-hero .dls-hero__sub strong, .dls-hero .dls-hero__sub b { font-weight: 700; }
.dls-hero .dls-hero__sub a { color: inherit; text-decoration: underline; text-underline-offset: 3px; transition: color .25s var(--ease); }
.dls-hero .dls-hero__sub a:hover { color: var(--orange); }