/* Updated Figma frame 35:2293. The global navigation deliberately follows v30. */
.intro{height:calc(1352 * var(--u))}
.intro h1{left:calc(300 * var(--u));top:calc(262 * var(--u));font-size:calc(118.699 * var(--u));z-index:1}
.intro-cn{left:calc(308.58 * var(--u));top:calc(402.33 * var(--u));font-size:calc(91.757 * var(--u));z-index:1}
.intro-role{left:calc(1439 * var(--u));top:calc(806 * var(--u));font-size:calc(77.619 * var(--u));color:rgba(0,0,0,.5)}
.role-o{width:calc(56.063 * var(--u));height:calc(56.063 * var(--u))}
.intro-note{left:calc(507 * var(--u));top:calc(959 * var(--u));font-size:calc(23.475 * var(--u))}
.intro-arrow{left:calc(971.01 * var(--u));top:calc(562 * var(--u));width:calc(82 * var(--u));height:calc(359 * var(--u))}
.curve{left:calc(6 * var(--u));width:calc(76 * var(--u));height:100%}
.curve-tip{width:calc(46 * var(--u));height:calc(31 * var(--u))}
.hero-rock{position:absolute;left:calc(1216 * var(--u));top:calc(-421 * var(--u));width:calc(1681.721 * var(--u));height:calc(1365.794 * var(--u));display:flex;align-items:center;justify-content:center;pointer-events:none;transform:translate3d(var(--rock-x,0px),var(--rock-y,0px),0) rotate(var(--rock-turn,0deg));will-change:transform}
.hero-rock img{width:88.338%;height:78.354%;object-fit:fill;opacity:.7;transform:rotate(-12.48deg);animation:rock-float 9s ease-in-out infinite}
@keyframes rock-float{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 12px;rotate:1.5deg}}
.contact-strip{margin:0;height:calc(143 * var(--u))}
.strip-track{gap:calc(45.542 * var(--u))}
.strip-track>a,.strip-extra{font-size:calc(69.003 * var(--u));gap:calc(45.542 * var(--u))}
.strip-arrow{width:calc(37.262 * var(--u));height:calc(37.262 * var(--u))}
.brand-strip{height:calc(659 * var(--u));padding-top:calc(186 * var(--u))}
.brand-track,.brand-set{gap:calc(129.255 * var(--u))}
.brand-set{height:calc(91 * var(--u))}
.brand-set img{width:calc(var(--logo-w) * .6908 * var(--u));height:calc(var(--logo-h) * .6908 * var(--u))}
.work-gallery{margin:0 calc(43.329 * var(--u)) 0 calc(43 * var(--u));gap:calc(234 * var(--u))}
.staggered-row{display:grid;grid-template-columns:calc(1064 * var(--u)) calc(779.06 * var(--u));gap:calc(193.86 * var(--u));padding-inline:calc(188 * var(--u)) calc(210 * var(--u))}
.campaign-project .project-art{aspect-ratio:1064/871;mask-image:url('../assets/figma-home/campaign-mask.svg')}
.campaign-label{position:absolute;left:4.347%;top:87.945%;font-size:calc(37.098 * var(--u));line-height:1.72;white-space:nowrap;font-weight:300}
.three-project{margin-top:calc(78.76 * var(--u));width:calc(779.06 * var(--u))}
.three-project .project-art{aspect-ratio:779.06/719.438;mask-image:url('../assets/figma-home/img102.svg')}
.three-project h2{font-size:calc(37.098 * var(--u))}
.stats-section{margin-top:calc(525 * var(--u));min-height:calc(1560 * var(--u));padding-bottom:calc(98.477 * var(--u))}
.stats-section>h2{max-width:calc(762 * var(--u))}
.footer-contact{margin:0 calc(58.5 * var(--u)) 0 calc(30 * var(--u))}
.project-art{transition:filter .4s;transform-origin:center}
@media(hover:hover){.project:hover .project-art{filter:brightness(1.035)}.project:hover h2{color:var(--blue)}}
.motion-ready .motion-reveal{opacity:0;translate:0 42px;transition:opacity 1s ease,translate 1.2s cubic-bezier(.16,1,.3,1);transition-delay:var(--reveal-delay,0ms)}
.motion-ready .motion-reveal.is-visible{opacity:1;translate:0 0}
.scroll-project{opacity:var(--project-opacity,1)}
.scroll-project:focus-within{opacity:1}
.project-image-motion{position:absolute;inset:0;transform:scale(var(--project-scale,1));transform-origin:center;will-change:transform}
.scroll-project .project-art{transform:none;overflow:hidden}
@media(prefers-reduced-motion:reduce){.scroll-project{opacity:1!important}.project-image-motion{transform:none;will-change:auto}}
@media(max-width:700px){
 .intro{height:650px;padding-top:110px}.intro h1{top:135px;left:24px;font-size:clamp(29px,7.8vw,53px)}.intro-cn{top:185px;left:26px;font-size:29px}
 .hero-rock{left:40%;top:-74px;width:92vw;height:75vw;opacity:.75}.intro-role{left:35%;top:330px;font-size:clamp(23px,5.8vw,38px)}.role-o{width:22px;height:22px}
 .intro-note{left:24px;top:520px;font-size:11px;white-space:normal;right:20px}.intro-note p+p{gap:5px}.intro-note a{padding:2px 4px}
 .intro-arrow{left:29%;top:238px;width:30px;height:87px}.curve{left:3px;width:18px;height:87px}.curve-tip{width:12px;height:8px}
 .contact-strip{height:62px}.strip-track,.strip-track>a,.strip-extra{gap:24px;font-size:27px}.strip-arrow{width:18px;height:18px}
 .brand-strip{height:170px;padding-top:58px}.brand-track,.brand-set{gap:45px}.brand-set{height:45px}.brand-set img{width:calc(var(--logo-w) * .3px);height:calc(var(--logo-h) * .3px)}
 .work-gallery{margin-inline:16px;gap:66px}.staggered-row{grid-template-columns:1fr;gap:48px;padding-inline:22px}.campaign-label{font-size:clamp(9px,2.65vw,17px)}.three-project{width:78%;margin:0 0 0 auto}.three-project h2{font-size:15px}.stats-section{margin-top:110px;min-height:0;padding-bottom:100px}.footer-contact{margin:0 20px}
}
@media(prefers-reduced-motion:reduce){.hero-rock{transform:none!important}.hero-rock img{animation:none}.motion-ready .motion-reveal{opacity:1;translate:none;transition:none}.motion-ready .project.motion-reveal .project-art{clip-path:none;transition:none}}
/* Interactive volume and first-visit title treatment */
.hero-rock{left:48%;top:calc(-140 * var(--u));width:64%;height:calc(980 * var(--u));transform:none;pointer-events:auto;cursor:default;touch-action:pan-y;z-index:0}

