/* Keep the centerpiece inside one fixed panel throughout the scroll sequence. */
.hero{overflow:visible}
.mechanism-scroll{position:relative}
.mechanism-stage{position:relative}
.hero-object--mechanism{background:#e6e6e3;background-image:none;min-height:420px;overflow:hidden}
.lock-scene{position:absolute;inset:0;min-width:0;overflow:hidden}
.lock-scene canvas{width:100%;height:100%;display:block;touch-action:pan-y}
.hero-object--mechanism .lock-poster{inset:0;width:100%;height:100%;object-fit:contain;padding:0}
.mechanism-ready .lock-poster{display:none}
.mechanism-enabled .mechanism-stage{height:clamp(460px,72svh,760px);min-height:0;background:var(--paper)}
.mechanism-enabled .hero-object--mechanism{min-height:0;height:100%}
@media(max-width:760px){
 .hero-object--mechanism{min-height:340px;grid-column:1/-1}
 .mechanism-enabled .mechanism-stage{height:auto;display:grid;grid-template-rows:clamp(340px,calc(100vw - 30px),500px) auto}
 .mechanism-enabled .mechanism-stage .hero-copy{padding:22px 24px;display:block}
 .mechanism-enabled .mechanism-stage .hero-copy h2{font-size:25px;margin:16px 0 12px}
 .mechanism-enabled .mechanism-stage .hero-copy p{font-size:14px;max-width:none}
 .mechanism-enabled .mechanism-stage .hero-copy .button{margin-top:18px;width:auto;gap:30px}
 .mechanism-enabled .mechanism-stage .hero-copy .text-link{display:none}
 .mechanism-enabled .mechanism-stage .hero-spec{display:none}
}