/* Real, in-flow artwork extends into the scrollable overflow area. No page clone,
   artificial sidebar, page scaling, body-width override or negative body offset. */
/* The root must not clip composited descendants to Safari's 382px layout edge. */
html[data-ag-duo-canvas]{overflow-x:visible;scrollbar-gutter:auto}
html[data-ag-duo-canvas][data-ag-duo-zoomed]{overflow-x:auto}
html[data-ag-duo-canvas] body[data-page]:not(.scroll-locked):not(.mobile-menu-open){overflow:visible}
/* The menu owns its own scrolling. Do not reintroduce a root clip while open. */
html[data-ag-duo-menu] body.mobile-menu-open[data-page]{overflow:visible!important}
html[data-ag-duo-canvas] body[data-page] #main{
 width:var(--ag-duo-page-width);max-width:none;
 --ag-mobile-gutter:var(--gutter);--ag-mobile-right:var(--gutter);
}
/* The floating controls stay reachable; their open menu and all page surfaces are wide. */
html[data-ag-duo-canvas] body[data-page] header.site-header.ag-dark-header{width:var(--ag-duo-view-width);max-width:100%}
html[data-ag-duo-canvas] body[data-page] header.site-header.ag-dark-header{left:0;right:auto;margin-inline:0}
html[data-ag-duo-canvas] body[data-page] [data-roster-carousel]{width:var(--ag-duo-page-width);max-width:100%}
html[data-ag-duo-canvas] body[data-page] .roster-experience{width:var(--ag-duo-page-width)}
html[data-ag-duo-canvas] body[data-page] .roster-heading{width:var(--ag-duo-view-width);max-width:100%}
html[data-ag-duo-canvas] body[data-page] .roster-controls{width:var(--ag-duo-view-width);max-width:100%;margin-left:0;margin-right:auto}
html[data-ag-duo-canvas] body[data-page] .roster-preview{padding-right:calc(var(--ag-duo-overflow) + 18px)}
/* Project stories have independent scrolling surfaces. */
html[data-ag-duo-canvas] body[data-page] .work-project{width:var(--ag-duo-page-width)}
html[data-ag-duo-canvas] body[data-page] .work-project .project-toolbar{right:calc(var(--ag-duo-overflow) + 20px)}
html[data-ag-duo-canvas] body[data-page] :is(footer.ag-footer,footer.site-footer){width:var(--ag-duo-page-width);max-width:none;margin-left:0;margin-right:0;padding-right:calc(var(--ag-duo-overflow) + var(--gutter))}
/* Absolute artwork fills the wider panel; foreground copy stays before the controls. */
@layer mobile-composition{
 /* Native Safari can discard a composited clip at its layout edge even when
    the element's measured width is correct. Use ordinary rounded overflow,
    as on the working Projects panel, instead of a second clip-path layer. */
 html[data-ag-duo-canvas] body[data-page] :is([data-ag-opening=standard],[data-ag-cta-template],.ag-shared-cta,.home-cinema-window,.work-cinema-window,.ag-form-view-card){
  clip-path:none!important;-webkit-clip-path:none!important;
  backface-visibility:visible!important;transform-style:flat!important;will-change:auto!important;
 }
 /* The Duo opening film uses the same flowing panel as Projects. A viewport
    sized sticky film makes Safari replace the right band with a flat tint. */
 html[data-ag-duo-canvas] body[data-page=home] .home-cinema{
  width:calc(var(--ag-duo-page-width) - var(--gutter)*2)!important;
  height:600px!important;margin:12px var(--gutter) 0!important;
 }
 html[data-ag-duo-canvas] body[data-page=home] .home-cinema-stage{
  position:relative!important;top:auto!important;height:100%!important;overflow:hidden!important;border-radius:20px!important;
 }
 html[data-ag-duo-canvas] body[data-page=home] .home-cinema-window{border-radius:20px!important}
 html[data-ag-duo-canvas] body[data-page=home] .home-cinema figcaption,
 html[data-ag-duo-canvas] body[data-page=home] .home-scroll-cue{display:none!important}
 html[data-ag-duo-canvas] body[data-page=home] .home-video-controls{right:calc(var(--ag-duo-overflow) + 12px)!important;bottom:24px!important}
 html[data-ag-duo-canvas] body[data-page=home] .home-cinema-copy{bottom:82px!important;right:auto!important}
 html[data-ag-duo-canvas] body[data-page] .services-banner{opacity:1!important;transition:none!important}
 /* Keep the horizontal section rail, but let it scroll with the document.
    Native sticky layers do not reliably paint behind the side controls. */
 html[data-ag-duo-canvas] body[data-page] .services-jump{position:relative!important;top:auto!important;width:var(--ag-duo-page-width)!important}
 html[data-ag-duo-canvas] body[data-page=services]{--services-scroll-offset:4px!important}
 html[data-ag-duo-canvas] body[data-page] .service-faq-summary{padding-right:calc(var(--ag-duo-overflow) + 19px)!important;flex-wrap:wrap}
 html[data-ag-duo-canvas] body[data-page] .service-faq-count{margin-left:0}
 html[data-ag-duo-canvas] body[data-page] .service-faq-icon{margin-left:auto}
 html[data-ag-duo-canvas] body[data-page] :is(.service-body,.service-uses,.service-stats-list,.service-intro,.service-faq-list){padding-right:var(--ag-duo-overflow)!important}
 /* Full-width menu and form backgrounds. Only the interactive foreground is inset. */
 html[data-ag-duo-canvas] body[data-page] header.site-header.ag-dark-header .mobile-nav{
  width:var(--ag-duo-page-width)!important;max-width:none!important;right:auto!important;
  padding-right:calc(var(--ag-duo-overflow) + var(--gutter))!important;
 }
 html[data-ag-duo-canvas] body.mobile-menu-open[data-page] header.site-header.ag-dark-header{
  position:absolute!important;top:var(--ag-duo-menu-top,0px)!important;
 }
 html[data-ag-duo-canvas] body.mobile-menu-open[data-page] header.site-header.ag-dark-header .mobile-nav{
  position:absolute!important;top:0!important;bottom:auto!important;
 }
 html[data-ag-duo-canvas] body[data-page] dialog.ag-form-view{
  width:var(--ag-duo-page-width)!important;max-width:none!important;
 }
 html[data-ag-duo-canvas] body[data-page] .ag-form-view>header.site-header.ag-dark-header{
  width:var(--ag-duo-view-width)!important;max-width:none!important;
 }
 html[data-ag-duo-canvas] body.mobile-menu-open[data-page] .ag-form-view>header.site-header.ag-dark-header{
  position:relative!important;top:var(--ag-duo-form-menu-top,0px)!important;
 }
 html[data-ag-duo-canvas] body[data-page] .ag-form-view-card{
  width:100%!important;max-width:none!important;overflow:hidden!important;
 }
 html[data-ag-duo-canvas] body[data-page] .ag-form-view-card>:is(form,.ag-enquiry-body,.ag-thanks-content){
  padding-right:calc(var(--ag-duo-overflow) + 24px)!important;
 }
 html[data-ag-duo-canvas] body[data-page] .ag-form-view-close{right:calc(var(--ag-duo-overflow) + 16px)!important}
 html[data-ag-duo-canvas] body[data-page] :is(.avatar-dialog.has-scene-backdrop,.avatar-scene-backdrop){width:var(--ag-duo-page-width)!important}
 html[data-ag-duo-canvas] body[data-page] :is(.home-cinema-copy,.work-cinema-window .work-intro-copy){
  max-width:calc(var(--ag-duo-view-width) - 48px)!important;
 }
 html[data-ag-duo-canvas] body[data-page] #main>.section-shell{
  width:calc(var(--ag-duo-page-width) - var(--gutter)*2)!important;
  margin-left:var(--gutter)!important;margin-right:var(--gutter)!important;
 }
 /* The panel uses the full canvas; copy is measured inside the usable foreground.
    This also covers CTAs that share the template but live inside another section. */
 html[data-ag-duo-canvas] body[data-page] #main :is([data-ag-cta-role=copy],.ag-hello-copy),
 html[data-ag-duo-canvas] body[data-page] #main [data-ag-opening-role=copy]:not(.home-cinema-copy):not(.work-intro-copy){
  max-width:calc(var(--ag-duo-view-width) - var(--gutter)*2 - 48px)!important;
  align-self:flex-start!important;justify-self:start!important;
 }
 html[data-ag-duo-canvas] body[data-page] #main .ag-hello-copy:not([data-ag-cta-role=copy]){
  max-width:calc(var(--ag-duo-view-width) - var(--gutter)*2)!important;
 }
 html[data-ag-duo-canvas] body[data-page] :is(.home-step-copy,.service-media-copy,.work-approach-feature-copy,.career-heading,.career-caption,.about-story-title,.discipline-copy){
  padding-right:calc(var(--ag-duo-overflow) + 24px)!important;
 }
 html[data-ag-duo-canvas] body[data-page] .work-project :is(.project-hero-copy,.project-case-overlay-copy,.ag-hello-copy,.project-copy-block){
  max-width:calc(var(--ag-duo-view-width) - 40px)!important;
 }
}