Row of numbered process steps where hovering or focusing a step expands it with a spring-like overshoot easing to reveal its image and full text, while the other steps shrink to a slim number + title column. Plain editable section (eyebrow, heading, intro) holding "Numbered Step" component instances — duplicate, reorder or delete steps in Layers. Each step is typed: number; title; text; image; default active (boolean — only one step should be marked). The whole interaction is CSS only (:hover / :focus-within on a native, keyboard-reachable button per step) so it works with JavaScript fully disabled; a small inline script only adds a click-to-pin behaviour so pointer and keyboard users can lock a step open instead of relying on continuous hover, and it sets the initial pinned step from whichever instance has "default active" checked (falling back to the first step). Below the row's own 46em container width the steps stack into a single column and every step shows fully expanded with its image, so touch users never depend on hover. Expand/collapse transitions respect prefers-reduced-motion (swapped for a fast cross-fade), every step trigger has a visible :focus-visible ring, and image alt text is required per step.