/* ========== BASIS ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root{
  --beige:#F5EFE7;
  --sage-green:#8FA998;
  --dark-sage:#5D7363;
  --peach:#E8B598;
  --white:#FFFFFF;
  --text-dark:#2C3E3E;
  --text-light:#6B7E7E;
}

body{
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height:1.6;
  color:var(--text-dark);
  background-color:var(--beige);
}

.container{ max-width:1200px; margin:0 auto; padding:0 20px; }
main{ padding:60px 20px; }
section{ margin-bottom:80px; }
h2{ font-size:32px; color:var(--dark-sage); margin-bottom:30px; text-align:center; }

/* ========== HEADER ========== */
header{
  background:var(--white);
  padding:20px 0;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
  position:sticky; top:0; z-index:100;
}

.header-content{ display:flex; justify-content:space-between; align-items:center; }

.logo{ display:flex; align-items:center; gap:15px; }
.logo img{ height:60px; width:auto; object-fit:contain; }
.logo h1{ font-size:28px; color:var(--dark-sage); font-weight:600; }

.social-links{ display:flex; gap:15px; }
.social-links a{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; background:var(--sage-green); color:var(--white);
  border-radius:50%; transition:.3s; text-decoration:none;
}
.social-links a:hover{ background:var(--dark-sage); transform:translateY(-2px); }

/* ========== HERO ========== */
.hero{ width:100%; height:300px; overflow:hidden; position:relative; }
.hero picture, .hero img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center; }

/* ========== OVER MIJ ========== */
.about-content{
  display:grid; grid-template-columns:1fr 300px; gap:50px; align-items:center;
}
.about-text p{ font-size:18px; line-height:1.8; color:var(--text-light); }
.about-image{ display:flex; justify-content:center; }
.about-image img{
  width:250px; height:250px; border-radius:50%; object-fit:cover;
  border:5px solid var(--sage-green); box-shadow:0 5px 20px rgba(0,0,0,.1);
}

