:root {
  --ink: #151615;
  --ink-soft: rgba(21, 22, 21, 0.66);
  --paper: #ded9d1;
  --paper-warm: #efe6d8;
  --paper-pale: #f3efe9;
  --graphite: #343533;
  --metal: #a88d68;
  --line: rgba(21, 22, 21, 0.24);
  --line-light: rgba(255, 255, 255, 0.26);
  --viewport-pad: 3vw;
  --header-size: 64px;
  --hero-index: 0;
  --story-progress: 0;
  --story-visible: 0;
  --story-intro: 0;
  --story-bridge: 0;
  --story-second: 0;
  --story-final: 0;
  --story-second-phase: 0;
  --story-final-glyph: 1;
  --story-light: 1;
  --story-wordfield: 1;
  --story-beat-1: 1;
  --story-beat-2: 0;
  --story-beat-3: 0;
  --story-beat-4: 0;
  --story-beat-5: 0;
  --story-beat-6: 0;
  --sector-progress: 0;
  --sector-core-scale: 0.42;
  --sector-spin: 0deg;
  --sector-copy-x: 0px;
  --sector-copy-y: 0px;
  --story-word-west-x: 0px;
  --story-word-east-x: 0px;
  --story-word-y: 0px;
  --story-ribbon-x: 0px;
  --archive-progress: 0;
  color-scheme: light;
  font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: auto;
  background: var(--ink);
}

.filter-defs {
  position: fixed;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body[data-menu-state="open"] {
  overflow: hidden;
}

button,
a {
  color: inherit;
}

button {
  font: inherit;
}

a {
  text-decoration: none;
}

img {
  display: block;
  width: 100%;
  height: 100%;
}

.media-fallback {
  position: relative;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 42%),
    repeating-linear-gradient(90deg, #262826 0 1px, #1a1c1a 1px 18px);
}

.media-fallback::after {
  content: "MEDIA FIELD";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.54);
  font-size: 9px;
  letter-spacing: 0.18em;
}

.media-fallback img {
  visibility: hidden;
}

figure,
h1,
h2,
h3,
p,
ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

::selection {
  background: var(--ink);
  color: var(--paper-pale);
}

:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

.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;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100000;
  padding: 12px 16px;
  color: var(--paper-pale);
  background: var(--ink);
  transform: translateY(-150%);
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-grain {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.36;
  background-image: url("assets/noise.svg");
  background-size: 180px 180px;
  mix-blend-mode: screen;
}

.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10001;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--cursor-x, -100px), var(--cursor-y, -100px), 0) translate(-50%, -50%);
  transition: opacity 180ms ease, scale 220ms cubic-bezier(0.22, 1, 0.36, 1);
  mix-blend-mode: difference;
}

.cursor-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
}

.cursor-ring {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 50%;
}

html[data-cursor-ready] .cursor-dot,
html[data-cursor-ready] .cursor-ring {
  opacity: 0.9;
}

html[data-cursor-hover] .cursor-ring {
  scale: 1.65;
  border-color: rgba(255, 255, 255, 0.58);
}

@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
  html[data-cursor-ready] body,
  html[data-cursor-ready] a,
  html[data-cursor-ready] button {
    cursor: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cursor-dot,
  .cursor-ring {
    transition: none;
  }
}

@media (max-width: 767px) {
  .site-footer {
    height: 760px;
    min-height: 760px;
  }
}

/* Three-column company footer */

.site-footer {
  height: auto;
  min-height: 700px;
  padding: 64px 3vw 42px;
  overflow: visible;
}

.site-footer > .footer-rule {
  position: static;
  width: 100%;
  margin: 0;
}

.footer-main-grid {
  display: grid;
  grid-template-columns: minmax(360px, 1.3fr) minmax(150px, 0.52fr) minmax(330px, 1fr);
  gap: 0.4cm;
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: clamp(82px, 11vh, 126px) 0 94px;
}

.footer-column { min-width: 0; }

.footer-column--about {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 24px;
  align-items: start;
}

.footer-about-mark {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
}

.footer-about-mark img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.footer-column--about p {
  margin: 0;
  color: rgba(243, 239, 233, 0.62);
  font-size: 13px;
  line-height: 1.9;
}

.footer-column h2 {
  margin: 0 0 30px;
  color: var(--paper-pale);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
}

