/* ============================================================
   PAVILJOEN DE BREEK — gedeeld stylesheet voor de hele site
   (index, kaart, evenementen, trouwen, over-ons, contact)
   Merkidentiteit o.b.v. Frank's brandbook: Dallas (koptekst) +
   GT Pressura LCGV Mono (broodtekst), navy / crème / blauwgrijs.
   ============================================================ */

@font-face{font-family:"Dallas"; src:url("fonts/Dallas-Light.otf") format("opentype"); font-weight:300; font-style:normal; font-display:swap}
@font-face{font-family:"Dallas"; src:url("fonts/Dallas-Bold.otf") format("opentype"); font-weight:700; font-style:normal; font-display:swap}
@font-face{font-family:"GT Pressura Mono"; src:url("fonts/GT-Pressura-Mono-Regular.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap}
@font-face{font-family:"GT Pressura Mono"; src:url("fonts/GT-Pressura-Mono-Bold.otf") format("opentype"); font-weight:700; font-style:normal; font-display:swap}

:root{
  /* Kleurcompositie: officieel De Breek-palet (Brandguide RGB, p.11) + afgeleide tinten */
  /* --paper-2/--linen (donkerdere tan, #E6DCC6/#DFD3B8) bewust niet meer gedefinieerd —
     komt nergens terug in het merk. Lichte secties zijn altijd --paper (De Breek Wit). */
  --paper:#EFE9DB;
  --bark:#243D55; --bark-2:#182838;
  --ink:#0E1924; --ink-soft:#4C5C6B;
  /* Frank (opmerkingen v1): --reed/--water en --sand/--gold waren geen officiële merkkleuren
     ("komt nergens terug") — teruggezet op de twee brandguide-hexen a9b9c1 / 243d55. */
  --reed:#A9B9C1; --water:#A9B9C1;
  --ember:#A9B9C1; --ember-deep:#8BA1AC; --sand:#A9B9C1; --gold:#A9B9C1;
  --line:rgba(14,25,36,.14);
  --maxw:1240px; --pad:clamp(20px,5vw,64px);
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0; background:var(--paper); color:var(--bark);
  font-family:"GT Pressura Mono",ui-monospace,monospace; font-weight:400;
  font-size:clamp(15px,1vw,17px); line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden}
.skip-link{position:fixed; left:16px; top:12px; z-index:100; padding:.8em 1.1em; background:var(--paper); color:var(--bark); transform:translateY(-160%); transition:transform .2s}
.skip-link:focus{transform:none}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3{font-family:"Dallas",Georgia,serif; font-weight:300; line-height:1.05; letter-spacing:-.01em; margin:0; text-wrap:balance}
h1{font-size:clamp(2.6rem,7.5vw,5.4rem)}
h2{font-size:clamp(2rem,4.6vw,3.2rem)}
h3{font-size:clamp(1.25rem,2.2vw,1.6rem)}
p{margin:0 0 1.1em}
.eyebrow{font-family:"GT Pressura Mono"; font-weight:700; font-size:.74rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ember-deep);
  display:inline-flex; align-items:center; gap:.7em}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--ember-deep); opacity:.7}
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad)}
.section{padding-block:clamp(64px,9vw,128px)}

.btn{display:inline-flex; align-items:center; gap:.6em; font-family:"GT Pressura Mono";
  font-weight:700; font-size:.84rem; letter-spacing:.05em; text-transform:uppercase; padding:1.15em 2.3em;
  border-radius:999px; border:2px solid transparent; cursor:pointer; transition:.35s ease; white-space:nowrap}
.btn-primary{background:var(--ember); color:var(--bark-2); box-shadow:0 10px 26px rgba(169,185,193,.32)}
.btn-primary:hover{background:var(--ember-deep); color:var(--paper); transform:translateY(-2px); box-shadow:0 14px 34px rgba(169,185,193,.44)}
.btn-ghost{border-color:currentColor; color:inherit}
.btn-ghost:hover{background:var(--ink); color:var(--paper); border-color:var(--ink); transform:translateY(-2px)}
.on-dark .btn-ghost:hover{background:var(--paper); color:var(--ink)}

/* Extra-forse CTA (band-caps op events/trouwen-teasers) */
.btn-lg{padding:1.3em 2.7em; font-size:.92rem; letter-spacing:.07em}

/* Optische uitlijning: een los knopje direct onder een alinea moet met zijn TEKST aansluiten op
   die alinea, niet met zijn rand — anders lijkt de knop naar rechts te zijn opgeschoven door zijn
   eigen padding. Verschuift alleen de eerste knop in zo'n stapel, niet knoppen die naast elkaar
   in een rij staan (die hebben dit optische probleem niet). */
