/* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
   SMLT — v6 BOLD  ·  the style of the WORK Verve makes (not their site)
   Vivid colour rooms, life-sized full-bleed campaign stills, huge
   expressive type, playful sticker labels. SMLT melt stays the signature.
   ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */
:root{
  /* ===== palette — molten poppy (definitief brandbook) ===== */
  --bg:#FCFAF4; --ink:#1A120C; --ink-soft:#6E6055;
  --accent:#CC3311; --accent2:#FF7A00;
  --on-accent:#FCFAF4; --on-accent2:#1A120C; --on-ink:#FCFAF4;
  --accent-lift:#FFB020; --accent-deep:#8F2410; --ink-deep:#3A1A0E;
  --grain-op:.06;
  /* back-compat aliases so existing rules keep resolving to the palette */
  --paper:var(--bg); --paper-2:#F3EDE3; --surface:#F3EDE3;
  --lime:var(--accent); --tang:var(--accent); --pink:var(--accent2); --sky:var(--accent2);
  --line:color-mix(in srgb, var(--ink) 16%, transparent);
  --display:"Bricolage Grotesque","Arial Narrow",system-ui,sans-serif;
  --mono:"Martian Mono",ui-monospace,monospace;
  --num:"Anton",sans-serif;
  --melt-set:"wght" 480,"opsz" 96;
  --melt-molten:"wght" 760,"opsz" 40;
  --step-display:clamp(3.4rem,1rem + 12vw,14rem);
  --step-h2:clamp(2.4rem,1.3rem + 4.5vw,6.5rem);
  --step-case:clamp(3rem,1.4rem + 7vw,10rem);
  --step-body:clamp(.98rem,.92rem + .3vw,1.12rem);
  --step-meta:.74rem;
  --pad-x:clamp(1.25rem,5vw,5rem);
  --maxw:1600px;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light only;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:not(.lenis){scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--mono);font-size:var(--step-body);line-height:1.55;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}
img{max-width:100%;display:block}a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}h1,h2,h3,h4,p,figure,blockquote{margin:0}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.skip{position:fixed;top:-120px;left:1rem;z-index:300;background:var(--ink);color:var(--paper);padding:.7rem 1.1rem;border-radius:6px;transition:top .2s}.skip:focus{top:1rem}
.filter-defs{position:absolute}
.grain{position:fixed;inset:0;z-index:250;pointer-events:none;opacity:var(--grain-op);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x)}

/* melt / display */
.melt{font-family:var(--display);font-variation-settings:var(--melt-set)}
.melt .w{display:inline-block;white-space:nowrap}
.melt .g{display:inline-block;font-variation-settings:inherit}
.melt-hover .g{transition:font-variation-settings .42s var(--ease)}
/* hover-warp is JS-driven (the logo's morph+shimmer, reused) — molten then settle */
.melt-warp .g{transition:font-variation-settings .42s var(--ease)}
/* load-morph: glyphs start molten (heavy+narrow) + faded + risen, then morph
   to the heading's rest weight. Widths are frozen at rest (JS), so the heavy
   start just bulges inside its box — it never reflows the line. */
.js .melt-enter .g{opacity:0;transform:translateY(.16em);font-variation-settings:"wght" 720,"opsz" 40}
.js .melt-enter.is-in .g{opacity:1;transform:none;font-variation-settings:inherit;transition:opacity .5s var(--ease),transform .6s var(--ease),font-variation-settings .8s var(--ease);transition-delay:calc(var(--i,0)*26ms)}
.melt-proximity .g{transition:font-variation-settings .12s linear}
.wordmark{display:inline-flex;font-family:var(--display);font-weight:700;letter-spacing:-.05em;line-height:1}
.wordmark span{display:inline-block}
.wordmark.melt{font-variation-settings:"wght" 700,"opsz" 40;transition:font-variation-settings .8s var(--ease)}
.wordmark.melt.is-set{font-variation-settings:"wght" 460,"opsz" 96}
.wordmark-static{font-variation-settings:"wght" 520,"opsz" 96}

.kicker{font-family:var(--mono);font-size:var(--step-meta);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);display:flex;align-items:center;gap:.6em;flex-wrap:wrap}
.kicker .dot{opacity:.5}.kicker-invert{color:rgba(244,239,230,.7)}
.accent{color:var(--accent)}

