/* Site-wide motion system: editorial reveals with precise industrial rhythm. */
html,body{overflow-x:clip}
/* Keep reveal sections out of the first paint until common.js has prepared their final animation state. */
.motion-loading main > section, .motion-loading .entry-cta{
  visibility:hidden;
  animation:motion-loading-fallback 0s 2s forwards;
}
@keyframes motion-loading-fallback{to{visibility:visible}}

.motion-ready [data-reveal]{
  opacity:.12;
  will-change:opacity,transform,clip-path;
  transition-property:opacity,transform,clip-path,filter;
  transition-delay:var(--reveal-delay,0ms);
  transition-timing-function:cubic-bezier(.16,1,.3,1);
  filter:blur(3px);
}
.motion-ready [data-reveal="heading"]{
  clip-path:none;
  transform:translateY(34px);
  transition-duration:920ms;
}
.motion-ready [data-reveal="letters"]{
  opacity:1;
  transform:none;
  clip-path:none;
  filter:none;
  transition:none;
}
/* Native inline text preserves word wrapping, Japanese punctuation and font metrics.
   Animate opacity only: inline-block glyphs introduced browser-dependent breaks. */
.letter-heading-character{
  display:inline;
  opacity:0;
  transition:opacity 620ms cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--reveal-delay,0ms) + var(--letter-index) * 38ms);
}
.motion-ready [data-reveal="letters"] .letter-heading-character {
  display:inline;
  color:inherit;
  font:inherit;
  letter-spacing:inherit;
  margin:0;
  padding:0;
}
html:not(.motion-ready) .letter-heading-character { opacity:1 }
[data-reveal="letters"].is-revealed .letter-heading-character{
  opacity:1;
}
.motion-ready [data-motion-fv] [data-reveal="letters"] .letter-heading-character{
  transition-duration:1250ms;
  transition-timing-function:ease-in-out;
  transition-delay:calc(var(--reveal-delay,0ms) + var(--letter-index) * 80ms);
}
.motion-ready [data-reveal="fade"]{transform:none;clip-path:none;filter:none;transition-duration:760ms}
.motion-ready [data-motion-fv] :is(h1,h2,h3,p)[data-reveal="fade"]{transition-duration:1200ms;transition-timing-function:ease-in-out}
.motion-ready [data-reveal="image"]{
  filter:none;
  transform:translateY(18px) scale(1.055);
  transition-duration:1250ms;
}
.motion-ready [data-reveal="image"][data-reveal-side="right"]{clip-path:inset(0 55% 0 0)}
.motion-ready [data-reveal="image"][data-reveal-side="left"]{clip-path:inset(0 0 0 55%)}
.motion-ready [data-reveal].is-revealed{opacity:1;transform:none;clip-path:inset(0);filter:none}
.motion-ready :is([data-reveal="fade"],[data-reveal="letters"]).is-revealed { clip-path:none }

