:root {
  --s-5: 2px;
  --s-4: 4px;
  --s-3: 5px;
  --s-2: 6px;
  --s-1: 8px;
  --s0: 10px;
  --s1: 20px;
  --s2: 30px;
  --s3: 40px;
  --s4: 50px;
  --s5: 60px;
  --s6: 80px;
  --s7: 120px;
  --s8: 160px;

  --color-1: #1F395F;
  --color-2: #8794AC;
  --color-3: #EFF1F7;
  --color-4: #FFFFFF;
  --color-5: #E7F500;
  --color-6: #68C3F9;

  --container-width: 1320px;

  --fixed-header-height: 98px;
  --announcement-height: 26px;
}


html {
  background-color: var(--announcement-background, var(--color-4));
  scrollbar-gutter: stable;
}


body {
  background-color: var(--color-4);
  color: var(--color-1);
}


:focus-visible {
  outline: 2px solid var(--color-1);
  outline-offset: 2px;
}


.button.skip-link {
  position: fixed;
  top: var(--s0);
  left: var(--s0);
  z-index: 1000;
  transform: translateY(calc(-100% - var(--s1)));
}

.button.skip-link:focus-visible {
  transform: none;
}


.overlay {
  position: fixed;
  inset: 0;
  opacity: 0;
  transition: opacity var(--transition-duration, 250ms) ease;
}

.overlay,
dialog::backdrop {
  background-color: color-mix(in srgb, var(--color-1) 10%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

@media (prefers-reduced-transparency: reduce) {
  .overlay,
  dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

dialog::backdrop {
  transition: opacity 250ms ease;
}

@starting-style {
  dialog[open]::backdrop {
    opacity: 0;
  }
}


.rounded,
.rounded--true {
  border-radius: 20px;
  overflow: hidden;
}


.container,
.container--standard {
  --container-gutter: var(--s1);

  max-width: calc(var(--container-width, 1240px) + (var(--container-gutter) * 2));
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--container-gutter);
  padding-left: var(--container-gutter);
}

.container--standard-flush {
  --container-gutter: 0px;

  max-width: 1240px;
  margin-right: auto;
  margin-left: auto;
}

.container--narrow {
  --container-gutter: var(--s1);

  max-width: calc((1240px * 0.667) + (var(--container-gutter) * 2));
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--container-gutter);
  padding-left: var(--container-gutter);
}

.container--narrow-flush {
  --container-gutter: 0px;

  max-width: calc(1240px * 0.667);
  margin-right: auto;
  margin-left: auto;
}

@media (max-width: 767px) {
  .small--container,
  .small--container--standard {
    --container-gutter: var(--s1);

    max-width: calc(var(--container-width, 1240px) + (var(--container-gutter) * 2));
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--container-gutter);
    padding-left: var(--container-gutter);
  }

  .small--container--standard-flush {
    --container-gutter: 0px;

    max-width: 1240px;
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--container-gutter);
    padding-left: var(--container-gutter);
  }

  .small--container--narrow {
    --container-gutter: var(--s1);

    max-width: calc((1240px * 0.667) + (var(--container-gutter) * 2));
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--container-gutter);
    padding-left: var(--container-gutter);
  }

  .small--container--narrow-flush {
    --container-gutter: 0px;

    max-width: calc(1240px * 0.667);
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--container-gutter);
    padding-left: var(--container-gutter);
  }

  .small--container--none {
    --container-gutter: 0px;

    max-width: none;
    padding-right: var(--container-gutter);
    padding-left: var(--container-gutter);
  }
}


.stack--4 > * + * {
  margin-top: var(--s-4);
}

.stack--3 > * + * {
  margin-top: var(--s-3);
}

.stack--2 > * + * {
  margin-top: var(--s-2);
}

.stack--1 > * + * {
  margin-top: var(--s-1);
}

.stack > * + *,
.stack-0 > * + * {
  margin-top: var(--s0);
}

.stack-1 > * + * {
  margin-top: var(--s1);
}

.stack-2 > * + * {
  margin-top: var(--s2);
}

.stack-3 > * + * {
  margin-top: var(--s3);
}

.stack-4 > * + * {
  margin-top: var(--s4);
}

