/* ===== Studio visual system ===== */
:root {
  --bg: #f5f5f4;
  --bg-soft: #ececeb;
  --bg-deep: #e6e6e4;
  --text: #2d2d2d;
  --text-muted: rgba(45, 45, 45, 0.58);
  --border: rgba(45, 45, 45, 0.12);
  --accent: #e36a1f;
  --loader-bg: #2d2d2d;
  --loader-text: #ffffff;
  --loader-muted: rgba(255, 255, 255, 0.45);
  --font: 'Manrope', system-ui, sans-serif;
  --font-display: 'Manrope', system-ui, sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --pad: clamp(1.25rem, 4vw, 3.5rem);
  --container: 1180px;
  --header-h: 4.85rem;
  --partners-h: 5.5rem;
  --footer-h: 5.5rem;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* scrollbar-gutter: stable altijd aan — ook tijdens de loader. Eerder zetten we
   die tijdens body.is-loading op auto zodat er geen lege baan over het donkere
   laadscherm zat; bij het open-splitten kwam de scrollbar terug en versprong
   de hele layout. Nu blijft de breedte constant; html-achtergrond matcht de
   loader zodat de gereserveerde gutter niet als lichte streep zichtbaar is. */
html {
  scroll-behavior: auto;
  scrollbar-gutter: stable;
  background: var(--loader-bg);
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

body.is-loading { overflow: hidden; }

html:has(body.is-loading) {
  overflow: hidden;
  scrollbar-gutter: stable;
  background: var(--loader-bg);
}

html:not(:has(body.is-loading)) {
  background: var(--bg);
}

/* Subtiele korrel/grain-textuur over de hele pagina — geeft de vlakke, egale
   achtergrondkleur wat tactiliteit en diepte terug. Puur CSS (inline SVG-
   turbulentie), dus geen extra afbeelding nodig. Heel laag opacity + overlay-
   blend, dus het is meer "voelbaar" dan zichtbaar en leest nergens als ruis. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9985;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

a { color: inherit; text-decoration: none; }

.container {
  width: min(100% - var(--pad) * 2, var(--container));
  margin: 0 auto;
}

/* ===== LOADER (dark fullscreen) ===== */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* PowerPoint-achtige "Split"-transitie: twee panelen vormen samen de volle
   achtergrond (elk 50% breed, sluiten naadloos in het midden aan) en schuiven
   op het eind gewoon opzij, weg van dat middenpunt — geen masker, geen
   uitgeknipte vorm, gewoon twee rechthoeken die uit elkaar bewegen. */
.loader__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background: var(--loader-bg);
  z-index: 0;
  will-change: transform;
}

.loader__panel--left { left: 0; }
.loader__panel--right { right: 0; }

/* Blauwdruk-raster: één laag over de VOLLE breedte van het scherm (niet per
   paneel), zodat het bij de start oogt als één ononderbroken vlak — geen
   naad in het midden waar de twee panelen tegen elkaar aan liggen. Vast
   lijnenpatroon in lichte grijstinten (::before), met daarboven een exacte
   oranje kopie van datzelfde patroon (::after). Vakjes zijn de helft van de
   hero-grid-maat (6 kolommen × 4 rijen, hier dus 12 × 8). Op telefoon
   groter, anders wordt het een liniaal. De route/het bolletje die hier
   bovenop zaten zijn weggehaald na feedback — de sweep zelf mocht blijven
   staan.
   Het grijze raster dooft statisch uit van linksboven (volledig zichtbaar)
   naar rechtsonder (helemaal niets meer, alleen het vlak) — die dooffade
   zit op .loader__grid zelf (de ouder), niet op ::before apart, want dan
   werkt hij ook automatisch door op ::after: de oranje sweep kan zo nooit
   zichtbaar zijn waar het grijze raster al is weggedoofd (rechtsonder).
   De oranje kopie reist ÉÉN keer in een diagonale band van ver linksboven
   buiten beeld naar ver rechtsonder buiten beeld — niet in een lus — en
   dooft tegelijk in helderheid uit (opacity 1 → 0) zodat hij wegkwijnt i.p.v.
   hard afgesneden wordt. Duur is afgestemd op LOAD_DURATION + HOLD_DURATION
   (zie main.js): de sweep is precies klaar op het moment dat de letters
   beginnen te splitsen. Bij dat splitsen dooft het hele raster (::before én
   ::after samen) mee weg via GSAP, want het zit als los element bovenop de
   panelen, niet erin. */
.loader__grid {
  --cell-x: 8.333vw;
  --cell-y: 12.5vh;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.95) 18%, transparent 85%);
  mask-image: linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.95) 18%, transparent 85%);
}

@media (max-width: 767px) {
  .loader__grid {
    --cell-x: 25vw;
    --cell-y: 25vh;
  }

  .loader__brand-half {
    font-size: clamp(1.35rem, 6.4vw, 1.75rem);
  }
}

.loader__grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px var(--cell-x)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px var(--cell-y));
}

.loader__grid::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, var(--accent) 0 2px, transparent 2px var(--cell-x)),
    repeating-linear-gradient(0deg, var(--accent) 0 2px, transparent 2px var(--cell-y));
  -webkit-mask-image: linear-gradient(135deg, transparent 0%, rgba(0, 0, 0, 0.95) 5%, transparent 15%, transparent 100%);
  mask-image: linear-gradient(135deg, transparent 0%, rgba(0, 0, 0, 0.95) 5%, transparent 15%, transparent 100%);
  -webkit-mask-size: 300vw 300vh;
  mask-size: 300vw 300vh;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: loaderGridSweep 4s linear 1 forwards;
}

@keyframes loaderGridSweep {
  0% {
    -webkit-mask-position: -90vw -90vh;
    mask-position: -90vw -90vh;
    opacity: 1;
  }
  100% {
    -webkit-mask-position: 140vw 140vh;
    mask-position: 140vw 140vh;
    opacity: 0;
  }
}

.loader__status {
  position: absolute;
  top: var(--pad);
  left: var(--pad);
  right: var(--pad);
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
}

.loader__label {
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.3s ease;
  animation: connectPulse 2s ease-in-out infinite;
}

@keyframes connectPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.loader.is-complete .loader__label {
  color: rgba(255, 255, 255, 0.85);
  animation: none;
  opacity: 1;
}

.loader__percent-wrap {
  display: flex;
  align-items: flex-start;
  line-height: 1;
  color: var(--loader-text);
}

.loader__percent {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  display: inline-block;
  transform-origin: right center;
}

.loader__percent-sign {
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 600;
  margin-top: 0.35em;
  margin-left: 0.1em;
  opacity: 0.7;
}

.loader.is-complete .loader__percent {
  color: #ffffff;
  text-shadow: 0 0 40px rgba(255, 255, 255, 0.25);
}

.loader__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.12);
}

.loader__progress-fill {
  height: 100%;
  width: 0%;
  background: #ffffff;
  transform-origin: left center;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.35);
}

/* Kostergraphics als één woord, opgebouwd uit twee helften die gewoon naast
   elkaar staan (geen kunstmatige 50/50-boxen meer — dat duwde het geheel uit
   het midden omdat "Koster" en "Graphics" ongelijk lang zijn). Zo staat het
   hele wordmark altijd echt centraal, en vallen de helften pas op het eind
   uit elkaar. */
.loader__brand-row {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0 var(--pad);
  pointer-events: none;
}

