@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Kirang+Haerang&display=swap");
@use 'sass:math';
:root {
  --font-scale: 1;
  font-size: calc(16px * var(--font-scale)); }

:root {
  --accent-primary: #3b9eff;
  --accent-secondary: #c2e6ff;
  --grey-primary: #696e77;
  --grey-secondary: #edeef0;
  --container-accent-primary: #0090ff;
  --container-accent-primary-hover: var(--accent-primary);
  --on-container-accent-primary: var(--grey-seconary);
  --container-accent-primary-soft: #0077ff3a;
  --container-accent-primary-soft-hover: #0075ff57;
  --on-container-accent-primary-soft: var(--accent-primary);
  --container-accent-secondary: var(--accent-secondary);
  --on-container-accent-secondary: #0d1520;
  --container-accent-secondary-soft: #0077ff57;
  --on-container-accent-secondary-soft: var(--accent-secondary);
  --container-grey-primary: var(--grey-primary);
  --on-container-grey-primary: var(--grey-secondary);
  --container-grey-primary-soft: #d3edf81d;
  --on-container-grey-primary-soft: #f1f7feb3;
  --container-grey-secondary: var(--grey-secondary);
  --on-container-grey-secondary: #111113;
  --container-grey-secondary-soft: #d3edf81d;
  --on-container-grey-secondary-soft: var(--grey-secondary);
  --container-grey-secondary-soft-disabled: #ddeaf814;
  --on-container-grey-secondary-soft-disabled: #d9edff5d;
  --background: #1e1e1e;
  --on-background-primary: var(--grey-secondary);
  --on-background-secondary: #f1f7feb3;
  --surface-accent-primary: #11213d80;
  --on-surface-acccent-primary: var(--accent-primary);
  --surface-accent-secondary: #11213d80;
  --on-surface-accent-secondary: var(--accent-secondary);
  --surface-grey-primary: #1f212380;
  --on-surface-grey-primary: #f1f7feb3;
  --surface-grey-secondary: #1f212380;
  --on-surface-grey-secondary: var(--grey-secondary);
  --surface-grey-tertiary: #d8f4f609;
  --on-surface-grey-tertiary: var(--grey-secondary);
  --outline-accent-primary: #3094feb9;
  --outline-accent-secondary: #2a91fe98;
  --outline-grey-primary: #d9edfe25;
  --outline-grey-secondary: #d9edff40;
  --container-success: #02f99920;
  --on-container-success: #21fec0d6;
  --container-error: #ff173f2d;
  --on-container-error: #ffd1d9;
  --container-warning: #FFAA001e;
  --on-container-warning: #f6eeb4;
  --container-mark: #fec40045;
  --on-container-mark: #f6eeb4;
  --modal-background: rgba(0, 0, 0, 0.85);
  --link-accent: var(--accent-primary);
  --link-grey: var(--grey-secondary); }

:root[data-theme="light"] {
  --accent-primary: #3b9eff;
  --accent-secondary: #113264;
  --grey-primary: #8b8d98;
  --grey-secondary: #1c2024;
  --container-accent-primary: #0090ff;
  --container-accent-primary-hover: var(--accent-primary);
  --on-container-accent-primary: #ffffff;
  --container-accent-primary-soft: #008ff519;
  --container-accent-primary-soft-hover: #009eff2a;
  --on-container-accent-primary-soft: var(--accent-primary);
  --container-accent-secondary: var(--accent-secondary);
  --container-accent-secondary-hover: ;
  --on-container-accent-secondary: #fbfdff;
  --container-accent-secondary-soft: #009ff519;
  --container-accent-secondary-soft-hover: ;
  --on-container-accent-secondary-soft: var(--accent-secondary);
  --container-grey-primary: var(--grey-primary);
  --container-grey-primary-hover: ;
  --on-container-grey-primary: #ffffff;
  --container-grey-primary-soft: #0000330f;
  --container-grey-primary-soft-hover: ;
  --on-container-grey-primary-soft: #0007149e;
  --container-grey-secondary: var(--grey-secondary);
  --container-grey-secondary-hover: ;
  --on-container-grey-secondary: #fcfcfd;
  --container-grey-secondary-soft: #0000330f;
  --container-grey-secondary-soft-hover: ;
  --on-container-grey-secondary-soft: var(--grey-secondary);
  --container-grey-secondary-soft-disabled: #0000330f;
  --on-container-grey-secondary-soft-disabled: #00083046;
  --background: #fcfcfd;
  --on-background-primary: var(--grey-secondary);
  --on-background-secondary: #0007149e;
  --surface-accent-primary: #f1f9ffcc;
  --on-surface-accent-primary: var(--accent-primary);
  --surface-accent-secondary: #f1f9ffcc;
  --on-surface-accent-secondary: var(--grey-secondary);
  --surface-grey-primary: #ffffff;
  --on-surface-grey-primary: #0007149e;
  --surface-grey-secondary: #ffffff;
  --on-surface-grey-secondary: var(--grey-secondary);
  --surface-grey-tertiary: #00005505;
  --on-surface-grey-tertiary: var(--grey-secondary);
  --outline-accent-primary: #0084e661;
  --outline-accent-primary-hover: #1166fb18;
  --outline-accent-secondary: #0083eb70;
  --outline-grey-primary: #00083045;
  --outline-grey-secondary: #00062e33;
  --container-success: #00ae4819;
  --on-container-success: #007152de;
  --container-error: #f3000d14;
  --on-container-error: #c40006d4;
  --container-warning: #ff9c0029;
  --on-container-warning: #582d1d;
  --container-mark: #ebbc0096;
  --on-container-mark: #473b1f;
  --modal-background: rgba(0, 0, 0, 0.5);
  --link-accent: var(--accent-primary);
  --link-grey: var(--grey-secondary); }

