#p31.brand-type-longpage-v51 {
  /* Primitive tokens */
  --brand-longpage-black: #000;
  --brand-longpage-charcoal: #282828;
  --brand-longpage-gray: #8e8e8e;
  --brand-longpage-white: #f4f4f2;
  --brand-longpage-white-64: rgb(244 244 242 / .64);
  --brand-longpage-white-34: rgb(244 244 242 / .34);
  --brand-longpage-white-14: rgb(244 244 242 / .14);

  /* Semantic tokens */
  --brand-longpage-surface: var(--brand-longpage-charcoal);
  --brand-longpage-surface-identity: var(--brand-longpage-black);
  --brand-longpage-ink: var(--brand-longpage-white);
  --brand-longpage-quiet: var(--brand-longpage-gray);
  --brand-longpage-rule: var(--brand-longpage-white-14);
  --brand-longpage-ease: cubic-bezier(.22, .74, .18, 1);

  /* Component tokens */
  --brand-longpage-pad-x: clamp(38px, 3.4vw, 72px);
  --brand-longpage-pad-top: clamp(92px, 8.8vh, 122px);
  --brand-longpage-origin: 50% 50%;
  --brand-longpage-stage-speed: 900ms;

  position: relative;
  display: block !important;
  min-height: 600svh !important;
  width: 100%;
  padding: 0 !important;
  overflow: visible !important;
  background: var(--brand-longpage-surface) !important;
  color: var(--brand-longpage-ink);
  isolation: isolate;
  scroll-snap-align: start;
}

#p31.brand-type-longpage-v51 *,
#p31.brand-type-longpage-v51 *::before,
#p31.brand-type-longpage-v51 *::after {
  box-sizing: border-box;
}

.brand-longpage-v51__sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  background: var(--brand-longpage-surface);
  transition: background-color 900ms var(--brand-longpage-ease);
}

#p31.brand-type-longpage-v51[data-stage='0'] .brand-longpage-v51__sticky {
  background: var(--brand-longpage-surface-identity);
}

.brand-longpage-v51__panel {
  position: absolute;
  inset: 0;
  padding: var(--brand-longpage-pad-top) var(--brand-longpage-pad-x) clamp(52px, 6vh, 72px);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 5vh, 0) scale(.985);
  filter: blur(14px);
  pointer-events: none;
  transition:
    opacity 620ms ease,
    transform var(--brand-longpage-stage-speed) var(--brand-longpage-ease),
    filter var(--brand-longpage-stage-speed) var(--brand-longpage-ease),
    visibility 0s linear 900ms;
}

#p31.brand-type-longpage-v51[data-stage='0'] [data-brand-longpage-panel='0'],
#p31.brand-type-longpage-v51[data-stage='1'] [data-brand-longpage-panel='1'],
#p31.brand-type-longpage-v51[data-stage='2'] [data-brand-longpage-panel='2'],
#p31.brand-type-longpage-v51[data-stage='3'] [data-brand-longpage-panel='3'],
#p31.brand-type-longpage-v51[data-stage='4'] [data-brand-longpage-panel='4'] {
  opacity: 1;
  visibility: visible;
  transform: none;
  filter: blur(0);
  pointer-events: auto;
  transition-delay: 120ms, 0ms, 0ms, 0s;
}

.brand-longpage-v51__identity {
  padding-top: clamp(42px, 5vh, 66px);
}

.brand-longpage-v51__heading {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(560px, 1.8fr);
  align-items: start;
  gap: 7vw;
}

