/* Figma Desktop 6:2 / 1440×4550。流式内容保持 1200px 阅读宽度。 */
* { box-sizing:border-box; }
html { scroll-behavior:smooth; overscroll-behavior:none; background:#faf9f5; scrollbar-width:none; }
html::-webkit-scrollbar { display:none; }
body { margin:0; color:#27272a; background:#faf9f5; font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif; -webkit-font-smoothing:antialiased; overflow-x:clip; overscroll-behavior:none; }
p,h1,h2,figure { margin:0; }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; color:inherit; border:0; margin:0; padding:0; cursor:pointer; }
button:disabled { cursor:default; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
button:focus-visible,a:focus-visible { outline:2px solid #60b2ff; outline-offset:4px; }
.mobile-only { display:none; }
.section-container { width:min(1200px,calc(100% - 40px)); margin-inline:auto; }
.section-label { height:20px; color:#707078; font-size:13px; font-weight:500; line-height:16px; }
h2 { font-size:44px; font-weight:600; line-height:55px; }
section[id],footer[id] { scroll-margin-top:72px; }
/* 关于我按背景上边缘定位，紧贴56px固定导航，不保留上一板块留白。 */
#about { scroll-margin-top:56px; }
.glass { background:rgba(39,39,42,.84); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.site-header { position:fixed; inset:0 0 auto; z-index:40; }
.site-header nav { position:relative; display:flex; align-items:center; justify-content:space-between; height:56px; padding-inline:56px; color:#fff; }
.site-logo :is(img,video) { width:49px; height:24px; object-fit:contain; transform:translateY(-2px); }
.desktop-links { position:absolute; left:calc(50% - 2px); transform:translateX(-50%); display:flex; gap:35px; font-size:14px; font-weight:500; line-height:20px; }
.desktop-links a { width:80px; }
.contact-link { display:grid; place-items:center; width:94px; height:34px; margin-right:30px; border-radius:17px; background:#fff; color:#27272a; font-size:13px; font-weight:500; line-height:16px; }
#mobileQuickNav { display:none; }
/* 恢复V1的810px首屏背景上限；宽屏不能按vw把首屏向下无限撑长。
   较矮窗口为卡片、引导和留白预留100px，保证重点项目完整可见。 */
#hero { --video-height:min(810px,calc(100vh - 100px)); --intro-unit:min(1px,calc((100vh - 100px) / 810)); position:relative; height:calc(var(--video-height) + 128px); }
@supports(height:100svh) { #hero { --video-height:min(810px,calc(100svh - 100px)); --intro-unit:min(1px,calc((100svh - 100px) / 810)); } }
#heroImageFallback,#heroVideo,.hero-shade { position:absolute; inset:0 0 auto; width:100%; height:var(--video-height); background-size:cover; background-position:center; object-fit:cover; }
#heroVideo { transition:opacity .5s; }
.hero-shade { background:rgba(39,39,42,.13); }
/* 超出底边 1px，避免小数像素取整露出视频边线。 */
.hero-gradient { position:absolute; inset:auto 0; top:calc(var(--video-height) - 261px); height:268px; background:linear-gradient(180deg,rgba(250,249,245,0),#faf9f5); }
.hero-content { position:relative; height:100%; color:#fff; }
.hero-intro { position:absolute; top:calc(150 * var(--intro-unit)); left:50%; transform:translateX(-50%); text-align:center; }
.hero-title { width:calc(379 * var(--intro-unit)); height:calc(162 * var(--intro-unit)); font-weight:500; }
.hero-eyebrow { display:block; font-size:clamp(11px,calc(15 * var(--intro-unit)),15px); line-height:calc(18 * var(--intro-unit)); white-space:nowrap; }
.hero-title-art { position:relative; display:block; width:100%; height:calc(133 * var(--intro-unit)); margin-top:calc(11 * var(--intro-unit)); overflow:hidden; }
.hero-title-art :is(img,video) { position:absolute; bottom:0; left:0; width:100%; height:auto; max-width:none; }
.hero-typewriter { height:24px; margin-top:calc(20 * var(--intro-unit)); font-size:clamp(12px,calc(15 * var(--intro-unit)),15px); font-weight:500; line-height:24px; white-space:pre; }
#heroCards { position:absolute; top:calc(var(--video-height) - 185px); left:50%; display:grid; grid-template-columns:repeat(3,minmax(0,300px)); justify-content:center; gap:24px; width:min(948px,calc(100% - 40px)); transform:translateX(-50%); }
.hero-card { position:relative; width:100%; aspect-ratio:300/215; border-radius:20px; }
.hero-card [data-select-hero] { display:block; width:100%; height:100%; background:transparent; }
.hero-card :is(img,video) { width:100%; height:100%; object-fit:cover; }
.hero-detail-cta { position:absolute; left:50%; bottom:20px; display:grid; place-items:center; width:94px; height:34px; padding:0; border-radius:17px; background:rgba(255,255,255,.8); color:#27272a; font-size:13px; font-weight:500; line-height:16px; white-space:nowrap; opacity:0; visibility:hidden; pointer-events:none; transform:translate(-50%,6px); transition:opacity .2s,transform .2s,visibility .2s; }
.hero-card.is-selected .hero-detail-cta:not(:disabled) { opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); }
#heroPagination { display:none; }
.hero-more { position:absolute; top:calc(var(--video-height) + 61px); left:50%; display:flex; align-items:center; gap:8px; transform:translateX(-50%); color:#707078; font-size:15px; line-height:19px; white-space:nowrap; }
.hero-more :is(img,video) { width:18px; height:18px; transform:rotate(90deg); }
#aigc { padding:0 0 98px; }
#aigc > .section-label { height:16px; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-top:4px; }
.section-heading > p { padding-bottom:7px; color:#707078; font-size:15px; line-height:19px; }
.aigc-area { margin-top:35px; }
.aigc-default { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
#aigcTileGrid { grid-column:1/-1; position:relative; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); grid-template-rows:repeat(2,auto); gap:24px; margin-top:20px; }
.aigc-tile { position:relative; width:100%; aspect-ratio:180/181; border-radius:20px; background:#fff; }
.aigc-tile img { width:100%; height:100%; object-fit:cover; }
.aigc-preview { position:absolute; top:0; left:0; width:calc((100% - 48px) / 3); height:100%; border-radius:20px; background:#fff; pointer-events:none; opacity:0; transition:opacity .2s; z-index:2; }
.aigc-preview img { width:100%; height:100%; object-fit:cover; }
.aigc-tile-grid.has-preview .aigc-preview { opacity:1; }
.aigc-tile-grid.has-preview .aigc-tile:is(:nth-child(1),:nth-child(2),:nth-child(7),:nth-child(8)) { opacity:0; }
#works { padding-bottom:96px; }
.works-heading { display:flex; justify-content:space-between; align-items:flex-end; }
#works [role="tablist"] { display:flex; gap:14px; padding-bottom:7px; }
.filter-tab { display:grid; place-items:center; width:112px; height:38px; border:1px solid #e0ded6; border-radius:19px; background:#faf9f5; font-size:13px; font-weight:500; line-height:16px; }
.filter-tab[aria-selected="true"] { border-color:#27272a; background:#27272a; color:white; }
.works-viewport { position:relative; width:100vw; margin-left:calc((min(1200px,100vw - 40px) - 100vw) / 2); margin-top:39px; }
#projectGrid { display:flex; gap:24px; overflow-x:auto; padding:0 max(20px,calc((100vw - 1200px) / 2)); scroll-padding-inline:max(20px,calc((100vw - 1200px) / 2)); scroll-snap-type:x proximity; cursor:grab; touch-action:pan-x pan-y; overscroll-behavior-x:none; }
#projectGrid.is-dragging { cursor:grabbing; scroll-snap-type:none; }
.project-card { position:relative; flex:0 0 auto; width:auto; height:600px; border-radius:20px; }
.works-controls { display:flex; align-items:center; justify-content:flex-end; height:19px; gap:6px; margin-top:24px; color:#707078; font-size:15px; line-height:19px; }
.works-controls button { width:18px; height:18px; background:transparent; }
.works-controls :is(img,video) { width:18px; height:18px; }
@media(min-width:768px) { #worksNext { width:19px; height:11px; } #worksNext img { width:auto; height:auto; max-width:none; } }
#worksPrevious { display:none; }
.works-empty { display:grid; place-items:center; min-height:120px; color:#707078; }
.about-section { position:relative; height:calc(100vw * 854 / 1440); background:#04040f; color:white; overflow:hidden; }
.about-background { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.about-layout { position:relative; height:100%; }
.about-heading { position:absolute; top:calc(100vw * 69 / 1440); left:0; }
.about-heading .section-label { color:white; }
.about-heading h2 { font-size:52px; font-weight:700; line-height:65px; }
.about-desktop-content,.about-stats { display:none; }
@media(min-width:768px) {
  /* 桌面保留画板854px高度与1200px内容宽度，不随宽屏放大正文与照片。 */
  #about.about-section { height:854px; }
  .about-background { object-fit:cover; }
  .about-heading { top:69px; }
  .about-desktop-content { position:absolute; top:188px; left:0; right:0; display:grid; grid-template-columns:minmax(0,478fr) minmax(0,490fr); column-gap:clamp(40px,calc(100vw - 1208px),232px); }
  .about-copy { padding-top:8px; font-family:"PingFang SC","Microsoft YaHei",sans-serif; font-size:15px; font-weight:400; line-height:24px; }
  .about-copy > div + div { margin-top:24px; }
  .about-photos { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:start; }
  .about-photo { position:relative; width:100%; aspect-ratio:3/4; border-radius:20px; overflow:hidden; }
  .about-photo :is(img,video) { position:absolute; max-width:none; }
  /* 使用Figma原始照片及相同裁切坐标；不重复导出已存在的照片资产。 */
  .about-photo-portrait :is(img,video) { width:143.26%; height:143.58%; left:-38.28%; top:-36.95%; }
  .about-photo-diving :is(img,video) { width:879.94%; height:369.65%; left:-389.81%; top:-111.27%; }
  .about-photo-travel :is(img,video) { width:288.41%; height:289.1%; left:-50.39%; top:-108.32%; }
  .about-sticker { position:absolute; z-index:1; top:107.792px; left:-76.804px; width:135.133px; height:82.063px; max-width:none; transform:rotate(14.69deg); }
  .about-stats { position:absolute; top:585px; left:0; right:0; display:grid; grid-template-columns:373fr 460fr 367fr; height:212px; font-family:"PingFang SC","Microsoft YaHei",sans-serif; }
  .about-divider-horizontal { position:absolute; top:-.25px; left:0; max-width:none; }
  .about-divider-vertical { position:absolute; top:0; max-width:none; }
  .about-divider-first { left:calc(100% * 373 / 1200 - .25px); }
  .about-divider-second { left:calc(100% * 833 / 1200 - .25px); }
  .about-stat { min-width:0; padding:24px 24px 0; }
  .about-stat:first-of-type { padding-left:0; }
  .about-stat:last-of-type { padding-right:0; }
  .about-stat-label { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:15px; line-height:24px; white-space:nowrap; }
  .about-stat-label span:last-child { opacity:.4; }
  .about-stat-value { margin-top:24px; font-size:100px; line-height:140px; letter-spacing:-6px; white-space:nowrap; }
}
@media(min-width:768px) and (max-width:1100px) {
  .about-sticker { left:-20px; width:90px; height:auto; }
  .about-stat-value { font-size:clamp(60px,7vw,77px); letter-spacing:-4px; }
  .about-stat-label { font-size:13px; }
}
#clients { padding:84px 0 104px; color:white; background:black; overflow:hidden; }
#clients .section-label { color:white; }
.marquee { height:270px; margin-top:53px; overflow:hidden; }
.marquee-track { display:flex; width:max-content; animation:marquee var(--marquee-duration,45s) linear infinite; }
.client-group { display:flex; flex:none; align-items:center; }
.client-group > .client-media { display:block; width:auto; height:270px; max-width:none; flex:none; }
@keyframes marquee { to { transform:translateX(-50%); } }
.marquee:hover .marquee-track { animation-play-state:paused; }
#contact { height:331px; background:black; color:white; }
.contact-layout { position:relative; height:100%; }
.icp-record { position:absolute; left:0; right:0; bottom:16px; color:#aaa; text-align:center; font-size:12px; line-height:20px; }
.icp-record:hover { color:#fff; }
#contact .section-label { color:white; }
#contact h2 { font-size:52px; line-height:65px; }
.contact-field { position:absolute; top:183px; display:flex; align-items:center; gap:8px; height:24px; font-size:13px; font-weight:500; line-height:16px; white-space:nowrap; }
.contact-mail { left:3px; }
.contact-phone { left:526px; }
.contact-field button { display:block; width:24px; height:24px; padding:0; flex:none; background:transparent; }
.copy-icon { position:relative; display:block; width:100%; height:100%; }
.copy-icon::before,.copy-icon::after { content:""; position:absolute; width:50%; height:50%; border:1.5px solid; border-radius:3px; background:black; }
.copy-icon::before { top:18.75%; left:31.25%; border-color:#d5b25b; }
.copy-icon::after { top:31.25%; left:18.75%; border-color:#60ffe7; }
.contact-qr { position:absolute; top:20px; right:0; width:150px; text-align:center; }
.contact-qr :is(img,video) { width:150px; height:150px; border-radius:5px; }
.contact-qr figcaption { margin-top:17px; font-size:15px; line-height:16px; white-space:nowrap; }
#copyFeedback { position:absolute; left:0; top:225px; color:#60ffe7; font-size:12px; }
.horizontal-scroll,.modal-panel { scrollbar-width:none; -ms-overflow-style:none; }
.horizontal-scroll::-webkit-scrollbar,.modal-panel::-webkit-scrollbar { display:none; }
.modal { position:fixed; inset:0; z-index:80; pointer-events:none; visibility:hidden; }
.modal.is-open { pointer-events:auto; visibility:visible; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.55); opacity:0; transition:opacity .25s; }
.modal.is-open .modal-backdrop { opacity:1; }
.modal-panel { position:absolute; inset:56px 0 0; height:calc(100dvh - 56px); overflow-y:auto; overscroll-behavior:none; background:#faf9f5; border-radius:32px 32px 0 0; transform:translateY(110%); transition:transform .35s cubic-bezier(.22,1,.36,1); }
.modal.is-open .modal-panel { transform:translateY(0); }
.modal-close { position:fixed; top:11px; right:44px; z-index:5; display:grid; place-items:center; width:34px; height:34px; padding:0; border:1px solid #d4d4d8; border-radius:50%; background:rgba(255,255,255,.94); }
.modal-close span { position:relative; display:block; width:14px; height:14px; }
.modal-close span::before,.modal-close span::after { content:""; position:absolute; top:50%; left:50%; width:16px; height:1.5px; background:#27272a; border-radius:1px; transform:translate(-50%,-50%) rotate(45deg); }
.modal-close span::after { transform:translate(-50%,-50%) rotate(-45deg); }
.detail-sequence { width:100%; margin:0; padding:0; font-size:0; line-height:0; }
.detail-sequence > img,.detail-sequence > video { display:block; width:100%; height:auto; max-width:100%; margin:0; padding:0; border:0; border-radius:0; object-fit:contain; }
.modal[data-kind="aigc-tile"] .modal-panel { top:50%; left:50%; right:auto; bottom:auto; width:min(calc(100vw - 40px),480px); height:auto; max-height:calc(100dvh - 120px); background:transparent; border-radius:20px; overflow:visible; transform:translate(-50%,calc(-50% - 24px)); }
.modal[data-kind="aigc-tile"] #modalContent { overflow:hidden; border-radius:20px; background:#fff; }
.modal[data-kind="aigc-tile"] #modalContent :is(img,video) { display:block; width:100%; height:auto; object-fit:contain; }
.modal[data-kind="aigc-tile"] .modal-close { position:absolute; top:calc(100% + 16px); left:50%; right:auto; transform:translateX(-50%); width:36px; height:36px; }
/* 缩放的是内容宽度，放大后原生横/纵向滚动；关闭按钮不跟随变大。 */
.media-zoom-viewport { overflow:auto; overscroll-behavior:none; touch-action:pan-x pan-y; scrollbar-width:none; }
.modal-panel.media-zoom-viewport { overflow:auto; }
.media-zoom-surface { min-width:100%; max-width:none; }
.tile-preview-viewport { width:100%; max-height:calc(100dvh - 180px); overflow:auto; overscroll-behavior:none; scrollbar-width:none; }
.media-zoom-viewport::-webkit-scrollbar,.tile-preview-viewport::-webkit-scrollbar { display:none; }
.aigc-preview .tile-preview-viewport { height:100%; max-height:none; }
.aigc-tile-grid.has-preview .aigc-preview { pointer-events:auto; }
.aigc-preview .detail-sequence > :is(img,video) { height:auto; max-width:100%; object-fit:contain; }
.tile-cover { display:block; width:100%; height:100%; object-fit:cover; }
.media-zoom-reset { position:fixed; left:20px; top:11px; z-index:6; height:34px; padding:0 12px; border:1px solid #d4d4d8; border-radius:17px; background:rgba(255,255,255,.94); color:#27272a; font-size:12px; }
.media-zoom-reset[hidden] { display:none; }
video { pointer-events:none; }
video::-webkit-media-controls,video::-webkit-media-controls-enclosure { display:none!important; }
@media(min-width:768px) and (max-width:1100px) { .contact-phone { left:42%; } .section-heading > p { max-width:350px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; } }