/**
 * Theme name: Hands On - By Capa
 **/

@charset 'utf-8';

/** fonts **/

@font-face {
    font-family: 'Inter 28pt';

    src: url('./fonts/Inter28pt-Light.woff2') format('woff2'),
         url('./fonts/Inter28pt-Light.woff') format('woff');

    font-style: normal;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 28pt';

    src: url('./fonts/Inter28pt-Regular.woff2') format('woff2'),
         url('./fonts/Inter28pt-Regular.woff') format('woff');

    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 28pt';

    src: url('./fonts/Inter28pt-SemiBold.woff2') format('woff2'),
         url('./fonts/Inter28pt-SemiBold.woff') format('woff');

    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Inter 28pt';

    src: url('./fonts/Inter28pt-ExtraBold.woff2') format('woff2'),
         url('./fonts/Inter28pt-ExtraBold.woff') format('woff');

    font-style: normal;
    font-weight: 800;
    font-display: swap;
}


/** reset **/

* {
    border-radius: 0;

    border: 0;
    margin: 0;
    padding: 0;

    resize: none;
    outline: none;

    background: transparent;
}

*,
*::after,
*::before {
    box-sizing: border-box;
}

p {
    text-wrap: pretty;
}

a {
    text-decoration: none;
}

button {
    cursor: pointer
}

