:root {
  --black:#080d10;
  --paper:#f5f1e9;
  --gold:#d9a64f;
  --gold-light:#f0ca78;
  --white:#fffdf9;
  --text:#151515;
  --max:1160px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--text); font-family:Arial,Helvetica,sans-serif; }
.wrap { width:min(calc(100% - 48px),var(--max)); margin:auto; }

/* HEADER */
.site-header {
  height:78px; background:var(--black); color:#fff;
  display:flex; align-items:center; position:sticky; top:0; z-index:20;
}
.nav { height:100%; display:flex; align-items:center; justify-content:space-between; }
.logo { display:block; width:300px; line-height:0; }
.logo img { width:100%; height:auto; display:block; }
.navlinks { display:flex; align-items:center; gap:38px; }
.navlinks a { color:#fff; text-decoration:none; font-size:14px; }
.navlinks a:first-child { color:var(--gold-light); }
.member { background:var(--gold); color:#111 !important; padding:12px 27px; border-radius:999px; font-weight:800; }

/* HERO */
.hero { position:relative; min-height:580px; background:var(--black); color:#fff; overflow:hidden; }
.hero-photo {
  position:absolute; right:0; top:0; height:100%; width:50%;
  display:flex; justify-content:flex-end; align-items:center;
}
.hero-photo img {
  height:100%; width:auto; max-width:100%; display:block;
  object-fit:contain; object-position:right center;
}
.hero-overlay { display:none; }
.hero-inner { min-height:580px; position:relative; z-index:3; display:flex; align-items:center; }
.hero-copy { width:50%; padding:50px 0; }
.eyebrow { margin:0 0 14px; color:var(--gold-light); font-size:11px; letter-spacing:.2em; font-weight:800; }
h1 { margin:0 0 25px; font:700 clamp(55px,6vw,78px)/.9 Georgia,serif; letter-spacing:-.055em; }
h1 em { color:var(--gold); font-weight:400; }
.lead { max-width:520px; color:#eeeae2; font-size:16px; line-height:1.5; margin:0 0 28px; }
.button { display:inline-flex; align-items:center; gap:12px; border:0; border-radius:999px; padding:13px 23px; font-weight:800; font-size:13px; text-decoration:none; cursor:pointer; }
.gold { background:var(--gold); color:#111; }

/* EPISODES */
.episodes { padding:38px 0 42px; background:var(--paper); }
.section-head { display:flex; justify-content:space-between; align-items:end; margin-bottom:20px; }
.section-head h2 { margin:0; font:700 50px/1 Georgia,serif; letter-spacing:-.045em; }
.section-note { text-align:right; font-size:13px; line-height:1.3; }
.section-note:after { content:""; display:block; width:95px; height:1px; background:var(--gold); margin:10px 0 0 auto; }
.episode-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; }
.card { min-width:0; }
.thumb {
  position:relative; aspect-ratio:16/9; overflow:hidden; background:#111;
  cursor:pointer; border-radius:3px;
}
.thumb img { width:100%; height:100%; display:block; object-fit:cover; }
.play {
  position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%);
  width:50px; height:50px; border:1.5px solid #fff; border-radius:50%;
  background:rgba(0,0,0,.35); color:#fff; display:grid; place-items:center;
  padding-left:3px; font-size:19px;
}
.thumb:hover .play { background:var(--gold); color:#111; }
.card-body { padding:10px 4px 0; }
.card .eyebrow { color:#a87627; font-size:10px; letter-spacing:.16em; margin:0 0 5px; }
.card h3 { margin:0 0 4px; font:700 22px/1.1 Georgia,serif; }
.card p { margin:0 0 12px; font-size:13px; line-height:1.35; }
.card .button { padding:10px 19px; font-size:12px; }


/* OVER JEROEN */
.about-jeroen {
  background:var(--paper);
  padding:34px 0 38px;
}
.about-jeroen-grid {
  display:grid;
  grid-template-columns:190px minmax(0, 1fr);
  gap:34px;
  align-items:center;
}
.about-jeroen-photo {
  margin:0;
  aspect-ratio:638/782;
  overflow:hidden;
  border-radius:4px;
  background:#d9d0c2;

  align-self:center;
}
.about-jeroen-photo img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
}
.about-jeroen-copy {
  max-width:610px;
}
.about-jeroen-kicker {
  margin:0 0 12px;
  color:#a87627;
  font-size:11px;
  letter-spacing:.2em;
  font-weight:800;
  text-transform:uppercase;
}
.about-jeroen h2 {
  margin:0 0 12px;
  font:700 34px/1.05 Georgia,serif;
  letter-spacing:-.04em;
}
.about-jeroen h2 em {
  color:var(--gold);
  font-weight:400;
}
.about-jeroen-copy p {
  margin:0 0 10px;
  font:13px/1.45 Georgia,serif;
  color:#252525;
}
.about-jeroen-copy p:last-child {
  margin-bottom:0;
}
@media (max-width:480px) {
  .about-jeroen-grid { grid-template-columns:1fr; }
  .about-jeroen-photo { width:100px; }
  .about-jeroen h2 { font-size:30px; }
}

@media (max-width:760px) {
  .about-jeroen { padding:30px 0 34px; }
  .about-jeroen-grid {
    grid-template-columns:100px minmax(0,1fr);
    gap:20px;
  }
  .about-jeroen-photo {
    aspect-ratio:638/782;
    max-height:none;
  }
  .about-jeroen-copy { max-width:none; }
  .about-jeroen h2 { font-size:44px; }
}

/* WHY */
.why { min-height:275px; position:relative; overflow:hidden; background:#091014; color:#fff; }
.why-bg { position:absolute; inset:0; background:linear-gradient(90deg,#091014 0%,#091014 34%,rgba(9,16,20,.6) 62%,rgba(9,16,20,.2)), linear-gradient(180deg,rgba(9,16,20,.15),rgba(9,16,20,.5)); }
.why-inner { position:relative; z-index:2; padding:43px 0; }
.why h2 { max-width:650px; margin:0 0 13px; color:#fff; font:700 39px/1.05 Georgia,serif; letter-spacing:-.04em; }
.why p { max-width:620px; margin:0 0 15px; color:#e8e3db; font-size:15px; line-height:1.45; }

/* VALUES */
.values { background:var(--white); padding:25px 0; }
.values-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.value { text-align:center; padding:4px 45px; border-right:1px solid #ded6ca; }
.value:last-child { border-right:0; }
.icon { color:#b67b29; font-size:31px; height:37px; }
.value h3 { margin:0 0 5px; font:700 17px/1.2 Georgia,serif; }
.value p { margin:0; font-size:13px; line-height:1.45; }


/* CONTACT */
.contact { background:var(--paper); padding:45px 0 55px; }
.contact-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:45px; align-items:start; }
.contact h2 { margin:0 0 12px; font:700 50px/1 Georgia,serif; letter-spacing:-.045em; }
.contact-intro { margin:0; max-width:430px; font-size:15px; line-height:1.5; }
.contact-form { display:grid; gap:13px; }
.contact-form label { font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.contact-form input, .contact-form textarea { width:100%; border:1px solid #d8d0c4; background:#fffdf9; border-radius:3px; padding:12px 13px; font:14px Arial,Helvetica,sans-serif; color:var(--text); }
.contact-form textarea { min-height:125px; resize:vertical; }
.contact-form input:focus, .contact-form textarea:focus { outline:2px solid rgba(217,166,79,.35); border-color:var(--gold); }
@media (max-width:760px) { .contact-grid { grid-template-columns:1fr; gap:25px; } .contact h2 { font-size:42px; } }

/* FOOTER */
footer { background:var(--black); color:#fff; padding:42px 0 18px; border-top:1px solid rgba(255,255,255,.10); }
.footer-top { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:30px; }
.footer-brand { font:700 24px/1 Georgia,serif; letter-spacing:-.02em; }
.footer-brand span { font-weight:400; }
.footer-nav { display:flex; align-items:center; justify-content:center; gap:30px; }
.footer-nav a { color:#e9e5dc; text-decoration:none; font-size:11px; letter-spacing:.08em; text-transform:uppercase; transition:color .2s ease; }
.footer-nav a:hover { color:var(--gold-light); }
.social { justify-self:end; display:flex; align-items:center; gap:9px; }
.social a { width:34px; height:34px; color:#fff; border:1px solid rgba(255,255,255,.22); border-radius:50%; display:grid; place-items:center; text-decoration:none; transition:color .2s ease,border-color .2s ease,background .2s ease; }
.social a:hover { color:var(--gold-light); border-color:var(--gold-light); background:rgba(255,255,255,.04); }
.social svg { width:16px !important; height:16px !important; display:block; color:currentColor; }
.social svg * { stroke:currentColor; }
.social svg [fill="currentColor"] { fill:currentColor; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; gap:20px; border-top:1px solid rgba(255,255,255,.10); margin-top:28px; padding-top:14px; color:#777d7f; font-size:9px; letter-spacing:.03em; }

/* RESPONSIVE */
@media (max-width:760px) {
  .navlinks a:not(.member) { display:none; }
  .logo { width:235px; }
  /* Portret onder de tekst op tablet en mobiel; geen zwarte overlap boven de foto. */
  .hero { min-height:0; overflow:hidden; }
  .hero-inner { min-height:0; display:flex; flex-direction:column; align-items:stretch; }
  .hero-copy { width:100%; padding:42px 0 34px; }
  .hero-photo { position:relative; right:auto; top:auto; bottom:auto; width:100%; height:auto; min-height:0; display:block; }
  .hero-photo img { width:100%; height:auto; max-width:none; display:block; object-fit:cover; object-position:center top; }
  .episode-grid { grid-template-columns:1fr; }
  .values-grid { grid-template-columns:1fr; }
  .value { border-right:0; border-bottom:1px solid #ded6ca; padding:20px; }
  .value:last-child { border-bottom:0; }
  .footer-top { grid-template-columns:1fr; text-align:center; gap:22px; }
  .footer-brand,.footer-nav,.social { justify-self:center; }
}
@media (max-width:560px) {
  .wrap { width:calc(100% - 28px); }
  .site-header,.nav { height:66px; }
  .logo { width:190px; }
  .member { padding:10px 16px; font-size:11px; }

  /* Mobiel: tekst eerst, portret eronder. Geen gradient of overlap. */
  .hero { min-height:0; overflow:hidden; }
  .hero-inner { min-height:0; display:flex; flex-direction:column; align-items:stretch; }
  .hero-copy { width:100%; padding:42px 0 34px; }
  .hero-photo { position:relative; right:auto; top:auto; bottom:auto; width:100%; height:auto; min-height:0; display:block; }
  .hero-photo img { width:100%; height:auto; max-width:none; object-fit:cover; object-position:center top; }
  h1 { font-size:52px; }
  .section-head { display:block; }
  .section-head h2 { font-size:42px; }
  .why h2 { font-size:35px; }
  .footer-nav { flex-wrap:wrap; justify-content:center; gap:14px 24px; }
  .social { gap:9px; }
  .footer-bottom { display:block; text-align:center; }
  .footer-bottom span { display:block; margin:7px 0; }
}

/* IN-PAGE TRAILER PLAYER */
/* Mobile-safe Vimeo modal: keeps the existing visual layout intact. */
.video-modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,0,0,.88);
  -webkit-overflow-scrolling:touch;
}
.video-modal.open{display:flex}
.video-modal-inner{
  position:relative;
  width:min(960px,100%);
  aspect-ratio:16/9;
  background:#000;
  box-shadow:0 20px 80px rgba(0,0,0,.55);
}
.video-modal iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.video-close{
  position:absolute;
  right:-10px;
  top:-48px;
  width:38px;
  height:38px;
  border:1px solid rgba(255,255,255,.6);
  border-radius:50%;
  background:#111;
  color:#fff;
  cursor:pointer;
  font-size:22px;
  line-height:1;
}
.video-close:hover{background:var(--gold);color:#111}
body.modal-open{overflow:hidden}

.income {
  background:var(--paper);
  padding:38px 0 42px;
}
.income-inner {
  max-width:900px;
  margin:0 auto;
  text-align:center;
}
.income h2 {
  margin:0 0 12px;
  font:700 38px/1.05 Georgia,serif;
  letter-spacing:-.04em;
}
.income-inner > p {
  max-width:680px;
  margin:0 auto;
  font:14px/1.5 Georgia,serif;
}
.income-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:25px;
  text-align:left;
}
.income-item {
  padding:22px 24px;
  background:var(--white);
  border:1px solid rgba(21,21,21,.10);
}
.income-percent {
  color:var(--gold);
  font-size:36px;
  line-height:1;
  font-weight:800;
  margin-bottom:8px;
}
.income-item h3 {
  margin:0 0 6px;
  font:700 19px/1.15 Georgia,serif;
}
.income-item p {
  margin:0;
  font-size:13px;
  line-height:1.45;
}
@media (max-width:560px) {
  .income {
    padding:30px 0 34px;
  }
  .income h2 {
    font-size:31px;
  }
  .income-grid {
    grid-template-columns:1fr;
    gap:12px;
  }
  .income-item {
    padding:18px 20px;
  }
}

/* Eerste portret in de hero: duidelijk iets kleiner en netjes gecentreerd */
.hero-photo {
  top: 6%;
  height: 88%;
  width: 50%;
  justify-content: center;
  align-items: center;
}
.hero-photo img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center center;
}

@media (max-width: 760px) {
  .hero-photo {
    top: auto;
    height: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .hero-photo img {
    width: 90%;
    height: auto;
    max-width: 90%;
    object-fit: contain;
    object-position: center center;
  }
}