/* Shared media-pill typography and rhythm. Matched components share these tokens. */
:root{--pill-title:clamp(56px,5.6vw,88px);--pill-small-title:clamp(38px,3.8vw,56px);--pill-body:18px;--pill-inset:32px;--pill-gap:24px}
html body[data-page] :is(.home-cinema-copy h1,.work-intro-copy h1,.about-welcome-copy h1,.ag-hello-copy h2,.project-hero-copy h2,.services-display){font-family:var(--display)!important;font-size:var(--pill-title)!important;font-weight:400;line-height:1.04!important;letter-spacing:-0.015em!important}
html body[data-page] :is(.about-story-title h2,.work-approach-feature-copy h2,.career-heading h2,.discipline-copy h3,.project-case-overlay-copy h3){font-family:var(--display)!important;font-size:var(--pill-small-title)!important;font-weight:400;line-height:1.08!important;letter-spacing:-0.005em!important}
html body[data-page] :is(.home-cinema-copy,.work-intro-copy,.about-welcome-copy,.ag-hello-copy,.project-hero-copy,.project-case-overlay-copy,.work-approach-feature-copy,.career-heading,.discipline-copy,.services-banner-copy)>p{font:400 var(--pill-body)/1.6 var(--sans)!important;letter-spacing:0!important;margin:var(--pill-gap) 0 0!important;max-width:60ch}
html body[data-page] :is(.ag-hello-copy,.about-welcome-copy,.about-story-title,.project-case-overlay-copy,.work-approach-feature-copy,.career-heading,.discipline-copy)>.eyebrow{font:600 12px/1.4 var(--sans)!important;letter-spacing:.08em}
html body[data-page] :is(.ag-hello-copy,.about-welcome-copy,.about-story-title,.project-case-overlay-copy,.work-approach-feature-copy)>:is(h1,h2,h3){margin:0!important}
html body[data-page] main .ag-shared-cta.ag-hello-cta[data-cta-storefront]{height:auto;min-height:0}
html body[data-page] main .ag-shared-cta.ag-hello-cta[data-cta-storefront] .ag-hello-copy{display:flex;flex-direction:column;width:72%;max-width:1000px;min-height:0;padding:var(--pill-inset);margin:0;align-self:stretch;justify-content:flex-end}
html body[data-page] main [data-cta-storefront] .ag-hello-copy>.eyebrow{margin:0 0 32px;padding:0;flex-shrink:0}
html body[data-page] main .ag-hello-actions{margin-top:24px;gap:12px}
html body[data-page] main .ag-hello-copy>.ag-hello-footnote{position:static;margin:20px 0 0;font:400 12px/1.5 var(--sans)}
html body[data-page] main .ag-project-cta{min-height:0;height:auto}
html body[data-page] main .ag-project-cta .ag-hello-copy{padding:32px;min-height:0}

