/* ============================================================================
   MK Vision — motion layer (vervangt mk-fix27-final.css, mk-fix29-final.css en
   de "fix28"-staart van mkv-theme.css).

   Structuur:
     1. Basis / guards
     2. Header & menu (Lusion-animatie)
     3. CTA-knop systeem
     4. Reveal-systeem (IO-classes; JS zet .is-lusion-visible)
     5. Scroll-warp (GSAP zet --mk-warp per sectieblok)
     6. Featured projects (WebGL hover canvas + polish)
     7. About drawpath
     8. Werkwijze — gepinde GSAP scroll-story
     9. Cursor trail + back-to-top
    10. Mobiel / reduced motion

   !important wordt alleen gebruikt waar mkv-theme.css zelf
   !important gebruikt en overschreven moet worden.
   ========================================================================== */

/* 1. Basis ---------------------------------------------------------------- */
body{background:linear-gradient(180deg,#f4f7f6 0%,#eaf5f4 18%,#f4f8f7 45%,#eef5f3 100%)!important;}
/* Projecten-pagina: secties transparant zodat body-gradient zichtbaar is */
body.mk-page-projects .mk-projects-main,
body.mk-page-projects .lusion-native-section{background:transparent!important;}
/* #work (projecten-grid) krijgt witte achtergrond — zelfde als home-page */
body.mk-page-projects #work.lusion-projects-shell{background:linear-gradient(180deg,#f4f7f6 0%,#eaf5f4 18%,#f4f8f7 45%,#eef5f3 100%)!important}
/* FAQ-sectie op projecten pagina krijgt lavender accent */
#faq-projects{background:#f0f1fa!important;}
/* Over-ons: titel/desc/CTA statisch zichtbaar (net als home hero); alleen de
   lijn tekent op load en de showreel morpht op scroll. */
.mk-page-about #home-reel-cta{opacity:1!important;}
/* overflow op main.page breekt position:sticky in Chrome — daarom visible.
   Reel-sectie heeft geen sticky-children, dus daar clip we de visuele overflow. */
main.page{background:transparent!important;overflow:visible!important;}
#home-reel{overflow:clip!important;}
/* Guard: de oude word-splitter uit de bundle mag tekst niet herbouwen */
.split-word,.split-line{display:inline!important;white-space:normal!important;margin-right:0!important;}

/* 2. Header & menu --------------------------------------------------------- */
#header{z-index:90!important;}
#header-right{gap:.75em!important;align-items:center!important;}
#header-right-sound-btn,#header-right-talk-btn-placeholder,#header-center{display:none!important;}
#header-right-talk-btn,#header-right-menu-btn{position:relative!important;left:auto!important;transform:scale(1)!important;pointer-events:auto!important;height:3.2em!important;white-space:nowrap!important;overflow:hidden!important;}
#header-right-talk-btn{min-width:10.65em!important;width:auto!important;padding:0 1.25em 0 1.55em!important;}
#header-right-menu-btn{min-width:7.3em!important;width:auto!important;padding:0 1.2em!important;}
#header-right-menu-btn-inner{height:100%!important;overflow:hidden!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:.625em!important;}
#header-right-menu-btn-text{display:inline-block!important;position:relative!important;opacity:1!important;transform:translate3d(0,0,0)!important;transition:transform .3s cubic-bezier(.4,0,.1,1),opacity .2s ease!important;}
#header-right-menu-btn-text-close{display:inline-block!important;position:absolute!important;left:0!important;top:50%!important;opacity:0!important;transform:translate3d(0,150%,0)!important;transition:transform .3s cubic-bezier(.4,0,.1,1),opacity .2s ease!important;}
#header-right-menu-btn.--opened #header-right-menu-btn-text{transform:translate3d(0,-150%,0)!important;opacity:0!important;}
#header-right-menu-btn.--opened #header-right-menu-btn-text-close{transform:translate3d(0,-50%,0)!important;opacity:1!important;}
#header-right-menu-btn-dots{flex:0 0 auto!important;}
#header-menu.--opened #header-menu-links,
#header-menu.--opened #header-menu-newsletter,
#header-menu.--opened #header-menu-talk,
#header-menu.--opened #header-menu-labs{transform:translate3d(0,0,0)!important;opacity:1!important;}
#header-menu:not(.--opened) #header-menu-links{transform:translate3d(0,5.5em,0) rotate(3.5deg)!important;opacity:0!important;}
#header-menu:not(.--opened) #header-menu-newsletter,
#header-menu:not(.--opened) #header-menu-talk,
#header-menu:not(.--opened) #header-menu-labs{transform:translate3d(0,7.75em,0) rotate(-3.5deg)!important;opacity:0!important;}
/* Mobiel zoals lusion: alleen logo + menu-knop, geen Plan-project knop */
@media(max-width:812px){
  #header-right-talk-btn{display:none!important;}
  #header-right{gap:0!important;}
}

/* 3. CTA-knoppen ----------------------------------------------------------- */
.mk-hero-btn,#header-right-talk-btn{overflow:hidden!important;}
.mk-hero-btn .mk-hero-btn__arrow,#header-right-talk-btn-arrow{transform:translate3d(-2.7em,0,0)!important;transition:transform .3s cubic-bezier(.4,0,.1,1)!important;}
.mk-hero-btn .mk-hero-btn__text,#header-right-talk-btn-text{transition:transform .3s cubic-bezier(.4,0,.1,1)!important;}
.mk-hero-btn .mk-hero-btn__dot,#header-right-talk-btn-dots{transition:transform .3s cubic-bezier(.4,0,.1,1),opacity .2s ease!important;}
@media(hover:hover){
  .mk-hero-btn:hover .mk-hero-btn__arrow,#header-right-talk-btn:hover #header-right-talk-btn-arrow{transform:translate3d(0,0,0)!important;}
  .mk-hero-btn:hover .mk-hero-btn__text,#header-right-talk-btn:hover #header-right-talk-btn-text{transform:translate3d(1.5em,0,0)!important;}
  .mk-hero-btn:hover .mk-hero-btn__dot,#header-right-talk-btn:hover #header-right-talk-btn-dots{transform:scale(0) translateZ(0)!important;opacity:0!important;}
}

/* 4. Reveals --------------------------------------------------------------- */
.reveal-item,[data-mk-reveal],.mk-about-card,.project-grid__item,.mk-story-card,.tcard,.svc-card,.mk-reveal-section{
  opacity:0!important;
  transform:translate3d(0,48px,0) scale(.988)!important;
  filter:blur(8px)!important;
  transition:opacity .82s cubic-bezier(.16,1,.3,1),transform 1.05s cubic-bezier(.16,1,.3,1),filter .82s cubic-bezier(.16,1,.3,1)!important;
  transition-delay:calc(var(--mk-reveal-index,0) * 22ms)!important;
}
.reveal-item.is-lusion-visible,[data-mk-reveal].is-lusion-visible,.mk-about-card.is-lusion-visible,
.project-grid__item.is-lusion-visible,.mk-story-card.is-lusion-visible,.tcard.is-lusion-visible,
.svc-card.is-lusion-visible,.mk-reveal-section.is-lusion-visible{
  opacity:1!important;transform:translate3d(0,0,0) scale(1)!important;filter:blur(0)!important;visibility:visible!important;
}
.mk-light-dark-text{color:rgba(0,0,0,calc(.24 + var(--mk-text-progress,0) * .76))!important;transition:color .14s linear!important;}

/* 5. Scroll-warp ------------------------------------------------------------
   GSAP schrijft --mk-warp (-1..1, velocity x nabijheid viewport-center) op de
   grote contentblokken. Zelfde 'page bend'-gevoel als lusion.co, DOM-variant. */
.mk-warp-target{
  will-change:transform;
  transform:perspective(1500px)
    skewY(calc(var(--mk-warp,0) * .34deg))
    rotateX(calc(var(--mk-warp,0) * -1.3deg))
    scaleY(calc(1 + var(--mk-warp-abs,0) * .012));
  transform-origin:50% 50%;
}
#header,#header *{filter:none!important;}

/* 6. Featured projects ------------------------------------------------------
   De afbeeldingen worden als WebGL-planes gerenderd (mkv-runtime.js,
   port van bizarro/infinite-webl-gallery) en buigen mee met scrollsnelheid.
   Zonder WebGL (of mobiel) blijven de DOM-afbeeldingen gewoon staan. */
#mk-media-gl-canvas{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;z-index:42!important;pointer-events:none!important;mix-blend-mode:normal!important;}
html.mk-gl-media #home-featured .project-grid__image,
html.mk-gl-media #home-featured .project-item-image,
html.mk-gl-media [data-gl-item] img,
html.mk-gl-media .tcard__portrait img {opacity:0!important;transition:none!important;}
#home-featured .project-grid__item{visibility:visible!important;}
#home-featured .project-grid__item.mk-project-hidden{display:none!important;}
#home-featured .project-grid__image-wrapper{overflow:hidden!important;position:relative!important;background:#eef3f6!important;}
#home-featured .project-grid__image,#home-featured .project-item-image{opacity:1!important;visibility:visible!important;transform:translate3d(0,0,0) scale(1.01)!important;filter:saturate(1) contrast(1)!important;transition:opacity .24s ease,transform .55s cubic-bezier(.16,1,.3,1),filter .28s ease!important;}
#home-featured .project-grid__item:hover .project-grid__image,#home-featured .project-grid__item:hover .project-item-image{transform:translate3d(0,-2px,0) scale(1.035)!important;filter:saturate(1.04) contrast(1.03)!important;}
/* Load more gecentreerd onder het grid */
#home-featured .mk-projects-loadmore-wrap{grid-column:1/-1!important;display:flex!important;justify-content:center!important;width:100%!important;float:none!important;margin:clamp(34px,4vw,64px) auto 0!important;}

/* 7. About drawpath ----------------------------------------------------------
   Positionering/kleur komt uit mkv-theme.css (--fix22 laag);
   GSAP scrubt stroke-dashoffset van 1 -> 0 (pathlength="1" in de SVG). */
#awards{position:relative!important;overflow:hidden!important;isolation:isolate!important;}
#awards .mk-about-drawline{display:block!important;}
/* Overrulet de kapotte var(--mk-path-len)-regel uit option23 (dasharray==dashoffset).
   GSAP animeert --mk-draw van 1 naar 0 (pad heeft pathlength="1"). */
/* Zelfde lijnstijl als de reel-lijn op over-ons: gelijke dikte en glow.
   Het pad loopt nu ONDER de kop door i.p.v. er als lus omheen, zodat de
   tekst leesbaar blijft. De inhoud staat sowieso boven de lijn (z-index 2). */
#awards.mk-about-redesign--fix22 .mk-about-drawline path{
  stroke-dasharray:1!important;
  stroke-dashoffset:var(--mk-draw,1)!important;
  stroke-width:clamp(20px,2.6vw,46px)!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
#awards.mk-about-redesign--fix22 .mk-about-drawline{
  mix-blend-mode:normal!important;
  filter:drop-shadow(0 18px 40px rgba(252,91,52,.22))!important;
  /* Spant nu de HELE sectie op, zodat het pad van de vrije band onder de kop
     tot achter de dienstblokken kan lopen. viewBox 1600x1040 = de sectie zelf. */
  left:0!important;
  right:auto!important;
  top:0!important;
  width:100%!important;
  height:100%!important;
}
/* Twee varianten: desktop golft onder de kop door en maakt de lus achter de
   dienstblokken; mobiel heeft een eigen, compactere lus (kaarten stapelen). */
#awards .mk-about-drawline__mob{display:none!important;}
@media(max-width:812px){
  #awards .mk-about-drawline__desk{display:none!important;}
  #awards .mk-about-drawline__mob{display:block!important;}
  /* De SVG-box is op mobiel smal én hoog (±325x1190) terwijl de viewBox breed
     is; preserveAspectRatio="none" rekt dus verticaal op en drukt horizontaal
     in. Zonder correctie wordt dezelfde stroke horizontaal ~23px en verticaal
     ~4px. vector-effect houdt de dikte in schermpixels, dus overal gelijk —
     en daarmee ongeveer even zwaar als op desktop. */
  /* Selector moet de `path`-regel hierboven verslaan (1 id + 2 classes + type),
     vandaar de extra class op het pad zelf. */
  #awards.mk-about-redesign--fix22 .mk-about-drawline path.mk-about-drawline__mob{
    stroke-width:26px!important;
  }
}
#awards .mk-about-redesign__grid,#awards .mk-about-redesign__label,#awards .mk-about-redesign__title,#awards .mk-about-redesign__intro,#awards .mk-about-redesign__cards{position:relative!important;z-index:2!important;}

/* 8. Werkwijze — gepinde scroll-story --------------------------------------- */
.mk-process-story{position:relative!important;min-height:auto!important;padding:clamp(86px,8vw,140px) clamp(10px,1.4vw,26px) clamp(100px,9vw,150px)!important;isolation:isolate!important;overflow:visible!important;background:linear-gradient(180deg,rgba(242,248,247,.72),rgba(238,246,244,.92))!important;}
.mk-story-head{max-width:1280px;margin-left:auto;margin-right:auto;}
/* De shell is de sticky-container: hij moet de volledige scrollafstand hoog zijn */
.mk-story-shell{max-width:100%!important;margin:0 auto!important;min-height:400vh!important;}
.mk-story-head{position:relative!important;top:auto!important;z-index:8!important;padding-bottom:clamp(20px,3vw,42px)!important;background:transparent!important;}
.mk-story-pin {
    position: sticky!important;
    top: clamp(84px,10vh,128px)!important;
    min-height: clamp(580px,74vh,840px)!important;
    border-radius: 34px!important;
    overflow: hidden!important;
}/* De reis: horizontale track die door GSAP van links naar rechts wordt
   gescrubd terwijl je verticaal scrolt (mdx.so-achtig, op lichte achtergrond) */
