/* ==========================================================================
   richting C · hub.css · de e-commerce-hub
   Alleen wat de hub anders doet dan de gedeelde basis (c.css). Beweging die een gebaar volgt
   staat niet hier maar in hub.js (Motion.spring): een CSS-transition kun je niet vastpakken.
   Let op: .wrap draagt de zijmarges. Zet op een element met .wrap nooit een padding-shorthand.
   ========================================================================== */

/* Het smalle koplettertype komt later binnen dan de brede terugval. Zonder tussenstap breekt de kop bij het laden in
   meer regels en verspringt de held zodra Archivo er is (gemeten: 0,04 layoutverschuiving). Arial vet op 76% is even
   breed als Archivo op de smalle pool; de regelhoogte verandert niet, dus de kop staat meteen op zijn plek. */
@font-face{font-family:"Archivo terugval";src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Helvetica-Bold"),local("Arial");font-weight:600 900;size-adjust:76%}
:root{--display:'Archivo','Archivo terugval',sans-serif}
/* ?static=1 belooft stilstand; c.css zet het lampje alleen stil bij de mediaquery */
html.static .pulse{animation:none}

/* ---------- kopregel: de knop met zijn geruststelling ernaast ---------- */
.nav-note{display:none;font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-55);white-space:nowrap;margin-right:6px}
@media(min-width:1180px){.nav-note{display:inline}}
@media(max-width:700px){.nav-cta-m{display:none!important}} /* op een telefoon staat de knop al vast onderin */

/* de geruststelling onder of naast elke hoofdknop */
.cta-note{font:500 11.5px/1.7 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-55)}
/* de twee vaste beloftes: iets groter dan de geruststelling, met een lime stip. Op een telefoon elk op een eigen regel. */
.cta-proof{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;font:500 13px/1.65 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg)}
.cta-proof .led{margin-right:12px;transform:translateY(-1px)}
.cta-proof-t > span{white-space:nowrap}
.cta-proof-t > span:not(:last-child):not([hidden])::after{content:"·";margin-left:.8em;margin-right:.3em;color:var(--fg-55)} /* het scheidingsteken sluit een regel af, het begint er nooit een */
.cta-proof-t > span:nth-last-child(2):has(+ [hidden])::after{content:none}
.cta-proof [hidden]{display:none}
@media(max-width:400px){.cta-proof{font-size:12px;letter-spacing:.04em}.cta-proof-t > span{white-space:normal}}
.hub-hero .cta-proof{margin-top:20px}
.hub-hero .cta-note{margin-top:8px}
/* tekstronde 2: de lange geruststelling staat één keer, in de hero; gewone leestekst, geen mono */
.cta-note-lang{font:400 15px/1.55 var(--body);letter-spacing:0;text-transform:none;color:var(--fg-70);max-width:52ch}
/* drie korte beloftes bij de knop van het aanbod: dit is de merkbelofte, dus met gewicht */
.promises{list-style:none;margin:clamp(22px,2.6vw,32px) 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.promises li{display:grid;grid-template-columns:20px minmax(0,1fr);align-items:baseline;font-family:var(--display);font-weight:700;font-stretch:84%;font-variation-settings:'wdth' 84;
  text-transform:uppercase;letter-spacing:.015em;font-size:clamp(20px,1.9vw,27px);line-height:1.12}
.promises li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px rgba(198,242,78,.16);transform:translateY(-.18em)}

/* elke sectie eindigt met een reden om nu te klikken */
.cta-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px clamp(24px,4vw,64px);align-items:center;
  margin-top:clamp(36px,4.6vw,72px);padding-top:clamp(24px,3vw,40px);border-top:1px solid var(--line)}
.cta-line{font-family:var(--display);font-weight:800;font-stretch:76%;font-variation-settings:'wdth' 76;text-transform:uppercase;letter-spacing:.008em;
  font-size:clamp(26px,3vw,44px);line-height:1;max-width:24ch;text-wrap:balance}
.cta-line-body{font-family:var(--body);font-weight:500;font-stretch:100%;font-variation-settings:normal;text-transform:none;letter-spacing:0;font-size:clamp(19px,1.7vw,24px);line-height:1.4;max-width:34ch}
.cta-act{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.cta-act .cta-note{max-width:44ch}
@media(max-width:860px){.cta-row{grid-template-columns:minmax(0,1fr)}.cta-act .btn{width:100%}}
.zone-ivory .btn-lime{background:var(--ink);color:var(--ivory)} /* op ivoor draagt inkt de knop; lime houdt daar geen rand */
@media(hover:hover) and (pointer:fine){.zone-ivory .btn-lime:hover{box-shadow:0 14px 30px -14px rgba(10,14,22,.75)}}

/* ---------- held: het vlak en de telefoon komen uit de kaart van de branchekiezer ---------- */
.hub-hero{position:relative;isolation:isolate;padding-bottom:clamp(44px,5vw,88px)}
.hub-hero-plane{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(244,243,239,.06),rgba(244,243,239,.014));
  border-bottom:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(244,243,239,.06);
  view-transition-name:hub-surface}
