:root{
  --paper:#f3eee6; --paper-2:#ebe4d8; --ink:#1c1915; --muted:#6d645a; --line:#d6cdbf;
  --accent:#8c2b20; --accent-ink:#fff8f0;
  --serif:"Instrument Serif", "Times New Roman", serif;
  --sans:"DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.label{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:500}
.serif{font-family:var(--serif);font-weight:400}
em{font-family:var(--serif);font-style:italic}

/* nav */
header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s}
header.scrolled{border-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{text-decoration:none;display:flex;align-items:baseline;gap:10px}
.brand b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:30px;line-height:1}
.brand span{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.nav nav{display:flex;align-items:center;gap:30px;font-size:15px}
.nav nav a{text-decoration:none}
.nav nav a:not(.btn):hover{color:var(--accent)}
.nav nav a.lang{font-size:14px;padding:6px 12px;border:1px solid var(--line);border-radius:999px}

/* Chinese page */
html[lang^="zh"]{--serif:"Instrument Serif","Noto Serif SC","Songti SC",serif;--sans:"DM Sans","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif}
html[lang^="zh"] body{line-height:1.8}
html[lang^="zh"] em,html[lang^="zh"] .ticker i{font-style:normal}
html[lang^="zh"] .hero h1{font-weight:500;line-height:1.18;letter-spacing:.02em;font-size:clamp(44px,6vw,86px)}
html[lang^="zh"] .sec-head h2,html[lang^="zh"] .contact h2{font-weight:500;line-height:1.25;letter-spacing:.02em}
html[lang^="zh"] .sec-head h2{font-size:clamp(34px,4.2vw,56px)}
html[lang^="zh"] .contact h2{font-size:clamp(38px,5.6vw,76px)}
html[lang^="zh"] .card h3,html[lang^="zh"] .svc h3,html[lang^="zh"] .why h3{font-weight:500;letter-spacing:.02em}
html[lang^="zh"] .card h3{font-size:24px}
html[lang^="zh"] .svc h3{font-size:30px}
html[lang^="zh"] .why h3{font-size:26px}
html[lang^="zh"] summary{font-size:22px;font-weight:500}
html[lang^="zh"] .label,html[lang^="zh"] .card h3 small,html[lang^="zh"] .svc .len,html[lang^="zh"] .why .ix{letter-spacing:.08em}
html[lang^="zh"] .bonus p em{font-size:19px;font-weight:600}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:999px;background:var(--ink);color:var(--paper);text-decoration:none;font-size:15px;font-weight:500;border:1px solid var(--ink);transition:background .25s,color .25s,transform .25s}
.btn:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.small{padding:9px 18px;font-size:14px}

/* hero */
.hero{padding:72px 0 96px}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(52px,7.2vw,104px);line-height:.95;letter-spacing:-.01em}
.hero h1 em{color:var(--accent)}
.hero p.lead{margin:28px 0 36px;font-size:19px;color:#3d3731;max-width:30em}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px}
.hero .meta{margin-top:40px;display:flex;gap:28px;flex-wrap:wrap}
.hero .meta div{font-size:14px;color:var(--muted)}
.hero .meta strong{display:block;font-family:var(--serif);font-weight:400;font-size:30px;color:var(--ink);line-height:1.1}
.reels{position:relative;display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:14px;align-items:center}
.reel{position:relative;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:#222;box-shadow:0 30px 60px -30px rgba(40,25,10,.45)}
.reel video,.reel img{width:100%;height:100%;object-fit:cover}
.reel:nth-child(1){transform:translateY(36px)}
.reel:nth-child(3){transform:translateY(-36px)}
.reel figcaption{position:absolute;left:12px;bottom:10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6)}

/* ticker */
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;white-space:nowrap;padding:16px 0;background:var(--paper-2)}
.ticker div{display:inline-block;animation:scroll 40s linear infinite;font-family:var(--serif);font-size:24px}
.ticker span{margin:0 28px;color:var(--muted)}
.ticker i{font-style:italic;color:var(--ink)}
@keyframes scroll{to{transform:translateX(-50%)}}

