/* ============================================================
   马生角官网 · 设计系统 V2
   对标 clevay / in-dare 参考图：
   纯黑底 + 纯白字 + MiSans 全字重 + 超大排版 + 极简网格
   ============================================================ */

/* ---------- @font-face: 全站统一 MiSans-Regular ---------- */
/* 仅加载 Regular 一个字重（~6.5MB），避免 10 字重共 65MB 拖垮首屏。
   层级靠「字号 / 字间距 / 色彩」区分，不靠字重。 */
@font-face {
  font-family: "MiSans";
  src: url("../fonts/MiSans-Regular.otf") format("opentype");
  font-weight: 100 900; /* 覆盖全部字重请求，统一以 Regular 渲染，避免浏览器合成伪粗体 */
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   设计令牌 (Design Tokens)
   ============================================================ */
:root {
  color-scheme: light;
  /* —— 色彩：黑白灰为主，极高对比 —— */
  --black: #ffffff;
  --ink: #0a0a0a;
  --surface-dark: #111111;
  --surface-mid: #1a1a1a;
  --white: #000000;
  --gray-100: #f5f5f5;
  --gray-200: #e8e8e8;
  --gray-300: #d4d4d4;
  --gray-400: #a3a3a3;
  --gray-500: #737373;
  --gray-600: #525252;
  --gray-700: #404040;
  --gray-800: #262626;
  --gray-900: #171717;

  /* —— 分隔线（全站横线）：2026-09-16 按要求统一为纯黑 —— */
  --line: #000;

  /* —— 状态色 —— */
  --err: #b3261e;
  --ok: #2f7d5b;

  /* —— 字体 —— */
  --font: "MiSans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* —— 间距 / 圆角 / 阴影（极简：几乎无阴影） —— */
  --maxw: 1280px;
  --page-gutter: clamp(24px, 8vw, 80px); /* 全站统一左右页面间距：桌面固定 80px，窄屏随视口收窄（≤860px 由媒体查询覆写为 10px） */
  --radius: 2px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --header-h: 64px;

  /* —— 排版比例 —— */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 42px;
  --text-5xl: 56px;
  --text-6xl: 72px;
  --text-7xl: 96px;
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  color: var(--white);
  background: var(--black);
  line-height: 1.65;
  font-size: var(--text-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: #000000; color: #ffffff; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
h1, h2, h3, h4, h5 { margin: 0; line-height: 1.15; letter-spacing: -.02em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* 标题字重阶梯 */
h1 { font-weight: 700; }
h2 { font-weight: 600; }
h3 { font-weight: 600; }
h4 { font-weight: 500; }

/* ============================================================
   布局
   ============================================================ */
.wrap {
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}
.section { padding: 120px 0; }
.section--tight { padding: 80px 0; }
.section--dark { background: var(--black); color: var(--white); }
.section--light { background: var(--white); color: var(--black); }

/* ============================================================
   通用排版组件
   ============================================================ */
.eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--gray-600);
  display: inline-block;
}
.section-title {
  font-size: clamp(var(--text-4xl), 4vw, var(--text-6xl));
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.03em;
}
.section-lead {
  color: var(--gray-400);
  font-size: var(--text-lg);
  max-width: 560px;
  margin-top: 18px;
  line-height: 1.75;
}

/* ============================================================
   按钮（极简线框 / 反白）
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 32px;
  border-radius: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: all .3s var(--ease);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn--primary {
  background: var(--gray-100);
  color: var(--white);
  border: 1px solid var(--gray-100);
}
.btn--primary:hover {
  background: var(--white);
  color: var(--gray-100);
  border-color: var(--white);
}
.btn--ghost {
  border: 1px solid var(--gray-300);
  color: var(--gray-100);
  padding: 13px 28px;
}
.btn--ghost:hover {
  border-color: var(--gray-100);
  color: var(--white);
  background: var(--gray-100);
}
.btn--light {
  background: var(--white);
  color: var(--black);
}
.btn--light:hover {
  opacity: .88;
}
.btn--block { width: 100%; }
.btn .arrow {
  transition: transform .3s var(--ease);
  display: inline-block;
}
.btn:hover .arrow { transform: translateX(4px); }

/* ============================================================
   Header 导航（透明 → 滚动变黑）
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-h);
  background: transparent;
  transition: background .35s var(--ease), border-color .35s;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}
.nav {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.brand-logo {
  display: block;
  height: 30px;
  width: auto;
  transition: opacity .35s var(--ease);
}
/* 黑白双 logo 叠放：默认白色版（深色底），浅色底时交叉淡入黑色版 */
.brand-logo--on-light {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  /* 2026-09-16：文字墨迹底边对齐 logo 底边（用户要求「字体与logo底部对齐」）。
     实测（2x 像素剖面，2016 视口）：logo 墨迹 17→47px、菜单墨迹 20.25→42.75px —— 两者都垂直居中，
     但菜单墨迹底比 logo 底高 4.25px，故整块下移 4.25px 补齐（对齐全靠墨迹，不是行盒）。
     logo 30px / 顶栏 64px / 字号 24px 均为固定值 → 该偏移与视口无关。 */
  transform: translateY(4.25px);
}
.nav-links a {
  padding: 10px 18px;
  /* 2026-09-16 用户指定：顶栏字号 **24px**（同日先要 32px、后改 24px；原为 --text-sm = 13px）。
     行高必须收紧到 1.2：body 的 1.65 会让大字号文字撑出 64px 的顶栏。
     24px 下 861px 视口也放得下（导航 5 项 ≈444px + logo ≈98px < 内容宽 723px），故不再做 vw 递减。 */
  font-size: 24px;
  line-height: 1.2;
  font-weight: 500;
  color: rgba(0,0,0,.7);
  border-radius: 0;
  transition: color .25s;
  letter-spacing: .03em;
}
.nav-links a:hover { color: var(--white); }
.nav-links a.active { color: var(--white); font-weight: 600; }

/* 2026-09-16：菜单左边缘对齐「页面正中竖线」（用户红框+箭头标注），并保持紧凑项间距。
   做法：把 .nav-links 设为 50% 宽 —— .nav 是 space-between 的两项布局（.nav-cta 桌面 display:none），
   两分栏下它的左边缘正好落在页面正中（内容区左右对称，故正中 = 视口 50%）。
   首项去掉左内边距，让**文字墨迹**正好压在正中线上（否则会右缩 18px 让人以为没对齐）。
   ⚠️ 前提 0.5×(视口−2×80) ≥ 导航自然宽(≈451px) → 视口 ≥ ~1063px；故只在 ≥1120px 生效，
      1120px 以下放不下，回落为原来的「整块贴右」（见下方 -- 861..1119 维持 flush-right）。
   ⚠️ 不要给 .nav-links 加 flex-grow：初始 flex-grow:0 + width:50% 才能被 space-between 精确定位。 */
@media (min-width: 1120px) {
  .nav-links { width: 50%; }
  .nav-links a:first-child { padding-left: 0; }
}

/* 2026-09-16：桌面不再需要 .nav-cta —— 「预约咨询」按钮已删，汉堡按钮只在 ≤860 出现。
   让它 display:none（不占位）→ 顶栏只剩 logo + 导航两个 flex 项，
   space-between 会把导航**推到最右**（用户要求「菜单移去右半区」）。≤860 覆写回 flex。 */
.nav-cta { display: none; align-items: center; gap: 16px; }

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--white);
  position: relative;
  transition: .3s var(--ease);
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }
.nav-toggle.open span { background: transparent; }
.nav-toggle.open span::before { top: 0; transform: rotate(45deg); }
.nav-toggle.open span::after { top: 0; transform: rotate(-45deg); }

/* 移动端菜单 */
.mobile-menu {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  z-index: 99;
  background: var(--black);
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: .35s var(--ease);
  border-bottom: 1px solid var(--line);
  /* 2026-09-16：删掉菜单里的「预约咨询」按钮后，底部腾出的空间由它自己的 margin 提供，
     按钮没了就补回等量内边距，否则最后一项会贴着菜单底边线 */
  padding-bottom: 24px;
}
.mobile-menu.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu a {
  display: block;
  padding: 18px 40px;
  border-top: 1px solid var(--line);
  font-size: var(--text-lg);
  font-weight: 500;
  color: rgba(0,0,0,.7);
  letter-spacing: .02em;
}
.mobile-menu a:first-child { border-top: none; }
.mobile-menu a:hover { color: var(--white); }

.page { padding-top: var(--header-h); }
/* 首页：轮播全幅出血到顶部，Header 浮于其上 */
body.page.home { padding-top: 0; }
.hero-pad { padding-top: calc(var(--header-h) + 60px); }

/* ============================================================
   悬浮联系方式（黑底白字，常驻展示）
   ============================================================ */
.float-cta {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 90;
  background: rgba(17, 17, 17, .8);
  color: #ffffff;
  padding: 10px;
  border-radius: 10px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
/* 联系方式内容（常驻，无需交互） */
.float-cta__row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  white-space: nowrap;
  line-height: 1;
}
.float-cta__row + .float-cta__row { margin-top: 0; }
.float-cta__label {
  flex: 0 0 auto;
  /* 固定标签列宽：新增的「邮箱」只有 2 字，不撑住这一列的话值会左移、和上面两行错位 */
  min-width: 4.2em;
  font-size: 16px;
  line-height: 1;
  color: rgba(255,255,255,.62);
  letter-spacing: .04em;
}
.float-cta__value {
  font-size: 16px;
  line-height: 1;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
}
a.float-cta__value:hover { text-decoration: underline; }

.side-cta {
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  background: var(--white);
  color: var(--black);
  padding: 18px 12px;
  border-radius: 0;
  writing-mode: vertical-rl;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .1em;
  transition: transform .3s var(--ease);
  text-transform: uppercase;
}
.side-cta:hover {
  transform: translateY(-50%) translateX(-3px);
}

/* ============================================================
   首页轮播 Hero（全屏图 + Header 随底色反色）
   ============================================================ */
