/* ============================================================
   TITANIUM — Brand Strategy & Storytelling
   Cinematic, parallax-driven, luxury editorial
   ============================================================ */

/* 甲方提供的签名书法体,内嵌进站点(所有访客都能看到,不再回退 Great Vibes)。用于 --script(Beyond/签名) */
@font-face {
  font-family: "Brittany Signature";
  src: url("../assets/fonts/brittany-signature.woff2") format("woff2"),
       url("../assets/fonts/brittany-signature.ttf") format("truetype");
  font-weight: normal; font-style: normal; font-display: swap;
}

:root {
  --ink:      #080706;
  --ink-2:    #100d0b;
  --night:    #0a1120;
  --night-2:  #0f1a2e;
  --dusk:     #c98a4a;
  --dusk-hi:  #e6ab68;
  --gold:     #c79a5b;
  --gold-hi:  #e6c088;
  --cream:    #efe7db;
  --sand:     #c8bda4;
  --muted:    #9c948a;
  --muted-2:  #6c655c;
  --line:     rgba(239,231,219,.13);
  --line-2:   rgba(239,231,219,.28);

  /* 正文改用 Helvetica(甲方要求;Windows 无 Helvetica → 回退 Arial,度量几乎一致);
     展示大标签仍用 Jost(--brand);签名书法体改回 Great Vibes(原来的字体,更细,甲方要求) */
  --serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans:  "Helvetica Neue", Helvetica, Arial, sans-serif;
  --brand: "Jost", "Century Gothic", "Inter", sans-serif;
  --script: "Great Vibes", "Segoe Script", cursive;

  --ease: cubic-bezier(.22,.61,.28,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --gutter: clamp(22px, 6vw, 120px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
::selection { background: rgba(199,154,91,.28); color: #fff; }

.skip-link {
  position: fixed; left: 16px; top: -60px; z-index: 300;
  background: var(--ink-2); color: var(--cream); padding: 10px 16px;
  border-radius: 6px; text-decoration: none; font-size: 13px; letter-spacing: .04em;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; outline: 1px solid var(--gold); outline-offset: 2px; }

/* ---------- fixed cinematic overlays ---------- */
.grain {
  position: fixed; inset: 0; z-index: 200; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scrollbar {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 190;
  background: rgba(255,255,255,.04); pointer-events: none;
}
.scrollbar span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-hi));
  box-shadow: 0 0 12px rgba(199,154,91,.6);
}

/* ---------- masthead ---------- */
.masthead {
  position: fixed; top: 0; left: 0; right: 0; z-index: 180;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--gutter);
  opacity: 0; transform: translateY(-12px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  pointer-events: none;
}
.masthead::before {
  content: ""; position: absolute; inset: 0 0 -40px 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(8,7,6,.82) 0%, rgba(8,7,6,.5) 55%, rgba(8,7,6,0) 100%);
  opacity: 0; transition: opacity .8s var(--ease);
}
.masthead.is-visible { opacity: 1; transform: none; }
.masthead.is-visible::before { opacity: 1; }
.masthead.is-visible a { pointer-events: auto; }
.masthead__mark {
  display: inline-flex; align-items: center;
  text-decoration: none; line-height: 0;
}
.masthead__logo {
  height: clamp(38px, 4.6vw, 52px); width: auto; display: block;
}
.masthead__nav { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 42px); }
.masthead__nav a {
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; transition: color .3s var(--ease);
}
.masthead__nav a:hover { color: var(--cream); }
.masthead__cta {
  color: var(--gold-hi) !important; border: 1px solid var(--line-2);
  padding: 10px 20px; border-radius: 100px; transition: border-color .3s, color .3s, background .3s;
}
.masthead__cta:hover { border-color: var(--gold); background: rgba(199,154,91,.08); }
.masthead__nav a:focus-visible, .masthead__mark:focus-visible {
  outline: 1px solid var(--gold); outline-offset: 6px;
}
@media (max-width: 780px) { .masthead__nav a:not(.masthead__cta) { display: none; } }

/* ============================================================
   ACT I — THE OVERTURE (merged, particle-driven)
   ============================================================ */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.overture { position: relative; height: 980vh; background: var(--ink); }
.overture__sticky {
  position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden;
  background: var(--ink);
}

/* 夜色过渡:与 Beyond 段背景同一族(近黑 + 右侧金晕),在收束段淡入 */
.overture__night {
  position: absolute; inset: 0; z-index: 3; opacity: 0; pointer-events: none;
  /* 与 Beyond 段完全同一底色;中央一点微光在 70% 处完全衰减,四边保持纯平 */
  background:
    radial-gradient(55% 45% at 50% 44%, rgba(199,154,91,.05), transparent 70%),
    var(--ink);
}

/* 相机:暮色整页缩小后的归宿 */
.cam {
  position: absolute; z-index: 4; visibility: hidden; opacity: 0; pointer-events: none;
  will-change: transform;
}
/* 甲方:真实镜头照片(圆形透明底);暮色缩进中央玻璃,四周镜头反光保留 */
/* 甲方:去掉 drop-shadow / blend / filter——缩放时会逐帧重绘导致卡顿;纯栅格由 GPU 直接缩放 */
.cam__lens {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; display: block;
}
.cam__screen {
  position: absolute;
  left: 30%; top: 30%; width: 40%; height: 40%;
  overflow: hidden; border-radius: 50%; background: #05060a;
}
.cam__screen img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%;
}
/* 镜头镀膜反光叠在暮色上(青+紫+高光);普通混合,避开 blend 在缩放时重绘 */
.cam__sheen {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(58% 46% at 40% 30%, rgba(120,238,205,.42), rgba(120,238,205,0) 60%),
    radial-gradient(52% 48% at 63% 64%, rgba(165,152,242,.38), rgba(165,152,242,0) 62%),
    radial-gradient(28% 28% at 45% 42%, rgba(255,255,255,.45), rgba(255,255,255,0) 72%);
}
/* 暮色进相机时由暗渐亮(避免突然变亮)——纯不透明度,不触发重绘 */
.cam__dim {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: #05070e; opacity: 0;
}
.vapor { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }
.overture__slogans {
  position: absolute; left: 0; right: 0; top: 61%; z-index: 6;
  display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center;
  font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 4vw, 54px);
  letter-spacing: .12em; color: var(--cream); pointer-events: none; opacity: 0;
  text-shadow: 0 2px 30px rgba(5,7,14,.6);   /* 稍醒目:托起于暮色 */
}
.overture__slogans span:last-child { color: var(--gold-hi); text-shadow: 0 2px 26px rgba(199,154,91,.38); }
#signature { opacity: 0; }

.scene {
  position: relative;
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 12vh var(--gutter);
  overflow: hidden;
}

/* the cinematic sentences */
.line {
  position: relative; z-index: 5;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(28px, 5.2vw, 76px);
  line-height: 1.18; letter-spacing: .01em;
  color: var(--cream); max-width: 16ch;
  text-wrap: balance; text-shadow: 0 2px 40px rgba(0,0,0,.5);
}