.hub-phone-img{view-transition-name:hub-phone}
.hub-hero .hero-grid{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(28px,4vw,72px);align-items:center}
.hub-hero h1{font-size:clamp(46px,6.1vw,98px);margin-top:18px}
.hub-hero .lede{margin-top:clamp(18px,2.2vw,28px)}

/* de compositie: het menu in een browservenster, de telefoon er deels voor.
   Vaste verhouding, zodat de telefoon op elke breedte even ver onder het venster uitsteekt. */
.hub-comp{position:relative;margin:0;aspect-ratio:1.235;min-width:0}
.hub-comp-desk{width:86%}
.hub-comp-phone{position:absolute;right:0;top:19%;width:31%;border-radius:clamp(18px,2.3vw,30px);padding:clamp(5px,.6vw,8px)}
.hub-comp-phone img{border-radius:clamp(13px,1.8vw,23px)}
.hub-comp .fig{max-width:62%;margin-top:16px;align-items:flex-start;flex-wrap:wrap;gap:4px 10px}
@media(max-width:940px){
  .hub-hero .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hub-hero h1{font-size:clamp(46px,12.4vw,96px)}
}
@media(max-width:560px){
  .hub-comp{aspect-ratio:1.12}
  .hub-comp-desk{width:88%;padding:6px;border-radius:12px}
  .hub-comp-desk .bar{padding:1px 2px 6px}
  .hub-comp-desk .bar i{width:6px;height:6px}
  .hub-comp-desk .bar .url{font-size:8.5px;padding:3px 8px}
  .hub-comp-desk img{border-radius:6px}
  .hub-comp-phone{width:35%;top:16%}
  .hub-comp .fig{max-width:60%;font-size:10px;margin-top:12px}
  .hub-hero .hero-ctas .btn{width:100%}
}

/* ---------- leeszones: wat in het donker lime of inkt is, krijgt op ivoor genoeg contrast ---------- */
.zone-ivory .jobs .jt{color:var(--cobalt-deep)}
.zone-ivory .led{background:var(--cobalt-deep);box-shadow:0 0 0 3px rgba(20,54,245,.14)}
.zone-ivory .btn-ivory{background:var(--ink);color:var(--ivory)}
.zone-ivory .stamp-schat{color:#7A4E00;background:rgba(255,178,36,.2);border-color:rgba(122,78,0,.5)}
.zone-ivory .stamp-vb{border-color:rgba(20,54,245,.55)}
@media(hover:hover) and (pointer:fine){.zone-ivory .btn-ivory:hover{box-shadow:0 12px 28px -14px rgba(10,14,22,.7)}}

/* herken je dit: de klant aan het woord, ons antwoord eronder */
.pains{border-radius:16px}
.zone-ivory .pains{background:var(--line);border-color:var(--line)}
/* tekstronde 2 (E16): vijf kaarten; de laatste vult de rij, zodat er geen leeg vak staat */
@media(min-width:561px){.pains .pain:last-child:nth-child(5){grid-column:span 2}}
.pain{padding:clamp(22px,2.4vw,32px);gap:12px;min-height:0}
.zone-ivory .pain{background:var(--ivory)}
.pain q{font-size:clamp(21px,1.9vw,27px);line-height:1.12}
.pain p{font-size:15.5px;line-height:1.52;color:var(--fg-70);max-width:44ch}
.pain .stamp{margin-top:auto;align-self:flex-start}
.pain p + .stamp{margin-top:6px}

/* ---------- voor en na ---------- */
.case-line{flex-direction:row!important;align-items:center!important;gap:16px!important;padding:14px 18px;border:1px solid var(--line);border-radius:12px;background:rgba(244,243,239,.03)}
.case-line img{height:22px;width:auto;filter:brightness(0) invert(1)}
.case-line img.logo-sq{height:40px;width:40px;filter:none;border-radius:9px}
.case-line span{font:500 10.5px/1.7 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-55);padding-left:16px;border-left:1px solid var(--line)}
.ba-tabs{margin-bottom:clamp(20px,2.4vw,30px)}
.ba-tabs [role="tab"]{min-height:44px;padding:0 16px;font-size:14px}
.ba-tabs [role="tab"]:active{transform:scale(.97);transition:transform .08s ease-out}

/* wisselen van paar: het vertrekkende paar blijft even staan, los van de stroom, en vervaagt (hub.js) */
.ba-panes{position:relative}
.ba-pane.is-leaving[hidden]{display:block;position:absolute;left:0;right:0;top:0;pointer-events:none}

/* elk paar staat op een podium: een vlak dat het beeld draagt, met de bediening aan de voet.
   staande schermen: het hele scherm past in beeld (breedte volgt uit de hoogte van het venster), tekst ernaast.
   liggende schermen: theaterstand, het beeld over de volle breedte in een browservenster, tekst eronder. */
