:root{
    --black:#111111;
    --ink:#3c3c3c;
    --silver:#b0b0b0;
    --offwhite:#f5f3ef;
    --white:#ffffff;
    --line:rgba(60,60,60,0.16);
    --display:'Cormorant Garamond', serif;
    --sans:'Work Sans', sans-serif;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{animation:none !important; transition:none !important;} }

  body{margin:0; background:var(--black); color:var(--white); font-family:var(--sans); font-weight:300; line-height:1.6;}
  a{color:inherit;}
  :focus-visible{outline:1px solid var(--white); outline-offset:4px;}
  .wrap{max-width:1280px; margin:0 auto; padding:0 40px;}

  /* ---------- NAV (interne pagina) ---------- */
  .nav{padding:30px 40px;}
  .nav-inner{display:flex; justify-content:space-between; align-items:center; max-width:1280px; margin:0 auto;}
  .nav-logo img{height:86px; width:auto; display:block;}
  .nav-toggle{display:flex; align-items:center; justify-content:center; width:44px; height:44px; background:none; border:1px solid var(--white); border-radius:1px; cursor:pointer; padding:0; transition:opacity .2s ease;}
  .nav-toggle:hover{opacity:0.7;}
  .nav-toggle .bars{position:relative; width:20px; height:13px; display:block;}
  .nav-toggle .bars span{position:absolute; left:0; width:100%; height:1px; background:var(--white); transition:transform .25s ease, opacity .2s ease;}
  .nav-toggle .bars span:nth-child(1){top:0;}
  .nav-toggle .bars span:nth-child(2){top:6px;}
  .nav-toggle .bars span:nth-child(3){top:12px;}
  .nav-toggle[aria-expanded="true"] .bars span:nth-child(1){transform:translateY(6px) rotate(45deg);}
  .nav-toggle[aria-expanded="true"] .bars span:nth-child(2){opacity:0;}
  .nav-toggle[aria-expanded="true"] .bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

  .nav-links{position:fixed; inset:0 0 0 auto; width:320px; max-width:82%; background:var(--black); display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:30px; padding:60px 46px; list-style:none; margin:0; transform:translateX(100%); transition:transform .35s ease; z-index:60;}
  .nav-links.open{transform:translateX(0);}
  .nav-links a{font-size:0.95rem; letter-spacing:0.08em; text-transform:uppercase; text-decoration:none; color:var(--white); opacity:0.85; transition:opacity .2s ease;}
  .nav-links a:hover{opacity:1;}
  .nav-links .nav-lang{margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,0.2);}
  .nav-links .nav-lang a{font-size:0.8rem; opacity:0.6;}
  .nav-links .nav-lang a:hover{opacity:1;}
  .nav-links a.active{opacity:1; border-bottom:1px solid var(--white); padding-bottom:2px;}

  .nav-overlay{position:fixed; inset:0; background:rgba(17,17,17,0.4); opacity:0; visibility:hidden; transition:opacity .3s ease; z-index:55;}
  .nav-overlay.open{opacity:1; visibility:visible;}

  /* ---------- INTERNE PAGINA'S ---------- */
  .page-header{padding-top:56px; padding-bottom:60px; border-bottom:1px solid rgba(255,255,255,0.14);}
  .page-eyebrow{font-size:0.76rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--silver); margin:0 0 18px;}
  .page-header h1{font-family:var(--display); font-style:italic; font-weight:400; font-size:clamp(1.9rem,3.6vw,3.05rem); margin:0; line-height:1.1;}
  .page-content{padding-top:64px; padding-bottom:140px;}
  .page-content h2{font-family:var(--display); font-style:italic; font-weight:400; font-size:1.7rem; margin:0 0 24px;}
  .page-content p{margin:0 0 20px; max-width:64ch; color:rgba(255,255,255,0.82);}
  .page-block{margin-bottom:70px; padding-bottom:70px; border-bottom:1px solid rgba(255,255,255,0.14);}
  .page-block:last-child{margin-bottom:0; padding-bottom:0; border-bottom:none;}

  /* ---------- VIDEO HERO (placeholder tot embed/bestand bekend is) ---------- */
  .video-hero{position:relative; aspect-ratio:16/9; margin:0; background:repeating-linear-gradient(160deg,#050505 0 4px,#2b2b2b 4px 9px); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px;}
.video-hero iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.video-hero video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000;}
  .video-hero .play-btn{width:64px; height:64px; border-radius:50%; border:1px solid rgba(255,255,255,0.5); display:flex; align-items:center; justify-content:center; color:var(--white); font-size:1.3rem;}
  .video-hero .video-label{font-size:0.76rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--silver);}

  /* ---------- FOTOGALERIJ: één grote foto, doorbladerbaar ---------- */
  .foto-carousel{margin-bottom:70px;}
  .foto-frame{position:relative; aspect-ratio:3/2; overflow:hidden; background:#0a0a0a;}
  .foto-slide{position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity .5s ease; pointer-events:none;}
  .foto-slide.active{opacity:1;}
  /* Zodra je echte foto's hebt: voeg hier een regel toe per foto, bv. .foto-slide--1{background-image:url('Afbeeldingen/armazoen-foto-1.jpg');} */

  .foto-nav{display:flex; justify-content:space-between; align-items:center; margin-top:18px;}
  .foto-arrow{width:42px; height:42px; background:none; border:1px solid rgba(255,255,255,0.3); border-radius:1px; color:var(--white); font-size:1rem; cursor:pointer; transition:opacity .2s ease;}
  .foto-arrow:hover{opacity:0.7;}
  .foto-counter{font-size:0.78rem; letter-spacing:0.04em; color:var(--silver);}

/* ---------- FOTO VERGROTEN (lightbox) ---------- */
  .foto-expand{position:absolute; top:12px; right:12px; z-index:5; width:36px; height:36px; background:rgba(0,0,0,0.55); border:1px solid rgba(255,255,255,0.35); border-radius:1px; color:var(--white); font-size:1rem; cursor:pointer; transition:opacity .2s ease, background .2s ease;}
  .foto-expand:hover{background:rgba(0,0,0,0.8);}

  .foto-carousel.is-expanded{position:fixed; inset:0; z-index:1000; margin:0; padding:40px; background:rgba(0,0,0,0.96); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;}
  .foto-carousel.is-expanded .foto-frame{width:100%; max-width:1400px; height:calc(100% - 60px); aspect-ratio:auto;}
  .foto-carousel.is-expanded .foto-nav{width:100%; max-width:1400px;}
  .foto-carousel.is-expanded .foto-slide{background-size:contain; background-repeat:no-repeat;}

  @media (max-width:600px){
    .foto-carousel.is-expanded{padding:16px;}
  }

  /* ---------- TIJDLIJN ---------- */
  .timeline{display:flex; flex-direction:column; gap:32px;}
  .timeline-item{border-top:1px solid rgba(255,255,255,0.14); padding-top:20px;}
  .timeline-item .loc{font-family:var(--display); font-style:italic; font-weight:400; font-size:1.35rem; display:block; margin-bottom:6px;}
  .timeline-item .date{font-size:0.76rem; letter-spacing:0.04em; color:var(--silver); display:block; margin-bottom:10px;}
  .timeline-item p{margin:0; max-width:64ch; color:rgba(255,255,255,0.78);}

  /* ---------- PERS ---------- */
  .press-item{border-top:1px solid rgba(255,255,255,0.14); padding-top:20px;}
  .press-item .source{font-size:0.76rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--silver); display:block; margin-bottom:8px;}
  .press-item p{margin:0 0 14px;}
  .press-item a.link{font-size:0.78rem; letter-spacing:0.05em; text-transform:uppercase; text-decoration:none; color:var(--white); border-bottom:1px solid var(--white); padding-bottom:3px;}

  /* ---------- TERUG NAAR WERK ---------- */
  .back-link{display:inline-block; font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase; text-decoration:none; color:var(--white); border-bottom:1px solid var(--white); padding-bottom:3px;}

  footer{background:var(--black); border-top:1px solid rgba(255,255,255,0.14); padding:40px 0;}
  .footer-inner{display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:16px; font-size:0.78rem; letter-spacing:0.03em;}
  footer a{text-decoration:none; border-bottom:1px solid transparent;}
  footer a:hover{border-color:var(--white);}
  .footer-links{display:flex; flex-wrap:wrap; gap:22px;}

  .reveal{opacity:0; transform:translateY(14px); transition:opacity .8s ease, transform .8s ease;}
  .reveal.in{opacity:1; transform:none;}

