/* ============================================================
   案例详情页 · 区块库
   两层结构共用的积木：
     标准案例页 —— 按固定顺序组合这些区块
     精品案例页 —— 自由组合顺序与节奏，不够用时在页面内加专属区块
   依赖 aw.css 的 Design Tokens（颜色 / 字阶 / 圆角 / 容器 / 节奏），
   本文件只定义区块，不重复定义 token。
   ============================================================ */

/* 区块之间的默认节奏，比首页的 --sec-gap 略紧，长阅读更连贯 */
.case-sec { margin-top: clamp(56px, 9vw, 132px); }
.case-sec--tight { margin-top: clamp(32px, 5vw, 64px); }

/* ============================================================
   1. 首屏 · 满幅主视觉 + 覆盖标题
   ============================================================ */
.case-hero {
  position: relative;
  margin-top: calc(-1 * (var(--header-h) + 8px));
  min-height: 78svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ground);
  isolation: isolate;
}
.case-hero__media { position: absolute; inset: 0; z-index: 0; }
.case-hero__media img,
.case-hero__media video,
.case-hero__media svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.case-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(248,248,248,.88) 0%, rgba(248,248,248,.2) 22%, rgba(248,248,248,0) 44%),
    linear-gradient(0deg, rgba(248,248,248,.92) 0%, rgba(248,248,248,.6) 26%, rgba(248,248,248,0) 58%);
}
/* 深色主视觉时换这一层：给 .case-hero 加 .case-hero--dark */
.case-hero--dark .case-hero__scrim {
  background:
    linear-gradient(180deg, rgba(12,13,16,.72) 0%, rgba(12,13,16,.18) 24%, rgba(12,13,16,0) 46%),
    linear-gradient(0deg, rgba(12,13,16,.86) 0%, rgba(12,13,16,.45) 30%, rgba(12,13,16,0) 62%);
}
.case-hero--dark .case-hero__inner { color: #fff; }
.case-hero--dark .case-meta { color: rgba(255,255,255,.72); }
.case-hero--dark .case-meta .sep { background: rgba(255,255,255,.45); }

.case-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: clamp(40px, 6vw, 88px);
  color: var(--ink);
}
.case-hero__title {
  font-size: clamp(34px, 6.2vw, 96px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
  max-width: 18ch;
}
.case-hero__sub {
  margin-top: 16px;
  max-width: 46ch;
  font-size: 18px;
  font-weight: 300;
  line-height: 27px;
  color: var(--mut);
}
.case-hero--dark .case-hero__sub { color: rgba(255,255,255,.72); }

/* 元信息行：标签 · 行业 · 年份 */
.case-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
  color: var(--mut);
}
.case-meta b { color: var(--ink); font-weight: 500; }
.case-hero--dark .case-meta b { color: #fff; }
.case-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--mut-2); }

/* ============================================================
   2. 项目信息表（客户 / 行业 / 服务 / 周期 / 团队）
   ============================================================ */
.case-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 0.5px solid var(--line);
}
.case-facts > div {
  padding: 26px 0 0;
  border-right: 0.5px solid var(--line);
  padding-right: 24px;
}
.case-facts > div:last-child { border-right: 0; }
.case-facts dt { font-size: 13px; font-weight: 300; line-height: 20px; color: var(--mut); }
.case-facts dd { margin-top: 6px; font-size: 16px; font-weight: 500; line-height: 24px; }
.case-facts dd small { display: block; margin-top: 2px; font-size: 13px; font-weight: 300; color: var(--mut); }

@media (max-width: 860px) {
  .case-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .case-facts > div:nth-child(2n) { border-right: 0; padding-right: 0; }
}

/* ============================================================
   3. 导语 / 章节标题
   ============================================================ */
.case-lead {
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.015em;
  max-width: 24ch;
  text-wrap: balance;
}
.case-kicker {
  display: block;
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
  color: var(--mut);
}

/* 正文两栏：左小标题 + 右正文 */
.case-body {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 20px 60px;
  align-items: start;
}
.case-body h3 { font-size: 20.6px; font-weight: 600; line-height: 28px; }
.case-body p {
  font-size: 16px;
  font-weight: 300;
  line-height: 30px;
  color: rgba(34, 34, 34, 0.82);
  max-width: 62ch;
}
.case-body p + p { margin-top: 18px; }
.case-body ul { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.case-body li {
  position: relative;
  padding-left: 18px;
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
  color: rgba(34, 34, 34, 0.82);
}
.case-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

@media (max-width: 860px) {
  .case-body { grid-template-columns: 1fr; gap: 14px; }
}

/* ============================================================
   4. 成果数据
   ============================================================ */
.case-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  padding-top: 30px;
  border-top: 0.5px solid var(--line);
}
.case-metrics b {
  display: block;
  font-size: clamp(32px, 3.4vw, 52px);
  font-weight: 600;
  line-height: 1.08;
  font-variant-numeric: tabular-nums;
}
.case-metrics b i { font-style: normal; color: var(--violet); }
.case-metrics span {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 300;
  line-height: 22px;
  color: var(--mut);
  max-width: 22ch;
}
@media (max-width: 760px) {
  .case-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
}

/* ============================================================
   5. 媒体区块
     --full   满幅出血
     --wide   容器宽
     --duo    两图并排
     --split  图文左右（加 --flip 换边）
   ============================================================ */
.case-media { border-radius: var(--r-media); overflow: hidden; background: var(--ink); }
.case-media img,
.case-media video,
.case-media svg { width: 100%; height: 100%; object-fit: cover; display: block; }

.case-media--full {
  margin-inline: calc(var(--pad) * -1);
  border-radius: 0;
}

.case-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-x); }
.case-duo--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.case-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.case-split--flip > .case-media { order: 2; }
.case-split__text h3 { font-size: 24px; font-weight: 600; line-height: 32px; }
.case-split__text p {
  margin-top: 14px;
  font-size: 16px;
  font-weight: 300;
  line-height: 30px;
  color: rgba(34, 34, 34, 0.82);
}

