body { overflow-x: clip; }
.site-header .brand img { width: 78px; height: 78px; }

/* Compacte eerste pagina: ook op een laptop blijven tekst en knoppen in beeld. */
.hero {
  min-height: auto;
  padding-top: 64px;
  padding-bottom: 76px;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  gap: 6vw;
}

.hero h1 {
  max-width: 800px;
  font-size: clamp(2.35rem, 3.15vw, 3.65rem);
  line-height: 1.12;
  letter-spacing: -.04em;
  margin-bottom: 20px;
}

.hero .intro {
  max-width: 760px;
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  line-height: 1.6;
}

.hero-actions { margin-top: 26px; }
.hero-panel > img { height: 285px; }

.ai-feature {
  max-width: 1360px;
  margin: 52px auto 0;
  padding: 38px 42px;
  display: grid;
  grid-template-columns: .65fr 1.35fr;
  gap: 6vw;
  background: var(--soft-red);
  border-left: 5px solid var(--red);
  border-radius: var(--radius);
}

.ai-feature h3 { font-size: clamp(1.7rem, 2.5vw, 2.5rem); margin: 0; }
.ai-feature p { color: var(--muted); margin-top: 0; }
.ai-feature p:last-child { margin-bottom: 0; }
footer .brand img { width: 54px; height: 54px; }

@media (max-width: 900px) {
  .ai-feature { grid-template-columns: 1fr; gap: 24px; }
  .hero {
    grid-template-columns: 1fr;
    gap: 54px;
    padding: 58px 6vw 78px;
  }
  .hero-copy { min-width: 0; }
  .hero-panel { width: 100%; max-width: 620px; }
}

@media (max-width: 580px) {
  .site-header .brand img { width: 66px; height: 66px; }
  .ai-feature { padding: 28px 24px; }
  .site-header { padding-left: 18px; padding-right: 14px; }
  .site-header .brand { gap: 8px; font-size: 15px; }
  .hero { gap: 38px; padding: 44px 20px 64px; }
  .hero h1 {
    font-size: clamp(2rem, 10.5vw, 2.5rem);
    line-height: 1.08;
    letter-spacing: -.035em;
  }
  .hero .intro { font-size: 1rem; line-height: 1.55; }
  .hero-actions { gap: 18px; margin-top: 24px; }
  .hero-panel { margin-right: 0; box-shadow: 7px 9px 0 var(--soft-red); }
  .hero-panel > img { height: 205px; }
  .section-heading { margin-bottom: 38px; }
  .services, .about { padding-left: 20px; padding-right: 20px; }
  .contact, .approach { padding-left: 20px; padding-right: 20px; }
  footer { padding-left: 20px; padding-right: 20px; }
}