/* Navigaties binnen de site: oude pagina blijft staan tot de nieuwe getekend is (geen witte flits). */
@view-transition { navigation: auto; }
/* Limitless — Concept 03
   Tokens volgen het Figma-ontwerp (1920px canvas). Maten schalen met vw en
   worden met clamp() begrensd zodat mobiel en ultrawide netjes blijven. */
:root {
  --cream: #f8efe5;
  --sand: #e8dbcd;
  --ink: #0a0a0a;
  /* Accent = het beige uit het ontwerp; in light mode (beige panelen) wordt dat inkt. */
  --signal: var(--ink);
  --on-signal: var(--cream);
  --bg: var(--cream);
  --panel: var(--sand);
  --fg: var(--ink);
  --fg-soft: rgba(10, 10, 10, .4);
  --line: rgba(10, 10, 10, .35);
  --chip: rgba(10, 10, 10, .06);
  --display: "Integral CF", "Archivo", "Arial Black", sans-serif;
  --sans: "PP Mori", "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(1rem, 2.1vw, 2.5rem);
  --radius: 8px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);
  color-scheme: light;
}
:root[data-theme="dark"], .surface-dark {
  --signal: var(--sand);
  --on-signal: var(--ink);
  --bg: #0a0a0a;
  --panel: #161512;
  --fg: var(--cream);
  --fg-soft: rgba(248, 239, 229, .4);
  --line: rgba(248, 239, 229, .3);
  --chip: rgba(248, 239, 229, .08);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: clamp(1rem, 1.04vw, 1.25rem);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  transition: background-color .6s var(--ease), color .6s var(--ease);
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--fg); color: var(--bg); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }

.display {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 125%;
  font-variation-settings: "wdth" 125;
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.label {
  display: inline-flex; align-items: center; gap: .5rem;
  margin: 0; font-size: clamp(1.05rem, 1.25vw, 1.5rem); line-height: 1;
}
.label::before {
  content: ""; width: .58em; height: .58em; border-radius: 2px; background: currentColor;
}
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; padding: .6rem clamp(1rem, 1.9vw, 2.3rem);
  border: 1px solid currentColor; border-radius: 4px;
  font-size: clamp(.72rem, .83vw, 1rem); font-weight: 600; line-height: 1;
  letter-spacing: .02em; text-transform: uppercase; white-space: nowrap;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.chip-sm { min-height: 2.2rem; padding-inline: 1rem; }
.skip-link {
  position: fixed; z-index: 1000; top: .6rem; left: .6rem; padding: .7rem 1rem;
  background: var(--fg); color: var(--bg); transform: translateY(-200%);
}
.skip-link:focus { transform: none; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Header ---------- */
.site-header {
  position: fixed; z-index: 60; inset: 0 0 auto;
  font-family: var(--display); font-weight: 800; font-stretch: 125%;
  font-variation-settings: "wdth" 125;
  font-size: clamp(.68rem, .83vw, 1rem); line-height: 1; text-transform: uppercase;
  pointer-events: none;
}
.site-header a, .site-header button { pointer-events: auto; }
.header-full {
  position: relative;
  transition: transform .7s var(--ease), opacity .5s var(--ease);
}
.header-full::before {
  content: ""; position: absolute; inset: 0 0 -1.5rem; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--bg) 55%, transparent);
}
.site-header.is-compact .header-full { transform: translateY(-110%); opacity: 0; pointer-events: none; }
.site-header.is-compact .header-full * { pointer-events: none; }
.header-row {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 1.1rem var(--gutter) 1rem;
}
/* Ticker ("In the studio") */
.ticker {
  display: flex; align-items: center; gap: 1.2rem; height: 2.3rem; padding-left: var(--gutter); overflow: hidden;
  border-bottom: 1px solid var(--line);
  font-family: var(--sans); font-weight: 400; font-stretch: 100%; font-variation-settings: normal;
  font-size: clamp(.72rem, .75vw, .9rem); text-transform: none;
}
.ticker-label { display: inline-flex; align-items: center; gap: .6rem; flex: 0 0 auto; font-weight: 600; }
.ticker-label .status-dot { width: .55rem; height: .55rem; }
.ticker-track {
  display: flex; width: max-content; opacity: .6;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent);
}
.ticker-set { display: flex; flex: 0 0 auto; align-items: center; gap: 1.6rem; white-space: nowrap; padding-right: 1.6rem; animation: marquee-set 38s linear infinite; }
.ticker-set i { font-style: normal; color: var(--signal); }
.ticker:hover .ticker-set { animation-play-state: paused; }
.status { display: inline-flex; align-items: center; gap: 1.25rem; justify-self: start; margin: 0; }
.status-dot {
  width: .74em; height: .74em; border-radius: 2px; background: var(--signal);
  animation: blink 1.6s steps(1) infinite;
}
.site-nav { display: flex; gap: 1rem; padding-inline: 1.25rem; }
.site-nav a, .theme-toggle button { position: relative; opacity: .4; transition: opacity .3s var(--ease); }
.site-nav a:hover, .site-nav a.is-active, .theme-toggle button[aria-pressed="true"],
.theme-toggle button:hover { opacity: 1; }
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.4em; height: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.site-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.close-project { justify-self: center; }
.theme-toggle { display: flex; gap: 1rem; justify-self: end; }
.theme-toggle button { font: inherit; text-transform: inherit; letter-spacing: inherit; }
.header-start { display: flex; gap: 1rem; justify-self: start; }

/* Compacte staat: logoblok links, Menu-pil rechts */
.header-mark, .menu-pill {
  position: absolute; top: 1rem;
  transform: translateY(-160%); opacity: 0;
  transition: transform .7s var(--ease), opacity .4s var(--ease), background-color .3s, color .3s;
}
.site-header.is-compact .header-mark, .site-header.is-compact .menu-pill,
.menu-open .header-mark, .menu-open .menu-pill { transform: none; opacity: 1; }
.header-mark {
  left: var(--gutter); display: grid; place-items: center; width: 2.6rem; height: 2.6rem;
  border-radius: 7px; background: var(--signal); color: var(--on-signal);
}
.menu-pill {
  right: var(--gutter); display: inline-flex; align-items: center; gap: .55rem; height: 2.6rem; padding: 0 1.2rem;
  border-radius: 999px; background: var(--signal); color: var(--on-signal);
  font: inherit; text-transform: inherit;
}
.menu-pill-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--signal); transition: transform .4s var(--ease); }
.menu-pill:hover .menu-pill-dot { transform: scale(1.6); }
.menu-open .menu-pill { background: var(--signal); color: var(--on-signal); }
.menu-open .menu-pill .menu-pill-dot { background: var(--on-signal); }

/* Fullscreen menu */
.site-menu {
  position: fixed; z-index: 55; inset: 0; overflow-y: auto;
  background: var(--panel); color: var(--fg);
  clip-path: inset(0 0 100% 0 round 0 0 24px 24px);
  transition: clip-path .7s var(--ease-in-out);
}
.site-menu.is-open { clip-path: inset(0 0 0 0 round 0); }
.site-menu-inner {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 3rem; align-items: end;
  min-height: 100%; padding: 6rem var(--gutter) var(--gutter);
}
.menu-list { margin: 0; padding: 0; list-style: none; }
.menu-list li { overflow: hidden; border-bottom: 1px solid var(--line); }
.menu-list a {
  display: flex; align-items: baseline; gap: 1.2rem; padding: .35rem 0;
  transform: translateY(105%); transition: transform .8s var(--ease) calc(.15s + var(--i) * .05s), color .3s;
}
.site-menu.is-open .menu-list a { transform: none; }
.menu-index { font-size: .85rem; opacity: .45; font-variant-numeric: tabular-nums; }
.menu-word {
  font-family: var(--display); font-weight: 800; font-stretch: 125%; font-variation-settings: "wdth" 125;
  font-size: clamp(1.8rem, min(5.2vw, 8.2svh), 6.2rem); line-height: 1; text-transform: uppercase;
  transition: transform .5s var(--ease);
}
.menu-list a:hover .menu-word, .menu-list a:focus-visible .menu-word { transform: translateX(.3em); }
.menu-list a:hover { color: var(--signal); }
.menu-list a[aria-current="page"] .menu-word { -webkit-text-stroke: 1.5px var(--fg); color: transparent; }
.menu-aside { display: grid; gap: 1.6rem; justify-items: start; padding-bottom: .6rem; text-transform: uppercase; font-size: .9rem; opacity: 0; transform: translateY(1.5rem); transition: opacity .6s var(--ease) .45s, transform .8s var(--ease) .45s; }
.site-menu.is-open .menu-aside { opacity: 1; transform: none; }
.menu-aside p { margin: 0; line-height: 1.6; }
.menu-aside strong { display: block; font-weight: 600; opacity: .5; }
.menu-aside .theme-toggle { justify-self: start; font-family: var(--display); font-weight: 800; font-stretch: 125%; }
html.menu-open, html.menu-open body { overflow: hidden; }

@media (max-width: 760px) {
  .header-full { display: none; }
  .header-mark, .menu-pill { transform: none; opacity: 1; }
  .site-menu-inner { grid-template-columns: 1fr; align-content: end; }
  .status-text-long { display: none; }
}

/* ---------- Split button ("+ label") ---------- */
.btn-split { display: inline-flex; align-items: stretch; gap: 3px; height: 3rem; font-family: var(--sans); font-weight: 500; font-size: clamp(.9rem, .95vw, 1.1rem); text-transform: none; }
.btn-split-icon, .btn-split-label { display: grid; place-items: center; border-radius: 9px; background: var(--signal); color: var(--on-signal); transition: transform .5s var(--ease), border-radius .5s var(--ease), background-color .3s; }
.btn-split-icon { width: 3rem; }
.btn-split-icon svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .6s var(--ease); }
.btn-split-label { padding: 0 1.3rem; white-space: nowrap; }
.btn-split:hover .btn-split-icon svg { transform: rotate(90deg); }
.btn-split:hover .btn-split-icon { border-radius: 50%; }
.btn-split:hover .btn-split-label { transform: translateX(4px); }
.btn-split.is-ghost .btn-split-icon, .btn-split.is-ghost .btn-split-label { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); }
.btn-split.is-ghost:hover .btn-split-icon, .btn-split.is-ghost:hover .btn-split-label { background: var(--signal); color: var(--on-signal); box-shadow: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- Tabs & notches (cutthecode-vormentaal) ---------- */
/* Een tab steekt boven een paneel uit in dezelfde kleur; holle hoekjes verbinden hem met het paneel. */
.shape { --r: 14px; --shape-bg: var(--panel); position: relative; background: var(--shape-bg); border-radius: 22px; }
.shape-tab {
  position: absolute; bottom: 100%; left: clamp(1.5rem, 5vw, 6rem);
  display: inline-flex; align-items: center; gap: .55rem; padding: .85rem 1.2rem .4rem;
  border-radius: var(--r) var(--r) 0 0; background: var(--shape-bg);
  font-size: clamp(.8rem, .85vw, 1rem); font-weight: 600;
}
.shape-tab::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--signal); }
.shape-tab::after, .shape-tab .tab-fillet {
  content: ""; position: absolute; bottom: 0; width: var(--r); height: var(--r);
  background: radial-gradient(circle at 100% 0, transparent calc(var(--r) - .5px), var(--shape-bg) var(--r));
  right: 100%;
}
.shape-tab .tab-fillet { right: auto; left: 100%; background: radial-gradient(circle at 0 0, transparent calc(var(--r) - .5px), var(--shape-bg) var(--r)); }
/* Een notch snijdt een hoek uit een paneel in de paginakleur. */
.notch {
  --r: 18px;
  position: absolute; right: 0; bottom: 0; z-index: 2;
  padding: 1rem 0 0 1rem; background: var(--bg); border-top-left-radius: var(--r);
  transition: background-color .6s var(--ease);
}
.notch::before, .notch::after {
  content: ""; position: absolute; width: var(--r); height: var(--r);
  background: radial-gradient(circle at 0 0, transparent calc(var(--r) - .5px), var(--bg) var(--r));
}
.notch::before { right: 0; bottom: 100%; }
.notch::after { right: 100%; bottom: 0; }

/* ---------- Preloader (Concept 01 page load) ---------- */
.preloader {
  position: fixed; z-index: 200; inset: 0; display: grid; place-items: center; overflow: hidden;
  background: var(--fg); color: var(--bg); pointer-events: none;
}
.pl-logo { width: clamp(180px, 20.8vw, 400px); height: auto; overflow: visible; }
.pl-logo path { fill: currentColor; }
.pl-fill { position: absolute; inset: 0; background: currentColor; clip-path: circle(0% at 50% 50%); }
.pl-letter, .pl-t { transform-box: view-box; transform: translateY(110%); }
html.is-loading, html.is-loading body { overflow: hidden; }

/* ---------- Page transition ---------- */
.page-wipe {
  position: fixed; z-index: 150; inset: 0; background: var(--fg);
  transform: scaleY(0); transform-origin: bottom; pointer-events: none;
}
.page-wipe.is-leaving { transform: scaleY(1); transition: transform .55s var(--ease-in-out); }
.page-wipe.is-entering { transform: scaleY(1); transform-origin: top; }
.page-wipe.is-entered { transform: scaleY(0); transform-origin: top; transition: transform .7s var(--ease-in-out); }

