/* Deliberate contact states and one painted footer edge (no floating penguin) in the existing identity. */
.mb-elementor-page .mbx-form-wrap .mb-form-required { font-size: 15px; margin: 0 0 24px; color: #555; }
.mb-elementor-page .mbx-form label { display: block; font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.mb-elementor-page .mbx-form p { margin: 0 0 24px; }
.mb-elementor-page .mbx-form :is(input:not([type="hidden"]),select,textarea) { width: 100%; border: 1px solid #999; border-radius: 6px; padding: 14px 16px; color: #202020; background: #fff; box-shadow: none; }
.mb-elementor-page .mbx-form :is(input,select,textarea):focus-visible { outline: 2px solid #007e98; outline-offset: 2px; }
.mb-elementor-page .mbx-form [aria-invalid="true"] { border-color: #b42318; }
.mb-elementor-page .mbx-form textarea { min-height: 160px; resize: vertical; }
.mb-elementor-page .mbx-form .mb-field-error { display: block; color: #a61b13; font-size: 15px; line-height: 1.5; margin-top: 6px; }
.mb-elementor-page .mbx-form .mb-field-error:empty { display: none; }
.mb-elementor-page .mb-field-hint { display: block; font-size: 14px; color: #626262; margin-top: 8px; }
.mb-elementor-page .mb-form-extra { border-block: 1px solid #d0d0d0; margin: 4px 0 28px; }
.mb-elementor-page .mb-form-extra summary { min-height: 56px; padding-block: 16px; cursor: pointer; font-size: 17px; font-weight: 700; }
.mb-elementor-page .mb-form-extra summary span { font-weight: 400; color: #626262; }
.mb-elementor-page .mb-form-extra > .mb-form-grid { padding-top: 12px; }
.mb-elementor-page .mbx-form .mb-form-privacy { margin: 18px 0 0; max-width: 65ch; font-size: 14px; line-height: 1.6; }
.mb-elementor-page .mbx-form .mb-form-submit { min-height: 52px; margin: 0; }
.mb-elementor-page .mbx-form .mb-form-submit:disabled { opacity: .65; cursor: progress; }
.mb-elementor-page .mbx-form-wrap .mb-form-notice { border: 1px solid #a7c8ce; padding: 20px 24px; margin: 0 0 24px; background: #f0f7f8; color: #202020; line-height: 1.6; }
.mb-elementor-page .mbx-form-wrap .mb-form-notice[hidden] { display: none; }
.mb-elementor-page .mbx-form-wrap .mb-form-notice-error { border-color: #d6a6a0; background: #fff7f6; color: #7d1b13; scroll-margin-top: calc(var(--mb-header-height,72px) + 20px); }
.mb-elementor-page .mb-form-notice-success p { margin: 8px 0; }
:is(.mb-elementor-page .mbep-footer,body.mbpse-curated .mbpse-footer) { position: relative; overflow: visible; border-top: 3px solid transparent; border-image: linear-gradient(90deg,#00b9d5,#7638b8,#e92a98,#ef4c43) 1; }
@media (max-width: 767px) {
  .mb-elementor-page .mb-form-extra summary { font-size: 16px; }
  .mb-elementor-page .mbx-form-wrap .mb-form-notice { padding: 16px; }
}
/* Diensten: the head slot above each card is the gap, so the row starts closer to the intro. */
.mb-elementor-page #diensten .bureau__services { margin-top: -40px; }
.mb-elementor-page #diensten .bureau__services .mb-service-card { margin-bottom: 0; }
@media (max-width: 767px) {
  .mb-elementor-page #diensten .bureau__services { margin-top: -56px; }
}

/* Contact and "Taal, techniek" sit closer so the two dark blocks read as one. */
.mb-elementor-page main .mb-home-cta { padding-bottom: 24px !important; }
.mb-elementor-page main .mb-home-portrait { padding-top: 32px !important; }
@media (max-width: 767px) {
  .mb-elementor-page main .mb-home-cta { padding-bottom: 16px !important; }
  .mb-elementor-page main .mb-home-portrait { padding-top: 24px !important; }
}

/* Closing CTA: the heading centres across the row, so centre the narrower text column under it too. */
.mb-elementor-page main .cta-final .mb-text-block p { margin-left: auto; margin-right: auto; }

/* Contact options: a quiet ruled row like the service cards, no floating hover card. */
.mb-elementor-page main .contact-info-section .contact-block { border-width: 1px 0 0; border-style: solid; border-color: transparent; border-image: linear-gradient(90deg,#00b9d5,#7638b8,#e92a98,#ef4c43) 1; border-radius: 0; padding: 20px 0 0; margin: 0; box-shadow: none; transform: none; transition: none; }
.mb-elementor-page main .contact-info-section .contact-block:hover { box-shadow: none; transform: none; }
.mb-elementor-page main .contact-info-section .contact-block-label { margin: 0 0 12px; line-height: 1.4; }
.mb-elementor-page main .contact-info-section .contact-block-value { margin: 0; line-height: 1.5; }
.mb-elementor-page main .contact-info-section .contact-block-value a { text-decoration: underline !important; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: transparent !important; transition: text-decoration-color .2s; }
.mb-elementor-page main .contact-info-section .contact-block-value a:is(:hover,:focus-visible) { color: #1f1f1f !important; text-decoration-color: currentColor !important; }

/* Form: the select matches the text fields, the submit matches the other square buttons. */
.mb-elementor-page .mbx-form select { -webkit-appearance: none; appearance: none; min-height: 52px; font-size: 18px; line-height: 1.4; padding-right: 48px; cursor: pointer; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23202020' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 18px center; }
.mb-elementor-page .mbx-form .mb-form-submit { border: 0; border-radius: 0; box-shadow: none; }

/* Page edges: the coloured footer edge replaces the white rule the heads rise from. */
:is(.mb-elementor-page, .mbpse-curated) .mb-page-edge { border-bottom: 3px solid transparent; border-image: linear-gradient(90deg,#00b9d5,#7638b8,#e92a98,#ef4c43) 1; }
/* Closing section: the head rises straight from the footer edge, no second rule above it. */
.mb-elementor-page main .elementor > .mb-page-edge-region:last-child { padding-bottom: 0 !important; }
.mb-elementor-page main .elementor > .mb-page-edge-region:last-child .mb-page-edge { border-bottom: 0; }

/* Cookie preferences sit in the footer bar on every page, as on the contact page. */
.mb-elementor-page .mbep-footer-bottom #mb-cookie-settings { position: static; margin: 0; flex: 0 0 auto; }
/* Contact choices on mobile: the gradient edge on each block replaces the grey separators. */
@media (max-width: 767px) { .mb-elementor-page main .contact-info-section .elementor-widget-wrap { border-bottom: 0; } .mb-elementor-page main .contact-info-section .contact-block { padding-top: 16px; } }

/* Home portrait: smaller photo and a shorter grey block. */
.mb-elementor-page main .mb-home-portrait .mb-portrait-photo img { max-height: 560px; }
@media (max-width: 767px) {
  .mb-elementor-page main .mb-home-portrait .mb-portrait-photo img { max-height: 420px; }
}

/* About: more white space below the "Wat ik meebreng" cards. */
.mb-elementor-page.mb-content-variant main .mb-source-row.elementor-element-ccd1eefa { padding-bottom: 72px !important; }
@media (max-width: 767px) {
  .mb-elementor-page.mb-content-variant main .mb-source-row.elementor-element-ccd1eefa { padding-bottom: 48px !important; }
}

/* Home portrait: grey block runs from the heading to the links. */
@media (min-width: 768px) {
  .mb-elementor-page main .mb-home-portrait { padding-bottom: 32px !important; }
  .mb-elementor-page main .mb-home-portrait > .elementor-container { align-items: stretch; }
  .mb-elementor-page main .mb-home-portrait .mb-portrait-copy { padding-bottom: 0 !important; }
  .mb-elementor-page main .mb-home-portrait .mb-portrait-photo { position: relative; overflow: hidden; }
  .mb-elementor-page main .mb-home-portrait .mb-portrait-photo *:not(img) { position: static; }
  .mb-elementor-page main .mb-home-portrait .mb-portrait-photo img {
    position: absolute; inset: 0; width: 100%; height: 100%; max-height: none;
    object-fit: cover; object-position: 50% 4%;
  }
}

/* Mobile services: keep the penguin head clear of the intro text. */
@media (max-width: 767px) {
  .mb-elementor-page #diensten .bureau__services { margin-top: 48px; }
}
/* Home services: less white space between the intro and the cards; smaller heads keep the intro clear. */
@media (min-width: 768px) {
  .mb-elementor-page #diensten .bureau__services { margin-top: -24px; }
  .mb-elementor-page #diensten .bureau__services .mb-edge-head { --mb-head-slot: 88px; --mb-head-top: 16px; }
  .mb-elementor-page #diensten .bureau__services .mb-edge-head img { width: 141px; height: 176px; top: var(--mb-head-top); left: clamp(0px, calc(var(--mb-head-position) - 70px), calc(100% - 141px)); }
  .mb-elementor-page #diensten .bureau__services .mb-service-card > .elementor-widget-wrap::before { inset: 88px 0 0; }
}
@media (min-width: 1024px) {
  .mb-elementor-page #diensten .bureau__services { margin-top: -44px; }
}
/* About: text alternates left and right per colour block. */
@media (min-width: 1025px) {
  .mb-elementor-page main .mb-source-row.elementor-element-27b0a070 .elementor-widget-container { max-width: 706px; margin-left: auto; }
}
/* Brand gradient on every divider line; footer edge always 3px. */
:is(.mb-elementor-page .mbep-footer,body.mbpse-curated .mbpse-footer) { border-top: 3px solid transparent !important; border-image: linear-gradient(90deg,#00b9d5,#7638b8,#e92a98,#ef4c43) 1 !important; }
/* Head lines are a layer above the head, not a border-image: Safari drops a border-image while the head animates inside it. */
:is(.mb-elementor-page, .mbpse-curated) .mb-edge-head { border-bottom: 0 !important; border-image: none !important; }
:is(.mb-elementor-page, .mbpse-curated) .mb-edge-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 2; background: linear-gradient(90deg,#00b9d5,#7638b8,#e92a98,#ef4c43); pointer-events: none; }
:is(.mb-elementor-page, .mbpse-curated) .mb-page-edge::after { height: 3px; }
.mb-elementor-page main .elementor > .mb-page-edge-region:last-child .mb-page-edge::after { content: none; }
.mbep-footer-bottom > .elementor-container { border-top: 1px solid transparent; border-image: linear-gradient(90deg,#00b9d5,#7638b8,#e92a98,#ef4c43) 1; }
.mb-elementor-page main .mb-plan-detail { border-top: 2px solid transparent; border-image: linear-gradient(90deg,#00b9d5,#7638b8,#e92a98,#ef4c43) 1; }
.mb-elementor-page main .mb-case-detail + .mb-case-detail > .elementor-container { border-top: 2px solid transparent; border-image: linear-gradient(90deg,#00b9d5,#7638b8,#e92a98,#ef4c43) 1; }
/* Eigen werk: line and head closer to the intro; less white between the projects. */
.mb-elementor-page main .mb-brand-hero--work .mb-page-edge { margin-top: -4px !important; }
@media (min-width: 1025px) {
  .mb-elementor-page main section.mb-project-row { padding-block: 56px; }
}
/* Mobile: heads rise with the scroll on the compositor where scroll timelines exist; page-theme.js covers the rest. */
@supports (animation-timeline: view()) {
  @media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
    /* clip instead of hidden: a hidden ancestor is a scroll container that never scrolls, which freezes the timeline. */
    :is(.mb-elementor-page, .mbpse-curated) :is(.elementor-section, .e-con):has(.mb-edge-head) { overflow: clip !important; }
    :is(.mb-elementor-page, .mbpse-curated) .mb-edge-head { view-timeline: --mb-head block; }
    body:is(.mb-elementor-page, .mbpse-curated) .mb-edge-head.mb-edge-head img { transform: none !important; animation: mb-head-peek cubic-bezier(.45,0,.55,1) both !important; animation-timeline: --mb-head !important; animation-range: cover 19% cover 45% !important; will-change: translate; }
  }
}
@keyframes mb-head-peek { from { translate: 0 72px; } to { translate: 0 0; } }

/* Eigen werk: productrijen met beeldoverlays (Happr, OMNI) */
.mb-elementor-page main .mb-project-omni.light { background: #efefed; }
.mb-elementor-page main .mb-showcase { position: relative; display: block; padding: 0 0 64px; color: inherit; text-decoration: none; }
.mb-elementor-page main .mb-showcase img { display: block; width: 100%; height: auto; }
.mb-elementor-page main .mb-showcase__main { position: relative; display: block; margin-left: 9%; box-shadow: 0 16px 38px rgba(0,0,0,.12); }
.mb-elementor-page main .mb-showcase__main::after,
.mb-elementor-page main .mb-showcase__inset::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: linear-gradient(90deg,#00b9d5,#7638b8,#e92a98,#ef4c43); }
.mb-elementor-page main .mb-showcase__inset { position: absolute; left: 0; bottom: 0; width: 52%; display: block; border: 6px solid #fff; background: #fff; box-shadow: 0 22px 44px rgba(0,0,0,.2); transition: transform .45s cubic-bezier(.22,1,.36,1); }
.mb-elementor-page main .mb-showcase__inset::after { left: -6px; right: -6px; bottom: -9px; }
.mb-elementor-page main .mb-showcase__chips { position: absolute; top: 22px; right: -14px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mb-elementor-page main .mb-showcase__chips li { padding: 7px 12px 6px; background: #222; color: #fff; font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: .01em; border-bottom: 2px solid transparent; border-image: linear-gradient(90deg,#00b9d5,#7638b8,#e92a98,#ef4c43) 1; box-shadow: 0 8px 18px rgba(0,0,0,.18); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .mb-elementor-page main a.mb-showcase:hover .mb-showcase__inset { transform: translate(-6px, -6px); }
}
.mb-elementor-page main a.mb-showcase:focus-visible { outline: 2px solid #7638b8; outline-offset: 6px; }
@media (max-width: 767px) {
  .mb-elementor-page main .mb-showcase { padding-bottom: 0; }
  .mb-elementor-page main .mb-showcase__main { margin-left: 0; }
  .mb-elementor-page main .mb-showcase__inset { position: relative; width: 78%; margin: -18% 0 0 auto; border-width: 4px; }
  .mb-elementor-page main .mb-showcase__inset::after { left: -4px; right: -4px; bottom: -7px; }
  .mb-elementor-page main .mb-showcase__chips { position: static; flex-direction: row; flex-wrap: wrap; align-items: flex-start; margin-top: 22px; }
  .mb-elementor-page main .mb-showcase__chips li { font-size: 12px; }
}

/* Header als glasbalk: halfdoorzichtig met blur; tint volgt het vlak eronder (--mb-header-surface uit header-colors.js) */
.mb-elementor-page .mbep-header-brand {
  background: color-mix(in srgb, var(--mb-header-surface, #fff) 55%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .08), 0 8px 24px rgba(0, 0, 0, .06);
  transition: background-color .35s cubic-bezier(.4, 0, .2, 1), box-shadow .35s cubic-bezier(.4, 0, .2, 1);
}
/* Logo- en menukleur wisselen even soepel mee met de glasbalk */
.mb-elementor-page .mbep-header-brand .site-title .elementor-heading-title,
.mb-elementor-page .mbep-header-brand .site-title .elementor-heading-title a,
.mb-elementor-page .mb-desktop-nav { transition: color .35s cubic-bezier(.4, 0, .2, 1); }
.mb-elementor-page .hamburger:not(.active) .line { transition: background-color .35s cubic-bezier(.4, 0, .2, 1), left .5s; }
@media (prefers-reduced-motion: reduce) {
  .mb-elementor-page .mbep-header-brand,
  .mb-elementor-page .mbep-header-brand .site-title .elementor-heading-title,
  .mb-elementor-page .mbep-header-brand .site-title .elementor-heading-title a,
  .mb-elementor-page .mb-desktop-nav,
  .mb-elementor-page .hamburger:not(.active) .line { transition: none; }
}
.mb-elementor-page[data-mb-logo-tone="light"] .mbep-header-brand { box-shadow: 0 1px 0 rgba(255, 255, 255, .12), 0 8px 24px rgba(0, 0, 0, .25); }
.mb-elementor-page.active .mbep-header-brand { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.mb-elementor-page main .mb-project-voorbeeldzinnen.light { background: #efefed; }