/* =========================================================================
   /diensten/ — Diensten (design/Diensten.dc.html)
   All rules scoped under .vvpage-diensten.
   ========================================================================= */

/* The page wrapper is a constrained group (BUILD_SPEC 2.1); the design's own
   1200px containers live one level deeper. The unclamp is global — style.css
   §3.6 (`body.vv .vvpage > *`). */

/* -------------------------------------------------------------------------
   1. Page intro
   ------------------------------------------------------------------------- */
.vvpage-diensten .vv-svc-intro__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 88px var(--gutter) 72px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.vvpage-diensten .vv-svc-intro .vv-label {
	margin: 0;
}

.vvpage-diensten .vv-svc-intro__title {
	margin: 0;
	font-family: var(--font-d);
	font-weight: 600;
	font-size: 48px;
	line-height: 1.15;
	max-width: 640px;
	text-wrap: balance;
}

.vvpage-diensten .vv-svc-intro__title em {
	font-style: italic;
	font-weight: 600;
	color: var(--sage);
}

.vvpage-diensten .vv-svc-intro__lead {
	margin: 0;
	font-size: 16px;
	line-height: 1.65;
	color: var(--ink-2);
	max-width: 560px;
}

/* -------------------------------------------------------------------------
   2. Three alternating service rows
   ------------------------------------------------------------------------- */
/* vv/service-row — promoted to style.css §9 (0.5-N.3). */

/* 3. Shared CTA band — full-bleed globally (style.css §3.6). */

/* -------------------------------------------------------------------------
   4. Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.vvpage-diensten .vv-svc-intro__inner {
		padding: 56px var(--gutter) 40px;
		gap: 14px;
	}

	.vvpage-diensten .vv-svc-intro__title {
		font-size: clamp(2rem, 8vw, 2.4rem);
		max-width: none;
	}

	.vvpage-diensten .vv-svc-intro__lead {
		max-width: none;
	}

}

@media (max-width: 600px) {
	.vvpage-diensten .vv-svc-intro__inner {
		padding: 44px var(--gutter) 32px;
	}
}