/* ==========================================================================
   四川优影科技有限公司 · 全站共用设计系统
   所有页面共享：令牌 / 排版 / 头部 / 页脚 / 区块 / 组件 / 响应式
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  --ink:#fafafa;          /* 主文字 */
  --muted:#a7a6a6;        /* 次要文字 */
  --nav:#b6b5b5;          /* 导航文字 */
  --strip:#8b8a8a;        /* 标注/小字 */
  --pill:#ffffff;         /* 主按钮填充 */
  --pill-ink:#050505;     /* 主按钮文字 */

  --bg:#050505;
  --bg-2:#08080a;         /* 交替区块底色 */
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.22);

  --ease:cubic-bezier(.22,1,.36,1);

  --sp-1:.5rem;  --sp-2:.75rem; --sp-3:1rem;  --sp-4:1.5rem;
  --sp-5:2rem;   --sp-6:2.75rem;--sp-7:4rem;  --sp-8:5.5rem;

  --hd-h:clamp(60px,7vh,74px);
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}

html{height:100%;scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  min-height:100%;
  background:var(--bg);
  color:var(--ink);
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
  overflow-x:hidden;
}

a{text-decoration:none;color:inherit}
ul,ol{list-style:none}
img,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}

::selection{background:rgba(255,255,255,.16)}

/* 焦点可见性（键盘用户） */
:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px}

/* 跳到主要内容 */
.skip-link{
  position:absolute;left:16px;top:-60px;z-index:99;
  background:#fff;color:#050505;border-radius:8px;
  padding:10px 18px;font-size:14px;font-weight:600;
  transition:top .25s var(--ease);
}
.skip-link:focus{top:16px}

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.wrap{max-width:1320px;margin:0 auto;padding:0 clamp(20px,4.2vw,64px)}
.wrap--narrow{max-width:900px}

.sec{position:relative;z-index:2;background:var(--bg);padding:clamp(64px,8.5vh,120px) 0}
.sec--alt{background:var(--bg-2)}
.sec--tight{padding-bottom:clamp(48px,6vh,80px)}

.sec-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:28px;flex-wrap:wrap;margin-bottom:clamp(30px,4.4vh,52px);
}
.kicker{
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--strip);margin-bottom:14px;
}
.sec-head h2{
  font-size:clamp(25px,3.1vw,44px);font-weight:400;
  letter-spacing:-.02em;line-height:1.16;max-width:24ch;
}
.sec-head > p{color:var(--muted);font-size:clamp(14px,1.1vw,16px);max-width:46ch}

.lead{color:var(--muted);font-size:clamp(15px,1.15vw,17.5px);line-height:1.9;max-width:58ch}

