/* ============================================================
   DE VLIEGENDE CAMERAMAN — site.css
   Cinema Black · Signal Red · Poppins/Lato · HUD-vernacular
   Motion: transform/opacity only, expo-out, reduced-motion safe
   ============================================================ */

:root{
  --black:#000000;
  --deep:#0B0B0B;
  --panel:#121212;
  --white:#FFFFFF;
  --red:#FF0000;
  --red-press:#D90000;
  --blue:#046BD2;
  --slate:#334155;
  --graphite:#69727D;
  --mist:#C7C7C7;
  --off:#FAF9F5;

  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.2);
  --ink-2:rgba(255,255,255,.72);
  --ink-3:rgba(255,255,255,.56);

  /* Chakra Petch: the one characterful voice, used only at true headline
     scale — its cut corners echo the HUD/cockpit language without ever
     touching dense UI text. Hanken Grotesk carries everything people read
     at length. JetBrains Mono is the single technical voice for flight
     data, reused everywhere instead of mixing multiple label styles. */
  --font-display:'Chakra Petch',sans-serif;
  --font-body:'Hanken Grotesk',sans-serif;
  --font-mono:'JetBrains Mono',monospace;

  --fs-hero:clamp(3.1rem,8.6vw,7.2rem);
  --fs-h2:clamp(2rem,4.4vw,3.4rem);
  --fs-h3:clamp(1.15rem,1.9vw,1.45rem);
  --fs-lede:clamp(1.05rem,1.5vw,1.25rem);

  --pad-section:clamp(88px,11vw,160px);
  --pad-x:clamp(20px,4.5vw,56px);
  --wrap:1360px;

  --r-s:4px; --r-m:8px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-1:.25s; --dur-2:.6s;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

body{
  background:var(--black);
  color:var(--white);
  font-family:var(--font-body);
  font-size:16.5px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:none;color:inherit;cursor:pointer}
::selection{background:var(--red);color:var(--white)}

/* thin, dark, unobtrusive — matches the cockpit chrome instead of the
   default OS scrollbar */
html{scrollbar-color:#2c2c2c var(--black);scrollbar-width:thin}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:var(--black)}
::-webkit-scrollbar-thumb{background:#2c2c2c;border-radius:5px;border:2px solid var(--black);background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:#3d3d3d;background-clip:padding-box}

:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:2px}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.1;letter-spacing:-.02em}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}
.section-pad{padding-top:var(--pad-section);padding-bottom:var(--pad-section);position:relative;scroll-margin-top:110px}

.mono{font-family:var(--font-mono);font-weight:400;letter-spacing:.08em}

.skip-link{
  position:fixed;top:-60px;left:16px;z-index:300;background:var(--red);color:#fff;
  font-family:var(--font-body);font-weight:600;font-size:.85rem;padding:12px 20px;border-radius:var(--r-s);
  transition:top var(--dur-1) var(--ease-out);
}
.skip-link:focus{top:16px}

/* ---------- text roles ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--font-mono);font-weight:500;font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
}
/* A small reticle mark instead of the generic template dash — a viewfinder
   crosshair fits a camera/drone brand and reads as deliberate, not decorative. */
.eyebrow::before{
  content:"";width:9px;height:9px;flex:none;
  background:
    linear-gradient(var(--red),var(--red)) center/100% 1.5px no-repeat,
    linear-gradient(var(--red),var(--red)) center/1.5px 100% no-repeat;
}
.eyebrow.on-light{color:var(--graphite)}

.lede{
  font-family:var(--font-body);font-weight:400;font-size:var(--fs-lede);
  line-height:1.65;color:var(--ink-2);
}
.body-copy{color:var(--ink-2)}
.section-title{font-size:var(--fs-h2);color:var(--white)}
.accent{color:var(--red)}

.pull-quote{
  font-family:var(--font-display);font-weight:600;font-size:1.3rem;line-height:1.4;
  padding-left:22px;border-left:2px solid var(--red);color:var(--white);letter-spacing:-.005em;
}

