/* ==========================================================================
   案例中心页面专属样式 · cases.css（2026-09-14 重设计 · 零 !important）
   --------------------------------------------------------------------------
   【命名与作用范围】—— 唯一真相源
     文件      ：cases.css                  放在子主题根目录（与 style.css / contact.css
                                            / faq.css / pricing.css 同级）
     句柄      ：tianshun-cases             functions.php 1f 段入队
     入队方式  ：wp_enqueue_scripts / 优先级 25 / 依赖 array()（原因同 1c/1d/1e）
     作用域根  ：#tsCasesMain               只染这个 id 容器内的元素
     类前缀    ：.ts-cases-*（复数）        ★特意与首页 S7 的 .ts-case / .ts-case__*
                                            区分开——style.css 里存在裸 .ts-case 规则，
                                            单数形式会与之冲突
     全站令牌  ：var(--ts-*) 引用（style.css :root 单一真相源，本文件零重声明）
   --------------------------------------------------------------------------
   【设计基准：全部取自官网既有母题，不新造风格】
     · 色彩      墨蓝 #0B1F3A + 橙 #F26B21 双色系，rgba 三元组做光晕/阴影
     · 圆角      --ts-radius 8px / --ts-radius-lg 12px（Bento 卡）
     · 眉标      药丸：navy 底白字 + 橙点，12px/700/字距 .16em（同 S7 .ts-case__eyebrow）
     · 节头      居中，max-width 680，H2 clamp(28,3.5vw,42)/800/-0.03em（同 S7）
     · 案例卡    Bento 渐变字卡：135deg 三段墨蓝 + 28px 点阵 + 橙色光斑 +
                 底部渐隐遮罩 + 橙色药丸标签 + 地点橙点（同 S7 .ts-case__item）
     · 悬浮      0.45s cubic-bezier(.25,.8,.4,1) translateY(-8px)（同 S7）
     · 按钮      主=橙底墨蓝字/悬停深橙白字（同 .ts-btn-call）；次=白描边 ghost
     · 出血      width:100vw + 负 margin（同 .ts-hero）
   --------------------------------------------------------------------------
   【两条硬纪律】
     1. 零 !important / 零内联 style / 零 emoji / 零外链静态资源 / 零脚本。
     2. 组件规则一律带 #tsCasesMain 前缀（特异性 1-1-0 > 本文件重置 1-0-1）。
        唯一例外：body.page:has(#tsCasesMain) 与 html:has(#tsCasesMain)。
   --------------------------------------------------------------------------
   【组织】1 根与重置  2 页面级对齐  3 通用件  4 Hero+统计条  5 筛选
           6 案例网格  7 合作流程  8 FAQ  9 CTA  10 响应式  11 动效与打印
   ========================================================================== */