/* sticker label */
.sticker{display:inline-block;position:relative;z-index:0;font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.45em .9em;color:var(--ink);transform:rotate(-2deg)}
.sticker::before{content:"";position:absolute;inset:0;background:var(--c,var(--lime));z-index:-1;border-radius:2px}
.sticker.on-dark{color:#111}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.7em;font-family:var(--mono);font-size:.92rem;font-weight:600;padding:1.1em 1.6em;border-radius:100px;cursor:pointer;will-change:transform;transition:transform .35s var(--ease),background .3s,box-shadow .3s}
.btn-accent{background:var(--ink);color:var(--paper)}
.btn-accent:hover{transform:translateY(-2px)}
.btn-lg{font-size:clamp(1.05rem,.9rem + .6vw,1.5rem);padding:1.05em 1.8em}
.btn-arrow{transition:transform .35s var(--ease)}.btn:hover .btn-arrow{transform:translate(.2em,.2em)}.btn-lg:hover .btn-arrow{transform:translateX(.3em)}
.btn-ghost{display:inline-flex;align-items:center;font-family:var(--mono);font-size:.92rem;font-weight:600;padding:1.1em .2em;position:relative}
.btn-ghost::after{content:"";position:absolute;left:.2em;right:.2em;bottom:.7em;height:2px;background:currentColor;transform:scaleX(.35);transform-origin:left;transition:transform .35s var(--ease)}
.btn-ghost:hover::after{transform:scaleX(1)}

/* cursor */
.cursor{position:fixed;top:0;left:0;z-index:400;width:12px;height:12px;border-radius:50%;background:var(--accent);pointer-events:none;transform:translate(-50%,-50%);opacity:0;transition:width .3s var(--ease),height .3s var(--ease),opacity .3s;display:grid;place-items:center;mix-blend-mode:difference}
/* native muis blijft zichtbaar; het rondje verschijnt alleen bij de cases (is-hover) */
.cursor.is-hover{opacity:1;width:70px;height:70px;background:#fff}
.cursor-label{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#000;opacity:0;transform:scale(.8);transition:opacity .25s,transform .25s}
.cursor.is-hover .cursor-label{opacity:1;transform:scale(1)}
@media(hover:none),(pointer:coarse){.cursor{display:none}}

/* chrome — logo + nav are two independent fixed layers */
/* logo bar: its own layer, so mix-blend-mode:difference blends with the room
   behind it (ink→looks dark on light rooms, →looks light on dark rooms/photos).
   NB: difference must sit on this element, not a child — a z-indexed ancestor
   would isolate the blend (that was the earlier "logo stays white" bug). */
.chrome-mark{position:fixed;top:0;left:0;z-index:200;display:inline-flex;align-items:center;padding:1.15rem var(--pad-x);mix-blend-mode:difference;color:#fff;transition:padding .4s var(--ease)}
.chrome-mark.scrolled{padding-block:.85rem}
.chrome-mark .wordmark{font-size:2.5rem}
/* nav = Apple-style liquid-glass pill (normal blending, not the logo's difference) */
/* at the top: plain, no glass (hero has an even background, so it isn't needed) */
.chrome-nav{position:fixed;top:1rem;right:calc(var(--pad-x) + 1.1rem);z-index:201;display:flex;align-items:center;gap:clamp(1rem,2vw,1.8rem);font-family:var(--mono);font-size:.98rem;font-weight:600;color:var(--ink);padding:.72rem .72rem .72rem 1.6rem;border-radius:100px;
  background:transparent;border:1px solid transparent;box-shadow:none;
  transition:top .4s var(--ease),background .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease),-webkit-backdrop-filter .45s var(--ease),backdrop-filter .45s var(--ease)}
/* glossy sheen — hidden until the glass comes in */
.chrome-nav::before{content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .45s var(--ease);background:linear-gradient(125deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,.28) 14%,transparent 40%,transparent 82%,rgba(255,255,255,.14) 100%)}
/* on scroll: the liquid glass fades in */
.chrome-nav.scrolled{top:.85rem;
  background:linear-gradient(140deg,color-mix(in srgb,var(--bg) 84%,transparent),color-mix(in srgb,var(--bg) 64%,transparent));
  -webkit-backdrop-filter:blur(30px) saturate(2.1) brightness(1.1);backdrop-filter:blur(30px) saturate(2.1) brightness(1.1);
  backdrop-filter:url(#lg-refract) blur(11px) saturate(2.1) brightness(1.1);
  border-color:color-mix(in srgb,var(--ink) 7%,transparent);
  box-shadow:inset 0 1.5px 1px rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.2),inset 0 -10px 18px -9px rgba(0,0,0,.18),inset 0 14px 20px -14px rgba(255,255,255,.7),0 16px 40px -12px rgba(0,0,0,.48),0 4px 12px -4px rgba(0,0,0,.26)}
.chrome-nav.scrolled::before{opacity:1}
.chrome-nav a:not(.chrome-cta){opacity:.82}.chrome-nav a:not(.chrome-cta):hover{opacity:1}
.chrome-cta{padding:.6em 1.15em;border-radius:100px;background:var(--ink);color:var(--on-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 12px -6px rgba(0,0,0,.5);transition:transform .3s var(--ease),opacity .3s}
.chrome-cta:hover{transform:translateY(-1px)}
@media(max-width:760px){.chrome-nav{padding-left:.7rem}.chrome-nav a:not(.chrome-cta){display:none}}
/* fixed header no longer reserves space → keep anchor jumps clear of the bar */
#werk,#meer,#maken,#doen,#over,#contact{scroll-margin-top:clamp(4.5rem,9vh,6rem)}

/* hero — verstrooide zwevende kaarten boven/om de kop */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:clamp(7rem,14vh,10rem) 0 clamp(3rem,7vh,5.5rem);overflow:hidden}
.hero-inner{position:relative;z-index:2;width:100%}
.hero-cards{position:absolute;inset:0;z-index:1;pointer-events:none}
.hc{position:absolute;left:var(--x);top:var(--y);width:var(--w);margin:0;transform:translate3d(var(--px,0),var(--py,0),0) rotate(var(--r,0deg));transition:transform .35s var(--ease);will-change:transform}
.hc img,.hc video{width:100%;aspect-ratio:9/16;object-fit:cover;display:block;box-shadow:0 34px 70px -26px rgba(0,0,0,.42)}
.hc-front{z-index:3}
.hero-kicker{margin-bottom:1.4rem}
.hero-head{font-family:var(--display);font-size:var(--step-display);line-height:.82;letter-spacing:-.05em;font-variation-settings:"wght" 600,"opsz" 96;text-transform:lowercase}
.hh-line{display:block}.hh-accent{color:var(--accent)}
.hero-foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:2rem;margin-top:clamp(2rem,5vh,3.5rem)}
.hero-sub{max-width:34ch;font-size:clamp(1.05rem,.95rem + .5vw,1.45rem);line-height:1.45}
.hero-actions{display:flex;flex-wrap:wrap;gap:.6rem 1.3rem;align-items:center}
@media(max-width:900px){
  .hero{align-items:flex-end;padding-top:clamp(6rem,12vh,8rem)}
  .hc{display:none}
  /* !important: de posities staan inline op de kaarten (style="--x…"), dus mobiel moet overrulen */
  .hc:nth-child(1){display:block;--x:-5% !important;--y:11% !important;--w:34vw !important;--r:-6deg !important}
  .hc:nth-child(3){display:block;--x:29% !important;--y:2% !important;--w:38vw !important}
  .hc:nth-child(6){display:block;--x:74% !important;--y:15% !important;--w:34vw !important}
  .hc:nth-child(7){display:block;--x:38% !important;--y:21% !important;--w:28vw !important}
}

/* WORK — full-bleed colour spreads */
.werk{padding-block:clamp(4rem,8vh,7rem) 0}
.werk-head{margin-bottom:clamp(2rem,5vh,3.5rem)}
.werk-head .kicker{margin-bottom:.8rem}
.werk-head h2{font-family:var(--display);font-size:var(--step-h2);line-height:.95;letter-spacing:-.04em;font-variation-settings:var(--melt-set)}
.spread{position:relative;background-color:var(--c,var(--bg));color:var(--ink);min-height:clamp(560px,92vh,1000px);display:grid;grid-template-columns:1.05fr 1fr;align-items:stretch;overflow:hidden}
/* palette-driven rooms — solid colour, alternating */
.spread.room-accent{--c:var(--accent);color:var(--on-accent)}
.spread.room-accent2{--c:var(--accent2);color:var(--on-accent2)}
.spread.room-ink{--c:var(--ink);color:var(--on-ink)}
.spread.room-paper{--c:var(--bg);color:var(--ink)}
.room-accent .sticker,.room-accent2 .sticker,.room-ink .sticker{--c:var(--bg);color:var(--ink)}
.room-paper .sticker{--c:var(--accent);color:var(--on-accent)}
.spread-rev{grid-template-columns:1fr 1.05fr}
.spread-rev .spread-media{order:2}
.spread-media,.spread-copy{position:relative;z-index:1}
.spread-media{overflow:hidden}
.spread-media img,.spread-media video{width:100%;height:100%;object-fit:cover;transform:scale(1.16);will-change:transform}

/* ===== blok-overgang: overlap (definitief) — each block slides up over the previous ===== */
.spread{border-radius:clamp(18px,2.5vw,34px) clamp(18px,2.5vw,34px) 0 0;box-shadow:0 -20px 46px -28px rgba(0,0,0,.5)}
.spread + .spread{margin-top:clamp(-4rem,-6vh,-2rem)}
.spread-copy{display:flex;flex-direction:column;justify-content:center;gap:1.4rem;padding:clamp(2rem,6vw,6rem)}
.spread-no{font-family:var(--mono);font-size:var(--step-meta);letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.spread-title{font-family:var(--display);font-size:var(--step-case);line-height:.9;letter-spacing:-.04em;font-variation-settings:"wght" 620,"opsz" 96}
.spread-title em{font-style:normal}
.spread-desc{max-width:40ch;font-size:clamp(1rem,.95rem + .4vw,1.35rem);line-height:1.45;font-weight:500}
.spread-credit{font-family:var(--mono);font-size:var(--step-meta);letter-spacing:.04em;opacity:.7;margin-top:.4rem}
/* case-link: visible anchor; the whole spread is click-through via JS */
.spread[data-cursor]{cursor:pointer}
.spread-cta{display:inline-flex;align-items:center;gap:.6em;font-family:var(--mono);font-size:.9rem;font-weight:600;width:fit-content;margin-top:.5rem}
.spread-cta-label{position:relative}
.spread-cta-label::after{content:"";position:absolute;left:0;right:0;bottom:-.35em;height:2px;background:currentColor;transform:scaleX(.4);transform-origin:left;transition:transform .35s var(--ease)}
.spread:hover .spread-cta-label::after,.spread-cta:focus-visible .spread-cta-label::after{transform:scaleX(1)}
.spread-cta .btn-arrow{transition:transform .35s var(--ease)}
.spread:hover .spread-cta .btn-arrow{transform:translateX(.35em)}
@media(max-width:900px){
  .spread,.spread-rev{grid-template-columns:1fr;min-height:0}
  .spread-media{aspect-ratio:4/5;max-height:80vh}
  /* stacked: photo melts downward into the gradient/copy below it */
  .spread-media img,.spread-media video{transform:none;will-change:auto;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 72%,transparent 100%)}
  .spread-rev .spread-media{order:0}
}

/* MEER BEELD — dense bento wall of stills */
.meer{padding-block:clamp(4rem,9vh,8rem) clamp(2rem,5vh,4rem)}
.meer-head{margin-bottom:clamp(2rem,5vh,3rem)}
.meer-head .kicker{margin-bottom:.8rem}
.meer-head h2{font-family:var(--display);font-size:var(--step-h2);line-height:.95;letter-spacing:-.04em;font-variation-settings:var(--melt-set)}
.meer-lead{margin-top:1rem;max-width:44ch;color:var(--ink-soft)}
.mg{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(150px,23vw,330px);grid-auto-flow:dense;gap:clamp(.6rem,1.2vw,1.1rem)}
.mg-item{position:relative;margin:0;overflow:hidden;background:var(--surface)}
.mg-item img,.mg-item video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.mg-item:hover img,.mg-item:hover video{transform:scale(1.05)}
.mg-item .sticker{position:absolute;top:.9rem;left:.9rem;margin:0;--c:var(--bg);color:var(--ink);transition:transform .35s var(--ease)}
.mg-item:hover .sticker{transform:rotate(0)}
.mg-tall{grid-row:span 2}
.mg-wide{grid-column:span 2}
@media(max-width:900px){.mg{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(150px,40vw,260px)}}

/* WAT WE MAKEN — dark room, service index + floating hover preview */
.maken{background:var(--ink);color:var(--on-ink);padding-block:clamp(4rem,9vh,7.5rem)}
.maken .kicker{color:color-mix(in srgb,var(--on-ink) 62%,transparent)}
.maken-head h2{font-family:var(--display);font-size:var(--step-h2);line-height:.95;letter-spacing:-.04em;font-variation-settings:var(--melt-set);max-width:18ch}
.maken-head .kicker{margin-bottom:.8rem}
.maken h2 .accent{color:var(--accent-lift)}
.svc{margin-top:clamp(1.8rem,4vh,3rem)}
.svc-row{display:grid;grid-template-columns:auto 1fr minmax(26ch,.55fr);gap:clamp(1rem,3vw,3rem);align-items:baseline;padding-block:clamp(.85rem,2vh,1.3rem);border-top:1px solid color-mix(in srgb,var(--on-ink) 18%,transparent)}
.svc-row:last-child{border-bottom:1px solid color-mix(in srgb,var(--on-ink) 18%,transparent)}
.svc-no{font-family:var(--mono);font-size:var(--step-meta);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-lift)}
.svc-name{font-family:var(--display);font-size:clamp(1.3rem,1.05rem + 1.2vw,2.2rem);line-height:1.05;letter-spacing:-.02em;font-variation-settings:"wght" 540,"opsz" 96}
.svc-desc{color:color-mix(in srgb,var(--on-ink) 66%,transparent);max-width:44ch}
@media(max-width:860px){.svc-row{grid-template-columns:auto 1fr;row-gap:.5rem}.svc-desc{grid-column:2}}
/* floating preview follows the cursor (JS sets left/top; CSS only fades/scales) */
.svc-float{position:fixed;z-index:120;top:0;left:0;width:clamp(160px,15vw,230px);aspect-ratio:4/5;overflow:hidden;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.9) rotate(-3deg);transition:opacity .3s var(--ease),transform .3s var(--ease);box-shadow:0 30px 80px -20px rgba(0,0,0,.55)}
.svc-float.is-on{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-3deg)}
.svc-float img{width:100%;height:100%;object-fit:cover}
@media(hover:none),(pointer:coarse){.svc-float{display:none}}
@media(prefers-reduced-motion:reduce){.svc-float{display:none}}