/* ============================================================
   首页轮播（纯白底 + 单张「不规则封面」居中悬浮）
   规则来自参考站逐帧实测（Stockholm Design Lab）：
   封面 contain 适配进一个 100vw × 70vh 的最大盒子，即
     width  = min(可用宽, 70vh × 比例)
     height = min(70vh,   可用宽 ÷ 比例)
   竖图吃满高、横图吃满宽 → 不同作品自然呈现参差不齐的尺寸。
   ⚠️ 本项目调色板是反转的：--black = #ffffff、--white = #000000。
   ============================================================ */
.hero-carousel {
  /* 轮播左右留白：固定 200px（不跟着全站 --page-gutter 走）。
     窄屏自动收缩（下限 12px），并保证封面至少有约 380px 可用宽。
     ⚠️ --hc-avail 与 .hc-stage 的左右 padding 必须共用同一个变量，
        否则「可用宽」与「实际可见宽」脱节，封面尺寸会算错。 */
  --hc-side: min(200px, max(12px, calc((100vw - 380px) / 2)));
  /* 封面上下留白。没有底部控件带了，上下对称 */
  --hc-pad: clamp(18px, 2.4vw, 42px);
  --hc-ui-h: 0px;                         /* 已移除底部控件带（留变量以便日后加回） */
  /* 页面竖向滚动条宽度，由 JS 写入；100vw 含滚动条，不减掉封面会横向溢出 */
  --hc-sbw: 0px;
  --hc-avail: calc(100vw - 2 * var(--hc-side) - var(--hc-sbw));
  /* 封面最大高：70vh，同时保证 header + 封面不超出一屏 */
  --hc-maxh: max(200px, min(70vh, calc(100vh - var(--header-h) - 2 * var(--hc-pad) - var(--hc-ui-h))));
  /* 翻页转场：0s = 硬切（参考站逐帧实测就是硬切）。改成 .18s 即柔和版。 */
  --hc-swap: 0s;

  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  background: var(--black);               /* 反转调色板下 = 纯白底 */
  overflow: hidden;
  outline: none;
  cursor: ew-resize;                      /* 提示：左右移动鼠标即可翻页 */
  touch-action: pan-y;
}
@supports (height: 100svh) {
  .hero-carousel {
    min-height: 100svh;
    --hc-maxh: max(200px, min(70svh, calc(100svh - var(--header-h) - 2 * var(--hc-pad) - var(--hc-ui-h))));
  }
}
.hero-carousel:focus-visible { outline: 1px solid rgba(0,0,0,.5); outline-offset: -3px; }

/* 封面舞台：在剩余空间里把封面水平 + 垂直居中 */
.hc-stage {
  flex: 1;
  display: grid;
  place-items: center;
  padding: calc(var(--header-h) + var(--hc-pad)) var(--hc-side) var(--hc-pad);
}

/* 封面盒：--ar（宽高比）由 JS 按图片真实尺寸写入 —— 换素材后自动生效 */
.hc-cover {
  --ar: 1.8911;
  position: relative;
  width: min(var(--hc-avail), calc(var(--hc-maxh) * var(--ar)));
  height: min(var(--hc-maxh), calc(var(--hc-avail) / var(--ar)));
  transition: width var(--hc-swap) linear, height var(--hc-swap) linear;
}
.hc-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;                    /* 作品图永不裁切 */
  display: block;
  opacity: 0;
}
.hc-cover-img.is-on { opacity: 1; }

/* 仅供屏幕阅读器：视觉上不可见但可被朗读 */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ---------- Header 随轮播底色反色（浅底 → 深字） ---------- */
.site-header { transition: background .35s var(--ease), border-color .35s var(--ease); }
.site-header .brand,
.site-header .nav-links a,
.site-header .nav-toggle span,
.site-header .nav-toggle span::before,
.site-header .nav-toggle span::after {
  transition: color .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
}
/* ============================================================
   顶栏「压在照片上」时的叠加层（2026-09-17 用户要求：导航字看不清）
   关于页 hero 是亮天空（实测照片左上角亮度 231/255），而 .on-light 状态下
   顶栏是**白 logo + 白菜单**（本来就是为深色底准备的）→ 白字压亮天空几乎读不出。
   做法：::after 从视口顶端往下拉长到 2.5 个顶栏高，黑色渐变到透明。
   ⚠️ 三个要点：
     · 不能只给 64px 的顶栏加底色 —— 那样顶栏底边会出现一条硬边；
       渐变必须在顶栏**之外**才淡到 0（所以用 ::after 而不是 header 自己的 background）。
     · `z-index:-1` 让它落在顶栏内容**下面**：若盖在文字上会把白字一起压暗，反而更糊。
       顶栏是 fixed、自带层叠上下文（z-index:100），所以负层仍在页面内容之上，不会跑到照片背后。
     · 常驻 + opacity 切换（不是 :not(.is-scrolled) 里才生成），这样滚过首屏时能和
       header 背景的 .35s 过渡一起淡出，不会「啪」一下消失。
   ============================================================ */
.site-header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--header-h) * 2.5);
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s var(--ease);
  background: linear-gradient(180deg,
    rgba(0, 0, 0, .66) 0,
    rgba(0, 0, 0, .56) 32%,
    rgba(0, 0, 0, .28) 64%,
    rgba(0, 0, 0, 0) 100%);
}
.site-header.on-light:not(.is-scrolled)::after { opacity: 1; }

/* ⚠️ 非当前项原来是 60% 白 —— 即使加了叠加层，实测对比度也只有 ~2.7:1（大字需 ≥3:1）。
   提到 84% 后 ≈5:1，且与当前项（纯白）仍能区分（本项目字重无效，层级只能靠颜色）。 */
.site-header.on-light:not(.is-scrolled) .nav-links a { color: rgba(255,255,255,.84); }
.site-header.on-light:not(.is-scrolled) .nav-links a:hover,
.site-header.on-light:not(.is-scrolled) .nav-links a.active { color: var(--black); }
/* logo 交叉淡入：浅底显示黑色版 */
.site-header.on-light:not(.is-scrolled) .brand-logo--on-dark { opacity: 0; }
.site-header.on-light:not(.is-scrolled) .brand-logo--on-light { opacity: 1; }
.site-header.on-light:not(.is-scrolled) .nav-cta .btn--primary {
  background: var(--black); color: var(--white); border-color: var(--black);
}
.site-header.on-light:not(.is-scrolled) .nav-cta .btn--primary:hover {
  background: transparent; color: var(--black);
}
.site-header.on-light:not(.is-scrolled) .nav-toggle span,
.site-header.on-light:not(.is-scrolled) .nav-toggle span::before,
.site-header.on-light:not(.is-scrolled) .nav-toggle span::after { background: var(--black); }

/* ============================================================
   品牌主张（轮播下方）
   ============================================================ */
/* ============================================================
   首页介绍区（RDA 风格：大标题 + 右侧段落）
   ============================================================ */
.intro-rda {
  background: var(--black);
  padding: 4px 0;
  margin-bottom: 200px;
}
.intro-rda__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: start;
}
.intro-rda__text {
  grid-column: 2;
  font-size: 40px;
  line-height: 1.08;
  color: var(--ink);
}

/* ============================================================
   品牌视频（16:9 循环播放，通栏贴边）
   ============================================================ */
.video-band {
  padding: 0 var(--page-gutter);
  margin-top: 50px;
}
.video-band__inner {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0a0a0a;
}
.video-band__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   我们的专业（按原型图复刻：小标题 + 每组「左侧大标题 / 右侧两列标签」）
   每个组顶部一条通栏横线；标签每一行底部一条横线（线只到标签列的宽度）。
   交互：鼠标悬停某个标签 → 该格填充黑色、文字返白。
   —— 尺寸按原型图实测比例换算（原型 2295×954 为 2 倍导出，内容宽 2042px）：
      小标题 34 / 大标题 70 / 标签 31 / 标签行高 66 / 组间距 71（原型像素）
      按本站内容宽折算（2016 视口 → 内容 1856）：31 / 64 / 28 / 60 / 64 px
      标签列宽 : 大标题列宽 = 980 : 1061 ≈ 48 : 52
   ⚠️ 站点调色板是反转的（--white=#000 / --black=#fff），悬停色用字面量并注释，别改 var()。
   ⚠️ 标签默认全可见（不靠 :hover 才出现），触屏 / 无 hover 环境也能读到内容。
   ============================================================ */
.services-list-section {
  background: var(--black);
  padding: clamp(60px, 6vw, 100px) 0;
  /* 黑块不会溢出，但仍兜一层裁剪防意外横向滚动条 */
  overflow-x: clip;
  --tag-fs: clamp(16px, 2.2vw, 32px);   /* 标签字号：桌面 32px（用户 2026-09-15 指定；原型比例折算是 28px） */
  --tag-row-h: clamp(34px, 3vw, 60px);  /* 标签行高（横线的间距）—— 用户只改了字号，行高未动 */
  --hair: var(--line);              /* 横线颜色 */
}
/* 小标题：字号**不覆写**，与全站 .sec-label（精选作品 / 客户等）统一为 24px
   —— 2026-09-16 用户要求；此前按原型图比例放大为 clamp(16px,1.55vw,31px)，比其它板块大。
   颜色一并改为纯黑（用户要求「字体纯黑色」） */
