/* ─── Olsthoorn Productions — homepage styles ─────────────────────────── */

:root{
  /* navy palette — shifted one step lighter so the background reads as the
     lighter brand-blue everywhere, while cards keep their contrast. */
  --navy-0:#192741;
  --navy-1:#213251;
  --navy-2:#2b3f63;
  --navy-3:#37527d;
  --navy-line:rgba(255,255,255,.08);

  /* gold palette — tweakable via JS */
  --gold-1:#b88636;
  --gold-2:#d4a657;
  --gold-3:#f0d28a;
  --gold-4:#e8c374;
  --gold-grad: linear-gradient(135deg,#b88636 0%,#e8c374 28%,#f5e2a8 50%,#d4a657 75%,#a67422 100%);

  /* text */
  --ink-0:#ffffff;
  --ink-1:#f4ecd8;
  --ink-2:rgba(255,255,255,.78);
  --ink-3:rgba(255,255,255,.55);

  --glow: 0 0 60px rgba(228,194,116,.45);
  --glow-soft: 0 0 30px rgba(228,194,116,.25);

  --radius-sm:10px;
  --radius:14px;
  --radius-lg:22px;
  --radius-pill:999px;

  --font-display:"Cormorant Garamond","Cormorant",ui-serif,Georgia,serif;
  --font-body:"Manrope",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-eyebrow:"Manrope",ui-sans-serif,system-ui,sans-serif;

  --maxw:1350px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--navy-1);
  color:var(--ink-1);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:transparent}

/* ─── Page atmosphere ────────────────────────────────────────────────── */

.brand-logo{
  filter:drop-shadow(0 2px 12px rgba(240,210,138,calc(.4 * var(--glow-strength,1))));
  transition:filter .35s ease;
}
.nav-brand:hover .brand-logo{
  filter:drop-shadow(0 2px 20px rgba(240,210,138,calc(.7 * var(--glow-strength,1))));
}

/* hero video softens beautifully */
.hero-video{
  filter:contrast(1.05) saturate(1.05);
  animation:heroDriftIn 1.8s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes heroDriftIn{
  0%{transform:scale(1.08);opacity:0}
  100%{transform:scale(1);opacity:1}
}

.page{
  position:relative;
  isolation:isolate;
  background:var(--navy-1);
  min-height:100vh;
}
.page::before{
  /* aurora glow upper-left */
  content:"";position:fixed;inset:-20vh -20vw auto auto;width:80vw;height:70vh;
  background:radial-gradient(60% 60% at 50% 50%, rgba(228,194,116,.18), transparent 70%);
  filter:blur(40px);pointer-events:none;z-index:0;
  opacity:var(--glow-strength,1);
}
.page::after{
  content:"";position:fixed;inset:auto auto -30vh -20vw;width:70vw;height:70vh;
  background:radial-gradient(60% 60% at 50% 50%, rgba(212,166,87,.10), transparent 70%);
  filter:blur(40px);pointer-events:none;z-index:0;
  opacity:var(--glow-strength,1);
}

.cursor-spot{
  position:fixed;pointer-events:none;z-index:1;
  width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle, rgba(240,210,138,.10), transparent 60%);
  transform:translate(-50%,-50%);
  transition:opacity .4s ease;
  mix-blend-mode:screen;
  opacity:calc(var(--glow-strength,1) * .9);
}

/* grain */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:9999;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .25 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;opacity:.08;
}

main{position:relative;z-index:2}

/* ─── Typography ──────────────────────────────────────────────────────── */

.display{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:-.01em;
  line-height:1.02;
  color:var(--ink-0);
}
h1.display{font-size:clamp(48px,7.6vw,124px)}
h2.display{font-size:clamp(36px,4.6vw,64px);line-height:1.05}
h3.display{font-size:clamp(24px,2.4vw,34px);line-height:1.15}

.eyebrow{
  font-family:var(--font-eyebrow);
  font-size:12px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-2);
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{
  content:"";width:28px;height:1px;background:var(--gold-grad);
}

