/* ------------------------- Style ® Code by Fatos -------------------------------------------------- */

main {
   box-sizing: border-box;
   max-width: 100vw;
   background: var(--color-white);
}


.main-wrap {
   position: relative;
}

main.touch {
   position: relative;
   height: auto;
}

main.touch .main-wrap {
   position: relative;
}

@media screen and (max-width: 1024px) {
   main {
      position: relative;
   }
   .main-wrap {
      position: relative;
   }
}


/* ------------------------- Wrap Work Grid -------------------------------------------------- */

.section-wrap-work {
   background: var(--color-white);
	opacity: 1 !important;
}
section.section.work-grid.small-work-grid.grid-fade.grid-rows-part {
   padding: 0;
}
section.section.work-tiles.grid-fade.grid-columns-part,
section.section.work-tiles.grid-fade.grid-columns-part.visible {
   padding: 0;
}
/* ------------------------- Work Grid -------------------------------------------------- */

.work-grid .row { 
   align-items: center;
   color: unset;
   text-decoration: unset;
   padding: calc(var(--section-padding) / 3) 0;
}

.work-grid .work-items li {
   margin: 0;
   transition: var(--animation-smooth);
}

.work-grid .work-items .flex-col:nth-child(1) { /* Services */
   padding-left: calc(var(--container-padding) * 1);
   width: 38%;
   padding-top: .25em;
}
.work-grid .work-items .flex-col:nth-child(2) { /* Title */
   width: 44%;
   padding-top: .25em;
   font-weight: bold;
}
.work-grid .work-items .flex-col:nth-child(3) { /* Year */
   width: 18%;
   padding-top: .25em;
   padding-right: calc(var(--container-padding) * 1);
   text-align: right;
}

.work-grid .work-items h4 {
   position: relative;
   display: block;
   overflow: hidden;
   line-height: 1;
   transition: var(--animation-fast);
   transform: translateX(0) rotate(0.001deg);
}

.work-grid .work-items h4 span {
   position: relative;
   display: block;
   padding: .1em 0;
}

.work-grid .work-items a:hover h4 {
   transform: translateX(calc(var(--container-padding) * .1)) rotate(0.001deg);
}

.work-grid .work-items a p {
   transition: var(--animation-fast);  
   transform: translateX(0) rotate(0.001deg);
}

.work-grid .work-items a:hover:first-child p,
.work-grid .work-items a:hover p {
   transform: translateX(calc(var(--container-padding) * .1)) rotate(0.001deg);
}

.work-grid .work-items li a {
   transition: var(--animation-fast);
}

.work-grid .work-items:hover a {
   opacity: 1;
}

.work-grid .work-items a:hover {
   opacity: .33;
}

/* ------------------------- Work Grid - Large -------------------------------------------------- */

.large-work-grid {
   padding-top: 0;
   padding-bottom: 0;
}

.large-work-grid .work-items h4 {
   font-size: calc(clamp(3.25em, 7vw, 8em) * .75);
}

.large-work-grid .row { 
   padding: calc(var(--section-padding) / 3.5) 0 calc(var(--section-padding) / 3) 0;
}

.large-work-grid .work-items .flex-col:nth-child(1) {
   padding-left: calc(var(--container-padding) * 1);
   width: 70%;
}

.large-work-grid .work-items .flex-col:nth-child(2) {
   width: 30%;
   padding-left: var(--gap-padding);
   padding-top: 1em;
   padding-right: calc(var(--container-padding) * .5);
}

@media screen and (max-width: 1024px) {
   .large-work-grid {
      display: none;
   }
}
/* ------------------------- Work Grid - Small -------------------------------------------------- */

.small-work-grid {
   padding-top: 0;
   padding-bottom: 0;
}

.small-work-grid .row {
   padding: 2em 0 2em 0;
}

.small-work-grid .work-items li {
   max-height: 0;
   overflow: hidden;
}

.small-work-grid .work-items li.visible {
   max-height: calc(clamp(1.75em, 2.3vw, 2.5em) + 10.4em);
}

.small-work-grid .work-items {
   padding-inline-start: 0;
   padding-bottom: calc(var(--section-padding) * .5);
   margin-top: 20px;
}

@media screen and (max-width: 1024px) {
   .small-work-grid {
      display: none !important;
   }
}

/* ------------------------- Work Grid - Tiny -------------------------------------------------- */

.tiny-work-grid {
   padding-top: 0;
   padding-bottom: 0;
}

.tiny-work-grid .row {
   padding: 2em 0 2em 0;
}

