@charset "UTF-8";
@import url("reset.css");
@import url("fonts.css");
:root {
  --app-height: 100vh;
  --headroom-height: auto;
  --c0: #ffffff;
  --c1: #000000;
  --c2: #32006f;
  --c3: #e6efff;
  --c4: rgba(127, 173, 255, 0.2);
  --c5: #ee0000;
  --c6: rgba(0, 0, 0, 0.7);
  --c7: #bfbfbf;
  --c8: #5e5e5e;
  --wr: 20rem;
  --awr: calc(-1 * var(--wr));
  --gap: 20rem;
  --sl: max(1px, 1rem);
  --br1: 10rem;
  --br2: 20rem;
  --btn: max(55px, 60rem);
  --f-s: max(14px, 18rem);
  --f-d: max(14px, 20rem);
  --f-m: max(14px, 28rem);
  --f-b: max(14px, 40rem);
  --f-l: max(14px, 64rem);
  --f-xl: max(14px, 72rem);
  --f-xxl: max(14px, 80rem);
  --f-xxxl: max(14px, 90rem);
  --mw: 1920px;
  --kw: 1vw;
}

/* globals */
html {
  font-size: 0.0625vw;
  background-color: var(--c3);
}

body {
  overflow-x: hidden;
}

.document {
  font-weight: 400;
  font-family: "Aspekta", sans-serif;
  font-size: var(--f-d);
  line-height: 1.2;
  color: var(--c1);
  background-color: var(--c3);
  letter-spacing: -0.02em;
}

.wrapper {
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--wr);
  max-width: var(--mw);
}

.preloader {
  background-color: var(--c3);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  transition: all 0.25s 0.3s;
  display: flex;
  color: var(--c1);
  will-change: transform;
}

.loading {
  pointer-events: none;
}

.loading .preloader {
  transition-duration: 0s;
  opacity: 1;
  visibility: visible;
}

.unload .preloader {
  transition-duration: 0.5s;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  padding: var(--headroom-height) var(--wr) var(--wr);
  overflow: auto;
  display: flex;
  transition: transform 0.5s;
  will-change: transform;
}

.popup-overlay {
  background-color: var(--c1);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  opacity: 0;
  transition: all 0.5s;
  visibility: hidden;
}
@media (min-width: 1024px) {
  .popup-overlay {
    background-color: rgba(0, 0, 0, 0.65);
  }
}

.popup-active .popup-overlay {
  opacity: 1;
  visibility: visible;
}

.default-popup {
  opacity: 0;
  pointer-events: none;
}
.default-popup.active {
  opacity: 1;
}
.default-popup.active .default-popup__inner {
  transform: translateY(0%);
  opacity: 1;
  transition-delay: 0.25s;
  pointer-events: initial;
}
.default-popup .js-popup-close {
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  right: 0;
  top: 0;
  transform: translatey(calc(-100% - 10rem));
  transition: all 0.25s ease;
}
.default-popup .js-popup-close:hover {
  transform: translatey(calc(-100% - 10rem)) scale(1.2);
}
.default-popup__media {
  border-radius: 10rem;
  overflow: hidden;
}
.default-popup__inner {
  transition: all 0.25s linear;
  transform: translateY(-50%);
  opacity: 0;
  padding: clamp(15px, 2.44140625vw, 30rem);
  max-width: 360rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16rem;
  margin: auto;
  background-color: #fff;
  border-radius: 16rem;
  z-index: 20;
  position: relative;
}
.default-popup__inner p {
  margin-bottom: auto;
  font-size: var(--f-d);
  font-weight: 400;
  line-height: 1.3;
}

.s13-5 {
  transition: transform 0.5s;
}

.unload .s13-7:nth-child(1) .s13-5 {
  transform: translateX(-100%);
}

.unload .s13-7:nth-child(2) .s13-5 {
  transform: translateX(100%);
}

.header {
  transition: transform 0.5s 1s ease-out;
}

.hero .swiper-slide {
  transition: opacity 1s 1s;
}

.hero-animation {
  transition: all 1s 0.25s;
}

.loading .header {
  transform: translateY(-100%);
  transition-duration: 0s;
  transition-delay: 0s;
}

.loading .hero .swiper-slide {
  opacity: 0;
  transition-duration: 0s;
  transition-delay: 0s;
}

.loading .hero-animation {
  margin: calc(-60 * var(--kw));
  transition-duration: 0s;
  transition-delay: 0s;
}

.icon {
  display: flex;
  max-height: 100%;
  align-items: center;
  justify-content: center;
  line-height: 0;
  max-width: 100%;
  width: auto;
  height: auto;
}

.cover,
.contain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-position: center;
  pointer-events: none;
}

.cover {
  object-fit: cover;
}

.contain {
  object-fit: contain;
}

.fill::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.button {
  display: inline-flex;
  justify-content: center;
  max-width: 100%;
  user-select: none;
  cursor: pointer;
  align-items: center;
  background-clip: border-box;
}

.button:not(.fill) {
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.button-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  position: relative;
  z-index: 2;
  min-width: 0;
  padding: 0 0.1em;
}

.button-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 10rem;
  width: max(10px, 12rem);
  height: max(10px, 18rem);
}

.button-icon:first-child {
  margin-left: 0;
}

.button-icon:last-child {
  margin-right: 0;
}

.button__default {
  background-color: var(--c0);
  color: var(--c2);
  padding: 0 50rem;
  height: var(--btn);
  border-radius: var(--br1);
  border: var(--sl) solid transparent;
}

.button__default .button-text {
  font-weight: 500;
  letter-spacing: -0.03em;
}

.button__contrast {
  background-color: var(--c2);
  color: var(--c0);
}

.button__wide {
  width: 100%;
}

.title {
  line-height: 0.95;
  font-weight: 500;
  width: 100%;
  color: var(--c2);
  letter-spacing: -0.03em;
}

.title__default {
  font-size: var(--f-xl);
}

.title__large {
  font-size: var(--f-xxl);
}

.title__404 {
  font-size: 300rem;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: var(--app-height);
}

.header {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 15;
  pointer-events: none;
}

.topbar {
  background-color: var(--c0);
  color: var(--c1);
  border-radius: var(--br2);
  margin: 20rem 0 32rem;
  padding: 20rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-gap: var(--gap);
  align-items: center;
  pointer-events: all;
  box-shadow: 0 0 10rem var(--c4);
}

.topbar-logo {
  max-width: 190rem;
  line-height: 0;
}

