/* Eenvoudige, schone styling voor Vreugde in Balans */
:root{
  --accent:#6b9f7a;
  --bg:#fff;
  --muted:#666;
  --max-width:1100px;
}
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;line-height:1.5;color:#222;margin:0;background:var(--bg)}
.container{max-width:var(--max-width);margin:0 auto;padding:1rem}
.site-header{background:#f7f7f7;border-bottom:1px solid #eee}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 1rem}
.brand{font-weight:700;color:var(--accent);text-decoration:none}
.main-nav a{margin-left:1rem;color:#333;text-decoration:none}
.hero{padding:3rem 0;background:linear-gradient(180deg,#fbfbfb,#fff)}
.hero h1{margin:0 0 .5rem;font-size:1.6rem}
.lead{color:var(--muted);margin-bottom:1rem}
.btn{display:inline-block;padding:.5rem 1rem;background:var(--accent);color:#fff;border-radius:6px;text-decoration:none}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--accent);margin-left:.5rem}
.intro h2,.services h2,.about h2,.practical h2{margin-top:0}
.list-inline{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.list-inline li{background:#f1f1f1;padding:.35rem .6rem;border-radius:6px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.card{padding:1rem;border:1px solid #eee;border-radius:8px;background:#fff}
.site-footer{border-top:1px solid #eee;padding:1rem 0;margin-top:2rem;background:#fafafa}
.footer-inner{display:flex;justify-content:space-between;gap:1rem}
/* Support grid for CTA images */
.support-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin-top:1rem}
.support-item{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0.75rem;border-radius:10px;background:#fff;border:1px solid #f0f0f0;text-decoration:none;color:inherit}
.support-item img{width:72px;height:72px;margin-bottom:0.5rem}
.support-item span{font-weight:600;color:#333}
.support-item:hover{box-shadow:0 6px 18px rgba(107,159,122,0.08);transform:translateY(-2px);transition:all .18s ease}


/* Contact columns */
.contact-columns{display:flex;gap:2rem}
.contact-info{flex:1}
.contact-form{flex:1}
.contact-form input,.contact-form textarea{width:100%;padding:.5rem;margin:.4rem 0;border:1px solid #e6e6e6;border-radius:6px}
.muted{color:var(--muted);font-size:0.95rem}
.disclaimer{font-size:0.9rem;color:var(--muted);margin-top:1rem}

/* Logo in header */
.brand img{height:48px;max-height:4rem;object-fit:contain;display:block}

/* Responsive overrides (placed last so they take precedence) */
@media (max-width:700px) {
  /* Keep header inline: logo + nav on same row */
  .header-inner { display:flex; flex-direction:row; align-items:center; gap:.5rem; padding:.5rem; }
  .main-nav { margin-left:auto; }
  .main-nav a { margin-left:.5rem; }
  .brand img { height:40px; }

  /* Stack contact columns vertically on mobile */
  .contact-columns { display:flex; flex-direction:column; gap:1rem; }
  .contact-info, .contact-form { flex: unset; width:100%; }
}