.mk-journey{position:absolute!important;inset:0!important;overflow:hidden!important;z-index:2!important;}
/* Dikke golvende getekende lijn (lusion-drawpath stijl) achter de stappen */
.mk-journey-line{position:absolute!important;left:-2%!important;right:-2%!important;top:14%!important;height:72%!important;background:none!important;z-index:1!important;pointer-events:none!important;}
.mk-journey-line svg{width:100%;height:100%;overflow:visible;display:block;}
.mk-journey-line__base,.mk-journey-line__draw{fill:none!important;stroke-linecap:round!important;stroke-linejoin:round!important;stroke-width:clamp(12px,1.3vw,22px)!important;}
.mk-journey-line__base{stroke:rgba(252,91,52,.09)!important;}
.mk-journey-line__draw{stroke:url(#mkJourneyGrad)!important;filter:drop-shadow(0 12px 22px rgba(252,91,52,.18))!important;opacity:.92;}
.mk-journey-track{position:absolute!important;left:0!important;top:0!important;height:100%!important;display:flex!important;align-items:center!important;gap:clamp(60px,7vw,130px)!important;padding:0 clamp(48px,8vw,130px)!important;will-change:transform;z-index:2!important;}
.mk-journey-step{position:relative!important;flex:0 0 auto!important;width:min(460px,32vw)!important;padding-top:clamp(60px,6vw,110px)!important;}
.mk-journey-step__ghost{position:absolute!important;left:-.08em!important;top:-.12em!important;font-family:Aeonik,Arial,sans-serif!important;font-weight:400!important;font-size:clamp(150px,15vw,270px)!important;line-height:1!important;letter-spacing:-.06em!important;color:transparent!important;-webkit-text-stroke:1.5px rgba(252,91,52,.22);pointer-events:none!important;z-index:1!important;transition:-webkit-text-stroke-color .5s ease,opacity .5s ease!important;opacity:.9!important;}
.mk-journey-step.is-active .mk-journey-step__ghost{-webkit-text-stroke-color:rgba(252,91,52,.55);opacity:1!important;}
.mk-journey-step__dot{display:none!important;}
/* Lottie-visual in de stapkaart */
.mk-journey-step__lottie{display:block!important;width:clamp(58px,4.6vw,84px)!important;height:clamp(58px,4.6vw,84px)!important;margin-bottom:1.1em!important;border-radius:20px!important;background:linear-gradient(135deg,rgba(252,91,52,.10),rgba(255,138,61,.05))!important;padding:9px!important;}
.mk-journey-step__lottie svg{display:block;width:100%;height:100%;}
.mk-journey-step__card{position:relative!important;z-index:2!important;background:rgba(255,255,255,.92)!important;backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important;border:1px solid rgba(255,255,255,.7)!important;border-radius:26px!important;padding:clamp(24px,2.2vw,36px)!important;box-shadow:0 18px 52px rgba(17,30,43,.07)!important;transition:transform .6s cubic-bezier(.16,1,.3,1),box-shadow .6s ease!important;}
.mk-journey-step.is-active .mk-journey-step__card{transform:translateY(-14px)!important;box-shadow:0 30px 70px rgba(252,91,52,.13),0 16px 40px rgba(17,30,43,.07)!important;}
.mk-journey-step__num{display:block!important;font-family:IBMPlexMono,MKVMono,monospace!important;font-size:12px!important;letter-spacing:.04em!important;text-transform:uppercase!important;color:#fc5b34!important;margin-bottom:1.4em!important;}
.mk-journey-step__card h3{font-family:Aeonik,Arial,sans-serif!important;font-size:clamp(32px,2.9vw,54px)!important;line-height:.92!important;letter-spacing:-.055em!important;margin:0 0 .55em!important;font-weight:400!important;}
.mk-journey-step__card p{font-family:Aeonik,Arial,sans-serif!important;font-size:clamp(15px,1.05vw,18px)!important;line-height:1.22!important;letter-spacing:-.03em!important;margin:0 0 1.4em!important;color:rgba(0,0,0,.82)!important;}
.mk-journey-step__tags{display:flex!important;flex-wrap:wrap!important;gap:8px!important;list-style:none!important;margin:0!important;padding:0!important;}
.mk-journey-step__tags li{font-family:IBMPlexMono,MKVMono,monospace!important;font-size:11px!important;letter-spacing:.03em!important;text-transform:uppercase!important;padding:.55em 1em!important;border-radius:999px!important;border:1px solid rgba(252,91,52,.28)!important;color:rgba(0,0,0,.6)!important;background:rgba(255,255,255,.6)!important;}
.mk-story-progress{display:none;position:absolute!important;left:8%!important;right:8%!important;bottom:clamp(34px,5vw,60px)!important;height:4px!important;border-radius:999px!important;background:rgba(252,91,52,.12)!important;z-index:4!important;overflow:hidden!important;}
.mk-story-progress span{display:block!important;height:100%!important;width:100%!important;border-radius:inherit!important;background:linear-gradient(90deg,#fc5b34,#ff8a3d)!important;box-shadow:0 0 16px rgba(252,91,52,.26)!important;transform:scaleX(0);transform-origin:left center;}
.mk-story-index{position:absolute!important;right:8%!important;top:8%!important;font-family:IBMPlexMono,MKVMono,monospace!important;font-size:13px!important;z-index:5!important;color:rgba(0,0,0,.55)!important;}
.mk-story-index__current{color:#fc5b34!important;}

/* 6b. Services fan-kaart: albumfoto's i.p.v. app-icons ----------------------- */
.mfan--photos .mtile{width:29%!important;aspect-ratio:1!important;height:auto!important;}
.mfan--photos .mtile__pop{overflow:hidden!important;position:absolute!important;inset:0!important;}
.mfan--photos .mtile__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block;}

/* 8b. Contact modal — strak stappenformulier -------------------------------- */
.cmodal__panel--mkf{width:min(680px,92vw)!important;max-height:min(760px,88vh)!important;background:#fff!important;border-radius:28px!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;box-shadow:0 40px 120px rgba(10,18,26,.28)!important;}
.mkf{display:flex;flex-direction:column;height:100%;min-height:0;font-family:Aeonik,Arial,sans-serif;color:#0b0f14;}
.mkf__head{padding:clamp(24px,3vw,36px) clamp(24px,3.4vw,42px) 18px;}
.mkf__badge{display:inline-block;font-family:IBMPlexMono,MKVMono,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(11,15,20,.5);margin-bottom:1.4em;}
.mkf__badge::before{content:'● ';color:#fc5b34;font-size:8px;vertical-align:2px;}
.mkf__title{margin:0;font-size:clamp(30px,3.2vw,44px);line-height:.96;letter-spacing:-.055em;font-weight:400;}
.mkf__progress{margin-top:20px;height:3px;border-radius:999px;background:rgba(252,91,52,.12);overflow:hidden;}
.mkf__progress span{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#fc5b34,#ff8a3d);transition:width .45s cubic-bezier(.16,1,.3,1);}
.mkf__body{position:relative;flex:1;min-height:220px;overflow-y:auto;padding:6px clamp(24px,3.4vw,42px) 12px;border:0;margin:0;}
.mkf__step{display:none;border:0;padding:0;margin:0;animation:mkfIn .5s cubic-bezier(.16,1,.3,1);}
.mkf__step.is-current{display:block;}
@keyframes mkfIn{from{opacity:0;transform:translate3d(28px,0,0);}to{opacity:1;transform:translate3d(0,0,0);}}
/* Lusion-stijl: grote regels met dunne dividers i.p.v. boxjes */
.mkf__choices{display:flex;flex-direction:column;gap:0;}
.mkf__choice{position:relative;display:flex;align-items:center;gap:16px;border:0;border-bottom:1px solid rgba(11,15,20,.10);border-radius:0;padding:15px 44px 15px 2px;cursor:pointer;transition:padding .35s cubic-bezier(.16,1,.3,1),background .3s ease;background:transparent;}
/* Icoon per dienst: zachte tegel die in de accentkleur oplicht bij keuze. */
.mkf__choice-icon{
  flex:0 0 auto;
  display:grid;place-items:center;
  width:44px;height:44px;
  border-radius:12px;
  background:rgba(11,15,20,.045);
  color:rgba(11,15,20,.55);
  transition:background .35s ease,color .35s ease,transform .45s cubic-bezier(.16,1,.3,1);
}
.mkf__choice-icon svg{width:21px;height:21px;display:block;}
.mkf__choice:hover .mkf__choice-icon{background:rgba(252,91,52,.10);color:#fc5b34;}
.mkf__choice:has(input:checked) .mkf__choice-icon{
  background:#fc5b34;color:#fff;transform:scale(1.04);
  box-shadow:0 8px 20px rgba(252,91,52,.28);
}
/* De tekstkolom naast het icoon */
.mkf__choice-title,.mkf__choice-sub{min-width:0;}
.mkf__choice > span:not(.mkf__choice-icon){align-self:center;}
.mkf__choice:first-child{border-top:1px solid rgba(11,15,20,.10);}
.mkf__choice::after{content:'→';position:absolute;right:8px;top:50%;transform:translate(-10px,-50%);opacity:0;color:#fc5b34;font-size:19px;transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .3s ease;}
.mkf__choice:hover{padding-left:14px;}
.mkf__choice:hover::after{opacity:1;transform:translate(0,-50%);}
.mkf__choice input{position:absolute;opacity:0;pointer-events:none;}
.mkf__choice:has(input:checked){padding-left:14px;}
.mkf__choice:has(input:checked)::after{content:'●';font-size:10px;opacity:1;transform:translate(0,-50%);}
.mkf__choice:has(input:checked) .mkf__choice-title{color:#fc5b34;}
.mkf__choice-title{display:block;flex:0 0 auto;font-size:clamp(19px,1.6vw,24px);letter-spacing:-.035em;transition:color .3s ease;}
.mkf__choice-sub{display:block;font-family:IBMPlexMono,MKVMono,monospace;font-size:11px;letter-spacing:.02em;text-transform:uppercase;line-height:1.4;color:rgba(11,15,20,.42);}
.mkf__slider{padding:14px 4px 6px;}
.mkf__slider-value{display:block;font-size:clamp(34px,3.4vw,46px);letter-spacing:-.05em;margin-bottom:22px;color:#0b0f14;}
.mkf__slider input[type=range]{width:100%;appearance:none;-webkit-appearance:none;height:5px;border-radius:999px;background:linear-gradient(90deg,#fc5b34 var(--mkf-fill,25%),rgba(252,91,52,.14) var(--mkf-fill,25%));outline:none;}
.mkf__slider input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid #fc5b34;box-shadow:0 6px 18px rgba(252,91,52,.35);cursor:grab;}
.mkf__slider input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid #fc5b34;box-shadow:0 6px 18px rgba(252,91,52,.35);cursor:grab;}
.mkf__slider-scale{display:flex;justify-content:space-between;margin-top:12px;font-family:IBMPlexMono,MKVMono,monospace;font-size:11px;color:rgba(11,15,20,.45);}
.mkf__info p{font-size:16px;line-height:1.4;letter-spacing:-.02em;margin:0 0 20px;max-width:34em;}
.mkf__info-sub{font-size:13px!important;color:rgba(11,15,20,.5);margin-top:16px!important;}
.mkf__textarea,.mkf__field input,.mkf__field textarea{width:100%;border:1px solid rgba(11,15,20,.14);border-radius:14px;padding:13px 16px;font-family:Aeonik,Arial,sans-serif;font-size:15px;background:#fff;color:#0b0f14;outline:none;transition:border-color .25s ease,box-shadow .25s ease;resize:vertical;}
.mkf__textarea:focus,.mkf__field input:focus,.mkf__field textarea:focus{border-color:#fc5b34;box-shadow:0 0 0 4px rgba(252,91,52,.10);}
.mkf__fields{display:grid;gap:14px;}
.mkf__field span{display:block;font-family:IBMPlexMono,MKVMono,monospace;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:rgba(11,15,20,.5);margin-bottom:7px;}
.mkf__done{text-align:center;padding:18px 0 8px;position:relative;overflow:hidden;}
.mkf__done-icon{width:62px;height:62px;border-radius:50%;background:linear-gradient(135deg,#fc5b34,#ff8a3d);color:#fff;font-size:26px;line-height:62px;margin:0 auto 20px;box-shadow:0 14px 40px rgba(252,91,52,.35);display:flex;align-items:center;justify-content:center;will-change:transform,opacity;}
.mkf__spark{position:absolute;width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,#fc5b34,#ff8a3d);pointer-events:none;top:50%;left:50%;will-change:transform,opacity;}
.mkf__done h4{margin:0 0 10px;font-size:clamp(21px,2vw,27px);letter-spacing:-.04em;font-weight:400;}
.mkf__done p{font-size:14px;line-height:1.5;color:rgba(11,15,20,.6);max-width:34em;margin:0 auto 22px;white-space:pre-line;}
.mkf__send{display:inline-flex!important;}
.mkf__foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px clamp(24px,3.4vw,42px) clamp(20px,2.6vw,30px);border-top:1px solid rgba(11,15,20,.08);}
.mkf__nav{border:0;border-radius:999px;padding:.85em 1.7em;font-family:Aeonik,Arial,sans-serif;font-size:14px;cursor:pointer;transition:background .25s ease,color .25s ease,opacity .25s ease,transform .25s ease;}
.mkf__nav--back{background:transparent;color:rgba(11,15,20,.55);}
.mkf__nav--back:hover:not(:disabled){color:#0b0f14;}
.mkf__nav--next{background:#0b0f14;color:#fff;}
.mkf__nav--next:hover:not(:disabled){background:#fc5b34;transform:translateY(-1px);}
.mkf__nav:disabled{opacity:.35;cursor:default;}
.mkf__count{font-family:IBMPlexMono,MKVMono,monospace;font-size:12px;color:rgba(11,15,20,.45);}
@media(max-width:640px){.mkf__choices,.mkf__choices--row,.mkf__choices--packs{grid-template-columns:1fr;}.cmodal__panel--mkf{width:94vw!important;max-height:92vh!important;}}

/* 8c. Dienstenpagina ---------------------------------------------------------
   Lusion "area of expertise"-opzet (about-capability) op onze lichte achtergrond. */
.mk-diensten-main{font-family:Aeonik,Arial,sans-serif;color:#0b0f14;padding-top:clamp(120px,14vh,170px);}
.mk-diensten-hero{padding:0 clamp(24px,5vw,80px) clamp(60px,7vw,110px);}
.mk-diensten-hero__label{font-family:IBMPlexMono,MKVMono,monospace;font-size:clamp(11px,.8vw,14px);letter-spacing:.04em;text-transform:uppercase;color:rgba(11,15,20,.55);margin-bottom:2.2em;}
.mk-diensten-hero h1{margin:0;font-weight:400;font-size:clamp(52px,12vw,210px);line-height:.9;letter-spacing:-.07em;text-transform:uppercase;}
.mk-diensten-hero__sub{max-width:30em;margin-top:2.2em;font-size:clamp(17px,1.35vw,24px);line-height:1.2;letter-spacing:-.035em;color:rgba(11,15,20,.8);}
/* Diensten hero: start verborgen zodat runDienstenIntro soepel inanimt (geen double flash). */
.mk-page-diensten .mk-diensten-hero__label,
.mk-page-diensten .mk-diensten-hero h1 span,
.mk-page-diensten .mk-diensten-hero__sub,
.mk-page-diensten .mk-diensten-hero__tile{opacity:0;}

/* Hero-visual: drie afgeronde media-tiles met de WebGL-bend, oplopend gekanteld */
.mk-diensten-hero__media{margin-top:clamp(34px,4vw,64px);display:grid;grid-template-columns:1.25fr 1fr .85fr;gap:clamp(12px,1.4vw,22px);}
.mk-diensten-hero__tile{position:relative;display:block;border-radius:18px;overflow:hidden;background:#eef3f6;aspect-ratio:16/11;box-shadow:0 18px 46px rgba(17,30,43,.08);transition:transform .6s cubic-bezier(.16,1,.3,1),box-shadow .6s ease;}
.mk-diensten-hero__tile:nth-child(2){margin-top:clamp(18px,2.4vw,40px);}
.mk-diensten-hero__tile:nth-child(3){margin-top:clamp(36px,4.8vw,80px);}
.mk-diensten-hero__tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
html.mk-gl-media .mk-diensten-hero__tile img{opacity:0!important;transition:none!important;}
.mk-diensten-hero__tile:hover{transform:translateY(-6px);box-shadow:0 30px 66px rgba(252,91,52,.14);}
@media(max-width:640px){.mk-diensten-hero__media{grid-template-columns:1fr 1fr;}.mk-diensten-hero__tile:nth-child(3){display:none;}}
/* Lusion about-capability, 1-op-1 opzet maar licht i.p.v. blauw:
   titel in twee verspringende regels, subheader rechtsboven met letterkaartjes,
   en een speelkaarten-deck (aspect 314/438, header boven + 180° onder) dat
   al scrollend omdraait en uitwaaiert (GSAP, zie initCapabilityDeck). */
.mk-cap-section{position:relative;padding:clamp(40px,5vw,90px) 0 0;isolation:isolate;}
.mk-cap-drawline{position:absolute;left:-4vw;top:0;width:108vw;height:100%;z-index:0;pointer-events:none;overflow:visible;}
.mk-cap-drawline path{fill:none;stroke:url(#mkCapGrad);stroke-width:clamp(14px,1.6vw,28px);stroke-linecap:round;stroke-linejoin:round;opacity:.55;mix-blend-mode:multiply;stroke-dasharray:1;stroke-dashoffset:var(--mk-draw,1);}
.mk-cap-titles{position:relative;z-index:2;max-width:none;padding:0 clamp(24px,5vw,80px);}
.mk-cap-title{margin:0;font-weight:400;font-size:12vw;line-height:1em;letter-spacing:-.05em;text-transform:uppercase;display:flex;flex-direction:column;}
.mk-cap-title__line{display:block;}
.mk-cap-title__line--2{margin-left:2em;}
.mk-cap-sub{position:absolute;right:clamp(24px,5vw,80px);top:1.5em;width:min(21em,34vw);font-size:clamp(12px,.95vw,17px);text-transform:uppercase;line-height:1.25;letter-spacing:-.01em;color:rgba(11,15,20,.85);}
.mk-cap-sub p{margin:0;}
.mk-cap-sub__cards{display:flex;gap:.5rem;margin-top:1.8em;}
.mk-cap-sub__cards span{display:grid;place-items:center;width:2.25em;height:3.125em;border:1px solid rgba(11,15,20,.7);border-radius:.361rem;font-family:MKVMono,IBMPlexMono,monospace;font-size:1em;}
/* Deck: lange scrollzone met sticky podium (zelfde patroon als de werkwijze-pin) */
.mk-cap-deck-wrap{position:relative;min-height:280vh;z-index:1;}
.mk-cap-deck-pin{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden;}
.mk-cap-deck{position:relative;width:min(1360px,96vw);height:min(72vh,640px);perspective:1400px;perspective-origin:center;}
.mk-cap-card{position:absolute;left:50%;top:50%;width:clamp(230px,21.5vw,330px);aspect-ratio:314/438;transform-style:preserve-3d;font-size:max(11px,1.17vw);will-change:transform;}
.mk-cap-card__back{position:absolute;inset:0;backface-visibility:hidden;background:linear-gradient(150deg,#fc5b34,#ff8a3d 60%,#ff5037);border-radius:.8em;transform:rotateY(180deg);display:grid;place-items:center;box-shadow:0 22px 60px rgba(17,30,43,.16);}
.mk-cap-card__back img{width:34%;height:auto;opacity:.9;filter:brightness(0) invert(1);}
.mk-cap-card__front{position:absolute;inset:0;backface-visibility:hidden;background:#fff;border-radius:.8em;display:flex;flex-direction:column;justify-content:space-between;padding:1.25em 1.875em;box-shadow:0 22px 60px rgba(17,30,43,.12);}
.mk-cap-card__header{display:flex;align-items:center;justify-content:space-between;}
.mk-cap-card__front .mk-cap-card__header:last-child{transform:rotate(180deg);}
.mk-cap-card__header p{margin:0;font-size:1.32em;text-transform:uppercase;letter-spacing:-.02em;}
.mk-cap-card__letter{position:relative;left:.15em;font-size:3em;line-height:1;font-family:MKVMono,IBMPlexMono,monospace;color:#fc5b34;}
.mk-cap-list{margin:0;padding:0;list-style:none;}
.mk-cap-list li{position:relative;font-size:.85em;letter-spacing:-.01em;}
.mk-cap-list li:not(:first-child){margin-top:1.55em;}
.mk-cap-list li:not(:last-child)::before{content:"..............................";position:absolute;top:.6em;font-size:1.5em;letter-spacing:.125em;color:#fc5b34;opacity:.22;pointer-events:none;}
.mk-dienst-rows{max-width:1380px;margin:0 auto;padding:0 clamp(24px,5vw,80px) clamp(90px,10vw,150px);display:flex;flex-direction:column;gap:clamp(60px,7vw,110px);}
.mk-dienst-row{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,4vw,70px);align-items:center;}
.mk-dienst-row:nth-child(even) .mk-dienst-row__media{order:2;}
.mk-dienst-row__media{position:relative;border-radius:20px;overflow:hidden;background:#eef3f6;aspect-ratio:16/11;}
.mk-dienst-row__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
html.mk-gl-media .mk-dienst-row__media img{opacity:0!important;transition:none!important;}
.mk-dienst-row__num{font-family:IBMPlexMono,MKVMono,monospace;font-size:12px;color:#fc5b34;display:block;margin-bottom:1.6em;}
.mk-dienst-row h2{margin:0 0 .5em;font-weight:400;font-size:clamp(36px,4.2vw,78px);line-height:.94;letter-spacing:-.055em;}
.mk-dienst-row p{margin:0 0 1.2em;font-size:clamp(15px,1.15vw,19px);line-height:1.32;letter-spacing:-.028em;color:rgba(11,15,20,.8);max-width:32em;}
.mk-dienst-row .mk-hero-btn{margin-top:.6em;}
@media(max-width:980px){
  .mk-dienst-row{grid-template-columns:1fr;}
  .mk-dienst-row:nth-child(even) .mk-dienst-row__media{order:0;}
  /* Deck op mobiel/tablet: grid met flip-op-scroll (rug → front) */
  .mk-cap-sub{position:relative;right:auto;top:auto;width:100%;margin-top:2em;}
  .mk-cap-deck-wrap{min-height:0;}
  .mk-cap-deck-pin{position:relative;height:auto;display:block;overflow:visible;padding:40px clamp(18px,4vw,40px) 70px;}
  .mk-cap-deck{width:100%;height:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px!important;perspective:1400px;perspective-origin:center;}
  .mk-cap-card{
    position:relative;left:auto;top:auto;width:100%;
    font-size:2.4vw;aspect-ratio:auto;
    transform-style:preserve-3d;
    transform:rotateY(180deg);
    transition:transform .9s cubic-bezier(.22,.9,.28,1);
  }
  .mk-cap-card.is-flipped{transform:rotateY(0deg);}
  /* Front is relative en bepaalt de hoogte (tekst past altijd);
     back ligt absoluut over dezelfde box heen. */
  .mk-cap-card__front{position:relative!important;inset:auto;height:auto!important;min-height:200px;padding:1.4em!important;display:flex!important;flex-direction:column!important;gap:1.2em!important;}
  .mk-cap-card__back{display:grid!important;position:absolute;inset:0;}
  .mk-cap-drawline{display:none;}
}
@media(max-width:560px){
  .mk-cap-deck{grid-template-columns:1fr;gap:16px!important;}
  .mk-cap-card{font-size:4.6vw;}
  .mk-cap-card__front{padding:1.4em 1.6em!important;}
}

/* 8d. Lusion end-section (licht, rode accenten) ------------------------------ */
.mk-end{position:relative;padding:clamp(90px,12vw,180px) clamp(24px,5vw,80px) clamp(40px,5vw,70px);text-align:center;isolation:isolate;overflow:hidden;font-family:Aeonik,Arial,sans-serif;color:#0b0f14;}
.mk-end__crosses{display:flex;justify-content:space-between;max-width:1100px;margin:0 auto clamp(40px,6vw,90px);}
.mk-end__cross{position:relative;width:18px;height:18px;opacity:.85;}
.mk-end__cross::before,.mk-end__cross::after{content:'';position:absolute;left:50%;top:50%;background:#fc5b34;border-radius:2px;transform:translate(-50%,-50%);}
.mk-end__cross::before{width:100%;height:2.5px;}
.mk-end__cross::after{width:2.5px;height:100%;}
.mk-end__subtitle{font-family:IBMPlexMono,MKVMono,monospace;font-size:clamp(11px,.9vw,15px);letter-spacing:.06em;text-transform:uppercase;color:rgba(11,15,20,.55);margin-bottom:1.6em;}
.mk-end__title{display:inline-block;margin:0 auto;font-weight:400;font-size:clamp(54px,9.5vw,170px);line-height:.92;letter-spacing:-.06em;cursor:pointer;transition:color .35s ease,transform .5s cubic-bezier(.16,1,.3,1);}
.mk-end__title:hover{color:#fc5b34;transform:scale(1.015);}
.mk-end__bottom{display:flex;align-items:center;justify-content:center;gap:clamp(20px,3vw,44px);margin-top:clamp(60px,8vw,120px);}
.mk-end__arrow{position:relative;width:14px;height:20px;}
.mk-end__arrow::before{content:'↓';position:absolute;inset:0;color:#fc5b34;font-size:18px;line-height:20px;}
.mk-end__marquee{overflow:hidden;width:min(420px,50vw);}
.mk-end__marquee-inner{display:flex;gap:2.5em;white-space:nowrap;font-family:IBMPlexMono,MKVMono,monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(11,15,20,.5);will-change:transform;}

/* 8e. Reel-sectie (lusion home reel, in ons oranje) --------------------------- */
.mk-reel{position:relative;margin:clamp(16px,2vw,30px);border-radius:clamp(18px,2vw,30px);background:linear-gradient(150deg,#fc5b34,#ff7a45 55%,#f73519);min-height:clamp(480px,86vh,860px);overflow:hidden;isolation:isolate;display:grid;place-items:center;}
.mk-reel__cards{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;}
.mk-reel__card{position:absolute;top:50%;left:50%;width:clamp(150px,17vw,250px);aspect-ratio:9/16.5;border-radius:18px;overflow:hidden;background:#20242c;box-shadow:0 30px 80px rgba(60,10,0,.35);}
.mk-reel__card img,.mk-reel__card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.mk-reel__card--l{transform:translate(-150%,-50%) rotate(-7deg);}
.mk-reel__card--c{transform:translate(-50%,-50%);z-index:2;}
.mk-reel__card--r{transform:translate(50%,-50%) rotate(7deg);}
.mk-reel__text{position:relative;z-index:3;display:flex;align-items:center;gap:clamp(16px,2.4vw,36px);color:#fff;font-weight:400;font-size:clamp(46px,8vw,140px);letter-spacing:-.05em;line-height:1;pointer-events:none;mix-blend-mode:normal;}
.mk-reel__play{pointer-events:auto;flex:0 0 auto;width:clamp(56px,6vw,92px);height:clamp(56px,6vw,92px);border-radius:50%;border:0;background:#fff;color:#fc5b34;font-size:clamp(18px,2vw,30px);display:grid;place-items:center;cursor:pointer;transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s ease;box-shadow:0 18px 50px rgba(60,10,0,.3);}
.mk-reel__play:hover{transform:scale(1.12);box-shadow:0 26px 70px rgba(60,10,0,.4);}
.mk-reel__overlay{position:fixed;inset:0;z-index:1200;background:rgba(8,10,14,.92);display:none;place-items:center;padding:4vmin;}
.mk-reel__overlay.is-open{display:grid;}
.mk-reel__overlay video{max-width:min(1200px,92vw);max-height:86vh;width:100%;border-radius:16px;box-shadow:0 40px 120px rgba(0,0,0,.5);}
.mk-reel__overlay-close{position:absolute;top:22px;right:26px;width:46px;height:46px;border-radius:50%;border:0;background:#fff;color:#0b0f14;font-size:17px;cursor:pointer;}

/* 8f. Team (over-ons) --------------------------------------------------------- */
.mk-team{max-width:1280px;margin:0 auto;padding:clamp(70px,8vw,130px) clamp(24px,5vw,80px);font-family:Aeonik,Arial,sans-serif;color:#0b0f14;}
.mk-team-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(16px,2vw,30px);margin-top:clamp(30px,4vw,60px);align-items:stretch;}
.mk-team-card{background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.72);border-radius:24px;padding:clamp(20px,1.8vw,30px);box-shadow:0 18px 52px rgba(17,30,43,.07);display:flex;flex-direction:column;}
.mk-team-card__photo{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:4/5;background:#101418;margin-bottom:1.4em;}
.mk-team-card__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
html.mk-gl-media .mk-team-card__photo img{opacity:0!important;transition:none!important;}
.mk-team-card h3{margin:0 0 .35em;font-weight:400;font-size:clamp(24px,2.2vw,38px);letter-spacing:-.045em;}
.mk-team-card__role{font-family:IBMPlexMono,MKVMono,monospace;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:#fc5b34;margin:0 0 1.2em;}
.mk-team-card p:not(.mk-team-card__role){margin:0;font-size:clamp(14.5px,1.05vw,17.5px);line-height:1.35;letter-spacing:-.025em;color:rgba(11,15,20,.78);}
.mk-team-card--ghost{background:rgba(255,255,255,.45);border:1.5px dashed rgba(252,91,52,.4);justify-content:center;text-align:center;gap:.8em;}
.mk-team-card--ghost .mk-team-card__letter{font-family:MKVMono,IBMPlexMono,monospace;font-size:clamp(40px,3.4vw,58px);color:#fc5b34;}
@media(max-width:980px){.mk-team-grid{grid-template-columns:1fr;}}

/* 8f2. Preloader: percentage rechts onderin, geen lijn, geen rode kleur --------- */
/* Forceer de preloader root direct gecentreerd met een witte achtergrond vanaf de allereerste parse-frame */
.preloader-root {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #ffffff !important;
  opacity: 1 !important;
  z-index: 99999 !important;
}

/* Forceer het logo-element zelf direct en onvoorwaardelijk in het exacte midden van het scherm */
.preloader-root .sun-svg {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  width: min(80vw, 760px) !important;
  height: auto !important;
}

.preloader-root .mk-preloader-logo {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  
  /* Luxe metallic shimmer masker-animatie */
  mask: linear-gradient(120deg, rgba(0,0,0,0.55) 35%, rgba(0,0,0,1) 50%, rgba(0,0,0,0.55) 65%) right/300% 100% no-repeat;
  -webkit-mask: linear-gradient(120deg, rgba(0,0,0,0.55) 35%, rgba(0,0,0,1) 50%, rgba(0,0,0,0.55) 65%) right/300% 100% no-repeat;
  animation: mkPreloaderShimmer 2s infinite linear, mkLogoPulse 1.8s ease-in-out infinite !important;
}

@keyframes mkPreloaderShimmer {
  0% {
    mask-position: 100% 0;
    -webkit-mask-position: 100% 0;
  }
  100% {
    mask-position: 0% 0;
    -webkit-mask-position: 0% 0;
  }
}

@keyframes mkLogoPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.05);
  }
}
.mk-preloader-pct {
  --mk-pct-y: 0em;
  position: absolute;
  right: max(5vw, 40px);
  bottom: max(4vw, 30px);
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 2px;
  font-family: Aeonik, Arial, sans-serif;
  font-weight: 300;
  color: #0b0f14; /* Dark charcoal/font color, no red! */
  pointer-events: none;
  z-index: 11;
  opacity: 0;
  transform: translateY(0.55em);
  animation: pctFadeIn 0.9s cubic-bezier(.16,1,.3,1) forwards 0.15s;
  font-size: clamp(5rem, 10vw, 12rem);
  line-height: 0.8;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  will-change: transform, opacity;
}
@keyframes pctFadeIn {
  to {
    opacity: 1;
    transform: translateY(var(--mk-pct-y));
  }
}
/* na de intro-fade neemt de inline parallax (var) het over */
.mk-preloader-pct { transform: translateY(var(--mk-pct-y)); }
.mk-preloader-pct .mk-preloader-pct__num {
  display: inline-block;
}
.mk-preloader-pct .pct-sign {
  font-size: 0.4em;
  font-weight: 300;
  color: inherit; /* Same as number, no red! */
  margin-left: 0.05em;
  opacity: 0.6;
}

/* Ghost-laag: grote, zeer lichte cijfers achter de teller die trager
   mee-parallaxen — geeft luxe diepte aan de preloader-teller. */
.mk-preloader-ghost {
  --mk-ghost-y: 0em;
  --mk-ghost-x: 0em;
  position: absolute;
  right: max(5vw, 40px);
  bottom: max(4vw, 30px);
  z-index: 10;
  pointer-events: none;
  font-family: Aeonik, Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(9rem, 20vw, 26rem);
  line-height: 0.72;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  color: #0b0f14;
  opacity: 0.05;
  transform: translate(var(--mk-ghost-x), var(--mk-ghost-y));
  transform-origin: 100% 100%;
  will-change: transform, opacity;
  mix-blend-mode: multiply;
}
@media (max-width: 812px){
  .mk-preloader-ghost { font-size: clamp(7rem, 34vw, 16rem); opacity: 0.045; }
}

/* Morphing showreel thumbnail duotone overlay & slight rotation */
#home-reel-thumb-wrapper {
  transform: none; /* recht, niet scheef — net als de home hero-reel */
  transform-origin: center center;
}
#home-reel-thumb {
  background-color: #0b0f14; /* neutrale videokaart, net als home */
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
#home-reel-thumb img,
#home-reel-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
  mix-blend-mode: normal;
  opacity: 1;
  display: block;
}

/* Page Transition Curtain — curved SVG wipe */
.mk-page-curtain {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 100vh;
  /* Exit-gordijn NET onder de preloader (99999): op home eerste bezoek
     dekt de preloader hem af, op alle andere loads is hij de transitie. */
  z-index: 99998;
  pointer-events: none;
  will-change: transform;
  overflow: visible; /* curve SVG extends beyond panel edge */
}
.mk-page-curtain.mk-page-curtain--in {
  pointer-events: auto;
  z-index: 99999;
}
.mk-pc-panel {
  position: absolute;
  inset: 0;
}
/* Bottom curve (exit) — extends 10vh below the panel */
.mk-pc-curve {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10vh;
  display: block;
  transform: translateY(100%);
  pointer-events: none;
}
/* Top curve (enter from below) */
.mk-page-curtain--in .mk-pc-curve {
  bottom: auto;
  top: 0;
  transform: translateY(-100%);
}

/* 8g. Lusion cursor-paint (site-breed, alle pagina's) -------------------------- */
/* De Lusion bundle plaatst .cursor-paint in .lower (3D-transform → position:fixed
   werkt als absolute). initCursorPaint() verplaatst hem naar body. Op subpagina's
   maakt mk-motion.js hem zelf aan en appended hem direct aan body. */
.cursor-paint{position:fixed!important;inset:0!important;pointer-events:none!important;z-index:99998!important;}
#mk-fluid-trail{display:none!important;}

/* 8h-extra. Over-ons hero project visuals ------------------------------------ */
#mk-about-projvisuals{display:flex;gap:clamp(8px,1.2vw,14px);margin-bottom:1.4em;opacity:0;}
.mk-apv-item{width:clamp(90px,12vw,150px);aspect-ratio:4/3;border-radius:clamp(8px,1vw,14px);overflow:hidden;flex:0 0 auto;box-shadow:0 8px 28px rgba(0,0,0,.13);}
.mk-apv-item img{width:100%;height:100%;object-fit:cover;display:block;}
@media(max-width:812px){
  #mk-about-projvisuals{gap:8px;margin-bottom:1em;}
  .mk-apv-item{width:clamp(76px,22vw,110px);}
}

/* 8h. Reel-drawline + draggable carousel -------------------------------------- */
/* Lusion home-reel "line": één strakke curve die door de sectie sweept
   (lusion tekent 'm in WebGL; wij doen een enkele elegante SVG-curve, in ons
   oranje, die op scroll wordt getekend). Section-clipped zodat hij nooit in
   een naastgelegen sectie bloedt. */
.mk-reel-line{position:absolute;left:0;top:0;width:100%;height:min(130vh,1200px);z-index:0;pointer-events:none;overflow:hidden;}
.mk-reel-line svg{width:100%;height:100%;display:block;overflow:visible;}
.mk-reel-line path{fill:none;stroke:url(#mkReelGrad);stroke-width:clamp(20px,2.6vw,46px);stroke-linecap:round;stroke-linejoin:round;opacity:.95;filter:drop-shadow(0 18px 40px rgba(252,91,52,.32)) drop-shadow(0 6px 16px rgba(252,91,52,.18));}
/* Pre-hide voor de teken-animatie: container opacity:0 zodat JS (getTotalLength)
   de echte px-lengte kan zetten zonder flash. GSAP zet opacity:1 terug. */
.mk-subpage .mk-reel-line{opacity:0;}
#home-reel{position:relative;}
#home-reel-title,#home-reel-content{position:relative;z-index:2;}
.mk-draggable{cursor:grab;user-select:none;-webkit-user-select:none;scrollbar-width:none;}
.mk-draggable::-webkit-scrollbar{display:none;}
.mk-draggable.is-dragging{cursor:grabbing;scroll-behavior:auto!important;scroll-snap-type:none!important;}
.mk-draggable.is-dragging *{pointer-events:none;}
/* Allow native horizontal swipe on testimonials track — prevents Lenis from eating horizontal touch */
.testimonials__track{touch-action:pan-y;}

/* Cookie CTA gebruikt mk-hero-btn styling ipv de dark bundled button */
.cookie__accept.mk-hero-btn{
  width:100%!important;height:auto!important;
  background:#0a0a0a!important;color:#fff!important;
  padding:14px 22px!important;
  border-radius:999px!important;
  font-family:Aeonik,Arial,sans-serif!important;
  display:inline-flex!important;align-items:center;justify-content:center;gap:.6em;
  transition:background .25s ease,transform .25s ease!important;
  box-shadow:0 8px 22px rgba(10,10,10,.14)!important;
}
.cookie__accept.mk-hero-btn:hover{
  background:#fc5b34!important;transform:translateY(-1px)!important;
}
.cookie__accept.mk-hero-btn .mk-hero-btn__arrow,
.cookie__accept.mk-hero-btn .mk-hero-btn__text,
.cookie__accept.mk-hero-btn .mk-hero-btn__dot{color:#fff!important;}

/* Home testimonials — eerder reveal + soepel fade zoals FAQ.
   De Lusion-bundle wacht op .is-substance-visible dat pas laat vuurt;
   mk-motion.js zet .is-lusion-visible al bij 20% viewport nabijheid.
   Behandel beide klassen als reveal-trigger zodat cards eerder in beeld komen. */
#testimonials .tcard:not(.is-substance-visible):not(.is-lusion-visible):not(.mk-gsap-owned){
  opacity:0;transform:translate3d(0,44px,0);
}
#testimonials .tcard.is-lusion-visible:not(.mk-gsap-owned),
#testimonials .tcard.is-substance-visible:not(.mk-gsap-owned){
  opacity:1!important;transform:translateZ(0) scale(1)!important;
  transition:opacity .6s cubic-bezier(.33,1,.68,1),transform 1.05s cubic-bezier(.2,1.14,.26,1)!important;
  transition-delay:calc(var(--i,0) * 90ms)!important;
}
/* GSAP bezit .mk-gsap-owned elementen volledig: geen CSS-regel mag opacity
   of transform overrulen (option23/theme heeft veel !important-regels die
   anders vechten met de inline styles die GSAP zet). */
html body .mk-gsap-owned{
  transition:none!important;
  animation:none!important;
}
/* GSAP inline styles moeten winnen — deze !important-regels neutraliseren
   de option23-regels die anders opacity/transform terugpompen. GSAP schrijft
   inline autoAlpha/transform tijdens de tween; deze regels laten die staan. */
/* .mk-about-card stond hier ook in, maar opacity:unset!important pint de
   dekking op 1 en maakte elke GSAP-fade op die kaarten onmogelijk (alleen de
   beweging liep, de fade niet). Ze worden nu al vóór initEarlyReveals als
   GSAP-owned gemarkeerd, dus krijgen ze .is-lusion-visible niet meer en is
   deze noodrem overbodig. Zie initAboutCardsReveal. */
.tcard.mk-gsap-owned,
.tcard.mk-gsap-owned.is-substance-visible,
.tcard.mk-gsap-owned.is-lusion-visible,
#testimonials .tcard.mk-gsap-owned,
[data-mk-reveal].mk-gsap-owned,
[data-mk-reveal].mk-gsap-owned.is-lusion-visible,
.mk-team-card.mk-gsap-owned,
.svc-card.mk-gsap-owned,
.service-card.mk-gsap-owned,
.services__badge.mk-gsap-owned,
.services__title.mk-gsap-owned,
.services__sub.mk-gsap-owned,
.mk-testim__card.mk-gsap-owned,
.mk-testim__card.mk-gsap-owned.is-lusion-visible,
.mk-why-us__card.mk-gsap-owned,
.mk-why-us__card.mk-gsap-owned.is-lusion-visible{
  transition:none!important;
  /* Belangrijk: opacity + transform mag NIET meer via CSS gezet worden.
     Wij zetten "unset" met !important zodat GSAP-inline (zonder !important)
     alsnog het hoogste specificiteit-CSS beat. Werkt omdat inline > CSS
     wanneer geen enkele CSS-regel !important gebruikt op dit element. */
  opacity:unset!important;
  transform:unset!important;
}
/* Hover-transform van .mk-about-card mag niet vechten met GSAP-inline */
/* mkv-theme.css pint de dekking van .mk-about-card op vier plekken met
   !important op 0 — inline GSAP-styles verliezen daar altijd van. Daarom loopt
   de fade via een custom property: die schrijft GSAP inline, en var() leest hem
   binnen deze !important-regel. Zo wint de animatie zonder die theme-regels aan
   te hoeven raken. */
#awards .mk-about-card.mk-gsap-owned{
  transition:none!important;
  opacity:var(--mk-card-op,0)!important;
  visibility:visible!important;
}

/* Over-ons mobiel: grote play-reel onderaan verbergen — de thumb-video
   erboven toont hetzelfde materiaal al */
@media(max-width:812px){
  .mk-page-about #home-reel-container{display:none!important;}
}

/* Mobile: horizontale swipe carousel */
@media(max-width:812px){
  #testimonials .testimonials__carousel{
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:0 max(5vw,20px);
    margin:0 calc(-1 * max(5vw,20px));
    /* pan-x TOESTAAN — de globale track-regel zet pan-y wat horizontale
       swipes blokkeerde; hier expliciet beide assen vrijgeven */
    touch-action:pan-x pan-y;
    cursor:grab;
  }
  #testimonials .testimonials__carousel.is-dragging{cursor:grabbing;scroll-snap-type:none;}
  #testimonials .testimonials__track{touch-action:auto;}
  #testimonials .testimonials__carousel::-webkit-scrollbar{display:none;}
  #testimonials .testimonials__track{
    display:flex;flex-wrap:nowrap;
    gap:16px;padding:16px 0;
    width:max-content;
  }
  #testimonials .tcard{
    flex:0 0 82vw;max-width:340px;
    scroll-snap-align:start;
  }
  /* Entrance op mobiel: cards schuiven vanaf rechts in (richting van het
     swipen) met scale — !important om de option23 hide-state te verslaan */
  #testimonials .tcard:not(.is-substance-visible):not(.is-lusion-visible):not(.mk-gsap-owned){
    opacity:0!important;
    transform:translate3d(64px,0,0) scale(.92)!important;
  }
  /* Verberg de desktop-nav-knoppen op mobiel */
  #testimonials .testimonials__controls{display:none;}
}

/* 8f. Sectie-reveals — zachte fade per sectie, mobiel én desktop.
   Alleen opacity: transform is eigendom van de scroll-warp (inline JS).
   Gate op .lusion-header-ready zodat niets verstopt blijft als JS faalt.
   Hero-secties uitgezonderd: die moeten direct zichtbaar zijn. */
main.page section{transition:opacity .65s cubic-bezier(.33,1,.68,1);}
body.lusion-header-ready main.page section:not(.is-lusion-visible):not(.intro):not(.reel-full):not(.mk-sub-hero):not(.mk-diensten-hero):not(.lusion-native-section){
  opacity:.001;
}

/* 9. Cursor trail + back-to-top --------------------------------------------- */
.mk-site-trail{position:fixed;left:0;top:0;width:clamp(180px,18vw,310px);height:clamp(72px,7vw,124px);border-radius:999px;transform:translate3d(-50%,-50%,0) rotate(var(--mk-trail-rot,0rad)) scale(var(--mk-trail-scale,1));pointer-events:none;z-index:45;opacity:0;transition:opacity .22s ease;background:radial-gradient(60% 80% at 35% 50%,rgba(255,255,255,.9),rgba(255,255,255,.1) 48%,rgba(255,255,255,0) 70%);box-shadow:0 0 24px rgba(63,190,255,.22),0 0 34px rgba(252,91,52,.18);filter:blur(.5px) saturate(1.25);mix-blend-mode:screen;}
.mk-site-trail.is-visible{opacity:.7;}
#mk-back-to-top{position:fixed;right:clamp(18px,2.4vw,34px);bottom:clamp(18px,2.4vw,34px);width:52px;height:52px;border-radius:999px;border:1px solid rgba(0,0,0,.1);background:rgba(255,255,255,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:19px;line-height:1;cursor:pointer;z-index:60;opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .3s ease,transform .3s cubic-bezier(.16,1,.3,1),background .25s ease;box-shadow:0 10px 30px rgba(17,30,43,.12);}
#mk-back-to-top.is-visible{opacity:1;transform:translateY(0);pointer-events:auto;}
#mk-back-to-top:hover{background:#fc5b34;color:#fff;border-color:#fc5b34;}

/* 10. Mobiel / reduced motion ------------------------------------------------ */
@media(max-width:812px){
  /* WebGL-canvas blijft óók op mobiel zichtbaar (featured-warp); alleen de
     cursor-trail is een desktop-ding. */
  .mk-site-trail{display:none!important;}
  /* Warp op mobiel: plat en zonder permanente compositorlaag.
     De vorige regel zette perspective() + rotateX() én will-change:transform
     op élk doel, permanent — ook als er niet gescrold werd. Daarmee hield de
     browser voor al die secties een 3D-laag in leven; dát veroorzaakte het
     haperen, niet de sterkte van de bend. Nu een 2D skew/scale en will-change
     terug naar auto, zodat de laag alleen bestaat als hij nodig is.
     GEEN !important: JS zet inline transforms (iOS-fix) en die moeten winnen. */
  .mk-warp-target{
    will-change:auto;
    transform:skewY(calc(var(--mk-warp,0) * .05deg))
      scaleY(calc(1 + var(--mk-warp-abs,0) * .0006));
  }
  /* Titels mogen op mobiel NOOIT buiten beeld lopen: de gebundelde CSS zet
     white-space:nowrap op .services__title e.d. — op een smal scherm knalt
     elke meerwoordige titel er dan links/rechts uit. Overal laten wrappen. */
  .services__title,
  .mk-testim__title,
  .mk-why-us__title,
  .mk-story-head__title,
  .mk-end__title,
  .mk-diensten-hero h1,
  .mk-cap-title,
  h1,h2,h3{
    white-space:normal!important;
    overflow-wrap:break-word!important;
    word-break:normal!important;
    text-wrap:balance;
    max-width:100%!important;
  }
  .services__title{
    font-size:clamp(27px,7.6vw,40px)!important;
    line-height:1.05!important;
  }
  /* Zelfde Aeonik-font als desktop, niks loopt over */
  body,h1,h2,h3,h4,h5,h6,p,a,span,button,input,textarea,select,li{
    font-family:Aeonik,Arial,sans-serif!important;
  }
  /* Werkwijze: horizontale reis blijft ook op mobiel gepind (net als desktop) */
  .mk-process-story{min-height:auto!important;padding:clamp(60px,7vw,100px) 0 0!important;}
  .mk-story-shell{min-height:400vh!important;}
  .mk-story-head{position:relative!important;top:auto!important;background:transparent!important;padding-left:clamp(18px,5vw,40px)!important;padding-right:clamp(18px,5vw,40px)!important;}
  .mk-story-pin{position:sticky!important;top:clamp(64px,8vh,100px)!important;min-height:clamp(420px,62vh,640px)!important;border-radius:20px!important;overflow:hidden!important;}
  .mk-journey{position:absolute!important;inset:0!important;overflow:hidden!important;}
  .mk-journey-line{display:block!important;}
  .mk-journey-track{position:absolute!important;left:0!important;top:0!important;height:100%!important;display:flex!important;flex-direction:row!important;align-items:center!important;gap:clamp(28px,8vw,60px)!important;padding:0 clamp(18px,5vw,36px)!important;}
  .mk-journey-step{width:min(300px,82vw)!important;flex:0 0 auto!important;padding-top:clamp(46px,7vw,72px)!important;}
  .mk-journey-step__ghost{font-size:clamp(78px,22vw,130px)!important;}
  .mk-journey-step__dot{display:none!important;}
  .mk-journey-step__card{transform:none!important;}
  .mk-story-progress,.mk-story-index{display:none!important;}
  /* Mobile footer layout: 2x2 grid similar to Lusion.co (Screenshot 4) */
  #footer-middle-contact {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4.8em 1.2em !important;
    width: 100% !important;
  }
  #footer-contact-address {
    grid-column: 1 !important;
    margin: 0 !important;
  }
  #footer-contact-socials {
    grid-column: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5em !important;
    align-items: flex-start !important;
    margin: 0 !important;
  }
  .footer-socials-line {
    display: flex !important;
    align-items: center !important;
    gap: 0.4em !important;
    padding: 0 !important;
  }
  .footer-socials-line-svg {
    position: static !important;
    display: inline-block !important;
    width: 1em !important;
    text-align: center !important;
    flex: 0 0 auto !important;
    transform: none !important;
  }
  .footer-socials-text {
    transform: none !important;
  }
  #footer-contact-enquires {
    grid-column: 1 !important;
    margin-top: 0 !important;
    align-self: start !important;
  }
  #footer-contact-business {
    grid-column: 2 !important;
    margin-top: 0 !important;
    align-self: start !important;
  }
  #footer-bottom {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.8em !important;
    padding-top: 1.5em !important;
    padding-bottom: 2.5em !important;
  }
}
@media(prefers-reduced-motion:reduce){
  /* Warp blijft actief (bewuste keuze, net als Lenis) — alleen decoratie uit */
  .mk-site-trail{display:none!important;}
  .reveal-item,[data-mk-reveal],.mk-about-card,.project-grid__item,.tcard,.svc-card,.mk-reveal-section{opacity:1!important;transform:none!important;filter:none!important;transition:none!important;}
}

/* 11. mk-testim — pinned sectie: title achtergrond, cards 1-voor-1 L/R ------- */
.mk-testim{
  background:linear-gradient(180deg,#f4f7f6 0%,#eef5f4 100%);
  color:#0a0a0a;
  padding:0 max(5vw,40px) clamp(30vh,40vh,50vh);
  position:relative;
  font-family:Aeonik,Arial,sans-serif;
}
.mk-testim__head{
  text-align:center;
  position:sticky;
  top:calc(50vh - 14vw);
  z-index:1;
  pointer-events:none;
  padding:20vh 0 0;
  margin-bottom:calc(-1 * clamp(160px,20vw,320px));
}
.mk-testim__badge{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:clamp(11px,.85vw,14px);letter-spacing:.08em;text-transform:uppercase;
  color:rgba(0,0,0,.5);margin-bottom:1.4em;
  font-family:Aeonik,Arial,sans-serif;
}
.mk-testim__star{width:16px;height:16px;flex-shrink:0;fill:#fc5b34;}
.mk-testim__title{
  font-family:Aeonik,Arial,sans-serif;
  font-size:clamp(64px,9vw,160px);font-weight:400;
  letter-spacing:-.07em;line-height:.88;color:#0a0a0a;margin:0;
}
/* Verticale stack, alternerend L/R zodat cards 1-voor-1 in beeld komen */
.mk-testim__grid{
  display:flex;
  flex-direction:column;
  /* Stond op 35vh: met acht kaarten werd dat een halve pagina lucht tussen
     elke recensie. Ruim gehalveerd, zodat ze als één blok lezen. */
  gap:clamp(11vh,15vh,20vh);
  position:relative;
  z-index:2;
  max-width:1200px;
  margin:0 auto;
  padding-bottom:10vh;
}
.mk-testim__card{width:clamp(280px,42%,560px);}
.mk-testim__card:nth-child(odd){align-self:flex-start;}
.mk-testim__card:nth-child(even){align-self:flex-end;}
/* Glassmorphic cards (zoals ref2 .testim-style2 .item) */
.mk-testim__card{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  border-radius:28px;
  padding:clamp(28px,3vw,48px);
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:280px;
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 15px 45px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,.7);
  transition:background .35s ease,box-shadow .35s ease,transform .35s ease;
  font-family:Aeonik,Arial,sans-serif;
}
.mk-testim__card:hover{
  background:rgba(255,255,255,.72);
  box-shadow:0 22px 60px rgba(0,0,0,.09),inset 0 1px 0 rgba(255,255,255,.8);
}
/* offset-modifier oud, in verticale stack niet nodig */
.mk-testim__card--offset{margin-top:0;}
.mk-testim__card blockquote{
  margin:0 0 2em;
  font-size:clamp(16px,1.15vw,20px);line-height:1.5;
  letter-spacing:-.02em;color:rgba(0,0,0,.78);
  font-style:normal;font-family:Aeonik,Arial,sans-serif;
}
.mk-testim__author{
  display:flex;align-items:center;gap:14px;margin-top:auto;
  padding-top:1.4em;border-top:1px solid rgba(0,0,0,.08);
}
.mk-testim__avatar{
  width:52px;height:52px;border-radius:50%;object-fit:cover;
  background:#e8e8e6;flex-shrink:0;
}
.mk-testim__avatar--contain{object-fit:contain;padding:6px;background:#fff;}
.mk-testim__name{display:block;font-size:16px;font-weight:500;color:#0a0a0a;letter-spacing:-.02em;font-family:Aeonik,Arial,sans-serif;}
.mk-testim__role{display:block;font-size:13px;color:rgba(0,0,0,.45);margin-top:2px;letter-spacing:.01em;font-family:Aeonik,Arial,sans-serif;}

/* 12. mk-why-us — glass cards + sticky title, warp op cards ------------------ */
.mk-why-us{
  background:linear-gradient(180deg,#eef5f4 0%,#f4f7f6 100%);
  padding:clamp(100px,11vw,180px) max(5vw,40px);
  font-family:Aeonik,Arial,sans-serif;
}
.mk-why-us__inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(40px,5vw,80px);
  align-items:start;
  max-width:1400px;margin:0 auto;
}
.mk-why-us__sticky{
  position:sticky;top:clamp(80px,10vh,140px);
}
.mk-why-us__big{
  font-family:Aeonik,Arial,sans-serif;
  font-size:clamp(56px,7.5vw,132px);
  font-weight:400;letter-spacing:-.072em;line-height:.88;
  color:#0a0a0a;
}
.mk-why-us__big:last-child{color:#fc5b34;}
.mk-why-us__cards{
  display:flex;flex-direction:column;gap:clamp(20px,2.5vw,36px);
}
.mk-why-us__card{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  border-radius:28px;
  padding:clamp(28px,3vw,48px);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 15px 45px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,.7);
  font-family:Aeonik,Arial,sans-serif;
}
.mk-why-us__card p{
  font-size:clamp(16px,1.2vw,22px);line-height:1.45;
  letter-spacing:-.025em;color:rgba(0,0,0,.78);margin:0;
  font-family:Aeonik,Arial,sans-serif;
}
.mk-why-us__card--text p{font-size:clamp(18px,1.5vw,28px);color:#0a0a0a;}
.mk-why-us__stat-bar{
  height:4px;background:rgba(0,0,0,.08);border-radius:2px;
  margin-bottom:1.5em;overflow:hidden;
}
.mk-why-us__stat-fill{
  height:100%;background:#fc5b34;border-radius:2px;
  width:0;transition:width 1.2s cubic-bezier(.16,1,.3,1);
}
.mk-why-us__stat-fill.is-filled{width:100%;}
.mk-why-us__stat-num{
  font-size:clamp(52px,5vw,88px);
  font-weight:400;letter-spacing:-.06em;line-height:1;
  color:#0a0a0a;margin-bottom:.4em;
}
.mk-why-us__avatars{display:flex;margin-bottom:1.2em;}
.mk-why-us__av{
  width:48px;height:48px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;
  border:2px solid #f4f7f6;
}
.mk-why-us__av+.mk-why-us__av{margin-left:-12px;}

/* Mobile tweaks voor beide secties */
@media(max-width:812px){
  /* testim: 1-kolom stack, geen sticky head, geen negatieve marge */
  .mk-testim{padding:clamp(60px,10vw,100px) max(5vw,24px);}
  .mk-testim__head{position:static;top:auto;margin-bottom:clamp(32px,6vw,60px);}
  .mk-testim__title{font-size:clamp(44px,11vw,72px);}
  /* Mobiel staan de kaarten toch al onder elkaar op volle breedte; daar mag
     de tussenruimte nog krapper. */
  .mk-testim__grid{gap:clamp(7vh,9vh,12vh);padding-bottom:8vh;}
  .mk-testim__card--offset{margin-top:0;}
  /* Expanding enter-effect op mobiel voor cards (why-us is GSAP-owned) */
  .mk-testim__card:not(.mk-gsap-owned),.mk-why-us__card:not(.mk-gsap-owned){
    opacity:0;
    transform:scale(.94) translateY(32px);
    transition:opacity .6s ease,transform .7s cubic-bezier(.16,1,.3,1);
    transition-delay:var(--td,0s);
  }
  .mk-testim__card.is-lusion-visible:not(.mk-gsap-owned),.mk-why-us__card.is-lusion-visible:not(.mk-gsap-owned){
    opacity:1;transform:scale(1) translateY(0);
  }
  /* why-us: 1-kolom, geen sticky */
  .mk-why-us__inner{grid-template-columns:1fr;}
  .mk-why-us__sticky{position:relative;top:auto;margin-bottom:clamp(32px,5vw,56px);}
  .mk-why-us__big{font-size:clamp(44px,12vw,72px);}
}

/* Desktop reveal: cards komen 1-voor-1 uit L/R (odd=links, even=rechts) */
@media(min-width:813px){
  .mk-testim__card{
    opacity:0;
    transition:opacity .8s ease,transform .9s cubic-bezier(.16,1,.3,1);
  }
  .mk-testim__card:nth-child(odd){transform:translateX(-120px) translateY(30px) scale(.96);}
  .mk-testim__card:nth-child(even){transform:translateX(120px) translateY(30px) scale(.96);}
  .mk-testim__card.is-lusion-visible{opacity:1;transform:translate(0,0) scale(1)!important;}

  .mk-why-us__card:not(.mk-gsap-owned){
    opacity:0;
    transform:translateX(60px) translateY(30px);
    transition:opacity .7s ease,transform .8s cubic-bezier(.16,1,.3,1);
  }
  .mk-why-us__card.is-lusion-visible:not(.mk-gsap-owned){opacity:1;transform:translate(0,0);}
}

/* 13. Preview section (geporteerd van ref3) -------------------------------- */
.preview {
  position: relative;
  width: 100%;
  padding: 0 clamp(24px, 5vw, 80px) clamp(90px, 12vw, 180px);
  box-sizing: border-box;
}
.preview_container {
  width: 100%;
  height: auto;
  aspect-ratio: 1424 / 762;
  background-color: #0b0f14;
  overflow: hidden;
  box-sizing: border-box;
  border: solid 8px #0b0f14;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.preview_container_inner {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  gap: 8px;
}
.preview_col {
  width: calc((100% - 16px) / 3);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.preview_img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.preview_img img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.preview_img.clip-lg {
  clip-path: none;
}

/* 12. Lusion-stijl projectenpagina ------------------------------------------ */
/* Disclaimer en project-number starten onzichtbaar, GSAP animeert ze in */
.mk-page-projects #projects-main-disclaimer,
.mk-page-projects #projects-main-title-project-number{opacity:0;}
/* Grid-layout fix: titel-top moet de volle breedte beslaan (ref: grid-column 1/span 12) */
.mk-page-projects #projects-main-title-top{grid-column:1/-1;position:relative;}
/* Wrapper: font-size wordt door JS (fitTitle) ingesteld; fallback 14vw */
.mk-page-projects #projects-main-title-wrapper{position:relative;width:fit-content;font-size:14vw;left:-.01em;}
/* Clip-div: verbergt de h1 totdat hij omhoog schuift */
.mk-title-clip{overflow:hidden;line-height:1;display:block;}
.mk-page-projects #projects-main-title{position:relative;display:block;margin:0;line-height:.95em;}
/* Getal en pijl rechtsboven naast de titel, klein IBMPlexMono */
.mk-page-projects #projects-main-title-project-number{font-family:IBMPlexMono,MKVMono,monospace!important;font-size:clamp(12px,2.5vw,40px)!important;position:absolute!important;top:.4em;right:-6vw;overflow:hidden;}
.mk-page-projects #projects-main-title-project-arrow{position:absolute!important;right:-5.5vw;bottom:1.5vw;height:clamp(14px,2.2vw,36px);width:clamp(14px,2.2vw,36px);}

/* 13. Lusion-stijl end-section (projecten) ---------------------------------- */
#end-section{position:relative!important;min-height:80vh!important;display:flex!important;align-items:center;justify-content:center;background:#f4f7f6;font-family:Aeonik,Arial,sans-serif;color:#0b0f14;padding:clamp(80px,10vw,160px) clamp(24px,5vw,80px);}
#end-section-outer,#end-section-inner{width:100%;display:flex!important;align-items:center;justify-content:center;}
#end-section-content{position:relative;text-align:center;max-width:100%;}
#end-section-content-crosses{display:flex;justify-content:space-between;width:min(640px,80vw);margin:0 auto clamp(28px,3.5vw,56px);}
.end-section-content-cross{position:relative;width:16px;height:16px;opacity:.65;flex-shrink:0;}
.end-section-content-cross::before,.end-section-content-cross::after{content:'';position:absolute;left:50%;top:50%;background:#fc5b34;border-radius:2px;transform:translate(-50%,-50%);}
.end-section-content-cross::before{width:100%;height:2px;}
.end-section-content-cross::after{width:2px;height:100%;}
#end-section-subtitle{font-family:IBMPlexMono,MKVMono,monospace;font-size:clamp(11px,.85vw,14px);letter-spacing:.06em;text-transform:uppercase;color:rgba(11,15,20,.5);margin-bottom:1.4em;}
#end-section-title{display:block;}
#end-section-title-link{display:inline-block;font-weight:400;font-size:clamp(52px,10vw,180px);line-height:.88;letter-spacing:-.07em;cursor:pointer;text-decoration:none;color:#0b0f14;transition:color .35s ease,transform .45s cubic-bezier(.16,1,.3,1);background:none;border:none;padding:0;font-family:Aeonik,Arial,sans-serif;}
#end-section-title-link:hover{color:#fc5b34;transform:scale(1.018);}
#end-bottom{display:flex;align-items:center;justify-content:center;gap:clamp(20px,3vw,44px);margin-top:clamp(60px,8vw,100px);}
.end-bottom-arrow-container{display:flex;flex-direction:column;align-items:center;gap:4px;}
.end-bottom-arrow{width:1px;height:18px;background:#fc5b34;opacity:.6;}
#end-bottom-text-container{font-family:IBMPlexMono,MKVMono,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(11,15,20,.4);}

/* 14. Waarom wij — Lusion bento grid --------------------------------------- */
.mk-waarom{padding:clamp(60px,8vw,130px) clamp(24px,5vw,80px);font-family:Aeonik,Arial,sans-serif;color:#0b0f14;position:relative;overflow:hidden;}
.mk-waarom__inner{max-width:1440px;margin:0 auto;position:relative;z-index:1;}
.mk-wb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;grid-auto-rows:minmax(230px, auto);position:relative;z-index:1;}

/* base card with Glassmorphism */
.mk-wb{border-radius:clamp(20px,1.6vw,28px);padding:clamp(24px,2.8vw,44px);display:flex;flex-direction:column;overflow:hidden;position:relative;transition:box-shadow .4s ease,border-color .4s ease;will-change:transform;backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);z-index:2;}
.mk-wb:hover{box-shadow:0 18px 48px rgba(11,15,20,.05);}

/* Grid positions — desktop */
.mk-wb--i1 { grid-column: span 2; grid-row: span 1; }
.mk-wb--i2 { grid-column: span 1; grid-row: span 1; }
.mk-wb--i3 { grid-column: span 1; grid-row: span 1; }
.mk-wb--i4 { grid-column: span 1; grid-row: span 1; }
.mk-wb--i5 { grid-column: span 1; grid-row: span 1; }
.mk-wb--i6 { grid-column: span 1; grid-row: span 1; }
.mk-wb--i7 { grid-column: span 1; grid-row: span 1; }
.mk-wb--i8 { grid-column: span 1; grid-row: span 1; }
.mk-wb--i9 { grid-column: span 1; grid-row: span 1; }
.mk-wb--i10 { grid-column: span 2; grid-row: span 1; }

/* Card variations with Glassmorphic styles */
.mk-wb--light {
  background: rgba(255, 255, 255, 0.6);
  color: #0b0f14;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 12px 40px rgba(11, 15, 20, 0.04), inset 0 1px 1px rgba(255, 255, 255, 0.9);
}
.mk-wb--light .mk-wb__text {
  color: rgba(11, 15, 20, 0.7);
}
.mk-wb--light .mk-wb__badge {
  color: #fc5b34;
}
.mk-wb--orange {
  background: rgba(252, 91, 52, 0.85);
  color: #ffffff;
  border: 1px solid rgba(252, 91, 52, 0.25);
  box-shadow: 0 12px 40px rgba(252, 91, 52, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.35);
}
.mk-wb--dark {
  background: rgba(23, 24, 28, 0.8);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.06);
}
.mk-wb--black {
  background: rgba(11, 15, 20, 0.85);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.04);
}

/* Background Blobs for Glass Refraction */
.bento-bg-blobs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.bento-bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.1;
  animation: floatBgBlob 12s infinite alternate ease-in-out;
  will-change: transform;
}
.blob-orange {
  background: #fc5b34;
  width: 450px;
  height: 450px;
  top: 5%;
  left: -5%;
}
.blob-blue {
  background: #235efc;
  width: 550px;
  height: 550px;
  bottom: 5%;
  right: -5%;
  animation-delay: -4s;
}
.blob-purple {
  background: #a823fc;
  width: 400px;
  height: 400px;
  top: 40%;
  left: 40%;
  animation-delay: -8s;
}
@keyframes floatBgBlob {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(50px, 30px) scale(1.15); }
}

/* Card meta tags */
.card-meta {
  position: absolute;
  top: 24px;
  right: 24px;
  font-family: IBMPlexMono, MKVMono, monospace;
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.35;
  pointer-events: none;
  z-index: 10;
}
.mk-wb--light .card-meta {
  color: #0b0f14;
  opacity: 0.35;
}
.mk-wb--orange .card-meta {
  color: #ffffff;
  opacity: 0.6;
}
.mk-wb--dark .card-meta, .mk-wb--black .card-meta {
  color: #ffffff;
  opacity: 0.35;
}

/* Mouse spotlight glow effect */
.mk-wb::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.mk-wb:hover::before {
  opacity: 1;
}

/* Light card spotlight (subtle orange glow) */
.mk-wb--light::before {
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), rgba(252,91,52,0.06), transparent 50%);
}
/* Orange card spotlight (subtle white/yellow glow) */
.mk-wb--orange::before {
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.22), transparent 50%);
}
/* Dark & Black card spotlight (glowing orange neon smear) */
.mk-wb--dark::before, .mk-wb--black::before {
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), rgba(252,91,52,0.14), transparent 50%);
}

/* Aurora Glowing Blobs */
.aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  opacity: 0.12;
  z-index: 0;
  animation: floatBlob 8s infinite alternate ease-in-out;
  will-change: transform;
}
.orange-blob {
  background: #fc5b34;
  width: 140px;
  height: 140px;
  top: 10%;
  left: 20%;
}
.blue-blob {
  background: #235efc;
  width: 120px;
  height: 120px;
  bottom: 10%;
  right: 15%;
  animation-delay: -3s;
}
.white-blob {
  background: #ffffff;
  width: 160px;
  height: 160px;
  top: 20%;
  left: 30%;
  opacity: 0.22;
}

@keyframes floatBlob {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(20px, 30px, 0) scale(1.15); }
}

/* Intro Card */
.mk-wb--intro{background:linear-gradient(135deg,#f9fbfb 0%,#f0f6f4 100%);justify-content:center;}
.mk-wb__badge{font-family:IBMPlexMono,MKVMono,monospace;font-size:clamp(10px,.7vw,12px);letter-spacing:.14em;text-transform:uppercase;color:#fc5b34;margin-bottom:1.6em;display:block;font-weight:500;position:relative;z-index:2;}
.mk-wb__title{font-size:clamp(28px,2.8vw,48px);font-weight:400;letter-spacing:-.03em;line-height:1.05;color:inherit;margin:0 0 .5em;position:relative;z-index:2;}
.mk-wb__text{font-size:clamp(14px,1vw,16px);line-height:1.65;color:inherit;opacity:.78;margin:0 0 1.8em;position:relative;z-index:2;}
.mk-wb .mk-hero-btn {
  align-self: flex-start;
  margin-top: auto;
  position: relative;
  z-index: 2;
}

/* Font Card */
.mk-wb--font{justify-content:center;}
.mk-wb-font-showcase{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:20px;margin-top:auto;}
.mk-wb-font-main{font-size:clamp(50px,5vw,90px);font-weight:400;letter-spacing:-.05em;line-height:.8;flex:1;}
.mk-wb-font-weights{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;flex:1;}
.mk-wb-font-weight-box{border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:4px;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;}

/* Glassmorphism weights boxes inside orange card */
.mk-wb--orange .mk-wb-font-weight-box {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.mk-wb--orange .mk-wb-font-weight-box:hover {
  background: rgba(255,255,255,0.25);
  border-color: #ffffff;
  transform:scale(1.05) translateY(-2px);
  box-shadow: 0 8px 32px rgba(255,255,255,0.15);
}
.mk-wb--orange .mk-wb-font-weight-box .weight-char {
  color: #ffffff;
  font-size:24px;
}
.mk-wb--orange .mk-wb-font-weight-box .weight-label {
  color: rgba(255,255,255,0.6);
  font-family:IBMPlexMono,MKVMono,monospace;
  font-size:9px;
  text-transform:uppercase;
}
.weight-bold .weight-char{font-weight:700;}
.weight-medium .weight-char{font-weight:500;}
.weight-regular .weight-char{font-weight:400;}
.weight-mono .weight-char{font-family:MKVMono,monospace;}

/* 3D Card Card */
.mk-wb--card3d{align-items:center;justify-content:center;perspective:1000px;}
.mk-wb-card3d-scene{width:100%;height:180px;display:flex;align-items:center;justify-content:center;}
.mk-wb-card3d-card{width:220px;height:130px;position:relative;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.16,1,.3,1);cursor:pointer;z-index:2;}
.mk-wb-card3d-card:hover{transform:rotateY(180deg);}
.mk-wb-card3d-side{position:absolute;width:100%;height:100%;border-radius:12px;backface-visibility:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:16px;box-shadow:0 8px 30px rgba(0,0,0,0.25);border:1px solid rgba(255,255,255,0.12);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.mk-wb-card3d-side.front{background:rgba(255, 255, 255, 0.85);color:#0b0f14;z-index:2;transform:rotateY(0deg);}
.mk-wb-card3d-side.back{background:rgba(11, 15, 20, 0.85);color:#fff;transform:rotateY(180deg);border-color:rgba(252,91,52,0.25);}
.mk-wb-card3d-side.front .card-logo{font-size:20px;font-weight:500;letter-spacing:-.03em;}
.mk-wb-card3d-side.front .card-bottom-label{font-family:IBMPlexMono,MKVMono,monospace;font-size:9px;text-transform:uppercase;color:rgba(11,15,20,.4);}
.mk-wb-card3d-side.back strong{display:block;font-size:16px;font-weight:500;}
.mk-wb-card3d-side.back .card-role{font-family:IBMPlexMono,MKVMono,monospace;font-size:9px;text-transform:uppercase;color:#fc5b34;}
.mk-wb-card3d-side.back .card-details{font-size:11px;color:rgba(255,255,255,.6);line-height:1.4;margin-top:auto;}
.mk-wb-card3d-side.back .card-details span{display:block;}

/* Browser Mockup */
.mk-wb--browser{justify-content:center;}
.mk-wb-browser-window{border:1px solid rgba(255,255,255,0.08);border-radius:16px;overflow:hidden;background:#0c0d12;display:flex;flex-direction:column;box-shadow:0 12px 32px rgba(0,0,0,0.2);margin-top:auto;position:relative;z-index:2;}
.mk-wb-browser-header{background:#17181c;padding:10px 16px;display:flex;align-items:center;gap:16px;border-bottom:1px solid rgba(255,255,255,0.05);}
.mk-wb-browser-header .dots{display:flex;gap:6px;}
.mk-wb-browser-header .dot{width:8px;height:8px;border-radius:50%;display:inline-block;}
.mk-wb-browser-header .dot.red{background:#ff5f56;}
.mk-wb-browser-header .dot.yellow{background:#ffbd2e;}
.mk-wb-browser-header .dot.green{background:#27c93f;}
.mk-wb-browser-header .address-bar{background:rgba(255,255,255,0.04);border-radius:6px;padding:3px 12px;font-size:10px;font-family:IBMPlexMono,MKVMono,monospace;color:rgba(255,255,255,0.4);flex:1;max-width:320px;border:1px solid rgba(255,255,255,0.02);}
.mk-wb-browser-body{padding:16px;display:grid;grid-template-columns:1fr 1.2fr;gap:16px;background:#0c0d12;background-image:linear-gradient(rgba(252,91,52,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(252,91,52,0.03) 1px, transparent 1px);background-size:20px 20px;}
.browser-metrics{display:flex;flex-direction:column;gap:10px;justify-content:center;}
.browser-metrics .metric{display:flex;flex-direction:column;}
.browser-metrics .metric .m-val{font-size:24px;font-weight:400;line-height:1;}
.browser-metrics .metric .m-lbl{font-family:IBMPlexMono,MKVMono,monospace;font-size:9px;text-transform:uppercase;color:rgba(255,255,255,0.4);margin-top:2px;}
.browser-graph{position:relative;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.02);border-radius:8px;padding:10px;border:1px solid rgba(255,255,255,0.04);overflow:hidden;}
.graph-svg{width:100%;height:auto;overflow:visible;}
.graph-path{stroke-dasharray:600;stroke-dashoffset:600;animation:drawGraph 3.5s cubic-bezier(.4,0,.2,1) infinite;}
@keyframes drawGraph{to{stroke-dashoffset:0;}}
.graph-pulse-dot{animation:pulseDot 1.5s ease-in-out infinite alternate;}

/* Phone Mockup */
.mk-wb--phone{align-items:center;justify-content:center;perspective:1000px;}
.mk-wb-phone-wrapper{width:100%;height:220px;display:flex;align-items:center;justify-content:center;}
.mk-wb-phone-chassis{width:125px;height:240px;border:6px solid #1c1c1e;border-radius:24px;background:#000;position:relative;box-shadow:0 12px 36px rgba(0,0,0,0.3);transform-style:preserve-3d;transition:transform .4s cubic-bezier(.16,1,.3,1);will-change:transform;}
.mk-wb-phone-chassis .speaker{width:40px;height:3px;background:#2c2c2e;border-radius:2px;position:absolute;top:6px;left:50%;transform:translateX(-50%);z-index:3;}
.mk-wb-phone-chassis .screen{position:absolute;inset:2px;border-radius:18px;background:#fff;overflow:hidden;z-index:1;}
.mk-wb-phone-chassis .screen-content{padding:14px 8px;display:flex;flex-direction:column;gap:8px;height:400px;animation:scrollScreen 8s ease-in-out infinite alternate;position:absolute;width:100%;}
@keyframes scrollScreen{0%{transform:translateY(0);}100%{transform:translateY(-140px);}}
.phone-header{font-family:Aeonik;font-size:9px;font-weight:500;border-bottom:1px solid rgba(0,0,0,.05);padding-bottom:4px;color:#0b0f14;}
.phone-hero{padding:4px 0;}
.phone-hero h3{font-size:11px;font-weight:400;line-height:1.2;margin:0;color:#0b0f14;}
.phone-projects{display:flex;flex-direction:column;gap:6px;}
.phone-projects .proj-thumb{height:45px;border-radius:6px;object-fit:cover;width:100%;}
.mk-wb-phone-chassis .home-indicator{width:40px;height:3px;background:#8e8e93;border-radius:2px;position:absolute;bottom:6px;left:50%;transform:translateX(-50%);z-index:3;}

/* Stats & Orbit Card */
.mk-wb--stats{justify-content:center;}
.mk-wb-stats-container{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;width:100%;margin-top:auto;}
.stats-left{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-self:center;}
.stats-left .stat-item{display:flex;flex-direction:column;}
.stats-left .stat-item .num{font-size:36px;font-weight:400;color:#fc5b34;line-height:1;}
.stats-left .stat-item .label{font-family:IBMPlexMono,MKVMono,monospace;font-size:9px;text-transform:uppercase;margin-top:4px;}
.stats-right{display:flex;align-items:center;justify-content:center;position:relative;height:140px;}
.bento-orbit-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;}
.orbit-visual{position:relative;width:120px;height:120px;display:flex;align-items:center;justify-content:center;z-index:2;}
.orbit-visual .nucleus{width:36px;height:36px;border-radius:50%;background:#fc5b34;color:#fff;font-size:10px;font-weight:600;display:grid;place-items:center;box-shadow:0 0 20px rgba(252,91,52,.4);z-index:2;}
.orbit-visual .orbit-ring{position:absolute;border:1px dashed rgba(255,255,255,.08);border-radius:50%;z-index:1;}
.orbit-visual .orbit-ring.ring1{width:70px;height:70px;animation:spinOrbit 10s linear infinite;}
.orbit-visual .orbit-ring.ring2{width:110px;height:110px;animation:spinOrbit 15s linear infinite reverse;}
.orbit-visual .electron{position:absolute;width:24px;height:24px;border-radius:50%;background:#fff;border:1px solid rgba(11,15,20,.05);display:grid;place-items:center;font-family:IBMPlexMono,MKVMono,monospace;font-size:7px;color:#0b0f14;box-shadow:0 2px 8px rgba(0,0,0,.03);z-index:3;}
.orbit-visual .electron.e1{animation:orbit1 10s linear infinite;}
.orbit-visual .electron.e2{animation:orbit2 15s linear infinite;}
.orbit-visual .electron.e3{animation:orbit3 12s linear infinite;}

@keyframes spinOrbit{100%{transform:rotate(360deg);}}
@keyframes orbit1{
  0%{transform:rotate(0deg) translate(35px) rotate(0deg);}
  100%{transform:rotate(360deg) translate(35px) rotate(-360deg);}
}
@keyframes orbit2{
  0%{transform:rotate(0deg) translate(55px) rotate(0deg);}
  100%{transform:rotate(360deg) translate(55px) rotate(-360deg);}
}
@keyframes orbit3{
  0%{transform:rotate(180deg) translate(45px) rotate(-180deg);}
  100%{transform:rotate(540deg) translate(45px) rotate(-540deg);}
}

/* initial hidden state for GSAP bento animation */
.mk-wb{opacity:0;}
@media(prefers-reduced-motion:reduce){.mk-wb{opacity:1!important;transform:none!important;}}

/* Responsive adjustments */
@media(max-width:1024px){
  .mk-wb--intro{grid-column:1/span 12;grid-row:span 1;}
  .mk-wb--font{grid-column:1/span 12;grid-row:span 1;}
  .mk-wb--card3d{grid-column:1/span 5;grid-row:span 1;}
  .mk-wb--browser{grid-column:6/span 7;grid-row:span 1;}
  .mk-wb--phone{grid-column:1/span 5;grid-row:span 1;}
  .mk-wb--stats{grid-column:6/span 7;grid-row:span 1;}
}
@media(max-width:768px){
  .mk-wb-grid{grid-template-columns:1fr;gap:16px;}
  .mk-wb--intro,.mk-wb--font,.mk-wb--card3d,.mk-wb--browser,.mk-wb--phone,.mk-wb--stats{grid-column:span 1;grid-row:auto;}
  .mk-wb-stats-container{grid-template-columns:1fr;}
  .stats-right{height:120px;}
  .mk-wb-font-showcase{flex-direction:column;gap:16px;}
  .mk-wb-font-weights{width:100%;}
  .mk-wb-browser-body{grid-template-columns:1fr;}
}

/* 14.5. Bento Grid visual elements & Menu enhancements ----------------------------- */
.font-sheet-marquee {
  position: absolute;
  top: 25%;
  left: 0;
  width: 200%;
  font-family: IBMPlexMono, MKVMono, monospace;
  font-size: 11px;
  letter-spacing: 0.25em;
  color: #ffffff;
  opacity: 0.08;
  white-space: nowrap;
  animation: scrollMarquee 35s linear infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes scrollMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.radar-scan {
  position: absolute;
  width: 70px;
  height: 70px;
  border: 1px solid rgba(252, 91, 52, 0.45);
  border-radius: 50%;
  top: 20px;
  left: 200px;
  transform: translate(-50%, -50%);
  animation: radarPulse 3s infinite linear;
  pointer-events: none;
}
@keyframes radarPulse {
  0% { transform: translate(-50%, -50%) scale(0.4); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}

/* Float animation for the phone chassis */
.mk-wb-phone-chassis {
  animation: floatPhone 6s infinite ease-in-out alternate;
}
@keyframes floatPhone {
  0% { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-10px) rotate(1.5deg); }
}

/* Crosshairs inside cards */
.card-crosshair {
  position: absolute;
  font-family: IBMPlexMono, monospace;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.15);
  pointer-events: none;
  transition: transform 0.5s ease;
}
.card-crosshair.top-right { top: 15px; right: 15px; }
.card-crosshair.bottom-left { bottom: 15px; left: 15px; }
.card-crosshair.top-left { top: 15px; left: 15px; }
.card-crosshair.bottom-right { bottom: 15px; right: 15px; }
.mk-wb:hover .card-crosshair {
  transform: rotate(90deg);
  color: rgba(252, 91, 52, 0.5);
}

/* Header Menu Talk button desktop/mobile swap & display */
#header-menu-talk {
  display: flex !important;
  border: none !important;
}
#header-menu-talk .text-desktop {
  display: inline;
}
#header-menu-talk .text-mobile {
  display: none;
}
@media (max-width: 812px) {
  #header-menu-talk .text-desktop {
    display: none;
  }
  #header-menu-talk .text-mobile {
    display: inline;
  }
}

/* 2-Column Bento Layout */
.mk-wb-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  width: 100%;
  position: relative;
  z-index: 1;
}
.bento-col-left, .bento-col-right {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Base Bento Card adjustments */
.mk-wb {
  padding: 32px;
  background: #ffffff !important;
  color: #0b0f14 !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
  border-radius: 24px !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.mk-wb-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.bento-card-title {
  font-family: Aeonik, Arial, sans-serif;
  font-size: clamp(28px, 2.6vw, 44px);
  font-weight: 400;
  letter-spacing: -0.03em;
  color: #0b0f14;
  margin: 8px 0 24px 0;
  line-height: 1.05;
}

/* Card 1: Polaroids Portfolio Stack */
.polaroids-wrapper {
  position: relative;
  height: 240px;
  width: 100%;
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.polaroid-frame {
  position: absolute;
  background: #ffffff;
  padding: 10px 10px 24px 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  width: 140px;
  transition: transform 0.4s ease, z-index 0.4s ease;
}
.polaroid-frame img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 2px;
}
.polaroid-frame.p1 {
  transform: rotate(-10deg) translate(-30px, 0);
  z-index: 1;
}
.polaroid-frame.p2 {
  transform: rotate(5deg) translate(25px, -15px);
  z-index: 2;
}
.polaroid-frame.p3 {
  transform: rotate(-4deg) translate(0, 20px);
  z-index: 3;
}
.bento-card-polaroids:hover .polaroid-frame.p1 {
  transform: rotate(-16deg) translate(-45px, -10px);
}
.bento-card-polaroids:hover .polaroid-frame.p2 {
  transform: rotate(12deg) translate(40px, -25px);
}
.bento-card-polaroids:hover .polaroid-frame.p3 {
  transform: rotate(0deg) translate(0, 10px) scale(1.05);
}

/* Card 2: Equipment Tower */
.equipment-image-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 16px;
}
.equipment-img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.bento-card-equipment:hover .equipment-img {
  transform: scale(1.04);
}
.orange-pulse-dot {
  position: absolute;
  right: 18%;
  top: 50%;
  width: 12px;
  height: 12px;
  background: #fc5b34;
  border-radius: 50%;
  box-shadow: 0 0 10px #fc5b34;
  z-index: 5;
}
.orange-pulse-dot::after {
  content: '';
  position: absolute;
  inset: -6px;
  border: 1.5px solid #fc5b34;
  border-radius: 50%;
  animation: pingCircle 1.8s infinite ease-out;
}

/* Card 3: Satisfied Clients */
.bento-card-clients {
  padding: 24px 32px !important;
  background: #fc5b34 !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
.bento-card-clients .mk-wb-inner {
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.bento-card-clients .bento-card-title {
  color: #ffffff !important;
  margin-top: 4px;
  margin-bottom: 0;
}
.bento-card-clients .mk-wb__badge {
  color: rgba(255, 255, 255, 0.78) !important;
}
.bento-card-clients .clients-info {
  display: flex;
  flex-direction: column;
}
.clients-avatars {
  display: flex;
  align-items: center;
}
.avatar-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid #ffffff;
  object-fit: cover;
  margin-left: -12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, margin 0.3s ease;
}
.avatar-img:first-child {
  margin-left: 0;
}
.bento-card-clients:hover .avatar-img {
  transform: translateY(-2px);
  margin-left: -6px;
}
.bento-card-clients:hover .avatar-img:first-child {
  margin-left: 0;
}

/* Card 4: Quality Before/After Comparison Slider */
.comparison-slider {
  position: relative;
  width: 100%;
  height: 240px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 10px 35px rgba(0,0,0,0.03);
  cursor: ew-resize;
  user-select: none;
}
.img-before, .img-after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.img-before img, .img-after img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img-before img {
  filter: blur(12px) contrast(0.85);
}
.img-before {
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}
.slider-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: #ffffff;
  z-index: 5;
  transform: translateX(-50%);
}
.slider-arrows {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  background: #fc5b34;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(252, 91, 52, 0.35);
}

/* Card 5: Hands Reaching */
.hands-image-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 16px;
  margin-top: 12px;
}
.hands-img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.bento-card-hands:hover .hands-img {
  transform: scale(1.03) translateY(-4px);
}

/* Responsive configurations */
@media (max-width: 812px) {
  .mk-wb-grid-2col {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .bento-col-left, .bento-col-right {
    gap: 16px;
  }
  .mk-wb {
    padding: 24px !important;
    border-radius: 18px !important;
  }
  .bento-card-clients .mk-wb-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px;
  }
  .clients-avatars {
    align-self: flex-start;
    margin-left: 12px;
  }
}

/* 15. FAQ-sectie — lusion accordion ---------------------------------------- */
.mk-faq{padding:clamp(70px,8vw,130px) clamp(24px,5vw,80px);font-family:Aeonik,Arial,sans-serif;color:#0b0f14;}
.mk-faq__header{margin-bottom:clamp(40px,5vw,80px);}
.mk-faq__list{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(11,15,20,.12);}
.mk-faq__item{border-bottom:1px solid rgba(11,15,20,.12);}
.mk-faq__item:nth-child(odd){padding-right:clamp(16px,3vw,56px);}
.mk-faq__item:nth-child(even){border-left:1px solid rgba(11,15,20,.12);padding-left:clamp(16px,3vw,56px);}
.mk-faq__btn{display:flex;justify-content:space-between;align-items:center;width:100%;padding:clamp(18px,2.2vw,36px) 0;background:none;border:none;cursor:pointer;text-align:left;font-family:Aeonik,Arial,sans-serif;}
@media(max-width:768px){.mk-faq__list{grid-template-columns:1fr;}.mk-faq__item:nth-child(odd){padding-right:0;}.mk-faq__item:nth-child(even){border-left:none;padding-left:0;}}
.mk-faq__q{font-size:clamp(18px,1.6vw,30px);letter-spacing:-.03em;font-weight:400;color:#0b0f14;flex:1;margin:0;transition:color .25s ease;}
.mk-faq__item.is-open .mk-faq__q,.mk-faq__btn:hover .mk-faq__q{color:#fc5b34;}
.mk-faq__icon{width:clamp(30px,2.2vw,42px);height:clamp(30px,2.2vw,42px);border-radius:50%;border:1.5px solid rgba(11,15,20,.2);flex-shrink:0;margin-left:1.5em;position:relative;transition:background .3s ease,border-color .3s ease;}
.mk-faq__icon::before,.mk-faq__icon::after{content:'';position:absolute;left:50%;top:50%;background:#0b0f14;border-radius:1px;transform:translate(-50%,-50%);transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .3s,background .3s;}
.mk-faq__icon::before{width:38%;height:1.5px;}
.mk-faq__icon::after{width:1.5px;height:38%;}
.mk-faq__item.is-open .mk-faq__icon{background:#fc5b34;border-color:#fc5b34;}
.mk-faq__item.is-open .mk-faq__icon::before,.mk-faq__item.is-open .mk-faq__icon::after{background:#fff;}
.mk-faq__item.is-open .mk-faq__icon::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0;}
.mk-faq__body{overflow:hidden;}
.mk-faq__body-inner{padding:0 0 clamp(20px,2.5vw,42px);max-width:72%;}
.mk-faq__a{font-size:clamp(14px,1vw,18px);line-height:1.65;color:rgba(11,15,20,.6);margin:0;}
@media(max-width:768px){.mk-faq__body-inner{max-width:100%;}}

/* 15. Privacy-pagina -------------------------------------------------------- */
.mk-privacy{max-width:880px;margin:0 auto;padding:clamp(100px,12vh,160px) clamp(24px,5vw,80px) clamp(80px,10vw,140px);font-family:Aeonik,Arial,sans-serif;color:#0b0f14;}
.mk-privacy__hero{margin-bottom:clamp(50px,7vw,100px);}
.mk-privacy__label{font-family:IBMPlexMono,MKVMono,monospace;font-size:clamp(11px,.8vw,13px);letter-spacing:.06em;text-transform:uppercase;color:rgba(11,15,20,.45);margin-bottom:1.4em;}
.mk-privacy h1{margin:0 0 .6em;font-weight:400;font-size:clamp(52px,10vw,130px);line-height:.88;letter-spacing:-.07em;}
.mk-privacy__intro{font-size:clamp(16px,1.2vw,21px);line-height:1.45;color:rgba(11,15,20,.75);max-width:38em;margin:0;}
.mk-privacy__content h2{font-size:clamp(22px,2vw,34px);font-weight:400;letter-spacing:-.03em;margin:clamp(40px,5vw,72px) 0 .7em;}
.mk-privacy__content h2:first-child{margin-top:0;}
.mk-privacy__content p,.mk-privacy__content li{font-size:clamp(14px,.95vw,17px);line-height:1.65;color:rgba(11,15,20,.65);}
.mk-privacy__content a{color:#fc5b34;text-decoration:none;}
.mk-privacy__content a:hover{text-decoration:underline;}
.mk-privacy__content ul{padding-left:1.5em;margin:.5em 0;}
.mk-privacy__content li{margin-bottom:.4em;}
.mk-privacy__divider{height:1px;background:rgba(11,15,20,.1);margin:clamp(40px,5vw,72px) 0;}

/* Footer phone link matching email style */
#footer-business-phone {
  font-size: 1.15em !important;
  line-height: 1.35 !important;
  color: #000 !important;
  text-decoration: none !important;
  display: block !important;
  margin-top: 0.25em !important;
  transition: color 0.3s ease !important;
  width: fit-content !important;
}
#footer-business-phone:hover {
  color: #fc5b34 !important;
}

/* ============================================================================
   Lusion-pariteit ronde (r12)
   1. Scroll-indicator (zoals #scroll-indicator op lusion.co)
   2. CTA-knoppen in Lusion-stijl: dot → text → arrow (excl. header)
   3. Menu: "Stel een vraag" weg, "Mail ons" → modal, geen underline
   4. Footer-typografie exact als ref (#footer-middle-contact / newsletter)
   5. Boot-cover tegen de flash vóór het page-transition gordijn
   ========================================================================== */

/* --- 1. Scroll-indicator ---------------------------------------------------- */
/* Native scrollbar verbergen: de custom indicator is nu de enige. */
html{scrollbar-width:none;-ms-overflow-style:none;}
html::-webkit-scrollbar,
body::-webkit-scrollbar{display:none;width:0;height:0;}
#mk-scroll-indicator{
  position:fixed;
  width:6px;
  height:20vh;
  top:40vh;
  right:16px;
  background:rgba(0,0,0,.1);
  border-radius:3px;
  z-index:9000;
  pointer-events:none;
  overflow:hidden;
  transition:opacity .3s ease;
}
#mk-scroll-indicator-bar{
  position:absolute;
  top:0; left:0;
  width:100%;
  background:#0b0f14;
  border-radius:3px;
  will-change:transform;
}
@media(max-width:812px){
  #mk-scroll-indicator{width:2px;border-radius:1px;right:6px;}
}

/* --- 2. Lusion CTA-knoppen (dot → text → arrow) ----------------------------- */
/* Flex-order ipv HTML aanpassen: dot links, arrow rechts (absoluut, schuift in
   bij hover terwijl de dot opschaalt tot vulling — exact #home-featured-cta). */
:where(a,button,span).mk-hero-btn{
  display:inline-flex!important;
  align-items:center!important;
  gap:1em!important;
  padding:1em 1.5em 1em 1.625em!important;
  overflow:hidden!important;
  position:relative!important;
  text-transform:uppercase!important;
  font-weight:500!important;
}
.mk-hero-btn .mk-hero-btn__dot{
  order:1!important;
  position:relative!important;
  display:inline-block!important;
  width:.5em!important;height:.5em!important;
  border-radius:100px!important;
  background:currentColor!important;
  opacity:1!important;
  z-index:1!important;
  transform:none!important;
  transition:background .5s cubic-bezier(.35,0,0,1),transform .4s cubic-bezier(.35,0,0,1)!important;
}
.mk-hero-btn .mk-hero-btn__text{
  order:2!important;
  position:relative!important;
  z-index:1!important;
  transform:none!important;
  transition:color .5s cubic-bezier(.35,0,0,1),transform .4s cubic-bezier(.35,0,0,1)!important;
}
.mk-hero-btn .mk-hero-btn__arrow{
  order:3!important;
  position:absolute!important;
  left:auto!important;
  right:1em!important;
  top:50%!important;
  width:1.2em!important;height:1.2em!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  transform:translate3d(3em,-50%,0)!important;
  transition:transform .4s cubic-bezier(.4,0,0,1)!important;
  z-index:1!important;
}
@media(hover:hover){
  .mk-hero-btn:hover .mk-hero-btn__dot,
  .project-row:hover .mk-hero-btn .mk-hero-btn__dot,
  .project-grid__item:hover .mk-hero-btn .mk-hero-btn__dot,
  .mk-step-card:hover .mk-hero-btn .mk-hero-btn__dot{
    transform:translate3d(4em,0,0) scale(32)!important;
    background:#fc5b34!important;
    opacity:1!important;
  }
  .mk-hero-btn:hover .mk-hero-btn__text,
  .project-row:hover .mk-hero-btn .mk-hero-btn__text,
  .project-grid__item:hover .mk-hero-btn .mk-hero-btn__text,
  .mk-step-card:hover .mk-hero-btn .mk-hero-btn__text{
    transform:translate3d(-1.5em,0,0)!important;
  }
  .mk-hero-btn:hover .mk-hero-btn__arrow,
  .project-row:hover .mk-hero-btn .mk-hero-btn__arrow,
  .project-grid__item:hover .mk-hero-btn .mk-hero-btn__arrow,
  .mk-step-card:hover .mk-hero-btn .mk-hero-btn__arrow{
    transform:translate3d(0,-50%,0)!important;
  }
}

/* --- 3. Menu: talk-knop weg, Mail ons → modal zonder underline -------------- */
#header-menu-talk{display:none!important;}
#header-menu-labs,
#header-menu-labs *,
#header-menu-labs-text,
#header-menu-labs-text-clone{text-decoration:none!important;border-bottom:none!important;}

/* --- 4. Footer-typografie zoals lusion.co ----------------------------------- */
#footer-section{font-size:clamp(.875rem,1vw,2rem)!important;}
@media(max-width:380px){#footer-section{font-size:clamp(.75rem,1vw,2rem)!important;}}
#footer-middle-contact{font-size:1.25em!important;}
#footer-middle-contact .footer-address-line,
#footer-middle-contact .footer-socials-line,
#footer-middle-contact .footer-socials-text,
#footer-middle-contact #footer-business-link,
#footer-middle-contact #footer-business-phone,
#footer-middle-contact #footer-contact-enquires>div,
#footer-middle-contact #footer-contact-business>div{
  font-size:1em!important;
  line-height:1.4!important;
  letter-spacing:0!important;
  font-weight:400!important;
  font-family:Aeonik,Arial,sans-serif!important;
}
#footer-newsletter-header,
#footer-newsletter-header *{
  font-size:inherit!important;
  font-family:Aeonik,Arial,sans-serif!important;
  font-weight:400!important;
  letter-spacing:0!important;
  line-height:1.15!important;
}
#footer-newsletter-header{font-size:3.375em!important;}

/* --- Lusion char-reveal ------------------------------------------------------
   Zoals in de template: elk teken in een wrapper met overflow:hidden, zodat de
   letter van onderen "uit de regel" omhoog rolt. De padding/margin-truc houdt
   staarten (j, g, p) heel — anders knipt de overflow ze af. */
.mk-word-wrap{
  display:inline-block;
  white-space:nowrap;
}
.mk-char-wrap{
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
  /* De clip-box moet ALLEEN verticaal knippen (dat is de reveal zelf).
     Horizontaal viel de box samen met de letterbreedte, terwijl de inkt van een
     glyph daar bij deze negatieve letter-spacing net buiten valt — elke letter
     werd zo links en rechts ±2px afgeschaafd. Padding + even grote negatieve
     marge maakt de knipbox ruimer zonder de layout te verschuiven. */
  padding-bottom:.16em;
  margin-bottom:-.16em;
  padding-left:.08em;
  margin-left:-.08em;
  padding-right:.08em;
  margin-right:-.08em;
}
.mk-char-wrap > .char{
  display:inline-block;
  will-change:transform;
}
/* Titels die door de char-reveal worden bezet, niet ook door de CSS-pipeline
   verbergen — GSAP bezit hier de transform van de losse tekens. */
html body .mk-chars-owned{
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  transition:none!important;
}

/* --- Lusion-typografie site-breed -------------------------------------------
   lusion.co gebruikt uitsluitend Aeonik (display/body) + IBMPlexMono (labels)
   + LusionMono. De gebundelde template bracht daarnaast "SF Pro Rounded" mee
   via --font-rounded; dat is template-erfenis en hoort niet bij de huisstijl.
   De variabele omzetten dekt 31 plekken in één keer; body/.nav/.nav__cta zijn
   de enige die de stack hardcoden. */
:root{ --font-rounded: Aeonik, Arial, sans-serif !important; }
html body,
.nav,
.nav__cta{ font-family: Aeonik, Arial, sans-serif !important; }

/* --- Projectresultaat-kaarten in de recensie-strook -------------------------
   Bewust herkenbaar ANDERS dan een klantquote: label "Uit ons werk", geen
   aanhalingstekens en een rechthoekige projectafbeelding i.p.v. een rond
   portret. Zo leest niemand deze kaarten als een uitspraak van een klant. */
.tcard__tag,
.mk-testim__tag{
  display:inline-block;
  font-family:IBMPlexMono,MKVMono,monospace;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#fc5b34;
  margin-bottom:1.1em;
}
.tcard--project .tcard__quote,
.mk-testim__desc{
  font-style:normal;
  quotes:none;
}
.tcard--project .tcard__quote::before,
.tcard--project .tcard__quote::after{content:none;}
.mk-testim__desc{
  margin:0 0 1.4em;
  /* Was font-size:inherit en erfde daarmee de 16px van de kaart, terwijl de
     gewone recensies via .mk-testim__card blockquote op ±18,4px uitkwamen.
     Nu exact dezelfde schaal, zodat beide soorten kaarten even groot lezen. */
  font-size:clamp(16px,1.15vw,20px);
  line-height:1.5;
  color:inherit;
}
/* Projectbeeld: liggend kaartje i.p.v. rond portret */
.tcard__portrait--project{border-radius:14px!important;}
.tcard__portrait--project img{object-fit:cover!important;}
.mk-testim__avatar--project{
  border-radius:10px!important;
  object-fit:cover!important;
  width:52px!important;
  height:38px!important;
}

/* --- 5. Boot-cover: geen flash vóór het gordijn ------------------------------ */
/* Zelfde kleur als het eerste exit-gordijn (#f4f7f6): de wissel is onzichtbaar.
   JS zet .mk-curtain-live zodra het gordijn in de DOM staat; de keyframe is
   het vangnet als JS uitblijft (cover fade na 1.6s). */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:99997;
  background:#f4f7f6;
  pointer-events:none;
  animation:mkBootCoverOut .01s linear 1.6s forwards;
}
html.mk-curtain-live body::after{display:none;}
@keyframes mkBootCoverOut{to{opacity:0;visibility:hidden;}}


/* --- 12. Footer-parallax + Lusion scroll-nav -------------------------------- */
/* De footer moet BOVEN de mk-end liggen, anders schuift de eindsectie er
   overheen i.p.v. erachter weg. #footer-bg is de dekkende laag van de footer. */


/* mkv-theme.css zet #page-extra-sections.mk-lusion-footer-wrap op z-index:1
   !important — vandaar dezelfde id-specificiteit plus !important hier. */
#page-extra-sections.mk-lusion-footer-wrap.mk-foot-parallax{
  position:relative!important;
  z-index:3!important;
}
.mk-end{
  position:relative;
  z-index:1;
}

/* Footerinhoud 100px lager: zonder die ruimte plakken de kolommen tegen de
   bovenrand op het moment dat de footer over de eindsectie heen schuift.
   mkv-theme.css declareert #footer-middle drie keer met !important (18vh,
   10vh, clamp(56px,6vw,100px)); vandaar hier ook !important, en de bestaande
   waarde plus 100px in plaats van een vaste 100px. */
#page-extra-sections #footer-middle{
  padding-top:calc(clamp(56px,6vw,100px) + 100px)!important;
}

/* Exact de opbouw van #scroll-nav-section uit de lusion.co-template, met onze
   typografie en accentkleur. Zit onder de footer: doorscrollen = volgende
   pagina uit het menu. */
#scroll-nav-section{
  position:relative;
  z-index:3;
  display:block;
  background-color:#121416;
  color:#fff;
  font-family:Aeonik,Arial,sans-serif;
  font-size:clamp(.75rem,1vw,2rem);
  padding:0 max(5vw,40px) clamp(28px,3vw,52px);
}
#scroll-nav-content{
  display:block;
  text-transform:uppercase;
  color:inherit;
  text-decoration:none;
}
#scroll-nav-subtitle{
  padding-top:1em;
  line-height:1.35;
  letter-spacing:.02em;
  opacity:.72;
}
#scroll-nav-main{position:relative;}
#scroll-nav-text{
  white-space:nowrap;
  font-size:3.5em;
  padding:1em 0;
  line-height:1em;
  letter-spacing:-.03em;
}
#scroll-nav-next{
  position:absolute;
  display:flex;
  right:0;
  top:50%;
  margin-top:-.5em;
  min-width:200px;
  width:20%;
  line-height:1em;
}
#scroll-nav-next-text{white-space:nowrap;letter-spacing:.02em;}
#scroll-nav-next-bar{
  margin:calc(.5em - 1px) .75em 0 .75em;
  flex-grow:1;
  height:4px;
  background-color:#34393f;
  overflow:hidden;
}
#scroll-nav-next-bar-inner{
  width:100%;
  height:100%;
  background-color:#fc5b34;
  transform-origin:0 0;
  transform:scaleX(0);
}
/* Balk vol = klaar om door te gaan. De doorduw-fase (--snav-over 0→1) laat de
   pijl en de titel meelopen, zodat zichtbaar is dát er iets gaat gebeuren. */
#scroll-nav-section.is-ready #scroll-nav-next-arrow{
  transform:translateX(calc(var(--snav-over,0) * .9em));
  color:#fc5b34;
}
#scroll-nav-section.is-ready #scroll-nav-text{
  opacity:calc(1 - var(--snav-over,0) * .35);
  transform:translateX(calc(var(--snav-over,0) * 1.2em));
}
#scroll-nav-next-arrow,#scroll-nav-text{
  transition:color .3s ease;
  will-change:transform;
}
#scroll-nav-next-arrow{width:1.2em;height:1.2em;}
#scroll-nav-next-arrow svg{width:100%;height:100%;display:block;}
#scroll-nav-cross-line{
  position:relative;
  width:calc(100% - 1em);
  margin-left:.5em;
  height:1em;
}
.scroll-nav-cross{position:absolute;width:1em;height:1em;}
.scroll-nav-cross:before,.scroll-nav-cross:after{
  position:absolute;content:"";width:2px;height:1em;left:0;background:#fff;opacity:.55;
}
.scroll-nav-cross:after{transform:rotate(90deg);}
.scroll-nav-cross:nth-child(2){left:25%;}
.scroll-nav-cross:nth-child(3){left:50%;}
.scroll-nav-cross:nth-child(4){left:75%;}
.scroll-nav-cross:nth-child(5){left:100%;}
@media(max-width:812px){
  /* Lusion zet de balk op mobiel onder de titel en verbergt de plusjesrij. */
  #scroll-nav-next{position:relative;width:100%;margin-top:1em;top:auto;}
  #scroll-nav-cross-line{display:none;}
  #scroll-nav-text{font-size:2.6em;padding:.7em 0;}
}

/* --- 13. Home: dienstblokken in de site-vormtaal ---------------------------- */
/* Waren vlak wit met een kleine radius, terwijl de rest van de site (why-us,
   recensies, journey) glas gebruikt: half doorschijnend, blur, zachte rand en
   een inset-highlight. Doorschijnend is hier extra logisch — de oranje lus van
   de drawline loopt achter deze blokken door en schemert er nu doorheen. */
#awards.mk-about-redesign--fix22 .mk-about-card{
  position:relative!important;
  overflow:hidden!important;
  background:rgba(255,255,255,.55)!important;
  backdrop-filter:blur(14px) saturate(130%)!important;
  -webkit-backdrop-filter:blur(14px) saturate(130%)!important;
  border-radius:28px!important;
  border:1px solid rgba(255,255,255,.6)!important;
  box-shadow:
    0 15px 45px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.75)!important;
  padding:clamp(26px,2.5vw,40px)!important;
  /* Bewust NIET transform in de transitie: GSAP schrijft die inline tijdens de
     reveal en een CSS-transitie zou daar elke frame achteraan hobbelen. De
     hover-lift gebruikt daarom de losse `translate`-property, die naast
     `transform` bestaat en er dus niet mee vecht. */
  transition:
    translate .55s cubic-bezier(.16,1,.3,1),
    box-shadow .45s ease,
    border-color .45s ease,
    background .45s ease!important;
}
/* Accentliniaal langs de bovenrand; GSAP schaalt hem bij de reveal open. */
#awards .mk-about-card::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:100%; height:2px;
  background:linear-gradient(90deg,#fc5b34,#ff8a5c 55%,rgba(252,91,52,0));
  transform:scaleX(var(--mk-card-rule,0));
  transform-origin:left center;
}
#awards .mk-about-card__num{
  color:#fc5b34!important;
  opacity:1!important;
  letter-spacing:.06em!important;
}
#awards .mk-about-card h3{
  margin-top:.35em!important;
}
#awards .mk-about-card p{
  color:rgba(0,0,0,.72)!important;
}
#awards .mk-about-card:hover{
  translate:0 -8px!important;
  background:rgba(255,255,255,.72)!important;
  border-color:rgba(252,91,52,.34)!important;
  box-shadow:
    0 26px 60px rgba(252,91,52,.14),
    inset 0 1px 0 rgba(255,255,255,.85)!important;
}
@media(max-width:812px){
  #awards.mk-about-redesign--fix22 .mk-about-card{
    border-radius:22px!important;
    padding:24px!important;
  }
  /* Op een telefoon is hover er niet; de lift zou blijven hangen na een tik. */
  #awards .mk-about-card:hover{translate:none!important;}
}

/* --- Logo -------------------------------------------------------------------
   Logo staat weer gewoon in de header en dus vóór alles, inclusief de footer
   die eroverheen schuift. Op desktop een slag groter: mkv-theme.css zet
   #header-logo .mk-lusion-logo-img op 2.05em, dat was aan de kleine kant.
   Mobiel blijft op de bestaande 2em. */
@media(min-width:813px){
  #header-logo .mk-lusion-logo-img{height:2.35em!important;}
}

/* --- 14. Paginakleur: scroll-gedreven verloop -------------------------------
   De <html>-achtergrond stond via de gebundelde scroll-lock CSS op #fcebe0
   (perzik). Dat is de kleur die iOS/Android als tint voor de browserbalk
   pakken — vandaar dat die balk oranje oogde ondanks theme-color. Nu de blauwe
   basistint, en die verloopt mee tijdens het scrollen (zie initPageBgScroll).
   De drie stops zijn custom properties zodat JS ze kan animeren; zonder JS
   blijft exact het verloop staan dat er al was. */
html{
  background-color:var(--mk-page-bg,#e7f5fd)!important;
}
body{
  --mk-bg-a:#f4f7f6;
  --mk-bg-b:#eaf5f4;
  --mk-bg-c:#eef5f3;
  background:linear-gradient(180deg,
    var(--mk-bg-a) 0%,
    var(--mk-bg-b) 38%,
    var(--mk-bg-c) 100%)!important;
}