:root[data-theme="dark"] {
  --accent-primary: #3b9eff;
  --accent-secondary: #c2e6ff;
  --grey-primary: #696e77;
  --grey-secondary: #edeef0;
  --container-accent-primary: #0090ff;
  --container-accent-primary-hover: var(--accent-primary);
  --on-container-accent-primary: var(--grey-seconary);
  --container-accent-primary-soft: #0077ff3a;
  --container-accent-primary-soft-hover: #0075ff57;
  --on-container-accent-primary-soft: var(--accent-primary);
  --container-accent-secondary: var(--accent-secondary);
  --on-container-accent-secondary: #0d1520;
  --container-accent-secondary-soft: #0077ff57;
  --on-container-accent-secondary-soft: var(--accent-secondary);
  --container-grey-primary: var(--grey-primary);
  --on-container-grey-primary: var(--grey-secondary);
  --container-grey-primary-soft: #d3edf81d;
  --on-container-grey-primary-soft: #f1f7feb3;
  --container-grey-secondary: var(--grey-secondary);
  --on-container-grey-secondary: #111113;
  --container-grey-secondary-soft: #d3edf81d;
  --on-container-grey-secondary-soft: var(--grey-secondary);
  --container-grey-secondary-soft-disabled: #ddeaf814;
  --on-container-grey-secondary-soft-disabled: #d9edff5d;
  --background: #1e1e1e;
  --on-background-primary: var(--grey-secondary);
  --on-background-secondary: #f1f7feb3;
  --surface-accent-primary: #11213d80;
  --on-surface-acccent-primary: var(--accent-primary);
  --surface-accent-secondary: #11213d80;
  --on-surface-accent-secondary: var(--accent-secondary);
  --surface-grey-primary: #1f212380;
  --on-surface-grey-primary: #f1f7feb3;
  --surface-grey-secondary: #1f212380;
  --on-surface-grey-secondary: var(--grey-secondary);
  --surface-grey-tertiary: #d8f4f609;
  --on-surface-grey-tertiary: var(--grey-secondary);
  --outline-accent-primary: #3094feb9;
  --outline-accent-secondary: #2a91fe98;
  --outline-grey-primary: #d9edfe25;
  --outline-grey-secondary: #d9edff40;
  --container-success: #02f99920;
  --on-container-success: #21fec0d6;
  --container-error: #ff173f2d;
  --on-container-error: #ffd1d9;
  --container-warning: #FFAA001e;
  --on-container-warning: #f6eeb4;
  --container-mark: #fec40045;
  --on-container-mark: #f6eeb4;
  --modal-background: rgba(0, 0, 0, 0.85);
  --link-accent: var(--accent-primary);
  --link-grey: var(--grey-secondary); }

@use 'sass:math';
:root {
  --font-scale: 1;
  font-size: calc(16px * var(--font-scale)); }

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
  font-family: "Inter", sans-serif;
  scroll-behavior: smooth; }

body {
  font-size: 1rem;
  line-height: 1.75rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.36px;
  background-color: var(--background);
  color: var(--on-background-primary); }

p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 142%;
  letter-spacing: 0.25px;
  color: var(--on-background-primary); }