/* Scene 1 — Dusk */
.scene--dusk { background: #05070e; }
.scene__sky {
  position: absolute; inset: -10% 0 0 0; z-index: 0;
  background:
    radial-gradient(120% 80% at 50% 118%, rgba(230,171,104,.55) 0%, rgba(201,138,74,.22) 26%, rgba(20,26,46,0) 55%),
    linear-gradient(180deg, #05070e 0%, #0a1020 34%, #16233c 66%, #2c3a54 100%);
}
.scene__stars {
  position: absolute; inset: 0; z-index: 1; opacity: .5;
  background-image:
    radial-gradient(1px 1px at 20% 22%, rgba(255,255,255,.9), transparent),
    radial-gradient(1px 1px at 68% 14%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 82% 30%, rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px at 38% 34%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.4px 1.4px at 12% 44%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 54% 8%, rgba(255,255,255,.7), transparent);
  background-repeat: no-repeat;
}
.scene__glow {
  position: absolute; left: 50%; bottom: -30%; transform: translateX(-50%);
  width: 140%; height: 70%; z-index: 2;
  background: radial-gradient(closest-side, rgba(230,171,104,.4), rgba(230,171,104,0) 70%);
  filter: blur(20px);
}

/* Scene 2 — City at dusk */
.scene--city { background: #060a14; }
.scene__skyline {
  position: absolute; inset: 0; z-index: 0;
}
.scene__skyline img {
  width: 100%; height: 118%; object-fit: cover; object-position: 50% 62%;
  transform: translateY(-6%);
}
.scene__veil {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(180deg, rgba(6,10,20,.72) 0%, rgba(6,10,20,.28) 40%, rgba(6,10,20,.55) 100%),
    radial-gradient(120% 70% at 50% 50%, transparent 40%, rgba(4,6,12,.7) 100%);
}
.scene--city .line { color: #fff; }

/* Scene 3 — The lobby */
.scene--lobby { background: #0a0705; }
.lobby { position: absolute; inset: 0; z-index: 0; }
.lobby__ember {
  position: absolute; left: 50%; bottom: -14%; transform: translateX(-50%);
  width: 90%; height: 90%;
  background: radial-gradient(closest-side, rgba(224,140,60,.5) 0%, rgba(180,90,40,.16) 42%, transparent 72%);
  filter: blur(24px);
}
.lobby__bokeh {
  position: absolute; inset: 0; opacity: .55;
  background-image:
    radial-gradient(circle 11px at 18% 30%, rgba(240,190,120,.20) 30%, rgba(255,210,140,.42) 62%, transparent 78%),
    radial-gradient(circle 5px  at 80% 24%, rgba(240,190,120,.18) 30%, rgba(255,208,138,.40) 60%, transparent 78%),
    radial-gradient(circle 14px at 66% 62%, rgba(240,190,120,.12) 32%, rgba(255,205,135,.30) 60%, transparent 80%),
    radial-gradient(circle 7px  at 30% 70%, rgba(240,190,120,.16) 30%, rgba(255,208,138,.34) 60%, transparent 78%),
    radial-gradient(circle 4px  at 90% 74%, rgba(240,190,120,.16) 30%, rgba(255,208,138,.32) 60%, transparent 78%),
    radial-gradient(circle 9px  at 48% 20%, rgba(240,190,120,.14) 30%, rgba(255,205,135,.28) 60%, transparent 80%),
    radial-gradient(circle 6px  at 8%  56%, rgba(240,190,120,.15) 30%, rgba(255,205,135,.30) 60%, transparent 80%),
    radial-gradient(circle 3px  at 58% 82%, rgba(240,190,120,.18) 30%, rgba(255,208,138,.38) 60%, transparent 78%);
  background-repeat: no-repeat; filter: blur(4px);
}
.lobby__figures {
  position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  background: linear-gradient(180deg, transparent, rgba(6,4,3,.9) 78%);
}
.lobby::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 50% 60%, transparent 34%, rgba(6,4,3,.82) 100%);
}
.scene--lobby .line { color: #f4e9dc; }

/* unified scene backgrounds (real imagery) + legibility veils */
.scene__bg { position: absolute; inset: -14% 0; z-index: 0; overflow: hidden; }
.scene__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: saturate(.72) brightness(.80) contrast(1.05); }
.scene__veil--dusk { background: radial-gradient(125% 85% at 50% 42%, rgba(6,10,20,.30) 0%, rgba(6,10,20,.55) 60%, rgba(4,7,14,.82) 100%); }
.scene__veil--lobby { background:
  linear-gradient(180deg, rgba(8,6,4,.48) 0%, rgba(8,6,4,.18) 42%, rgba(8,6,4,.72) 100%),
  radial-gradient(115% 85% at 50% 46%, transparent 24%, rgba(6,4,3,.6) 100%); }

/* scroll cue */
.scroll-cue { position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%); z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--muted); pointer-events: none; }
.scroll-cue span { font-size: 11px; letter-spacing: .32em; text-transform: uppercase; }
.scroll-cue i { width: 1px; height: 42px; background: linear-gradient(var(--muted), transparent); transform-origin: top; animation: cue 2.2s var(--ease) infinite; }
@keyframes cue { 0%, 100% { opacity: .25; transform: scaleY(.5); } 50% { opacity: .9; transform: scaleY(1); } }

/* Scene 4 — The reveal */
.scene--reveal { background: radial-gradient(120% 100% at 50% 40%, #16110c 0%, #080706 62%); }
.wordmark { position: relative; z-index: 5; text-align: center; }
.wordmark__title {
  font-family: var(--sans); font-weight: 300;
  font-size: clamp(52px, 15vw, 220px);
  letter-spacing: .16em; line-height: 1;
  color: transparent;
  background: linear-gradient(180deg, #fdf7ee 0%, #e6d4b6 46%, #b98f52 100%);
  -webkit-background-clip: text; background-clip: text;
  padding-left: .16em;
  text-shadow: 0 0 60px rgba(199,154,91,.12);
}
.wordmark__lines {
  margin-top: clamp(18px, 3vw, 40px);
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(18px, 2.6vw, 34px); letter-spacing: .1em; color: var(--cream);
}
.wordmark__l2 { color: var(--gold-hi); }

/* Scene 5 — signature, written by hand */
.signature {
  position: absolute; right: clamp(10px, 4vw, 64px); bottom: clamp(22px, 6vh, 66px);
  z-index: 6;
}
.signature__ink {
  font-family: var(--script); font-size: clamp(54px, 9vw, 132px);
  color: var(--gold-hi); line-height: 1.1; padding: 0 .12em .12em;
  filter: drop-shadow(0 6px 26px rgba(199,154,91,.28));
}
/* 手写显现:遮罩随 --ink-x 从左往右推进(软边=墨迹流入);笔尖 .signature__nib 领着写 */
.signature__ink {
  -webkit-mask-image: linear-gradient(90deg, #000 0 calc(var(--ink-x, 0%) - 4%), transparent var(--ink-x, 0%));
  mask-image: linear-gradient(90deg, #000 0 calc(var(--ink-x, 0%) - 4%), transparent var(--ink-x, 0%));
}
.signature__ink em { font-style: normal; color: var(--cream); }
/* 移动笔尖:一点发光金点,领着墨迹走,写完淡出(--nib-o 由 JS 给) */
.signature__nib {
  position: absolute; left: var(--ink-x, 0%); top: 56%;
  width: 10px; height: 10px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff 0%, var(--gold-hi) 40%, rgba(230,192,136,0) 72%);
  filter: drop-shadow(0 0 7px rgba(230,192,136,.95));
  opacity: var(--nib-o, 0); pointer-events: none;
}

/* ============================================================
   ACT II — BEYOND
   ============================================================ */
.beyond { position: relative; height: 560vh; background: var(--ink); }  /* +180vh：溶散+粒子成形 WHO WE ARE */
.beyond__sticky {
  position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden;
  display: flex; align-items: center; justify-content: center; padding: 0 var(--gutter); text-align: center;
  /* 与序曲收束段同一平色底,消除跨段分界 */
  background: var(--ink);
}

/* ambient motion: two slow-drifting warm glows + rising gold dust */
.beyond__glow {
  position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(90px); will-change: transform;
}
/* 光晕改用 vh 定位并远离上下边缘(渐变在 70% 处衰减完),
   漂移也不越界——避免在段落交界处露出"半个光晕"形成分界线 */
.beyond__glow--a {
  width: 72vh; height: 72vh; left: -12vh; top: 10vh;
  background: radial-gradient(closest-side, rgba(199,154,91,.13), transparent 70%);
  animation: beyond-drift-a 30s ease-in-out infinite alternate;
}
.beyond__glow--b {
  width: 56vh; height: 56vh; right: -8vh; bottom: 12vh;
  background: radial-gradient(closest-side, rgba(230,171,104,.10), transparent 70%);
  animation: beyond-drift-b 24s ease-in-out infinite alternate;
}
@keyframes beyond-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(8vw, 3vh, 0) scale(1.12); }
}
@keyframes beyond-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.08); }
  to   { transform: translate3d(-7vw, -3vh, 0) scale(.96); }
}
.beyond__dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .beyond__glow--a, .beyond__glow--b { animation: none; }
  .beyond__dust { display: none; }
}
.beyond__line {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(40px, 9vw, 150px); line-height: 1.25; letter-spacing: -.01em;
  white-space: nowrap; color: var(--cream);
}
/* "Beyond" 走 --script(甲方要求换 Brittany Signature;本机装了才显示,否则回退 Great Vibes) */
.beyond__pre {
  font-family: var(--script); font-weight: 300;
  color: var(--gold-hi); letter-spacing: normal;
  font-size: 1.55em; margin-right: .14em;
}
.beyond__dot { color: var(--cream); }
.beyond__cycle {
  display: inline-block; text-align: left; vertical-align: baseline;
  transition: width .55s cubic-bezier(.34, 1.32, .5, 1);
}
.beyond__cword {
  display: inline-block; font-style: italic; color: var(--cream);
  transition: transform .45s var(--ease-out), opacity .45s var(--ease-out), filter .45s var(--ease-out);
  will-change: transform, opacity, filter;
}
/* direction-aware swap (driven by scroll): forward = exit down / enter from top */
.beyond__cword.exit-down,
.beyond__cword.exit-up {
  opacity: 0; filter: blur(10px);
  transition: transform .3s var(--ease), opacity .3s var(--ease), filter .3s var(--ease);
}
.beyond__cword.exit-down { transform: translateY(.32em); }
.beyond__cword.exit-up   { transform: translateY(-.32em); }
.beyond__cword.enter-top    { transform: translateY(-.32em); opacity: 0; filter: blur(10px); transition: none; }
.beyond__cword.enter-bottom { transform: translateY(.32em);  opacity: 0; filter: blur(10px); transition: none; }
@media (prefers-reduced-motion: reduce) {
  .beyond__cword, .beyond__cword.exit-down, .beyond__cword.exit-up,
  .beyond__cword.enter-top, .beyond__cword.enter-bottom {
    transform: none !important; filter: none !important; transition: opacity .35s ease !important;
  }
  .beyond__cycle { transition: none; }
}

/* ============================================================
   ACT III — content
   ============================================================ */
.eyebrow {
  font-family: var(--sans); font-size: 13px; font-weight: 500;   /* 比正文(300)醒目:Medium + 略大 */
  letter-spacing: .34em; text-transform: uppercase; color: var(--gold);
}
/* 甲方:Case Studies 标签更醒目(暗底上加大、加重、更亮金) */
.cases .eyebrow { font-size: clamp(23px, 2.6vw, 42px); font-weight: 600; letter-spacing: .16em; color: var(--gold-hi); }
.section-head { max-width: 1400px; margin: 0 auto clamp(48px, 8vh, 100px); }
.section-title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(30px, 5vw, 66px); line-height: 1.08; letter-spacing: .005em;
  margin-top: 22px; max-width: 20ch; color: var(--cream); text-wrap: balance;
}

/* Who We Are */
.who {
  position: relative; overflow: hidden;
  padding: clamp(110px, 20vh, 220px) var(--gutter);
  display: grid; gap: clamp(30px, 5vh, 60px); place-items: start center; text-align: center;
}
.who::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url(../assets/who-atmosphere.webp) center/cover; opacity: .5;
}
.who::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(120% 80% at 50% 50%, rgba(8,7,6,.2) 20%, rgba(8,7,6,.72) 100%);
}
.who > * { position: relative; z-index: 1; }
.who__body { max-width: 1100px; }
.who__lede {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(26px, 4.4vw, 60px); line-height: 1.24; letter-spacing: .005em;
  color: var(--cream); text-wrap: balance;
}
.who__lede em { font-style: italic; color: var(--gold-hi); }
/* 编辑式重点词:每个标题点一个金色斜体词(呼应宣言 atmosphere),增强艺术层次 */
.section-title em, .process__title em, .work__title em, .whero__title em {
  font-style: italic; color: var(--gold-hi);
}
.who__actions { margin-top: clamp(38px, 6vh, 64px); display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase; font-weight: 300;
  text-decoration: none; padding: 16px 30px; border-radius: 100px;
  transition: transform .4s var(--ease-out), background .4s var(--ease), color .4s, border-color .4s;
  cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 1px solid var(--gold); outline-offset: 5px; }
