.process-motion { margin-top: clamp(48px, 5vw, 72px); }
.process-motion-scroll { overflow-x: auto; scrollbar-color: #32868c #0a202a; }
.process-motion-scroll:focus-visible { outline: 2px solid #52caba; outline-offset: 4px; }
.process-motion-stage { position: relative; min-width: 980px; color: #fff; }
.process-motion-stage > img { display: block; width: 100%; height: auto; }
.process-motion-stage > canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.process-motion-stage h3 { position: absolute; margin: 0; font-size: var(--type-subtitle); line-height: 1.3; font-weight: 610; }
.pm-feed { position: absolute; left: 9.6%; top: var(--y, 24%); transform: translateY(-50%); font-size: var(--type-body); line-height: 1.4; }
.pm-feed-heading { font-weight: 610; }
.pm-feed-end { position: absolute; left: 4%; top: 85%; font-size: var(--type-body); }
.pm-chemical { position: absolute; font-size: var(--type-body); line-height: 1; }
.pm-ch4 { left: 47.8%; top: 43%; }
.pm-h2 { left: 65.5%; top: 43%; }
.pm-c { left: 61.5%; top: 66%; }
.pm-product { left: 77%; width: 20%; text-align: center; }
.pm-hydrogen { top: 17%; }
.pm-carbon { top: 47%; }
.pm-zero { position: absolute; left: 75%; top: 77%; width: 22%; text-align: center; }
.pm-zero > span { font-size: var(--type-body); }
.pm-zero > div { display: flex; justify-content: center; align-items: baseline; gap: 12px; }
.pm-zero strong { color: #26ddbd; font-size: var(--type-section-title); line-height: 1.2; }
.pm-zero > div > span { font-size: var(--type-subtitle); }
.process-motion-caption { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 14px; color: #b6cbd3; font-size: 13px; line-height: 1.7; }
.process-motion-caption button { background: transparent; border: 1px solid #52727a; border-radius: 4px; padding: 10px 16px; color: #e0f2f0; font: inherit; cursor: pointer; white-space: nowrap; }
.process-motion-caption button:hover { background: #12333c; }
.process-motion-caption button:focus-visible { outline: 2px solid #52caba; outline-offset: 3px; }
.pm-scroll-hint { display: none; color: #b6cbd3; font-size: 13px; line-height: 1.7; }
@media(max-width: 1100px) { .pm-scroll-hint { display: block; margin: 10px 0 0; } }
@media(max-width: 600px) { .process-motion { margin-top: 40px; } .process-motion-caption { align-items: flex-start; gap: 12px; } .process-motion-caption button { min-height: 44px; } }