/* Works Page Styles */

/* Lenis Smooth Scrolling */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* Image Cover */
.g_image_cover {
  visibility: visible;
  opacity: 1;
  display: block;
}

/* Preloader */
.preloader_wrap {
  display: block;
}

/* Contact Form Styles */
.radiocheck-field input:focus-visible:checked~.radiocheck-custom,
.radiocheck-field input:checked~.radiocheck-custom {
  background-color: var(--swatch--white);
  color: var(--swatch--black);
}

.radiocheck-group .radio-field input:checked~.radio-field,
.checkbox-group .checkbox-field input:checked~.checkbox-field {
  background-color: var(--swatch--black);
}

.radiocheck-group .radio-field input:checked+.radio-label,
.checkbox-group .checkbox-field input:checked+.checkbox-label {
  color: var(--swatch--black);
}

.radio-button,
.checkbox-input,
.checkbox-label,
.radio-label {
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

/* Field: Select */
[data-validate] select:has(option[value=""]:checked) {
  color: rgba(19, 19, 19, 0.3);
}

.contact_overlay_close {
  opacity: 0;
  visibility: hidden;
}

/* CSS Variables and Grid System */
:root {
  --column-count: 12;
  --max-width--full: calc(100vw - (var(--site-margin--main) * 2));
  --site-width--inner: calc(var(--site-width--main) - (var(--site-margin--main) * 2));
  --grid-width: min(var(--site-width--inner), var(--max-width--full));
  --grid-gap-total: calc(var(--grid-gap--main) * (var(--column-count) - 1));
  --column-width: calc((var(--grid-width) - var(--grid-gap-total)) / var(--column-count) + var(--grid-gap--main));
  --max-width--small: calc(var(--column-width) * (var(--column-count) - 2) - var(--grid-gap--main));
  --max-width--main: calc(var(--column-width) * var(--column-count) - var(--grid-gap--main));
  --column-width--1: calc(var(--column-width) * 1 - var(--grid-gap--main));
  --column-width--2: calc(var(--column-width) * 2 - var(--grid-gap--main));
  --column-width--3: calc(var(--column-width) * 3 - var(--grid-gap--main));
  --column-width--4: calc(var(--column-width) * 4 - var(--grid-gap--main));
  --column-width--5: calc(var(--column-width) * 5 - var(--grid-gap--main));
  --column-width--6: calc(var(--column-width) * 6 - var(--grid-gap--main));
  --column-width--7: calc(var(--column-width) * 7 - var(--grid-gap--main));
  --column-width--8: calc(var(--column-width) * 8 - var(--grid-gap--main));
  --column-width--9: calc(var(--column-width) * 9 - var(--grid-gap--main));
  --column-width--10: calc(var(--column-width) * 10 - var(--grid-gap--main));
  --column-width--11: calc(var(--column-width) * 11 - var(--grid-gap--main));
  --column-width--12: calc(var(--column-width) * 12 - var(--grid-gap--main));
  --column-margin--1: calc(var(--column-width) * 1);
  --column-margin--2: calc(var(--column-width) * 2);
  --column-margin--3: calc(var(--column-width) * 3);
  --column-margin--4: calc(var(--column-width) * 4);
  --column-margin--5: calc(var(--column-width) * 5);
  --column-margin--6: calc(var(--column-width) * 6);
  --column-margin--7: calc(var(--column-width) * 7);
  --column-margin--8: calc(var(--column-width) * 8);
  --column-margin--9: calc(var(--column-width) * 9);
  --column-margin--10: calc(var(--column-width) * 10);
  --column-margin--11: calc(var(--column-width) * 11);
  --column-margin--12: calc(var(--column-width) * 12);
  --breakout-start: [full-start] minmax(0, 1fr) [content-start];
  --breakout-end: [content-end] minmax(0, 1fr) [full-end];
  --grid-breakout-single: var(--breakout-start) minmax(0, var(--grid-width)) var(--breakout-end);
  --grid-breakout: var(--breakout-start) repeat(var(--column-count), minmax(0, calc((var(--grid-width) - var(--grid-gap-total)) / var(--column-count)))) var(--breakout-end);
  --grid-main: repeat(var(--column-count), minmax(0, 1fr));
  --grid-1: repeat(1, minmax(0, 1fr));
  --grid-2: repeat(2, minmax(0, 1fr));
  --grid-3: repeat(3, minmax(0, 1fr));
  --grid-4: repeat(4, minmax(0, 1fr));
  --grid-5: repeat(5, minmax(0, 1fr));
  --grid-6: repeat(6, minmax(0, 1fr));
  --grid-7: repeat(7, minmax(0, 1fr));
  --grid-8: repeat(8, minmax(0, 1fr));
  --grid-9: repeat(9, minmax(0, 1fr));
  --grid-10: repeat(10, minmax(0, 1fr));
  --grid-11: repeat(11, minmax(0, 1fr));
  --grid-12: repeat(12, minmax(0, 1fr));

  /* Column Span Variables */
  --span-1: span 1 / span 1;
  --span-2: span 2 / span 2;
  --span-3: span 3 / span 3;
  --span-4: span 4 / span 4;
  --span-5: span 5 / span 5;
  --span-6: span 6 / span 6;
  --span-7: span 7 / span 7;
  --span-8: span 8 / span 8;
  --span-9: span 9 / span 9;
  --span-10: span 10 / span 10;
  --span-11: span 11 / span 11;
  --span-12: span 12 / span 12;

  --animation-primary: cubic-bezier(0.83, 0, 0.17, 1);
  --animation-secondary: cubic-bezier(0.16, 1, 0.3, 1);

  /* Column Start Position Variables */
  --start-1: 1;
  --start-2: 2;
  --start-3: 3;
  --start-4: 4;
  --start-5: 5;
  --start-6: 6;
  --start-7: 7;
  --start-8: 8;
  --start-9: 9;
  --start-10: 10;
  --start-11: 11;
  --start-12: 12;

  --font-weight--inherit: inherit;
  --font-weight--100: 100;
  --font-weight--200: 200;
  --font-weight--300: 300;
  --font-weight--400: 400;
  --font-weight--500: 500;
  --font-weight--600: 600;
  --font-weight--700: 700;
  --font-weight--800: 800;
  --font-weight--900: 900;
  --text-transform--none: none;
  --text-transform--uppercase: uppercase;
  --text-transform--capitalize: capitalize;
  --text-transform--lowercase: lowercase;
  --text-transform--inherit: inherit;
}

/* Base Styles */
body {
  font-weight: var(--text-main--font-weight);
  text-transform: var(--text-main--text-transform);
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  -webkit-text-rendering: optimizeSpeed;
  text-rendering: optimizeSpeed;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
label,
figure,
blockquote {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin-top: 0;
  margin-bottom: 0;
}

button {
  background-color: unset;
  padding: unset;
  text-align: inherit;
  cursor: pointer;
}

video {
  width: 100%;
  object-fit: cover;
}

video.wf-empty {
  padding: 0;
}

svg {
  display: block;
}

section,
header,
footer {
  position: relative;
}

@media (prefers-color-scheme: light) {
  option {
    color: black;
  }
}

img::selection {
  background: transparent;
}

a:not([class]) {
  text-decoration: underline;
}

.w-richtext a {
  position: relative;
  z-index: 4;
}

/* Utility Classes */
.u-margin-trim> :first-child,
.u-margin-trim> :not(:not(.w-condition-invisible) ~ :not(.w-condition-invisible)),
.u-rich-text>*:first-child,
.u-rich-text .w-richtext>*:first-child {
  margin-top: 0;
}

.u-margin-trim> :last-child,
.u-margin-trim> :not(:has(~ :not(.w-condition-invisible))),
.u-rich-text>*:last-child,
.u-rich-text .w-richtext>*:last-child {
  margin-bottom: 0;
}

.u-hide-if-empty:empty,
.u-hide-if-empty:not(:has(> *:not(.w-condition-invisible))),
.u-hide-if-empty-cms:not(:has(.w-dyn-item)),
.u-hide-rich-text-media>*:not(h1, h2, h3, h4, h5, h6, p, blockquote),
.u-embed-js,
.u-embed-css {
  display: none !important;
}

.u-line-clamp-1,
.u-line-clamp-2,
.u-line-clamp-3,
.u-line-clamp-4 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.u-line-clamp-2 {
  -webkit-line-clamp: 2;
}

.u-line-clamp-3 {
  -webkit-line-clamp: 3;
}

.u-line-clamp-4 {
  -webkit-line-clamp: 4;
}

/* Focus Styles */
[tabindex]:focus-visible,
a:focus-visible,
button:focus-visible,
.w-checkbox-input--inputType-custom.w--redirected-focus,
.w-form-formradioinput--inputType-custom.w--redirected-focus {
  outline: 0.125rem solid #5E9ED6;
}

.w-checkbox-input--inputType-custom.w--redirected-focus,
.w-form-formradioinput--inputType-custom.w--redirected-focus {
  box-shadow: none;
}

/* Padding Utilities */
[data-padding-top="none"] {
  padding-top: var(--padding-vertical--none);
}

[data-padding-bottom="none"] {
  padding-bottom: var(--padding-vertical--none);
}

[data-padding-top="small"] {
  padding-top: var(--padding-vertical--small);
}

[data-padding-bottom="small"] {
  padding-bottom: var(--padding-vertical--small);
}

[data-padding-top="main"] {
  padding-top: var(--padding-vertical--main);
}

[data-padding-bottom="main"] {
  padding-bottom: var(--padding-vertical--main);
}

[data-padding-top="large"] {
  padding-top: var(--padding-vertical--large);
}

[data-padding-bottom="large"] {
  padding-bottom: var(--padding-vertical--large);
}

/* Webflow Design Mode */
.wf-design-mode .g_clickable_wrap {
  z-index: 0;
}

.g_clickable_wrap a[href="#"] {
  display: none;
}

.g_clickable_wrap a[href="#"]~button {
  display: block;
}

/* Grid Layout */
[data-column-span="1"] {
  grid-column: var(--span-1);
}

[data-column-span="2"] {
  grid-column: var(--span-2);
}

[data-column-span="3"] {
  grid-column: var(--span-3);
}

[data-column-span="4"] {
  grid-column: var(--span-4);
}

[data-column-span="5"] {
  grid-column: var(--span-5);
}

[data-column-span="6"] {
  grid-column: var(--span-6);
}

[data-column-span="7"] {
  grid-column: var(--span-7);
}

[data-column-span="8"] {
  grid-column: var(--span-8);
}

[data-column-span="9"] {
  grid-column: var(--span-9);
}

[data-column-span="10"] {
  grid-column: var(--span-10);
}

[data-column-span="11"] {
  grid-column: var(--span-11);
}

[data-column-span="12"] {
  grid-column: var(--span-12);
}

[data-column-start="1"] {
  grid-column-start: var(--start-1);
}

[data-column-start="2"] {
  grid-column-start: var(--start-2);
}

[data-column-start="3"] {
  grid-column-start: var(--start-3);
}

[data-column-start="4"] {
  grid-column-start: var(--start-4);
}

[data-column-start="5"] {
  grid-column-start: var(--start-5);
}

[data-column-start="6"] {
  grid-column-start: var(--start-6);
}

[data-column-start="7"] {
  grid-column-start: var(--start-7);
}

[data-column-start="8"] {
  grid-column-start: var(--start-8);
}

[data-column-start="9"] {
  grid-column-start: var(--start-9);
}

[data-column-start="10"] {
  grid-column-start: var(--start-10);
}

[data-column-start="11"] {
  grid-column-start: var(--start-11);
}

[data-column-start="12"] {
  grid-column-start: var(--start-12);
}

/* Hover Effects */
[data-underline-hover]::before,
[data-underline-hover]::after {
  content: "";
  position: absolute;
  bottom: -0.2em;
  left: 0;
  width: 100%;
  height: 0.1em;
  background-color: var(--swatch--white);
  transition: transform 0.725s var(--animation-primary);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}

[data-underline-hover="black"]::before,
[data-underline-hover="black"]::after {
  background-color: var(--swatch--black);
  bottom: 0em;
}

[data-underline-hover]::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
  transition-delay: 0.2s;
}

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

.g_circle {
  transition: transform 0.545s var(--animation-secondary), background-color 0.3s var(--animation-secondary);
}

/* Works item hover */
@media (min-width: 1060px) {
  .works_item_wrap:hover,
  .works_item_wrap:focus-visible {
    & .works_content_cta {
      transform: translateY(0%);
    }

    & .works_content_year {
      transform: translateY(-100%)
    }
  }

  .works_content_cta,
  .works_content_year {
    transition: transform 0.545s var(--animation-secondary);
  }
}

@media (min-width: 768px) {
  [data-underline-hover]:hover::before {
    transform-origin: right;
    transform: scaleX(0) rotate(0.001deg);
    transition-delay: 0s;
  }

  [data-underline-hover]:hover::after {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
    transition-delay: 0.2s;
  }

  .g_link[data-link-hover]:not([data-link-hover="black"]):hover .g_circle,
  .btn_default_wrap[data-link-hover]:not([data-link-hover="black"]):hover .g_circle {
    transform: scale(0.6);
    background-color: var(--swatch--white);
  }

  .g_link[data-link-hover="black"]:hover .g_circle,
  .btn_default_wrap[data-link-hover="black"]:hover .g_circle {
    transform: scale(0.6);
    background-color: var(--swatch--black);
  }

  [data-link] {
    text-shadow: 0px 1em 0px var(--swatch--white);
    transition: transform 0.545s var(--animation-secondary);
  }

  [data-link="black"] {
    text-shadow: 0px 1em 0px var(--swatch--black);
  }

  [data-link="black"] .g_circle {
    background-color: var(--swatch--black);
  }

  [data-link-hover]:hover [data-link] {
    transform: translateY(-1em);
  }

  /* Hover effects for container */
  [data-hover-container]:hover,
  [data-hover-container]:focus-visible {
    & [data-hover-gradient] {
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
      will-change: backdrop-filter;
      background-color: rgba(0, 0, 0, 0.5);
    }

    & [data-hover-cover] {
      transform: scale(1);
      opacity: 1;
    }

    & [data-hover-image] {
      transform: scale(1.1);
    }
  }
}

/* Base transitions for elements */
[data-hover-image] {
  transition: transform 0.875s var(--animation-secondary);
  transform: scale(1);
}

[data-hover-cover] {
  transform: scale(0.6);
  opacity: 0;
  transform-origin: center;
  transition: transform 0.875s var(--animation-secondary), opacity 0.5s var(--animation-secondary)
}

[data-hover-gradient] {
  transition: all 0.2s;
  background-color: rgba(0, 0, 0, 0);
}

/* Works Collection Layout */
.works_collection_list {
  & .works_collection_item:nth-child(6n + 1) {
    grid-column: var(--span-6);
  }

  & .works_collection_item:nth-child(6n + 2) {
    grid-column: var(--span-6);
    grid-column-start: var(--start-7);
  }

  & .works_collection_item:nth-child(6n + 3) {
    grid-column: var(--span-5);
  }

  & .works_collection_item:nth-child(6n + 4) {
    grid-column: var(--span-6);
    grid-column-start: var(--start-7);
  }

  & .works_collection_item:nth-child(6n + 5) {
    grid-column: var(--span-6);
  }

  & .works_collection_item:nth-child(6n + 6) {
    grid-column: var(--span-5);
    grid-column-start: var(--start-8);
  }
}

@media (max-width: 767px) {
  .works_collection_list {
    & .works_collection_item:nth-child(6n + 1) {
      grid-column: var(--span-10);
    }

    & .works_collection_item:nth-child(6n + 2) {
      grid-column: var(--span-9);
      grid-column-start: var(--start-4);
    }

    & .works_collection_item:nth-child(6n + 3) {
      grid-column: var(--span-10);
      grid-column-start: var(--start-2);
    }

    & .works_collection_item:nth-child(6n + 4) {
      grid-column: var(--span-9);
      grid-column-start: var(--start-1);
    }

    & .works_collection_item:nth-child(6n + 5) {
      grid-column: var(--span-9);
      grid-column-start: var(--start-4);
    }

    & .works_collection_item:nth-child(6n + 6) {
      grid-column: var(--span-9);
      grid-column-start: var(--start-1);
    }
  }
}

@media (min-width: 768px) and (max-width: 992px) {
  .works_collection_list {
    & .works_collection_item:nth-child(6n + 1) {
      grid-column: var(--span-6);
    }

    & .works_collection_item:nth-child(6n + 2) {
      grid-column: var(--span-6);
      grid-column-start: var(--start-7);
    }

    & .works_collection_item:nth-child(6n + 3) {
      grid-column: var(--span-6);
    }

    & .works_collection_item:nth-child(6n + 4) {
      grid-column: var(--span-6);
      grid-column-start: var(--start-7);
    }

    & .works_collection_item:nth-child(6n + 5) {
      grid-column: var(--span-6);
    }

    & .works_collection_item:nth-child(6n + 6) {
      grid-column: var(--span-6);
      grid-column-start: var(--start-7);
    }
  }
}

/* Orientation Styles */
[data-orientation=portrait] {
  aspect-ratio: 0.736 / 1;
}

[data-orientation=landscape] {
  aspect-ratio: 16 / 11;
}

/* Navbar Mini */
.navbar_mini_wrap>* {
  visibility: hidden;
}

/* Image Animations */
[data-image],
.testimonials_aside_image {
  will-change: transform;
}

.overflow-hidden {
  overflow: hidden;
}

/* Preloader Animation */
.preloader_svg {
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* CMS Filter */
.works_bottom_filterbtn::before {
  content: "";
  background-color: var(--swatch--black);
  width: 6px;
  height: 6px;
  display: inline-block;
  margin-right: 0.4em;
  transition: transform 0.6s var(--animation-secondary);
  transform: scaleX(0);
  transform-origin: right;
}

.works_bottom_filterbtn[data-filter-status="active"]::before {
  transform: scaleX(1);
  transform-origin: left;
}

.works_bottom_filterbtn:hover {
  color: var(--swatch--black)
}

.works_bottom_filterbtn {
  transition: color 0.35s
}

.works_bottom_filterbtn[data-filter-status="active"] {
  color: var(--swatch--black);
}

/* Filter List Item */
.hero_works_item[data-filter-status="active"] {
  transition: opacity 0.875s var(--animation-secondary), transform 0.875s var(--animation-secondary);
  transform: scale(1) rotate(0.001deg);
  opacity: 1;
  visibility: visible;
  position: relative;
}

.hero_works_item[data-filter-status="transition-out"] {
  transition: opacity 0.6s var(--animation-secondary), transform 0.6s var(--animation-secondary);
  transform: scale(0.9) rotate(0.001deg);
  opacity: 0;
  visibility: visible;
}

.hero_works_item[data-filter-status="not-active"] {
  transform: scale(0.9) rotate(0.001deg);
  opacity: 0;
  visibility: hidden;
  position: absolute;
}

/* Split Text */
.split-parent {
  overflow: hidden;
  margin-top: -0.04em;
}

.split-child {
  will-change: transform;
  padding-bottom: 0.04em;
}

/* Styleguide Guide */
html:not(.wf-design-mode) .styleguide_guide_wrap {
  display: none;
}

.styleguide_guide_layout {
  counter-reset: gridguides;
}

.styleguide_guide_layout>div::before {
  counter-increment: gridguides;
  content: counter(gridguides);
}

/* Hide Scrollbar */
html.hide-scrollbar {
  overflow: auto;
  scrollbar-width: none;
}

html.hide-scrollbar::-webkit-scrollbar {
  display: none;
}