/* ---------- buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-body);font-weight:600;font-size:.95rem;letter-spacing:.005em;
  padding:16px 30px;border-radius:6px;cursor:pointer;white-space:nowrap;
  transition:transform var(--dur-1) var(--ease-out),background-color var(--dur-1) var(--ease-out),
             border-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out);
  will-change:transform;
}
.btn svg{width:18px;height:18px;flex:none}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 12px 32px -12px rgba(255,0,0,.55)}
.btn-primary:hover{background:var(--red-press);transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--line-strong);color:#fff;background:rgba(255,255,255,0)}
.btn-ghost:hover{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.06);transform:translateY(-2px)}
.btn-dark{background:var(--black);color:#fff}
.btn-dark:hover{background:#1c1c1c;transform:translateY(-2px)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:120;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px var(--pad-x);
  transition:transform .45s var(--ease-out),background-color .45s var(--ease-out),
             padding .45s var(--ease-out),border-color .45s var(--ease-out);
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  background:rgba(0,0,0,.72);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  padding-top:14px;padding-bottom:14px;
  border-bottom-color:var(--line);
}
.nav.is-hidden{transform:translateY(-100%)}
.logo-mark{height:20px;width:auto}

.nav-links{display:flex;list-style:none;gap:6px}
.nav-links a{
  position:relative;display:inline-block;padding:8px 14px;
  font-family:var(--font-body);font-weight:600;font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
  transition:color var(--dur-1) var(--ease-out);
}
.nav-links a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:2px;height:1px;
  background:var(--white);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease-out);
}
.nav-links a:hover{color:var(--white)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-links a.active{color:var(--white)}

.nav-cta .btn{padding:12px 22px;font-size:.82rem}

.nav-burger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;align-items:center;z-index:130;
}
.nav-burger span{width:22px;height:2px;background:#fff;transition:transform .35s var(--ease-out),opacity .25s}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mobile menu */
.mobile-menu{
  position:fixed;inset:0;z-index:110;background:var(--black);
  display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad-x);
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease-out),visibility 0s .4s;
}
.mobile-menu.is-open{opacity:1;visibility:visible;transition:opacity .4s var(--ease-out)}
.mobile-menu a.mm-link{
  font-family:var(--font-display);font-weight:600;font-size:clamp(2rem,9vw,3.2rem);
  letter-spacing:-.02em;padding:10px 0;color:var(--white);display:flex;align-items:baseline;gap:18px;
  transform:translateY(28px);opacity:0;
  transition:transform .55s var(--ease-out),opacity .55s var(--ease-out),color .2s;
}
.mobile-menu.is-open a.mm-link{transform:translateY(0);opacity:1}
.mobile-menu a.mm-link:hover{color:var(--mist)}
.mobile-menu a.mm-link .mm-num{font-family:var(--font-mono);font-size:.8rem;color:var(--red)}
.mobile-menu .mm-foot{position:absolute;bottom:32px;left:var(--pad-x);right:var(--pad-x);
  display:flex;flex-direction:column;gap:8px;font-family:var(--font-mono);font-size:.72rem;color:var(--ink-3);letter-spacing:.1em}

/* ============================================================
   HERO + HUD
   ============================================================ */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding:120px 0 clamp(64px,9vh,110px);overflow:hidden;background:var(--black);
}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.35) 45%,rgba(0,0,0,.55) 100%);
}
.video-cover{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.video-cover iframe{
  position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;
  min-height:100%;min-width:177.78vh;transform:translate(-50%,-50%);
  border:0;
}
.hero-grain{position:absolute;inset:0;z-index:2;opacity:.05;pointer-events:none;mix-blend-mode:overlay}

.hero-content{position:relative;z-index:3;width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad-x)}

.hero-title{
  font-size:var(--fs-hero);font-weight:700;letter-spacing:-.035em;line-height:1.0;
  color:var(--white);
}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero-title .word{display:inline-block;will-change:transform}

.badge-pill{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);border:1px solid var(--line-strong);border-radius:100px;padding:9px 18px;
  background:rgba(0,0,0,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.badge-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--red);animation:rec-blink 1.6s steps(2) infinite}
@keyframes rec-blink{50%{opacity:.25}}

.hero-badges{display:flex;gap:26px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.hero-badges span{display:inline-flex;align-items:center;gap:9px}
.hero-badges span::before{content:"";width:5px;height:5px;background:var(--red);transform:rotate(45deg);flex:none}

/* HUD overlay (hero-scoped) */
.hud{position:absolute;inset:96px clamp(14px,2.4vw,30px) clamp(14px,2.4vw,30px);z-index:4;pointer-events:none;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;color:rgba(255,255,255,.55);text-transform:uppercase}
.hud .corner{position:absolute;width:26px;height:26px;border:1px solid rgba(255,255,255,.35)}
.hud .corner.tl{top:0;left:0;border-right:0;border-bottom:0}
.hud .corner.tr{top:0;right:0;border-left:0;border-bottom:0}
.hud .corner.bl{bottom:0;left:0;border-right:0;border-top:0}
.hud .corner.br{bottom:0;right:0;border-left:0;border-top:0}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee-wrap{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:34px 0;overflow:hidden;position:relative;background:var(--black);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{display:flex;align-items:center;gap:clamp(48px,6vw,96px);width:max-content;
  animation:marquee 44s linear infinite}
.marquee-track img{height:26px;width:auto;opacity:.55;filter:grayscale(1) brightness(2.4);
  transition:opacity var(--dur-1)}
.marquee-wrap:hover .marquee-track{animation-play-state:paused}
.marquee-wrap:hover .marquee-track img{opacity:.85}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ============================================================
   STATEMENT (scroll-scrub words)
   ============================================================ */
.statement{max-width:1080px}
.statement p{
  font-family:var(--font-display);font-weight:500;letter-spacing:-.02em;
  font-size:clamp(1.7rem,3.6vw,3rem);line-height:1.3;color:var(--white);
}
.statement .w{opacity:.14;display:inline-block}
.statement .w.hi{color:var(--red)}
html:not(.js) .statement .w{opacity:1}

.stat-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:clamp(56px,8vw,96px);
}
.stat-row.cols-3{grid-template-columns:repeat(3,1fr)}
.stat-cell{background:var(--black);padding:30px 26px}
.stat-cell .k{font-family:var(--font-display);font-weight:700;font-size:clamp(1.7rem,2.6vw,2.4rem);letter-spacing:-.03em;color:var(--white)}
.stat-cell .k sup{color:var(--red);font-size:.6em}
.stat-cell .v{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-top:8px}

/* ============================================================
   SECTION HEAD
   ============================================================ */
.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:32px;
  margin-bottom:clamp(40px,6vw,72px);flex-wrap:wrap;
}
.section-head .section-title{margin-top:16px}

/* ============================================================
   WORK GRID
   ============================================================ */