.tiny-work-grid .work-items {
   padding-bottom: calc(var(--section-padding) * .75);
}

.tiny-work-grid .arrow {
   position: absolute;
   right: var(--container-padding);
   transform: translateY(.2em);
   background: var(--color-dark);
   width: 2em;
   height: 2em;
   border-radius: 50%;
   display: none;
   align-content: center;
   justify-content: center;
}

.tiny-work-grid .arrow svg {
   width: 35%;
   transform: rotate(-90deg);
}

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

   .archive-header h1 .count-nr {
      font-size: .45em;
   }

   .tiny-work-grid .container {
      padding: 0;
   }

   .tiny-work-grid .work-items a:hover {
      opacity: 1;
   }

   .tiny-work-grid .arrow {
      display: flex;
   }

   .tiny-work-grid .row {
      align-items: flex-start;
      padding: 2em 0 2.15em 0;
   }

   .tiny-work-grid .grid-sub-title .flex-col:nth-child(1) { display: none;}
   .tiny-work-grid .grid-sub-title .flex-col:nth-child(2) {width: 35% !important; order: 3;}
   .tiny-work-grid .grid-sub-title .flex-col:nth-child(3) {width: 52% !important; order: 2; padding-left: calc(var(--container-padding) * 1);}
   .tiny-work-grid .grid-sub-title .flex-col:nth-child(4) {width: 13% !important; order: 4;}

   .tiny-work-grid .work-items .flex-col:nth-child(1) {width: 100%; padding-bottom: .75em; order: 1;}
   .tiny-work-grid .work-items .flex-col:nth-child(2) {width: 35%; order: 3; padding-right: 1em;} 
   .tiny-work-grid .work-items .flex-col:nth-child(3) {width: 52%; order: 2; padding-right: 1em; padding-left: calc(var(--container-padding) * 1);} 
   .tiny-work-grid .work-items .flex-col:nth-child(4) {width: 13%; order: 4;} 

   .tiny-work-grid .work-items a:hover h4 {
      transform: translateX(0) rotate(0.001deg);
   }

   .tiny-work-grid .work-items a:hover p {
      transform: translateX(0) rotate(0.001deg);
   }

   .tiny-work-grid .work-items p {
      font-size: .9em;
   }

   .tiny-work-grid .stripe {
      opacity: .75;
   }
}

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

   .tiny-work-grid .row {
      align-items: flex-start;
      padding: 1.9em 0 1.9em 0;
   }

   .tiny-work-grid .work-items .flex-col:nth-child(1) {
      padding-bottom: .5em;
   }

   .tiny-work-grid .work-items h4 {
      font-size: 1.3em;
   }

   .tiny-work-grid .work-items p {
      font-size: .8em;
   }

   .tiny-work-grid .arrow {
      transform: translateY(-.2em);
   }
}

/* ------------------------- Work Grid - Sub Title Info -------------------------------------------------- */

.work-grid .grid-sub-title {
   width: 100%;
   display: flex;
   /* padding-bottom: var(--gap-padding); */
}

.work-grid .grid-sub-title h5 {
   margin: 0;
   width: 100%;
   font-weight: 400;
   font-size: 14px !important;
}

.work-grid .grid-sub-title .flex-col:nth-child(1) { /* Services */
   padding-left: calc(var(--container-padding) * 1);
   width: 38%;
}
.work-grid .grid-sub-title .flex-col:nth-child(2) { /* Title */
   width: 44%;
}
.work-grid .grid-sub-title .flex-col:nth-child(3) { /* Year */
   width: 18%;
   padding-right: calc(var(--container-padding) * 1);
   text-align: right;
}

/* Removed 4th column (was Location) for new three-column order. */

/* ------------------------- Large Work Grid - Sub Title Info -------------------------------------------------- */


.large-work-grid .grid-sub-title .flex-col:nth-child(1) {
   padding-left: calc(var(--container-padding) * 1);
   width: 70%;
}

.large-work-grid .grid-sub-title .flex-col:nth-child(2) {
   width: 30%;
   padding-left: var(--gap-padding);
   padding-right: calc(var(--container-padding) * 1);
}


/* ------------------------- Work Grid - Filter Row -------------------------------------------------- */

.work-filters {
   margin-top: calc(var(--section-padding) * -.25);
   padding-top: 0;
   padding-bottom: calc(var(--section-padding) / 2);
   opacity: 1 !important;
}

.work-filters .filter-row {
   width: 100%;
   padding: 0 var(--container-padding) 0 var(--container-padding);
   padding: 0;
   display: flex;
   justify-content: space-between;
}