.gold-text{
  background:var(--gold-grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  display:inline-block;
  background-size:200% 200%;
  animation:goldShift 9s ease-in-out infinite;
}
@keyframes goldShift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

/* the big one: gold-glow that throws warm light onto the page */
.gold-glow{
  position:relative;
  background:linear-gradient(135deg,#b88636 0%,#e8c374 22%,#fff4cf 48%,#f5e2a8 55%,#d4a657 78%,#a67422 100%);
  background-size:220% 220%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  display:inline;
  /* background-clip:text schildert alleen binnen het box-vlak; cursieve
     stokken/staarten steken daarbuiten en zouden anders "afgesneden" ogen.
     Padding rekt het schildervlak op; negatieve h-margin compenseert de
     breedte zodat de layout exact gelijk blijft (v-padding is bij inline
     elementen layout-neutraal). */
  padding:.18em .12em .14em;
  margin:0 -.12em;
  filter:
    drop-shadow(0 0 14px rgba(240,210,138,calc(.55 * var(--glow-strength,1))))
    drop-shadow(0 0 38px rgba(240,210,138,calc(.35 * var(--glow-strength,1))))
    drop-shadow(0 0 60px rgba(228,180,86,calc(.22 * var(--glow-strength,1))));
  animation:goldShift 11s ease-in-out infinite, goldPulse 4.5s ease-in-out infinite;
}
@keyframes goldPulse{
  0%,100%{filter:
    drop-shadow(0 0 14px rgba(240,210,138,calc(.55 * var(--glow-strength,1))))
    drop-shadow(0 0 38px rgba(240,210,138,calc(.35 * var(--glow-strength,1))))
    drop-shadow(0 0 60px rgba(228,180,86,calc(.22 * var(--glow-strength,1))))}
  50%{filter:
    drop-shadow(0 0 22px rgba(255,228,160,calc(.7 * var(--glow-strength,1))))
    drop-shadow(0 0 60px rgba(240,210,138,calc(.45 * var(--glow-strength,1))))
    drop-shadow(0 0 100px rgba(228,180,86,calc(.32 * var(--glow-strength,1))))}
}

/* shimmer streak overlay for headline phrases */
.gold-glow.with-shimmer{
  position:relative;
}
.gold-glow.with-shimmer::after{
  content:attr(data-text);
  position:absolute;left:0;top:0;width:100%;
  padding:inherit;box-sizing:border-box;
  background:linear-gradient(110deg,
    transparent 0%,
    rgba(255,255,255,0) 38%,
    rgba(255,255,255,.95) 48%,
    rgba(255,255,255,0) 58%,
    transparent 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  pointer-events:none;
  animation:shimmerSweep 4.2s ease-in-out infinite;
}
@keyframes shimmerSweep{
  0%{background-position:200% 0}
  60%,100%{background-position:-100% 0}
}

.italic-accent{font-style:italic;font-weight:500}

/* ── Mobiele GPU-ontlasting (oudere telefoons / iOS Safari) ──────────────
   De zwaarste kostenposten op een mobiele GPU zijn: backdrop-blur
   (glassmorphism), full-screen composit-lagen (filmkorrel, cursor-gloed,
   aurora-blur) en continu lopende filter-animaties. Die zetten we op kleine
   schermen uit. Kleuren, layout en de goud-look blijven behouden — het ziet er
   nog steeds mooi uit, maar het rendert vele malen lichter en stabieler. */
@media (max-width:820px){
  /* 1. glass-blur overal uit (duurste effect op mobiel) */
  *{-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
  /* nav blijft leesbaar met een iets vastere achtergrond i.p.v. blur */
  .nav{background:rgba(25,39,65,.92)}
  .nav-wrap.is-scrolled .nav{background:rgba(25,39,65,.96)}

  /* 2. full-screen composit-lagen weg */
  .grain,.cursor-spot{display:none !important}
  .page::before,.page::after{display:none}

  /* 3. continue (oneindige) decoratieve animaties stoppen */
  .gold-glow,.gold-text,
  .scroll-cue .line,
  .showreel .play::before,.showreel .play::after{animation:none !important}
  .gold-glow.with-shimmer::after{animation:none !important;display:none}

  /* 4. GEEN inkomende tekst-/blok-animaties op mobiel: alles staat meteen goed
        (geen fade-up, geen per-woord-stagger, geen blur-in) */
  .reveal,
  .reveal-stagger > *,
  .word-stagger > .word,
  .proc-ed-step .proc-ed-media,
  .proc-ed-step .proc-ed-body,
  .proc-ed-finish{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
    animation:none !important;
  }
}

.body-lg{font-size:18px;color:var(--ink-2);max-width:60ch;line-height:1.65}
.body{font-size:16px;color:var(--ink-2);line-height:1.6}
.muted{color:var(--ink-3)}

/* gold underline accent (starthup-vibe) */
.gold-underline{
  position:relative;display:inline-block;
}
.gold-underline::after{
  content:"";position:absolute;left:-2%;right:-2%;bottom:.04em;height:.32em;
  background:var(--gold-grad);
  filter:blur(2px);opacity:.85;
  z-index:-1;
  transform:skewX(-8deg);
}

/* ─── Layout helpers ─────────────────────────────────────────────────── */

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
@media (max-width:720px){.wrap{padding:0 20px}}

.section{padding:120px 0;position:relative}
.section--tight{padding:80px 0}
@media (max-width:720px){
  .section{padding:80px 0}
  .section--tight{padding:56px 0}
}

.section-head{display:flex;flex-direction:column;gap:18px;margin-bottom:64px}
.section-head .lede{max-width:62ch;color:var(--ink-2);font-size:18px}

/* reveal-on-scroll (opacity stays 1 so a background tab, where transitions are
   paused, can never leave the page blank — entrance is transform-only) */
.reveal{opacity:1;transform:translateY(28px);transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.reveal.is-in{transform:none}
.reveal-stagger > *{opacity:1;transform:translateY(22px);transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.reveal-stagger.is-in > *{transform:none}
.reveal-stagger.is-in > *:nth-child(1){transition-delay:0ms}
.reveal-stagger.is-in > *:nth-child(2){transition-delay:80ms}
.reveal-stagger.is-in > *:nth-child(3){transition-delay:160ms}
.reveal-stagger.is-in > *:nth-child(4){transition-delay:240ms}
.reveal-stagger.is-in > *:nth-child(5){transition-delay:320ms}
.reveal-stagger.is-in > *:nth-child(6){transition-delay:400ms}
.reveal-stagger.is-in > *:nth-child(7){transition-delay:480ms}
.reveal-stagger.is-in > *:nth-child(8){transition-delay:560ms}

/* ─── Buttons ────────────────────────────────────────────────────────── */

/* ── BUTTONS ─ liquid gold fill + shimmer + magnetic ─────────────────── */

.btn{
  --bd: rgba(240,210,138,.45);
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 32px;
  border-radius:var(--radius-pill);
  font-family:var(--font-body);
  font-weight:500;font-size:15px;letter-spacing:.02em;
  color:var(--ink-0);
  border:1px solid transparent;
  background:rgba(255,255,255,.025);
  -webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);
  transition:transform .35s cubic-bezier(.22,.61,.36,1),
             box-shadow .5s ease,
             color .5s ease .05s,
             letter-spacing .35s ease;
  overflow:hidden;
  isolation:isolate;
  text-align:center;
  cursor:pointer;
  --btn-glow: calc(.5 * var(--glow-strength,1));
}
/* gold gradient border */
.btn::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--gold-grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.7;transition:opacity .4s ease;
  pointer-events:none;z-index:3;
}
/* outer halo */
.btn::after{
  content:"";position:absolute;inset:-2px;border-radius:inherit;
  background:radial-gradient(60% 90% at 50% 100%,rgba(240,210,138,.45),transparent 70%);
  opacity:0;transition:opacity .5s ease;
  z-index:-1;filter:blur(6px);
}

/* LIQUID FILL — gold layer that sweeps in from left on hover */
.btn .liquid{
  position:absolute;inset:0;border-radius:inherit;
  z-index:0;pointer-events:none;
  background:linear-gradient(135deg,#b88636 0%,#e8c374 25%,#f5e2a8 50%,#d4a657 75%,#a67422 100%);
  background-size:160% 160%;
  clip-path:circle(0% at 0% 100%);
  transition:clip-path .65s cubic-bezier(.7,0,.2,1), background-position 1.2s ease;
}
.btn:hover .liquid{
  clip-path:circle(160% at 0% 100%);
  background-position:100% 0%;
}

/* shimmer sweep */
.btn .shine{
  position:absolute;inset:0;border-radius:inherit;
  overflow:hidden;pointer-events:none;z-index:2;
}
.btn .shine::before{
  content:"";position:absolute;top:0;bottom:0;left:-40%;width:35%;
  background:linear-gradient(110deg,
    transparent 0%,
    rgba(255,255,255,.0) 30%,
    rgba(255,245,210,.55) 50%,
    rgba(255,255,255,.0) 70%,
    transparent 100%);
  transform:skewX(-18deg);
  transition:left 1s cubic-bezier(.4,.0,.2,1) .15s;
}
.btn:hover .shine::before{left:135%}

.btn .lbl{
  position:relative;z-index:4;
  display:inline-flex;align-items:center;gap:10px;
  transition:transform .35s cubic-bezier(.22,.61,.36,1), letter-spacing .35s ease;
}
.btn:hover .lbl{letter-spacing:.04em}

/* GHOST: text flips to dark navy because gold has flooded the bg */
.btn:hover{
  transform:translateY(-2px);
  color:#15100a;
  box-shadow:0 22px 54px rgba(228,194,116,var(--btn-glow)),
             0 0 0 1px rgba(240,210,138,.45) inset;
}
.btn:hover::before{opacity:1}
.btn:hover::after{opacity:calc(var(--glow-strength,1) * .9)}
.btn:active{transform:translateY(0) scale(.97)}

/* PRIMARY ─ solid gold w/ liquid sheen */
.btn--primary{
  background:linear-gradient(135deg,#b88636 0%,#e8c374 25%,#f5e2a8 50%,#d4a657 75%,#a67422 100%);
  background-size:220% 220%;
  background-position:0% 50%;
  color:#15100a;
  font-weight:600;
  border:1px solid rgba(255,236,184,.5);
  --btn-glow: calc(.7 * var(--glow-strength,1));
  transition:transform .35s cubic-bezier(.22,.61,.36,1),
             box-shadow .5s ease,
             background-position .9s ease,
             letter-spacing .35s ease;
}
.btn--primary::before{display:none}
.btn--primary .liquid{display:none}
.btn--primary .shine::before{
  background:linear-gradient(110deg,
    transparent 0%,
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,.75) 50%,
    rgba(255,255,255,0) 70%,
    transparent 100%);
}
.btn--primary:hover{
  background-position:100% 50%;
  color:#0a0703;
  transform:translateY(-2px);
  box-shadow:
    0 22px 60px rgba(240,210,138,var(--btn-glow)),
    0 0 0 1px rgba(255,245,210,.5) inset,
    0 1px 0 rgba(255,255,255,.6) inset;
}
.btn--primary:active{transform:translateY(0) scale(.97)}

.btn--sm{padding:11px 22px;font-size:13px}

.arrow{
  width:16px;height:16px;display:inline-block;
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
.btn:hover .arrow{transform:translateX(4px)}

.btn.magnetic{transform:translate(var(--mx,0px),var(--my,0px))}
.btn.magnetic:hover{transform:translate(var(--mx,0px), calc(var(--my,0px) - 2px))}

/* ─── Navbar ─────────────────────────────────────────────────────────── */

.nav-wrap{
  position:fixed;top:0;left:0;right:0;z-index:130;
  display:flex;justify-content:center;
  padding:18px 24px;
  pointer-events:none;
  transition:padding .35s ease;
}
.nav-wrap.is-scrolled{padding:12px 24px}

.nav{
  pointer-events:auto;
  position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:min(1280px,100%);
  padding:12px 14px 12px 18px;
  border-radius:var(--radius-pill);
  border:1px solid rgba(255,255,255,.08);
  background:rgba(25,39,65,.35);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  transition:background .35s ease,border-color .35s ease,box-shadow .35s ease,width .35s ease;
}
.nav-wrap.is-scrolled .nav{
  background:rgba(25,39,65,.78);
  border-color:rgba(240,210,138,.18);
  box-shadow:0 8px 40px rgba(0,0,0,.4),0 0 0 1px rgba(240,210,138,.04) inset;
}

.nav-brand{display:flex;align-items:center;gap:10px}
.nav-brand .mark{
  width:38px;height:38px;
}
.nav-brand .word{
  font-family:var(--font-display);
  font-size:18px;letter-spacing:.02em;
  color:var(--ink-0);
}
.nav-brand .sub{
  font-family:var(--font-body);
  font-size:9px;letter-spacing:.32em;
  color:var(--gold-2);
  margin-top:-2px;
}

.nav-links{
  display:flex;align-items:center;justify-content:center;gap:2px;
  font-size:13px;
  flex:1 1 auto;min-width:0;
}
.nav-links a{
  position:relative;
  padding:8px 9px;
  color:var(--ink-2);
  border-radius:999px;
  white-space:nowrap;
  transition:color .2s ease,background .2s ease;
}
.nav-links a:hover{color:var(--ink-0);background:rgba(255,255,255,.05)}
.nav-links a.active{color:var(--gold-3)}
.nav-links a.active::after{
  content:"";position:absolute;left:9px;right:9px;bottom:2px;height:1px;
  background:var(--gold-grad);
}

.nav-cta{flex:0 0 auto}

/* 9 menu-items met lange labels: de links staan nu in de flex-flow (tussen
   brand en CTA) i.p.v. absoluut gecentreerd, zodat ze de CTA-knop nooit meer
   kunnen overlappen. Onder ~1280px is er te weinig ruimte voor alle labels
   naast elkaar, dus dan toont het compacte (hamburger)menu. */

.menu-btn{display:none}
.nav-mobile{display:none}
@media (max-width:1240px){
  .nav-links{display:none}
  .nav-cta{display:none}
  .menu-btn{display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;border-radius:50%;
    border:1px solid rgba(255,255,255,.1);color:var(--ink-1);
    background:rgba(255,255,255,.03);cursor:pointer;transition:all .2s ease;
    touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  .menu-btn.is-open{border-color:rgba(240,210,138,.4);color:var(--gold-3)}
  .nav-mobile.open{
    display:flex;flex-direction:column;gap:4px;
    position:fixed;top:80px;left:14px;right:14px;z-index:129;
    pointer-events:auto;
    padding:14px;
    background:rgba(25,39,65,.97);
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    border:1px solid rgba(240,210,138,.18);border-radius:22px;
    box-shadow:0 30px 80px rgba(0,0,0,.5);
  }
  .nav-wrap.is-scrolled .nav-mobile.open{top:68px}
  .nav-mobile a{
    padding:14px 16px;border-radius:13px;color:var(--ink-1);
    font-size:16px;font-weight:500;transition:background .2s,color .2s;
    touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  }
  .nav-mobile a.active{color:var(--gold-3)}
  .nav-mobile a:not(.btn):hover{background:rgba(255,255,255,.05);color:var(--ink-0)}
  .nav-mobile .btn{margin-top:8px;justify-content:center;font-size:14px}
}

/* ─── Hero ───────────────────────────────────────────────────────────── */

.hero{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;
  padding-top:140px;padding-bottom:120px;
  overflow:hidden;
  isolation:isolate;
}

.hero-bg{
  position:absolute;inset:0;z-index:-1;
}
.hero-bg image-slot, .hero-bg .ph{
  position:absolute;inset:0;width:100%;height:100%;
}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(80% 70% at 30% 40%, rgba(25,39,65,.32), rgba(25,39,65,.78) 72%),
    linear-gradient(180deg, rgba(13,20,36,.55) 0%, rgba(13,20,36,.34) 44%, rgba(22,32,54,.7) 80%, var(--navy-1) 100%);
  pointer-events:none;
}

.hero-inner{
  position:relative;width:100%;
  display:grid;grid-template-columns:1fr;gap:28px;
}
.hero-eyebrow{margin-bottom:0}
.hero h1{margin:0;max-width:18ch;line-height:1.02}
.hero h1 .swash{font-style:italic;font-weight:400}
.hero-sub{font-size:20px;color:var(--ink-2);max-width:54ch;margin-bottom:0;line-height:1.6}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:0}

/* CTAs and the reviews widget share one row */
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:18px 24px;margin-bottom:0}

/* Google reviews widget beside the hero CTAs */
.hero-reviews{
  display:inline-flex;align-items:center;gap:14px;width:max-content;max-width:100%;
  padding:11px 20px 11px 18px;border-radius:var(--radius-pill);text-decoration:none;
  background:linear-gradient(180deg,rgba(40,58,92,.55),rgba(26,40,68,.55));
  border:1px solid rgba(240,210,138,.24);
  box-shadow:0 10px 30px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.hero-reviews:hover{border-color:rgba(240,210,138,.5);transform:translateY(-2px);box-shadow:0 16px 40px rgba(0,0,0,.35)}
.hero-reviews .hr-score{font-family:var(--font-display);font-size:32px;line-height:1;color:var(--ink-0);font-weight:500;font-variant-numeric:tabular-nums}
.hero-reviews .hr-divider{width:1px;align-self:stretch;background:rgba(255,255,255,.16);margin:3px 0}
.hero-reviews .hr-mid{display:flex;flex-direction:column;gap:5px}
.hero-reviews .hr-stars{display:inline-flex;gap:3px;color:var(--gold-3);font-size:15px;line-height:1}
.hero-reviews .hr-meta{font-size:13px;color:var(--ink-1);letter-spacing:.01em}
.hero-reviews .hr-meta b{color:var(--ink-1);font-weight:600}
@media(max-width:520px){.hero-reviews{gap:11px;padding:10px 15px}.hero-reviews .hr-score{font-size:26px}}

/* logo marquee inside the hero, under the buttons (no bg bar) */
.hero-logos{margin-top:10px;width:100vw;margin-left:calc(50% - 50vw);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.hero-logos .marquee{-webkit-mask-image:none;mask-image:none;overflow:hidden}
.hero-logos .marquee-track{display:flex;width:max-content;align-items:center;animation:marqueeScroll 46s linear infinite}
.hero-logos:hover .marquee-track{animation-play-state:paused}
.hero-logos .logo-item{flex:0 0 auto;width:calc(100vw / 5);display:flex;align-items:center;justify-content:center}
.hero-logos .marquee .logo-item img{height:88px;width:auto;max-width:80%;object-fit:contain;display:block;
  filter:brightness(0) invert(1);opacity:.55;transition:opacity .3s ease}
.hero-logos .logo-item:hover img{opacity:.95}
@media (max-width:900px){.hero-logos .logo-item{width:calc(100vw / 4)}.hero-logos .marquee .logo-item img{height:72px}}
@media (max-width:560px){
  .hero-logos{margin-top:32px}
  .hero-logos .logo-item{width:calc(100vw / 3)}
  .hero-logos .marquee .logo-item img{height:58px}
}
/* Eén sprite-strip met alle klantlogo's (1 verzoek i.p.v. 26). Twee identieke
   kopieën achter elkaar → naadloze lus bij -50%. */
.hero-logos .marquee-sprite{gap:0}
.hero-logos .logos-sprite{flex:0 0 auto;height:88px;width:auto;max-width:none;display:block;
  filter:brightness(0) invert(1);opacity:.55}
@media (max-width:900px){.hero-logos .logos-sprite{height:72px}}
@media (max-width:560px){.hero-logos .logos-sprite{height:58px}}

.hero-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  border-top:1px solid var(--navy-line);
  padding-top:30px;
  max-width:780px;
}
.hero-stats .stat .n{
  font-family:var(--font-display);font-size:38px;line-height:1;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-stats .stat .l{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-top:8px;
}
@media (max-width:720px){
  .hero-stats{grid-template-columns:repeat(2,1fr);gap:18px}
  .hero-stats .stat .n{font-size:30px}
  .hero-sub{font-size:17px}
}

.scroll-cue{
  position:absolute;bottom:32px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--ink-3);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
}
.scroll-cue .line{
  width:1px;height:50px;background:linear-gradient(180deg,transparent,var(--gold-2));
  animation:scrollPulse 2.4s ease-in-out infinite;
}
@keyframes scrollPulse{
  0%,100%{transform:scaleY(.5);transform-origin:top;opacity:.4}
  50%{transform:scaleY(1);opacity:1}
}

/* ─── Logo strip ─────────────────────────────────────────────────────── */

.logos{
  padding:36px 0;
  border-top:1px solid var(--navy-line);
  border-bottom:1px solid var(--navy-line);
  background:rgba(13,20,36,.5);
}
.logos-grid{
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  opacity:.7;
}
.logos-grid .logo-item{
  font-family:var(--font-display);font-size:18px;color:var(--ink-2);
  display:flex;align-items:center;gap:10px;
  font-style:italic;
}
.logos-grid .logo-item .sub{
  font-family:var(--font-body);font-size:9px;letter-spacing:.22em;color:var(--ink-3);text-transform:uppercase;font-style:normal;
}
.logos-label{
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-2);
  margin-bottom:18px;text-align:center;
}

/* continuous logo marquee (right to left) */
.marquee .logo-item img{
  height:60px;width:auto;max-width:170px;object-fit:contain;display:block;
  filter:brightness(0) invert(1);opacity:.6;transition:opacity .3s ease;
}
.marquee .logo-item:hover img{opacity:1}
@media (max-width:520px){
  .marquee .logo-item img{height:44px;max-width:120px}
}

/* ─── Services ───────────────────────────────────────────────────────── */

.services-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}
@media (max-width:980px){.services-grid{grid-template-columns:1fr}}

.service-card{
  position:relative;
  border-radius:var(--radius-lg);
  border:1px solid var(--navy-line);
  background:linear-gradient(180deg, rgba(43,63,99,.5), rgba(25,39,65,.65));
  overflow:hidden;
  isolation:isolate;
  transition:transform .4s ease, border-color .4s ease;
  min-height:520px;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.service-card:hover{
  transform:translateY(-4px);
  border-color:rgba(240,210,138,.3);
}
.service-card .media{
  position:absolute;inset:0;z-index:-2;
}
.service-card .media image-slot,.service-card .media .ph{width:100%;height:100%}
.service-card .media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(13,20,36,.1) 0%, rgba(13,20,36,.65) 60%, rgba(13,20,36,.95) 100%);
}
.service-card:hover .media::after{
  background:linear-gradient(180deg, rgba(13,20,36,.0) 0%, rgba(13,20,36,.55) 60%, rgba(13,20,36,.92) 100%);
}
.service-card .body-pad{padding:32px;position:relative;z-index:1}
.service-card .num{
  font-family:var(--font-display);font-size:14px;color:var(--gold-2);letter-spacing:.06em;margin-bottom:14px;
}
.service-card h3{margin:0 0 12px;color:var(--ink-0)}
.service-card .desc{color:var(--ink-2);margin-bottom:22px;max-width:34ch}
.service-card .tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.service-card .tag{
  font-size:11px;letter-spacing:.06em;color:var(--ink-2);
  padding:5px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
}
.service-card .arrow-link{
  display:inline-flex;align-items:center;gap:10px;
  font-size:14px;color:var(--gold-3);
}
.service-card .arrow-link svg{transition:transform .3s ease}
.service-card:hover .arrow-link svg{transform:translateX(4px)}

/* ─── Why ────────────────────────────────────────────────────────────── */

.why-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
}
@media (max-width:980px){.why-grid{grid-template-columns:1fr;gap:48px}}

.why-media{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  aspect-ratio:4/5;
  box-shadow:0 24px 80px rgba(0,0,0,.45);
}
.why-media::before{
  /* gold frame glint */
  content:"";position:absolute;inset:0;border-radius:inherit;
  border:1px solid rgba(240,210,138,.22);
  z-index:2;pointer-events:none;
}
.why-media .caption{
  position:absolute;left:24px;bottom:24px;right:24px;z-index:2;
  display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
  color:var(--ink-0);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  text-shadow:0 1px 8px rgba(0,0,0,.6);
}
.why-media .caption .gold{color:var(--gold-3)}

.why-list{display:flex;flex-direction:column;gap:24px;margin-top:32px}
.why-item{
  display:grid;grid-template-columns:48px 1fr;gap:18px;align-items:flex-start;
  padding-bottom:24px;border-bottom:1px solid var(--navy-line);
}
.why-item:last-child{border-bottom:0}
.why-icon{
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 30% 30%, rgba(240,210,138,.35), rgba(212,166,87,.15) 60%, transparent);
  border:1px solid rgba(240,210,138,.3);
  color:var(--gold-3);
}
.why-item h4{margin:0 0 6px;color:var(--ink-0);font-family:var(--font-body);font-size:17px;font-weight:600;letter-spacing:.01em}
.why-item p{margin:0;color:var(--ink-2);line-height:1.6}

