/* =========================================================
   MENU — fullscreen split-screen takeover (spectaculair)
   ========================================================= */
.menu{
  position: fixed; inset: 0; z-index: 300;
  pointer-events: none;
}
.menu[aria-hidden="false"]{ pointer-events: auto; }
.menu__scrim{
  position:absolute; inset:0;
  background: rgba(8,9,11,0.94);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  opacity: 0;
  transition: opacity .35s var(--ease-out);
  will-change: opacity;
}
.menu[aria-hidden="false"] .menu__scrim{ opacity: 1; }

.menu__shell{
  position:absolute;
  top: clamp(60px, 4vh, 80px);
  right: clamp(60px, 3vw, 80px);
  bottom: clamp(60px, 4vh, 80px);
  width: min(1100px, calc(100vw - 120px));
  max-height: calc(100vh - 120px);
  background: linear-gradient(180deg, #0B0D12 0%, #08090B 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  box-shadow: -60px 0 120px rgba(0,0,0,0.55), 0 30px 80px rgba(0,0,0,0.45);
  transform: translateX(110%);
  transition: transform .45s cubic-bezier(.85, 0, .15, 1);
  will-change: transform;
  display: grid; grid-template-columns: 1.25fr 1fr;
  overflow: hidden;
}
.menu[aria-hidden="false"] .menu__shell{ transform: translateX(0); }
.menu__left, .menu__right{ overflow-y:auto; overflow-x:hidden; }
.menu__shell::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image: linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: calc(100% / 8) 100%;
  opacity:.4; z-index:0;
}

/* LEFT — primary sections list */
.menu__left{
  position:relative; z-index:1;
  padding: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 64px) clamp(28px, 3vw, 40px);
  display:flex; flex-direction:column; justify-content:space-between;
  border-right: 1px solid rgba(255,255,255,0.06);
}
.menu__topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font: 500 11px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color: rgba(255,255,255,0.5);
}
.menu__topbar .dot{
  width:6px; height:6px; border-radius:50%; background:var(--live);
  display:inline-block; margin-right:8px; vertical-align:middle;
  box-shadow: 0 0 0 3px rgba(43,197,107,0.18);
  animation: menuLive 2s ease-in-out infinite;
}
@keyframes menuLive{ 50%{ box-shadow: 0 0 0 6px rgba(43,197,107,0.10);} }
.menu__list{
  list-style:none; padding:0; margin: clamp(24px, 4vw, 48px) 0 0;
  display:flex; flex-direction:column; gap: clamp(2px, 0.4vw, 6px);
}
.menu__item{
  position:relative;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: clamp(14px, 1.6vw, 22px) 0;
  display:grid; grid-template-columns: 56px 1fr auto;
  align-items: baseline; gap: 18px;
  opacity: 0;
  transition: opacity .3s var(--ease-out);
}
.menu__item:last-child{ border-bottom: 1px solid rgba(255,255,255,0.07); }
.menu[aria-hidden="false"] .menu__item{ opacity:1; }
.menu[aria-hidden="false"] .menu__item:nth-child(1){ transition-delay: .12s; }
.menu[aria-hidden="false"] .menu__item:nth-child(2){ transition-delay: .16s; }
.menu[aria-hidden="false"] .menu__item:nth-child(3){ transition-delay: .20s; }
.menu[aria-hidden="false"] .menu__item:nth-child(4){ transition-delay: .24s; }
.menu[aria-hidden="false"] .menu__item:nth-child(5){ transition-delay: .28s; }
.menu[aria-hidden="false"] .menu__item:nth-child(6){ transition-delay: .32s; }
.menu[aria-hidden="false"] .menu__item:nth-child(7){ transition-delay: .36s; }
.menu[aria-hidden="false"] .menu__item:nth-child(8){ transition-delay: .40s; }

