/* -- Font smoothing --  */

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* -- Scaling System by Osmo [https://osmo.supply/] --  */

/* Desktop */
:root {
  --size-unit: 16;
  /* body font-size in design - no px */
  --size-container-ideal: 1920;
  /* screen-size in design - no px */
  --size-container-min: 992px;
  --size-container-max: 2560px;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
  --ease-smooth: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --size-container-ideal: 834;
    /* screen-size in design - no px */
    --size-container-min: 768px;
    --size-container-max: 991px;
  }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --size-container-ideal: 550;
    /* screen-size in design - no px */
    --size-container-min: 480px;
    --size-container-max: 767px;
  }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
  :root {
    --size-container-ideal: 390;
    /* screen-size in design - no px */
    --size-container-min: 320px;
    --size-container-max: 479px;
  }
}

body {
  font-size: var(--size-font);
}

.container {
  max-width: var(--size-container);
}

.container.medium {
  max-width: calc(var(--size-container) * 0.85);
}

.container.small {
  max-width: calc(var(--size-container) * 0.7);
}

/* -- Underline Link --  */

[data-underline-link] {
  text-decoration: none;
  position: relative;
}

[data-underline-link]::before,
[data-underline-link="alt"]::before,
[data-underline-link="alt"]::after {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}

[data-underline-link="alt"]::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
  transition-delay: 0.3s;
}

[data-underline-link="alt"]::after {
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
  transition-delay: 0s;
}

@media (hover: hover) and (pointer: fine) {

  [data-hover]:hover [data-underline-link]::before,
  [data-underline-link]:hover::before {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
  }

  [data-hover]:hover [data-underline-link="alt"]::before,
  [data-underline-link="alt"]:hover::before {
    transform-origin: right;
    transform: scaleX(0) rotate(0.001deg);
    transition-delay: 0s;
  }

  [data-hover]:hover [data-underline-link="alt"]::after,
  [data-underline-link="alt"]:hover::after {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
    transition-delay: 0.3s;
  }
}

/* -- Scaling Numbers --  */

[data-odometer-element] {
  display: inline-flex;
  align-items: center;
  font-variant-numeric: tabular-nums;
}

[data-odometer-part="mask"],
[data-odometer-part="static"] {
  display: inline-block;
  overflow: clip;
  padding: 0.02em;
  margin: -0.02em;
}

[data-odometer-part="roller"] {
  display: block;
  white-space: pre;
  text-align: center;
  will-change: transform;
}

[data-odometer-part="static"] {
  display: inline-block;
}

/* Global attribute to easily control easing and timing of all targetted elements */
[data-button-anim-target] {
  transition: transform 0.525s cubic-bezier(0.625, 0.05, 0, 1);
}

/* Fake a duplicate text element using text shadow without blur  */
/* We save the distance in a variable for easy use in the CSS animation */
.btn-icon-content__text {
  --text-duplicate-distance: 1.5em;
  text-shadow: 0px var(--text-duplicate-distance) currentColor;
}

/* Only apply hover animations if they are actually not supported */
@media (hover:hover) and (pointer:fine) {

  .btn-icon-link:hover .btn-icon-content__text {
    transform: translate(0px, calc(-1 * var(--text-duplicate-distance)));
  }

  .btn-icon-link:hover .btn-icon-icon__bg {
    transform: rotate(90deg);
  }

  .btn-icon-link:hover .btn-icon-icon__arrow {
    transform: translate(200%, 0px);
  }

  .btn-icon-link:hover .btn-icon-content__bg {
    transform: translate(0px, 0%) rotate(0deg);
  }

}

.link-arrow-img {
  transition: transform 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
}

.link-with-arrow:hover .link-arrow-img {
  transform: translateX(0.25em);
}

.footer_social-media-link {
  opacity: 0.6;
  transition: opacity 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
}

.footer_social-media-link:hover {
  opacity: 1;
}

