/* Restrained, shared motion tokens. Content remains visible without JavaScript. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1);--motion-fast:220ms;--motion-reveal:650ms}
.motion-item,.motion-item.motion-visible{opacity:1!important;visibility:visible!important;translate:none!important}
.reveal,.reveal.visible{opacity:1!important;visibility:visible!important;transform:none!important}
.hero,.inner-banner{position:relative;isolation:isolate;overflow:clip}
.hero:before,.inner-banner:before{content:'';position:absolute;z-index:-1;pointer-events:none;width:420px;height:420px;right:-150px;top:-130px;border-radius:50%;background:radial-gradient(circle,rgba(6,17,45,.055),rgba(6,17,45,.018) 45%,transparent 70%);animation:brand-light-drift 18s ease-in-out infinite alternate;animation-play-state:paused}
.inner-banner:before{width:310px;height:310px;right:7%;top:-170px;opacity:.75}
.hero[data-motion-active=true]:before,.inner-banner[data-motion-active=true]:before{animation-play-state:running}
.contact-panel:after{content:'';position:absolute;pointer-events:none;width:260px;height:260px;border:1px solid rgba(255,250,234,.075);border-radius:50%;right:35px;top:20px;animation:brand-ring-drift 16s ease-in-out infinite alternate;animation-play-state:paused}
.contact-panel[data-motion-active=true]:after{animation-play-state:running}
.button{transition:transform var(--motion-fast) var(--motion-ease),box-shadow var(--motion-fast),background-color var(--motion-fast),color var(--motion-fast)}
.button>span:last-child,.button>i,.text-link>span,.footer-email>span{display:inline-block;transition:transform var(--motion-fast) var(--motion-ease)}
.button:hover>span:last-child,.button:hover>i,.text-link:hover>span,.footer-email:hover>span{transform:translate(2px,-2px)}
.button:active{transform:translateY(0) scale(.985);box-shadow:none}
header nav a,.footer-links a{transition:color var(--motion-fast),opacity var(--motion-fast),translate var(--motion-fast) var(--motion-ease)}
header nav a:hover{opacity:.65;translate:0 -1px}.footer-links a:hover{translate:3px 0}
.step,.principle{transition:transform 300ms var(--motion-ease),box-shadow 300ms,border-color 300ms,background-color 300ms,opacity var(--motion-reveal) var(--motion-ease) var(--motion-delay,0ms),translate var(--motion-reveal) var(--motion-ease) var(--motion-delay,0ms)}
.principle>i,.step-top>span:last-child{transition:transform 300ms var(--motion-ease)}
.principle:hover>i,.step:hover .step-top>span:last-child{transform:translateY(-2px)}
.portrait-figure img{transition:transform 800ms var(--motion-ease)}
input,textarea{transition:border-color var(--motion-fast),box-shadow var(--motion-fast),background-color var(--motion-fast)}
input:focus,textarea:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(6,17,45,.06)}
#form-status:not([hidden]){animation:status-arrive 350ms var(--motion-ease) both}
.motion-paused *,.motion-paused *:before,.motion-paused *:after{animation-play-state:paused!important}
@keyframes brand-light-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-40px,25px,0)}}
@keyframes brand-ring-drift{from{transform:translate3d(0,0,0) scale(.96)}to{transform:translate3d(-12px,12px,0) scale(1.04)}}
@keyframes status-arrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(hover:none){.button:hover,.step:hover,.principle:hover{transform:none}.portrait-figure:hover img{transform:none}.footer-links a:hover,header nav a:hover{translate:none}.button:hover>span:last-child,.button:hover>i{transform:none}}
@media(max-width:600px){.motion-item,.motion-item.motion-visible{translate:none!important;--motion-reveal:500ms}.hero:before{width:260px;height:260px}.contact-panel:after{width:180px;height:180px;right:-35px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.motion-item{opacity:1;translate:none;transition:none}.hero:before,.inner-banner:before,.contact-panel:after{animation:none!important}*,*:before,*:after{animation:none!important;transition:none!important}.button:hover,.button:active,.step:hover,.principle:hover,.portrait-figure:hover img{transform:none!important}.footer-links a:hover,header nav a:hover{translate:none}}
.clarity-art:not([data-motion-active=true]) .orbit-two,.clarity-art:not([data-motion-active=true]) .signal{animation-play-state:paused}
/* Secondary motion remains bounded and never changes layout. */
.reading-progress{position:fixed;inset:0 0 auto;height:2px;background:var(--navy);transform:scaleX(var(--reading-progress,0));transform-origin:left;z-index:100;pointer-events:none}.reading-progress[hidden]{display:none}
.clarity-art{transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform 500ms var(--motion-ease),opacity var(--motion-reveal) var(--motion-ease),translate var(--motion-reveal) var(--motion-ease)}
.portrait-figure.motion-item:not(.motion-visible) img{transform:scale(1.045)}
.portrait-figure.motion-visible img{transform:scale(1)}
@media(hover:hover) and (pointer:fine){.portrait-figure.motion-visible:hover img{transform:scale(1.035)}}
.service-detail.motion-visible .service-visual>span{animation:process-step-arrive 650ms var(--motion-ease) both}.service-detail.motion-visible .service-visual>span:nth-of-type(2){animation-delay:100ms}.service-detail.motion-visible .service-visual>span:nth-of-type(3){animation-delay:200ms}
.step.motion-visible .step-top>span:first-child{animation:number-arrive 650ms var(--motion-ease) both}
.contact-panel[data-motion-active=true] .contact-symbol img{animation:brand-settle 1800ms var(--motion-ease) both}
.inner-banner .banner-line{position:relative}.inner-banner .banner-line:after{content:'';position:absolute;top:-1px;left:0;width:100%;height:1px;background:var(--navy);transform:scaleX(0);transform-origin:left;opacity:.35}.inner-banner[data-motion-active=true] .banner-line:after{animation:line-arrive 1100ms var(--motion-ease) 200ms both}
.principle:hover,.step:hover{border-color:rgba(6,17,45,.32);box-shadow:0 12px 25px rgba(6,17,45,.055)}
.service-visual>span{transition:border-color 250ms,background-color 250ms}.service-visual:hover>span{border-color:rgba(6,17,45,.25)}
@keyframes process-step-arrive{from{opacity:.3;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes number-arrive{from{opacity:.2;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes brand-settle{from{opacity:.2;transform:translateY(12px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes line-arrive{to{transform:scaleX(1)}}
@media(max-width:600px){.clarity-art{transform:none!important}.service-detail.motion-visible .service-visual>span{animation-duration:450ms}}
@media(prefers-reduced-motion:reduce){.reading-progress{display:none}.clarity-art{transform:none!important}.portrait-figure.motion-item:not(.motion-visible) img{transform:none}.service-detail.motion-visible .service-visual>span,.step.motion-visible .step-top>span:first-child,.contact-panel .contact-symbol img{animation:none!important}.inner-banner .banner-line:after{display:none}}