:root{
  --olive:#6B7A4F;
  --olive-dark:#4E5A3B;
  --cream:#F7F2E8;
  --warm:#FFFBF3;
  --ink:#2B2B2B;
  --muted:#6E6E6E;
  --accent:#D9A066;
  --accent-soft:#E7BF8D;
  --line:#E4DDCB;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  color:var(--ink);
  background:var(--warm);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:Georgia,'Times New Roman', serif; font-weight:400; letter-spacing:.3px; }
h1{ font-size:clamp(2.4rem, 5.5vw, 4.2rem); line-height:1.08; }
h2{ font-size:clamp(1.9rem, 3.6vw, 2.8rem); margin-bottom:1rem; color:var(--olive-dark); }
h3{ font-size:1.3rem; margin-bottom:.5rem; color:var(--olive-dark); }
h4{ font-size:1.05rem; }
p{ margin-bottom:1rem; }
a{ color:var(--olive-dark); text-decoration:none; }
img{ max-width:100%; display:block; }
.container{ max-width:1200px; margin:0 auto; padding:0 24px; }
.kicker{
  display:inline-block;
  text-transform:uppercase; letter-spacing:3px; font-size:.78rem; font-weight:700;
  color:var(--accent); margin-bottom:12px;
}

/* —— NAV —— */
nav{
  position:sticky; top:0; z-index:100;
  background:rgba(255,251,243,.96);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 24px; max-width:1200px; margin:0 auto; gap:16px;
}
.logo{
  font-family:Georgia, serif;
  font-size:1.35rem; font-weight:700; letter-spacing:3px;
  color:var(--olive-dark); white-space:nowrap;
}
.logo span{ color:var(--accent); }
.nav-links{ display:flex; gap:28px; align-items:center; }
.nav-links a{
  font-size:.9rem; text-transform:uppercase; letter-spacing:1.2px;
  transition:color .2s; color:var(--ink);
  position:relative;
}
.nav-links a:hover{ color:var(--accent); }
.nav-links a.active{ color:var(--accent); }
.nav-links a.active::after{
  content:''; position:absolute; bottom:-6px; left:0; right:0;
  height:2px; background:var(--accent);
}
.cta{
  background:var(--olive); color:#fff !important;
  padding:10px 22px; border-radius:2px;
  text-transform:uppercase; letter-spacing:1.2px; font-size:.8rem; font-weight:600;
  transition:background .2s; white-space:nowrap;
}
.cta:hover{ background:var(--olive-dark); }
.menu-toggle{
  display:none; background:none; border:none;
  font-size:1.5rem; cursor:pointer; color:var(--olive-dark);
}

