/* ==========================================================================
   home-2.css — projecten (home) en over ons.
   Reviews, aanpak en FAQ staan in sections.css (ook op andere pagina's).
   ========================================================================== */

/* ---------- Projecten op de homepage: per 2 naast elkaar, even groot ---------- */
.projectraster--home { align-items: stretch; }
.projectraster--home .projectkaart__info { margin-top: auto; }

/* ---------- Over ons ---------- */
.over__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.over__beeld { position: relative; }
.over__frame { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); background: var(--blue); }
.over__frame img { width: 100%; height: 100%; object-fit: cover; }
.over__illustratie { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 30% 25%, rgba(var(--lime-rgb), .55), transparent 40%), linear-gradient(160deg, var(--blue), var(--blue-600)); }
.over__initialen { font-size: clamp(5rem, 3rem + 8vw, 10rem); font-weight: 800; letter-spacing: -.06em; color: #fff; }
.over__code { position: absolute; right: 24px; bottom: 24px; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--lime); color: var(--ink); }
.zweefkaart {
	position: absolute; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px;
	background: #fff; border-radius: var(--radius-pill); box-shadow: var(--shadow-lg); font-weight: 650; font-size: .92rem;
}
.zweefkaart .icoon { color: var(--blue); }
.zweefkaart--1 { left: -18px; top: 14%; }
.zweefkaart--2 { right: -18px; bottom: 16%; }
@media (max-width: 600px) { .zweefkaart--1 { left: 10px; } .zweefkaart--2 { right: 10px; } }
.over__tekst { display: grid; gap: 22px; justify-items: start; }
.over__tekst .opgemaakt { color: #3b4456; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0; width: 100%; }
.stat { display: flex; flex-direction: column-reverse; gap: 4px; padding: 18px; border-radius: var(--radius); background: var(--soft); }
.stat:nth-child(2) { background: var(--lime); }
.stat dt { font-size: .85rem; color: var(--muted); font-weight: 600; line-height: 1.3; }
.stat:nth-child(2) dt { color: rgba(var(--ink-rgb), .7); }
.stat dd { margin: 0; font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
@media (max-width: 960px) {
	.over__grid { grid-template-columns: 1fr; }
	.over__beeld { max-width: 520px; width: 100%; margin-inline: auto; }
	.stats { grid-template-columns: repeat(2, 1fr); }
}