.cte-timeline {
	--cte-image-size: 280px;
	--cte-badge-size: 52px;
	--cte-row-gap: 72px;
	--cte-line-width: 1.5px;
	--cte-dash: 6;
	--cte-gap: 8;
	--cte-spin-duration: 30s;
	--cte-button-size: 48px;
	--cte-route-clearance: 24px;
	--cte-circle-route-gap: 26px;
	position: relative;
	max-width: 1120px;
	margin-inline: auto;
	padding: 20px 0;
}

.cte-timeline,
.cte-timeline * { box-sizing: border-box; }

.cte-timeline__routes {
	position: absolute;
	z-index: 0;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: visible;
}

.cte-timeline__routes path {
	fill: none;
	stroke: var(--cte-route-color, #EC406A);
	stroke-width: var(--cte-line-width);
	stroke-dasharray: var(--cte-dash) var(--cte-gap);
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.cte-timeline--animate-lines .cte-timeline__routes path {
	animation: cte-dash 2.6s linear infinite;
}

.cte-timeline__item {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(260px, 42%) minmax(0, 58%);
	align-items: center;
	min-height: calc(var(--cte-image-size) + 40px);
	margin-bottom: var(--cte-row-gap);
}

.cte-timeline__item:last-child { margin-bottom: 0; }
.cte-timeline__item--even { grid-template-columns: minmax(0, 58%) minmax(260px, 42%); }

.cte-timeline__visual {
	position: relative;
	z-index: 2;
	min-width: 0;
}

.cte-timeline__item--even .cte-timeline__visual { grid-column: 2; }

.cte-timeline__content {
	position: relative;
	z-index: 3;
	padding-inline: clamp(28px, 4.5vw, 68px);
	min-width: 0;
}

.cte-timeline__item--even .cte-timeline__content {
	grid-column: 1;
	grid-row: 1;
}

.cte-timeline__circle-wrap {
	position: relative;
	width: calc(var(--cte-image-size) + 40px);
	height: calc(var(--cte-image-size) + 40px);
	margin-inline: auto;
	border-radius: 50%;
}

.cte-timeline__image {
	position: absolute;
	inset: 20px;
	width: var(--cte-image-size);
	height: var(--cte-image-size);
	border-radius: 50% !important;
	clip-path: circle(50% at 50% 50%);
	object-fit: cover;
	display: block;
	background: transparent;
}

.cte-timeline__image--placeholder {
	background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.85), transparent 36%),
	linear-gradient(145deg, color-mix(in srgb, var(--cte-accent) 18%, #fff), #f4f4f4);
}

.cte-timeline__ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	transform-origin: 50% 50%;
	animation: cte-spin var(--cte-spin-duration) linear infinite;
}

.cte-timeline__ring circle {
	fill: none;
	stroke: var(--cte-accent);
	stroke-width: var(--cte-line-width);
	stroke-dasharray: var(--cte-dash) var(--cte-gap);
	vector-effect: non-scaling-stroke;
}

.cte-timeline__badge {
	position: absolute;
	z-index: 5;
	display: grid;
	place-items: center;
	width: var(--cte-badge-size);
	height: var(--cte-badge-size);
	padding: 8px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 8px 24px rgba(15, 23, 42, .10);
	opacity: 0;
	transform: translate(-50%, -50%);
	transition: opacity .15s ease;
}

.cte-timeline__badge--positioned { opacity: 1; }
.cte-timeline__badge img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

.cte-timeline__title {
	margin: 0 0 8px;
	font-size: clamp(18px, 1.7vw, 24px);
	font-weight: 750;
	line-height: 1.55;
	color: #1f2937;
}

.cte-timeline__subtitle {
	margin-bottom: 12px;
	font-size: 13px;
	line-height: 1.8;
	color: color-mix(in srgb, var(--cte-accent) 72%, #4b5563);
}

.cte-timeline__description { font-size: 15px; line-height: 2; color: #4b5563; }
.cte-timeline__description > :first-child { margin-top: 0; }
.cte-timeline__description > :last-child { margin-bottom: 0; }

.cte-timeline__button {
	position: relative;
	display: inline-flex;
	align-items: center;
	width: var(--cte-button-size);
	height: var(--cte-button-size);
	margin-top: 18px;
	border: var(--cte-line-width) solid color-mix(in srgb, var(--cte-accent) 42%, #d1d5db);
	border-radius: 999px;
	color: #374151;
	background: #fff;
	text-decoration: none;
	overflow: hidden;
	transition: width .3s ease, box-shadow .3s ease, transform .3s ease;
}

.cte-timeline__button--hover:hover,
.cte-timeline__button--hover:focus-visible {
	width: min(210px, 100%);
	box-shadow: 0 12px 28px color-mix(in srgb, var(--cte-accent) 18%, transparent);
	transform: translateY(-2px);
}

.cte-timeline__button--normal {
	width: auto;
	max-width: 100%;
	padding-inline-end: 18px;
}

.cte-timeline__button-icon {
	display: grid;
	place-items: center;
	flex: 0 0 var(--cte-button-size);
	width: var(--cte-button-size);
	height: var(--cte-button-size);
	font-size: 28px;
	line-height: 1;
	color: var(--cte-accent);
}

.cte-timeline__button-label {
	padding-inline-end: 22px;
	white-space: nowrap;
	opacity: 0;
	transform: translateX(8px);
	transition: opacity .2s ease .05s, transform .25s ease .05s;
}

.cte-timeline__button--hover:hover .cte-timeline__button-label,
.cte-timeline__button--hover:focus-visible .cte-timeline__button-label,
.cte-timeline__button--normal .cte-timeline__button-label { opacity: 1; transform: translateX(0); }

@keyframes cte-spin { to { transform: rotate(360deg); } }
@keyframes cte-dash { to { stroke-dashoffset: -28; } }

@media (max-width: 900px) {
	.cte-timeline__item,
	.cte-timeline__item--even { grid-template-columns: minmax(220px, 40%) minmax(0, 60%); }
	.cte-timeline__item--even { grid-template-columns: minmax(0, 60%) minmax(220px, 40%); }
	.cte-timeline__content { padding-inline: 26px; }
}

@media (max-width: 767px) {
	/* Mobile keeps the same alternating, connected composition as desktop. */
	.cte-timeline {
		padding: 14px 8px;
		overflow: visible;
	}

	.cte-timeline__routes {
		display: block;
		overflow: visible;
	}

	.cte-timeline__item,
	.cte-timeline__item--even {
		display: grid;
		grid-template-columns: minmax(0, 46%) minmax(0, 54%);
		align-items: center;
		min-height: max(190px, calc(min(calc(var(--cte-image-size) + 40px), 44vw) + 20px));
		margin-bottom: max(42px, calc(var(--cte-row-gap) * .58));
	}

	.cte-timeline__item--even {
		grid-template-columns: minmax(0, 54%) minmax(0, 46%);
	}

	.cte-timeline__visual,
	.cte-timeline__item--even .cte-timeline__visual {
		min-width: 0;
	}

	.cte-timeline__item--even .cte-timeline__visual {
		grid-column: 2;
	}

	.cte-timeline__content {
		grid-column: 2;
		padding-inline: clamp(10px, 3.2vw, 18px);
		padding-block: 12px;
		min-width: 0;
	}

	.cte-timeline__item--even .cte-timeline__content {
		grid-column: 1;
		grid-row: 1;
	}

	.cte-timeline__circle-wrap {
		width: min(calc(var(--cte-image-size) + 40px), 44vw);
		height: min(calc(var(--cte-image-size) + 40px), 44vw);
		max-width: 190px;
		max-height: 190px;
		margin-inline: auto;
	}

	.cte-timeline__image {
		inset: clamp(10px, 2.6vw, 16px);
		width: calc(100% - clamp(20px, 5.2vw, 32px));
		height: calc(100% - clamp(20px, 5.2vw, 32px));
	}

	.cte-timeline__title {
		font-size: clamp(14px, 4vw, 18px);
		line-height: 1.6;
		margin-bottom: 5px;
	}

	.cte-timeline__subtitle {
		font-size: clamp(10px, 2.8vw, 12px);
		line-height: 1.65;
		margin-bottom: 7px;
	}

	.cte-timeline__description {
		font-size: clamp(11px, 3.15vw, 14px);
		line-height: 1.8;
	}

	.cte-timeline__button {
		width: auto;
		max-width: 100%;
		height: min(var(--cte-button-size), 42px);
		margin-top: 10px;
		padding-inline-end: 12px;
	}

	.cte-timeline__button-icon {
		flex-basis: min(var(--cte-button-size), 42px);
		width: min(var(--cte-button-size), 42px);
		height: min(var(--cte-button-size), 42px);
		font-size: 23px;
	}

	.cte-timeline__button-label {
		padding-inline-end: 10px;
		font-size: 12px;
		opacity: 1;
		transform: none;
	}

	.cte-timeline__badge {
		display: none;
	}

	.cte-timeline--hide-mobile-connector .cte-timeline__routes {
		display: none;
	}
}

@media (max-width: 420px) {
	.cte-timeline__item,
	.cte-timeline__item--even {
		grid-template-columns: minmax(0, 44%) minmax(0, 56%);
	}

	.cte-timeline__item--even {
		grid-template-columns: minmax(0, 56%) minmax(0, 44%);
	}

	.cte-timeline__circle-wrap {
		width: 42vw;
		height: 42vw;
	}

	.cte-timeline__content {
		padding-inline: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cte-timeline__ring,
	.cte-timeline__routes path,
	.cte-timeline__button,
	.cte-timeline__button-label { animation: none !important; transition-duration: .01ms !important; }
}