.cta-flush-left > .btn:first-child{margin-inline-start:-2.3em}

/* NAV */
.nav{position:fixed; inset:0 0 auto 0; z-index:50; display:flex; align-items:center;
  justify-content:space-between; padding:18px var(--pad);
  transition:background .4s,padding .4s,box-shadow .4s}
.nav.solid{background:rgba(24,40,56,.92); backdrop-filter:blur(10px); padding-block:12px; box-shadow:0 1px 0 rgba(255,255,255,.06)}
.brand{display:flex; align-items:center; gap:.6em}
.brand img{height:30px; width:auto}
/* Frank: beide logo's (het echte woordmerk-bestand, geen font-benadering), groter en rustig synchroon wisselend */
.brand-swap{position:relative; display:inline-flex; align-items:center; height:44px}
.brand-swap .swap-word{height:44px; width:auto; animation:logoFadeA 10s ease-in-out infinite}
.brand-swap .swap-b{position:absolute; left:0; top:50%; height:44px; width:auto;
  transform:translateY(-50%); animation:logoFadeB 10s ease-in-out infinite}
@keyframes logoFadeA{0%,35%{opacity:1}50%,85%{opacity:0}100%{opacity:1}}
@keyframes logoFadeB{0%,35%{opacity:0}50%,85%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .brand-swap .swap-word{animation:none; opacity:1}
  .brand-swap .swap-b{animation:none; opacity:0}
}
.nav-links{display:flex; align-items:center; gap:clamp(14px,2vw,30px)}
.nav-links a:not(.btn){color:var(--paper); font-size:.82rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; opacity:.9; transition:opacity .25s; position:relative;
  text-shadow:0 1px 6px rgba(24,40,56,.5)}
.nav-links a:not(.btn):hover{opacity:1}
.nav-links a:not(.btn)::after{content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0; background:var(--ember); transition:width .3s}
.nav-links a:not(.btn):hover::after{width:100%}
.nav-links a.current:not(.btn){opacity:1}
.nav-links a.current:not(.btn)::after{width:100%}
.nav-toggle{display:none; background:none; border:0; color:var(--paper); cursor:pointer; padding:6px}
.nav-toggle svg{width:26px; height:26px}

/* HERO — volledig (homepage) */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; color:var(--paper); overflow:hidden}
.hero-bg{position:absolute; inset:0; z-index:0}
.hero-bg img{width:100%; height:100%; object-fit:cover; transform:scale(1.06); will-change:transform}
.hero-bg video{width:100%; height:100%; object-fit:cover}
.hero-bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(24,40,56,.86) 0%, rgba(24,40,56,.30) 42%, rgba(24,40,56,.12) 70%, rgba(24,40,56,.52) 100%)}
.hero-inner{position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad) clamp(48px,8vw,96px)}
.hero .eyebrow{color:var(--gold)}.hero .eyebrow::before{background:var(--gold)}
.hero h1{position:relative; margin:.18em 0 .55em; text-shadow:0 2px 40px rgba(0,0,0,.35)}
.hero h1 .it{font-weight:inherit; color:inherit} /* Frank: 1 kleur (De Breek wit), was te groot/te dik */
.hero .reflect{position:absolute; left:0; top:100%; width:100%;
  font-family:"Dallas"; font-weight:300; font-size:clamp(2.6rem,7.5vw,5.4rem); line-height:1.05;
  transform:scaleY(-1); transform-origin:top; opacity:.10; filter:blur(2px);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.7), transparent 70%);
          mask-image:linear-gradient(to bottom, rgba(0,0,0,.7), transparent 70%);
  pointer-events:none; user-select:none} /* puur decoratief, telt niet mee in de layout — botst niet meer met de tekst eronder */
.hero p.lead{max-width:48ch; font-size:1.05rem; color:rgba(239,233,219,.92); margin-bottom:1.8em}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap}
.scrollcue{position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:2;
  color:rgba(239,233,219,.7); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:8px}
.scrollcue .dot{width:1px; height:34px; background:linear-gradient(rgba(239,233,219,.7),transparent); animation:cue 2.2s infinite}
@keyframes cue{0%{opacity:0;transform:translateY(-8px)}40%{opacity:1}100%{opacity:0;transform:translateY(8px)}}