@media (max-width: 860px) {
  .case-duo, .case-duo--3, .case-split { grid-template-columns: 1fr; }
  .case-split--flip > .case-media { order: 0; }
}

/* 图注 */
.case-cap {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 300;
  line-height: 20px;
  color: var(--mut);
}

/* ============================================================
   6. 流程步骤
   ============================================================ */
.case-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.case-step { padding-top: 22px; border-top: 1px solid var(--ink); }
.case-step b {
  display: block;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--mut-2);
}
.case-step h4 { margin-top: 12px; font-size: 18px; font-weight: 600; line-height: 26px; }
.case-step p {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 300;
  line-height: 24px;
  color: var(--mut);
}
@media (max-width: 860px) { .case-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; } }
@media (max-width: 520px) { .case-steps { grid-template-columns: 1fr; } }

/* ============================================================
   7. 引言（客户评价 / 关键结论）
   ============================================================ */
/* 折行宽度写在 blockquote 上，不写在 figure 上：figure 继承的是 body 的 14px，
   在它身上写 ch 会按 14px 解析，一句话被压成五六行。 */
.case-quote blockquote {
  max-width: 14em;
  font-size: clamp(24px, 3vw, 42px);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.case-quote figcaption {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 300;
  color: var(--mut);
}
.case-quote figcaption b { font-weight: 500; color: var(--ink); }

/* ============================================================
   8. 界面走查 / 设计系统展示
   ============================================================ */
.case-spec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-x) var(--gap-x); }
.case-spec figure { display: flex; flex-direction: column; gap: 12px; }
.case-spec .case-media { aspect-ratio: 4 / 3; }
.case-spec figcaption { font-size: 14px; font-weight: 300; line-height: 22px; color: var(--mut); }
.case-spec figcaption b { display: block; font-weight: 500; color: var(--ink); }
@media (max-width: 860px) { .case-spec { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .case-spec { grid-template-columns: 1fr; } }

/* 色板 / 组件小样 */
.case-swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.case-swatch {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  border: 0.5px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mut);
}
.case-swatch i { width: 22px; height: 22px; border-radius: 50%; flex: none; }

/* ============================================================
   9. 下一个案例
   ============================================================ */
.case-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(28px, 4vw, 56px) 0;
  border-top: 0.5px solid var(--line);
}
.case-next small { display: block; font-size: 13px; font-weight: 300; color: var(--mut); }
.case-next strong {
  display: block;
  margin-top: 6px;
  font-size: clamp(22px, 2.6vw, 38px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.case-next__thumb {
  width: 180px;
  aspect-ratio: 4 / 3;
  flex: none;
  border-radius: var(--r-media);
  overflow: hidden;
  background: var(--ink);
}
.case-next__thumb svg, .case-next__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 620px) { .case-next__thumb { width: 108px; } }

/* ============================================================
   10. 详情页实际采用的首屏形态（亮底文字首屏 + 满幅主视觉带）
   为什么不用上面那个 .case-hero：顶栏是黑标黑字且随页面滚动，
   深色主视觉压到顶栏下面会让标志与导航读不出来。所以巨标留在
   亮底上（与全站一致），深色主视觉改为紧随其后的满幅出血带。
   需要压字主视觉时，.case-hero 仍然可用，见 docs/case-blocks.html。
   ============================================================ */
.case-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 36px;
  font-size: 13px;
  font-weight: 300;
  line-height: 20px;
  color: var(--mut);
}
.case-top a { border-bottom: 1px solid transparent; }
.case-top a:hover { color: var(--ink); border-bottom-color: var(--line); }
.case-top i { font-style: normal; color: var(--mut-2); }

.case-head { padding-top: clamp(22px, 3vw, 44px); }
.case-head__title {
  font-size: clamp(32px, 5vw, 76px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.035em;
  max-width: 17ch;
  text-wrap: balance;
}
.case-head__sub {
  margin-top: 20px;
  max-width: 44ch;
  font-size: 18px;
  font-weight: 300;
  line-height: 30px;
  color: var(--mut);
}

/* 满幅主视觉带：图出血到视口两边，图注回到容器内 */
.case-band { margin-top: clamp(32px, 5vw, 64px); }
.case-band .case-media { aspect-ratio: 21 / 9; }
@media (max-width: 760px) { .case-band .case-media { aspect-ratio: 16 / 10; } }

/* 线稿图解用：白底发丝线，与深色界面图形成节奏对比 */
.case-media--plain { background: var(--card); box-shadow: inset 0 0 0 0.5px var(--line); }

/* 页尾行动区 */
.case-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: clamp(28px, 4vw, 52px);
  border-top: 0.5px solid var(--line);
}
.case-cta h3 {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.02em;
  /* 中文用 em 更好预估：1em = 1 个汉字宽，20ch 只有 10 个字，会把短句切断 */
  max-width: 15em;
}
.case-cta__acts { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   11. 详情页 v2 · tools/build-cases.py 生成的 C01–C25
   结构：巨标头部 → 满幅主视觉带（视差）+ 浮层客户卡 → 侧栏章节导航
         01 客户（滚动点亮导语 · 事实表 · 头部客户大数字）
         02 课题 · 03 交付（进度线时间轴）· 04 作品（设备框 + 图组）
         同类案例 → 下一个案例 → 标识构造 → CTA
   图片槽位统一用 .cs-slot，进场是「圆角框展开 + 图微缩到位」；
   没有真图的槽位由生成器放一张 .cs-art 示意图形（深墨底 + 细网格 + 线框），
   替换方法见 docs/案例配图槽位.md。
   ============================================================ */
.cs { --cs-gap: clamp(64px, 9vw, 140px); }

/* ---------- 阅读进度：顶端 2px，紫罗兰 → 青柠 ---------- */
.cs-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--violet), var(--accent));
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  pointer-events: none;
}