.topbar-nav,
.topbar-action {
  font-weight: 500;
  font-size: var(--f-s);
  letter-spacing: -0.03em;
}

.topbar-nav ul {
  display: grid;
  grid-auto-flow: column;
  grid-gap: var(--gap);
  align-items: center;
}

.topbar-action {
  margin-left: auto;
  text-decoration: underline;
}

.main {
  margin-top: 0;
  flex: auto;
  display: flex;
  flex-direction: column;
}

.section {
  position: relative;
  z-index: 1;
  margin-bottom: 200rem;
}

.section:only-child {
  flex: auto;
}

.section-header {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: var(--gap);
}

.section-header:not(:last-child) {
  margin-bottom: 60rem;
}

.section-header-title {
  grid-column: 2/4;
  text-align: center;
}

.footer {
  overflow: hidden;
  margin-top: 0;
  padding: 60rem 0 120rem;
  background-color: var(--c0);
  color: var(--c1);
  position: relative;
  z-index: 1;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 40rem var(--gap);
  align-items: flex-start;
  grid-template-rows: 1fr auto;
  grid-template-areas: "f1 f2 f2 f3" "f1 f2 f2 f4";
}

.f1 {
  grid-area: f1;
}

.f1-1 {
  max-width: 240rem;
}

.f1-2 {
  margin-top: 30rem;
  max-width: 200rem;
}

.f1-3 {
  margin-top: 35rem;
}

.f2 {
  grid-area: f2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: var(--gap);
}

.f2-1-1 {
  margin-bottom: 30rem;
  color: var(--c6);
}

.f2-1-2 ul {
  display: grid;
  grid-template-columns: auto;
  grid-gap: 10rem;
}

.f3 {
  grid-area: f3;
  color: var(--c6);
  font-size: var(--f-s);
}

.f3-2:not(:first-child) {
  margin-top: 10rem;
}

.f3-2 ul {
  display: grid;
  grid-template-columns: auto;
  grid-gap: 10rem;
}

.f4 {
  grid-area: f4;
  font-size: var(--f-s);
}

.bottombar-author {
  display: flex;
  align-items: baseline;
}

.dd-icon {
  width: 1em;
  height: 1.2em;
  margin: 0 0.3em;
  color: currentColor;
  opacity: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dd-icon .icon {
  width: 100%;
}

.page-header {
  position: relative;
}

.page-header-inner {
  min-height: var(--app-height);
  padding: 40rem 0 40rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 50rem var(--gap);
  grid-template-rows: 1fr auto 1fr;
  text-align: center;
}

.page-header-media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.page-header-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.page-header-video::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: var(--c1);
  opacity: 0.3;
}

.page-header-content {
  grid-row: 2/3;
  grid-column: 2/4;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}

.page-header-content:last-child {
  margin-top: 50rem;
}

.page-header-title {
  margin: 0 calc((100% + var(--gap)) / -2);
}

.page-header-subtitle {
  margin-top: 30rem;
}

.page-header-action {
  margin-top: 40rem;
}

.page-header-scroll {
  grid-row: 3/4;
  grid-column: 2/4;
  margin: auto auto 0;
  font-size: var(--f-m);
  font-weight: 600;
  color: var(--c2);
  position: relative;
  z-index: 1;
  cursor: pointer;
}

.page-header-container {
  margin-top: 40rem;
  width: 100%;
  text-align: left;
}

.page-header-video ~ .page-header-content,
.page-header-video ~ .page-header-content .title,
.page-header-video ~ .page-header-scroll {
  color: var(--c0);
}

.header-video-sound.active .header-video-sound-on,
.header-video-sound:not(.active) .header-video-sound-off {
  display: none;
}

.main:has(.hero-snap) {
  scroll-snap-type: y mandatory;
}

.main:has(.hero-snap) > * {
  scroll-snap-align: none;
  scroll-snap-stop: normal;
}

.main:has(.hero-snap) > .hero-snap {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-height: 100vh;
}

#hero-snap {
  margin-bottom: 400rem;
}

.hero-snap {
  position: relative;
  height: 100vh;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}
.hero-snap .page-header-title {
  max-width: 1200rem;
}
.hero-snap::-webkit-scrollbar {
  display: none !important;
}
.hero-snap.is-scrollable {
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}

.hero-snap__animation {
  top: 0;
  left: 0;
  overflow-x: clip;
  position: absolute;
  height: 110vh;
  pointer-events: none;
  width: 100%;
}

.hero-snap__slide {
  position: relative;
  height: 100vh;
  scroll-snap-align: center;
  background: transparent;
  transform-origin: center center;
  will-change: transform, opacity;
}

.hero-animation {
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  inset: 0 !important;
  will-change: transform;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate3d(0, 10%, 0);
  -webkit-transform: translate3d(0, 10%, 0);
}

.textbox h2 {
  margin: 80rem 0 30rem;
  line-height: 1;
  font-weight: 600;
  width: 100%;
  font-size: var(--f-b);
}

.textbox h2:first-child {
  margin-top: 0;
}

.textbox ul {
  margin: 30rem 0;
  display: grid;
  grid-template-columns: auto;
  grid-gap: 1em;
}

.textbox ul:first-child {
  margin-top: 0;
}

.textbox ul:last-child {
  margin-bottom: 0;
}

.textbox li {
  position: relative;
  padding-left: 1.5em;
}

.textbox li::before {
  content: "•";
  position: absolute;
  top: 0;
  left: 0;
  width: 1.5em;
  text-align: center;
}

.textbox img {
  margin: 200rem calc(var(--gap) / 2 - 50%);
  width: calc((100% - var(--gap) / 2) * 2);
  border-radius: var(--br1);
  max-width: none;
}

.textbox img:first-child {
  margin-top: 0;
}

.textbox img:last-child {
  margin-bottom: 0;
}

.textbox a {
  text-decoration: underline;
}

.textbox-quote {
  margin: 30rem 0;
  padding-left: 1.5em;
  position: relative;
}

.textbox-quote::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2rem;
  height: 100%;
  background-color: currentColor;
}

.textbox-quote:first-child {
  margin-top: 0;
}

.textbox-quote:last-child {
  margin-bottom: 0;
}

.formbox {
  display: grid;
  grid-template-columns: auto;
  grid-gap: var(--gap);
  width: 100%;
}

.formbox-footer {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: var(--gap);
  align-items: flex-start;
  margin-top: 30rem;
}

.formbox-footer-action:only-child {
  grid-column: 1/-1;
}