/* ---------- HERO MET CREDITS-KOLOM ---------- */
.hero-credits-grid{position:relative; display:grid; grid-template-columns:260px 1fr; gap:44px; align-items:start; margin:0 0 70px;}
.hero-credits-grid .video-hero{position:relative;}
.hero-credits-grid .video-hero::before{content:''; position:absolute; top:0; bottom:0; left:-29px; width:1px; background:rgba(255,255,255,0.14);}
.hero-credits{padding-top:0px;}
.hero-tags{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 20px;}
.hero-tags .tag{font-size:9.5px; letter-spacing:0.06em; text-transform:uppercase; color:#d8d8d8; background:#3d3d3d; border:1px solid rgba(255,255,255,0.08); border-radius:0; padding:3px; line-height:1; white-space:nowrap;}
.hc-block{margin-bottom:28px;}
.hc-block:last-child{margin-bottom:0;}
.hero-credits .hc-label{font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--silver); font-weight:500; margin:0;}
.hero-credits .hc-value{font-size:0.86rem; font-style:normal; color:var(--silver); margin:0; line-height:1.5;}
.hero-credits .hc-thanks{font-style:italic; color:var(--silver); font-size:0.86rem; margin:0;}

@media (max-width:900px){
  .hero-credits-grid{grid-template-columns:1fr; gap:30px;}
  .hero-credits-grid .video-hero{order:-1;}
  .hero-credits-grid .video-hero::before{display:none;}
}