/* ---------- Cursor ---------- */
.cursor {
  position: fixed; z-index: 300; top: 0; left: 0; pointer-events: none;
  width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--cream); mix-blend-mode: difference;
  display: grid; place-items: center;
  transition: width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease), opacity .3s;
}
.cursor-label {
  font-family: var(--display); font-weight: 800; font-stretch: 125%; font-size: .78rem;
  color: var(--ink); text-transform: uppercase; opacity: 0; transition: opacity .25s;
}
.cursor.is-label {
  width: 104px; height: 104px; margin: -52px 0 0 -52px; mix-blend-mode: normal; background: var(--signal);
}
.cursor.is-label .cursor-label { opacity: 1; color: var(--on-signal); }
.cursor.is-hover { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
.cursor.is-hidden { opacity: 0; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }
@media (hover: hover) and (pointer: fine) { .has-cursor, .has-cursor a, .has-cursor button { cursor: none; } }

/* ---------- Text animation helpers ---------- */
.split-line { display: block; overflow: hidden; padding-bottom: .04em; margin-bottom: -.04em; }
.split-line > span { display: block; transform: translateY(105%); transition: transform 1.1s var(--ease); }
.is-in .split-line > span, .split-line.is-in > span { transform: none; }
.reveal { opacity: 0; transform: translateY(2.2rem); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.char { display: inline-block; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  padding: clamp(6.6rem, 5.4vw + 1rem, 7.2rem) var(--gutter) var(--gutter);
  display: flex;
}
.hero-panel {
  position: relative; flex: 1;
  display: flex; flex-direction: column; justify-content: space-between; gap: 3rem;
  min-height: calc(100svh - 8rem);
  padding: clamp(1rem, 1.67vw, 2rem);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
  transform-origin: 50% 0;
}
.hero-title { font-size: clamp(2.35rem, 5.55vw, 6.67rem); max-width: 12.5em; }
.hero-meta {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem;
  align-items: start;
}
.hero-meta p, .hero-meta ul { margin: 0; padding: 0; list-style: none; max-width: 22em; }
.hero-logo { width: clamp(90px, 6.35vw, 122px); margin-bottom: .6rem; }
.hero-logo path { fill: currentColor; }
.hero-meta a { position: relative; }
.hero-meta a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease);
}
.hero-meta a:hover::after { transform: scaleX(1); transform-origin: left; }
.hero-scroll { display: inline-flex; align-items: center; gap: .75rem; }
.hero-scroll i {
  position: relative; width: 1px; height: 1.6em; background: var(--line); overflow: hidden;
}
.hero-scroll i::after {
  content: ""; position: absolute; inset: 0; background: var(--fg);
  animation: scroll-line 1.8s var(--ease-in-out) infinite;
}
.hero-ticker {
  position: absolute; right: clamp(1rem, 1.67vw, 2rem); top: clamp(1rem, 1.67vw, 2rem);
  font-variant-numeric: tabular-nums; opacity: .5; text-align: right; font-size: .85em;
}
@media (max-width: 900px) {
  .hero-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .hero-ticker { display: none; }
  .hero-meta { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; font-size: .9rem; }
  .hero-meta > :first-child { grid-column: 1 / -1; }
}

/* ---------- Recent works ---------- */
/* Rustige structuur: eigen kop, daarna per project een rij (beeld 7 kolommen, info 5), afwisselend. */
.works { padding: clamp(5rem, 9vw, 11rem) var(--gutter) clamp(5rem, 9vw, 10rem); overflow-x: clip; }
.works-head { display: grid; gap: clamp(1.5rem, 3vw, 3rem); margin-bottom: clamp(3rem, 6vw, 7rem); }
.works-heading { display: grid; font-size: clamp(3.3rem, 11.16vw, 13.4rem); line-height: .9; }
.works-word { display: block; will-change: transform; }
.works-word:last-child { justify-self: end; }
.works-intro {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding-top: 1.1rem; border-top: 1px solid var(--line); font-size: clamp(.95rem, 1.1vw, 1.3rem);
}
.works-intro p { margin: 0; }
.works-intro span { opacity: .55; font-variant-numeric: tabular-nums; }
.works-list { margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(4rem, 8vw, 9rem); }
.work-row {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3.5rem);
  align-items: start;
}
.work-row .work-media { grid-column: 1 / span 7; }
.work-row .work-meta { grid-column: 9 / span 4; }
.work-row:nth-child(even) .work-media { grid-column: 6 / span 7; grid-row: 1; }
.work-row:nth-child(even) .work-meta { grid-column: 1 / span 4; grid-row: 1; }
.work-media {
  position: relative; display: block; aspect-ratio: 16 / 10.5; overflow: hidden;
  border-radius: var(--radius); background: #111;
  clip-path: inset(10% 6% 10% 6% round var(--radius));
  transition: clip-path 1.4s var(--ease);
}
.work-media :is(img, video) {
  position: absolute; inset: -12% 0; width: 100%; height: 124%; object-fit: cover;
  transform: translate3d(0, var(--py, 0), 0) scale(1.08);
  transition: transform .9s var(--ease);
  will-change: transform;
}
.work-row:hover .work-media :is(img, video) { transform: translate3d(0, var(--py, 0), 0) scale(1.13); }
.work-media::after { content: ""; position: absolute; inset: 0; background: rgba(10, 10, 10, .25); mix-blend-mode: overlay; }
.work-meta { display: grid; gap: 1.1rem; justify-items: start; padding-top: .9rem; border-top: 1px solid var(--line); }
.work-index { display: flex; gap: .5rem; margin: 0 0 .6rem; font-size: .9rem; font-variant-numeric: tabular-nums; }
.work-index span:last-child { opacity: .45; }
.work-meta h3 { font-size: clamp(2rem, 3.6vw, 4.3rem); }
.work-meta h3 a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 3px no-repeat; transition: background-size .6s var(--ease); }
.work-row:hover .work-meta h3 a { background-size: 100% 3px; }
.work-sector { margin: -.3rem 0 0; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; opacity: .55; }
.work-desc { max-width: 26em; margin: 0; opacity: .75; line-height: 1.5; }
.work-meta .btn-split { margin-top: .5rem; }
@media (max-width: 900px) {
  .work-row, .work-row:nth-child(even) { grid-template-columns: 1fr; }
  .work-row .work-media, .work-row .work-meta,
  .work-row:nth-child(even) .work-media, .work-row:nth-child(even) .work-meta { grid-column: 1; grid-row: auto; }
  .works-word:last-child { justify-self: start; }
}

/* ---------- Manifesto ---------- */
.manifesto { position: relative; height: 220svh; }
.manifesto-panel {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: grid; place-items: center; padding: var(--gutter);
  background: var(--ink); color: var(--cream);
  border-radius: 20px;
  clip-path: inset(var(--inset-y, 6%) var(--inset-x, 4%) round 20px);
}
.manifesto-copy { max-width: 81vw; text-align: center; }
.manifesto-copy .display { font-size: clamp(1.6rem, 3.33vw, 4rem); line-height: 1.1; }
.manifesto-copy .word { display: inline-block; opacity: .4; transition: opacity .25s linear; }
.manifesto-copy .word.is-lit { opacity: 1; }
.manifesto-copy .label { margin-top: 2.2rem; }
.manifesto-foot {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: var(--gutter);
  display: flex; justify-content: space-between; gap: 1rem;
}
.manifesto-marquee {
  position: absolute; left: 0; right: 0; top: var(--gutter); overflow: hidden; opacity: .07;
  font-family: var(--display); font-weight: 800; font-stretch: 125%; font-size: 18vw; line-height: .9;
  white-space: nowrap; text-transform: uppercase; pointer-events: none;
}
.manifesto-marquee span { display: inline-block; animation: marquee 32s linear infinite; }

/* ---------- Round button ---------- */
.round-btn {
  display: grid; place-items: center; flex: 0 0 auto; width: 3.1rem; height: 3.1rem; border-radius: 50%;
  background: var(--chip); color: var(--fg); transition: background-color .35s var(--ease), color .35s var(--ease), transform .5s var(--ease);
}
.round-btn svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.5; }
.round-btn:hover { background: var(--signal); color: var(--on-signal); transform: rotate(-45deg); }
.round-btn:disabled { opacity: .3; pointer-events: none; }