.loader__brand-half {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(2.05rem, 8.2vw, 7.5rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--loader-text);
  opacity: 0;
  transform: translateY(46px);
  white-space: nowrap;
  will-change: transform, opacity;
}

/* ===== CUSTOM CURSOR ===== */
/* Klein bolletje i.p.v. de systeemcursor. Volgt de muis (met een lichte lag)
   en inverteert (mix-blend-mode). Geen globale hover-ring; op de merkenbalk
   groeit het bolletje wél (JS, zelfde transform-string als de klik-krimp). */
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
  z-index: 9990;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0) scale(1);
  transition: opacity 0.25s ease;
  will-change: transform;
}

.cursor-dot.is-active {
  opacity: 1;
}

/* Systeemcursor pas verbergen zodra het bolletje ook echt actief is (JS zet
   deze klasse op body) — zo blijft de gewone cursor gewoon zichtbaar totdat
   we zeker weten dat dit apparaat een precieze muis heeft. */
body.has-custom-cursor,
body.has-custom-cursor * {
  cursor: none !important;
}

/* ===== HEADER ===== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad);
  opacity: 0;
  transform: translateY(-12px);
  transition: background 0.35s var(--ease-out), backdrop-filter 0.35s ease, border-color 0.35s ease, opacity 1.35s var(--ease-out), transform 1.35s var(--ease-out);
  border-bottom: 1px solid transparent;
}

.header.is-scrolled {
  background: rgba(245, 245, 244, 0.88);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--border);
}

.header.is-away {
  opacity: 0 !important;
  transform: translateY(-56%) !important;
  pointer-events: none;
}

.header.is-scrolled.header--on-dark {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

.header__logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 0.96rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.header__logo-mark {
  width: 1.45rem;
  height: 1.45rem;
  display: block;
  transition: filter 0.3s ease, transform 0.3s var(--ease-out);
}

.header__logo:hover .header__logo-mark {
  transform: rotate(-8deg);
}

.header__nav {
  display: flex;
  gap: 2.75rem;
}

.header__nav a {
  position: relative;
  padding-bottom: 0.25rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.2s ease;
}

.header__nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--ease-out);
}

.header__nav a:hover { color: var(--accent); }
.header__nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.header__cta {
  position: relative;
  z-index: 0;
  overflow: hidden;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  padding: 0.65rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.45);
  transition: color 0.3s var(--ease-out);
}

.header__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}

.header__cta:hover {
  color: #fff;
}

.header__cta:hover::before { transform: scaleX(1); }

@media (max-width: 900px) {
  .header__nav {
    gap: 1.35rem;
  }

  .header__nav a {
    font-size: 0.82rem;
  }
}

@media (max-width: 640px) {
  .header__nav { display: none; }

  .header__cta {
    padding: 0.5rem 0.8rem;
    font-size: 0.78rem;
    white-space: nowrap;
  }
}

@media (max-width: 400px) {
  .header__logo-text { display: none; }
}

/* ===== HERO ===== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7rem var(--pad) 4rem;
  overflow: hidden;
  background: var(--text) url("../sources/about/background-web.jpg") center / cover no-repeat;
  color: #fff;
}

/* Dieptegrid over de hero — zelfde sprite-techniek als het v1-concept: elke tegel
   toont zijn eigen uitsnede van dezelfde foto (background-size/-position per tegel,
   door JS berekend), zodat alle tegels samen weer de hele foto vormen. Willekeurige
   tegels krijgen een blur voor het scherp/wazig-dieptegevoel; de 1px-gap + witte
   achtergrondkleur van de container vormt de dunne rasterlijnen. */
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.14);
}

.hero-grid__tile {
  position: relative;
  overflow: hidden;
  background-image: url("../sources/about/background-web.jpg");
  background-repeat: no-repeat;
  background-color: transparent;
}

.hero-grid__tile.is-blurred {
  filter: blur(7px);
}

/* Extra donkere wash links, waar de tekstkolom staat — houdt de tekst leesbaar
   ongeacht hoe druk/licht de foto daarachter toevallig is, en dooft uit naar
   rechts zodat de foto daar gewoon zichtbaar blijft. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(15, 15, 15, 0.6) 0%, rgba(15, 15, 15, 0.32) 42%, rgba(15, 15, 15, 0) 68%),
    linear-gradient(180deg, rgba(20, 20, 20, 0.15) 0%, rgba(20, 20, 20, 0.35) 100%);
  pointer-events: none;
}

@media (max-width: 700px) {
  .hero {
    height: 100svh;
    min-height: 100svh;
    max-height: 100svh;
    background: #161616;
  }

  .hero-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }
}

/* ===== SERVICE STRIP (onder hero — wat ik doe, kort) ===== */
.service-strip {
  background: var(--text);
  color: #fff;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.service-strip__viewport {
  overflow: hidden;
  padding: 1.2rem 0;
}

.service-strip__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: service-strip-marquee 42s linear infinite;
}

.service-strip__group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: clamp(1.4rem, 3.4vw, 2.25rem);
  padding-right: clamp(1.4rem, 3.4vw, 2.25rem);
}

.service-strip__group a {
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  transition: color 0.25s ease;
  white-space: nowrap;
}

.service-strip__group a:hover {
  color: #fff;
}

.service-strip__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  opacity: 0.9;
}

@keyframes service-strip-marquee {
  to { transform: translate3d(var(--strip-shift, -25%), 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .service-strip__track {
    animation: none;
    width: 100%;
    justify-content: center;
  }

  .service-strip__group[aria-hidden="true"] {
    display: none;
  }
}

@media (max-width: 768px) {
  .page-home .service-strip__viewport {
    padding: 13px 0;
  }

  .page-home .service-strip__group {
    gap: 15px;
    padding-right: 15px;
  }

  .page-home .service-strip__group a {
    font-size: 14px;
    letter-spacing: 0.06em;
    line-height: 1;
  }

  .page-home .service-strip__dot {
    width: 4px;
    height: 4px;
  }
}

/* ===== PARTNERS (footer-baan) ===== */
.partners {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  overflow: visible;
  background: transparent;
  z-index: 0;
}

.partners__caption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.15rem var(--pad) 0;
}

.partners__hint {
  margin: 0;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.partners__rule {
  display: block;
  width: 1px;
  height: 1.25rem;
  margin: 0.4rem 0 0 0.2rem;
  background: var(--border);
}

.partners__arrow {
  display: none;
}

.partners__bar {
  height: var(--partners-h);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--text);
}

.partners__heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.05;
}

.partners__viewport {
  --partners-fade: 6%;
  width: 100%;
  overflow: hidden;
  padding: 0.2rem 0;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--partners-fade),
    #000 calc(100% - var(--partners-fade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--partners-fade),
    #000 calc(100% - var(--partners-fade)),
    transparent 100%
  );
}

.partners__track {
  display: flex;
  width: max-content;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  animation: partners-marquee 26s linear infinite;
}

@keyframes partners-marquee {
  to { transform: translate3d(var(--partners-shift, -50%), 0, 0); }
}

.partners__group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  padding-right: clamp(1.75rem, 4vw, 3.25rem);
}

.partners--static .partners__track {
  animation: none;
  width: 100%;
  justify-content: center;
}

.partners--static .partners__group + .partners__group {
  display: none;
}

.partners--static .partners__viewport {
  -webkit-mask-image: none;
  mask-image: none;
}