.work-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,1.6vw,22px)}
.work-card{
  position:relative;display:block;overflow:hidden;border-radius:var(--r-m);
  background:var(--panel);grid-column:span 6;aspect-ratio:16/10;
  transform:translateZ(0);
}
.work-card.wide{grid-column:span 12;aspect-ratio:21/9}
.work-card.tall-l{grid-column:span 7}
.work-card.tall-r{grid-column:span 5;aspect-ratio:auto}
.work-card.third{grid-column:span 4}
.work-card img{width:100%;height:100%;object-fit:cover;
  transition:transform 1s var(--ease-out);will-change:transform}
.work-card .video-cover{position:absolute;inset:0}
.work-card::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.08) 52%);
  pointer-events:none;
}
.work-card:hover img{transform:scale(1.055)}
.work-meta{position:absolute;left:26px;right:26px;bottom:22px;z-index:2}
.work-kicker{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.2em;color:rgba(255,255,255,.66);text-transform:uppercase}
.work-title{
  font-family:var(--font-display);font-weight:600;letter-spacing:-.015em;
  font-size:clamp(1.05rem,1.7vw,1.45rem);line-height:1.25;color:#fff;margin-top:8px;max-width:34rem;
}
.work-card .work-play{
  position:absolute;top:20px;right:20px;z-index:2;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;background:rgba(0,0,0,.5);border:1px solid var(--line-strong);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background-color var(--dur-1) var(--ease-out),transform .35s var(--ease-out);
}
.work-card .work-play svg{width:15px;height:15px;fill:#fff;margin-left:2px}
.work-card:hover .work-play{background:var(--red);transform:scale(1.08)}

/* Explore indicator for tiles that link straight to a real page rather
   than a video (e.g. a service page) — same slot as .work-play, an arrow
   instead of a play triangle. */
.work-card .work-arrow{
  position:absolute;top:20px;right:20px;z-index:2;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;background:rgba(0,0,0,.5);border:1px solid var(--line-strong);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;
  transition:background-color var(--dur-1) var(--ease-out),transform .35s var(--ease-out);
}
.work-card .work-arrow svg{width:17px;height:17px}
.work-card:hover .work-arrow{background:var(--red);transform:scale(1.08) rotate(45deg)}

/* Not-yet-built category — same tile language, honestly muted rather than
   faked with borrowed footage. */
.work-card.is-soon img{filter:grayscale(.5) brightness(.55)}
.work-card.is-soon:hover img{transform:none}
/* Badge chrome applies to any card (real photo awaiting release, or a true
   placeholder) — dimming is the separate .is-soon-only treatment above. */
.work-card .soon-badge{
  position:absolute;top:20px;right:20px;z-index:2;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;border:1px solid var(--line-strong);border-radius:100px;padding:7px 14px;
  background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}

/* Visible editorial marker for facts that still need verification — meant
   to be seen by De Vliegende Cameraman while reviewing, not final copy. */
.te-controleren{
  display:inline-block;font-family:var(--font-mono);font-weight:600;font-size:.72em;
  letter-spacing:.08em;color:#000;background:#FFD400;padding:1px 7px;border-radius:3px;
  vertical-align:1px;white-space:nowrap;
}

/* ============================================================
   FILM CATALOGUE — editorial case list, not a busy grid.
   Posters stay static; video only wakes up on hover (fine pointer).
   ============================================================ */
.film-catalogue{display:flex;flex-direction:column;gap:clamp(56px,7vw,88px)}
.film-entry{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(28px,4vw,56px);align-items:center}
.film-entry.small{grid-template-columns:1fr 1.3fr}
.film-entry:nth-child(even){grid-template-columns:1fr 1.5fr}
.film-entry:nth-child(even) .film-media{order:2}
.film-entry:nth-child(even) .film-info{order:1}

.film-media{
  position:relative;display:block;overflow:hidden;border-radius:var(--r-m);
  background:var(--panel);aspect-ratio:16/10;border:1px solid var(--line);
}
.film-media img,.film-media .video-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;overflow:hidden}
.film-media::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(0,0,0,.5) 0%,rgba(0,0,0,.05) 55%);pointer-events:none;
}
.film-media img{transition:transform 1.1s var(--ease-out)}
.film-entry:hover .film-media img{transform:scale(1.04)}
.film-play{
  position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;z-index:2;
  display:grid;place-items:center;background:rgba(0,0,0,.45);border:1px solid var(--line-strong);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background-color var(--dur-1) var(--ease-out),transform .35s var(--ease-out),opacity .3s;
}
.film-play svg{width:19px;height:19px;fill:#fff;margin-left:3px}
.film-entry:hover .film-play{background:var(--red);transform:scale(1.08)}
.film-media.is-live .film-play{opacity:0}

.film-kicker{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;color:var(--red);text-transform:uppercase}
.film-title{font-size:clamp(1.5rem,2.6vw,2.2rem);margin-top:12px;color:var(--white)}
.film-line{font-family:var(--font-body);font-size:1rem;line-height:1.7;color:var(--ink-2);margin-top:16px;max-width:36rem}
.film-link{
  display:inline-flex;align-items:center;gap:8px;margin-top:22px;
  font-family:var(--font-body);font-weight:600;font-size:.92rem;color:var(--white);
  border-bottom:1px solid var(--line-strong);padding-bottom:4px;
  transition:border-color var(--dur-1) var(--ease-out),gap var(--dur-1) var(--ease-out);
}
.film-link svg{width:16px;height:16px}
.film-entry:hover .film-link{border-color:var(--red);gap:12px}

@media (max-width:860px){
  .film-entry,.film-entry.small,.film-entry:nth-child(even){grid-template-columns:1fr}
  .film-entry:nth-child(even) .film-media,.film-entry:nth-child(even) .film-info{order:initial}
}

/* ============================================================
   SERVICES
   ============================================================ */
.service-list{border-top:1px solid var(--line)}
.service-row{
  position:relative;display:grid;grid-template-columns:72px 1.1fr 1.6fr 60px;
  align-items:center;gap:clamp(16px,3vw,48px);
  padding:clamp(26px,3.4vw,40px) 8px;border-bottom:1px solid var(--line);
}
a.service-row{cursor:pointer}
.service-row::before{
  content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,0,0,.07),transparent 55%);
  opacity:0;transition:opacity var(--dur-2) var(--ease-out);pointer-events:none;
}
.service-row:hover::before{opacity:1}
.service-num{font-family:var(--font-mono);font-size:.78rem;color:var(--ink-3);letter-spacing:.1em;
  transition:color var(--dur-1)}
