/* Shared WP hero identity. Keep the existing scroll camera and float/sway. */
/* DESIGN follows the current PHOTO typography at every breakpoint. */
body.service-website-page #website-quiet-life-showcase-float[data-eluna-design-split-after-return] .website-design-pair__split-copy {
  display: block;
  color: #243a46;
  text-align: center;
}
body.service-website-page #website-quiet-life-showcase-float[data-eluna-design-split-after-return] .website-design-pair__split-intro {
  display: block;
}
body.service-website-page.service-movie-page #website-quiet-life-showcase-float[data-eluna-design-split-after-return] .website-design-pair__split-title[lang="en"] {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(4.75rem, 7.8vw, 7.75rem);
  font-weight: 400;
  line-height: .95;
  letter-spacing: .045em;
}
body.service-website-page #website-quiet-life-showcase-float[data-eluna-design-split-after-return] .website-design-pair__split-catch {
  margin: 1.15rem 0 0;
  font-family: "Shippori Mincho B1", serif;
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .12em;
}
body.service-website-page #website-quiet-life-showcase-float[data-eluna-design-split-after-return] .website-design-pair__split-description {
  width: 100%;
  max-width: 100%;
  margin: 1.5rem auto 0;
  color: #52636d;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: .025em;
  overflow-wrap: anywhere;
  text-align: center;
}
body.service-website-page #website-quiet-life-showcase-float[data-eluna-design-split-after-return] .website-design-pair__split-description > span {
  display: block;
  text-wrap: balance;
}
@media (max-width: 900px) and (min-height: 601px), (max-width: 600px) {
  body.service-website-page.service-movie-page #website-quiet-life-showcase-float[data-eluna-design-split-after-return] .website-design-pair__split-title[lang="en"] {
    font-size: clamp(4rem, 18vw, 6.5rem);
  }
  body.service-website-page #website-quiet-life-showcase-float[data-eluna-design-split-after-return] .website-design-pair__split-catch {
    margin-top: .75rem;
    font-size: 22px;
  }
  body.service-website-page #website-quiet-life-showcase-float[data-eluna-design-split-after-return] .website-design-pair__split-description {
    margin-top: 1rem;
    line-height: 1.8;
  }
}
@media (max-height: 600px) {
  body.service-website-page.service-movie-page #website-quiet-life-showcase-float[data-eluna-design-split-after-return] .website-design-pair__split-title[lang="en"] {
    font-size: clamp(3.5rem, 8vw, 5rem);
  }
  body.service-website-page #website-quiet-life-showcase-float[data-eluna-design-split-after-return] .website-design-pair__split-catch {
    margin-top: .5rem;
    font-size: 20px;
  }
  body.service-website-page #website-quiet-life-showcase-float[data-eluna-design-split-after-return] .website-design-pair__split-description {
    margin-top: .75rem;
    line-height: 1.7;
  }
}

/* MOVIE follows PHOTO's English / Japanese heading / body typography.
   Keep the original video action and camera controllers intact. */
