/**
 * Over ons (/over-ons/), naar Figma "Over ons · B Menzis-opzet in mint". Mint kop met
 * afgeronde onderkant, drie genummerde kaarten die eroverheen vallen, foto met vinkjes,
 * twee afsluitende kaarten. Alles onder .oo, zodat de rest van de site er niet door verandert.
 */
.oo {
	--oo-teal: #054958;
	--oo-mint: #dcf4f2;
	--oo-zacht: #f6fbfb;
	--oo-tekst: #3d5a60;
	--oo-groen: #00866d;
	--oo-geel: #ffc619;
	--oo-geel-d: #f0b400;
	--oo-op-geel: #032a32;
	color: var(--oo-teal);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.oo *, .oo *::before, .oo *::after { box-sizing: border-box; }
.oo :where(h1, h2, p, ul, figure) { margin: 0; }

.oo-w { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.oo-bk { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--oo-groen); }
.oo-h2 { font-size: 34px; font-weight: 400; line-height: 1.2; letter-spacing: -.01em; color: var(--oo-teal); }

/* Kop */
.oo-kop {
	background: var(--oo-mint);
	padding: 88px 24px 170px;
	text-align: center;
	border-radius: 0 0 48px 48px;
}
.oo-kop__titel { margin-top: 14px; font-size: 52px; font-weight: 400; line-height: 1.12; letter-spacing: -.01em; color: var(--oo-teal); }
.oo-kop__tekst { max-width: 720px; margin: 18px auto 0; font-size: 18px; line-height: 1.7; color: var(--oo-tekst); }

/* Drie kaarten over de kop heen */
.oo-kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: -110px; position: relative; }
.oo-k {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 34px;
	border-radius: 28px;
	background: #fff;
	box-shadow: 0 24px 50px -20px rgba(5, 73, 88, .25);
}
.oo-k__nr {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--oo-teal);
	color: #fff;
	font-weight: 800;
}
.oo-k h2 { font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--oo-teal); }
.oo-k p { font-size: 15.5px; line-height: 1.65; color: var(--oo-tekst); }
.oo-link { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px; font-size: 15px; font-weight: 700; color: var(--oo-groen); text-decoration: none; }
.oo-link:hover { color: var(--oo-teal); }

/* Waar we voor staan */
.oo-waarden { display: grid; grid-template-columns: 420px 1fr; gap: 64px; align-items: center; padding: 96px 0; }
.oo-waarden__foto { height: 440px; border-radius: 28px; overflow: hidden; background: var(--oo-zacht); }
.oo-waarden__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.oo-waarden .oo-h2 { margin: 12px 0 24px; }
.oo-vink { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.oo-vink li { display: flex; gap: 12px; align-items: flex-start; font-size: 16.5px; line-height: 1.5; color: var(--oo-teal); }
.oo-vink i {
	flex: 0 0 24px;
	height: 24px;
	margin-top: 1px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--oo-mint);
	color: var(--oo-groen);
}

/* Twee afsluitende kaarten */
.oo-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-bottom: 96px; }
.oo-kaart { display: flex; flex-direction: column; gap: 14px; padding: 40px; border-radius: 24px; background: var(--oo-zacht); }
.oo-kaart--mint { background: var(--oo-mint); }
.oo-kaart .oo-h2 { font-size: 28px; }
.oo-kaart p { font-size: 17px; line-height: 1.7; color: var(--oo-tekst); }
.oo-kaart p a { color: var(--oo-teal); font-weight: 600; }
.oo-knop {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
	padding: 15px 24px;
	border-radius: 10px;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}
.oo-knop--rand { padding: 13.5px 22.5px; border: 1.5px solid var(--oo-teal); color: var(--oo-teal); }
.oo-knop--rand:hover { background: var(--oo-teal); color: #fff; }
.oo-knop--geel { background: var(--oo-geel); color: var(--oo-op-geel); }
.oo-knop--geel:hover { background: var(--oo-geel-d); color: var(--oo-op-geel); }
.oo a:focus-visible { outline: 3px solid #7fd6c3; outline-offset: 2px; }

@media (max-width: 1024px) {
	.oo-kaarten { grid-template-columns: 1fr; gap: 16px; }
	.oo-waarden { grid-template-columns: 1fr; gap: 36px; padding: 64px 0; }
	.oo-waarden__foto { height: 320px; }
}
@media (max-width: 768px) {
	.oo-w { padding: 0 16px; }
	.oo-kop { padding: 56px 16px 130px; border-radius: 0 0 32px 32px; }
	.oo-kop__titel { font-size: 36px; }
	.oo-kop__tekst { font-size: 16.5px; }
	.oo-kaarten { margin-top: -90px; }
	.oo-k { padding: 26px; border-radius: 22px; }
	.oo-h2 { font-size: 28px; }
	.oo-waarden { padding: 56px 0; }
	.oo-waarden__foto { height: 240px; border-radius: 22px; }
	.oo-duo { grid-template-columns: 1fr; gap: 16px; padding-bottom: 64px; }
	.oo-kaart { padding: 28px; border-radius: 22px; }
	.oo-kaart .oo-h2 { font-size: 24px; }
	.oo-knop { align-self: stretch; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .oo * { transition: none !important; } }