/* ------------------------- Style 짰 Code by Dennis -------------------------------------------------- */

/* ------------------------- Loading -------------------------------------------------- */

.loading-container {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   overflow: hidden;
   z-index: 500;
   pointer-events: none;
}

.loading-container .loading-screen {
   position: relative;
   width: 100%;
   height: 100%;
   background: var(--color-light);
   display: flex;
   justify-content: center;
   align-items: center;
}

.loading-overlay {
   background-color: var(--color-light);
   z-index: 2;
}

.loading-overlay.dark {
   background-color: var(--color-dark);
}

/* ------------------------- Page Transition -------------------------------------------------- */

.transition-container {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   overflow: hidden;
   z-index: 150;
   pointer-events: none;
   opacity: 0;
   display: flex;
   flex-direction: column;
}

.transition-container .transition-screen {
   position: relative;
   width: 100%;
   height: 100%;
   background: var(--color-light);
}

.transition-container .transition-screen::before {
   content: "";
   position: absolute;
   top: -1px;
   left: -1px;
   right: -1px;
   bottom: -1px;
   background-color: var(--color-light);
}

.swipe-container {
   display: flex;
   flex-direction: column;
   width: calc(100% + 1px);
   pointer-events: none;
}

.swipe-container .swipe-screen {
   position: relative;
   width: 100%;
   height: 100%;
   background: var(--color-light);
   transform-origin: right;
   background-color: var(--color-light);
   pointer-events: all;
}

.swipe-container .swipe-screen::before {
   content: "";
   position: absolute;
   top: -1px;
   left: -1px;
   right: -1px;
   bottom: -1px;
   background-color: var(--color-light);
}

@media screen and (min-width: 1025px) {

   .swipe-container .swipe-screen.first {
      width: 100%;
   }

   .swipe-container .swipe-screen.second {
      width: calc((var(--main-grid-column-width) * 4) + (var(--main-grid-gap) * 5) + 1px);
   }

   .swipe-container .swipe-screen.last {
      width: calc((var(--main-grid-column-width) * 2) + (var(--main-grid-gap) * 2) + 1px);
      flex-shrink: 0;
   }
}

@media screen and (min-width: 1025px) {
   /* Logo w/h: 0,1820005034 */
   .transition-container .transition-screen.last,
   .swipe-container .swipe-screen.last {
      height: calc((((var(--main-grid-column-width) * 10) + (var(--main-grid-gap) * 9)) * 0.1815) + (var(--gap) * 2));
      flex-shrink: 0;
   }
}

.transition-container .overlay-transition-dark {
   background-color: rgba(var(--color-dark-rgb), 0.1);
   opacity: 0;
}

/* ------------------------- The Grid -------------------------------------------------- */

.the-grid .container,
.the-grid .row  {
   height: 100%;
}

.the-grid .col {
   background-color: #9D9D9D;
   opacity: 0.1;
   transform: scaleY(0) rotate(0.001deg);
   transition: transform var(--animation-smooth);
   transform-origin: top;
}

[data-grid-status="active"] .the-grid .col{
   transform: scaleY(1) rotate(0.001deg);
   transform-origin: bottom;
}

.the-grid .col:nth-child(2) {transition-delay: 0.025s;}
.the-grid .col:nth-child(3) {transition-delay: 0.05s;}
.the-grid .col:nth-child(4) {transition-delay: 0.075s;}
.the-grid .col:nth-child(5) {transition-delay: 0.100s;}
.the-grid .col:nth-child(6) {transition-delay: 0.125s;}
.the-grid .col:nth-child(7) {transition-delay: 0.150s;}
.the-grid .col:nth-child(8) {transition-delay: 0.175s;}
.the-grid .col:nth-child(9) {transition-delay: 0.200s;}
.the-grid .col:nth-child(10) {transition-delay: 0.225s;}
.the-grid .col:nth-child(11) {transition-delay: 0.250s;}
.the-grid .col:nth-child(12) {transition-delay: 0.275s;}

@media screen and (max-width: 1024px) {
   .the-grid .row .col:nth-child(n + 7) {
      display: none;
   }
}

@media screen and (max-width: 540px) {
   .the-grid .row .col:nth-child(n + 5) {
      display: none;
   }
}

/* ------------------------- Navigation -------------------------------------------------- */

header {
   mix-blend-mode: exclusion;
}

.nav-loading-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: var(--nav-height);
   overflow: hidden;
   z-index: 101;
   pointer-events: none;
   background-color: var(--color-light);
}

.main-nav-bar {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   padding-top: var(--gap);
   padding-bottom: var(--gap);
   height: var(--nav-height);
}

.main-nav-bar .link,
.main-nav-bar .logo {
   pointer-events: all;
}

.main-nav-bar .col-logo {
   --column-width: 2;
}

.main-nav-bar .col-service {
   --column-width: 5;
}

.main-nav-bar .col-nav {
   --column-width: 3;
   transform: rotate(0.001deg);
}

.main-nav-bar .col-btn {
   --column-width: 2;
   align-items: flex-end;
   justify-content: flex-start;
   transform: rotate(0.001deg);
}

.main-nav-bar .col-btn .menu-link {
   display: none;
}

@media screen and (max-width: 1024px) {
   .main-nav-bar .col-service,
   .main-nav-bar .col-nav {
      display: none;
   }

   .main-nav-bar .col-logo {
      --column-width: 3;
   }

   .main-nav-bar .col-btn {
      --column-width: 3;
   }

   .main-nav-bar .col-btn .contact-link {
      display: none
   }

   .main-nav-bar .col-btn .menu-link {
      display: inline-flex;
   }
}

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

   .main-nav-bar .col-logo {
      --column-width: 2;
   }

   .main-nav-bar .col-btn {
      --column-width: 2;
   }
}

.main-nav-bar ul {
   display: flex;
   flex-direction: row;
   gap: 0.25em;
}

.main-nav-bar ul .link:last-child .comma {
   display: none;
}

/* Logo General */

.logo-wrap {
   position: relative;
   width: 100%;
}

.logo {
   width: 100%;
   position: relative;
   overflow: hidden;
}

.logo .logo-click {
   display: flex;
   position: relative;
}

.logo .logo-click > svg {
   position: relative;
   display: block;
   width: 100%;
   margin-top: -0.02em;
   margin-bottom: -0.03em;
   opacity: 0;
   width: 100%;
}

.logo .letters {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   overflow: hidden;
}

.logo .letters svg {
   display: block;
   transform: translateY(0%) rotate(0.001deg);
}

.logo .letters path {
   fill: var(--color-dark);
}

.logo .letters svg:nth-child(1) {
   width: 19%;
}

.logo .letters svg:nth-child(2) {
   width: 7.5%;
   margin-left: 4%;
}

.logo .letters svg:nth-child(3) {
   width: 24.1%;
   margin-left: 5%;
}

.logo .letters svg:nth-child(4) {
   position: absolute;
   right: 0;
   width: 39%;
}

/* Logo Main-nav-bar */

.main-nav-bar .logo-wrap {
   position: absolute;
   --column-width: 6;
   width: calc((100% * 3) + (var(--gap) * 2));
   margin-top: calc(var(--gap) * -1);
   padding-top: var(--gap);
}

.main-nav-bar .logo {
   transform-origin: left top;
   z-index: 2;
}

@media screen and (min-width: 1025px) {
   .main-nav-bar .logo {
      background-color: var(--color-dark);
   }
}

.main-nav-bar .logo .letters path {
   fill: var(--color-light);
}

/* Services Text */

.main-nav-bar h4 {
   color: var(--color-light);
   white-space: nowrap;
   margin: 0.2em 0;
}

/* Is Home */

@media screen and (min-width: 1025px) {

   .main-nav-bar.is-home .logo {
      transform: scale(0.2) rotate(0.001deg);
      pointer-events: none;
   }

   .main-nav-bar.is-home .logo .logo-click {
      pointer-events: all;
   }
}

@media screen and (max-width: 1024px) {
   .main-nav-bar .logo-wrap {
      width: 8em;
      margin-top: unset;
      padding-top: unset;
   }

   .main-nav-bar .logo-click {
      padding-bottom: 0.1em;
   }
}

/* ------------------------- Mobile Nav -------------------------------------------------- */

.mobile-nav {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 110;
   pointer-events: none;
   display: none;
   padding: calc(var(--gap) * 3) var(--container-padding);
   opacity: 0;
   visibility: hidden;
   clip-path: polygon(0% 0%, 0% 0, 0% 100%, 0% 100%);
   align-items: center;
   justify-content: center;
}

@media screen and (max-width: 1024px) {
   .mobile-nav {
      display: flex;
   }

   [data-navigation-status="active"] .main-nav-bar .link, 
   [data-navigation-status="active"] .main-nav-bar .logo{
      pointer-events: none;
      user-select: none;
   }
}

[data-navigation-status="active"] .mobile-nav {
   opacity: 1;
   visibility: visible;
   transition: clip-path var(--animation-smooth-faster);
   clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0% 100%);
}

[data-navigation-status="remove"] .mobile-nav {
   opacity: 1;
   visibility: visible;
   transition: clip-path var(--animation-smooth-faster);
   clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
}

/* Close */

.mobile-nav .close-link {
   position: absolute;
   top: var(--main-grid-gap);
   right: var(--main-grid-gap);
   z-index: 2;
   pointer-events: all;
}

/* Logo */

.mobile-nav .logo-wrap {
   width: 8em;
   position: absolute;
   top: var(--main-grid-gap);
   left: var(--main-grid-gap);
   z-index: 2;
   pointer-events: all;
}

.mobile-nav .logo-wrap .logo .letters path {
   fill: var(--color-light);
}

/* Background */

.mobile-nav .mobile-nav-background {
   background: var(--color-dark);
   pointer-events: all;
}

/* Nav Inner */