.formbox-footer-note {
  text-align: right;
  font-size: var(--f-s);
  color: var(--c8);
}

.formbox-row {
  display: flex;
  align-items: flex-start;
}

.formbox-cell {
  flex: 1;
}

.formbox-cell:not(:first-child) {
  margin-left: var(--gap);
}

.textfield {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.textfield-input {
  text-overflow: ellipsis;
  background-color: var(--c0);
  border-radius: var(--br1);
  padding: 20rem;
  width: 100%;
  min-width: 0;
  resize: none;
}

.textfield-message {
  margin-top: 5rem;
  color: var(--c5);
  display: none;
}

.textfield-input:invalid ~ .textfield-message {
  display: block;
}

.hero-animation {
  position: absolute;
  top: 0;
  left: 0;
  bottom: -200rem;
  right: 0;
}

.hero-tile {
  position: absolute;
}

.hero-tile-1 {
  top: 0;
  left: 0;
  width: calc(35 * var(--kw));
  height: calc(35 * var(--kw));
  transform: translate(-10%, -60%);
}

.hero-tile-1 img {
  object-position: top left;
}

.hero-tile-2 {
  top: 0;
  right: 0;
  width: calc(40 * var(--kw));
  height: calc(45 * var(--kw));
  transform: translate(20%, -30%);
}

.hero-tile-2 img {
  object-position: top right;
}

.hero-tile-3 {
  bottom: 0;
  left: 0;
  width: calc(60 * var(--kw));
  height: calc(45 * var(--kw));
  transform: translate(-30%, 0);
}

.hero-tile-3 img {
  object-position: bottom left;
}

.hero-tile-4 {
  bottom: 0;
  right: 0;
  width: calc(40 * var(--kw));
  height: calc(35 * var(--kw));
  transform: translate(20%, 0);
}

.hero-tile-4 img {
  object-position: bottom right;
  filter: blur(3px);
}

.hero-tile-5 {
  bottom: 0;
  left: 0;
  width: calc(60 * var(--kw));
  height: calc(45 * var(--kw));
  transform: translate(-30%, -20%);
}

.hero-tile-5 img {
  object-position: bottom left;
  transform: rotate(10deg);
}

.hero-tile-6 {
  top: 0;
  right: 0;
  width: calc(35 * var(--kw));
  height: calc(35 * var(--kw));
  transform: translate(-10%, -60%);
}

.hero-tile-6 img {
  object-position: top right;
  transform: rotate(270deg);
}

.hero-tile-7 {
  top: 125%;
  left: 0;
  width: calc(50 * var(--kw));
  height: calc(50 * var(--kw));
  transform: translate(-60%, -40%);
}

.hero-tile-7 img {
  object-position: top left;
}

.hero-tile-8 {
  top: 150%;
  right: 0;
  width: calc(50 * var(--kw));
  height: calc(45 * var(--kw));
  transform: translate(20%, -50%);
}

.hero-tile-8 img {
  object-position: top right;
  transition: transform ease-out 1s 0s;
}

.hero-tile-9 {
  top: 175%;
  left: 0;
  width: calc(50 * var(--kw));
  height: calc(40 * var(--kw));
  transform: translate(-10%, 100rem);
}

.hero-tile-9 img {
  object-position: bottom left;
}

.hero-tile-10 {
  top: 225%;
  right: 0;
  width: calc(35 * var(--kw));
  height: calc(35 * var(--kw));
  transform: translate(20%, -60%);
}

.hero-tile-10 img {
  object-position: top left;
  transform: scaleX(-1);
}

.hero-tile-11 {
  bottom: 0;
  right: 0;
  width: calc(40 * var(--kw));
  height: calc(35 * var(--kw));
  transform: translate(10%, 100rem);
}

.hero-tile-11 img {
  object-position: bottom right;
  filter: blur(3px);
}

.s3-1 *::-moz-selection,
.s4-4 *::-moz-selection,
.s9-4 *::-moz-selection,
.s13-2 *::-moz-selection {
  background-color: var(--c3);
  color: var(--c2);
  -webkit-text-fill-color: var(--c2);
}

.s3-1 *::selection,
.s4-4 *::selection,
.s9-4 *::selection,
.s13-2 *::selection {
  background-color: var(--c3);
  color: var(--c2);
  -webkit-text-fill-color: var(--c2);
}

/* cards */
.card {
  position: relative;
  overflow: hidden;
  display: flex;
  min-height: 100%;
  flex-direction: column;
}

.card-title {
  line-height: 1;
  font-weight: 600;
  font-size: var(--f-m);
}

.card-1 {
  border-radius: var(--br1);
  padding: 20rem;
  color: var(--c0);
  flex-direction: row;
}

.card-1::before {
  content: "";
  flex: none;
  width: 0;
  padding-top: 100%;
}

.card-1 .card-inner {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.card-1 .card-header {
  flex: auto;
}

.card-1 .card-media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--c1);
  z-index: -1;
}

.card-1 .card-media::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-image: linear-gradient(var(--c1), rgba(0, 0, 0, 0.4), var(--c1));
  opacity: 0.5;
}

.card-1 .card-content {
  margin-top: 20rem;
}

.card-1 .card-pretitle {
  position: relative;
  z-index: 1;
}

.card-1 .card-title {
  margin-top: auto;
}

.card-2 .card-header {
  position: relative;
  overflow: hidden;
  display: flex;
  border-radius: var(--br1);
}

.card-2 .card-header::before {
  content: "";
  flex: none;
  width: 0;
  padding-top: 110%;
}

.card-2 .card-content {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 12rem var(--gap);
  margin-top: 12rem;
  margin-bottom: auto;
}

.card-2 .card-subtitle {
  font-size: var(--f-s);
  margin-top: 5rem;
  color: var(--c8);
}

.card-2 .card-text {
  grid-column: 1/-1;
  padding-top: 12rem;
  border-top: var(--sl) solid var(--c7);
}

.card-2 .card-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max(28px, 32rem);
  height: max(28px, 32rem);
  color: var(--c2);
  position: relative;
  z-index: 2;
  border: var(--sl) solid;
  border-radius: 5rem;
}

.card-2 .card-action a {
  width: 100%;
  height: 100%;
}

.card-2 .card-footer {
  margin-top: 30rem;
  display: grid;
  grid-template-columns: auto;
  grid-gap: 10rem;
  padding-bottom: var(--sl);
}

/* sections */
.s1-1 {
  background-color: var(--c0);
  border-radius: var(--br1);
  padding: 80rem 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 80rem var(--gap);
}

