/* ════════════════════════════════════════════════════════════
   SolidMotion - editorial studio home (mono.css)
   Dark, grainy, editorial. One blue accent (#049DFF).
   ════════════════════════════════════════════════════════════ */
:root{
  --bg:#0d0d0b; --bg-2:#141311;
  --ink:#ece9e1; --ink-2:#a7a39a; --ink-3:#86837a;
  --line:rgba(236,233,225,.13); --line-2:rgba(236,233,225,.07);
  --blue:#049DFF;
  --cream:#d9d7cd; --cream-ink:#16150f; --cream-2:#6c6a60;
  --btn:#e8e8e3;
  --display:"Khteka","Schibsted Grotesk",system-ui,sans-serif;
  --giant:"Animo","Archivo","Schibsted Grotesk",sans-serif;
  --sans:"Khteka","Schibsted Grotesk",system-ui,sans-serif;
  --mono:"Suisse Intl Mono","Space Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.5,0,.15,1);
  --gut:clamp(1.2rem,4vw,3.2rem);
}
/* merkfonts: Animo, Khteka, Suisse Intl Mono (lokaal geserveerd) */
@font-face{font-family:"Animo";src:url("../fonts/animo.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Khteka";src:url("../fonts/khteka.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Suisse Intl Mono";src:url("../fonts/suissemono.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:500;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--blue);color:#fff}

/* grain - animated film grain (canvas, drawn in mono.js); SVG fallback */
/* screen-blend i.p.v. overlay: overlay verdwijnt op near-black, terwijl de referentie juist
   duidelijke korrel op de donkere vlakken toont */
.grain{position:fixed;inset:0;width:100%;height:100%;z-index:9000;pointer-events:none;opacity:.14;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
canvas.grain{background-image:none}
@media(max-width:760px){.grain{opacity:.1}}

/* cursor */
.cursor{position:fixed;top:0;left:0;width:9px;height:9px;border-radius:50%;background:var(--ink);z-index:9500;pointer-events:none;transform:translate(-50%,-50%);transition:width .3s var(--ease),height .3s var(--ease),background .3s,opacity .3s;mix-blend-mode:difference}
.cursor.is-hover{width:46px;height:46px;background:var(--ink)}
@media(max-width:1024px),(pointer:coarse){.cursor{display:none}}

.skip-link{position:absolute;left:-999px}
.skip-link:focus{left:1rem;top:1rem;z-index:9999;background:var(--ink);color:var(--bg);padding:.6rem 1rem;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.label{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--blue);vertical-align:middle;margin-right:.1rem}

/* pill button */
/* button anatomy (measured off the reference frame): near-square corners (~3px),
   tight padding (height ≈ 1.6em of the label size), 1.33em dark square aside with a
   thick ↗ SVG; hover swaps the double arrow diagonally behind the overflow mask */
.btn-pill{display:inline-flex;align-items:center;gap:.5em;background:var(--btn);color:#0d0c0a;font-family:var(--sans);font-weight:600;font-size:1rem;line-height:1;padding:.13em .13em .13em .55em;border-radius:3px;white-space:nowrap}
.btn-pill__txt{position:relative;top:-.02em}
.btn-pill__box{position:relative;width:1.33em;aspect-ratio:1;border-radius:2px;background:#161512;color:var(--btn);overflow:hidden;flex:none}
.btn-pill__arr{position:absolute;inset:0;display:grid;place-items:center;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.btn-pill__arr svg{width:52%;height:52%;display:block}
.btn-pill__arr.is-b{transform:translate(-100%,100%)}
@media(hover:hover) and (pointer:fine){
  .btn-pill:hover .btn-pill__arr.is-a{transform:translate(100%,-100%)}
  .btn-pill:hover .btn-pill__arr.is-b{transform:translate(0,0)}
}

/* ───── NAV ───── */
.nav{position:fixed;top:0;left:0;width:100%;z-index:8000;display:flex;align-items:center;justify-content:space-between;padding:1.05rem var(--gut);mix-blend-mode:difference}
.nav__brand{display:flex;align-items:center;gap:.5rem;color:var(--ink)}
.nav__menu{display:flex;gap:1.5rem;position:absolute;left:50%;transform:translateX(-50%)}
.nav__menu a{font-size:.92rem;color:var(--ink);position:relative;z-index:1}
/* zwevend hover-blokje achter het actieve menu-item: fade-in bij binnenkomst, glijdt mee tussen items (JS positioneert) */
.nav__hl{position:absolute;left:0;top:0;width:0;height:0;background:#3a3731;border-radius:4px;opacity:0;pointer-events:none;will-change:transform,width}
.nav__right{display:flex;align-items:center;gap:.7rem}
.nav__sound{width:34px;height:34px;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer}
.nav__sound svg{width:17px}
.nav__burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:none;border:0;cursor:pointer;padding:6px;min-width:44px;min-height:44px}
.nav__burger span{width:24px;height:2px;background:var(--ink);display:block;border-radius:2px;transition:transform .35s var(--ease),opacity .25s var(--ease)}
@media(max-width:860px){.nav__menu{display:none}.nav__right .btn-pill{display:none}.nav__burger{display:flex}}
/* mobiel: difference-blend niet meer op de volle headerbreedte (dwingt het hele scherm in een
   dure compositing-pass tijdens scrollen) maar alleen op de kleine zichtbare onderdelen -
   exact dezelfde look (logo/knoppen inverteren nog steeds boven de creme stories-sectie).
   Bonus: het uitklappaneel rendert nu als echt dekkend donker vlak i.p.v. mee-geblend met
   de pagina eronder (daardoor was het menu boven lichte secties slecht leesbaar). */
@media(max-width:860px){
  .nav{mix-blend-mode:normal}
  .nav__brand,.nav__sound,.nav__burger{mix-blend-mode:difference}
  .nav__burger{position:relative;z-index:8600}   /* boven het paneel (8500): kruis blijft klikbaar om te sluiten */
  /* layout: met de verborgen pill is .nav__right alleen nog de geluidsknop; space-between
     parkeerde die midden in de balk. Auto-marge trekt hem naar rechts, strak naast de burger,
     en de knop schaalt mee met de burger-maat (40px) zodat de rij optisch één geheel is. */
  .nav{gap:.7rem}
  .nav__right{margin-left:auto}
  .nav__sound{width:40px;height:40px;border-radius:7px}
  .nav__sound svg{width:19px}
  /* bij geopend paneel (8500) blijft de geluidsknop, net als het burger-kruis, zichtbaar
     en tapbaar boven het donkere vlak - anders verdween hij half achter het menu */
  .nav__sound{position:relative;z-index:8600}
}

/* ───── mobiel overlay-menu (markup + toggle door de JS-agent: <nav class="nav__panel"> als kind
   van .nav, class is-open op header.nav). z-index 8500: tussen nav(8000) en grain(9000), zodat de
   korrel over het paneel blijft maar het paneel boven de content komt. Alleen <=860px. ───── */
/* paneel = vol-beeld fixed overlay; fade-only zodat het nooit buiten de viewport steekt
   (body heeft overflow-x:hidden, maar fade voorkomt elke scrollbreedte-verrassing). De
   binnenste links/CTA dragen de subtiele rechts-naar-binnen slide. */
.nav__panel{position:fixed;inset:0;z-index:8500;display:none;mix-blend-mode:normal;
  flex-direction:column;align-items:center;justify-content:center;gap:1.6rem;
  padding:6rem var(--gut) 3rem;background:#0c0c0b;color:var(--cream);
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease);will-change:opacity}
@media(max-width:860px){.nav__panel{display:flex}}
.nav.is-open .nav__panel{opacity:1;pointer-events:auto}
.nav__panel a,.nav__panel .btn-pill{transform:translateX(10px);opacity:0;
  transition:opacity .45s var(--ease),transform .55s var(--ease)}
.nav.is-open .nav__panel a,.nav.is-open .nav__panel .btn-pill{transform:none;opacity:1}
.nav__panel a{font-family:var(--display);font-weight:700;font-size:clamp(2rem,9vw,3.4rem);line-height:1.05;letter-spacing:-.02em;color:var(--cream);text-align:center}
@media(hover:hover) and (pointer:fine){.nav__panel a:hover{color:var(--ink)}}
.nav__panel .btn-pill{display:inline-flex;margin-top:1.4rem;font-size:1.15rem;color:#0d0c0a}
/* burger-streepjes (2 spans) naar kruis bij open */
.nav.is-open .nav__burger span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.nav.is-open .nav__burger span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
@media(prefers-reduced-motion:reduce){
  .nav__panel,.nav__panel a,.nav__panel .btn-pill{transition:opacity .25s linear}
  .nav__panel a,.nav__panel .btn-pill{transform:none}
  .nav.is-open .nav__panel a,.nav.is-open .nav__panel .btn-pill{transform:none}
  .nav__burger span{transition:none}
}

/* ───── HERO ───── */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;padding:0 var(--gut) clamp(.5rem,1vw,1rem);overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(60% 40% at 38% 42%,rgba(120,118,108,.5),transparent 70%),
  radial-gradient(50% 38% at 72% 56%,rgba(90,88,80,.4),transparent 72%),
  radial-gradient(80% 60% at 50% 120%,rgba(150,148,138,.28),transparent 70%),
  var(--bg);filter:blur(8px);animation:drift 22s var(--ease) infinite alternate}
@keyframes drift{to{transform:scale(1.12) translate(2%,-2%)}}
/* touch: de eeuwig animerende vol-scherm blur-laag stilzetten (zelfde rookgradient, geen
   permanente composited animatie); de cta-achtergrond hoeft daar ook geen eigen laag vast
   te houden - hij krijgt op touch geen parallax-tween meer */
@media(pointer:coarse){.hero__bg{animation:none}.cta__bgimg,.cta__bgvid{will-change:auto}}
.hero__intro{max-width:30rem;text-align:center;margin:clamp(8rem,20vh,13rem) auto 0;color:var(--ink)}
.hero__icon{display:inline-block;width:40px;color:var(--ink-2);margin-bottom:1.6rem}.hero__icon svg{width:100%}
.hero__intro p{font-size:clamp(1rem,1.4vw,1.22rem);line-height:1.5;color:var(--ink)}
.hero__intro p+p{margin-top:1.2rem;color:var(--ink-2)}
/* hero-wordmark = echte logo-SVG, één regel over de volle sitebreedte; daaroverheen
   (als WebGL beschikbaar is) een distortion-canvas: het logo als texture die vloeibaar
   meebuigt met de muis (supersolid-achtig effect, eigen shader) */
/* auto-margins centreren het wordmark in de vrije ruimte onder de intro; de top-lift trekt
   hem naar het optische schermmidden (supersolid-compositie). top i.p.v. transform,
   want gsap-parallax schrijft de transform van dit element. */
.hero__word{display:block;margin:auto calc(-1*var(--gut));line-height:0;position:relative;z-index:1;top:clamp(-9rem,-10vh,-2rem)}
.hero__logo{display:block;width:100%;height:auto;color:#b6b4ac}
.hero__logo .lg{will-change:transform}
/* canvas heeft 2.4× de striphoogte aan tekenruimte (uitsmeer-marge boven/onder);
   negatieve margins (% = van breedte) klappen de layoutbox terug naar alleen de strip */
.hero__logo-fx{display:none;width:100%;aspect-ratio:1197.64/302.74;margin:-7.37% 0}
.hero__word.has-fx .hero__logo{display:none}
.hero__word.has-fx .hero__logo-fx{display:block}
.hero__cue{position:absolute;left:50%;bottom:1.2rem;transform:translateX(-50%);width:24px;height:38px;border:1px solid var(--ink-3);border-radius:14px;display:grid;place-items:start center;padding-top:6px;z-index:2}
.hero__cue span{width:3px;height:8px;border-radius:3px;background:var(--ink);animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}71%,100%{opacity:0}}

/* ───── STATEMENT - stat-slider links, scrub-tekst rechts (referentielayout) ───── */
.statement{display:grid;grid-template-columns:minmax(200px,290px) 1fr;gap:clamp(2.5rem,8vw,9rem);align-items:start;padding:clamp(5rem,15vh,11rem) var(--gut) clamp(5rem,14vh,10rem)}
.statement__aside{position:sticky;top:7rem}
.statement__nav{margin-bottom:2.2rem}
.statement__num{font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,3.6vw,3.5rem);line-height:.9;letter-spacing:-0.03em}
.statement__txt{max-width:24ch;color:var(--ink-3);font-size:.92rem;line-height:1.5;margin-top:.9rem}
.statement__stat{transition:opacity .28s var(--ease)}
.statement__stat.is-swap{opacity:0}
.statement__lead{font-family:var(--sans);font-weight:500;font-size:clamp(1.45rem,2.5vw,2.55rem);line-height:1.2;letter-spacing:-0.012em;max-width:26ch}
.statement__lead--2{margin-top:1.3em}
.statement__by{display:flex;align-items:center;gap:.8rem;margin-top:2.8rem}
.statement__by img{width:34px;height:34px;border-radius:50%;object-fit:cover;object-position:50% 22%;filter:grayscale(1)}
.statement__by span{font-size:.85rem;line-height:1.35;color:var(--ink-3)}.statement__by strong{color:var(--ink-2);font-weight:600}
@media(max-width:860px){.statement{grid-template-columns:1fr}.statement__aside{position:static;max-width:22rem}}

/* ───── CLIENTS - gedimde wordmark-rij zonder hokjes (referentie: stille logogrid) ───── */
.clients{padding:clamp(3rem,8vh,6rem) var(--gut);display:grid;grid-template-columns:minmax(200px,290px) 1fr;gap:2rem clamp(2.5rem,8vw,9rem)}
.clients__label{max-width:18ch}
.clients__grid{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}
.clients__grid li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.5rem;padding:3rem 1rem;text-align:center}
.clients__grid li .sm-block__in{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.5rem;width:100%}
.clients__grid li:nth-child(n+5){border-top:1px solid rgba(232,232,227,.08)}
.clients__name{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:#57544b;transition:color .35s var(--ease)}
.clients__grid li:hover .clients__name{color:var(--ink-3)}
@media(max-width:860px){.clients{grid-template-columns:1fr;min-height:0;align-content:start;gap:1.6rem}.clients__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.clients__grid li{gap:1.4rem;padding:1.8rem .8rem}.clients__grid li .sm-block__in{gap:1.4rem}.clients__grid li:nth-child(n+3){border-top:1px solid rgba(232,232,227,.08)}}

/* ───── NU IN PRODUCTIE - dunne lopend-werk strip (heden naast clients=verleden) ───── */
.now{position:relative;z-index:1;background:var(--bg);padding:1.15rem var(--gut);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.55rem clamp(1rem,3.5vw,2.6rem)}
.now__label{flex-shrink:0;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);display:inline-flex;align-items:center;gap:.55rem;white-space:nowrap}
.now__dot{flex-shrink:0;width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 0 rgba(4,157,255,.5);animation:nowPulse 2.4s var(--ease) infinite}
.now__list{list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .85rem;min-width:0}
.now__item{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.now__item+.now__item::before{content:"·";margin-right:.85rem;color:var(--cream-2)}
@keyframes nowPulse{
  0%{box-shadow:0 0 0 0 rgba(4,157,255,.45);opacity:1}
  70%{box-shadow:0 0 0 6px rgba(4,157,255,0);opacity:.85}
  100%{box-shadow:0 0 0 0 rgba(4,157,255,0);opacity:1}
}
@media(prefers-reduced-motion:reduce){.now__dot{animation:none}}
@media(max-width:560px){.now{padding:1rem var(--gut)}.now__label,.now__item{font-size:.66rem}}

/* ───── GAP - "we close that gap" scroll-split (sticky pin) - GOEDGEKEURDE VERSIE, niet aanpassen ───── */
.gap{position:relative;z-index:2;height:120vh;background:var(--bg)}
.clients{position:relative;z-index:1;background:var(--bg);min-height:74vh;align-content:center}
.gap__sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:0 var(--gut)}
.gap__eyebrow{position:absolute;top:clamp(5.5rem,13vh,8.5rem);left:50%;transform:translateX(-50%);color:var(--ink-3);text-align:center;white-space:nowrap}
.gap__title{position:relative;width:100%;display:flex;align-items:center;justify-content:center}
.gap__media{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(19vw,215px);aspect-ratio:3/4;z-index:1;overflow:hidden;border-radius:3px;margin:0}
.gap__strip{position:absolute;inset:0}
.gap__strip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.12) brightness(.95);opacity:0}
.gap__strip img.is-on{opacity:1}
.gap__phrase{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:clamp(.35em,1.4vw,.7em);margin:0;font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.88;letter-spacing:-0.04em;color:var(--ink);white-space:nowrap}
.gap__half{display:inline-block;font-size:clamp(2.3rem,8vw,7.4rem);will-change:transform;backface-visibility:hidden}
.gap__sub{position:absolute;bottom:clamp(4.5rem,13vh,8.5rem);left:50%;transform:translateX(-50%);max-width:40ch;text-align:center;color:var(--ink-2);font-size:clamp(1rem,1.2vw,1.2rem)}
/* mobiel: .gap__title is op desktop een flex-ROW (media absoluut gecentreerd, phrase ernaast
   gecentreerd). Zodra de media hier relative wordt, doet hij als rij-item mee en belandt de
   foto links met de tekst er half overheen - kolomrichting stapelt foto en tekst netjes. */
@media(max-width:760px){.gap{height:auto}.gap__sticky{position:static;height:auto;min-height:78vh;padding:6rem var(--gut)}.gap__title{flex-direction:column}.gap__phrase{flex-direction:column;white-space:normal;gap:.1em;text-align:center}.gap__half{transform:none!important;will-change:auto}.gap__media{position:relative;left:auto;top:auto;transform:none;width:min(48vw,230px);margin:1.6rem auto}.gap__eyebrow,.gap__sub{position:static;transform:none;margin:1rem auto 0;white-space:normal}}

/* ───── SUCCESS STORIES (light) ───── */
.stories{background:var(--cream);color:var(--cream-ink);padding:clamp(4rem,9vh,7rem) var(--gut) clamp(3rem,6vh,5rem)}
.stories__label{color:var(--cream-2);margin-bottom:clamp(2rem,5vh,4rem)}
/* rijindeling gemeten van de referentie: [inspring ~15%][beeld ~47vw][tekst ~23vw], top-uitgelijnd */
.story{display:grid;grid-template-columns:minmax(0,.34fr) 1.18fr .6fr;gap:clamp(1.2rem,2.6vw,2.6rem);align-items:start;padding:clamp(1.8rem,4vh,3rem) 0;border-top:1px solid rgba(22,21,15,.14)}
.story__media{grid-column:2}
.story__body{grid-column:3}
.story:first-of-type{border-top:0}
.story__media{position:relative;overflow:hidden;border-radius:3px;aspect-ratio:4/3;perspective:760px;background:#0d0c09}
.story__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.02)}
/* picture-in-picture reel: still photo stands; video unfolds + slides up over it on hover (MONOLOG mechanic) */
.story__overlay{position:absolute;inset:0;background:rgba(10,9,7,.6);opacity:0;transition:opacity .5s var(--ease);pointer-events:none;z-index:1}
.story__reel{position:absolute;left:10%;right:10%;top:13.5%;bottom:13.5%;border-radius:3px;overflow:hidden;z-index:2;opacity:0;transform-origin:50% 50%;transform-style:preserve-3d;transform:translateY(46%) rotateX(-34deg) scale(.95);transition:opacity .18s cubic-bezier(.25,0,.25,1),transform .85s cubic-bezier(.2,.7,.2,1);will-change:transform,opacity;box-shadow:0 28px 60px -30px rgba(0,0,0,.75);pointer-events:none}
.story__reel video{width:100%;height:100%;object-fit:cover;display:block}
.story:hover .story__overlay,.story:focus-within .story__overlay{opacity:1}
.story:hover .story__reel,.story:focus-within .story__reel{opacity:1;transform:translateY(0) rotateX(0deg) scale(1)}
@media(hover:none){.story__reel{left:0;right:0;top:0;bottom:0;opacity:1;transform:none;border-radius:0;box-shadow:none}.story__overlay{display:none}}
@media(prefers-reduced-motion:reduce){.story__reel{transform:none;transition:opacity .25s}}
.story__idx{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cream-2);margin-bottom:1.1rem}
.story__idx span{border:1px solid rgba(22,21,15,.3);padding:.05rem .35rem;border-radius:3px;margin-left:.3rem}
/* namen in sentence-case, medium gewicht - zoals de referentie (geen kapitalen) */
.story__name{font-family:var(--sans);font-weight:600;font-size:clamp(1.35rem,1.9vw,1.85rem);letter-spacing:-0.015em;line-height:1.08;text-transform:none}
.story__desc{color:#6b6757;font-size:clamp(.95rem,1.1vw,1.12rem);line-height:1.45;margin:.6rem 0 0;max-width:28ch}
.story__metric{margin-top:clamp(1.4rem,3vh,2.4rem)}
.story__num{display:inline-block;font-family:var(--sans);font-weight:600;font-size:clamp(1rem,1.35vw,1.3rem);background:#d9d6ca;padding:.16rem .5rem;border-radius:3px;letter-spacing:-0.01em}
.story__metric p{font-size:.88rem;color:#55524a;margin-top:.6rem;font-weight:500;max-width:24ch}
.stories__all{display:flex;align-items:center;gap:1rem;margin-top:clamp(2rem,5vh,3.5rem);padding-top:1.6rem;border-top:1px solid rgba(22,21,15,.14);font-family:var(--sans);font-weight:500;font-size:clamp(1.8rem,3.4vw,3.2rem);color:var(--cream-ink);text-transform:none;letter-spacing:-0.018em}
.stories__all span:first-child{color:var(--cream-2)}
.stories__arrow{margin-left:auto;font-size:clamp(1.4rem,3vw,2.4rem)}
/* mobiel: de desktop-kolomtoewijzing (media=kolom 2, tekst=kolom 3) expliciet terugzetten;
   zonder dit belandt de figure in een impliciete 0px-kolom en klapt hij met aspect-ratio +
   absolute img naar 0x0 - kaart toont dan wel tekst maar geen beeld */
@media(max-width:760px){.story{grid-template-columns:1fr;gap:1.2rem}.story__media,.story__body{grid-column:auto}}

/* ───── SERVICES ───── */
.svc{position:relative;padding:clamp(4rem,9vh,7rem) var(--gut);border-top:1px solid var(--line-2);overflow:hidden}
.svc__label{margin-bottom:clamp(2rem,5vh,3.5rem)}
.svc__list{list-style:none;position:relative;z-index:2;max-width:62rem}
.svc__list li a{display:block;font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,8vw,6rem);line-height:1.04;letter-spacing:-0.04em;color:var(--ink-3);text-transform:uppercase;transition:color .35s var(--ease),transform .45s var(--ease)}
.svc__list li a:hover{color:var(--ink);transform:translateX(.6rem)}
.svc__preview{position:absolute;top:50%;right:var(--gut);width:min(26vw,330px);aspect-ratio:4/5;transform:translateY(-50%);z-index:1;overflow:hidden;border-radius:3px;opacity:0;transition:opacity .4s var(--ease);pointer-events:none}
.svc__preview img{width:100%;height:100%;object-fit:cover;filter:grayscale(.2)}
.svc.is-prev .svc__preview{opacity:1}
@media(max-width:860px){.svc__preview{display:none}}

/* ───── PROCESS ───── */
.proc{padding:clamp(4rem,9vh,7rem) var(--gut);border-top:1px solid var(--line-2)}
.proc__label{margin-bottom:clamp(2rem,5vh,3.5rem)}
/* stappen naadloos gestapeld: media's raken elkaar zonder tussenruimte (referentielayout) */
.proc__step{display:grid;grid-template-columns:.6fr 1.4fr 1.6fr;gap:0 clamp(1.4rem,3vw,3rem);align-items:start;padding:0;border-top:0}
.proc__idx{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding-top:clamp(1.6rem,3.4vh,2.5rem)}
.proc__txt{padding-top:clamp(1.4rem,3vh,2.2rem)}
.proc__idx span{border:1px solid var(--line);padding:.05rem .35rem;border-radius:3px;margin-left:.3rem;color:var(--ink-2)}
.proc__txt h3{font-family:var(--display);font-weight:800;font-size:clamp(1.4rem,2.4vw,2rem);letter-spacing:-0.03em;margin-bottom:.9rem;text-transform:uppercase}
.proc__txt p{color:var(--ink-2);font-size:clamp(.98rem,1.1vw,1.12rem);line-height:1.5;max-width:34ch}
.proc__media{position:relative;overflow:hidden;border-radius:0;aspect-ratio:16/10;background:#11100d;margin-right:calc(-1*var(--gut))}
.proc__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.25) brightness(.92)}
.proc__media-link{position:absolute;inset:0;display:block;cursor:pointer}
/* zwevende chip volgt de muis over de stap-video (referentie-interactie) */
.proc__chip{position:absolute;left:0;top:0;z-index:2;background:var(--btn);color:#0d0c0a;font-family:var(--sans);font-weight:600;font-size:.8rem;padding:.42rem .75rem;border-radius:6px;white-space:nowrap;pointer-events:none;opacity:0;transform:translate(14px,14px);transition:opacity .25s var(--ease)}
@media(hover:hover) and (pointer:fine){.proc__media:hover .proc__chip{opacity:1}}
/* gestapeld (<=860): de 3 beelden als 1 naadloze strook bovenaan, stap-teksten als lijst eronder (zoals de referentie) */
@media(max-width:860px){.proc__steps{display:flex;flex-direction:column}.proc__step{display:contents}.proc__step:nth-child(1) .proc__media{order:-3}.proc__step:nth-child(2) .proc__media{order:-2}.proc__step:nth-child(3) .proc__media{order:-1}.proc__txt{padding-top:.55rem}}

/* ───── FAQ - smalle kolom links (foto + call-knop), grote kop + vragen rechts ───── */
.faq{display:grid;grid-template-columns:minmax(190px,.52fr) 1.65fr;gap:clamp(2rem,6vw,6rem);padding:clamp(4rem,9vh,7rem) var(--gut);border-top:1px solid var(--line-2)}
.faq__head{position:sticky;top:6rem;align-self:start}
.faq__photo{width:min(11vw,168px);aspect-ratio:1.05;overflow:hidden;border-radius:3px;margin:clamp(8rem,28vh,16rem) 0 1.2rem}
.faq__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;filter:grayscale(1) contrast(1.02)}
.faq__big{font-family:var(--sans);font-weight:500;font-size:clamp(2rem,3.9vw,3.85rem);line-height:1.06;letter-spacing:-0.022em;color:#ece9e1;max-width:18ch;margin-bottom:clamp(2.2rem,6vh,3.6rem)}
.faq__intro{margin:0 0 1.4rem;color:var(--ink-2);font-size:1rem;max-width:18ch}
.faq__list{list-style:none}
.faq__item{border-top:1px solid var(--line-2)}.faq__item:last-child{border-bottom:1px solid var(--line-2)}
.faq__q{width:100%;text-align:left;background:none;border:0;color:var(--ink);font-family:var(--sans);font-weight:500;font-size:clamp(1.05rem,1.6vw,1.35rem);padding:1.45rem 2.4rem 1.45rem 0;cursor:pointer;position:relative}
/* klein ringetje rechts per rij (referentie), vult zich als de vraag open staat */
.faq__q::after{content:"";position:absolute;right:.4rem;top:50%;width:7px;height:7px;border:1.5px solid var(--ink-2);border-radius:50%;transform:translateY(-50%);transition:background .3s var(--ease),border-color .3s var(--ease)}
.faq__q[aria-expanded="true"]::after{background:#ece9e1;border-color:#ece9e1}
.faq__a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.faq__a p{color:var(--ink-2);font-size:1.02rem;line-height:1.55;padding:0 3rem 1.5rem 0;max-width:60ch}
@media(max-width:860px){.faq{grid-template-columns:1fr}.faq__head{position:static}}

/* ───── CTA ───── */
.cta{position:relative;min-height:96svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(4rem,10vh,8rem) var(--gut);padding-top:clamp(7.5rem,14vh,9rem);overflow:hidden;isolation:isolate;text-align:center;align-items:center}/* extra padding-top: eyebrow blijft altijd vrij van de fixed nav (68px) */
.cta__bg{position:absolute;inset:0;z-index:-1;overflow:hidden;background:#0d0d0b}
.cta__bgimg,.cta__bgvid{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;filter:grayscale(1) brightness(.4) contrast(1.05) blur(9px);transform:scale(1.05);will-change:transform}
.cta__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,13,11,.6),rgba(13,13,11,.32) 42%,rgba(13,13,11,.78))}
.cta__eyebrow{font-family:var(--mono);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin-bottom:1.6rem}
.cta__title{font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.86;letter-spacing:-0.035em;display:flex;flex-direction:column;align-items:center}
.cta__title span{font-size:clamp(2.6rem,10vw,9rem)}
.cta__btn{margin-top:2.8rem;font-size:.95rem;padding:.9rem 1.6rem}

/* ───── FOOTER ───── */
.foot{background:var(--bg);border-top:1px solid var(--line);padding:clamp(3rem,6vh,5rem) var(--gut) 1.6rem;overflow:hidden}
.foot__top{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2rem clamp(2rem,5vw,4rem)}
.foot__top .label{margin-bottom:1.2rem;display:block}
.foot__nav a,.foot__studio a{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem 0;color:var(--ink);font-size:1.02rem;border-bottom:1px solid var(--line-2);transition:color .3s,padding .3s}
.foot__studio a:hover{color:#fff}
.foot__studio a{justify-content:flex-start}
.foot__loc{color:var(--ink-3);font-size:.86rem;line-height:1.5;margin-top:1rem}
.foot__bottom{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;align-items:center;padding-top:1.4rem;border-top:1px solid var(--line-2);font-size:.8rem;color:var(--ink-3)}
.foot__top-link{color:var(--ink-2)}.foot__top-link:hover{color:var(--ink)}
/* footer WebGL halftone flow band */
.foot__flow{position:relative;margin-top:clamp(2.5rem,6vh,4rem);height:clamp(230px,34vh,400px);overflow:hidden;border-radius:4px;background:#0a0a08;cursor:crosshair;touch-action:none;isolation:isolate}
.foot__flow-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.foot__flow-mark{position:absolute;left:clamp(1rem,2vw,1.7rem);bottom:clamp(.9rem,2.2vh,1.5rem);z-index:2;mix-blend-mode:difference;pointer-events:none;line-height:0}
.foot__flow-mark img{height:clamp(15px,1.9vw,22px);width:auto;display:block}
.foot__flow-tag{position:absolute;right:clamp(1rem,2vw,1.7rem);bottom:clamp(.9rem,2.2vh,1.5rem);z-index:2;font-family:var(--mono);font-size:clamp(.72rem,1vw,.86rem);letter-spacing:.02em;color:var(--cream);mix-blend-mode:difference;pointer-events:none}
.foot__flow-hint{position:absolute;z-index:3;left:0;top:0;transform:translate(14px,14px);background:var(--cream);color:var(--cream-ink);font-family:var(--sans);font-weight:600;font-size:.78rem;padding:.38rem .68rem;border-radius:7px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .25s var(--ease)}
.foot__flow:hover .foot__flow-hint{opacity:1}
@media(max-width:760px){.foot__flow{height:clamp(170px,28vh,250px)}.foot__flow-hint{display:none}}
/* touch: verticaal scrollen moet gewoon werken als je vinger op de footerband landt
   (touch-action:none blokkeerde daar elke scroll); de shader staat op touch toch statisch */
@media(pointer:coarse){.foot__flow{touch-action:pan-y;cursor:default}}


/* reveal */
.js .reveal{opacity:0;transform:translateY(26px)}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}.hero__bg{animation:none}.hero__cue span{animation:none}}

/* ════ MONOLOG-style masked reveal + media parallax + hover ════
   Hidden state is set ONLY by JS (gsap.set); no static CSS hides text,
   so if GSAP/JS fails every heading stays fully visible. */
.sm-line{display:block;overflow:hidden;overflow:clip;overflow-clip-margin:.18em}
.sm-line__in{display:block}
.sm-word{display:inline-block;white-space:pre}
.sm-block{display:block;overflow:hidden;overflow:clip;overflow-clip-margin:.14em}
.sm-block__in{display:block}
.stories__all.sm-block .sm-block__in{display:flex;align-items:center;gap:1rem;width:100%}
.label.sm-block .sm-block__in{display:inline-flex;align-items:center}
.clients__grid li.sm-block{display:flex;flex-direction:column;align-items:center;justify-content:center}
.cta__title .sm-line{overflow:clip;overflow-clip-margin:.22em;padding-bottom:.04em}
.cta__title .sm-line__in{display:flex;align-items:center;justify-content:center;gap:.18em;line-height:.86}
.faq__q .sm-line{text-align:left}
/* media parallax ownership: GSAP writes inline transform every frame, so kill the
   .9s transition on the media node and relocate the hover-zoom to the clip wrapper */
.sm-parallax{transition:none!important;will-change:transform;backface-visibility:hidden}
/* photo parallax keeps running on hover; the reel PiP is now the hover focal point */
/* hover fill-swipes */
.story__name,.svc__list li a{position:relative}
.story__name::after{content:"";position:absolute;left:0;bottom:-.04em;height:.06em;width:100%;background:var(--cream-ink);opacity:.5;transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);pointer-events:none;border-radius:2px}
.story:hover .story__name::after,.story:focus-within .story__name::after{transform:scaleX(1)}
.svc__list li a::after{content:"";position:absolute;left:0;bottom:.02em;height:2px;width:100%;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);pointer-events:none;border-radius:2px}
@media(hover:hover) and (pointer:fine){.svc__list li a:hover::after,.svc__list li a:focus-visible::after{transform:scaleX(1)}}
@media(pointer:coarse){.story__name::after,.svc__list li a::after{display:none}}
@media(prefers-reduced-motion:reduce){
  .sm-line,.sm-block,.cta__title .sm-line{overflow:visible;overflow-clip-margin:initial}
  .sm-line__in,.sm-block__in{transform:none!important}
  .sm-parallax{transform:none!important;will-change:auto}
  .story__name::after,.svc__list li a::after{transition:none}
}