/* ---------- 头部 ---------- */
.cs-head {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 18px 60px;
  align-items: end;
  padding-top: clamp(22px, 3vw, 44px);
}
.cs-head__meta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.cs-chip {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 0.5px var(--line);
  font-size: 13px;
  font-weight: 400;
  color: var(--mut);
  white-space: nowrap;
}
.cs-tier {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 11px 0 9px;
  border-radius: 999px;
  background: var(--violet);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.cs-tier i {
  width: 6px;
  height: 6px;
  border-radius: 1.5px;
  background: var(--accent);
  flex: none;
}
.cs-tier em { font-style: normal; font-family: var(--mono); font-size: 10.5px; opacity: 0.72; letter-spacing: 0.08em; }
.cs-tier--a { background: rgba(94, 106, 210, 0.11); color: var(--violet); }
.cs-tier--a i { background: var(--violet); }

.cs-head__title {
  font-size: clamp(40px, 6.6vw, 108px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.cs-head__aside { padding-bottom: 0.4em; }
.cs-head__sub {
  font-size: clamp(18px, 1.55vw, 24px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.01em;
  max-width: 22em;
  text-wrap: balance;
}
.cs-head__sub b { font-weight: 500; color: var(--violet); }
.cs-head__pos {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 300;
  line-height: 24px;
  color: var(--mut);
}

@media (max-width: 860px) {
  .cs-head { grid-template-columns: 1fr; gap: 14px; }
  .cs-head__aside { padding-bottom: 0; }
}

/* ---------- 图片槽位 ---------- */
.cs-slot {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-media);
  background: #0e1013;
  isolation: isolate;
}
.cs-slot > picture,
.cs-slot > picture > img,
.cs-slot > img,
.cs-slot > svg { display: block; width: 100%; height: 100%; }
.cs-slot img { object-fit: cover; transition: transform 1.2s var(--ease); }
.cs-slot--4x3  { aspect-ratio: 4 / 3; }
.cs-slot--16x9 { aspect-ratio: 16 / 9; }
.cs-slot--16x10 { aspect-ratio: 16 / 10; }
.cs-slot--wide { aspect-ratio: 21 / 9; }
@media (max-width: 760px) { .cs-slot--wide { aspect-ratio: 16 / 10; } }

/* 进场：从内缩 7% 的圆角框展开到满框，图从 1.08 缩回 1 */
.cs-slot[data-reveal] {
  opacity: 1;
  transform: none;
  clip-path: inset(7% round 12px);
  transition: clip-path 1.05s var(--ease);
  transition-delay: var(--d, 0s);
}
.cs-slot[data-reveal] img { transform: scale(1.08); }
.cs-slot[data-reveal].is-in { clip-path: inset(0 round var(--r-media)); }
.cs-slot[data-reveal].is-in img { transform: none; }
.no-js .cs-slot[data-reveal] { clip-path: none; }
.no-js .cs-slot[data-reveal] img { transform: none; }

/* 聚光：跟随指针的一层柔光，只在悬停时出现 */
.cs-slot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.13), transparent 62%);
  transition: opacity 0.45s var(--ease);
}
@media (hover: hover) { .cs-slot:hover::after { opacity: 1; } }

/* 槽位角标：白胶囊 + 青柠小方块，等宽字标注槽位与比例 */
.cs-slot__tag {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(1.4) blur(3px);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.02em;
  color: var(--ink);
  white-space: nowrap;
}
.cs-slot__tag i { width: 5px; height: 5px; border-radius: 1px; background: var(--accent); flex: none; }

.cs-fig { margin: 0; }
.cs-fig figcaption {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 300;
  line-height: 20px;
  color: var(--mut);
}
.cs-fig figcaption b { font-weight: 500; color: var(--ink); margin-right: 8px; }

/* ---------- 示意图形（无真图时的槽位内容） ---------- */
.cs-art { width: 100%; height: 100%; display: block; }
.cs-art .sweep { transform-box: view-box; transform-origin: var(--cx) var(--cy); animation: csSweep 8s linear infinite; }
.cs-art .pulse { animation: artPulse 3.6s ease-in-out infinite; }
.cs-art .scan { animation: csScan 5.2s cubic-bezier(0.6, 0, 0.2, 1) infinite; }
.cs-art .blink { animation: artBlink 2.3s steps(1, end) infinite; }
.cs-art .bar { transform-box: fill-box; transform-origin: left; animation: csBar 4.8s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes csSweep { to { transform: rotate(360deg); } }
@keyframes csScan { 0% { transform: translateY(0); } 50% { transform: translateY(var(--travel, 160px)); } 100% { transform: translateY(0); } }
@keyframes csBar { 0%, 100% { transform: scaleX(0.55); } 50% { transform: scaleX(1); } }

/* ---------- 主视觉带 + 浮层客户卡 ---------- */
.cs-hero { position: relative; margin-top: clamp(30px, 4.4vw, 60px); }
.cs-slot--hero {
  aspect-ratio: 2 / 1;
  max-height: 76vh;
  border-radius: 0;
}
.cs-slot--hero[data-reveal] { clip-path: inset(0 7% round 0); }
.cs-slot--hero[data-reveal].is-in { clip-path: inset(0 0 round 0); }
/* 直接子选择器：否则会输给上面 .cs-slot > picture > img 的 height:100%，底部露出一条黑边 */
.cs-slot--hero > picture > img,
.cs-slot--hero > img {
  position: absolute;
  left: 0;
  top: -9%;
  width: 100%;
  height: 118%;
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}
.cs-slot--hero[data-reveal] img { transform: translate3d(0, var(--py, 0px), 0) scale(1.06); transition: transform 0s; }
.cs-slot--hero[data-reveal].is-in img { transform: translate3d(0, var(--py, 0px), 0); }
@media (max-width: 760px) { .cs-slot--hero { aspect-ratio: 4 / 3; } }

.cs-client {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 14px 18px;
  align-items: center;
  width: min(100%, 580px);
  margin-top: clamp(-36px, -4.6vw, -78px);
  padding: 22px 24px 20px;
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 18px 48px -18px rgba(0, 0, 0, 0.18);
}
.cs-logo {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #f0f0f2;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  overflow: hidden;
}
.cs-logo img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.cs--s .cs-logo { background: var(--violet); color: #fff; }
.cs--a .cs-logo { background: rgba(94, 106, 210, 0.11); color: var(--violet); }
.cs-client__name b { display: block; font-size: 17px; font-weight: 600; line-height: 24px; }
.cs-client__name small { display: block; margin-top: 2px; font-size: 13px; font-weight: 300; line-height: 20px; color: var(--mut); }
.cs-creds {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding-top: 14px;
  border-top: 0.5px solid var(--line);
}
.cs-creds li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 18px;
  color: var(--ink);
}
.cs-creds li::before { content: ""; width: 6px; height: 6px; border-radius: 1.5px; background: var(--accent); flex: none; }
.cs-creds li:nth-child(2)::before { background: var(--violet); }
.cs-creds li:nth-child(3)::before { background: var(--ink); opacity: 0.35; }

@media (max-width: 760px) {
  .cs-client { margin-top: 16px; width: 100%; padding: 18px 18px 16px; }
}

/* ---------- 侧栏章节导航 + 正文列 ---------- */
.cs-layout {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 0 64px;
  align-items: start;
  margin-top: var(--cs-gap);
}
.cs-rail { position: sticky; top: 28px; padding-left: 18px; }
.cs-rail__track {
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--line);
}
.cs-rail__track i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, var(--violet), var(--accent));
  transform: scaleY(var(--p, 0));
  transform-origin: top;
}
.cs-rail ol { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.cs-rail a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  line-height: 26px;
  color: var(--mut-2);
  transition: color 0.35s var(--ease);
}
.cs-rail a i { font-family: var(--mono); font-style: normal; font-size: 11px; width: 20px; flex: none; }
.cs-rail a:hover { color: var(--ink); }
.cs-rail a[aria-current="true"] { color: var(--ink); }
.cs-rail a[aria-current="true"] i { color: var(--violet); }
.cs-rail__foot {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 0.5px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 18px;
  color: var(--mut-2);
}
.cs-rail__foot b { display: block; font-weight: 400; color: var(--ink); }