.menu__num{
  font: 500 11px/1 var(--mono); letter-spacing:.16em; color:rgba(255,255,255,0.42);
  align-self:center;
}
.menu__link{
  font: 700 clamp(32px, 4.4vw, 64px)/0.96 var(--sans);
  letter-spacing:-0.045em; text-transform:uppercase;
  color: var(--ink); text-decoration: none;
  display:inline-block;
  transition: color .2s, transform .25s var(--ease-snap);
  position:relative; line-height:1;
}
.menu__link em{
  font-family: 'Neonderthaw', cursive; font-style:normal; font-weight:400;
  text-transform:none; letter-spacing:0; font-size: 0.85em;
  margin-left: 0.18em;
  color:#8FC6FF;
  text-shadow:
    0 0  2px rgba( 30, 60,110,0.95),
    0 0  6px rgba(200,230,255,0.90),
    0 0 14px rgba(110,170,240,0.55),
    0 0 28px rgba( 70,130,220,0.35);
}
.menu__item:hover .menu__link,
.menu__item:focus-within .menu__link{ color:#6FB4FF; transform: translateX(14px); }
.menu__item:hover .menu__num,
.menu__item:focus-within .menu__num{ color:#6FB4FF; }
.menu__arrow{
  align-self:center; opacity:0; transform: translateX(-6px);
  transition: opacity .3s, transform .3s var(--ease-snap);
  font: 500 14px/1 var(--mono); color:#6FB4FF;
  letter-spacing:.18em;
}
.menu__item:hover .menu__arrow,
.menu__item:focus-within .menu__arrow{ opacity:1; transform:translateX(0); }
.menu__meta{
  grid-column: 2 / 4;
  font: 500 11px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color: rgba(255,255,255,0.5);
  margin-top: 6px;
}

.menu__footer{
  display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.07);
  font: 500 11px/1.5 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color: rgba(255,255,255,0.5);
}
.menu__footer a{ color:var(--ink); text-decoration:none; border-bottom: 1px solid rgba(255,255,255,0.25); padding-bottom:2px; transition: color .25s, border-color .25s; }
.menu__footer a:hover{ color:#6FB4FF; border-color:#6FB4FF; }

/* RIGHT — preview pane */
.menu__right{
  position:relative; z-index:1;
  padding: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px);
  display:flex; flex-direction:column;
  overflow:hidden;
  background: #08090B;
}
.menu__preview-eyebrow{
  font: 500 11px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase;
  color: rgba(255,255,255,0.42); margin-bottom: 14px;
  display:flex; align-items:center; gap:10px;
}
.menu__preview-eyebrow::before{ content:""; width:6px; height:6px; background:#6FB4FF; }
.menu__preview-h{
  font: 700 clamp(28px, 3.5vw, 48px)/1.04 var(--sans);
  letter-spacing:-0.03em; color:var(--ink);
  margin-bottom: 18px; min-height: 1.04em;
}
.menu__preview-body{
  font: 400 15px/1.55 var(--sans); color: rgba(255,255,255,0.65);
  max-width: 42ch; margin-bottom: 28px;
}
.menu__preview-sublinks{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap: 6px;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 22px;
}
.menu__preview-sublinks li{ font: 400 14px/1.6 var(--sans); }
.menu__preview-sublinks a{
  color: rgba(255,255,255,0.75); text-decoration:none;
  display:inline-flex; align-items:center; gap:10px;
  padding: 4px 0; transition: color .15s, padding-left .15s;
}
.menu__preview-sublinks a::before{
  content:"·"; color: rgba(255,255,255,0.35); font-size: 18px; line-height: 1;
  transition: content .15s, color .15s;
}
.menu__preview-sublinks a:hover{ color:#6FB4FF; padding-left: 4px; }
.menu__preview-sublinks a:hover::before{ color:#6FB4FF; }
.menu__preview-foot{
  margin-top:auto; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.07);
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap;
}
.menu__preview-cta{
  display:inline-flex; align-items:center; gap:12px;
  font: 500 11px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color: var(--ink); padding: 14px 22px;
  border: 1px solid #6FB4FF; background: transparent;
  text-decoration:none;
  transition: background .25s, color .25s;
}
.menu__preview-cta:hover{ background:#6FB4FF; color: var(--paper); }
.menu__preview-script{
  font-family: 'Neonderthaw', cursive; font-size: clamp(40px, 5vw, 72px); line-height:1;
  color:#8FC6FF;
  text-shadow:
    0 0  2px rgba(30,60,110,0.95),
    0 0  6px rgba(200,230,255,0.85),
    0 0 14px rgba(110,170,240,0.45);
  opacity:.85;
}

body.menu-open{ overflow:hidden; }

@media(max-width:980px){
  .menu__shell{ grid-template-columns: 1fr; width: calc(100vw - 48px); top:24px; right:24px; bottom:24px; max-height: calc(100vh - 48px); }
  .menu__right{ display:none; }
  .menu__left{ border-right:none; }
}
@media(max-width:560px){
  .menu__shell{ width: calc(100vw - 24px); top:12px; right:12px; bottom:12px; max-height: calc(100vh - 24px); border-radius:14px; }
  .menu__item{ grid-template-columns: 36px 1fr auto; gap: 10px; padding:12px 0; }
  .menu__link{ font-size: clamp(26px, 8.4vw, 44px); }
  .menu__meta{ font-size: 10px; }
}

/* ============ INDEX PANEL (slide-in from right, brutalist sitemap) ============ */
.index-panel{
  position: fixed; inset: 0; z-index: 300;
  pointer-events: none;
}
.index-panel[aria-hidden="false"]{ pointer-events: auto; }
.index-panel__scrim{
  position: absolute; inset: 0;
  background: rgba(8, 9, 11, 0.55);
  opacity: 0;
  transition: opacity .35s cubic-bezier(.4,0,.2,1);
}
.index-panel[aria-hidden="false"] .index-panel__scrim{ opacity: 1; }
.index-panel__inner{
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(560px, 100vw);
  background: var(--b);
  color: var(--w);
  padding: 32px clamp(24px, 4vw, 48px);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
  display: flex; flex-direction: column; gap: 28px;
  border-left: 1px solid rgba(255,255,255,0.10);
  box-shadow: -40px 0 80px rgba(0,0,0,0.45);
  font-feature-settings: "ss01";
}
.index-panel[aria-hidden="false"] .index-panel__inner{ transform: translateX(0); }

.index-panel__head{
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.index-panel__eyebrow{
  font: 500 11px/1 var(--mono);
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  display: inline-flex; align-items: center; gap: 8px;
}
.index-panel__eyebrow .dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(111,180,255,0.22);
  animation: ipsdot 1.8s ease-in-out infinite;
}
@keyframes ipsdot{ 50%{ box-shadow: 0 0 0 6px rgba(111,180,255,0.12);} }
.index-panel__close{
  width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,0.18);
  background: transparent; color: var(--w);
  font: 400 22px/1 var(--sans);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.index-panel__close:hover{ background: rgba(255,255,255,0.10); border-color: var(--accent); }

.index-panel__sections{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 22px;
}
.ips{
  display: grid; grid-template-columns: 56px 1fr; gap: 18px;
  padding-bottom: 22px;
  border-bottom: 1px dashed rgba(255,255,255,0.10);
}
.ips:last-child{ border-bottom: none; }
.ips__num{
  font: 500 13px/1 var(--mono);
  letter-spacing: .14em; color: rgba(255,255,255,0.45);
  padding-top: 8px;
}
.ips__title{
  font: 600 clamp(20px, 2.6vw, 28px)/1.1 var(--sans);
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--w);
}
.ips__title a{ color: inherit; text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color .2s ease, color .2s ease; }
.ips__title a:hover{ color: var(--accent); border-bottom-color: var(--accent); }
.ips__meta{
  display: inline; margin-left: 8px;
  font: 500 12px/1.2 var(--mono);
  letter-spacing: 0;
  color: rgba(255,255,255,0.45);
  text-transform: none;
}
.ips__sublinks{
  list-style: none; padding: 0; margin: 10px 0 0;
  display: flex; flex-direction: column; gap: 4px;
}
.ips__sublinks--cols{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 16px;
}
.ips__sublinks li{ font: 400 14px/1.5 var(--sans); }
.ips__sublinks a{
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  padding: 2px 0;
  position: relative;
  transition: color .15s ease, padding-left .15s ease;
}
.ips__sublinks a::before{
  content: "→"; opacity: 0; margin-right: 6px;
  transition: opacity .15s ease;
}
.ips__sublinks a:hover{ color: var(--accent-blue); padding-left: 6px; }
.ips__sublinks a:hover::before{ opacity: 1; color: var(--accent-blue); }

.index-panel__foot{
  margin-top: auto; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.10);
  display: flex; flex-direction: column; gap: 10px;
}
.index-panel__footrow{ display: flex; gap: 24px; flex-wrap: wrap; }
.ipf-link{ color: var(--w); border-bottom: 1px solid rgba(255,255,255,0.30); padding-bottom: 2px; font-weight: 500; text-decoration:none; }
.ipf-link:hover{ color: var(--accent); border-color: var(--accent); }
.ipf-mono{ font: 500 11px/1 var(--mono); letter-spacing: .14em; color: rgba(255,255,255,0.40); text-transform: uppercase; }

body.index-open{ overflow: hidden; }

@media(max-width:920px){
  .index-panel__inner{ width: 100vw; padding: 24px 20px; }
  .ips{ grid-template-columns: 44px 1fr; gap: 12px; }
  .ips__sublinks--cols{ grid-template-columns: 1fr; }
}


/* =========================================================
   AUDIT RESULT (after submit)
   ========================================================= */
.audit-result{
  display: none;
  padding: 32px var(--pad);
  border-bottom: 1px solid var(--line);
  background: var(--g-1);
}
.audit-result.is-open{ display: block; }
.audit-result__inner{ max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr 2fr; gap: 60px; align-items: start; }
.audit-result__head{ font: 500 11px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mid); }
.audit-result__head strong{ display:block; color: var(--ink); font-weight: 500; font-size: 14px; letter-spacing: -0.01em; text-transform: none; margin-top: 6px; }
.score{ display:grid; gap: 14px; }
.score__row{ display:grid; grid-template-columns: 130px 1fr 60px; gap: 16px; align-items:center; }
.score__label{ font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mid); }
.score__bar{ height: 1px; background: var(--g-3); position: relative; }
.score__bar-fill{ position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: var(--ink); transition: width 1.4s var(--ease-out); }
.score__val{ font: 500 11px/1 var(--mono); letter-spacing: .04em; color: var(--ink); text-align:right; font-feature-settings: "tnum"; }
.audit-result__cta{ grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid var(--line); display:flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.audit-result__cta span{ font: 400 13px/1.4 var(--sans); color: var(--mid); max-width: 50ch; }
.audit-result__cta a{ font: 500 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px; }

@media(max-width:780px){ .audit-result__inner{ grid-template-columns: 1fr; gap: 32px; } }

/* =========================================================
   MARQUEE — always running
   ========================================================= */
.marquee{
  position: relative; z-index: 2;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  overflow: hidden;
  padding: 18px 0;
}
.marquee__track{
  display: flex; gap: 50px;
  white-space: nowrap; will-change: transform;
  font: 600 clamp(32px, 5vw, 64px)/1 var(--sans);
  letter-spacing: -0.04em;
  color: var(--ink);
  text-transform: uppercase;
}
.marquee__track > span{ display: inline-flex; align-items:center; gap: 50px; }
.marquee__sep{ width: 8px; height: 8px; border: 1px solid var(--ink); transform: rotate(45deg); flex-shrink: 0; }

/* =========================================================
   INTERSECT — manifesto, verb-driven
   ========================================================= */
.intersect{
  padding: clamp(100px, 14vw, 200px) var(--pad);
  max-width: var(--max); margin: 0 auto;
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.intersect__video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: auto;
  opacity: 0.7;
  display: block;
}
.intersect__inner{
  position: relative; z-index: 1;
  pointer-events: none;                    /* events vallen door naar canvas */
}
.intersect__inner em[data-word]{ pointer-events: auto; }   /* ems blijven interactief */
.intersect__inner{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: end;
}
.intersect__inner > .eyebrow{ align-self: start; padding-top: 8px; }
.intersect__lines{
  grid-column: 2 / 3;
  display:flex; flex-direction: column; gap: clamp(0px, 0.2vw, 6px);
  font: 700 clamp(56px, 12vw, 220px)/0.88 var(--sans);
  letter-spacing: -0.06em;
  text-transform: uppercase;
}
.intersect__line{
  opacity: 0.08; transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  position: relative; display: inline-block;
  transform: translateX(-12px);
  will-change: transform, opacity;
}
.intersect__line[data-step="2"]{ padding-left: clamp(20px, 3vw, 60px); }
.intersect__line[data-step="3"]{ padding-left: clamp(40px, 6vw, 120px); }
.intersect__line.is-active{ opacity: 1; transform: translateX(0); }
/* .intersect__line em styled via shared headline-em rule above */

/* 3D word canvas overlay */
em[data-word]{ cursor: none; text-transform: none; font-style: normal; }
.em3d-canvas{
  position: absolute;
  left: -5%; top: -20%;
  width: 110%; height: 140%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .55s var(--ease-out);
  z-index: 2;
  /* blauwe glas-glow — subtieler, anders vreet de halo de letter-vorm op */
  filter:
    drop-shadow(0 0 2px rgba(200,225,255,0.55))
    drop-shadow(0 0 8px rgba(110,170,240,0.18));
}
em[data-word].is-3d .em3d-canvas{ opacity: 1; }
em[data-word].is-3d{
  background-image: none !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: none !important;
}
.intersect__sub{
  grid-column: 3 / 4;
  font: 400 14px/1.5 var(--sans);
  color: var(--mid);
  max-width: 32ch;
  align-self: end;
  padding-bottom: clamp(8px, 1vw, 14px);
}
.intersect__sub strong{ color: var(--ink); font-weight: 500; }
@media(max-width:980px){
  .intersect__inner{ grid-template-columns: 1fr; gap: 40px; }
  .intersect__inner > .eyebrow{ padding-top: 0; }
  .intersect__lines, .intersect__sub{ grid-column: auto; }
}

/* =========================================================
   CAPABILITIES — numbered list, hairline rows
   ========================================================= */
.cap{
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cap__inner{ max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.cap__head{
  padding: clamp(50px, 6vw, 100px) 0 clamp(40px, 5vw, 80px);
  display:grid; grid-template-columns: 1fr 2fr; gap: 60px;
  border-bottom: 1px solid var(--line);
  align-items: end;
}
.eyebrow{
  font: 500 11px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase;
  color: var(--mid);
  display: flex; align-items: center; gap: 14px;
}
.eyebrow::before{ content:""; width: 6px; height: 6px; background: var(--ink); }
.cap__head h2{
  font: 700 clamp(40px, 6vw, 100px)/0.95 var(--sans);
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: var(--ink);
  max-width: 14ch;
}
.cap__head p{ font: 400 14px/1.5 var(--sans); color: var(--mid); max-width: 40ch; }

.cap__list{}
.cap__item{
  display:grid; grid-template-columns: 80px 1fr 1fr auto;
  gap: 24px;
  padding: clamp(24px, 3vw, 36px) 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
  position: relative;
  transition: background .3s var(--ease-snap), padding .3s var(--ease-snap);
}
.cap__item:last-child{ border-bottom: 0; }
.cap__item::before{
  content:""; position:absolute; inset: 0;
  background: var(--g-1);
  opacity: 0;
  transition: opacity .3s var(--ease-snap);
  z-index: -1;
}
.cap__item:hover::before{ opacity: 1; }
.cap__item:hover{ padding-inline: 24px; margin-inline: -24px; }
.cap__num{
  font: 500 11px/1 var(--mono); letter-spacing: .18em; color: var(--mid);
}
.cap__title{
  font: 600 clamp(20px, 2.4vw, 32px)/1 var(--sans);
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--ink);
}
.cap__desc{ font: 400 13px/1.5 var(--sans); color: var(--mid); max-width: 36ch; }
.cap__arrow{ width: 16px; height: 16px; color: var(--ink); transition: transform .3s var(--ease-snap); }
.cap__item:hover .cap__arrow{ transform: translateX(8px); }

@media(max-width:880px){
  .cap__head{ grid-template-columns: 1fr; gap: 24px; }
  .cap__item{ grid-template-columns: 60px 1fr; }
  .cap__desc{ grid-column: 2 / 3; padding-top: 6px; }
  .cap__arrow{ display: none; }
}

/* =========================================================
   WORK
   ========================================================= */
.work{
  padding: clamp(80px, 10vw, 140px) var(--pad);
  max-width: var(--max); margin: 0 auto;
}
.work__head{
  display: grid; grid-template-columns: 1fr 2fr 1fr;
  gap: 24px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 32px;
  align-items: end;
}
.work__head h2{
  font: 700 clamp(40px, 6vw, 100px)/0.95 var(--sans);
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: var(--ink);
  max-width: 12ch;
}
.work__head p{ font: 400 14px/1.5 var(--sans); color: var(--mid); max-width: 36ch; }
.work__count{
  text-align: right;
  font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--mid);
}
.work__count strong{ display:block; color: var(--ink); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; text-transform: none; margin-bottom: 4px; }

.case{
  display:grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  margin-bottom: 24px;
  background: var(--paper);
  overflow: hidden;
  transition: border-color .3s var(--ease-snap);
}
.case:hover{ border-color: var(--ink); }
.case__media{
  background: var(--b);
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  display:flex; align-items:center; justify-content:center;
  color: var(--w);
}
.case__media--shot{ aspect-ratio: 16 / 9; }                /* match native screenshot ratio — geen crop, geen letterbox */
.case__media-art{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(0,0,0,.06), transparent 60%);
}
.case__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(0,0,0,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.08) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0;
}
.case__scan{
  position:absolute; left:0; right:0; height:1px;
  background: var(--w);
  box-shadow: 0 0 12px rgba(0,0,0,0.7);
  top:0; opacity:0;
  z-index: 3;
}
.case__media-mark{
  position:relative; z-index:2;
  font: 700 clamp(24px, 3vw, 44px)/1 var(--sans);
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--w);
  text-align:center; padding: 0 32px;
}
.case__check{
  position: absolute; right: 20px; top: 20px;
  width: 32px; height: 32px;
  border: 1px solid var(--w);
  display: flex; align-items: center; justify-content: center;
  z-index: 4;
  opacity: 0; transform: scale(0.4);
}
.case__check svg{ width: 14px; height: 14px; color: var(--w); }
.case__media--shot{ background: var(--b); }
.case__media--shot img{ filter: contrast(1.02) saturate(1.04); }
.case:hover .case__media--shot img{ transform: scale(1.04) !important; }
.case__shotbadge{
  position:absolute; left:14px; top:14px; z-index:3;
  font: 500 10px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink); background: rgba(255,255,255,.85); padding: 6px 10px;
  border: 1px solid rgba(0,0,0,.08);
}