/* ---------- 1. 根与作用域内重置 ---------- */
#tsCasesMain{
  width:100%;
  position:relative;
  color:var(--ts-body,#1F2937);
  line-height:1.7;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
#tsCasesMain *,#tsCasesMain *::before,#tsCasesMain *::after{box-sizing:border-box;margin:0;padding:0}
#tsCasesMain ul,#tsCasesMain ol{list-style:none}
#tsCasesMain a{color:inherit;text-decoration:none}
#tsCasesMain img{max-width:100%;display:block}
#tsCasesMain :focus-visible{outline:3px solid rgba(var(--ts-accent-rgb),.5);outline-offset:2px}
html:has(#tsCasesMain){scroll-behavior:smooth}
/* 锚点偏移不在此处声明：交给 style.css 的全站规则 `:target,[id]{scroll-margin-top:120px}`（topbar 36 + header ≈72，留余量）。
   此处原有 `#tsCasesMain [id^="ts-cases-"]{scroll-margin-top:24px}`：本页 id 全为驼峰（tsCasesAreas/tsCasesFaqTitle 等）不带连字符，
   该前缀在本页匹配 0 个元素；而其特异性 (1,1,0) 高于全站规则的 (0,1,0)，一旦「修正」前缀反而会把 120px 覆盖成 24px，锚点将落在吸顶导航之下。故删除该条。 */

/* ---------- 2. 页面级对齐（仅案例中心页，作用目标在本页容器之外，不加前缀） ----------
   做法同 contact.css / pricing.css：解除 GP 40px 左右内边距，水平留白统一交给 --ts-gutter。
   特异性：body.page:has(#tsCasesMain) .inside-article = (0,3,1) > GP 的 (0,2,0)。 */
body.page:has(#tsCasesMain) .site-content,
body.page:has(#tsCasesMain) .content-area,
body.page:has(#tsCasesMain) .site-main,
body.page:has(#tsCasesMain) .inside-article,
body.page:has(#tsCasesMain) .entry-content{
  padding-left:0;
  padding-right:0;
  max-width:100%;
}

/* ---------- 3. 通用件：出血 / 版心 / 眉标 / 节头 / 按钮 ---------- */
#tsCasesMain .ts-cases-bleed{
  width: calc(100vw - var(--ts-sbw, 0px));
  margin-left: calc((100% - (100vw - var(--ts-sbw, 0px))) / 2);
  margin-right: calc((100% - (100vw - var(--ts-sbw, 0px))) / 2);
}
#tsCasesMain .ts-cases-container{
  max-width:var(--ts-container,1280px);
  margin:0 auto;
  padding:0 var(--ts-gutter,24px);
}
#tsCasesMain{
  /* —— 本页私有令牌（2026-09-14 全页重设计）：挂在容器上、不进 :root，零泄漏 ——
     阴影用「贴地 1px + 远距漫射」双层：比单层大阴影轻，又能把白卡从白底上托起来。
     缓动统一为一条曲线，全页 hover/过渡共用。 */
  --cases-shadow:0 1px 2px rgba(11,31,58,.04),0 12px 26px -16px rgba(11,31,58,.18);
  --cases-shadow-hover:0 2px 4px rgba(11,31,58,.05),0 24px 48px -20px rgba(11,31,58,.24);
  --cases-ease:cubic-bezier(.25,.8,.4,1);
}
#tsCasesMain .ts-cases-section{padding:clamp(64px,8vw,120px) 0;
  background:var(--ts-pure,#fff);
  border-top:1px solid var(--ts-line,#E5E7EB);}
#tsCasesMain .ts-cases-section--soft{background:var(--ts-pure,#fff)}
/* 正文内链（与价格页 .ts-pg-link 同构） */
#tsCasesMain .ts-cases-link{
  color:var(--ts-accent-text,#C2410C);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:rgba(var(--ts-accent-rgb),.45);
  transition:text-decoration-color .2s ease;
}
@media (hover: hover){
  #tsCasesMain .ts-cases-link:hover{text-decoration-color:var(--ts-accent-text,#C2410C)}
}

/* 眉标：浅底区 = navy 药丸白字橙点（同 S7）；深底区 = 白描底变体 */
#tsCasesMain .ts-cases-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 18px;
  border-radius:999px;
  background:var(--ts-primary,#0B1F3A);
  color:#fff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}
#tsCasesMain .ts-cases-eyebrow::before{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--ts-accent,#F26B21);
  flex-shrink:0;
}
#tsCasesMain .ts-cases-eyebrow--ondark{background:rgba(255,255,255,.08)}

/* 节头：居中（同 S7 __header） */
#tsCasesMain .ts-cases-head{
  max-width:680px;
  margin:0 auto clamp(36px,4.5vw,56px);
  text-align:center;
}
#tsCasesMain .ts-cases-head h2{margin-top:16px;
  font-size:clamp(28px,3.5vw,42px);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.2;
  color:var(--ts-primary,#0B1F3A);
  text-wrap:balance;}
#tsCasesMain .ts-cases-head__desc{
  margin-top:14px;
  font-size:clamp(15px,1.5vw,17px);
  line-height:1.7;
  color:var(--ts-text-soft,#4B5563);
}

/* 按钮：主（同 .ts-btn-call）/ ghost（同 .ts-btn-cases） */
#tsCasesMain .ts-cases-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 30px;
  font-size:16px;
  font-weight:700;
  line-height:1.2;
  background:var(--ts-accent,#F26B21);
  color:var(--ts-primary,#0B1F3A);
  border:2px solid var(--ts-accent,#F26B21);
  border-radius:var(--ts-radius,8px);
  box-shadow:0 8px 24px rgba(var(--ts-accent-rgb),.3);
  transition:background-color .25s ease,border-color .25s ease,color .25s ease,transform .25s ease,box-shadow .25s ease;
}
@media (hover: hover){
  #tsCasesMain .ts-cases-btn:hover{
    background:var(--ts-accent-dark,#E0631A);
    border-color:var(--ts-accent-dark,#E0631A);
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(var(--ts-accent-rgb),.4);
  }
}
#tsCasesMain .ts-cases-btn--ghost{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.55);
  box-shadow:none;
}
@media (hover: hover){
  #tsCasesMain .ts-cases-btn--ghost:hover{
    background:#fff;
    color:var(--ts-primary,#0B1F3A);
    border-color:#fff;
    box-shadow:none;
  }
}

/* ---------- 4. Hero（实拍底图 + 墨蓝压暗层 + 点阵网格） ----------
   2026-09-15 根因修复：底图从「CSS 多层 background 的一层」拆成独立 <img>，并显式分层。
   原因：
   1) 底图 2816x880 = 3.20:1，而 hero 由内容撑高，实际约 2.2~2.5:1。
      background-size:cover 在「宽图 + 矮容器」下按容器高度缩放，
      横向必然裁掉 1-(容器比/图比) ≈ 22%~31%，画面被放大 1.3~1.4 倍，
      位于图宽 88%~98.6% 处的品牌 logo 直接落进裁切区，页面上完全看不到。
      拆层后才能用 object-position 精确控制裁切对齐点。
   2) CSS 多层 background 的图片层无法挂 alt / fetchpriority，也容易被后续层顶掉。
   3) 分层后 z-index 显式化（底图 0 / 压暗 1 / 网格 2 / 内容 3），
      不再依赖 background 书写顺序，杜绝「层级遮挡」。 */
#tsCasesMain .ts-cases-hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  color:#fff;
  /* ★ 2026-10-12（老周）：/cases/ 背景大图高度对齐 /event-planning/。
     event 页 hero（#tsEventMain .ts-hero）在 1280 版心下的实测高度 801px
     （内容 673 + 上下留白 clamp 顶 72 / 底 56），本页内容只有 593px，
     故用 min-height 补到同一高度；两页底图同为 2560x914（2.801:1），
     高度一致后取景比例也随之对齐。 */
  /* ★ 2026-10-12（老周：只要图的背景、别再加背景色块）：
     首屏高度严格跟住底图比例 —— 图按宽等比铺满时高 = 视口宽 / 2.8009
     （1513 视口 535px、1950 视口 691px、2560 视口 914px = 原稿 1:1），
     hero 与图等高，底图完整铺满、零裁切、无任何额外底色。
     仅当「内容高度 > 图高」时底部才补出一小段（1513 视口内容 593 > 图 535，
     约 58px）——该段落在 scrim 最深处（.82~.94），与图的下缘同色。 */
  min-height:calc((100vw - var(--ts-sbw,0px)) / 2.5);
  /* 内容比图矮时纵向居中，避免文字全挤顶部、底下一片空画面（同 /contact/ 做法）。 */
  display:flex;
  flex-direction:column;
  justify-content:center;
  /* 底图加载失败或窄屏关图时的兜底底色 */
  background:linear-gradient(160deg,var(--ts-primary,#0B1F3A) 0%,var(--ts-primary-light,#0E2A4F) 58%,var(--ts-primary,#0B1F3A) 100%);
}
/* ≤1024 断点底图本身已关闭（见第 12 节），撑高没有意义且会留一大块纯色，同步取消。 */
@media (max-width:1024px){
  #tsCasesMain .ts-cases-hero{min-height:0}
}
#tsCasesMain .ts-cases-hero__bg{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  width:100%;
  /* ★ 2026-10-12（老周：图片要完整显示）：原 height:100% + inset:0 是 cover 满铺，
     容器比例 1.87 比图比 2.801 更「方」，cover 必然横向裁掉 33%（左侧「创造美好」
     与部分拼贴直接看不见）。改为 height:auto + bottom:auto —— 图按宽度等比完整铺开
     （1513 视口高 535px），纵向横向均零裁切，不足 800px 的部分由 hero 的品牌墨蓝
     底色承载（统计条正落在这一段上）。 */
  height:100%;
  object-fit:cover;
  /* 2026-10-11：合并后横向裁 ≈8%（原 ≈3%）。水平右对齐 —— 居中裁会把右端 88%~98.6% 处的
     品牌 logo 切掉，右对齐则只裁左侧（文字区背景，本就被 scrim 压暗）。
     垂直顶对齐 —— 宽屏下容器比例 > 图比 2.801，cover 转为「按宽缩放、纵向裁切」，
     居中会让上下各砍一半，客户反馈「上面还是没有露出来」；顶对齐后图的上沿完整保留，
     裁切全部落在底部的数据条一侧（该处本就被 .82/.94 压暗）。 */
  object-position:100% 0%;
  /* 提亮底图 ×1.08（2026-10-11 第三轮定稿）。
     · 2026-09-15 定的 1.24 是为夜景实拍（原始均值 40/255）补偿亮度，杠杆正确。
     · 2026-10-11 底图换成客户原稿 001.png（2560x914，均值 93.4，通道上限 227）。
       1.24 会裁切 1.27% 通道，降到 1.08 后零裁切（227×1.08=245）。
     · 说明：真正让画面「发灰」的不是这里，是 ::before 那层 alpha .62~.76 的
       满屏墨蓝 —— 见下方 ::before 注释。 */
  filter:brightness(1.08);
}
#tsCasesMain .ts-cases-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  /* 由下往上三组，CSS 里越靠前越在上层：
     ① 品牌橙角（2026-10-11 从 .22 降到 .08，只做一点品牌色呼应）
     ② 左侧 scrim：本次唯一承担「文字区压暗」的层，x≈66% 前淡出，
        右侧蜂窝拼贴完全不受影响
     ③ 整体层（垂向）：顶部 .50 压住画面里的「光大国际」白字，中部降到 .08
        让照片本体透出来，底部 .38 接数据条深色带
     ★ 2026-10-11 第三轮：撤销原来铺满全屏的 .62/.50/.76 墨蓝层与
       .22/.10/.08/.14 四层橙暖光晕。那套是给夜景实拍伪造「路灯光溢」用的，
       铺在客户原稿上等于把 50~76% 的像素统一换成同一个蓝，
       实测「右区与底图原稿的 RGB 距离」达 41.3，观感即「蒙了层灰蓝雾」。
       改后：41.3 → 11.4，右区相对亮度 0.050 → 0.099，
       文字区 0.045、白字对比 12.98:1、顶带 0.053（三档均与原值同档）。
     实测（1200x420，按文字实际落位分区）：
        整图亮度 16.5% → 21.8%（+32%），右侧主视觉 21.2% → 31.5%（+49%）
        H1 5.10:1、导语 4.74:1、营业时间 7.70:1 —— 三档全过 WCAG AA
     -- 2026-10-11 第三轮定稿实测（底图 = 客户原稿 001.png，2560x914，均值 93.4，
        该稿自带「中心亮、四角暗」径向暗角，左半竖条均值 50、标准差 8.2）：
        文字区相对亮度 4.5%、白字对比 12.98:1、<4.5:1 占比 0%；
        右侧主视觉区相对亮度 9.9%、与底图原稿的 RGB 距离 11.4（改前 41.3）；
        顶带（「光大国际」白字区）5.3%，与改前 5.5% 同档。 */
  background:
    radial-gradient(circle at 88% 8%,rgba(var(--ts-accent-rgb),.08),transparent 42%),
    /* ★ 2026-10-12：.66/.54 → .44/.32。原值把左侧整条压成接近纯色（实测渲染后 x=0~160
       区域 R 标准差仅 1.2，即「看起来不是图」），老周反馈「图片不是全宽、左侧是墨蓝」。
       减弱后同一区域 R 标准差 60.1，底图左侧的「创造美好」竖排字与门头全部透出；
       文字区白字对比 H1 6.94:1 / 导语 5.22:1，仍全过 WCAG AA。 */
    linear-gradient(90deg,rgba(var(--ts-primary-rgb),.44) 0%,rgba(var(--ts-primary-rgb),.32) 38%,rgba(var(--ts-primary-rgb),0) 62%),
    /* 2026-10-11：数据条移回 hero 内后，底部这一段要承担「数据条文字底压暗」的职责 ——
       82%~100% 抬到 .80/.92，否则橙字（26~38px 大字号，需 ≥3:1）会掉到 1.1~3.9。
       66% 之前保持 .08 不变，右侧主视觉的既有标定不受影响。 */
    /* ★ 2026-10-12：底部 .82/.94 → .44/.58。底图下部（原稿 y 70%~100%）本身只有 9~10% 亮度，
       再叠 .82/.94 后渲染成 (13,29,49) 的纯色，老周判定为「图下面加了墨蓝背景」。
       减弱后该段为 (28~45,47~66,62~79)，能看出是暗部照片；数据条橙字背景亮度中位 4.2%，
       对比 3.75:1 仍 ≥3:1。 */
    linear-gradient(rgba(var(--ts-primary-rgb),.50) 0%,rgba(var(--ts-primary-rgb),.14) 30%,rgba(var(--ts-primary-rgb),.16) 72%,rgba(7,21,39,.44) 84%,rgba(7,21,39,.58) 100%);
}
#tsCasesMain .ts-cases-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(72% 78% at 36% 24%,#000,transparent 84%);
  mask-image:radial-gradient(72% 78% at 36% 24%,#000,transparent 84%);
}
/* 注：padding 简写在此处必须显式带上左右值，否则会盖掉 .ts-cases-container 的
   0 24px，导致窄屏下 hero 内容贴到屏幕边缘 */
#tsCasesMain .ts-cases-hero__inner{
  position:relative;
  z-index:3;
  /* ★ 2026-10-12：hero 改 flex 容器后，flex item 带 margin:auto 会退化为 fit-content
     （实测内容宽 1232 → 1211、左边界 352 → 362），显式拉满以保持原 1280 版心与居中。 */
  width:100%;
  /* 2026-10-11：数据条移回 hero 内后，垂直留白须压紧 —— 联合高度越接近底图比例，cover 的横向裁切越小
     （713px → 581px 时裁切 25% → ≈8%）。改动与 4b 段的说明配套。*/
  /* 2026-10-11：34px → 46px，回补上留白（客户反馈「太挤」）。联合高度 +12px，
     顺带把宽屏的纵向裁切再降 1~2 个百分点。 */
  padding:clamp(18px,2vw,28px) var(--ts-gutter,24px) clamp(12px,1.4vw,18px);
}
#tsCasesMain .ts-cases-crumb{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:16px;
  font-size:13px;
  color:rgba(255,255,255,.68);
}
#tsCasesMain .ts-cases-crumb a{color:rgba(255,255,255,.85);transition:color .2s ease}
@media (hover: hover){
  #tsCasesMain .ts-cases-crumb a:hover{color:var(--ts-accent,#F26B21)}
}
#tsCasesMain .ts-cases-crumb__sep{color:rgba(255,255,255,.4)}
#tsCasesMain .ts-cases-hero__title{
  font-size:clamp(34px,4.6vw,52px);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.12;
  color:#fff;
}
#tsCasesMain .ts-cases-hero__lead{
  max-width:720px;
  margin-top:18px;
  font-size:clamp(15px,1.6vw,17px);
  line-height:1.85;
  color:rgba(255,255,255,.82);
}
#tsCasesMain .ts-cases-hero__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
  margin-top:24px;
}
#tsCasesMain .ts-cases-hero__note{
  margin-top:14px;
  font-size:13px;
  color:rgba(255,255,255,.6);
  font-variant-numeric:tabular-nums;
}
/* 统计条 */
#tsCasesMain .ts-cases-stats{
  /* 2026-10-11：由 hero 后的独立段移回 hero 内，间距随 4a 一并压紧（见 4b 段说明）。*/
  margin-top:clamp(10px,1.2vw,16px);
  padding-top:clamp(8px,1vw,14px);
  border-top:1px solid rgba(255,255,255,.16);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