ul, ol, li {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

h1, h2, h3, h4, h5, h6, p {
    overflow-wrap: break-word;
}

button, input, select, textarea {
    -webkit-appearance: none;
            appearance: none;

    font: inherit;
}

img, svg, video, canvas, iframe, picture {
    height: auto;
    display: block;
    max-width: 100%;
    max-height: 100%;
}

body, html {
    width: 100%;
    overflow-x: hidden;
}

body, html {
    color: black;

    font-size: 10px;
    line-height: 1.2;

    -webkit-font-smoothing: antialiased;
            font-smoothing: antialiased;

    background: #DBDDCF;
}

@media (max-width: 1400px) {
    html, body {
        font-size: 8px;
    }
}

@media (max-width: 992px) {
    h1, h2, h3, h4, h5, h6, p {
        text-wrap: auto;
    }
}


/** wcag **/

.for-display { speak: none }
.for-sreader, .screen-reader-text {
    width: 0;
    height: 0;

    display: block;
    overflow: hidden;

    font-size: 14px;
}


/** flexbox **/

.flex        { display: flex        }
.flex.inline { display: inline-flex }

.flex.wrap   { flex-wrap: wrap        }
.flex.column { flex-direction: column }

.flex.al-end    { align-items: flex-end   }
.flex.al-start  { align-items: flex-start }
.flex.al-center { align-items: center     }

.flex.jf-end     { justify-content: flex-end      }
.flex.jf-start   { justify-content: flex-start    }
.flex.jf-center  { justify-content: center        }
.flex.jf-around  { justify-content: space-around  }
.flex.jf-between { justify-content: space-between }

.flex > * {
    flex-grow: 0;
    flex-shrink: 0;
}

.flex > .grow   { flex-grow: 1   }
.flex > .shrink { flex-shrink: 1 }


/** texts **/

.text {
    color: #555555;

    font-size: 1.6rem;
    font-weight: 400;
    font-family: 'Azeret Mono', sans-serif;

    line-height: 150%;
}

.text p:not(:last-child) {
    margin: 0 0 1em;
}

.text.upper { text-transform: uppercase }
.text.lower { text-transform: lowercase }

.text.small {
    font-size: 1.2rem;
}

.text.title {
    color: #555555;

    font-size: 4.0rem;
    font-weight: 300;
    font-family: 'Inter 28pt', sans-serif;

    line-height: 120%;
}

.text.title.small {
    font-size: 2.4rem;
}

.text.title b,
.text.title strong {
    font-weight: 800;
}

.text.title.small b,
.text.title.small strong {
    font-weight: 500;
}

.text.elements {
    color: #555555;

    font-size: 1.6rem;
    font-weight: 300;
    font-family: 'Azeret Mono', sans-serif;
}

@media (max-width: 992px) {
    .text {
        font-size: 1.4rem;
    }
    .text.small {
        font-size: 1.0rem;
    }
    .text.title {
        font-size: 3.5rem;
    }
    .text.title.small {
        font-size: 2.1rem;
    }

    .text.elements {
        font-size: 1.4rem;
    }
}


/** texts animations **/

@keyframes wave {
    0%   { transform: translateY(-0.0rem); opacity: 0 }
    50%  { transform: translateY(-1.0rem); opacity: 1 }
    100% { transform: translateY(-0.0rem); opacity: 1 }
}

@keyframes wave-no-y {
    0%   { transform: translateY(-0.0rem); opacity: 0 }
    50%  { transform: translateY(-0.0rem); opacity: 1 }
    100% { transform: translateY(-0.0rem); opacity: 1 }
}

.text.wave {
    text-wrap: balance;
    white-space: nowrap;
}

.text.wave span {
    opacity: 0;
    transform: translateY(-0.0rem);
    animation-delay: 0.00s
}

.text.wave.visible span {
    display: inline-block;
    animation: wave 0.6s ease-in-out forwards;
}

.text.wave.no-y.visible span {
    display: inline-block;
    animation: wave-no-y 0.6s ease-in-out forwards;
}

.text.wave.visible span:nth-child(1) { animation-delay: 0.00s }
.text.wave.visible span:nth-child(2) { animation-delay: 0.02s }
.text.wave.visible span:nth-child(3) { animation-delay: 0.04s }
.text.wave.visible span:nth-child(4) { animation-delay: 0.06s }
.text.wave.visible span:nth-child(5) { animation-delay: 0.08s }
.text.wave.visible span:nth-child(6) { animation-delay: 0.10s }
.text.wave.visible span:nth-child(7) { animation-delay: 0.12s }
.text.wave.visible span:nth-child(8) { animation-delay: 0.14s }
.text.wave.visible span:nth-child(9) { animation-delay: 0.16s }
.text.wave.visible span:nth-child(10) { animation-delay: 0.18s }
.text.wave.visible span:nth-child(11) { animation-delay: 0.20s }
.text.wave.visible span:nth-child(12) { animation-delay: 0.22s }
.text.wave.visible span:nth-child(13) { animation-delay: 0.24s }
.text.wave.visible span:nth-child(14) { animation-delay: 0.26s }
.text.wave.visible span:nth-child(15) { animation-delay: 0.28s }
.text.wave.visible span:nth-child(16) { animation-delay: 0.30s }
.text.wave.visible span:nth-child(17) { animation-delay: 0.32s }
.text.wave.visible span:nth-child(18) { animation-delay: 0.34s }
.text.wave.visible span:nth-child(19) { animation-delay: 0.36s }
.text.wave.visible span:nth-child(20) { animation-delay: 0.38s }
.text.wave.visible span:nth-child(21) { animation-delay: 0.40s }
.text.wave.visible span:nth-child(22) { animation-delay: 0.42s }
.text.wave.visible span:nth-child(23) { animation-delay: 0.44s }
.text.wave.visible span:nth-child(24) { animation-delay: 0.46s }
.text.wave.visible span:nth-child(25) { animation-delay: 0.48s }
.text.wave.visible span:nth-child(26) { animation-delay: 0.50s }
.text.wave.visible span:nth-child(27) { animation-delay: 0.52s }
.text.wave.visible span:nth-child(28) { animation-delay: 0.54s }
.text.wave.visible span:nth-child(29) { animation-delay: 0.56s }
.text.wave.visible span:nth-child(30) { animation-delay: 0.58s }
.text.wave.visible span:nth-child(31) { animation-delay: 0.60s }
.text.wave.visible span:nth-child(32) { animation-delay: 0.62s }
.text.wave.visible span:nth-child(33) { animation-delay: 0.64s }
.text.wave.visible span:nth-child(34) { animation-delay: 0.66s }
.text.wave.visible span:nth-child(35) { animation-delay: 0.68s }
.text.wave.visible span:nth-child(36) { animation-delay: 0.70s }
.text.wave.visible span:nth-child(37) { animation-delay: 0.72s }
.text.wave.visible span:nth-child(38) { animation-delay: 0.74s }
.text.wave.visible span:nth-child(39) { animation-delay: 0.76s }
.text.wave.visible span:nth-child(40) { animation-delay: 0.78s }
.text.wave.visible span:nth-child(41) { animation-delay: 0.80s }
.text.wave.visible span:nth-child(42) { animation-delay: 0.82s }
.text.wave.visible span:nth-child(43) { animation-delay: 0.84s }
.text.wave.visible span:nth-child(44) { animation-delay: 0.86s }
.text.wave.visible span:nth-child(45) { animation-delay: 0.88s }
.text.wave.visible span:nth-child(46) { animation-delay: 0.90s }
.text.wave.visible span:nth-child(47) { animation-delay: 0.92s }
.text.wave.visible span:nth-child(48) { animation-delay: 0.94s }
.text.wave.visible span:nth-child(49) { animation-delay: 0.96s }
.text.wave.visible span:nth-child(50) { animation-delay: 0.98s }
.text.wave.visible span:nth-child(51) { animation-delay: 1.00s }
.text.wave.visible span:nth-child(52) { animation-delay: 1.02s }
.text.wave.visible span:nth-child(53) { animation-delay: 1.04s }
.text.wave.visible span:nth-child(54) { animation-delay: 1.06s }
.text.wave.visible span:nth-child(55) { animation-delay: 1.08s }

.text.wave.visible span:nth-child(56) { animation-delay: 1.10s }
.text.wave.visible span:nth-child(57) { animation-delay: 1.12s }
.text.wave.visible span:nth-child(58) { animation-delay: 1.14s }
.text.wave.visible span:nth-child(59) { animation-delay: 1.16s }
.text.wave.visible span:nth-child(60) { animation-delay: 1.18s }
.text.wave.visible span:nth-child(61) { animation-delay: 1.20s }
.text.wave.visible span:nth-child(62) { animation-delay: 1.22s }
.text.wave.visible span:nth-child(63) { animation-delay: 1.24s }
.text.wave.visible span:nth-child(64) { animation-delay: 1.26s }
.text.wave.visible span:nth-child(65) { animation-delay: 1.28s }
.text.wave.visible span:nth-child(66) { animation-delay: 1.30s }
.text.wave.visible span:nth-child(67) { animation-delay: 1.32s }
.text.wave.visible span:nth-child(68) { animation-delay: 1.34s }
.text.wave.visible span:nth-child(69) { animation-delay: 1.36s }
.text.wave.visible span:nth-child(70) { animation-delay: 1.38s }
.text.wave.visible span:nth-child(71) { animation-delay: 1.40s }
.text.wave.visible span:nth-child(72) { animation-delay: 1.42s }
.text.wave.visible span:nth-child(73) { animation-delay: 1.44s }
.text.wave.visible span:nth-child(74) { animation-delay: 1.46s }
.text.wave.visible span:nth-child(75) { animation-delay: 1.48s }
.text.wave.visible span:nth-child(76) { animation-delay: 1.50s }
.text.wave.visible span:nth-child(77) { animation-delay: 1.52s }
.text.wave.visible span:nth-child(78) { animation-delay: 1.54s }
.text.wave.visible span:nth-child(79) { animation-delay: 1.56s }
.text.wave.visible span:nth-child(80) { animation-delay: 1.58s }
.text.wave.visible span:nth-child(81) { animation-delay: 1.60s }
.text.wave.visible span:nth-child(82) { animation-delay: 1.62s }
.text.wave.visible span:nth-child(83) { animation-delay: 1.64s }
.text.wave.visible span:nth-child(84) { animation-delay: 1.66s }
.text.wave.visible span:nth-child(85) { animation-delay: 1.68s }

.text.wave.visible span:nth-child(86) { animation-delay: 1.70s }
.text.wave.visible span:nth-child(87) { animation-delay: 1.72s }
.text.wave.visible span:nth-child(88) { animation-delay: 1.74s }
.text.wave.visible span:nth-child(89) { animation-delay: 1.76s }
.text.wave.visible span:nth-child(90) { animation-delay: 1.78s }
.text.wave.visible span:nth-child(91) { animation-delay: 1.80s }
.text.wave.visible span:nth-child(92) { animation-delay: 1.82s }
.text.wave.visible span:nth-child(93) { animation-delay: 1.84s }
.text.wave.visible span:nth-child(94) { animation-delay: 1.86s }
.text.wave.visible span:nth-child(95) { animation-delay: 1.87s }
.text.wave.visible span:nth-child(96) { animation-delay: 1.88s }
.text.wave.visible span:nth-child(97) { animation-delay: 1.90s }
.text.wave.visible span:nth-child(98) { animation-delay: 1.92s }
.text.wave.visible span:nth-child(99) { animation-delay: 1.94s }
.text.wave.visible span:nth-child(100) { animation-delay: 1.96s }


/** containers **/

:root {
    --wrapper: 1200px;
    --wrapper-offset: calc((100vw - 1200px) / 2);
}

.wrapper {
    width: calc(100% - 40px);

    margin-left: auto;
    margin-right: auto;

    max-width: var(--wrapper);
}

@media (max-width: 1400px) {
    :root {
        --wrapper: 960px;
        --wrapper-offset: calc((100vw - 960px) / 2);
    }
}

@media (max-width: 1000px) {
    :root {
        --wrapper-offset: 20px;
    }
}


/** object position **/

.cover,
.contain {
    object-fit: cover;
    object-position: center;
}

.contain { object-fit: contain }

.cover.left,  .contain.left  { object-position: left center  }
.cover.right, .contain.right { object-position: right center }

.cover.top,       .contain.top       { object-position: center top }
.cover.top.left,  .contain.top.left  { object-position: left top   }
.cover.top.right, .contain.top.right { object-position: right top  }

.cover.bottom,       .contain.bottom       { object-position: center bottom }
.cover.bottom.left,  .contain.bottom.left  { object-position: left bottom   }
.cover.bottom.right, .contain.bottom.right { object-position: right bottom  }


/** site header **/

.site-header {
    z-index: 100;

    top: 0;
    left: 0;

    width: 100%;
    height: 0px;

    overflow: visible;
    position: absolute;
}

.site-header h1 {
    top: 4.0rem;
    left: 12.0rem;
    width: 28.0rem;

    position: absolute;
}

.site-header nav {
    top: 50vh;
    right: 2.7rem;
    padding: 3.0rem 2.4rem;

    position: fixed;
    overflow: visible;

    transform: translateY(-50%);
    background: rgba(194,195,187, 0.1);
    backdrop-filter: blur(0.5rem);

    border-radius: 1.5rem;
}

.site-header nav .label {
    color: #FFFFFF;

    top: 3.0rem;
    right: calc(100% + 2.0rem);
    height: 1.5rem;
    opacity: 0;

    display: block;
    overflow: visible;
    position: absolute;

    transform: scaleX(0);
    transition: top 0.2s ease-out,
                color 0.2s ease-out,
                opacity 0.2s ease-out,
                transform 0.2s ease-out;

    -webkit-pointer-events: none;
            pointer-events: none;

    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.5rem;
    font-family: 'Azeret Mono', sans-serif;

    text-align: right;
    text-transform: uppercase;
    letter-spacing: 0.40em;

    white-space: nowrap;
}

.site-header nav::after,
.site-header nav a::after {
    inset: -1px;
    padding: 1px;

    display: block;
    content: '';
    position: absolute;

    border-radius: inherit;
    background: linear-gradient(0deg, #C2C3BB 0%, #5D5D59 100%);

    -webkit-mask: linear-gradient(#fff 0 0) content-box,
                  linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;
            mask-composite: exclude;

    pointer-events: none;
}

.site-header nav a::after {
    background: linear-gradient(0deg, #5D5D59 0%, #C2C3BB 100%);
}

.site-header nav li { margin: 2.0rem 0 }
.site-header nav li:first-child { margin-top: 0 }
.site-header nav li:last-child { margin-bottom: 0 }

.site-header nav li a {
    width: 1.5rem;
    height: 1.5rem;

    display: block;
    overflow: visible;
    position: relative;

    transition: background 0.3s ease-out,
                box-shadow 0.3s ease-out;

    border-radius: 50%;
}

.site-header nav a.current {
    background: #D9D9D9;
    box-shadow: 0 0 2.6rem 0 #FFFFFF;
}

.site-header nav.show-label .label {
    opacity: 1;
    transform: scaleX(1);
}


.site-header nav.dark .label {
    color: #555555;
}

.site-header nav.dark a.current {
    background: #555555;
    box-shadow: 0 0 2.6rem 0 #555555;
}


@media (any-hover: hover) {
    .site-header nav:hover .label {
        opacity: 1;
        transform: scaleX(1);
    }

    .site-header nav a:hover {
        background: #D9D9D988;
    }

    .site-header nav.dark a:hover {
        background: #55555588;
    }
}

@media (max-width: 1200px) {
    .site-header {
        height: 10rem;

        top: 0;
        left: 0;
        right: 0;

        content: '';
        display: block;
        position: fixed;

        background: #DBDDCF;
    }

    .site-header nav {
        inset: 0;
        border: 0;
        transform: translateY(-100%);
        transition: transform 1s cubic-bezier(0.76, 0, 0.24, 1);
        position: fixed;
        background: rgba(85,85,85,0.8);
        border-radius: 0;
    }

    .site-header nav::after {
        display: none !important;
    }

    .menu-visible .site-header nav {
        transform: translateY(-0%);
    }

    .site-header nav,
    .site-header nav ul {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
    }

    .site-header nav li a {
        width: auto;
        height: auto;
        border-radius: 0;
        text-align: center;
    }

    .site-header nav li a::after { display: none }

    .site-header nav li a span {
        color: #ffffff;

        width: auto;
        height: auto;

        font-size: 3rem;
        font-weight: 400;
        line-height: 5rem;
        font-family: 'Azeret Mono', sans-serif;

        overflow: visible;
        letter-spacing: 0.40em;
        text-transform: uppercase;

        text-align: center;
    }

    .site-header nav a.current,
    .site-header nav.dark a.current {
        background: none;
        box-shadow: none;
        text-shadow: 0 0 2.6rem #FFFFFF;
    }

    .site-header nav .label { display: none !important }

    .site-header h1 {
        top: 3rem;
        position: fixed;
        transition: filter 0.3s ease-out;
    }

    .site-header .menu-toggle {
        top: 3.9rem;
        width: 4.0rem;
        right: 12.0rem;
        position: fixed;
    }

    .site-header .menu-toggle div {
        width: 100%;
        height: 3px;
        margin: 3px 0;
        background: #ffffff;
        transition: 0.3s ease-out;
    }

    .menu-visible .site-header .menu-toggle div:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .menu-visible .site-header .menu-toggle div:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    .menu-visible .site-header .menu-toggle div:nth-child(2) {
        opacity: 0;
    }

    /** .header-dark **/ .site-header h1 {
        filter: brightness(0);
    }

    /** .header-dark **/ .site-header .menu-toggle div {
        filter: brightness(0);
    }
}

@media (max-width: 1200px) and (any-hover: hover) {
    .site-header nav li a:hover,
    .site-header nav.dark li a:hover {
        background: none;
    }

    .site-header nav li a:hover span,
    .site-header nav.dark li a:hover span {
        color: rgba(255,255,255,0.8);
    }
}

@media (max-width: 992px) {
    .site-header h1 {
        left: 20px;
        width: 24rem;
    }

    .site-header .menu-toggle {
        right: 20px;
    }
}


/** banner **/

#banner {
    height: 56vw;
    position: relative;
    background: black;
}

#banner video {
    width: 100%;
    height: 100%;

    -webkit-pointer-events: none;
            pointer-events: none;
}

#banner::after {
    left: 0;
    right: 0;
    bottom: 0;
    height: 42%;

    content: '';
    display: block;
    position: absolute;

    background: radial-gradient(85% 95% at 50% 0%, #DBDDCF00 62%,
                                                   #DBDDCFFF 100%);
}

#banner::before {
    top: -14%;
    left: 0;
    width: 142%;
    height: 58%;

    content: '';
    display: block;
    position: absolute;

    transform: rotate(-180deg);
    background: radial-gradient(85% 95% at 50% 0%, #00000000 64%,
                                                   #000000FF 100%);

    pointer-events: none;
}

@media (max-width: 1200px) {
    #banner {
        height: 56vw;
        margin-top: 10rem;
    }

    #banner::before {
        display: none;
    }
}