/* MANIFESTO — a plain light section, in line with the rest (Zo werkt het / Over) */
.doen{background:var(--bg);color:var(--ink);padding-block:clamp(5rem,12vh,11rem)}
.doen-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.doen h2{font-family:var(--display);font-size:var(--step-h2);line-height:.96;letter-spacing:-.04em;font-variation-settings:var(--melt-set);margin-top:.8rem}
.doen h2 .accent{color:var(--accent)}
.doen-lead{margin-top:1.6rem;max-width:44rem;color:rgba(251,250,246,.72);font-size:clamp(1.05rem,.95rem + .4vw,1.35rem);line-height:1.5}
.doen-head{max-width:48rem}
.creed{margin-top:clamp(2.5rem,6vh,4.5rem);display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.6rem,3vw,3.2rem) clamp(2rem,5vw,5rem)}
.creed-item{display:flex;flex-direction:column;gap:.7rem;padding-top:1.2rem;border-top:1px solid color-mix(in srgb,var(--ink) 16%,transparent)}
.creed-no{font-family:var(--mono);font-size:var(--step-meta);letter-spacing:.14em;color:var(--accent)}
.creed-item p{font-family:var(--display);font-variation-settings:"wght" 480,"opsz" 72;font-size:clamp(1.15rem,1rem + .7vw,1.7rem);line-height:1.12;letter-spacing:-.02em;color:var(--ink)}
@media(max-width:900px){.creed{grid-template-columns:1fr}}
.verbs{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.6rem}
.verbs li{font-family:var(--mono);font-size:var(--step-meta);letter-spacing:.04em;text-transform:uppercase;padding:.6em 1em;border:1px solid rgba(244,239,230,.25);border-radius:100px}
.bead{display:grid;place-items:center}.bead-stage{width:min(100%,300px);height:auto;overflow:visible}.bead-a,.bead-b{will-change:transform}
@media(max-width:900px){.doen-grid{grid-template-columns:1fr}.bead{order:-1;justify-items:start}}

