/* Both copies of the scene use the extra-long, right-leaning LP print.
   Crop within this scene, never enlarge the document's horizontal scroll area. */
body.service-website-page :is(#website-design-showcase-repeat, #website-hero-design-showcase) {
  display: block;
  height: max(100svh, 640px);
  min-height: 100svh;
  padding: 0;
  overflow: hidden;
}

body.service-website-page :is(#website-design-showcase-repeat, #website-hero-design-showcase).is-lp-scroll-ready {
  height: calc(100svh + var(--lp-scroll-distance, 0px));
  overflow: visible;
}

body.service-website-page :is(#website-design-showcase-repeat, #website-hero-design-showcase) .website-design-showcase-repeat__stage {
  position: relative;
  /* The shared pair centers its children; do not allow shrink-to-fit sizing
     when this wrapper contains absolutely positioned desktop artwork. */
  width: 100%;
  min-width: 0;
  height: max(100svh, 640px);
  overflow: hidden;
  isolation: isolate;
}

body.service-website-page :is(#website-design-showcase-repeat, #website-hero-design-showcase).is-lp-scroll-ready .website-design-showcase-repeat__stage {
  /* The page's body clips horizontal overflow, which can trap native sticky.
     Keep this scene in view with a bounded, scroll-linked translation instead. */
  position: relative;
  top: 0;
  height: 100svh;
  transform: translate3d(0, var(--lp-stage-y, 0px), 0);
}

body.service-website-page :is(#website-design-showcase-repeat, #website-hero-design-showcase) .website-design-pair__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  margin: 0;
  border: 0;
  border-radius: 0;
  opacity: 1;
  filter: none;
  pointer-events: none;
}

body.service-website-page :is(#website-design-showcase-repeat, #website-hero-design-showcase) .website-design-pair__composition {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
}

body.service-website-page :is(#website-design-showcase-repeat, #website-hero-design-showcase) .website-design-pair__composition::before {
  content: none;
}

/* Left editorial copy, matching the movie invitation's type hierarchy. */
body.service-website-page :is(#website-design-showcase-repeat, #website-hero-design-showcase) .website-design-pair__split-copy {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 3;
  display: grid;
  gap: 20px;
  box-sizing: border-box;
  width: 38%;
  padding-inline: clamp(22px, 3vw, 48px);
  margin: 0;
  color: #243a46;
  font-family: var(--te-serif);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .06em;
  writing-mode: horizontal-tb;
  text-align: left;
  white-space: normal;
  text-shadow: 0 1px 12px rgb(255 255 255 / 75%);
  transform: translateY(-50%);
  pointer-events: none;
}

body.service-website-page :is(#website-design-showcase-repeat, #website-hero-design-showcase) .website-design-pair__split-intro {
  display: grid;
  gap: 10px;
}

body.service-website-page :is(#website-design-showcase-repeat, #website-hero-design-showcase) .website-design-pair__split-english {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--te-latin);
  font-size: .75rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .18em;
}

body.service-website-page :is(#website-design-showcase-repeat, #website-hero-design-showcase) .website-design-pair__split-english::before {
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: .65;
  content: "";
}