.services-list-section .sec-label {
  padding-top: clamp(14px, 1.5vw, 30px);
  margin-bottom: clamp(24px, 2.85vw, 57px);
  letter-spacing: -.01em;
  color: #000;
}
/* 每组：左 52% 大标题 + 右 48% 标签网格（原型实测 1061 : 980） */
.sli-group {
  display: grid;
  grid-template-columns: 52fr 48fr;
  align-items: start;
  border-top: 1px solid var(--hair); /* 组顶通栏横线 */
}
.sli-group + .sli-group { margin-top: clamp(32px, 3.2vw, 64px); }
.sli-group__name {
  font-size: clamp(28px, 3.2vw, 64px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--white); /* 反转调色板：--white 就是黑字 */
  /* 让标题墨迹与右侧首行标签的墨迹齐平（原型里两者 ink top 一致） */
  padding-top: calc((var(--tag-row-h) - var(--tag-fs)) / 2);
}
.sli-tags {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(8px, 0.72vw, 15px);
}
.sli-tag {
  height: var(--tag-row-h);
  display: flex;
  align-items: center;
  font-size: var(--tag-fs);
  line-height: 1;
  /* 纯黑（用户 2026-09-15 指定：原为 --gray-600 #525252）
     ⚠️ 站点调色板反转，--white 才是黑；这里写字面量更直白 */
  color: #000;
  border-bottom: 1px solid var(--hair);
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
/* 悬停：整格填充黑色、文字返白（字面量，原因见上方调色板说明） */
.sli-tag:hover {
  background: #000;
  color: #fff;
  border-bottom-color: #000;
}

/* ============================================================
   卡片 / 网格（极简：无背景无边框，图片即卡片）
   ============================================================ */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: transparent;
  border: none;
  border-radius: 0;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.card:hover { opacity: .82; transform: translateY(-4px); }

/* 服务卡片（深色区块内） */
.service-card {
  padding: 44px 36px;
  border: 1px solid rgba(0,0,0,.1);
  background: var(--surface-dark);
  transition: border-color .3s;
}
.service-card:hover {
  border-color: rgba(0,0,0,.3);
  opacity: 1;
  transform: none;
}
.service-card .idx {
  font-size: var(--text-sm);
  color: var(--gray-500);
  letter-spacing: .15em;
  font-weight: 600;
  text-transform: uppercase;
}
.service-card h3 {
  margin: 18px 0 12px;
  font-size: var(--text-2xl);
  color: var(--white);
}
.service-card p {
  color: var(--gray-400);
  font-size: var(--text-base);
  line-height: 1.7;
}
.service-card .tags {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.service-card .tags span {
  font-size: var(--text-xs);
  color: var(--gray-400);
  border: 1px solid var(--gray-700);
  padding: 6px 14px;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ============================================================
   作品图墙（Stockholm Design Lab 风格）
   - 通栏出血 / 2列 / 名称叠加图片底部（白字+渐变蒙层）
   - 极紧行距（参考图风格：卡片几乎相接）
   ============================================================ */
.sec-label {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -1px;
  color: var(--ink);
  margin-bottom: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

/* ============================================================
   「删掉页头」的两页共用的顶部留白（2026-09-16）
   页头没了 → 这些页的第一屏直接是主体，需要自己撑出与固定顶栏（64px）之间的呼吸。
   .works-section = cases.html ｜ .news-section = insight.html（两者同值，别只改一个）
   ============================================================ */
.works-section,
.news-section { padding-top: clamp(72px, 7vw, 132px); }

/* ============================================================
   作品案例页 · 服务类型筛选条（2026-09-16 按 clevay works 参考图复刻）
   参考图（PIL 实测）：白底、**无边框 / 无下划线 / 无胶囊底**；选中项纯黑、其余 #8c8c8c；
   项间距 ≈ 字号 × 2.2（实测 67px / 31px，尺度无关的比值）。
   ⚠️ 区分「选中」只靠**颜色**，不加 font-weight —— 本站 @font-face 只挂了 MiSans Regular
      并声明 font-weight:100 900，任何字重都渲染成同一个字形，写字重是无效代码。
      这与顶栏 .nav-links a.active（只改颜色）以及设计系统「靠字号/间距/色彩区分层级」一致。
   ⚠️ 调色板反转（--white=#000）→ 颜色一律写字面量。
   ============================================================ */
.works-tabs {
  --wt-fs: clamp(15px, 1.4vw, 24px);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: calc(var(--wt-fs) * 2.2);
  row-gap: calc(var(--wt-fs) * 0.6);
  padding-bottom: clamp(30px, 3.4vw, 64px);
}
.works-tab {
  font-size: var(--wt-fs);
  line-height: 1.2;
  color: #8c8c8c;                 /* 未选中（参考图实测 140,140,140） */
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  letter-spacing: .01em;
  transition: color .2s var(--ease);
}
.works-tab:hover { color: #000; }
.works-tab.active { color: #000; }  /* 选中：纯黑（参考图实测 0,0,0） */
.works-tab:focus-visible { outline: 2px solid #000; outline-offset: 4px; }

.works-bleed {
  padding: 0 var(--page-gutter);
}
.works-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 左右间距：在原响应式基础上整体 +20px（旧值 clamp(4px, 0.6vw, 10px)） */
  column-gap: clamp(24px, calc(0.6vw + 20px), 30px);
  /* 上下间距：累计 +20px（原始值 clamp(4px, 0.5vw, 8px)，先 +10 再 +10） */
  row-gap: clamp(24px, calc(0.5vw + 20px), 28px);
}
.work-card {
  display: block;
  margin: 0;
}
.work-thumb {
  position: relative;
  aspect-ratio: 2917 / 2043;
  overflow: hidden;
  background: var(--surface-dark);
}
.work-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1s var(--ease);
}
.work-card:hover .work-thumb img { transform: scale(1.03); }

/* 名称置于图片下方：单行名称，黑色字 */
.work-meta {
  padding-top: clamp(6px, 0.6vw, 12px);
}
.work-name {
  font-size: clamp(15px, 1.2vw, 22px);
  line-height: 1.3;
  color: var(--white);
  letter-spacing: -.005em;
  font-weight: 700;
}

/* ============================================================
   案例卡片（详情页「相关推荐」使用；作品图墙已改用 .works-grid）
   两列大图、无边框、加粗项目名 + 小圆点 + 灰色描述行
   ============================================================ */


/* 项目名（加粗感靠字号 + 白色拉满，全站统一 Regular） */
/* 参考图里项目名后的小圆点 */


/* 客户 Logo 墙（白底 + 黑色 logo；一整张合集图，无边框、无交互）
   2026-09-15：由「42 个独立 logo 格子」改为「一整张合集图」
   （assets/img/clients-wall.png，现为 3963×2020 原图；尺寸以 data.js 的 w/h 为准）。
   合集图的行距、列距与四周留白都在出图时定好了，页面侧只做等比铺满 ——
   所以这里既没有 grid、也没有 gap，更没有 :hover。
   注意 --surface-dark / --surface-mid 是硬编码深色（#111 / #1a1a），
   不在本版的反转调色板里，所以这里一律不用它们。 */
.logo-wall {
  display: block;
  width: 100%;
}
.logo-wall img {
  display: block;
  width: 100%;
  /* 宽高比靠 img 标签上的 width/height 属性维持（防 CLS），
     故这里不写 aspect-ratio，也不要 height:auto 之外的任何干预。 */
  height: auto;
  /* 素材是「纯黑 + 透明」的灰度 PNG，白底直接显示为黑，
     无需任何 filter / opacity。 */
}

/* 2026-09-16：.cta-band（底部 CTA 板块）已随「联系我们」页一起下架，相关规则全部删除 */

/* ============================================================
   Footer（纯黑底 + 超大品牌声明）
   ============================================================ */
/* ============================================================
   底部信息栏（按参考图版式：4 列 + 大字号 + 紧凑行距 + 纯黑字 / 白底）
   —— 全部按参考图比例反推（参考图 3798×807，内容宽 3571，字号 41.5，行距 50.5）：
      字号 / 内容宽 = 0.01162        行距 / 字号 = 1.217
      四列左边界 15 / 1908 / 2539 / 3170  →  列宽比 1893 : 631 : 631 : 416
   ⚠️ 参考图本身是「黑底白字」，按要求反转为「白底 + 纯黑字」，
      所以这里所有文字都写 #000（站点调色板是反转的：--black = #fff = 白底）。
   ============================================================ */
.site-footer {
  background: var(--black);
  color: #000;
  /* 字号：参考图 41.5 ÷ 3571 = 0.01162 × 内容宽（内容宽 = 100vw - 2×gutter）。
     写成 calc 而不是「数字vw」，是为了让 1440 / 1920 / 2016 各档都严格落在参考图比例上
     （纯 vw 在中段会偏大：1440 档会偏 +12%）。 */
  --f-ts: clamp(13px, calc(1.162vw - 1.86px), 21.5px);
  --f-lh: 1.217; /* = 参考图行距 50.5 ÷ 字号 41.5 */
  padding: 80px 0 40px;
  border-top: 1px solid var(--line);
}
.site-footer a { color: #000; transition: opacity .2s; }
.site-footer a:hover { opacity: .55; } /* 全部纯黑后，链接反馈改用淡出而不是变色 */
.footer-grid {
  display: grid;
  /* 2026-09-17 用户要求：底栏联系方式「横屏不许换行，每条信息都是一行」→ 列宽改为内容驱动。
     描述列吃掉所有余量，「服务」「联系我们」按各自最长的一行自适应（max-content）：
     这样「联系我们」列天然比最长那行宽 → 结构上不可能折行，且随字号一起伸缩。
     ⚠️ 旧值 70.68fr 17.67fr 11.65fr 是参考图的四列比例：第 3 列只有内容宽的 11.65%
        （21.5px 字号下 ≈217px，却要装下 307px 的地址）→ 地址必然折成两行。
        参考图那一列本来就装不下现在的地址，所以这里必须让位，不能再按比例写死。
     ⚠️ 若改回固定比例，`_verify_footer.js` 的「每行都是一行」断言会立刻红。*/
  grid-template-columns: minmax(0, 1fr) max-content max-content;
  column-gap: clamp(24px, 4vw, 72px); /* 固定视觉节奏（旧版列距含在比例里，故为 0） */
  align-items: start;
}
.footer-grid > * { min-width: 0; } /* 允许窄列内的长串换行，不顶破栅格 */
.site-footer .brand-logo { height: 32px; }
.footer-about {
  font-size: var(--f-ts);
  line-height: var(--f-lh);
  color: #000;
  margin-top: calc(var(--f-ts) * 1.217); /* 空一行（参考图的段落节奏） */
}
.footer-col h5 {
  color: #000;
  font-size: var(--f-ts); /* 参考图只有一种字号，标题与正文同号 */
  font-weight: 600;
  letter-spacing: normal; /* 参考图字符步进 = 字号，无额外字距（原为 .15em） */
  text-transform: none;
  margin-bottom: 0; /* 标题也是「一行」，行距统一由 line-height 决定 */
  opacity: 1;
}
.footer-col a,
.footer-col li {
  display: block;
  font-size: var(--f-ts);
  line-height: var(--f-lh);
  padding: 0; /* 原为 7px 上下（行距改由 line-height 统一控制） */
  color: #000;
  overflow-wrap: break-word; /* 长串兜底换行（优先用邮箱 @ 后的 <wbr> 断点），不顶出横向滚动条 */
}
/* 联系方式的每一行 = 不压缩的标签 + 单行的值。
   ⚠️ 三条都是「不许折行」的实现细节，别顺手改回去：
   1. li 上 nowrap —— 文本层面禁止换行；
   2. .vl 用 flex: 0 0 auto —— 值保持原宽，不再被压缩成窄盒（压缩后 CJK 会在盒内自己折行）；
   3. 去掉 overflow-wrap: anywhere —— 它会把固有宽度算小，等于给折行开口子。
   放得下由列宽的 max-content 保证（见 .footer-grid）。旧写法（flex:1 1 auto + anywhere）
   在 1440 桌面就会把「地址：深圳市宝安区朗峻广场1栋」折成两行。 */
.footer-contact li { display: flex; gap: .25em; align-items: baseline; white-space: nowrap; }
.footer-contact .lb { flex: none; }
.footer-contact .vl { flex: 0 0 auto; overflow-wrap: normal; }
/* max-content 列只保证「刚好放下」，这里再留 .5em 余量吸收亚像素取整 */
.footer-contact ul { padding-right: .5em; }
.footer-contact a { display: inline; } /* 覆盖 .footer-col a 的 block（否则邮箱会先另起一行） */

.footer-bottom {
  border-top: 1px solid var(--line);
  margin-top: 56px;
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: max(11px, calc(var(--f-ts) * .62)); /* 版权行不在参考图里，按正文的 0.62 递减并保底 11px */
  line-height: 1.5;
  color: #000;
}
.footer-bottom .links a { margin-left: 20px; }


/* Footer 大字品牌声明（无缝横向滚动 marquee） */
.footer-mantra {
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-ltr 16s linear infinite;
  will-change: transform;
}
.marquee-group {
  display: flex;
  flex-shrink: 0;
}
.footer-mantra .mantra-item {
  display: block;
  flex: 0 0 auto;
  /* 关键：单组内容宽必须 ≥ 一屏宽（100vw），否则动画推进到后半程
     时内容右边缘会先于窗口右缘到达，右侧露出空档（"只跑两段就断掉"）。
     这里用 min-width 兜底，保证宽屏下也不会断。 */
  min-width: 100vw;
  font-size: clamp(var(--text-5xl), 14vw, 180px);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -.04em;
  line-height: 1.05;
  white-space: nowrap;
  /* 紧跟式：上一条尾巴刚离开左边，下一条头就接着从右边进 */
  padding-right: 160px;
}
/* 标语前的动态品牌 Mark（黑马起身动画）
   尺寸与对齐的推导（MiSans / font-size = F = 180px）：
   - 源 GIF 已按「全部帧墨迹并集」裁切，输出图 291x400 对应原始 392x538；
   - 静息（未展开）姿态的墨迹占图高 431/538 = 0.80112，墨迹底距图底仅 0.0019，
     即「图片底边 ≈ 马脚底边」；
   - MiSans 下标语文字的墨迹高 = 155(升) + 14(降) = 169px = 0.939em。
   => 让静息姿态墨迹高 = 文字墨迹高：图片高度 H = 0.939em / 0.80112 = 1.172em。
   再解决「整体偏高」：vertical-align: baseline 只把图片底边压到基线上，
   而文字最深笔画（就/找/角）比基线还低 14px = 0.08em，
   于是墨迹盒整体比文字墨迹盒高 14.4px、上边和下边同时差 14.4px。
   用 vertical-align: -.08em 把整块下移 0.08em 后：
     静息墨迹顶 = 文字墨迹顶，静息墨迹底 = 文字墨迹底 → 上下两条边同时咬合。
   动画展开（马起身）时上边界会自然拔高，脚仍钉在同一条底线上。 */
.footer-mantra .mantra-mark {
  display: inline-block;
  height: 1.172em;
  width: auto;
  margin-right: .3em;
  vertical-align: -.08em;
}
@keyframes marquee-ltr {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* 注意：不设 :hover 暂停、也不加 prefers-reduced-motion 关闭动画。
   鼠标扫过标语时不能停顿（用户明确要求），且部分内嵌 webview / 预览面板
   默认上报 reduce，一旦降级就会把滚动整个停死。
   横向滚动是本区块的核心表现，故始终运行。 */

/* ============================================================
   筛选栏（整段移除 · 2026-09-17）
   ============================================================ */
/* 原 .filter-bar / .filter-group / .chip / .filter-reset / .filter-meta 只被**新闻页**使用。
   2026-09-17 用户要求删掉新闻页列表上方的分类筛选条与「共 N 篇文章」→ 这些类全站再无引用，
   故整段删除（不是留着重写，避免死代码）。
   ⚠️ 作品页的筛选是另一套类名 .works-tabs / .works-tab（见上方「作品图墙」段），**不受影响**。 */

/* 空状态
   ⚠️ 2026-09-16 修复：原写法是「深色底 var(--surface-dark)=#111 + 字色 var(--white)=纯黑」——
      反转调色板下正文黑字落在深底上，等于**完全看不见**（此前一直没被触发所以没暴露，
      作品页「活动策划」空分类是第一个会真正显示它的地方）。改为白底 + 黑字，颜色写字面量。 */
.empty-state {
  text-align: center;
  padding: 90px 20px;
  border: 1px dashed #000;
  background: transparent;
}
.empty-state .ic {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  border-radius: 0;
  background: var(--gray-100);
  display: grid;
  place-items: center;
  color: var(--gray-500);
  font-size: 24px;
}
.empty-state h3 {
  font-size: var(--text-xl);
  margin-bottom: 10px;
  color: #000;
}
.empty-state p { color: var(--gray-500); margin-bottom: 26px; }

/* 分页 */
.pager {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 52px;
}
.pager button {
  min-width: 44px;
  height: 44px;
  border: 1px solid var(--gray-700);
  background: transparent;
  border-radius: 0;
  color: var(--gray-400);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: all .25s;
}
.pager button:hover:not(:disabled) {
  border-color: var(--white);
  color: var(--white);
}
.pager button.active {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}
.pager button:disabled { opacity: .3; cursor: not-allowed; }

/* ============================================================
   页面标题区（子页头部）
   ============================================================ */
.page-head {
  background: var(--black);
  border-bottom: 1px solid var(--line);
  padding: 90px 0 70px;
}
.page-head .eyebrow { margin-bottom: 16px; }
.page-head h1 {
  font-size: clamp(var(--text-4xl), 5vw, var(--text-6xl));
  font-weight: 700;
  color: var(--white);
  letter-spacing: -.03em;
}
.page-head p {
  color: var(--gray-400);
  margin-top: 16px;
  max-width: 600px;
  font-size: var(--text-lg);
  line-height: 1.7;
}
/* 服务页页头：整段介绍（2026-09-16 用户指定 —— 字号 40px、上下间距 2px、占位 3/4 宽「横屏」）。
   ⚠️ 站点调色板反转（--white=#000），正文黑字写字面量更直白。
   只作用于 .page-head__lede，其它子页页头不受影响。 */
.page-head .page-head__lede {
  font-size: 40px;
  /* 行距复刻参考图一（RDA 页）的紧密排布：实测参考 墨迹高/行距 = 0.888（行间几乎贴合）。
     本站 40px 字实测墨迹高 ≈37.4px → 行距 = 37.4 / 0.888 ≈ 42.1px ≈ 1.05em。
     1.05 时行间留白 4.6px（占行距 11%），与参考图的 11.2% 一致。 */
  line-height: 1.05;
  letter-spacing: -.01em;
  color: #000;
  max-width: 75%;
  margin: 2px 0;
}
/* 服务页页头「纯净版」（2026-09-16 用户圈注）：去掉页头底部那条通栏横线。
   只作用于加了这个修饰类的页头，其它子页的页头横线保持不变。 */
.page-head--plain { border-bottom: 0; }
.breadcrumb {
  font-size: var(--text-xs);
  color: var(--gray-500);
  margin-bottom: 20px;
  display: flex;
  gap: 8px;
  align-items: center;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.breadcrumb a:hover { color: var(--white); }

/* ============================================================
   服务详情块（2026-09-16 按 www.clevay.com/en/expertise 版式复刻）
   每个板块 = 全宽深色大图（标题白字叠左上角、简介白字叠左下角）
            → 清单（左半区「服务」标签 + 右半区两列条目，
                    行分隔线只落在右半区，顶部一条通栏横线）
            → 「查看XX →」链接
   两块：品牌策划 / 活动策划；条目取自首页「我们的专业」的标签。
   ⚠️ 站点调色板反转（--white=#000 / --black=#fff）：正文黑字一律写字面量 #000 并注释。
   ⚠️ 图上的白字是「真白」（图是固定深色占位，不随反转主题走），故也写字面量 #fff。
   ============================================================ */
/* 2026-09-17 用户要求：两块横幅**满屏通栏**（两侧不留空隙）。
   做法：文案（清单 / 链接）按 --svc-gutter 缩进，横幅用**同一变量**的负外边距拉出去。
   ⚠️ 用一个局部变量统一两者：只改一个值就能同时管「缩进」与「拉出」，不会出现
      「padding 改了、负 margin 没跟着改」的脱节（窄屏 10px 那条覆写就是靠它生效的）。
   ⚠️ `.wrap` 无 max-width → content box + 2×gutter 恰等于视口宽，不会横向溢出。 */
.svc-block {
  --svc-gutter: var(--page-gutter);
  padding: clamp(44px, 4.6vw, 84px) var(--svc-gutter);
}
.svc-block:first-child { padding-top: 0; }

/* 大图：宽幅横幅（参考图实测 ar≈2.15:1）。
   2026-09-16 起这里放**真实照片**（data.js services[].img），满幅 cover 铺满。
   （历史：早期是 4:3 占位 SVG，自带「品牌策划 / BRAND STRATEGY」文字，靠框比 4:3 更宽把字裁掉；
     现在没有自带文字了，框比例只为版式服务。） */
.svc-block__media {
  position: relative;
  /* 2026-09-17：满屏通栏 —— 负外边距把横幅从 .svc-block 的左右内边距里拉出来。
     必须用同一个 --svc-gutter（窄屏那条 10px 覆写才会同步生效）。 */
  margin-inline: calc(-1 * var(--svc-gutter));
  aspect-ratio: 215 / 100;
  background: var(--surface-dark);   /* 硬编码深色，故意不随反转主题变（图片未到时的底） */
  overflow: hidden;
}
.svc-block__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  /* ⚠️ 2026-09-16 换真实照片后由 `center top` 改回 `center`：当年写 top 是为了让
     4:3 占位 SVG **底部自带的那行字**被裁掉（否则与叠字重复）；照片没有自带文字了，
     底部 8.7% / 顶部 8.7% 对称裁切才是正常构图（照片 1.776 → 框 2.15）。 */
}
/* 白字可读性兜底（照片明暗不可控）。
   ⚠️ 2026-09-17 用户反馈「画面压太暗」→ 大幅减轻。**先量了照片再定值**（PIL 按真实裁切取 p95 亮度）：
        · 标题区（左上）：「办公桌」那张 p95=244（对着夕阳天空，白字 1.33:1 完全看不见）→ **只有这里真需要遮罩**；
        · 简介区（左下）：两张照片 p95 分别 45 / 91，本来就 12~20:1 → **几乎不需要**。
      所以：上半峰值 .62 → **.42**、下半峰值 .64 → **.30**，衰减终点 74%/330px → **68%/235px**
      （横幅中间约 30% 高度现在完全不被压暗，下半也只留一层几乎看不出的大号兜底）。
      ⚠️ 停点写成 `min(px, %)` 是必须的：文字用**固定 px 内边距**贴边，而横幅高度随视口变
      （桌面 670px、手机 195px）→ 文字占横幅的比例在 12% 与 58% 之间跳，单一百分比停点必然顾此失彼。
      `min(100px, 30%)` = 「大屏按固定 px 盖住标题、小屏按比例不越界吃掉下半」。
      实测（隐藏文字后逐像素算 WCAG）：标题最差 3.5:1（大字需 ≥3）、简介最差 5.3:1（正文需 ≥4.5）。
      ⚠️ 白字另有 text-shadow 兜底（见下方两条规则）—— 观感要靠它补，而不是把画面压更暗。
   ⚠️ 不写 z-index 也能对：`::before` 是定位元素、排在 static 的 <img> 之后 → 天然盖在图上；
      h2/p 同样是定位元素且更靠后 → 天然盖在遮罩上。这里显式写清，防后人调 DOM 顺序时踩空。 */
.svc-block__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.46) 0, rgba(0,0,0,.44) min(100px, 30%),
                            rgba(0,0,0,.14) min(170px, 52%), rgba(0,0,0,0) min(235px, 68%)),
    linear-gradient(0deg,   rgba(0,0,0,.30) 0, rgba(0,0,0,.28) min(104px, 30%),
                            rgba(0,0,0,.10) min(176px, 52%), rgba(0,0,0,0) min(240px, 68%));
}
.svc-block__title,
.svc-block__lead { z-index: 2; }
/* 叠在图上的白字（参考图：板块标题在左上、简介在左下） */
.svc-block__title {
  position: absolute;
  left: 0; top: 0;
  margin: 0;
  padding: clamp(20px, 2vw, 38px);
  font-size: clamp(26px, 3.4vw, 62px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #fff;
  /* 用柔光代替「把画面压暗」：遮罩减到 .42 后，靠这层自带的暗晕把字形从亮天空里托出来
     （只暗字周一小圈，不占画面整体亮度）。大标题吸光多，光晕给大一点。 */
  text-shadow: 0 2px 22px rgba(0, 0, 0, .5), 0 1px 4px rgba(0, 0, 0, .35);
}
.svc-block__lead {
  position: absolute;
  left: 0; bottom: 0;
  margin: 0;
  padding: clamp(20px, 2vw, 38px);
  max-width: min(58%, 48ch);
  font-size: clamp(13px, 1.15vw, 21px);
  line-height: 1.6;
  color: rgba(255, 255, 255, .82);
  /* 小字更吃光晕（半透明白 + 小字号，边缘最容易被亮背景吃掉） */
  text-shadow: 0 1px 12px rgba(0, 0, 0, .6), 0 1px 3px rgba(0, 0, 0, .45);
}

/* 清单：左半区标签 + 右半区两列条目；顶部一条通栏横线（--line 唯一真源，自动全站同步） */
.svc-spec {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 2026-09-16 用户要求：去掉清单顶部那条通栏横线（红圈标注），与首页「我们的专业」一致 */
  margin-top: clamp(20px, 2.2vw, 40px);
}
.svc-spec__label {
  font-size: clamp(14px, 1.3vw, 24px);
  line-height: 1;
  color: #000;
  /* 让「服务」的墨迹与右侧首行条目的墨迹齐平 */
  padding-top: calc((clamp(34px, 2.3vw, 44px) - clamp(14px, 1.3vw, 24px)) / 2);
}
.svc-spec__items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* 2026-09-16 用户要求（蓝圈）：两列之间做分隔，与首页「我们的专业」.sli-tags 一致 ——
     同款 column-gap 让每格的 border-bottom 在列边界处断开（首页实测列距 14.5px @2016）。 */
  column-gap: clamp(8px, 0.72vw, 15px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.svc-spec__items li {
  display: flex;
  align-items: center;
  height: clamp(34px, 2.3vw, 44px);
  font-size: clamp(14px, 1.3vw, 24px);
  line-height: 1;
  color: #000;
  border-bottom: 1px solid var(--line);   /* 行线只到条目区（右半区），与参考图一致 */
  /* 2026-09-16：悬停与首页「我们的专业」的 .sli-tag 完全一致 —— 整格填黑、字返白 */
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
/* 悬停：整格填充黑色、文字返白（字面量，站点调色板反转，原因见 :root 说明） */
.svc-spec__items li:hover {
  background: #000;
  color: #fff;
  border-bottom-color: #000;
}

.svc-block__link {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin-top: clamp(18px, 2vw, 34px);
  font-size: clamp(14px, 1.1vw, 20px);
  color: #000;
  transition: opacity .2s var(--ease);
}
.svc-block__link:hover { opacity: .55; }

/* ============================================================
   案例详情页
   ============================================================ */





/* 数据成果条 */


/* ============================================================
   关于我们（about.html，2026-09-16 按 www.clevay.com/en/about 复刻）
   ★ 栅格 —— 参考图内容宽 717px 的逐列剖面实测（尺度无关的占比）：
       标签列 0→50%（标签贴内容左边缘） | 内容 A 50→75% | 内容 B 75→100%
     → 四等分栅格：标签占 1/3、内容 A 占 3/4、内容 B 占 4/5
   ★ 参考图**通篇全白、无任何分隔横线**（逐行扫描无通栏细线）→ 本页不画横线
   ★ 字号按「字号 ÷ 内容宽」比例换算到本站 1440（内容宽 1280）：
       段标签 8.6/717 → 15px ｜ 引文 15/717 → 27px ｜ 列表项 8/717 → 14px
     ⚠️ 本站 @font-face 只挂 MiSans-Regular 且声明 font-weight:100 900 → **字重无效**，
        参考图靠字重区分「小标题 / 列表项」，这里只能改用**字号**分层（17px > 14px）。
   ★ 2026-09-16 用户圈注两处改动：① **「奖项」整段删除**（标签 + 清单 + 说明段，`.ab-list`/`.ab-note` 已移除）；
     ② 「我们的团队」原本 4 张占位图 → **一整张真实办公照片 `assets/img/about-team.jpg`**。
        分节因此变为：hero → 我们的故事 → 深色图带 → 我们的工作 → 我们的团队 →（原样）logo 墙。
   ============================================================ */
.ab-hero {
  position: relative;
  /* 参考图里顶栏是**压在照片上**的：body.page 的 padding-top 是 64px，
     这里反向拉回来，让全幅图一直铺到视口顶端、顶栏浮在图上。
     配合 main.js 给 header 加的 .on-light（白 logo + 白菜单），滚过首屏后
     .is-scrolled 生效会自动切回深色，无需额外代码。 */
  margin-top: calc(-1 * var(--header-h));
  /* ⚠️ 2026-09-17 修「全屏时右边空一块」：必须显式写 `width:100%`。
     只写 `aspect-ratio` + `max-height` 时，一旦 max-height 生效，Chrome 会按比例**把宽度也一起缩**
     （实测 1920×1080 → hero 只有 1808 宽、右边空 112px；1920×900 → 空 414px；1080×556 → 空 149px）。
     给了确定宽度后，max-height 只夹高度，宽度永远满宽（照片用 cover 自动多裁一点，无变形）。 */
  width: 100%;
  aspect-ratio: 1902 / 1000;      /* hero 参考图实测 717:377 ≈ 1.90 */
  max-height: 88vh;
  background: var(--surface-dark); /* 照片未到时的底色（硬编码深色）；照片见下面的 .ab-hero__photo */
  overflow: hidden;
}
/* 真实照片铺满 hero（照片 1.776 → 框 1.902，cover 上下各裁约 3.3%，构图基本不损）。
   层序（显式写死，别再靠 DOM 顺序）：photo z=0 → 遮罩 ::before z=1 → claim z=2。 */
.ab-hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
/* ⚠️ 底部白字遮罩（2026-09-17 换 关于1.jpg 后实测：390 宽时 p95 对比度只有 2.83:1，不达 3:1）。
   原因：窄屏 hero 被压成 4:3 的**矮盒子** → 固定 28px 底距 + 24px 字被放大到盒高的 29%，
   文字顶到照片里最亮的窗框上；而 768 宽时同样的字只占盒高 10%，落在暗色桌面上（8.3:1）。
   做法与顶栏叠加层、服务页横幅遮罩一致：**只在文字所在的下缘收口**的黑色渐变，不整体压暗画面。
   停点写 `min(px, %)`：文字用固定 px 贴底，而 hero 高度随视口变，单一百分比必然顾此失彼。 */
.ab-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;                 /* 压在照片上、字之下 */
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(0, 0, 0, .44) 0,
    rgba(0, 0, 0, .30) min(120px, 32%),
    rgba(0, 0, 0, 0)   min(260px, 58%));
}
.ab-hero__claim {
  position: absolute;
  z-index: 2;                 /* 白色主张永远在最上层 */
  left: var(--page-gutter);
  right: var(--page-gutter);
  bottom: clamp(28px, 4vw, 60px);
}
.ab-hero__claim p {
  margin: 0;
  color: #fff;                    /* 深色底上的白字：写字面量（本站调色板黑白反转） */
  font-size: clamp(24px, 3.1vw, 46px);
  line-height: 1.18;
  letter-spacing: -.01em;
}

/* 通栏深色品牌图带 —— 参考图实测 717:406 ≈ 16:9 */
/* 全幅品牌图带：2026-09-16 由「深色占位 div」改成**真实照片 <img>**（16:9，无叠字）。 */
.ab-band {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;            /* 参考图实测 717:406 = 1.766，就按 16:9 走，不加 max-height 免得比例被压 */
  object-fit: cover;
  object-position: center;
  background: var(--surface-dark); /* 照片未到时的底色 */
}

/* 四等分栅格：标签 1/3 ｜ 内容 A 3/4 ｜ 内容 B 4/5 */
.ab-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
}
.ab-label {
  grid-column: 1 / 3;
  margin: 0;
  font-size: clamp(12px, 1.05vw, 15px);
  line-height: 1.3;
  color: #000;
}
.ab-sec { padding-bottom: clamp(56px, 8.2vw, 118px); }
.ab-sec--story { padding-top: clamp(10px, 1vw, 16px); padding-bottom: clamp(96px, 18vw, 258px); }
.ab-sec--last  { padding-bottom: clamp(36px, 4.5vw, 64px); }
.ab-band { margin-bottom: clamp(28px, 3.8vw, 54px); }

/* 引文：0→75% 通栏（参考图实测 0→74.3%） */
.ab-lead {
  grid-column: 1 / 4;
  margin-top: clamp(10px, 1vw, 16px);
  font-size: clamp(19px, 1.9vw, 34px);  /* 1440 → 27.4px（参考图 15/717 × 1280 ≈ 27） */
  line-height: 1.05;                    /* 参考图墨迹/行距 ≈ 0.89，与页头 lede 同款紧密行距 */
  letter-spacing: -.01em;
  color: #000;
}

/* 能力清单：右半区（3/5）内部再等分两列 */
.ab-cols {
  grid-column: 3 / 5;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(12px, 2vw, 32px);
  row-gap: clamp(28px, 3.4vw, 56px);
}
.ab-work__head {                        /* 小标题两行：中文名 + 英文名（对应参考图的两行小标题） */
  margin: 0 0 clamp(8px, .8vw, 13px);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.12;
  color: #000;
}
.ab-work__head span { display: block; }
.ab-work__items { list-style: none; margin: 0; padding: 0; }
.ab-work__items li {
  font-size: clamp(13px, .98vw, 14px);
  line-height: 1.25;
  color: #000;
}

/* 我们的团队：4 张办公室实景 —— **规整 2×2 对齐排布**
   （2026-09-17 用户第二轮要求：由「右列整体下移的错落」改为**对齐**，错落版已废弃）
   素材 4 张都是 3:4 竖构图（实际比例 0.7495~0.7537），统一 aspect-ratio:3/4 + object-fit:cover
   → 4 张**等宽等高**：行内顶部齐平、两列等宽，形成干净的 2×2 方格阵。cover 裁切 <0.6%，肉眼看不出。
   ⚠️ 必须 align-items:start：否则 grid 会把 figure 拉成行高，图片比例就没了。
   ⚠️ 不要再加回 `figure:nth-child(even){margin-top}` —— 那就是错落，用户已明确要「对齐排布」。 */
.ab-team {
  grid-column: 3 / 5;
  --ab-team-gap: clamp(8px, 1.1vw, 20px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--ab-team-gap);
  row-gap: var(--ab-team-gap);
  align-items: start;
}
.ab-team figure { margin: 0; }
.ab-team img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--surface-mid);   /* 图未到时是硬编码浅灰占位（反色调色板下别用 --white） */
}

/* 窄屏：四等分栅格塌成单列（标签自动落到内容上方） */
@media (max-width: 900px) {
  .ab-grid { grid-template-columns: 1fr; row-gap: clamp(14px, 2.2vw, 22px); }
  .ab-label, .ab-lead, .ab-cols, .ab-team { grid-column: 1 / -1; }
  /* 窄屏仍是 2 列等宽（对齐排布无列偏移，故无需额外覆盖） */
  .ab-cols { grid-template-columns: 1fr; row-gap: clamp(26px, 5vw, 40px); }
  .ab-lead { margin-top: 0; }
  .ab-hero { aspect-ratio: 4 / 3; }
}

/* ============================================================
   新闻动态 · 瀑布流（insight.html，2026-09-16 按参考图一复刻）
   真 masonry 做法：CSS Grid + 极细行（--mw-row），JS 按每张卡的**内容高**算
   `grid-row-end: span N`（见 main.js `layoutNewsWall()`）。
   行优先依次落位 → **DOM 顺序 == 视觉顺序**（读屏 / SEO 不串）。这也是不用
   CSS `column-count` 的原因：那是「先填满一列再填下一列」，视觉顺序会倒过来。
   ⚠️ 卡片必须 `align-self:start`：否则被拉伸成网格区高度 → 量到的永远是 8px，span 全变 1 行。
   ⚠️ 纵向间距**不用 row-gap**，而是折进 span 计算（N = ceil((h + gapY) / rowH)）：
      两套网格（行高 + 行间隙）同时存在会让栏内间距忽大忽小。
   ⚠️ `--mw-gap-y` 必须写**纯 px**：JS 要 `parseFloat` 读它（自定义属性未注册时
      `getComputedStyle` 返回的是 token 原文，写 clamp() 会读到字符串）。
   封面比例来自 `data.js news[].ar`（内联 `--ar`），高度提前确定 → 图片没到也不跳。
   ============================================================ */
.news-wall {
  --mw-row: 4px;      /* 细行高 = span 步长（决定栏内间距的抖动上限：实测 gap ∈ [gapY, gapY+行高) ） */
  --mw-gap-y: 28px;   /* 栏内纵向间距 */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(16px, 1.8vw, 30px);
  row-gap: 0;
  grid-auto-rows: var(--mw-row);
}
.news-card {
  align-self: start;      /* ← 关键：高度 = 内容高，才量得准 */
  display: block;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: none;
}
.news-card .cover {
  aspect-ratio: var(--ar, 1.3333);   /* 每篇不同（4:3 / 1:1 / 3:4 / 3:2 / 5:4） */
  overflow: hidden;
  background: var(--surface-dark);   /* 硬编码深色占位（反转调色板下别用 var(--black)） */
}
.news-card .cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.news-card:hover .cover img { transform: scale(1.03); }
.news-card .nc-body { padding-top: 14px; }
/* .cat（分类标签）与摘要 <p> 已于 2026-09-17 按用户要求从**列表卡片**移除：
   卡片正文只留「大标题 + 日期」。（文章详情页的分类仍显示，规则在下方 .article .a-head） */
.news-card .nc-body h3 {
  font-size: clamp(16px, 1.15vw, 19px);   /* 分类/摘要删掉后标题是卡片唯一的正文，略放大 */
  margin: 0;                              /* 已是 .nc-body 的第一个子元素 */
  color: #000;                            /* 反转调色板：正文黑字写字面量 */
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card .nc-body .date {
  font-size: 11px;
  color: var(--gray-600);
  margin-top: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* 空态：跨满所有栏（否则只占 1 个 8px 行高，内容全溢出去） */
.news-wall > .empty-state { grid-column: 1 / -1; align-self: start; }

/* 瀑布流栏数：桌面 4 → 笔电 3 → 平板 2 → 手机 1（顺序必须由宽到窄，后者覆盖前者） */
@media (max-width: 1120px) {
  .news-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .news-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); --mw-gap-y: 24px; }
}
@media (max-width: 560px) {
  .news-wall { grid-template-columns: 1fr; --mw-gap-y: 24px; }
}

/* 文章详情 */
.article { max-width: 760px; margin: 0 auto; }
.article .a-head {
  text-align: center;
  padding: 36px 0 42px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 48px;
}
.article .a-head .cat {
  color: var(--gray-400);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.article .a-head h1 {
  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
  margin: 16px 0 18px;
  line-height: 1.2;
  color: var(--white);
}
.article .a-head .date { color: var(--gray-500); font-size: var(--text-sm); }
.article .a-body {
  font-size: var(--text-lg);
  line-height: 1.85;
  color: var(--gray-300);
}
.article .a-body h2 {
  font-size: var(--text-2xl);
  margin: 48px 0 18px;
  color: var(--white);
}
.article .a-body p { margin: 20px 0; }
.article .a-body blockquote {
  margin: 32px 0;
  padding: 20px 28px;
  background: var(--surface-dark);
  border-left: 2px solid var(--white);
  border-radius: 0;
  color: var(--gray-300);
  font-weight: 300;
  font-size: var(--text-xl);
  line-height: 1.7;
}
/* 新闻三级页正文插图（后台「+ 加图片」块，2026-11-05 新增） */
.article .a-body .a-fig { margin: 36px 0; }
.article .a-body .a-fig img {
  display: block; width: 100%; height: auto;
  border-radius: 2px; background: var(--surface-dark);
}
.article .a-body .a-fig figcaption {
  margin-top: 12px; text-align: center;
  color: var(--gray-500); font-size: var(--text-sm); line-height: 1.6;
}
/* 2026-09-16：.article .a-foot 随「聊一聊」CTA（指向已下架的 contact.html）一起删除 */

/* ============================================================
   作品三级详情页（work.html，2026-09-17 新增）
   版式参考 clevay 案例页：竖排长页 —— 首屏通栏大图叠白字标题，往下在
   「通栏满屏图」与「二分栏（图 + 文）」之间交替，文字块带视差滚动。
   ★ **每块用哪种排布由 data.js works[].detail[].layout 决定**（full / split / text）：
      改后台一个字段就换排布，这里只提供三种排布的样式，不含任何按作品的硬编码。
   ⚠️ 本项目调色板是黑白反转的：--black = 白（页面底）/ --white = 黑（正文色）。
      所以「白底黑字」写 `background: var(--black); color: var(--white)`；
      而**压在照片上的白字必须写字面量 #fff** —— 用 var(--white) 会变成黑字＝隐形。
   ============================================================ */

/* ---------- ① hero：通栏满屏图 + 反拉顶栏 + 左下白字（与关于页 .ab-hero 同款做法） ---------- */
.wk-hero {
  position: relative;
  margin-top: calc(-1 * var(--header-h));  /* body.page 的 64px 顶内边距拉回来 → 顶栏压在图上 */
  width: 100%;                            /* ⚠️ 必须显式写：只给 aspect-ratio + max-height 时，
                                             Chrome 会按比例**把宽度一起缩**（右边空一块，曾实测空 414px） */
  aspect-ratio: 1902 / 1000;
  max-height: 88vh;
  background: var(--surface-dark);        /* 照片未到时的底色（硬编码深色，不反转） */
  overflow: hidden;
}
.wk-hero > img {
  position: absolute; inset: 0; z-index: 0;   /* 层序显式写死：photo 0 → 遮罩 1 → 字 2 */
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center;
}
/* 底部白字遮罩：只在文字所在的下缘收口，不整体压暗画面。
   停点写 `min(px, %)` —— 文字用固定 px 贴底，而 hero 高度随视口变
   （手机 hero 被压成矮盒子时文字占比从 ~10% 涨到 ~30%），单一百分比必然顾此失彼。 */
.wk-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top,
    rgba(0, 0, 0, .46) 0,
    rgba(0, 0, 0, .30) min(140px, 34%),
    rgba(0, 0, 0, 0) min(300px, 62%));
}
.wk-hero__cap {
  position: absolute; z-index: 2;
  left: var(--page-gutter); right: var(--page-gutter);
  bottom: clamp(24px, 3.6vw, 56px);
}
.wk-hero__t {
  margin: 0; color: #fff;                      /* 照片上的白字：字面量，别用 var(--white) */
  font-size: clamp(26px, 3.4vw, 52px); line-height: 1.14; letter-spacing: -.02em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .45);  /* 余量不够时靠阴影兜底，不要再加 alpha 把画面压灰 */
}
.wk-hero__l {
  margin: 10px 0 0; color: rgba(255, 255, 255, .86);
  font-size: clamp(13px, 1.15vw, 17px); line-height: 1.5; letter-spacing: .01em;
  text-shadow: 0 1px 16px rgba(0, 0, 0, .5);
}