/* ── wider + heavier MONOLOG-style gap lettering (Archivo Expanded Black) ── */
/* Animo (giant) ONLY on the huge display moments - exactly like MONOLOG. Everything else stays Khteka. */
.gap__phrase,.hero__word,.cta__title,.proc__title{font-family:var(--giant)}
.gap__phrase{font-weight:500;font-stretch:normal;font-variation-settings:normal;-webkit-text-stroke:0;letter-spacing:-.02em}

/* ═══════════ MONOLOG parity pass: logo, hero dots, dark belt, services, process title, footer ═══════════ */

/* echte logo-SVG in de nav (currentColor; nav blendt via difference dus past zich aan licht/donker aan) */
.nav__logo{height:13px;width:auto;display:block;color:var(--ink)}
/* the reference uses the default system cursor - no trailing dot */
.cursor{display:none}

/* hero halftone dot texture (canvas overlay between bg and content) */
.hero__dots{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;opacity:.9}
.hero__intro,.hero__word{position:relative;z-index:1}
.hero__cue{z-index:1}   /* blijft absolute (basisregel): anders pakt hij de onderste flex-positie van het logo af */

/* ── dark belt: services → process → faq run on near-black, like the reference ── */
.svc,.proc,.faq{background:#0d0c0a;border-top:0}
.svc{display:grid;grid-template-columns:minmax(230px,300px) 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start;padding:clamp(5rem,12vh,8rem) var(--gut) clamp(5rem,12vh,8rem)}
.svc .label,.proc .label{color:#b8b5aa}
.svc__main{min-width:0}
.svc__label{margin-bottom:clamp(1.6rem,4vh,2.6rem)}
/* left column: result stories carousel */
.svc__stories{position:sticky;top:7rem}
.svc__nav{display:flex;align-items:center;gap:.85rem;margin-bottom:2.4rem}
.svc__arrow{background:none;border:0;color:#ece9e1;font-size:1.05rem;cursor:pointer;padding:.15rem .2rem;opacity:.85;transition:opacity .25s}
.svc__arrow:hover{opacity:1}
.svc__bar{flex:1;height:1px;background:rgba(236,233,225,.22);position:relative;overflow:hidden}
.svc__bar span{position:absolute;left:0;top:0;height:100%;width:33.33%;background:#ece9e1;transition:width .45s var(--ease)}
.svc__count{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:#8a877e}
.svc__tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:#8a877e;margin-bottom:1.1rem}
.svc__quote{margin:0;transition:opacity .28s var(--ease)}
.svc__quote.is-swap{opacity:0}
.svc__quote p{color:#d9d6cc;font-size:.95rem;line-height:1.55;max-width:30ch}
.svc__quote footer{margin-top:1.2rem;display:flex;flex-direction:column;gap:.15rem}
.svc__quote footer strong{color:#ece9e1;font-weight:600;font-size:.88rem}
.svc__quote footer span{color:#8a877e;font-size:.8rem}
/* giant service list: sentence-case medium, dim by default; de actieve regel licht op via scroll-scrub */
.svc__list{max-width:none}
.svc__list li a{color:#494640;font-family:var(--sans);font-weight:500;font-size:clamp(2.2rem,4.9vw,5.2rem);line-height:1.13;letter-spacing:-0.022em;text-transform:none;transition:color .45s var(--ease)}
.svc__list li.is-on a,.svc__list li a:hover{color:var(--btn);transform:none}
.svc__list li a::after{background:#ece9e1;height:1px;bottom:.06em}
/* preview-kaartje rechts: reist mee met de actieve regel (y via JS) */
.svc__preview{top:clamp(5rem,12vh,8rem);transform:none;width:min(14.5vw,235px);aspect-ratio:4/5;opacity:1;border-radius:3px;will-change:transform}
.svc__preview img{filter:none;transition:opacity .3s}
@media(max-width:980px){.svc{grid-template-columns:1fr}.svc__stories{position:static;max-width:30rem}.svc__preview{display:none}}

/* process: giant Animo title + dark restyle */
.proc{padding-top:clamp(3.5rem,9vh,6rem)}
.proc__title{display:block;font-weight:500;font-size:clamp(3.4rem,15.5vw,15rem);line-height:.84;letter-spacing:-.015em;text-transform:uppercase;color:#ece9e1;text-align:center;white-space:nowrap;margin:0 calc(-1*var(--gut)) clamp(2.5rem,7vh,4.5rem)}
@media(max-width:760px){.proc__title{white-space:normal;margin-inline:0}}
.proc__label{color:#b8b5aa}
.proc__idx{color:#8a877e}
.proc__idx span{border-color:rgba(236,233,225,.3);color:#b8b5aa}
.proc__txt h3{color:#ece9e1}
.proc__txt p{color:#a5a298}
/* faq dark restyle */
.faq .label{color:#b8b5aa}
.faq__intro{color:#a5a298}
.faq__item,.faq__item:last-child{border-color:rgba(236,233,225,.13)}
.faq__q{color:#ece9e1}
.faq__q::after{border-color:#8a877e}
.faq__a p{color:#a5a298}
.faq__cta{background:var(--cream);color:var(--cream-ink)}
/* brightness-scrub on dark works as-is (grey → cream) */

/* footer: giant nav rows + meta bottom row, like the reference */
.foot__top{grid-template-columns:1.45fr 1fr;gap:2.5rem clamp(2.5rem,6vw,5rem);align-items:start}
.foot__nav a{display:flex;align-items:center;justify-content:space-between;font-weight:500;font-size:clamp(1.8rem,3.3vw,2.95rem);line-height:1.1;letter-spacing:-.018em;padding:.85rem .5em;margin:0 -.5em;border-bottom:1px solid var(--line-2);border-radius:4px;color:var(--ink);transition:background .3s var(--ease),color .3s var(--ease)}
.foot__nav a::after{content:"→";font-size:.8em;opacity:0;transform:translateX(-.4em);transition:opacity .3s var(--ease),transform .3s var(--ease)}
@media(hover:hover) and (pointer:fine){
  .foot__nav a:hover{background:#fafaf9;color:#0d0c0a}
  .foot__nav a:hover::after{opacity:1;transform:none}
}
.foot__studio{display:flex;flex-direction:column;gap:.4rem;padding-top:.4rem}
.foot__studio a{font-size:1.02rem;padding:.45rem 0;border-bottom:0;justify-content:flex-start}
.foot__mail{margin-top:1.6rem}
.foot__loc{margin-top:1rem;color:var(--ink-3);font-size:.92rem;line-height:1.5}
.foot__bottom{margin-top:clamp(2.5rem,6vh,4rem);font-size:.82rem;color:var(--ink-2);align-items:flex-start}
.foot__meta,.foot__mid{line-height:1.5}
.foot__mid{text-align:center}
@media(max-width:760px){.foot__top{grid-template-columns:1fr}.foot__mid{text-align:left}}

/* cta title: staggered-staircase lines, measured off the reference (container 52vw @24%,
   line 2 +10%, line 3 −2.4%, line 4 arrow+word from 50%) */
.cta{align-items:stretch;text-align:left}
.cta__eyebrow{align-self:center}
.cta__title{display:flex;flex-direction:column;align-items:flex-start;width:min(52vw,62rem);margin-left:24%}
.cta__title span{display:revert}
.cta__line{display:block;font-weight:500;font-size:clamp(2.5rem,8.7vw,9.25rem);line-height:.9;letter-spacing:-.01em;text-transform:uppercase;color:var(--btn);overflow:hidden}
.cta__line.is-2{margin-left:10%}
.cta__line.is-3{margin-left:-2.4%}
.cta__line.is-4{margin-left:19%}   /* start iets linkser: de scroll-drift (+8.5vw) schuift 'm onderweg naar z'n eindpositie rechts van het midden */
.cta__line-in{display:flex;align-items:center;gap:.12em;will-change:transform}
.cta__btn{align-self:center;margin-top:clamp(2.5rem,7vh,4.5rem);font-size:clamp(1.5rem,2.75vw,2.95rem);border-radius:4px;padding:.13em .13em .13em .55em}
.cta__btn .btn-pill__box{border-radius:3px}
@media(max-width:860px){.cta__title{width:88vw;margin-left:4vw}.cta__line.is-4{margin-left:16%}}
/* smalle telefoons: de clamp-ondergrens van .cta__title span (2.6rem, hogere specificiteit
   dan .cta__line) + de inspring duwde "→ binnenkomt" ~17px buiten beeld (body knipt af op
   overflow-x:hidden). Licht vw-schalend font + iets minder inspring houdt alle vier de
   regels binnen het kader, ook op 320px. */
@media(max-width:480px){.cta__title span{font-size:clamp(2rem,9.6vw,2.6rem)}.cta__title span.cta__line.is-4{margin-left:11%}}

/* faq-rijen: subtiele lichtgrijze tint op hover/open met langzame uitdoof-trail
   (videoframe @43.5s: meerdere rijen nog licht getint na muisbeweging - tekst blijft licht) */
.faq__item{transition:background .55s var(--ease);border-radius:5px;padding:0 1.1rem;margin:0 -1.1rem}
@media(hover:hover) and (pointer:fine){
  .faq__item:hover{background:rgba(232,232,227,.11);transition-duration:.15s}
}
.faq__item:has(.faq__q[aria-expanded="true"]){background:rgba(232,232,227,.13)}

/* ═══════════ WERK-pagina: kop + sticky filterbalk met LIJST/GRID-toggle (referentielayout) ═══════════ */
.works__hero{padding:clamp(7rem,16vh,10rem) var(--gut) 0}
.works__title{font-family:var(--display);font-weight:700;font-size:clamp(4rem,11.5vw,11rem);line-height:.95;letter-spacing:-.025em;color:#ece9e1;margin:0 0 clamp(2rem,6vh,3.5rem);text-transform:none}
.works__count{font-family:var(--display);font-weight:600;font-size:.26em;color:#cfccc2;vertical-align:super;margin-left:.12em;letter-spacing:0}
.works__bar{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.85rem var(--gut);margin:0 calc(-1*var(--gut));background:rgba(13,12,10,.88);backdrop-filter:blur(8px);border-bottom:1px solid var(--line-2)}
/* touch: backdrop-blur op een sticky balk = elke scrollframe opnieuw filteren; bijna-dekkend
   donker geeft visueel hetzelfde en kost niets */
@media(pointer:coarse){.works__bar{background:rgba(13,12,10,.97);-webkit-backdrop-filter:none;backdrop-filter:none}}
.works__filters{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.7rem);flex-wrap:wrap}
.works__filters-label{font-family:var(--sans);font-size:.95rem;color:#8a877e;margin-right:.3rem}
.works__view{display:flex;align-items:center;gap:1.1rem}
.works__viewbtn{position:relative;background:none;border:0;color:#8a877e;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;cursor:pointer;padding:.2rem 0 .2rem .9rem;transition:color .35s var(--ease)}
.works__viewbtn::before{content:"";position:absolute;left:0;top:50%;width:5px;height:5px;border-radius:50%;background:currentColor;transform:translateY(-50%) scale(0);transition:transform .35s var(--ease)}
.works__viewbtn.is-on{color:#ece9e1}
.works__viewbtn.is-on::before{transform:translateY(-50%) scale(1)}
.works__filter{position:relative;background:none;border:0;color:#8a877e;font-family:var(--sans);font-weight:500;font-size:.95rem;cursor:pointer;padding:.2rem 0;transition:color .45s var(--ease)}
.works__filter::after{content:"";position:absolute;left:50%;bottom:-7px;width:4px;height:4px;border-radius:50%;background:currentColor;transform:translateX(-50%) scale(0);transition:transform .45s var(--ease)}
.works__filter:hover{color:#cfccc2}
.works__filter.is-on{color:#ece9e1}
.works__filter.is-on::after{transform:translateX(-50%) scale(1)}
/* 12-koloms grid, herhalend 7-patroon met wisselende verhoudingen (referentieritme) */
.works{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(2.2rem,5vh,4rem) clamp(1.2rem,2.2vw,2rem);padding:clamp(1.5rem,4vh,3rem) var(--gut) clamp(5rem,10vh,8rem)}
.work{display:block;min-width:0}
.work:nth-of-type(7n+1){grid-column:span 7}
.work:nth-of-type(7n+2){grid-column:span 5}
.work:nth-of-type(7n+3){grid-column:span 5}
.work:nth-of-type(7n+4){grid-column:span 7}
.work:nth-of-type(7n+5){grid-column:4/span 9}
.work:nth-of-type(7n+6){grid-column:span 6}
.work:nth-of-type(7n){grid-column:span 6}
.work__cover{position:relative;overflow:hidden;border-radius:3px;margin:0;background:#11100d}
.work:nth-of-type(7n+1) .work__cover,.work:nth-of-type(7n+4) .work__cover,.work:nth-of-type(7n+5) .work__cover,.work:nth-of-type(7n) .work__cover{aspect-ratio:16/10}
.work:nth-of-type(7n+2) .work__cover,.work:nth-of-type(7n+3) .work__cover{aspect-ratio:4/5}
.work:nth-of-type(7n+6) .work__cover{aspect-ratio:1/1}
.work__cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .75s var(--ease)}
.work__arrow{position:absolute;right:.9rem;bottom:.9rem;width:2.1rem;aspect-ratio:1;border-radius:3px;background:var(--btn);color:#0d0c0a;display:grid;place-items:center;opacity:0;transform:translateY(8px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.work__arrow svg{width:44%}
@media(hover:hover) and (pointer:fine){
  .work:hover .work__cover img{transform:scale(1.045)}
  .work:hover .work__arrow{opacity:1;transform:none}
}
.work__meta{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-top:.8rem}
.work__name{font-family:var(--sans);font-weight:600;font-size:clamp(1.05rem,1.5vw,1.35rem);letter-spacing:-.01em;line-height:1.15;color:#ece9e1;text-transform:none}
.work__type{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:#8a877e;white-space:nowrap}
.work.is-hide{display:none}
.works__cta{min-height:78svh}
@media(max-width:860px){.works{grid-template-columns:1fr 1fr;gap:1.8rem 1rem}.work{grid-column:span 2!important}.work:nth-of-type(7n+2),.work:nth-of-type(7n+3){grid-column:span 1!important}.work .work__cover{aspect-ratio:16/11!important}.work:nth-of-type(7n+2) .work__cover,.work:nth-of-type(7n+3) .work__cover{aspect-ratio:4/5!important}}

/* ═══════════ laad-overgang: balk bovenin met glitch-punt, klantnamen in het midden,
   golf-mark onderin; glijdt daarna omhoog weg. CSS-fallback verbergt 'm ook zonder JS. ═══════════ */
.ldr{position:fixed;inset:0;z-index:9800;background:#0d0c0a;display:grid;place-items:center;will-change:transform;animation:ldrAuto .65s cubic-bezier(.7,0,.2,1) 2.9s forwards}
.ldr.is-js{animation:none}
@keyframes ldrAuto{to{transform:translateY(-103%);visibility:hidden}}
.ldr__bar{position:absolute;top:0;left:0;width:100%;height:3px}
.ldr__fill{position:absolute;left:0;top:0;height:100%;width:0;background:var(--btn)}
.ldr__tip{position:absolute;right:-3px;top:0;height:100%;display:flex;gap:2px}
.ldr__tip i{display:block;width:9px;height:100%;animation:ldrjig .16s steps(2) infinite alternate}
.ldr__tip i:nth-child(1){background:var(--blue)}
.ldr__tip i:nth-child(2){background:var(--btn);animation-delay:.05s;animation-direction:alternate-reverse}
.ldr__tip i:nth-child(3){background:#8a877e;animation-delay:.11s}
@keyframes ldrjig{from{transform:translateX(-7px) scaleX(.6)}to{transform:translateX(7px) scaleX(1.4)}}
.ldr__name{font-family:var(--sans);font-weight:700;font-size:1rem;color:#ece9e1;letter-spacing:.01em}
.ldr__wave{position:absolute;left:50%;bottom:5.5vh;transform:translateX(-50%);width:clamp(74px,6.5vw,104px);height:auto;animation:ldrbob 1.7s ease-in-out infinite alternate}
@keyframes ldrbob{from{transform:translateX(-50%) translateY(-6%)}to{transform:translateX(-50%) translateY(6%)}}
@media(prefers-reduced-motion:reduce){.ldr{display:none}}

/* ═══════════ WERK-lijstweergave: 4 sporen [klant|beeldzone|project|type] (referentielayout) ═══════════ */
.works-list{padding:0 var(--gut) clamp(4rem,9vh,7rem)}
.wl__head,.wl{display:grid;grid-template-columns:minmax(0,1fr) clamp(160px,29vw,470px) minmax(0,1.1fr) minmax(110px,.62fr);gap:1.1rem;align-items:center}
.wl__head{padding:1.4rem 0 .9rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:#8a877e}
.wl__head span{padding:0 .55rem}
.wl__head span:nth-child(1){grid-column:1;grid-row:1}
.wl__head span:nth-child(2){grid-column:3;grid-row:1}
.wl__head span:nth-child(3){grid-column:4;grid-row:1;text-align:right}
.wl{padding:.3rem 0}
/* balken vullen hun hele spoor; de lichte achtergrond wipt erin via background-size */
.wl span{font-family:var(--sans);font-weight:700;font-size:clamp(.95rem,1.15vw,1.1rem);color:#ece9e1;line-height:1.35;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.34rem .55rem;border-radius:2px;background-image:linear-gradient(var(--btn),var(--btn));background-repeat:no-repeat;background-size:100% 0%;background-position:center bottom;transition:background-size .28s var(--ease),color .18s var(--ease) .04s}
.wl span:nth-child(1){grid-column:1;grid-row:1}
.wl .wl__project{grid-column:3;grid-row:1;text-align:left}
.wl .wl__type{grid-column:4;grid-row:1;text-align:right;color:#cfccc2}
/* puntjes aan weerszijden van de beeldzone */
.wl::before,.wl::after{content:"";grid-column:2;grid-row:1;width:6px;height:6px;border-radius:50%;background:var(--btn);align-self:center;opacity:0;transition:opacity .25s var(--ease) .12s}
.wl::before{justify-self:start;margin-left:.2rem}
.wl::after{justify-self:end;margin-right:.2rem}
@media(hover:hover) and (pointer:fine){
  .wl:hover span{background-size:100% 100%;color:#0d0c0a}
  .wl:hover::before,.wl:hover::after{opacity:1}
}
.wl-prev{position:fixed;left:0;top:0;width:420px;aspect-ratio:16/9;z-index:90;pointer-events:none;overflow:hidden;opacity:0;background:#11100d}
@media(max-width:860px){.wl-prev{display:none}}
.wl-prev img{width:100%;height:100%;object-fit:cover;display:block}
.wl.is-hide{display:none}
@media(max-width:760px){.wl__head{display:none}.wl{grid-template-columns:1fr auto;gap:.8rem}.wl .wl__project{display:none}.wl .wl__type{grid-column:2}.wl::before,.wl::after{display:none}}

/* cta-achtergrond zonder blur (bijv. koffieloop - geen tekst in beeld, mag herkenbaar zijn) */
.cta__bgvid.is-clear{filter:grayscale(1) brightness(.45) contrast(1.05)}

/* klantlogo's in de merkengrid: groot en gecentreerd, wit, gedimd, oplichten bij hover */
.clients__grid li img{max-height:64px;max-width:min(180px,100%);width:auto;height:auto;opacity:.5;transition:opacity .35s var(--ease)}
.clients__grid li img[src*="libema"]{width:min(175px,100%)}
.clients__grid li:hover img{opacity:1}
@media(max-width:860px){.clients__grid li img{max-height:40px;max-width:min(140px,100%)}}

/* ── zwevende WhatsApp-knop rechtsonder (mono.js injecteert de markup) - creme blok met donker
   glyphje, zoals de play-knoppen; hover: scale 1.07 + klein mono-label "App Chris" ernaast ── */
.wa-float{position:fixed;right:1.4rem;bottom:1.4rem;z-index:950;display:flex;align-items:center;gap:.7rem}
.wa-float__label{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;background:#161512;color:var(--btn);padding:.42rem .65rem;border-radius:3px;white-space:nowrap;opacity:0;transform:translateX(8px);transition:opacity .3s var(--ease),transform .3s var(--ease);pointer-events:none}
.wa-float__box{width:54px;height:54px;border-radius:4px;background:var(--btn);color:#161512;display:grid;place-items:center;flex:none;box-shadow:0 14px 30px -16px rgba(0,0,0,.65);transition:transform .3s var(--ease)}
.wa-float__box svg{width:27px;height:27px;display:block}
@media(hover:hover) and (pointer:fine){
  .wa-float:hover .wa-float__box{transform:scale(1.07)}
  .wa-float:hover .wa-float__label{opacity:1;transform:none}
}
.wa-float:focus-visible{outline:none}
.wa-float:focus-visible .wa-float__box{outline:2px solid var(--blue);outline-offset:3px}
.wa-float:focus-visible .wa-float__label{opacity:1;transform:none}
@media(max-width:760px){.wa-float{right:1rem;bottom:1rem}.wa-float__box{width:46px;height:46px}.wa-float__box svg{width:23px;height:23px}.wa-float__label{display:none}}