.service-row:hover .service-num{color:var(--red)}
.service-name{
  font-family:var(--font-display);font-weight:600;font-size:clamp(1.25rem,2.4vw,1.8rem);
  letter-spacing:-.02em;color:var(--white);transition:transform .45s var(--ease-out);
}
.service-row:hover .service-name{transform:translateX(10px)}
.service-desc{font-size:.95rem;color:var(--ink-2);max-width:34rem}
.service-desc .more{color:var(--red);white-space:nowrap}
.service-arrow{width:26px;height:26px;color:var(--white);justify-self:end;
  opacity:0;transform:translateX(-12px);
  transition:opacity .35s var(--ease-out),transform .35s var(--ease-out)}
.service-row:hover .service-arrow{opacity:1;transform:translateX(0)}


/* ============================================================
   PROCESS / FLIGHT PLAN (light band)
   ============================================================ */
.band-light{background:var(--off);color:var(--slate)}
.band-light .section-title{color:var(--black)}
.band-light .body-copy{color:var(--slate)}

/* A literal descent: each waypoint sits a step lower than the last, like a
   glideslope into the final stop. No connecting line needed — the stagger
   itself reads as a flight path. Pure typography and rhythm, no card chrome. */
.flightplan{position:relative;margin-top:clamp(56px,7vw,88px)}

.process-grid{
  position:relative;display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(20px,3vw,32px);
}
.process-step{padding-top:28px;border-top:1px solid rgba(22,22,22,.14)}
.process-step:nth-child(1){margin-top:0}
.process-step:nth-child(2){margin-top:clamp(20px,3vw,34px)}
.process-step:nth-child(3){margin-top:clamp(40px,6vw,68px)}
.process-step:nth-child(4){margin-top:clamp(60px,9vw,102px)}
.process-step .wp{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.2em;color:var(--red);
  display:inline-flex;align-items:center;gap:8px;text-transform:uppercase;
}
.process-step .wp::before{content:"";width:14px;height:1.5px;background:var(--red);flex:none}
.process-step h3{font-size:1.15rem;font-weight:600;letter-spacing:-.015em;color:var(--black);margin-top:14px}
.process-step p{font-size:.95rem;line-height:1.65;color:var(--slate);margin-top:10px;max-width:22rem}

@media (max-width:1080px){
  .process-step:nth-child(2),.process-step:nth-child(3),.process-step:nth-child(4){margin-top:0}
}

/* ============================================================
   ABOUT TEASER
   ============================================================ */
.about-teaser{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,6vw,96px);align-items:center}
.about-figure{
  position:relative;aspect-ratio:4/5;border-radius:var(--r-m);overflow:hidden;
  background:#000;display:flex;align-items:flex-end;justify-content:flex-start;
  border:1px solid var(--line);
}
.about-figure img.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.08)}
.about-figure::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.68),transparent 48%)}
.about-figure .tag{
  position:absolute;left:22px;bottom:20px;z-index:2;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.2em;color:rgba(255,255,255,.7);text-transform:uppercase;
}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band{
  position:relative;text-align:center;padding:clamp(72px,10vw,130px) var(--pad-x);
  border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;
  background:
    radial-gradient(900px 460px at 50% 118%,rgba(255,0,0,.16),transparent 62%),
    var(--deep);
}
.cta-band .eyebrow{justify-content:center}
.cta-band .eyebrow::before{display:none}
.btn-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:40px}

/* ============================================================
   FOOTER
   ============================================================ */
footer{border-top:1px solid var(--line);background:var(--black);padding:clamp(64px,8vw,100px) 0 36px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:clamp(32px,4vw,64px)}
.footer-col h4{
  font-family:var(--font-mono);font-weight:500;font-size:.68rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:20px;
}
.footer-col a,.footer-col span{
  display:block;font-size:.95rem;color:var(--ink-2);padding:5px 0;
  transition:color var(--dur-1),transform var(--dur-1) var(--ease-out);
}
.footer-col a:hover{color:var(--white);transform:translateX(4px)}
.social-row{display:flex;gap:10px;margin-top:24px}
.social-row a{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line-strong);
  display:grid;place-items:center;padding:0;
  transition:background-color var(--dur-1),border-color var(--dur-1),transform var(--dur-1) var(--ease-out);
}
.social-row a svg{width:17px;height:17px;fill:var(--ink-2);transition:fill var(--dur-1)}
.social-row a:hover{background:var(--red);border-color:var(--red);transform:translateY(-3px)}
.social-row a:hover svg{fill:#fff}
.footer-bottom{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--line);margin-top:clamp(44px,6vw,72px);padding-top:28px;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;color:var(--ink-3);
}

