/**
 * Customer Success Hero Slider — WPBakery element.
 * Full-bleed media slider with a static H1, a backdrop-blur content panel,
 * a numbered pagination list and a non-contained strip of four stats.
 */

.tm-cshero {
	/* Colours come from the central palette in style.css (:root --field-first-*).
	   These local aliases keep the slider's internal names but a single source
	   of truth, so there's no divergence from the field-first variables. */
	--tm-cshero-pink: var(--field-first-pink, #ce75fa);
	--tm-cshero-lavender: var(--field-first-lavender, #ae80e4);
	--tm-cshero-dark: var(--field-first-dark, #1e1931);
	--tm-cshero-purple: var(--field-first-purple, #20106a);
	--tm-cshero-ease: cubic-bezier(.22, 1, .36, 1);
	position: relative;
	width: 100%;
	color: #fff;
}

/* ---------- Media stage ---------- */
.tm-cshero__media {
	position: relative;
	width: 100%;
	display: flex;
	padding: 90px 0px 120px;
}

.tm-cshero__bgs {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin-left: -50vw;
	left: 50%;
	width: 100vw;
	overflow: hidden;
}

.tm-cshero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transform: scale(1.08);
	transition: opacity 1.1s var(--tm-cshero-ease);
	will-change: opacity, transform;
}

.tm-cshero__bg.is-active {
	opacity: 1;
	/* Slow Ken Burns drift while the slide is active. */
	animation: tm-cshero-kenburns 9s ease-out forwards;
}

@keyframes tm-cshero-kenburns {
	from { transform: scale(1.08); }
	to   { transform: scale(1); }
}

/* Layered scrim: dark base + brand-tinted vignette for legibility. */
.tm-cshero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
0deg, var(--nectar-tm-deep-navy), #04032f85);
	margin-left: -50vw;
	left: 50%;
	width: 100vw;
	opacity: 0.95;
	user-select: none;
}

.tm-cshero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
}

/* ---------- Static title ---------- */
.tm-cshero__title {
	margin: 0 0 auto;
	text-align: center;
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.03em;
	font-size: 50px;
	color: #fff;
	text-shadow: 0 2px 24px rgb(0 0 0 / 9%);
	max-width: 8000px;
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Panel + nav row ---------- */
.tm-cshero__row {
	display: flex;
	flex-wrap: nowrap;
	gap: 50px;
	align-items: center;
	margin-top: 60px;
	border-radius: 20px;
	padding: 55px;
	background: var(--blurred-bg-color);
	border: 1px solid rgba(255, 255, 255, .12);
	-webkit-backdrop-filter: blur(16px) saturate(120%);
	backdrop-filter: blur(16px) saturate(120%);
	box-shadow: 0 30px 80px -30px var(--blurred-bg-color);
	overflow: hidden;
}

/* ---------- Blur content panel ---------- */
.tm-cshero__panel {
	position: relative;
	flex: 2.5;
}

.tm-cshero__slide {
	position: absolute;
	inset: clamp(24px, 3vw, 40px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	text-decoration: none;
	color: #fff;
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	transition: opacity .6s var(--tm-cshero-ease), transform .6s var(--tm-cshero-ease);
	pointer-events: none;
}

.tm-cshero__slide.is-active {
	position: relative;
	inset: auto;
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
}

/* Staggered reveal of the active panel's children. */
.tm-cshero__slide.is-active > * {
	animation: tm-cshero-rise .7s var(--tm-cshero-ease) both;
}
.tm-cshero__slide.is-active > *:nth-child(1) { animation-delay: .05s; }
.tm-cshero__slide.is-active > *:nth-child(2) { animation-delay: .12s; }
.tm-cshero__slide.is-active > *:nth-child(3) { animation-delay: .19s; }
.tm-cshero__slide.is-active > *:nth-child(4) { animation-delay: .26s; }

@keyframes tm-cshero-rise {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}

.tm-cshero__logo {
	max-height: 50px;
	max-width: 130px !important;
	width: auto;
	height: auto;
	object-fit: contain;
	margin-bottom: 5px !important;
	filter: brightness(0) invert(1);
}

.tm-cshero__heading {
	font-size: 36px;
	font-weight: 300;
	line-height: 1.25;
	max-width: 750px;
	letter-spacing: -0.02em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tm-cshero__excerpt {
	font-size: 17px;
	line-height: 1.65;
	color: rgba(255, 255, 255, .85);
	max-width: 65ch;
	font-weight: 300;
}

.tm-cshero__more {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 7.5px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase !important;
	color: #fff;
	background: var(--nectar-field-first-pink);
	padding: 13px 32px;
	border-radius: 5px;
}

.tm-cshero__more-arrow {
	transition: transform .35s var(--tm-cshero-ease);
}

.tm-cshero__slide:hover .tm-cshero__more-arrow {
	transform: translateX(6px);
}

/* ---------- Pagination list ---------- */
.tm-cshero__nav {
	display: flex;
	flex-direction: column;
	gap: 35px;
	flex: 1;
}

body .row .tm-cshero__dot {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: 25px 15px;
	width: 100%;
	background: none;
	border: 0;
	color: rgba(255, 255, 255, .6);
	text-align: left;
	cursor: pointer;
	transition: color .35s var(--tm-cshero-ease);
	font: inherit;
	border-radius: 0px !important;
	padding: 0px !important;
}

.tm-cshero__dot:last-child {
	border-bottom: none !important;
}

.tm-cshero__dot:hover,
.tm-cshero__dot.is-active { color: #fff !important; }

.tm-cshero__dot-num {
	font-size: 30px;
	line-height: 0.8;
	font-weight: 300;
	color: var(--tm-cshero-lavender);
	opacity: .7;
	transition: opacity .35s var(--tm-cshero-ease);
}
.tm-cshero__dot.is-active .tm-cshero__dot-num { opacity: 1; }

.tm-cshero__dot-copy {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	gap: 9px 30px;
	min-width: 0;
}

/* Small eyebrow = the post title (who the case study is). */
.tm-cshero__dot-eyebrow {
	font-size: 13px;
	line-height: 1;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--tm-cshero-lavender);
	opacity: 1;
}

/* Larger heading = the project overview heading (what the story is). */
.tm-cshero__dot-heading {
	font-size: 15px;
	line-height: 1.4;
	font-weight: 400;
	letter-spacing: -0.01em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Autoplay progress bar sits under the active item's label. */
.tm-cshero__dot-track {
	grid-column: 2;
	display: block;
	height: 2px;
	margin-top: 0;
	border-radius: 2px;
	background: rgba(255, 255, 255, .16);
	overflow: hidden;
	opacity: 1;
	transition: opacity .3s var(--tm-cshero-ease);
}
.tm-cshero__dot.is-active .tm-cshero__dot-track { opacity: 1; }

.tm-cshero__dot-fill {
	display: block;
	height: 100%;
	width: 100%;
	transform: scaleX(0);
	transform-origin: left center;
	background: linear-gradient(90deg, var(--tm-cshero-lavender), var(--tm-cshero-pink));
}

.tm-cshero__dot.is-active .tm-cshero__dot-fill.is-running {
	animation: tm-cshero-progress linear forwards;
	animation-duration: var(--tm-cshero-duration, 6s);
}

@keyframes tm-cshero-progress {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* ---------- Stats strip (inside the media, over the background) ---------- */
.tm-cshero__stats {
	position: relative;
	display: none;
	flex-wrap: nowrap;
	gap: 45px;
	width: 100%;
	max-width: 100%;
	margin-top: 65px;
}

.tm-cshero__stat {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}
.tm-cshero__stat.is-empty { display: none; }

.tm-cshero__stat-rule {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 1.5px;
	border-radius: 42px;
	background: #fff;
	margin-bottom: 20px;
}
.tm-cshero__stat:first-child .tm-cshero__stat-rule {
	background: var(--nectar-field-first-lavender);
}

.tm-cshero__stat-figure {
	font-size: var(--cs-stat);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.025em;
	color: #fff;
	display: flex;
	gap: 7.5px;
}
.tm-cshero__stat:first-child .tm-cshero__stat-figure { color: var(--tm-cshero-pink); }

.tm-cshero__stat-symbol {
	vertical-align: unset;
	font-size: 100%;
	font-weight: inherit;
	color: var(--field-first-lavender);
}

.tm-cshero__stat-text {
	font-size: 16px;
	line-height: 1.3;
	color: rgba(255, 255, 255, .82);
	margin-top: 5px;
}

/* Value-swap animation when the active slide changes. */
.tm-cshero__stat-figure,
.tm-cshero__stat-text {
	transition: opacity .45s var(--tm-cshero-ease), transform .45s var(--tm-cshero-ease), filter .45s var(--tm-cshero-ease);
}
.tm-cshero__stats.is-swapping .tm-cshero__stat-figure,
.tm-cshero__stats.is-swapping .tm-cshero__stat-text {
	opacity: 0;
	transform: translateY(10px);
	filter: blur(4px);
}

/* ---------- Responsive ---------- */

@media (max-width: 1300px) {

	.tm-cshero__title {
    font-size: 45px;
}
	.tm-cshero__excerpt {
    font-size: 16px;}
	.tm-cshero__heading {
    font-size: 30px;
	}
	.tm-cshero__stat-text {
    font-size: 14px;}
	.tm-cshero__row {padding: 45px;gap: 40px;}
.tm-cshero__logo {max-height: 45px;max-width: 120px !important;}
	.tm-cshero__stats {gap:30px;}
}

@media (max-width: 999px) {
	.tm-cshero__row {
		gap: 25px;
		display: flex;
		flex-direction: column;
		margin-top: 60px;
		padding: 38px;
	}
	
	.tm-cshero__nav {display: flex;flex-direction: row;justify-content: flex-start;width: 100%;position: relative;gap: 20px;margin-top: 20px;}
	.tm-cshero__stats {
		grid-template-columns: repeat(2, 1fr);
		gap: 40px 25px;
		margin-top: 0;
		padding-top: clamp(28px, 6vw, 44px);
		display: grid;
		display: none;
	}
	.tm-cshero__heading {
    font-size: 26px;
    -webkit-line-clamp: 4;
    }
		.tm-cshero__title {
    font-size: 38px;
    max-width: 450px;
}
	.tm-cshero__media {
    position: relative;
    width: 100%;
    display: flex;
    padding: 70px 0px 75px;
}
	body .row .tm-cshero__dot span.tm-cshero__dot-num {display: none;}
body .row .tm-cshero__dot  span.tm-cshero__dot-copy {display: none;}
.tm-cshero__dot-track {width: 100%;}
body .row .tm-cshero__dot {flex: 1;gap: 0;}

	.tm-cshero__excerpt {
    font-size: 15px;}

.tm-cshero__more {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 7.5px;
	font-size: 13px;padding: 12px 30px;}
}

@media (max-width: 690px) {
	.tm-cshero__media { min-height: 0; }
	.tm-cshero__inner {padding-bottom: 0;}
	.tm-cshero__row {margin-top: 55px;padding: 28px;}
	.tm-cshero__stats {gap: 35px 20px;grid-template-columns: 1fr 1fr;}
	.tm-cshero__title {font-size: 30px;max-width: 350px;}
	.tm-cshero__logo {max-height: 35px;max-width: 100px !important;}
	.tm-cshero__excerpt {font-size: 13.5px;}
	.tm-cshero__heading {font-size: 20px;}
	.tm-cshero__slide {gap: 15px;}
	.tm-cshero__slide {gap: 13px;}
	.tm-cshero__stat-text {font-size: 13px;line-height: 1.2;}
	span.tm-cshero__stat-figure {font-size: 22px;line-height: 1;}
	.tm-cshero__stat-rule {margin-bottom: 25px;}
	.tm-cshero__stat {gap: 5px;}
	.tm-cshero__more {font-size: 12.5px;width: 100%;text-align: center;display: flex;align-items: center;justify-content: center;}
	.tm-cshero__nav {gap: 10px;}
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
	.tm-cshero__bg,
	.tm-cshero__bg.is-active,
	.tm-cshero__slide,
	.tm-cshero__slide.is-active > *,
	.tm-cshero__dot-fill.is-running,
	.tm-cshero__stat-figure,
	.tm-cshero__stat-text {
		animation: none !important;
		transition: opacity .2s linear !important;
		transform: none !important;
		filter: none !important;
	}
}