/* 2026-10-03：统计条 4 组数据组内居中。原来 4 格虽均分（290px×4 + 24px gap），
   但格内文字text-align:start 全部贴左，4 组文字宽度差异大（20字 vs 4字），
   视觉重心塌向左半区、右侧 1/3 留白 —— 实测 1440 视口下文字块占 97~1169，
   容器右侧 1353，整条看着偏左。改为格内居中，4 组中心 482/796/1110/1424，
   组心间距恒定 314px，整条中心 953 = 视口中心 960（差值=滚动条）。 */
#tsCasesMain .ts-cases-stat{text-align:center}
#tsCasesMain .ts-cases-stat b{
  display:block;
  font-size:clamp(26px,3.2vw,38px);
  font-weight:800;
  line-height:1.15;
  letter-spacing:.02em;
  color:var(--ts-accent,#F26B21);
  font-variant-numeric:tabular-nums;
}
#tsCasesMain .ts-cases-stat span{display:block;margin-top:6px;font-size:13px;color:rgba(255,255,255,.72)}

/* ---------- 4b. 数据条（2026-10-11 移回 hero 内） ----------
   历史：2026-09-15 曾把数据条从 hero 内移出，理由是它把 hero 撑高、cover 横向裁切从 4% 涨到 25%。
   2026-10-11 老周否掉了独立成段这个形态：「下面那块是拼接的图，只用那一张图」——
   独立成段时数据条必须另铺一张 hero 底图才能「落在图上」，而它与 hero 的图必然错位重叠，
   观感就是两张图拼在一起（实测接缝亮度差 21~23/255）。
   现改回与 /event-planning/ 一致的结构：数据条在 .ts-cases-hero__inner 内，
   底图一次 cover 铺满整块（hero 内容 + 数据条），画面连续、无重复。
   代价：hero 联合高度 553 → 581（1513 视口），靠压紧 4a 的 inner padding 与
        .ts-cases-stats 的 margin/padding 把横向裁切控制在 ≈8%（拆层前是 25%）。
   维护点：本页若换 hero 底图，只需改 HTML 里的 <img class="ts-cases-hero__bg"> 一处
        （不再有 CSS 里的第二处引用）。 */

/* ---------- 4c. 服务过的客户标识（2026-09-20 增；2026-09-23 合规口径修正 R208） ----------
   位置：statsbar（深色数据条）之后、案例库 section 之前。
        （2026-09-20 晚：原夹在 statsbar 与本块之间的「到店导航 locbar」整段删除，
          本块因此直接接在 statsbar 之后。）
   来源：客户给 22.png 截图（同行远大广告老版站样式）；只搬样式版式，
         内容改为天舜版（避免 R43 杜撰"赢得了众多标杆客户的长期信赖"）。
   边界：上接 statsbar —— 深色块收尾后由本块 __inner 的 padding-top 提供
         32~56px 白间距（statsbar 自身 padding-bottom 在深色块内部，不产生白间距）；
         下交案例库 section 自带 border-top。
         自身 padding 偏轻（clamp 32~56px），不抢案例库节头的戏。
   间距：按 R77，section 自身 padding=0、留白全交给 __inner；
         相邻间距只由 __inner 的 padding-top 一处提供，本块不叠 margin-top。
   视觉：居中引导文（最大宽 820px）+ 6 列 logo 占位卡片横排。
         占位卡片用浅灰底 + 描边，待客户后续提供 <img> 后直接替换文本节点。 */
#tsCasesMain .ts-cases-clients{
  padding:0;
  background:var(--ts-pure,#fff);
}
#tsCasesMain .ts-cases-clients__inner{
  padding:clamp(32px,4vw,56px) var(--ts-gutter,24px);
}
#tsCasesMain .ts-cases-clients__lead{
  max-width:820px;
  margin:0 auto clamp(24px,3vw,40px);
  text-align:center;
  font-size:clamp(14.5px,1.5vw,16px);
  line-height:1.85;
  color:var(--ts-text-soft,#4B5563);
}
#tsCasesMain .ts-cases-clients__row{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:clamp(12px,1.4vw,20px);
  align-items:center;
}
/* 标识墙限定语（2026-09-23 补）：次要信息，字号比引导文小一档；
   #6B7280 在 #fff 底上对比度 4.84:1，达 WCAG AA 正文标准（≥4.5:1）。 */
