:where(.case-studies-stage:has([data-related-case-studies])) {
  container-type: inline-size;
}

:where([data-related-case-studies] .case-studies-track) {
  position: relative;
  width: 100%;
  height: 485px;
  overflow: hidden;
  overflow: clip;
  overflow-clip-margin: 80px;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

:where([data-related-case-studies] .case-study-card) {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  max-width: none;
  aspect-ratio: auto;
  cursor: pointer;
  opacity: 1;
  overflow: visible;
  transition: left 0.55s cubic-bezier(0.25, 1, 0.4, 1), top 0.55s cubic-bezier(0.25, 1, 0.4, 1), width 0.55s cubic-bezier(0.25, 1, 0.4, 1), opacity 0.55s ease, z-index 0.55s ease, visibility 0s;
  will-change: left, top, width, opacity;
}

:where([data-related-case-studies] .case-study-card.is-snap),
:where([data-related-case-studies] .case-study-card.is-snap *) {
  transition: none !important;
}

:where([data-related-case-studies] .case-study-media) {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 2.6;
  overflow: hidden;
  border-radius: 28px;
  background-color: var(--_colors---core-neutral-color--neutral-primary);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
  color: inherit;
  text-decoration: none;
  transition: border-radius 0.55s ease, box-shadow 0.55s ease;
}

:where([data-related-case-studies] .case-study-img) {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 2.6;
  border-radius: 16px;
  object-fit: cover;
  transition: opacity 0.55s ease;
}

:where([data-related-case-studies] .case-study-card.slot-primary) {
  top: 0;
  left: 0;
  width: 600px;
  z-index: 3;
  visibility: visible;
}

:where([data-related-case-studies] .case-study-card.slot-secondary) {
  top: 32px;
  left: 520px;
  width: 500px;
  z-index: 2;
  visibility: visible;
}

:where([data-related-case-studies] .case-study-card.slot-secondary .case-study-img) {
  opacity: 0.7;
}

:where([data-related-case-studies] .case-study-card.slot-secondary .case-study-media) {
  border-radius: 24px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

:where([data-related-case-studies] .case-study-card.slot-third) {
  top: 68px;
  left: 855px;
  width: 390px;
  z-index: 1;
  visibility: visible;
}

:where([data-related-case-studies] .case-study-card.slot-third .case-study-img) {
  opacity: 0.45;
}

:where([data-related-case-studies] .case-study-card.slot-third .case-study-media) {
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

:where([data-related-case-studies] .case-study-card.slot-hidden) {
  top: 90px;
  left: 1100px;
  width: 300px;
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: left 0.55s cubic-bezier(0.25, 1, 0.4, 1), top 0.55s cubic-bezier(0.25, 1, 0.4, 1), width 0.55s cubic-bezier(0.25, 1, 0.4, 1), opacity 0.55s ease, z-index 0.55s ease, visibility 0s linear 0.55s;
}

:where([data-related-case-studies] .active-project-text-stage) {
  position: absolute;
  top: 405px;
  left: 0;
  width: 600px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}

:where([data-related-case-studies] .active-project-text-stage),
:where([data-related-case-studies] .active-project-text-stage *) {
  text-align: center;
}

:where([data-related-case-studies] .case-study-card.slot-primary .case-study-media)::after,
:where([data-related-case-studies] .case-study-card.slot-primary .case-study-media)::before {
  opacity: 1;
  transform: scale(1);
}

:where([data-related-case-studies] .case-study-media)::after {
  content: "";
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 42px;
  height: 42px;
  z-index: 1;
  border-radius: 50%;
  background-color: var(--_colors---core-neutral-color--neutral-primary);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.35s ease, transform 0.35s ease, background-color 0.25s ease;
}

:where([data-related-case-studies] .case-study-media)::before {
  content: "";
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 42px;
  height: 42px;
  z-index: 2;
  background-color: #141415;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'/%3E%3Cpolyline points='8 7 17 7 17 16'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'/%3E%3Cpolyline points='8 7 17 7 17 16'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.35s ease, transform 0.35s ease, background-color 0.25s ease;
}

:where([data-related-case-studies] .case-study-card.slot-primary .case-study-media:hover)::after {
  background-color: var(--_colors---core-accent-color--accent-primary);
  transform: scale(1.12);
}

:where([data-related-case-studies] .case-study-card.slot-primary .case-study-media:hover)::before {
  background-color: var(--_colors---text-color--text-on-accent-primary);
  transform: scale(1.12);
}

@media screen and (max-width: 991px) {
  :where([data-related-case-studies] .case-studies-track) {
    height: 430px;
  }

  :where([data-related-case-studies] .active-project-text-stage) {
    top: 310px;
    width: 450px;
    padding: 0 64px;
    box-sizing: border-box;
  }

  :where([data-related-case-studies] .case-study-card.slot-primary) {
    width: 450px;
  }

  :where([data-related-case-studies] .case-study-card.slot-secondary) {
    top: 25px;
    left: 385px;
    width: 370px;
  }

  :where([data-related-case-studies] .case-study-card.slot-third) {
    top: 50px;
    left: 630px;
    width: 290px;
  }
}

@media screen and (min-width: 479px) and (max-width: 767px) {
  :where([data-related-case-studies] .case-studies-track) {
    height: calc(36.4cqw + 18px + var(--cs-text-h, 80px));
  }

  :where([data-related-case-studies] .active-project-text-stage) {
    top: calc(36.4cqw + 18px);
    left: 22%;
    width: 56%;
    padding: 0;
  }

  :where([data-related-case-studies] .case-study-card.slot-primary) {
    top: 0;
    left: 22%;
    width: 56%;
  }

  :where([data-related-case-studies] .case-study-card.slot-secondary) {
    top: 7.15cqw;
    left: 66%;
    width: 34%;
  }

  :where([data-related-case-studies] .case-study-card.slot-third) {
    top: 7.15cqw;
    left: 0;
    width: 34%;
  }
}

@media screen and (max-width: 478px) {
  :where([data-related-case-studies] .case-studies-track) {
    height: calc(65cqw + 18px + var(--cs-text-h, 80px));
  }

  :where([data-related-case-studies] .active-project-text-stage) {
    top: calc(65cqw + 18px);
    left: 50%;
    width: 100%;
    padding: 0;
    transform: translateX(-50%);
  }

  :where([data-related-case-studies] .case-study-card.slot-primary),
  :where([data-related-case-studies] .case-study-card.slot-secondary),
  :where([data-related-case-studies] .case-study-card.slot-third),
  :where([data-related-case-studies] .case-study-card.slot-hidden) {
    top: 0;
    width: 100%;
    transform: translateX(-50%);
  }

  :where([data-related-case-studies] .case-study-card.slot-primary) {
    left: 50%;
  }

  :where([data-related-case-studies] .case-study-card.slot-secondary),
  :where([data-related-case-studies] .case-study-card.slot-third),
  :where([data-related-case-studies] .case-study-card.slot-hidden) {
    left: 150%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/*
 * Webflow's homepage carousel classes are global. On case-study pages its
 * lower-scoped card rules otherwise turn these cards back into flex children.
 * Keep the homepage slot model, but make it authoritative only for this embed.
 */
[data-related-case-studies] .case-studies-track {
  position: relative;
  width: 100%;
  height: 485px;
  overflow: hidden;
  overflow: clip;
  overflow-clip-margin: 80px;
}

[data-related-case-studies] .case-study-card {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  max-width: none;
  aspect-ratio: auto;
  cursor: pointer;
  opacity: 1;
  overflow: visible;
  transition: left 0.55s cubic-bezier(0.25, 1, 0.4, 1), top 0.55s cubic-bezier(0.25, 1, 0.4, 1), width 0.55s cubic-bezier(0.25, 1, 0.4, 1), opacity 0.55s ease, z-index 0.55s ease, visibility 0s;
  will-change: left, top, width, opacity;
}

[data-related-case-studies] .case-studies-track.is-dragging,
[data-related-case-studies] .case-studies-track.is-dragging * {
  cursor: grabbing;
}

[data-related-case-studies] .case-study-card.slot-primary {
  top: 0;
  left: 0;
  width: 600px;
  z-index: 3;
  visibility: visible;
}

[data-related-case-studies] .case-study-card.slot-secondary {
  top: 32px;
  left: 520px;
  width: 500px;
  z-index: 2;
  visibility: visible;
}

[data-related-case-studies] .case-study-card.slot-third {
  top: 68px;
  left: 855px;
  width: 390px;
  z-index: 1;
  visibility: visible;
}

[data-related-case-studies] .case-study-card.slot-hidden {
  top: 90px;
  left: 1100px;
  width: 300px;
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: left 0.55s cubic-bezier(0.25, 1, 0.4, 1), top 0.55s cubic-bezier(0.25, 1, 0.4, 1), width 0.55s cubic-bezier(0.25, 1, 0.4, 1), opacity 0.55s ease, z-index 0.55s ease, visibility 0s linear 0.55s;
}

[data-related-case-studies] .active-project-text-stage {
  position: absolute;
  top: 405px;
  left: 0;
  width: 600px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  padding: 0 64px;
  box-sizing: border-box;
}

[data-related-case-studies] .active-project-text-stage [data-related-case-studies-title],
[data-related-case-studies] .active-project-text-stage [data-related-case-studies-summary] {
  width: auto;
  max-width: 100%;
  text-align: center;
}

[data-related-case-studies] .case-study-card.slot-secondary .case-study-img {
  opacity: 0.7;
}

[data-related-case-studies] .case-study-card.slot-secondary .case-study-media {
  border-radius: 24px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

[data-related-case-studies] .case-study-card.slot-third .case-study-img {
  opacity: 0.45;
}

[data-related-case-studies] .case-study-card.slot-third .case-study-media {
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

[data-related-case-studies] .case-study-card.slot-primary .case-study-media::after,
[data-related-case-studies] .case-study-card.slot-primary .case-study-media::before {
  opacity: 1;
  transform: scale(1);
}

[data-related-case-studies] .case-study-card.slot-primary .case-study-media:hover::after {
  background-color: var(--_colors---core-accent-color--accent-primary);
  transform: scale(1.12);
}

[data-related-case-studies] .case-study-card.slot-primary .case-study-media:hover::before {
  background-color: var(--_colors---text-color--text-on-accent-primary);
  transform: scale(1.12);
}

@media screen and (max-width: 991px) {
  [data-related-case-studies] .case-studies-track {
    height: 430px;
  }

  [data-related-case-studies] .active-project-text-stage {
    top: 310px;
    width: 450px;
    padding: 0 64px;
    box-sizing: border-box;
  }

  [data-related-case-studies] .case-study-card.slot-primary {
    width: 450px;
  }

  [data-related-case-studies] .case-study-card.slot-secondary {
    top: 25px;
    left: 385px;
    width: 370px;
  }

  [data-related-case-studies] .case-study-card.slot-third {
    top: 50px;
    left: 630px;
    width: 290px;
  }
}

@media screen and (min-width: 479px) and (max-width: 767px) {
  [data-related-case-studies] .case-studies-track {
    height: calc(36.4cqw + 18px + var(--cs-text-h, 80px));
  }

  [data-related-case-studies] .active-project-text-stage {
    top: calc(36.4cqw + 18px);
    left: 22%;
    width: 56%;
    padding: 0;
  }

  [data-related-case-studies] .case-study-card.slot-primary {
    top: 0;
    left: 22%;
    width: 56%;
  }

  [data-related-case-studies] .case-study-card.slot-secondary {
    top: 7.15cqw;
    left: 66%;
    width: 34%;
  }

  [data-related-case-studies] .case-study-card.slot-third {
    top: 7.15cqw;
    left: 0;
    width: 34%;
  }
}

@media screen and (max-width: 478px) {
  [data-related-case-studies] .case-studies-track {
    height: calc(65cqw + 18px + var(--cs-text-h, 126px));
  }

  [data-related-case-studies] .active-project-text-stage {
    top: calc(65cqw + 18px);
    left: 50%;
    width: 100%;
    padding: 0;
    transform: translateX(-50%);
  }

  [data-related-case-studies] .case-study-card.slot-primary,
  [data-related-case-studies] .case-study-card.slot-secondary,
  [data-related-case-studies] .case-study-card.slot-third,
  [data-related-case-studies] .case-study-card.slot-hidden {
    top: 0;
    width: 100%;
    transform: translateX(-50%);
  }

  [data-related-case-studies] .case-study-card.slot-primary {
    left: 50%;
  }

  [data-related-case-studies] .case-study-card.slot-secondary,
  [data-related-case-studies] .case-study-card.slot-third,
  [data-related-case-studies] .case-study-card.slot-hidden {
    left: 150%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where([data-related-case-studies] .case-study-card),
  :where([data-related-case-studies] .case-study-card *),
  :where([data-related-case-studies] .case-study-media)::before,
  :where([data-related-case-studies] .case-study-media)::after {
    transition: none !important;
  }
}