/* ─── Showreel ─────────────────────────────────────────────────────── */

.showreel{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  aspect-ratio:16/9;
  box-shadow:0 30px 100px rgba(0,0,0,.5);
}
.showreel .media,.showreel image-slot{position:absolute;inset:0;width:100%;height:100%}
.showreel::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,20,36,.2),rgba(13,20,36,.65));
  pointer-events:none;
}
.showreel .play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:108px;height:108px;border-radius:50%;
  background:rgba(25,39,65,.5);
  border:1px solid rgba(240,210,138,.5);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;
  color:var(--gold-3);
  box-shadow:0 0 60px rgba(240,210,138,.4);
  transition:transform .3s ease, box-shadow .3s ease;
}
.showreel .play::before{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  border:1px solid rgba(240,210,138,.3);
  animation:ripple 2.2s ease-out infinite;
}
.showreel .play::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  border:1px solid rgba(240,210,138,.2);
  animation:ripple 2.2s ease-out infinite .8s;
}
@keyframes ripple{
  0%{transform:scale(1);opacity:.8}
  100%{transform:scale(1.6);opacity:0}
}
.showreel:hover .play{transform:translate(-50%,-50%) scale(1.05);box-shadow:0 0 80px rgba(240,210,138,.6)}
.showreel .meta{
  position:absolute;left:32px;right:32px;bottom:28px;z-index:2;
  display:flex;justify-content:space-between;align-items:flex-end;gap:16px;color:var(--ink-0);
}
.showreel .meta .title{font-family:var(--font-display);font-size:28px}
.showreel .meta .right{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-3)}

