/* ---------------------------------------------------------------------------
   Mirage — additions on top of the exported Webflow stylesheet.

   Three jobs:
   1. Fixed navbar + adaptive logo behaviour (carried over from the base site).
   2. Grid placement for elements that used to have generated #w-node-… ids but
      are now rendered from the CMS.
   3. The client-logo marquee keyframes. Those lived in a Webflow HTML embed on
      the original site and were lost in the static export, so they are
      reconstructed here.
   --------------------------------------------------------------------------- */

:root {
  --green-yellow: #f2aa4c;
  --white-smoke: #f5f5f5;
  --grey: #8d8d8d;
}

* {
  box-sizing: border-box;
}

/* --- Navbar ------------------------------------------------------------- */

.navbar-version-01 {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100px !important;
  z-index: 95 !important;
  background-color: transparent !important;
  /* Let scroll and hover reach the page; the logo and button opt back in. */
  pointer-events: none !important;
}

.navbar-version-01 a.w-inline-block,
.navbar-version-01 .w-nav-brand,
.navbar-version-01 .nav-logo-link {
  position: fixed !important;
  top: 35px !important;
  left: 45px !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 96 !important;
  pointer-events: auto !important;
  display: block !important;
}

.nav-logo-image {
  height: 52px !important;
  width: auto !important;
  max-height: 52px !important;
  object-fit: contain !important;
  transition: filter 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: block !important;
}

/* Set by AdaptiveLogo when the mark sits over a light section. */
.nav-logo-image.is-dark-bg {
  filter: invert(1) brightness(1.2) !important;
}

.menu-button,
.w-nav-button {
  position: fixed !important;
  top: 35px !important;
  right: 45px !important;
  margin: 0 !important;
  z-index: 96 !important;
  pointer-events: auto !important;
}

.navbar-version-01.is-dark-theme .menu-button-regular {
  color: #ffffff;
}

@media (max-width: 767px) {
  .navbar-version-01 a.w-inline-block,
  .navbar-version-01 .w-nav-brand,
  .navbar-version-01 .nav-logo-link,
  .menu-button,
  .w-nav-button {
    top: 20px !important;
  }

  .navbar-version-01 a.w-inline-block,
  .navbar-version-01 .w-nav-brand,
  .navbar-version-01 .nav-logo-link {
    left: 20px !important;
  }

  .menu-button,
  .w-nav-button {
    right: 20px !important;
  }

  .nav-logo-image {
    height: 40px !important;
  }
}

/* --- Grid placement for CMS-driven elements ------------------------------ */

/* Introduction capability rows. `.grid-columns` is "left Right"; the heading
   auto-places into `left` and the two lists occupy `Right`. Below 992px they
   stack, heading first. Values copied from the export's #w-node-_1afa699d-… rules. */
.mirage-capability-list {
  grid-area: Right;
}

@media screen and (max-width: 991px) {
  .mirage-capability-title {
    grid-area: 1 / 1 / 2 / 2;
  }

  .mirage-capability-list {
    grid-area: 2 / 1 / 3 / 3;
  }
}

/* Featured project gallery. Copied from the export's #w-node-f36fff33-… rules. */
.mirage-work-slot-1 {
  grid-area: 1 / 1 / 3 / 6;
  align-self: start;
}

.mirage-work-slot-2 {
  grid-area: 2 / 7 / 4 / 13;
  place-self: start center;
}

.mirage-work-slot-3 {
  grid-area: 4 / 2 / 6 / 8;
  place-self: start center;
}

@media screen and (max-width: 991px) {
  .mirage-work-slot-1 {
    grid-row-end: 2;
    grid-column-end: 3;
  }

  .mirage-work-slot-2 {
    grid-column: 2 / 3;
  }

  .mirage-work-slot-3 {
    grid-column: 1 / 2;
  }
}

@media screen and (max-width: 479px) {
  .mirage-work-slot-1 {
    grid-column-end: 2;
  }
}

/* --- Marquees ------------------------------------------------------------ */

/* GPU hints for everything that moves continuously. */
.hero-rail,
.rail,
.rail-reverse,
.ticker-wrapper-min,
.home-logo-wrapper,
.clients-grid.logo-animate,
.clients-grid.logo-animate-alt {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.client-logo-image {
  max-width: 180px;
  height: auto;
  object-fit: contain;
}

/* The client rows scroll in opposite directions. Each row renders its logos
   twice, so translating by exactly -50% lands on an identical frame and the
   loop is seamless regardless of how many logos an editor adds. */
@keyframes mirage-marquee-left {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes mirage-marquee-right {
  from {
    transform: translate3d(-50%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

.home-logo-wrapper {
  overflow: hidden;
}

.clients-grid.logo-animate,
.clients-grid.logo-animate-alt {
  /* The export hard-coded a width and a static transform for a fixed logo count;
     both have to go now that the row is CMS-driven. */
  width: max-content !important;
  transform: none;
  animation: mirage-marquee-left 60s linear infinite;
}

.clients-grid.logo-animate-alt {
  animation-name: mirage-marquee-right;
}

.clients-grid.logo-animate:hover,
.clients-grid.logo-animate-alt:hover {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .clients-grid.logo-animate,
  .clients-grid.logo-animate-alt {
    animation: none;
  }
}

/* --- Rich text ----------------------------------------------------------- */

.mirage-rich-text p {
  margin-bottom: 1em;
}

.mirage-rich-text a {
  text-decoration: underline;
}