:root{--ivory:#f2eee6;--ink:#111;--red:#a52b22;--line:rgba(17,17,17,.16)}
*{box-sizing:border-box}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:"DM Sans",sans-serif}
a{color:inherit;text-decoration:none}
.header{display:flex;justify-content:space-between;align-items:center;padding:28px 40px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(242,238,230,.96);backdrop-filter:blur(10px);z-index:10}
.brand,.back{font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.hero{padding:90px clamp(28px,6vw,96px) 80px;display:grid;grid-template-columns:.8fr 1.2fr;gap:8vw}
.kicker{color:var(--red);font-size:10px;letter-spacing:.22em;text-transform:uppercase}
h1{font-family:"Oswald",sans-serif;text-transform:uppercase;font-size:clamp(72px,10vw,160px);line-height:.86;letter-spacing:-.04em;margin:0}
.intro{max-width:650px;font-size:20px;line-height:1.55;align-self:end}
.section{padding:76px clamp(28px,6vw,96px);border-top:1px solid var(--line)}
.section-head{display:grid;grid-template-columns:.7fr 1.3fr;gap:7vw;margin-bottom:50px}
.section h2{font-family:"Libre Caslon Display",serif;font-size:clamp(42px,5vw,76px);font-weight:400;letter-spacing:-.035em;margin:0}
.section-note{max-width:720px;line-height:1.7}
.directie-photo{margin-top:34px;width:100%;max-width:980px;aspect-ratio:4/3;object-fit:cover;display:block}
.directie-caption{font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.58;margin-top:10px}
.people{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line)}
.person{padding:28px 30px 30px 0;border-bottom:1px solid var(--line);min-height:118px}
.person:nth-child(odd){border-right:1px solid var(--line)}
.person:nth-child(even){padding-left:30px}
.person h3{font-family:"Libre Caslon Display",serif;font-size:25px;font-weight:400;margin:0 0 9px}
.person p{margin:0;font-size:13px;line-height:1.6;opacity:.72;max-width:620px}
.partner-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.partner{background:var(--ivory);padding:22px;font-size:13px;min-height:76px;display:flex;align-items:center}
.footer{background:#0b0b0b;color:#f2eee6;padding:54px clamp(28px,6vw,96px);display:flex;justify-content:space-between;gap:30px;font-size:12px}
@media(max-width:800px){
  .hero,.section-head{grid-template-columns:1fr}
  .people{grid-template-columns:1fr}
  .person{border-right:0!important;padding-left:0!important}
  .partner-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:540px){
  .header{padding:22px}
  .partner-grid{grid-template-columns:1fr}
  .hero{padding-top:60px}
}

.section[id]{scroll-margin-top:92px;}

body::after{
  content:"";
  position:fixed;
  z-index:9999;
  left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,#111 0 50%,#a52b22 50% 100%);
  pointer-events:none;
}
.nav-item{
  position:relative;
}
.nav-item-org{
  padding-bottom:12px;
  margin-bottom:-12px;
}
.nav-trigger{
  display:inline-block;
}
.nav-submenu{
  position:absolute;
  top:100%;
  left:-14px;
  min-width:220px;
  padding:12px 0;
  background:rgba(11,11,11,.98);
  color:#f2eee6;
  border:1px solid rgba(255,255,255,.12);
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  pointer-events:none;
  transition:opacity .16s ease, transform .16s ease, visibility .16s ease;
  z-index:1000;
}
.nav-submenu::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-14px;
  height:14px;
}
.nav-submenu a{
  display:block;
  padding:10px 14px;
  white-space:nowrap;
  font-size:10px;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.nav-submenu a:hover{
  background:rgba(255,255,255,.08);
}
.nav-item-org:hover .nav-submenu,
.nav-item-org:focus-within .nav-submenu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}
@media(max-width:900px){
  .site-nav{display:none}
}
.nav-trigger{
  appearance:none;border:0;background:none;color:inherit;
  display:flex;align-items:center;gap:8px;padding:0;cursor:pointer;
  font:500 9px/1 "DM Sans",sans-serif;
  letter-spacing:.13em;text-transform:uppercase;
}
.nav-trigger i{
  width:5px;height:5px;border-radius:50%;background:#bd3b30;
  display:block;transition:transform .25s ease;
}
.compact-subitem{display:block}
.compact-org-trigger{
  appearance:none;border:0;width:100%;background:none;color:#f4f0e8;
  padding:12px 14px;border-radius:12px;display:flex;
  justify-content:space-between;align-items:center;cursor:pointer;
  font:500 10px/1 "DM Sans",sans-serif;letter-spacing:.12em;text-transform:uppercase;
}
.compact-org-trigger:hover{background:rgba(255,255,255,.08)}
.compact-org-trigger span{color:#bd3b30;font-size:14px;line-height:1}
.compact-submenu{display:none;padding:2px 6px 7px 12px}
.compact-subitem.is-open .compact-submenu{display:block}
.compact-submenu a{padding:9px 12px;font-size:9px;opacity:.82}
.compact-submenu a:hover{opacity:1}

/* Header Organisation submenu: no dead hover gap */
.site-nav .nav-item-org{position:relative;padding-bottom:14px;margin-bottom:-14px}
.site-nav .nav-submenu{
  top:100%;
  margin-top:0;
}
.site-nav .nav-submenu::before{
  content:"";
  position:absolute;
  left:0;right:0;
  top:-16px;height:16px;
}
.site-nav .nav-item-org:hover .nav-submenu,
.site-nav .nav-item-org:focus-within .nav-submenu{
  opacity:1;visibility:visible;pointer-events:auto;transform:none;
}




/* v25: top header is only visible at the top of the page; no separator line */
.header{
  border-bottom:0 !important;
  transition:opacity .22s ease, transform .22s ease !important;
}
.header.header-hidden{
  opacity:0 !important;
  transform:translateY(-110%) !important;
  pointer-events:none !important;
}


/* v27: Organisation submenu stays open across the full hover/focus zone */
.site-nav .nav-item-org{
  position:relative;
  padding-bottom:18px;
  margin-bottom:-18px;
}
.site-nav .nav-item-org::after{
  content:"";
  position:absolute;
  left:-18px;
  right:-18px;
  top:100%;
  height:24px;
}
.site-nav .nav-submenu{
  top:calc(100% + 6px) !important;
  margin-top:0 !important;
  padding-top:14px !important;
}
.site-nav .nav-submenu::before{
  content:"";
  position:absolute;
  left:-18px;
  right:-18px;
  top:-28px;
  height:28px;
}
.site-nav .nav-item-org:hover .nav-submenu,
.site-nav .nav-item-org:focus-within .nav-submenu,
.site-nav .nav-submenu:hover{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:none !important;
}

.site-nav .nav-item-org.submenu-open .nav-submenu{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:none !important;
}


/* definitive Organisation dropdown */
.nav-item-org,.hero-org-item{position:relative}
.nav-item-org:hover .nav-submenu,
.nav-item-org:focus-within .nav-submenu,
.nav-item-org.submenu-open .nav-submenu,
.hero-org-item:hover .hero-submenu,
.hero-org-item:focus-within .hero-submenu,
.hero-org-item.submenu-open .hero-submenu{
 opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important
}
.nav-item-org .nav-submenu::before,.hero-org-item .hero-submenu::before{
 content:"";position:absolute;left:-24px;right:-24px;top:-32px;height:32px
}


/* v38 unified menu behavior */
.page-hero-menu{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1100;
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
  padding:26px 34px 0;
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
.page-hero-menu.is-hidden{
  opacity:0;
  transform:translateY(-18px);
  pointer-events:none;
}
.page-hero-nav{
  display:flex;
  align-items:center;
  gap:22px;
  color:inherit;
  pointer-events:auto;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.page-hero-nav a{
  text-decoration:none;
  color:inherit;
  white-space:nowrap;
}
.page-org-item{
  position:relative;
  padding-bottom:14px;
  margin-bottom:-14px;
}
.page-org-submenu{
  position:absolute;
  top:100%;
  right:0;
  min-width:220px;
  padding:10px;
  border-radius:14px;
  background:rgba(12,12,12,.94);
  color:#f2eee6;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
}
.page-org-submenu::before{
  content:"";
  position:absolute;
  left:0; right:0; top:-16px; height:16px;
}
.page-org-submenu a{
  display:block;
  padding:9px 11px;
  border-radius:9px;
}
.page-org-submenu a:hover{
  background:rgba(255,255,255,.08);
}
.page-org-item:hover .page-org-submenu,
.page-org-item:focus-within .page-org-submenu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none;
}

@media(max-width:900px){
  .page-hero-menu{display:none}
}


#directie,#bestuur,#raad-van-advies,#comite,#partners,#sponsoren,#transparantie{
  scroll-margin-top:84px;
}

/* v39: after navigation/deep-link, top hero menu is visible first.
   The compact P/T menu only takes over after deliberate scrolling. */
.page-hero-menu.force-visible,
.header.force-visible{
  opacity:1 !important;
  transform:none !important;
  pointer-events:auto !important;
}


/* v40 — authoritative deep-section landing navigation */
.deep-landing-hero-menu{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:2147483000;
  display:flex;
  justify-content:flex-end;
  padding:27px 34px 0;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
  transform:translateY(-10px);
}
.deep-landing-hero-menu.is-active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none;
}
.deep-landing-nav{
  display:flex;
  align-items:center;
  gap:22px;
  color:#111;
  font:500 10px/1 "DM Sans",sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.deep-landing-nav a{
  color:inherit;
  text-decoration:none;
  white-space:nowrap;
}
.deep-org-item{
  position:relative;
  padding-bottom:16px;
  margin-bottom:-16px;
}
.deep-org-submenu{
  position:absolute;
  top:100%;
  right:0;
  min-width:225px;
  padding:10px;
  border-radius:14px;
  background:rgba(12,12,12,.96);
  color:#F2EEE6;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(6px);
  transition:.16s ease;
}
.deep-org-submenu::before{
  content:"";
  position:absolute;
  left:0;right:0;top:-18px;height:18px;
}
.deep-org-submenu a{
  display:block;
  padding:10px 12px;
  border-radius:9px;
}
.deep-org-submenu a:hover{background:rgba(255,255,255,.08)}
.deep-org-item:hover .deep-org-submenu,
.deep-org-item:focus-within .deep-org-submenu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none;
}

