/* Nexes Biotech — editorial design system
   Scherpe hoeken, geen kaarten, structuur uit witruimte en typografie. */

:root{
  --ink:#12140F;
  --ink-soft:#3D423A;
  --ink-faint:#7C8177;
  --paper:#F5F3ED;
  --paper-deep:#EAE7DE;
  --accent:#B4562A;
  --moss:#46543F;
  --line:rgba(18,20,15,.14);

  /* Ronde hoeken. De footer had ze al (clamp 22-40px); die maat is hier de grote
     variant geworden, zodat alles dezelfde hoekfamilie spreekt. */
  --r-s:12px;                    /* knoppen en tegels */
  --r-m:clamp(14px,1.6vw,22px);  /* beelden in de tekstkolom */
  --r-l:clamp(22px,3vw,40px);    /* hele vlakken over de volle breedte */

  --wrap:1280px;
  --gut:clamp(20px,5vw,80px);

  --step--1:clamp(.82rem,.79rem + .15vw,.9rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.1rem);
  --step-1:clamp(1.25rem,1.15rem + .5vw,1.5rem);
  --step-2:clamp(1.6rem,1.35rem + 1.2vw,2.4rem);
  --step-3:clamp(2.1rem,1.55rem + 2.6vw,4rem);
  --step-4:clamp(2.6rem,1.6rem + 4.6vw,6rem);

  /* Hoogte van de koptekstbalk en de menutegel op telefoon en tablet, en
     daarmee ook van de kopregel in het menupaneel. Alle drie moeten dezelfde
     maat aanhouden, anders springt de sluitknop uit de balk. Van 48 naar 56
     zodat het grotere woordmerk erin past (30 aug, verzoek Ashwin). Van 52
     naar 60 voor het grotere logo van 3 sep. */
  --balk:60px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:var(--step-0);line-height:1.62;
  font-feature-settings:"kern","liga";
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;border-radius:0}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.04;letter-spacing:-.02em}
p{margin:0}
button{font:inherit;border-radius:0}

.serif{font-family:"Fraunces","Iowan Old Style",Georgia,serif;font-optical-sizing:auto}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap-wide{max-width:1560px;margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:clamp(64px,9vw,140px)}
.section--tight{padding-block:clamp(44px,6vw,88px)}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(245,243,237,.88);backdrop-filter:saturate(140%) blur(10px)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:24px;
  max-width:1560px;margin-inline:auto;padding:18px var(--gut)}
/* De volledige lockup staat onderaan dit bestand, bij het beeldmerk. Hier
   alleen wat de balk nodig heeft om hem te kunnen plaatsen. */
.brand{display:inline-flex;align-items:center}
.nav__links{display:flex;align-items:center;gap:clamp(14px,1.8vw,30px);font-size:var(--step--1)}
.nav__links>*{position:relative}
.nav__links a{padding-block:8px;color:var(--ink-soft);transition:color .18s}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--ink)}
.nav__links a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--accent)}
/* De sectie waar je staat wordt in de balk net zo gemarkeerd als een gewone
   pagina: het accentlijntje eronder en de tekstkleur van de balk zelf. Dit
   stond op negen pagina's als inline stijl op --ink en werd daarmee zwart
   over de hero (melding Paul, 3 sep). */
.drop>button[aria-current="true"]::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--accent)}

.drop>button{background:none;border:0;padding:8px 0;color:var(--ink-soft);cursor:pointer;
  display:inline-flex;align-items:center;gap:.4rem;font-size:inherit}
.drop>button:hover,.drop[data-open="true"]>button{color:var(--ink)}
.drop__menu{position:absolute;top:100%;left:-18px;min-width:266px;background:var(--paper);
  padding:14px 18px 18px;display:none;box-shadow:0 24px 60px -30px rgba(18,20,15,.4)}
.drop[data-open="true"] .drop__menu{display:block}
.drop__menu a{display:block;padding:7px 0;color:var(--ink-soft)}
.drop__menu a:hover{color:var(--accent)}
.drop__lead{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);
  margin-bottom:8px;display:block}

/* Vierkante menutegel rechtsboven, tegen de rand aan. Hij blijft staan als de
   rest van de balk wegvalt, zodat de navigatie op een telefoon altijd
   bereikbaar is. De weg terug naar huis loopt via het woordmerk links, met het
   beeldmerk ervoor. */
.navtiles{display:none;align-self:stretch}
.navtiles>*{width:var(--balk);display:grid;place-items:center;background:var(--ink);
  color:var(--paper);border:0;cursor:pointer;padding:0}
/* Als kolom, niet als raster: in een raster rekken de drie rijen zich over de
   hele tegel uit en staan de streepjes veel te ver uit elkaar. */
.navtiles .burger{display:flex;flex-direction:column;align-items:center;justify-content:center}
.burger span{display:block;width:24px;height:1px;background:currentColor;margin:2.25px 0}

@media(max-width:1080px){
  .nav__links{display:none}
  .navtiles{display:flex}
}

/* ---------- hero ---------- */
.hero{padding-top:clamp(38px,6vw,86px)}
.hero__kicker{font-size:var(--step--1);letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:clamp(18px,2.4vw,30px)}
.hero__title{font-size:var(--step-4);max-width:19ch}
.hero__lead{font-size:var(--step-1);color:var(--ink-soft);max-width:56ch;
  margin-top:clamp(20px,2.6vw,34px);line-height:1.45}
.hero__media{margin-top:clamp(38px,5vw,72px)}
.hero__media img{width:100%;aspect-ratio:2/1;object-fit:cover;border-radius:var(--r-m)}
@media(max-width:700px){.hero__media img{aspect-ratio:4/3}}

/* ---------- editorial blokken ---------- */
.lede{font-size:var(--step-1);line-height:1.5;max-width:62ch;color:var(--ink-soft)}
.prose{max-width:68ch}
.prose p+p{margin-top:1.15em}
.prose--wide{max-width:78ch}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  gap:clamp(28px,5vw,90px);align-items:start}
.split--even{grid-template-columns:1fr 1fr}
.split--flip>*:first-child{order:2}
@media(max-width:900px){
  .split,.split--even{grid-template-columns:1fr}
  .split--flip>*:first-child{order:0}
}

.eyebrow{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
.h-sec{font-size:var(--step-3);max-width:22ch;margin-top:14px}
.h-sub{font-size:var(--step-2);max-width:24ch}

/* genummerde lijst, geen kaarten */
.numbered{margin-top:clamp(34px,5vw,66px);display:grid;gap:0}
.numbered__item{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:clamp(14px,3vw,44px);
  padding-block:clamp(26px,3.4vw,44px);border-top:1px solid var(--line)}
.numbered__item:last-child{border-bottom:1px solid var(--line)}
.numbered__n{font-size:var(--step--1);letter-spacing:.16em;color:var(--accent);padding-top:.4rem}
.numbered__i{width:46px;height:46px;color:var(--accent);margin-top:-.4rem}
.numbered__i svg{width:100%;height:100%;display:block}
.numbered__i,.numbered__n span{transition:color .25s}
.numbered__t{font-size:var(--step-2)}
.numbered__d{margin-top:.7em;color:var(--ink-soft);max-width:62ch}
@media(max-width:640px){
  .numbered__item{grid-template-columns:1fr;gap:6px}
  .numbered__n{padding-top:0}
}

/* claims: open lijst met streep, geen bullets */
.claims{margin-top:clamp(26px,3.4vw,44px);display:grid;gap:0;max-width:78ch}
.claims li{list-style:none;padding-block:clamp(16px,2vw,24px);border-top:1px solid var(--line);
  display:grid;grid-template-columns:1.9rem 1fr;gap:14px;color:var(--ink-soft)}
.claims li:last-child{border-bottom:1px solid var(--line)}
.claims li::before{content:"—";color:var(--accent)}
.claims{padding:0;margin-inline:0}

/* cijfers */
.figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(20px,3vw,44px);
  margin-top:clamp(30px,4vw,56px)}