.hero-rock canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y;pointer-events:none}
.hero-rock.is-3d>img{visibility:hidden}
.hero-rock:focus-visible{outline:1px dashed #0003c9;outline-offset:-24px}
.type-letter{visibility:hidden}.type-letter.typed{visibility:visible}
.is-typing .typed:last-of-type{border-right:1px solid currentColor}
@media(max-width:700px){.hero-rock{left:42%;top:-20px;width:85vw;height:260px}}
/* Reversible immersive scenes, using the previous homepage curtain/reveal rhythm. */
.home-canvas{overflow:clip}
.project-scene{position:relative;min-width:0}
.project-scene>.project-row{position:sticky;top:72px;transform:translateY(var(--scene-rise,0px)) scale(var(--scene-scale,1));transform-origin:center 40%;clip-path:inset(0 var(--scene-clip,0%));will-change:transform,clip-path}
.project-scene .project-caption{opacity:var(--scene-copy,1);transform:translateY(calc((1 - var(--scene-copy,1)) * 28px))}
.project-scene .project-art{clip-path:inset(var(--mobile-clip,0%) 0 0);transition:none}
.project-scene .campaign-label{opacity:var(--scene-copy,1)}
.project-scene:focus-within .project-caption{opacity:1;transform:none}
@media(max-width:700px){.project-scene>.project-row{position:relative;top:auto;transform:none;clip-path:none}.project-scene .project-caption{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.project-scene{height:auto!important}.project-scene>.project-row{position:relative;top:auto;transform:none;clip-path:none;will-change:auto}.project-scene .project-caption{opacity:1;transform:none}.project-scene .project-art{height:auto!important;clip-path:none}}
.project-scene .project-art{width:100%;max-width:100%}
.project-scene .project-image-motion{inset:auto 0;top:50%;height:var(--art-base);transform:translateY(-50%) scale(calc(var(--project-scale,1) * var(--frame-cover,1)))}
@media(prefers-reduced-motion:reduce){.project-scene .project-image-motion{transform:translateY(-50%)}}
/* Soft scroll response: stable composition, restrained depth, no pinned expansion. */
.hero-rock canvas{inset:auto;left:-40%;top:-40%;width:180%;height:180%}
.project-scene>.project-row{position:relative;top:auto;clip-path:none;transform:translateY(var(--scene-rise,0px));will-change:transform}
.project-scene .project-caption{opacity:1;transform:none}
.project-scene .project-image-motion{transform:translateY(calc(-50% + var(--image-drift,0px))) scale(var(--project-scale,1))}
@media(prefers-reduced-motion:reduce){.project-scene>.project-row{transform:none}.project-scene .project-image-motion{transform:translateY(-50%)}}
/* Block Studio-inspired restrained entrances, with bidirectional re-entry. */
.motion-ready .reference-project{opacity:0;transition:opacity .7s cubic-bezier(.22,.61,.36,1);transition-delay:0s}
.motion-ready .reference-project.is-in-view{opacity:1;transition-delay:var(--entry-delay,0ms)}
.motion-ready .reference-project:focus-within{opacity:1}
.reference-project .project-art{transform:none;clip-path:none;transition:filter .3s}
.reference-project .project-image-motion{position:absolute;inset:0;height:100%;transform:scale(1);transition:transform .85s cubic-bezier(.22,.61,.36,1);will-change:auto}
@media(hover:hover){.reference-project:hover .project-image-motion{transform:scale(1.025)}}
@media(prefers-reduced-motion:reduce){.motion-ready .reference-project{opacity:1;transition:none}.reference-project .project-image-motion{transition:none;transform:none!important}}