/* Static artwork with a single scroll-driven glass surface behind the copy. */
.bookend-scenes {
  --people-paper: #f7f8fb;
  background: #fff;
}
.bookend-scenes main,
.bookend-scenes .partner-foot { position: relative; z-index: 1; }
.bookend-scenes .outcome-hero { background: transparent; }
.bookend-scenes .hero-art:after {
  background: linear-gradient(to bottom, transparent 94%, #fff);
}
.scene-world {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
}
.scene-ready .hero-art,
.scene-ready .closing-art { visibility: hidden; }
.bookend-scenes .hero-bottom.outcome-band {
  background: linear-gradient(#fff, #f5f8fd 48px);
}
.bookend-scenes .people-section {
  background: var(--people-paper);
  border-bottom: 0;
}
.bookend-scenes .start-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: transparent;
  color: var(--ink);
  min-height: 740px;
  display: grid;
  align-items: center;
  padding-block: 110px;
}
.bookend-scenes .start-section::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: clamp(78px, 10vw, 138px);
  background: linear-gradient(var(--people-paper), #f7f8fbeb 16%, #f7f8fb70 62%, #f7f8fb00);
  pointer-events: none;
}
.bookend-scenes .start-section .partner-wrap { position: relative; z-index: 1; width: 100%; }
.bookend-scenes .start-section h2 { color: var(--ink); }
.bookend-scenes .start-section p:not(.eyebrow),
.bookend-scenes .start-caption { color: #4c5b71; opacity: 1; }
.bookend-scenes .start-section .eyebrow { color: var(--blue); opacity: 1; }
.bookend-scenes .start-section .button { background: var(--blue); color: #fff; }
.bookend-scenes .start-section .cta-arrow { border-color: #ffffff40; color: #fff; }
.closing-art { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.closing-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 70% 100%; }
.closing-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 94%, #fff);
  pointer-events: none;
}

@media screen and (prefers-reduced-motion: no-preference) {
  .hero-arrival .outcome-hero {
    --arrival-ease: cubic-bezier(.22, 1, .36, 1);
  }

  .hero-arrival .title-mask > span {
    animation: hero-title-arrive 780ms var(--arrival-ease) backwards;
  }

  .hero-arrival .title-mask + .title-mask > span { animation-delay: 75ms; }

  .hero-arrival .hero-content .eyebrow,
  .hero-arrival .hero-content .assessment-cta,
  .hero-arrival .hero-caption {
    animation: hero-detail-arrive 630ms var(--arrival-ease) backwards;
  }

  .hero-arrival .hero-content .assessment-cta,
  .hero-arrival .hero-caption { animation-delay: 135ms; }
  .hero-arrival .hero-content .assessment-cta:focus-visible { animation: none; }

  .hero-arrival .hero-art::before {
    content: '';
    position: absolute;
    inset: 40% auto 0 0;
    width: 47%;
    pointer-events: none;
    background: radial-gradient(ellipse at center, #fff9, #edf3ff55 38%, transparent 72%);
    opacity: 0;
    animation: hero-ribbon-light 1100ms var(--arrival-ease) backwards;
  }

  @keyframes hero-title-arrive {
    from { opacity: .64; transform: translateY(clamp(14px, 2.1vw, 30px)); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes hero-detail-arrive {
    from { opacity: .85; transform: translateY(7px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes hero-ribbon-light {
    0% { opacity: 0; transform: translateX(-56%); }
    34% { opacity: .5; }
    100% { opacity: 0; transform: translateX(180%); }
  }
}

@media (max-width: 700px) {
  .closing-art img { object-position: 80% 100%; }
  .bookend-scenes .start-section { min-height: 700px; padding-block: 90px; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-world { display: none; }
  .bookend-scenes .hero-art, .bookend-scenes .closing-art { visibility: visible; }
}
@media print {
  .scene-world, .closing-art, .bookend-scenes .start-section::before { display: none; }
  .bookend-scenes .start-section { min-height: 0; background: #fff; padding-block: 40px; }
}