/*
 * Styles for the behaviour in site.js. They replace what the Webflow
 * runtime did with inline styles and the IX2 interaction engine.
 */

:root {
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* Reveal on scroll. Hidden only when JavaScript runs, so the content is
   always readable without it. */
.has-js [data-reveal] {
  opacity: 0;
}

.has-js [data-reveal].is-visible {
  opacity: 1;
  animation: reveal-from-bottom 1s var(--ease-out-quart) both;
}

.has-js [data-reveal="right"].is-visible {
  animation-name: reveal-from-right;
}

@keyframes reveal-from-bottom {
  from {
    opacity: 0;
    transform: translateY(100px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes reveal-from-right {
  from {
    opacity: 0;
    transform: translateX(100px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Background fade when a section scrolls into view */
[data-view-toggle] {
  background-color: var(--_primitives---colors--white);
  transition: background-color 0.5s ease;
}

[data-view-toggle].is-in-view {
  background-color: var(--_primitives---colors--shakespeare-lightest);
}

[data-view-toggle][data-view-once] {
  transition: background-color 2s ease-in 0.5s;
}

/* Home page intro: a gradient curtain sweeps down, then the page fades in */
.loading-screen {
  pointer-events: none;
  animation: curtain-sweep 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
}

@keyframes curtain-sweep {
  from {
    transform: translateY(-300vh);
  }

  to {
    transform: translateY(100vh);
    visibility: hidden;
  }
}

.loading-screen ~ .page-wrapper {
  animation: page-fade-in 0.3s linear 1.4s both;
}

@keyframes page-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Navbar that hides while scrolling down (home page) */
[data-nav-hide] {
  transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

[data-nav-hide].is-nav-hidden {
  transform: translateY(-111px);
  transition-duration: 0.4s;
}

/* Mobile menu */
@media screen and (max-width: 991px) {
  .w-nav .w-nav-menu {
    display: none;
  }

  .w-nav.is-menu-open .w-nav-menu {
    display: block;
    top: 100%;
    left: 0;
    right: 0;
    animation: menu-reveal 0.4s var(--ease-in-out-quint) both;
  }
}

@keyframes menu-reveal {
  from {
    clip-path: inset(0 0 100% 0);
  }

  to {
    clip-path: inset(0);
  }
}

/* Slider. Each slide is as wide as the mask and slides left by its index. */
.w-slide {
  transform: translateX(calc(var(--slide-index, 0) * -100%));
  transition: transform 0.5s ease;
}

.w-slider-arrow-left,
.w-slider-arrow-right,
.w-slider-dot {
  cursor: pointer;
}

/* Progress bar on the about page grows while its block is in view */
.layout485_content .layout485_progress-bar {
  width: 0;
  transition: width 0.8s var(--ease-in-out-cubic);
}

.layout485_content.is-in-view .layout485_progress-bar {
  width: 100%;
}

/* Company timeline line is driven by scroll position */
[data-timeline] .layout121_progress-bar {
  height: 0;
}

/* Partner logo ticker on the projects page */
[data-ticker] .logo3_component {
  animation: ticker-scroll 30s linear infinite;
}

@keyframes ticker-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-112rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .loading-screen {
    display: none;
  }

  .loading-screen ~ .page-wrapper {
    animation: none;
  }

  [data-ticker] .logo3_component {
    animation: none;
  }

  .has-js [data-reveal] {
    opacity: 1;
    animation: none;
  }
}

/* ------------------------------------------------------------------
   Styles that were embedded in every page by the Webflow export.
   They stay last so they win over the sheets above, as before.
   ------------------------------------------------------------------ */

/* Webflow global overrides */
/* Ensure all elements inherit the color from its parent */
a,
.w-input,
.w-nav-link,
.w-nav-brand,
.w-slider-arrow-left,
.w-slider-arrow-right {
  color: inherit;
  text-decoration: inherit;
  font-size: inherit;
}
/* Focus state style for keyboard navigation for the focusable elements */
*[tabindex]:focus-visible,
  input[type="file"]:focus-visible {
   outline: 0.125rem solid #4d65ff;
   outline-offset: 0.125rem;
}
/* Get rid of top margin on first element in any rich text element */
.w-richtext > :not(div):first-child, .w-richtext > div:first-child > :first-child {
  margin-top: 0 !important;
}
/* Get rid of bottom margin on last element in any rich text element */
.w-richtext>:last-child {
	margin-bottom: 0 !important;
}
/* Prevent all click and hover interaction with an element */
/* Enables all click and hover interaction with an element */
/* Create a class of .div-square which maintains a 1:1 dimension of a div */
/* Make sure containers never lose their center alignment */
 .container-large {
	margin-right: auto !important;
  margin-left: auto !important;
}
/* Apply "..." after 3 lines of text */
/* Apply "..." after 2 lines of text */
/* Adds inline flex display */
/* These classes are never overwritten */
/* Remove default Webflow chevron from form select */
  @media screen and (max-width: 767px) {
    .hide-mobile-landscape{
      display: none !important;
    }
}
.margin-top {
  margin-right: 0rem !important;
  margin-bottom: 0rem !important;
  margin-left: 0rem !important;
}
.padding-top {
  padding-right: 0rem !important;
  padding-bottom: 0rem !important;
  padding-left: 0rem !important;
}
.margin-bottom {
  margin-top: 0rem !important;
  margin-right: 0rem !important;
  margin-left: 0rem !important;
}
.padding-bottom {
  padding-top: 0rem !important;
  padding-right: 0rem !important;
  padding-left: 0rem !important;
}
.padding-vertical {
  padding-right: 0rem !important;
  padding-left: 0rem !important;
}
/* Apply "..." at 100% width */
/* Removes native scrollbar */

/* Slider dots */
.color-scheme-1 {}
.w-slider-dot {
  background-color: var(--color-scheme-1--text);
  opacity: 0.20;
}
.w-slider-dot.w-active {
  background-color: var(--color-scheme-1--text);
  opacity: 1;
}
/* Override .w-slider-nav-invert styles */
.w-slider-nav-invert .w-slider-dot {
  background-color: var(--color-scheme-1--text) !important;
  opacity: 0.20 !important;
}
.w-slider-nav-invert .w-slider-dot.w-active {
  background-color: var(--color-scheme-1--text) !important;
  opacity: 1 !important;
}

/* Arrow after link text and external link icons. Only the company, okinawa
   and projects pages had these, so they stay opt-in through a body class. */
  :where(body.external-link-icons) a[target="_blank"]:after {  
    display: inline-block;
    content: '';
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: currentColor;
    -webkit-mask: url(/assets/images/externalicon.svg) no-repeat 50% 50%;
    mask: url(/assets/images/externalicon.svg) no-repeat 50% 50%;
    margin: -0.3em -0.2em -0.25em 0.05em;
    width: 1.1em;
    height: 1.1em;
  }
  /* Dont show an arrow on elements with the class "no-arrow" or linked images */

/* Home page intro gradient */
/*Gradient Styles. Generated with CSS Gradient: cssgradient.io/ */
.gradient-colors {
background: #B0955E;
background: linear-gradient(90deg, rgba(176, 149, 94, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(54, 161, 205, 1) 100%);
}

/* Font smoothing */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -o-font-smoothing: antialiased;
}

/* Video embed ratio */
.w-video.w-embed {
            aspect-ratio: 16 / 9;
        }