/* Exyo: editorial materials, complete project images and a curated selection. */
:root{--art-paper:#dedde0;--art-muted:#aaa4b0;--art-line:#ffffff26}
.art-motion-image{display:block;width:100%;height:100%;object-fit:cover}
#bg--noise,#film-grain-canvas{opacity:.025!important}
.hero-section{background:#080808 url('/assets/home-reel/city.webp') center/cover}
.hero-section #webgl-container{background-image:url('/assets/home-reel/city.webp');background-size:cover;background-position:center}
@media(max-width:767px){.hero-section,.hero-section #webgl-container{background-image:url('/assets/home-reel/city.webp')}}
.hero-section .slide-thumb:focus-visible{outline:1px solid #c5a4e9;outline-offset:-2px;opacity:1}
.hero-section .overlay-ui{mix-blend-mode:normal;color:#f7f6f8;text-shadow:0 1px 12px #0008}
.hero-section .small-tag{color:#ded6ee}.hero-section .services-list_en{background:transparent}
.brand-core-video img{width:100%;height:100%;object-fit:cover}
.face .art-motion-image,.mobile-cube-face .art-motion-image{width:100%;height:100%;object-fit:cover}
.center-video-box img{width:100%;height:100%;object-fit:cover}
#core-capabilities .giant-title{font-size:clamp(48px,7.8vw,124px)!important;letter-spacing:-.045em}
.gallery-header{align-items:center;text-align:center;justify-content:center;background:#080808;overflow:hidden}
.gallery-header:after{content:none}
.gallery-header-label,.gallery-header-title,.gallery-header-sub{position:relative;z-index:2}
.gallery-header-label{color:#c2bacf;letter-spacing:.15em;font-size:10px;margin:0 0 35px}
.gallery-header-title{font-size:clamp(48px,8.3vw,145px)!important;line-height:.96!important;letter-spacing:-.055em!important;max-width:1050px;font-weight:500}
.gallery-header-title .gh-line{display:block}
.gallery-header-sub{margin:35px 0 0;color:#c6c1ce;font-size:clamp(13px,1.05vw,17px);line-height:1.6;max-width:390px;text-transform:none;letter-spacing:.01em}
/* A full viewport of the shared dark, grain-covered background. */
#s3-gallery::before{content:none}
#s3-gallery .gallery-header{box-sizing:border-box;height:100svh!important;min-height:100svh;align-items:center;justify-content:center;gap:clamp(16px,3svh,32px);padding:clamp(32px,9svh,96px) 5vw;text-align:center;background:#080808}
#s3-gallery .gallery-header-label,#s3-gallery .gallery-header-title,#s3-gallery .gallery-header-sub{margin:0}
#s3-gallery .gallery-header-title{width:100%;max-width:none;font-size:clamp(30px,min(7.6vw,14svh),145px)!important;line-height:1.02!important;pointer-events:none}
#s3-gallery .gallery-header-title .gh-line{width:fit-content;max-width:100%;margin-inline:auto;white-space:nowrap;pointer-events:auto}
#core-capabilities,#core-capabilities .ring-gallery-sticky,#core-capabilities #sketch,#core-capabilities .ccap-exit-overlay,#s3-gallery{background-color:#080808}
#core-capabilities .ring-gallery-sticky::before{background:linear-gradient(180deg,rgba(8,8,8,.96),rgba(8,8,8,.72) 38%,rgba(8,8,8,0))}
#core-capabilities .ring-gallery-sticky::after{background:linear-gradient(0deg,rgba(8,8,8,.98),rgba(8,8,8,.78) 36%,rgba(8,8,8,0))}
#core-capabilities .ccap-side-fade-left{background:linear-gradient(90deg,rgba(8,8,8,.96),rgba(8,8,8,.68) 36%,rgba(8,8,8,0))}
#core-capabilities .ccap-side-fade-right{background:linear-gradient(270deg,rgba(8,8,8,.96),rgba(8,8,8,.68) 36%,rgba(8,8,8,0))}
#dark-wrapper::after{content:'';position:absolute;inset:auto 0 0;height:clamp(100px,24vh,280px);z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(8,8,8,0),#080808)}
#dark-wrapper #dw-black-overlay{background:#080808!important}
#stm-section::after{background:linear-gradient(180deg,rgba(8,8,8,0),#080808)}
.mobile-cube-section::after{background:linear-gradient(180deg,rgba(8,8,8,0),rgba(8,8,8,.1) 45%,#080808)}
#s3-gallery .gallery-header-sub{max-width:44ch;text-align:center}
.pg-gallery{row-gap:8vw;padding:0 4vw 12vh;background:#080808;position:relative;z-index:2}
.pg-gallery .pg-item-1{grid-column:1/13;grid-row:1;height:54vw}
.pg-gallery .pg-item-2{grid-column:1/7;grid-row:2;height:35vw}
.pg-gallery .pg-item-3{grid-column:7/13;grid-row:2;height:35vw}
.pg-gallery .pg-item-4{grid-column:1/13;grid-row:3;height:54vw}
.pg-gallery .pg-item-5{grid-column:1/7;grid-row:4;height:35vw}
.pg-gallery .pg-item-6{grid-column:7/13;grid-row:4;height:35vw}
.pg-img-wrap{background:#080808;border-radius:0}
.pg-img-wrap img{top:0;height:100%;object-fit:cover}
#s3-gallery .pg-gallery .pg-item{width:100%;min-width:0;height:auto!important;aspect-ratio:3/2;align-self:start}
.exyo-project-caption{padding:42px 24px 20px;background:linear-gradient(transparent,#080808dd)}
.exyo-project-caption>span:first-child{font-weight:400;letter-spacing:-.025em}
.art-method{position:relative;overflow:hidden;background:#101013;color:#f5f2f8;border-block:1px solid var(--art-line);padding:80px 4%;display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center}
.art-method .text-action{display:inline-flex;gap:35px;color:#dfd0f1;font-size:13px;padding:14px 0;border-bottom:1px solid #b6a1e77a;text-decoration:none}
.art-method-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.38}
.art-method-copy,.art-method-steps{position:relative;z-index:1}
.art-method-copy small,.art-method-steps small{font-size:10px;letter-spacing:.13em;color:#c4b5dd}
.art-method h2{font:400 clamp(32px,4.5vw,72px)/1.03 'DM Sans',Arial,sans-serif;letter-spacing:-.055em;margin:25px 0}
.art-method p{max-width:440px;font-size:15px;line-height:1.8;color:#c5c0cc}
.art-method-steps>div{display:flex;justify-content:space-between;padding:22px 0;border-bottom:1px solid var(--art-line);font-size:clamp(18px,2.1vw,32px);letter-spacing:-.03em}
.art-method-steps>div small{padding-top:5px;font-size:10px}
.art-talk-strip{display:flex;overflow:hidden;white-space:nowrap;border-block:1px solid var(--art-line);padding:22px 0;background:#090909;color:#e9e6ee;text-decoration:none!important}
.art-talk-track{display:flex;align-items:center;gap:50px;width:max-content;animation:artTalk 36s linear infinite;font-family:'Bitcount Grid Single','DM Sans',sans-serif;font-size:clamp(30px,4.2vw,70px);line-height:1.1;letter-spacing:.06em}
.art-talk-track span{display:flex;align-items:center;gap:50px}.art-talk-track b{font-family:'DM Sans',sans-serif;font-weight:300;color:#b6a1e7}
@keyframes artTalk{to{transform:translateX(-50%)}}
.footer-video-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.footer-parallax-section{height:clamp(360px,35vw,560px)!important;background:#b8b7bc}
.footer-parallax-bg{top:-5%;height:110%;background-size:cover!important;background-position:center!important;background-attachment:scroll;mix-blend-mode:normal}
.footer-parallax-copy{color:#27262b;pointer-events:auto;text-shadow:0 1px #ffffff60}
.footer-parallax-copy a{color:inherit}
.footer-copyright-bridge{font-size:100px}.footer-copyright-bridge span{font-size:clamp(60px,7vw,100px);opacity:.65}
.inner-footer{padding-top:65px}
.inner-footer .footer-wordmark{display:none}
.art-inner-signature{height:clamp(210px,29vw,460px);margin:65px -4.35% 35px;overflow:hidden;background:#bbb}
.art-inner-signature img{width:100%;height:100%;object-fit:cover;display:block}
.inner-footer .footer-cols{border-top:0;padding-top:20px}
.inner-footer .footer-cta{font-size:clamp(62px,11vw,170px);letter-spacing:-.065em;margin:15px 0 35px}
.exyo-inner .exyo-top-nav{z-index:40}
.contact-hero{isolation:isolate;min-height:78svh;background:#080808;padding-bottom:70px}
.contact-hero:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#08080811,#08080855),url('/assets/art-direction/banner-connect.webp') center/cover;opacity:.65}
.contact-hero h1{max-width:1000px;position:relative}
.contact-hero .lede{max-width:600px;color:#ddd7e4}
.contact-symbol{display:none}
.contact-form input,.contact-form select,.contact-form textarea{border-bottom-color:#ffffff40}
.contact-form button{border-color:#b6a1e7;color:#e4d8f7}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:#b6a1e7;outline:none}
.archive-project img{aspect-ratio:3/2;object-fit:contain;background:#080808}
.archive-project:hover .archive-img img{transform:scale(1.025)}
.archive-project:nth-child(even){margin-top:100px}
.archive-intro-banner{height:clamp(180px,27vw,410px);margin-top:55px;position:relative;overflow:hidden;background:#111}
.archive-intro-banner img{width:100%;height:100%;object-fit:cover;display:block}
.archive-intro-banner figcaption{position:absolute;left:25px;bottom:25px;font-size:10px;letter-spacing:.15em;color:#d6cbe6}
.case-visual{max-height:none;aspect-ratio:3/2;object-fit:contain;background:#080808}
.case-body img.zoomable{width:100%;max-width:100%;height:auto;border-radius:0;box-shadow:none;background:#111}
.art-live-preview{width:100%;background:#111;padding:20px;border:1px solid var(--art-line);margin:35px 0}
.art-live-preview img{display:block;width:100%;height:auto;max-height:none!important;margin:0!important}
.art-live-preview figcaption{display:flex;justify-content:space-between;padding:18px 0 0;font-size:11px;color:#b9aec9;letter-spacing:.04em}
.art-live-preview a{color:#e2d4f5}
.exyo-panel,.exyo-lightbox{z-index:20000}
.art-motion-paused .art-talk-track{animation-play-state:paused}
@media(max-width:767px){
 .hero-section .overlay-ui{mix-blend-mode:normal}.hero-section .overlay-top{padding-top:105px}
 .hero-section .top-header{display:grid!important;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin-bottom:26px}
 .hero-section .huge-text{font-size:9vw!important;line-height:1}.hero-section .small-tag{font-size:6px;line-height:1.3;text-align:center}
 .hero-section .small-tag:before{display:none}.hero-section #webgl-container{background-position:63% center}
 .exyo-inner .exyo-top-nav{top:96px!important}.inner-hero{padding-top:165px}
 .gallery-header{padding:100px 6% 75px;min-height:75svh;height:auto!important}
 .gallery-header-label{font-size:8px;line-height:1.6;margin-bottom:24px}
 .gallery-header-title{font-size:13vw!important;line-height:1.02!important}.gallery-header-sub{font-size:13px;max-width:265px;margin-top:25px}
 .gallery-header-video img{object-position:67% center;opacity:.55}
 .pg-gallery{padding:5vw 6% 16vw;gap:12vw}.pg-gallery .pg-item{height:66vw!important}
 .exyo-project-caption{padding:30px 12px 12px}.exyo-project-caption>span:first-child{font-size:16px}.exyo-project-caption small{font-size:8px;max-width:120px;text-align:right}
 .art-method{padding:60px 6%;grid-template-columns:1fr;gap:25px}.art-method h2{font-size:42px}.art-method p{font-size:13px}.art-method-steps>div{padding:17px 0;font-size:24px}
 .art-talk-strip{padding:17px 0}.art-talk-track,.art-talk-track span{gap:28px}.art-talk-track{font-size:34px}
 .inner-footer{padding-top:50px}.art-inner-signature{margin:45px -5.55% 25px;height:210px}
 .inner-footer .legal-row{line-height:1.7}
 .archive-project:nth-child(even){margin-top:0}.archive-intro-banner{height:180px;margin-top:35px}.archive-intro-banner figcaption{font-size:8px;left:15px;bottom:15px}
 .contact-hero{min-height:auto;padding-bottom:50px}.contact-hero:before{background-position:60% center;opacity:.4}.contact-hero .lede{font-size:16px}
 .case-visual{width:100%;margin:0;aspect-ratio:3/2;max-height:none}
 .footer-video-thumb{max-width:100%!important;width:100%!important}.footer-video-thumb img{aspect-ratio:3/2}
 .footer-parallax-section{display:block!important;height:260px!important}.footer-parallax-bg{background-size:100% auto!important;background-position:center bottom!important;background-repeat:no-repeat}
 .footer-parallax-copy{top:22px;left:6%;font-size:8px;line-height:1.9}.footer-parallax-copy .exyo-legal{font-size:8px}
 .art-live-preview{padding:10px;margin:25px 0}.art-live-preview figcaption{font-size:9px;gap:15px}
}
@media(prefers-reduced-motion:reduce){.art-talk-track{animation:none}.archive-project .archive-img img{transition:none}}

/* A single shared navigation, with the complete brand artwork at every size. */
#fixed-logo,#menu-btn{display:none!important}
#nav_scroll_container{opacity:1;pointer-events:auto}
#nav_scroll .ns-logo img{object-fit:contain}
img[src="/assets/exyo-logo.svg"]{object-fit:contain;height:auto}
img[src="/assets/brand/studio-sign.webp"]{object-fit:contain}
.art-inner-signature{height:auto;margin-left:0;margin-right:0;background:#b8b7bc}
.art-inner-signature img{height:auto;object-fit:contain}
.footer-parallax-section{display:block!important;height:auto!important;aspect-ratio:12/5}
.footer-parallax-bg{top:0;height:100%;transform:none!important;background-size:contain!important;background-position:center bottom!important;background-repeat:no-repeat}
@media(max-width:767px){
 .art-inner-signature{height:auto;margin-left:0;margin-right:0}
 .footer-parallax-section{height:calc(100vw * 5 / 12 + 100px)!important;aspect-ratio:auto}
}
/* Inner pages share the home dropdown; reveal its rows after the shell expands. */
.shared-nav-page #nav_scroll_container.is-menu-open:not(.is-menu-phase-compact):not(.is-menu-phase-line) .ns-dropdown{opacity:1;transform:none;pointer-events:auto}
.shared-nav-page #nav_scroll_container.is-menu-open .ns-dropdown__item,
.shared-nav-page #nav_scroll_container.is-menu-open .ns-social-link{opacity:1;transform:none;filter:none}
.shared-nav-page .ns-showcase-row__title-layer.is-accent{transform:translateY(104%)}
@media(min-width:1281px){
 .shared-nav-page .ns-showcase-row__title-layer{transition:transform .5s cubic-bezier(.16,1,.3,1)}
 .shared-nav-page .ns-showcase-row.is-previewed .ns-showcase-row__title-layer.is-primary{transform:translateY(-104%)}
 .shared-nav-page .ns-showcase-row.is-previewed .ns-showcase-row__title-layer.is-accent{transform:translateY(0)}
 .shared-nav-page .ns-showcase-row__thumb{transition:opacity .45s,clip-path .5s}
 .shared-nav-page .ns-showcase-row.is-previewed .ns-showcase-row__thumb{opacity:1;clip-path:inset(0)}
}