@font-face{font-family:"Italiana";src:url("assets/fonts/Italiana-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Satoshi";src:url("assets/fonts/Satoshi-Light.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Satoshi";src:url("assets/fonts/Satoshi-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Satoshi";src:url("assets/fonts/Satoshi-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Satoshi";src:url("assets/fonts/Satoshi-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
:root{--bg:#F4F0EA;--ivory:#EFE7DA;--bronze:#1E1915;--gold:#A69F95;--ink:#1E1915;--mute:#6D6760;--line:#D6CEC2;--serif:"Italiana","Noto Serif SC",Georgia,serif;--sans:"Satoshi","Noto Sans SC","Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:300 17px/1.75 var(--sans);letter-spacing:.01em;-webkit-font-smoothing:antialiased}
img{display:block;width:100%;height:100%;object-fit:cover}
[data-zh]{display:none}body.zh [data-zh]{display:inline}body.zh [data-en]{display:none}
a{color:inherit;text-decoration:none}
/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:22px 6vw;transition:.4s}
.nav.solid{background:rgba(244,240,234,.94);backdrop-filter:blur(10px);padding:12px 6vw;border-bottom:1px solid var(--line)}
.logo img{height:54px;width:auto;transition:.4s}
.logo{display:block}.logo .l-ink{display:none}.nav.solid .logo .l-light,.nav.open .logo .l-light{display:none}.nav.solid .logo .l-ink,.nav.open .logo .l-ink{display:block}
.nav.solid .logo img{height:50px}
.nav nav{display:flex;gap:34px;align-items:center}
.nav nav a{font-size:12px;letter-spacing:.22em;text-transform:uppercase;position:relative;color:#F4F0EA;transition:color .3s}
.nav.solid nav a{color:var(--ink)}
.nav nav a:after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--gold);transition:.35s}
.nav nav a:hover:after{width:100%}
#lang{font:400 12px var(--sans);letter-spacing:.15em;background:none;border:1px solid rgba(244,240,234,.6);color:#F4F0EA;padding:7px 14px;cursor:pointer;transition:.3s}
.nav.solid #lang{border-color:var(--bronze);color:var(--bronze)}
#lang:hover{background:var(--bronze);color:#F4F0EA;border-color:var(--bronze)}
#menu{display:none}
/* type */
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.12;letter-spacing:-.005em}
h1{font-size:clamp(44px,6.4vw,92px)}
h2{font-size:clamp(34px,4vw,56px);margin:.2em 0 .7em}
h3{font-size:26px;font-weight:400;margin-bottom:.4em}
.eyebrow{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--bronze);display:flex;align-items:center;gap:14px}
.eyebrow:before{content:"";width:40px;height:1px;background:currentColor}
.center{text-align:center;justify-content:center}
.eyebrow.center:after{content:"";width:40px;height:1px;background:currentColor}
.muted{color:var(--mute)}
p+p{margin-top:1em}
.btn{display:inline-block;font:400 12px var(--sans);letter-spacing:.24em;text-transform:uppercase;padding:17px 34px;border:1px solid var(--bronze);background:var(--bronze);color:#F4F0EA;cursor:pointer;transition:.35s}
.btn:hover{background:transparent;color:var(--bronze)}
.link{color:var(--bronze);border-bottom:1px solid var(--line);padding-bottom:2px;transition:.3s}
.link:hover{border-color:var(--bronze)}
/* sections */
section{padding:140px 8vw;position:relative}
.band{background:var(--ivory)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center}
/* hero */
.hero{min-height:100vh;padding:0 8vw;display:flex;align-items:flex-end;padding-bottom:16vh;color:#F4F0EA;overflow:hidden}
.hero-img{position:absolute;inset:0;z-index:-1}
.hero-img img{position:absolute;inset:0;animation:kb 18s ease-out forwards;transform:scale(1.08)}
.hero-img .h2{opacity:0;animation:kb 18s ease-out forwards,xf 16s 6s ease-in-out infinite}
@keyframes xf{0%,100%{opacity:0}40%,85%{opacity:1}}
.hero-cap{position:absolute;right:6vw;bottom:36px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(244,240,234,.75)}
@keyframes kb{to{transform:scale(1)}}
.hero-img:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(30,25,21,.72) 0%,rgba(30,25,21,.35) 55%,rgba(30,25,21,.1)),linear-gradient(0deg,rgba(30,25,21,.4),transparent 40%)}
.hero{isolation:isolate}
.hero-text{max-width:760px;animation:up 1.4s .2s both}
.hero .eyebrow{color:#E5DED2}
.hero h1{margin:.35em 0 .45em}
.hero .lead{font-size:19px;max-width:560px;color:rgba(244,240,234,.88);margin-bottom:2.4em}
.hero .btn{background:transparent;border-color:rgba(244,240,234,.7)}
.hero .btn:hover{background:var(--bg);color:var(--bronze);border-color:var(--bg)}
.scroll{position:absolute;left:50%;bottom:36px;width:1px;height:60px;background:linear-gradient(rgba(244,240,234,.8),transparent)}
@keyframes up{from{opacity:0;transform:translateY(30px)}}
/* about */
.img-stack{position:relative;height:640px}
.img-stack .a{position:absolute;left:0;top:0;width:78%;height:72%}
.img-stack .b{position:absolute;right:0;bottom:0;width:48%;height:56%;border:12px solid var(--bg)}
.img-stack:before{content:"";position:absolute;left:-24px;top:-24px;width:50%;height:50%;border:1px solid var(--line)}
/* services */
.grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:70px;border-top:1px solid var(--line)}
.card{padding:48px 40px 52px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);transition:background .4s}
.card:nth-child(3n){border-right:0}
.card:hover{background:var(--bg)}
.num{display:block;font:400 20px var(--serif);color:var(--gold);margin-bottom:28px}
.card p{color:var(--mute);font-size:15.5px}
/* gallery */
.gallery{padding:0;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:6px;height:560px}
.g{overflow:hidden}.g img{transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}.g:hover img{transform:scale(1.05)}
/* process */
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:80px;position:relative}
.steps:before{content:"";position:absolute;top:30px;left:10%;right:10%;height:1px;background:var(--line)}
.steps li{text-align:center;padding:0 18px}
.steps b{display:inline-grid;place-items:center;width:60px;height:60px;border:1px solid var(--bronze);border-radius:50%;background:var(--bg);font:400 20px var(--serif);color:var(--bronze);margin-bottom:26px;position:relative}
.steps h3{font-size:23px}.steps p{font-size:15px;color:var(--mute)}
/* shome */
.dark{background:#2A211B;color:#E5DED2}
.dark .eyebrow{color:#BBB4A9}.dark .link{color:#EFE7DA;border-color:rgba(239,231,218,.35)}
.dark h2{color:#EFE7DA}
.arch{height:640px;border-radius:320px 320px 0 0;overflow:hidden;outline:1px solid rgba(187,180,169,.45);outline-offset:14px;margin:14px}
/* brands */
.two{display:grid;grid-template-columns:1fr 1fr;max-width:900px;margin:70px auto 0;text-align:center}
.two>div{padding:20px 40px}.two>div+div{border-left:1px solid var(--line)}
.big{font:300 84px/1 var(--serif);color:var(--bronze);display:block;margin-bottom:18px}
.two p{color:var(--mute);letter-spacing:.04em}
.logos{margin:80px auto 0;max-width:1000px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:34px;text-align:center;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
/* contact */
.contact h2{margin-bottom:.2em}
.contact p a{font-size:19px}
form{display:grid;gap:26px;background:var(--bg);padding:56px;border:1px solid var(--line)}
label{display:grid;gap:6px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--bronze)}
input,textarea{font:300 17px var(--sans);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);padding:10px 0;outline:0;transition:border-color .3s;resize:vertical}
input:focus,textarea:focus{border-color:var(--bronze)}
form .btn{justify-self:start;margin-top:10px}
footer{display:flex;flex-direction:column;align-items:center;gap:10px;padding:70px 8vw;border-top:1px solid var(--line);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);text-align:center}
.flogo{width:auto;height:64px;margin-bottom:10px}
/* reveal */
.reveal{opacity:0;transform:translateY(36px);transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.grid .card:nth-child(3n+2){transition-delay:.12s}.grid .card:nth-child(3n){transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.hero-img img{animation:none}}
/* mobile */
@media (max-width:900px){
 body{font-size:16px}
 section{padding:90px 7vw}
 .split{grid-template-columns:1fr;gap:56px}
 #about .img-stack{order:-1}
 .img-stack{height:440px}
 .grid{grid-template-columns:1fr}.card{border-right:0;padding:36px 4px}
 .gallery{grid-template-columns:1fr 1fr;height:auto}.g1{grid-column:1/-1;height:280px}.g2,.g3{height:200px}
 .steps{grid-template-columns:1fr;gap:34px;text-align:left}.steps:before{left:30px;right:auto;top:0;bottom:0;width:1px;height:auto}
 .steps li{display:grid;grid-template-columns:60px 1fr;column-gap:22px;text-align:left;padding:0}.steps b{grid-row:span 2;margin:0}
 .arch{height:460px;border-radius:200px 200px 0 0}
 .two{grid-template-columns:1fr}.two>div+div{border-left:0;border-top:1px solid var(--line);padding-top:40px}
 .big{font-size:64px}
 form{padding:32px 24px}
 .hero{padding-bottom:14vh}
 .nav{padding:16px 6vw}
 #menu{display:grid;gap:7px;background:none;border:0;padding:8px;cursor:pointer;order:2}
 #menu i{display:block;width:26px;height:1px;background:#F4F0EA}.nav.solid #menu i,.nav.open #menu i{background:var(--ink)}
 .nav nav{gap:14px}
 .nav nav a{display:none}
 .nav.open{background:var(--bg)}
 .nav.open nav{position:fixed;inset:76px 0 auto;background:var(--bg);flex-direction:column;padding:30px 0 40px;border-bottom:1px solid var(--line)}
 .nav.open nav a{display:block;color:var(--ink)}
 .nav.open .logo img{filter:none}
 .nav.open #lang{border-color:var(--bronze);color:var(--bronze)}
 .logo img{height:44px}
}
/* SHOME gallery */
#shome{padding-bottom:90px}
.sgal{padding:0 8vw 130px}
.sgrid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:240px;gap:14px}
.si{position:relative;overflow:hidden;margin:0}
.si.tall{grid-row:span 2;grid-column:span 2}
.si.wide,.si:last-child{grid-column:span 2}
.si img{transition:transform 1.4s cubic-bezier(.2,.7,.2,1),filter .6s;filter:saturate(.92)}
.si:hover img{transform:scale(1.045);filter:saturate(1)}
.si:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(30,25,21,.55),transparent 45%);opacity:0;transition:.5s}
.si:hover:after{opacity:1}
.si figcaption{position:absolute;left:20px;bottom:16px;z-index:1;color:#EFE7DA;font:400 19px var(--serif);opacity:0;transform:translateY(8px);transition:.5s}
.si:hover figcaption{opacity:1;transform:none}
.scap{margin-top:34px;text-align:center;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:#A69F95}
@media (max-width:900px){.sgal{padding:0 7vw 90px}.sgrid{grid-template-columns:1fr 1fr;grid-auto-rows:170px;gap:8px}.si.tall{grid-row:span 2}.si figcaption{opacity:1;transform:none;font-size:15px;left:12px;bottom:8px}.si:after{opacity:1}.si:last-child{grid-column:span 2}}

#xishe h2 .zhname{display:block;font-size:.55em;letter-spacing:.2em;color:#A69F95;margin-top:10px}
#xishe-gallery{padding-top:0}
#xishe-gallery .sgrid{grid-auto-flow:dense}

/* Chinese typography */
body.zh h1,body.zh h2,body.zh h3,body.zh .big,#xishe h2 .zhname{font-family:"Italiana","Noto Serif SC",serif}
body.zh h1 [data-zh],body.zh h2 [data-zh],body.zh h3 [data-zh],#xishe h2 .zhname{font-family:"Noto Serif SC",serif;font-weight:300}
body.zh{font-family:var(--sans),"Noto Sans SC","PingFang SC",sans-serif}
.btn:hover{color:var(--ink)}
.hero .btn:hover{color:var(--ink)}
@media (max-width:900px){.hero-cap{right:7vw;bottom:14px;font-size:10px}}
@media (prefers-reduced-motion:reduce){.hero-img .h2{animation:none}}