.stack-5 > * + * {
  margin-top: var(--s5);
}

.stack-6 > * + * {
  margin-top: var(--s6);
}

@media (max-width: 767px) {
  .small--stack--5 > * + * {
    margin-top: var(--s-5);
  }

  .small--stack--4 > * + * {
    margin-top: var(--s-4);
  }

  .small--stack--3 > * + * {
    margin-top: var(--s-3);
  }

  .small--stack--2 > * + * {
    margin-top: var(--s-2);
  }

  .small--stack--1 > * + * {
    margin-top: var(--s-1);
  }

  .small--stack > * + *,
  .small--stack-0 > * + * {
    margin-top: var(--s0);
  }

  .small--stack-1 > * + * {
    margin-top: var(--s1);
  }

  .small--stack-2 > * + * {
    margin-top: var(--s2);
  }

  .small--stack-3 > * + * {
    margin-top: var(--s3);
  }

  .small--stack-4 > * + * {
    margin-top: var(--s4);
  }

  .small--stack-5 > * + * {
    margin-top: var(--s5);
  }

  .small--stack-6 > * + * {
    margin-top: var(--s6);
  }

  .small--stack-none > * + * {
    margin-top: 0;
  }
}


.stack-item--3 {
  margin-top: var(--s-3);
}

.stack-item--2 {
  margin-top: var(--s-2);
}

.stack-item--1 {
  margin-top: var(--s-1);
}

.stack-item,
.stack-item-0 {
  margin-top: var(--s0);
}

.stack-item-1 {
  margin-top: var(--s1);
}

.stack-item-2 {
  margin-top: var(--s2);
}

.stack-item-3 {
  margin-top: var(--s3);
}

.stack-item-4 {
  margin-top: var(--s4);
}

.stack-item-5 {
  margin-top: var(--s5);
}

.stack-item-6 {
  margin-top: var(--s6);
}


.stack-none > * + * {
  margin-top: 0;
}

.stack-item-none {
  margin-top: 0;
}

@media (max-width: 767px) {
  .small--stack-item--3 {
    margin-top: var(--s-3);
  }

  .small--stack-item--2 {
    margin-top: var(--s-2);
  }

  .small--stack-item--1 {
    margin-top: var(--s-1);
  }

  .small--stack-item,
  .small--stack-item-0 {
    margin-top: var(--s0);
  }

  .small--stack-item-1 {
    margin-top: var(--s1);
  }

  .small--stack-item-2 {
    margin-top: var(--s2);
  }

  .small--stack-item-3 {
    margin-top: var(--s3);
  }

  .small--stack-item-4 {
    margin-top: var(--s4);
  }

  .small--stack-item-5 {
    margin-top: var(--s5);
  }

  .small--stack-item-6 {
    margin-top: var(--s6);
  }

  .small--stack-item-none {
    margin-top: 0;
  }
}

[class*=stack-item-]:first-child {
  margin-top: 0;
}


.stack-split {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}


.box--2 {
  padding: var(--s-2);
}

.box--1 {
  padding: var(--s-1);
}

.box {
  padding: var(--s0);
}

.box-1 {
  padding: var(--s1);
}

.box-2 {
  padding: var(--s2);
}

.box-3 {
  padding: var(--s3);
}

.box-4 {
  padding: var(--s3);
}

@media (max-width: 767px) {
  .small--box--2 {
    padding: var(--s-2);
  }

  .small--box--1 {
    padding: var(--s-1);
  }

  .small--box {
    padding: var(--s0);
  }

  .small--box-1 {
    padding: var(--s1);
  }

  .small--box-2 {
    padding: var(--s2);
  }

  .small--box-3 {
    padding: var(--s3);
  }

  .small--box-4 {
    padding: var(--s3);
  }
}


.block--3 {
  padding-top: var(--s-3);
  padding-bottom: var(--s-3);
}

.block--2 {
  padding-top: var(--s-2);
  padding-bottom: var(--s-2);
}

.block--1 {
  padding-top: var(--s-1);
  padding-bottom: var(--s-1);
}

.block,
.block-0 {
  padding-top: var(--s0);
  padding-bottom: var(--s0);
}