@media (max-width: 1100px) {
  .cs-layout { grid-template-columns: 1fr; }
  .cs-rail { display: none; }
}

/* ---------- 章节通用 ---------- */
.cs-sec + .cs-sec { margin-top: var(--cs-gap); }
.cs-sec { scroll-margin-top: 40px; }
.cs-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  color: var(--mut);
}
.cs-kicker b { font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: 0.06em; color: var(--violet); }
.cs-kicker::after { content: ""; flex: 1; height: 0.5px; background: var(--line); }

.cs-lede.lede {
  font-size: clamp(24px, 2.85vw, 44px);
  line-height: 1.28;
  max-width: 24ch;
  margin: 0 0 30px;
}

.cs-h2 {
  font-size: clamp(24px, 2.6vw, 40px);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.025em;
  max-width: 22ch;
  text-wrap: balance;
}
.cs-text { max-width: 62ch; }
.cs-text p {
  font-size: 16px;
  font-weight: 300;
  line-height: 30px;
  color: rgba(34, 34, 34, 0.82);
}
.cs-text p + p { margin-top: 16px; }
.cs-h2 + .cs-text { margin-top: 18px; }

/* 01 客户：左文右图 */
.cs-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 28px 60px;
  align-items: start;
}
.cs-cols__media { position: sticky; top: 28px; }
@media (max-width: 860px) {
  .cs-cols { grid-template-columns: 1fr; }
  .cs-cols__media { position: static; }
}

/* 事实表：白卡 + 发丝线 */
.cs-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
  margin-top: 26px;
  padding: 18px 20px;
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: inset 0 0 0 0.5px var(--line);
}
.cs-facts > div { min-width: 0; }
.cs-facts dt { font-size: 12px; font-weight: 300; line-height: 18px; color: var(--mut); }
.cs-facts dd { margin-top: 2px; font-size: 15px; font-weight: 500; line-height: 22px; overflow-wrap: anywhere; }

/* 头部客户大数字行 */
.cs-stats {
  display: grid;
  grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
  gap: var(--gap-x);
  margin-top: 44px;
  padding-top: 26px;
  border-top: 0.5px solid var(--line);
}
.cs-stat { position: relative; padding-bottom: 14px; }
.cs-stat::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--ease);
  transition-delay: var(--d, 0s);
}
.cs-stat.is-in::after { transform: scaleX(1); }
.cs-stat:last-child::after { background: var(--violet); }
.cs-stat > b {
  display: block;
  font-size: clamp(28px, 3vw, 46px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.cs-stat > b em { font-style: normal; font-size: 0.5em; font-weight: 500; margin-right: 0.12em; color: var(--mut); }
.cs-stat > b i { font-style: normal; font-size: 0.55em; color: var(--violet); margin-left: 0.06em; }
.cs-stat > span {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 300;
  line-height: 20px;
  color: var(--mut);
  max-width: 22ch;
}
@media (max-width: 760px) { .cs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; } }

/* 03 交付：复用关于页的时间轴（.story / .beat），这里只调节奏 */
.cs-story.story { margin-top: 0; --rail-x: 118px; }
.cs-story .beat { grid-template-columns: 96px 44px minmax(0, 1fr) 64px; }
.cs-story .beat__year em { font-size: 11px; letter-spacing: 0.08em; }
.cs-story .beat__body h3 { font-weight: 600; }
.cs-story .beat__n { white-space: nowrap; }
@media (max-width: 860px) {
  .cs-story.story { --rail-x: 4px; }
  .cs-story .beat { grid-template-columns: minmax(0, 1fr) 56px; }
}

/* 04 作品：主屏 + 两图并排 */
.cs-work { display: grid; gap: var(--gap-x); }
.cs-work__duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-x); align-items: start; }
@media (max-width: 760px) { .cs-work__duo { grid-template-columns: 1fr; } }

