/* Contextual surfaces: presentation / portfolio dark; editorial / product viewing light. */
:root{--surface-dark:#000;--surface-raised:#0f0f0f;--text-on-dark:#f5f5f7;--muted-on-dark:#a8a8ad}
body{line-height:normal;letter-spacing:normal}
body.theme-dark{--paper:#000;--mist:#0f0f0f;--ink:#f5f5f7;--muted:#a8a8ad;--line:#303033;background:#000;color:#f5f5f7}
body.theme-dark .button-dark{background:#f5f5f7;color:#000}
body.theme-dark .button-dark:hover{background:#e9083f;color:#fff}
.site-header,.home-page .site-header{background:rgba(0,0,0,.88);border:0;color:#f5f5f7}
.site-header .nav-shell{min-height:64px;gap:24px}
.site-header .desktop-nav a{font-size:14px}
.site-header .desktop-nav a:after{background:#fff}
.site-header .nav-contact{background:#f5f5f7;color:#000;min-height:44px}
.site-header .nav-contact:hover{background:#e9083f;color:#fff}
.site-header .menu-toggle span{background:#fff}
.site-header .mobile-nav{background:#0f0f0f;color:#f5f5f7;border-color:#303033}
.site-header .mobile-nav a{border-color:#303033;font-family:var(--font-body);font-size:24px;text-transform:none}
.skip-link{color:#000}
/* Media keeps its native 16:9 ratio. Narrow screens use a centered crop of black margins. */
.home-page .hero.hero-cinema{position:relative;isolation:isolate;background:#000;color:#f5f5f7;padding:0;height:var(--hero-height,clamp(620px,56.25vw,1080px));overflow:hidden}
.home-page .hero-cinema .hero-copy{position:absolute;top:clamp(28px,3.2vw,60px);left:50%;transform:translateX(-50%);z-index:2;width:min(1360px,calc(100% - 40px));margin:0;animation:hero-copy-enter .8s ease-out both}
/* Start at the first paint; video loading and playback never hide the copy. */
@keyframes hero-copy-enter{from{opacity:0}to{opacity:1}}
.home-page .hero-cinema h1{font-size:clamp(24px,5.9vw,88px);font-weight:500;color:#f5f5f7;text-wrap:balance}
.home-page .hero-cinema h1>span{color:#e9083f}
.home-page .hero-cinema .hero-lead{color:#a8a8ad;font-size:clamp(16px,1.4vw,21px);max-width:600px;margin-top:16px}
.home-page .hero-cinema .hero-actions{margin-top:24px;flex-wrap:wrap;gap:14px 28px}
.home-page .hero-cinema .button-dark{background:#f5f5f7;color:#000}
.home-page .hero-cinema .button-dark:hover{background:#e9083f;color:#fff}
.home-page .hero-cinema .text-link{color:#f5f5f7;border:0}
.home-page .hero-cinema .text-link:hover{color:#ff6086}
.home-page .hero-cinema .hero-stage{position:absolute;top:var(--hero-media-top,0px);left:50%;width:clamp(680px,100vw,1920px);height:auto;aspect-ratio:16/9;max-width:none;margin:0;transform:translateX(-52.65%);display:block;z-index:0}
.hero-cover,.hero-cover img,.hero-film{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.hero-film{opacity:0;pointer-events:none}
.hero-cinema.is-intro-pending .hero-cover{visibility:hidden}
.hero-cinema.is-intro-playing .hero-film{opacity:1}
.hero-skip{position:absolute;z-index:3;right:24px;bottom:20px;min-height:44px;padding:10px 16px;border:1px solid #555;border-radius:999px;background:rgba(0,0,0,.75);color:#f5f5f7;font:inherit;font-size:12px;cursor:pointer}
.hero-skip span{margin-left:12px}
.home-page.theme-dark .story{background:#000}
.home-page.theme-dark .story-showcase{background:#0f0f0f}
.home-page.theme-dark .story-showcase-copy>span,.home-page.theme-dark .story-showcase-copy p,.home-page.theme-dark .demo-heading p,.home-page.theme-dark .story-paths span,.home-page.theme-dark .contact-aside p{color:#a8a8ad}
.home-page.theme-dark .story-showcase-copy a{color:#f5f5f7;border-color:#666}
.home-page.theme-dark .story-paths a{border-color:#303033}
.home-page.theme-dark .story-paths a:hover{border-color:#aaa}
.home-page.theme-dark .story-paths b{background:#242426;color:#fff}
.home-page.theme-dark .contact{background:#0f0f0f;color:#f5f5f7}
.footer{background:#000;color:#a8a8ad;border-top:1px solid #242426}
/* Shared typography is restrained and allows translation to wrap naturally. */
.sub-page h1,.sub-page h2,.sub-page h3,.next-project strong,.faq-list summary,.contact-page h2{font-family:var(--font-body);font-weight:500;text-transform:none;letter-spacing:normal;line-height:normal}
.sub-page .sub-hero h1,.sub-page .case-hero h1{font-size:clamp(40px,6vw,88px);max-width:1180px;overflow-wrap:break-word;text-wrap:balance}
.sub-hero{padding:64px 0 80px}
.sub-hero-top{padding-bottom:28px}
.sub-hero h1{margin-top:40px}
.sub-hero p{margin-top:28px}
.sub-page .catalog-card h2{font-size:clamp(24px,2.2vw,34px)}
.sub-page .article-card h2,.sub-page .service-index h2{font-size:clamp(30px,3.4vw,48px)}
.sub-page .sub-cta h2,.sub-page .feature-split h2,.sub-page .about-feature h2,.sub-page .experience-copy h2,.sub-page .experience-heading h2,.sub-page .demo-grid h2,.sub-page .game-teaser h2,.sub-page .contact-page h2{font-size:clamp(34px,4.6vw,68px)}
.sub-page .richtext{font-size:18px;font-weight:400}
.sub-page .richtext h2{font-size:clamp(30px,3.8vw,48px)}
.sub-page .richtext h3{font-size:clamp(26px,3vw,38px)}
.sub-page .process>h2,.next-project strong{font-size:clamp(32px,4.6vw,64px)}
.sub-page .process h3,.faq-list summary{font-size:clamp(24px,2.5vw,34px)}
.sub-page .model-choice{font-family:var(--font-body);font-size:clamp(18px,2vw,26px);text-transform:none}
body.theme-dark .sub-page,body.theme-dark .sub-hero,body.theme-dark .case-hero{background:#000}
body.theme-dark .catalog-section{background:#0f0f0f}
body.theme-dark :is(.sub-hero p,.case-hero p,.catalog-card p,.catalog-meta,.catalog-empty,.service-index p,.service-index small,.about-feature p,.process p,.game-play>p){color:#a8a8ad}
body.theme-dark :is(.back-link,.case-story aside a,.service-index article>a){border-color:#777}
body.theme-dark :is(.catalog-toolbar,.catalog-toolbar input,.catalog-filters button){border-color:#454548;color:#d2d2d7}
body.theme-dark .catalog-toolbar input:focus{outline:2px solid #fff;outline-offset:3px}
body.theme-dark .catalog-filters button.is-active{background:#f5f5f7;color:#000;border-color:#f5f5f7}
body.theme-dark .catalog-meta span:last-child{color:#fff}
body.theme-dark .catalog-image{background:#1c1c1e}
body.theme-dark .interactive-experience{--ink:#000;background:#f5f5f7;color:#000}
body.theme-dark .model-choice:hover,body.theme-dark .model-choice.is-active{color:#000}
body.theme-dark .demo-grid a:last-child{background:#141416;color:#fff}
body.theme-dark .demo-grid a:last-child :is(span,p){color:#a8a8ad}
body.theme-dark .sub-cta{border-top:1px solid #242426}
body.theme-dark .feature-split p{color:#a8a8ad}
.site-header .language-switch{position:relative;color:#f5f5f7;font-size:12px}
.language-switch summary{display:flex;align-items:center;gap:7px;min-height:44px;padding:0 8px;cursor:pointer;list-style:none;white-space:nowrap}
.language-switch summary::-webkit-details-marker{display:none}
.language-switch summary svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4}
.language-switch summary:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:8px}
.language-switch .language-list{position:absolute;right:0;top:calc(100% + 8px);width:248px;max-height:min(560px,75svh);overflow:auto;margin:0;padding:8px;list-style:none;background:#1c1c1e;border:1px solid #454548;border-radius:16px;box-shadow:0 16px 48px #0008}
.language-list a{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:10px 14px;border-radius:9px;font-size:14px}
.language-list a:hover,.language-list a[aria-current=true]{background:#333336;color:#fff}
.language-list a[aria-current=true]:after{content:'✓';margin-left:12px}
html:not([lang=pt-BR]) .home-page .hero-cinema h1{white-space:normal;font-size:clamp(30px,5.3vw,80px)}
html:lang(ja),html:lang(zh),html:lang(ko){word-break:normal;overflow-wrap:break-word}
@media(max-width:1100px){.site-header .desktop-nav{display:none}.site-header .nav-shell{grid-template-columns:1fr auto}.site-header .menu-toggle{display:block}}
@media(max-width:760px){
 .home-page .hero-cinema .hero-stage{width:max(680px,100vw);top:var(--hero-media-top,180px)}
 .home-page .hero-cinema .hero-copy{top:36px}
 .home-page .hero-cinema .hero-lead{max-width:420px}
 .site-header .nav-shell{gap:12px}
 .site-header .brand{width:146px}
 .site-header .nav-actions{gap:4px}
 .site-header .nav-contact{display:none}
 .language-switch .language-list{right:-40px}
 .sub-hero{padding:44px 0 64px}
 .sub-page .sub-hero h1,.sub-page .case-hero h1{font-size:clamp(36px,7vw,58px)}
 .sub-page .case-meta{margin-top:40px}
 .home-page .works .section-top{flex-wrap:wrap}
 .hero-skip{right:16px;bottom:12px}
}
@media(prefers-reduced-motion:reduce){.hero-cinema .hero-copy{animation:none!important;transition:none!important}}
