/* HR motion system v1 — movement, depth and microinteractions only. No design, layout or colour changes. */
:root{
 --mo-out:cubic-bezier(.16,.84,.34,1);
 --mo-soft:cubic-bezier(.33,.9,.28,1);
 --mo-spring:cubic-bezier(.2,.9,.3,1);
 --mo-x:0;--mo-y:0;
}

/* Entrance hold for everything that can sit in the first screen. Script or its 3s failsafe releases it. */
html.mo-pre .header .brand-wordmark,
html.mo-pre .header nav>a,
html.mo-pre .header .header-contact,
html.mo-pre .header .menu,
html.mo-pre .home-copy>*,
html.mo-pre .stage-message,
html.mo-pre .trust-strip>.wrap>*,
html.mo-pre .home-intro>div:first-child>*,
html.mo-pre .intro-aside>*,
html.mo-pre .page-heading>*,
html.mo-pre .split-copy>*,
html.mo-pre .split-hero .portrait,
html.mo-pre .jobs-heading>*,
html.mo-pre .legal-hero>*,
html.mo-pre .editorial>*,
html.mo-pre #services>article,
html.mo-pre .contact>div>*{opacity:0}
html.mo .hero-identity{animation:none}

/* Depth is switched on per container while the pointer is inside it: a resting card keeps
   subpixel text rendering instead of living on its own compositing layer. */
html.mo .mo-3d{perspective:1400px}

/* Cursor-aware cards: the existing lift stays, rotation and directional shadow come from the script. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 html.mo .service-teasers>a,
 html.mo .pathway,
 html.mo .personal-card,
 html.mo .career-card,
 html.mo #services article,
 html.mo .reasons article{transition:rotate .55s var(--mo-soft),scale .55s var(--mo-soft),box-shadow .55s var(--mo-soft),border-color .35s,transform .25s,background .25s}
 html.mo .is-tilting{transition:box-shadow .15s linear,border-color .35s,transform .25s,background .25s}
 html.mo .is-tilting{box-shadow:calc(var(--mo-x)*-16px) calc(16px + var(--mo-y)*-10px) 38px #392f271c}
 html.mo .service-teasers>a.is-tilting,
 html.mo .personal-card.is-tilting,
 html.mo #services article.is-tilting,
 html.mo .reasons article.is-tilting{border-color:var(--taupe-300)}
 html.mo .career-image img,html.mo .pathway-image img{transition:transform .65s var(--mo-soft),translate .55s var(--mo-soft)}
 html.mo .is-tilting .career-image img,html.mo .is-tilting .pathway-image img{transition:transform .65s var(--mo-soft),translate .1s linear}
 /* Magnetic controls follow the cursor, then glide back. */
 html.mo .button,html.mo .header-contact,html.mo .career-controls button,html.mo .menu{transition:background .2s,translate .6s var(--mo-spring),scale .6s var(--mo-spring)}
 html.mo .is-magnetic{transition:background .2s,translate .1s linear,scale .3s var(--mo-soft)}
 /* Light sweep, invisible until hovered. */
 html.mo .button{position:relative;overflow:hidden;isolation:isolate}
 html.mo .button::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;translate:-130% 0;background:linear-gradient(112deg,transparent 38%,#ffffff2e 50%,transparent 62%);transition:translate .85s var(--mo-soft)}
 html.mo .button.light::after,html.mo .solution-band .button::after{background:linear-gradient(112deg,transparent 38%,#392f2712 50%,transparent 62%)}
 html.mo .button:hover::after{translate:130% 0}
}

/* Arrows travel with a little more weight than the base hover. */
html.mo .button span,html.mo .text-link span,html.mo .service-more>span{transition:transform .45s var(--mo-spring)}
html.mo .button:hover span,html.mo .text-link:hover span,html.mo a:hover .service-more>span{transform:translateX(5px)}
html.mo .career-action>span{transition:background .3s,transform .5s var(--mo-spring)}

/* Underline wipes in from the left and out to the right. */
html.mo .text-link{position:relative}
html.mo .text-link::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--taupe-800);scale:0 1;transform-origin:right center;transition:scale .42s var(--mo-out)}
html.mo .text-link:hover::after,html.mo .text-link:focus-visible::after{scale:1 1;transform-origin:left center}
html.mo .text-link:hover{border-bottom-color:transparent}

/* Navigation: direction-aware rule, calmer state changes, subtle scrolled state. */
html.mo .header nav a::after{transform-origin:right center;transition:transform .42s var(--mo-out)}
html.mo .header nav a:hover::after,html.mo .header nav a:focus-visible::after{transform-origin:left center}
html.mo .header{transition:box-shadow .45s var(--mo-soft),background .45s var(--mo-soft)}
html.mo[data-mo-scrolled] .header{box-shadow:0 14px 36px #221c161c;background:#fffdfaf7}
html.mo .section-rail nav a{transition:border-color .4s var(--mo-out),background .4s var(--mo-out),color .4s var(--mo-out)}

/* The mobile panel must stay painted while the script animates it out. */
html.mo .header nav.mo-closing{display:grid}
@media (max-width:950px){html.mo .header nav.mo-closing{grid-template-columns:1fr 1fr;gap:4px 15px}}
@media (max-width:580px){html.mo .header nav.mo-closing{grid-template-columns:1fr}}

/* Touch devices keep the reveals but never get pointer-driven depth. */
@media (hover:none),(pointer:coarse){html.mo .mo-3d{perspective:none}}

@media (prefers-reduced-motion:reduce){
 html.mo-pre .header .brand-wordmark,html.mo-pre .header nav>a,html.mo-pre .header .header-contact,html.mo-pre .header .menu,
 html.mo-pre .home-copy>*,html.mo-pre .stage-message,html.mo-pre .trust-strip>.wrap>*,html.mo-pre .home-intro>div:first-child>*,
 html.mo-pre .intro-aside>*,html.mo-pre .page-heading>*,html.mo-pre .split-copy>*,html.mo-pre .split-hero .portrait,
 html.mo-pre .jobs-heading>*,html.mo-pre .legal-hero>*,html.mo-pre .editorial>*,html.mo-pre #services>article,
 html.mo-pre .contact>div>*{opacity:1}
 html.mo .text-link::after,html.mo .button::after{display:none}
 html.mo .text-link:hover{border-bottom-color:var(--taupe-800)}
}