/* ==========================================================
   Richard Duits · Portfolio
   Basis: het oorspronkelijke design (papier, bruin, Manrope + DM Sans).
   Alle kleuren staan hier als variabelen, ook voor het donkere thema.
   ========================================================== */
:root{
  --ink:#1c1917;--muted:#6f6863;--paper:#f5f1ed;--card:#fff;--line:#ded7d1;--brown:#75594c;--dark:#201c1a;
  --on-ink:#fff;--portrait:#ded4ce;--accent:#d9c8be;--accent-soft:#ebe1db;--icon-bg:#eee5df;--chip:#f7f3f0;
  --veil:rgba(255,255,255,.45);--dash:#bcaea6;--brown-soft:rgba(117,89,76,.10);--good:#3f7a52;--bad:#a8433a;
  --radius:28px;color-scheme:light
}
[data-theme="dark"]{
  --ink:#f1ebe6;--muted:#a99e97;--paper:#161311;--card:#1f1a17;--line:#3a322d;--brown:#c99f88;--dark:#2a221e;
  --on-ink:#161311;--portrait:#2e2622;--accent:#3d3029;--accent-soft:#29211d;--icon-bg:#2e2622;--chip:#29221e;
  --veil:rgba(255,255,255,.04);--dash:#5a4c44;--brown-soft:rgba(201,159,136,.12);--good:#7fc596;--bad:#e48a7f;
  color-scheme:dark
}

/* ---------- Oorspronkelijke stijl ---------- */
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:96px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;transition:background .35s,color .35s}.page-shell{max-width:1240px;margin:auto;padding:0 28px}.topbar{min-height:88px;display:flex;align-items:center;justify-content:space-between}.brand{font:800 25px 'Manrope';color:var(--ink);text-decoration:none}.topbar nav{display:flex;gap:23px;align-items:center}.topbar nav a{color:var(--ink);text-decoration:none;font-weight:600}.nav-cta{padding:11px 16px;border:1px solid var(--line);border-radius:999px}.hero{min-height:610px;display:grid;grid-template-columns:1.5fr .75fr;gap:60px;align-items:center;padding:70px 0 55px}.eyebrow{font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--brown)}h1,h2,h3,h4{font-family:'Manrope',sans-serif;margin-top:0}h1{font-size:clamp(48px,5.7vw,78px);line-height:1.02;letter-spacing:-.05em;max-width:880px;margin:18px 0 25px}.lead{font-size:20px;line-height:1.65;color:var(--muted);max-width:760px}.hero-actions{display:flex;gap:12px;margin:32px 0}.button{display:inline-flex;align-items:center;justify-content:center;padding:14px 19px;border-radius:999px;text-decoration:none;font-weight:700}.primary{background:var(--ink);color:var(--on-ink)}.ghost{border:1px solid var(--line);color:var(--ink);background:var(--veil)}.mini-tags,.chips{display:flex;flex-wrap:wrap;gap:8px}.mini-tags span,.chips span{border:1px solid var(--line);padding:8px 11px;border-radius:999px;font-size:13px;background:var(--veil)}.portrait-card{background:var(--portrait);border-radius:40px;padding:18px;transform:rotate(1.2deg);box-shadow:0 18px 50px rgba(54,43,37,.12)}.portrait-wrap{aspect-ratio:4/5;border-radius:28px;overflow:hidden}.portrait-wrap img{width:100%;height:100%;object-fit:cover}.portrait-meta{display:flex;justify-content:space-between;align-items:end;padding:17px 5px 3px}.portrait-meta span{font-weight:800}.portrait-meta small{color:var(--muted)}.intro-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:120px}.stat-card{background:var(--veil);border:1px solid var(--line);border-radius:22px;padding:24px}.stat-card strong{display:block;font:800 24px 'Manrope';margin-bottom:7px}.stat-card span{color:var(--muted)}.section-head{margin:0 0 34px;max-width:800px}.section-head h2{font-size:44px;letter-spacing:-.035em;margin:10px 0}.section-head p{color:var(--muted);font-size:18px;line-height:1.6}.bento{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:120px}.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.tile-large,.tile-wide{grid-column:span 2}.tile.accent{background:var(--accent)}.tile.accent-soft{background:var(--accent-soft)}.tile.dark{background:var(--dark);color:#fff}.tile.dark .tile-kicker,.tile.dark .tile-button p,.tile.dark .content-pad p{color:#c8beb8}.tile-button,.project-button,.certificate-button{width:100%;border:0;background:transparent;color:inherit;text-align:left;display:flex;justify-content:space-between;gap:25px;cursor:pointer;font:inherit}.tile-button{padding:30px}.tile-button h3{font-size:29px;margin:7px 0}.tile-button p{color:var(--muted);margin:0;max-width:700px;font-size:16px;line-height:1.55}.tile-kicker,.project-type{font-size:11px;font-weight:800;letter-spacing:.15em;color:var(--brown)}.plus{flex:none;width:40px;height:40px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;font-size:26px;line-height:1;transition:.25s}.open>.tile-button .plus,.open>.project-body>.project-button .plus,.open>.certificate-button .plus{transform:rotate(45deg)}.tile-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}.tile-content>*{overflow:hidden}.open>.tile-content,.project-body.open>.tile-content{grid-template-rows:1fr}.content-pad{padding:0 30px 30px}.content-pad p{color:var(--muted);line-height:1.75;margin:0 0 18px}.market-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:125px}.market-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px 18px;min-height:112px;display:flex;flex-direction:column;justify-content:center}.market-card b{font:800 23px 'Manrope';letter-spacing:-.03em}.market-card small{color:var(--muted);margin-top:6px;font-size:14px}.project-timeline{position:relative;margin-bottom:125px}.project-timeline:before{content:"";position:absolute;left:100px;top:0;bottom:0;width:1px;background:var(--line)}.project{display:grid;grid-template-columns:100px 1fr;position:relative}.project-date{padding:28px 18px 0 0;font-weight:800;color:var(--brown)}.project-body{margin-left:32px;border-bottom:1px solid var(--line);position:relative}.project-body:before{content:"";position:absolute;width:11px;height:11px;border-radius:50%;background:var(--brown);left:-38px;top:37px;border:5px solid var(--paper)}.project-button{padding:27px 0}.project-button h3{font-size:27px;margin:6px 0}.project-button p{color:var(--muted);margin:0;line-height:1.55}.project-detail{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;padding:0 0 32px}.project-detail h4{margin:0 0 8px}.project-detail p{color:var(--muted);line-height:1.7}.compact{margin-bottom:25px}.work-timeline{border-top:1px solid var(--line);margin-bottom:125px}.work-timeline article{display:grid;grid-template-columns:190px 90px 1fr;gap:25px;padding:32px 0;border-bottom:1px solid var(--line)}.year{font-weight:800;color:var(--brown)}.company-mark{width:72px;height:72px;border-radius:18px;display:grid;place-items:center;font-weight:800;font-family:'Manrope';background:var(--card);border:1px solid var(--line);font-size:14px}.difrax-mark{color:var(--brown)}.huuskes-mark{font-size:11px;letter-spacing:.04em}.work-timeline h3{font-size:25px;margin-bottom:2px}.company-name{font-weight:700!important;color:var(--ink)!important;margin-top:0!important}.work-timeline p{color:var(--muted);line-height:1.7;margin:8px 0;max-width:820px}.certificate-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:120px}.certificate{background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden}.certificate-button{padding:22px;align-items:center;justify-content:flex-start}.certificate-button>div:nth-child(2){flex:1}.certificate-icon{width:58px;height:58px;border-radius:16px;background:var(--icon-bg);display:grid;place-items:center;font:800 17px 'Manrope';color:var(--brown)}.certificate-button span:not(.plus){font-size:12px;color:var(--brown);font-weight:700}.certificate-button h3{margin:3px 0;font-size:21px}.certificate-button p{margin:0;color:var(--muted)}.split-section{display:grid;grid-template-columns:1.3fr .7fr;gap:14px;margin-bottom:14px}.info-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:32px}.info-card h2{font-size:34px;margin:10px 0 24px}.info-card p{color:var(--muted);line-height:1.65}.chips.big span{padding:10px 13px;background:var(--chip)}.contact-card{background:#75594c;color:#fff;border-radius:34px;padding:42px;display:flex;align-items:center;justify-content:space-between;gap:30px;margin:14px 0 70px}.contact-card .eyebrow{color:#e8d9d1}.contact-card h2{font-size:40px;margin:10px 0}.contact-card p{color:#e7ddd8}.light{background:#fff;color:#1c1917;white-space:nowrap}footer{display:flex;justify-content:space-between;padding:0 0 38px;color:var(--muted);font-size:13px}

/* ==========================================================
   Toevoegingen: dynamiek in dezelfde stijl
   ========================================================== */

/* Leesvoortgang */
.progress{position:fixed;inset:0 0 auto;height:3px;z-index:60;pointer-events:none}
.progress span{display:block;height:100%;background:var(--brown);transform-origin:0 50%;transform:scaleX(0)}

/* Vaste navigatie die meescrollt */
.topbar{position:sticky;top:0;z-index:50;margin:0 -28px;padding:0 28px;transition:background .3s,box-shadow .3s,min-height .3s}
.topbar.is-scrolled{min-height:70px;background:color-mix(in srgb,var(--paper) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 30px -24px rgba(54,43,37,.5)}
.topbar nav a{transition:color .2s}
.topbar nav a:not(.nav-cta):hover,.topbar nav a.is-active{color:var(--brown)}
.nav-cta{transition:background .2s,color .2s,border-color .2s}
.nav-cta:hover{background:var(--ink);color:var(--on-ink)!important;border-color:var(--ink)}
.nav-tools{display:flex;align-items:center;gap:8px}
.icon-btn{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--veil);color:var(--ink);cursor:pointer;transition:background .2s,transform .3s}
.icon-btn:hover{background:var(--card)}
.icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.i-moon{display:none}[data-theme="dark"] .i-sun{display:none}[data-theme="dark"] .i-moon{display:block}
.menu-btn{display:none;flex-direction:column;gap:5px}
.menu-btn span{width:16px;height:2px;background:currentColor;border-radius:2px;transition:transform .3s}
.menu-btn[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* Knoppen en tegels reageren op hover */
.button{transition:transform .25s,background .25s,box-shadow .25s}
.button:hover{transform:translateY(-2px)}
.primary:hover{box-shadow:0 12px 26px -14px rgba(28,25,23,.7)}
.ghost:hover{background:var(--card)}
.portrait-card{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.portrait-card:hover{transform:rotate(0)}
.tile,.market-card,.certificate,.stat-card,.info-card{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,opacity .35s}
.tile:hover,.certificate:hover{transform:translateY(-3px);box-shadow:0 18px 40px -26px rgba(54,43,37,.45)}
[data-spot]{position:relative;isolation:isolate}
[data-spot]::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),var(--brown-soft),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none;z-index:-1}
[data-spot]:hover::after{opacity:1}
.tile.dark[data-spot]::after{background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.06),transparent 60%)}