.brand-longpage-v51__heading h2 {
  font-size: clamp(38px, 3.2vw, 62px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.045em;
}

.brand-longpage-v51__identity-copy {
  justify-self: end;
  max-width: 980px;
  text-align: right;
}

.brand-longpage-v51__identity-copy h3 {
  margin: 0 0 14px;
  font-size: clamp(20px, 1.45vw, 28px);
  font-weight: 400;
}

.brand-longpage-v51__identity-copy p {
  margin: 0;
  color: var(--brand-longpage-white-64);
  font-size: clamp(12px, .82vw, 16px);
  line-height: 1.55;
}

.brand-longpage-v51__identity-copy p + p {
  margin-top: 5px;
}

.brand-longpage-v51__formal-logo {
  position: absolute;
  left: 50%;
  top: 54%;
  width: min(72vw, 1380px);
  height: min(60vh, 660px);
  transform: translate(-50%, -42%);
}

.brand-longpage-v51__formal-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-longpage-v51__annotation {
  position: absolute;
  left: var(--brand-longpage-pad-x);
  bottom: 38px;
  color: var(--brand-longpage-white-34);
  font-size: 10px;
  letter-spacing: .2em;
}

.brand-longpage-v51__display {
  overflow: hidden;
}

.brand-longpage-v51__eyebrow {
  margin: 0;
  color: var(--brand-longpage-white-34);
  font-size: 11px;
  letter-spacing: .22em;
}

.brand-longpage-v51__display-word {
  position: absolute;
  left: var(--brand-longpage-pad-x);
  top: 14vh;
  color: var(--brand-longpage-quiet);
  font-family: Hurme, Arial, sans-serif;
  font-size: clamp(110px, 15vw, 290px);
  font-weight: 700;
  line-height: .82;
  letter-spacing: -.075em;
  white-space: nowrap;
}

.brand-longpage-v51__display-word span {
  font-weight: 400;
  letter-spacing: -.06em;
}

.brand-longpage-v51__weight-stack {
  position: absolute;
  left: var(--brand-longpage-pad-x);
  bottom: 5vh;
  display: grid;
  color: var(--brand-longpage-quiet);
  font-family: Hurme, Arial, sans-serif;
  font-size: clamp(94px, 14vw, 276px);
  line-height: .7;
  letter-spacing: -.055em;
}

.brand-longpage-v51__weight-stack .is-light { font-weight: 300; }
.brand-longpage-v51__weight-stack .is-regular { font-weight: 400; }
.brand-longpage-v51__weight-stack .is-bold { font-weight: 700; }

.brand-longpage-v51__display-note {
  position: absolute;
  right: var(--brand-longpage-pad-x);
  bottom: 5.4vh;
  max-width: 290px;
  color: var(--brand-longpage-white-34);
  font-size: 12px;
  line-height: 1.55;
  text-align: right;
}

.brand-longpage-v51__specimen {
  display: grid;
  grid-template-columns: minmax(360px, .7fr) minmax(720px, 1.5fr);
  align-items: center;
  gap: 5vw;
}

.brand-longpage-v51__anatomy {
  display: flex;
  align-items: baseline;
  color: var(--brand-longpage-quiet);
  font-family: Hurme, Arial, sans-serif;
  font-size: clamp(120px, 15vw, 288px);
  line-height: .74;
  letter-spacing: -.075em;
}

.brand-longpage-v51__anatomy strong { font-weight: 700; }
.brand-longpage-v51__anatomy i { margin: 0 .04em; font-style: normal; font-weight: 700; }
.brand-longpage-v51__anatomy span { font-weight: 400; }

.brand-longpage-v51__specimen-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 64px);
  color: var(--brand-longpage-quiet);
}

.brand-longpage-v51__specimen-grid section:nth-child(1) { font-weight: 300; }
.brand-longpage-v51__specimen-grid section:nth-child(2) { font-weight: 400; }
.brand-longpage-v51__specimen-grid section:nth-child(3) { font-weight: 700; }

.brand-longpage-v51__specimen-grid h3 {
  margin: 0 0 24px;
  font-size: clamp(28px, 2.3vw, 46px);
  font-weight: inherit;
}

.brand-longpage-v51__specimen-grid p {
  margin: 0;
  font-size: clamp(22px, 1.8vw, 36px);
  line-height: 1.32;
  letter-spacing: -.03em;
}

.brand-longpage-v51__specimen-grid p + p {
  margin-top: 16px;
}

.brand-longpage-v51__transition {
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
}

.brand-longpage-v51__transition p {
  position: absolute;
  top: var(--brand-longpage-pad-top);
  color: var(--brand-longpage-white-34);
  font-size: 11px;
  letter-spacing: .22em;
}

.brand-longpage-v51__transition-word {
  color: var(--brand-longpage-quiet);
  font-family: Hurme, Arial, sans-serif;
  font-size: clamp(120px, 24vw, 460px);
  font-weight: 700;
  line-height: .78;
  letter-spacing: -.075em;
  transform: scale(.84);
  transition: transform 1600ms var(--brand-longpage-ease), opacity 900ms ease;
}

