/* Spatial studio, 2026-10-23 */
.cta-btn,.works-tab,.video-sub-tab,.viewer-btn,.lang-btn,.nav-links a{border-radius:5px!important;min-height:44px;box-sizing:border-box}.nav-lang{border-radius:5px}.player-close,.gallery-nav,.contact-fab,.work-share-btn{border-radius:5px!important}.contact-fab{width:48px;height:48px}.hero-stage .hero-inner{width:52%;z-index:2}.hero-stage .company-name{font-size:clamp(32px,3.5vw,55px)}
.brand-sculpture{position:absolute;right:7%;top:7%;width:35%;height:78%;z-index:1;display:grid;place-items:center;touch-action:pan-y;cursor:grab}.brand-sculpture:active{cursor:grabbing}.brand-sculpture canvas,.brand-sculpture svg{width:100%;height:100%;object-fit:contain;grid-area:1/1}.brand-sculpture canvas{display:block}.brand-sculpture.is-live svg{visibility:hidden}.sculpture-hint{position:absolute;right:0;bottom:0;color:#e0e5ed;font-size:12px;letter-spacing:1px;pointer-events:none}.hero-shade:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 38%,#07101c45)}
.works-toolbar{display:flex;align-items:center;justify-content:space-between;gap:32px;margin-bottom:28px;overflow-x:auto}.works-toolbar .works-tabs,.works-toolbar .video-sub-tabs{display:flex;flex-wrap:nowrap;margin:0;gap:6px;flex-shrink:0}.works-toolbar .video-sub-tabs{display:none}.works-toolbar.is-video .video-sub-tabs{display:flex}.works-toolbar button{white-space:nowrap;padding:8px 22px;min-height:44px}.works-toolbar button[hidden]{display:none!important}
.works-layout{display:grid;grid-template-columns:100px minmax(0,1fr);gap:28px;align-items:start}.works-layout.no-directory{grid-template-columns:minmax(0,1fr)}.group-directory{position:sticky;top:96px;display:flex;flex-direction:column;gap:10px;padding:8px 0}.group-directory button{background:none;border:0;color:#777f89;text-align:left;font:inherit;font-size:14px;min-height:44px;padding:8px 4px;cursor:pointer;transform-origin:left center;transition:color .18s,transform .18s}.group-directory button.active{color:#0066cc;font-weight:600;transform:scale(1.06)}.group-directory button:focus-visible{outline:2px solid #0066cc;outline-offset:2px}.video-group,.works-grid{scroll-margin-top:100px}.video-group-head{margin-top:0;padding-top:8px}.video-group+.video-group{margin-top:40px}.work-meta{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-top:14px;margin-bottom:8px}.work-meta .work-title{padding:0;min-width:0;line-height:1.5;font-size:17px;overflow-wrap:anywhere}.work-meta .work-duration{position:static!important;flex:none;margin:2px 0 0;padding:3px 7px;line-height:1.3;font-size:12px;border-radius:3px;white-space:nowrap}.work-desc{margin:0;line-height:1.65}.work-media{transition:transform .2s ease-out,box-shadow .2s;transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));will-change:auto}.work-media:hover{box-shadow:0 8px 24px #172c4714}.work-share-btn{min-width:44px;min-height:44px}
@media(max-width:1000px){.works-layout{grid-template-columns:80px minmax(0,1fr);gap:18px}.brand-sculpture{right:4%;width:37%}.hero-stage .company-name{font-size:36px}}
@media(max-width:700px){.hero-stage .hero-inner{width:100%}.hero-stage .company-name{font-size:32px}.brand-sculpture{width:34%;height:38%;right:8%;top:5%;cursor:default;pointer-events:none}.sculpture-hint{display:none}.works-toolbar{gap:16px;margin-bottom:16px}.works-toolbar button{padding:8px 12px;font-size:13px}.works-toolbar .works-tabs,.works-toolbar .video-sub-tabs{gap:4px}.works-layout{display:flex;flex-direction:column;gap:16px}.works-content{width:100%;min-width:0}.group-directory{position:sticky;top:64px;z-index:4;flex-direction:row;width:100%;gap:14px;background:#f5f6f8f5;overflow-x:auto;padding:4px 0;box-sizing:border-box}.group-directory button{white-space:nowrap;flex:none;transform-origin:center}.video-group,.works-grid{scroll-margin-top:130px}.work-meta .work-title{font-size:17px}}
@media(prefers-reduced-motion:reduce){.work-media,.group-directory button{transition:none!important;transform:none!important}html{scroll-behavior:auto!important}}

.group-directory[hidden]{display:none!important}.work-meta .work-duration{align-self:flex-start}.works-toolbar .video-sub-tabs{align-self:center}
.works-toolbar .works-tabs,.works-toolbar .video-sub-tabs{padding:0;align-items:center}
@media(max-width:700px),(prefers-reduced-motion:reduce){.brand-sculpture canvas{display:none}.brand-sculpture.is-live svg{visibility:visible}}

/* Allow directory to stick to viewport within the full works region. */
#works{overflow:visible}.works-layout{overflow:visible}.group-directory{max-height:calc(100svh - 120px);overflow-y:auto;overscroll-behavior:contain}
@media(max-width:700px){.group-directory{max-height:64px;overflow-y:hidden;overflow-x:auto}}

/* No horizontal scrollbar from active label scaling on desktop. */
@media(min-width:701px){.group-directory{overflow-x:hidden;scrollbar-width:none;padding-right:8px}.group-directory::-webkit-scrollbar{display:none}}
@media(max-width:700px){.brand-sculpture{display:none!important}}

/* Background media remains clipped to the existing hero viewport. */
.hero-stage .hero-media,.hero-stage .hero-full{overflow:hidden}
.hero-stage .hero-media .hero-image-motion{transform-origin:50% 50%;animation:hero-photo-zoom 28s ease-out forwards}
.hero-stage .hero-is-paused .hero-image-motion{animation-play-state:paused}
.hero-stage .hero-media video.hero-media-el{pointer-events:none}
@keyframes hero-photo-zoom{from{transform:scale(1)}to{transform:scale(1.08)}}
@media(prefers-reduced-motion:reduce){.hero-stage .hero-media .hero-image-motion{animation:none;transform:none}}

/* Match admin thumbnail framing; base background shorthand reset these values. */
#works .work-media{background-size:cover;background-position:center;background-repeat:no-repeat}

/* Grounded B stage; overrides the former mobile-hidden sculpture. */
.hero-stage .studio-stage{display:grid!important;right:1%;top:3%;width:49%;height:94%;touch-action:pan-y}
.studio-stage.stage-pending>svg{opacity:0}.studio-stage>svg{transition:opacity .15s}.studio-stage .sculpture-hint{bottom:12%;right:6%;opacity:0;transition:opacity .2s}.studio-stage[data-phase=complete] .sculpture-hint{opacity:1}
@media(max-width:700px){.hero-stage .studio-stage{display:grid!important;width:66%;max-width:290px;height:238px;right:0;top:6px;pointer-events:none}.studio-stage .sculpture-hint{display:none}.studio-stage>svg{transform:perspective(800px) rotateY(-30deg)}.studio-stage.is-live>svg{visibility:hidden!important}.studio-stage canvas{display:block!important}}
@media(prefers-reduced-motion:reduce){.studio-stage canvas{display:block!important}.studio-stage.is-live>svg{visibility:hidden!important}.studio-stage>svg,.studio-stage .sculpture-hint{transition:none}}

/* Desktop-only sculpture; video poster keeps the hero filled while decoding. */
@media(max-width:700px){.hero-stage .studio-stage{display:none!important}}
#hero-media .hero-video-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

@media(min-width:701px){.hero-stage .studio-stage{right:-2%!important;width:52%}}

@media(max-width:700px){.works-toolbar{gap:8px;max-width:100%;padding-bottom:4px;scroll-padding-inline:4px}.works-toolbar button{padding:8px 8px;font-size:12px;min-width:44px}.works-toolbar .works-tabs,.works-toolbar .video-sub-tabs{gap:3px}.works-toolbar .works-tab .count{margin-left:3px}}

@media(max-width:700px){.works-toolbar .works-tab{padding-inline:5px}.works-toolbar .tab-count{margin-left:3px}.works-toolbar .works-tab span{font-size:12px}}

@media(min-width:701px){.hero-stage .studio-stage{top:3%;bottom:-2px;height:calc(97% + 2px)}}

.studio-stage[data-phase=wireframe] canvas,.studio-stage[data-phase=materialize] canvas{filter:drop-shadow(0 0 2px #209dff66)}

.studio-stage[data-phase=wireframe] canvas,.studio-stage[data-phase=materialize] canvas{filter:drop-shadow(0 0 3px #159dffcc) drop-shadow(0 0 7px #159dff66)}
.works-toolbar .works-tab{width:auto;min-width:44px;padding-inline:18px}
@media(max-width:700px){.works-toolbar .works-tab{padding-inline:10px}}