/* ---------- Case highlights (slider) ---------- */
.highlights { padding: clamp(4rem, 7vw, 8rem) var(--gutter) 0; }
.highlights-shape { padding: clamp(1.5rem, 3vw, 3.5rem) 0 clamp(1.5rem, 3vw, 3.5rem) clamp(1.25rem, 3vw, 3.5rem); }
.highlights-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; padding-right: clamp(1.25rem, 3vw, 3.5rem); margin-bottom: 2rem; }
.highlights-head .display { font-size: clamp(2rem, 4.4vw, 5.3rem); }
.slider-nav { display: flex; gap: .5rem; }
.slider {
  display: flex; gap: clamp(.8rem, 1.3vw, 1.5rem); margin: 0; padding: 0 clamp(1.25rem, 3vw, 3.5rem) 0 0; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain;
}
.slider::-webkit-scrollbar { display: none; }
.slider.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; }
.slider.is-dragging a { pointer-events: none; }
.slide { flex: 0 0 clamp(250px, 24vw, 420px); scroll-snap-align: start; }
.slide a { display: grid; gap: .9rem; }
.slide figure { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 14px; background: #1a1a1a; }
.slide :is(img, video) { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.slide a:hover img { transform: scale(1.06); }
/* De "Case"-tag zit in een uitgesneden hoek rechtsboven. */
.slide-tag {
  --r: 12px;
  position: absolute; top: 0; right: 0; padding: .45rem .8rem .55rem 1rem; border-bottom-left-radius: var(--r);
  background: var(--panel); font-size: .78rem; font-weight: 600;
}
.slide-tag::before, .slide-tag::after {
  content: ""; position: absolute; width: var(--r); height: var(--r);
  background: radial-gradient(circle at 0 100%, transparent calc(var(--r) - .5px), var(--panel) var(--r));
}
.slide-tag::before { right: 100%; top: 0; }
.slide-tag::after { right: 0; top: 100%; }
.slide h3 { margin: 0; font-size: clamp(1rem, 1.25vw, 1.45rem); font-weight: 500; line-height: 1.2; }
.slide p { margin: 0; font-size: .85rem; opacity: .5; }
.slide-cta a { height: 100%; }
.slide-cta-inner {
  display: grid; align-content: space-between; gap: 2rem; aspect-ratio: 4 / 5; padding: 1.6rem;
  border-radius: 14px; background: var(--signal); color: var(--on-signal);
}
.slide-cta-inner .display { font-size: clamp(2rem, 3vw, 3.4rem); line-height: .95; }
.slide-cta-inner .btn-split-icon, .slide-cta-inner .btn-split-label { background: var(--on-signal); color: var(--signal); }

/* ---------- Services (kaarten) ---------- */
.services { padding: clamp(6rem, 10vw, 12rem) var(--gutter) 0; }
.services-shape { padding: clamp(2rem, 5vw, 6rem) clamp(1.25rem, 5vw, 6rem); }
.services-intro { max-width: 22em; margin: 0 0 clamp(3rem, 5vw, 5.5rem); font-size: clamp(1.5rem, 2.7vw, 3.2rem); line-height: 1.12; }
.service-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.service-card {
  position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 1.2rem;
  padding: clamp(1rem, 2vw, 2rem) clamp(1rem, 2vw, 2.2rem) clamp(1rem, 2vw, 2rem) 0;
  border-right: 1px solid var(--line); border-top-right-radius: 22px;
}
.service-card + .service-card { padding-left: clamp(1rem, 2vw, 2.2rem); }
.service-card:last-child { border-right: 0; }
.service-card .display { font-size: clamp(1.5rem, 2.5vw, 3rem); }
.service-card p { max-width: 24em; margin: 0; opacity: .65; line-height: 1.45; }
.service-card .chips { padding-right: 3.6rem; }
.service-card .round-btn { position: absolute; right: clamp(1rem, 2vw, 2.2rem); bottom: clamp(1rem, 2vw, 2rem); }
.service-card:last-child .round-btn { right: 0; }
.service-card:hover .round-btn { background: var(--signal); color: var(--on-signal); }
.services-cta { margin-top: clamp(2rem, 4vw, 4rem); }
@media (max-width: 900px) {
  .service-cards { grid-template-columns: 1fr; }
  .service-card, .service-card + .service-card { padding: 1.6rem 0; border-right: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
  .service-card .round-btn, .service-card:last-child .round-btn { right: 0; bottom: 1.6rem; }
}

/* ---------- Why ---------- */
.why {
  display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(1rem, 2vw, 2rem);
  padding: clamp(6rem, 10vw, 12rem) var(--gutter) 0;
}
.why-title { position: sticky; top: 6rem; align-self: start; padding-left: clamp(0rem, 4vw, 5rem); font-size: clamp(2.4rem, 5vw, 6rem); }
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.6rem, 1vw, 1rem); }
.why-card {
  min-height: clamp(11rem, 14vw, 16rem); padding: clamp(1.25rem, 2vw, 2.2rem); border-radius: 18px;
  background: var(--panel); display: grid; align-content: space-between; gap: 1.5rem;
  transition: background-color .4s var(--ease), transform .6s var(--ease);
}
.why-card:nth-child(odd) { transform: translateY(2.5rem); }
.why-card h3 { margin: 0; font-size: clamp(1.3rem, 1.9vw, 2.3rem); font-weight: 500; }
.why-card p { margin: 0; max-width: 24em; opacity: .6; font-size: .95em; }
.why-card:hover { background: var(--signal); color: var(--on-signal); }
.why-card:hover p { opacity: .85; }
@media (max-width: 860px) {
  .why { grid-template-columns: 1fr; }
  .why-title { position: static; padding-left: 0; }
  .why-grid { grid-template-columns: 1fr; }
  .why-card:nth-child(odd) { transform: none; }
}

/* ---------- Network (multiplayer-cursors) ---------- */
.network {
  display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 4vw, 5rem); align-items: center;
  padding: clamp(7rem, 11vw, 13rem) var(--gutter) clamp(2rem, 4vw, 4rem) clamp(1rem, 6vw, 7rem);
}
.network-copy { display: grid; gap: 1.5rem; justify-items: start; }
.network-copy .display { font-size: clamp(2.2rem, 4.6vw, 5.6rem); }
.network-copy > p:not(.label) { max-width: 30em; margin: 0; opacity: .7; }
.network-board {
  position: relative; height: clamp(22rem, 36vw, 40rem); border-radius: 22px; overflow: hidden;
  background-image: radial-gradient(circle, var(--line) 1.2px, transparent 1.6px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse at center, #000 55%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 55%, transparent 100%);
}
.nw-node {
  position: absolute; left: var(--x); top: var(--y);
  animation: float 6s ease-in-out infinite; animation-delay: calc(var(--y) * -.08s);
}
.nw-chip { padding: .7rem 1.1rem; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); font-size: .9rem; font-weight: 500; }
.nw-chip-red { background: var(--signal); color: var(--on-signal); border-color: transparent; }
.nw-mark { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 12px; background: var(--fg); color: var(--bg); font-family: var(--display); font-weight: 800; font-stretch: 125%; font-size: 1.6rem; }
.nw-bubble { max-width: 16rem; padding: .8rem 1rem; border-radius: 14px 14px 14px 4px; background: var(--sand); color: var(--ink); font-size: .85rem; line-height: 1.35; box-shadow: 0 14px 40px -18px rgba(0,0,0,.5); }
.nw-cursor {
  position: absolute; top: 0; left: 0; z-index: 2; display: flex; align-items: flex-start; gap: .1rem;
  transform: translate3d(var(--cx, 50%), var(--cy, 50%), 0); will-change: transform;
}
.nw-cursor svg { width: 1.2rem; height: 1.2rem; fill: var(--sand); stroke: var(--ink); stroke-width: 1; }
.nw-cursor b { margin-top: 1rem; padding: .2rem .55rem; border-radius: 6px; background: var(--sand); color: var(--ink); font-size: .75rem; font-weight: 600; white-space: nowrap; }
.nw-cursor-alt svg, .nw-cursor-alt b { fill: #9b9b93; background: #9b9b93; }
.nw-cursor-red svg { fill: var(--signal); }
.nw-cursor-red b { background: var(--signal); color: var(--on-signal); }
@keyframes float { 50% { transform: translateY(-10px); } }
@media (max-width: 860px) {
  .network { grid-template-columns: 1fr; padding-left: var(--gutter); }
}

/* ---------- CTA-band + footer ---------- */
.cta-band {
  margin-top: clamp(4rem, 8vw, 9rem); padding: 0 clamp(.5rem, 1vw, 1rem) clamp(.5rem, 1vw, 1rem);
  border-radius: 28px 28px 0 0; background: var(--sand); color: var(--ink);
}
.site-footer-full .cta-band { margin-top: 0; }
.cta-marquee { display: block; overflow: hidden; padding: clamp(2rem, 4vw, 4rem) 0; }
.cta-track { display: flex; width: max-content; }
.cta-set { display: flex; flex: 0 0 auto; align-items: center; white-space: nowrap; animation: marquee-set 30s linear infinite; }
.cta-line { padding: 0 clamp(1rem, 1.6vw, 2rem); font-size: clamp(2rem, 4.2vw, 5rem); letter-spacing: -.02em; white-space: nowrap; }
.cta-band .btn-split-icon, .cta-band .btn-split-label { background: var(--ink); color: var(--cream); }
.cta-star { padding: 0 clamp(1rem, 1.6vw, 2rem); font-style: normal; font-size: clamp(1.4rem, 2.4vw, 2.8rem); }
.footer-cards { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(.4rem, .6vw, .8rem); }
.footer-card { border-radius: 22px; background: var(--ink); color: var(--cream); padding: clamp(1.4rem, 2.5vw, 2.8rem); }
.footer-card-main { display: grid; gap: 2.4rem; }
.footer-mark { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 9px; background: var(--sand); color: var(--ink); }
.footer-mark svg { width: 2.4rem; height: 2.4rem; fill: currentColor; }
.footer-cols { display: grid; grid-template-columns: repeat(3, auto); gap: 1.5rem clamp(1.5rem, 3vw, 4rem); justify-content: start; font-size: .92rem; }
.footer-cols ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem; }
.footer-cols p { margin: 0 0 .6rem; line-height: 1.5; }
.footer-head { margin-bottom: .8rem !important; font-size: .78rem; opacity: .45; }
.footer-cols a { transition: color .3s; }
.footer-cols a:hover { color: var(--sand); }
.footer-card-side { display: grid; align-content: space-between; gap: 3rem; }
.socials { display: flex; flex-wrap: wrap; gap: 3px; justify-self: end; }
.social { padding: .8rem 1.5rem; border-radius: 9px; background: var(--sand); color: var(--ink); font-size: .9rem; font-weight: 500; transition: transform .4s var(--ease); }
.social:hover { transform: translateY(-3px); }
.social-red { background: var(--sand); }
.social-outline { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 1px rgba(248, 239, 229, .35); }
.footer-logo { width: 100%; height: auto; }
.footer-logo path { fill: var(--cream); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1rem clamp(.8rem, 1.5vw, 1.8rem) .3rem; font-size: .85rem;
}
.footer-bottom i { font-style: normal; }
.back-top { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--ink); color: var(--cream); transition: transform .5s var(--ease); }
.back-top:hover { transform: translateY(-4px); }
.back-top svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
@media (max-width: 860px) {
  .footer-cards { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .socials { justify-self: start; }
}

/* ---------- Hero notch ---------- */
.hero-notch { padding: 1rem 0 0 1rem; }
@media (max-width: 760px) { .hero-notch { position: static; padding: 0; background: none; } .hero-notch::before, .hero-notch::after { display: none; } }

/* ---------- Contact panel (footer) ---------- */
.contact-wrap { padding: clamp(3rem, 6vw, 7rem) var(--gutter) 0; }
.contact-panel {
  position: relative; overflow: hidden;
  padding: clamp(1.25rem, 2.1vw, 2.55rem);
  border-radius: var(--radius); background: var(--panel);
}
.contact-top { display: flex; justify-content: space-between; gap: 2rem; }
.contact-info { display: grid; gap: 1.5rem; align-content: start; font-size: clamp(.75rem, .83vw, 1rem); text-transform: uppercase; }
.contact-info p { margin: 0; line-height: 1.45; }
.contact-info strong { display: block; font-weight: 600; }
.contact-info a { transition: opacity .3s; }
.contact-info a:hover { opacity: .5; }
.hello {
  font-size: clamp(2.4rem, 7.56vw, 9.1rem); line-height: .835; text-align: right;
  display: grid; justify-items: end;
}
.hello .at { font-family: var(--sans); font-weight: 600; font-stretch: 100%; font-variation-settings: normal; display: inline-block; }
.hello .char { transition: transform .5s var(--ease), color .3s; }
.hello .char:hover { transform: translateY(-.12em) rotate(-6deg); }
.contact-form { margin-top: clamp(3rem, 8vw, 10rem); }
.contact-form > p { max-width: 22.5em; margin: 0 0 2rem; line-height: 1.3; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 1.1rem; }
.form-col { display: grid; gap: 2rem; align-content: start; }
.field { position: relative; display: grid; gap: 1.1rem; }
.field label { font-size: clamp(.72rem, .83vw, 1rem); font-weight: 600; text-transform: uppercase; opacity: .4; }
.field input, .field textarea {
  width: 100%; padding: 0 0 .9rem; border: 0; border-radius: 0; background: transparent;
  font-size: clamp(1rem, 1.25vw, 1.5rem); outline: none; resize: none;
}
.field input::placeholder, .field textarea::placeholder { color: var(--fg); opacity: .44; }
.field::after, .field::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line);
}
.field::after { background: var(--fg); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.field:focus-within::after { transform: scaleX(1); }
.field-message { height: 100%; grid-template-rows: auto 1fr; }
.field-message textarea { min-height: 8rem; height: 100%; }
.send {
  position: relative; display: flex; width: 100%; height: 4.5rem; margin-top: 2.4rem;
  align-items: center; justify-content: center; overflow: hidden;
  border: 1px solid var(--fg); font-size: clamp(1rem, 1.25vw, 1.5rem); text-transform: uppercase;
}
.send::before {
  content: ""; position: absolute; inset: 0; background: var(--fg);
  transform: translateY(101%); transition: transform .6s var(--ease);
}
.send span { position: relative; transition: color .4s var(--ease); }
.send:hover::before { transform: none; }
.send:hover span { color: var(--bg); }
.form-note { min-height: 1.4em; margin: 1rem 0 0; font-size: .85em; opacity: .7; }
@media (max-width: 760px) {
  .contact-top { flex-direction: column-reverse; }
  .hello { justify-items: start; text-align: left; }
  .form-grid { grid-template-columns: 1fr; }
}

/* ---------- Logo echo (cursor follow) ---------- */
.echo { position: relative; padding: clamp(3rem, 7vw, 8rem) var(--gutter) clamp(1rem, 3vw, 3rem); overflow: hidden; }
.echo svg { width: 100%; height: auto; overflow: visible; }
.echo use { fill: none; stroke: currentColor; stroke-width: 1.2px; }

/* ---------- Bottom bar ---------- */
.bottom-bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 1.6rem var(--gutter) 1.8rem;
  font-family: var(--display); font-weight: 800; font-stretch: 125%; font-variation-settings: "wdth" 125;
  font-size: clamp(.68rem, .83vw, 1rem); text-transform: uppercase;
}
.bottom-bar svg { width: clamp(110px, 8vw, 153px); height: auto; }
.bottom-bar svg path { fill: currentColor; }
.bottom-bar > :last-child { justify-self: end; }
.bottom-bar a { transition: opacity .3s; }
.bottom-bar a:hover { opacity: .5; }