.s1-2 {
  grid-column: 2/4;
}

.s1-3 {
  margin-bottom: 50rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 40rem var(--gap);
  align-items: flex-start;
}

.s1-4 {
  grid-column: 2/4;
  display: grid;
  grid-template-columns: auto;
  grid-gap: 80rem;
}

.s1-7 {
  display: grid;
  grid-gap: 30rem 60rem;
  grid-template-columns: 1fr 1fr;
}

.s1-7:not(:first-child) {
  margin-top: 30rem;
}

.s1-8-1 {
  font-size: var(--f-m);
  line-height: 1;
  color: var(--c2);
  font-weight: 600;
}

.s1-8-2 {
  margin-top: 10rem;
  color: var(--c6);
}

.s1-8-2::before {
  content: "— ";
}

.s1-9 {
  position: relative;
  overflow: hidden;
  display: flex;
  border-radius: var(--br1);
  grid-column: 1/-1;
}

.s1-9::before {
  content: "";
  flex: none;
  width: 0;
  padding-top: 30%;
}

.s1-10 {
  grid-column: 1/4;
}

.s1-11 {
  margin-left: auto;
  padding-left: 30rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.s1-11-1 ul {
  display: flex;
  flex-wrap: wrap;
  margin: -5rem;
}

.s1-11-1 li {
  margin: 5rem;
}

.s1-11-1 li:not(:first-child) {
  border-left: var(--sl) solid;
  padding-left: 10rem;
}

.s1-11-2 {
  margin-top: 20rem;
  font-size: var(--f-s);
  color: var(--c8);
}

.s2-1 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: var(--gap);
}

.s2-2 {
  margin-top: 50rem;
  display: flex;
  justify-content: center;
}

.s3 {
  background-color: var(--c2);
  color: var(--c0);
}

.s3:last-child {
  margin: 0;
}

.s3-1 {
  display: flex;
  align-items: center;
  min-height: var(--app-height);
}

.s3-2 {
  padding: 200rem 0;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  align-items: center;
  text-align: center;
  width: 100%;
}

.s3-2-1 .title {
  color: inherit;
}

.s3-2-2 {
  margin-top: 25rem;
}

.s3-2-3 {
  margin-top: 30rem;
}

.s4-1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: var(--gap);
}

.s4-2 {
  background-color: var(--c0);
  border-radius: var(--br1);
  color: var(--c1);
}

.s4-3 {
  background-color: var(--c2);
  border-radius: var(--br1);
  color: var(--c0);
}

.s4-3:nth-child(odd):last-child {
  grid-column: 1/-1;
}

.s4-4 {
  padding: 50rem 20rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  width: 100%;
}
.s4-4 img {
  transition: all 0.25s ease;
}

a.s4-4:hover img, button.s4-4:hover img {
  transform: scale(1.05);
}

.s4-4-1 {
  position: relative;
  width: 100%;
  padding-top: 20%;
  max-width: 350rem;
  margin-bottom: 50rem;
}

.s4-4-2 {
  line-height: 1;
  font-weight: 600;
  font-size: var(--f-b);
}

.s4-4-3 {
  margin-bottom: auto;
  width: 100%;
  margin-top: 20rem;
  padding-top: 20rem;
  border-top: var(--sl) solid var(--c7);
  color: var(--c6);
}

.s4-4-3 ul {
  display: grid;
  grid-template-columns: auto;
  grid-gap: 0.5em;
}

.s4-4-4 {
  margin-top: 30rem;
}

.s4-5 {
  display: flex;
  min-height: 100%;
}

.s5-1 {
  display: flex;
  justify-content: center;
  margin: calc(var(--gap) / -2);
  flex-wrap: wrap;
}

.s5-1-1 {
  width: 25%;
  padding: calc(var(--gap) / 2);
  flex: none;
}

.s5-2 {
  font-size: var(--f-s);
  text-align: right;
  margin-top: 50rem;
  color: var(--c8);
}

.s6-1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: var(--gap);
  align-items: flex-start;
}

.s6-2 {
  display: flex;
  background-color: var(--c0);
  border-radius: var(--br1);
  overflow: hidden;
}

.s6-2::before {
  content: "";
  flex: none;
  width: 0;
  padding-top: 100%;
}

.s6-3 {
  background-color: var(--c0);
  border-radius: var(--br1);
  padding: 20rem 20rem 40rem;
  display: grid;
  grid-template-columns: auto;
  grid-gap: 100rem;
}

.s6-4-1:not(:last-child) {
  margin-bottom: 20rem;
}

.s6-4-2 {
  line-height: 1;
  font-size: var(--f-m);
  font-weight: 600;
}

.s6-4-2:not(:last-child) {
  margin-bottom: 10rem;
}

.s6-4-2,
.s6-4-3 {
  color: var(--c6);
}

.s6-6 {
  color: var(--c6);
  margin-bottom: 10rem;
  padding-bottom: 10rem;
  line-height: 1;
  font-size: var(--f-m);
  font-weight: 600;
  border-bottom: var(--sl) solid var(--c7);
}

.s6-7 {
  color: var(--c2);
  line-height: 1;
  font-size: var(--f-m);
  font-weight: 600;
}

.s6-8 {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15rem;
}

.s6-8-1 {
  display: flex;
  width: 120rem;
  padding: 20rem 0;
  align-items: center;
  margin: 0 15rem;
  justify-content: center;
}

.s6-8-1::before {
  content: "";
  flex: none;
  width: 0;
  padding-top: 66.666%;
}

.s6-8-1 img {
  max-height: 100%;
  width: auto;
  max-width: 100%;
}

.s7-1 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: var(--gap);
  position: relative;
  z-index: 1;
}

.s7-2 {
  padding: 200rem 0;
}

.s7-3 {
  position: relative;
  overflow: hidden;
  display: flex;
  grid-column: 2/5;
  z-index: -1;
  mask-image: radial-gradient(closest-side, black 50%, transparent 100%);
  margin: 0 var(--awr) -200rem 0;
  user-select: none;
}

.s7-3::before {
  content: "";
  flex: none;
  width: 0;
  padding-top: 70%;
}

.s7-4 {
  white-space: nowrap;
}

.s7-5 {
  margin-top: 130rem;
}

.s7-5-1 {
  font-size: var(--f-m);
  line-height: 1;
  font-weight: 600;
}

.s7-5-2 {
  margin-top: 25rem;
  color: var(--c6);
}

