/* Imagery shares the text canvas; it never creates an illustration-only spacer. */
.problem-scene, .service-scene { position: relative; isolation: isolate; overflow: hidden; }
.story-backdrop { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.story-backdrop img { width: 100%; height: 100%; object-fit: cover; }
.problem-scene .story-backdrop { right: 45%; }
.problem-scene .story-backdrop img { object-position: 45% 75%; }
.problem-scene .story-backdrop::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--paper) 10%, #f6f5f2ed 40%, #f6f5f255 100%), linear-gradient(90deg, transparent 55%, var(--paper) 100%); }
.problem-scene .problem-chapter { position: relative; }
.service-scene .story-backdrop { left: 34%; }
.service-scene .story-backdrop::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--paper) 0%, #f6f5f2f5 20%, #f6f5f2b3 45%, #f6f5f220 100%); }
.service-scene .page-hero { position: relative; padding-bottom: 80px; }
.service-scene .page-hero>div { max-width: 760px; }
.service-scene .page-hero h1 { max-width: 18ch; }
.service-scene .page-hero p { max-width: 49ch; }
.service-story { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: clamp(32px, 6vw, 90px); padding-block: 70px 90px; border-top: 1px solid var(--rule); }
.story-process h2 { font-size: clamp(28px, 3vw, 40px); margin-bottom: 28px; max-width: 22ch; }
.story-process ol { list-style: none; padding: 0; margin: 0; }
.story-process li { display: flex; gap: 18px; border-top: 1px solid var(--rule); padding: 13px 0; font-size: 18px; font-weight: 600; line-height: 1.4; }
.story-step { flex: 0 0 16px; color: var(--button); font-size: 14px; padding-top: 3px; }
.story-process p { margin-top: 24px; color: var(--muted); font-size: 16px; }
.story-motion { margin: 0; min-width: 0; }
.story-motion img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; background: var(--paper); }
.partnership-motion { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
.partnership-motion h2 { max-width: 15ch; margin-bottom: 28px; }
.partnership-motion .chapter-copy>p:first-child { font-size: 21px; }
.partnership-motion .motion-summary { margin-top: 24px; font-size: 16px; }
@media (max-width: 1050px) {
  .service-scene .story-backdrop { left: 20%; opacity: .65; }
  .service-scene .page-hero>div { max-width: 680px; }
}
@media (max-width: 760px) {
  .problem-scene .story-backdrop { right: 0; bottom: auto; height: 350px; opacity: .45; }
  .problem-scene .story-backdrop::after { background: linear-gradient(180deg, #f6f5f2a6, var(--paper)); }
  .service-scene .story-backdrop { left: 0; opacity: .4; }
  .service-scene .story-backdrop::after { background: linear-gradient(90deg, #f6f5f2f5, #f6f5f2b3), linear-gradient(0deg, var(--paper), transparent); }
  .service-scene .page-hero { padding-bottom: 50px; }
  .service-story, .partnership-motion { grid-template-columns: 1fr; gap: 32px; }
  .service-story { padding-block: 45px 55px; }
  .story-process h2 { font-size: 30px; }
}