/* HERO — levende beeldenwissel (Ken Burns + crossfade) */
.hero-bg.carousel{position:absolute; inset:0; z-index:0}
.hero-bg.carousel .slide{position:absolute; inset:0; opacity:0; transition:opacity 1.6s ease}
.hero-bg.carousel .slide.is-active{opacity:1; z-index:1}
.hero-bg.carousel .slide img{width:100%; height:100%; object-fit:cover; animation:kenburns 9s ease-out forwards}
@keyframes kenburns{0%{transform:scale(1.0)}100%{transform:scale(1.09)}}
@media(prefers-reduced-motion:reduce){
  .hero-bg.carousel .slide img{animation:none}
}

/* HERO — sub-pagina (kleiner, met breadcrumbs) */
.hero.sub{min-height:78svh}
.hero.sub .hero-inner{padding-top:clamp(140px,20vw,220px)}
.hero.sub .hero-bg::after{background:linear-gradient(to top, rgba(24,40,56,.88) 0%, rgba(24,40,56,.34) 45%, rgba(24,40,56,.14) 70%, rgba(24,40,56,.4) 100%)}
.hero.sub h1{font-size:clamp(2.2rem,6.2vw,4.2rem)}
.hero.sub p.lead{max-width:52ch}
.crumbs{font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(239,233,219,.65); margin-bottom:1.3em; display:flex; gap:.5em; align-items:center}
.crumbs a{color:rgba(239,233,219,.9)} .crumbs a:hover{color:var(--ember)}

.wave{display:block; width:100%; height:auto; color:var(--paper); margin-top:-1px}
.wave.flip{transform:scaleY(-1)}

/* SPLIT helper */
.split{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(32px,5vw,72px); align-items:center}
.split.rev{grid-template-columns:1fr 1.05fr}
.split.rev .framed{order:2}
.framed{position:relative}
.framed img{width:100%; height:100%; object-fit:cover; border-radius:3px; aspect-ratio:4/5}
/* Frank: lijntje om de foto's kan weg */
.swan-motif{position:absolute; right:-8px; bottom:-34px; width:min(150px,34%); opacity:.9; pointer-events:none}

/* VERHAAL / algemene lichte tekstsectie */
.verhaal{background:var(--paper)}
.verhaal h2,.lichte-sectie h2{margin:.35em 0 .7em; color:var(--bark)}
.verhaal h2 .it,.lichte-sectie h2 .it{font-weight:700; color:var(--reed)}
.verhaal .body,.lichte-sectie .body{color:var(--ink-soft); max-width:52ch}
.signoff{font-family:"Dallas"; font-weight:700; font-size:1.25rem; color:var(--ember-deep); margin-top:1.4em}

/* AAN TAFEL / moments-grid */
.tafel{background:var(--bark-2); color:var(--paper)}
.tafel .eyebrow{color:var(--gold)}.tafel .eyebrow::before{background:var(--gold)}
.tafel h2{margin:.3em 0 .5em}
.tafel-intro{color:rgba(239,233,219,.78); max-width:56ch; margin-bottom:clamp(36px,5vw,60px)}
.moments{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(239,233,219,.14); border:1px solid rgba(239,233,219,.14); border-radius:4px; overflow:hidden}
.moment{background:var(--bark-2); padding:clamp(26px,3vw,40px)}
.moment .num{font-family:"Dallas"; font-weight:700; color:var(--ember); font-size:1rem}
.moment h3{margin:.5em 0 .4em}
.moment p{color:rgba(239,233,219,.72); font-size:.94rem; margin:0}
.tafel-foot{display:flex; flex-wrap:wrap; gap:18px; align-items:center; margin-top:clamp(34px,4vw,52px)}
.tafel-note{color:rgba(239,233,219,.6); font-size:.86rem}

/* MOMENTEN-CAROUSEL */
.momenten{background:var(--bark-2); color:var(--paper); overflow:hidden}
.momenten .kop{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:clamp(28px,4vw,48px); flex-wrap:wrap}
.momenten .kop .eyebrow{color:var(--gold)}.momenten .kop .eyebrow::before{background:var(--gold)}