/* 设备框：深墨壳 + 圆角屏 + 一颗青柠指示灯，指针经过时掠过一道高光
   （2026-09-06 起不再随指针倾斜——用户不要倾斜效果） */
.cs-device { position: relative; }
.cs-device__frame {
  position: relative;
  padding: 14px 14px 22px;
  border-radius: 18px;
  background: #0e1013;
  box-shadow: 0 40px 70px -40px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.cs-device__frame .cs-slot { border-radius: 8px; background: #15171d; }
.cs-device__led {
  position: absolute;
  right: 24px;
  bottom: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.cs-device__glare {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.07) 50%, rgba(255, 255, 255, 0) 58%);
  transform: translateX(var(--gx, -40%));
  transition: transform 0.6s var(--ease);
}
/* .cs-tilt / .cs-tilt-wrap：生成的包裹层，2026-09-06 起不再旋转，留空占位 */

/* 同类案例：三张作品卡（复用 .card-slide） */
.cs-related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-x); }
@media (max-width: 860px) { .cs-related { grid-template-columns: 1fr; } }

/* 减少动效 / 无 JS：全部直接给成品 */
@media (prefers-reduced-motion: reduce) {
  .cs-progress { display: none; }
  .cs-slot[data-reveal] { clip-path: none; transition: none; }
  .cs-slot[data-reveal] img { transform: none; transition: none; }
  .cs-slot--hero img { transform: none; }
  .cs-slot::after { display: none; }
  .cs-art .sweep, .cs-art .pulse, .cs-art .scan, .cs-art .blink, .cs-art .bar { animation: none; }
  .cs-stat::after { transform: scaleX(1); transition: none; }
  .cs-device__glare { display: none; }
}
.no-js .cs-stat::after { transform: scaleX(1); }
.no-js .cs-progress, .no-js .cs-rail__track { display: none; }

/* ============================================================
   视觉化改造（2026-09-05）
   四个章节眉题各自上色配 emoji，事实清单的字段名配 emoji。
   全部走 id / nth-child 选择器，25 个生成页面一行 HTML 都不用动
   （案例页由 tools/build-cases.py 生成，手改会被覆盖）。
   ============================================================ */
.cs-kicker b {
  padding: 2px 9px;
  border-radius: 6px;
  background: var(--vb-b, var(--grey));
  color: var(--vb-f, var(--ink));
  font-weight: 500;
}
.cs-kicker::before {
  content: var(--cs-emo, "▪️");
  margin-right: 2px;
  font-size: 14px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  transition: transform 0.44s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-block;
}
.cs-sec:hover .cs-kicker::before { transform: rotate(-12deg) scale(1.18); }

#client { --vb-b: var(--vb-lime-b);   --vb-f: var(--vb-lime-f);   --cs-emo: "🏭"; }
#brief  { --vb-b: var(--vb-violet-b); --vb-f: var(--vb-violet-f); --cs-emo: "🎯"; }
#scope  { --vb-b: var(--vb-sky-b);    --vb-f: var(--vb-sky-f);    --cs-emo: "📦"; }
#work   { --vb-b: var(--vb-amber-b);  --vb-f: var(--vb-amber-f);  --cs-emo: "🖼️"; }

/* 事实清单：总部 / 行业 / 合作方式，顺序由 build-cases.py 固定 */
.cs-facts dt::before {
  content: var(--f-emo, "▪️");
  margin-right: 7px;
  font-size: 12px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.cs-facts > div:nth-child(1) { --f-emo: "📍"; }
.cs-facts > div:nth-child(2) { --f-emo: "🏭"; }
.cs-facts > div:nth-child(3) { --f-emo: "🤝"; }
.cs-facts > div:nth-child(4) { --f-emo: "🗓️"; }

/* 章节标题下的正文：加粗处加一道青柠底纹 */
.cs-text p b { background: linear-gradient(transparent 64%, rgba(217, 242, 79, 0.5) 64%); padding: 0 1px; }

@media (prefers-reduced-motion: reduce) {
  .cs-kicker::before { transition: none; }
}

/* ============================================================
   12. 案例列表页 v2（2026-09-06 重排）

   改掉的三件事：
     · 首屏原来是一个英文巨标「Works」+ 一段灰字，没有信息量 —— 换成
       中文编辑体大标题 + 一句立场 + 四个数字，一眼知道这页有什么
     · 卡片原来是「封面 + 20px 名字 + 一行灰色小标签」，客户是谁、牛在哪
       全看不出来 —— 名称提到 34px，客户地位做成胶囊，再给一句话总结
     · 25 张一模一样的卡平铺 —— 按客户地位分成两个合集：
       头部客户（S/A，11 家）用两栏大卡，其余合作（14 家）用三栏紧凑卡

   分级来源：tools/cases-profile.json 的 tier（S 全球头部 / A 行业头部 / B 专精）
   一句话来源：cases-data.json 的 intro（客户是谁），不新写文案

   2026-09-08：上面第三条的「按客户地位分两个合集」已经作废 —— 客户地位只说明
   我们服务过谁，说明不了我们能做哪几件事。现在按六条服务线分段，见下面「12.6」段。
   卡片样式（.card-work）原样留用，两栏大卡的规则只剩每段头卡在用。
   ============================================================ */

/* ---------- 12.1 首屏 ---------- */
.works-hero { margin-top: 46px; }
.works-hero__top {
  display: grid; gap: 22px 40px;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: end;
}
.works-hero h1 {
  margin: 4px 0 0;
  font-size: clamp(34px, 5.1vw, 68px);
  font-weight: 500; line-height: 1.06; letter-spacing: -0.035em;
  color: var(--ink);
}
.works-hero h1 em {
  font-style: normal; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, transparent 62%, var(--accent) 62%);
  padding: 0 0.06em;
}
.works-hero__lead {
  font: 400 clamp(14.5px, 1.35vw, 17px)/1.65 var(--font);
  color: rgba(34, 34, 34, 0.72); max-width: 46ch;
}
.works-hero__lead b { font-weight: 500; color: var(--ink); }

