:root {
  --ink: #11100e;
  --paper: #fff;
  --pure: #fff;
  --muted: #76736c;
  --line: #c9c5bc;
  --red: #8c241c;
  --gold: #b39454;
  --placeholder: #c7c7c4;
  --placeholder-dark: #969692;
  --shell: min(1740px, calc(100vw - 96px));
  --header-h: 180px;
  --sans: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  --serif: Iowan Old Style, Baskerville, "Times New Roman", "PingFang SC", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; padding-top: var(--header-h); background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
img { display: block; max-width: 100%; }
.shell { width: var(--shell); margin-inline: auto; }

.site-header {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 40;
  width: var(--shell);
  height: var(--header-h);
  margin-inline: auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(-50%);
  background: transparent;
  transition: height 520ms cubic-bezier(.16, 1, .3, 1);
}
.desktop-nav {
  position: relative;
  z-index: 1;
  display: flex;
  gap: clamp(64px, 7vw, 128px);
  align-items: center;
  font-family: "PingFang SC", "PingFang TC", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(22px, 1.7vw, 32px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.035em;
  transform-origin: 50% 50%;
  transition: transform 520ms cubic-bezier(.16, 1, .3, 1);
}
.desktop-nav a, .desktop-nav button {
  border: 0;
  background: none;
  padding: 8px 0;
  cursor: pointer;
  position: relative;
  opacity: .5;
  transition: opacity 220ms ease-out, text-shadow 220ms ease-out;
}
.desktop-nav .is-current { opacity: 1; }
.site-header.is-compact { height: clamp(58px, 5vw, 82px); }
.site-header.is-compact .desktop-nav { transform: scale(.7); }
.site-header.is-compact .desktop-nav a,
.site-header.is-compact .desktop-nav button { opacity: .46; }
.site-header.is-compact .desktop-nav .is-current { opacity: .72; }
.site-header.is-compact .desktop-nav a:hover,
.site-header.is-compact .desktop-nav a:focus-visible,
.site-header.is-compact .desktop-nav button:hover,
.site-header.is-compact .desktop-nav button:focus-visible {
  opacity: 1;
  text-shadow: 0 0 12px rgba(255, 255, 255, .92), 0 0 2px rgba(255, 255, 255, .95);
}
.home-feature { width: calc(100vw - 96px); margin-inline: auto; }
.home-feature__media { position: relative; width: 100%; overflow: hidden; background: var(--pure); }
.home-feature__video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: var(--pure); }
.home-feature .home-feature__sound { position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 36px; height: 36px; margin: 0; border-radius: 50%; background: rgba(255, 255, 255, .82); color: var(--ink); }
.home-feature .home-feature__sound svg { width: 17px; height: 17px; }
.work-intro { padding-top: 0; }
.intro-layout { display: flex; justify-content: center; padding: clamp(54px, 7vw, 110px) 0 clamp(70px, 7vw, 112px); }
.intro-copy { width: 100%; text-align: center; }
.intro-layout h1 { margin: 0; display: flex; justify-content: center; align-items: baseline; gap: .28em; color: var(--ink); font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif; font-size: clamp(34px, 3.2vw, 62px); line-height: 1; letter-spacing: -.05em; font-weight: 500; white-space: nowrap; }
.intro-layout h1 span { color: inherit; font: inherit; letter-spacing: inherit; }
.intro-layout .motto-title {
  margin-inline: auto;
  width: max-content;
  max-width: 86vw;
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(46px, 4.4vw, 74px);
  font-weight: 200;
  letter-spacing: normal;
  white-space: normal;
}
.motto-breath {
  opacity: .2;
  transform-origin: center;
  animation: motto-pulse 7.1s linear infinite;
  will-change: opacity, transform;
}
.motto-breath:nth-child(1) { animation-duration: 7.1s; animation-delay: -1.2s; }
.motto-breath:nth-child(3) { animation-duration: 8.35s; animation-delay: -4.4s; }
.motto-breath:nth-child(4) { animation-duration: 6.45s; animation-delay: -2.7s; }
@keyframes motto-pulse {
  0%   { opacity: .20; transform: scale(.992); animation-timing-function: cubic-bezier(.22, .75, .32, 1); }
  11%  { opacity: .40; transform: scale(1.008); animation-timing-function: cubic-bezier(.65, 0, .78, .34); }
  23%  { opacity: .10; transform: scale(.982); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  39%  { opacity: .50; transform: scale(1.016); animation-timing-function: cubic-bezier(.55, .06, .68, .19); }
  50%  { opacity: .40; transform: scale(1.004); animation-timing-function: cubic-bezier(.22, .72, .3, 1); }
  64%  { opacity: .68; transform: scale(1.02); animation-timing-function: cubic-bezier(.7, 0, .84, 0); }
  73%  { opacity: .18; transform: scale(.98); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  88%  { opacity: .56; transform: scale(1.012); animation-timing-function: cubic-bezier(.6, .04, .78, .28); }
  100% { opacity: .20; transform: scale(.992); }
}
.motto-wu {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.16em;
  height: 1.28em;
  margin-inline: -.03em .01em;
  cursor: pointer;
  outline: none;
}
.motto-wu img {
  width: 118%;
  height: 118%;
  object-fit: contain;
  transition: opacity 120ms ease, transform 260ms cubic-bezier(.16, 1, .3, 1);
}
.motto-wu.is-switching img { opacity: .18; transform: scale(.84); }
.motto-wu:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; }
.motto-heart {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.12em;
  height: 1.18em;
  cursor: pointer;
  outline: none;
}
.motto-heart__text,
.motto-heart__image {
  grid-area: 1 / 1;
  transition: opacity 130ms ease, transform 280ms cubic-bezier(.16, 1, .3, 1);
}
.motto-heart__image {
  width: 112%;
  height: 104%;
  object-fit: contain;
  opacity: 0;
  transform: scale(.82);
}
.motto-heart.is-image .motto-heart__text { opacity: 0; transform: scale(.86); }
.motto-heart.is-image .motto-heart__image { opacity: 1; transform: scale(1); }
.motto-heart.is-switching .motto-heart__image { opacity: .16; transform: scale(.86); }
.motto-heart:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; }

.type-showcase {
  --showcase-gap: clamp(18px, 1.5vw, 30px);
  position: relative;
  width: 100%;
  padding: clamp(18px, 2vw, 38px) 0 clamp(116px, 11vw, 184px);
}
.type-showcase__viewport {
  width: 100%;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 clamp(28px, 5vw, 100px), #000 calc(100% - clamp(28px, 5vw, 100px)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 clamp(28px, 5vw, 100px), #000 calc(100% - clamp(28px, 5vw, 100px)), transparent 100%);
}
.type-showcase.is-dragging .type-showcase__viewport { cursor: grabbing; }
.type-showcase__track {
  display: flex;
  width: max-content;
  gap: var(--showcase-gap);
  will-change: transform;
}
.type-showcase__group {
  display: flex;
  flex: 0 0 auto;
  gap: var(--showcase-gap);
  align-items: center;
}
.type-showcase__item {
  height: clamp(260px, 22vw, 400px);
  width: auto;
  aspect-ratio: var(--showcase-ratio, 1);
  margin: 0;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: visible;
  background: var(--pure);
  opacity: var(--showcase-opacity, 1);
  transform: translate3d(0, var(--showcase-lift, 0), 0) scale(var(--showcase-scale, 1));
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
.type-showcase__item img,
.type-showcase__item video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  background: var(--pure);
  transform: scale(1);
  transform-origin: 50% 50%;
  transition: transform 900ms cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}
.type-showcase__item:hover,
.type-showcase__item:focus-within { z-index: 3; }
.type-showcase__item:hover img,
.type-showcase__item:hover video,
.type-showcase__item:focus-within img,
.type-showcase__item:focus-within video { transform: scale(1.075); }
.type-showcase__toggle {
  position: absolute;
  z-index: 2;
  top: 0;
  right: max(48px, calc((100vw - var(--shell)) / 2));
  width: 36px;
  height: 36px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--ink);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.type-showcase__play { display: none; transform: translateX(1px); }
.type-showcase.is-paused .type-showcase__pause { display: none; }
.type-showcase.is-paused .type-showcase__play { display: block; }

.projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.brand-main { padding-top: clamp(32px, 4vw, 72px); }
.brand-intro {
  width: min(78%, 1600px);
  margin-inline: auto;
}
.brand-intro .brand-intro__panel { position: relative; width: 100%; margin: 0; overflow: hidden; }
.brand-intro .brand-intro__panel > img {
  display: block;
  width: var(--brand-panel-width, 100%);
  max-width: none;
  height: auto;
  margin-left: calc((100% - var(--brand-panel-width, 100%)) / 2);
}
.brand-intro__panel:nth-child(1),
.brand-intro__panel:nth-child(2),
.brand-intro__panel:nth-child(3) { --brand-panel-width: 100%; }
.brand-scatter-story {
  position: relative;
  width: 100vw;
  height: 210vh;
  margin-left: calc(50% - 50vw);
  background: #fff;
}
.brand-scatter-story__stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #fff;
}
.brand-scatter-story__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  transform: scale(.7);
  transform-origin: 50% 50%;
  will-change: opacity, transform;
  pointer-events: none;
}
.brand-scatter-story__frame--gallery { z-index: 2; }
.brand-scatter-story__frame--video {
  z-index: 3;
  inset: 0;
  translate: none;
}
.brand-scatter-story__frame--intro { opacity: 1; transform: scale(1); }
.brand-scatter-story__frame--intro > img {
  position: absolute;
  inset: 0;
  width: min(78%, 1600px);
  height: 100%;
  margin: auto;
  object-fit: contain;
}
.brand-scatter-story__video-board {
  position: absolute;
  inset: 0;
  width: min(78%, 1600px);
  height: 100%;
  margin: auto;
}
.brand-scatter-story__video-board > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.brand-video {
  position: absolute;
  left: 35.98%;
  top: 14%;
  width: 31.77%;
  height: auto;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: clamp(3px, .35vw, 10px);
  background: transparent;
}
.brand-video video { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; opacity: 0; }
.brand-video.has-started video { opacity: 1; }
.brand-video__start {
  position: absolute;
  inset: 50% auto auto 50%;
  width: clamp(38px, 4vw, 72px);
  height: clamp(38px, 4vw, 72px);
  padding: 0;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 1px solid #ffffffb8;
  border-radius: 50%;
  background: #00000052;
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(5px);
}
.brand-video__start svg { width: 48%; fill: currentColor; }
.brand-video.is-playing .brand-video__start { opacity: 0; pointer-events: none; }
.brand-video__controls {
  position: absolute;
  z-index: 2;
  left: 4%;
  right: 4%;
  bottom: 3%;
  display: flex;
  gap: 8px;
  align-items: center;
  opacity: 0;
  transition: opacity 180ms ease-out;
}
.brand-video.has-started .brand-video__controls,
.brand-video:focus-within .brand-video__controls,
.brand-video:hover .brand-video__controls { opacity: 1; }
.brand-video__sound {
  width: 22px;
  height: 22px;
  padding: 4px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: #0008;
  color: #fff;
  cursor: pointer;
}
.brand-video__sound svg { width: 100%; height: 100%; fill: currentColor; stroke: currentColor; stroke-width: 1.5; }
.brand-video__sound-on { display: none; }
.brand-video:not(.is-muted) .brand-video__sound-off { display: none; }
.brand-video:not(.is-muted) .brand-video__sound-on { display: block; }
.brand-video__progress { width: 100%; height: 14px; margin: 0; cursor: pointer; accent-color: #fff; }
.brand-projects {
  margin-top: clamp(72px, 9vw, 150px);
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 29fr) minmax(0, 29fr);
  column-gap: 16px;
  row-gap: 16px;
  align-items: start;
}
.brand-projects .project-card { grid-column: 1; }
.brand-projects .project-cover { height: auto; aspect-ratio: 3 / 4; }
.brand-proof-card {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  width: 82%;
  min-width: 0;
  max-width: 420px;
  margin: 0;
}
.brand-proof-card img { display: block; width: 100%; height: auto; }
.project-card,
.scroll-reveal-item {
  min-width: 0;
  --reveal-y: clamp(84px, 9vw, 138px);
}
.project-card.is-hidden { display: none; }
html.reveal-enabled .project-card,
html.reveal-enabled .scroll-reveal-item {
  opacity: .02;
  transform: translate3d(0, var(--reveal-y), 0) scale(.988);
  transform-origin: 50% 100%;
  transition:
    opacity 650ms cubic-bezier(.22, 1, .36, 1),
    transform 1100ms cubic-bezier(.22, 1, .36, 1);
}
html.reveal-enabled .project-card.is-revealed,
html.reveal-enabled .scroll-reveal-item.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}
html.reveal-enabled .work-page .projects .project-card,
html.reveal-enabled .work-page [data-reveal-group^="work-stage-"] {
  transition:
    opacity 1050ms cubic-bezier(.16, 1, .3, 1),
    transform 1350ms cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform;
}
html.reveal-enabled .work-page .projects .project-card.is-retreating:not(.is-revealed),
html.reveal-enabled .work-page [data-reveal-group^="work-stage-"].is-retreating:not(.is-revealed) {
  opacity: .02;
  transform: translate3d(0, -56px, 0) scale(.94);
  transform-origin: 50% 50%;
}
.project-card a { display: block; }
.project-cover { position: relative; overflow: hidden; background: var(--pure); }
.project-cover--xinyuan, .project-cover--qinggua, .project-cover--jiahe, .project-cover--chengyuan, .project-cover--rongxue, .project-cover--lejing, .project-cover--fragrance, .project-cover--green-character, .project-cover--project-09, .project-cover--project-10, .project-cover--project-11, .project-cover--project-12, .project-cover--project-13, .project-cover--project-14, .project-cover--project-15, .project-cover--project-16, .project-cover--project-17, .project-cover--project-18, .project-cover--project-19, .project-cover--project-20, .project-cover--project-21, .project-cover--project-22, .project-cover--project-23, .project-cover--project-24, .project-empty { height: clamp(420px, 40vw, 720px); }
.project-cover__image { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center center; transition: transform 520ms cubic-bezier(.2,.7,.2,1); }
.project-cover--green-character .project-cover__image, .project-cover--project-09 .project-cover__image, .project-cover--project-10 .project-cover__image, .project-cover--project-11 .project-cover__image, .project-cover--project-12 .project-cover__image, .project-cover--project-13 .project-cover__image { object-fit: contain; }
.project-empty { display: grid; place-items: center; }
.placeholder-circle { display: block; width: 66%; aspect-ratio: 1; border-radius: 50%; background: #c4c4c2; }
.client-marquee {
  width: 100%;
  margin-top: clamp(120px, 14vw, 230px);
  overflow: hidden;
  background: var(--pure);
}

.client-marquee__track {
  display: flex;
  width: max-content;
  animation: client-marquee-scroll 72s linear infinite;
}

.client-marquee__strip {
  display: block;
  flex: 0 0 auto;
  width: max(2700px, 150vw);
  max-width: none;
  height: auto;
}

@keyframes client-marquee-scroll {
  to { transform: translate3d(-50%, 0, 0); }
}

.site-footer { padding-top: 180px; padding-bottom: 36px; }
.site-footer > a { display: flex; justify-content: space-between; padding: 18px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); font-size: 13px; font-weight: 700; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr auto; padding-top: 32px; align-items: end; }
.footer-grid p { margin: 0; font-size: 13px; line-height: 1.45; }
.footer-year { text-align: right; }