/* ========== AFFINITEIT MET ========== */
.expertise-grid{
  display:grid; gap:1.6rem; grid-template-columns:repeat(5, minmax(0,1fr));
}
.expertise-item{
  background:var(--white); padding:30px 20px; border-radius:15px; text-align:center;
  transition:transform .3s ease, box-shadow .3s ease;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.expertise-item:hover{ transform:translateY(-5px); box-shadow:0 5px 20px rgba(0,0,0,.1); }
.expertise-item img{ width:28px; height:28px; object-fit:contain; margin:0 auto .6rem; display:block; }
.expertise-item h3{ font-size:16px; color:var(--dark-sage); font-weight:500; }

/* ========== OPDRACHTGEVERS ========== */
.clients-grid{
  display:grid; gap:1.6rem; grid-template-columns:repeat(2, minmax(0,1fr));
  max-width:800px; margin:40px auto 0;
}
.client-logo{
  display:flex;
  flex-direction:column;     /* volgorde = zoals in HTML: naam -> logo */
  align-items:center;
  justify-content:center;
  gap:.6rem;
  text-align:center;
  min-height:150px;
  padding:2rem;
  background:#fff;
  border:1px solid #e8e8e8;
  border-radius:12px;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
  text-decoration:none;
  transition:transform .3s ease, box-shadow .3s ease;
  color:inherit;             /* neutraliseert standaard link-kleur */
}
.client-logo:hover{ transform:translateY(-5px); box-shadow:0 5px 20px rgba(0,0,0,.1); }

/* naam boven logo, zwart */
.client-logo .client-name{
  display:block;
  margin:0 0 .2rem;
  font-size:.95rem;
  font-weight:600;
  line-height:1.2;
  color:#000;                /* expliciet zwart */
}

/* logo-formaat */
.client-logo img{
  display:block;
  max-width:100%;
  max-height:100px;
  width:auto;
  object-fit:contain;
}

/* link-states nooit blauw/onderstreept */
.client-logo:link,
.client-logo:visited,
.client-logo:hover,
.client-logo:active{
  color:inherit;
  text-decoration:none;
}

/* ========== FOOTER ========== */
footer{
  background:var(--dark-sage); color:var(--white);
  padding:40px 0 20px; margin-top:60px;
}
footer .container{ display:flex; flex-direction:column; align-items:center; gap:20px; }
footer p{ font-size:14px; }
.footer-links{ display:flex; gap:30px; }
.footer-links a{ color:var(--white); text-decoration:none; font-size:14px; transition:opacity .3s; }
.footer-links a:hover{ opacity:.8; text-decoration:underline; }

/* ========== RESPONSIVE ========== */
@media (max-width: 900px){
  .expertise-grid{ grid-template-columns:repeat(3, 1fr); }
}

@media (max-width: 768px){
  .header-content{ flex-direction:column; gap:15px; }
  .logo h1{ font-size:24px; }
  .logo img{ height:50px; }
  .hero{ height:200px; }

  .about-content{ grid-template-columns:1fr; gap:30px; }
  .about-image{ order:-1; }
  .about-image img{ width:200px; height:200px; }

  h2{ font-size:26px; }
  .about-text p{ font-size:16px; }

  .expertise-item{ padding:20px 15px; }
}

@media (max-width: 640px){
  .expertise-grid{ grid-template-columns:repeat(2, 1fr); }
  .clients-grid{ grid-template-columns:1fr; }
  .client-logo img{ max-height:64px; }
}

@media (max-width: 480px){
  .logo h1{ font-size:20px; }
  .social-links a{ width:35px; height:35px; }
  .social-links svg{ width:20px; height:20px; }
  main{ padding:40px 20px; }
  section{ margin-bottom:60px; }
}
/* --- OPDRACHTGEVERS (kaartjes, titel boven logo) --- */
.clients { margin: 4rem 0 1rem; }
.clients h2 { margin-bottom: 1.6rem; }

.clients-grid{
  display: grid;
  gap: 1.6rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 800px;
  margin: 0 auto;
}

/* Kaart als link, maar zonder blauwe tekst/onderstreping */
.client-card{
  display: flex;
  flex-direction: column;   /* titel boven logo */
  align-items: center;
  justify-content: center;
  gap: .6rem;
  text-align: center;

  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 1.6rem 2rem;
  min-height: 150px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  transition: transform .3s ease, box-shadow .3s ease;

  color: inherit;           /* neutraliseert linkkleur */
  text-decoration: none;    /* geen onderstreping */
}
.client-card:hover{ transform: translateY(-5px); box-shadow: 0 5px 20px rgba(0,0,0,.1); }
.client-card:link,
.client-card:visited,
.client-card:hover,
.client-card:active{ color: inherit; text-decoration: none; }

.client-title{
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
  color: #000000;              /* zwart */
  margin: 0;
}

.client-logo-wrap img{
  display: block;
  max-width: 100%;
  max-height: 100px;        /* consistente logo-hoogte */
  width: auto;
  object-fit: contain;
}

/* Responsive */
@media (max-width: 640px){
  .clients-grid{ grid-template-columns: 1fr; }
  .client-logo-wrap img{ max-height: 64px; }
}
/* --- OUD: titel boven logo, zwart, gecentreerd --- */
.clients-grid{
  display:grid;
  gap:1.6rem;
  grid-template-columns:repeat(2, minmax(0,1fr));
  max-width:800px;
  margin:40px auto 0;
}

.client-logo{
  display:flex;
  flex-direction:column;      /* naam -> logo */
  align-items:center;
  justify-content:center;
  text-align:center;

  min-height:150px;
  padding:2rem;
  background:#fff;
  border:1px solid #e8e8e8;
  border-radius:12px;
  box-shadow:0 2px 10px rgba(0,0,0,.04);

  text-decoration:none;       /* geen underline */
  color:#000000;              /* nooit link-blauw */
  transition:transform .3s, box-shadow .3s;
}
.client-logo:hover{ transform:translateY(-5px); box-shadow:0 5px 20px rgba(0,0,0,.1); }

/* link-states neutraliseren */
.client-logo:link,
.client-logo:visited,
.client-logo:hover,
.client-logo:active{
  color:inherit;
  text-decoration:none;
}

.client-logo .client-name{
  display:block;
  margin:0 0 .6rem;
  font-size:.95rem;
  font-weight:600;
  line-height:1.2;
  color:#000000;                 /* expliciet zwart */
}

.client-logo img{
  display:block;
  max-width:100%;
  max-height:100px;
  width:auto;
  object-fit:contain;
}

/* responsive */
@media (max-width:640px){
  .clients-grid{ grid-template-columns:1fr; }
  .client-logo img{ max-height:64px; }
}
/* ========== OPDRACHTGEVERS (oude opzet met tekst placeholders) ========== */

.clients {
  margin: 4rem 0 1rem;
}

.clients h2 {
  margin-bottom: 1.6rem;
  text-align: center;
}

.clients-grid {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 800px;
  margin: 0 auto;
}

.client-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  min-height: 150px;
  padding: 2rem;

  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);

  text-decoration: none; /* geen underline */
  color: inherit;        /* geen link-blauw */
  transition: transform .3s ease, box-shadow .3s ease;
}

.client-logo:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 20px rgba(0,0,0,.1);
}

/* Tekst in de placeholder */
.logo-placeholder { text-align: center; }

.logo-placeholder p {
  font-size: 18px;
  font-weight: 600;
  color: #000;        /* expliciet zwart */
  line-height: 1.4;
  margin: 0;
}

.logo-placeholder span {
  display: block;
  font-size: 14px;
  color: #6B7E7E;     /* subtiel lichtere noot */
  font-weight: 400;
  margin-top: .25rem;
}

/* Link-states neutraliseren (zekerheid) */
.client-logo:link,
.client-logo:visited,
.client-logo:hover,
.client-logo:active {
  color: inherit;
  text-decoration: none;
}

/* Responsive */
@media (max-width: 640px) {
  .clients-grid { grid-template-columns: 1fr; }
}
/* Logos in kaartjes */
.client-logo img {
  display: block;
  max-width: 100%;
  width: auto;
  max-height: 100px; /* hou het consistent met je ontwerp */
  object-fit: contain;
  margin: 0 auto;
}