.partners__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.partners__cell {
  flex: 0 0 auto;
  height: 3.55rem;
  width: auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.35rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.partners__cell img {
  display: block;
  width: auto;
  height: 2rem;
  max-width: 10.5rem;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.92;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.partners__cell:hover img,
.partners__cell:focus-visible img {
  opacity: 1;
  transform: scale(1.14);
}

.partners__cell:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.7);
  outline-offset: 4px;
}

/* Noah is al een witte koffer met lijnen. Invert maakt daar een plat vlak van. */
.partners__cell[data-partner="noah"] img,
.partners__cell[data-partner="happyfriet"] img {
  filter: none;
  height: 3.2rem;
  max-width: 7.5rem;
}

.partners__cell--wide img {
  height: 1.85rem;
  max-width: 11rem;
}

.partners__cell[data-partner="hydronica"] img {
  height: 1.32rem;
  max-width: 9rem;
}

.partners__cell[data-partner="bikefitting"] img {
  height: 1.28rem;
  max-width: 11rem;
}

.partners__cell--tall img {
  height: 2.2rem;
  max-width: 4.15rem;
}

.partners__cell--mark img {
  height: 2.1rem;
  max-width: 5.1rem;
}

.partner-dialog {
  --partner-glow: #2a2a2a;
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 1rem;
  overflow: auto;
  border: 0;
  background: transparent;
  color: #f2f1ef;
}

.partner-dialog[open] {
  display: grid;
  place-items: center;
}

.partner-dialog::backdrop {
  background: rgba(10, 10, 10, 0.72);
}

.partner-dialog__card {
  position: relative;
  left: auto;
  top: auto;
  display: flex;
  flex-direction: column;
  width: min(92vw, 36rem);
  height: auto;
  max-height: 86dvh;
  overflow: hidden;
  transform: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  background: #141414;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

.partner-dialog .cursor-dot {
  z-index: 5;
}

.partner-dialog__close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 2;
  width: 2.15rem;
  height: 2.15rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: transparent;
  color: #fff;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.partner-dialog__close:hover {
  background: var(--accent);
}

.partner-dialog__hero {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  height: 13.25rem;
  background:
    radial-gradient(ellipse 58% 55% at 50% 48%, color-mix(in srgb, var(--partner-glow) 26%, #222), #141414 74%);
}

.partner-dialog__logo {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  height: auto;
  max-width: 42%;
  max-height: 8.5rem;
  object-fit: contain;
  filter: none;
}

.partner-dialog__logo--wide {
  max-width: 84%;
  max-height: 2.85rem;
}

.partner-dialog__logo--stack {
  max-width: 36%;
  max-height: 10.25rem;
}

.partner-dialog__logo--mark {
  max-width: 32%;
  max-height: 8.75rem;
}

.partner-dialog__logo--lockup {
  max-width: 38%;
  max-height: 9.5rem;
}

.partner-dialog__logo--padded {
  max-width: 42%;
  max-height: 11rem;
}

.partner-dialog__panel {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.35rem 1.65rem 1.5rem;
  background: #0d0d0d;
}

.partner-dialog__kicker {
  margin: 0 0 0.55rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.partner-dialog__title {
  margin: 0 0 0.45rem;
  font-size: clamp(1.55rem, 3.2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-transform: uppercase;
}

.partner-dialog__lead {
  margin: 0 0 0.55rem;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: #fff;
}

.partner-dialog__lead[hidden] {
  display: none;
}

.partner-dialog__body {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(242, 241, 239, 0.62);
}

.partner-dialog__body[hidden] {
  display: none;
}

.partner-dialog__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
  gap: 0.75rem;
  margin-top: 1.15rem;
  padding-top: 1.05rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.partner-dialog__meta[hidden],
.partner-dialog__chips[hidden],
.partner-dialog__link[hidden] {
  display: none;
}

.partner-dialog__meta-item span {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(242, 241, 239, 0.42);
}

.partner-dialog__meta-item strong {
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
}

.partner-dialog__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.partner-dialog__chips li {
  padding: 0.35rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 2px;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

.partner-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.15rem;
  padding-top: 0;
}

.partner-dialog__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex: 1 1 11rem;
  width: auto;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 2px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

.partner-dialog__link:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.hero__inner {
  width: min(100%, var(--container));
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  min-height: calc(100dvh - 11rem);
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  max-width: 38rem;
}

.hero__tagline {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin: 0 0 1.75rem;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 10.5vw, 6.25rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.02;
  color: #fff;
  opacity: 0;
  transform: translateY(28px);
}

.hero__word {
  display: block;
}

.hero__positioning {
  max-width: 48ch;
  font-size: clamp(1.05rem, 2.1vw, 1.3rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0;
  opacity: 0;
  transform: translateY(18px);
}

.hero__actions {
  opacity: 0;
  transform: translateY(16px);
  margin-top: 2.5rem;
}

.hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  background: #fff;
  padding: 0.95rem 1.45rem;
  border: 1px solid #fff;
  border-radius: 2px;
  transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.hero__btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.hero__btn:hover .hero__arrow {
  transform: translateX(5px);
}

.hero__arrow {
  display: inline-block;
  transition: transform 0.3s var(--ease-out);
}

.hero__scroll {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  opacity: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.hero__scroll span {
  animation: scrollBounce 2.2s ease-in-out infinite;
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* ===== SECTIONS ===== */
.section {
  padding: clamp(5.5rem, 13vw, 9.5rem) 0;
  border-top: 1px solid var(--border);
  position: relative;
}

.section--soft {
  background:
    radial-gradient(ellipse 70% 50% at 100% 0%, rgba(45, 45, 45, 0.04), transparent 55%),
    var(--bg-deep);
}

.section--dark {
  background:
    radial-gradient(ellipse 60% 45% at 0% 100%, rgba(255, 255, 255, 0.06), transparent 50%),
    var(--text);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.1);
}

.section__num {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.section--dark .section__num { color: rgba(255, 255, 255, 0.45); }

.section__lead {
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 50ch;
  margin-bottom: 2.75rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.section__lead--on-dark {
  color: rgba(255, 255, 255, 0.55);
}

.section__intro {
  margin-bottom: 0.5rem;
}

#contact {
  border-top: 0;
  scroll-margin-top: var(--header-h);
}

.page-home #contact {
  min-height: calc(100dvh - var(--partners-h) - var(--footer-h));
}

#contact .section__title {
  color: var(--text);
}

.section__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 0.75rem;
}

.section__text {
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 40ch;
}

.section--dark .section__text { color: rgba(255, 255, 255, 0.55); }

.section__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 0.15rem;
  margin-top: 1.1rem;
}

.section__link:hover { opacity: 0.7; }

.section__link--accent {
  color: var(--accent);
  border-bottom-color: rgba(227, 106, 31, 0.45);
}

.section__hint {
  margin: 0.65rem 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.section__actions {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.section__actions--center {
  text-align: center;
}

.section__actions .section__link {
  margin-top: 0;
  border-bottom-color: rgba(45, 45, 45, 0.35);
}

/* Op een lichte sectie (zoals Over mij) is de witte onderrand uit de dark-mode-variant
   onzichtbaar — hier expliciet donker maken zodat de link leesbaar blijft. */
.about__copy .section__link {
  border-bottom-color: rgba(45, 45, 45, 0.35);
  margin-top: 0;
}

.hero__btn--light {
  color: var(--text);
  background: #fff;
  border-color: #fff;
}

.hero__btn--light:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ===== PLACEHOLDER FRAMES ===== */
.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 12rem;
  background: #d9d7d2;
  color: rgba(45, 45, 45, 0.35);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ph--a { background: #cfcbc4; }
.ph--b { background: #b8b4ad; }
.ph--c { background: #2d2d2d; }
.ph--d { background: #e4e1db; }
.ph--e { background: #9e9a93; }
.ph--f { background: #6e6b66; }
.ph__label { padding: 1rem; text-align: center; }

.ph--portrait {
  min-height: clamp(22rem, 55vw, 34rem);
  background: #c5c1ba;
}

.ph--step {
  min-height: 8.5rem;
  aspect-ratio: 4 / 3;
  max-width: 14rem;
}

.ph--avatar {
  width: 3.25rem;
  height: 3.25rem;
  min-height: 0;
  border-radius: 50%;
  flex-shrink: 0;
  background: #b8b4ad;
}

/* ===== WORK COLLAGE ===== */
.work-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-bottom: 1.75rem;
}

.work-head .section__intro {
  margin-bottom: 0;
}

.work-all {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.15rem;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: 2px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(255, 255, 255, 0.35);
  transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}

.work-all:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.work-item--soon .work-item__title {
  font-size: clamp(1.2rem, 2.4vw, 1.75rem);
}

.work-collage {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0.85rem;
}

.work-item {
  position: relative;
  grid-column: span 4;
  display: block;
  overflow: hidden;
  color: inherit;
  isolation: isolate;
  min-height: clamp(16rem, 32vw, 24rem);
  background: #1c1c1c;
  box-shadow: 0 1px 2px rgba(20, 20, 20, 0.04), 0 14px 32px -18px rgba(20, 20, 20, 0.22);
  transition: box-shadow 0.4s var(--ease-out);
}

.work-item:hover {
  box-shadow: 0 1px 2px rgba(20, 20, 20, 0.05), 0 22px 44px -18px rgba(20, 20, 20, 0.3);
}

.work-item--lg {
  grid-column: span 8;
  min-height: clamp(20rem, 40vw, 30rem);
}

.work-item--wide {
  grid-column: span 6;
  min-height: clamp(18rem, 34vw, 26rem);
}

/* Media vult altijd het hele vak (los van PNG-ratio) */
.work-item .ph,
.work-item__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: #1c1c1c;
}

.work-item .ph {
  display: flex;
  align-items: center;
  justify-content: center;
}

.work-item__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1);
  transition: transform 0.7s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .work-item:hover .work-item__media img {
    transform: scale(1.08);
  }

  .work-item[href*="happyfriet"]:hover .work-item__media img {
    transform: scale(1.16);
  }
}

/* Tijdelijke crop-fits per cover */
.work-item[href*="nexizz"] .work-item__media img {
  object-position: center 42%;
}

.work-item[href*="happyfriet"] .work-item__media img {
  object-position: center 48%;
  transform: scale(1.08);
}

.work-item[href*="noahs"] .work-item__media img,
.work-item[href*="noahstaalkoffer"] .work-item__media img {
  object-position: center 40%;
}

.work-item--muted {
  opacity: 0.55;
}

.work-item--muted:hover {
  opacity: 0.85;
}

.work-item--soon {
  pointer-events: none;
}

.work-item .ph__label {
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.work-item__meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.15rem 1rem 1rem 1.1rem;
  background: linear-gradient(to top, rgba(20, 20, 20, 0.88) 0%, rgba(20, 20, 20, 0.35) 55%, transparent 100%);
  color: #fff;
  z-index: 1;
  text-align: left;
}

.work-item__title {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.8vw, 2.1rem);
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.1;
}

/* Titel + labels altijd zichtbaar; hover-clip komt later */
.work-item__labels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}

.work-item__labels li {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(20, 20, 20, 0.4);
  border-radius: 2px;
}

/* ===== ABOUT ===== */
.about {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2.5rem, 7vw, 5.5rem);
  align-items: center;
}

.about--compact {
  gap: clamp(1.75rem, 5vw, 3.5rem);
}

.about--compact .section__lead {
  margin-bottom: 1rem;
}

.about__bio {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 40ch;
  margin-bottom: 1.35rem;
}

.about--compact .about__bio {
  font-size: 1rem;
  margin-bottom: 1rem;
  max-width: 36ch;
}

.about__labels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 1rem 0 1.15rem;
  padding: 0;
}

.about__labels li {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--border);
  background: transparent;
  border-radius: 2px;
  color: var(--text);
}

.about__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.5rem;
}

.about--compact .about__list {
  gap: 0.4rem;
  margin-top: 0.25rem;
}

.about__list li {
  font-size: 0.95rem;
  font-weight: 500;
  padding-left: 1rem;
  border-left: 2px solid var(--text);
}

.about__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 1.75rem;
  margin-top: 1.35rem;
}