/* ============================================================
   SUBPAGE HERO
   ============================================================ */
.page-hero{
  position:relative;padding:calc(110px + 6vh) 0 clamp(56px,7vw,88px);overflow:hidden;background:var(--black);
}
.page-hero.has-media{min-height:82svh;display:flex;flex-direction:column;justify-content:flex-end}
.page-hero .video-cover::after,
.page-hero .img-cover::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.94) 8%,rgba(0,0,0,.42) 55%,rgba(0,0,0,.6) 100%);
}
.page-hero .img-cover{position:absolute;inset:0;pointer-events:none}
.page-hero .img-cover img{width:100%;height:100%;object-fit:cover}
.page-hero > .wrap{position:relative;z-index:2;width:100%}

.breadcrumb{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:clamp(24px,4vw,44px);
}
.breadcrumb a{transition:color var(--dur-1)}
.breadcrumb a:hover{color:var(--white)}
.breadcrumb .sep{color:var(--red)}
.breadcrumb .here{color:var(--ink-2)}

.page-title{font-size:clamp(2.5rem,6vw,4.6rem);letter-spacing:-.03em;line-height:1.03}

.meta-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:clamp(36px,5vw,60px);
}
.meta-item{background:rgba(0,0,0,.72);padding:22px 24px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.meta-item .label{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.meta-item .val{font-family:var(--font-body);font-weight:600;font-size:1rem;color:var(--white);margin-top:8px;line-height:1.4}

/* ---------- case media ---------- */
.case-media{
  position:relative;border-radius:var(--r-m);overflow:hidden;aspect-ratio:16/8.2;background:var(--panel);
  display:block;width:100%;border:0;padding:0;text-align:left;font:inherit;color:inherit;cursor:pointer;
}
.case-media img{width:100%;height:112%;object-fit:cover;will-change:transform}
.case-media .case-play{
  position:absolute;inset:0;margin:auto;width:88px;height:88px;border-radius:50%;z-index:2;
  display:grid;place-items:center;background:rgba(0,0,0,.45);border:1px solid var(--line-strong);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background-color var(--dur-1),transform .4s var(--ease-out);
}
.case-media .case-play svg{width:26px;height:26px;fill:#fff;margin-left:4px}
.case-media:hover .case-play{background:var(--red);transform:scale(1.06)}

.case-cols{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(32px,6vw,96px);align-items:start}
.case-body p + p{margin-top:1.2em}
.case-body{font-size:1.05rem}

/* ---------- full-width editorial section: text + image side by side, alternating ---------- */
/* Used once a case's narrative outgrows the case-cols aside, so the page stops
   dragging a lone text column beside empty space and uses the full .wrap width. */
.case-full{max-width:none}
.case-feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);align-items:center;margin-top:clamp(32px,4.5vw,56px)}
.case-feature--reverse .case-feature-media{order:-1}
.case-breakout{margin-top:clamp(32px,4.5vw,56px)}
@media (max-width:760px){
  .case-feature{grid-template-columns:1fr;gap:24px}
  .case-feature--reverse .case-feature-media{order:0}
  .case-feature-media{max-width:none !important;justify-self:stretch !important}
}

/* ---------- .frame: reusable photo/video frame (border, radius, cover-fill) ---------- */
/* Base rule works anywhere; .case-gallery just supplies the default 4:3 ratio
   when a specific instance doesn't set its own aspect-ratio inline. */
.frame{
  position:relative;border-radius:var(--r-m);overflow:hidden;border:1px solid var(--line);
  background:var(--panel);
}
.frame img{width:100%;height:100%;object-fit:cover;display:block}
.case-gallery .frame{aspect-ratio:4/3}

/* ---------- editorial gallery: real crew/location photos, not stock ---------- */
.case-gallery{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(16px,2.4vw,26px)}
.case-gallery figure{position:relative}
.case-gallery figcaption{
  margin-top:14px;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
}
@media (max-width:760px){.case-gallery{grid-template-columns:1fr;gap:32px}}

/* ============================================================
   STEPS (dienst) — vertical flight line
   ============================================================ */
.step-list{position:relative;margin-top:8px}
.step-list::before{
  content:"";position:absolute;left:27px;top:10px;bottom:10px;width:1px;
  background:repeating-linear-gradient(to bottom,var(--line-strong) 0 5px,transparent 5px 12px);
}
.step-row{
  position:relative;display:grid;grid-template-columns:56px 1fr;gap:clamp(20px,3vw,44px);
  padding:clamp(24px,3vw,36px) 0;
}
.step-row .step-num{
  position:relative;z-index:1;width:56px;height:56px;border-radius:50%;
  border:1px solid var(--line-strong);background:var(--black);
  display:grid;place-items:center;
  font-family:var(--font-mono);font-size:.74rem;color:var(--ink-2);letter-spacing:.08em;
  transition:border-color var(--dur-2),color var(--dur-2);
}
.step-row:hover .step-num{border-color:var(--red);color:var(--red)}
.step-row h3{font-size:var(--fs-h3);font-weight:600;letter-spacing:-.015em;padding-top:8px}
.step-row p{color:var(--ink-2);margin-top:10px;max-width:44rem}

/* tighter variant for use in a narrow sidebar (e.g. contact page) so the
   column doesn't stretch far past the content next to it */
.step-list.compact::before{left:19px}
.step-list.compact .step-row{grid-template-columns:40px 1fr;gap:16px;padding:14px 0}
.step-list.compact .step-num{width:40px;height:40px;font-size:.68rem}
.step-list.compact h3{padding-top:2px}
.step-list.compact p{margin-top:2px}

/* ============================================================
   PRODUCTIECONFIGURATIES — no SaaS-style tiers or "featured" ribbon,
   just three approaches matched to the space.
   ============================================================ */
.package-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);align-items:stretch;margin-top:10px}
.package-card{
  position:relative;border:1px solid var(--line);border-radius:var(--r-m);
  background:var(--deep);padding:36px 32px 38px;display:flex;flex-direction:column;gap:14px;
  transition:transform .5s var(--ease-out),border-color .5s var(--ease-out);
}
.package-card:hover{transform:translateY(-6px);border-color:var(--line-strong)}
.package-tier{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3)}
.package-card h3{font-size:1.3rem;font-weight:600;letter-spacing:-.015em}
.package-card .cam{
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.1em;color:var(--ink-2);
  border:1px solid var(--line);border-radius:100px;padding:7px 14px;align-self:flex-start;
}
.package-card p{font-size:.94rem;color:var(--ink-2)}