#p31.brand-type-longpage-v51[data-stage='3'] .brand-longpage-v51__transition-word {
  transform: scale(1);
}

.brand-longpage-v51__transition > span {
  position: absolute;
  bottom: 9vh;
  color: var(--brand-longpage-white-34);
  font-size: 13px;
  letter-spacing: .12em;
}

.brand-longpage-v51__motion {
  padding: 0;
  overflow: hidden;
}

.brand-longpage-v51__motion-stage,
.brand-longpage-v51__letter {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.brand-longpage-v51__glyph {
  grid-area: 1 / 1;
  display: block;
  color: var(--brand-longpage-quiet);
  font-size: min(104vh, 74vw);
  font-weight: 400;
  line-height: .74;
  letter-spacing: -.05em;
  text-align: center;
  transform-origin: var(--brand-longpage-origin);
  user-select: none;
  will-change: transform, opacity, clip-path;
}

.brand-longpage-v51__glyph--base {
  z-index: 1;
  font-family: "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;
  opacity: 0;
  transform: translate3d(0, 48vh, 0) scale(.56);
  transition: opacity 300ms ease, transform 620ms var(--brand-longpage-ease);
}

.brand-longpage-v51__glyph--trace {
  z-index: 3;
  color: transparent;
  font-family: Hurme, Arial, sans-serif;
  -webkit-text-stroke: clamp(1px, .08vw, 1.6px) var(--brand-longpage-white-64);
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transform: scale(1.36);
  transition:
    opacity 220ms ease,
    clip-path 760ms cubic-bezier(.2, .72, .2, 1),
    transform 640ms var(--brand-longpage-ease);
}

.brand-longpage-v51__glyph--brand {
  z-index: 2;
  font-family: Hurme, Arial, sans-serif;
  opacity: 0;
  transform: scale(1.36);
  transition: opacity 520ms ease, transform 720ms var(--brand-longpage-ease);
}

.brand-longpage-v51__motion-stage[data-phase='enter'] .brand-longpage-v51__glyph--base {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.brand-longpage-v51__motion-stage[data-phase='zoom'] .brand-longpage-v51__glyph--base,
.brand-longpage-v51__motion-stage[data-phase='trace'] .brand-longpage-v51__glyph--base {
  opacity: .9;
  transform: scale(1.36);
}

.brand-longpage-v51__motion-stage[data-phase='trace'] .brand-longpage-v51__glyph--trace {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

.brand-longpage-v51__motion-stage[data-phase='brand'] .brand-longpage-v51__glyph--base {
  opacity: 0;
  transform: scale(1.02);
}

.brand-longpage-v51__motion-stage[data-phase='brand'] .brand-longpage-v51__glyph--trace {
  opacity: .54;
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}

.brand-longpage-v51__motion-stage[data-phase='brand'] .brand-longpage-v51__glyph--brand {
  opacity: 1;
  transform: scale(1);
}

.brand-longpage-v51__motion-stage[data-phase='exit'] .brand-longpage-v51__glyph {
  opacity: 0;
  transform: scale(1.92);
  transition-duration: 420ms;
}

.brand-longpage-v51__word {
  position: absolute;
  z-index: 5;
  color: var(--brand-longpage-quiet);
  font-family: Hurme, Arial, sans-serif;
  font-size: clamp(110px, 19vw, 360px);
  font-weight: 700;
  line-height: .8;
  letter-spacing: -.075em;
  opacity: 0;
  transform: scale(.62);
  transition: opacity 620ms ease, transform 980ms var(--brand-longpage-ease);
  user-select: none;
}

.brand-longpage-v51__motion-stage[data-phase='word'] .brand-longpage-v51__glyph {
  opacity: 0;
}

.brand-longpage-v51__motion-stage[data-phase='word'] .brand-longpage-v51__word {
  opacity: 1;
  transform: scale(1);
}

.brand-longpage-v51__progress {
  position: absolute;
  right: var(--brand-longpage-pad-x);
  bottom: 28px;
  z-index: 20;
  display: flex;
  gap: 18px;
  color: var(--brand-longpage-white-34);
  font-size: 10px;
  letter-spacing: .14em;
}

.brand-longpage-v51__progress span {
  transition: color 320ms ease;
}

.brand-longpage-v51__progress span.is-active {
  color: var(--brand-longpage-white);
}

.brand-longpage-v51__live,
.brand-longpage-v51__sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 1120px) and (min-width: 761px) {
  .brand-longpage-v51__heading {
    grid-template-columns: minmax(250px, .72fr) minmax(500px, 1.4fr);
  }

  .brand-longpage-v51__specimen {
    grid-template-columns: .62fr 1.38fr;
  }

  .brand-longpage-v51__specimen-grid {
    gap: 24px;
  }
}

@media (max-width: 760px) {
  #p31.brand-type-longpage-v51 {
    min-height: auto !important;
    overflow: clip !important;
  }

  .brand-longpage-v51__sticky {
    position: relative;
    height: auto;
    min-height: 0;
    overflow: visible;
    background: var(--brand-longpage-surface);
  }

  .brand-longpage-v51__panel {
    position: relative;
    inset: auto;
    min-height: 100svh;
    padding: 92px 20px 54px;
    opacity: 1;
    visibility: visible;
    transform: none;
    filter: none;
    pointer-events: auto;
    transition: none;
  }

  .brand-longpage-v51__identity {
    background: var(--brand-longpage-surface-identity);
  }

  .brand-longpage-v51__heading {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .brand-longpage-v51__heading h2 {
    font-size: 39px;
  }

  .brand-longpage-v51__identity-copy {
    justify-self: stretch;
    text-align: left;
  }

  .brand-longpage-v51__identity-copy p {
    font-size: 13px;
  }

  .brand-longpage-v51__formal-logo {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: 42svh;
    margin-top: 40px;
    transform: none;
  }

  .brand-longpage-v51__annotation {
    left: 20px;
    bottom: 26px;
  }

  .brand-longpage-v51__display-word {
    position: relative;
    left: auto;
    top: auto;
    margin-top: 22vh;
    font-size: 25vw;
    white-space: normal;
  }

  .brand-longpage-v51__display-word span {
    display: block;
    font-size: .7em;
    line-height: .9;
  }

  .brand-longpage-v51__weight-stack {
    position: relative;
    left: auto;
    bottom: auto;
    margin-top: 8vh;
    font-size: 19vw;
  }

  .brand-longpage-v51__display-note {
    position: relative;
    right: auto;
    bottom: auto;
    margin-top: 10vh;
    text-align: left;
  }

  .brand-longpage-v51__specimen {
    display: grid;
    grid-template-columns: 1fr;
    align-content: center;
    gap: 9vh;
  }

  .brand-longpage-v51__anatomy {
    font-size: 34vw;
  }

  .brand-longpage-v51__specimen-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .brand-longpage-v51__specimen-grid h3 {
    margin-bottom: 14px;
    font-size: 22px;
  }

  .brand-longpage-v51__specimen-grid p {
    font-size: 12px;
    line-height: 1.38;
    overflow-wrap: anywhere;
  }

  .brand-longpage-v51__transition-word {
    font-size: 25vw;
  }

  .brand-longpage-v51__transition > span {
    width: calc(100% - 40px);
    font-size: 11px;
    line-height: 1.6;
  }

  .brand-longpage-v51__motion {
    min-height: 100svh;
    padding: 0;
  }

  .brand-longpage-v51__glyph {
    font-size: min(88svh, 110vw);
  }

  .brand-longpage-v51__word {
    font-size: 25vw;
  }

  .brand-longpage-v51__progress {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #p31.brand-type-longpage-v51 {
    min-height: auto !important;
  }

  .brand-longpage-v51__sticky {
    position: relative;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .brand-longpage-v51__panel {
    position: relative;
    min-height: 100svh;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
    pointer-events: auto !important;
    transition: none !important;
  }

  .brand-longpage-v51__identity {
    background: var(--brand-longpage-surface-identity);
  }

  .brand-longpage-v51__motion-stage[data-phase='word'] .brand-longpage-v51__word {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .brand-longpage-v51__progress {
    display: none;
  }
}