/* Four-scene local Hero. Brief card entrances; continuous motion stays on decorative Bubble / props. */
.hero-motion-studio{padding:20px;isolation:isolate}
.hero-motion-studio .studio-top{padding-bottom:14px;border-bottom:1px solid var(--line)}
.hero-motion-studio .studio-top>span:last-child{font-size:9px;color:#a4acbf}
.hero-stage{height:362px;position:relative;margin-top:16px}
.hero-frame{height:100%;display:flex;flex-direction:column;position:relative;min-width:0}
.hero-frame[hidden]{display:none}
.hero-frame-heading{display:flex;align-items:center;gap:12px;min-height:49px}
.hero-scene-number{font:34px/.9 var(--pixel);color:var(--bright);align-self:center}
.hero-scene-label{font:9px/1.5 var(--mono);letter-spacing:.03em;color:#a4acbf;margin-bottom:4px}
.hero-frame-heading h3{font-size:19px;line-height:1.3;letter-spacing:-.02em;font-weight:500}
.works-hero .hero-frame-description{font-size:12px;line-height:1.7;max-width:none;margin:12px 0 0;color:#a4acbf;min-height:42px}
.hero-scene-foot{font-size:11px;line-height:1.65;color:#a4acbf;margin-top:auto;min-height:37px;padding-top:12px}
.hero-goal-scene{height:194px;display:flex;align-items:center;position:relative;gap:12px;padding:12px 0}
.hero-client-bubble{width:64px;height:56px;flex-shrink:0;z-index:2;position:relative}
.hero-request-card{border:1px solid rgba(177,155,255,.4);border-left:2px solid var(--bright);border-radius:6px;background:#111724;padding:15px 17px;min-width:0;flex:1;z-index:2;position:relative}
.hero-card-label{display:block;font:9px/1.6 var(--mono);color:#a4acbf;letter-spacing:.025em;margin-bottom:8px}
.hero-request-card strong{display:block;font-size:17px;line-height:1.55;font-weight:500;color:var(--text)}
.hero-request-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.hero-request-tags span{font:10px/1.5 var(--mono);padding:3px 6px;border:1px solid var(--line);border-radius:3px;color:#a4acbf}
.hero-goal-receive{width:55px;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2;flex-shrink:0;color:var(--bright);gap:5px}
.hero-goal-receive span{font:9px/1.5 var(--mono);letter-spacing:.025em;color:#a4acbf}
.hero-motion-studio .hero-prop{width:36px;height:34px;stroke:#b19bff;stroke-width:2;fill:none;stroke-linecap:square;stroke-linejoin:miter;shape-rendering:geometricPrecision;flex-shrink:0}
.hero-goal-link{position:absolute;width:calc(100% - 78px);left:64px;height:1px;background:rgba(177,155,255,.45);z-index:0}
.hero-proposal-scene{margin-top:16px;border:1px solid rgba(177,155,255,.25);border-radius:7px;background:#0e131e;padding:13px 15px}
.hero-sheet-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-height:24px}
.hero-sheet-top>span{width:29px;height:25px;display:flex}
.hero-sheet-top strong{font-size:12px;font-weight:500}
.hero-sheet-top small{margin-left:auto;font-size:10px;color:#c7b7ff}
.hero-proposal-rows{margin:11px 0 0}
.hero-proposal-rows>div{display:grid;grid-template-columns:48px 1fr;gap:12px;border-top:1px solid var(--line);padding:8px 0;font-size:12px;line-height:1.55}
.hero-proposal-rows dt{color:#a4acbf}
.hero-proposal-rows dd{margin:0;color:var(--text)}
.hero-example-choices{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}
.hero-example-choices>span{font-size:11px;line-height:1.5;padding:6px 9px;border:1px solid var(--line);border-radius:4px;color:#a4acbf;cursor:default}
.hero-example-choices>span.hero-choice-filled{border-color:rgba(177,155,255,.42);background:rgba(177,155,255,.08);color:#d2c5ff}
.hero-team-scene{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;align-items:center;min-height:197px;position:relative;padding:20px 0 6px}
.hero-team-member{position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;z-index:1;padding:8px 4px;text-align:center}
.hero-team-bubble{display:block;width:69px;height:58px;position:relative;z-index:1}
.hero-team-prop{display:flex;align-items:center;justify-content:center;width:44px;height:41px;margin-top:4px;background:#0e131e}
.hero-team-member strong{font-size:12px;line-height:1.45;font-weight:500;margin-top:10px;color:var(--text);max-width:100%}
.hero-team-member small{font-size:10px;line-height:1.5;color:#a4acbf;margin-top:6px;max-width:100%}
.hero-team-connection{position:absolute;left:17%;right:17%;height:1px;top:113px;background:rgba(177,155,255,.35);z-index:0;display:flex;justify-content:space-evenly}
.hero-team-connection i{display:block;width:4px;height:4px;background:#b19bff;margin-top:-1.5px}
.hero-delivery-scene{margin-top:13px;border:1px solid rgba(177,155,255,.25);border-radius:7px;background:#0e131e;padding:11px 14px}
.hero-delivery-heading{display:flex;gap:7px;align-items:center;margin-bottom:6px}
.hero-delivery-heading>span{width:29px;height:25px;display:flex}
.hero-delivery-heading strong{font-size:12px;font-weight:500}
.hero-pack-item{display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px solid var(--line)}
.hero-motion-studio .hero-pack-item>.hero-prop{width:24px;height:25px}
.hero-pack-item strong{font-size:11px;line-height:1.45;font-weight:500;display:block}
.hero-pack-item span{font-size:10px;line-height:1.5;color:#a4acbf;display:block;margin-top:2px}
.hero-delivery-scene .hero-example-choices{margin-top:5px}
.hero-step-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;border-top:1px solid var(--line);padding-top:13px}
.hero-step-controls button{border:1px solid var(--line);border-radius:5px;background:transparent;color:#a4acbf;font-size:11px;line-height:1.45;padding:6px 4px;min-height:50px;text-align:center;transition:background .15s,border-color .15s;color-scheme:dark}
.hero-step-controls button>span{display:block;font:9px/1.3 var(--mono);color:#a4acbf;margin-bottom:4px}
.hero-step-controls button[aria-pressed="true"]{background:rgba(177,155,255,.08);border-color:rgba(177,155,255,.5);color:#d2c5ff}
.hero-step-controls button[aria-pressed="true"]>span{color:#d2c5ff}
.hero-step-controls button:hover{border-color:rgba(177,155,255,.5);color:var(--text)}
.hero-playback-controls{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;min-height:28px;flex-wrap:wrap}
.hero-motion-help{font-size:10px;line-height:1.5;color:#a4acbf}
.hero-playback-controls>div{display:flex;align-items:center;gap:8px;margin-left:auto}
.hero-counter{font:9px/1.4 var(--mono);color:#a4acbf;margin-right:2px;white-space:nowrap}
.hero-playback-controls button{display:inline-flex;align-items:center;gap:5px;font-size:11px;line-height:1.4;color:#c9c0dc;border:1px solid var(--line);border-radius:4px;background:transparent;padding:5px 7px;min-height:28px}
.hero-playback-controls button:hover{background:rgba(177,155,255,.08);border-color:rgba(177,155,255,.5)}
.hero-control-glyph{color:#b19bff;font:14px/1 var(--mono);min-width:11px}
.hero-motion-studio .hero-studio-bottom{border-top:1px solid var(--line);padding-top:10px;margin-top:10px}
.hero-motion-studio .hero-studio-bottom p{font-size:10px;line-height:1.6;color:#a4acbf}
.hero-motion-studio .hero-client-bubble,.hero-motion-studio .hero-team-bubble{animation:hero-bubble-hover 2.8s ease-in-out infinite;animation-play-state:paused}
.hero-motion-studio .hero-team-make .hero-team-bubble{animation-delay:-.9s}
.hero-motion-studio .hero-team-review .hero-team-bubble{animation-delay:-1.8s}
.hero-motion-studio .hero-goal-receive>.hero-prop,.hero-motion-studio .hero-team-connection i{animation:hero-prop-pulse 2.4s ease-in-out infinite;animation-play-state:paused}
.hero-motion-studio .hero-team-connection i:nth-child(2){animation-delay:-1.2s}
.hero-motion-studio[data-running="true"] .hero-client-bubble,.hero-motion-studio[data-running="true"] .hero-team-bubble,.hero-motion-studio[data-running="true"] .hero-goal-receive>.hero-prop,.hero-motion-studio[data-running="true"] .hero-team-connection i{animation-play-state:running}
@keyframes hero-bubble-hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes hero-prop-pulse{0%,100%{opacity:.55}50%{opacity:1}}
@media(min-width:861px) and (max-width:1100px){.hero-request-card{padding:14px 12px}.hero-client-bubble{width:52px;height:46px}.hero-goal-receive{width:42px}.hero-request-card strong{font-size:16px}.hero-frame-heading h3{font-size:18px}.hero-step-controls button{font-size:11px}}
@media(max-width:760px){.hero-motion-studio{padding:19px}.hero-stage{height:377px;margin-top:19px}.hero-frame-heading h3{font-size:18px}.hero-scene-label{font-size:10px;line-height:1.5;letter-spacing:0}.hero-motion-studio .studio-top,.hero-motion-studio .studio-top>span:last-child{font-size:10px}.works-hero .hero-frame-description{font-size:12px;line-height:1.7;min-height:43px}.hero-motion-studio .hero-studio-bottom p,.hero-motion-help,.hero-card-label,.hero-counter{font-size:10px}.hero-step-controls button,.hero-playback-controls button{font-size:12px}.hero-step-controls button>span{font-size:10px}.hero-step-controls button{min-height:61px}.hero-team-member strong{font-size:12px}.hero-team-member small{font-size:10px}.hero-request-card strong{font-size:16px}.hero-client-bubble{width:53px;height:46px}.hero-goal-receive{width:39px}.hero-request-card{padding:13px 11px}.hero-goal-scene{gap:8px}.hero-proposal-rows>div{grid-template-columns:45px 1fr;gap:8px}.hero-scene-foot{font-size:11px;min-height:44px}.hero-example-choices>span{font-size:11px}.hero-proposal-scene{padding:12px}.hero-team-bubble{width:58px;height:50px}}
@media(max-width:420px){.hero-frame-heading{gap:9px}.hero-scene-number{font-size:31px}.hero-scene-label{max-width:225px}.hero-stage{height:407px}.hero-frame-heading h3{font-size:17px}.works-hero .hero-frame-description{min-height:62px}.hero-goal-scene{height:194px}.hero-client-bubble{width:43px;height:38px}.hero-request-card strong{font-size:15px}.hero-request-card{padding:13px 10px}.hero-goal-receive{width:32px}.hero-motion-studio .hero-goal-receive>.hero-prop{width:29px;height:28px}.hero-goal-receive span{font-size:8px}.hero-team-scene{gap:5px}.hero-team-member{padding-inline:1px}.hero-team-bubble{width:55px;height:46px}.hero-team-member small{font-size:10px}.hero-motion-help{width:100%}.hero-playback-controls>div{margin-left:0;width:100%;justify-content:flex-end}.hero-playback-controls{gap:6px}.hero-step-controls{gap:4px}.hero-step-controls button{padding:8px 2px}.hero-delivery-scene{padding:10px 12px}}
@media(prefers-reduced-motion:reduce){.hero-motion-studio .hero-client-bubble,.hero-motion-studio .hero-team-bubble,.hero-motion-studio .hero-goal-receive>.hero-prop,.hero-motion-studio .hero-team-connection i{animation:none!important;transform:none!important;opacity:1}.hero-step-controls button{transition:none}}

/* Brief transitions explain the hand-off without moving the main headline. */
.hero-motion-studio[data-running="true"] .hero-request-card{animation:hero-card-arrive .5s ease-out both}
.hero-motion-studio[data-running="true"] .hero-proposal-scene{animation:hero-sheet-open .45s ease-out both}
.hero-motion-studio[data-running="true"] .hero-delivery-scene{animation:hero-card-arrive .45s ease-out both}
@keyframes hero-card-arrive{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
@keyframes hero-sheet-open{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.hero-motion-studio *{animation:none!important;transition:none!important}}
/* Reserve the longest bilingual panel without shrinking its text or cards. */
.hero-stage{height:420px}
.hero-frame>*{flex-shrink:0}
@media(min-width:861px) and (max-width:1100px){.hero-stage{height:440px}}
@media(max-width:760px){.hero-stage{height:430px}}
@media(max-width:420px){.hero-stage{height:460px}}