/* MK Vision — eigen styles bovenop de MK Vision-basisstylesheet.
   Alles wat door GSAP wordt geanimeerd heeft hier alleen een BEGINSTAAT,
   geen CSS-transition: anders vechten CSS en GSAP om dezelfde property.   */

/* MK Vision gebruikt de native View Transition-laag. */
@view-transition { navigation: auto; }
[data-cms-no-image] { display:none!important; }
.mkv-skip-intro .loader-wrapper { display: none !important; }
::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
::view-transition { }
::view-transition-group(root) { z-index: auto !important; }
::view-transition-image-pair(root) { isolation: isolate; will-change: transform, opacity, clip-path; z-index: 1; }
::view-transition-new(root) { z-index: 10000; border-radius: 4rem; overflow: hidden; will-change: transform, border-radius; }
::view-transition-old(root) { z-index: 1; will-change: transform, filter; }

/* ================================================================= Font */
/* De basis-stylesheet zet --default-font-family op var(--font-sans); MK Vision
   levert Inter aan via een Next-font-module-class die de scrape kwijtraakte.
   Hier zetten we Inter alsnog als de globale sans.                        */
:root, html {
  --font-sans: Inter, "Inter Fallback", ui-sans-serif, system-ui, sans-serif;
  --default-font-family: var(--font-sans);
}
body { font-family: var(--font-sans); }

/* ================================================================= Logo */
.mkv-logo { width: 9.25rem; height: auto; display: block; }
@media (min-width: 1024px) { .mkv-logo { width: 15rem; } }
@media (max-width: 1023px) {
  header button[aria-controls="site-menu"] { padding: .45rem !important; }
  header button[aria-controls="site-menu"] > span:first-child { padding-top: .22rem; padding-bottom: .22rem; }
}

/* ================================================================ Lenis */
/* De basis-stylesheet zet html{overflow-x:hidden}; daardoor wordt overflow-y
   óók een scrollcontainer met 'hidden' en werkt wielscrollen niet meer.
   overflow-x:clip knipt horizontaal af zónder de verticale as te blokkeren. */
html { overflow-x: clip; overflow-y: auto; }
body { overflow-x: clip; }

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
html.mkv-locked, html.mkv-locked body { overflow: hidden; }
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ============================================================== Loader */
.loader-wrapper { position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center; overflow: hidden; user-select: none; }
.loader-wrapper .logo-wrapper { display: flex; align-items: center; justify-content: center; width: 6rem; }
@media (min-width: 1024px) { .loader-wrapper .logo-wrapper { width: 11rem; } }
/* brightness(0) invert(1) maakt het icoon zuiver wit met behoud van alpha */
.loader-wrapper .logo-svg { display: block; width: 100%; height: auto; opacity: 0; transform: scale(.75) rotate(120deg); will-change: transform, opacity; filter: brightness(0) invert(1); }
html.mkv-js .loader-wrapper { display: flex; }
.no-js .loader-wrapper { display: none; }

/* ========================================================== Beginstaten */
.hero-anim-in { opacity: 0; }
.tt-sub-in { opacity: 0; }
.hero-in-line { will-change: transform; }
.footer-letter { transform: translateY(100%); }
.footer-extension { transform: translateY(-100%); }
.cta-anim { opacity: 0; }

/* Zonder JS blijft alles gewoon zichtbaar */
html:not(.mkv-js) .hero-anim-in,
html:not(.mkv-js) .tt-sub-in,
html:not(.mkv-js) .cta-anim { opacity: 1; }
html:not(.mkv-js) .footer-letter,
html:not(.mkv-js) .footer-extension { transform: none; }

/* ================================================ Diensten: pinned stack */
.service-items-wrapper { position: relative; }
@media (max-width: 1023px) {
  .service-items-wrapper { display: flex !important; height: auto !important; }
  .service-item {
    position: relative !important; inset: auto !important;
    clip-path: none !important; opacity: 1 !important; flex: 0 0 auto;
  }
.mkv-hero__visual {
    position: absolute;
    z-index: 1;
    right: 5%;
    bottom: 2%!important;
    width: 40vw!important;
    height: auto;
    max-width: none;
    pointer-events: none;
}
  html:not(.mkv-js) .service-item { transform: none !important; }

  /* Op mobiel toont Sohub in de onderste footerbalk alleen de chatknop. */
  .footer-extension > div:first-child,
  .footer-extension [data-goup] { display: none !important; }
  .footer-extension { justify-content: center !important; }
}
@media (min-width: 1024px) {
  .service-item { position: absolute; inset: 0 0 auto 0; }
}

/* ============================================================ Scrollbar */
.mkv-scrollbar {
  position: fixed; top: 40vh; right: 16px; width: 6px; height: 20vh;
  border-radius: 3px; background: rgba(0,0,0,.1); z-index: 9000;
  overflow: hidden; pointer-events: none; transition: opacity .3s ease;
}
.mkv-scrollbar__thumb {
  position: absolute; left: 0; top: 0; width: 100%; border-radius: 999px;
  background: #0B0F14; will-change: transform;
}
.workpage .mkv-scrollbar { background: rgba(240, 246, 248, .12); }
.workpage .mkv-scrollbar__thumb { background: #F0F6F8; }
@media (max-width: 812px) { .mkv-scrollbar { width: 2px; right: 6px; border-radius: 1px; } }

/* ================================================================= Menu */
nav#site-menu { transform-origin: center; }
@media (min-width: 1024px) { nav#site-menu { position: fixed; right: 3rem; top: 8rem; width: min(34rem, 90vw); } }

/* ================================================================= Hero */
.mkv-hero { position: relative; width: 100%; overflow: hidden; height: 40vh; }
.mkv-hero--short { height: 40vh; }
@media (min-width: 1024px) { .mkv-hero { height: 100vh; } .mkv-hero--short { height: 78vh; } }
.mkv-hero__visual { position: absolute; z-index: 1; right: 5%; bottom: 8%; width: 26vw; height: auto; max-width: none; pointer-events: none; }
.mkv-hero__visual-image { display: block; width: 100%; height: auto; object-fit: contain; will-change: transform; animation: mkv-float 6s linear infinite; }
@keyframes mkv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1rem); } }
@media (min-width: 1024px) {
  .mkv-hero__visual { right: 3%; bottom: 8%; width: auto; height: 66%; max-width: 42vw; }
  .mkv-hero__visual-image { width: auto; height: 100%; }
  .home-hero .mkv-hero__visual { right: 22%; bottom: 10%; width: 22vw; height: auto; max-width: none; }
  .home-hero .mkv-hero__visual-image { width: 100%; height: auto; }
  .workflow-hero .mkv-hero__visual { right: 5%; bottom: 10%; height: 62%; max-width: 38vw; }
  .workflow-hero .mkv-hero__visual-image { mix-blend-mode: normal; }
  .why-hero .mkv-hero__visual { right: 5%; bottom: 8%; height: 60%; max-width: 36vw; }
}
@media (min-width: 1280px) { .home-hero .mkv-hero__visual { right: 22%; } }
.mkv-hero__copy { position: absolute; z-index: 2; left: 1rem; right: 1rem; bottom: 0; display: flex; flex-direction: column; gap: .75rem; }
@media (min-width: 1024px) { .mkv-hero__copy { left: 3rem; right: 3rem; bottom: 22%; gap: 1.5rem; } }

