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

   Four 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 full-screen menu: pointer handling while it is open, item hover, and
      the current-item colour.
   4. 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 ------------------------------------------------------------- */

/* The bar itself paints nothing: the page shows straight through it, and only
   the logo and the menu button are visible. It is also click-through, so
   scroll and hover reach the page; those two opt back in below. */
.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;
  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;
  transition: opacity 0.3s ease;
}

/* The menu covers the page, so the logo steps aside while it is open. Webflow
   marks the button `w--open` for exactly that time. */
.navbar-version-01:has(.w-nav-button.w--open) a.w-inline-block,
.navbar-version-01:has(.w-nav-button.w--open) .w-nav-brand,
.navbar-version-01:has(.w-nav-button.w--open) .nav-logo-link {
  opacity: 0 !important;
  pointer-events: none !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 bar sits over a dark backdrop. */
.nav-logo-image.is-dark-bg {
  filter: invert(1) brightness(1.2) !important;
}

/* --- Menu button --------------------------------------------------------- */

/* A thin light-grey outline ring around an off-white disc, carrying three
   staggered lines (short, long, short) that fold into a cross while the menu
   is open. The ring darkens to black on hover. Webflow's navbar script toggles
   `w--open` on the button, which is all the open state keys off. The export
   drew the button with two discs the interactions engine resized (`.nav-pop-01`
   at rest, `.nav-close` while open); the button now paints itself, so those two
   stay hidden. `.nav-pop-02` still grows out from behind it into the backdrop.
   The top offset centres it on the 52px logo, whose centre is 61px down. */
.menu-button,
.w-nav-button {
  position: fixed !important;
  top: 33px !important;
  right: 45px !important;
  z-index: 96 !important;
  width: 56px !important;
  height: 56px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1.5px solid #cbcbcb;
  border-radius: 50%;
  background-color: #ececec !important;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  pointer-events: auto !important;
  transition:
    background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-button:hover,
.w-nav-button:hover,
.w-nav-button:focus-visible {
  border-color: #000;
}

.menu-button.w--open,
.w-nav-button.w--open {
  background-color: #000 !important;
  border-color: #000;
}

.menu-icon-line {
  display: block;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background-color: #000;
  transition:
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s ease,
    background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-icon-line:nth-child(2) {
  width: 20px;
}

/* The lines sit 7px apart centre to centre, so the outer two meet in the
   middle when they rotate and the middle one fades out. They all even out to
   one length, since the whole disc is black by then and a cross needs equal arms. */
.w-nav-button.w--open .menu-icon-line {
  width: 20px;
  background-color: #ececec;
}

.w-nav-button.w--open .menu-icon-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.w-nav-button.w--open .menu-icon-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.w-nav-button.w--open .menu-icon-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* The backdrop disc is centred in this box, so the box is centred on the
   button: 128px square, with its centre 73px in from the right edge and 61px
   down, where the 56px button's centre is. */
.nav-wrapper-pop-up {
  position: fixed !important;
  top: -3px !important;
  right: 9px !important;
  width: 128px !important;
  height: 128px !important;
  pointer-events: none !important;
}

.nav-pop-01,
.nav-close {
  display: none !important;
}

/* The backdrop is the same off-white as most of the page, so on its own the
   disc growing out of the button is invisible. A black edge makes the button's
   ring itself appear to sweep outward into the menu, and back in on close. */
.nav-pop-02 {
  background-color: #ececec !important;
  border: 1.5px solid #000;
}

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

  /* The 40px logo's centre is 40px down; the button centres on it. */
  .menu-button,
  .w-nav-button {
    top: 12px !important;
    right: 20px !important;
  }

  /* Button centre is 48px in from the right and 40px down on phones. */
  .nav-wrapper-pop-up {
    top: -24px !important;
    right: -16px !important;
  }

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

/* --- Full-screen menu ---------------------------------------------------- */

/* The bar above is click-through so the page beneath its fixed 100px strip
   stays usable, but the menu inside it inherits that and goes dead: every
   hover and click on a menu item falls through to the page behind it, which the
   navbar script reads as an outside click and closes the menu. Webflow marks
   the menu with `data-nav-menu-open` while it is open, so it takes the pointer
   back only then. */
.navbar-version-01 .nav-menu[data-nav-menu-open] {
  pointer-events: auto !important;
}

/* The menu links sit in the vertical middle of the menu rather than hanging
   from its top. On desktop the grid's first row takes all the height the
   copyright and social links leave; below 992px the grid is a flex column.
   Auto margins centre the links in the free space in both layouts. */
.navbar-version-01 .grid-nav-menu {
  grid-template-rows: 1fr auto;
}

.navbar-version-01 .nav-menu-items-wrapper {
  padding-top: 0;
  margin-block: auto;
}

/* Below 992px the menu is pushed down (160px of padding, then from 480px down
   a 120px offset instead) with 45px below, yet the grid still asks for a full
   screen of height. It overflowed by that much, which dropped the centred
   links low and pushed the social links off the bottom. Fit it to what is
   left. */
@media screen and (max-width: 991px) {
  .navbar-version-01 .grid-nav-menu {
    min-height: calc(100dvh - 205px);
  }
}

@media screen and (max-width: 479px) {
  .navbar-version-01 .grid-nav-menu {
    min-height: calc(100dvh - 165px);
  }
}

/* Menu items. Hovering slides a black bar up behind the label and turns the
   label the backdrop's off-white — the export's "Hover in Nav item"
   interaction, restated in CSS so it does not depend on the interaction engine
   having bound to these CMS-rendered items. `!important` outranks the inline
   transform and colour that engine stamps on the same elements. */
.nav-items-wrapper .nav-items-bg {
  display: block !important;
  transform: translate3d(0, 102%, 0) !important;
  transition: transform 0.5s cubic-bezier(0.85, 0, 0.15, 1);
}

.nav-items-wrapper:hover .nav-items-bg,
.nav-items-wrapper:focus-within .nav-items-bg {
  transform: translate3d(0, 0, 0) !important;
}

/* Webflow paints the link for the section currently in view #0082f3. The design
   has no blue, so the current item reads like the others. */
.navbar-version-01 .nav-link-large {
  color: #000 !important;
  transition: color 0.5s;
}

.nav-items-wrapper:hover .nav-link-large,
.nav-items-wrapper:focus-within .nav-link-large {
  color: #ececec !important;
}

/* The copyright line and social links in the menu: black, not the site's red. */
.nav-menu .inline-link {
  color: #000;
}

@media (prefers-reduced-motion: reduce) {
  .nav-items-wrapper .nav-items-bg,
  .navbar-version-01 .nav-link-large,
  .navbar-version-01 a.w-inline-block,
  .menu-button,
  .menu-icon-line {
    transition: none;
  }
}

/* --- 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;
}