.carousel-project-image img,
.work-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Orange highlight ring on bullet point nav for hover + focus states */
.centered-slider-bullet::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 100em;
  z-index: -1;
  border: 1px solid #FF4C24;
  transition: all 0.5s cubic-bezier(0.65, 0.05, 0, 1);
}

.centered-slider-bullet:hover::after,
.centered-slider-bullet.active::after,
.centered-slider-bullet:focus::after {
  inset: -5px;
}

/* Fade non-active slides */
.centered-slider-row:has(.centered-slider-slide.active) .centered-slider-slide:not(.active) {
  opacity: 0.45;
}

/* Little (orange) corners on each slide */
/* https://css-tip.com/corner-only-border-image/ */
.centered-slider-slide::after {
  --size: 1em;
  /* corner size */
  --width: 1px;
  /* border width */
  --gap: 0.5em;
  /* gap */
  --color: #FF4C24;
  content: '';
  position: absolute;
  inset: calc(var(--gap) * -1);
  z-index: 1;
  opacity: 0;
  padding: calc(var(--gap) + var(--width));
  outline: var(--width) solid var(--color);
  outline-offset: calc(var(--gap)/-1);
  mask:
    conic-gradient(at var(--size) var(--size), #0000 75%, #000 0) 0 0/calc(100% - var(--size)) calc(100% - var(--size)),
    linear-gradient(#000 0 0) content-box;
  transition: all 0.4s cubic-bezier(0.65, 0.05, 0, 1);
}

.centered-slider-slide.active::after {
  outline-offset: calc(-1*var(--width));
  opacity: 1;
}

.pe--spline--loader {
  position: fixed;
  width: 100vw;
  height: 100dvh;
}

.pe--spline--loader canvas.spline--canvas {
  width: 100% !important;
  height: 100% !important;
}

.site-nav-toggle {
  cursor: pointer
}

.site-nav-toggle .menu-toggle-svg circle {
  transition: opacity .2s ease
}

.site-nav-toggle.active .toggle-lines .menu-toggle-svg circle:nth-child(odd):not(:nth-child(5)),
.site-nav-toggle:hover .menu-toggle-svg circle:nth-child(odd):not(:nth-child(5)) {
  opacity: 0.2
}

.site-nav-toggle .toggle-lines {
  transform-origin: center center;
  transition: all .75s cubic-bezier(0.625, 0.05, 0, 1);
}

.site-nav-toggle.active .toggle-lines {
  transform: rotate(-135deg);
}

.site-nav-wrap {
  transition: all .75s cubic-bezier(0.625, 0.05, 0, 1);
  overflow: hidden;

}

.site-navigation {
  transition: width .75s cubic-bezier(0.625, 0.05, 0, 1)
}

.site-navigation:has([data-menu="open"]) {
  width: 420px !important;
}

@media only screen and (max-width: 550px) {
  .site-navigation:has([data-menu="open"]) {
    width: 100% !important;
  }

}

.site-menu[data-menu=close] .site-nav-wrap {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.site-menu[data-menu=open] .site-nav-wrap {
  max-height: 460px;
  padding-top: 13.5px;
  padding-bottom: 13.5px;
}

.site-navigation .main-menu {
  opacity: 0;
  transform: translateY(20px);
  transition: all .75s cubic-bezier(0.625, 0.05, 0, 1);
}

.site-navigation .site-menu[data-menu=open] .main-menu {
  opacity: 1;
  transform: translateY(0px);
}

.text_line.centered-line {
  text-align: center !important;
}

.text_line.right-line {
  text-align: right !important;
}

[data-text-anim=linesMask] .text_char {
  opacity: .1;
}

[data-text-anim="charsUp"] .text_line,
[data-text-anim="wordsUp"] .text_line {
  overflow: hidden
}

[data-text-anim="charsUp"] .text_char,
[data-text-anim="wordsUp"] .text_word {
  transform: translateY(100%)
}

a.primary-button svg.button-icon-svg {
  transition: all .3s cubic-bezier(0.35, 1.5, 0.6, 1)
}

a.primary-button:hover svg.button-icon-svg:not(.clone) {
  transform: translateX(31px);
}

a.primary-button:hover svg.button-icon-svg.clone {
  transform: translateY(-50%) translateX(11px);
}

.info-box::after {
  --size: 2em;
  /* corner size */
  --width: 1px;
  /* border width */
  --gap: 0.5em;
  /* gap */
  --color: #FF4C24;
  content: '';
  position: absolute;
  inset: calc(var(--gap) * -1.5);
  z-index: 1;
  opacity: 1;
  padding: calc(var(--gap) + var(--width));
  outline: var(--width) solid var(--color);
  outline-offset: calc(var(--gap)/-1);
  mask:
    conic-gradient(at var(--size) var(--size), #0000 75%, #000 0) 0 0/calc(100% - var(--size)) calc(100% - var(--size)),
    linear-gradient(#000 0 0) content-box;
  transition: all 0.4s cubic-bezier(0.65, 0.05, 0, 1);
  border-radius: 21px;
  pointer-events: none;
}

.info-box[data-anim=fadeUp]::after {
  opacity: 0;
  --size: 3em;
}

.info-box.anim-start[data-anim=fadeUp]::after {
  opacity: 1;
  --size: 2em;
}

.our-services-section.services .service-container:not([data-service="1"]) {
  position: absolute;
  top: 0;
  opacity: 0;
}

@media only screen and (max-width: 550px) {
  .our-services-section.services .service-container:not([data-service="1"]) {
    position: relative;
    opacity: 1;

  }
}

[data-wf-id] .our-services-section.services .service-container {
  position: relative;
  opacity: 1;
}

/* This is optional! Only add if you're NOT going to use a CMS list. 
The below snippet will stack your items in the Webflow designer and editor only, so you can edit content easier. */

.wf-design-mode .motionpath-content-list,
.w-editor .motionpath-content-list {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: scroll;
}

.wf-design-mode .motionpath-content-item,
.w-editor .motionpath-content-item {
  position: relative;
}

a.w-webflow-badge {
  display: none !important;
}

[data-text-anim=justifyExpand] .justify_line {
  display: flex !important;
  justify-content: center;
  gap: 0.25em;
}

[data-text-anim=justifyExpand] .justify_line.expanded {
  justify-content: space-between;
}

.work-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

section {
  pointer-events: none;
}

section>div>div:has(*) {
  pointer-events: all
}

.pin-spacer {
  pointer-events: none;

}