a {
  text-decoration: none;
  transition: color 0.66s;
  color: var(--link-accent); }
  a:hover {
    text-decoration: underline;
    text-decoration-color: color-mix(in oklab, #0081fd6b, #d6ebfd30); }
  a:visited {
    text-decoration: none; }
  a:active {
    text-decoration: none; }

h1 {
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 127%;
  color: var(--on-background-primary); }

h2 {
  font-size: 1rem;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: 0.15px;
  color: var(--on-background-primary); }

h3 {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 142%;
  letter-spacing: 0.1px;
  color: var(--on-background-primary); }

.label--sm {
  font-size: 0.688rem; }

.label--md {
  font-size: 0.75rem; }

.label--lg {
  font-size: 0.875rem; }

.body--sm {
  font-size: 0.75rem; }

.body--md {
  font-size: 1rem !important; }

.body--lg {
  font-size: 1.125rem; }

mark {
  background: var(--container-mark);
  color: var(--on-container-mark); }

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  border-radius: 9999px;
  transition: all 0.66s ease-in-out;
  padding: 2px 12px;
  cursor: pointer; }
  .btn:hover {
    text-decoration: none; }
  .btn--accent-primary {
    background-color: var(--container-accent-primary);
    color: var(--on-container-accent-primary); }
    .btn--accent-primary:hover {
      background-color: var(--container-accent-primary-hover); }
  .btn--accent-primary-soft {
    background-color: var(--container-accent-primary-soft);
    color: var(--on-container-accent-primary-soft); }
    .btn--accent-primary-soft:hover {
      background-color: var(--container-accent-primary-soft-hover); }
  .btn--accent-primary-outline {
    color: var(--on-container-accent-primary-soft);
    outline: 1px solid var(--outline-accent-primary); }
  .btn--accent-secondary {
    background-color: var(--container-accent-secondary);
    color: var(--on-container-accent-secondary); }
    .btn--accent-secondary:hover {
      background-color: var(--container-accent-secondary-hover); }
  .btn--accent-secondary-soft {
    background-color: var(--container-accent-secondary-soft);
    color: var(--on-container-accent-secondary-soft); }
    .btn--accent-secondary-soft:hover {
      background-color: var(--container-accent-secondary-soft-hover); }
  .btn--grey-primary {
    background-color: var(--container-grey-primary);
    color: var(--on-container-grey-primary); }
    .btn--grey-primary:hover {
      background-color: var(--container-grey-primary-hover); }
  .btn--grey-primary-soft {
    background-color: var(--container-grey-primary-soft);
    color: var(--on-container-grey-primary-soft); }
    .btn--grey-primary-soft:hover {
      background-color: var(--container-grey-primary-soft-hover); }
  .btn--grey-secondary {
    background-color: var(--container-grey-secondary);
    color: var(--on-container-grey-secondary); }
    .btn--grey-secondary:hover {
      background-color: var(--container-grey-secondary-hover); }
  .btn--grey-secondary-soft {
    background-color: var(--container-grey-secondary-soft);
    color: var(--on-container-grey-secondary-soft); }
    .btn--grey-secondary-soft:hover {
      background-color: var(--container-grey-secondary-soft-hover); }
    .btn--grey-secondary-soft--disabled {
      background-color: var(--container-grey-secondary-soft-disabled);
      color: var(--on-container-grey-secondary-soft-disabled);
      cursor: not-allowed;
      pointer-events: none; }

.btn-ico {
  background: none;
  border: none;
  border-radius: 8px;
  height: 32px;
  width: 32px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }
  .btn-ico--grey-primary-ghost svg {
    fill: var(--on-container-grey-primary-soft); }
  .btn-ico--grey-primary-ghost:hover {
    background-color: var(--container-grey-primary-soft); }

select {
  appearance: none; }
  @supports (appearance: base-select) {
    select, select::picker(select) {
      appearance: base-select; } }

select {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--outline-grey-primary);
  background: var(--surface-grey-secondary);
  color: var(--on-surface-grey-secondary);
  border-radius: 8px;
  font-size: 0.75rem;
  cursor: pointer; }
  select:hover {
    border: 1px solid var(--outline-grey-secondary); }
  @supports (appearance: base-select) {
    select {
      padding-inline: 10px;
      background-image: none; }
      select svg {
        width: 1rem;
        line-height: 1;
        fill: var(--on-background-primary); }
      select::picker-icon {
        content: '▼';
        scale: 75%; }
      select:open::picker-icon {
        content: '▲';
        scale: 75%; }
      select::picker(select) {
        padding: 8px;
        background-color: var(--background);
        margin-top: 2px;
        border-radius: 8px;
        opacity: 0;
        height: 0;
        overflow: clip;
        transition: height 0.4s ease, opacity 0.4s ease, overlay 0.4s, display 0.4s;
        transition-behavior: allow-discrete; }
      select:open::picker(select) {
        opacity: 1;
        height: calc-size(auto, size);
        overflow: auto;
        border: 1px solid var(--outline-grey-secondary); }
    @starting-style {
      select:open::picker(select) {
        opacity: 0;
        height: 0; } }
      select option {
        display: flex;
        align-items: center;
        color: var(--on-background-primary);
        padding: 0 10px;
        border-radius: 4px;
        cursor: pointer; }
        select option:where(:hover, :focus, :active) {
          background: var(--container-accent-primary-soft);
          color: var(--on-container-accent-primary-soft); }
        select option:hover svg {
          fill: var(--on-container-accent-primary-soft); }
        select option:checked svg {
          fill: var(--on-container-accent-primary); }
        select option:checked {
          background: var(--container-accent-primary);
          color: var(--on-container-accent-primary); }
        select option::checkmark {
          display: none; }
        select option svg {
          fill: var(--on-background-primary); }
      select selectedcontent {
        display: flex;
        align-items: center;
        gap: 4px; } }

@supports (-webkit-touch-callout: none) {
  select {
    padding: 12px 12px;
    width: 100%;
    border: 1px solid var(--outline-grey-secondary);
    background: var(--surface-grey-secondary); } }

.showcase__image {
  padding: 56px; }
  .showcase__image img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: center; }
  @media only screen and (max-width: 37.5em) {
    .showcase__image {
      padding: 0;
      background: none; } }

.showcase__app {
  display: flex !important;
  justify-content: center !important; }
  .showcase__app img {
    max-width: 385px !important; }

.showcase__gallery {
  padding: 56px;
  display: flex;
  flex-direction: row;
  gap: 16px;
  overflow-x: scroll; }
  .showcase__gallery img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: left; }
  @media only screen and (max-width: 37.5em) {
    .showcase__gallery {
      padding: 0;
      background: none; } }

.clickable {
  cursor: pointer; }

#modal {
  position: fixed;
  inset: 0;
  background: var(--modal-background);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001; }

