:root{
  --bl-dark:#0A2129;
  --bl-mint:#00FFB0;
  --bl-mint-soft:#3FFCBA;
  --bl-green:#00FFAF;
  --bl-discover:#00C889;
  --bl-hero:#EAF5F9;
  --bl-pale:#E4F3EA;
  --bl-blue:#D7EDF7;
  --bl-menu:#475966;
  --bl-pink:#FFC3C4;
  --bl-yellow:#F9D401;
  --bl-white:#FFFFFF;
  --mk-brand-dark:var(--bl-dark);
  --mk-brand-accent:var(--bl-mint);
  --mk-brand-accent-soft:var(--bl-mint-soft);
  --mk-brand-sky:var(--bl-blue);
  --mk-brand-ink:var(--bl-dark);
}
/* Current Brandlucent runtime palette: keep the native page/section colors.
   Mint is the interaction accent; it is NOT a forced section background. */
.TheFooter{background-color:var(--bl-dark)!important;border-bottom-color:var(--bl-mint)!important;color:#fff!important}
.TheFooter a:after,.list.-main .link:after{background:var(--bl-mint)!important}
#TheMenu{background-color:var(--bl-menu)!important;color:#fff!important}
.mk-case-next__arrow,.mk-back-to-top,.mk-form-branching button[type="submit"],.mk-form-branching .is-selected{background-color:var(--bl-mint)!important;color:var(--bl-dark)!important}
.mk-case-live-link svg,.mk-case-back svg{color:var(--bl-mint)}
[data-case-breakout]{--case-aqua:var(--bl-mint)}
::selection{background:var(--bl-mint);color:var(--bl-dark)}

/* Culture = Over ons — exact native Brandlucent Culture section sequence.
   Scope both the Vue root and /over-ons/ body route so generic CMS fallbacks cannot
   flatten the Culture palette. */
.PageCulture .CustomHero,.PageCulture .Hero,body.mk-page-culture .CustomHero,body.mk-page-culture .Hero{background-color:var(--bl-hero)!important;color:var(--bl-dark)!important}
.PageCulture .Vision,body.mk-page-culture .Vision{background-color:#fff!important;color:var(--bl-dark)!important}
.PageCulture .Values,body.mk-page-culture .Values{background-color:var(--bl-pale)!important;color:var(--bl-dark)!important}
.PageCulture .Cards,body.mk-page-culture .Cards{background-color:#fff!important;color:var(--bl-dark)!important}
.PageCulture .Sentences,body.mk-page-culture .Sentences{background-color:#fff!important;color:var(--bl-dark)!important}
.PageCulture .Discover,body.mk-page-culture .Discover{background-color:var(--bl-discover)!important;color:var(--bl-dark)!important}
.PageCulture .Position,body.mk-page-culture .Position{background-color:var(--bl-pale)!important;color:var(--bl-dark)!important}

/* Why + Team — keep native Brandlucent section roles. */
.PageWhy .WorkWith,.PageWhy .Why{background-color:var(--bl-pale)!important;color:var(--bl-dark)!important}
.PageTeam .Intro{background-color:#fff!important;color:var(--bl-dark)!important}
.PageTeam .Employees{background-color:var(--bl-dark)!important;color:#fff!important}
.PageTeam .Talent,.PageTeam .Position{background-color:var(--bl-pale)!important;color:var(--bl-dark)!important}
.PageTeam .TextCta{background-color:#fff!important;color:var(--bl-dark)!important}

/* Diensten / Expertise intentionally has no global override here.
   Its Vue runtime owns the exact Brandlucent cycle:
   #475966 -> #FFC3C4 -> #F9D401 -> #00FFAF -> #D7EDF7. */

/* Brandlucent page mapping v4: Contact + Team + Culture values line art */
/* Contact = Brandlucent Contact. The native page consists of the dark contact
   Hero, the pale-mint Position CTA and the white scrolling project CTA. */
html body.mk-page-contact .PageContact,
html body.mk-page-contact .PageContact .Hero{
  background-color:var(--bl-dark)!important;
  color:#fff!important;
}
html body.mk-page-contact .PageContact .Hero .section,
html body.mk-page-contact .PageContact .Hero .title,
html body.mk-page-contact .PageContact .Hero .description,
html body.mk-page-contact .PageContact .Hero a{
  color:#fff!important;
}
html body.mk-page-contact .PageContact .Hero .blob{
  --page-blob-color:var(--bl-mint);
}
html body.mk-page-contact .PageContact .Position{
  background-color:var(--bl-pale)!important;
  color:var(--bl-dark)!important;
}
html body.mk-page-contact .PageContact .Position .title,
html body.mk-page-contact .PageContact .Position .cta{
  color:var(--bl-dark)!important;
}
html body.mk-page-contact .PageContact .UiMarquee{
  background-color:#fff!important;
  color:var(--bl-dark)!important;
}
html body.mk-page-contact .PageContact .UiMarquee .item,
html body.mk-page-contact .PageContact .UiMarquee a{
  color:var(--bl-dark)!important;
}
html body.mk-page-contact .TheHeader,
html body.mk-page-contact .burger-wrapper{
  color:#fff!important;
}

/* Team = Brandlucent Team. Higher-specificity selectors deliberately beat the
   generic CMS .Position fallback while keeping the native Team sequence. */
html body.mk-page-team .PageTeam .Hero{
  /* The native Hero works like Brandlucent Why: OglStar draws the light
     background and blob on the global WebGL canvas. An opaque CSS background
     here would cover that canvas and make the blob look missing. */
  background-color:transparent!important;
  background-image:none!important;
  color:var(--bl-dark)!important;
}
html body.mk-page-team .PageTeam .Hero .section,
html body.mk-page-team .PageTeam .Hero .title,
html body.mk-page-team .PageTeam .Hero .description,
html body.mk-page-team .PageTeam .Hero a{
  color:var(--bl-dark)!important;
}
html body.mk-page-team .PageTeam .Intro{
  background-color:#fff!important;
  color:var(--bl-dark)!important;
}
html body.mk-page-team .PageTeam .Talent{
  background-color:var(--bl-pale)!important;
  color:var(--bl-dark)!important;
}
html body.mk-page-team .PageTeam .TextCta{
  background-color:#fff!important;
  color:var(--bl-dark)!important;
}
html body.mk-page-team .PageTeam .Employees{
  background-color:var(--bl-dark)!important;
  color:#fff!important;
}
html body.mk-page-team .PageTeam .Employees .title,
html body.mk-page-team .PageTeam .Employees .name,
html body.mk-page-team .PageTeam .Employees .job,
html body.mk-page-team .PageTeam .Employees a{
  color:#fff!important;
}
html body.mk-page-team .PageTeam .Position{
  background-color:var(--bl-pale)!important;
  color:var(--bl-dark)!important;
}
html body.mk-page-team .TheHeader,
html body.mk-page-team .burger-wrapper{
  color:var(--bl-dark)!important;
}

/* "Waar wij voor staan": transparent, thin-line Brandlucent-style vector art.
   The movement lives inside each SVG; the website keeps the native Values
   slider/drag behavior and does not receive another GSAP layer. */
html body.mk-page-culture .PageCulture .Values .media.mk-values-line-art{
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
html body.mk-page-culture .PageCulture .Values .media.mk-values-line-art:before{
  background:transparent!important;
}
html body.mk-page-culture .PageCulture .Values .media.mk-values-line-art img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  background:transparent!important;
  filter:none!important;
}
@media (prefers-reduced-motion:reduce){
  html body.mk-page-culture .PageCulture .Values .media.mk-values-line-art img{animation:none!important}
}


/* v10 — Menu underline only on the contact details, never on the main nav. */
#TheMenu .list.-main .link::after,
.TheMenu .list.-main .link::after,
#TheMenu .list.-main a::after,
.TheMenu .list.-main a::after{
  content:none!important;
  display:none!important;
  transform:none!important;
}
#TheMenu .row.-bottom a[href^="tel:"],
#TheMenu .row.-bottom a[href^="mailto:"],
.TheMenu .row.-bottom a[href^="tel:"],
.TheMenu .row.-bottom a[href^="mailto:"],
.mk-mobile-contact-row a{
  position:relative;
  text-decoration:none!important;
}
#TheMenu .row.-bottom a[href^="tel:"]::after,
#TheMenu .row.-bottom a[href^="mailto:"]::after,
.TheMenu .row.-bottom a[href^="tel:"]::after,
.TheMenu .row.-bottom a[href^="mailto:"]::after,
.mk-mobile-contact-row a::after{
  content:""!important;
  display:block!important;
  position:absolute;
  left:0;
  bottom:-3px;
  width:100%;
  height:1px;
  background:currentColor!important;
  opacity:.42;
  transform:scaleX(0)!important;
  transform-origin:right center;
  transition:transform .48s cubic-bezier(.16,1,.3,1),opacity .3s ease;
}
#TheMenu .row.-bottom a[href^="tel:"]:hover::after,
#TheMenu .row.-bottom a[href^="mailto:"]:hover::after,
.TheMenu .row.-bottom a[href^="tel:"]:hover::after,
.TheMenu .row.-bottom a[href^="mailto:"]:hover::after,
.mk-mobile-contact-row a:hover::after{
  opacity:.72;
  transform:scaleX(1)!important;
  transform-origin:left center;
}


/* Footer privacy sits on the same baseline and uses the exact same type size
   as the copyright it follows. */
.TheFooter .logo-wrapper .mk-footer-privacy-link{
  display:inline-block!important;
  align-self:center!important;
  margin-top:20px!important;
  margin-left:18px!important;
  color:inherit!important;
  font-family:inherit!important;
  font-size:1.6rem!important;
  font-weight:inherit!important;
  line-height:normal!important;
  letter-spacing:inherit!important;
  text-decoration:none!important;
  white-space:nowrap;
}
@media only screen and (min-width:600px) and (max-width:1000px){
  .TheFooter .logo-wrapper .mk-footer-privacy-link{margin-top:12px!important;font-size:1.4rem!important}
}
@media only screen and (max-width:600px){
  .TheFooter .logo-wrapper{flex-direction:row!important;flex-wrap:wrap!important;align-items:baseline!important}
  .TheFooter .logo-wrapper .logo{flex-basis:100%}
  .TheFooter .logo-wrapper .copyrights{margin-top:40px!important}
  .TheFooter .logo-wrapper .mk-footer-privacy-link{margin-top:40px!important;margin-left:14px!important;font-size:1.2rem!important}
}


/* v12 — only the route we determine ourselves is underlined. Vue's stale
   router-link class is ignored because static page routes can leave Home active. */
#TheMenu .list.-main .link::after,
.TheMenu .list.-main .link::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:0!important;
  right:auto!important;
  bottom:4px!important;
  width:100%!important;
  height:1px!important;
  background:currentColor!important;
  opacity:.72!important;
  transform:scaleX(0)!important;
  transform-origin:left center!important;
}
#TheMenu .list.-main .link.mk-menu-active::after,
.TheMenu .list.-main .link.mk-menu-active::after{
  transform:scaleX(1)!important;
}
#TheMenu .list.-main .link.router-link-exact-active:not(.mk-menu-active)::after,
.TheMenu .list.-main .link.router-link-exact-active:not(.mk-menu-active)::after,
#TheMenu .list.-main .link.router-link-active:not(.mk-menu-active)::after,
.TheMenu .list.-main .link.router-link-active:not(.mk-menu-active)::after,
#TheMenu .list.-main .link[aria-current="page"]:not(.mk-menu-active)::after,
.TheMenu .list.-main .link[aria-current="page"]:not(.mk-menu-active)::after{
  transform:scaleX(0)!important;
}
@media (hover:hover) and (pointer:fine){
  #TheMenu .list.-main .link:not(.mk-menu-active):hover::after,
  .TheMenu .list.-main .link:not(.mk-menu-active):hover::after{transform:scaleX(0)!important}
}
@media only screen and (max-width:600px){
  #TheMenu .list.-main .link::after,.TheMenu .list.-main .link::after{bottom:2px!important}
}

/* v12 — Brandlucent word reveal keeps visible spaces inside flex-based
   option/button labels. */
.UiLightbox.-form .mk-bl-word-mask{
  display:inline-block!important;
  overflow:hidden!important;
  vertical-align:top!important;
  flex:0 0 auto!important;
}
.UiLightbox.-form .mk-bl-space{
  display:inline-block!important;
  width:.28em!important;
  min-width:.28em!important;
  flex:0 0 .28em!important;
  white-space:pre!important;
}

/* v12 — the native MK cursor has fixed child circles at z-index 9000;
   Privacy is z-index 12000, so lift the actual circles rather than only the wrapper. */
@media (min-width:1000px) and (hover:hover) and (pointer:fine){
  body.mk-privacy-modal-active .mk-privacy-live-modal,
  body.mk-privacy-modal-active .mk-privacy-live-modal *{cursor:none!important}
  body.mk-privacy-modal-active .CustomCursor,
  body.mk-privacy-modal-active .circle-cursor{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:none!important;
    z-index:13050!important;
  }
}