.footer-column--services {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-column--services a {
  margin-bottom: 17px;
  color: rgba(243, 239, 233, 0.66);
  font-size: 14px;
  transition: color 180ms ease, transform 180ms ease;
}

.footer-column--services a:hover {
  color: var(--paper-pale);
  transform: translateX(4px);
}

.footer-location {
  margin: -18px 0 28px;
  color: var(--metal);
  font-size: 12px;
  letter-spacing: 0.12em;
}

.footer-column address {
  display: grid;
  gap: 12px;
  color: rgba(243, 239, 233, 0.62);
  font-size: 13px;
  font-style: normal;
  line-height: 1.45;
}

.footer-column address a { color: rgba(243, 239, 233, 0.76); }
.footer-column address a:hover { color: var(--paper-pale); }

.footer-column .footer-social-title {
  margin: 30px 0 0;
  color: rgba(243, 239, 233, 0.56);
}

.footer-social-platforms a {
  border-color: rgba(243, 239, 233, 0.18);
  background: rgba(243, 239, 233, 0.05);
}

.footer-social-platforms a span {
  display: block;
  width: 20px;
  height: 20px;
  background: var(--social-color);
  -webkit-mask: var(--social-icon) center / contain no-repeat;
  mask: var(--social-icon) center / contain no-repeat;
}

.social-douyin { --social-color: #25f4ee; --social-icon: url("https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/tiktok.svg"); }
.social-xiaohongshu { --social-color: #ff2442; --social-icon: url("https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/xiaohongshu.svg"); }
.social-weibo { --social-color: #e6162d; --social-icon: url("https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/sinaweibo.svg"); }
.social-zhihu { --social-color: #0084ff; --social-icon: url("https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/zhihu.svg"); }

.footer-legal--three-column {
  position: static;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding-top: 28px;
  border-top: 1px solid rgba(243, 239, 233, 0.14);
  color: rgba(243, 239, 233, 0.42);
}

.footer-icp-link {
  color: inherit;
  text-decoration: none;
  transition: color 180ms ease;
}

.footer-icp-link:hover,
.footer-icp-link:focus-visible {
  color: var(--paper-pale);
}

@media (max-width: 900px) {
  .site-footer { height: auto; min-height: 0; padding: 52px 24px 36px; }
  .footer-main-grid { grid-template-columns: 1fr; gap: 58px; padding: 70px 0; }
  .footer-column--about { grid-template-columns: 62px 1fr; }
  .footer-about-mark { width: 62px; height: 62px; }
  .footer-about-mark img { width: 56px; height: 56px; }
  .footer-legal--three-column { gap: 18px; flex-direction: column; }
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99997;
  width: 100vw;
  height: 1.5px;
  background: rgba(255, 255, 255, 0.85);
  transform: scaleX(var(--page-progress, 0));
  transform-origin: 0 50%;
  pointer-events: none;
}

/* Header and full-screen menu */

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10000;
  height: 0;
  pointer-events: none;
}

.header-pill {
  position: absolute;
  top: 0;
  left: 50%;
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(520px, 2.4fr) 64px 64px;
  align-items: center;
  width: 100vw;
  height: var(--header-size);
  overflow: hidden;
  color: var(--paper-pale);
  background: rgba(23, 25, 23, 0.42);
  backdrop-filter: blur(7px);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: translateX(-50%);
  transform-origin: 50% 0;
  transition:
    width 400ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 400ms ease,
    color 400ms ease,
    border-color 400ms ease;
  pointer-events: auto;
}

.site-header[data-header-state="hero"] .header-pill {
  width: 100vw;
  background: rgba(23, 25, 23, 0.42);
  border-color: transparent;
  box-shadow: none;
}

.site-header[data-header-state="hero"] .header-control {
  visibility: visible;
  opacity: 1;
}

body[data-menu-state="open"] .site-header .header-pill {
  top: 0;
  width: 100vw;
  color: var(--ink);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

body[data-menu-state="open"] .site-header .header-control {
  visibility: visible;
  opacity: 1;
}

.header-control,
.header-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--header-size);
  height: var(--header-size);
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: opacity 220ms ease;
}

.header-mail {
  grid-column: 3;
  font-size: 17px;
  font-weight: 400;
}

.header-mail span {
  display: block;
  width: 21px;
  height: 15px;
  overflow: hidden;
  border: 1.5px solid currentColor;
  border-radius: 1px;
  background:
    linear-gradient(35deg, transparent 46%, currentColor 47% 51%, transparent 52%) left / 51% 100% no-repeat,
    linear-gradient(-35deg, transparent 46%, currentColor 47% 51%, transparent 52%) right / 51% 100% no-repeat;
  font-size: 0;
}

.header-mark {
  justify-self: center;
  grid-column: 1;
  display: flex;
  gap: 8px;
  width: auto;
  padding-left: 0;
}

.brand-logo-crop {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.brand-logo-crop img {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.header-brand-name {
  display: block;
  color: #e8c890;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  white-space: nowrap;
  text-align: center;
}

.header-primary-nav {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 3vw, 52px);
  height: 100%;
}

.header-primary-nav--enhanced {
  width: 100%;
  text-align: center;
}

.header-primary-nav a {
  position: relative;
  color: rgba(247, 245, 239, 0.74);
  font-size: 12px;
  letter-spacing: 0.09em;
  text-decoration: none;
  transition: color 180ms ease;
}

.header-primary-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -9px;
  left: 0;
  height: 1px;
  background: #e8c890;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 180ms ease;
}

.header-primary-nav a:hover,
.header-primary-nav a:focus-visible { color: #e8c890; }
.header-primary-nav a:hover::after,
.header-primary-nav a:focus-visible::after { transform: scaleX(1); }

.mark-shape {
  position: relative;
  display: block;
  width: 31px;
  height: 22px;
}

.mark-shape i {
  display: none;
}

.mark-shape::before,
.mark-shape::after {
  content: "";
  position: absolute;
  top: 0;
  width: 17px;
  height: 22px;
  background: currentColor;
}

.mark-shape::before {
  left: 0;
  clip-path: polygon(0 0, 45% 0, 100% 63%, 100% 100%, 58% 100%, 0 34%);
}

.mark-shape::after {
  right: 0;
  clip-path: polygon(42% 0, 100% 0, 100% 34%, 42% 100%, 0 100%, 0 64%);
}

.menu-trigger {
  grid-column: 4;
}

.menu-trigger span {
  position: absolute;
  width: 24px;
  height: 1px;
  background: currentColor;
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.menu-trigger span:first-child { transform: translateY(-4px); }
.menu-trigger span:last-child { transform: translateY(4px); }

body[data-menu-state="open"] .menu-trigger span:first-child { transform: rotate(45deg); }
body[data-menu-state="open"] .menu-trigger span:last-child { transform: rotate(-45deg); }

.menu-panel {
  position: fixed;
  inset: 0;
  z-index: 9990;
  visibility: hidden;
  overflow: clip;
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 400ms ease,
    visibility 0s linear 400ms;
}

.menu-backdrop {
  position: absolute;
  top: 30px;
  left: 50%;
  width: min(500px, calc(100vw - 40px));
  height: 64px;
  background: #141414;
  border-radius: 2px;
  transform: translateX(-50%);
}

.menu-list {
  position: absolute;
  inset: var(--header-size) 0 0;
  display: grid;
  grid-template-rows: repeat(5, 1fr);
}

.menu-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(44px, 1fr) auto minmax(44px, 1fr);
  align-items: center;
  overflow: hidden;
  border-top: 1px solid rgba(21, 22, 21, 0.15);
  opacity: 0;
  filter: blur(14px);
  transform: translateY(34px);
  transition:
    opacity 360ms ease,
    filter 520ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 180ms ease;
}

.menu-row::before,
.menu-row::after {
  content: "";
  position: absolute;
  top: 50%;
  z-index: 0;
  width: 162px;
  height: 108px;
  background-position: center;
  background-size: cover;
  opacity: 0;
  filter: grayscale(0.4) contrast(0.95);
  transform: translateY(-42%) scale(0.88) rotate(-4deg);
  transition: opacity 320ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.menu-row::before { left: 12vw; }
.menu-row::after { right: 12vw; transform: translateY(-58%) scale(0.88) rotate(4deg); }
.menu-row:nth-child(1)::before,
.menu-row:nth-child(4)::after { background-image: url("assets/hero/hero-01-monolith.png"); }
.menu-row:nth-child(2)::before,
.menu-row:nth-child(5)::after { background-image: url("assets/hero/hero-02-loop.png"); }
.menu-row:nth-child(3)::before,
.menu-row:nth-child(1)::after { background-image: url("assets/archive/archive-01-material-study.png"); }
.menu-row:nth-child(4)::before,
.menu-row:nth-child(2)::after { background-image: url("assets/archive/archive-02-folded-metal.png"); }
.menu-row:nth-child(5)::before,
.menu-row:nth-child(3)::after { background-image: url("assets/archive/archive-03-prisms.png"); }

.menu-row:hover::before,
.menu-row:hover::after,
.menu-row:focus-visible::before,
.menu-row:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) scale(1) rotate(0deg);
}

.menu-row:last-child {
  border-bottom: 1px solid rgba(21, 22, 21, 0.15);
}

.menu-row:hover,
.menu-row:focus-visible {
  background: rgba(255, 255, 255, 0.23);
}

.menu-index,
.menu-note {
  z-index: 2;
  padding: 0 var(--viewport-pad);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.13em;
}

.menu-note {
  justify-self: end;
}

.menu-word {
  position: relative;
  z-index: 2;
  display: grid;
  height: 82.8px;
  overflow: hidden;
  font-size: clamp(64px, 6.25vw, 90px);
  font-weight: 500;
  line-height: 82.8px;
  letter-spacing: -0.065em;
}

.menu-word > span {
  grid-area: 1 / 1;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.menu-word > span:last-child {
  color: #c89a45;
  transform: translateY(100%);
}

.menu-row:hover .menu-word > span:first-child,
.menu-row:focus-visible .menu-word > span:first-child { transform: translateY(-100%); }
.menu-row:hover .menu-word > span:last-child,
.menu-row:focus-visible .menu-word > span:last-child { transform: translateY(0); }

body[data-menu-state="open"] .menu-panel {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}

body[data-menu-state="open"] .menu-backdrop {
  animation: menu-open-shell 650ms cubic-bezier(0.76, 0, 0.24, 1) both;
}

body[data-menu-state="closing"] .menu-panel {
  visibility: visible;
  opacity: 1;
  pointer-events: none;
  transition: none;
}

body[data-menu-state="closing"] .menu-backdrop {
  animation: menu-close-shell 650ms cubic-bezier(0.76, 0, 0.24, 1) both;
}

@keyframes menu-open-shell {
  0% { top: 30px; width: min(500px, calc(100vw - 40px)); height: 64px; background: #141414; border-radius: 2px; }
  24% { top: 59px; width: 72vw; height: 4px; background: #141414; }
  46% { top: 0; width: 100vw; height: 4px; background: #2b2a29; border-radius: 0; }
  62% { top: 0; width: 100vw; height: 100px; background: #5e5a54; border-radius: 0; }
  100% { top: 0; width: 100vw; height: 100vh; height: 100dvh; background: var(--paper-warm); border-radius: 0; }
}

@keyframes menu-close-shell {
  0% { top: 0; width: 100vw; height: 100vh; height: 100dvh; background: var(--paper-warm); border-radius: 0; }
  24% { top: 0; width: 100vw; height: 146px; background: #5e5a54; }
  34% { top: 59px; width: 100vw; height: 6px; background: #2b2a29; }
  62% { top: 59px; width: 68vw; height: 6px; background: #141414; }
  100% { top: 30px; width: min(500px, calc(100vw - 40px)); height: 64px; background: #141414; border-radius: 2px; }
}

body[data-menu-state="open"] .menu-row {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

body[data-menu-state="open"] .menu-row:nth-child(1) { transition-delay: 330ms; }
body[data-menu-state="open"] .menu-row:nth-child(2) { transition-delay: 375ms; }
body[data-menu-state="open"] .menu-row:nth-child(3) { transition-delay: 420ms; }
body[data-menu-state="open"] .menu-row:nth-child(4) { transition-delay: 465ms; }
body[data-menu-state="open"] .menu-row:nth-child(5) { transition-delay: 510ms; }
body[data-menu-state="open"] .menu-row:nth-child(6) { transition-delay: 555ms; }

/* Opening 600dvh track */

.scroll-track {
  position: relative;
  height: 600vh;
  height: 600dvh;
  background: var(--graphite);
}

.hero-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: clip;
  isolation: isolate;
  background: #c9c4bd;
  touch-action: pan-y;
}

.hero-media,
.hero-scene,
.hero-render-canvas,
.hero-media-wash,
.hero-ambient-flow,
.hero-particle-field,
.hero-chroma,
.hero-editorial,
.desktop-story,
.story-atmosphere {
  position: absolute;
  inset: 0;
}

.hero-media {
  z-index: -4;
  background: #c9c4bd;
}

/* Desktop hero is rendered through an independent canvas so the image can
   react to pointer motion and crossfade as a single visual field. */
.hero-render-canvas {
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-ambient-flow {
  z-index: 1;
  overflow: hidden;
  opacity: calc((1 - var(--story-visible)) * 0.82);
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 34% 46% at 18% 38%, rgba(99, 178, 224, 0.17), transparent 70%),
    radial-gradient(ellipse 38% 48% at 81% 58%, rgba(208, 132, 72, 0.14), transparent 70%),
    linear-gradient(125deg, transparent 14%, rgba(255, 255, 255, 0.06) 46%, transparent 70%);
  animation: hero-ambient-drift 17s cubic-bezier(0.22, 1, 0.36, 1) infinite alternate;
  will-change: transform, background-position;
}

.hero-ambient-flow::after {
  content: "";
  position: absolute;
  inset: -20%;
  opacity: 0.55;
  background:
    repeating-linear-gradient(117deg, transparent 0 12%, rgba(255, 255, 255, 0.075) 12.2% 12.35%, transparent 12.55% 24%),
    repeating-linear-gradient(63deg, transparent 0 18%, rgba(80, 170, 230, 0.06) 18.2% 18.42%, transparent 18.7% 36%);
  filter: blur(16px);
  animation: hero-ambient-streak 12s linear infinite;
}

.hero-particle-field {
  z-index: 4;
  width: 100%;
  height: 100%;
  opacity: calc((1 - var(--story-visible)) * 1);
  pointer-events: none;
  mix-blend-mode: screen;
  will-change: opacity;
}

@keyframes hero-ambient-drift {
  0% { transform: scale(1.05) translate3d(-2.5%, 1%, 0) rotate(-1deg); background-position: 0% 0%, 100% 100%, 0% 50%; }
  48% { transform: scale(1.12) translate3d(1.5%, -1.5%, 0) rotate(0.8deg); background-position: 30% 55%, 70% 20%, 48% 44%; }
  100% { transform: scale(1.08) translate3d(3%, 2%, 0) rotate(1.5deg); background-position: 100% 80%, 0% 10%, 100% 55%; }
}

@keyframes hero-ambient-streak {
  from { transform: translate3d(-8%, -3%, 0) rotate(-2deg); }
  to { transform: translate3d(8%, 3%, 0) rotate(2deg); }
}

.hero-scene {
  visibility: hidden;
  opacity: 0;
  transform: scale(1.025);
  filter: saturate(0.32) contrast(1.02) brightness(0.52);
  transition:
    opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 620ms,
    transform 1100ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 1100ms ease;
}

.hero-scene[data-hero-scene="0"] { filter: saturate(0.16) contrast(1.16) brightness(0.48); }
.hero-scene[data-hero-scene="1"] { filter: saturate(1.02) contrast(0.98) brightness(1.0); }
.hero-scene[data-hero-scene="2"] { filter: saturate(0.28) contrast(1.05) brightness(0.48); }
.hero-scene[data-hero-scene="3"] { filter: saturate(0.34) contrast(1.02) brightness(0.58); }
.hero-scene[data-hero-scene="4"] { filter: saturate(0.3) contrast(1.06) brightness(0.46); }

.hero-scene img {
  object-fit: cover;
  object-position: 50% 52%;
}

.hero-scene-brand {
  position: absolute;
  top: 44%;
  left: 50%;
  z-index: 5;
  display: none;
  justify-items: center;
  gap: 3px;
  color: #f7f5ef;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, -50%) rotate(-18deg);
}

.hero-scene-brand .mark-shape {
  width: 31px;
  height: 23px;
}

.hero-scene-brand small {
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.2em;
}

.hero-scene.is-active {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
  transition-delay: 0s;
}

.hero-scene.is-outgoing {
  visibility: visible;
  opacity: 0;
  transform: scale(1.018) translateX(-0.8%);
  filter: saturate(0.64) contrast(1.16) brightness(0.48) hue-rotate(-8deg);
}

.hero-scene.is-incoming {
  visibility: visible;
  opacity: 1;
  transform: scale(1.012) translateX(0.5%);
  filter: saturate(0.55) contrast(1.1) brightness(0.55) hue-rotate(5deg);
}

body:not([data-hero-phase="idle"]) .hero-scene.is-outgoing img,
body:not([data-hero-phase="idle"]) .hero-scene.is-incoming img {
  filter: url("#hero-liquid-filter") grayscale(0.56) contrast(1.12);
  will-change: filter, transform, clip-path;
}

body[data-hero-phase="out"] .hero-scene.is-outgoing img {
  transform: scale(1.035) translateX(-0.7%) skewX(-0.35deg);
}

body[data-hero-phase="glitch"] .hero-scene.is-outgoing img {
  clip-path: polygon(0 0, 100% 0, 100% 36%, 92% 41%, 100% 47%, 100% 100%, 0 100%, 0 62%, 8% 57%, 0 51%);
  transform: scale(1.055) translateX(-1.4%) skewX(-0.8deg);
}

body[data-hero-phase="glitch"] .hero-scene.is-incoming img {
  clip-path: polygon(0 0, 100% 0, 100% 51%, 94% 57%, 100% 62%, 100% 100%, 0 100%, 0 47%, 7% 41%, 0 36%);
  transform: scale(1.045) translateX(1.1%) skewX(0.65deg);
}

body[data-hero-phase="enter"] .hero-scene.is-incoming img {
  clip-path: inset(0);
  transform: scale(1.018) translateX(0.35%);
}

.hero-media-wash {
  z-index: 3;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.50) 74%, rgba(0, 0, 0, 0.74) 100%),
    linear-gradient(180deg, rgba(4, 5, 5, 0.34) 0%, rgba(4, 5, 5, 0.42) 58%, rgba(4, 5, 5, 0.68) 100%),
    linear-gradient(90deg, rgba(4, 5, 5, 0.48), transparent 28%, transparent 72%, rgba(4, 5, 5, 0.44));
  pointer-events: none;
}

/* The target hero keeps media as a dark material field; preserving this
   contrast is necessary for the oversized white typography to remain legible. */
.hero-media-wash::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
}

body[data-hero-index="0"] .hero-media-wash {
  background:
    radial-gradient(circle at 50% 44%, rgba(3, 4, 4, 0.22), rgba(3, 4, 4, 0.46) 62%, rgba(0, 0, 0, 0.68) 100%),
    linear-gradient(180deg, rgba(4, 5, 5, 0.26), rgba(4, 5, 5, 0.52));
}

body[data-hero-index="0"] .hero-scene.is-active img {
  animation: hero-phone-drift 18s ease-in-out infinite alternate;
}

body[data-hero-index="1"] .hero-scene.is-active img { animation: hero-mushroom-drift 16s ease-in-out infinite alternate; }
body[data-hero-index="2"] .hero-scene.is-active img { animation: hero-fold-drift 14s ease-in-out infinite alternate; }
body[data-hero-index="3"] .hero-scene.is-active img { animation: hero-orb-drift 15s ease-in-out infinite alternate; }
body[data-hero-index="4"] .hero-scene.is-active img { animation: hero-vessel-drift 17s ease-in-out infinite alternate; }

body[data-hero-index="1"] .hero-ambient-flow {
  background:
    radial-gradient(ellipse 36% 48% at 18% 28%, rgba(150, 236, 215, 0.22), transparent 72%),
    radial-gradient(ellipse 38% 50% at 76% 74%, rgba(228, 192, 121, 0.18), transparent 72%),
    linear-gradient(125deg, transparent 14%, rgba(255, 255, 255, 0.07) 46%, transparent 70%);
}

body[data-hero-index="2"] .hero-ambient-flow { filter: hue-rotate(26deg) saturate(1.12); }
body[data-hero-index="3"] .hero-ambient-flow { filter: hue-rotate(-18deg) saturate(1.15); }
body[data-hero-index="4"] .hero-ambient-flow { filter: hue-rotate(34deg) saturate(0.9); }

body[data-hero-index="1"] .hero-media-wash {
  background:
    linear-gradient(180deg, rgba(240, 244, 243, 0.05), rgba(34, 40, 39, 0.08) 74%, rgba(9, 12, 12, 0.18)),
    linear-gradient(90deg, rgba(14, 18, 18, 0.06), transparent 34%, rgba(14, 18, 18, 0.1));
}

body[data-hero-index="1"] .hero-scene[data-hero-scene="1"] {
  filter: saturate(1.16) contrast(0.94) brightness(1.48);
}

@keyframes hero-phone-drift {
  0% { transform: scale(1.015) translate3d(-1.2%, -0.5%, 0) rotate(-0.15deg); }
  48% { transform: scale(1.045) translate3d(0.6%, 0.4%, 0) rotate(0.12deg); }
  100% { transform: scale(1.03) translate3d(1.4%, -0.3%, 0) rotate(-0.08deg); }
}

@keyframes hero-mushroom-drift {
  0% { transform: scale(1.03) translate3d(-1.1%, 0.4%, 0) rotate(-0.15deg); }
  50% { transform: scale(1.08) translate3d(0.9%, -0.8%, 0) rotate(0.12deg); }
  100% { transform: scale(1.05) translate3d(1.6%, 0.2%, 0) rotate(-0.08deg); }
}

@keyframes hero-fold-drift {
  0% { transform: scale(1.04) translate3d(-0.8%, 0.8%, 0) rotate(-0.2deg); }
  50% { transform: scale(1.09) translate3d(0.5%, -0.5%, 0) rotate(0.18deg); }
  100% { transform: scale(1.06) translate3d(1.2%, 0.3%, 0) rotate(-0.12deg); }
}

@keyframes hero-orb-drift {
  0% { transform: scale(1.02) translate3d(0.7%, -0.8%, 0); }
  50% { transform: scale(1.08) translate3d(-0.8%, 0.8%, 0); }
  100% { transform: scale(1.05) translate3d(0.2%, -0.4%, 0); }
}

@keyframes hero-vessel-drift {
  0% { transform: scale(1.03) translate3d(-0.6%, 0.6%, 0) rotate(0.08deg); }
  50% { transform: scale(1.08) translate3d(0.7%, -0.6%, 0) rotate(-0.12deg); }
  100% { transform: scale(1.05) translate3d(1.1%, 0.2%, 0) rotate(0.06deg); }
}

.hero-chroma {
  z-index: 4;
  opacity: 0;
  background:
    linear-gradient(90deg, rgba(255, 45, 55, 0.22), transparent 32%),
    linear-gradient(270deg, rgba(0, 145, 255, 0.2), transparent 36%);
  mix-blend-mode: screen;
  pointer-events: none;
}

body[data-hero-phase="glitch"] .hero-chroma {
  animation: chroma-peak 400ms steps(4, end) both;
}

@keyframes chroma-peak {
  0% { opacity: 0; transform: translateX(0); }
  28% { opacity: 0.32; transform: translateX(-9px) skewX(-0.7deg); }
  55% { opacity: 0.6; transform: translateX(7px) skewX(0.9deg); }
  82% { opacity: 0.24; transform: translateX(-3px); }
  100% { opacity: 0; transform: translateX(0); }
}

.hero-editorial {
  z-index: 8;
  --line: rgba(255, 255, 255, 0.28);
  color: rgba(248, 247, 244, 0.94);
  opacity: calc(1 - var(--story-visible));
  transition: opacity 200ms linear;
  pointer-events: none;
}

body[data-hero-index="1"] .hero-editorial {
  --line: rgba(255, 255, 255, 0.28);
  color: rgba(248, 247, 244, 0.94);
}

.hero-editorial a,
.hero-editorial button {
  pointer-events: auto;
}

.hero-title-word {
  position: absolute;
  top: 4vh;
  font-size: 9.55vw;
  font-weight: 500;
  line-height: 0.88;
  letter-spacing: -0.062em;
  white-space: nowrap;
}

.hero-title-word--left {
  left: var(--viewport-pad);
  transform: scaleX(1.19);
  transform-origin: 0 50%;
}

.hero-title-word--right {
  right: var(--viewport-pad);
  transform: scaleX(1.21);
  transform-origin: 100% 50%;
}

/* Homepage option A: the Chinese company name is the first thing people read. */
.hero-brand-lockup {
  position: absolute;
  top: 14.2vh;
  left: calc(var(--viewport-pad) - 0.3vw);
  z-index: 9;
  pointer-events: none;
}

.hero-brand-lockup__name,
.hero-brand-lockup__english {
  margin: 0;
  white-space: nowrap;
}

.hero-brand-lockup__name {
  color: #f4f2ed;
  font-size: clamp(82px, 11.35vw, 174px);
  font-weight: 600;
  line-height: 0.88;
  letter-spacing: -0.035em;
  text-shadow: 0 10px 38px rgba(0, 0, 0, 0.52);
}

.hero-brand-lockup__name span,
.hero-brand-lockup__english span {
  color: #e8c890;
}

.hero-brand-lockup__name span {
  display: inline-block;
  margin-left: 0.065em;
  letter-spacing: -0.055em;
}

.hero-brand-lockup__english {
  margin-top: 24px;
  color: #e8c890;
  font-size: clamp(24px, 3.05vw, 47px);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.045em;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
}

.hero-editorial .hero-title {
  opacity: 0;
  visibility: hidden;
}

.hero-center-mark {
  position: absolute;
  top: 14.65vh;
  right: calc(var(--viewport-pad) + 4px);
  left: auto;
  display: block;
  align-items: center;
  transform: none;
}

.brand-logo-crop--hero {
  width: clamp(126px, 10.8vw, 168px);
  height: clamp(126px, 10.8vw, 168px);
}

.mark-shape--large {
  width: 30px;
  height: 26px;
}

.mark-shape--large i {
  width: 28px;
  height: 1px;
}

.hero-meta {
  position: absolute;
  top: 24vh;
  width: 122px;
  font-size: 12.99px;
  line-height: 1.7;
}

.hero-meta--left {
  display: none;
}

.hero-meta--left .meta-kicker {
  display: none;
}

.hero-meta--left ul {
  display: none;
}
.hero-meta--right {
  top: 34vh;
  right: var(--viewport-pad);
  width: 106px;
  text-align: right;
}

.hero-meta--right .meta-kicker { display: none; }

.hero-meta--right ul {
  margin-top: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.hero-meta--right li {
  padding: 7px 0 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}

.meta-kicker,
.section-kicker {
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.15em;
}

.hero-meta ul {
  margin-top: 10px;
}

.hero-meta li {
  white-space: nowrap;
}

.hero-quicknav {
  position: absolute;
  top: 49.75vh;
  left: var(--viewport-pad);
  display: flex;
  align-items: center;
  gap: 2.2vw;
  height: 20px;
  font-size: 12.99px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero-quicknav a {
  transition: opacity 160ms ease;
}

.hero-quicknav a:hover { opacity: 0.48; }

.hero-baseline {
  position: absolute;
  top: 53.08vh;
  left: var(--viewport-pad);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: calc(100% - (2 * var(--viewport-pad)));
  border-top: 1px solid var(--line);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.hero-baseline span {
  padding-top: 13px;
}

.hero-baseline span:nth-child(2),
.hero-baseline span:nth-child(3) { justify-self: center; }
.hero-baseline span:nth-child(4) { justify-self: end; }

.hero-mini-preview {
  position: absolute;
  top: 65.45vh;
  right: var(--viewport-pad);
  width: 14vw;
  height: 12.55vh;
  overflow: hidden;
  background: rgba(10, 11, 10, 0.72);
}

.hero-mini-preview__label {
  position: absolute;
  z-index: 2;
  left: 0;
  width: 100%;
  padding: 4px 5px;
  color: #151515;
  background: rgba(250, 250, 248, 0.94);
  font-size: 10px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: center;
}

.hero-mini-preview__label--top { top: 0; }
.hero-mini-preview__label--bottom { bottom: 0; }

.hero-mini-preview img {
  object-fit: cover;
  filter: grayscale(0.1) saturate(1.35) contrast(1.12) brightness(0.68);
}

.hero-mini-preview__logo {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  place-items: center;
  align-content: center;
  gap: 5px;
  color: #f5f3ec;
  background: #050505;
}

.hero-mini-preview__logo .mark-shape {
  width: 34px;
  height: 25px;
}

.hero-mini-preview__logo small {
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.2em;
}

body[data-hero-index="1"] .hero-mini-preview__label {
  display: none;
}

body[data-hero-index="1"] .hero-mini-preview img {
  opacity: 0;
}

body[data-hero-index="1"] .hero-mini-preview__logo {
  display: grid;
}

.hero-controller {
  position: absolute;
  top: 65.33vh;
  left: 50%;
  width: min(720px, calc(100vw - (2 * var(--viewport-pad))));
  transform: translateX(-50%);
}

.hero-counter {
  display: grid;
  grid-template-columns: 1fr auto auto auto 1fr;
  align-items: center;
  row-gap: 12px;
  column-gap: 0;
  height: 16px;
  font-size: 12.61px;
  line-height: 16px;
  letter-spacing: 0.02em;
}

.hero-current { justify-self: end; }
.hero-total { justify-self: start; opacity: 0.58; }
.hero-divider { opacity: 0.44; }

.hero-arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 21px;
  cursor: pointer;
}

.hero-arrow--previous { justify-self: start; }
.hero-arrow--next { justify-self: end; }

.hero-scene-name {
  height: 30px;
  margin-top: 24px;
  font-size: 16.04px;
  line-height: 30px;
  text-align: center;
}

.hero-wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 0.42vw, 7px);
  height: 50px;
  margin-top: 16px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.hero-wave i {
  display: block;
  width: 1px;
  height: var(--h);
  background: currentColor;
  transform-origin: 50% 100%;
  animation: wave-breathe 1600ms ease-in-out infinite alternate;
  animation-delay: calc(var(--h) * -8ms);
}

@keyframes wave-breathe {
  from { transform: scaleY(0.72); opacity: 0.52; }
  to { transform: scaleY(1); opacity: 0.92; }
}

.hero-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: 100%;
  height: 60px;
  margin-top: 8px;
  overflow: hidden;
  background: rgba(24, 25, 24, 0.18);
}

.hero-tab {
  position: relative;
  min-width: 0;
  height: 60px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  background: #73726e;
  cursor: pointer;
}

.hero-tab:last-child { border-right: 0; }

.hero-tab img {
  object-fit: cover;
  filter: grayscale(1) contrast(0.9);
  opacity: 0.58;
  transform: scale(1.02);
  transition: opacity 240ms ease, filter 240ms ease, transform 360ms ease;
}

.hero-tab:hover img,
.hero-tab.is-active img {
  opacity: 1;
  filter: grayscale(0.2) contrast(0.96);
  transform: scale(1.08);
}

.hero-tab span {
  position: absolute;
  right: 7px;
  bottom: 5px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 9px;
  letter-spacing: 0.08em;
}

.hero-tab.is-active::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: var(--paper-pale);
}

.hero-foot {
  position: absolute;
  bottom: 4.8vh;
  font-size: 11.46px;
  line-height: 1.5;
  letter-spacing: 0.015em;
}

.hero-foot--left { left: var(--viewport-pad); }

.hero-foot--center {
  left: 26.7%;
  display: grid;
  gap: 4px;
}

.hero-foot--right {
  right: var(--viewport-pad);
  display: grid;
  gap: 17px;
  text-align: right;
}

/* Desktop pinned story */

.desktop-story {
  z-index: 12;
  display: block;
  color: var(--paper-pale);
  overflow: hidden;
  background: #0b0c0b;
  opacity: var(--story-visible);
  pointer-events: none;
}

.story-atmosphere {
  z-index: -2;
  background:
    radial-gradient(ellipse 58% 84% at 0% 61%, rgb(218 222 216 / calc(var(--story-light) * 0.52)), transparent 68%),
    radial-gradient(ellipse 32% 42% at 52% 52%, rgb(128 135 129 / calc(var(--story-light) * 0.12)), transparent 70%),
    linear-gradient(96deg, #111311 0%, #0b0d0b 52%, #080908 100%);
}

.story-atmosphere::before,
.story-atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
}

.story-atmosphere::before {
  opacity: 0.22;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.52) 0 0.55px, transparent 0.75px);
  background-size: 3px 3px;
  mix-blend-mode: soft-light;
}

.story-atmosphere::after {
  background:
    linear-gradient(90deg, transparent 0 49.95%, rgba(255, 255, 255, 0.035) 50%, transparent 50.05%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 24%, transparent 82%, rgba(0, 0, 0, 0.38));
}

.story-state {
  position: absolute;
  inset: 0;
  z-index: 2;
  transition: opacity 90ms linear;
}

.story-state--intro {
  opacity: var(--story-intro);
}

.story-state--bridge {
  opacity: var(--story-bridge);
}

.story-state--second {
  opacity: var(--story-second);
}

.story-state--final {
  opacity: var(--story-final);
}

.story-wordfield {
  position: absolute;
  z-index: 0;
  display: flex;
  flex-direction: column;
  gap: 0.06em;
  width: 21vw;
  font-size: clamp(27px, 2.493vw, 35.9px);
  font-weight: 400;
  line-height: 1.43;
  letter-spacing: -0.045em;
  color: rgba(238, 238, 234, 0.54);
  opacity: calc(var(--story-wordfield) * 0.74);
  filter: blur(0.15px);
  will-change: transform, opacity;
}

.story-wordfield span {
  display: block;
  width: max-content;
  will-change: transform;
}

.story-metrics {
  position: absolute;
  top: auto;
  right: 7.2vw;
  bottom: 20vh;
  left: 7.2vw;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  opacity: var(--story-metrics, 0);
  transform: translate3d(0, var(--story-metrics-y, 42px), 0);
  transition: opacity 90ms linear, transform 120ms ease-out;
}

.story-metric-card {
  position: relative;
  display: flex;
  min-height: 172px;
  padding: 24px 18px;
  overflow: hidden;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(243, 239, 233, 0.34);
  border-radius: 5px;
  background:
    linear-gradient(145deg, rgba(243, 239, 233, 0.1), transparent 54%),
    rgba(17, 19, 17, 0.9);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.38), inset 0 1px rgba(255, 255, 255, 0.06);
  text-align: center;
  backdrop-filter: blur(14px);
}

.story-metric-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--metal), rgba(168, 141, 104, 0.08));
}

.story-metric-card::after {
  content: none;
}

.story-metric-card__value {
  display: block;
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-size: clamp(42px, 4.25vw, 64px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.055em;
  color: var(--paper-pale);
}

.story-metric-card__value small {
  margin-left: 0.08em;
  font-size: 0.46em;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--metal);
}

.story-metric-card p {
  margin: 22px 0 0;
  font-size: clamp(16px, 1.32vw, 20px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  color: rgba(243, 239, 233, 0.86);
}

.story-wordfield--west span:nth-child(4n + 1) { transform: translate3d(calc(var(--story-word-west-x) - 18px), 0, 0) rotate(-5deg); }
.story-wordfield--west span:nth-child(4n + 2) { transform: translate3d(calc(var(--story-word-west-x) + 12px), 0, 0) rotate(3deg); }
.story-wordfield--west span:nth-child(4n + 3) { transform: translate3d(calc(var(--story-word-west-x) + 26px), 0, 0) rotate(6deg); }
.story-wordfield--west span:nth-child(4n) { transform: translate3d(calc(var(--story-word-west-x) - 6px), 0, 0) rotate(-2deg); }
.story-wordfield--east span:nth-child(4n + 1) { transform: translate3d(calc(var(--story-word-east-x) + 22px), 0, 0) rotate(5deg); }
.story-wordfield--east span:nth-child(4n + 2) { transform: translate3d(calc(var(--story-word-east-x) - 9px), 0, 0) rotate(-3deg); }
.story-wordfield--east span:nth-child(4n + 3) { transform: translate3d(calc(var(--story-word-east-x) - 27px), 0, 0) rotate(-6deg); }
.story-wordfield--east span:nth-child(4n) { transform: translate3d(calc(var(--story-word-east-x) + 7px), 0, 0) rotate(2deg); }

.story-wordfield--west {
  top: 18%;
  left: 5.8%;
  text-align: right;
  align-items: flex-end;
  transform: translate3d(0, calc(var(--story-word-y) + clamp(-286px, calc((var(--story-vh) - 1) * -254px), 0px)), 0);
}

.story-wordfield--east {
  top: 18.8%;
  right: 5.2%;
  text-align: left;
  transform: translate3d(0, calc(var(--story-word-y) + clamp(-250px, calc((var(--story-vh) - 1) * -224px), 0px)), 0);
}

/* Observable composition states: the reference repositions complete word
   fields as the story advances; it is not a continuously wiggling S curve. */
body[data-story-beat="1"] .story-wordfield--west { transform: translate3d(0, 0, 0); }
body[data-story-beat="2"] .story-wordfield--west { transform: translate3d(-14px, -188px, 0); }
body[data-story-beat="3"] .story-wordfield--west { transform: translate3d(18px, -372px, 0); }
body[data-story-beat="4"] .story-wordfield--west { transform: translate3d(-12px, -508px, 0); opacity: 0.34; }
body[data-story-beat="5"] .story-wordfield--west,
body[data-story-beat="6"] .story-wordfield--west { transform: translate3d(-30px, -620px, 0); opacity: 0; }
body[data-story-beat="1"] .story-wordfield--east { transform: translate3d(0, 0, 0); }
body[data-story-beat="2"] .story-wordfield--east { transform: translate3d(0, 0, 0); }
body[data-story-beat="3"] .story-wordfield--east { transform: translate3d(-16px, -344px, 0); }
body[data-story-beat="4"] .story-wordfield--east { transform: translate3d(12px, -480px, 0); opacity: 0.34; }
body[data-story-beat="5"] .story-wordfield--east,
body[data-story-beat="6"] .story-wordfield--east { transform: translate3d(30px, -590px, 0); opacity: 0; }

/* Screen two: every word has its own ascent; neither column is translated as
   one block. This preserves the reference's irregular twin trajectories. */
body[data-story-beat="2"] .story-wordfield--west { transform: translate3d(0, -340px, 0); }
body[data-story-beat="2"] .story-wordfield--west span:nth-child(1) { transform: translate3d(-32px, -16px, 0) rotate(-4deg); }
body[data-story-beat="2"] .story-wordfield--west span:nth-child(2) { transform: translate3d(18px, 10px, 0) rotate(3deg); }
body[data-story-beat="2"] .story-wordfield--west span:nth-child(3) { transform: translate3d(38px, -8px, 0) rotate(5deg); }
body[data-story-beat="2"] .story-wordfield--west span:nth-child(4) { transform: translate3d(-12px, 17px, 0) rotate(-3deg); }
body[data-story-beat="2"] .story-wordfield--west span:nth-child(5) { transform: translate3d(24px, -12px, 0) rotate(3deg); }
body[data-story-beat="2"] .story-wordfield--west span:nth-child(6) { transform: translate3d(-18px, 13px, 0) rotate(-3deg); }
body[data-story-beat="2"] .story-wordfield--east { transform: translate3d(0, -365px, 0); }
body[data-story-beat="2"] .story-wordfield--east span:nth-child(1) { transform: translate3d(30px, -13px, 0) rotate(4deg); }
body[data-story-beat="2"] .story-wordfield--east span:nth-child(2) { transform: translate3d(-14px, 11px, 0) rotate(-3deg); }
body[data-story-beat="2"] .story-wordfield--east span:nth-child(3) { transform: translate3d(-37px, -6px, 0) rotate(-5deg); }
body[data-story-beat="2"] .story-wordfield--east span:nth-child(4) { transform: translate3d(14px, 16px, 0) rotate(3deg); }
body[data-story-beat="2"] .story-wordfield--east span:nth-child(5) { transform: translate3d(-22px, -10px, 0) rotate(-3deg); }
body[data-story-beat="2"] .story-wordfield--east span:nth-child(6) { transform: translate3d(16px, 13px, 0) rotate(3deg); }

/* Screen two is a pair of independently positioned word paths.  The shape
   is a long S on each side, rather than a translated column of type. */
body[data-story-beat="1"] .story-wordfield--west span:nth-child(1) { transform: translate3d(88px, 0, 0) rotate(-2deg); }
body[data-story-beat="1"] .story-wordfield--west span:nth-child(2) { transform: translate3d(48px, 0, 0) rotate(1deg); }
body[data-story-beat="1"] .story-wordfield--west span:nth-child(3) { transform: translate3d(5px, 0, 0) rotate(2deg); }
body[data-story-beat="1"] .story-wordfield--west span:nth-child(4) { transform: translate3d(-43px, 0, 0) rotate(-1deg); }
body[data-story-beat="1"] .story-wordfield--west span:nth-child(5) { transform: translate3d(-78px, 0, 0) rotate(-3deg); }
body[data-story-beat="1"] .story-wordfield--west span:nth-child(6) { transform: translate3d(-98px, 0, 0) rotate(-2deg); }
body[data-story-beat="1"] .story-wordfield--west span:nth-child(7) { transform: translate3d(-57px, 0, 0) rotate(1deg); }
body[data-story-beat="1"] .story-wordfield--west span:nth-child(8) { transform: translate3d(-12px, 0, 0) rotate(2deg); }
body[data-story-beat="1"] .story-wordfield--west span:nth-child(9) { transform: translate3d(34px, 0, 0) rotate(2deg); }
body[data-story-beat="1"] .story-wordfield--west span:nth-child(10) { transform: translate3d(78px, 0, 0) rotate(-1deg); }
body[data-story-beat="1"] .story-wordfield--west span:nth-child(11) { transform: translate3d(108px, 0, 0) rotate(-2deg); }
body[data-story-beat="1"] .story-wordfield--west span:nth-child(12) { transform: translate3d(70px, 0, 0) rotate(1deg); }
body[data-story-beat="1"] .story-wordfield--east span:nth-child(1) { transform: translate3d(-86px, 0, 0) rotate(2deg); }
body[data-story-beat="1"] .story-wordfield--east span:nth-child(2) { transform: translate3d(-42px, 0, 0) rotate(-1deg); }
body[data-story-beat="1"] .story-wordfield--east span:nth-child(3) { transform: translate3d(2px, 0, 0) rotate(-2deg); }
body[data-story-beat="1"] .story-wordfield--east span:nth-child(4) { transform: translate3d(46px, 0, 0) rotate(1deg); }
body[data-story-beat="1"] .story-wordfield--east span:nth-child(5) { transform: translate3d(81px, 0, 0) rotate(3deg); }
body[data-story-beat="1"] .story-wordfield--east span:nth-child(6) { transform: translate3d(98px, 0, 0) rotate(2deg); }
body[data-story-beat="1"] .story-wordfield--east span:nth-child(7) { transform: translate3d(55px, 0, 0) rotate(-1deg); }
body[data-story-beat="1"] .story-wordfield--east span:nth-child(8) { transform: translate3d(9px, 0, 0) rotate(-2deg); }
body[data-story-beat="1"] .story-wordfield--east span:nth-child(9) { transform: translate3d(-38px, 0, 0) rotate(-2deg); }
body[data-story-beat="1"] .story-wordfield--east span:nth-child(10) { transform: translate3d(-78px, 0, 0) rotate(1deg); }
body[data-story-beat="1"] .story-wordfield--east span:nth-child(11) { transform: translate3d(-107px, 0, 0) rotate(2deg); }
body[data-story-beat="1"] .story-wordfield--east span:nth-child(12) { transform: translate3d(-70px, 0, 0) rotate(-1deg); }

/* The second composition is a pair of mirrored, per-word paths.  Each word
   climbs on its own delay and bends inward at the central white line. */
body[data-scroll-state="story"] .story-wordfield--west,
body[data-scroll-state="story"] .story-wordfield--east {
  transform: none !important;
}

body[data-scroll-state="story"] .story-wordfield--west span,
body[data-scroll-state="story"] .story-wordfield--east span {
  transform: translate3d(var(--story-line-x, 0px), var(--story-line-y, 0px), 0) rotate(var(--story-line-r, 0deg)) !important;
  transition: transform 80ms linear;
}

.story-crossline {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 1px;
  opacity: calc(0.1 + var(--story-crossline) * 0.72);
  background: linear-gradient(90deg, rgba(244, 242, 237, 0.08), rgba(244, 242, 237, 0.18) 42%, rgba(250, 248, 240, 0.92) 50%, rgba(244, 242, 237, 0.18) 58%, rgba(244, 242, 237, 0.08));
  transition: opacity 120ms linear;
}

.story-crossline::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: min(17vw, 250px);
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(250, 248, 240, 0.96), transparent);
  transform: translateX(-50%);
  box-shadow: 0 0 20px rgba(248, 245, 234, 0.22);
}

.story-dot-word {
  position: absolute;
  top: 41%;
  left: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 20vh;
  overflow: hidden;
  padding: 0 2vw;
  font-size: 13.7vw;
  font-weight: 600;
  line-height: 0.86;
  letter-spacing: -0.1em;
  opacity: 0.14;
}

.story-dot-word span {
  color: transparent;
  background-image: radial-gradient(circle, rgba(247, 246, 242, 0.92) 0 3.7px, transparent 4.15px);
  background-size: 13px 13px;
  -webkit-background-clip: text;
  background-clip: text;
}

.story-dot-ribbon {
  position: absolute;
  top: 43.5%;
  left: -12vw;
  z-index: 1;
  display: flex;
  width: 125vw;
  justify-content: flex-start;
  font-size: clamp(112px, 12.4vw, 178px);
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.07em;
  white-space: nowrap;
  color: transparent;
  opacity: 0.88;
  transform: translate3d(var(--story-ribbon-x), 0, 0);
  will-change: transform;
}

.story-dot-ribbon span:not(:first-child) { display: none; }

.story-dot-ribbon span,
.story-dot-glyph {
  color: transparent;
  background-image: radial-gradient(circle, rgba(248, 247, 243, 1) 0 5.5px, transparent 6.15px);
  background-size: 17px 17px;
  -webkit-background-clip: text;
  background-clip: text;
}

.story-dot-glyph {
  position: absolute;
  z-index: 3;
  display: block;
  font-size: clamp(94px, 10vw, 144px);
  font-weight: 700;
  line-height: 0.8;
}

.story-dot-glyph--intro { top: 50%; left: 3.2%; }
.story-dot-glyph--bridge { top: 45.2%; left: 33.6%; }
.story-dot-glyph--north-west { top: 15%; left: 2.7%; }
.story-dot-glyph--south-east { right: 18%; bottom: 9%; }
.story-dot-glyph--late-east { top: 1.8%; right: 18.7%; }
.story-dot-glyph--late-west { left: 27.7%; bottom: 18.5%; }
.story-dot-glyph--second-early { opacity: calc(1 - var(--story-second-phase)); }
.story-dot-glyph--second-late { opacity: var(--story-second-phase); }
.story-dot-glyph--final { top: 13%; left: 27%; opacity: var(--story-final-glyph); }

.story-micro,
.story-copy {
  position: absolute;
  z-index: 6;
  font-size: 10.5px;
  line-height: 1.42;
  letter-spacing: 0.01em;
  color: rgba(242, 241, 237, 0.72);
}

.story-micro--north {
  top: 29.5vh;
  left: 50%;
  transform: translateX(-50%);
}

.story-micro--upper-west { top: 13.8%; left: 11.3%; }
.story-micro--upper-east { top: 9.9%; right: 6.8%; text-align: right; }
.story-micro--lower-west { bottom: 12.2%; left: 4.7%; }
.story-micro--bridge-upper-west { top: 13.8%; left: 4.8%; }
.story-micro--bridge-lower-west { bottom: 23.4%; left: 4.8%; }
.story-micro--west { top: 50%; left: 7.6%; transform: translateY(-50%); }
.story-micro--middle-west { top: 56%; left: 26.7%; }
.story-micro--middle-east { top: 50%; right: 12.6%; }
.story-copy--west { top: 57%; left: 26.7%; }
.story-copy--east { top: 25.5%; right: 8.1%; text-align: right; }
.story-copy--south-west { left: 26.7%; bottom: 5%; }
.story-copy--north-east { top: 8.5%; right: 3.8%; text-align: right; }
.story-copy--bridge-west { top: 56.5%; left: 27.2%; }
.story-copy--bridge-south { left: 26.7%; bottom: 4.7%; }

.story-micro--final-north { top: 5%; right: 26%; }
.story-micro--final-west { top: 74%; left: 1.6%; }
.story-micro--final-east { right: 5%; bottom: 25%; }
.story-micro--final-south { right: 24.8%; bottom: 20%; }
.story-copy--final-west { top: 68%; left: 2%; font-weight: 600; }
.story-copy--final-east { top: 3%; right: 5%; text-align: right; }

.story-object {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  /* The reference holds portrait, resolves to a square, then enlarges in two steps. */
  width: var(--story-object-w, 180px);
  height: var(--story-object-h, 270px);
  max-width: min(631px, 66vw, 72vh);
  max-height: min(631px, 66vw, 72vh);
  opacity: clamp(0.62, calc(0.62 + var(--story-intro) * 0.38 + var(--story-second) * 0.38 + var(--story-final) * 0.38), 1);
  transform: translate(-50%, -50%);
  perspective: 1000px;
}

.story-object-shell {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: #252725;
  box-shadow: 0 36px 82px rgba(0, 0, 0, 0.56);
  transform: none;
}

/* Screen three resolves into a physical-looking folded object before the
   separate three-ring screen. */
body[data-story-beat="3"] .story-object-shell {
  overflow: visible;
  transform: none;
  transform-style: preserve-3d;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

body[data-story-beat="3"] .story-object-shell::before {
  content: none;
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid rgba(239, 236, 225, 0.32);
  background: linear-gradient(145deg, rgba(224, 231, 225, 0.25), rgba(8, 10, 10, 0.04) 48%, rgba(176, 189, 193, 0.2));
  transform: translate3d(18px, 24px, -28px);
  box-shadow: -18px 20px 0 rgba(9, 10, 10, 0.8);
}

body[data-story-beat="3"] .story-object-media--beat-3 {
  opacity: 0;
}
body[data-story-beat="3"] .story-object-media {
  opacity: 0 !important;
}

/* A true three-face object for the third composition: it grows from the
   portrait sequence rather than reading as a flat artwork on a tilted card. */
.story-cube {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(30vw, 360px);
  aspect-ratio: 1;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  transform-style: preserve-3d;
  transition: opacity 120ms linear;
}

body[data-story-beat="3"] .story-cube {
  opacity: 1;
  animation: story-cube-turn 6s ease-in-out infinite;
}

.story-cube__face {
  position: absolute;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(244, 242, 232, 0.33);
  background: #111;
  box-shadow: inset 0 0 48px rgba(0, 0, 0, 0.34);
  backface-visibility: hidden;
}
.story-cube__face img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.78) contrast(1.08) brightness(.82); }
.story-cube__face--front {
  top: 28%; left: 4%; width: 62%; height: 58%;
  z-index: 3; transform: none;
  clip-path: polygon(0 0, 100% 12%, 100% 100%, 0 88%);
}
.story-cube__face--right {
  top: 16%; left: 66%; width: 29%; height: 70%;
  z-index: 2; transform: none;
  clip-path: polygon(0 20%, 100% 0, 100% 79%, 0 100%);
}
.story-cube__face--top {
  top: 0; left: 4%; width: 91%; height: 34%;
  z-index: 4; transform: none;
  clip-path: polygon(0 73%, 39% 0, 100% 18%, 61% 100%);
  background: linear-gradient(128deg, #a4a8a4 0%, #404541 44%, #171917 100%);
}
.story-cube__face--top img { display: none; }
.story-cube__face--right img { filter: saturate(.9) contrast(1.16) brightness(.72) hue-rotate(16deg); }
.story-cube__face--top img { filter: saturate(.86) contrast(1.1) brightness(.92) hue-rotate(-12deg); }
@keyframes story-cube-turn {
  0%, 100% { transform: translate(-50%, -50%) perspective(1050px) rotateX(-3deg) rotateY(0deg) rotateZ(-2.5deg); }
  50% { transform: translate(-50%, -50%) perspective(1050px) rotateX(3deg) rotateY(0deg) rotateZ(2.5deg); }
}

.story-object-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.13), transparent 27%, transparent 66%, rgba(179, 189, 181, 0.13)),
    linear-gradient(180deg, transparent 72%, rgba(0, 0, 0, 0.24));
  mix-blend-mode: soft-light;
}