/* Wisselend woord in de hero */
.rotator{color:var(--brown);display:inline-block}
.rotator.is-out{animation:wordOut .3s ease forwards}
.rotator.is-in{animation:wordIn .4s ease forwards}
@keyframes wordOut{to{opacity:0;transform:translateY(-.25em)}}
@keyframes wordIn{from{opacity:0;transform:translateY(.25em)}to{opacity:1;transform:none}}

/* Filters in de stijl van de chips */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:-10px 0 24px}
.filter{border:1px solid var(--line);padding:9px 14px;border-radius:999px;font:600 14px 'DM Sans',sans-serif;background:var(--veil);color:var(--ink);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.filter:hover{background:var(--card)}
.filter.is-active{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.market-card.is-dim{opacity:.28;transform:scale(.97)}
.project.is-hidden{display:none}

/* Projectvisuals in plaats van lege placeholders */
.project-visual{min-height:230px;border-radius:20px;background:var(--accent-soft);display:grid;place-items:center;padding:24px;overflow:hidden}
.project-visual svg{width:100%;max-width:320px;height:auto;overflow:visible}
.pv-muted{fill:var(--dash)}.pv-strong{fill:var(--brown)}
.pv-line{fill:none;stroke:var(--brown);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pv-dash{fill:none;stroke:var(--dash);stroke-width:2;stroke-dasharray:5 6}
.pv-area{fill:var(--brown-soft)}
.pv-box{fill:var(--card);stroke:var(--dash);stroke-width:1.5}
.open .pv-bars rect{animation:grow .9s cubic-bezier(.2,.7,.2,1) both;transform-box:fill-box;transform-origin:bottom}
.open .pv-bars rect:nth-child(2){animation-delay:.06s}.open .pv-bars rect:nth-child(3){animation-delay:.12s}.open .pv-bars rect:nth-child(4){animation-delay:.18s}.open .pv-bars rect:nth-child(5){animation-delay:.24s}.open .pv-bars rect:nth-child(6){animation-delay:.3s}
@keyframes grow{from{transform:scaleY(.1)}}
.open .pv-line{stroke-dasharray:320;animation:draw 1.3s ease both}
@keyframes draw{from{stroke-dashoffset:320}to{stroke-dashoffset:0}}
.pv-pulse{animation:pulse 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes pulse{50%{transform:scale(1.25)}}

/* Taalbalkjes */
.lang-row{margin-bottom:18px}
.lang-row p{margin:0 0 8px}
.meter{height:6px;border-radius:6px;background:var(--chip);overflow:hidden}
.meter span{display:block;height:100%;width:0;background:var(--brown);border-radius:6px;transition:width 1.3s cubic-bezier(.2,.7,.2,1)}
.is-visible .meter span{width:var(--w)}

/* Inschuiven bij scrollen */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js .reveal.is-visible{opacity:1;transform:none}
.js .reveal.is-visible.portrait-card{transform:rotate(1.2deg)}
.js .reveal.is-visible.portrait-card:hover{transform:rotate(0)}

.totop{color:inherit;text-decoration:none}.totop:hover{color:var(--brown)}

/* ---------- Responsive (origineel + toevoegingen) ---------- */
@media(max-width:900px){
  .topbar nav{display:none;position:absolute;top:calc(100% + 6px);left:16px;right:16px;flex-direction:column;align-items:stretch;gap:2px;padding:10px;background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:0 24px 50px -30px rgba(54,43,37,.6)}
  .topbar nav.is-open{display:flex}
  .topbar nav a{padding:13px 14px;border-radius:14px}
  .topbar nav a.nav-cta{text-align:center;margin-top:6px}
  .menu-btn{display:flex}
  .hero{grid-template-columns:1fr;padding-top:35px;gap:35px;min-height:0}.portrait-card{max-width:360px}.intro-grid,.split-section{grid-template-columns:1fr}.bento{grid-template-columns:1fr}.tile-large,.tile-wide{grid-column:auto}.market-grid{grid-template-columns:repeat(2,1fr)}.work-timeline article{grid-template-columns:1fr 72px;gap:14px}.work-timeline article>div:last-child{grid-column:1/-1}.project-detail{grid-template-columns:1fr}.intro-grid{margin-bottom:90px}.bento,.market-grid,.work-timeline,.certificate-grid,.calc{margin-bottom:95px}
  .calc{grid-template-columns:1fr}
}
@media(max-width:600px){
  .page-shell{padding:0 16px}.topbar{margin:0 -16px;padding:0 16px}.hero h1{font-size:45px}.hero-actions{align-items:flex-start;flex-direction:column}.section-head h2{font-size:35px}.project-timeline:before{left:0}.project{grid-template-columns:1fr}.project-date{padding:24px 0 0 24px}.project-body{margin-left:24px}.project-body:before{left:-30px}.market-grid{grid-template-columns:1fr 1fr}.contact-card{align-items:flex-start;flex-direction:column;padding:30px}.portrait-meta{align-items:flex-start;flex-direction:column;gap:3px}
  .tile-button{padding:24px}.content-pad{padding:0 24px 24px}.calc-inputs,.calc-out{padding:24px}.kpi b{font-size:23px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
}

/* Fix: dichte uitklapvakken lieten een strook tekst zien (padding viel buiten de inklap) */
.tile-content>*{min-height:0;visibility:hidden;transition:padding .35s ease,visibility .35s}
.tile-content>.content-pad{padding-bottom:0}
.tile-content>.project-detail{padding-bottom:0}
.open>.tile-content>*,.project-body.open>.tile-content>*{visibility:visible}
.open>.tile-content>.content-pad{padding-bottom:30px}
.project-body.open>.tile-content>.project-detail{padding-bottom:32px}
.bento{align-items:start}

/* Regel met wisselend platform onder de kop */
.platform-line{font:700 clamp(21px,2.2vw,27px)/1.35 'Manrope',sans-serif;letter-spacing:-.02em;max-width:620px;margin:-6px 0 20px}
.platform-line .rotator{color:var(--brown)}

/* Lopende band met platformen en tools */
body{overflow-x:clip}
.ticker{width:100vw;margin:-56px calc(50% - 50vw) 110px;background:var(--dark);color:#f5f1ed;padding:17px 0;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker-track{display:flex;width:max-content;animation:ticker 42s linear infinite}
.ticker span{display:flex;align-items:center;gap:40px;padding-right:40px;font:700 15px 'Manrope',sans-serif;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.ticker span::after{content:"";width:7px;height:7px;border-radius:50%;background:#c99f88}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes ticker{to{transform:translateX(-50%)}}
@media(max-width:900px){.ticker{margin-top:-40px;margin-bottom:85px}}
.menu-btn{align-items:center;justify-content:center}

/* ---------- Projecten per jaar ---------- */
.project-years{display:grid;gap:56px;margin-bottom:125px}
.year-group.is-hidden{display:none}
.year-label{display:flex;align-items:baseline;gap:14px;margin-bottom:18px}
.year-label b{font:800 34px 'Manrope',sans-serif;letter-spacing:-.04em;color:var(--brown)}
.year-label small{color:var(--muted);font-size:14px}
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;align-items:start}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.pcard:hover{transform:translateY(-3px);box-shadow:0 18px 40px -26px rgba(54,43,37,.45)}
.pcard.is-hidden{display:none}
.pgrid>.pcard:last-child:nth-child(odd){grid-column:1/-1}
.pcard-button{width:100%;border:0;background:transparent;color:inherit;text-align:left;display:flex;justify-content:space-between;gap:25px;cursor:pointer;font:inherit;padding:28px 30px}
.pcard-button h3{font-size:26px;margin:14px 0 6px}
.pcard-button p{color:var(--muted);margin:0;line-height:1.55;max-width:640px}
.ptags{display:flex;flex-wrap:wrap;gap:6px}
.ptags span{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--brown);background:var(--accent-soft);padding:6px 10px;border-radius:999px}
.open>.pcard-button .plus{transform:rotate(45deg)}
.pcard-detail{display:grid;grid-template-columns:1fr;gap:22px;padding:0 30px}
.pcard-detail .project-visual{min-height:190px}
.pgrid>.pcard:last-child:nth-child(odd) .pcard-detail{grid-template-columns:1.1fr .9fr;gap:30px}
.pcard-detail h4{margin:0 0 8px}
.pcard-detail p{color:var(--muted);line-height:1.7;margin:0 0 16px}
.tile-content>.pcard-detail{padding-bottom:0}
.open>.tile-content>.pcard-detail{padding-bottom:30px}

/* ---------- Werkervaring: animatie bij scrollen ---------- */
.work-timeline{position:relative}
.work-timeline::before,.work-timeline::after{content:"";position:absolute;left:251px;top:68px;width:2px;border-radius:2px;transform:translateX(-1px)}
.work-timeline::before{bottom:68px;background:var(--line)}
.work-timeline::after{height:calc((100% - 136px) * var(--wt-n, 0));background:var(--brown);transition:height .15s linear}
.work-timeline .company-mark{position:relative;z-index:1;transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .6s,border-color .4s,box-shadow .4s}
.work-timeline article.is-current .company-mark{border-color:var(--brown);box-shadow:0 0 0 6px var(--brown-soft)}
.js .work-timeline article.reveal{opacity:1;transform:none}
.js .work-timeline article .year{opacity:0;transform:translateX(-28px);transition:opacity .7s,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .work-timeline article .company-mark{opacity:0;transform:scale(.5) rotate(-10deg)}
.js .work-timeline article>div:last-child{opacity:0;transform:translateY(24px);transition:opacity .8s .18s,transform .8s .18s cubic-bezier(.2,.7,.2,1)}
.js .work-timeline article.is-visible .year,.js .work-timeline article.is-visible>div:last-child{opacity:1;transform:none}
.js .work-timeline article.is-visible .company-mark{opacity:1;transform:none;transition-delay:.08s}
@media(max-width:900px){
  .pgrid{grid-template-columns:1fr}
  .pcard-detail,.pgrid>.pcard:last-child:nth-child(odd) .pcard-detail{grid-template-columns:1fr}
  .work-timeline::before,.work-timeline::after{display:none}
}
@media(max-width:600px){.pcard-button{padding:24px}.pcard-detail{padding:0 24px}.year-label b{font-size:28px}}

/* ---------- Jaartabs bij projecten ---------- */
.year-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:-10px 0 34px}
.year-tab{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px 22px;border:1px solid var(--line);border-radius:22px;background:var(--veil);color:var(--ink);cursor:pointer;font:inherit;text-align:left;transition:background .25s,color .25s,border-color .25s,transform .25s}
.year-tab b{font:800 24px 'Manrope',sans-serif;letter-spacing:-.04em}
.year-tab small{font-size:13px;color:var(--muted);transition:color .25s}
.year-tab:hover{background:var(--card);transform:translateY(-2px)}
.year-tab.is-active{background:var(--brown);border-color:var(--brown);color:#fff}
.year-tab.is-active small{color:#eadfd9}
.year-group.single .year-label{display:none}
.year-group.swap-in .pcard{animation:cardIn .55s cubic-bezier(.2,.7,.2,1) both}
.year-group.swap-in .pcard:nth-child(2){animation-delay:.07s}.year-group.swap-in .pcard:nth-child(3){animation-delay:.14s}.year-group.swap-in .pcard:nth-child(4){animation-delay:.21s}
@keyframes cardIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(max-width:600px){.year-tab{padding:12px 16px}.year-tab b{font-size:20px}}

/* ==========================================================
   Aanscherping: rustiger, minder effecten, strakkere details
   ========================================================== */
/* Kanalen gegroepeerd */
.market-grid{grid-template-columns:repeat(5,1fr)}
.market-card{min-height:0;padding:24px 22px;justify-content:flex-start;gap:14px}
.cc{display:flex;flex-wrap:wrap;gap:6px}
.cc span{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--muted);border:1px solid var(--line);padding:5px 9px;border-radius:999px}
/* Talen compact */
.lang-strip{display:flex;align-items:center;gap:40px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:22px 28px;margin-bottom:14px}
.lang-strip div{display:flex;align-items:baseline;gap:10px}
.lang-strip b{font:800 18px 'Manrope',sans-serif}
.lang-strip small{color:var(--muted);font-size:14px}
/* Rustiger beweging */
.js .reveal{transform:translateY(12px);transition-duration:.6s}
.tile:hover,.certificate:hover,.pcard:hover,.year-tab:hover,.button:hover{transform:none;box-shadow:none}
.tile,.pcard,.certificate{transition:border-color .2s}
.tile:not(.dark):not(.accent):not(.accent-soft):hover,.pcard:hover,.certificate:hover{border-color:#cbbfb7}
[data-theme="dark"] .pcard:hover,[data-theme="dark"] .certificate:hover,[data-theme="dark"] .tile:not(.dark):not(.accent):not(.accent-soft):hover{border-color:#54483f}
.plus{width:34px;height:34px;font-size:22px;border-color:var(--line);color:var(--ink)}
.tile.dark .plus{border-color:rgba(255,255,255,.25);color:#fff}
.portrait-card:hover{transform:rotate(1.2deg)}
.js .reveal.is-visible.portrait-card:hover{transform:rotate(1.2deg)}
.ticker{margin-top:-60px}
@media(max-width:900px){.market-grid{grid-template-columns:repeat(2,1fr)}.lang-strip{gap:18px 32px}}
@media(max-width:900px){.market-grid .market-card:first-child{grid-column:1/-1}}

/* ==========================================================
   Dynamische onderdelen, ronde 2
   ========================================================== */

/* Navigatie: schuivend streepje onder de actieve sectie */
.topbar nav{position:relative}
.nav-ink{position:absolute;bottom:-8px;height:2px;border-radius:2px;background:var(--brown);left:0;width:0;opacity:0;transition:left .45s cubic-bezier(.2,.7,.2,1),width .45s cubic-bezier(.2,.7,.2,1),opacity .3s;pointer-events:none}
.topbar nav a.is-active{color:var(--ink)}
@media(max-width:900px){.nav-ink{display:none}}

/* Koppen schuiven omhoog uit een masker */
.h-mask{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.h-mask>span{display:block;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.js .reveal:not(.is-visible) .h-mask>span{transform:translateY(105%)}

/* Hero: foto kantelt mee met de muis en zweeft bij scrollen */
.js .reveal.is-visible.portrait-card,.js .reveal.is-visible.portrait-card:hover,.portrait-card:hover{transform:perspective(1000px) translateY(var(--py,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotate(1.2deg)}
.portrait-card.is-tilting{transition:transform .12s linear}
.portrait-wrap{position:relative}
.portrait-wrap::after{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.22),transparent 55%);opacity:0;transition:opacity .3s;pointer-events:none}
.portrait-card.is-tilting .portrait-wrap::after{opacity:1}

/* Tegels: subtiele lift terug */
.tile,.pcard,.certificate{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .2s}
.tile:hover,.pcard:hover,.certificate:hover{transform:translateY(-3px);box-shadow:0 20px 40px -30px rgba(54,43,37,.55)}
.button{transition:transform .25s,background .25s,box-shadow .25s}
.button:hover{transform:translateY(-2px)}

/* Werkwijze: vaste kolom links, stappen lichten op bij scrollen */
.process{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;margin-bottom:125px}
.process-sticky{position:sticky;top:120px;align-self:start}
.process-sticky h2{font-size:44px;letter-spacing:-.035em;margin:10px 0}
.process-sticky p{color:var(--muted);font-size:18px;line-height:1.6;max-width:420px}
.process-count{display:flex;align-items:baseline;gap:8px;margin-top:34px}
.process-count b{font:800 96px/1 'Manrope',sans-serif;letter-spacing:-.06em;color:var(--brown);min-width:2ch;transition:opacity .25s}
.process-count span{font:800 22px 'Manrope',sans-serif;color:var(--muted)}
.process-count b.flip{opacity:0}
.process-bar{margin-top:18px;height:3px;border-radius:3px;background:var(--line);max-width:320px;overflow:hidden}
.process-bar span{display:block;height:100%;width:25%;background:var(--brown);border-radius:3px;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.process-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.pstep{min-height:46vh;display:flex;flex-direction:column;justify-content:center;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:34px;opacity:.38;transform:scale(.97);transition:opacity .5s,transform .5s cubic-bezier(.2,.7,.2,1),background .5s,border-color .5s}
.pstep.is-active{opacity:1;transform:none;border-color:#cbbfb7}
.pstep:first-child{background:var(--accent)}
.pstep:nth-child(3){background:var(--accent-soft)}
.pstep-n{font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--brown)}
.pstep h3{font-size:32px;margin:10px 0 10px;letter-spacing:-.03em}
.pstep p{color:var(--muted);line-height:1.7;margin:0 0 18px;max-width:520px}

/* Kanalen-verkenner */
.channels{display:grid;grid-template-columns:.8fr 1.2fr;gap:14px;margin-bottom:125px;align-items:stretch}
.channel-list{display:grid;gap:10px}
.channel{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 22px;border:1px solid var(--line);border-radius:20px;background:var(--card);color:var(--ink);cursor:pointer;font:inherit;text-align:left;transition:background .3s,border-color .3s,color .3s,transform .3s}
.channel:hover{transform:translateX(4px)}
.channel b{font:800 22px 'Manrope',sans-serif;letter-spacing:-.03em}
.channel.is-active{background:var(--dark);border-color:var(--dark);color:#fff;transform:translateX(8px)}
.channel.is-active .cc span{color:#d8ccc5;border-color:rgba(255,255,255,.2)}
.channel-timer{position:absolute;left:0;bottom:0;height:3px;width:0;background:#c99f88}
.channel.is-active.is-playing .channel-timer{animation:chTimer 5s linear forwards}
@keyframes chTimer{to{width:100%}}
.channel-stage{position:relative;background:var(--accent);border-radius:var(--radius);padding:38px;min-height:380px;overflow:hidden}
.ch-panel{position:absolute;inset:38px;opacity:0;transform:translateY(16px);transition:opacity .45s,transform .55s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.ch-panel.is-active{position:relative;inset:auto;opacity:1;transform:none;pointer-events:auto}
.ch-panel h3{font-size:34px;letter-spacing:-.035em;margin:12px 0 22px}
.ch-list{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:12px}
.ch-list li{position:relative;padding-left:28px;line-height:1.55;opacity:0;transform:translateX(-10px);transition:opacity .4s,transform .5s cubic-bezier(.2,.7,.2,1)}
.ch-list li::before{content:"";position:absolute;left:0;top:.55em;width:14px;height:2px;background:var(--brown)}
.ch-panel.is-active .ch-list li{opacity:1;transform:none}
.ch-panel.is-active .ch-list li:nth-child(2){transition-delay:.06s}.ch-panel.is-active .ch-list li:nth-child(3){transition-delay:.12s}.ch-panel.is-active .ch-list li:nth-child(4){transition-delay:.18s}.ch-panel.is-active .ch-list li:nth-child(5){transition-delay:.24s}
.ch-panel .chips span{background:var(--veil)}

/* Terug naar boven met voortgangsring */
.to-top{position:fixed;right:22px;bottom:22px;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--card);color:var(--ink);text-decoration:none;font-weight:800;box-shadow:0 14px 30px -18px rgba(54,43,37,.6);opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;transition:opacity .3s,transform .4s cubic-bezier(.2,.7,.2,1);z-index:40}
.to-top.is-shown{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{transform:translateY(-3px)}
.to-top svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.to-top circle{fill:none;stroke-width:2.5}
.ring-bg{stroke:var(--line)}
.ring{stroke:var(--brown);stroke-linecap:round;stroke-dasharray:125.7;stroke-dashoffset:125.7}

@media(max-width:900px){
  .process{grid-template-columns:1fr;gap:28px}
  .process-sticky{position:static}
  .process-count,.process-bar{display:none}
  .pstep{min-height:0;opacity:1;transform:none}
  .channels{grid-template-columns:1fr}
  .channel-list{display:flex;overflow-x:auto;gap:8px;padding-bottom:4px;scrollbar-width:none}
  .channel-list::-webkit-scrollbar{display:none}
  .channel{flex:none;padding:14px 18px}
  .channel .cc{display:none}
  .channel:hover,.channel.is-active{transform:none}
  .channel-stage{padding:26px;min-height:0}
  .ch-panel{inset:26px}
  .ch-panel h3{font-size:27px}
}
@media(max-width:600px){.process-sticky h2{font-size:35px}.pstep{padding:26px}.pstep h3{font-size:26px}.to-top{right:16px;bottom:16px}}
@media(prefers-reduced-motion:reduce){.h-mask>span{transform:none!important}}

/* Uitgelicht project met screenshot */
.pgrid>.pcard--wide{grid-column:1/-1}
.pcard--wide .pcard-detail{grid-template-columns:.8fr 1.2fr;gap:30px;align-items:start}
.shot{margin:0}
.shot-btn{display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#1a1716;cursor:zoom-in}
.shot-btn img{display:block;width:100%;height:auto;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.shot-btn:hover img{transform:scale(1.03)}
.shot figcaption{margin-top:10px;font-size:13px;color:var(--muted)}
.lightbox{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px;background:rgba(20,16,14,.86);opacity:0;pointer-events:none;transition:opacity .3s}
.lightbox.is-open{opacity:1;pointer-events:auto}
.lightbox img{max-width:min(1400px,100%);max-height:88vh;border-radius:14px;transform:scale(.96);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.lightbox.is-open img{transform:none}
.lightbox-close{position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;font-size:18px;cursor:pointer}
@media(max-width:900px){.pcard--wide .pcard-detail{grid-template-columns:1fr}}

/* ABCD: aanpak per klasse */
.klassen{list-style:none;padding:0;margin:4px 0 20px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.klassen li{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--veil)}
.klassen b{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:800 14px 'Manrope',sans-serif;border:1.5px solid var(--brown);color:var(--brown)}
.klassen li:first-child b{background:var(--brown);color:#fff}
.klassen strong{display:block;font:700 15px 'Manrope',sans-serif;margin-bottom:2px}
.klassen span{display:block;font-size:14px;line-height:1.5;color:var(--muted)}
.pcard.open .klassen li{animation:cardIn .5s cubic-bezier(.2,.7,.2,1) both}
.pcard.open .klassen li:nth-child(2){animation-delay:.06s}.pcard.open .klassen li:nth-child(3){animation-delay:.12s}.pcard.open .klassen li:nth-child(4){animation-delay:.18s}
@media(max-width:600px){.klassen{grid-template-columns:1fr}}

/* ==========================================================
   Blog
   ========================================================== */
.blog-hero{padding:70px 0 50px;max-width:880px}
.blog-hero h1{margin:18px 0 22px}
.post-list{display:grid;gap:14px;margin-bottom:120px}
.post-card{display:grid;grid-template-columns:1.05fr 1fr;gap:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;color:var(--ink);text-decoration:none;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.post-card:hover{transform:translateY(-3px);box-shadow:0 20px 40px -30px rgba(54,43,37,.55)}
.post-thumb{background:#1a1716;overflow:hidden;min-height:260px}
.post-thumb img{width:100%;height:100%;object-fit:cover;object-position:left top;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.post-card:hover .post-thumb img{transform:scale(1.04)}
.post-body{padding:34px;display:flex;flex-direction:column;gap:12px}
.post-body h2{font-size:30px;letter-spacing:-.035em;margin:0}
.post-body p{color:var(--muted);line-height:1.6;margin:0}
.post-meta{display:flex;gap:14px;font-size:13px;font-weight:700;color:var(--brown)}
.post-more{margin-top:auto;font-weight:700;display:inline-flex;gap:6px}
.post-more span{transition:transform .25s}
.post-card:hover .post-more span{transform:translateX(4px)}

/* Artikel */
.read-progress{position:fixed;inset:0 0 auto;height:3px;z-index:60;pointer-events:none}
.read-progress span{display:block;height:100%;background:var(--brown);transform-origin:0 50%;transform:scaleX(0)}
.article{max-width:760px;margin:0 auto 110px}
.back-link{display:inline-block;margin-top:40px;color:var(--muted);text-decoration:none;font-weight:600;transition:color .2s,transform .2s}
.back-link:hover{color:var(--brown);transform:translateX(-3px)}
.article-head{padding:28px 0 36px;border-bottom:1px solid var(--line);margin-bottom:36px}
.article-head h1{font-size:clamp(38px,5vw,60px);margin:14px 0 18px}
.article-head .lead{font-size:19px;margin:0 0 20px}
.prose{font-size:18px;line-height:1.8}
.prose p{margin:0 0 22px;color:var(--ink)}
.prose h2{font-size:28px;letter-spacing:-.03em;margin:44px 0 14px}
.prose ul:not(.klassen){margin:0 0 22px;padding-left:22px}
.prose ul:not(.klassen) li{margin-bottom:8px}
.prose .shot{margin:34px 0}
.prose .klassen{margin:8px 0 24px}
.prose .klassen span{font-size:15px}
.article-end{margin-top:50px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 30px;border-radius:var(--radius);background:var(--accent)}
.article-end p{margin:8px 0 0;color:var(--ink)}
@media(max-width:900px){.post-card{grid-template-columns:1fr}.post-thumb{min-height:200px;max-height:240px}}
@media(max-width:600px){.post-body{padding:24px}.post-body h2{font-size:25px}.prose{font-size:17px}.article-end{flex-direction:column;align-items:flex-start;padding:24px}.blog-hero{padding-top:35px}}

/* ==========================================================
   Mobiel: eigen dynamiek (vegen, scrollen, tikken)
   ========================================================== */
.process-dots{display:none}
@media(max-width:900px){
  /* Werkwijze als veegkaarten met teller en bolletjes */
  .process-sticky{position:static}
  .process-count{display:flex;margin-top:18px}
  .process-count b{font-size:56px}
  .process-count span{font-size:16px}
  .process-bar{display:block;margin-top:12px;max-width:none}
  .process-steps{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:4px 16px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .process-steps::-webkit-scrollbar{display:none}
  .pstep{flex:0 0 84%;scroll-snap-align:center;min-height:300px;opacity:.45;transform:scale(.94)}
  .pstep.is-active{opacity:1;transform:none}
  .process-dots{display:flex;justify-content:center;gap:8px;margin-top:14px}
  .process-dots button{width:8px;height:8px;padding:0;border:0;border-radius:8px;background:var(--line);transition:width .35s cubic-bezier(.2,.7,.2,1),background .35s}
  .process-dots button.is-active{width:26px;background:var(--brown)}
  .process{gap:20px}

  /* Kanalen: tabs blijven in beeld en tonen de aftelbalk */
  .channel-list{scroll-snap-type:x proximity;margin:0 -16px;padding:0 16px 4px}
  .channel{scroll-snap-align:center}
  .channel-stage{min-height:340px}

  /* Werkervaring: tijdlijn met meelopende lijn ook op mobiel */
  .work-timeline{padding-left:26px}
  .work-timeline::before,.work-timeline::after{display:block;left:8px;top:44px}
  .work-timeline::before{bottom:44px}
  .work-timeline::after{height:calc((100% - 88px) * var(--wt-n, 0))}
  .work-timeline article{position:relative}
  .work-timeline article::before{content:"";position:absolute;left:-24px;top:38px;width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid var(--line);z-index:1;transition:background .4s,border-color .4s,box-shadow .4s}
  .work-timeline article.is-current::before{background:var(--brown);border-color:var(--brown);box-shadow:0 0 0 5px var(--brown-soft)}

  /* Menu: links vallen één voor één in */
  .topbar nav.is-open a{animation:menuIn .4s cubic-bezier(.2,.7,.2,1) both}
  .topbar nav.is-open a:nth-child(2){animation-delay:.03s}.topbar nav.is-open a:nth-child(3){animation-delay:.06s}.topbar nav.is-open a:nth-child(4){animation-delay:.09s}.topbar nav.is-open a:nth-child(5){animation-delay:.12s}.topbar nav.is-open a:nth-child(6){animation-delay:.15s}.topbar nav.is-open a:nth-child(7){animation-delay:.18s}.topbar nav.is-open a:nth-child(8){animation-delay:.21s}.topbar nav.is-open a:nth-child(9){animation-delay:.24s}

  /* Foto: kantelt mee met scrollen */
  .portrait-card{transition:transform .2s linear}

  /* Inschuiven iets duidelijker op kleine schermen */
  .js .reveal{transform:translateY(22px)}
  .js .bento .reveal:nth-child(odd):not(.is-visible){transform:translate(-16px,18px)}
  .js .bento .reveal:nth-child(even):not(.is-visible){transform:translate(16px,18px)}
}
@keyframes menuIn{from{opacity:0;transform:translateY(-8px)}}

/* Tikfeedback op touchscreens */
@media(hover:none){
  .tile,.pcard,.certificate,.channel,.year-tab,.button,.filter,.post-card{-webkit-tap-highlight-color:transparent}
  .tile:active,.pcard:active,.certificate:active,.post-card:active{transform:scale(.985)}
  .channel:active,.year-tab:active,.button:active{transform:scale(.96)}
}
@media(max-width:900px){.topbar nav{position:absolute}}

/* Werkgeverslogo's */
.company-mark{overflow:hidden;padding:0}
.company-mark img{width:100%;height:100%;object-fit:cover;display:block}
.work-win{display:flex;gap:12px;align-items:flex-start;margin-top:14px!important;padding:14px 16px;border-radius:16px;background:var(--accent-soft);color:var(--ink)!important}
.work-win b{flex:none;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--brown);padding-top:3px}
@media(max-width:600px){.work-win{flex-direction:column;gap:4px}}

/* ---------- Blog: filter, zoeken, inhoudsopgave, delen ---------- */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.blog-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin:-10px 0 24px}
.blog-tools .filters{margin:0}
.filter small{margin-left:6px;font-size:12px;opacity:.6}
.blog-search input{width:260px;max-width:100%;font:inherit;font-size:15px;padding:11px 16px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);transition:border-color .2s,width .3s}
.blog-search input:focus{outline:none;border-color:var(--brown);width:300px}
.blog-empty{margin:0 0 24px;padding:22px;border:1px dashed var(--dash);border-radius:20px;color:var(--muted);text-align:center}
.post-card.is-hidden{display:none}
.post-list.swap .post-card{animation:cardIn .5s cubic-bezier(.2,.7,.2,1) both}
.ptags a{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--brown);background:var(--accent-soft);padding:6px 10px;border-radius:999px;text-decoration:none;transition:background .2s,color .2s}
.ptags a:hover{background:var(--brown);color:#fff}
.article{max-width:1060px}
.article-head{max-width:760px}
.article-grid{display:grid;grid-template-columns:220px minmax(0,760px);gap:60px;align-items:start}
.article-side{position:sticky;top:110px;display:grid;gap:28px}
.toc ol{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:4px;border-left:2px solid var(--line)}
.toc a{display:block;padding:6px 0 6px 14px;margin-left:-2px;border-left:2px solid transparent;color:var(--muted);text-decoration:none;font-size:14px;line-height:1.4;transition:color .2s,border-color .2s}
.toc a:hover{color:var(--ink)}
.toc a.is-active{color:var(--ink);border-left-color:var(--brown);font-weight:600}
.share{display:grid;gap:8px}
.share .eyebrow{margin-bottom:4px}
.share-btn{display:inline-flex;justify-content:center;padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font:600 14px 'DM Sans',sans-serif;text-decoration:none;cursor:pointer;transition:background .2s,border-color .2s}
.share-btn:hover{border-color:var(--brown)}
.share-btn.is-done{background:var(--brown);border-color:var(--brown);color:#fff}
.prose h2{scroll-margin-top:100px}
@media(max-width:1000px){
  .article-grid{grid-template-columns:1fr;gap:28px}
  .article-side{position:static;grid-template-columns:1fr;padding:20px;border:1px solid var(--line);border-radius:20px;background:var(--card)}
  .share{grid-template-columns:auto 1fr 1fr;align-items:center}
  .share .eyebrow{margin:0}
}
@media(max-width:600px){.blog-search,.blog-search input,.blog-search input:focus{width:100%}.share{grid-template-columns:1fr 1fr}.share .eyebrow{grid-column:1/-1}}
@media(min-width:1001px){.article-head,.back-link{margin-left:280px}}
.work-win{margin-top:14px}
.work-win>div{min-width:0}
.work-timeline .work-win p{margin:0;color:var(--ink);max-width:none}
.work-win .chips{margin-top:12px}
.work-win .chips span{background:var(--card);font-size:12px;padding:6px 10px}
.work-win b{min-width:78px}
.work-timeline article.is-visible .work-win{animation:cardIn .7s .25s cubic-bezier(.2,.7,.2,1) both}

/* ---------- Blog: beoordeling en reacties ---------- */
.feedback{display:grid;grid-template-columns:1fr 1.4fr;gap:14px;margin-top:60px}
.rating,.comments{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:30px}
.rating h2,.comments h2{font-size:24px;letter-spacing:-.03em;margin:10px 0 18px}
.stars{display:inline-flex;flex-direction:row-reverse;gap:4px}
.stars input{position:absolute;opacity:0;pointer-events:none}
.stars label{font-size:38px;line-height:1;color:var(--line);cursor:pointer;transition:color .15s,transform .2s cubic-bezier(.2,.7,.2,1)}
.stars label:hover,.stars label:hover~label,.stars input:checked~label{color:#d9a441}
.stars label:hover{transform:scale(1.15)}
.stars input:focus-visible+label{outline:2px solid var(--brown);outline-offset:2px;border-radius:6px}
.rating.is-done .stars{pointer-events:none}
.rating.is-done .stars label{animation:starPop .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes starPop{40%{transform:scale(1.25)}}
.form-msg{min-height:1.4em;margin:12px 0 0;font-size:14px;color:var(--muted)}
.form-msg.ok{color:var(--good)}
.form-msg.err{color:var(--bad)}
.comment-list{display:grid;gap:10px;margin-bottom:20px}
.comment{padding:16px 18px;border-radius:16px;background:var(--accent-soft)}
.comment b{font-family:'Manrope',sans-serif}
.comment time{margin-left:10px;font-size:13px;color:var(--muted)}
.comment p{margin:6px 0 0;line-height:1.6}
.comment-empty{margin:0;color:var(--muted);font-size:15px}
.comment-form{display:grid;gap:12px}
.field-in{display:grid;gap:6px;font-size:14px;font-weight:600}
.field-in input,.field-in textarea{font:inherit;font-weight:400;font-size:16px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--paper);color:var(--ink);resize:vertical;transition:border-color .2s}
.field-in input:focus,.field-in textarea:focus{outline:none;border-color:var(--brown)}
.comment-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.comment-actions small{color:var(--muted)}
.comment-form button[disabled]{opacity:.6;cursor:wait}
@media(min-width:1001px){.feedback{margin-left:280px}}
@media(max-width:1000px){.feedback{grid-template-columns:1fr}}
@media(max-width:600px){.rating,.comments{padding:22px}.stars label{font-size:42px}}
.feedback{align-items:start}
@media(min-width:1001px){.article .article-end{margin-left:280px}}

/* ---------- Blog: één ster geven ---------- */
.feedback{grid-template-columns:1fr}
.like-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px 30px}
.like-text{margin:8px 0 0;font-weight:600}
.like-btn{position:relative;flex:none;width:72px;height:72px;border-radius:50%;border:1.5px solid var(--line);background:var(--paper);display:grid;place-items:center;cursor:pointer;transition:transform .2s,border-color .3s,background .3s}
.like-btn:hover{transform:scale(1.06);border-color:#d9a441}
.like-btn:active{transform:scale(.92)}
.like-btn svg{width:34px;height:34px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round;transition:fill .3s,stroke .3s}
.like-btn.is-on{border-color:#d9a441;background:rgba(217,164,65,.12);cursor:default}
.like-btn.is-on svg{fill:#d9a441;stroke:#d9a441;animation:starPop .6s cubic-bezier(.2,.7,.2,1)}
@keyframes starPop{0%{transform:scale(.6)}45%{transform:scale(1.3)}100%{transform:scale(1)}}
.burst{position:absolute;inset:0;border-radius:50%;pointer-events:none}
.burst::before,.burst::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid #d9a441;opacity:0}
.like-btn.pop .burst::before{animation:ring .6s ease-out}
.like-btn.pop .burst::after{animation:ring .6s .12s ease-out}
@keyframes ring{0%{opacity:.8;transform:scale(.7)}100%{opacity:0;transform:scale(1.6)}}
@media(max-width:600px){.like-bar{padding:20px 22px}.like-btn{width:64px;height:64px}}

/* ---------- Artikel: compactere zijkolom en deelknoppen ---------- */
.article-grid{grid-template-columns:170px minmax(0,760px);gap:50px}
.share{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.share .eyebrow{width:100%;margin:0 0 2px}
.share-btn{padding:6px 11px;font-size:12.5px;font-weight:600}
.toc a{font-size:13.5px}
@media(min-width:1001px){.article-head,.back-link,.feedback,.article .article-end{margin-left:220px}}
@media(max-width:1000px){
  .article-side{padding:0;border:0;background:none;gap:0}
  .toc{display:none}
  .share{display:flex;flex-wrap:wrap;gap:6px}
  .share .eyebrow{width:auto;margin-right:6px}
  .share-btn{padding:6px 11px}
}

/* ---------- Deelknoppen als iconen ---------- */
.share{display:grid;gap:10px}
.share .eyebrow{width:auto;margin:0}
.share-row{display:flex;flex-wrap:wrap;gap:8px}
.share-ic{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;padding:0;text-decoration:none;transition:transform .2s cubic-bezier(.2,.7,.2,1),border-color .2s,background .2s,color .2s}
.share-ic:hover{transform:translateY(-2px);border-color:var(--brown);color:var(--brown)}
.share-ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.share-ic .ic-check{display:none}
.share-ic.is-done{background:var(--brown);border-color:var(--brown);color:#fff}
.share-ic.is-done .ic-link{display:none}
.share-ic.is-done .ic-check{display:block;animation:starPop .4s cubic-bezier(.2,.7,.2,1)}
.share-ic span{display:grid;place-items:center}
.share-toast{min-height:1.2em;font-size:12.5px;color:var(--brown);font-weight:600}
@media(max-width:1000px){
  .share{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
  .share .eyebrow{margin-right:4px}
  .share-toast{min-height:0}
}

/* Klassenblokjes: nooit breder dan het scherm */
.klassen{grid-template-columns:repeat(2,minmax(0,1fr))}
.klassen li,.klassen div{min-width:0}
.klassen span{overflow-wrap:break-word}
@media(max-width:600px){.klassen{grid-template-columns:minmax(0,1fr)}}
@media(max-width:1000px){.article-grid{grid-template-columns:minmax(0,1fr);gap:24px}}