:root{
  /* Zet hier exact jullie kleuren (1 plek aanpassen = hele site) */
  --brand-ink:#111;
  --brand-bg:#fff;
  --brand-muted:#f5f6f7;
  --brand-accent:#b07a3c; /* <-- zet exact jullie hoofdkleur */
  --brand-accent-2:#2b2b2b;

  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --container:1120px;
  --gap:16px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{box-sizing:border-box}
body{
  margin:0; font-family:var(--font);
  color:var(--brand-ink); background:var(--brand-bg);
  line-height:1.55;
}
a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--container); margin:0 auto; padding:0 18px}

.header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.header__inner{display:flex; align-items:center; justify-content:space-between; height:72px; gap:12px}
.brand{display:flex; align-items:center; gap:10px}
.brand__logo{height:34px; width:auto}
.brand__text{font-weight:800; letter-spacing:.5px}

.nav{display:flex; align-items:center; gap:14px}
.nav__link{opacity:.9; font-weight:600}
.nav__cta{
  padding:10px 14px; border-radius:999px;
  background:var(--brand-accent); color:#fff; font-weight:800;
  text-decoration:none;
}
.nav__toggle{display:none; border:1px solid rgba(0,0,0,.12); background:#fff; border-radius:12px; padding:8px 10px}

main{padding:28px 0 48px}

.hero{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:24px;
  padding:24px;
  border-radius:var(--radius);
  background:linear-gradient(180deg, var(--brand-muted), #fff);
  box-shadow:var(--shadow);
}
.hero__media img{width:100%; height:100%; object-fit:cover; border-radius:var(--radius)}
.eyebrow{margin:0 0 8px; font-weight:800; color:var(--brand-accent)}
h1{font-size:clamp(28px, 3.2vw, 44px); margin:0 0 10px}
.lead{font-size:1.05rem; opacity:.9; margin:0 0 14px}

.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:8px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  font-weight:800;
  text-decoration:none;
}
.btn--primary{background:var(--brand-accent); border-color:var(--brand-accent); color:#fff}
.btn--ghost{background:#fff}

.usp{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px}
.card{
  background:#fff; border:1px solid rgba(0,0,0,.08);
  border-radius:14px; padding:12px;
}
.card strong{display:block}
.card span{display:block; opacity:.8; font-size:.95rem; margin-top:4px}

.section{margin-top:26px}
.section--muted{
  background:var(--brand-muted);
  padding:18px; border-radius:var(--radius);
}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.tile{
  background:#fff; border:1px solid rgba(0,0,0,.08);
  border-radius:14px; padding:14px;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.tile strong{display:block}
.tile span{display:block; opacity:.8; margin-top:4px}

.split{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start}
.mini-gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.mini-gallery img{width:100%; height:140px; object-fit:cover; border-radius:14px}

.pagehead{padding:8px 0 6px}
.hours{list-style:none; padding:0; margin:0}
.hours li{padding:6px 0; border-bottom:1px solid rgba(0,0,0,.06)}
.meta,.small{opacity:.8; font-size:.95rem}

.form label{display:block; font-weight:700; margin:10px 0 6px}
.form input,.form textarea{
  width:100%; padding:12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.14);
  background:#fff;
}
.alert{padding:12px 14px; border-radius:12px; margin:10px 0 0}
.alert--ok{background:#eefaf1; border:1px solid #bfe7c7}
.alert--err{background:#fff2f2; border:1px solid #f0bcbc}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.gallery__item img{width:100%; height:220px; object-fit:cover; border-radius:14px; border:1px solid rgba(0,0,0,.08)}
.map iframe{width:100%; height:320px; border:0; border-radius:14px; box-shadow:var(--shadow)}

.footer{
  border-top:1px solid rgba(0,0,0,.08);
  padding:26px 0;
  background:#fff;
}
.footer__grid{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:16px}
.footer__links{display:grid; gap:8px; margin-top:10px}
.footer__bottom{margin-top:16px; opacity:.8; font-size:.95rem}

@media (max-width: 980px){
  .hero{grid-template-columns:1fr; }
  .usp{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .nav__toggle{display:inline-flex}
  .nav{
    display:none; position:absolute; right:18px; top:72px;
    background:#fff; border:1px solid rgba(0,0,0,.10);
    border-radius:14px; padding:10px; flex-direction:column; align-items:stretch;
    min-width:240px;
    box-shadow:var(--shadow);
  }
  .nav.is-open{display:flex}
}