/* HERO */
/* Twee kolommen: op brede schermen cap op ~vh zodat portret-cover niet extreem inzoomt. */
.over-hero{margin-top:var(--nav-h);display:grid;grid-template-columns:minmax(0,min(50vw,calc((100vh - var(--nav-h)) * 0.88))) minmax(0,1fr);min-height:calc(100vh - var(--nav-h));}
.hero-visual{background:var(--off);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:600px;}
.hero-portrait-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%;display:block;}
.hero-tag-vertical{position:absolute;left:32px;bottom:40px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--warm);writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);}
.hero-year{position:absolute;right:32px;top:40px;font-family:'Syne',sans-serif;font-weight:800;font-size:80px;color:var(--border);letter-spacing:-0.04em;line-height:1;}
.hero-content{padding:80px 56px;display:flex;flex-direction:column;justify-content:center;border-left:1px solid var(--border);}
/* Hero-typografie gelijk aan dienstpagina’s (.dd-hero-* in dienst-detail.css) */
.hero-eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.22em;text-transform:uppercase;color:var(--warm);margin-bottom:28px;display:flex;align-items:center;gap:14px;}
.hero-eyebrow::before{content:'';width:28px;height:1px;background:var(--warm);}
.hero-name{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(40px,5vw,68px);letter-spacing:-0.03em;line-height:1;color:var(--ink);margin-bottom:20px;}
.hero-role{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:48px;}
.hero-intro{font-family:'DM Sans',sans-serif;font-size:17px;font-weight:400;color:var(--muted);line-height:1.9;margin-bottom:48px;border-left:2px solid var(--warm);padding-left:24px;}
.hero-facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);}
.hero-fact{background:var(--bg);padding:20px 24px;}
.fact-label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--warm);margin-bottom:6px;}
.fact-value{font-family:'DM Sans',sans-serif;font-size:16px;font-weight:400;color:var(--ink);}

/* Desktop hero: foto iets van de linkerrand (ook bij full-bleed hero ≥1440px). */
@media (min-width: 1025px) {
  .hero-visual {
    margin-left: clamp(24px, 3.5vw, 56px);
  }
}

/* STORY */
.story-section{padding:120px 0;border-top:1px solid var(--border);}
.story-grid{display:grid;grid-template-columns:280px 1fr;gap:80px;align-items:start;}
.story-sidebar{position:sticky;top:168px;}
.story-sidebar-title{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.22em;text-transform:uppercase;color:var(--warm);margin-bottom:32px;}
.story-nav{list-style:none;display:flex;flex-direction:column;gap:4px;}
.story-nav-item{border-left:2px solid var(--border);padding:12px 20px;cursor:pointer;transition:all 0.2s;}
.story-nav-item:hover{border-left-color:var(--warm);}
.story-nav-item.active{border-left-color:var(--ink);}
.story-nav-item.done{border-left-color:var(--warm);}
.story-nav-num{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--warm);margin-bottom:4px;}
.story-nav-title{font-family:'DM Sans',sans-serif;font-size:16px;font-weight:400;color:var(--muted);transition:color 0.2s;line-height:1.45;}
.story-nav-item.active .story-nav-title{color:var(--ink);font-weight:500;}
.story-nav-item.done .story-nav-title{color:var(--muted);}
.story-content{min-width:0;}
.chapter{display:none;}
.chapter.active{display:block;}
.chapter-label{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.22em;text-transform:uppercase;color:var(--warm);margin-bottom:24px;display:flex;align-items:center;gap:16px;}
.chapter-label::before{content:'';width:32px;height:1px;background:var(--warm);}
.chapter-title{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(36px,4vw,56px);letter-spacing:-0.03em;line-height:1.05;color:var(--ink);margin-bottom:32px;}
.chapter-teaser{font-family:'DM Sans',sans-serif;font-size:20px;font-weight:400;color:var(--muted);line-height:1.9;margin-bottom:40px;max-width:600px;}
.chapter-body{display:block;opacity:1;max-width:760px;}
.chapter-body p{font-family:'DM Sans',sans-serif;font-size:18px;font-weight:400;color:var(--muted);line-height:1.9;margin-bottom:24px;}
.chapter-body p:last-child{margin-bottom:0;}
.chapter-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:48px;padding-top:32px;border-top:1px solid var(--border);}
.btn-chapter-nav{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:transparent;border:1px solid var(--border);padding:16px 24px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:all 0.2s;text-decoration:none;min-width:180px;}
.btn-chapter-nav:hover{color:var(--ink);border-color:var(--ink);}
.btn-chapter-nav.primary{background:var(--ink);color:var(--bg);border-color:var(--ink);}
.btn-chapter-nav.primary:hover{opacity:0.75;}
.btn-chapter-nav:disabled{opacity:0.3;cursor:default;pointer-events:none;}