.about--compact .about__portrait {
  aspect-ratio: 4 / 5;
  max-height: min(28rem, 70vh);
}

.about__portrait {
  margin: 0;
  overflow: hidden;
  background: var(--bg-deep);
  aspect-ratio: 4 / 5;
  border-radius: 4px;
}

.about__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.route__note,
.approach__note {
  max-width: 44rem;
  margin: 0;
  padding: clamp(2rem, 5vw, 3rem) 0 0;
  border-top: 1px solid var(--border);
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ===== APPROACH WHEEL (Bucks Sauce–achtig rad) ===== */
.approach {
  padding-bottom: 0;
  overflow: clip;
}

.approach__pin {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-top: clamp(1.25rem, 3vw, 2rem);
  padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

/* Intro + “doorlopend”-kaart naast elkaar: vult de lege lucht boven het rad */
.approach__head {
  display: block;
  margin-bottom: clamp(0.75rem, 2vw, 1.25rem);
}

.approach__intro {
  text-align: left;
  margin: 0;
}

.approach__intro .section__lead {
  margin-inline: 0;
  margin-bottom: 0;
}

.approach__intro .section__hint {
  margin-top: 0.75rem;
}

.section__hint--swipe {
  display: none;
}

.approach__nav {
  display: none;
}

.approach__nav-btn {
  appearance: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #c4c4c4;
  color: #2d2d2d;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.approach__nav-btn svg {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
}

.approach__aside {
  padding: clamp(2rem, 5vw, 3.25rem) 0 clamp(2.75rem, 6vw, 4.25rem);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  box-shadow: none;
}

.approach__aside-label {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.approach__aside-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text);
}

.approach__aside-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.85rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid rgba(45, 45, 45, 0.3);
  padding-bottom: 0.1rem;
}

.approach__aside-link:hover {
  color: var(--accent);
  border-bottom-color: rgba(227, 106, 31, 0.45);
}

