#preloader {
  position:fixed;
  inset:0;
  z-index:150;
  background:#030504;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  transition:opacity .7s,visibility .7s;
}

#preloader .logo {
  width:220px;
  margin-bottom:24px;
}

#preloader>p {
  font-size:14px;
  color:#a5a8a5;
  letter-spacing:1px;
}

.loading-track {
  width:320px;
  max-width:75vw;
  height:2px;
  background:#253024;
  margin-top:35px;
}

.loading-track i {
  display:block;
  height:100%;
  background:#60b947;
  width:0;
  box-shadow:0 0 12px #78dc52;
  transition:width .1s linear;
}

.loading-label {
  display:flex;
  justify-content:space-between;
  width:320px;
  max-width:75vw;
  margin-top:15px;
  font-size:11px;
  color:#86a381;
}

#preloader .loading-motto {
  font-size:12px;
  letter-spacing:4px;
  margin-top:70px;
}

#preloader.loaded {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.js .reveal {
  opacity:0;
  transform:translateY(45px);
  transition:opacity 1s var(--ease),transform 1s var(--ease);
}

.js .reveal.visible {
  opacity:1;
  transform:none;
}

.services-grid .reveal:nth-child(3n+2) {
  transition-delay:.1s;
}

.services-grid .reveal:nth-child(3n+3) {
  transition-delay:.2s;
}

.marquee-track {
  animation:marquee 40s linear infinite;
}

.awards-marquee .marquee-track {
  animation-duration:25s;
}

.motto .marquee-track {
  animation-duration:50s;
}

.motto .marquee-track {
  width:max-content;
}

.motto:hover .marquee-track,.awards-marquee:hover .marquee-track,.clients-mobile:hover .marquee-track {
  animation-play-state:paused;
}

@keyframes marquee {
  to {
    transform:translateX(-50%);
  }
}

body.ready .hero-copy {
  animation:hero-reveal 1.2s var(--ease) backwards;
}

@keyframes hero-reveal {
  from {
    opacity:0;
    translate:0 30px;
  }
  to {
    opacity:1;
    translate:0 0;
  }
}

dialog[open] {
  animation:dialog-in .5s var(--ease);
}

@keyframes dialog-in {
  from {
    opacity:0;
    transform:translateY(25px);
  }
  to {
    opacity:1;
    transform:none;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*:before,*:after {
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .js .reveal {
    opacity:1;
    transform:none;
  }
  .cursor-glow {
    display:none;
  }
}


/* Transform-only loader progress avoids repeated layout work. */
.loading-track i {
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease-out;
}
#preloader {
  transition: opacity .3s ease-out, visibility .3s ease-out;
}
.hero-copy, .technology {
  will-change: transform, opacity;
}
html {
  scrollbar-gutter: stable;
}
@media (prefers-reduced-motion: reduce) {
  .hero-copy, .technology, .case-track {
    will-change: auto;
  }
}

.motion-offscreen { animation-play-state: paused !important; }

/* Each entrance finishes cleanly so scroll-linked transforms retain control. */
body.ready .hero-copy { animation: none; }
body.ready .hero-copy > .eyebrow,
body.ready .hero-copy > h1,
body.ready .feature-carousel,
body.ready .hero-buttons > * {
  animation: hero-reveal .85s var(--ease) backwards;
}
body.ready .hero-copy > h1 { animation-delay: .08s; }
body.ready .feature-carousel { animation-delay: .18s; }
body.ready .hero-buttons > :first-child { animation-delay: .28s; }
body.ready .hero-buttons > :last-child { animation-delay: .36s; }
.word-mask { display: inline-block; overflow: hidden; vertical-align: bottom; }
.motion-word { display: inline-block; }
.js .reveal { transition-delay: var(--reveal-delay, 0ms); }
.service-card.visible:hover { transform: translateY(-6px); transition-delay: 0ms; }
.service-card > img { transition: transform .5s var(--ease); }
.service-card:hover > img { transform: translateY(-4px) rotate(-7deg); }
.hero-buttons > * > span { transition: transform .35s var(--ease); }
.hero-buttons > *:hover > span { transform: translateX(4px); }
.feature-slide > img { transition: transform .7s var(--ease); }
.feature-slide:hover > img { transform: scale(1.035); }
.contact-card { transition: opacity .8s var(--ease), transform .8s var(--ease), border-color .3s; }
.contact-card.visible:hover { transform: translateY(-5px); border-color: #79c75c80; transition-delay: 0ms; }
#menu[open] .menu-inner > nav > * { animation: hero-reveal .6s var(--ease) backwards; }
#menu[open] .menu-inner > nav > :nth-child(2) { animation-delay: .06s; }
#menu[open] .menu-inner > nav > :nth-child(3) { animation-delay: .12s; }
#menu[open] .menu-inner > nav > :nth-child(4) { animation-delay: .18s; }
.footer-map path { animation: none; }
.js .footer-map path { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.footer-map.motion-active path { animation: route-draw 2.4s var(--ease) forwards; }
.footer-map circle { transform-box: fill-box; transform-origin: center; }
.footer-map.motion-active circle { animation: destination-pulse 2.6s ease-in-out infinite; }
.footer-map.motion-active circle:nth-of-type(2) { animation-delay: .5s; }
.footer-map.motion-active circle:nth-of-type(3) { animation-delay: 1s; }
@keyframes route-draw { to { stroke-dashoffset: 0; } }
@keyframes destination-pulse { 0%,100% { opacity:.45; transform:scale(1); } 50% { opacity:1; transform:scale(1.9); } }
.motion-sleep *, .motion-sleep *::before, .motion-sleep *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .motion-word, .technology-tags a { transform: none !important; opacity: 1 !important; }
  .js .footer-map path { stroke-dashoffset: 0; }
  .footer-map circle { animation: none !important; }
  .hero-copy *, .service-card > img { animation: none !important; }
}

@media (prefers-reduced-motion: no-preference) {
  #starfield { animation: star-breathe 9s ease-in-out infinite alternate; }
}
@keyframes star-breathe { from { opacity: .72; } to { opacity: 1; } }

/* The settled galaxy uses one painted frame and inexpensive compositor motion. */
#particle-logo.galaxy-settled {
  animation: settled-galaxy-drift 36s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes settled-galaxy-drift {
  from { transform: scale(1.025) rotate(0deg); }
  to { transform: scale(1.04) rotate(.8deg); }
}
@media (prefers-reduced-motion: reduce) {
  #particle-logo.galaxy-settled { animation: none; will-change: auto; }
}

.motion-sleep #particle-logo.galaxy-settled { animation-play-state: paused; }