.work-filters .filter-row .toggle-row {
   display: flex;
}

.work-filters .filter-row .toggle-row .btn {
   display: inline-flex;
   margin-right: .5em;
}

.work-filters .filter-row .grid-row {
   display: flex;
}

.work-filters .filter-row .grid-row .btn {
   display: inline-flex;
   margin-left: .5em;
}

@media screen and (max-width: 1024px) {
   .work-filters .filter-row .grid-row {
      display: none;
   }
}

@media screen and (max-width: 540px) {
   .work-filters .filter-row {
      padding: 0;
   }

   .work-filters .filter-row .toggle-row .btn .btn-text {
      margin-right: .15em;
   }
}

@media screen and (max-width: 460px) {
   .work-filters .filter-row .toggle-row .btn {
      font-size: .89em;
   }
}

@media screen and (max-width: 390px) {
   .work-filters .filter-row .toggle-row .btn {
      font-size: .83em;
   }
}

@media screen and (max-width: 380px) {
   .work-filters .filter-row .toggle-row .btn {
      font-size: .8em;
   }
}


/* ------------------------- Work Grid - After Center Btn -------------------------------------------------- */

.center-grid-btn {
   padding-top: calc(var(--section-padding) / 3);
   padding-bottom: calc(var(--section-padding) * 1);
}

.center-grid-btn-home {
   padding-top: calc(var(--section-padding) / 2);
   padding-bottom: 0;
}

.center-grid-btn-archive {
   padding-top: 0;
   padding-bottom: calc(var(--section-padding) * .75);
}

.center-grid-btn .grid-after-btn {
   display: flex;
   justify-content: center;
}

.center-grid-btn .grid-after-btn .btn-text {
   min-width: 10em;
}

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

   /* .center-grid-btn .btn,
   .center-grid-btn .btn-click {
      width: 100%;
   } */

}
/* ------------------------- Work Tiles -------------------------------------------------- */

.work-tiles {
   padding-top: 0;
}

.work-tiles .container {
   padding-left: calc(var(--container-padding) * .75);
   padding-right: calc(var(--container-padding) * .75);
}

.work-tiles ul {
   width: 100%;
   display: flex;
   flex-wrap: wrap;
   position: relative;
   padding: 0;
}

.work-tiles ul li {
   display: block;
   width: 50%;
   position: relative;
   overflow: hidden;
   height: 0;
   width: 0;
   transform: translateY(0%) rotate(0.001deg) scale(1);
   transition: opacity .3s ease-in .4s, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.work-tiles ul li.visible {
   height: auto;
   width: 50%;
}

.work-tiles ul li.tile-fade-out {
   opacity: 0;
   transform: translateY(5em) rotate(0.001deg);
   transition: opacity .25s ease-out, transform 0s linear .3s;
}

.work-tiles ul li.tile-fade-in {
   opacity: 1;
   transform: translateY(5em) rotate(0.001deg) scale(1);
}

.work-tiles ul li .single-tile-wrap {
   width: 100%;
   padding-bottom: calc(var(--section-padding) * 1);
   padding-left: calc(var(--container-padding) * .25);
   padding-right: calc(var(--container-padding) * .25);
}

.work-tiles ul li a { 
   align-items: center;
   color: unset;
   text-decoration: unset;
   overflow: hidden;
}

.work-tiles ul li a .flex-col:nth-child(1) {
   width: 100%;
   padding-bottom: var(--gap-padding);
}

.work-tiles ul li a .flex-col:nth-child(2) {
   width: 100%;
   padding-bottom: calc(var(--gap-padding) / 2);
}

.work-tiles ul li a .stripe {
   margin-top: calc(var(--gap-padding) / 2);
}

.work-tiles ul li a .flex-col:nth-child(3) { 
   width: 70%;
}

.work-tiles ul li a .flex-col:nth-child(4) {
   width: 30%;
   text-align: right;
}

.work-tiles ul li a .tile-image {
   width: 100%;
   position: relative;
   background: var(--color-lightgray);
   overflow: hidden;
}

.work-tiles ul li a .tile-image .overlay-image { 
   transform: scale(1) rotate(0.001deg);
   transition: var(--animation-primary);
   will-change: transform;
}

.work-tiles ul li a:hover .tile-image .overlay-image { 
   transform: scale(1.025) rotate(0.001deg);
}

.work-tiles ul li a .tile-image::before {
   display: block;
   content: "";
   padding-top: 100%;
}

.work-tiles ul li a h4 {
   position: relative;
   display: block;
   overflow: hidden;
   line-height: 1;
   transition: var(--animation-fast);
   transform: translateX(0) rotate(0.001deg);
   margin: 0;
}

.work-tiles ul li a h4 span {
   position: relative;
   display: block;
   padding: .1em 0;
}

@media screen and (max-width: 1024px) {
   .work-tiles ul li a h4 {
      font-size: calc(clamp(1.75em, 2.3vw, 2.5em) * 1.125);
   }
}

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

   .work-tiles ul li.visible {
      width: 100%;
   }

   .work-tiles .container {
      padding-left: var(--container-padding);
      padding-right: var(--container-padding);
   }

   .work-tiles ul li .single-tile-wrap {
      padding-left: 0;
      padding-right: 0;
   }

   .work-tiles ul li a:hover .tile-image .overlay-image { 
      transform: scale(1) rotate(0.001deg);
   }

   .work-tiles ul li a .flex-col:nth-child(2) {
      width: 100%;
      padding-bottom: calc(var(--section-padding) / 6);
   }
   
   .work-tiles ul li a .stripe {
      margin-top: calc(var(--section-padding) / 6);
   }
}