.case__copy{ padding: clamp(24px, 3vw, 40px); display:flex; flex-direction:column; justify-content: space-between; gap: 24px; }
.case__meta{ display:flex; gap: 16px; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mid); flex-wrap: wrap; }
.case__title{ font: 600 clamp(22px, 2.6vw, 36px)/1 var(--sans); letter-spacing: -0.03em; text-transform: uppercase; color: var(--ink); }
.case__placeholder{
  font: 700 clamp(80px, 12vw, 200px)/0.9 var(--sans);
  letter-spacing: -0.06em;
  color: var(--ink);
  position: relative;
  z-index: 2;
}
.case__desc{ font: 400 14px/1.5 var(--sans); color: var(--mid); max-width: 42ch; }
.case__metrics{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  padding-top: 18px; border-top: 1px solid var(--line);
}
.case__metric strong{ display:block; font: 600 22px/1 var(--sans); letter-spacing: -0.02em; color: var(--ink); font-feature-settings:"tnum"; }
.case__metric span{ font: 500 10px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mid); margin-top: 4px; display:block; }
.case__cta{
  display:inline-flex; align-items:center; gap: 12px;
  font: 500 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink); padding-bottom: 4px;
  align-self: flex-start;
}
.case__cta::after{
  content:""; width: 28px; height: 1px; background: var(--ink);
  transition: width .3s var(--ease-snap);
}
.case__cta:hover::after{ width: 44px; }

