.sst-timeline {
	--sst-track: #d9dfe7;
	--sst-progress: #e45b35;
	--sst-marker: #e45b35;
	--sst-card: #fff;
	--sst-radius: 18px;
	--sst-gap: 80px;
	--sst-offset: clamp(2rem, 5vw, 5.5rem);
	position: relative;
	display: block;
	isolation: isolate;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding-block: clamp(2rem, 6vw, 5rem);
	container: sst / inline-size;
}

.sst-timeline__rail {
	position: absolute;
	z-index: 0;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 4px;
	transform: translateX(-50%);
	overflow: hidden;
	border-radius: 999px;
	pointer-events: none;
}

.sst-timeline__track,
.sst-timeline__progress {
	position: absolute;
	inset: 0;
	display: block;
	border-radius: inherit;
}

.sst-timeline__track { background: var(--sst-track); }
.sst-timeline__progress {
	background: var(--sst-progress);
	background: linear-gradient(180deg, var(--sst-progress), color-mix(in srgb, var(--sst-progress) 72%, #ffbd59));
	transform: scaleY(1);
	transform-origin: top center;
}
.sst-timeline.sst-ready[data-progress="true"] .sst-timeline__progress { transform: scaleY(0); }
.sst-timeline[data-progress="false"] .sst-timeline__progress { display: none; }

.sst-timeline__items {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--sst-gap);
	width: 100%;
	min-width: 0;
}

.sst-milestone {
	position: relative;
	z-index: 1;
	width: calc(50% - var(--sst-offset));
	min-width: 0;
	box-sizing: border-box;
}
.sst-milestone:nth-child(odd) { justify-self: start; }
.sst-milestone:nth-child(even) { justify-self: end; }

.sst-milestone::before {
	position: absolute;
	top: calc(2rem + 11px);
	width: var(--sst-offset);
	height: 2px;
	background: linear-gradient(90deg, color-mix(in srgb, var(--sst-progress) 18%, transparent), var(--sst-progress));
	content: "";
	opacity: .65;
}
.sst-milestone:nth-child(odd)::before {
	right: calc(-1 * var(--sst-offset) + 12px);
	background: var(--sst-progress);
	background: linear-gradient(90deg, color-mix(in srgb, var(--sst-progress) 18%, transparent), var(--sst-progress));
}
.sst-milestone:nth-child(even)::before {
	left: calc(-1 * var(--sst-offset) + 12px);
	transform: rotate(180deg);
}

.sst-milestone__marker {
	position: absolute;
	top: 2rem;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	box-sizing: border-box;
	border: 3px solid var(--sst-marker);
	border-radius: 50%;
	background: var(--sst-card);
	box-shadow: 0 0 0 6px color-mix(in srgb, var(--sst-marker) 14%, transparent);
	transition: background-color .25s ease, color .25s ease, box-shadow .3s ease, transform .3s cubic-bezier(.2,.7,.2,1);
}
.sst-milestone:nth-child(odd) .sst-milestone__marker,
.sst-timeline[data-layout="left"] .sst-milestone .sst-milestone__marker {
	right: calc(-1 * var(--sst-offset) + 12px);
}
.sst-milestone:nth-child(even) .sst-milestone__marker,
.sst-timeline[data-layout="right"] .sst-milestone .sst-milestone__marker {
	left: calc(-1 * var(--sst-offset) + 12px);
}
.sst-timeline[data-layout="left"] .sst-milestone .sst-milestone__marker { left: auto; }
.sst-timeline[data-layout="right"] .sst-milestone .sst-milestone__marker { right: auto; }
.sst-milestone.is-active .sst-milestone__marker {
	transform: scale(1.16);
	background: var(--sst-marker);
	box-shadow: 0 0 0 7px color-mix(in srgb, var(--sst-marker) 20%, transparent), 0 0 22px color-mix(in srgb, var(--sst-marker) 45%, transparent);
}

.sst-marker-icon,
.sst-marker-default-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	color: var(--sst-marker);
	font-size: 11px;
	font-style: normal;
	line-height: 1;
}
.sst-marker-icon svg { display: block; width: 1em; height: 1em; }
.sst-marker-icon:is(img) { width: 1em; height: 1em; object-fit: contain; }
.sst-milestone.is-active .sst-marker-icon { color: #fff; }
.sst-timeline__icon-template[hidden] { display: none !important; }

.sst-milestone__card {
	position: relative;
	min-width: 0;
	box-sizing: border-box;
	padding: var(--sst-card-pad-top, 28px) var(--sst-card-pad-right, 28px) var(--sst-card-pad-bottom, 28px) var(--sst-card-pad-left, 28px);
	border: 1px solid color-mix(in srgb, var(--sst-track) 45%, transparent);
	border-radius: var(--sst-radius);
	background: var(--sst-card);
	box-shadow: 0 1rem 3rem rgb(16 24 40 / .08);
	overflow: hidden;
	transition: box-shadow .35s ease, border-color .35s ease;
}
.sst-milestone.is-active .sst-milestone__card {
	border-color: color-mix(in srgb, var(--sst-marker) 24%, var(--sst-track));
	box-shadow: 0 1.25rem 3rem rgb(16 24 40 / .12), 0 8px 28px color-mix(in srgb, var(--sst-marker) 8%, transparent);
}
.sst-milestone__figure { overflow: hidden; }
.sst-milestone__figure--top { margin: calc(0px - var(--sst-card-pad-top, 28px)) calc(0px - var(--sst-card-pad-right, 28px)) 1.25rem calc(0px - var(--sst-card-pad-left, 28px)); }
.sst-milestone__figure--bottom { margin: 1.25rem calc(0px - var(--sst-card-pad-right, 28px)) calc(0px - var(--sst-card-pad-bottom, 28px)) calc(0px - var(--sst-card-pad-left, 28px)); }
.sst-milestone__image {
	display: block;
	width: 100%;
	height: 260px;
	object-fit: cover;
	will-change: transform;
}
.sst-milestone__eyebrow {
	margin: 0 0 .45rem;
	color: var(--sst-progress);
	font-size: .82em;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.sst-milestone__title { margin: 0 0 .7rem; line-height: 1.12; }
.sst-milestone__description { overflow-wrap: anywhere; }
.sst-milestone__description > :last-child { margin-bottom: 0; }
.sst-milestone__title { overflow-wrap: anywhere; }

.sst-timeline[data-layout="left"] .sst-milestone { justify-self: start; }
.sst-timeline[data-layout="right"] .sst-milestone { justify-self: end; }
.sst-timeline[data-layout="left"] .sst-milestone::before { right: calc(-1 * var(--sst-offset) + 12px); left: auto; transform: none; }
.sst-timeline[data-layout="right"] .sst-milestone::before { left: calc(-1 * var(--sst-offset) + 12px); right: auto; transform: none; }

.sst-timeline[data-reveal="true"].sst-ready .sst-milestone {
	opacity: 0;
	transform: translateY(32px) scale(.985);
	transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1);
}
.sst-timeline[data-reveal="true"].sst-ready .sst-milestone.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}
.sst-timeline[data-reveal="true"].sst-ready .sst-milestone:nth-child(even) { transition-delay: .06s; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.sst-milestone__card:hover { transform: translateY(-3px); }
	.sst-milestone__card { transition: transform .3s ease, box-shadow .35s ease, border-color .35s ease; }
}

