/* ============================================================
   BROOX VISUALS — premium dark studio site
   Type: Epilogue · Accent: violet/indigo glass
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

:root{
  --bg:        #09070f;
  --bg-soft:   #0f0c18;
  --panel:     #14101f;
  --panel-2:   #1a1528;
  --line:      rgba(180,168,224,0.14);
  --line-soft: rgba(180,168,224,0.08);

  --ink:       #f3f0fb;
  --ink-dim:   #c4bddb;
  --muted:     #8e87a8;
  --faint:     #5f5979;

  --violet:    #7b62f2;
  --violet-br: #9a82ff;
  --peri:      #bcb0ef;
  --blue:      #5a6ee6;
  --glow:      rgba(123,98,242,0.55);

  --grad: linear-gradient(120deg, #8f78ff 0%, #6c5bf0 45%, #5a6ee6 100%);

  --maxw: 1320px;
  --gut: clamp(20px, 5vw, 76px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --r: 18px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:'Epilogue', system-ui, sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.no-scroll{ overflow:hidden; }

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

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

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

/* ---------- type scale ---------- */
.eyebrow{
  font-size:13px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--peri); display:inline-flex; align-items:center; gap:12px;
}
.eyebrow::before{
  content:""; width:30px; height:1px; background:linear-gradient(90deg,var(--violet),transparent);
}
.display{
  font-weight:800; line-height:.96; letter-spacing:-.03em;
  font-size:clamp(46px, 8.5vw, 132px);
}
h2.section-title{
  font-weight:800; line-height:1.0; letter-spacing:-.025em;
  font-size:clamp(34px, 5.6vw, 80px);
}
.lead{
  font-size:clamp(18px,2vw,23px); color:var(--ink-dim); font-weight:400;
  line-height:1.55; max-width:62ch; text-wrap:pretty;
}

/* gradient text */
.grad-text{
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--gut);
  transition:padding .5s var(--ease), background .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  padding-top:14px; padding-bottom:14px;
  background:rgba(9,7,15,.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line-soft);
}
.nav__logo{ display:flex; align-items:center; gap:12px; }
.nav__logo img{ height:27px; filter:brightness(0) invert(1); }
.nav__links{ display:flex; align-items:center; gap:38px; }
.nav__links a{
  font-size:15px; font-weight:500; color:var(--ink-dim);
  position:relative; padding:4px 0; transition:color .3s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background:var(--violet-br); transition:width .35s var(--ease);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ width:100%; }

.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  font-weight:600; font-size:15px; letter-spacing:-.01em; white-space:nowrap;
  padding:13px 22px; border-radius:100px; overflow:hidden; isolation:isolate;
  transition:box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.btn__face{ position:relative; z-index:2; display:inline-flex; align-items:center; gap:10px; transition:color .4s var(--ease); }
.btn svg{ width:15px; height:15px; transition:transform .45s var(--ease-out); }
.btn:hover .btn__face svg{ transform:translateX(4px); }

/* liquid / gooey hover layer (injected by JS) */
.liquid{ position:absolute; inset:0; z-index:1; filter:url(#goo); pointer-events:none; }
.liquid i{ position:absolute; bottom:-42%; width:33%; height:160%; border-radius:50%;
  transform:translateY(104%); transition:transform .6s cubic-bezier(.62,0,.2,1); }
.liquid i:nth-child(1){ left:-12%; transition-delay:0s; }
.liquid i:nth-child(2){ left:12%;  transition-delay:.06s; }
.liquid i:nth-child(3){ left:35%;  transition-delay:.02s; }
.liquid i:nth-child(4){ left:58%;  transition-delay:.08s; }
.liquid i:nth-child(5){ left:80%;  transition-delay:.03s; }
.btn:hover .liquid i{ transform:translateY(0); }

.btn--primary{ background:var(--grad); color:#fff; box-shadow:0 6px 24px -8px var(--glow); }
.btn--primary .liquid i{ background:#5b46c9; }
.btn--primary:hover{ box-shadow:0 12px 38px -8px var(--glow); }
.btn--ghost{ border:1px solid var(--line); color:var(--ink); background:rgba(255,255,255,.03); }
.btn--ghost .liquid i{ background:var(--violet); }
.btn--ghost:hover{ border-color:transparent; box-shadow:0 12px 34px -10px var(--glow); }
.btn--ghost:hover .btn__face{ color:#fff; }

.nav__burger{ display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--line);
  flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.nav__burger span{ width:18px; height:1.6px; background:var(--ink); transition:.3s var(--ease); }

/* mobile menu */
.mobile-menu{
  position:fixed; inset:0; z-index:99; background:var(--bg);
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding:var(--gut); transform:translateY(-100%); transition:transform .6s var(--ease);
}
.mobile-menu.open{ transform:translateY(0); }
.mobile-menu a{ font-size:clamp(34px,9vw,56px); font-weight:800; letter-spacing:-.03em;
  padding:8px 0; border-bottom:1px solid var(--line-soft); }
/* CTA scaled down per golden ratio (÷1.618) so it sits quietly under the big links */
.mobile-menu .btn{ margin-top:34px; align-self:flex-start; width:fit-content;
  font-size:14px; padding:11px 18px; }

/* ============================================================
   HERO  (Apple-style scroll)
   ============================================================ */
.hero{ position:relative; height:320vh; }
.hero__sticky{ position:sticky; top:0; height:100vh; overflow:hidden; }
.hero__bg{
  position:absolute; inset:-6% ; background-size:cover; background-position:center;
  will-change:transform, filter; transform-origin:center;
}
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 8%, transparent 30%, rgba(9,7,15,.5) 75%, var(--bg) 100%),
             linear-gradient(180deg, rgba(9,7,15,.35) 0%, transparent 22%, transparent 55%, rgba(9,7,15,.9) 100%);
}
.hero__vign{ position:absolute; inset:0; box-shadow:inset 0 0 240px 40px rgba(9,7,15,.9); pointer-events:none; }

@keyframes heroFade{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } }
@keyframes badgePulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(92,230,160,.6), 0 0 12px 2px rgba(92,230,160,.9); }
  50%{ box-shadow:0 0 0 6px rgba(92,230,160,0), 0 0 16px 3px rgba(92,230,160,.9); } }
