/* ==========================================================================
   Studio-laag (2 okt 2026, verzoek Ashwin: "meer studiokwaliteit").
   Komt NA style.css en verandert alleen vorm, ritme en details; kleuren,
   beeld en teksten blijven gelijk. Terugdraaien = dit bestand niet laden.
   ========================================================================== */

/* 1. Sectie-overgangen: één systeem. Elke hoofdsectie na de hero is een vel
   met afgeronde bovenhoeken dat een hoekradius over het vorige vel schuift.
   Licht op licht zie je niet; licht op donker en donker op licht wel. */
:root{--vel:clamp(22px,3vw,40px)}
main>section:not(.chero),main>.band,.foot{position:relative;isolation:isolate;
  border-radius:var(--vel) var(--vel) 0 0;margin-top:calc(-1 * var(--vel))}
main>section.section:not(.dark),main>section.statement:not(.dark){background:var(--paper)}
main>section.dark,.foot{box-shadow:0 -18px 40px rgba(18,20,15,.10)}
main>.band{overflow:hidden}
main>section.imgsplit{border-radius:var(--vel)}
main>section.imgsplit+section,main>section.imgsplit+.band{margin-top:calc(-1 * var(--vel))}
.wrap:has(>.next){position:relative;z-index:1}

/* 2. Knoppen: gewone schrijfwijze, pijl in een cirkel die meebeweegt.
   Secundair = tekstlink met groeiende onderstreping. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;
  text-transform:none;letter-spacing:0;font-weight:500;font-size:1rem;line-height:1.2;
  padding:12px 12px 12px 22px;transition:background .25s,color .25s}
.btn:not(:has(.btn__pijl)){padding:14px 22px}
.btn__pijl{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--paper);color:var(--ink);flex:none;transition:transform .35s cubic-bezier(.16,.84,.28,1)}
.btn__pijl svg{width:14px;height:14px;display:block}
.btn:hover .btn__pijl{transform:translateX(4px)}
.dark .btn__pijl,.consent .btn__pijl{background:var(--ink);color:var(--paper)}
@media(max-width:1080px){.chero__panel .btn__pijl{background:var(--ink);color:var(--paper)}}
.btn--ghost,.dark .btn--ghost,.chero__panel .btn--ghost,.statement .btn--ghost{background:none!important;box-shadow:none!important;
  border-radius:0;padding:12px 2px;position:relative;color:inherit}
.btn--ghost::after{content:"";position:absolute;left:2px;right:2px;bottom:6px;height:1px;background:currentColor;
  opacity:.55;transition:opacity .2s}
.btn--ghost:hover::after{opacity:1}
.btn--ghost:hover{color:inherit!important}
.consent .btn--ghost{color:var(--ink)}
.link{border-bottom:0;padding-bottom:3px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;
  transition:gap .2s}

/* 3. Minder lijnen en geen kaders: nummers als serif-cijfers in terracotta. */
.steps__n{width:auto;height:auto;border:0;font-family:"Fraunces",Georgia,serif;font-size:1.6rem;
  letter-spacing:0;color:var(--accent);line-height:1}
.steps__i{grid-template-columns:2.6rem 1fr;border-top-color:rgba(245,243,237,.12)}
.steps__i:last-child{border-bottom:0}
.stick__row{border-bottom-color:transparent}
.stick__r .stick__row+.stick__row{border-top:1px solid var(--line)}
.dark .stick__r .stick__row+.stick__row{border-top-color:rgba(245,243,237,.14)}

/* 4. Labels boven koppen weg: rust en een redactionele uitstraling. */
main section p.eyebrow[data-reveal],.chero__kicker{display:none}
main section p.eyebrow[data-reveal]+.h-sec,main section p.eyebrow[data-reveal]+.h-sub{margin-top:0!important}

/* 7. Beeld: zachte zoom bij in beeld komen, consequente verhouding. */
.index__media{border-radius:var(--r-s);overflow:hidden}
.index__media img{aspect-ratio:4/3;object-fit:cover;transform:scale(1.06);transition:transform 1.6s cubic-bezier(.16,.84,.28,1)}
[data-reveal].in .index__media img,.index a:hover .index__media img{transform:scale(1)}

/* 8. Volgende pagina: twee grote beeldkaarten. */
.next{border-top:0;gap:clamp(12px,1.6vw,22px);padding-block:clamp(8px,2vw,32px) calc(clamp(48px,6vw,96px) + var(--vel))}
.next a{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;min-height:clamp(220px,26vw,360px);padding:clamp(20px,2.4vw,32px);
  border-radius:var(--r-m);overflow:hidden;color:var(--paper);isolation:isolate}