.ba-layout .ba{display:flex;flex-direction:column;align-items:center;width:100%;max-width:none;min-width:0;
  padding:clamp(16px,2.2vw,32px) clamp(14px,2.2vw,32px) clamp(10px,1.2vw,16px);border:1px solid var(--line);border-radius:22px;
  background:linear-gradient(180deg,rgba(244,243,239,.05),rgba(244,243,239,.016));box-shadow:inset 0 1px 0 rgba(244,243,239,.08)}
.ba-layout .ba-stage{width:100%;border:0;border-radius:14px;box-shadow:0 0 0 7px #121A2A,0 0 0 8px var(--line),0 44px 90px -36px rgba(20,54,245,.5),0 30px 60px -30px rgba(0,0,0,.9)}
.ba-layout .ba-bar{align-self:stretch;margin-top:clamp(18px,2vw,26px)}
.ba-layout.tall,.ba-layout.tall.narrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,88px);align-items:center}
.ba-layout.tall .ba,.ba-layout.tall.narrow .ba{max-width:none}
.ba-layout.tall .ba-stage{width:min(100%,440px,calc((100svh - 236px) * var(--ar)));min-width:min(100%,230px);margin:7px 0 8px}
.ba-layout.tall.narrow .ba-stage{width:min(100%,400px,calc((100svh - 236px) * var(--ar)));border-radius:26px}
.ba-layout.tall .ba-text{max-width:52ch}
.ba-layout.wide{grid-template-columns:minmax(0,1fr);gap:clamp(22px,2.6vw,36px)}
.ba-layout.wide .ba{max-width:min(100%,calc((100svh - 246px) * var(--ar) + 66px));padding-top:clamp(10px,1.2vw,14px)}
.ba-layout.wide .ba-stage{border-radius:10px;box-shadow:0 0 0 1px var(--line),0 44px 90px -40px rgba(20,54,245,.5),0 30px 60px -30px rgba(0,0,0,.9)}
.ba-chrome{align-self:stretch;display:flex;align-items:center;gap:6px;padding:0 4px clamp(8px,1vw,12px)}
.ba-chrome i{width:9px;height:9px;border-radius:50%;background:rgba(244,243,239,.16)}
.ba-chrome .url{margin:0 auto;font:500 10px var(--mono);letter-spacing:.06em;color:var(--fg-55);background:rgba(10,14,22,.6);border:1px solid var(--line-soft);padding:4px 12px;border-radius:5px}
.ba-layout.wide .ba-text{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px clamp(20px,4vw,72px);align-items:end}
.ba-layout.wide .ba-text h3{max-width:26ch}
.ba-layout.wide .ba-text .stamps{margin-top:0;padding-bottom:4px}
@media(max-width:860px){
  .ba-layout.tall,.ba-layout.tall.narrow{grid-template-columns:minmax(0,1fr)}
  .ba-layout.wide .ba-text{grid-template-columns:minmax(0,1fr)}
  .ba-layout .ba{border-radius:18px}
}
.ba-text h3{letter-spacing:.008em}
.ba-text .pv + p{margin-top:10px}
.ba-bar{flex-wrap:nowrap;align-items:center}
.ba-bar .hint{letter-spacing:.1em;flex:1 1 0;min-width:0;max-width:34ch}
.ba-btns{flex:none}
@media(hover:none) and (pointer:coarse){.hint-kb{display:none}} /* op een aanraakscherm zijn er geen pijltjestoetsen */
.ba-btns button{min-height:40px;padding:0 14px;transition:background .15s,transform .08s ease-out}
.ba-btns button:active{transform:scale(.96)}

/* de schuif met natuurkunde. De greep is een laag over het hele beeld die met transform verschuift
   (procenten van zijn eigen breedte = procenten van het beeld): geen left, dus geen layout per frame. */
.ba[data-physics] .ba-handle{left:0;width:100%;background:none;box-shadow:none;transform:translate3d(50%,0,0)}
.ba[data-physics] .ba-line{position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--lime);box-shadow:0 0 14px rgba(198,242,78,.7)}
.ba[data-physics] .ba-knob{left:0;width:70px;height:42px;border-radius:21px;display:flex;gap:8px;align-items:center;justify-content:center;
  background:rgba(10,14,22,.92);box-shadow:0 12px 30px -8px rgba(0,0,0,.85),inset 0 1px 0 rgba(244,243,239,.12)}