/* ---------- ② 通栏满屏图（非首块·不叠字）----------
   用图片自身比例（--ar，出数时写进 detail）铺满：零裁切 + 高度先占位 → 不跳版。 */
.wk-sec--full { padding-bottom: clamp(8px, 1vw, 20px); }
.wk-full {
  margin: 0; display: block; width: 100%;
  aspect-ratio: var(--ar, 1.7778);
  background: var(--surface-dark);
}
.wk-full > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* ---------- ③ 二分栏：图 + 文（.is-rev → 右图左文）---------- */
.wk-sec--split { padding-top: clamp(56px, 7vw, 124px); padding-bottom: clamp(56px, 7vw, 124px); }
.wk-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;                    /* 文字短时垂直居中，视差才不会顶出画面 */
  gap: clamp(24px, 4vw, 72px);
  padding: 0 var(--page-gutter);
}
.wk-sec--split.is-rev .wk-split__media { order: 2; }
.wk-split__media {
  margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-dark);
}
.wk-split__media > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.wk-split__text { min-width: 0; }
/* 视差层（外层静止量位、内层位移，见 main.js initWorkParallax） */
.wk-split__in, .wk-text__in { will-change: transform; }
.wk-h2 {
  margin: 0 0 18px; color: var(--white);
  font-size: clamp(20px, 2.1vw, 32px); line-height: 1.2; letter-spacing: -.015em;
}
.wk-split__text p, .wk-text__in p {
  margin: 0 0 14px; color: var(--gray-600);
  font-size: clamp(15px, 1.15vw, 17px); line-height: 1.8;
}
.wk-split__text p:last-child, .wk-text__in p:last-child { margin-bottom: 0; }