#modal img {
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: contain; }

.modal {
  display: flex;
  flex-direction: column;
  width: 90vw;
  max-height: 85vh;
  align-items: flex-start;
  border-radius: 24px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background-color: var(--surface-grey-primary);
  border: 1px solid var(--outline-grey-secondary); }
  .modal__body, .modal__footer {
    padding: 24px; }
  .modal__header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    padding: 8px 24px;
    border-bottom: 1px solid var(--outline-grey-secondary); }
    .modal__header #close {
      font-size: 24px;
      cursor: pointer;
      color: var(--on-surface-grey-primary); }
  .modal__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    align-self: stretch; }
    .modal__body__caption {
      text-align: center;
      font-size: 0.75rem;
      max-width: 90%;
      word-wrap: break-word;
      color: var(--on-surface-grey-primary); }
  .modal__footer {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center; }

.aside {
  position: fixed;
  top: 88px;
  right: 56px;
  width: 350px;
  background-color: var(--surface-grey-primary);
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.4s ease, opacity 0.3s ease, visibility 0.3s ease;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border: 1px solid var(--outline-grey-primary);
  border-radius: 16px; }
  .aside.active {
    transform: translateX(0);
    opacity: 1;
    visibility: visible; }
  .aside__header {
    display: flex;
    flex-direction: row;
    justify-content: space-between; }
    .aside__header__close {
      background: none;
      outline: none;
      border: none;
      font-size: 1.375rem;
      color: var(--on-surface-grey-primary);
      cursor: pointer; }
  .aside__body ul > li {
    display: flex;
    flex-direction: row;
    text-decoration: none;
    list-style-type: none;
    padding: 12px 24px; }
    .aside__body ul > li h3 {
      width: 100%; }
  .aside__body select {
    width: 196px; }
  .aside__footer p {
    font-size: 0.75rem; }
  .aside__header, .aside__footer {
    padding: 24px; }

.tease-wrapper {
  position: relative; }
  @media only screen and (max-width: 56.25em) {
    .tease-wrapper {
      height: 500px;
      overflow: hidden; } }

.cs-tease {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(4px); }
  .cs-tease .tease {
    display: flex;
    flex-direction: column;
    padding: 48px;
    gap: 16px;
    background: var(--background);
    border: 1px solid var(--outline-grey-primary);
    border-radius: 16px;
    text-align: center;
    transition: border 0.4s ease;
    width: 636px; }
    .cs-tease .tease__disclaimer {
      color: var(--on-background-secondary); }
    .cs-tease .tease a {
      align-self: center; }
      @media only screen and (max-width: 74.5em) {
        .cs-tease .tease a {
          align-self: auto; } }
    .cs-tease .tease:hover {
      border: 1px solid var(--outline-grey-secondary); }
    @media only screen and (max-width: 74.5em) {
      .cs-tease .tease {
        width: unset;
        margin: 56px;
        text-align: left; } }
    @media only screen and (max-width: 37.5em) {
      .cs-tease .tease {
        margin: 24px;
        padding: 24px 16px; } }

.container__tags {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  align-self: stretch;
  flex-wrap: wrap;
  gap: 8px !important; }
  .container__tags .tag {
    display: flex;
    padding: 2px 8px;
    justify-content: center;
    align-items: center;
    border-radius: 9999px;
    line-height: normal;
    background-color: var(--container-grey-primary); }
    .container__tags .tag p {
      color: var(--on-container-grey-primary);
      font-size: 0.75rem !important;
      text-wrap: nowrap; }

.text-center {
  text-align: center !important; }

.text-left {
  text-align: left !important; }

.fd-row {
  flex-direction: row !important; }

.fd-column {
  flex-direction: column !important; }

.align-start {
  justify-content: flex-start !important;
  align-items: flex-start !important; }

.align-end {
  justify-content: flex-end !important;
  align-items: flex-end !important; }

.b-bottom {
  border-bottom: 1px solid var(--outline-grey-secondary) !important; }

.w-50 {
  width: 50% !important; }
  @media only screen and (max-width: 56.25em) {
    .w-50 {
      width: 100% !important; } }

.w-75 {
  width: 75% !important; }
  @media only screen and (max-width: 56.25em) {
    .w-75 {
      width: 100% !important; } }

header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  align-self: stretch;
  padding: 48px 56px; }
  @media only screen and (max-width: 37.5em) {
    header {
      padding: 32px 24px; } }

section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  align-self: stretch;
  padding: 48px 56px; }
  @media only screen and (max-width: 37.5em) {
    section {
      padding: 32px 24px; } }

.container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  gap: 48px;
  padding: 0; }
  .container--row {
    flex-direction: row !important; }
    @media only screen and (max-width: 56.25em) {
      .container--row {
        flex-direction: column !important; } }
  .container--column {
    flex-direction: column !important; }
  @media only screen and (max-width: 37.5em) {
    .container {
      gap: 24px; } }

.content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px; }
  .content ul {
    padding: 0 16px; }
  .content--title {
    gap: 0px !important; }

.row {
  flex-direction: row !important;
  align-items: stretch !important;
  flex-wrap: wrap !important; }

.col {
  flex-direction: column !important;
  align-items: stretch !important; }

.col-1 {
  max-width: 86px !important; }