.mcar{position:relative; border-radius:6px; overflow:hidden; aspect-ratio:16/8; box-shadow:0 24px 60px rgba(0,0,0,.35)}
.mcar .mslide{position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease; pointer-events:none}
.mcar .mslide.is-active{opacity:1; pointer-events:auto; z-index:1}
.mcar .mslide img{width:100%; height:100%; object-fit:cover; animation:kenburns 6.5s ease-out forwards}
.mcar .mslide::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(24,40,56,.85) 0%, rgba(24,40,56,.15) 55%, transparent 80%)}
.mcar .mcap{position:absolute; z-index:2; left:clamp(20px,4vw,44px); bottom:clamp(20px,4vw,40px); max-width:34ch}
.mcar .mcap .eyebrow{color:var(--gold); margin-bottom:.3em}.mcar .mcap .eyebrow::before{background:var(--gold)}
.mcar .mcap h3{font-size:clamp(1.3rem,2.6vw,1.9rem)}
.mcar .mcap a{display:inline-flex; margin-top:.6em; font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--ember); border-bottom:1px solid var(--ember); padding-bottom:2px}
.mcar .mcap a:hover{color:var(--paper); border-color:var(--paper)}
.mdots{display:flex; gap:18px; margin-top:22px; justify-content:center; align-items:center}
.mdots button{position:relative; background:none; border:0; padding:0 0 10px; cursor:pointer;
  font-family:"GT Pressura Mono"; font-size:.76rem; letter-spacing:.1em; color:rgba(239,233,219,.4); transition:color .3s}
.mdots button::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:rgba(239,233,219,.28)}
.mdots button.is-active{color:var(--ember)}
.mdots button.is-active::after{background:var(--ember)}
@media(max-width:880px){.mcar{aspect-ratio:4/5}}

/* LINK-DISCOVER */
.link-discover{display:inline-flex; align-items:center; gap:.5em; font-size:.76rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ember-deep); border-bottom:1px solid var(--ember-deep);
  padding-bottom:3px; transition:.3s ease}
.link-discover:hover{color:var(--ink); border-color:var(--ink); gap:.8em}
.on-dark .link-discover{color:var(--ember); border-color:var(--ember)}
.on-dark .link-discover:hover{color:var(--paper); border-color:var(--paper)}

/* IN DE BUURT — territorium-grid */
.buurt{background:var(--paper)}
.buurt h2{margin:.3em 0; color:var(--bark)}
.buurt-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,32px); margin-top:clamp(32px,4vw,52px)}
.buurt-card{display:block; color:inherit}
.buurt-img{border-radius:4px; overflow:hidden; aspect-ratio:3/4; position:relative}
.buurt-img img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease}
.buurt-card:hover .buurt-img img{transform:scale(1.05)}
.buurt-card .tag{display:block; margin-top:1em; font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ember-deep)}
.buurt-card h3{margin:.35em 0 0; font-size:1.2rem; color:var(--bark)}
@media(max-width:880px){.buurt-grid{grid-template-columns:1fr}}

/* PULL-QUOTE (editoriale citaatsectie) */
.pullquote{background:var(--paper); text-align:center}
.pullquote-mark{margin:0 auto 18px}
.pullquote blockquote{font-family:"Dallas"; font-weight:300; font-size:clamp(1.4rem,3.2vw,2.2rem); max-width:24ch; margin:0 auto; color:var(--bark); line-height:1.32}
.pullquote cite{display:block; margin-top:1.2em; font-style:normal; font-family:"GT Pressura Mono"; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ember-deep)}

/* BAND (volle breedte foto met caption) */
.band{position:relative; height:clamp(320px,52vw,560px); overflow:hidden}
.band img{width:100%; height:100%; object-fit:cover}
.band::after{content:""; position:absolute; inset:0; background:linear-gradient(to right,rgba(24,40,56,.55),transparent 55%)}
.band-cap{position:absolute; z-index:2; left:var(--pad); bottom:clamp(24px,4vw,48px); max-width:34ch; color:var(--paper)}
.band-cap .eyebrow{color:var(--gold)}.band-cap .eyebrow::before{background:var(--gold)}
.band-cap h3{font-size:clamp(1.5rem,2.8vw,2.1rem); margin-top:.3em}

/* PIZZA / KEUKEN split */
.pizza{background:var(--paper)}
.pizza .split{align-items:center}
.pizza h2{margin:.3em 0 .55em}
.pizza h2 .it{font-weight:700; color:var(--ember-deep)}
.pizza .body{color:var(--bark); font-size:.95rem; max-width:48ch} /* Frank: iets kleiner, 1 kleur De Breek Blauw */
.pizza .hero-cta .btn-ghost{color:var(--bark); border-color:var(--bark)}

/* PLACEHOLDER (foto's die nog komen) */
.ph{position:relative; display:flex; align-items:center; justify-content:center; text-align:center;
  background:var(--paper); border:1px dashed var(--line);
  color:var(--ink-soft); border-radius:3px; aspect-ratio:4/5; padding:24px}