/* SKILLS & VALUES */
.skills-section{background:var(--ink);padding:100px 0;}
.skills-inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;}
.skills-label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--warm);margin-bottom:32px;}
.skills-title{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(32px,4vw,52px);letter-spacing:-0.03em;color:var(--bg);line-height:1.1;margin-bottom:40px;}
.skills-groups{display:flex;flex-direction:column;gap:0;}
.skill-group{border-top:1px solid rgba(255,255,255,0.08);}
.skill-group:last-child{border-bottom:1px solid rgba(255,255,255,0.08);}

/* accordion header */
.skill-group-header{width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;background:transparent;border:none;padding:20px 0;cursor:pointer;text-align:left;transition:opacity 0.2s;}
.skill-group-header:hover{opacity:0.75;}
.skill-group-title{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--warm);margin:0;flex:1;}
.skill-group-meta{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.skill-group-meta .skill-bar-wrap{width:100px;}
.skill-group-chevron{width:16px;height:16px;color:rgba(255,255,255,0.3);flex-shrink:0;transition:transform 0.3s ease;}
.skill-group.open .skill-group-chevron{transform:rotate(180deg);}

/* accordion body */
.skills-collapse{max-height:0;overflow:hidden;transition:max-height 0.4s ease;}
.skill-group.open .skills-collapse{max-height:600px;}

/* sub-skills */
.skills-list{display:flex;flex-direction:column;gap:0;padding-bottom:8px;}
.skill-item{display:flex;justify-content:space-between;align-items:center;padding:14px 0 14px 16px;border-bottom:1px solid rgba(255,255,255,0.05);gap:24px;}
.skill-item:last-child{border-bottom:none;}
.skill-name{font-family:'DM Sans',sans-serif;font-size:16px;font-weight:400;color:rgba(255,255,255,0.72);}
.skill-bar-wrap{width:120px;height:2px;background:rgba(255,255,255,0.1);flex-shrink:0;}
.skill-bar{height:100%;background:var(--warm);width:0;transition:width 0.6s ease;}
.skill-bar--group{transition:width 0.7s ease;}

.values-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;}
.value-card{background:rgba(255,255,255,0.04);padding:32px 28px;}
.value-icon{font-family:'JetBrains Mono',monospace;font-size:18px;color:var(--warm);margin-bottom:16px;}
.value-name{font-family:'Syne',sans-serif;font-weight:700;font-size:18px;color:var(--bg);margin-bottom:8px;letter-spacing:-0.01em;}
.value-desc{font-family:'DM Sans',sans-serif;font-size:16px;font-weight:400;color:rgba(255,255,255,0.65);line-height:1.8;}

/* CTA */
.cta-section{padding:120px 0;text-align:center;border-top:1px solid var(--border);}
.cta-pre{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.22em;text-transform:uppercase;color:var(--warm);margin-bottom:32px;}
.cta-title{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(40px,5vw,68px);letter-spacing:-0.03em;color:var(--ink);margin-bottom:40px;line-height:1.05;}
.cta-section-lead{font-family:'DM Sans',sans-serif;font-size:18px;font-weight:400;color:var(--muted);line-height:1.9;max-width:560px;margin:0 auto 1.5rem;opacity:0.92;}
.btn-primary{display:inline-block;background:var(--ink);color:var(--bg);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;text-decoration:none;padding:20px 48px;transition:opacity 0.2s;}
.btn-primary:hover{opacity:0.7;}

@media (max-width: 1024px){
  .over-hero{grid-template-columns:1fr;min-height:auto;margin-top:var(--nav-h);}
  .hero-content{border-left:0;border-top:1px solid var(--border);padding:64px 28px;}
  .hero-visual{min-height:420px;margin-left:0;}
  .story-grid{grid-template-columns:1fr;gap:48px;}
  .story-sidebar{position:static;}
  .skills-inner{grid-template-columns:1fr;gap:48px;}
}

@media (max-width: 767px){
  .over-hero{margin-top:var(--nav-h);}
  .hero-content{padding:48px 20px;}
  .hero-visual{min-height:320px;}
  .hero-name{font-size:clamp(28px,9vw,48px);}
  .hero-intro{font-size:17px;padding-left:16px;}
  .chapter-body p{font-size:17px;}
  .chapter-teaser{font-size:19px;}
  .cta-section-lead{font-size:18px;}
  .hero-facts{grid-template-columns:1fr 1fr;}
  .story-section{padding:64px 0;}
  .skills-section{padding:64px 0;}
  .cta-section{padding:64px 0;}
  .chapter-title{font-size:clamp(28px,8vw,44px);}
  .chapter-nav{flex-direction:column;align-items:stretch;}
  .btn-chapter-nav{width:100%;min-width:0;}
  .values-grid{grid-template-columns:1fr;}
  .skill-item{flex-direction:column;align-items:flex-start;gap:8px;}
  .skill-item .skill-bar-wrap{width:100%;}
  .skill-group-meta .skill-bar-wrap{width:60px;}
  .skills-title{font-size:clamp(26px,8vw,40px);}
}