.col-2 {
  max-width: 196px !important; }

.col-3 {
  max-width: 306px !important; }

.col-4 {
  max-width: 416px !important;
  width: 100%; }
  @media only screen and (max-width: 74.5em) {
    .col-4 {
      max-width: unset !important;
      width: 100%; } }

footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 48px 56px;
  text-align: center;
  gap: 16px; }
  @media only screen and (max-width: 37.5em) {
    footer {
      flex-direction: column;
      justify-content: none;
      padding: 32px 24px; } }
  footer p {
    color: var(--on-background-secondary);
    font-size: 0.75rem; }
  footer .footer__container {
    display: flex;
    font-size: 1rem;
    gap: 16px; }
    footer .footer__container a {
      color: var(--on-background-secondary); }

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  max-width: 1440px; }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 56px;
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--background);
  color: var(--on-background-primary); }
  @media only screen and (max-width: 37.5em) {
    .nav {
      padding: 0 24px; } }
  .nav .logo {
    display: flex;
    flex-direction: row;
    gap: 16px; }
  .nav .nav-desktop {
    display: flex; }
    .nav .nav-desktop__container {
      display: flex;
      gap: 32px !important;
      align-items: center; }
      .nav .nav-desktop__container .nav-item {
        display: flex;
        color: var(--on-background-secondary); }
    @media only screen and (max-width: 56.25em) {
      .nav .nav-desktop {
        display: none; } }
  .nav .hamburger {
    display: none; }
    @media only screen and (max-width: 56.25em) {
      .nav .hamburger {
        display: flex;
        height: 55px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99); } }
    .nav .hamburger__container {
      width: 20px;
      height: 10px;
      position: relative;
      display: block;
      margin: -4px auto 0;
      top: 50%; }
      .nav .hamburger__container .line {
        width: 100%;
        height: 1px;
        display: block;
        position: relative;
        background: var(--on-background-primary);
        transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99); }
      .nav .hamburger__container .line.line1 {
        -webkit-transform: translateY(0px) rotate(0deg);
        transform: translateY(0px) rotate(0deg); }
      .nav .hamburger__container .line.line2 {
        -webkit-transform: translateY(6px) rotate(0deg);
        transform: translateY(6px) rotate(0deg); }

.active {
  transform: rotate(90deg); }
  .active .hamburger__container .line {
    transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    transition-delay: 0.1s; }
    .active .hamburger__container .line.line1 {
      transform: translateY(4px) rotate(45deg); }
    .active .hamburger__container .line.line2 {
      transform: translateY(3px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 64px;
  gap: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.66s ease-in-out;
  z-index: 999;
  padding: inherit;
  box-sizing: border-box;
  background: var(--background); }
  .mobile-menu .menu {
    width: 100%;
    margin: 0;
    display: flex;
    flex-flow: wrap;
    flex-direction: column; }
    .mobile-menu .menu li.menu-item {
      border-bottom: 1px solid var(--outline-grey-secondary);
      list-style-type: none;
      margin-top: 5px;
      opacity: 0;
      padding: 0 24px;
      transition: opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
      transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99);
      transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99), -webkit-transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99); }
      .mobile-menu .menu li.menu-item a {
        display: block;
        position: relative;
        color: var(--on-background-secondary);
        text-decoration: none;
        font-size: 1.125rem;
        line-height: 2.8;
        width: 100%;
        -webkit-tap-highlight-color: transparent; }
      .mobile-menu .menu li.menu-item:nth-child(1) {
        transition-delay: 0.35s; }
      .mobile-menu .menu li.menu-item:nth-child(2) {
        transition-delay: 0.3s; }
      .mobile-menu .menu li.menu-item:nth-child(3) {
        transition-delay: 0.25s; }
      .mobile-menu .menu li.menu-item:nth-child(4) {
        transition-delay: 0.2s; }
      .mobile-menu .menu li.menu-item:nth-child(5) {
        transition-delay: 0.15s; }
      .mobile-menu .menu li.menu-item:nth-child(6) {
        transition-delay: 0.1s; }
      .mobile-menu .menu li.menu-item:nth-child(7) {
        transition-delay: 0.05s; }
  .mobile-menu .accessibility {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 24px;
    gap: 24px;
    position: fixed;
    bottom: 0;
    left: 0;
    border-top: 1px solid var(--outline-grey-primary); }
    .mobile-menu .accessibility__title {
      display: flex;
      gap: 8px;
      color: var(--on-background-primary); }
      .mobile-menu .accessibility__title svg {
        fill: var(--on-background-secondary); }
    .mobile-menu .accessibility__settings {
      display: flex;
      flex-direction: column;
      gap: 16px; }
      .mobile-menu .accessibility__settings div {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 16px; }
        .mobile-menu .accessibility__settings div h3 {
          width: 100%; }
        .mobile-menu .accessibility__settings div select {
          min-width: 200px; }
      .mobile-menu .accessibility__settings p {
        font-size: 0.75rem; }
  .mobile-menu.show {
    opacity: 1;
    visibility: visible; }
    .mobile-menu.show .menu-item {
      animation: fadeIn 0.5s ease-in-out forwards; }
      .mobile-menu.show .menu-item:nth-child(2) {
        animation-delay: 0.2s; }
      .mobile-menu.show .menu-item:nth-child(3) {
        animation-delay: 0.4s; }
      .mobile-menu.show .menu-item:nth-child(4) {
        animation-delay: 0.6s; }

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px); }
  to {
    opacity: 1;
    transform: translateY(0); } }