.menu-overlay { position: fixed; z-index: 35; inset: 0; background: var(--ink); color: var(--paper); }
.menu-overlay__inner { width: var(--shell); height: 100%; margin: auto; padding: calc(var(--header-h) + 80px) 0 40px; display: flex; flex-direction: column; justify-content: space-between; }
.menu-overlay nav { display: grid; }
.menu-overlay nav a, .menu-overlay nav button { width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid #42413e; background: none; color: inherit; text-align: left; font-size: clamp(42px, 9vw, 120px); letter-spacing: -.05em; cursor: pointer; }
.menu-overlay p { color: #8c8982; font-size: 12px; letter-spacing: .08em; }
.info-panel { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 32px); border: 0; background: var(--paper); color: var(--ink); padding: 0; }
.info-panel::backdrop { background: rgba(17,16,14,.74); }
.info-panel > div { padding: 100px clamp(28px, 8vw, 100px); }
.info-panel h2 { margin: 0 0 60px; font-size: clamp(42px, 8vw, 88px); font-weight: 500; letter-spacing: -.05em; }
.info-panel p { max-width: 480px; margin: 0; font-size: 17px; line-height: 1.85; }
.panel-close { position: absolute; top: 16px; right: 22px; border: 0; background: none; font-size: 36px; font-weight: 200; cursor: pointer; }

/* Detail */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.project-hero-block { width: calc(100vw - 96px); margin: 0 auto; }
.project-hero-media { width: 100%; aspect-ratio: 7 / 3; overflow: hidden; background: #fff; }
.project-hero-media video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.media-sound-toggle { width: 38px; height: 38px; margin: 6px 0 0 auto; padding: 0; display: grid; place-items: center; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.media-sound-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.media-sound-toggle__on { display: none; }
.media-sound-toggle[aria-pressed="true"] .media-sound-toggle__off { display: none; }
.media-sound-toggle[aria-pressed="true"] .media-sound-toggle__on { display: block; }
.detail-page--rongxue .project-media-stack, .detail-page--lejing .project-media-stack, .detail-page--fragrance .project-media-stack, .detail-page--project-09 .project-media-stack { padding-top: 28px; }
.project-copy-board {
  width: 100%;
  margin: 0;
  background: var(--pure);
}
.project-copy-board img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}
.project-intro-copy {
  min-height: clamp(230px, 22vw, 340px);
  padding: clamp(68px, 7vw, 108px) 24px;
  display: grid;
  place-items: center;
  text-align: center;
}
.project-intro-copy p {
  margin: 0;
  color: #898986;
  font-family: var(--sans);
  font-size: clamp(16px, 1.35vw, 22px);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: -.015em;
}
.project-intro-copy span {
  display: block;
}
.project-intro-copy__group + .project-intro-copy__group {
  margin-top: 1.55em;
}
.detail-page--rongxue .project-media-stack,
.detail-page--lejing .project-media-stack {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.detail-page--rongxue .project-media-stack--channel-launch {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: clamp(128px, 17vw, 190px);
}
.detail-page--rongxue .project-media-stack--annual-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: clamp(128px, 17vw, 190px);
  padding-bottom: clamp(80px, 10vw, 160px);
}
.detail-page--rongxue .project-media-stack--annual-summary .project-media-location {
  padding-bottom: clamp(220px, 22vw, 340px);
}
.project-media-location {
  grid-column: 1 / -1;
  margin: 0;
  padding-bottom: clamp(72px, 8vw, 96px);
  color: #888884;
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: .01em;
  text-align: right;
}
.detail-page--rongxue .project-media-item,
.detail-page--lejing .project-media-item {
  width: 100%;
  margin: 0;
}
.detail-page--lejing .project-media-item {
  aspect-ratio: 2 / 3;
  overflow: hidden;
}
.detail-page--lejing .project-media-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.detail-page--fragrance .project-media-stack {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.detail-page--fragrance .project-media-item {
  width: 100%;
  margin: 0;
}
.detail-page--fragrance .project-media-item--landscape {
  grid-column: 1 / -1;
}
.detail-page--fragrance .project-media-stack--portrait-trio {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: 16px;
}
.detail-page--fragrance .project-media-stack--portrait-trio .project-media-item {
  aspect-ratio: 2 / 3;
  overflow: hidden;
}
.detail-page--fragrance .project-media-stack--portrait-trio .project-media-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.detail-page--fragrance .project-media-stack--feature-landscapes {
  grid-template-columns: 1fr;
  padding-top: 16px;
}
.detail-page--fragrance .project-media-stack--fragrance-stills {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: 16px;
}
.detail-page--fragrance .project-media-stack--fragrance-stills .project-media-item {
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.detail-page--fragrance .project-media-stack--fragrance-stills .project-media-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.detail-page--fragrance .project-media-stack--behind-scenes {
  grid-template-columns: 1fr;
  gap: 0;
  padding-top: clamp(120px, 14vw, 190px);
}
.project-behind-scenes-title {
  margin: 0 0 24px;
  color: #777570;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .05em;
}
.detail-page--horizontal-grid .project-media-stack {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  padding-top: 28px;
}
.detail-page--horizontal-grid .project-media-item {
  width: 100%;
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.detail-page--horizontal-grid .project-media-item img,
.detail-page--horizontal-grid .project-media-item .motion-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.detail-page--green-character .project-media-stack {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  padding-top: 28px;
  padding-bottom: clamp(80px, 10vw, 170px);
}
.detail-page--green-character .project-media-item {
  width: 100%;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.detail-page--green-character .project-media-item--featured {
  grid-column: 1 / -1;
}
.detail-page--green-character .project-media-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.detail-page--project-17 .project-media-stack {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  padding-top: 28px;
}
.detail-page--project-17 .project-media-item {
  width: 100%;
  margin: 0;
}
.detail-page--project-17 .project-media-item--wide {
  grid-column: 1 / -1;
}
.detail-page--project-17 .project-media-stack--additional {
  padding-top: 16px;
  padding-bottom: clamp(80px, 10vw, 170px);
}
.detail-page--project-17 .project-media-stack--additional .project-media-item {
  aspect-ratio: 2 / 3;
  overflow: hidden;
}
.detail-page--project-17 .project-media-stack--additional img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.detail-page--project-18 .project-media-stack {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  padding-top: 28px;
  padding-bottom: clamp(80px, 10vw, 170px);
}
.detail-page--project-18 .project-media-item {
  width: 100%;
  margin: 0;
  overflow: hidden;
}
.detail-page--project-18 .project-media-item--portrait {
  aspect-ratio: 2 / 3;
}
.detail-page--project-18 .project-media-item--landscape {
  aspect-ratio: 3 / 2;
}
.detail-page--project-18 .project-media-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.detail-page--project-18 .project-media-item--focus-lower img {
  object-position: center 62%;
}
.detail-page--project-12 .project-media-stack--minicare {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  padding-top: 16px;
}
.detail-page--project-12 .project-media-stack--minicare-wide {
  grid-template-columns: 1fr;
  padding-top: 28px;
}
.detail-page--project-12 .project-media-stack--minicare .project-media-item {
  width: 100%;
  margin: 0;
}
.detail-page--project-12 .project-media-stack--minicare-motion .project-media-item {
  aspect-ratio: 9 / 16;
  overflow: hidden;
}
.detail-page--project-12 .project-media-stack--minicare-motion .motion-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.detail-page--project-12 .project-media-stack--minicare-editorial {
  padding-bottom: 0;
}
.detail-page--project-12 .project-media-stack--minicare-editorial .project-media-item {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #fff;
}
.detail-page--project-12 .project-media-stack--minicare-editorial img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.detail-page--project-12 .project-media-stack--minicare-campaigns {
  padding-bottom: clamp(80px, 10vw, 170px);
}
.detail-page--project-12 .project-media-stack--minicare-campaigns .project-media-item {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #d9d9d9;
}
.detail-page--project-12 .project-media-stack--minicare-campaigns img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.project-media-stack--portrait {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.project-media-stack--wide {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.project-media-stack--portrait .project-media-item,
.project-media-stack--wide .project-media-item {
  width: 100%;
  margin: 0;
}
.detail-page--project-09 .project-media-stack {
  width: min(1960px, calc(100vw - 96px));
  padding-bottom: clamp(80px, 10vw, 170px);
}
.detail-page--project-09 .project-media-stack--xjd-motion {
  padding-bottom: 0;
}
.detail-page--project-09 .project-media-stack--xjd-stills {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  padding-top: 16px;
}
.detail-page--project-10 .project-media-stack { padding-bottom: clamp(80px, 10vw, 170px); }
.detail-page--project-11 .project-media-stack--bag-concepts {
  width: min(1960px, calc(100vw - 96px));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  padding-top: 28px;
  padding-bottom: clamp(80px, 10vw, 170px);
}
.detail-page--project-11 .project-media-stack--bag-concepts .project-media-item {
  width: 100%;
  margin: 0;
}
.detail-page--project-23 .project-media-stack--yikexinqiu {
  width: min(1960px, calc(100vw - 96px));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  padding-top: 28px;
  padding-bottom: clamp(80px, 10vw, 170px);
}
.detail-page--project-23 .project-media-stack--yikexinqiu .project-media-item {
  width: 100%;
  margin: 0;
  overflow: hidden;
}
.detail-page--project-23 .project-media-stack--yikexinqiu .project-media-item:first-child {
  grid-column: 1 / -1;
  width: 62%;
  margin-inline: auto;
}
.detail-page--project-20 .project-media-stack--project-20 {
  width: min(1960px, calc(100vw - 96px));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  padding-top: 16px;
  padding-bottom: 0;
}
.detail-page--project-20 .project-media-stack--project-20 .project-media-item {
  width: 100%;
  margin: 0;
}
.detail-page--project-20 .project-media-stack--project-20 .project-media-item--full {
  grid-column: 1 / -1;
}
.detail-page--project-20 .project-media-stack--project-20-trio {
  width: min(1960px, calc(100vw - 96px));
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  padding-top: 16px;
  padding-bottom: clamp(80px, 10vw, 170px);
}
.detail-page--project-20 .project-media-stack--project-20-trio .project-media-item {
  width: 100%;
  margin: 0;
}
.detail-page--project-20 .project-media-stack--project-20-videos {
  width: min(1960px, calc(100vw - 96px));
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 16px;
  align-items: start;
  padding-top: 28px;
  padding-bottom: 0;
}
.detail-page--project-20 .project-media-stack--project-20-videos .project-media-item {
  width: 100%;
  margin: 0;
}
.detail-page--project-21 .project-21-video {
  width: min(1960px, calc(100vw - 96px));
  padding-top: 28px;
  padding-bottom: clamp(120px, 14vw, 260px);
}
.detail-page--project-21 .project-21-video .project-media-item {
  width: 100%;
  margin: 0;
}
.detail-page--project-21 .project-21-video .motion-media {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
}
.detail-page--project-21 .project-media-stack--project-21 {
  width: min(1960px, calc(100vw - 96px));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  padding-top: 0;
  padding-bottom: clamp(80px, 10vw, 170px);
}
.detail-page--project-21 .project-media-stack--project-21 .project-media-item {
  width: 100%;
  margin: 0;
}
.detail-page--project-21 .project-media-stack--project-21 .project-media-item--lead {
  grid-column: 1 / -1;
  width: 62%;
  margin-inline: auto;
}
.detail-page--project-16 .project-media-stack--project-16 {
  width: min(1960px, calc(100vw - 96px));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  padding-top: 28px;
  padding-bottom: clamp(80px, 10vw, 170px);
}
.detail-page--project-16 .project-media-stack--project-16 .project-media-item {
  width: 100%;
  margin: 0;
  aspect-ratio: 1;
  overflow: hidden;
  background: #fff;
}
.detail-page--project-16 .project-media-stack--project-16 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.project-24-story {
  position: relative;
  height: 625vh;
  margin-top: calc(var(--header-h) * -1);
  background: #fff;
}
.project-24-story__stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #fff;
}
.project-24-story__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(.72);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  pointer-events: none;
}
.project-24-story__frame:first-child {
  opacity: 1;
  transform: scale(1);
}
.project-24-story__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}
.project-24-story__frame:last-child > img {
  top: clamp(64px, 7vh, 86px);
  height: calc(100% - clamp(88px, 10vh, 126px));
}
.project-24-story__frame--scatter {
  display: block;
  transform: scale(.68);
}
.project-24-scatter {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #fff;
  isolation: isolate;
  perspective: 1250px;
  cursor: grab;
  touch-action: pan-y pinch-zoom;
}
.project-24-scatter.is-dragging { cursor: grabbing; }
.project-24-scatter__orbit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  opacity: 0;
  will-change: opacity;
  transition: opacity 520ms cubic-bezier(.22, 1, .36, 1);
}
.project-24-scatter.is-initialized .project-24-scatter__orbit { opacity: 1; }
.project-24-scatter__core {
  --project-core-image: url('media/brand/core/chengyuan-flower-alpha.png');
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(240px, 23vw, 370px);
  aspect-ratio: 1907 / 2171;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  animation: scatter-core-drift 5.8s ease-in-out infinite alternate;
  transition: opacity 520ms cubic-bezier(.16, 1, .3, 1), transform 720ms cubic-bezier(.16, 1, .3, 1);
}
.project-24-scatter__core--back {
  z-index: 1;
  opacity: .34;
  filter: blur(4px);
}
.project-24-scatter__core--front {
  z-index: 100;
  opacity: .78;
}
.project-24-scatter__core::before,
.project-24-scatter__core::after {
  content: '';
  position: absolute;
  inset: 7% 8%;
  z-index: 4;
  border-radius: 48%;
  pointer-events: none;
}
.project-24-scatter__core::before {
  background: repeating-linear-gradient(to bottom, transparent 0 4px, rgba(112, 226, 238, .13) 5px, transparent 7px);
  filter: blur(.25px);
  animation: scatter-core-scan 3.6s linear infinite;
}
.project-24-scatter__core::after {
  border: 1px solid rgba(104, 216, 231, .2);
  box-shadow: 0 0 18px rgba(74, 205, 222, .18), inset 0 0 20px rgba(255, 102, 108, .12);
  filter: blur(1.2px);
  opacity: .58;
  animation: scatter-core-static 6.4s steps(1, end) infinite;
}
.project-24-scatter__core-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: saturate(.72) contrast(.98) brightness(1.12) drop-shadow(0 0 11px rgba(255, 74, 82, .22));
}
.project-24-scatter__core--back .project-24-scatter__core-image {
  filter: saturate(.46) contrast(.86) brightness(.96);
}
.project-24-scatter__core-image--2,
.project-24-scatter__core-image--3 { opacity: 0; }
.project-24-scatter__core-image--2 {
  filter: hue-rotate(145deg) saturate(.65) blur(.7px);
  animation: scatter-core-glitch-a 6.4s steps(1, end) infinite;
}
.project-24-scatter__core-image--3 {
  filter: hue-rotate(300deg) saturate(.55) blur(1.1px);
  animation: scatter-core-glitch-b 8.1s steps(1, end) infinite;
}
.project-24-scatter.is-flat .project-24-scatter__core {
  opacity: .08;
  transform: translate(-50%, -50%) scale(.78);
}
.project-24-scatter.is-focus .project-24-scatter__core {
  opacity: .08;
  filter: blur(3px) saturate(.5);
}
.project-24-scatter__item {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}
.project-24-scatter__float {
  display: block;
  width: 100%;
}
.project-24-scatter__item img,
.project-24-scatter__item video {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  height: auto;
  max-height: 72vh;
  object-fit: contain;
  background: transparent;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(.01px);
  will-change: transform;
  transition: transform 620ms cubic-bezier(.16, 1, .3, 1), opacity 420ms cubic-bezier(.16, 1, .3, 1);
}
.project-24-scatter.is-ready:not(.is-flat) .project-24-scatter__item {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--sphere-w, 104px);
  opacity: calc(var(--scatter-item-opacity, 0) * var(--sphere-depth-opacity, 1));
  transform: var(--sphere-live-transform) scale(var(--scatter-item-scale, .72));
  transform-origin: 50% 50%;
  z-index: var(--sphere-z, 1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  transition: opacity 360ms cubic-bezier(.16, 1, .3, 1), width 760ms cubic-bezier(.16, 1, .3, 1);
}
.project-24-scatter.is-ready:not(.is-flat) .project-24-scatter__item.is-core-occluder {
  -webkit-backdrop-filter: blur(7px) saturate(.5) opacity(.68);
  backdrop-filter: blur(7px) saturate(.5) opacity(.68);
}
.project-24-scatter.is-collapsing .project-24-scatter__item {
  transition: opacity 360ms cubic-bezier(.16, 1, .3, 1), transform 760ms cubic-bezier(.16, 1, .3, 1), width 760ms cubic-bezier(.16, 1, .3, 1);
}
.project-24-scatter.is-ready.is-flat .project-24-scatter__item {
  position: absolute;
  left: var(--scatter-x);
  top: var(--scatter-y);
  width: var(--scatter-w);
  opacity: var(--scatter-item-opacity, 0);
  transform: translate(-50%, -50%) scale(var(--scatter-item-scale, .72));
  transform-origin: 50% 50%;
  z-index: var(--scatter-z, 1);
  transition: left 680ms cubic-bezier(.16, 1, .3, 1), top 680ms cubic-bezier(.16, 1, .3, 1), width 680ms cubic-bezier(.16, 1, .3, 1), opacity 480ms cubic-bezier(.16, 1, .3, 1), transform 680ms cubic-bezier(.16, 1, .3, 1);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.project-24-scatter.is-ready .project-24-scatter__float {
  animation: project-24-float var(--scatter-float-duration, 7s) ease-in-out var(--scatter-float-delay, 0s) infinite alternate;
}
.project-24-scatter__item:hover img,
.project-24-scatter__item:hover video,
.project-24-scatter__item:focus-visible img,
.project-24-scatter__item:focus-visible video { transform: scale(1.09); }
.project-24-scatter.has-selection .project-24-scatter__item:not(.is-selected) {
  opacity: .62 !important;
  pointer-events: auto;
}
.brand-page .project-24-scatter.is-focus .project-24-scatter__item:not(.is-selected) {
  opacity: .16 !important;
  filter: saturate(.58) blur(.45px);
  pointer-events: none;
}
.brand-page .project-24-scatter.is-focus .project-24-scatter__item.is-selected {
  left: 50%;
  top: 50%;
  width: min(62vw, 820px);
  opacity: 1 !important;
  transform: translate(-50%, -50%) translateZ(0) !important;
  z-index: 520;
  cursor: zoom-out;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.project-24-scatter.is-ready.is-flat .project-24-scatter__item.is-selected {
  left: 50%;
  top: 50%;
  width: min(68vw, 920px);
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1);
  z-index: 50;
  cursor: zoom-out;
}
.project-24-scatter__item.is-selected .project-24-scatter__float { animation-play-state: paused; }
.project-24-scatter__item.is-selected img,
.project-24-scatter__item.is-selected video {
  max-height: 78vh;
  transform: none;
}
@keyframes project-24-float {
  from { transform: translate3d(-3px, -4px, 0) rotate(-.35deg); }
  to { transform: translate3d(4px, 5px, 0) rotate(.35deg); }
}
@keyframes scatter-core-drift {
  0% { transform: translate(-50%, -50%) translate3d(-2px, 2px, 0) scale(.988); }
  55% { transform: translate(-50%, -50%) translate3d(2px, -1px, 0) scale(1.012); }
  100% { transform: translate(-50%, -50%) translate3d(0, 2px, 0) scale(.996); }
}
@keyframes scatter-core-scan {
  from { background-position: 0 -18px; }
  to { background-position: 0 18px; }
}
@keyframes scatter-core-static {
  0%, 72%, 76%, 100% { opacity: .52; transform: scale(1); }
  73% { opacity: .16; transform: scaleX(1.05) scaleY(.98); }
  74% { opacity: .72; transform: translateX(-2px); }
  75% { opacity: .24; transform: translateX(1px); }
}
@keyframes scatter-core-glitch-a {
  0%, 68%, 72%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); transform: none; }
  69% { opacity: .35; clip-path: inset(18% 0 58% 0); transform: translateX(5px) scaleX(1.03); }
  70% { opacity: .16; clip-path: inset(61% 0 18% 0); transform: translateX(-4px); }
  71% { opacity: .28; clip-path: inset(39% 0 44% 0); transform: translateX(2px); }
}
@keyframes scatter-core-glitch-b {
  0%, 84%, 88%, 100% { opacity: 0; clip-path: inset(100% 0 0 0); transform: none; }
  85% { opacity: .24; clip-path: inset(8% 0 76% 0); transform: translateX(-5px) skewX(-2deg); }
  86% { opacity: .12; clip-path: inset(48% 0 30% 0); transform: translateX(4px); }
  87% { opacity: .2; clip-path: inset(73% 0 8% 0); transform: translateX(-2px); }
}
.detail-page--project-24 .project-media-stack--project-24-editorial {
  width: min(1200px, calc(100vw - 96px));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 56px);
  align-items: start;
  padding-top: clamp(36px, 5vw, 76px);
  padding-bottom: clamp(76px, 8vw, 130px);
}
.detail-page--project-24 .project-media-stack--project-24-editorial .project-media-item {
  width: 100%;
  margin: 0;
}
.detail-page--project-24 .project-media-stack--project-24-editorial img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.detail-page--project-24 .project-media-stack--project-24 {
  width: min(1200px, calc(100vw - 96px));
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  padding-top: 0;
  padding-bottom: clamp(80px, 10vw, 170px);
}
.detail-page--project-24 .project-media-stack--project-24 .project-media-item {
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: #fff;
}
.detail-page--project-24 .project-media-stack--project-24 img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.detail-page--project-13 .project-media-stack--project-13 {
  width: min(1960px, calc(100vw - 96px));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  padding-top: 28px;
  padding-bottom: clamp(80px, 10vw, 170px);
}
.detail-page--project-13 .project-media-stack--project-13 .project-media-item {
  width: 100%;
  margin: 0;
}
.detail-page--project-13 .project-media-stack--project-13 .project-intro-copy {
  grid-column: 1 / -1;
}
.detail-page--project-13 .project-media-stack--project-13-intro {
  width: min(1960px, calc(100vw - 96px));
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  padding-top: 28px;
  padding-bottom: 0;
}
.detail-page--project-13 .project-media-stack--project-13-intro .project-media-item {
  width: 100%;
  margin: 0;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: #fff;
}
.detail-page--project-13 .project-media-stack--project-13-intro .project-media-item--pair {
  grid-column: span 3;
}
.detail-page--project-13 .project-media-stack--project-13-intro .project-media-item--featured {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(660px, 100%);
  margin-bottom: 60px;
}
.detail-page--project-13 .project-media-stack--project-13-intro .project-media-item--trio {
  grid-column: span 2;
}
.detail-page--project-13 .project-media-stack--project-13-intro img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.detail-page--project-13 .project-media-stack--project-13-slides {
  width: min(1960px, calc(100vw - 96px));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  padding-top: 16px;
  padding-bottom: clamp(80px, 10vw, 170px);
}
.detail-page--project-13 .project-media-stack--project-13-slides .project-media-item {
  width: 100%;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #fff;
}
.detail-page--project-13 .project-media-stack--project-13-slides img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.detail-page--project-14 .project-media-stack--project-14 {
  width: min(1960px, calc(100vw - 96px));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  padding-top: 28px;
  padding-bottom: clamp(80px, 10vw, 170px);
}
.detail-page--project-14 .project-media-stack--project-14 .project-media-item {
  width: 100%;
  margin: 0;
}
.detail-page--project-14 .project-media-stack--project-14 .project-media-item--hero {
  grid-column: 1 / -1;
}
.detail-page--project-14 .project-media-stack--project-14 .project-media-item--title {
  grid-column: 1 / -1;
  width: 46%;
  margin-inline: auto;
  padding-block: clamp(52px, 6vw, 112px);
}
.detail-page--project-14 .project-media-stack--project-14 .project-media-item--closing {
  grid-column: 1 / -1;
  width: 62%;
  margin: clamp(36px, 4vw, 72px) auto 0;
}
.detail-page--project-14 .project-media-stack--project-14 .project-media-item--storyboard {
  grid-column: 1 / -1;
  width: 100%;
}
.detail-page--project-22 .project-media-stack--project-22 {
  width: min(1960px, calc(100vw - 96px));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  padding-top: 28px;
  padding-bottom: clamp(80px, 10vw, 170px);
}
.detail-page--project-22 .project-media-stack--project-22 .project-media-item {
  width: 100%;
  margin: 0;
}
.detail-page--project-22 .project-media-stack--project-22 .project-media-item--hero {
  grid-column: 1 / -1;
}
.detail-page--project-19 .project-media-stack--project-19 {
  width: min(1960px, calc(100vw - 96px));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  padding-top: 28px;
  padding-bottom: clamp(80px, 10vw, 170px);
}
.detail-page--project-19 .project-media-stack--project-19 .project-media-item {
  width: 100%;
  margin: 0;
}
.detail-page--project-19 .project-media-stack--project-19 .project-media-item--hero,
.detail-page--project-19 .project-media-stack--project-19 .project-media-item--title,
.detail-page--project-19 .project-media-stack--project-19 .project-media-item--wide {
  grid-column: 1 / -1;
}
.detail-page--project-19 .project-media-stack--project-19 .project-media-item--title {
  width: 72%;
  margin-inline: auto;
  padding-block: clamp(44px, 5vw, 90px);
}
.detail-page--project-19 .project-media-stack--project-19 .project-media-item--graphic {
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
  background: #fff;
}
.detail-page--project-19 .project-media-stack--project-19 .project-media-item--graphic img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.detail-page--project-19 .project-media-stack--project-19 .project-media-item--portrait {
  grid-column: 1 / -1;
  width: 58%;
  margin: clamp(28px, 3vw, 56px) auto 0;
}
.detail-page--project-15 .project-media-stack--project-15 {
  width: min(1960px, calc(100vw - 96px));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
  padding-top: 28px;
  padding-bottom: clamp(80px, 10vw, 170px);
}
.detail-page--project-15 .project-media-stack--project-15 .project-media-item {
  width: 100%;
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #fff;
}
.detail-page--project-15 .project-media-stack--project-15 img,
.detail-page--project-15 .project-media-stack--project-15 .motion-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.detail-page--project-15 .project-media-stack--project-15 .project-media-item--four-three {
  aspect-ratio: 4 / 3;
}
.detail-page--project-15 .project-media-stack--project-15 .project-media-item--two-three {
  aspect-ratio: 2 / 3;
}
.detail-page--project-15 .project-media-stack--project-15 .project-media-item--three-two {
  aspect-ratio: 3 / 2;
}
.detail-page--project-15 .project-media-stack--project-15 .project-media-item--focus-product img {
  object-position: center 50%;
}
.detail-page--project-15 .project-media-stack--project-15 .project-media-item--crop-from-top img {
  object-position: center bottom;
}
.project-media-stack { padding-top: clamp(80px, 10vw, 170px); display: grid; gap: 28px; }
.project-media-item { margin: 0 auto; width: min(720px, 52vw); }
.detail-page--project-09 .project-media-item { width: 100%; }
.detail-page--project-09 .project-media-item--handlebar-feature {
  width: min(1080px, 100%);
}
.detail-page--project-09 .project-media-item--long-followup {
  margin-top: clamp(64px, 8vw, 128px);
}
.detail-page--project-09 .project-media-item--crop-bottom {
  overflow: hidden;
}
.detail-page--project-09 .project-media-item--crop-bottom .motion-media {
  margin-bottom: -2.5%;
}
.project-media-item img, .project-media-item .motion-media { display: block; width: 100%; height: auto; background: #fff; }
.project-copy { padding: clamp(120px, 15vw, 240px) 0 80px; }
.project-copy__inner { width: min(680px, 100%); display: grid; gap: 28px; }
.project-copy p { margin: 0; font-family: var(--sans); font-size: 16px; font-weight: 400; line-height: 1.9; letter-spacing: 0; }
.empty-project-detail { min-height: calc(100vh - var(--header-h)); }

/* About */
.about-page { min-height: 100vh; }
.about-page .site-header { height: var(--header-h); }
.about-page .site-header.is-compact { height: clamp(58px, 5vw, 82px); }
.about-main {
  width: min(1280px, 90vw);
  margin-inline: auto;
  padding: clamp(70px, 9vh, 100px) 0 clamp(90px, 10vw, 170px);
}
.about-profile {
  width: 100%;
  height: auto;
}

@media (hover: hover) and (pointer: fine) {
  .desktop-nav:hover a, .desktop-nav:hover button { opacity: .5; }
  .desktop-nav a:hover, .desktop-nav button:hover { opacity: 1; }
  .project-card--real a:hover .project-cover__image { transform: scale(1.012); }
  .project-cover--green-character .project-cover__image, .project-cover--project-09 .project-cover__image, .project-cover--project-10 .project-cover__image, .project-cover--project-11 .project-cover__image, .project-cover--project-12 .project-cover__image, .project-cover--project-13 .project-cover__image, .project-cover--project-14 .project-cover__image { transform: none; }
  .media-sound-toggle:hover { color: var(--red); }
}

@media (max-width: 900px) {
  :root { --shell: calc(100vw - 40px); --header-h: 124px; }
  .desktop-nav { gap: clamp(48px, 16vw, 92px); font-size: clamp(18px, 4.2vw, 24px); }
  .home-feature { width: calc(100vw - 40px); }
  .home-feature .home-feature__sound { right: 8px; bottom: 8px; }
  .work-intro { padding-top: 0; }
  .intro-layout { padding-top: 42px; padding-bottom: 62px; }
  .intro-layout h1 { font-size: clamp(21px, 5.2vw, 42px); }
  .intro-layout .motto-title { width: max-content; font-size: clamp(40px, 10vw, 60px); }
  .type-showcase { padding-top: 16px; padding-bottom: 96px; }
  .type-showcase__item { height: 48vw; }
  .type-showcase__toggle { right: 20px; }
  .projects { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .project-cover--xinyuan, .project-cover--qinggua, .project-cover--jiahe, .project-cover--chengyuan, .project-cover--rongxue, .project-cover--lejing, .project-cover--fragrance, .project-cover--green-character, .project-cover--project-09, .project-cover--project-10, .project-cover--project-11, .project-cover--project-12, .project-cover--project-13, .project-cover--project-14, .project-cover--project-15, .project-cover--project-16, .project-cover--project-17, .project-cover--project-18, .project-cover--project-19, .project-cover--project-20, .project-cover--project-21, .project-cover--project-22, .project-cover--project-23, .project-cover--project-24, .project-empty { min-height: 0; height: 40vw; }
  .site-footer { padding-top: 110px; }
  .footer-grid { grid-template-columns: 1fr auto; gap: 28px; }
  .footer-grid p:nth-child(2) { display: none; }

  .project-media-stack { padding-top: 55px; gap: 14px; }
  .project-hero-block { width: calc(100vw - 40px); }
  .project-hero-media { aspect-ratio: 16 / 9; }
  .detail-page--rongxue .project-media-stack, .detail-page--lejing .project-media-stack, .detail-page--fragrance .project-media-stack, .detail-page--project-09 .project-media-stack { padding-top: 14px; }
  .detail-page--fragrance .project-media-stack--behind-scenes { padding-top: 80px; }
  .detail-page--horizontal-grid .project-media-stack { gap: 14px; padding-top: 14px; }
  .detail-page--green-character .project-media-stack { gap: 14px; padding-top: 14px; padding-bottom: 55px; }
  .detail-page--project-17 .project-media-stack,
  .detail-page--project-18 .project-media-stack { gap: 14px; padding-top: 14px; }
  .detail-page--project-12 .project-media-stack--minicare { gap: 14px; padding-top: 14px; }
  .detail-page--rongxue .project-media-stack--channel-launch,
  .detail-page--rongxue .project-media-stack--annual-summary { padding-top: clamp(72px, 16vw, 110px); }
  .project-media-location { padding-bottom: clamp(48px, 12vw, 72px); }
  .detail-page--rongxue .project-media-stack--annual-summary .project-media-location { padding-bottom: clamp(128px, 26vw, 190px); }
  .detail-page--project-09 .project-media-stack {
    width: calc(100vw - 40px);
    padding-bottom: 55px;
  }
  .detail-page--project-09 .project-media-stack--xjd-motion {
    padding-bottom: 0;
  }
  .detail-page--project-09 .project-media-stack--xjd-stills {
    gap: 14px;
    padding-top: 14px;
  }
  .detail-page--project-10 .project-media-stack { padding-bottom: 55px; }
  .detail-page--project-11 .project-media-stack--bag-concepts {
    width: calc(100vw - 40px);
    gap: 14px;
    padding-top: 14px;
    padding-bottom: 55px;
  }
  .detail-page--project-23 .project-media-stack--yikexinqiu {
    width: calc(100vw - 40px);
    gap: 14px;
    padding-top: 14px;
    padding-bottom: 55px;
  }
  .detail-page--project-20 .project-media-stack--project-20 {
    width: calc(100vw - 40px);
    gap: 14px;
    padding-top: 14px;
    padding-bottom: 0;
  }
  .detail-page--project-20 .project-media-stack--project-20-trio {
    width: calc(100vw - 40px);
    gap: 14px;
    padding-top: 14px;
    padding-bottom: 55px;
  }
  .detail-page--project-20 .project-media-stack--project-20-videos {
    width: calc(100vw - 40px);
    gap: 14px;
    padding-top: 14px;
    padding-bottom: 0;
  }
  .detail-page--project-21 .project-21-video {
    width: calc(100vw - 40px);
    padding-top: 14px;
    padding-bottom: clamp(90px, 18vw, 150px);
  }
  .detail-page--project-21 .project-media-stack--project-21 {
    width: calc(100vw - 40px);
    gap: 14px;
    padding-bottom: 55px;
  }
  .detail-page--project-16 .project-media-stack--project-16 {
    width: calc(100vw - 40px);
    gap: 14px;
    padding-top: 14px;
    padding-bottom: 55px;
  }
  .detail-page--project-24 .project-media-stack--project-24 {
    width: calc(100vw - 40px);
    gap: 14px;
    padding-top: 14px;
    padding-bottom: 55px;
  }
  .detail-page--project-24 .project-media-stack--project-24-editorial {
    width: calc(100vw - 40px);
    gap: 14px;
    padding-top: 36px;
    padding-bottom: 72px;
  }
  .detail-page--project-13 .project-media-stack--project-13 {
    width: calc(100vw - 40px);
    gap: 14px;
    padding-top: 14px;
    padding-bottom: 55px;
  }
  .detail-page--project-13 .project-media-stack--project-13-intro {
    width: calc(100vw - 40px);
    gap: 14px;
    padding-top: 14px;
  }
  .detail-page--project-13 .project-media-stack--project-13-intro .project-media-item--featured {
    width: min(660px, 72vw);
    margin-bottom: 40px;
  }
  .detail-page--project-13 .project-media-stack--project-13-slides {
    width: calc(100vw - 40px);
    gap: 14px;
    padding-top: 14px;
    padding-bottom: 55px;
  }
  .detail-page--project-14 .project-media-stack--project-14 {
    width: calc(100vw - 40px);
    gap: 14px;
    padding-top: 14px;
    padding-bottom: 55px;
  }
  .detail-page--project-14 .project-media-stack--project-14 .project-media-item--title {
    width: 58%;
    padding-block: clamp(36px, 8vw, 64px);
  }
  .detail-page--project-14 .project-media-stack--project-14 .project-media-item--closing {
    width: 72%;
    margin-top: 28px;
  }
  .detail-page--project-22 .project-media-stack--project-22 {
    width: calc(100vw - 40px);
    gap: 14px;
    padding-top: 14px;
    padding-bottom: 55px;
  }
  .detail-page--project-19 .project-media-stack--project-19 {
    width: calc(100vw - 40px);
    gap: 14px;
    padding-top: 14px;
    padding-bottom: 55px;
  }
  .detail-page--project-19 .project-media-stack--project-19 .project-media-item--title {
    width: 82%;
    padding-block: clamp(32px, 7vw, 56px);
  }
  .detail-page--project-19 .project-media-stack--project-19 .project-media-item--portrait {
    width: 70%;
    margin-top: 22px;
  }
  .detail-page--project-15 .project-media-stack--project-15 {
    width: calc(100vw - 40px);
    gap: 14px;
    padding-top: 14px;
    padding-bottom: 55px;
  }
  .project-media-item { width: 100%; }
  .project-media-stack--portrait { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-media-stack--wide { grid-template-columns: 1fr; }
  .detail-page--project-09 .project-media-item { width: 100%; }
  .project-copy { padding-top: 100px; }
  .project-copy__inner { gap: 24px; }
  .project-copy p { font-size: 15px; line-height: 1.85; }
  .about-main { width: calc(100vw - 40px); padding-top: 20px; }
}

@media (max-width: 430px) {
  :root { --shell: calc(100vw - 28px); }
  .home-feature { width: calc(100vw - 28px); }
  .intro-layout h1 { font-size: clamp(17px, 5.3vw, 21px); }
  .intro-layout .motto-title { width: max-content; font-size: clamp(36px, 10.5vw, 50px); }
  .filter { padding-left: 14px; font-size: 13px; }
  .project-hero-block { width: calc(100vw - 28px); }
  .detail-page--project-09 .project-media-stack { width: calc(100vw - 28px); }
  .detail-page--project-11 .project-media-stack--bag-concepts { width: calc(100vw - 28px); }
  .detail-page--project-23 .project-media-stack--yikexinqiu { width: calc(100vw - 28px); }
  .detail-page--project-20 .project-media-stack--project-20 { width: calc(100vw - 28px); }
  .detail-page--project-20 .project-media-stack--project-20-trio { width: calc(100vw - 28px); }
  .detail-page--project-20 .project-media-stack--project-20-videos { width: calc(100vw - 28px); }
  .detail-page--project-21 .project-21-video,
  .detail-page--project-21 .project-media-stack--project-21 { width: calc(100vw - 28px); }
  .detail-page--project-16 .project-media-stack--project-16 {
    width: calc(100vw - 28px);
    gap: 8px;
  }
  .detail-page--project-24 .project-media-stack--project-24 {
    width: calc(100vw - 28px);
    gap: 8px;
  }
  .detail-page--project-24 .project-media-stack--project-24-editorial {
    width: calc(100vw - 28px);
    gap: 8px;
  }
  .detail-page--project-13 .project-media-stack--project-13 { width: calc(100vw - 28px); }
  .detail-page--project-13 .project-media-stack--project-13-intro {
    width: calc(100vw - 28px);
    gap: 8px;
  }
  .detail-page--project-13 .project-media-stack--project-13-slides {
    width: calc(100vw - 28px);
    gap: 10px;
  }
  .detail-page--project-14 .project-media-stack--project-14 { width: calc(100vw - 28px); }
  .detail-page--project-14 .project-media-stack--project-14 .project-media-item--title { width: 74%; }
  .detail-page--project-14 .project-media-stack--project-14 .project-media-item--closing { width: 100%; }
  .detail-page--project-22 .project-media-stack--project-22 { width: calc(100vw - 28px); }
  .detail-page--project-19 .project-media-stack--project-19 { width: calc(100vw - 28px); }
  .detail-page--project-19 .project-media-stack--project-19 .project-media-item--title { width: 88%; }
  .detail-page--project-19 .project-media-stack--project-19 .project-media-item--portrait { width: 88%; }
  .detail-page--project-15 .project-media-stack--project-15 {
    width: calc(100vw - 28px);
    gap: 10px;
  }
  .about-main { width: calc(100vw - 28px); padding-top: 14px; }
}

@media (max-width: 640px) {
  .projects { grid-template-columns: 1fr; gap: 16px; }
  .brand-main { padding-top: 24px; }
  .brand-intro { width: 100%; }
  .brand-projects { grid-template-columns: 1fr; row-gap: 24px; }
  .brand-video__controls { opacity: 1; }
  .brand-video__sound { width: 18px; height: 18px; padding: 3px; }
  .brand-proof-card { grid-column: 1; grid-row: 2; width: 74%; margin-block: 10px 34px; }
  html.reveal-enabled .project-card,
  html.reveal-enabled .scroll-reveal-item { --reveal-y: 72px; }
  .project-cover--xinyuan, .project-cover--qinggua, .project-cover--jiahe, .project-cover--chengyuan, .project-cover--rongxue, .project-cover--lejing, .project-cover--fragrance, .project-cover--green-character, .project-cover--project-09, .project-cover--project-10, .project-cover--project-11, .project-cover--project-12, .project-cover--project-13, .project-cover--project-14, .project-cover--project-15, .project-cover--project-16, .project-cover--project-17, .project-cover--project-18, .project-cover--project-19, .project-cover--project-20, .project-cover--project-21, .project-cover--project-22, .project-cover--project-23, .project-cover--project-24, .project-empty { height: 112vw; }
  .detail-page--rongxue .project-media-stack,
  .detail-page--lejing .project-media-stack,
  .detail-page--fragrance .project-media-stack,
  .detail-page--horizontal-grid .project-media-stack,
  .detail-page--green-character .project-media-stack,
  .detail-page--project-17 .project-media-stack,
  .detail-page--project-18 .project-media-stack { grid-template-columns: 1fr; }
  .detail-page--project-20 .project-media-stack--project-20 { grid-template-columns: 1fr; }
  .detail-page--project-20 .project-media-stack--project-20-trio { grid-template-columns: 1fr; }
  .detail-page--project-20 .project-media-stack--project-20-videos { grid-template-columns: 1fr; }
  .detail-page--project-21 .project-media-stack--project-21 { grid-template-columns: 1fr; }
  .detail-page--project-21 .project-media-stack--project-21 .project-media-item--lead {
    grid-column: auto;
    width: 100%;
  }
  .detail-page--project-13 .project-media-stack--project-13 { grid-template-columns: 1fr; }
  .detail-page--project-12 .project-media-stack--minicare { grid-template-columns: 1fr; }
  .project-media-stack--portrait,
  .project-media-stack--wide { grid-template-columns: 1fr; }
}

:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .project-cover video, .project-card, .scroll-reveal-item { transition: none; }
  html.reveal-enabled .project-card,
  html.reveal-enabled .scroll-reveal-item { opacity: 1; transform: none; }
  .client-marquee__track { animation: none; }
  .motto-breath { animation: none; opacity: .9; }
  .client-marquee__strip[aria-hidden="true"] { display: none; }
  .type-showcase__viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .type-showcase__track { transform: none !important; will-change: auto; }
  .type-showcase__group[aria-hidden="true"] { display: none; }
  .type-showcase__toggle { display: none; }
  .project-24-story {
    height: auto;
    margin-top: 0;
  }
  .project-24-story__stage {
    position: relative;
    height: auto;
  }
  .project-24-story__frame {
    position: relative;
    height: auto;
    opacity: 1;
    transform: none;
    will-change: auto;
  }
  .project-24-story__frame img { height: auto; }
  .brand-scatter-story { width: 100%; height: auto; margin-left: 0; }
  .brand-scatter-story__stage { position: relative; height: auto; overflow: visible; }
  .brand-scatter-story__frame { position: relative; height: auto; opacity: 1; transform: none; }
  .brand-scatter-story__frame--intro > img { position: relative; width: 100%; height: auto; }
  .brand-scatter-story__video-board { position: relative; width: 100%; height: auto; aspect-ratio: 5692 / 3229; }
  .project-24-story__frame--scatter { display: block; }
  .project-24-scatter {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
    perspective: none;
    cursor: default;
  }
  .project-24-scatter__orbit { display: contents; }
  .project-24-scatter__core { display: none; }
  .project-24-scatter.is-ready .project-24-scatter__item,
  .project-24-scatter.is-ready .project-24-scatter__item.is-selected {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    min-width: 0;
    opacity: 1 !important;
    transform: none;
    transition: none;
  }
  .project-24-scatter.is-ready .project-24-scatter__float { animation: none; }
  .project-24-scatter__item img,
  .project-24-scatter__item video { max-height: none; transition: none; }
  .project-24-scatter.has-selection .project-24-scatter__item:not(.is-selected) {
    opacity: 1 !important;
    pointer-events: auto;
  }
}

@media (max-width: 640px) {
  .project-24-scatter.is-ready:not(.is-flat) .project-24-scatter__item {
    width: var(--sphere-mobile-w, 62px);
  }
  .project-24-scatter.is-ready .project-24-scatter__item { min-width: 42px; }
  .project-24-scatter.is-ready .project-24-scatter__item.is-selected {
    width: min(84vw, 620px);
    min-width: 0;
  }
}