/*
 * Destiny Slider — replaces LayerSlider "Main Slider".
 *
 * Layout follows LayerSlider's "full width" mode: a 1500 × 580 design area,
 * centred on wide screens (height stays 580px) and scaled down proportionally
 * below 1500px. --ds-u is one design pixel; every size is a multiple of it.
 */

.ds-slider {
	--ds-accent: #cca876;
	--ds-fade: 1000ms;
	--ds-ease: cubic-bezier(0.86, 0, 0.07, 1);
	position: relative;
	width: 100%;
	aspect-ratio: 1500 / 580;
	max-height: 620px;
	overflow: hidden;
	background: #1d1d1d;
	color: #fff;
	isolation: isolate;
	container-type: inline-size;
}

.ds-slider,
.ds-slider *,
.ds-slider *::before,
.ds-slider *::after { box-sizing: border-box; }

.ds-slider:focus { outline: none; }
.ds-slider:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: -2px; }

.ds-track { position: absolute; inset: 0; }

.ds-slide {
	--ds-u: calc(min(100cqw, 1500px) / 1500);
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--ds-fade) ease, visibility 0s linear var(--ds-fade);
}

.ds-slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 1;
	transition: opacity var(--ds-fade) ease, visibility 0s;
}

.ds-slider .ds-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 50%;
	display: block;
}

/* ---- Text: placed inside the centred 1500 × 580 design area ---- */

/*
 * The content box covers the visible part of the slide (minus any strip covered by
 * overlapping page content). It is a flex column: the ::before spacer asks for
 * --ds-y of the height but may shrink, so a tall text block moves up rather than
 * slipping below the visible area.
 */
.ds-content {
	position: absolute;
	top: 0;
	bottom: var(--ds-safe-bottom, 0px);
	left: 50%;
	width: calc(var(--ds-u) * 1500);
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	padding-bottom: calc(var(--ds-u) * 24);
	pointer-events: none;
}

.ds-content::before {
	content: "";
	flex: 0 1 var(--ds-y, 30%);
	min-height: 0;
}

.ds-inner {
	flex: none;
	margin-left: var(--ds-x, 7%);
	width: calc(var(--ds-u) * 600);
	max-width: calc(100% - var(--ds-x, 7%) - var(--ds-u) * 40);
	pointer-events: auto;
}

.ds-slider .ds-heading {
	font-family: 'Libre Baskerville', Georgia, serif;
	font-size: max(20px, calc(var(--ds-u) * 46));
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: 0;
	color: #fff;
	text-transform: uppercase;
	text-wrap: balance;
}

.ds-slider .ds-line { display: block; }

/* Supporting line under the headline — body font (Lato), softer white. */
.ds-slider .ds-text {
	margin: calc(var(--ds-u) * 18) 0 0;
	padding: 0;
	max-width: calc(var(--ds-u) * 540);
	font-size: max(14px, calc(var(--ds-u) * 19));
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.9);
	text-wrap: pretty;
}

/* Soft shade on the text side of the image, for legibility over busy photos. */
.ds-shade {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.38) 38%, rgba(0, 0, 0, 0) 68%);
}

.ds-shade[data-side="right"] {
	background: linear-gradient(270deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.38) 38%, rgba(0, 0, 0, 0) 68%);
}

.ds-shade--strong {
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.68) 40%, rgba(0, 0, 0, 0.3) 62%, rgba(0, 0, 0, 0) 80%);
}

.ds-shade--strong[data-side="right"] {
	background: linear-gradient(270deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.68) 40%, rgba(0, 0, 0, 0.3) 62%, rgba(0, 0, 0, 0) 80%);
}