/** concept **/

@keyframes circle-1-orbit-1-label {
      0% { transform: translate(2rem,-50%)               }
     25% { transform: translate(-50%,2rem)               }
     50% { transform: translate(calc(-100% - 2rem),-50%) }
     75% { transform: translate(-50%,calc(-100% - 2rem)) }
    100% { transform: translate(2rem,-50%)               }
}

@keyframes circle-1-orbit-2-label {
      0% { transform: translate(-50%,2rem)               }
     25% { transform: translate(calc(-100% - 2rem),-50%) }
     50% { transform: translate(-50%,calc(-100% - 2rem)) }
     75% { transform: translate(2rem,-50%)               }
    100% { transform: translate(-50%,2rem)               }
}

@keyframes circle-1-orbit-3-label {
      0% { transform: translate(calc(-100% - 2rem),-50%) }
     25% { transform: translate(-50%,calc(-100% - 2rem)) }
     50% { transform: translate(2rem,-50%)               }
     75% { transform: translate(-50%,2rem)               }
    100% { transform: translate(calc(-100% - 2rem),-50%) }
}

@keyframes circle-1-orbit-4-label {
      0% { transform: translate(-50%,calc(-100% - 2rem)) }
     25% { transform: translate(2rem,-50%)               }
     50% { transform: translate(-50%,2rem)               }
     75% { transform: translate(calc(-100% - 2rem),-50%) }
    100% { transform: translate(-50%,calc(-100% - 2rem)) }
}