html body[data-page] main .about-welcome-copy{padding:32px;width:min(72%,940px);min-height:0;display:flex;flex-direction:column;justify-content:flex-end}
html body[data-page] main .about-welcome-copy>.eyebrow{margin:0 0 40px;padding:0}
html body[data-page] main .about-story .about-story-title{padding:32px;min-height:300px;justify-content:flex-end}
html body[data-page] main .about-story-title h2{margin:60px 0 0!important}
html body[data-page] main .project-case-overlay-copy{padding:32px}
html body[data-page] main :is(.home-actions,.ag-hello-actions) .button{font:500 14px/1.4 var(--sans);min-height:48px;padding:14px 20px}
@media(max-width:600px){
 :root{--pill-title:clamp(40px,11vw,54px);--pill-small-title:clamp(34px,9vw,44px);--pill-body:16px;--pill-inset:24px;--pill-gap:20px}
 html body[data-page] main .ag-shared-cta.ag-hello-cta[data-cta-storefront] .ag-hello-copy{width:100%;min-height:0;padding:24px}
 html body[data-page] main [data-cta-storefront] .ag-hello-copy>.eyebrow{margin-bottom:56px}
 html body[data-page] main .about-welcome-copy{width:100%;padding:24px 24px 80px;min-height:0}
 html body[data-page] main .about-welcome-copy>.eyebrow{margin-bottom:56px}
 html body[data-page] main .about-story .about-story-title{padding:24px;min-height:280px}
 html body[data-page] main .project-case-overlay-copy{padding:24px}
 html body[data-page] main .ag-project-cta .ag-hello-copy{padding:24px}
}
@media(max-height:580px) and (min-width:601px){:root{--pill-title:42px;--pill-body:16px}}
/* Restore the original cinematic About frame; arrange copy inside it. */
html body[data-page] main .about-welcome-copy{position:absolute;inset:0;width:100%;max-width:none;min-height:0;padding:32px;display:flex;flex-direction:column;justify-content:flex-end}
html body[data-page] main .about-welcome-copy>.eyebrow{margin:0 0 auto;padding:0}
html body[data-page] main .about-welcome-copy>h1{max-width:70%}
html body[data-page] main .about-welcome-copy>p{max-width:540px}
@media(max-width:600px){html body[data-page] main .about-welcome-copy{padding:24px 24px 80px}html body[data-page] main .about-welcome-copy>h1{max-width:100%}}/* About media panels share one vertical text alignment. */
html body[data-page=about] main :is(.career-heading,.career-caption){padding-left:var(--pill-inset);padding-right:var(--pill-inset)}
html body[data-page=about] main :is(.about-welcome-copy,.about-story-title,.career-heading,.ag-hello-copy)>:is(h1,h2,p,.eyebrow){margin-left:0;margin-right:0}
/* Keep experience copy on the shaded side of the desktop image. */
@media(min-width:601px){
 html body[data-page=about] main .career-heading h2 em{display:block}
 html body[data-page=about] main .career-heading>p{max-width:430px!important;text-wrap:pretty}
}
/* One stationary opening frame across Services, About, Projects and Demo. */
html body[data-page] main :is(.about-welcome,.services-banner){width:calc(100% - var(--gutter)*2);max-width:1552px;aspect-ratio:16/9;min-height:0;max-height:none;height:auto;margin:18px auto 0;border-radius:28px;padding:0;opacity:1;transition:none}
html body[data-page]:not([data-page=home]) :is(.home-cinema,.work-intro.work-cinema){margin-top:18px}
html body[data-page]:not([data-page=home]) :is(.home-cinema-copy,.work-cinema-window .work-intro-copy),
html body[data-page] main :is(.about-welcome-copy,.services-banner-copy){position:absolute;inset:32px 32px 64px;width:auto;max-width:none;min-height:0;margin:0;padding:0;display:flex;flex-direction:column;justify-content:flex-end;transform:none}
html body[data-page] main :is(.about-welcome-copy,.services-banner-copy)>p,
html body[data-page]:not([data-page=home]) :is(.home-cinema-copy,.work-intro-copy)>p{max-width:540px!important;text-wrap:pretty}
html body[data-page] main .services-banner-copy h1{position:absolute;top:0;left:0;margin:0;font:600 12px/1.4 var(--sans);letter-spacing:.08em}
html body[data-page] main .services-banner-copy .services-display{font:400 var(--pill-title)/1.04 var(--display)!important;letter-spacing:-0.015em!important;margin:0}
html body[data-page] main .services-display-line{white-space:normal}
html body[data-page] main .services-banner-media img{object-position:center;transform:none}
@media(max-width:900px) and (min-width:601px){html body[data-page] main :is(.about-welcome,.services-banner){min-height:540px}}
@media(max-width:600px){
 html body[data-page] main :is(.about-welcome,.services-banner){aspect-ratio:4/5;min-height:620px;margin-top:12px;border-radius:20px}
 html body[data-page]:not([data-page=home]) :is(.home-cinema-copy,.work-cinema-window .work-intro-copy),html body[data-page] main :is(.about-welcome-copy,.services-banner-copy){inset:24px 24px 80px;width:auto;padding:0}
 html body[data-page] main .services-banner-copy{min-height:0}
}
html body[data-page=services] [data-cta-storefront] .ag-hello-image>img{object-position:center top}
@media(min-width:901px){html body[data-page=services] main [data-cta-storefront]{min-height:0;aspect-ratio:1920/842;align-items:flex-end}html body[data-page=services] main [data-cta-storefront] .ag-hello-copy{align-self:flex-end}}

