/*
 * DS Dent Hero. Scoped to .dsdent-hero.
 *
 * Sizes, positions and timings follow the Slider Revolution slide this replaces
 * (slider "Slider 1", November 2026): a 730 px hero on a 1240 px grid, text block on the left,
 * centred in the part of the hero that the next section does not cover.
 */

.dsdent-hero {
	--dsdent-hero-height: 730px;
	--dsdent-hero-focus-x: 50%;
	--dsdent-hero-veil: 0.75;        /* 0 to 1: light veil behind the text on wide screens */
	--dsdent-hero-overlap: 60px;     /* how far the next section rises over the hero's bottom edge */
	--dsdent-hero-ease: cubic-bezier(0.76, 0, 0.24, 1);
	--dsdent-hero-blue: #3ca5da;
	--dsdent-hero-navy: #091d3e;
	background: #e9f1f5;
	height: var(--dsdent-hero-height);
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

/* Slides are stacked; the active one is faded in. */
.dsdent-hero__slide {
	inset: 0;
	opacity: 0;
	position: absolute;
	transition: opacity 1s ease, visibility 0s linear 1s;
	visibility: hidden;
}

.dsdent-hero__slide.is-active {
	opacity: 1;
	transition: opacity 1s ease;
	visibility: visible;
	z-index: 1;
}

/* Background: the still image, and the video faded in over it once it plays. */
.dsdent-hero__media {
	inset: 0;
	position: absolute;
}

.dsdent-hero__media picture {
	display: contents;
}

.dsdent-hero .dsdent-hero__image,
.dsdent-hero .dsdent-hero__video {
	border: 0;
	height: 100%;
	inset: 0;
	margin: 0;
	max-width: none;
	object-fit: cover;
	object-position: var(--dsdent-hero-focus-x) 50%;
	position: absolute;
	width: 100%;
}

.dsdent-hero .dsdent-hero__video {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.8s ease;
}

.dsdent-hero__slide.has-video .dsdent-hero__video {
	opacity: 1;
}

.dsdent-hero__media::after {
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, var(--dsdent-hero-veil)) 0%,
		rgba(255, 255, 255, calc(var(--dsdent-hero-veil) * 0.8)) 28%,
		rgba(255, 255, 255, 0) 62%
	);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

/* Text block. */
.dsdent-hero__inner {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;
	margin: 0 auto;
	max-width: 1240px;
	padding: 0 37px var(--dsdent-hero-overlap);
	position: relative;
}

.dsdent-hero__content {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
}

.dsdent-hero .dsdent-hero__headline {
	color: var(--dsdent-hero-blue);
	font-family: Jost, sans-serif;
	font-size: 68px;
	font-weight: 700;
	letter-spacing: -1px;
	line-height: 85px;
	margin: 0;
	padding: 0;
	text-transform: none;
}

.dsdent-hero .dsdent-hero__tagline {
	color: var(--dsdent-hero-navy);
	font-family: Rubik, sans-serif;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 4px;
	line-height: 30px;
	margin: 7px 0 0;
	padding: 0;
	text-transform: uppercase;
}

.dsdent-hero a.dsdent-hero__button {
	background: #3596ff;
	border-radius: 5px;
	color: #fff;
	display: inline-block;
	font-family: Rubik, sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 60px;
	margin: 31px 0 0;
	padding: 0 39px;
	text-decoration: none;
	transition: background-color 0.3s ease;
	white-space: nowrap;
}

.dsdent-hero a.dsdent-hero__button:hover,
.dsdent-hero a.dsdent-hero__button:focus-visible {
	background: #33b9cb;
	color: #fff;
}

.dsdent-hero a.dsdent-hero__button:focus-visible,
.dsdent-hero__pause:focus-visible,
.dsdent-hero__dot:focus-visible {
	outline: 3px solid var(--dsdent-hero-navy);
	outline-offset: 3px;
}

/*
 * Entrance. The text waits invisibly until the script marks the hero as ready (after the
 * page has loaded and the theme's preloader is leaving), then: the headline and the button
 * rise 50 px while fading in, the tagline grows from 90 %. Durations 1.2 s, 1 s and 1.4 s.
 *
 * Safety net: if the script never runs, the text simply appears after four seconds.
 */
.dsdent-hero__content > * {
	animation: dsdent-hero-appear 0.4s ease 4s both;
}

.dsdent-hero.is-ready .dsdent-hero__content > * {
	animation: none;
	opacity: 0;
}