/* 四个数字：紧跟首屏，作为「这页有多少东西」的目录 */
.works-nums {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px; margin-top: 40px;
  border-top: 1px solid var(--line); padding-top: 20px;
}
.works-nums div { display: grid; gap: 4px; }
.works-nums b {
  font: 500 clamp(28px, 3.8vw, 44px)/1 var(--font);
  letter-spacing: -0.035em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.works-nums b i { font-style: normal; color: var(--violet); }
/* 数字本体也是 span（data-count 挂在它身上），不隔离的话会被下面那条标签规则吃掉 */
.works-nums b span { font: inherit; letter-spacing: inherit; color: inherit; }
.works-nums > div > span { font: 400 13px/1.45 var(--font); color: rgba(34, 34, 34, 0.62); }
@media (max-width: 820px) {
  .works-hero__top { grid-template-columns: 1fr; }
  .works-nums { grid-template-columns: repeat(2, 1fr); gap: 22px 18px; }
}

/* ---------- 12.2 行业筛选条 ----------
   吸顶跟着顶栏走：向下滚（正在读卡片）顶栏一藏，这条也一起收上去把屏幕让干净；
   向上滚一下两条一起回来。原先它自己钉死在 --header-h+8，顶栏藏了它还悬在半空，
   86% 的半透底又把下面卡片的字透上来 —— 就是「一直悬浮在这里挡着读」那个。
   底色换成实色地色，下沿留一段渐隐，卡片从底下滑过去不切出硬边。 */
.works-filter {
  position: sticky; top: calc(var(--header-h) + 8px); z-index: 12;
  display: flex; flex-wrap: wrap; gap: 7px;
  margin-top: 34px; padding: 11px 0 12px;
  background: var(--ground);
  transition: transform 0.42s var(--ease), opacity 0.28s var(--ease);
}
.works-filter::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%;
  height: 14px; pointer-events: none;
  background: linear-gradient(var(--ground), rgba(248, 248, 248, 0));
}
/* 顶栏藏起来 → 这条跟着收上去：自身高 + 顶栏高 + 呼吸位，整条滚出视口顶。
   .is-stuck 由 works.js 在「条已经吸住」时才挂：不加这层门，向下滚第一次经过它
   本来那一行时也会被一起藏掉，这排胶囊就永远露不出来。
   不支持 :has() 的老内核退回一直吸顶，不会坏。 */
body:has(.header-main.is-hidden) .works-filter.is-stuck {
  transform: translateY(calc(-100% - var(--header-h) - 16px));
  opacity: 0; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .works-filter { transition: none; }
}
.works-filter__b {
  font: 400 13.5px/1 var(--font); color: rgba(34, 34, 34, 0.66);
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 14px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  transition: color 0.22s var(--ease), border-color 0.22s var(--ease),
              background 0.22s var(--ease);
}
.works-filter__b:hover { color: var(--ink); border-color: rgba(34, 34, 34, 0.34); }
.works-filter__b u {
  text-decoration: none; font-variant-numeric: tabular-nums;
  font-size: 11.5px; color: var(--mut-2);
}
.works-filter__b[aria-pressed="true"] {
  color: #fff; background: var(--ink); border-color: var(--ink);
}
.works-filter__b[aria-pressed="true"] u { color: rgba(255, 255, 255, 0.6); }
/* 头部客户那一颗给紫罗兰，跟卡片上的 S 角标同色，说明是同一件事 */
.works-filter__b[data-f="top"][aria-pressed="true"] {
  background: var(--violet); border-color: var(--violet);
}

/* 合集标题：编号 + 中文名 + 计数，比 sec__head 更紧 */
.works-group { margin-top: 58px; }
.works-group__h {
  display: flex; align-items: flex-end; gap: 12px 24px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 26px;
  border-bottom: 1px solid var(--ink);
}
.works-group__h h2 {
  font: 500 clamp(19px, 2.2vw, 25px)/1.2 var(--font);
  letter-spacing: -0.02em; color: var(--ink); margin: 0;
}
/* 合集计数胶囊：紧跟标题，筛选时由 works.js 改数字 */
.works-group__n {
  font: 500 12px/1 var(--mono); letter-spacing: 0.04em;
  color: var(--ink); background: var(--accent);
  border-radius: 999px; padding: 6px 10px; margin-bottom: 2px;
  font-variant-numeric: tabular-nums;
}
.works-group__h p {
  font: 400 13px/1.5 var(--font); color: rgba(34, 34, 34, 0.62);
  margin: 0 0 1px auto; max-width: 46ch; text-align: right; flex: 0 1 auto;
}
.works-group__h p b { font-weight: 500; color: var(--ink); }
@media (max-width: 700px) { /* 合集计数胶囊：紧跟标题，筛选时由 works.js 改数字 */
.works-group__n {
  font: 500 12px/1 var(--mono); letter-spacing: 0.04em;
  color: var(--ink); background: var(--accent);
  border-radius: 999px; padding: 6px 10px; margin-bottom: 2px;
  font-variant-numeric: tabular-nums;
}
.works-group__h p { margin-left: 0; text-align: left; } }

/* ---------- 12.3 头部客户大卡（两栏） ---------- */
.works-flag {
  display: grid; gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.card-work {
  position: relative; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-card); overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform 0.44s var(--ease), box-shadow 0.44s var(--ease),
              border-color 0.44s var(--ease);
}
.card-work:hover {
  transform: translateY(-4px);
  border-color: rgba(34, 34, 34, 0.2);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.1);
}
/* 生成的封面统一是 1200×896（4:3）。用 16:9 会把画面上沿的大字和下沿的物件一起切掉，
   所以媒体框直接跟着源图比例走，不裁 */
.card-work__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--grey); }
.card-work__media img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.7s var(--ease); }
.card-work:hover .card-work__media img { transform: scale(1.045); }

/* 客户地位角标：压在封面左上，S 紫罗兰 / A 墨色 */
.card-work__tier {
  position: absolute; left: 13px; top: 13px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 11.5px/1 var(--font); letter-spacing: 0.01em;
  color: #fff; background: var(--ink);
  border-radius: 999px; padding: 7px 11px;
}
.card-work__tier::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.card-work[data-tier="S"] .card-work__tier { background: var(--violet); }