/* —— HERO —— */
.hero{
  min-height:88vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:90px 24px;
  background-color:#4E5A3B;
  background-image:
    linear-gradient(rgba(43,43,43,.55), rgba(43,43,43,.55)),
    url('photos/hero.jpg'),
    radial-gradient(circle at 30% 35%, #c7b89a, #4E5A3B 80%);
  background-size: cover, cover, cover;
  background-position: center, center, center;
  color:#fff; position:relative; overflow:hidden;
}
.hero-content{ max-width:860px; position:relative; z-index:2; }
.hero .kicker{
  color:#fff;
  border:1px solid rgba(255,255,255,.55);
  padding:6px 18px; font-size:.78rem;
  background:rgba(255,255,255,.05);
}
.hero h1{ margin-bottom:20px; color:#fff; }
.hero p.lead-hero{
  font-size:1.2rem; max-width:680px; margin:0 auto 34px;
  color:rgba(255,255,255,.92);
}
.hero-buttons{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.btn{
  display:inline-block; padding:14px 32px;
  text-transform:uppercase; letter-spacing:2px; font-size:.82rem; font-weight:600;
  border-radius:2px; transition:all .25s; cursor:pointer; border:none;
}
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:#c58d4f; transform:translateY(-2px); }
.btn-secondary{ background:transparent; color:#fff; border:2px solid #fff; }
.btn-secondary:hover{ background:#fff; color:var(--olive-dark); }
.hero-domain{
  position:absolute; bottom:22px; left:0; right:0;
  font-size:.78rem; letter-spacing:3px; text-transform:uppercase;
  color:rgba(255,255,255,.75); text-align:center;
}
.hero-domain strong{ color:var(--accent); font-weight:600; }

/* —— PAGE HERO (kleinere hero voor subpagina's) —— */
.page-hero{
  min-height:46vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:80px 24px;
  background-color:#4E5A3B;
  background-size: cover, cover;
  background-position: center, center;
  color:#fff; position:relative;
}
.page-hero h1{ font-size:clamp(2rem, 4.5vw, 3.4rem); color:#fff; margin-bottom:14px; }
.page-hero p{ font-size:1.05rem; max-width:600px; margin:0 auto; color:rgba(255,255,255,.9); }
.page-hero .kicker{
  color:#fff;
  border:1px solid rgba(255,255,255,.55);
  padding:6px 18px; font-size:.78rem;
  background:rgba(255,255,255,.05); margin-bottom:20px;
}

/* —— MARQUEE —— */
.marquee{
  background:var(--olive-dark); color:#fff;
  padding:16px 0; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.1);
}
.marquee-track{
  display:flex; gap:48px; white-space:nowrap;
  animation:scroll 40s linear infinite;
  font-size:.82rem; letter-spacing:2.5px; text-transform:uppercase;
}
.marquee-track span{ display:flex; align-items:center; gap:48px; }
.marquee-track span::after{ content:'✦'; color:var(--accent); }
@keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* —— SECTIONS —— */
section{ padding:100px 0; }
.section-cream{ background:var(--cream); }
.section-header{ text-align:center; max-width:740px; margin:0 auto 60px; }
.lead{ font-size:1.1rem; color:var(--muted); }

/* —— ABOUT GRID —— */
.about-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;
}
.photo{
  position:relative; overflow:hidden; border-radius:2px;
  background-color:#4E5A3B;
  background-size:cover; background-position:center;
}
.photo.tall{ aspect-ratio:4/5; }
.photo.wide{ aspect-ratio:3/2; }
.photo.square{ aspect-ratio:1; }
.photo::after{
  content:''; position:absolute; inset:12px;
  border:1px solid rgba(255,255,255,.35);
  pointer-events:none;
}
.photo .photo-label{
  position:absolute; left:0; right:0; bottom:0;
  padding:14px 18px;
  background:linear-gradient(to top, rgba(43,43,43,.75), transparent);
  color:#fff; font-family:Georgia, serif; font-style:italic; font-size:.92rem;
  opacity:.95;
}

/* —— SERVICES —— */
.services-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:28px;
}
.service-card{
  background:#fff; padding:40px 32px;
  border:1px solid var(--line); border-top:3px solid var(--olive);
  transition:transform .3s, box-shadow .3s;
  display:flex; flex-direction:column;
}
.service-card.featured{ border-top-color:var(--accent); box-shadow:0 8px 24px rgba(43,43,43,.06); }
.service-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 32px rgba(43,43,43,.1);
}
.service-icon{
  font-family:Georgia, serif; font-size:2.6rem; color:var(--accent);
  margin-bottom:14px; line-height:1;
}
.service-card ul{ list-style:none; margin-top:16px; margin-bottom:20px; }
.service-card li{
  padding:8px 0; font-size:.95rem; color:var(--muted);
  border-bottom:1px solid var(--line);
}
.service-card li:last-child{ border-bottom:none; }
.service-card .price-block{
  margin-top:auto; padding-top:16px;
  font-family:Georgia, serif; font-size:1.5rem; color:var(--olive-dark);
}
.service-card .price-block small{
  display:block; font-family:Helvetica, Arial, sans-serif;
  font-size:.7rem; color:var(--muted);
  text-transform:uppercase; letter-spacing:1.5px; margin-bottom:4px;
}
.service-card .card-link{
  margin-top:20px; font-size:.82rem; color:var(--accent);
  font-weight:600; letter-spacing:2px; text-transform:uppercase;
}

/* —— PACKAGES TABLE —— */
.packages-table{
  width:100%; border-collapse:collapse;
  background:#fff; border:1px solid var(--line);
}
.packages-table th, .packages-table td{
  padding:18px 20px; text-align:left;
  border-bottom:1px solid var(--line);
}
.packages-table th{
  background:var(--olive); color:#fff; font-weight:500;
  text-transform:uppercase; letter-spacing:1.5px; font-size:.78rem;
}
.packages-table tr:last-child td{ border-bottom:none; }
.packages-table tr:nth-child(even) td{ background:var(--cream); }
.packages-table .pkg{ font-family:Georgia, serif; font-weight:600; color:var(--olive-dark); font-size:1.05rem; }
.packages-table .price-col{ font-family:Georgia, serif; color:var(--olive-dark); white-space:nowrap; font-weight:600; }

/* —— GALLERY —— */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows: 260px;
  gap:14px;
}
.gallery-item{
  position:relative; overflow:hidden;
  background-color:#6B7A4F;
  background-size:cover; background-position:center;
  transition:transform .3s, filter .3s;
  display:flex; align-items:flex-end;
}
.gallery-item:hover{ transform:scale(1.02); filter:brightness(1.08); }
.gallery-item .gallery-label{
  position:relative; z-index:2;
  width:100%; padding:14px 18px;
  background:linear-gradient(to top, rgba(43,43,43,.8), transparent);
  color:#fff; font-family:Georgia, serif; font-style:italic; font-size:.9rem;
}
.gallery-item.tall{ grid-row:span 2; }
.gallery-item.wide{ grid-column:span 2; }

.g1{ background-image:url('photos/biertap.jpg'), linear-gradient(135deg, #a3ae83, #4E5A3B); }
.g2{ background-image:url('photos/charcuterie.jpg'), linear-gradient(135deg, #d9c9a7, #8a7d65); }
.g3{ background-image:url('photos/burger.jpg'), linear-gradient(135deg, #3d3832, #1a1613); }
.g4{ background-image:url('photos/wk-oranje.jpg'), linear-gradient(135deg, #f0a050, #c56d24); }
.g5{ background-image:url('photos/champagne.jpg'), linear-gradient(135deg, #2a2422, #0f0c0a); }
.g6{ background-image:url('photos/festival.jpg'), linear-gradient(135deg, #a89a7d, #5a4f3e); }
.g7{ background-image:url('photos/bruiloft.jpg'), linear-gradient(135deg, #c7b89a, #6f6250); }
.g8{ background-image:url('photos/village.jpg'), linear-gradient(135deg, #8e9d72, #3a4429); }
.about-photo{ background-image:url('photos/about.jpg'), linear-gradient(135deg, #c7b89a, #6f6250); }
.concept-photo{ background-image:url('photos/concept.jpg'), linear-gradient(135deg, #a89a7d, #5a4f3e); }
.verkoop-photo{ background-image:url('photos/verkoop.jpg'), linear-gradient(135deg, #c7b89a, #6f6250); }

/* —— WHY —— */
.why-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:40px;
}
.why-item{ text-align:center; padding:0 12px; }
.why-number{
  font-family:Georgia, serif; font-size:3rem; color:var(--accent);
  display:block; margin-bottom:14px; line-height:1;
}
.why-item h3{ margin-bottom:10px; }
.why-item p{ color:var(--muted); font-size:.96rem; }

/* —— TESTIMONIALS —— */
.testimonials{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:28px;
}
.testimonial{
  background:#fff; padding:36px;
  border-left:3px solid var(--accent);
  font-style:italic; color:var(--muted);
}
.testimonial p{ margin-bottom:18px; line-height:1.7; }
.testimonial-author{
  font-style:normal; font-weight:600; color:var(--ink);
  font-size:.9rem; letter-spacing:.3px;
}

/* —— SALE / VERKOOP (dark) —— */
.sale-hero{
  background-color:var(--olive-dark);
  background-image:
    linear-gradient(rgba(78,90,59,.92), rgba(78,90,59,.94)),
    url('photos/verkoop.jpg'),
    radial-gradient(circle at 70% 30%, #c7b89a, #4E5A3B 80%);
  background-size:cover; background-position:center;
  color:#fff; padding:100px 24px; text-align:center;
}
.sale-hero h2{ color:#fff; }
.sale-hero p.lead-dark{ max-width:660px; margin:0 auto 32px; color:rgba(255,255,255,.85); font-size:1.08rem; }
.sale-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:22px;
  max-width:1080px; margin:40px auto 0;
}
.sale-card{
  background:rgba(255,255,255,.08);
  padding:32px 28px;
  border:1px solid rgba(255,255,255,.2);
  color:#fff; text-align:left;
  transition:background .25s, transform .25s;
}
.sale-card:hover{ background:rgba(255,255,255,.13); transform:translateY(-3px); }
.sale-card h3{ color:#fff; }
.sale-card .price-tag{
  font-family:Georgia, serif; font-size:1.9rem; margin:14px 0; color:var(--accent);
}
.sale-card ul{ list-style:none; font-size:.92rem; }
.sale-card li{ padding:5px 0; opacity:.92; }
.sale-card li::before{ content:'— '; color:var(--accent); }

/* —— CONTACT / FORM —— */
.contact-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start;
}
.contact-info h3{ margin-bottom:8px; }
.contact-info .intro{ color:var(--muted); margin-bottom:28px; }
.detail{
  display:flex; gap:16px; align-items:center; margin-bottom:0;
  padding:12px 0; border-bottom:1px solid var(--line);
}
.detail:last-of-type{ border-bottom:none; }
.detail strong{ min-width:110px; color:var(--olive-dark); font-size:.78rem;
  text-transform:uppercase; letter-spacing:1.5px; font-weight:600; }
.detail a, .detail span{ color:var(--ink); font-size:.98rem; }
form{ display:flex; flex-direction:column; gap:14px; }
label{ font-size:.78rem; text-transform:uppercase; letter-spacing:1.5px; color:var(--olive-dark); margin-bottom:6px; display:block; font-weight:600; }
input, select, textarea{
  width:100%;
  padding:12px 14px; border:1px solid var(--line); background:#fff;
  font-family:inherit; font-size:1rem; border-radius:2px;
  transition:border-color .2s;
}
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--olive); }
textarea{ min-height:120px; resize:vertical; }
form button{ margin-top:10px; align-self:flex-start; }

/* —— FOOTER —— */
footer{
  background:var(--olive-dark); color:#fff; padding:70px 24px 30px;
}
.footer-grid{
  display:grid; grid-template-columns:2fr 1fr; gap:40px;
  max-width:1200px; margin:0 auto;
}
footer a{ word-break:break-word; overflow-wrap:break-word; }
.footer-brand .logo{ color:#fff; font-size:1.5rem; }
.footer-brand p{ margin-top:14px; opacity:.82; max-width:340px; line-height:1.65; }
footer h4{
  font-family:Georgia, serif; margin-bottom:16px;
  color:var(--accent); font-weight:400; font-size:1.05rem;
}
footer a{ color:#fff; opacity:.85; display:block; padding:4px 0; font-size:.92rem; }
footer a:hover{ opacity:1; color:var(--accent); }
.footer-bottom{
  max-width:1200px; margin:50px auto 0;
  padding-top:24px; border-top:1px solid rgba(255,255,255,.15);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:.82rem; opacity:.75;
}

/* —— Responsive —— */
@media (max-width:980px){
  .gallery-grid{ grid-template-columns:repeat(3, 1fr); grid-auto-rows:220px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  .nav-links{ display:none; }
  .nav-links.open{
    display:flex; position:absolute; top:100%; right:0; left:0;
    flex-direction:column; background:var(--warm); padding:20px 24px; gap:16px;
    border-bottom:1px solid var(--line);
  }
  .menu-toggle{ display:block; }
  .about-grid, .contact-grid{ grid-template-columns:1fr; gap:40px; }
  .footer-grid{ grid-template-columns:1fr; }
  section{ padding:70px 0; }
  .packages-table thead{ display:none; }
  .packages-table, .packages-table tbody, .packages-table tr, .packages-table td{ display:block; width:100%; }
  .packages-table tr{ border-bottom:1px solid var(--line); padding:14px 0; }
  .packages-table tr:nth-child(even) td{ background:transparent; }
  .packages-table td{ padding:4px 14px; border:none; font-size:.95rem; }
  .packages-table .pkg{ font-size:1.1rem; padding-top:6px; padding-bottom:6px; }
  .packages-table .price-col{ font-size:1.05rem; padding-top:6px; padding-bottom:6px; color:var(--accent); }
  .gallery-grid{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:200px; }
  .gallery-item.wide{ grid-column:span 2; }
  .gallery-item.tall{ grid-row:span 1; }
  .hero{ min-height:72vh; padding:70px 20px; }
  .nav-inner{ padding:14px 20px; }
  .logo{ font-size:1.15rem; letter-spacing:2.5px; }
  .cta{ padding:10px 16px; font-size:.75rem; }
}

.photo-label, .gallery-label { display: none; }
/* Language toggle (flags on homepage hero, top right) */
.lang-toggle{
  position:absolute;
  top:24px;
  right:24px;
  z-index:30;
  display:flex;
  gap:10px;
  align-items:center;
  background:rgba(255,255,255,.85);
  padding:8px 12px;
  border-radius:999px;
  backdrop-filter:blur(4px);
  box-shadow:0 2px 14px rgba(0,0,0,.18);
}
.lang-toggle a{
  font-size:1.6rem;
  line-height:1;
  text-decoration:none;
  opacity:.55;
  filter:grayscale(40%);
  transition:opacity .2s ease, transform .2s ease, filter .2s ease;
}
.lang-toggle a:hover{ opacity:1; transform:scale(1.18); filter:none; }
.lang-toggle a.active{ opacity:1; filter:none; }
@media (max-width:768px){
  .lang-toggle{ top:14px; right:14px; padding:6px 10px; gap:6px; }
  .lang-toggle a{ font-size:1.3rem; }
}