.btn--solid { background: var(--cream); color: var(--ink); }
.btn--solid:hover { background: #fff; }
.btn--ghost { color: var(--cream); border: 1px solid var(--line-2); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-hi); }
.btn__arrow { width: 20px; height: 1px; background: currentColor; position: relative; transition: width .4s var(--ease-out); }
.btn__arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.btn--solid:hover .btn__arrow { width: 30px; }

/* Services */
.services { padding: clamp(80px, 14vh, 170px) var(--gutter); }
.services__grid {
  max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
}
.svc {
  background: var(--ink); padding: clamp(32px, 4vw, 60px);
  transition: background .5s var(--ease);
}
.svc:hover { background: var(--ink-2); }
.svc__no { font-family: var(--serif); font-size: 15px; letter-spacing: .2em; color: var(--gold); }
.svc__name {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(22px, 2.6vw, 34px); line-height: 1.16; margin: 14px 0 26px; color: var(--cream);
}
.svc__list { list-style: none; display: grid; gap: 11px; }
.svc__list li {
  font-size: 15px; color: var(--muted); letter-spacing: .01em; padding-left: 20px; position: relative;
  transition: color .3s var(--ease);
}
.svc__list li::before {
  content: ""; position: absolute; left: 0; top: .72em; width: 7px; height: 1px; background: var(--gold); opacity: .7;
}
.svc:hover .svc__list li { color: #cfc7bc; }

/* Projects — pinned horizontal gallery on warm sand (scroll down = pan right) */
.work {
  position: relative;
  background: var(--sand); color: #241f1a;
  height: 340vh;                       /* JS refines to match track width 1:1 */
}
.work__sticky {
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  overflow: hidden;
}
.work .eyebrow { color: #8a6a35; }
.work__head {
  position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%);
  z-index: 0;              /* 卡片从标题上方扫过,深字不再压深图 */
  pointer-events: none;
}
.work__title {
  font-family: var(--serif); font-weight: 300; color: #241f1a;
  font-size: clamp(26px, 3.4vw, 46px); line-height: 1.08; margin-top: 14px;
  max-width: 20ch; text-wrap: balance;
}
.work__watermark {
  position: absolute; left: 8%; top: 50%; transform: translateY(-50%);
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(160px, 30vw, 480px); letter-spacing: .02em;
  color: rgba(36, 31, 26, .05); white-space: nowrap; z-index: 0; pointer-events: none;
  will-change: transform;
}
.work__track {
  position: absolute; left: 0; top: 0; height: 100%; z-index: 1;
  display: flex; align-items: center; gap: clamp(48px, 7vw, 130px);
  /* 起点右移:初始状态左侧是完整可读的标题"封面",第一张卡从右侧探入 */
  padding: 0 var(--gutter) 0 clamp(360px, 46vw, 920px);
  will-change: transform;
}
.proj {
  position: relative; display: block; flex: 0 0 auto; text-decoration: none; color: #fff;
  width: clamp(420px, 58vw, 1040px); height: min(76vh, 80vw); overflow: hidden;
  box-shadow: 0 40px 80px rgba(40, 32, 22, .26);
}
.proj:nth-child(1) { transform: translateY(4vh); }
/* 甲方:鸡汤视频卡改 16:9,整段视频完整显示、比例正常 */
.proj:nth-child(2) { transform: translateY(-6vh); width: clamp(400px, 54vw, 880px); height: auto; aspect-ratio: 16 / 9; }
.proj:nth-child(3) { transform: translateY(7vh); width: clamp(400px, 54vw, 940px); height: min(70vh, 76vw); }
.proj__media {
  position: absolute; inset: 0; z-index: 0;
  transition: transform 1.2s var(--ease-out);
}
.proj--a .proj__media { background: #0a0f1a url(../assets/proj-voices.webp?v=105) center/cover; }
.proj--b .proj__media { background: #0c0806 url(../assets/proj-hospitality.webp) center/cover; }
.proj--d .proj__media { background: #060c0c url(../assets/proj-community.webp) center/cover; }
/* Selected Work 最左卡:循环播放的宣传片剪辑动图(截自西北纪录片) */
.proj__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Justin 特写偏右(左侧是证书叠层)→ 竖版卡对焦到他脸上 */
.proj--d .proj__video { object-position: 68% 50%; }
.proj::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.06) 0%, transparent 28%, rgba(10,8,6,.62) 100%);
}
.proj__cat {
  position: absolute; left: clamp(18px, 2vw, 30px); bottom: calc(clamp(18px, 2vw, 30px) + 40px); z-index: 2;
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.8);
}
.proj__label {
  position: absolute; left: clamp(18px, 2vw, 30px); bottom: clamp(18px, 2vw, 30px); z-index: 2;
  font-family: var(--serif); font-size: clamp(21px, 1.8vw, 28px); line-height: 1.1;
  letter-spacing: .01em; color: #fff; max-width: 74%;
}
.proj__plus {
  position: absolute; right: clamp(16px, 1.6vw, 26px); bottom: clamp(16px, 1.6vw, 26px); z-index: 3;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.55);
  display: grid; place-items: center; transition: background .4s var(--ease), border-color .4s;
}
.proj__plus::before, .proj__plus::after { content: ""; position: absolute; background: #fff; transition: background .4s; }
.proj__plus::before { width: 15px; height: 1px; }
.proj__plus::after { width: 1px; height: 15px; }
.proj:hover .proj__media { transform: scale(1.05); }
.proj:hover .proj__plus { background: var(--gold); border-color: var(--gold); }
.proj:hover .proj__plus::before, .proj:hover .proj__plus::after { background: var(--ink); }
.proj:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }

/* narrow screens / reduced motion: plain vertical stack, no scroll-jacking */
@media (max-width: 820px), (prefers-reduced-motion: reduce) {
  .work { height: auto !important; padding: clamp(80px, 14vh, 140px) 0 clamp(90px, 16vh, 160px); }
  .work__sticky { position: static; height: auto; overflow: visible; }
  .work__head { position: static; padding: 0 var(--gutter); margin-bottom: clamp(36px, 6vh, 60px); }
  .work__watermark { display: none; }
  .work__track {
    position: static; height: auto; transform: none !important;
    flex-direction: column; align-items: center; gap: clamp(30px, 5vh, 52px);
    padding: 0 var(--gutter);
  }
  .proj, .proj:nth-child(1), .proj:nth-child(2), .proj:nth-child(3) {
    transform: none; width: 100%; max-width: 520px; height: auto; aspect-ratio: 4 / 5;
  }
}

/* Approach — steps */
.approach { padding: clamp(80px, 14vh, 170px) var(--gutter); }
.steps { max-width: 1400px; margin: 0 auto; list-style: none; border-top: 1px solid var(--line); }
.step {
  display: grid; grid-template-columns: 120px 1fr; gap: clamp(20px, 4vw, 80px); align-items: baseline;
  padding: clamp(30px, 4.4vh, 54px) 0; border-bottom: 1px solid var(--line);
  transition: padding-left .5s var(--ease);
}
.step:hover { padding-left: 14px; }
.step__no { font-family: var(--serif); font-size: clamp(20px, 2.4vw, 30px); color: var(--gold); letter-spacing: .1em; }
.step__name { font-family: var(--serif); font-weight: 300; font-size: clamp(26px, 4vw, 52px); line-height: 1; color: var(--cream); }
.step__desc { grid-column: 2; font-size: 16px; color: var(--muted); max-width: 52ch; margin-top: 14px; }
@media (min-width: 900px) {
  .step { grid-template-columns: 120px minmax(240px, 30%) 1fr; align-items: center; }
  .step__desc { grid-column: 3; margin-top: 0; }
}

/* Process — flow */
.process {
  padding: clamp(90px, 18vh, 200px) var(--gutter);
  background: radial-gradient(120% 90% at 50% 50%, #0e0c0a, #080706);
  text-align: center;
}
.process__inner { max-width: 1200px; margin: 0 auto; display: grid; gap: clamp(40px, 8vh, 90px); place-items: center; }
.flow { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 46px); flex-wrap: wrap; }
.flow__node {
  font-family: var(--serif); font-weight: 300; font-size: clamp(28px, 5.4vw, 74px);
  letter-spacing: .02em; color: var(--muted);
  transition: color .5s var(--ease);
}
.flow__node--last { color: var(--gold-hi); }
.flow:hover .flow__node { color: var(--cream); }
.flow__arrow { width: clamp(30px, 5vw, 70px); height: 1px; background: var(--line-2); position: relative; }
.flow__arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 6px; height: 6px; border-top: 1px solid var(--line-2); border-right: 1px solid var(--line-2); transform: rotate(45deg); }
@media (max-width: 640px) {
  .flow { flex-direction: column; }
  .flow__arrow { width: 1px; height: 30px; }
  .flow__arrow::after { top: auto; bottom: 0; right: -2.5px; transform: rotate(135deg); }
}

