.white {
  color: #fff;
}

body {
  --padding: 6rem;
  background-color: #bfd0ea;
}

@media screen and (max-width: 800px) {
  body {
    --padding: 2.5rem;
    overscroll-behavior-y: none !important;
    -webkit-overscroll-behavior-y: none !important;
  }
}

article {
  background-color: #bfd0ea;
  z-index: 100990 !important;
}

body.loading > main {
  pointer-events: none;
  opacity: 0;
}

body.loading.ready > main {
  pointer-events: all;
  opacity: 1;
}

main *, :after, :before {
  box-sizing: border-box;
  font-smooth: antialiased;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

:root {
  font-size: 10px;
}

main {
  z-index: 2;
  overscroll-behavior-y: none;
  overscroll-behavior-y: none !important;
  -webkit-overscroll-behavior-y: none !important;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
}

html {
  overscroll-behavior-block: none;
  overscroll-behavior-y: none !important;
  -webkit-overscroll-behavior-y: none !important;
}

* {
  letter-spacing: -.0238em;
  outline: 0 dotted #01010133;
  margin: 0;
  padding: 0;
  position: relative;
}

html.lenis {
  height: auto;
}

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

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

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

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

@font-face {
  font-family: Satoshi-Variable;
  src: url("Satoshi-Variable.09dbc62f.woff2") format("woff2"), url("Satoshi-Variable.510ee78f.woff") format("woff"), url("Satoshi-Variable.bece9183.ttf") format("truetype");
  font-weight: 300 900;
  font-style: normal;
  font-display: block;
}

.Machina {
  font-family: Satoshi-Variable;
}

.MachinaLight, .MachinaMedium, .MachinaBold {
  font-family: Satoshi-Variable;
  text-transform: uppercase !important;
}

.satoshiFont {
  font-family: Satoshi-Variable;
}

[white] {
  color: #fff;
}

article[data-router-view="manual"] {
  display: block;
}

[data-section-manual] {
  perspective: 1000px;
  --myPadding: calc(var(--padding) * .5);
  padding: var(--myPadding);
  --myPaddingT: calc(var(--padding) * 3);
  padding-top: var(--myPaddingT);
}

[data-section-manual] .colorCircle {
  width: 200px;
  height: 200px;
  aspect-ratio: 1;
}

[data-section-manual] .colorCircle.salmon {
  background-color: #00173c;
}

[data-section-manual] .colorCircle.green {
  background-color: #9af7ec;
}

[data-section-manual] .colorCircle.sky {
  background-color: #9aaef7;
}

[data-section-manual] .colorCircle.beige {
  background-color: #d9d9d9;
}

[data-section-manual] .colorCircle.blue {
  background-color: #06285f;
}

[data-section-manual] .colorCircle.graphite {
  background-color: #bccae3;
}

[data-section-manual] .colorItem {
  --myPaddingTB: calc(var(--padding) * 1);
  padding-top: var(--myPaddingTB);
  padding-bottom: var(--myPaddingTB);
}

[data-section-manual] .colorNamee {
  color: #00173c;
  font-family: Satoshi-Variable;
  font-weight: 350;
}

@media screen and (min-width: 800px) and (max-width: 2000px) {
  [data-section-manual] .colorNamee {
    --defaultSize: calc(calc(100vw / 60)  + .0001rem);
    --betterSize: calc(calc(100vw / 60)  + .3rem);
    font-size: var(--betterSize);
  }
}

@media screen and (min-width: 2000px) {
  [data-section-manual] .colorNamee {
    font-size: calc(33.3333px + .1rem);
  }
}

@media screen and (max-width: 800px) {
  [data-section-manual] .colorNamee {
    font-size: 1.8rem;
  }
}

[data-section-manual] .colorDesc {
  --myPaddingT: calc(var(--padding) * .5);
  padding-top: var(--myPaddingT);
  color: #00173c;
  text-align: center;
  color: #00000080;
  font-family: Satoshi-Variable;
  font-weight: 350;
}

@media screen and (min-width: 800px) and (max-width: 2000px) {
  [data-section-manual] .colorDesc {
    --defaultSize: calc(calc(100vw / 90)  + .0001rem);
    --betterSize: calc(calc(100vw / 90)  + .3rem);
    font-size: var(--betterSize);
  }
}

@media screen and (min-width: 2000px) {
  [data-section-manual] .colorDesc {
    font-size: calc(22.2222px + .1rem);
  }
}

@media screen and (max-width: 800px) {
  [data-section-manual] .colorDesc {
    font-size: 1.3rem;
  }
}

[data-section-manual]:has(.imageSection) {
  display: block;
}

[data-section-manual] .page {
  --myMarginB: calc(var(--padding) * 1);
  margin-bottom: var(--myMarginB);
  filter: saturate(1.1);
  width: 100%;
  left: 0;
}

[data-section-manual] .page.small {
  height: auto;
}

[data-section-manual] .page.fixH {
  height: 70vh;
}

[data-section-manual] .page > img {
  object-fit: cover;
  height: 100%;
  width: 100%;
  object-position: 50% 50%;
}

[data-section-manual] .page .logo {
  width: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%)translateX(-50%);
}

[data-section-manual] .page .logo img {
  width: 100%;
}

[data-section-manual] .description {
  z-index: 10;
  text-transform: uppercase;
  color: #00173c;
  --myPadding: calc(var(--padding) * .5);
  padding: var(--myPadding);
  font-family: Satoshi-Variable;
  font-weight: 470;
  position: absolute;
  bottom: 0;
  left: 0;
}

@media screen and (min-width: 800px) and (max-width: 2000px) {
  [data-section-manual] .description {
    --defaultSize: calc(calc(100vw / 100)  + .0001rem);
    --betterSize: calc(calc(100vw / 100)  + .3rem);
    font-size: var(--betterSize);
  }
}

@media screen and (min-width: 2000px) {
  [data-section-manual] .description {
    font-size: calc(20px + .1rem);
  }
}

@media screen and (max-width: 800px) {
  [data-section-manual] .description {
    font-size: 1.3rem;
  }
}

[data-section-manual] .description.top {
  top: 0;
  bottom: unset;
}

[data-section-manual] .description.bottom-right {
  bottom: 0;
  right: 0;
}

[data-section-manual] .insidePage {
  height: 100%;
  flex-direction: row;
  justify-content: space-between;
  display: flex;
}

@media screen and (max-width: 800px) {
  [data-section-manual] .insidePage {
    flex-direction: column;
    justify-content: space-between;
    display: flex;
  }
}