@media (max-width: 480px){
  .hero-content{padding:32px 16px;}
  .hero-name{font-size:clamp(24px,8vw,36px);}
  .hero-intro{font-size:17px;padding-left:12px;}
  .chapter-body p{font-size:16px;}
  .chapter-teaser{font-size:18px;}
  .cta-section-lead{font-size:17px;}
  .hero-facts{grid-template-columns:1fr 1fr;}
  .hero-fact{padding:12px 14px;}
  .hero-year{font-size:60px;right:16px;top:24px;}
  .btn-primary{padding:16px 28px;font-size:10px;width:100%;text-align:center;display:block;}
  .chapter-nav{gap:8px;}
  .story-section{padding:48px 0;}
  .skills-section{padding:48px 0;}
  .cta-section{padding:48px 0;}
}

/* ── Large desktop (≥1440px) ──────────────────────────── */
@media (min-width: 1440px) {
  /* Hero volledig schermbreed — foto raakt de linker viewport-rand */
  .over-hero {
    width: calc(100% + 2 * var(--edge));
    max-width: 100vw;
    margin-left: calc(-1 * var(--edge));
    margin-right: calc(-1 * var(--edge));
    min-height: calc(100vh - var(--nav-h));
  }
  .hero-content { padding: 96px 72px; }
  .hero-name { font-size: clamp(48px, 5vw, 76px); }
  .hero-intro { font-size: 18px; }
  .hero-year { font-size: 100px; }
  /* Secties gebruiken .wrap die meegroeit via global.css */
  .story-section { padding: 140px 0; }
  .story-grid { grid-template-columns: 320px 1fr; gap: 100px; }
  .story-sidebar { top: 180px; }
  .chapter-body { max-width: 860px; }
  .chapter-title { font-size: clamp(40px, 4.5vw, 64px); }
  .chapter-teaser { font-size: 21px; max-width: 680px; }
  .chapter-body p { font-size: 19px; }
  .cta-section-lead { font-size: 19px; max-width: 620px; }
  /* Skills (donkere band) volledig schermbreed */
  .skills-section {
    padding: 120px 0;
    width: calc(100% + 2 * var(--edge));
    max-width: 100vw;
    margin-left: calc(-1 * var(--edge));
    margin-right: calc(-1 * var(--edge));
  }
  .skills-inner { gap: 100px; }
  .skills-title { font-size: clamp(36px, 4vw, 56px); }
  .values-grid { gap: 3px; }
  .value-card { padding: 40px 36px; }
  .cta-section { padding: 140px 0; }
  .cta-title { font-size: clamp(48px, 5vw, 76px); }
}

/* ── 1680px ──────────────────────────────────────────── */
@media (min-width: 1680px) {
  .over-hero {
    width: calc(100% + 2 * var(--edge));
    max-width: 100vw;
    margin-left: calc(-1 * var(--edge));
    margin-right: calc(-1 * var(--edge));
  }
  .hero-content { padding: 100px 80px; }
  .skills-section {
    width: calc(100% + 2 * var(--edge));
    max-width: 100vw;
    margin-left: calc(-1 * var(--edge));
    margin-right: calc(-1 * var(--edge));
    padding: 130px 0;
  }
  .story-section { padding: 160px 0; }
  .story-grid { grid-template-columns: 340px 1fr; gap: 120px; }
  .cta-section { padding: 160px 0; }
}

/* Zeer breed beeld: portret blijft beter in het kader (minder “ingezoomd” gevoel). */
@media (min-width: 1400px) and (min-aspect-ratio: 2/1) {
  .hero-portrait-img {
    object-position: center 32%;
  }
}

/* ── Ultrawide (≥1921px) ──────────────────────────────── */
@media (min-width: 1921px) {
  .over-hero {
    width: calc(100% + 2 * var(--edge));
    max-width: 100vw;
    margin-left: calc(-1 * var(--edge));
    margin-right: calc(-1 * var(--edge));
  }
  .hero-content { padding: 120px 96px; }
  .skills-section {
    width: calc(100% + 2 * var(--edge));
    max-width: 100vw;
    margin-left: calc(-1 * var(--edge));
    margin-right: calc(-1 * var(--edge));
    padding: 160px 0;
  }
  .story-grid { grid-template-columns: 400px 1fr; gap: 140px; }
  .chapter-body { max-width: 980px; }
  .skills-inner { gap: 140px; }
  .cta-section { padding: 180px 0; }
}