.story-object-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.05) brightness(0.88) saturate(0.88);
  transform: scale(1.08);
  transition: opacity 100ms linear;
}

.story-object-media--beat-1,
.story-object-media--beat-2 {
  filter: grayscale(0.45) contrast(1.08) brightness(0.78);
}

.story-object-media--beat-1 {
  filter: saturate(1.35) contrast(1.10) brightness(1.12);
}

.story-object-media--beat-2 {
  filter: grayscale(0.08) contrast(1.12) brightness(0.84);
}

.story-object-media--beat-3 {
  filter: grayscale(0.34) contrast(1.10) brightness(0.68) saturate(0.62);
}

.story-object-media--beat-4 {
  filter: grayscale(0.08) contrast(1.04) brightness(0.96) saturate(0.72);
}

.story-object-media--beat-5 {
  filter: contrast(1.04) brightness(1.14) saturate(0.98);
}

.story-object-media--beat-6 {
  filter: grayscale(0.92) contrast(1.08) brightness(0.18) saturate(0.2);
}

.story-object-media--beat-1 { opacity: var(--story-beat-1); }
.story-object-media--beat-2 { opacity: var(--story-beat-2); }
.story-object-media--beat-3 { opacity: var(--story-beat-3); }
.story-object-media--beat-4 { opacity: var(--story-beat-4); }
.story-object-media--beat-5 { opacity: var(--story-beat-5); }
.story-object-media--beat-6 { opacity: var(--story-beat-6); }

