/**
 * TO Phased Process Flow — scoped under .toaew-pflow / --toaew-pflow-*.
 *
 * process-flow.js adds:
 *   .is-measured    rails are only drawn once row ends are known
 *   .is-row-end     on the last step of each visual row (no rail after it)
 *   .toaew-pflow--stacked  when the grid is a single column (vertical line)
 *   .is-in          when the section enters the viewport (draw animation)
 */

.toaew-pflow {
	--toaew-pflow-cols: 4;
	--toaew-pflow-gap: 30px;
	--toaew-pflow-phase-gap: 54px;
	--toaew-pflow-node: 46px;
	--toaew-pflow-node-bg: #152637;
	--toaew-pflow-node-color: #9AB8D6;
	--toaew-pflow-rail: #2A4C6F;
	--toaew-pflow-rail-w: 1.5px;
	--toaew-pflow-divider: #DAD9D4;
	--toaew-pflow-icon: #2A4C6F;
	--toaew-pflow-icon-size: 30px;
	--toaew-pflow-stroke: 1.3;
	--toaew-pflow-stagger: 160ms;

	color: #141414;
}

.toaew-pflow *,
.toaew-pflow *::before,
.toaew-pflow *::after {
	box-sizing: border-box;
}

.toaew-pflow__kicker {
	margin: 0 0 22px;
	color: #2A4C6F;
	letter-spacing: 0.12em;
}

.toaew-pflow__title {
	margin: 0 0 64px;
	color: #141414;
	line-height: 0.95;
}

span.toaew-pflow__title {
	display: block;
}

.toaew-pflow__hl {
	color: #2A4C6F;
}

.toaew-pflow__phase {
	margin: 0 0 var(--toaew-pflow-phase-gap);
}

.toaew-pflow__phase-label {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 26px;
	color: #2A4C6F;
}

.toaew-pflow__phase-label::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--toaew-pflow-divider);
}