.mobile-nav .mobile-nav-inner {
	position: relative;
   height: 100%;
	width: 100%;
	overflow: hidden;
   transform: scale(1.25) rotate(0.001deg);
   pointer-events: all;
   display: flex;
   align-items: center;
}

[data-navigation-status="active"] .mobile-nav .mobile-nav-inner {
   transition: var(--animation-smooth-faster);
   transform: scale(1) rotate(0.001deg);
   pointer-events: all;
}

[data-navigation-status="remove"] .mobile-nav .mobile-nav-inner {
   transition: var(--animation-smooth-faster);
   transform: scale(0.75) rotate(0.001deg);
   pointer-events: none;
}

.mobile-nav .mobile-nav-inner h4 {
   color: var(--color-light);
}

.mobile-nav .mobile-nav-inner nav {
   display: flex;
   flex-direction: column;
   padding-bottom: calc(20 * var(--vh));
}

.mobile-nav .mobile-nav-inner nav ul {
   display: flex;
   flex-direction: column;
   padding-top: var(--gap-l);
}

.mobile-nav .mobile-nav-inner nav ul .link.xl:not(.alt) .link-click {
   padding: 0.025em 0;
}

.mobile-nav .mobile-nav-inner nav ul .link .link-click[data-link-status="active"]::before {
   transform: scaleX(1) rotate(0.001deg);
}

.mobile-nav .mobile-nav-inner nav ul .link.xl.not-alt .link-click::before {
   display: none;
}

.mobile-nav .mobile-nav-inner nav ul .link.xl.alt {
   position: absolute;
   bottom: 0;
}

.mobile-nav .mobile-nav-inner nav ul .link.xl.alt .link-click {
   padding: 0.2em 0;
}

/* ------------------------- Section - Home Header -------------------------------------------------- */

.section-wrap-home-header {
   position: relative;
}

.section-wrap-home-header .overlay-dark {
   opacity: 0;
   pointer-events: none;
}

.section-home-header {
   background-color: var(--color-light);
   padding-top: 0;
   padding-bottom: 0;
   overflow: hidden;
}

.section-home-header .row-group {
   min-height: calc(var(--vh) * 100);
   padding-top: calc(var(--nav-height) + var(--section-padding));
   padding-bottom: var(--gap);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap: var(--gap);
}

@media screen and (min-width: 1025px) {

   .section-wrap-home-header {
      height: calc(var(--vh) * 300);
   }

   .section-home-header {
      position: sticky;
      top: 0;
   }

   .section-wrap-home-header + .section{
      margin-top: calc(var(--vh) * -100);
   }

   .section-home-header .row-group {
      padding-top: var(--nav-height);
   }
}

/* Row Content */

.section-home-header .row-content {
   z-index: 4;
   flex-grow: 1;
   pointer-events: none;
}

.section-home-header .col-whitespace {
   --column-width: 7;
}

.section-home-header .col-content {
   --column-width: 5;
   gap: var(--gap);
   justify-content: space-around;
   pointer-events: all;
}

.section-home-header .col-content .col-row-title {
   max-width: calc(var(--title-size) * 4.75);
   position: relative;
}

.section-home-header .col-content .col-row-description {
   display: flex;
   gap: calc(var(--gap) * 3);
   padding-top: calc(var(--gap) * 2);
}

.section-home-header .col-row-title .floating-number {
   overflow: hidden;
   position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;
   left: 0;
   padding: 0.2em 0;
   width: calc((var(--main-grid-column-width) * 2) + (var(--main-grid-gap) * 1));
   left: calc(((var(--main-grid-column-width) * 3) + (var(--main-grid-gap) * 3)) * -1);
   transform: translateX(calc(((var(--main-grid-column-width) * 4) + (var(--main-grid-gap) * 4)) * -1)) rotate(0.001deg);
   pointer-events: none;
   user-select: none;
}

@media screen and (min-width: 1025px) {

   .section-home-header .col-content .col-row-title {
      order: 2;
   }
}

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

   .section-home-header .col-content {
      --column-width: 6;
   }

   .section-home-header .col-row-title .floating-number {
      display: none;
   }

   .section-home-header .row-content .col-whitespace {
      display: none;
   }

   .section-home-header .col-content .col-row-description {
      gap: var(--gap);
      padding-top: var(--section-padding);
   }

   .section-home-header .col-content .col-row-description .description {
      width: 100%;
   }
}

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

   .section-home-header .col-content {
      --column-width: 4;
   }
}

/* Row Reel */

.section-home-header .row-reel .col {
   --column-width: 12;
   height: calc(100vw - (var(--container-padding) * 2));
   overflow: hidden;
}

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

   /* Row Reel - Full Width */

   .section-home-header .row-reel {
      width: 100vw;
      margin-left: calc(var(--container-padding) * -1);
   }

   .section-home-header .row-reel .col {
      height: 100vw;
   }
}

@media screen and (min-width: 1025px) {
   .section-home-header .row-reel {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
   }
   
   .section-home-header .row-reel .col {
      width: calc(50vw - (var(--main-grid-gap) * 0.5));
      height: 100%;
   }

   .section-home-header .magnetic-overlay {
      left: unset;
      top: unset;
      right: 0;
      bottom: 0;
      width: 130%;
      height: 127.5%;
   }
}

@media screen and (max-width: 1024px) {
   .section-home-header .row-reel {
      z-index: 5;
   }
}

/* Row Logo */

.section-home-header .row-logo {
   pointer-events: none;
}

.section-home-header .row-logo .col-whitespace {
   --column-width: 2;
}

.section-home-header .row-logo .col-logo {
   --column-width: 10;
   position: relative;
}

.section-home-header .logo {
   margin-top: -0.3%;
   margin-bottom: -0.4%;
}

.section-home-header .logo .logo-click {
   margin-top: 0;
   margin-bottom: 0;
}

@media screen and (min-width: 1025px) {

   .section-home-header .row-logo .col-logo-inner {
      --column-width: 4;
      --column-width-parent: 10;
      --column-width-child: calc((99.99% / var(--column-width-parent)) - (var(--main-grid-gap) * ((var(--column-width-parent) - 1) / var(--column-width-parent))));
      position: relative;
      width: calc(((var(--column-width-child) * var(--column-width)) + (var(--main-grid-gap) * (var(--column-width) - 1))) + var(--main-grid-gap));
   }
   
   .section-home-header .row-logo .logo-wrap {
      width: calc(250% - var(--main-grid-gap));
   }

   .section-home-header .row-logo .col-logo .center-tile {
      position: absolute;
      background-color: var(--color-light);
      bottom: calc(100% + var(--main-grid-gap) - 1px);
      left: calc(var(--main-grid-gap) * -1);
      height: calc((((100 * var(--vh)) - (100% + (var(--main-grid-gap) * 2))) / 2) + 2px);
      width: calc(100% + (var(--main-grid-gap) * 2));
      transform-origin: right;
      pointer-events: all;
   }

   .section-home-header .row-logo .col-logo-inner::before {
      content: "";
      position: absolute;
      top: calc(var(--main-grid-gap) * -1);
      left: calc(var(--main-grid-gap) * -1);
      width: calc(100% + (var(--main-grid-gap) * 2));
      height: calc(100% + (var(--main-grid-gap) * 2));
      background-color: var(--color-light);
      pointer-events: all;
   }
}

@media screen and (max-width: 1024px) {
   .section-home-header .row-logo .col-whitespace {
      display: none;
   }

   .section-home-header .row-logo .col-logo {
      --column-width: 6;
   }

   .section-home-header {
      border-bottom: 1px solid var(--color-border);
   }

   /* No Logo */

   .section-home-header .row-logo {
      display: none;
   }

   .section-home-header .row-group {
      padding-bottom: 0;
   }

   .section-home-header {
      border-bottom: 0;
   }
}

/* ------------------------- Section - Home Intro -------------------------------------------------- */

.section-intro {
   background-color: var(--color-light);
   z-index: 2;
}

.section-intro .col .col-row-image {
   z-index: 2;
   pointer-events: none;
}

.section-intro .col .col-row-text {
   max-width: calc(var(--title-size) * 12.75);
}

.section-intro .col .styled-media {
   width: calc((var(--main-grid-column-width) * 2) + (var(--main-grid-gap) * 1));
   pointer-events: all; 
}

.section-intro .col .spacer {
   display: none;
}

@media screen and (min-width: 1025px) {

   .section-intro .col .spacer {
      width: calc((var(--main-grid-column-width) * 2) + (var(--main-grid-gap) * 2)); 
      display: inline-block;
      pointer-events: none;
   }

   .section-intro .col-row-text .split-lines {
      margin-top: -1em;
   }
}

@media screen and (max-width: 1024px) {
   .section-intro .col {
      gap: var(--gap-l);
   }
}

/* ------------------------- Section - Split Three -------------------------------------------------- */

.section-split-three {
   padding-top: 0;
   padding-bottom: calc(var(--section-padding) * 2);
   z-index: 2;
}

.section-split-three .row.columns {
   gap: var(--gap-l) var(--main-grid-gap);
}

.section-split-three .col-title {
   --column-width: 2;
}

.section-split-three .col-whitespace {
   --column-width: 2;
}

.section-split-three .col-text {
   --column-width: 4;
   gap: var(--gap-l)
}

.section-split-three .col-number {
   --column-width: 4;
   align-items: flex-end;
}

@media screen and (max-width: 1024px) {
   .section-split-three .col-title {
      --column-width: 6;
   }

   .section-split-three .col-whitespace {
      display: none;
   }
   
   .section-split-three .col-text {
      --column-width: 6;
   }
   
   .section-split-three .col-number {
     display: none;
   }
}

@media screen and (max-width: 540px) {
   .section-split-three .col-title {
      --column-width: 4;
   }
   
   .section-split-three .col-text {
      --column-width: 4;
   }
}