.figures div{border-top:1px solid var(--line);padding-top:18px}
.figures b{display:block;font-family:"Fraunces",Georgia,serif;font-size:var(--step-3);font-weight:400;line-height:1}
.figures small{display:block;margin-top:.6em;color:var(--ink-faint);font-size:var(--step--1)}

/* volle beeldband */
/* Het bandbeeld loopt van rand tot rand en sluit direct aan op de secties
   erboven en eronder: geen papierstrook meer omheen. Daarom ook geen ronde
   hoeken, die zouden tegen de schermrand aan wegvallen. */
/* Sluit er direct een bandbeeld op aan, dan mogen de onderhoeken niet rond zijn:
   anders zie je twee papieren hoekjes tussen de twee vlakken. Zelfde idee als de
   footer, die alleen zijn bovenhoeken afrondt omdat hij onderaan tegen de rand ligt. */
.imgsplit:has(+ .band){border-radius:var(--r-l) var(--r-l) 0 0}

.band{margin-block:0}
.band .wrap-wide{max-width:none;padding-inline:0}
.band img{width:100%;aspect-ratio:16/6;object-fit:cover;display:block;border-radius:0}
@media(max-width:700px){.band img{aspect-ratio:3/2}}

.figure figcaption{margin-top:12px;font-size:var(--step--1);color:var(--ink-faint)}
.portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1) contrast(1.04)}
.portrait img:hover{filter:none}

/* donkere sectie */
.dark{background:var(--ink);color:var(--paper)}
.dark .eyebrow{color:rgba(245,243,237,.55)}
.dark .lede,.dark .numbered__d,.dark .claims li{color:rgba(245,243,237,.74)}
.dark .numbered__item,.dark .claims li,.dark .figures div{border-color:rgba(245,243,237,.18)}
.dark .claims li:last-child,.dark .numbered__item:last-child{border-bottom-color:rgba(245,243,237,.18)}

/* links / knoppen zonder radius */
.link{display:inline-flex;align-items:center;gap:.6rem;color:var(--accent);
  padding-bottom:4px;border-bottom:1px solid currentColor;transition:gap .18s}
.link:hover{gap:1rem}
.btn{display:inline-block;background:var(--ink);color:var(--paper);
  padding:16px 30px;font-size:var(--step--1);letter-spacing:.1em;text-transform:uppercase;
  border:0;border-radius:var(--r-s);cursor:pointer;transition:background .2s}
.btn:hover{background:var(--accent)}
.dark .btn{background:var(--paper);color:var(--ink)}
.dark .btn:hover{background:var(--accent);color:var(--paper)}

/* volgende-pagina navigatie */
.next{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,60px);
  padding-block:clamp(40px,5vw,72px);border-top:1px solid var(--line)}
.next a{display:block}
.next .eyebrow{margin-bottom:10px}
.next strong{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:var(--step-2);display:block}
.next a:hover strong{color:var(--accent)}
@media(max-width:700px){.next{grid-template-columns:1fr;gap:30px}}

/* formulier: alleen onderlijn */
.form{display:grid;gap:26px;max-width:640px;margin-top:clamp(26px,3vw,40px)}
.field label{display:block;font-size:var(--step--1);color:var(--ink-faint);margin-bottom:8px}
.field input,.field textarea,.field select{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:10px 0;color:var(--ink);font:inherit;border-radius:0}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:0;border-bottom-color:var(--accent)}
.field textarea{min-height:130px;resize:vertical}
.form__note{font-size:var(--step--1);color:var(--ink-faint)}
.form__status{font-size:var(--step--1);min-height:1.4em}
.form__status[data-state="ok"]{color:var(--moss)}
.form__status[data-state="err"]{color:var(--accent)}

/* footer */
/* De footer leest als een kaart die van onderaf over de pagina schuift: ronde
   bovenhoeken en een stukje overlap op het blok erboven. De overlap is kleiner
   dan de onderste padding van .next, zodat er nooit tekst onder verdwijnt. */
.foot{background:var(--ink);color:var(--paper);padding-block:clamp(54px,7vw,96px);
  border-radius:clamp(22px,3vw,40px) clamp(22px,3vw,40px) 0 0;
  margin-top:calc(-1 * clamp(14px,1.6vw,26px))}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:clamp(26px,4vw,60px)}
.foot h4{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,243,237,.5);margin-bottom:16px}
.foot a{color:rgba(245,243,237,.78);display:block;padding-block:5px}
.foot a:hover{color:var(--paper)}
.foot__claim{font-family:"Fraunces",Georgia,serif;font-size:var(--step-2);max-width:16ch;line-height:1.12}
/* Contactgegevens in de footer met dezelfde iconen als op de contactpagina.
   Het icoon staat in een vaste kolom van 22px zodat adres, telefoon en e-mail
   op één lijn beginnen, ook als het adres over meerdere regels loopt. */
.footcontact{list-style:none;margin:0;padding:0;display:grid;gap:12px;
  color:rgba(245,243,237,.78)}
.footcontact li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start}
.footcontact__i{width:18px;height:18px;color:var(--accent);display:block;margin-top:.18em}
.footcontact__i svg{width:100%;height:100%;display:block}
.footcontact a{padding-block:0}
.foot__bottom{margin-top:clamp(38px,5vw,64px);padding-top:24px;
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;font-size:var(--step--1);color:rgba(245,243,237,.55)}
@media(max-width:900px){.foot__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot__grid{grid-template-columns:1fr}}

/* animatie bij binnenkomst */
.rise{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)}
.rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- schema: proprietary technology ---------- */
.diagram{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:clamp(12px,1.8vw,26px);
  align-items:stretch;margin:clamp(40px,5vw,72px) 0 0}
.diagram__node,.diagram__core{display:flex;align-items:center;justify-content:center;
  text-align:center;padding:clamp(16px,2vw,26px) clamp(10px,1.4vw,18px);min-height:84px}
.diagram__node{background:var(--accent);color:var(--paper);font-size:var(--step-0);letter-spacing:.01em}
.diagram__core{background:var(--paper);color:var(--ink);font-family:"Fraunces",Georgia,serif;
  font-size:var(--step-2);line-height:1.05}
.diagram__axis{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;color:rgba(245,243,237,.72);font-size:var(--step--1);line-height:1.35}
.diagram__axis svg{width:20px;height:20px;color:rgba(245,243,237,.55);flex:none}
.diagram__axis--right,.diagram__axis--left{flex-direction:row;gap:12px}
.diagram__axis--right{justify-content:flex-start}
.diagram__axis--left{justify-content:flex-end}
.diagram__axis--down{flex-direction:column-reverse}
.diagram figcaption{grid-column:1 / -1;margin-top:20px;font-size:var(--step--1);color:rgba(245,243,237,.5)}
@media(max-width:820px){
  .diagram{grid-template-columns:1fr 1fr}
  .diagram__core{order:-1;grid-column:1 / -1}
  .diagram__axis{grid-column:1 / -1;flex-direction:row;gap:12px;justify-content:center;
    padding-block:4px;border-top:1px solid rgba(245,243,237,.18)}
  .diagram__axis svg{display:none}
}
@media(max-width:520px){
  .diagram{grid-template-columns:1fr}
  /* op smal scherm eerst de vier uitkomsten, daarna de vier stuurknoppen */
  .diagram__core{order:1}
  .diagram__node{order:2}
  .diagram__axis{order:3}
  .diagram figcaption{order:4}
}

/* ================================================================
   2.0 — beweging en pagina-indeling
   ================================================================ */

/* koppen die per regel achter een masker vandaan komen */
/* Geen clip op de kop zelf: elke .line maskeert zijn eigen regel al, en de
   buitenste clip knipte de staart van de laatste regel er alsnog af. */