/* ------------------------- Work Grid - Fade -------------------------------------------------- */


.grid-fade {
   height: 0;
   overflow: hidden;
   transform: translateY(0%) rotate(0.001deg) scale(1);
   transition: opacity .3s ease-in .4s, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
   padding: 0;
}

.grid-fade.visible {
   height: auto;
}

.grid-fade.grid-fade-out {
   opacity: 0;
   transform: translateY(5em) rotate(0.001deg);
   transition: opacity .25s ease-out, transform 0s linear .3s;
}

.grid-fade.grid-fade-in {
   opacity: 1;
   transform: translateY(5em) rotate(0.001deg) scale(1);
}

@media screen and (max-width: 1024px) {
   .grid-fade {
      height: auto;
   }
}


/* ------------------------- Mouse Position Image -------------------------------------------------- */

.mouse-pos-list-image {
   width: 0;
   z-index: 25;
   position: fixed;
   pointer-events: none;
   transform: translate(-50%, -52%);
   display: block;
   left: 55%;
   overflow: hidden;
   transition: width .4s cubic-bezier(0.36, 0, 0.66, 0);
   left: 0%;
   will-change: transform, width;
}

.mouse-pos-list-image.active {
   border-radius: 0;
   width: clamp(10em, 27.5vw, 25em);
   transition: width .4s cubic-bezier(0.34, 1, 0.64, 1);
}

.mouse-pos-list-image-bounce {
   overflow: hidden;
   transform: scale(1) rotate(.001deg);
   transition: all .5s cubic-bezier(0.65, 0, 0.35, 1);
   will-change: transform;
}

.mouse-pos-list-image-bounce.active {
   transform: scale(1) rotate(.001deg);
}

.mouse-pos-list-image::before {
   display: block;
   content: "";
   padding-top: 100%;
}

.mouse-pos-list-image .mouse-pos-list-image-inner {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
} 

.mouse-pos-list-image .float-image-wrap {
   width: 100%;
   position: absolute;
   left: 0;
   top: 0;
   display: block;
   will-change: transform;
}

.mouse-pos-list-image .float-image-wrap .mouse-pos-list-image-inner {
   position: relative;
   width: 100%;
   display: block;
   overflow: hidden;
}

.mouse-pos-list-image .float-image-wrap .mouse-pos-list-image-inner:before {
   display: block;
   content: "";
   padding-top: 100%;
} 

.mouse-pos-list-image .float-image-wrap .mouse-pos-list-image-inner {
   width: 0;
}

.mouse-pos-list-image .float-image-wrap .mouse-pos-list-image-inner.visible {
   width: 100%;
}

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

   .mouse-pos-list-image {
      display: none;
   }
}

/* ------------------------- Mouse Position Button -------------------------------------------------- */


.mouse-pos-list-btn,
.mouse-pos-list-span {
   width: 0;
   height: 0;
   border-radius: 50%;
   border: 0;
   background: var(--color-blue);
   position: fixed;
   z-index: 26;
   pointer-events: none;
   transform: translate(-50%, -60%);
   overflow: hidden;
   display: block;
   transition: width .4s cubic-bezier(0.36, 0, 0.66, 0), height .4s cubic-bezier(0.36, 0, 0.66, 0);
   left: 50.5%;
   top: -10%;
   left: -10%;
   left: 0%;
   top: 0%;
   will-change: transform, width, height;
}