.block-1 {
  padding-top: var(--s1);
  padding-bottom: var(--s1);
}

.block-2 {
  padding-top: var(--s2);
  padding-bottom: var(--s2);
}

.block-3 {
  padding-top: var(--s3);
  padding-bottom: var(--s3);
}

.block-4 {
  padding-top: var(--s4);
  padding-bottom: var(--s4);
}

.block-5 {
  padding-top: var(--s5);
  padding-bottom: var(--s5);
}

.block-6 {
  padding-top: var(--s6);
  padding-bottom: var(--s6);
}

.block-none {
  padding-top: 0;
  padding-bottom: 0;
}

@media (max-width: 767px) {
  .small--block--3 {
    padding-top: var(--s-3);
    padding-bottom: var(--s-3);
  }

  .small--block--2 {
    padding-top: var(--s-2);
    padding-bottom: var(--s-2);
  }

  .small--block--1 {
    padding-top: var(--s-1);
    padding-bottom: var(--s-1);
  }

  .small--block,
  .small--block-0 {
    padding-top: var(--s0);
    padding-bottom: var(--s0);
  }

  .small--block-1 {
    padding-top: var(--s1);
    padding-bottom: var(--s1);
  }

  .small--block-2 {
    padding-top: var(--s2);
    padding-bottom: var(--s2);
  }

  .small--block-3 {
    padding-top: var(--s3);
    padding-bottom: var(--s3);
  }

  .small--block-4 {
    padding-top: var(--s4);
    padding-bottom: var(--s4);
  }

  .small--block-5 {
    padding-top: var(--s5);
    padding-bottom: var(--s5);
  }

  .small--block-6 {
    padding-top: var(--s6);
    padding-bottom: var(--s6);
  }

  .small--block-none {
    padding-top: 0;
    padding-bottom: 0;
  }
}


.inline--3 {
  padding-left: var(--s-3);
  padding-right: var(--s-3);
}

.inline--2 {
  padding-left: var(--s-2);
  padding-right: var(--s-2);
}

.inline--1 {
  padding-left: var(--s-1);
  padding-right: var(--s-1);
}

.inline,
.inline-0 {
  padding-left: var(--s0);
  padding-right: var(--s0);
}

.inline-1 {
  padding-left: var(--s1);
  padding-right: var(--s1);
}

.inline-2 {
  padding-left: var(--s2);
  padding-right: var(--s2);
}

.inline-3 {
  padding-left: var(--s3);
  padding-right: var(--s3);
}

.inline-4 {
  padding-left: var(--s4);
  padding-right: var(--s4);
}

.inline-5 {
  padding-left: var(--s5);
  padding-right: var(--s5);
}

.inline-6 {
  padding-left: var(--s6);
  padding-right: var(--s6);
}

.inline-none {
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 767px) {
  .small--inline--3 {
    padding-left: var(--s-3);
    padding-right: var(--s-3);
  }

  .small--inline--2 {
    padding-left: var(--s-2);
    padding-right: var(--s-2);
  }

  .small--inline--1 {
    padding-left: var(--s-1);
    padding-right: var(--s-1);
  }

  .small--inline,
  .small--inline-0 {
    padding-left: var(--s0);
    padding-right: var(--s0);
  }

  .small--inline-1 {
    padding-left: var(--s1);
    padding-right: var(--s1);
  }

  .small--inline-2 {
    padding-left: var(--s2);
    padding-right: var(--s2);
  }

  .small--inline-3 {
    padding-left: var(--s3);
    padding-right: var(--s3);
  }

  .small--inline-4 {
    padding-left: var(--s4);
    padding-right: var(--s4);
  }

  .small--inline-5 {
    padding-left: var(--s5);
    padding-right: var(--s5);
  }

  .small--inline-6 {
    padding-left: var(--s6);
    padding-right: var(--s6);
  }

  .small--inline-none {
    padding-left: 0;
    padding-right: 0;
  }
}


.color-1 {
  color: var(--color-1);
}

.color-2 {
  color: var(--color-2);
}

.color-3 {
  color: var(--color-3);
}

.color-4 {
  color: var(--color-4);
}


.box-color-1 {
  background-color: var(--color-1);
}