.approach__wheel {
  /*
    Aanpak-boog — twee knoppen:

    --approach-bow-y   → hoe HOOG de boog/cijfers staan (%, t.o.v. het rad)
                         lager % = hoger op het scherm; hoger % = lager
    --approach-curve   → hoe DIEP de buiging is (0–100)
                         0 = bijna plat, 100 = maximale boog
                         Stappen volgen deze SVG-baan in JS.
  */
  --approach-bow-y: 20%;
  --approach-curve: 75;
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: clamp(22rem, 58vh, 34rem);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Full-bleed boog. Piek door het midden van de cijfers (anker = cijfer-center). */
.approach__arc {
  position: absolute;
  left: 50%;
  top: var(--approach-bow-y);
  width: 120vw;
  height: calc(clamp(12rem, 28vw, 20rem) * var(--approach-curve) / 100);
  transform: translate(-50%, 0);
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.approach__arc-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.approach__arc-path {
  stroke: rgba(45, 45, 45, 0.28);
  stroke-width: 1.25;
  stroke-dasharray: 1.1 1.65;
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
}

.approach__stage {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: inherit;
  overflow: visible;
}

.approach__steps {
  list-style: none;
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
}

.approach__step {
  position: absolute;
  left: 50%;
  top: var(--approach-bow-y);
  width: min(40rem, calc(100vw - 2.5rem));
  margin: 0;
  /* Centrering via GSAP xPercent:-50 — anders overschrijft scrub de CSS-transform */
  transform: translateX(-50%);
  transform-origin: 50% 0;
  will-change: transform, opacity;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.approach.is-ready .approach__step {
  visibility: visible;
}

.approach__step.is-active {
  pointer-events: auto;
}

.approach__index {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(4.75rem, 13vw, 8rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(45, 45, 45, 0.4);
  paint-order: stroke fill;
  user-select: none;
}

.approach__body {
  position: absolute;
  left: 50%;
  top: clamp(3.25rem, 8vw, 5rem);
  transform: translateX(-50%);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.85rem;
}

.approach__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.45rem 1.1rem;
  border-radius: 2px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.approach__text {
  margin: 0;
  max-width: 42ch;
  font-size: clamp(1.05rem, 1.9vw, 1.2rem);
  line-height: 1.55;
  color: var(--text);
}

@media (max-width: 820px) {
  .approach__head {
    margin-bottom: 1.25rem;
  }
}

/* Telefoon: rad is optioneel — veeg/pijlen, pagina scrollt er gewoon langs. */
@media (max-width: 767px) {
  .approach__pin {
    min-height: 0;
  }

  .section__hint--wheel {
    display: none;
  }

  .approach__arc {
    display: none;
  }

  .approach--swipe .approach__arc {
    display: block;
    top: var(--approach-bow-y);
    width: 140vw;
    height: 2.4rem;
    transform: translate(-50%, 0);
  }

  .approach--swipe .approach__arc-path {
    stroke: rgba(45, 45, 45, 0.32);
    stroke-dasharray: 1.15 2.1;
  }

  .approach--swipe .approach__nav {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: var(--approach-bow-y);
    height: 0;
    z-index: 3;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.45rem;
    pointer-events: none;
  }

  .approach--swipe .approach__nav-btn {
    pointer-events: auto;
    transform: translateY(-50%);
    background: #c4c4c4;
    color: #2d2d2d;
  }

  .approach__wheel {
    min-height: 24rem;
    touch-action: pan-y;
  }

  .approach__step {
    width: min(22rem, calc(100vw - 2.5rem));
  }

  .approach__index {
    font-size: clamp(3.4rem, 22vw, 5rem);
  }
}

/* Reduced motion / no-JS fallback: verticale stack */
@media (prefers-reduced-motion: reduce) {
  .approach__pin {
    min-height: 0;
  }

  .approach__wheel {
    min-height: 0;
  }

  .approach__arc {
    display: none;
  }

  .approach__stage {
    min-height: 0;
  }

  .approach__steps {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 1rem var(--pad) 2rem;
  }

  .approach__step {
    position: static;
    left: auto;
    top: auto;
    width: min(40rem, 100%);
    margin-inline: auto;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
  }

  .approach__index {
    position: static;
    transform: none;
    display: block;
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    -webkit-text-stroke: 1.25px rgba(45, 45, 45, 0.45);
  }

  .approach__body {
    position: static;
    transform: none;
  }
}

/* ===== REVIEWS ===== */
.section__intro--center {
  text-align: center;
  margin-inline: auto;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.section__intro--center .section__lead {
  margin-inline: auto;
}

.section__intro--center .section__title {
  font-weight: 400;
}

.section__title-accent {
  color: var(--accent);
  font-weight: 700;
}

/* ===== SERVICES (Diensten-stapel) =====
   Studio-taal i.p.v. Bucks-cream: donkere kop (zoals hero-zwart), licht vlak,
   scherpe hoeken, grotere leesbare opsomming. Kaarten zijn dekkend zodat
   overlap de vorige tekst echt afdekt. */
.services-stack {
  padding-bottom: 0;
  overflow: clip;
}

.services-stack__pin {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-top: clamp(0.75rem, 2vw, 1.25rem);
  padding-bottom: clamp(1rem, 3vw, 1.75rem);
}

/* Studio-prop: rechtsboven — vaste rem-maat (geen vw), blijft stabiel bij zoom */
.services-stack__prop {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  width: 22rem;
  pointer-events: none;
  user-select: none;
}

.services-stack__hoodie {
  display: block;
  width: 100%;
  height: auto;
  /* Studio-diepte: contact + zachte vloer-schaduw (volgt de cutout) */
  filter:
    drop-shadow(3px 5px 8px rgba(45, 45, 45, 0.28))
    drop-shadow(10px 22px 34px rgba(45, 45, 45, 0.32))
    drop-shadow(0 42px 56px rgba(45, 45, 45, 0.2));
}

.services-stack__pin > .container,
.services-stack__stage {
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .services-stack__prop {
    width: 16rem;
  }
}

@media (max-width: 640px) {
  .services-stack__prop {
    display: none;
  }
}


.services-stack__intro {
  text-align: left;
  margin-inline: 0;
  margin-bottom: clamp(0.35rem, 1vw, 0.75rem);
}

.services-stack__intro .section__lead {
  margin-inline: 0;
  margin-bottom: 0;
}

.services-stack__intro .section__hint {
  margin-top: 0.75rem;
}

.services-stack__stage {
  /* Klein rem-getal = strak onder de intro, ruimte valt onder de kaart */
  --stack-anchor-y: 0.35rem;
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}

.stack-card {
  position: absolute;
  left: 50%;
  top: var(--stack-anchor-y);
  width: min(34rem, calc(100vw - 2rem));
  margin: 0;
  background: #fafaf9;
  border-radius: 4px;
  box-shadow:
    0 1px 0 rgba(45, 45, 45, 0.08),
    0 22px 48px rgba(45, 45, 45, 0.12);
  transform: translate(-50%, 0);
  transform-origin: 50% 40%;
  will-change: transform, opacity;
  backface-visibility: hidden;
  opacity: 1;
}

.stack-card--base {
  z-index: 1;
  /* Basis staat recht — alleen 2/3 landen licht getild */
  transform: translate(-50%, 0) rotate(0deg);
}

.stack-card--left {
  z-index: 2;
  /* Ver onder het scherm tot JS/ScrollTrigger de scrub overneemt */
  transform: translate(calc(-50% - 28vw), 120vh) rotate(14deg);
  opacity: 0;
}

.stack-card--right {
  z-index: 3;
  transform: translate(calc(-50% + 28vw), 120vh) rotate(-14deg);
  opacity: 0;
}

.stack-card__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.8rem 1.35rem;
  background: var(--text);
  border-radius: 4px 4px 0 0;
}

.stack-card__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fafaf9;
  flex-shrink: 0;
  opacity: 0.85;
}

.stack-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.2;
}

.stack-card__body {
  padding: clamp(1.15rem, 2.5vw, 1.6rem) clamp(1.4rem, 3vw, 2rem) clamp(1.2rem, 2.6vw, 1.7rem);
  border: 1px solid rgba(45, 45, 45, 0.12);
  border-top: 0;
  border-radius: 0 0 4px 4px;
  background: #fafaf9;
  text-align: left;
}

.stack-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.48rem;
  width: 100%;
}

.stack-card__list li {
  position: relative;
  padding-left: 1.15rem;
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  line-height: 1.45;
  color: rgba(45, 45, 45, 0.72);
}

.stack-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .services-stack__pin {
    min-height: 0;
  }

  .services-stack__stage {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    padding: 0.5rem var(--pad) 2rem;
  }

  .stack-card {
    position: static;
    left: auto;
    top: auto;
    width: min(34rem, 100%);
    transform: none !important;
    opacity: 1 !important;
  }
}