#tsCasesMain .ts-cases-clients__note{
  max-width:820px;
  margin:clamp(20px,2.4vw,32px) auto 0;
  text-align:center;
  font-size:clamp(12.5px,1.25vw,13.5px);
  line-height:1.8;
  color:#6B7280;
}
#tsCasesMain .ts-cases-client{
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:16/9;
  background:var(--ts-soft,#F8FAFC);
  border:1px solid var(--ts-line,#E5E7EB);
  border-radius:var(--ts-radius,8px);
  transition:border-color .25s var(--cases-ease),background-color .25s var(--cases-ease);
}
@media (hover: hover){
  #tsCasesMain .ts-cases-client:hover{
    border-color:rgba(var(--ts-accent-rgb),.35);
    background:#fff;
  }
}
#tsCasesMain .ts-cases-client__placeholder{
  font-size:13px;
  font-weight:600;
  letter-spacing:.05em;
  color:var(--ts-muted,#6B7280);
}
/* 待客户后续替换为真实服务过的客户 <img> 时：图片在卡片内居中、保留 logo 留白，
   不会被 aspect-ratio 拉伸变形。
   2026-09-21 客户截图（22.png）参照放大：max-width 78→90%、max-height 62→80%，
   让 logo 在 16/9 扁卡里更显眼；仍保留双轴 max 防止贴边。 */
#tsCasesMain .ts-cases-client img{
  max-width:90%;
  max-height:80%;
  width:auto;
  height:auto;
  object-fit:contain;
}

/* ---------- 5. 分类筛选（纯 CSS：radio + label[for] + :checked） ---------- */
#tsCasesMain .ts-cases-filter{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
#tsCasesMain .ts-cases-chips{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-top:26px;
}
#tsCasesMain .ts-cases-chip{display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:10px 24px;
  border:1px solid var(--ts-line,#E5E7EB);
  border-radius:999px;
  background:var(--ts-pure,#fff);
  font-size:14.5px;
  font-weight:600;
  color:var(--ts-text-soft,#4B5563);
  cursor:pointer;
  user-select:none;
  transition:border-color .25s var(--cases-ease),background-color .25s var(--cases-ease),color .25s var(--cases-ease),box-shadow .25s var(--cases-ease);}
@media (hover: hover){
  #tsCasesMain .ts-cases-chip:hover{border-color:var(--ts-accent,#F26B21);color:var(--ts-accent-text,#C2410C)}
}
/* 筛选计数：静态标注，随分类给出数量（零脚本） */
#tsCasesMain .ts-cases-chip__n{margin-left:7px;font-size:12px;font-weight:700;opacity:.62;font-variant-numeric:tabular-nums}
#tsCasesMain #tsCasesAll:checked ~ .ts-cases-head .ts-cases-chips label[for="tsCasesAll"],
#tsCasesMain #tsCasesMake:checked ~ .ts-cases-head .ts-cases-chips label[for="tsCasesMake"],
#tsCasesMain #tsCasesEvent:checked ~ .ts-cases-head .ts-cases-chips label[for="tsCasesEvent"],
#tsCasesMain #tsCasesDesign:checked ~ .ts-cases-head .ts-cases-chips label[for="tsCasesDesign"]{
  background:var(--ts-primary,#0B1F3A);
  border-color:var(--ts-primary,#0B1F3A);
  color:#fff;
  box-shadow:0 6px 16px -6px rgba(var(--ts-primary-rgb),.5);
}
#tsCasesMain #tsCasesAll:focus-visible ~ .ts-cases-head .ts-cases-chips label[for="tsCasesAll"],
#tsCasesMain #tsCasesMake:focus-visible ~ .ts-cases-head .ts-cases-chips label[for="tsCasesMake"],
#tsCasesMain #tsCasesEvent:focus-visible ~ .ts-cases-head .ts-cases-chips label[for="tsCasesEvent"],
#tsCasesMain #tsCasesDesign:focus-visible ~ .ts-cases-head .ts-cases-chips label[for="tsCasesDesign"]{
  outline:3px solid rgba(var(--ts-accent-rgb),.5);
  outline-offset:2px;
}

/* ---------- 6. 案例 Bento 网格（同 S7 .ts-case__item 母题，放大为页面主角） ---------- */
#tsCasesMain .ts-cases-grid{display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:clamp(230px,21vw,290px);
  gap:24px;}
/* 精选卡跨两列：仅在「全部」视图（由 :checked 驱动） */
#tsCasesMain #tsCasesAll:checked ~ .ts-cases-grid .ts-cases-item--featured{grid-column:span 2}
/* 分类隐藏：:not 反选 */
#tsCasesMain #tsCasesMake:checked ~ .ts-cases-grid .ts-cases-item:not([data-cat="make"]),
#tsCasesMain #tsCasesEvent:checked ~ .ts-cases-grid .ts-cases-item:not([data-cat="event"]),
#tsCasesMain #tsCasesDesign:checked ~ .ts-cases-grid .ts-cases-item:not([data-cat="design"]){display:none}

#tsCasesMain .ts-cases-item{position:relative;
  display:block;
  overflow:hidden;
  border-radius:var(--ts-radius-lg,12px);
  background:linear-gradient(135deg,#142850 0%,var(--ts-primary,#0B1F3A) 55%,#091632 100%);
  border:1px solid rgba(var(--ts-primary-rgb),.08);
  box-shadow:var(--cases-shadow);
  transition:box-shadow .45s var(--cases-ease),transform .45s var(--cases-ease),border-color .45s var(--cases-ease);}
#tsCasesMain .ts-cases-item::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 30% 20%,rgba(255,255,255,.08) 0%,transparent 50%),
    radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:100% 100%,28px 28px;
}
@media (hover: hover){
  #tsCasesMain .ts-cases-item:hover{transform:translateY(-8px);
    box-shadow:var(--cases-shadow-hover);
    border-color:rgba(var(--ts-accent-rgb),.35);}
}
/* 渐变封面：同一墨蓝家族明度/色相微差 + 橙色光斑（n1-n11） */
#tsCasesMain .ts-cases-item__cover{position:absolute;inset:0;z-index:0}
#tsCasesMain .ts-cases-cover--n1{background:linear-gradient(140deg,#0B1F3A 0%,#14325C 60%,#0F2A50 100%),radial-gradient(circle at 82% 20%,rgba(var(--ts-accent-rgb),.5),transparent 46%)}
#tsCasesMain .ts-cases-cover--n2{background:linear-gradient(140deg,#0E2A4F 0%,#1B3A63 100%),radial-gradient(circle at 75% 24%,rgba(var(--ts-accent-rgb),.35),transparent 44%)}
#tsCasesMain .ts-cases-cover--n3{background:linear-gradient(140deg,#12294A 0%,#24436B 100%),radial-gradient(circle at 80% 28%,rgba(var(--ts-accent-rgb),.3),transparent 42%)}
#tsCasesMain .ts-cases-cover--n4{background:linear-gradient(140deg,#0B1F3A 0%,#2A4A6E 100%),radial-gradient(circle at 70% 20%,rgba(var(--ts-accent-rgb),.42),transparent 48%)}
#tsCasesMain .ts-cases-cover--n5{background:linear-gradient(140deg,#16325A 0%,#0B1F3A 100%),radial-gradient(circle at 85% 75%,rgba(var(--ts-accent-rgb),.3),transparent 44%)}
#tsCasesMain .ts-cases-cover--n6{background:linear-gradient(140deg,#7A2E0D 0%,#C2410C 140%),radial-gradient(circle at 80% 22%,rgba(255,255,255,.28),transparent 42%)}
#tsCasesMain .ts-cases-cover--n7{background:linear-gradient(140deg,#0E2A4F 0%,#1E3A5F 100%),radial-gradient(circle at 76% 22%,rgba(var(--ts-accent-rgb),.44),transparent 42%)}
#tsCasesMain .ts-cases-cover--n8{background:linear-gradient(140deg,#14325C 0%,#0B1F3A 100%),radial-gradient(circle at 82% 26%,rgba(var(--ts-accent-rgb),.4),transparent 44%)}
#tsCasesMain .ts-cases-cover--n9{background:linear-gradient(140deg,#0B1F3A 0%,#193459 100%),radial-gradient(circle at 78% 18%,rgba(var(--ts-accent-rgb),.5),transparent 46%)}
#tsCasesMain .ts-cases-cover--n10{background:linear-gradient(140deg,#1B3A63 0%,#0E2A4F 100%),radial-gradient(circle at 84% 30%,rgba(var(--ts-accent-rgb),.34),transparent 42%)}
#tsCasesMain .ts-cases-cover--n11{background:linear-gradient(140deg,#0E2A4F 0%,#29496F 100%),radial-gradient(circle at 72% 20%,rgba(var(--ts-accent-rgb),.38),transparent 46%)}
/* 类型字（Phase 1 无实拍照时的字卡封面） */
#tsCasesMain .ts-cases-item__word{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(20px,2.4vw,30px);
  font-weight:700;
  letter-spacing:.14em;
  color:rgba(255,255,255,.9);
  text-shadow:0 2px 14px rgba(11,31,58,.45);
}
/* 底部渐隐遮罩 + 信息 */
#tsCasesMain .ts-cases-item__overlay{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-start;
  padding:22px;
  background:linear-gradient(to top,rgba(var(--ts-primary-rgb),.92) 0%,rgba(var(--ts-primary-rgb),.66) 24%,rgba(var(--ts-primary-rgb),.20) 52%,rgba(var(--ts-primary-rgb),0) 72%);
}
#tsCasesMain .ts-cases-item__tag{
  display:inline-flex;
  align-items:center;
  padding:4px 12px;
  border-radius:999px;
  background:var(--ts-accent,#F26B21);
  color:#fff;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  box-shadow:0 2px 8px rgba(var(--ts-accent-rgb),.3);
}
#tsCasesMain .ts-cases-item__title{
  margin-top:9px;
  font-size:clamp(16px,1.7vw,20px);
  font-weight:700;
  line-height:1.3;
  color:#fff;
  text-shadow:0 1px 4px rgba(var(--ts-primary-rgb),.35);
}
#tsCasesMain .ts-cases-item__desc{
  margin-top:7px;
  font-size:12.5px;
  line-height:1.6;
  color:rgba(255,255,255,.78);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