.hide {
  color: var(--on-background);
  transition: color 0.6s; }

a[aria-current="page"] {
  color: var(--accent-primary) !important;
  text-decoration: none; }

.container__modules {
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
  gap: 16px;
  align-self: stretch;
  flex-wrap: wrap; }
  .container__modules .module {
    flex-grow: 1;
    flex-basis: 0;
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    max-width: 306px;
    border-radius: 24px;
    background-color: var(--surface-grey-primary);
    border: 1px solid var(--outline-grey-primary); }
    @media only screen and (max-width: 56.25em) {
      .container__modules .module {
        max-width: 100%;
        width: 100%; } }
    .container__modules .module__header {
      display: flex;
      flex-direction: row;
      align-items: center;
      align-self: stretch;
      gap: 12px; }
      .container__modules .module__header svg {
        width: 40px; }
        .container__modules .module__header svg .main {
          fill: var(--on-background-primary); }
          .container__modules .module__header svg .main stop {
            stop-color: var(--on-background-primary); }
        .container__modules .module__header svg .support {
          fill: var(--background); }
    .container__modules .module__header-img {
      width: 56px;
      height: 56px; }
    .container__modules .module__header-content {
      display: flex;
      flex-direction: column;
      align-self: stretch; }
      .container__modules .module__header-content span {
        color: var(--on-surface-grey-primary); }
      .container__modules .module__header-content p {
        color: var(--on-background-secondary); }
    .container__modules .module__body {
      display: flex;
      align-items: center;
      align-self: stretch;
      border-radius: 8px;
      z-index: 0; }
    .container__modules .module__display-img {
      height: 170px;
      flex: 1 0 0;
      object-fit: cover;
      border-radius: 8px;
      box-shadow: -2px 0 4px 0 rgba(0, 0, 0, 0.25);
      position: relative;
      transition: transform 0.4s ease;
      z-index: 0; }
      .container__modules .module__display-img:not(:first-child) {
        margin-left: -48px !important; }
      @media only screen and (max-width: 56.25em) {
        .container__modules .module__display-img {
          height: none; } }
    .container__modules .module__display-img:not(:last-child):hover {
      transform: translateX(-40px); }

.contact svg {
  fill: var(--on-surface-grey-secondary);
  width: 64px;
  height: 64px; }

.contact .container {
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 48px;
  border-radius: 24px;
  border: 1px solid var(--outline-grey-secondary);
  background-color: var(--surface-grey-primary);
  text-align: center; }
  .contact .container p {
    color: var(--on-background-secondary); }
  @media only screen and (max-width: 56.25em) {
    .contact .container {
      padding: 16px; } }

.case-study {
  display: flex;
  flex-direction: column; }
  @media only screen and (max-width: 56.25em) {
    .case-study {
      flex-direction: column-reverse; } }
  .case-study .content {
    text-align: center; }
    @media only screen and (max-width: 56.25em) {
      .case-study .content {
        text-align: left; } }
  .case-study__header {
    display: flex;
    flex-direction: row;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap; }
    .case-study__header .ic--tag {
      width: 16px !important; }
  .case-study img {
    width: 100%;
    align-self: stretch; }

.cs {
  display: flex;
  flex-direction: row;
  gap: 24px;
  width: 100%; }
  @media only screen and (max-width: 56.25em) {
    .cs {
      flex-direction: column !important; } }
  .cs__details {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%; }
    @media only screen and (max-width: 56.25em) {
      .cs__details {
        gap: 24px; } }
    .cs__details__team__list, .cs__details__timeline__list {
      display: flex;
      flex-direction: column;
      gap: 8px; }
    .cs__details__team__list, .cs__details__timeline__list > li {
      list-style: none;
      font-size: 1.125rem; }
      .cs__details__team__list span, .cs__details__timeline__list > li span {
        color: var(--on-background-secondary); }
  .cs__details__role, .cs__details__team, .cs__details__timeline, .cs__overview {
    flex-basis: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%; }
  .cs__overview {
    gap: 48px; }
    @media only screen and (max-width: 56.25em) {
      .cs__overview {
        gap: 24px; } }

.showcase {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%; }
  .showcase__fun-fact {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
    padding: 24px;
    border-radius: 16px; }
    .showcase__fun-fact p, .showcase__fun-fact figcaption {
      font-size: 0.75rem;
      line-height: 1.5rem; }
    @media only screen and (max-width: 37.5em) {
      .showcase__fun-fact {
        padding: 16px; } }
  .showcase__label {
    display: flex;
    flex-direction: column;
    gap: 16px; }
    .showcase__label__container {
      display: flex;
      flex-direction: row;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap; }
      .showcase__label__container .tag {
        display: block; }
      @media only screen and (max-width: 37.5em) {
        .showcase__label__container {
          justify-content: flex-start;
          flex-direction: row; } }