.next__beeld{position:absolute;inset:0;z-index:-1}
.next__beeld img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,.84,.28,1)}
.next a::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(18,20,15,.05) 30%,rgba(18,20,15,.72) 100%)}
.next a>*:not(.next__beeld){position:relative;z-index:1}
.next a:hover .next__beeld img{transform:scale(1.04)}
.next .eyebrow{color:rgba(245,243,237,.75);margin-bottom:6px}
.next strong{color:var(--paper);display:flex;align-items:center;gap:12px;line-height:1.1}
.next a:hover strong{color:var(--paper)}
.next strong::after{content:"";width:34px;height:34px;flex:none;border-radius:50%;background:var(--paper)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2312140F' stroke-width='1.4'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center/14px no-repeat;
  transition:transform .35s cubic-bezier(.16,.84,.28,1)}
.next a:hover strong::after{transform:translateX(4px)}

/* Mobiel: grotere, strakkere koppen, rustiger tekst, slanke navigatie. */
@media(max-width:760px){
  :root{--vel:26px}
  body{font-size:1.0625rem}
  .h-sec{font-size:clamp(2.05rem,8.6vw,2.6rem);line-height:1.02;letter-spacing:-.012em;max-width:none}
  .h-sub{font-size:clamp(1.7rem,7vw,2.1rem);line-height:1.05;letter-spacing:-.01em}
  .chero__title{font-size:clamp(2.4rem,10.5vw,3rem);line-height:.98;letter-spacing:-.015em}
  .kans .prose p{font-family:"Fraunces",Georgia,serif;font-size:1.2rem;line-height:1.42;color:var(--ink)}
  .section{padding-block:clamp(64px,17vw,88px) calc(clamp(64px,17vw,88px) + var(--vel))}
  .statement{padding-block:clamp(80px,20vw,110px) calc(clamp(80px,20vw,110px) + var(--vel))}
  /* Kaartsliders: geen grijze vlakken meer, alleen een fijne bovenlijn. */
  .m-slider--kaart>*{background:none!important;border-radius:0;padding:18px 0 0!important;
    border-top:1px solid var(--line)!important}
  .dark .m-slider--kaart>*{border-top-color:rgba(245,243,237,.18)!important}
  /* Menuknop: geen zwaar zwart blok maar een ronde, halfdoorzichtige knop. */
  .navtiles>*{width:54px;height:54px;border-radius:50%!important;margin:10px 12px 0 0;
    background:rgba(18,20,15,.7);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
  .navtiles{align-self:flex-start}
  .burger span{width:22px;height:1.5px;margin:2.5px 0}
  .next{grid-template-columns:1fr;gap:12px}
  .next a{min-height:200px}
  .btn{font-size:.98rem}
}
/* Tekstlink-knop: onderstreping precies zo breed als de tekst. */
.chero__acts .btn--ghost,.statement__acts .btn--ghost{flex:0 0 auto!important;margin-left:10px}
.btn--ghost::after{bottom:9px}

.chero__acts .btn{font-size:.95rem;letter-spacing:0;text-transform:none}
.chero__acts .btn:not(.btn--ghost){padding:10px 10px 10px 20px}

/* Meer lucht op mobiel (2 okt, Ashwin: "te veel tekst in één scherm"). */
@media(max-width:760px){
  .chero__panel{padding-bottom:calc(64px + var(--vel))!important}
  .chero__acts{margin-top:32px!important}
  .section{padding-block:112px calc(112px + var(--vel))}
  .statement{padding-block:120px calc(120px + var(--vel))}
  main .h-sec+*,main .h-sub+*,main .h-sec+div>.prose:first-child{margin-top:32px!important}
  main .prose[style],main .lede{margin-top:32px!important}
  main .prose p+p{margin-top:1.4em}
  .kans .prose p{font-size:1.12rem;line-height:1.55}
  .kans__rij,.stick__r,.numbered,.index,.steps{margin-top:56px!important}
  .link{margin-top:8px}
  p:has(>.link){margin-top:28px!important}
  .imgsplit__body{padding-block:72px calc(72px + var(--vel))!important}
  .split{gap:32px}
  .next{padding-top:24px}
}

/* Koptekst op mobiel en tablet (2 okt, Ashwin): groter logo, geen onderrand. */
@media(max-width:1080px){
  :root{--balk:72px}
  .nav .brand,.overlay__top .brand{--d:46px}
  .nav,body.has-chero .nav{border-bottom:0!important}
}