/* =============================
   Team gallery: foto, naam, achternaam, functie
   ============================= */
.team-gallery-row {
  display: flex;
  flex-direction: row;
  gap: 1.2rem;
  overflow-x: auto;
  padding: 1rem 0;
  scroll-behavior: smooth;
}
.team-gallery-card {
  min-width: 140px;
  max-width: 160px;
  background: #18181b;
  border-radius: 1rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  padding: 1rem 0.5rem 0.7rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.team-gallery-card img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 0.5rem;
  box-shadow: 0 0 0 2px #fff2, 0 2px 8px #0002;
}
.team-gallery-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0.2rem;
}
.team-gallery-first {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}
.team-gallery-last {
  font-size: 1rem;
  font-weight: 400;
  color: #d4d4d8;
}
.team-gallery-role {
  font-size: 0.9rem;
  color: #bdbdbd;
  text-align: center;
  margin-top: 0.2rem;
}
@media (max-width: 640px) {
  .team-gallery-card {
    min-width: 110px;
    max-width: 130px;
    padding: 0.7rem 0.2rem 0.5rem 0.2rem;
  }
  .team-gallery-card img {
    width: 44px;
    height: 44px;
  }
  .team-gallery-first, .team-gallery-last {
    font-size: 0.95rem;
  }
  .team-gallery-role {
    font-size: 0.85rem;
  }
}
/* =============================
   Mobile (<=640px)
   ============================= */
@media (max-width: 640px) {
  .hero-mobile-spacer { display:block; height:120px; width:100%; }
  /* Mobile hero achtergrond met zoom; !important voorkomt override door basisregel */
  .hero-bg-img { object-position:center bottom !important; object-fit:cover; transform:scale(1.15) !important; transform-origin:50% 100%; transition:transform 280ms ease; will-change:transform; width:100%; height:100%; display:block; }
  .hero-bg-img.zoom-100 { transform:scale(1) !important; }
  .hero-bg-img.zoom-120 { transform:scale(1.2) !important; }
  .hero-mobile-offset { margin-top:calc(9.25rem - 5mm) !important; }
}

/* =============================
   Kleine tablets (641px–768px)
   Veel grote merken houden lichte crop/zoom aan tot en met tablet portrait
   ============================= */
@media (min-width: 641px) and (max-width: 768px) {
  .hero-bg-img { object-position:center 45% !important; transform:scale(1.12) !important; }
}

/* Reduced motion respecteren: geen animatie / zoom */
@media (prefers-reduced-motion: reduce) {
  .hero-bg-img { transition:none !important; transform:none !important; }
}

@media (min-width: 641px) {
  .hero-mobile-spacer { display: none; }
  .hero-mobile-offset { margin-top: 0 !important; }
}

/* Basis hero image stijl (desktop & fallback) */
.hero-bg-img { object-fit:cover; object-position:center 35% !important; transform:none; transition:none; width:100%; height:100%; display:block; z-index:1; }
/* If you are not using Tailwind CSS build tools, remove these lines. Otherwise, make sure your build process supports Tailwind. */

/* Case tiles styling fixes */
#cases-grid .group {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#cases-grid .group a {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#cases-grid .group .aspect-video {
  flex-shrink: 0;
}

#cases-grid .group .p-5 {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 120px;
}

#cases-grid .group h3 {
  flex-shrink: 0;
}

#cases-grid .group p {
  flex: 1;
  margin-bottom: 0;
}

/* Ensure grid items stretch to equal height */
#cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

@media (min-width: 640px) {
  #cases-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  #cases-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.text-gradient {
  background-image: linear-gradient(90deg, #818cf8, #d8b4fe);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.glow {
  box-shadow: 0 0 40px rgba(99,102,241,.35), 0 0 80px rgba(168,85,247,.25);
}
.glass {
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 1.5rem;
  z-index: 2;
}
.hp-wrap {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* Voeg een zwarte achtergrond toe aan de headerbalk */
.div.flex.h-16.items-center.justify-between {
  background-color: #000;
}/* Alternatief voor Tailwind: als je geen custom selector wilt gebruiken, kun je een extra class toevoegen in de HTML, bijvoorbeeld 'headerbar', en dan .headerbar { background-color: #000; } gebruiken. */

/* Titel tekst afbreken wanneer deze over de helft van de pagina komt - alleen hele woorden */
h1 {
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}

/* Extra zekerheid voor de hero titel - alleen hele woorden */
#heroText h1 {
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  z-index: 20;
}

/* Responsive titel breedte */
@media (max-width: 767px) {
  #heroText h1 {
    max-width: 50vw;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  #heroText h1 {
    max-width: 60vw;
  }
}

@media (min-width: 1024px) {
  #heroText h1 {
    max-width: 50vw;
  }
}