.ba[data-physics] .ba-knob .ba-mark{width:19px;height:16px}
.ba[data-physics] .ba-knob .ba-chev{width:6px;height:10px;fill:none;stroke:var(--lime);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ba-live .ba-stage{touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.ba-live .ba-range{pointer-events:none}
.ba-live .ba-layer img{-webkit-user-drag:none;pointer-events:none}
.ba-live.is-hot .ba-handle{will-change:transform}
.ba-live.is-hot .ba-before{will-change:clip-path}
.ba-live.is-held .ba-line{box-shadow:0 0 22px rgba(198,242,78,.95)}

/* maatadvies: de schermen hebben elk een andere vorm, dus naast elkaar in plaats van onder één schuif */
.maat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(28px,5vw,88px);align-items:center;
  margin-top:clamp(56px,7vw,112px);padding-top:clamp(36px,4.6vw,72px);border-top:1px solid var(--line-soft);scroll-margin-top:88px}
.maat-text h3{font-size:clamp(30px,3.4vw,52px);margin-top:14px;max-width:16ch}
.maat-text p{margin-top:16px;color:var(--fg-70);font-size:clamp(16px,1.15vw,18.5px);max-width:40ch}
.maat-text .stamps{margin-top:18px}
.maat .pair-side{grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);gap:clamp(16px,2.4vw,36px);align-items:end}
.maat .pair-side figure{margin:0}
.maat .pair-side .ps-na{display:block}
.maat .pair-side .ps-voor .ps-frame,.maat .pair-side .frame-phone{max-width:none}
.maat .pair-side figcaption{margin-top:12px}
.maat-crop{display:block;border-radius:19px;overflow:hidden;background:#141B2B}
.maat-crop img{width:100%;height:auto}
@media(max-width:860px){.maat{grid-template-columns:minmax(0,1fr)}}

/* ---------- nieuwsbrieven: de rail ----------
   Zonder JavaScript een gewone horizontale scroll met vaste stops. Met hub.js (.rail-live) schuift
   de baan op een veer, en loopt hij door tot de rand van het scherm: je ziet dat er meer is. */
.rail-proof{align-items:flex-end!important;gap:8px!important;padding-bottom:6px;text-align:right}
.rail-proof .stamps{justify-content:flex-end}
@media(max-width:720px){.rail-proof{align-items:flex-start!important;text-align:left}.rail-proof .stamps{justify-content:flex-start}}
.rail{position:relative}
.rail-view{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:6px}
.rail-track{list-style:none;margin:0;padding:0;display:flex;gap:clamp(16px,1.9vw,28px);width:max-content}
.rail-card{flex:none;width:clamp(236px,19.4vw,276px);scroll-snap-align:start}
.rail-card figure{margin:0}
.rail-live .rail-view{overflow:visible;scroll-snap-type:none;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;padding-bottom:0}
.rail-live.is-hot .rail-track{will-change:transform}
@media(max-width:700px){.rail-card{width:min(72vw,292px)}}

.nb{display:block;position:relative;color:inherit;text-decoration:none;border-radius:28px;-webkit-tap-highlight-color:transparent}
.nb:focus-visible{border-radius:30px}
.nb .frame-phone{display:block;transition:transform .14s ease-out}
.nb[data-sheet]:active .frame-phone{transform:scale(.982);transition-duration:.06s} /* direct bij aanraken, niet pas bij loslaten */
.nb-crop{display:block;position:relative;aspect-ratio:9/16;overflow:hidden;border-radius:19px;background:#EFEBE4}
.nb-crop img{width:100%;height:100%;object-fit:cover;object-position:50% 0;-webkit-user-drag:none}
/* de mail loopt door onder de rand van het scherm: het frame scrolt niet, het blad wel */
.nb[data-sheet] .nb-crop::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,26,42,0),rgba(18,26,42,.78) 78%,rgba(18,26,42,.9))}
.nb-crop-end img{object-position:50% 100%}
.nb.nb-end[data-sheet] .nb-crop::after{top:0;bottom:auto;background:linear-gradient(0deg,rgba(18,26,42,0),rgba(18,26,42,.78) 78%,rgba(18,26,42,.9))}
.nb.nb-end .nb-open{bottom:auto;top:40px}
.nb-open{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font:600 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:var(--lime);padding:10px 13px 9px;border-radius:999px;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.8)}
.nb-open svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nb-cap{display:flex;flex-direction:column;align-items:flex-start;gap:7px;margin-top:18px;padding-right:6px}
.nb-cap b{font-family:var(--display);font-weight:700;font-stretch:84%;font-variation-settings:'wdth' 84;text-transform:uppercase;letter-spacing:.02em;font-size:17.5px;line-height:1.1}
.nb-why{font-size:14px;line-height:1.48;color:var(--fg-70)}
/* tekstronde 2 (E9): de omschrijving staat in het mailblad; zonder JavaScript (geen blad) blijft hij op de kaart */
html:not(.js) .nb-why[hidden]{display:block}
.nb-merk{font:500 10.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-55)} /* AYA Label en Ekopura door elkaar: bij elke mail staat van wie hij is */
.nb-pv{font:500 12px/1.5 var(--mono);letter-spacing:.01em;color:var(--lime)}
.nb-cap .stamps{margin-top:3px}
.nb-vb{cursor:default}
.nb-crop-vb{display:grid;place-items:center;align-content:center;gap:16px;padding:22px;text-align:center;background:rgba(61,102,255,.05);border:1.5px dashed rgba(140,162,255,.55);
  color:var(--peri);font:500 11.5px/1.6 var(--mono);letter-spacing:.03em}
