@import url('https://fonts.googleapis.com/css2?family=DM+Mono&family=Noto+Serif+SC:wght@500;600;700&display=swap');

:root { --ink:#18211f; --paper:#f7f5ef; --paper-deep:#e9e6dc; --line:#c9c6bb; --muted:#68706c; --accent:#a64d39; --cream:#fffdf7; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Noto Serif SC",serif; }
.nav { position:absolute; z-index:2; inset:0 0 auto; display:flex; justify-content:space-between; padding:22px 5.5vw; font:10px "DM Mono",monospace; letter-spacing:.08em; }
.wordmark,.nav-contact { color:var(--ink); text-decoration:none; }.wordmark { font-size:15px; font-weight:bold; }.wordmark span { margin-left:6px; color:var(--muted); font-size:8px; }.nav-contact i { color:var(--accent); font-size:16px; font-style:normal; }
.hero { display:flex; flex-direction:column; justify-content:center; min-height:620px; padding:118px 5.5vw 48px; }.eyebrow,.case-number,.index-labels,footer { font:10px "DM Mono",monospace; letter-spacing:.08em; }.eyebrow { margin:0 0 16px; color:var(--muted); }
.hero h1,.section h2,.contact h2 { margin:0; font-size:clamp(44px,9vw,120px); line-height:1.08; letter-spacing:-.065em; }.hero em,.contact em { color:var(--accent); font-style:normal; }.intro { max-width:420px; margin:24px 0 28px; font-size:16px; line-height:1.75; }.hero-actions,.contact-actions { display:flex; flex-wrap:wrap; gap:10px; }.button { padding:14px 17px; font-size:13px; text-decoration:none; }.button span { margin-left:22px; font-size:16px; }.button-dark { background:var(--ink); color:#fff; }.button-light { border:1px solid var(--ink); color:var(--ink); }.service-line { margin:36px 0 0; color:var(--muted); font:10px "DM Mono",monospace; }
.section { padding:72px 5.5vw; }.section-heading { max-width:690px; }.section-heading h2 { margin-bottom:16px; font-size:clamp(38px,6.2vw,76px); }.section-heading > p:last-child { max-width:390px; margin:0; line-height:1.75; }.cases { background:var(--paper-deep); }.index-labels { display:flex; justify-content:space-between; padding:34px 0 10px; border-bottom:1px solid var(--line); color:var(--muted); }.case-entry { padding:16px 0 28px; border-bottom:1px solid var(--line); }.case-image { display:block; position:relative; aspect-ratio:4/5; overflow:hidden; background:#d6d3c9; }.case-image img { display:block; width:100%; height:100%; object-fit:cover; filter:saturate(.78); }.case-image span { position:absolute; right:12px; bottom:11px; padding:7px 9px; background:var(--cream); color:var(--ink); font:10px "DM Mono",monospace; letter-spacing:.06em; }.case-details { padding-top:15px; }.case-number { margin:0 0 8px; color:var(--accent); }.case-details h3 { margin:0 0 9px; font-size:22px; line-height:1.35; }.case-details > p:last-child { margin:0; color:var(--muted); font-size:14px; line-height:1.7; }
.commission-entry { padding:30px 0 0; }.commission-entry h3 { margin:0 0 14px; font-size:clamp(30px,5vw,52px); line-height:1.18; letter-spacing:-.05em; }.commission-entry > p:not(.eyebrow) { max-width:350px; margin:0 0 18px; font-size:14px; line-height:1.75; }.commission-entry a { color:var(--ink); font-size:14px; }
.services { background:var(--ink); color:var(--paper); }.services .eyebrow { color:#b4bbb4; }.service-groups { margin-top:38px; border-top:1px solid #56605b; }.service-group { padding:24px 0 25px; border-bottom:1px solid #56605b; }.service-group > span { color:#d7c5bb; font:10px "DM Mono",monospace; letter-spacing:.08em; }.service-group h3 { margin:11px 0; font-size:33px; }.service-group p { max-width:330px; color:#c6cec7; line-height:1.7; }.service-group ul { margin:19px 0 0; padding:0; font-size:14px; line-height:2; list-style:none; }.service-process { margin-top:43px; padding-top:23px; border-top:1px solid #56605b; }.service-process ol { margin:0; padding:0; list-style:none; }.service-process li { padding:10px 0; border-bottom:1px solid rgba(180,187,180,.3); font-size:14px; }.service-process li span { display:inline-block; width:32px; color:#d7c5bb; font:10px "DM Mono",monospace; }.service-process > p:last-child { margin:20px 0 0; color:#b4bbb4; font-size:13px; line-height:1.7; }
.pricing { background:#f0ede4; }
.pricing-heading { max-width:980px; }
.pricing-heading h2 { font-family:"Segoe UI","Microsoft YaHei",sans-serif; font-size:clamp(42px,6.4vw,88px); font-weight:650; line-height:1.02; }
.pricing-heading > p:last-child { max-width:520px; margin:20px 0 0; color:var(--muted); font-size:13px; line-height:1.8; }
.pricing-groups { margin-top:48px; border-top:1px solid var(--ink); }
.pricing-group { padding:22px 0 8px; border-bottom:1px solid var(--line); }
.pricing-group header { display:flex; align-items:baseline; gap:16px; padding-bottom:18px; }
.pricing-group header span { color:var(--accent); font:10px "DM Mono",monospace; letter-spacing:.08em; }
.pricing-group h3 { margin:0; font-size:26px; }
.pricing-group ul { margin:0; padding:0; list-style:none; }
.pricing-group li { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:15px 0; border-top:1px solid var(--line); font-size:14px; }
.pricing-group li span { color:#414946; }
.pricing-group li strong { flex:none; color:var(--accent); font:500 14px "DM Mono",monospace; letter-spacing:.04em; }
.pricing-note { display:grid; gap:8px; margin-top:32px; padding:18px 0 0; border-top:1px solid var(--ink); }
.pricing-note > span { color:var(--muted); font:9px "DM Mono",monospace; letter-spacing:.09em; }
.pricing-note p { margin:0; font-size:13px; line-height:1.7; }
.pricing-note a { width:max-content; color:var(--ink); font-size:13px; }
.contact { display:grid; gap:46px; padding:73px 5.5vw; background:#26312e; color:var(--cream); }
.contact .eyebrow { color:#bdc6be; }
.contact h2 { font-size:clamp(41px,8vw,94px); }
.contact-intro > p:last-child { max-width:440px; margin:24px 0 0; color:#d3dad5; line-height:1.8; }
.contact-board { padding:18px; border:1px solid #4c5954; background:#1c2724; }
.contact-hook { padding:2px 0 24px; }
.contact-hook small { display:block; margin:0 0 10px; color:#95a39c; font:9px "DM Mono",monospace; letter-spacing:.1em; }
.contact-hook p { margin:0; font-family:"Segoe UI","Microsoft YaHei",sans-serif; font-size:clamp(22px,4vw,36px); font-weight:680; line-height:1.15; letter-spacing:-.045em; }
.contact-hook span { display:block; margin-top:9px; color:#b8c3bd; font-size:12px; }
.contact-list { border-top:1px solid #4c5954; }
.contact-item { display:grid; grid-template-columns:30px minmax(0,1fr); gap:14px; align-items:center; width:100%; padding:17px 2px; border:0; border-bottom:1px solid #4c5954; background:transparent; color:var(--cream); font:inherit; text-align:left; text-decoration:none; cursor:default; }
a.contact-item,.contact .copy-contact { cursor:pointer; }
.contact-item svg { width:23px; height:23px; fill:none; stroke:#b9c5bd; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.contact-item span { min-width:0; }
.contact-item small { display:block; margin:0 0 5px; color:#98a69f; font:9px "DM Mono",monospace; letter-spacing:.08em; }
.contact-item strong { display:block; font-size:14px; font-weight:500; line-height:1.6; overflow-wrap:anywhere; }
.wechat-qr { max-width:210px; margin:24px 0 0; }
.wechat-qr img { display:block; width:100%; padding:8px; background:#fff; }
.wechat-qr figcaption { margin-top:9px; color:#aebbb4; font-size:11px; line-height:1.6; }
.contact-socials { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:24px; padding-top:16px; border-top:1px solid #4c5954; color:#94a29b; font:9px "DM Mono",monospace; letter-spacing:.05em; }
.contact-socials b { margin-left:5px; color:#e4e8e5; font-weight:400; }
.button-cream { background:var(--cream); color:var(--ink); }
footer { display:flex; justify-content:space-between; padding:18px 5.5vw; background:var(--ink); color:#aeb7b0; }footer a { color:#fff; text-decoration:none; }
@media (min-width:760px) { .nav,.hero,.section,.contact { padding-left:9vw; padding-right:9vw; }.hero { min-height:680px; }.case-entry { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr); gap:27px; padding:18px 0 42px; }.case-image { aspect-ratio:16/9; }.case-details { padding-top:0; }.commission-entry { display:grid; grid-template-columns:1.35fr .65fr; column-gap:27px; align-items:end; }.commission-entry .eyebrow { grid-column:1/-1; }.commission-entry > p:not(.eyebrow) { margin-bottom:0; }.service-groups { display:grid; grid-template-columns:1fr 1fr; gap:8vw; }.service-group { min-height:340px; }.service-process ol { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.service-process li { border-bottom:0; }.contact { grid-template-columns:minmax(0,.9fr) minmax(430px,1.1fr); gap:8vw; align-items:start; padding-top:100px; padding-bottom:92px; }.contact-board { display:grid; grid-template-columns:minmax(0,1fr) 190px; gap:0 28px; padding:26px; }.contact-hook,.contact-socials { grid-column:1/-1; }.wechat-qr { margin-top:0; } }

.wordmark { display:flex; align-items:center; gap:9px; }
.wordmark .brand-symbol { display:block; width:28px; height:28px; margin:0; background:currentColor; -webkit-mask:url('assets/brand/yunhe-logo.png') center/contain no-repeat; mask:url('assets/brand/yunhe-logo.png') center/contain no-repeat; }
.wordmark .brand-name { margin:0; color:inherit; font-size:9px; letter-spacing:.05em; }
.case-image img { filter:none; }

/* Animated home: restrained scroll choreography, no external motion library. */
.animated-home { overflow-x:clip; }
.scroll-progress { position:fixed; z-index:20; top:0; left:0; width:100%; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; pointer-events:none; }
.animated-home .glass-nav { position:fixed; z-index:15; transition:background-color .35s ease,border-color .35s ease; }
.animated-home .glass-nav.is-scrolled { background:rgba(247,245,239,.78); border-bottom:1px solid rgba(24,33,31,.08); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
.animated-home .hero { display:grid; align-items:center; gap:42px; min-height:100svh; padding-top:104px; padding-bottom:52px; }
.animated-home .hero h1,.story-copy h2 { font-family:"Segoe UI","Microsoft YaHei",sans-serif; font-weight:650; }
.hero-reveal { opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1); }
.is-ready .hero-reveal { opacity:1; transform:translateY(0); }
.is-ready .hero-reveal:nth-child(2) { transition-delay:.08s; }.is-ready .hero-reveal:nth-child(3) { transition-delay:.16s; }.is-ready .hero-reveal:nth-child(4) { transition-delay:.24s; }.is-ready .hero-reveal:nth-child(5) { transition-delay:.3s; }
.hero-product { position:relative; width:min(100%,560px); margin:0 auto; overflow:hidden; border-radius:24px; background:#dedbd2; box-shadow:0 24px 70px rgba(24,33,31,.12); }
.hero-product img { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; }
.hero-product figcaption { display:flex; justify-content:space-between; padding:10px 2px 0; color:var(--muted); font:9px "DM Mono",monospace; letter-spacing:.07em; }
.hero-product::after { bottom:34px; }
.hero-scene-visual { box-shadow:none; background:transparent; overflow:visible; }
.hero-scene-stage { position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:24px; background:#39483a; }
.hero-scene-stage::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(4,18,24,.08) 32%,rgba(12,20,15,.62) 100%); }
.hero-scene-stage img { height:100%; filter:saturate(.86) contrast(.94); transform:scale(1.045); animation:hero-scene-drift 13s cubic-bezier(.45,0,.25,1) infinite alternate; will-change:transform; }
.hero-scene-stage p { position:absolute; z-index:2; right:22px; bottom:20px; left:22px; margin:0; color:#fffdf7; }
.hero-scene-stage p span { position:absolute; bottom:1px; left:0; font:9px "DM Mono",monospace; letter-spacing:.1em; }
.hero-scene-stage p strong { display:block; width:max-content; margin-left:auto; font-family:"Segoe UI","Microsoft YaHei",sans-serif; font-size:clamp(22px,3vw,34px); line-height:1.08; letter-spacing:-.05em; text-align:right; white-space:nowrap; }
.studio-intro { position:relative; display:grid; gap:36px; overflow:hidden; background:#dedfd5; }
.intro-index { position:absolute; top:52px; right:5.5vw; pointer-events:none; }
.intro-brand-watermark { width:clamp(190px,38vw,520px); aspect-ratio:1; background:rgba(24,33,31,.052); filter:blur(2.8px); opacity:.74; transform-origin:58% 54%; animation:brand-watermark-drift 12s cubic-bezier(.45,0,.25,1) infinite alternate; will-change:transform,filter,opacity; -webkit-mask:url('assets/brand/yunhe-logo.png') center/contain no-repeat; mask:url('assets/brand/yunhe-logo.png') center/contain no-repeat; }
.studio-intro-heading,.studio-intro-copy { position:relative; z-index:1; }
.studio-intro-heading h2 { max-width:720px; font-family:"Segoe UI","Microsoft YaHei",sans-serif; font-size:clamp(43px,8vw,96px); font-weight:650; line-height:1.03; }
.studio-intro-copy { max-width:520px; padding-top:8px; border-top:1px solid rgba(24,33,31,.3); }
.studio-intro-copy p { margin:20px 0 0; line-height:1.85; }
.studio-intro-copy .intro-lead { margin-top:18px; font-family:"Segoe UI","Microsoft YaHei",sans-serif; font-size:clamp(24px,5vw,42px); font-weight:620; line-height:1.22; letter-spacing:-.04em; }
.direct-pitch { position:relative; min-height:78svh; padding:82px 5.5vw 70px; overflow:hidden; background:#d7f53b; color:#12211d; border-top:1px solid rgba(18,33,29,.42); border-bottom:8px solid #12211d; }
.direct-pitch::before { content:""; position:absolute; inset:0; opacity:.16; background:repeating-linear-gradient(-11deg,transparent 0 38px,#12211d 39px 40px); pointer-events:none; }
.pitch-no { position:absolute; right:-18px; bottom:-58px; color:rgba(255,253,247,.45); font:800 clamp(190px,55vw,720px)/.75 "Segoe UI",sans-serif; letter-spacing:-.12em; pointer-events:none; }
.pitch-sticker { position:absolute; z-index:2; top:26px; right:5vw; display:grid; place-items:center; width:88px; aspect-ratio:1; border:2px solid #12211d; border-radius:50%; background:#ff6a3d; font:700 12px/1.35 "Segoe UI","Microsoft YaHei",sans-serif; text-align:center; transform:rotate(9deg); }
.pitch-content { position:relative; z-index:1; max-width:1120px; }
.pitch-kicker { margin:0 0 24px; font:700 10px "DM Mono",monospace; letter-spacing:.12em; }
.direct-pitch h2 { max-width:980px; margin:0; font-family:"Segoe UI","Microsoft YaHei",sans-serif; font-size:clamp(48px,10vw,132px); font-weight:850; line-height:.93; letter-spacing:-.075em; }
.direct-pitch h2 em { color:#df3e24; font-style:normal; text-shadow:2px 2px 0 #fffdf7; }
.pitch-line { max-width:720px; margin:34px 0 0; font-family:"Segoe UI","Microsoft YaHei",sans-serif; font-size:clamp(25px,5vw,58px); font-weight:750; line-height:1.1; letter-spacing:-.05em; }
.pitch-bottom { display:grid; gap:20px; max-width:720px; margin-top:48px; padding-top:20px; border-top:2px solid #12211d; }
.pitch-bottom p { max-width:430px; margin:0; font-size:14px; line-height:1.75; }
.pitch-bottom a { width:max-content; padding:15px 18px; background:#12211d; color:#fffdf7; font-size:14px; text-decoration:none; box-shadow:6px 6px 0 #ff6a3d; }
.pitch-bottom a span { margin-left:30px; }
[data-watermark] { position:relative; }
[data-watermark]::after { content:""; position:absolute; z-index:5; right:2.5%; bottom:4%; width:11%; aspect-ratio:1; background:rgba(24,30,28,.14); -webkit-mask:url('assets/brand/yunhe-logo.png') center/contain no-repeat; mask:url('assets/brand/yunhe-logo.png') center/contain no-repeat; pointer-events:none; }
[data-watermark].watermark-light::after { background:rgba(255,253,247,.18); }
.is-product-case::after { bottom:3%; }
.scroll-story { position:relative; height:245svh; background:#090b0b; color:#f7f5ef; }
.story-sticky { position:sticky; top:0; display:grid; align-items:end; min-height:100svh; padding:86px 5.5vw 48px; overflow:hidden; }
.story-copy { position:relative; z-index:4; max-width:620px; padding-top:42vh; background:linear-gradient(transparent,rgba(9,11,11,.7) 38%,#090b0b 78%); }
.story-copy .eyebrow { color:#aab0ad; }.story-copy h2 { margin:0; font-size:clamp(42px,10vw,100px); line-height:1.02; letter-spacing:-.07em; }.story-copy > p:last-child { max-width:410px; margin:22px 0 0; color:#bdc3bf; line-height:1.8; }
.story-frames { position:absolute; inset:0; }
.story-frame { position:absolute; inset:0; margin:0; opacity:0; will-change:opacity,transform; }
.story-frame:first-child { opacity:1; }
.story-frame img { display:block; width:100%; height:100%; object-fit:cover; }
.story-frame::before { content:""; position:absolute; z-index:2; inset:0; background:linear-gradient(to bottom,rgba(0,0,0,.08),rgba(0,0,0,.08) 48%,rgba(0,0,0,.9)); }
.story-frame figcaption { position:absolute; z-index:4; top:82px; right:5.5vw; color:#fff; font:10px "DM Mono",monospace; letter-spacing:.08em; }
[data-reveal] { opacity:0; transform:translateY(38px); transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .85s cubic-bezier(.22,1,.36,1); }
[data-reveal].is-visible { opacity:1; transform:translateY(0); }
.animated-home .case-image img { transition:transform .9s cubic-bezier(.22,1,.36,1); }
.animated-home .case-image:hover img { transform:scale(1.025); }
.animated-home .button { transition:transform .25s ease,background-color .25s ease,color .25s ease; }
.animated-home .button:hover { transform:translateY(-2px); }

@keyframes hero-scene-drift {
  0% { transform:scale(1.045) translate3d(-.8%,0,0); }
  55% { transform:scale(1.085) translate3d(.5%,-.8%,0); }
  100% { transform:scale(1.12) translate3d(1.1%,-1.4%,0); }
}

@keyframes brand-watermark-drift {
  0% { transform:translate3d(-1.5%,1%,0) scale(.98) rotate(-.6deg); filter:blur(2.4px); opacity:.62; }
  52% { transform:translate3d(.8%,-.8%,0) scale(1.025) rotate(.25deg); filter:blur(3.4px); opacity:.76; }
  100% { transform:translate3d(2%,-1.5%,0) scale(1.055) rotate(.7deg); filter:blur(4px); opacity:.66; }
}

@media (min-width:760px) {
  .animated-home .hero { grid-template-columns:minmax(0,1fr) minmax(360px,.72fr); gap:7vw; padding-top:118px; }
  .hero-product { justify-self:end; }
  .pricing-groups { display:grid; grid-template-columns:1fr 1fr; gap:7vw; }
  .pricing-group { border-bottom:0; }
  .pricing-note { grid-template-columns:auto 1fr auto; align-items:center; gap:28px; }
  .studio-intro { grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr); gap:8vw; align-items:end; padding-top:116px; padding-bottom:116px; }
  .intro-index { top:96px; right:9vw; }
  .pitch-sticker { top:58px; right:8vw; width:112px; }
  .direct-pitch { display:flex; align-items:center; min-height:90svh; padding:110px 9vw 96px; }
  .pitch-bottom { grid-template-columns:1fr auto; align-items:end; }
  .story-sticky { align-items:center; padding-left:9vw; padding-right:9vw; }
  .story-copy { width:48%; padding-top:0; background:none; text-shadow:0 2px 24px rgba(0,0,0,.35); }
  .story-frames { left:48%; }
  .story-frame::before { background:linear-gradient(to right,#090b0b 0,rgba(9,11,11,.7) 12%,transparent 42%); }
  .story-frame figcaption { top:auto; right:4vw; bottom:38px; }
}

@media (max-width:759px) {
  .hero-scene-stage p { right:16px; bottom:15px; left:16px; }
  .hero-scene-stage p span { max-width:64px; }
  .studio-intro { padding-top:88px; padding-bottom:82px; }
  .direct-pitch { padding-top:104px; }
  .pitch-sticker { width:76px; font-size:10px; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .hero-scene-stage img { animation:none; transform:scale(1.045); }
  .intro-brand-watermark { animation:none; filter:blur(3px); opacity:.68; transform:none; }
  .hero-reveal,[data-reveal] { opacity:1; transform:none; transition:none; }
  .scroll-story { height:auto; }
  .story-sticky { position:relative; min-height:auto; padding-top:72px; }
  .story-frames { position:relative; height:68svh; margin:30px -5.5vw -48px; }
  .story-frame { display:none; transform:none!important; }.story-frame:first-child { display:block; opacity:1!important; }
  .scroll-progress { display:none; }
}