:root { --layout-unit: 1vw; --header-unit: 1vw; --site-header-height: 72px; --site-font: "Noto Sans SC", "Noto Sans", sans-serif; }
/* Application photos, caption backgrounds and editable text are separate. */
.desktop .application-card,
.home-content .application-card {
  position: absolute;
  overflow: hidden;
  border-radius: 1.25vw;
  border-radius: calc(1.25vw);
  border-radius: calc(1.25 * var(--layout-unit));
  background: #fff;
}

.desktop .application-photo,
.home-content .application-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.desktop .application-caption,
.home-content .application-caption {
  position: absolute;
  border-radius: 0.3125vw;
  border-radius: calc(.3125vw);
  border-radius: calc(.3125 * var(--layout-unit));
  background: #fff;
}

#m-applications {
  background: #faf5ee;
}

.desktop .application-card-1,
.home-content .application-card-1 {
  left: 12.135417vw;
  left: calc(12.13542vw);
  left: calc(12.13542 * var(--layout-unit));
  top: 10.833333vw;
  top: calc(10.83333vw);
  top: calc(10.83333 * var(--layout-unit));
  width: 14.479167vw;
  width: calc(14.47917vw);
  width: calc(14.47917 * var(--layout-unit));
  height: 25.416667vw;
  height: calc(25.41667vw);
  height: calc(25.41667 * var(--layout-unit));
}

.desktop .application-card-1 .application-caption,
.home-content .application-card-1 .application-caption {
  left: 0.625000vw;
  left: calc(.625vw);
  left: calc(.625 * var(--layout-unit));
  top: 20.000000vw;
  top: calc(20vw);
  top: calc(20 * var(--layout-unit));
  width: 13.020833vw;
  width: calc(13.02083vw);
  width: calc(13.02083 * var(--layout-unit));
  height: 4.218750vw;
  height: calc(4.21875vw);
  height: calc(4.21875 * var(--layout-unit));
}

.desktop .application-card-2,
.home-content .application-card-2 {
  left: 27.343750vw;
  left: calc(27.34375vw);
  left: calc(27.34375 * var(--layout-unit));
  top: 10.833333vw;
  top: calc(10.83333vw);
  top: calc(10.83333 * var(--layout-unit));
  width: 14.479167vw;
  width: calc(14.47917vw);
  width: calc(14.47917 * var(--layout-unit));
  height: 25.416667vw;
  height: calc(25.41667vw);
  height: calc(25.41667 * var(--layout-unit));
}

.desktop .application-card-2 .application-caption,
.home-content .application-card-2 .application-caption {
  left: 0.625000vw;
  left: calc(.625vw);
  left: calc(.625 * var(--layout-unit));
  top: 20.000000vw;
  top: calc(20vw);
  top: calc(20 * var(--layout-unit));
  width: 13.020833vw;
  width: calc(13.02083vw);
  width: calc(13.02083 * var(--layout-unit));
  height: 4.218750vw;
  height: calc(4.21875vw);
  height: calc(4.21875 * var(--layout-unit));
}

.desktop .application-card-3,
.home-content .application-card-3 {
  left: 42.500000vw;
  left: calc(42.5vw);
  left: calc(42.5 * var(--layout-unit));
  top: 10.833333vw;
  top: calc(10.83333vw);
  top: calc(10.83333 * var(--layout-unit));
  width: 14.479167vw;
  width: calc(14.47917vw);
  width: calc(14.47917 * var(--layout-unit));
  height: 25.416667vw;
  height: calc(25.41667vw);
  height: calc(25.41667 * var(--layout-unit));
}

.desktop .application-card-3 .application-caption,
.home-content .application-card-3 .application-caption {
  left: 0.625000vw;
  left: calc(.625vw);
  left: calc(.625 * var(--layout-unit));
  top: 20.000000vw;
  top: calc(20vw);
  top: calc(20 * var(--layout-unit));
  width: 13.020833vw;
  width: calc(13.02083vw);
  width: calc(13.02083 * var(--layout-unit));
  height: 4.218750vw;
  height: calc(4.21875vw);
  height: calc(4.21875 * var(--layout-unit));
}

.desktop .application-card-4,
.home-content .application-card-4 {
  left: 57.760417vw;
  left: calc(57.76042vw);
  left: calc(57.76042 * var(--layout-unit));
  top: 10.833333vw;
  top: calc(10.83333vw);
  top: calc(10.83333 * var(--layout-unit));
  width: 14.427083vw;
  width: calc(14.42708vw);
  width: calc(14.42708 * var(--layout-unit));
  height: 25.416667vw;
  height: calc(25.41667vw);
  height: calc(25.41667 * var(--layout-unit));
}

.desktop .application-card-4 .application-caption,
.home-content .application-card-4 .application-caption {
  left: 0.572917vw;
  left: calc(.57292vw);
  left: calc(.57292 * var(--layout-unit));
  top: 20.000000vw;
  top: calc(20vw);
  top: calc(20 * var(--layout-unit));
  width: 13.020833vw;
  width: calc(13.02083vw);
  width: calc(13.02083 * var(--layout-unit));
  height: 4.218750vw;
  height: calc(4.21875vw);
  height: calc(4.21875 * var(--layout-unit));
}