.reviews {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: clamp(0.5rem, 2vw, 1.25rem);
}

#reviews {
  padding-bottom: clamp(3rem, 7vw, 5rem);
}

.review {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
  padding: clamp(1.75rem, 4vw, 2.75rem) 0;
  border-top: 1px solid var(--border);
}

.review:last-child {
  border-bottom: 1px solid var(--border);
}

.review__avatar {
  width: clamp(4.5rem, 10vw, 5.75rem);
  height: clamp(4.5rem, 10vw, 5.75rem);
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  flex-shrink: 0;
  background: var(--bg-deep);
  filter: grayscale(1);
}

.review__avatar--xander {
  object-position: 50% 22%;
}

.review__avatar--palmen {
  object-position: 54% 16%;
}

.review__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  min-width: 0;
}

.review__person {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.review__person strong {
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.review__quote {
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 62ch;
}

.review__quote.is-clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.review__more {
  appearance: none;
  border: 0;
  background: none;
  padding: 0 0 0.2rem;
  margin: 0;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  cursor: pointer;
  border-bottom: 2.5px solid var(--accent);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.review__more:hover {
  color: var(--accent);
}

/* ===== CONTACT + FOOTER ===== */
.contact__details {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 2rem;
}

.contact__line {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.5vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  border-bottom: 1px solid rgba(45, 45, 45, 0.22);
  padding-bottom: 0.2rem;
  width: fit-content;
  transition: opacity 0.2s ease;
}

.contact__line:hover { opacity: 0.7; }

.footer {
  padding: 1.25rem 0;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.page-home .footer,
.footer:has(.footer__bar) {
  padding: 0;
  border-top: 0;
  background: var(--text);
  color: #fff;
  min-height: var(--footer-h);
  display: flex;
  align-items: center;
}

.footer__lead {
  margin: 0 0 1.75rem;
  max-width: 50ch;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.footer__facts {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.footer__fact {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: fit-content;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text);
}

.footer__fact-icon {
  width: 2.05rem;
  height: 2.05rem;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--accent);
  border-radius: 4px;
  transition: background 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.footer__fact-icon img {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
  filter: brightness(0) invert(1);
  transition: filter 0.2s var(--ease-out);
}

a.footer__fact:hover .footer__fact-icon {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--accent);
}

a.footer__fact:hover .footer__fact-icon img {
  filter: invert(47%) sepia(86%) saturate(1640%) hue-rotate(347deg) brightness(0.98);
}

.footer__bar {
  margin-top: auto;
  width: 100%;
  padding: 0;
  border-top: 0;
}

.footer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  min-height: var(--footer-h);
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.5rem;
  padding-top: 0;
  border-top: 0;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.78);
}

.footer__socials {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  padding-top: 0;
  border-top: 0;
}

.footer__socials a {
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 4px;
  color: #fff;
  background: transparent;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}

.footer__socials a:hover {
  background: #fff;
  border-color: #fff;
  color: var(--accent);
}

.footer__socials svg {
  width: 1.12rem;
  height: 1.12rem;
  display: block;
}

.footer__legal a {
  color: inherit;
}

.footer__legal a:hover {
  color: #fff;
}

.footer__inner {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.footer__inner a:hover { color: var(--text); }

.to-top {
  position: fixed;
  right: var(--pad);
  bottom: 1.25rem;
  z-index: 120;
  width: 2.55rem;
  height: 2.55rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out), background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.page-home .to-top {
  bottom: calc((var(--footer-h) - 2.55rem) / 2);
}

.to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.to-top:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.to-top svg {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
}

/* ===== PROJECT / CASE PAGE (Coffee-Tech inspired) ===== */
.page-project {
  background: var(--bg);
  overflow-x: clip;
}

.page-project .header {
  opacity: 1;
  transform: none;
}

.page-legal .header,
.page-werk .header {
  opacity: 1;
  transform: none;
}

.page-werk .work-page {
  padding: calc(var(--header-h) + 2.5rem) 0 5rem;
}

.page-werk .work-page .section {
  padding: 0;
  border-top: none;
}

.page-werk .legal__back {
  margin-bottom: 0.85rem;
}

.legal-page {
  padding: calc(var(--header-h) + 2.75rem) 0 5rem;
}

.legal {
  max-width: 40.5rem;
}

.legal__back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 2.25rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.2s var(--ease-out);
}

.legal__back svg {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
}

.legal__back:hover {
  color: var(--text);
}

.legal a.legal__back {
  border-bottom: 0;
}

.legal__kicker {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.85rem;
}

.legal .section__title {
  margin-bottom: 0.85rem;
  letter-spacing: -0.04em;
}

.legal .section__lead {
  max-width: none;
  margin-bottom: 0;
  font-size: 1.08rem;
  line-height: 1.55;
}

.legal__intro {
  padding-bottom: 2.25rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--border);
}

.legal__block {
  padding: 1.85rem 0 0.15rem;
  border-bottom: 1px solid var(--border);
}

.legal__block:last-of-type {
  border-bottom: 0;
}

.legal h2 {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.legal h2 span {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.legal p,
.legal li {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
}

.legal p {
  margin-bottom: 0.85rem;
}

.legal ul {
  margin: 0 0 0.85rem 1.15rem;
}

.legal li {
  margin-bottom: 0.35rem;
}

.legal a {
  border-bottom: 1px solid rgba(45, 45, 45, 0.28);
  transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.legal a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.legal__also {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.75rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.38);
}

.legal__also p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.legal__also a {
  font-size: 0.92rem;
  font-weight: 600;
  border-bottom: 0;
  white-space: nowrap;
}

.page-legal .footer {
  padding: 0;
}

.page-legal .footer__inner {
  min-height: var(--footer-h);
  align-items: center;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.page-legal .legal-back {
  left: var(--pad);
  right: auto;
}

@media (max-width: 640px) {
  .legal__also {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }
}

.case-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 7.5rem var(--pad) 3.5rem;
  background:
    radial-gradient(ellipse 70% 50% at 50% 70%, rgba(255, 255, 255, 0.06), transparent 60%),
    #161616;
  color: #fff;
  text-align: center;
  overflow: visible;
}

.case-hero__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.case-hero__tags span {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
}

.case-hero__title {
  font-size: clamp(1.85rem, 8vw, 5rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin-bottom: 2rem;
  overflow-wrap: break-word;
}

.case-hero__stage {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
}

.case-hero__viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  cursor: grab;
  touch-action: pan-y;
}

.case-hero__viewport:active {
  cursor: grabbing;
}

.case-hero__track {
  display: flex;
  will-change: transform;
}

.case-hero__slide {
  position: relative;
  z-index: 0;
  flex: 0 0 84%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(16rem, 42vh, 28rem);
  padding: 0 1.25rem;
  opacity: 0;
  transform: scale(0.86);
  transition: opacity 1.15s cubic-bezier(0.4, 0, 0.2, 1), filter 1.15s cubic-bezier(0.4, 0, 0.2, 1), transform 1.15s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.case-hero__slide.is-side {
  z-index: 1;
  opacity: 0.48;
  filter: blur(12px);
  transform: scale(0.9);
  pointer-events: auto;
  cursor: pointer;
}

.case-hero__slide.is-active {
  z-index: 2;
  opacity: 1;
  filter: none;
  transform: scale(1);
  pointer-events: auto;
}

@media (min-width: 700px) {
  .case-hero__slide { flex-basis: 64%; padding: 0 1.75rem; }
}

@media (min-width: 1100px) {
  .case-hero__slide { flex-basis: 52%; padding: 0 2.25rem; }
}

.case-hero__slide img {
  display: block;
  width: 100%;
  max-height: min(52vh, 28rem);
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.case-hero__slide .ph {
  width: 100%;
  min-height: clamp(14rem, 36vh, 24rem);
  background: #2a2a2a;
  color: rgba(255, 255, 255, 0.4);
}

.case-hero__nav {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  padding: 0 clamp(0.35rem, 3vw, 1.75rem);
}

.case-hero__btn {
  pointer-events: auto;
  width: 3.1rem;
  height: 3.1rem;
  border: 0;
  padding: 0;
  background: none;
  color: #fff;
  display: grid;
  place-items: center;
  opacity: 0.7;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s var(--ease-out);
}

.case-hero__btn svg {
  width: 1.85rem;
  height: 1.85rem;
  display: block;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.45));
}

.case-hero__btn:hover {
  opacity: 1;
  transform: scale(1.08);
}

.case-hero__dots {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 1.5rem;
}

.case-hero__dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.28);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.case-hero__dot.is-active {
  background: #fff;
  transform: scale(1.25);
}

.case-intro {
  padding: clamp(4.5rem, 11vw, 7.5rem) var(--pad);
  text-align: center;
}

.case-intro__label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.case-intro__title {
  font-size: clamp(1.75rem, 4.5vw, 2.85rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  max-width: 22ch;
  margin: 0 auto 1.25rem;
}

.case-intro__text {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 50ch;
  margin: 0 auto 1.05rem;
  text-wrap: pretty;
}

.case-intro .hero__btn {
  margin-top: 0.95rem;
}

.case-features {
  padding: 0 var(--pad) clamp(4rem, 10vw, 6.5rem);
}

.case-features__grid {
  width: min(100%, var(--container));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem 1.25rem;
}

.case-feature {
  text-align: left;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.case-feature__title {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 0.4rem;
}

.case-feature__text {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.case-gallery {
  background: #1a1a1a;
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  overflow: hidden;
}

.case-gallery__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}

.case-gallery__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: case-gallery-marquee 78s linear infinite;
}

@keyframes case-gallery-marquee {
  to { transform: translate3d(-50%, 0, 0); }
}

.case-gallery__group {
  display: flex;
  flex-shrink: 0;
  align-items: stretch;
  gap: 1rem;
  padding-right: 1rem;
}

.case-gallery__item {
  flex: 0 0 min(78vw, 520px);
  height: clamp(16rem, 42vh, 24rem);
  overflow: hidden;
  background: #111;
}

/* Echte instore-foto's: allemaal 9:16, grotere balk, geen landscape-crop. */
.case-gallery--portrait {
  padding: clamp(2rem, 4.5vw, 3rem) 0;
}

.case-gallery--portrait .case-gallery__item {
  flex: 0 0 auto;
  width: auto;
  height: clamp(16rem, 46vh, 28rem);
  aspect-ratio: 9 / 16;
}

.case-gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.case-gallery__item .ph {
  min-height: inherit;
  width: 100%;
  background: #2a2a2a;
  color: rgba(255, 255, 255, 0.35);
}

.case-gallery--clips {
  padding: clamp(2.75rem, 6vw, 4.5rem) var(--pad);
}

.case-gallery--clips .case-gallery__videos {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(2.25rem, 6vw, 4.5rem);
  width: min(100%, 64rem);
  margin: 0 auto;
}

.case-clip {
  position: relative;
  margin: 0;
  flex: 1 1 0;
  max-width: 24rem;
  min-width: 0;
}

.case-clip video {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: #111;
  pointer-events: none;
}

.case-clip.is-playing video {
  pointer-events: auto;
}

.case-clip__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(245, 245, 244, 0.94);
  color: #161616;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.38);
  transition: transform 0.25s var(--ease-out), opacity 0.25s ease, background 0.2s ease;
}

.case-clip__play svg {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
  margin-left: 0.18rem;
}

.case-clip__play:hover {
  background: #fff;
  transform: translate(-50%, -50%) scale(1.08);
}

.case-clip.is-playing .case-clip__play {
  opacity: 0;
  pointer-events: none;
}

.case-clip figcaption {
  margin-top: 0.85rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

@media (max-width: 640px) {
  .case-gallery--clips .case-gallery__videos {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    width: min(100%, 24rem);
  }

  .case-clip {
    flex: none;
    width: 100%;
    max-width: none;
  }

  .case-clip__play {
    width: 3.75rem;
    height: 3.75rem;
  }
}

.case-blocks {
  padding: clamp(4rem, 10vw, 7rem) 0;
}

.case-block {
  width: min(100% - var(--pad) * 2, 720px);
  margin: 0 auto;
  padding: 2.25rem 0;
  border-top: 1px solid var(--border);
}

.case-block:last-child {
  border-bottom: 1px solid var(--border);
}

.case-block__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.65rem;
}

.case-block__title {
  font-size: clamp(1.25rem, 2.5vw, 1.55rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-bottom: 0.75rem;
}

.case-block__body {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.case-block__body + .case-block__body {
  margin-top: 0.85rem;
}

.case-related {
  padding: clamp(3.5rem, 9vw, 6rem) 0;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.case-related__title {
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  margin-bottom: 1.75rem;
}

.case-related .work-head {
  margin-bottom: 1.5rem;
}

.case-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
}

.case-related__grid .work-item {
  grid-column: auto;
  min-height: clamp(16rem, 28vw, 22rem);
}

.case-related .work-item__media::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  background: linear-gradient(to top, rgba(8, 8, 8, 0.92) 0%, rgba(8, 8, 8, 0.4) 55%, transparent 100%);
  pointer-events: none;
  z-index: 1;
  transition: height 0.6s var(--ease-out);
}

.case-related .work-item__meta {
  background: none;
  padding: 0.85rem 0.9rem 1rem;
  z-index: 2;
}

.case-related .work-item__labels {
  margin-top: 0;
}

@media (hover: hover) and (pointer: fine) {
  .case-related .work-item:hover .work-item__media::after {
    height: 78%;
  }
}

.case-related__card {
  display: block;
  background: var(--bg);
  overflow: hidden;
  color: inherit;
  transition: transform 0.35s var(--ease-out);
}

.case-related__card:hover {
  transform: translateY(-3px);
}

.case-related__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-deep);
}

.case-related__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s var(--ease-out);
}

