:root {
  --ink: #20241f;
  --paper: #f1eee7;
  --paper-deep: #e7e1d7;
  --muted: #6f756e;
  --line: rgba(32, 36, 31, 0.16);
  --red: #a43d27;
  --night: #1b211e;
  --serif: "Songti SC", "STSong", "SimSun", serif;
  --sans: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
img { display: block; max-width: 100%; }

.site-header {
  align-items: center; display: flex; height: 72px; justify-content: space-between;
  left: 0; padding: 0 20px; position: absolute; right: 0; top: 0; z-index: 10;
}
.brand { align-items: center; color: #f6f1e9; display: flex; gap: 10px; }
.brand-mark {
  align-items: center; border: 1px solid rgba(255,255,255,.66); display: flex; font-family: var(--serif);
  font-size: 17px; height: 37px; justify-content: center; width: 37px;
}
.brand-copy { display: grid; gap: 2px; }
.brand-copy strong { font-family: var(--serif); font-size: 16px; font-weight: 600; letter-spacing: .22em; }
.brand-copy small { font-size: 8px; letter-spacing: .3em; opacity: .74; }
.menu-toggle { background: transparent; border: 0; display: grid; gap: 5px; padding: 8px 0 8px 12px; }
.menu-toggle i { background: #fff; display: block; height: 1px; transition: .25s; width: 25px; }
.menu-toggle.is-open i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle.is-open i:nth-child(2) { opacity: 0; }
.menu-toggle.is-open i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.site-nav {
  background: rgba(19,25,22,.97); display: flex; flex-direction: column; inset: 72px 0 auto; opacity: 0;
  padding: 24px 20px 30px; pointer-events: none; position: absolute; transform: translateY(-12px); transition: .25s;
}
.site-nav.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.site-nav a { border-bottom: 1px solid rgba(255,255,255,.15); color: #fff; font-family: var(--serif); padding: 15px 0; }

.hero { color: #fff; min-height: 780px; overflow: hidden; position: relative; }
.hero-bg { height: 100%; inset: 0; object-fit: cover; object-position: 51% center; position: absolute; width: 100%; }
.hero-shade { background: linear-gradient(180deg, rgba(9,14,12,.45), rgba(10,16,13,.28) 38%, rgba(8,14,11,.86)); inset: 0; position: absolute; }
.hero-content { bottom: 104px; left: 20px; max-width: 570px; position: absolute; right: 20px; }
.eyebrow, .kicker { font-size: 10px; letter-spacing: .23em; line-height: 1.5; margin: 0 0 19px; opacity: .86; }
.hero h1, h2 { font-family: var(--serif); font-weight: 500; letter-spacing: .05em; }
.hero h1 { font-size: clamp(45px, 12.5vw, 76px); line-height: 1.2; margin: 0; }
.hero h1 em { color: #e6c59e; font-size: .77em; font-style: normal; }
.hero-text { color: rgba(255,255,255,.8); font-family: var(--serif); font-size: 14px; line-height: 2; margin: 24px 0 26px; max-width: 480px; }
.primary-link { align-items: center; border-bottom: 1px solid rgba(255,255,255,.65); display: inline-flex; font-size: 13px; gap: 30px; letter-spacing: .18em; padding-bottom: 8px; }
.primary-link span { color: #e6c59e; font-size: 20px; }
.hero-bottom { align-items: center; bottom: 25px; display: flex; font-size: 8px; gap: 11px; left: 20px; letter-spacing: .18em; opacity: .72; position: absolute; right: 20px; }
.hero-line { background: rgba(255,255,255,.5); height: 1px; width: 42px; }

.section-space { padding: 84px 20px; }
.section-label { align-items: center; color: var(--muted); display: flex; font-size: 9px; gap: 13px; letter-spacing: .24em; margin-bottom: 40px; }
.section-label span { color: var(--red); font-size: 12px; letter-spacing: 0; }
.statement-en { color: var(--red); font-size: 10px; letter-spacing: .24em; margin: 0 0 14px; }
h2 { font-size: clamp(31px, 8vw, 48px); line-height: 1.45; margin: 0; }
.statement-grid { align-items: end; display: grid; grid-template-columns: 1fr 48px; gap: 16px; margin: 26px 0 40px; }
.statement-grid p, .contact-copy, .quote-note { color: #60675f; font-family: var(--serif); font-size: 14px; line-height: 2.05; margin: 0; }
.seal { align-items: center; border: 1px solid var(--red); color: var(--red); display: flex; flex-direction: column; font-family: var(--serif); font-size: 16px; height: 66px; justify-content: center; line-height: 1.15; width: 42px; }
.wide-visual { margin: 0; }
.wide-visual img { aspect-ratio: 1.03; height: auto; object-fit: cover; object-position: center; width: 100%; }
figcaption { color: var(--muted); font-family: var(--serif); font-size: 11px; line-height: 1.7; padding-top: 12px; }

.services { background: var(--night); color: #eff0e9; }
.section-head { margin-bottom: 34px; }
.services .kicker, .numbers .kicker { color: #d8b88e; }
.service-list { border-top: 1px solid rgba(255,255,255,.18); }
.service-item { border-bottom: 1px solid rgba(255,255,255,.18); display: grid; gap: 16px; grid-template-columns: 28px 1fr; padding: 22px 0 20px; }
.service-item > span { color: #d8b88e; font-size: 10px; padding-top: 4px; }
.service-item h3 { font-family: var(--serif); font-size: 19px; font-weight: 500; letter-spacing: .12em; margin: 0 0 7px; }
.service-item p { color: rgba(255,255,255,.63); font-family: var(--serif); font-size: 12px; line-height: 1.9; margin: 0; }

.project-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: -3px 0 28px; }
.filter { background: transparent; border: 1px solid var(--line); border-radius: 20px; color: #687067; font-size: 11px; letter-spacing: .08em; padding: 8px 15px; transition: .25s; }
.filter.is-active { background: var(--red); border-color: var(--red); color: #fff; }
.project-grid { display: grid; gap: 14px; }
.project-card { background: #ddd7cb; overflow: hidden; position: relative; }
.project-card[hidden] { display: none; }
.project-card img { aspect-ratio: 1.12; height: auto; object-fit: cover; transition: transform .55s ease; width: 100%; }
.project-card:hover img { transform: scale(1.04); }
.project-meta { background: linear-gradient(180deg, transparent, rgba(10,16,13,.86)); bottom: 0; color: #fff; left: 0; padding: 70px 16px 18px; position: absolute; right: 0; }
.project-meta span { color: #dfc094; font-size: 10px; letter-spacing: .2em; }
.project-meta h3 { font-family: var(--serif); font-size: 24px; font-weight: 500; letter-spacing: .12em; margin: 7px 0 5px; }
.project-meta p { color: rgba(255,255,255,.7); font-family: var(--serif); font-size: 11px; line-height: 1.7; margin: 0; }

.numbers { color: #fff; min-height: 590px; overflow: hidden; position: relative; }
.numbers > img { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }
.numbers-shade { background: linear-gradient(180deg, rgba(14,20,17,.43), rgba(14,20,17,.9)); inset: 0; position: absolute; }
.numbers-inner { bottom: 0; left: 20px; padding: 66px 0; position: absolute; right: 20px; }
.numbers-grid { border-top: 1px solid rgba(255,255,255,.3); display: grid; gap: 0; grid-template-columns: repeat(3,1fr); margin-top: 32px; }
.numbers-grid div { border-right: 1px solid rgba(255,255,255,.25); padding: 19px 10px 0 0; }
.numbers-grid div:last-child { border-right: 0; padding-left: 12px; }
.numbers-grid div:nth-child(2) { padding-left: 12px; }
.numbers-grid strong { color: #e7c598; display: block; font-family: var(--serif); font-size: 33px; font-weight: 500; }
.numbers-grid span { color: rgba(255,255,255,.65); display: block; font-size: 10px; line-height: 1.7; margin-top: 5px; }

.philosophy { background: var(--paper-deep); padding-bottom: 0; }
.quote-mark { color: var(--red); font-family: Georgia, serif; font-size: 80px; height: 56px; line-height: 1; }
blockquote { font-family: var(--serif); font-size: clamp(21px, 5.8vw, 31px); line-height: 1.8; margin: 0; }
.quote-note { margin: 22px 0 36px; }
.interior { aspect-ratio: .88; object-fit: cover; width: 100%; }

.contact { background: #a13b26; color: #fff; padding: 84px 20px 56px; }
.contact .section-label, .contact-copy { color: rgba(255,255,255,.72); }
.contact .section-label span, .contact .kicker { color: #f1d2a3; }
.contact-copy { margin: 23px 0 30px; }
.phone { border-bottom: 1px solid rgba(255,255,255,.28); border-top: 1px solid rgba(255,255,255,.28); display: block; padding: 20px 0; }
.phone small { display: block; font-size: 9px; letter-spacing: .25em; opacity: .68; }
.phone strong { display: block; font-family: var(--serif); font-size: 29px; font-weight: 500; letter-spacing: .08em; margin-top: 8px; }
.contact-actions { display: grid; gap: 9px; grid-template-columns: 1fr 1fr; margin-top: 18px; }
.contact-actions a, .contact-actions button { align-items: center; background: #f3eee5; border: 0; color: #85301f; display: flex; font-size: 12px; justify-content: space-between; letter-spacing: .1em; padding: 14px; }
.contact-actions button { background: transparent; border: 1px solid rgba(255,255,255,.45); color: #fff; }
.copy-note { font-size: 11px; height: 18px; margin: 13px 0 0; opacity: .75; }
footer { align-items: start; background: #17201c; color: rgba(255,255,255,.66); display: grid; gap: 24px; padding: 35px 20px; }
footer p { font-family: var(--serif); font-size: 13px; line-height: 1.9; margin: 0; }
footer small { font-family: var(--sans); font-size: 9px; letter-spacing: .18em; opacity: .62; }
footer > a:last-child { color: #e1c093; font-size: 11px; letter-spacing: .14em; }

.reveal { opacity: 1; transform: translateY(0); }
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (min-width: 760px) {
  .site-header { height: 88px; padding: 0 6vw; }
  .menu-toggle { display: none; }
  .site-nav { background: transparent; flex-direction: row; gap: 34px; inset: auto; opacity: 1; padding: 0; pointer-events: auto; position: static; transform: none; }
  .site-nav a { border: 0; font-family: var(--sans); font-size: 11px; letter-spacing: .14em; padding: 0; }
  .hero { min-height: 900px; }
  .hero-content { bottom: 145px; left: 8vw; }
  .hero-bottom { bottom: 32px; left: 8vw; right: 8vw; }
  .section-space { padding: 118px 8vw; }
  .statement-grid { gap: 50px; grid-template-columns: minmax(260px,560px) 48px; }
  .wide-visual img { aspect-ratio: 2.1; }
  .services { display: grid; gap: 7vw; grid-template-columns: 1fr 1.15fr; }
  .services .section-label { grid-column: 1 / -1; margin-bottom: -10px; }
  .service-list { margin-top: 9px; }
  .project-grid { grid-template-columns: repeat(3, 1fr); }
  .project-card-large { grid-column: span 2; grid-row: span 2; }
  .project-card-large img { height: 100%; }
  .numbers-inner { left: 8vw; right: 8vw; }
  .numbers-grid { max-width: 660px; }
  .philosophy { display: grid; gap: 0 7vw; grid-template-columns: 1fr 1fr; padding-bottom: 0; }
  .philosophy .section-label { grid-column: 1 / -1; }
  .interior { align-self: end; aspect-ratio: .9; grid-column: 2; grid-row: 2 / span 4; }
  .contact { padding: 110px 8vw 72px; }
  .contact-inner { max-width: 680px; }
  footer { align-items: center; grid-template-columns: 1fr 1fr auto; padding: 38px 8vw; }
}