.s8-1 {
  display: flex;
  flex-wrap: wrap;
  margin: calc(var(--gap) / -2);
  justify-content: center;
  padding: 0 40rem;
}

.s8-2 {
  padding: calc(var(--gap) / 2);
  width: 33.33%;
}

.s8-3 {
  font-size: var(--f-b);
  line-height: 1;
  font-weight: 600;
}

.s8-4 {
  margin-top: 20rem;
  padding-top: 20rem;
  border-top: var(--sl) solid var(--c7);
}

.s8-4-1 {
  font-size: var(--f-m);
  line-height: 1;
  font-weight: 600;
}

.s8-4-2 {
  color: var(--c6);
}

.s8-4-2:not(:first-child) {
  margin-top: 20rem;
}

.s8-5 {
  padding: 50rem 20rem;
  background-color: var(--c0);
  color: var(--c1);
  border-radius: var(--br1);
  text-align: center;
  min-height: 100%;
}

.s9-1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: var(--gap);
}

.s9-2 {
  background-color: var(--c0);
  color: var(--c1);
  border-radius: var(--br1);
  padding: 50rem 20rem;
}

.s9-3 {
  font-size: var(--f-b);
  font-weight: 600;
  line-height: 1;
}

.s9-4 {
  margin-top: 25rem;
  border-top: var(--sl) solid var(--c7);
  padding-top: 25rem;
}

.s9-4 ul {
  display: grid;
  grid-template-columns: auto;
  grid-gap: 10rem;
}

.s9-4 li {
  background-color: var(--c2);
  color: var(--c0);
  padding: 15rem 20rem;
  border-radius: var(--br1);
}

.s10-1 {
  display: grid;
  grid-gap: var(--gap);
  grid-template-columns: repeat(3, 1fr);
  padding: 0 75rem;
}

.s10-2 {
  background-color: var(--c4);
  padding: 60rem 120rem;
  border-radius: var(--br1);
  max-height: 260rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}

button.s10-2 * {
  pointer-events: none;
}
button.s10-2:before {
  pointer-events: inherit;
}

button.s10-2:hover {
  transform: scale(1.05);
}

.s10-2::before {
  content: "";
  flex: none;
  width: 0;
  padding-top: 50%;
}

.s10-2 img {
  max-height: 100%;
}

.s11-1 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: var(--gap);
}

.s11-2 {
  padding-left: 20rem;
  display: flex;
  flex-direction: column;
  min-height: 400rem;
  border-left: var(--sl) solid var(--c7);
}

.s11-2-1 {
  margin-bottom: auto;
  font-size: var(--f-m);
  font-weight: 600;
  line-height: 1;
}

.s11-2-2 {
  font-size: var(--f-xxxl);
  margin-top: 100rem;
}

.s11-3 {
  font-size: var(--f-s);
  margin-top: 50rem;
  color: var(--c8);
}

.s12-1 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 60rem var(--gap);
}

.s12-2 {
  grid-column: 2/4;
}

.s12-3 {
  grid-column: 4/5;
  margin-left: auto;
}

.s12-4 {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: var(--gap);
}

.s13-1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0;
}

.s13-2 {
  display: flex;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.s13-2::before {
  content: "";
  flex: none;
  width: 0;
  padding-top: 100%;
}

.s13-3 {
  padding: 50rem 20rem;
  position: relative;
}

.s13-3 .title {
  color: inherit;
}

.s13-4 {
  padding: 50rem;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: var(--f-m);
  line-height: 1;
  font-weight: 600;
  transform: rotateY(180deg);
}

.s13-5 {
  max-width: 450rem;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;
}

.s13-6 {
  margin-top: 35rem;
}

.s13-7 {
  padding: 20rem 0;
}

.s13-7:nth-child(2) {
  border-left: var(--sl) solid var(--c7);
}

.s13-8 {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: -10%;
}

.s13-8 canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.s13-9 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  text-align: center;
  color: var(--c0);
}

.s13-2x {
  background-color: var(--c2);
  border-radius: 15%;
  overflow: visible;
}