@keyframes circle-2-orbit-1-label {
       0% { transform: translate(2rem,-50%)               }
    12.5% { transform: translate(2rem,0%)                 }
      25% { transform: translate(-50%,2rem)               }
    37.5% { transform: translate(calc(-100% - 2rem),0%)   }
      50% { transform: translate(calc(-100% - 2rem),-50%) }
    62.5% { transform: translate(calc(-100% - 2rem),0%)   }
      75% { transform: translate(-50%,calc(-100% - 2rem)) }
    87.5% { transform: translate(0%,calc(-100% - 2rem))   }
     100% { transform: translate(2rem,-50%)               }
}

@keyframes circle-2-orbit-2-label {
       0% { transform: translate(2rem,0%)                 }
    12.5% { transform: translate(-50%,2rem)               }
      25% { transform: translate(calc(-100% - 2rem),0%)   }
    37.5% { transform: translate(calc(-100% - 2rem),-50%) }
      50% { transform: translate(calc(-100% - 2rem),0%)   }
    62.5% { transform: translate(-50%,calc(-100% - 2rem)) }
      75% { transform: translate(0%,calc(-100% - 2rem))   }
    87.5% { transform: translate(2rem,-50%)               }
     100% { transform: translate(2rem,0%)                 }
}

@keyframes circle-2-orbit-3-label {
       0% { transform: translate(-50%,2rem)               }
    12.5% { transform: translate(calc(-100% - 2rem),0%)   }
      25% { transform: translate(calc(-100% - 2rem),-50%) }
    37.5% { transform: translate(calc(-100% - 2rem),0%)   }
      50% { transform: translate(-50%,calc(-100% - 2rem)) }
    62.5% { transform: translate(0%,calc(-100% - 2rem))   }
      75% { transform: translate(2rem,-50%)               }
    87.5% { transform: translate(2rem,0%)                 }
     100% { transform: translate(-50%,2rem)               }
}

@keyframes circle-2-orbit-4-label {
       0% { transform: translate(calc(-100% - 2rem),0%)   }
    12.5% { transform: translate(calc(-100% - 2rem),-50%) }
      25% { transform: translate(calc(-100% - 2rem),0%)   }
    37.5% { transform: translate(-50%,calc(-100% - 2rem)) }
      50% { transform: translate(0%,calc(-100% - 2rem))   }
    62.5% { transform: translate(2rem,-50%)               }
      75% { transform: translate(2rem,0%)                 }
    87.5% { transform: translate(-50%,2rem)               }
     100% { transform: translate(calc(-100% - 2rem),0%)   }
}

@keyframes circle-2-orbit-5-label {
       0% { transform: translate(calc(-100% - 2rem),-50%) }
    12.5% { transform: translate(calc(-100% - 2rem),0%)   }
      25% { transform: translate(-50%,calc(-100% - 2rem)) }
    37.5% { transform: translate(0%,calc(-100% - 2rem))   }
      50% { transform: translate(2rem,-50%)               }
    62.5% { transform: translate(2rem,0%)                 }
      75% { transform: translate(-50%,2rem)               }
    87.5% { transform: translate(calc(-100% - 2rem),0%)   }
     100% { transform: translate(calc(-100% - 2rem),-50%) }
}

@keyframes circle-2-orbit-6-label {
       0% { transform: translate(calc(-100% - 2rem),0%)   }
    12.5% { transform: translate(-50%,calc(-100% - 2rem)) }
      25% { transform: translate(0%,calc(-100% - 2rem))   }
    37.5% { transform: translate(2rem,-50%)               }
      50% { transform: translate(2rem,0%)                 }
    62.5% { transform: translate(-50%,2rem)               }
      75% { transform: translate(calc(-100% - 2rem),0%)   }
    87.5% { transform: translate(calc(-100% - 2rem),-50%) }
     100% { transform: translate(calc(-100% - 2rem),0%)   }
}

@keyframes circle-2-orbit-7-label {
       0% { transform: translate(-50%,calc(-100% - 2rem)) }
    12.5% { transform: translate(0%,calc(-100% - 2rem))   }
      25% { transform: translate(2rem,-50%)               }
    37.5% { transform: translate(2rem,0%)                 }
      50% { transform: translate(-50%,2rem)               }
    62.5% { transform: translate(calc(-100% - 2rem),0%)   }
      75% { transform: translate(calc(-100% - 2rem),-50%) }
    87.5% { transform: translate(calc(-100% - 2rem),0%)   }
     100% { transform: translate(-50%,calc(-100% - 2rem)) }
}

@keyframes circle-2-orbit-8-label {
       0% { transform: translate(-50%,calc(-100% - 2rem)) }
    12.5% { transform: translate(2rem,-50%)               }
      25% { transform: translate(2rem,0%)                 }
    37.5% { transform: translate(-50%,2rem)               }
      50% { transform: translate(calc(-100% - 2rem),0%)   }
    62.5% { transform: translate(calc(-100% - 2rem),-50%) }
      75% { transform: translate(calc(-100% - 2rem),0%)   }
    87.5% { transform: translate(-50%,calc(-100% - 2rem)) }
     100% { transform: translate(-50%,calc(-100% - 2rem)) }
}


#concept {
    padding: 10.0rem 0;
}

#concept .title {
    width: 50%;
    margin: 0 0 9.0rem 10.0rem;
}

#concept .galaxy {
    width: 86.0rem;
    height: 44.0rem;
    margin: 0 auto;
    position: relative;
}

#concept .galaxy .logo {
    width: 12.0rem;
    opacity: 0;
    transform: scale(1.2);

    transition: opacity 0.3s ease-out,
                transform 0.3s ease-out;

    transition-delay: 0s;
}

#concept .galaxy .logo.visible {
    opacity: 1;
    transform: scale(1.0);
    transition-delay: 1s;
}

