/* Approach — Figma: Approach Section (46:1738) */
.approach {
	position: relative;
	padding-block: clamp(72px, 6.875vw, 99px);
	background: var(--color-dark) var(--approach-bg) 70% center / cover no-repeat;
	color: var(--color-light);
}

/* Mobile: solid tint so text stays readable over the photo */
.approach::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(2 77 107 / 0.82);
	pointer-events: none;
}

.approach__inner {
	position: relative;
}

.approach__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 38px;
	max-width: 486px;
}

.approach__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 27px;
}

/* Label Icon is flipped vertically in Figma */
.approach__label-icon {
	transform: scaleY(-1);
}

.approach__body {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.approach__lead {
	color: var(--color-neutral-3);
}

.approach__pillars {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}

.approach__pillar {
	display: flex;
	align-items: center;
	gap: 9px;
	color: var(--color-neutral-3);
	white-space: nowrap;
}

@media (min-width: 1024px) {
	.approach {
		min-height: 640px;
		display: flex;
		align-items: center;
		background-position: center;
	}

	/* Figma gradient: -71.13deg, transparent 38.31% → Basic/Dark 116.11% */
	.approach::before {
		background: linear-gradient(-71.13deg, rgb(2 77 107 / 0) 38.31%, var(--color-dark) 116.11%);
	}
}