/* Overrides on top of webflow.css (the original Webflow stylesheet).
   Recreates the Webflow Interactions that webflow.js used to run. */

:root {
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}

/* ---- scroll-in: fade + rise 100px over 1s (Webflow "outQuart") ---- */
html.js .reveal {
  opacity: 0;
  transform: translate3d(0, 100px, 0);
  transition: opacity 1s var(--ease-out-quart), transform 1s var(--ease-out-quart);
}
html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* "Why choose us" image: slides in from the right (desktop), then drifts slowly */
html.js .wrap-right {
  opacity: 0;
  transform: translate3d(0, 100px, 0);
  transition: opacity 1s var(--ease-out-quart), transform 1s var(--ease-out-quart);
}
@media screen and (min-width: 992px) {
  html.js .wrap-right { transform: translate3d(100px, 0, 0); }
}
html.js .wrap-right.is-visible {
  opacity: 1;
  transform: none;
}
.wrap-right .image-cover {
  transform: scale(1.1) translate3d(0, -5px, 0);
  transition: transform 7s linear;
}
.wrap-right.is-visible .image-cover {
  transform: scale(1.1) translate3d(0, 5px, 0);
}

/* 4-step timeline: box scales in, line draws across, circles pop */
html.js .work-steps-wrap {
  opacity: 0;
  transform: scale(0.75);
  transition: opacity 1s var(--ease-out-quart), transform 1s var(--ease-out-quart);
}
html.js .work-steps-wrap.is-visible {
  opacity: 1;
  transform: none;
}
html.js .work-steps-wrap .primary-step-line {
  width: 0;
  height: 100%;
  transition: width 4s linear 0.5s;
}
html.js .work-steps-wrap.is-visible .primary-step-line {
  width: 100%;
}
html.js .work-steps-wrap .step-circle-opacity {
  transform: scale(0);
  transition: transform 0.2s ease;
}
html.js .work-steps-wrap.is-visible .step-circle-opacity { transform: scale(1); }
html.js .work-steps-wrap.is-visible .fitst-circle { transition-delay: 0.5s; }
html.js .work-steps-wrap.is-visible .second-circle { transition-delay: 1.8s; }
html.js .work-steps-wrap.is-visible .third-circle { transition-delay: 3.1s; }
html.js .work-steps-wrap.is-visible .fourth-circle { transition-delay: 4.3s; }
@media screen and (max-width: 767px) {
  /* the timeline is vertical on phones */
  html.js .work-steps-wrap .primary-step-line {
    width: 2px;
    height: 0;
    transition: height 4s linear 0.5s;
  }
  html.js .work-steps-wrap.is-visible .primary-step-line {
    width: 2px;
    height: 100%;
  }
}

/* ---- nav: solid white once the page is scrolled ---- */
.w-nav {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.w-nav.is-scrolled {
  background-color: #fff;
  box-shadow: 0 2px 12px rgba(18, 30, 122, 0.08);
}

/* ---- hovers ---- */
.project-img {
  transition: transform 0.5s ease;
}
.project-title {
  color: #fff;
  transition: color 0.5s ease;
}
.project-link:hover .project-img {
  transform: scale(1.1);
}
.project-link:hover .project-title {
  color: rgb(255, 180, 0);
}
.service-card .service-card-title {
  transition: opacity 0.3s ease;
}
.service-card:hover .service-card-title {
  opacity: 0.7;
}

/* ---- sliders (webflow.js used to lay these out) ---- */
.w-slider-mask {
  white-space: nowrap;
}
.w-slider-arrow-left,
.w-slider-arrow-right {
  cursor: pointer;
  user-select: none;
}

/* Featured projects: keep the carousel inside the page column (same side
   padding as every other section) and show whole cards only:
   3 on desktop, 2 on tablet, 1 on phones. Cards are 30px apart. */
.projects-viewport {
  width: 100%;
  overflow: hidden;
}
.home-projects-slider .projects-slider-mask {
  width: calc((100% - 60px) / 3);
}
@media screen and (max-width: 991px) {
  .home-projects-slider .projects-slider-mask {
    width: calc((100% - 30px) / 2);
  }
}
@media screen and (max-width: 767px) {
  .home-projects-slider .projects-slider-mask {
    width: 100%;
  }
}

/* ---- mobile nav: slide-in panel from the left ("over-left") ---- */
@media screen and (max-width: 991px) {
  .w-nav .w-nav-menu {
    display: block !important;
    position: fixed !important;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    width: 320px;
    max-width: 85vw;
    overflow-y: auto;
    text-align: left;
    transform: translateX(-100%);
    transition: transform 0.4s ease;
  }
  .w-nav.is-open .w-nav-menu {
    transform: none;
  }
  .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s;
  }
  .w-nav.is-open ~ .nav-backdrop,
  html.nav-locked .nav-backdrop {
    opacity: 1;
    visibility: visible;
  }
  html.nav-locked,
  html.nav-locked body {
    overflow: hidden;
  }
}
@media screen and (min-width: 992px) {
  .nav-backdrop { display: none; }
}

/* ---- forms ---- */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  html.js .reveal,
  html.js .wrap-right,
  html.js .work-steps-wrap,
  .wrap-right .image-cover {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html.js .work-steps-wrap .primary-step-line { width: 100%; transition: none; }
  html.js .work-steps-wrap .step-circle-opacity { transform: none; transition: none; }
}