.dsdent-hero.is-ready .is-active .dsdent-hero__headline {
	animation: dsdent-hero-rise 1.2s var(--dsdent-hero-ease) both;
}

.dsdent-hero.is-ready .is-active .dsdent-hero__tagline {
	animation: dsdent-hero-grow 1s var(--dsdent-hero-ease) both;
}

.dsdent-hero.is-ready .is-active .dsdent-hero__button {
	animation: dsdent-hero-rise 1.4s var(--dsdent-hero-ease) both;
}

@keyframes dsdent-hero-appear {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes dsdent-hero-rise {
	from { opacity: 0; transform: translate3d(0, 50px, 0); }
	to { opacity: 1; transform: none; }
}

@keyframes dsdent-hero-grow {
	from { opacity: 0; transform: scale(0.9); }
	to { opacity: 1; transform: none; }
}

/* Pause and play. Shown by the script once something is actually moving. */
.dsdent-hero__pause {
	align-items: center;
	background: rgba(255, 255, 255, 0.82);
	border: 0;
	border-radius: 50%;
	bottom: calc(var(--dsdent-hero-overlap) + 18px);
	color: var(--dsdent-hero-navy);
	cursor: pointer;
	display: flex;
	height: 40px;
	justify-content: center;
	padding: 0;
	position: absolute;
	right: 22px;
	transition: background-color 0.2s ease;
	width: 40px;
	z-index: 3;
}

.dsdent-hero__pause:hover {
	background: #fff;
}

.dsdent-hero__pause[hidden] {
	display: none;
}

.dsdent-hero__pause svg {
	display: block;
	fill: currentColor;
	height: 14px;
	width: 14px;
}

.dsdent-hero__pause .dsdent-hero__icon-play,
.dsdent-hero__pause[aria-pressed="true"] .dsdent-hero__icon-pause {
	display: none;
}

.dsdent-hero__pause[aria-pressed="true"] .dsdent-hero__icon-play {
	display: block;
}

/* Dots, only printed when there is more than one slide. */
.dsdent-hero__dots {
	bottom: calc(var(--dsdent-hero-overlap) + 28px);
	display: flex;
	gap: 10px;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	z-index: 3;
}

.dsdent-hero__dot {
	background: rgba(255, 255, 255, 0.7);
	border: 2px solid var(--dsdent-hero-navy);
	border-radius: 50%;
	cursor: pointer;
	height: 14px;
	padding: 0;
	width: 14px;
}

.dsdent-hero__dot[aria-current="true"] {
	background: var(--dsdent-hero-navy);
}

/*
 * Phones. The slide was drawn on a 480 px wide, 720 px tall grid that shrinks with the
 * screen, so everything here is a share of the screen width with the 480 px value as the cap.
 * No video; the image carries a light veil for contrast.
 */
@media (max-width: 767px) {
	.dsdent-hero {
		height: var(--dsdent-hero-height-mobile, min(150vw, 720px));
	}

	.dsdent-hero .dsdent-hero__image,
	.dsdent-hero .dsdent-hero__video {
		object-position: var(--dsdent-hero-focus-x-mobile, 50%) 50%;
	}

	.dsdent-hero__media::after {
		background: rgba(255, 255, 255, 0.15);
	}

	.dsdent-hero__inner {
		padding: 0 min(18px, 3.75vw) min(8px, 1.667vw);
	}

	.dsdent-hero .dsdent-hero__headline {
		font-size: min(64px, 13.333vw);
		letter-spacing: 0;
		line-height: min(61px, 12.708vw);
	}

	.dsdent-hero .dsdent-hero__tagline {
		font-size: max(12px, min(16px, 3.333vw));
		letter-spacing: min(2px, 0.417vw);
		line-height: min(30px, 6.25vw);
		margin-top: min(27px, 5.625vw);
	}

	.dsdent-hero a.dsdent-hero__button {
		font-size: max(14px, min(18px, 3.75vw));
		line-height: min(60px, 12.5vw);
		margin-top: min(45px, 9.375vw);
		padding: 0 min(39px, 8.125vw);
	}

	.dsdent-hero__pause {
		right: 14px;
	}
}

/* Visitors who asked their device for less motion get the finished picture at once. */
@media (prefers-reduced-motion: reduce) {
	.dsdent-hero__slide,
	.dsdent-hero__slide.is-active {
		transition: none;
	}

	.dsdent-hero .dsdent-hero__content > *,
	.dsdent-hero.is-ready .is-active .dsdent-hero__content > * {
		animation: none;
		opacity: 1;
	}
}