/* On loose pages, also suppress the normal fixed page menu so there is only one menu. */
body.deep-landing-active .page-hero-menu{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

@media(max-width:900px){
  .deep-landing-hero-menu{display:none}
}


/* v42 — donation CTA */
.donate-menu-btn{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  padding:9px 14px !important;
  border-radius:999px;
  background:#A52B22 !important;
  color:#F2EEE6 !important;
  border:1px solid #A52B22 !important;
  text-decoration:none !important;
}
.donate-menu-btn:hover{
  background:#111 !important;
  border-color:#111 !important;
}


/* v53 — refined navigation: keep entire Hero menu in-frame */
.page-hero-menu,
.deep-landing-hero-menu{
  padding-left:24px !important;
  padding-right:24px !important;
}
.page-hero-nav,
.deep-landing-nav{
  gap:clamp(11px,1.35vw,20px) !important;
  max-width:calc(100vw - 48px);
}
.page-hero-nav a,
.deep-landing-nav a{
  letter-spacing:.105em !important;
}

/* Donate should feel like navigation, not a commercial CTA. */
a.donate-menu-btn{
  display:inline !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:inherit !important;
  text-decoration:none !important;
}
a.donate-menu-btn:hover{
  background:transparent !important;
  border-color:transparent !important;
  opacity:.62;
}

@media(max-width:1180px) and (min-width:901px){
  .page-hero-menu,
  .deep-landing-hero-menu{
    padding-left:18px !important;
    padding-right:18px !important;
  }
  .page-hero-nav,
  .deep-landing-nav{
    gap:10px !important;
    font-size:9px !important;
    letter-spacing:.09em !important;
    max-width:calc(100vw - 36px);
  }
  .page-hero-nav a,
  .deep-landing-nav a{
    letter-spacing:.09em !important;
  }
}