.card-work__body { display: flex; flex-direction: column; gap: 0; padding: 22px 24px 24px; flex: 1; }
.card-work__no {
  font: 400 11.5px/1 var(--mono); letter-spacing: 0.08em;
  color: var(--mut-2); text-transform: uppercase;
}
/* 名称是这张卡的主角：34px / 中等字重 / 收紧字距 */
.card-work__name {
  margin: 9px 0 0;
  font: 500 clamp(25px, 2.7vw, 34px)/1.12 var(--font);
  letter-spacing: -0.035em; color: var(--ink);
}
.card-work__name span { font-size: 0.52em; letter-spacing: -0.01em; color: var(--mut-2); margin-left: 8px; }
/* 一句话「牛在哪」：地位胶囊 */
.card-work__id {
  align-self: flex-start; margin-top: 11px;
  font: 500 12.5px/1 var(--font); color: var(--ink);
  background: var(--accent); border-radius: 999px; padding: 8px 12px;
}
.card-work[data-tier="B"] .card-work__id {
  background: transparent; border: 1px solid var(--line);
  color: rgba(34, 34, 34, 0.7); font-weight: 400;
}
.card-work__punch {
  margin: 15px 0 0;
  font: 400 15px/1.62 var(--font); color: rgba(34, 34, 34, 0.78);
}
.card-work__creds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 15px; }
.card-work__creds i {
  font: 400 11.5px/1 var(--font); font-style: normal; color: rgba(34, 34, 34, 0.62);
  border: 1px solid var(--line); border-radius: 5px; padding: 6px 9px;
}
/* 我们做了什么：青柠竖线，与客户自己的介绍区分开 */
.card-work__did {
  margin-top: auto; padding: 13px 0 0 13px;
  border-left: 2px solid var(--accent);
  font: 400 13.5px/1.55 var(--font); color: rgba(34, 34, 34, 0.66);
}
.card-work__did em {
  display: block; font-style: normal; font-weight: 500; font-size: 11.5px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--mut-2); margin-bottom: 3px;
}
.card-work__go {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 18px;
  font: 500 13.5px/1 var(--font); color: var(--ink);
}
.card-work__go svg { width: 11px; height: 11px; transition: transform 0.34s var(--ease); }
.card-work__go svg path { stroke: currentColor; stroke-width: 1.7; fill: none; }
.card-work:hover .card-work__go svg { transform: translate(3px, -3px); }

/* 单数时最后一张铺满一行，改成横向排版 —— 免得留一个空格子 */
.works-flag > .card-work:last-child:nth-child(odd) {
  grid-column: 1 / -1; flex-direction: row;
}
.works-flag > .card-work:last-child:nth-child(odd) .card-work__media {
  flex: 0 0 42%; aspect-ratio: auto;
}
.works-flag > .card-work:last-child:nth-child(odd) .card-work__body { padding: 30px 32px; }
@media (max-width: 860px) {
  .works-flag { grid-template-columns: 1fr; }
  .works-flag > .card-work:last-child:nth-child(odd) { flex-direction: column; }
  .works-flag > .card-work:last-child:nth-child(odd) .card-work__media { flex: none; aspect-ratio: 4 / 3; }
}

/* ---------- 12.4 其余合作紧凑卡（三栏） ---------- */
.works-rest {
  display: grid; gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 980px) { .works-rest { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .works-rest { grid-template-columns: 1fr; } }

.card-work--sm .card-work__media { aspect-ratio: 4 / 3; }
.card-work--sm .card-work__body { padding: 18px 19px 20px; }
.card-work--sm .card-work__name { font-size: clamp(21px, 2.1vw, 25px); margin-top: 8px; }
.card-work--sm .card-work__id { margin-top: 10px; font-size: 11.5px; padding: 6px 10px; }
.card-work--sm .card-work__punch {
  font-size: 13.5px; margin-top: 12px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card-work--sm .card-work__go { margin-top: 15px; font-size: 12.5px; }

.card-work__ph { display: block; width: 100%; height: 100%; background: var(--grey-2); }

/* 筛选隐藏：用 hidden 属性，读屏与 :nth-child 都跟着走 */
.card-work[hidden] { display: none; }

/* ---------- 12.5 分节横幅 / 空状态的容器留白 ---------- */
.works-tape { margin-top: 58px; }
.works-empty { display: none; }
.works-empty.is-on { display: grid; }

/* ============================================================
   12.6 服务线合集（2026-09-08 改版）
   列表页不再按行业 / 客户地位分，按我们做的六件事分：
     触摸屏 · 上位机 · 建模 · 官网开发 · 产品销售 · 长期服务
   顶上那排胶囊从「筛选」变成「跳转」（works.js 负责高亮当前段），
   卡片骨架完全复用 .card-work，只多两样：非案例卡的角标配色、成片卡的播放钮。
   ============================================================ */

/* 胶囊条现在是锚点导航：aria-current 代替 aria-pressed */
.works-rail .works-filter__b { text-decoration: none; }
/* 窄屏六颗胶囊会折成三行、吸顶时占掉大半屏，改成一行横滑（左右出血到屏幕边） */
@media (max-width: 760px) {
  .works-rail {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -ms-overflow-style: none;
    margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad);
  }
  .works-rail::-webkit-scrollbar { display: none; }
  .works-rail::after { display: none; }
  .works-rail .works-filter__b { flex: 0 0 auto; }
}
.works-filter__b[aria-current="true"] {
  color: #fff; background: var(--ink); border-color: var(--ink);
}
.works-filter__b[aria-current="true"] u { color: rgba(255, 255, 255, 0.6); }

/* 合集抬头：编号 · 中文名 + 英文 · 计数 · 一句话 · 去服务页 */
/* 段间距写成 padding 而不是 margin：fx.js 的锚点跳转固定让开 96px（全站一个数），
   顶上那条胶囊吸住时下沿在 123px —— 只留 96px 抬头会被自己的导航条盖住。
   把留白挪进段内，落点自然就在胶囊条下面了。 */
.works-line { margin-top: 8px; padding-top: 54px; scroll-margin-top: 0; }
.works-line__h {
  display: flex; align-items: flex-end; gap: 10px 18px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 26px;
  border-bottom: 1px solid var(--ink);
}
.works-line__no {
  font: 400 11.5px/1 var(--mono); letter-spacing: 0.1em; color: var(--mut-2);
  margin-bottom: 5px;
}
.works-line__t {
  margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font: 500 clamp(20px, 2.4vw, 28px)/1.16 var(--font);
  letter-spacing: -0.03em; color: var(--ink);
}
.works-line__t i {
  font-style: normal; font: 400 11.5px/1 var(--mono);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--mut-2);
}
.works-line__d {
  flex: 1 1 320px; margin: 0 0 2px;
  font: 400 13px/1.55 var(--font); color: rgba(34, 34, 34, 0.62);
  max-width: 54ch;
}
.works-line__d b { font-weight: 500; color: var(--ink); }
/* 去对应服务页的出口：每条线都有，读的人想知道「这件事你们怎么做」 */
.works-line__svc {
  margin-left: auto; margin-bottom: 2px;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font: 500 12.5px/1 var(--font); color: var(--ink); text-decoration: none;
  border: 1px solid var(--line); border-radius: 999px; padding: 9px 13px;
  transition: border-color 0.24s var(--ease), background 0.24s var(--ease);
}
.works-line__svc:hover { border-color: rgba(34, 34, 34, 0.34); background: var(--card); }
.works-line__svc svg { width: 10px; height: 10px; }
.works-line__svc svg path { stroke: currentColor; stroke-width: 1.7; fill: none; }
@media (max-width: 700px) {
  .works-line__svc { margin-left: 0; }
}