@media(max-width:880px){ .case{ grid-template-columns: 1fr; } }

/* =========================================================
   PROCESS — black section, refined
   ========================================================= */
.process{
  background: var(--b); color: var(--w);
  padding: clamp(80px, 10vw, 140px) var(--pad);
}
.process__inner{ max-width: var(--max); margin: 0 auto; }
.process__head{
  display:grid; grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--g-9);
  margin-bottom: 0;
  align-items: end;
}
.process__head .eyebrow{ color: var(--g-4); }
.process__head .eyebrow::before{ background: var(--g-4); }
.process__head h2{
  font: 700 clamp(40px, 6vw, 100px)/0.95 var(--sans);
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: var(--w);
  max-width: 14ch;
}
.process__head p{ font: 400 14px/1.5 var(--sans); color: var(--g-4); max-width: 40ch; }

.process__steps{ display:grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--g-9); }
.step{
  padding: clamp(24px, 3vw, 40px) clamp(20px, 2vw, 32px);
  position:relative;
  transition: background .25s var(--ease-snap);
  border-right: 1px solid var(--g-9);
  min-height: 320px;
  display: flex; flex-direction: column;
}
.step:last-child{ border-right: 0; }
.step:hover{ background: var(--g-12); }
.step__num{ font: 500 11px/1 var(--mono); color: var(--g-4); letter-spacing: .18em; }
.step__title{
  margin-top: 24px;
  font: 700 clamp(28px, 3.4vw, 48px)/0.95 var(--sans);
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--w);
}
.step__desc{ margin-top: 18px; font: 400 13px/1.5 var(--sans); color: var(--g-4); max-width: 28ch; flex-grow: 1; }
.step__time{
  margin-top: 20px;
  font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--g-4);
}
@media(max-width:980px){ .process__steps{ grid-template-columns: 1fr 1fr; } .step{ border-bottom: 1px solid var(--g-9); } .step:nth-child(2){ border-right: 0; } .step:nth-last-child(-n+2){ border-bottom: 0; }}
@media(max-width:600px){ .process__steps{ grid-template-columns: 1fr; } .step{ border-right: 0; border-bottom: 1px solid var(--g-9); } .step:last-child{ border-bottom: 0; } }