body.service-website-page :is(#website-quiet-life-showcase-float, #website-hero-design-showcase) .website-design-pair__digest-action:has(.website-design-pair__digest-button--photo-type) {
  width: min(640px, calc(100% - 48px));
}
body.service-website-page :is(#website-quiet-life-showcase-float, #website-hero-design-showcase) button.website-design-pair__digest-button--photo-type {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 24px;
  padding: 20px 16px;
}
/* A visible, generous play target directly below the copy, on every screen. */
body.service-website-page :is(#website-quiet-life-showcase-float, #website-hero-design-showcase) .website-design-pair__digest-button--photo-type .website-design-pair__digest-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 180px;
  min-height: 52px;
  padding: 12px 28px;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 999px;
  color: #243a46;
  background: #fff;
  box-shadow: 0 4px 18px rgba(0,0,0,.12);
  font: 500 14px/1.5 "Noto Sans JP", sans-serif;
  letter-spacing: .08em;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
body.service-website-page :is(#website-quiet-life-showcase-float, #website-hero-design-showcase) .website-design-pair__digest-button--photo-type .website-design-pair__digest-icon {
  width: 14px;
  height: 16px;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: none;
  box-shadow: none;
}
body.service-website-page :is(#website-quiet-life-showcase-float, #website-hero-design-showcase) .website-design-pair__digest-button--photo-type .website-design-pair__digest-icon::before {
  width: 11px;
  height: 13px;
  transform: none;
}
body.service-website-page :is(#website-quiet-life-showcase-float, #website-hero-design-showcase) button.website-design-pair__digest-button--photo-type:hover:not(:disabled) {
  transform: none;
}
body.service-website-page :is(#website-quiet-life-showcase-float, #website-hero-design-showcase) button.website-design-pair__digest-button--photo-type:hover:not(:disabled) .website-design-pair__digest-cta {
  background: #edf3f6;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(0,0,0,.18);
}
body.service-website-page :is(#website-quiet-life-showcase-float, #website-hero-design-showcase) button.website-design-pair__digest-button--photo-type:is(:hover,:focus-visible) .website-design-pair__digest-icon {
  background: none;
  box-shadow: none;
  outline: none;
}
body.service-website-page :is(#website-quiet-life-showcase-float, #website-hero-design-showcase) button.website-design-pair__digest-button--photo-type:focus-visible .website-design-pair__digest-cta {
  outline: 2px solid #fff;
  outline-offset: 5px;
}
@media (prefers-reduced-motion: reduce) {
  body.service-website-page :is(#website-quiet-life-showcase-float, #website-hero-design-showcase) .website-design-pair__digest-button--photo-type .website-design-pair__digest-cta {
    transition: none;
  }
  body.service-website-page :is(#website-quiet-life-showcase-float, #website-hero-design-showcase) button.website-design-pair__digest-button--photo-type:hover:not(:disabled) .website-design-pair__digest-cta {
    transform: none;
  }
}
body.service-website-page :is(#website-quiet-life-showcase-float, #website-hero-design-showcase) .website-design-pair__digest-button--photo-type .website-design-pair__digest-label {
  display: block;
  text-align: center;
}
body.service-website-page :is(#website-quiet-life-showcase-float, #website-hero-design-showcase) .website-design-pair__digest-button--photo-type .website-design-pair__digest-title {
  display: block;
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(4.75rem, 7.8vw, 7.75rem);
  font-weight: 400;
  line-height: .95;
  letter-spacing: .045em;
}
body.service-website-page :is(#website-quiet-life-showcase-float, #website-hero-design-showcase) .website-design-pair__digest-button--photo-type .website-design-pair__digest-copy {
  display: block;
  margin: 1.15rem 0 0;
  font-family: "Shippori Mincho B1", serif;
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .12em;
  white-space: normal;
}
body.service-website-page :is(#website-quiet-life-showcase-float, #website-hero-design-showcase) .website-design-pair__digest-button--photo-type .website-design-pair__digest-copy > span {
  display: inline-block;
}
body.service-website-page :is(#website-quiet-life-showcase-float, #website-hero-design-showcase) .website-design-pair__digest-button--photo-type .website-design-pair__digest-description {
  display: block;
  margin: 1.5rem 0 0;
  color: rgba(255,255,255,.9);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: .025em;
  overflow-wrap: anywhere;
}
body.service-website-page :is(#website-quiet-life-showcase-float, #website-hero-design-showcase) .website-design-pair__digest-button--photo-type .website-design-pair__digest-description > span {
  display: block;
  text-wrap: balance;
}
@media (max-width: 900px) and (min-height: 601px), (max-width: 600px) {
  body.service-website-page :is(#website-quiet-life-showcase-float, #website-hero-design-showcase) button.website-design-pair__digest-button--photo-type {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 20px;
    padding: 12px 0;
  }
  body.service-website-page :is(#website-quiet-life-showcase-float, #website-hero-design-showcase) .website-design-pair__digest-button--photo-type .website-design-pair__digest-title {
    font-size: clamp(4rem, 18vw, 6.5rem);
  }
  body.service-website-page :is(#website-quiet-life-showcase-float, #website-hero-design-showcase) .website-design-pair__digest-button--photo-type .website-design-pair__digest-copy {
    margin-top: .75rem;
    font-size: 22px;
  }
  body.service-website-page :is(#website-quiet-life-showcase-float, #website-hero-design-showcase) .website-design-pair__digest-button--photo-type .website-design-pair__digest-description {
    margin-top: 1rem;
    line-height: 1.8;
  }
}
@media (max-height: 600px) {
  body.service-website-page :is(#website-quiet-life-showcase-float, #website-hero-design-showcase) .website-design-pair__digest-button--photo-type .website-design-pair__digest-title {
    font-size: clamp(3.5rem, 8vw, 5rem);
  }
  body.service-website-page :is(#website-quiet-life-showcase-float, #website-hero-design-showcase) .website-design-pair__digest-button--photo-type .website-design-pair__digest-copy {
    margin-top: .5rem;
    font-size: 20px;
  }
  body.service-website-page :is(#website-quiet-life-showcase-float, #website-hero-design-showcase) .website-design-pair__digest-button--photo-type .website-design-pair__digest-description {
    margin-top: .75rem;
    line-height: 1.7;
  }
}

body.service-website-page #website-hero-design-showcase .website-design-showcase-repeat__artwork {
  /* Remove only the repeating scale pulse; the sheet itself still floats. */
  animation-name: none;
  scale: 1;
}

  body.service-website-page #website-hero-design-showcase.lumen-stack {
    /* The existing camera reads this value and recenters the film on approach. */
    --hero-card-center-x: 68%;
    --hero-card-width: min(38vw, 56svh, 570px);
  }

  body.service-website-page #website-hero-design-showcase .service-hero__opening-copy,
  body.service-website-page #website-hero-design-showcase .website-hero-corner-label {
    display: none;
  }

  body.service-website-page #website-hero-design-showcase .website-hero-intro {
    display: block;
    position: absolute;
    z-index: 3;
    top: 50%;
    left: max(7vw, calc((100vw - 1380px) / 2));
    width: min(36vw, 420px);
    margin: 0;
    color: #304b59;
    text-align: left;
    font-family: "Noto Sans JP", sans-serif;
    transform: translateY(-50%);
    opacity: var(--hero-film-copy, 1);
    pointer-events: none;
  }

  body.service-website-page #website-hero-design-showcase .website-hero-intro :is(p, h2) {
    margin: 0;
  }

  body.service-website-page #website-hero-design-showcase .website-hero-intro__eyebrow {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #597a8a;
    font: 400 10px/1.8 "Noto Sans JP", sans-serif;
    letter-spacing: .2em;
  }

  body.service-website-page #website-hero-design-showcase .website-hero-intro__eyebrow::before {
    content: "";
    width: 32px;
    height: 1px;
    flex: 0 0 32px;
    background: #98b1bd;
  }

  body.service-website-page #website-hero-design-showcase .website-hero-intro .website-hero-intro__title {
    margin: 28px 0 30px;
    color: #304b59;
    font: 400 clamp(54px, 6.3vw, 78px)/1.05 "Cormorant Garamond", serif;
    letter-spacing: -.025em;
  }

  body.service-website-page #website-hero-design-showcase .website-hero-intro__english {
    display: block;
    text-transform: none;
  }

  body.service-website-page #website-hero-design-showcase .website-hero-intro__english > span {
    color: #5b8397;
  }

  body.service-website-page #website-hero-design-showcase .website-hero-intro__japanese {
    display: block;
    margin-top: 22px;
    font: 400 20px/1.8 "Noto Sans JP", sans-serif;
    letter-spacing: .16em;
  }

  body.service-website-page #website-hero-design-showcase .website-hero-intro__body {
    padding-top: 25px;
    border-top: 1px solid #c7d8df;
  }

  body.service-website-page #website-hero-design-showcase .website-hero-intro__lead {
    color: #304b59;
    font: 400 clamp(14px, 1.15vw, 16px)/1.95 "Shippori Mincho B1", serif;
    letter-spacing: .025em;
  }

  body.service-website-page #website-hero-design-showcase .website-hero-intro .website-hero-intro__description {
    margin-top: 16px;
    color: #506773;
    font: 400 12px/2 "Noto Sans JP", sans-serif;
    letter-spacing: .025em;
  }