@keyframes logoFloat{ 0%,100%{ transform:translateY(-10px); } 50%{ transform:translateY(10px); } }

/* hero: big title + intro as one block left, 3D logo + pill right */
.hero__content{
  position:absolute; inset:0; z-index:3;
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  align-items:center; column-gap:clamp(20px,3vw,48px);
  padding:clamp(96px,12vh,140px) var(--gut) clamp(54px,8vh,100px);
  will-change:transform, opacity;
}
.hero__left{ display:flex; flex-direction:column; gap:clamp(24px,3.2vh,38px); }
.hero__display{
  color:#fff; font-weight:800; letter-spacing:-.04em;
  line-height:.94; font-size:clamp(42px,7vw,120px); text-shadow:0 8px 60px rgba(0,0,0,.4);
}
.hd-line{ display:block; white-space:nowrap; }
.hero__info{ max-width:480px; }
.hero__info .lead{ max-width:44ch; color:var(--ink-dim); }
.hero__cta{ margin-top:26px; display:flex; gap:16px; flex-wrap:wrap; }

.hero__visual{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(18px,3vh,32px);
}
.hero__logo-wrap{
  position:relative; display:block; width:min(440px,33vw); cursor:pointer;
  animation:logoFloat 6s ease-in-out infinite; will-change:transform;
}
.hero__logo-wrap:hover{ animation-play-state:paused; }
.hero__logo3d{
  display:block; width:100%; height:auto;
  filter:drop-shadow(0 26px 70px rgba(123,98,242,.5));
  transition:transform .5s var(--ease-out), filter .5s var(--ease);
}
.hero__logo-wrap:hover .hero__logo3d{
  transform:scale(1.05);
  filter:drop-shadow(0 40px 110px rgba(123,98,242,.85)) brightness(.7) saturate(1.1);
}
/* hover pop-up: a quote revealed over the logo */
.hero__logo-pop{
  position:absolute; inset:0; z-index:2; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:16px; text-align:center; padding:18px;
  opacity:0; transform:scale(.92); pointer-events:none;
  transition:opacity .45s var(--ease), transform .55s var(--ease-out);
}
.hero__logo-wrap:hover .hero__logo-pop{ opacity:1; transform:scale(1); }
.hero__logo-quote{ font-size:clamp(22px,2vw,32px); font-weight:800; letter-spacing:-.025em;
  line-height:1.1; color:#fff; text-shadow:0 4px 30px rgba(0,0,0,.75); }
/* lighter accent so it stays legible against the purple logo */
.hero__logo-quote .grad-text{ background:none; -webkit-text-fill-color:#dcd4ff; color:#dcd4ff; }
.hero__logo-link{ display:inline-flex; align-items:center; gap:9px; font-size:14px; font-weight:600;
  color:#fff; padding:10px 18px; border-radius:100px; border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.08); backdrop-filter:blur(8px); transition:.35s var(--ease); }
.hero__logo-link svg{ width:14px; height:14px; transition:transform .4s var(--ease-out); }
.hero__logo-wrap:hover .hero__logo-link:hover{ background:var(--grad); border-color:transparent; }
.hero__logo-wrap:hover .hero__logo-link:hover svg{ transform:translateX(4px); }
@media (prefers-reduced-motion: reduce){ .hero__logo-wrap{ animation:none; } }

.hero__badge{
  display:inline-flex; align-items:center; gap:11px; padding:9px 17px 9px 15px;
  background:rgba(255,255,255,.06); border:1px solid var(--line); border-radius:100px;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  font-size:14px; font-weight:600; color:var(--ink); white-space:nowrap;
}
.hero__badge i{ width:9px; height:9px; border-radius:50%; background:#5ce6a0; flex-shrink:0;
  box-shadow:0 0 12px 2px rgba(92,230,160,.9); animation:badgePulse 2.4s var(--ease) infinite; }
/* intro plays only when JS adds .intro-anim; elements stay visible without it */
body.intro-anim .hero__display{ opacity:0; animation:heroFade 1s var(--ease-out) .15s forwards; }
body.intro-anim .hero__visual{ opacity:0; animation:heroFade 1.1s var(--ease-out) .3s forwards; }
body.intro-anim .hero__info{ opacity:0; animation:heroFade 1s var(--ease-out) .45s forwards; }

/* iris reveal — appears centered on scroll with sentences one by one */
.hero__iris{
  position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; will-change:opacity;
}
.hero__iris-img{
  width:min(80vh,88vw); aspect-ratio:1; border-radius:50%;
  background-size:cover; background-position:center;
  transform:scale(.62); will-change:transform;
  box-shadow:0 0 150px 30px rgba(123,98,242,.4), inset 0 0 90px 14px rgba(0,0,0,.55);
}
.hero__iris-lines{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px; text-align:center; padding-inline:24px;
}
.iris-line{
  font-weight:800; letter-spacing:-.025em; line-height:1.06;
  font-size:clamp(30px,5.4vw,66px); color:#fff; opacity:0; transform:translateY(26px);
  will-change:opacity,transform; text-shadow:0 6px 44px rgba(0,0,0,.75);
}
.iris-line[data-line="1"]{ color:var(--peri); }

/* ============================================================
   reveal helpers
   ============================================================ */
.reveal{ opacity:0; transform:translateY(34px); filter:blur(5px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; filter:blur(0); }
.reveal-d1{ transition-delay:.08s; } .reveal-d2{ transition-delay:.16s; }
.reveal-d3{ transition-delay:.24s; } .reveal-d4{ transition-delay:.32s; }

.section{ position:relative; padding-block:clamp(90px,13vh,180px); }
.section__head{ display:flex; flex-direction:column; gap:26px; max-width:920px; }

/* ============================================================
   OVER / studio
   ============================================================ */
.about{ background:var(--bg); }
.about__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(40px,6vw,96px); align-items:center; margin-top:64px; }
.about__copy p{ font-size:clamp(19px,2.1vw,26px); line-height:1.5; font-weight:500; color:var(--ink); letter-spacing:-.01em; text-wrap:pretty; }
.about__copy p .grad-text{ font-weight:800; }
.about__copy .small{ margin-top:26px; font-size:17px; color:var(--muted); font-weight:400; line-height:1.6; max-width:52ch; }
.about__sign{ margin-top:34px; display:flex; align-items:center; gap:16px; }
.about__sign .av{ width:56px; height:56px; border-radius:50%; overflow:hidden; border:1px solid var(--line); }
.about__sign .nm{ font-weight:700; font-size:16px; }
.about__sign .rl{ font-size:14px; color:var(--muted); }

.portrait{
  position:relative; aspect-ratio:4/5; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line);
}
.portrait image-slot{ width:100%; height:100%; }
.portrait__badge{
  position:absolute; left:18px; bottom:18px; z-index:3;
  background:rgba(9,7,15,.55); backdrop-filter:blur(10px); border:1px solid var(--line);
  border-radius:100px; padding:9px 16px; font-size:13px; font-weight:600; color:var(--ink);
  display:flex; align-items:center; gap:8px;
}
.portrait__badge::before{ content:""; width:7px; height:7px; border-radius:50%; background:#5ce6a0; box-shadow:0 0 10px #5ce6a0; }

.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:80px; border-top:1px solid var(--line-soft); padding-top:48px; }
.stat{ text-align:center; }
.stat .n{ font-size:clamp(38px,4.6vw,60px); font-weight:800; letter-spacing:-.03em; line-height:1; }
.stat .l{ margin-top:12px; font-size:15px; color:var(--muted); font-weight:500; }

/* ============================================================
   STATEMENT — grote narratieve 100vh blokken met stagger
   ============================================================ */
.statement{ position:relative; min-height:100vh; display:flex; align-items:center;
  overflow:hidden; padding-block:clamp(90px,14vh,180px); }
.statement--alt{ background:var(--bg-soft); border-block:1px solid var(--line-soft); }
.statement__inner{ position:relative; z-index:2; width:100%; max-width:1040px; margin:0 auto; padding-inline:var(--gut); }
.statement__ghost{ position:absolute; z-index:0; left:-2vw; top:50%; transform:translateY(-50%);
  font-weight:800; letter-spacing:-.05em; line-height:.62; color:#fff; opacity:.028;
  font-size:clamp(220px,40vw,640px); pointer-events:none; user-select:none; white-space:nowrap; }
.statement__kicker{ display:inline-flex; align-items:center; gap:13px; font-size:13px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--peri); margin-bottom:32px; }
.statement__kicker::before{ content:""; width:34px; height:1px; background:linear-gradient(90deg,var(--violet),transparent); }
.statement__title{ font-weight:800; line-height:1.03; letter-spacing:-.03em; font-size:clamp(33px,5.2vw,74px); }
.statement__title em{ font-style:normal; }
.statement__body{ margin-top:clamp(30px,4vh,46px); display:flex; flex-direction:column; gap:18px; max-width:60ch; }
.statement__body p{ font-size:clamp(18px,1.55vw,23px); line-height:1.55; color:var(--ink-dim); text-wrap:pretty; }
.statement__body p strong{ color:var(--ink); font-weight:600; }
.statement__lead{ font-size:clamp(20px,1.9vw,27px); color:var(--ink); font-weight:600; letter-spacing:-.01em; }

/* split: two beats side by side */
.statement--split{ min-height:auto; padding-block:clamp(90px,15vh,190px); }
.statement__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,96px); align-items:start; max-width:1240px; }
.statement__col .statement__title{ font-size:clamp(28px,3.4vw,50px); }
.statement__col .statement__body{ margin-top:clamp(22px,2.4vw,30px); gap:16px; }
@media (max-width:840px){
  .statement__grid{ grid-template-columns:1fr; gap:clamp(48px,9vw,72px); }
}