/* 通用文字链接 */
.link{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14.5px;font-weight:500;color:#e8e8ec;
  border-bottom:1px solid var(--line-2);padding-bottom:3px;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.link:hover{color:#fff;border-color:#fff}

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.pill{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;background:var(--pill);color:var(--pill-ink);
  font-weight:500;line-height:1;
  padding:15px 30px;font-size:15px;
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.pill:hover{transform:scale(1.03)}
.pill:active{transform:scale(.99)}
.pill--sm{padding:11px 22px;font-size:13.5px}

.ghost-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:15px;font-weight:500;color:#fff;
  transition:opacity .3s var(--ease);
}
.ghost-link:hover{opacity:.78}

/* --------------------------------------------------------------------------
   5. SITE HEADER（内页）
   -------------------------------------------------------------------------- */
.hd{
  position:sticky;top:0;z-index:40;
  background:rgba(5,5,5,.78);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.hd-in{
  height:var(--hd-h);
  display:flex;align-items:center;gap:clamp(16px,3vw,44px);
  max-width:1320px;margin:0 auto;padding:0 clamp(20px,4.2vw,64px);
}
.hd-brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.hd-mark{width:19px;height:29px}
.hd-name{font-size:15px;font-weight:500;letter-spacing:.01em;white-space:nowrap}

.hd-nav{display:flex;align-items:center;gap:clamp(16px,2.6vw,34px);margin-left:auto;font-size:14.5px}
.hd-nav a{color:var(--nav);transition:color .3s var(--ease);white-space:nowrap}
.hd-nav a:hover{color:var(--ink)}
.hd-nav a[aria-current="page"]{color:var(--ink)}

.hd-cta{flex:0 0 auto}

.hd-burger{
  display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:5.5px;width:44px;height:44px;margin-left:auto;
  border-radius:999px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  transition:background .3s var(--ease);
}
.hd-burger i{display:block;width:18px;height:1.7px;background:var(--ink);border-radius:2px;
  transition:transform .34s var(--ease)}
body.is-open .hd-burger i:nth-child(1){transform:translateY(3.6px) rotate(45deg)}
body.is-open .hd-burger i:nth-child(2){transform:translateY(-3.6px) rotate(-45deg)}

/* 移动端全屏菜单（内页） */
.mnav{
  display:block;position:fixed;inset:0;z-index:35;
  background:linear-gradient(180deg,rgba(5,5,5,.86),rgba(5,5,5,.97));
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  opacity:0;visibility:hidden;
  transition:opacity .42s var(--ease),visibility .42s var(--ease);
}
body.is-open .mnav{opacity:1;visibility:visible}
.mnav-in{height:100%;display:flex;flex-direction:column;
  padding:calc(var(--hd-h) + 28px) clamp(22px,6vw,40px) 40px}
.mnav-eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.mnav-list{display:flex;flex-direction:column}
.mnav-list a{
  display:flex;align-items:center;justify-content:space-between;
  font-size:max(24px,7vw);font-weight:500;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08);
}
.mnav-list a::after{content:"›";color:var(--muted);font-size:22px;line-height:1}
.mnav-foot{margin-top:auto;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.mnav-foot .pill{width:100%}

.mnav-eyebrow,.mnav-list li,.mnav-foot{
  opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
body.is-open .mnav-eyebrow{opacity:1;transform:none;transition-delay:.06s}
body.is-open .mnav-list li:nth-child(1){opacity:1;transform:none;transition-delay:.10s}
body.is-open .mnav-list li:nth-child(2){opacity:1;transform:none;transition-delay:.16s}
body.is-open .mnav-list li:nth-child(3){opacity:1;transform:none;transition-delay:.22s}
body.is-open .mnav-list li:nth-child(4){opacity:1;transform:none;transition-delay:.28s}
body.is-open .mnav-foot{opacity:1;transform:none;transition-delay:.34s}

/* --------------------------------------------------------------------------
   6. PAGE HERO（内页标题区）
   -------------------------------------------------------------------------- */
.phero{padding:clamp(52px,9vh,124px) 0 clamp(30px,4.5vh,58px)}
.phero h1{
  font-size:clamp(30px,4.6vw,60px);font-weight:400;
  letter-spacing:-.028em;line-height:1.08;max-width:22ch;
}
.phero .lead{margin-top:22px}
.phero--center{text-align:center}
.phero--center h1,.phero--center .lead{margin-left:auto;margin-right:auto}
.phero--center h1{max-width:26ch}

.crumb{font-size:13px;color:var(--strip);margin-bottom:18px}
.crumb a{transition:color .3s var(--ease)}
.crumb a:hover{color:var(--ink)}
.crumb span{margin:0 8px;opacity:.5}

/* --------------------------------------------------------------------------
   7. 作品网格 / 作品卡
   -------------------------------------------------------------------------- */
.wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.5vw,20px)}

.wk{
  position:relative;display:block;overflow:hidden;
  border-radius:clamp(14px,1.4vw,20px);
  border:1px solid var(--line);
  min-height:clamp(200px,26vh,300px);
  transition:transform .8s var(--ease),border-color .8s var(--ease);
}
.wgrid--tall .wk{min-height:clamp(240px,32vh,380px)}
.wk:hover{transform:translateY(-4px);border-color:var(--line-2)}
.wk .ph{position:absolute;inset:0;transition:transform 1.1s var(--ease)}
.wk:hover .ph{transform:scale(1.05)}
.wk .ph::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,5,5,0) 34%,rgba(5,5,5,.88) 100%);
}
.wk .m{position:absolute;left:0;right:0;bottom:0;padding:clamp(16px,1.8vw,24px)}
.wk .c{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#d2d2d8}
.wk h3{font-size:clamp(15px,1.35vw,20px);font-weight:500;letter-spacing:-.01em;margin-top:6px}
.wk .dur{font-size:12.5px;color:var(--muted);margin-top:6px}

/* 占位画面（替换为真实剧照时删除对应 class） */
.ph-a{background:linear-gradient(150deg,#1b1b20,#3b3b46 55%,#8f8f9d 140%)}
.ph-b{background:linear-gradient(150deg,#0e1418,#1d2f38 55%,#5d8691 140%)}
.ph-c{background:linear-gradient(150deg,#191320,#302045 55%,#7d63a8 140%)}
.ph-d{background:linear-gradient(150deg,#171310,#37301f 55%,#9d8a52 140%)}
.ph-e{background:linear-gradient(150deg,#0f1512,#1e3429 55%,#5f9a78 140%)}
.ph-f{background:linear-gradient(150deg,#171015,#392030 55%,#a05f80 140%)}
.ph-g{background:linear-gradient(150deg,#101620,#20304a 55%,#6d86b5 140%)}
.ph-h{background:linear-gradient(150deg,#1a1216,#3d2226 55%,#a56a6a 140%)}
.ph-i{background:linear-gradient(150deg,#0d1518,#173034 55%,#4f8a8a 140%)}

/* 分类筛选 */
.filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:clamp(26px,3.4vh,40px)}
.filter{
  border:1px solid rgba(255,255,255,.14);border-radius:999px;
  background:rgba(9,9,11,.55);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  padding:9px 18px;font-size:13.5px;color:var(--nav);
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.filter:hover{color:var(--ink);border-color:var(--line-2)}
.filter[aria-pressed="true"]{color:var(--pill-ink);background:var(--pill);border-color:var(--pill)}
.wk.is-hidden{display:none}

/* --------------------------------------------------------------------------
   8. 业务列表
   -------------------------------------------------------------------------- */
.svc-list{border-top:1px solid var(--line)}
.svc-row{
  display:grid;grid-template-columns:clamp(56px,7vw,104px) 1fr 1.5fr;
  gap:clamp(16px,2.4vw,40px);align-items:baseline;
  padding:clamp(20px,2.6vh,32px) 0;
  border-bottom:1px solid var(--line);
  transition:background .4s var(--ease);
}
.svc-row:hover{background:rgba(255,255,255,.02)}
.svc-row .n{font-size:12px;letter-spacing:.1em;color:var(--strip)}
.svc-row h3{font-size:clamp(17px,1.7vw,24px);font-weight:400;letter-spacing:-.015em}
.svc-row p{color:var(--muted);font-size:clamp(13.5px,1.05vw,15.5px);line-height:1.75}

/* 业务详情块（services 页） */
.svc-block{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);
  align-items:center;padding:clamp(36px,5vh,68px) 0;
  border-bottom:1px solid var(--line);
}
.svc-block:last-child{border-bottom:0}
.svc-block .idx{
  font-size:12px;letter-spacing:.2em;color:var(--strip);
  display:block;margin-bottom:16px;
}
.svc-block h3{font-size:clamp(21px,2.4vw,32px);font-weight:400;letter-spacing:-.02em;line-height:1.2}
.svc-block p{color:var(--muted);font-size:clamp(14px,1.1vw,16px);margin-top:16px;max-width:52ch}
.svc-block .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.svc-block .tags li{
  font-size:12.5px;color:var(--nav);border:1px solid var(--line);
  border-radius:999px;padding:5px 13px;
}
.svc-block .vis{
  border:1px solid var(--line);border-radius:18px;overflow:hidden;
  aspect-ratio:16/10;
}
.svc-block:nth-child(even) .media{order:-1}

/* --------------------------------------------------------------------------
   9. 关于
   -------------------------------------------------------------------------- */
.about-grid{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,4vw,64px);align-items:center;
}
.about-grid h2{font-size:clamp(24px,2.8vw,40px);font-weight:400;letter-spacing:-.022em;line-height:1.18;max-width:22ch}
.about-points{margin-top:clamp(20px,2.6vh,32px);border-top:1px solid var(--line)}
.about-points li{
  display:grid;grid-template-columns:auto 1fr;gap:16px;
  padding:clamp(14px,1.8vh,18px) 0;border-bottom:1px solid var(--line);
}
.about-points b{font-weight:500;font-size:14.5px;color:#e6e6ea;white-space:nowrap}
.about-points span{color:var(--muted);font-size:14px}
.about-visual{border:1px solid var(--line);border-radius:18px;overflow:hidden}
.about-visual .frame{aspect-ratio:4/3;background:linear-gradient(150deg,#101014,#20202c 60%,#34343f)}

/* 数据带 */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2.6vw,40px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(28px,4vh,46px) 0;
}
.stats .num{font-size:clamp(26px,3.2vw,46px);font-weight:300;letter-spacing:-.03em;line-height:1.1}
.stats .lbl{font-size:13px;color:var(--muted);margin-top:10px}

/* 团队/理念 三栏 */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px)}
.trio article h3{font-size:clamp(17px,1.6vw,21px);font-weight:500;margin-bottom:12px}
.trio article p{color:var(--muted);font-size:14.5px}
.trio .num{font-size:12px;letter-spacing:.2em;color:var(--strip);display:block;margin-bottom:18px}

/* 合作流程 */
.steps{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2.6vw,36px);
}
.step{padding-top:22px;border-top:1px solid var(--line-2)}
.step .n{font-size:12px;letter-spacing:.18em;color:var(--strip)}
.step h3{font-size:clamp(16px,1.5vw,20px);font-weight:500;margin:14px 0 10px}
.step p{color:var(--muted);font-size:14px}

/* --------------------------------------------------------------------------
   10. 作品详情
   -------------------------------------------------------------------------- */
.dhead{padding:clamp(34px,6vh,72px) 0 clamp(24px,3vh,40px)}
.dhead h1{
  font-size:clamp(28px,4vw,52px);font-weight:400;
  letter-spacing:-.025em;line-height:1.12;max-width:24ch;margin-top:18px;
}
.dhead .lead{margin-top:20px}
.dmeta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  gap:clamp(18px,2.6vw,36px);
  margin-top:clamp(28px,4vh,44px);padding-top:clamp(22px,3vh,32px);
  border-top:1px solid var(--line);
}
.dmeta .k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--strip)}
.dmeta .v{font-size:15px;font-weight:500;margin-top:8px}

.dgallery{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.4vw,18px);margin-block:clamp(32px,5vh,64px)}
.dgallery .shot{
  border-radius:clamp(12px,1.3vw,18px);border:1px solid var(--line);
  min-height:clamp(180px,24vh,260px);
  aspect-ratio:16/10;
}
.dgallery .shot:first-child{grid-column:1 / -1;aspect-ratio:21/9;min-height:clamp(240px,32vh,420px)}

.article{max-width:64ch}
.article h2{font-size:clamp(19px,2vw,26px);font-weight:500;letter-spacing:-.015em;margin:clamp(34px,4.4vh,52px) 0 14px}
.article h2:first-child{margin-top:0}
.article p{color:var(--muted);font-size:clamp(14.5px,1.15vw,16.5px);line-height:1.85}

.dnext{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:clamp(18px,3vw,40px);
  border:1px solid var(--line);border-radius:clamp(14px,1.5vw,22px);
  padding:clamp(24px,3.6vw,40px);
  margin-block:clamp(44px,7vh,90px);
  transition:border-color .5s var(--ease),background .5s var(--ease);
}
.dnext:hover{border-color:var(--line-2);background:rgba(255,255,255,.02)}
.dnext .k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--strip)}
.dnext h3{font-size:clamp(18px,2vw,26px);font-weight:400;letter-spacing:-.015em;margin-top:10px}

/* --------------------------------------------------------------------------
   11. 联系页
   -------------------------------------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(30px,5vw,80px)}
.cinfo{border-top:1px solid var(--line)}
.cinfo li{display:grid;gap:6px;padding:20px 0;border-bottom:1px solid var(--line)}
.cinfo .k{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--strip)}
.cinfo .v{font-size:16px;font-weight:500;color:#ececed}
.cinfo .v a:hover{color:#fff}
.cinfo .sub{font-size:13.5px;color:var(--muted)}

/* 联系页：可点击的联系渠道 + 沟通准备清单 */
.col-h{font-size:clamp(19px,2vw,24px);font-weight:500;letter-spacing:-.015em;margin-bottom:22px}

.cway{border-top:1px solid var(--line)}
.cway li{display:grid;gap:7px;padding:20px 0;border-bottom:1px solid var(--line)}
.cway-k{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--strip)}
.cway-v{font-size:17px;font-weight:500;color:#ececed;letter-spacing:-.005em}
a.cway-v{display:inline-block;transition:color .3s var(--ease),border-color .3s var(--ease);
  border-bottom:1px solid transparent}
a.cway-v:hover{color:#fff;border-bottom-color:var(--line-2)}
.cway-s{font-size:13.5px;color:var(--muted)}

.sub-h{margin-top:clamp(30px,4.4vh,46px);font-size:15px;font-weight:500;
  letter-spacing:-.01em;color:#ececed}
.prep{display:grid;gap:12px;margin-top:16px}
.prep li{position:relative;padding-left:23px;font-size:14.5px;line-height:1.75;color:var(--nav)}
.prep li::before{content:"";position:absolute;left:3px;top:.7em;width:5px;height:5px;
  border-radius:999px;background:#7a7a80}
.prep-note{margin-top:20px;font-size:13.5px;line-height:1.75;color:var(--strip)}

/* 说明：下方 .form 系列样式当前未被任何页面使用（假表单已撤除），
   保留以便将来接入第三方表单服务（金数据 / 腾讯问卷）或云函数时复用。 */

.form{display:grid;gap:18px}
.field{display:grid;gap:9px}
.field label{font-size:13px;color:var(--nav)}
.field input,.field textarea{
  width:100%;background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;font-size:15px;color:var(--ink);
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{color:#6f6f73}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--line-2);background:rgba(255,255,255,.07);
}

/* 胶囊选择器（替代原生 select，避免系统白色弹层与黑底冲突） */
.field fieldset{border:0;padding:0;margin:0}
.field legend{padding:0;font-size:13px;color:var(--nav)}
.field .hint{color:var(--strip);font-size:12.5px;margin-left:6px}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:11px}
.chip{position:relative;display:inline-flex}
.chip input{
  position:absolute;inset:0;width:100%;height:100%;
  margin:0;opacity:0;cursor:pointer;
}
.chip span{
  display:inline-block;
  border:1px solid var(--line);border-radius:999px;
  padding:9px 18px;font-size:13.5px;color:var(--nav);
  transition:color .3s var(--ease),border-color .3s var(--ease),
             background .3s var(--ease),transform .3s var(--ease);
}
.chip:hover span{color:var(--ink);border-color:var(--line-2)}
.chip input:checked + span{
  color:var(--pill-ink);background:var(--pill);border-color:var(--pill);
}
.chip input:focus-visible + span{outline:2px solid #fff;outline-offset:3px}
.field textarea{min-height:140px;resize:vertical;line-height:1.7}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form .foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:4px}
.form .note{font-size:12.5px;color:var(--strip)}
.form .sent{font-size:13.5px;color:#d8d8dc}

/* --------------------------------------------------------------------------
   12. CTA 区块
   -------------------------------------------------------------------------- */
.cta-band{
  position:relative;z-index:2;
  border-top:1px solid var(--line);
  padding:clamp(56px,8vh,110px) 0;
  background:var(--bg);
}
.cta-band h2{font-size:clamp(26px,3.6vw,50px);font-weight:400;letter-spacing:-.025em;line-height:1.12;max-width:20ch}
.cta-band p{color:var(--muted);margin-top:18px;max-width:46ch}
.cta-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:32px}

/* --------------------------------------------------------------------------
   13. FOOTER
   -------------------------------------------------------------------------- */
.ft{
  position:relative;z-index:2;background:rgba(5,5,5,.88);
  border-top:1px solid var(--line);
  padding:clamp(44px,6vh,72px) 0 clamp(26px,3.4vh,42px);
}
.ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(24px,3.4vw,48px)}
.ft-brand{display:flex;align-items:center;gap:11px;font-size:15px;font-weight:500}
.ft-mark{width:17px;height:26px}
.ft-note{color:var(--muted);font-size:13.5px;max-width:32ch;margin-top:16px;line-height:1.8}
.ft h4{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--strip);font-weight:500;margin-bottom:16px;
}
.ft nav{display:grid;gap:10px}
.ft nav a{color:#c3c3ca;font-size:13.5px;transition:color .3s var(--ease)}
.ft nav a:hover{color:#fff}
.ft-bottom{
  margin-top:clamp(34px,4.4vh,54px);padding-top:22px;
  border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  color:var(--strip);font-size:12.5px;
}

/* --------------------------------------------------------------------------
   14. 滚动入场（由 main.js 添加 .rv）
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  .rv{opacity:0;transform:translateY(20px);
      transition:opacity .9s var(--ease),transform .9s var(--ease)}
  .rv.is-in{opacity:1;transform:none}
}

/* --------------------------------------------------------------------------
   15. 作品页首屏：视频背景（与首页同款电影感）
   -------------------------------------------------------------------------- */
/* 全页固定背景（作品页）：图片铺满整页，压暗到很淡，只留氛围、不挡内容 */
.page-bg{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(5,5,5,.26) 0%,rgba(5,5,5,.34) 50%,rgba(5,5,5,.48) 100%),
    url("../whero.jpg") center top / cover no-repeat;
}

.whero{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:flex-end;
  min-height:clamp(360px,54vh,580px);
  border-bottom:1px solid var(--line);
}
.whero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(5,5,5,.34) 0%,rgba(5,5,5,.04) 46%,rgba(5,5,5,.14) 100%),
    linear-gradient(180deg,rgba(5,5,5,0) 0%,rgba(5,5,5,0) 40%,
      rgba(5,5,5,.22) 80%,rgba(5,5,5,.74) 100%);
}
.whero-in{padding:clamp(84px,14vh,168px) 0 clamp(34px,5.5vh,68px)}
.whero h1{
  font-size:clamp(32px,5vw,64px);font-weight:400;
  letter-spacing:-.028em;line-height:1.06;max-width:22ch;
}
.whero .lead{margin-top:20px;text-shadow:0 1px 22px rgba(0,0,0,.55)}
.whero .crumb{text-shadow:0 1px 14px rgba(0,0,0,.6)}

@media (max-width:620px){
  .whero{min-height:clamp(300px,46vh,440px)}
  .whero-in{padding:clamp(62px,12vh,110px) 0 clamp(28px,5vh,48px)}
}

/* --------------------------------------------------------------------------
   15. 作品页：批量网格 / 加载更多 / 弹层预览
   -------------------------------------------------------------------------- */
.wgrid--many{grid-template-columns:repeat(auto-fill,minmax(min(252px,100%),1fr));
  grid-auto-flow:dense;
  gap:clamp(24px,2.6vh,38px) clamp(14px,1.4vw,22px)}

/* 作品卡（索引式：画面在上、信息在下；每 5 个一张宽卡形成节奏） */
.wcard{display:flex;flex-direction:column;height:100%;min-width:0}
.wcard--wide{grid-column:span 2;grid-row:span 2}
.wcard-fig{
  position:relative;display:block;overflow:hidden;background:#0b0b0e;
  border-radius:clamp(12px,1.1vw,16px);border:1px solid var(--line);
  aspect-ratio:16/10;
  transition:border-color .6s var(--ease);
}
.wcard--wide .wcard-fig{aspect-ratio:auto;flex:1;min-height:0}
.wcard-fig img,.wcard-fig .ph{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.15s var(--ease);
}
.wcard:hover .wcard-fig img,.wcard:hover .wcard-fig .ph{transform:scale(1.045)}
.wcard:hover .wcard-fig{border-color:var(--line-2)}

/* 占位画面：叠一层细斜纹，避免"塑料渐变"感 */
.wcard-fig .ph::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,
    rgba(255,255,255,.03) 0 1px,transparent 1px 8px);
}

.wcard-no{
  position:absolute;left:clamp(12px,1.1vw,16px);top:clamp(11px,1vw,15px);
  font-size:11.5px;letter-spacing:.15em;font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,.8);text-shadow:0 1px 10px rgba(0,0,0,.6);
}

.wcard-m{display:block;padding:clamp(13px,1.2vw,17px) 2px 0;min-width:0}
.wcard-top{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;margin-bottom:8px}
.wcard-m .c{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--strip);min-width:0;flex:0 1 auto}
.wcard-m .dur{font-size:12px;color:var(--strip);text-align:right;
  min-width:0;flex:0 1 auto}
.wcard-m h3{
  display:inline;font-size:clamp(14.5px,1.25vw,17px);font-weight:500;
  letter-spacing:-.01em;color:#ececed;line-height:1.45;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 1px;
  transition:background-size .55s var(--ease),color .3s var(--ease);
}
.wcard:hover .wcard-m h3{color:#fff;background-size:100% 1px}

@media (max-width:720px){
  .wcard--wide{grid-column:auto;grid-row:auto}
  .wcard--wide .wcard-fig{aspect-ratio:16/10;flex:none}
}
@media (max-width:560px){
  .wcard-top{display:block}
  .wcard-m .dur{display:block;text-align:left;margin-top:5px}
}

.wk .cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease)}
.wk:hover .cover{transform:scale(1.05)}

.wk .play,.wcard .play{position:absolute;top:clamp(12px,1.2vw,16px);right:clamp(12px,1.2vw,16px);
  width:34px;height:34px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  background:rgba(5,5,5,.55);border:1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.wk .play::after,.wcard .play::after{content:'';margin-left:2px;border-style:solid;
  border-width:6px 0 6px 10px;border-color:transparent transparent transparent #fff}

.filter .n{margin-left:7px;font-size:11.5px;opacity:.6}

.more-row{display:flex;justify-content:center;margin-top:clamp(26px,3.6vh,44px)}
.more{
  border:1px solid var(--line-2);border-radius:999px;background:transparent;cursor:pointer;
  padding:13px 34px;font-size:14.5px;color:var(--ink);font-family:inherit;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.more:hover{background:var(--pill);color:var(--pill-ink);border-color:var(--pill)}
.more[hidden]{display:none}

.lb{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  padding:clamp(14px,3vw,46px);background:rgba(4,4,5,.92);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.lb[hidden]{display:none}
.lb-body{width:min(1040px,100%);max-height:100%;overflow:auto;background:var(--bg-2);
  border:1px solid var(--line);border-radius:clamp(14px,1.6vw,22px)}
.lb-media{position:relative;aspect-ratio:16/9;background:#0b0b0e;overflow:hidden;
  border-radius:clamp(14px,1.6vw,22px) clamp(14px,1.6vw,22px) 0 0}
.lb-media img,.lb-media video{display:block;width:100%;height:100%;object-fit:cover}
.lb-media iframe{display:block;width:100%;height:100%;border:0}
.lb-info{padding:clamp(18px,2.4vw,30px)}
.lb-info .c{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#d2d2d8}
.lb-info h3{font-size:clamp(17px,2vw,24px);font-weight:500;letter-spacing:-.01em;margin-top:8px}
.lb-meta{font-size:13px;color:var(--muted);margin-top:8px}
.lb-desc{font-size:14.5px;color:var(--nav);margin-top:14px}
.lb-desc[hidden]{display:none}
.lb-close,.lb-nav{position:absolute;width:44px;height:44px;border-radius:999px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--ink);
  background:rgba(255,255,255,.06);border:1px solid var(--line-2);
  font-family:inherit;font-size:19px;line-height:1;
  transition:background .3s var(--ease)}
.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.18)}
.lb-close{top:clamp(14px,2.2vw,26px);right:clamp(14px,2.2vw,26px);font-size:16px}
.lb-nav{top:50%;transform:translateY(-50%);font-size:24px}
.lb-prev{left:clamp(8px,1.4vw,18px)}
.lb-next{right:clamp(8px,1.4vw,18px)}
.lb-nav[hidden]{display:none}
body.lb-open{overflow:hidden}

/* --------------------------------------------------------------------------
   15. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width:1100px){
  .svc-block{grid-template-columns:1fr;gap:26px}
  .svc-block:nth-child(even) .media{order:0}
  .contact-grid{grid-template-columns:1fr}
  .trio{grid-template-columns:1fr;gap:30px}
  .stats{grid-template-columns:repeat(2,1fr);gap:28px}
}

@media (max-width:980px){
  .wgrid{grid-template-columns:repeat(2,1fr)}
  .svc-row{grid-template-columns:clamp(44px,7vw,72px) 1fr;gap:12px 20px}
  .svc-row p{grid-column:2}
  .about-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr);gap:26px}
  .ft-grid{grid-template-columns:1fr 1fr;gap:30px}
  .dgallery{grid-template-columns:1fr}
  .dgallery .shot:first-child{grid-column:auto;aspect-ratio:16/9}
}

@media (max-width:820px){
  .hd-nav,.hd-cta{display:none}
  .hd-burger{display:flex}
}

@media (max-width:620px){
  .wgrid{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .form .row{grid-template-columns:1fr}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001s!important;transition-duration:.001s!important}
}