.line{display:block;overflow:hidden;padding:0 .08em .2em;margin:0 -.08em -.2em}
.line__in{display:block;transform:translateY(130%);opacity:0;
  transition:transform .95s cubic-bezier(.16,.84,.28,1),opacity .7s ease}
[data-reveal="lines"].in .line__in{transform:none;opacity:1}

/* algemene opkomst */
[data-reveal="up"],[data-reveal="fade"]{opacity:0;transition:opacity .8s ease,transform .9s cubic-bezier(.16,.84,.28,1)}
[data-reveal="up"]{transform:translateY(26px)}
[data-reveal].in{opacity:1;transform:none}
[data-delay="1"]{transition-delay:.09s}
[data-delay="2"]{transition-delay:.18s}
[data-delay="3"]{transition-delay:.27s}
[data-delay="4"]{transition-delay:.36s}

/* beeld dat langzaam meeschaalt */
[data-parallax]{overflow:hidden}
[data-parallax] img{transform:scale(1.12);will-change:transform}

/* ---------- filmische hero ---------- */
.chero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  background:var(--ink);color:var(--paper);overflow:hidden}
.chero__bg{position:absolute;inset:0}
.chero__bg img,.chero__bg video{width:100%;height:100%;object-fit:cover;opacity:.78;
  display:block}
.chero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,20,15,.55) 0%,rgba(18,20,15,.12) 38%,rgba(18,20,15,.82) 100%)}
.chero__in{position:relative;z-index:2;width:100%;max-width:1560px;margin-inline:auto;
  padding:0 var(--gut) clamp(38px,5vw,72px)}
/* Genoeg ruimte overlaten voor het paneel dat rechtsonder tegen de rand plakt,
   zodat een lange kop er nooit onder doorloopt. */
.chero__kop{max-width:58%}
.chero__kicker{font-size:var(--step--1);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(245,243,237,.75);margin-bottom:clamp(14px,2vw,24px)}
.chero__title{font-size:clamp(2.3rem,1.1rem + 4vw,5rem);max-width:16ch;line-height:1}
/* Het paneel plakt tegen de rechteronderhoek van het beeld, zoals de
   referentie. Daarom hangt het aan .chero en niet aan de wrapper: die is
   gecentreerd op 1560px en zou op brede schermen een gat naast het paneel
   laten. */
.chero__panel{position:absolute;right:0;bottom:0;z-index:3;width:min(30vw,400px);
  background:var(--paper);color:var(--ink);padding:clamp(18px,1.8vw,26px)}
@media(min-width:1081px){
  .chero__panel{border-radius:clamp(32px,4vw,64px) 0 0 0}
  /* De kaart beweegt maximaal 88px omhoog door de parallax. Verleng het papier
     onzichtbaar onder de hero, zodat die beweging nooit een kier langs de
     onderrand van het beeld opent. De 2px overlap met de kaart voorkomt een naad op halve pixels. */
  .chero__panel::after{content:"";position:absolute;top:calc(100% - 2px);right:0;left:0;
    height:90px;background:var(--paper)}
}
.chero__panel p{font-size:var(--step-0);line-height:1.45;max-width:38ch}
.chero__acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(16px,1.8vw,22px)}
.chero__acts .btn{padding:13px 20px;font-size:.76rem}
@media(min-width:1081px){
  /* Het paneel mag de kop niet overstemmen (verzoek Paul, 3 sep): kleinere
     lopende tekst en compactere knoppen bij het smallere vlak hierboven. */
  .chero__panel p{font-size:var(--step--1);line-height:1.5}
  .chero__acts{margin-top:clamp(12px,1.2vw,16px)}
  .chero__acts .btn{padding:11px 17px;font-size:.72rem}
}
.chero__scroll{position:absolute;left:var(--gut);bottom:clamp(38px,5vw,72px);z-index:3;
  display:none}
/* Op telefoon en tablet ligt het propositiepaneel niet meer als een kaart over
   het beeld, maar staat het als gewoon tekstblok onder het beeld op papier,
   zoals de referentie het doet. Over de volle breedte een kaart leggen leest op
   deze maat als een losse tegel; het beeld verliest er bovendien zijn onderkant
   door, precies waar de kop staat.
   Het beeld en de kop delen één rastercel, het paneel krijgt de cel eronder.
   De grens loopt gelijk met die van de navigatie, zodat een tablet in
   liggende stand niet halverwege twee vormen blijft hangen. */
@media(max-width:1080px){
  .chero{display:grid;grid-template-columns:1fr;min-height:0;
    background:var(--paper);color:var(--ink)}
  /* Expliciete stapelvolgorde binnen de hero. Het merk moet hier ACHTER de film
     komen te liggen, en dat lukt alleen als elke laag een eigen nummer heeft;
     met alleen een negatieve index zou het merk achter de sectieachtergrond
     verdwijnen. isolation:isolate maakt van de hero een eigen stapelruimte,
     zodat die nummers niet met de rest van de pagina concurreren. */
  .chero{isolation:isolate}
  .chero__bg{position:relative;inset:auto;grid-area:1/1;height:86svh;z-index:1}
  /* Op een smal scherm snijdt de film tot ongeveer een kwart van zijn breedte
     terug. Midden vullen levert alleen leidingwerk op; met het zwaartepunt naar
     rechts blijft de persoon bij de tanks in beeld. */
  .chero::after{grid-area:1/1;position:relative;inset:auto;height:100%;z-index:2}
  /* Het merk komt op een telefoon onder de film vandaan in plaats van eroverheen:
     het ligt achter het beeld, dus alles boven de beeldrand wordt afgedekt en
     zichtbaar blijft het deel dat in het blok eronder hangt, met de knoop erbij.
     GEMETEN, tegen de verwachting in: een grid-area op een absoluut geplaatst
     kind maakt de rastercel hier NIET het referentievlak; het blijft rekenen met
     de hele sectie. De plaatsing gaat daarom uit van 86svh, dezelfde hoogte die
     .chero__bg krijgt, en staat bij de maat verderop in de stylesheet, want een
     media query verhoogt de specificiteit niet. */
  .chero__in{grid-area:1/1;align-self:end;z-index:3;color:var(--paper);
    padding:0 var(--gut) clamp(26px,5vw,42px)}
  .chero__kop,.chero__title{max-width:none}
  .chero__panel{position:relative;z-index:3;grid-row:2;width:auto;background:none;
    padding:clamp(112px,28vw,152px) var(--gut) clamp(72px,16vw,104px)}
  .chero__panel p{max-width:none}
}

/* ---------- gesplitste sectie met blijvende linkerkolom ---------- */
.stick{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:0;align-items:start}
.stick__l{position:sticky;top:clamp(96px,12vh,150px);padding-right:clamp(24px,4vw,64px);
  padding-block:clamp(30px,4vw,60px)}
.stick__r{border-left:1px solid var(--line);padding-left:clamp(24px,4vw,64px)}
.dark .stick__r{border-left-color:rgba(245,243,237,.18)}
.stick__row{padding-block:clamp(30px,4vw,58px);border-bottom:1px solid var(--line)}
.dark .stick__row{border-bottom-color:rgba(245,243,237,.18)}
.stick__row:first-child{padding-top:clamp(30px,4vw,60px)}
.stick__big{font-family:"Fraunces",Georgia,serif;font-size:clamp(2rem,1.2rem + 3vw,3.6rem);
  line-height:1.02;font-weight:400}
.stick__big em{font-style:normal;color:var(--accent)}
.stick__sub{margin-top:.55em;color:var(--ink-soft)}
/* Homepage: de opportunity en de vier specs moeten samen in een scherm passen
   (verzoek Paul, 2 sep 2026). Alleen boven de kolomgrens; mobiel stapelt toch. */
