/* ===== WAAROM WIJ — SCROLL-SHUFFLE STACK ===== */
.why-us-section {
  background-color: var(--color-surface);
  padding-bottom: 0;
}

.why-us-pin-wrap {
  position: relative;
  height: 200vh;
}

.why-us-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-us-stack {
  position: relative;
  width: min(100%, 75rem);
  height: min(82vh, 44rem);
}

.why-us-stack-item {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  opacity: 0;
  transform: translateY(1rem) scale(0.97);
  pointer-events: none;
  transition: opacity 0.45s ease, transform 0.45s ease;
}

/* Welke kaart actief is, wordt bepaald door js/whyus.js op basis van een
   vaste scroll-range — geen scroll-gedreven blend, gewoon een harde wissel
   met deze vaste CSS-transitie. */
.why-us-stack-item.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.why-us-card {
  display: flex;
  align-items: center;
  gap: var(--space-3xl);
  width: 100%;
  height: min(70vh, 36rem);
  background: var(--color-bg);
  border: 0.0625rem solid var(--color-border-light);
  border-top: 0.1875rem solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-3xl);
  box-shadow: var(--shadow-lg);
}

.why-us-card-body {
  flex: 1 1 48%;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.why-us-card-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
}

.why-us-card-body p {
  font-size: var(--text-lg);
  color: var(--color-text);
  line-height: 1.7;
  max-width: none;
}

.why-us-card-icon {
  flex: 0 0 45%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.why-us-card-icon svg,
.why-us-card-icon img {
  width: 100%;
  max-width: 22rem;
  height: auto;
}

.why-us-card-empty {
  border-top-color: var(--color-border);
}

.why-us-card-empty .why-us-card-icon {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.why-us-scroll-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-primary-darker);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.why-us-arrow-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
  background-color: var(--color-primary-muted);
  animation: why-us-bounce 1.6s ease-in-out infinite;
}

@keyframes why-us-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(0.5rem); }
}

/* ===== STATISCHE FALLBACK (mobiel / prefers-reduced-motion) ===== */
.why-us-pin-wrap.is-static {
  height: auto;
}

.why-us-pin-wrap.is-static .why-us-sticky {
  position: static;
  height: auto;
}

.why-us-pin-wrap.is-static .why-us-stack {
  position: static;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  width: 100%;
  height: auto;
}

.why-us-pin-wrap.is-static .why-us-stack-item {
  position: static;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: none;
  gap: 0;
}

.why-us-pin-wrap.is-static .why-us-card {
  height: auto;
}

.why-us-pin-wrap.is-static .why-us-scroll-indicator {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .why-us-arrow-icon {
    animation: none;
  }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 64rem) {
  .why-us-stack {
    height: min(88vh, 48rem);
  }

  .why-us-card {
    height: 100%;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto;
    text-align: center;
  }

  .why-us-card-icon {
    order: -1;
    flex: 0 0 auto;
  }

  .why-us-card-icon svg,
  .why-us-card-icon img {
    max-width: 13rem;
  }
}

@media (max-width: 48rem) {
  .why-us-stack {
    height: auto;
  }
}