[data-highlight-marker-reveal] .highlight-marker-word {
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.accordion_list::before {
  content: "";
  display: block;
  position: absolute;
  height: 1px;
  background-color: var(--color-gray-dark);
  top: 0;
  width: 100%;
  pointer-events: none;
  z-index: 0;
}

.accordion_details::after {
  content: "";
  display: block;
  position: absolute;
  height: 1px;
  width: 100%;
  pointer-events: none;
  bottom: 0;
  background-color: var(--color-gray-dark);
  z-index: 0;
}

.accordion_details.is-active .accordion_content-inner {
  animation: accordion-fade-in 0.25s var(--ease-opacity) both;
  animation-delay: 0.1s;
}

.accordion_icon {
  overflow: visible !important;
}

.accordion_icon-vertical {
  transform-box: fill-box;
  transform-origin: center center;
  transition: rotate 0.5s var(--ease-smooth);
}

.accordion_details.is-active .accordion_icon-vertical {
  rotate: 90deg;
}

.accordion_icon-horizontal {
  transform-box: fill-box;
  transform-origin: right center;
  transition: translate 0.45s var(--ease-smooth), scale 0.35s var(--ease-out-gentle);
}

.accordion_details.is-active .accordion_icon-horizontal {
  translate: 50% 0 0;
  scale: 0 1;
}

@keyframes accordion-fade-in {
  0% {
    opacity: 0;
    translate: 0 -0.5em 0;
  }

  to {
    opacity: 1;
    translate: 0 0 0;
  }
}

:root {
  --color-gray-dark: #A4A7AE;
  --ease-opacity: cubic-bezier(.25, .46, .45, .94);
  --ease-smooth: cubic-bezier(.65, .05, .36, 1);
  --ease-out-gentle: cubic-bezier(.25, .1, .25, 1);
}

[data-marquee] {
  overflow: hidden;
}

[data-marquee-track] {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
}

/* Hide Preloader inside Webflow */
.wf-editor-mode .preloader,
.wf-design-mode .preloader {
  display: none;
}

[data-marquee-track] img {
  -webkit-user-drag: none;
  user-select: none;
}

/* -- Mobile Menu -- */

.menu {
  --menu-animation-speed: 0.5s;
}

.menu:not(.is--active) {
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear var(--menu-animation-speed);
}

.wf-editor-mode .menu[data-menu-open="true"],
.wf-design-mode .menu[data-menu-open="true"] {
  display: block;
  pointer-events: auto;
  visibility: visible;
}

.wf-editor-mode .menu[data-menu-open="true"] .menu_container,
.wf-design-mode .menu[data-menu-open="true"] .menu_container {
  clip-path: inset(0% 0% 0% 0%);
}

.menu.is--active .menu_container {
  clip-path: inset(0% 0% 0% 0%);
  transition: clip-path var(--menu-animation-speed) var(--ease-smooth);
}

.menu_container {
  will-change: clip-path;
  clip-path: inset(100% 0% 0% 0%);
  transition: clip-path var(--menu-animation-speed) var(--ease-smooth);
}

.menu.is--active .menu_backdrop {
  opacity: 1;
}

.menu_backdrop {
  opacity: 0;
  transition: opacity 0.25s var(--ease-smooth);
}

html.has--menu-open {
  .nav_menu-button-line:not(.is--close) {
    scale: 0 1;
    translate: -0.5em 0 0;

    &:nth-child(1) {
      transition-delay: 0s;
    }

    &:nth-child(2) {
      transition-delay: 0.05s;
    }

    &:nth-child(3) {
      transition-delay: 0.1s;
    }
  }

  .nav_menu-button-line.is--close {

    &:first-child {
      transform: rotate(45deg) scale(1, 1);
      transition-delay: 0.15s;
    }

    &:last-child {
      transform: rotate(-45deg) scale(1, 1);
      transition-delay: 0.2s;
    }
  }

  [data-menu-animate] {
    opacity: 1;
    translate: 0 0 0;
    transition-delay: 0s;
    transition-delay: calc((attr(data-menu-animate type(<number>)) * 0.037s) + 0.1s);
  }
}

.nav_menu-button-line:not(.is--close) {
  transition: scale 0.3s var(--ease-smooth), translate 0.3s var(--ease-smooth);
  transform-origin: left center;

  &:nth-child(1) {
    transition-delay: 0.25s;
  }

  &:nth-child(2) {
    transition-delay: 0.2s;
  }

  &:nth-child(3) {
    transition-delay: 0.15s;
  }
}

.nav_menu-button-line.is--close {
  transition: transform 0.3s var(--ease-smooth);
  transform-origin: center center;

  &:first-child {
    transform: rotate(45deg) scale(0, 1);
  }

  &:last-child {
    transform: rotate(-45deg) scale(0, 1);
  }
}

[data-menu-animate] {
  opacity: 0;
  translate: 0 2em 0;
  transition: opacity 0.3s var(--ease-smooth), translate 0.3s var(--ease-smooth);
}

.wf-editor-mode .menu[data-menu-open="true"] [data-menu-animate],
.wf-design-mode .menu[data-menu-open="true"] [data-menu-animate] {
  opacity: 1;
}

/* Menu Dropdown */

.menu_dropdown {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  overflow: hidden;
  transition: grid-template-rows var(--duration-normal, 0.45s) var(--cubic-default, cubic-bezier(0.525, 0, 0, 1));
}

.menu_dropdown-inner {
  min-height: 0;
  overflow: hidden;
}

.menu_dropdown-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.menu_dropdown-link {
  opacity: 0;
  transform: translate(1em, 0);
  transition:
    opacity var(--duration-normal, 0.45s) var(--cubic-default, cubic-bezier(0.525, 0, 0, 1)),
    transform var(--duration-normal, 0.45s) var(--cubic-default, cubic-bezier(0.525, 0, 0, 1));
}

[data-dropdown-toggle="open"]+.menu_dropdown {
  grid-template-rows: 1fr;
}

[data-dropdown-toggle="open"]+.menu_dropdown .menu_dropdown-link {
  opacity: 1;
  transform: translate(0, 0);
  transition-delay: calc(0.15s + var(--i, 0) * 0.06s);
}

[data-dropdown-toggle] .menu_link-icon {
  transition: transform var(--duration-normal, 0.45s) var(--cubic-default, cubic-bezier(0.525, 0, 0, 1));
}

.menu_link-icon.is--hover {
  transform: translateX(125%);
}

[data-dropdown-toggle="open"] .menu_link-icon.is--hover {
  transform: translateX(0);
}

[data-dropdown-toggle="open"] .menu_link-icon.is--default {
  transform: translateX(125%);
}

/* Field: Error */
[data-validate].is--error input,
[data-validate].is--error textarea {
  border-color: #FF4C24;
}

[data-validate].is--error .form-field-icon.is--error {
  opacity: 1;
}

/* Field: Success */
[data-validate].is--success .form-field-icon.is--success {
  opacity: 1;
}

/* Filter */

.filter_tag {
  transition: background-color 0.15s ease-out, color 0.15s ease-out;
}

.filter_tag:is(:hover, :focus-visible) {
  background-color: var(--soft-blue-gradient-1);
  transition-delay: 0.05s;
}

.filter_tag[aria-pressed="true"] {
  background-color: var(--black);
  color: var(--white);
}

[data-filter-pagination-button] {
  background-color: var(--white);
  color: var(--black);
  height: 3em;
  width: 3em;
  display: grid;
  place-items: center;
  text-align: center;
  transition: background-color 0.15s ease-out, color 0.15s ease-out;
}

[data-filter-pagination-button]:is(:hover, :focus-visible) {
  background-color: var(--soft-blue-gradient-1);
  transition-delay: 0.05s;
}

[data-filter-pagination-button][aria-pressed="true"] {
  background-color: var(--black);
  color: var(--white);
}

[data-filter-pagination-button-text] {
  font-size: 0.9375em;
  line-height: 1;
  letter-spacing: 0.01em;
}

@media screen and (max-width: 991px) {
  [data-filter-pagination-button] {
    height: 2em;
    width: 2em;
  }
}

/* Cases */

@media screen and (min-width: 991px) {
  .case_item-outer:nth-child(even) .case_item {
    grid-column: 2 / 3 span !important;
    grid-row: 1 !important;
  }

  .case_item-outer:nth-child(even) .case_item.second {
    grid-column: 1 / 1 span !important;
    grid-row: 1 !important;
  }
}

/* Dropdown */

:root {
  --dd-gap: 2.5em;
  --dd-pad-bottom: 6em;
  --dd-offset: 0em;
  --dd-bg-color: #fff;
  --dd-overlay: rgba(0, 0, 0, 0.3);
  --dd-ease: cubic-bezier(0.525, 0, 0, 1);
  --dd-fast: 0.2s;
  --dd-normal: 0.45s;
}

@media screen and (min-width: 768px) {
  [data-dropdown-nav] .nav_container {
    position: relative;
    z-index: 2;
  }

  .nav_dropdown {
    position: relative;
    display: flex;
    align-items: center;
  }

  .nav_dropdown-panel {
    position: absolute;
    top: 100%;
    left: var(--dd-offset);
    padding-top: var(--dd-gap);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity var(--dd-fast) ease,
      visibility var(--dd-fast) ease;
  }

  .nav_dropdown-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75em;
  }

  .nav_dropdown-link {
    white-space: nowrap;
    opacity: 0;
    transform: translate(2em, 0);
    transition:
      opacity var(--dd-normal) var(--dd-ease),
      transform var(--dd-normal) var(--dd-ease);
  }

  .nav_dropdown-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    height: 0;
    background-color: var(--dd-bg-color);
    pointer-events: none;
    transition: height var(--dd-normal) var(--dd-ease);
  }

  .nav_page-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 0;
    height: 150vh;
    background-color: var(--dd-overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dd-fast) var(--dd-ease);
  }

  .nav_dropdown[data-dropdown="open"] .nav_dropdown-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .nav_dropdown[data-dropdown="open"] .nav_dropdown-link {
    opacity: 1;
    transform: translate(0, 0);
    transition-delay: calc(0.18s + var(--i, 0) * 0.04s);
  }

  [data-dropdown-nav]:has([data-dropdown="open"]) .nav_dropdown-bg {
    height: var(--dd-bg-height, 20em);
    pointer-events: auto;
  }

  [data-dropdown-nav]:has([data-dropdown="open"]) .nav_page-bg {
    opacity: 1;
  }

  .underline-link_icon.is--hover,
  .underline-link_icon.is--default {
    transition: translate 0.4s var(--dd-ease);
  }

  .underline-link_icon.is--hover {
    translate: 0 -125% 0;
  }

  [data-dropdown-nav]:has([data-dropdown="open"]) .underline-link_icon.is--hover {
    translate: 0 0 0;
  }

  [data-dropdown-nav]:has([data-dropdown="open"]) .underline-link_icon.is--default {
    translate: 0 125% 0;
  }
}