/* ------------------------- Section - Split Three Alt -------------------------------------------------- */

.section-split-three-alt {
   padding-top: 0;
   z-index: 2;
}

.section-split-three-alt .row.columns {
   gap: var(--gap-l) var(--main-grid-gap);
}

.section-split-three-alt .col-title {
   --column-width: 2;
}

.section-split-three-alt .col-whitespace {
   --column-width: 1;
}

.section-split-three-alt .col-text {
   --column-width: 7;
   gap: calc(var(--gap-l) * 2.5);
}

.section-split-three-alt .sub-col {
   display: flex;
   flex-wrap: wrap;
   gap: var(--gap-l) var(--main-grid-gap);
}

.section-split-three-alt .sub-col .col-row-subtitle {
   width: calc((var(--main-grid-column-width) * 2) + (var(--main-grid-gap) * 1));
}

.section-split-three-alt .sub-col .col-row-whitespace {
   width: var(--main-grid-column-width);
}

.section-split-three-alt .sub-col .col-row-text {
   width: calc((var(--main-grid-column-width) * 4) + (var(--main-grid-gap) * 3));
}

.section-split-three-alt .col-number {
   --column-width: 2;
   align-items: flex-end;
}

@media screen and (max-width: 1024px) {
   .section-split-three-alt .col-title {
      --column-width: 6;
      display: none;
   }

   .section-split-three-alt .col-whitespace {
      display: none;
   }
   
   .section-split-three-alt .col-text {
      --column-width: 6;
   }

   .section-split-three-alt .sub-col .col-row-subtitle {
      width: 100%;
   }
   
   .section-split-three-alt .sub-col .col-row-whitespace {
      display: none;
   }
   
   .section-split-three-alt .sub-col .col-row-text {
      width: 100%;
   }
   
   .section-split-three-alt .col-number {
     display: none;
   }
}

@media screen and (max-width: 540px) {
   .section-split-three-alt .col-title {
      --column-width: 4;
   }
   
   .section-split-three-alt .col-text {
      --column-width: 4;
   }
}

/* ------------------------- Section - Work Scroll -------------------------------------------------- */

.section-work-scroll {
   padding: 0;
   display: flex;
   flex-direction: column;
}

.section-work-scroll::before {
   content: "";
   width: 100vw;
   position: absolute;
   top: 0;
   right: 0;
   background-color: var(--color-border);
   height: 1px;
}

@media screen and (max-width: 1024px) {
   .section-work-scroll::before {
      top: 0;
   }
}

@media screen and (min-width: 1025px) {
   .section-work-scroll + .section {
      margin-top: calc(var(--vh) * -100);
      border-top: 1px solid var(--color-border);
   }
}

/* Sticky */

.section-work-scroll .single-work-sticky {
   display: flex;
   position: sticky;
   top: 0;
   height: calc(100 * var(--vh));
   width: 100%;
   z-index: 1;
   gap: var(--main-grid-gap);
}

.section-work-scroll .overlay-dark {
   opacity: 0;
   pointer-events: none;
}

/* Sticky - Thumbnail */

.single-work-sticky .thumbnail-wrapper-big {
   width: calc(50vw - (var(--main-grid-gap) * 0.5));
   /* width: calc((var(--main-grid-column-width) * 5) + (var(--main-grid-gap) * 5)); */
   position: relative;
   flex-shrink: 0;
   height: 100%;
}

.single-work-sticky .thumbnail-list {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   transform: rotate(0.001deg);
}

.single-work-sticky .thumbnail-list .thumbnail,
.single-work-sticky .thumbnail-list .thumbnail-inner {
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
}

.single-work-sticky .thumbnail-list .thumbnail:has(.magnetic-overlay) .thumbnail-inner {
   transition: var(--animation-ease);
   transform: scale(1) rotate(0.001deg);
}

.single-work-sticky .thumbnail-list .thumbnail:has(.magnetic-overlay .magnetic-click:hover) .thumbnail-inner {
   transform: scale(1.025) rotate(0.001deg);
}

/* Sticky - Content */

.single-work-sticky .content-wrapper {
   width: 100%;
   padding: var(--nav-height) var(--container-padding) var(--main-grid-gap) var(--container-padding);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.single-work-sticky .thumbnail-wrapper-small {
   width: calc((var(--main-grid-column-width) * 3) + (var(--main-grid-gap) * 2));
   position: relative;
   overflow: hidden;
}

.single-work-sticky .thumbnail-wrapper-small::before {
   content: "";
   padding-top: 56.25%;
   display: block;
   padding-top: calc(var(--vh) * 19.3);
}

.single-work-sticky .content-wrapper .content-row-title {
   display: flex;
   flex-direction: column;
   gap: var(--gap-l);
}

.single-work-sticky .content-wrapper .content-row-thumbnail {
   display: flex;
   flex-direction: column;
   gap: var(--gap-s);
}

.single-work-sticky .roll-line {
   position: relative;
   overflow: hidden;
   display: flex;
}

.single-work-sticky .roll-line .single-roll-line {
   position: absolute;
   transform: translateY(100%) rotate(0.001deg);
   transition: var(--animation-smooth-faster);
   transition-delay: var(--stagger-primary);
   padding-bottom: 0.1em;
   margin-top: -0.1em;
}

.single-work-sticky .roll-line .single-roll-line:first-child {
   position: relative;
   transform: translateY(0%) rotate(0.001deg);
}

.section-work-scroll[data-slide-index-active="2"] .single-work-sticky .roll-line .single-roll-line {
   transform: translateY(0%) rotate(0.001deg); 
}

.section-work-scroll[data-slide-index-active="2"] .single-work-sticky .roll-line .single-roll-line:first-child {
   transform: translateY(-100%) rotate(0.001deg); 
}

.single-work-sticky .roll-line-2 .single-roll-line {
   transition-delay: 0.14s;
}

@media screen and (max-width: 1024px) {
   .section-work-scroll .single-work-sticky {
      display: none;
   }
}

/* Relative */

.section-work-scroll .single-work-slides {
   display: flex;
   flex-direction: column;
}

.section-work-scroll .single-work-height {
   width: 100%;
   position: relative;
   display: flex;
   flex-direction: column;
}

.section-work-scroll .single-work-height .thumbnail {
   width: 100%;
   position: relative;
}

.section-work-scroll .single-work-height .content-row-number {
   padding: var(--gap) var(--container-padding) 0 var(--container-padding);
}

.section-work-scroll .single-work-height .content-row-title {
   padding: var(--section-padding) var(--container-padding);
}

.section-work-scroll .single-work-height .content-row-description {
   padding: 0 var(--container-padding) var(--gap) var(--container-padding);
   display: flex;
}

.section-work-scroll .single-work-height .content-row-description .content-col {
   flex-grow: 1;
}

.section-work-scroll .single-work-height .content-row-description .content-col-arrow {
   flex-shrink: 0;
   flex-grow: 0;
   width: calc(1.1em * 1.1 * 2);
   height: calc(1.1em * 1.1 * 2);
}

.section-work-scroll .single-work-height .content-row-description .content-col-arrow svg {
   width: 90%;
}

.section-work-scroll .single-work-height .content-row-description .content-col-arrow svg * {
   stroke: var(--color-dark);
   stroke-width: 0.14em;
}

.section-work-scroll .single-work-height .thumbnail::before {
   content: "";
   padding-top: 66vw;
   display: block;
}

@media screen and (min-width: 1025px) {

   .section-work-scroll .single-work-slides {
      padding-bottom: calc(100 * var(--vh));
   }
   
   .section-work-scroll .single-work-height {
      height: calc(100 * var(--vh));
      z-index: 0;
   }

   .section-work-scroll .single-work-height .content-row {
      display: none;
   }
}

@media screen and (max-width: 540px) {
   .section-work-scroll .single-work-height .thumbnail::before {
      padding-top: 100%;
   }
}


/* ------------------------- Section - Home Services -------------------------------------------------- */

.section-home-services {
   padding-top: var(--gap);
   z-index: 2;
}

.section-home-services .row.columns {
   gap: var(--gap-l) var(--main-grid-gap);
}

.section-home-services .col-title {
   --column-width: 6;
   gap: var(--gap-l);
}

.section-home-services .col-image {
   --column-width: 6;
   align-items: flex-end;
}

.section-home-services .col-image .styled-media figure::before {
   padding-bottom: 66.666%;
}

@media screen and (min-width: 1025px) {
   .section-home-services .col-image .styled-media {
      width: calc((var(--main-grid-column-width) * 3) + (var(--main-grid-gap) * 2));
   }

   .section-home-services .col-image .styled-media figure::before {
      padding-bottom: calc(((var(--title-size) * 0.45) * 1.02) * 4);
   }
}

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

   .section-home-services .col-title {
      --column-width: 4;
   }
   
   .section-home-services .col-image {
      --column-width: 2;
   }
}

@media screen and (max-width: 540px) {
   .section-home-services .col-title {
      --column-width: 4;
   }
   
   .section-home-services .col-image {
      --column-width: 4;
      display: none;
   }
}

/* ------------------------- Section - Home Title -------------------------------------------------- */

.section-home-titles {
   z-index: 2;
   padding: calc(var(--section-padding) * 0.5);
}

.section-home-titles .col {
   width: 100%;
   align-items: center;
}

.section-home-titles .col-row {
   display: flex;
   justify-content: center;
   gap: 0.5em;
   position: relative;
}

.section-home-titles .col-row p {
   position: absolute;
   right: 0;
   top: 0;
   transform: translateX(calc(100% + 0.5em));
}

@media screen and (max-width: 1024px) {
   .section-home-titles .col-row p {
      display: none;
   }

   .section-home-titles .col-row .monument {
      font-size: calc((100vw - (var(--container-padding) * 2)) * 0.123);
   }
}

/* ------------------------- Section - Home about -------------------------------------------------- */

