:root {
  color-scheme: dark;
  --bg: #08090b;
  --bg-soft: #0d1012;
  --ink: #f0eee8;
  --ink-soft: #c8c6bf;
  --muted: #878b89;
  --line: rgba(240, 238, 232, 0.14);
  --line-strong: rgba(240, 238, 232, 0.34);
  --signal: #d9ff67;
  --ice: #9edcec;
  --black: #050607;
  --max: 1380px;
  --gutter: clamp(24px, 4.8vw, 76px);
  --display: "SF Pro Display", "Avenir Next", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --body: "SF Pro Text", "Avenir Next", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --mono: "SFMono-Regular", "JetBrains Mono", Consolas, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --scroll-progress: 0;
  --hero-scroll: 0;
  --scene-x: 0px;
  --scene-y: 0px;
  --cursor-x: 50vw;
  --cursor-y: 30vh;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scrollbar-color: #3b3f3c var(--bg);
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(90deg, transparent 0 12.4%, rgba(255,255,255,.018) 12.5%, transparent 12.6% 87.4%, rgba(255,255,255,.018) 87.5%, transparent 87.6%),
    radial-gradient(ellipse at 74% 9%, rgba(158,220,236,.09), transparent 34%),
    linear-gradient(180deg, #08090b 0%, #0b0d0e 52%, #070809 100%);
  content: "";
}

body::after {
  position: fixed;
  inset: 0;
  z-index: 100;
  opacity: .22;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E");
  content: "";
  mix-blend-mode: soft-light;
  pointer-events: none;
}

::selection { background: var(--signal); color: var(--black); }

a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 5px;
}

.container {
  width: min(var(--max), calc(100% - (var(--gutter) * 2)));
  margin: 0 auto;
}

.scroll-progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 80;
  width: 100%;
  height: 3px;
  background: var(--signal);
  transform: scaleX(var(--scroll-progress));
  transform-origin: left;
  pointer-events: none;
}

.page-atmosphere {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.page-atmosphere::after {
  position: absolute;
  width: 42rem;
  height: 42rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217,255,103,.045), transparent 66%);
  content: "";
  transform: translate(calc(var(--cursor-x) - 21rem), calc(var(--cursor-y) - 21rem));
}

.page-atmosphere i {
  position: absolute;
  border: 1px solid rgba(240,238,232,.055);
  transform: rotate(-12deg);
}

.page-atmosphere i:nth-child(1) { top: 12vh; right: -12vw; width: 48vw; height: 48vw; }
.page-atmosphere i:nth-child(2) { top: 38vh; right: 13vw; width: 18vw; height: 62vw; transform: rotate(31deg); }
.page-atmosphere i:nth-child(3) { top: 125vh; left: -18vw; width: 56vw; height: 18vw; transform: rotate(-8deg); }

.site-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid var(--line);
  background: rgba(8,9,11,.82);
  backdrop-filter: blur(20px) saturate(120%);
}

.nav-inner {
  display: grid;
  min-height: 76px;
  grid-template-columns: minmax(260px,1fr) auto auto;
  gap: 34px;
  align-items: center;
}

.brand {
  display: inline-grid;
  width: max-content;
  grid-template-columns: 28px auto auto;
  gap: 11px;
  align-items: center;
  font-size: .92rem;
  font-weight: 680;
  letter-spacing: -.02em;
}

.brand-mark {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  background: var(--signal);
  color: var(--black);
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 900;
  transform: rotate(-5deg);
  transition: transform 280ms var(--ease);
}

.brand:hover .brand-mark { transform: rotate(0) scale(1.08); }

.brand small {
  color: var(--muted);
  font-family: var(--mono);
  font-size: .59rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.nav-links { display: flex; gap: clamp(18px,2.3vw,34px); align-items: center; }

.nav-links a {
  position: relative;
  padding: 28px 0 24px;
  color: var(--ink-soft);
  font-size: .74rem;
  font-weight: 620;
}

.nav-links a::after {
  position: absolute;
  right: 0;
  bottom: 17px;
  left: 0;
  height: 2px;
  background: var(--signal);
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 260ms var(--ease);
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after { transform: scaleX(1); transform-origin: left; }

.lang-switch { display: flex; border-left: 1px solid var(--line); }
.lang-switch button {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: .65rem;
  font-weight: 750;
}
.lang-switch button.active { background: var(--ink); color: var(--black); }

.kicker,
.section-index,
.card-index,
.project-status,
.project-type,
.project-number,
.back-link {
  font-family: var(--mono);
  font-size: .64rem;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hero {
  position: relative;
  min-height: calc(100svh - 76px);
  padding: clamp(46px,6vh,76px) 0 clamp(60px,8vh,96px);
  overflow: clip;
}

.hero-shell { position: relative; }

.hero-intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.kicker { display: inline-flex; gap: 12px; align-items: center; color: var(--signal); }
.kicker::before { width: 32px; height: 1px; background: currentColor; content: ""; }

.hero-edition {
  color: var(--muted);
  font-family: var(--mono);
  font-size: .6rem;
  line-height: 1.65;
  letter-spacing: .1em;
  text-align: right;
}

.hero-composition {
  position: relative;
  min-height: clamp(680px,75vh,860px);
  margin-top: 12px;
}

.hero-copy-block {
  position: relative;
  z-index: 5;
  width: min(75%,980px);
  padding-top: clamp(74px,10vh,116px);
}

.hero h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3.8rem,7.4vw,7.6rem);
  font-weight: 760;
  letter-spacing: -.035em;
  line-height: .93;
  text-wrap: balance;
}

.hero h1 span { display: block; width: auto; max-width: 100%; }
.hero h1 span:last-child { margin-top: .12em; color: var(--signal); }

.hero-copy {
  width: min(650px,72%);
  margin: 34px 0 0;
  color: var(--ink-soft);
  font-size: clamp(.98rem,1.15vw,1.12rem);
  line-height: 1.82;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.button {
  position: relative;
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  padding: 0 22px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: .76rem;
  font-weight: 700;
  transform: translate3d(var(--mag-x,0),var(--mag-y,0),0);
  transition: color 220ms ease,border-color 220ms ease,background 220ms ease,transform 280ms var(--ease);
}

.button::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--signal);
  content: "";
  transform: translateY(102%);
  transition: transform 320ms var(--ease);
}