.case-related__card:hover .case-related__media img {
  transform: scale(1.04);
}

.case-related__media .ph {
  min-height: 100%;
  aspect-ratio: 4 / 3;
}

.case-related__meta {
  padding: 1rem 1.05rem 1.15rem;
}

.case-related__meta span {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.case-related__meta strong {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.case-cta {
  padding: clamp(4rem, 10vw, 6.5rem) var(--pad);
  background: var(--text);
  color: #fff;
  text-align: center;
}

.case-cta__title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  margin-bottom: 0.75rem;
}

.case-cta__text {
  color: rgba(255, 255, 255, 0.55);
  max-width: 42ch;
  margin: 0 auto 1.75rem;
  line-height: 1.5;
}

.case-cta + .case-related {
  border-top: 0;
}

.reveal {
  opacity: 0;
}

.reveal.is-visible {
  opacity: 1;
}

.reveal-item {
  opacity: 0;
}

@media (max-width: 900px) {
  .case-features__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .case-related__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .case-hero__nav {
    padding: 0 0.1rem;
  }

  .case-hero__btn {
    width: 2.55rem;
    height: 2.55rem;
  }

  .case-features__grid,
  .case-related__grid {
    grid-template-columns: 1fr;
  }

  .work-item,
  .work-item--lg,
  .work-item--wide { grid-column: span 12; }

  .case-gallery__item {
    flex-basis: min(86vw, 24rem);
    height: 16rem;
  }

  .case-gallery--portrait .case-gallery__item {
    flex-basis: auto;
    height: min(52vh, 22rem);
    aspect-ratio: 9 / 16;
  }
}

/* legacy project stubs kept for safety */
.project-hero,
.project-slider,
.project-segments,
.project-next { display: none; }


.header--solid {
  opacity: 1;
  transform: none;
  background: rgba(245, 245, 244, 0.9);
  backdrop-filter: blur(10px);
}

.header--on-dark {
  background: transparent;
}

.header--on-dark .header__logo,
.header--on-dark .header__cta {
  color: #fff;
}

.header--on-dark .header__logo-mark {
  filter: brightness(0) invert(1);
}

.header--on-dark .header__nav a {
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.header--on-dark .header__nav a:hover { color: var(--accent); }

.header--on-dark .header__cta {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.08);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .loader { display: none; }
  .loader__label { animation: none; }
  .header { opacity: 1; transform: none; }
  .hero__tagline,
  .hero__positioning,
  .hero__actions,
  .hero__scroll {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero__scroll span { animation: none; }
  .partners__viewport { overflow-x: auto; }
  .cursor-dot { display: none !important; }
  body.has-custom-cursor,
  body.has-custom-cursor * { cursor: auto !important; }

  .work-item__media img,
  .work-item:hover .work-item__media img,
  .work-item[href*="happyfriet"] .work-item__media img,
  .work-item[href*="happyfriet"]:hover .work-item__media img {
    transform: none !important;
    transition: none;
  }

  .case-hero__slide,
  .case-hero__slide.is-side,
  .case-hero__slide.is-active {
    filter: none;
    transform: none;
    transition: opacity 0.2s ease;
  }

  .case-hero__slide.is-side {
    opacity: 0.35;
  }

  .case-gallery__track {
    animation: none;
  }

  .case-gallery__viewport {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@media (max-width: 900px) {
  .work-item,
  .work-item--lg,
  .work-item--wide { grid-column: span 6; }

  .about { grid-template-columns: 1fr; }

  .about__portrait {
    max-width: 18rem;
  }

  .review {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .footer__socials {
    margin-left: 0;
  }

  .project-segment {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}

@media (max-width: 768px) {
  .header.is-away {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto;
  }

  .work-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .work-all {
    margin-bottom: 0;
  }

  .hero__inner {
    min-height: auto;
  }

  /* Moza telefoon: H2 32px / H3 24px / body 14px weight 300.
     Zelfde px-trede. Gewicht 500 i.p.v. 600, anders oogt Manrope zwaarder. */
  .section {
    padding: 3.5rem 0;
  }

  .section__num {
    font-size: 0.7rem;
    margin-bottom: 0.7rem;
  }

  .section__title {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 0.55rem;
  }

  .section__lead,
  .section__text,
  .about__bio,
  .review__quote,
  .approach__text {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
  }

  .section__lead {
    margin-bottom: 1.6rem;
    max-width: 36ch;
  }

  .section__link {
    font-size: 0.875rem;
  }

  .hero__tagline {
    font-size: 2rem;
    line-height: 1.12;
    margin-bottom: 1.15rem;
  }

  .hero__positioning {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
  }

  .work-item__title {
    font-size: 1.125rem;
    font-weight: 500;
  }

  .review__person {
    font-size: 0.82rem;
  }

  .review__person strong {
    font-size: 0.88rem;
  }

  .about__portrait {
    max-width: 15.5rem;
    margin-inline: auto;
  }

  .partner-dialog__card {
    width: min(92vw, 22rem);
  }

  .partner-dialog__hero {
    height: 8.25rem;
  }

  .partner-dialog__title {
    font-size: 1.5rem;
    font-weight: 500;
  }

  .partner-dialog__lead,
  .partner-dialog__body,
  .footer__lead {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
  }

  .hero__positioning {
    max-width: 100%;
  }

  .hero__scroll {
    position: static;
    margin-top: 3.5rem;
    align-self: flex-end;
  }

  /* Onder 900px stonden tegels nog 2-koloms. Telefoon: vier banen, zoals reviews. */
  .work-collage {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .work-item,
  .work-item--lg,
  .work-item--wide {
    grid-column: 1 / -1;
    min-height: 17.75rem;
  }

  .work-item__media img,
  .work-item[href*="happyfriet"] .work-item__media img {
    transform-origin: center center;
    transform: scale(1);
  }

  .page-home #contact {
    min-height: 0;
    padding-top: clamp(6.5rem, 22vw, 9rem);
    padding-bottom: clamp(3rem, 10vw, 4.5rem);
  }

  .partners__caption {
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
    padding-bottom: 0.55rem;
  }

  .partners__hint {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }

  .partners__arrow {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1;
  }

  .partners__rule {
    display: none;
  }

  .page-home .footer,
  .footer:has(.footer__bar) {
    min-height: 0;
    align-items: stretch;
  }

  .footer__row {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1.35rem;
    min-height: 0;
    padding: 2.85rem 0 2.4rem;
  }

  .footer__legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
  }

  .footer__socials {
    margin-left: 0;
  }

  .services-stack {
    padding-bottom: 0;
    overflow: visible;
  }

  .services-stack__pin,
  .services-stack__pin.is-phone {
    min-height: 0;
    display: block;
  }

  .services-stack__intro {
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .services-stack__intro .section__lead {
    margin-bottom: 0;
  }

  .services-stack__intro .section__hint {
    margin-top: 1.5rem;
  }

  .services-stack__stage {
    margin-top: clamp(5rem, 18vh, 8rem);
    min-height: calc(100svh - 4.75rem);
    height: calc(100svh - 4.75rem);
    align-items: flex-start;
    --stack-anchor-y: 0.85rem;
  }

  .stack-card {
    width: min(34rem, calc(100vw - 1.75rem));
  }
}