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

:root {
  --paper: #f3f3ef;
  --ink: #101010;
  --muted: #6c6c67;
  --line: rgba(16, 16, 16, .22);
  --red: #f04435;
  --white: #fafaf7;
  --side: clamp(18px, 2.35vw, 38px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; background: var(--ink); color: var(--ink); font-family: Manrope, Arial, sans-serif; }
body:has(dialog[open]) { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }
.site-shell { width: 100%; min-height: 100vh; overflow: hidden; background: var(--paper); }
.section-kicker, .hero-kicker, .hero-project-index, .hero-project-meta, .hero-scroll, .project-number, .project-meta, .service-group > span, .process-list span, .footer, .dialog-meta, .reader-caption, .scope-block > span, .contact-form label > span:first-child, .direct-contact span {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.topbar {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 28px;
  padding: 21px var(--side);
  font-size: 12px;
}
.topbar-overlay { position: absolute; z-index: 20; top: 0; left: 0; width: 100%; color: var(--white); border-bottom: 1px solid rgba(255, 255, 255, .4); text-shadow: 0 1px 8px rgba(0, 0, 0, .42); }
.wordmark { position: relative; z-index: 21; font-size: 17px; font-weight: 800; white-space: nowrap; }
.wordmark span { margin-left: 4px; color: var(--red); }
.main-nav { display: flex; gap: 30px; }
.main-nav a, .contact-link { position: relative; }
.main-nav a::after, .contact-link::after { content: ''; position: absolute; right: 0; bottom: -5px; left: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .3s ease; }
.main-nav a:hover::after, .contact-link:hover::after { transform: scaleX(1); transform-origin: left; }
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 20px; white-space: nowrap; }
.lang-toggle { padding: 0; border: 0; color: inherit; background: none; }
.contact-link { display: flex; gap: 8px; font-weight: 700; }
.arrow { font-size: 16px; line-height: .8; }
.menu-toggle { display: none; width: 28px; height: 28px; padding: 6px 2px; border: 0; color: inherit; background: transparent; }
.menu-toggle span { display: block; height: 1px; margin: 5px 0; background: currentColor; transition: transform .25s ease; }

.hero { position: relative; height: 94svh; min-height: 700px; overflow: hidden; color: var(--white); background: #30302e; }
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.055); transition: opacity 1.2s cubic-bezier(.22, .61, .36, 1), transform 6.4s cubic-bezier(.16, 1, .3, 1); will-change: opacity, transform; }
.hero-image.is-active { z-index: 1; opacity: 1; transform: scale(1); }
.hero-image.is-leaving { z-index: 0; opacity: 0; transform: scale(1.025); }
.hero-shade { position: absolute; z-index: 2; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .4) 0, rgba(0, 0, 0, .03) 43%, rgba(0, 0, 0, .62) 100%); pointer-events: none; }
.hero-name { position: absolute; z-index: 3; top: 12%; right: var(--side); left: var(--side); }
.hero-kicker { margin: 0 0 16px; }
.hero-project { position: absolute; z-index: 3; right: var(--side); bottom: 32px; left: var(--side); display: grid; grid-template-columns: 70px 1fr auto 36px; gap: 20px; align-items: end; width: calc(100% - (2 * var(--side))); padding: 17px 0 0; border: 0; border-top: 1px solid rgba(255, 255, 255, .72); color: inherit; text-align: left; background: transparent; }
.hero-project-title { font-size: clamp(28px, 3vw, 44px); font-weight: 600; line-height: 1; }
.hero-project-meta { padding-bottom: 4px; }
.hero-project-arrow { font-size: 26px; text-align: right; transition: transform .25s ease; }
.hero-project:hover .hero-project-arrow { transform: translate(4px, -4px); }
.hero-carousel-controls { position: absolute; z-index: 4; right: var(--side); bottom: 112px; display: flex; border: 1px solid rgba(255, 255, 255, .52); }
.hero-carousel-controls button { width: 44px; height: 38px; padding: 0; border: 0; color: var(--white); font-size: 18px; background: rgba(0, 0, 0, .18); transition: color .25s ease, background .25s ease; }
.hero-carousel-controls button + button { border-left: 1px solid rgba(255, 255, 255, .52); }
.hero-carousel-controls button:hover { color: var(--ink); background: var(--white); }
.hero-progress { position: absolute; z-index: 4; right: 0; bottom: 0; left: 0; height: 3px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.hero-progress span { display: block; width: 100%; height: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; }
.hero-progress span.is-running { animation: hero-progress 5s linear forwards; }
@keyframes hero-progress { to { transform: scaleX(1); } }
.hero-scroll { position: absolute; z-index: 3; top: 50%; right: var(--side); display: flex; gap: 14px; transform: rotate(90deg) translateX(50%); transform-origin: right center; }

.projects-section { padding: 118px var(--side) 150px; }
.section-kicker { margin: 0 0 16px; color: var(--muted); }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 26px; border-bottom: 1px solid var(--ink); }
.section-heading h2 { margin: 0; font-size: clamp(64px, 7vw, 98px); line-height: .78; letter-spacing: 0; }
.section-note { margin: 0 0 3px; font-size: 12px; line-height: 1.55; text-align: right; }
.filter-row { display: flex; justify-content: flex-end; gap: 24px; padding: 18px 0 34px; }
.filter-tabs { display: flex; gap: 24px; }
.filter { position: relative; padding: 0 0 8px; border: 0; color: var(--muted); font-size: 12px; background: none; }
.filter.active { color: var(--ink); font-weight: 700; }
.filter.active::after { content: ''; position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: var(--red); }
.sort-control { display: flex; gap: 12px; align-items: center; color: var(--muted); font-family: 'DM Mono', monospace; font-size: 10px; text-transform: uppercase; }
.sort-control select { min-width: 124px; padding: 4px 24px 7px 0; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; color: var(--ink); font: inherit; background-color: transparent; }
.project-list { display: grid; gap: clamp(72px, 8vw, 118px); }
.project-row { display: block; width: 100%; padding: 0; border: 0; color: var(--ink); text-align: left; background: transparent; }
.project-thumb { display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #d0d0ca; }
.project-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, 0, 1); }
.project-row:hover .project-thumb img { transform: scale(1.015); }
.project-caption { display: grid; grid-template-columns: 70px 1fr 40px; gap: 20px; align-items: start; padding: 16px 0 0; border-top: 1px solid var(--ink); }
.project-title { display: block; font-size: clamp(32px, 3.35vw, 50px); font-weight: 600; line-height: 1.04; }
.project-meta { display: flex; gap: 20px; margin-top: 10px; color: var(--muted); }
.project-arrow { font-size: 25px; text-align: right; transition: transform .25s ease; }
.project-row:hover .project-arrow { transform: translate(4px, -4px); }
.expand-projects { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 88px; padding: 19px 0; border: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); color: var(--ink); font-weight: 700; text-align: left; background: transparent; }
.expand-projects:hover { color: var(--red); }
.expand-projects[hidden] { display: none; }