.divider {
  display: flex;
  width: 100%;
  justify-content: center; }
  .divider__container {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
    align-self: center;
    justify-content: center;
    width: 100%;
    max-width: 856px; }
    .divider__container__line {
      flex: 2;
      height: 1px;
      background-color: var(--outline-grey-secondary); }
    .divider__container p {
      text-wrap: nowrap; }
  .divider p {
    color: var(--on-background-primaryu);
    display: block; }

.cs-header, .cs-section {
  border-bottom: 1px solid var(--outline-grey-primary); }

.cs-header {
  display: flex;
  min-height: 675px;
  padding: 56px 56px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  align-self: stretch; }
  @media only screen and (max-width: 56.25em) {
    .cs-header {
      padding: 32px 24px; } }
  .cs-header .container--column {
    gap: 32px !important; }
  @media only screen and (max-width: 74.5em) {
    .cs-header .container--row {
      flex-direction: column-reverse; } }
  @media only screen and (max-width: 74.5em) {
    .cs-header__details {
      flex-direction: column-reverse !important; } }
  .cs-header .cs-buttons {
    display: flex;
    align-self: stretch;
    gap: 24px !important; }
    @media only screen and (max-width: 90em) {
      .cs-header .cs-buttons {
        flex-direction: column !important; } }
  .cs-header .cs-img {
    width: 747px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    flex: 1 0 0;
    align-self: stretch; }
    @media only screen and (max-width: 74.5em) {
      .cs-header .cs-img {
        width: 100%;
        justify-content: center;
        align-items: center; } }
    .cs-header .cs-img img {
      width: 636px;
      height: 457px;
      border-radius: 8px;
      object-fit: cover; }
      @media only screen and (max-width: 74.5em) {
        .cs-header .cs-img img {
          width: 100%;
          height: auto; } }

.cs-section h1 {
  width: 100%;
  text-align: center; }
  @media only screen and (max-width: 56.25em) {
    .cs-section h1 {
      text-align: left; } }

@media only screen and (max-width: 56.25em) {
  .cs-section .summary {
    flex-direction: column-reverse !important; } }

.cs-section .container {
  justify-content: center; }

.cs-section .content {
  align-items: flex-start; }

.cs-section .container--column {
  width: 636px !important;
  gap: 16px; }
  @media only screen and (max-width: 56.25em) {
    .cs-section .container--column {
      width: 100% !important; } }
  .cs-section .container--column .container--row {
    gap: 16px; }

.cs-section .summary-box {
  display: flex;
  flex-direction: column;
  padding: 32px;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: 16px;
  text-align: center;
  border: 1px solid var(--outline-grey-secondary);
  background: var(--surface-grey-primary); }
  .cs-section .summary-box__ico {
    border-radius: 9999px;
    width: 74px;
    height: 74px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--container-accent-primary-soft); }
    .cs-section .summary-box__ico path {
      fill: var(--on-container-accent-primary-soft); }
  .cs-section .summary-box p {
    color: var(--on-surface-grey-primary); }

.cs-section .research-box {
  display: flex;
  padding: 24px;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  flex: 1 0 0;
  height: 180px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-style: italic;
  line-height: normal;
  letter-spacing: 0.28px;
  border: 1px solid var(--outline-grey-secondary);
  background: var(--surface-grey-primary); }
  @media only screen and (max-width: 56.25em) {
    .cs-section .research-box {
      height: unset; } }
  .cs-section .research-box p {
    flex: 1 0 0;
    align-self: stretch;
    color: var(--on-background-primary); }
  .cs-section .research-box__id {
    display: flex;
    flex-direction: column;
    padding-top: 8px;
    border-top: 1px solid var(--outline-grey-secondary);
    width: 100%;
    gap: 2px;
    font-style: normal; }
    .cs-section .research-box__id :nth-child(1) {
      font-weight: 700 !important;
      color: var(--on-background-primary); }
    .cs-section .research-box__id :nth-child(2) {
      font-weight: 400 !important; }

.cs-section .label--md {
  color: var(--on-background-secondary) !important; }

.cs-section .outcome-box {
  display: flex;
  min-height: 190px;
  padding: 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex: 1 0 0;
  border-radius: 16px;
  background: var(--surface-accent-primary);
  border: 1px solid var(--outline-accent-secondary); }
  @media only screen and (max-width: 56.25em) {
    .cs-section .outcome-box {
      min-height: unset; } }
  .cs-section .outcome-box__ico {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    align-self: stretch; }
    .cs-section .outcome-box__ico path {
      width: 24px;
      height: 24px;
      aspect-ratio: 1/1;
      fill: var(--accent-primary); }
  .cs-section .outcome-box .title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 2px;
    align-self: stretch;
    width: 100%; }
    .cs-section .outcome-box .title p {
      font-size: 1rem;
      color: var(--on-background-secondary); }
  .cs-section .outcome-box p {
    font-size: 1rem;
    line-height: normal;
    letter-spacing: 0.28px;
    flex: 1 0 0;
    align-self: stretch; }

