:root { --layout-unit: 1vw; --header-unit: 1vw; --site-header-height: 72px; --site-font: "Noto Sans SC", "Noto Sans", sans-serif; }
/* Keep the PSD frame fixed while the photograph gently zooms inside it. */
.about-photo-frame {
  margin: 0;
  overflow: hidden;
  isolation: isolate;
}

.desktop .about-photo-frame,
.home-content .about-photo-frame {
  position: absolute;
  top: 6.5625vw;
  top: calc(6.5625vw);
  top: calc(6.5625 * var(--layout-unit));
  left: 49.479167vw;
  left: calc(49.47917vw);
  left: calc(49.47917 * var(--layout-unit));
  width: 37.864583vw;
  width: calc(37.86458vw);
  width: calc(37.86458 * var(--layout-unit));
  height: 25.78125vw;
  height: calc(25.78125vw);
  height: calc(25.78125 * var(--layout-unit));
  border-radius: 1.666667vw;
  border-radius: calc(1.66667vw);
  border-radius: calc(1.66667 * var(--layout-unit));
}

.about-photo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
  transform: scale(1);
  transition: transform 750ms cubic-bezier(0.2, 0.65, 0.35, 1);
}

.mobile .about-photo-frame {
  margin-bottom: 24px;
  border-radius: 16px;
}

.mobile .about-photo-frame img {
  height: auto;
  max-height: 480px;
}

@media (hover: hover) and (pointer: fine) {
  .about-photo-frame:hover img {
    transform: scale(1.035);
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-photo-frame img {
    transition: none;
  }

  .about-photo-frame:hover img {
    transform: none;
  }
}

/* Factory photography remains clipped to its original PSD frame during zoom. */
.factory-photo-frame {
  margin: 0;
  overflow: hidden;
  isolation: isolate;
}

.desktop .factory-photo-frame,
.home-content .factory-photo-frame {
  position: absolute;
  top: 6.979167vw;
  top: calc(6.97917vw);
  top: calc(6.97917 * var(--layout-unit));
  left: 12.239583vw;
  left: calc(12.23958vw);
  left: calc(12.23958 * var(--layout-unit));
  width: 36.25vw;
  width: calc(36.25vw);
  width: calc(36.25 * var(--layout-unit));
  height: 26.458333vw;
  height: calc(26.45833vw);
  height: calc(26.45833 * var(--layout-unit));
  border-radius: 3.645833vw 0 0 0;
  border-radius: calc(3.64583vw) 0 0 0;
  border-radius: calc(3.64583 * var(--layout-unit)) 0 0 0;
}

.factory-photo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
  transform: scale(1);
  transition: transform 1500ms cubic-bezier(0.2, 0.65, 0.35, 1);
}

.mobile .factory-photo-frame {
  margin-bottom: 24px;
  border-radius: 36px 0 0 0;
}

.mobile .factory-photo-frame img {
  height: auto;
  max-height: 480px;
}

.factory-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  border: 2px solid #ee8301;
  border-radius: 5px;
  color: #ee8301;
  background: transparent;
  font-family: "Noto Sans SC", sans-serif;
  transition: transform 250ms ease, background-color 250ms ease, box-shadow 250ms ease;
}

.factory-action::before {
  content: "›";
  font-size: 1.45em;
  line-height: 1;
  transition: transform 250ms ease;
}

.desktop .factory-action,
.home-content .factory-action {
  position: absolute;
  top: 33.677083vw;
  top: calc(33.67708vw);
  top: calc(33.67708 * var(--layout-unit));
  left: 52.03125vw;
  left: calc(52.03125vw);
  left: calc(52.03125 * var(--layout-unit));
  width: 13.125vw;
  width: calc(13.125vw);
  width: calc(13.125 * var(--layout-unit));
  height: 2.916667vw;
  height: calc(2.91667vw);
  height: calc(2.91667 * var(--layout-unit));
  font-size: 1.145833vw;
  font-size: calc(1.14583vw);
  font-size: calc(1.14583 * var(--layout-unit));
  line-height: 1.6;
}

.mobile .factory-action {
  padding: 10px 20px;
  font-size: 14px;
}

.factory-action:focus-visible {
  outline: 2px solid #023b80;
  outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .factory-photo-frame:hover img {
    transform: scale(1.045);
  }

  .factory-action:hover {
    transform: translateY(-3px);
    background-color: #fff4e5;
    box-shadow: 0 7px 18px rgba(238,131,1,0.14902);
  }

  .factory-action:hover::before {
    transform: translateX(3px);
  }
}

.factory-action:active {
  transform: translateY(0);
  box-shadow: none;
}

html[lang="en"] .desktop .factory-action,
html[lang="en"] .home-content .factory-action,
html[lang="ru"] .desktop .factory-action,
html[lang="ru"] .home-content .factory-action {
  font-size: 0.9vw;
  font-size: calc(.9vw);
  font-size: calc(.9 * var(--layout-unit));
}

@media (prefers-reduced-motion: reduce) {
  .factory-photo-frame img,
  .factory-action,
  .factory-action::before {
    transition: none;
  }

  .factory-photo-frame:hover img,
  .factory-action:hover,
  .factory-action:hover::before {
    transform: none;
  }
}
  html.legacy-browser .about-photo-frame:hover img {
    transform: scale(1.035);
  }
  html.legacy-browser .factory-photo-frame:hover img {
    transform: scale(1.045);
  }

  html.legacy-browser .factory-action:hover {
    transform: translateY(-3px);
    background-color: #fff4e5;
    box-shadow: 0 7px 18px rgba(238,131,1,0.14902);
  }

  html.legacy-browser .factory-action:hover::before {
    transform: translateX(3px);
  }