/* ---------- example strip ---------- */
.example-list{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,4vw,64px);border-top:1px solid var(--line)}
.example-item{
  display:flex;align-items:baseline;gap:16px;padding:20px 4px;border-bottom:1px solid var(--line);
  font-family:var(--font-body);font-weight:500;font-size:1.02rem;color:var(--ink-2);
}
.example-item .dot{width:6px;height:6px;background:var(--red);transform:rotate(45deg);flex:none;position:relative;top:-2px}
/* Distinguishes a video-lightbox trigger from a case-page link inside the
   same list — otherwise both just look like plain underlined text and a
   visitor can't tell whether a click plays a video or leaves the page. */
.example-item .tag{
  display:inline-flex;align-items:center;gap:4px;margin-left:8px;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--red);white-space:nowrap;vertical-align:1px;
}
.example-item .tag svg{width:9px;height:9px;flex:none}

/* ---------- FAQ ---------- */
.faq-list{border-top:1px solid var(--line)}
.faq-item{
  display:grid;grid-template-columns:1.1fr 1.6fr;gap:clamp(16px,3vw,48px);
  padding:clamp(24px,3vw,32px) 4px;border-bottom:1px solid var(--line);
}
.faq-item h3{font-size:1.15rem;font-weight:600;letter-spacing:-.015em;color:var(--white)}
.faq-item p{color:var(--ink-2);font-size:.98rem;max-width:38rem}
@media (max-width:760px){.faq-item{grid-template-columns:1fr;gap:8px}}

/* ---------- CONTACT FORM ---------- */
.contact-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(32px,5vw,80px)}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:560px){.form-row{grid-template-columns:1fr}}

.form-field{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.form-field label{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
}
.form-field label .opt{
  font-family:var(--font-body);font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink-3);
}
.form-field input,.form-field textarea,.form-field select{
  width:100%;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-s);
  color:var(--white);font-family:var(--font-body);font-size:.95rem;padding:13px 16px;
  transition:border-color .2s ease,background .2s ease;
}
.form-field textarea{resize:vertical;min-height:110px}
.form-field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:44px;
}
.form-field input::placeholder,.form-field textarea::placeholder{color:var(--ink-3)}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{
  outline:none;border-color:var(--red);background:#161616;
}
.form-note{font-size:.85rem;color:var(--ink-3);margin-top:14px;max-width:36rem}
.form-note a{color:inherit;text-decoration:underline}

.contact-success{
  border:1px solid var(--line);border-radius:var(--r-m);padding:clamp(32px,4vw,48px);background:var(--panel);
}
.contact-success h3{font-size:1.3rem;font-weight:600;letter-spacing:-.015em;margin-bottom:10px}
.contact-success p{color:var(--ink-2)}

.contact-info{border:1px solid var(--line);border-radius:var(--r-m);padding:clamp(24px,3vw,32px);background:var(--panel)}
.contact-info h3{font-size:1.1rem;font-weight:600;letter-spacing:-.01em;margin-bottom:18px}
.contact-info-row{padding:16px 0;border-top:1px solid var(--line)}
.contact-info-row:first-of-type{border-top:none}
.contact-info-row .label{
  display:block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:6px;
}
.contact-info-row a,.contact-info-row .val{color:var(--white);font-weight:500;font-size:.98rem}
.contact-info-row a:hover{color:var(--red)}

/* honest stand-in for a photo that hasn't been delivered yet — no borrowed
   unrelated imagery, just a clear label so it reads as "coming", not broken */
.photo-placeholder{
  position:relative;border:1px dashed var(--line-strong);border-radius:var(--r-m);
  background:var(--panel);display:flex;align-items:center;justify-content:center;
  text-align:center;padding:32px;
}
.photo-placeholder span{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}

/* ============================================================
   INTRO — portal opening on the REC dot (home, fresh entry/reload only)
   Gated by html.show-intro; hidden entirely otherwise so it never flashes.
   ============================================================ */