/* ---------- Project page ---------- */
.project-hero { position: relative; min-height: 100svh; display: grid; align-content: end; overflow: hidden; }
.project-hero-media { position: absolute; inset: 0; }
.project-hero-media img { width: 100%; height: 115%; object-fit: cover; transform: translate3d(0, var(--py, 0), 0) scale(1.05); will-change: transform; }
.project-hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,.25) 0%, rgba(10,10,10,.1) 35%, var(--ink) 92%);
}
.project-title { position: relative; padding: 0 .4vw; text-align: center; }
.project-title .display { display: block; font-size: clamp(3rem, 12.6vw, 15.2rem); line-height: .86; letter-spacing: -.02em; }
.project-title .display + .display { font-size: clamp(1.6rem, 6.9vw, 8.3rem); line-height: 1; }
.project-hero .chips { position: relative; justify-content: center; margin: 2rem 0 0; }
.project-intro-row {
  position: relative; display: flex; justify-content: space-between; gap: 1rem;
  padding: clamp(2rem, 3vw, 3.5rem) clamp(1rem, 10vw, 12rem) 0;
}
.project-about {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 8rem);
  padding: clamp(4rem, 7vw, 8rem) clamp(1rem, 10vw, 12rem) clamp(6rem, 12vw, 14rem);
}
.project-about .label { margin-bottom: 1.6rem; }
.project-about p { max-width: 27em; margin: 0 0 1.4em; font-size: clamp(.95rem, 1vw, 1.15rem); }
.credits { margin: 0; border-top: 1px solid var(--fg); }
.credits div { display: grid; grid-template-columns: 1fr 1fr; padding: .7rem 0; border-bottom: 1px solid var(--line); font-size: clamp(.72rem, .8vw, .95rem); text-transform: uppercase; }
.credits dd { margin: 0; opacity: .45; }
.visit {
  display: inline-flex; align-items: center; gap: .9rem; margin-top: 2rem;
  font-family: var(--display); font-weight: 800; font-stretch: 125%; font-size: clamp(1rem, 1.25vw, 1.5rem); text-transform: uppercase;
}
.visit i { display: grid; place-items: center; width: 1.2em; height: 1.2em; border: 1px solid currentColor; border-radius: 3px; font-style: normal; font-size: .7em; transition: transform .5s var(--ease), background .3s, color .3s; }
.visit:hover i { transform: rotate(-45deg); background: var(--signal); color: var(--on-signal); border-color: var(--signal); }
.gallery { display: grid; gap: clamp(1.5rem, 3vw, 3.5rem); padding: 0 var(--gutter); }
.gallery-duo { display: grid; grid-template-columns: 1.65fr 1fr; gap: clamp(.75rem, 1.2vw, 1.5rem); }
.gallery figure { margin: 0; overflow: hidden; border-radius: var(--radius); background: #1a1a1a; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1.6s var(--ease); }
.gallery .is-in img, .gallery figure.is-in img { transform: scale(1); }
.gallery-duo figure { aspect-ratio: 1222 / 1030; }
.gallery-duo figure:last-child { aspect-ratio: auto; }
.gallery .gallery-center { width: min(54vw, 1040px); margin: clamp(4rem, 8vw, 10rem) auto 0; aspect-ratio: 16 / 10.7; }
.flow-arrow { display: grid; justify-items: center; color: var(--fg-soft); }
.flow-arrow svg { width: 40px; height: auto; }
.flow-arrow path:first-child { stroke-dasharray: 6 6; animation: dash 1.2s linear infinite; }
.carousel {
  display: flex; gap: clamp(1rem, 3.3vw, 4rem); overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 calc(50vw - min(27vw, 520px)); margin: 0 calc(-1 * var(--gutter));
  scrollbar-width: none; cursor: grab;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.carousel.is-dragging * { pointer-events: none; user-select: none; }
.carousel figure { flex: 0 0 min(54vw, 1040px); aspect-ratio: 16 / 10.7; scroll-snap-align: center; transition: transform .6s var(--ease), opacity .6s var(--ease); }
.carousel figure:not(.is-current) { transform: scale(.92); opacity: .55; }
.showcase {
  position: relative; display: grid; place-items: center; margin-top: clamp(4rem, 8vw, 9rem);
  min-height: clamp(22rem, 64vw, 77rem); border-radius: var(--radius); overflow: hidden;
  background: var(--sand);
}
.showcase-bg { position: absolute; inset: 0; }
.showcase-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(30px) saturate(1.2); transform: scale(1.2); opacity: .9; }
.browser {
  position: relative; width: min(64%, 1100px); border-radius: 10px; overflow: hidden;
  box-shadow: 0 40px 120px -30px rgba(0,0,0,.55); background: #fff;
  transform: perspective(1600px) rotateX(var(--rx, 12deg)) scale(var(--bs, .92)); transition: transform .2s linear;
}
.browser-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; background: #ececec; color: #555; font-size: 12px; }
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d4d4d4; }
.browser-bar span { margin-left: 14px; padding: 3px 14px; border-radius: 6px; background: #fff; }
.browser-view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.browser-view img { width: 100%; height: auto; min-height: 100%; object-fit: cover; object-position: top; transition: transform 6s linear; }
.browser:hover .browser-view img { transform: translateY(calc(-100% + var(--view-h, 0px))); }
.thanks { max-width: 33em; margin: 0 auto; padding: clamp(6rem, 12vw, 14rem) var(--gutter) clamp(4rem, 8vw, 9rem); text-align: center; }
.thanks p { margin: 0; font-size: clamp(1rem, 1.25vw, 1.5rem); }
@media (max-width: 760px) {
  .project-about { grid-template-columns: 1fr; }
  .gallery-duo { grid-template-columns: 1fr; }
  .gallery-duo figure:last-child { aspect-ratio: 4 / 5; }
  .gallery .gallery-center { width: 100%; }
  .carousel { padding-inline: 8vw; }
  .carousel figure { flex-basis: 84vw; }
  .browser { width: 88%; }
  .project-intro-row { padding-inline: var(--gutter); }
}

/* ---------- News ---------- */
.news-page { padding: clamp(7rem, 11vw, 13rem) clamp(1rem, 7.5vw, 9rem) 0; }
.news-head .display { font-size: clamp(4rem, 12.4vw, 15rem); line-height: .82; }
.news-sub {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem;
  margin-top: clamp(2.5rem, 4vw, 5rem); padding-bottom: 1.1rem; border-bottom: 1px solid var(--fg);
}
.news-sub p { max-width: 24em; margin: 0; }
.news-sub span { white-space: nowrap; }
.news-featured { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 4vw, 5rem); margin: clamp(2rem, 2.5vw, 3rem) 0 clamp(5rem, 8vw, 9rem); }
.news-card { display: grid; gap: 1.2rem; margin: -1rem; padding: 1rem; border-radius: var(--radius); transition: background-color .5s var(--ease); }
.news-card:hover { background: var(--panel); }
.news-card figure { margin: 0; aspect-ratio: 720 / 376; overflow: hidden; border-radius: 6px; background: #111; }
.news-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.news-card:hover img { transform: scale(1.05); }
.news-card-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; }
.news-card h2, .news-row h3 { font-size: clamp(1.15rem, 1.95vw, 2.35rem); line-height: .97; }
.arrow-box {
  flex: 0 0 auto; display: grid; place-items: center; width: clamp(2rem, 2.5vw, 3rem); aspect-ratio: 1;
  border: 1px solid var(--fg); border-radius: 3px; transition: background .4s var(--ease), color .4s var(--ease);
}
.arrow-box svg { width: 45%; transition: transform .5s var(--ease); }
.news-card:hover .arrow-box, .news-row:hover .arrow-box { background: var(--signal); color: var(--on-signal); border-color: var(--signal); }
.news-card:hover .arrow-box svg, .news-row:hover .arrow-box svg { transform: translateX(15%); }
.news-list { display: grid; gap: .6rem; }
.news-row {
  display: flex; justify-content: space-between; align-items: center; gap: 2rem;
  padding: clamp(1.1rem, 1.7vw, 2rem) clamp(1rem, 1.7vw, 2rem); border-radius: var(--radius);
  transition: background-color .5s var(--ease), padding .5s var(--ease);
}
.news-row:hover { background: var(--panel); }
.news-row h3 { max-width: 22em; font-size: clamp(1.15rem, 2.4vw, 2.9rem); }
.news-row-meta { display: flex; gap: .5rem; align-items: center; }
.news-tag {
  display: inline-flex; align-items: center; min-height: 2.2rem; padding: 0 1rem;
  border: 1px solid currentColor; border-radius: 3px; font-size: clamp(.72rem, .75vw, .9rem); white-space: nowrap; text-transform: uppercase;
}
@media (max-width: 760px) {
  .news-featured { grid-template-columns: 1fr; gap: 3rem; }
  .news-row { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

.article { display: grid; grid-template-columns: .82fr 1fr; gap: clamp(2rem, 9vw, 11rem); padding: clamp(8.5rem, 10vw, 12rem) clamp(1rem, 10vw, 12rem) 0; }
.article-aside { position: sticky; top: 7rem; align-self: start; display: grid; gap: 1.3rem; }
.article-aside .display { font-size: clamp(1.6rem, 2.6vw, 3.1rem); line-height: .97; }
.article-aside figure { margin: 2rem 0 0; aspect-ratio: 625 / 420; overflow: hidden; border-radius: 6px; }
.article-aside img, .article-body figure img { width: 100%; height: 100%; object-fit: cover; }
.article-body { max-width: 46rem; padding-top: .5rem; }
.article-body .lede { margin-top: 0; font-size: clamp(1.2rem, 1.85vw, 2.2rem); line-height: 1.38; }
.article-body p { line-height: 1.45; }
.article-body h2 { margin: 3.5rem 0 1rem; font-size: clamp(1.1rem, 1.6vw, 1.9rem); }
.article-body figure { margin: 4rem 0; aspect-ratio: 765 / 520; overflow: hidden; border-radius: 6px; }
.more-news { padding: clamp(6rem, 10vw, 12rem) clamp(1rem, 10vw, 12rem) 0; }
.more-news-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 2rem; }
.more-news-head .display { font-size: clamp(2.2rem, 5vw, 6rem); }
.see-all { display: inline-flex; gap: .9rem; align-items: center; font-family: var(--display); font-weight: 800; font-stretch: 125%; text-transform: uppercase; }
.see-all .arrow-box { width: 1.6rem; }
.see-all:hover .arrow-box { background: var(--signal); color: var(--on-signal); }
@media (max-width: 860px) {
  .article { grid-template-columns: 1fr; }
  .article-aside { position: static; }
}

/* ---------- Keyframes ---------- */
@keyframes blink { 50% { opacity: .2; } }
@keyframes scroll-line { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes marquee-set { to { transform: translateX(-100%); } }
@keyframes dash { to { stroke-dashoffset: -12; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal, .split-line > span { opacity: 1; transform: none; }
  .work-media { clip-path: none; }
  .manifesto-copy .word { opacity: 1; }
}

/* ---------- Woord-reveal & intro (aangevuld) ---------- */
.split-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.split-word > span { display: inline-block; transform: translateY(110%); transition: transform 1.1s var(--ease); }
.is-in .split-word > span { transform: none; }
[data-intro].is-in .reveal { opacity: 1; transform: none; }
[data-intro] .hero-meta { transition-delay: .45s; }
[data-intro] .hero-scroll { transition-delay: .6s; }
html.is-preloading::after { content: ""; position: fixed; z-index: 199; inset: 0; background: var(--fg); }
@media (prefers-reduced-motion: reduce) { .split-word > span { transform: none; } }
.project-hero-glow .project-hero-media {
  background: radial-gradient(circle at 70% 18%, color-mix(in srgb, var(--accent, #eeff1d) 70%, transparent) 0, transparent 34%), #000;
}
.project-hero-glow .project-hero-media img { object-fit: contain; object-position: 50% 0; }
.browser-view.is-product { display: grid; place-items: center; background: #f5f5f5; }
.browser-view.is-product img { width: 70%; height: 90%; min-height: 0; object-fit: contain; }
.carousel figure.is-pack { display: grid; place-items: center; background: #fff; }
.carousel figure.is-pack img { width: 78%; height: 82%; object-fit: contain; transform: none; }
@media (max-width: 760px) {
  .hero { padding-top: 4.4rem; }
  .hero-panel { min-height: calc(100svh - 5.4rem); }
}

/* ---------- Lenis smooth scroll ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- fleava-effecten ---------- */
/* Beelden trekken licht scheef met de scrollsnelheid (--skew wordt door script.js gezet). */
.work-media, .slide figure, .gallery-duo figure, .gallery .gallery-center, .news-card figure {
  transform: skewY(calc(var(--skew, 0) * 1deg)); transform-origin: 50% 50%;
}
.motion-hover { position: fixed; z-index: 58; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-panel { isolation: isolate; }
.hero-blob {
  position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity 1.6s var(--ease);
}
.hero-blob.is-ready { opacity: 1; }

/* ---------- About ---------- */
.about-hero .label { margin-bottom: -1.5rem; }
.about-hero .hero-meta { margin-bottom: 4.5rem; }
@media (max-width: 760px) { .about-hero .hero-meta { margin-bottom: 0; } }
.about-story {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 8rem); align-items: center;
  padding: clamp(6rem, 11vw, 13rem) var(--gutter) clamp(4rem, 8vw, 9rem) clamp(1rem, 8vw, 10rem);
}
.about-story-copy { display: grid; gap: 1.6rem; }
.about-story-copy .display { font-size: clamp(2.2rem, 4.6vw, 5.6rem); }
.about-story-copy > p:not(.label) { max-width: 32em; margin: 0; opacity: .75; line-height: 1.5; }
.about-collage { position: relative; height: clamp(26rem, 46vw, 52rem); }
.about-collage figure { position: absolute; margin: 0; overflow: hidden; border-radius: var(--radius); transform: translate3d(0, var(--py, 0), 0); box-shadow: 0 30px 80px -35px rgba(0, 0, 0, .65); }
.about-collage img { width: 100%; height: 100%; object-fit: cover; }
.collage-a { left: 0; top: 6%; width: 72%; aspect-ratio: 3 / 2; }
.collage-b { right: 0; top: 0; width: 36%; aspect-ratio: 4 / 5; z-index: 2; }
.collage-c { left: 18%; bottom: 0; width: 52%; aspect-ratio: 3 / 2; z-index: 3; }
.process {
  display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 6vw, 8rem);
  padding: clamp(5rem, 9vw, 11rem) var(--gutter) clamp(5rem, 9vw, 11rem) clamp(1rem, 8vw, 10rem);
}
.process-head { position: sticky; top: 7rem; align-self: start; display: grid; gap: 1.5rem; }
.process-head .display { font-size: clamp(2rem, 4vw, 4.8rem); }
.process-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.process-step {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 3vw, 3rem); align-items: start;
  padding: clamp(1.8rem, 3.5vw, 3.5rem) 0; border-bottom: 1px solid var(--line);
  opacity: .32; transition: opacity .6s var(--ease);
}
.process-step.is-active { opacity: 1; }
.process-num {
  font-family: var(--display); font-weight: 800; font-stretch: 125%; font-size: clamp(2.4rem, 4.4vw, 5.2rem); line-height: .85;
  color: transparent; -webkit-text-stroke: 1.5px var(--fg); transition: color .6s var(--ease);
}
.process-step.is-active .process-num { color: var(--signal); -webkit-text-stroke-color: var(--signal); }
.process-step h3 { font-size: clamp(1.5rem, 2.6vw, 3.1rem); margin-bottom: .8rem; }
.process-step p { max-width: 30em; margin: 0; opacity: .75; line-height: 1.5; }
.clients { padding: clamp(2rem, 4vw, 4rem) 0; border-block: 1px solid var(--line); overflow: hidden; }
.clients-marquee { display: block; }
.clients-track { display: flex; width: max-content; }
.clients-set { display: flex; flex: 0 0 auto; align-items: center; white-space: nowrap; animation: marquee-set 26s linear infinite; }
.clients-set span {
  padding: 0 clamp(1rem, 2.5vw, 3rem);
  font-family: var(--display); font-weight: 800; font-stretch: 125%; font-variation-settings: "wdth" 125;
  font-size: clamp(3rem, 9vw, 10.5rem); line-height: 1; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1.5px var(--fg); transition: color .4s var(--ease);
}
.clients-set span:hover { color: var(--signal); -webkit-text-stroke-color: var(--signal); }
.clients-set i { font-style: normal; font-size: clamp(1.5rem, 3vw, 3.4rem); color: var(--signal); }
@media (max-width: 860px) {
  .about-story, .process { grid-template-columns: 1fr; padding-left: var(--gutter); }
  .process-head { position: static; }
}

/* =========================================================================
   Limitless-signatuur over de cutthecode-onderdelen heen (Concept 03-taal):
   rechte vormen, 8px/4px radius, ■-blokjes, Integral caps en lijnen.
   ========================================================================= */
/* Ticker: ■ als scheiding */
.ticker-set i { width: .45rem; height: .45rem; border-radius: 1px; background: var(--signal); opacity: .8; }

/* Compacte header: woordmerk links, "■ MENU" rechts (geen pil) */
.header-mark { width: auto; height: auto; padding: .55rem .2rem; border-radius: 0; background: none; color: var(--fg); }
.header-mark .header-wordmark { width: clamp(96px, 7.5vw, 128px); height: auto; }
.header-wordmark path { fill: currentColor; }
.menu-pill {
  height: auto; padding: .7rem 0 .7rem .2rem; border-radius: 0; background: none; color: var(--fg); gap: .7rem;
}
.menu-pill-dot { width: .62rem; height: .62rem; border-radius: 1px; background: var(--signal); transition: transform .5s var(--ease); }
.menu-pill:hover .menu-pill-dot { transform: rotate(45deg) scale(1.15); }
.menu-pill-label { position: relative; }
.menu-pill-label::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.35em; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.menu-pill:hover .menu-pill-label::after { transform: scaleX(1); transform-origin: left; }
.menu-open .menu-pill { background: none; color: var(--fg); }
.menu-open .menu-pill .menu-pill-dot { background: var(--signal); transform: rotate(45deg); }
/* Boven beelden (projecthero's) blijven woordmerk en menu leesbaar */
.site-header.is-compact .header-mark, .site-header.is-compact .menu-pill-label { color: var(--fg); }
/* Het menu-vierkantje is altijd Figma-rood (buiten de blend, anders kleurt het cyaan). */
.menu-pill-dot, .menu-open .menu-pill .menu-pill-dot { background: var(--red); }

/* Knoppen: rechthoek met lijn + ■, vul-animatie van onder (zoals "Send message") */
.btn-split {
  position: relative; gap: .75rem; align-items: center; height: 3rem; padding: 0 1.25rem; overflow: hidden;
  border: 1px solid var(--signal); border-radius: 4px; background: var(--signal); color: var(--on-signal);
  font-family: var(--display); font-weight: 800; font-stretch: 125%; font-variation-settings: "wdth" 125;
  font-size: clamp(.68rem, .78vw, .9rem); text-transform: uppercase; letter-spacing: .02em;
  transition: color .45s var(--ease), border-color .45s var(--ease);
}
.btn-split::before { content: ""; position: absolute; inset: 0; background: var(--fg); transform: translateY(101%); transition: transform .55s var(--ease); }
.btn-split:hover::before { transform: none; }
.btn-split:hover { color: var(--bg); border-color: var(--fg); }
.btn-split-icon, .btn-split-label { position: relative; display: block; width: auto; padding: 0; border-radius: 0; background: none !important; color: inherit !important; box-shadow: none !important; transform: none !important; }
.btn-split-icon { width: .55rem; height: .55rem; border-radius: 1px; background: currentColor !important; transition: transform .55s var(--ease) !important; }
.btn-split-icon svg { display: none; }
.btn-split:hover .btn-split-icon { transform: rotate(45deg) !important; }
.btn-split.is-ghost { background: transparent; color: var(--fg); border-color: var(--line); }
.btn-split.is-ghost::before { background: var(--signal); }
.btn-split.is-ghost:hover { color: var(--on-signal); border-color: var(--signal); }
.cta-band .btn-split, .slide-cta-inner .btn-split { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* Ronde pijlknoppen → vierkante lijnknoppen */
.round-btn { border-radius: 4px; background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.round-btn:hover { transform: none; box-shadow: none; }
.round-btn:hover svg { transform: rotate(-45deg); }
.round-btn svg { transition: transform .5s var(--ease); }

/* Sectielabels: "■ services" met lijn i.p.v. tabjes met holle hoeken */
.shape { border-radius: var(--radius); }
.shape-tab {
  position: static; display: flex; width: 100%; align-items: center; gap: .6rem; margin: 0 0 clamp(2rem, 4vw, 4rem); padding: 0 0 1rem;
  border-radius: 0; background: none; border-bottom: 1px solid var(--line);
  font-size: clamp(1rem, 1.25vw, 1.5rem); font-weight: 400;
}
.shape-tab::before { width: .58em; height: .58em; border-radius: 2px; background: currentColor; }
.shape-tab::after, .shape-tab .tab-fillet { display: none; }
.highlights-shape .shape-tab { width: calc(100% - clamp(1.25rem, 3vw, 3.5rem)); }

/* Hero: geen uitsparing, knoppen gewoon rechtsonder in het paneel */
.notch.hero-notch { right: clamp(1rem, 1.67vw, 2rem); bottom: clamp(1rem, 1.67vw, 2rem); padding: 0; background: none; border-radius: 0; }
.notch.hero-notch::before, .notch.hero-notch::after { display: none; }

/* Case-tag: label op het beeld i.p.v. uitgesneden hoek */
.slide figure, .slide-cta-inner { border-radius: var(--radius); }
.slide-tag {
  top: .8rem; left: .8rem; right: auto; display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .7rem; border-radius: 4px; background: rgba(10, 10, 10, .55); color: var(--cream);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-family: var(--display); font-weight: 800; font-stretch: 125%; font-size: .62rem; text-transform: uppercase; letter-spacing: .04em;
}
.slide-tag::before { content: ""; position: static; width: .45rem; height: .45rem; border-radius: 1px; background: var(--sand); }
.slide-tag::after { display: none; }

/* Kaarten en board: ontwerp-radius */
.why-card, .network-board, .nw-chip, .nw-mark { border-radius: var(--radius); }
.nw-chip { border-radius: 4px; text-transform: uppercase; font-size: .75rem; letter-spacing: .04em; }
.nw-bubble { border-radius: var(--radius) var(--radius) var(--radius) 2px; }

/* CTA-band: grote Integral-regel, omlijnd → gevuld */
.cta-band { border-radius: var(--radius) var(--radius) 0 0; margin-inline: var(--gutter); padding-inline: clamp(.5rem, .8vw, .8rem); }
.cta-line {
  padding: 0 0 0 clamp(1rem, 1.6vw, 2rem);
  font-family: var(--display); font-weight: 800; font-stretch: 125%; font-variation-settings: "wdth" 125;
  font-size: clamp(3rem, 8vw, 9.5rem); line-height: 1; text-transform: uppercase; letter-spacing: -.01em;
  color: transparent; -webkit-text-stroke: 1.5px var(--ink); transition: color .5s var(--ease);
}
.cta-line-solid { color: var(--ink); }
.cta-marquee:hover .cta-line { color: var(--ink); }
.cta-square { display: block; width: clamp(1rem, 2vw, 2rem); height: clamp(1rem, 2vw, 2rem); margin: 0 clamp(1.5rem, 3vw, 3.5rem); border-radius: 2px; background: var(--ink); transition: transform .8s var(--ease); }
.cta-marquee:hover .cta-square { transform: rotate(45deg); }
.footer-card { border-radius: var(--radius); }
.footer-mark { background: none; width: auto; height: auto; color: var(--sand); }
.footer-mark svg { width: 2rem; height: 2rem; }
.social { border-radius: 4px; text-transform: uppercase; font-size: .78rem; letter-spacing: .04em; font-weight: 600; }
.back-top { border-radius: 4px; }

/* Knipperende statusvierkantjes blijven Figma-rood. */
:root { --red: #ff0000; }
.status-dot { background: var(--red); }

/* ---------- Works: meer beweging ---------- */
/* Beeld: wipe vanaf de zijkant waar het staat + zoom-in, drift op scroll (--wx), 3D-kanteling bij hover. */
.work-row .work-media {
  clip-path: inset(0 100% 0 0 round var(--radius));
  transform: translate3d(var(--wx, 0), 0, 0) perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) skewY(calc(var(--skew, 0) * 1deg));
  transition: clip-path .95s cubic-bezier(.16, 1, .3, 1), transform .6s var(--ease);
  will-change: transform, clip-path;
}
.work-row:nth-child(even) .work-media { clip-path: inset(0 0 0 100% round var(--radius)); }
.work-row.is-in .work-media { clip-path: inset(0 0 0 0 round var(--radius)); }
.work-row .work-media :is(img, video) {
  transform: translate3d(var(--ix, 0), calc(var(--py, 0px) + var(--iy, 0%)), 0) scale(1.3);
  transition: transform 1.3s var(--ease);
}
.work-row.is-in .work-media :is(img, video) { transform: translate3d(var(--ix, 0), calc(var(--py, 0px) + var(--iy, 0%)), 0) scale(1.1); }
.work-row.is-in:hover .work-media :is(img, video) { transform: translate3d(var(--ix, 0), calc(var(--py, 0px) + var(--iy, 0%)), 0) scale(1.16); transition-duration: .9s; }
/* Info: lijn tekent zich, daarna komen de onderdelen gespreid binnen. */
.work-meta { position: relative; border-top: 0; }
.work-meta::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line);
  transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease) .05s;
}
.work-row:nth-child(even) .work-meta::before { transform-origin: right; }
.work-meta.is-in::before { transform: scaleX(1); }
.work-meta > *:not(h3) { opacity: 0; transform: translateY(1.4rem); transition: opacity .9s var(--ease), transform 1s var(--ease); }
.work-meta.is-in > *:not(h3) { opacity: 1; transform: none; }
.work-meta.is-in > :nth-child(1) { transition-delay: .1s; }
.work-meta.is-in > :nth-child(3) { transition-delay: .25s; }
.work-meta.is-in > :nth-child(4) { transition-delay: .32s; }
.work-meta.is-in > :nth-child(5) { transition-delay: .4s; }
.work-meta.is-in > :nth-child(6) { transition-delay: .5s; }
.work-meta .chips .chip { opacity: 0; transform: translateY(.6rem) scale(.9); transition: opacity .6s var(--ease), transform .7s var(--ease); }
.work-meta.is-in .chips .chip { opacity: 1; transform: none; }
.work-meta.is-in .chips .chip:nth-child(1) { transition-delay: .42s; }
.work-meta.is-in .chips .chip:nth-child(2) { transition-delay: .48s; }
.work-meta.is-in .chips .chip:nth-child(3) { transition-delay: .54s; }
.work-meta h3 .split-word > span { transition-delay: .15s !important; transition-duration: .9s; }
.work-index span:first-child { display: inline-block; transition: transform .6s var(--ease); }
.work-row:hover .work-index span:first-child { transform: translateY(-.15em); }
@media (prefers-reduced-motion: reduce) {
  .work-row .work-media, .work-row:nth-child(even) .work-media { clip-path: none; transform: none; }
  .work-meta > *:not(h3), .work-meta .chips .chip { opacity: 1; transform: none; }
  .work-meta::before { transform: none; }
}
.work-meta > .btn-split { transition: opacity .9s var(--ease), transform 1s var(--ease), color .45s var(--ease), border-color .45s var(--ease); }

/* ---------- Case highlights: subtiele beweging op scroll ---------- */
.hscroll-progress { position: relative; flex: 1; align-self: center; height: 1px; margin: 0 2rem; background: var(--line); overflow: hidden; }
.hscroll-progress i { position: absolute; inset: 0; background: var(--fg); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
[data-hscroll] .slide { transform: translate3d(var(--drift, 0), 0, 0); transition: transform .5s var(--ease); }
[data-hscroll] .slide a {
  transform: translate3d(0, calc(var(--d, 0) * var(--d, 0) * .9rem), 0) rotate(calc(var(--d, 0) * 1.6deg));
  transform-origin: 50% 100%; transition: transform .5s var(--ease);
}
[data-hscroll] .slide figure :is(img, video) { transform: translate3d(calc(var(--d, 0) * -5%), 0, 0) scale(1.12); transition: transform .6s var(--ease); }
[data-hscroll] .slide a:hover figure img { transform: translate3d(calc(var(--d, 0) * -5%), 0, 0) scale(1.18); }
@media (max-width: 760px) { .hscroll-progress { display: none; } }
.project-title .display.is-long { font-size: clamp(2.4rem, 8.6vw, 10.4rem); }

/* Menu: projecten als kleinere lijst onder de hoofdnavigatie */
.menu-sub-label {
  display: flex; align-items: center; gap: .5rem; margin: clamp(1.4rem, 3svh, 2.4rem) 0 .4rem;
  font-size: .85rem; opacity: .55; text-transform: lowercase;
}
.menu-sub-label::before { content: ""; width: .5rem; height: .5rem; border-radius: 1px; background: currentColor; }
.menu-list-projects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
.menu-list-projects .menu-word { font-size: clamp(1.1rem, min(2.2vw, 4svh), 2.4rem); }
.menu-list-projects a { padding: .45rem 0; gap: .9rem; }
.menu-list-projects .menu-index { font-size: .75rem; }
@media (max-width: 760px) { .menu-list-projects { grid-template-columns: 1fr; } }

/* ---------- 404 ---------- */
.not-found { position: relative; display: grid; align-content: center; min-height: 100svh; padding: 8rem var(--gutter) 6rem; overflow: hidden; }
.not-found > div { position: relative; z-index: 1; display: grid; gap: 1.6rem; justify-items: start; }
.not-found h1 { font-size: clamp(2.6rem, 7vw, 8.4rem); }
.not-found p:not(.label) { max-width: 28em; margin: 0; opacity: .7; }
.not-found-code {
  position: absolute; right: -2vw; bottom: -6vw; font-family: var(--display); font-weight: 800; font-stretch: 125%;
  font-size: 38vw; line-height: .8; color: transparent; -webkit-text-stroke: 1.5px var(--line); pointer-events: none;
}

/* Logo-hover in de header: de letters golven na elkaar een fractie omhoog; de T-balk tilt iets verder. */
.header-wordmark { overflow: visible; }
.header-wordmark path { transform-box: fill-box; transform-origin: 50% 100%; }
.header-mark:hover .header-wordmark path, .header-mark:focus-visible .header-wordmark path {
  animation: logo-wave .7s cubic-bezier(.33, 1, .68, 1) calc(var(--i) * 38ms) both;
}
.header-mark:hover .header-wordmark .logo-t-bar, .header-mark:focus-visible .header-wordmark .logo-t-bar {
  animation-name: logo-t-lift; animation-duration: .9s;
}
@keyframes logo-wave { 0%, 100% { transform: none; } 40% { transform: translateY(-16%); } }
@keyframes logo-t-lift { 0%, 100% { transform: none; } 45% { transform: translateY(-55%); } 70% { transform: translateY(-38%); } }
@media (prefers-reduced-motion: reduce) { .header-mark:hover .header-wordmark path { animation: none; } }

/* ---------- Contact (Figma "Contact v1") ---------- */
.contact-page { padding: 5.7rem clamp(.8rem, 1.35vw, 1.6rem) clamp(.8rem, 1.35vw, 1.6rem); }
.contact-stage {
  position: relative; height: calc(100svh - 5.7rem - clamp(.8rem, 1.35vw, 1.6rem)); min-height: 520px;
  overflow: hidden; border-radius: 10px; background: var(--panel);
}
.contact-details {
  position: absolute; z-index: 2; left: clamp(1rem, .75vw, 1rem); bottom: clamp(1.2rem, 2vw, 2.4rem);
  display: grid; gap: clamp(1.4rem, 2.1vw, 2.5rem); font-style: normal; text-transform: uppercase;
  font-size: clamp(.78rem, .83vw, 1rem); line-height: 1.9;
}
.contact-details p { margin: 0; }
.contact-details a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease); }
.contact-details a:hover { background-size: 100% 1px; }
/* Woordblok rechtsonder, loopt (zoals in het ontwerp) onder het paneel uit. */
.contact-hello {
  position: absolute; z-index: 1; left: 27%; right: clamp(1rem, 2.2vw, 2.6rem); bottom: -.1em;
  font-size: clamp(3rem, 12.18vw, 15rem); line-height: .9; letter-spacing: -.01em;
}
.contact-hello a { display: grid; }
.hello-line { display: block; width: max-content; white-space: nowrap; will-change: transform; transform: translate3d(var(--mx, 0), var(--my, 0), 0); transition: transform 1.2s var(--ease); }
.hello-line-end { justify-self: end; }
/* Het @ (PP Mori/Inter) heeft een staart onder de basislijn: kleiner en hoger zodat het niet in LIMITLESS hangt. */
.hello-at { display: inline-block; font-family: var(--sans); font-weight: 600; font-stretch: 100%; font-variation-settings: normal; font-size: .78em; vertical-align: .1em; }
.hello-at .hello-char { transform-origin: 50% 55%; }
.hello-char { display: inline-block; transform: translateY(115%); transition: transform 1.1s var(--ease), color .3s; }
.contact-stage.is-in .hello-char { transform: none; }
.hello-at .hello-char:hover { transform: rotate(360deg) !important; transition-duration: .9s; }
.page-contact .site-footer { display: none; }
@media (max-width: 760px) {
  .contact-page { padding-top: 4.4rem; }
  .contact-stage { height: calc(100svh - 5.2rem); }
  .contact-details { top: 1.2rem; bottom: auto; }
  .contact-hello { left: 0; font-size: 17vw; }
}
@media (prefers-reduced-motion: reduce) { .hello-char { transform: none; } }

/* ---------- Contact: extra pit ---------- */
.contact-stage { isolation: isolate; }
.contact-stage .hero-blob { z-index: -1; }
.contact-intro {
  position: absolute; z-index: 2; left: clamp(1rem, 2.6vw, 3rem); top: clamp(1.4rem, 3vw, 3.4rem);
  display: grid; gap: 1.1rem; justify-items: start; max-width: 34rem;
}
.contact-intro .display { font-size: clamp(1.8rem, 3.2vw, 3.8rem); line-height: .95; }
.contact-intro-sub { margin: 0; opacity: .6; font-size: .95rem; }
.contact-quick { display: flex; flex-wrap: wrap; gap: .45rem; margin: .4rem 0 0; padding: 0; list-style: none; }
.quick-chip {
  position: relative; display: inline-flex; align-items: center; min-height: 2.6rem; padding: 0 1.1rem; overflow: hidden;
  border: 1px solid var(--line); border-radius: 4px; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
.quick-chip::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--signal); transform: translateY(101%); transition: transform .45s var(--ease); }
.quick-chip:hover { color: var(--on-signal); border-color: var(--signal); }
.quick-chip:hover::before { transform: none; }
.copy-email { display: inline-flex; align-items: center; gap: .6rem; margin-top: .2rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; opacity: .7; transition: opacity .3s; }
.copy-email:hover { opacity: 1; }
.copy-email-icon { width: .8rem; height: .8rem; border: 1.5px solid currentColor; border-radius: 2px; box-shadow: 3px -3px 0 -1.5px var(--panel), 3px -3px 0 0 currentColor; }
.copy-email.is-copied .copy-email-icon { border-color: var(--red); background: var(--red); box-shadow: none; }
.contact-meta {
  position: absolute; z-index: 2; right: clamp(1rem, 2.6vw, 3rem); top: clamp(1.4rem, 3vw, 3.4rem);
  display: grid; gap: .5rem; justify-items: end; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em;
}
.contact-meta p { margin: 0; }
.contact-meta [data-clock] { opacity: .55; font-variant-numeric: tabular-nums; }
/* Letters reageren op de nabijheid van de cursor (--lift wordt per letter gezet). */
.contact-stage.is-in .hello-char { transform: translateY(calc(var(--lift, 0) * -.16em)); }
.hello-char { color: color-mix(in srgb, var(--fg), var(--signal) calc(var(--lift, 0) * 100%)); }
.contact-stage.is-in .hello-char.is-settled { transition: transform .35s var(--ease), color .35s var(--ease); transition-delay: 0s !important; }
@media (max-width: 760px) {
  .contact-meta { display: none; }
  .contact-intro { top: 1.2rem; }
  .contact-intro .display { font-size: 1.9rem; }
  .contact-intro-sub, .copy-email { display: none; }
  .contact-details { top: auto; bottom: 34vw; }
}
@media (max-height: 760px) and (min-width: 761px) { .contact-intro-sub { display: none; } }

/* ---------- Beschikbaarheid: schakelaar die "aan" staat ---------- */
.avail { display: inline-flex; align-items: center; gap: .85rem; justify-self: start; }
.avail-switch {
  position: relative; display: inline-block; width: 2.15em; height: 1.2em; flex: 0 0 auto;
  border: 1.5px solid currentColor; border-radius: 999px;
}
.avail-switch i {
  position: absolute; top: 50%; right: .14em; width: .78em; height: .78em; margin-top: -.39em; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 0 0 rgba(255, 0, 0, .55);
  animation: avail-pulse 2s ease-out infinite;
}
.avail:hover .avail-switch i { animation: avail-nope .7s cubic-bezier(.34, 1.56, .64, 1), avail-pulse 2s ease-out .7s infinite; }
@keyframes avail-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 0, 0, .55); } 70%, 100% { box-shadow: 0 0 0 .55em rgba(255, 0, 0, 0); } }
@keyframes avail-nope { 0% { transform: none; } 35% { transform: translateX(-.95em); background: var(--fg-soft); } 60% { transform: translateX(-.95em); background: var(--fg-soft); } 100% { transform: none; } }
.ticker-mark { width: .55rem; height: .55rem; border-radius: 2px; background: var(--red); animation: blink 1.6s steps(1) infinite; }
.contact-meta .avail { justify-self: end; font-size: .82rem; }
@media (prefers-reduced-motion: reduce) { .avail-switch i { animation: none; } }
@media (max-width: 760px) { .avail span:last-child { display: none; } }