#concept .galaxy .circle-1,
#concept .galaxy .circle-2 {
    top: 50%;
    left: 50%;

    width: 49.0rem;
    height: 28.0rem;

    border: 5px solid #C2C3BB;
    border-radius: 50%;

    position: absolute;
    transform: translate(-50%,-50%) rotateX(90deg);

    transition: border 0.6s ease-out,
                transform 0.6s ease-out;

    transition-delay: 0s;
}

#concept .galaxy .circle-1 .dot,
#concept .galaxy .circle-2 .dot {
    opacity: 0;

    top: calc(0% - 0.5rem);
    left: calc(50% - 0.5rem);
    width: 1.0rem;
    height: 1.0rem;

    overflow: visible;
    position: absolute;
    transition: 0.4s ease-out;
    background: #C2C3BB;

    offset-path: ellipse(24.5rem 14rem at center);
    offset-rotate: 0deg;
    offset-distance: 0%;

    border-radius: 50%;
}

#concept .galaxy .circle-1 .dot span,
#concept .galaxy .circle-2 .dot span {
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%,-50%);
    text-align: center;
    backface-visibility: visible;
}

#concept .galaxy .circle-1.visible,
#concept .galaxy .circle-2.visible {
    transform: translate(-50%,-50%) rotateX(0deg);
    border-width: 1px;
    transition-delay: 0.6s;
}

#concept .galaxy .circle-1.visible .dot,
#concept .galaxy .circle-2.visible .dot {
    opacity: 1;
}


#concept .galaxy .circle-2 {
    width: 86.0rem;
    height: 44.0rem;
}

#concept .galaxy .circle-2 .dot {
    offset-path: ellipse(43rem 22rem at center);
}

#concept .galaxy .circle-2.visible {
    transition-delay: 0.4s;
}


#concept .galaxy .circle-2 .dot:nth-child(1) { animation: circle-2-orbit-1 140s linear infinite }
#concept .galaxy .circle-2 .dot:nth-child(1) span { animation: circle-2-orbit-1-label 140s linear infinite }
#concept .galaxy .circle-2 .dot:nth-child(2) { animation: circle-2-orbit-2 140s linear infinite }
#concept .galaxy .circle-2 .dot:nth-child(2) span { animation: circle-2-orbit-2-label 140s linear infinite }
#concept .galaxy .circle-2 .dot:nth-child(3) { animation: circle-2-orbit-3 140s linear infinite }
#concept .galaxy .circle-2 .dot:nth-child(3) span { animation: circle-2-orbit-3-label 140s linear infinite }
#concept .galaxy .circle-2 .dot:nth-child(4) { animation: circle-2-orbit-4 140s linear infinite }
#concept .galaxy .circle-2 .dot:nth-child(4) span { animation: circle-2-orbit-4-label 140s linear infinite }
#concept .galaxy .circle-2 .dot:nth-child(5) { animation: circle-2-orbit-5 140s linear infinite }
#concept .galaxy .circle-2 .dot:nth-child(5) span { animation: circle-2-orbit-5-label 140s linear infinite }
#concept .galaxy .circle-2 .dot:nth-child(6) { animation: circle-2-orbit-6 140s linear infinite }
#concept .galaxy .circle-2 .dot:nth-child(6) span { animation: circle-2-orbit-6-label 140s linear infinite }
#concept .galaxy .circle-2 .dot:nth-child(7) { animation: circle-2-orbit-7 140s linear infinite }
#concept .galaxy .circle-2 .dot:nth-child(7) span { animation: circle-2-orbit-7-label 140s linear infinite }
#concept .galaxy .circle-2 .dot:nth-child(8) { animation: circle-2-orbit-8 140s linear infinite }
#concept .galaxy .circle-2 .dot:nth-child(8) span { animation: circle-2-orbit-8-label 140s linear infinite }

#concept .text.end {
    width: 40%;
    margin: 10.0rem 0 0;
}

@media (max-width: 992px) {
    #concept .title {
        width: 100%;
        margin: 0 0 8rem;
    }

    #concept .galaxy {
        width: 100%;
        height: 38rem;
        transform: scale(0.8);
    }

    #concept .galaxy .logo {
        width: 6rem;
    }

    #concept .galaxy .circle-1 {
        width: 12rem;
        height: 20rem;
    }

    #concept .galaxy .circle-1 .dot {
        transform: rotate(-15deg);
        offset-path: ellipse(6rem 10rem at center);
    }

    #concept .galaxy .circle-2 {
        width: 36rem;
        height: 54.0rem;
    }

    #concept .galaxy .circle-2 .dot {
        transform: rotate(-15deg);
        offset-path: ellipse(18rem 27rem at center);
    }

    #concept .galaxy .circle-1.visible, #concept .galaxy .circle-2.visible {
        transform: translate(-50%, -50%) rotateX(0deg) rotate(15deg);
    }

    #concept .galaxy .circle-1 .dot span, #concept .galaxy .circle-2 .dot span {
        font-size: 1.2rem;
    }

    #concept .text.end {
        width: 100%;
    }
}


/** who-we-are **/

#who-we-are {
    padding: 10.0rem 0;
}

#who-we-are .left {
    width: 48%;
}

#who-we-are .left img {
    clip-path: circle(0% at 50% 55%);
    transition: clip-path 0.6s ease-out;
    transition-delay: 0s;
}

#who-we-are .left img.visible {
    clip-path: circle(60% at 50% 55%);
    transition-delay: 0.4s;
}

#who-we-are .right {
    width: 40%;
}

#who-we-are .right .title {
    margin: 0 0 5.0rem;
}

#who-we-are .right .small {
    opacity: 0.6;
    margin: 7.0rem 0 3.0rem;
    letter-spacing: 0.40em;
}

#who-we-are .right .splide {
    width: calc(100% + 20.0rem);
    margin: 0 -10.0rem;
    opacity: 0.8;
    position: relative;
}

#who-we-are .right .splide::after,
#who-we-are .right .splide::before {
    z-index: 2;

    top: 0;
    left: 0;
    width: 10.0rem;
    height: 100%;

    content: '';
    display: block;
    position: absolute;

    background: linear-gradient(90deg, #DBDDCF 68%, #DBDDCF00 100%);
}

#who-we-are .right .splide::before {
    left: auto;
    right: 0;
    background: linear-gradient(270deg, #DBDDCF 68%, #DBDDCF00 100%);
}

#who-we-are .right .splide .splide__slide img {
    max-width: 11.5rem;
    max-height: 4.5rem;
}

@media (max-width: 992px) {
    #who-we-are .wrapper {
        flex-wrap: wrap;
    }

    #who-we-are .left,
    #who-we-are .right {
        width: 100%;
    }

    #who-we-are .right {
        margin: 5rem 0 0;
    }
}


/** how-we-operate **/

#how-we-operate {
    padding: 10.0rem 0 18.0rem;
}

#how-we-operate .left {
    width: 40%;
}

#how-we-operate .left .text {
    text-align: right;
}

#how-we-operate .left .title {
    margin: 0 0 5.0rem;
}

#how-we-operate .right {
    width: 48%;
    position: relative;
}