/* Leave breathing room below the header on shorter laptop screens. */
@media (min-width: 901px) and (max-height: 650px) {
  body.service-website-page #website-hero-design-showcase .website-hero-intro {
    top: calc(50% + 20px);
  }
  body.service-website-page #website-hero-design-showcase .website-hero-intro .website-hero-intro__title {
    margin-block: 18px 20px;
    font-size: clamp(54px, 6vw, 72px);
  }
  body.service-website-page #website-hero-design-showcase .website-hero-intro__japanese {
    margin-top: 16px;
  }
  body.service-website-page #website-hero-design-showcase .website-hero-intro__body {
    padding-top: 18px;
  }
}

/* Mobile: floating sheet first, then the same editorial copy in one column. */
@media (max-width: 900px) {
  body.service-website-page #website-hero-design-showcase.lumen-stack {
    --hero-card-center-x: 50%;
    /* Move the sheet and copy down together after shortening the hero copy. */
    --hero-card-center-y: 37%;
    --hero-card-width: min(60vw, 32.5svh, 374px);
    --hero-float-rise: clamp(10px, 2svh, 20px);
  }

  body.service-website-page #website-hero-design-showcase .website-hero-intro {
    top: 64%;
    left: 50%;
    width: min(calc(100% - 44px), 420px);
    transform: translateX(-50%);
  }

  body.service-website-page #website-hero-design-showcase .website-hero-intro__eyebrow {
    gap: 8px;
    font-size: 9px;
    letter-spacing: .1em;
  }

  body.service-website-page #website-hero-design-showcase .website-hero-intro__eyebrow::before {
    width: 18px;
    flex-basis: 18px;
  }

  body.service-website-page #website-hero-design-showcase .website-hero-intro .website-hero-intro__title {
    margin: 12px 0 16px;
    font-size: clamp(38px, 10.5vw, 60px);
  }

  body.service-website-page #website-hero-design-showcase .website-hero-intro__japanese {
    margin-top: 12px;
    font-size: 16px;
    letter-spacing: .08em;
  }

  body.service-website-page #website-hero-design-showcase .website-hero-intro__body {
    padding-top: 14px;
  }

  body.service-website-page #website-hero-design-showcase .website-hero-intro__lead {
    font-size: 12px;
    line-height: 1.95;
  }

  body.service-website-page #website-hero-design-showcase .website-hero-intro .website-hero-intro__description {
    margin-top: 8px;
    font-size: 11px;
    line-height: 2;
  }
}