@media (min-width:1081px){
  .stick--fit .stick__r{display:grid;grid-template-columns:1fr 1fr;
    column-gap:clamp(24px,3vw,52px);align-self:stretch;align-content:start}
  .stick--fit .stick__row{padding-block:clamp(20px,2.2vw,32px)}
  .stick--fit .stick__row:nth-child(2){padding-top:clamp(20px,2.2vw,32px)}
  .stick--fit .stick__big{font-size:clamp(1.7rem,.8rem + 1.9vw,2.5rem)}
  .stick--fit .stick__i{width:clamp(28px,2.2vw,34px);height:clamp(28px,2.2vw,34px)}
}
.dark .stick__sub{color:rgba(245,243,237,.7)}
@media(max-width:900px){
  .stick{grid-template-columns:1fr}
  .stick__l{position:static;padding-right:0;padding-bottom:8px}
  .stick__r{border-left:0;padding-left:0}
}

/* ---------- donkere beeldsplitsing met verticale labeltekst ---------- */
.imgsplit{display:grid;grid-template-columns:1fr 1fr;min-height:min(88svh,760px);
  border-radius:var(--r-l);overflow:hidden}
/* Staat een beeldsplitsing direct onder de hero, dan schuift zij één hoekradius
   over de hero heen. De afgeronde bovenhoeken laten daardoor de hero zien in
   plaats van de papieren body-achtergrond; er ontstaat geen wit hoekje. */
.chero + .imgsplit{position:relative;z-index:3;margin-top:calc(-1 * var(--r-l))}
/* De propositiekaart staat dan in .chero__vlak. Op telefoon en tablet doet dat
   vlak niet mee in de opmaak. Op desktop is het een vaste laag die precies op de
   bovenrand van de beeldsplitsing ophoudt en daar afknipt. De kaart en haar
   papieren verlengstrook bewegen met reveal en parallax, maar eindigen daardoor
   altijd strak op die rand: geen kier onder de kaart en nooit papier in de
   afgeronde hoek, op elk punt van de animatie. De kaart schuift zo van onder de
   sectie omhoog. */
.chero__vlak{display:contents}
@media(min-width:1081px){
  .chero__vlak{display:block;position:absolute;inset:0;z-index:3;overflow:clip;pointer-events:none}
  .chero:has(+ .imgsplit) .chero__vlak{bottom:var(--r-l)}
  .chero__vlak .chero__panel{pointer-events:auto}
}
.imgsplit__media{position:relative;overflow:hidden;background:var(--ink)}
.imgsplit__media img{width:100%;height:100%;object-fit:cover;opacity:.85}
.imgsplit__label{position:absolute;right:18px;bottom:26px;writing-mode:vertical-rl;
  font-size:var(--step--1);letter-spacing:.28em;text-transform:uppercase;
  color:rgba(245,243,237,.7)}
.imgsplit__body{background:var(--ink);color:var(--paper);
  padding:clamp(34px,5vw,84px) clamp(24px,4vw,72px);display:flex;flex-direction:column;justify-content:center}
@media(max-width:900px){
  .imgsplit{grid-template-columns:1fr;min-height:0}
  .imgsplit__media{aspect-ratio:16/10}
}

/* genummerde lijst met ronde badge, compacte variant */
.steps{display:grid;gap:0;margin-top:clamp(20px,2.6vw,34px)}
.steps__col{display:flex;align-items:flex-start;justify-content:center;padding-top:2px}
.steps__ico{width:26px;height:26px;color:var(--accent);display:block}
.steps__ico svg{width:100%;height:100%;display:block}
.steps__i{display:grid;grid-template-columns:2.6rem 1fr;gap:clamp(14px,1.6vw,22px);
  padding-block:clamp(14px,1.8vw,22px);border-top:1px solid rgba(245,243,237,.18)}
.steps__i:last-child{border-bottom:1px solid rgba(245,243,237,.18)}
.steps__n{width:2.6rem;height:2.6rem;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(245,243,237,.35);font-size:.78rem;letter-spacing:.1em}
.steps__t{font-size:var(--step-1);display:flex;align-items:center;gap:.5rem}
.steps__t svg{width:16px;height:16px;color:var(--accent);flex:none}
.steps__d{margin-top:.35em;color:rgba(245,243,237,.7);font-size:var(--step-0)}
a.steps__i{color:inherit;text-decoration:none;transition:border-color .25s}
a.steps__i .steps__t svg{transition:transform .25s}
a.steps__i:hover{border-top-color:rgba(245,243,237,.5)}
a.steps__i:hover+.steps__i{border-top-color:rgba(245,243,237,.5)}
a.steps__i:hover:last-child{border-bottom-color:rgba(245,243,237,.5)}
a.steps__i:hover .steps__t svg{transform:translateX(5px)}

/* ---------- driekoloms index ---------- */
.index{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,36px);
  margin-top:clamp(34px,4vw,60px)}
.index a{display:block}
.index__head{display:flex;align-items:baseline;gap:.6rem;font-size:var(--step-1)}
.index__head svg{width:17px;height:17px;color:var(--accent);transition:transform .3s}
.index a:hover .index__head svg{transform:translateX(6px)}
.index__sub{margin-top:.4em;color:var(--ink-soft);font-size:var(--step--1)}
.dark .index__sub{color:rgba(245,243,237,.62)}
.index__media{margin-top:clamp(14px,1.6vw,22px);overflow:hidden;border-radius:var(--r-m)}
.index__media img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .8s cubic-bezier(.16,.84,.28,1)}
@media(max-width:860px){.index{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.index{grid-template-columns:1fr}}

/* ---------- gecentreerde statement-sectie ---------- */
.statement{position:relative;text-align:center;padding-block:clamp(90px,13vw,190px)}
.statement__in{max-width:none}
.statement h2{font-size:clamp(1.8rem,1.1rem + 2.6vw,3.2rem);max-width:17ch;margin-inline:auto}
.statement p{max-width:46ch;margin:clamp(18px,2.4vw,30px) auto 0;
  font-size:var(--step-1);color:var(--ink-soft);line-height:1.45}
.dark .statement p,.statement.dark p{color:rgba(245,243,237,.74)}
.statement__acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:clamp(26px,3vw,40px)}
.tick{position:absolute;width:16px;height:16px;color:var(--line)}
.dark .tick{color:rgba(245,243,237,.28)}
.tick svg{width:100%;height:100%}
.tick--tl{top:26px;left:26px}.tick--tr{top:26px;right:26px}
.tick--bl{bottom:26px;left:26px}.tick--br{bottom:26px;right:26px}

/* ---------- navigatie die samentrekt + overlaymenu ---------- */
.nav{transition:background .35s ease,box-shadow .35s ease}
.nav.is-compact{background:transparent;backdrop-filter:none;pointer-events:none}
.nav.is-compact .nav__in{padding-block:8px}
.nav.is-compact .nav__links{opacity:0;visibility:hidden;transition:opacity .3s}
.nav.is-compact .brand,.nav.is-compact .navbtn,.nav.is-compact .navtiles{pointer-events:auto}
.nav.is-compact .brand{background:var(--ink);padding:8px 14px}
.nav.is-compact .brand__naam{color:var(--paper)}
.navbtn{display:none;align-items:center;gap:10px;background:var(--ink);color:var(--paper);
  border:0;cursor:pointer;padding:12px 16px;font-size:var(--step--1);
  letter-spacing:.14em;text-transform:uppercase}
.navbtn i{display:block;width:20px;height:1.5px;background:currentColor;position:relative}
.navbtn i::before,.navbtn i::after{content:"";position:absolute;left:0;width:20px;height:1.5px;background:currentColor}
.navbtn i::before{top:-6px}.navbtn i::after{top:6px}
.nav.is-compact .navbtn{display:inline-flex}

.overlay{position:fixed;inset:0;z-index:90;background:var(--ink);color:var(--paper);
  display:flex;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s}
.overlay.is-open{opacity:1;visibility:visible}
.overlay__in{margin:auto;width:100%;max-width:1180px;padding:clamp(60px,9vh,110px) var(--gut);
  display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(30px,5vw,80px)}