/* Smooth scroll for in-page anchors */
html { scroll-behavior: smooth; }
/* Sticky header offset voor anchors */
section[id] { scroll-margin-top:5.5rem; }

/* Fluid hero titel (fallback naast Tailwind klassen) */
.hero-title { font-size:clamp(2.25rem, 6vw, 3.75rem) !important; line-height:1.05 !important; }

/* =============================
   Subtiele tekstgrijs alleen op echt donkere vlakken
   ============================= */
:root { --vr-on-dark-grey: 217,217,217; } /* #d9d9d9 */

/* Alleen toepassen binnen containers die donker zijn */
.bg-black, .bg-black\/95, .bg-black\/90, .bg-black\/80, .bg-\[\#0b0b12\],
header.bg-black, header.bg-black\/95, body.bg-\[\#0b0b12\] {
  --local-on-dark: var(--vr-on-dark-grey);
}

/* Gebruik local var voor directe tekstknoop (fallback blijft wit elders) */
.bg-black, .bg-black\/95, .bg-black\/90, .bg-black\/80, .bg-\[\#0b0b12\],
header.bg-black, header.bg-black\/95, body.bg-\[\#0b0b12\] {
  color: rgb(var(--local-on-dark,255,255,255));
}

/* Binnen donkere containers: alle utility varianten die wit aangeven afzwakken */
.bg-black .text-white, .bg-black\/95 .text-white, .bg-black\/90 .text-white, .bg-black\/80 .text-white, .bg-\[\#0b0b12\] .text-white,
.bg-black [class*="text-white/"], .bg-black\/95 [class*="text-white/"], .bg-black\/90 [class*="text-white/"], .bg-black\/80 [class*="text-white/"], .bg-\[\#0b0b12\] [class*="text-white/"] {
  color: rgb(var(--vr-on-dark-grey)) !important;
}

/* Op lichtere achtergronden blijft wit gewoon wit */

/* Hero: altijd helder wit voor alle typografie */
.hero-force-white * { color:#fff !important; }

/* Hero lead expliciet wit (redundant maar expliciet) */
.hero-lead { color:#fff !important; }

/* Case tile description: max 2 regels */
.case-desc {
  line-height:1.35; /* vaste metriek voor consistente hoogte */
  max-height: calc(1.35em * 2); /* exact 2 regels */
  overflow:hidden;
  position:relative;
  display:block;
  word-break:normal;
  overflow-wrap:break-word;
}

/* Bijschrift (paragraaf direct na heading) altijd 100% wit */
h1 + p, h2 + p, h3 + p {
  color: #fff !important;
}
/* Ook binnen donkere containers expliciet wit voor bijschrift */
.bg-black h1 + p, .bg-black h2 + p, .bg-black h3 + p,
.bg-black\/95 h1 + p, .bg-black\/95 h2 + p, .bg-black\/95 h3 + p,
.bg-black\/90 h1 + p, .bg-black\/90 h2 + p, .bg-black\/90 h3 + p,
.bg-black\/80 h1 + p, .bg-black\/80 h2 + p, .bg-black\/80 h3 + p,
.bg-\[\#0b0b12\] h1 + p, .bg-\[\#0b0b12\] h2 + p, .bg-\[\#0b0b12\] h3 + p {
  color: #fff !important;
}

/* =============================
   Team cards horizontaal scrollbaar en compact
   ============================= */
#team-container {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  overflow-x: auto;
  padding: 1rem 0;
  scroll-behavior: smooth;
}
.team-card {
  min-width: 150px;
  max-width: 170px;
  background: #18181b;
  border-radius: 1rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  padding: 1rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  transition: box-shadow 0.2s;
}
.team-card img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 0.5rem;
  box-shadow: 0 0 0 2px #fff2, 0 2px 8px #0002;
}
.team-card .team-name {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.25rem;
  text-align: center;
}
.team-card .team-role {
  font-size: 0.9rem;
  color: #d4d4d8;
  text-align: center;
}
.team-scroll-arrow {
  background: #232323;
  color: #fff;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px #0002;
  cursor: pointer;
  margin: 0 0.5rem;
  font-size: 1.5rem;
  user-select: none;
  border: none;
  transition: background 0.2s;
}
.team-scroll-arrow:hover {
  background: #3b3b3b;
}
@media (max-width: 640px) {
  .team-card {
    min-width: 120px;
    max-width: 140px;
    padding: 0.75rem 0.25rem;
  }
  .team-card img {
    width: 48px;
    height: 48px;
  }
}

/* =============================
   Hide horizontal/vertical scrollbars (cross-browser)
   ============================= */
.scrollbar-hide {
  -ms-overflow-style: none; /* IE and old Edge */
  scrollbar-width: none;    /* Firefox */
}
.scrollbar-hide::-webkit-scrollbar { /* Chrome, Safari, Opera */
  display: none;
}