.cs-section .cs-img {
  display: grid !important;
  gap: 24px;
  align-items: center !important;
  justify-content: center;
  width: 100%;
  align-self: stretch; }
  .cs-section .cs-img__col-1 {
    grid-template-columns: repeat(1, 1fr); }
  .cs-section .cs-img__col-2 {
    grid-template-columns: repeat(2, 1fr); }
  .cs-section .cs-img__col-3 {
    grid-template-columns: repeat(3, 1fr); }
  .cs-section .cs-img__col-4 {
    grid-template-columns: repeat(4, 1fr); }
  @media only screen and (max-width: 56.25em) {
    .cs-section .cs-img__col-2, .cs-section .cs-img__col-3, .cs-section .cs-img__col-4 {
      grid-template-columns: repeat(2, 1fr); } }
  .cs-section .cs-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; }

.cs-section .container {
  justify-content: center !important;
  align-items: center !important; }

.cs-section .cs-img-third {
  width: 33.33% !important;
  height: 33.33%; }
  @media only screen and (max-width: 56.25em) {
    .cs-section .cs-img-third {
      width: 100% !important;
      height: 100% !important; } }

#projectSummary, #projectProcess {
  scroll-margin-top: 64px; }

.header__work .container {
  height: 450px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center; }

.header__about {
  height: 50vh; }
  .header__about .container {
    display: flex;
    flex: 1 0 0;
    align-self: stretch;
    flex-direction: row; }
    @media only screen and (max-width: 56.25em) {
      .header__about .container {
        flex-direction: column; } }
    .header__about .container .column {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      align-self: stretch;
      height: 100%; }
      .header__about .container .column img {
        width: 196px;
        border-radius: 8px; }
        @media only screen and (max-width: 56.25em) {
          .header__about .container .column img {
            width: 94px; } }
      .header__about .container .column .content {
        width: 75%;
        gap: 0px !important; }
        @media only screen and (max-width: 56.25em) {
          .header__about .container .column .content {
            width: 100%; } }
        .header__about .container .column .content .label-md {
          margin-top: 16px;
          color: var(--on-background-secondary); }
      .header__about .container .column p {
        font-size: 1rem; }
        @media only screen and (max-width: 56.25em) {
          .header__about .container .column p {
            font-size: 0.75rem; } }
      .header__about .container .column h2 {
        font-size: 1.5rem;
        margin-top: 16px;
        color: var(--on-background-primary); }
        @media only screen and (max-width: 74.5em) {
          .header__about .container .column h2 {
            font-size: unset; } }
      .header__about .container .column .buttons {
        display: flex;
        flex-direction: row;
        gap: 24px; }
        @media only screen and (max-width: 56.25em) {
          .header__about .container .column .buttons {
            flex-direction: column !important; } }
      .header__about .container .column a {
        display: block; }
        @media only screen and (max-width: 56.25em) {
          .header__about .container .column a {
            display: none; } }

.column-img {
  display: flex; }
  @media only screen and (max-width: 56.25em) {
    .column-img {
      flex-direction: row !important;
      justify-content: space-between !important; } }
  .column-img a {
    display: none;
    width: 100%; }
    @media only screen and (max-width: 56.25em) {
      .column-img a {
        display: unset;
        width: unset; } }
  .column-img .bandaid {
    display: none !important; }
    @media only screen and (max-width: 56.25em) {
      .column-img .bandaid {
        display: unset !important; } }

#featured-projects h2 {
  width: 100%;
  max-width: 856px; }

.work__content {
  display: flex;
  flex-direction: column;
  color: var(--on-background-secondary); }
  .work__content--subtext {
    color: var(--on-background-primary); }
    @media only screen and (max-width: 56.25em) {
      .work__content--subtext {
        text-align: justify; } }

.container__projects {
  display: flex;
  flex-direction: column;
  gap: 56px;
  align-items: center;
  justify-content: center; }

.project {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 856px; }
  @media only screen and (max-width: 56.25em) {
    .project {
      flex-direction: column-reverse; } }
  .project__details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    flex: 1 0 0;
    width: 100%; }
  .project__title {
    display: flex;
    align-items: center;
    gap: 48px;
    align-self: stretch; }
    @media only screen and (max-width: 56.25em) {
      .project__title {
        gap: 16px; } }
  .project__description {
    color: var(--on-background-secondary); }
  .project__tags {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    align-content: flex-start;
    gap: 12px;
    align-self: stretch; }
  .project .container__tags {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    gap: 12px;
    align-self: stretch;
    flex-wrap: wrap; }
    @media only screen and (max-width: 56.25em) {
      .project .container__tags {
        gap: 8px; } }
  .project__tag {
    display: flex;
    padding: 2px 8px;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.24);
    border-radius: 9999px;
    line-height: normal; }
    .project__tag p {
      font-size: 0.75rem; }
  .project__img {
    flex-shrink: 0; }
    .project__img img {
      width: 416px;
      object-fit: cover;
      border-radius: 8px; }
      @media only screen and (max-width: 56.25em) {
        .project__img img {
          width: 100%; } }

@media only screen and (max-width: 56.25em) {
  .design-prio .container {
    display: flex;
    flex-direction: column !important; } }

.design-prio .container--row {
  gap: 24px !important; }
  @media only screen and (max-width: 56.25em) {
    .design-prio .container--row {
      flex-direction: column !important; } }

.design-prio .label--md {
  color: var(--on-background-secondary); }

@media only screen and (max-width: 56.25em) {
  .design-prio .container--column {
    width: 100%;
    flex-direction: column !important; } }

@media only screen and (max-width: 56.25em) {
  .design-prio .col-4 {
    width: 100% !important; } }