/* staggered line reveal */
.st-line{ opacity:0; transform:translateY(42px); filter:blur(9px);
  transition:opacity 1s var(--ease-out), transform 1.05s var(--ease-out), filter 1s var(--ease-out); }
.stagger-scope.in .st-line{ opacity:1; transform:none; filter:blur(0); transition-delay:var(--d,0s); }
@media (prefers-reduced-motion: reduce){
  .st-line{ opacity:1; transform:none; filter:none; }
}

/* ============================================================
   BRANDING equation
   ============================================================ */
.branding{ background:var(--bg-soft); border-block:1px solid var(--line-soft); }
.eq{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:clamp(16px,2vw,30px); align-items:stretch; margin-top:70px; perspective:1600px; }
.eq__op{ display:flex; align-items:center; justify-content:center; font-size:clamp(34px,5vw,64px); font-weight:300; color:var(--faint); }
/* dramatic, staggered scroll-in for the three cards */
.eq__card.reveal{ opacity:0; filter:blur(8px); transform:translateY(74px) rotateX(22deg) scale(.9);
  transform-origin:50% 130%; transition:opacity 1s var(--ease-out), transform 1.15s var(--ease-out), filter 1s var(--ease-out); }
.eq__card.reveal.in{ opacity:1; filter:blur(0); transform:none; }
.eq__op.reveal{ opacity:0; transform:scale(0) rotate(-30deg); filter:blur(0);
  transition:opacity .5s var(--ease-out), transform .7s cubic-bezier(.34,1.56,.64,1); }