.s13-7:nth-child(1) .s13-2x {
  background-image: linear-gradient(#3f3f62, #521973);
}

.s13-7:nth-child(2) .s13-2x {
  background-image: linear-gradient(#867eb3, #291e6d);
}

.s13-3,
.s13-4 {
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.s14-2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: var(--gap);
  padding: 100rem 0;
  min-height: var(--app-height);
  align-items: center;
}

.s14-3 {
  grid-column-end: span 2;
}

.s14-4 {
  display: grid;
  grid-template-columns: auto;
  width: min-content;
}

.s14-4-1 {
  margin-bottom: 20rem;
  padding-bottom: 20rem;
  border-bottom: var(--sl) solid var(--c7);
  white-space: nowrap;
}

.s14-4-2 {
  min-width: 0;
}

.s14-2__1 .s14-3 {
  grid-column-start: 2;
}

.s14-2__2 .s14-3 {
  grid-column-start: 3;
}

@media (max-width: 1023.98px) {
  :root {
    --wr: 15rem;
    --gap: 10rem;
    --br2: 12rem;
    --btn: 54rem;
    --f-s: 14rem;
    --f-d: 16rem;
    --f-btn: 18rem;
    --f-m: 20rem;
    --f-b: 24rem;
    --f-l: 28rem;
    --f-xl: 32rem;
    --f-xxl: 44rem;
    --f-xxxl: 52rem;
    --mw: 640rem;
    --kw: 2vw;
  }
  html {
    font-size: 1px;
  }
  .desktop {
    display: none !important;
  }
  .button {
    width: 100%;
  }
  .button__default .button-text {
    font-size: var(--f-btn);
  }
  .title__404 {
    font-size: 128rem;
  }
  .topbar {
    grid-template-columns: 1fr auto;
    margin: 15rem 0;
    padding: 15rem 15rem 15rem 20rem;
  }
  .topbar-nav,
  .topbar-action {
    display: none;
  }
  .topbar-logo {
    max-width: 125rem;
  }
  .topbar-menu {
    position: relative;
    display: flex;
    width: 40rem;
    height: 40rem;
    align-items: center;
    border-radius: 50%;
    background-color: var(--c2);
    color: var(--c0);
    padding: 10rem;
  }
  .topbar-menu-inner {
    position: relative;
    width: calc(100% + 20rem);
    height: calc(100% + 20rem);
    display: flex;
    flex-direction: column;
    gap: 5rem;
    align-items: center;
    justify-content: center;
    margin: -10rem;
    padding: 10rem;
  }
  .topbar-menu-inner::before,
  .topbar-menu-inner::after,
  .topbar-menu-inner span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(100% - 20rem);
    height: 1px;
    transform-origin: center;
  }
  .topbar-menu-inner::before {
    content: "";
    background-color: currentColor;
    transform: translate(-50%, calc(-50% - 5rem));
    transition: transform 0.15s ease, background-color 0.15s ease;
  }
  .topbar-menu-inner::after {
    content: "";
    background-color: currentColor;
    transform: translate(-50%, calc(-50% + 5rem));
    transition: transform 0.15s ease, background-color 0.15s ease;
  }
  .topbar-menu-inner span {
    display: block;
    background-color: currentColor;
    transform: translate(-50%, -50%);
    transition: opacity 0.15s ease, background-color 0.15s ease;
  }
  .popup-active:not(.alert-popup) .topbar-menu-inner::before {
    background-color: var(--c0);
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .popup-active:not(.alert-popup) .topbar-menu-inner::after {
    background-color: var(--c0);
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  .popup-active:not(.alert-popup) .topbar-menu-inner span {
    opacity: 0;
  }
  .topbar-menu-close {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: none;
  }
  .popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    padding: var(--headroom-height) var(--wr) var(--wr);
    overflow: auto;
    display: flex;
    transition: transform 0.5s;
    will-change: transform;
  }
  .popup-inner {
    width: 100%;
    border-radius: var(--br1);
    display: flex;
    background-color: var(--c0);
    color: var(--c1);
    padding: 50rem 25rem;
    align-items: center;
  }
  .popup-inner ul {
    display: grid;
    grid-template-columns: auto;
    font-size: var(--f-xl);
    letter-spacing: -0.03em;
    color: var(--c2);
    font-weight: 500;
    width: 100%;
  }
  .popup-inner li {
    padding: 25rem 0;
    border-bottom: var(--sl) solid var(--c7);
    text-align: center;
    transition: all 0.5s 1s;
    opacity: 1;
    will-change: transform;
  }
  .popup-overlay {
    background-color: var(--c1);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    opacity: 0;
    transition: all 0.5s;
    visibility: hidden;
  }
  .popup:not(.active) {
    transform: translateY(-100%);
  }
  .popup.active ~ .popup-overlay {
    opacity: 1;
    visibility: visible;
  }
  .popup:not(.active) .popup-inner li {
    opacity: 0;
    transition-duration: 0s;
    transition-delay: 1s !important;
    transform: translateY(-50%);
  }
  .popup-active:not(.alert-popup) .topbar-menu-inner {
    pointer-events: none;
  }
  .popup-active:not(.alert-popup) .topbar-menu-inner span {
    color: rgba(0, 0, 0, 0);
  }
  .popup-active:not(.alert-popup) .topbar-menu-close {
    display: block;
  }
  .page-header {
    margin-bottom: 100rem;
  }
  .page-header-inner {
    padding: 20rem 0;
    grid-template-columns: auto;
  }
  .page-header-content {
    grid-column: auto;
  }
  .page-header-content:last-child {
    margin-top: 80rem;
  }
  .page-header-title {
    margin: 0;
    max-width: 340rem;
  }
  .page-header-subtitle {
    margin-top: 20rem;
    max-width: 185rem;
  }
  .page-header-action {
    margin-top: 15rem;
  }
  .page-header-scroll {
    grid-column: auto;
  }
  .hero {
    margin-bottom: 100rem;
  }
  .hero-animation {
    bottom: -50rem;
  }
  .hero-tile-1 {
    transform: translate(-40%, -45%);
  }
  .hero-tile-2 {
    transform: translate(55%, -25%);
  }
  .hero-tile-3 {
    transform: translate(15%, -15%);
    left: 50%;
  }
  .hero-tile-3 img {
    transform: scaleX(-1);
  }
  .hero-tile-4 {
    transform: translate(-20%, -75%);
    right: 50%;
  }
  .hero-tile-4 img {
    transform: scaleX(-1);
    filter: none;
  }
  .hero-tile-5 {
    bottom: 50%;
    transform: translate(-75%, 0%);
  }
  .hero-tile-6 {
    transform: translate(30%, -25%);
  }
  .hero-tile-7 {
    display: none;
  }
  .hero-tile-8 {
    transform: translate(45%, -100%);
  }
  .hero-tile-9 {
    transform: translate(45%, 100rem) scale(0.75);
  }
  .hero-tile-9 img {
    transform: scaleX(-1);
  }
  .hero-tile-10 {
    transform: translate(-90%, -120%);
  }
  .hero-tile-10 img {
    transform: scaleX(1);
  }
  .hero-tile-11 {
    transform: translate(40%, -10%);
  }
  .footer {
    padding: 40rem 0;
  }
  .footer-grid {
    grid-template-columns: auto;
    grid-template-areas: "f1" "f2" "f3" "f4";
    grid-gap: 30rem;
  }
  .f1-1 {
    max-width: 165rem;
  }
  .f1-2 {
    margin-top: 10rem;
    max-width: none;
  }
  .f1-3 {
    margin-top: 25rem;
  }
  .f2 {
    grid-template-columns: auto;
    grid-gap: 30rem;
  }
  .f2-1-1 {
    margin-bottom: 10rem;
  }
  .section {
    margin-bottom: 100rem;
  }
  .section-header {
    grid-template-columns: auto;
  }
  .section-header:not(:last-child) {
    margin-bottom: 40rem;
  }
  .section-header-title {
    grid-column: 1/-1;
  }
  .textbox h2 {
    margin: 60rem 0 15rem;
  }
  .textbox img {
    width: 100%;
    margin: 60rem 0;
  }
  .formbox {
    grid-gap: 5rem;
  }
  .formbox-row {
    flex-direction: column;
  }
  .formbox-cell {
    width: 100%;
  }
  .formbox-cell:not(:first-child) {
    margin: 5rem 0 0;
  }
  .formbox-footer {
    grid-template-columns: 1fr 1fr;
    margin-top: 25rem;
  }
  .textfield-message {
    margin-bottom: 5rem;
  }
  .formbox-row:not(:last-child) .formbox-cell:not(:last-child) .textfield-message {
    margin-bottom: 0;
  }
  .card-1 {
    padding: 0;
    border-radius: 0;
  }
  .card-1::before {
    display: none;
  }
  .card-1 .card-header {
    position: relative;
    display: flex;
    padding: 20rem;
    border-radius: var(--br1);
    overflow: hidden;
  }
  .card-1 .card-header::before {
    content: "";
    flex: none;
    width: 0;
    padding-top: 50%;
  }
  .card-1 .card-content {
    margin-top: 15rem;
    color: var(--c1);
  }
  .card-2 .card-content {
    margin-top: 15rem;
    grid-gap: 5rem var(--gap);
  }
  .card-2 .card-text {
    padding-top: 5rem;
  }
  .card-2 .card-footer {
    height: auto !important;
    margin-top: 15rem;
  }
  .s1-1 {
    padding: 40rem 20rem;
    grid-template-columns: auto;
    grid-gap: 60rem 0;
  }
  .s1-2 {
    grid-column: auto;
  }
  .s1-3 {
    grid-template-columns: auto;
    margin-bottom: 100rem;
    grid-gap: 0;
  }
  .s1-4 {
    grid-column: auto;
  }
  .s1-7 {
    grid-template-columns: auto;
    grid-gap: 15rem;
  }
  .s1-7:not(:first-child) {
    margin-top: 20rem;
  }
  .s1-9::before {
    padding-top: 50%;
  }
  .s1-10 {
    grid-column: auto;
    margin-top: 40rem;
    order: 1;
  }
  .s1-11 {
    margin: 15rem 0 0;
    padding: 0;
    align-items: flex-start;
    text-align: left;
  }
  .s1-11-2 {
    margin-top: 10rem;
    font-size: var(--f-d);
  }
  .s2-1 {
    grid-template-columns: auto;
    grid-gap: 40rem;
  }
  .s2-2 {
    margin-top: 40rem;
  }
  .s3-2-1 .title {
    font-size: var(--f-xl);
  }
  .s3-2-2 {
    margin-top: 20rem;
    max-width: 275rem;
  }
  .s3-2-3 {
    margin-top: 15rem;
  }
  .s4-1 {
    grid-template-columns: auto;
    grid-gap: 15rem;
  }
  .s4-4 {
    padding: 35rem 20rem;
  }
  .s4-4-1 {
    margin: 0 auto 30rem;
    padding: 0;
    width: auto;
  }
  .s4-4-1 img {
    max-width: 220rem;
    max-height: 115rem;
  }
  .s4-4-3 {
    margin-top: 15rem;
    padding-top: 15rem;
  }
  .s5-1 {
    margin: 0;
    display: grid;
    grid-template-columns: auto;
    grid-gap: 40rem;
  }
  .s5-1-1 {
    padding: 0;
    width: 100%;
  }
  .s5-2 {
    margin-top: 40rem;
    text-align: left;
  }
  .s6-1 {
    grid-template-columns: auto;
    grid-gap: 15rem;
  }
  .s6-2 {
    position: relative;
  }
  .s6-8 {
    margin: 0 -10rem;
    justify-content: space-between;
  }
  .s6-8-1 {
    width: 80rem;
    padding: 10rem 0;
    margin: 0 10rem;
  }
  .s7-1 {
    grid-template-columns: auto;
    grid-gap: 0;
  }
  .s7-2 {
    padding: 0;
  }
  .s7-3 {
    margin: 0;
    grid-column: auto;
    position: static;
  }
  .s7-3::before {
    padding-top: 150%;
  }
  .s7-4 {
    white-space: normal;
    text-align: center;
  }
  .s7-5 {
    margin-top: 40rem;
    grid-template-columns: 1fr 1fr;
    grid-gap: var(--gap);
    display: grid;
  }
  .s7-5-2 {
    margin: 0;
  }
  .s8-1 {
    padding: 0;
  }
  .s8-2 {
    width: 100%;
  }
  .s8-4 {
    margin-top: 15rem;
    padding-top: 15rem;
  }
  .s8-4-2:not(:first-child) {
    margin-top: 15rem;
  }
  .s8-5 {
    padding: 35rem 20rem;
  }
  .s9-1 {
    grid-template-columns: auto;
    grid-gap: 15rem;
  }
  .s9-2 {
    padding: 35rem 20rem;
  }
  .s9-4 {
    margin-top: 15rem;
    padding-top: 15rem;
  }
  .s10-1 {
    padding: 0;
    grid-template-columns: auto;
    grid-gap: 15rem;
  }
  .s10-2 {
    max-height: 200rem;
    padding: 40rem 60rem;
    height: 200rem;
  }
  .s11-1 {
    grid-template-columns: auto;
    grid-gap: 40rem;
  }
  .s11-2 {
    padding: 0;
    border: none;
    min-height: 0;
    text-align: center;
  }
  .s11-2-1 br {
    display: none;
  }
  .s11-2-2 {
    margin: 0 0 10rem;
    order: -1;
    border-bottom: var(--sl) solid var(--c7);
    padding-bottom: 10rem;
  }
  .s11-3 {
    margin-top: 40rem;
  }
  .s12-1 {
    grid-gap: 40rem;
    grid-template-columns: auto;
  }
  .s12-2 {
    grid-column: auto;
  }
  .s12-3 {
    grid-column: auto;
    order: 1;
    margin: 0;
  }
  .s12-4 {
    grid-column: auto;
    grid-template-columns: auto;
    grid-gap: 40rem;
  }
  .s13-1 {
    grid-template-columns: auto;
    grid-gap: 40rem;
  }
  .s13-3 {
    width: 100%;
    padding: 55rem;
  }
  .s13-4 {
    display: none;
  }
  .s13-6 {
    margin-top: 15rem;
  }
  .s13-7 {
    padding: 0 40rem;
  }
  .s13-7:nth-child(2) {
    border: none;
  }
  .s14-1 {
    grid-gap: 0;
  }
  .s14-2 {
    padding: 200rem 0 0;
    min-height: 0;
  }
  .s14-2__1 .s14-3 {
    grid-column: 1/4;
  }
  .s14-2__2 .s14-3 {
    grid-column: 2/-1;
  }
  .s14-4 {
    width: 100%;
  }
  .s14-4-1 {
    margin-bottom: 15rem;
    padding-bottom: 15rem;
  }
}
@media (min-width: 1024px) {
  .mobile {
    display: none !important;
  }
  .hide-scrollbar {
    overflow: -moz-scrollbars-none !important;
    scrollbar-width: none;
  }
  .hide-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .title {
    text-box: trim-both cap alphabetic;
  }
  .s1-10:first-child,
  .s1-10:first-child ~ .s1-11 {
    padding-top: 120rem;
  }
  .s2-1-1 {
    grid-column-end: span 2;
  }
  /*.s2-1-1:nth-child(1) {*/
  /*  grid-column: 2/4;*/
  /*}*/
  /*.s2-1-1:nth-child(3) {*/
  /*  grid-column-start: 1;*/
  /*}*/
  .s2-1-2 {
    grid-column-end: span 2;
  }
  .s4-4-1 img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-position: center;
    pointer-events: none;
    object-fit: contain;
  }
  .s6-2 {
    position: sticky;
    top: var(--headroom-height);
    z-index: 1;
  }
  .s12-5 .card-1::before {
    padding-top: 85%;
  }
  .s12-5 .card-1 .card-pretitle {
    display: none;
  }
  .s12-5:nth-child(1) .card-1,
  .s12-5:nth-child(3) .card-1 {
    border-radius: 0;
    padding: 0;
  }
  .s12-5:nth-child(1) .card-1 .card-header,
  .s12-5:nth-child(3) .card-1 .card-header {
    position: relative;
    border-radius: var(--br1);
    overflow: hidden;
  }
  .s12-5:nth-child(1) .card-1 .card-title,
  .s12-5:nth-child(3) .card-1 .card-title {
    color: var(--c1);
  }
  .s12-5:nth-child(2) {
    grid-column-end: span 2;
  }
  .s12-5:nth-child(2) .card-1 .card-header {
    flex: none;
  }
  .s12-5:nth-child(2) .card-1 .card-content {
    margin: 0;
    max-width: 445rem;
  }
}
@media (min-width: 1920px) {
  html {
    font-size: 1px;
  }
}
/* hover animations */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .button__default {
    transition: all 0.25s;
  }
  .button__default:hover {
    border-color: var(--c2);
    color: var(--c2);
    background-color: transparent;
  }
  .s3-2-3 .button__default:hover,
  .s4-4-4 .button__default:hover {
    border-color: var(--c0);
    color: var(--c0);
  }
  .card-1 .card-media {
    will-change: transform;
    transition: transform 0.5s;
  }
  .card-1:hover .card-media {
    transform: scale(1.05);
  }
  .card-2 .card-action {
    transition: all 0.25s;
  }
  .card-2 .card-action:hover {
    color: var(--c0);
    border-color: var(--c2);
    background-color: var(--c2);
  }
  .topbar-action a,
  .textbox a {
    transition: opacity 0.15s;
  }
  .topbar-action a:hover,
  .textbox a:hover {
    opacity: 0.5;
  }
  .f2-1-2 {
    display: flex;
    flex-direction: column;
    gap: 10rem;
    align-items: flex-start;
  }
  .topbar-nav a,
  .bottombar-author a,
  .f2-1-2 a,
  .f3-2 a,
  .s1-8-1 a,
  .s6-7 a {
    background-size: 0 var(--sl);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-image: linear-gradient(currentColor, currentColor);
    display: inline;
    transition: background-size 0.5s cubic-bezier(0.2, 1, 0.3, 1);
  }
  .topbar-nav a:hover,
  .bottombar-author a:hover,
  .f2-1-2 a:hover,
  .f3-2 a:hover,
  .s1-8-1 a:hover,
  .s6-7 a:hover {
    background-size: 100% var(--sl);
    background-position: left bottom;
  }
  .s13-9 {
    transform-style: preserve-3d;
    will-change: transform;
  }
  .s13-2x {
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 1s ease-in-out;
  }
  .s13-5:hover .s13-2x {
    transform: rotateY(180deg);
  }
}
.card-1 .card-media.mode {
  background-color: var(--mode-color);
  display: flex;
  align-items: center;
  padding: 0 5%;
}