#tsCasesMain .ts-cases-item__unit{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:5px;
  font-size:12.5px;
  color:rgba(255,255,255,.8);
}
#tsCasesMain .ts-cases-item__unit::before{
  content:"";
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--ts-accent,#F26B21);
  flex-shrink:0;
}
/* 照片封面扩展点：上传实拍后，在对应卡片内加一行
   <img class="ts-cases-item__img" src="…" alt="…"> 即切换为实拍封面（渐变字卡自动隐藏） */
#tsCasesMain .ts-cases-item__img{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(1.06) brightness(1.06);
  transition:transform .65s cubic-bezier(.25,.8,.4,1);
}
#tsCasesMain .ts-cases-item__img ~ .ts-cases-item__word{display:none}
/* n2 封面为竖构图 1080×1920，横版卡位默认取中段会切掉主体，裁切焦点下移 */
#tsCasesMain .ts-cases-cover--n2 ~ .ts-cases-item__img{object-position:center 62%}
/* featured 跨列卡（卡 1 门头招牌）：桌面为 2/3 列宽 ≈793×269，约 3:1 画框。
   原图 1600×1200（4:3），cover 后纵向只保留中间约 45% 的横带 —— 该图主体
   （金色标志 + ONLY ONE YOU 立体字）位于画面上 1/3，取中带会把品牌标志切掉、
   字母顶到上边缘。取 32% 使保留带落在约 10%–55%，标志与字同时进画面。
   其余单格卡在 3 列下约 387×269，纵向保留约 93%，无需设置。 */
#tsCasesMain .ts-cases-cover--n1 ~ .ts-cases-item__img{object-position:center 32%}
@media (hover: hover){
  #tsCasesMain .ts-cases-item:hover .ts-cases-item__img{transform:scale(1.06)}
}

