/* Shared spacing and panel alignment for the site's matching media layouts. */
:root{--ag-panel-gap:48px;--ag-panel-max-width:1552px}
@media(max-width:600px){:root{--ag-panel-gap:28px}}
html body[data-page]{--demo-panel-gap:var(--ag-panel-gap)}
html body[data-page] main .section-shell:not(.ag-team-section):not(.work-collection):not(.work-approach){
 width:calc(100% - var(--gutter)*2);max-width:var(--ag-panel-max-width);margin-inline:auto;
}
html body[data-page]:not([data-page="home"]) main :is(.home-cinema.home-cinema,.work-intro.work-cinema){
 width:calc(100% - var(--gutter)*2);max-width:var(--ag-panel-max-width);margin-inline:auto;margin-top:var(--ag-panel-gap);
}
html body[data-page] main>:is(.about-welcome,.ag-news-banner,.ag-contact-hero){margin-top:var(--ag-panel-gap)}
html body[data-page] main>:is(.about-story,.career-section,.founders-section,.work-approach,.work-collection,.news-room,.ag-shared-cta,.home-v3-section){
 margin-top:var(--ag-panel-gap);
}
html body[data-page="work"] .work-cinema+.work-approach{margin-top:var(--ag-panel-gap)}
html body[data-page] .ag-shared-cta.ag-hello-cta{margin-top:var(--ag-panel-gap)}
html body[data-page="about"] .career-section,
html body[data-page="about"] .founders-section.ag-team-section{margin-top:var(--ag-panel-gap)}
html body[data-page="home"] .home-cinema+.home-services{margin-top:calc(var(--ag-panel-gap) - var(--cinema-tail,0px))}
html body[data-page] main>:is(.about-story,.work-approach){column-gap:var(--ag-panel-gap)}
html body[data-page] .service-content-grid{gap:var(--ag-panel-gap)}
html body[data-page] :is(.service-chapter){padding-block:var(--ag-panel-gap)}
html body[data-page] .solution-detail{padding-block:calc(var(--ag-panel-gap)/2)}
html body[data-page] :is(.ag-contact-hero,.ag-news-banner,.career-section,.ag-shared-cta){margin-bottom:0}

html body[data-page] main>section.work-collection.section-shell,
html body[data-page] main>section.home-v3-section.solutions-section{margin-top:var(--ag-panel-gap)}

html body[data-page] main>section{margin-bottom:0}

/* Large image pills share a lower-left message and matching shade. */
html body[data-page] .ag-contact-hero>.ag-contact-copy{align-self:end;text-align:left;padding:clamp(28px,4vw,64px)}
html body[data-page] .ag-contact-hero:after{
 background:radial-gradient(ellipse 110% 115% at 0% 100%,rgba(16,17,18,0.81176) 0%,rgba(16,17,18,0.63882) 28%,rgba(16,17,18,0.31412) 58%,transparent 88%);
}
@media(min-width:601px){
 html body[data-page] .ag-shared-cta.ag-hello-cta:not(.ag-project-cta){display:flex;flex-direction:column;justify-content:flex-end;padding:0}
 html body[data-page] .ag-shared-cta.ag-hello-cta:not(.ag-project-cta) .ag-hello-copy{align-self:flex-start;margin:0;text-align:left;padding:clamp(28px,4vw,64px)}
 html body[data-page] .ag-shared-cta.ag-hello-cta:not(.ag-project-cta):after{background:radial-gradient(ellipse 110% 115% at 0% 100%,rgba(16,17,18,0.81176) 0%,rgba(16,17,18,0.63882) 28%,rgba(16,17,18,0.31412) 58%,transparent 88%)}
}
@media(max-width:600px){
 html body[data-page] .ag-contact-hero{min-height:620px}
 html body[data-page] .ag-contact-hero>.ag-contact-copy{padding:28px 24px}
 html body[data-page] .ag-contact-hero:after,
 html body[data-page] .ag-shared-cta.ag-hello-cta:not(.ag-project-cta):after{background:linear-gradient(0deg,rgba(16,17,18,0.83647) 0%,rgba(16,17,18,0.63882) 30%,rgba(16,17,18,0.19765) 62%,transparent 84%),linear-gradient(90deg,rgba(16,17,18,0.19765),transparent 78%)}
}