.ph span{font-size:.86rem; letter-spacing:.04em; max-width:22ch}
.ph small{display:block; margin-top:.5em; opacity:.7; letter-spacing:.16em; text-transform:uppercase; font-size:.66rem}

/* generieke donkere sectie met stats (events/volledig afhuur) */
.donker{background:var(--bark-2); color:var(--paper)}
.donker .eyebrow{color:var(--gold)}.donker .eyebrow::before{background:var(--gold)}
.donker h2{margin:.3em 0 .6em}
.donker .body{color:rgba(239,233,219,.8); max-width:46ch}
.events{background:var(--bark-2); color:var(--paper)}
.events .split{align-items:center}
.events .eyebrow{color:var(--gold)}.events .eyebrow::before{background:var(--gold)}
.events h2{margin:.3em 0 .6em; font-size:clamp(1.7rem,3.3vw,2.6rem)}
.events .body{color:rgba(239,233,219,.8); max-width:46ch}
/* Frank: stats gecentreerd, als los kadertje ("zo maken graag") */
.stats{display:flex; gap:1px; margin:1.5em 0 1.8em; background:rgba(239,233,219,.14); border:1px solid rgba(239,233,219,.14); border-radius:4px; overflow:hidden; width:fit-content}
.stats>div{background:var(--bark-2); padding:1em 1.6em; text-align:center}
.stats b{font-family:"Dallas"; font-weight:700; font-size:1.9rem; display:block; color:var(--ember); line-height:1}
.stats span{font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(239,233,219,.62)}

/* WELKOM-lijstjes (events/trouwen) */
.evlist{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:1.6em 0 1.9em; list-style:none; padding:0}
.evlist ul{list-style:none; padding:0; margin:0; display:grid; gap:.7em}
.evlist li{display:flex; gap:.7em; align-items:flex-start; color:var(--ink-soft); font-size:.96rem}
.evlist li svg{width:16px; height:16px; margin-top:.35em; flex:none; color:var(--ember-deep)}
.evlist.on-dark li{color:rgba(239,233,219,.82)}
.evlist.on-dark li svg{color:var(--ember)}

/* Pagina-specifieke sectienamen */
.welkom{background:var(--paper)}
.welkom h2{margin:.35em 0 .7em; color:var(--bark)}
.welkom h2 .it{font-weight:700; color:var(--ember)}
.welkom .body{color:var(--bark); max-width:52ch}
.welkom-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:.4em}
.culinair{background:var(--paper)}
.culinair h2{margin:.3em 0 .55em; color:var(--bark)}
.culinair h2 .it{font-weight:700; color:var(--ember-deep)}
.culinair .body{color:var(--ink-soft); max-width:48ch}
.culinair .btn-ghost{color:var(--bark); border-color:var(--bark)}
.trouwen{background:var(--paper)}
.trouwen h2{margin:.35em 0 .7em; color:var(--bark)}
.trouwen h2 .it{font-weight:700; color:var(--ember)}
.trouwen .body{color:var(--bark); max-width:50ch}
.team{background:var(--paper)}
.team h2{margin:.35em 0 .7em; color:var(--bark); font-size:clamp(1.7rem,3.3vw,2.6rem)}
.team h2 .it{font-weight:700; color:var(--ember-deep)}
.team .body{color:var(--ink-soft); max-width:52ch}
.team .framed img{aspect-ratio:3/4; object-position:top}

/* Foto-strip (kleine mozaïek) */
.strip{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:clamp(30px,4vw,48px)}
.strip figure{margin:0; border-radius:3px; overflow:visible}
.strip figure .ph-crop{border-radius:3px; overflow:hidden; aspect-ratio:4/5; position:relative}
.strip img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.strip figure:hover img{transform:scale(1.06)}
.strip figcaption{margin-top:.6em; font-size:.82rem; color:var(--ink-soft); text-align:center; font-family:"Dallas"; font-weight:300}
.strip.on-dark figcaption{color:rgba(239,233,219,.72)}

/* categorie-kop voor de menukaart */
.cat-head{display:flex; align-items:baseline; gap:1em; margin:0 0 0; border-bottom:1px solid var(--line); padding-bottom:.6em}
.cat-head h3{font-size:clamp(1.4rem,2.4vw,1.8rem)}
.cat-head span{font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ember-deep); white-space:nowrap}
.cat-block+.cat-block{margin-top:clamp(48px,6vw,72px)}