@media (max-width: 900px) and (max-height: 650px) {
  body.service-website-page #website-hero-design-showcase.lumen-stack {
    --hero-card-center-y: 38%;
    --hero-card-width: min(60vw, 29.4svh);
  }
  body.service-website-page #website-hero-design-showcase .website-hero-intro {
    top: 65%;
  }
  body.service-website-page #website-hero-design-showcase .website-hero-intro .website-hero-intro__title {
    margin: 8px 0 12px;
    font-size: 34px;
  }
  body.service-website-page #website-hero-design-showcase .website-hero-intro__japanese {
    margin-top: 8px;
    font-size: 15px;
  }
  body.service-website-page #website-hero-design-showcase .website-hero-intro__body {
    padding-top: 10px;
  }
}

/* Keep the opening copy inside a short phone viewport without undoing the
   extra space between the floating page and its introduction. */
@media (max-width: 900px) and (max-height: 540px) {
  body.service-website-page #website-hero-design-showcase.lumen-stack {
    --hero-card-center-y: 37%;
    --hero-card-width: min(56vw, 28svh);
  }
  body.service-website-page #website-hero-design-showcase .website-hero-intro { top: 62%; }
  body.service-website-page #website-hero-design-showcase .website-hero-intro .website-hero-intro__title {
    margin: 5px 0 7px;
    font-size: clamp(26px, 7vw, 32px);
  }
  body.service-website-page #website-hero-design-showcase .website-hero-intro__japanese { margin-top: 4px; font-size: 13px; }
  body.service-website-page #website-hero-design-showcase .website-hero-intro__body { padding-top: 6px; }
  body.service-website-page #website-hero-design-showcase .website-hero-intro__lead { font-size: 11px; line-height: 1.6; }
}

