/* Motion uses generated raster layers. Section geometry stays in latch-styles.css. */
.motion-enabled .hero-object,.motion-enabled .role-floating{animation:none}
.motion-enabled .process-card:hover .process-image>img,.motion-enabled .support-card:hover .support-visual>img{transform:none}
.motion-glyph-mask{display:inline-block;overflow:clip;vertical-align:bottom;padding-block:.08em;margin-block:-.08em}
.motion-glyph{display:inline-block;white-space:pre}
.raster-stage{position:absolute;inset:0;pointer-events:none}
.raster-layer{position:absolute;inset:0;transform-origin:var(--origin,50% 50%);pointer-events:none}
.raster-layer>img{width:100%;height:100%;max-width:none;object-fit:fill}
.motion-source{visibility:hidden!important}
.why-visual,.outcomes-visual,.hero-object{position:relative}
.hero-object{position:absolute}
.why-visual>.raster-stage{aspect-ratio:1565/1005;inset:0}
.support-visual>.raster-stage{width:min(100%,calc(278 * var(--u) * 1704 / 923));height:100%;left:50%;right:auto;transform:translateX(-50%)}
.sprite-stage{position:absolute;inset:0;pointer-events:none}
.sprite-part{position:absolute;overflow:hidden;transform-origin:center;pointer-events:none}
.sprite-part>img{position:absolute;max-width:none;height:auto!important;pointer-events:none}
.process-image>.sprite-stage{width:100%;height:100%}
.outcomes-visual>.sprite-stage>img{opacity:.4}
.process-image .sprite-floor{opacity:.42}
.hero-object>.sprite-stage{aspect-ratio:1;inset:0}
.hero-center>.sprite-stage{aspect-ratio:1161/1355}
.hero-object>.motion-source{visibility:hidden}
.role-photo-previous{z-index:1;pointer-events:none}
.role-photo{will-change:clip-path}
.role-status{position:absolute;left:44%;bottom:14%;display:flex;align-items:center;gap:5px;background:#e9fbf7;color:#28766d;border:1px solid #caeee7;border-radius:4px;padding:5px 9px;font:10px Arial,sans-serif;z-index:3}
.role-status .icon{width:12px;height:12px;filter:invert(45%) sepia(40%) saturate(700%) hue-rotate(118deg)}
.role-visual[data-role=marketing] .role-output{top:62%;right:0;width:36%}
.role-visual[data-role=marketing] .role-input{bottom:38%}
.role-visual[data-role=administration] .role-output{top:43%;right:-2%;background:#102142;color:white}
.role-visual[data-role=administration] .role-output p,.role-visual[data-role=administration] .role-output .tiny-label{color:#c1cfe3}
.role-visual[data-role=sales] .role-output{top:28%;right:2%}
.role-visual[data-role=sales] .role-input{bottom:24%}
.role-floating{transition:top .6s ease,bottom .6s ease,right .6s ease,background .6s ease}
.contact-banner{position:relative;overflow:hidden;background-image:none}
.contact-motion-backdrop{position:absolute;inset:-3%;width:106%;height:106%;max-width:none;object-fit:cover;pointer-events:none}
.contact-banner>h2,.contact-banner>.button{position:relative;z-index:1}
.motion-inspector{position:fixed;z-index:300;bottom:12px;left:12px;background:#fff;color:#182540;border:1px solid #c7d4e7;box-shadow:0 4px 20px #20304b22;padding:10px;display:flex;gap:8px;align-items:center;font:12px Arial,sans-serif;max-width:calc(100vw - 24px);flex-wrap:wrap}
.motion-inspector label{display:flex;align-items:center;gap:6px}.motion-inspector select,.motion-inspector input{width:auto;padding:5px;font:12px Arial,sans-serif}.motion-inspector input{width:66px}.motion-inspector button{padding:6px 9px;border:1px solid #d6deed;background:#f4f7ff;border-radius:4px;font:12px Arial,sans-serif}
@media(max-width:900px){.support-visual>.raster-stage{width:100%}.process-image>.sprite-stage{width:88%;left:6%}.role-status{font-size:9px;padding:4px 7px}.role-visual[data-role=administration] .role-output{right:0}.role-visual[data-role=marketing] .role-output{width:36%}}
@media(prefers-reduced-motion:reduce){.role-floating{transition:none}.role-photo{will-change:auto}}
@media(max-width:600px){.role-status{left:26%}}