/* ─── Portfolio bento ────────────────────────────────────────────────── */

.bento{
  columns:3;
  column-gap:16px;
}
.bento-tile{
  break-inside:avoid;
  margin:0 0 16px;
  display:block;width:100%;
  position:relative;overflow:hidden;
  border-radius:var(--radius);
  border:1px solid var(--navy-line);
  background:var(--navy-2);
  isolation:isolate;
  transition:border-color .45s ease, box-shadow .45s ease;
}
button.bento-tile{
  -webkit-appearance:none;appearance:none;font:inherit;color:inherit;
  text-align:left;padding:0;cursor:pointer;
}
/* play button on each portfolio tile */
.bento-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.92);z-index:3;
  width:74px;height:74px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#1a2238;background:var(--gold-grad);
  box-shadow:0 12px 34px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.18);
  padding-left:4px;
  transition:transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease;
}
.bento-play svg{margin-left:2px}
.bento-tile:hover .bento-play{transform:translate(-50%,-50%) scale(1.07);box-shadow:0 18px 46px rgba(0,0,0,.55)}

/* fullscreen video lightbox */
.vlightbox{
  position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  padding:max(28px,4vh) max(24px,4vw);
  background:rgba(8,12,22,.88);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  animation:vlbFade .28s ease both;
}
@keyframes vlbFade{from{opacity:0}to{opacity:1}}
.vlightbox-stage{
  position:relative;display:flex;flex-direction:column;gap:14px;
  max-width:min(1120px,92vw);animation:vlbPop .44s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes vlbPop{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
.vlightbox-video{
  display:block;max-width:min(1120px,92vw);max-height:80vh;width:auto;height:auto;
  border-radius:14px;background:#000;box-shadow:0 44px 120px rgba(0,0,0,.62);
}
.vlightbox-cap{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:0 4px}
.vlightbox-cap .ttl{font-family:var(--font-display);font-size:23px;color:var(--ink-0)}
.vlightbox-cap .typ{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-3);white-space:nowrap}
.vlightbox-close{
  position:absolute;top:-16px;right:-12px;z-index:2;width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:rgba(33,50,81,.92);color:var(--ink-0);border:1px solid rgba(240,210,138,.32);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:transform .25s ease, border-color .25s ease;
}
.vlightbox-close:hover{transform:scale(1.08);border-color:rgba(240,210,138,.7)}
@media (max-width:640px){.vlightbox-close{top:-6px;right:0}.bento-play{width:60px;height:60px}}
.bento-tile:hover{
  border-color:rgba(240,210,138,.38);
  box-shadow:0 26px 64px rgba(0,0,0,.5);
}
.cases-end{
  display:flex;flex-direction:column;align-items:center;gap:34px;margin-top:52px;
}
.cases-end-rule{
  width:100%;max-width:520px;height:1px;
  background:linear-gradient(90deg, transparent, rgba(240,210,138,.32), transparent);
}
.bento-tile image-slot,.bento-tile .ph,.bento-tile .bento-video{position:absolute;inset:0;width:100%;height:100%}
.bento-tile::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,20,36,.05) 50%,rgba(13,20,36,.85));
  transition:background .4s ease;
}
.bento-tile:hover::after{background:linear-gradient(180deg,rgba(13,20,36,.05) 40%,rgba(13,20,36,.92))}
.bento-tile .info{
  position:absolute;left:22px;right:22px;bottom:20px;z-index:2;
  display:flex;justify-content:space-between;align-items:flex-end;gap:12px;
}
.bento-tile .info .ttl{color:var(--ink-0);font-family:var(--font-display);font-size:22px;line-height:1.05}
.bento-tile .info .typ{
  color:var(--gold-3);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  white-space:nowrap;
}
.bento-tile .arrow-corner{
  position:absolute;top:18px;right:18px;z-index:2;
  width:38px;height:38px;border-radius:50%;
  background:rgba(25,39,65,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;color:var(--ink-1);
  opacity:0;transform:translate(6px,-6px);transition:all .35s ease;
}
.bento-tile:hover .arrow-corner{opacity:1;transform:none;border-color:rgba(240,210,138,.5);color:var(--gold-3)}

/* spans */
.b-12{grid-column:span 12}
.b-8{grid-column:span 8}
.b-6{grid-column:span 6}
.b-5{grid-column:span 5}
.b-4{grid-column:span 4}
.b-3{grid-column:span 3}
.r-2{grid-row:span 2}
.r-3{grid-row:span 3}
.r-4{grid-row:span 4}

@media (max-width:980px){
  .bento{columns:2}
}
@media (max-width:620px){
  .bento{columns:1}
}

/* ─── Process ────────────────────────────────────────────────────────── */

.process{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative;
}
.process::before{ display:none; }
@media (max-width:980px){
  .process{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){.process{grid-template-columns:1fr}}

.step{position:relative;z-index:1}
.step-img{
  position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:18px;
  border:1px solid rgba(255,255,255,.08);box-shadow:0 22px 50px rgba(0,0,0,.4);
  margin-bottom:22px;
}
.step-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.16,1,.3,1)}
.step:hover .step-img img{transform:scale(1.06)}
.step-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,19,43,.1) 0%,transparent 40%,rgba(11,19,43,.6) 100%)}
.step-n{
  position:absolute;left:14px;bottom:14px;z-index:2;
  width:50px;height:50px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:20px;color:#1a1306;
  background:var(--gold-grad);box-shadow:0 10px 26px rgba(0,0,0,.4);
}
.step h4{margin:0 0 8px;color:var(--ink-0);font-size:19px;font-weight:600}
.step p{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.55}