.desktop .application-card-5,
.home-content .application-card-5 {
  left: 72.864583vw;
  left: calc(72.86458vw);
  left: calc(72.86458 * var(--layout-unit));
  top: 10.833333vw;
  top: calc(10.83333vw);
  top: calc(10.83333 * var(--layout-unit));
  width: 14.479167vw;
  width: calc(14.47917vw);
  width: calc(14.47917 * var(--layout-unit));
  height: 25.416667vw;
  height: calc(25.41667vw);
  height: calc(25.41667 * var(--layout-unit));
}

.desktop .application-card-5 .application-caption,
.home-content .application-card-5 .application-caption {
  left: 0.625000vw;
  left: calc(.625vw);
  left: calc(.625 * var(--layout-unit));
  top: 20.000000vw;
  top: calc(20vw);
  top: calc(20 * var(--layout-unit));
  width: 13.020833vw;
  width: calc(13.02083vw);
  width: calc(13.02083 * var(--layout-unit));
  height: 4.218750vw;
  height: calc(4.21875vw);
  height: calc(4.21875 * var(--layout-unit));
}

html[lang="en"] .desktop .application-caption h3,
html[lang="en"] .home-content .application-caption h3,
html[lang="ru"] .desktop .application-caption h3,
html[lang="ru"] .home-content .application-caption h3 {
  width: calc(100% - 1.45833vw);
  width: calc(100% - 1.45833vw);
  width: calc(100% - (1.45833 * var(--layout-unit)));
  height: auto;
  font-size: 0.825vw;
  font-size: calc(.825vw);
  font-size: calc(.825 * var(--layout-unit));
  line-height: 1.3;
  top: 0.416667vw;
  top: calc(.41667vw);
  top: calc(.41667 * var(--layout-unit));
}

html[lang="en"] .desktop .application-caption p,
html[lang="en"] .home-content .application-caption p,
html[lang="ru"] .desktop .application-caption p,
html[lang="ru"] .home-content .application-caption p {
  top: 1.666667vw;
  top: calc(1.66667vw);
  top: calc(1.66667 * var(--layout-unit));
  width: calc(100% - 1.45833vw);
  width: calc(100% - 1.45833vw);
  width: calc(100% - (1.45833 * var(--layout-unit)));
  height: auto;
  font-size: 0.52vw;
  font-size: calc(.52vw);
  font-size: calc(.52 * var(--layout-unit));
  line-height: 1.25;
}

/* Homepage cards: lift gently while the photo zooms beneath the fixed caption. */
.desktop #applications .application-card,
.home-content #applications .application-card,

.mobile #m-applications .card-grid > article {
  transition: transform 360ms ease, box-shadow 360ms ease;
}

.desktop #applications .application-photo,
.home-content #applications .application-photo,

.mobile #m-applications .application-mobile-photo img {
  transition: transform 1.6s cubic-bezier(0.2, 0.65, 0.3, 1);
}

.desktop #applications .application-caption,
.home-content #applications .application-caption {
  transition: box-shadow 360ms ease;
}

.mobile #m-applications .application-mobile-photo {
  height: 240px;
  overflow: hidden;
  border-radius: 8px;
}

.mobile #m-applications .application-mobile-photo img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
}

@media (hover: hover) and (pointer: fine) {
  .desktop #applications .application-card:hover,
.home-content #applications .application-card:hover,

  .mobile #m-applications .card-grid > article:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 28px rgba(25, 48, 75, 0.16);
  }

  .desktop #applications .application-card:hover .application-photo,
.home-content #applications .application-card:hover .application-photo,

  .mobile #m-applications .card-grid > article:hover .application-mobile-photo img {
    transform: scale(1.045);
  }

  .desktop #applications .application-card:hover .application-caption,
.home-content #applications .application-card:hover .application-caption {
    box-shadow: 0 4px 14px rgba(0, 24, 48, 0.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .desktop #applications .application-card,
.home-content #applications .application-card,

  .desktop #applications .application-photo,

  .home-content #applications .application-photo,

  .desktop #applications .application-caption,

  .home-content #applications .application-caption,

  .mobile #m-applications .card-grid > article,

  .mobile #m-applications .application-mobile-photo img {
    transition: none;
  }

  .desktop #applications .application-card:hover,
.home-content #applications .application-card:hover,

  .desktop #applications .application-card:hover .application-photo,

  .home-content #applications .application-card:hover .application-photo,

  .mobile #m-applications .card-grid > article:hover,

  .mobile #m-applications .card-grid > article:hover .application-mobile-photo img {
    transform: none;
  }
}
  html.legacy-browser .desktop #applications .application-card:hover,
html.legacy-browser .home-content #applications .application-card:hover,
html.legacy-browser .mobile #m-applications .card-grid > article:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 28px rgba(25, 48, 75, 0.16);
  }

  html.legacy-browser .desktop #applications .application-card:hover .application-photo,
html.legacy-browser .home-content #applications .application-card:hover .application-photo,
html.legacy-browser .mobile #m-applications .card-grid > article:hover .application-mobile-photo img {
    transform: scale(1.045);
  }

  html.legacy-browser .desktop #applications .application-card:hover .application-caption,
html.legacy-browser .home-content #applications .application-card:hover .application-caption {
    box-shadow: 0 4px 14px rgba(0, 24, 48, 0.12);
  }