.eq__op.reveal.in{ opacity:1; transform:none; }
.eq__card{
  position:relative; background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:36px 32px 40px; overflow:hidden; transition:transform .5s var(--ease), border-color .5s var(--ease);
}
.eq__card::before{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .6s var(--ease);
  background:radial-gradient(120% 100% at 0% 0%, rgba(123,98,242,.18), transparent 60%);
}
.eq__card:hover{ transform:translateY(-6px); border-color:rgba(123,98,242,.4); }
.eq__card:hover::before{ opacity:1; }
.eq__card.result{ background:linear-gradient(150deg, rgba(70,207,138,.18), rgba(63,191,134,.05)); border-color:rgba(70,207,138,.42); }
.eq__card.result:hover{ border-color:rgba(70,207,138,.6); }
.eq__card.result::before{ background:radial-gradient(120% 100% at 0% 0%, rgba(70,207,138,.20), transparent 60%); }
.eq__card.result .eq__num{ color:#7fe9a6; }
.eq__card.result h3{ background:linear-gradient(120deg,#8ff0b4,#3fbf86); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.eq__num{ font-size:13px; font-weight:700; letter-spacing:.2em; color:var(--peri); }
.eq__card h3{ font-size:clamp(24px,2.6vw,32px); font-weight:800; letter-spacing:-.02em; margin-top:22px; }
.eq__card p{ font-size:16px; color:var(--muted); line-height:1.55; margin-top:14px; }
.eq__icon{ width:46px; height:46px; border-radius:12px; background:rgba(123,98,242,.12); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; margin-bottom:auto; }
.eq__icon svg{ width:22px; height:22px; stroke:var(--peri); }

/* ============================================================
   WORK — cursor-follow project rows
   ============================================================ */
.work{ background:var(--bg); position:relative; }
.work__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.work__list{ margin-top:60px; border-top:1px solid var(--line); }
.work__row{
  position:relative; display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:30px; padding:clamp(26px,3.4vw,46px) 8px;
  border-bottom:1px solid var(--line); cursor:pointer;
  transition:padding-left .55s var(--ease), background .5s var(--ease);
}
.work__row::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:0;
  background:var(--grad); transition:width .55s var(--ease); opacity:.9;
}
.work__row:hover{ padding-left:34px; }
.work__row:hover::before{ width:3px; }
.work__idx{ font-size:14px; font-weight:600; color:var(--faint); width:42px; transition:color .5s var(--ease); }
.work__row:hover .work__idx{ color:var(--peri); }
.work__name{ font-size:clamp(30px,5vw,72px); font-weight:800; letter-spacing:-.03em; line-height:1;
  color:var(--ink-dim); transition:color .5s var(--ease), transform .55s var(--ease); }
.work__row:hover .work__name{ color:#fff; transform:translateX(6px); }
.work__meta{ display:flex; align-items:center; gap:28px; }
.work__tag{ font-size:14px; font-weight:500; color:var(--muted); white-space:nowrap; }
.work__arrow{ width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:background .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease); }
.work__arrow svg{ width:18px; height:18px; transition:transform .5s var(--ease); }
.work__row:hover .work__arrow{ background:var(--grad); border-color:transparent; transform:rotate(-45deg); }

/* floating cursor preview */
.work__preview{
  position:fixed; top:0; left:0; z-index:60; width:340px; height:240px; border-radius:14px;
  overflow:hidden; pointer-events:none; opacity:0; transform:translate(-50%,-50%);
  transition:opacity .4s var(--ease);
  border:1px solid var(--line); box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
  will-change:transform, opacity;
}
.work__preview.show{ opacity:1; }
.work__preview-inner{ position:absolute; inset:0; transform:scale(.9); transition:transform .55s var(--ease-out); }
.work__preview.show .work__preview-inner{ transform:scale(1); }
.work__preview-inner img{ width:100%; height:100%; object-fit:cover; }
.work__pv-fallback{ position:absolute; inset:0; transition:opacity .35s var(--ease); }
.work__pv-fallback img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (hover:none){ .work__preview{ display:none; } }

/* mobile work thumbs */
.work__thumb{ display:none; }

/* ============================================================
   WERKWIJZE — process steps (timeline)
   ============================================================ */
.process{ background:var(--bg); }
/* centred section head (heading + button) */
.section__head--center{ align-items:center; text-align:center; max-width:none; margin-inline:auto; }
.steps{ list-style:none; margin-top:clamp(48px,7vh,82px);
  display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(16px,1.6vw,26px); }
.step{ position:relative; padding-top:28px; border-top:1px solid var(--line);
  transition:transform .5s var(--ease); }
.step::before{ content:""; position:absolute; top:-1px; left:0; height:2px; width:0;
  background:var(--grad); transition:width .6s var(--ease); }
.step:hover{ transform:translateY(-6px); }
.step:hover::before{ width:100%; }
.step__num{ display:block; font-size:clamp(34px,3.4vw,52px); font-weight:800; letter-spacing:-.03em;
  line-height:1; color:var(--faint); transition:color .45s var(--ease); }
.step:hover .step__num{ background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; }
.step__title{ margin-top:18px; font-size:clamp(17px,1.5vw,21px); font-weight:800; letter-spacing:-.02em; line-height:1.15; }
.step__desc{ margin-top:12px; font-size:15px; color:var(--muted); line-height:1.6; text-wrap:pretty; }

/* ============================================================
   DELIVERABLES — three colour-coded cards with checklists
   ============================================================ */
.deliver{ background:var(--bg-soft); border-block:1px solid var(--line-soft); }
.deliver__intro{ font-size:clamp(18px,2vw,23px); line-height:1.55; color:var(--ink-dim);
  max-width:60ch; text-wrap:pretty; }
.deliver__grid{ margin-top:clamp(48px,7vh,82px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2vw,28px); align-items:stretch; }
/* bento: column 3 stacks the Branding card + a CTA card to match the others' height */
.deliver__col{ display:flex; flex-direction:column; gap:clamp(20px,2vw,28px); min-height:100%; }
.deliver__col .dcard--gold{ flex:0 0 auto; }
.deliver__col .dcard--cta{ flex:1 1 auto; }

.dcard{ position:relative; isolation:isolate; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); padding:clamp(28px,2.4vw,38px); overflow:hidden;
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease); }
.dcard::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .6s var(--ease);
  background:radial-gradient(125% 90% at 0% 0%, var(--c-glow), transparent 58%); }