/* Duo-afbeeldingen naast elkaar */
.duo{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.duo .framed img{aspect-ratio:3/4}

/* MENUKAART — jump nav */
.menu-jump{position:sticky; top:68px; z-index:40; background:rgba(239,233,219,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.menu-jump-inner{max-width:var(--maxw); margin:0 auto; padding:14px var(--pad); display:flex; gap:10px; overflow-x:auto; scrollbar-width:none}
.menu-jump-inner::-webkit-scrollbar{display:none}
.menu-jump a{flex:none; font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--bark); padding:.5em 1em; border-radius:999px; border:1px solid var(--line); transition:.25s}
.menu-jump a:hover{color:var(--ink); border-color:var(--ink)}
.menu-jump a.current{background:var(--ember); border-color:var(--ember); color:var(--bark-2)}

/* MENUKAART */
.menu-note{background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:1em 1.3em; font-size:.88rem; color:var(--bark); max-width:60ch; margin:0 0 clamp(40px,5vw,64px)}
.menu-note b{color:var(--bark)}
.menu-cats{display:grid; gap:clamp(48px,6vw,72px)}
.menu-cat-head{display:flex; align-items:baseline; gap:1em; margin-bottom:1.4em; border-bottom:1px solid var(--line); padding-bottom:.6em}
.menu-cat-head h2{font-size:clamp(1.6rem,2.8vw,2.1rem); color:var(--bark)}
.menu-cat-head span{font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ember-deep)}
.menu-items{display:grid; gap:1.5em; max-width:64ch}
.menu-item{display:flex; justify-content:space-between; gap:1.5em; align-items:baseline}
.menu-item .txt h3{font-size:1.1rem; font-family:"Dallas"; font-weight:700; margin-bottom:.2em; color:var(--bark)}
.menu-item .txt p{margin:0; color:var(--bark); font-size:.9rem; max-width:52ch}
.menu-item .prijs{font-family:"Dallas"; font-weight:300; color:var(--bark); white-space:nowrap; font-size:1.02rem}
.menu-cta{margin-top:clamp(48px,6vw,72px); display:flex; gap:16px; flex-wrap:wrap; align-items:center}
.on-dark .menu-cat-head{border-color:rgba(239,233,219,.18)}
.on-dark .menu-cat-head h2{color:var(--paper)}
.on-dark .menu-cat-head span{color:var(--ember)}
.on-dark .menu-item .txt h3{color:var(--paper)}
.on-dark .menu-item .txt p{color:rgba(239,233,219,.68)}
.on-dark .menu-item .prijs{color:var(--ember)}
.on-dark .menu-note{background:rgba(239,233,219,.06); border-color:rgba(239,233,219,.16); color:rgba(239,233,219,.72)}
.on-dark .menu-note b{color:var(--paper)}
.menu-cats-2{display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,5vw,64px)}
@media(max-width:880px){.menu-cats-2{grid-template-columns:1fr}}

/* CONTACTFORMULIER */
.form{display:grid; gap:1.1em; margin-top:1.6em}
.form .f2{display:grid; grid-template-columns:1fr 1fr; gap:1.1em}
.form label{display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bark); margin-bottom:.5em; font-weight:700}
.form input,.form textarea{width:100%; border:1px solid var(--line); background:var(--paper); border-radius:4px; padding:.85em 1em; font-family:"GT Pressura Mono"; font-size:.96rem; color:var(--bark)}
.form input:focus,.form textarea:focus{outline:2px solid var(--ember); outline-offset:1px}
.form textarea{resize:vertical; min-height:130px}
.form .hint{font-size:.78rem; color:var(--ink-soft); opacity:.75}
@media(max-width:560px){.form .f2{grid-template-columns:1fr}}

/* WAARDEN-GRID (over ons) */
.values{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:4px; overflow:hidden; margin-top:clamp(36px,5vw,56px)}
.value{background:var(--paper); padding:clamp(26px,3vw,40px)}
.value .num{font-family:"Dallas"; font-weight:700; color:var(--ember-deep); font-size:1rem}
.value h3{margin:.5em 0 .4em; font-size:1.2rem}
.value p{color:var(--ink-soft); font-size:.94rem; margin:0}
@media(max-width:880px){.values{grid-template-columns:1fr}}

