/* ============================================
   Homepage — sectie-omhulsels (post-522.css). De inhoud zit in componenten.
   ============================================ */
.home-cases { background-color: var(--color-white); padding: 80px 0; }

.home-diensten { background-color: var(--color-cream); padding: 80px 0; }
.home-diensten__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.home-diensten .bento-wrap { width: 100%; }

.home-branches { padding: 80px 0; }
.home-branches__inner { display: flex; align-items: center; gap: 70px; }
.home-branches__tekst { display: flex; flex-direction: column; gap: 24px; width: 100%; min-width: 0; }
.home-branches__titel { font-size: 44px; }
.home-branches__sub { font-family: var(--font-ui); font-size: 16px; font-weight: 400; line-height: 1.7; color: var(--color-primary); }
/* In het origineel krimpt de kaartenkolom mee vanaf de natuurlijke rasterbreedte: 2 × 1024px (fotobreedte) + 14px.
   Met Eleventy Image hangt de natuurlijke breedte af van de gekozen variant, dus die basis staat hier vast. */
.home-branches__kaarten { flex: 0 1 2062px; min-width: 0; }
@media (max-width: 768px) { .home-branches__kaarten { flex-basis: 1024px; } }

.home-reviews { background-color: var(--color-primary); padding: 80px 0; }
.home-reviews__inner { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 24px; }

.home-over-ons { background-color: var(--color-white); padding: 80px 0; }
.home-over-ons > .container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 30px; }

.home-werkwijze { background-color: var(--color-white); padding: 80px 0; }
.home-werkwijze__inner { display: flex; flex-direction: column; gap: 24px; }
.home-werkwijze__titel { color: #000; }
.home-werkwijze__titel em { color: var(--color-accent); }
.home-werkwijze__sub { font-family: var(--font-ui); font-size: var(--body-size); font-weight: 400; line-height: var(--body-lh); color: var(--color-text); }

.home-faq { background-color: var(--color-cream); padding: 80px 0; }
.home-faq__inner { display: flex; flex-direction: column; gap: 24px; }
.home-faq__titel { color: #000; }

@media (max-width: 767px) {
  .home-cases { padding: 60px 20px; }
  .home-diensten { padding: 60px 20px; }
  .home-diensten__inner { align-items: center; }
  .home-branches { padding: 60px 20px; }
  .home-branches__inner { flex-wrap: wrap; gap: 24px; }
  .home-branches__kaarten { width: 100%; }
  .home-branches__titel { font-size: 32px; line-height: 1.2; }
  .home-branches__sub { font-size: 17px; line-height: 1.5; }
  .home-reviews { padding: 60px 20px 0; }
  .home-reviews__inner { gap: 20px; }
  .home-over-ons { padding: 60px 20px; }
  .home-over-ons > .container { align-items: flex-start; gap: 24px; }
  .home-werkwijze { padding: 60px 20px; }
  .home-werkwijze__inner { align-items: flex-start; gap: 20px; }
  .home-faq { padding: 60px 20px; }
  .home-faq__inner { align-items: flex-start; }
}
.home-werkwijze .werkwijze { width: 100%; }