/* ====== BASE ====== */
:root{
  --brand:#3a7bd5; /* zacht blauw */
  --brand-dark:#225daa;
  --accent:#7cc47f;
  --ink:#1d2433;
  --muted:#6b7280;
  --bg:#f7f7fb;
  --card:#ffffff;
  --ring: rgba(58,123,213,.25);
  --radius: 18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}
h1,h2,h3{font-family:Poppins, Inter, sans-serif; line-height:1.2; margin:0 0 .5rem}
h1{font-size:clamp(2rem,4vw,3.2rem);}
h2{font-size:clamp(1.6rem,2.5vw,2.2rem);}
h3{font-size:1.25rem}
p{margin:.5rem 0 1rem}
.wrap{width:min(1100px,92vw); margin-inline:auto}
.section{padding:72px 0}
.section.alt{background:#fff}
.section.accent{background:linear-gradient(180deg,#eef6ff, #ffffff)}

/* ====== HEADER ====== */
.site-header{
  position:sticky; top:0; z-index:10;
  background:#fff;
  box-shadow:0 4px 18px rgba(0,0,0,.05);
}
.site-header .wrap{display:flex; align-items:center; gap:24px; padding:14px 12px}
.brand img{height:52px; width:auto; display:block}
.main-nav{margin-left:auto; display:flex; gap:18px; flex-wrap:wrap}
.main-nav a{color:var(--ink); text-decoration:none; font-weight:600}
.main-nav a:hover{color:var(--brand)}

/* ====== CONSTRUCTION BANNER ====== */
.construction-banner{
  text-align:center; padding:10px 12px;
  background: repeating-linear-gradient(45deg, #fff3cd, #fff3cd 14px, #ffe69c 14px, #ffe69c 28px);
  border-bottom:2px solid #f0c36d;
  font-weight:600;
}

/* ====== HERO ====== */
.hero{position:relative; min-height:64vh; display:grid; place-items:center; overflow:hidden}
.hero img{width:100%; height:72vh; min-height:420px; object-fit:cover; filter:brightness(.75)}
.hero-overlay{
  position:absolute; inset:0; display:grid; place-content:center; text-align:center; color:#fff; padding:16px
}
.tagline{font-weight:600; opacity:.95; margin-top:.25rem; letter-spacing:.5px}
.cta-row{margin-top:18px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* ====== BUTTONS ====== */
.btn{display:inline-block; padding:12px 18px; border-radius:999px; text-decoration:none; font-weight:700; border:2px solid transparent}
.btn.primary{background:var(--brand); color:#fff}
.btn.primary:hover{background:var(--brand-dark)}
.btn.ghost{background:transparent; color:#fff; border-color:#fff}
.btn.ghost:hover{background:#ffffff20}

/* ====== GRID & CARDS ====== */
.grid-2{display:grid; gap:28px; align-items:center}
@media(min-width:840px){ .grid-2{ grid-template-columns: 1.1fr .9fr } }
.card{background:var(--card); border-radius:var(--radius); box-shadow:0 12px 28px rgba(0,0,0,.06); overflow:hidden}
.card.photo img{display:block; width:100%; height:100%; object-fit:cover}

/* ====== HIGHLIGHTS ====== */
.highlights{margin:0; padding-left:1.2rem}
.highlights li{margin:.4rem 0}

/* ====== DAY LINE ====== */
.dayline{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 14px}
.dayline span{background:#eef6ff; border:1px dashed var(--brand); padding:6px 10px; border-radius:999px; font-weight:600}

/* ====== GALLERY ====== */
.gallery{display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:14px; margin-top:16px}
.gallery figure{aspect-ratio: 4/3; overflow:hidden; border-radius:16px; background:#fff}
.gallery img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease}
.gallery img:hover{transform:scale(1.04)}

/* ====== CALLOUT ====== */
.callout{display:grid; gap:22px; align-items:center}
.callout-img{max-width:240px; width:60%; border-radius:16px; box-shadow:0 12px 28px rgba(0,0,0,.08)}
@media(min-width:840px){ .callout{ grid-template-columns: .7fr 1.3fr } }

/* ====== CONTACT ====== */
.contact-list{list-style:none; padding:0; margin:0}
.contact-list li{margin:8px 0}
.note{background:#f3fff4; border:1px solid #bfe8c3; padding:12px 14px; border-radius:14px; font-weight:600}

/* ====== FOOTER ====== */
.site-footer{padding:36px 0; color:var(--muted)}
.site-footer .wrap{display:flex; justify-content:center}

/* Utility */
.lede{font-weight:600}
.small{font-size:.9rem; color:var(--muted)}
.center{text-align:center}


/* ====== BRAND LOGO ====== */
.brand img{height:64px; width:auto}
@media(max-width:520px){ .brand img{height:48px} }

/* ====== OPEN DAY PROMO ====== */
.open-day{padding:48px 0}
.open-day-card{
  display:grid; gap:24px; align-items:center;
  background:#fff; border-radius:var(--radius);
  box-shadow:0 16px 36px rgba(0,0,0,.08);
  padding:22px;
}
@media(min-width:940px){
  .open-day-card{ grid-template-columns: 1fr 1.2fr; padding:30px }
}
.open-day-media img{display:block; width:100%; border-radius:14px}
.open-day-content h2{font-size:clamp(1.8rem,3vw,2.4rem)}