/* ---------- ④ 纯文字段（无图）---------- */
.wk-sec--text { padding-top: clamp(48px, 6vw, 100px); padding-bottom: clamp(48px, 6vw, 100px); }
.wk-text { max-width: 760px; }

/* ---------- ⑤ 两张通栏图连排时贴紧（其余靠各自 padding 撑开）---------- */
.wk-sec--full + .wk-sec--full { padding-top: clamp(8px, 1vw, 20px); }
.wk-hero + .wk-sec--full { padding-top: clamp(8px, 1vw, 20px); }

/* ---------- ⑥ 页尾「其他作品」---------- */
.wk-sec--related {
  padding-top: clamp(56px, 7vw, 118px); padding-bottom: clamp(64px, 8vw, 132px);
  border-top: 1px solid var(--line);
}
.wk-rel__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  margin-bottom: clamp(20px, 2.4vw, 40px);
}
.wk-rel__all { font-size: var(--text-base); color: var(--gray-600); transition: color .2s var(--ease); }
.wk-rel__all:hover { color: #000; }
.wk-rel__all .arrow { margin-left: 4px; }

/* ---------- ⑦「其他作品」= 4 卡横排（2026-09-17 用户要求）----------
   ⚠️ 必须用祖先作用域 `.wk-sec--related .works-grid` 覆盖，不能改 `.works-grid` 本身：
      它是全站共用网格（首页精选 + cases 页 = 2 列）；也不能只加个单类 `.wk-rel__grid`——
      单类会被后面 ≤860 媒体查询里的 `.works-grid{grid-template-columns:1fr}` 按源码顺序盖掉（手机变单列）。
   4 列下限：视口 1025px 时内容宽 ≈865px → 单卡 ≈200px；再窄就掉到 3 列（1024 断点）。 */
.wk-sec--related .works-grid {
  grid-template-columns: repeat(4, 1fr);
  column-gap: clamp(16px, 1.6vw, 28px);
  row-gap: clamp(20px, 2vw, 30px);
}
/* 卡片只剩 1/4 宽（≈200~290px），名称跟着缩小，否则「大标题压小图」 */
.wk-sec--related .work-name { font-size: clamp(15px, 1.2vw, 18px); }

/* 作品卡现在是 <a>：键盘焦点必须看得见 */
.work-card:focus-visible { outline: 2px solid #000; outline-offset: 4px; }

/* ---------- 响应式 ---------- */
@media (max-width: 860px) {
  /* 窄屏二分栏统一「图在上、文在下」（is-rev 也复位） */
  .wk-split { grid-template-columns: 1fr; gap: 20px; padding: 0 10px; }
  .wk-sec--split.is-rev .wk-split__media { order: 0; }
  .wk-hero { aspect-ratio: 4 / 3; max-height: 78vh; }
}
/* 视差是纯装饰：用户要求减少动态时彻底关掉（JS 也会跳过位移） */
@media (prefers-reduced-motion: reduce) {
  [data-parallax] { transform: none !important; }
  .wk-split__in, .wk-text__in { will-change: auto; }
}

/* ============================================================
   联系我们（浅色变体）
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: start;
}
.contact-info .ci {
  display: flex;
  gap: 18px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.contact-info .ci:last-of-type { border-bottom: none; }
.contact-info .ci .ic {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 0;
  background: var(--gray-100);
  color: var(--gray-500);
  display: grid;
  place-items: center;
  font-size: 18px;
}
.contact-info .ci .k {
  font-size: var(--text-xs);
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
}
.contact-info .ci .v {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--black);
  margin-top: 2px;
}
.contact-info .ci .v a:hover { text-decoration: underline; }

.form-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 0;
  padding: 40px;
}
.form-row { margin-bottom: 20px; }
.form-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field label {
  display: block;
  font-size: var(--text-sm);
  color: var(--gray-600);
  margin-bottom: 8px;
  font-weight: 500;
}
.field label .req { color: var(--err); margin-left: 3px; }
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--gray-300);
  border-radius: 0;
  font-size: var(--text-base);
  font-family: var(--font);
  color: var(--black);
  background: var(--white);
  transition: border-color .25s;
  -webkit-appearance: none;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--black);
}
.field textarea { resize: vertical; min-height: 110px; }
.field .err-msg { color: #b3261e; font-size: var(--text-sm); margin-top: 6px; display: none; }
.field.invalid input,
.field.invalid textarea { border-color: #b3261e; }
.field.invalid .err-msg { display: block; }
.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: var(--text-sm);
  color: var(--gray-500);
  margin: 8px 0 26px;
}
.consent input { margin-top: 4px; flex: none; width: 16px; height: 16px; accent-color: var(--black); }
.consent a { color: var(--black); text-decoration: underline; }

.form-alert {
  display: none;
  padding: 16px 20px;
  border-radius: 0;
  margin-bottom: 20px;
  font-size: var(--text-sm);
  font-weight: 500;
}
.form-alert.show { display: block; }
.form-alert.ok {
  background: var(--gray-100);
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
}
.form-alert.fail {
  background: #fef2f2;
  color: #b3261e;
  border: 1px solid #fecaca;
}

.map-box {
  aspect-ratio: 16/9;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid var(--gray-200);
  background: var(--gray-100);
  margin-top: 12px;
  position: relative;
}
.map-box iframe { width: 100%; height: 100%; border: 0; }
.map-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--gray-500);
  font-size: var(--text-sm);
  background: repeating-linear-gradient(
    45deg,
    var(--gray-100),
    var(--gray-100) 14px,
    #eee 14px,
    #eee 28px
  );
}

/* ============================================================
   Lightbox
   ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,.95);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: 0;
}
.lightbox .close {
  position: absolute;
  top: 24px;
  right: 28px;
  color: var(--white);
  font-size: 36px;
  font-weight: 200;
  cursor: pointer;
}

/* ============================================================
   动画（极简：仅淡入上移）
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(3, 1fr); }
  /* .logo-wall 已改为单张合集图，不再需要响应式列数切换 */
  .hero-bg { opacity: .12; right: -10%; }
  /* 2026-09-16：顶栏字号回落到 24px 后，861px 视口也放得下（实测），
     原先为 32px 加的 `.nav-links a { font-size: 2.4vw }` 递减已删除。 */
  /* 联系方式列仍按内容宽（max-content）→ 每行都是一行；服务列吃掉剩余宽度 */
  .footer-grid { grid-template-columns: minmax(0, 1fr) max-content; gap: 36px; }
  .footer-grid > :first-child { grid-column: 1 / -1; } /* 描述列通栏，剩下两列正好凑一行（原 4 列 2×2，现 3 列） */
  .footer-mantra .mantra-item { font-size: clamp(36px, 10vw, 72px); }
  /* 详情页「其他作品」4 卡横排 → 平板降到 3 列（单卡仍 ≥190px） */
  .wk-sec--related .works-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  .section { padding: 80px 0; }
  .nav-links { display: none; } /* 2026-09-16：预约咨询按钮已删，选择器去掉 .nav-cta .btn */
  .nav-cta { display: flex; }   /* 桌面隐藏的 .nav-cta 在这里恢复，汉堡按钮才有位置 */
  .nav-toggle { display: flex; }
  .grid-2, .grid-4 { grid-template-columns: 1fr; }
  .works-grid { grid-template-columns: 1fr; row-gap: 52px; } /* 单列：32px +10 +10 */
  /* 详情页「其他作品」不跟单列：4 卡横排 → 手机 2×2（4 卡挤一行只有 ~90px/卡，不可用）。
     祖先作用域比这里的 .works-grid 更具体，必须显式覆盖回来。 */
  .wk-sec--related .works-grid { grid-template-columns: repeat(2, 1fr); column-gap: 12px; row-gap: 28px; }
  .works-bleed { padding: 0 10px; }
  .wrap { padding: 0 10px; }
  /* 服务板块（clevay 版式）：窄屏清单堆叠；横幅比例仍保持 ≥2:1。
     ⚠️ --svc-gutter 必须跟着 .wrap 的 10px 一起改 —— 它同时管「文案缩进」和「横幅拉出的距离」，
        只改一边会让横幅比视口宽（横向溢出）或露出两边空白。
     ⚠️ 白字压在照片上，靠 `.svc-block__media::before` 的上下渐变 + 文字自带 text-shadow 兜底。 */
  .svc-block { --svc-gutter: 10px; }
  .svc-block__media { aspect-ratio: 2 / 1; }
  .svc-spec { grid-template-columns: 1fr; }
  .svc-spec__label { padding-top: 0; padding-bottom: 10px; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  /* .news-card 的窄屏覆写已随瀑布流改版移除（栏数改由 .news-wall 自己的媒体查询管） */
  .side-cta { display: none; }
  /* .logo-wall 已改为单张合集图，不再需要响应式列数切换 */
  /* 窄屏：封面盒上限抬到 78vh（手机竖屏高宽比大，70vh 会显得小） */
  .hero-carousel {
    --hc-pad: 14px;
    --hc-maxh: max(180px, min(78vh, calc(100vh - var(--header-h) - 2 * var(--hc-pad) - var(--hc-ui-h))));
  }
  .intro-rda__head { grid-template-columns: 1fr; }
  .intro-rda__text { grid-column: 1; font-size: clamp(26px, 5.5vw, 40px); }
  .video-band { margin-top: 36px; }
  /* 我们的专业：单列堆叠（大标题在上，标签网格在下）；标签行高收窄 */
  .sli-group { grid-template-columns: 1fr; }
  .sli-group__name { padding-top: 0; padding-bottom: 12px; }
  .services-list-section { --tag-fs: 20px; --tag-row-h: 40px; }
  /* 服务页整段介绍：窄屏 40px 会溢出成十几行，降字号并放开 3/4 宽限制 */
  .page-head .page-head__lede { font-size: clamp(20px, 5vw, 40px); max-width: 100%; }
  .sli-group + .sli-group { margin-top: 32px; }
  .footer-mantra .mantra-item { font-size: clamp(28px, 12vw, 56px); }
}

@media (max-width: 560px) {
  .wrap { padding: 0 10px; }
  .services-list-section { --tag-fs: 18px; --tag-row-h: 38px; }
  .svc-block__lead { max-width: 100%; }
  .form-row.two { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .float-cta {
    right: 16px;
    bottom: 16px;
    padding: 10px;
  }
}

/* ===== 圆形光标（参考 RONG Design 实测）=====
   纯白实心圆盘 + mix-blend-mode:difference：白底显黑、深底显白，任何背景都清晰。
   静息 13px、hover 放大到 38px（约 2.9x）；单元素、无拖尾环、无文字标签。
   仅「精确指针」设备启用（触屏/笔保留原生光标）；位移由 JS 每帧写 transform，
   尺寸由内层 scale 过渡 —— 两者分离，互不打架。 */
.msj-cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;                 /* 圆心对准指针 */
  z-index: 2147483000;
  pointer-events: none;                    /* 不挡点击、不挡 hover 判定 */
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity .28s ease;
  will-change: transform;
}
.msj-cursor.is-visible { opacity: 1; }
.msj-cursor__dot {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #fff;
  transform: scale(var(--cur-s, .342));    /* 38 x .342 ~= 13px */
  transform-origin: 50% 50%;
  transition: transform .34s cubic-bezier(.22, .61, .36, 1);
}
.msj-cursor.is-hover .msj-cursor__dot { --cur-s: 1; }    /* -> 38px */
.msj-cursor.is-down .msj-cursor__dot { --cur-s: .84; }   /* 按下微缩 */
/* 只有 JS 成功注入后才加 .has-msj-cursor（无 JS 时保留原生光标，不会「没有光标」） */
html.has-msj-cursor,
html.has-msj-cursor body,
html.has-msj-cursor * { cursor: none !important; }
@media (hover: none), (pointer: coarse) {
  .msj-cursor { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .msj-cursor__dot { transition: none; }
}

/* ===== 【小样例】关于页首屏主张：逐字模糊上浮（参考 magicui TextAnimate blurInUp / by=character）=====
   只作用于 #about-claim 这一个区块 —— 先看效果再决定是否铺开。
   容器带 .reveal（借原有 IntersectionObserver 触发 .in），.ta.reveal 抵消容器自身位移/淡入 → 不叠两层。 */
.ta.reveal { opacity: 1; transform: none; }
.ta .ta-w { display: inline-block; white-space: nowrap; }
.ta .ta-c {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(0.5em);
  transition: opacity .6s var(--ease), filter .6s var(--ease), transform .6s var(--ease);
}
.ta.in .ta-c {
  opacity: 1;
  filter: blur(0);
  transform: none;
  transition-delay: calc(var(--i, 0) * var(--ta-step, 35ms));
}
/* 本样例故意不在 reduce 下关闭：与首屏横幅同为品牌核心表现，且预览/webview 默认上报 reduce 会掐掉效果。文字仍可见，仅少一层装饰。 */


/* ============================================================
   卡片网格交错进入（2026-09-24）
   - 作品卡 / 新闻卡按网格顺序（左→右、上→下）依次淡入 + 轻微上移 + 放大回稳
   - 每张错开 80ms，整块约 1.5s；滚动到该区才触发；进入后 unobserve（往回滚不重播）
   - ⚠️ 封面轮播 / 首屏 LCP 图不在 .works-grid、.news-wall 内 → 不动
   ============================================================ */
.stg { opacity: 0; }
/* fill-mode:backwards → 延迟期间保持 0% 态（隐藏）；播完不留存动画样式，
   这样 hover 的 transform 才能正常接管（不会与动画终态打架）。 */
.stg.in {
  opacity: 1;
  animation: cardIn .75s var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * var(--stg-step, 80ms));
}
@keyframes cardIn {
  0%   { opacity: 0; transform: translateY(18px) scale(.97); }
  70%  { opacity: 1; transform: translateY(0) scale(1.015); }
  100% { opacity: 1; transform: none; }
}
/* 新闻瀑布流：layoutNewsWall() 用 getBoundingClientRect().height 算 span，
   带 scale 会让量到的高度缩水 → 这里只做 opacity + translateY */
@keyframes cardInFlat {
  0%   { opacity: 0; transform: translateY(18px); }
  100% { opacity: 1; transform: none; }
}
.news-wall .stg.in { animation-name: cardInFlat; }

/* 案例标签：比图片晚 0.2s 淡入 */


/* 悬停点亮：当前卡片轻微放大 + 提对比度；同网格其余卡片**保持原样**（不降透明度、不降对比度） */
.work-card { transition: transform .4s var(--ease), opacity .35s var(--ease); }
.work-card:hover { transform: scale(1.05); position: relative; z-index: 2; }
.work-card:hover .work-thumb img { filter: contrast(1.08); }



/* ============================================================
   服务页 / 关于页：Ken Burns 背景推拉 + 分层文字（2026-09-24）
   ① 背景图 1.08 → 1（约 2s）② 介绍段落整体淡入 + 上移 20px（0.8s 减速收尾）
   ③ 图片标题 blur 6px → 清晰 + 轻微上移，比文字晚 0.3s
   ⚠️ 只缩放 <img> 本身（容器 overflow:hidden 裁切）—— 缩放容器会连叠字一起放大
   ============================================================ */
.kb-img { transform: scale(1.08); }
.kb-img.in { animation: kbZoom 2s cubic-bezier(.22, .61, .36, 1) forwards; }
@keyframes kbZoom {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}



/* 移动端 / 减少动态模式：保留信息（照常淡入），取消大幅位移与推拉 */
@media (max-width: 860px) {
  .kb-img, .kb-img.in { animation: none; transform: none; }
  .kb-txt, .kb-ttl { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kb-img, .kb-img.in { animation: none; transform: none; }
  .kb-txt, .kb-ttl { transform: none; filter: none; transition: opacity .5s linear; transition-delay: 0s; }
}

/* ============================================================
   全站文字：按行依次显现（2026-09-24 17:10）
   每行从下方轻微上移 + 淡入，每行错开 100ms，整体约 1.2s
   ⚠️ 中文软换行 → 由 markLines() 按**视觉行**切分后套 .ln-l
   ============================================================ */
.ln .ln-l {
  display: block;
  opacity: 0;
  transform: translateY(14px);
}
.ln.in .ln-l {
  opacity: 1;
  transform: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay: calc(var(--i, 0) * var(--ln-step, 100ms));
}
/* 移动端 / 减少动态：取消位移，保留淡入（信息照常出现） */
@media (max-width: 860px) {
  .ln .ln-l { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ln .ln-l { transform: none; transition: opacity .4s linear; }
}