.mouse-pos-list-span {
   background: transparent;
   color: #000;
   display: flex;
   justify-content: center;
   align-items: center;
   left: 49.75%;
   top: -11.25%;
   left: -11.25%;
   left: 0%;
   top: 0%;
}

.mouse-pos-list-span p {
   margin: 0;
}

.mouse-pos-list-span .arrow,
.btn .arrow {
   width: 0em;
   transform: rotate(-90deg) translateX(-.05em);
   margin-left: .33em;
   display: inline-flex;
   position: relative;
   transition: width .4s cubic-bezier(0.36, 0, 0.66, 0);
   will-change: width;
}

.mouse-pos-list-span.active-big .arrow,
.btn .arrow {
   width: .66em;
   transition: width .4s cubic-bezier(0.34, 1, 0.64, 1)
}

.mouse-pos-list-btn.active,
.mouse-pos-list-span.active {
   width: clamp(3.75em, 5.5vw, 5em);
   height: clamp(3.75em, 5.5vw, 5em);
   transition: width .4s cubic-bezier(0.34, 1, 0.64, 1), height .4s cubic-bezier(0.34, 1, 0.64, 1);
}

.mouse-pos-list-btn.active-big,
.mouse-pos-list-span.active-big {
   width: calc(clamp(3.75em, 5.5vw, 5em) * 1.66);
   height: calc(clamp(3.75em, 5.5vw, 5em) * 1.66);
   transition: width .4s cubic-bezier(0.34, 1, 0.64, 1), height .4s cubic-bezier(0.34, 1, 0.64, 1);
}

.mouse-pos-list-btn.active-big.hover,
.mouse-pos-list-span.active-big.hover {
   width: calc(clamp(3.75em, 5.5vw, 5em) * 1.45);
   height: calc(clamp(3.75em, 5.5vw, 5em) * 1.45);
}

.mouse-pos-list-btn.active.pressed,
.mouse-pos-list-span.active.pressed {
   height: calc(clamp(3.75em, 5.5vw, 8em) * 1.4);
   width: calc(clamp(3.75em, 5.5vw, 8em) * 1.4);
}

.mouse-pos-list-btn.active-big.pressed,
.mouse-pos-list-span.active-big.pressed {
   height: calc(clamp(3.75em, 5.5vw, 8em) * 2);
   width: calc(clamp(3.75em, 5.5vw, 8em) * 2);
}

.mouse-pos-list-span.active,
.mouse-pos-list-span.active-big {
   border-radius: 0;
   width: clamp(10em, 27.5vw, 25em);
   transition: width .4s cubic-bezier(0.34, 1, 0.64, 1), height .4s cubic-bezier(0.34, 1, 0.64, 1);
}

.mouse-pos-list-span p {
   font-size: 0em;
   transition: font-size .4s cubic-bezier(0.36, 0, 0.66, 0);
   will-change: font-size;
}

.mouse-pos-list-span.active p,
.mouse-pos-list-span.active-big p {
   color: #000;
   font-size: 1em;
   transition: font-size .4s cubic-bezier(0.34, 1, 0.64, 1);
}

.load-icon {
   width: 3em;
   height: 3em;
   border-radius: 50%;
   border: 0;
   background: var(--color-blue);
   position: fixed;
   pointer-events: none;
   transform: scale(0);
   overflow: hidden;
   display: block;
   right: var(--gap-padding);
   bottom: var(--gap-padding);
   z-index: 2000;
}

.load-icon svg {
   left: 25%;
   top: 25%;
   position: absolute;
   width: 50%;
   transform: rotate(0.0001deg);
   animation: rotateLoad 1s linear infinite;
}

@keyframes rotateLoad {
   0%   {transform: rotate(0.0001deg);}
   100% {transform: rotate(360deg);}
}


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

   .mouse-pos-list-btn,
   .mouse-pos-list-span {
      display: none;
   }
}

/* Fix floating preview blocking clicks */
.mouse-pos-list-image,
.mouse-pos-list-image-bounce,
.mouse-pos-list-image .float-image-wrap {
    pointer-events: none !important;
}

/* Ensure UI elements can be clicked */
.work-filters .btn,
.work-filters .btn * {
    pointer-events: auto !important;
}

[data-scroll-container] {
   transform-style: flat !important;
   will-change: transform !important;
 }
 
 [data-scroll-container] > * {
   transform: translateY( var(--scroll-y) ) !important;
 }