/* Banner */
.home-banner__mobile-background { display: none; }
.home-banner {
  position: relative;
  min-height: calc(1500 * var(--design-unit));
}
.home-banner__image {
  position: absolute;
  width: 100%;
  max-width: none;
  height: auto;
  top: calc(-1 * var(--design-unit));
  left: 0;
  pointer-events: none;
}
.home-banner__glass {
  position: absolute;
  inset: calc(-1 * var(--design-unit)) 0 0;
  overflow: hidden;
  pointer-events: none;
}
.home-banner__glass-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 1920 / 1823;
  opacity: 0;
}
.home-banner__glass--ready .home-banner__glass-canvas {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .home-banner__glass { display: none; }
}
.home-banner__content {
  position: relative;
  padding-top: calc(380 * var(--design-unit));
  text-align: center;
  margin-left: calc(60 * var(--design-unit));
}
.home-banner__title {
  font: 800 calc(170 * var(--design-unit)) / calc(157 * var(--design-unit))
    var(--font-display);
}
.home-banner__title span {
  display: block;
}
.home-banner__title span:last-child {
  margin-top: calc(21.91 * var(--design-unit));
  line-height: calc(103 * var(--design-unit));
}
.home-banner__description {
  font-size: calc(18 * var(--design-unit));
  line-height: 1.8;
  max-width: calc(548 * var(--design-unit));
  margin: calc(141.1 * var(--design-unit)) auto 0;
  min-height: calc(142.11 * var(--design-unit));
}
.home-banner__scroll {
  position: absolute;
  top: calc(1180 * var(--design-unit));
  left: calc(989.5 * var(--design-unit));
  display: flex;
  align-items: center;
  gap: calc(5 * var(--design-unit));
}
.home-banner__scroll img {
  width: calc(7.89 * var(--design-unit));
  height: auto;
}
.home-banner__scroll span {
  font-size: calc(15 * var(--design-unit));
  font-weight: 500;
  letter-spacing: calc(4.35 * var(--design-unit));
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  line-height: calc(40 * var(--design-unit));
}
html[lang^="zh-"] .home-banner__scroll span {
  text-orientation: upright;
  transform: none;
}
@media (prefers-reduced-motion: no-preference) {
  html.fonts-pending .home-banner__content,
  html.fonts-pending .home-banner__image {
    animation-play-state: paused;
  }
  .home-banner__content {
    animation: banner-enter 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .home-banner__image {
    animation: banner-image 1.4s ease-out both;
  }
  @keyframes banner-enter {
    from {
      opacity: 0;
      translate: 0 40px;
    }
    to {
      opacity: 1;
      translate: 0 0;
    }
  }
  @keyframes banner-image {
    from {
      opacity: 0;
      scale: 1.03;
    }
    to {
      opacity: 1;
      scale: 1;
    }
  }
}

/* One continuous backdrop avoids a seam between Experience and About
   when the PC layout scales to fractional pixels. */
.home-introduction {
  background: linear-gradient(
    to bottom,
    transparent calc(1219 * var(--design-unit)),
    #fff calc(1219 * var(--design-unit))
  );
}
.home-experience {
  position: relative;
  min-height: calc(1466 * var(--design-unit));
  padding-top: 0;
}
.home-experience__label {
  margin-left: calc(183 * var(--design-unit));
  position: relative;
}
.home-experience__label em {
  /* 0:359: keep the O's portion of the gradient across the 584px text layer. */
  background-image: linear-gradient(90deg, #ff2575, #ffd932);
  background-size: calc(67.385 * var(--design-unit)) 100%;
  background-position: calc(-17.5 * var(--design-unit)) 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.home-experience__grid {
  display: grid;
  grid-template-columns: calc(514.318 * var(--design-unit)) calc(
      514.318 * var(--design-unit)
    );
  column-gap: calc(138.1 * var(--design-unit));
  row-gap: calc(94.44 * var(--design-unit));
  margin-left: calc(376.54 * var(--design-unit));
  margin-top: calc(185.35 * var(--design-unit));
}
.home-experience__card {
  position: relative;
  min-height: calc(498.82 * var(--design-unit));
  background: url("../../images/pages/home/experience-card.svg") center/100%
    100% no-repeat;
  text-align: center;
}
.home-experience__card--continue {
  background-image: url("../../images/pages/home/experience-continue-card.svg");
}
.home-experience__card--participate {
  top: calc(173.58 * var(--design-unit));
}
.home-experience__card--return {
  top: calc(159.55 * var(--design-unit));
}
.home-experience__icon {
  position: absolute;
  max-width: none;
  height: auto;
  pointer-events: none;
}
.home-experience__card--seen .home-experience__icon {
  width: calc(338.93 * var(--design-unit));
  left: calc(85.5 * var(--design-unit));
  top: calc(-88.1 * var(--design-unit));
  transform: rotate(-170.84deg) scaleY(-1);
}
.home-experience__card--participate .home-experience__icon {
  width: calc(512 * var(--design-unit));
  left: calc(-3 * var(--design-unit));
  top: calc(-104.73 * var(--design-unit));
}
.home-experience__card--continue .home-experience__icon {
  width: calc(551.42 * var(--design-unit));
  left: calc(-18.3 * var(--design-unit));
  top: calc(-105.63 * var(--design-unit));
  transform: rotate(13.25deg);
}
.home-experience__card--return .home-experience__icon {
  width: calc(550 * var(--design-unit));
  left: calc(-19 * var(--design-unit));
  top: calc(-110.96 * var(--design-unit));
}
.home-experience__copy {
  padding: calc(204.28 * var(--design-unit)) calc(40 * var(--design-unit))
    calc(45 * var(--design-unit));
}
.home-experience__number {
  font: 500 calc(28 * var(--design-unit)) / calc(30 * var(--design-unit))
    var(--font-display);
  letter-spacing: calc(5.04 * var(--design-unit));
  color: #f55838;
}
.home-experience__card--participate .home-experience__number {
  color: #7df538;
}
.home-experience__card--continue .home-experience__number {
  color: #c64aff;
}
.home-experience__card--return .home-experience__number {
  color: #ff2575;
}
.home-experience__copy h3 {
  font: 400 calc(45 * var(--design-unit)) / calc(61 * var(--design-unit))
    var(--font-display);
  letter-spacing: calc(1.8 * var(--design-unit));
  white-space: nowrap;
}
.home-experience__description {
  font-size: calc(25 * var(--design-unit));
  line-height: calc(30 * var(--design-unit));
  max-width: calc(252 * var(--design-unit));
  margin: calc(10 * var(--design-unit)) auto 0;
}
/* About: semantic accordion beside the original photo composition. */
.home-about {
  position: relative;
  color: var(--color-ink);
  min-height: calc(1625.43 * var(--design-unit));
  padding-top: calc(95 * var(--design-unit));
}
.home-about__intro > .section-label {
  margin-left: calc(185.97 * var(--design-unit));
}
.home-about__intro > .section-label strong {
  font-weight: 600;
}
.home-about__title {
  margin-left: calc(350 * var(--design-unit));
  margin-top: calc(83.26 * var(--design-unit));
}
.home-about__description {
  font-size: calc(18 * var(--design-unit));
  line-height: 1.8;
  font-weight: 500;
  max-width: calc(770 * var(--design-unit));
  margin-left: calc(356 * var(--design-unit));
  margin-top: calc(46.94 * var(--design-unit));
}
.home-about__body {
  display: grid;
  grid-template-columns: calc(858 * var(--design-unit)) calc(
      718 * var(--design-unit)
    );
  column-gap: calc(164 * var(--design-unit));
  margin: calc(81.2 * var(--design-unit)) 0 0 calc(180 * var(--design-unit));
}
.home-about__accordion {
  padding-top: 0;
}
.home-about__item {
  position: relative;
  padding: calc(46 * var(--design-unit)) 0 calc(44.2 * var(--design-unit));
}
.home-about__item:first-child {
  padding-top: 0;
  padding-bottom: calc(53.2 * var(--design-unit));
}
.home-about__item summary {
  display: grid;
  grid-template-columns: calc(67 * var(--design-unit)) 1fr calc(
      42.79 * var(--design-unit)
    );
  column-gap: calc(108 * var(--design-unit));
  align-items: center;
  cursor: pointer;
  list-style: none;
  min-height: calc(65 * var(--design-unit));
}
.home-about__item summary::-webkit-details-marker {
  display: none;
}
.home-about__item summary > span:not(.home-about__arrow) {
  font: 700 calc(25 * var(--design-unit)) / 1.2 var(--font-display);
  white-space: nowrap;
  transition: font-size 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-about__item[open]:not(.home-about__item--closing) summary > span:not(.home-about__arrow) {
  font-size: calc(28 * var(--design-unit));
}
.home-about__icon {
  width: calc(67 * var(--design-unit));
  height: auto;
  scale: 1;
  transition: scale 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-about__item:nth-of-type(2) .home-about__icon {
  width: calc(57 * var(--design-unit));
  margin-left: calc(3.5 * var(--design-unit));
}
.home-about__item:nth-of-type(3) .home-about__icon {
  width: calc(63.5 * var(--design-unit));
  margin-left: calc(1.75 * var(--design-unit));
}
.home-about__item:nth-of-type(4) .home-about__icon {
  width: calc(64 * var(--design-unit));
  margin-left: calc(1 * var(--design-unit));
}
.home-about__arrow {
  position: relative;
  width: calc(42.79 * var(--design-unit));
  height: calc(8.77 * var(--design-unit));
  justify-self: end;
  translate: 0 0;
  transition: translate 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-about__arrow img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(8.77 * var(--design-unit));
  height: auto;
  transform: translate(-50%, -50%) rotate(-90deg);
  transition: opacity 0.3s ease, clip-path 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-about__arrow .home-about__arrow-short {
  left: calc(100% - 11.395 * var(--design-unit));
}
.home-about__arrow-long,
.home-about__item[open]:not(.home-about__item--closing) .home-about__arrow-short {
  opacity: 0;
}
.home-about__item[open]:not(.home-about__item--closing) .home-about__arrow-long {
  opacity: 1;
  clip-path: inset(0);
}
.home-about__arrow-long {
  clip-path: inset(calc(20 * var(--design-unit)) 0 0);
}
.home-about__item[open]:not(.home-about__item--closing) .home-about__arrow {
  translate: calc(6 * var(--design-unit)) 0;
}
@media (hover: hover) and (pointer: fine) {
  .home-about__item:hover .home-about__icon {
    scale: 1.08;
  }
}
.home-about__item:has(summary:focus-visible) .home-about__icon {
  scale: 1.08;
}
.home-about__panel {
  overflow: hidden;
}
.home-about__item p {
  font-size: calc(18 * var(--design-unit));
  line-height: 1.6;
  font-weight: 500;
  max-width: calc(572 * var(--design-unit));
  margin: 0 0 0 calc(175 * var(--design-unit));
}
@media (min-width: 769px) {
  /* Keep “room to evolve.” together on the second line of the English copy. */
  html:lang(en) .home-about__item:last-of-type p {
    max-width: calc(520 * var(--design-unit));
  }
}
.home-about__divider {
  position: relative;
  width: calc(858.8 * var(--design-unit));
  height: max(1px, calc(0.8 * var(--design-unit)));
  background: #472f52;
}
.home-about__divider:last-child {
  display: none;
}
.home-about__visual {
  position: relative;
  width: calc(718 * var(--design-unit));
  height: calc(935 * var(--design-unit));
  overflow: hidden;
  background: #eee;
  z-index: 3;
}
.home-about__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 0;
  transform: translateX(calc(-32 * var(--design-unit)));
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.home-about__photo--active {
  opacity: 1;
  transform: translateX(0);
  z-index: 1;
}
.home-about__photo[data-image-order="4"] {
  object-fit: fill;
}
/* Crop the transparent lower edges of the original Figma exports inside the frame. */
.home-about__photo--planning {
  height: calc(100% * 683 / 664);
}
.home-about__photo--digital {
  height: calc(100% * 576 / 566);
}
.home-about__photo--leaving {
  transform: translateX(calc(40 * var(--design-unit)));
  z-index: 2;
}
.home-about__gallery {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(1258 * var(--design-unit));
  max-width: none;
  height: auto;
}
/* Services */
.home-services {
  position: relative;
  min-height: calc(1449.57 * var(--design-unit));
  padding-top: calc(334.57 * var(--design-unit));
}
.home-services__background {
  position: absolute;
  left: 0;
  top: calc(-130.43 * var(--design-unit));
  width: calc(1920 * var(--design-unit));
  max-width: none;
  height: auto;
  pointer-events: none;
}
.home-services__intro {
  position: relative;
}
.home-services__intro > .section-label {
  margin-left: calc(180 * var(--design-unit));
}
.home-services__title {
  margin: calc(85.2 * var(--design-unit)) 0 0 calc(330 * var(--design-unit));
}
.home-services__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, calc(375 * var(--design-unit)));
  column-gap: calc(115.5 * var(--design-unit));
  margin: calc(164 * var(--design-unit)) 0 0 calc(275 * var(--design-unit));
}
.home-services__card {
  --service-reveal-duration: 700ms;
  position: relative;
  min-height: calc(605 * var(--design-unit));
  padding: calc(63 * var(--design-unit)) calc(48 * var(--design-unit))
    calc(60 * var(--design-unit));
  background: #40210f;
}
.home-services__card--interaction {
  --reveal-delay: 320ms;
  background: transparent
    url("../../images/pages/home/service-card-background.svg") center/100% 100%
    no-repeat;
}
.home-services__icon {
  position: absolute;
  left: calc(143 * var(--design-unit));
  top: calc(-76 * var(--design-unit));
  width: calc(260 * var(--design-unit));
  max-width: none;
  height: auto;
}
.home-services__card--interaction .home-services__icon {
  width: calc(258 * var(--design-unit));
  left: calc(148 * var(--design-unit));
  top: calc(-78 * var(--design-unit));
}
.home-services__card--operations .home-services__icon {
  width: calc(296 * var(--design-unit));
  left: calc(169 * var(--design-unit));
  top: calc(-94 * var(--design-unit));
}
.home-services__card--operations {
  --reveal-delay: 640ms;
}
.home-services__number {
  display: block;
  font-size: calc(160 * var(--design-unit));
  line-height: 1;
  font-weight: 300;
  color: #ffffff4d;
  margin-left: calc(-30 * var(--design-unit));
}
.home-services__card h3 {
  font-size: calc(38 * var(--design-unit));
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: calc(1.52 * var(--design-unit));
  margin-top: calc(24 * var(--design-unit));
  white-space: nowrap;
}
.home-services__card h3 span {
  background: linear-gradient(to left, #fc0, #ff9000 54.808%, #f55838);
  background-clip: text;
  color: transparent;
}
.home-services__card > p {
  font-size: calc(18 * var(--design-unit));
  line-height: calc(30 * var(--design-unit));
  margin-top: calc(20.8 * var(--design-unit));
  max-width: calc(296 * var(--design-unit));
}
.home-services__card--content > p {
  line-height: 1.6;
  max-width: calc(260 * var(--design-unit));
}

/* Keep the description's normal space, so headings, arrows and card height stay put. */
@media (hover: hover) and (pointer: fine) {
  html.has-js .home-services__card > p {
    opacity: 0;
    translate: 0 calc(18 * var(--design-unit));
    transition: opacity var(--service-reveal-duration) ease,
      translate var(--service-reveal-duration) cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  html.has-js .home-services__card--engaged > p {
    opacity: 1;
    translate: 0 0;
  }
}
.home-services__link {
  display: flex;
  align-items: center;
  min-height: calc(44 * var(--design-unit));
  width: calc(55 * var(--design-unit));
  position: absolute;
  left: calc(48 * var(--design-unit));
  bottom: calc(56 * var(--design-unit));
}
.home-services__arrow {
  position: relative;
  width: calc(42.79 * var(--design-unit));
  height: calc(9 * var(--design-unit));
  transform: translateX(0);
  transition: transform 0.36s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.home-services__arrow img {
  position: absolute;
  right: 0;
  top: 50%;
  height: auto;
  transform: translateY(-50%);
  transition: opacity 0.28s ease,
    clip-path 0.36s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.home-services__arrow-default {
  width: calc(22.79 * var(--design-unit));
}
.home-services__arrow-active {
  width: calc(42.79 * var(--design-unit));
  opacity: 0;
  /* Reveal the shaft gradually, keeping the original arrowhead undistorted. */
  clip-path: inset(0 0 0 calc(20 * var(--design-unit)));
}
.home-services__card--active .home-services__arrow {
  transform: translateX(calc(8 * var(--design-unit)));
}
.home-services__card--active .home-services__arrow-default {
  opacity: 0;
  transition-delay: 0.06s;
}
.home-services__card--active .home-services__arrow-active {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transition-delay: 0.06s, 0s;
}
@media (prefers-reduced-motion: reduce) {
  .home-about__photo,
  .home-about__icon,
  .home-about__arrow,
  .home-about__item summary > span:not(.home-about__arrow),
  .home-about__arrow img,
  html.has-js .home-services__card > p,
  .home-services__arrow,
  .home-services__arrow img {
    transition: none;
  }
  .home-about__item:hover .home-about__icon,
  .home-about__item:has(summary:focus-visible) .home-about__icon {
    scale: 1;
  }
  html.has-js .home-services__card > p { opacity: 1; translate: 0 0; }
}
/* Process */
.home-process {
  position: relative;
  min-height: calc(1688 * var(--design-unit));
  background: #fff;
  color: var(--color-ink);
  padding-top: calc(339 * var(--design-unit));
}
.home-process__letter {
  position: absolute;
  left: calc(-536 * var(--design-unit));
  top: calc(-748 * var(--design-unit));
  font: 700 calc(1100 * var(--design-unit)) / 1.2 var(--font-display);
  letter-spacing: calc(143 * var(--design-unit));
  color: #fa721e;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.home-process__image {
  position: absolute;
  width: calc(960 * var(--design-unit));
  max-width: none;
  height: calc(972 * var(--design-unit));
  left: calc(960 * var(--design-unit));
  top: calc(-72 * var(--design-unit));
  object-fit: fill;
}
.home-process__intro {
  position: relative;
}
.home-process__intro > .section-label {
  margin-left: calc(178 * var(--design-unit));
}
.home-process__title {
  margin: calc(85.2 * var(--design-unit)) 0 0 calc(330 * var(--design-unit));
}
.home-process__description {
  max-width: calc(769 * var(--design-unit));
  font-size: calc(20 * var(--design-unit));
  line-height: calc(30 * var(--design-unit));
  margin: calc(50 * var(--design-unit)) 0 0 calc(332 * var(--design-unit));
  font-weight: 500;
}
.home-process__timeline {
  position: relative;
  margin-top: calc(214 * var(--design-unit));
  min-height: calc(469 * var(--design-unit));
}
.home-process__line {
  position: absolute;
  max-width: none;
  height: auto;
  pointer-events: none;
}
.home-process__line--glow {
  width: calc(2199 * var(--design-unit));
  left: calc(-95.5 * var(--design-unit));
  top: calc(-26.9 * var(--design-unit));
}
.home-process__line--soft {
  width: calc(2482 * var(--design-unit));
  left: calc(-399 * var(--design-unit));
  top: calc(-7.5 * var(--design-unit));
}
.home-process__line--core {
  width: calc(2482 * var(--design-unit));
  left: calc(-399 * var(--design-unit));
  top: calc(-2 * var(--design-unit));
}
.home-process__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-left: calc(225 * var(--design-unit));
  width: calc(1500 * var(--design-unit));
}
.home-process__step {
  position: relative;
  padding-top: calc(118 * var(--design-unit));
  text-align: center;
  --step-color: #ff2575;
}
.home-process__step--build {
  --step-color: #f60;
}
.home-process__step--evolve {
  --step-color: #45be00;
}
.home-process__node {
  position: absolute;
  width: calc(119 * var(--design-unit));
  max-width: none;
  height: auto;
  left: 50%;
  transform: translateX(-50%);
  top: calc(-60 * var(--design-unit));
}
.home-process__stem {
  position: absolute;
  top: calc(31.5 * var(--design-unit));
  left: 50%;
  height: calc(86 * var(--design-unit));
  width: auto;
}
.home-process__symbol {
  position: relative;
  width: calc(91 * var(--design-unit));
  min-height: calc(91 * var(--design-unit));
  margin: auto;
}
.home-process__circle {
  width: calc(91 * var(--design-unit));
  height: auto;
}
.home-process__icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(46 * var(--design-unit));
  height: auto;
}
.home-process__step--build .home-process__icon {
  width: calc(45 * var(--design-unit));
}
.home-process__step--evolve .home-process__icon {
  width: calc(53 * var(--design-unit));
}
.home-process__icon-detail {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(12 * var(--design-unit));
  height: auto;
}
.home-process__number {
  display: block;
  margin-top: calc(26 * var(--design-unit));
  font: 700 calc(20 * var(--design-unit)) / calc(26 * var(--design-unit))
    var(--font-display);
  letter-spacing: calc(3.6 * var(--design-unit));
  color: var(--step-color);
}
.home-process__step h3 {
  font: 700 calc(36 * var(--design-unit)) / calc(42 * var(--design-unit))
    var(--font-display);
  letter-spacing: calc(2.16 * var(--design-unit));
  margin-top: calc(9 * var(--design-unit));
}
.home-process__step--script h3 {
  margin-top: calc(16 * var(--design-unit));
}
html[lang^="zh-"] .home-process__step h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(84 * var(--design-unit));
  white-space: nowrap;
}
.home-process__step p {
  font-size: calc(18 * var(--design-unit));
  line-height: calc(30 * var(--design-unit));
  font-weight: 500;
  max-width: calc(271 * var(--design-unit));
  margin: calc(41 * var(--design-unit)) auto 0;
}
.home-process__step--script p {
  margin-top: calc(34 * var(--design-unit));
}
.home-process__step--build p {
  max-width: calc(254 * var(--design-unit));
}
.home-process__step--evolve p {
  max-width: calc(224 * var(--design-unit));
}
/* Balance short Chinese copy to avoid a single trailing character. */
html[lang^="zh-"] .home-experience__description,
html[lang^="zh-"] .home-process__step p {
  text-wrap: balance;
}
.home-process__underline {
  position: absolute;
  width: calc(76 * var(--design-unit));
  height: auto;
  left: 50%;
  transform: translateX(-50%);
  top: calc(373.5 * var(--design-unit));
}
html[lang^="zh-"] .home-process__underline {
  /* A centered single line ends 21px higher inside the same 84px title slot. */
  top: calc(352.5 * var(--design-unit));
}
/* Careers */
.home-careers {
  position: relative;
  min-height: calc(1764 * var(--design-unit));
  padding-top: calc(355 * var(--design-unit));
}
.home-careers__background {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(1920 * var(--design-unit));
  max-width: none;
  height: auto;
}
.home-careers__backdrop {
  position: absolute;
  left: calc(-80 * var(--design-unit));
  top: calc(33 * var(--design-unit));
  width: calc(2475.65 * var(--design-unit));
  max-width: none;
  height: auto;
  pointer-events: none;
}
.home-careers__intro {
  position: relative;
}
.home-careers__intro > .section-label {
  margin-left: calc(178 * var(--design-unit));
}
.home-careers__title {
  margin: calc(84.83 * var(--design-unit)) 0 0 calc(336 * var(--design-unit));
}
.home-careers__subtitle {
  font: 400 calc(34 * var(--design-unit)) / calc(56 * var(--design-unit))
    var(--font-display);
  margin: calc(4 * var(--design-unit)) 0 0 calc(334 * var(--design-unit));
}
.home-careers__email {
  display: block;
  position: relative;
  font-size: calc(56 * var(--design-unit));
  font-weight: 600;
  line-height: calc(60 * var(--design-unit));
  margin: calc(39.37 * var(--design-unit)) 0 0 calc(677 * var(--design-unit));
  white-space: nowrap;
}
.home-careers__email:hover {
  color: #ff9000;
}
.home-careers__grid {
  display: grid;
  grid-template-columns: repeat(5, calc(314 * var(--design-unit)));
  grid-template-rows: repeat(2, minmax(calc(424 * var(--design-unit)), auto));
  gap: calc(14 * var(--design-unit)) calc(7 * var(--design-unit));
  margin-left: calc(320 * var(--design-unit));
  position: relative;
  margin-top: calc(43 * var(--design-unit));
}
.home-careers__card {
  grid-column: span 2;
  position: relative;
  min-height: calc(424 * var(--design-unit));
  isolation: isolate;
  overflow: hidden;
  --copy-top: calc(50 * var(--design-unit));
}
.home-careers__card--content {
  grid-column: 2 / span 2;
}
.home-careers__card--design {
  grid-column: 4 / span 2;
}
.home-careers__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: -1;
  transform: scale(1);
  transition: transform 0.6s ease-out;
}
.home-careers__copy {
  padding: var(--copy-top) calc(43 * var(--design-unit))
    calc(50 * var(--design-unit));
}
.home-careers__copy h3 {
  font-size: calc(42 * var(--design-unit));
  line-height: calc(41 * var(--design-unit));
  font-weight: 300;
  max-width: calc(351 * var(--design-unit));
}
.home-careers__copy > p {
  font-size: calc(18 * var(--design-unit));
  line-height: 1.6;
  max-width: calc(290.64 * var(--design-unit));
  margin-top: calc(42 * var(--design-unit));
}
.home-careers__role {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--design-unit));
  font-size: calc(20 * var(--design-unit));
  line-height: calc(40 * var(--design-unit));
  margin-top: calc(39 * var(--design-unit));
  color: #fff;
}
.home-careers__role img {
  width: calc(22.79 * var(--design-unit));
  height: auto;
  transform: translateX(0);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-careers__card--coordination,
.home-careers__card--content,
.home-careers__card--design {
  --copy-top: calc(73 * var(--design-unit));
}
.home-careers__card--coordination .home-careers__copy p {
  max-width: calc(228 * var(--design-unit));
  margin-top: calc(53.26 * var(--design-unit));
}
.home-careers__card--coordination .home-careers__role {
  margin-top: calc(38 * var(--design-unit));
}
.home-careers__card--content .home-careers__copy > p {
  margin-top: calc(53.26 * var(--design-unit));
  max-width: calc(228 * var(--design-unit));
}
.home-careers__card--design .home-careers__copy > p {
  margin-top: calc(42 * var(--design-unit));
  max-width: calc(228 * var(--design-unit));
}
.home-careers__card--content .home-careers__role {
  margin-top: calc(29 * var(--design-unit));
}
.home-careers__card--design .home-careers__role {
  margin-top: calc(29 * var(--design-unit));
}
/* One native button covers each card, including the photograph and whitespace. */
.home-careers__open {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
}
.home-careers__sr-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.home-careers__card:has(.home-careers__open:focus-visible) {
  outline: 2px solid #ff9000;
  outline-offset: 4px;
}
.home-careers__open:focus-visible {
  outline: none;
}
/* Desktop only: the title starts on the vertical centreline; details travel up
   from below the crop while the photograph zooms inside the card boundary. */
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  .home-careers__card:is(:hover, :has(.home-careers__open:focus-visible)) .home-careers__photo {
    transform: scale(1.15);
  }
  .home-careers__copy h3 {
    transform: translateY(calc(171 * var(--design-unit) - var(--copy-top)));
    transition: transform 1.05s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .home-careers__copy > p,
  .home-careers__role {
    opacity: 0;
    transform: translateY(calc(260 * var(--design-unit)));
    transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.65s ease;
  }
  .home-careers__role img {
    transform: translateX(calc(-10 * var(--design-unit)));
  }
  .home-careers__card:is(:hover, :has(.home-careers__open:focus-visible)) .home-careers__copy h3,
  .home-careers__card:is(:hover, :has(.home-careers__open:focus-visible)) .home-careers__copy > p,
  .home-careers__card:is(:hover, :has(.home-careers__open:focus-visible)) .home-careers__role {
    transform: translateY(0);
    opacity: 1;
  }
  .home-careers__card:is(:hover, :has(.home-careers__open:focus-visible)) .home-careers__copy > p {
    transition-delay: 0.08s;
  }
  .home-careers__card:is(:hover, :has(.home-careers__open:focus-visible)) .home-careers__role {
    transition-delay: 0.16s;
  }
  .home-careers__card:is(:hover, :has(.home-careers__open:focus-visible)) .home-careers__role img {
    transform: translateX(0);
    transition-delay: 0.25s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-careers__photo,
  .home-careers__copy h3,
  .home-careers__copy > p,
  .home-careers__role,
  .home-careers__role img {
    transition: none;
  }
  .home-careers__card:is(:hover, :has(.home-careers__open:focus-visible)) .home-careers__copy > p,
  .home-careers__card:is(:hover, :has(.home-careers__open:focus-visible)) .home-careers__role,
  .home-careers__card:is(:hover, :has(.home-careers__open:focus-visible)) .home-careers__role img {
    transition-delay: 0s;
  }
}
.home-careers__wash {
  position: absolute;
  left: calc(178 * var(--design-unit));
  top: calc(981 * var(--design-unit));
  width: calc(1742 * var(--design-unit));
  min-height: calc(612 * var(--design-unit));
  border-radius: calc(500 * var(--design-unit)) 0 0 0;
  background: white;
  filter: blur(calc(2 * var(--design-unit)));
  mix-blend-mode: overlay;
}
/* Contact */
.home-contact {
  position: relative;
  min-height: calc(892 * var(--design-unit));
  padding-top: calc(336 * var(--design-unit));
}
.home-contact__content {
  text-align: center;
}
.home-contact h2 {
  font: 800 calc(170 * var(--design-unit)) / calc(157 * var(--design-unit))
    var(--font-display);
}
.home-contact__description {
  font: 400 calc(34 * var(--design-unit)) / calc(44 * var(--design-unit))
    var(--font-display);
  max-width: calc(943 * var(--design-unit));
  margin: calc(21 * var(--design-unit)) auto 0;
}
.home-contact__location {
  display: flex;
  width: fit-content;
  margin-inline: auto;
  gap: calc(17.67 * var(--design-unit));
  align-items: center;
  justify-content: center;
  margin-top: calc(56 * var(--design-unit));
  font-size: calc(18 * var(--design-unit));
  font-weight: 200;
  line-height: calc(33 * var(--design-unit));
  white-space: nowrap;
}
.home-contact__location img {
  flex-shrink: 0;
  width: calc(30.36 * var(--design-unit));
  height: auto;
}
.home-contact__location span {
  width: auto;
  text-align: center;
}
/* Full-page role overlay: Figma 29:14. The live homepage remains underneath. */
html:has(.home-role-dialog[open]) {
  overflow: hidden;
}
.home-role-dialog {
  /* Figma 29:14 is 1920 × 2208. Scale by width only; the dialog scrolls. */
  --design-unit: calc(100vw / 1920);
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.home-role-dialog::backdrop {
  background: rgba(13, 5, 1, 0.9);
  -webkit-backdrop-filter: blur(calc(3 * var(--design-unit)));
  backdrop-filter: blur(calc(3 * var(--design-unit)));
}
/* Natural document flow preserves the Figma spacing and can grow with copy. */
.home-role-dialog__sheet {
  position: relative;
  width: 100%;
  min-height: calc(2208 * var(--design-unit));
  padding-top: calc(358 * var(--design-unit));
  padding-bottom: calc(329.5 * var(--design-unit));
}
.home-role-dialog__bar {
  position: absolute;
  top: calc(223 * var(--design-unit));
  left: calc(180 * var(--design-unit));
  right: calc(165 * var(--design-unit));
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: calc(29 * var(--design-unit));
}
.home-role-dialog__label {
  font: 500 calc(24 * var(--design-unit)) / 1.2 var(--font-display);
  letter-spacing: calc(3.12 * var(--design-unit));
}
.home-role-dialog__back {
  display: inline-flex;
  align-items: center;
  gap: calc(17.21 * var(--design-unit));
  color: #fff;
  transform: translateY(calc(-4 * var(--design-unit)));
  font: 400 calc(20 * var(--design-unit)) / calc(40 * var(--design-unit)) var(--font-body);
}
.home-role-dialog__back span {
  min-width: calc(127 * var(--design-unit));
}
.home-role-dialog__back img {
  width: calc(42.7873 * var(--design-unit));
  height: auto;
  transform: scaleX(-1) translateY(calc(-2.4 * var(--design-unit)));
}
.home-role-dialog__body {
  margin-left: calc(338 * var(--design-unit));
  width: calc(1230 * var(--design-unit));
}
.home-role-dialog__title {
  width: 100%;
  min-height: calc(238 * var(--design-unit));
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  color: #fff;
  font: 700 calc(126 * var(--design-unit)) / calc(119 * var(--design-unit)) var(--font-display);
}
.home-role-dialog__title:focus {
  outline: none;
}
.home-role-dialog__meta {
  display: grid;
  grid-template-columns: calc(284 * var(--design-unit)) auto;
  gap: calc(11 * var(--design-unit)) 0;
  margin-top: calc(63 * var(--design-unit));
  margin-left: calc(5 * var(--design-unit));
  font: 500 calc(18 * var(--design-unit)) / calc(33 * var(--design-unit)) var(--font-body);
}
.home-role-dialog__meta-item {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--design-unit));
  min-height: calc(46 * var(--design-unit));
}
.home-role-dialog__meta-item--team {
  grid-column: 1 / -1;
}
.home-role-dialog__meta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(38 * var(--design-unit));
}
.home-role-dialog__location {
  width: calc(30.3594 * var(--design-unit));
  height: auto;
}
.home-role-dialog__team {
  width: calc(39 * var(--design-unit));
  max-width: none;
  height: auto;
}
/* The employment icon is built from the four CSS shapes in Figma 29:1012. */
.home-role-dialog__briefcase {
  position: relative;
  flex: 0 0 calc(50 * var(--design-unit));
  height: calc(41 * var(--design-unit));
  color: #f5a338;
}
.home-role-dialog__briefcase::before,
.home-role-dialog__briefcase::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  border: calc(3 * var(--design-unit)) solid currentColor;
}
.home-role-dialog__briefcase::before {
  left: calc(14 * var(--design-unit));
  top: 0;
  width: calc(22 * var(--design-unit));
  height: calc(12 * var(--design-unit));
  border-radius: calc(4 * var(--design-unit)) calc(4 * var(--design-unit)) 0 0;
}
.home-role-dialog__briefcase::after {
  left: 0;
  top: calc(9 * var(--design-unit));
  width: calc(50 * var(--design-unit));
  height: calc(32 * var(--design-unit));
  border-radius: calc(3 * var(--design-unit));
}
.home-role-dialog__briefcase span::before,
.home-role-dialog__briefcase span::after {
  content: "";
  position: absolute;
  top: calc(21 * var(--design-unit));
  width: calc(11 * var(--design-unit));
  height: calc(5 * var(--design-unit));
  background: currentColor;
  border-radius: calc(1 * var(--design-unit));
}
.home-role-dialog__briefcase span::before { left: calc(11 * var(--design-unit)); }
.home-role-dialog__briefcase span::after { left: calc(28 * var(--design-unit)); }
.home-role-dialog__intro {
  width: calc(612 * var(--design-unit));
  min-height: calc(121 * var(--design-unit));
  margin-top: calc(43 * var(--design-unit));
  margin-left: calc(57 * var(--design-unit));
  font: 500 calc(18 * var(--design-unit)) / 1.6 var(--font-body);
}
.home-role-dialog[data-active-role="design"] .home-role-dialog__intro {
  width: calc(503 * var(--design-unit));
}
.home-role-dialog[data-active-role="coordination"] .home-role-dialog__intro {
  width: calc(520 * var(--design-unit));
}
.home-role-dialog__details {
  margin-top: calc(83 * var(--design-unit));
  margin-left: calc(6 * var(--design-unit));
}
.home-role-dialog__section {
  position: relative;
  width: calc(987 * var(--design-unit));
  min-height: calc(248 * var(--design-unit));
}
.home-role-dialog__section + .home-role-dialog__section {
  margin-top: calc(37 * var(--design-unit));
}
.home-role-dialog__section + .home-role-dialog__section + .home-role-dialog__section {
  margin-top: calc(36 * var(--design-unit));
}
.home-role-dialog__section h3 {
  min-height: calc(50 * var(--design-unit));
  font: 700 calc(41 * var(--design-unit)) / 0.9 var(--font-display);
  color: #fff;
}
.home-role-dialog__section ul {
  width: calc(967 * var(--design-unit));
  margin-top: calc(16 * var(--design-unit));
  margin-left: calc(20 * var(--design-unit));
  list-style: none;
  font: 400 calc(18 * var(--design-unit)) / calc(30 * var(--design-unit)) var(--font-body);
}
.home-role-dialog__section li {
  position: relative;
  padding-left: calc(31 * var(--design-unit));
}
.home-role-dialog__section li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(11 * var(--design-unit));
  width: calc(9 * var(--design-unit));
  height: calc(9 * var(--design-unit));
  background: url("../../images/pages/home/role-bullet.svg") center / contain no-repeat;
}
.home-role-dialog__section-icon {
  position: absolute;
  height: auto;
  max-width: none;
}
.home-role-dialog__section-icon--duties {
  left: calc(-84 * var(--design-unit));
  top: calc(3 * var(--design-unit));
  width: calc(36 * var(--design-unit));
}
.home-role-dialog__section-icon--requirements {
  left: calc(-92 * var(--design-unit));
  top: calc(-4 * var(--design-unit));
  width: calc(67.0049 * var(--design-unit));
}
.home-role-dialog__section-icon--benefits {
  left: calc(-90 * var(--design-unit));
  top: calc(-4 * var(--design-unit));
  width: calc(45 * var(--design-unit));
}
.home-role-dialog__apply {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--design-unit));
  margin-top: calc(12.5 * var(--design-unit));
  margin-left: calc(-8 * var(--design-unit));
  color: #fff;
  font: 500 calc(28 * var(--design-unit)) / calc(40 * var(--design-unit)) var(--font-body);
}
.home-role-dialog__apply span {
  min-width: calc(140 * var(--design-unit));
}
.home-role-dialog__apply img {
  width: calc(22.7873 * var(--design-unit));
  height: auto;
  transform: translateY(calc(-1.28 * var(--design-unit)));
}
.home-role-dialog__back:hover,
.home-role-dialog__back:focus-visible,
.home-role-dialog__apply:hover,
.home-role-dialog__apply:focus-visible {
  text-decoration: underline;
  text-decoration-color: #fff;
  text-underline-offset: calc(5 * var(--design-unit));
}
@media (prefers-reduced-motion: no-preference) {
  .home-role-dialog[open]::backdrop { animation: role-backdrop-enter 0.3s ease-out; }
  .home-role-dialog[open] .home-role-dialog__sheet { animation: role-content-enter 0.3s ease-out; }
  @keyframes role-backdrop-enter { from { opacity: 0; } to { opacity: 1; } }
  @keyframes role-content-enter { from { opacity: 0; } to { opacity: 1; } }
}