#how-we-operate .right .circle-1,
#how-we-operate .right .circle-2,
#how-we-operate .right .circle-3,
#how-we-operate .right .circle-4,
#how-we-operate .right .circle-5,
#how-we-operate .right .circle-6 {
    left: 0;
    width: 100%;
    bottom: 0;

    border: 1px solid #555555;
    padding-top: 100%;
    border-radius: 50%;

    position: absolute;
    transition: padding 0.6s ease-out;
    transition-delay: 0s;
}

#how-we-operate .right .circle-1 {
    position: static;
}

#how-we-operate .right.visible .circle-2 {
    padding-top: 82%;
    transition-delay: 0.6s;
}

#how-we-operate .right.visible .circle-3 {
    padding-top: 65%;
    transition-delay: 0.6s;
}

#how-we-operate .right.visible .circle-4 {
    padding-top: 50%;
    transition-delay: 0.6s;
}

#how-we-operate .right.visible .circle-5 {
    padding-top: 32%;
    transition-delay: 0.6s;
}

#how-we-operate .right.visible .circle-6 {
    padding-top: 16%;
    transition-delay: 0.6s;
}


@media (max-width: 992px) {
    #how-we-operate .wrapper {
        flex-wrap: wrap;
    }

    #how-we-operate .left,
    #how-we-operate .right {
        width: 100%;
    }

    #how-we-operate .left {
        order: 2;
        margin: 5rem 0 0;
    }

    #how-we-operate .left .text {
        text-align: left;
    }
}


/** slogan **/

#slogan {
    margin: 23.5rem 0;
    height: 400vh;
    height: 100vh;
    position: relative;
    background: #555555;
}

#slogan::after,
#slogan::before {
    left: 0;
    bottom: 100%;

    width: 100%;
    height: 23.5rem;

    content: '';
    display: block;
    position: absolute;

    background: linear-gradient(0deg, #555555 15%, #DBDDCF 100%);
}

#slogan::before {
    bottom: -23.5rem;
    background: linear-gradient(180deg, #555555 15%, #DBDDCF 100%);
}

#slogan .wrapper {
    height: 100vh;
    position: relative;
    max-width: 59.0rem;
    min-height: 60rem;
}

/*#slogan.first-inview .wrapper {
    top: 50%;
    left: 50%;
    position: fixed;
    transform: translate(-50%,-50%);
}

#slogan.reach-bottom .wrapper {
    top: auto;
    bottom: 0;
    position: absolute;
    transform: translate(-50%,0%);
}*/

#slogan .text {
    color: #ffffff;

    font-size: 6.4rem;
    font-weight: 300;
    font-family: 'Inter 28pt';
    line-height: 120%;

    text-align: center;
}

#slogan .text span {
    display: block;
    opacity: 0;
    position: relative;
    transform: translateY(20%);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

#slogan .text.show-line-1 span:nth-child(1),
#slogan .text.show-line-2 span:nth-child(2),
#slogan .text.show-line-3 span:nth-child(3),
#slogan .text.show-line-4 span:nth-child(4) {
    opacity: 1;
    transform: translateY(0%);
}

#slogan .image-01,
#slogan .image-02 {
    width: 38.0rem;
    height: 38.0rem;
    position: absolute;
}

#slogan .image-01 {
    right: -32.0rem;
    top: calc(10% - 6.5rem);
}

#slogan .image-02 {
    left: -32.0rem;
    bottom: calc(10% + 6.5rem);
}

@media (max-width: 992px) {
    #slogan .text {
        font-size: 5.6rem;
    }
    #slogan .wrapper {
        width: 300px;
    }
}


/** operating-model **/

#operating-model {
    padding: 24.5rem 0 12.4rem;
}

#operating-model .left {
    width: 40%;
}

#operating-model .left .title {
    text-align: right;
}


#operating-model .right .text {
    margin: 1.8rem 0 0;
}

#operating-model .right {
    width: 40%;
}

#operating-model .diagram {
    margin: 7.0rem auto 0;
    height: 600px;
    position: relative;
}

#operating-model .diagram .circle-1,
#operating-model .diagram .circle-2,
#operating-model .diagram .circle-3,
#operating-model .diagram .circle-4,
#operating-model .diagram .circle-5,
#operating-model .diagram .circle-6,
#operating-model .diagram .circle-7,
#operating-model .diagram .circle-8,
#operating-model .diagram .circle-9,
#operating-model .diagram .circle-10,
#operating-model .diagram .circle-11,
#operating-model .diagram .circle-12,
#operating-model .diagram .circle-13 {
    top: 0;
    right: 50%;
    width: 50%;
    opacity: 0;

    border: 1px solid #555555;
    padding-top: 50%;
    border-radius: 50%;

    position: absolute;
    transition: opacity 0.1s ease-out,
                transform 0.6s ease-out;
    transition-delay: 0s;

    transform-origin: center right;
}

#operating-model .diagram .circle-8,
#operating-model .diagram .circle-9,
#operating-model .diagram .circle-10,
#operating-model .diagram .circle-11,
#operating-model .diagram .circle-12,
#operating-model .diagram .circle-13 {
    left: 50%;
    right: 0;
    transform: scaleX(0.16);
    transform-origin: center left;
}

#operating-model .diagram.visible .circle-1 {
    opacity: 0.2;
    transform: scaleX(0.16) translateX(50%);
    transition-delay: 0.8s;
}

#operating-model .diagram.visible .circle-2 {
    opacity: 0.2;
    transform: scaleX(0.16);
    transition-delay: 0.6s;
}

#operating-model .diagram.visible .circle-3 {
    opacity: 0.2;
    transform: scaleX(0.32);
    transition-delay: 0.6s;
}

#operating-model .diagram.visible .circle-4 {
    opacity: 0.2;
    transform: scaleX(0.50);
    transition-delay: 0.6s;
}

#operating-model .diagram.visible .circle-5 {
    opacity: 0.2;
    transform: scaleX(0.66);
    transition-delay: 0.6s;
}

#operating-model .diagram.visible .circle-6 {
    opacity: 0.2;
    transform: scaleX(0.82);
    transition-delay: 0.6s;
}

#operating-model .diagram.visible .circle-7 {
    opacity: 0.2;
    transform: scaleX(1);
    transition-delay: 0.6s;
}



#operating-model .diagram.visible .circle-8 {
    opacity: 0.2;
    transform: scaleX(0.16);
    transition-delay: 1s;
}

#operating-model .diagram.visible .circle-9 {
    opacity: 0.2;
    transform: scaleX(0.32);
    transition-delay: 1s;
}

#operating-model .diagram.visible .circle-10 {
    opacity: 0.2;
    transform: scaleX(0.50);
    transition-delay: 1s;
}

#operating-model .diagram.visible .circle-11 {
    opacity: 0.2;
    transform: scaleX(0.66);
    transition-delay: 1s;
}

#operating-model .diagram.visible .circle-12 {
    opacity: 0.2;
    transform: scaleX(0.82);
    transition-delay: 1s;
}

#operating-model .diagram.visible .circle-13 {
    opacity: 0.2;
    transform: scaleX(1);
    transition-delay: 1s;
}