/* Vier diensten: 2×2, pas op zeer brede schermen 4 naast elkaar; mobiel 1 kolom. */
.service-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1rem; }
.service-card:nth-child(2) { border-right: 0; }
.service-card:nth-child(3) { padding-left: 0; }
@media (min-width: 1601px) {
  .service-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .service-card:nth-child(2) { border-right: 1px solid var(--line); }
  .service-card:nth-child(3) { padding-left: clamp(1rem, 2vw, 2.2rem); }
  .service-card .display { font-size: clamp(1.4rem, 1.7vw, 2.4rem); }
}
@media (max-width: 900px) {
  .service-cards { grid-template-columns: 1fr; row-gap: 0; }
  .service-card:nth-child(3) { padding-left: 0; }
}

.cursor.is-small { width: 6px; height: 6px; margin: -3px 0 0 -3px; }

/* ---------- Themawissel ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 9998; }
/* Tijdens de wissel geen losse kleur-transities: de cirkel doet het werk. */
.theme-switching *, .theme-switching *::before, .theme-switching *::after, .theme-switching body { transition: none !important; }
.theme-fx { position: fixed; z-index: 9999; inset: 0; pointer-events: none; overflow: hidden; view-transition-name: theme-fx; }
/* Ring en woord als eigen laag bóven de onthullende cirkel. */
::view-transition-group(theme-fx) { z-index: 10000; animation: none; }
::view-transition-old(theme-fx) { display: none; }
::view-transition-new(theme-fx) { animation: none; }
.theme-ring {
  position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; border-radius: 50%;
  transform: translate(-50%, -50%); border: 2px solid var(--red);
  box-shadow: 0 0 0 1px rgba(255, 0, 0, .25), 0 0 40px rgba(255, 0, 0, .35);
}
.theme-word {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; opacity: 0;
  font-family: var(--display); font-weight: 800; font-stretch: 125%; font-variation-settings: "wdth" 125;
  font-size: clamp(2.6rem, 9vw, 11rem); line-height: 1; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 2px var(--red);
}
.theme-fill { background: #0a0a0a; }
.theme-fill[data-theme="light"] { background: #f8efe5; }

/* ---------- Hero-meta: dunne typografie, labels en coördinaten ---------- */
.hero-meta { align-items: start; }
.meta-col { display: grid; gap: .9rem; align-content: start; }
.hero-meta > div:first-child { display: grid; gap: .9rem; align-content: start; }
.meta-label {
  margin: 0; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; opacity: .45; font-variant-numeric: tabular-nums;
}
.meta-intro { font-weight: 300; font-size: clamp(1rem, 1.15vw, 1.35rem); line-height: 1.35; max-width: 21em !important; }
.meta-big {
  font-family: var(--display); font-weight: 200; font-stretch: 125%; font-variation-settings: "wdth" 125;
  font-size: clamp(1.05rem, 1.55vw, 1.85rem); line-height: 1.12; letter-spacing: .01em; text-transform: uppercase;
}
.meta-work { display: grid; gap: .1rem; }
.meta-work a { display: inline-flex; align-items: flex-start; gap: .35em; transition: font-weight .45s var(--ease), letter-spacing .45s var(--ease); }
.meta-work a::after { display: none; }
.meta-work a:hover { font-weight: 800; letter-spacing: -.005em; }
.meta-work sup { font-family: var(--sans); font-weight: 400; font-size: .42em; letter-spacing: .05em; opacity: .45; margin-top: .25em; }
.meta-services { display: grid; gap: .3rem; font-weight: 300; font-size: clamp(.95rem, 1.05vw, 1.2rem); }
.meta-services li { display: flex; gap: .7rem; align-items: baseline; }
.meta-services li::before { content: ""; width: .9rem; height: 1px; background: currentColor; opacity: .35; transform: translateY(-.3em); transition: width .5s var(--ease), opacity .5s; }
.meta-services li:hover::before { width: 1.8rem; opacity: 1; }
.meta-coords { position: relative; display: grid; gap: .55rem; justify-items: start; padding-left: 2.6rem; }
.meta-coords::after { display: none; }
.meta-coords .meta-big { display: grid; font-variant-numeric: tabular-nums; }
.coords-place { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; opacity: .55; }
.coords-cross { position: absolute; left: 0; top: .2rem; width: 1.8rem; height: 1.8rem; border: 1px solid var(--line); border-radius: 50%; }
.coords-cross::before, .coords-cross::after { content: ""; position: absolute; background: var(--fg); opacity: .6; }
.coords-cross::before { left: 50%; top: -.35rem; bottom: -.35rem; width: 1px; }
.coords-cross::after { top: 50%; left: -.35rem; right: -.35rem; height: 1px; }
.coords-cross i { position: absolute; left: 50%; top: 50%; width: .42rem; height: .42rem; margin: -.21rem; border-radius: 1px; background: var(--red); animation: blink 1.6s steps(1) infinite; }
.coords-cross { animation: cross-spin 14s linear infinite; }
.meta-coords:hover .coords-cross { animation-duration: 2.5s; border-color: var(--fg); }
.meta-coords:hover .meta-big { font-weight: 500; }
.meta-coords .meta-big { transition: font-weight .45s var(--ease); }
@keyframes cross-spin { to { transform: rotate(360deg); } }
@media (max-width: 520px) { .meta-coords { padding-left: 2.3rem; } }
@media (prefers-reduced-motion: reduce) { .coords-cross { animation: none; } }

/* Case-video's: schermopnames van de echte websites */
.case-video { display: block; object-fit: cover; object-position: top center; background: #111; }
.slide .case-video { width: 100%; height: 100%; }

/* Footer-merk: de L "typt" zichzelf uit tot LIMITLESS en weer terug, in een lus. */
.footer-mark { display: inline-flex; align-items: flex-end; gap: .5rem; justify-self: start; }
.footer-mark .footer-wordmark { width: auto; height: clamp(1.7rem, 2.3vw, 2.5rem); overflow: hidden; }
.footer-wordmark path { fill: var(--cream); transform-box: fill-box; }
.footer-wordmark path:not(:first-child) { animation: footer-type 7s cubic-bezier(.76, 0, .24, 1) infinite both; animation-delay: calc(var(--i) * 90ms); }
.footer-wordmark path.logo-t-bar { animation-name: footer-type-bar; }
.footer-mark { --h: clamp(1.7rem, 2.3vw, 2.5rem); }
.footer-caret { width: .55rem; height: .55rem; margin-bottom: .2rem; border-radius: 1px; background: var(--red);
  animation: footer-caret 7s cubic-bezier(.76, 0, .24, 1) infinite both, blink 1s steps(1) infinite; }
/* Cursor in dezelfde 7s-lus: schuift mee met de letters en staat naast de L als die alleen is. */
@keyframes footer-caret {
  0%, 5% { transform: translateX(calc(var(--h) * -6.55)); }
  17%, 62% { transform: translateX(0); }
  73%, 100% { transform: translateX(calc(var(--h) * -6.55)); }
}
@keyframes footer-type {
  0%, 6% { transform: translateY(125%); }
  16%, 62% { transform: translateY(0); }
  72%, 100% { transform: translateY(125%); }
}
@keyframes footer-type-bar {
  0%, 6% { transform: translateY(560%); }
  16%, 62% { transform: translateY(0); }
  72%, 100% { transform: translateY(560%); }
}
@media (prefers-reduced-motion: reduce) { .footer-wordmark path:not(:first-child) { animation: none; } }

/* Showreels: volledig in beeld (geen parallax-crop), lichte inzoom bij het onthullen. */
.work-row .work-media video { inset: 0; height: 100%; transform: scale(1.08); transition: transform 1.3s var(--ease); }
.work-row.is-in .work-media video { transform: scale(1); }
.work-row.is-in:hover .work-media video { transform: scale(1.03); transition-duration: .9s; }
.work-media:has(video)::after { display: none; }
[data-hscroll] .slide figure video { transform: none; }
.slide figure:has(video) .slide-tag { display: none; }

/* ---------- Recent works: merkkleur per project ---------- */
.work-row { --brand: var(--fg); --brand-ink: var(--bg); }
.work-meta::before { background: var(--brand); height: 2px; }
.work-index span:first-child { color: var(--brand); font-weight: 600; }
.work-meta h3 a { background-image: linear-gradient(var(--brand), var(--brand)); }
.work-row:hover .work-meta .chip { border-color: var(--brand); }
.work-meta .btn-split.is-ghost { border-color: color-mix(in srgb, var(--brand) 55%, transparent); }
.work-meta .btn-split.is-ghost .btn-split-icon { background: var(--brand) !important; }
.work-meta .btn-split.is-ghost::before { background: var(--brand); }
.work-meta .btn-split.is-ghost:hover { color: var(--brand-ink); border-color: var(--brand); }
.work-meta .btn-split.is-ghost:hover .btn-split-icon { background: var(--brand-ink) !important; }
.work-row .work-media { box-shadow: 0 0 0 0 transparent; transition: clip-path .95s cubic-bezier(.16, 1, .3, 1), transform .6s var(--ease), box-shadow .6s var(--ease); }
.work-row:hover .work-media { box-shadow: 0 30px 80px -40px var(--brand); }
/* Titel kleurt mee bij hover — alleen in dark (fel geel op crème is onleesbaar). */
:root[data-theme="dark"] .work-row:hover .work-meta h3 a { color: var(--brand); }
.work-meta h3 a { transition: background-size .6s var(--ease), color .4s var(--ease); }
/* Geen onderstreping onder de projecttitel; de kleurwissel is genoeg. */
.work-meta h3 a, .work-row:hover .work-meta h3 a { background: none; }

/* ---------- Up next (stabiel: geen skew, geen background-clip-tekst) ---------- */
.up-next {
  position: relative; display: grid; place-items: center; margin: 0 var(--gutter);
  min-height: clamp(20rem, 46vw, 56rem); overflow: hidden; border-radius: var(--radius); isolation: isolate;
  background: #111; contain: paint;
}
.up-next img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.06); transition: transform 1.6s var(--ease); }
.up-next::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(10, 10, 10, .6); transition: background-color .8s var(--ease); }
.up-next:hover img { transform: scale(1); }
.up-next:hover::after { background-color: rgba(10, 10, 10, .72); }
.up-next .display { margin: 0; display: grid; justify-items: center; gap: .25em; text-align: center; color: var(--cream); }
.up-next .display span:first-child { font-family: var(--sans); font-weight: 500; font-stretch: 100%; font-variation-settings: normal; font-size: clamp(.8rem, 1vw, 1.1rem); letter-spacing: .16em; display: inline-flex; align-items: center; gap: .6em; }
.up-next .display span:first-child::before { content: ""; width: .6em; height: .6em; border-radius: 1px; background: var(--red); }
.up-next .display span:last-child { font-size: clamp(2.6rem, 8vw, 9.5rem); line-height: .9; transition: letter-spacing .8s var(--ease); }
.up-next:hover .display span:last-child { letter-spacing: .02em; }