@media(max-width:767px){
  .motion-ready [data-reveal="heading"]{transform:translateY(28px);transition-duration:820ms}
  .motion-ready [data-reveal="image"]{transform:translateY(12px) scale(1.035);transition-duration:920ms}
  .letter-heading-character{transition-delay:calc(var(--reveal-delay,0ms) + var(--letter-index) * 30ms)}
}
/* Page transition: simple right-to-left solid-color wipe. */
.first-visit-loader{
  position:fixed;
  z-index:10000;
  inset:0;
  display:grid;
  place-items:center;
  visibility:hidden;
  opacity:0;
  background:#8cc8e7;
  pointer-events:none;
}
.first-visit-loader-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  width:min(420px,82vw);
}
.first-visit-loader-mark{
  width:min(260px,58vw);
  padding:18px 0;
  overflow:hidden;
}
.first-visit-loader-mark img{
  display:block;
  width:100%;
  height:auto;
  opacity:0;
  transform:translateY(10px);
}
.first-visit-loader-content>p{
  margin:0;
  color:#fff;
  font:500 clamp(18px,1.725vw,22.5px)/1.8 var(--en), sans-serif;
  letter-spacing:.12em;
  text-align:center;
  text-wrap:balance;
  opacity:0;
  transform:none;
}
.first-visit-loading .first-visit-loader{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  animation:first-visit-loader-out 700ms 2300ms ease-in-out forwards;
}
.first-visit-loading .first-visit-loader-mark img{
  animation:first-visit-logo-reveal 900ms 400ms cubic-bezier(.22,1,.36,1) both;
}
.first-visit-loading .first-visit-loader-content>p{
  animation:first-visit-copy-reveal 850ms 650ms ease-in-out both;
}
@keyframes first-visit-logo-reveal{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes first-visit-copy-reveal{
  from{opacity:0}
  to{opacity:1}
}
@keyframes first-visit-loader-out{
  to{visibility:hidden;opacity:0}
}
body:after{
  content:"";
  position:fixed;
  z-index:9999;
  inset:0;
  background:#559ed3;
  pointer-events:none;
  will-change:transform;
  transform:scaleX(0);
  transform-origin:left;
}
.page-transition-loading body:after{
  transform:scaleX(1);
  transform-origin:left;
  animation:page-wipe-fallback 0s 900ms forwards;
}
.page-transition-ready:not(.page-transition-loading) body:after{
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 500ms ease-in-out;
}
.page-transition-ready.page-transition-leaving body{
  pointer-events:none;
}
.page-transition-ready.page-transition-leaving body:after{
  transform:scaleX(1);
  transform-origin:right;
  transition:transform 500ms ease-in-out;
}
@keyframes page-wipe-fallback{to{visibility:hidden}}
@media(prefers-reduced-motion:reduce){
  .first-visit-loader{display:none}
}

/* Mobile navigation: keep the panel renderable so opening and closing can interpolate. */
@media(max-width:900px){
  .header nav{
    display:flex;
    visibility:hidden;
    pointer-events:none;
    opacity:0;
    transform:translateY(-12px);
    clip-path:inset(0 0 100% 0);
    transform-origin:top;
    transition:opacity 300ms ease-out,transform 420ms cubic-bezier(.16,1,.3,1),clip-path 460ms cubic-bezier(.16,1,.3,1),visibility 0s linear 460ms;
    will-change:opacity,transform,clip-path;
  }
  .header nav.open{
    visibility:visible;
    pointer-events:auto;
    opacity:1;
    transform:translateY(0);
    clip-path:inset(0);
    transition-delay:0s;
  }
  #global-nav>:is(a,.menu-item){
    opacity:0;
    transform:translateY(-8px);
    transition:opacity 220ms ease-out,transform 340ms cubic-bezier(.16,1,.3,1);
  }
  #global-nav.open>:is(a,.menu-item){opacity:1;transform:translateY(0)}
  #global-nav.open>:is(a,.menu-item):nth-child(1){transition-delay:70ms}
  #global-nav.open>:is(a,.menu-item):nth-child(2){transition-delay:105ms}
  #global-nav.open>:is(a,.menu-item):nth-child(3){transition-delay:140ms}
  #global-nav.open>:is(a,.menu-item):nth-child(4){transition-delay:175ms}
  #global-nav.open>:is(a,.menu-item):nth-child(5){transition-delay:210ms}
  #global-nav.open>:is(a,.menu-item):nth-child(6){transition-delay:245ms}
  #global-nav.open>:is(a,.menu-item):nth-child(7){transition-delay:280ms}
  .menu i{
    transform-origin:center;
    transition:opacity 180ms ease-out,transform 360ms cubic-bezier(.16,1,.3,1);
  }
  .menu[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu[aria-expanded="true"] i:nth-child(2){opacity:0;transform:scaleX(0)}
  .menu[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

@media(max-width:900px) and (prefers-reduced-motion:reduce){
  .header nav,
  #global-nav>:is(a,.menu-item),
  .menu i{transition:none}
}


/* Adopt corporate button motion without changing recruitment button colours. */
html { scroll-behavior:smooth }
@media(min-width:768px) {
  .motion-ready [data-parallax-media] { transform:translate3d(0,var(--parallax-y,0),0) scale(1.035); will-change:transform }
}
.pill.pill { transition:color .32s ease,background-color .32s ease,border-color .32s ease,transform .32s cubic-bezier(.2,.72,.2,1),box-shadow .32s ease }
.pill.pill b { transition:transform .32s cubic-bezier(.2,.72,.2,1) }
@media(hover:hover) {
  .pill.pill:is(:hover,:focus-visible) { transform:translateY(-3px) }
  .pill.pill:is(:hover,:focus-visible) b { transform:translateX(5px) }
}
@media print {
  .motion-loading main > section, .motion-loading .entry-cta { visibility:visible; animation:none }
  .motion-ready [data-reveal], .motion-ready [data-motion-fv] [data-reveal] { opacity:1; transform:none; clip-path:none; filter:none; transition:none }
  .motion-ready .letter-heading-character { opacity:1; transition:none }
  .motion-ready [data-parallax-media] { transform:none }
  .first-visit-loader, body:after { display:none }
}