.about-page { background: var(--ink); }

@media (min-width: 769px) {
  .about-hero__title,
  .about-values__visual { margin-left: var(--pc-frame-gutter); }
}

.about-hero {
  position: relative;
  height: calc(700 * var(--pc));
  overflow: hidden;
  background: #05090b;
}

.about-hero__background,
.about-hero__background img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.about-hero__background img { object-fit: cover; }

.about-hero__title {
  position: absolute;
  z-index: 2;
  left: calc(179 * var(--pc));
  top: calc(288 * var(--pc));
  width: calc(1100 * var(--pc));
  color: #fff;
  font-family: var(--display);
  font-size: calc(92 * var(--pc));
  font-weight: 900;
  line-height: calc(110 * var(--pc));
  letter-spacing: calc(-1.84 * var(--pc));
}

.about-hero__title span { display: block; }
.about-hero__title span:first-child { background: linear-gradient(90deg, #fff 38%, #a8a8a8); background-clip: text; color: transparent; }
.about-hero__title span:last-child { background: linear-gradient(180deg, var(--green), #b3e255); background-clip: text; color: transparent; }

.about-direction,
.about-values {
  position: relative;
  overflow: hidden;
  color: #000;
  background:
    radial-gradient(ellipse at -7% 70%, rgba(246,255,143,.16), transparent 34%),
    radial-gradient(ellipse at 102% 28%, rgba(56,137,110,.14), transparent 28%),
    #fefffd;
}

.about-direction { height: calc(901 * var(--pc)); }

.about-direction__copy { position: absolute; inset: 0; }
.about-direction__copy .eyebrow { position: absolute; left: calc(194 * var(--pc)); top: calc(138 * var(--pc)); }
.about-direction__copy h2 {
  position: absolute;
  left: calc(191 * var(--pc));
  top: calc(185 * var(--pc));
  width: calc(730 * var(--pc));
  font-family: var(--display);
  font-size: calc(82 * var(--pc));
  font-weight: 700;
  line-height: calc(88 * var(--pc));
  letter-spacing: calc(-.82 * var(--pc));
}

.about-direction__description {
  position: absolute;
  left: calc(191 * var(--pc));
  top: calc(593 * var(--pc));
  width: calc(680 * var(--pc));
  min-height: calc(124 * var(--pc));
  padding-left: calc(26 * var(--pc));
  border-left: calc(2 * var(--pc)) solid var(--green);
  color: #1a1d20;
  font-size: calc(18 * var(--pc));
  font-weight: 400;
  line-height: 1.55;
  display: flex;
  align-items: center;
}

.about-direction__visual--desktop { position: absolute; inset: 0; }
.about-direction__visual--desktop img { position: absolute; max-width: none; }
.about-direction__main { left: calc(1029 * var(--pc)); top: calc(83 * var(--pc)); width: calc(495 * var(--pc)); height: calc(581 * var(--pc)); }
.about-direction__secondary { left: calc(1351 * var(--pc)); top: calc(537 * var(--pc)); width: calc(393 * var(--pc)); height: calc(263 * var(--pc)); }
.about-direction__bolt { left: calc(957 * var(--pc)); top: calc(134 * var(--pc)); width: calc(122 * var(--pc)); height: calc(122 * var(--pc)); }
.about-direction__check { left: calc(1500 * var(--pc)); top: calc(395 * var(--pc)); width: calc(79 * var(--pc)); height: calc(78 * var(--pc)); }
.about-direction__visual-mobile { display: none; }

.about-values { height: calc(949 * var(--pc)); }

.about-values__visual {
  position: absolute;
  left: calc(198 * var(--pc));
  top: calc(156 * var(--pc));
  width: calc(540 * var(--pc));
  height: calc(627 * var(--pc));
}

.about-values__visual img { width: 100%; height: 100%; object-fit: contain; }
.about-values__content { position: absolute; inset: 0; }
.about-values__content > .eyebrow { position: absolute; left: calc(909 * var(--pc)); top: calc(242 * var(--pc)); }
.about-values__content > h2 {
  position: absolute;
  left: calc(909 * var(--pc));
  top: calc(286 * var(--pc));
  width: calc(835 * var(--pc));
  font-family: var(--display);
  font-size: calc(82 * var(--pc));
  font-weight: 700;
  line-height: calc(88 * var(--pc));
  letter-spacing: calc(-.82 * var(--pc));
}

.about-values__grid {
  position: absolute;
  left: calc(909 * var(--pc));
  top: calc(449 * var(--pc));
  width: calc(730 * var(--pc));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(40 * var(--pc));
}

.value-item {
  display: flex;
  align-items: flex-start;
  gap: calc(20 * var(--pc));
  height: calc(118 * var(--pc));
}

.value-item__icon {
  display: block;
  width: calc(106 * var(--pc));
  height: calc(106 * var(--pc));
  max-width: none;
  margin: calc(-25 * var(--pc));
  flex: none;
  object-fit: contain;
}

.value-item h3 {
  font-family: var(--display);
  font-size: calc(28 * var(--pc));
  font-weight: 900;
  line-height: calc(40 * var(--pc));
  white-space: nowrap;
}

.value-item p {
  width: calc(237 * var(--pc));
  margin-top: calc(8 * var(--pc));
  color: #1a1d20;
  font-size: calc(16 * var(--pc));
  line-height: 1.38;
}

@media (min-width: 769px) {
  .about-direction__copy,
  .about-direction__visual--desktop,
  .about-values__content { left: var(--pc-frame-gutter); }
}

@media (max-width: 768px) {
  .about-hero { height: calc(600 * var(--m)); }
  .about-hero__title {
    left: calc(22 * var(--m));
    top: calc(397 * var(--m));
    width: calc(341 * var(--m));
    font-size: calc(54 * var(--m));
    line-height: calc(56 * var(--m));
    letter-spacing: calc(-1.62 * var(--m));
  }

  .about-hero__title span:last-child { max-width: calc(310 * var(--m)); }

  .about-direction {
    height: calc(960 * var(--m));
    background: #fff;
  }

  .about-direction::before,
  .about-values::before {
    content: '';
    position: absolute;
    z-index: 0;
    left: calc(-375 * var(--m));
    top: calc(-163.651 * var(--m));
    width: calc(779 * var(--m));
    height: calc(382.4 * var(--m));
    border-radius: 50%;
    background: rgba(252,151,54,.05);
    filter: blur(calc(90 * var(--m)));
    pointer-events: none;
  }

  .about-direction::after,
  .about-values::after {
    content: '';
    position: absolute;
    z-index: 0;
    left: calc(180 * var(--m));
    top: calc(799.015 * var(--m));
    width: calc(400 * var(--m));
    height: calc(219.733 * var(--m));
    border-radius: 50%;
    background: rgba(252,151,54,.07);
    filter: blur(calc(80 * var(--m)));
    pointer-events: none;
  }

  .about-direction__copy,
  .about-values__content { z-index: 2; }

  .about-direction__copy .eyebrow { left: calc(20 * var(--m)); top: calc(57 * var(--m)); }
  .about-direction__copy h2 {
    left: calc(20 * var(--m));
    top: calc(106 * var(--m));
    width: calc(353 * var(--m));
    height: calc(189 * var(--m));
    font-family: var(--font);
    font-size: calc(40 * var(--m));
    line-height: calc(44 * var(--m));
    letter-spacing: calc(-.4 * var(--m));
  }

  .about-direction__description {
    left: calc(20 * var(--m));
    top: calc(315 * var(--m));
    width: calc(350 * var(--m));
    min-height: calc(114 * var(--m));
    padding: 0;
    border: 0;
    font-size: calc(16 * var(--m));
    line-height: calc(28 * var(--m));
    display: block;
  }

  .about-direction__visual--desktop { display: none; }
  .about-direction__visual-mobile {
    position: static;
    z-index: 1;
    display: block;
    width: calc(382 * var(--m));
    height: calc(449 * var(--m));
    max-width: none;
    margin: calc(498 * var(--m)) auto 0;
  }

  html[lang="zh-CN"] .about-direction,
  html[lang="zh-TW"] .about-direction { height: calc(820 * var(--m)); }
  html[lang="zh-CN"] .about-direction::after,
  html[lang="zh-TW"] .about-direction::after { top: calc(659 * var(--m)); }
  html[lang="zh-CN"] .about-direction__copy h2,
  html[lang="zh-TW"] .about-direction__copy h2 { height: auto; }
  html[lang="zh-CN"] .about-direction__description,
  html[lang="zh-TW"] .about-direction__description {
    top: calc(234 * var(--m));
    min-height: 0;
  }
  html[lang="zh-CN"] .about-direction__visual-mobile,
  html[lang="zh-TW"] .about-direction__visual-mobile { margin-top: calc(360 * var(--m)); }

  .about-values {
    height: calc(960 * var(--m));
    background: #fff;
  }

  .about-values__visual {
    z-index: 1;
    left: 0;
    top: 0;
    width: calc(390 * var(--m));
    height: calc(230 * var(--m));
  }

  .about-values__content > .eyebrow { left: calc(20 * var(--m)); top: calc(288 * var(--m)); }
  .about-values__content > h2 {
    left: calc(20 * var(--m));
    top: calc(350 * var(--m));
    width: calc(284 * var(--m));
    height: calc(44.016 * var(--m));
    font-family: var(--font);
    font-size: calc(40 * var(--m));
    line-height: calc(44 * var(--m));
    letter-spacing: calc(-.4 * var(--m));
  }

  .about-values__grid {
    left: calc(20 * var(--m));
    top: calc(433.688 * var(--m));
    width: calc(350 * var(--m));
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .value-item {
    gap: calc(20 * var(--m));
    width: calc(350 * var(--m));
    height: calc(120 * var(--m));
  }

  .value-item__icon {
    width: calc(106 * var(--m));
    height: calc(106 * var(--m));
    margin: calc(-25 * var(--m));
  }

  .value-item h3 {
    font-family: var(--font);
    font-size: calc(28 * var(--m));
    line-height: calc(40 * var(--m));
  }

  .value-item p {
    width: calc(237 * var(--m));
    margin-top: calc(8 * var(--m));
    font-size: calc(16 * var(--m));
    line-height: normal;
  }

  .value-item:nth-child(2) p { width: calc(269 * var(--m)); }
}