.section-home-about {
   z-index: 2;
   padding-bottom: calc(var(--section-padding) * 1.5);
}

.section-home-about .row.columns {
   gap: var(--section-padding) var(--main-grid-gap);
}

.section-home-about .col-title {
   --column-width: 7;
   gap: var(--gap-l);
}

.section-home-about .col-image {
   --column-width: 5;
}

.section-home-about .col-title h4 {
   position: absolute;
   top: 0.6em;
   left: 0;
}

.section-home-about .spacer {
   width: calc((var(--main-grid-column-width) * 1.25) + (var(--main-grid-gap) * 1)); 
   display: inline-block;
   pointer-events: none;
}

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

   .section-home-about .col-title {
      --column-width: 6;
   }
   
   .section-home-about .col-image {
      --column-width: 6;
      order: 2;
   }

   .section-home-about .col-image .styled-media figure {
      order: 2;
   }
}

@media screen and (max-width: 540px) {
   
   .section-home-about {
      padding-bottom: var(--gap);
   }

   
   .section-home-about .col-title {
      --column-width: 4;
   }
   
   .section-home-about .col-image {
      --column-width: 4;
   }
}

@media screen and (min-width: 541px) {

   .section-home-about .col-image .styled-media {
      width: calc((var(--main-grid-column-width) * 2) + (var(--main-grid-gap) * 1));
   }
}

/* ------------------------- Section Wrap - Footer -------------------------------------------------- */

.section-wrap-footer {
   padding: 0;
   background-color: var(--color-light);
   z-index: 3;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
}

.section-work-scroll + .section-wrap-footer .section-work-together {
   border-top: 0;
}

@media screen and (min-width: 1025px) {
   .section-work-scroll + .section-wrap-footer,
   .section-sticky-wrap + .section-wrap-footer {
      min-height: calc(100 * var(--vh));
   }

   .section-sticky-wrap + .section-wrap-footer {
      border-top: 1px solid var(--color-border);
   }

   .section-sticky-wrap + .section-wrap-footer .section-work-together {
      border-top: 0;
   }
   
}

/* ------------------------- Section - Work Together -------------------------------------------------- */

.section-work-together {
   padding-top: var(--gap);
   padding-bottom: calc(var(--section-padding) * 1.25);
   z-index: 3;
   border-top: 1px solid var(--color-border);
}

.section-work-together .col-logo {
   --column-width: 5;
   padding-top: calc(var(--gap) * 0.25);
}

.section-work-together .col-whitespace {
   --column-width: 3;
}

.section-work-together .col-text {
   --column-width: 4;
}

.section-work-together .col-text .btn-animate-in {
   padding-bottom: 0.5em;
}

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

   .section-work-together {
      padding-bottom: var(--gap-l);
   }

   .section-work-together .row.columns {
      gap: var(--section-padding) var(--main-grid-gap);
   }

   .section-work-together .col-logo {
      --column-width: 6;
   }
   
   .section-work-together .col-whitespace {
      display: none;
   }
   
   .section-work-together .col-text {
      --column-width: 6;
   }
}

@media screen and (max-width: 540px) {
   .section-work-together .col-logo {
      --column-width: 4;
   }
   
   .section-work-together .col-text {
      --column-width: 4;
   }
}

/* ------------------------- Section - Footer -------------------------------------------------- */

.section-footer {
   padding: 0;
   z-index: 1;
   border-top: 1px solid var(--color-border);
   overflow: hidden;
}

.section-footer .row-top {
   padding-top: var(--gap-l);
   gap: var(--section-padding) var(--main-grid-gap);
}

.section-footer .col-navigate {
   --column-width: 3; 
   gap: var(--gap);
}

.section-footer .col-navigate ul,
.section-footer .col-socials ul,
.section-footer .col-address ul {
   display: flex;
   flex-direction: column;
   padding-top: calc((var(--title-size) * 0.45) * 0.2);
}

.section-footer .col-navigate li,
.section-footer .col-socials li,
.section-footer .col-address li {
   display: flex;
   overflow: hidden;
   width: 100%;
}

.section-footer .col-navigate .link.xl .link-click,
.section-footer .col-socials .link.xl .link-click {
   padding: 0 0 0.05em 0;
   margin-top: -0.125em;
}

.section-footer .col-socials {
   --column-width: 5; 
   gap: var(--gap); 
}

.section-footer .col-address {
   --column-width: 4;
   gap: var(--gap); 
}

.section-footer .col-address li span {
   margin-top: -0.075em;
   padding-bottom: 0.075em;
}

.section-footer .row-bottom {
   padding-top: calc(var(--section-padding) * 1);
   padding-bottom: var(--gap);
   gap: 0 var(--main-grid-gap);
}

.section-footer .col-year {
   --column-width: 4; 
}

.section-footer .col-links {
   --column-width: 4; 
   flex-direction: row;
   align-items: flex-start;
   gap: 0.25em;
}

.section-footer .col-links .link {
   align-items: center;
}

.section-footer .col-links .link .slash {
   padding-left: 0.25em;
}

.section-footer .col-links .link:last-child .slash {
   display: none;
}

.section-footer .col-credits {
   --column-width: 4; 
   flex-direction: row;
   justify-content: space-between;
}

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

   .section-footer .row-bottom {
      padding-bottom: var(--gap-l);
   }

   .section-footer .col-navigate {
      --column-width: 3; 
   }

   .section-footer .col-socials {
      --column-width: 3; 
   }
   
   .section-footer .col-address {
      --column-width: 6;
   }

   .section-footer .col-year {
      --column-width: 6;
      order: 2;
   }

   .section-footer .col-year p::before {
      content: "(";
   }

   .section-footer .col-year p::after {
      content: ")";
   }
   
   .section-footer .col-links {
      --column-width: 6;
   }

   .section-footer .col-credits {
      --column-width: 6;
      order: 3;
      padding-top: var(--gap-l);
   }

   .section-footer .col-navigate ul,
   .section-footer .col-socials ul,
   .section-footer .col-address ul {
      padding-top: calc((var(--title-size) * 0.425) * 0.2);
   }

}

@media screen and (max-width: 540px) {
   .section-footer .col-navigate {
      --column-width: 2; 
   }

   .section-footer .col-socials {
      --column-width: 2; 
   }
   
}

/* ------------------------- Section - Work Header -------------------------------------------------- */

.section-work-header .col-title {
   --column-width: 6; 
   transform: translateY(calc(var(--gap) * 0.2));
}

.section-work-header .col-whitespace {
   --column-width: 3; 
}

.section-work-header .col-count {
   --column-width: 3; 
   flex-direction: row;
   justify-content: space-between;
   align-items: flex-end;
}

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

   .section-work-header .col-title {
      --column-width: 6; 
   }
   
   .section-work-header .col-whitespace {
      display: none;
   }

   .section-work-header .col-count {
      --column-width: 6; 
   }
}

@media screen and (max-width: 540px) {
   .section-work-header .col-title {
      --column-width: 4; 
   }

   .section-work-header .col-count {
      --column-width: 4; 
   }

}

/* ------------------------- Section - Work Grid -------------------------------------------------- */

.section-work-grid {
   padding-top: var(--gap-l);
}

.section-work-grid .row.grid {
   --columns: 2;
   gap: var(--gap-l) var(--grid-gap);
}

@media screen and (max-width: 720px) {
   .section-work-grid .row.grid {
      --columns: 1; 
   }
}

/* ------------------------- Single Work Card -------------------------------------------------- */

.single-work-card {
   display: flex;
   flex-direction: column;
}

.single-work-card .thumbnail-wrapper {
   position: relative;
   width: 100%;
   display: flex;
   flex-direction: column;
   overflow: hidden;
}

.single-work-card figure {
   background-color: var(--color-dark);
}

.single-work-card figure::before {
   content: "";
   padding-bottom: 80%;
   display: block;
}

.single-work-card .black-bar {
   position: absolute;
   left: -0.1%;
   top: 0;
   width: calc(21.111% * 0.7);
   background-color: var(--color-dark);
   height: 100%;
   transform-origin: left;
   transform: scaleX(0) rotate(0.001deg);
}

.single-work-card .black-bar.right {
   left: unset;
   right: -0.1%;
   transform-origin: right;
}

.single-work-card .figure-scale {
   width: 142.222%;
   height: 100%;
   left: 50%;
   transform: translateX(-50%) scale(1) rotate(0.001deg);
}

.single-work-card .figure-scale .styled-image {
   transform: scale(1.01) rotate(0.001deg);
}

.single-work-card .row.columns {
   gap: 0 var(--main-grid-gap);
   mix-blend-mode: exclusion;
}

.single-work-card .row.columns .xs {
   color: var(--color-light);
}

.single-work-card .row.columns .col {
   padding: var(--gap-s);
}

.single-work-card .row.columns .col-number {
   --column-width: 1;
   padding-left: 0;
}

.single-work-card .row.columns .col-title {
   --column-width: 2;
}

.single-work-card .row.columns .col-services {
   --column-width: 3;
   padding-right: 0;
}

.single-work-card .row.columns .col-services ul {
   display: flex;
}

.single-work-card .row.columns .col-services ul li span {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;
   line-clamp: 1;
   min-height: 1.21em;
   line-height: 1.1;
}

.single-work-card .row.columns .col-services ul li:not(:last-child) span::after {
   content: "/"
}