#operating-model .diagram h3 {
    z-index: 10;
    top: 19.2rem;
    left: 0;
    right: 0;
    position: absolute;
    text-align: center;
}

#operating-model .diagram .line {
    top: 50%;
    left: 15%;
    right: 15%;
    position: absolute;
}

#operating-model .diagram .line::after {
    top: 0;
    left: 0;
    right: 0;
    content: '';
    display: block;
    position: absolute;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s ease-out;
    transition-delay: 0s;
    border-top: #555555 1px solid;
}

#operating-model .diagram .line .dot {
    width: 1.6rem;
    height: 1.6rem;
    transform: translateY(-50%) scale(0);
    background: #555555;
    border-radius: 50%;
    overflow: visible;
    position: relative;
    transition: transform 0.6s ease-out;
    transition-delay: 0s;
}

#operating-model .diagram .line .dot span {
    top: 3.5rem;
    left: -6rem;
    right: -6rem;
    text-align: center;
    position: absolute;
    opacity: 0;
    transition: opacity 0.6s ease-out;
    transition-delay: 0s;
}

#operating-model .diagram .line.visible::after {
    transform: scaleX(1);
    transition-delay: 1.2s;
}


@media (max-width: 1400px) {
    #operating-model .diagram {
        height: 490px;
    }
}

@media (max-width: 992px) {
    #operating-model {
        padding: 24.5rem 0 42.8rem;
    }

    #operating-model .left,
    #operating-model .right {
        width: 100%;
    }

    #operating-model .left .title {
        text-align: left;
    }

    #operating-model .right {
        margin: 5rem 0 0;
    }

    #operating-model .wrapper {
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-start;
    }

    #operating-model .diagram {
        left: calc(50% + 20rem);
        width: 80rem;
        height: 40.0rem;
        margin: 12rem 0 0;
        transform: rotate(90deg);
        transform-origin: top left;
    }

    #operating-model .diagram h3 {
        top: 0;
        left: -18rem;
        width: 30rem;
        transform: rotate(-90deg) translateX(-50%);
        transform-origin: bottom center;
        white-space: normal;
    }

    #operating-model .diagram .line .dot span {
        top: -2rem;
        left: 0rem;
        width: 20rem;
        text-align: left;
        transform: rotate(-90deg);
        transform-origin: top left;
    }
}


/** cases **/

#cases {
    padding: 12.4rem 0 0;
}

#cases .left {
    width: 40%;
    margin: 0 0 10.0rem;
    z-index: 2;
    position: relative;
}

#cases .left .title {
    margin: 0 0 5.0rem;
}

#cases .left .small {
    opacity: 0.6;
    margin: 7.0rem 0 3.0rem;
    letter-spacing: 0.40em;
}

#cases .left .splide {
    width: calc(100% + 20.0rem);
    margin: 0 -10.0rem;
    opacity: 0.8;
}

#cases .left .splide::after,
#cases .left .splide::before {
    z-index: 2;

    top: 0;
    left: 0;
    width: 10.0rem;
    height: 100%;

    content: '';
    display: block;
    position: absolute;

    background: linear-gradient(90deg, #DBDDCF 68%, #DBDDCF00 100%);
}

#cases .left .splide::before {
    left: auto;
    right: 0;
    background: linear-gradient(270deg, #DBDDCF 68%, #DBDDCF00 100%);
}

#cases .left .splide .splide__slide img {
    max-width: 11.5rem;
    max-height: 4.5rem;
}

#cases .right {
    z-index: 1;
    width: 60%;
}

#cases .right .splide {
    width: calc(100% + var(--wrapper-offset));
}

#cases .right .project {
    width: 14rem;
    overflow: visible;
    position: relative;

    padding: 3.0rem 0;
    transition: opacity 0.3s;
}

#cases .right .project .text-wrapper {
    top: 50%;
    left: 50%;
    position: absolute;
    opacity: 0;
    width: 32rem;
    max-width: none;
    transform: translate(-50%,-50%) rotate(-60deg);
    transition: 0.3s ease-out;
    transition-delay: 0s;
    pointer-events: none;
}

#cases .right .project .image {
    width: 30.0rem;
    height: 30.0rem;
    margin: 1.5rem;
    display: block;
    overflow: hidden;
    position: relative;
    background: black;
    border-radius: 50%;
    transition: 0.6s ease-out;
    transform: scale(0.60);
}

#cases .right .project .image::after {
    inset: 0;
    z-index: 2;

    content: '';
    display: block;
    position: absolute;

    background: rgba(0,0,0,0);
    transition: background 0.2s ease-out;
}

#cases .right .project .image svg {
    z-index: 3;

    top: 50%;
    left: 50%;
    width: 4.2rem;

    position: absolute;
    transform: translate(-50%,-50%) scale(0);
    transition: transform 0.2s ease-out;
}

#cases .right .project .image img {
    width: 100%;
    height: 100%;
}

#cases .right .project.is-next {
    z-index: 2;
    width: 12.5rem;
}

#cases .right .project.is-next .image {
    transform: scale(0.75);
}

#cases .right .project.is-active:not(.splide__slide--clone) {
    z-index: 6;
    opacity: 1 !important;
    width: 34rem;
    pointer-events: auto !important;
}

#cases .right .project.is-active ~ .project { opacity: 0; pointer-events:none }

#cases .right .project.is-active:not(.splide__slide--clone) + .project { z-index: 5; opacity: 1 }
#cases .right .project.is-active:not(.splide__slide--clone) + .project + .project { z-index: 4; opacity: 1 }
#cases .right .project.is-active:not(.splide__slide--clone) + .project + .project + .project { z-index: 3; opacity: 1 }
#cases .right .project.is-active:not(.splide__slide--clone) + .project + .project + .project + .project { z-index: 2; opacity: 1 }
#cases .right .project.is-active:not(.splide__slide--clone) + .project + .project + .project + .project + .project { z-index: 2; opacity: 1 }

#cases .right .project.is-active:not(.splide__slide--clone) .image {
    transform: scale(1);
}

#cases .right .project.is-active:not(.splide__slide--clone) .text-wrapper {
    opacity: 1;
    transform: translate(-50%,-50%) rotate(-105deg);
    transition: 0.6s;
    transition-delay: 0.3s;
}

#cases .right .splide__arrows {
    left: 44.0rem;
    bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: absolute;
}

#cases .right .splide__arrows .splide__arrow {
    position: static;
    width: 3.2rem;
    height: 3.2rem;
    margin: 0 2rem 0 0;
}


@media (any-hover: hover) {
    #cases .right .project.is-active:not(.splide__slide--clone):hover .image::after {
        background: rgba(0,0,0,0.27);
    }

    #cases .right .project.is-active:not(.splide__slide--clone):hover .image svg {
        transform: translate(-50%,-50%) scale(1);
    }
}

@media (max-width: 992px) {
    #cases .left,
    #cases .right {
        width: 100%;
    }

    #cases .left {
        margin: 0 0 5rem;
    }

    #cases .wrapper {
        flex-wrap: wrap;
    }

    #cases .right .splide__arrows {
        left: auto;
        right: 0;
    }
}