section{padding:112px 0}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:56px;flex-wrap:wrap}
.sec-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5vw,68px);line-height:1;margin-top:14px}
.sec-head p{max-width:28em;color:var(--muted)}

/* work */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:start}
.card{cursor:pointer;background:none;border:0;text-align:left;font:inherit;color:inherit;padding:0}
.card .frame{position:relative;aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:#222}
.card .frame img,.card .frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease,opacity .4s}
.card .frame video{opacity:0}
.card.playing .frame video{opacity:1}
.card:hover .frame img,.card:hover .frame video{transform:scale(1.03)}
.card .play{position:absolute;right:12px;bottom:12px;width:44px;height:44px;border-radius:50%;background:rgba(243,238,230,.92);display:grid;place-items:center;transition:transform .3s}
.card:hover .play{transform:scale(1.08)}
.card .play svg{width:14px;height:14px;margin-left:2px;fill:var(--ink)}
.card .tag{position:absolute;left:12px;top:12px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(20,16,12,.45);backdrop-filter:blur(6px);padding:5px 9px;border-radius:999px}
.card h3{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.1;margin:18px 0 6px}
.card h3 small{display:block;font-family:var(--sans);font-size:12px;color:var(--accent);margin-top:6px;letter-spacing:.14em;text-transform:uppercase}
.card p{font-size:15px;color:var(--muted);line-height:1.55}
.note{margin-top:40px;font-size:14px;color:var(--muted);border-top:1px solid var(--line);padding-top:18px}