@media screen and (min-width: 1025px) {

   /* Hover */

   .single-work-card .figure-scale {
      transition: transform var(--animation-primary);
   }

   .single-work-card[data-thumb-video-status="active"] .figure-scale {
      transform: translateX(-50%) scale(0.5) rotate(0.001deg);
   }

   .single-work-card .black-bar {
      transition: transform var(--animation-primary);
   }

   .single-work-card[data-thumb-video-status="active"] .black-bar {
      transform: scaleX(1) rotate(0.001deg);
   }

   .single-work-card .figure-scale .styled-image {
      transform: scale(1.01) rotate(0.001deg);
      transition: transform var(--animation-primary);
   }

   .single-work-card[data-thumb-video-status="active"] .figure-scale .styled-image {
      transform: scale(0.99) rotate(0.001deg);
   }

   .single-work-card .figure-scale .styled-video {
      opacity: 0;
      visibility: hidden;
      transition: var(--animation-primary);
   }

   .single-work-card[data-thumb-video-status="active"] .figure-scale .styled-video {
      opacity: 1;
      visibility: visible;
   }

   .single-work-card .row.columns .col {
      transition: var(--animation-primary);
      transform: translateY(0%) rotate(0.001deg);
   }

   .single-work-card[data-thumb-video-status="active"] .row.columns .col {
      transform: translateY(-100%) rotate(0.001deg);
   }

   .single-work-card[data-thumb-video-status="active"] .row.columns .col-number {
      padding-left: var(--gap);
   }

   .single-work-card[data-thumb-video-status="active"] .row.columns .col-title {
      transition-delay: 0.07s;
   }

   .single-work-card[data-thumb-video-status="active"] .row.columns .col-services {
      transition-delay: 0.14s;
   }

}

@media screen and (max-width: 1024px) {
   .single-work-card .row.columns .col-number {
      width: 2em;
      flex-shrink: 0;
      order: 2;
      align-items: flex-end;
      padding: var(--gap-s) 0 0 0;
   }
   
   .single-work-card .row.columns .col-title {
      width: calc(100% - 2em - var(--main-grid-gap));
      flex-grow: 1;
      order: 1;
      padding: var(--gap-s) 0 0 0;
   }
   
   .single-work-card .row.columns .col-services {
      --column-width: 3;
      order: 3;
      padding: 0.25em 0 0 0;
   }

   .single-work-card .row.columns .col-services ul li:first-child span::before {
      content: "(";
   }

   .single-work-card .row.columns .col-services ul li:last-child span::after {
      content: ")";
   }

}

/* ------------------------- Section - Work Single Header -------------------------------------------------- */

.section-work-single-header {
   padding-top: 0;
   padding-bottom: 0;
}

.section-work-single-header .row-title {
   padding-top: calc(var(--vh) * 45);
}

.section-work-single-header .row-info-wrap {
   display: flex;
   min-height: calc(var(--vh) * 35);
   align-items: flex-end;
   z-index: 2;
}

.section-work-single-header .row-info {
   padding-bottom: var(--gap);
   gap: calc(var(--gap-l) * 2) var(--main-grid-gap);
}

.section-work-single-header .col-number,
.transition-work-single .col-number {
   --column-width: 3;
}

.section-work-single-header .col-title,
.transition-work-single .col-title  {
   --column-width: 7;
}

.section-work-single-header .col-year,
.transition-work-single .col-year {
   --column-width: 2;
   align-items: flex-end;
}

.section-work-single-header .col-services {
   --column-width: 2;
   gap: var(--gap-s);
}

.section-work-single-header .col-intro {
   --column-width: 5;
   gap: var(--gap-s);
}

.section-work-single-header .col-btn {
   --column-width: 3;
   justify-content: flex-end;
}

.section-work-single-header .col-arrow {
   --column-width: 2;
   align-items: flex-end;
   justify-content: flex-end;
}

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

   .section-work-header .row.columns {
      padding-bottom: calc(var(--gap-l) * 0.8);
   }

   .section-work-single-header .row-title {
      padding-top: calc(var(--vh) * 30);
   }

   .section-work-single-header .row-info-wrap {
      min-height: calc(var(--vh) * 55);
   }

   .section-work-single-header .row-info {
      padding-top: var(--gap-l);
   }
   
   .section-work-single-header .single-vimeo-player {
      padding-bottom: 80%;
   }

   .section-work-single-header .single-vimeo-player .iframe-wrap iframe {
      transform: scale(calc(0.8 / var(--aspect-ratio-no-percent)));
   }

   .section-work-single-header .col-number,
   .transition-work-single .col-number {
      --column-width: 1;
   }

   .section-work-single-header .col-title,
   .transition-work-single .col-title  {
      --column-width: 4;
   }

   .section-work-single-header .col-year,
   .transition-work-single .col-year {
      --column-width: 1;
   }

   .section-work-single-header .col-services {
      --column-width: 2;
   }
   
   .section-work-single-header .col-intro {
      --column-width: 4;
   }
   
   .section-work-single-header .col-btn {
      display: none;
   }
   
   .section-work-single-header .col-arrow {
      display: none;
   }
}

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

   .section-work-single-header .col-number,
   .transition-work-single .col-number {
      --column-width: 1;
      align-items: flex-end;
      order: 2;
   }

   .section-work-single-header .col-title,
   .transition-work-single .col-title  {
      --column-width: 3;
   }

   .section-work-single-header .col-year,
   .transition-work-single .col-year {
      display: none;
   }

   .section-work-single-header .col-services {
      --column-width: 4;
   }
   
   .section-work-single-header .col-intro {
      --column-width: 4;
   }
}

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

   @media (min-aspect-ratio: 9/16) {
      .section-work-single-header .col-services .col-row:first-child,
      .section-work-single-header .col-intro .col-row:first-child {
         display: none;
      }
   }

}

/* ------------------------- Section - Work Single Blocks -------------------------------------------------- */

.section-wrap-work-single-blocks {
   display: flex;
   flex-direction: column;
   gap: var(--gap);
   padding-top: var(--gap);
}

/* ------------------------- Section - Media Block -------------------------------------------------- */

.section-media-block {
   padding-top: 0;
   padding-bottom: 0;
}

.section-media-block .row.columns {
   --block-columns: 1;
   justify-content: flex-start;
}

.section-media-block .row.columns.align-center {
   justify-content: center;
}

.section-media-block .row.columns.align-right {
   justify-content: flex-end;
}

.section-media-block .row.columns .col {
   --column-width: calc(12 / (var(--block-columns)));
}

.section-media-block figure {
   position: relative;
}

.section-media-block figure figcaption {
   display: flex;
   align-items: flex-end;
   justify-content: flex-start;
   padding: calc(var(--gap) * 0.9) var(--gap);
}

@media screen and (max-width: 1024px) {
   .section-media-block .row.columns .col {
      --column-width: calc(6 / (var(--block-columns)));
   }
}

@media screen and (max-width: 720px) {
   .section-media-block .row.columns .col {
      --column-width: 6;
   }
}

@media screen and (max-width: 540px) {
   .section-media-block .row.columns .col {
      --column-width: 4;
   }
}

/* ------------------------- Section - Text Block -------------------------------------------------- */

.section-text-block {
   padding-bottom: calc((var(--section-padding) * 2) - var(--gap));
}

/* ------------------------- Section - Work Single Footer -------------------------------------------------- */

.section-work-single-footer {
   padding-top: 0;
   padding-bottom: 0;
   height: calc(100 * var(--vh));
}

.section-work-single-footer .sticky-elements {
   pointer-events: none;
}

.section-work-single-footer .sticky-elements .container {
   height: 100%;
}

.section-work-single-footer-inner {
   position: relative;
   height: calc(100 * var(--vh));
   overflow: hidden;
}

.section-work-single-footer .row-top {
   padding-top: var(--gap);
   justify-content: space-between;   
   position: sticky;
   top: calc(30 * var(--vh));
}

.section-work-single-footer .row-top .col {
   overflow: hidden;
   position: relative;
}

.transition-work-single .row-title {
   padding-top: calc(var(--vh) * 45);
   padding-bottom: calc(var(--vh) * 35);
   transform: translateY(calc((var(--vh) * 15) - (var(--gap) * 1.5)));
}

.transition-work-single .row-title .footer-hover {
   top: unset;
   bottom: 0;
   height: calc(100% - (var(--vh) * 45));
}

.transition-work-single .row-image {
   position: relative;
}

.transition-work-single .row-image .footer-image {
   position: absolute;
   top: 0;
   left: 0;
   --aspect-ratio: 56.24%;
   width: 100%;
   padding-bottom: var(--aspect-ratio);
   background-color: var(--color-lightgray);
   transform: translateY(calc((var(--vh) * 20) * -1));
   overflow: hidden;
}

@media screen and (min-width: 1025px) {
   .section-work-single-footer :has(.footer-hover) .footer-image img {
      transition: var(--animation-ease);
      transform: scale(1.03);
   }
   
   .section-work-single-footer :has(.footer-hover:hover) .footer-image img {
      transform: scale(1);
   }
}

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

   .transition-work-single .row-title {
      padding-top: calc(var(--vh) * 30);
      padding-bottom: calc(var(--vh) * 55);
      transform: translateY(calc((var(--vh) * 35) - (var(--gap) * 2)));
   }

   .transition-work-single .row-title .footer-hover {
      height: calc(100% - (var(--vh) * 30));
   }
   
   .transition-work-single .row-image .footer-image {
      padding-bottom: 80%;
   }
}

/* ------------------------- Section - Work Single Transition -------------------------------------------------- */

.transition-work-single-container {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   z-index: 10;
   padding-left: var(--container-padding);
   padding-right: var(--container-padding);
}

/* ------------------------- Section - Interactive Image -------------------------------------------------- */

.section-interactive-image {
   padding-top: 0;
   padding-bottom: 0;
}

.section-interactive-image .interactive-image {
   width: 100%;
   background-color: var(--color-lightgray);
   overflow: hidden;
   position: relative;
}

.section-interactive-image .interactive-image::before {
   content: "";
   display: block;
   padding-bottom: 56.24%;
}

.section-interactive-image .hover-grid {
   display: flex;
   /* mix-blend-mode: exclusion; */
}

.section-interactive-image .interactive-image .single-interactive-image {
   opacity: 0;
   visibility: hidden;
}

.section-interactive-image .hover-grid .single-hover-grid {
   flex-grow: 1;
}