/* ---------- Taalwissel (NL / EN) ---------- */
.header-tools { display: flex; align-items: center; gap: 1.6rem; justify-self: end; }
.lang-toggle { display: flex; gap: .7rem; }
.lang-toggle a { position: relative; opacity: .4; transition: opacity .3s var(--ease); }
.lang-toggle a:hover, .lang-toggle a[aria-current="true"] { opacity: 1; }
.lang-toggle a[aria-current="true"]::before {
  content: ""; position: absolute; left: 50%; top: -.55em; width: .32em; height: .32em; margin-left: -.16em; border-radius: 1px; background: var(--red);
}
.menu-aside .header-tools { justify-self: start; font-family: var(--display); font-weight: 800; font-stretch: 125%; }

/* ---------- Servicekaarten: rijkere scroll-reveal ---------- */
.service-cards { counter-reset: svc; }
.service-card { counter-increment: svc; border-right-color: transparent !important; overflow: visible; }
/* Scheidingslijn groeit van boven naar beneden. */
.service-card::after {
  content: ""; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: var(--line);
  transform: scaleY(0); transform-origin: top; transition: transform 1.2s var(--ease-in-out);
}
.service-card:last-child::after { display: none; }
.service-card.is-in::after { transform: scaleY(1); }
/* Groot omlijnd nummer dat zich vult bij hover. */
.service-card::before {
  content: "0" counter(svc); position: absolute; right: clamp(1rem, 2vw, 2.2rem); top: clamp(.6rem, 1.4vw, 1.4rem);
  font-family: var(--display); font-weight: 800; font-stretch: 125%; font-size: clamp(2.6rem, 4.2vw, 5rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--line); opacity: 0; transform: translateY(40%);
  transition: opacity .8s var(--ease), transform 1s var(--ease), color .5s var(--ease), -webkit-text-stroke-color .5s;
}
.service-card:last-child::before { right: 0; }
.service-card.is-in::before { opacity: 1; transform: none; transition-delay: .35s; }
.service-card:hover::before { color: var(--signal); -webkit-text-stroke-color: var(--signal); }
.service-card .display { clip-path: inset(0 0 100% 0); transform: translateY(40%); transition: clip-path 1s var(--ease), transform 1s var(--ease); }
.service-card p { opacity: 0; transform: translateY(1.2rem); transition: opacity .9s var(--ease), transform 1s var(--ease); }
.service-card .chip { opacity: 0; transform: translateY(.8rem) scale(.85); transition: opacity .6s var(--ease), transform .7s cubic-bezier(.34, 1.56, .64, 1); }
.service-card .round-btn { opacity: 0; transform: rotate(-120deg) scale(.4); transition: opacity .6s var(--ease), transform .9s cubic-bezier(.34, 1.56, .64, 1), background-color .35s, color .35s; }
.service-card.is-in .display { clip-path: inset(0 0 -10% 0); transform: none; }
.service-card.is-in p { opacity: .65; transform: none; transition-delay: .2s; }
.service-card.is-in .chip { opacity: 1; transform: none; }
.service-card.is-in .chip:nth-child(1) { transition-delay: .35s; }
.service-card.is-in .chip:nth-child(2) { transition-delay: .42s; }
.service-card.is-in .chip:nth-child(3) { transition-delay: .49s; }
.service-card.is-in .round-btn { opacity: 1; transform: none; transition-delay: .5s; }
.service-card:nth-child(2).is-in .display, .service-card:nth-child(2).is-in::after { transition-delay: .12s; }
.service-card:nth-child(3).is-in .display, .service-card:nth-child(3).is-in::after { transition-delay: .24s; }
.service-card:nth-child(4).is-in .display, .service-card:nth-child(4).is-in::after { transition-delay: .36s; }
/* Spotlight dat de cursor volgt (--sx/--sy via script.js). */
[data-spot] { --sx: 50%; --sy: 50%; }
.service-card { background: radial-gradient(28rem circle at var(--sx) var(--sy), color-mix(in srgb, var(--fg) 6%, transparent), transparent 60%) no-repeat; background-size: 0 0; transition: background-size 0s .4s; }
.service-card:hover { background-size: 100% 100%; transition: none; }