/* Footer / contact */
.foot {
  position: relative; overflow: hidden;
  padding: clamp(110px, 22vh, 240px) var(--gutter) 40px;
  text-align: center; display: grid; place-items: center; gap: 26px;
}
.foot__glow {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 120%; height: 60%;
  background: radial-gradient(closest-side, rgba(199,154,91,.16), transparent 70%);
  filter: blur(30px); pointer-events: none;
}
.foot__title {
  position: relative; font-family: var(--serif); font-weight: 300;
  font-size: clamp(38px, 8vw, 108px); line-height: 1.02; letter-spacing: .01em; color: var(--cream);
}
.foot__mail {
  position: relative; font-family: var(--serif); font-size: clamp(20px, 2.6vw, 32px);
  color: var(--gold-hi); text-decoration: none; letter-spacing: .04em;
  border-bottom: 1px solid var(--line-2); padding-bottom: 6px; transition: border-color .4s, color .4s;
}
.foot__mail:hover { border-color: var(--gold); color: var(--gold); }
.foot__base {
  position: relative; margin-top: clamp(60px, 12vh, 120px);
  width: 100%; max-width: 1400px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px;
  padding-top: 30px; border-top: 1px solid var(--line);
}
.foot__mark { font-family: var(--brand); letter-spacing: .4em; font-size: 15px; padding-left: .4em; }
.foot__tag { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.foot__beyond { font-family: var(--script); font-size: 46px; line-height: 1; color: var(--gold-hi); }
.foot__beyond em { font-style: normal; color: var(--cream); }
.foot__fine { position: relative; font-size: 12px; letter-spacing: .06em; color: var(--muted); margin-top: 10px; }

/* ============================================================
   reveal system + parallax
   ============================================================ */
/* hidden initial states (no-JS override lives in a <noscript> block in <head>) */
[data-reveal] {
  opacity: 0; transform: translateY(30px);
  transition: opacity 1.1s var(--ease-out), transform 1.2s var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* wordmark: elegant blur/letter-spacing settle */
.wordmark[data-reveal] { transform: none; opacity: 0; }
.wordmark[data-reveal] .wordmark__title { filter: blur(14px); letter-spacing: .5em; transition: filter 1.6s var(--ease-out), letter-spacing 1.8s var(--ease-out); }
.wordmark[data-reveal].is-in { opacity: 1; }
.wordmark[data-reveal].is-in .wordmark__title { filter: blur(0); letter-spacing: .16em; }
.wordmark__lines span { opacity: 0; transform: translateY(16px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.wordmark.is-in .wordmark__l1 { opacity: 1; transform: none; transition-delay: .5s; }
.wordmark.is-in .wordmark__l2 { opacity: 1; transform: none; transition-delay: .9s; }

/* signature handled via --ink-x set by JS; keep base hidden until in view */
.signature[data-reveal] { opacity: 0; transition: opacity .6s var(--ease); }
.signature[data-reveal].is-in { opacity: 1; }

/* ---------- responsive ---------- */
@media (max-width: 720px) {
  body { font-size: 16px; }
  .services__grid { grid-template-columns: 1fr; }
  .work__grid { grid-template-columns: 1fr; }
  .step { grid-template-columns: 60px 1fr; }
  .beyond__word:nth-child(2), .beyond__word:nth-child(4) { align-self: flex-start; text-align: left; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .wordmark[data-reveal] .wordmark__title { filter: none !important; letter-spacing: .16em !important; }
  .wordmark__lines span { opacity: 1 !important; transform: none !important; }
  .signature__ink { -webkit-mask-image: none !important; mask-image: none !important; }
  .grain { display: none; }
  * { animation: none !important; }
}

/* ============================================================
   REDESIGN: editorial scrollytelling after Beyond
   Keeps overture, Beyond, and Selected Work behavior intact.
   ============================================================ */

[hidden] { display: none !important; }

/* Who — 大堂照片钉住做暖背景层,宣言与引言作为前景滚过(层叠章节) */
/* Who — 平色墨底 + 剪贴画建筑(sondaven 拼贴式),宣言逐词点亮 */
.who {
  position: relative;
  background: var(--ink);
  padding: clamp(150px, 20vh, 260px) var(--gutter) clamp(160px, 24vh, 300px);
  overflow: hidden;
  /* 显式压住文件前部 legacy 块 */
  display: block;
  text-align: left;
  min-height: auto;
}
/* Beyond→Who 合并：照片背景作废，Who 直接坐在与 Beyond 同一片墨色上 */
.who::before, .who::after { content: none; }
/* 粒子标题已呈现 WHO WE ARE,故 #about 的眉标仅留给屏读器 */
html.who-merged .who .eyebrow {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* 宣言(whoLede)与支撑句(who__text)在 #about 里作为紧贴的一组显示:
   "Titanium builds narrative" 紧接 "Trust is not a message" 下方,两句都逐词点亮 */
html.who-merged .who {
  display: flex; align-items: center; min-height: 78vh;
  padding-top: clamp(96px, 14vh, 180px);
  padding-bottom: clamp(110px, 16vh, 210px);
}
html.who-merged .who__fg {
  width: 100%; max-width: 1500px; margin: 0 auto;
  gap: clamp(20px, 3vh, 34px);
}
html.who-merged .who__lede {
  position: static; width: auto; height: auto; clip: auto; margin: 0;
  max-width: 16ch;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(30px, 4.4vw, 60px); line-height: 1.12; letter-spacing: .004em;
  color: var(--cream);
}
html.who-merged .who__text {
  max-width: 30ch;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(19px, 2.3vw, 30px); line-height: 1.42;
  color: rgba(239, 231, 219, .82);
}
.who__fg {
  position: relative;
  z-index: 1;
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  justify-items: start;
  gap: clamp(18px, 3.4vh, 30px);
}
/* 剪贴画建筑:立在段底,与下一段(浅米 Services)直接相接,像站在下页之上 */
.who__cut {
  position: relative;
  z-index: 0;                    /* 第一版:安静地立在文字之下 */
  display: block;
  width: 116vw;                  /* 左右满出屏,section overflow 裁掉 */
  max-width: none;
  height: auto;
  margin: clamp(50px, 9vh, 110px) 0 -2px calc((100% - 116vw) / 2);
  will-change: translate;
  filter: drop-shadow(0 0 44px rgba(199,154,91,.1));
}
.who__lede {
  max-width: 13ch;
  font-family: var(--serif);
  font-size: clamp(44px, 6.6vw, 100px);
  font-weight: 300;
  line-height: 1.02;
  color: var(--cream);
  text-wrap: balance;
}
.who__text {
  max-width: 46ch;
  color: rgba(232,236,238,.78);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.7;
}
.who__actions {
  margin-top: clamp(10px, 2vh, 22px);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: flex-start;   /* 压住 legacy 的 center */
}
/* 第二幕:城市帧与引言卡以不同速度滑过照片(前快后慢) */
.who__strip {
  position: relative;
  z-index: 1;
  padding: clamp(60px, 12vh, 140px) var(--gutter) 0;
}
.who__frame {
  width: min(52vw, 780px);
  margin-left: auto;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid rgba(230,196,140,.3);
  box-shadow: 0 46px 110px rgba(0,0,0,.55);
  background: #0b0d10;
}
.who__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.who__quote {
  position: relative;
  z-index: 2;
  width: min(620px, 78vw);
  margin: clamp(-140px, -16vh, -60px) 0 0 clamp(0px, 6vw, 120px);
  padding: clamp(26px, 3.4vw, 46px);
  border-left: 1px solid rgba(230,196,140,.6);
  background: rgba(8,7,6,.5);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.who__quote span,
.who__quote strong {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(24px, 2.8vw, 44px);
  line-height: 1.16;
  color: rgba(239,231,219,.86);
}
.who__quote strong {
  margin-top: 10px;
  font-style: italic;
  color: var(--gold-hi);
}
.who__tail { height: 24vh; }

.btn {
  min-height: 48px;
  border-radius: 4px;
}

.services {
  position: relative;
  overflow: clip;
  padding: clamp(100px, 16vh, 190px) var(--gutter);
  background:
    linear-gradient(180deg, #e7dfd1 0%, #f2ece2 46%, #d8cfbd 100%);
  color: #171310;
}
.services::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(23,19,16,.08) 0 1px, transparent 1px 12.5vw),
    linear-gradient(180deg, rgba(255,255,255,.38), transparent 26%, rgba(0,0,0,.05));
}
.services .eyebrow { color: #806234; }
.services__intro {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto clamp(58px, 10vh, 120px);
}
.services .section-title {
  color: #171310;
  max-width: 15ch;
  font-size: clamp(42px, 6.6vw, 96px);
  line-height: .96;
}
.services__showcase {
  position: relative;
  z-index: 1;
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(320px, .78fr) minmax(520px, 1.22fr);
  gap: clamp(42px, 7vw, 120px);
  align-items: start;
}
.services__stage {
  position: sticky;
  top: clamp(82px, 13vh, 132px);
}
.stage__image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  border: 1px solid rgba(23,19,16,.16);
  box-shadow: 0 34px 80px rgba(35,25,14,.24);
  background: #211a13;
}
.stage__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.12) 56%, rgba(0,0,0,.42) 100%);
}
.stage__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
}
.stage__caption {
  margin-top: 24px;
  max-width: 34ch;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(23,19,16,.68);
}
.services__stack {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(23,19,16,.18);
}
.services .svc {
  position: relative;
  display: grid;
  grid-template-columns: clamp(58px, 7vw, 104px) 1fr;
  gap: clamp(20px, 4vw, 72px);
  min-height: clamp(310px, 45vh, 520px);
  padding: clamp(30px, 5vw, 70px) 0;
  border-bottom: 1px solid rgba(23,19,16,.18);
  background: transparent;
  color: #171310;
  transition: background .42s var(--ease), padding-left .42s var(--ease), border-color .42s var(--ease);
}
.services .svc::before {
  content: "";
  position: absolute;
  inset: 0 -26px;
  z-index: -1;
  background: rgba(255,255,255,.33);
  opacity: 0;
  transform: scaleY(.92);
  transform-origin: center;
  transition: opacity .42s var(--ease), transform .42s var(--ease);
}
.services .svc:hover,
.services .svc.is-active {
  padding-left: clamp(0px, 1vw, 16px);
  border-color: rgba(23,19,16,.32);
}
.services .svc:hover::before,
.services .svc.is-active::before {
  opacity: 1;
  transform: scaleY(1);
}
.services .svc__no {
  font-family: var(--brand);
  font-size: 13px;
  letter-spacing: .26em;
  color: #806234;
}
.services .svc__name {
  margin: 0;
  max-width: 14ch;
  font-family: var(--serif);
  font-size: clamp(34px, 5vw, 76px);
  font-weight: 300;
  line-height: .98;
  color: #171310;
}
.svc__desc {
  max-width: 48ch;
  margin-top: 20px;
  color: rgba(23,19,16,.68);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.65;
}
.services .svc__list {
  margin-top: clamp(24px, 4vh, 44px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px clamp(18px, 3vw, 42px);
  list-style: none;
}
.services .svc__list li {
  position: relative;
  padding-left: 22px;
  color: rgba(23,19,16,.78);
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.5;
}
.services .svc__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 8px;
  height: 1px;
  background: #806234;
}

/* Approach — 背景照片钉住慢移,前景墨板载文字滚过(sondaven 式层叠) */
.approach {
  position: relative;
  background: var(--ink);
  padding: 0;   /* 压住文件前部 legacy 块的 padding,防止段尾漏出黑带 */
}
/* 尾部占位(必须是内容而非 padding——sticky 进不了父级 padding 区):
   照片在这里重新露出,浅米 Process 滑过照片再叠一层 */
.approach__tail { height: 56vh; }
.approach__visual {
  position: sticky;
  top: 0;
  height: 100vh; height: 100dvh;
  overflow: hidden;
  z-index: 0;
}
.approach__visual img {
  width: 100%;
  height: 116%;
  object-fit: cover;
  object-position: 50% 84%;   /* 甲方:从下往上用,但顶部多露一点天空 */
  filter: saturate(.9) contrast(1.1) brightness(.9);   /* 甲方:提亮+增清晰(少压暗、少雾感,露出更多照片) */
  will-change: translate;
}
.approach__veil {
  position: absolute;
  inset: 0;
  /* 去掉墨板后,veil 兼当文字底衬:左侧(文字区)压深、右侧留亮透出照片;
     纵向中段也压深(内容会滚过整屏),配合 .approach__inner 的文字投影保证可读 */
  background:
    linear-gradient(90deg, rgba(8,12,22,.5) 0%, rgba(8,12,22,.26) 50%, rgba(8,12,22,.07) 82%, rgba(8,12,22,0) 100%),
    linear-gradient(180deg, rgba(6,10,20,.42) 0%, rgba(6,10,20,.16) 34%, rgba(6,10,20,.18) 66%, rgba(6,10,20,.46) 100%);
}
/* 前景墨板:锚左、叠上照片,右侧留出照片呼吸 */
.approach__inner {
  position: relative;
  z-index: 1;
  width: min(84%, 1320px);
  margin: -46vh auto 0 0;
  /* 甲方 v69:去掉黑色墨板,文字直接压在暮色城市照片上(靠 veil + 文字投影保证可读) */
  text-shadow: 0 2px 16px rgba(3,4,7,.72), 0 1px 4px rgba(3,4,7,.55);
  padding: clamp(64px, 10vh, 120px) clamp(30px, 5vw, 96px) clamp(70px, 11vh, 130px) var(--gutter);
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(500px, 1.1fr);
  gap: clamp(44px, 6vw, 110px);
}
.approach__halo {
  position: absolute;
  top: clamp(64px, 10vh, 120px);
  bottom: clamp(70px, 11vh, 130px);
  left: calc(var(--gutter) * 0.45);
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(230,196,140,.4), transparent);
}
/* 描边圆 CTA:骑在墨板右上角,一半压在照片上(玻璃质感 Z 深度) */
.approach__circle {
  position: absolute;
  top: clamp(-110px, -9vw, -70px);
  right: clamp(-110px, -9vw, -70px);
  z-index: 2;
  width: clamp(150px, 16vw, 220px);
  height: clamp(150px, 16vw, 220px);
  border-radius: 50%;
  border: 1px solid rgba(230,196,140,.62);
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--brand);
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  line-height: 1.8;
  color: var(--gold-hi);
  text-decoration: none;
  background: rgba(8,7,6,.32);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.approach__circle:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.approach__circle:focus-visible { outline: 1px solid var(--gold); outline-offset: 6px; }
@media (max-width: 960px) {
  .approach__tail { height: 20vh; }
  .approach__visual { height: 62vh; }
  .approach__inner { width: 100%; margin-top: -14vh; border-right: 0; }
  .approach__circle {
    position: static; margin-bottom: 26px; justify-self: start;
    width: 150px; height: 150px;
  }
}
.approach__head {
  position: sticky;
  top: clamp(88px, 16vh, 158px);
  align-self: start;
}
.approach .section-title {
  max-width: 10ch;
  font-size: clamp(46px, 6.4vw, 104px);
  line-height: .94;
}
.approach .steps {
  margin: 0;
  border-top: 1px solid rgba(239,231,219,.18);
}
/* 重排:序号在左窄栏,名称+描述在右栏上下堆叠,描述铺满不再挤成碎行 */
.approach .step {
  position: relative;
  display: grid;
  grid-template-columns: clamp(46px, 5.5vw, 92px) minmax(0, 1fr);
  column-gap: clamp(22px, 3vw, 54px);
  row-gap: clamp(12px, 1.6vh, 20px);
  align-items: start;
  padding: clamp(38px, 6.5vh, 82px) 0;
  border-bottom: 1px solid rgba(239,231,219,.16);
  transition: padding-left .38s var(--ease), background .38s var(--ease);
}
.approach .step:hover {
  padding-left: 12px;
}
.approach .step__no {
  grid-column: 1; grid-row: 1;
  align-self: start; margin-top: .55em;
  font-family: var(--brand);
  font-size: 12px;
  letter-spacing: .26em;
  color: var(--gold-hi);
}
.approach .step__name {
  grid-column: 2; grid-row: 1;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(34px, 5vw, 72px);
  line-height: .96;
  color: var(--cream);
}
.approach .step__desc {
  grid-column: 2; grid-row: 2;
  max-width: 54ch;
  margin: 0;
  color: rgba(239, 231, 219, .62);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.7;
}

.process {
  position: relative;
  overflow: hidden;
  min-height: 60vh;
  padding: clamp(108px, 18vh, 220px) var(--gutter);
  display: grid;
  place-items: center;
  background:
    /* 甲方:改回星空蓝;底色收到 #101d33,与下方山景过渡带顶部同色,消除接缝 */
    linear-gradient(180deg, #060b16 0%, #0b1526 55%, #101d33 100%);
  color: #dbe3f2;
  text-align: center;
}
.process::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* 甲方:星空——上半部散布星点,近地平线淡出(不压到下方山景) */
  background-image:
    radial-gradient(1.3px 1.3px at 12% 18%, rgba(255,255,255,.9), transparent),
    radial-gradient(1px 1px at 27% 30%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.4px 1.4px at 43% 12%, rgba(255,255,255,.8), transparent),
    radial-gradient(1px 1px at 60% 24%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.2px 1.2px at 76% 15%, rgba(255,255,255,.85), transparent),
    radial-gradient(1px 1px at 88% 32%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 34% 44%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.1px 1.1px at 68% 40%, rgba(255,255,255,.45), transparent);
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 80%);
          mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 80%);
}
.process__marquee {
  position: absolute;
  left: 0;
  right: 0;
  top: 8vh;
  display: flex;
  width: max-content;
  color: rgba(214,224,244,.06);
  font-family: var(--serif);
  font-size: clamp(90px, 15vw, 230px);
  font-weight: 300;
  line-height: 1;
  white-space: nowrap;
  animation: process-marquee 26s linear infinite;
}
@keyframes process-marquee {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(-50%,0,0); }
}
.process__inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  display: grid;
  place-items: center;
  gap: clamp(30px, 6vh, 72px);
}
.process .eyebrow { color: #cfa964; }
.process__title {
  max-width: 12ch;
  font-family: var(--serif);
  font-size: clamp(48px, 8vw, 124px);
  font-weight: 300;
  line-height: .94;
  color: #e7edf7;
}
.process .flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3vw, 48px);
  flex-wrap: wrap;
}
.process .flow__node {
  font-family: var(--serif);
  font-size: clamp(30px, 5.6vw, 88px);
  font-weight: 300;
  line-height: 1;
  color: rgba(214,224,244,.34);
  transition: color .4s var(--ease), transform .4s var(--ease);
}
.process .flow__node--last,
.process .flow:hover .flow__node {
  color: #eef2fb;
}
.process .flow__node:hover {
  transform: translateY(-4px);
}
.process .flow__arrow {
  width: clamp(28px, 5vw, 74px);
  height: 1px;
  background: rgba(200,214,240,.34);
}
.process .flow__arrow::after {
  border-color: rgba(200,214,240,.42);
}
.process__note {
  max-width: 58ch;
  color: rgba(210,220,240,.62);
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.7;
}