.card-1 .card-media.mode img {
  object-fit: contain;
  border-radius: var(--br1) !important;
  overflow: hidden;
  height: auto;
  width: 100%;
}

.card-1 .card-media img {
  position: initial !important;
}

.card-1 .card-media:before {
  content: none;
}

@media (min-width: 1024px) {
  .textbox .has-media:has(.alignright),
  .textbox .has-media:has(.alignleft), .textbox:has(.alignright), .textbox:has(.alignleft) {
    margin: 0 -15%;
  }
}
.textbox .has-media:has(.aligncenter) img {
  width: 100%;
  margin: 0 auto !important;
}

.textbox .has-media:has(.alignleft) {
  float: left;
  width: 30% !important;
  margin-right: 20rem;
  margin-bottom: 20rem;
}

.textbox .has-media:has(.alignleft) img {
  width: 100% !important;
  margin: 0 auto !important;
}

.textbox .has-media:has(.alignright) {
  float: right;
  width: 30% !important;
  margin-left: 20rem;
  margin-bottom: 20rem;
}

.textbox .has-media:has(.alignright) img {
  width: 100% !important;
  margin: 0 auto !important;
}

.textbox .aligncenter {
  min-width: 30% !important;
  margin-left: auto;
  margin-right: auto;
}

.textbox .aligncenter img {
  width: 100%;
  margin: 0;
}

