/* === Cambr Scroll Steps === */

.cambr-steps {
	width: 100%;
}

.cambr-steps__grid {
	display: grid;
	grid-template-columns: minmax(220px, 280px) 1fr;
	gap: 60px;
	align-items: start;
}

/* --- Counter (sticky) --- */

.cambr-steps__counter {
	position: sticky;
	top: var(--cambr-steps-sticky-top, 140px);
	display: inline-flex;
	align-items: flex-start;
	font-family: 'Figtree', sans-serif;
	font-weight: 300;
	font-size: 160px;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--cambr-core-blue, #488af3);
	font-variant-numeric: tabular-nums;
	user-select: none;
}

.cambr-steps__counter-fixed,
.cambr-steps__counter-wheel {
	display: inline-block;
	height: 1em;
	line-height: 1;
}

.cambr-steps__counter-wheel {
	overflow: hidden;
	position: relative;
}

.cambr-steps__counter-track {
	display: block;
	transform: translateY(0);
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

.cambr-steps__counter-digit {
	display: block;
	height: 1em;
	line-height: 1;
}

/* --- List --- */

.cambr-steps__list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}

.cambr-steps__item {
	padding-bottom: var(--cambr-steps-gap, 360px);
	position: relative;
}

.cambr-steps__item:last-child {
	padding-bottom: 0;
}

.cambr-steps__number-mobile {
	display: none;
	font-family: 'Figtree', sans-serif;
	font-weight: 300;
	font-size: 64px;
	line-height: 1;
	color: var(--cambr-core-blue, #488af3);
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
	margin-bottom: 16px;
}

/* --- Divider --- */

.cambr-steps__divider {
	width: 100%;
	height: 2px;
	margin-bottom: 32px;
	background-image: linear-gradient(
		to right,
		var(--cambr-core-blue, #488af3) 50%,
		var(--cambr-grey-40, #c7c7c7) 50%
	);
	background-size: 200% 100%;
	background-position: 100% 0;
	transition: background-position 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.cambr-steps__item.is-active .cambr-steps__divider {
	background-position: 0 0;
}

/* --- Heading / description --- */

.cambr-steps__heading {
	font-family: 'Figtree', sans-serif;
	font-weight: 500;
	font-size: 32px;
	line-height: 1.25;
	letter-spacing: normal;
	color: var(--cambr-deep-blue, #003b77);
	margin: 0 0 16px 0;
}

.cambr-steps__description {
	font-family: 'Figtree', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.5;
	color: var(--cambr-grey-100, #575757);
	margin: 0;
	max-width: 640px;
}

/* === Responsive === */

@media (max-width: 1024px) {
	.cambr-steps__grid {
		gap: 40px;
	}

	.cambr-steps__counter {
		font-size: 120px;
	}

	.cambr-steps__heading {
		font-size: 28px;
	}
}

@media (max-width: 780px) {
	.cambr-steps__grid {
		display: block;
	}

	.cambr-steps__counter {
		display: none;
	}

	.cambr-steps__number-mobile {
		display: block;
	}

	.cambr-steps__item {
		padding-bottom: 80px;
	}

	.cambr-steps__heading {
		font-size: 24px;
	}

	.cambr-steps__description {
		font-size: 16px;
	}
}