/* ---------- Why Limitless: kaarten vliegen in en drijven met eigen tempo ---------- */
.why-grid .why-card {
  --off: 0px; position: relative; overflow: hidden;
  translate: 0 calc(var(--py, 0px) + var(--off));
  opacity: 0; transform: translate3d(var(--fx, -3rem), 4.5rem, 0) rotate(var(--fr, -5deg)) scale(.92);
  transition: opacity .9s var(--ease), transform 1.2s cubic-bezier(.22, 1.2, .36, 1), background-color .4s var(--ease);
}
.why-card:nth-child(odd) { --off: 2.5rem; }
.why-card:nth-child(2) { --fx: 3rem; --fr: 5deg; }
.why-card:nth-child(3) { --fx: -2rem; --fr: 4deg; }
.why-card:nth-child(4) { --fx: 2.5rem; --fr: -4deg; }
.why-grid .why-card.is-in { opacity: 1; transform: none; }
.why-card:nth-child(2).is-in { transition-delay: .1s; }
.why-card:nth-child(3).is-in { transition-delay: .2s; }
.why-card:nth-child(4).is-in { transition-delay: .3s; }
.why-card h3, .why-card p { position: relative; z-index: 1; }
.why-card h3 { transform: translateY(120%); transition: transform 1s var(--ease) .35s; }
.why-card.is-in h3 { transform: none; }
.why-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(22rem circle at var(--sx) var(--sy), color-mix(in srgb, var(--fg) 9%, transparent), transparent 65%);
  opacity: 0; transition: opacity .4s var(--ease);
}
.why-card:hover::before { opacity: 1; }
/* Rode hoek die zich tekent bij in beeld. */
.why-card::after {
  content: ""; position: absolute; left: 0; top: 0; width: 2.4rem; height: 2.4rem;
  border-left: 2px solid var(--red); border-top: 2px solid var(--red); border-top-left-radius: var(--radius);
  clip-path: inset(0 100% 100% 0); transition: clip-path .8s var(--ease) .6s;
}
.why-card.is-in::after { clip-path: inset(0 0 0 0); }
@media (max-width: 860px) { .why-card, .why-card:nth-child(odd) { --off: 0px; translate: none; } }
@media (prefers-reduced-motion: reduce) {
  .service-card .display, .service-card p, .service-card .chip, .service-card .round-btn, .service-card::before, .why-card, .why-card h3 { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .service-card::after { transform: none; }
}

.why-grid { row-gap: clamp(1rem, 1.6vw, 1.6rem); }

/* Nooit horizontaal scrollen door elementen die (nog) buiten beeld animeren. */
body { overflow-x: clip; }
.why { overflow-x: clip; }

/* Taalwissel-overlay (hergebruikt .theme-ring/.theme-word van de themawissel) */
.lang-fx .lang-fill { position: absolute; inset: 0; background: var(--fg); clip-path: circle(0px at var(--x) var(--y)); }
.lang-fx .theme-word { color: var(--bg); -webkit-text-stroke: 0; }

/* ---------- Logo-lockup (richting D) ---------- */
.lockup-line {
  display: flex; align-items: center; gap: .9em; margin-top: 1.1em; padding-top: 1em;
  border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  font-size: clamp(.62rem, .8vw, .85rem); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
}
.lockup-line i { flex: 0 0 auto; width: .75em; height: .75em; border-radius: 1px; background: var(--red); }
.lockup-line b { flex: 1 1 auto; min-width: 1.5em; height: 1px; background: color-mix(in srgb, currentColor 22%, transparent); }
.lockup-coords { opacity: .65; font-variant-numeric: tabular-nums; }
.footer-lockup { color: var(--cream); }
.menu-lockup { align-self: stretch; width: 100%; max-width: 30rem; }
@media (max-width: 520px) { .lockup-coords { display: none; } }

/* Header-merk richting D: vizier-icoon + woordmerk + "■ Digital studio" */
.header-mark { display: inline-flex; align-items: center; gap: .7rem; }
.brand-icon { width: 2.3rem; height: 2.3rem; flex: 0 0 auto; overflow: visible; }
.brand-icon-cross { transform-origin: 32px 32px; animation: cross-spin 16s linear infinite; }
.header-mark:hover .brand-icon-cross { animation-duration: 3s; }
.brand-icon-dot { animation: blink 1.6s steps(1) infinite; }
.header-lockup { display: grid; gap: .32rem; }
.header-desc { display: flex; align-items: center; gap: .45em; font-family: var(--sans); font-weight: 500; font-stretch: 100%; font-variation-settings: normal; font-size: .55rem; letter-spacing: .22em; text-transform: uppercase; opacity: .6; }
.header-desc i { width: .55em; height: .55em; border-radius: 1px; background: var(--red); }
@media (max-width: 520px) { .header-desc { display: none; } .brand-icon { width: 2rem; height: 2rem; } }
@media (prefers-reduced-motion: reduce) { .brand-icon-cross, .brand-icon-dot { animation: none; } }

/* Krantenpagina die bij aankomst omslaat (zie cases/news.css voor de inhoudsstijl) */
.paper-leave {
  position: fixed; inset: 0; z-index: 9000; pointer-events: none; display: grid; grid-template-rows: 1fr 1fr;
  background: var(--fg); color: var(--bg); transform-origin: 0 50%; will-change: transform; backface-visibility: hidden;
  box-shadow: none;
}
.paper-leave .paper-top, .paper-leave .paper-bottom { background: var(--fg); overflow: hidden; padding: clamp(1rem, 3vw, 3rem); }
.paper-leave .paper-bottom { border-top: 1px solid color-mix(in srgb, var(--bg) 20%, transparent); }
.paper-leave .paper-mast { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-top: 3px double currentColor; border-bottom: 1px solid currentColor; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; }
.paper-leave .paper-headline { margin: clamp(.8rem, 2vw, 2rem) 0 0; font-family: var(--display); font-weight: 800; font-stretch: 62%; font-variation-settings: "wdth" 62; font-size: clamp(1.6rem, 5.6vw, 6.4rem); line-height: .9; text-transform: uppercase; }
.paper-leave .paper-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.8rem, 2vw, 2rem); }
.paper-leave .paper-cols div { display: grid; gap: .55rem; border-left: 1px solid color-mix(in srgb, currentColor 25%, transparent); padding-left: .8rem; }
.paper-leave .paper-cols div:first-child { border-left: 0; padding-left: 0; }
.paper-leave .paper-cols i { display: block; height: .45rem; border-radius: 1px; background: color-mix(in srgb, currentColor 22%, transparent); }
html.is-paper-in::after { content: ""; position: fixed; inset: 0; z-index: 8999; background: var(--fg); }

