/* ===========================================================
   HIDDE VERDONK — portfolio (v4)
   Pure black and white. Cinematic, minimal, premium. No colour
   accent anywhere. Typography matches eyeforce.nl's own choice
   as closely as a freely-licensed pairing allows: eyeforce sets
   headings in "Rift" (a commercial display face, tall/condensed,
   tight tracking) and body/nav in Roboto. Rift itself isn't
   freely redistributable, so headings here use Oswald instead —
   the nearest legally-free condensed grotesk with the same
   proportions and uppercase display behaviour — paired with the
   same Roboto for body and navigation.
   =========================================================== */

:root{
  --bg:#000000;
  --surface:#0c0c0c;
  --surface-2:#131313;
  --line:#222222;
  --fg:#ffffff;
  --muted:#9a9a9a;
  --faint:#5c5c5c;
  --maxw:1480px;
  --gutter:clamp(18px, 4.2vw, 72px);
  --font-display:"Oswald", "Arial Narrow", sans-serif;
  --font-body:"Roboto", system-ui, -apple-system, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; background:var(--bg); }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,
.nav__mark,.nav__mobile a,
.hero__name,.section__title,.rowblock__title,.card__title,
.step__title,.service__title,.contact__title,
.pdetail__title,.next__title,.etile__title,
.statement__title,.ctaband__title{
  font-family:var(--font-display);
}
img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background:#fff; color:#000; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }

/* -------- nav -------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:80;
  display:flex; align-items:center; justify-content:space-between;
  padding:26px var(--gutter);
  background:linear-gradient(to bottom, rgba(0,0,0,.75), transparent);
  transition:background .35s ease, padding .35s ease;
}
.nav.solid{ background:rgba(0,0,0,.94); backdrop-filter:blur(8px); padding-top:16px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.nav__mark{ font-weight:800; letter-spacing:.01em; font-size:15px; text-transform:uppercase; }
.nav__links{ display:flex; gap:40px; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.nav__links a{ transition:color .2s; }
.nav__links a:hover, .nav__links a.current{ color:var(--fg); }
.nav__burger{ display:none; font-size:12px; letter-spacing:.12em; text-transform:uppercase; }

.nav__mobile{
  display:none; position:fixed; inset:0; z-index:90;
  background:#000; flex-direction:column; justify-content:center; gap:34px;
  padding:0 var(--gutter);
}
.nav__mobile.open{ display:flex; }
.nav__mobile a{ font-size:30px; font-weight:800; text-transform:uppercase; }
.nav__mobile__close{ position:absolute; top:26px; right:var(--gutter); font-size:12px; letter-spacing:.12em; text-transform:uppercase; }

@media (max-width:760px){
  .nav__links{ display:none; }
  .nav__burger{ display:block; }
}

/* -------- hero -------- */
.hero{
  position:relative; height:100svh; min-height:600px;
  display:flex; align-items:flex-end;
  overflow:hidden; background:#000;
}
.hero__media{ position:absolute; inset:0; background:#000; }
.hero__media iframe{
  position:absolute; top:50%; left:50%; width:100%; height:100%;
  min-width:177.78vh; min-height:56.3vw;
  transform:translate(-50%,-50%);
  border:0; pointer-events:none;
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, #000 0%, rgba(0,0,0,.25) 38%, rgba(0,0,0,.05) 60%, rgba(0,0,0,.55) 100%);
}
.hero__content{ position:relative; z-index:2; width:100%; padding:0 var(--gutter) 70px; }
.hero__name{
  font-weight:800; text-transform:uppercase; color:#fff;
  font-size:clamp(44px, 10vw, 128px); line-height:.9; letter-spacing:-.01em;
}
.hero__role{ margin-top:16px; font-size:clamp(13px,2vw,17px); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.hero__actions{ margin-top:38px; display:flex; align-items:center; gap:22px; }
.hero__playbtn{
  width:62px; height:62px; border-radius:50%; border:1px solid rgba(255,255,255,.5);
  display:flex; align-items:center; justify-content:center; transition:all .2s ease; flex:none;
}
.hero__playbtn:hover{ background:#fff; color:#000; }
.hero__playlabel{ font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.hero__down{
  position:absolute; left:var(--gutter); bottom:28px; z-index:2;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:10px;
}
.hero__down svg{ animation:bob 1.8s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(5px);} }

.hero__content > *, .hero__down{
  opacity:0; transform:translateY(16px);
  animation:rise .8s cubic-bezier(.2,.8,.2,1) forwards;
}
.hero__content > *:nth-child(1){ animation-delay:.08s; }
.hero__content > *:nth-child(2){ animation-delay:.2s; }
.hero__content > *:nth-child(3){ animation-delay:.34s; }
.hero__down{ animation-delay:.5s; }
@keyframes rise{ to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){
  .hero__content > *, .hero__down{ animation:none; opacity:1; transform:none; }
  .hero__down svg{ animation:none; }
}

/* -------- section shell -------- */
.section{ padding:110px 0; }
.section--tight{ padding:70px 0; }
.section__head{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; margin-bottom:30px; flex-wrap:wrap; }
.section__kicker{ font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.section__title{ margin-top:8px; font-size:clamp(26px,3.6vw,42px); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; }
.section__more{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.section__more:hover{ color:#fff; }

/* -------- Netflix-style row -------- */
.rowblock{ margin-bottom:64px; scroll-margin-top:110px; }
.rowblock:last-child{ margin-bottom:0; }
.rowblock__head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:18px; padding:0 var(--gutter); }
.rowblock__title{ font-size:clamp(18px,2.2vw,24px); font-weight:800; text-transform:uppercase; letter-spacing:.01em; }
.rowblock__count{ font-size:12px; color:var(--faint); letter-spacing:.06em; }

.rowwrap{ position:relative; }
.row{
  display:flex; gap:14px; overflow-x:auto; scroll-behavior:smooth;
  padding:4px var(--gutter) 18px; scroll-snap-type:x proximity;
  cursor:grab; user-select:none;
  -ms-overflow-style:none; scrollbar-width:none;
}
.row::-webkit-scrollbar{ display:none; }
.row.dragging{ cursor:grabbing; scroll-behavior:auto; }

.rowarrow{
  display:none; position:absolute; top:0; bottom:18px; width:68px; z-index:5;
  align-items:center; justify-content:center;
  background:linear-gradient(to right, #000 15%, transparent);
  opacity:0; transition:opacity .2s ease;
}
.rowarrow--right{ right:0; left:auto; background:linear-gradient(to left, #000 15%, transparent); }
.rowarrow svg{ width:22px; height:22px; }
.rowwrap:hover .rowarrow{ opacity:1; }
@media (hover:hover) and (pointer:fine){ .rowarrow{ display:flex; } }

.card{
  position:relative; flex:0 0 auto; width:min(74vw, 340px);
  aspect-ratio:16/10; border-radius:2px; overflow:hidden;
  background:var(--surface); scroll-snap-align:start;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.card--portrait{ aspect-ratio:3/4; width:min(52vw,230px); }
@media (hover:hover) and (pointer:fine){
  .card:hover{ transform:scale(1.055); z-index:3; }
}
.card__thumb{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.card__noimg{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:var(--surface-2); color:var(--faint); font-size:11px; letter-spacing:.1em; text-transform:uppercase; text-align:center; padding:16px; }
.card__scrim{ position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.25) 48%, transparent 72%); }
.card__body{ position:absolute; left:0; right:0; bottom:0; padding:16px; }
.card__title{ font-size:15.5px; font-weight:800; text-transform:uppercase; line-height:1.15; }
.card__meta{
  margin-top:5px; font-size:11.5px; color:var(--muted); letter-spacing:.02em;
  max-height:0; opacity:0; overflow:hidden; transition:max-height .25s ease, opacity .25s ease;
}
@media (hover:hover) and (pointer:fine){
  .card:hover .card__meta{ max-height:40px; opacity:1; }
}
@media (hover:none){ .card__meta{ max-height:40px; opacity:1; } }
.card__play{
  position:absolute; top:12px; right:12px; width:30px; height:30px; border-radius:50%;
  border:1px solid rgba(255,255,255,.4); display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .2s ease; background:rgba(0,0,0,.3);
}
@media (hover:hover) and (pointer:fine){ .card:hover .card__play{ opacity:1; } }
@media (hover:none){ .card__play{ opacity:1; } }

/* -------- homepage editorial grid (asymmetric, Eyeforce-style) -------- */
.egrid{ display:flex; flex-direction:column; gap:2px; }
.erow{ display:grid; gap:2px; }
.erow--three{ grid-template-columns:repeat(3,1fr); height:clamp(240px,32vw,440px); }
.erow--two-a{ grid-template-columns:2fr 1fr; height:clamp(300px,38vw,540px); }
.erow--two-b{ grid-template-columns:1fr 2fr; height:clamp(300px,38vw,540px); }
@media (max-width:780px){
  .erow--three,.erow--two-a,.erow--two-b{ grid-template-columns:1fr; height:auto; }
  .etile{ aspect-ratio:4/3; }
}
.etile{ position:relative; display:block; overflow:hidden; background:var(--surface); height:100%; }
.etile__media{ position:absolute; inset:0; width:100%; height:100%; }
.etile__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.8,.2,1); }
@media (hover:hover) and (pointer:fine){ .etile:hover .etile__media img{ transform:scale(1.035); } }
.etile__noimg{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:var(--surface-2); color:var(--faint); font-size:11px; letter-spacing:.1em; text-transform:uppercase; text-align:center; padding:16px; }
.etile__scrim{ position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.08) 46%, rgba(0,0,0,.2) 100%); z-index:1; pointer-events:none; }
.etile__play{
  position:absolute; top:18px; right:18px; z-index:2; width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(255,255,255,.5); background:rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .2s ease;
}
@media (hover:hover) and (pointer:fine){ .etile:hover .etile__play{ opacity:1; } }
@media (hover:none){ .etile__play{ opacity:1; } }
.etile__body{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:22px; }
.etile__client{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.etile__title{ margin-top:8px; font-size:clamp(16px,1.9vw,22px); font-weight:800; text-transform:uppercase; line-height:1.15; color:#fff; }

/* -------- content statement block -------- */
/* One open composition — no outer border/frame and no background
   behind the two halves (the panel sits directly on the page's own
   black), with the photo taking a clearly larger share of the width
   and generous whitespace around the text, per your feedback. */
.statement{ display:grid; grid-template-columns:1.3fr 1fr; align-items:center; gap:clamp(28px,5vw,64px); }
.statement__media{ position:relative; aspect-ratio:3/4; overflow:hidden; background:#000; }
.statement__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
.statement__panel{ display:flex; flex-direction:column; justify-content:center; }
.statement__title{ margin-top:0; font-size:clamp(28px,4.4vw,52px); font-weight:800; text-transform:uppercase; line-height:1.04; }
.statement__text{ margin-top:24px; font-size:17px; color:#e6e6e6; max-width:42ch; }
.statement__cta{ margin-top:36px; display:inline-flex; align-self:flex-start; align-items:center; gap:10px; border:1px solid #fff; color:#fff; padding:15px 28px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; border-radius:2px; transition:all .2s; }
.statement__cta:hover{ background:#fff; color:#000; }
@media (max-width:780px){ .statement{ grid-template-columns:1fr; gap:28px; } .statement__media{ aspect-ratio:4/5; } }

/* -------- full-bleed closing CTA band -------- */
/* No crop, no zoom: the image is a normal-flow block at its real
   1920x1080 ratio (width:100%, height:auto) rather than a fixed-
   height object-fit:cover background, so the whole photo is always
   visible, at every viewport width — this intentionally replaces
   the old aspect-ratio/min-height/max-height box. */
.ctaband{ position:relative; width:100%; overflow:hidden; background:#000; }
.ctaband__media{ position:relative; width:100%; aspect-ratio:16/9; background:#000; }
.ctaband__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.ctaband__scrim{ position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.55) 100%); }
.ctaband__content{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 var(--gutter); }
.ctaband__title{ font-size:clamp(22px,6.4vw,76px); font-weight:800; text-transform:uppercase; letter-spacing:-.005em; }
.ctaband__text{ margin-top:clamp(6px,1.6vw,16px); font-size:clamp(12px,1.6vw,16px); color:#ddd; max-width:42ch; }
/* Subtler, more cinematic: underline + arrow rather than a boxed
   button — still clearly a link, just quieter than a standard
   bordered web button. */
.ctaband__cta{ margin-top:clamp(10px,2.6vw,28px); display:inline-flex; align-items:center; gap:8px; color:#fff; font-size:clamp(11px,1.3vw,13px); letter-spacing:.14em; text-transform:uppercase; padding-bottom:5px; border-bottom:1px solid rgba(255,255,255,.5); transition:all .25s ease; }
.ctaband__cta:hover{ border-bottom-color:#fff; gap:14px; }
.ctaband__cta svg{ transition:transform .25s ease; }
.ctaband__cta:hover svg{ transform:translateX(3px); }
@media (max-width:480px){ .ctaband__text{ display:none; } }

/* -------- Instagram line -------- */
.igline{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; padding:34px var(--gutter); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.igline__text{ font-size:15px; color:var(--muted); }
.igline a.igline__link{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; border:1px solid #fff; padding:12px 22px; border-radius:2px; transition:all .2s; }
.igline a.igline__link:hover{ background:#fff; color:#000; }

/* -------- Work-page quick-jump nav -------- */
.worknav{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:20px; }
.worknav a{ font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding-bottom:3px; border-bottom:1px solid transparent; transition:all .2s; white-space:nowrap; }
.worknav a:hover{ color:#fff; border-bottom-color:#fff; }
@media (max-width:760px){ .worknav{ overflow-x:auto; flex-wrap:nowrap; -ms-overflow-style:none; scrollbar-width:none; } .worknav::-webkit-scrollbar{ display:none; } }

/* -------- about / services -------- */
.about{ display:grid; grid-template-columns:1fr 1.3fr; gap:70px; align-items:center; }
.about__photo{ position:relative; aspect-ratio:4/5; background:var(--surface); border:1px solid var(--line); overflow:hidden; }
.about__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.about__text p{ font-size:18px; max-width:46ch; color:#e6e6e6; }
.about__text p + p{ margin-top:18px; }
@media (max-width:780px){ .about{ grid-template-columns:1fr; } }

.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.step__num{ font-size:12px; color:var(--faint); letter-spacing:.1em; }
.step__title{ margin-top:12px; font-size:20px; font-weight:800; text-transform:uppercase; }
.step__text{ margin-top:8px; font-size:14px; color:var(--muted); max-width:28ch; }
@media (max-width:780px){ .steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:460px){ .steps{ grid-template-columns:1fr; } }

.services{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.service{ background:#000; padding:34px 28px; }
.service__title{ font-size:17px; font-weight:800; text-transform:uppercase; }
.service__text{ margin-top:10px; font-size:14px; color:var(--muted); }
@media (max-width:780px){ .services{ grid-template-columns:1fr; } }

/* -------- contact -------- */
.contact__title{ font-size:clamp(34px,7vw,88px); font-weight:800; text-transform:uppercase; max-width:14ch; line-height:.98; }
.contact__text{ margin-top:20px; max-width:50ch; color:var(--muted); font-size:17px; }
.contact__links{ margin-top:38px; display:flex; flex-wrap:wrap; gap:18px; }
.contact__links a{ border:1px solid #fff; padding:16px 26px; border-radius:2px; font-size:13px; letter-spacing:.06em; text-transform:uppercase; transition:all .2s; }
.contact__links a:hover{ background:#fff; color:#000; }

/* -------- footer -------- */
.footer{ padding:50px 0 70px; border-top:1px solid var(--line); margin-top:40px; color:var(--faint); font-size:12px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.footer a:hover{ color:#fff; }

/* -------- project detail -------- */
.pbar{ display:flex; justify-content:flex-start; align-items:center; padding:128px var(--gutter) 0; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.pbar a:hover{ color:#fff; }
.pdetail__title{ font-size:clamp(32px,6.4vw,70px); font-weight:800; text-transform:uppercase; line-height:.98; }
.pdetail__meta{ margin-top:16px; display:flex; gap:22px; flex-wrap:wrap; font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.pdetail__text{ margin-top:28px; max-width:640px; font-size:17px; color:#e6e6e6; }
.pdetail__credits{ margin-top:22px; display:flex; flex-wrap:wrap; gap:10px; }
.pdetail__credits span{ font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:8px 16px; }
.pdetail__attr{ margin-top:18px; font-size:13px; color:var(--faint); line-height:1.7; }
.related__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; margin-top:28px; }
.related__grid .card{ width:100%; }

.playerwrap{ margin-top:44px; aspect-ratio:16/9; background:#000; border:1px solid var(--line); position:relative; overflow:hidden; border-radius:2px; }
.player-facade{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background-size:cover; background-position:center; cursor:pointer; }
.player-facade__play{ width:74px; height:74px; border-radius:50%; background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.55); display:flex; align-items:center; justify-content:center; transition:all .2s; }
.player-facade:hover .player-facade__play{ background:#fff; color:#000; }
.playerwrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.next{ margin-top:100px; border-top:1px solid var(--line); padding-top:34px; }
.next__label{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.next__title{ margin-top:12px; font-size:clamp(26px,5vw,48px); font-weight:800; text-transform:uppercase; }

/* -------- lightbox -------- */
.lightbox{
  position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.96);
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox__inner{ width:100%; max-width:1100px; }
.lightbox__frame{ position:relative; width:100%; aspect-ratio:16/9; background:#000; }
.lightbox__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.lightbox__meta{ margin-top:18px; display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:10px; color:var(--muted); font-size:13px; letter-spacing:.05em; text-transform:uppercase; }
.lightbox__meta strong{ color:#fff; font-size:15px; }
.lightbox__close{
  position:absolute; top:28px; right:28px; width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(255,255,255,.4); display:flex; align-items:center; justify-content:center;
}
.lightbox__close:hover{ background:#fff; color:#000; }

.note{ font-size:13px; color:var(--faint); margin-top:10px; }