.overlay__close{position:absolute;top:22px;right:var(--gut);background:none;border:0;
  color:inherit;cursor:pointer;font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase}
.overlay h4{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(245,243,237,.45);margin-bottom:14px}
.overlay a{display:block;padding:9px 0;color:rgba(245,243,237,.8);
  font-family:"Fraunces",Georgia,serif;font-size:clamp(1.2rem,.9rem + 1vw,1.9rem);line-height:1.2}
.overlay a:hover{color:var(--accent)}
.overlay__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px)}
body.no-scroll{overflow:hidden}
@media(max-width:800px){
  .overlay__in{grid-template-columns:1fr}
  .overlay__cols{grid-template-columns:1fr}
  .overlay a{font-size:1.15rem;padding:7px 0}
}

/* tweede knopstijl: alleen een lijn, voor naast de hoofdknop */
.btn--ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor}
.btn--ghost:hover{background:var(--accent);color:var(--paper);box-shadow:none}
.chero__panel .btn--ghost{color:var(--ink)}
.dark .btn--ghost,.statement.dark .btn--ghost{color:var(--paper)}


/* navigatie over de filmische hero heen */
body.has-chero .nav{position:fixed;top:0;left:0;right:0;background:transparent;backdrop-filter:none}
body.has-chero .nav__links a,body.has-chero .drop>button{color:rgba(245,243,237,.86)}
body.has-chero .nav .brand__naam{color:var(--paper)}
body.has-chero .nav__links a:hover,body.has-chero .drop>button:hover{color:var(--paper)}
body.has-chero .burger{color:var(--paper)}
body.has-chero .nav.is-compact .brand__naam{color:var(--paper)}
body.has-chero .drop__menu a{color:var(--ink-soft)}

/* Donkere waas onder de zwevende navigatie, zodat het woordmerk leesbaar blijft
   ongeacht hoe licht het beeld op die plek is. Als achtergrond op .nav zelf,
   want een pseudo-element met negatieve z-index is hier onbetrouwbaar. */
body.has-chero .nav{background:linear-gradient(180deg,rgba(18,20,15,.66) 0%,rgba(18,20,15,.30) 58%,rgba(18,20,15,0) 100%)}
body.has-chero .nav.is-compact{background:transparent}

/* credit rechtsonder in de footer */
.foot__bottom a{display:inline;padding:0;color:rgba(245,243,237,.55);transition:color .2s}
.foot__bottom a:hover{color:var(--accent)}

/* ================================================================
   Beeldmerk en woordmerk — het definitieve logo
   Bron: Google Drive, map "NEXES Logo" (aangeleverd 28 augustus 2026).
   Het beeldmerk is een gevulde vorm en geen lijntekening meer, dus alles wat
   met stroke werkte is vervallen: het intekenen, de knoop en de
   per-pad-vertraging.
   In het logo zelf blijft het beeldmerk zoals de klant het aanleverde: de ring
   met daarin de stippenreeks, op zijn eigen maat naast het woord (30 aug,
   Ashwin). Als achtergrondmerk op de pagina staat alleen de stippenreeks, zonder
   ring en fors groter: `merk.svg` is het logo-icoon, `merk-mask.svg` de uitsnede
   die als masker over de vlakken ligt.
   ================================================================ */

/* ---------- het merk komt op ----------
   Dezelfde haak als voorheen: motion.js zet .in zodra het element in beeld
   komt. Een gevulde vorm kan zichzelf niet tekenen, dus in plaats daarvan een
   korte opkomst. De dekking van de achtergrondmerken verschilt per plek en mag
   niet worden overschreven, daarom loopt die via --merkop en niet via een
   vaste opacity in de overgang. */
[data-teken] .brand__merk{opacity:0;scale:.92}
[data-teken].in .brand__merk{opacity:1;scale:1;
  transition:opacity .5s ease,scale .6s cubic-bezier(.22,.9,.3,1)}
/* scale en niet transform: het merk in het midden van een vlak staat al op een
   translate om zichzelf te centreren, en een transform hier zou die overschrijven
   en het merk naar de linkerbovenhoek gooien. De losse eigenschappen stapelen. */
[data-teken].merkbg,[data-teken].overlay__merk{opacity:0;scale:.965}
[data-teken].merkbg.in,[data-teken].overlay__merk.in{opacity:var(--merkop);scale:1;
  transition:opacity 1s ease,scale 1.2s cubic-bezier(.22,.9,.3,1)}
@media(prefers-reduced-motion:reduce){
  [data-teken] .brand__merk,[data-teken].merkbg,[data-teken].overlay__merk{
    opacity:var(--merkop,1);scale:1}
}

/* Het achtergrondmerk veegt van links naar rechts open, in de richting waarin
   de lijnen samenkomen in het knooppunt. Het merk is een masker en geen inline
   svg, dus de lijnen zelf kunnen we niet tekenen; deze veeg leest hetzelfde. */
[data-teken].merkbg{clip-path:inset(0 100% 0 0)}
[data-teken].merkbg.in{clip-path:inset(0 0 0 0);
  transition:opacity 1s ease,scale 1.2s cubic-bezier(.22,.9,.3,1),
             clip-path 1.5s cubic-bezier(.16,.84,.28,1)}

/* ---------- haarlijnen die zichzelf tekenen ----------
   motion.js zet de klasse en geeft de berekende randkleur mee, want op een
   donkere sectie is die anders. De rand zelf wordt doorzichtig en dit lijntje
   groeit ervoor in de plaats van links naar rechts uit. */
.lijn{position:relative}
.lijn--boven{border-top-color:transparent !important}
.lijn--onder{border-bottom-color:transparent !important}
.lijn--boven::before,.lijn--onder::after{
  content:"";position:absolute;left:0;right:0;height:1px;pointer-events:none;
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1.1s cubic-bezier(.16,.84,.28,1)}
.lijn--boven::before{top:-1px;background:var(--lijn-kleur,var(--line))}
.lijn--onder::after{bottom:-1px;background:var(--lijn-kleur-o,var(--line))}
.lijn.in.lijn--boven::before,.lijn.in.lijn--onder::after{transform:scaleX(1)}

/* ---------- lijsten die om de beurt opkomen ---------- */
.trap{opacity:0;transform:translateY(18px);
  transition:opacity .7s ease,transform .8s cubic-bezier(.16,.84,.28,1);
  transition-delay:calc(var(--trap,0) * .085s)}
.trap.in{opacity:1;transform:none}

/* Cijfers die oplopen: vaste cijferbreedte, anders springt de regel tijdens
   het tellen omdat een 1 smaller is dan een 8. */
.stick__big em.cijfer{font-variant-numeric:tabular-nums;font-style:italic}

/* ---------- hero-kop die trager meebeweegt ---------- */
.chero__kop{will-change:translate,opacity}

@media(prefers-reduced-motion:reduce){
  [data-teken].merkbg{clip-path:none}
  .lijn--boven{border-top-color:var(--lijn-kleur) !important}
  .lijn--onder{border-bottom-color:var(--lijn-kleur-o) !important}
  .lijn--boven::before,.lijn--onder::after{display:none}
  .trap{opacity:1;transform:none;transition:none}
  .chero__kop{translate:none !important;opacity:1 !important}
}

/* ---------- de lockup ----------
   Beeldmerk links, NEXES erboven, BIOTECH eronder, precies zoals in het
   logobestand. Elke maat hangt aan --d, de diameter van het beeldmerk; de
   factoren komen uit een pixelmeting van Nexes-Biotech-Logo-Color.svg,
   genormaliseerd op die diameter. Nagemeten tot binnen een half procent:
   NEXES en BIOTECH zijn even breed en links uitgelijnd, en het tekstblok staat
   verticaal in het midden van het beeldmerk.
   Het woord staat als echte tekst in de opmaak en niet als plaatje, zodat het
   scherp blijft op elk scherm en voorleesbaar is. De letters komen uit dezelfde
   twee families als het logo (Fraunces 72pt Regular en Inter Medium), dus het
   is dezelfde tekening. Bij letter-spacing zet de browser ook ruimte achter de
   laatste letter; die wordt met een negatieve rechtermarge teruggenomen, anders
   staat de lockup optisch te ver van wat erna komt. */