/* Asset exports respect the parent frame clipping in Figma. */
.home-experience__background {
  position: absolute;
  top: calc(306 * var(--design-unit));
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.home-experience__reflection {
  position: absolute;
  top: calc(0.94 * var(--design-unit));
  left: calc(95.74 * var(--design-unit));
  width: calc(325.812 * var(--design-unit));
  height: auto;
  pointer-events: none;
}
.home-experience__grid {
  position: relative;
}
.home-careers__card {
  width: calc(628 * var(--design-unit));
}
.home-careers__card--content {
  width: calc(627 * var(--design-unit));
}
.home-careers__card--coordination {
  width: calc(626 * var(--design-unit));
  margin-left: calc(1 * var(--design-unit));
}
.home-careers__card--content,
.home-careers__card--design {
  margin-left: calc(9 * var(--design-unit));
}
.home-services {
  z-index: 2;
}
.home-process:before {
  content: "";
  position: absolute;
  top: calc(-72 * var(--design-unit));
  /* Overlap the white surfaces to prevent a seam at fractional PC scaling. */
  height: calc(72 * var(--design-unit) + 2px);
  width: 100%;
  background: white;
}
.home-process__step--build .home-process__icon {
  width: calc(41.976 * var(--design-unit));
}
.home-process__step--evolve .home-process__icon {
  width: calc(28.554 * var(--design-unit));
  left: calc(47.7 * var(--design-unit));
  top: calc(32.5 * var(--design-unit));
  transform: none;
}
.home-process__icon-detail {
  width: calc(28.554 * var(--design-unit));
  left: calc(21.9 * var(--design-unit));
  top: calc(32.5 * var(--design-unit));
  transform: rotate(180deg) scaleY(-1);
}
/* The review replaces the old three-line hero with a single Chinese slogan. */
.home-banner__title { font-style: italic; }
html[lang^="zh-"] .home-banner__title {
  font: 400 calc(300 * var(--design-unit)) / calc(320 * var(--design-unit)) "YouSheBiaoTiHei", var(--font-display);
  font-synthesis: none;
}
html[lang^="zh-"] .home-banner__title span { white-space: nowrap; }
html[lang="zh-TW"] .home-banner__title {
  font-family: "MAESO Heading TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-weight: 900;
}
html[lang="zh-TW"] .home-banner__title span { transform: skewX(-8deg) scale(.94, .9); }
html:not([lang="en"]) .home-about__description {
  min-height: calc(64.8 * var(--design-unit));
}
html:not([lang="en"]) .home-experience__description {
  min-height: calc(120 * var(--design-unit));
}
html:not([lang="en"]) .home-services__card h3 {
  white-space: normal;
}

/* Keep foreground photographs above the crossing service background. */
.home-about__visual,
.home-about__gallery {
  z-index: 3;
}
.home-services__grid {
  column-gap: calc(113 * var(--design-unit));
}
.home-services__card--operations {
  margin-left: calc(5 * var(--design-unit));
}
section:focus {
  outline: none;
}

/* Final geometry from the individual Figma layers. */
.home-banner__background {
  position: absolute;
  left: 0;
  top: calc(-1 * var(--design-unit));
  width: 100%;
  height: auto;
  pointer-events: none;
}
.home-experience__card {
  background: none;
  isolation: isolate;
}
.home-experience__plate {
  position: absolute;
  inset: 0;
  width: 100%;
  /* The background must include the copy padding when translations add a line. */
  height: 100%;
  /* Figma glass radius 100: blur the backdrop, including the white boundary,
     beneath the original translucent plate. Foreground artwork stays sharp. */
  border-radius: calc(32 * var(--design-unit));
  -webkit-backdrop-filter: blur(calc(50 * var(--design-unit)));
  backdrop-filter: blur(calc(50 * var(--design-unit)));
  z-index: 1;
}
.home-experience__reflection {
  z-index: 0;
}
.home-experience__icon {
  z-index: 2;
}
.home-experience__copy {
  position: relative;
  z-index: 2;
  padding-top: calc(219.8 * var(--design-unit));
}
.home-experience__copy h3 {
  margin-top: calc(1 * var(--design-unit));
}
.home-experience__card--seen .home-experience__icon {
  left: calc(93.68 * var(--design-unit));
  height: calc(313.214 * var(--design-unit));
  object-fit: cover;
}
.home-services__card--interaction {
  padding-right: calc(31 * var(--design-unit));
}

/* Scroll motion changes only foreground artwork; all original design slots stay fixed. */
.home-process__pulse {
  display: none;
  position: absolute;
  pointer-events: none;
  z-index: 1;
  left: 0;
  top: calc(-1.5 * var(--design-unit));
  width: calc(180 * var(--design-unit));
  height: calc(3 * var(--design-unit));
  color: #ff2575;
  background: linear-gradient(90deg, transparent, currentColor);
  box-shadow: 0 0 calc(10 * var(--design-unit)) currentColor;
}
.home-process__pulse::after {
  content: "";
  position: absolute;
  right: calc(-3 * var(--design-unit));
  top: 50%;
  translate: 0 -50%;
  width: calc(6 * var(--design-unit));
  height: calc(6 * var(--design-unit));
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 calc(8 * var(--design-unit)) calc(3 * var(--design-unit)) currentColor;
}
.home-process__step {
  --stage-delay: 0.633s;
}
.home-process__step--build { --stage-delay: 1.3s; }
.home-process__step--evolve { --stage-delay: 1.967s; }
.home-process__step::before {
  content: "";
  position: absolute;
  top: calc(-2 * var(--design-unit));
  left: 50%;
  translate: -50% 0;
  width: calc(320 * var(--design-unit));
  height: calc(4 * var(--design-unit));
  background: linear-gradient(90deg, transparent, var(--step-color), transparent);
  filter: blur(calc(2 * var(--design-unit)));
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.home-process__node,
.home-process__stem {
  transition: filter 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .home-process__step:hover::before { opacity: 0.85; }
  .home-process__step:hover .home-process__node {
    filter: brightness(1.07) saturate(1.12) drop-shadow(0 0 calc(5 * var(--design-unit)) var(--step-color));
  }
  .home-process__step:hover .home-process__stem { filter: brightness(1.12); }
}
@media (prefers-reduced-motion: no-preference) {
  .home-experience__card.home-motion-ready:not(.is-inview) .home-experience__icon {
    opacity: 0;
    scale: 1.12;
    translate: 0 calc(12 * var(--design-unit));
  }
  .home-experience__card.home-motion-ready.is-inview .home-experience__icon {
    animation: home-icon-arrive 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  .home-process__timeline.home-motion-ready:not(.is-inview) .home-process__symbol,
  .home-process__timeline.home-motion-ready:not(.is-inview) :is(.home-process__number, .home-process__step h3, .home-process__step p, .home-process__underline) {
    opacity: 0;
  }
  .home-process__timeline.home-motion-ready.is-inview .home-process__pulse {
    display: block;
    animation: home-process-light 2.8s linear both;
  }
  .home-process__timeline.home-motion-ready.is-inview .home-process__node {
    animation: home-node-arrive 0.65s ease-out var(--stage-delay) both;
  }
  .home-process__timeline.home-motion-ready.is-inview .home-process__symbol {
    animation: home-icon-arrive 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) var(--stage-delay) both;
  }
  .home-process__timeline.home-motion-ready.is-inview :is(.home-process__number, .home-process__step h3, .home-process__underline) {
    animation: home-stage-copy 0.6s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--stage-delay) + 0.12s) both;
  }
  .home-process__timeline.home-motion-ready.is-inview .home-process__step p {
    animation: home-stage-copy 0.6s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--stage-delay) + 0.20s) both;
  }
  @keyframes home-icon-arrive {
    0% { opacity: 0; scale: 1.12; translate: 0 calc(12 * var(--design-unit)); }
    58% { opacity: 1; scale: 0.985; translate: 0 0; }
    80% { scale: 1.008; }
    100% { opacity: 1; scale: 1; translate: 0 0; }
  }
  @keyframes home-node-arrive {
    0% { opacity: 0.7; scale: 1; }
    38% { opacity: 1; scale: 1.07; }
    100% { opacity: 1; scale: 1; }
  }
  @keyframes home-stage-copy {
    from { opacity: 0; translate: 0 calc(14 * var(--design-unit)); }
    to { opacity: 1; translate: 0 0; }
  }
  /* The bright head travels 2100 design pixels in 2.8s. Delays above match
     the existing node centres at x=475, 975 and 1475 exactly. */
  @keyframes home-process-light {
    0% { translate: calc(-180 * var(--design-unit)) 0; opacity: 0; color: #ff2575; }
    5% { opacity: 0.9; }
    22.619% { color: #ff2575; }
    46.429% { color: #f60; }
    70.238% { color: #45be00; }
    90% { opacity: 0.9; }
    100% { translate: calc(1920 * var(--design-unit)) 0; opacity: 0; color: #45be00; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-process__step::before,
  .home-process__node,
  .home-process__stem { transition: none; }
}

/* PC review, 2026-10-06: green annotations take precedence over the old hero.
   These metrics use the 1920px Chinese artboard; mobile remains independent. */
@media (min-width: 769px) {
  .home-banner__content { padding-top: calc(500 * var(--design-unit)); margin-left: 0; }
  .home-banner__title span:last-child { margin-top: 0; line-height: inherit; }
  .home-banner__description { margin-top: calc(147 * var(--design-unit)); }
  html[lang^="zh-"] .home-banner__content { padding-top: calc(560 * var(--design-unit)); }
  html[lang^="zh-"] .home-banner__description { margin-top: calc(81 * var(--design-unit)); }
  /* Match the visible YouShe SC slogan (1368.6 x 216px at 1920px), not its em box.
     The TC fallback has taller glyphs; keep the shared 320px layout slot unchanged. */
  html:lang(zh-TW) .home-banner__title span {
    transform: translate(calc(-1.7 * var(--design-unit)), calc(-11.234 * var(--design-unit)))
      skewX(-8deg) scale(.907548, .743802);
  }

  /* Feather the reflection artwork only; the card plates and icons stay sharp. */
  .home-experience__reflection { filter: blur(calc(24 * var(--design-unit))); opacity: .75; }
  html:lang(en) .home-experience__card--return .home-experience__description {
    max-width: calc(300 * var(--design-unit));
    line-height: calc(34 * var(--design-unit));
    margin-top: calc(14 * var(--design-unit));
  }
  html[lang^="zh-"] .home-experience__label strong,
  html[lang^="zh-"] .home-about__intro > .section-label strong { font-family: "Montserrat", sans-serif; }
  html[lang^="zh-"] .home-experience__number { font-weight: 400; }
  html[lang^="zh-"] .home-experience__copy h3 {
    font-size: calc(38 * var(--design-unit)); font-weight: 700;
    line-height: calc(61 * var(--design-unit)); letter-spacing: calc(1.52 * var(--design-unit));
  }
  html[lang^="zh-"] .home-experience__description { font-weight: 400; line-height: calc(33 * var(--design-unit)); }
  html[lang^="zh-"] .home-experience__card--continue .home-experience__description { max-width: calc(232 * var(--design-unit)); }
  html[lang^="zh-"] .home-experience__card--return .home-experience__description { max-width: calc(220 * var(--design-unit)); }

  /* Align both photographs to the same section edge, without a white strip. */
  .home-about__visual { align-self: end; }
  /* The exported collage has a pale final pixel row; crop it and overlap the seam. */
  .home-about__gallery { bottom: -1px; clip-path: inset(0 0 calc(1 * var(--design-unit)) 0); }
  html[lang^="zh-"] .home-about { min-height: calc(1593 * var(--design-unit)); }
  html[lang^="zh-"] .home-about__title {
    font-weight: 800;
    font-size: calc(110 * var(--design-unit)); line-height: calc(120 * var(--design-unit));
  }
  html[lang^="zh-"] .home-about__description {
    font-size: calc(22 * var(--design-unit)); font-weight: 400; line-height: calc(32 * var(--design-unit));
    max-width: calc(834 * var(--design-unit)); min-height: calc(64 * var(--design-unit));
    margin-top: calc(64.94 * var(--design-unit));
  }
  html[lang^="zh-"] .home-about__body { margin-top: calc(82 * var(--design-unit)); }
  html[lang^="zh-"] .home-about__item summary > span:not(.home-about__arrow) { font-size: calc(28 * var(--design-unit)); }
  html[lang^="zh-"] .home-about__item p {
    font-size: calc(20 * var(--design-unit)); font-weight: 400; line-height: calc(32 * var(--design-unit));
    max-width: calc(621 * var(--design-unit)); padding-top: calc(20 * var(--design-unit));
  }

  html[lang^="zh-"] .home-services { min-height: calc(1404 * var(--design-unit)); padding-top: calc(393 * var(--design-unit)); }
  html[lang^="zh-"] .home-services__title { font-size: calc(110 * var(--design-unit)); line-height: calc(120 * var(--design-unit)); }
  html[lang^="zh-"] .home-services__grid { margin-top: calc(172 * var(--design-unit)); }
  /* Native image size stays 1920 × 1510; its lower edge meets the arrows. */
  html[lang^="zh-"] .home-services__background { top: calc(-184 * var(--design-unit)); }
  /* Updated CN cards, Figma 99:105 / 99:124 / 99:115. The hover slots stay fixed. */
  html[lang^="zh-"] .home-services__card { padding-top: calc(133 * var(--design-unit)); }
  html[lang^="zh-"] .home-services__icon { top: calc(-36 * var(--design-unit)); }
  html[lang^="zh-"] .home-services__card--interaction .home-services__icon { top: calc(-38 * var(--design-unit)); }
  html[lang^="zh-"] .home-services__card--operations .home-services__icon { top: calc(-54 * var(--design-unit)); }
  html[lang^="zh-"] .home-services__number { font-family: "Manrope", sans-serif; }
  html[lang^="zh-"] .home-services__card h3 { margin-top: calc(34 * var(--design-unit)); }
  html[lang^="zh-"] .home-services__card h3 { font-weight: 600; }
  html[lang^="zh-"] .home-services__card > p {
    font-size: calc(20 * var(--design-unit)); font-weight: 400; line-height: calc(30 * var(--design-unit));
    margin-top: calc(32.4 * var(--design-unit));
  }
  html[lang^="zh-"] .home-services__card--interaction > p,
  html[lang^="zh-"] .home-services__card--operations > p { margin-top: calc(29.4 * var(--design-unit)); }
  html[lang^="zh-"] .home-services__card--operations > p { max-width: calc(255 * var(--design-unit)); }

  html[lang^="zh-"] .home-process { min-height: calc(1668 * var(--design-unit)); padding-top: calc(343 * var(--design-unit)); }
  html[lang^="zh-"] .home-process__letter { font-family: "Montserrat", sans-serif; }
  /* The photo export includes a white left margin; keep it behind the heading. */
  .home-process__intro { z-index: 1; }
  html[lang^="zh-"] .home-process__title {
    width: calc(790 * var(--design-unit)); white-space: nowrap; font-weight: 800;
    font-size: calc(110 * var(--design-unit)); line-height: calc(120 * var(--design-unit));
    margin-top: calc(65.2 * var(--design-unit));
  }
  html[lang^="zh-"] .home-process__description {
    font-size: calc(22 * var(--design-unit)); font-weight: 400; max-width: calc(515 * var(--design-unit));
    min-height: calc(96 * var(--design-unit)); margin-top: calc(43 * var(--design-unit));
  }
  html[lang^="zh-"] .home-process__timeline { margin-top: calc(317 * var(--design-unit)); }
  html[lang^="zh-"] .home-process__number { font-family: "Montserrat", sans-serif; }
  html[lang^="zh-"] .home-process__step h3 {
    font-size: calc(35 * var(--design-unit)); font-weight: 800; line-height: calc(50 * var(--design-unit));
    min-height: calc(50 * var(--design-unit)); letter-spacing: 0;
  }
  html[lang^="zh-"] .home-process__step--script h3 { letter-spacing: calc(2.1 * var(--design-unit)); }
  html[lang^="zh-"] .home-process__step p {
    font-size: calc(20 * var(--design-unit)); font-weight: 400; line-height: calc(30 * var(--design-unit));
    max-width: calc(270 * var(--design-unit)); margin-top: calc(49 * var(--design-unit));
  }
  html[lang^="zh-"] .home-process__step--script p { max-width: calc(276 * var(--design-unit)); margin-top: calc(42 * var(--design-unit)); }
  html[lang^="zh-"] .home-process__step--evolve p { max-width: calc(260 * var(--design-unit)); }
  html[lang^="zh-"] .home-process__underline { top: calc(343 * var(--design-unit)); }
  html[lang^="zh-"] .home-process__step--script .home-process__underline { top: calc(346.5 * var(--design-unit)); }

  html[lang^="zh-"] .home-careers__title { font-size: calc(110 * var(--design-unit)); line-height: calc(116 * var(--design-unit)); }
  html[lang^="zh-"] .home-careers__email { font-family: "Manrope", sans-serif; }
  html[lang^="zh-"] .home-careers__grid { margin-top: calc(42 * var(--design-unit)); }
  html[lang^="zh-"] .home-careers__card { --copy-top: calc(95 * var(--design-unit)); }
  html[lang^="zh-"] .home-careers__card--content,
  html[lang^="zh-"] .home-careers__card--design { --copy-top: calc(98 * var(--design-unit)); }
  html[lang^="zh-"] .home-careers__copy h3 { font-weight: 300; }
  html[lang^="zh-"] .home-careers__copy > p { font-weight: 400; margin-top: calc(38 * var(--design-unit)); max-width: calc(205 * var(--design-unit)); }
  html[lang^="zh-"] .home-careers__card--coordination .home-careers__copy > p { max-width: calc(193 * var(--design-unit)); }
  html[lang^="zh-"] .home-careers__card--content .home-careers__copy > p { max-width: calc(160 * var(--design-unit)); }
  html[lang^="zh-"] .home-careers__card--design .home-careers__copy > p { max-width: calc(228 * var(--design-unit)); }
  html[lang^="zh-"] .home-careers__role { font-weight: 400; margin-top: calc(66 * var(--design-unit)); }

  html[lang^="zh-"] .home-contact { min-height: calc(793 * var(--design-unit)); padding-top: calc(352 * var(--design-unit)); }
  html[lang^="zh-"] .home-contact h2 { font-size: calc(200 * var(--design-unit)); line-height: calc(157 * var(--design-unit)); font-weight: 900; }
  html[lang^="zh-"] .home-contact__description { font-weight: 400; margin-top: calc(63 * var(--design-unit)); }
  html[lang^="zh-"] .home-contact__location { font-size: calc(20 * var(--design-unit)); line-height: calc(50 * var(--design-unit)); font-weight: 300; margin-top: calc(50 * var(--design-unit)); }

  /* Shared Chinese job layout: Figma 64:1851, also used by the other three roles. */
  html[lang^="zh-"] .home-role-dialog__sheet {
    min-height: calc(2279 * var(--design-unit)); padding-top: calc(471 * var(--design-unit));
  }
  html[lang^="zh-"] .home-role-dialog__bar { top: calc(355 * var(--design-unit)); }
  html[lang^="zh-"] .home-role-dialog__back { transform: translateY(calc(-23 * var(--design-unit))); text-align: left; }
  html[lang^="zh-"] .home-role-dialog__label,
  html[lang^="zh-"] .home-role-dialog__back,
  html[lang^="zh-"] .home-role-dialog__meta,
  html[lang^="zh-"] .home-role-dialog__intro { font-weight: 400; }
  html[lang^="zh-"] .home-role-dialog__title {
    font-size: calc(110 * var(--design-unit)); font-weight: 900;
    min-height: calc(116 * var(--design-unit)); line-height: calc(116 * var(--design-unit));
  }
  html[lang^="zh-"] .home-role-dialog__meta { margin-top: calc(82.5 * var(--design-unit)); }
  html[lang^="zh-"] .home-role-dialog__intro {
    min-height: calc(66 * var(--design-unit)); margin-top: calc(38.5 * var(--design-unit)); line-height: 1.6;
  }
  html[lang^="zh-"] .home-role-dialog__details { margin-top: calc(113 * var(--design-unit)); }
  html[lang^="zh-"] .home-role-dialog__section h3 { font-weight: 700; line-height: .9; }
  html[lang^="zh-"] .home-role-dialog__section ul { line-height: calc(30 * var(--design-unit)); }
  html[lang^="zh-"] .home-role-dialog__section + .home-role-dialog__section { margin-top: calc(59 * var(--design-unit)); }
  html[lang^="zh-"] .home-role-dialog__section + .home-role-dialog__section + .home-role-dialog__section { margin-top: calc(56 * var(--design-unit)); }
  html[lang^="zh-"] .home-role-dialog__apply { font-size: calc(24 * var(--design-unit)); font-weight: 400; margin-top: calc(14.5 * var(--design-unit)); }
}