/* Fast Flow Solutions — branding overrides only. */
.logo-mark,
.dash-login-mark,
.dash-brand-mark,
.brand i {
  color: transparent !important;
  font-size: 0 !important;
  letter-spacing: 0 !important;
  background: #0a0a0a url('/logo-mark.svg') center / contain no-repeat !important;
  border: 1px solid #30302e;
  box-sizing: border-box;
  overflow: hidden;
}

.logo-mark b,
.dash-login-mark *,
.dash-brand-mark *,
.brand i b {
  visibility: hidden !important;
}

/* Houd de dienstenconsole stabiel wanneer een ander onderdeel actief wordt. */
@media (min-width: 1051px) {
  .service-console {
    height: 610px;
    min-height: 610px;
    max-height: 610px;
  }

  .service-stage,
  .service-content {
    height: 100%;
    min-height: 0;
  }

  .service-content {
    overflow: hidden;
  }

  .service-content-copy {
    min-height: 0;
    max-height: 100%;
    overflow: auto;
    overscroll-behavior: contain;
  }

  .service-visual {
    height: 430px;
    min-height: 430px;
    max-height: 430px;
  }
}

@media (min-width: 761px) and (max-width: 1050px) {
  .service-console {
    height: 920px;
    min-height: 920px;
    max-height: 920px;
  }

  .service-stage,
  .service-content {
    height: 100%;
    min-height: 0;
  }

  .service-content {
    grid-template-rows: minmax(0, 1fr) 330px;
    overflow: hidden;
  }

  .service-content-copy {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
  }

  .service-visual {
    height: 330px;
    min-height: 330px;
    max-height: 330px;
  }
}

.service-rail button {
  min-height: 0;
}

/* Mobiel: laat de dienstenconsole deel uitmaken van de normale paginaflow.
   Geen geneste scrollkaders, afgekapte titels of horizontale scrollbalken. */
@media (max-width: 760px) {
  .service-console {
    width: 100%;
    max-width: 100%;
    height: 1060px;
    min-height: 1060px;
    max-height: 1060px;
    grid-template-rows: 168px minmax(0, 1fr);
    overflow: hidden;
  }

  .service-rail {
    height: 168px;
    min-height: 168px;
    max-height: 168px;
  }

  .service-stage,
  .service-content,
  .service-content-copy,
  .service-visual {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .service-stage {
    height: 892px;
    min-height: 892px;
    max-height: 892px;
    overflow: hidden;
  }

  .service-content {
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    overflow: hidden;
  }

  .service-content-copy {
    height: auto;
    min-height: 0;
    max-height: 100%;
    overflow: visible;
  }

  .service-content {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 245px;
    align-items: start;
  }

  .service-content-copy h3 {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    font-size: clamp(2.35rem, 13vw, 3.35rem);
    line-height: 0.98;
  }

  .service-tags,
  .service-tags span {
    max-width: 100%;
  }

  .service-visual {
    height: 245px;
    min-height: 245px;
    max-height: 245px;
    margin-top: 0;
    overflow: hidden;
  }

  .service-visual > * {
    max-width: 100%;
  }
}

@media (max-width: 380px) {
  .service-console {
    height: 1120px;
    min-height: 1120px;
    max-height: 1120px;
  }

  .service-stage {
    height: 952px;
    min-height: 952px;
    max-height: 952px;
  }
}

/* iOS Safari: render de hero-preview direct, zonder dat een eerste aanraking
   nodig is. Negatieve z-indexlagen in een 3D-context worden door Safari soms
   pas na een hover/touch opnieuw gerasterd. */
@supports (-webkit-touch-callout: none) {
  .hero-sites {
    isolation: isolate;
    contain: none !important;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  .hero-site {
    visibility: hidden;
    pointer-events: none;
    -webkit-transform: none !important;
    transform: none !important;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
  }

  .hero-site.active {
    z-index: 2;
    visibility: visible !important;
    pointer-events: auto;
    opacity: 1 !important;
  }

  .hero-site.active .mini-site-v2 {
    z-index: 0;
    opacity: 1 !important;
    visibility: visible !important;
    isolation: isolate;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
  }

  .hero-site.active .mini-photo-v2,
  .hero-site.active .mini-shade {
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
  }

  .hero-site.active .mini-photo-v2 {
    z-index: 0 !important;
    -webkit-transform: translate3d(0, 0, 0) scale(1.015) !important;
    transform: translate3d(0, 0, 0) scale(1.015) !important;
  }

  .hero-site.active .mini-shade {
    z-index: 1 !important;
  }

  .hero-site.active .mini-nav-v2,
  .hero-site.active .mini-copy-v2,
  .hero-site.active .mini-meta-v2,
  .hero-site.active .mini-index-v2,
  .hero-site.active .mini-marquee-v2,
  .hero-site.active .demo-cursor {
    z-index: 2 !important;
    opacity: 1;
    visibility: visible;
  }
}

@supports (-webkit-touch-callout: none) {
  @media (max-width: 760px) {
    .floating-screen {
      -webkit-transform: translateZ(0) !important;
      transform: translateZ(0) !important;
      transform-style: flat !important;
      animation: none !important;
    }

    .screen-reflection,
    .screen-glare,
    .hero-cursor {
      display: none !important;
    }
  }
}