/* ROUTE / BEREIKBAARHEID */
.route{background:var(--paper)}
.route .grid{display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(28px,4vw,60px); align-items:center}
.route h2{margin:.3em 0 .6em; color:var(--bark); font-size:clamp(1.7rem,3.3vw,2.6rem)}
.route .body{color:var(--ink-soft); max-width:46ch}
.route .pts{display:grid; gap:1.05em; margin:1.3em 0 1.6em}
.route .pt{display:flex; gap:.85em; align-items:flex-start}
.route .pt svg{width:20px; height:20px; color:var(--ember-deep); flex:none; margin-top:4px}
.route .pt b{font-weight:700}
.route .pt span{color:var(--ink-soft); font-size:.94rem; font-weight:500}
.route .map,.contact-map{border-radius:6px; overflow:hidden; box-shadow:0 18px 44px rgba(24,40,56,.16); border:1px solid var(--line)}
.route .map iframe,.contact-map iframe{display:block; width:100%; height:clamp(320px,42vw,460px); border:0}

/* CONTACT (kaart-sectie op homepage) */
.contact{background:var(--paper)}
.contact .grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,5vw,80px); align-items:center}
.contact h2{margin:.3em 0 .9em; color:var(--bark)}
.info{display:grid; gap:1.3em}
.info .row{display:flex; gap:1em; align-items:flex-start}
.info .k{font-weight:700; letter-spacing:.16em; text-transform:uppercase; font-size:.72rem; color:var(--ember-deep); min-width:120px; padding-top:.35em}
.info .v{font-family:"Dallas"; font-weight:700; font-size:1.15rem; color:var(--bark)}
.info .v a:hover{color:var(--ember-deep)}
.info .v small{display:block; font-family:"GT Pressura Mono"; font-weight:400; font-size:.9rem; color:var(--ink-soft)}
.contact-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:1.6em}
.contact-card{color:var(--paper); border-radius:6px; padding:clamp(30px,4vw,48px); position:relative; overflow:hidden; min-height:360px; display:flex; flex-direction:column; justify-content:flex-end}
.cc-bg{position:absolute; inset:0; z-index:0}
.cc-bg img{width:100%; height:100%; object-fit:cover}
.cc-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(24,40,56,.97) 0%, rgba(24,40,56,.9) 38%, rgba(24,40,56,.55) 62%, rgba(24,40,56,.2) 100%)}
.contact-card>*:not(.cc-bg){position:relative; z-index:1}
.contact-card .eyebrow{color:var(--gold)}.contact-card .eyebrow::before{background:var(--gold)}
.contact-card h3{margin:.4em 0 .3em; font-size:clamp(1.4rem,2.8vw,1.9rem)}
.contact-card p{color:rgba(239,233,219,.8); font-size:.93rem}

/* NOTITIE-STROOK */
.notitie{background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.notitie .wrap{padding-block:clamp(28px,4vw,40px); text-align:center}
.notitie p{margin:0; font-family:"Dallas"; font-weight:300; font-size:1.1rem; color:var(--ink-soft); max-width:64ch; margin-inline:auto}

/* VEELGESTELDE VRAGEN */
.faq{background:var(--paper)}
#faq-title,#event-faq-title{font-size:clamp(1.7rem,3.4vw,2.6rem); white-space:nowrap}
.faq-list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin-top:2.4em; background:var(--line); border:1px solid var(--line)}
.faq-item{background:var(--paper); padding:clamp(24px,3vw,38px)}
.faq-item h3{font-size:clamp(1.15rem,2vw,1.4rem); margin-bottom:.7em}
.faq-item p{color:var(--bark); margin:0}

/* NIEUWSBRIEF */
.newsletter{background:var(--bark-2); color:var(--paper)}
.newsletter .wrap{padding-block:clamp(44px,6vw,68px); display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,48px); align-items:center; justify-content:space-between}
.newsletter .nl-text{max-width:42ch}
.newsletter .nl-text h3{font-family:"Dallas"; font-weight:300; font-size:clamp(1.3rem,2.4vw,1.7rem); margin:0 0 .35em}
.newsletter .nl-text p{color:var(--paper); margin:0; font-size:.94rem}
.newsletter form{display:flex; flex-wrap:wrap; gap:10px; flex:none; width:min(100%,420px)}
.newsletter .newsletter-actions{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.newsletter input[type="email"]{flex:1 1 200px; border:1px solid rgba(239,233,219,.28); background:rgba(239,233,219,.06); border-radius:4px; padding:.9em 1.1em; font-family:"GT Pressura Mono"; font-size:.92rem; color:var(--paper)}
.newsletter input[type="email"]::placeholder{color:rgba(239,233,219,.5)}
.newsletter input[type="email"]:focus{outline:2px solid var(--ember); outline-offset:1px}
.newsletter .nl-note{width:100%; font-size:.76rem; color:rgba(239,233,219,.5); margin-top:.7em}

/* FOOTER */
.footer{background:var(--bark-2); color:rgba(239,233,219,.8)}
.footer .top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding:clamp(56px,7vw,84px) var(--pad) 40px; max-width:var(--maxw); margin:0 auto}
.footer-mark{display:block; margin-bottom:14px}
.footer .tagline{margin-top:.5em; font-family:"GT Pressura Mono"; color:var(--ember)}
.footer h4{font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ember); margin:0 0 1em; font-weight:700; font-family:"GT Pressura Mono"}
.footer a:hover{color:var(--paper)}
.footer .col p{margin:0 0 .5em; font-size:.94rem}
.footer .bottom{border-top:2px solid rgba(239,233,219,.22); padding:20px var(--pad); max-width:var(--maxw); margin:0 auto; display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; font-size:.78rem; color:rgba(239,233,219,.5)}