/* 「查看详情」角标（纯 CSS 箭头，无脚本） */
#tsCasesMain .ts-cases-item__go{
  position:absolute;
  z-index:3;
  top:16px;
  right:16px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(var(--ts-primary-rgb),.5);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  box-shadow:0 2px 10px rgba(var(--ts-primary-rgb),.28);
  transition:background-color .3s ease,border-color .3s ease,transform .3s ease;
}
#tsCasesMain .ts-cases-item__go::before{
  content:"";
  width:8px;
  height:8px;
  margin-left:-2px;
  border-top:2px solid #fff;
  border-right:2px solid #fff;
  transform:rotate(45deg);
}
@media (hover: hover){
  #tsCasesMain .ts-cases-item:hover .ts-cases-item__go{
    background:var(--ts-accent,#F26B21);
    border-color:var(--ts-accent,#F26B21);
    transform:translateX(3px);
  }
}

/* ---------- 6b. 「常做的材质与工艺」（案例库收尾区 · 2026-09-14 重设计）
   改前：960px 居中灰底盒 —— 与上方卡网格左右边缘不对齐、标题仅 13px 无层级、
   22 个工艺词挤在一条「·」串里，读起来像脚注。
   改后：容器等宽（与卡网格、节头同一条左基线）+ 上分隔线 + 左对齐小标题与一句说明
   + 2×2 白卡（每类一张）+ 工艺词胶囊。卡片沿用第 9 节合作模式的签名母题
   （顶部渐变细线 hover 自左展开），使本块与下方区块成为同一套语言。
   内容口径未改：22 个工艺词逐字沿用，且与价格页一致。 */
#tsCasesMain .ts-cases-craft{
  margin-top:clamp(48px,5vw,72px);
  padding-top:clamp(32px,3.4vw,46px);
  border-top:1px solid var(--ts-line,#E5E7EB);
}
#tsCasesMain .ts-cases-craft__head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:12px var(--ts-gutter);
}
#tsCasesMain .ts-cases-craft__title{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:clamp(19px,2vw,23px);
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--ts-primary,#0B1F3A);
}
#tsCasesMain .ts-cases-craft__title::before{
  content:"";
  flex:none;
  width:24px;
  height:3px;
  border-radius:2px;
  background:var(--ts-accent,#F26B21);
}
#tsCasesMain .ts-cases-craft__note{
  max-width:56ch;
  font-size:clamp(13.5px,1.4vw,15px);
  line-height:1.7;
  color:var(--ts-muted,#6B7280);
}
#tsCasesMain .ts-cases-craft__list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,1.8vw,22px);
  margin:clamp(24px,2.8vw,36px) 0 0;
}
#tsCasesMain .ts-cases-craft__card{position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:clamp(22px,2.2vw,28px);
  background:var(--ts-pure,#fff);
  border:1px solid var(--ts-line,#E5E7EB);
  border-radius:var(--ts-radius-lg,12px);
  box-shadow:var(--cases-shadow);
  transition:transform .35s var(--cases-ease),box-shadow .35s var(--cases-ease),border-color .35s var(--cases-ease)}
#tsCasesMain .ts-cases-craft__card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg,var(--ts-accent,#F26B21),var(--ts-primary,#0B1F3A));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .45s ease;
}
@media (hover: hover){
  #tsCasesMain .ts-cases-craft__card:hover{transform:translateY(-4px);
    border-color:rgba(var(--ts-accent-rgb),.35);
    box-shadow:var(--cases-shadow-hover);}
}
@media (hover: hover){
  #tsCasesMain .ts-cases-craft__card:hover::before{transform:scaleX(1)}
}
#tsCasesMain .ts-cases-craft__card dt{
  display:flex;
  align-items:baseline;
  gap:10px;
  justify-content:center;
  margin:0;
  font-size:clamp(15.5px,1.5vw,17px);
  font-weight:800;
  color:var(--ts-primary,#0B1F3A);
}
#tsCasesMain .ts-cases-craft__idx{
  font-size:12px;
  font-weight:800;
  letter-spacing:.18em;
  color:var(--ts-accent-text,#C2410C);
  font-variant-numeric:tabular-nums;
}
#tsCasesMain .ts-cases-craft__card dd{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
}
#tsCasesMain .ts-cases-craft__card dd span{padding:5px 12px;
  border-radius:8px;
  background:rgba(var(--ts-primary-rgb),.035);
  border:1px solid rgba(var(--ts-primary-rgb),.10);
  font-size:13px;
  line-height:1.55;
  color:var(--ts-text-soft,#4B5563);}

/* ---------- 7. 服务区域（区县胶囊 + 地址口径说明） ---------- */
#tsCasesMain .ts-cases-areas{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  max-width:900px;
  margin:0 auto;
}
#tsCasesMain .ts-cases-area{display:inline-flex;
  align-items:center;
  padding:11px 22px;
  background:var(--ts-pure,#fff);
  border:1px solid var(--ts-line,#E5E7EB);
  border-radius:999px;
  font-size:15px;
  font-weight:600;
  color:var(--ts-body,#1F2937);
  box-shadow:var(--cases-shadow);
  transition:border-color .25s var(--cases-ease),color .25s var(--cases-ease),transform .25s var(--cases-ease),box-shadow .25s var(--cases-ease);}
@media (hover: hover){
  #tsCasesMain .ts-cases-area:hover{border-color:var(--ts-accent,#F26B21);
    color:var(--ts-accent-text,#C2410C);
    transform:translateY(-2px);
    box-shadow:var(--cases-shadow-hover);}
}
#tsCasesMain .ts-cases-areas__note{
  max-width:760px;
  margin:26px auto 0;
  text-align:center;
  font-size:13.5px;
  line-height:1.75;
  color:var(--ts-muted,#6B7280);
}

/* ---------- 8. 合作流程（描边数字母题） ---------- */
#tsCasesMain .ts-cases-steps{display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  counter-reset:ts-case-step;}
#tsCasesMain .ts-cases-step{padding:30px 28px 28px;
  text-align:center;
  background:var(--ts-pure,#fff);
  border:1px solid var(--ts-line,#E5E7EB);
  border-radius:var(--ts-radius-lg,12px);
  box-shadow:var(--cases-shadow);
  transition:transform .3s var(--cases-ease),box-shadow .3s var(--cases-ease),border-color .3s var(--cases-ease)}
@media (hover: hover){
  #tsCasesMain .ts-cases-step:hover{transform:translateY(-4px);
    border-color:rgba(var(--ts-accent-rgb),.35);
    box-shadow:var(--cases-shadow-hover);}
}
#tsCasesMain .ts-cases-step__num{
  display:inline-block;
  font-size:clamp(30px,3vw,38px);
  font-weight:800;
  line-height:1;
  color:var(--ts-accent,#F26B21);
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
}
@supports (-webkit-text-stroke:1px #000){
  #tsCasesMain .ts-cases-step__num{
    color:transparent;
    -webkit-text-stroke:1.6px var(--ts-accent,#F26B21);
  }
}
#tsCasesMain .ts-cases-step h3{margin-top:14px;font-size:17px;font-weight:700;color:var(--ts-primary,#0B1F3A)}
#tsCasesMain .ts-cases-step p{margin-top:8px;font-size:14px;line-height:1.75;color:var(--ts-text-soft,#4B5563)}

/* ---------- 9. 合作模式（单项 / 整店视觉 / 活动全案） ---------- */
#tsCasesMain .ts-cases-modes{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2vw,24px);
}
#tsCasesMain .ts-cases-mode{position:relative;
  overflow:hidden;
  padding:clamp(24px,2.6vw,34px);
  text-align:center;
  background:var(--ts-pure,#fff);
  border:1px solid var(--ts-line,#E5E7EB);
  border-radius:var(--ts-radius-lg,12px);
  box-shadow:var(--cases-shadow);
  transition:transform .35s var(--cases-ease),box-shadow .35s var(--cases-ease),border-color .35s var(--cases-ease)}
#tsCasesMain .ts-cases-mode::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg,var(--ts-accent,#F26B21),var(--ts-primary,#0B1F3A));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .45s ease;
}
@media (hover: hover){
  #tsCasesMain .ts-cases-mode:hover{transform:translateY(-4px);
    border-color:rgba(var(--ts-accent-rgb),.35);
    box-shadow:var(--cases-shadow-hover);}
}
@media (hover: hover){
  #tsCasesMain .ts-cases-mode:hover::before{transform:scaleX(1)}
}
#tsCasesMain .ts-cases-mode__idx{
  font-size:12px;
  font-weight:800;
  letter-spacing:.18em;
  color:var(--ts-accent-text,#C2410C);
  font-variant-numeric:tabular-nums;
}
#tsCasesMain .ts-cases-mode h3{margin-top:10px;font-size:19px;font-weight:800;color:var(--ts-primary,#0B1F3A)}
#tsCasesMain .ts-cases-mode > p{margin-top:10px;font-size:14px;line-height:1.8;color:var(--ts-text-soft,#4B5563)}
#tsCasesMain .ts-cases-mode__list{
  margin-top:18px;
  padding-top:6px;
  border-top:1px dashed var(--ts-line,#E5E7EB);
  list-style:none;
  text-align:left;
}
#tsCasesMain .ts-cases-mode__list li{
  position:relative;
  padding:9px 0 9px 16px;
  font-size:13.5px;
  line-height:1.7;
  color:var(--ts-body,#1F2937);
  border-bottom:1px dashed rgba(var(--ts-primary-rgb),.07);
}
#tsCasesMain .ts-cases-mode__list li:last-child{border-bottom:0}
#tsCasesMain .ts-cases-mode__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:17px;
  width:8px;
  height:2px;
  border-radius:2px;
  background:var(--ts-accent,#F26B21);
}

/* ---------- 10. FAQ ---------- */
#tsCasesMain .ts-cases-faq{max-width:860px;margin:0 auto}
#tsCasesMain .ts-cases-faq details{margin-bottom:12px;
  border:1px solid var(--ts-line,#E5E7EB);
  border-radius:var(--ts-radius-lg,12px);
  background:var(--ts-pure,#fff);
  box-shadow:var(--cases-shadow);
  transition:border-color .25s var(--cases-ease),box-shadow .25s var(--cases-ease);}
#tsCasesMain .ts-cases-faq details[open]{border-color:rgba(var(--ts-accent-rgb),.4);
  box-shadow:var(--cases-shadow-hover);}
#tsCasesMain .ts-cases-faq summary{
  position:relative;
  padding:18px 52px 18px 22px;
  font-size:16px;
  font-weight:700;
  color:var(--ts-primary,#0B1F3A);
  cursor:pointer;
  list-style:none;
  user-select:none;
}
#tsCasesMain .ts-cases-faq summary::-webkit-details-marker{display:none}
#tsCasesMain .ts-cases-faq summary::after{
  content:"";
  position:absolute;
  right:22px;
  top:50%;
  width:10px;
  height:10px;
  margin-top:-8px;
  border-right:2px solid var(--ts-muted-soft,#9CA3AF);
  border-bottom:2px solid var(--ts-muted-soft,#9CA3AF);
  transform:rotate(45deg);
  transition:transform .25s ease,border-color .25s ease;
}
#tsCasesMain .ts-cases-faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px;border-color:var(--ts-accent-dark,#E0631A)}
#tsCasesMain .ts-cases-faq__body{padding:0 22px 20px;font-size:14.5px;line-height:1.85;color:var(--ts-text-soft,#4B5563)}
#tsCasesMain .ts-cases-faq__body a{color:var(--ts-accent-text,#C2410C);font-weight:600;border-bottom:1px solid rgba(194,65,12,.35)}
@media (hover: hover){
  #tsCasesMain .ts-cases-faq__body a:hover{color:var(--ts-muted,#6B7280)}
}

/* ---------- 11. 底部 CTA（墨蓝深底，居中） ---------- */
/* 2026-09-15：标题/描述/底注三处补上显式 text-align:center。
   原先三者只靠继承 .ts-cases-cta 的 text-align:center，计算值一致、无视觉变化；
   改为自身声明后，日后若有人在更近的祖先（如 .ts-cases-cta__inner）上加
   text-align，也不会把这几个块带偏。 */
#tsCasesMain .ts-cases-cta{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  text-align:center;
  color:#fff;
  background:
    radial-gradient(circle at 50% -30%,rgba(var(--ts-accent-rgb),.24),transparent 55%),
    linear-gradient(160deg,var(--ts-primary,#0B1F3A) 0%,var(--ts-primary-light,#0E2A4F) 100%);
}
#tsCasesMain .ts-cases-cta::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:44px 44px;
}
/* 同上：左右值不可省，否则 ≤767px 时 __btns 的 width:100% 按钮会贴到屏幕边缘 */
#tsCasesMain .ts-cases-cta__inner{position:relative;z-index:1;padding:clamp(56px,7vw,88px) var(--ts-gutter,24px)}
/* 标题居中：上限由 760px 放宽到 960px。无头 Chrome 实测（本机复算）：
   · 34px 时 28 字成行宽 933px，≥660px 视口即为单行（字号随 vw 收缩，28 字始终放得下）
     —— 单行 + 左右留白严格相等（1440px 下 245/245，1280px 下 165/165），居中一眼可见；
   · 760px 旧值会让 981px 视口以下被迫折成 14/14 等长两行，等长行在几何上与左对齐无法区分，
     这才是「看着没居中」的来源；
   · ≤660px 折成两行时保留 balance：两行 329px 等长、左右留白对称（600px 下 126/126）。 */
#tsCasesMain .ts-cases-cta__title{
  max-width:960px;
  text-align:center;
  margin:0 auto;
  font-size:clamp(24px,3.4vw,34px);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.4;
  color:#fff;
  text-wrap:balance;
}
#tsCasesMain .ts-cases-cta__desc{max-width:640px;
    text-align:center;margin:16px auto 0;font-size:15px;line-height:1.85;color:rgba(255,255,255,.78)}