/* ─── Recente cases (home, same as Social Media page) ───────────────── */
.sm-cases-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:34px}
.sm-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sm-case{
  position:relative;display:block;border-radius:var(--radius);overflow:hidden;
  border:1px solid rgba(255,255,255,.08);background:#11192b;
  text-decoration:none;color:inherit;
  transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .4s ease;
}
.sm-case:hover{transform:translateY(-6px);border-color:rgba(240,210,138,.4)}
.sm-case-media{position:relative;aspect-ratio:4/3;overflow:hidden}
.sm-case-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.sm-case:hover .sm-case-media img{transform:scale(1.06)}
.sm-case-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(17,25,43,.85) 100%)}
.sm-case-sector{position:absolute;top:14px;left:14px;z-index:2;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;background:rgba(0,0,0,.4);padding:5px 11px;border-radius:999px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sm-case-metric{position:absolute;bottom:14px;left:16px;z-index:2;color:#fff}
.sm-case-metric .v{font-family:var(--font-display);font-size:34px;line-height:1.1;font-style:italic}
.sm-case-metric .l{font-size:11.5px;color:rgba(255,255,255,.82);margin-top:4px;max-width:80%}
.sm-case-body{padding:22px 22px 24px}
.sm-case-body h3{font-size:19px;margin:0 0 6px;letter-spacing:-.01em}
.sm-case-body p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.55}
.sm-case-go{display:inline-flex;align-items:center;gap:7px;margin-top:16px;color:var(--gold-3);font-size:13px;font-weight:600}
@media (max-width:1000px){.sm-cases{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.sm-cases{grid-template-columns:1fr;max-width:440px;margin:0 auto}}

/* ─── Process (editorial, matches Fotografie page) ──────────────────── */
.proc-ed{
  position:relative;
  display:flex;flex-direction:column;gap:88px;max-width:1080px;margin:8px auto 0;
}
.proc-ed-spine{
  position:absolute;left:50%;top:40px;bottom:40px;width:2px;transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,rgba(240,210,138,.5) 12%,rgba(240,210,138,.5) 88%,transparent);
  z-index:0;pointer-events:none;
}
@media (max-width:1000px){.proc-ed-spine{left:22px}}
.proc-ed-step{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;
}
.proc-ed-step::before{
  content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;border-radius:50%;
  transform:translate(-50%,-50%);z-index:3;
  background:var(--gold-grad);box-shadow:0 0 0 6px rgba(13,20,36,.9),0 0 22px rgba(240,210,138,.6);
}
@media (max-width:1000px){.proc-ed-step::before{left:22px}}
.proc-ed-media,.proc-ed-body{min-width:0}
.proc-ed-step.is-rev .proc-ed-media{order:2}
.proc-ed-media{
  position:relative;border-radius:var(--radius-lg, 22px);overflow:hidden;
  aspect-ratio:4/3;border:1px solid var(--navy-line);
  background:var(--navy-2);box-shadow:0 30px 70px rgba(0,0,0,.4);
}
.proc-ed-media img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.04);transition:transform 1.2s cubic-bezier(.22,.61,.36,1)}
.proc-ed-step:hover .proc-ed-media img{transform:scale(1.1)}
.proc-ed-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg, rgba(13,20,36,0) 55%, rgba(13,20,36,.45))}
.proc-ed-body{position:relative}
.proc-ed-num{
  font-family:var(--font-display);font-weight:500;line-height:1;padding-top:.12em;
  font-size:clamp(72px,9vw,128px);letter-spacing:-.02em;display:block;margin-bottom:6px;
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke:1px rgba(240,210,138,.24);
  filter:none;
  transition:-webkit-text-stroke-color .6s ease, filter .7s ease;
}
.proc-ed-step.is-in .proc-ed-num{
  background-image:var(--gold-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-stroke-color:transparent;
  filter:drop-shadow(0 0 26px rgba(240,210,138,.5));
}
.proc-ed-tag{display:inline-block;font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-3);margin-bottom:14px}
.proc-ed-body h3{font-family:var(--font-display);font-weight:500;
  font-size:clamp(26px,2.6vw,38px);line-height:1.04;color:var(--ink-0);margin:0 0 16px}
.proc-ed-body p{color:var(--ink-2);font-size:16px;line-height:1.66;margin:0;max-width:46ch}
.proc-ed-step .proc-ed-media,
.proc-ed-step .proc-ed-body{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1)}
.proc-ed-step.is-rev .proc-ed-media{transform:translateY(26px)}
.proc-ed-step.is-in .proc-ed-media{opacity:1;transform:translateY(0)}
.proc-ed-step.is-in .proc-ed-body{opacity:1;transform:translateY(0);transition-delay:.12s}

/* centered closing step (finish) */
.proc-ed-step.is-final{grid-template-columns:1fr;max-width:620px;margin:0 auto;text-align:center}
.proc-ed-step.is-final::before{display:none}
.proc-ed-step.is-final .proc-ed-num{text-align:center}
.proc-ed-step.is-final .proc-ed-body p{margin-left:auto;margin-right:auto}
.proc-ed-finish{
  display:block;width:min(360px,72%);height:auto;margin:34px auto 0;
  filter:drop-shadow(0 10px 26px rgba(240,210,138,.28));
  opacity:0;transform:translateY(18px) scale(.96);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1) .18s, transform .9s cubic-bezier(.22,.61,.36,1) .18s;
}
.proc-ed-step.is-in .proc-ed-finish{opacity:.96;transform:translateY(0) scale(1)}
@media (max-width:1000px){
  .proc-ed{gap:60px}
  .proc-ed-step{grid-template-columns:1fr;gap:26px;padding-left:48px}
  .proc-ed-step.is-rev .proc-ed-media{order:0}
}

/* ─── About ──────────────────────────────────────────────────────────── */

.about-grid{
  display:grid;grid-template-columns:0.85fr 1fr;gap:80px;align-items:center;
}
@media (max-width:980px){.about-grid{grid-template-columns:1fr;gap:48px}}

.about-portrait{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/5;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.about-portrait::before{
  content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(240,210,138,.22);z-index:2;
}
.about-portrait .badge{
  position:absolute;top:24px;left:24px;z-index:2;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-3);
  padding:8px 14px;border-radius:999px;
  background:rgba(25,39,65,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(240,210,138,.3);
}
.about-portrait .sig{
  position:absolute;bottom:24px;left:24px;z-index:2;
  font-family:var(--font-display);font-style:italic;font-size:22px;color:var(--gold-3);
}
.about-body p{color:var(--ink-2);margin:0 0 18px;font-size:17px;line-height:1.65;max-width:60ch}
.about-meta{display:grid;grid-template-columns:repeat(3,auto);gap:36px;margin-top:36px;padding-top:32px;border-top:1px solid var(--navy-line)}
.about-meta .n{font-family:var(--font-display);font-size:36px;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.about-meta .l{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-top:8px}

/* ─── Testimonial ────────────────────────────────────────────────────── */

.quote{
  max-width:920px;margin:0 auto;text-align:center;
  position:relative;padding:60px 20px;
}
.quote .mark{
  font-family:var(--font-display);font-size:140px;line-height:.7;
  color:var(--gold-2);opacity:.35;margin-bottom:-20px;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.quote blockquote{
  margin:0 0 36px;font-family:var(--font-display);font-size:clamp(26px,2.6vw,40px);line-height:1.25;color:var(--ink-0);
}
.quote .who{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-3)}
.quote .role{font-size:13px;color:var(--ink-3);margin-top:6px}

/* ─── CTA block ──────────────────────────────────────────────────────── */

.cta{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  padding:80px 60px;
  background:radial-gradient(120% 200% at 0% 0%, rgba(240,210,138,.18), transparent 50%),
             linear-gradient(135deg, var(--navy-3) 0%, var(--navy-1) 60%, var(--navy-0) 100%);
  border:1px solid rgba(240,210,138,.18);
  display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;
}
.cta::before{
  content:"";position:absolute;inset:-2px;border-radius:inherit;
  background:linear-gradient(135deg,rgba(240,210,138,.4),transparent 30%,transparent 70%,rgba(240,210,138,.25));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:1px;
  pointer-events:none;
}
@media (max-width:780px){.cta{grid-template-columns:1fr;padding:48px 28px}}
.cta h2{margin:0 0 16px}
.cta p{margin:0 0 24px;color:var(--ink-2);font-size:17px}
.cta-meta{display:flex;flex-direction:column;gap:18px}
.cta-meta .row{display:flex;align-items:center;gap:14px;color:var(--ink-2)}
.cta-meta .row .ico{
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.04);border:1px solid rgba(240,210,138,.2);
  display:flex;align-items:center;justify-content:center;color:var(--gold-3);
}
.cta-meta .row strong{color:var(--ink-0);font-weight:600}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px}

