/* Workflow Timeline — stage strip + alternating numbered timeline.
   Every colour and size is a CSS variable so the Elementor controls own them. */

.ifd-wf {
	font-family: var(--ifd-font, "Work Sans", sans-serif);
	--ifd-wf-c1: #0f4d78;
	--ifd-wf-c2: #1c77b7;
	max-width: 100%;
}

/* ---------- Eyebrow row ---------- */

.ifd-wf__eyebrow {
	display: flex;
	align-items: baseline;
	gap: var(--ifd-wf-eyebrow-gap, 24px);
	margin-bottom: var(--ifd-wf-eyebrow-mb, 26px);
}

.ifd-wf__kicker {
	font-family: inherit;
	font-size: var(--ifd-wf-kicker-size, 12px);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ifd-wf-kicker, var(--ifd-wf-c2));
	white-space: nowrap;
}

.ifd-wf__rule {
	flex: 1 1 0%;
	min-width: 20px;
	border-bottom: 1px solid var(--ifd-wf-rule, #e2e5e8);
}

.ifd-wf__eyebrow-right {
	font-family: inherit;
	font-size: var(--ifd-wf-kicker-size, 12px);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ifd-wf-eyebrow-right, #9aa0a4);
	white-space: nowrap;
}

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

.ifd-wf__head {
	display: grid;
	grid-template-columns: var(--ifd-wf-head-cols, 1.3fr 1fr);
	gap: var(--ifd-wf-head-gap, 56px);
	align-items: end;
	margin-bottom: var(--ifd-wf-head-mb, 56px);
}

.ifd-wf__title {
	margin: 0;
	font-family: inherit;
	font-weight: 300;
	font-size: clamp(32px, 4.6vw, 56px);
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--ifd-wf-title, #191c1e);
}

.ifd-wf__title em {
	font-family: var(--ifd-serif, "Source Serif 4", Georgia, serif);
	font-style: italic;
	font-weight: 600;
	color: var(--ifd-wf-title-em, var(--ifd-wf-c2));
}

.ifd-wf__title .ifd-wf__stop {
	font-style: normal;
	font-family: inherit;
	font-weight: 600;
	color: var(--ifd-wf-title-em, var(--ifd-wf-c2));
}

.ifd-wf__intro {
	margin: 0;
	font-family: inherit;
	font-size: var(--ifd-wf-intro-size, 16px);
	line-height: 1.6;
	color: var(--ifd-wf-intro, #525860);
	text-wrap: pretty;
}

/* ---------- Stage strip ---------- */

.ifd-wf__strip {
	display: flex;
	align-items: center;
	justify-content: var(--ifd-wf-strip-align, center);
	flex-wrap: wrap;
	gap: var(--ifd-wf-strip-gap, 10px);
	margin-bottom: var(--ifd-wf-strip-mb, 64px);
}

.ifd-wf__stage {
	width: var(--ifd-wf-stage-w, 124px);
	border-radius: var(--ifd-wf-stage-radius, 14px);
	background: var(--ifd-wf-stage-bg, var(--ifd-wf-c1));
	color: var(--ifd-wf-stage-color, #ffffff);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ifd-wf-stage-icon-gap, 9px);
	padding: var(--ifd-wf-stage-pad, 18px 0 15px);
	box-shadow: 0 12px 26px -16px var(--ifd-wf-stage-shadow, rgba(15, 77, 120, .6));
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease;
}

.ifd-wf__stage--alt {
	background: var(--ifd-wf-stage-bg-alt, var(--ifd-wf-c2));
	box-shadow: 0 12px 26px -16px var(--ifd-wf-stage-shadow-alt, rgba(28, 119, 183, .6));
}

a.ifd-wf__stage:hover,
a.ifd-wf__stage:focus-visible {
	transform: translateY(-2px);
}

.ifd-wf__stage-icon {
	display: inline-flex;
	width: var(--ifd-wf-stage-icon, 26px);
	height: var(--ifd-wf-stage-icon, 26px);
	font-size: var(--ifd-wf-stage-icon, 26px);
	line-height: 1;
}

.ifd-wf__stage-icon svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: var(--ifd-wf-stage-icon-stroke, 1.8);
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ifd-wf__stage-label {
	font-family: inherit;
	font-size: var(--ifd-wf-stage-label, 12px);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-align: center;
	line-height: 1.2;
}

.ifd-wf__chevron {
	flex: 0 0 auto;
	display: inline-flex;
	width: var(--ifd-wf-chevron, 16px);
	height: var(--ifd-wf-chevron, 16px);
	color: var(--ifd-wf-chevron-color, #9aa0a4);
}

.ifd-wf__chevron svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------- Timeline ---------- */

.ifd-wf__rows {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--ifd-wf-row-gap, 4px);
}

.ifd-wf__rail {
	position: absolute;
	left: 50%;
	top: var(--ifd-wf-rail-top, 34px);
	bottom: var(--ifd-wf-rail-bottom, 20px);
	width: var(--ifd-wf-rail-w, 2px);
	transform: translateX(-50%);
	background: linear-gradient(var(--ifd-wf-c1) 0%, var(--ifd-wf-c2) 100%);
	opacity: var(--ifd-wf-rail-opacity, .55);
	pointer-events: none;
}

.ifd-wf__rail-arrow {
	position: absolute;
	left: 50%;
	bottom: 6px;
	transform: translateX(-50%);
	width: var(--ifd-wf-rail-arrow, 18px);
	height: var(--ifd-wf-rail-arrow, 18px);
	color: var(--ifd-wf-c2);
	pointer-events: none;
}

.ifd-wf__rail-arrow svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ifd-wf__row {
	display: grid;
	grid-template-columns: 1fr var(--ifd-wf-pill-w, 228px) 1fr;
	align-items: center;
	border-radius: var(--ifd-wf-row-radius, 12px);
	transition: background .18s ease;
}

.ifd-wf__row--odd:hover {
	background: var(--ifd-wf-row-hover, rgba(15, 77, 120, .04));
}

.ifd-wf__row--even:hover {
	background: var(--ifd-wf-row-hover-alt, rgba(28, 119, 183, .04));
}

.ifd-wf__side {
	display: flex;
	align-items: center;
	min-width: 0;
}

/* Both cells are placed explicitly. Without grid-row the pill would auto-flow
   into a second row whenever the side sits in column 3. */
.ifd-wf__row--odd .ifd-wf__side {
	grid-column: 1;
	grid-row: 1;
}

.ifd-wf__row--even .ifd-wf__side {
	grid-column: 3;
	grid-row: 1;
	flex-direction: row-reverse;
}

.ifd-wf__pill {
	grid-column: 2;
	grid-row: 1;
	align-self: center;
	position: relative;
	z-index: 1;
	background: var(--ifd-wf-pill-bg, var(--ifd-wf-c1));
	color: var(--ifd-wf-pill-color, #ffffff);
	border-radius: var(--ifd-wf-pill-radius, 14px);
	padding: var(--ifd-wf-pill-pad, 21px 14px);
	text-align: center;
	font-family: inherit;
	font-size: var(--ifd-wf-pill-size, 12.5px);
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.3;
	text-transform: uppercase;
	box-shadow: 0 10px 24px -14px var(--ifd-wf-pill-shadow, rgba(15, 77, 120, .55));
}

.ifd-wf__row--even .ifd-wf__pill {
	background: var(--ifd-wf-pill-bg-alt, var(--ifd-wf-c2));
	box-shadow: 0 10px 24px -14px var(--ifd-wf-pill-shadow-alt, rgba(28, 119, 183, .55));
}

.ifd-wf__content {
	flex: 1 1 0%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ifd-wf-content-gap, 7px);
	padding: var(--ifd-wf-content-pad, 20px 0 20px 12px);
	align-items: flex-end;
}

.ifd-wf__row--even .ifd-wf__content {
	align-items: flex-start;
	padding: var(--ifd-wf-content-pad-alt, 20px 12px 20px 0);
}

.ifd-wf__step-head {
	display: flex;
	align-items: center;
	gap: var(--ifd-wf-step-gap, 11px);
}

.ifd-wf__step-icon {
	flex: 0 0 auto;
	width: var(--ifd-wf-step-icon-box, 36px);
	height: var(--ifd-wf-step-icon-box, 36px);
	border-radius: var(--ifd-wf-step-icon-radius, 10px);
	background: var(--ifd-wf-step-icon-bg, rgba(15, 77, 120, .08));
	color: var(--ifd-wf-step-icon-color, var(--ifd-wf-c1));
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--ifd-wf-step-icon, 18px);
}

.ifd-wf__row--even .ifd-wf__step-icon {
	background: var(--ifd-wf-step-icon-bg-alt, rgba(28, 119, 183, .09));
	color: var(--ifd-wf-step-icon-color-alt, var(--ifd-wf-c2));
}

.ifd-wf__step-icon svg {
	width: var(--ifd-wf-step-icon, 18px);
	height: var(--ifd-wf-step-icon, 18px);
	fill: none;
	stroke: currentColor;
	stroke-width: var(--ifd-wf-step-icon-stroke, 1.8);
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ifd-wf__step-title {
	font-family: inherit;
	font-size: var(--ifd-wf-step-title, 21px);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.25;
	color: var(--ifd-wf-step-title-color, var(--ifd-wf-c2));
}

.ifd-wf__step-text {
	margin: 0;
	font-family: inherit;
	font-size: var(--ifd-wf-step-text, 14.5px);
	line-height: 1.55;
	color: var(--ifd-wf-step-text-color, #525860);
	text-align: right;
	max-width: var(--ifd-wf-text-max, 360px);
	text-wrap: pretty;
}

.ifd-wf__row--even .ifd-wf__step-text {
	text-align: left;
	max-width: var(--ifd-wf-text-max-alt, 380px);
}

.ifd-wf__num {
	flex: 0 0 auto;
	position: relative;
	z-index: 1;
	width: var(--ifd-wf-num, 52px);
	height: var(--ifd-wf-num, 52px);
	border-radius: 50%;
	border: var(--ifd-wf-num-bw, 2.5px) solid var(--ifd-wf-num-bc, var(--ifd-wf-c1));
	color: var(--ifd-wf-num-color, var(--ifd-wf-c1));
	background: var(--ifd-wf-num-bg, #ffffff);
	font-family: inherit;
	font-size: var(--ifd-wf-num-size, 21px);
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: var(--ifd-wf-num-gap, 22px);
}

.ifd-wf__row--even .ifd-wf__num {
	border-color: var(--ifd-wf-num-bc-alt, var(--ifd-wf-c2));
	color: var(--ifd-wf-num-color-alt, var(--ifd-wf-c2));
	margin-left: 0;
	margin-right: var(--ifd-wf-num-gap, 22px);
}

.ifd-wf__connector {
	flex: 0 0 auto;
	width: var(--ifd-wf-connector, 56px);
	height: var(--ifd-wf-connector-h, 2px);
	background: var(--ifd-wf-connector-color, var(--ifd-wf-c1));
}

.ifd-wf__row--even .ifd-wf__connector {
	background: var(--ifd-wf-connector-color-alt, var(--ifd-wf-c2));
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
	.ifd-wf__head {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		align-items: start;
	}

	.ifd-wf__row {
		grid-template-columns: 1fr var(--ifd-wf-pill-w-md, 190px) 1fr;
	}

	.ifd-wf__connector {
		width: var(--ifd-wf-connector-md, 28px);
	}

	.ifd-wf__num {
		margin-left: 14px;
	}

	.ifd-wf__row--even .ifd-wf__num {
		margin-right: 14px;
	}
}

/* ---------- Stacked ----------
   Below this width the alternating layout can't hold: the rail moves to the left
   edge, every row reads top-to-bottom, and the connectors are dropped. */

@media (max-width: 767px) {
	.ifd-wf__eyebrow {
		flex-wrap: wrap;
		gap: 10px;
	}

	.ifd-wf__rule {
		display: none;
	}

	.ifd-wf__rows {
		gap: var(--ifd-wf-row-gap-sm, 10px);
	}

	.ifd-wf__rail,
	.ifd-wf__rail-arrow {
		left: calc(var(--ifd-wf-num-sm, 40px) / 2);
	}

	.ifd-wf__row,
	.ifd-wf__row--odd,
	.ifd-wf__row--even {
		grid-template-columns: minmax(0, 1fr);
		padding: 6px 0;
	}

	.ifd-wf__row--odd .ifd-wf__side,
	.ifd-wf__row--even .ifd-wf__side {
		grid-column: 1;
		grid-row: 1;
		flex-direction: row;
		align-items: flex-start;
	}

	.ifd-wf__row .ifd-wf__pill {
		grid-column: 1;
		grid-row: 2;
		justify-self: start;
		margin-left: calc(var(--ifd-wf-num-sm, 40px) + 14px);
		padding: 12px 16px;
		font-size: 11.5px;
	}

	.ifd-wf__row .ifd-wf__num,
	.ifd-wf__row--even .ifd-wf__num {
		order: -1;
		width: var(--ifd-wf-num-sm, 40px);
		height: var(--ifd-wf-num-sm, 40px);
		font-size: 16px;
		margin: 0 14px 0 0;
	}

	.ifd-wf__row .ifd-wf__content,
	.ifd-wf__row--even .ifd-wf__content {
		align-items: flex-start;
		padding: 0 0 10px;
	}

	.ifd-wf__row .ifd-wf__step-text,
	.ifd-wf__row--even .ifd-wf__step-text {
		text-align: left;
		max-width: none;
	}

	.ifd-wf__row .ifd-wf__connector {
		display: none;
	}

	.ifd-wf__step-title {
		font-size: clamp(17px, 4.6vw, 21px);
	}
}

@media (max-width: 480px) {
	.ifd-wf__stage {
		width: var(--ifd-wf-stage-w-sm, 96px);
	}

	.ifd-wf__strip {
		gap: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ifd-wf__row,
	.ifd-wf__stage {
		transition: none;
	}
}