/* Only Home has a full-screen, scroll-driven opening film. */
html body[data-page]:is([data-page="demos"],[data-page="work"]){background-image:none;--home-header:1;--home-nav:18;--work-header:1;--cinema-tail:0px;--work-cinema-tail:0px}
html body[data-page]:not([data-page="home"]) :is(.home-cinema,.work-intro.work-cinema){width:calc(100% - var(--gutter)*2);max-width:1552px;height:auto;margin:18px auto 0;border-radius:28px;overflow:hidden;background:#171719}
html body[data-page]:not([data-page="home"]) :is(.home-cinema-stage,.work-cinema-stage){position:relative;top:auto;width:100%;height:auto;aspect-ratio:16/9;overflow:hidden}
html body[data-page]:not([data-page="home"]) :is(.home-cinema-window,.work-cinema-window){clip-path:none;will-change:auto;border-radius:inherit;--copy-opacity:1;--work-copy-opacity:1}
html body[data-page]:not([data-page="home"]) :is(.home-cinema-window>video,.work-intro-art video){inset:0;left:0;top:0;width:100%;height:100%;transform:none;scale:1;translate:none;will-change:auto;object-fit:cover}
html body[data-page]:not([data-page="home"]) :is(.home-cinema-copy,.work-cinema-window .work-intro-copy){left:auto;right:clamp(28px,4vw,64px);top:auto;bottom:82px;width:min(55%,700px);padding:0;margin:0;transform:none;opacity:1;will-change:auto;text-align:left}
html body[data-page]:not([data-page="home"]) :is(.home-cinema-copy h1,.work-intro-copy h1){font-size:var(--ag-hero-title-size);line-height:var(--ag-hero-title-leading);letter-spacing:var(--ag-hero-title-tracking)}
html body[data-page]:not([data-page="home"]) .home-cinema-window:after,
html body[data-page]:not([data-page="home"]) .work-cinema-window .work-intro-shade{opacity:1;background:radial-gradient(ellipse 95% 110% at 100% 100%,rgba(16,17,18,0.76588) 0%,rgba(16,17,18,0.59294) 28%,rgba(16,17,18,0.28941) 60%,transparent 90%)}
html body[data-page]:not([data-page="home"]) :is(.home-video-controls,.work-video-controls){right:24px;bottom:20px;transform:none;opacity:1;will-change:auto}
html body[data-page="demos"] .home-cinema+.roster-experience{margin-top:16px;padding-top:0}
html body[data-page="work"] .work-cinema+.work-approach{margin-top:24px}
html body[data-page="demos"] .roster-heading{position:relative;isolation:isolate;overflow:hidden;width:calc(100% - var(--gutter)*2);max-width:1552px;min-height:210px;margin:0 auto;padding:38px 24px;border-radius:24px;display:flex;flex-direction:column;justify-content:center;color:#fff;background:#252824}
.roster-banner-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 70%;z-index:-2}
html body[data-page="demos"] .roster-heading:before{content:"";position:absolute;inset:0;background:rgb(16 21 18 / .45);z-index:-1}
html body[data-page="demos"] .roster-heading h1{font-style:normal}
html body[data-page="demos"] .roster-heading .roster-instruction{color:#fff;letter-spacing:.08em}
html body[data-page="demos"] .roster-howto{margin:20px auto 12px;max-width:1120px}
@media(max-width:900px) and (min-width:601px){
 html body[data-page]:not([data-page="home"]) :is(.home-cinema-stage,.work-cinema-stage){min-height:540px}
 html body[data-page]:not([data-page="home"]) :is(.home-cinema-copy,.work-cinema-window .work-intro-copy){width:65%;right:28px}
}
@media(max-width:600px){
 html body[data-page]:not([data-page="home"]) :is(.home-cinema,.work-intro.work-cinema){margin-top:12px;border-radius:20px}
 html body[data-page]:not([data-page="home"]) :is(.home-cinema-stage,.work-cinema-stage){aspect-ratio:4/5;min-height:620px}
 html body[data-page]:not([data-page="home"]) :is(.home-cinema-copy,.work-cinema-window .work-intro-copy){left:24px;right:24px;bottom:78px;width:auto}
 html body[data-page]:not([data-page="home"]) :is(.home-cinema-window:after,.work-cinema-window .work-intro-shade){background:linear-gradient(0deg,rgba(16,17,18,0.83647),rgba(16,17,18,0.57529) 33%,transparent 78%)}
 html body[data-page="demos"] .home-cinema+.roster-experience{margin-top:12px;display:flex;flex-direction:column}
 html body[data-page="demos"] .roster-heading{min-height:210px;padding:28px 12px 62px;flex-shrink:0;z-index:2}
 html body[data-page="demos"] .roster-heading h1{font-size:var(--ag-section-title-size);white-space:nowrap}
 html body[data-page="demos"] .roster-carousel{order:2;margin-top:-54px;z-index:1}
 html body[data-page="demos"] .roster-howto{order:3;margin-top:18px}
 html body[data-page="demos"] .roster-meta{order:4}
 html body[data-page="demos"] .roster-noscript{order:5}
 html body[data-page="demos"] .roster-heading:before{background:linear-gradient(rgb(16 21 18 /0.38385) 60%,rgb(16 21 18 /0.49761))}
}

/* Opening film copy returns to its original lower-left anchor. */
@media(min-width:601px){
 html body[data-page]:not([data-page="home"]) :is(.home-cinema-copy,.work-cinema-window .work-intro-copy){left:clamp(28px,4vw,64px);right:auto}
 html body[data-page]:not([data-page="home"]) .home-cinema-window:after,
 html body[data-page]:not([data-page="home"]) .work-cinema-window .work-intro-shade{background:radial-gradient(ellipse 95% 110% at 0% 100%,rgba(16,17,18,0.76588) 0%,rgba(16,17,18,0.59294) 28%,rgba(16,17,18,0.28941) 60%,transparent 90%)}
}

/* Demo shares one breathing-space value around its film and closing invitation. */
html body[data-page="demos"]{--demo-panel-gap:48px}
html body[data-page="demos"] .home-cinema{margin-top:var(--demo-panel-gap)}
html body[data-page="demos"] .home-cinema+.roster-experience{margin-top:var(--demo-panel-gap)}
html body[data-page="demos"] .ag-shared-cta.ag-hello-cta{margin-top:var(--demo-panel-gap)}
html body[data-page="demos"] .roster-heading{min-height:280px;padding:36px 24px}
html body[data-page="demos"] .roster-heading .roster-howto{width:100%;max-width:1040px;margin:18px auto 0;color:#fff;text-wrap:balance}
html body[data-page="demos"] .roster-heading .roster-howto p{color:#fff}
@media(max-width:600px){
 html body[data-page="demos"]{--demo-panel-gap:28px}
 html body[data-page="demos"] .roster-heading{padding:28px 18px 66px;min-height:330px}
 html body[data-page="demos"] .roster-heading .roster-howto{margin-top:16px;order:initial;font-size:var(--ag-copy-size);line-height:var(--ag-copy-leading)}
}

html body[data-page="demos"] .roster-experience{padding-bottom:0}

html body[data-page="demos"]:not([data-page="home"]) .home-cinema{margin-top:var(--demo-panel-gap)}

html body[data-page="demos"]:not([data-page="home"]) .home-cinema.home-cinema{margin-top:var(--demo-panel-gap)}

/* Match the visible portrait gap to the invitation gap below the slider. */
@media(min-width:801px){
 html body[data-page="demos"] .roster-carousel{margin-top:calc(var(--demo-panel-gap) - 24px)}
}
@media(min-width:601px) and (max-width:800px){
 html body[data-page="demos"] .roster-carousel{margin-top:calc(var(--demo-panel-gap) - 34px)}
}

/* Avatar banner hierarchy and mobile spacing. */
html body[data-page="demos"] .roster-heading h1{font-size:clamp(58px,6vw,92px);line-height:1.06}
html body[data-page="demos"] .roster-heading .roster-howto{font-size:16px;line-height:1.6;max-width:900px}
@media(max-width:600px){html body[data-page="demos"] .roster-heading{min-height:280px;padding:28px 18px}html body[data-page="demos"] .roster-heading h1{font-size:clamp(48px,13.5vw,68px);white-space:normal}html body[data-page="demos"] .roster-heading .roster-howto{font-size:14px;line-height:1.55;margin-top:14px}html body[data-page="demos"] .roster-carousel{margin-top:calc(var(--demo-panel-gap) - 34px)}html body[data-page="demos"] .roster-experience{padding-top:0}}