/* ─── Footer ─────────────────────────────────────────────────────────── */

.footer{
  border-top:1px solid var(--navy-line);
  padding:60px 0 30px;
  margin-top:80px;
}
.footer-grid{
  display:grid;grid-template-columns:1.5fr 1fr 1.3fr;gap:48px;align-items:flex-start;
}
@media (max-width:780px){.footer-grid{grid-template-columns:1fr 1fr;gap:30px}}
.footer-contact ul li a,.footer-contact ul li .fc-line{display:flex;align-items:center;gap:11px}
.footer-contact .fc-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:8px;color:var(--gold-3);
  background:rgba(240,210,138,.1);border:1px solid rgba(240,210,138,.2)}
.footer-contact .fc-ic svg{width:15px;height:15px}
.footer-contact .fc-ic--text{font-size:9px;font-weight:700;letter-spacing:.04em;color:var(--gold-3)}
.footer-contact .fc-line{color:var(--ink-2)}

.footer h5{color:var(--ink-0);font-size:12px;letter-spacing:.22em;text-transform:uppercase;margin:0 0 18px}
.footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.footer ul a{color:var(--ink-2);font-size:14.5px;transition:color .2s}
.footer ul a:hover{color:var(--gold-3)}
.footer .tagline{color:var(--ink-2);font-size:15px;max-width:36ch;margin-top:18px}
.footer .socials{display:flex;gap:10px;margin-top:18px}
.footer .socials a{
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--ink-1);
  border:1px solid rgba(255,255,255,.1);
  transition:all .25s;
}
.footer .socials a:hover{color:var(--gold-3);border-color:rgba(240,210,138,.4);box-shadow:0 0 20px rgba(240,210,138,.25)}
.footer-bottom{
  margin-top:50px;padding-top:24px;border-top:1px solid var(--navy-line);
  display:flex;justify-content:space-between;color:var(--ink-3);font-size:13px;gap:16px;flex-wrap:wrap;
}

/* ─── Placeholder (for image-slot fallback) ──────────────────────────── */

.ph{
  background:linear-gradient(135deg, var(--navy-3), var(--navy-2));
  position:relative;
}
.ph::before{
  content:attr(data-label);
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.18);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  text-align:center;padding:20px;
}

/* image-slot styling tweak */
image-slot{
  --is-bg: rgba(255,255,255,.02);
  --is-border: rgba(255,255,255,.08);
}

/* mobile-only sticky bottom CTA (starthup-inspired) */
.mobile-cta{display:none}
@media (max-width:720px){
  .mobile-cta{
    display:flex;position:fixed;bottom:14px;left:14px;right:14px;z-index:40;
    justify-content:center;
    transition:opacity .3s ease,transform .35s ease;
  }
  .mobile-cta .btn{width:100%;box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 40px rgba(240,210,138,.4)}
  .mobile-cta.is-hidden{opacity:0;transform:translateY(120%);pointer-events:none;transition:opacity .3s ease,transform .35s ease}
}


/* ─── Scroll progress bar (top) ──────────────────────────────────────── */
.scroll-progress{
  position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 0;z-index:60;
  background:linear-gradient(90deg,#b88636,#e8c374,#f5e2a8,#d4a657);
  box-shadow:0 0 14px rgba(240,210,138,.7);
  pointer-events:none;
  transition:width .12s linear;
}

/* ─── Per-word hero title fade-up ────────────────────────────────────── */
.word-stagger > .word{
  display:inline-block;
  opacity:0;
  transform:translateX(-.4em);
  filter:blur(7px);
  transition:
    opacity 1.05s ease,
    transform 1.05s cubic-bezier(.16,.84,.27,1),
    filter 1.05s ease;
}
.word-stagger.is-in > .word{
  opacity:1;transform:none;filter:none;
}
.word-stagger.is-in > .word:nth-child(1){transition-delay:0ms}
.word-stagger.is-in > .word:nth-child(2){transition-delay:90ms}
.word-stagger.is-in > .word:nth-child(3){transition-delay:180ms}
.word-stagger.is-in > .word:nth-child(4){transition-delay:270ms}
.word-stagger.is-in > .word:nth-child(5){transition-delay:360ms}
.word-stagger.is-in > .word:nth-child(6){transition-delay:450ms}
.word-stagger.is-in > .word:nth-child(7){transition-delay:540ms}
.word-stagger.is-in > .word:nth-child(8){transition-delay:630ms}
.word-stagger.is-in > .word:nth-child(9){transition-delay:720ms}
.word-stagger.is-in > .word:nth-child(10){transition-delay:810ms}
.word-stagger.is-in > .word:nth-child(11){transition-delay:900ms}
.word-stagger.is-in > .word:nth-child(12){transition-delay:990ms}
.word-stagger.is-in > .word:nth-child(13){transition-delay:1080ms}
.word-stagger > .word.space{display:inline-block;width:.28em}
@media (prefers-reduced-motion:reduce){
  .word-stagger > .word{opacity:1;transform:none;filter:none;transition:none}
}
/* vangnet: na de intro staat alles gegarandeerd zichtbaar, ook als de
   browser de overgang pauzeerde (bv. achtergrond-tabblad) */
.word-stagger.ws-settled > .word{opacity:1;transform:none;filter:none;transition:none}

/* ─── Reviews section ────────────────────────────────────────────────── */
.reviews-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-bottom:44px}
.reviews-badge{display:inline-flex;align-items:center;gap:14px;padding:12px 20px;border-radius:var(--radius-pill);text-decoration:none;
  background:linear-gradient(180deg,rgba(40,58,92,.55),rgba(26,40,68,.55));border:1px solid rgba(240,210,138,.24);
  box-shadow:0 10px 30px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .35s ease, transform .35s ease}
.reviews-badge:hover{border-color:rgba(240,210,138,.5);transform:translateY(-2px)}
.reviews-badge .rb-score{font-family:var(--font-display);font-size:30px;line-height:1;color:var(--ink-0);font-weight:500;font-variant-numeric:tabular-nums}
.reviews-badge .rb-divider{width:1px;align-self:stretch;background:rgba(255,255,255,.16);margin:3px 0}
.reviews-badge .rb-mid{display:flex;flex-direction:column;gap:4px}
.reviews-badge .rb-stars{color:var(--gold-3);font-size:14px;letter-spacing:2px;line-height:1}
.reviews-badge .rb-meta{font-size:12.5px;color:var(--ink-1)}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.review-card{margin:0;display:flex;flex-direction:column;gap:18px;padding:30px 28px;border-radius:var(--radius-lg);
  background:rgba(33,50,81,.4);border:1px solid var(--navy-line);box-shadow:0 20px 50px rgba(0,0,0,.28);
  transition:border-color .4s ease, transform .4s ease}
.review-card:hover{border-color:rgba(240,210,138,.32);transform:translateY(-4px)}
.review-card .review-stars{color:var(--gold-3);font-size:16px;letter-spacing:3px;line-height:1}
.review-card blockquote{margin:0;flex:1;font-family:var(--font-body);font-size:16px;line-height:1.66;color:var(--ink-1)}
.review-card figcaption{display:flex;align-items:center;gap:14px;border-top:1px solid var(--navy-line);padding-top:18px}
.rc-avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  font-family:var(--font-display);font-size:18px;color:#1a2238;background:var(--gold-grad)}
.rc-who{display:flex;flex-direction:column;gap:2px}
.rc-who .rc-name{font-family:var(--font-display);font-size:17px;line-height:1.1;color:var(--ink-0)}
.rc-who .rc-role{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-3)}
@media (max-width:900px){.reviews-grid{grid-template-columns:1fr;max-width:560px;margin:0 auto}}