.button.primary { border-color: var(--signal); background: var(--signal); color: var(--black); }
.button.primary::after { background: var(--ink); }
.button:hover,.button:focus-visible { border-color: var(--signal); color: var(--black); transform: translate3d(var(--mag-x,0),calc(var(--mag-y,0) - 2px),0); }
.button.primary:hover,.button.primary:focus-visible { color: var(--black); }
.button:hover::after,.button:focus-visible::after { transform: translateY(0); }

.hero-gallery {
  position: absolute;
  z-index: 2;
  top: 20px;
  right: -2%;
  width: min(52vw,720px);
  height: min(66vh,700px);
  perspective: 1400px;
}

.hero-gallery::before {
  position: absolute;
  top: 5%;
  right: 4%;
  width: 74%;
  height: 78%;
  border: 1px solid rgba(217,255,103,.22);
  content: "";
  transform: translate3d(var(--scene-x),var(--scene-y),0) rotate(8deg);
}

.hero-frame {
  position: absolute;
  overflow: hidden;
  border: 1px solid rgba(240,238,232,.2);
  background: #111416;
  box-shadow: 0 30px 90px rgba(0,0,0,.38);
  transform-style: preserve-3d;
  transition: border-color 260ms ease,filter 260ms ease;
}

.hero-frame img { width: 100%; height: 100%; object-fit: contain; background: #111416; filter: saturate(.82) brightness(.72); transition: filter 500ms ease,transform 700ms var(--ease); }
.hero-frame span { position: absolute; right: 12px; bottom: 10px; padding: 7px 9px; background: rgba(5,6,7,.82); color: var(--ink); font-family: var(--mono); font-size: .53rem; letter-spacing: .06em; }
.hero-frame:hover { z-index: 9; border-color: var(--signal); }
.hero-frame:hover img { filter: saturate(1) brightness(.92); transform: scale(1.035); }

.frame-main {
  z-index: 3;
  top: 24%;
  right: 0;
  width: 78%;
  height: 48%;
  transform: translateY(calc(var(--hero-scroll) * -44px)) rotateY(var(--tilt-y,0deg)) rotateX(var(--tilt-x,0deg));
}
.frame-side {
  z-index: 4;
  right: 52%;
  bottom: 4%;
  width: 45%;
  height: 32%;
  transform: translateY(calc(var(--hero-scroll) * -78px)) rotate(-5deg) rotateY(var(--tilt-y,0deg)) rotateX(var(--tilt-x,0deg));
}
.frame-back {
  z-index: 1;
  top: 2%;
  right: 8%;
  width: 46%;
  height: 30%;
  transform: translateY(calc(var(--hero-scroll) * 34px)) rotate(7deg) rotateY(var(--tilt-y,0deg)) rotateX(var(--tilt-x,0deg));
}

.hero-note {
  position: absolute;
  z-index: 6;
  right: 2%;
  bottom: 1%;
  width: min(300px,28%);
  border-top: 1px solid var(--signal);
  padding: 18px 0 0 52px;
}
.hero-note::before { position: absolute; top: 21px; left: 0; width: 32px; height: 8px; background: var(--signal); content: ""; }
.hero-note strong { font-size: .7rem; letter-spacing: .1em; }
.hero-note p { margin: 14px 0 0; color: var(--muted); font-size: .8rem; line-height: 1.75; }

.proof-row {
  display: grid;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
  grid-template-columns: repeat(3,1fr);
}
.proof { min-height: 124px; border-right: 1px solid var(--line); padding: 24px 28px; }
.proof:last-child { border-right: 0; }
.proof strong { display: block; font-family: var(--display); font-size: 1.24rem; font-weight: 720; letter-spacing: -.03em; }
.proof span { display: block; max-width: 330px; margin-top: 12px; color: var(--muted); font-size: .78rem; line-height: 1.65; }

.section { position: relative; padding: clamp(88px,10vw,150px) 0; }
.section + .section { border-top: 1px solid var(--line); }

.section-head { margin: 0 0 56px; }
.section-index { color: var(--signal); }
.section-head h2 {
  margin: 20px 0 0;
  font-family: var(--display);
  font-size: clamp(3.2rem,5.7vw,6.2rem);
  font-weight: 730;
  letter-spacing: -.04em;
  line-height: .94;
}
.section-head p { max-width: 460px; margin: 28px 0 0; color: var(--muted); font-size: .88rem; line-height: 1.78; }

.enterprise-section > .container {
  display: grid;
  grid-template-columns: minmax(230px, .34fr) minmax(0,1fr);
  gap: clamp(44px,6vw,100px);
  align-items: start;
}
.section-head-sticky { position: sticky; top: 116px; margin: 0; }
.section-head-sticky h2 { font-size: clamp(3.5rem,5.2vw,6.1rem); }

.case-stack { display: grid; gap: 96px; }
.case-card { position: relative; display: grid; grid-template-columns: minmax(0,1.16fr) minmax(260px,.64fr); gap: clamp(30px,4.5vw,72px); align-items: end; padding-top: 22px; border-top: 1px solid var(--line-strong); }
.case-card:nth-child(even) { grid-template-columns: minmax(260px,.64fr) minmax(0,1.16fr); }
.case-card:nth-child(even) .case-media-wrap { order: 2; }
.case-media-wrap { position: relative; }
.case-media-wrap::before { position: absolute; top: -18px; left: -18px; width: 74px; height: 74px; border-top: 1px solid var(--signal); border-left: 1px solid var(--signal); content: ""; transition: width 420ms var(--ease),height 420ms var(--ease); }
.case-card:hover .case-media-wrap::before { width: 45%; height: 45%; }

.project-media { position: relative; overflow: hidden; margin: 0; background: #111416; }
.case-card .project-media { aspect-ratio: 16/10; }
.project-media img { width: 100%; height: 100%; object-fit: contain; background: #111416; filter: saturate(.78) contrast(1.03) brightness(.82); transition: filter 480ms ease,transform 750ms var(--ease); }
.project-media::after { position: absolute; inset: 0; border: 1px solid rgba(240,238,232,.14); box-shadow: inset 0 -70px 90px rgba(0,0,0,.32); content: ""; pointer-events: none; }
.project-media figcaption { position: absolute; z-index: 2; right: 12px; bottom: 12px; padding: 7px 9px; background: rgba(5,6,7,.84); color: var(--ink); font-family: var(--mono); font-size: .54rem; letter-spacing: .06em; }
.case-card:hover .project-media img,.lab-card:hover .project-media img { filter: saturate(1) contrast(1) brightness(.94); transform: scale(1.035); }

.project-placeholder { display: grid; min-height: 280px; place-items: center; border: 1px solid var(--line); background: repeating-linear-gradient(135deg,transparent 0 18px,rgba(255,255,255,.025) 18px 19px); color: var(--muted); font-family: var(--mono); font-size: .65rem; letter-spacing: .06em; }

.case-copy { padding-bottom: 6px; }
.case-meta { display: flex; flex-wrap: wrap; gap: 14px; color: var(--muted); font-family: var(--mono); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; }
.case-meta .card-index { color: var(--signal); }
.case-copy h3 { margin: 28px 0 0; font-family: var(--display); font-size: clamp(2.2rem,3.8vw,4.6rem); font-weight: 710; letter-spacing: -.035em; line-height: .98; }
.case-copy p { max-width: 460px; margin: 22px 0 0; color: var(--muted); font-size: .88rem; line-height: 1.78; }
.case-link { display: inline-flex; gap: 10px; align-items: center; margin-top: 34px; color: var(--ink-soft); font-size: .72rem; font-weight: 660; }
.case-link i { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--line-strong); font-style: normal; transition: background 220ms ease,color 220ms ease,transform 260ms var(--ease); }
.case-card:hover .case-link i { background: var(--signal); color: var(--black); transform: rotate(45deg); }

.lab-section { overflow: clip; }
.lab-head { display: grid; grid-template-columns: 110px minmax(0,1fr) minmax(280px,.38fr); gap: 30px; align-items: end; }
.lab-head h2,.lab-head p { margin-top: 0; }
.lab-gallery { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: clamp(20px,2.4vw,38px); align-items: start; }
.lab-card { position: relative; display: block; min-width: 0; transform: perspective(1300px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition: transform 350ms var(--ease); }
.lab-card:nth-child(1) { grid-column: 1/span 7; }
.lab-card:nth-child(2) { grid-column: 8/span 5; margin-top: 130px; }
.lab-card:nth-child(3) { grid-column: 2/span 4; margin-top: 20px; }
.lab-card:nth-child(4) { grid-column: 7/span 6; margin-top: -34px; }
.lab-card:nth-child(5) { grid-column: 3/span 8; margin-top: 76px; }
.lab-card .project-media { aspect-ratio: 16/10; transition: transform 380ms var(--ease); }
.lab-card:nth-child(2) .project-media,.lab-card:nth-child(3) .project-media { aspect-ratio: 4/5; }
.lab-card:nth-child(4) .project-media { aspect-ratio: 16/9; }
.lab-card:nth-child(5) .project-media { aspect-ratio: 16/8; }
.lab-card:hover { transform: perspective(1300px) translateY(-8px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); }
.lab-card-copy { display: grid; grid-template-columns: minmax(0,1fr) minmax(130px,.35fr); gap: 24px; padding: 22px 0 0; border-top: 1px solid var(--line); }
.lab-card-copy > div { grid-column: 1/-1; display: flex; justify-content: space-between; }
.lab-card-copy h3 { margin: 0; font-family: var(--display); font-size: clamp(1.8rem,3vw,3.5rem); font-weight: 700; letter-spacing: -.035em; line-height: .98; }
.lab-card-copy p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.65; }
.lab-arrow { position: absolute; right: 14px; top: 14px; display: grid; width: 38px; height: 38px; place-items: center; background: rgba(5,6,7,.8); font-size: 1rem; transition: background 220ms ease,color 220ms ease,transform 260ms var(--ease); }
.lab-card:hover .lab-arrow { background: var(--signal); color: var(--black); transform: rotate(45deg); }

.method-layout { display: grid; grid-template-columns: minmax(270px,.44fr) minmax(0,1fr); gap: clamp(60px,9vw,140px); align-items: start; }
.method-head { position: sticky; top: 116px; }
.method-head h2 { font-size: clamp(3.4rem,4.7vw,5.25rem); text-wrap: balance; }
.method-grid { border-top: 1px solid var(--line-strong); }
.method-step { position: relative; display: grid; min-height: 250px; grid-template-columns: 110px minmax(220px,.8fr) minmax(260px,1fr); gap: 28px; align-items: center; border-bottom: 1px solid var(--line); transition: background 260ms ease,padding 340ms var(--ease); }
.method-step::before { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(217,255,103,.08),transparent 72%); content: ""; opacity: 0; transition: opacity 260ms ease; }
.method-step:hover { padding: 0 20px; }
.method-step:hover::before { opacity: 1; }
.method-step > * { position: relative; z-index: 1; }
.method-step > span { color: var(--signal); font-family: var(--display); font-size: 3.8rem; font-weight: 650; letter-spacing: -.06em; }
.method-step h3 { margin: 0; font-family: var(--display); font-size: clamp(1.7rem,2.4vw,2.7rem); font-weight: 680; letter-spacing: -.045em; line-height: 1.05; }
.method-step p { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.75; }

.archive-head { display: grid; grid-template-columns: 110px 1fr; gap: 30px; align-items: end; }
.archive-head h2 { margin-top: 0; }
.archive-list { border-top: 1px solid var(--line-strong); }
.archive-item { display: grid; min-height: 126px; grid-template-columns: 56px minmax(150px,.32fr) minmax(210px,.55fr) minmax(260px,1fr) 34px; gap: 24px; align-items: center; border-bottom: 1px solid var(--line); transition: padding 340ms var(--ease),background 260ms ease; }
.archive-item:hover { padding: 0 20px; background: rgba(217,255,103,.055); }
.archive-type { color: var(--muted); font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }
.archive-item strong { font-family: var(--display); font-size: 1.42rem; letter-spacing: -.03em; }
.archive-item p { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.65; }
.archive-item i { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); font-style: normal; transition: transform 260ms var(--ease),background 220ms ease,color 220ms ease; }
.archive-item:hover i { background: var(--signal); color: var(--black); transform: rotate(45deg); }