.dvc-logo-intro{
  --dvc-intro-black:#000000;
  --dvc-intro-white:#ffffff;
  --dvc-intro-red:#FF0000;
  --dvc-portal-x:50vw;
  --dvc-portal-y:50vh;
  --dvc-portal-dot-size:16px;
  display:none;position:fixed;inset:0;z-index:210;overflow:hidden;
  pointer-events:none;isolation:isolate;
}
html.show-intro .dvc-logo-intro{display:block}
body.dvc-intro-active{overflow:hidden}

/* Het zwarte vlak met het groeiende gat. Dit was een element dat van 1px naar
   320vmax groeide (width/height), en Google telde die groei als layout shift
   (CLS 0,38). Nu staat het vlak vast op schermgrootte en groeit alleen het gat
   in een masker, via een geregistreerde eigenschap. Daardoor verspringt er niets,
   en het ziet er hetzelfde uit. Zonder @property-ondersteuning opent het gat
   in één keer, wat bij een intro van een seconde niet storend is. */
@property --dvc-hole{syntax:'<length>';inherits:false;initial-value:0px}
.dvc-intro-portal{
  position:absolute;inset:0;z-index:0;background:var(--dvc-intro-black);
  --dvc-hole:0px;
  -webkit-mask-image:radial-gradient(circle at var(--dvc-portal-x) var(--dvc-portal-y),transparent var(--dvc-hole),#000 calc(var(--dvc-hole) + 1px));
  mask-image:radial-gradient(circle at var(--dvc-portal-x) var(--dvc-portal-y),transparent var(--dvc-hole),#000 calc(var(--dvc-hole) + 1px));
  transition:--dvc-hole 1500ms cubic-bezier(.76,0,.24,1);
}
.dvc-intro-portal-ring{
  position:absolute;left:var(--dvc-portal-x);top:var(--dvc-portal-y);z-index:2;
  width:var(--dvc-portal-dot-size);height:var(--dvc-portal-dot-size);
  border:1.5px solid rgba(255,26,18,.88);border-radius:50%;opacity:0;
  box-shadow:0 0 12px rgba(255,26,18,.62),inset 0 0 8px rgba(255,26,18,.38);
  transform:translate3d(-50%,-50%,0) scale(.72);will-change:opacity,transform;
}
.dvc-intro-stage{
  position:absolute;inset:0;z-index:1;display:grid;place-items:center;
  opacity:1;transform:scale(1);filter:blur(0);
  transition:opacity 620ms ease,transform 900ms cubic-bezier(.65,0,.35,1),filter 720ms ease;
  transform-origin:var(--dvc-portal-x) var(--dvc-portal-y);will-change:opacity,transform,filter;
}
.dvc-wordmark{display:block;width:min(48vw,800px);max-height:28vh;overflow:visible;color:var(--dvc-intro-white)}
.dvc-wordmark__letters{opacity:0;transition:opacity 400ms ease-out;will-change:opacity}
.dvc-letter{fill:currentColor}
.dvc-logo-intro.is-playing .dvc-wordmark__letters{opacity:1}

.dvc-rec-dot{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.58);will-change:opacity,transform}
.dvc-rec-dot__halo{fill:var(--dvc-intro-red);opacity:0;filter:blur(12px);transform-box:fill-box;transform-origin:center;will-change:opacity,transform,filter}
.dvc-rec-dot__core{fill:var(--dvc-intro-red);filter:drop-shadow(0 0 7px rgba(255,26,18,.8))}
/* Loops for as long as the intro needs to wait on the video — a one-shot
   animation would freeze the dot mid-way through a slow-network wait,
   leaving a dead, static beat that reads as broken rather than paced. */
.dvc-logo-intro.is-playing .dvc-rec-dot{animation:dvc-dot-heartbeat 1600ms ease-in-out 400ms infinite}
.dvc-logo-intro.is-playing .dvc-rec-dot__halo{animation:dvc-dot-halo-heartbeat 1600ms ease-in-out 400ms infinite}

.dvc-logo-intro.is-exiting .dvc-intro-stage{opacity:0;transform:scale(.96);filter:blur(3px)}
.dvc-logo-intro.is-exiting .dvc-intro-portal{--dvc-hole:160vmax}
.dvc-logo-intro.is-exiting .dvc-intro-portal-ring{animation:dvc-portal-ring 820ms cubic-bezier(.22,1,.36,1) forwards}

@keyframes dvc-dot-heartbeat{
  0%{opacity:0;transform:scale(.92)}
  15%,72%{opacity:1;transform:scale(1.1)}
  35%,100%{opacity:0;transform:scale(.98)}
}
@keyframes dvc-dot-halo-heartbeat{
  0%,55%{opacity:0;transform:scale(.86)}
  15%,72%{opacity:.52;transform:scale(.94)}
  37%,100%{opacity:0;transform:scale(1.58)}
}
@keyframes dvc-portal-ring{
  0%{opacity:0;transform:translate3d(-50%,-50%,0) scale(.72)}
  16%{opacity:.92}
  100%{opacity:0;transform:translate3d(-50%,-50%,0) scale(4.6)}
}
@media (max-width:767px){.dvc-wordmark{width:min(72vw,520px);max-height:24vh}}
@media (prefers-reduced-motion:reduce){
  .dvc-wordmark__letters{opacity:1;transition:none}
  .dvc-logo-intro.is-playing .dvc-rec-dot{animation:none;opacity:1;transform:scale(1)}
  .dvc-logo-intro.is-playing .dvc-rec-dot__halo{animation:none}
  .dvc-intro-portal{transition-duration:300ms}
  .dvc-intro-portal-ring{display:none}
}

/* ============================================================
   PAGE TRANSITION WIPE
   ============================================================ */
.page-wipe{
  position:fixed;inset:0;z-index:200;background:var(--deep);
  transform:scaleY(0);transform-origin:bottom;pointer-events:none;
}

/* ============================================================
   REVEAL DEFAULTS (JS-gated)
   ============================================================ */
/* Text nearly-imperceptibly fades in; only large media gets a real reveal. */
html.js [data-reveal]{opacity:0;transform:translateY(12px)}
html.js [data-reveal="fade"]{transform:none}
html.js [data-reveal="media"]{transform:translateY(46px)}
html.js .hero-title .word{transform:translateY(112%)}
html.js .process-step{opacity:0;transform:translateY(24px)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .process-grid{grid-template-columns:1fr 1fr}
  .work-card,.work-card.tall-l,.work-card.tall-r,.work-card.third{grid-column:span 12;aspect-ratio:16/10}
  .work-card.wide{grid-column:span 12;aspect-ratio:16/10}
  .about-teaser{grid-template-columns:1fr}
  .about-figure{aspect-ratio:16/10}
  .case-cols{grid-template-columns:1fr}
  .meta-row,.stat-row{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .nav-links,.nav-cta{display:none}
  .nav-burger{display:flex}
  .service-row{grid-template-columns:44px 1fr;grid-template-rows:auto auto;row-gap:8px}
  .service-desc{grid-column:2}
  .service-arrow{display:none}
  .package-grid{grid-template-columns:1fr;gap:26px}
  .example-list{grid-template-columns:1fr}
  .process-grid{grid-template-columns:1fr}
  .case-media{aspect-ratio:16/10}
}
@media (max-width:560px){
  .meta-row,.stat-row,.stat-row.cols-3{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}

/* Zigzag op diensten.html: beeld links, tekst rechts. Zodra de kolommen stapelen
   (tot 1080px) komt de tekst eerst en dan het beeld, zodat het ritme kopje, foto,
   kopje, foto blijft. Dit staat in klassen, niet in inline stijlen, omdat de
   animatiebibliotheek de inline stijl herschrijft. */
.case-cols > .zig-media{order:1}
.case-cols > .zig-text{order:2}
@media (max-width:1080px){
  .case-cols > .zig-text{order:1}
  .case-cols > .zig-media{order:2}
}
/* Strakkere ritmiek op telefoons: kleinere ruimte tussen secties */
@media (max-width:760px){
  :root{--pad-section:60px}
}

/* ============================================================
   VIDEO LIGHTBOX — fullscreen Vimeo/YouTube playback, no page nav
   ============================================================ */
[data-video-lightbox]{cursor:pointer}
.video-lightbox{
  position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;
  padding:clamp(20px,5vw,64px);background:rgba(0,0,0,.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease-out),visibility 0s linear .4s;
}
.video-lightbox.is-open{opacity:1;visibility:visible;transition:opacity .4s var(--ease-out),visibility 0s linear 0s}
.video-lightbox-frame{
  position:relative;width:100%;max-width:1200px;aspect-ratio:16/9;
  border-radius:var(--r-m);overflow:hidden;background:var(--black);
  box-shadow:0 30px 90px rgba(0,0,0,.6);
  transform:scale(.96);transition:transform .4s var(--ease-out);
}
.video-lightbox.is-open .video-lightbox-frame{transform:scale(1)}
.video-lightbox-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-lightbox-close{
  position:absolute;top:-52px;right:0;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid var(--line-strong);
  color:var(--white);transition:background-color var(--dur-1) var(--ease-out),transform .35s var(--ease-out);
}
.video-lightbox-close:hover{background:var(--red);transform:scale(1.08)}
.video-lightbox-close:focus-visible{outline:2px solid var(--white);outline-offset:2px}
.video-lightbox-close svg{width:16px;height:16px}
@media (max-width:640px){
  .video-lightbox-close{top:auto;bottom:calc(100% - 48px);right:0}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  html{scroll-behavior:auto}
  html.js [data-reveal],html.js .hero-title .word,html.js .process-step{opacity:1;transform:none}
  html.js .statement .w{opacity:1}
  .dvc-logo-intro{display:none!important}
  .marquee-track{animation:none;flex-wrap:wrap;width:auto}
}

/* ============================================================
   MOBIEL: leesbaarheid en tikdoelen (telefoons)
   Kleine mono-labels waren 10 tot 11px. Naar minimaal 11,5px, met iets minder
   letterspatie zodat lange labels niet vaker afbreken.
   ============================================================ */
@media (max-width:560px){
  .work-kicker,.film-kicker,.meta-item .label,.soon-badge,.tag,.footer-col h4{font-size:max(.72rem,11.5px)}
  .work-kicker{letter-spacing:.14em}
  .breadcrumb a{display:inline-block;padding-block:9px}
}

/* ============================================================
   MOBIEL: formuliervelden minimaal 16px
   iOS Safari zoomt de pagina in zodra een veld kleiner dan 16px de focus krijgt
   en zoomt daarna niet terug. Dat gaf de ruimte om na het invullen van het
   contactformulier naar links en rechts te kunnen vegen.
   ============================================================ */
@media (max-width:900px){
  .form-field input,.form-field select,.form-field textarea{font-size:16px}
}

/* Vimeo loops: poster underneath, player fades in once it is playing */
.video-cover .vc-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.video-cover.has-poster iframe{z-index:1;opacity:0;transition:opacity .8s ease}
.video-cover.has-poster.is-ready iframe{opacity:1}