[data-section-manual] .insidePage.horizontal {
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

[data-section-manual] .insidePage.horizontal > div:nth-of-type(2) {
  border-top: 1px solid #fff;
  border-left: 0 solid #fff;
}

[data-section-manual] .insidePage.horizontal > div {
  width: 100%;
  align-items: flex-start;
}

[data-section-manual] .insidePage h1 {
  --myPaddingTB: calc(var(--padding) * .5);
  padding-top: var(--myPaddingTB);
  padding-bottom: var(--myPaddingTB);
  --myPaddingL: calc(var(--padding) * 1);
  padding-left: var(--myPaddingL);
  --myPaddingR: calc(var(--padding) * 1);
  padding-right: var(--myPaddingR);
  color: #00173c;
  text-align: center;
  font-weight: 300;
  line-height: 1;
}

@media screen and (min-width: 800px) and (max-width: 2000px) {
  [data-section-manual] .insidePage h1 {
    --defaultSize: calc(calc(100vw / 15)  + .0001rem);
    --betterSize: calc(calc(100vw / 15)  + .3rem);
    font-size: var(--betterSize);
  }
}

@media screen and (min-width: 2000px) {
  [data-section-manual] .insidePage h1 {
    font-size: calc(133.333px + .1rem);
  }
}

@media screen and (max-width: 800px) {
  [data-section-manual] .insidePage h1 {
    font-size: 5rem;
  }
}

[data-section-manual] .insidePage h1.mono, [data-section-manual] .insidePage h1.jakarta {
  color: #00173c;
}

@media screen and (min-width: 800px) and (max-width: 2000px) {
  [data-section-manual] .insidePage h1.mono, [data-section-manual] .insidePage h1.jakarta {
    --defaultSize: calc(calc(100vw / 30)  + .0001rem);
    --betterSize: calc(calc(100vw / 30)  + .3rem);
    font-size: var(--betterSize);
  }
}

@media screen and (min-width: 2000px) {
  [data-section-manual] .insidePage h1.mono, [data-section-manual] .insidePage h1.jakarta {
    font-size: calc(66.6667px + .1rem);
  }
}

@media screen and (max-width: 800px) {
  [data-section-manual] .insidePage h1.mono, [data-section-manual] .insidePage h1.jakarta {
    font-size: 3rem;
  }
}

[data-section-manual] .insidePage .satoshi {
  font-family: Satoshi-Variable;
}

[data-section-manual] .insidePage .jakarta {
  font-family: Plus Jakarta Sans, sans-serif;
}

[data-section-manual] .insidePage .mono {
  font-family: Space Mono, monospace;
}

[data-section-manual] .insidePage .machina {
  font-family: Satoshi-Variable;
}

[data-section-manual] .insidePage > div:nth-of-type(2), [data-section-manual] .insidePage > div:nth-of-type(3) {
  border-left: 1px solid #fff;
}

@media screen and (max-width: 800px) {
  [data-section-manual] .insidePage > div:nth-of-type(2), [data-section-manual] .insidePage > div:nth-of-type(3) {
    border-top: 1px solid #fff;
    border-left: 0 solid #fff;
  }
}

[data-section-manual] .insidePage > div {
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  display: flex;
}

[data-section-manual] .insidePage > div > img {
  height: 150px;
}

@media screen and (max-width: 800px) {
  [data-section-manual] .insidePage > div > img {
    height: 100px;
  }
}

[data-section-manual] .insidePage .descMan {
  color: #00173c;
  --myPadding: calc(var(--padding) * .5);
  padding: var(--myPadding);
  --myPaddingL: calc(var(--padding) * 0);
  padding-left: var(--myPaddingL);
  color: #fff;
  font-family: Satoshi-Variable;
  font-weight: 470;
}

@media screen and (min-width: 800px) and (max-width: 2000px) {
  [data-section-manual] .insidePage .descMan {
    --defaultSize: calc(calc(100vw / 100)  + .0001rem);
    --betterSize: calc(calc(100vw / 100)  + .3rem);
    font-size: var(--betterSize);
  }
}

@media screen and (min-width: 2000px) {
  [data-section-manual] .insidePage .descMan {
    font-size: calc(20px + .1rem);
  }
}

@media screen and (max-width: 800px) {
  [data-section-manual] .insidePage .descMan {
    font-size: 1.3rem;
  }
}

[data-section-manual] .row {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

@media screen and (max-width: 800px) {
  [data-section-manual] .row.flex {
    flex-direction: column;
    justify-content: space-between;
    display: flex;
  }
}

.container {
  width: 40vw;
  height: 40vw;
  position: relative;
  transform: translateY(10vw)scale(1)translateX(10vw)rotateX(-25deg);
}

@media screen and (min-width: 800px) and (max-width: 1000px) {
  .container {
    transform: translateY(10vw)scale(.8)translateX(10vw)rotateX(-25deg);
  }
}

@media screen and (min-width: 1001px) and (max-width: 1700px) {
  .container {
    transform: translateY(10vw)scale(1)translateX(10vw)rotateX(-25deg);
  }
}

@media screen and (min-width: 1701px) {
  .container {
    transform: translateY(10vw)scale(1.2)translateX(10vw)rotateX(-25deg);
  }
}

@media screen and (min-width: 1901px) {
  .container {
    transform: translateY(10vw)scale(1.3)translateX(15vw)rotateX(-25deg);
  }
}

@media screen and (max-width: 800px) {
  .container {
    height: calc(60vh - var(--padding) );
    width: calc(100vw - var(--padding) );
    transform: translateX(15vw)scale(.6)translateY(10vh);
  }
}

[data-hero-perex] {
  perspective: 1000px;
  perspective-origin: 100% 100%;
}

.cubes {
  width: 20vw;
  height: 20vw;
  transform-style: preserve-3d;
  --gap: 2;
  --cubeSize: 100;
  --cubeMove: calc(var(--cubeSize)  + var(--gap) );
}

@keyframes rotate {
  0% {
    transform: rotateX(-20deg)rotateY(0deg);
  }

  100% {
    transform: rotateX(-20deg)rotateY(360deg);
  }
}

.cubeShadow {
  width: calc(var(--cubeSize) * 4px);
  height: calc(var(--cubeSize) * 4px);
  filter: blur(50px) saturate(2);
  opacity: .3;
  z-index: -100;
  transform-style: preserve-3d;
  background-color: #25273f;
  border-radius: 100vw;
  position: absolute;
  transform: rotateX(-80deg)translateX(-100px)translateZ(155px);
}

.cubeShadow.last {
  transform: rotateX(-90deg)translateX(-100px)translateZ(155px);
}

section.cube3d {
  width: 100vw;
  height: 100svh;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  display: flex;
}

.cube {
  width: calc(var(--cubeSize) * 2px);
  height: calc(var(--cubeSize) * 2px);
  transform-style: preserve-3d;
  position: absolute;
}

.cube.cube1 {
  transform: translateX(calc(var(--cubeMove) * -1px) ) translateY(calc(var(--cubeMove) * -1px) ) translateZ(calc(var(--cubeMove) * 1px) );
}

.cube.cube1.smaller {
  transform: translateX(calc(var(--cubeMove) * -1px) ) translateY(calc(var(--cubeMove) * -1px) ) translateZ(calc(var(--cubeMove) * 1px) ) scale3d(.9, .9, .9);
}

.cube.cube1.smaller > div {
  background-color: #fd4aec;
}

.cube.cube2 {
  transform: translateX(calc(var(--cubeMove) * 1px) ) translateY(calc(var(--cubeMove) * -1px) ) translateZ(calc(var(--cubeMove) * -1px) );
}

.cube.cube3 {
  transform: translateX(calc(var(--cubeMove) * 1px) ) translateY(calc(var(--cubeMove) * 1px) ) translateZ(calc(var(--cubeMove) * 1px) );
}

.cube.cube4 {
  transform: translateX(calc(var(--cubeMove) * -1px) ) translateY(calc(var(--cubeMove) * -1px) ) translateZ(calc(var(--cubeMove) * -1px) );
}

.cube.cube5 {
  transform: translateX(calc(var(--cubeMove) * -1px) ) translateY(calc(var(--cubeMove) * 1px) ) translateZ(calc(var(--cubeMove) * 1px) );
}

.cube.cube6 {
  transform: translateX(calc(var(--cubeMove) * -1px) ) translateY(calc(var(--cubeMove) * 1px) ) translateZ(calc(var(--cubeMove) * -1px) ) rotateZ(0deg) rotateX(90deg) rotateY(90deg);
}

.cube > div {
  width: calc(var(--cubeSize) * 2px);
  height: calc(var(--cubeSize) * 2px);
  opacity: .9;
  position: absolute;
  overflow: hidden;
}

.s1 {
  transform: translateZ(calc(var(--cubeSize) * 1px) );
  background: radial-gradient(628.26% 345.96% at 164.21% -42.33%, #7a98bb 26.9%, #dbdbee 52.53%, #add3ff00 63.65%), linear-gradient(27deg, #e1d0d000 35.47%, #ffffff17 38.57%, #e1d0d000 39.41%), linear-gradient(267deg, #fff 2.3%, #e1d0d000 7.6%);
}

.s1.A {
  background: radial-gradient(628.26% 345.96% at 164.21% -42.33%, #7a98bbcc 26.9%, #dbdbeecc 52.53%, #add3ff00 63.65%), linear-gradient(27deg, #e1d0d000 35.47%, #ffffff17 38.57%, #e1d0d000 39.41%), linear-gradient(267deg, #fff 2.3%, #e1d0d000 7.6%);
}

.s2 {
  transform: rotateY(90deg) translateZ(calc(var(--cubeSize) * 1px) );
  background: radial-gradient(628.26% 345.96% at 164.21% -42.33%, #7a98bbcc 26.9%, #dbdbeecc 52.53%, #add3ff00 63.65%), linear-gradient(27deg, #e1d0d000 35.47%, #ffffff59 38.57%, #e1d0d000 39.41%), linear-gradient(267deg, #fff 2.3%, #e1d0d000 7.6%);
}

.s3 {
  transform: rotateY(180deg) translateZ(calc(var(--cubeSize) * 1px) );
  background: radial-gradient(1160.26% 667.41% at 295.13% -423.2%, #fff 7.59% 52.53%, #add3ff00 100%), linear-gradient(27deg, #e1d0d000 35.47%, #ffffff17 38.57%, #e1d0d000 39.41%);
}

.s4 {
  transform: rotateX(90deg) translateZ(calc(var(--cubeSize) * 1px) );
  background: radial-gradient(628.26% 345.96% at 164.21% -42.33%, #7a98bbcc 26.9%, #dbdbeecc 52.53%, #add3ff00 63.65%), linear-gradient(27deg, #e1d0d000 35.47%, #ffffff17 38.57%, #e1d0d000 39.41%);
}

.s5 {
  transform: rotateY(-90deg) translateZ(calc(var(--cubeSize) * 1px) );
  background: radial-gradient(1160.26% 667.41% at 295.13% -423.2%, #fff 7.59% 52.53%, #add3ff00 100%), linear-gradient(27deg, #e1d0d000 35.47%, #ffffff17 38.57%, #e1d0d000 39.41%), linear-gradient(298deg, #d3c5f0 25.83%, #e1d0d000 136.63%), #93aafc;
}

.s6 {
  transform: rotateX(-90deg) translateZ(calc(var(--cubeSize) * 1px) ) rotate(180deg);
  background: linear-gradient(0deg, #2536cf2e 73.75%, #4f5dd700 113.24%);
}

.cube.cube2 > div.s1, .cube.cube6 > div.s1 {
  backdrop-filter: blur(100px);
  transform: translateZ(calc(var(--cubeSize) * 3px) );
  background: radial-gradient(628.26% 345.96% at 164.21% -42.33%, #dbddff 26.9%, #dbdbee 52.53%, #add3ff00 63.65%), linear-gradient(27deg, #a2636300 35.47%, #ffffff17 38.57%, #e1d0d000 39.41%), linear-gradient(267deg, #fff 2.3%, #e1d0d000 7.6%);
  border-radius: 0 0 0 100vw;
}

.cube.cube2 > div.s3, .cube.cube6 > div.s3 {
  transform: rotateY(180deg) translateZ(calc(var(--cubeSize) * 1px) );
  border-radius: 0 0 100vw;
}

.cube.cube2 > div.s2, .cube.cube6 > div.s2 {
  transform: rotateY(90deg) translateZ(0) translateX(calc(var(--cubeSize) * -1px) );
  width: calc(var(--cubeSize) * 4px);
}

.cube.cube2 > div.s5, .cube.cube6 > div.s5 {
  transform: rotateY(-90deg) translateZ(calc(var(--cubeSize) * 2px) ) translateX(calc(var(--cubeSize) * 1px) );
  width: calc(var(--cubeSize) * 4px);
}

.cube.cube2 > div.s4, .cube.cube6 > div.s4 {
  height: calc(var(--cubeSize) * 4px);
  transform: rotateX(90deg) translateZ(200px) translateY(calc(var(--cubeSize) * 1px) );
}

.cube.cube2 > div.s6, .cube.cube6 > div.s6 {
  height: calc(var(--cubeSize) * 4px);
  transform: rotateX(90deg) translateZ(0px) translateY(calc(var(--cubeSize) * 1px) );
}

.flex-row-space {
  flex-direction: row;
  justify-content: space-between;
  display: flex;
}

.flex-row-center {
  flex-direction: row;
  justify-content: center;
  display: flex;
}

.flex-row-start {
  flex-direction: row;
  justify-content: flex-start;
  display: flex;
}

.flex-row-end {
  flex-direction: row;
  justify-content: flex-end;
  display: flex;
}

.flex-column-space {
  flex-direction: column;
  justify-content: space-between;
  display: flex;
}

.flex-column-end {
  flex-direction: column;
  justify-content: flex-end;
  display: flex;
}

.flex-column-center {
  flex-direction: column;
  justify-content: center;
  display: flex;
}

.flex-column-start {
  flex-direction: column;
  justify-content: flex-start;
  display: flex;
}

.flex-column-end {
  flex-direction: column;
  justify-content: flex-end;
  display: flex;
}

.ptlogo {
  padding-top: 30svh;
}

.uppercase {
  text-transform: uppercase;
}

.h1 {
  letter-spacing: -.231em;
  text-transform: uppercase;
  color: #00173c;
  flex-flow: wrap;
  justify-content: space-between;
  font-family: Satoshi-Variable;
  font-weight: 550;
  line-height: 1.05;
  display: flex;
}

.h1 > .mobile {
  display: none;
}

@media screen and (max-width: 800px) {
  .h1 > .mobile {
    display: block;
  }

  .h1 > .desktop {
    display: none;
  }
}

@media screen and (min-width: 800px) and (max-width: 2000px) {
  .h1 {
    --defaultSize: calc(calc(100vw / 14)  + .0001rem);
    --betterSize: calc(calc(100vw / 14)  + .3rem);
    font-size: var(--betterSize);
  }
}

@media screen and (min-width: 2000px) {
  .h1 {
    font-size: calc(142.857px + .1rem);
  }
}

@media screen and (max-width: 800px) {
  .h1 {
    font-size: 6rem;
  }
}

.h1 .word {
  padding-bottom: 0;
  line-height: 1.05;
}

.h1 i {
  font-style: normal;
  font-weight: 200;
}

.h1 .light {
  font-family: Satoshi-Variable;
  font-weight: 200;
  text-transform: uppercase !important;
}

.h1 .align-right {
  align-self: flex-end;
  margin-left: auto;
}

.h1 .align-left {
  align-self: flex-start;
}

.h1 .align-center {
  align-self: center;
}

@media screen and (min-width: 2000px) {
  .h1 {
    width: calc(2000px - var(--padding) );
    font-size: calc(166.667px + .001vw);
  }
}

[uppercase] {
  text-transform: uppercase;
}

.h3, .desc {
  color: #00173c;
  --myPaddingT: calc(var(--padding) * .5);
  padding-top: var(--myPaddingT);
  font-family: Satoshi-Variable;
  font-weight: 380;
}

@media screen and (min-width: 800px) and (max-width: 2000px) {
  .desc {
    --defaultSize: calc(calc(100vw / 90)  + .0001rem);
    --betterSize: calc(calc(100vw / 90)  + .3rem);
    font-size: var(--betterSize);
  }
}

@media screen and (min-width: 2000px) {
  .desc {
    font-size: calc(22.2222px + .1rem);
  }
}

@media screen and (max-width: 800px) {
  .desc {
    font-size: 1.4rem;
  }
}

.h2 {
  color: #00173c;
  font-family: Satoshi-Variable;
  font-weight: 550;
  line-height: 1.1;
  letter-spacing: -3px !important;
  padding-top: 5px !important;
}

@media screen and (min-width: 800px) and (max-width: 2000px) {
  .h2 {
    --defaultSize: calc(calc(100vw / 25)  + .0001rem);
    --betterSize: calc(calc(100vw / 25)  + .3rem);
    font-size: var(--betterSize);
  }
}

@media screen and (min-width: 2000px) {
  .h2 {
    font-size: calc(80px + .1rem);
  }
}

@media screen and (max-width: 800px) {
  .h2 {
    font-size: 4rem;
  }
}

.h2 u {
  text-decoration: none;
  display: inline-block;
}

.h2 u:after {
  content: "";
  width: 100%;
  height: 1px;
  opacity: .8;
  border-bottom: 3px dotted #00173c;
  display: block;
  position: absolute;
  bottom: .1em;
}

@media screen and (max-width: 800px) {
  .h2 u:after {
    border-bottom: 2px dotted #00173c;
  }
}

.u {
  text-decoration: none;
  display: inline-block;
}

.u:after {
  content: "";
  width: 100%;
  height: 1px;
  opacity: .8;
  border-bottom: 3px dotted #00173c;
  display: block;
  position: absolute;
  bottom: .1em;
}

@media screen and (max-width: 800px) {
  .u:after {
    border-bottom: 2px dotted #00173c;
  }
}

.smallText {
  color: #00173c;
  font-family: Satoshi-Variable;
  font-weight: 350;
  padding-top: 1rem !important;
}

.perex {
  text-align: left;
  color: #00173c;
  letter-spacing: 0;
  text-wrap: balance;
  font-family: Satoshi-Variable;
  font-weight: 350;
  line-height: 1.2;
}

@media screen and (min-width: 800px) and (max-width: 2000px) {
  .perex {
    --defaultSize: calc(calc(100vw / 60)  + .0001rem);
    --betterSize: calc(calc(100vw / 60)  + .3rem);
    font-size: var(--betterSize);
  }
}

@media screen and (min-width: 2000px) {
  .perex {
    font-size: calc(33.3333px + .1rem);
  }
}

@media screen and (max-width: 800px) {
  .perex {
    font-size: 2rem;
  }
}

h1[homepage] {
  letter-spacing: -.231em;
  text-transform: uppercase;
  color: #00173c;
  flex-flow: wrap;
  justify-content: space-between;
  font-family: Satoshi-Variable;
  font-weight: 550;
  line-height: 1.05;
  display: flex;
}

h1[homepage] > .mobile {
  display: none;
}

@media screen and (max-width: 800px) {
  h1[homepage] > .mobile {
    display: block;
  }

  h1[homepage] > .desktop {
    display: none;
  }
}

@media screen and (min-width: 800px) and (max-width: 2000px) {
  h1[homepage] {
    --defaultSize: calc(calc(100vw / 14)  + .0001rem);
    --betterSize: calc(calc(100vw / 14)  + .3rem);
    font-size: var(--betterSize);
  }
}

@media screen and (min-width: 2000px) {
  h1[homepage] {
    font-size: calc(142.857px + .1rem);
  }
}

@media screen and (max-width: 800px) {
  h1[homepage] {
    font-size: 6rem;
  }
}

h1[homepage] .word {
  padding-bottom: 0;
  line-height: 1.05;
}

h1[homepage] i {
  font-style: normal;
  font-weight: 200;
}

h1[homepage] .light {
  font-family: Satoshi-Variable;
  font-weight: 200;
  text-transform: uppercase !important;
}

h1[homepage] .align-right {
  align-self: flex-end;
  margin-left: auto;
}

h1[homepage] .align-left {
  align-self: flex-start;
}

h1[homepage] .align-center {
  align-self: center;
}

@media screen and (min-width: 2000px) {
  h1[homepage] {
    width: calc(2000px - var(--padding) );
    font-size: calc(166.667px + .001vw);
  }
}

h2 {
  color: #00173c;
  font-family: Satoshi-Variable;
  font-weight: 550;
  line-height: 1.1;
  letter-spacing: -3px !important;
  padding-top: 5px !important;
}

@media screen and (min-width: 800px) and (max-width: 2000px) {
  h2 {
    --defaultSize: calc(calc(100vw / 25)  + .0001rem);
    --betterSize: calc(calc(100vw / 25)  + .3rem);
    font-size: var(--betterSize);
  }
}

@media screen and (min-width: 2000px) {
  h2 {
    font-size: calc(80px + .1rem);
  }
}

@media screen and (max-width: 800px) {
  h2 {
    font-size: 4rem;
  }
}

h2 u {
  text-decoration: none;
  display: inline-block;
}

h2 u:after {
  content: "";
  width: 100%;
  height: 1px;
  opacity: .8;
  border-bottom: 3px dotted #00173c;
  display: block;
  position: absolute;
  bottom: .1em;
}

@media screen and (max-width: 800px) {
  h2 u:after {
    border-bottom: 2px dotted #00173c;
  }
}

h3 {
  color: #00173c;
  --myPaddingT: calc(var(--padding) * .5);
  padding-top: var(--myPaddingT);
  font-family: Satoshi-Variable;
  font-weight: 380;
}

.listTrigger {
  color: #00173c;
  font-family: Satoshi-Variable;
  font-weight: 400;
}

@media screen and (min-width: 800px) and (max-width: 2000px) {
  .listTrigger {
    --defaultSize: calc(calc(100vw / 30)  + .0001rem);
    --betterSize: calc(calc(100vw / 30)  + .3rem);
    font-size: var(--betterSize);
  }
}

@media screen and (min-width: 2000px) {
  .listTrigger {
    font-size: calc(66.6667px + .1rem);
  }
}

@media screen and (max-width: 800px) {
  .listTrigger {
    font-size: 2.5rem;
  }
}

@media screen and (max-width: 800px) {
  .listTrigger {
    font-weight: 450;
  }
}

.listDesc {
  color: #00173c;
  font-family: Satoshi-Variable;
  font-weight: 300;
}

@media screen and (min-width: 800px) and (max-width: 2000px) {
  .listDesc {
    --defaultSize: calc(calc(100vw / 90)  + .0001rem);
    --betterSize: calc(calc(100vw / 90)  + .3rem);
    font-size: var(--betterSize);
  }
}

@media screen and (min-width: 2000px) {
  .listDesc {
    font-size: calc(22.2222px + .1rem);
  }
}

@media screen and (max-width: 800px) {
  .listDesc {
    font-size: 1.5rem;
  }
}

@media screen and (max-width: 800px) {
  .listDesc {
    font-weight: 350;
  }
}

.splitting > .whitespace {
  width: .5em;
}

.splitting > .whitespace.break {
  display: block;
}

@media screen and (max-width: 800px) {
  .splitting > .whitespace.break {
    display: unset;
  }
}

[white] {
  color: #fff !important;
}

h1.uppercase {
  text-transform: uppercase !important;
}

h1[subpage] {
  color: #00173c;
  max-width: 2000px;
  font-family: Satoshi-Variable;
  font-weight: 550;
  line-height: 1.1;
}

@media screen and (min-width: 800px) and (max-width: 2000px) {
  h1[subpage] {
    --defaultSize: calc(calc(100vw / 14)  + .0001rem);
    --betterSize: calc(calc(100vw / 14)  + .3rem);
    font-size: var(--betterSize);
  }
}

@media screen and (min-width: 2000px) {
  h1[subpage] {
    font-size: calc(142.857px + .1rem);
  }
}

@media screen and (max-width: 800px) {
  h1[subpage] {
    font-size: 4rem;
  }
}

h1[subpage] u {
  text-decoration: none;
  display: inline-block;
}

h1[subpage] u:after {
  content: "";
  width: 100%;
  height: 1px;
  opacity: .8;
  border-bottom: 3px dotted #00173c;
  display: block;
  position: absolute;
  bottom: .1em;
}

@media screen and (max-width: 800px) {
  h1[subpage] u:after {
    border-bottom: 2px dotted #00173c;
  }
}

[perex] {
  width: max-content;
  --myPaddingT: calc(var(--padding) * 1);
  padding-top: var(--myPaddingT);
}

@media screen and (max-width: 800px) {
  [perex] {
    width: 100%;
    --myPaddingR: calc(var(--padding) * 2);
    padding-right: var(--myPaddingR);
  }
}

:is(h1, h2, h3, p) {
  user-select: none;
  -khtml-user-select: none;
}

article {
  grid-template-columns: [full-width-start] [content-start] 1fr [content-end] [full-width-end];
  pointer-events: all !important;
}

@media screen and (max-width: 800px) {
  article {
    grid-template-columns: [full-width-start] var(--padding) [content-start] calc(100% - var(--padding)  - var(--padding) ) [content-end] var(--padding) [full-width-end];
  }
}

[data-section-canvas] {
  height: 100%;
  width: 100%;
  z-index: -1;
  display: block;
}

canvas {
  height: 100%;
  width: 100%;
  aspect-ratio: 1;
  pointer-events: none;
  display: block;
  position: relative;
  z-index: -10 !important;
}

canvas.absolute {
  width: 100%;
  visibility: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

canvas.absolute.ready {
  visibility: visible;
}

canvas.contact {
  max-height: 80vh;
  transform: scale(1)translateX(0);
}

@media screen and (max-width: 800px) {
  canvas.contact {
    max-height: 100vw;
  }
}

section {
  position: relative;
}

main {
  overflow-x: hidden;
}

main section:not([data-section-canvas]) {
  max-width: 2100px;
  margin: 0 auto;
}

main section[data-hero-perex] {
  max-width: 2100px;
  min-height: 50vw;
  margin: 0 auto;
}

@media screen and (max-width: 800px) {
  main section[data-hero-perex] {
    min-height: 200vw;
  }
}

main:after {
  content: "";
  width: 100vw;
  height: 120svh;
  opacity: .11;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  box-shadow: inset 0 0 200px #233558;
  z-index: 1000000 !important;
  pointer-events: none !important;
}

article > section.full-width, article > section[data-section-swiper] {
  grid-column: full-width;
}

article > section:not(.full-width) {
  grid-column: content;
}

section {
  display: block;
}

section[data-section-story] {
  --myPaddingR: calc(var(--padding) * 1);
  padding-right: var(--myPaddingR);
  --myPaddingL: calc(var(--padding) * 1);
  padding-left: var(--myPaddingL);
  --myPaddingB: calc(var(--padding) * 1);
  padding-bottom: var(--myPaddingB);
  min-height: 70svh;
  flex-direction: column;
  justify-content: space-between;
  display: flex;
  --myMarginT: calc(var(--padding) * .5) !important;
  margin-top: var(--myMarginT) !important;
}

section[data-section-story] .wrap {
  z-index: 1000 !important;
}

section[data-section-story] .imgholder {
  width: 100%;
  height: 100%;
  pointer-events: none;
  border: 0 solid red;
  border-radius: 3rem;
  position: absolute;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: 10 !important;
}

section[data-section-story] .imgholder > img {
  object-fit: cover;
  height: 100%;
  width: 100%;
  z-index: 10 !important;
}

@media screen and (max-width: 800px) {
  section[data-section-story] .desc {
    --myPaddingB: calc(var(--padding) * 1);
    padding-bottom: var(--myPaddingB);
  }
}

section[data-section-story] a {
  --myMarginT: calc(var(--padding) * 1);
  margin-top: var(--myMarginT);
}

@media screen and (max-width: 800px) {
  section[data-section-story] {
    --myPaddingB: calc(var(--padding) * 2);
    padding-bottom: var(--myPaddingB);
  }
}

section[data-section-story] .company {
  z-index: 10000000;
  --myPaddingT: calc(var(--padding) * 2);
  padding-top: var(--myPaddingT);
  --myPaddingB: calc(var(--padding) * .5);
  padding-bottom: var(--myPaddingB);
  color: #fff;
}

section[data-section-story] .btn {
  z-index: 10000000;
}

section[data-section-story] .company-name {
  color: #fff;
  color: #00173c;
  font-family: Satoshi-Variable;
  font-weight: 550;
}

@media screen and (min-width: 800px) and (max-width: 2000px) {
  section[data-section-story] .company-name {
    --defaultSize: calc(calc(100vw / 60)  + .0001rem);
    --betterSize: calc(calc(100vw / 60)  + .3rem);
    font-size: var(--betterSize);
  }
}

@media screen and (min-width: 2000px) {
  section[data-section-story] .company-name {
    font-size: calc(33.3333px + .1rem);
  }
}

@media screen and (max-width: 800px) {
  section[data-section-story] .company-name {
    font-size: 2rem;
  }
}

section[data-section-story] > .wrap {
  width: 100%;
  flex-direction: column;
  justify-content: space-between;
  display: flex;
}

@media screen and (max-width: 800px) {
  section[data-section-story] > .wrap {
    flex-direction: column;
    justify-content: space-between;
    display: flex;
  }
}

section[data-section-story] > .wrap > div {
  flex-direction: column;
  justify-content: flex-start;
  display: flex;
}

@media screen and (max-width: 800px) {
  section[data-section-story] {
    min-height: 100svh;
  }
}

b section[data-section-story] h3 {
  padding-bottom: var(--padding);
}

section[data-section-story] > * {
  grid-area: story-content;
}

section[data-section-homepage] {
  --myPaddingL: calc(var(--padding) * 1);
  padding-left: var(--myPaddingL);
  --myPaddingR: calc(var(--padding) * 1);
  padding-right: var(--myPaddingR);
  padding-bottom: var(--padding);
  padding-top: var(--padding);
  flex-direction: column;
  justify-content: flex-end;
  display: flex;
}

@media screen and (max-width: 800px) {
  section[data-section-homepage] {
    --myPaddingL: calc(var(--padding) * 0);
    padding-left: var(--myPaddingL);
    --myPaddingR: calc(var(--padding) * 0);
    padding-right: var(--myPaddingR);
    flex-direction: column;
    justify-content: space-between;
    display: flex;
  }
}

section[data-section-homepage] > * {
  grid-area: perex-content;
}

section[data-section-homepage] > h1 {
  padding-bottom: calc(var(--padding) * 3);
  padding-top: calc(var(--padding) * 3);
}

@media screen and (max-width: 800px) {
  section[data-section-homepage] > h1 {
    padding-bottom: calc(var(--padding) * 3);
    padding-top: calc(var(--padding) * 3);
  }
}

[data-section-perex] {
  --myPaddingL: calc(var(--padding) * 1);
  padding-left: var(--myPaddingL);
  --myPaddingR: calc(var(--padding) * 1);
  padding-right: var(--myPaddingR);
  grid-template-columns: [perex-content-start] 60vw[perex-content-end] auto;
  grid-template-rows: var(--padding) 1fr [perex-content-start] auto [perex-content-end] var(--padding);
  border-bottom: 1px solid #00173c;
  display: grid;
}

@media screen and (max-width: 800px) {
  [data-section-perex] {
    --myPaddingL: calc(var(--padding) * 0);
    padding-left: var(--myPaddingL);
    --myPaddingR: calc(var(--padding) * 0);
    padding-right: var(--myPaddingR);
    flex-direction: column;
    justify-content: space-between;
    display: flex;
  }
}

@media screen and (max-width: 800px) {
  [data-section-perex] {
    grid-template-columns: [perex-content-start] 100%[perex-content-end];
  }
}

[data-section-perex] > * {
  grid-area: perex-content;
}

.adressHome {
  pointer-events: none;
  text-transform: uppercase;
  color: #00173c;
  flex-direction: row;
  justify-content: space-between;
  font-family: Satoshi-Variable;
  display: flex;
}

@media screen and (min-width: 800px) and (max-width: 2000px) {
  .adressHome {
    --defaultSize: calc(calc(100vw / 150)  + .0001rem);
    --betterSize: calc(calc(100vw / 150)  + .3rem);
    font-size: var(--betterSize);
  }
}

@media screen and (min-width: 2000px) {
  .adressHome {
    font-size: calc(13.3333px + .1rem);
  }
}

@media screen and (max-width: 800px) {
  .adressHome {
    font-size: 1.1rem;
  }
}

.adressHome > span {
  --myPadding: calc(var(--padding) * .5);
  padding: var(--myPadding);
  color: #fff;
  padding-left: 6rem;
  padding-right: 6rem;
}

@media screen and (max-width: 800px) {
  .adressHome > span {
    --myPadding: calc(var(--padding) * 0);
    padding: var(--myPadding);
    --myPaddingL: calc(var(--padding) * 3);
    padding-left: var(--myPaddingL);
    --myPaddingR: calc(var(--padding) * 3);
    padding-right: var(--myPaddingR);
  }
}

@media screen and (max-width: 800px) {
  .adressHome > span {
    padding-left: 2rem;
    padding-right: 2rem;
    font-weight: 350;
  }
}

[data-section-button] {
  height: 50svh;
  flex-direction: column;
  justify-content: center;
  display: flex;
}

@media screen and (max-width: 800px) {
  [data-section-button] {
    height: auto;
    --myPaddingTB: calc(var(--padding) * 4);
    padding-top: var(--myPaddingTB);
    padding-bottom: var(--myPaddingTB);
  }
}

[data-section-button] > * {
  align-self: center;
}

[data-section-button].half {
  height: 30svh;
}

section[data-section-about] {
  --myPaddingL: calc(var(--padding) * 1);
  padding-left: var(--myPaddingL);
  --myPaddingR: calc(var(--padding) * 1);
  padding-right: var(--myPaddingR);
  min-height: 100svh;
  --myPaddingT: calc(var(--padding) * 1);
  padding-top: var(--myPaddingT);
  flex-direction: row;
  justify-content: space-between;
  display: flex;
}

section[data-section-about] .imgHolder {
  mix-blend-mode: screen;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
  z-index: 10 !important;
}

section[data-section-about] .imgHolder > div {
  mix-blend-mode: screen;
  transform: scale(.9);
  z-index: 100 !important;
}

section[data-section-about] .imgHolder > div > :is(img, video) {
  object-fit: contain;
  width: 100%;
  object-position: 50% 50%;
  height: auto;
  position: relative;
  z-index: 1000 !important;
}

section[data-section-about] .imgHolder > div > div:nth-of-type(1) {
  height: 100%;
  width: 100%;
  transform-origin: 0;
  transform: skewX(50px);
  opacity: .1;
  background-color: #fff;
  display: block;
  position: absolute;
  top: 1rem;
  bottom: 0;
  left: 1rem;
  z-index: -1000 !important;
}

section[data-section-about] .imgHolder > div > div:nth-of-type(2) {
  height: 100%;
  width: 100%;
  transform-origin: 0;
  transform: skewX(50px);
  opacity: .1;
  background-color: #fff;
  display: block;
  position: absolute;
  top: 2rem;
  bottom: 0;
  left: 2rem;
  z-index: -1000 !important;
}

section[data-section-about] h2 {
  color: #00173c;
}

@media screen and (max-width: 800px) {
  section[data-section-about] {
    flex-direction: column;
    justify-content: center;
    display: flex;
  }
}

@media screen and (max-width: 800px) {
  section[data-section-about] {
    --myPaddingB: calc(var(--padding) * 1);
    padding-bottom: var(--myPaddingB);
    flex-direction: column;
    justify-content: center;
    display: flex;
  }
}

section[data-section-about] .inside {
  --myPadding: calc(var(--padding) * 1);
  padding: var(--myPadding);
  flex-direction: column;
  justify-content: center;
  display: flex;
}

@media screen and (max-width: 800px) {
  section[data-section-about] .inside {
    --myPadding: calc(var(--padding) * 0);
    padding: var(--myPadding);
  }
}

section[data-section-about] > div {
  flex: 1;
}

section[data-section-about] h3.name {
  --myPaddingT: calc(var(--padding) * .5);
  padding-top: var(--myPaddingT);
}

section[data-section-about] img {
  mix-blend-mode: screen;
}

section[data-section-about] .btn {
  --myMarginT: calc(var(--padding) * 1);
  margin-top: var(--myMarginT);
}

@media screen and (max-width: 800px) {
  footer {
    padding-left: 0;
    padding-right: 0;
  }
}

footer section[data-section-footer] {
  width: calc(100% - var(--padding)  - var(--padding) );
  --myPadding: calc(var(--padding) * 1);
  padding: var(--myPadding);
  --myPaddingTB: calc(var(--padding) * 2);
  padding-top: var(--myPaddingTB);
  padding-bottom: var(--myPaddingTB);
  background-color: #00173c;
  border-radius: 2rem 2rem 0 0;
  flex-direction: row;
  justify-content: center;
  display: flex;
}

@media screen and (max-width: 800px) {
  footer section[data-section-footer] {
    flex-direction: column;
    justify-content: center;
    display: flex;
  }
}

footer section[data-section-footer] h2 {
  width: min-content;
  color: #00173c;
  letter-spacing: -.5px;
  color: #bccae3;
  font-family: Satoshi-Variable;
  font-weight: 550;
  text-transform: uppercase !important;
}

@media screen and (min-width: 800px) and (max-width: 2000px) {
  footer section[data-section-footer] h2 {
    --defaultSize: calc(calc(100vw / 35)  + .0001rem);
    --betterSize: calc(calc(100vw / 35)  + .3rem);
    font-size: var(--betterSize);
  }
}

@media screen and (min-width: 2000px) {
  footer section[data-section-footer] h2 {
    font-size: calc(57.1429px + .1rem);
  }
}

@media screen and (max-width: 800px) {
  footer section[data-section-footer] h2 {
    font-size: 3rem;
  }
}

@media screen and (max-width: 800px) {
  footer section[data-section-footer] h2 {
    width: fit-content;
  }
}

footer section[data-section-footer] * {
  color: #bccae3;
}

footer section[data-section-footer] > * {
  flex-direction: column;
  flex: 1;
  justify-content: flex-end;
  display: flex;
}

footer section[data-section-footer] > .contact {
  max-width: 2000px;
  flex-direction: row;
  justify-content: space-between;
  display: flex;
}

@media screen and (max-width: 800px) {
  footer section[data-section-footer] > .contact {
    --myPaddingT: calc(var(--padding) * 0);
    padding-top: var(--myPaddingT);
    flex-direction: column;
    justify-content: center;
    display: flex;
  }
}

footer section[data-section-footer] > .contact > div {
  flex-direction: column;
  flex: 1;
  justify-content: flex-end;
  display: flex;
}

footer section[data-section-footer] > .contact > div:nth-of-type(2) {
  text-align: center;
  align-items: center;
}

@media screen and (max-width: 800px) {
  footer section[data-section-footer] > .contact > div:nth-of-type(1) {
    text-align: center;
  }
}

footer section[data-section-footer] > .contact > div:nth-of-type(3) {
  text-align: right;
}

@media screen and (max-width: 800px) {
  footer section[data-section-footer] > .contact > div:nth-of-type(3) {
    text-align: center;
  }
}

footer section[data-section-footer] > .contact > div:nth-of-type(2) > h3 {
  color: #00173c;
  color: #bccae3;
}

@media screen and (min-width: 800px) and (max-width: 2000px) {
  footer section[data-section-footer] > .contact > div:nth-of-type(2) > h3 {
    --defaultSize: calc(calc(100vw / 70)  + .0001rem);
    --betterSize: calc(calc(100vw / 70)  + .3rem);
    font-size: var(--betterSize);
  }
}

@media screen and (min-width: 2000px) {
  footer section[data-section-footer] > .contact > div:nth-of-type(2) > h3 {
    font-size: calc(28.5714px + .1rem);
  }
}

@media screen and (max-width: 800px) {
  footer section[data-section-footer] > .contact > div:nth-of-type(2) > h3 {
    font-size: 1.8rem;
  }
}

@media screen and (max-width: 800px) {
  footer section[data-section-footer] > .contact > div:nth-of-type(2) {
    --myPaddingTB: calc(var(--padding) * 1);
    padding-top: var(--myPaddingTB);
    padding-bottom: var(--myPaddingTB);
    align-self: center;
  }

  footer section[data-section-footer] > .contact > div:nth-of-type(2) .btn {
    align-self: center;
  }
}

footer section[data-section-footer] .btn {
  --myMarginT: calc(var(--padding) * .5);
  margin-top: var(--myMarginT);
  border-color: #bccae3;
}

footer section[data-section-footer] h3 {
  color: #00173c;
  color: #bccae3;
  font-family: Satoshi-Variable;
}

@media screen and (min-width: 800px) and (max-width: 2000px) {
  footer section[data-section-footer] h3 {
    --defaultSize: calc(calc(100vw / 80)  + .0001rem);
    --betterSize: calc(calc(100vw / 80)  + .3rem);
    font-size: var(--betterSize);
  }
}

@media screen and (min-width: 2000px) {
  footer section[data-section-footer] h3 {
    font-size: calc(25px + .1rem);
  }
}

@media screen and (max-width: 800px) {
  footer section[data-section-footer] h3 {
    font-size: 1.3rem;
  }
}

footer section[data-section-footer] a.link {
  color: #bccae3;
  text-decoration: none;
  display: inline-block;
}

footer section[data-section-footer] a.link:after {
  content: "";
  height: 1px;
  width: 0;
  background-color: #bccae3;
  transition: width .351s cubic-bezier(.65, 0, .35, 1);
  display: block;
  position: absolute;
  bottom: 0;
}

footer section[data-section-footer] a.link:hover:after {
  width: 100%;
}

.numberWrap {
  --myPaddingTB: calc(var(--padding) * 1);
  padding-top: var(--myPaddingTB);
  padding-bottom: var(--myPaddingTB);
}

@media screen and (max-width: 800px) {
  .numberWrap {
    --myPaddingTB: calc(var(--padding) * 2.5);
    padding-top: var(--myPaddingTB);
    padding-bottom: var(--myPaddingTB);
  }
}

.numberWrap .number {
  --myPaddingTB: calc(var(--padding) * 1);
  padding-top: var(--myPaddingTB);
  padding-bottom: var(--myPaddingTB);
  border-top: 1px dotted #ffffff80;
  border-bottom: 1px dotted #ffffff80;
  flex-direction: row;
  justify-content: space-between;
  display: flex;
}

.numberWrap .number > .numberItem {
  flex-direction: column;
  flex-basis: 33%;
  justify-content: center;
  align-items: center;
  display: flex;
}

@media screen and (max-width: 800px) {
  .numberWrap .number > .numberItem {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
  }
}

.numberWrap .number > .numberItem .no {
  color: #00173c;
  color: #fff;
  font-family: Satoshi-Variable;
  text-transform: uppercase !important;
}

@media screen and (min-width: 800px) and (max-width: 2000px) {
  .numberWrap .number > .numberItem .no {
    --defaultSize: calc(calc(100vw / 10)  + .0001rem);
    --betterSize: calc(calc(100vw / 10)  + .3rem);
    font-size: var(--betterSize);
  }
}

@media screen and (min-width: 2000px) {
  .numberWrap .number > .numberItem .no {
    font-size: calc(200px + .1rem);
  }
}

@media screen and (max-width: 800px) {
  .numberWrap .number > .numberItem .no {
    font-size: 4rem;
  }
}

.numberWrap .number > .numberItem .noDesc {
  color: #00173c;
  --myPaddingT: calc(var(--padding) * .5);
  padding-top: var(--myPaddingT);
  font-family: Satoshi-Variable;
  font-weight: 380;
}

@media screen and (min-width: 800px) and (max-width: 2000px) {
  .numberWrap .number > .numberItem .noDesc {
    --defaultSize: calc(calc(100vw / 90)  + .0001rem);
    --betterSize: calc(calc(100vw / 90)  + .3rem);
    font-size: var(--betterSize);
  }
}

@media screen and (min-width: 2000px) {
  .numberWrap .number > .numberItem .noDesc {
    font-size: calc(22.2222px + .1rem);
  }
}

@media screen and (max-width: 800px) {
  .numberWrap .number > .numberItem .noDesc {
    font-size: 1.4rem;
  }
}

.textBlock {
  margin-left: 25%;
}

.textBlock > .textBlockWrapper {
  flex-flow: wrap;
  justify-content: flex-start;
  display: flex;
}

.textBlock > .textBlockWrapper > p {
  color: #00173c;
  --myPaddingT: calc(var(--padding) * .5);
  padding-top: var(--myPaddingT);
  --myPaddingR: calc(var(--padding) * 1);
  padding-right: var(--myPaddingR);
  font-family: Satoshi-Variable;
  font-weight: 380;
  display: block;
}

@media screen and (min-width: 800px) and (max-width: 2000px) {
  .textBlock > .textBlockWrapper > p {
    --defaultSize: calc(calc(100vw / 90)  + .0001rem);
    --betterSize: calc(calc(100vw / 90)  + .3rem);
    font-size: var(--betterSize);
  }
}

@media screen and (min-width: 2000px) {
  .textBlock > .textBlockWrapper > p {
    font-size: calc(22.2222px + .1rem);
  }
}

@media screen and (max-width: 800px) {
  .textBlock > .textBlockWrapper > p {
    font-size: 1.4rem;
  }
}

@media screen and (max-width: 800px) {
  .textBlock > .textBlockWrapper > p {
    --myPaddingL: calc(var(--padding) * 1);
    padding-left: var(--myPaddingL);
    --myPaddingR: calc(var(--padding) * 0);
    padding-right: var(--myPaddingR);
    flex-basis: 100%;
  }
}

.textBlock > .textBlockWrapper > p strong {
  --myPaddingT: calc(var(--padding) * 1);
  padding-top: var(--myPaddingT);
  display: block;
}

@media screen and (max-width: 800px) {
  .textBlock {
    margin-left: 0%;
  }
}

[data-section-intro] {
  --myPaddingB: calc(var(--padding) * 0);
  padding-top: 30svh;
  padding-bottom: var(--myPaddingB);
  --myPaddingL: calc(var(--padding) * 1);
  padding-left: var(--myPaddingL);
  --myPaddingR: calc(var(--padding) * 1);
  padding-right: var(--myPaddingR);
}

[data-section-portfolio] {
  --myPaddingB: calc(var(--padding) * 3);
  padding-top: 30svh;
  padding-bottom: var(--myPaddingB);
  --myPaddingL: calc(var(--padding) * 1);
  padding-left: var(--myPaddingL);
  --myPaddingR: calc(var(--padding) * 1);
  padding-right: var(--myPaddingR);
}

[data-section-portfolio] > .companyList {
  --maxWidth: 2000px * 110;
  max-width: 2200px;
  --myMarginT: calc(var(--padding) * 3);
  margin-top: var(--myMarginT);
  color: #00173c;
  padding-left: 25%;
}

@media screen and (max-width: 800px) {
  [data-section-portfolio] > .companyList {
    padding-left: 0;
  }
}

[data-section-portfolio] > .companyList > .listItem {
  --myPadding: calc(var(--padding) * 0);
  padding: var(--myPadding);
}

[data-section-portfolio] > .companyList > .listItem.live:before {
  opacity: .3;
  transition: all .301s cubic-bezier(.65, 0, .35, 1);
}

[data-section-portfolio] > .companyList > .listItem:before {
  content: "";
  height: 1px;
  opacity: 1;
  width: 100%;
  background-color: #00173c;
  transition: background-color .651s cubic-bezier(.65, 0, .35, 1);
  position: absolute;
  bottom: 0;
  left: 0;
}

[data-section-portfolio] > .companyList > .listItem:after {
  content: "";
  width: 100%;
  height: 1px;
  opacity: 1;
  width: 0;
  background-color: #00173c;
  transition: all .651s cubic-bezier(.65, 0, .35, 1);
  position: absolute;
  bottom: 0;
  left: 0;
}

[data-section-portfolio] > .companyList > .listItem.live:after, [data-section-portfolio] > .companyList > .listItem:hover:after {
  width: 100%;
  background-color: #fff;
}

[data-section-portfolio] > .companyList > .listItem:hover {
  cursor: pointer;
}

[data-section-portfolio] > .companyList > .listItem.live {
  transition: all .351s cubic-bezier(.65, 0, .35, 1);
}

[data-section-portfolio] > .companyList > .listItem.live .listTrigger .accordion--button {
  opacity: .5;
  transform: rotate(45deg)scale(1);
}

[data-section-portfolio] > .companyList > .listItem.live .listTrigger .accordion--button:after, [data-section-portfolio] > .companyList > .listItem.live .listTrigger .accordion--button:before {
  background-color: #fff;
}

[data-section-portfolio] > .companyList > .listItem.live:hover .listTrigger .accordion--button {
  opacity: 1;
  transform: rotate(45deg)scale(1);
}

[data-section-portfolio] > .companyList > .listItem:hover .listTrigger .accordion--button {
  opacity: 1;
  transform: scale(1);
}

[data-section-portfolio] > .companyList .listTrigger .accordion--button {
  height: var(--padding);
  width: var(--padding);
  opacity: .8;
  transition: all .351s cubic-bezier(.65, 0, .35, 1);
  display: block;
  position: absolute;
  right: 0;
  transform: scale(.9);
}

[data-section-portfolio] > .companyList .listTrigger .accordion--button:after, [data-section-portfolio] > .companyList .listTrigger .accordion--button:before {
  width: 100%;
  height: 2px;
  content: "";
  background-color: #00173c;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%)translateX(-50%);
}

[data-section-portfolio] > .companyList .listTrigger .accordion--button:before {
  transform: translateY(-50%)translateX(-50%)rotate(90deg);
}

@media screen and (max-width: 800px) {
  [data-section-portfolio] > .companyList .listTrigger .accordion--button {
    opacity: .5;
    transform: scale(1);
  }
}

[data-section-portfolio] > .companyList .listTrigger {
  --myPaddingTB: calc(var(--padding) * .5);
  padding-top: var(--myPaddingTB);
  padding-bottom: var(--myPaddingTB);
  flex-direction: column;
  justify-content: center;
  display: flex;
}

@media screen and (max-width: 800px) {
  [data-section-portfolio] > .companyList .listTrigger {
    flex-direction: column;
    justify-content: center;
    display: flex;
  }
}

[data-section-portfolio] > .companyList .listTrigger > span:nth-of-type(1) .accordion--button {
  height: var(--padding);
  width: var(--padding);
  opacity: .8;
  transition: all .351s cubic-bezier(.65, 0, .35, 1);
  display: block;
  position: absolute;
  right: 0;
  transform: scale(.9);
}

[data-section-portfolio] > .companyList .listTrigger > span:nth-of-type(1) .accordion--button:after, [data-section-portfolio] > .companyList .listTrigger > span:nth-of-type(1) .accordion--button:before {
  width: 100%;
  height: 2px;
  content: "";
  background-color: #00173c;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%)translateX(-50%);
}

[data-section-portfolio] > .companyList .listTrigger > span:nth-of-type(1) .accordion--button:before {
  transform: translateY(-50%)translateX(-50%)rotate(90deg);
}

@media screen and (max-width: 800px) {
  [data-section-portfolio] > .companyList .listTrigger > span:nth-of-type(1) .accordion--button {
    opacity: .5;
    transform: scale(1);
  }
}

[data-section-portfolio] > .companyList .listTrigger > span:nth-of-type(2) {
  text-align: left;
  color: #00173c;
  flex-direction: column;
  justify-content: center;
  font-family: Satoshi-Variable;
  font-weight: 300;
  display: flex;
}

@media screen and (min-width: 800px) and (max-width: 2000px) {
  [data-section-portfolio] > .companyList .listTrigger > span:nth-of-type(2) {
    --defaultSize: calc(calc(100vw / 90)  + .0001rem);
    --betterSize: calc(calc(100vw / 90)  + .3rem);
    font-size: var(--betterSize);
  }
}

@media screen and (min-width: 2000px) {
  [data-section-portfolio] > .companyList .listTrigger > span:nth-of-type(2) {
    font-size: calc(22.2222px + .1rem);
  }
}

@media screen and (max-width: 800px) {
  [data-section-portfolio] > .companyList .listTrigger > span:nth-of-type(2) {
    font-size: 1.5rem;
  }
}

@media screen and (max-width: 800px) {
  [data-section-portfolio] > .companyList .listTrigger > span:nth-of-type(2) {
    font-weight: 350;
  }
}

[data-section-portfolio] > .companyList .listContent-inside {
  --myPaddingB: calc(var(--padding) * .5);
  padding-bottom: var(--myPaddingB);
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

[data-section-portfolio] > .companyList .listContent-inside > div:nth-of-type(1) {
  width: 66%;
}

@media screen and (max-width: 800px) {
  [data-section-portfolio] > .companyList .listContent-inside > div:nth-of-type(1) {
    width: 100%;
  }
}

[data-section-portfolio] > .companyList .listContent-inside > div:nth-of-type(2) {
  width: 33%;
}

@media screen and (max-width: 800px) {
  [data-section-portfolio] > .companyList .listContent-inside > div:nth-of-type(2) {
    width: 100%;
  }
}

[data-section-portfolio] > .companyList .listContent-inside .logo {
  --myPadding: calc(var(--padding) * .5);
  padding: var(--myPadding);
}

@media screen and (max-width: 800px) {
  [data-section-portfolio] > .companyList .listContent-inside .logo {
    --myPadding: calc(var(--padding) * 1);
    padding: var(--myPadding);
  }
}

[data-section-portfolio] > .companyList .listContent-inside .logo img {
  object-fit: contain;
  height: 100%;
  width: 100%;
  transform: scale(.8);
}

@media screen and (max-width: 800px) {
  [data-section-portfolio] > .companyList .listContent-inside {
    max-width: 100%;
  }
}

[data-section-portfolio] > .companyList .listContent-inside p {
  color: #00173c;
  font-family: Satoshi-Variable;
  font-size: calc(1.25vw + .1rem);
  font-weight: 380;
}

@media screen and (min-width: 2000px) {
  [data-section-portfolio] > .companyList .listContent-inside p {
    font-size: calc(25px + .1rem);
  }
}

@media screen and (max-width: 800px) {
  [data-section-portfolio] > .companyList .listContent-inside p {
    font-size: 1.5rem;
  }
}

[data-section-portfolio] > .companyList .listContent-inside span {
  width: max-content;
  display: block;
}

[data-section-portfolio] > .companyList .listContent-inside span.year {
  color: #00173c;
  font-family: Satoshi-Variable;
}

@media screen and (min-width: 800px) and (max-width: 2000px) {
  [data-section-portfolio] > .companyList .listContent-inside span.year {
    --defaultSize: calc(calc(100vw / 100)  + .0001rem);
    --betterSize: calc(calc(100vw / 100)  + .3rem);
    font-size: var(--betterSize);
  }
}

@media screen and (min-width: 2000px) {
  [data-section-portfolio] > .companyList .listContent-inside span.year {
    font-size: calc(20px + .1rem);
  }
}

@media screen and (max-width: 800px) {
  [data-section-portfolio] > .companyList .listContent-inside span.year {
    font-size: 1.4rem;
  }
}

@media screen and (max-width: 800px) {
  [data-section-portfolio] > .companyList .listContent-inside {
    flex-direction: column-reverse;
    justify-content: space-between;
    display: flex;
  }
}

@media screen and (max-width: 800px) {
  [data-section-portfolio] > .companyList .listContent-inside > div:nth-of-type(1) {
    --myPaddingR: calc(var(--padding) * 0);
    padding-right: var(--myPaddingR);
  }
}

@media screen and (max-width: 800px) {
  [data-section-portfolio] > .companyList .listContent-inside > div:nth-of-type(1) {
    flex-direction: row;
    justify-content: space-between;
    display: flex;
  }
}

[data-section-portfolio] > .companyList .listContent {
  height: 0;
  overflow: hidden;
}

[data-section-portfolio] .col2 {
  max-width: 80%;
  color: #00173c;
  --myPaddingTB: calc(var(--padding) * 1);
  padding-top: var(--myPaddingTB);
  padding-bottom: var(--myPaddingTB);
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-family: Satoshi-Variable;
  font-weight: 450;
  display: flex;
}

@media screen and (max-width: 800px) {
  [data-section-portfolio] .col2 {
    max-width: 100%;
  }
}

@media screen and (min-width: 800px) and (max-width: 2000px) {
  [data-section-portfolio] .col2 {
    --defaultSize: calc(calc(100vw / 70)  + .0001rem);
    --betterSize: calc(calc(100vw / 70)  + .3rem);
    font-size: var(--betterSize);
  }
}

@media screen and (min-width: 2000px) {
  [data-section-portfolio] .col2 {
    font-size: calc(28.5714px + .1rem);
  }
}

@media screen and (max-width: 800px) {
  [data-section-portfolio] .col2 {
    font-size: 2.5rem;
  }
}

@media screen and (max-width: 800px) {
  [data-section-portfolio] .col2 div {
    flex-direction: column;
    justify-content: flex-end;
    display: flex;
  }
}

[data-section-portfolio] .col2 div span {
  color: #00173c;
  text-transform: uppercase;
  padding-right: 2rem;
  font-family: Satoshi-Variable;
}

@media screen and (min-width: 800px) and (max-width: 2000px) {
  [data-section-portfolio] .col2 div span {
    --defaultSize: calc(calc(100vw / 120)  + .0001rem);
    --betterSize: calc(calc(100vw / 120)  + .3rem);
    font-size: var(--betterSize);
  }
}

@media screen and (min-width: 2000px) {
  [data-section-portfolio] .col2 div span {
    font-size: calc(16.6667px + .1rem);
  }
}

@media screen and (max-width: 800px) {
  [data-section-portfolio] .col2 div span {
    font-size: 1rem;
  }
}

[data-section-portfolio] .colLogo {
  width: 10%;
}

[data-section-portfolio] .logoAc {
  --myPadding: calc(var(--padding) * 1);
  padding: var(--myPadding);
  flex-direction: row;
  justify-content: center;
  display: flex;
}

@media screen and (max-width: 800px) {
  [data-section-portfolio] .logoAc {
    width: 100%;
    position: relative;
  }
}

[data-section-portfolio] .logoAc img {
  width: 100%;
  object-fit: contain;
  height: auto;
  object-position: 50% 50%;
  display: block;
  position: relative;
}

footer {
  z-index: 2;
}

[contain] {
  width: 100%;
  object-fit: contain;
  height: auto;
  object-position: 100% 100%;
}

[cover] {
  width: 100%;
  object-fit: cover;
  height: 100%;
  object-position: 50% 50%;
  align-self: center;
}

.personalBlock {
  --maxWidth: 2000px * 100;
  max-width: 2000px;
  flex-flow: wrap;
  justify-content: flex-start;
  margin-left: 20%;
  display: flex;
}

@media screen and (max-width: 800px) {
  .personalBlock {
    margin-left: 0%;
  }
}

.personalBlock .person {
  --myPadding: calc(var(--padding) * 1);
  padding: var(--myPadding);
  flex-basis: 50%;
}

@media screen and (max-width: 800px) {
  .personalBlock .person {
    --myPaddingL: calc(var(--padding) * 0);
    padding-left: var(--myPaddingL);
    --myPaddingR: calc(var(--padding) * 0);
    padding-right: var(--myPaddingR);
    flex-basis: 100%;
  }
}

.personalBlock img {
  object-fit: contain;
  width: 100%;
  height: auto;
  transform: translate3d(0, 0, 0);
}

.personalBlock .name {
  color: #00173c;
  --myPaddingT: calc(var(--padding) * .5);
  padding-top: var(--myPaddingT);
  text-transform: uppercase;
  font-family: Satoshi-Variable;
}

@media screen and (min-width: 800px) and (max-width: 2000px) {
  .personalBlock .name {
    --defaultSize: calc(calc(100vw / 50)  + .0001rem);
    --betterSize: calc(calc(100vw / 50)  + .3rem);
    font-size: var(--betterSize);
  }
}

@media screen and (min-width: 2000px) {
  .personalBlock .name {
    font-size: calc(40px + .1rem);
  }
}

@media screen and (max-width: 800px) {
  .personalBlock .name {
    font-size: 3rem;
  }
}

.personalBlock .status {
  color: #00173c;
  font-family: Satoshi-Variable;
}

@media screen and (min-width: 800px) and (max-width: 2000px) {
  .personalBlock .status {
    --defaultSize: calc(calc(100vw / 80)  + .0001rem);
    --betterSize: calc(calc(100vw / 80)  + .3rem);
    font-size: var(--betterSize);
  }
}

@media screen and (min-width: 2000px) {
  .personalBlock .status {
    font-size: calc(25px + .1rem);
  }
}

@media screen and (max-width: 800px) {
  .personalBlock .status {
    font-size: 2rem;
  }
}

.personalBlock .linkedin a {
  color: #00173c;
  color: #fff;
  font-family: Satoshi-Variable;
}

@media screen and (min-width: 800px) and (max-width: 2000px) {
  .personalBlock .linkedin a {
    --defaultSize: calc(calc(100vw / 100)  + .0001rem);
    --betterSize: calc(calc(100vw / 100)  + .3rem);
    font-size: var(--betterSize);
  }
}

@media screen and (min-width: 2000px) {
  .personalBlock .linkedin a {
    font-size: calc(20px + .1rem);
  }
}

@media screen and (max-width: 800px) {
  .personalBlock .linkedin a {
    font-size: 1.4rem;
  }
}

.personalBlock .personImg {
  mix-blend-mode: screen;
  perspective: 500px;
  transform-style: preserve-3d;
  transform: scale(.9)translate3d(0, 0, 0);
  z-index: 1000 !important;
}

@media screen and (max-width: 800px) {
  .personalBlock .personImg {
    --myPadding: calc(var(--padding) * 0);
    padding: var(--myPadding);
    --myPaddingTB: calc(var(--padding) * 1);
    padding-top: var(--myPaddingTB);
    padding-bottom: var(--myPaddingTB);
  }
}

.testimonialSpacer {
  --myPadding: calc(var(--padding) * 2);
  padding: var(--myPadding);
}

#headlineWrapper {
  z-index: 10;
}

[data-hero-perex] {
  width: 100%;
  max-width: 100vw;
  background-position: 0 0;
  background-size: contain contain;
  --myPadding: calc(var(--padding) * 1);
  padding: var(--myPadding);
  --myPaddingT: calc(var(--padding) * 0);
  padding-top: var(--myPaddingT);
}

@media screen and (max-width: 800px) {
  [data-hero-perex] {
    width: 100vw;
    --myPadding: calc(var(--padding) * 1);
    padding: var(--myPadding);
    --myPaddingTB: calc(var(--padding) * 1);
    padding-top: var(--myPaddingTB);
    padding-bottom: var(--myPaddingTB);
  }
}

[data-hero-perex] .perexInside {
  width: 100%;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

[data-hero-perex] .perexInside > div {
  flex: 1;
}

@media screen and (max-width: 800px) {
  [data-hero-perex] .perexInside {
    --myPadding: calc(var(--padding) * 0);
    padding: var(--myPadding);
    width: 100%;
    --myPaddingTB: calc(var(--padding) * 1);
    padding-top: var(--myPaddingTB);
    padding-bottom: var(--myPaddingTB);
    flex-direction: column;
    justify-content: space-between;
    display: flex;
  }
}

[data-hero-perex] .perexInside .heroImg > img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

[data-hero-perex] p {
  --myPaddingT: calc(var(--padding) * 2);
  padding-top: var(--myPaddingT);
  --myPaddingR: calc(var(--padding) * 1);
  padding-right: var(--myPaddingR);
}

[data-hero-perex] .btnWrapp {
  --myPaddingT: calc(var(--padding) * 1);
  padding-top: var(--myPaddingT);
}

.poster {
  width: 100%;
  --myMarginT: calc(var(--padding) * 2);
  margin-top: var(--myMarginT);
  overflow: hidden;
}

.poster > img {
  --myPadding: calc(var(--padding) * 1);
  padding: var(--myPadding);
  object-fit: contain;
  width: 100%;
  max-height: 60svh;
  height: 100%;
}

nav {
  height: calc(var(--padding) * 3);
  width: 100%;
  pointer-events: none;
  position: fixed;
  top: 0;
  z-index: 1000 !important;
}

nav .topHeader {
  pointer-events: all;
  padding: var(--padding);
  width: calc(100% - var(--padding)  - var(--padding) );
  flex-direction: row;
  justify-content: space-between;
  margin: 0 auto;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  transform: translateY(0%);
}

@media (hover: hover) {
  nav .topHeader:hover > #headerBg {
    opacity: 1;
    filter: blur();
  }
}

nav .topHeader.isHide > #headerBg {
  opacity: 1;
}

nav .topHeader.isHide.keep {
  opacity: 0;
  filter: blur();
  transition: all .551s cubic-bezier(.65, 0, .35, 1);
  transform: translateY(-50%);
}

nav .topHeader.isHide {
  opacity: 1;
  filter: blur();
  transition: all .551s cubic-bezier(.65, 0, .35, 1);
}

nav .topHeader > #headerBg {
  --tw-backdrop-blur: 15px;
  opacity: 0;
  left: calc(var(--padding) / 2);
  width: calc(100% - calc(var(--padding) ) );
  top: calc(var(--padding) / 2);
  bottom: calc(var(--padding) / 2);
  border-radius: 1rem;
  transition: all .551s cubic-bezier(.65, 0, .35, 1);
  display: block;
  position: absolute;
  z-index: -9999 !important;
}

@media screen and (max-width: 800px) {
  nav .topHeader > #headerBg {
    left: calc(var(--padding) / 4);
    width: calc(100% - calc(var(--padding) / 4) );
    top: calc(var(--padding) / 4);
    bottom: calc(var(--padding) / 4);
  }
}

nav .topHeader > #headerBg:after {
  content: "";
  width: 100%;
  opacity: .95;
  filter: contrast(1.2);
  background-color: #c3d3f1;
  border-radius: 1rem;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

nav .topHeader .logo {
  height: var(--padding);
}

@media screen and (max-width: 800px) {
  nav .topHeader .logo {
    height: calc(var(--padding) * 2);
  }
}

nav .topHeader .logo img {
  height: calc(var(--padding) * 1);
  object-fit: contain;
  display: block;
}

@media screen and (max-width: 800px) {
  nav .topHeader .logo img {
    height: calc(var(--padding) * 2);
  }
}

@media screen and (max-width: 800px) {
  nav .topHeader {
    padding: 2rem;
  }
}

nav .topHeader.fixed {
  position: fixed;
  top: 0;
}

nav .topHeader.hidden {
  transform: translateY(-100%);
}

nav .topHeader .menu {
  height: 100%;
  color: #00173c;
  text-wrap: nowrap;
  width: max-content;
  align-self: center;
  font-family: Satoshi-Variable;
  font-weight: 470;
  display: inline-block;
}

@media screen and (min-width: 800px) and (max-width: 2000px) {
  nav .topHeader .menu {
    --defaultSize: calc(calc(100vw / 90)  + .0001rem);
    --betterSize: calc(calc(100vw / 90)  + .3rem);
    font-size: var(--betterSize);
  }
}

@media screen and (min-width: 2000px) {
  nav .topHeader .menu {
    font-size: calc(22.2222px + .1rem);
  }
}

@media screen and (max-width: 800px) {
  nav .topHeader .menu {
    font-size: 1.5rem;
  }
}

@media screen and (min-width: 800px) and (max-width: 2000px) {
  nav .topHeader .menu {
    font-size: 1.8rem;
  }
}

nav .topHeader .menu > a {
  text-wrap: nowrap;
  padding-left: var(--padding);
  color: #00173c;
  text-decoration: none;
  transition: all .3s cubic-bezier(.65, 0, .35, 1);
  display: inline-block;
}

nav .topHeader .menu > a.is-active {
  color: #fff;
}

nav .topHeader .menu > a:hover {
  cursor: pointer;
  color: #fff;
}

@media screen and (max-width: 800px) {
  nav .topHeader .menu > a {
    padding-left: 2rem;
  }
}

section > .insideWrapper {
  overflow-x: hidden;
}

.curtainHolder {
  width: 100vw;
  height: 100%;
  pointer-events: none;
  position: fixed;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: 100001 !important;
}

.curtainHolder > #curtainSpot {
  content: "";
  width: min(100vw, 100vh);
  height: min(100vw, 100vh);
  pointer-events: none;
  opacity: 0;
  filter: blur(200px);
  background-color: #b0bfdd;
  border-radius: 100%;
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  overflow: hidden;
  transform: translate3d(-50%, -50%, 0)scale(.2);
  z-index: 99999998 !important;
}

.curtainHolder > div {
  height: 100%;
  width: 100%;
  pointer-events: none;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 999999 !important;
}

.curtainHolder > #pageTransitionCurtain {
  pointer-events: none;
  filter: brightness(1.1);
  background: radial-gradient(143.66% 76.53% at 45.59% 37.26%, #83a2db00 0%, #afc0decc 100%), #bccae3;
  z-index: 999999 !important;
}

.curtainHolder > .curtainLogo {
  width: 60px;
  height: 90px;
  --myPaddingTB: calc(var(--padding) * 1);
  padding-top: var(--myPaddingTB);
  padding-bottom: var(--myPaddingTB);
  position: absolute;
  top: 50svh;
  left: 50%;
  transform: translateY(-50%)translateX(-50%);
  z-index: 99999999 !important;
}

.curtainHolder > .curtainLogo > img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  filter: blur(5px);
}

.curtainHolder > .curtainLogo > img.loaded {
  display: none;
}

article {
  pointer-events: none;
}

.colorEl {
  width: min(100vw, 100vh);
  height: min(100vw, 100vh);
  pointer-events: none;
  opacity: .42;
  filter: blur(200px);
  mix-blend-mode: overlay;
  border-radius: 100%;
  position: fixed;
  bottom: 0;
  left: 50%;
  overflow: hidden;
  transform: translateX(-50%)scale(.9)translateY(-50%);
  z-index: -2 !important;
}

@media screen and (max-width: 800px) {
  .colorEl {
    opacity: .9;
  }
}

.bg-cover {
  position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.noise {
  z-index: 9000;
  pointer-events: none;
  opacity: .5;
  width: 100vw;
  height: 100vh;
  background: url("noise-bg.5e61aba2.png") 0 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999999 !important;
}

.img--on--bg, .bgCover, .story__01 {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.story__01:not(static) {
  background: url("story_01.d7b510c5.jpg");
}

@media screen and (max-width: 800px) {
  .story__01:not(static) {
    background: url("story_01_mob.0b0767a1.jpg");
  }
}

.story__03 {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.story__03:not(static) {
  background: url("story_03.5984a438.jpg");
}

@media screen and (max-width: 800px) {
  .story__03:not(static) {
    background: url("story_03_mob.b5910838.jpg");
  }
}

.story__02 {
  background: url("box2.37ae1b2d.png");
}

.story__02:not(static) {
  background: url("story_02.1db76c3a.jpg");
}

@media screen and (max-width: 800px) {
  .story__02:not(static) {
    background: url("story_02_mob.d1a48169.jpg");
  }
}

[data-section-homepage] > .logo {
  opacity: 0;
  width: 130px;
}

@media screen and (max-width: 800px) {
  [data-section-homepage] > .logo {
    width: 100px;
  }
}

[data-section-homepage] > .logo img {
  width: 100%;
  height: auto;
  display: bou;
  object-fit: contain;
}

[data-section-homepage] > .homepageBottom {
  color: #00173c;
  flex-direction: row;
  justify-content: space-between;
  font-family: Satoshi-Variable;
  font-weight: 350;
  display: flex;
  padding-top: 1rem !important;
}

[animButton] {
  z-index: 1000;
}

.btn {
  color: #00173c;
  width: max-content;
  text-transform: uppercase;
  text-align: center;
  border-radius: 50vw;
  outline: 1px solid #00173c;
  padding: 2rem 4rem;
  font-family: Satoshi-Variable;
  font-weight: 700;
  text-decoration: none;
  transition: all .551s cubic-bezier(.65, 0, .35, 1);
  display: block;
  overflow: hidden;
}

.btn.invert {
  filter: invert();
}

.btn i {
  aspect-ratio: 1;
  opacity: 0;
  background: url("arrow.b9dab6f1.svg") center / 50% 50% no-repeat;
  transition: all .551s cubic-bezier(.65, 0, .35, 1);
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: .5rem;
}

@media screen and (min-width: 800px) and (max-width: 2000px) {
  .btn {
    --defaultSize: calc(calc(100vw / 110)  + .0001rem);
    --betterSize: calc(calc(100vw / 110)  + .3rem);
    font-size: var(--betterSize);
  }
}

@media screen and (min-width: 2000px) {
  .btn {
    font-size: calc(18.1818px + .1rem);
  }
}

@media screen and (max-width: 800px) {
  .btn {
    font-size: 1.4rem;
  }
}

.btn:after {
  z-index: -1;
  content: "";
  width: 100%;
  opacity: 1;
  background-color: #fff;
  border-radius: 50vw;
  transition: all .551s cubic-bezier(.65, 0, .35, 1);
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100%;
}

.btn:hover:after {
  transform: translateX(100%);
}

.btn:hover {
  outline: 1px solid #00173c00;
  padding-left: 5rem;
  padding-right: 7rem;
}

.btn:hover > i {
  opacity: 1;
}

@media screen and (max-width: 800px) {
  section[data-section-story] .btn {
    outline: 1px solid #00173c00;
    padding-left: 5rem;
    padding-right: 5rem;
  }

  section[data-section-story] .btn:after {
    transform: translateX(100%);
  }
}

.credits {
  pointer-events: none;
  --myPadding: calc(var(--padding) * 1);
  padding: var(--myPadding);
  opacity: 0;
  color: #00173c;
  font-family: Satoshi-Variable;
  transition: all .551s cubic-bezier(.65, 0, .35, 1);
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 9999999 !important;
}

.credits.hidden {
  opacity: 0;
  filter: blur(10px);
}

@media screen and (min-width: 800px) and (max-width: 2000px) {
  .credits {
    --defaultSize: calc(calc(100vw / 100)  + .0001rem);
    --betterSize: calc(calc(100vw / 100)  + .3rem);
    font-size: var(--betterSize);
  }
}

@media screen and (min-width: 2000px) {
  .credits {
    font-size: calc(20px + .1rem);
  }
}

@media screen and (max-width: 800px) {
  .credits {
    font-size: 1.3rem;
  }
}

/*# sourceMappingURL=main.e7bd0554.css.map */