.dcard::after{ content:""; position:absolute; left:0; top:0; right:0; height:3px;
  background:var(--c-bar); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease); }
.dcard:hover{ transform:translateY(-7px); border-color:var(--c-border);
  box-shadow:0 34px 70px -40px rgba(0,0,0,.85); }
.dcard:hover::before{ opacity:1; }
.dcard:hover::after{ transform:scaleX(1); }

.dcard__tag{ display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--c-text); }
.dcard__title{ font-size:clamp(23px,2.2vw,30px); font-weight:800; letter-spacing:-.025em;
  background:var(--c-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.dcard__desc{ margin-top:14px; font-size:15.5px; color:var(--muted); line-height:1.62; text-wrap:pretty; }
.dcard__list{ list-style:none; margin-top:24px; padding-top:22px; border-top:1px solid var(--line-soft);
  display:flex; flex-direction:column; gap:12px; }
.dcard__list li{ position:relative; padding-left:30px; font-size:15px; font-weight:500;
  color:var(--ink-dim); letter-spacing:-.005em; }
.dcard__list li::before{ content:""; position:absolute; left:0; top:1px; width:19px; height:19px;
  background:var(--c-text);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.3-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.3-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .35s var(--ease); }
.dcard:hover .dcard__list li::before{ transform:scale(1.12); }

/* colour themes */
.dcard--green{ --c-text:#7fe9a6; --c-border:rgba(70,207,138,.5); --c-glow:rgba(70,207,138,.16);
  --c-bar:linear-gradient(90deg,#8ff0b4,#3fbf86); --c-grad:linear-gradient(120deg,#8ff0b4,#3fbf86); }
.dcard--violet{ --c-text:#a48cff; --c-border:rgba(123,98,242,.5); --c-glow:rgba(123,98,242,.18);
  --c-bar:var(--grad); --c-grad:linear-gradient(120deg,#a48cff,#6c5bf0); }
.dcard--gold{ --c-text:#ffce6b; --c-border:rgba(255,192,67,.5); --c-glow:rgba(255,192,67,.15);
  --c-bar:linear-gradient(90deg,#ffd98a,#f0a93f); --c-grad:linear-gradient(120deg,#ffd98a,#f0a93f); }

/* CTA card — acts as a button to the free branding check */
.dcard--cta{ display:flex; flex-direction:column; justify-content:space-between; gap:clamp(20px,2vw,30px);
  background:var(--grad); border-color:transparent; text-decoration:none; cursor:pointer;
  box-shadow:0 18px 50px -28px var(--glow); }
.dcard--cta::before{ background:radial-gradient(120% 100% at 100% 100%, rgba(255,255,255,.22), transparent 55%); }
.dcard--cta::after{ content:none; }
.dcard--cta:hover{ transform:translateY(-7px); border-color:transparent;
  box-shadow:0 34px 80px -30px var(--glow); }
.dcard__cta-text{ font-size:clamp(18px,1.55vw,22px); font-weight:700; line-height:1.4;
  letter-spacing:-.015em; color:#fff; text-wrap:pretty; }
.dcard__cta-action{ display:inline-flex; align-items:center; gap:10px; align-self:flex-start;
  font-size:15px; font-weight:700; color:#fff; padding:11px 20px; border-radius:100px;
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(6px); transition:background .35s var(--ease), transform .35s var(--ease); }
.dcard__cta-action svg{ width:15px; height:15px; transition:transform .4s var(--ease-out); }
.dcard--cta:hover .dcard__cta-action{ background:rgba(255,255,255,.26); }
.dcard--cta:hover .dcard__cta-action svg{ transform:translateX(4px); }

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews{ background:var(--bg-soft); border-block:1px solid var(--line-soft); overflow:hidden; }
.reviews__top{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.reviews__badge{ display:flex; align-items:center; gap:14px; background:var(--panel); border:1px solid var(--line);
  border-radius:100px; padding:11px 22px 11px 15px; }
.reviews__g{ width:30px; height:30px; flex-shrink:0; }
.reviews__rate{ display:flex; align-items:center; gap:9px; }
.reviews__stars{ color:#ffc043; letter-spacing:2px; font-size:15px; }
.reviews__rate strong{ font-size:18px; font-weight:800; letter-spacing:-.01em; }
.reviews__sub{ font-size:13px; color:var(--muted); margin-top:1px; }

.reviews__masonry{ margin-top:60px; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
.rcard{ display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); padding:28px 28px 26px; position:relative; height:100%;
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease); }
.rcard:hover{ transform:translateY(-5px); border-color:rgba(123,98,242,.35); box-shadow:0 24px 50px -28px rgba(0,0,0,.7); }
.rcard__stars{ color:#ffc043; letter-spacing:3px; font-size:15px; display:block; margin-bottom:16px; }
.rcard__quote{ font-size:clamp(17px,1.55vw,21px); line-height:1.5; font-weight:600; letter-spacing:-.012em; color:var(--ink); text-wrap:pretty; }
.rcard__quote .hl{ background:linear-gradient(120deg,#a48cff,#7b62f2); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.rcard__who{ margin-top:auto; padding-top:22px; display:flex; align-items:center; gap:13px; }
.rcard__av{ width:46px; height:46px; border-radius:50%; overflow:hidden; flex-shrink:0;
  border:1px solid var(--line); background:var(--panel-2); }
.rcard__img{ width:100%; height:100%; object-fit:cover; display:block; }
.rcard__avi{ width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:800; letter-spacing:.02em; color:#fff; background:var(--grad); }
.rcard__nm{ display:flex; flex-direction:column; font-weight:700; font-size:15px; line-height:1.25; color:var(--ink); }
.rcard__nm small{ font-weight:500; font-size:12.5px; color:var(--muted); margin-top:2px; }
.reviews__masonry .rcard:nth-child(3n+2){ transition-delay:.07s; }
.reviews__masonry .rcard:nth-child(3n+3){ transition-delay:.14s; }

/* ============================================================
   CTA — branding check
   ============================================================ */
.cta{ position:relative; overflow:hidden; }
.cta__inner{
  position:relative; border-radius:clamp(20px,2.5vw,34px); overflow:hidden;
  padding:clamp(56px,9vw,130px) clamp(28px,6vw,90px); text-align:center;
  border:1px solid var(--line);
}
.cta__bg{ position:absolute; inset:0; background-size:cover; background-position:center; z-index:0; transform:scale(1.05); }
.cta__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(9,7,15,.55), rgba(9,7,15,.78)); }
.cta__inner > *{ position:relative; z-index:2; }
.cta h2{ font-weight:800; letter-spacing:-.03em; line-height:1; font-size:clamp(38px,7vw,104px); color:#fff; }
.cta p{ margin:28px auto 0; max-width:46ch; font-size:clamp(18px,2vw,22px); color:var(--ink-dim); }
.cta__btns{ margin-top:44px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.cta__note{ margin-top:26px; font-size:14px; color:var(--muted); display:flex; gap:20px; justify-content:center; flex-wrap:wrap; }
.cta__note span{ display:inline-flex; align-items:center; gap:8px; }
.cta__note svg{ width:15px; height:15px; stroke:#5ce6a0; }

/* ============================================================
   CONTACT / FOOTER
   ============================================================ */
.foot{ background:var(--bg); padding-top:clamp(48px,7vh,80px); }
.foot__top{ display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
  padding-bottom:clamp(28px,4vh,44px); border-bottom:1px solid var(--line); }
.foot__email{ font-size:clamp(22px,3.4vw,40px); font-weight:800; letter-spacing:-.025em; color:var(--ink);
  background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  transition:opacity .3s var(--ease); }
.foot__email:hover{ opacity:.8; }
.foot__socials{ display:flex; gap:12px; }
.foot__socials a{ width:44px; height:44px; border-radius:50%; border:1px solid var(--line); display:flex;
  align-items:center; justify-content:center; transition:.4s var(--ease); }
.foot__socials a:hover{ background:var(--grad); border-color:transparent; transform:translateY(-3px); }
.foot__socials svg{ width:18px; height:18px; fill:currentColor; }
.foot__bottom{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:30px 0 40px; font-size:14px; color:var(--muted); }
.foot__bottom img{ height:18px; filter:brightness(0) invert(1); opacity:.8; }
.foot__legal{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.foot__legal a{ font-size:13px; color:var(--faint); text-decoration:underline; text-underline-offset:3px;
  transition:color .3s var(--ease); }
.foot__legal a:hover{ color:var(--ink-dim); }

/* ============================================================
   PROJECT MODAL
   ============================================================ */
.modal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  padding:clamp(16px,4vw,48px); opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s; }
.modal.open{ opacity:1; visibility:visible; }
.modal__overlay{ position:absolute; inset:0; background:rgba(5,4,10,.78); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.modal__panel{
  position:relative; z-index:2; width:min(960px,100%); max-height:90vh; overflow-y:auto; overflow-x:hidden;
  display:block; background:var(--panel); border:1px solid var(--line);
  border-radius:clamp(16px,2vw,26px); box-shadow:0 50px 120px -30px rgba(0,0,0,.8);
  transform:translateY(26px) scale(.97); opacity:0; transition:transform .6s var(--ease-out), opacity .5s var(--ease); }
.modal.open .modal__panel{ transform:none; opacity:1; }
/* sticky so it stays in view while the whole panel scrolls; negative bottom margin keeps it out of the flow */
.modal__close{ position:sticky; top:16px; z-index:6; display:block; width:42px; height:42px; border-radius:50%;
  margin:16px 16px -58px auto;
  background:rgba(9,7,15,.55); border:1px solid var(--line); backdrop-filter:blur(8px);
  color:var(--ink); transition:.35s var(--ease); }
.modal__close svg{ width:18px; height:18px; display:block; margin:auto; }
.modal__close:hover{ background:var(--violet); border-color:transparent; transform:rotate(90deg); }

.modal__media{ position:relative; width:100%; aspect-ratio:16/10;
  background:radial-gradient(120% 120% at 50% 0%, #15101f, #0c0a14 70%); overflow:hidden;
  border-bottom:1px solid var(--line-soft); }
.modal__slides{ display:flex; height:100%; transition:transform .6s var(--ease-out); }
.modal__slides .slide{ min-width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:clamp(14px,2.4vw,30px); }
.modal__slides .slide img{ width:100%; height:100%; object-fit:contain; border-radius:8px; }
.modal__arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:46px; height:46px;
  border-radius:50%; background:rgba(9,7,15,.6); border:1px solid var(--line); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; color:#fff; transition:.35s var(--ease); }
.modal__arrow svg{ width:20px; height:20px; }
.modal__arrow--prev{ left:16px; } .modal__arrow--next{ right:16px; }
.modal__arrow:hover{ background:var(--violet); border-color:transparent; }
.modal__arrow[hidden]{ display:none; }
.modal__dots{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); z-index:4; display:flex; gap:8px; }
.modal__dots button{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.35); transition:.3s var(--ease); }
.modal__dots button.on{ background:#fff; width:22px; border-radius:4px; }

.modal__body{ padding:clamp(28px,3.2vw,48px); display:flex; flex-direction:column; }
.modal__tag{ font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--peri); margin-bottom:16px; }
.modal__title{ font-size:clamp(28px,3.6vw,44px); font-weight:800; letter-spacing:-.03em; line-height:1.02; }
.modal__tagline{ margin-top:16px; font-size:clamp(17px,1.7vw,21px); line-height:1.5; color:var(--ink-dim); font-weight:500; text-wrap:pretty; max-width:70ch; }
.modal__blocks{ margin-top:clamp(28px,3vw,38px); display:flex; flex-direction:column; gap:clamp(22px,2.4vw,30px); }
.modal__block{ position:relative; padding-left:18px; max-width:74ch; }
.modal__block::before{ content:""; position:absolute; left:0; top:4px; bottom:4px; width:3px; border-radius:3px; background:var(--grad); }
.modal__block h4{ font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.modal__block p{ font-size:15.5px; line-height:1.6; color:var(--ink-dim); text-wrap:pretty; }
.modal__cta{ margin-top:clamp(30px,3.4vw,40px); align-self:flex-start; }
body.modal-open{ overflow:hidden; }

@media (max-width:760px){
  .modal__media{ aspect-ratio:4/3; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* large / ultra-wide screens */
@media (min-width:1600px){
  :root{ --maxw:1480px; }
}
@media (min-width:2000px){
  :root{ --maxw:1640px; }
  .reviews__masonry{ grid-template-columns:repeat(4,1fr); }
}

/* tablet & small laptop */
@media (max-width:1080px){
  .reviews__masonry{ grid-template-columns:repeat(2,1fr); }
  .reviews__masonry .rcard:nth-child(3n+2),
  .reviews__masonry .rcard:nth-child(3n+3){ transition-delay:0s; }
  .reviews__masonry .rcard:nth-child(2n){ transition-delay:.08s; }
}
@media (max-width:960px){
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
  .nav .btn--primary{ display:none; }
  .about__grid{ grid-template-columns:1fr; }
  .portrait{ max-width:440px; }
  .eq{ grid-template-columns:1fr; perspective:1200px; }
  .eq__op{ padding:4px 0; }
  .foot__top{ gap:24px; }
  .stats{ grid-template-columns:repeat(2,1fr); gap:30px 24px; }
  .reviews__top{ align-items:flex-start; }
  .steps{ grid-template-columns:repeat(3,1fr); row-gap:clamp(30px,5vw,44px); column-gap:clamp(18px,3vw,30px); }
  .deliver__grid{ grid-template-columns:1fr; max-width:640px; }
}

/* hero: tablet — keep two columns but shrink logo a touch */
@media (max-width:1080px){
  .hero__logo-wrap{ width:min(360px,38vw); }
}

/* hero: stacked layout for narrow screens (title, logo+pill, info) */
@media (max-width:820px){
  .hero{ height:260vh; }
  .hero__content{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:clamp(20px,3vh,36px);
    padding:clamp(92px,12vh,118px) var(--gut) clamp(40px,6vh,72px);
  }
  .hero__left{ display:contents; }
  .hero__display{ order:1; text-align:center; font-size:clamp(38px,10.5vw,74px); }
  .hero__visual{ order:2; gap:16px; }
  .hero__logo-wrap{ width:min(264px,54vw); }
  .hero__info{ order:3; max-width:none; text-align:center; }
  .hero__info .lead{ max-width:46ch; margin:0 auto; }
  .hero__cta{ justify-content:center; margin-top:22px; }
}

/* mobile portrait */
@media (max-width:680px){
  .work__meta .work__tag{ display:none; }
  .work__row{ gap:16px; grid-template-columns:auto 1fr auto; }
  .hero{ height:260vh; }
  .hero__iris-img{ width:min(64vh,92vw); }
  .reviews__masonry{ grid-template-columns:1fr; }
  .reviews__badge{ width:100%; justify-content:flex-start; }
  .cta__note{ flex-direction:column; gap:12px; align-items:center; }
  .foot__bottom{ flex-direction:column; align-items:flex-start; gap:18px; }
  .work__arrow{ width:40px; height:40px; }
  .steps{ grid-template-columns:1fr; row-gap:clamp(26px,5vw,38px); }
  .deliver__grid{ max-width:none; }
}
@media (max-width:420px){
  .hero__cta .btn, .cta__btns .btn{ width:100%; }
  .work__name{ font-size:clamp(26px,8vw,40px); }
}