.services-section { padding: 112px var(--side) 120px; color: var(--white); background: var(--ink); }
.services-section .section-kicker { color: #989893; }
.services-intro { display: grid; grid-template-columns: 30% 70%; padding-bottom: 72px; }
.services-intro h2 { max-width: 980px; margin: 0; font-size: clamp(42px, 5.25vw, 76px); line-height: 1.02; font-weight: 600; }
.service-groups { border-top: 1px solid #555; }
.service-group { display: grid; grid-template-columns: 30% 35% 35%; gap: 0; align-items: baseline; min-height: 116px; padding: 24px 0; border-bottom: 1px solid #444; }
.service-group > span { color: #888; }
.service-group h3 { margin: 0; font-size: clamp(24px, 2.4vw, 36px); font-weight: 600; }
.service-group p { margin: 0; color: #aaa; font-size: 14px; line-height: 1.7; }

.process-section { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; padding: 118px var(--side); background: #deded8; }
.process-heading h2 { margin: 0; font-size: clamp(44px, 5.25vw, 76px); line-height: 1.02; }
.process-list { margin: 0; padding: 0; border-top: 1px solid var(--ink); list-style: none; }
.process-list li { display: grid; grid-template-columns: 68px 1fr; min-height: 90px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.process-list span { color: var(--muted); }
.process-list p { margin: 0; font-size: 20px; }

.studio-section { padding: 118px var(--side) 130px; background: var(--paper); }
.studio-statement { display: grid; grid-template-columns: 1.55fr .65fr; gap: 10vw; align-items: end; padding-top: 24px; border-top: 1px solid var(--ink); }
.studio-statement h2 { max-width: 980px; margin: 0; font-size: clamp(46px, 6vw, 86px); line-height: .99; font-weight: 600; }
.studio-statement p { margin: 0 0 34px; font-size: 14px; line-height: 1.75; }
.studio-statement a { display: flex; justify-content: space-between; padding: 15px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); font-weight: 700; }

.contact-section { display: grid; grid-template-columns: .9fr 1.1fr; gap: 9vw; padding: 112px var(--side) 104px; color: var(--white); background: var(--ink); }
.contact-section .section-kicker { color: #92928e; }
.contact-heading h2 { max-width: 650px; margin: 0; font-size: clamp(46px, 5.5vw, 80px); line-height: 1; }
.contact-heading > p:not(.section-kicker) { max-width: 470px; margin: 30px 0 0; color: #aaa; font-size: 14px; line-height: 1.7; }
.direct-contact { display: grid; gap: 34px; margin-top: 64px; }
.direct-contact > a { display: grid; gap: 7px; width: fit-content; }
.direct-contact strong { font-size: 16px; font-weight: 600; }
.direct-contact span { color: #92928e; }
.wechat-contact { display: flex; gap: 18px; align-items: end; }
.wechat-contact img { display: block; width: 140px; height: 140px; padding: 9px; object-fit: contain; background: #fff; }
.wechat-contact p { display: grid; gap: 7px; margin: 0; }
.contact-form { align-self: start; border-top: 1px solid #666; }
.contact-form label { display: block; padding: 15px 0; border-bottom: 1px solid #444; }
.contact-form label > span:first-child { display: block; margin-bottom: 8px; color: #999; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; padding: 0; border: 0; outline: none; border-radius: 0; color: var(--white); font-size: 15px; resize: vertical; background: transparent; }
.contact-form select { color-scheme: dark; }
.contact-form textarea { min-height: 92px; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #777; }
.honeypot { position: absolute !important; left: -9999px !important; }
.submit-button { display: flex; justify-content: space-between; width: 100%; margin-top: 22px; padding: 17px; border: 0; color: var(--ink); font-weight: 700; background: var(--red); transition: color .25s, background .25s; }
.submit-button:hover { background: var(--white); }
.submit-button:disabled { cursor: wait; opacity: .65; }
.form-status { min-height: 20px; margin: 13px 0 0; font-size: 12px; line-height: 1.5; }
.form-status.is-success { color: #b7d9b4; }
.form-status.is-error { color: #ff9f96; }
.form-status a { text-decoration: underline; }
.footer { display: flex; justify-content: space-between; gap: 20px; padding: 24px var(--side); color: #999; background: var(--ink); border-top: 1px solid #333; }
.footer a { color: var(--white); }

.project-dialog { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; color: var(--ink); background: var(--paper); }
.project-dialog::backdrop { background: rgba(16, 16, 16, .82); }
.dialog-close { position: fixed; z-index: 30; top: 18px; right: 22px; display: flex; align-items: center; gap: 8px; min-width: 44px; height: 44px; padding: 0 14px; border: 1px solid var(--ink); color: var(--ink); background: var(--red); }
.dialog-close span:first-child { font-size: 25px; line-height: 1; }
.close-label { font-family: 'DM Mono', monospace; font-size: 10px; text-transform: uppercase; }
.dialog-inner { padding: 90px var(--side) 80px; }
.dialog-header { display: grid; grid-template-columns: 110px minmax(300px, 1fr) minmax(290px, 430px); gap: 30px; align-items: end; min-height: 280px; padding-bottom: 34px; }
.dialog-inner h2 { margin: 0; font-size: clamp(60px, 7.4vw, 106px); line-height: .9; letter-spacing: 0; }
.dialog-inner p { max-width: 430px; margin: 0; font-size: 14px; line-height: 1.65; }
.dialog-meta { align-self: start; margin-top: 8px; color: var(--muted); line-height: 1.6; }
.scope-block { margin-top: 26px; padding-top: 12px; border-top: 1px solid var(--line); }
.scope-block > span { display: block; margin-bottom: 11px; color: var(--muted); }
.scope-block div { display: flex; flex-wrap: wrap; gap: 7px 15px; }
.scope-block div span { font-size: 12px; }
.scope-block div span::before { content: '— '; color: var(--red); }
.dialog-cover { margin: 0; }
.dialog-inner img { display: block; width: 100%; height: auto; object-fit: contain; background: #d0d0ca; }
.dialog-gallery { display: grid; gap: 76px; margin: 76px 0 0; }
.dialog-gallery-item { margin: 0; }
.reader-caption, .dialog-gallery-item figcaption { display: flex; justify-content: space-between; padding-top: 10px; color: var(--muted); font-family: 'DM Mono', monospace; font-size: 10px; text-transform: uppercase; }
.reader-contact { display: flex; justify-content: space-between; margin-top: 80px; padding: 24px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); font-size: 20px; font-weight: 700; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .75s cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0ms), transform .75s cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0ms); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 900px) {
  .topbar { grid-template-columns: 1fr auto; padding: 18px; }
  .main-nav { position: fixed; z-index: 19; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 82px 18px 40px; color: var(--ink); background: var(--paper); opacity: 0; pointer-events: none; transform: translateY(-14px); transition: opacity .25s ease, transform .25s ease; }
  .main-nav a { padding: 10px 0; border-bottom: 1px solid var(--ink); font-size: 34px; font-weight: 600; text-shadow: none; }
  .top-actions { position: relative; z-index: 21; gap: 15px; }
  .menu-toggle { display: block; }
  .menu-open .topbar { color: var(--ink); text-shadow: none; }
  .menu-open .wordmark { position: fixed; z-index: 30; top: 21px; left: 18px; width: auto; }
  .menu-open .main-nav { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .menu-open .menu-toggle span:first-child { transform: translateY(3px) rotate(45deg); }
  .menu-open .menu-toggle span:last-child { transform: translateY(-3px) rotate(-45deg); }
  .hero { height: 91svh; min-height: 620px; }
  .hero-name { top: 13%; right: 18px; left: 18px; }
  .hero-kicker { max-width: 220px; line-height: 1.45; }
  .hero-project { right: 18px; bottom: 26px; left: 18px; grid-template-columns: 34px 1fr 26px; width: calc(100% - 36px); gap: 10px; }
  .hero-project-title { font-size: clamp(24px, 7.4vw, 34px); line-height: 1.08; }
  .hero-project-meta { grid-column: 2; font-size: 9px; }
  .hero-project-arrow { grid-column: 3; grid-row: 1; }
  .hero-carousel-controls { right: 18px; bottom: 121px; }
  .hero-scroll { display: none; }
  .projects-section { padding: 84px 18px 104px; }
  .section-heading { display: block; }
  .section-heading h2 { font-size: 60px; }
  .section-note { margin-top: 24px; text-align: left; }
  .filter-row { align-items: flex-start; flex-direction: column; }
  .filter-tabs { width: 100%; gap: 18px; overflow-x: auto; }
  .filter { white-space: nowrap; }
  .sort-control { width: 100%; justify-content: space-between; }
  .project-list { gap: 64px; }
  .project-thumb { aspect-ratio: 4 / 3; }
  .project-caption { grid-template-columns: 32px 1fr 26px; gap: 10px; }
  .project-title { font-size: 29px; }
  .project-meta { gap: 12px; }
  .project-arrow { grid-column: 3; grid-row: 1; }
  .expand-projects { margin-top: 64px; }
  .services-section { padding: 84px 18px 90px; }
  .services-intro { display: block; padding-bottom: 50px; }
  .services-intro h2 { margin-top: 28px; font-size: 41px; }
  .service-group { grid-template-columns: 42px 1fr; min-height: 0; }
  .service-group p { grid-column: 2; margin-top: 13px; }
  .process-section { display: block; padding: 84px 18px; }
  .process-list { margin-top: 54px; }
  .process-list li { grid-template-columns: 48px 1fr; min-height: 76px; }
  .process-list p { font-size: 17px; }
  .studio-section { padding: 84px 18px 96px; }
  .studio-statement { display: block; }
  .studio-statement h2 { font-size: 43px; }
  .studio-statement > div { margin-top: 54px; }
  .contact-section { display: block; padding: 84px 18px 80px; }
  .contact-heading h2 { font-size: 48px; }
  .direct-contact { margin-top: 48px; }
  .contact-form { margin-top: 66px; }
  .footer { padding: 22px 18px; font-size: 9px; flex-wrap: wrap; }
  .dialog-close { top: 12px; right: 12px; }
  .close-label { display: none; }
  .dialog-inner { padding: 74px 14px 56px; }
  .dialog-header { display: block; min-height: 0; padding-bottom: 28px; }
  .dialog-inner h2 { margin: 18px 0 24px; font-size: 48px; }
  .dialog-inner p { max-width: none; }
  .scope-block { margin-top: 22px; }
  .dialog-gallery { gap: 42px; margin-top: 42px; }
  .reader-contact { margin-top: 54px; font-size: 16px; }
}

@media (max-width: 480px) {
  .contact-link { display: none; }
  .hero-project-title { font-size: 25px; }
  .section-heading h2 { font-size: 54px; }
  .services-intro h2, .process-heading h2, .studio-statement h2 { font-size: 38px; }
  .contact-heading h2 { font-size: 43px; }
  .wechat-contact img { width: 124px; height: 124px; }
  .footer span:nth-child(2) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .hero-image, .hero-image.is-active, .hero-image.is-leaving, .reveal { transform: none; }
  .reveal { opacity: 1; }
}