.story-object-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: rgba(250, 249, 245, 0.82);
  transform: translate(-50%, -50%);
}

.story-object-edge {
  position: absolute;
  z-index: 4;
  inset: 14%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transform: rotate(45deg);
  display: none;
  mix-blend-mode: overlay;
}

.story-object-edge--b {
  inset: 28%;
  transform: rotate(-45deg);
}

.story-state--final {
  z-index: 5;
}

.story-down {
  position: absolute;
  bottom: 3.4vh;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 8px;
  font-size: 9px;
  letter-spacing: 0.18em;
  transform: translateX(-50%);
}

.story-down i {
  display: block;
  width: 1px;
  height: 28px;
  background: currentColor;
}

.mobile-who {
  display: none;
}

/* Sectors */

.sectors {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: clip;
  background: #060606;
  color: var(--paper-pale);
}

.sector-marquee {
  position: absolute;
  top: 52.9%;
  left: 0;
  z-index: 2;
  display: grid;
  width: 100%;
  overflow: hidden;
  color: rgba(247, 245, 239, 0.085);
  font-size: clamp(52px, 8.4vw, 121px);
  font-weight: 600;
  line-height: 0.86;
  letter-spacing: -0.08em;
  white-space: nowrap;
  pointer-events: none;
  mix-blend-mode: screen;
}

