.techie-timeline {
	--techie-accent: #111827;
	--techie-card: #fff;
	--techie-gap: 38px;
	--techie-muted: #d9d9d9;
	--techie-radius: 18px;
	--techie-border-size: 0;
	--techie-border-color: #ececf1;
	--techie-line-width: 4px;
	--techie-marker-size: 44px;
	--techie-arrow-size: 42px;
	--techie-slider-item-width: 100%;
	--techie-card-padding: 34px;
	--techie-card-min-height: 0;
	border: 0;
	position: relative;
}

.techie-timeline__item {
	position: relative;
}

.techie-timeline__title {
	line-height: 1.15;
	margin: var(--techie-title-space, 0) 0 var(--techie-title-space-b, 12px);
}

.techie-timeline__content > :last-child {
	margin-bottom: 0;
}

.techie-timeline__media img {
	border-radius: var(--techie-radius);
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.techie-timeline--image-landscape .techie-timeline__media img {
	aspect-ratio: 16 / 10;
}

.techie-timeline--image-square .techie-timeline__media img {
	aspect-ratio: 1;
}

.techie-timeline--image-portrait .techie-timeline__media img {
	aspect-ratio: 4 / 5;
}

.techie-timeline__card {
	background: var(--techie-card);
	border: var(--techie-border-size) solid var(--techie-border-color);
	border-radius: var(--techie-radius);
	min-height: max(100%, var(--techie-card-min-height));
	padding: var(--techie-card-padding);
}

.techie-timeline__builder-chip {
	background: color-mix(in srgb, var(--techie-accent), transparent 16%);
	border-radius: 999px;
	color: #fff;
	display: inline-flex;
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	margin: 0 0 14px;
	padding: 7px 11px;
	width: fit-content;
}

.techie-timeline--card-clean .techie-timeline__card {
	background: transparent;
	padding: 0;
}

.techie-timeline--card-dark .techie-timeline__card {
	background: #151922;
	color: #fff;
}

.techie-timeline--card-dark .techie-timeline__title {
	color: inherit;
}

.techie-timeline--card-image .techie-timeline__media {
	margin-bottom: 18px;
}

.techie-timeline--skin-soft-accent .techie-timeline__card,
.techie-timeline--skin-soft-accent.techie-timeline--process .techie-timeline__item {
	background: linear-gradient(180deg, rgba(255,255,255,.98), color-mix(in srgb, var(--techie-accent), #fff 94%));
}

.techie-timeline--skin-dark-band {
	background:
		linear-gradient(180deg, rgba(15,23,42,.03), rgba(15,23,42,.03)),
		transparent;
	padding: clamp(18px, 4vw, 28px);
}

.techie-timeline--skin-dark-band .techie-timeline__card,
.techie-timeline--skin-dark-band.techie-timeline--process .techie-timeline__item {
	box-shadow: var(--techie-shadow-lg);
}

.techie-timeline--skin-editorial .techie-timeline__card {
	border-color: rgba(17, 24, 39, .08);
	box-shadow: var(--techie-shadow-md);
}

.techie-timeline--skin-editorial .techie-timeline__title {
	font-size: clamp(24px, 3vw, 34px);
}

.techie-timeline--shadow-soft .techie-timeline__card,
.techie-timeline--shadow-soft.techie-timeline--process .techie-timeline__item {
	box-shadow: var(--techie-shadow-sm);
}

.techie-timeline--shadow-strong .techie-timeline__card,
.techie-timeline--shadow-strong.techie-timeline--process .techie-timeline__item {
	box-shadow: var(--techie-shadow-md);
}

.techie-timeline--line-dashed::before,
.techie-timeline--line-dashed .techie-timeline__item::after {
	border-style: dashed !important;
}

.techie-timeline--line-dotted::before,
.techie-timeline--line-dotted .techie-timeline__item::after {
	border-style: dotted !important;
}

.techie-timeline--line-none::before,
.techie-timeline--line-none .techie-timeline__item::after {
	display: none !important;
}

.techie-timeline--vertical {
	display: grid;
	gap: clamp(34px, 6vw, 72px);
}

.techie-timeline--vertical::before {
	border-left: var(--techie-line-width) solid color-mix(in srgb, var(--techie-accent), transparent 50%);
	bottom: 0;
	content: "";
	left: 50%;
	position: absolute;
	top: 0;
	transform: translateX(-50%);
}

.techie-timeline--vertical .techie-timeline__item {
	display: grid;
	gap: clamp(24px, 5vw, 64px);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.techie-timeline--vertical .techie-timeline__item.is-no-image:nth-child(odd) .techie-timeline__card {
	grid-column: 1;
	text-align: right;
}

.techie-timeline--vertical .techie-timeline__item.is-no-image:nth-child(even) .techie-timeline__card {
	grid-column: 2;
}

.techie-timeline--vertical .techie-timeline__item:nth-child(even) .techie-timeline__media {
	order: -1;
}

.techie-timeline__marker {
	align-items: center;
	background: var(--techie-accent);
	border-radius: 999px;
	color: #fff;
	display: inline-flex;
	font-weight: 800;
	justify-content: center;
	min-height: var(--techie-marker-size);
	min-width: var(--techie-marker-size);
	padding: 7px 14px;
	text-align: center;
	white-space: nowrap;
	z-index: 1;
}

.techie-timeline--marker-style-soft .techie-timeline__marker {
	background: color-mix(in srgb, var(--techie-accent), white 78%);
	color: var(--techie-accent);
}

.techie-timeline--marker-style-outline .techie-timeline__marker {
	background: #fff;
	border: 2px solid color-mix(in srgb, var(--techie-accent), transparent 18%);
	color: var(--techie-accent);
}

.techie-timeline--marker-style-dark .techie-timeline__marker {
	background: #0f172a;
	box-shadow: var(--techie-shadow-sm);
	color: #fff;
}

.techie-timeline--vertical .techie-timeline__marker {
	left: 50%;
	position: absolute;
	top: 0;
	transform: translateX(-50%);
}

.techie-timeline--marker-icon .techie-timeline__marker {
	border-radius: 50%;
	font-size: 20px;
	padding: 0;
}

.techie-timeline--process {
	display: grid;
	gap: clamp(42px, 6vw, 86px) var(--techie-gap);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.techie-timeline--process.techie-timeline--cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.techie-timeline--process.techie-timeline--cols-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.techie-timeline--process .techie-timeline__item {
	background: var(--techie-card);
	border: var(--techie-border-size) solid var(--techie-border-color);
	border-radius: var(--techie-radius);
	min-height: 245px;
	padding: 34px 28px 42px;
}

.techie-timeline--process .techie-timeline__item::after {
	border-top: 3px solid var(--techie-muted);
	content: "";
	left: 100%;
	position: absolute;
	top: 50%;
	width: var(--techie-gap);
}

.techie-timeline--process .techie-timeline__item:nth-child(3n)::after,
.techie-timeline--process .techie-timeline__item:last-child::after {
	display: none;
}

.techie-timeline--process .techie-timeline__marker {
	background: color-mix(in srgb, var(--techie-accent), transparent 72%);
	color: var(--techie-accent);
	margin-bottom: 18px;
}

.techie-timeline--horizontal {
	display: grid;
	gap: var(--techie-gap);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.techie-timeline--horizontal.techie-timeline--cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.techie-timeline--horizontal.techie-timeline--cols-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.techie-timeline--horizontal::before {
	border-top: var(--techie-line-width) solid color-mix(in srgb, var(--techie-accent), transparent 50%);
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 26px;
}

.techie-timeline--horizontal .techie-timeline__item {
	padding-top: 70px;
}

.techie-timeline--horizontal .techie-timeline__marker {
	left: 0;
	position: absolute;
	top: 0;
}

/* ============ SLIDER (premium infinite carousel) ============ */
.techie-timeline--slider {
	--techie-per: var(--techie-per-desktop, 3);
	--techie-track-light: color-mix(in srgb, var(--techie-accent), #fff 82%);
}

.techie-timeline--slider .techie-timeline__viewport {
	/* Clip only left/right (to hide the sliding cards) while allowing generous
	   vertical overflow, so marker rings (top) and card shadows (bottom) are
	   never cut off regardless of hover lift or marker size. */
	clip-path: inset(-70px 0 -70px 0);
	overflow: visible;
	padding: 8px 2px 12px;
	position: relative;
}

.techie-timeline--slider .techie-timeline__track {
	align-items: stretch;
	display: flex;
	gap: var(--techie-gap);
	transition: transform .55s cubic-bezier(.22, .61, .36, 1);
	will-change: transform;
}

.techie-timeline--slider .techie-timeline__item {
	box-sizing: border-box;
	display: flex;
	flex: 0 0 calc((100% - (var(--techie-per) - 1) * var(--techie-gap)) / var(--techie-per));
	flex-direction: column;
	gap: 20px;
	max-width: calc((100% - (var(--techie-per) - 1) * var(--techie-gap)) / var(--techie-per));
	min-width: 0;
	padding: 4px 4px 8px;
	position: relative;
}

/* Continuous connector line running through every marker */
.techie-timeline--slider .techie-timeline__item::before {
	background: var(--techie-track-light);
	border-radius: 999px;
	content: "";
	height: var(--techie-line-width);
	left: calc(var(--techie-gap) / -2 - 4px);
	position: absolute;
	right: calc(var(--techie-gap) / -2 - 4px);
	top: calc(4px + var(--techie-marker-size) / 2);
	transform: translateY(-50%);
	z-index: 0;
}

.techie-timeline--slider.techie-timeline--line-none .techie-timeline__item::before {
	display: none;
}

/* Marker sits on the line; colour hierarchy = active accent, rest light */
.techie-timeline--slider .techie-timeline__marker {
	align-self: center;
	background: var(--techie-track-light);
	box-shadow: 0 0 0 6px var(--techie-card);
	color: var(--techie-accent);
	margin: 0 auto;
	position: relative;
	transition: background-color .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
	z-index: 2;
}

.techie-timeline--slider.techie-timeline--mpos-left .techie-timeline__marker {
	align-self: flex-start;
	margin: 0;
}

.techie-timeline--slider.techie-timeline--mpos-right .techie-timeline__marker {
	align-self: flex-end;
	margin: 0;
}

.techie-timeline--slider .techie-timeline__item.is-active .techie-timeline__marker {
	background: var(--techie-accent);
	box-shadow: 0 0 0 6px var(--techie-card), 0 10px 24px color-mix(in srgb, var(--techie-accent), transparent 60%);
	color: #fff;
	transform: scale(1.06);
}

/* Equal-height cards, premium surface + hover */
.techie-timeline--slider .techie-timeline__media {
	margin-top: 4px;
}

.techie-timeline--slider .techie-timeline__card {
	border: 1px solid color-mix(in srgb, var(--techie-accent), #fff 88%);
	flex: 1 1 auto;
	transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.techie-timeline--slider.techie-timeline--card-clean .techie-timeline__card {
	border: 0;
}

.techie-timeline--slider.techie-timeline--card-dark .techie-timeline__card {
	border-color: rgba(255, 255, 255, .12);
}

.techie-timeline--slider .techie-timeline__item:hover .techie-timeline__card {
	border-color: color-mix(in srgb, var(--techie-accent), transparent 60%);
	box-shadow: var(--techie-shadow-md);
	transform: translateY(-4px);
}

.techie-timeline__controls {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	margin-top: 18px;
}

.techie-timeline--controls-left .techie-timeline__controls,
.techie-timeline--controls-left .techie-timeline__dots {
	justify-content: flex-start;
}

.techie-timeline--controls-center .techie-timeline__controls,
.techie-timeline--controls-center .techie-timeline__dots {
	justify-content: center;
}

/* Arrows on the left & right sides, seated in reserved gutters (never over cards) */
.techie-timeline--slider.techie-timeline--arrows-sides {
	padding-left: 62px;
	padding-right: 62px;
}

.techie-timeline--arrows-sides .techie-timeline__controls {
	align-items: center;
	bottom: 0;
	justify-content: space-between;
	left: 0;
	margin: 0;
	padding: 0 8px;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 3;
}

.techie-timeline--arrows-sides .techie-timeline__dots {
	margin-top: 18px;
}

.techie-timeline--arrows-sides .techie-timeline__arrow {
	pointer-events: auto;
}

.techie-timeline__arrow {
	align-items: center;
	appearance: none;
	background: var(--techie-card);
	border: 1px solid color-mix(in srgb, var(--techie-accent), #fff 78%);
	border-radius: 50%;
	box-shadow: var(--techie-shadow-xs);
	color: var(--techie-accent);
	cursor: pointer;
	display: inline-flex;
	height: var(--techie-arrow-size);
	justify-content: center;
	line-height: 0;
	margin: 0;
	min-height: 0;
	padding: 0;
	position: relative;
	transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .2s ease;
	width: var(--techie-arrow-size);
}

.techie-timeline__arrow:hover {
	background: var(--techie-accent);
	border-color: var(--techie-accent);
	color: #fff;
	transform: translateY(-1px);
}

.techie-timeline__arrow:focus-visible {
	outline: 2px solid var(--techie-accent);
	outline-offset: 2px;
}

.techie-timeline__arrow::before {
	border: solid currentColor;
	border-width: 0 max(2px, calc(var(--techie-arrow-size) / 22)) max(2px, calc(var(--techie-arrow-size) / 22)) 0;
	content: "";
	display: block;
	height: max(9px, calc(var(--techie-arrow-size) / 4.6));
	width: max(9px, calc(var(--techie-arrow-size) / 4.6));
}

.techie-timeline__arrow--prev::before {
	transform: translateX(2px) rotate(135deg);
}

.techie-timeline__arrow--next::before {
	transform: translateX(-2px) rotate(-45deg);
}

.techie-timeline__dots {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	margin-top: 14px;
}

.techie-timeline__dot {
	appearance: none;
	background: color-mix(in srgb, var(--techie-accent), transparent 72%);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	height: 8px;
	margin: 0;
	min-height: 0;
	padding: 0;
	transition: background-color .2s ease, width .2s ease;
	width: 22px;
}

.techie-timeline__dot.is-active {
	background: var(--techie-accent);
	width: 34px;
}

.techie-timeline--skin-dark-band .techie-timeline__dot {
	background: color-mix(in srgb, var(--techie-accent), transparent 76%);
}

.techie-timeline--slider .techie-timeline__item.is-active .techie-timeline__card {
	border-color: color-mix(in srgb, var(--techie-accent), transparent 66%);
	box-shadow: var(--techie-shadow-md);
}

.techie-timeline--text-center .techie-timeline__card,
.techie-timeline--text-center .techie-timeline__content,
.techie-timeline--text-center .techie-timeline__title {
	text-align: center;
}

.techie-timeline--text-right .techie-timeline__card,
.techie-timeline--text-right .techie-timeline__content,
.techie-timeline--text-right .techie-timeline__title {
	text-align: right;
}

@media (max-width: 1024px) {
	.techie-timeline--slider {
		--techie-per: var(--techie-per-tablet, 2);
	}
}

@media (max-width: 849px) {
	.techie-timeline--vertical::before {
		left: 20px;
	}

	.techie-timeline--vertical .techie-timeline__item,
	.techie-timeline--process,
	.techie-timeline--process.techie-timeline--cols-2,
	.techie-timeline--process.techie-timeline--cols-4,
	.techie-timeline--horizontal,
	.techie-timeline--horizontal.techie-timeline--cols-2,
	.techie-timeline--horizontal.techie-timeline--cols-4 {
		grid-template-columns: 1fr;
	}

	.techie-timeline--horizontal::before {
		display: none;
	}

	.techie-timeline--horizontal .techie-timeline__item {
		padding-top: 0;
	}

	.techie-timeline--horizontal .techie-timeline__marker {
		margin-bottom: 18px;
		position: static;
	}

	.techie-timeline--vertical .techie-timeline__item.is-no-image:nth-child(odd) .techie-timeline__card,
	.techie-timeline--vertical .techie-timeline__item.is-no-image:nth-child(even) .techie-timeline__card {
		grid-column: auto;
		text-align: left;
	}

	.techie-timeline--vertical .techie-timeline__item {
		padding-left: 48px;
	}

	.techie-timeline--vertical .techie-timeline__item:nth-child(even) .techie-timeline__media {
		order: 0;
	}

	.techie-timeline--vertical .techie-timeline__marker {
		left: 20px;
		min-width: 40px;
		padding: 6px;
	}

	.techie-timeline--process .techie-timeline__item::after {
		border-left: var(--techie-line-width) solid var(--techie-muted);
		border-top: 0;
		height: 42px;
		left: 28px;
		top: 100%;
		width: 0;
	}
}

@media (max-width: 640px) {
	.techie-timeline--slider {
		--techie-per: var(--techie-per-mobile, 1);
	}

	/* With one card per view, stretching every item to the tallest sibling
	   leaves large empty space inside shorter cards — align to top instead. */
	.techie-timeline--slider .techie-timeline__track {
		align-items: flex-start;
	}

	.techie-timeline--slider .techie-timeline__card {
		min-height: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.techie-timeline--slider .techie-timeline__track {
		transition: none;
	}
}

/* ===== Navigation styles (arrows + bullets) ===== */
.techie-timeline--navarrows-square .techie-timeline__arrow { border-radius: 10px; }
.techie-timeline--navarrows-ghost .techie-timeline__arrow { background: color-mix(in srgb, var(--techie-accent), transparent 88%); border-color: transparent; box-shadow: none; }
.techie-timeline--navarrows-ghost .techie-timeline__arrow:hover { background: var(--techie-accent); color: #fff; }
.techie-timeline--navarrows-line .techie-timeline__arrow { background: transparent; border-color: transparent; box-shadow: none; }
.techie-timeline--navarrows-line .techie-timeline__arrow:hover { color: var(--techie-accent); transform: scale(1.15); }
.techie-timeline--navarrows-pill .techie-timeline__arrow { border-radius: 999px; width: calc(var(--techie-arrow-size, 42px) * 1.7); }
.techie-timeline--navarrows-outline .techie-timeline__arrow { background: transparent; border: 2px solid color-mix(in srgb, var(--techie-accent), transparent 55%); box-shadow: none; }
.techie-timeline--navarrows-outline .techie-timeline__arrow:hover { background: var(--techie-accent); border-color: var(--techie-accent); color: #fff; }
.techie-timeline--navarrows-soft .techie-timeline__arrow { background: color-mix(in srgb, var(--techie-accent), #fff 82%); border-color: transparent; box-shadow: none; }
.techie-timeline--navarrows-soft .techie-timeline__arrow:hover { background: var(--techie-accent); color: #fff; }
.techie-timeline--navarrows-floating .techie-timeline__arrow { border-color: transparent; box-shadow: var(--techie-shadow-lg); }
.techie-timeline--navarrows-floating .techie-timeline__arrow:hover { box-shadow: var(--techie-shadow-xl); transform: scale(1.08); }

.techie-timeline--dots-dash .techie-timeline__dot, .techie-timeline--dots-dash .techie-timeline__dot.is-active { border-radius: 999px; height: 4px; width: 20px; }
.techie-timeline--dots-circle .techie-timeline__dot, .techie-timeline--dots-circle .techie-timeline__dot.is-active { border-radius: 50%; height: 10px; width: 10px; }
.techie-timeline--dots-square .techie-timeline__dot, .techie-timeline--dots-square .techie-timeline__dot.is-active { border-radius: 3px; height: 10px; width: 10px; }
.techie-timeline--dots-line .techie-timeline__dot, .techie-timeline--dots-line .techie-timeline__dot.is-active { border-radius: 0; height: 2px; width: 26px; }
.techie-timeline--dots-ring .techie-timeline__dot { background: transparent; border: 2px solid color-mix(in srgb, var(--techie-accent), transparent 40%); height: 12px; width: 12px; }
.techie-timeline--dots-ring .techie-timeline__dot.is-active { background: var(--techie-accent); border-color: var(--techie-accent); width: 12px; }
.techie-timeline--dots-number .techie-timeline__dots { counter-reset: techie-timeline-dot; }
.techie-timeline--dots-number .techie-timeline__dot { align-items: center; background: transparent; border-radius: 8px; color: color-mix(in srgb, var(--techie-accent), transparent 25%); counter-increment: techie-timeline-dot; display: inline-flex; font-size: 13px; font-weight: 700; height: auto; justify-content: center; min-width: 26px; width: auto; }
.techie-timeline--dots-number .techie-timeline__dot::before { content: counter(techie-timeline-dot, decimal-leading-zero); }
.techie-timeline--dots-number .techie-timeline__dot.is-active { background: color-mix(in srgb, var(--techie-accent), transparent 86%); color: var(--techie-accent); width: auto; }
.techie-timeline--dots-worm .techie-timeline__dots { background: color-mix(in srgb, var(--techie-accent), transparent 82%); border-radius: 999px; padding: 5px 8px; }
.techie-timeline--dots-worm .techie-timeline__dot { background: transparent; height: 8px; width: 8px; }
.techie-timeline--dots-worm .techie-timeline__dot.is-active { background: var(--techie-accent); width: 26px; }