/* .section-interactive-image .hover-grid .single-hover-grid[data-interactive-image-status="active"] {
   background-color: rgba(var(--color-dark-rgb), 0.05);
   backdrop-filter: blur(2em);
} */

.section-interactive-image .interactive-image .single-interactive-image[data-interactive-image-status-mobile="active"] {
   opacity: 1;
   visibility: visible;
}

.section-interactive-image .hover-grid {
   display: none;
}

@media screen and (max-width: 1024px) {
   .section-interactive-image .interactive-image::before {
      padding-bottom: 80%;
   }
}

/* ------------------------- Section - Video Player -------------------------------------------------- */

.section-video-player {
   padding-top: 0;
   padding-bottom: 0;
}

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

   .section-video-player  .single-vimeo-player {
      padding-bottom: 80%;
   }

   .section-video-player  .single-vimeo-player .iframe-wrap iframe {
      transform: scale(calc(0.8 / var(--aspect-ratio-no-percent)));
   }
}

/* ------------------------- Section - About Title -------------------------------------------------- */

.section-about-title {
   overflow: hidden;
}

.section-about-title .col {
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.section-about-title h2 {
   display: flex;
   flex-direction: column;
   align-items: center;
   font-size: calc((100vw - (var(--container-padding) * 2)) * 0.155);
   font-size: calc((100vw - (var(--container-padding) * 2)) * 0.186);
}

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

   .section-about-title h2 {
      font-size: calc((100vw - (var(--container-padding) * 2)) * 0.186);
   }
}

/* ------------------------- Section - Services Reasons -------------------------------------------------- */

.section-services-reasons {
   padding-top: 0;
}

.section-services-reasons .row.columns {
   gap: calc(var(--gap-l) * 2) var(--main-grid-gap);
   align-items: flex-start;
}

.section-services-reasons .col-title {
   --column-width: 2;
}

.section-services-reasons .col-whitespace {
   --column-width: 2;
}

.section-services-reasons .col-list {
   --column-width: 6;
   display: flex;
   flex-direction: column;
   gap: var(--section-padding);
}

.section-services-reasons .col-list li {
   display: flex;
   flex-direction: column;
   position: relative;
   width: 100%;
}

.section-services-reasons .col-number {
   --column-width: 2;
   align-items: flex-end;
}

.section-services-reasons .col-list .col-row-subtitle {
   position: absolute;
   top: calc(var(--title-size) * 0.1);
   left: 0;
}

.section-services-reasons .col-list .spacer {
   width: calc((var(--main-grid-column-width) * 1) + (var(--main-grid-gap) * 1)); 
   display: inline-block;
   pointer-events: none;
}

@media screen and (min-width: 1025px) {

   .section-services-reasons .col-title {
      position: sticky;
      top: calc(var(--nav-height) + (var(--gap-l) * 2));
      top: calc(30 * var(--vh));
   }

   .section-services-reasons .col-number {
      position: sticky;
      top: calc(var(--nav-height) + (var(--gap-l) * 2));
      top: calc(30 * var(--vh));
   }
}

@media screen and (max-width: 1024px) {
   
   .section-services-reasons .col-whitespace {
      display: none;
   }
   
   .section-services-reasons .col-list {
      --column-width: 6;
      gap: var(--section-padding);
   }

   .section-services-reasons .col-number {
      display: none;
   }
   
   .section-services-reasons .col-list .spacer {
      width: calc((var(--main-grid-column-width) * 1) + (var(--main-grid-gap) * 1));
   }
}

@media screen and (max-width: 540px) {
   
   .section-services-reasons .col-list {
      --column-width: 4;
   }
}

/* ------------------------- Section - Services Title -------------------------------------------------- */

.section-services-title {
   overflow: hidden;
   padding-top: var(--gap-l);
   padding-bottom: var(--gap-l);
}

.section-services-title .row-big-text .col {
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding-bottom: calc(var(--section-padding) * 2);
}

.section-services-title .row-big-text h2 {
   display: flex;
   flex-direction: column;
   align-items: center;
   font-size: calc((100vw - (var(--container-padding) * 2)) * 0.1205);
   font-size: calc((100vw - (var(--container-padding) * 2)) * 0.145);
   transform: translateX(-0.25%);
}

.section-services-title .row.columns {
   gap: var(--gap-l) var(--main-grid-gap);
   align-items: flex-end;
}

.section-services-title .col-title {
   --column-width: 6;
}

.section-services-title .col-whitespace {
   --column-width: 2;
}

.section-services-title .col-btn {
   --column-width: 3;
}

.section-services-title .col-number {
   --column-width: 1;
   align-items: flex-end;
}

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

   .section-services-title .row-big-text h2 {
      font-size: calc((100vw - (var(--container-padding) * 2)) * 0.145);
   }

   .section-services-title .col-title {
      --column-width: 6;
   }
   
   .section-services-title .col-whitespace {
      display: none;
   }
   
   .section-services-title .col-btn {
      --column-width: 6;
   }

   .section-services-title .col-number {
      display: none;
   }
}

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

   .section-services-title .col-title {
      --column-width: 4;
   }
   
   .section-services-title .col-btn {
      --column-width: 4;
   }

}

/* ------------------------- Section - Services Grid -------------------------------------------------- */

.section-services-grid {
   overflow: hidden;
   padding-top: 0;
   padding-bottom: var(--section-padding);
}

.section-services-grid .row.columns {
   gap: var(--gap-l) var(--main-grid-gap);
   border-top: 1px solid var(--color-border);
   padding-top: var(--gap-l);
   padding-bottom: var(--section-padding);
}

.section-services-grid .col-title {
   --column-width: 2;
}

.section-services-grid .col-text {
   --column-width: 4;
}

.section-services-grid .col-whitespace {
   --column-width: 2;
}

.section-services-grid .col-list {
   --column-width: 3;
   display: flex;
   flex-direction: column;
   gap: 0.33em;
}

.section-services-grid .col-number {
   --column-width: 1;
   align-items: flex-end;
}

@media screen and (max-width: 1024px) {
   
   .section-services-grid .col-title {
      --column-width: 5;
   }
   
   .section-services-grid .col-text {
      --column-width: 6;
      order: 2;
   }
   
   .section-services-grid .col-whitespace {
      display: none;
      order: 2;
   }
   
   .section-services-grid .col-list {
      --column-width: 6;
      order: 2;
   }

}

@media screen and (max-width: 540px) {
   
   .section-services-grid .col-title {
      --column-width: 3;
   }
   
   .section-services-grid .col-text {
      --column-width: 4;
   }
   
   .section-services-grid .col-list {
      --column-width: 4;
   }
   
}

/* ------------------------- Section - Testimonials -------------------------------------------------- */

.section-testimonials {
   overflow: hidden;
   padding-top: var(--gap-l);
   padding-bottom: 0;
   border-top: 1px solid var(--color-border);
}

.section-testimonials .container {
   display: flex;
   flex-direction: column;
   position: relative;
}

.section-testimonials .row-controls {
   padding-bottom: calc(var(--section-padding) * 2);
   position: unset;
}

.section-testimonials .row-testimonials {
   gap: calc(var(--gap-l) * 1.5) var(--main-grid-gap);
}

.section-testimonials .col-title {
   --column-width: 4;
}

.section-testimonials .col-controls {
   --column-width: 3;
   flex-direction: row;
   justify-content: space-between;
}

.section-testimonials .col-controls .count {
   display: flex;
   gap: 0.05em;
}

.section-testimonials .col-controls .arrows {
   display: flex;
   user-select: none;
   margin-right: -0.3em;
   margin-left: -0.3em;
}

.section-testimonials .col-controls .arrows .link .link-click {
   padding: 0.2em 0.6em;
}

.section-testimonials .col-controls .arrows .link .link-click::before {
   width: calc(100% - 1.2em);
   left: 0.6em;
}

.section-testimonials .col-number {
   --column-width: 5;
   align-items: flex-end;
}

.section-testimonials .col-author {
   --column-width: 3;
   padding-top: 0.5em;
}

.section-testimonials .col-whitespace {
   --column-width: 1;
}

.section-testimonials .col-quote {
   --column-width: 8;
   flex-direction: row;
   align-items: flex-start;
}
.section-testimonials .col-quote .spacer {
   width: calc((var(--main-grid-column-width) * 2) + (var(--main-grid-gap) * 2)); 
   display: inline-block;
   pointer-events: none;
}

.section-testimonials .testimonials-list {
   position: relative;
   display: flex;
   flex-direction: column;
}

.section-testimonials .testimonials-list [data-testimonial-largest="true"] {
   position: relative;
}

.section-testimonials .testimonials-list [data-testimonial-largest="false"] {
   position: absolute;
   top: 0;
   height: 100%;
   left: 0;
}

.section-testimonials .testimonials-list [data-testimonial-status="active"] {
   opacity: 1;
   visibility: visible;
}

.section-testimonials .testimonials-list [data-testimonial-status="not-active"] {
   opacity: 0;
   visibility: hidden;
   transition: 0.25s ease;
}

@media screen and (min-width: 1024px) {
   .section-testimonials .col-quote .col-row {
      max-width: calc(var(--title-size) * 8);
   }
   
}

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

   .section-testimonials {
      padding-bottom: 0;
   }
   
   .section-testimonials .row-controls {
      order: 2;
      padding-bottom: 0;
   }

   .section-testimonials .col-title {
      --column-width: 6;
      position: absolute;
      top: 0;
      left: var(--container-padding);
   }
   
   .section-testimonials .col-controls {
      --column-width: 6;
      padding-bottom: 0;
      padding-top: var(--section-padding);
   }
   
   .section-testimonials .col-number {
      display: none;
   }

   .section-testimonials .col-author {
      --column-width: 6;
      padding-top: 0;
      order: 2;
   }

   .section-testimonials .col-whitespace {
      display: none;
   }

   .section-testimonials .col-quote {
      --column-width: 6;
   }

   .section-testimonials .testimonials-list {
      margin-top: var(--section-padding);
   }

   .section-testimonials .col-quote .spacer {
      width: 0;
   }
   
}

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

   .section-testimonials h3 {
      font-size: calc((100vw - (var(--container-padding) * 2)) * 0.075);
      line-height: 1.2;
   } 
}