@media (max-width: 900px) {
  /* The detail catch and the page are two different mobile scenes. */
  body.service-website-page #website-hero-design-showcase .website-hero-detail-copy:not(.website-hero-detail-copy--next) {
    bottom: calc(9svh + 48px);
  }
  /* PHOTO and WORD no longer occupy the same mobile viewport. */
  body.service-website-page .service-hero__sticky--copy-sequence > #website-copy-bloom[data-copy-linked="true"] {
    margin-top: 0;
    background: #fff;
  }
  /* Pull the book closer to the WORD typography, retaining a readable gap. */
  body.service-website-page #website-copy-bloom .copy-bloom__content::after,
  body.service-website-page #website-copy-bloom .copy-bloom__film {
    top: clamp(330px, 43svh, 390px);
    bottom: auto;
    height: clamp(170px, 36svh, 300px);
  }
  /* Keep COLOR controls low, above the device safe area. */
  body.service-website-page #website-color-showcase .web-color-progress,
  body.service-website-page #website-color-showcase .web-color-scroll {
    bottom: max(10px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 600px) and (max-height: 600px) {
  body.service-website-page #website-copy-bloom .copy-bloom__content::after,
  body.service-website-page #website-copy-bloom .copy-bloom__film {
    top: min(330px, 57svh);
    height: min(28svh, 180px);
  }
  body.service-website-page #website-color-showcase .web-color-copy {
    top: max(36px, env(safe-area-inset-top));
    right: 22px;
    left: 22px;
    width: auto;
    text-align: center;
    transform: none;
  }
  body.service-website-page #website-color-showcase .web-color-artwork {
    top: 68%;
    left: 50%;
    width: min(50vw, 26svh);
  }
}

@media (max-width: 600px) and (max-height: 460px) {
  body.service-website-page #website-color-showcase .web-color-copy { top: 28px; }
  body.service-website-page #website-color-showcase .web-color-copy h2 { font-size: 23px; }
  body.service-website-page #website-color-showcase .web-color-copy h2 > span { margin-top: 5px; font-size: 13px; }
  body.service-website-page #website-color-showcase .web-color-number { margin-top: 14px; margin-bottom: 8px; }
  body.service-website-page #website-color-showcase .web-color-swatches { margin-top: 10px; }
  body.service-website-page #website-color-showcase .web-color-artwork {
    top: 73%;
    width: min(48vw, 23svh);
  }
}

/* A little more contrast for the DESIGN, PHOTO and WORD story descriptions. */
body.service-website-page #website-quiet-life-showcase-float[data-eluna-design-split-after-return] .website-design-pair__split-description,
body.service-website-page #website-unfold-gallery .website-film-photo-heading .hero-image-orbit__description,
body.service-website-page #website-copy-bloom .copy-bloom__description {
  color: #3f515b;
}