/**
 * Process Steps — navy "How It Works" band. Narrow centered column.
 * Typography via utilities; layout/spacing/decoration/rgba here.
 */

.flexible-section.process-steps {
	position: relative;
	overflow: hidden;
	padding-block: var(--section-pad-y);
	padding-inline: var(--section-pad-x);
	background: var(--gradient-navy);
}

.flexible-section.process-steps::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(ellipse at 50% 0%, rgba(196, 154, 26, 0.07), transparent 60%);
}

.process-steps-in {
	position: relative;
	z-index: 2;
	max-width: var(--container-narrow);
	margin-inline: auto;
}

.process-steps-title {
	max-width: 700px;
	margin: clamp(4px, 0.24vw + 3px, 7.5px) 0 clamp(26px, 1.32vw + 21.2px, 42.5px);
	line-height: 1.15;
}

.process-steps-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(24px, 1.09vw + 20.1px, 37.5px);
}

.process-step {
	padding-block-start: clamp(13px, 0.32vw + 11.9px, 20px);
	border-top: 2px solid rgba(196, 154, 26, 0.45);
}

.process-step .h-n {
	margin-block-end: clamp(7px, 0.24vw + 6px, 10px);
}

.process-step h3 {
	margin-block-end: clamp(7px, 0.16vw + 6.4px, 8.75px);
}

.process-step p {
	color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 768px) {
	.process-steps-grid { grid-template-columns: 1fr; }
}