/* Expanded homepage boards have independent exit and sequence controls. */
.home-service-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.home-service-actions [hidden]{display:none!important}
.home-service-actions .home-service-next{display:inline-flex}
.home-service-actions .home-service-next svg{transform:rotate(-45deg)}

.home-services .is-open .home-service-next .home-more-symbol{transform:none}
.home-services .home-service-actions .home-read-more{margin:0}
.home-service-actions{margin-top:20px}

/* Home and Projects use one spatial card style and the same interaction engine. */
html body[data-page="work"] main .work-approach.section-shell{width:100%;max-width:none;margin-inline:0}
html body[data-page] :is(.home-spatial .solution-card,.work-pillar-card){background:#f6f6f2;border-radius:28px;overflow:hidden;box-shadow:0 14px 34px -27px #17171577;display:flex;flex-direction:column;transform-origin:50% 50%;padding:0;top:0}
html body[data-page] :is(.home-spatial .solution-card,.work-pillar-card){width:clamp(330px,33vw,480px)}
html body[data-page] :is(.home-spatial .home-solution-media,.work-pillar-image){height:clamp(235px,19vw,290px);aspect-ratio:auto;border-radius:0;flex:none;padding:0;overflow:hidden}
html body[data-page] :is(.home-spatial .solution-copy,.work-pillar-copy){padding:24px 27px 27px;min-height:0;flex:1;display:flex;flex-direction:column;min-width:0}
html body[data-page] :is(.home-spatial .solution-copy h3,.work-pillar-copy h3){font:400 clamp(37px,3.24vw,49px)/1.03 var(--display);letter-spacing:-.045em;color:#000;margin:0}
html body[data-page] :is(.home-spatial .solution-copy p,.work-pillar-copy p){font:400 16px/1.65 var(--sans);color:#000;max-width:none;padding:0;margin:16px 0 0}
html body[data-page] .work-pillars-carousel{margin-top:var(--ag-panel-gap)}
html body[data-page] .work-pillars-stage{width:100%;overflow:hidden}
html body[data-page] .work-pillars-controls{justify-content:center;gap:18px;margin-top:0;padding-top:28px}
html body[data-page] .work-pillars-controls button{width:45px;height:45px;background:#ffffff1f;border:1px solid #b9bbb3;box-shadow:inset 0 1px 0 #ffffff70;backdrop-filter:blur(10px);color:#000}
html body[data-page] .work-pillars-controls svg{width:19px;height:19px}
html body[data-page] .work-pillars-count{font:400 12px/1.55 var(--sans);letter-spacing:.1em;min-width:52px}
.work-pillar-number{position:absolute;z-index:2;top:20px;left:20px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#f6f6f2;color:#000;font:400 11px/1 var(--sans);pointer-events:none}
@media(max-width:800px){html body[data-page] :is(.home-spatial .home-solution-media,.work-pillar-image){height:265px}}
@media(max-width:600px){
 html body[data-page] :is(.home-spatial .solution-card,.work-pillar-card){width:82vw;border-radius:25px}
 html body[data-page] :is(.home-spatial .home-solution-media,.work-pillar-image){height:240px}
 html body[data-page] :is(.home-spatial .solution-copy,.work-pillar-copy){padding:24px}
 html body[data-page] :is(.home-spatial .solution-copy h3,.work-pillar-copy h3){font-size:42px}
 html body[data-page] :is(.home-spatial .solution-copy p,.work-pillar-copy p){font-size:16px;line-height:1.7}
 html body[data-page] .work-pillars-controls button{width:40px;height:40px}
}

/* Projects uses the same grid-based overlapping card layout as Home. */
html body[data-page="work"] .work-pillars-carousel.home-spatial{width:100%;max-width:none;overflow:visible}
html body[data-page="work"] .work-pillars-stage.carousel-stage{display:grid;grid-template-columns:minmax(0,1fr);height:auto!important;position:relative}
html body[data-page="work"] .work-pillars-stage .work-pillar-card.solution-card{position:relative;grid-area:1/1;align-self:stretch;height:auto!important;top:0;left:50%;min-height:0}
html body[data-page="work"] .work-pillars-stage .work-pillar-copy.solution-copy{min-height:0!important;position:relative;inset:auto}
html body[data-page="work"] .work-pillars-controls.carousel-controls{display:flex;justify-content:center;margin-top:0;padding-top:28px}

html body[data-page="work"] .work-pillar-card.solution-card:after{display:none;content:none}

/* Keep the five Projects cards visible across the viewport. */
html body[data-page="work"] .work-pillars-stage.carousel-stage{-webkit-mask-image:none;mask-image:none}

/* Keep the five Projects cards visible across the viewport. */
html body[data-page="work"] .work-pillars-stage.carousel-stage{-webkit-mask-image:none;mask-image:none}

/* Projects retains the shared gap above the team component. */
html body[data-page="work"] .ag-team-carousel{margin-top:var(--ag-panel-gap)}

/* Mobile image pills place messages over shade at the lower left. */
@media(max-width:600px){
 html body[data-page] :is(.work-approach-feature,.home-why,.about-story-title,.about-process.ag-process-banner){display:flex;flex-direction:column;justify-content:flex-end;text-align:left}
 html body[data-page] .work-approach-feature-art{inset:0;mask-image:none;-webkit-mask-image:none}
 html body[data-page] .work-approach-feature-art img{object-position:50% 22%}
 html body[data-page] .work-approach-feature-copy{width:100%;min-height:610px;justify-content:flex-end;padding:32px 26px}
 html body[data-page] .work-approach-feature-shade{background:radial-gradient(ellipse 150% 110% at 0% 100%,rgba(16,22,23,0.85412) 0%,rgba(16,22,23,0.76588) 28%,rgba(16,22,23,0.51176) 53%,rgba(16,22,23,0.13412) 78%,transparent 100%)}
 html body[data-page] :is(.home-why,.about-story-title,.about-process.ag-process-banner):after{background:radial-gradient(ellipse 150% 110% at 0% 100%,rgba(16,17,18,0.85412) 0%,rgba(16,17,18,0.76588) 28%,rgba(16,17,18,0.51176) 53%,rgba(16,17,18,0.13412) 78%,transparent 100%)}
 html body[data-page] .home-why{min-height:620px}
 html body[data-page] .home-why .home-feature-copy{width:100%;text-align:left;margin-top:auto}
 html body[data-page] .about-welcome{display:flex;flex-direction:column;justify-content:flex-end}
 html body[data-page] .about-welcome-film{inset:0}
 html body[data-page] .about-welcome-film:after{background:radial-gradient(ellipse 150% 110% at 0% 100%,rgba(16,17,18,0.85412) 0%,rgba(16,17,18,0.76588) 28%,rgba(16,17,18,0.51176) 53%,rgba(16,17,18,0.13412) 78%,transparent 100%)}
 html body[data-page] .about-welcome-copy{padding:30px 24px 76px;text-align:left;color:#fff}
 html body[data-page] .about-welcome-copy :is(h1,p,.eyebrow){color:#fff}
 html body[data-page] .project-banner-copy{top:auto;bottom:62px;translate:none;text-align:left}
 html body[data-page] .project-banner-shade{background:radial-gradient(ellipse 145% 130% at 0% 100%,rgba(11,17,18,0.78706) 0%,rgba(11,17,18,0.49412) 44%,transparent 90%)}
}

/* Project banner gaps share the established panel spacing. */
html body[data-page="work"] .work-banners{gap:var(--ag-panel-gap)}

/* One neutral, horizontally balanced shadow for visual panels and image cards. */
:root{--ag-panel-shadow:0 4px 12px -2px rgb(20 24 22 / .07),0 16px 32px -12px rgb(20 24 22 / .18)}
html body[data-page] :is(.about-welcome,.about-story-title,.career-section,.about-process.ag-process-banner,.home-feature,.home-benefits,.ag-shared-cta,.ag-contact-hero,.ag-news-banner,.work-approach-feature,.roster-heading,.project-banner-surface,.project-showcase-card,.project-story-card,.project-film-frame,.news-feature-image,.news-article-cover,.contact-photo,.home-video-window,.home-v3-film,.solution-image,.stills-grid>img,.project-screens-desktop img){box-shadow:var(--ag-panel-shadow)}
html body[data-page] :is(.ag-team-stage .founder-card,.home-spatial .solution-card,.roster-card-window,.roster-preview){box-shadow:var(--ag-panel-shadow)}
html body[data-page] .project-banner:not(.has-depth){box-shadow:var(--ag-panel-shadow)}
html body[data-page] .project-banner.has-depth{box-shadow:none}
html body[data-page] .project-banner:hover .project-banner-surface{box-shadow:var(--ag-panel-shadow)}

/* Section margins alone control the About page outer gaps. */
html body[data-page="about"] main>.about-story{padding-top:0;padding-bottom:0;margin-top:var(--ag-panel-gap)}

/* Media panels have soft shadows, with no decorative rims on hover. */
html body[data-page] :is(.about-welcome,.about-story-title,.career-section,.about-process.ag-process-banner,.home-feature,.home-benefits,.ag-shared-cta,.ag-contact-hero,.ag-news-banner,.work-approach-feature,.roster-heading,.project-banner-surface,.project-showcase-card,.project-story-card,.project-film-frame,.news-feature-image,.news-article-cover,.contact-photo,.home-video-window,.home-v3-film,.solution-image,.stills-grid>img,.ag-team-stage .founder-card,.home-spatial .solution-card,.roster-card-window,.roster-preview,.project-media-card,.project-case-lead,.project-case-wide-photo,.project-screens){border:0;outline:none;box-shadow:var(--ag-panel-shadow)}
html body[data-page] :is(.about-welcome,.about-story-title,.career-section,.about-process.ag-process-banner,.home-feature,.home-benefits,.ag-shared-cta,.ag-contact-hero,.ag-news-banner,.work-approach-feature,.roster-heading,.project-banner-surface,.project-showcase-card,.project-story-card,.project-film-frame,.news-feature-image,.news-article-cover,.contact-photo,.home-video-window,.home-v3-film,.solution-image,.stills-grid>img,.ag-team-stage .founder-card,.home-spatial .solution-card,.roster-card-window,.roster-preview,.project-media-card,.project-case-lead,.project-case-wide-photo,.project-screens):hover{border:0;outline:none;box-shadow:var(--ag-panel-shadow)}
html body[data-page] :is(.home-cinema-window,.work-cinema-window,.home-opening-film,.work-opening-film,.project-film-poster,.roster-card,.project-banner,.founder-portrait){border:0;outline:none}
html body[data-page] :is(.home-cinema-window,.work-cinema-window,.home-opening-film,.work-opening-film,.project-film-poster,.roster-card,.project-banner,.founder-portrait):hover{border:0;outline:none}
html body[data-page] :is(.project-banner,.project-film-poster,.roster-card,.founder-card):focus-visible{outline:none;box-shadow:0 0 18px 5px rgb(40 55 50 / .22),var(--ag-panel-shadow)}

/* Keep image shadows off editorial labels and eliminate exposed media seams. */
:root{--ag-panel-shadow:0 0 18px rgb(20 24 22 / .035),0 8px 26px -4px rgb(20 24 22 / .12)}
html body[data-page="news"] .news-feature-image,
html body[data-page="news"] .news-feature-image:hover{box-shadow:none;background:transparent}
html body[data-page="news"] .news-feature-image>img{box-shadow:var(--ag-panel-shadow);border:0;outline:none}
html body[data-page="news"] .news-format{box-shadow:none}
html body[data-page="news"] .news-choice{translate:none!important;scale:1;opacity:1}
html body[data-page="news"] .news-choice>img{box-shadow:0 4px 12px rgb(20 24 22 / .08);border:0;outline:none}
html body[data-page] .about-welcome-film{overflow:hidden;border:0;outline:none}
html body[data-page] .about-welcome-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:none!important;translate:none!important;scale:1}
html body[data-page] :is(.home-solution-media,.founder-portrait,.work-cinema-window,.home-cinema-window){box-shadow:none!important;border:0;outline:none}
html body[data-page] :is(.project-banner-sheen,.project-opening-sheen,.roster-card-sheen){display:none!important}

html body[data-page]:not([data-page="home"]) :is(.home-cinema,.work-intro.work-cinema){box-shadow:var(--ag-panel-shadow);border:0;outline:none}

/* Keep shadows inside carousel paint space so their blur never ends at a hard edge. */
html body[data-page="news"] .news-feature-image.news-feature-image,
html body[data-page="news"] .news-feature-image.news-feature-image:hover{box-shadow:none!important}
html body[data-page="news"] .news-reader-pane{padding-left:18px;padding-right:18px}
html body[data-page] .project-showcase-stage .project-showcase-card{top:32px}
html body[data-page] .project-showcase-stage{mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent)}
html body[data-page] .ag-team-stage .founder-card{top:24px}
html body[data-page] .home-spatial .carousel-stage{padding-block:32px}

/* A single rounded clip avoids dark backing and antialiasing seams around static films. */
html body[data-page]:not([data-page="home"]) :is(.home-cinema,.work-intro.work-cinema){background:transparent;isolation:isolate;overflow:hidden}
html body[data-page]:not([data-page="home"]) :is(.home-cinema-stage,.work-cinema-stage,.home-opening-film,.work-opening-film,.home-cinema-window,.work-cinema-window){border-radius:0;background:transparent;clip-path:none!important;box-shadow:none!important;border:0;outline:none}
html body[data-page]:not([data-page="home"]) :is(.home-cinema-window>video,.work-intro-art video){inset:-2px;left:-2px;top:-2px;width:calc(100% + 4px);height:calc(100% + 4px);max-width:none;border-radius:0;object-fit:cover}
html body[data-page] .about-welcome-film{border-radius:0;background:transparent}
html body[data-page] .about-welcome-film video{inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px);max-width:none;border-radius:0}

html body[data-page]:not([data-page="home"]) :is(.home-cinema,.work-intro.work-cinema){box-shadow:var(--ag-panel-shadow);border:0;outline:none}

/* Why Us uses the shared CTA typography and lower-left copy layout. */
html body[data-page="home"] .home-why.ag-hello-cta .ag-hello-copy>p{font-weight:400}

/* Shared contrast and label treatment: black on paper, white on imagery. */
html body[data-page]{--ink:#000;--muted:#000;color:#000}
html body[data-page] *,html body[data-page] *::before,html body[data-page] *::after{font-style:normal!important}
html body[data-page] :is(.floating-label,.founder-role,.avatar-chat-identity,.avatar-chat-caption,.project-sample-badge,.news-format){background:rgb(0 0 0 / .72)!important;background-image:none!important;color:#fff!important;border:0!important;outline:none!important;box-shadow:none!important;border-radius:var(--ag-pill-radius,12px);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
html body[data-page] :is(.floating-label,.founder-role,.avatar-chat-identity,.avatar-chat-caption,.project-sample-badge,.news-format) *{color:#fff!important}
html body[data-page] :is(.news-article-body,.news-description,.news-deck,.news-article-heading,.news-article-meta,.news-choice-copy) :is(p,h1,h2,h3,h4,h5,h6,li,blockquote,figcaption,em,strong,small,time){color:#000}
html body[data-page] .news-article-body .news-article-table :is(thead,tr:first-child) :is(th,td,p,strong){color:#fff}

/* Contact artwork: shade the message locally and leave the faces in clear light. */
html body[data-page] [data-contact-art="crew"]{background:#101112;color:#fff}
html body[data-page] [data-contact-art="crew"] :is(.ag-hello-image img,.ag-contact-background){object-position:center top}
html body[data-page] :is(.ag-shared-cta.ag-hello-cta,.ag-contact-hero)[data-contact-art="crew"]::after{background:radial-gradient(ellipse 88% 118% at 0% 100%,rgba(16,17,18,0.86471) 0%,rgba(16,17,18,0.75529) 30%,rgba(16,17,18,0.46941) 55%,rgba(16,17,18,0.13412) 76%,transparent 100%)}
html body[data-page] [data-contact-art="crew"] :is(.ag-hello-copy,.ag-contact-copy)>:is(h1,h2,p,.eyebrow,.ag-hello-footnote),
html body[data-page] [data-contact-art="crew"] :is(.ag-hello-copy,.ag-contact-copy)>:is(h1,h2,p,.eyebrow,.ag-hello-footnote) *{color:#fff}
@media(min-width:601px){
 html body[data-page] .ag-shared-cta.ag-hello-cta[data-contact-art="crew"]::after{background:radial-gradient(ellipse 48% 66% at 0% 0%,rgba(16,17,18,0.72) 0%,rgba(16,17,18,0.54) 50%,transparent 100%),radial-gradient(ellipse 88% 118% at 0% 100%,rgba(16,17,18,0.86471) 0%,rgba(16,17,18,0.75529) 30%,rgba(16,17,18,0.46941) 55%,rgba(16,17,18,0.13412) 76%,transparent 100%)}
}
@media(max-width:600px){
 html body[data-page] [data-contact-art="crew"]{--ag-contact-art-height:clamp(250px,60vw,310px)}
 html body[data-page] [data-contact-art="crew"] .ag-hello-image{inset:0 0 auto;height:var(--ag-contact-art-height)}
 html body[data-page] [data-contact-art="crew"] :is(.ag-hello-image img,.ag-contact-background){height:var(--ag-contact-art-height);object-fit:cover;object-position:center top}
 html body[data-page] :is(.ag-shared-cta.ag-hello-cta,.ag-contact-hero)[data-contact-art="crew"]::after{background:linear-gradient(180deg,transparent calc(var(--ag-contact-art-height) - 96px),rgba(16,17,18,0.9) var(--ag-contact-art-height))}
 html body[data-page] .ag-shared-cta.ag-hello-cta[data-contact-art="crew"]::after{background:linear-gradient(180deg,transparent calc(var(--ag-contact-art-height) - 96px),rgba(16,17,18,0.9) var(--ag-contact-art-height)),radial-gradient(ellipse 85% 92px at 0% 0%,rgba(16,17,18,0.73765) 0%,rgba(16,17,18,0.58588) 45%,transparent 100%)}
}

/* The Contact page photo fills the phone pill, keeping its original proportions. */
@media(max-width:600px){
 html body[data-page="contact"] .ag-contact-hero[data-contact-art="crew"] .ag-contact-background{height:100%;object-fit:cover;object-position:53% top}
 html body[data-page="contact"] .ag-contact-hero.section-shell[data-contact-art="crew"]::after{background:linear-gradient(180deg,transparent 20%,rgb(16 17 18 /0.18) 33%,rgb(16 17 18 /0.702) 56%,rgb(16 17 18 /0.828) 100%)}
}