/* Motion edition. This layer never carries essential business content. */
.hero{position:relative;isolation:isolate}.hero h1{position:relative;z-index:2;pointer-events:none}.hero-actions,.hero-description{position:relative;z-index:3}.signature{position:absolute;width:36%;aspect-ratio:1;right:-1%;top:48px;z-index:1;pointer-events:none}.signature canvas{width:100%;height:100%;display:block}.signature-caption{display:block;text-align:center;font-size:8px;letter-spacing:.2em;margin-top:-24px;color:var(--muted)}.motion-toggle{position:fixed;bottom:18px;right:20px;z-index:50;background:var(--paper);border:1px solid #898d80;border-radius:24px;padding:11px 15px;font-size:10px;display:flex;align-items:center;gap:12px;box-shadow:0 3px 15px #0001}.motion-toggle span{font-size:12px}.hero h1>span{overflow:clip;padding-bottom:.1em;margin-bottom:-.1em}.hero h1 .hero-line-inner{display:block}.motion-active .hero-line-inner{animation:heroUnfold 1.15s cubic-bezier(.16,1,.3,1) both;transform-origin:0 100%}.motion-active .hero h1>span:nth-child(2) .hero-line-inner{animation-delay:.12s}.motion-active .hero h1>span:nth-child(3) .hero-line-inner{animation-delay:.24s}.motion-active .hero-star{animation:starArrive 1.4s cubic-bezier(.16,1,.3,1) both}.motion-active .hero-bottom{animation:copyArrive 1s .4s both}.motion-active .signature{animation:sculptureArrive 1.7s cubic-bezier(.16,1,.3,1) both}.motion-active .hero-star{transform:rotate(var(--star-angle,0deg))}.kinetic-band{overflow:clip;background:var(--orange);padding:23px 0;border-top:1px solid #20211e}.kinetic-band>div{display:flex;width:max-content;transform:translateX(var(--marquee-offset,-50px));will-change:transform}.kinetic-band span{font-size:clamp(30px,4.5vw,75px);font-weight:500;letter-spacing:-.055em;white-space:nowrap;padding-right:30px;line-height:1}.showcase{overflow:clip}.stage-runway{position:relative}.depth-card{display:none}.stage-progress{display:none}.motion-desktop .stage-runway{height:165vh;min-height:1000px}.motion-desktop .stage{position:sticky;top:1vh;height:94vh;max-height:800px;min-height:580px;padding:70px 10% 90px;display:flex;flex-direction:column;justify-content:center;transform-style:preserve-3d;perspective:1400px}.motion-desktop .mini-browser{width:100%;z-index:3;transform-origin:50% 50%;flex-shrink:0;backface-visibility:hidden}.motion-desktop .depth-card{display:flex;position:absolute;inset:80px 13% 110px;flex-direction:column;justify-content:space-between;padding:30px;background:#ef552c;color:#20211e;border:1px solid #20211e;will-change:transform;pointer-events:none;border-radius:6px}.depth-card span{font-size:9px;letter-spacing:.12em}.depth-card b{font-size:clamp(34px,5vw,75px);letter-spacing:-.06em;font-weight:500}.depth-card i{font-size:90px;font-style:normal;align-self:end}.motion-desktop .depth-card-two{background:#dce1cf;z-index:2}.motion-desktop .depth-card-one{z-index:1}.motion-desktop .floating-note{z-index:5;right:0;bottom:100px;will-change:transform}.motion-desktop .stage-watermark{z-index:0;font-size:14vw;will-change:transform}.motion-desktop .stage-progress{position:absolute;bottom:25px;left:0;right:0;display:flex;align-items:center;gap:25px;font-size:9px;letter-spacing:.09em;color:#c3c8b5}.stage-chapter{min-width:210px}.progress-line{height:1px;background:#5b6251;flex:1;overflow:hidden}.progress-line i{display:block;height:100%;background:#ef552c;transform:scaleX(var(--stage-progress,0));transform-origin:0 50%}.motion-active .statement h2 .read-word{color:#777a6d;transition:color .25s}.motion-active .statement h2 .read-word.is-read{color:var(--ink)}.motion-active .statement h2 em .read-word.is-read{color:var(--orange)}.motion-active .reveal.is-visible{animation:sectionArrive .9s cubic-bezier(.16,1,.3,1) both}.motion-active .process .reveal:nth-child(2){animation-delay:.14s}.motion-active .process .reveal:nth-child(3){animation-delay:.28s}.service-row{position:relative;isolation:isolate;overflow:clip}.service-row:before{content:'';position:absolute;inset:0;background:var(--olive);z-index:-1;transform:scaleY(0);transform-origin:50% 100%;transition:transform .45s cubic-bezier(.16,1,.3,1)}.service-row:hover:before,.service-row:focus-visible:before{transform:scaleY(1)}.service-row .row-arrow{transition:transform .4s cubic-bezier(.16,1,.3,1)}.service-row:hover .row-arrow{transform:rotate(45deg)}.button{position:relative;isolation:isolate;overflow:hidden}.button:before{content:'';position:absolute;z-index:-1;inset:0;background:var(--orange);transform:translateY(102%);transition:transform .4s cubic-bezier(.16,1,.3,1);border-radius:50% 50% 0 0}.button:hover:before{transform:translateY(0);border-radius:0}.button:hover{color:var(--ink);background:var(--ink)}.button span{transition:transform .3s}.button:hover span{transform:rotate(45deg)}.final-cta .button:before{background:var(--paper)}.final-cta h2>span{transform:rotate(var(--final-angle,-35deg));transform-origin:center;will-change:transform}.demo-site.switching{animation:conceptFold .6s cubic-bezier(.16,1,.3,1) both}.demo-art{transition:border-radius .7s,background .7s}.demo-art .arch{transition:transform .8s cubic-bezier(.16,1,.3,1),background .6s}.plan{transition:transform .4s,box-shadow .4s}.plan:hover{transform:translateY(-8px);box-shadow:0 20px 35px #20211e10;z-index:2}.motion-paused .signature-caption:after{content:' / STILL'}.motion-paused .kinetic-band>div{transform:translateX(-50px)}
@keyframes heroUnfold{from{transform:translateY(110%) rotate(5deg)}to{transform:translateY(0) rotate(0)}}@keyframes starArrive{from{opacity:0;transform:scale(.2) rotate(-180deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes copyArrive{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes sculptureArrive{from{opacity:0;transform:scale(.6) rotate(-25deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes sectionArrive{from{transform:translateY(55px) rotate(1deg);opacity:.35}to{transform:translateY(0) rotate(0);opacity:1}}@keyframes conceptFold{from{clip-path:inset(0 0 95% 0);transform:translateY(25px)}to{clip-path:inset(0);transform:translateY(0)}}
@media(max-width:1050px){.signature{width:33%;top:80px;right:0}.signature-caption{font-size:6px}.motion-desktop .stage{padding:60px 5% 90px}.stage-chapter{min-width:180px}.motion-desktop .depth-card{inset:90px 10% 110px}.motion-desktop .stage-progress{gap:15px;font-size:8px}}
@media(max-width:700px){.signature{width:125px;height:125px;top:126px;right:-5px;opacity:.9}.signature-caption{display:none}.hero h1{padding-right:0}.hero h1 .hero-star{visibility:hidden}.hero h1 .last-line{min-height:70px}.motion-toggle{bottom:12px;right:12px;font-size:9px;padding:10px 12px}.kinetic-band{padding:17px 0}.kinetic-band span{font-size:34px}.motion-active .reveal.is-visible{animation:copyArrive .65s both}.plan:hover{transform:none;box-shadow:none}.hero-bottom{margin-top:30px}.motion-active .hero-line-inner{animation-duration:.9s}.final-cta h2>span{transform:none}.motion-active .statement h2 .read-word{color:var(--ink)}}
@media(prefers-reduced-motion:reduce){.motion-toggle{display:none!important}.signature{opacity:1;transform:none}.kinetic-band>div{transform:translateX(-50px)}.service-row:before,.button:before{transition:none}.plan:hover{transform:none}.final-cta h2>span{transform:none}.read-word{color:inherit!important}}
/* Keep depth layers in explicit paint order while projecting each card. */
.motion-desktop .stage{transform-style:flat}
@media(max-width:700px){.signature{width:100px;height:100px;top:157px;right:0}}
/* Revision 3: the official brand promise owns the hero. */
.hero h1{font-size:clamp(48px,6.15vw,96px);line-height:1.06;letter-spacing:-.06em;max-width:1000px;margin:32px 0 38px}.hero h1 i{letter-spacing:-.055em}.signature{width:27%;right:-1%;top:115px}.hero-description{max-width:410px}.hero-description p:last-child{max-width:390px}.social-note>a{flex-shrink:0}.service-row h3{font-size:clamp(23px,2.3vw,35px)}
@media(max-width:1050px){.hero h1{font-size:clamp(45px,6.2vw,68px)}.signature{width:24%;top:150px}.social-note{flex-wrap:wrap}}
@media(max-width:700px){.hero h1{font-size:clamp(27px,7.8vw,52px);line-height:1.13;letter-spacing:-.05em;margin:28px 0}.signature{display:none}.hero .eyebrow{font-size:8px;letter-spacing:.05em}.hero-description .lead{font-size:17px}.service-row h3{font-size:25px}.social-note>a{flex-shrink:1}}