/* over — founder */
.over{padding-block:clamp(5rem,12vh,11rem)}
.over-grid{max-width:62rem}
.over h2{font-family:var(--display);font-size:var(--step-h2);line-height:.96;letter-spacing:-.04em;font-variation-settings:var(--melt-set);margin-top:.7rem}
.over-lead{margin-top:1.4rem;max-width:46rem;color:var(--ink-soft);font-size:clamp(1.05rem,.95rem + .4vw,1.3rem);line-height:1.55}
.over-lead + .over-lead{margin-top:1rem}
.over-role{margin-top:1.8rem}
.over-role .sticker{--c:var(--accent);color:var(--on-accent)}

/* contact — bold colour room */
.contact{background:var(--accent);color:var(--on-accent);padding-block:clamp(6rem,16vh,13rem)}
.contact .kicker{color:rgba(255,255,255,.7)}
.contact-title{font-family:var(--display);font-size:var(--step-display);line-height:.84;letter-spacing:-.05em;font-variation-settings:"wght" 620,"opsz" 96;text-transform:lowercase;margin:.6rem 0 0}
.contact-actions{display:flex;flex-wrap:wrap;gap:.8rem 1.5rem;align-items:center;margin-top:2rem}
.contact .btn-accent{background:#fff;color:var(--ink)}
.contact .btn-ghost{color:#fff}
.contact-note{margin-top:1.6rem;font-size:clamp(1rem,.95rem + .3vw,1.2rem);color:rgba(255,255,255,.88);max-width:40ch}
.contact-visit{margin-top:.8rem;font-family:var(--mono);font-size:var(--step-meta);letter-spacing:.05em;color:rgba(255,255,255,.7)}

/* footer */
.colophon{background:var(--ink);color:var(--paper);padding-block:clamp(3rem,7vh,5rem)}
.cl-grid{display:grid;grid-template-columns:auto 1.1fr .9fr 1fr;gap:clamp(1.5rem,5vw,4rem);align-items:start}
.cl-nav{display:flex;flex-direction:column;gap:.5rem;font-family:var(--mono);font-size:var(--step-meta);letter-spacing:.04em}
.cl-nav a{color:rgba(244,239,230,.7);width:fit-content;transition:color .25s}
.cl-nav a:hover{color:var(--paper)}
.cl-mark .wordmark{font-size:clamp(2.5rem,6vw,4.5rem)}
.cl-line{font-family:var(--mono);font-size:var(--step-meta);line-height:1.7;color:rgba(244,239,230,.7)}
.cl-line .ul{color:var(--paper)}
@media(max-width:900px){.cl-grid{grid-template-columns:1fr}}

/* ===== navbar gallery (fullscreen menu + hover-preview) ===== */
.nav-toggle{display:inline-flex;align-items:center;gap:.6em;font-family:var(--mono);font-size:.85rem;font-weight:600;color:inherit;background:transparent;border:0;padding:.55em 0 .55em .3em;cursor:pointer}
.nav-toggle-ico{position:relative;width:16px;height:9px;display:inline-block}
.nav-toggle-ico i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .4s var(--ease),top .4s var(--ease)}
.nav-toggle-ico i:first-child{top:1px}.nav-toggle-ico i:last-child{top:6.5px}
body.nav-open .nav-toggle-ico i:first-child{top:3.75px;transform:rotate(45deg)}
body.nav-open .nav-toggle-ico i:last-child{top:3.75px;transform:rotate(-45deg)}
body.nav-open{overflow:hidden}
body.nav-open .chrome-mark{z-index:290}
body.nav-open .chrome-nav{z-index:291;color:var(--on-ink);background:transparent;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
body.nav-open .chrome-nav::before{opacity:0}
body.nav-open .chrome-nav a:not(.chrome-cta){color:var(--on-ink)}
body.nav-open .chrome-cta{background:transparent;color:var(--on-ink)}

.navgal{position:fixed;inset:0;z-index:280;background:var(--ink);color:var(--on-ink);opacity:0;visibility:hidden;pointer-events:none;display:flex;flex-direction:column;justify-content:center;padding:clamp(5.5rem,12vh,8rem) 0 clamp(2rem,5vh,4rem);transition:opacity .5s var(--ease),visibility .5s var(--ease)}
.navgal.is-open{opacity:1;visibility:visible;pointer-events:auto}
.navgal-grid{display:grid;grid-template-columns:1fr .85fr;gap:clamp(2rem,6vw,6rem);align-items:center;flex:1;min-height:0}
.navgal-links{display:flex;flex-direction:column;gap:clamp(.1rem,1vh,1rem)}
.navgal-link{position:relative;display:flex;align-items:baseline;gap:1rem;font-family:var(--display);font-size:clamp(2.6rem,1.4rem + 6vw,7rem);line-height:1.02;letter-spacing:-.04em;font-variation-settings:"wght" 560,"opsz" 96;color:var(--on-ink);opacity:0;transform:translateY(.4em);transition:color .3s var(--ease)}
.navgal.is-open .navgal-link{opacity:1;transform:none;transition:opacity .55s var(--ease),transform .55s var(--ease);transition-delay:calc(.12s + var(--n,0)*.06s)}
.navgal-link:hover,.navgal-link:focus-visible{color:var(--accent-lift)}
.navgal-idx{font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.14em;color:var(--accent-lift);opacity:.85;align-self:flex-start;padding-top:.4em}
.navgal-stage{position:relative;height:min(62vh,540px);overflow:hidden;background:color-mix(in srgb,var(--on-ink) 8%,transparent)}
.navgal-preview{position:absolute;inset:0}
.navgal-preview img,.navgal-preview video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .6s var(--ease),transform 6s linear}
.navgal-preview img.is-shown{opacity:1;transform:scale(1.12)}
.navgal-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;font-family:var(--mono);font-size:var(--step-meta);letter-spacing:.04em;color:rgba(251,250,246,.66);margin-top:clamp(1.5rem,4vh,2.5rem)}
.navgal-foot a{color:var(--on-ink)}
@media(max-width:900px){
  .navgal{justify-content:flex-start;padding-top:clamp(5rem,14vh,7rem)}
  .navgal-grid{grid-template-columns:1fr;gap:2rem;align-items:start}
  .navgal-stage{display:none}
  .navgal-link{font-size:clamp(2.4rem,1.2rem + 9vw,4rem)}
}
@media(prefers-reduced-motion:reduce){
  .navgal,.navgal-link,.navgal-preview img,.nav-toggle-ico i{transition-duration:.001ms!important}
  .navgal.is-open .navgal-link{transition-delay:0ms!important}
}