/* =========================================================
   FOUNDERS — compact strip
   ========================================================= */
.founders{
  padding: clamp(40px, 5vw, 60px) var(--pad);
  max-width: var(--max); margin: 0 auto;
  border-bottom: 1px solid var(--line);
}
.founders__inner{
  display:flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 32px;
}
.founders__label{
  font: 500 11px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase;
  color: var(--mid);
}
.founders__list{ display:flex; gap: clamp(20px, 3vw, 48px); align-items: center; flex-wrap: wrap; }
.founder{ display:inline-flex; align-items: center; }
.founder__text strong{ display:block; font: 600 14px/1.1 var(--sans); letter-spacing: -0.01em; color: var(--ink); }
.founder__text span{ font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mid); margin-top: 4px; display:block; }

.founders__cta{
  display:inline-flex; align-items:center; gap: 12px;
  font: 500 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink);
}
.founders__cta::after{
  content:""; width: 28px; height: 1px; background: var(--ink);
  transition: width .3s var(--ease-snap);
}
.founders__cta:hover::after{ width: 40px; }

/* =========================================================
   FAQ
   ========================================================= */
.faq{
  padding: clamp(80px, 10vw, 140px) var(--pad);
  max-width: 920px; margin: 0 auto;
  border-bottom: 1px solid var(--line);
}
.faq__inner > .eyebrow{ display:block; margin-bottom: 14px; }
.faq h2{
  font: 700 clamp(34px, 5vw, 72px)/1 var(--sans);
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: clamp(36px, 5vw, 72px);
}
.faq details{
  border-top: 1px solid var(--line);
  padding: 22px 0;
  cursor: pointer;
}
.faq details:last-of-type{ border-bottom: 1px solid var(--line); }
.faq summary{
  font: 600 clamp(16px, 1.6vw, 22px)/1.3 var(--sans);
  letter-spacing: -0.01em;
  color: var(--ink);
  list-style: none;
  position: relative;
  padding-right: 36px;
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::after{
  content: "+";
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font: 400 22px/1 var(--mono);
  color: var(--g-6);
  transition: transform .25s var(--ease-snap), color .2s;
}
.faq details[open] summary::after{ content: "−"; color: var(--ink); }
.faq details p{
  font: 400 14px/1.6 var(--sans);
  color: var(--g-6);
  max-width: 65ch;
  margin-top: 14px;
  padding-right: 36px;
}

/* =========================================================
   STUDIO / CONTACT
   ========================================================= */
.studio{
  padding: clamp(100px, 14vw, 200px) var(--pad);
  max-width: var(--max); margin: 0 auto;
}
.studio__inner{
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
}
.studio__data{
  display: flex; flex-direction: column;
  gap: 20px;
  font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--mid);
}
.studio__data > div{ display:flex; align-items: center; gap: 12px; }
.studio__data > div::before{
  content:""; width: 6px; height: 6px;
  background: var(--g-4);
}
.studio__data > div.live::before{ background: var(--live); animation: blink 1.6s var(--ease-snap) infinite; }
.studio__data strong{ color: var(--ink); font-weight: 500; }