.ds-slider .ds-link {
	display: inline-block;
	color: var(--ds-accent);
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

/* Outlined button (theme: .client-words-link a) — body font, gold text and border. */
/* Matches the site's The7 button (e.g. "Get In Touch": dt-btn dt-btn-m). */
.ds-slider .ds-link--button {
	margin-top: calc(var(--ds-u) * 30);
	padding: 10px 35px;
	border: 3px solid var(--ds-accent);
	border-radius: 1px;
	background-color: transparent;
	font-family: Roboto, Helvetica, Arial, Verdana, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 16px;
	color: #fff;
}

.ds-slider .ds-link--button:hover,
.ds-slider .ds-link--button:focus-visible {
	background-color: var(--ds-accent);
	color: #fff;
}

/* Large text link (theme: .call-number) — e.g. the phone number. */
.ds-slider .ds-link--large {
	margin-top: calc(var(--ds-u) * 14);
	font-family: 'Libre Baskerville', Georgia, serif;
	font-size: max(16px, calc(var(--ds-u) * 40));
	font-weight: 700;
	line-height: 1.45;
	white-space: nowrap;
}

.ds-slider .ds-link--large:hover,
.ds-slider .ds-link--large:focus-visible { color: #fff; }

.ds-slider .ds-link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Text fades in after the slide arrives, like the old 1 s layer transition. */
.ds-slide .ds-inner > * {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 1000ms var(--ds-ease), transform 1000ms var(--ds-ease);
}

.ds-slide.is-active .ds-inner > * { opacity: 1; transform: none; transition-delay: 350ms; }
.ds-slide.is-active .ds-inner > * + * { transition-delay: 500ms; }
.ds-slide.is-active .ds-inner > * + * + * { transition-delay: 650ms; }

/* ---- Controls: arrows + pause, shown on hover / keyboard focus ---- */

.ds-slider .ds-arrow,
.ds-slider .ds-toggle {
	position: absolute;
	z-index: 3;
	display: grid;
	place-items: center;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.35);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.3s ease, background-color 0.2s ease;
}

/* --ds-safe-bottom: strip at the bottom covered by overlapping page content; controls stay clear of it. */
.ds-slider .ds-arrow { top: calc(50% - var(--ds-safe-bottom, 0px) / 2); width: 46px; height: 46px; margin-top: -23px; }
.ds-slider .ds-prev { left: 20px; }
.ds-slider .ds-next { right: 20px; }
.ds-slider .ds-toggle { right: 20px; bottom: calc(var(--ds-safe-bottom, 0px) + 18px); width: 34px; height: 34px; }

.ds-slider svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ds-slider .ds-toggle svg { width: 16px; height: 16px; }
.ds-slider .ds-icon-play { fill: currentColor; stroke-width: 1.5; display: none; }
.ds-slider.is-paused-by-user .ds-icon-pause { display: none; }
.ds-slider.is-paused-by-user .ds-icon-play { display: block; }

.ds-slider:hover .ds-arrow,
.ds-slider:hover .ds-toggle,
.ds-slider:focus-within .ds-arrow,
.ds-slider:focus-within .ds-toggle,
.ds-slider.is-paused-by-user .ds-toggle { opacity: 1; }

.ds-slider .ds-arrow:hover,
.ds-slider .ds-toggle:hover,
.ds-slider .ds-arrow:focus-visible,
.ds-slider .ds-toggle:focus-visible { background: var(--ds-accent); outline: none; }

/* Home page: the statistics row below is pulled up 90px over the slider (theme: .home-statistics { margin-top: -90px }). */
@media (min-width: 768px) {
	.home-slider .ds-slider { --ds-safe-bottom: 90px; }
}

/* Touch screens have no hover: keep controls visible. */
@media (hover: none) {
	.ds-slider .ds-arrow,
	.ds-slider .ds-toggle { opacity: 0.85; }
	.ds-slider .ds-arrow { width: 38px; height: 38px; margin-top: -19px; }
	.ds-slider .ds-prev { left: 10px; }
	.ds-slider .ds-next { right: 10px; }
}

/* ---- Phones: taller frame, text centred over a soft shade ---- */

@media (max-width: 767px) {
	.ds-slider { aspect-ratio: 4 / 3; max-height: none; }

	.ds-content {
		left: 0;
		width: 100%;
		transform: none;
		justify-content: center;
		padding: 0 56px;
		background: linear-gradient(90deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.3));
	}

	.ds-content::before { display: none; }
	.ds-shade { display: none; } /* the full-width shade above replaces it */
	/* Busy or bright photos ("Strong" shade) need a darker overlay when text covers the whole frame. */
	.ds-slide:has(.ds-shade--strong) .ds-content { background: rgba(0, 0, 0, 0.66); }
	.ds-inner { margin-left: 0; width: auto; max-width: 100%; }
	.ds-slider .ds-heading { font-size: clamp(20px, 6.2vw, 28px); }
	.ds-slider .ds-text { margin-top: 10px; max-width: none; font-size: 14px; line-height: 1.55; }
	.ds-slider .ds-link--button { margin-top: 16px; }
	.ds-slider .ds-link--large { margin-top: 6px; font-size: clamp(18px, 5.6vw, 26px); }
}

@media (prefers-reduced-motion: reduce) {
	.ds-slide,
	.ds-slide.is-active,
	.ds-slide .ds-inner > * { transition: none; }
	.ds-slide .ds-inner > * { transform: none; }
}