/* =========================================================================
   /over-ons/  — Over ons  (design/OverOns.dc.html)
   Every rule is scoped `.vvpage-over-ons`.
   Sections: hero + portrait/badge · Drie beloftes · stats-rij (4) · CTA-band.
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. Section shells — the page wrapper is a constrained group, but each
      section paints its own full-bleed background and owns its inner width.
      The unclamp of the direct children is global — style.css §3.6.
   ------------------------------------------------------------------------- */
.vvpage-over-ons .vv-about-hero__inner,
.vvpage-over-ons .vv-about-promises__inner {
	max-width: var(--wrap-narrow);
	margin-inline: auto;
}

/* Core's flow layout injects `> * + * { margin-block-start }` — kill it inside
   the grid/flex wrappers so items are not nudged down. */
.vvpage-over-ons .vv-about-hero__inner > *,
.vvpage-over-ons .vv-about-hero__visual > *,
.vvpage-over-ons .vv-about-promises__head > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* -------------------------------------------------------------------------
   1. HERO — 1.15fr / 1fr split, portrait right with the sage badge
   ------------------------------------------------------------------------- */
.vvpage-over-ons .vv-about-hero__inner {
	padding: 88px var(--gutter) 96px;
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 64px;
	align-items: center;
}

.vvpage-over-ons .vv-about-hero__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.vvpage-over-ons .vv-about-hero__text .vv-label { margin: 0 0 16px; }

.vvpage-over-ons .vv-about-hero__title,
body.vv .vvpage-over-ons .vv-about-hero__title {
	margin: 0 0 22px;
	font-family: var(--font-d);
	font-weight: 700;
	font-size: 50px;
	line-height: 1.1;
	color: var(--ink);
}
.vvpage-over-ons .vv-about-hero__title em {
	font-style: italic;
	color: var(--sage);
}

.vvpage-over-ons .vv-about-hero__lead {
	margin: 0 0 18px;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.85;
	color: var(--ink-2);
}
.vvpage-over-ons .vv-about-hero__lead + .vv-about-hero__lead { margin-bottom: 32px; }

.vvpage-over-ons .vv-about-hero__cta { margin: 0; }
.vvpage-over-ons .vv-about-hero__cta .vv-btn { padding: 15px 32px; }

/* 1.1 Portrait — placeholder attachment, swapped in the Media Library later
       (SITE_PLAN OQ 3). Fixed frame + object-fit so any portrait fits. */
.vvpage-over-ons .vv-about-hero__visual { position: relative; }

.vvpage-over-ons .vv-about-hero__portrait {
	margin: 0;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 30px 70px rgba(44, 36, 32, .18);
	height: 440px;
	background: var(--sand-2);
}
.vvpage-over-ons .vv-about-hero__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}

/* vv/stat-badge — promoted to style.css §9 (0.5-N.3). */

/* -------------------------------------------------------------------------
   2. DRIE BELOFTES — sand-2 band, 3 sand cards
   ------------------------------------------------------------------------- */
.vvpage-over-ons .vv-about-promises { background: var(--sand-2); }
.vvpage-over-ons .vv-about-promises__inner { padding: 88px var(--gutter); }

.vvpage-over-ons .vv-about-promises__head {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 620px;
	margin-bottom: 44px;
}
.vvpage-over-ons .vv-about-promises__head .vv-label { margin: 0; }
.vvpage-over-ons .vv-about-promises__title,
body.vv .vvpage-over-ons .vv-about-promises__title {
	margin: 0;
	font-family: var(--font-d);
	font-weight: 700;
	font-size: 40px;
	line-height: 1.15;
	color: var(--ink);
}
.vvpage-over-ons .vv-about-promises__title em {
	font-style: italic;
	color: var(--sage);
}

/* vv/drie-beloftes — promoted to style.css §9 (0.5-N.3). */

/* -------------------------------------------------------------------------
   3. STATS-RIJ (4) — waarden via vv/figure, labels blijven letterlijke copy
   ------------------------------------------------------------------------- */
/* vv/stats-row — promoted to style.css §9 (0.5-N.3). */

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

/* -------------------------------------------------------------------------
   5. RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.vvpage-over-ons .vv-about-hero__inner {
		grid-template-columns: 1fr;
		gap: 44px;
		padding: 56px var(--gutter) 64px;
	}
	.vvpage-over-ons .vv-about-hero__title,
	body.vv .vvpage-over-ons .vv-about-hero__title { font-size: 34px; }

	.vvpage-over-ons .vv-about-hero__portrait { height: 380px; }
	.vvpage-over-ons .vv-about-hero__cta .vv-btn { padding: 15px 28px; min-height: 44px; }

	.vvpage-over-ons .vv-about-promises__inner { padding: 56px var(--gutter); }
	.vvpage-over-ons .vv-about-promises__head { margin-bottom: 28px; }
	.vvpage-over-ons .vv-about-promises__title,
	body.vv .vvpage-over-ons .vv-about-promises__title { font-size: 27px; }
}

@media (max-width: 600px) {
	.vvpage-over-ons .vv-about-hero__portrait { height: 320px; }
	.vvpage-over-ons .vv-about-hero__lead { font-size: 14.5px; }
}