.nb-crop-vb img{width:auto;height:22px;object-fit:contain;filter:brightness(0) invert(1);opacity:.72}
.rail-card-vb .nb-cap b{color:var(--fg-70)}

.rail-ui{display:flex;align-items:center;gap:clamp(16px,2vw,28px);margin-top:clamp(24px,3vw,40px)}
.rail-bar{position:relative;flex:1;height:2px;border-radius:1px;background:var(--line);overflow:hidden}
.rail-bar i{position:absolute;inset:0;background:var(--lime);transform-origin:0 50%;transform:scaleX(.4)}
.rail-btns{display:flex;gap:8px;flex:none}
.rail-btn{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:rgba(244,243,239,.04);color:var(--fg);cursor:pointer;display:grid;place-items:center;
  transition:background .15s,border-color .15s,opacity .2s,transform .08s ease-out}
.rail-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rail-btn:active{transform:scale(.93)}
.rail-btn[aria-disabled="true"]{opacity:.34;cursor:default}
.rail-btn[aria-disabled="true"]:active{transform:none}
@media(hover:hover) and (pointer:fine){.rail-btn:not([aria-disabled="true"]):hover{background:var(--lime);border-color:var(--lime);color:var(--ink)}}
.rail:not(.rail-live) .rail-ui{display:none}

/* het blad met een mail op ware grootte: hier scrolt hij wel */
.msheet{outline:none}
.msheet-head{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-right:52px;margin-bottom:clamp(18px,2.4vw,26px)}
.msheet-head h2{font-size:clamp(26px,3vw,38px)}
.msheet-head p{color:var(--fg-70);font-size:15px;line-height:1.5;max-width:54ch}
.msheet-head .nb-pv{font-size:12.5px}
.msheet-mail{display:block;background:#EFEBE4;border-radius:8px;overflow:hidden;box-shadow:0 30px 60px -36px rgba(0,0,0,.9)}
.msheet-mail img{width:100%;max-width:none;height:auto}
.msheet-foot{margin-top:14px;font:500 10.5px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-55)}
@media(max-width:720px){.msheet-head{padding-right:44px}}

/* ---------- bewijs: een raster dat meebeweegt met het gewicht van het cijfer ---------- */
.proofs{grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.proof{min-height:0;padding:clamp(22px,2.4vw,34px);gap:14px}
.proof-a{grid-column:span 7}.proof-b{grid-column:span 5}
.proof-c{grid-column:span 5}.proof-d{grid-column:span 7}
.proof-e,.proof-f,.proof-g{grid-column:span 4}
.proof-e:last-child{grid-column:span 12} /* zolang er maar één van de drie staat (O4) */
.proof .num{font-size:clamp(48px,5.4vw,84px)}
.proof-a .num,.proof-d .num{font-size:clamp(60px,8.4vw,132px)}
.proof-d .num small{font-size:.42em;margin-left:.12em}
.proof .num small{font-size:.34em;letter-spacing:.02em;margin-left:.3em}
.proof p{max-width:44ch;font-size:clamp(16px,1.2vw,18px)}
.proof .src{letter-spacing:.1em}
.proof.vb{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 22px;background:transparent!important;box-shadow:none!important}
.proof-logo{height:22px;width:auto;filter:brightness(0) invert(1);opacity:.78}
.zone-ivory .proof-logo{filter:brightness(0);opacity:.74}
@media(max-width:900px){.proof-a,.proof-b,.proof-c,.proof-d{grid-column:span 12}}
@media(max-width:620px){.proof-e,.proof-f,.proof-g{grid-column:span 12}}

/* lichtvlek die de cursor volgt (hub.js zet --mx en --my in rAF). Alleen met een echte muis. Materiaal, geen disco:
   het papier licht op waar je kijkt en de rand vangt een beetje kobalt. */
@media(hover:hover) and (pointer:fine){
  .zone-ivory .proof[data-glow]:not(.vb){background:#FBFAF7}
  [data-glow]::before,[data-glow]::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s ease}
  [data-glow]::before{background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.95),rgba(255,255,255,0) 70%)}
  [data-glow].vb::before{display:none}
  [data-glow]::after{inset:-1px;padding:1px;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(20,54,245,.6),rgba(20,54,245,0) 70%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
  [data-glow].is-lit::before,[data-glow].is-lit::after{opacity:1}
  [data-glow] > *{position:relative;z-index:1}
}
html.static [data-glow]::before,html.static [data-glow]::after{display:none}

/* tellers: de breedte ligt vast in tekens van het eigen lettertype, dus ook goed als het weblettertype
   pas na count.js binnenkomt (die meet in pixels, mogelijk nog in het terugval-lettertype). */
[data-spring][style*="--ch"]{display:inline-block;min-width:calc(var(--ch) * (1ch - .04em))!important}
.lib-counts{align-items:flex-end}
.lib-counts .stamp{margin-bottom:4px}

