@font-face {
  font-family: "Ark Arial Black";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/ark-arial-black/arial-black.ttf") format("truetype");
}

:root {
  --ark-display: "Noto Sans SC Variable", "Noto Sans SC", sans-serif;
  --ark-body: "Noto Sans SC Variable", "Noto Sans SC", sans-serif;
}

body,
.header,
.legacy-home,
.works-page,
.qr-contact {
  font-family: var(--ark-body) !important;
}

.header nav,
.language-switch,
.edition,
.eyebrow,
.filters,
.legacy-footer {
  font-weight: 600;
  letter-spacing: .075em;
}

.lang-zh .legacy-flow-copy h1,
.lang-zh .legacy-about-grid h2,
.lang-zh .legacy-cap-head h2,
.lang-zh .legacy-contact h2,
.lang-zh .works-heading h1,
.lang-zh .qr-copy h2,
.lang-zh .legacy-mission h3,
.lang-zh .legacy-service-grid h3,
.lang-zh .legacy-focus-grid h3 {
  font-family: var(--ark-display) !important;
  font-weight: 800 !important;
  font-style: normal !important;
  letter-spacing: -.055em !important;
  text-rendering: geometricPrecision;
}

.lang-en .legacy-flow-copy h1,
.lang-en .legacy-about-grid h2,
.lang-en .legacy-cap-head h2,
.lang-en .legacy-contact h2,
.lang-en .works-heading h1,
.lang-en .qr-copy h2,
.lang-en .legacy-mission h3,
.lang-en .legacy-service-grid h3,
.lang-en .legacy-focus-grid h3 {
  font-family: "Ark Arial Black", "Arial Black", sans-serif !important;
  font-weight: 900 !important;
  font-style: normal !important;
  letter-spacing: -.065em !important;
  text-rendering: geometricPrecision;
}

.lang-en .legacy-flow-copy h1 {
  display: block !important;
  width: 88vw !important;
  max-width: 1800px !important;
  margin: 25px auto 28px !important;
  font-size: clamp(36px, 3vw, 86px) !important;
  line-height: 1.06 !important;
  white-space: nowrap !important;
  letter-spacing: -.045em !important;
  text-align: center !important;
  transform: none !important;
  overflow: visible !important;
}

.lang-en .legacy-flow-copy {
  left: 50% !important;
  right: auto !important;
  width: 100vw !important;
  max-width: 100vw !important;
  padding-inline: 4vw !important;
  transform: translateX(-50%) !important;
  align-items: center !important;
  text-align: center !important;
  overflow: visible !important;
}

.lang-en .legacy-flow-copy span {
  margin-inline: auto !important;
  text-align: center !important;
}

.lang-en .legacy-about-grid h2,
.lang-en .legacy-cap-head h2,
.lang-en .legacy-contact h2,
.lang-en .works-heading h1 {
  max-width: 100% !important;
  font-size: clamp(58px, 6.1vw, 108px) !important;
  line-height: 1.02 !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}

.lang-en .legacy-service-grid h3 {
  font-size: clamp(42px, 3.7vw, 66px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.05em !important;
}

.lang-en .legacy-mission h3,
.lang-en .legacy-focus-grid h3 {
  font-size: clamp(26px, 2.1vw, 39px) !important;
  line-height: 1.12 !important;
}

.lang-en .legacy-about-grid h2,
.lang-en .legacy-cap-head h2,
.lang-en .legacy-contact h2,
.lang-en .works-heading h1,
.lang-en .legacy-service-grid h3,
.lang-en .legacy-mission h3,
.lang-en .legacy-focus-grid h3 {
  padding-bottom: .12em !important;
}

.lang-en .legacy-about-grid,
.lang-en .legacy-cap-head,
.lang-en .works-heading {
  overflow: visible !important;
}

.lang-zh .legacy-flow-copy h1 {
  font-size: clamp(74px, 7vw, 118px) !important;
  line-height: .98 !important;
  letter-spacing: -.045em !important;
}

.lang-zh .legacy-about-grid h2,
.lang-zh .legacy-cap-head h2,
.lang-zh .legacy-contact h2,
.lang-zh .works-heading h1 {
  font-size: clamp(76px, 7.5vw, 132px) !important;
  line-height: .92 !important;
}

.lang-zh .legacy-service-grid h3 {
  font-size: clamp(52px, 4.6vw, 82px) !important;
  line-height: 1.06 !important;
}

.lang-zh .legacy-mission h3,
.lang-zh .legacy-focus-grid h3 {
  font-size: clamp(30px, 2.5vw, 46px) !important;
  line-height: 1.08 !important;
}

.legacy-flow-copy span,
.legacy-cap-head > div:last-child,
.legacy-mission p,
.legacy-service-grid p,
.legacy-service-grid li,
.legacy-contact > div > span,
.works-heading > p,
.qr-copy > p {
  font-family: var(--ark-body) !important;
  font-weight: 400;
  line-height: 1.85 !important;
  letter-spacing: .015em;
}

.legacy-flow-copy span { font-size: 17px !important; }
.legacy-cap-head > div:last-child { font-size: 21px !important; }
.legacy-service-grid p { font-size: 18px !important; }
.works-heading > p { font-size: 16px !important; }

@media (max-width: 800px) {
  .lang-zh .legacy-flow-copy h1 {
    font-size: clamp(46px, 13vw, 64px) !important;
    line-height: 1.02 !important;
  }

  .lang-zh .legacy-about-grid h2,
  .lang-zh .legacy-cap-head h2,
  .lang-zh .legacy-contact h2,
  .lang-zh .works-heading h1 {
    font-size: clamp(48px, 15vw, 72px) !important;
    line-height: .98 !important;
  }

  .lang-zh .legacy-service-grid h3 {
    font-size: 43px !important;
  }

  .legacy-flow-copy span,
  .legacy-cap-head > div:last-child,
  .legacy-service-grid p,
  .works-heading > p {
    font-size: 15px !important;
  }

  .lang-en .legacy-flow-copy h1 {
    width: 92vw !important;
    font-size: clamp(34px, 10vw, 48px) !important;
    line-height: 1.06 !important;
    white-space: normal !important;
  }

  .lang-en .legacy-flow-copy {
    padding-inline: 20px !important;
  }

  .lang-en .legacy-about-grid h2,
  .lang-en .legacy-cap-head h2,
  .lang-en .legacy-contact h2,
  .lang-en .works-heading h1 {
    font-size: clamp(44px, 13vw, 66px) !important;
    line-height: .96 !important;
  }

  .lang-en .legacy-service-grid h3 {
    font-size: 39px !important;
    line-height: 1.04 !important;
  }
}