@property --d{syntax:"<length>";inherits:true;initial-value:32px}
.brand{--d:32px;gap:calc(var(--d) * .1229);align-items:center;
  font-weight:400;letter-spacing:normal;text-transform:none}
.brand__merk{width:var(--d);height:var(--d);flex:none;display:block}
.brand__tekst{display:block}
.brand__naam{display:block;font-family:"Fraunces","Iowan Old Style",Georgia,serif;
  font-weight:400;font-variation-settings:"opsz" 72;font-optical-sizing:auto;
  font-size:calc(var(--d) * .4577);line-height:1;letter-spacing:.2356em;
  text-transform:uppercase;color:var(--ink);
  margin-right:calc(var(--d) * -.1078)}
.brand__sub{display:block;font-family:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:500;font-size:calc(var(--d) * .2338);line-height:1;
  letter-spacing:.6191em;text-transform:uppercase;color:var(--accent);
  margin-top:calc(var(--d) * .0338);margin-right:calc(var(--d) * -.1447)}

/* groot, zeer licht merk als achtergrond */
/* Het beeldmerk ligt hier als CSS-masker over een vlak in currentColor. Zo
   blijven de kleurregels verderop werken (het merk moet paper zijn op donker en
   ink op licht) zonder dat er voor elke kleur een eigen bestand nodig is, en
   blijft de opmaak leeg: de div heeft geen inhoud meer.
   VALKUIL bij het vergroten: de stippenreeks leest alleen als N zolang je hem in
   een oogopslag helemaal ziet. Groter is dus niet automatisch beter. Boven
   ongeveer 400px op een foto vallen de stippen uit elkaar en blijven er losse
   bellen over; op een egaal vlak kan het merk wel veel groter, daar concurreert
   niets met de vorm. Vandaar dat de hero de kleinste maat draagt en de
   statement en de footer de grootste. Over de rand steken mag, maar hooguit een
   paar procent van de eigen maat.
   De maat staat in --merkb en de offsets rekenen daarmee. In procenten zouden
   ze met de sectiebreedte rekenen, en dan schuift een klein merk in een breed
   blok veel verder weg dan een groot. Nu steekt elk merk een vast deel van zijn
   eigen grootte over de rand, ongeacht hoe groot of klein het is.
   De dekking staat in --merkop en niet los in opacity, want de opkomst
   hierboven moet naar die waarde toe animeren en niet naar 1. */
.merkbg{position:absolute;pointer-events:none;z-index:1;color:currentColor;
  --merkb:clamp(300px,34vw,500px);--merkop:.10;width:var(--merkb);aspect-ratio:1.0779;
  opacity:var(--merkop);background-color:currentColor;
  -webkit-mask:url(../img/merk-mask.svg) center/contain no-repeat;
  mask:url(../img/merk-mask.svg) center/contain no-repeat}
.merkbg--rb{right:calc(var(--merkb) * -.07);bottom:calc(var(--merkb) * -.06)}
.merkbg--lb{left:calc(var(--merkb) * -.07);bottom:calc(var(--merkb) * -.06)}
.merkbg--rt{right:calc(var(--merkb) * -.07);top:calc(var(--merkb) * -.06)}
.merkbg--mid{left:50%;top:50%;translate:-50% -50%}

/* Maat per plek, niet per hoek. Een pagina draagt het merk drie tot vijf keer;
   op één maat lezen die als herhaling in plaats van als ritme. De reeks loopt
   van filmisch groot in de hero naar terughoudend in een donkere tussensectie,
   en de dekking loopt tegengesteld mee: hoe kleiner het merk, hoe iets steviger
   de lijn, zodat een klein exemplaar niet simpelweg wegvalt.
   De maten hangen aan de omringende sectie en niet aan de hoekklasse, want de
   footer en de donkere sectie delen allebei --lb. */
.chero>.merkbg{--merkb:clamp(260px,28vw,400px);--merkop:.17;
  right:clamp(24px,3vw,56px);bottom:auto;top:16%}
.statement .merkbg{--merkb:clamp(340px,40vw,560px);--merkop:.075}
.imgsplit__body .merkbg{--merkb:clamp(200px,20vw,300px);--merkop:.12}
.foot .merkbg{--merkb:clamp(320px,36vw,520px);--merkop:.065}
.section.dark .merkbg{--merkb:clamp(200px,20vw,300px);--merkop:.14}
.dark .merkbg,.foot .merkbg,.imgsplit__body .merkbg,.chero .merkbg{color:var(--paper)}
/* In de hero ligt het merk over bewegend beeld, dat vraagt meer dekking dan een
   egale achtergrond. Rechtsonder kan het niet staan, daar zit het propositie-
   paneel overheen, dus het hangt op driekwart hoogte in het rechterdeel. */
.chero .merkbg{--merkop:.18;z-index:2}
.statement .merkbg{color:var(--ink)}
.statement.dark .merkbg{color:var(--paper)}

/* de secties die het merk dragen moeten er ruimte voor maken */
/* `clip` en niet `hidden`: overflow:hidden maakt van de sectie een scrollcontainer
   en daarmee valt position:sticky van de linkerkolom stil. clip knipt hetzelfde
   af zonder die bijwerking. */
.section,.statement,.foot,.imgsplit__body,.chero{position:relative;overflow:clip}
.section>.wrap,.statement>.wrap,.foot>.wrap,.imgsplit__body>*:not(.merkbg){position:relative;z-index:2}

/* Op mobiel blijft de hele site rustig: decoratieve achtergrondmerken zijn
   verborgen, terwijl het merk in navigatie en overlay intact blijft. */
@media(max-width:1080px){
  .merkbg{display:none}
}

/* Het merk staat vóór het scrollen nadrukkelijk groter in de balk en trekt daarna
   terug naar de bestaande sticky-headermaat. Alles in de lockup hangt aan --d,
   dus met die ene maat schaalt het woordmerk mee. */
.nav .brand{--d:60px;transition:--d .3s ease}
/* Het merk houdt bij het scrollen dezelfde maat als bovenaan de pagina
   (verzoek Fresco, 10 sep 2026). De balk krijgt daarom minder ruimte om zich
   heen, zodat de samengetrokken koptekst niet hoger wordt dan de uitgangsmaat
   en de pagina eronder niet verspringt. */
.nav.is-compact .brand{--d:60px}

/* ---------- koptekst op telefoon en tablet ----------
   Een smalle balk (--balk) die over het beeld heen ligt: links het beeldmerk
   met het woordmerk ernaast, rechts de menutegel tegen de rand. Het merk blijft
   één lockup, ook op deze breedte; los in een eigen tegel las het als een
   tweede, onbedoeld logo.
   Bij scrollen valt het merk weg en blijft alleen de menutegel staan, zodat er
   geen zwart blok over de koppen komt te liggen. Home staat bovenaan in het
   menu.
   Dit blok staat bewust onderaan: de regels voor de samengetrokken navigatie
   hierboven hebben dezelfde specificiteit en zouden anders winnen op
   volgorde. */
