/* ==========================================================
   王双品牌设计 - 新官网（版式参照 hzvis 巴顿品牌结构）
   白底黑字 · 极简 · 大标题 · 细分割线
   ========================================================== */

/* ---------- 变量 ---------- */
:root {
  --c-text: #5f6061;
  --c-title: #111;
  --c-line: #e5e5e5;
  --c-black: #111;
  --c-white: #fff;
  --c-gray: #999;
  --c-light: #f7f7f7;
  --font-en: "Avenir Next", Arial, sans-serif;
  --font-cn: "PingFang SC", "HanHei SC", "Helvetica Neue", "Microsoft YaHei", Arial, sans-serif;
}

/* ---------- Reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-cn);
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-text);
  background: var(--c-white);
}
img { max-width: 100%; display: block; border: none; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; transition: color .3s ease, opacity .3s ease; }
h1,h2,h3,h4,h5,h6 { font-weight: 400; color: var(--c-title); }
em,i { font-style: normal; }

/* 通用容器：兼容窄屏留白
   2026-09-15 移动端体检⑧（平板带）：原为写死 `width: 1200px`，导致 981–1199px 视口
   （含 iPad 横屏 1024）必然出现横向滚动条（scrollWidth 恒为 1200）。
   改成 `width:100% + max-width:1200px`：≥1200px 完全等价（零影响），
   <1200px 时随视口收缩、不再溢出。≤980px 仍由下方媒体查询接管（width:auto + 16px 内边距）。
   ⚠️ 两处「满宽」容器（.home-cases .wrap / .case-lib > .wrap）必须同时补 `max-width:none`，
   否则会被这行夹回 1200，横铺效果失效。 */
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; }
.clear:after { content: ""; display: block; clear: both; }

/* 隐藏辅助 */
.hide { display: none !important; }

