/* =========================================================
   Olivx approach — one layout for all sizes (markup: index.php .approach-ox)
   Desktop: intro beside card 01, then 02–04 zig-zag left/right with an even gap.
   The illustration sits behind the lower half; cards are solid so text stays readable.
   ========================================================= */

.approach-ox {
	position: relative;
	background: url('../../img/bg/bg-service3.png') no-repeat center bottom / 100% 62%;
	overflow: hidden;
}

.approach-ox__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin-top: 32px;
}

.approach-ox__intro {
	margin-bottom: 8px;
}

.approach-ox__card {
	position: relative;
	height: 100%;
	padding: 32px;
	background: #fff;
	box-shadow: 0 18px 45px rgb(0 0 0 / .12);
}

.approach-ox__num {
	margin-bottom: 6px;
}

.approach-ox__title {
	font-size: 1.25rem;
	letter-spacing: .02em;
}

.approach-ox__tag {
	margin: 0 0 14px;
	font-size: 1.2rem;
}

.approach-ox__card .cardBody p {
	margin-bottom: 18px;
}

/* Desktop: 12-column zig-zag with one consistent 32px gap */
@media (min-width: 992px) {
	.approach-ox__grid {
		grid-template-columns: repeat(12, 1fr);
		gap: 32px;
		align-items: start;
	}

	.approach-ox__intro {
		grid-column: 1 / span 4;
		grid-row: 1;
		align-self: center;
		margin: 0;
	}

	.approach-ox__step--1 { grid-column: 5 / span 8; grid-row: 1; align-self: end; }   /* keeps the 01→02 gap equal to the others */
	.approach-ox__step--2 { grid-column: 1 / span 7; grid-row: 2; }
	.approach-ox__step--3 { grid-column: 6 / span 7; grid-row: 3; }
	.approach-ox__step--4 { grid-column: 1 / span 7; grid-row: 4; }
}

/* Phones: stacked cards, comfortable type (legacy CSS shrinks p to 12px) */
@media (max-width: 991.98px) {
	.approach-ox {
		background-size: 180% auto;
	}

	.approach-ox__intro {
		text-align: center;
	}

	.approach-ox__card {
		padding: 24px;
	}

	.approach-ox__card .cardBody p {
		font-size: 15px !important;
		line-height: 1.6;
	}
}