@media(max-width:1080px){
  .navbtn,.nav.is-compact .navbtn{display:none}
  .nav{border-bottom:1px solid var(--line)}
  .nav__in{padding:0 0 0 var(--gut);min-height:var(--balk);align-items:stretch;gap:12px;position:relative}
  /* Over de filmische hero hoort geen balk maar een waas. Op die hoogte werd
     de oude verloop-achtergrond een zichtbare strook; hij loopt nu door tot
     onder de balk en dooft daar uit. Als pseudo-element vóór .nav__in in de
     opmaak, zodat het zonder negatieve z-index achter de inhoud blijft. */
  body.has-chero .nav{background:none}
  body.has-chero .nav::before{content:"";position:absolute;left:0;right:0;top:0;height:132px;
    pointer-events:none;transition:opacity .35s ease;
    background:linear-gradient(180deg,rgba(18,20,15,.58) 0%,rgba(18,20,15,.24) 46%,rgba(18,20,15,0) 100%)}
  body.has-chero .nav.is-compact::before{opacity:0}
  .brand{align-self:center;transition:opacity .3s ease}
  /* Iets kleiner dan op groot scherm, zodat de hele lockup binnen de balk van
     de balk blijft passen zonder hem op te rekken. Op de balk kan de lockup niet
     mee op de maat van het grote scherm: met het merk op anderhalf keer --d zou
     hij de rand raken. --d omlaag houdt de onderlinge verhouding van merk en
     woord intact. */
  .nav .brand,.overlay__top .brand{--d:36px}
  .nav.is-compact{border-bottom-color:transparent}
  .nav.is-compact .nav__in{padding-block:0}
  .nav.is-compact .brand{opacity:0;pointer-events:none;background:none;padding:0}
  body.has-chero .nav{border-bottom:1px solid rgba(245,243,237,.18)}
  body.has-chero .nav.is-compact{border-bottom-color:transparent}
}

/* Kopregel en beeldmerk in het menupaneel bestaan alleen op kleine schermen. */
.overlay__top,.overlay__merk{display:none}

/* ---------- menupaneel op telefoon en tablet ----------
   Het paneel schuift van rechts binnen en laat een strook van de pagina staan,
   zodat zichtbaar blijft dat het menu ergens overheen ligt en een tik naast het
   paneel het weer sluit. Bovenin loopt dezelfde balkregel door als in de
   koptekst: woordmerk links, sluitknop rechts. */
@media(max-width:1080px){
  .overlay{background:transparent;display:block}
  .overlay__in{margin:0 0 0 auto;width:calc(100% - 34px);max-width:none;height:100%;
    padding:0;display:block;overflow-y:auto;background:var(--ink);
    transform:translateX(3%);transition:transform .4s cubic-bezier(.22,.7,.25,1);
    position:relative}
  .overlay.is-open .overlay__in{transform:none}
  /* De kopregel blijft staan tijdens het scrollen, zodat het woordmerk en de
     sluitknop bij elkaar blijven horen. */
  .overlay__top{display:flex;align-items:center;height:var(--balk);padding-left:20px;
    position:sticky;top:0;z-index:1;background:var(--ink);
    border-bottom:1px solid rgba(245,243,237,.15)}
  .overlay__top .brand__naam{color:var(--paper)}
  /* De sluitknop staat vóór het paneel in de opmaak, dus zonder z-index zou het
     paneel er overheen tekenen. */
  .overlay__close{position:absolute;top:0;right:0;width:var(--balk);height:var(--balk);z-index:2;
    display:grid;place-items:center;font-size:0;padding:0;
    border-left:1px solid rgba(245,243,237,.15)}
  .overlay__close::before{content:"";display:block;width:24px;height:1px;background:currentColor}
  .overlay h4{padding:26px 20px 0;margin:0;color:rgba(245,243,237,.4)}
  .overlay a{display:flex;align-items:center;min-height:58px;padding:6px 20px;
    border-bottom:1px solid rgba(245,243,237,.12);font-size:1.28rem;line-height:1.25}
  .overlay h4+a{border-top:1px solid rgba(245,243,237,.12);margin-top:14px}
  .overlay__cols{display:block}
  /* Het merk sluit het menupaneel af. De vorige lijntekening was breed en mocht
     over beide randen lopen; de cirkel moet heel blijven, dus hij staat nu
     binnen de kolom en iets naar links, weg van de sluitknop. */
  .overlay__merk{display:block;margin:40px 0 26px 20px;width:66%;aspect-ratio:1.0779;
    --merkop:.14;opacity:var(--merkop);
    background-color:rgba(245,243,237,1);
    -webkit-mask:url(../img/merk-mask.svg) center/contain no-repeat;
    mask:url(../img/merk-mask.svg) center/contain no-repeat}
}

/* ---------- iconen in de inhoudsblokken ----------
   Eén maat per soort blok en altijd in de accentkleur, zodat ze als één set
   lezen en niet als losse plaatjes. */
.stick__i{width:clamp(32px,3vw,42px);height:clamp(32px,3vw,42px);color:var(--accent);
  margin-bottom:clamp(12px,1.4vw,18px)}
.stick__i svg{width:100%;height:100%;display:block}
.index__i{display:block;width:30px;height:30px;color:var(--accent);margin-bottom:14px;
  transition:transform .35s cubic-bezier(.22,.7,.25,1)}
.index__i svg{width:100%;height:100%;display:block}

.contactlijst{margin-top:38px;display:grid;gap:0}
.contactlijst>div{display:grid;grid-template-columns:30px minmax(0,1fr);gap:18px;
  align-items:start;padding-block:20px;border-top:1px solid var(--line)}
.contactlijst>div:last-child{border-bottom:1px solid var(--line)}
.contactlijst__i{width:26px;height:26px;color:var(--accent);display:block}
.contactlijst__i svg{width:100%;height:100%;display:block}
.contactlijst .eyebrow{margin-bottom:8px}

/* ---------- propositieblok op telefoon en tablet in het donker ----------
   Onder het beeld staat het propositieblok op papier, net als de sectie die
   erop volgt, en dan lopen die twee in elkaar over. Op inkt is de grens
   meteen duidelijk en sluit het blok visueel aan op het donkere beeld erboven.
   Dit staat achteraan in de stylesheet omdat de knopregels voor het paneel
   verderop dezelfde specificiteit hebben en anders op volgorde winnen. */
@media(max-width:1080px){
  /* Op vijf pagina's is de sectie ná de hero zelf ook donker (customer-value,
     smart-fermentation, ready-to-use, supply-partners, contact). Daar zou het
     blok zonder scheiding doorlopen. De hairline valt alleen op tussen twee
     donkere vlakken; tegen een papieren sectie ligt hij op de rand en zie je
     hem niet. */
  .chero{background:var(--ink);color:var(--paper);
    border-bottom:1px solid rgba(245,243,237,.18)}
  /* Op een telefoon staat het beeld bóven het paneel in plaats van eronder, dus
     de onderrand van de foto grenst recht aan het inktvlak van het paneel. Het
     verloop stopte daar op .82, waardoor er een zichtbare naad stond: 18% foto
     tegen 100% inkt. Hier loopt het door tot volledig dekkend, zodat het beeld
     in de kleur van het paneel oplost. De eindkleur MOET gelijk zijn aan
     var(--ink) hierboven, anders komt de naad terug. */
  .chero::after{background:linear-gradient(180deg,
    rgba(18,20,15,.55) 0%,rgba(18,20,15,.12) 34%,
    rgba(18,20,15,.58) 72%,rgba(18,20,15,1) 100%)}
  /* Het paneel zet zelf zijn tekstkleur op inkt voor de kaartweergave op groot
     scherm. Zonder deze regel staat de tekst hier zwart op zwart. */
  .chero__panel{color:var(--paper)}
  .chero__panel .btn{background:var(--paper);color:var(--ink)}
  .chero__panel .btn:hover{background:var(--accent);color:var(--paper)}
  .chero__panel .btn--ghost{background:transparent;color:var(--paper)}
  .chero__panel .btn--ghost:hover{background:var(--accent);color:var(--paper)}
}

/* De logokaart wordt alleen in de samengetrokken desktopheader een omgekeerde tab:
   vlak tegen de bovenrand, rechte bovenhoeken en ruim afgeronde onderhoeken.
   De negatieve bovenmarge heft precies de 8px bovenpadding van .nav__in op; de
   gewone header en de mobiele header blijven daardoor ongewijzigd. */