/* 收尾页(v82 重排):居中竖排;大 TITANIUM(Cinzel,同序曲)、Beyond 右下签名(同序曲)、两句同字号、联系方式缩小 */
.foot {
  position: relative;
  min-height: 100vh; min-height: 100dvh;
  overflow: hidden;
  background: linear-gradient(180deg, #e4ded1 0%, #f2ecdf 34%, #ede6d5 100%);
  color: #171310;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(72px, 12vh, 150px) var(--gutter);
}
.foot__wrap {
  width: 100%; max-width: 1180px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: clamp(26px, 4.5vh, 58px);
}
/* Contact:醒目一点(甲方) */
.foot__hello {
  font-family: var(--sans); font-size: clamp(23px, 2.6vw, 42px); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: #8a6a35;
}
.foot__lines { display: flex; flex-direction: column; gap: clamp(6px, 1.2vh, 14px); }
/* 两句同字体、同大小(甲方) */
.foot__line, .foot__line2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(23px, 2.6vw, 42px); letter-spacing: .04em; line-height: 1.22;
  color: rgba(23,19,16,.82); text-transform: none;
}
.foot__line em { font-style: italic; color: #8f6f42; }
/* 大 TITANIUM:同第一页字体(Cinzel)与量级 */
.foot__brand {
  font-family: "Cinzel", "Trajan Pro", "Times New Roman", serif; font-weight: 500;
  font-size: clamp(52px, 12vw, 168px); line-height: .96;
  letter-spacing: .1em; padding-left: .1em;
  color: #6f5730; text-decoration: none; white-space: nowrap;
  margin: clamp(4px, 1.4vh, 20px) 0;
}
.foot__brand:focus-visible { outline: 2px solid #8f6f42; outline-offset: 8px; }
/* 联系方式:同正文字体(Helvetica)、缩小、横排 */
.foot__contacts {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(12px, 1.8vw, 32px);
}
.foot__giant {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(17px, 2vw, 30px); letter-spacing: .02em; line-height: 1;
  color: #8f6f42; text-decoration: none; white-space: nowrap;
  border-bottom: 1px solid rgba(143,111,66,.5); padding-bottom: 3px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.foot__giant:hover { color: #171310; border-color: #171310; }
.foot__giant:focus-visible { outline: 2px solid #8f6f42; outline-offset: 6px; }
.foot__fine {
  font-family: var(--sans); font-size: 12px; letter-spacing: .06em; color: rgba(23,19,16,.5);
}
/* Beyond:右下签名,同第一页字体(Brittany)与量级 */
.foot__sig {
  position: absolute; right: clamp(18px, 6vw, 112px); bottom: clamp(16px, 5vh, 54px);
  font-family: var(--script); font-size: clamp(38px, 6vw, 88px); line-height: 1;
  color: #b8894a; padding: 0 .12em .08em;
  filter: drop-shadow(0 10px 34px rgba(184,137,74,.22));
}
.foot__sig em { font-style: normal; color: #171310; }
[data-converge] { will-change: translate; }
@media (prefers-reduced-motion: reduce) {
  [data-converge] { translate: none !important; }
}
@media (max-width: 780px) {
  .foot__contacts { flex-direction: column; gap: 12px; }
  .foot__sig { position: static; margin-top: 18px; }
  .foot__wrap { gap: clamp(20px, 3.5vh, 40px); }
}

@media (max-width: 960px) {
  .who,
  .services__showcase,
  .approach__inner {
    grid-template-columns: 1fr;
  }
  .who {
    min-height: auto;
    padding-top: 110px;
  }
  .who__copy,
  .services__stage,
  .approach__head {
    position: relative;
    top: auto;
  }
  .who__lede,
  .services .section-title,
  .approach .section-title,
  .process__title,
  .foot__title {
    max-width: 13ch;
  }
  .who__gallery {
    min-height: auto;
    display: grid;
    gap: 22px;
  }
  .who__frame--hero,
  .who__frame--city {
    position: relative;
    top: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    margin: 0;
  }
  .who__quote {
    width: 100%;
    margin: 0;
  }
  .approach .step {
    grid-template-columns: 58px 1fr;
  }
  .approach .step__desc {
    grid-column: 2;
  }
}

@media (max-width: 720px) {
  .who,
  .services,
  .approach,
  .process,
  .foot {
    padding-left: 22px;
    padding-right: 22px;
  }
  .services .svc {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .services .svc__list {
    grid-template-columns: 1fr;
  }
  .stage__image {
    aspect-ratio: 16 / 10;
  }
  .process .flow {
    flex-direction: column;
  }
  .process .flow__arrow {
    width: 1px;
    height: 34px;
  }
  .process .flow__arrow::after {
    top: auto;
    bottom: 0;
    right: -2.5px;
    transform: rotate(135deg);
  }
  .foot__base {
    justify-content: center;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-parallax] { translate: none !important; }
  .process__marquee { animation: none !important; transform: none !important; }
}

/* ============================================================
   MOTION LAYER — scroll choreography (sondaven-grade)
   ============================================================ */

/* --- 幕布式标题:每行从遮罩内升起 --- */
.mask-line { display: block; overflow: hidden; }
.mask-line > span {
  display: block;
  transform: translateY(112%);
  transition: transform 1.15s var(--ease-out);
}
[data-reveal].is-in .mask-line > span { transform: translateY(0); }
[data-reveal].is-in .mask-line:nth-child(2) > span { transition-delay: .12s; }
[data-reveal].is-in .mask-line:nth-child(3) > span { transition-delay: .24s; }

/* --- 图片揭幕:自下而上擦开 + 缓慢收缩 --- */
html.js .clip-reveal[data-reveal] {
  opacity: 1; transform: none;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.35s var(--ease-out);
}
html.js .clip-reveal[data-reveal].is-in { clip-path: inset(0 0 0 0); }
html.js .clip-reveal[data-reveal] img { transform: scale(1.18); transition: transform 1.8s var(--ease-out); }
html.js .clip-reveal[data-reveal].is-in img { transform: scale(1.06); }

/* --- Who:文字随滚动逐词点亮 --- */
.who__lede .w { color: rgba(239,231,219,.16); transition: color .5s var(--ease); }
.who__lede .w.is-lit { color: var(--cream); }
.who__lede em .w { font-style: italic; }
.who__lede em .w.is-lit { color: var(--gold-hi); }

/* --- Services:舞台图随激活项交叉切换 + 幽灵编号 --- */
.stage__image .stage__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.1);
  transition: opacity .9s var(--ease), transform 1.6s var(--ease-out);
}
.stage__image .stage__img.is-on { opacity: 1; transform: scale(1.03); }
.stage__no {
  position: absolute; right: 14px; bottom: 2px; z-index: 2;
  font-family: var(--brand); font-weight: 300;
  font-size: clamp(90px, 9vw, 150px); line-height: 1;
  color: rgba(255,255,255,.85);
  mix-blend-mode: overlay;
  transition: opacity .5s var(--ease);
}
.stage__no.is-swap { opacity: 0; }
/* 非激活项退后,激活项聚焦 */
.services .svc { opacity: .45; transition: opacity .5s var(--ease), transform 1.2s var(--ease-out), padding-left .42s var(--ease), border-color .42s var(--ease); }
.services .svc.is-active, .services .svc:hover { opacity: 1; }

/* --- Approach:金线点火时间轴 --- */
.approach__halo { overflow: visible; }
.approach__halo-fill {
  position: absolute; left: 0; top: 0; width: 1px; height: 100%;
  background: linear-gradient(180deg, rgba(230,196,140,.95), rgba(230,196,140,.5));
  box-shadow: 0 0 14px rgba(230,196,140,.55);
  transform: scaleY(0); transform-origin: top;
}
.approach .step { opacity: .38; transition: opacity .6s var(--ease), transform 1.2s var(--ease-out), padding-left .38s var(--ease); }
.approach .step.is-lit { opacity: 1; }
.approach .step__no { transition: color .5s var(--ease), text-shadow .5s var(--ease); }
.approach .step.is-lit .step__no { color: var(--gold-hi); text-shadow: 0 0 18px rgba(230,196,140,.45); }

/* --- Process:流程随滚动逐词点亮,连接线画出 --- */
.process .flow__node { color: rgba(214,224,244,.26); }
.process .flow__node.is-lit { color: #eef2fb; }
.process .flow__node--last.is-lit { color: #e2b46a; text-shadow: 0 0 22px rgba(226,180,106,.4); }
.process .flow__arrow { transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out); }
.process .flow__arrow.is-lit { transform: scaleX(1); }
.process .flow__arrow::after { opacity: 0; transition: opacity .3s var(--ease) .45s; }
.process .flow__arrow.is-lit::after { opacity: 1; }

/* --- Footer:幽灵水印 --- */
.foot__ghost {
  position: absolute; left: 50%; bottom: clamp(64px, 12vh, 130px); transform: translateX(-50%);
  z-index: 0; pointer-events: none;
  font-family: var(--brand); font-weight: 300;
  font-size: clamp(110px, 17vw, 300px); line-height: 1;
  letter-spacing: .22em; padding-left: .22em; white-space: nowrap;
  color: rgba(239,231,219,.045);
}

/* --- 磁性元素:JS 写 translate,这里只给回弹手感 --- */
[data-magnetic] { transition: translate .45s var(--ease-out); will-change: translate; }

/* --- reduced motion:全部编舞退化为静态可读 --- */
@media (prefers-reduced-motion: reduce) {
  .mask-line > span { transform: none !important; transition: none !important; }
  html.js .clip-reveal[data-reveal] { clip-path: none !important; }
  html.js .clip-reveal[data-reveal] img { transform: none !important; }
  .who__lede .w { color: var(--cream) !important; }
  .who__lede em .w { color: var(--gold-hi) !important; }
  .services .svc { opacity: 1 !important; }
  .approach .step { opacity: 1 !important; }
  .approach__halo-fill { transform: scaleY(1) !important; }
  .process .flow__node { color: #15110e !important; }
  .process .flow__arrow { transform: scaleX(1) !important; }
  [data-magnetic] { transition: none !important; }
}

/* --- Who 层叠章节:窄屏适配(压住上方旧 960 规则) --- */
@media (max-width: 960px) {
  .who { padding: clamp(110px, 16vh, 150px) var(--gutter) 0; }
  .who__lede { font-size: clamp(38px, 9vw, 64px); }
  .who__cut { width: 130vw; margin-top: 8vh; }
}

/* ============================================================
   CASE STUDIES — 手风琴图廊(悬停展开,余者收成竖排窄条)
   ============================================================ */
.cases {
  position: relative;
  background: var(--ink);
  padding: clamp(100px, 16vh, 190px) var(--gutter);
}
.cases__head { max-width: 1500px; margin: 0 auto; }
.cases__row {
  max-width: 1500px;
  margin: clamp(48px, 8vh, 96px) auto 0;
  display: flex;
  gap: clamp(10px, 1.2vw, 18px);
  height: min(64vh, 620px);
}
.case {
  position: relative;
  overflow: hidden;
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid rgba(239,231,219,.1);
  border-radius: 4px;
  padding: 0;
  background: #0b0d10;
  cursor: pointer;
  text-align: left;
  transition: flex-grow .85s var(--ease-out), border-color .5s var(--ease);
}
.case.is-open { flex-grow: 5.2; border-color: rgba(230,196,140,.34); }
.case:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
.case img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.5) brightness(.55);
  transform: scale(1.08);
  transition: filter .8s var(--ease), transform 1.3s var(--ease-out);
}
.case.is-open img { filter: none; transform: scale(1); }
.case__shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,7,6,.28) 0%, transparent 42%, rgba(8,7,6,.82) 100%);
}
.case__no {
  position: absolute; top: 18px; left: 20px;
  font-family: var(--brand); font-size: 12px; letter-spacing: .26em;
  color: var(--gold-hi);
  opacity: 0; transition: opacity .5s var(--ease) .2s;
}
.case.is-open .case__no { opacity: 1; }
/* 收起态:竖排标题(自下而上) */
.case__side {
  position: absolute; left: 50%; bottom: 24px;
  transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--brand); font-size: 12px; letter-spacing: .22em;
  text-transform: uppercase; white-space: nowrap;
  color: rgba(239,231,219,.78);
  transition: opacity .35s var(--ease);
}
.case.is-open .case__side { opacity: 0; }
/* 展开态:左下角标题 + 描述 */
.case__meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(20px, 2.4vw, 34px);
  opacity: 0; transform: translateY(14px);
  transition: opacity .55s var(--ease) .22s, transform .55s var(--ease-out) .22s;
}
.case.is-open .case__meta { opacity: 1; transform: none; }
.case__title {
  display: block;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(22px, 2.2vw, 34px); line-height: 1.08;
  color: var(--cream); white-space: nowrap;
}
.case__desc {
  display: block; margin-top: 8px;
  font-size: 14px; line-height: 1.6; letter-spacing: .02em;
  color: rgba(239,231,219,.66);
  max-width: 46ch; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
/* 窄屏:改纵向手风琴,收起条横排标题 */
@media (max-width: 820px) {
  .cases__row { flex-direction: column; height: min(150vw, 720px); }
  .case__side {
    writing-mode: horizontal-tb;
    left: 16px; bottom: 14px; transform: none;
  }
  .case__title { white-space: normal; }
  .case__desc { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .case, .case img, .case__meta, .case__side, .case__no { transition: none !important; }
}

/* ============================================================
   SELECTED WORK 页 — 多层视差山景 hero + 归档模板
   ============================================================ */
/* 山脉过渡(甲方:改回星空蓝):蓝天承接 Process,近地平线暖光,山作剪影,底部 fade 收进 Cases 墨色 */
.whero { position: relative; height: 42vh; height: 42dvh; background: radial-gradient(130% 62% at 50% 114%, rgba(230,171,104,.32) 0%, rgba(201,138,74,.11) 22%, rgba(20,26,46,0) 52%), linear-gradient(180deg, #101d33 0%, #16233c 55%, #223148 100%); }
.whero__visuals { position: absolute; inset: 0; overflow: hidden; }

/* 天空:站内暮色语言(深蓝→地平线暖光)+ 几颗星 */
.whero__sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 75% at 50% 108%, rgba(230,171,104,.5) 0%, rgba(201,138,74,.2) 26%, rgba(20,26,46,0) 56%),
    linear-gradient(180deg, #05070e 0%, #0a1020 36%, #16233c 70%, #2c3a54 100%);
}
.whero__sky::after {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image:
    radial-gradient(1px 1px at 22% 24%, rgba(255,255,255,.9), transparent),
    radial-gradient(1px 1px at 66% 15%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 82% 32%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.4px 1.4px at 38% 12%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 12% 42%, rgba(255,255,255,.5), transparent);
  background-repeat: no-repeat;
}

/* 片状山:平涂填色 + 细金勾边(极简线条风) */
.whero__ridge {
  position: absolute; left: 0; right: 0; bottom: -2px;
  width: 100%; will-change: transform;
}
.whero__ridge--back  { height: 84%; }
.whero__ridge--mid   { height: 74%; }
.whero__ridge--front { height: 66%; }
.whero__ridge--back .rfill  { fill: #1b2a44; }
.whero__ridge--mid .rfill   { fill: #111d34; }
.whero__ridge--front .rfill { fill: #080e1a; }
.whero__ridge .rline { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.whero__ridge--back .rline  { stroke: rgba(150,180,222,.20); }
.whero__ridge--mid .rline   { stroke: rgba(165,192,228,.28); }
.whero__ridge--front .rline { stroke: rgba(185,208,236,.42); }

/* 标题层(位于中山与前山之间,下沉时被前山吞没) */
.whero__titlewrap {
  position: absolute; left: 0; right: 0; top: 16%;
  text-align: center; will-change: transform; pointer-events: none;
}
.whero__eyebrow {
  font-family: var(--sans); font-size: 12px; font-weight: 300;
  letter-spacing: .34em; text-transform: uppercase; color: var(--gold);
}
.whero__title {
  margin-top: 14px;
  font-family: var(--brand); font-weight: 300;
  font-size: clamp(88px, 17vw, 260px); line-height: .96;
  letter-spacing: .18em; padding-left: .18em;
  color: transparent;
  background: linear-gradient(180deg, #fdf7ee 0%, #e6d4b6 46%, #b98f52 100%);
  -webkit-background-clip: text; background-clip: text;
}

/* 山脊上的线稿相机(与前山同速;沿用站内 .cf/.cl/.cd 线稿类) */
.whero__cam {
  position: absolute; left: 55%; bottom: 17.5%;
  width: clamp(90px, 10vw, 150px); height: auto;
  will-change: transform;
  filter: drop-shadow(0 0 14px rgba(199,154,91,.14));
}
.whero__cam .cf { fill: rgba(8,7,6,.9); stroke: rgba(230,196,140,.72); stroke-width: 2; vector-effect: non-scaling-stroke; }
.whero__cam .cl { fill: none; stroke: rgba(230,196,140,.72); stroke-width: 2; vector-effect: non-scaling-stroke; }
.whero__cam .cl--soft { stroke: rgba(230,196,140,.32); stroke-width: 1.5; }
.whero__cam .cd { fill: rgba(8,7,6,.9); stroke: rgba(230,196,140,.72); stroke-width: 2; vector-effect: non-scaling-stroke; }

.whero__fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 26%;
  background: linear-gradient(180deg, transparent, var(--ink) 88%);
  pointer-events: none; z-index: 2;
}

/* ---------- 归档网格(模板) ---------- */
.warchive {
  position: relative; background: var(--ink);
  padding: clamp(90px, 14vh, 170px) var(--gutter) clamp(110px, 18vh, 220px);
}
.warchive .section-head { max-width: 1500px; margin: 0 auto; }
.warchive__grid {
  max-width: 1500px;
  margin: clamp(48px, 8vh, 96px) auto 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(40px, 6vw, 110px) clamp(28px, 4vw, 70px);
}
.wcard { display: block; text-decoration: none; color: var(--cream); }
.wcard--offset { margin-top: clamp(50px, 9vh, 130px); }   /* 错落节奏 */
.wcard__media {
  overflow: hidden; aspect-ratio: 4 / 3;
  border: 1px solid rgba(239,231,219,.12); border-radius: 4px;
  background: #0b0d10;
}
.wcard__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.85);
  transition: transform 1.1s var(--ease-out), filter .6s var(--ease);
}
.wcard:hover .wcard__media img { transform: scale(1.05); filter: none; }
.wcard__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  margin-top: 16px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(239,231,219,.14);
  transition: border-color .4s var(--ease);
}
.wcard:hover .wcard__row { border-color: rgba(230,196,140,.5); }
.wcard__name { font-family: var(--serif); font-weight: 300; font-size: clamp(20px, 1.9vw, 30px); }
.wcard__meta { font-family: var(--brand); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.wcard:focus-visible { outline: 1px solid var(--gold); outline-offset: 6px; }

/* ---------- 简页脚 ---------- */
.wfoot {
  background: var(--ink);
  padding: clamp(40px, 7vh, 70px) var(--gutter) clamp(26px, 4vh, 44px);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  border-top: 1px solid rgba(239,231,219,.1);
}
.wfoot__back {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--brand); font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold-hi); text-decoration: none;
}
.wfoot__back i { width: 26px; height: 1px; background: currentColor; position: relative; }
.wfoot__back i::before {
  content: ""; position: absolute; left: 0; top: -3px;
  width: 7px; height: 7px; border-left: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
}
.wfoot__back:hover { color: var(--cream); }
.wfoot__back:focus-visible { outline: 1px solid var(--gold); outline-offset: 5px; }
.wfoot__fine { font-size: 11px; letter-spacing: .08em; color: var(--muted-2); }

@media (max-width: 820px) {
  .warchive__grid { grid-template-columns: 1fr; }
  .wcard--offset { margin-top: 0; }
  .whero__cam { left: 58%; }
}

/* ============================================================
   SERVICES 双栏反向滚动(sondaven ABOUT/CONCEPT 式)
   ============================================================ */
.services__cols {
  position: relative; z-index: 1;
  max-width: 1480px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 clamp(48px, 7vw, 140px);
  align-items: start;
}
.services__col {
  display: grid;
  gap: clamp(90px, 15vh, 190px);
  will-change: translate;
}
/* 右栏整体下错位,呼应参考里 ABOUT US / CONCEPT 的高低差 */
.services__col--b { margin-top: clamp(140px, 24vh, 320px); }
/* 双栏下收窄标题、去掉行式底线,改为卡组语言 */
.services__cols .svc {
  grid-template-columns: 1fr;
  min-height: 0;
  padding: 0;
  border-bottom: 0;
}
.services__cols .svc::before { display: none; }
.services__cols .svc:hover,
.services__cols .svc.is-active { padding-left: 0; }
.services__cols .svc__no {
  display: inline-block; margin-bottom: 14px;
  padding-bottom: 10px; border-bottom: 1px solid rgba(23,19,16,.4);
}
.services__cols .svc__name { font-size: clamp(30px, 3.6vw, 58px); max-width: 12ch; }
@media (max-width: 960px) {
  .services__cols { grid-template-columns: 1fr; gap: clamp(70px, 10vh, 120px); }
  .services__col--b { margin-top: 0; }
  .services__col { translate: none !important; gap: clamp(70px, 10vh, 120px); }
}



/* ============================================================
   PARTICLE THEME — 全站粒子主题层
   ============================================================ */

/* --- 星丛标记:栏目眉标前的五点小星座 --- */
.eyebrow::before,
.whero__eyebrow::before,
.foot__hello::before {
  content: ""; display: inline-block; vertical-align: -1px;
  width: 28px; height: 10px; margin-right: 12px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 10'%3E%3Ccircle cx='2.2' cy='7' r='1.4'/%3E%3Ccircle cx='9' cy='2.8' r='1.1'/%3E%3Ccircle cx='15' cy='7.6' r='1.4'/%3E%3Ccircle cx='21' cy='3.6' r='1'/%3E%3Ccircle cx='26' cy='6' r='1.25'/%3E%3C/svg%3E") 0 0 / 28px 10px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 10'%3E%3Ccircle cx='2.2' cy='7' r='1.4'/%3E%3Ccircle cx='9' cy='2.8' r='1.1'/%3E%3Ccircle cx='15' cy='7.6' r='1.4'/%3E%3Ccircle cx='21' cy='3.6' r='1'/%3E%3Ccircle cx='26' cy='6' r='1.25'/%3E%3C/svg%3E") 0 0 / 28px 10px no-repeat;
}

/* --- 粒子虚线:Approach 时间轴改为点串,点火为亮点串 --- */
.approach__halo {
  width: 3px;
  background: radial-gradient(circle, rgba(230,196,140,.3) 0 1.05px, transparent 1.25px) 50% 0 / 3px 10px repeat-y;
}
.approach__halo-fill {
  width: 3px; height: 0; transform: none;
  background: radial-gradient(circle, rgba(230,196,140,.95) 0 1.3px, transparent 1.5px) 50% 0 / 3px 10px repeat-y;
  box-shadow: 0 0 14px rgba(230,196,140,.5);
}

/* --- 粒子虚线:Process 连接箭头改为粒子轨迹 --- */
.process .flow__arrow {
  height: 3px;
  background: radial-gradient(circle, rgba(21,17,14,.26) 0 1.1px, transparent 1.3px) 0 50% / 9px 3px repeat-x;
}
.process .flow__arrow.is-lit {
  background: radial-gradient(circle, rgba(21,17,14,.6) 0 1.2px, transparent 1.4px) 0 50% / 9px 3px repeat-x;
}

/* --- 进度条头部粒子光点 --- */
.scrollbar span { position: relative; }
.scrollbar span::after {
  content: ""; position: absolute; right: -2px; top: -2px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold-hi);
  box-shadow: 0 0 10px rgba(230,196,140,.95);
}

/* --- CTA 粒子光环:悬停浮现;圆形 CTA 的环缓慢公转 --- */
.masthead__cta::after,
.approach__circle::after {
  content: ""; position: absolute; inset: -7px;
  border-radius: inherit;
  border: 1px dotted rgba(230,196,140,.6);
  opacity: 0; pointer-events: none;
  transition: opacity .45s var(--ease);
}
.masthead__cta { position: relative; }
.masthead__cta:hover::after,
.approach__circle:hover::after { opacity: 1; }
.approach__circle::after { animation: p-orbit 16s linear infinite; }
@keyframes p-orbit { to { transform: rotate(360deg); } }

/* --- 微尘场画布 & 火花画布 --- */
.dustfx {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
.sparkfx {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 2;
}
.whero__dust { position: absolute; inset: 0; z-index: 0; }
.cases__head, .cases__row { position: relative; z-index: 1; }
.who__fg { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .approach__halo-fill { height: 100% !important; }
  .approach__circle::after { animation: none; }
  .dustfx, .sparkfx { display: none; }
}

/* ============================================================
   细字体:全站纤细但不发丝(甲方反馈"过细"后整体上抬一档)。
   大展示标题 = ExtraLight(200);中号标题/正文 = Light(300)。
   放文件末尾压过前面所有 font-weight。
   ============================================================ */
/* 大展示标题 → 200(ExtraLight,原 100 太虚) */
.beyond__line,
.section-title,
.foot__giant,
.who__lede,
.whero__title,
html.who-merged .who__lede {
  font-weight: 200;
}
/* 中号标题/正文强调 → 300(Light,原 200 偏细) */
.svc__name,
.step__name,
.step__no,
.who__text,
.wcard__name,
html.who-merged .who__text {
  font-weight: 300;
}

/* ============================================================
   片状竖条山过渡(Process 浅米 → Cases 墨色)
   顶接 Process 底色 #e4ded1、底接下方 whero 夜空顶 #05070e(融合,消除黑边);竖条内透出暮色
   ============================================================ */
.ridgestrip {
  position: relative;
  width: 100%;
  height: clamp(260px, 42vh, 520px);
  /* 底 = 浅米(接 Process);深蓝犬牙由 canvas 填充,最底 15% 留 #05070e 融入 whero 夜空 */
  background: linear-gradient(180deg, #e4ded1 0%, #e4ded1 85%, #05070e 85%, #05070e 100%);
  overflow: hidden;
  line-height: 0;
}
/* 反向(上黑下浅米,如 Who 墨色 → Services 浅米):顶 15% 墨色接 Who,其余浅米接 Services。
   #f0ebe2 = Services 顶部真实渲染色(#e7dfd1 底 + ::before 38% 白叠加后的结果),消除接缝色差 */
.ridgestrip--flip {
  background: linear-gradient(180deg, #080706 0%, #080706 15%, #f0ebe2 15%, #f0ebe2 100%);
}
.ridgestrip__cv { display: block; width: 100%; height: 100%; }

/* ============================================================
   HERO LEGEND · 暮色天空里的电影标题卡「Stories we are ready to tell」
   放在 .whero__visuals 里、中山之后前山之前 → 前山(DOM 靠后)自然盖住它。
   [data-layer-speed] 容器的 transform 每帧被 work.js 覆写:
   ∴ 横向居中只能用 left/right/text-align,绝不能用 transform;
   入场淡入只加在子元素上,不碰容器 transform。字重 300(甲方要求不要太细)。
   ============================================================ */
.whero__legend {
  position: absolute;
  left: 0; right: 0;
  top: 30%;                 /* 暮色空域正中,稳在最高山峰之上 */
  z-index: 0;               /* 不设正值 → 前山靠 DOM 顺序盖住它,产生下沉吞没感 */
  text-align: center;
  pointer-events: none;
  padding-inline: 6vw;      /* 长句不顶到屏幕边缘 */
  will-change: transform;
}
.whero__legend-line {
  margin: 0;
  display: inline-block;
  max-width: 100%;
  font-family: var(--brand, "Jost", "Century Gothic", "Inter", sans-serif);
  font-weight: 300;
  font-size: clamp(1.5rem, 4.6vw, 3.75rem);
  line-height: 1.18;
  letter-spacing: .16em;    /* 电影开场式宽字距 */
  text-indent: .16em;       /* 抵消末字尾距 → 视觉居中 */
  white-space: nowrap;      /* 桌面单行,手机换行(见下方 media) */
  background: linear-gradient(180deg, #fffdf8 0%, #ecd9ba 46%, #c79a5b 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 1px 10px rgba(230,192,136,.15))
          drop-shadow(0 6px 26px rgba(5,7,14,.55));  /* 暖金微光 + 墨影托起,浮离暮色 */
}
.whero__legend-rule {
  display: block;
  width: clamp(34px, 8vw, 76px); height: 1px;
  margin: clamp(15px, 1.9vw, 24px) auto 0;
  background: linear-gradient(90deg, rgba(199,154,91,0) 0%, rgba(199,154,91,.85) 50%, rgba(199,154,91,0) 100%);
}
@keyframes wheroLegendIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.whero__legend-line,
.whero__legend-rule { animation: wheroLegendIn 1.8s cubic-bezier(.22,.61,.36,1) both; }
.whero__legend-rule { animation-delay: .35s; }
@media (max-width: 640px) {
  .whero__legend { top: 26%; padding-inline: 8vw; }
  .whero__legend-line {
    white-space: normal; letter-spacing: .13em; text-indent: 0;
    font-size: clamp(1.35rem, 7.2vw, 2.4rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  .whero__legend { will-change: auto; }
  .whero__legend-line,
  .whero__legend-rule { animation: none; }
}

/* ============================================================
   标签当大标题(甲方 v68):Services / Approach / Process 三段,
   小标签 eyebrow 放大成该段最大的主标题;原描述句缩小成副标题。
   Process 的描述句已删。Case Studies / Selected Work / Who 三段不动。
   ============================================================ */
.services .eyebrow,
.approach .eyebrow,
.process  .eyebrow {
  display: block;
  margin: 0;
  font-family: var(--brand);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: .92;
  text-wrap: balance;
}
/* 大标题不要眉标前的小星丛点 */
.services .eyebrow::before,
.approach .eyebrow::before,
.process  .eyebrow::before { content: none; }
/* 各段大标题字号(成为该段最大元素;Approach 受 sticky 左栏宽度限制,略小) */
.services .eyebrow { font-size: clamp(52px, 9.5vw, 148px); }
.process  .eyebrow { font-size: clamp(52px, 9.5vw, 148px); }
.approach .eyebrow { font-size: clamp(40px, 6vw, 96px); }

/* 原描述性标题 → 缩小成副标题(保留文案 + 斜体金字重点) */
.services .section-title,
.approach .section-title {
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .01em;
  max-width: 34ch;
  margin-top: clamp(16px, 2.4vh, 30px);
}