/* Services CTA: reserve the left side for copy and lift the full source framing. */
@media(min-width:901px){
 html body[data-page=services] [data-cta-storefront] .ag-hello-image{background:#292e2e}
 html body[data-page=services] [data-cta-storefront] .ag-hello-image>img{left:auto;right:-7%;width:90%;height:100%;object-position:center 10%;mask-image:linear-gradient(90deg,transparent,#000 18%)}
}

/* V77: opening headlines share the reference's larger editorial scale. */
:root{--pill-opening-title:clamp(72px,8.7vw,132px)}
html body[data-page] main :is(.home-cinema-copy h1,.work-intro-copy h1,.about-welcome-copy h1,.services-banner-copy .services-display){font-size:var(--pill-opening-title)!important;line-height:0.99!important;letter-spacing:-.02em!important;text-wrap:initial;max-width:10em!important}
html body[data-page] main .about-welcome .about-welcome-copy h1{max-width:4.2em!important}
@media(max-width:900px){:root{--pill-opening-title:clamp(60px,8.7vw,78px)}}
@media(max-width:600px){:root{--pill-opening-title:clamp(46px,13vw,60px)}
 html body[data-page] main :is(.home-cinema-copy h1,.work-intro-copy h1,.about-welcome-copy h1,.services-banner-copy .services-display){max-width:100%}
}
@media(max-height:580px) and (min-width:601px){:root{--pill-opening-title:54px}}

/* Every opening uses About's 32px left and 64px bottom copy anchors. */
html body[data-page=home] main .home-cinema-copy{left:32px;right:32px;top:auto;bottom:64px;width:auto;max-width:none;padding:0;margin:0}
html body[data-page] main :is(.home-cinema-copy,.work-intro-copy,.about-welcome-copy,.services-banner-copy)>p{max-width:540px!important;text-wrap:pretty}
html body[data-page] main :is(.home-cinema-copy,.work-intro-copy) .home-actions{margin-top:24px}
@media(max-width:600px){
 html body[data-page=home] main .home-cinema-copy{left:24px;right:24px;bottom:80px;width:auto}
 html body[data-page] main :is(.home-cinema-copy h1,.work-intro-copy h1,.about-welcome .about-welcome-copy h1,.services-banner-copy .services-display){max-width:100%!important}
}

/* V78: shared Home CTA frame and copy slots, excluding Contact. */
html body[data-page]:not([data-page=contact]) main .ag-shared-cta.ag-hello-cta[data-cta-storefront]{aspect-ratio:auto;height:auto;min-height:calc(306px + var(--pill-title)*2.08);align-items:stretch}
html body[data-page]:not([data-page=contact]) main .ag-shared-cta.ag-hello-cta[data-cta-storefront] .ag-hello-copy{position:relative;box-sizing:border-box;min-height:inherit;align-self:stretch;width:72%;max-width:1000px;padding:32px;justify-content:flex-end}
html body[data-page]:not([data-page=contact]) main [data-cta-storefront] .ag-hello-copy>.eyebrow{position:absolute!important;left:32px!important;top:32px!important;margin:0!important}
html body[data-page]:not([data-page=contact]) main [data-cta-storefront] .ag-hello-copy>p{max-width:540px!important;min-height:86.4px}
@media(max-width:900px){html body[data-page]:not([data-page=contact]) main .ag-shared-cta.ag-hello-cta[data-cta-storefront] .ag-hello-copy{width:100%;max-width:none}}
@media(max-width:600px){
 html body[data-page=home] main .home-cinema-copy{bottom:80px!important;top:auto!important}
 html body[data-page]:not([data-page=contact]) main .ag-shared-cta.ag-hello-cta[data-cta-storefront]{min-height:620px}
 html body[data-page]:not([data-page=contact]) main .ag-shared-cta.ag-hello-cta[data-cta-storefront] .ag-hello-copy{padding:24px}
 html body[data-page]:not([data-page=contact]) main [data-cta-storefront] .ag-hello-copy>.eyebrow{left:24px!important;top:24px!important}
 html body[data-page]:not([data-page=contact]) main [data-cta-storefront] .ag-hello-copy>p{min-height:128px}
}

/* V80: supplied artwork and shared CTA-sized accountability panel. */
html body[data-page=about] [data-cta-storefront] .ag-hello-image{background:#202524}
@media(min-width:901px){
 html body[data-page=about] [data-cta-storefront] .ag-hello-image>img{left:auto;right:-7%;width:78%;object-position:center 45%;mask-image:linear-gradient(90deg,transparent,#000 22%)}
}
html body[data-page=work] main .work-approach-feature{min-height:calc(306px + var(--pill-title)*2.08);height:auto}
html body[data-page=work] main .work-approach-feature-art{inset:0;mask-image:none;-webkit-mask-image:none}
html body[data-page=work] main .work-approach-feature-art img{object-position:center top}
html body[data-page=work] main .work-approach-feature-copy{box-sizing:border-box;min-height:inherit;width:72%;max-width:1000px;padding:32px;justify-content:flex-end}
html body[data-page=work] main .work-approach-feature-copy>.eyebrow{position:absolute!important;left:32px!important;top:32px!important;margin:0;padding:0}
html body[data-page=work] main .work-approach-feature-copy>p{max-width:540px!important}
@media(max-width:600px){
 html body[data-page=work] main .work-approach-feature{min-height:620px}
 html body[data-page=work] main .work-approach-feature-copy{width:100%;padding:24px}
 html body[data-page=work] main .work-approach-feature-copy>.eyebrow{left:24px!important;top:24px!important}
 html body[data-page=work] main .work-approach-feature-art img{object-position:74% top}
 html body[data-page] :is(.home-spatial .solution-card,.work-pillar-card,.ag-team-stage .founder-card){width:calc(100vw - 40px)!important;max-width:none}
 html body[data-page] .work-project:not([data-project=mayson]) .project-media-card{width:calc(100vw - 40px)!important;flex-basis:calc(100vw - 40px)!important}
}
@media(max-width:600px){html body[data-page] .project-showcase-card{width:calc(100vw - 40px)!important;flex-basis:calc(100vw - 40px)!important}}

html body[data-page=work] main .work-approach-feature-copy h2{font-size:var(--pill-title)!important;line-height:1.04!important;letter-spacing:-0.015em!important}

/* V82: compact reference headline rhythm, retaining the shared bottom anchors. */
html body[data-page] main :is(.home-cinema-copy h1,.work-intro-copy h1,.about-welcome-copy h1,.services-banner-copy .services-display){line-height:0.93!important;letter-spacing:-.02em!important}
html body[data-page] main .about-welcome .about-welcome-copy h1{max-width:10em!important}
html body[data-page] main .about-welcome-copy h1>em{display:block;line-height:inherit;margin:0}

/* V83: localized contrast following the About text and logo areas. */
html body[data-page=about] main .about-story-title::after{background:linear-gradient(90deg,rgba(0,0,0,0.702),rgba(0,0,0,0.432) 44%,transparent 82%),linear-gradient(0deg,rgba(0,0,0,0.648),transparent 65%)!important}
html body[data-page=about] main .career-backdrop::after{background:linear-gradient(90deg,rgba(0,0,0,0.756),rgba(0,0,0,0.576) 30%,transparent 64%),linear-gradient(0deg,rgba(0,0,0,0.774),rgba(0,0,0,0.576) 20%,transparent 57%)!important}
/* V84: Demo's wide studio crop retains faces and the desk in the shared frame. */
html body[data-page=demos] [data-cta-storefront] .ag-hello-image>img{object-position:center 45%}
/* V91: project endings share Home's CTA frame, including dialog views. */
html body[data-page] .work-project .ag-shared-cta.ag-project-cta.ag-hello-cta{height:calc(306px + var(--pill-title)*2.08)!important;min-height:0!important;grid-template-columns:44% minmax(0,1fr);padding:0!important;overflow:hidden}
html body[data-page] .work-project .ag-project-cta .ag-hello-image{position:relative;height:100%;min-height:0;overflow:hidden}
html body[data-page] .work-project .ag-project-cta .ag-hello-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
html body[data-page] .work-project .ag-project-cta .ag-hello-copy{box-sizing:border-box;position:relative;min-height:0;height:100%;width:100%;padding:32px;justify-content:flex-end;gap:0}
html body[data-page] .work-project .ag-project-cta .ag-hello-copy>.eyebrow{position:absolute;top:32px;left:32px;margin:0}
html body[data-page] .work-project .ag-project-cta h2{font-size:var(--pill-title)!important;line-height:1.04!important;letter-spacing:-0.015em;margin:0}
html body[data-page] .work-project .ag-project-cta .ag-hello-copy>p{font-size:var(--pill-body);line-height:1.6;margin:24px 0;max-width:540px}
@media(max-width:600px){
 html body[data-page] .work-project .ag-shared-cta.ag-project-cta.ag-hello-cta{height:620px!important;display:grid;grid-template-columns:1fr;grid-template-rows:190px minmax(0,1fr)}
 html body[data-page] .work-project .ag-project-cta .ag-hello-copy{padding:52px 24px 24px}
 html body[data-page] .work-project .ag-project-cta .ag-hello-copy>.eyebrow{top:20px;left:24px}
 html body[data-page] .work-project .ag-project-cta .ag-hello-copy>p{margin:20px 0}
}
/* V93: one shared contrast treatment for image-backed editorial pills. */
:root{--pill-image-gradient:linear-gradient(90deg,rgba(0,0,0,0.567),rgba(0,0,0,0.432) 30%,transparent 64%),linear-gradient(0deg,rgba(0,0,0,0.5805),rgba(0,0,0,0.432) 20%,transparent 57%)}
html body[data-page] main :is(.ag-shared-cta.ag-hello-cta:not(.ag-project-cta),.about-story-title,.career-backdrop,.about-welcome-film,.ag-process-banner,.home-demo-ad,.services-banner,.solutions-banner,.home-cinema-window,.ag-contact-hero,.ag-news-banner[data-news-art],.ag-form-banner[data-form-art])::after{background:var(--pill-image-gradient)!important}
html body[data-page] main :is(.work-intro-shade,.work-approach-feature-shade){background:var(--pill-image-gradient)!important}
/* Keep the explicitly untinted rotating slogan pill clear. Avoid double tint on posters. */
html body[data-page] .home-benefits-film::after,html body[data-page] .home-why .home-poster-wall::after{background:none!important}
/* V101: restore full contrast only on the two About studio/experience images. */
html body[data-page="about"] main :is(.about-story-title,.career-backdrop){--pill-image-gradient:linear-gradient(90deg,rgba(0,0,0,0.756),rgba(0,0,0,0.576) 30%,transparent 64%),linear-gradient(0deg,rgba(0,0,0,0.774),rgba(0,0,0,0.576) 20%,transparent 57%)}
/* V102: full centered studio photograph and lighter local CTA shading. */
html body[data-page="about"] main [data-cta-storefront]{--pill-image-gradient:linear-gradient(90deg,rgba(0,0,0,0.432),rgba(0,0,0,0.288) 30%,transparent 64%),linear-gradient(0deg,rgba(0,0,0,0.414),rgba(0,0,0,0.288) 20%,transparent 57%)}
html body[data-page="about"] main [data-cta-storefront] .ag-hello-image>img{inset:0;left:0;right:0;width:100%;height:100%;object-fit:cover;object-position:center center;mask-image:none;-webkit-mask-image:none}
html body[data-page="about"] main [data-cta-storefront] .ag-hello-copy :is(h2,p){text-shadow:0 1px 4px rgba(0,0,0,.28)}
/* Same poster-wall gradient shape, 12.5 percent stronger alpha stops. */
html body[data-page="home"] main .home-why{--pill-image-gradient:linear-gradient(90deg,rgba(0,0,0,0.6381),rgba(0,0,0,0.486) 30%,transparent 64%),linear-gradient(0deg,rgba(0,0,0,0.6534),rgba(0,0,0,0.486) 20%,transparent 57%)}