/* STICKY MOBILE CTA */
.mobicta{position:fixed; left:0; right:0; bottom:0; z-index:55; display:none; gap:10px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(24,40,56,.96); backdrop-filter:blur(8px);
  box-shadow:0 -2px 16px rgba(0,0,0,.25); transform:translateY(120%); transition:transform .4s ease}
.mobicta.show{transform:none}
.mobicta a{flex:1; justify-content:center}

/* REVEAL */
.animate-reveals .reveal{opacity:0; transform:translateY(26px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1)}
.animate-reveals .reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}

/* RESPONSIVE */
@media(max-width:880px){
  #kaart-title,#events-title{white-space:normal; font-size:clamp(1.8rem,6vw,2.4rem)}
  .split,.split.rev,.contact .grid,.route .grid{grid-template-columns:1fr}
  .split .framed,.split.rev .framed{order:-1}
  .framed img{aspect-ratio:16/11}
  .events .framed{order:-1}
  .swan-motif{display:none}
  .moments{grid-template-columns:1fr}
  .faq-list{grid-template-columns:1fr}
  #faq-title,#event-faq-title{white-space:normal; font-size:clamp(1.7rem,6vw,2.2rem)}
  .evlist{grid-template-columns:1fr}
  .duo{grid-template-columns:1fr}
  .strip{grid-template-columns:repeat(2,1fr)}
  .footer .top{grid-template-columns:1fr 1fr}
  .mobicta{display:flex}
  .menu-item{flex-direction:column; gap:.3em}
  .nav-links{position:fixed; inset:0 0 0 auto; width:min(82vw,340px); background:rgba(24,40,56,.98);
    backdrop-filter:blur(8px); flex-direction:column; align-items:flex-start; justify-content:center;
    gap:26px; padding:48px; transform:translateX(100%); transition:transform .4s ease; z-index:60}
  .nav-links.open{transform:none}
  .nav-links a:not(.btn){font-size:1.05rem}
  .nav-toggle{display:block; z-index:61}
}
@media(max-width:560px){
  .footer .top{grid-template-columns:1fr}
  .info .row{flex-direction:column; gap:.2em}
  .info .k{padding-top:0}
  .stats>div{padding:.9em 1.1em}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
  .reveal{opacity:1; transform:none}
  html{scroll-behavior:auto}
  .hero-bg img{transform:none}
}
a:focus-visible,.btn:focus-visible,button:focus-visible{outline:2px solid var(--ember); outline-offset:3px; border-radius:4px}

/* Keep the decorative scroll hint clear of the mobile action buttons. */
@media(max-width:880px){.scrollcue{display:none}}

@media(max-width:560px){.btn{max-width:100%;white-space:normal;text-align:center;justify-content:center}.hero h1{overflow-wrap:normal}}


/* Allow long contact addresses to wrap on narrow screens. */
@media(max-width:880px){.grid>*{min-width:0}.info .v{min-width:0;overflow-wrap:anywhere}.info a{overflow-wrap:anywhere}}

/* Formulier en toetsenbordbediening */
.form-trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#formStatus:not(:empty){padding:1em;border:1px solid currentColor;line-height:1.6}
button:disabled{opacity:.65;cursor:wait}
:focus-visible{outline:3px solid var(--ember);outline-offset:5px}
@media(max-width:880px){.nav-links:not(.open){visibility:hidden}.nav-links.open{visibility:visible}}

.footer .top.top-three{grid-template-columns:1.4fr 1fr 1fr}
.split>*{min-width:0}
.footer .col,.body{overflow-wrap:anywhere}
@media(max-width:880px){.footer .top.top-three{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer .top.top-three{grid-template-columns:1fr}}

.info{min-width:0}.info .row,.info .v{min-width:0}.info a{overflow-wrap:anywhere}