.textbox .alignleft {
  float: left;
  width: 30% !important;
  margin-right: 20rem;
  margin-bottom: 20rem;
}

.textbox .alignleft img {
  width: 100%;
  margin: 0;
}

.textbox .has-media:has(.alignright),
.textbox .alignright {
  float: right;
  width: 30% !important;
  margin-left: 20rem;
  margin-bottom: 20rem;
}

.textbox .has-media:has(.alignright) img,
.textbox .alignright img {
  width: 100%;
  margin: 0;
}

.hero-animation {
  pointer-events: none;
}

.section.s5 {
  padding-top: clamp(30px, 3.90625vw, 50px);
}

[data-popup="#yt-popup"] {
  width: 100%;
  position: relative;
}

[data-popup="#yt-popup"]:hover .s10-yt__preview img {
  filter: brightness(0.65);
  transform: scale(1.05);
}

[data-popup="#yt-popup"]:hover .button__default {
  border-color: var(--c2);
  color: var(--c2);
  background-color: #fff;
}

[data-popup="#yt-popup"] .s10-yt__preview {
  overflow: hidden;
  border-radius: 20rem;
  width: 100%;
}

[data-popup="#yt-popup"] .s10-yt__preview img {
  filter: brightness(0.5);
  transition: all 0.25s ease;
}

[data-popup="#yt-popup"] .s10-yt__button {
  position: absolute;
  pointer-events: none;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

@media (min-width: 1024px) {
  .s10-yt {
    margin: 0 -15%;
    width: 130%;
  }
}

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