/* ══════════════════════════════════════════════════════════════
	   §IMAGERY · Blueprint photography
	   Images support section narrative without overpowering type.
	   Five strategic placements, each with purpose and restraint.
	   ══════════════════════════════════════════════════════════════ */

	/* ── Philosophy — collaborative image above the split layout ── */
	.sf-phil-visual {
		margin: 0 0 56px;
		border-radius: 16px;
		overflow: hidden;
		height: clamp(180px, 20vw, 300px);
		position: relative;
		background-color: #dededf;
	}
	.sf-phil-visual img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center 34%;
		display: block;
		filter: saturate(0.82) brightness(0.95);
	}
	.sf-phil-visual::after {
		content: '';
		position: absolute;
		bottom: 0; left: 0; right: 0;
		height: 38%;
		background: linear-gradient(180deg, transparent 0%, rgba(245,245,247,0.66) 100%);
		pointer-events: none;
	}

	/* ── People — human-centred work image above the split layout ── */
	.sf-people-visual {
		margin: 0 0 56px;
		border-radius: 16px;
		overflow: hidden;
		height: clamp(180px, 20vw, 280px);
		position: relative;
		background-color: #e0e0e5;
	}
	.sf-people-visual img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center 30%;
		display: block;
		filter: saturate(0.80) brightness(0.94);
	}
	.sf-people-visual::after {
		content: '';
		position: absolute;
		bottom: 0; left: 0; right: 0;
		height: 38%;
		background: linear-gradient(180deg, transparent 0%, rgba(245,245,247,0.60) 100%);
		pointer-events: none;
	}

	/* ── Responsive ── */
	@media (max-width: 900px) {
		.sf-phil-visual   { height: clamp(160px, 26vw, 240px); margin-bottom: 44px; }
		.sf-people-visual { height: clamp(160px, 26vw, 240px); margin-bottom: 44px; }
	}

	@media (max-width: 640px) {
		.sf-phil-visual   { height: 180px; border-radius: 12px; margin-bottom: 36px; }
		.sf-people-visual { height: 180px; border-radius: 12px; margin-bottom: 36px; }
	}