/* ---------- 顶部导航 ---------- */
.header {
  position: fixed; top: 0; left: 0; z-index: 999;
  width: 100%;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--c-line);
  transition: box-shadow .3s ease;
}
.header.scrolled { box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.header-inner {
  /* 2026-09-15 用户要求：导航栏两边各留白 100px（前为左右 0 贴边、再前为固定 1200px 居中）。
     ≥1200px 视口恒为 100px；更窄时按可用空间等比收缩，保底 16px，
     保证内容区不小于 980px —— 实测 logo 181px + 6 项导航 734px = 915px，
     留 65px 呼吸位，不会压缩导航项导致文字折行。
     用 padding 而非 margin：全局已是 box-sizing:border-box，且 ≤980px 媒体查询里
     已有 .header-inner{padding:0 16px} 会在其后覆盖。 */
  width: 100%; padding: 0 clamp(16px, calc((100% - 980px) / 2), 100px);
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}
.logo { display: flex; align-items: center; }
.logo .logo-img { height: 25px; width: auto; display: block; max-width: 235px; object-fit: contain; }

.logo .logo-mark {
  width: 42px; height: 42px; border-radius: 50%;
  background: #111; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-en); font-size: 16px; letter-spacing: .5px; font-weight: 600;
  margin-right: 10px;
}
.logo .logo-text { line-height: 1.25; }
.logo .logo-text .zh { font-size: 17px; color: #111; font-weight: 600; letter-spacing: 1px; }
.logo .logo-text .en { font-size: 10px; color: #999; letter-spacing: 2.4px; text-transform: uppercase; }

.nav { display: flex; align-items: center; }
/* nav 外层（header-inner 的直接 flex 子项）占满剩余空间并推至最右 */
.header-inner > nav { margin-left: auto; }
.nav > li { position: relative; margin-left: 34px; }
.nav > li > a {
  display: block; color: #111; line-height: 72px;
  position: relative; text-align: center; line-height: 1.5;
}
/* 导航项：英文+中文 左右并排（先英文后中文），而非上下两行 */
.nav > li > a { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.nav > li > a .n-en {
  font-family: var(--font-en); font-size: 15px; font-weight: 600;
  color: #111; letter-spacing: .5px; line-height: 72px;
}
.nav > li > a .n-zh {
  font-size: 15px; color: #111; letter-spacing: 2px; line-height: 72px;
}
.nav > li > a:after {
  content: ""; position: absolute; left: 0; bottom: 14px; width: 0; height: 2px;
  background: #111; transition: width .3s ease;
}
.nav > li > a:hover:after,
.nav > li.active > a:after { width: 100%; }
.nav-toggle { display: none; }

/* 移动端菜单 */
@media (max-width: 980px) {
  .wrap, .header-inner { width: auto; padding: 0 16px; }
  .logo .logo-img { height: 27px; max-width: 220px; }
  .nav-toggle {
    display: block; width: 30px; height: 30px; cursor: pointer;
    position: relative; z-index: 1001;
  }
  /* 2026-09-15 移动端体检⑦：汉堡按钮 30×30 < Apple HIG 的 44×44 最小触控尺寸。
     只撑热区、不动盒子：透明伪元素外扩 7px → 44×44，
     三根横杠的视觉尺寸(24×2)、间距与头部布局全部零变化。 */
  .nav-toggle:after {
    content: ""; position: absolute; left: -7px; right: -7px; top: -7px; bottom: -7px;
  }
  .nav-toggle span {
    display: block; width: 24px; height: 2px; background: #111;
    margin: 6px auto; transition: all .3s ease;
  }
  .nav-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .nav {
    display: block; position: fixed; top: 0; right: -78%; width: 78%;
    height: 100vh; background: #fff; z-index: 1000;
    padding: 100px 30px 30px; transition: right .35s ease;
    box-shadow: -6px 0 20px rgba(0,0,0,.08);
  }
  .nav.open { right: 0; }
  .nav > li { margin: 0 0 6px 0; border-bottom: 1px solid #f0f0f0; }
  .nav > li > a { line-height: 52px; font-size: 16px; }
  .nav > li > a .n-en, .nav > li > a .n-zh { line-height: 52px; }
}

/* ---------- 首页全屏 Banner ---------- */
.banner { position: relative; width: 100%; overflow: hidden; height: 92vh; min-height: 560px; }
.banner .bd { position: relative; height: 100%; }
.banner .bd ul { position: relative; }
.banner .bd ul li {
  position: absolute; left: 0; top: 0; width: 100%;
  min-height: 92vh;
  display: flex; align-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity 1s ease, visibility 1s;
}
.banner .bd ul li.on { opacity: 1; visibility: visible; z-index: 2; }
.banner .bg {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  overflow: hidden;
}
/* 视差层（2026-09-15）：main.js 按滚动量给 .bgp 做纯 translate 位移，
   图片相对页面滚动"走得更慢"，产生纵深视差。
   ★ 只位移、不缩放 —— 头图是图片自带文案设计的整张大图，任何缩放/裁切都会切到图里的字。
   ★ 位移系数 k ≤ 1 时 .bgp 始终盖住 banner 可见区，不会露底（数学上无需放大图层）。 */
.banner .bgp {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  will-change: transform;
  backface-visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .banner .bgp { transform: none !important; }
}
.banner .bg img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06); transition: transform 6s ease-out;
}
.banner .bd ul li.on .bg img { transform: scale(1); }
.banner .bg:after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.42) 42%, rgba(0,0,0,.08) 100%),
    linear-gradient(0deg, rgba(0,0,0,.35) 0%, transparent 45%);
}
/* 纯图片轮播（图片自带文案设计）→ 撤掉压暗遮罩，仅在底部留极轻渐变供指示点/箭头可读 */
.banner.no-txt .bg:after {
  background: linear-gradient(0deg, rgba(0,0,0,.35) 0%, transparent 30%);
}
.banner .txt {
  position: relative; z-index: 3; padding: 130px 0 80px; width: 1200px; margin: 0 auto;
  color: #fff;
}
.banner .txt .en-line { font-family: var(--font-en); letter-spacing: 5px; font-size: 15px; opacity: .9; margin-bottom: 18px; }
.banner .txt h2 { font-size: 60px; line-height: 1.3; color: #fff; font-weight: 300; text-shadow: 0 2px 18px rgba(0,0,0,.28); }
.banner .txt h2 b { font-weight: 600; }
.banner .txt p { font-size: 17px; margin-top: 22px; max-width: 640px; opacity: .95; line-height: 2; text-shadow: 0 1px 10px rgba(0,0,0,.22); }
.banner .txt .more {
  display: inline-block; margin-top: 40px; padding: 13px 42px;
  border: 1px solid rgba(255,255,255,.8); color: #fff; font-size: 15px; letter-spacing: 3px;
  transition: all .35s ease;
}
.banner .txt .more:hover { background: #fff; color: #111; }
.banner .hd {
  position: absolute; right: 60px; bottom: 60px; z-index: 5; display: flex;
}
.banner .hd li {
  /* ⚠ 2026-09-15 修复隐藏已久的真缺陷：这几颗 li 的父元素是 <div class="hd">（不在 <ul> 里），
     li 仍是 display:list-item → 生成列表标记 + 一个匿名行盒（高 = 继承行高 25.2px），
     把每个"细条"撑成 40×25 的浅色方块，还多出游离的深色圆点。
     之前它落在白带里（白底白块）看不出来；指示点回到图片上后就会显形。
     显式去掉 list-item 语义即可让 li 回到 40×3 的细条（.hd 容器同步回到 3px 高）。 */
  display: block; list-style: none;
  width: 40px; height: 3px; background: rgba(255,255,255,.5);
  margin-left: 8px; cursor: pointer; overflow: hidden; position: relative;
  /* 2026-09-15 体检①：指示点从白带回到图片上后，加一道暗投影，
     保证在浅色/高亮图片上也始终看得见。 */
  box-shadow: 0 1px 3px rgba(0,0,0,.45);
}
.banner .hd li span {
  display: block; width: 0; height: 100%; background: #fff; transition: width 6s linear;
}
.banner .hd li.on span { width: 100%; }
.banner .arrow {
  position: absolute; top: 50%; z-index: 5; width: 52px; height: 52px;
  margin-top: -26px; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.55); border-radius: 50%;
  color: #fff; font-size: 22px; cursor: pointer; transition: all .35s ease;
}
.banner .arrow:hover { background: #fff; color: #111; }
.banner .prev { left: 30px; }
.banner .next { right: 30px; }
@media (max-width: 1200px) {
  .banner .txt { width: auto; padding-left: 30px; padding-right: 30px; }
}
@media (max-width: 760px) {
  /* 2026-09-15 移动端体检①：原值 84vh < .banner 的 92vh。
     390×844 实测 banner=776px、li=709px → 底部露出 68px 纯白带，
     而指示点(bottom:30px, y=721~746)正好落进白带里，
     白点落在白底上 = 完全看不见。
     改为与 .banner 同为 92vh，每帧严格铺满，白带消失、指示点回到图上。 */
  .banner .bd ul li { min-height: 92vh; }
  .banner .txt h2 { font-size: 38px; }
  .banner .txt p { font-size: 15px; }
  .banner .hd { right: 20px; bottom: 30px; }
}
/* 2026-09-15 移动端体检②（方案 A）：触屏设备隐藏左右箭头。
   原因：箭头常驻会压住图片自带的文案设计，且「点箭头」与「左右滑动」
   是同一件事的两种手势 —— 触屏留滑动、隐藏箭头更符合直觉。
   指示点从白带回到图上后成为可见的手动入口，原热区只有 40×3（几乎点不中），
   用透明伪元素纵向外扩到约 40×39 便于点按（横向 4px 间隙不重叠）。
   桌面（有精确指针）不受影响，箭头照旧。 */
@media (hover: none) and (pointer: coarse) {
  .banner .arrow { display: none; }
  .banner .hd li { overflow: visible; }
  .banner .hd li:after {
    content: ""; position: absolute; left: -4px; right: -4px; top: -18px; bottom: -18px;
  }
}

/* ---------- 通用页头 (内页) ---------- */
.page-banner {
  /* 2026-09-15 移动端体检⑨：左右原为 0，H1 会贴到屏幕边（390 下仅剩 3px）。
     改 16px —— 与站内移动端留白约定（.wrap / .header-inner 的 0 16px）一致。
     桌面 1440 实测 H1 字号/高度/换行全部不变（居中文字在更窄的盒里仍居中）。 */
  padding: 168px 16px 80px; text-align: center;
  background: #f7f7f7; border-bottom: 1px solid var(--c-line);
}
.page-banner h1 { font-size: 40px; font-weight: 300; letter-spacing: 2px; }
.page-banner .sub {
  margin-top: 12px; font-family: var(--font-en); letter-spacing: 4px;
  color: #999; font-size: 13px; text-transform: uppercase;
}
.page-banner .crumbs { margin-top: 16px; font-size: 13px; color: #999; }
.page-banner .crumbs a:hover { color: #111; }
.page-banner.dark {
  background: #111; color: #fff;
}
.page-banner.dark h1 { color: #fff; }
.page-banner.dark .sub { color: rgba(255,255,255,.6); }
/* 后台可配子栏目头图：带背景大图时用白字 + 渐变遮罩保证可读（图片在 assets/images/banners/） */
.page-banner.has-img {
  background-color: #333;
  background-size: cover; background-position: center;
  color: #fff;
}
.page-banner.has-img .en-visual,
.page-banner.has-img h1,
.page-banner.has-img .sub,
.page-banner.has-img .crumbs,
.page-banner.has-img .crumbs a { color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.45); }
.page-banner.has-img .crumbs a:hover { color: #ddd; }

/* ---------- 首页标语区 ---------- */
.tagline { padding: 90px 0 70px; }
.tagline .wrap { text-align: center; }
.tagline .tag-en {
  font-family: var(--font-en); letter-spacing: 6px; font-size: 13px;
  color: #999; text-transform: uppercase;
}
.tagline h2 { font-size: 38px; margin: 20px auto 26px; line-height: 1.6; font-weight: 300; }
.tagline h2 b { font-weight: 600; }
.tagline .line { width: 42px; height: 1px; background: #111; margin: 0 auto 34px; }
.tagline p.desc { max-width: 860px; margin: 0 auto; font-size: 15px; line-height: 2.1; }

/* 数字条 */
.stats { display: flex; justify-content: center; margin-top: 60px; }
.stats li { width: 220px; text-align: center; position: relative; }
.stats li + li:before {
  content: ""; position: absolute; left: 0; top: 18px; width: 1px; height: 56px; background: var(--c-line);
}
.stats .num { font-size: 54px; font-weight: 300; font-family: var(--font-en); color: #111; line-height: 1; }
.stats .num i { font-size: 26px; font-style: normal; margin-left: 2px; }
.stats .lbl { font-size: 14px; color: #999; margin-top: 10px; letter-spacing: 1px; }
@media (max-width: 760px) {
  .tagline { padding: 60px 16px; }
  .tagline h2 { font-size: 26px; }
  /* 2026-09-15 移动端体检（待定项3）：品牌主张是一段长文，居中后每行左右都不齐，
     手机上尤其难读 → 窄屏改左对齐。标题仍保持居中（h2 居中观感更好）。 */
  .tagline p.desc { text-align: left; }
  /* 2026-09-15 移动端体检（待定项2）：原来 2 项一行 → 18年 / 545+ 占第一行、
     39+ 独占第二行，下面拖出一大块空白。改 3 项一行（各 33.3333%），
     并等比缩小数字与标签字号以适配窄列。 */
  .stats { flex-wrap: nowrap; }
  .stats li { width: 33.3333%; margin-bottom: 0; }
  /* 3 列一行时，li2/li3 左侧各留一条分隔线（与桌面一致：3 项 = 2 条线）。
     原来的 nth-child(odd) 隐藏规则是给「2 项一行」用的（li3 换行后左线会挂空），3 列下必须撤掉。 */
  .stats .num { font-size: 34px; }
  .stats .num i { font-size: 17px; }
  .stats .lbl { font-size: 12px; margin-top: 8px; letter-spacing: 0; }
  .stats li + li:before { top: 6px; height: 42px; }
}

/* ---------- 区块通用 ---------- */
.section-title { text-align: center; padding: 90px 0 20px; }
.section-title .en {
  font-family: var(--font-en); letter-spacing: 5px; color: #999;
  text-transform: uppercase; font-size: 13px;
}
.section-title h3 { font-size: 36px; margin-top: 14px; font-weight: 300; letter-spacing: 1px; }
.section-title .cn-sub { margin-top: 14px; color: #999; font-size: 14px; letter-spacing: 1px; }

/* ---------- 案例模块（首页展示） ---------- */
.home-cases { padding: 20px 0 90px; }
/* 首页精选区首次进入整体淡入一次（整块同现；入场后分类切换零动画、各分类效果一致） */
html.js-ok .home-cases { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
html.js-ok .home-cases.in { opacity: 1; transform: none; }
/* 首页精选图 6:5 完整无缝：卡片间零缝隙、图块无内联空白 */
.home-cases .case-grid .item { border-bottom: 0; border-right: 0; }
.home-cases .case-grid .item a { display: block; line-height: 0; }
.home-cases .case-grid .thumb img { display: block; }
/* 2026-09-15 用户要求：首页精选案例区横向铺满视口，两边各留白 100px，
   与导航栏（.header-inner 同款 clamp）左右严格对齐。
   卡片 .case-grid .item 是 33.3333% 宽，会随容器等比变宽。
   仅作用于首页 .home-cases 内的容器，不影响其它页面的 .wrap。
   用同一条 clamp 公式：≥1200px 恒为 100px；更窄时按可用空间等比收缩，
   保底 16px（≤980px 时 (100%-980px)/2 ≤ 0，自动落到 16px，与移动端媒体查询一致）。 */
.home-cases .wrap {
  width: 100%; max-width: none; margin: 0;
  padding: 0 clamp(16px, calc((100% - 980px) / 2), 100px);
}
/* 首页精选案例：行业分类筛选 */
.ind-filters { display: flex; justify-content: center; flex-wrap: wrap; margin: 34px 0 46px; }
.ind-filters a {
  margin: 0 6px 10px; padding: 9px 22px; border: 1px solid #ddd; font-size: 14px;
  color: #666; cursor: pointer; border-radius: 30px; transition: all .3s ease; letter-spacing: 1px;
}
.ind-filters a.on, .ind-filters a:hover { background: #111; border-color: #111; color: #fff; }
/* 2026-09-15 移动端体检③：6 个行业标签每项 106px（14px 字 + 22px 内边距 + 12px 间距），
   390 宽刚好 3+3，但 375/360 会折成 3 行、末行只剩 1 个孤项。
   窄屏把内边距 22→14、间距 6→4（字号仍保持 14px 可读）→ 每项约 90px，
   360/375/390 全部稳定折成 2 行 × 3 项，不再出现孤项。
   断点取 400px：≥401 的宽度（含 412）原本就是 3+3，保持原样不动。 */
@media (max-width: 400px) {
  .ind-filters a { margin: 0 4px 10px; padding: 9px 14px; }
}
.home-grid { border-bottom: 1px solid #f0f0f0; }
/* 首页精选 3 列网格：一排 3 个、4 排 = 12 个（行宽 33.3333% 见 .case-grid .item） */
.home-grid .item { border-bottom: 0; }
/* 首页精选额外案例（每类 7-12 号）默认隐藏，切到具体分类时才显示 */
.home-grid .item[hidden] { display: none !important; }
/* 首页卡片不参与逐卡 reveal（保持分类切换同步一致） */
.home-grid .item.reveal { opacity: 1; animation: none; }
/* 分类切换淡入：整批统一淡入（无逐卡错峰），保持各分类效果一致 */
@keyframes homeFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.home-grid .item.fade-in {
  animation: homeFadeIn .35s ease both;
}
/* 分类切换统一「缩放+淡入淡出」交叉过渡（参考目标站 Isotope 效果）：完全同步、无逐卡错峰、不闪眼 */
.home-grid .item.feat-fadein {
  animation: featScaleIn .45s cubic-bezier(.25, .46, .45, .94) both;
}
.home-grid .item.feat-fadeout {
  animation: featScaleOut .4s ease both; pointer-events: none;
}
@keyframes featScaleIn {
  from { opacity: 0; transform: scale(.86); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes featScaleOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(.86); }
}
/* 行间 -1px 上移重叠：消除 flex 亚像素行缝（图与图之间无白隙） */
.home-grid .item { margin-bottom: -1px; }

.home-cases .section-title { padding-top: 60px; }
.case-grid { display: flex; flex-wrap: wrap; }
/* 首页精选与案例库内页均为 3 列：一排 3 个、4 排 12 个 */
.case-grid .item {
  width: 33.3333%; overflow: hidden;
  border-bottom: 1px solid #f0f0f0;
}
.case-grid .item a { display: block; position: relative; overflow: hidden; }
/* 6:5 封面：用 aspect-ratio 整数化渲染，杜绝 padding-top 浮点造成的亚像素行缝 */
.case-grid .thumb { position: relative; width: 100%; aspect-ratio: 6 / 5; background: #f2f2f2; overflow: hidden; }
.case-grid .thumb .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.case-grid .thumb img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s ease;
}
.case-grid .item a:hover .thumb img { transform: scale(1.06); }
.case-grid .meta {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: stretch;
  padding: 26px 21px 23px;
  color: #fff;
}
/* 文案底板（上下双渐变）：常态透明，鼠标移入时与黑色遮罩、文案一起淡入 */
.case-grid .meta:before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom,
    rgba(0,0,0,.62) 0%, rgba(0,0,0,.14) 24%, transparent 40%,
    transparent 44%, rgba(0,0,0,.82) 100%);
  opacity: 0; transition: opacity .38s ease; pointer-events: none;
}
/* 卡片文案：客户名（左上角·加粗放大，做主标题）+ 案例标题与描述（左下角）——字段均可在后台案例编辑里改 */
.case-grid .meta .co {
  align-self: flex-start; max-width: 100%;
  font-size: 20px; font-weight: 700; letter-spacing: .3px; color: #fff;
  line-height: 1.28; text-shadow: 0 1px 12px rgba(0,0,0,.65);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  /* 悬停才出现：自上而下归位 */
  opacity: 0; transform: translateY(-10px);
  transition: opacity .3s ease .06s, transform .45s cubic-bezier(.2,.7,.3,1) .06s;
}
.case-grid .meta .ti {
  font-size: 20px; line-height: 1.35; font-weight: 500; color: #fff;
  letter-spacing: .5px; margin-top: auto;
  text-shadow: 0 1px 12px rgba(0,0,0,.35);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  /* 悬停才出现：自下而上归位（比客户名稍晚，形成层次） */
  opacity: 0; transform: translateY(14px);
  transition: opacity .3s ease .1s, transform .5s cubic-bezier(.2,.7,.3,1) .1s;
}
.case-grid .meta .de {
  font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.8);
  margin-top: 8px; letter-spacing: .2px;
  text-shadow: 0 1px 10px rgba(0,0,0,.3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  opacity: 0; transform: translateY(14px);
  transition: opacity .3s ease .14s, transform .5s cubic-bezier(.2,.7,.3,1) .14s;
}
/* 含视频角标（右上角小播放图标）：与文案同步，只在悬停 / 键盘聚焦 / 触屏时出现。
   常态保持「纯图片、无任何文字与装饰」的既定观感，不破坏卡片设计。 */
.case-grid .meta .vd {
  position: absolute; top: 20px; right: 20px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(0,0,0,.42); border: 1px solid rgba(255,255,255,.6);
  box-sizing: border-box; pointer-events: none;
  opacity: 0; transform: translateY(-10px);
  transition: opacity .3s ease .06s, transform .45s cubic-bezier(.2,.7,.3,1) .06s;
}
.case-grid .meta .vd:before {
  content: ""; position: absolute; left: 11px; top: 9px;
  border-style: solid; border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent #fff;
}
@media (max-width: 980px) {
  .case-grid .meta { padding: 23px 17px 19px; }
  .case-grid .meta .co { font-size: 16px; letter-spacing: .2px; }
  .case-grid .meta .ti { font-size: 16px; }
  .case-grid .meta .de { font-size: 12px; margin-top: 6px; }
}
/* ≤560px 单列：卡片变宽，字号回补一档，保持与桌面相近的阅读节奏 */
@media (max-width: 560px) {
  .case-grid .meta { padding: 24px 19px 20px; }
  .case-grid .meta .co { font-size: 17px; }
  .case-grid .meta .ti { font-size: 18px; }
  .case-grid .meta .de { font-size: 13px; }
}
/* 手机（触屏且视口 <720px）：文案常显（否则手机上将永远看不到案例文字）。
   2026-09-15 起收窄为「仅手机」——平板触屏改为默认隐藏、轻点展开，见文件末尾同名章节。 */
@media (hover: none) and (max-width: 719px) {
  .case-grid .meta:before { opacity: 1; }
  .case-grid .meta .co,
  .case-grid .meta .ti,
  .case-grid .meta .de { opacity: 1; transform: none; }
  .case-grid .meta .vd { opacity: 1; transform: none; }
}
.case-grid .item .tags {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  display: flex; flex-wrap: wrap;
}
.case-grid .item .tags span {
  font-size: 10px; color: #fff; background: rgba(0,0,0,.55);
  padding: 3px 8px; border-radius: 2px; margin: 0 4px 4px 0; letter-spacing: .5px;
}
/* 更多案例按钮 */
.more-btn { text-align: center; margin-top: 46px; }
.more-btn a {
  display: inline-block; padding: 12px 54px; border: 1px solid #111;
  font-size: 14px; letter-spacing: 3px; color: #111; transition: all .35s ease;
}
.more-btn a:hover { background: #111; color: #fff; }

/* 内页案例库使用非填充正方形，改为横图 */
.case-lib .case-grid .thumb { aspect-ratio: 6 / 5; }
.case-lib .case-grid .item { width: 33.3333%; }

/* 案例图 hover 增亮 */
.case-grid .thumb { background: #111; }
.case-grid .thumb img { filter: saturate(.92); }
.case-grid .item a:hover .thumb img { transform: scale(1.06); filter: saturate(1.05); }

/* 悬停遮罩：铺一层半透明黑压暗画面，突出每张卡编辑后的文案（首页精选 + 案例库共用） */
.case-grid .thumb:after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: rgba(0,0,0,.42);
  opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.case-grid .item a:hover .thumb:after { opacity: 1; }
.case-grid .item a:hover .meta:before,
.case-grid .item a:focus-visible .meta:before { opacity: 1; }
.case-grid .item a:hover .meta .co,
.case-grid .item a:hover .meta .ti,
.case-grid .item a:hover .meta .de,
.case-grid .item a:focus-visible .meta .co,
.case-grid .item a:focus-visible .meta .ti,
.case-grid .item a:focus-visible .meta .de {
  opacity: 1; transform: translateY(0);
  text-shadow: 0 1px 14px rgba(0,0,0,.85);
}
.case-grid .item a:hover .meta .vd,
.case-grid .item a:focus-visible .meta .vd { opacity: 1; transform: translateY(0); }

/* ---------- 首页服务三卡 ---------- */
.svc-cards3 { display: flex; gap: 26px; }
.svc-cards3 .sc {
  flex: 1; background: #fff; border: 1px solid var(--c-line);
  padding: 38px 30px 34px; display: block; position: relative;
  transition: all .35s ease;
}
.svc-cards3 .sc:hover { transform: translateY(-6px); box-shadow: 0 14px 34px rgba(0,0,0,.08); border-color: #111; }
.svc-cards3 .no { font-family: var(--font-en); font-size: 14px; color: #bbb; letter-spacing: 3px; }
.svc-cards3 h4 { font-size: 21px; color: #111; margin: 14px 0 12px; font-weight: 500; }
.svc-cards3 p { font-size: 13px; color: #888; line-height: 2; }
@media (max-width: 900px) {
  .svc-cards3 { display: block; padding: 0 16px; }
  .svc-cards3 .sc { margin-bottom: 16px; }
}

/* ---------- 案例详情头图（真实大图 + 叠字；头部比例沿用首页 banner：92vh / min-height 560px） ---------- */
.case-cover { position: relative; width: 100%; height: 92vh; min-height: 560px; overflow: hidden; }
.case-cover .cover-img { position: absolute; inset: 0; }
.case-cover .cover-img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.case-cover .cover-img:after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.10) 40%, rgba(0,0,0,.62) 100%);
}
.case-cover .cover-txt {
  position: absolute; left: 0; bottom: 8%; width: 100%; z-index: 2; color: #fff;
}
.case-cover .cover-txt .inner { max-width: 1100px; margin: 0 auto; padding: 0 30px; }
.case-cover .cover-txt .tag {
  display: inline-block; font-size: 12px; letter-spacing: 2px;
  border: 1px solid rgba(255,255,255,.7); padding: 5px 16px; margin-bottom: 20px;
}
.case-cover .cover-txt h2 { font-size: 52px; line-height: 1.35; color: #fff; font-weight: 300; letter-spacing: 1px; }
.case-cover .cover-txt h2 em {
  display: block; font-style: normal; font-size: 30px; font-weight: 300;
  margin-top: 10px; opacity: .85;
}
@media (max-width: 900px) {
  .case-cover { height: 72vh; }
  .case-cover .cover-txt h2 { font-size: 34px; }
  .case-cover .cover-txt h2 em { font-size: 22px; }
}

/* ---------- 首页观点区 ---------- */
.home-views { padding: 30px 0 20px; background: #fafafa; border-top: 1px solid var(--c-line); }
.view-tabs { display: flex; justify-content: center; flex-wrap: wrap; padding: 40px 0 30px; }
.view-tabs a {
  margin: 0 18px; font-size: 16px; color: #999; letter-spacing: 2px; cursor: pointer;
  padding-bottom: 6px; border-bottom: 2px solid transparent;
}
.view-tabs a.on, .view-tabs a:hover { color: #111; border-color: #111; }
.view-panels { max-width: 1100px; margin: 0 auto; }
.view-panel { display: none; padding-bottom: 60px; }
.view-panel.on { display: block; }
.view-panel ul { display: flex; flex-wrap: wrap; }
.view-panel li { width: 50%; padding: 16px 26px; display: flex; align-items: baseline; }
.view-panel li .date { font-family: var(--font-en); color: #bbb; font-size: 13px; margin-right: 22px; min-width: 84px; }
.view-panel li a { font-size: 16px; color: #333; letter-spacing: .5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-panel li a:hover { color: #111; }
@media (max-width: 760px) {
  .view-panel li { width: 100%; padding: 12px 6px; }
  .home-views { padding: 10px 12px; }
}

/* ---------- 关于首页模块 ---------- */
.home-about { padding: 30px 0 90px; }
.home-about .flex { display: flex; align-items: center; gap: 70px; }
.home-about .media { width: 46%; }
.home-about .media .imgbox { background: #eee; height: 420px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.home-about .media img { width: 100%; height: 100%; object-fit: cover; }
.home-about .desc { flex: 1; }
.home-about .desc .en { font-family: var(--font-en); letter-spacing: 5px; color: #999; font-size: 13px; text-transform: uppercase; }
.home-about .desc h3 { font-size: 32px; margin: 18px 0 20px; font-weight: 300; line-height: 1.6; }
.home-about .desc p { font-size: 15px; margin-bottom: 16px; line-height: 2.1; }
.home-about .desc .more { margin-top: 24px; }
@media (max-width: 900px) {
  .home-about .flex { display: block; padding: 0 16px; }
  .home-about .media { width: 100%; margin-bottom: 30px; }
}

/* ---------- 首页资讯大版（SERVICES 区块） ---------- */
.hz-style { display: none; }

/* ---------- 页脚（参考 hzvis：左侧大字导航 + 品牌/口号/版权 + Tel/地址 + 二维码） ---------- */
/* 整体文字已按视觉合适比例缩小（导航 46→30、品牌 24→19、Tel 34→27、正文 18→15 等） */
.footer { background: #111; color: #9a9a9a; margin-top: 0; }
.footer-main {
  padding: 60px 0 34px; display: flex;
  align-items: flex-start; justify-content: space-between;
}
.footer .footnav { display: flex; flex-direction: column; }
.footer .footnav a {
  font-size: 30px; line-height: 36px; letter-spacing: 0;
  color: #fff; font-weight: 700;
  transition: opacity .25s ease;
}
.footer .footnav a:hover { opacity: .5; }
.footer .fcol { }
.footer .mes1 { max-width: 360px; }
.footer .mes1 .p1 { margin-bottom: 40px; }
.footer .mes1 .p1 a {
  display: block; font-size: 19px; line-height: 28px; color: #fff; letter-spacing: 0;
}
.footer .mes1 .p1 .slogan {
  display: block; font-size: 15px; line-height: 24px; color: #fff; margin-top: 6px;
}
.footer .mes1 .p2 { font-size: 15px; line-height: 24px; color: #fff; letter-spacing: 0; }
.footer .mes2 { max-width: 360px; }
.footer .mes2 .tel {
  display: block; font-size: 27px; line-height: 34px; letter-spacing: 0;
  color: #fff; padding: 6px 0 10px; font-family: var(--font-en);
  white-space: nowrap;
}
.footer .mes2 .tel .tel-name {
  display: inline-block;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 15px; color: #fff; margin-left: 10px; white-space: nowrap;
  line-height: 34px; vertical-align: top;
}
.float-side .qcode .tel-name {
  font-size: 11px; color: #666; margin-left: 2px;
}
.footer .mes2 .addr { font-size: 15px; line-height: 28px; color: #fff; letter-spacing: 0; }
.footer .ewm { text-align: center; }
.footer .ewm .qrimg {
  display: flex; align-items: center; justify-content: center;
  width: 92px; height: 92px; background: #fff; color: #333;
  font-size: 12px; text-align: center; line-height: 1.6; margin: 4px auto 20px;
}
.footer .ewm .qrtxt { font-size: 14px; line-height: 24px; color: #fff; letter-spacing: 0; }
.footer-copy {
  border-top: 1px solid #2a2a2a; padding: 20px 0;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  font-size: 12px; color: #777;
}
.footer-copy a { color: #777; }
.footer-copy a:hover { color: #fff; }
@media (max-width: 980px) {
  .footer-main { display: block; padding: 50px 16px 30px; }
  .footer .mes2 .tel { font-size: 24px; }
  .footer .mes2 .tel .tel-name { font-size: 14px; margin-left: 8px; line-height: 24px; }
  .footer .footnav { display: flex; flex-direction: row; flex-wrap: wrap; gap: 18px 30px; margin-bottom: 30px; }
  .footer .footnav a { font-size: 26px; line-height: 32px; }
  .footer .mes1 { max-width: 100%; margin-bottom: 28px; }
  .footer .mes1 .p1 { margin-bottom: 24px; }
  .footer .mes2 { max-width: 100%; margin-bottom: 26px; }
  .footer .ewm { text-align: left; }
  .footer .ewm .qrimg { display: inline-flex; margin: 4px 0 14px; }
  .footer-copy { padding: 18px 16px; display: block; }
  .footer-copy div { margin-bottom: 6px; }
}

/* ---------- 通用内页排版 ---------- */
.page-sec { padding: 70px 0; }
.page-sec.gray { background: #fafafa; }
.page-article {
  max-width: 1000px; margin: 0 auto; font-size: 15px; line-height: 2.2; color: #555;
}
.page-article p { margin-bottom: 22px; }
.page-article h4 { font-size: 22px; margin: 40px 0 16px; color: #111; font-weight: 500; }
.page-article img { margin: 16px auto; }
.page-article .lead { font-size: 17px; color: #333; }

/* 首页横幅区英文小标复用 */
.en-kicker { font-family: var(--font-en); letter-spacing: 4px; text-transform: uppercase; font-size: 12px; color: #999; }

/* 案例图占位（品牌暖色渐变，体现设计感） */
.ph-0 { background: linear-gradient(135deg, #f6d8c6 0%, #e8b298 55%, #d19370 100%); }
.ph-1 { background: linear-gradient(135deg, #d9e0ec 0%, #a9b7cc 55%, #7f91ab 100%); }
.ph-2 { background: linear-gradient(135deg, #d7e7da 0%, #a3c9ad 55%, #74a887 100%); }
.ph-3 { background: linear-gradient(135deg, #e6dcf0 0%, #c4addb 55%, #9d7fc0 100%); }
.ph-4 { background: linear-gradient(135deg, #f2e2c8 0%, #dcbf8a 55%, #c09d5f 100%); }
.ph-5 { background: linear-gradient(135deg, #cfe3ec 0%, #93c2d8 55%, #649db8 100%); }
.ph-6 { background: linear-gradient(135deg, #f4d5d5 0%, #e2a0a0 55%, #c97c7c 100%); }
.ph-7 { background: linear-gradient(135deg, #dfe8d4 0%, #b4c99a 55%, #8fae6e 100%); }
.ph-8 { background: linear-gradient(135deg, #ece2d4 0%, #d0bb9e 55%, #b0966f 100%); }
.ph-9 { background: linear-gradient(135deg, #d5dbe6 0%, #a4b1c9 55%, #7d8cab 100%); }
.ph-10 { background: linear-gradient(135deg, #f7e7c8 0%, #edc982 55%, #d9a94e 100%); }
.ph-11 { background: linear-gradient(135deg, #d2e6e0 0%, #9cc9bd 55%, #6fab9b 100%); }
.ph-12 { background: linear-gradient(135deg, #eedfd6 0%, #d4b09d 55%, #b98a70 100%); }
.ph-13 { background: linear-gradient(135deg, #cfe0ec 0%, #97b9d6 55%, #6d97ba 100%); }

/* 占位图上品牌首字/剪影 */
.ph-letter {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 64px; font-weight: 600; color: rgba(255,255,255,.78);
  letter-spacing: 2px; font-family: var(--font-en);
  text-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.ph-letter.sm { font-size: 44px; }

/* 首页横向大图（用于概念展示位） */
.full-img { width: 100%; height: 60vh; min-height: 360px; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; }
.full-img .ph-letter { font-size: 80px; }

/* ---------- 动画 ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(30px);} to { opacity: 1; transform: none; } }
html.js-ok .reveal { opacity: 0; }
html.js-ok .reveal.on { animation: fadeUp .8s ease forwards; }

/* ==========================================================
   内页模块补充样式
   ========================================================== */

/* ---------- 关于页：理念/描述块 ---------- */
.statement { padding: 80px 0 20px; }
.statement .wrap { max-width: 980px; }
.statement h4 { font-size: 28px; color: #111; line-height: 1.7; margin-bottom: 26px; font-weight: 300; }
.statement p { font-size: 15px; margin-bottom: 18px; }

/* 核心价值观 3 卡 */
.values { padding: 40px 0; }
.values .flex { display: flex; gap: 34px; }
.values .card {
  flex: 1; border: 1px solid var(--c-line); padding: 40px 30px;
  transition: all .4s ease;
}
.values .card:hover { box-shadow: 0 10px 30px rgba(0,0,0,.07); transform: translateY(-4px); }
.values .card .num { font-family: var(--font-en); font-size: 13px; color: #bbb; letter-spacing: 3px; }
.values .card h5 { font-size: 20px; margin: 14px 0 12px; color: #111; }
.values .card p { font-size: 14px; color: #666; line-height: 2; }
@media (max-width: 900px) { .values .flex { display: block; } .values .card { margin-bottom: 16px; } }
/* 价值观 4 卡 2x2（views 品牌理念页） */
.values .flex2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.values .flex2 .card { margin: 0; }
@media (max-width: 900px) { .values .flex2 { display: block; } .values .flex2 .card { margin-bottom: 16px; } }

/* 历程时间轴 */
.timeline { padding: 40px 0 90px; }
.timeline ul { max-width: 900px; margin: 0 auto; border-left: 1px solid #ddd; padding-left: 40px; }
.timeline li { position: relative; padding-bottom: 36px; }
.timeline li:before {
  content: ""; position: absolute; left: -46px; top: 6px; width: 11px; height: 11px;
  border-radius: 50%; background: #fff; border: 2px solid #111;
}
.timeline .year { font-family: var(--font-en); font-size: 22px; color: #111; letter-spacing: 1px; }
.timeline .txt { font-size: 15px; color: #555; margin-top: 4px; }

/* 双栏图文字块 */
.split { display: flex; gap: 60px; align-items: center; }
.split .media { width: 46%; }
.split .media .imgbox { height: 360px; background: #eee; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.split .media .imgbox img { width: 100%; height: 100%; object-fit: cover; }
.split .body { flex: 1; }
.split .body h4 { font-size: 26px; color: #111; margin-bottom: 18px; font-weight: 300; }
.split .body p { font-size: 15px; margin-bottom: 14px; line-height: 2.1; }
.split.rev .media { order: 2; }
@media (max-width: 900px) {
  .split { display: block; padding: 0 16px; }
  .split .media { width: 100%; margin-bottom: 24px; }
  .split.rev .media { order: 0; }
}

/* ---------- 服务页 ---------- */
.svc-hero { padding: 100px 0 30px; }
.svc-hero .wrap { display: flex; gap: 80px; align-items: flex-end; }
.svc-hero .en { font-family: var(--font-en); letter-spacing: 6px; color: #999; text-transform: uppercase; font-size: 13px; margin-bottom: 14px; }
.svc-hero h4 { font-size: 34px; font-weight: 300; line-height: 1.6; }
.svc-hero p { flex: 1; font-size: 14px; color: #777; line-height: 2; }
@media (max-width: 900px) { .svc-hero .wrap { display: block; padding: 0 16px; } .svc-hero p { margin-top: 20px; } }

.svc-block { padding: 30px 0 20px; }
.svc-card {
  display: flex; border-bottom: 1px solid #eee; padding: 46px 0; gap: 70px;
  scroll-margin-top: 100px;
}
.svc-card:first-child { padding-top: 20px; }
.svc-card:last-child { border-bottom: 0; }
.svc-card .hd { width: 340px; flex-shrink: 0; align-self: center; }
.svc-card .hd .idx {
  font-family: var(--font-en); font-size: 12px; color: #fff; background: #111;
  display: inline-block; padding: 4px 10px; letter-spacing: 2px; margin-bottom: 14px;
}
.svc-card .hd h5 { font-size: 30px; font-weight: 300; margin: 0 0 6px; color: #111; letter-spacing: 1px; }
.svc-card .hd .en2 { font-family: var(--font-en); color: #999; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; }
.svc-card .hd .intro { font-size: 14px; color: #777; margin-top: 16px; line-height: 2; }
.svc-card .bd { flex: 1; align-self: center; }
.svc-card .bd ul {
  display: flex; flex-wrap: wrap; gap: 12px; width: 100%;
  list-style: none; padding: 0; margin: 0;
}
.svc-card .bd li {
  padding: 12px 18px; font-size: 14px; color: #333;
  background: #f6f6f6; border: 1px solid #eee; border-radius: 4px;
  transition: all .25s ease; position: relative;
}
.svc-card .bd li:hover { background: #111; border-color: #111; color: #fff; }
.svc-card .bd li:before {
  content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: #bbb; margin-right: 10px; vertical-align: middle; transition: background .25s ease;
}
.svc-card .bd li:hover:before { background: #fff; }
@media (max-width: 900px) {
  .svc-block { padding: 10px 0 20px; }
  .svc-card { display: block; padding: 36px 16px; gap: 0; }
  .svc-card .hd { width: 100%; }
  .svc-card .bd li { width: auto; }
}

/* 流程 */
.process { background: #fafafa; padding: 90px 0; }
.process .steps { display: flex; justify-content: space-between; margin-top: 40px; flex-wrap: wrap; }
.process .step { width: 18%; text-align: center; position: relative; }
.process .step .dot {
  width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%;
  background: #111; color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-en); font-size: 22px;
  position: relative; z-index: 1;
}
.process .step h6 { font-size: 16px; color: #111; margin-bottom: 8px; }
.process .step p { font-size: 12px; color: #888; line-height: 1.9; }
/* 连接线：从上一圆圆心水平贯穿至本圆圆心（线宽=两圆心距151.8%，起点=上一圆心-101.9%），
   黑圆(z-index:1)覆盖线两端，露出的线段即两数字正中间的对称短线 */
.process .step + .step:before {
  content: ""; position: absolute; left: -101.9%; top: 32px; width: 151.8%; height: 1px; background: #ddd;
}
@media (max-width: 900px) {
  .process .step { width: 46%; margin-bottom: 26px; }
  .process .step + .step:before { display: none; }
}

/* ---------- 案例库 ---------- */
.case-lib { padding: 40px 0 90px; }
/* 2026-09-15 用户要求：案例页（case.html）内容区两边各留白 100px，
   与导航栏、首页精选对齐（原先用全局 .wrap = 1200px 居中，1440 下两侧各空 120px）。
   .case-lib > .wrap 是筛选条 + 案例网格的共同父容器，只作用于案例库页，
   不影响页脚的 .wrap.footer-main / .wrap.footer-copy（仍 1200 居中）。
   与 .header-inner 用同一条 clamp：≥1200px 恒为 100px，更窄等比收缩、保底 16px。 */
.case-lib > .wrap {
  width: 100%; max-width: none; margin: 0;
  padding: 0 clamp(16px, calc((100% - 980px) / 2), 100px);
}
/* 分类导航 C：双行英中 + 底部通栏细线 + 滑动指示条（选中项平滑滑动 / hover 浅灰预位） */
.filters {
  position: relative; display: flex; justify-content: flex-end; flex-wrap: wrap;
  margin: 6px 0 26px; padding-bottom: 22px;
  /* 底部通栏细线：作为指示条运行的轨道 */
  background-image: linear-gradient(#eee, #eee);
  background-size: 100% 1px; background-position: left bottom; background-repeat: no-repeat;
}
.filters a {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center;
  min-width: 108px; padding: 12px 14px 16px; text-decoration: none;
  transition: color .25s ease; -webkit-tap-highlight-color: transparent;
}
.filters a .f-en {
  font-family: var(--font-en); font-size: 12px; letter-spacing: 2px;
  color: #6b6b6b; line-height: 1.2; transition: color .25s ease;
}
.filters a .f-zh { font-size: 16px; letter-spacing: 2px; color: #999; margin-top: 7px; transition: color .25s ease; }
.filters a:hover .f-zh { color: #555; }
.filters a:hover .f-en { color: #3f3f3f; }
.filters a.on .f-zh { color: #111; font-weight: 600; }
.filters a.on .f-en { color: #111; }
/* 滑动指示条：绝对定位在底部细线之上；默认吸附「全部」 */
.f-slider {
  position: absolute; z-index: 0; bottom: 0; left: 0;
  height: 3px; width: 36px; background: #111;
  pointer-events: none;
  transition: transform .32s cubic-bezier(.4, 0, .2, 1), width .32s cubic-bezier(.4, 0, .2, 1);
}
.filters .f-slider.pre { background: #cfcfcf; transition: transform .25s ease, width .25s ease, background .15s ease; }
.filters a.on + .f-slider { z-index: 1; }
/* 案例库网格无缝：移除卡片间 1px #f0f0f0 分隔边框，行间 -1px 重叠兜底亚像素行缝（与首页精选同方案） */
.case-lib .case-grid .item { border-bottom: 0; border-right: 0; margin-bottom: -1px; }
@media (max-width: 900px) {
  .case-lib .case-grid .item { width: 50% !important; }
  .home-grid .item { width: 50% !important; }
  /* 2026-09-15 移动端体检④：窄屏下 6 个分类必然折行，
     而 justify-content:flex-end 会让每一行各自右贴 → 两行左缘错位
     （390 实测第一行左缘 91px、第二行 77px），看起来像没对齐。
     改居中后两行左右对称，整体才像"一组"。指示条按实际 rect 跟随，不受影响。 */
  .filters { padding-bottom: 18px; justify-content: center; }
  .filters a { min-width: 80px; padding: 10px 10px 14px; }
  .filters a .f-zh { font-size: 15px; letter-spacing: 1px; }
}
@media (max-width: 560px) {
  .case-lib .case-grid .item { width: 100% !important; }
  .home-grid .item { width: 100% !important; }
}

/* 翻页 */
.pager { display: flex; justify-content: center; gap: 6px; margin-top: 60px; }
.pager a, .pager span {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border: 1px solid #ddd; font-size: 14px; color: #666; transition: all .3s;
}
.pager a:hover { border-color: #111; color: #111; }
.pager .on { background: #111; border-color: #111; color: #fff; }
.pager .nextp, .pager .prevp { width: auto; padding: 0 14px; }

/* ---------- 案例详情 ---------- */
.case-detail { padding: 0 0 90px; }
.case-detail .cd-head { max-width: 860px; margin: 0 auto; padding: 90px 0 40px; }
.case-detail .cd-head .tag {
  display: inline-block; font-size: 12px; color: #111; border: 1px solid #111;
  padding: 4px 14px; letter-spacing: 1px; margin-bottom: 22px;
}
.case-detail .cd-head h1, .case-detail .cd-head h2 { font-size: 40px; line-height: 1.5; font-weight: 300; letter-spacing: 0; }
.case-detail .cd-head p.sub { margin-top: 16px; font-size: 15px; color: #777; max-width: 760px; line-height: 2; }
.case-detail .cd-info {
  max-width: 860px; margin: 0 auto; border-top: 1px solid #eee; border-bottom: 1px solid #eee;
  padding: 22px 0; display: flex; flex-wrap: wrap; font-size: 14px; color: #555;
}
.case-detail .cd-info span { margin-right: 44px; line-height: 2; }
.case-detail .cd-info b { font-weight: 600; color: #111; }
.case-body { max-width: 860px; margin: 50px auto 0; }
.case-body h4 { font-size: 24px; margin: 52px 0 18px; font-weight: 500; color: #111; }
.case-body h4.first { margin-top: 0; }
.case-body p { font-size: 15px; color: #555; line-height: 2.3; margin-bottom: 20px; }
.case-figure {
  width: 100%; margin: 30px 0;
  background: #f4f4f4; overflow: hidden;
}
.case-figure img { display: block; width: 100%; height: auto; }
.case-figure.tall { height: auto; }
/* 案例详情：视频播放区（2026-09-10 新增）
   原生 controls 已具备播放/进度/音量/全屏；字幕条放在视频下方而非叠加，
   避免遮挡原生控制栏。 */
.case-video {
  width: 100%; margin: 30px 0;
  background: #111; overflow: hidden;
}
.case-video video { display: block; width: 100%; height: auto; background: #000; }
.case-video figcaption {
  padding: 11px 18px; background: #111;
  color: rgba(255,255,255,.7); font-size: 12px; letter-spacing: 1px;
}
.case-quote {
  border-left: 3px solid #111; padding: 6px 24px; margin: 40px 0;
  font-size: 20px; color: #111; line-height: 2; font-weight: 300;
}
.cd-relation { margin-top: 70px; border-top: 1px solid #eee; padding-top: 50px; }
.cd-relation .t { font-size: 20px; color: #111; margin-bottom: 30px; letter-spacing: 2px; }
@media (max-width: 900px) {
  .case-detail .cd-head, .case-detail .cd-info, .case-body { padding-left: 16px; padding-right: 16px; }
  .case-detail .cd-head h1, .case-detail .cd-head h2 { font-size: 28px; }
}

/* ---------- 资讯列表 ---------- */
.news-list { padding: 50px 0 90px; }
.news-list .wrap { max-width: 1080px; }
.news-item {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid #eee; padding: 30px 6px; transition: all .3s;
}
.news-item:hover { padding-left: 16px; }
.news-item .ti { font-size: 18px; color: #222; letter-spacing: .5px; }
.news-item:hover .ti { color: #111; }
.news-item .d { font-family: var(--font-en); color: #bbb; font-size: 13px; white-space: nowrap; margin-left: 24px; }

/* ---------- 文章详情 ---------- */
.article-page { padding: 40px 0 90px; }
.article-page .wrap { max-width: 900px; }
.article-page .a-head { text-align: center; margin-bottom: 50px; }
.article-page .a-head .cat { display: inline-block; font-size: 12px; letter-spacing: 2px; color: #999; border: 1px solid #ddd; padding: 4px 16px; margin-bottom: 22px; }
.article-page .a-head h1 { font-size: 34px; line-height: 1.6; font-weight: 300; }
.article-page .a-head .meta { margin-top: 18px; color: #aaa; font-size: 13px; }
.article-page .a-body { font-size: 16px; color: #555; line-height: 2.3; }
.article-page .a-body p { margin-bottom: 24px; }
.article-page .a-body h4 { font-size: 22px; margin: 40px 0 16px; color: #111; }
/* 文章正文小标题（2026-09-21 新增）：正文行首 `## ` / `### ` 渲染为 h2/h3，
   给文章一个可被搜索引擎与 AI 引擎抽取的层级结构。行高从正文的 2.3 收回正常值，否则标题会散开。 */
.article-page .a-body h2 { font-size: 24px; line-height: 1.6; margin: 44px 0 16px; color: #111; }
.article-page .a-body h3 { font-size: 19px; line-height: 1.7; margin: 34px 0 14px; color: #222; }
.article-page .a-body h2:first-child, .article-page .a-body h3:first-child { margin-top: 0; }
.article-page .a-body b { color: #222; font-weight: 600; }
.article-page .a-nav { margin-top: 60px; border-top: 1px solid #eee; padding-top: 26px; }
.article-page .a-nav a { display: block; font-size: 14px; color: #666; line-height: 2.2; }
.article-page .a-nav a:hover { color: #111; }

/* ---------- 联系页 ---------- */
.contact-main { padding: 90px 0 70px; }
/* 居中标题区 */
.c-head { text-align: center; max-width: 780px; margin: 0 auto 54px; }
.c-head .c-en {
  font-family: var(--font-en); font-size: 12px; letter-spacing: 5px;
  color: #999; text-transform: uppercase; margin-bottom: 12px;
}
.c-head h3 { font-size: 32px; font-weight: 300; color: #111; letter-spacing: 2px; }
.c-head p.tip { font-size: 14px; color: #777; margin: 20px auto 0; line-height: 2.1; max-width: 720px; }
/* 联系方式信息卡网格 */
.c-cards {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 18px; max-width: 980px; margin: 0 auto;
}
.c-card {
  border: 1px solid #eee; background: #fff; padding: 26px 28px;
  transition: box-shadow .3s ease, transform .3s ease;
}
.c-card:hover { box-shadow: 0 8px 26px rgba(0,0,0,.07); transform: translateY(-2px); }
.c-card .k {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: #888; letter-spacing: 2px; margin-bottom: 12px;
}
.c-card .k .k-en {
  font-family: var(--font-en); font-size: 12px; letter-spacing: 2px;
  color: #fff; background: #111; padding: 3px 8px;
}
.c-card .v { font-size: 18px; color: #111; line-height: 1.7; word-break: break-all; }
.c-card .v a { color: #111; border-bottom: 1px solid transparent; transition: border-color .25s ease; }
.c-card .v a:hover { border-color: #111; }
/* 2026-09-15 移动端体检（待定项1）：电话/邮箱/网址都是行内链接，可点高度只有 23px。
   行内元素的纵向 padding 不参与行盒计算 → padding:12px 0 只把热区撑到约 47px，
   文字位置、行距、版面全部零变化（实测热区 23px → 47px 且上下对称）。
   注：也试过用绝对定位的 :after 外扩，但行内元素的包含块上下不对称
   （上 10px 命中、下 10px 落空），故改用 padding。
   padding 会把 hover 下划线推到文字下方 12px 处，所以触屏下换成 text-decoration。 */
@media (hover: none) and (pointer: coarse) {
  .c-card .v a { padding: 12px 0; }
  .c-card .v a:hover { border-color: transparent; text-decoration: underline; }
  /* 微信卡下方紧跟的说明文字（李总监 · 微信同号）会压在链接下部热区上，
     它本身不可点 → 让它不参与命中测试，整块 47px 热区就都能点到链接。 */
  .c-card .v .note { pointer-events: none; }
}
.c-card .v .note { display: block; font-size: 13px; color: #999; margin-top: 4px; }
.c-card-wide { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .contact-main { padding: 64px 16px 48px; }
  .c-cards { gap: 14px; }
  .c-head { margin-bottom: 38px; }
  .c-head h3 { font-size: 26px; }
}
@media (max-width: 600px) {
  .c-cards { grid-template-columns: 1fr; }
  .c-card .v { font-size: 16px; }
}

/* 招聘 CTA */
.job-cta { background: #111; color: #fff; padding: 90px 0; text-align: center; }
.job-cta .en { font-family: var(--font-en); letter-spacing: 5px; color: rgba(255,255,255,.5); font-size: 12px; text-transform: uppercase; }
.job-cta h4 { color: #fff; font-size: 30px; font-weight: 300; margin: 18px 0 10px; }
.job-cta p { color: rgba(255,255,255,.7); font-size: 14px; }
.job-cta .mail { display: inline-block; margin-top: 26px; border: 1px solid rgba(255,255,255,.6); padding: 12px 34px; color: #fff; letter-spacing: 2px; }
.job-cta .mail:hover { background: #fff; color: #111; }

/* 地图占位 */
.mapbox { height: 380px; background: #f3f3f3; position: relative; display: flex; align-items: center; justify-content: center; color: #999; font-size: 14px; max-width: 980px; margin: 0 auto; border: 1px solid #eee; overflow: hidden; }
@media (max-width: 900px) {
  .mapbox { max-width: none; margin: 0 32px; height: 320px; width: auto; }
}
@media (max-width: 600px) {
  .mapbox { height: 280px; margin: 0 32px; }
}
.mapbox .pin {
  width: 90px; height: 90px; border-radius: 50%; background: #111; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1.7; letter-spacing: 1px;
}

/* ---------- 浮动联系条（仿巴顿右侧浮层） ---------- */
.float-side {
  position: fixed; right: 14px; bottom: 110px; z-index: 900; display: flex; flex-direction: column; gap: 10px;
}
.float-side a, .float-side .f-box {
  width: 52px; height: 52px; border-radius: 50%;
  background: #fff; border: 1px solid #e2e2e2; color: #111;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 11px; letter-spacing: 0; text-align: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.08); transition: all .3s ease;
  line-height: 1.5;
}
.float-side a b, .float-side .f-box b { font-size: 9px; }
.float-side a:hover, .float-side .f-box:hover { background: #111; color: #fff; border-color: #111; }
.float-side .wechat .qcode {
  position: absolute; right: 66px; bottom: -30px; width: 132px; padding: 10px;
  background: #fff; border: 1px solid #eee; box-shadow: 0 6px 20px rgba(0,0,0,.1);
  display: none; text-align: center; font-size: 11px; color: #666;
}
.float-side .wechat:hover .qcode { display: block; }
.float-side .wechat { position: relative; }

/* 返回顶部 */
#toTop {
  width: 44px; height: 44px; border-radius: 50%; background: rgba(17,17,17,.82); color: #fff;
  position: fixed; right: 18px; bottom: 26px; z-index: 900; display: none;
  align-items: center; justify-content: center; font-size: 18px; cursor: pointer;
  border: none; transition: opacity .3s;
}
#toTop.show { display: flex; }
#toTop:hover { opacity: .75; }

/* ---------- 首页信任墙 ---------- */
.trust-wall ul { display: flex; justify-content: space-between; margin-bottom: 22px; }
.trust-wall li {
  width: 16.6%; display: flex; flex-direction: column; align-items: center;
  padding: 18px 6px; opacity: .8; transition: opacity .3s;
}
.trust-wall li:hover { opacity: 1; }
.trust-wall .co-ph {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: #fff; font-weight: 600; font-family: var(--font-en);
}
.trust-wall em { font-style: normal; font-size: 13px; color: #666; margin-top: 10px; letter-spacing: .5px; text-align: center; }
@media (max-width: 760px) {
  .trust-wall ul { flex-wrap: wrap; }
  .trust-wall li { width: 33.3%; }
}

/* ---------- 观点页栏目块 ---------- */
.news-cat { padding-top: 40px; }
.news-grid { display: flex; gap: 50px; align-items: stretch; }
.news-grid .news-main {
  width: 46%; border: 1px solid var(--c-line); padding: 34px 30px;
  display: block; transition: all .35s ease; position: relative;
}
.news-grid .news-main:hover { box-shadow: 0 12px 30px rgba(0,0,0,.07); transform: translateY(-4px); }
.news-grid .news-main .tag { font-size: 11px; color: #fff; background: #111; padding: 3px 12px; letter-spacing: 1px; }
.news-grid .news-main h4 { font-size: 20px; color: #111; margin: 18px 0 10px; line-height: 1.6; }
.news-grid .news-main p { font-size: 13px; color: #888; line-height: 2; }
.news-grid .news-main .d { font-family: var(--font-en); color: #bbb; font-size: 12px; margin-top: 16px; }
.news-list-slim { flex: 1; border-top: 1px solid var(--c-line); }
.news-list-slim li { border-bottom: 1px solid #f0f0f0; display: flex; align-items: center; justify-content: space-between; padding: 22px 6px; }
.news-list-slim a { font-size: 15px; color: #444; }
.news-list-slim a:hover { color: #111; }
.news-list-slim .d { font-family: var(--font-en); color: #ccc; font-size: 12px; white-space: nowrap; margin-left: 20px; }
@media (max-width: 900px) {
  .news-grid { display: block; padding: 0 16px; }
  .news-grid .news-main { width: 100%; margin-bottom: 24px; }
}

/* ==========================================================
   v3 GEO 增补样式（FAQ / sr-only / en-visual / 语义化元素 / 详情图墙）
   ========================================================== */

/* 屏幕阅读器专用（GEO B1：隐藏 H1 仍可被索引） */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* page-banner 视觉英文（GEO H1 上方装饰） */
.page-banner .en-visual {
  font-family: var(--font-en);
  font-size: 14px; letter-spacing: 6px; text-transform: uppercase;
  color: #bbb; margin-bottom: 12px;
}
.page-banner h1 { font-size: 34px; font-weight: 300; line-height: 1.6; letter-spacing: 1px; }
.page-banner.dark .en-visual { color: rgba(255,255,255,.65); }
/* 2026-09-15 移动端体检⑤⑥：桌面 14px + 字距 6px 在 390 宽下整行要约 470px，
   于是折成两行、还断在词组中间（「项目一 / 手思考」）。
   窄屏收字号与字距后单行放得下（最长的一条 = 观点页
   "NEWS & VIEWS · 18年 545+ 项目一手思考"）；同时把 #bbb 加深到 #6b6b6b
   以满足浅灰底上的可读对比度（#bbb 在 #f7f7f7 上仅约 2.4:1）。 */
@media (max-width: 760px) {
  .page-banner .en-visual { font-size: 12px; letter-spacing: 2px; color: #6b6b6b; }
  /* 2026-09-15 移动端体检⑨：内页 H1 在 390 下有 3 个真实问题 ——
     ① 贴边：.page-banner 的左右 padding 原为 0，且容器里没有 .wrap，
        文字从 x=3 排到 x=388（几乎顶到屏幕边）。
     ② 断在词中间、③ 出现孤字行（案例库页末行只有一个「目」）。
     实测过的取舍（不是拍的）：
     - `line-break:strict` 对这三个标题**完全无效**（改前后逐字相同），故不采用；
     - `text-wrap:balance` 反而更糟 —— 它把首行拉短，把「品牌」拆成「品/牌」、「政企」拆成「政/企」；
     - `text-wrap:pretty` 有效（专治孤字行）：24px 时案例库末行由「目」变成「项目」；
     - 字号是真正的杠杆：26px 时服务页仍 3 行，24px 时降到 2 行。
     最终 34px → 24px + pretty：观点/服务/联系三页都降到 2 行，案例库（标题 30 字）仍 3 行但末行不是孤字。
     桌面 1440 实测：H1 字号、高度、换行结果**逐项未变**。 */
  .page-banner h1 { font-size: 24px; text-wrap: pretty; }
}

/* FAQ 折叠（首页/服务/关于/联系可见问答块，B3） */
.faq-sec .faq-list { max-width: 880px; margin: 30px auto 0; }
.faq-item {
  border: 1px solid var(--c-line); border-bottom: none;
  background: #fff;
}
.faq-item:last-child { border-bottom: 1px solid var(--c-line); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 18px 26px;
  font-size: 16px; color: var(--c-title); letter-spacing: .5px;
  display: flex; justify-content: space-between; align-items: center;
  transition: background .3s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:after {
  content: "+"; font-size: 22px; font-weight: 300; color: #999;
  transition: transform .3s ease; flex-shrink: 0; margin-left: 16px;
}
.faq-item[open] summary:after { transform: rotate(45deg); color: #111; }
.faq-item summary:hover { background: #fafafa; }
.faq-item p {
  padding: 0 26px 20px; font-size: 14px; color: #555; line-height: 2.1;
}

/* 案例详情：figcaption / 图墙 */
.case-figure { position: relative; }
.case-figure figcaption {
  position: absolute; left: 0; bottom: 0; z-index: 2; width: 100%;
  padding: 28px 18px 12px;
  background: linear-gradient(transparent, rgba(0,0,0,.6));
  color: #fff; font-size: 12px; letter-spacing: 1px; text-align: left;
}
.case-figure-wall { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 30px; margin-top: 44px; }
.case-figure-wall .case-figure { width: 100%; margin: 0; }
.case-figure-wall .case-figure.tall { height: auto; }
@media (max-width: 900px) {
  .case-figure-wall .case-figure { width: 100%; }
  .case-figure-wall .case-figure.tall { height: auto; }
}

/* 案例详情内页面包屑（独立导航条） */
article .crumbs,
.case-detail ~ nav.crumbs,
.case-cover + nav.crumbs,
.crumbs-dd {
  background: #fff; border-bottom: 1px solid var(--c-line);
  padding: 16px 0; font-size: 13px; color: #999;
}
.crumbs-dd { margin-top: 72px; }  /* 详情页已无头图，面包屑为首个元素，下移避开 fixed 顶部导航 */
.case-cover + nav.crumbs a:hover,
.crumbs-dd a:hover { color: #111; }
.case-cover + nav.crumbs .wrap,
.crumbs-dd .wrap { padding: 0 20px; }

/* 案例封面到主体的负边距衔接 */
article.case-detail { padding-top: 0; }

/* 卡片元信息语义化后 figcaption 覆盖原 .meta 规则 */
.case-grid .item figcaption.meta { display: flex; flex-direction: column; }

/* ============================================================
   观点 / 资讯信息发布平台（views.html · 顶部头图 + 左图右文信息流）
   ============================================================ */
.views-page { padding: 30px 0 80px; }
.views-page .wrap { max-width: 1080px; }
/* 左图右文条目 */
.views-list { border-top: 1px solid #ececec; }
.views-item {
  display: flex; gap: 32px; align-items: center;
  padding: 34px 6px; border-bottom: 1px solid #ececec;
  color: inherit; text-decoration: none; transition: background .15s;
}
.views-item:hover { background: #fafafa; }
/* 左：封面图 / 无封面中性灰块占位 */
.views-item .vi-ph { flex: none; width: 300px; height: 200px; border-radius: 6px; overflow: hidden; background: #f0f0f0; }
.views-item .vi-ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.views-item:hover .vi-ph img { transform: scale(1.02); }
.views-item .vi-ph-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; background: #f4f4f4; border: 1px solid #ececec;
}
.views-item .vi-ph-empty .ph-ic { font-size: 30px; color: #c9c9c9; line-height: 1; }
.views-item .vi-ph-empty .ph-cat {
  font-size: 12px; color: #6b6b6b; letter-spacing: 3px; text-transform: uppercase;
}
/* 右：信息 */
.views-item .vi-main { flex: 1; min-width: 0; }
.views-item .vi-top { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.views-item .vi-date {
  font-size: 13px; color: #b32424; letter-spacing: 1px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.views-item .vi-cat {
  display: inline-block; font-size: 12px; color: #888; border: 1px solid #e0e0e0;
  border-radius: 20px; padding: 1px 12px;
}
.views-item .vi-title { font-size: 22px; font-weight: 500; color: #111; line-height: 1.55; margin-bottom: 8px; }
.views-item:hover .vi-title { color: #b32424; }
.views-item .vi-brief {
  font-size: 15px; color: #777; line-height: 1.9; margin-bottom: 12px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.views-item .vi-more { font-size: 13px; color: #b32424; letter-spacing: 1px; }
.views-item .vi-more .ar { display: inline-block; transition: transform .15s; }
.views-item:hover .vi-more .ar { transform: translateX(4px); }
/* 空列表 */
.views-empty { text-align: center; color: #aaa; padding: 60px 0; font-size: 14px; }
@media (max-width: 900px) {
  .views-item { gap: 22px; padding: 26px 4px; }
  .views-item .vi-ph { width: 220px; height: 150px; }
  .views-item .vi-title { font-size: 19px; }
}
@media (max-width: 700px) {
  .views-item { display: block; }
  .views-item .vi-ph { width: 100%; height: auto; aspect-ratio: 3/2; margin-bottom: 14px; }
  .views-item .vi-title { font-size: 18px; }
}

/* 文章详情页（article-detail/<doc>.html）沿用既有 .article-page / .a-head / .a-body / .a-nav 样式，
   补充：正文图片与详情首图 */
.article-page .a-cover { margin-bottom: 36px; border-radius: 6px; overflow: hidden; }
.article-page .a-cover img { display: block; width: 100%; height: auto; }
.article-page .a-body img.article-img { display: block; max-width: 100%; margin: 28px auto; }
.article-page .a-body .case-quote { color: #b32424; font-weight: 500; }
.article-page .a-nav { display: flex; justify-content: space-between; }
.article-page .a-nav a { max-width: 46%; }
.article-page .a-nav .next { text-align: right; }

/* 文章详情页底部「返回观点列表」 */
.article-page .back { margin-top: 34px; border-top: 1px dashed #e5e5e5; padding-top: 18px; text-align: center; }
.article-page .back a { font-size: 13px; color: #888; letter-spacing: 1px; }
.article-page .back a:hover { color: #b32424; }


/* ---------- 首页精选分类按钮·按压下沉回弹 ---------- */
.home-cases .ind-filters a {
  transform: scale(1);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1);
  will-change: transform;
}
.home-cases .ind-filters a:active {
  transform: scale(.92);
  transition-duration: .08s;   /* 按下要快，才有「被压下去」的手感 */
}
.home-cases .ind-filters a.bounce {
  animation: wsBtnBounce .34s cubic-bezier(.34,1.56,.64,1);
}
@keyframes wsBtnBounce {
  0%   { transform: scale(.92); }   /* 从按下的位置起步 */
  55%  { transform: scale(1.045); } /* 过冲一点点 */
  100% { transform: scale(1); }     /* 稳稳停回 1 */
}

/* ============================================================
   2026-09-15 移动端体检⑩：iPad 端内容区留白统一（跟导航栏一致）

   【问题】≤1399px 视口下 .wrap 的 max-width:1200px 不生效 → 容器等于视口宽、
   左右 0 留白；而导航栏 .header-inner 有 clamp(16px … 100px) 留白。
   于是「服务页 / 首页三大业务体系 / 页脚」等内容区比导航更靠外：
     1024 → 差 22px，1080 → 差 50px，1180 → 差 100px，1366（iPad Pro 12.9" 横屏）→ 差 17px。
   实测 .wrap 与 .header-inner 只在 1400px 这一个视口宽度上恰好重合。

   【修法】≤1399px 时，下列容器改用与 .header-inner 完全相同的 clamp 公式。

   【为什么边界是 1399】clamp 上限 100px ⇒ 内容宽 = 视口 − 200px；
   视口 1400 时正好 = 1200px，与 .wrap 原本的 max-width:1200px 分支无缝衔接、无跳变。
   ≥1400px 时本媒体查询不生效 → 桌面版式（1440 / 1920 等）逐像素零变化。

   【为什么不动这些】.statement .wrap(980px) 与 .article-page .wrap(900px)
   是刻意的阅读宽度上限（品牌陈述、文章正文），本就居中且有留白；
   再叠加左右各 100px 内边距会把正文压到 700px 更窄、更难读。

   【为什么用 padding-left/right 而不是 padding】不覆盖容器原有的上下内边距。
   ============================================================ */
@media (max-width: 1399px) {
  /* 页脚：全站 7 个主页面 + 案例详情 + 文章详情 */
  .footer-main,
  .footer-copy,
  /* 首页：品牌主张 + 三大业务体系 */
  .tagline .wrap,
  .page-sec .wrap,
  /* 服务页：hero + 服务卡 + 流程 */
  .svc-hero .wrap,
  .svc-block .wrap,
  .process .wrap,
  /* 联系页 / 观点页 */
  .contact-main .wrap,
  .views-page .wrap,
  /* 案例详情页顶部面包屑条 */
  .case-cover + nav.crumbs .wrap,
  .crumbs-dd .wrap {
    width: 100%; max-width: none; margin: 0;
    padding-left: clamp(16px, calc((100% - 980px) / 2), 100px);
    padding-right: clamp(16px, calc((100% - 980px) / 2), 100px);
  }
}

/* 联系页：≤900px 时 .contact-main 自身已带左右 16px 内边距
   （见 `.contact-main { padding: 64px 16px 48px }`），再叠加上面 .wrap 的留白
   就会变成 32px、比导航栏多 16px。这里让 .wrap 不再重复出这份内边距，
   左右 16px 由 .contact-main 提供 —— 两者与导航栏对齐。
   注意只归零左右，不动上下（.contact-main 的上下内边距是版式节奏）。 */
@media (max-width: 900px) {
  .contact-main .wrap { padding-left: 0; padding-right: 0; }
}

/* ============================================================
   2026-09-15 平板端案例卡：文案默认隐藏，轻点先出文字、再点进详情
   【需求】用户点名：首页 / 案例页的案例图上的文字要像电脑端一样默认隐藏，
           鼠标移上去才出现（「效果参考电脑端显示效果」）。
   【改前实测】iPad 1024 触屏模拟下，4 处 opacity 全为 1 —— 文案与遮罩常显，
           首页 68 张卡、案例页 139 张卡上的文字全部裸露。
   【根因】原 @media (hover: none) 无宽度条件，把触屏设备（含平板）一键常显；
           已在该处收窄为 (hover:none) and (max-width:719px)，仅管手机。
   【范围】本块只作用于「触屏 + 视口 ≥720px」= 平板。手机 (<720px) 保持文字常显
           （用户 2026-09-15 拍板：只改平板、手机保持现状）。
   【为什么阈值取 720】iPad 各机型最小宽度 = iPad mini 竖屏 744px；
           手机竖屏最大 430px。720 这条线把所有手机竖屏排除在外，
           又把全部 iPad 机型纳入。注：手机横屏 (844~932px) 会被归入平板行为，
           属极短暂状态且交互仍可用，可接受。
   【为什么用 JS 而不是 CSS :active】:active 只在按住期间生效、松手即消失；
           iOS Safari 也不会可靠地给 <a> 加 :focus。故由 main.js 拦截 click，
           首次轻点 preventDefault + 加 .ws-reveal 类，已展开时再点才放行跳转。
   【与桌面观感保持一致】.ws-reveal 的四组声明逐条对齐桌面 `a:hover`，
           包括图片 1.06 缩放、遮罩、双渐变底板、文字位移归零与文字阴影。
   ============================================================ */
@media (hover: none) and (min-width: 720px) {
  .case-grid .item a.ws-reveal .thumb img {
    transform: scale(1.06); filter: saturate(1.05);
  }
  .case-grid .item a.ws-reveal .thumb:after { opacity: 1; }
  .case-grid .item a.ws-reveal .meta:before { opacity: 1; }
  .case-grid .item a.ws-reveal .meta .co,
  .case-grid .item a.ws-reveal .meta .ti,
  .case-grid .item a.ws-reveal .meta .de {
    opacity: 1; transform: translateY(0);
    text-shadow: 0 1px 14px rgba(0,0,0,.85);
  }
  .case-grid .item a.ws-reveal .meta .vd { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   2026-09-15 手机端首页头图：按图片比例完整显示（零裁切），后台可视化可调
   【用户原话】「手机端头图显示不完整，怎么处理？」→ 拍板选「零裁切 + 后台可调」。
   【成因】头图是「文案印在图里」的整张横版海报（现有三帧 2880×1681 / 1920×1120，
           比例约 1.713:1），而手机屏框是竖的（390×844 下 .banner 92vh = 776px，
           框比 0.502:1）。object-fit:cover 的数学结果：
               可见宽度 = 框比 ÷ 图比 = 0.502 ÷ 1.713 = 29.3%
           只有图片中间三成可见；三帧文案分别在 68–91% / 15–40% / 54–79% 处，
           全部落在可见窗口之外 —— 屏幕上只剩绿色卡牌一角、方向盘、画册的边。
           （桌面 1440×900 框比 1.739 ≈ 图比 1.713，可见宽度 100%，所以电脑端一直正常。）
   【修法】手机端把头图高度改成「屏宽 ÷ 图片比例」，使框比 = 图比 → 零裁切。
           --mratio 由 build_site_v3.py 用 _img_dims() 读第一帧图片真实比例后写入
           .banner 的行内 style；换头图后重建会自动刷新，无需手改这里。
   【三种模式】由 .banner[data-mmode] 选择，后台「首页轮播」页可切换：
           ratio  = 按图片比例完整显示（默认，零裁切）
           full   = 保持旧的 92vh 满屏（会裁切，保留以便随时切回）
           custom = 高度 = 屏宽 × var(--mh)，用于微调
   【⚠ 为什么必须同时把 .bd / .bd ul / li 的高度改成 100%】
           .bd ul li 是绝对定位 + 原来靠 min-height:92vh 撑高；一旦把 .banner 改矮，
           min-height 必须归零，而绝对定位元素的 height:auto 会塌成 0 →
           .bg / .bgp / img 的 height:100% 全部变成 0，图片整块消失（只剩白底）。
           本块把链路每一层都显式给到 100%，这条路已用真实 Chrome 逐层验证过。
   【⚠ 与视差的关系】main.js 的视差只对 .bgp 做 translate，k ≤ 1 时数学上
           始终盖住 banner 可见区（与 banner 高度无关），因此改矮后不会露底。
   ============================================================ */
@media (max-width: 760px) {
  .banner[data-mmode="ratio"],
  .banner[data-mmode="custom"] { min-height: 0; }

  .banner[data-mmode="ratio"]  { height: calc(100vw / var(--mratio, 1.713)); }
  .banner[data-mmode="custom"] { height: calc(100vw * var(--mh, 0.584)); }

  .banner[data-mmode="ratio"] .bd,
  .banner[data-mmode="ratio"] .bd ul,
  .banner[data-mmode="custom"] .bd,
  .banner[data-mmode="custom"] .bd ul { height: 100%; }

  .banner[data-mmode="ratio"] .bd ul li,
  .banner[data-mmode="custom"] .bd ul li { min-height: 0; height: 100%; }

  /* ⚠ 刻意不动的两处（曾试过，退化了，已回退）：
     · .banner .hd 的 bottom —— 原移动端值是 30px，指示点在 228px 高的头图里
       位置正常，无需为「变矮」另调；
     · .banner .hd li:after 的热区 —— 原值 top/bottom: -18px（约 40×39 可点区域），
       是上一轮专门为「40×3 的细条几乎点不中」做的可点按性改进；
       若跟着改成 -14px，热区会缩到 40×31，外侧探针落在热区之外 → 点不中。
     结论：改矮头图只需改「高度」与「高度链」，不要顺手挪指示点。 */
}