/* One palette switch, including navigation, brand artwork, viewers and portfolios. */
:root{--surface:#e4e5dc;--viewer:#fff}
html[data-theme=dark]{--paper:#101010;--ink:#f1f0eb;--muted:#aaa9a5;--line:#343434;--red:#e88a78;--surface:#1c1c1c;--viewer:#151515;color-scheme:dark}
.header{gap:22px}.header nav{margin-left:auto;gap:clamp(11px,1.2vw,20px)}
.header-actions{display:flex;align-items:center;gap:20px;flex-shrink:0}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:5px 0 5px 16px;border-left:1px solid var(--line);font-size:10px;line-height:1;color:var(--muted)}
.theme-toggle:hover{color:var(--ink)}
.theme-symbol{width:17px;height:17px;border:1px solid currentColor;border-radius:50%;background:linear-gradient(90deg,currentColor 50%,transparent 50%);transform:rotate(-35deg);transition:transform .25s}
[data-theme=dark] .theme-symbol{transform:rotate(145deg)}
[data-theme=dark] .brand-logo,[data-theme=dark] .footer-wordmark img,[data-theme=dark] .inline-brand-logo,[data-theme=dark] .choice-brand img,[data-theme=dark] .client-logos img,[data-theme=dark] .lcell img,[data-theme=dark] .nav-logo-lettering{filter:brightness(0) invert(1)}
[data-theme=dark] .inline-apollo-logo,[data-theme=dark] .choice-apollo,[data-theme=dark] .post-apollo-link img{filter:brightness(0) invert(1);mix-blend-mode:normal}
[data-theme=dark] .nav-logo-stem{fill:var(--ink)}
[data-theme=dark] .nav-logo-stage:has(.letter-one.is-preview) .stem-one,[data-theme=dark] .nav-logo-stage:has(.letter-two.is-preview) .stem-two,[data-theme=dark] .nav-logo-stage:has(.letter-three.is-preview) .stem-three{fill:var(--red)}
[data-theme=dark] .filters button:not(.active):hover,[data-theme=dark] .portfolio-slide,[data-theme=dark] .director-preview,[data-theme=dark] .director-film-image{background:var(--surface)}
html[data-theme=dark] #project-dialog,html[data-theme=dark] #project-dialog .dialog-media,html[data-theme=dark] #project-dialog .dialog-media img,html[data-theme=dark] #project-dialog .dialog-media video,html[data-theme=dark] #project-dialog .dialog-media iframe,html[data-theme=dark] #project-dialog .dialog-nav button{background:var(--viewer);color:var(--ink)}
html[data-theme=dark] #project-dialog .dialog-nav button:hover{color:var(--red)}
[data-theme=dark] dialog::backdrop{background:#000000de}
[data-theme=dark] .photo-focus{box-shadow:0 18px 70px #0008}
[data-theme=dark] select{color-scheme:dark}
@media(max-width:1100px){.header{gap:16px}.header-actions{margin-left:auto}.theme-toggle{padding-left:0;border-left:0}}
@media(max-width:767px){.header-actions{gap:17px}.theme-label{display:none}.theme-toggle{min-width:30px}.brand-explore{display:none}}
@media(prefers-reduced-motion:reduce){.theme-symbol{transition:none}}

/* Brand artwork stays light on every dark surface, including high-specificity company headings. */
html[data-theme=dark] img.inline-apollo-logo,html[data-theme=dark] .company h3 img.inline-apollo-logo,html[data-theme=dark] img.choice-apollo,html[data-theme=dark] .post-apollo-link img,html[data-theme=dark] .directory-brand img,html[data-theme=dark] .company h3 img.inline-brand-logo{filter:brightness(0) invert(1);mix-blend-mode:normal}

/* Supplied department lockups share Apollo's width in each brand placement. */
.inline-department-logo{display:inline-block!important;position:static;inset:auto;width:4.25em;height:auto;object-fit:contain;vertical-align:middle;margin-right:.08em;flex-shrink:0;filter:none;transform:none;animation:none}
.company h3 .inline-department-logo,.company h3 .inline-apollo-logo{width:3.5em;height:auto;margin:0;flex-shrink:0}
.hero-title #hero-entity .inline-department-logo{width:100px;height:auto}
.choice-department,.company-choices .choice-apollo{display:block;width:clamp(110px,10vw,145px);height:auto;max-width:100%;margin-block:3px;filter:none}
.group-image #group-image-label .inline-department-logo{position:static;width:4.25em;height:auto;transform:none;animation:none}
.hero .inline-department-logo,.group-image .inline-department-logo,.cinema-grid .inline-department-logo,.cinema-grid .inline-apollo-logo{filter:brightness(0) invert(1)}
html[data-theme=dark] .inline-department-logo,html[data-theme=dark] .company h3 .inline-department-logo,html[data-theme=dark] .choice-department{filter:brightness(0) invert(1)}

/* Use pre-colored logo artwork instead of filtering an image inside SVG. */
.nav-logo-lettering{filter:none!important}.nav-logo-dark{display:none}html[data-theme=dark] .nav-logo-light{display:none}html[data-theme=dark] .nav-logo-dark{display:block}
/* The logo is the mobile company navigator; keep the header to one row. */
.explore-chevron{display:none;flex:none}
@media(max-width:767px){.explore-chevron{display:block}.brand-explore>.explore-plus,.site-explore>.explore-plus{display:none}}
@media(max-width:767px){
 :root,body.header-hidden{--header-height:76px;--header-offset:76px}
 html{scroll-padding-top:88px}
 .header,.company-header{display:flex;height:76px;gap:8px;align-items:center}
 .header-hidden .header{transform:none}
 .header>nav{display:none}
 .header .brand{gap:0;min-width:0}
 .header .brand-explore{display:flex;align-items:center;gap:6px;margin-left:10px;padding-left:10px;border-left:1px solid var(--line);font-size:10px;line-height:1;letter-spacing:0;white-space:nowrap}
 .header .header-actions{gap:10px;margin-left:auto}
 .header .menu-button{gap:8px;font-size:11px}
 .header .theme-toggle{min-width:26px}
 .mobile-nav{top:76px;max-height:calc(100dvh - 76px);overflow-y:auto}
 .hero{height:calc(100svh - 84px)}
 #company-navigation .nav-logo-stage{display:block;width:100%;max-width:580px;margin:28px auto 46px}
 #company-navigation .company-nav-preview{display:none}
 #company-navigation .company-nav-bottom{display:block}
 #company-navigation .company-choices>a{min-height:96px}
 #company-navigation[open].motion-enabled .nav-logo-stem{animation:mobile-l-drift 4.8s ease-in-out infinite}
 #company-navigation[open].motion-enabled .stem-two{animation-delay:-1.6s}
 #company-navigation[open].motion-enabled .stem-three{animation-delay:-3.2s}
 #company-navigation .nav-logo-stage:has(.letter-one.is-preview) .stem-one,
 #company-navigation .nav-logo-stage:has(.letter-two.is-preview) .stem-two,
 #company-navigation .nav-logo-stage:has(.letter-three.is-preview) .stem-three{fill:#fff}
 .intro-lockup{display:flex;align-items:baseline;flex-wrap:nowrap;gap:.25em;margin-top:0;font-size:inherit}
 .intro-lockup>span:first-child{display:inline;white-space:nowrap}
 .intro-lockup>span:last-child{display:inline;white-space:nowrap}
 /* Align the wordmark lettering, allowing its long L stems to extend below the text. */
 .intro-lockup .inline-brand-logo{display:inline-block!important;width:3.55em;height:1.16em;margin:0;vertical-align:-.315em}
 .intro h2{line-height:1.2;text-wrap:balance}
}

@keyframes mobile-l-drift{0%,100%{transform:translateY(0)}35%{transform:translateY(-36px)}70%{transform:translateY(24px)}}
@media(max-width:360px){.header .brand-logo{width:100px}.header .brand-explore{margin-left:7px;padding-left:7px;gap:4px;font-size:9px}}
@media(prefers-reduced-motion:reduce){#company-navigation[open].motion-enabled .nav-logo-stem{animation:none}}

@media(max-width:767px){#company-navigation.touch-open #company-nav-close:focus-visible{outline:none}}

/* Keep the phone marquee in a native scrolling viewport, avoiding oversized
   transformed/masked surfaces that can disappear in mobile browsers. */
@media(max-width:767px){
 .clients .client-logos.mobile-client-scroll{mask-image:none;-webkit-mask-image:none;overflow:hidden;scroll-behavior:auto}
 .clients .mobile-client-scroll .client-track{animation:none!important;transform:none}
}