/* ---------- bibliotheek ---------- */
.lib h2{margin-top:14px}
.lib .sub{margin-top:16px;color:var(--fg-70);font-size:clamp(16px,1.15vw,18.5px);max-width:50ch}
.lib-cta{margin-top:26px}
.lib .jobs{margin-top:20px}
.chips a{font:500 11.5px/1 var(--mono);letter-spacing:.04em;padding:10px 12px;border:1px solid var(--line);border-radius:999px;color:var(--fg-70);text-decoration:none;transition:background .15s,color .15s,border-color .15s,transform .08s ease-out}
.chips a.on{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.chips a:active{transform:scale(.96)}
@media(hover:hover) and (pointer:fine){.chips a:not(.on):hover{color:var(--fg);border-color:var(--fg-55)}}
@media(max-width:800px){.lib{grid-template-columns:minmax(0,1fr)}} /* c.css zet hier 1fr: lange woorden rekten de kolom op tot buiten de marge */
@media(max-width:420px){.lib .jobs li{grid-template-columns:92px minmax(0,1fr);gap:10px}.lib .jobs li span:last-child{overflow-wrap:anywhere}.lib .log{padding:18px 16px}}
.lib-sec{border-top-color:transparent}
.lib-sec .sec-in{padding-top:clamp(12px,2vw,32px)}

/* ---------- de doorlichting: het aanbod, groot ---------- */
.offer-head h2{font-size:clamp(40px,6vw,96px);margin-top:14px;max-width:21ch}
.offer-head .sub{margin-top:clamp(18px,2vw,26px);max-width:62ch;color:var(--fg-70);font-size:clamp(17px,1.3vw,20px);line-height:1.5}
.offer-grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(28px,5vw,88px);align-items:start;margin-top:clamp(36px,5vw,80px)}
.offer-steps{list-style:none;margin:0;padding:0;counter-reset:s;display:flex;flex-direction:column}
.offer-steps li{counter-increment:s;display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 12px;padding:clamp(18px,2vw,26px) 0;border-top:1px solid var(--line-soft)}
.offer-steps li:last-child{border-bottom:1px solid var(--line-soft)}
.offer-steps li::before{content:counter(s,decimal-leading-zero);grid-row:1/3;font:500 12px/1.9 var(--mono);letter-spacing:.1em;color:var(--lime)}
.offer-steps b{font-family:var(--display);font-weight:700;font-stretch:84%;font-variation-settings:'wdth' 84;text-transform:uppercase;letter-spacing:.015em;font-size:clamp(21px,1.9vw,27px);line-height:1.1}
.offer-steps p{grid-column:2;font-size:16px;line-height:1.55;color:var(--fg-70);max-width:40ch}

/* de lijst zoals hij in je inbox komt: papier op het donker, met een tweede vel eronder */
.doc{margin:0;min-width:0}
.doc-title{margin-bottom:14px}
.doc-paper{--fg:#0A0E16;--fg-70:rgba(10,14,22,.74);--fg-55:rgba(10,14,22,.62);--line:rgba(10,14,22,.16);--line-soft:rgba(10,14,22,.1);--peri:#1436F5;
  position:relative;isolation:isolate;color:var(--fg);background:#F7F6F2;border-radius:14px;padding:clamp(20px,2.6vw,36px);
  box-shadow:0 50px 100px -40px rgba(0,0,0,.9),0 30px 60px -36px rgba(20,54,245,.45)}
.doc-paper::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#DDDBD3;transform:rotate(1.4deg) translate(6px,8px)}
.doc-paper::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#F7F6F2}
.doc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:clamp(14px,1.6vw,20px);border-bottom:2px solid var(--fg)}
.doc-head b{display:block;font-family:var(--display);font-weight:800;font-stretch:76%;font-variation-settings:'wdth' 76;text-transform:uppercase;letter-spacing:.01em;font-size:clamp(26px,2.6vw,36px);line-height:1}
.doc-head div span{display:block;margin-top:8px;font-size:14px;line-height:1.4;color:var(--fg-70)}
.doc-head .stamp{transform:rotate(-3deg);border-color:rgba(20,54,245,.6);flex:none}
.doc-cols,.doc-rows li{display:grid;grid-template-columns:26px minmax(0,1fr) 148px 92px;gap:0 14px;align-items:center}
.doc-cols{padding:12px 0 8px;font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-55)}
.doc-cols span:first-child{grid-column:1/3}
.doc-rows{list-style:none;margin:0;padding:0}
.doc-rows li{padding:clamp(12px,1.3vw,16px) 0;border-top:1px solid var(--line)}
.doc-n{font:500 12px/1 var(--mono);color:var(--fg-55)}
.doc-what{font-weight:600;font-size:clamp(15px,1.15vw,17px);line-height:1.3}
.doc-eff,.doc-work{font:500 11.5px/1.3 var(--mono);letter-spacing:.04em;color:var(--fg-70)}
.doc-eff{display:flex;align-items:center;gap:9px}
.doc-eff i{flex:none;width:30px;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--cobalt-deep) var(--e,100%),rgba(10,14,22,.14) 0)}
.doc-eff[data-eff="2"] i{--e:66%}
.doc-eff[data-eff="1"] i{--e:33%}
.doc-note{margin-top:22px;font:500 10.5px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-55)}
/* de regels landen één voor één als de kaart in beeld komt (hub.js zet .landed). Zonder JavaScript en bij minder beweging staan ze er direct. */
html.js [data-land] .doc-rows li{opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i) * 130ms + 120ms)}
html.js [data-land].landed .doc-rows li{opacity:1;transform:none}
html.static [data-land] .doc-rows li{opacity:1;transform:none;transition:none}
@media(max-width:560px){
  .doc-cols{display:none}
  .doc-rows li{grid-template-columns:22px minmax(0,1fr) auto;gap:6px 10px;align-items:start}
  .doc-what{grid-column:2/4}
  .doc-eff{grid-column:2}.doc-work{grid-column:3;text-align:right}
  .doc-n{padding-top:4px}
}