/* 卡片网格：三栏；带 --lead 的那条线第一张占两格、改横排 */
.works-cards {
  display: grid; gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.works-cards--lead > .card-work:first-child {
  grid-column: span 2; flex-direction: row;
}
/* 封面是 4:3 的生成图，横排时越窄裁得越狠（大字会被切成半个词），给到一半。
   这批封面的配方是「大字压左上、实物摆中右」，所以裁的时候往右靠：
   海报型封面只留实物不留半个词，实拍型封面里的人和屏也都在右半边。 */
.works-cards--lead > .card-work:first-child .card-work__media {
  flex: 0 0 50%; aspect-ratio: auto;
}
.works-cards--lead > .card-work:first-child .card-work__media img {
  object-position: 100% center;
}
/* 横排卡的高度由同排那张小卡撑着，文字块居中排，别让「我们做的」被 margin-top:auto
   顶到底、中间空出一大块 */
.works-cards--lead > .card-work:first-child .card-work__body {
  padding: 28px 30px 30px; justify-content: center;
}
.works-cards--lead > .card-work:first-child .card-work__did { margin-top: 20px; }
@media (max-width: 980px) {
  .works-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .works-cards { grid-template-columns: 1fr; }
  .works-cards--lead > .card-work:first-child { grid-column: auto; flex-direction: column; }
  .works-cards--lead > .card-work:first-child .card-work__media {
    flex: none; aspect-ratio: 4 / 3;
  }
  .works-cards--lead > .card-work:first-child .card-work__body { padding: 22px 24px 24px; }
}

/* 「这条线还有 N 个」：接在卡片下面的一行小字 */
.works-line__more { margin: 16px 0 0; }
.works-line__more a {
  display: inline-flex; align-items: center; gap: 7px;
  font: 400 13px/1 var(--font); color: rgba(34, 34, 34, 0.66); text-decoration: none;
  border-bottom: 1px solid var(--line); padding-bottom: 5px;
  transition: color 0.24s var(--ease), border-color 0.24s var(--ease);
}
.works-line__more a:hover { color: var(--ink); border-color: var(--ink); }
.works-line__more svg { width: 10px; height: 10px; }
.works-line__more svg path { stroke: currentColor; stroke-width: 1.7; fill: none; }

/* 非案例卡（自有成片 / 联名机型 / 2026 新）：角标换紫罗兰，跟案例卡区分开 */
.card-work[data-kind="v"] .card-work__tier { background: var(--violet); }
/* 成片卡的播放钮：压在封面正中，悬停放大一点 */
.card-work__play {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 1;
}
.card-work__play i {
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92); display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  transition: transform 0.4s var(--ease);
}
.card-work__play svg { width: 13px; height: 15px; fill: var(--ink); margin-left: 3px; }
.card-work:hover .card-work__play i { transform: scale(1.1); }

/* ---------- 12.7 页尾的全部案例索引 ---------- */
.works-all { margin-top: 20px; padding-top: 54px; }
.works-alist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.works-alist a {
  display: grid; align-items: center; gap: 6px 16px;
  grid-template-columns: 58px minmax(0, 190px) minmax(0, 1fr) auto;
  padding: 15px 8px; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: background 0.24s var(--ease), padding 0.24s var(--ease);
}
.works-alist a:hover { background: var(--card); padding-left: 14px; }
.works-alist__no {
  font: 400 11.5px/1 var(--mono); letter-spacing: 0.06em; color: var(--mut-2);
}
.works-alist b {
  font: 500 16px/1.3 var(--font); letter-spacing: -0.02em; color: var(--ink);
}
.works-alist__id { font: 400 13px/1.45 var(--font); color: rgba(34, 34, 34, 0.62); }
.works-alist__ln { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.works-alist__ln i {
  font: 400 11px/1 var(--font); font-style: normal; color: rgba(34, 34, 34, 0.6);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 9px;
}
@media (max-width: 860px) {
  .works-alist a { grid-template-columns: 54px minmax(0, 1fr); }
  .works-alist__id, .works-alist__ln { grid-column: 2; justify-content: flex-start; }
}