.box-color-2 {
  background-color: var(--color-2);
  color: #FFFFFF;
}

.box-color-3 {
  background-color: var(--color-3);
}

.box-color-4 {
  background-color: var(--color-4);
}

.box-wash {
  --wash-from: var(--wash-start, var(--color-3));
  --wash-to: var(--wash-end, var(--color-3));

  background-color: var(--color-4);
  background-image: linear-gradient(
    to bottom,
    var(--wash-from),
    var(--wash-mid, color-mix(in oklab, var(--wash-from), var(--wash-to))) 50%,
    var(--wash-to)
  );
}


.box-glass {
  background-color: rgba(31, 57, 95, 0.08);
  background-image:
    linear-gradient(
      170deg,
      rgba(255, 255, 255, 0.6),
      rgba(255, 255, 255, 0.2) 12%,
      rgba(255, 255, 255, 0) 26%,
      rgba(255, 255, 255, 0) 82%,
      rgba(255, 255, 255, 0.12)
    ),
    linear-gradient(
      var(--glass-angle, 100deg),
      color-mix(in srgb, var(--glass-color, transparent) 34%, transparent),
      color-mix(in srgb, var(--glass-color, transparent) 5%, transparent)
    );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    inset 1px 1px 2px rgba(255, 255, 255, 0.7),
    inset -6px -6px 14px -8px rgba(255, 255, 255, 0.35),
    inset 8px 8px 16px -10px rgba(31, 57, 95, 0.2),
    0 4px 12px rgba(31, 57, 95, 0.1);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
}

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

.background-sky {
  background:
    radial-gradient(
      122.7% 101.9% at 50% 101.9%,
      transparent 60.1%,
      color-mix(in srgb, var(--color-6) 50%, transparent) 100%
    ),
    radial-gradient(
      122.7% 101.9% at 50% -1.9%,
      var(--color-4) 60.1%,
      color-mix(in srgb, var(--color-5) 50%, var(--color-4)) 100%
    );
}


.object-cover {
  display: block;
  overflow: hidden;
}

.object-cover > video,
.object-cover > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.object-contain {
  display: block;
  overflow: hidden;
}

.object-contain > video,
.object-contain > img,
.object-contain > svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}


.ratio--image {
  aspect-ratio: var(--image-width) / var(--image-height);
}

.ratio--square {
  aspect-ratio: 1 / 1;
}

.ratio--portrait {
  aspect-ratio: 3 / 4;
}

.ratio--landscape {
  aspect-ratio: 4 / 3;
}

.ratio--widescreen {
  aspect-ratio: 16 / 9;
}

.ratio--strip {
  aspect-ratio: 16 / 5;
}

.ratio--product {
  aspect-ratio: 4 / 5;
}

.ratio--product-tall {
  aspect-ratio: 7 / 9;
}

@media (max-width: 767px) {
  .ratio--image,
  .small--ratio--image {
    aspect-ratio: var(--image-width-mobile, var(--image-width)) / var(--image-height-mobile, var(--image-height));
  }

  .small--ratio--square {
    aspect-ratio: 1 / 1;
  }

  .small--ratio--portrait {
    aspect-ratio: 3 / 4;
  }

  .small--ratio--landscape {
    aspect-ratio: 4 / 3;
  }

  .small--ratio--widescreen {
    aspect-ratio: 16 / 9;
  }

  .small--ratio--strip {
    aspect-ratio: 16 / 5;
  }

  .small--ratio--product {
    aspect-ratio: 4 / 5;
  }

  .small--ratio--product-tall {
    aspect-ratio: 7 / 9;
  }
}


.visibility--none {
  display: none;
}

@media (max-width: 767px) {
  .visibility--desktop {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .visibility--mobile {
    display: none !important;
  }
}

@media (max-width: 767px), (min-width: 1024px) and (pointer: fine) {
  .visibility--tablet {
    display: none !important;
  }
}

@supports not selector(::-webkit-scrollbar) {
  body * {
    scrollbar-width: thin;
    scrollbar-color: var(--color-2) transparent;
  }
}

body *::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

body *::-webkit-scrollbar-track {
  background: transparent;
}

body *::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: var(--color-2);
}