/* Keep a readable, single-column story inside narrow Bricks columns and on phones. */
@media (max-width: 767px) {
	.sst-timeline__rail { left: 12px; transform: none; }
	.sst-milestone,
	.sst-timeline[data-layout="left"] .sst-milestone,
	.sst-timeline[data-layout="right"] .sst-milestone {
		width: calc(100% - 49px);
		justify-self: end;
	}
	.sst-milestone::before { display: none; }
	.sst-milestone .sst-milestone__marker,
	.sst-timeline[data-layout="left"] .sst-milestone .sst-milestone__marker,
	.sst-timeline[data-layout="right"] .sst-milestone .sst-milestone__marker {
		left: -49px;
		right: auto;
	}
	.sst-timeline[data-mobile-line="center"] .sst-timeline__rail { left: 50%; transform: translateX(-50%); }
	.sst-timeline[data-mobile-line="center"] .sst-milestone { width: calc(50% - 30px); }
	.sst-timeline[data-mobile-line="center"] .sst-milestone:nth-child(odd) { justify-self: start; }
	.sst-timeline[data-mobile-line="center"] .sst-milestone:nth-child(even) { justify-self: end; }
	.sst-timeline[data-mobile-line="center"] .sst-milestone:nth-child(odd) .sst-milestone__marker { left: auto; right: -18px; }
	.sst-timeline[data-mobile-line="center"] .sst-milestone:nth-child(even) .sst-milestone__marker { left: -42px; right: auto; }
}