.contact { overflow: clip; border-top: 1px solid var(--line-strong); padding-bottom: 40px; }
.contact::before { position: absolute; top: 7%; right: -6%; width: 48vw; height: 48vw; border: 1px solid rgba(217,255,103,.13); content: ""; transform: rotate(19deg); }
.contact-grid { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 250px; gap: clamp(50px,8vw,120px); align-items: end; }
.contact h2 { max-width: 980px; margin: 30px 0 0; font-family: var(--display); font-size: clamp(3.2rem,5vw,6rem); font-weight: 730; letter-spacing: -.04em; line-height: .98; text-wrap: balance; }
.contact p { margin: 30px 0; color: var(--muted); font-size: .9rem; }
.qr { justify-self: end; border-top: 1px solid var(--signal); padding-top: 14px; }
.qr > span { display: block; margin-bottom: 12px; color: var(--muted); font-family: var(--mono); font-size: .58rem; letter-spacing: .08em; }
.qr img { width: 216px; height: 216px; filter: grayscale(1) contrast(1.08); }
.footer { position: relative; display: flex; justify-content: space-between; gap: 30px; margin-top: 100px; border-top: 1px solid var(--line); padding-top: 24px; color: var(--muted); font-size: .69rem; }

/* Project detail */
.project-hero { padding: clamp(70px,9vw,128px) 0 46px; }
.project-hero-top { display: flex; justify-content: space-between; gap: 24px; align-items: center; }
.back-link,.project-number { color: var(--muted); }
.back-link::before { margin-right: 10px; content: "←"; color: var(--signal); }
.project-hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,.34fr); gap: clamp(60px,9vw,140px); align-items: end; margin-top: clamp(90px,13vh,150px); }
.project-type { color: var(--signal); }
.project-hero h1 { max-width: 900px; margin: 34px 0 0; font-family: var(--display); font-size: clamp(3.8rem,7.2vw,7.8rem); font-weight: 740; letter-spacing: -.035em; line-height: .94; text-wrap: balance; }
.project-summary { max-width: 720px; margin: 42px 0 0; color: var(--ink-soft); font-size: clamp(1rem,1.3vw,1.18rem); line-height: 1.9; }
.project-launch { display: flex; align-items: center; gap: 18px; max-width: 720px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.project-launch img { flex: 0 0 auto; width: 116px; height: 116px; padding: 8px; background: #fff; border: 1px solid rgba(240,238,232,.28); border-radius: 6px; }
.project-launch-copy { display: grid; gap: 9px; }
.project-launch-copy span { color: var(--muted); font-family: var(--mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; }
.project-launch-copy strong { max-width: 330px; color: var(--ink); font-size: .88rem; font-weight: 600; line-height: 1.65; }
body[data-project-id="parentvoice"] .project-hero h1 { line-height: 1.08; }
.project-facts { border-top: 1px solid var(--line-strong); }
.fact { padding: 20px 0; border-bottom: 1px solid var(--line); }
.fact span { display: block; color: var(--muted); font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }
.fact strong { display: block; margin-top: 10px; font-size: .82rem; font-weight: 580; line-height: 1.6; }

.project-visual-section { position: relative; padding: 50px 0 clamp(72px,7vw,104px); }
.project-visual-wrap { position: relative; }
.project-carousel { position: relative; width: 88%; }
.project-carousel::before { position: absolute; z-index: 2; top: 0; left: 0; width: 12%; height: 4px; background: var(--signal); content: ""; }
.carousel-viewport { position: relative; overflow: hidden; border: 1px solid var(--line); background: #111416; box-shadow: inset 0 -100px 130px rgba(0,0,0,.28); }
.carousel-track { display: flex; transform: translate3d(calc(var(--carousel-index,0) * -100%),0,0); transition: transform 620ms var(--ease); }
.carousel-slide { position: relative; flex: 0 0 100%; min-width: 0; margin: 0; }
.carousel-slide img { display: block; width: 100%; max-height: min(76vh,900px); aspect-ratio: 16/10; object-fit: contain; background: #111416; }
.carousel-slide--crop img { object-fit: cover; object-position: var(--object-position,center); }
.carousel-placeholder { display: grid; min-height: min(52vw,620px); place-content: center; gap: 12px; border: 1px solid var(--line); background: repeating-linear-gradient(135deg,transparent 0 18px,rgba(255,255,255,.025) 18px 19px); text-align: center; }
.carousel-placeholder strong { color: var(--ink-soft); font-family: var(--display); font-size: clamp(1.6rem,3vw,3rem); font-weight: 650; letter-spacing: -.03em; }
.carousel-placeholder span { color: var(--muted); font-size: .78rem; }
.carousel-slide figcaption { position: absolute; right: 16px; bottom: 16px; padding: 9px 12px; background: rgba(5,6,7,.84); color: var(--ink); font-family: var(--mono); font-size: .57rem; letter-spacing: .08em; }
.carousel-bar { display: flex; min-height: 62px; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); }
.carousel-caption { color: var(--muted); font-size: .78rem; line-height: 1.5; }
.carousel-controls { display: flex; align-items: center; gap: 14px; color: var(--muted); font-family: var(--mono); font-size: .62rem; letter-spacing: .06em; }
.carousel-controls button { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); cursor: pointer; font-size: 1rem; transition: border-color 220ms ease,background 220ms ease,color 220ms ease,transform 260ms var(--ease); }
.carousel-controls button:hover,.carousel-controls button:focus-visible { border-color: var(--signal); background: var(--signal); color: var(--black); transform: translateY(-2px); }
.carousel-controls button:disabled { opacity: .28; cursor: default; transform: none; }
.project-carousel.is-single .carousel-controls { display: none; }
.visual-margin-note { position: absolute; right: 0; bottom: 8%; color: var(--muted); font-family: var(--display); font-size: clamp(3rem,5vw,6rem); font-weight: 750; letter-spacing: -.05em; line-height: .8; writing-mode: vertical-rl; }

.project-story { border-top: 1px solid var(--line); padding-top: clamp(64px,7vw,96px); }
.story-layout { display: grid; grid-template-columns: minmax(220px,.32fr) minmax(0,1fr); gap: clamp(60px,9vw,140px); align-items: start; }
.story-rail { position: sticky; top: 116px; border-top: 1px solid var(--signal); padding-top: 18px; }
.story-rail p { max-width: 240px; margin: 20px 0 0; color: var(--muted); font-size: .8rem; line-height: 1.7; }
.detail-grid { border-top: 1px solid var(--line-strong); }
.detail-block { display: grid; min-height: 280px; grid-template-columns: 145px minmax(220px,.55fr) minmax(300px,1fr); gap: 28px; align-items: start; border-bottom: 1px solid var(--line); padding: 42px 0; }
.detail-block small { color: var(--signal); font-family: var(--mono); font-size: .58rem; letter-spacing: .08em; }
.detail-block h2 { margin: 0; font-family: var(--display); font-size: clamp(2rem,3vw,3.5rem); font-weight: 690; letter-spacing: -.03em; line-height: 1.06; }
.detail-block p { margin: 0; color: var(--ink-soft); font-size: .96rem; line-height: 1.92; }
.detail-block ul { margin: 0; padding: 0; list-style: none; counter-reset: evidence; }
.detail-block li { position: relative; min-height: 64px; border-bottom: 1px solid var(--line); padding: 6px 0 18px 46px; color: var(--ink-soft); font-size: .9rem; line-height: 1.7; counter-increment: evidence; }
.detail-block li + li { padding-top: 20px; }
.detail-block li::before { position: absolute; top: 6px; left: 0; color: var(--signal); font-family: var(--mono); font-size: .62rem; content: "0" counter(evidence); }
.detail-block li + li::before { top: 20px; }

.module-section { border-top: 1px solid var(--line); }
.module-head { display: grid; grid-template-columns: 110px minmax(0,1fr) minmax(280px,.42fr); gap: 30px; align-items: end; }
.module-head h2,.module-head p { margin-top: 0; }
.module-list { border-top: 1px solid var(--line-strong); }
.module { display: grid; min-height: 142px; grid-template-columns: 76px minmax(240px,.55fr) minmax(300px,1fr); gap: 30px; align-items: center; border-bottom: 1px solid var(--line); transition: padding 340ms var(--ease),background 260ms ease; }
.module:hover { padding: 0 20px; background: rgba(158,220,236,.045); }
.module > span { color: var(--signal); font-family: var(--mono); font-size: .62rem; }
.module strong { font-family: var(--display); font-size: 1.5rem; letter-spacing: -.03em; }
.module p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.72; }

.next-project-section { padding: 0 0 50px; }
.next-project { position: relative; display: grid; min-height: 280px; grid-template-columns: 160px minmax(0,1fr) 70px; gap: 30px; align-items: center; overflow: hidden; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.next-project::before { position: absolute; inset: 0; background: var(--signal); content: ""; transform: translateY(101%); transition: transform 480ms var(--ease); }
.next-project > * { position: relative; z-index: 1; }
.next-project span { color: var(--muted); font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
.next-project strong { font-family: var(--display); font-size: clamp(2.7rem,5vw,5.8rem); font-weight: 710; letter-spacing: -.04em; line-height: .98; }
.next-project i { display: grid; width: 62px; height: 62px; place-items: center; border: 1px solid var(--line-strong); font-size: 1.5rem; font-style: normal; transition: transform 300ms var(--ease); }
.next-project:hover::before { transform: translateY(0); }
.next-project:hover { color: var(--black); }
.next-project:hover span { color: rgba(5,6,7,.64); }
.next-project:hover i { border-color: var(--black); transform: rotate(45deg); }
.back-row { display: flex; justify-content: space-between; gap: 14px; margin-top: 36px; }

/* Motion */
.motion-ready .reveal-item { opacity: 0; clip-path: inset(0 0 16% 0); transform: translateY(54px); transition: opacity 760ms var(--ease) var(--reveal-delay,0ms),transform 900ms var(--ease) var(--reveal-delay,0ms),clip-path 900ms var(--ease) var(--reveal-delay,0ms); }
.motion-ready .reveal-item.is-visible { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0); }
.motion-ready .hero-intro,.motion-ready .hero h1 span,.motion-ready .hero-copy,.motion-ready .hero-actions,.motion-ready .hero-frame,.motion-ready .hero-note,.motion-ready .proof-row,.motion-ready .project-hero-top,.motion-ready .project-title-block,.motion-ready .project-facts { opacity: 0; }
.motion-loaded .hero-intro,.motion-loaded .project-hero-top { animation: rise-in 720ms var(--ease) 80ms both; }
.motion-loaded .hero h1 span:first-child,.motion-loaded .project-title-block { animation: title-in 980ms var(--ease) 140ms both; }
.motion-loaded .hero h1 span:last-child { animation: title-in 980ms var(--ease) 240ms both; }
.motion-loaded .hero-copy { animation: rise-in 780ms var(--ease) 390ms both; }
.motion-loaded .hero-actions { animation: rise-in 780ms var(--ease) 470ms both; }
.motion-loaded .frame-back { animation: frame-in 1000ms var(--ease) 180ms both; }
.motion-loaded .frame-main { animation: frame-in 1000ms var(--ease) 280ms both; }
.motion-loaded .frame-side { animation: frame-in 1000ms var(--ease) 390ms both; }
.motion-loaded .hero-note,.motion-loaded .project-facts { animation: rise-in 800ms var(--ease) 520ms both; }
.motion-loaded .proof-row { animation: rise-in 900ms var(--ease) 640ms both; }

@keyframes rise-in { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
@keyframes title-in { from { opacity:0; clip-path:inset(0 0 100% 0); transform:translateY(46px); } to { opacity:1; clip-path:inset(0 0 0 0); transform:translateY(0); } }
@keyframes frame-in { from { opacity:0; clip-path:inset(100% 0 0 0); } to { opacity:1; clip-path:inset(0 0 0 0); } }

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: page-old 360ms ease both; }
::view-transition-new(root) { animation: page-new 620ms var(--ease) both; }
@keyframes page-old { to { opacity: 0; filter: blur(4px); } }
@keyframes page-new { from { opacity: 0; clip-path: inset(5% 0 0 0); } }

@media (max-width: 1100px) {
  .nav-inner { grid-template-columns: 1fr auto; }
  .nav-links { display: none; }
  .hero-copy-block { width: 84%; }
  .hero-gallery { right: -10%; width: 62vw; opacity: .82; }
  .enterprise-section > .container { grid-template-columns: 230px minmax(0,1fr); gap: 44px; }
  .case-card,.case-card:nth-child(even) { grid-template-columns: 1fr; gap: 28px; }
  .case-card:nth-child(even) .case-media-wrap { order: 0; }
  .lab-card-copy { grid-template-columns: 1fr; }
  .lab-card-copy p { margin-top: -8px; }
  .method-layout,.story-layout { gap: 60px; }
  .method-step { grid-template-columns: 76px minmax(190px,.75fr) 1fr; }
  .detail-block { grid-template-columns: 110px minmax(190px,.5fr) 1fr; }
  .project-carousel { width: 94%; }
}

@media (max-width: 800px) {
  :root { --gutter: 22px; }
  .site-nav { position: relative; }
  .nav-inner { min-height: 68px; gap: 12px; }
  .brand { grid-template-columns: 26px auto; }
  .brand small { display: none; }
  .brand-mark { width: 26px; height: 26px; }
  .hero { min-height: auto; padding-top: 38px; }
  .hero-composition { min-height: 0; }
  .hero-copy-block { width: 100%; padding-top: 74px; }
  .hero h1 { font-size: clamp(3.35rem,13vw,5.2rem); line-height: .94; }
  .hero-copy { width: 88%; }
  .hero-gallery { position: relative; top: auto; right: auto; width: 100%; height: 500px; margin-top: 56px; opacity: 1; }
  .hero-gallery::before { right: 2%; width: 72%; }
  .frame-main { right: 0; width: 78%; }
  .frame-side { left: 0; right: auto; width: 48%; }
  .frame-back { right: 7%; width: 50%; }
  .hero-note { position: relative; right: auto; bottom: auto; width: min(390px,90%); margin: 28px 0 54px auto; }
  .proof-row { grid-template-columns: 1fr; }
  .proof { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); padding: 22px 0; }
  .proof:last-child { border-bottom: 0; }
  .section { padding: 100px 0; }
  .enterprise-section > .container,.method-layout,.story-layout { display: block; }
  .section-head-sticky,.method-head,.story-rail { position: relative; top: auto; margin-bottom: 60px; }
  .case-stack { gap: 92px; }
  .lab-head,.archive-head,.module-head { grid-template-columns: 1fr; gap: 18px; }
  .lab-head h2,.lab-head p,.archive-head h2,.module-head h2,.module-head p { margin-top: 0; }
  .lab-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .lab-card:nth-child(n) { grid-column: auto; margin-top: 0; }
  .lab-card:nth-child(3),.lab-card:nth-child(5) { transform: translateY(50px); }
  .method-step { grid-template-columns: 74px 1fr; min-height: 220px; padding: 30px 0; }
  .method-step p { grid-column: 2; }
  .archive-item { grid-template-columns: 42px 1fr 34px; gap: 16px; padding: 22px 0; }
  .archive-type,.archive-item p { grid-column: 2; }
  .archive-item strong { grid-column: 2; grid-row: 1; }
  .archive-item > .card-index { grid-column: 1; grid-row: 1; }
  .archive-item i { grid-column: 3; grid-row: 1; }
  .contact-grid { grid-template-columns: 1fr; }
  .qr { justify-self: start; margin-top: 40px; }
  .project-hero-grid { grid-template-columns: 1fr; margin-top: 80px; }
  .project-facts { display: grid; grid-template-columns: repeat(3,1fr); }
  .fact { padding: 18px 16px 18px 0; }
  .project-carousel { width: 100%; }
  .visual-margin-note { font-size: 3rem; }
  .carousel-bar { min-height: 58px; }
  .carousel-controls { gap: 8px; }
  .carousel-controls button { width: 40px; height: 40px; }
  .detail-block { grid-template-columns: 86px 1fr; min-height: 0; }
  .detail-block p,.detail-block ul { grid-column: 2; }
  .module { grid-template-columns: 54px 1fr; padding: 30px 0; }
  .module p { grid-column: 2; }
  .next-project { grid-template-columns: 1fr 50px; padding: 50px 0; }
  .next-project span { grid-column: 1/-1; }
}

@media (max-width: 560px) {
  .lang-switch button { min-width: 44px; }
  .hero-intro { align-items: center; }
  .hero-edition { display: none; }
  .hero-copy-block { padding-top: 58px; }
  .hero h1 { font-size: clamp(2rem,10.3vw,2.45rem); letter-spacing: -.025em; }
  .hero h1 span { white-space: nowrap; }
  html[lang="en"] .hero h1 { font-size: 12vw; }
  .hero-copy { width: 100%; margin-top: 30px; font-size: .92rem; }
  .hero-actions { margin-top: 28px; }
  .button { min-height: 48px; }
  .hero-gallery { height: 390px; margin-top: 44px; }
  .frame-main { top: 23%; width: 85%; height: 46%; }
  .frame-side { bottom: 1%; width: 50%; height: 30%; }
  .frame-back { width: 56%; height: 29%; }
  .hero-note { width: 100%; margin-bottom: 42px; }
  .section-head h2,.section-head-sticky h2,.method-head h2 { font-size: clamp(3rem,13vw,4.4rem); }
  .case-stack { gap: 76px; }
  .case-copy h3 { font-size: clamp(2.3rem,11vw,3.3rem); }
  .case-copy p { font-size: .82rem; }
  .lab-gallery { display: block; }
  .lab-card:nth-child(n) { margin: 0 0 70px; transform: none; }
  .lab-card:nth-child(2) .project-media,.lab-card:nth-child(3) .project-media { aspect-ratio: 16/11; }
  .lab-card-copy { grid-template-columns: 1fr; }
  .method-step { grid-template-columns: 58px 1fr; gap: 18px; }
  .method-step > span { font-size: 2.8rem; }
  .method-step h3 { font-size: 1.65rem; }
  .archive-item { min-height: 120px; }
  .archive-type { display: none; }
  .archive-item p { font-size: .75rem; }
  .contact h2 { font-size: clamp(3rem,13vw,4.5rem); }
  .footer { flex-direction: column; margin-top: 72px; }
  .project-hero { padding-top: 46px; }
  .project-hero-grid { margin-top: 64px; gap: 52px; }
  .project-hero h1 { font-size: clamp(3.2rem,14vw,5rem); letter-spacing: -.025em; line-height: .98; }
  .project-summary { margin-top: 30px; font-size: .94rem; }
  .project-launch { gap: 14px; margin-top: 24px; padding-top: 18px; }
  .project-launch img { width: 96px; height: 96px; padding: 7px; }
  .project-launch-copy strong { font-size: .82rem; }
  body[data-project-id="parentvoice"] .project-hero h1 { line-height: 1.08; }
  .project-facts { display: block; }
  .project-carousel { width: 100%; }
  .visual-margin-note { display: none; }
  .detail-block { display: block; padding: 42px 0; }
  .detail-block h2 { margin-top: 20px; }
  .detail-block p,.detail-block ul { margin-top: 28px; }
  .module { display: block; }
  .module strong { display: block; margin-top: 16px; }
  .module p { margin-top: 18px; }
  .next-project { min-height: 230px; }
  .next-project strong { font-size: 2.7rem; }
  .back-row { flex-direction: column; }
  .motion-ready .reveal-item {
    clip-path: none;
    transform: translateY(18px);
    transition: opacity 420ms var(--ease) var(--reveal-delay,0ms), transform 480ms var(--ease) var(--reveal-delay,0ms);
  }
  .motion-loaded .hero-intro,
  .motion-loaded .hero h1 span,
  .motion-loaded .hero-copy,
  .motion-loaded .hero-actions,
  .motion-loaded .hero-frame,
  .motion-loaded .hero-note,
  .motion-loaded .proof-row,
  .motion-loaded .project-hero-top,
  .motion-loaded .project-title-block,
  .motion-loaded .project-facts { animation-duration: 520ms; }
  ::view-transition-old(root) { animation-duration: 180ms; }
  ::view-transition-new(root) { animation-duration: 260ms; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .motion-ready .reveal-item,.motion-ready .hero-intro,.motion-ready .hero h1 span,.motion-ready .hero-copy,.motion-ready .hero-actions,.motion-ready .hero-frame,.motion-ready .hero-note,.motion-ready .proof-row,.motion-ready .project-hero-top,.motion-ready .project-title-block,.motion-ready .project-facts { opacity: 1 !important; clip-path: none !important; transform: none !important; }
  .hero-frame,.lab-card,.case-card { transform: none !important; }
  .page-atmosphere::after { display: none; }
}