:root {
  --paper: #f2f1ec;
  --paper-deep: #e8e6df;
  --ink: #161916;
  --pine: #19352d;
  --pine-soft: #24473c;
  --mist: #a4aaa4;
  --red: #a83d31;
  --line: rgba(22, 25, 22, 0.16);
  --serif: "Noto Serif SC", "Songti SC", SimSun, serif;
  --sans: "Space Grotesk", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
p, h1, h2, h3 { margin: 0; }

.grain {
  position: fixed;
  inset: 0;
  z-index: 20;
  opacity: .035;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
}

.section-shell { padding-left: clamp(28px, 7vw, 112px); padding-right: clamp(28px, 7vw, 112px); }

.site-header {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 110px;
  padding: 0 clamp(28px, 7vw, 112px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid rgba(22, 25, 22, .11);
}

.brand { display:flex; align-items:center; width:max-content; }
.brand img { display:block; width:clamp(150px, 13vw, 194px); height:auto; }

.nav { display: flex; gap: clamp(26px, 4vw, 64px); font-family: var(--serif); font-size: 13px; }
.nav a { position: relative; padding: 10px 0; }
.nav a::after {
  content: "";
  position: absolute;
  left: 50%; right: 50%; bottom: 2px;
  height: 1px; background: var(--ink);
  transition: .35s ease;
}
.nav a:hover::after { left: 0; right: 0; }
.header-contact { justify-self: end; font-size: 12px; letter-spacing: .08em; }
.header-contact span { margin-left: 8px; color: var(--red); }

.hero {
  position: relative;
  min-height: min(900px, 100vh);
  height: 100vh;
  padding-top: 110px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-copy { position: relative; z-index: 2; width: 100%; transform: translateY(-1vh); }
.eyebrow { font-size: 10px; letter-spacing: .32em; color: #656a65; }
.hero h1 {
  margin-top:24px;
  font-family:var(--serif);
  line-height:.96;
  font-weight:400;
  display:flex;
  align-items:baseline;
  gap:clamp(42px, 7vw, 112px);
}
.hero-word { display:flex; align-items:baseline; gap:clamp(7px, 1vw, 16px); white-space:nowrap; }
.hero-char { display:inline-block; }
.hero-char-main { font-size:clamp(92px, 14vw, 205px); color:var(--ink); letter-spacing:.02em; }
.hero-char-small { font-size:clamp(42px, 6vw, 88px); color:#a8ada8; letter-spacing:.06em; transform:translateY(-.08em); }
.hero-intro {
  margin-top: 58px;
  margin-left: 31%;
  font-family: var(--serif);
  font-size: clamp(16px, 1.45vw, 22px);
  line-height: 2;
  letter-spacing: .12em;
}
.hero-intro span { position: relative; }
.hero-intro span::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px;
  height: 1px; background: var(--red);
}
.hero-seal {
  position: absolute;
  z-index: 2;
  right: 12%;
  top: 23%;
  width: 70px;
  height: 70px;
  border: 1px solid var(--red);
  color: var(--red);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
  padding: 8px;
  transform: rotate(-4deg);
  font-family: var(--serif);
  font-size: 20px;
}
.hero-seal::before, .hero-seal::after { content:""; position:absolute; background:var(--red); opacity:.55; }
.hero-seal::before { width:1px; height:100%; left:50%; }
.hero-seal::after { height:1px; width:100%; top:50%; }
.hero-aside { position: absolute; right: clamp(28px, 7vw, 112px); bottom: 76px; z-index: 2; display:flex; align-items:flex-end; gap:48px; }
.vertical-note { writing-mode: vertical-rl; font-family: var(--serif); font-size: 11px; letter-spacing: .35em; color:#737873; }
.scroll-mark { display:flex; flex-direction:column; align-items:center; gap:13px; font-size:8px; letter-spacing:.25em; }
.scroll-mark i { display:block; width:1px; height:65px; background:linear-gradient(var(--ink) 40%, transparent 40%); background-size:100% 8px; animation: scrollLine 2s linear infinite; }
@keyframes scrollLine { to { background-position: 0 16px; } }
.mountain { position:absolute; left:0; right:0; bottom:-2px; color:#748079; height:43%; overflow:hidden; pointer-events:none; will-change:transform; }
.mountain-layer { position:absolute; left:-3%; bottom:0; width:106%; height:100%; display:block; transform-origin:50% 100%; will-change:transform; }
.mountain-back { animation:mountainDriftBack 15s ease-in-out infinite alternate; }
.mountain-front { animation:mountainDriftFront 11s ease-in-out infinite alternate-reverse; }
.water-glint { position:absolute; left:-18%; bottom:12%; width:136%; height:38%; opacity:.22; transform:skewX(-15deg); background:repeating-linear-gradient(0deg, transparent 0 12px, rgba(255,255,255,.7) 13px, transparent 14px 25px); mask-image:linear-gradient(90deg, transparent 2%, #000 25%, #000 75%, transparent 98%); animation:waterGlint 9s ease-in-out infinite alternate; }
@keyframes mountainDriftBack {
  0% { transform:translate3d(-1.2%, 2px, 0) scaleX(1.015); }
  50% { transform:translate3d(.8%, -5px, 0) scaleX(1.025); }
  100% { transform:translate3d(1.5%, 1px, 0) scaleX(1.01); }
}
@keyframes mountainDriftFront {
  0% { transform:translate3d(1.2%, 3px, 0) scaleX(1.02); }
  50% { transform:translate3d(-.7%, -3px, 0) scaleX(1.012); }
  100% { transform:translate3d(-1.5%, 2px, 0) scaleX(1.025); }
}
@keyframes waterGlint {
  0% { transform:translate3d(-2%, 2px, 0) skewX(-15deg); opacity:.1; }
  55% { opacity:.24; }
  100% { transform:translate3d(2%, -7px, 0) skewX(-15deg); opacity:.16; }
}

.manifesto { padding-top: 145px; padding-bottom: 150px; }
.section-index { display:flex; align-items:center; gap:17px; font-size:10px; letter-spacing:.22em; color:#747974; }
.section-index span:first-child { color:var(--red); }
.section-index::after { content:""; width:58px; height:1px; background:currentColor; opacity:.35; }
.manifesto-body { margin-top:85px; display:grid; grid-template-columns:minmax(0, 1.45fr) minmax(280px, .55fr); gap:10%; align-items:end; }
.lead { font-family:var(--serif); font-size:clamp(32px, 4vw, 62px); line-height:1.65; letter-spacing:.04em; }
.lead span { color:#8a908b; }
.manifesto-notes { max-width:400px; }
.manifesto-notes > p:first-child { font-family:var(--serif); font-size:14px; line-height:2.15; color:#555c57; }
.en-note { margin-top:45px; font-size:11px; line-height:1.8; letter-spacing:.17em; color:#9a9e9a; text-transform:uppercase; }

.principles { display:grid; grid-template-columns:repeat(3, 1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.principle { min-height:325px; padding:62px 5vw 60px 0; display:flex; gap:30px; border-right:1px solid var(--line); }
.principle + .principle { padding-left:5vw; }
.principle:last-child { border-right:0; padding-right:0; }
.principle-num { color:var(--red); font-family:var(--serif); font-size:13px; }
.principle h2 { margin-bottom:28px; font-family:var(--serif); font-size:26px; font-weight:500; letter-spacing:.15em; }
.principle p { font-family:var(--serif); font-size:13px; line-height:2; color:#6f746f; }

.services { padding-top:140px; padding-bottom:145px; color:#edf0eb; background:var(--pine); }
.section-index.light { color:#b2bdb8; }
.services-heading { margin-top:70px; display:grid; grid-template-columns:31% 1fr; }
.services-heading > p { padding-top:13px; font-size:9px; letter-spacing:.28em; color:#8ea097; }
.services-heading h2 { font-family:var(--serif); font-size:clamp(38px, 5vw, 72px); line-height:1.5; font-weight:400; letter-spacing:.08em; }
.service-list { margin-top:110px; border-top:1px solid rgba(255,255,255,.18); }
.service-row { min-height:130px; display:grid; grid-template-columns:10% 38% 1fr 40px; align-items:center; border-bottom:1px solid rgba(255,255,255,.18); transition:.4s ease; }
.service-row:hover { padding-left:18px; background:rgba(255,255,255,.035); }
.service-id { color:#8fa198; font-size:10px; }
.service-row h3 { font-family:var(--serif); font-size:25px; font-weight:400; letter-spacing:.12em; }
.service-row p { font-size:11px; letter-spacing:.12em; color:#9eaaa4; }
.service-arrow { font-size:20px; color:#a9b4af; transition:.3s ease; }
.service-row:hover .service-arrow { color:#fff; transform:translate(3px,-3px); }

.cases { padding-top:145px; padding-bottom:160px; }
.case-grid { margin-top:75px; display:grid; grid-template-columns:1.22fr .78fr; gap:36px; align-items:start; }
.case-card { cursor:pointer; }
.case-visual { position:relative; height:520px; overflow:hidden; transition:.6s cubic-bezier(.2,.7,.2,1); }
.case-card:hover .case-visual { transform:translateY(-6px); }
.case-a .case-visual { background:#d5d6d0; }
.case-b { margin-top:95px; }
.case-b .case-visual { height:425px; color:#e2e4df; background:#203f35; }
.case-glyph { position:absolute; inset:0; display:grid; place-items:center; font-family:var(--serif); font-size:clamp(110px, 16vw, 240px); color:rgba(25,53,45,.72); }
.case-b .case-glyph { color:rgba(237,240,235,.85); font-size:clamp(80px, 10vw, 150px); z-index:2; }
.case-line { position:absolute; width:130%; height:230px; bottom:-70px; left:-15%; border-radius:50%; border-top:1px solid rgba(25,53,45,.3); transform:rotate(-4deg); }
.case-visual small { position:absolute; left:26px; bottom:24px; font-size:8px; letter-spacing:.23em; color:#66716a; }
.case-b .case-visual small { color:#91a098; }
.orbit { position:absolute; inset:0; opacity:.35; }
.orbit i { position:absolute; left:50%; top:50%; border:1px solid #97aaa0; border-radius:50%; transform:translate(-50%,-50%) rotate(-18deg); }
.orbit i:nth-child(1) { width:78%; height:42%; }
.orbit i:nth-child(2) { width:60%; height:78%; transform:translate(-50%,-50%) rotate(32deg); }
.orbit i:nth-child(3) { width:88%; height:68%; transform:translate(-50%,-50%) rotate(74deg); }
.case-meta { padding-top:24px; display:flex; justify-content:space-between; border-top:1px solid var(--ink); }
.case-meta h3 { font-family:var(--serif); font-size:20px; font-weight:500; letter-spacing:.1em; }
.case-meta p, .case-meta > span { margin-top:9px; font-size:10px; letter-spacing:.08em; color:#7b807b; }

.contact { padding-top:120px; padding-bottom:130px; background:var(--paper-deep); }
.contact-top { display:flex; justify-content:space-between; align-items:start; }
.contact-seal { width:47px; height:47px; display:grid; place-items:center; border:1px solid var(--red); color:var(--red); font-family:var(--serif); font-size:18px; transform:rotate(5deg); }
.contact-layout { margin-top:75px; display:grid; grid-template-columns:minmax(0, 1fr) 260px; gap:clamp(60px, 10vw, 160px); align-items:end; }
.contact h2 { font-family:var(--serif); font-size:clamp(48px, 7.5vw, 108px); line-height:1.35; font-weight:400; letter-spacing:.06em; }
.contact h2 em { color:#8f948f; font-style:normal; }
.wechat-info { margin-top:72px; }
.wechat-label { margin-bottom:19px; font-family:var(--serif); font-size:13px; letter-spacing:.15em; color:#747a75; }
.wechat-id { width:min(100%, 650px); padding:0 0 17px; border:0; border-bottom:1px solid var(--ink); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:22px; color:inherit; background:transparent; font:inherit; text-align:left; cursor:pointer; }
.wechat-id span { font-size:10px; letter-spacing:.16em; color:#777c77; }
.wechat-id strong { font-size:clamp(19px, 2vw, 28px); font-weight:400; letter-spacing:.04em; }
.wechat-id small { font-size:9px; letter-spacing:.12em; color:#858a85; transition:.3s ease; }
.wechat-id:hover small { color:var(--red); transform:translateX(-4px); }
.wechat-id.copied small { color:var(--red); }
.qr-card { width:260px; margin:0; }
.qr-image-wrap { padding:16px; background:#f8f7f2; box-shadow:0 18px 45px rgba(24,31,27,.09); }
.qr-image-wrap img { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; }
.qr-card figcaption { padding-top:17px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--ink); }
.qr-card figcaption span { font-family:var(--serif); font-size:13px; letter-spacing:.12em; }
.qr-card figcaption small { font-size:8px; letter-spacing:.22em; color:#858a85; }

.site-footer { min-height:150px; display:grid; grid-template-columns:1fr auto auto; gap:7vw; align-items:center; font-size:9px; letter-spacing:.13em; color:#777c77; }
.footer-brand { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.footer-brand img { display:block; width:190px; height:auto; }
.footer-brand span { font-family:var(--serif); font-size:11px; letter-spacing:.12em; color:#777c77; }

.reveal { opacity:0; transform:translateY(22px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.65,.25,1); }
.reveal.delay-1 { transition-delay:.12s; }
.reveal.delay-2 { transition-delay:.24s; }
.reveal.delay-3 { transition-delay:.36s; }
.reveal.visible { opacity:1; transform:translateY(0); }

@media (max-width: 850px) {
  .site-header { grid-template-columns:1fr 1fr; height:86px; }
  .brand img { width:150px; }
  .nav { display:none; }
  .hero { padding-top:86px; min-height:760px; }
  .hero h1 { flex-direction:column; align-items:flex-start; gap:2px; }
  .hero h1 .hero-word:last-child { margin-left:20%; }
  .hero-char-main { font-size:clamp(92px, 25vw, 138px); }
  .hero-char-small { font-size:clamp(40px, 11vw, 62px); }
  .hero-intro { margin-left:0; margin-top:42px; font-size:15px; }
  .hero-seal { right:8%; top:27%; width:58px; height:58px; font-size:17px; }
  .hero-aside { right:28px; bottom:42px; }
  .vertical-note { display:none; }
  .mountain { height:32%; }
  .manifesto { padding-top:100px; padding-bottom:100px; }
  .manifesto-body { grid-template-columns:1fr; gap:55px; margin-top:55px; }
  .principles { grid-template-columns:1fr; }
  .principle, .principle + .principle { min-height:auto; padding:48px 0; border-right:0; border-bottom:1px solid var(--line); }
  .principle:last-child { border-bottom:0; }
  .services { padding-top:100px; padding-bottom:100px; }
  .services-heading { grid-template-columns:1fr; gap:30px; }
  .service-list { margin-top:70px; }
  .service-row { grid-template-columns:48px 1fr 30px; padding:30px 0; }
  .service-row p { grid-column:2; margin-top:12px; line-height:1.7; }
  .service-arrow { grid-column:3; grid-row:1 / span 2; }
  .case-grid { grid-template-columns:1fr; }
  .case-b { margin-top:25px; }
  .case-visual, .case-b .case-visual { height:420px; }
  .site-footer { padding-top:45px; padding-bottom:45px; grid-template-columns:1fr; gap:25px; }
}

@media (max-width: 480px) {
  .brand img { width:132px; }
  .header-contact { font-size:0; }
  .header-contact span { font-size:18px; }
  .hero { height:100svh; }
  .hero h1 { gap:6px; }
  .hero h1 .hero-word:last-child { margin-left:17%; }
  .hero-char-main { font-size:27vw; }
  .hero-char-small { font-size:12vw; }
  .hero-intro br { display:none; }
  .contact-layout { margin-top:55px; grid-template-columns:1fr; gap:65px; align-items:start; }
  .contact h2 { font-size:13vw; }
  .wechat-info { margin-top:50px; }
  .wechat-id { grid-template-columns:1fr auto; gap:8px 20px; }
  .wechat-id span { grid-column:1 / -1; }
  .qr-card { width:min(76vw, 280px); }
  .qr-card figcaption { padding-top:14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .mountain-layer, .water-glint { animation:none !important; }
}