/* ---------- BEELD + TEKST GRID (carousel + projecttekst naast elkaar) ---------- */
.beeld-tekst-grid{display:grid; grid-template-columns:480px 1fr; gap:48px; align-items:stretch; height:420px;}
.beeld-tekst-grid .foto-carousel{margin-bottom:0;}
.beeld-tekst{overflow-y:auto; padding-right:14px; min-height:0;}
.beeld-tekst p{margin:0 0 20px; max-width:none; color:rgba(255,255,255,0.82);}
.beeld-tekst p:last-child{margin-bottom:0;}
.beeld-tekst .beeld-tekst-lead{font-family:var(--display); font-style:italic; font-size:1.25rem; color:var(--white); margin-bottom:24px;}
.beeld-tekst h3{font-family:var(--display); font-style:italic; font-weight:400; font-size:1.25rem; margin:36px 0 2px; color:var(--white);}
.beeld-tekst ul{margin:0 0 20px; padding-left:20px; color:rgba(255,255,255,0.82);}
.beeld-tekst li{margin-bottom:6px;}

@media (max-width:900px){
  .beeld-tekst-grid{grid-template-columns:1fr; gap:30px; height:auto;}
}

/* ---------- PARTNERS PER LOCATIE (twee kolommen) ---------- */
.partners-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px;}
.partners-grid h3{font-family:var(--display); font-style:italic; font-weight:400; font-size:1.7rem; margin:0 0 24px; color:var(--white);}
.partners-list{list-style:none; margin:0; padding:0;}
.partners-list li{border-top:1px solid rgba(255,255,255,0.14); padding:14px 0;}
.partners-list li:last-child{padding-bottom:0;}
.partners-list .p-loc{font-family:var(--display); font-style:italic; font-size:1.1rem; display:block; margin-bottom:4px; color:var(--white);}
.partners-list .p-meta{font-size:0.82rem; color:var(--silver);}

@media (max-width:700px){
  .partners-grid{grid-template-columns:1fr; gap:36px;}
}

/* ---------- MOTIVATIE (twee kolommen, lange tekst) ---------- */
.motivatie-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;}
.motivatie-col h3{font-family:var(--display); font-style:italic; font-weight:400; font-size:1.7rem; margin:0 0 24px; color:var(--white);}
.motivatie-col p{margin:0 0 20px; max-width:none; color:rgba(255,255,255,0.82);}
.motivatie-col p:last-child{margin-bottom:0;}

@media (max-width:900px){
  .motivatie-grid{grid-template-columns:1fr; gap:40px;}
}

@media (max-width:600px){
  .nav-logo{left:20px;}
  .nav-logo img{height:auto; width:46vw; max-width:220px;}
}