/* alle-reviews overlay */
.reviews-modal{
  position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  padding:max(20px,4vh) max(16px,4vw);background:rgba(8,12,22,.92);
  animation:vlbFade .25s ease both;
}
.reviews-panel{
  width:min(860px,100%);max-height:min(86vh,860px);display:flex;flex-direction:column;
  background:linear-gradient(180deg,#243a61,#1c2c4c);
  border:1px solid rgba(240,210,138,.22);border-radius:var(--radius-lg);
  box-shadow:0 44px 120px rgba(0,0,0,.6);overflow:hidden;
  animation:vlbPop .4s cubic-bezier(.22,.61,.36,1) both;
}
.rp-head{
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:24px 28px;border-bottom:1px solid var(--navy-line);flex:none;
}
.rp-title h3{font-family:var(--font-display);font-size:26px;font-weight:500;color:var(--ink-0);margin:0 0 6px}
.rp-meta{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-1)}
.rp-stars{color:var(--gold-3);letter-spacing:2px;font-size:13px}
.rp-close{
  flex:none;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  cursor:pointer;background:rgba(33,50,81,.9);color:var(--ink-0);border:1px solid rgba(240,210,138,.3);
  transition:transform .25s ease,border-color .25s ease;
}
.rp-close:hover{transform:scale(1.08);border-color:rgba(240,210,138,.66)}
.rp-list{
  overflow-y:auto;padding:24px 28px;display:grid;gap:16px;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}
.rp-list .review-card{background:rgba(20,32,56,.55)}
.rp-foot{flex:none;padding:16px 28px;border-top:1px solid var(--navy-line);display:flex;justify-content:center}
.rp-foot a{
  display:inline-flex;align-items:center;gap:8px;color:var(--gold-3);text-decoration:none;
  font-size:13px;letter-spacing:.08em;font-weight:600;
}
.rp-foot a:hover{text-decoration:underline}
@media (max-width:640px){.rp-head{padding:18px 18px}.rp-list{padding:18px}.rp-foot{padding:14px 18px}}

/* ─── VSL (videopresentatie) ─────────────────────────────────────────── */
.vsl{
  position:relative;width:min(980px,100%);margin:0 auto;aspect-ratio:16/9;
  border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid rgba(240,210,138,.22);background:#0d1424;
  box-shadow:0 40px 110px rgba(0,0,0,.5), 0 0 60px rgba(240,210,138,.08);
}
.vsl iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.vsl-cover{
  -webkit-appearance:none;appearance:none;display:block;width:100%;height:100%;
  padding:0;border:0;background:none;cursor:pointer;position:relative;
}
.vsl-cover img{width:100%;height:100%;object-fit:cover;display:block}
.vsl-cover::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(80% 70% at 50% 50%, rgba(8,12,22,.0) 40%, rgba(8,12,22,.42) 100%);
}
.vsl-cover .bento-play{z-index:2}

/* ─── Animated section heading underline ─────────────────────────────── */
.eyebrow{position:relative}
.eyebrow::before{
  width:0 !important;
  transition:width 1.1s cubic-bezier(.22,.61,.36,1) .2s;
}
.is-in .eyebrow::before,
.reveal-stagger.is-in .eyebrow::before,
.reveal.is-in .eyebrow::before{
  width:28px !important;
}

/* ─── Card tilt + glow follow (set via JS --rx/--ry/--mx/--my) ──────── */
.tilt{
  transform-style:preserve-3d;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.tilt-spot{
  position:absolute;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),
              rgba(240,210,138,.18), transparent 60%);
  opacity:0;transition:opacity .35s ease;
  mix-blend-mode:screen;border-radius:inherit;
}
.tilt:hover .tilt-spot{opacity:1}

/* ─── Marquee for client logos ───────────────────────────────────────── */
.marquee{
  overflow:hidden;
  position:relative;
  mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.marquee-track{
  display:flex;gap:64px;width:max-content;align-items:center;
  animation:marqueeScroll 46s linear infinite;
}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track.is-paused{animation-play-state:paused}
@keyframes marqueeScroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
.marquee .logo-item{flex:0 0 auto;white-space:nowrap;display:flex;align-items:center}
.marquee .logo-item img{
  height:38px;width:auto;max-width:150px;object-fit:contain;display:block;
  filter:brightness(0) invert(1);
  opacity:.55;transition:opacity .3s ease;
}
.marquee .logo-item:hover img{opacity:1}

/* ─── Counter animation styling ──────────────────────────────────────── */
.counter{font-variant-numeric:tabular-nums}

/* ─── Bento tile zoom on hover ───────────────────────────────────────── */
.bento-tile image-slot,.bento-tile .ph,.bento-tile .bento-video{
  transition:transform 1.2s cubic-bezier(.22,.61,.36,1);
}
.bento-tile:hover image-slot,.bento-tile:hover .ph,.bento-tile:hover .bento-video{
  transform:scale(1.08);
}

/* service media zoom too */
.service-card .media image-slot,.service-card .media .ph{
  transition:transform 1.4s cubic-bezier(.22,.61,.36,1);
}
.service-card:hover .media image-slot,.service-card:hover .media .ph{
  transform:scale(1.06);
}

/* gradient divider between sections */
.gold-divider{
  height:1px;width:100%;
  background:linear-gradient(90deg,transparent,rgba(240,210,138,.35) 50%,transparent);
  margin:0 auto;
  max-width:80%;
}

/* eyebrow shimmer when revealed */
.eyebrow{overflow:hidden}

/* link arrow hover anim improvement */
.arrow-link svg{transition:transform .35s cubic-bezier(.22,.61,.36,1)}

/* ─── Videografie page: hero title ───────────────────────────────────── */
.vg-hero-title{
  font-size:clamp(40px, 6.2vw, 88px);
  line-height:1.05;letter-spacing:-.015em;
  max-width:16ch;margin:0;
  text-wrap:balance;
}

/* ─── Videografie page: vertical process timeline ────────────────────── */
.vg-timeline{
  max-width:780px;margin:56px auto 0;
  display:flex;flex-direction:column;position:relative;
}
.vg-tl-step{
  display:grid;grid-template-columns:64px 1fr;gap:28px;
  position:relative;padding-bottom:40px;
}
.vg-tl-step:last-child{padding-bottom:0}
.vg-tl-rail{position:relative;display:flex;justify-content:center}
.vg-tl-step:not(:last-child) .vg-tl-rail::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  top:60px;bottom:-20px;width:2px;
  background:linear-gradient(180deg, rgba(240,210,138,.5), rgba(240,210,138,.06));
}
.vg-tl-dot{
  width:60px;height:60px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:21px;color:var(--gold-3);
  border:1px solid rgba(240,210,138,.35);
  background:radial-gradient(circle at 32% 28%, rgba(240,210,138,.18), rgba(25,39,65,.5) 70%);
  box-shadow:0 0 26px rgba(240,210,138,.16);
  position:relative;z-index:1;
}
.vg-tl-card{
  padding:8px 0 0;
  border-bottom:1px solid var(--navy-line);
  padding-bottom:32px;
}
.vg-tl-step:last-child .vg-tl-card{border-bottom:0;padding-bottom:0}
.vg-tl-card h4{
  font-family:var(--font-display);font-size:clamp(20px,1.8vw,26px);
  color:var(--ink-0);margin:0 0 10px;letter-spacing:.01em;
}
.vg-tl-card p{color:var(--ink-2);font-size:16px;line-height:1.65;margin:0;max-width:52ch}
@media (max-width:560px){
  .vg-tl-step{grid-template-columns:50px 1fr;gap:18px}
  .vg-tl-dot{width:50px;height:50px;font-size:18px}
  .vg-tl-step:not(:last-child) .vg-tl-rail::after{top:50px}
}