/* ------------------------- Section - Reel Small -------------------------------------------------- */

.section-reel-small {
   padding-bottom: 0;
}

.section-reel-small .row {
   justify-content: center;
}

.section-reel-small .col {
   --column-width: 4;
}

.section-reel-small .col figure {
   width: 100%;
   position: relative;
}

.section-reel-small .col figure::before {
   content: "";
   display: block;
   padding-bottom: 80%;
}

.section-reel-small .col:has(.magnetic-overlay) :is(picture, .styled-video) {
   transition: var(--animation-ease);
   transform: scale(1) rotate(0.001deg);
}

.section-reel-small .col:has(.magnetic-overlay .magnetic-click:hover) :is(picture, .styled-video) {
   transform: scale(1.05) rotate(0.001deg);
}

/* ------------------------- Section - Biglink -------------------------------------------------- */

.section-biglink .row {
   gap: calc(var(--gap-l) * 1.5) var(--main-grid-gap);
}

.section-biglink .col-title {
   --column-width: 12;
}

.section-biglink .col-text {
   --column-width: 12;
}

.section-biglink .col-text .col-row {
   max-width: calc(var(--title-size)* 12.6);
}

.section-biglink .col-text .spacer {
   width: calc((var(--main-grid-column-width) * 4) + (var(--main-grid-gap) * 4)); 
   display: inline-block;
   pointer-events: none;
}

.section-biglink .col-number {
   --column-width: 12;
   align-items: flex-end;
}

.section-biglink .col-whitespace {
   --column-width: 4;
}

.section-biglink .col-btn {
   --column-width: 8;
}

/* About */

.section-biglink-about {
   padding-bottom: calc(var(--section-padding) * 2);
}

.section-biglink-about .col-number {
   display: none;
}

.section-biglink-about .col-text .spacer {
   width: calc((var(--main-grid-column-width) * 2) + (var(--main-grid-gap) * 2)); 
}

.section-biglink-about .col-whitespace {
   --column-width: 2;
}

.section-biglink-about .col-btn {
   --column-width: 10;
}

.section-biglink-about .col-text .col-row {
   max-width: calc(var(--title-size)* 12.4);
}

@media screen and (min-width: 1025px) {
   .section-biglink .col-title, 
   .section-biglink .col-number {
      position: absolute;
      top: 1.25em;
   }
}

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

   .section-biglink .col-text {
      --column-width: 6;
   }

   .section-biglink .col-btn {
      --column-width: 6;
   }

   .section-biglink {
      padding-top: var(--gap-l);
   }

   .section-biglink .col-whitespace {
      display: none;
   }

   .section-biglink .col-number {
      display: none;
   }

   .section-biglink .col-text .spacer {
      width: 0;
   }
}

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

   .section-biglink .col-text {
      --column-width: 4;
   }

   .section-biglink .col-btn {
      --column-width: 4;
   }
}

/* ------------------------- Section - FAQ -------------------------------------------------- */

.section-faq {
   padding-top: calc(var(--section-padding) * 0.5);
   overflow: hidden;
}

.section-faq .row {
   gap: 0 var(--main-grid-gap);
}

.section-faq .col-title {
   --column-width: 12;
   border-bottom: 1px solid var(--color-border);
   padding-bottom: 1.8em;
}

.section-faq .col-text {
   --column-width: 12;
}

.section-faq .col-text .col-row {
   max-width: calc(var(--title-size) * 12.6);
}

.section-faq .col-text .spacer {
   width: calc((var(--main-grid-column-width) * 4) + (var(--main-grid-gap) * 4)); 
   display: inline-block;
   pointer-events: none;
}

.section-faq .col-number {
   --column-width: 12;
   align-items: flex-end;
}

.section-faq .col-whitespace {
   --column-width: 4;
}

.section-faq .col-accordion {
   --column-width: 8;
}

.section-faq .col-accordion .col-row {
   padding-bottom: 1.8em;
}


@media screen and (min-width: 1025px) {
   .section-faq .col-title, 
   .section-faq .col-number {
      position: absolute;
      top: 0.15em;
   }
}

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

   .section-faq .col-accordion .col-row {
      display: none;
   }

   .section-faq .col-whitespace {
      display: none;
   }

   .section-faq .col-number {
      display: none;
   }
   
}

/* ------------------------- Section - FAQ -------------------------------------------------- */

.section-work-pretitle {
   padding-bottom: calc(var(--gap) * 1.25);
}

.section-work-pretitle .row {
   justify-content: space-between;
}

@media screen and (max-width: 1024px) {
   .section-work-pretitle .col-number {
      display: none;
   }
}

/* ------------------------- Section - About Mission -------------------------------------------------- */

.section-about-mission {
   padding-top: 0;
   padding-bottom: calc(var(--section-padding) * 1.5);
}

.section-about-mission.row.columns {
   gap: var(--section-padding) var(--main-grid-gap);
}

.section-about-mission .col-title {
   --column-width: 6;
   gap: var(--gap-l);
}

.section-about-mission .col-whitespace {
   --column-width: 3;
}

.section-about-mission .col-image {
   --column-width: 3;
}

.section-about-mission .col-title h4 {
   position: absolute;
   top: 0.6em;
   left: 0;
}

.section-about-mission .spacer {
   width: calc((var(--main-grid-column-width) * 1.5) + (var(--main-grid-gap) * 1)); 
   display: inline-block;
   pointer-events: none;
}

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

   .section-about-mission .col-title {
      --column-width: 4;
   }

   .section-about-mission .col-whitespace {
      display: none;
   }
   
   .section-about-mission .col-image {
      --column-width: 2;
      order: 2;
   }

}

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

   .section-about-mission {
      padding-bottom: var(--gap);
   }
   
   .section-about-mission .col-title {
      --column-width: 4;
   }
   
   .section-about-mission .col-image {
      padding-top: var(--gap-l);
      --column-width: 4;
   }
}

/* ------------------------- Section - Team -------------------------------------------------- */

.section-team {
   padding-top: var(--gap);
   padding-bottom: 0;
   border-top: 1px solid var(--color-border);
}

.section-team .row-title {
   padding-bottom: var(--section-padding);
}

.section-team .col-title {
   --column-width: 7;
}

.section-team .col-number {
   --column-width: 5;
   align-items: flex-end;
   padding-top: calc(var(--gap) * 0.5);
}

.section-team .col-teamname {
   --column-width: 3;
}

/* .section-team .col-teamname .col-row {
   position: sticky;
   top: calc(30 * var(--vh));
} */

.section-team .row-grid {
   padding-bottom: var(--section-padding);
}

.section-team .col-grid {
   --column-width: 9;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   gap: calc(var(--gap-l) * 1.5) var(--main-grid-gap);
}

.section-team .col-grid .styled-media {
   display: flex;
   flex-direction: column;
   width: calc((var(--main-grid-column-width) * 3) + (var(--main-grid-gap) * 2));
}

.section-team .col-grid figure {
   position: relative;
   width: 100%;
   overflow: hidden;
}

.section-team .col-grid figure::before {
   content: "";
   display: block;
   padding-bottom: 125%;
}

.section-team .col-grid .card-description {
   display: flex;
   flex-direction: column;
}

.section-team .col-grid .hover-figure {
   opacity: 0;
   visibility: hidden;
}

.section-team .col-grid .styled-media figure:hover .hover-figure {
   opacity: 1;
   visibility: visible;
}

@media screen and (max-width: 1024px) {
   .section-team .col-number {
      display: none;
   }

   .section-team .col-teamname {
      --column-width: 6;
   }

   .section-team .col-title {
      --column-width: 6;
   }

   .section-team .col-grid {
      --column-width: 6;
   }
   
}


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

   .section-team .col-teamname {
      --column-width: 4;
   }

   .section-team .col-title {
      --column-width: 4;
   }

   .section-team .col-grid {
      --column-width: 4;
   }

   .section-team .col-grid .styled-media {
      width: 100%;
   }
}

/* ------------------------- Section - Stand -------------------------------------------------- */


.section-about-stand .row.columns {
   gap: var(--se) var(--main-grid-gap);
   align-items: flex-start;
}

.section-about-stand .col-title {
   --column-width: 3;
}

.section-about-stand .col-whitespace {
   --column-width: 2;
}

.section-about-stand .col-list {
   --column-width: 6;
   display: flex;
   flex-direction: column;
   gap: var(--section-padding);
}

.section-about-stand .col-list li {
   display: flex;
   flex-direction: column;
   position: relative;
   width: 100%;
}

.section-about-stand .col-number {
   --column-width: 1;
   align-items: flex-end;
}

.section-about-stand .col-list .col-row-subtitle {
   position: absolute;
   top: calc(var(--title-size) * 0.1);
   left: 0;
}

.section-about-stand .col-list .spacer {
   width: calc((var(--main-grid-column-width) * 1) + (var(--main-grid-gap) * 1)); 
   display: inline-block;
   pointer-events: none;
}

@media screen and (min-width: 1025px) {

   .section-about-stand .col-title {
      position: sticky;
      top: calc(30 * var(--vh));
   }

   .section-about-stand .col-number {
      position: sticky;
      top: calc(30 * var(--vh));
   }
}

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

   .section-about-stand .col-title {
      padding-bottom: var(--section-padding);
   }
   
   .section-about-stand .col-whitespace {
      display: none;
   }
   
   .section-about-stand .col-list {
      --column-width: 6;
      gap: var(--section-padding);
   }

   .section-about-stand .col-number {
      display: none;
   }
   
   .section-about-stand .col-list .spacer {
      width: calc((var(--main-grid-column-width) * 1) + (var(--main-grid-gap) * 1));
   }
}

