:root{--mkv-accent:#5362d5;--mkv-glow:var(--mkv-accent,#5362d5);--pink:#5362d5;--violett:#5362d5;--orange:#6572dc;--dark:#11131fcf;--subtle-dark:#151827d9}
html,body{background:var(--black,#0a0a12)}html.js{scroll-behavior:auto!important}.app-wrapper{overflow:clip!important}html.js .app-wrapper{opacity:0}
.fh-lang-btn,#awwwards,[class*="award-badge"],[class*="award-tag"]{display:none!important}.fh-three-images{display:none!important}.fh-three-images.mkv-rayo-three-images{display:block!important;height:100%!important;left:0!important;pointer-events:none!important;position:fixed!important;top:0!important;width:100%!important;z-index:4!important}.fh-three-images.mkv-rayo-three-images canvas{display:block!important;height:100%!important;pointer-events:none!important;width:100%!important}
/* DOM media stays visible unless the Rayo ImageCanvas replacement is active. */
.fh-item--image img.on-canvas,.fh-item--video video.on-canvas{opacity:1!important;visibility:visible!important}.fh-item--image{overflow:hidden}.fh-item--image img{will-change:transform}
canvas{pointer-events:none}.hero-model-wrapper[data-mkv-hero-motion="sphere"] canvas.mkv-rayo-hero-gl{visibility:visible!important;display:block!important;opacity:1!important}.fh-section--text-dark canvas.mkv-rayo-textdark-gl{visibility:visible!important;display:block!important;opacity:1!important}
#mkv-loader{position:fixed;inset:0;background:var(--black,#0a0a12);z-index:100000;display:flex;align-items:flex-end;padding:var(--spacing-xl,1.5rem);color:#fff;overflow:hidden;clip-path:inset(0 0 0 0)}#mkv-loader .mkv-loader-inner{width:100%;display:flex;align-items:flex-end;justify-content:space-between;border-top:1px solid rgba(255,255,255,.18);padding-top:1rem}.mkv-loader-brand{font-family:Matter,Arial,sans-serif;font-size:clamp(1.1rem,2vw,1.6rem);letter-spacing:-.04em}.mkv-loader-count{font-family:SaolDisplay,serif;font-style:italic;font-size:clamp(4rem,13vw,10rem);line-height:.72}.mkv-loader-count:after{content:"%";font-family:Matter,Arial,sans-serif;font-style:normal;font-size:.16em;margin-left:.15em}
#mkv-transition{display:none}.fh-menu--items,.fh-menu--link{will-change:opacity,transform}.line-wrapper{will-change:transform,opacity}.project--intro p .word{opacity:1!important}
/* Keep reference spatial design; only map its accent families into the MK Vision hue. */
.fh-section--service-video--purple{--pink:#5362d5;--purple:#5362d5}.fh-section--service-video--green{--green:#6673dc}.fh-section--service-video--red{--red:#4655cb}
@media(max-width:1199px){.hero-model-wrapper canvas{transform:none!important}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.work-canvas-wrapper canvas.mkv-rayo-work-gl{visibility:visible!important;display:block!important;width:100%!important;height:100%!important}.work-canvas-wrapper{background:#0a0a12}

/* Original Rayo split-text mechanics. */
.splitting .char{display:inline-block;filter:blur(var(--blur,0));transform:translateY(var(--clip,0)) translateZ(0);backface-visibility:hidden;will-change:transform,filter,opacity}
.fh-section--service-intro .service-intro-text .char{filter:blur(var(--blur,0));transform:translateY(var(--clip,0)) translateZ(0)}

/* Original ImageCanvas-style bulge for project cards. */
.fh-item--image,.fh-item--video{position:relative}.mkv-card-webgl-active>img.on-canvas,.mkv-card-webgl-active>video.on-canvas{opacity:0!important;visibility:hidden!important}.mkv-card-webgl-active{background:transparent}

/* Project-detail fallback used only for media-heavy cases: first original gallery + one wide breakout strip. */
.mkv-project-breakout{width:100%;padding:var(--spacing-xl) 0 var(--spacing-3xl);position:relative}.mkv-project-breakout-track{display:flex;gap:var(--col-gap);padding-left:var(--spacing-xl);padding-right:var(--spacing-xl);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;cursor:grab}.mkv-project-breakout-track::-webkit-scrollbar{display:none}.mkv-project-breakout-track.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}.mkv-project-breakout-progress{margin:var(--spacing-l) var(--spacing-xl) 0;height:1px;background:transparent;position:relative;overflow:hidden}.mkv-project-breakout-progress span{position:absolute;top:0;bottom:0;left:0;width:0;background:var(--gradient)}.mkv-project-breakout-item{width:min(62vw,62rem);height:min(68vh,50rem);border-radius:var(--border-radius-box);overflow:hidden;flex:0 0 auto;margin:0;background:none;scroll-snap-align:center}.mkv-project-breakout-item:nth-child(2n){width:min(42vw,44rem)}.mkv-project-breakout-item img{display:block;width:100%;height:100%;object-fit:cover}@media(max-width:767px){.mkv-project-breakout{padding:var(--spacing-l) 0 var(--spacing-2xl)}.mkv-project-breakout-track{gap:var(--spacing-s);padding-left:var(--spacing-m);padding-right:var(--spacing-m)}.mkv-project-breakout-item,.mkv-project-breakout-item:nth-child(2n){width:82vw;height:56vh}}
/* Native form controls use the exact reference component skin, without browser button defaults. */
#mkvision-contact-form button.checkbox{font:inherit;background:transparent;color:inherit;appearance:none;-webkit-appearance:none}
#mkvision-contact-form button.btn{font:inherit;background:transparent;border:0;color:inherit;padding:0;text-align:inherit}

#mkvision-contact-form button:disabled{cursor:wait;opacity:.6}

/* Do not override GSAP's opacity. This !important rule was the reason some reveals never revealed. */

.splitting .word{display:inline-block;filter:blur(var(--blur,0));transform:translateY(var(--clip,0)) translateZ(0);backface-visibility:hidden;will-change:transform,filter,opacity}

/* Persistent Rayo shell: page content swaps inside the same app/canvas/header lifecycle. */
.mkv-next-project-clone{position:fixed!important;z-index:99990!important;object-fit:cover!important;pointer-events:none!important;margin:0!important;max-width:none!important}

/* v25 consolidated exact layer ------------------------------------------- */
@font-face{font-display:swap;font-family:Matter;font-style:normal;font-weight:400;src:url('/assets/fonts/Matter-Regular.woff2?v26') format('woff2')}
@font-face{font-display:swap;font-family:SaolDisplay;font-style:italic;font-weight:400;src:url('/assets/fonts/SaolDisplay-RegularItalic.woff2?v26') format('woff2')}

/* The reference CSS owns all normal site font sizes, spacing and CTA sizing. */

/* Native submit control lives inside the original Funkhaus BaseButton skin. */
#mkvision-contact-form .mkv-submit-wrap{display:inline-block}
#mkvision-contact-form .mkv-submit-button{appearance:none;-webkit-appearance:none;border:0;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;line-height:inherit;padding:0;margin:0;display:block;cursor:pointer;text-align:inherit}
#mkvision-contact-form .mkv-submit-button:disabled{cursor:wait;opacity:.6}
#mkvision-contact-form .mkv-submit-wrap:has(.mkv-submit-button:disabled){opacity:.65;pointer-events:none}
#mkvision-contact-form .rayo-form-status{min-height:1.4em;opacity:.65}

/* Value hero keeps Funkhaus SectionTextDark typography. */
.fh-template--value .fh-section--text-dark__wrapper .line-1 em{font-family:SaolDisplay,serif;font-style:italic;font-weight:400}

/* v27 exact Funkhaus component pass -------------------------------------- */
/* Never expose a horizontal document scrollbar. Funkhaus scrolls only in #scroller. */
html,body,.app-wrapper,main.layout-wrapper,#scroller,#scroll-content{max-width:100%;overflow-x:clip}
#scroller{overflow-y:auto}

/* BaseMenu: keep the reference 20em desktop trigger and route/breadcrumb text. */

/* Localized Value hero: exact SectionTextDark composition, fitted for longer Dutch copy. */
@media (min-width:1200px){
  .fh-template--value .fh-section--text-dark__wrapper{padding-left:var(--spacing-xl);padding-right:var(--spacing-xl)}
  .fh-template--value .fh-section--text-dark p{font-size:9em;line-height:112%;letter-spacing:1.1px}
  .fh-template--value .fh-section--text-dark__wrapper .line-1{gap:var(--spacing-m)}
  .fh-template--value .fh-section--text-dark__wrapper .line-2{padding-right:1.1em}
}

/* SectionBanners remains the original Funkhaus hover; tags travel inside the moving marquee. */
.fh-section--banners{overflow:clip}
.fh-section--banners .fh-section--banners-banner{overflow:hidden}
.mkv-service-ticker-content{display:inline-flex!important;align-items:center;gap:var(--spacing-l);white-space:nowrap}
.mkv-service-pills{display:inline-flex;align-items:center;gap:var(--spacing-xs);flex:none}
.mkv-service-pills span{display:inline-flex;align-items:center;border:1px solid currentColor;border-radius:9999px;padding:.42em .8em;font-size:var(--font--base);line-height:1;white-space:nowrap}
@media(max-width:767px){.mkv-service-ticker-content{gap:var(--spacing-m)}.mkv-service-pills span{font-size:.72em;padding:.4em .7em}}

/* Home ThreeImages project cards: DOM image is a texture source, the WebGL plane is the visible image just like Funkhaus. */
@media (min-width:768px) and (pointer:fine){
  .fh-template--home .fh-card--project img.on-canvas,.fh-template--home .fh-card--project video.on-canvas{opacity:0!important;visibility:visible!important}
}

/* Second home video: portrait/pill media exactly in the narrow capabilities column. */
.home-capabilities .fh-col-start-7.fh-col-span-5{display:flex;justify-content:center;align-items:center}
.home-capabilities .fh-col-start-7.fh-col-span-5 .fh-item--video{width:min(18em,100%);height:30em;max-height:68vh;border-radius:9999px;overflow:hidden;background:var(--black)}
.home-capabilities .fh-col-start-7.fh-col-span-5 .fh-item--video video{width:100%!important;height:100%!important;object-fit:cover!important;position:static!important;transform:none!important;border-radius:inherit}
@media(max-width:767px){.home-capabilities .fh-col-start-7.fh-col-span-5 .fh-item--video{width:min(62vw,15rem);height:min(92vw,23rem)}}

/* Funkhaus outro: explicit display scale so the CTA does not collapse through nested/split markup. */
.fh-section--contact .footer-contact-text .fh-section--contact__content h2{font-size:var(--font--xl)!important;line-height:116%!important;letter-spacing:0!important}
.fh-section--contact .footer-contact--button-wrapper .btn.btn--primary{font-size:var(--font--m)}
@media(max-width:767px){.fh-section--contact .footer-contact-text .fh-section--contact__content h2{font-size:2.55em!important}.fh-section--contact .footer-contact--button-wrapper .btn.btn--primary{font-size:1.15em}}

/* Value shader is a transparent layer; copy remains readable above it. */
.fh-section--text-dark .fh-section--text-dark__wrapper{position:relative;z-index:3}


/* Funkhaus gives each service row its own colour; the MK Vision palette maps three of the four
   tokens to the same blue, so the rows are stepped here without touching the CTA tokens. */
.fh-section--banners .fh-section--banners-banner.banner-orange::before{background-color:#7b85e4}
.fh-section--banners .fh-section--banners-banner.banner-purple::before{background-color:#5362d5}
.fh-section--banners .fh-section--banners-banner.banner-red::before{background-color:#3d49b8}
.fh-section--banners .fh-section--banners-banner.banner-green::before{background-color:#96ffd9}

/* Funkhaus' studio hero images are all portrait; ours are mixed source ratios, so the item
   carries the proportion and the image covers it (ref measured 0.69 / 0.82 / 0.71). */
.hero-images-mask-image-item{aspect-ratio:.71}
.hero-images-mask-image:nth-child(1) .hero-images-mask-image-item{aspect-ratio:.69}
.hero-images-mask-image:nth-child(2) .hero-images-mask-image-item{aspect-ratio:.82}
.hero-images-mask-image:nth-child(3) .hero-images-mask-image-item{aspect-ratio:.71}
.hero-images-mask-image-item>img,.hero-images-mask-image-item>video,.hero-images-mask-image-item picture img{width:100%;height:100%;object-fit:cover;display:block}



/* v28 — NC content mapped to native Funkhaus component patterns -------- */
.fh-template--process,.fh-template--waarom{padding-top:0}
.mkv-page-hero{min-height:92vh;display:flex;align-items:flex-end;padding-top:var(--spacing-5xl);padding-bottom:var(--spacing-3xl)}
.mkv-page-hero h1{font-size:clamp(3.7rem,8.3vw,10.2rem);line-height:.91;letter-spacing:-.035em;max-width:10ch}
.mkv-page-hero h1 em{font-family:SaolDisplay,serif;font-style:italic;font-weight:400}
.mkv-page-kicker{margin-bottom:var(--spacing-l)}
.mkv-page-lead{max-width:38ch;margin-top:var(--spacing-xl);margin-bottom:var(--spacing-l)}
.mkv-section-intro{padding-top:var(--spacing-xl);padding-bottom:var(--spacing-3xl)}
.mkv-section-intro p{max-width:34ch}

/* Werkwijze process: compact Funkhaus stacking cards, using the literal NC step order. */
.mkv-journey-fh{position:relative;padding:0 var(--spacing-m);margin:var(--spacing-2xl) 0 var(--spacing-4xl)}
.mkv-journey-fh__stage{position:relative;max-width:1500px;margin:0 auto;overflow:visible;background:transparent;border:0;isolation:isolate}
.mkv-journey-fh__stage:before{display:none}
.mkv-journey-fh__meta{position:relative;z-index:8;display:flex;align-items:center;justify-content:space-between;padding:0 0 var(--spacing-m);margin-bottom:var(--spacing-l);border-bottom:1px solid hsla(0,0%,100%,.14)}
.mkv-journey-fh__meta strong{font-size:var(--font--base);font-weight:400}
.mkv-journey-fh__steps{position:relative;padding-bottom:10vh}
.mkv-journey-fh__step{position:sticky;top:clamp(6.5rem,12vh,9rem);display:grid;grid-template-columns:minmax(3.5rem,.7fr) minmax(0,6.8fr) minmax(16rem,3fr);gap:var(--spacing-l);align-items:center;min-height:clamp(22rem,44vh,27rem);padding:clamp(2rem,4vw,4rem);margin-bottom:clamp(5rem,13vh,8rem);border-radius:var(--border-radius-box);border:1px solid hsla(0,0%,100%,.12);overflow:hidden;opacity:1;visibility:visible;transform:none;transform-origin:center top;will-change:transform,opacity;transition:border-color .4s ease;background:#10111a}
.mkv-journey-fh__step:nth-child(1){z-index:1;background:#10111a}.mkv-journey-fh__step:nth-child(2){z-index:2;background:#121421}.mkv-journey-fh__step:nth-child(3){z-index:3;background:#141626}.mkv-journey-fh__step:nth-child(4){z-index:4;background:#111620}.mkv-journey-fh__step:nth-child(5){z-index:5;background:#14151d}.mkv-journey-fh__step:nth-child(6){z-index:6;background:#10131d;margin-bottom:0}
.mkv-journey-fh__step:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,hsla(235,58%,58%,.1),transparent 38% 70%,hsla(0,0%,100%,.025));pointer-events:none}
.mkv-journey-fh__step.is-active{border-color:hsla(235,65%,68%,.42)}
.mkv-journey-fh__num{position:relative;z-index:1;align-self:center;font-family:SaolDisplay,serif;font-style:italic;font-size:clamp(2rem,3.1vw,3.7rem);line-height:1;color:var(--violett)}
.mkv-journey-fh__step h3{position:relative;z-index:1;align-self:center;font-size:clamp(3.8rem,6.3vw,7.2rem);line-height:.84;letter-spacing:-.055em;font-weight:400;max-width:9ch;transform-origin:left center}
.mkv-journey-fh__step:nth-child(even) h3{font-family:SaolDisplay,serif;font-style:italic}
.mkv-journey-fh__step p{position:relative;z-index:1;align-self:end;max-width:31ch;font-size:clamp(.98rem,1.15vw,1.25rem);line-height:1.38;opacity:.66;margin-bottom:.15em}

/* NC workflow mechanics, made smaller, darker and vertically centred while pinned. */
.mkv-flow{position:relative;padding:var(--spacing-2xl) var(--spacing-m) var(--spacing-4xl);--flow-bar-h:2.45rem;--flow-lane-step:2.8rem;--flow-phase-col:clamp(150px,13vw,190px)}
.mkv-flow__pin{position:relative;max-width:1540px;margin:auto;padding:1.25rem 1.75rem;border-radius:var(--border-radius-box);overflow:hidden;background:#090a12;color:var(--white);border:1px solid hsla(0,0%,100%,.11)}
.mkv-flow__head{display:none;color:var(--white);opacity:.42;font-size:.9rem;line-height:1}
.mkv-flow__body{position:relative}
.mkv-flow__playhead{display:none;position:absolute;z-index:5;top:0;bottom:0;width:1px;background:var(--white);pointer-events:none;will-change:transform}
.mkv-flow__playhead i{position:absolute;top:-.22rem;left:50%;width:.56rem;height:.56rem;border-radius:50%;background:var(--white);transform:translateX(-50%)}
.mkv-flow__playhead span{position:absolute;top:.62rem;left:.58rem;font-family:SaolDisplay,serif;font-style:italic;font-size:.92rem;color:var(--white)}
.mkv-flow__row{position:relative;padding:.75rem 0;border-top:1px solid hsla(0,0%,100%,.13)}
.mkv-flow__row[data-flow-row="0"]{--flow-solid:#46529a;--flow-fill:linear-gradient(90deg,#2d3468,#46529a)}
.mkv-flow__row[data-flow-row="1"]{--flow-solid:#684e86;--flow-fill:linear-gradient(90deg,#44345f,#684e86)}
.mkv-flow__row[data-flow-row="2"]{--flow-solid:#386a65;--flow-fill:linear-gradient(90deg,#284b4d,#386a65)}
.mkv-flow__row[data-flow-row="3"]{--flow-solid:#7a465e;--flow-fill:linear-gradient(90deg,#533445,#7a465e)}
.mkv-flow__phase>span:first-child{font-size:var(--font--base);opacity:.42}
.mkv-flow__phase h3{margin-top:.45rem;font-size:1.42rem;line-height:1;letter-spacing:-.035em;opacity:.48;transition:opacity .35s var(--bezier-smooth),transform .45s var(--bezier-smooth)}
.mkv-flow__row.is-active .mkv-flow__phase h3{opacity:1;transform:translateX(.12em)}
.mkv-flow__phase-icon{display:grid;place-items:center;width:3rem;height:3rem;border-radius:9999px;background:hsla(0,0%,100%,.08);color:var(--white);transition:background-color .35s var(--bezier-smooth),transform .45s var(--bezier-smooth)}
.mkv-flow__row.is-active .mkv-flow__phase-icon{background:var(--flow-solid);transform:scale(1.035)}
.mkv-flow__phase-icon svg{width:1.35rem;height:1.35rem;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.mkv-flow__track{position:relative;height:calc(var(--flow-bar-h) + var(--flow-lane-step) + .8rem);margin-top:.65rem;border-radius:var(--border-radius-box)}
.mkv-flow__bar{position:absolute;left:var(--flow-start);right:calc(100% - var(--flow-end));top:calc(.35rem + var(--flow-lane,0) * var(--flow-lane-step));min-width:7.5rem;height:var(--flow-bar-h);border-radius:9999px;background:#171823;overflow:hidden;transform-origin:left center;will-change:transform,opacity;transition:box-shadow .3s var(--bezier-smooth)}
.mkv-flow__bar:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.28;background:linear-gradient(105deg,hsla(0,0%,100%,.08),transparent 42%)}
.mkv-flow__bar.is-current{box-shadow:0 0 0 1px hsla(0,0%,100%,.2)}
.mkv-flow__bar i{position:absolute;inset:-1px;display:block;border-radius:inherit;background:var(--flow-fill);transform:scaleX(0);transform-origin:left center;will-change:transform}
.mkv-flow__bar-label{position:relative;z-index:3;min-height:100%;padding:0 .9rem;display:flex;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#fff;font-size:.78rem;line-height:1.1;opacity:.94;pointer-events:none;text-shadow:0 1px 1px rgba(0,0,0,.25)}
.mkv-flow__footer{padding-top:.85rem;border-top:1px solid hsla(0,0%,100%,.13);display:flex;flex-direction:column;gap:.75rem}
.mkv-flow__footer strong{font-size:.92rem;font-weight:400}
.mkv-flow__footer>span{height:2px;background:hsla(0,0%,100%,.12);border-radius:9999px;overflow:hidden}
.mkv-flow__footer>span i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#46529a,#684e86,#386a65,#7a465e);transform:scaleX(0);transform-origin:left}

/* Samenwerken uses the native Funkhaus services/banner language instead of a custom row system. */
.mkv-collaboration{padding-top:var(--spacing-3xl);padding-bottom:var(--spacing-4xl)}
.mkv-collaboration__banners{margin-top:0}
.mkv-collaboration__copy{padding-top:var(--spacing-2xl);padding-bottom:0}
.mkv-collaboration__copy h2{max-width:18ch}.mkv-collaboration__copy p{max-width:50ch;margin-top:var(--spacing-m);opacity:.68}

/* Focus cards on Waarom wij still use the native Funkhaus card component. */
.mkv-info-card{height:100%;min-height:25rem;padding:var(--spacing-l)}
.mkv-info-card h3{font-size:var(--font--m);line-height:1.05;margin:.35em 0 .65em}
.mkv-card-meta{margin-bottom:var(--spacing-m)}
.mkv-card-list{display:grid;gap:.55em;border-top:1px solid hsla(0,0%,100%,.12);padding-top:var(--spacing-m);margin-top:var(--spacing-l)}
.mkv-card-list li{position:relative;padding-left:1.15em;font-size:var(--font--base);line-height:1.35}
.mkv-card-list li:before{content:"";position:absolute;left:0;top:.52em;width:.38em;height:.38em;border-radius:50%;background:var(--primary)}
.mkv-directives{padding-top:var(--spacing-4xl);padding-bottom:var(--spacing-4xl)}
.mkv-directives .fh-card--basic{min-height:18rem}

@media(min-width:1024px){
 .mkv-flow{padding-left:var(--spacing-l);padding-right:var(--spacing-l);margin-bottom:5rem}
 .mkv-flow__pin{height:min(36rem,calc(100vh - 11.25rem));min-height:31rem;display:flex;flex-direction:column;justify-content:center}
 .mkv-flow__head{display:grid;grid-template-columns:var(--flow-phase-col) repeat(4,1fr);padding-bottom:.7rem}
 .mkv-flow__playhead{display:block;left:var(--flow-phase-col)}
 .mkv-flow__row{display:grid;grid-template-columns:var(--flow-phase-col) minmax(0,1fr);min-height:calc(var(--flow-bar-h) + var(--flow-lane-step) + 1rem);align-items:center}
 .mkv-flow__phase{padding-right:1rem;display:grid;grid-template-columns:2.5rem minmax(0,1fr);align-items:center;gap:.7rem}
 .mkv-flow__phase>span:first-child{display:none}.mkv-flow__phase h3{margin-top:0;font-size:clamp(1.08rem,1.25vw,1.42rem)}
 .mkv-flow__phase-icon{width:2.5rem;height:2.5rem}.mkv-flow__phase-icon svg{width:1.15rem;height:1.15rem}
 .mkv-flow__track{height:calc(var(--flow-bar-h) + var(--flow-lane-step) + .55rem);margin-top:0}
 .mkv-flow__bar{top:calc(.25rem + var(--flow-lane,0) * var(--flow-lane-step));height:var(--flow-bar-h)}
 .mkv-flow__bar-label{padding:0 .85rem;font-size:clamp(.7rem,.76vw,.82rem)}
 .mkv-flow__footer{padding-top:.7rem;flex-direction:row;align-items:center;justify-content:space-between}.mkv-flow__footer>span{width:42%}
}
@media(max-width:1023px){
 .mkv-flow{padding-left:var(--spacing-m);padding-right:var(--spacing-m)}.mkv-flow__pin{padding:var(--spacing-m)}
 .mkv-flow__body{position:relative;padding-left:1.8rem}.mkv-flow__body:before{content:"";position:absolute;left:.35rem;top:1.75rem;bottom:1.75rem;width:1px;background:hsla(0,0%,100%,.18)}
 .mkv-flow__row{padding:1.05rem 0}.mkv-flow__row:before{content:"";position:absolute;left:-1.72rem;top:1.95rem;width:.72rem;height:.72rem;border:2px solid var(--black);border-radius:50%;background:hsla(0,0%,100%,.32);transition:background-color .3s ease,transform .3s ease}.mkv-flow__row.is-active:before{background:var(--flow-solid);transform:scale(1.15)}
 .mkv-flow__phase{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;column-gap:.65rem}.mkv-flow__phase>span:first-child{display:block;grid-column:1;grid-row:1}.mkv-flow__phase-icon{display:none}.mkv-flow__phase h3{grid-column:2;grid-row:1;margin-top:0;font-size:1.18rem}
 .mkv-flow__track{height:auto;margin-top:.65rem;display:grid;gap:.5rem;background:transparent;border-radius:0}.mkv-flow__bar{position:relative;left:auto;right:auto;top:auto;width:100%;min-width:0;min-height:3.15rem;height:auto}.mkv-flow__bar-label{min-height:3.15rem;padding:.75rem .95rem;font-size:.83rem;line-height:1.2;white-space:normal}
}
@media(max-width:767px){
 .mkv-journey-fh{padding:0 var(--spacing-m);margin-bottom:var(--spacing-3xl)}.mkv-journey-fh__meta{margin-bottom:var(--spacing-m)}.mkv-journey-fh__steps{padding-bottom:3rem}.mkv-journey-fh__step{top:5.6rem;grid-template-columns:2.2rem 1fr;gap:var(--spacing-s);min-height:24rem;padding:var(--spacing-l);margin-bottom:4.5rem;border-radius:1.5rem}.mkv-journey-fh__step h3{grid-column:2;font-size:clamp(3rem,13vw,5rem);line-height:.88}.mkv-journey-fh__step p{grid-column:2;font-size:.98rem;margin-top:var(--spacing-s)}.mkv-journey-fh__num{grid-column:1;grid-row:1;align-self:start;font-size:1.4rem}
 .mkv-info-card{min-height:0;padding:var(--spacing-m)}
 .mkv-directives{padding-top:var(--spacing-3xl);padding-bottom:var(--spacing-3xl)}
 .mkv-collaboration{padding-top:var(--spacing-2xl);padding-bottom:var(--spacing-3xl)}
}

/* SectionColumns is the Funkhaus media grid; only source ratios are normalized. */
.mkv-process-gallery{padding-top:var(--spacing-2xl);padding-bottom:var(--spacing-4xl)}
.mkv-process-gallery .fh-column--image-media{aspect-ratio:4/5;overflow:hidden;border-radius:var(--border-radius-box)}
.mkv-process-gallery img{width:100%;height:100%;object-fit:cover}

/* Why-us features reuse the exact SectionServiceVideo motion, with page-specific readable title sizing. */
.mkv-feature-copy{padding-top:var(--spacing-xl);padding-bottom:var(--spacing-4xl)}
.mkv-feature-copy h3{font-size:var(--font--l);line-height:1.02;max-width:17ch;margin-bottom:var(--spacing-m)}
.mkv-feature-copy p{max-width:48ch;margin-bottom:var(--spacing-m);opacity:.72}
.fh-template--waarom .mkv-why-feature .fh-section--service-video__title{font-size:clamp(4.8rem,7.4vw,8.8rem);line-height:.92;margin-top:-4%;max-width:90vw;text-align:center;white-space:nowrap}
.fh-template--waarom .fh-section--service-intro{margin-top:var(--spacing-3xl)}
.fh-template--waarom .mkv-audience-methods{padding-top:var(--spacing-3xl)}
.fh-template--waarom .mkv-service-ticker-content>p{font-size:inherit}
.fh-template--waarom .mkv-service-ticker-content>.p-small{font-size:var(--font--base);opacity:.7;max-width:34em;overflow:hidden;text-overflow:ellipsis}

/* FAQ is a single full-width vertical sequence with native Funkhaus line rhythm. */
.mkv-faq{padding-top:var(--spacing-5xl);padding-bottom:var(--spacing-5xl)}
.mkv-faq .fh-layout{row-gap:var(--spacing-xl)}
.mkv-faq__intro h2{font-size:var(--font--xl);line-height:1.02;max-width:13ch}
.mkv-faq__intro h2 em{font-family:SaolDisplay,serif;font-style:italic;font-weight:400}
.mkv-faq-list{width:100%;margin-top:var(--spacing-m)}
.mkv-faq-item{border-top:1px solid hsla(0,0%,100%,.18);will-change:transform,opacity}
.mkv-faq-item:last-child{border-bottom:1px solid hsla(0,0%,100%,.18)}
.mkv-faq-item summary{list-style:none;display:grid;grid-template-columns:3.25rem minmax(0,1fr) 2rem;gap:var(--spacing-m);align-items:center;padding:1.5rem 0;cursor:pointer;font-size:clamp(1.5rem,2vw,2.2rem);line-height:1.08;letter-spacing:-.025em;transition:opacity .3s var(--bezier-smooth)}
.mkv-faq-item summary::-webkit-details-marker{display:none}.mkv-faq-item summary:hover{opacity:.62}
.mkv-faq-plus{width:1.1em;height:1.1em;position:relative;justify-self:end;transition:transform .45s cubic-bezier(.1,0,.2,1)}
.mkv-faq-plus:before,.mkv-faq-plus:after{content:"";position:absolute;left:50%;top:50%;width:100%;height:1px;background:currentColor;transform:translate(-50%,-50%)}
.mkv-faq-plus:after{transform:translate(-50%,-50%) rotate(90deg)}.mkv-faq-item[open] .mkv-faq-plus{transform:rotate(135deg)}
.mkv-faq-answer{padding:0 0 var(--spacing-l) calc(3.25rem + var(--spacing-m));overflow:hidden;will-change:height,opacity}.mkv-faq-answer p{max-width:56ch;font-size:var(--font--base);line-height:1.45;opacity:.66}

@media(max-width:767px){
 .mkv-page-hero{min-height:84vh;padding-top:var(--spacing-4xl);padding-bottom:var(--spacing-2xl)}
 .mkv-page-hero h1{font-size:clamp(3.2rem,15vw,5.6rem)}.mkv-page-lead{margin-top:var(--spacing-l)}
 .mkv-feature-copy{padding-top:var(--spacing-l);padding-bottom:var(--spacing-3xl)}
 .fh-template--waarom .mkv-why-feature .fh-section--service-video__title{font-size:clamp(2.9rem,9.5vw,4.8rem);margin-top:-2%;max-width:94vw}
 .mkv-faq{padding-top:var(--spacing-4xl);padding-bottom:var(--spacing-4xl)}.mkv-faq__intro h2{margin-bottom:0;font-size:clamp(2.9rem,12vw,4.8rem)}
 .mkv-faq-item summary{font-size:1.15rem;grid-template-columns:2rem minmax(0,1fr) 1.25rem;gap:.65rem;padding:var(--spacing-m) 0}.mkv-faq-answer{padding-left:calc(2rem + .65rem)}
 .mkv-process-gallery .fh-column__wrapper{margin-bottom:var(--spacing-m)}
}



/* v31 — requested mobile motion + strict one-column FAQ + continuous route layers */
.mkv-faq-list{display:flex!important;flex-direction:column!important;align-items:stretch!important;grid-template-columns:none!important;gap:0!important}
.mkv-faq-item{display:block!important;width:100%!important;max-width:none!important;flex:0 0 auto!important;grid-column:1/-1!important}
.fh-template--process .mkv-process-home-hero,.fh-template--waarom .mkv-why-home-hero{position:relative;margin-bottom:var(--spacing-2xl);overflow:hidden}
.fh-template--process .mkv-process-home-hero h1,.fh-template--waarom .mkv-why-home-hero h1{font-size:2em;line-height:100%;max-width:18ch}
.fh-template--process .mkv-process-home-hero .fh-home--hero-subtext p,.fh-template--waarom .mkv-why-home-hero .fh-home--hero-subtext p{max-width:36ch}
.mkv-journey-fh__step:nth-child(1){background:#282d5b}.mkv-journey-fh__step:nth-child(2){background:#3a2e57}.mkv-journey-fh__step:nth-child(3){background:#24514d}.mkv-journey-fh__step:nth-child(4){background:#563143}.mkv-journey-fh__step:nth-child(5){background:#5c3a2f}.mkv-journey-fh__step:nth-child(6){background:#263d35}
.mkv-journey-fh__step .mkv-journey-fh__num{color:#fff}.mkv-journey-fh__step:before{background:linear-gradient(120deg,hsla(0,0%,100%,.075),transparent 42% 72%,hsla(0,0%,100%,.025))}
@media(min-width:1200px){.fh-template--process .mkv-process-home-hero h1,.fh-template--waarom .mkv-why-home-hero h1{font-size:var(--font--2xl)}}
@media(max-width:1199px){
 .fh-template--home .fh-section--hero-video .fh-home--video{padding-left:var(--spacing-m);padding-right:var(--spacing-m)}
 .fh-template--home .fh-section--hero-video .fh-home--video__wrapper{width:72vw;max-width:72vw;aspect-ratio:16/9;border-radius:9999px;margin-top:var(--spacing-2xl);margin-bottom:var(--spacing-2xl);will-change:max-width,width,border-radius,transform}
 .fh-template--home .fh-section--hero-video .fh-home--video__wrapper .fh-item--media,.fh-template--home .fh-section--hero-video .fh-home--video__wrapper video{width:100%;height:100%;object-fit:cover}
 #scroller:has(.work-overview-page){height:100dvh!important;overflow-y:auto!important;touch-action:pan-y!important;-webkit-overflow-scrolling:touch;overscroll-behavior-y:none}
 #scroller:has(.work-overview-page) #scroll-content{min-height:100%;touch-action:pan-y!important}
 #work-wrapper.work-overview-page{height:2210svh!important;touch-action:pan-y!important}
 .work-canvas-wrapper,.work-canvas-wrapper canvas{pointer-events:none!important;touch-action:none!important}
 .work-overview-page .project{height:100dvh;pointer-events:none}.work-overview-page .project .project-button{pointer-events:auto}
}


/* v32 — Funkhaus contact branching / conditional project intake */
.mkv-branch-form{position:relative;width:100%;max-width:74rem;margin-left:auto;margin-right:auto}
.mkv-branch-shell{position:relative;min-height:34rem;padding:clamp(1.25rem,2.4vw,2.25rem);border-radius:var(--border-radius-box,2rem);background:#0a0a12;color:#f6f5ef;overflow:hidden;border:1px solid rgba(255,255,255,.12)}
.mkv-branch-shell:before{content:"";position:absolute;inset:auto -12% -35% 35%;height:58%;background:radial-gradient(circle at 50% 50%,rgba(83,98,213,.3),rgba(83,98,213,0) 68%);pointer-events:none}
.mkv-branch-top{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-bottom:.8rem;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid rgba(255,255,255,.16)}
.mkv-branch-kicker{opacity:.68}.mkv-branch-count{font-family:SaolDisplay,serif;font-style:italic;font-size:1.15rem;letter-spacing:0;text-transform:none}
.mkv-branch-track{position:relative;height:2px;margin-top:-1px;background:rgba(255,255,255,.08);overflow:hidden}.mkv-branch-track i{display:block;height:100%;width:8%;background:#5362d5;transition:width .7s cubic-bezier(.77,0,.18,1)}
.mkv-branch-stage{position:relative;z-index:2;display:flex;min-height:29rem;flex-direction:column;justify-content:center;padding:clamp(2.2rem,5vw,5rem) 0 1rem}
.mkv-branch-copy{max-width:62rem}.mkv-branch-copy>p{margin:0 0 .75rem;font-size:.78rem;line-height:1;text-transform:uppercase;letter-spacing:.08em;opacity:.48}.mkv-branch-copy h3{max-width:15ch;margin:0;font-family:Matter,Arial,sans-serif;font-size:clamp(2.7rem,6.4vw,6.8rem);font-weight:400;line-height:.88;letter-spacing:-.065em;text-wrap:balance}.mkv-branch-intro{max-width:46rem;margin-top:1.4rem;font-size:clamp(.95rem,1.35vw,1.3rem);line-height:1.5;opacity:.58}
.mkv-branch-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:clamp(2.4rem,5vw,5rem);border-top:1px solid rgba(255,255,255,.18)}
.mkv-branch-option{display:flex;align-items:center;justify-content:space-between;min-height:5.2rem;padding:1rem .25rem 1rem 0;color:inherit;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.18);font:inherit;text-align:left;transition:padding .4s cubic-bezier(.77,0,.18,1),background-color .35s,color .35s}.mkv-branch-option:nth-child(odd){padding-right:1.4rem;border-right:1px solid rgba(255,255,255,.18)}.mkv-branch-option:nth-child(even){padding-left:1.4rem}.mkv-branch-option span{font-size:clamp(1.2rem,2.2vw,2rem);letter-spacing:-.035em}.mkv-branch-option i{display:grid;place-items:center;width:2.7rem;height:2.7rem;border-radius:999px;background:rgba(255,255,255,.08);font-style:normal;transition:transform .45s cubic-bezier(.77,0,.18,1),background .3s}.mkv-branch-option:hover,.mkv-branch-option.is-picked{padding-left:1rem;background:#5362d5}.mkv-branch-option:hover i,.mkv-branch-option.is-picked i{transform:rotate(45deg);background:#f6f5ef;color:#0a0a12}
.mkv-branch-actions{display:flex;align-items:center;gap:.65rem;margin-top:1.6rem}.mkv-branch-action,.mkv-branch-submit{display:inline-flex;align-items:center;justify-content:space-between;gap:1.4rem;min-height:3.35rem;padding:.8rem 1rem .8rem 1.2rem;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:transparent;color:inherit;font:inherit;transition:background .3s,color .3s,border-color .3s,transform .3s}.mkv-branch-action i,.mkv-branch-submit i{font-style:normal}.mkv-branch-action:hover,.mkv-branch-action.is-primary,.mkv-branch-submit:hover{background:#f6f5ef;color:#0a0a12;border-color:#f6f5ef}.mkv-branch-action:hover{transform:translateY(-2px)}.mkv-branch-action.is-back{opacity:.62}
.mkv-branch-range{margin-top:clamp(2.5rem,5vw,5rem);padding:clamp(1.4rem,3vw,2.4rem);border-radius:1.5rem;background:#151827}.mkv-branch-range output{display:block;margin-bottom:1.4rem;font-family:SaolDisplay,serif;font-style:italic;font-size:clamp(3.2rem,7vw,6.4rem);line-height:.9}.mkv-branch-range input[type=range]{--range-progress:16%;appearance:none;width:100%;height:2px;background:linear-gradient(90deg,#5362d5 0 var(--range-progress),rgba(255,255,255,.18) var(--range-progress) 100%);border:0;outline:0}.mkv-branch-range input[type=range]::-webkit-slider-thumb{appearance:none;width:1.7rem;height:1.7rem;border-radius:50%;background:#f6f5ef;border:5px solid #5362d5;cursor:grab}.mkv-branch-range input[type=range]::-moz-range-thumb{width:1.1rem;height:1.1rem;border-radius:50%;background:#f6f5ef;border:5px solid #5362d5;cursor:grab}.mkv-branch-range-meta{display:flex;justify-content:space-between;margin-top:.9rem;font-size:.75rem;opacity:.5}
.mkv-branch-fields{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:clamp(2.5rem,5vw,4.5rem);border-top:1px solid rgba(255,255,255,.18)}.mkv-branch-fields label{display:flex;flex-direction:column;gap:.45rem;padding:1.2rem 1.2rem 1.2rem 0;border-bottom:1px solid rgba(255,255,255,.18)}.mkv-branch-fields label:nth-of-type(even){padding-left:1.2rem;border-left:1px solid rgba(255,255,255,.18)}.mkv-branch-fields label.is-wide{grid-column:1/-1;padding-left:0!important;border-left:0!important}.mkv-branch-fields label>span{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;opacity:.42}.mkv-branch-fields input,.mkv-branch-fields textarea{width:100%;min-height:2.5rem;border:0!important;border-radius:0!important;background:transparent!important;color:#f6f5ef!important;font-family:Matter,Arial,sans-serif;font-size:clamp(1.2rem,2vw,1.75rem)!important;line-height:1.2!important;box-shadow:none!important;outline:0!important}.mkv-branch-fields textarea{min-height:7rem;resize:vertical}.mkv-branch-fields input::placeholder,.mkv-branch-fields textarea::placeholder{color:rgba(246,245,239,.28)!important}.mkv-branch-submit{grid-column:1/-1;width:100%;margin-top:1.4rem;padding:1rem 1.3rem;background:#5362d5;border-color:#5362d5;color:#fff;font-size:1.2rem}.mkv-branch-submit:disabled{opacity:.5;cursor:wait}.mkv-branch-submit.is-loading span:after{content:"…"}
.mkv-branch-status{position:relative;z-index:3;min-height:1.5em;margin-top:.9rem;color:rgba(246,245,239,.64);font-size:.85rem}.mkv-branch-status.is-error{color:#ff8f91}.mkv-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
@media(max-width:767px){.mkv-branch-shell{min-height:38rem;padding:1rem;border-radius:1.35rem}.mkv-branch-stage{min-height:33rem;padding:2.6rem 0 .6rem;justify-content:flex-start}.mkv-branch-copy h3{font-size:clamp(2.65rem,13vw,4.8rem);line-height:.9}.mkv-branch-options{grid-template-columns:1fr;margin-top:2.2rem}.mkv-branch-option:nth-child(n){padding:.95rem 0;border-right:0}.mkv-branch-option:hover,.mkv-branch-option.is-picked{padding-left:.75rem}.mkv-branch-option span{font-size:1.3rem}.mkv-branch-fields{grid-template-columns:1fr}.mkv-branch-fields label:nth-of-type(n){padding:1rem 0;border-left:0}.mkv-branch-fields label.is-wide{grid-column:1}.mkv-branch-range{padding:1.1rem;margin-top:2rem}.mkv-branch-range output{font-size:3.5rem}.mkv-branch-actions{flex-wrap:wrap}.mkv-branch-action{min-height:3rem}}



/* v33 — Contact stays on the original light Funkhaus form skin; only conditional logic is new. */
.fh-template--contact .mkv-conditional-form{width:100%;max-width:none;color:inherit}
.fh-template--contact .mkv-condition[hidden]{display:none!important}
.fh-template--contact .mkv-condition{width:100%}
.fh-template--contact .mkv-inline-range{margin-top:.35rem;padding:.15rem 0 .2rem;background:transparent;color:inherit}
.fh-template--contact .mkv-inline-range__value{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:.9rem}
.fh-template--contact .mkv-inline-range output{font:inherit;font-size:clamp(1.55rem,2.8vw,2.4rem);line-height:1;letter-spacing:-.045em;color:currentColor}
.fh-template--contact .mkv-inline-range input[type=range]{--range-progress:16%;appearance:none;-webkit-appearance:none;width:100%;height:2px;border:0;outline:0;background:linear-gradient(90deg,currentColor 0 var(--range-progress),rgba(10,10,18,.18) var(--range-progress) 100%)}
.fh-template--contact .mkv-inline-range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:1.15rem;height:1.15rem;border-radius:50%;background:#5362D5;border:3px solid #f4f2ea;box-shadow:0 0 0 1px rgba(10,10,18,.2);cursor:grab}
.fh-template--contact .mkv-inline-range input[type=range]::-moz-range-thumb{width:.8rem;height:.8rem;border-radius:50%;background:#5362D5;border:3px solid #f4f2ea;box-shadow:0 0 0 1px rgba(10,10,18,.2);cursor:grab}
.fh-template--contact .mkv-inline-range__meta{display:flex;justify-content:space-between;margin-top:.65rem;font-size:.72rem;opacity:.45}
.fh-template--contact .mkv-photo-route{padding:1.35rem 0;border-top:1px solid rgba(10,10,18,.15);border-bottom:1px solid rgba(10,10,18,.15)}
.fh-template--contact .mkv-photo-route__copy{max-width:44rem;margin-top:.6rem;line-height:1.5;opacity:.65}
.fh-template--contact .mkv-submit-button:disabled{opacity:.5;cursor:wait}
@media(max-width:767px){.fh-template--contact .mkv-inline-range output{font-size:1.8rem}.fh-template--contact .mkv-photo-route{padding:1rem 0}}

/* v34 — single-source Funkhaus transition cleanup + Studio 3D hero media */
.fh-template--studio .mkv-studio-3d-media,.fh-template--studio .mkv-studio-3d-media video{width:100%;height:100%}
.fh-template--studio .mkv-studio-3d-media video{display:block;object-fit:cover}

/* carousel: block native image dragging (it swallowed pointerdown on desktop) and keep vertical
   page scrolling available on touch; cards sit lower so they clear the fixed header */
.mkv-project-breakout-track{touch-action:pan-y;user-select:none;-webkit-user-select:none}
.mkv-project-breakout-item img{-webkit-user-drag:none;user-drag:none;pointer-events:none}
.mkv-stack__item{top:clamp(7rem,20vh,14rem)}

/* --- MK Vision pass: eigen radius-signatuur + werkwijze afstelling --- */
/* tighter radius than funkhaus' .96em, as our own signature */
:root{--border-radius-box:.42em}
.fh-home--video__wrapper,.hero-images-mask-image-item{border-radius:2.2em}
.mkv-project-breakout-item{border-radius:.42em}

/* stacked steps sat at 6.5rem, right under the 98px header; drop them toward mid-screen */
.mkv-journey-fh__step{top:clamp(9rem,24vh,16rem)}

/* timeline reads bigger */
.mkv-flow{--flow-bar-h:3.35rem;--flow-lane-step:3.8rem;--flow-phase-col:clamp(190px,16vw,250px)}
.mkv-flow__pin{padding:2rem 2.25rem}
.mkv-flow__row{padding:1.15rem 0}
.mkv-flow__phase-icon{width:3.6rem;height:3.6rem}
/* FAQ: more air between the questions */
.mkv-faq-item>summary{padding-top:var(--spacing-l);padding-bottom:var(--spacing-l)}
.mkv-faq-item+.mkv-faq-item{margin-top:var(--spacing-s)}

/* touch: the overlay link fired on first tap so the hover reveal was never seen.
   .is-tapped mirrors :hover so one tap shows the ticker and the next follows the link. */
.fh-section--banners .fh-section--banners-banner.is-tapped .fh-item--banner,.fh-section--banners .fh-section--banners-banner.is-scroll-active .fh-item--banner{transform:translateY(-50%) translateY(0)}
.fh-section--banners .fh-section--banners-banner.is-tapped .service-banner-text,.fh-section--banners .fh-section--banners-banner.is-scroll-active .service-banner-text{transform:translateY(-160%)}
.fh-section--banners .fh-section--banners-banner.is-tapped:before,.fh-section--banners .fh-section--banners-banner.is-scroll-active:before{border-radius:0;transform:translateY(0)}
/* the bigger lanes need a taller pin than the original 36rem cap, which was clipping the last row */
.mkv-flow__pin{height:min(44rem,calc(100vh - 7rem));min-height:34rem}
.mkv-flow__row{padding:.95rem 0}
/* scale the lanes with viewport height so the timeline stays big on tall screens
   and still fits inside the pinned container on short laptops */
.mkv-flow{--flow-bar-h:clamp(2.4rem,6vh,3.35rem);--flow-lane-step:clamp(2.6rem,6.8vh,3.8rem)}
.mkv-flow__row{padding:clamp(.5rem,1.7vh,.95rem) 0}
.mkv-flow__pin{height:min(48rem,calc(100vh - 6rem));min-height:32rem}
/* proximity snap lets the glide settle naturally instead of yanking to the nearest item */
.mkv-project-breakout-track{scroll-snap-type:x proximity}
/* the enlarged icon (3.6rem) was overflowing its 2.5rem grid column and running under the label */
.mkv-flow__phase{grid-template-columns:3.6rem minmax(0,1fr);column-gap:1rem;padding-right:1.25rem}
.mkv-flow__phase-label,.mkv-flow__phase>*:last-child{font-size:.95rem;line-height:1.2}
.mkv-flow{padding-left:var(--spacing-l);padding-right:var(--spacing-l)}
.mkv-flow__pin{margin-left:auto;margin-right:auto}
/* funkhaus masks these into circles (140px); ours stay rectangular with a soft corner */
.fh-section--hero-images .hero-images-mask .hero-images-mask-image-wrapper .hero-images-mask-image .hero-images-mask-image-item{border-radius:1.6rem}
/* the img sits inside .fh-item--image, so it has to be told to fill the ratio-locked item */
.hero-images-mask-image-item>.fh-item{position:absolute;inset:0}
.hero-images-mask-image-item img,.hero-images-mask-image-item video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* explicit carousel controls, so the strip is usable with any input device */
.mkv-project-breakout-progress{display:flex;align-items:center;gap:var(--spacing-m)}
.mkv-project-breakout-progress span{position:relative;flex:1 1 auto;height:1px;background:var(--gradient);width:0}
/* compact strip for content pages; the project-page strip keeps its full size */
.mkv-project-breakout.is-compact{padding:var(--spacing-l) 0 var(--spacing-2xl)}
.mkv-project-breakout.is-compact .mkv-project-breakout-item{width:min(34vw,30rem);height:min(38vh,24rem)}
.mkv-project-breakout.is-compact .mkv-project-breakout-item:nth-child(2n){width:min(24vw,22rem)}
/* gallery images sat too tall for a supporting section; bring them down a notch */
.mkv-process-gallery .fh-column--image-media{aspect-ratio:4/3}
.mkv-process-gallery .fh-column--image-media img{width:100%;height:100%;object-fit:cover}
@media (min-width:1200px){.mkv-process-gallery .fh-layout{max-width:min(100%,72rem);margin-left:auto;margin-right:auto}}
/* Privacy: readable long-form layout with the site's reveal blocks */
.mkv-privacy-summary{padding-top:var(--spacing-3xl)}
.mkv-privacy-facts{display:grid;gap:0;margin-top:var(--spacing-l);border-top:1px solid hsla(0,0%,100%,.14)}
.mkv-privacy-facts>div{display:grid;grid-template-columns:minmax(0,1fr);gap:.15rem;padding:var(--spacing-m) 0;border-bottom:1px solid hsla(0,0%,100%,.14)}
.mkv-privacy-facts dt{font-size:var(--font--s);opacity:.5}
.mkv-privacy-facts dd{margin:0;font-size:var(--font--m)}
@media (min-width:768px){.mkv-privacy-facts>div{grid-template-columns:14rem minmax(0,1fr);align-items:baseline;gap:var(--spacing-l)}}
.mkv-privacy-body{padding-top:var(--spacing-2xl);padding-bottom:var(--spacing-4xl)}
.mkv-privacy-block{padding:var(--spacing-2xl) 0;border-top:1px solid hsla(0,0%,100%,.12)}
.mkv-privacy-block:first-child{border-top:0}








.mkv-privacy-block p+p{margin-top:var(--spacing-m)}
.mkv-privacy-block a{text-decoration:underline;text-underline-offset:.2em}
/* Bedrijfsgegevens: label/value list that actually lines up. The links inside would otherwise
   pick up the pill-button styling from .fh-item--text a:not(.btn-link). */
.mkv-details{display:grid;gap:0;margin:var(--spacing-l) 0 var(--spacing-2xl);border-top:1px solid hsla(0,0%,100%,.14)}
.mkv-details>div{display:grid;grid-template-columns:minmax(0,1fr);gap:.15rem;padding:var(--spacing-m) 0;border-bottom:1px solid hsla(0,0%,100%,.14)}
.mkv-details dt{font-size:var(--font--s);opacity:.5}
.mkv-details dd{margin:0;font-size:var(--font--m)}
.fh-item--text .mkv-details dd a{border:0;border-radius:0;padding:0;overflow:visible;color:inherit;background:none;text-decoration:underline;text-underline-offset:.2em;white-space:normal}
.fh-item--text .mkv-details dd a:before{display:none}
@media (min-width:768px){.mkv-details>div{grid-template-columns:12rem minmax(0,1fr);align-items:baseline;gap:var(--spacing-l)}}

.mkv-privacy-block h4{margin-bottom:var(--spacing-m)}
.mkv-privacy-block p{max-width:62ch}
/* .fh-block is a flex row, so the stacked privacy sections became side-by-side columns */
.mkv-privacy-body .fh-block{display:block}

/* MK Vision patch — nc.mkvision.nl schuine beeldcarrousel. */
.mkv-visuals-slot{width:100%;min-height:1px}
.mkv-visuals--carrousel{position:relative;padding:clamp(1.5rem,4vw,3.25rem) 0;overflow:hidden;overflow-x:clip;overflow-y:visible;isolation:isolate}
.mkv-carrousel{position:relative;display:flex;justify-content:center;align-items:center;perspective:2000px;min-height:min(96vw,42rem)}
.mkv-carrousel__ring{position:relative;transform-style:preserve-3d;box-sizing:border-box;width:min(62vw,var(--visual-tegel,33.5rem));aspect-ratio:33.5/28.5;padding:1.75rem;will-change:transform}
.mkv-carrousel__item{box-sizing:border-box;position:absolute;inset:0;margin:0;padding:1.75rem;backface-visibility:hidden}
.mkv-carrousel__kader{display:block;position:relative;width:100%;height:100%;overflow:hidden;border-radius:1.65rem;background:#111521;transform:scaleX(-1);box-shadow:0 28px 80px rgba(0,0,0,.28)}
.mkv-carrousel__binnen{position:absolute;top:-1rem;bottom:-1rem;left:-4rem;right:-4rem;will-change:transform}
.mkv-carrousel__media{display:block;width:100%;height:100%;object-fit:cover}
@media(min-width:1024px){.mkv-visuals--carrousel{padding:2.5rem 0}.mkv-carrousel__kader{border-radius:2rem}.mkv-carrousel__ring{width:min(86vw,var(--visual-tegel,33.5rem))}}
@media(max-width:1023px){.mkv-carrousel__ring{width:var(--visual-tegel-mobiel,min(62vw,var(--visual-tegel,33.5rem)))}}
@media(prefers-reduced-motion:reduce){.mkv-carrousel{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;perspective:none}.mkv-carrousel__ring{position:static;transform:none!important;transform-style:flat;width:auto;height:auto;padding:0;display:contents}.mkv-carrousel__item{position:static;width:min(90vw,22rem);height:auto;aspect-ratio:16/9;transform:none!important;visibility:visible!important}.mkv-carrousel__binnen{position:absolute;inset:0;transform:none!important}}

/* Page transition — exact nc.mkvision.nl/Funkhaus runtime.
   De animatie zelf draait in mkv-rayo-exact.js; geen tweede View Transition-laag
   eronder, zodat leave en enter niet dubbel of met een andere snelheid lopen. */
html.mkv-fh-transitioning{overflow:hidden!important}
html.mkv-fh-transitioning body{overflow:hidden!important}
html.mkv-fh-transitioning main.layout-wrapper{pointer-events:none}
@media(prefers-reduced-motion:reduce){html.mkv-fh-transitioning{overflow:auto!important}html.mkv-fh-transitioning body{overflow:auto!important}}

/* ===== MK Vision v138 — nc.mkvision.nl beeldstroken: schuin, sleepbaar, met voortgang ===== */
.mkv-visuals:not(.mkv-visuals--carrousel){
  position:relative;width:100vw;margin-left:calc(50% - 50vw);
  margin-top:clamp(3.5rem,8vw,8rem);margin-bottom:clamp(3.5rem,8vw,8rem);
  overflow:hidden;padding:clamp(2.2rem,5vw,5.5rem) 0;isolation:isolate;
  cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;
}
.mkv-visuals:not(.mkv-visuals--carrousel).is-dragging{cursor:grabbing}
.mkv-visuals__stage{display:grid;gap:clamp(.7rem,1.1vw,1.4rem);transform:rotate(var(--visuals-tilt,0deg)) scale(var(--visuals-scale,1));transform-origin:center;will-change:transform}
.mkv-visuals__row{width:100%;overflow:hidden;min-width:0}
.mkv-visuals__track{display:flex;width:max-content;gap:clamp(.7rem,1.1vw,1.4rem);will-change:transform;transform:translate3d(0,0,0)}
.mkv-visuals__group{display:flex;flex:0 0 auto;gap:clamp(.7rem,1.1vw,1.4rem)}
.mkv-visual-card{position:relative;flex:0 0 auto;width:var(--visual-tegel,clamp(17rem,30vw,36rem));aspect-ratio:16/9;margin:0;overflow:hidden;border-radius:clamp(1rem,1.7vw,1.8rem);background:#111521;box-shadow:0 24px 70px rgba(0,0,0,.18);pointer-events:none}
.mkv-visual-card .mkv-rayo-parallax,.mkv-visual-card .mkv-rayo-parallax__deform{display:block;width:100%;height:100%}
.mkv-visual-card__media{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.015);backface-visibility:hidden}
.mkv-visuals__progress{position:relative;z-index:8;width:min(76vw,880px);height:2px;margin:clamp(2rem,4vw,3.5rem) auto 0;background:rgba(255,255,255,.18);overflow:hidden;border-radius:999px;pointer-events:none}
.mkv-visuals__progress>span{display:block;width:100%;height:100%;background:var(--mkv-carousel-accent,#5362D5);transform:scaleX(0);transform-origin:left center;will-change:transform}
.mkv-visuals--carrousel{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.mkv-visuals--carrousel.is-dragging{cursor:grabbing}
.mkv-visuals--carrousel .mkv-visuals__progress{margin-top:clamp(.75rem,2vw,1.5rem)}
@media(max-width:1023px){
  .mkv-visual-card{width:var(--visual-tegel-mobiel,clamp(15rem,68vw,26rem));border-radius:1.2rem}
  .mkv-visuals:not(.mkv-visuals--carrousel){padding:3.2rem 0;margin-top:3.5rem;margin-bottom:3.5rem}
  .mkv-visuals__progress{width:calc(100vw - 40px);margin-top:2rem}
}
@media(prefers-reduced-motion:reduce){
  .mkv-visuals__stage{transform:none!important}.mkv-visuals__track{transform:none!important;display:flex;overflow-x:auto;width:auto;padding:0 20px;scroll-snap-type:x proximity}
  .mkv-visuals__group[aria-hidden="true"]{display:none}.mkv-visual-card{scroll-snap-align:start}.mkv-visuals__progress{display:none}
}

/* ======================================================================
   MK Vision v141 — eigen header, hero motion, Rayo radius & Rayo footer
   ====================================================================== */

/* Header: originele Funkhaus DOM blijft intact. Menu staat weer in de linker
   headerkolom; op desktop wordt het visueel rechts naast de CTA geplaatst. */
.fh-header{display:flex!important;align-items:flex-start!important;justify-content:space-between!important}
.fh-header--left[data-mkv-header-brand="1"]{flex:1 1 auto!important;width:auto!important;min-width:0!important;max-width:none!important}
.fh-header--right[data-mkv-header-actions="1"] .fh-header--right__greeting{display:none!important}
.fh-header--right[data-mkv-header-actions="1"] .fh-header--right__contact{margin:0!important;position:relative!important;inset:auto!important}
.mkv-header-menu-icon,.mkv-header-project-icon{display:block;width:1.35rem;height:1.35rem;flex:0 0 auto}
.menu-plus .mkv-header-menu-icon{width:1.55rem;height:1.55rem}
.fh-header--right__contact .mkv-header-project-icon{margin-left:.5rem}
@media(min-width:1200px){
  .header--wrapper .fh-header{position:relative!important}
  .header--wrapper .fh-header>.fh-header--left[data-mkv-header-brand="1"]{position:static!important;flex:0 0 auto!important;width:auto!important;max-width:min(34vw,20rem)!important}
  .header--wrapper .fh-header>.fh-header--left[data-mkv-header-brand="1"] .fh-menu{
    position:absolute!important;z-index:13!important;top:var(--spacing-xl)!important;right:var(--spacing-xl)!important;left:auto!important;
    margin:0!important;width:20em!important;max-width:20em!important;flex:0 0 20em!important
  }
  .header--wrapper .fh-header>.fh-header--left[data-mkv-header-brand="1"] .fh-menu .fh-menu--top{width:20em!important;min-width:20em!important}
  .header--wrapper .fh-header>.fh-header--left[data-mkv-header-brand="1"] .fh-menu.menu-open{width:20em!important;max-width:20em!important;flex-basis:20em!important}
  .header--wrapper .fh-header>.fh-header--right[data-mkv-header-actions="1"]{
    position:absolute!important;z-index:12!important;top:var(--spacing-xl)!important;
    right:calc(var(--spacing-xl) + 20em + var(--spacing-s))!important;left:auto!important;
    margin:0!important;padding:0!important;width:auto!important;min-width:0!important;
    display:flex!important;align-items:stretch!important;justify-content:flex-end!important;gap:0!important
  }
  .header--wrapper .fh-header>.fh-header--right[data-mkv-header-actions="1"] .fh-header--right__contact{display:flex!important}
}
@media(max-width:1199px){
  .header--wrapper .fh-header>.fh-header--left[data-mkv-header-brand="1"]{width:100%!important;max-width:none!important;flex:1 1 100%!important}
  .header--wrapper .fh-header>.fh-header--right[data-mkv-header-actions="1"]{display:none!important}
}

/* Hero-state fallback. De uiteindelijke state-CSS wordt server-side als laatste
   styleblok toegevoegd; hier staan alleen veilige basiseigenschappen zodat oude
   gecachte markup nooit een tweede hero-effect kan starten. */
.hero-model-wrapper[data-mkv-hero-motion]{isolation:isolate;overflow:hidden;pointer-events:none;background-color:var(--mkv-hero-motion-bg,#0A0A12)}
.hero-model-wrapper[data-mkv-hero-motion="off"]{display:none!important}
.hero-model-wrapper[data-mkv-hero-motion="flow"] canvas,.hero-model-wrapper[data-mkv-hero-motion="subtle"] canvas{display:none!important;visibility:hidden!important;opacity:0!important}

/* Minder capsule, meer Rayo: duidelijke afgeronde rechthoek i.p.v. 9999px pill. */
.home-capabilities .fh-item.fh-item--video,
.home-capabilities .fh-col-start-7.fh-col-span-5 .fh-item--video,
.fh-section--service-video .fh-item.fh-item--video{border-radius:var(--border-radius-box,1.5rem)!important}
.home-capabilities .fh-item.fh-item--video video,
.fh-section--service-video .fh-item.fh-item--video video{border-radius:inherit!important}
@media(max-width:767px){.home-capabilities .fh-item.fh-item--video,.fh-section--service-video .fh-item.fh-item--video{border-radius:var(--border-radius-box,1.35rem)!important}}


/* Werkwijze stacked cards: tekst is altijd beschikbaar; de JS animeert alleen
   een kleine verplaatsing. Hiermee voorkomen we late/lege kaarten na route-swap. */
.mkv-journey-fh__step .mkv-journey-fh__num,
.mkv-journey-fh__step h3,
.mkv-journey-fh__step p{visibility:visible!important}

/* Progress bars: altijd leesbaar, ook na route-swap/resize. */
.mkv-visuals__progress,.mkv-flow__footer>span,.mkv-project-breakout-progress{min-height:2px}
.mkv-visuals__progress>span,[data-flow-progress],.indicator-inner{transform-origin:left center!important}
.mkv-project-breakout-progress{overflow:visible!important;height:auto!important;min-height:2.75rem!important}
.mkv-project-breakout-progress>span{display:block!important;min-height:2px!important;background:var(--mkv-carousel-accent,#5362D5)!important;border-radius:999px!important;align-self:center!important}
.indicator-track{overflow:hidden!important}.indicator-inner{transition:width .08s linear!important}

/* Werk-tunnel: WebGL blijft aanwezig voor diepte en projectscroll, maar de
   canvas wordt veel donkerder zodat de cases leidend zijn. */
#work-wrapper .work-canvas-wrapper{background:#07080e!important}
#work-wrapper .work-canvas-wrapper canvas{filter:saturate(.78) brightness(.72) contrast(.94)!important}

/* Rayo software-company footer, vertaald naar MK Vision en dark. */
.mkv-rayo-footer{position:relative;z-index:3;background:#05060A;color:#F1F2F6;padding:clamp(5rem,9vw,9rem) clamp(1.25rem,4.5vw,5rem) clamp(1.5rem,3vw,3rem);overflow:hidden;border-top:1px solid rgba(255,255,255,.08)}
.mkv-rayo-footer a{color:inherit;text-decoration:none}
.mkv-rayo-footer__cta{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:clamp(2rem,6vw,7rem);padding-bottom:clamp(4rem,8vw,8rem);border-bottom:1px solid rgba(255,255,255,.12);position:relative}
.mkv-rayo-footer__cta>div{padding-left:clamp(0rem,8vw,9rem)}
.mkv-rayo-footer__cta p{margin:0 0 1.1rem;color:rgba(241,242,246,.52);font-size:clamp(.8rem,1vw,.95rem);letter-spacing:.02em}
.mkv-rayo-footer__cta h2{margin:0;max-width:12ch;font-family:inherit;font-weight:400;font-size:clamp(3rem,7.3vw,8rem);line-height:.9;letter-spacing:-.055em;color:#F1F2F6}
.mkv-rayo-footer__cta h2 em{font-family:"Saol Display",Georgia,serif;font-weight:400}
.mkv-rayo-footer__spark{position:absolute;left:0;top:.35rem;width:3.2rem;height:3.2rem}
.mkv-rayo-footer__spark i{position:absolute;background:var(--mkv-rayo-footer-accent,#5362D5);border-radius:999px}
.mkv-rayo-footer__spark i:nth-child(1),.mkv-rayo-footer__spark i:nth-child(2){width:1.15rem;height:1px;top:50%}.mkv-rayo-footer__spark i:nth-child(1){left:0}.mkv-rayo-footer__spark i:nth-child(2){right:0}
.mkv-rayo-footer__spark i:nth-child(3),.mkv-rayo-footer__spark i:nth-child(4){height:1.15rem;width:1px;left:50%}.mkv-rayo-footer__spark i:nth-child(3){top:0}.mkv-rayo-footer__spark i:nth-child(4){bottom:0}
.mkv-rayo-footer__cta-link{display:inline-flex;align-items:center;gap:1.25rem;border-bottom:1px solid rgba(255,255,255,.38);padding:.4rem 0 .7rem;font-size:clamp(1rem,1.35vw,1.3rem);white-space:nowrap;transition:border-color .3s ease,color .3s ease}
.mkv-rayo-footer__cta-link:hover{color:var(--mkv-rayo-footer-accent,#5362D5);border-color:var(--mkv-rayo-footer-accent,#5362D5)}
.mkv-rayo-footer__cta-link svg{width:1.4rem;height:1.4rem}
.mkv-rayo-footer__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(2rem,6vw,8rem);padding:clamp(3.5rem,6vw,6rem) 0}
.mkv-rayo-footer__col{display:flex;flex-direction:column;align-items:flex-start;gap:.65rem;min-width:0}
.mkv-rayo-footer__col nav{display:flex;flex-direction:column;align-items:flex-start;gap:.55rem}
.mkv-rayo-footer__label{display:block;margin-bottom:1rem;color:rgba(241,242,246,.38);font-size:.72rem;text-transform:uppercase;letter-spacing:.11em}
.mkv-rayo-footer__col a{font-size:clamp(1rem,1.25vw,1.22rem);line-height:1.35;transition:color .25s ease,transform .25s ease}
.mkv-rayo-footer__col a:hover{color:var(--mkv-rayo-footer-accent,#5362D5);transform:translateX(.18rem)}
.mkv-rayo-footer__legal{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.35rem}.mkv-rayo-footer__legal a{font-size:.82rem;color:rgba(241,242,246,.48)}
.mkv-rayo-footer__note{max-width:26ch;margin:1.3rem 0 0;color:rgba(241,242,246,.45);font-size:.9rem;line-height:1.55}
.mkv-rayo-footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.09);color:rgba(241,242,246,.42);font-size:.78rem}
@media(max-width:767px){
  .mkv-rayo-footer{padding-top:4.5rem}
  .mkv-rayo-footer__cta{grid-template-columns:1fr;align-items:start;padding-bottom:4rem}
  .mkv-rayo-footer__cta>div{padding-left:0;padding-top:4rem}
  .mkv-rayo-footer__cta h2{font-size:clamp(3rem,15vw,5.6rem)}
  .mkv-rayo-footer__cta-link{justify-self:start}
  .mkv-rayo-footer__grid{grid-template-columns:1fr;gap:3.25rem;padding:3.75rem 0}
  .mkv-rayo-footer__bottom{align-items:flex-start;flex-direction:column}
}
/* v141 breakout progress: echte track + aparte fill, zodat flex-layout de voortgang niet overschrijft. */
.mkv-project-breakout-progress__track{position:relative!important;display:block!important;flex:1 1 auto!important;height:2px!important;min-height:2px!important;width:auto!important;background:transparent!important;border-radius:999px!important;overflow:hidden!important;transform:none!important}
.mkv-project-breakout-progress__track>i{position:absolute!important;inset:0!important;display:block!important;background:var(--mkv-carousel-accent,#5362D5)!important;transform:scaleX(0);transform-origin:left center;will-change:transform}

/* ======================================================================
   MK Vision v142 — eager scroll geometry, menu metadata & dark tunnel
   ====================================================================== */

/* De decoratieve progressbars zijn bewust verwijderd op alle beeldstroken en
   onder de Werkwijze timeline. Inhoudelijke bars in de timeline zelf blijven. */
.mkv-visuals__progress,
.mkv-flow__footer>span{display:none!important}
.mkv-flow__footer{gap:0!important}
@media(min-width:768px){.mkv-flow__footer{justify-content:flex-start!important}}

/* Werkwijze mag nooit wachten op een reveal om leesbaar te worden. */
.mkv-journey-fh__step .mkv-journey-fh__num,
.mkv-journey-fh__step h3{visibility:visible!important;opacity:1!important}
.mkv-journey-fh__step p{visibility:visible!important}

/* Header: exacte referentie-iconen en metadata in het geopende menu. */
.mkv-header-menu-icon{width:1.25rem!important;height:1.25rem!important;overflow:visible}
.mkv-header-project-icon{width:1.25rem!important;height:1.25rem!important;overflow:visible;flex:0 0 auto}
.fh-header--right__contact .btn-text,
.fh-header--right__contact .btn-text-hover{display:flex!important;align-items:center!important;gap:.55rem!important}
.mkv-menu-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.5rem;margin-top:1.15rem;padding:1.15rem 1rem .35rem;border-top:1px solid rgba(255,255,255,.13);opacity:0;min-width:min(33rem,calc(100vw - 2rem))}
.mkv-menu-meta>div{display:flex;flex-direction:column;align-items:flex-start;gap:.22rem;min-width:0}
.mkv-menu-meta span{font-size:.66rem;line-height:1;text-transform:uppercase;letter-spacing:.095em;opacity:.42}
.mkv-menu-meta a,.mkv-menu-meta strong{font:inherit;font-size:.82rem;line-height:1.25;font-weight:400;color:inherit;white-space:normal;overflow-wrap:anywhere;text-decoration:none}
.mkv-menu-meta strong{display:flex;align-items:center;gap:.42rem}
.mkv-menu-meta strong i{display:inline-block;width:.45rem;height:.45rem;border-radius:50%;background:#61d39b;box-shadow:0 0 .8rem rgba(97,211,155,.32)}
@media(max-width:1200px){
  .mkv-menu-meta{grid-template-columns:1fr 1fr;margin-top:1.35rem;padding:1.2rem 0 .4rem;min-width:0;width:100%}
}
@media(max-width:600px){
  .mkv-menu-meta{grid-template-columns:1fr;gap:.8rem}
  .mkv-menu-meta>div{display:grid;grid-template-columns:5.8rem minmax(0,1fr);align-items:center;gap:.7rem}
}

/* Projecten: originele WebGL tunnel is terug. Alleen de wereld eromheen is
   donkerder gemaakt; projectbeelden zelf blijven vrijwel op originele helderheid. */
#work-wrapper .work-canvas-wrapper{background:#0a0b11!important}
#work-wrapper .work-canvas-wrapper canvas{filter:saturate(.92) brightness(.94) contrast(1.02)!important}

/* ======================================================================
   MK Vision v143 — exact header position, Funkhaus drag strips, Rayo footer
   ====================================================================== */



/* Beeldstroken: exact als directe drag-surface, dus geen progress indicator en
   geen scroll-gestuurde offset. De bestaande schuine compositie blijft staan. */
.mkv-visuals__progress{display:none!important}
.mkv-visuals[data-mkv-drag-only="1"],.mkv-visuals--carrousel[data-mkv-drag-only="1"]{cursor:grab!important;touch-action:pan-y!important}
.mkv-visuals[data-mkv-drag-only="1"].is-dragging,.mkv-visuals--carrousel[data-mkv-drag-only="1"].is-dragging{cursor:grabbing!important}
.mkv-visuals[data-mkv-drag-only="1"] img,.mkv-visuals[data-mkv-drag-only="1"] video,
.mkv-visuals--carrousel[data-mkv-drag-only="1"] img,.mkv-visuals--carrousel[data-mkv-drag-only="1"] video{-webkit-user-drag:none!important;user-select:none!important;pointer-events:none!important}

/* Rayo software-development-company footer: CTA + exact drie contentkolommen. */
.mkv-rayo-footer.mkv-rayo-footer--software{
  background:#05060a!important;color:#f2f2f5!important;padding:0 clamp(1.25rem,4.5vw,5rem) clamp(1.5rem,3vw,3rem)!important;
  border-top:0!important
}
.mkv-rayo-footer--software .mkv-rayo-footer__cta{
  min-height:clamp(28rem,62vw,52rem);display:grid!important;grid-template-columns:minmax(10rem,.38fr) minmax(0,1fr) auto!important;
  align-items:center!important;gap:clamp(2rem,5vw,6rem)!important;padding:clamp(5rem,9vw,9rem) 0!important;
  border-bottom:1px solid rgba(255,255,255,.13)!important
}
.mkv-rayo-footer--software .mkv-rayo-footer__cta-art{position:relative;width:min(22vw,18rem);aspect-ratio:1;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 36% 32%,rgba(255,255,255,.17),transparent 25%),radial-gradient(circle at 64% 70%,color-mix(in srgb,var(--mkv-rayo-footer-accent) 42%,transparent),transparent 48%),#0b0c13}
.mkv-rayo-footer--software .mkv-rayo-footer__cta-art:before,.mkv-rayo-footer--software .mkv-rayo-footer__cta-art:after{content:"";position:absolute;inset:24%;border:1px solid rgba(255,255,255,.18);border-radius:32% 68% 54% 46%;transform:rotate(28deg)}
.mkv-rayo-footer--software .mkv-rayo-footer__cta-art:after{inset:35%;transform:rotate(-35deg);border-color:color-mix(in srgb,var(--mkv-rayo-footer-accent) 60%,transparent)}
.mkv-rayo-footer--software .mkv-rayo-footer__cta-art span{position:absolute;inset:43%;border-radius:50%;background:var(--mkv-rayo-footer-accent);box-shadow:0 0 3rem color-mix(in srgb,var(--mkv-rayo-footer-accent) 55%,transparent)}
.mkv-rayo-footer--software .mkv-rayo-footer__cta-copy{padding:0!important}
.mkv-rayo-footer--software .mkv-rayo-footer__cta-copy p{margin:0 0 1.15rem!important;color:rgba(242,242,245,.46)!important;font-size:.85rem!important}
.mkv-rayo-footer--software .mkv-rayo-footer__cta h2{font-size:clamp(3.3rem,7vw,8.3rem)!important;line-height:.9!important;max-width:11ch!important;letter-spacing:-.055em!important}
.mkv-rayo-footer--software .mkv-rayo-footer__cta-link{align-self:center!important}
.mkv-rayo-footer--software .mkv-rayo-footer__grid{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:clamp(2rem,6vw,8rem)!important;
  padding:clamp(4rem,7vw,7rem) 0!important;border-bottom:1px solid rgba(255,255,255,.09)
}
.mkv-rayo-footer--software .mkv-rayo-footer__col{gap:.7rem!important}
.mkv-rayo-footer--software .mkv-rayo-footer__label{margin-bottom:1.25rem!important;color:rgba(242,242,245,.38)!important}
.mkv-rayo-footer--software .mkv-rayo-footer__col nav{gap:.62rem!important}
.mkv-rayo-footer--software .mkv-rayo-footer__col a{font-size:clamp(1rem,1.28vw,1.24rem)!important}
.mkv-rayo-footer--software .mkv-rayo-footer__legal{display:flex!important;gap:1rem!important;margin-top:1.65rem!important}
.mkv-rayo-footer--software .mkv-rayo-footer__legal a{font-size:.8rem!important;color:rgba(242,242,245,.46)!important}
.mkv-rayo-footer__subscribe{width:100%;max-width:28rem;margin-top:2rem}
.mkv-rayo-footer__subscribe>label{display:block;margin-bottom:.7rem;color:rgba(242,242,245,.42);font-size:.78rem}
.mkv-rayo-footer__subscribe>div{display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,.26)}
.mkv-rayo-footer__subscribe input{min-width:0;flex:1;background:transparent;border:0;outline:0;color:#fff;padding:.8rem 0;font:inherit}
.mkv-rayo-footer__subscribe input::placeholder{color:rgba(242,242,245,.34)}
.mkv-rayo-footer__subscribe button{width:2.8rem;height:2.8rem;display:grid;place-items:center;border:0;background:transparent;color:#fff;cursor:pointer}
.mkv-rayo-footer__subscribe button svg{width:1.25rem;height:1.25rem}
.mkv-rayo-footer--software .mkv-rayo-footer__bottom{border-top:0!important;padding-top:1.5rem!important}
@media(max-width:900px){
  .mkv-rayo-footer--software .mkv-rayo-footer__cta{grid-template-columns:1fr!important;min-height:0!important;align-items:start!important}
  .mkv-rayo-footer--software .mkv-rayo-footer__cta-art{width:min(46vw,15rem)}
  .mkv-rayo-footer--software .mkv-rayo-footer__grid{grid-template-columns:1fr!important;gap:3.5rem!important}
}

/* ======================================================================
   MK Vision v144 — direct static header + exact Rayo software footer
   ====================================================================== */



/* Rayo / index-software-development-company footer:
   talk CTA -> two visual panels -> exactly three information columns. */
.mkv-rayo-footer--exact{
  position:relative!important;background:#05060a!important;color:#f4f4f6!important;
  padding:clamp(4.5rem,8vw,8rem) var(--spacing-xl) clamp(1.5rem,3vw,3rem)!important;
  border-top:1px solid rgba(255,255,255,.08)!important;overflow:hidden!important
}
.mkv-rayo-footer--exact .mkv-rayo-footer__talk{
  display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;align-items:center!important;
  gap:clamp(1.25rem,3vw,3rem)!important;padding:0 0 clamp(3rem,5.5vw,5.5rem)!important;
  border-bottom:1px solid rgba(255,255,255,.12)!important
}
.mkv-rayo-footer__talk-icon{width:clamp(2.35rem,3.6vw,4rem);height:clamp(2.35rem,3.6vw,4rem);display:grid;place-items:center;color:var(--mkv-rayo-footer-accent,#5362D5)}
.mkv-rayo-footer__talk-icon svg{width:100%;height:100%;stroke-width:1}
.mkv-rayo-footer--exact .mkv-rayo-footer__talk h2{
  margin:0!important;font-family:inherit!important;font-size:clamp(2rem,4.2vw,5rem)!important;font-weight:400!important;
  line-height:.96!important;letter-spacing:-.05em!important;max-width:15ch!important;color:#f4f4f6!important
}
.mkv-rayo-footer__talk-link{
  display:inline-flex!important;align-items:center!important;justify-content:space-between!important;gap:2rem!important;
  min-width:clamp(10rem,15vw,15rem)!important;padding:1rem 0!important;border-bottom:1px solid rgba(255,255,255,.38)!important;
  font-size:clamp(1rem,1.25vw,1.22rem)!important;color:#f4f4f6!important;text-decoration:none!important
}
.mkv-rayo-footer__talk-link svg{width:1.35rem;height:1.35rem;flex:0 0 auto}
.mkv-rayo-footer__talk-link:hover{color:var(--mkv-rayo-footer-accent,#5362D5)!important;border-color:var(--mkv-rayo-footer-accent,#5362D5)!important}

.mkv-rayo-footer--exact .mkv-rayo-footer__media{
  display:grid!important;grid-template-columns:1fr 1fr!important;gap:var(--spacing-s)!important;
  padding:var(--spacing-s) 0 clamp(4rem,7vw,7rem)!important
}
.mkv-rayo-footer--exact .mkv-rayo-footer__media figure{
  margin:0!important;position:relative!important;overflow:hidden!important;border-radius:var(--border-radius-box)!important;
  aspect-ratio:16/7!important;background:#0d0e15!important
}
.mkv-rayo-footer--exact .mkv-rayo-footer__media figure:first-child{border-radius:var(--border-radius-box) var(--border-radius-box) 4.5rem var(--border-radius-box)!important}
.mkv-rayo-footer--exact .mkv-rayo-footer__media figure:last-child{border-radius:4.5rem var(--border-radius-box) var(--border-radius-box) var(--border-radius-box)!important}
.mkv-rayo-footer--exact .mkv-rayo-footer__media img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;filter:saturate(.78) brightness(.58)!important;transform:scale(1.015)}

.mkv-rayo-footer--exact .mkv-rayo-footer__grid--exact{
  display:grid!important;grid-template-columns:1.05fr 1fr .75fr!important;gap:clamp(2.5rem,7vw,9rem)!important;
  align-items:start!important;padding:0 0 clamp(4rem,7vw,7rem)!important
}
.mkv-rayo-footer--exact .mkv-rayo-footer__col{min-width:0!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:.7rem!important}
.mkv-rayo-footer--exact .mkv-rayo-footer__nav{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.62rem clamp(1.5rem,3vw,3rem)!important;width:100%!important}
.mkv-rayo-footer--exact .mkv-rayo-footer__nav a,
.mkv-rayo-footer--exact .mkv-rayo-footer__col--ecosystem nav a,
.mkv-rayo-footer--exact .mkv-rayo-footer__mail,
.mkv-rayo-footer--exact .mkv-rayo-footer__phone{
  color:#f4f4f6!important;text-decoration:none!important;font-size:clamp(1rem,1.2vw,1.2rem)!important;line-height:1.35!important
}
.mkv-rayo-footer--exact .mkv-rayo-footer__nav sup{font-size:.55em;color:rgba(244,244,246,.4);vertical-align:top;margin-left:.15em}
.mkv-rayo-footer--exact .mkv-rayo-footer__legal{display:flex!important;gap:1rem!important;margin-top:1.6rem!important}
.mkv-rayo-footer--exact .mkv-rayo-footer__legal a{font-size:.8rem!important;color:rgba(244,244,246,.45)!important;text-decoration:none!important}
.mkv-rayo-footer--exact .mkv-rayo-footer__col--contact{gap:.4rem!important}
.mkv-rayo-footer--exact .mkv-rayo-footer__subscribe{width:100%!important;max-width:27rem!important;margin-top:2.2rem!important}
.mkv-rayo-footer--exact .mkv-rayo-footer__subscribe label{display:block!important;color:rgba(244,244,246,.42)!important;font-size:.8rem!important;margin:0 0 .75rem!important}
.mkv-rayo-footer--exact .mkv-rayo-footer__subscribe>div{display:flex!important;align-items:center!important;border-bottom:1px solid rgba(255,255,255,.24)!important}
.mkv-rayo-footer--exact .mkv-rayo-footer__subscribe input{flex:1!important;min-width:0!important;border:0!important;outline:0!important;background:transparent!important;color:#fff!important;padding:.85rem 0!important;font:inherit!important}
.mkv-rayo-footer--exact .mkv-rayo-footer__subscribe input::placeholder{color:rgba(244,244,246,.3)!important}
.mkv-rayo-footer--exact .mkv-rayo-footer__subscribe button{width:2.8rem!important;height:2.8rem!important;border:0!important;background:transparent!important;color:#fff!important;display:grid!important;place-items:center!important;padding:0!important}
.mkv-rayo-footer--exact .mkv-rayo-footer__subscribe button svg{width:1.25rem;height:1.25rem}
.mkv-rayo-footer--exact .mkv-rayo-footer__label{color:rgba(244,244,246,.38)!important;font-size:.75rem!important;letter-spacing:.08em!important;text-transform:none!important;margin:0 0 .8rem!important}
.mkv-rayo-footer--exact .mkv-rayo-footer__col--ecosystem nav{display:flex!important;flex-direction:column!important;gap:.62rem!important}
.mkv-rayo-footer--exact .mkv-rayo-footer__bottom{
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:1rem!important;
  padding-top:1.35rem!important;border-top:1px solid rgba(255,255,255,.08)!important;color:rgba(244,244,246,.35)!important;font-size:.78rem!important
}

@media(max-width:900px){
  .mkv-rayo-footer--exact{padding-left:var(--spacing-m)!important;padding-right:var(--spacing-m)!important}
  .mkv-rayo-footer--exact .mkv-rayo-footer__talk{grid-template-columns:auto 1fr!important}
  .mkv-rayo-footer--exact .mkv-rayo-footer__talk-link{grid-column:2!important;justify-self:start!important}
  .mkv-rayo-footer--exact .mkv-rayo-footer__media{grid-template-columns:1fr!important}
  .mkv-rayo-footer--exact .mkv-rayo-footer__media figure{aspect-ratio:4/3!important}
  .mkv-rayo-footer--exact .mkv-rayo-footer__grid--exact{grid-template-columns:1fr!important;gap:3.25rem!important}
  .mkv-rayo-footer--exact .mkv-rayo-footer__nav{grid-template-columns:1fr 1fr!important}
}
@media(max-width:520px){
  .mkv-rayo-footer--exact .mkv-rayo-footer__talk{grid-template-columns:1fr!important}
  .mkv-rayo-footer__talk-icon{width:2.75rem;height:2.75rem}
  .mkv-rayo-footer--exact .mkv-rayo-footer__talk-link{grid-column:auto!important}
  .mkv-rayo-footer--exact .mkv-rayo-footer__nav{grid-template-columns:1fr!important}
}


/* ===== v145 — exact Rayo footer composition + bespoke GSAP header icon SVGs ===== */
.mkv-menu-morph,.mkv-project-morph{display:block!important;width:24px!important;height:24px!important;overflow:visible!important;color:currentColor!important}
.menu-plus>.mkv-menu-morph{transform:none!important;rotate:0deg!important}
.fh-header--right__contact .mkv-project-morph{flex:0 0 24px!important}

/* The Rayo reference footer uses two transparent 3D objects as part of the CTA,
   never cropped project cards / never an image strip. */
.mkv-rayo-footer--reference{
  --rayo-edge:var(--spacing-xl);
  position:relative!important;z-index:3!important;overflow:hidden!important;
  margin:0!important;padding:0!important;background:#07080d!important;color:#f4f4f6!important;
  border:0!important;border-top:1px solid rgba(255,255,255,.075)!important
}
.mkv-rayo-footer--reference a{color:inherit!important;text-decoration:none!important}
.mkv-rayo-ref__cta{
  position:relative!important;min-height:clamp(34rem,58vw,58rem)!important;
  padding:clamp(5rem,8vw,8rem) var(--rayo-edge) clamp(3rem,5vw,5rem)!important;
  overflow:hidden!important;border-bottom:1px solid rgba(255,255,255,.095)!important;
  isolation:isolate!important
}
.mkv-rayo-ref__cta:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 77% 58%,color-mix(in srgb,var(--mkv-rayo-footer-accent,#5362D5) 17%,transparent),transparent 34%);opacity:.75;z-index:0}
.mkv-rayo-ref__cta-copy{position:relative!important;z-index:4!important;width:min(60rem,66%)!important;display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;gap:1.5rem clamp(1.2rem,2.4vw,2.5rem)!important;align-items:start!important}
.mkv-rayo-ref__cta-icon{width:clamp(2.6rem,3.6vw,4.1rem)!important;height:clamp(2.6rem,3.6vw,4.1rem)!important;color:var(--mkv-rayo-footer-accent,#5362D5)!important;margin-top:.35rem!important}
.mkv-rayo-ref__cta-icon svg{display:block;width:100%;height:100%}
.mkv-rayo-ref__cta h2{grid-column:2!important;margin:0!important;max-width:10ch!important;color:#f4f4f6!important;font-family:inherit!important;font-weight:400!important;font-size:clamp(3.8rem,8.4vw,9.2rem)!important;line-height:.86!important;letter-spacing:-.065em!important;text-wrap:balance!important}
.mkv-rayo-ref__contact{grid-column:2!important;margin-top:clamp(1.7rem,3vw,3rem)!important;width:min(16rem,100%)!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:2rem!important;padding:.85rem 0 1rem!important;border-bottom:1px solid rgba(255,255,255,.36)!important;font-size:clamp(1.05rem,1.3vw,1.25rem)!important;transition:color .28s ease,border-color .28s ease!important}
.mkv-rayo-ref__contact svg{width:1.4rem;height:1.4rem;flex:0 0 auto}.mkv-rayo-ref__contact:hover{color:var(--mkv-rayo-footer-accent,#5362D5)!important;border-color:var(--mkv-rayo-footer-accent,#5362D5)!important}
.mkv-rayo-ref__objects{position:absolute!important;z-index:2!important;right:0!important;bottom:-4%!important;width:min(58vw,58rem)!important;height:92%!important;pointer-events:none!important}
.mkv-rayo-ref__object{position:absolute!important;display:block!important;object-fit:contain!important;object-position:center bottom!important;filter:brightness(.72) saturate(.74)!important;will-change:transform!important}
.mkv-rayo-ref__object--one{width:53%!important;height:92%!important;right:31%!important;bottom:-5%!important;transform:rotate(-7deg)!important;opacity:.88!important}
.mkv-rayo-ref__object--two{width:47%!important;height:78%!important;right:-3%!important;bottom:6%!important;transform:rotate(8deg) scale(.9)!important;opacity:.72!important}

.mkv-rayo-ref__info{display:grid!important;grid-template-columns:1.05fr 1fr .72fr!important;gap:clamp(3rem,7vw,9rem)!important;align-items:start!important;padding:clamp(4.5rem,7vw,7rem) var(--rayo-edge) clamp(4rem,6vw,6rem)!important}
.mkv-rayo-ref__column{min-width:0!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important}
.mkv-rayo-ref__column a{font-size:clamp(1rem,1.2vw,1.22rem)!important;line-height:1.32!important;letter-spacing:-.025em!important;transition:color .22s ease!important}
.mkv-rayo-ref__column a:hover{color:var(--mkv-rayo-footer-accent,#5362D5)!important}
.mkv-rayo-ref__column--nav>nav{width:100%!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:.65rem clamp(1.5rem,3vw,3rem)!important}.mkv-rayo-ref__column--nav sup{font-size:.52em!important;color:rgba(244,244,246,.38)!important;vertical-align:top!important;margin-left:.15em!important}
.mkv-rayo-ref__legal{display:flex!important;gap:1rem!important;margin-top:2rem!important}.mkv-rayo-ref__legal a{font-size:.8rem!important;color:rgba(244,244,246,.42)!important}
.mkv-rayo-ref__column--contact{gap:.42rem!important}.mkv-rayo-ref__mail,.mkv-rayo-ref__phone{font-size:clamp(1.25rem,1.9vw,2rem)!important;letter-spacing:-.04em!important}
.mkv-rayo-ref__subscribe{width:100%!important;max-width:27rem!important;margin-top:2.4rem!important}.mkv-rayo-ref__subscribe label{display:block!important;margin-bottom:.8rem!important;color:rgba(244,244,246,.4)!important;font-size:.82rem!important}.mkv-rayo-ref__subscribe>div{display:flex!important;align-items:center!important;border-bottom:1px solid rgba(255,255,255,.24)!important}.mkv-rayo-ref__subscribe input{flex:1!important;min-width:0!important;border:0!important;outline:0!important;background:transparent!important;color:#fff!important;padding:.9rem 0!important;font:inherit!important}.mkv-rayo-ref__subscribe input::placeholder{color:rgba(244,244,246,.28)!important}.mkv-rayo-ref__subscribe button{width:2.8rem!important;height:2.8rem!important;border:0!important;background:transparent!important;color:#fff!important;padding:0!important;display:grid!important;place-items:center!important;cursor:pointer!important}.mkv-rayo-ref__subscribe button svg{width:1.3rem;height:1.3rem}
.mkv-rayo-ref__column--ecosystem>span{display:block!important;margin:0 0 1.15rem!important;color:rgba(244,244,246,.38)!important;font-size:.8rem!important}.mkv-rayo-ref__column--ecosystem nav{display:flex!important;flex-direction:column!important;gap:.64rem!important}
.mkv-rayo-ref__bottom{display:grid!important;grid-template-columns:1fr auto auto!important;align-items:center!important;gap:1.25rem!important;padding:1.35rem var(--rayo-edge) 1.5rem!important;border-top:1px solid rgba(255,255,255,.075)!important;color:rgba(244,244,246,.36)!important;font-size:.78rem!important}.mkv-rayo-ref__bottom button{border:0!important;background:transparent!important;color:inherit!important;display:inline-flex!important;align-items:center!important;gap:.65rem!important;padding:0!important;font:inherit!important;cursor:pointer!important}.mkv-rayo-ref__bottom button:hover{color:#fff!important}.mkv-rayo-ref__bottom button svg{width:1.35rem;height:1.35rem}

@media(max-width:1199px){
  .mkv-rayo-footer--reference{--rayo-edge:var(--spacing-m)}
  .mkv-rayo-ref__cta{min-height:46rem!important}.mkv-rayo-ref__cta-copy{width:72%!important}.mkv-rayo-ref__objects{width:62vw!important;height:76%!important;opacity:.74!important}.mkv-rayo-ref__info{grid-template-columns:1fr 1fr!important}.mkv-rayo-ref__column--ecosystem{grid-column:2!important}
}
@media(max-width:760px){
  .mkv-rayo-ref__cta{min-height:42rem!important;padding-top:5rem!important}.mkv-rayo-ref__cta-copy{width:100%!important;grid-template-columns:1fr!important;gap:1.25rem!important}.mkv-rayo-ref__cta-icon,.mkv-rayo-ref__cta h2,.mkv-rayo-ref__contact{grid-column:1!important}.mkv-rayo-ref__cta h2{font-size:clamp(3.2rem,15vw,5.7rem)!important;max-width:9ch!important}.mkv-rayo-ref__objects{width:100%!important;height:49%!important;bottom:-3%!important}.mkv-rayo-ref__object--one{width:48%!important;right:39%!important}.mkv-rayo-ref__object--two{width:43%!important;right:1%!important}.mkv-rayo-ref__info{grid-template-columns:1fr!important;gap:3.5rem!important}.mkv-rayo-ref__column--ecosystem{grid-column:auto!important}.mkv-rayo-ref__column--nav>nav{grid-template-columns:1fr 1fr!important}.mkv-rayo-ref__bottom{grid-template-columns:1fr auto!important}.mkv-rayo-ref__bottom button{grid-column:1/-1!important;justify-self:start!important}
}
@media(max-width:420px){.mkv-rayo-footer--reference{--rayo-edge:1.5rem}.mkv-rayo-ref__cta{min-height:39rem!important}.mkv-rayo-ref__column--nav>nav{grid-template-columns:1fr!important}.mkv-rayo-ref__object--one{width:54%!important;right:39%!important}.mkv-rayo-ref__object--two{width:48%!important;right:-4%!important}}

/* =========================================================
   v146 — restore the good Funkhaus footer shell/CTA.
   Only the information area becomes the Rayo 3-column layout.
   ========================================================= */
.fh-footer.mkv-footer-rayo-three-shell{
  --mkv-footer-three-accent:var(--mkv-rayo-footer-accent,#5362D5);
}
.fh-footer.mkv-footer-rayo-three-shell .fh-section--footer-menu{
  position:relative!important;
  z-index:3!important;
}
.fh-footer.mkv-footer-rayo-three-shell .fh-section--footer-menu > .fh-layout,
.fh-footer.mkv-footer-rayo-three-shell .fh-section--footer-menu .fh-layout--width-normal.fh-layout{
  display:block!important;
  grid-template-columns:none!important;
  min-height:0!important;
}
.mkv-footer-rayo-three{
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:clamp(.85rem,1.35vw,1.4rem)!important;
  align-items:stretch!important;
  padding:0 0 clamp(1.2rem,2vw,2rem)!important;
}
.mkv-footer-rayo-three__card{
  position:relative!important;
  min-width:0!important;
  min-height:clamp(25rem,31vw,34rem)!important;
  display:flex!important;
  flex-direction:column!important;
  padding:clamp(1.55rem,2.25vw,2.45rem)!important;
  border-radius:clamp(1.15rem,1.55vw,1.65rem)!important;
  background:rgba(255,255,255,.038)!important;
  border:1px solid rgba(255,255,255,.055)!important;
  color:#f4f4f6!important;
  overflow:hidden!important;
}
.mkv-footer-rayo-three__card a{
  color:inherit!important;
  text-decoration:none!important;
  transition:color .22s ease,opacity .22s ease!important;
}
.mkv-footer-rayo-three__card a:hover,
.mkv-footer-rayo-three__card a:focus-visible{
  color:var(--mkv-footer-three-accent,#5362D5)!important;
}
.mkv-footer-rayo-three__navlinks{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:.43rem!important;
}
.mkv-footer-rayo-three__navlinks a{
  font-size:clamp(1.45rem,2vw,2.15rem)!important;
  line-height:1.02!important;
  letter-spacing:-.045em!important;
  font-weight:500!important;
}
.mkv-footer-rayo-three__navlinks sup{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:2.25rem!important;
  height:1.35rem!important;
  margin-left:.38rem!important;
  padding:0 .48rem!important;
  border-radius:999px!important;
  background:var(--mkv-footer-three-accent,#5362D5)!important;
  color:#fff!important;
  font-size:.67rem!important;
  line-height:1!important;
  letter-spacing:0!important;
  vertical-align:middle!important;
  transform:translateY(-.18em)!important;
}
.mkv-footer-rayo-three__legal{
  margin-top:auto!important;
  display:flex!important;
  flex-wrap:wrap!important;
  gap:.75rem 1.6rem!important;
  padding-top:2rem!important;
}
.mkv-footer-rayo-three__legal a{
  color:rgba(244,244,246,.42)!important;
  font-size:.82rem!important;
  line-height:1.2!important;
}
.mkv-footer-rayo-three__contact{
  gap:1rem!important;
}
.mkv-footer-rayo-three__contactline{
  min-height:6.1rem!important;
  display:flex!important;
  align-items:center!important;
  gap:.68rem!important;
  padding:1.1rem 1.35rem!important;
  border-radius:1.05rem!important;
  background:rgba(255,255,255,.04)!important;
  border:1px solid rgba(255,255,255,.045)!important;
}
.mkv-footer-rayo-three__contactline > span{
  color:var(--mkv-footer-three-accent,#5362D5)!important;
  font-size:1.05rem!important;
}
.mkv-footer-rayo-three__contactline strong{
  font-size:clamp(1rem,1.25vw,1.22rem)!important;
  line-height:1.18!important;
  font-weight:500!important;
  letter-spacing:-.025em!important;
}
.mkv-footer-rayo-three__subscribe{
  flex:1!important;
  min-height:12.5rem!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:space-between!important;
  margin-top:.05rem!important;
  padding:1.65rem 1.55rem 1.3rem!important;
  border-radius:1.05rem!important;
  background:rgba(255,255,255,.04)!important;
  border:1px solid rgba(255,255,255,.045)!important;
}
.mkv-footer-rayo-three__subscribe label{
  max-width:17ch!important;
  color:#f4f4f6!important;
  font-size:clamp(1.2rem,1.55vw,1.55rem)!important;
  line-height:1.05!important;
  letter-spacing:-.038em!important;
  font-weight:500!important;
}
.mkv-footer-rayo-three__subscribe > div{
  display:flex!important;
  align-items:center!important;
  border-bottom:1px solid rgba(244,244,246,.42)!important;
}
.mkv-footer-rayo-three__subscribe input{
  flex:1!important;
  min-width:0!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  color:#fff!important;
  padding:.9rem 0!important;
  font:inherit!important;
}
.mkv-footer-rayo-three__subscribe input::placeholder{color:rgba(244,244,246,.42)!important}
.mkv-footer-rayo-three__subscribe button{
  width:2.7rem!important;
  height:2.7rem!important;
  flex:0 0 auto!important;
  display:grid!important;
  place-items:center!important;
  border:0!important;
  padding:0!important;
  background:transparent!important;
  color:#fff!important;
  cursor:pointer!important;
}
.mkv-footer-rayo-three__subscribe button svg{width:1.35rem!important;height:1.35rem!important}
.mkv-footer-rayo-three__ecosystem h3{
  margin:0 0 1.65rem!important;
  color:#f4f4f6!important;
  font-size:clamp(1.45rem,1.9vw,2rem)!important;
  line-height:1!important;
  letter-spacing:-.045em!important;
  font-weight:500!important;
}
.mkv-footer-rayo-three__ecosystem nav{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:.58rem!important;
}
.mkv-footer-rayo-three__ecosystem nav a{
  font-size:clamp(1rem,1.2vw,1.2rem)!important;
  line-height:1.18!important;
  letter-spacing:-.025em!important;
}
.mkv-footer-rayo-three__meta{
  margin-top:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:1rem!important;
  padding-top:2rem!important;
  color:rgba(244,244,246,.42)!important;
  font-size:.8rem!important;
}
.mkv-footer-rayo-three__meta button{
  display:inline-flex!important;
  align-items:center!important;
  gap:.55rem!important;
  border:0!important;
  padding:0!important;
  background:transparent!important;
  color:inherit!important;
  font:inherit!important;
  cursor:pointer!important;
}
.mkv-footer-rayo-three__meta button:hover{color:#fff!important}
.mkv-footer-rayo-three__meta button svg{width:1.35rem!important;height:1.35rem!important}

@media(max-width:980px){
  .mkv-footer-rayo-three{grid-template-columns:1fr 1fr!important}
  .mkv-footer-rayo-three__ecosystem{grid-column:1/-1!important;min-height:20rem!important}
  .mkv-footer-rayo-three__ecosystem nav{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important}
}
@media(max-width:700px){
  .mkv-footer-rayo-three{grid-template-columns:1fr!important}
  .mkv-footer-rayo-three__card{min-height:auto!important;padding:1.45rem!important;border-radius:1.15rem!important}
  .mkv-footer-rayo-three__nav{min-height:26rem!important}
  .mkv-footer-rayo-three__contact{min-height:29rem!important}
  .mkv-footer-rayo-three__ecosystem{grid-column:auto!important;min-height:21rem!important}
  .mkv-footer-rayo-three__navlinks a{font-size:1.55rem!important}
  .mkv-footer-rayo-three__ecosystem nav{grid-template-columns:1fr 1fr!important}
}


/* =========================================================
   v147 — Funkhaus footer polish + passive strip drift + status pulse
   ========================================================= */
/* Headericons: iets groter en zonder middelpunt in de menuknop. */
.mkv-menu-morph,.mkv-project-morph{width:28px!important;height:28px!important}
.menu-plus>.mkv-menu-morph{width:28px!important;height:28px!important}
.fh-header--right__contact .mkv-project-morph{flex:0 0 28px!important}
[data-menu-dot]{display:none!important}

/* Beschikbaarheid in het geopende menu: groen = ruimte, rood = vol. */
.mkv-menu-meta .mkv-menu-availability{position:relative!important;display:flex!important;align-items:center!important;gap:.55rem!important}
.mkv-menu-meta .mkv-menu-availability i{width:.52rem!important;height:.52rem!important;flex:0 0 .52rem!important;border-radius:50%!important;background:var(--mkv-availability-color,#55d98b)!important;animation:mkvAvailabilityPulse 1.8s ease-out infinite!important}
.mkv-menu-meta .mkv-menu-availability[data-availability="available"]{--mkv-availability-color:#55d98b}
.mkv-menu-meta .mkv-menu-availability[data-availability="unavailable"]{--mkv-availability-color:#ef6262}
@keyframes mkvAvailabilityPulse{0%{box-shadow:0 0 0 0 var(--mkv-availability-color);transform:scale(.92)}55%{box-shadow:0 0 0 .46rem transparent;transform:scale(1)}100%{box-shadow:0 0 0 .46rem transparent;transform:scale(.92)}}

/* De drie footer-kolommen gebruiken opnieuw de exacte Funkhaus-boxlogica:
   backdrop blur, subtle-dark2, originele radius/padding en Matter-ritme. */
.fh-footer.mkv-footer-rayo-three-shell .fh-section--footer-menu{padding-top:0!important}
.mkv-footer-rayo-three{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)!important;
  gap:var(--spacing-s)!important;
  align-items:stretch!important;
}
.mkv-footer-rayo-three__card{
  min-height:clamp(29rem,31vw,34rem)!important;
  padding:var(--spacing-l)!important;
  border-radius:var(--border-radius-box)!important;
  background-color:var(--subtle-dark2,#1b1b23)!important;
  border:0!important;
  -webkit-backdrop-filter:blur(20px)!important;
  backdrop-filter:blur(20px)!important;
  gap:var(--spacing-s)!important;
  font-family:inherit!important;
}
/* Middenkolom heeft bewust GEEN extra blok achter de drie Funkhaus-blokken. */
.mkv-footer-rayo-three__contact{
  min-height:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  overflow:visible!important;
  gap:var(--spacing-s)!important;
}
.mkv-footer-rayo-three__contactline,
.mkv-footer-rayo-three__subscribe{
  background-color:var(--subtle-dark2,#1b1b23)!important;
  border:0!important;
  border-radius:var(--border-radius-box)!important;
  -webkit-backdrop-filter:blur(20px)!important;
  backdrop-filter:blur(20px)!important;
}
.mkv-footer-rayo-three__contactline{
  min-height:0!important;
  flex:0 0 auto!important;
  padding:var(--spacing-l)!important;
  gap:var(--spacing-s)!important;
}
.mkv-footer-rayo-three__contactline>span{
  color:#fff!important;
  font-size:1.05rem!important;
  line-height:1!important;
}
.mkv-footer-rayo-three__contactline strong{
  font-size:clamp(1rem,1.16vw,1.18rem)!important;
  line-height:1.22!important;
  font-weight:400!important;
  letter-spacing:-.02em!important;
}
.mkv-footer-rayo-three__subscribe{
  flex:1 1 auto!important;
  min-height:14rem!important;
  margin:0!important;
  padding:var(--spacing-l)!important;
}
.mkv-footer-rayo-three__subscribe label{
  max-width:none!important;
  font-size:clamp(1.3rem,1.55vw,1.65rem)!important;
  line-height:1.12!important;
  letter-spacing:-.035em!important;
  font-weight:400!important;
}
.mkv-footer-rayo-three__subscribe input{
  font-size:1rem!important;
  line-height:1.25!important;
  font-weight:400!important;
}
.mkv-footer-rayo-three__navlinks{gap:.52rem!important}
.mkv-footer-rayo-three__navlinks a{
  font-size:clamp(1.55rem,1.82vw,2rem)!important;
  line-height:1.12!important;
  letter-spacing:-.035em!important;
  font-weight:400!important;
}
/* Projectbadge = originele Funkhaus footer-link-label: outlined, geen gevulde pill. */
.mkv-footer-rayo-three__navlinks sup{
  min-width:auto!important;
  height:auto!important;
  padding:.18rem .52rem .2rem!important;
  margin-left:var(--spacing-s)!important;
  border:1px solid var(--mkv-footer-three-accent,#5362D5)!important;
  border-radius:var(--border-radius-box)!important;
  background:transparent!important;
  color:#fff!important;
  font-size:.48em!important;
  line-height:1.05!important;
  font-weight:400!important;
  letter-spacing:.025em!important;
  transform:translateY(-.08em)!important;
}
/* Privacy / Bedrijfsgegevens op exact dezelfde ingetogen plek als de/en. */
.mkv-footer-rayo-three__legal{
  margin-top:auto!important;
  padding-top:var(--spacing-l)!important;
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:0!important;
  opacity:.48!important;
}
.mkv-footer-rayo-three__legal a{
  color:#fff!important;
  font-size:clamp(.78rem,.9vw,.92rem)!important;
  line-height:1.25!important;
  font-weight:400!important;
  letter-spacing:-.015em!important;
  opacity:1!important;
}
.mkv-footer-rayo-three__legal a+a:before{content:" / ";display:inline-block;margin:0 .34rem;color:#fff;opacity:.8}
.mkv-footer-rayo-three__legal:hover{opacity:1!important}
.mkv-footer-rayo-three__ecosystem h3{
  margin:0 0 var(--spacing-m)!important;
  font-size:clamp(1.35rem,1.55vw,1.65rem)!important;
  line-height:1.12!important;
  letter-spacing:-.03em!important;
  font-weight:400!important;
}
.mkv-footer-rayo-three__ecosystem nav{gap:.62rem!important}
.mkv-footer-rayo-three__ecosystem nav a{
  font-size:clamp(1rem,1.18vw,1.18rem)!important;
  line-height:1.28!important;
  letter-spacing:-.02em!important;
  font-weight:400!important;
}
.mkv-footer-rayo-three__meta{
  font-size:clamp(.75rem,.85vw,.86rem)!important;
  line-height:1.25!important;
  font-weight:400!important;
  letter-spacing:-.012em!important;
  opacity:.58!important;
}
@media(max-width:980px){
  .mkv-footer-rayo-three{grid-template-columns:1fr 1fr!important}
  .mkv-footer-rayo-three__contact{min-height:29rem!important}
  .mkv-footer-rayo-three__ecosystem{grid-column:1/-1!important}
}
@media(max-width:700px){
  .mkv-footer-rayo-three{grid-template-columns:1fr!important}
  .mkv-footer-rayo-three__card{padding:var(--spacing-l)!important}
  .mkv-footer-rayo-three__contact{min-height:0!important}
  .mkv-footer-rayo-three__navlinks a{font-size:1.6rem!important}
}


/* =========================================================
   v148 — exact Funkhaus footer typography + reference icons
   ========================================================= */
/* The original Funkhaus footer inherits Matter from body and uses the same
   global type tokens as the rest of the site. No custom tracking. */
.fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three,
.fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three a,
.fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three button,
.fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three input,
.fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three label,
.fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three strong,
.fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three h3{
  font-family:Matter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif!important;
  font-weight:400!important;
  letter-spacing:0!important;
}
/* Original Funkhaus left footer links are btn-secondary > p:
   p = var(--font--m), 140%, weight 400, tracking 0. */
.fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three__navlinks{
  gap:var(--spacing-s)!important;
}
.fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three__navlinks a{
  font-size:var(--font--m)!important;
  line-height:140%!important;
  font-weight:400!important;
  letter-spacing:0!important;
}
/* Exact original footer-link-label proportions. */
.fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three__navlinks sup{
  align-self:center!important;
  border-radius:var(--border-radius-box)!important;
  font-size:.6em!important;
  letter-spacing:.025em!important;
  line-height:130%!important;
  margin-left:var(--spacing-s)!important;
  padding:.25rem var(--spacing-s)!important;
  vertical-align:top!important;
  transform:none!important;
  background:transparent!important;
  border:1px solid var(--mkv-footer-three-accent,#5362D5)!important;
  color:var(--white,#fefefe)!important;
}
@media(min-width:1200px){
  .fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three__navlinks sup{font-size:.45em!important}
}
/* de/en equivalent: p-small = base. */
.fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three__legal{
  opacity:.4!important;
  gap:0!important;
}
.fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three__legal a{
  font-size:var(--font--base)!important;
  line-height:140%!important;
  font-weight:400!important;
  letter-spacing:0!important;
  color:var(--white,#fefefe)!important;
}
/* Funkhaus center contact blocks are unstyled buttons at base size. */
.fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three__contactline{
  gap:var(--spacing-s)!important;
  color:var(--white,#fefefe)!important;
}
.fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three__contactline strong{
  font-size:var(--font--base)!important;
  line-height:140%!important;
  font-weight:400!important;
  letter-spacing:0!important;
}
.fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three__contacticon{
  width:22px!important;
  height:22px!important;
  flex:0 0 22px!important;
  color:var(--mkv-footer-three-accent,#5362D5)!important;
  overflow:visible!important;
}
.fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three__contacticon path{
  stroke-width:1px!important;
}
/* Get Updates follows the same Funkhaus p rhythm. */
.fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three__subscribe label{
  font-size:var(--font--m)!important;
  line-height:140%!important;
  font-weight:400!important;
  letter-spacing:0!important;
}
.fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three__subscribe input{
  font-family:Matter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif!important;
  font-size:var(--font--base)!important;
  line-height:140%!important;
  font-weight:400!important;
  letter-spacing:0!important;
}
/* Original right box: Connect = normal p, links = p-small. */
.fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three__ecosystem h3{
  font-size:var(--font--m)!important;
  line-height:140%!important;
  font-weight:400!important;
  letter-spacing:0!important;
  margin:0 0 var(--spacing-m)!important;
}
.fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three__ecosystem nav{
  gap:var(--spacing-s)!important;
}
.fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three__ecosystem nav a{
  font-size:var(--font--base)!important;
  line-height:140%!important;
  font-weight:400!important;
  letter-spacing:0!important;
}
.fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three__meta{
  font-family:Matter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif!important;
  font-size:var(--font--base)!important;
  line-height:140%!important;
  letter-spacing:0!important;
  font-weight:400!important;
  opacity:.4!important;
}
/* Rayo-style scroll-top: single circular action, recolored to MK Vision. */
.fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three__meta button[data-mkv-scroll-top]{
  width:3rem!important;
  height:3rem!important;
  flex:0 0 3rem!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  border:0!important;
  border-radius:50%!important;
  background:var(--mkv-footer-three-accent,#5362D5)!important;
  color:#fff!important;
  opacity:1!important;
  box-shadow:none!important;
  transition:transform .35s var(--bezier-smooth),background-color .35s var(--bezier-smooth)!important;
}
.fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three__meta button[data-mkv-scroll-top]:hover,
.fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three__meta button[data-mkv-scroll-top]:focus-visible{
  transform:translateY(-.18rem)!important;
  background:#6573e1!important;
  color:#fff!important;
}
.fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three__meta button[data-mkv-scroll-top] svg{
  width:1.35rem!important;
  height:1.35rem!important;
  overflow:visible!important;
}
@media(max-width:700px){
  .fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three__navlinks a{font-size:var(--font--m)!important}
  .fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three__meta button[data-mkv-scroll-top]{width:2.8rem!important;height:2.8rem!important;flex-basis:2.8rem!important}
}

/* ======================================================================
   MK Vision v149 — availability footer, underline motion & clean strips
   ====================================================================== */

/* Project/beeldstroken hebben geen voortgangslijn meer. De navigatie blijft
   als losse knoppen beschikbaar en de strip drijft zelf langzaam door. */
.mkv-project-breakout-progress{display:none!important}
.mkv-project-breakout{position:relative!important}

/* De nieuwsbrief is vervangen door de CMS-beschikbaarheid. */
.fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three__availability{
  flex:1 1 auto!important;
  min-height:14rem!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:space-between!important;
  gap:var(--spacing-l)!important;
  padding:var(--spacing-l)!important;
  background-color:var(--subtle-dark2,#1b1b23)!important;
  border-radius:var(--border-radius-box)!important;
  -webkit-backdrop-filter:blur(20px)!important;
  backdrop-filter:blur(20px)!important;
  --mkv-availability-color:#55d98b;
}
.fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three__availability[data-availability="unavailable"]{--mkv-availability-color:#ef6262}
.fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three__availability>span{
  font-family:Matter,ui-sans-serif,system-ui,sans-serif!important;
  font-size:var(--font--base)!important;
  line-height:140%!important;
  letter-spacing:0!important;
  font-weight:400!important;
  color:#fff!important;
  opacity:.4!important;
}
.fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three__availability strong{
  display:flex!important;
  align-items:center!important;
  gap:.72rem!important;
  max-width:18ch!important;
  font-family:Matter,ui-sans-serif,system-ui,sans-serif!important;
  font-size:var(--font--m)!important;
  line-height:140%!important;
  letter-spacing:0!important;
  font-weight:400!important;
  color:#fff!important;
}
.fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three__availability strong i{
  width:.58rem!important;height:.58rem!important;flex:0 0 .58rem!important;border-radius:50%!important;
  background:var(--mkv-availability-color)!important;
  animation:mkvAvailabilityPulse 1.8s ease-out infinite!important;
}
.fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three__availability strong b{font:inherit!important;color:inherit!important}

/* Duidelijkere underline, maar nog steeds dun/Funkhaus. Het echte scaleX
   effect wordt door GSAP aangestuurd zodat active/hover na route-swap klopt. */
.fh-menu--items .fh-menu--link a.btn-link,
.fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three__legal a{
  position:relative!important;
  width:max-content!important;
  overflow:visible!important;
}
.mkv-link-underline{
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:-.12em!important;
  height:1.5px!important;
  display:block!important;
  background:var(--mkv-glow,var(--mkv-accent,#5362D5))!important;
  transform:scaleX(0);
  transform-origin:left center;
  pointer-events:none!important;
  opacity:1!important;
}
.fh-menu--items .fh-menu--link a.btn-link .mkv-link-underline{height:2px!important;bottom:-.16em!important;background:var(--mkv-glow,var(--mkv-accent,#5362D5))!important}
.fh-menu--items .fh-menu--link a.btn-link.router-link-active .mkv-link-underline,
.fh-menu--items .fh-menu--link a.btn-link[aria-current="page"] .mkv-link-underline{background:var(--mkv-glow,var(--mkv-accent,#5362D5))!important}

/* Back to top: grotere klikzone, tekstlabel én blauwe Rayo-achtige actie. */
.fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three__meta button[data-mkv-scroll-top]{
  width:auto!important;
  min-width:8.2rem!important;
  height:3.2rem!important;
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:.72rem!important;
  padding:.28rem .28rem .28rem 1rem!important;
  border:1px solid color-mix(in srgb,var(--mkv-footer-three-accent,#5362D5) 58%,transparent)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.035)!important;
  color:#fff!important;
  cursor:pointer!important;
  opacity:1!important;
}
.fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three__meta button[data-mkv-scroll-top]::before{
  content:"Naar boven";
  display:block;
  font-family:Matter,ui-sans-serif,system-ui,sans-serif;
  font-size:var(--font--base);
  line-height:1;
  font-weight:400;
  letter-spacing:0;
  white-space:nowrap;
}
.fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three__meta button[data-mkv-scroll-top] svg{
  box-sizing:border-box!important;
  width:2.55rem!important;
  height:2.55rem!important;
  padding:.66rem!important;
  border-radius:50%!important;
  background:var(--mkv-footer-three-accent,#5362D5)!important;
  color:#fff!important;
  transition:transform .35s var(--bezier-smooth),background-color .35s var(--bezier-smooth)!important;
}
.fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three__meta button[data-mkv-scroll-top]:hover,
.fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three__meta button[data-mkv-scroll-top]:focus-visible{
  transform:translateY(-.14rem)!important;
  background:rgba(83,98,213,.12)!important;
}
.fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three__meta button[data-mkv-scroll-top]:hover svg,
.fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three__meta button[data-mkv-scroll-top]:focus-visible svg{transform:translateY(-.12rem)!important;background:#6573e1!important}
@media(max-width:700px){
  .fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three__meta button[data-mkv-scroll-top]{min-width:7.6rem!important;height:3rem!important}
  .fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three__meta button[data-mkv-scroll-top] svg{width:2.35rem!important;height:2.35rem!important}
}

/* ======================================================================
   MK Vision v150 — mobile viewport fixes + smooth Funkhaus project progress
   ====================================================================== */

/* Mobiel menu: laat de originele Funkhaus fullscreen-opbouw uit entry.css
   leidend. Alleen scroll-lock, safe-area en viewport-bounds worden bewaakt. */
@media(max-width:1199px){
  html.mkv-mobile-menu-open,
  html.mkv-mobile-menu-open body{overflow:hidden!important;overscroll-behavior:none!important}
  html.mkv-mobile-menu-open #scroller{overflow:hidden!important;overscroll-behavior:none!important}
  .header--wrapper .fh-header>.fh-header--left[data-mkv-header-brand="1"] .fh-menu{
    max-width:100%!important;min-width:0!important
  }
  .header--wrapper .fh-header>.fh-header--left[data-mkv-header-brand="1"] .fh-menu .fh-menu--items{
    width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;
    box-sizing:border-box!important;
    padding-top:max(3em,env(safe-area-inset-top))!important;
    padding-right:max(3em,env(safe-area-inset-right))!important;
    padding-bottom:max(3em,env(safe-area-inset-bottom))!important;
    padding-left:max(3em,env(safe-area-inset-left))!important;
    overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain!important;
    scrollbar-width:none!important
  }
  .header--wrapper .fh-header>.fh-header--left[data-mkv-header-brand="1"] .fh-menu .fh-menu--items::-webkit-scrollbar{display:none!important}
  .fh-menu .fh-menu--items .fh-menu--link{max-width:100%!important;min-width:0!important}
  .fh-menu .fh-menu--items .fh-menu--link .btn-link{max-width:100%!important;min-width:0!important}
  .fh-menu .fh-menu--items .fh-menu--link p{max-width:100%!important;white-space:normal!important;overflow-wrap:break-word!important}
  .fh-menu .mkv-menu-meta{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important}
}

/* Werkwijze stacked cards: op telefoon één echte tekstkolom. Geen smalle tweede
   kolom waardoor koppen/paragraphs buiten kaart of viewport kunnen lopen. */
@media(max-width:767px){
  .mkv-journey-fh{padding-left:var(--spacing-m)!important;padding-right:var(--spacing-m)!important;overflow:visible!important}
  .mkv-journey-fh__steps{width:100%!important;max-width:100%!important}
  .mkv-journey-fh__step{
    width:100%!important;max-width:100%!important;min-width:0!important;height:auto!important;min-height:clamp(25rem,68svh,33rem)!important;
    grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto minmax(0,1fr)!important;gap:1rem!important;
    padding:clamp(1.35rem,5vw,1.7rem)!important;top:5.15rem!important;box-sizing:border-box!important
  }
  .mkv-journey-fh__num{grid-column:1!important;grid-row:1!important;align-self:start!important;min-width:0!important}
  .mkv-journey-fh__step h3{
    grid-column:1!important;grid-row:2!important;width:100%!important;max-width:100%!important;min-width:0!important;
    font-size:clamp(2.15rem,10.5vw,3.35rem)!important;line-height:.92!important;letter-spacing:-.045em!important;
    overflow-wrap:break-word!important;word-break:normal!important;hyphens:auto!important
  }
  .mkv-journey-fh__step p{
    grid-column:1!important;grid-row:3!important;width:100%!important;max-width:100%!important;min-width:0!important;align-self:end!important;
    margin:0!important;font-size:clamp(.95rem,4vw,1.08rem)!important;line-height:1.38!important;overflow-wrap:anywhere!important;word-break:normal!important
  }
}

/* Losse projecten: Funkhaus progressbar blijft actief, zonder de gewone
   beeldstroken op Werkwijze/Waarom wij aan een progress-indicator te koppelen. */
.page--project .mkv-project-breakout-progress{
  position:relative!important;display:flex!important;align-items:center!important;gap:0!important;
  width:100%!important;height:2px!important;min-height:2px!important;margin-top:var(--spacing-m)!important;padding:0 var(--spacing-xl)!important;
  box-sizing:border-box!important;background:transparent!important;border:0!important;box-shadow:none!important
}
.page--project .mkv-project-breakout-progress__track{
  position:relative!important;display:block!important;flex:1 1 auto!important;width:auto!important;height:2px!important;min-height:2px!important;
  overflow:hidden!important;border-radius:999px!important;background:transparent!important
}
.page--project .mkv-project-breakout-progress__track>i{
  position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;
  background:linear-gradient(90deg,var(--mkv-carousel-accent,#5362D5),#8993ff)!important;transform:scaleX(0);transform-origin:left center!important;will-change:transform
}
.mkv-project-breakout-track{scroll-behavior:auto!important;overscroll-behavior-x:contain!important;-webkit-overflow-scrolling:touch!important}
.mkv-project-breakout-track.is-dragging{scroll-snap-type:none!important;cursor:grabbing!important}
@media(max-width:767px){
  .page--project .mkv-project-breakout-progress{padding-left:var(--spacing-m)!important;padding-right:var(--spacing-m)!important;gap:0!important}
  .page--project .mkv-project-breakout-progress__track{height:2px!important}
}

/* ======================================================================
   MK Vision v151 — truly equal footer widths
   ====================================================================== */
@media(max-width:700px){
  .fh-footer.mkv-footer-rayo-three-shell .fh-section--footer-menu .fh-layout--width-normal.fh-layout{
    width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important
  }
  .fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three{
    display:flex!important;flex-direction:column!important;align-items:stretch!important;
    width:100%!important;max-width:100%!important;min-width:0!important;
    margin:0!important;padding:0 0 var(--spacing-m)!important;gap:var(--spacing-s)!important;box-sizing:border-box!important
  }
  .fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three > .mkv-footer-rayo-three__nav,
  .fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three > .mkv-footer-rayo-three__contact,
  .fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three > .mkv-footer-rayo-three__ecosystem{
    display:flex!important;flex-direction:column!important;align-self:stretch!important;
    width:100%!important;max-width:100%!important;min-width:0!important;flex:0 0 auto!important;
    margin:0!important;box-sizing:border-box!important
  }
  .fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three__nav,
  .fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three__ecosystem{padding:var(--spacing-l)!important}
  .fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three__contact{
    padding:0!important;gap:var(--spacing-s)!important;align-items:stretch!important
  }
  .fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three__contact > .mkv-footer-rayo-three__contactline,
  .fh-footer.mkv-footer-rayo-three-shell .mkv-footer-rayo-three__contact > .mkv-footer-rayo-three__availability{
    align-self:stretch!important;width:100%!important;max-width:100%!important;min-width:0!important;
    margin:0!important;box-sizing:border-box!important
  }
}

/* v164 — hero renderers are mutually exclusive. Flowty flow/subtle/off never
   expose the Rayo hero WebGL canvas, including stale SPA/browser markup. */

/* v165 — Flowty hero is een expliciete DOM-laag. Hierdoor kan geen legacy/WebGL
   canvas de gekozen Flowty-gradient visueel overrulen. */
.hero-model-wrapper>.mkv-flowty-hero-layer{position:absolute;inset:-8%;z-index:0;pointer-events:none;overflow:hidden;background-color:var(--mkv-hero-motion-bg,#0A0A12);background-image:radial-gradient(88% 76% at 7% 6%,var(--mkv-flowty-hero-1,#5362D5) 0%,transparent 68%),radial-gradient(82% 74% at 94% 16%,var(--mkv-flowty-hero-2,#8981EE) 0%,transparent 70%),radial-gradient(86% 80% at 56% 98%,var(--mkv-flowty-hero-3,#EB6273) 0%,transparent 72%);background-size:145% 145%,150% 150%,145% 145%;animation:mkvHeroFlowLayer 11s cubic-bezier(.45,0,.55,1) infinite alternate;transform:translate3d(0,0,0) scale(1.04);will-change:background-position,transform}
.hero-model-wrapper>.mkv-flowty-hero-layer--subtle{opacity:.58;filter:saturate(.78) brightness(.82)}
@keyframes mkvHeroFlowLayer{0%{background-position:0% 0%,100% 10%,45% 100%;transform:translate3d(-1.5%,-1%,0) scale(1.04)}50%{background-position:18% 12%,82% 28%,62% 84%;transform:translate3d(1%,1.5%,0) scale(1.07)}100%{background-position:8% 24%,96% 2%,35% 78%;transform:translate3d(2%,-1%,0) scale(1.05)}}
@media(prefers-reduced-motion:reduce){.hero-model-wrapper>.mkv-flowty-hero-layer{animation:none}}
.hero-model-wrapper[data-mkv-hero-motion="flow"] canvas.mkv-rayo-hero-gl,
.hero-model-wrapper[data-mkv-hero-motion="subtle"] canvas.mkv-rayo-hero-gl,
.hero-model-wrapper[data-mkv-hero-motion="off"] canvas.mkv-rayo-hero-gl{display:none!important;visibility:hidden!important;opacity:0!important}