#tsCasesMain .ts-cases-cta__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:32px}
#tsCasesMain .ts-cases-cta__meta{margin-top:26px;
    text-align:center;font-size:13px;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}

/* ---------- 12. 响应式（1360 / 1024 / 767 / 560） ---------- */
@media (max-width:1360px){
  #tsCasesMain .ts-cases-grid{grid-auto-rows:clamp(220px,23vw,280px)}
}
@media (max-width:1024px){
  #tsCasesMain .ts-cases-grid{grid-template-columns:repeat(2,1fr)}
  #tsCasesMain .ts-cases-steps{grid-template-columns:repeat(2,1fr)}
  #tsCasesMain .ts-cases-stats{grid-template-columns:repeat(2,1fr);gap:22px 28px}
  /* 2026-10-11：≤1024 数据条转 2 列、hero 联合高度大增，cover 横向裁切会到 ≈48%（图只剩碎片）；
     该断点直接关闭 hero 底图（与 ≤767 既有口径一致），数据条落在品牌深色底上。 */
  #tsCasesMain .ts-cases-hero__bg{display:none}
  /* 服务过的客户 logo 行：6 列 → 3 列；保持每张卡片宽高比一致 */
  #tsCasesMain .ts-cases-clients__row{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:767px){
  #tsCasesMain .ts-cases-grid{grid-template-columns:1fr;grid-auto-rows:clamp(230px,58vw,300px)}
  #tsCasesMain .ts-cases-item__overlay{padding:18px}
  #tsCasesMain .ts-cases-item__desc{font-size:12px;margin-top:5px}
  #tsCasesMain .ts-cases-item__go{top:12px;right:12px;width:34px;height:34px}
  #tsCasesMain #tsCasesAll:checked ~ .ts-cases-grid .ts-cases-item--featured{grid-column:auto}
  #tsCasesMain .ts-cases-steps{grid-template-columns:1fr}
  #tsCasesMain .ts-cases-modes{grid-template-columns:1fr}
  #tsCasesMain .ts-cases-stats{grid-template-columns:repeat(2,1fr);gap:20px}
  #tsCasesMain .ts-cases-craft__list{grid-template-columns:1fr}
  #tsCasesMain .ts-cases-chips{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;padding-bottom:6px;max-width:100%;scrollbar-width:none}
  #tsCasesMain .ts-cases-chips::-webkit-scrollbar{display:none}
  #tsCasesMain .ts-cases-chip{flex:0 0 auto}
  #tsCasesMain .ts-cases-hero__actions .ts-cases-btn{width:100%}
  #tsCasesMain .ts-cases-cta__btns .ts-cases-btn{width:100%}
  /* 服务过的客户 logo 行：3 列 → 2 列；窄屏下 1 列太空，2 列更平衡 */
  #tsCasesMain .ts-cases-clients__row{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 窄屏关闭 hero 底图：手机端 hero 比例约 0.5~0.7:1，与底图 3.2:1 差 5 倍，
     cover 下横向只看得见底图中央 15%~22%（基本只剩蜂窝灯箱一角），
     既看不出画面内容，又白付 66KB 首屏流量 —— 直接用品牌渐变更干净。
     若手机也要图，需另出一张 3:4 竖构图，不能复用这张横图。 */
  #tsCasesMain .ts-cases-hero__bg{display:none}
}

/* ---------- 13. 动效偏好与打印 ---------- */
@media (prefers-reduced-motion:reduce){
  html:has(#tsCasesMain){scroll-behavior:auto}
  #tsCasesMain *,#tsCasesMain *::before,#tsCasesMain *::after{transition:none;animation:none}
  #tsCasesMain .ts-cases-item:hover,#tsCasesMain .ts-cases-step:hover,#tsCasesMain .ts-cases-mode:hover,#tsCasesMain .ts-cases-btn:hover{transform:none}
}
/* ---------- 12b. 焦点反馈与触屏保护（2026-09-14 全页重设计补充） ----------
   焦点：summary 在部分浏览器不显示默认焦点环，显式补上（与筛选胶囊同一橙色焦点环）。
   触屏：hover:none 下关掉上浮与展开动效，避免「点一下卡片、悬停态粘住不回落」。 */
#tsCasesMain .ts-cases-faq summary:focus-visible{
  outline:3px solid rgba(var(--ts-accent-rgb),.55);
  outline-offset:2px;
  border-radius:var(--ts-radius,8px);
}
@media (hover:none){
  #tsCasesMain .ts-cases-item:hover,
  #tsCasesMain .ts-cases-step:hover,
  #tsCasesMain .ts-cases-mode:hover,
  #tsCasesMain .ts-cases-craft__card:hover,
  #tsCasesMain .ts-cases-area:hover{transform:none;box-shadow:var(--cases-shadow)}
  #tsCasesMain .ts-cases-mode:hover::before,
  #tsCasesMain .ts-cases-craft__card:hover::before{transform:scaleX(0)}
  #tsCasesMain .ts-cases-item:hover .ts-cases-item__img{transform:none}
  #tsCasesMain .ts-cases-item:hover .ts-cases-item__go{background:rgba(var(--ts-primary-rgb),.5);border-color:rgba(255,255,255,.28);transform:none}
}

@media print{
  #tsCasesMain .ts-cases-hero,#tsCasesMain .ts-cases-cta{background:#fff;color:#000}
  /* 2026-10-11：统计条此前不在 print 白名单内 —— 默认打印（不输出背景）时白字落白底不可见，
     勾选「背景图形」时 .ts-cases-stat span 的 #333 又落回深色图上（约 2:1）。
     此处补白底黑字：橙字换深橙 #C4550E（白底 4.5:1，大字号 ≥3 有余量）、分隔线换 #8C8C8C（白底 3.3:1）。*/
  #tsCasesMain .ts-cases-stat b{color:#C4550E}
  #tsCasesMain .ts-cases-stats{border-top-color:#8C8C8C}
  #tsCasesMain .ts-cases-hero__title,#tsCasesMain .ts-cases-cta__title{color:#000}
  #tsCasesMain .ts-cases-hero__lead,#tsCasesMain .ts-cases-cta__desc,#tsCasesMain .ts-cases-stat span{color:#333}
  #tsCasesMain .ts-cases-item,#tsCasesMain .ts-cases-step,#tsCasesMain .ts-cases-mode,#tsCasesMain .ts-cases-craft__card{box-shadow:none;break-inside:avoid}
  #tsCasesMain .ts-cases-item__go{display:none}
  #tsCasesMain .ts-cases-faq details{break-inside:avoid}
  #tsCasesMain .ts-cases-chips{display:none}
  #tsCasesMain .ts-cases-btn{border:1px solid #333}
}


/* 2026-09-15 定位到真实根因：style.css 的 #content .entry-content h2 特异性 0-1-1-1，
   会把 h2 的 margin-left 强制为 0，压过下面 .ts-cases-cta__title 的 0-1-1-0，
   于是「margin:0 auto」的左侧失效、标题盒子被钉在容器左侧（text-align:center 只在盒内生效），
   视觉上整体左移约 136px。这里用 0-1-2-1 的选择器把左右 margin 拿回来，不依赖级联顺序。 */