.toaew-pflow__grid {
	display: grid;
	grid-template-columns: repeat(var(--toaew-pflow-cols), minmax(0, 1fr));
	gap: var(--toaew-pflow-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.toaew-pflow__step {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
}

.toaew-pflow__node {
	position: relative;
	z-index: 2;
	display: grid;
	flex: none;
	place-items: center;
	width: var(--toaew-pflow-node);
	height: var(--toaew-pflow-node);
	border-radius: 50%;
	background: var(--toaew-pflow-node-bg);
	color: var(--toaew-pflow-node-color);
	line-height: 1;
}

/* Horizontal rail from this node towards the next one in the row. */
.toaew-pflow__step::before {
	content: "";
	position: absolute;
	top: calc(var(--toaew-pflow-node) / 2);
	left: calc(var(--toaew-pflow-node) + 10px);
	right: calc(-1 * var(--toaew-pflow-gap) + 12px);
	display: none;
	height: var(--toaew-pflow-rail-w);
	background: var(--toaew-pflow-rail);
	transform-origin: left center;
}

.toaew-pflow__step::after {
	content: "";
	position: absolute;
	top: calc(var(--toaew-pflow-node) / 2 - 4px);
	right: calc(-1 * var(--toaew-pflow-gap) + 13px);
	display: none;
	width: 8px;
	height: 8px;
	border-top: var(--toaew-pflow-rail-w) solid var(--toaew-pflow-rail);
	border-right: var(--toaew-pflow-rail-w) solid var(--toaew-pflow-rail);
	transform: rotate(45deg);
}

.toaew-pflow.is-measured .toaew-pflow__step:not(.is-row-end):not(:last-child)::before {
	display: block;
}

.toaew-pflow--arrows.is-measured .toaew-pflow__step:not(.is-row-end):not(:last-child)::after {
	display: block;
}

.toaew-pflow__card {
	display: flex;
	flex: 1;
	flex-direction: column;
	margin-top: 20px;
	padding: 28px 26px 30px;
	border-top: 2px solid #2A4C6F;
	background: #E6E5E1;
}

.toaew-pflow__line-icon {
	flex: none;
	width: var(--toaew-pflow-icon-size);
	height: var(--toaew-pflow-icon-size);
	margin-bottom: 18px;
	fill: none;
	stroke: var(--toaew-pflow-icon);
	stroke-width: var(--toaew-pflow-stroke);
	stroke-linecap: round;
	stroke-linejoin: round;
}

.toaew-pflow__icon {
	display: inline-flex;
	margin-bottom: 18px;
	color: var(--toaew-pflow-icon);
	font-size: var(--toaew-pflow-icon-size);
	line-height: 1;
}

.toaew-pflow__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.toaew-pflow__card-title {
	margin: 0 0 12px;
	color: #141414;
	line-height: 1;
}

span.toaew-pflow__card-title {
	display: block;
}

.toaew-pflow__card-text {
	margin: 0;
	color: #4B4B4B;
	line-height: 1.65;
}

.toaew-pflow__note {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 6px;
	padding: 22px 26px;
	border: 1px solid #DAD9D4;
	color: #4B4B4B;
	line-height: 1.5;
}

.toaew-pflow__note .toaew-pflow__line-icon {
	width: 34px;
	height: 34px;
	margin: 0;
}

.toaew-pflow__note strong,
.toaew-pflow__note b {
	color: #141414;
	font-weight: 600;
}

/* ---- Vertical timeline (single column) -------------------------------- */
.toaew-pflow--stacked .toaew-pflow__step {
	flex-direction: row;
	align-items: flex-start;
	gap: 16px;
}

.toaew-pflow--stacked .toaew-pflow__card {
	margin-top: 0;
}

.toaew-pflow--stacked .toaew-pflow__step::before {
	top: calc(var(--toaew-pflow-node) + 8px);
	right: auto;
	bottom: calc(-1 * var(--toaew-pflow-gap) + 10px);
	left: calc(var(--toaew-pflow-node) / 2 - var(--toaew-pflow-rail-w) / 2);
	width: var(--toaew-pflow-rail-w);
	height: auto;
	transform-origin: top center;
}

.toaew-pflow--stacked .toaew-pflow__step::after {
	top: auto;
	right: auto;
	bottom: calc(-1 * var(--toaew-pflow-gap) + 12px);
	left: calc(var(--toaew-pflow-node) / 2 - 4px);
	transform: rotate(135deg);
}

/* In the vertical layout every step but the very last connects downwards. */
.toaew-pflow--stacked.is-measured .toaew-pflow__step.is-row-end:not(:last-child)::before {
	display: block;
}

.toaew-pflow--stacked.toaew-pflow--arrows.is-measured .toaew-pflow__step.is-row-end:not(:last-child)::after {
	display: block;
}

/* Bridge: the last step of a phase runs its line into the next phase. */
.toaew-pflow--stacked.toaew-pflow--bridge.is-measured .toaew-pflow__step.is-bridge::before {
	display: block;
	bottom: calc(-1 * var(--toaew-pflow-bridge, 70px));
}

.toaew-pflow--stacked.toaew-pflow--bridge .toaew-pflow__phase + .toaew-pflow__phase .toaew-pflow__phase-label {
	padding-left: calc(var(--toaew-pflow-node) + 16px);
}

/* ---- Draw-in animation (only once JS has measured) -------------------- */
.toaew-pflow--animate.is-measured .toaew-pflow__step::before {
	transform: scaleX(0);
	transition: transform 0.55s ease calc(var(--i) * var(--toaew-pflow-stagger));
}

.toaew-pflow--animate.is-measured .toaew-pflow__step::after {
	opacity: 0;
	transition: opacity 0.2s ease calc(var(--i) * var(--toaew-pflow-stagger) + 0.45s);
}

.toaew-pflow--animate.is-measured .toaew-pflow__node {
	opacity: 0.25;
	transition: opacity 0.4s ease calc(var(--i) * var(--toaew-pflow-stagger));
}

.toaew-pflow--animate.toaew-pflow--stacked.is-measured .toaew-pflow__step::before {
	transform: scaleY(0);
}

.toaew-pflow--animate.is-measured.is-in .toaew-pflow__step::before {
	transform: none;
}

.toaew-pflow--animate.is-measured.is-in .toaew-pflow__step::after,
.toaew-pflow--animate.is-measured.is-in .toaew-pflow__node {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.toaew-pflow--animate.is-measured .toaew-pflow__step::before,
	.toaew-pflow--animate.is-measured .toaew-pflow__step::after,
	.toaew-pflow--animate.is-measured .toaew-pflow__node {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.toaew-pflow--animate.is-measured .toaew-pflow__step::after {
		transform: rotate(45deg);
	}

	.toaew-pflow--stacked.toaew-pflow--animate.is-measured .toaew-pflow__step::after {
		transform: rotate(135deg);
	}
}