/* TWENTI20S restored preview */
* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --bg:#000; --fg:#fff; --muted:#aaa;
  --font-en: "Source Sans 3", "Source Sans Pro", "PingFang SC", "Noto Sans SC", sans-serif;
  --font-cjk: "PingFang SC", "Noto Sans SC", "Source Sans 3", sans-serif;
}
html { scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--fg);
  font-family: var(--font-en);
  overflow-x:hidden; line-height:1.5;
}
body.lang-zh, body.lang-cn { font-family: var(--font-cjk); }
a { color:inherit; text-decoration:none; }
img, video { max-width:100%; display:block; }
.container { width:100%; min-height:100vh; position:relative; }

header {
  position:fixed; top:0; left:0; width:100%; z-index:100;
  padding:18px 40px; background:linear-gradient(to bottom, rgba(0,0,0,.85), transparent);
}
.nav-bar { display:flex; justify-content:space-between; align-items:center; gap:24px; }
.logo img { height:36px; }
.mobile-logo { display:none; }
.menu { display:flex; list-style:none; gap:28px; align-items:center; }
.menu-item a { font-weight:600; font-size:14px; letter-spacing:.04em; opacity:.9; }
.menu-item a:hover, .menu-item a.active { opacity:1; }
.language-switcher { display:flex; gap:10px; font-size:12px; }
.language-switcher a.active { text-decoration:underline; }
.mobile-menu-icon { display:none; cursor:pointer; }
.mobile-menu-icon img { width:28px; height:28px; }

.dialog {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.95);
  z-index:200; flex-direction:column; justify-content:center; align-items:center; gap:28px;
}
.dialog.open { display:flex; }
.m-menu-item a { font-size:22px; font-weight:700; }
.close-icon { position:absolute; top:24px; right:24px; width:28px; cursor:pointer; }

.hero {
  position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:120px 24px 80px; overflow:hidden;
}
.hero-video, .hero-poster {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
}
.hero::after {
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.25), rgba(0,0,0,.7));
}
.hero-content h1 {
  font-size:clamp(28px, 5vw, 56px); font-weight:700; letter-spacing:.02em;
  max-width:16ch; margin:0 auto 16px; line-height:1.15;
}
.hero-content h2 { font-size:clamp(14px, 2vw, 20px); font-weight:400; letter-spacing:.2em; opacity:.85; }

.section {
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
  padding:80px 8vw; min-height:70vh;
}
.section.reverse { direction:rtl; }
.section.reverse > * { direction:ltr; }
.section-content h2 { font-size:clamp(28px, 4vw, 42px); margin-bottom:16px; font-weight:700; }
.section-content p { color:var(--muted); margin-bottom:24px; max-width:42ch; }
.btn {
  display:inline-block; border:1px solid #fff; padding:12px 28px;
  font-weight:600; letter-spacing:.06em; font-size:13px; transition:.2s;
}
.btn:hover { background:#fff; color:#000; }
.section-media { position:relative; }
.section-media img, .section-media video {
  width:100%; height:auto; border-radius:4px; background:#111;
}

.work-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px; padding:40px 8vw 100px;
}
.work-card {
  background:#111; border-radius:6px; overflow:hidden; position:relative;
}
.work-card video, .work-card img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.work-card h3 {
  padding:14px 16px 18px; font-size:14px; letter-spacing:.06em; font-weight:600;
}

.page-hero {
  padding:140px 8vw 40px; text-align:center;
}
.page-hero h1 { font-size:clamp(32px,5vw,52px); margin-bottom:12px; }
.page-hero p { color:var(--muted); max-width:50ch; margin:0 auto; }

.about-blocks { padding:20px 8vw 80px; display:grid; gap:48px; }
.about-block {
  display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center;
}
.about-block:nth-child(even) { grid-template-columns:.9fr 1.1fr; }
.about-block:nth-child(even) .about-copy { order:2; }
.about-block video, .about-block img { width:100%; border-radius:4px; }
.about-copy h2 { font-size:28px; margin-bottom:12px; }
.about-copy p { color:var(--muted); }

.contact-wrap {
  padding:40px 8vw 100px; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start;
}
.contact-card { background:#111; padding:28px; border-radius:8px; }
.contact-card h2 { margin-bottom:16px; }
.contact-card p { color:var(--muted); margin-bottom:8px; }
.contact-visual img { width:100%; border-radius:8px; }

footer { border-top:1px solid #222; padding:48px 8vw 24px; }
.footer-content { display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between; }
.footer-logo img { height:32px; margin-bottom:16px; }
.footer-links { display:flex; flex-wrap:wrap; gap:48px; }
.footer-column h3 { font-size:13px; letter-spacing:.08em; margin-bottom:12px; opacity:.7; }
.footer-column ul { list-style:none; }
.footer-column li { margin-bottom:8px; }
.footer-column a:hover { text-decoration:underline; }
.footer-bottom { margin-top:32px; padding-top:16px; border-top:1px solid #222; color:#666; font-size:12px; }

@media (max-width: 900px) {
  header { padding:14px 18px; }
  .menu { display:none; }
  .mobile-menu-icon { display:block; }
  .desktop-logo { display:none; }
  .mobile-logo { display:block; height:28px; }
  .section, .section.reverse, .about-block, .about-block:nth-child(even), .contact-wrap {
    grid-template-columns:1fr; direction:ltr;
  }
  .about-block:nth-child(even) .about-copy { order:0; }
  .hero { min-height:85vh; padding:110px 18px 60px; }
  .section { padding:56px 18px; min-height:auto; gap:24px; }
  .work-grid, .about-blocks, .contact-wrap, .page-hero, footer { padding-left:18px; padding-right:18px; }
}