/* Groot displaytype, in de maatvoering van het originele hero-woordmerk. */
.mkv-hero__display {
  font-size: clamp(3rem, 13.5vw, 15rem);
  line-height: .82;
  letter-spacing: -.055em;
  font-weight: 600;
  color: #0C1016;
  margin: 0;
}
.mkv-hero__display .hero-in-line { display: block; }
.mkv-hero__sub { font-size: clamp(1.15rem, 3.4vw, 3.5rem); line-height: 1; font-weight: 600; letter-spacing: -.03em; color: #0C1016; }
.home-hero .mkv-hero__visual { z-index: 3; }
.mkv-hero__scroll { position: absolute; z-index: 2; right: 1rem; bottom: 1.5rem; display: none; }
@media (min-width: 1024px) { .mkv-hero__scroll { display: block; right: 3rem; bottom: 13%; } }
.mkv-kicker { font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #8C949B; }
@media (min-width: 1024px) { .mkv-kicker { font-size: 1.5rem; } }

/* =============================================================== Footer */
/* MK Vision-footeropzet, typografie en social-knoppen:
   donker paneel, tracking-5/-7, dezelfde tekstgroottes als de secties.     */
.mkv-footer { position: relative; overflow: hidden; background: #0C1016; color: #F0F6F8; border-radius: 1.5rem; padding: 3rem 1.5rem 2rem;
  font-family: var(--font-sans); }
@media (min-width: 1024px) { .mkv-footer { border-radius: 1.5rem; padding: 5rem 4rem 2.5rem; } }
.mkv-footer__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem;
  font-size: 1.125rem; line-height: 1.35; letter-spacing: -.02em; font-weight: 500; }
.mkv-footer__grid, .mkv-footer__statement, .mkv-footer__socialrow, .mkv-footer__bottom { position: relative; z-index: 1; }
.mkv-footer__visual { position: absolute; z-index: 0; right: -8%; top: 12%; width: min(42vw, 34rem); height: auto; opacity: .16; pointer-events: none;display:none; }
@media (max-width: 767px) { .mkv-footer__visual { right: -32%; top: 32%; width: 95vw; opacity: .12; } }
@media (min-width: 768px) { .mkv-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mkv-footer__grid { gap: 4rem; font-size: 1.5rem; } }
.mkv-footer__grid > * { text-align: center; justify-self: center; }
.mkv-footer__grid > div > a { margin-inline: auto; }
.mkv-footer__addr { text-decoration: none; color: inherit; display: block; }
.mkv-footer__addr div { display: block; }
.mkv-footer__label { color: #8C949B; margin-bottom: .6rem; display: block;
  font-size: .875rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
@media (min-width: 1024px) { .mkv-footer__label { font-size: 1rem; } }
.mkv-footer__link { color: inherit; text-decoration: none; display: block; width: fit-content; transition: color .3s ease; }
.mkv-footer__link:hover { color: #8C949B; }
.mkv-footer__statement { margin-top: 4rem; display: flex; flex-direction: column; align-items: center; text-align: center; }
.mkv-footer__statement span { display: block; font-size: 1.875rem; line-height: 1; letter-spacing: -.05em; font-weight: 600; }
@media (min-width: 768px) { .mkv-footer__statement span { font-size: 3rem; } }
@media (min-width: 1024px) { .mkv-footer__statement span { font-size: 3.75rem; } }
@media (min-width: 1536px) { .mkv-footer__statement span { font-size: 5rem; } }
.mkv-footer__statement span + span { color: #8C949B; }
.mkv-footer__socialrow { margin-top: 2.5rem; display: flex; justify-content: center; }
@media (min-width: 1024px) { .mkv-footer__socialrow { margin-top: 4rem; } }
.mkv-footer__bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(240,246,248,.12);
  display: flex; flex-direction: column; align-items: flex-start; gap: .8rem;
  font-size: 1rem; color: #8C949B; letter-spacing: -.01em; }
@media (min-width: 1024px) { .mkv-footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; font-size: 1.125rem; } }
.mkv-footer__bottom a { color: inherit; text-decoration: none; }
.mkv-footer__bottom a:hover { color: #F0F6F8; }
.mkv-footer__status { display: inline-flex; align-items: center; gap: .55rem; }
.mkv-footer__status span { width: .55rem; height: .55rem; border-radius: 50%; background: #55c58a; box-shadow: 0 0 0 .25rem rgba(85,197,138,.12); }
/* ============================================ Diensten-pillen (zwaartekracht) */
.grav-container { position: relative; isolation: isolate; overflow: hidden; width: 100%; height: 100%; }
.grav-pill {
  position: absolute; top: 0; left: 0; display: block; border-radius: 999px;
  cursor: grab; user-select: none; touch-action: none; white-space: nowrap;
  color: #0C1016; will-change: transform;
  padding: .75rem 1.5rem; font-size: 1.5rem; letter-spacing: -.02em;
}
.grav-pill:active { cursor: grabbing; }
.grav-container--dense .grav-pill { padding:.6rem 1rem; font-size:1.05rem; }
@media (min-width: 1024px) { .grav-pill { padding: 1.2rem 3.75rem; font-size: clamp(2.1rem,2.45vw,2.8rem); } }
@media (min-width: 1024px) { .grav-container--dense .grav-pill { padding:.85rem 2rem; font-size:clamp(1.4rem,1.65vw,1.9rem); } }

/* ================================================== Team (was: careers) */
.team-bio { display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows .7s cubic-bezier(.22,.68,0,1), opacity .45s ease, margin .7s cubic-bezier(.22,.68,0,1); }
.team-bio > div { overflow: hidden; }
.career-item.is-open .team-bio { grid-template-rows: 1fr; opacity: 1; margin-top: .75rem; }
.career-item .more-arrow { transition: transform .5s cubic-bezier(.22,.68,0,1); }
.career-item.is-open .more-arrow { transform: rotate(135deg); }

/* ================================================================ FAQ */
.mkv-faq { padding: 5rem 1rem 2rem; background: #F0F6F8; color: #0C1016; }
.mkv-faq__intro { max-width: 1600px; margin: 0 auto 2.5rem; }
.mkv-faq__intro h2 { max-width: 70rem; margin: .8rem 0 0; font-size: clamp(2.45rem,6.2vw,6.5rem); line-height: .9; letter-spacing: -.06em; font-weight: 600; }
.mkv-faq__list { max-width: 1600px; margin: auto; display: grid; gap: .75rem; }
.mkv-faq__item { overflow: hidden; border-radius: 1.25rem; background: #D9E0E3; will-change:transform,opacity; }
.mkv-faq__question { width: 100%; min-height: 5.5rem; padding: 1.35rem 1.4rem; border: 0; background: transparent; color: inherit; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; text-align: left; cursor: pointer; }
.mkv-faq__question > span { font-size: clamp(1.15rem,2.25vw,2.35rem); line-height: 1.08; letter-spacing: -.04em; font-weight: 600; }
.mkv-faq__icon { position: relative; flex: 0 0 auto; width: 2.7rem; height: 2.7rem; border-radius: 50%; background: #1E232C; transition: transform .55s cubic-bezier(.22,.68,0,1.2), background-color .35s ease; }
.mkv-faq__icon::before,.mkv-faq__icon::after { content:""; position:absolute; left:50%; top:50%; width:1rem; height:2px; background:#F0F6F8; transform:translate(-50%,-50%); }
.mkv-faq__icon::after { transform:translate(-50%,-50%) rotate(90deg); transition:transform .45s cubic-bezier(.22,.68,0,1.2); }
.mkv-faq__answer { display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .7s cubic-bezier(.22,.68,0,1),opacity .45s ease; }
.mkv-faq__answer > div { overflow:hidden; }
.mkv-faq__answer-inner { max-width:70rem; padding:0 1.4rem 0; color:#5B646C; font-size:1.05rem; line-height:1.55; transition:padding .7s cubic-bezier(.22,.68,0,1); }
.mkv-faq__answer-inner p + p { margin-top:1rem; }
.mkv-faq__item.is-open .mkv-faq__answer { grid-template-rows:1fr; opacity:1; }
.mkv-faq__item.is-open .mkv-faq__answer-inner { padding-bottom:1.6rem; }
.mkv-faq__item.is-open .mkv-faq__icon { transform:rotate(90deg); }
.mkv-faq__item.is-open .mkv-faq__icon::after { transform:translate(-50%,-50%) rotate(180deg); }
@media (min-width:1024px) {
  .mkv-faq { padding: 9rem 3rem 4rem; }
  .mkv-faq__intro { margin-bottom: 4rem; }
  .mkv-faq__list { gap: 1rem; }
  .mkv-faq__item { border-radius: 1.8rem; }
  .mkv-faq__question { min-height: 8rem; padding: 2rem 2.5rem; }
  .mkv-faq__icon { width: 3.5rem; height: 3.5rem; }
  .mkv-faq__answer-inner { padding-inline: 2.5rem; font-size: 1.2rem; }
  .mkv-faq__item.is-open .mkv-faq__answer-inner { padding-bottom: 2.5rem; }
}

/* Portret op de plek van de oude Apply-knop; groeit mee bij openklappen. */
.team-photo {
  position: relative; overflow: hidden; border-radius: .75rem; flex: 0 0 auto;
  width: 5.5rem; height: 5.5rem;
  transition: width .7s cubic-bezier(.22,.68,0,1), height .7s cubic-bezier(.22,.68,0,1);
}
.team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block;
  transition: transform .7s cubic-bezier(.22,.68,0,1); }
.career-item.is-open .team-photo { width: 9rem; height: 12rem; }
@media (min-width: 1024px) {
  .team-photo { width: 11rem; height: 11rem; }
  .career-item.is-open .team-photo { width: 20rem; height: 26rem; }
}
.career-item.is-open .team-photo img { transform: scale(1.04); }

/* ============================================ Contact: stappen als MK Vision */
.mkv-cstep { display: none; width: 100%; flex-direction: column; align-items: center; gap: 1.5rem;
  padding: 3rem 1rem; }
@media (min-width: 1024px) { .mkv-cstep { padding: 4rem 3rem; } }
.mkv-cstep.is-active { display: flex; }
.mkv-cstep [data-cstep-panel] { opacity: 0; transform: translateY(3rem); }
html:not(.mkv-js) .mkv-cstep [data-cstep-panel] { opacity: 1; transform: none; }
.mkv-copt {
  padding: .75rem 1rem; border-radius: 999px; border: 0; cursor: pointer;
  font-size: .95rem; font-weight: 500; letter-spacing: -.03em; text-decoration: none;
  transition: transform .3s cubic-bezier(.22,.68,0,1.4), background-color .25s ease, color .25s ease;
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
}
.mkv-copt:hover { transform: scale(1.1); }
@media (min-width: 1024px) { .mkv-copt { padding: 1rem 3rem; font-size: 1.25rem; } }
.mkv-cerror { position: absolute; left: 50%; transform: translateX(-50%); top: 2rem;
  white-space: nowrap; font-size: 1rem; font-weight: 600; letter-spacing: -.02em; color: #ef4444;
  opacity: 0; transition: opacity .3s ease, transform .3s ease; pointer-events: none; z-index: 5; }
@media (min-width: 1024px) { .mkv-cerror { top: auto; bottom: 2rem; font-size: 1.25rem; } }
.mkv-cerror.is-visible { opacity: 1; }
.mkv-cback { position: absolute; left: 1rem; bottom: 1rem; background: none; border: 0; cursor: pointer;
  color: #5B646C; font-size: 1rem; font-weight: 600; letter-spacing: -.02em; transition: color .25s ease; }
@media (min-width: 1024px) { .mkv-cback { left: 2rem; bottom: 2rem; font-size: 1.125rem; } }
.mkv-cback:hover { color: #0C1016; }

/* ===================================== Projectenpagina: grid / lijstweergave */
.change-view-btn { border: 0; background: none; }
.change-view-btn .view-pill { opacity: 0; transition: opacity .25s ease; }
.change-view-btn.is-active .view-pill { opacity: 1; }
[data-view-stage] { transition: height .4s cubic-bezier(.22,.68,0,1); }
[data-view-stage] > [data-view] { top: 0; left: 0; }
.mkv-list-item { text-decoration: none; }

/* ============================================================ Showreel */
.mkv-reel-track { position: relative; display: flex; align-items: center; width: 100%; height: 18px; cursor: pointer; touch-action: none; user-select: none; }
.mkv-reel-rail { position: relative; height: 4px; width: 100%; border-radius: 999px; overflow: hidden; background-color: #fcfcfc30; }
.mkv-reel-fill { display: block; height: 100%; width: 0; background: #F0F6F8; border-radius: 999px; }
.mkv-reel-thumb { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin-left: -6px;
  border-radius: 999px; background: #F0F6F8; transform: translateY(-50%); pointer-events: none; }
.mkv-reel-btn { background: none; border: 0; cursor: pointer; color: inherit; display: flex; align-items: center;
  transition: transform .25s ease; }
.mkv-reel-btn:hover { transform: scale(1.15); }

/* ================================================ Projectkaart-hovers */
.mkv-project .arrow-svg { transition: transform .5s cubic-bezier(.22,.68,0,1); }
.mkv-project:hover .arrow-svg { transform: translateX(0); }
.mkv-project .title-div h2 { transition: transform .5s cubic-bezier(.22,.68,0,1); }
.mkv-project:hover .title-div h2 { transform: translateX(0); }
.mkv-project img { transition: transform .7s cubic-bezier(.22,.68,0,1); }
.mkv-project:hover img { transform: scale(1.04); }

/* ==================================================== Contactformulieren */
.mkv-form-shell { width: min(100%, 36.75rem); margin-inline: auto; display: grid; grid-template-columns: 1fr; gap: 1rem; }
.mkv-field--full { grid-column: 1 / -1; }
.mkv-field input, .mkv-field textarea, .mkv-field select {
  width: 100%; min-height: 4rem; border: 0; border-radius: 1rem;
  background: #C8CFD1; padding: 1rem 1.5rem; color: #0C1016;
  font: 500 1rem/1.4 var(--font-sans); outline: none;
  box-shadow: none; transition: background-color .2s ease, box-shadow .2s ease;
}
.mkv-field input::placeholder, .mkv-field textarea::placeholder { color: #0C1016; opacity: 1; }
.mkv-field input:hover, .mkv-field textarea:hover, .mkv-field select:hover { background: #D0D7D9; }
.mkv-field input:focus, .mkv-field textarea:focus, .mkv-field select:focus { background: #D0D7D9; box-shadow: 0 0 0 2px #0C1016; }
.mkv-field textarea { min-height: 9.75rem; resize: vertical; }
.mkv-field select { appearance: none; cursor: pointer; background-image: linear-gradient(45deg,transparent 50%,#0C1016 50%),linear-gradient(135deg,#0C1016 50%,transparent 50%);background-position:calc(100% - 1.4rem) 50%,calc(100% - 1rem) 50%;background-size:.45rem .45rem,.45rem .45rem;background-repeat:no-repeat; }
.mkv-choice-group { border: 0; padding: 1.25rem 1.5rem; border-radius: .75rem; background: #D9E0E3; }
.mkv-choice-group legend { font-weight: 600; padding-top: .5rem; }
.mkv-choice-group > div { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .75rem; }
.mkv-choice { display: inline-flex; align-items: center; gap: .55rem; padding: .75rem 1rem; border-radius: 999px; background: #F0F6F8; cursor: pointer; }
.mkv-choice input { width: auto; min-height: 0; padding: 0; }
@media (min-width: 1024px) {
  .mkv-form-shell { grid-template-columns: 1fr 1fr; }
  .mkv-field input { min-height: 4rem; font-size: 1.125rem; }
  .mkv-field textarea { min-height: 9.75rem; font-size: 1.125rem; }
}
.mkv-form-status { font-size: 1.05rem; font-weight: 500; }
.mkv-form-status.is-error { color: #C0392B; }
.mkv-form-status.is-ok { color: #1E8449; }
.mkv-price { width: min(100%, 44rem); display: flex; flex-direction: column; gap: 1.25rem; }
.mkv-price output { font-size: clamp(2.5rem, 7vw, 5rem); line-height: 1; font-weight: 600; letter-spacing: -.06em; color: #0C1016; text-align: center; }
.mkv-price input { width: 100%; accent-color: #0C1016; }
.mkv-price > div { display: flex; justify-content: space-between; color: #8C949B; font-weight: 600; }
@media (max-width:1023px) {
  [data-cstep-panel]:has(.mkv-price) { display:flex!important; width:100%!important; justify-content:center; }
  .mkv-price { width:min(100%,32rem); margin-inline:auto; }
}
.mkv-contact-card { position: relative; min-height: 12rem; text-decoration: none; overflow: hidden; }
.mkv-contact-card__icon {
  position: absolute; top: 1.25rem; right: 1.25rem; width: 3rem; height: 3rem;
  border-radius: 50%; background: #1E242C; color: #F0F6F8;
  display: flex; align-items: center; justify-content: center;
  transition: transform .35s cubic-bezier(.22,.68,0,1.5), background-color .2s ease;
}
.mkv-contact-card__icon svg { width: 1.25rem; height: 1.25rem; }
a.mkv-contact-card:hover .mkv-contact-card__icon { transform: rotate(8deg) scale(1.1); background: #333841; }
@media (min-width: 1024px) {
  .mkv-contact-card { min-height: 13rem; }
  .mkv-contact-card__icon { top: 1.75rem; right: 1.75rem; width: 3.5rem; height: 3.5rem; }
  .mkv-contact-card__icon svg { width: 1.5rem; height: 1.5rem; }
}

/* ======================================================= Doelgroepkaarten */
.mkv-audience-card {
  position: relative; min-height: 17rem; padding: 2rem; border-radius: 1.5rem;
  background: var(--cms-audience-bg, #D9E0E3); color: var(--cms-audience-text, inherit); display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden; transition: transform .35s cubic-bezier(.22,.68,0,1.2), background-color .25s ease;
}
.mkv-audience-card:hover { transform: translateY(-.35rem); background: var(--cms-audience-hover, #C8CFD1); }
.mkv-audience-card__icon {
  width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--cms-audience-icon-bg,#1E242C); color: var(--cms-audience-icon,#F0F6F8);
  display: flex; align-items: center; justify-content: center; align-self: flex-end;
}
.mkv-audience-card__icon svg { width: 1.55rem; height: 1.55rem; }
.mkv-audience-card h3 { font-size: clamp(2rem, 3.2vw, 4rem); line-height: .95; letter-spacing: -.06em; font-weight: 600; }
.mkv-audience-card p { max-width: 34rem; margin-top: 1.25rem; color: var(--cms-audience-muted, #5B646C); font-size: 1.125rem; line-height: 1.35; }
@media (min-width: 1024px) {
  .mkv-audience-card { min-height: 22rem; padding: 2.75rem; }
  .mkv-audience-card__icon { width: 4.25rem; height: 4.25rem; }
  .mkv-audience-card__icon svg { width: 1.85rem; height: 1.85rem; }
  .mkv-audience-card p { font-size: 1.35rem; }
}

/* ============================================================ Werkwijze */
.mkv-flow { padding: 1.5rem 1rem 4rem; background: var(--cms-page-background,#F0F6F8); --flow-bar-h: 3rem; --flow-lane-step: 3.45rem; }
.mkv-flow__pin { position: relative; max-width: 1600px; margin: auto; padding: 1.5rem; border-radius: 1.5rem; overflow: hidden; background: var(--cms-flow-bg, var(--cms-black,#0C1016)); color: var(--cms-flow-text, var(--cms-on-dark,#F0F6F8)); }
.mkv-flow__head { display: none; color: var(--cms-flow-muted,#8C949B); text-transform: uppercase; font-size: .75rem; font-weight: 600; letter-spacing: .08em; }
.mkv-flow__body { position: relative; }
.mkv-flow__playhead { display: none; position: absolute; z-index: 3; top: 0; bottom: 0; width: 1px; background: var(--cms-flow-playhead,#F0F6F8); pointer-events: none; }
.mkv-flow__playhead i { position: absolute; top: -.25rem; left: 50%; width: .65rem; height: .65rem; border-radius: 50%; background: var(--cms-flow-playhead,#F0F6F8); transform: translateX(-50%); }
.mkv-flow__playhead span { position: absolute; top: .8rem; left: .55rem; font-size: .7rem; font-weight: 700; }
.mkv-flow__row { padding: 1.1rem 0; border-top: 1px solid var(--cms-flow-line, rgba(240,246,248,.12)); }
.mkv-flow__phase > span:first-child { color: var(--cms-flow-muted,#8C949B); font-size: .8rem; font-weight: 600; }
.mkv-flow__phase h3 { margin-top: .5rem; font-size: 1.6rem; line-height: 1; letter-spacing: -.04em; }
.mkv-flow__phase-icon { display:grid; place-items:center; width:3.5rem; height:3.5rem; border-radius:50%; background:var(--cms-flow-icon-bg,#1E232C); color:var(--cms-flow-icon,#F0F6F8); }
.mkv-flow__phase-icon svg { width:1.55rem; height:1.55rem; 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) + 1.4rem); margin-top: 1rem; background: var(--cms-flow-track, rgba(240,246,248,.05)); border-radius: 1.25rem; }
.mkv-flow__bar { position: absolute; left: var(--flow-start); right: calc(100% - var(--flow-end)); top: calc(.7rem + var(--flow-lane,0) * var(--flow-lane-step)); min-width: 7.9rem; height: var(--flow-bar-h); border-radius: .75rem; background: var(--cms-flow-bar-bg,var(--cms-white,#F0F6F8)); overflow: hidden; box-shadow: 0 8px 20px rgba(17,30,43,.07); transform-origin: left center; will-change: transform, opacity; transition: box-shadow .32s ease, color .28s ease; }
.mkv-flow__bar::after { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; background:linear-gradient(105deg, rgba(255,255,255,.24), transparent 32%); transition:opacity .35s ease; }
.mkv-flow__bar.is-live { box-shadow: 0 12px 28px rgba(0,0,0,.24); }
.mkv-flow__bar.is-live::after { opacity: 1; }
.mkv-flow__bar.is-current { box-shadow: 0 16px 36px rgba(0,0,0,.3); }
.mkv-flow__bar i { position:absolute; inset:-1px; display:block; border-radius:inherit; background:var(--cms-accent,#FF4D2E); transform:scaleX(0); transform-origin:left center; will-change:transform; }
.mkv-flow__bar-label { position:relative; z-index:3; min-height:100%; padding:0 1.1rem; display:flex; align-items:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--cms-flow-bar-text,#0C1016); font-size:.82rem; font-weight:600; letter-spacing:-.025em; line-height:1.1; opacity:1; transform:none; pointer-events:none; transition:color .28s ease; }
.mkv-flow__bar.is-live .mkv-flow__bar-label { color:#fff; }
.mkv-flow__footer { padding-top: 1.5rem; border-top: 1px solid var(--cms-flow-line, rgba(240,246,248,.12)); display: flex; flex-direction: column; gap: 1rem; }
.mkv-flow__footer > span { height: 3px; background: var(--cms-flow-progress,#333841); border-radius: 9px; overflow: hidden; }
.mkv-flow__footer > span i { display: block; height: 100%; width: 100%; background: var(--cms-flow-progress-fill,#F0F6F8); transform: scaleX(0); transform-origin: left; }
@media (min-width: 1024px) {
  .mkv-flow { padding: 2rem 2rem 5rem; }
  .mkv-flow__pin {height:min(48rem,calc(100vh - 2rem));min-height:0;padding:1.5rem 2.25rem;display:flex;flex-direction:column;justify-content:center;top: 15%!important;}
  .mkv-flow__head { display:grid; grid-template-columns:clamp(165px,15vw,220px) repeat(4,1fr); padding-bottom:1rem; }
  .mkv-flow__playhead { display:block; left:clamp(165px,15vw,220px); }
  .mkv-flow__row { display:grid; grid-template-columns:clamp(165px,15vw,220px) minmax(0,1fr); min-height:calc(var(--flow-bar-h) + var(--flow-lane-step) + 1.9rem); align-items:center; }
  .mkv-flow__phase { padding-right:1.25rem; display:grid; grid-template-columns:2.8rem minmax(0,1fr); align-items:center; gap:.85rem; }
  .mkv-flow__phase > span:first-child { display:none; }
  .mkv-flow__phase h3 { margin-top:0; font-size:clamp(1.25rem,1.5vw,1.7rem); }
  .mkv-flow__phase-icon { width:2.8rem; height:2.8rem; }
  .mkv-flow__phase-icon svg { width:1.25rem; height:1.25rem; }
  .mkv-flow__track { height:calc(var(--flow-bar-h) + var(--flow-lane-step) + 1rem); }
  .mkv-flow__bar { top:calc(.5rem + var(--flow-lane,0) * var(--flow-lane-step)); height:var(--flow-bar-h); }
  .mkv-flow__bar-label { padding:0 1.05rem; font-size:clamp(.78rem,.85vw,.94rem); }
  .mkv-flow__footer { padding-top:1rem; }
  .mkv-flow__track { margin-top: 0; }
  .mkv-flow__footer { flex-direction: row; align-items: center; justify-content: space-between; }
  .mkv-flow__footer > span { width: 42%; }
}
@media (max-width: 1023px) {
  .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:rgba(240,246,248,.18); }
  .mkv-flow__row { position:relative; padding:1.2rem 0; }
  .mkv-flow__row::before { content:""; position:absolute; left:-1.72rem; top:2.05rem; width:.72rem; height:.72rem; border:2px solid #0C1016; border-radius:50%; background:#8C949B; transition:background-color .3s ease,transform .3s ease; }
  .mkv-flow__row.is-active::before { background:#F0F6F8; 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.25rem; }
  .mkv-flow__track { height:auto; margin-top:.75rem; display:grid; gap:.55rem; background:transparent; border-radius:0; }
  .mkv-flow__bar { position:relative; left:auto; right:auto; top:auto; width:100%; min-width:0; min-height:3.6rem; height:auto; }
  .mkv-flow__bar-label { min-height:3.6rem; padding:.85rem 1.05rem; font-size:.88rem; line-height:1.22; white-space:normal; }
}
.workflow-principle { opacity: 0; transform: translateY(4rem); }

/* ====================================================== Ons werk CTA */
.mkv-work-cta { margin:4rem 0 1rem; padding:2rem; border-radius:1.5rem; background:#C8CFD1; color:#0C1016; display:flex; flex-direction:column; align-items:flex-start; gap:2rem; }
.mkv-work-cta > div > span { display:block; margin-bottom:1rem; color:#5B646C; font-size:.85rem; font-weight:650; text-transform:uppercase; letter-spacing:.08em; }
.mkv-work-cta h2 { max-width:16ch; font-size:clamp(2.3rem,5vw,5.5rem); line-height:.92; letter-spacing:-.055em; font-weight:600; }
.mkv-work-cta p { max-width:43rem; margin-top:1.25rem; color:#5B646C; font-size:1.05rem; line-height:1.45; }
.mkv-work-cta__button { flex:0 0 auto; display:flex; align-items:center; gap:1.2rem; min-height:3.8rem; padding:.35rem .35rem .35rem 1.5rem; border-radius:999px; background:#0C1016; color:#F0F6F8; font-size:.9rem; font-weight:650; text-transform:uppercase; transition:transform .45s cubic-bezier(.22,.68,0,1.2); }
.mkv-work-cta__button:hover { transform:scale(1.04); }
.mkv-work-cta__button i { display:grid; place-items:center; width:3.1rem; height:3.1rem; border-radius:50%; background:#1E242C; overflow:hidden; }
.mkv-work-cta__button svg { width:1.05rem; transition:transform .45s cubic-bezier(.22,.68,0,1.3); }
.mkv-work-cta__button:hover svg { transform:translateX(.2rem); }
@media (min-width:1024px) { .mkv-work-cta { margin-top:7rem; padding:4rem; border-radius:2rem; flex-direction:row; align-items:center; justify-content:space-between; gap:4rem; } .mkv-work-cta p { font-size:1.3rem; } .mkv-work-cta__button { min-height:4.5rem; padding-left:2rem; font-size:1rem; } .mkv-work-cta__button i { width:3.8rem; height:3.8rem; } }

/* ============================ Utilities die de basis-stylesheet mist ==== */
.w-28 { width: 7rem } .w-56 { width: 14rem }
.leading-tight { line-height: 1.25 } .leading-relaxed { line-height: 1.625 }
.tracking-wide { letter-spacing: .025em }
.mb-6 { margin-bottom: 1.5rem } .pt-10 { padding-top: 2.5rem } .pt-12 { padding-top: 3rem } .pb-10 { padding-bottom: 2.5rem } .pb-20 { padding-bottom: 5rem }
.py-24 { padding-top: 6rem; padding-bottom: 6rem }
.gap-x-8 { column-gap: 2rem } .gap-y-3 { row-gap: .75rem }
.items-end { align-items: flex-end }
.items-stretch { align-items: stretch }
.col-start-2 { grid-column-start: 2 }
.grid-cols-\[3rem_1fr\] { grid-template-columns: 3rem 1fr }
.leading-snug { line-height: 1.375 }
.text-\[\#5B646C\] { color: #5B646C }
@media (min-width: 1024px) { .lg\:right-8 { right: 2rem } }
@media (min-width: 1800px) { .\33xl\:w-2\/3 { width: 66.666667% } }
.basis-full { flex-basis: 100% }
.border-t { border-top-width: 1px; border-top-style: solid }
.border-white\/10 { border-color: rgba(255,255,255,.1) }
.border-\[\#C9D3D8\] { border-color: #C9D3D8 }
.border-\[\#C8CFD1\] { border-color: #C8CFD1 }
.hover\:scale-105:hover { transform: scale(1.05) }
.hover\:text-mkv-grey:hover { color: #8C949B }
.hover\:text-mkv-black:hover { color: #0C1016 }
.md\:col-span-2 { grid-column: span 1 / span 1 }
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .md\:col-span-2 { grid-column: span 2 / span 2 }
}
@media (min-width: 1024px) {
  .lg\:gap-14 { gap: 3.5rem } .lg\:gap-20 { gap: 5rem }
  .lg\:py-8 { padding-top: 2rem; padding-bottom: 2rem }
  .lg\:pt-14 { padding-top: 3.5rem } .lg\:py-20 { padding-top: 5rem; padding-bottom: 5rem }
  .lg\:mt-28 { margin-top: 7rem }
  .lg\:pb-40 { padding-bottom: 10rem }
  .lg\:py-44 { padding-top: 11rem; padding-bottom: 11rem }
  .lg\:text-7xl { font-size: 4.5rem; line-height: 1 }
  .lg\:col-start-3 { grid-column-start: 3 }
  .lg\:grid-cols-\[7rem_1fr_1fr\] { grid-template-columns: 7rem 1fr 1fr }
  .lg\:items-end { align-items: flex-end }
  .lg\:text-right { text-align: right }
  .lg\:w-4 { width: 1rem }
}
@media (min-width: 1600px) {
  .\32xl\:left-\[18\%\] { left: 18% }
  .\32xl\:mt-0 { margin-top: 0 }
  .\32xl\:p-24 { padding: 6rem }
  .\32xl\:text-2xl { font-size: 1.5rem; line-height: 2rem }
  .\32xl\:text-3xl { font-size: 1.875rem; line-height: 2.25rem }
  .\32xl\:text-\[7rem\] { font-size: 5rem }
  .\32xl\:text-\[8rem\] { font-size: 7rem }
}
@media (min-width: 1900px) {
  .\33xl\:left-\[24\%\] { left: 24% }
}
.mkv-maxw { width: 100%; max-width: 56rem }
.mkv-maxw--sm { max-width: 44rem }
.mkv-value-note { font-size: 1rem; color: #8C949B; font-weight: 500 }
@media (min-width: 1024px) { .mkv-value-note { font-size: 1.5rem; max-width: 55%; text-align: right } }

/* ======================================================= Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .loader-wrapper { display: none !important; }
  .hero-anim-in, .tt-sub-in, .cta-anim { opacity: 1 !important; }
  .footer-letter, .footer-extension { transform: none !important; }
  .service-item { transform: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ================================================= Project case pages */
.project-case { min-height:100vh; overflow:clip; }
.project-case .project-hero img { display:block; }
.project-case .case-service { will-change:transform,padding,border-radius; }
.project-case .case-service .service-title,
.project-case .case-service .service-arrow { will-change:font-size,opacity; }
.project-case .case-video-frame { width:100%; height:50vh; overflow:hidden; border-radius:1rem; background:var(--cms-project-surface,#1E232C); }
.project-case .case-video-frame iframe { display:block; width:100%; height:100%; border:0; }
.project-case .case-next-gradient { background:linear-gradient(to top,rgba(0,0,0,.4),transparent); }
.project-case .case-split-line { will-change:transform,opacity; }
.project-case .next-project > div { will-change:border-radius; }
.project-case .indicator-inner { will-change:width; }
html:not(.mkv-js) .project-case [data-case-reveal] { opacity:1 !important; transform:none !important; }
@media (min-width:1024px) {
  .project-case .case-video-frame { height:auto; aspect-ratio:16/7; }
}

/* Exact SOHub header/menu states on project cases */
body.mkv-project-theme{background:var(--cms-project-bg,#0C1016)!important;color:var(--cms-project-text,#F0F6F8)}
body.mkv-project-theme #main-content{background:var(--cms-project-bg,#0C1016)!important}
header button[aria-controls="site-menu"]{will-change:transform;transition:transform .5s cubic-bezier(.22,.68,0,1)!important}
header button[aria-controls="site-menu"]:hover{transform:scale(1.1)}
header button[aria-controls="site-menu"] [data-menu-icon]{will-change:transform;transition:transform .5s cubic-bezier(.22,.68,0,1.5)!important}
header button[aria-controls="site-menu"]:hover [data-menu-icon],header button[aria-controls="site-menu"].is-open [data-menu-icon]{transform:rotate(90deg)}

/* Project cases use SOHub's full-height right-edge scrollbar. */
body.mkv-project-theme .mkv-scrollbar{
  top:0;right:0;bottom:0;width:.5rem;height:auto;border-radius:0;
  background:transparent;z-index:1000;overflow:visible;
}
body.mkv-project-theme .mkv-scrollbar__thumb{
  left:auto;right:0;width:.5rem;background:var(--cms-project-surface,#1E232C);border-radius:999px;
}
@media (max-width:812px){
  body.mkv-project-theme .mkv-scrollbar{right:0;width:.5rem;height:auto;border-radius:0}
  body.mkv-project-theme .mkv-scrollbar__thumb{width:.5rem}
}

/* ============================================== Werkwijze: route uit _partials, in MK Vision-stijl */
.mkv-process-journey{position:relative}
.mkv-process-journey__shell{position:relative;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(3rem,7vw,9rem);background:#0C1016;color:#F0F6F8;border-radius:clamp(2rem,3vw,3rem);padding:clamp(2rem,5vw,6rem);overflow:hidden}
.mkv-process-journey__shell:before{content:"";position:absolute;inset:auto -18% -35% 28%;height:72%;background:radial-gradient(circle,rgba(255,77,46,.18),rgba(255,77,46,0) 68%);pointer-events:none;filter:blur(10px)}
.mkv-process-journey__intro-wrap{position:sticky;top:8rem;align-self:start;display:flex;flex-direction:column;gap:1.5rem;z-index:1}
.mkv-process-journey__kicker{font-size:clamp(.9rem,1.2vw,1.15rem);font-weight:600;color:#A5ABAD}
.mkv-process-journey__title{font-size:clamp(3.25rem,7.2vw,8.6rem);line-height:.86;letter-spacing:-.065em;font-weight:600;display:flex;flex-direction:column;margin:0}
.mkv-process-journey__title span:first-child{color:#F0F6F8}.mkv-process-journey__title span:last-child{color:#A5ABAD}
.mkv-process-journey__intro{max-width:34rem;margin:1rem 0 0;color:#A5ABAD;font-size:clamp(1.15rem,1.65vw,1.75rem);line-height:1.25;letter-spacing:-.025em}
.mkv-process-journey__progress{width:100%;height:2px;background:#232831;margin-top:1.25rem;overflow:hidden;border-radius:999px}.mkv-process-journey__progress i{display:block;width:100%;height:100%;background:var(--cms-accent,#FF4D2E);transform:scaleX(0);transform-origin:left center}
.mkv-process-journey__steps{position:relative;display:flex;flex-direction:column;z-index:1}
.mkv-process-step{display:grid;grid-template-columns:4.25rem minmax(0,1fr);gap:clamp(1.25rem,2vw,2.5rem);padding:clamp(2rem,4.5vw,4.6rem) 0;border-top:1px solid rgba(240,246,248,.12);opacity:.42;transition:opacity .35s ease,transform .35s ease}
.mkv-process-step:first-child{border-top:0;padding-top:.5rem}.mkv-process-step.is-active{opacity:1}
.mkv-process-step__num{display:flex;align-items:center;justify-content:center;width:3.4rem;height:3.4rem;border-radius:999px;background:#1E232C;color:#F0F6F8;font-size:.9rem;font-weight:600}
.mkv-process-step.is-active .mkv-process-step__num{background:var(--cms-accent,#FF4D2E)}
.mkv-process-step h3{margin:0;color:#F0F6F8;font-size:clamp(2rem,3.6vw,4.5rem);line-height:.95;letter-spacing:-.05em;font-weight:600}
.mkv-process-step p{margin:1.2rem 0 0;max-width:46rem;color:#A5ABAD;font-size:clamp(1.05rem,1.45vw,1.45rem);line-height:1.35;letter-spacing:-.02em}

/* Projectcase galleries: brede beelden in een raster, telefoonschermen in een
   eigen device-rij zodat ze niet als gigantische kolommen naast elkaar staan. */
.project-case .case-gallery-stack{display:flex;flex-direction:column;gap:clamp(1.5rem,3vw,2.5rem)}
/* Uitgevulde rij: flex-grow gelijk aan de beeldverhouding maakt alle beelden
   in de rij even hoog en vult de rij precies, dus zonder restruimte. */
.project-case .case-row{display:flex;gap:clamp(1rem,2vw,1.5rem);align-items:stretch;aspect-ratio:1/var(--row-height,0.42)}
.project-case .case-tile{margin:0;min-width:0;flex:var(--tile-ratio,1.6) 1 0;overflow:hidden;border-radius:1rem}
.project-case .case-tile__image{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:767px){.project-case .case-row{flex-direction:column;aspect-ratio:auto}.project-case .case-tile{flex:none;width:100%;aspect-ratio:var(--tile-ratio,1.6)}}

.project-case .gallery img{display:block;width:100%;height:auto;border-radius:1rem;object-fit:cover}
.project-case .case-devices{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:clamp(1.25rem,2.5vw,2.5rem);align-items:end;justify-items:center;padding:clamp(1.5rem,3.5vw,3.5rem) clamp(1rem,3vw,3rem);background:color-mix(in srgb,var(--cms-project-surface,#1E232C) 88%,#000);border-radius:1.5rem}
.project-case .case-device{margin:0;display:flex;justify-content:center;min-width:0}
.project-case .case-device__image{display:block;width:min(100%,300px);height:auto;max-height:70vh;object-fit:contain;border-radius:1.5rem;box-shadow:0 24px 60px rgba(0,0,0,.35)}

@media(max-width:1023px){
  .mkv-process-journey__shell{grid-template-columns:1fr;gap:3.5rem;padding:2rem 1.25rem 2.25rem}
  .mkv-process-journey__intro-wrap{position:relative;top:auto}
  .mkv-process-step{grid-template-columns:3.5rem minmax(0,1fr);padding:2rem 0;opacity:1}
  .mkv-process-step__num{width:3rem;height:3rem}
}

@media (max-width:767px){
  .project-case .case-devices{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));padding:1.25rem .875rem;gap:.875rem;border-radius:1.25rem}
  .project-case .case-device__image{width:min(100%,240px);max-height:58vh;border-radius:1.1rem}
}

@media (min-width:1024px) and (max-width:1439px){ .mkv-flow { --flow-bar-h: 2.75rem; --flow-lane-step: 3.15rem; } }
@media (min-width:1024px) and (max-width:1279px){ .mkv-flow { --flow-bar-h: 2.4rem; --flow-lane-step: 2.75rem; } }

/* ============================ Menu: vaste sohub/ref3-kleuren, los van het palet
   Het menupaneel gebruikt bg-mkv-soft-grey en het actieve item bg-mkv-white.
   Die tokens worden door een kleurpalet meegekleurd, waardoor het menu meeveranderde.
   Het menu hoort exact het origineel te blijven, dus staan de kleuren hier vast. */
/* De menu-items dragen een eigen style="color:..." uit de bron; de regels
   hieronder moeten daar overheen, vandaar !important op de tekstkleuren.
   Volgorde telt: eerst de rusttoestand, dan het actieve item, dan hover, zodat
   hover ook wint op de pagina waar je al staat. */
nav#site-menu > .wrapper { background-color: var(--cms-menu-panel-bg, #D9E0E3); }
nav#site-menu > .wrapper > a,
nav#site-menu > .wrapper > a span { color: var(--cms-menu-panel-text, #1E232C) !important; }
/* Het pijltje schuift bij hover open en tekent met stroke="currentColor". */
nav#site-menu > .wrapper > a svg { color: var(--cms-menu-panel-arrow, currentColor) !important; }

nav#site-menu > .wrapper > a.bg-mkv-white { background-color: var(--cms-menu-panel-active, #F0F6F8); }
nav#site-menu > .wrapper > a.bg-mkv-white,
nav#site-menu > .wrapper > a.bg-mkv-white span { color: var(--cms-menu-panel-active-text, var(--cms-menu-panel-text, #1E232C)) !important; }

nav#site-menu > .wrapper > a:hover { background-color: var(--cms-menu-panel-hover, var(--cms-menu-panel-active, #F0F6F8)); }
nav#site-menu > .wrapper > a:hover,
nav#site-menu > .wrapper > a:hover span { color: var(--cms-menu-panel-hover-text, var(--cms-menu-panel-text, #1E232C)) !important; }
nav#site-menu > .wrapper > a:hover svg { color: var(--cms-menu-panel-arrow, currentColor) !important; }

/* =========================== Headerknoppen op hun oorspronkelijke maat
   De siteschaal zet html op 90%, waardoor ook de menuknop en de chatknop
   meekrimpen. Die twee horen op hun oude maat te staan; de rest van de header
   en het menu blijven wel meeschalen. Beide knoppen samen, anders staan ze
   niet meer gelijk in de rij. */
[data-header-actions] > a,
[data-header-actions] > button {
  zoom: var(--cms-scale-inverse, 1);
}

/* ================================ Breakout-raster op de projectpagina's
   Uit ref3: een raster van beelden in een vastgezette sectie dat meeschaalt
   terwijl je scrollt, waardoor de beelden uit het beeld groeien. De scrollhoogte
   zit in .mkv-breakout__scroll; het raster zelf blijft een schermhoogte hoog. */
.project-case .mkv-breakout__scroll { position: relative; height: 205vh; }
.project-case .mkv-breakout__pin {
  position: sticky; top: 0; height: 100vh;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.project-case .mkv-breakout__grid {
  display: grid;
  grid-template-columns: repeat(var(--breakout-columns, 3), 31vw);
  gap: 1vw;
  width: min-content;
  transform: scale(var(--breakout-scale, .62));
  will-change: transform;
}
.project-case .mkv-breakout__item {
  margin: 0; overflow: hidden; border-radius: 1rem;
  width: 31vw; height: 31vh; display: grid; place-items: center;
}
.project-case .mkv-breakout__image { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 767px) {
  .project-case .mkv-breakout__scroll { height: auto; }
  .project-case .mkv-breakout__pin { position: static; height: auto; padding: 2rem 1rem; }
  .project-case .mkv-breakout__grid {
    grid-template-columns: repeat(2, 1fr); width: 100%; gap: .75rem; transform: none;
  }
  .project-case .mkv-breakout__item { width: 100%; height: auto; aspect-ratio: 16/10; }
}
html:not(.mkv-js) .project-case .mkv-breakout__grid { transform: none; }

/* ====================== Projectpagina's blijven buiten het kleurenpalet
   Het palet zet --color-mkv-* op :root; de losse projectpagina's gebruiken die
   tokens voor hun tekst en vlakken en veranderden daardoor mee. Hier krijgen ze
   hun eigen, vaste waarden terug, zodat een licht palet de donkere cases niet
   onleesbaar maakt. De --cms-project-* instellingen blijven gewoon werken. */
body.mkv-project-theme{
  --color-mkv-white:#F0F6F8;
  --color-mkv-soft-grey:#D9E0E3;
  --color-mkv-grey:#A5ABAD;
  --color-mkv-dark-grey:#1E232C;
  --color-mkv-black:#0C1016;
}
body.mkv-project-theme .text-mkv-white{color:var(--cms-project-text,#F0F6F8)}
body.mkv-project-theme .text-mkv-grey{color:#A5ABAD}

/* Het scrollverloop staat vast aan het venster (background-attachment:fixed in
   de CMS-CSS). Op touchapparaten is dat duur en op iOS wordt het genegeerd;
   daar valt het terug op meescrollen, precies zoals het eerder deed. */
@media (hover:none) and (pointer:coarse){
  body[data-bg-scroll]{background-attachment:scroll!important}
}