@media screen and (max-width: 540px) {
   
   .section-about-stand .col-list {
      --column-width: 4;
   }
}


/* ------------------------- Section - Text-page Single Header -------------------------------------------------- */

.section-textpage-single-header .row.columns {
   min-height: calc(var(--vh)* 60);
}

@media screen and (max-width: 1024px) {
   .section-textpage-single-header .row.columns {
      min-height: unset;
   }
}

/* ------------------------- Section - Text-page Single Content -------------------------------------------------- */

.section-textpage-single-content {
   padding-top: 0;
}

.section-textpage-single-content .row:first-child {
   border-top: 1px solid var(--color-border);
   padding-top: var(--gap-l);
}

.section-textpage-single-content .row {
   padding-bottom: var(--section-padding);
   gap: calc(var(--gap-l) * 1.5) var(--main-grid-gap);
}

.section-textpage-single-content .col-title {
   --column-width: 2;
}

.section-textpage-single-content .col-whitespace {
   --column-width: 2;
}

.section-textpage-single-content .col-text {
   --column-width: 7;
}

@media screen and (max-width: 1024px) {
   
   .section-textpage-single-content .col-title {
      --column-width: 6;
   }
   
   .section-textpage-single-content .col-whitespace {
      display: none;
   }
   
   .section-textpage-single-content .col-text {
      --column-width: 6;
   }
}

@media screen and (max-width: 1024px) {
   
   .section-textpage-single-content .col-title {
      --column-width: 4;
   }
   
   .section-textpage-single-content .col-text {
      --column-width: 4;
   }
}

/* ------------------------- Section - Error -------------------------------------------------- */

.section-error {
   padding-top: 0;
   padding-bottom: 0;
   overflow: hidden;
}

.section-error .full-height-box {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   min-height: calc(var(--vh) * 100);
   padding-top: calc(var(--nav-height) - var(--gap-l));
   padding-bottom: var(--gap);
}

.section-error .row-404 {
   flex-grow: 1;
   align-items: center;
}

.section-error .row-text {
   gap: var(--gap-l) var(--main-grid-gap);
}

.section-error h1 {
   font-weight: 800;
   display: flex;
   flex-direction: column;
   align-items: center;
   font-size: calc((100vw - (var(--container-padding) * 2)) * 0.398);
   transform: translateX(-0.75%);
}

.section-error .col-title {
   --column-width: 5;
}

.section-error .col-btn {
   --column-width: 7;
   align-items: flex-end;
   justify-content: flex-end;
   padding-bottom: calc(var(--gap) * 0.5);
}

.section-error .col-btn .link.xl .link-click {
   padding: 0 0 0.2em 0;
}

/* Success */

.section-success h1 {
   
   /* Success */
   font-size: calc((100vw - (var(--container-padding) * 2)) * 0.1605);
   transform: translateX(0%);

   /* Sent */
   font-size: calc((100vw - (var(--container-padding) * 2)) * 0.2875);
   transform: translateX(-0.5%);
}

@media screen and (min-width: 1025px) {
   .main-nav-bar.is-error .logo{
      transform: scale(0.2) rotate(0.001deg);
   }
}

@media screen and (max-width: 1024px) {
   
   .section-error .full-height-box {
      padding-top: calc(var(--nav-height) + var(--section-padding));
   }
   .section-error .row-404 {
      order: 2;
      align-items: flex-end;
   }

   .section-error .col-title {
      --column-width: 6;
   }
   
   .section-error .col-btn {
      --column-width: 6;
      align-items: flex-start;
      justify-content: flex-start;
   }
}

/* ------------------------- Section - Forms -------------------------------------------------- */

.section-forms {
   padding-top: 0;
   padding-bottom: calc(var(--gap-l) * 2);
   overflow: hidden;
}

.section-forms .row {
   position: relative;
   padding-top: calc(var(--gap) * 1.5);
   gap: calc(var(--gap-l) * 2.5) var(--main-grid-gap);
}

.section-forms .row .col-title {
   --column-width: 2;
}

.section-forms .row .col-whitespace {
   --column-width: 2;
}

.section-forms .row .col-forms {
   --column-width: 8;
}

.section-forms .row .col-forms .select-form {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   gap: 0.75em var(--main-grid-gap);
   z-index: 10;
}

.section-forms .row .col-forms .label-select-form {
   width: calc((var(--main-grid-column-width) * 2) + (var(--main-grid-gap) * 1)) ;
   padding: calc(var(--form-sizing-unit) * 1.1) 0;
   align-items: center;
   display: flex;
}

.section-forms .row .col-forms .select-form-btn {
   width: calc((var(--main-grid-column-width) * 6) + (var(--main-grid-gap) * 5)) ;
}

.section-forms .row .col-forms .label-select-form span {
   line-height: 1.25;
}

.section-forms .row .col-forms .forms-switch {
   display: flex;
   position: relative;
   flex-direction: column;
}

.section-forms .row .col-forms .single-form {
   display: flex;
   flex-direction: column;
   position: relative;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
}

.section-forms .row .col-forms .single-form:nth-child(1) {
   position: relative;
}

.section-forms .row .col-forms .single-form[data-form-status="active"] {
   opacity: 1;
   visibility: visible;
}

.section-forms .row .col-forms .single-form[data-form-status="not-active"] {
   opacity: 0;
   visibility: hidden;
   transition: 0.25s ease;
}

@media screen and (max-width: 1024px) {
   .section-forms .row .col-title {
      --column-width: 6;
   }
   
   .section-forms .row .col-whitespace {
      display: none;
   }
   
   .section-forms .row .col-forms {
      --column-width: 6;
   }

   .section-forms .row .col-forms .label-select-form {
      width: 100%;
   }
   
   .section-forms .row .col-forms .select-form-btn {
      width: 100%;
   }
   
}

@media screen and (max-width: 540px) {
   .section-forms .row .col-title {
      --column-width: 4;
   }

   .section-forms .row .col-forms {
      --column-width: 4;
   }
   
}


/* Select Btn */

.select-btn {
   --select-height: 4em;
   --select-items: 1;
   width: 100%;
   font-size: 1.1em;
   height: var(--select-height);
   position: relative;
}

.select-btn .select-btn-expand {
   display: flex;
   flex-direction: column;
   height: var(--select-height);
   transition: var(--animation-primary);
   box-shadow: 0px 0.25em 0.5em rgba(var(--color-dark-rgb), 0.06);
   overflow: hidden;
   background-color: var(--color-light);
}

.select-btn[data-select-btn-status="active"] .select-btn-expand {
   height: calc(var(--select-height) * var(--select-items));
}

.select-btn .select-btn-top {
   border: 1px solid #D8D8D8;
   height: var(--select-height);
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 1.5em;
   flex-shrink: 0;
}

.select-btn .select-btn-top .select-click {
   cursor: pointer;
}

.select-btn .icon {
   width: 1em;
   height: 1em;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: var(--animation-primary);
   transform: rotate(90deg);
}

.select-btn[data-select-btn-status="active"] .icon {
   transform: rotate(270deg);
}

.select-btn .icon svg {
   width: 100%;
}

.select-btn .icon svg * {
   stroke: var(--color-dark);
   stroke-width: 0.12em;
}

.select-btn .select-btn-top [data-form-change-text="default"] {
   color: rgba(var(--color-black-rgb), 1);
}

.select-btn .select-btn-options {
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
   background-color: var(--color-dark);
}

.select-btn .select-btn-options .select-option {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   position: relative;
   cursor: pointer;
   padding: 0 1.5em;
   height: var(--select-height);
   flex-shrink: 0;
   gap: 0.75em;
   order: 2;
   border-top: 1px solid #454545;
}

.select-btn .select-btn-options .select-option:first-child {
   border-top: 0;
}

.select-btn .select-btn-options .select-option span {
   color: var(--color-light);
}

@media screen and (max-width: 540px) {
   .select-btn .select-btn-top {
      padding: 0 var(--gap);
   }

   .select-btn .select-btn-options .select-option {
      padding: 0 var(--gap);
   }
}

/* ------------------------- Section - Locations -------------------------------------------------- */

.section-locations {
   padding-top: 0;
}

.section-locations .row.columns {
   padding-bottom: var(--section-padding);
   gap: var(--gap-l) var(--main-grid-gap);
   border-top: 1px solid var(--color-border);
   padding-top: var(--gap);
}

.section-locations .row-btn {
   padding-top: calc(var(--gap-l) * 2);
   border-top: 1px solid var(--color-border);
}

.section-locations .row-btn .link.xl .link-click {
   padding: 0 0 0.2em 0;
}

.section-locations .row-btn .col-title {
   padding-top: 1em;
}

.section-locations .col-title {
   padding-top: 0.5em;
   --column-width: 6
}

.section-locations .col-info {
   --column-width: 6;
   display: flex;
   gap: var(--gap-l);
}

.section-locations .col-info .col-row {
   max-width: calc(var(--title-size) * 5.5);
}

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

   .section-locations {
      padding-bottom: 0;
   }

   .section-locations .row-btn {
      padding-top: var(--gap);
   }
}


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

   .section-locations .col-title {
      --column-width: 4;
   }
   
   .section-locations .col-info {
      --column-width: 4;
   }
}

@media screen and (max-width: 450px) {
   .section-locations .row-btn .link.xl .link-click {
      flex-direction: column;
   }
}

/* 폼 스타일 */
.form__group { margin-bottom: 1.5rem; }
.form__field { 
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  font-size: 1rem;
}
.submit-btn {
  width: 100% !important; /* JS 대신 CSS로 처리 */
  padding: 1rem;
  background: #000;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
}