.philosophy-clientsay-stack {
  position: relative;
  isolation: isolate;
}

/* Pinned philosophy background (like contact bg on home) */
.philosophy-clientsay-stack__bg {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  margin-bottom: -100dvh;
  z-index: 0;
  background: url("../img/about3bg.png") center center / cover no-repeat;
  background-color: #5f7f8f;
  pointer-events: none;
}

.philosophy-clientsay-stack #yay-philosophy-section {
  position: relative;
  z-index: 1;
}

.philosophy-clientsay-stack #clientsay-section {
  position: relative;
  z-index: 2;
}

.philosophy-clientsay-stack .clientsay-pin {
  will-change: transform;
  backface-visibility: hidden;
}

.philosophy-clientsay-stack .clientsay-pin.is-clientsay-parallax {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Client Say pin + footer overlay (same as home) */
.philosophy-clientsay-stack .clientsay-pin {
  position: relative;
  z-index: 2;
  height: 200vh;
  height: calc(100dvh + 100dvh);
}

.philosophy-clientsay-stack .clientsay-pin .clientsay {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
}

.about-page #footer-section {
  position: relative;
  z-index: 10;
  margin-top: -100vh;
  margin-top: -100dvh;
}

@media (max-width: 900px) {
  .philosophy-clientsay-stack__bg {
    position: relative;
    top: auto;
    height: min(56vh, 420px);
    min-height: 280px;
    margin-bottom: 0;
    background-position: 70% center;
  }

  .philosophy-clientsay-stack .clientsay-pin {
    height: auto;
  }

  .philosophy-clientsay-stack .clientsay-pin .clientsay {
    position: relative;
    top: auto;
    height: auto;
    min-height: auto;
    max-height: none;
  }

  .about-page #footer-section {
    margin-top: 0;
  }
}

@media (max-width: 768px) {
  .philosophy-clientsay-stack__bg {
    height: min(50vh, 360px);
    min-height: 240px;
    background-position: center center;
  }
}

@media (max-width: 480px) {
  .philosophy-clientsay-stack__bg {
    background-position: 68% 40%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .philosophy-clientsay-stack .clientsay-pin,
  .philosophy-clientsay-stack .clientsay-pin.is-clientsay-parallax {
    transform: none !important;
    transition: none !important;
  }
}