/* services */
.services{background:var(--ink);color:var(--paper)}
.services .label,.services .sec-head p{color:#a89d90}
.svc{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #3a342d}
.svc article{padding:36px 32px 40px 0;border-right:1px solid #3a342d}
.svc article+article{padding-left:32px}
.svc article:last-child{border-right:0}
.svc .num{font-family:var(--serif);font-style:italic;font-size:22px;color:#c98a6e}
.svc h3{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.1;margin:14px 0 6px}
.svc .len{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#a89d90;margin-bottom:16px}
.svc p{color:#d9d0c4;font-size:16px}
.svc ul{list-style:none;margin-top:20px;font-size:15px;color:#bfb4a7}
.svc li{padding:7px 0;border-top:1px solid #2e2924}
.svc article{display:flex;flex-direction:column}
.svc .price{margin-top:auto;padding-top:26px;font-family:var(--serif);font-size:30px;line-height:1.1;color:var(--paper)}
.svc .price.q{font-size:22px;color:#d9d0c4}
.svc .price small{font-family:var(--sans);font-size:13px;letter-spacing:.06em;color:#a89d90;margin-left:6px}
.offer{margin-top:44px;display:grid;grid-template-columns:auto 1fr;gap:10px 28px;align-items:baseline;padding:26px 30px;border-radius:14px;background:#2a1d18;border:1px solid #5a2e24}
.offer .tag{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#e0a48a;font-weight:600}
.offer p{color:#d9d0c4}
.offer p strong{color:var(--paper);font-family:var(--serif);font-weight:400;font-size:24px}
.offer .fine{grid-column:1/-1;font-size:13px;color:#a89d90;border-top:1px solid #3a342d;padding-top:12px;margin-top:6px}
.offer+.bonus{margin-top:18px}
.bonus{margin-top:44px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:26px 30px;border:1px solid #3a342d;border-radius:14px}
.bonus p{max-width:44em;color:#d9d0c4}
.bonus p em{color:var(--paper);font-size:20px}
.services .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.services .btn:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* approach */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.why h3{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.15;margin:16px 0 12px}
.why p{color:#4a433c}
.why .ix{font-size:12px;letter-spacing:.18em;color:var(--accent);font-weight:600}

/* process */
.process{background:var(--paper-2)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:s}
.step{padding:0 28px 0 0;position:relative}
.step::before{counter-increment:s;content:"0" counter(s);font-family:var(--serif);font-size:56px;line-height:1;color:var(--accent);display:block}
.step::after{content:"";position:absolute;top:28px;left:76px;right:20px;height:1px;background:var(--line)}
.step:last-child::after{display:none}
.step h3{font-size:18px;font-weight:600;margin:20px 0 8px}
.step p{font-size:15px;color:var(--muted)}

/* faq */
.faq{max-width:820px}
details{border-top:1px solid var(--line);padding:22px 0}
details:last-child{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;font-family:var(--serif);font-size:26px;display:flex;justify-content:space-between;gap:20px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--sans);font-weight:300;font-size:28px;line-height:1;color:var(--muted);transition:transform .3s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin-top:12px;color:#4a433c;max-width:40em}

/* contact */
.contact{text-align:center;padding:140px 0}
.contact h2{font-family:var(--serif);font-weight:400;font-size:clamp(46px,7vw,100px);line-height:.98;margin:18px auto 28px;max-width:12em}
.contact h2 em{color:var(--accent)}
.contact p{color:var(--muted);max-width:32em;margin:0 auto 36px}
.contact .ctas{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
.contact .mail{margin-top:22px;font-size:15px;color:var(--muted)}

footer{border-top:1px solid var(--line);padding:28px 0;font-size:14px;color:var(--muted)}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer a{text-decoration:none}
footer a:hover{color:var(--accent)}

/* lightbox */
dialog{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;margin:0}
dialog::backdrop{background:rgba(14,11,9,.96)}
.lb{width:100%;height:100%;display:grid;place-items:center;padding:56px 16px 24px}
.lb video{height:min(86vh,calc((100vw - 32px)*16/9));width:auto;aspect-ratio:9/16;border-radius:12px;background:#000}
.lb .x{position:fixed;top:16px;right:16px;width:44px;height:44px;border-radius:50%;border:1px solid #6b6259;background:rgba(20,16,12,.6);color:#f3eee6;font-size:22px;cursor:pointer}
.lb .cap{position:fixed;top:24px;left:20px;color:#d9d0c4;font-size:14px;letter-spacing:.06em}

/* reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease}
.rv.in{opacity:1;transform:none}

@media (max-width:980px){
  .hero .wrap{grid-template-columns:1fr;gap:48px}
  .grid{grid-template-columns:repeat(2,1fr)}
  .svc{grid-template-columns:1fr}
  .offer{grid-template-columns:1fr}
  .svc article,.svc article+article{padding:30px 0;border-right:0;border-bottom:1px solid #3a342d}
  .why{grid-template-columns:1fr;gap:36px}
  .steps{grid-template-columns:repeat(2,1fr);gap:40px 0}
  .step::after{display:none}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  .nav nav{gap:10px}
  .nav nav a:not(.btn):not(.lang){display:none}
  html[lang^="zh"] .hero h1{font-size:40px}
  html[lang^="zh"] .sec-head h2{font-size:32px}
  html[lang^="zh"] .contact h2{font-size:36px}
  .brand span{display:none}
  .hero{padding:32px 0 72px}
  .hero .wrap{gap:40px}
  .hero p.lead{font-size:17px;margin:20px 0 28px}
  .hero .meta{margin-top:28px;gap:0;display:grid;grid-template-columns:repeat(3,1fr)}
  .hero .meta div{font-size:12px;line-height:1.35;padding-right:8px}
  .hero .meta strong{font-size:21px;margin-bottom:2px}
  .reels{gap:8px}
  .reel:nth-child(1){transform:translateY(18px)}
  .reel:nth-child(3){transform:translateY(-18px)}
  .reel{border-radius:10px}
  .reel figcaption{display:none}
  section{padding:80px 0}
  .grid{gap:14px}
  .card h3{font-size:22px}
  .card p{font-size:14px}
  .steps{grid-template-columns:1fr}
  .contact{padding:100px 0}
  summary{font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  .ticker div{animation:none}
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}