.sst-timeline.sst-is-mobile .sst-timeline__rail { left: 12px; transform: none; }
.sst-timeline.sst-is-mobile .sst-milestone,
.sst-timeline.sst-is-mobile[data-layout="left"] .sst-milestone,
.sst-timeline.sst-is-mobile[data-layout="right"] .sst-milestone { width: calc(100% - 49px); justify-self: end; }
.sst-timeline.sst-is-mobile .sst-milestone::before { display: none; }
.sst-timeline.sst-is-mobile .sst-milestone .sst-milestone__marker,
.sst-timeline.sst-is-mobile[data-layout="left"] .sst-milestone .sst-milestone__marker,
.sst-timeline.sst-is-mobile[data-layout="right"] .sst-milestone .sst-milestone__marker { left: -49px; right: auto; }
.sst-timeline.sst-is-mobile[data-mobile-line="center"] .sst-timeline__rail { left: 50%; transform: translateX(-50%); }
.sst-timeline.sst-is-mobile[data-mobile-line="center"] .sst-milestone { width: calc(50% - 30px); }
.sst-timeline.sst-is-mobile[data-mobile-line="center"] .sst-milestone:nth-child(odd) { justify-self: start; }
.sst-timeline.sst-is-mobile[data-mobile-line="center"] .sst-milestone:nth-child(even) { justify-self: end; }
.sst-timeline.sst-is-mobile[data-mobile-line="center"] .sst-milestone:nth-child(odd) .sst-milestone__marker { left: auto; right: -18px; }
.sst-timeline.sst-is-mobile[data-mobile-line="center"] .sst-milestone:nth-child(even) .sst-milestone__marker { left: -42px; right: auto; }

@container sst (max-width: 700px) {
	.sst-timeline__rail { left: 12px; transform: none; }
	.sst-milestone,
	.sst-timeline[data-layout="left"] .sst-milestone,
	.sst-timeline[data-layout="right"] .sst-milestone { width: calc(100% - 49px); justify-self: end; }
	.sst-milestone::before { display: none; }
	.sst-milestone .sst-milestone__marker,
	.sst-timeline[data-layout="left"] .sst-milestone .sst-milestone__marker,
	.sst-timeline[data-layout="right"] .sst-milestone .sst-milestone__marker { left: -49px; right: auto; }
	.sst-timeline[data-mobile-line="center"] .sst-timeline__rail { left: 50%; transform: translateX(-50%); }
	.sst-timeline[data-mobile-line="center"] .sst-milestone { width: calc(50% - 30px); }
	.sst-timeline[data-mobile-line="center"] .sst-milestone:nth-child(odd) { justify-self: start; }
	.sst-timeline[data-mobile-line="center"] .sst-milestone:nth-child(even) { justify-self: end; }
	.sst-timeline[data-mobile-line="center"] .sst-milestone:nth-child(odd) .sst-milestone__marker { left: auto; right: -18px; }
	.sst-timeline[data-mobile-line="center"] .sst-milestone:nth-child(even) .sst-milestone__marker { left: -42px; right: auto; }
}

.sst-timeline--builder .sst-timeline__rail { left: 12px; transform: none; }
.sst-timeline--builder .sst-timeline__items { display: flex; flex-direction: column; align-items: stretch; gap: var(--sst-gap); }
.sst-timeline--builder .sst-timeline__items > * { width: 100%; max-width: none; min-width: 0; }
.sst-timeline--builder .sst-milestone { width: calc(100% - 49px) !important; max-width: 780px; margin-left: 49px; justify-self: stretch; }
.sst-timeline--builder .sst-milestone__marker { left: -49px !important; right: auto !important; }

@media (prefers-reduced-motion: reduce) {
	.sst-timeline *, .sst-timeline *::before, .sst-timeline *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
	.sst-timeline__progress { transform: scaleY(1) !important; }
	.sst-timeline[data-reveal="true"].sst-ready .sst-milestone { opacity: 1; transform: none; }
	.sst-milestone__image { transform: none !important; }
}