/** footer **/

@keyframes footerCircle {
    0% { transform: scale(0.6) translateY(-100%); }
    50% { transform: scale(0.4) translateY(0%); }
    100% { transform: scale(1) translateY(0%); }
}

@keyframes footerCircleLine {
    0% { opacity:1; width: 100%; height: 100%; }
    100% { opacity:0; width: 400%; height: 400%; }
}

.footer {
    overflow: hidden;
    color: #555555;
    font-size: 2.4rem;
    font-weight: 300;
    font-family: 'Inter 28pt';
    padding: 18.4rem 0 9.0rem;
}

.footer a {
    color: #555555;
    z-index: 3;
    position: relative;
}

.footer svg {
    width: 28.0rem;
    margin: 0 9rem 0 0;
}

.footer .wrapper:first-child {
    height: 75.0rem;
    overflow: visible;
    position: relative;
}
.footer .wrapper .circle {
    position: absolute;

    left: 45%;
    bottom: 13.4rem;
    width: 37.5rem;
    height: 37.5rem;
}

.footer .wrapper .circle::after {
    inset: 0;
    z-index: 1;

    content: '';
    display: block;
    position: absolute;
    transform: scale(0);

    background: #C4C6B7;
    border-radius: 50%;
}

.footer .wrapper .circle .line-1,
.footer .wrapper .circle .line-2,
.footer .wrapper .circle .line-3 {
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    opacity: 0;
    border-radius: 50%;
    position: absolute;
    border: 1px solid #9B9C95;
    transform: translate(-50%,-50%) scale(1);
}

.footer .wrapper .circle.visible::after {
    animation: footerCircle 1s forwards;
}

.footer .wrapper .circle.visible .line-1 {
    animation: footerCircleLine 10s forwards infinite;
    animation-delay: 0.8s;
}

.footer .wrapper .circle.visible .line-2 {
    animation: footerCircleLine 10s forwards infinite;
    animation-delay: 2.8s;
}

.footer .wrapper .circle.visible .line-3 {
    animation: footerCircleLine 10s forwards infinite;
    animation-delay: 4.8s;
}


.footer .wrapper .circle .text-wrapper {
    width: 80rem;
    right: 1.5rem;
    bottom: 10rem;
    z-index: 3;
    position: absolute;
}

.footer .wrapper .circle .text-wrapper .text {
    color: #555555;
    font-size: 6.4rem;
    font-weight: 300;
    font-family: 'Inter 28pt';
    text-align: right;
}

.footer .wrapper:nth-child(2) {
    padding: 4.0rem 0;
    background: #DBDDCF;
    z-index: 3;
    position: relative;
}

.footer .wpp-cta {
    z-index: 1000;

    right: 25px;
    bottom: 25px;
    width: 80px;
    height: 80px;

    display: flex;
    position: fixed;
    align-items: center;
    justify-content: center;
    background: #00a66c;

    border-radius: 50%;
    transition: transform 0.3s ease-out;
    box-shadow: 0 0.2rem 0.4rem rgba(0,0,0,0.1);
}

.footer .wpp-cta svg {
    width: 40px;
    height: 100%;
    margin: 0;
}

.footer .wpp-cta svg path {
    fill: white;
}


@media (any-hover: hover) {
    .footer a:hover {
        text-decoration: underline;
    }

   .footer .wpp-cta:hover {
        transform: scale(1.1);
    }
}


@media (max-width: 992px) {
    .footer {
        padding: 18.4rem 0 4rem
    }

    .footer svg {
        margin: 0;
    }
    .footer .wrapper:first-child {
        height: 55rem;
    }
    .footer .wrapper .circle {
        width: 25rem;
        height: 25rem;
    }
    .footer .wrapper .circle .text-wrapper .text {
        font-size: 4rem;
    }

    .footer .wrapper:nth-child(2) {
        flex-direction: column;
    }

    .footer .wrapper:nth-child(2) a {
        margin: 2rem 0 0;
    }
    .footer .wrapper:nth-child(2) span { display:none }
}


/** single-case **/

@keyframes arrow {
    0% { transform: translate(-50%,0%) }
    100% { transform: translate(-50%,20%) }
}

.single-case #banner::after,
.single-case #banner::before {
    z-index: 2;
}

.single-case #banner .oflow {
    z-index: 1;
    inset: 0;
    content: '';
    display: block;
    position: absolute;

    background: rgba(85,85,85,0.4);
}

.single-case #banner h2 {
    z-index: 3;
    color: #ffffff;
    top: 40%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 6.4rem;
    font-weight: 300;
}

.single-case #banner svg {
    left: 50%;
    bottom: 48%;
    width: 10rem;
    position: absolute;
    transform: translate(-50%,0%);
    animation: arrow 2s infinite alternate;
}

.single-case #banner img,
.single-case #banner video {
    width: 100%;
    height: 100%;
    -webkit-pointer-events: none;
    pointer-events: none;
}

.single-case .title-block {
    padding: 10rem 0 !important;
}
.single-case .title-block .title {
    text-align: center;
}

.single-case .text-block,
.single-case .video-block,
.single-case .image-block,
.single-case .full-image-block,
.single-case .double-image-block {
    padding: 0 0 10rem;
}


.single-case .text-block .title {
    padding: 0 0 5rem;
    max-width: 60%;
}

.single-case .video-block .text,
.single-case .full-image-block .text,
.single-case .double-image-block .text {
    max-width: 60%;
    margin-top: 3rem;
    font-weight: 500;
}

.single-case .double-image-block .flex {
    gap: 1.6rem;
}

.single-case .video-block video,
.single-case .image-block img,
.single-case .image-block video,
.single-case .full-image-block img,
.single-case .full-image-block video,
.single-case .double-image-block img {
    border-radius: 1.6rem;
}

.single-case .double-image-block img {
    width: calc(70% - 0.8rem);
}

.single-case .double-image-block img:last-child {
    width: calc(30% - 0.8rem);
}

.single-case .double-image-block.w50 img,
.single-case .double-image-block.w50 img:last-child {
    width: calc(50% - 0.8rem);
}

.single-case .image-block img,
.single-case .image-block video {
    width: calc(65% - 3rem);
    min-height: 100%;
    border-radius: 1.6rem;
}

.single-case .image-block .text {
    width: calc(35% - 3rem);
    font-weight: 500;
}


@media (max-width: 992px) {
    .single-case #banner h2 {
        font-size: 3.4rem;
    }

    .single-case #banner svg {
        bottom: 35%;
        width: 5rem;
    }

    .single-case .text-block .title {
        max-width: 100%;
    }

    .single-case .image-block .wrapper {
        flex-wrap: wrap;
    }

    .single-case .image-block .wrapper img,
    .single-case .image-block .wrapper video {
        width: 100%;
        order: -1;
        margin: 0 0 3rem;
    }

    .single-case .image-block .wrapper .text,
    .single-case .video-block .wrapper .text,
    .single-case .full-image-block .wrapper .text,
    .single-case .double-image-block .wrapper .text {
        width: 100%;
        max-width: 100%;
    }
}