/* de knop van het aanbod is hier het formulier zelf, met Nick ernaast */
.offer-act{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(28px,4vw,64px);align-items:start;margin-top:clamp(40px,6vw,96px);padding-top:clamp(32px,4vw,64px);border-top:1px solid var(--line)}
.au-inline{padding:clamp(20px,3vw,36px)}
.offer-form{min-width:0}
.offer-form .cta-note{margin-top:16px}
/* wie je spreekt: de naamkaarten staan in c/wie.css, hier alleen de indeling naast de tekst */
.team{display:flex;flex-direction:column;gap:clamp(18px,2vw,26px);min-width:0}
.team-text h3{font-size:clamp(28px,2.7vw,40px);max-width:16ch}
.team-text p{margin-top:14px;font-size:16.5px;line-height:1.55;color:var(--fg-70);max-width:42ch}
@media(max-width:960px){
  .offer-grid,.offer-act{grid-template-columns:minmax(0,1fr)}
  .team{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);align-items:center;gap:clamp(20px,4vw,40px)}
}
@media(max-width:620px){.team{grid-template-columns:minmax(0,1fr)}}

/* ---------- de vragen en het slot ---------- */
.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:clamp(28px,5vw,96px);align-items:start}
.faq-head h2{font-size:clamp(40px,4.6vw,72px);margin-top:14px;max-width:11ch}
.faq-list{margin:0;display:flex;flex-direction:column}
.faq-list > div{padding:clamp(18px,2vw,26px) 0;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:8px clamp(16px,2.4vw,40px)}
.faq-list > div:last-child{border-bottom:1px solid var(--line)}
.faq-list dt{font-family:var(--display);font-weight:700;font-stretch:84%;font-variation-settings:'wdth' 84;text-transform:uppercase;letter-spacing:.015em;font-size:clamp(19px,1.6vw,23px);line-height:1.12}
.faq-list dd{margin:0;font-size:16px;line-height:1.6;color:var(--fg-70);max-width:56ch}
@media(max-width:900px){.faq{grid-template-columns:minmax(0,1fr)}.faq-head h2{max-width:none}}
@media(max-width:600px){.faq-list > div{grid-template-columns:minmax(0,1fr)}}
.others-in{padding-top:clamp(36px,4vw,56px)}
.others-in > .kicker{margin-bottom:16px}

/* de vaste knop op mobiel: wat je krijgt, met de geruststelling erin. Schuift weg zodra het formulier
   zelf in beeld is (hub.js, op een veer). */
.sticky-cta .btn{flex-direction:column;gap:3px;min-height:54px;line-height:1.1}
.sticky-cta .btn small{font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.72}
.sticky-cta.is-hot{will-change:transform}

/* ==========================================================================
   Vervolg: de nieuwe AYA-mails met hyperpersonalisatie, de advertenties en de kast van Matteo Studio.
   Wat een gebaar volgt, loopt in hub.js op een veer; hier staat alleen de vorm.
   ========================================================================== */

/* ---------- één mail, elke klant haar eigen versie. --p (0 = Sophie, 1 = Noor) komt van de veer ---------- */
.perso{--p:0;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,5vw,88px);align-items:center;
  margin-top:clamp(48px,6vw,96px);padding-top:clamp(36px,4.6vw,72px);border-top:1px solid var(--line-soft)}