/* reveals */
.js [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js [data-reveal].is-in{opacity:1;transform:none}
/* big full-bleed spreads: no entrance — just present (felt clunky popping in) */
.js .spread[data-reveal]{opacity:1;transform:none;transition:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .melt,.melt .g,.wordmark,.hero-head,.spread-title,.contact-title{font-variation-settings:var(--melt-set)!important}
  .js .melt-enter .g{opacity:1!important;transform:none!important;font-variation-settings:inherit!important}
  .js [data-reveal]{opacity:1!important;transform:none!important}
  /* lint blijft bewust WEL doorlopen (keuze Nick) — overschrijft de globale *-regel hierboven */
  .case-lint-track{animation:lint var(--lint-dur,38s) linear infinite!important}
  .cursor{display:none!important}
}

/* ===== subpagina's (werk.html / maken.html) ===== */
.page-top{padding-top:clamp(7.5rem,15vh,11rem)}
.page-head .kicker{margin-bottom:.8rem}
.page-head h1{font-family:var(--display);font-size:var(--step-h2);line-height:.95;letter-spacing:-.04em;font-variation-settings:var(--melt-set)}
.page-head h1 .accent{color:var(--accent)}
.page-lead{margin-top:1.2rem;max-width:46ch;color:var(--ink-soft)}

/* cases-overzicht (werk.html) — grid van klikbare kaarten, schaalt mee met meer cases */
.cases{padding-bottom:clamp(3.5rem,8vh,6rem)}
.cx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));gap:clamp(1.4rem,2.6vw,2.4rem);margin-top:clamp(2.2rem,5vh,3.5rem)}
.cx{position:relative;display:block}
.cx-media{display:block;position:relative;aspect-ratio:4/5;overflow:hidden}
.cx-media img,.cx-media video{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.cx:hover .cx-media img,.cx:focus-visible .cx-media img,.cx:hover .cx-media video,.cx:focus-visible .cx-media video{transform:scale(1.05)}
.cx-media .sticker{position:absolute;top:.9rem;left:.9rem;margin:0;--c:var(--bg);color:var(--ink)}
.cx:hover .cx-media .sticker{transform:rotate(0)}
.cx-title{margin-top:1.1rem;font-family:var(--display);font-size:clamp(1.4rem,1.1rem + 1.4vw,2.3rem);line-height:1.02;letter-spacing:-.02em;font-variation-settings:"wght" 560,"opsz" 96}
.cx-title em{font-style:normal;color:var(--accent)}
.cx-meta{margin-top:.4rem;font-family:var(--mono);font-size:var(--step-meta);letter-spacing:.06em;color:var(--ink-soft);max-width:40ch}
.cx-cta{display:inline-flex;align-items:center;gap:.5em;margin-top:.8rem;font-family:var(--mono);font-size:.85rem;font-weight:600}
.cx:hover .cx-cta .btn-arrow{transform:translateX(.35em)}

/* home: alle-cases CTA + wat-we-maken teaser */
.werk-more{display:flex;justify-content:center;padding-block:clamp(2.4rem,5vh,3.8rem) 0}
.btn-invert{background:var(--bg);color:var(--ink)}
.btn-invert:hover{transform:translateY(-2px)}
.maken-lead{margin-top:1.4rem;max-width:46ch;font-size:clamp(1.02rem,.95rem + .4vw,1.3rem);line-height:1.5;color:color-mix(in srgb,var(--on-ink) 78%,transparent)}
.maken-actions{margin-top:clamp(1.8rem,4vh,2.6rem)}
.maken-head h1{max-width:18ch}
.maken h1 .accent{color:var(--accent-lift)}
/* donkere subpagina (maken.html): lichte nav zolang de glass-pill er nog niet is */
body.page-dark .chrome-nav:not(.scrolled){color:var(--on-ink)}
body.page-dark .chrome-nav:not(.scrolled) .chrome-cta{background:var(--bg);color:var(--ink)}
/* mobiel: compactere chrome (grote bar botst met hero-kaarten) + treat-kaart niet over de tekst */
@media(max-width:760px){
  .chrome-mark{padding-block:.85rem}
  .chrome-mark .wordmark{font-size:2rem}
  .chrome-nav{top:.85rem;font-size:.9rem;padding-top:.6rem;padding-bottom:.6rem}
}
@media(max-width:900px){
  .hc-front{z-index:1}
}
/* actieve pagina in de bar */
.chrome-nav a[aria-current]{opacity:1;text-decoration:underline;text-underline-offset:.35em;text-decoration-thickness:2px}

/* contactformulier — op de accent-kamer; bezoeker ziet nooit een mailadres */
.cform{margin-top:2rem;max-width:44rem;display:grid;gap:1rem}
.cform-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:700px){.cform-grid{grid-template-columns:1fr}}
.cform-field{display:grid;gap:.45rem;font-family:var(--mono);font-size:var(--step-meta);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.cform-field input,.cform-field textarea{font-family:var(--mono);font-size:.95rem;letter-spacing:0;text-transform:none;color:var(--on-accent);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.35);border-radius:10px;padding:.85em 1em;outline:none;transition:border-color .2s,background .2s}
.cform-field input::placeholder,.cform-field textarea::placeholder{color:rgba(255,255,255,.45)}
.cform-field input:focus,.cform-field textarea:focus{border-color:#fff;background:rgba(255,255,255,.14)}
.cform-field textarea{resize:vertical;min-height:7rem}
.cform-actions{margin-top:.4rem}
.cform-bot{position:absolute;left:-9999px}
.cform-done{font-family:var(--mono);font-size:1.05rem;color:var(--on-accent);border:1px solid rgba(255,255,255,.4);border-radius:12px;padding:1.2em 1.4em;max-width:34rem}
.cform-err{font-family:var(--mono);font-size:.8rem;color:#FFD9CC}