@media screen and (max-width: 767px) {

  .nav_dropdown-panel,
  .nav_dropdown-bg,
  .nav_page-bg {
    display: none;
  }
}

/* Footer */

.footer_avatar-item::before {
  content: "";
  display: block;
  position: absolute;
  inset: -0.0625em;
  z-index: 1;
  box-shadow: inset 0 0 0 0.125em var(--white);
  border-radius: 4em;
}

.footer_avatar-item:first-child {
  right: -1em;
}

.footer_avatar-item:nth-child(2) {
  z-index: 2;
}

.footer_avatar-item:last-child {
  left: -1em;
}

/* Service Item */

.services_item {
  --border-color: var(--dark-grey);
  --hover-border-color: var(--white);
  --border-width: 1.5px;
  --ease: cubic-bezier(0.19, 1, 0.22, 1);
}

.services_item-border {
  border-top-width: var(--border-width);
  border-right-width: var(--border-width);
  border-bottom-width: var(--border-width);
  border-left-width: var(--border-width);
  background-color: var(--border-color);
  width: 100%;
  height: 100%;
  display: grid;
  mask-image: linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px), linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px);
  mask-size: auto, auto;
  mask-repeat: repeat, repeat;
  mask-clip: padding-box, border-box;
  mask-origin: padding-box, border-box;
  mask-composite: exclude;
  mask-mode: match-source, match-source;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0);
  mask-position: 0px 0px, 0px 0px;
}

.services_item-border-left,
.services_item-border-right {
  background-color: var(--hover-border-color);
  width: calc(100% + (var(--border-width) * 2));
  height: calc(100% + (var(--border-width) * 2));
  grid-area: 1 / 1;
  place-self: center;
}

.services_item-border-left {
  transform-origin: left top;
  scale: 0;
  transition: scale 0.5s var(--ease);
}

.services_item-border-right {
  transform-origin: right bottom;
  scale: 0;
  transition: scale 0.5s var(--ease);
}

@media screen and (min-width: 991px) {
  [data-hover]:is(:hover, :focus-visible) .services_item-border-left {
    scale: 1;
  }

  [data-hover]:is(:hover, :focus-visible) .services_item-border-right {
    scale: 1;
  }
}

@media screen and (max-width: 991px) {
  .services_item-border {
    border-radius: 0.75em;
  }

  .services_item.team .services_item-border {
    border-radius: 0;
  }
}
