:root{
  --bg:#f7fbff;
  --card:#ffffff;
  --ink:#0b1b2b;
  --muted:#4b5c6b;
  --blue:#1f6feb;
  --blue2:#0b4fd6;
  --yellow:#ffd24d;
  --shadow: 0 12px 30px rgba(0,0,0,.08);
  --radius: 18px;
  --max: 1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--ink);
  background: radial-gradient(1200px 500px at 10% -10%, rgba(31,111,235,.25), transparent 60%),
              radial-gradient(900px 480px at 100% 0%, rgba(255,210,77,.25), transparent 55%),
              var(--bg);
  line-height:1.55;
}
a{color:inherit}
.container{max-width:var(--max); margin:0 auto; padding:0 18px}
header{
  position:sticky; top:0; z-index:10;
  backdrop-filter: blur(10px);
  background: rgba(247,251,255,.75);
  border-bottom: 1px solid rgba(11,27,43,.08);
}
.navbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:14px;
}
.brand{
  display:flex; align-items:center; gap:12px; text-decoration:none;
}
.logo{
  width:40px; height:40px; border-radius:14px;
  background:
    radial-gradient(circle at 30% 25%, #fff, rgba(255,255,255,.0) 55%),
    linear-gradient(145deg, var(--blue), var(--blue2));
  box-shadow: var(--shadow);
  position:relative;
}
.logo:after{
  content:"";
  position:absolute; inset:8px;
  border-radius:12px;
  background: rgba(255,210,77,.9);
  clip-path: polygon(0 60%, 30% 30%, 55% 55%, 70% 40%, 100% 70%, 100% 100%, 0 100%);
  opacity:.9;
}
.brand b{font-size:1.05rem}
.brand span{display:block; font-size:.85rem; color:var(--muted); margin-top:-2px}
nav{
  display:flex; flex-wrap:wrap; gap:10px;
}
nav a{
  text-decoration:none;
  padding:10px 12px;
  border-radius:999px;
  color:var(--muted);
}
nav a[aria-current="page"], nav a:hover{
  background: rgba(31,111,235,.10);
  color: var(--ink);
}
.hero{
  padding:44px 0 22px;
}
.hero-grid{
  display:grid; gap:18px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  .hero-grid{grid-template-columns: 1.2fr .8fr; align-items:stretch}
}
.card{
  background: var(--card);
  border:1px solid rgba(11,27,43,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:18px;
}
.kicker{
  display:inline-flex; gap:8px; align-items:center;
  padding:8px 12px;
  background: rgba(255,210,77,.25);
  border-radius: 999px;
  color:#2b2000;
  font-weight:700;
  font-size:.9rem;
}
.h1{
  font-size: clamp(2rem, 5vw, 3.1rem);
  margin: 12px 0 8px;
  letter-spacing: -0.03em;
}
.lead{color:var(--muted); font-size:1.05rem; margin:0 0 18px}
.cloud{
  background: radial-gradient(22px 18px at 18px 16px, #fff, rgba(255,255,255,0) 70%),
              radial-gradient(30px 24px at 48px 12px, #fff, rgba(255,255,255,0) 72%),
              radial-gradient(28px 22px at 78px 18px, #fff, rgba(255,255,255,0) 70%),
              radial-gradient(36px 28px at 40px 34px, #fff, rgba(255,255,255,0) 72%),
              radial-gradient(42px 34px at 80px 38px, #fff, rgba(255,255,255,0) 74%),
              rgba(31,111,235,.10);
  border-radius: 22px;
  padding: 14px;
  border:1px dashed rgba(31,111,235,.25);
}
.cta-row{display:flex; gap:10px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  border:0;
  padding:12px 14px;
  border-radius: 14px;
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
}
.btn.primary{
  background: linear-gradient(145deg, var(--blue), var(--blue2));
  color:#fff;
}
.btn.secondary{
  background: rgba(11,27,43,.06);
  color: var(--ink);
}
.btn:focus{outline: 3px solid rgba(31,111,235,.35); outline-offset:2px}
.badges{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:14px;
  color:var(--muted);
  font-weight:600;
}
.badge{
  padding:8px 10px;
  border-radius: 999px;
  background: rgba(11,27,43,.04);
  border: 1px solid rgba(11,27,43,.06);
}
.grid3{
  display:grid; gap:14px;
  grid-template-columns: 1fr;
  margin: 14px 0 22px;
}
@media (min-width: 820px){
  .grid3{grid-template-columns: repeat(3, 1fr);}
}
h2{margin:0 0 10px; letter-spacing:-.02em}
h3{margin:0 0 6px}
.small{color:var(--muted); margin:0}
.section{padding: 18px 0}
.footer{
  padding: 26px 0 40px;
  color: var(--muted);
}
.footer a{color: var(--muted)}
.table{
  width:100%;
  border-collapse: collapse;
  margin-top: 10px;
  overflow:hidden;
  border-radius: 14px;
  border:1px solid rgba(11,27,43,.08);
}
.table th,.table td{padding:10px 12px; text-align:left; border-bottom:1px solid rgba(11,27,43,.06); vertical-align:top}
.table th{background: rgba(31,111,235,.06)}
.table tr:last-child td{border-bottom:0}
.note{font-size:.95rem; color: var(--muted)}
.form-grid{
  display:grid; gap:12px;
  grid-template-columns: 1fr;
}
@media (min-width: 820px){
  .form-grid.two{grid-template-columns: 1fr 1fr}
}
label{display:block; font-weight:800; font-size:.95rem; margin-bottom:6px}
input, select, textarea{
  width:100%;
  padding:12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(11,27,43,.18);
  background:#fff;
  font: inherit;
}
textarea{min-height:140px; resize:vertical}
.help{margin-top:6px; color:var(--muted); font-size:.92rem}
.hr{
  height:1px; background: rgba(11,27,43,.08);
  margin: 18px 0;
}
.gallery{
  display:grid; gap:12px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 820px){
  .gallery{grid-template-columns: repeat(4, 1fr);}
}
.ph{
  aspect-ratio: 4/3;
  border-radius: 16px;
  background:
    radial-gradient(18px 18px at 30% 25%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%),
    linear-gradient(145deg, rgba(31,111,235,.25), rgba(255,210,77,.22));
  border: 1px dashed rgba(11,27,43,.20);
  display:flex; align-items:center; justify-content:center;
  color: rgba(11,27,43,.55);
  font-weight:800;
  text-align:center;
  padding:10px;
}
.skip{position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip:focus{left:18px; top:18px; width:auto; height:auto; background:#fff; padding:10px 12px; border-radius:12px; z-index:999; box-shadow: var(--shadow)}

.brand-logo{height:64px;width:auto;object-fit:contain;border-radius:10px;background:#fff;padding:2px;}
@media (min-width:900px){.brand-logo{height:80px;}}


/* === Mobile hamburger menu === */
.nav-wrap{display:flex;align-items:center;gap:14px;}
.hamburger{display:none;flex-direction:column;gap:6px;cursor:pointer;}
.hamburger span{width:28px;height:3px;background:#0b1b2b;border-radius:3px;}

@media (max-width:900px){
  nav{position:absolute;top:100%;right:18px;background:#fff;
      border-radius:18px;box-shadow:0 12px 30px rgba(0,0,0,.15);
      padding:14px;display:none;flex-direction:column;min-width:220px;}
  nav.open{display:flex;}
  nav a{padding:10px 14px;}
  .hamburger{display:flex;}
}


/* === Fix table alignment (prijzen) === */
.table th:first-child,
.table td:first-child{
  width:70%;
}

.table th:last-child,
.table td:last-child{
  width:30%;
  text-align:right;
  white-space:nowrap;
}


/* === Header fine-tuning === */
@media (max-width:900px){
  .hamburger{ margin-right:14px; }
  .navbar{ justify-content:center; }
  .brand{ margin:0 auto; }
  nav{ right:18px; }
}

.brand-logo{
  max-height:64px;
}


/* === Logo clean-up === */
.brand-logo{
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  max-height: 80px;
}

@media (max-width:900px){
  .brand-logo{
    max-height: 70px;
  }
}


/* === Mobile fix for menu tables === */
@media (max-width: 720px){
  .table thead{display:none;}
  .table tr{
    display:block;
    padding:10px 0;
    border-bottom:1px solid #e6e6e6;
  }
  .table td{
    display:flex;
    justify-content:space-between;
    width:100%;
    padding:6px 0;
    text-align:left !important;
  }
  .table td::before{
    content: attr(data-label);
    font-weight:600;
    opacity:.7;
  }
}


/* === Mobile fix for contact page === */
@media (max-width: 720px){
  .contact-grid{
    grid-template-columns: 1fr !important;
  }

  .contact-card{
    padding:14px;
  }

  .contact-card h3{
    margin-top:0;
  }

  /* Any tables on contact page */
  .contact table thead{display:none;}
  .contact table tr{
    display:block;
    border-bottom:1px solid #e6e6e6;
    padding:10px 0;
  }
  .contact table td{
    display:flex;
    justify-content:space-between;
    width:100%;
    padding:6px 0;
  }
}


/* Over-ons pictogrammen */
.card i{
  color:#1e88e5;
  margin-right:8px;
}


/* === DEFINITIVE mobile fix for over-ons === */
@media (max-width: 900px){
  .grid3,
  .over-ons-grid{
    display:grid !important;
    grid-template-columns: 1fr !important;
    gap:16px !important;
  }

  .over-ons .card{
    width:100% !important;
    margin:0 !important;
  }
}

/* Force Font Awesome icons visibility */
.fa-solid{
  display:inline-block;
  font-size:1.1em;
  vertical-align:middle;
}
/* Reiskosten melding */
.distance-warning{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 16px 0 8px;
  padding: 14px 16px;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  background: #f7f7f7;
  color: #333;
  font-size: 0.95rem;
  line-height: 1.4;
}

.distance-warning i{
  color: #f59e0b; /* subtiel waarschuwing-geel */
  font-size: 1.25rem;
  margin-top: 2px;
}