:root{
  --bg:#fffaf6;
  --accent:#a87c4a; /* goud-achtig */
  --muted:#6b6b6b;
  --card:#fff;
  --radius:14px;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:#222;line-height:1.45}
.container{max-width:1100px;margin:0 auto;padding:24px}

header{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.brand{display:flex;gap:12px;align-items:center}

/* Klein logo in header */
.brand img{
  height:64px;
  width:auto;
  display:block;
  border-radius:12px; /* afgeronde hoeken */
  box-shadow:0 2px 6px rgba(0,0,0,0.15); /* subtiele schaduw */
}

nav a{margin-left:18px;text-decoration:none;color:var(--muted);font-weight:600}

.hero{
  display:grid;
  grid-template-columns:1fr 420px;
  gap:28px;
  align-items:center;
  padding:28px 0;
}
.hero .intro h2{font-size:34px;margin:0 0 12px}
.hero .intro p{margin:0 0 18px;color:var(--muted)}
.cta{display:inline-block;background:var(--accent);color:white;padding:12px 18px;border-radius:10px;text-decoration:none;font-weight:700}

/* Foto container op desktop rechts uitgelijnd */
.hero .photo{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  background:transparent;
  box-shadow:none;
  border-radius:0;
  overflow:visible;
}

/* Groot logo standaard (desktop) */
.hero img{
  width:75%;
  height:auto;
  display:block;
  margin:0;
  border-radius:20px; /* afgeronde hoeken */
  box-shadow:0 4px 12px rgba(0,0,0,0.12); /* subtiele schaduw */
}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.card{background:var(--card);padding:14px;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,0.04)}
.card h3{margin:0 0 8px}
.muted{color:var(--muted)}

.gallery{margin:34px 0}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gallery-item{border-radius:10px;overflow:hidden;height:200px;display:block}
.gallery-item img{width:100%;height:100%;object-fit:cover;display:block}

.materials{display:flex;gap:18px;align-items:center;padding:18px;background:linear-gradient(180deg,rgba(255,255,255,0.6),transparent);border-radius:12px}

.contact{display:grid;grid-template-columns:1fr 380px;gap:20px;margin:28px 0}
form{display:flex;flex-direction:column;gap:10px}
input,textarea{padding:10px;border-radius:8px;border:1px solid #e6e0da;font-size:15px}
.btn{display:inline-block;background:var(--accent);color:white;padding:12px;border-radius:10px;text-decoration:none;font-weight:700;border:none;cursor:pointer}

footer{padding:22px 0;color:var(--muted);font-size:14px;border-top:1px solid #efe7de;margin-top:30px}

/* Responsief */
@media (max-width:980px){
  .hero{
    grid-template-columns:1fr;
  }
  .hero .photo{
    justify-content:center; /* op mobiel centreren */
  }
  .hero img{
    width:60%; /* logo kleiner op mobiel */
  }
  .gallery-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .container{padding:18px}
  .contact{grid-template-columns:1fr}
}

@media (max-width:560px){
  .gallery-grid{grid-template-columns:1fr}
}