/* ─── Videografie page: cinematic alternating process flow ───────────── */
.vg-flow{
  position:relative;max-width:720px;margin:56px auto 0;padding:8px 0;
}
.vg-flow::before{
  content:"";position:absolute;left:28px;top:8px;bottom:8px;width:2px;
  background:rgba(240,210,138,.13);border-radius:2px;
}
.vg-flow-fill{
  position:absolute;left:28px;top:8px;width:2px;height:0;
  border-radius:2px;overflow:visible;
  background:linear-gradient(180deg, var(--gold-1), var(--gold-3));
  box-shadow:0 0 18px rgba(240,210,138,.55);
  transition:height .55s cubic-bezier(.4,0,.2,1);z-index:1;
}
.vg-flow-comet{
  position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);
  width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle, #fff6df 8%, var(--gold-3) 55%, transparent 74%);
  box-shadow:0 0 14px 5px rgba(240,210,138,.6), 0 0 32px 10px rgba(240,210,138,.28);
}
@media (prefers-reduced-motion: no-preference){
  .vg-flow-comet{animation:vgCometPulse 1.6s ease-in-out infinite}
}
@keyframes vgCometPulse{
  0%,100%{transform:translateX(-50%) scale(1);opacity:.9}
  50%{transform:translateX(-50%) scale(1.4);opacity:1}
}
.vg-flow-step{position:relative;margin-bottom:30px;min-height:58px}
.vg-flow-step:last-child{margin-bottom:0}
.vg-flow-node{
  position:absolute;left:1px;top:1px;transform:scale(.84);transform-origin:center;
  width:56px;height:56px;border-radius:50%;z-index:2;
  display:flex;align-items:center;justify-content:center;color:rgba(240,210,138,.4);
  border:1px solid rgba(240,210,138,.16);
  background:#192741 radial-gradient(circle at 32% 28%, rgba(240,210,138,.08), transparent 70%);
  box-shadow:0 0 0 rgba(240,210,138,0);
  transition:transform .5s cubic-bezier(.22,.61,.36,1), color .5s ease, border-color .5s ease, box-shadow .5s ease, background .5s ease;
}
.vg-flow-step.is-active .vg-flow-node{
  transform:scale(1);
  color:var(--gold-3);
  border-color:rgba(240,210,138,.55);
  background:#192741 radial-gradient(circle at 32% 28%, rgba(240,210,138,.32), transparent 72%);
  box-shadow:0 0 34px rgba(240,210,138,.4);
}
.vg-flow-node svg{width:24px;height:24px;position:relative;z-index:2;transition:transform .5s ease}
.vg-flow-step.is-active .vg-flow-node svg{animation:vgIconPop .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes vgIconPop{
  0%{transform:scale(.2) rotate(-30deg);opacity:0}
  60%{transform:scale(1.18) rotate(8deg)}
  100%{transform:scale(1) rotate(0);opacity:1}
}
/* rotating scanner arc around an active node */
.vg-flow-ring{
  position:absolute;inset:-2px;border-radius:50%;pointer-events:none;z-index:1;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(240,210,138,.9) 55deg, transparent 130deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  opacity:0;transition:opacity .5s ease;
}
.vg-flow-step.is-active .vg-flow-ring{opacity:1}
@media (prefers-reduced-motion: no-preference){
  .vg-flow-step.is-active .vg-flow-ring{animation:vgRingSpin 3.6s linear infinite}
}
@keyframes vgRingSpin{to{transform:rotate(360deg)}}
/* one-shot expanding pulse when a node activates */
.vg-flow-pulse{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:0;
  border:1px solid rgba(240,210,138,.7);opacity:0;
}
.vg-flow-step.is-active .vg-flow-pulse{animation:vgNodePulse .9s ease-out}
@keyframes vgNodePulse{
  0%{opacity:.85;transform:scale(1)}
  100%{opacity:0;transform:scale(2.2)}
}
/* connector from node to card */
.vg-flow-node::after{
  content:"";position:absolute;left:100%;top:50%;width:38px;height:1px;z-index:0;
  background:linear-gradient(90deg, rgba(240,210,138,.6), transparent);
  opacity:.2;transition:opacity .5s ease;
}
.vg-flow-step.is-active .vg-flow-node::after{opacity:1}
.vg-flow-card{
  position:relative;width:auto;margin-left:96px;text-align:left;
  padding:22px 28px;border-radius:18px;overflow:hidden;
  background:linear-gradient(160deg, rgba(43,63,99,.4), rgba(25,39,65,.5));
  border:1px solid rgba(255,255,255,.05);
  opacity:.4;transform:translateX(10px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1), border-color .5s ease, box-shadow .5s ease;
}
.vg-flow-step.is-active .vg-flow-card{
  opacity:1;transform:translateX(0);
  border-color:rgba(240,210,138,.2);
  box-shadow:0 18px 48px rgba(0,0,0,.34);
}
/* giant ghosted step number behind the card content */
.vg-flow-ghost{
  position:absolute;top:-26px;right:8px;z-index:0;pointer-events:none;
  font-family:var(--font-display);font-weight:500;font-size:124px;line-height:1;
  color:rgba(240,210,138,.07);
  transform:translateY(16px) scale(.92);opacity:0;
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}
.vg-flow-step.is-active .vg-flow-ghost{opacity:1;transform:translateY(0) scale(1)}
/* shine sweep on reveal */
.vg-flow-card::before{
  content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;z-index:1;pointer-events:none;
  background:linear-gradient(105deg, transparent, rgba(255,246,223,.12), transparent);
  transform:skewX(-18deg);
}
.vg-flow-step.is-active .vg-flow-card::before{animation:vgCardShine 1.1s ease-out .15s}
@keyframes vgCardShine{0%{left:-130%}100%{left:170%}}
.vg-flow-num,.vg-flow-card h4,.vg-flow-card p{position:relative;z-index:2}
.vg-flow-step.is-active .vg-flow-card:hover{
  transform:translateX(0) translateY(-5px);
  border-color:rgba(240,210,138,.32);
  box-shadow:0 26px 60px rgba(0,0,0,.42);
}
.vg-flow-num{
  font-family:var(--font-body);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-3);display:block;margin-bottom:9px;
}
.vg-flow-card h4{font-family:var(--font-display);font-size:clamp(20px,1.9vw,25px);color:var(--ink-0);margin:0 0 9px}
.vg-flow-card p{color:var(--ink-2);font-size:15px;line-height:1.62;margin:0}
@media (max-width:620px){
  .vg-flow-card{margin-left:80px;padding:20px 22px}
  .vg-flow-node::after{width:22px}
  .vg-flow-ghost{font-size:96px}
}

/* ─── Videografie page: clean video-type cards (no imagery) ──────────── */
.vg-types{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px;
}
@media (max-width:900px){.vg-types{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.vg-types{grid-template-columns:1fr}}
.vg-type{
  position:relative;
  border-radius:20px;
  background:linear-gradient(160deg, rgba(43,63,99,.5), rgba(25,39,65,.55));
  border:1px solid var(--navy-line);
  overflow:hidden;
  transition:transform .4s cubic-bezier(.22,.61,.36,1), border-color .4s ease, box-shadow .4s ease;
}
.vg-type:hover{
  transform:translateY(-5px);
  border-color:rgba(240,210,138,.32);
  box-shadow:0 26px 60px rgba(0,0,0,.4);
}
.vg-type-img{position:relative;aspect-ratio:16/10;overflow:hidden}
.vg-type-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.16,1,.3,1)}
.vg-type:hover .vg-type-img img{transform:scale(1.06)}
.vg-type-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,19,43,.12) 0%,transparent 32%,rgba(11,19,43,.8) 100%)}
.vg-type-num{
  position:absolute;top:14px;right:18px;z-index:2;
  font-family:var(--font-display);font-size:30px;line-height:1;
  color:#fff;opacity:.92;text-shadow:0 2px 14px rgba(0,0,0,.5);
}
.vg-type-ic{
  position:absolute;left:18px;bottom:14px;z-index:3;
  width:48px;height:48px;border-radius:14px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;color:#1a1306;
  background:var(--gold-grad);box-shadow:0 12px 28px rgba(0,0,0,.4);
}
.vg-type-ic svg{width:22px;height:22px}
.vg-type-body{padding:26px 26px 28px}
.vg-type h3{
  font-family:var(--font-display);font-size:23px;color:var(--ink-0);margin:0 0 10px;
}
.vg-type p{color:var(--ink-2);font-size:14.5px;line-height:1.6;margin:0}

/* ─── Video-placeholder ───────────────────────────────────────────────────
   Beheerde video's krijgen een gebrande achtergrond, zodat een nog niet
   gerenderde reel nooit een puur zwart vlak is (vooral op iOS). De !important
   wint van de losse zwarte reel-achtergronden (#0d1424 / #000); zodra er een
   echt frame staat (klasse vm-has-frame) vervalt de regel en schildert het
   videoframe er gewoon overheen. */
video.vm:not(.vm-has-frame){
  background:
    radial-gradient(120% 90% at 50% 38%, rgba(240,210,138,.12), transparent 60%),
    linear-gradient(150deg, var(--navy-3), var(--navy-1)) !important;
}

/* ─── Mobiel GPU-dieet ────────────────────────────────────────────────────
   iOS Safari sluit pagina's af ("Er heeft zich herhaaldelijk een probleem
   voorgedaan") als er te veel GPU-geheugen wordt gebruikt. backdrop-filter
   maakt van elk element een eigen blur-laag op de GPU. We zetten hem op
   touch-apparaten uit voor de grootste/meest voorkomende vlakken — maar
   GERICHT, niet universeel: backdrop-filter en will-change bepalen ook het
   referentiekader (containing block) van fixed/sticky elementen, dus een
   universele reset gooit de mobiele layout door elkaar. */
@media (hover: none) and (pointer: coarse) {
  /* Magnetisch knop-effect uit op touch: een tik mag de knop nooit verplaatsen. */
  .btn.magnetic { transform: none !important; }
  .btn {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .btn:not(.btn--primary) { background: rgba(33, 50, 81, .82); }
  .nav {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(25, 39, 65, .94) !important;
  }
  .nav-wrap.is-scrolled .nav { background: rgba(25, 39, 65, .97) !important; }
  .vlightbox, .pf-gallery {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(8, 12, 22, .94);
  }
  .foto-lb {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(4, 7, 16, .96);
  }
  .reviews-badge, .reviews-modal, .rp-close, .vlightbox-close, .pf-gal-nav {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  /* titel-intro per woord uit op touch: koppen staan er direct en volledig,
     zonder kans op half-zichtbare of wegblurde woorden op een trage telefoon */
  .word-stagger > .word {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}