/* The scene and real atlas layer share the identical cover viewport and camera. */
.agent-world{display:block!important;position:absolute;inset:0;width:100%;height:100%;left:0;top:0;transform:none;z-index:3;pointer-events:none;overflow:hidden}
.agent-world>svg{display:block;width:100%;height:100%;overflow:hidden}
.world__image--city{object-fit:cover;object-position:center;animation:none!important}
.portico-walk-frame{animation:portico-walk-frame 4.458333s steps(59,end) infinite}
@keyframes portico-walk-frame{from{transform:translateX(0)}to{transform:translateX(-5664px)}}
.app[data-phase=loading] .portico-walk-frame,.app[data-phase=intro] .portico-walk-frame,.walk-paused .portico-walk-frame{animation-play-state:paused}
.primary-button .btn-arrow,.primary-button:after{display:none!important}
@media(prefers-reduced-motion:reduce){.portico-walk-frame{animation:none!important}.portico-walker{display:none}}

/* Responsive scene: keep the complete office and the sprite coordinate plane together. */
.walking-name{pointer-events:none}
@media(max-width:700px){
  .office-journey>.app{height:100svh;min-height:0}
  .header{padding:20px 20px 0;align-items:center}
  .brand__pill{display:none}
  .world__image-frame{inset:0;background:transparent}
  .world__image--city{object-fit:cover}
  .world__image--city,.agent-world>svg{transform:none}
  .world__veil{background:linear-gradient(0deg,#f7f2e8 0%,rgba(247,242,232,.85) 25%,transparent 49%)!important}
  .hero{left:22px;right:22px;bottom:max(34px,env(safe-area-inset-bottom));max-width:none}
  .hero__overline{font-size:9px;letter-spacing:.1em;margin-bottom:14px;line-height:1.5}
  .hero h1{font-size:clamp(38px,10vw,62px);line-height:1.03;letter-spacing:-.065em}
  .hero p{font-size:15px;line-height:1.5;margin:16px 0 20px}
  .hero__buttons{gap:8px 12px}
  .hero__buttons button{min-height:48px;font-size:12px;padding:12px 14px!important}
  .scene-caption{display:none}
  .intro-controls__left{max-width:55%;font-size:8px;line-height:1.7}
  .intro-controls__skip{min-height:44px}
  .portico-wheel__center{width:54vw;height:230px}
  .wheel-agent{width:76px}
  .wheel-agent__portrait{width:72px;height:72px}
  .wheel-agent>span{font-size:9px;padding:5px 7px}
  .wheel-agent small{font-size:8px}
  .wheel-slide h2{font-size:clamp(25px,6.7vw,39px);letter-spacing:-.06em}
  .wheel-slide p{font-size:12px;line-height:1.5}
  .portico-wheel__bottom{letter-spacing:.06em;gap:12px}
  .portico-finale__copy{padding-inline:22px!important}
  .panel{width:100%;max-width:100vw;padding-bottom:env(safe-area-inset-bottom)}
}
@media(max-width:380px){.hero__buttons{flex-direction:column;align-items:flex-start;gap:2px}.hero h1{font-size:38px}.wheel-agent{width:66px}.wheel-agent__portrait{width:64px;height:64px}}
@media(max-height:600px) and (orientation:landscape){.hero{bottom:24px;max-width:46vw}.hero h1{font-size:38px}.hero p{font-size:13px;margin:12px 0}.hero__overline{margin-bottom:10px}.header{padding-top:14px}.scene-caption{display:none}}

.hero__buttons a.primary-button,.story-ending__button{text-decoration:none;touch-action:manipulation}
@media(max-width:700px){.hero__buttons a.primary-button{min-height:48px;font-size:12px;padding:12px 14px!important}}