body.service-website-page :is(#website-design-showcase-repeat, #website-hero-design-showcase) .website-design-pair__split-title {
  margin: 0;
  color: inherit;
  font-family: var(--te-serif);
  font-size: clamp(2rem, 5.5vw, 4rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .06em;
  white-space: nowrap;
}

body.service-website-page :is(#website-design-showcase-repeat, #website-hero-design-showcase) .website-design-pair__split-catch {
  margin: 0;
  color: inherit;
  font-family: var(--te-serif);
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: .04em;
}

body.service-website-page :is(#website-design-showcase-repeat, #website-hero-design-showcase) .website-design-pair__split-catch span {
  display: inline-block;
}


/* Start at the top edge in depth; scroll opens the same sheet into a flat print. */
body.service-website-page :is(#website-design-showcase-repeat, #website-hero-design-showcase) .website-design-showcase-repeat__artwork {
  position: absolute;
  inset: 0 0 0 38%;
  overflow: hidden;
  pointer-events: none;
}

body.service-website-page :is(#website-design-showcase-repeat, #website-hero-design-showcase) .website-design-pair__page {
  position: absolute;
  top: max(84px, 10svh, 4vw);
  left: 50%;
  width: max(52%, 34svh);
  max-width: none;
  margin: 0;
  opacity: 1;
  visibility: visible;
  transform-origin: 50% 0;
  transform: translateX(-50%) translate3d(var(--lp-scroll-x, 0px), var(--lp-scroll-y, 0px), 0) scale(var(--lp-scale, 1.7)) perspective(1100px) rotateX(var(--lp-depth, -52deg)) rotateZ(var(--lp-lean, 12deg));
  /* Pure scroll motion: the final overview rests without an independent drift. */
  animation: none;
  translate: none;
}

body.service-website-page :is(#website-design-showcase-repeat, #website-hero-design-showcase) .website-design-pair__page img {
  width: 100%;
  height: auto;
  aspect-ratio: 800 / 3840;
  object-fit: contain;
}

body.service-website-page :is(#website-design-showcase-repeat, #website-hero-design-showcase).is-design-showcase-visible .website-design-pair__page {
  will-change: transform;
}

@media (min-width: 1024px) {
  body.service-website-page :is(#website-design-showcase-repeat, #website-hero-design-showcase) .website-design-pair__split-copy,
  body.service-website-page :is(#website-design-showcase-repeat, #website-hero-design-showcase) .website-design-pair__split-intro {
    justify-items: center;
    text-align: center;
  }

  body.service-website-page :is(#website-design-showcase-repeat, #website-hero-design-showcase) .website-design-pair__split-english {
    justify-content: center;
  }
}

@media (max-width: 600px) {
  /* Reserve the actual heading height; cropped artwork fills all space below. */
  body.service-website-page :is(#website-design-showcase-repeat, #website-hero-design-showcase) .website-design-pair__composition {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
  }

  body.service-website-page :is(#website-design-showcase-repeat, #website-hero-design-showcase) .website-design-pair__split-copy {
    position: relative;
    top: auto;
    left: auto;
    grid-row: 1;
    width: 100%;
    padding: 40px 22px 36px;
    transform: none;
  }

  body.service-website-page :is(#website-design-showcase-repeat, #website-hero-design-showcase) .website-design-showcase-repeat__artwork {
    position: relative;
    inset: auto;
    grid-row: 2;
    min-height: 0;
    width: 100%;
    height: 100%;
  }

  body.service-website-page :is(#website-design-showcase-repeat, #website-hero-design-showcase) .website-design-pair__page {
    left: 50%;
    width: max(62%, 34svh);
  }

}

@media (prefers-reduced-motion: reduce) {
  /* An ordinary full-length image remains scrollable without a pinned camera. */
  body.service-website-page :is(#website-design-showcase-repeat, #website-hero-design-showcase),
  body.service-website-page :is(#website-design-showcase-repeat, #website-hero-design-showcase).is-lp-scroll-ready {
    height: auto;
    overflow: hidden;
  }

  body.service-website-page :is(#website-design-showcase-repeat, #website-hero-design-showcase) .website-design-showcase-repeat__stage,
  body.service-website-page :is(#website-design-showcase-repeat, #website-hero-design-showcase).is-lp-scroll-ready .website-design-showcase-repeat__stage {
    position: relative;
    height: auto;
    min-height: 100svh;
    transform: none;
  }

  body.service-website-page :is(#website-design-showcase-repeat, #website-hero-design-showcase) .website-design-pair__composition {
    height: auto;
  }

  body.service-website-page :is(#website-design-showcase-repeat, #website-hero-design-showcase) .website-design-showcase-repeat__artwork {
    position: relative;
    inset: auto;
    width: 62%;
    height: auto;
    margin-left: 38%;
  }

  body.service-website-page :is(#website-design-showcase-repeat, #website-hero-design-showcase) .website-design-pair__page {
    position: relative;
    top: auto;
    left: auto;
    width: min(80%, 520px);
    margin: 48px auto;
    transform: none;
    animation: none;
    translate: none;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 600px) {
  body.service-website-page :is(#website-design-showcase-repeat, #website-hero-design-showcase) .website-design-showcase-repeat__artwork {
    width: 100%;
    margin-left: 0;
  }
}