.sector-marquee span {
  display: block;
  width: max-content;
  animation: sector-marquee-left 28s linear infinite;
}

.sector-marquee span + span {
  margin-top: -0.14em;
  animation-duration: 34s;
  animation-direction: reverse;
  opacity: 0.52;
}

@keyframes sector-marquee-left {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

.sectors::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0.32;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.46) 0 0.55px, transparent 0.8px);
  background-size: 3px 3px;
  mix-blend-mode: soft-light;
}

.sectors-heading {
  position: absolute;
  top: calc(26.2vh - 8px);
  left: 50%;
  z-index: 6;
  width: min(720px, 74vw);
  text-align: center;
  transform: translate3d(calc(-50% + var(--sector-copy-x)), var(--sector-copy-y), 0);
  will-change: transform;
}

.sectors-heading .section-kicker {
  display: none;
}

.sectors-heading h2 {
  font-size: 62.03px;
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.058em;
  transform: scaleX(1.27);
}

.sectors-heading > p:not(.section-kicker) {
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.16em;
}

.sectors-heading h2 + p { margin-top: 25px; }

.sector-metrics {
  position: absolute;
  top: 43.27vh;
  left: 0;
  z-index: 7;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 100%;
  padding: 0 7.3vw;
  transform: translate3d(var(--sector-copy-x), 0, 0);
  will-change: transform;
}

.sector-metrics > div {
  display: flex;
  align-items: baseline;
  gap: 0;
  padding-bottom: 12px;
  border-bottom: 0;
  color: #999;
}

.sector-metrics > div:nth-child(2) { justify-self: center; }
.sector-metrics > div:last-child { justify-self: end; }

.sector-metrics strong {
  font-size: 14px;
  font-weight: 500;
}

.sector-metrics span {
  font-size: 9px;
  letter-spacing: 0.13em;
}

.sector-planes,
.sector-media-band {
  position: absolute;
  z-index: 5;
}

.sector-media-band {
  top: 47.2vh;
  left: 7.33vw;
  width: 85.34vw;
  height: 16.98vh;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 0;
  pointer-events: none;
}

.sector-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  border: 1px solid rgba(228, 232, 224, 0.18);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(66deg) rotateZ(-8deg);
  transform-style: preserve-3d;
  pointer-events: none;
  mix-blend-mode: screen;
}

.sector-orbit::before,
.sector-orbit::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -7px;
  width: 13px;
  height: 13px;
  border: 1px solid rgba(245, 242, 235, 0.7);
  border-radius: 50%;
  background: #080909;
  box-shadow: 0 0 14px rgba(232, 218, 181, 0.42);
  transform: translateY(-50%);
}

.sector-orbit::after {
  left: auto;
  right: -7px;
}

.sector-orbit--outer {
  width: min(47vw, 680px);
  height: min(19vw, 280px);
  animation: sector-orbit-spin 18s linear infinite;
}

.sector-orbit--inner {
  width: min(31vw, 450px);
  height: min(13vw, 188px);
  border-color: rgba(228, 232, 224, 0.1);
  transform: translate(-50%, -50%) rotateX(66deg) rotateZ(14deg);
  animation: sector-orbit-spin-reverse 12s linear infinite;
}

.sector-orbit i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(240, 238, 231, 0.9);
  box-shadow: 0 0 12px rgba(225, 210, 169, 0.7);
}

.sector-orbit i:nth-child(1) { transform: translate(-50%, -50%) translateX(50%); }
.sector-orbit i:nth-child(2) { transform: translate(-50%, -50%) translateY(-50%); }
.sector-orbit i:nth-child(3) { transform: translate(-50%, -50%) translateX(-50%); }

@keyframes sector-orbit-spin {
  from { transform: translate(-50%, -50%) rotateX(66deg) rotateZ(-8deg); }
  to { transform: translate(-50%, -50%) rotateX(66deg) rotateZ(352deg); }
}

@keyframes sector-orbit-spin-reverse {
  from { transform: translate(-50%, -50%) rotateX(66deg) rotateZ(14deg); }
  to { transform: translate(-50%, -50%) rotateX(66deg) rotateZ(-346deg); }
}

.sector-planes {
  inset: 0;
}

.sector-plane {
  position: absolute;
  overflow: hidden;
  border: 0;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
  transform-origin: 50% 50%;
  will-change: transform;
}

.sector-plane::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 2;
  pointer-events: none;
  border: 1px solid rgba(255, 88, 67, 0.22);
  box-shadow: 2px 0 rgba(0, 189, 255, 0.18), -2px 0 rgba(255, 24, 98, 0.14);
  mix-blend-mode: screen;
}