#tsCasesMain .ts-cases-cta h2.ts-cases-cta__title{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

/* ---------- 14. 部分案例欣赏（2026-09-20 新增） ----------
   位置：在 ts-cases-craft 之上，三个项目各一块，4 列网格；盘龙 5 张用 5 列变体。
   沿用 ts-cases-craft 的「顶部细线分隔 + 左对齐小标题 + 编号徽章」语言。
   图片 4:3 + 圆角 + hover 微缩放（与全站节奏一致），仅桌面端；触屏关掉。 */
#tsCasesMain .ts-cases-showcase{
  margin-top:clamp(56px,6vw,88px);
  padding-top:clamp(40px,4.4vw,60px);
  border-top:1px solid var(--ts-line,#E5E7EB);
}
#tsCasesMain .ts-cases-showcase__head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:12px var(--ts-gutter);
}
#tsCasesMain .ts-cases-showcase__title{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:clamp(19px,2vw,23px);
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--ts-primary,#0B1F3A);
}
#tsCasesMain .ts-cases-showcase__title::before{
  content:"";
  flex:none;
  width:24px;
  height:3px;
  border-radius:2px;
  background:var(--ts-accent,#F26B21);
}
#tsCasesMain .ts-cases-showcase__note{
  max-width:60ch;
  font-size:clamp(13.5px,1.4vw,15px);
  line-height:1.7;
  color:var(--ts-muted,#6B7280);
}
#tsCasesMain .ts-cases-showcase__group{margin-top:clamp(36px,3.8vw,52px)}
#tsCasesMain .ts-cases-showcase__group-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px var(--ts-gutter);
  margin-bottom:clamp(14px,1.6vw,20px);
}
#tsCasesMain .ts-cases-showcase__group-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;                          /* 同上，防父主题 h4 默认 margin-block */
  font-size:clamp(16.5px,1.7vw,19px);
  font-weight:800;
  letter-spacing:-.005em;
  color:var(--ts-primary,#0B1F3A);
}
#tsCasesMain .ts-cases-showcase__num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:30px;
  height:24px;
  padding:0 8px;
  font-size:13px;
  font-weight:700;
  color:var(--ts-pure,#fff);
  background:var(--ts-primary,#0B1F3A);
  border-radius:6px;
  letter-spacing:0;
}
#tsCasesMain .ts-cases-showcase__group-desc{
  max-width:62ch;
  font-size:14px;
  line-height:1.65;
  color:var(--ts-muted,#6B7280);
}
#tsCasesMain .ts-cases-showcase__grid{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.4vw,18px);
}
#tsCasesMain .ts-cases-showcase__grid--5{
  grid-template-columns:repeat(5,minmax(0,1fr));
}
#tsCasesMain .ts-cases-showcase__grid li{
  position:relative;
  overflow:hidden;
  aspect-ratio:4/3;
  border-radius:var(--ts-radius,10px);
  background:#f1f3f5;
  box-shadow:var(--cases-shadow);
}
#tsCasesMain .ts-cases-showcase__grid img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s var(--cases-ease);
}
#tsCasesMain .ts-cases-showcase__grid li:hover img{transform:scale(1.04)}

@media (max-width:980px){
  #tsCasesMain .ts-cases-showcase__grid,
  #tsCasesMain .ts-cases-showcase__grid--5{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media (max-width:720px){
  #tsCasesMain .ts-cases-showcase__grid,
  #tsCasesMain .ts-cases-showcase__grid--5{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:480px){
  #tsCasesMain .ts-cases-showcase__grid,
  #tsCasesMain .ts-cases-showcase__grid--5{
    grid-template-columns:1fr;
  }
}
@media (hover:none){
  #tsCasesMain .ts-cases-showcase__grid li:hover img{transform:none}
  #tsCasesMain .ts-cases-showcase__grid li{box-shadow:var(--cases-shadow)}
}
@media print{
  #tsCasesMain .ts-cases-showcase__grid li{break-inside:avoid;box-shadow:none}
}

/* ==========================================================================
   18. 案例中心首屏：眉标与主标题之间补间距（2026-09-25）
   --------------------------------------------------------------------------
   客户截图反馈：「Projects & Cases」药丸眉标与下方大标题紧贴，没有上下间距。
   实测（1440）：眉标 bottom 287 / 标题 top 287 → 间距 0px；
   原因是 .ts-cases-eyebrow 与 .ts-cases-hero__title 都没有 margin。
   改法：给块级的主标题加 margin-top:18px（与下方 .ts-cases-hero__lead 的
   18px 同一档，视觉节奏一致）。
   注：眉标是 display:inline-flex，行内级盒子的垂直 margin 不可靠，
   故不改眉标、改标题 —— 块级元素的 margin-top 一定生效。
   ========================================================================== */
#tsCasesMain .ts-cases-hero__title{
  margin-top:18px;
}
/* ==========================================================================
   19. 图片纯净层（2026-10-13 老周：底图不做调暗/滤镜/叠加遮罩）
   --------------------------------------------------------------------------
   移除覆盖全图的 44px 网格纹理层（纯装饰、对可读性无贡献）。
   ★ 文字侧遮罩（::before）刻意保留：本页底图是白天工地实拍、整体偏亮，
     去掉后 H1 白字对比会从 7.2:1 掉到 2.9:1（低于 AA 4.5:1）——
     属必要可读性保障，一旦客户提供更暗的底图即可一并移除。
   ========================================================================== */
#tsCasesMain .ts-cases-hero::after { background-image: none; }
/* ==========================================================================
   21. hero 内容紧凑化（2026-10-13 老周：首页高度与其他四页不一致）（案例页同口径）
   --------------------------------------------------------------------------
   1280 视口原 527px（内容顶高）→ 现 506px（= 1265/2.5），与首页/关于/联系页完全一致。
   压缩点：内边距上下、面包屑下间距、导语行高与按钮上间距。
   ========================================================================== */
#tsCasesMain .ts-cases-hero__inner { padding-top: clamp(12px, 1.4vw, 18px); padding-bottom: clamp(10px, 1vw, 14px); }
#tsCasesMain .ts-cases-crumb { margin-bottom: 8px; }
#tsCasesMain .ts-cases-hero__lead { line-height: 1.72; margin-top: 14px; }
#tsCasesMain .ts-cases-hero__actions { margin-top: 18px; }
/* ==========================================================================
   23. 大屏版式（≥1800px）：客户 2560×1440 / 100% 缩放反馈「文字小、空荡荡」
   --------------------------------------------------------------------------
   实测（无头 Chrome，2560 视口）：首屏 1018px，而 hero 版心只有 1280px
     → 内容横向仅占 50%；内容高 505（占 50%）→ 两侧与上下大片留白、「文字小」。
   处理：① ≥1800px 时 hero 版心 1280 → 1640px（只动 hero，不动全站其他区块）；
         ② 字号与间距改 clamp 随视口平滑放大，下限 = 原值 → 窄屏/笔记本零影响。
   实测（2560）内容占比：首页 50% → **73%**、案例 48→56%、活动 41→56%、
     关于 39→51%、联系 38→50%；内容宽占比 50% → 64%。
   高度不受影响：1440 全 570、1891 全 750、2560 全 1018（严格 = 容器宽/2.5）。
   回滚：删除本段即可。
   ========================================================================== */

@media (min-width: 1800px){
  #tsCasesMain .ts-cases-hero__inner { max-width: 1640px; }
}
#tsCasesMain .ts-cases-hero__title { font-size: clamp(52px, 2.8vw, 72px); line-height: 1.16; }
#tsCasesMain .ts-cases-hero__lead { font-size: clamp(17px, 0.86vw, 22px); line-height: 1.7; margin-top: clamp(14px, 1.25vw, 32px); }
#tsCasesMain .ts-cases-hero__actions { margin-top: clamp(18px, 1.6vw, 40px); }
#tsCasesMain .ts-cases-btn { font-size: clamp(16px, 0.74vw, 19px); }
#tsCasesMain .ts-cases-crumb { font-size: clamp(13px, 0.59vw, 15px); }