.paper-cover { z-index: 9001; box-shadow: 0 -30px 80px -30px rgba(0, 0, 0, .5); }
.paper-leave .paper-nameplate {
  margin: clamp(1rem, 3vw, 3rem) 0 0; text-align: center; font-family: var(--display); font-weight: 800; font-stretch: 125%;
  font-variation-settings: "wdth" 125; font-size: clamp(2.2rem, 7vw, 8.5rem); line-height: .9; text-transform: uppercase;
  padding-bottom: clamp(.6rem, 1.4vw, 1.2rem); border-bottom: 3px double currentColor;
}

/* ---------- Pagina-overgangen per bestemming ---------- */
html.is-cover-in::after { content: ""; position: fixed; inset: 0; z-index: 8999; background: var(--cover-bg, var(--fg)); }
.page-cover { position: fixed; inset: 0; z-index: 9001; pointer-events: none; overflow: hidden; color: #f8efe5; will-change: transform, clip-path, opacity; display: grid; place-items: center; }
.page-cover .cv-center { display: grid; justify-items: center; gap: 1.4rem; text-align: center; padding: var(--gutter); }
.page-cover .cv-title { margin: 0; font-family: var(--display); font-weight: 800; font-stretch: 125%; font-variation-settings: "wdth" 125; text-transform: uppercase; line-height: .9; font-size: clamp(2.4rem, 8vw, 9.5rem); }
.page-cover .cv-sub { margin: 0; font-size: clamp(.7rem, .9vw, .95rem); letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
/* Home */
.cv-home .cv-wordmark { width: min(70vw, 980px); height: auto; }
.cv-home .cv-wordmark path { fill: #f8efe5; }
.cv-home .lockup-line { width: min(70vw, 980px); font-size: clamp(.6rem, .9vw, .9rem); }
/* Over ons */
.cv-ink { color: #0a0a0a; }
.cv-about .cv-icon { width: clamp(4rem, 8vw, 7rem); height: auto; color: #0a0a0a; }
.cv-about .cv-title { font-size: clamp(2rem, 6vw, 7rem); }
/* Nieuws (krant) */
.cv-news { color: #0a0a0a; place-items: stretch; }
.cv-paper { padding: clamp(1rem, 3vw, 3rem); display: grid; align-content: start; gap: clamp(1rem, 2vw, 2rem); }
.cv-paper .paper-mast { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-top: 3px double currentColor; border-bottom: 1px solid currentColor; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; }
.cv-paper .paper-nameplate { margin: 0; text-align: center; font-family: var(--display); font-weight: 800; font-stretch: 125%; font-variation-settings: "wdth" 125; font-size: clamp(2.2rem, 7vw, 8.5rem); line-height: .9; text-transform: uppercase; padding-bottom: clamp(.6rem, 1.4vw, 1.2rem); border-bottom: 3px double currentColor; }
.cv-paper .paper-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.8rem, 2vw, 2rem); }
.cv-paper .paper-cols div { display: grid; gap: .55rem; border-left: 1px solid rgba(10,10,10,.25); padding-left: .8rem; }
.cv-paper .paper-cols div:first-child { border-left: 0; padding-left: 0; }
.cv-paper .paper-cols i { display: block; height: .45rem; border-radius: 1px; background: rgba(10,10,10,.2); }
/* Contact */
.cv-hello { display: grid; justify-items: end; padding: var(--gutter); font-family: var(--display); font-weight: 800; font-stretch: 125%; font-variation-settings: "wdth" 125; text-transform: uppercase; line-height: .86; font-size: clamp(2.6rem, 11vw, 13rem); }
.cv-hello b { font-family: var(--sans); font-weight: 600; font-size: .8em; color: #ff0000; }
.cv-contact { place-items: end; }
/* Innomads */
.cv-innomads .cv-title { color: #eeff1d; text-shadow: 0 0 60px rgba(238,255,29,.45); }
.cv-innomads::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(238,255,29,.18), transparent 55%); }
/* Uebler */
.cv-uebler { color: #12120d; }
.cv-uebler::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(18,18,13,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(18,18,13,.07) 1px, transparent 1px); background-size: 40px 40px; }
.cv-uebler .cv-center { position: relative; }
.cv-dim { width: min(60vw, 820px); height: 1px; background: #e72119; position: relative; }
.cv-dim::before, .cv-dim::after { content: ""; position: absolute; top: -8px; width: 1px; height: 17px; background: #e72119; }
.cv-dim::before { left: 0; } .cv-dim::after { right: 0; }
/* Plexat */
.cv-plexat { color: #c90d19; }
.cv-plexat .cv-center { border-top: 3px double #c90d19; border-bottom: 3px double #c90d19; padding: 2rem 3rem; }
.cv-plexat .cv-title { font-stretch: 62%; font-variation-settings: "wdth" 62, "wght" 900; font-size: clamp(3rem, 12vw, 14rem); }
.cv-plexat .cv-sub { color: #10100f; }
/* JFi */
.cv-jfi .cv-center { position: relative; }
.cv-jfi .cv-sub { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.cv-stamp { position: absolute; right: -2rem; bottom: -2.4rem; padding: .5rem 1rem; border: 3px solid #ff3b3b; color: #ff3b3b; font-family: var(--display); font-weight: 800; font-stretch: 125%; letter-spacing: .1em; text-transform: uppercase; transform: rotate(-10deg); }
/* Oude Elferink */
.cv-oude-elferink::before { content: ""; position: absolute; inset: 0; background: url("/assets/projects/elferink/stone-texture-granite.webp") center / cover; opacity: .25; }
.cv-oude-elferink::after { content: ""; position: absolute; left: -10%; right: -10%; top: 50%; height: 3px; background: #56af31; transform: rotate(-24deg); box-shadow: 0 0 24px rgba(86,175,49,.7); }
.cv-oude-elferink .cv-center { position: relative; z-index: 1; }
/* Subtielere tekst op de pagina-overgangen */
.page-cover .cv-title { font-size: clamp(1.4rem, 3.4vw, 3.8rem); opacity: .9; }
.cv-plexat .cv-title { font-size: clamp(1.8rem, 5vw, 5.6rem); }
.cv-about .cv-title { font-size: clamp(1.2rem, 2.6vw, 3rem); }
.cv-about .cv-icon { width: clamp(2.6rem, 4vw, 3.6rem); }
.cv-home .cv-wordmark, .cv-home .lockup-line { width: min(38vw, 520px); }
.cv-hello { font-size: clamp(1.6rem, 5vw, 5.6rem); opacity: .9; }
.cv-paper .paper-nameplate { font-size: clamp(1.6rem, 4.2vw, 5rem); }
.page-cover .cv-sub { font-size: .66rem; opacity: .55; }
.cv-dim { width: min(30vw, 420px); }
.cv-stamp { font-size: .7rem; right: -1.4rem; bottom: -1.8rem; }
.cv-innomads .cv-title { text-shadow: 0 0 40px rgba(238,255,29,.3); }
.page-cover .cv-center, .page-cover .cv-hello, .page-cover .cv-paper { animation: cv-text .7s cubic-bezier(.22, 1, .36, 1) .25s both; }
@keyframes cv-text { from { opacity: 0; transform: translateY(.8rem); } }
.page-cover.is-arriving .cv-center, .page-cover.is-arriving .cv-hello, .page-cover.is-arriving .cv-paper { animation: none; }