/* A single source image leads to an autoplaying result. */
.transformation{--transform-muted:#c9bdb1;--transform-line:#635449;max-width:1200px;margin-inline:auto;color:var(--paper)}
.transformation-pair{display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);gap:20px;align-items:start}
.transformation-pair figure{min-width:0}
.transform-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px}
.transform-heading>span{font-size:.875rem;letter-spacing:.05em;color:var(--transform-muted)}
.transform-heading>strong{font-family:var(--display);font-weight:600;font-size:clamp(1.7rem,2.6vw,2.6rem);line-height:1.1;letter-spacing:-.035em}
.transform-window{position:relative;aspect-ratio:3/4;background:#171411;overflow:hidden}
.transform-window>img,.transform-window>video{display:block;width:100%;height:100%;object-fit:contain}
.transformation-landscape .transform-window{aspect-ratio:16/9}
.transform-arrow{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;align-self:center;color:#dbc7ae;padding-bottom:84px}
.transform-arrow>span{font-size:.875rem;white-space:nowrap}
.transform-badge{position:absolute;top:16px;left:16px;right:16px;width:fit-content;max-width:calc(100% - 32px);padding:6px 9px;background:var(--paper);color:var(--ink);font-size:.8125rem;line-height:1.4;font-weight:600;pointer-events:none}
.transformation figcaption{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;margin-top:12px;color:var(--transform-muted);font-size:.9375rem;line-height:1.45}
.transform-process{list-style:none;padding:28px 0 0;margin:36px 0 0;border-top:1px solid var(--transform-line);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.transform-process>li{display:flex;align-items:baseline;gap:14px;min-width:0}
.transform-step{font-size:.875rem;color:#dbc7ae;font-variant-numeric:tabular-nums}
.transform-process h3{font-family:var(--body);font-size:1.125rem;line-height:1.3;margin:0 0 10px}
.transform-process p{font-size:1rem;line-height:1.5;color:var(--transform-muted);max-width:33ch}
.case-film .chapter-note{max-width:1200px;margin:28px auto 0;font-size:.875rem}
.motion-story{background:#231d19;color:var(--paper);margin-top:80px;padding-block:80px}
.motion-story-intro{display:grid;grid-template-columns:1.2fr 1fr;gap:50px;align-items:end;max-width:1200px;margin:0 auto 42px}
.motion-story-intro h2{font-size:clamp(2.5rem,5vw,5rem);line-height:1.02;letter-spacing:-.045em;margin-top:16px}
.motion-story-intro>p{max-width:43ch;font-size:1.125rem;color:#dfd5ca}
.motion-story-outro{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1200px;margin:34px auto 0;padding-top:26px;border-top:1px solid #635449}
.motion-story-outro p{font-family:var(--display);font-size:clamp(1.4rem,2.2vw,2rem);line-height:1.2;max-width:30ch}
.motion-story-outro a{flex-shrink:0}
@media(max-width:900px){.transformation-pair{grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr);gap:12px}.transform-heading{display:block}.transform-heading>strong{display:block;margin-top:6px}.transform-arrow svg{width:32px}.transform-arrow>span{font-size:.8125rem}.transform-process{gap:20px}.transform-process>li{gap:10px}.motion-story-intro{gap:28px}.motion-story-outro{align-items:start;flex-direction:column}}
@media(max-width:620px){.transformation-pair{grid-template-columns:1fr;gap:16px}.transform-source{display:grid;grid-template-columns:104px minmax(0,1fr);grid-template-areas:"image heading" "image caption";gap:8px 20px;align-items:start}.transform-source .transform-window{grid-area:image}.transform-source .transform-heading{grid-area:heading;margin:8px 0 0}.transform-source figcaption{grid-area:caption;align-self:start;margin:0}.transform-heading>strong{font-size:2rem}.transform-arrow{align-self:auto;flex-direction:row;justify-content:flex-start;padding:0 0 0 30px;gap:20px}.transform-arrow svg{transform:rotate(90deg);height:34px}.transform-arrow>span{font-size:.875rem}.transform-result .transform-heading{display:flex;align-items:baseline;margin-bottom:16px}.transform-result .transform-heading>strong{margin:0}.transform-result .transform-window{width:100%}.transform-process{grid-template-columns:1fr;gap:22px;margin-top:28px;padding-top:24px}.transform-process p{max-width:none}.transform-process h3{margin-bottom:6px}.transform-step{min-width:24px}.transform-badge{top:12px;left:12px;right:12px;max-width:calc(100% - 24px)}.motion-story{margin-top:46px;padding-block:46px}.motion-story-intro{grid-template-columns:1fr;gap:22px;margin-bottom:30px}.motion-story-intro h2{font-size:clamp(2.4rem,10vw,3.5rem)}.motion-story-intro>p{font-size:1.0625rem}.motion-story-outro{margin-top:28px;padding-top:24px}.case-film .chapter-note{margin-top:24px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Keep source/result hierarchy readable at both gallery widths. */
.transform-heading{flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:8px;min-height:76px}
.transform-heading>span{font-size:.75rem;letter-spacing:.06em}
.transform-heading>strong{font-size:clamp(1.55rem,2.25vw,2.3rem);line-height:1.15}
.transform-arrow>span{white-space:normal;text-align:center;font-size:.6875rem;line-height:1.5;letter-spacing:.035em}
@media(max-width:900px){.transform-heading{display:flex}.transform-heading>strong{margin-top:0}.transform-arrow>span{font-size:.5625rem}}
@media(max-width:620px){.transform-source .transform-heading{min-height:0;margin-top:6px}.transform-heading>strong{font-size:1.65rem}.transform-result .transform-heading{display:flex;align-items:flex-start;min-height:0;gap:8px}.transform-arrow>span{font-size:.6875rem;text-align:left}.transform-badge{font-size:.6875rem;letter-spacing:.01em}.transform-source .transform-heading>span{font-size:.625rem}}