.role-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.role-heading h2{margin:0!important}.role-animation{--accent:#4a8dff;width:190px;flex:0 0 190px;height:142px;pointer-events:none}.role-growth{--accent:#ff795c}.role-design{--accent:#9470ed}.role-animation svg{width:100%;height:100%;overflow:visible}.role-animation .typing{animation:typing .18s ease-in-out infinite alternate;transform-origin:75px 94px}.role-animation .code{animation:code 1.1s steps(3) infinite}.role-animation .spark{animation:spark 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}.role-animation .gesture,.role-animation .phone{animation:gesture 2.8s ease-in-out infinite;transform-origin:90px 90px}.role-animation .waves{animation:code 1.3s ease-in-out infinite}.role-animation .heart{animation:heart 2.8s ease-in-out infinite}.role-animation .drawing{animation:drawing 2s ease-in-out infinite;transform-origin:79px 94px}.role-animation .tile{animation:tile 4s ease-in-out infinite;transform-origin:124px 68px}@keyframes typing{to{transform:translateY(-3px) rotate(-2deg)}}@keyframes code{50%{opacity:.35}}@keyframes spark{50%{transform:scale(.65) rotate(25deg)}}@keyframes gesture{50%{transform:rotate(-6deg)}}@keyframes heart{0%,100%{transform:translateY(3px);opacity:.5}50%{transform:translateY(-6px);opacity:1}}@keyframes drawing{50%{transform:rotate(-9deg)}}@keyframes tile{50%{transform:rotate(8deg);fill:#ff977b}}@media(prefers-reduced-motion:reduce){.role-animation *{animation:none!important}}@media(max-width:600px){.role-animation{width:130px;flex-basis:130px;height:100px}.role-heading{gap:8px}}

/* Absolutely positioned art preserves the original heading's vertical footprint. */
.monitor-ui .role-heading{position:relative;display:block;margin:24px 0 14px;padding-right:190px;min-height:54px}
.monitor-ui.engineering-screen .role-heading{margin:18px 0 12px}
.monitor-ui .role-animation{position:absolute;right:0;top:50%;transform:translateY(-50%);width:180px;height:90px}
.role-growth .selfie-walk{animation:walk-across 5s ease-in-out infinite;transform-origin:75px 145px}
.role-growth .left-leg{animation:step .55s ease-in-out infinite alternate;transform-origin:61px 116px}
.role-growth .right-leg{animation:step .55s ease-in-out infinite alternate-reverse;transform-origin:81px 116px}
.role-engineering .avatar{animation:focus-bob .65s ease-in-out infinite alternate}
.role-design .avatar{animation:focus-bob 2s ease-in-out infinite alternate}
@keyframes walk-across{0%,100%{transform:translate(-16px,0)}25%{transform:translate(0,-2px)}50%{transform:translate(18px,0)}75%{transform:translate(0,-2px)}}
@keyframes step{from{transform:rotate(-15deg)}to{transform:rotate(15deg)}}
@keyframes focus-bob{to{transform:translateY(-2px) rotate(.6deg)}}
@media(max-width:600px){.monitor-ui .role-heading{padding-right:125px}.monitor-ui .role-animation{width:120px;height:74px}}

/* Wide stage: room for real travel without increasing the header height. */
.role-animation{width:270px;flex-basis:270px;height:90px;aspect-ratio:3/1}
.monitor-ui .role-heading{padding-right:285px}
.monitor-ui .role-animation{width:270px;height:90px}
.role-growth .selfie-walk{animation:walk-across 4s ease-in-out infinite}
.role-growth .left-leg,.role-growth .right-leg{animation-duration:.28s}
.role-engineering .scene-action{animation:desk-sway 1.3s ease-in-out infinite}
.role-engineering .typing{animation-duration:.12s}
.role-design .drawing{animation:sketch-wide 1.3s ease-in-out infinite}
.role-design .tile{animation:tile 2.2s ease-in-out infinite}
@keyframes walk-across{0%,100%{transform:translate(-115px,0)}25%{transform:translate(-20px,-4px)}50%{transform:translate(135px,0)}75%{transform:translate(30px,-4px)}}
@keyframes desk-sway{0%,100%{transform:translateX(-8px)}50%{transform:translateX(8px)}}
@keyframes sketch-wide{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(12deg)}}
@media(max-width:600px){.role-animation,.monitor-ui .role-animation{width:180px;height:60px;flex-basis:180px}.monitor-ui .role-heading{padding-right:190px}}
@media(prefers-reduced-motion:reduce){.role-animation *{animation:none!important}}

.monitor-ui .role-heading{margin:24px 0 0;min-height:0}.monitor-ui.engineering-screen .role-heading{margin:18px 0 0}.monitor-ui .role-heading h2{margin:0 0 14px!important}.monitor-ui.engineering-screen .role-heading h2{margin-bottom:12px!important}.monitor-ui .role-heading p{margin:0}.monitor-ui .role-animation{top:50%;transform:translateY(-50%)}