.studio__title{
  font: 700 clamp(48px, 10vw, 200px)/0.92 var(--sans);
  letter-spacing: -0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
/* .studio__title em styled via shared headline-em rule above */

.studio__channels{
  margin-top: clamp(40px, 6vw, 80px);
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
}
.studio__channel{
  flex: 1; min-width: 240px;
  padding: 28px 24px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column;
  gap: 14px;
  transition: background .3s var(--ease-snap);
}
.studio__channel:last-child{ border-right: 0; }
.studio__channel:hover{ background: var(--g-1); }
.studio__channel-label{ font: 500 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--mid); }
.studio__channel-value{ font: 600 18px/1.2 var(--sans); letter-spacing: -0.02em; color: var(--ink); }
.studio__channel-arrow{ font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); display: inline-flex; gap: 12px; align-items: center; }
.studio__channel-arrow::after{ content: "→"; }

@media(max-width:780px){
  .studio__inner{ grid-template-columns: 1fr; gap: 32px; }
  .studio__channel{ border-right: 0; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  background: var(--b); color: var(--w);
  padding: clamp(60px, 8vw, 100px) var(--pad) 24px;
  position: relative;
  overflow: hidden;
}
.footer__inner{ max-width: var(--max); margin: 0 auto; position: relative; z-index: 2; }
.footer__big{
  font: 700 clamp(80px, 22vw, 320px)/0.85 var(--sans);
  letter-spacing: -0.07em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgba(0,0,0,0.18);
  text-align: center;
  pointer-events: none; -webkit-user-select: none; user-select: none;
  margin-bottom: clamp(40px, 6vw, 80px);
  display: flex; flex-direction: column;        /* DESIGN boven CHECK */
}
.footer__big span{ display: block; }
.footer__top{
  display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--g-10);
}
.footer__brand h3{
  font: 700 clamp(28px, 3vw, 44px)/0.95 var(--sans);
  letter-spacing: -0.04em;
  margin-bottom: 14px;
  text-transform: uppercase;
}
.footer__brand h3 em{
  font-family: 'Neonderthaw', cursive;
  font-style: normal;
  font-weight: 400;
  text-transform: none;                     /* exacte content "Check" — alleen C kapitaal */
  color: #6FB4FF;
  letter-spacing: 0;
  text-shadow:
    0 0  6px rgba(180,220,255,0.85),
    0 0 22px rgba( 80,150,255,0.45);
}
.footer__brand p{ font: 400 13px/1.5 var(--sans); color: var(--g-4); max-width: 32ch; }
.footer__col h4{
  font: 500 11px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase;
  color: var(--g-3); margin-bottom: 18px;
}
.footer__col a, .footer__col p{
  display:block;
  font: 400 13px/1.7 var(--sans);
  color: var(--g-2);
  padding: 4px 0;
  min-height: 24px;
}
.footer__col a:hover{ color: var(--w); }
.footer__bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top: 24px;
  font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--g-3);
  flex-wrap: wrap; gap: 14px;
}
.footer__addr{ margin-top:10px; color: var(--g-3); font-size: 11px; }
.footer__legal{ display:inline-flex; gap: 18px; }
.footer__legal a{ color: var(--g-3); text-decoration: none; }
.footer__legal a:hover{ color: var(--w); }
@media(max-width:880px){ .footer__top{ grid-template-columns: 1fr 1fr; } .footer__brand{ grid-column: span 2; } }