/* sections/service-steps.php */
.st-section {
	box-sizing: border-box; width: 100%;
	padding: var(--space-section) var(--space-gutter);
	--st-blue: color-mix(in srgb, var(--c-primary) 8%, var(--c-primary-dark));
	--st-line: color-mix(in srgb, var(--c-primary) 35%, transparent);
	--st-gap: var(--space-5);
	/* Same background as the service-method section of the page: pale, with a soft blue light in the top right corner. */
	background-color: var(--c-bg-alt);
	background-image: radial-gradient(50rem 30rem at 100% 0%, color-mix(in srgb, var(--c-primary) 9%, transparent), transparent 70%);
	color: var(--c-heading);
	font-family: var(--f-body); font-size: var(--fs-base); line-height: 1.6;
}
.st-section *, .st-section *::before, .st-section *::after { box-sizing: border-box; }
.st-icon { flex: none; width: 1.375rem; height: 1.375rem; }
.st-inner { display: grid; gap: var(--space-6); max-width: var(--container); margin: 0 auto; }
.st-inner > * { min-width: 0; }

.st-label {
	display: inline-flex; align-items: center; gap: var(--space-2);
	margin: 0 0 var(--space-3); padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill); background: var(--c-primary-soft); color: var(--c-primary);
	font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.st-label::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c-accent); }
.st-section .st-title {
	margin: 0; color: var(--c-heading);
	font-family: var(--f-heading); font-size: var(--fs-2xl); font-weight: 800;
	line-height: 1.18; letter-spacing: -0.02em; text-wrap: balance;
}
.st-title-accent { display: block; color: var(--c-primary); }

/* Steps. Phone: one column, the line runs down the left from node to node. */
.st-steps { display: grid; gap: var(--st-gap); margin: 0; padding: 0; list-style: none; }
.st-step { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-4); }
.st-step::before { content: ""; position: absolute; top: 3rem; bottom: calc(-1 * var(--st-gap)); left: calc(1.5rem - 1px); width: 2px; background: var(--st-line); }
.st-step:last-child::before { display: none; }
.st-node {
	position: relative; z-index: 1; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
	background: var(--c-primary); color: var(--c-on-primary); box-shadow: var(--shadow-md);
	font: 800 var(--fs-lg)/1 var(--f-heading); transition: background-color 0.25s, transform 0.25s;
}
.st-card {
	position: relative; overflow: hidden; padding: var(--space-5); border-radius: var(--radius-lg);
	background: var(--c-surface); box-shadow: var(--shadow-md); transition: transform 0.25s, box-shadow 0.25s;
}
/* The step's number again, large and very faint, in the top corner of its card (clear of the text) */
.st-card::after {
	content: attr(data-n); position: absolute; top: var(--space-3); right: var(--space-5);
	color: var(--c-primary); opacity: 0.08; font: 800 4.5rem/1 var(--f-heading); pointer-events: none;
}
.st-step:hover .st-card { transform: translateY(-0.25rem); box-shadow: var(--shadow-lg); }
.st-step:hover .st-node { background: var(--c-accent); transform: scale(1.08); }
.st-card-icon {
	display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: var(--space-4);
	border-radius: var(--radius); background: var(--c-primary-soft); color: var(--c-primary);
}
.st-section .st-step-title { position: relative; margin: 0; color: var(--c-heading); font: 700 var(--fs-lg)/1.3 var(--f-heading); }
.st-step-text { position: relative; margin: var(--space-2) 0 0; color: var(--c-text-muted); font-size: var(--fs-sm); }

/* Result: flat reference navy bar, red tick badge, the sentence and the call to action */
.st-result {
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); padding: var(--space-5);
	border-radius: var(--radius-lg) 3rem var(--radius-lg) 3rem; background: var(--st-blue); color: var(--c-on-dark); box-shadow: var(--shadow-lg);
}
.st-result-badge { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 50%; background: var(--c-accent); color: var(--c-on-accent); }
.st-result-badge .st-icon { stroke-width: 2.6; }
.st-result-text { flex: 1 1 16rem; margin: 0; color: color-mix(in srgb, var(--c-on-dark) 86%, transparent); font-size: var(--fs-lg); }
.st-result-text strong { color: var(--c-on-dark); font-weight: 800; }
.st-section .st-btn {
	display: inline-flex; align-items: center; gap: var(--space-4); flex: none; padding: var(--space-1) var(--space-1) var(--space-1) var(--space-5);
	border-radius: var(--radius-pill); background: var(--c-surface); color: var(--c-primary);
	font: 700 var(--fs-base)/1.2 var(--f-body); text-decoration: none; transition: transform 0.25s;
}
.st-section .st-btn:hover, .st-section .st-btn:focus { background: var(--c-surface); color: var(--c-primary); transform: translateY(-2px); }
.st-badge { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--c-accent); color: var(--c-on-accent); }
.st-badge .st-icon { width: 1.25rem; height: 1.25rem; transform: rotate(-45deg); transition: transform 0.25s; }
.st-btn:hover .st-badge .st-icon { transform: rotate(0deg); }
.st-section .st-btn:focus-visible { outline: 2px solid var(--c-on-dark); outline-offset: 3px; }

@media (min-width: 768px) {
	/* The line runs across; each step is a node with its card under it. Two per row with four steps. */
	.st-steps { grid-template-columns: repeat(var(--st-cols, 3), minmax(0, 1fr)); }
	.st-steps[style*="--st-cols: 4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.st-step { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
	.st-step::before { top: calc(1.5rem - 1px); bottom: auto; left: 3rem; width: calc(100% - 3rem + var(--st-gap)); height: 2px; }
	.st-steps[style*="--st-cols: 4"] .st-step:nth-child(2n)::before { display: none; } /* no line into the margin at the end of a row of two */
	.st-result { padding: var(--space-5) var(--space-6); }
}
@media (min-width: 1024px) {
	.st-steps[style*="--st-cols: 4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.st-steps[style*="--st-cols: 4"] .st-step:nth-child(2n):not(:last-child)::before { display: block; }
}
@media (prefers-reduced-motion: reduce) {
	.st-section * { transition: none !important; }
}