:root {
  --logo-size: 128px;
}

/* =======================
   HERO CLIENT MOBILE/TABLET
======================= */
.hero-client-mobile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: #e9ecef;
  text-align: center;
  padding: 2rem 1rem 0;
  overflow: visible;
}

/* Tekst mobiel */
.hero-client-mobile h1 {
  font-size: 3rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
}
.hero-client-mobile h2 {
  font-size: 1.5rem;
  margin-top: -0.25rem;
  text-transform: uppercase;
}
.hero-client-mobile h3 {
  font-weight: 300;
  margin-bottom: 1.5rem;
}

/* Media-wrapper: video mobiel/tablet */
.hero-client-mobile-media {
  position: relative;
  width: 100%;
  overflow: visible;
}

.hero-client-mobile-media video {
  width: 100%;
  height: auto;
  display: block;
}

/* Witte balk mobiel/tablet */
.hero-client-mobile-logo-bg {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: calc(var(--logo-size)/2);
  background-color: #fff;
  z-index: 1;
}

/* Logo mobiel/tablet */
.hero-client-mobile .hero-client-mobile-logo {
  position: absolute;
  left: 50%;
  bottom: calc(var(--logo-size)/2);
  transform: translateX(-50%) translateY(50%);
  width: var(--logo-size);
  height: var(--logo-size);
  border-radius: 50%;
  background: white;
  z-index: 2;
}

/* Responsief: logo iets kleiner */
@media (max-width: 768px) {

	  :root {
    --logo-size: 96px;
  }
	
}

/* Tablet liggend 768-991px */
@media (min-width: 768px) and (max-width: 991.98px) {
  .hero-client-mobile-media {
    width: 50%;
    margin: 0 auto;
  }
}

/* =======================
   HERO CLIENT DESKTOP
======================= */
.hero-client-desktop {
  position: relative;
  width: 100%;
  height: 65vh;
  overflow: visible;
  display: flex;
  align-items: center;
  background-color: #e9ecef;
}

.hero-client-desktop .container .row > .col-12.col-lg-6.text-col {
  z-index: 2;
}

/* Video rechts */
.hero-client-video-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.hero-client-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left bottom;
}

/* Tekst desktop */
.hero-client-desktop h1 {
  font-size: 6rem;
  font-weight: 400;
}
.hero-client-desktop h2 {
  font-size: 2rem;
  text-transform: uppercase;
}
.hero-client-desktop h3 {
  font-weight: 300;
}

/* Logo desktop */
.hero-client-logo {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) translateY(50%);
  width: var(--logo-size);
  height: var(--logo-size);
  border-radius: 50%;
  background: white;
  z-index: 3;
}

/* =======================
   RESPONSIVE SWITCH
======================= */
/* Desktop zichtbaar, mobiel verborgen */
@media (min-width: 992px) {
  .hero-client-desktop { display: flex; }
  .hero-client-mobile  { display: none; }
	
  .client-intro-container {
    padding-top: calc(var(--logo-size) / 2);
  }
}

/* Mobiel/tablet zichtbaar, desktop verborgen */
@media (max-width: 991.98px) {
  .hero-client-desktop { display: none; }
  .hero-client-mobile  { display: flex; }
}

/* ===== Extra ruimte onder hero ===== */
.hero-spacing {
  background-color: #fff;
  width: 100%;
  height: 64px;
}