body.service-website-page #website-hero-design-showcase.is-hero-film-active {
  height: 950svh;
}

body.service-website-page #website-hero-design-showcase .website-hero-detail-copy {
  position: absolute;
  right: 6%;
  bottom: 7.5svh;
  left: 6%;
  z-index: 3;
  margin: 0;
  color: #102d50;
  font-family: "Shippori Mincho B1", serif;
  font-size: clamp(26px, 2.8vw, 42px);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .13em;
  text-align: center;
  text-shadow: 0 2px 18px rgb(255 255 255 / 65%);
  opacity: var(--hero-detail-copy-opacity, var(--hero-detail-caption, 0));
  transform: translateY(calc((1 - var(--hero-detail-copy-opacity, var(--hero-detail-caption, 0))) * 14px));
  pointer-events: none;
}

body.service-website-page #website-hero-design-showcase .website-hero-detail-copy span {
  display: inline-block;
}

/* The upper detail moves to the right, leaving the room on the left for
   its own catch. Both captions stay outside the projected HTML sheet. */
body.service-website-page #website-hero-design-showcase .website-hero-detail-copy--next {
  --hero-detail-copy-opacity: var(--hero-detail-next-caption, 0);
  top: 46%;
  right: auto;
  bottom: auto;
  left: 6%;
  width: 28%;
  text-align: left;
  transform: translateY(calc(-50% + (1 - var(--hero-detail-next-caption, 0)) * 14px));
}

body.service-website-page #website-hero-design-showcase .website-hero-detail-copy--next span {
  display: block;
}

@media (max-width: 900px) {
  body.service-website-page #website-hero-design-showcase.is-hero-film-active {
    height: 530svh;
  }
  body.service-website-page #website-hero-design-showcase .website-hero-detail-copy {
    bottom: 9svh;
    font-size: clamp(24px, 4.8vw, 34px);
    letter-spacing: .09em;
  }
  body.service-website-page #website-hero-design-showcase .website-hero-detail-copy span {
    display: block;
  }
}

@media (max-width: 900px) {
  body.service-website-page #website-hero-design-showcase .website-hero-detail-copy--next {
    top: auto;
    right: 6%;
    bottom: 9svh;
    left: 6%;
    width: auto;
    text-align: center;
    transform: translateY(calc((1 - var(--hero-detail-next-caption, 0)) * 14px));
  }
}

/* Lift only the first mobile detail catch; preserve the next scene and desktop. */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  body.service-website-page #website-hero-design-showcase .website-hero-detail-copy:not(.website-hero-detail-copy--next) {
    bottom: calc(9svh + 24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.service-website-page #website-hero-design-showcase .website-hero-detail-copy--next {
    display: none;
  }
  body.service-website-page #website-hero-design-showcase .website-hero-detail-copy {
    bottom: 2svh;
    font-size: clamp(17px, 2vw, 24px);
    opacity: 1;
    transform: none;
  }
}