/* Instrument Sans 本地化：避免微信内置浏览器请求 Google Fonts 被墙导致首屏卡住 */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/instrument-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --blue:#002FA7;--blue-lit:#6E8BFF;--ink:#0E0E0E;--ink2:#141414;
  --paper:#fff;--mute:#6F6F6F;--mute-d:#9B9999;--line:#262626;--line-l:#E5E5E5;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:#fff;
  font-family:"Instrument Sans","PingFang SC","HarmonyOS Sans SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.5}
body.theme-light{background:var(--paper);color:var(--ink)}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}
.wrap{max-width:1440px;margin:0 auto;padding:0 96px}
.mute{color:var(--mute-d)}
body.theme-light .mute{color:var(--mute)}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--mute-d)}
body.theme-light .eyebrow{color:var(--mute)}

/* announce */
.announce{background:var(--blue);color:#fff;font-size:14px;font-weight:500}
.announce .wrap{display:flex;align-items:center;justify-content:space-between;height:48px;gap:24px}
.announce a{text-decoration:underline;text-underline-offset:3px}

/* header */
.site-head{position:sticky;top:0;z-index:60;background:rgba(14,14,14,.86);
  backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .2s}
body.theme-light .site-head{background:rgba(255,255,255,.9)}
.site-head:hover{border-bottom-color:var(--line)}
body.theme-light .site-head:hover{border-bottom-color:var(--line-l)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;height:96px}
.logo img{width:186px;height:70px;object-fit:contain}
.nav{display:flex;align-items:center;gap:36px;font-size:16px}
.nav a{opacity:.92;transition:color .18s,opacity .18s}
.nav a:hover{color:var(--blue-lit);opacity:1}
body.theme-light .nav a:hover{color:var(--blue)}
.nav a.active{color:var(--blue-lit);font-weight:600}
body.theme-light .nav a.active{color:var(--blue)}
.nav .lang{font-size:13px;letter-spacing:1px;color:var(--mute-d)}
body.theme-light .nav .lang{color:var(--mute)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;
  padding:16px 32px;font-size:15px;font-weight:600;transition:transform .18s,background .18s,color .18s,border-color .18s}
.btn:hover{transform:translateY(-1px)}
.btn-sm{padding:13px 26px}
.btn-primary{background:#fff;color:var(--ink)}
.btn-primary:hover{background:#E9E9E9}
body.theme-light .btn-primary{background:var(--ink);color:#fff}
body.theme-light .btn-primary:hover{background:#000}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:#0038C8}
.btn-ghost{border:1px solid #3A3A3A;color:#fff}
.btn-ghost:hover{border-color:var(--blue-lit);color:var(--blue-lit)}
body.theme-light .btn-ghost{border-color:#CFCFCF;color:var(--ink)}
body.theme-light .btn-ghost:hover{border-color:var(--blue);color:var(--blue)}

/* hero */
.hero{padding:110px 0 90px;text-align:center}
.hero h1{font-size:clamp(30px,7.2vw,76px);line-height:1.24;letter-spacing:-1px;margin:26px 0 0;font-weight:700}
.hero p{max-width:720px;margin:26px auto 0;font-size:17px;line-height:1.75;color:var(--mute-d)}
.hero .actions{display:flex;gap:14px;justify-content:center;margin-top:36px;flex-wrap:wrap}

/* figure */
.figure{position:relative}
.figure img{height:600px}
.figure .cap{position:absolute;left:96px;bottom:44px}
.figure .cap strong{display:block;font-size:20px;font-weight:600;letter-spacing:1px}
.figure .cap span{font-size:15px;color:rgba(255,255,255,.8)}

/* video hero */
.hero--video{position:relative;overflow:hidden;background:var(--ink);
  min-height:min(80vh,880px);display:flex;align-items:center;justify-content:center;
  padding:130px 0 150px}
.hero--video .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  filter:brightness(.55) saturate(1.05)}
.hero--video::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.72) 32%,
             rgba(10,10,10,.72) 68%,rgba(10,10,10,.94) 100%)}
.hero--video .wrap{position:relative;z-index:2;width:100%}
.hero--video h1{text-shadow:0 2px 44px rgba(0,0,0,.55)}
.hero--video p{color:#E6E6E6;text-shadow:0 1px 26px rgba(0,0,0,.55)}
.hero--video .cap{position:absolute;left:96px;bottom:46px;z-index:2}
.hero--video .cap strong{display:block;font-size:20px;font-weight:600;letter-spacing:1px}
.hero--video .cap span{font-size:15px;color:rgba(255,255,255,.82)}

/* sections */
.section{padding:130px 0 120px}
.section.light{background:var(--paper);color:var(--ink)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:64px}
.section-head h2{font-size:clamp(30px,3.2vw,44px);letter-spacing:-.5px;margin:12px 0 0;font-weight:700}
.linkmore{font-size:15px;font-weight:500;color:var(--mute);white-space:nowrap}
.linkmore:hover{color:var(--blue)}
body.theme-dark .linkmore:hover{color:var(--blue-lit)}

/* project rows */
.duo{display:grid;grid-template-columns:1.8fr 1fr;gap:40px;align-items:start}
.duo.rev{grid-template-columns:1fr 1.8fr}
.proj{display:block}
.proj .cover{overflow:hidden;background:#1A1A1A}
.proj .cover img{height:470px;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.proj:hover .cover img{transform:scale(1.03)}
.proj .meta{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-top:22px}
.proj h3{margin:0;font-size:26px;font-weight:700;letter-spacing:-.2px}
.proj .desc{margin:8px 0 0;font-size:15px;line-height:1.6;color:var(--mute)}
body.theme-dark .proj .desc{color:var(--mute-d)}
.proj .tag{font-size:13px;color:var(--mute);white-space:nowrap}
body.theme-dark .proj .tag{color:var(--mute-d)}
.rows{display:flex;flex-direction:column;gap:88px}

/* capabilities */
.caps{display:grid;grid-template-columns:repeat(4,1fr);gap:48px;margin-top:56px}
.cap{border-top:1px solid #333;padding-top:20px}
.cap .num{font-size:13px;font-weight:600;letter-spacing:1px;color:var(--mute-d)}
.cap h3{margin:14px 0 10px;font-size:24px;font-weight:700}
.cap p{margin:0;font-size:15px;line-height:1.75;color:var(--mute-d)}

/* clients */
.clients{display:grid;grid-template-columns:repeat(5,1fr);gap:20px 24px;margin-top:48px}
.client{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 8px;
  border-radius:14px;transition:background .35s var(--ease),transform .35s var(--ease)}
.client .mark{width:58px;height:58px;border-radius:50%;border:1px solid #D9D9D9;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:600;letter-spacing:0;color:#7A7A7A;
  transition:border-color .32s var(--ease),color .32s var(--ease),background .32s var(--ease),transform .32s var(--ease)}
.client .cname{font-size:13px;color:var(--mute);letter-spacing:.2px;
  transition:color .32s var(--ease)}
.client:hover{background:#F6F6F6;transform:translateY(-2px)}
.client:hover .mark{border-color:var(--blue);background:var(--blue);color:#fff;transform:scale(1.04)}
.client:hover .cname{color:var(--ink)}

/* cta */
.cta{text-align:center;padding-top:150px;padding-bottom:150px}
.cta h2{font-size:clamp(32px,4.2vw,60px);letter-spacing:-.5px;margin:0;font-weight:700}
.cta p{margin:20px 0 0;font-size:17px;color:var(--mute-d)}
.cta .actions{display:flex;gap:14px;justify-content:center;margin-top:34px;flex-wrap:wrap}

/* footer */
.site-foot{padding:70px 0 56px;border-top:1px solid var(--line)}
body.theme-light .site-foot{border-top-color:var(--line-l)}
.foot-grid{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap}
.foot-brand{width:420px;max-width:100%}
.foot-brand img{width:170px;height:64px;object-fit:contain}
.foot-brand p{margin:16px 0 0;font-size:14px;line-height:1.7;color:var(--mute-d)}
body.theme-light .foot-brand p{color:var(--mute)}
.foot-col{display:flex;flex-direction:column;gap:14px;font-size:15px}
.foot-col a:hover{color:var(--blue-lit)}
body.theme-light .foot-col a:hover{color:var(--blue)}
.foot-col.dim a{color:var(--mute-d)}
.foot-col.dim a:hover{color:var(--blue-lit)}
.copyright{margin-top:56px;font-size:13px;color:#5A5A5A}
body.theme-light .copyright{color:#9A9A9A}

/* work page */
.page-title{padding-top:110px;padding-bottom:64px;display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.page-title h1{font-size:clamp(32px,6vw,76px);letter-spacing:-1px;margin:0;font-weight:700}
.page-title p{margin:0;max-width:460px;font-size:16px;line-height:1.8;color:var(--mute-d)}
body.theme-light .page-title p{color:var(--mute)}
.filters{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pill{padding:11px 22px;border-radius:999px;font-size:14px;background:#1A1A1A;color:var(--mute-d);transition:.18s}
.pill:hover{color:#fff;background:#242424}
.pill.on{background:#fff;color:var(--ink);font-weight:600}
body.theme-light .pill{background:#F2F2F2;color:var(--mute)}
body.theme-light .pill:hover{background:#E7E7E7;color:var(--ink)}
body.theme-light .pill.on{background:var(--blue);color:#fff}
.filters .count{margin-left:auto;font-size:14px;color:var(--mute)}
.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:64px;align-items:start}
.work-col{display:flex;flex-direction:column;gap:64px}
.work-col.offset{padding-top:110px}
.work-grid .proj .cover img{height:420px}

/* about */
.about-hero{padding-top:110px;padding-bottom:90px}
.about-hero h1{font-size:clamp(28px,5vw,64px);line-height:1.38;letter-spacing:-1px;margin:26px 0 0;font-weight:700}
.intro{display:grid;grid-template-columns:392px 1fr;gap:96px;padding-bottom:100px}
.intro .label{color:var(--blue-lit);font-size:13px;font-weight:600;letter-spacing:1px}
body.theme-light .intro .label{color:var(--blue)}
.intro .label + p{margin:12px 0 0;font-size:15px;line-height:1.8;color:var(--mute-d);white-space:pre-line}
.intro .body p{margin:0 0 24px;font-size:17px;line-height:1.9;color:#C9C9C9}
body.theme-light .intro .body p{color:#3A3A3A}
.team{padding-top:60px;padding-bottom:110px}
.team-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.facts h3{color:#fff}
.member img{height:420px}
.member .meta{display:flex;justify-content:space-between;align-items:center;margin-top:18px;gap:12px}
.member strong{font-size:20px}
.member span{font-size:13px;color:var(--mute)}
.facts{background:var(--ink2);padding:70px 0}
.facts .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.facts h3{margin:0 0 10px;font-size:24px;font-weight:700}
.facts p{margin:0;font-size:14px;line-height:1.7;color:var(--mute-d)}

/* news */
.news-list{margin-top:8px}
.news-item{display:grid;grid-template-columns:96px 1fr 20px;gap:56px;align-items:start;
  padding:30px 0;border-top:1px solid var(--line-l);transition:padding .2s}
.news-item:hover{padding-left:8px}
.news-item .date{font-size:14px;color:var(--mute);padding-top:6px}
.news-item h3{margin:0;font-size:24px;font-weight:600;line-height:1.45}
.news-item:hover h3{color:var(--blue)}
.news-item .arrow{font-size:20px;color:var(--ink);transition:transform .2s}
.news-item:hover .arrow{transform:translate(2px,-2px)}

/* contact */
.contact-body{display:grid;grid-template-columns:520px 1fr;gap:64px;padding-bottom:110px}
.contact-info{display:flex;flex-direction:column;gap:34px}
.info-block{border-top:1px solid #2A2A2A;padding-top:16px}
.info-block .k{font-size:13px;font-weight:600;letter-spacing:1px;color:var(--blue-lit)}
.info-block .v{margin-top:12px;font-size:22px;line-height:1.55;white-space:pre-line}
.contact-imgs{display:flex;flex-direction:column;gap:16px}
.contact-imgs .big img{height:360px}
.contact-imgs .pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact-imgs .pair img{height:240px}

/* responsive */
@media (max-width:1100px){
  .wrap{padding:0 48px}
  .duo,.duo.rev{grid-template-columns:1fr;gap:32px}
  .rows{gap:56px}
  .caps{grid-template-columns:1fr 1fr}
  .intro{grid-template-columns:1fr;gap:32px}
  .contact-body{grid-template-columns:1fr;gap:40px}
  .work-grid{grid-template-columns:1fr}
  .work-col.offset{padding-top:0}
  .clients{grid-template-columns:repeat(3,1fr)}
  .figure .cap{left:48px}
}
@media (max-width:760px){
  .wrap{padding:0 24px}
  .site-head .wrap{height:72px}
  .logo img{width:132px;height:52px}
  .nav{gap:18px;font-size:14px}
  .nav .btn{display:none}
  .announce .wrap{flex-direction:column;align-items:flex-start;gap:6px;height:auto;padding:10px 24px;font-size:12px;line-height:1.5}
  .nav{gap:14px}
  .logo img{width:116px;height:46px}
  .hero{padding:64px 0 56px}
  .figure img,.figure video{height:300px}
  .hero--video{min-height:calc(100svh - 120px);padding:110px 0 130px}
  .hero--video .cap{left:24px;bottom:28px}
  .hero--video .cap strong{font-size:16px}
  .hero--video .cap span{font-size:13px}
  .figure .cap{left:24px;bottom:24px}
  .section{padding:72px 0}
  .proj .cover img{height:auto;aspect-ratio:16/11}
  .work-grid .proj .cover img{height:auto;aspect-ratio:16/11}
  .section-head{flex-direction:column;align-items:flex-start;margin-bottom:36px}
  .caps{grid-template-columns:1fr}
  .clients{grid-template-columns:repeat(2,1fr);gap:12px}
  .client .mark{width:50px;height:50px;font-size:17px}
  .page-title{flex-direction:column;align-items:flex-start;padding:64px 0 36px}
  .team-row{grid-template-columns:1fr}
  .member img{height:auto;aspect-ratio:4/5}
  .facts{grid-template-columns:1fr;padding:48px 0}
  .news-item{grid-template-columns:1fr;gap:10px}
  .news-item .arrow{display:none}
  .news-item h3{font-size:20px}
  .contact-body{padding-bottom:64px}
  .cta{padding:88px 0}
  .foot-grid{flex-direction:column;gap:32px}
  .copyright{margin-top:32px}
}

/* ---------- mobile nav ---------- */
.menu-toggle{display:none;width:44px;height:44px;border:0;background:none;padding:0;
  flex-direction:column;justify-content:center;align-items:flex-end;gap:6px;cursor:pointer;
  color:inherit;-webkit-tap-highlight-color:transparent}
.menu-toggle span{display:block;height:2px;width:24px;background:currentColor;border-radius:2px;
  transition:transform .42s var(--ease),width .3s var(--ease)}
.menu-toggle.is-open span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.menu-toggle.is-open span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:70;background:var(--ink);
  display:flex;align-items:center;padding:96px 24px 40px;
  opacity:0;visibility:hidden;transform:translateY(-14px);
  transition:opacity .38s var(--ease),transform .46s var(--ease),visibility .38s}
.mobile-menu.open{opacity:1;visibility:visible;transform:none}
body.menu-open .site-head{z-index:80}
body.theme-light .mobile-menu{background:var(--paper)}
.mobile-nav{display:flex;flex-direction:column;gap:6px;width:100%}
.mobile-nav a{font-size:30px;font-weight:600;padding:9px 0;letter-spacing:-.2px}
.mobile-nav a.active{color:var(--blue-lit)}
body.theme-light .mobile-nav a.active{color:var(--blue)}
.mobile-nav .lang{font-size:15px;font-weight:400;color:var(--mute-d);margin-top:14px;padding:4px 0}
.mobile-nav .btn{margin-top:26px;align-self:flex-start;font-size:16px}
@media (max-width:760px){ .menu-toggle{display:flex} .nav{display:none} }
@media (hover:none){ .foot-col a{padding:7px 0} .nav a{padding:6px 0} }
@media (max-width:760px){
  .wrap{padding-left:calc(24px + env(safe-area-inset-left));
        padding-right:calc(24px + env(safe-area-inset-right))}
  .site-foot{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
  .menu-toggle{width:48px;height:48px}
}
@media (max-width:480px){
  .figure img,.figure video{height:230px}
  .mobile-nav a{font-size:26px}
  .hero p{font-size:15px}
  .client{padding:14px 6px}
}
html{-webkit-text-size-adjust:100%}

/* ---------- motion ---------- */
:root{--ease:cubic-bezier(.22,1,.36,1);--ease-io:cubic-bezier(.65,0,.35,1)}
html.js body{opacity:0;transition:opacity .5s var(--ease)}
html.js body.loaded{opacity:1}
body.leaving{opacity:0!important}

.progress{position:fixed;top:0;left:0;right:0;height:2px;background:var(--blue);
  transform:scaleX(0);transform-origin:0 50%;z-index:999;pointer-events:none;
  transition:transform .1s linear}

html.js .reveal{opacity:0;transform:translateY(30px);
  transition:opacity .95s var(--ease),transform .95s var(--ease)}
html.js .reveal.in{opacity:1;transform:none}

html.js .proj .cover{clip-path:inset(0 0 100% 0);transition:clip-path 1.15s var(--ease)}
html.js .proj.in .cover{clip-path:inset(0 0 0 0)}
html.js .proj.reveal{opacity:1;transform:none}

html.js .member img{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--ease)}
html.js .member.in img{clip-path:inset(0 0 0 0)}

/* hero entrance */
@keyframes riseIn{from{opacity:0;transform:translateY(28px);filter:blur(9px)}
  to{opacity:1;transform:none;filter:blur(0)}}
html.js .hero .eyebrow,html.js .hero h1,html.js .hero p,html.js .hero .actions,
html.js .page-title h1,html.js .page-title p,
html.js .about-hero .eyebrow,html.js .about-hero h1{
  animation:riseIn 1.05s var(--ease) both}
html.js .hero .eyebrow{animation-delay:.06s}
html.js .hero h1{animation-delay:.16s}
html.js .hero p{animation-delay:.30s}
html.js .hero .actions{animation-delay:.42s}
html.js .page-title h1{animation-delay:.06s}
html.js .page-title p{animation-delay:.18s}
html.js .about-hero .eyebrow{animation-delay:.06s}
html.js .about-hero h1{animation-delay:.14s}

/* nav underline */
.nav a:not(.btn):not(.lang){position:relative}
.nav a:not(.btn):not(.lang)::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .42s var(--ease)}
.nav a:not(.btn):not(.lang):hover::after{transform:scaleX(1);transform-origin:left}

/* magnetic buttons */
.mag{transition:transform .5s var(--ease)}
.btn:hover{transform:none}

/* parallax figure */
.figure{overflow:hidden}
html.js .figure img{height:calc(600px + 100px);position:relative;top:-50px;will-change:transform}
.figure video{display:block;width:100%;height:600px;object-fit:cover;background:#000}


/* micro interactions */
.proj .tag{transition:color .3s var(--ease),transform .3s var(--ease)}
.proj:hover .tag{transform:translateY(-2px)}
.news-item:hover{padding-left:10px}
.news-item h3{transition:color .3s var(--ease)}
.pill{transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.pill:hover{transform:translateY(-1px)}
.cap .num{transition:color .35s var(--ease)}
.cap:hover .num{color:var(--blue-lit)}
.figure .cap{transition:transform .8s var(--ease)}
.figure:hover .cap{transform:translateY(-6px)}

@media (prefers-reduced-motion:reduce){
  html.js body{opacity:1}
  html.js .reveal,html.js .proj .cover,html.js .member img{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  html.js .hero .eyebrow,html.js .hero h1,html.js .hero p,html.js .hero .actions,
  html.js .page-title h1,html.js .page-title p,html.js .about-hero .eyebrow,html.js .about-hero h1{animation:none!important}
  html.js .figure img{transform:none!important}
}