.sector-plane::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: 0.58;
  background: var(--plane-tone, linear-gradient(135deg, #5f7781, #b67f59));
  mix-blend-mode: color;
}

.sector-plane:nth-child(4n + 1) { --plane-tone: linear-gradient(135deg, #516f80, #c66f50); }
.sector-plane:nth-child(4n + 2) { --plane-tone: linear-gradient(135deg, #b2a178, #6f7689); }
.sector-plane:nth-child(4n + 3) { --plane-tone: linear-gradient(135deg, #3e6476, #6b5276); }
.sector-plane:nth-child(4n) { --plane-tone: linear-gradient(135deg, #8f4e3c, #ad8d61); }

.sector-plane img {
  object-fit: cover;
  filter:
    saturate(0.72)
    contrast(1.24)
    brightness(0.58)
    drop-shadow(-1px 0 rgba(0, 190, 255, 0.22))
    drop-shadow(1px 0 rgba(255, 66, 32, 0.2));
}

.sector-plane:nth-child(3n + 1) img { object-position: 35% 45%; transform: scale(1.08); }
.sector-plane:nth-child(3n + 2) img { object-position: 70% 55%; transform: scale(1.15); }
.sector-plane:nth-child(3n) img { object-position: 50% 30%; transform: scale(1.05); }

.sector-plane--01 { top: 7vh; left: 20vw; width: 6vw; height: 9vh; transform: translateY(calc((var(--sector-progress) - 0.5) * -18px)) rotate(42deg); }
.sector-plane--02 { top: 14.8vh; left: 38vw; width: 5.6vw; height: 8vh; transform: translateY(calc((var(--sector-progress) - 0.5) * 24px)) rotate(-19deg); }
.sector-plane--03 { top: 7vh; left: 72vw; width: 5.5vw; height: 7.8vh; transform: translateY(calc((var(--sector-progress) - 0.5) * -14px)) rotate(28deg); }
.sector-plane--04 { top: 18vh; left: 14.5vw; width: 6.3vw; height: 9vh; transform: translateY(calc((var(--sector-progress) - 0.5) * 32px)) rotate(20deg); }
.sector-plane--05 { top: 19vh; left: 29.8vw; width: 5.8vw; height: 8vh; transform: translateY(calc((var(--sector-progress) - 0.5) * -36px)) rotate(-31deg); }
.sector-plane--06 { top: 18vh; left: 58.6vw; width: 5vw; height: 8vh; transform: translateY(calc((var(--sector-progress) - 0.5) * 26px)) rotate(27deg); }
.sector-plane--07 { top: 17vh; left: 78.3vw; width: 6.5vw; height: 7.6vh; transform: translateY(calc((var(--sector-progress) - 0.5) * -22px)) rotate(-18deg); }
.sector-plane--08 { top: 29vh; left: 29.8vw; width: 5vw; height: 7vh; transform: translateY(calc((var(--sector-progress) - 0.5) * 18px)) rotate(35deg); }
.sector-plane--09 { top: 30vh; left: 66.6vw; width: 5.6vw; height: 7vh; transform: translateY(calc((var(--sector-progress) - 0.5) * -28px)) rotate(31deg); }
.sector-plane--10 { top: 30vh; left: 82vw; width: 5.5vw; height: 6vh; transform: translateY(calc((var(--sector-progress) - 0.5) * 35px)) rotate(-13deg); }
.sector-plane--11 { top: 34vh; left: 11vw; width: 6.5vw; height: 8.8vh; transform: rotate(8deg); }
.sector-plane--12 { top: 45.5vh; left: 27.2vw; width: 4.6vw; height: 6.4vh; transform: rotate(3deg); }
.sector-plane--13 { top: 44.8vh; left: 83vw; width: 5.8vw; height: 6.4vh; transform: rotate(-4deg); }
.sector-plane--14 { top: 49vh; left: 10.8vw; width: 5.7vw; height: 7.7vh; transform: rotate(-6deg); }
.sector-plane--15 { top: 48vh; left: 69.4vw; width: 5.3vw; height: 6.6vh; transform: rotate(7deg); }
.sector-plane--16 { top: 59vh; left: 82.7vw; width: 6.2vw; height: 7vh; transform: rotate(13deg); }
.sector-plane--17 { top: 61vh; left: 29.7vw; width: 5.4vw; height: 6.7vh; transform: rotate(-22deg); }
.sector-plane--18 { top: 59.5vh; left: 65.6vw; width: 5.5vw; height: 6.3vh; transform: rotate(17deg); }
.sector-plane--19 { top: 66vh; left: 11.7vw; width: 6.4vw; height: 7.6vh; transform: rotate(-14deg); }
.sector-plane--20 { top: 74vh; left: 36.8vw; width: 5.2vw; height: 6.9vh; transform: rotate(28deg); }
.sector-plane--21 { top: 74vh; left: 57.5vw; width: 4.3vw; height: 7vh; transform: rotate(-22deg); }
.sector-plane--22 { top: 72vh; left: 78.5vw; width: 5.7vw; height: 8.5vh; transform: rotate(19deg); }
.sector-plane--23 { top: 78vh; left: 16vw; width: 6.7vw; height: 7.5vh; transform: rotate(-19deg); }
.sector-plane--24 { top: 84vh; left: 72.5vw; width: 6vw; height: 8vh; transform: rotate(37deg); }
.sector-plane--25 { top: 87vh; left: 24vw; width: 5.8vw; height: 7vh; transform: rotate(22deg); }

.sector-core {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  display: grid;
  place-items: center;
  width: 170px;
  height: 170px;
  color: var(--paper-pale);
  background: transparent;
  box-shadow: none;
  transform-style: preserve-3d;
  transform: translate3d(-50%, -50%, 0) scale(var(--sector-core-scale));
  transition: transform 260ms ease-out;
  will-change: transform;
}

.sector-core-inner {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  perspective: 760px;
}

.sector-core-rotor {
  position: relative;
  width: 142px;
  height: 142px;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  animation: sector-core-yaw 7.4s linear infinite;
  will-change: transform;
}

.sector-core-art {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 4;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  box-shadow: none;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  filter: contrast(1.04) saturate(0.82) drop-shadow(0 0 11px rgba(232, 200, 144, 0.12));
}

.sector-core-slab {
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(90deg, #111416 0%, #3e3425 24%, #b28a4d 51%, #2c2d2d 100%);
  -webkit-mask: url("assets/generated/sector-core-n-3d-v3.png") center / contain no-repeat;
  mask: url("assets/generated/sector-core-n-3d-v3.png") center / contain no-repeat;
  opacity: 0.97;
  transform: translateZ(var(--z));
  transform-style: preserve-3d;
}

.sector-core-art--front { transform: translateZ(21px); }
.sector-core-art--back { transform: rotateY(180deg) translateZ(21px); }

@keyframes sector-core-yaw {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

.sector-summary {
  position: absolute;
  top: 63.02vh;
  left: 50%;
  z-index: 8;
  width: min(500px, 70vw);
  font-size: 10px;
  line-height: 1.45;
  letter-spacing: 0.08em;
  text-align: center;
  transform: translate3d(calc(-50% + var(--sector-copy-x)), var(--sector-copy-y), 0);
  will-change: transform;
  color: #a0a0a0;
}

.sector-list {
  position: absolute;
  top: 69.42vh;
  left: 50%;
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: center;
  gap: 7vw;
  width: 90%;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  transform: translate3d(calc(-50% + var(--sector-copy-x)), var(--sector-copy-y), 0);
  will-change: transform;
  color: #a0a0a0;
}

/* Bilingual service workspaces */

.service-workspaces {
  position: absolute;
  top: 38.5vh;
  left: 50%;
  z-index: 9;
  width: min(82vw, 1120px);
  color: var(--paper-pale);
  transform: translateX(-50%);
  pointer-events: auto;
}

.service-workspaces__header {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.service-workspaces__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(14px, 1.5vw, 24px);
  width: 100%;
}

.service-workspace {
  min-width: 0;
  border: 1px solid rgba(245, 242, 235, 0.24);
  border-radius: clamp(16px, 1.5vw, 24px);
  background: rgba(7, 8, 12, 0.58);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.service-workspace--intro {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  min-height: 90px;
  padding: clamp(18px, 1.8vw, 26px) clamp(22px, 2.5vw, 38px);
}

.service-workspace--intro p {
  width: 100%;
  max-width: none;
  margin: 0;
  color: #fff;
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 600;
  line-height: 1.9;
  letter-spacing: 0;
  text-wrap: wrap;
  overflow-wrap: break-word;
}

.service-workspace--card {
  display: flex;
  flex-direction: column;
  min-height: 290px;
  padding: clamp(20px, 2vw, 30px) clamp(18px, 1.8vw, 28px);
}

.service-workspace--card h3 {
  margin: 0 0 clamp(14px, 1.4vw, 22px);
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 600;
  line-height: 1.6;
  text-wrap: balance;
}

.service-workspace--card h3 span {
  display: block;
  margin-top: 5px;
  color: #aaa9a3;
  font-size: clamp(13px, 0.98vw, 15px);
  font-weight: 400;
}

.service-workspace--card p {
  margin: 0;
  color: rgba(245, 242, 235, 0.78);
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.7;
  text-wrap: pretty;
  overflow-wrap: break-word;
}

@media (max-width: 760px) {
  .service-workspaces {
    top: 39vh;
    right: 16px;
    bottom: 3vh;
    left: 16px;
    width: auto;
    transform: none;
  }

  .service-workspaces__grid {
    grid-template-columns: 1fr;
    height: 100%;
    overflow-y: auto;
    padding-right: 2px;
  }

  .service-workspace {
    min-height: max-content;
  }

  .service-workspace--intro {
    grid-column: auto;
    padding: 20px;
  }

  .service-workspace--intro p {
    font-size: 15px;
  }

  .service-workspace--card {
    min-height: 0;
    padding: 22px 20px 26px;
  }
}

/* Archive title + six-item moving register */

.archive {
  position: relative;
  padding-bottom: clamp(120px, 16vh, 220px);
  background:
    radial-gradient(
      ellipse 68% 66% at 10% 52%,
      rgb(174 183 179 / 0.72) 0,
      rgb(104 112 109 / 0.56) 38%,
      rgb(22 26 25 / 0.16) 68%,
      transparent 77%
    ),
    #060807;
  background-attachment: fixed, scroll;
  background-repeat: no-repeat;
  background-size: 100vw 100vh, auto;
  color: var(--paper-pale);
}

.archive-title-stage {
  position: relative;
  top: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  height: clamp(280px, 32vh, 360px);
  height: clamp(280px, 32dvh, 360px);
  overflow: hidden;
}

.archive-heading {
  width: min(820px, 74vw);
  text-align: center;
  transform: translateY(0);
}

.archive-heading h2 {
  display: grid;
  justify-items: center;
  font-size: 62.03px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.archive-title-line {
  display: flex;
  justify-content: center;
  gap: 0.24em;
  white-space: nowrap;
}

.archive-title-line:nth-child(1) { transform: scaleX(1.18); }
.archive-title-line:nth-child(2) { transform: scaleX(1.2); }
.archive-title-line:nth-child(3) { transform: scaleX(1.1); }

.archive-gallery {
  position: relative;
  z-index: 4;
  display: grid;
  gap: clamp(110px, 16vh, 190px);
  width: min(1380px, 92vw);
  margin: 0 auto;
}

.archive-card {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  align-items: center;
  gap: clamp(48px, 7vw, 128px);
  width: 100%;
}

.archive-card figure {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: clamp(18px, 2.2vw, 32px);
  background: #aaa6a0;
  box-shadow: 0 36px 74px rgba(0, 0, 0, 0.28);
}

.archive-card img {
  object-fit: cover;
  filter: grayscale(0.5) contrast(0.96);
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1), filter 400ms ease;
}

.archive-card:hover img {
  filter: grayscale(0.12) contrast(1);
  transform: scale(1.035);
}

.archive-card--02 figure {
  grid-column: 2;
  aspect-ratio: 4 / 3;
}

.archive-card--02 .archive-case-copy {
  grid-row: 1;
  grid-column: 1;
}

.archive-case-copy {
  max-width: 560px;
}

.archive-card .archive-case-copy h3 {
  margin-bottom: 22px;
  font-size: clamp(22px, 2.3vw, 36px);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.035em;
}

.archive-case-copy > p:last-child {
  color: rgb(239 243 240 / 0.72);
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.9;
}

/* AI platform ecosystem */

.client-trust {
  position: relative;
  z-index: 5;
  padding: clamp(110px, 12vh, 156px) 3vw clamp(120px, 14vh, 180px);
  overflow: hidden;
  background:
    radial-gradient(ellipse 58% 48% at 50% 0%, rgba(119, 128, 122, 0.24), transparent 68%),
    linear-gradient(180deg, #070908 0%, #101210 48%, #050605 100%);
  color: var(--paper-pale);
}

.client-trust::before {
  content: "";
  position: absolute;
  top: 0;
  right: 3vw;
  left: 3vw;
  height: 1px;
  background: rgba(243, 239, 233, 0.2);
}

.client-trust__header {
  width: min(980px, 88vw);
  margin: 0 auto clamp(64px, 8vh, 96px);
  text-align: center;
}

.client-trust__kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 0 28px;
  color: rgba(243, 239, 233, 0.72);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
}

.client-trust__kicker::before,
.client-trust__kicker::after {
  content: "";
  width: 42px;
  height: 1px;
  background: var(--metal);
}

.client-trust__header h2 {
  margin: 0;
  font-size: clamp(38px, 4.5vw, 68px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.055em;
}

.client-trust__note {
  margin: 18px 0 0;
  font-size: 13px;
  letter-spacing: 0.02em;
  opacity: 0.62;
}

.client-trust__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  width: min(1320px, 94vw);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  background: transparent;
}

.client-trust__grid li {
  position: relative;
  display: flex;
  min-height: 142px;
  padding: 22px 12px 18px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--paper-pale);
  align-items: center;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
  text-align: center;
  transition: transform 260ms ease, box-shadow 260ms ease;
}

.platform-logo {
  display: block;
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  object-fit: contain;
  transform: scale(1);
  transition: transform 260ms ease;
}

.platform-logo__name {
  color: #171a18;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.02em;
  line-height: 1.35;
}

.client-trust__grid li:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34);
}

.client-trust__grid li:hover .platform-logo {
  transform: scale(1.06);
}

/* FAQ */

.faq-section {
  display: grid;
  grid-template-columns: clamp(260px, 22vw, 420px) clamp(560px, 43vw, 760px);
  justify-content: center;
  gap: 5cm;
  padding: clamp(72px, 9vh, 108px) 4vw;
  background: var(--paper);
  color: var(--ink);
}

.faq-section__header {
  position: static;
  align-self: start;
}

.faq-section__header h2 {
  margin: 0;
  font-size: clamp(38px, 4.5vw, 68px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.055em;
}

.faq-section__header > p:last-child {
  max-width: 380px;
  margin: 24px 0 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.7;
}

.faq-list {
  border-top: 1px solid var(--line);
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;
  padding: 22px 8px;
  cursor: pointer;
  font-size: clamp(15px, 1.25vw, 19px);
  font-weight: 500;
  line-height: 1.25;
  list-style: none;
}

.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { color: var(--metal); font-size: inherit; letter-spacing: inherit; }

.faq-list details p {
  max-width: 660px;
  margin: -7px 8px 0 76px;
  padding: 0 0 24px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.8;
}

@media (max-width: 1000px) {
  .client-trust__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 768px) and (max-width: 1200px) {
  .faq-section {
    grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
    gap: clamp(48px, 7vw, 84px);
  }
}

@media (max-width: 600px) {
  .client-trust { padding: 86px 20px 100px; }
  .client-trust__header { width: 100%; margin-bottom: 52px; }
  .client-trust__header h2 { font-size: clamp(35px, 10.2vw, 48px); }
  .client-trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .client-trust__grid li { min-height: 124px; padding: 18px 10px 16px; gap: 12px; }
  .platform-logo { width: 50px; height: 50px; }
  .platform-logo__name { font-size: 13px; }
}

/* Footer */

.site-footer {
  position: relative;
  height: 88.89vh;
  height: 88.89dvh;
  min-height: 800px;
  overflow: hidden;
  background: #000;
  color: var(--paper-pale);
}

.footer-rule {
  position: absolute;
  top: 64px;
  right: 2.5vw;
  left: 2.5vw;
  z-index: 3;
  height: 1px;
  background: rgba(255, 255, 255, 0.16);
}

.footer-eyebrows {
  position: absolute;
  top: 116px;
  right: 2.5vw;
  left: 2.5vw;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  font-size: 12.988px;
  line-height: 18.18px;
  letter-spacing: 1.558px;
}

.footer-eyebrows span:nth-child(2) { text-align: center; }
.footer-eyebrows span:last-child { text-align: right; }

.footer-description {
  position: absolute;
  top: 188px;
  left: 2.5vw;
  z-index: 3;
  width: min(450px, 32vw);
  color: #888;
  font-size: clamp(11px, 0.9vw, 12.988px);
  line-height: 1.7;
  letter-spacing: 0;
}

.footer-contact {
  position: absolute;
  top: 286px;
  left: 2.5vw;
  z-index: 3;
  display: grid;
  justify-items: start;
}

.footer-email {
  font-size: clamp(38px, 3.48vw, 50px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.058em;
}

.footer-phone {
  margin-top: 16px;
  font-size: clamp(24px, 2.1vw, 30px);
  line-height: 1;
  letter-spacing: -0.03em;
}

.footer-address {
  margin-top: 16px;
  color: #888;
  font-size: 14px;
  line-height: 1.4;
}

.footer-direct-contact {
  display: grid;
  gap: 7px;
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: 0.04em;
}

.footer-direct-contact a { color: rgba(243, 239, 233, 0.72); }
.footer-direct-contact a:hover { color: var(--paper-pale); }

.footer-social-title {
  margin-top: 22px;
  color: #888;
  font-size: 12px;
  letter-spacing: 0.06em;
}

.footer-social-platforms {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.footer-social-platforms a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(243, 239, 233, 0.24);
  border-radius: 10px;
  background: rgba(243, 239, 233, 0.07);
  transition: background 180ms ease, transform 180ms ease;
}

.footer-social-platforms a:hover {
  background: rgba(243, 239, 233, 0.16);
  transform: translateY(-2px);
}

.footer-social-platforms img {
  width: 19px;
  height: 19px;
  filter: invert(1) opacity(0.86);
}

.footer-contact > .footer-social { margin-top: 24px; }

@media (max-width: 767px) {
  .faq-section {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 68px 20px 78px;
  }
  .faq-section__header { position: static; }
  .faq-section__header h2 { font-size: clamp(35px, 10.2vw, 48px); }
  .faq-list summary { grid-template-columns: 32px 1fr; gap: 12px; padding: 18px 0; }
  .faq-list details p { margin-left: 44px; padding-bottom: 20px; }
  .site-footer { height: 760px; min-height: 760px; }
}

.footer-social {
  display: flex;
  gap: clamp(22px, 2.35vw, 34px);
  margin-top: 38px;
  font-size: 12.988px;
  line-height: 18.18px;
  letter-spacing: 1.558px;
}

.footer-preview {
  position: absolute;
  top: 151px;
  right: 2.5vw;
  z-index: 3;
  width: 23.6vw;
  height: 191px;
  overflow: hidden;
  background: #171817;
}

.footer-preview img {
  object-fit: cover;
  filter: grayscale(0.25) contrast(1.08) brightness(0.78);
}

.footer-copyright-symbol {
  position: absolute;
  top: 438px;
  right: 5.8vw;
  z-index: 3;
  font-size: clamp(110px, 10.1vw, 145px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.09em;
}

.footer-legal {
  position: absolute;
  top: 529px;
  left: 2.8vw;
  z-index: 3;
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  line-height: 20.4px;
  letter-spacing: 0.035em;
}

.footer-legal-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 2ch;
  margin: 0;
}

.footer-material {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 280px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(238, 238, 238, 0.14), rgba(125, 125, 125, 0.12)),
    repeating-linear-gradient(94deg, rgba(255, 255, 255, 0.11) 0 1px, transparent 1px 7px),
    #999b9b;
}

.footer-material::before {
  content: "SOUTH";
  position: absolute;
  top: 47px;
  left: 2.8vw;
  z-index: 2;
  color: rgba(239, 239, 239, 0.08);
  font-size: clamp(150px, 15.4vw, 222px);
  font-weight: 700;
  line-height: 0.84;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-shadow:
    0 2px 0 rgba(255, 255, 255, 0.2),
    0 -2px 0 rgba(45, 45, 45, 0.22),
    0 10px 18px rgba(65, 65, 65, 0.12);
  -webkit-text-stroke: 2px rgba(58, 58, 58, 0.2);
}

.footer-material::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(130, 133, 133, 0.14));
  mix-blend-mode: screen;
}

.footer-material img {
  object-fit: cover;
  object-position: 50% 58%;
  visibility: hidden;
}

@media (min-width: 768px) {
  .hero-scene {
    visibility: hidden !important;
    opacity: 0 !important;
  }

  .sector-ring-canvas {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
  }

  .sector-ring-canvas:active { cursor: grabbing; }

  .sector-planes,
  .sector-marquee {
    display: none;
  }

  .sector-media-band {
    top: 44.8vh;
    left: 0;
    display: block;
    width: 100%;
    height: 19.4vh;
    border: 0;
  }

  .site-footer .footer-preview {
    visibility: hidden;
    opacity: 0;
  }

  .sector-plane {
    scale: 0.84;
  }
}

@media (min-width: 768px) and (max-width: 1000px) {
  .hero-title-word {
    top: 1.74vh;
    font-size: 8.43vw;
  }

  .hero-center-mark {
    top: 7.2vh;
  }

  .hero-meta {
    top: 20vh;
    font-size: 11px;
  }

  .hero-quicknav {
    top: 56.77vh;
  }

  .hero-baseline {
    top: 59.11vh;
  }

  .hero-controller {
    top: 70.91vh;
    width: min(720px, calc(100vw - 114px));
  }

  .hero-foot {
    bottom: 4.7vh;
    font-size: 10.45px;
  }

  .hero-foot--center { left: 34%; }

  .story-dot-word {
    top: 48.6%;
    height: 7vh;
  }

  .sectors-heading {
    top: 31.9vh;
    width: 82vw;
  }

  .sectors-heading h2 {
    font-size: 10vw;
  }

  .sector-metrics {
    top: 44.87vh;
    grid-template-columns: 1fr 1fr;
    padding: 0 4.8vw;
  }

  .sector-metric--center {
    display: none !important;
  }

  .sector-metrics > div:last-child {
    justify-self: end;
  }

  .sector-media-band {
    top: 48.66vh;
    left: 4.8vw;
    width: 90.4vw;
    height: 10.3vh;
  }

  .sector-plane--01 { top: 50vh; left: 5vw; width: 18vw; height: 8vh; }
  .sector-plane--02 { top: 48.5vh; left: 19vw; width: 17vw; height: 10vh; }
  .sector-plane--03 { top: 49.5vh; left: 33vw; width: 17vw; height: 8vh; }
  .sector-plane--04 { top: 48.3vh; left: 46vw; width: 17vw; height: 10vh; }
  .sector-plane--05 { top: 49.6vh; left: 59vw; width: 17vw; height: 8vh; }
  .sector-plane--06 { top: 48.5vh; left: 72vw; width: 17vw; height: 10vh; }
  .sector-plane--07 { top: 50vh; left: 83vw; width: 12vw; height: 8vh; }
  .sector-plane--08,
  .sector-plane--09,
  .sector-plane--10 { display: none; }

  .sector-core {
    width: 82px;
    height: 61.5px;
  }

  .sector-summary {
    top: 60.9vh;
  }

  .sector-list {
    top: 61.05vh;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    width: auto;
    font-size: 11px;
    line-height: 30.8px;
    text-align: center;
  }

  .sector-summary {
    top: 59.2vh;
    transform: translate(-50%, -100%);
  }

  .archive-heading {
    width: 68vw;
  }

  .archive-heading h2 {
    font-size: 42.97px;
    line-height: 45.12px;
  }

  .archive-gallery { gap: 96px; }
  .archive-card { gap: 42px; }

  .site-footer {
    height: 34.84vh;
    height: 34.84dvh;
    min-height: 416px;
  }

  .footer-lead { top: 54px; }
  .footer-center { width: 220px; }
}

@media (max-width: 767px) {
  .hero-render-canvas,
  .sector-ring-canvas {
    display: none;
  }

  .site-grain {
    opacity: 0.105;
  }
  :root {
    --viewport-pad: 12px;
  }

  .site-header {
    height: 0;
  }

  .header-pill,
  .site-header[data-header-state="hero"] .header-pill,
  body[data-menu-state="open"] .header-pill {
    top: 16px;
    width: calc(100vw - 24px);
    height: 64px;
    background: rgba(20, 20, 20, 0.97);
    border-color: transparent;
    border-radius: 7px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.2);
    grid-template-columns: 64px 1fr 64px;
  }

  .site-header[data-header-state="hero"] .header-control {
    visibility: visible;
    opacity: 1;
  }

  body[data-menu-state="open"] .site-header .header-pill {
    top: 0;
    width: 100vw;
    color: var(--ink);
    background: var(--paper-warm);
    border-radius: 0;
  }

  .header-control,
  .header-mark {
    width: 64px;
    height: 64px;
  }

  .header-mail,
  .menu-trigger {
    width: 44px;
    height: 44px;
    justify-self: center;
  }

  .header-mark {
    width: auto;
    height: 44px;
    align-self: center;
    grid-column: 2;
    justify-self: center;
    padding-left: 0;
  }

  .header-primary-nav { display: none; }
  .header-mail { grid-column: 1; }
  .menu-trigger { grid-column: 3; }

  .header-mail,
  .menu-trigger {
    color: #e8c890;
    opacity: 1;
  }

  .menu-trigger span {
    width: 25px;
    height: 1.5px;
    background: #e8c890;
  }

  .header-mark .brand-logo-crop {
    width: 38px;
    height: 38px;
  }

  .header-brand-name {
    display: block;
    font-size: 17px;
    letter-spacing: 0.06em;
  }

  .mark-shape {
    width: 28.3px;
    height: 22px;
  }

  .mark-shape i {
    width: 26px;
  }

  .menu-panel {
    transition-duration: 650ms;
  }

  .menu-backdrop {
    top: 16px;
    width: calc(100vw - 24px);
    height: 64px;
    border-radius: 7px;
  }

  .menu-list {
    inset: 64px 0 0;
  }

  .menu-row {
    min-height: 0;
    transition-duration: 420ms;
  }

  .menu-row::before,
  .menu-row::after {
    display: none;
  }

  .menu-word {
    grid-column: 2;
    justify-self: center;
    height: 39.47px;
    font-size: 42.9px;
    font-weight: 600;
    line-height: 39.47px;
    letter-spacing: -1.716px;
  }

  .menu-trigger span {
    width: 18px;
  }

  .menu-index {
    display: none;
  }

  .menu-note {
    position: absolute;
    top: calc(50% + 34px);
    left: 50%;
    justify-self: auto;
    padding: 0;
    font-size: 9.24px;
    letter-spacing: 1.664px;
    transform: translateX(-50%);
  }

  body[data-menu-state="open"] .menu-row:nth-child(1) { transition-delay: 300ms; }
  body[data-menu-state="open"] .menu-row:nth-child(2) { transition-delay: 345ms; }
  body[data-menu-state="open"] .menu-row:nth-child(3) { transition-delay: 390ms; }
  body[data-menu-state="open"] .menu-row:nth-child(4) { transition-delay: 435ms; }
  body[data-menu-state="open"] .menu-row:nth-child(5) { transition-delay: 480ms; }

  body[data-menu-state="open"] .menu-backdrop {
    animation-name: menu-open-shell-mobile;
  }

  body[data-menu-state="closing"] .menu-backdrop {
    animation-name: menu-close-shell-mobile;
  }

  @keyframes menu-open-shell-mobile {
    0% { top: 16px; width: calc(100vw - 24px); height: 64px; background: #141414; border-radius: 7px; }
    38% { top: 78px; width: 100vw; height: 5px; background: #2b2a29; border-radius: 0; }
    64% { top: 0; width: 100vw; height: 543px; background: #d2c8b9; border-radius: 0; }
    100% { top: 0; width: 100vw; height: 100vh; height: 100dvh; background: var(--paper-warm); border-radius: 0; }
  }

  @keyframes menu-close-shell-mobile {
    0% { top: 0; width: 100vw; height: 100vh; height: 100dvh; background: var(--paper-warm); border-radius: 0; }
    23% { top: 0; width: 100vw; height: 543px; background: #d2c8b9; border-radius: 0; }
    76% { top: 16px; width: calc(100vw - 24px); height: 52px; background: #141414; border-radius: 7px; }
    100% { top: 16px; width: calc(100vw - 24px); height: 64px; background: #141414; border-radius: 7px; }
  }

  .scroll-track {
    height: 90vh;
    height: 90dvh;
  }

  .hero-stage {
    position: relative;
    height: 90vh;
    height: 90dvh;
  }

  .hero-scene img {
    object-position: 50% 50%;
    transform: scale(1.46);
  }

  .hero-scene {
    filter: saturate(0.36) contrast(1.08) brightness(0.42);
  }

  /* The reference keeps a visible editorial image on narrow screens while
     the desktop opening state is almost black. Preserve that responsive cue
     without changing the desktop composition. */
  body[data-hero-index="0"] .hero-scene[data-hero-scene="0"] {
    filter: saturate(0.82) contrast(1.04) brightness(0.66);
  }

  body[data-hero-index="0"] .hero-scene[data-hero-scene="0"] img {
    object-position: 40% 50%;
    transform: scale(1.12);
  }

  body[data-hero-index="0"] .hero-scene[data-hero-scene="0"] .hero-scene-brand {
    display: grid;
  }

  body[data-hero-index="0"] .hero-media-wash {
    background:
      linear-gradient(180deg, rgba(5, 3, 3, 0.08), rgba(13, 5, 5, 0.06) 25%, rgba(6, 4, 4, 0.1) 62%, rgba(3, 3, 3, 0.34)),
      linear-gradient(90deg, rgba(14, 5, 5, 0.08), transparent 50%, rgba(4, 4, 4, 0.08));
  }

  .hero-media-wash {
    background:
      linear-gradient(180deg, rgba(5, 3, 3, 0.34), rgba(13, 5, 5, 0.18) 25%, rgba(6, 4, 4, 0.34) 62%, rgba(3, 3, 3, 0.7)),
      linear-gradient(90deg, rgba(14, 5, 5, 0.28), transparent 50%, rgba(4, 4, 4, 0.2));
  }

  .hero-title,
  .hero-center-mark,
  .hero-quicknav,
  .hero-baseline,
  .hero-mini-preview,
  .desktop-story {
    display: none;
  }

  .hero-meta {
    top: 9.8px;
    z-index: 2;
    width: 116px;
    font-size: 10px;
    line-height: 1.55;
  }

  .hero-meta--left { left: 11.7px; }
  .hero-meta--right { right: 11.7px; padding-top: 86px; }

  .hero-meta--left { padding-top: 86px; }

  .hero-meta .meta-kicker {
    margin-top: 86px;
    font-size: 8px;
  }

  .hero-meta ul {
    margin-top: 7px;
  }

  .hero-controller {
    top: 53.95vh;
    width: 100%;
  }

  .hero-counter {
    height: 15px;
    font-size: 10.87px;
    line-height: 15px;
  }

  .hero-arrow {
    width: 44px;
    height: 44px;
  }

  .hero-scene-name {
    height: 17px;
    margin-top: 24px;
    font-size: 13.18px;
    line-height: 17px;
    opacity: 0.8;
  }

  .hero-wave {
    width: calc(100% - 24px);
    height: 50px;
    margin: 24px auto 0;
  }

  .hero-wave i {
    flex: 1 1 auto;
    max-width: 1px;
  }

  .hero-tabs {
    width: 100%;
    height: 60px;
    margin-top: 13px;
  }

  .hero-tab {
    height: 60px;
  }

  .hero-tab img {
    filter: grayscale(0.55) saturate(0.72) contrast(1.1) brightness(0.58);
  }

  .hero-foot {
    bottom: 2.6vh;
    min-height: 70px;
    font-size: 9px;
    line-height: 1.35;
  }

  .hero-foot--left {
    display: none;
  }

  .hero-foot--center {
    left: 11.7px;
    display: grid;
    align-content: center;
  }

  .hero-foot--right {
    display: none;
  }

  .hero-foot--right a {
    display: grid;
    place-items: center;
    min-width: 58px;
    min-height: 21px;
  }

  .mobile-who {
    position: relative;
    display: block;
    height: 66.68vh;
    height: 66.68dvh;
    min-height: 520px;
    overflow: clip;
    padding: 28px 32px;
    background:
      radial-gradient(circle at 8% 22%, rgba(84, 102, 99, 0.3), transparent 34%),
      #050606;
    color: var(--paper-pale);
  }

  .mobile-who h2 {
    margin-top: 54px;
    font-size: 39px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.055em;
    text-align: center;
    white-space: nowrap;
    transform: scaleX(1.18);
  }

  .mobile-who-object {
    position: absolute;
    top: 170px;
    left: 50%;
    width: 226px;
    height: 209px;
    transform: translateX(-50%);
    perspective: 800px;
  }

  .mobile-who-object span {
    position: absolute;
    top: 0;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(239, 230, 216, 0.25);
    background-position: center;
    background-size: cover;
    box-shadow: 0 24px 44px rgba(0, 0, 0, 0.38);
  }

  .mobile-who-object span:nth-child(1) {
    left: 0;
    z-index: 2;
    width: 36%;
    background-image: linear-gradient(rgba(8, 8, 8, 0.12), rgba(8, 8, 8, 0.12)), url("assets/hero/hero-02-loop.png");
    transform: rotateY(21deg) skewY(2deg);
    transform-origin: 100% 50%;
  }

  .mobile-who-object span:nth-child(2) {
    right: 0;
    width: 66%;
    background-image: linear-gradient(rgba(8, 8, 8, 0.04), rgba(8, 8, 8, 0.04)), url("assets/archive/archive-01-material-study.png");
  }

  .mobile-who-object span:nth-child(3) { display: none; }

  .mobile-who-copy {
    position: absolute;
    top: 431px;
    right: 32px;
    bottom: auto;
    left: 32px;
    font-size: 12.52px;
    line-height: 21.91px;
    letter-spacing: 0;
    text-align: center;
    color: rgba(243, 239, 233, 0.68);
  }

  .mobile-who-index {
    display: none;
  }

  .sectors-heading {
    top: 28.5vh;
    width: calc(100% - 80px);
  }

  .sectors-heading .section-kicker {
    margin-bottom: 13px;
    font-size: 8px;
  }

  .sectors-heading h2 {
    font-size: 10vw;
    line-height: 1;
  }

  .sectors-heading > p:not(.section-kicker) {
    font-size: 8px;
    line-height: 1.35;
  }

  .sectors-heading h2 + p {
    margin-top: 10px;
  }

  .sector-metrics {
    display: none;
  }

  .sector-media-band {
    top: 38.4vh;
    left: 0;
    width: 100%;
    height: 23vh;
    border: 0;
  }

  .sector-marquee {
    top: 49%;
    font-size: 15vw;
    opacity: 0.18;
  }

  .sector-orbit {
    display: none;
  }

  .sector-plane--01 { top: 20.2vh; left: 5.3vw; width: 12vw; height: 7vh; transform: rotate(-36deg); }
  .sector-plane--02 { top: 14.2vh; left: 38vw; width: 12vw; height: 7.5vh; transform: rotate(-6deg); }
  .sector-plane--03 { top: 17.5vh; right: 11vw; left: auto; width: 13vw; height: 8vh; transform: rotate(18deg); }
  .sector-plane--04 { top: 76.2vh; left: 13vw; width: 14vw; height: 7.5vh; transform: rotate(22deg); }
  .sector-plane--05 { top: 80vh; left: 49vw; width: 12vw; height: 7.5vh; transform: rotate(-5deg); }
  .sector-plane--06 { top: 74.1vh; right: 4vw; left: auto; width: 13vw; height: 8vh; transform: rotate(-31deg); }
  .sector-plane--07,
  .sector-plane--08,
  .sector-plane--09,
  .sector-plane--10,
  .sector-plane--11,
  .sector-plane--12,
  .sector-plane--13,
  .sector-plane--14,
  .sector-plane--15,
  .sector-plane--16,
  .sector-plane--17,
  .sector-plane--18,
  .sector-plane--19,
  .sector-plane--20,
  .sector-plane--21,
  .sector-plane--22,
  .sector-plane--23,
  .sector-plane--24,
  .sector-plane--25 { display: none; }

  .sector-core {
    width: 164px;
    height: 164px;
  }

  .sector-core-inner {
    transform: none;
  }

  .sector-core-ring {
    width: 72px;
    height: 54px;
  }

  .sector-summary {
    top: 64.2vh;
    width: calc(100% - 80px);
    font-size: 10.6px;
  }

  .sector-list {
    top: 68.35vh;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    width: auto;
    font-size: 11px;
    line-height: 27.7px;
    text-align: center;
  }

  .archive {
    padding-bottom: 96px;
    background: #000;
  }

  .archive-title-stage {
    position: relative;
    display: block;
    height: 28.57vh;
    height: 28.57dvh;
    padding: 8.9px 24px 0;
  }

  .archive-heading {
    width: 100%;
  }

  .archive-heading h2 {
    font-size: 8.45vw;
    line-height: 1.05;
  }

  .archive-title-line--lead {
    visibility: hidden;
  }

  .archive-heading h2 > .archive-title-line {
    display: flex;
  }

  .archive-title-line--middle {
    flex-wrap: wrap;
    width: 100%;
    transform: translateY(9px) scaleX(1.29);
  }

  .archive-title-line:nth-child(3) {
    transform: translateY(1px) scaleX(1.23);
  }

  .archive-title-line--middle .archive-title-solo {
    flex-basis: 100%;
    transform: translateY(4px) scaleX(1.37);
  }

  .archive-title-line--middle > span:not(.archive-title-solo) {
    transform: translateY(9px);
  }

  .archive-gallery {
    display: grid;
    gap: 76px;
    width: auto;
    margin: 0 20px;
  }

  .archive-card,
  .archive-card--02 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    width: 100%;
    transform: none;
  }

  .archive-card figure,
  .archive-card--02 figure {
    grid-row: auto;
    grid-column: 1;
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .archive-card--02 .archive-case-copy {
    grid-row: auto;
    grid-column: 1;
  }

  .archive-card .archive-case-copy h3 {
    margin-bottom: 16px;
    font-size: 23px;
  }

  .archive-case-copy > p:last-child {
    font-size: 14px;
    line-height: 1.75;
  }

  .site-footer {
    height: 60.91vh;
    height: 60.91dvh;
    min-height: 514px;
    background: #000;
  }

  .footer-rule {
    top: 48px;
    right: 20px;
    left: 20px;
  }

  .footer-eyebrows,
  .footer-preview,
  .footer-material {
    display: none;
  }

  .footer-legal {
    top: auto;
    right: 20px;
    bottom: 20px;
    left: 20px;
    display: block;
    font-size: 10px;
    line-height: 1.5;
  }

  .footer-legal-line {
    row-gap: 2px;
  }

  .footer-description {
    top: 80px;
    right: 20px;
    left: 20px;
    width: auto;
    font-size: 10.35px;
    line-height: 18px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .footer-contact {
    top: 169px;
    left: 20px;
  }

  .footer-email {
    font-size: 20px;
    line-height: 1.15;
    letter-spacing: -0.025em;
  }

  .footer-phone {
    margin-top: 6px;
    font-size: 18px;
  }

  .footer-address {
    margin-top: 11px;
    font-size: 11px;
  }

  .footer-social {
    gap: 22px;
    margin-top: 34px;
    font-size: 10px;
    line-height: 1.3;
    letter-spacing: 1.2px;
  }

  .footer-copyright-symbol {
    display: none;
  }

  .footer-material {
    position: absolute;
    top: 326px;
    right: 20px;
    bottom: auto;
    left: 20px;
    display: block;
    width: auto;
    height: 188px;
  }

  .footer-material img {
    object-position: 50% 50%;
    transform: scale(1.18);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .hero-scene,
  .hero-ambient-flow,
  .hero-particle-field,
  .sector-plane,
  .sector-orbit,
  .sector-core-inner,
  .sector-core-rotor,
  .sector-marquee span,
  .story-object-shell {
    transform: none;
  }

  .story-object,
  .sector-core {
    transform: translate(-50%, -50%);
  }
}

/* Final footer overrides: keep the three-column layout above legacy footer rules. */
.site-footer {
  height: auto;
  min-height: 700px;
  padding: 64px 3vw 42px;
  overflow: visible;
}

.site-footer > .footer-rule {
  position: static;
  width: 100%;
  margin: 0;
}

.footer-legal--three-column {
  position: static;
  right: auto;
  bottom: auto;
  left: auto;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding-top: 28px;
  text-align: left;
}

@media (max-width: 900px) {
  .site-footer {
    height: auto;
    min-height: 514px;
    padding: 52px 24px 36px;
  }
}

/* Centered brand + navigation composition */
@media (min-width: 1001px) {
  .header-pill {
    display: flex;
    justify-content: center;
    gap: 2cm;
  }

  .header-mark {
    flex: 0 0 auto;
    justify-self: auto;
  }

  .header-primary-nav {
    flex: 0 0 auto;
    width: auto;
    gap: clamp(22px, 2.1vw, 38px);
  }

  .header-mail,
  .menu-trigger {
    position: absolute;
    top: 0;
  }

  .header-mail { right: 64px; }
  .menu-trigger { right: 0; }
}

@media (min-width: 768px) and (max-width: 1000px) {
  .header-pill { grid-template-columns: 150px 1fr 52px 52px; }
  .header-primary-nav { gap: 18px; }
}

.header-brand-name,
.hero-brand-lockup__name,
.footer-about-brand span {
  font-family: Arial, "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.header-brand-name { font-size: 18px; }

.hero-brand-lockup__name {
  color: #e8c890;
  letter-spacing: -0.04em;
}

.hero-brand-lockup__name span {
  color: inherit;
}

.footer-column--about {
  display: block;
  text-align: left;
}

.footer-about-brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 13px;
  margin-bottom: 14px;
}

.footer-about-brand span {
  color: #e8c890;
  font-size: 24px;
}

.footer-column--about p {
  max-width: 440px;
}

@media (min-width: 768px) {
  .footer-about-brand {
    margin-top: -23px;
  }

  .header-pill { overflow: visible; }

}

/* Homepage brand lockup: logo immediately precedes the Chinese name. */
@media (min-width: 768px) {
  .hero-center-mark {
    top: 14.65vh;
    right: auto;
    left: var(--viewport-pad);
  }

  .hero-brand-lockup {
    left: calc(var(--viewport-pad) + clamp(126px, 10.8vw, 168px) + 24px);
  }
}

/* FAQ inherits the site's dark graphite and warm-metal language. */
.faq-section {
  background:
    radial-gradient(ellipse 54% 58% at 8% 28%, rgba(142, 151, 145, 0.18), transparent 72%),
    linear-gradient(180deg, #090b0a 0%, #111311 56%, #070807 100%);
  color: var(--paper-pale);
}

.faq-section__header h2 { color: var(--paper-pale); }
.faq-section__header > p:last-child { color: rgba(243, 239, 233, 0.48); }

/* Extracted full brand lockup used consistently in header, hero, and footer. */
.brand-lockup-image {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.brand-lockup-image--header {
  width: 156px;
  max-height: 50px;
}

.hero-brand-lockup {
  top: 13.2vh;
  left: var(--viewport-pad);
}

.brand-lockup-image--hero {
  width: clamp(470px, 42vw, 700px);
  filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.48));
}

.footer-about-brand {
  display: block;
}

.brand-lockup-image--footer {
  width: min(200px, 100%);
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.34));
}

@media (max-width: 767px) {
  .brand-lockup-image--header {
    width: 132px;
    max-height: 42px;
  }

  .hero-brand-lockup {
    top: 13.5vh;
    left: 50%;
    transform: translateX(-50%);
  }

  .brand-lockup-image--hero {
    width: min(90vw, 500px);
  }

  .brand-lockup-image--footer {
    width: min(180px, 58vw);
  }
}
.faq-list { border-top-color: rgba(243, 239, 233, 0.2); }
.faq-list details { border-bottom-color: rgba(243, 239, 233, 0.16); }
.faq-list summary { color: rgba(243, 239, 233, 0.9); }
.faq-list details p { color: rgba(243, 239, 233, 0.58); }
.faq-list details[open] summary { color: #e8c890; }

/* Mobile keeps the desktop industry composition, in normal document flow. */
@media (max-width: 767px) {
  .mobile-story-track { height: calc(max(420px, 100svh - 92px) + 80svh); background: #0b0c0b; }
  .desktop-story.mobile-story {
    position: sticky;
    inset: auto;
    top: 92px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr) minmax(0, 1fr);
    align-items: center;
    gap: 36px 8px;
    padding: 24px 16px;
    height: max(420px, calc(100svh - 92px));
    opacity: 1;
    isolation: isolate;
  }
  .desktop-story.mobile-story .story-wordfield {
    position: relative;
    inset: auto;
    grid-row: 1;
    width: 100%;
    gap: clamp(2px, 1svh, 10px);
    font-size: .875rem;
    line-height: 1.5;
    letter-spacing: 0;
    opacity: calc(var(--story-wordfield, 1) * .74);
    filter: none;
    color: #b7bbb6;
    text-align: center;
    transform: translateY(calc(var(--story-progress, 0) * -90px)) !important;
  }
  .mobile-story .story-wordfield--west { grid-column: 1; }
  .mobile-story .story-wordfield--east { grid-column: 3; }
  .desktop-story.mobile-story .story-wordfield span {
    width: 100%;
    overflow-wrap: anywhere;
    transform: none !important;
  }
  .desktop-story.mobile-story .story-wordfield--west span { transform: translateX(calc(var(--chevron-step) * min(7vw, 28px))) !important; }
  .desktop-story.mobile-story .story-wordfield--east span { transform: translateX(calc(var(--chevron-step) * max(-7vw, -28px))) !important; }
  .mobile-story .story-state, .mobile-story .story-crossline { display: none; }
  .mobile-story .story-state--second { display: block; opacity: var(--story-second, 0); }
  .mobile-story .story-state--second > :not(.story-dot-ribbon) { display: none; }
  .mobile-story .story-dot-ribbon {
    top: 48%;
    left: 0;
    width: 100%;
    font-size: 64px;
    line-height: 1.2;
    opacity: .15;
    transform: none;
    overflow: hidden;
  }
  .mobile-story .story-dot-ribbon span { background-size: 6px 6px; background-image: radial-gradient(circle, #f8f7f3 0 1.7px, transparent 2px); }
  .mobile-story .story-object {
    position: relative;
    inset: auto;
    grid-column: 2;
    grid-row: 1;
    width: min(100%, calc(var(--story-object-w) * .65));
    height: auto;
    aspect-ratio: var(--mobile-object-ratio, .66667);
    justify-self: center;
    max-width: min(100%, calc(180px + (1 - var(--mobile-cards, 0)) * 80px));
    max-height: none;
    transform: translateY(calc(var(--mobile-cards, 0) * -100px));
    opacity: 1;
  }
  .desktop-story.mobile-story .story-object-shell { overflow: visible; background: transparent; border: 0; box-shadow: none; transform: none; }
  .mobile-story .story-object-edge,
  .mobile-story .story-object-shell::before, .mobile-story .story-object-shell::after { display: none; }
  .mobile-story .story-object-media { display: block; }
  .mobile-story .story-object-media--beat-5,
  .mobile-story .story-object-media--beat-6 { display: none; }
  .mobile-story .story-object-caption { display: block; font-size: 7px; }
  .desktop-story.mobile-story .story-cube { width: 100%; opacity: 0; transform: translate(-50%, -50%); animation: none; }
  body[data-story-beat="3"] .desktop-story.mobile-story .story-cube { opacity: 1; }
  body[data-story-beat="3"] .mobile-story .story-object-caption { display: none; }
  .mobile-story-metrics {
    position: absolute;
    inset: auto 16px 16px;
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    opacity: var(--mobile-cards, 0);
    transform: translateY(calc((1 - var(--mobile-cards, 0)) * 18px));
    padding: 0;
    background: transparent;
  }
  .mobile-story-metrics .story-metric-card { min-width: 0; min-height: clamp(88px, 14svh, 128px); padding: 12px 8px; }
  .mobile-story-metrics .story-metric-card__value { font-size: clamp(1.25rem, 7vw, 2.25rem); line-height: 1.15; }
  .mobile-story-metrics .story-metric-card p { margin-top: 10px; font-size: .875rem; line-height: 1.5; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .mobile-story-track { height: auto; }
  .desktop-story.mobile-story { position: relative; top: auto; height: auto; min-height: 420px; }
  .mobile-story .story-object { transform: none; }
  .mobile-story-metrics { position: relative; inset: auto; opacity: 1; transform: none; margin-top: 24px; }
}

/* Responsive repair: keep navigation reachable and let long copy set its height. */
.header-primary-nav, .menu-word {
  font-family: "Heiti SC", "SimHei", "Microsoft YaHei", "PingFang SC", sans-serif;
  font-weight: 500;
  font-style: normal;
}
.header-primary-nav a { font-size: 14px; }
#business-inquiry { scroll-margin-top: 92px; }
.menu-list { grid-template-rows: none; grid-auto-rows: minmax(80px, 1fr); overflow-y: auto; }
@media (min-width: 1001px) {
  .menu-trigger { display: none; }
}
@media (max-width: 1000px) {
  .site-header { position: fixed; }
  .site-header .header-pill,
  .site-header[data-header-state="hero"] .header-pill {
    top: max(12px, env(safe-area-inset-top));
    width: calc(100% - 24px);
    height: 64px;
    grid-template-columns: minmax(0, 1fr) 52px;
    padding: 0 8px 0 16px;
    border-radius: 8px;
    background: rgba(20, 20, 20, .97);
  }
  .header-mark { grid-column: 1; grid-row: 1; justify-self: start; width: auto; padding: 0; }
  .header-primary-nav { display: none; }
  .menu-trigger { position: relative; grid-column: 2; grid-row: 1; width: 44px; height: 44px; justify-self: center; }
  .menu-trigger span { background: #e8c890; }
  body[data-menu-state="open"] .menu-trigger span { background: #171a18; }
  .menu-list { inset: calc(76px + env(safe-area-inset-top)) 0 0; grid-auto-rows: minmax(64px, auto); align-content: start; padding: 20px 24px max(24px, env(safe-area-inset-bottom)); overscroll-behavior: contain; }
  .menu-row { min-height: 80px; padding: 14px 20px; grid-template-columns: 1fr; gap: 8px; align-content: center; }
  .menu-index { display: none; }
  .menu-word { grid-column: 1; justify-self: start; height: auto; font-size: 18px; line-height: 1.6; letter-spacing: .04em; }
  .menu-note { position: static; grid-column: 1; justify-self: center; padding: 0; transform: none; font-size: 14px; line-height: 20px; }
  .menu-row::before, .menu-row::after { display: none; }
  #top, #who, #sectors, #archive, #faq, #contact, #business-inquiry { scroll-margin-top: 92px; }
}
@media (max-width: 1024px) {
  .sectors { height: auto; min-height: 0; padding: 100px 20px 64px; }
  .sectors-heading { position: relative; top: auto; left: auto; width: 100%; margin: 0 auto 36px; transform: none; }
  .sectors-heading h2 { font-size: clamp(32px, 7vw, 52px); line-height: 1.2; }
  .sectors-heading .section-kicker,
  .sectors-heading > p:not(.section-kicker) { font-size: 14px; line-height: 1.7; }
  .sector-planes, .sector-media-band { display: none; }
  .service-workspaces { position: relative; inset: auto; width: 100%; transform: none; }
  .service-workspaces__grid { height: auto; grid-template-columns: minmax(0, 1fr); overflow: visible; padding: 0; }
  .service-workspace { min-height: 0; padding: 24px; }
  .service-workspace p { font-size: 16px; line-height: 1.85; }
  .service-workspace--card h3 { font-size: 20px; }
  .service-workspace--card h3 span { font-size: 14px; }
}
@media (max-width: 767px) {
  .scroll-track { height: auto; }
  .hero-stage { height: max(720px, 90svh); }
  .hero-brand-lockup { top: 112px; width: calc(100% - 40px); }
  .brand-lockup-image--hero { width: 100%; }
  .hero-meta { top: 255px; left: 20px; width: calc(100% - 40px); padding: 0; font-size: 14px; }
  .hero-meta .meta-kicker { margin-top: 0; font-size: 12px; }
  .hero-meta ul { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
  .hero-controller { top: auto; bottom: 24px; }
  .hero-wave { height: 32px; margin-top: 16px; }
  .hero-tabs { margin-top: 12px; }
  .mobile-who { height: auto; min-height: 0; padding: 64px 24px; overflow: visible; }
  .mobile-who h2 { margin: 28px 0; font-size: clamp(30px, 8vw, 42px); white-space: normal; transform: none; line-height: 1.2; }
  .mobile-who-object { position: relative; top: auto; left: auto; margin: 32px auto; transform: none; max-width: 100%; }
  .mobile-who-copy { position: static; font-size: 16px; line-height: 1.9; text-align: left; }
  .archive-title-stage { height: auto; min-height: 0; padding: 60px 20px 40px; }
  .archive-heading h2 { font-size: clamp(26px, 7.5vw, 42px); line-height: 1.3; }
  .archive-heading h2 .archive-title-line { white-space: normal; transform: none; }
  .archive-card .archive-case-copy h3 { font-size: 22px; line-height: 1.5; }
  .archive-case-copy > p:last-child { font-size: 16px; }
  .archive { background-attachment: scroll; }
  .client-trust__header h2 { font-size: clamp(28px, 7.8vw, 42px); line-height: 1.3; }
  .platform-logo__name { font-size: 14px; overflow-wrap: anywhere; }
  .faq-list summary { font-size: 16px; line-height: 1.65; }
  .faq-list details p { font-size: 16px; overflow-wrap: anywhere; }
  .footer-column--about p, .footer-column address { font-size: 15px; overflow-wrap: anywhere; }
  .footer-column--about p br { display: none; }
  .footer-column--services a { min-height: 44px; margin: 0; display: flex; align-items: center; }
  .footer-social-platforms a { width: 44px; height: 44px; }
  .footer-legal { font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
}