@media(min-width:1081px){
  .nav.is-compact .brand{
    margin-top:-8px;
    padding:8px 18px 12px;
    border-radius:0 0 var(--r-m) var(--r-m);
    box-shadow:0 16px 34px -22px rgba(18,20,15,.65)
  }
}
.navbtn{border-radius:12px}
.navtiles>*{border-radius:12px}

/* Hero-kaart groter en rustiger (variant A, keuze Ashwin 17 sep 2026).
   Alleen desktop; onder 1080px staat de tekst al als blok onder het beeld. */
@media(min-width:1081px){
  .chero__panel{width:min(34vw,470px);padding:clamp(28px,2.4vw,38px)}
  .chero__panel p{font-size:1.02rem;line-height:1.55}
  .chero__acts{margin-top:22px;gap:12px}
  .chero__acts .btn{padding:14px 22px;font-size:.78rem;letter-spacing:.08em}
}

/* Feedbackronde Thijs (28 sep 2026) */
/* Kaarten met een link: de tekst licht op in plaats van dat de foto vergroot (die schoof over de tekst).
   Iconen zonder link (commitment) hebben geen hover meer, zodat ze niet als link lezen. */
.index__head{transition:color .25s}
.index a:hover .index__head{color:var(--accent)}
.dark .index a:hover .index__head{color:#D67A42}
/* Teampagina met drie personen */
.split--drie{grid-template-columns:repeat(3,1fr);gap:clamp(28px,3.4vw,56px)}
@media(max-width:1080px){.split--drie{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.split--drie{grid-template-columns:1fr}}
/* Opportunity op home: gesplitste koptekst met drie specs in een rij eronder
   (3 in een 2x2-raster liet een gat). Past met de koptekst in een scherm (afspraak Paul, 2 sep). */
.kans__rij{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,3vw,52px);
  margin-top:clamp(30px,4vw,56px)}
.kans__rij .stick__row{border-bottom:0;border-top:1px solid var(--line);padding-block:clamp(22px,2.4vw,34px) 0}
.kans__rij .stick__row:first-child{padding-top:clamp(22px,2.4vw,34px)}
.kans__rij .stick__big{font-size:clamp(1.7rem,.8rem + 1.9vw,2.5rem)}
.kans__rij .stick__i{width:clamp(28px,2.2vw,34px);height:clamp(28px,2.2vw,34px);margin-bottom:14px}
@media(max-width:900px){.kans__rij{grid-template-columns:1fr}}
/* Marktkaarten zonder link op customer value: twee per rij */
.index--twee{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(34px,4vw,60px)}
.index--twee .index__sub{max-width:52ch}
@media(max-width:560px){.index--twee{grid-template-columns:1fr}}
/* Menu op desktop groter (verzoek Ashwin 28 sep): was ~14,4px, nu 16-17px */
@media(min-width:1081px){.nav__links{font-size:clamp(1rem,.9rem + .2vw,1.0625rem)}}
/* Ankers onder de vaste navigatiebalk laten landen */
[id]{scroll-margin-top:96px}

/* Toestemmingskaart voor Google Analytics (meting.js): zwevende kaart onderaan, zelfde opzet als spaslot.nl. */
.consent{position:fixed;left:12px;right:12px;bottom:12px;z-index:90;margin:0 auto;max-width:560px;
  padding:22px 24px;padding-bottom:calc(22px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:16px;
  background:var(--paper);color:var(--ink);border-radius:var(--r-m);font-size:var(--step--1);line-height:1.55;
  box-shadow:0 24px 60px rgba(18,20,15,.22),0 0 0 1px rgba(18,20,15,.08)}
.consent[hidden]{display:none}
.consent__kop{margin:0;font-weight:600;font-size:1rem;line-height:1.35;color:var(--ink)}
.consent p{margin:0}
.consent__tekst{color:var(--ink-soft)}
.consent__knoppen{display:flex;flex-wrap:wrap;gap:10px}
.consent .btn{background:var(--ink);color:var(--paper);padding:12px 22px;border-radius:var(--r-s)}
.consent .btn:hover{background:var(--accent);color:var(--paper)}
.consent .btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(18,20,15,.25)}
.consent .btn--ghost:hover{background:rgba(18,20,15,.06);color:var(--ink)}
.consent a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.foot__cookies{background:none;border:0;padding:0;font:inherit;color:rgba(245,243,237,.55);cursor:pointer;transition:color .2s}
.foot__cookies:hover{color:var(--accent)}
@media(min-width:768px){.consent{bottom:24px}}
.field--hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Privacyverklaring: gewone tekstpagina zonder beeldkop. */
.page-legal .legal{padding-top:clamp(56px,7vw,110px)}
.legal .prose h2{font-size:clamp(1.35rem,1.1rem + .9vw,1.9rem);margin:2.2em 0 .6em}
.legal .h-sec{margin-bottom:.55em}
.legal .prose p{color:var(--ink-soft)}
.legal .prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.legal__datum{margin-top:2.4em!important;font-size:var(--step--1);color:var(--ink-faint)}

/* Mobiele hero (1 okt 2026, verzoek Ashwin): het paneel onder de foto las als één
   donkere vlek door ~150px lege ruimte (bedoeld voor het achtergrondmerk, dat op
   mobiel verborgen is). Nu: kop op de foto, dan een duidelijke scheiding met
   haarlijn en accentstreep, compacte ruimte en knoppen op gelijke breedte. */
@media(max-width:1080px){
  .chero__in{padding-bottom:clamp(30px,8vw,44px)}
  .chero__panel{padding:clamp(30px,8vw,40px) var(--gut) clamp(52px,13vw,72px);
    border-top:1px solid rgba(245,243,237,.14)}
  .chero__panel::before{content:"";display:block;width:44px;height:2px;background:var(--accent);
    margin-bottom:clamp(18px,5vw,24px)}
  .chero__panel p{font-size:var(--step-0);line-height:1.5;color:rgba(245,243,237,.86)}
  .chero__acts{margin-top:clamp(22px,6vw,28px);gap:10px}
  .chero__acts .btn{flex:1 1 0;text-align:center;white-space:nowrap}
}

/* Horizontale sliders op mobiel (1 okt 2026, verzoek Ashwin): rijen kaarten vegen
   in plaats van eindeloos scrollen. Kaart ~80% breed, zodat de volgende in beeld
   piept; vastklikken per kaart; voortgangsbalk via slider.js. Desktop ongewijzigd. */
.m-slider__balk{display:none}
@media(max-width:760px){
  .m-slider{display:flex!important;flex-wrap:nowrap;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);scrollbar-width:none;
    margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);padding-bottom:4px}
  .m-slider::-webkit-scrollbar{display:none}
  .m-slider>*{flex:0 0 80%;min-width:0;scroll-snap-align:start}
  .m-slider--kaart>*{background:var(--paper-deep);border-radius:var(--r-s);padding:22px 20px 24px!important;
    border:0!important;margin:0!important}
  .dark .m-slider--kaart>*{background:rgba(245,243,237,.06)}
  .m-slider--kaart .stick__i,.m-slider--kaart .numbered__n{margin-bottom:10px}
  .m-slider .portrait img,.m-slider .index__media img{width:100%}
  .m-slider__balk{display:block;position:relative;height:2px;margin-top:18px;background:var(--line);overflow:hidden}
  .dark .m-slider__balk,.dark+.m-slider__balk{background:rgba(245,243,237,.18)}
  .m-slider__balk span{position:absolute;left:0;top:0;bottom:0;background:var(--accent);transition:transform .08s linear}
}

/* Main navigation icons: reuse the existing Nexes SVG set. */
.nav__links a{display:inline-flex;align-items:center;gap:9px}
.nav__links a>svg{width:24px;height:24px;flex-shrink:0}
.overlay__in>div:nth-child(2)>a{display:flex;align-items:center;gap:14px}
.overlay__in>div:nth-child(2)>a>svg{width:30px;height:30px;flex-shrink:0}