.perso-text h3{font-size:clamp(32px,3.6vw,56px);margin-top:14px;max-width:14ch}
.perso-text > p{margin-top:16px;color:var(--fg-70);font-size:clamp(16px,1.15vw,18.5px);line-height:1.55;max-width:46ch}
.perso-switch{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-width:460px;margin-top:26px;padding:4px;border:1px solid var(--line);border-radius:16px;
  background:rgba(244,243,239,.04);touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.perso-switch:focus-visible{border-radius:16px}
.perso-knob{position:absolute;left:4px;top:4px;bottom:4px;width:calc(50% - 4px);border-radius:12px;background:var(--lime);box-shadow:0 10px 24px -12px rgba(0,0,0,.7);transform:translate3d(calc(var(--p) * 100%),0,0)}
.perso.is-hot .perso-knob{will-change:transform}
.perso-end{position:relative;z-index:1;display:flex;flex-direction:column;gap:3px;padding:11px 12px;text-align:center;min-width:0}
.perso-end b{font-family:var(--display);font-weight:700;font-stretch:84%;font-variation-settings:'wdth' 84;text-transform:uppercase;letter-spacing:.02em;font-size:18px;line-height:1}
.perso-end small{font:500 10.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.perso-end[data-perso-to="0"]{color:color-mix(in srgb,var(--ink) calc((1 - var(--p)) * 100%),var(--fg))}
.perso-end[data-perso-to="1"]{color:color-mix(in srgb,var(--ink) calc(var(--p) * 100%),var(--fg))}
.perso-diff{margin:22px 0 0;max-width:460px}
.perso-diff > div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:10px 0;border-top:1px solid var(--line-soft)}
.perso-diff dt{font:500 10.5px/1.7 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-55)}
.perso-diff dd{margin:0;display:grid;font-size:15px;line-height:1.4}
.perso-diff dd span{grid-area:1/1}
.perso-diff [data-pa]{opacity:calc(1 - var(--p))}
.perso-diff [data-pb]{opacity:var(--p);color:var(--lime)}
.perso-text .stamps{margin-top:18px}
.perso-phones{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(12px,2vw,28px);align-items:start;max-width:640px;justify-self:end;width:100%}
.perso-phone{margin:0;min-width:0}
.perso-phone:nth-child(2){margin-top:clamp(20px,4vw,56px)}
.perso-phone .frame-phone{display:block}
.perso-crop{display:block;position:relative;aspect-ratio:9/16;overflow:hidden;border-radius:19px;background:#EFEBE4}
.perso-crop img{position:absolute;left:0;top:0;width:100%;max-width:none;height:auto;-webkit-user-drag:none}
.perso-crop-mid img{transform:translate3d(0,-27.5%,0)} /* het venster begint bij het maatlabel: daar verandert de mail */
.perso-crop [data-pb]{opacity:var(--p)}
.perso-phone figcaption{margin-top:12px;font:500 10.5px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-55)}
@media(max-width:900px){.perso{grid-template-columns:minmax(0,1fr)}.perso-phones{justify-self:start}.perso-phone:nth-child(2){margin-top:0}}

/* ---------- advertenties: een stapel die je doorbladert ---------- */
.ads{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,96px);align-items:center}
.ads-text h2{font-size:clamp(40px,4.8vw,80px);margin-top:14px;max-width:12ch}
.ads-facts{list-style:none;padding:0;margin:clamp(20px,2.4vw,30px) 0 0;display:flex;flex-direction:column;max-width:48ch}
.ads-facts li{padding:13px 0;border-top:1px solid var(--line);font-size:clamp(16px,1.2vw,18.5px);line-height:1.45}
.ads-facts li:last-child{border-bottom:1px solid var(--line)}
.ads-lang{display:inline-flex;gap:4px;margin-top:24px;padding:4px;border:1px solid var(--line);border-radius:999px}
.ads-lang button{font:600 13.5px var(--body);min-height:40px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--fg-70);cursor:pointer;transition:background .15s,color .15s,transform .08s ease-out}
.ads-lang button:active{transform:scale(.96)}
.ads-lang button[aria-checked="true"]{background:var(--fg);color:var(--ivory)}
.ads-text .stamps{margin-top:18px}
.deck{min-width:0;padding:0 26% 0 0} /* de waaier draait naar rechts uit: die ruimte hoort bij het blok, anders steekt hij door de paginamarge */
.deck-cards{list-style:none;margin:0;padding:0;position:relative;width:min(100%,440px);aspect-ratio:1;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.deck-card{position:absolute;inset:0;border-radius:24px;overflow:hidden;background:#E6DCCB;border:7px solid #121A2A;box-shadow:0 34px 60px -34px rgba(10,14,22,.6);transform-origin:50% 135%}
.deck.is-hot .deck-card{will-change:transform,opacity}
.deck-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;pointer-events:none}
.deck-card img[data-lang="de"],.deck-card img[data-lang="fr"]{opacity:0}
.deck-ui{display:flex;justify-content:flex-start;align-items:center;gap:18px;margin-top:clamp(40px,4.4vw,60px)}
.deck-pos{font:500 12px/1 var(--mono);letter-spacing:.14em;color:var(--fg-55);min-width:6ch;text-align:center;font-variant-numeric:tabular-nums}
@media(max-width:900px){.ads{grid-template-columns:minmax(0,1fr)}}
.cta-act .btn-ghost{min-height:46px;font-size:15px}