/* ==========================================================================
   ABOUT v2 · 排版叙事版（v1.11.37）
   --------------------------------------------------------------------------
   ⚠ 只作用于 `body.page-about`，现版 /about/ 完全不受影响。

   ⚠⚠ **这一版的排版语法来自 El Paso Paper Box（eppbinc.com）**
   研究后发现的不是配色，是**排版装置**。逐条对照：

   ① Hero 顶部一行极小 meta 条先给身份，主张次之 —— 不靠大标题取胜
   ② 小节是**双行标签**：小字 "What separates us" + 大字全大写 "THE DIFFERENCE"
   ③ **三位数编号 001/002/003 + 超大浅色数字，独立成列** ← 最强的装置
   ④ 条目标题本身是**论断**（"We manufacture rather than resell."），不是名词短语
   ⑤ 时间轴每行三列：年份 | 标题 | 说明，横排左对齐
   ⑥ Mission / Vision 两栏并置
   ⑦ **大幅减少用图**，靠排版本身制造节奏

   v1.11.36 的问题正是 ①②③④ 都没做 + 图太多 →
   出来像模板站。这一版逐条补上。
   ========================================================================== */

.page-about .abn { width: 100%; }

/* 内容框：只有文字收窄，背景与 hero 仍然满宽 */
.page-about .abn-inner {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ==========================================================================
   1. HERO —— 大气感来自「密度」而不是「字号」（v1.11.47 重做）
   --------------------------------------------------------------------------
   ⚠ 旧版被评价「太简单、少了大气」，实测根因（不是字号小）：
     · 499px 高度里塞了三层文字 → 一屏全是字
     · h1 占满 1072px 宽却只有 2 行 → 被压成一条横带
     · 副文案只有 552px，右侧空 500px → 版面失衡
     · 没有任何辅助元素（无 CTA、无底部条）→ 不像官网首屏
   本版四手（学 EPPB / NW Paper Box 的首屏）：
     ① 高度 78vh → 上半屏留给图，文字整体下沉
     ② h1 分层（中文大字 + 英文副行）→ 撑住宽度不压扁
     ③ 底部信息条 → 给画面一个「落脚点」
     ④ CTA + 次级链接 → 首屏有行动出口
   ========================================================================== */
.page-about .abn-hero {
  position: relative;
  /* 78vh：比旧版 499px 高出一大截，让图片成为主角 */
  min-height: clamp(560px, 78vh, 820px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.page-about .abn-hero-media { position: absolute; inset: 0; z-index: -2; }
.page-about .abn-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.page-about .abn-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* 压暗加强 + 底部更重，让文字区有足够对比度 */
  background:
    linear-gradient(180deg, rgba(10, 9, 9, .58) 0%, rgba(10, 9, 9, .26) 34%, rgba(10, 9, 9, .92) 100%),
    linear-gradient(96deg, rgba(110, 8, 22, .52) 0%, rgba(110, 8, 22, 0) 60%);
}
/* hero-body 改纵向 flex：文字区与信息条两端分布 */
.page-about .abn-hero-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 4vw, 52px);
  padding-block: var(--sp-7) clamp(24px, 3vw, 40px);
  color: #fff;
}

/* ---- meta 条：极小字 + 顶部细线 ---- */
.page-about .abn-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .84);
  margin-bottom: var(--sp-5);
}
.page-about .abn-meta::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: rgba(255, 255, 255, .3);
  margin-left: 8px;
}

/* ---- h1 分层：主行超大，副行小一号（v1.11.47） ---- */
.page-about .abn-hero h1 {
  font-size: inherit;
  line-height: 1;
  letter-spacing: -.02em;
  color: #fff;
  margin-bottom: var(--sp-5);
  max-width: none;
}
.page-about .abn-h1-cn {
  display: block;
  /* 主行够大才能压住画面（旧版上限 3.1rem 太小） */
  font-size: clamp(2.6rem, 7.4vw, 5.4rem);
  font-weight: 800;
  line-height: 1.02;
}
.page-about .abn-h1-en {
  display: block;
  /* 副行小一档，形成层次而不是重复 */
  font-size: clamp(1.1rem, 2.4vw, 2rem);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.2;
  color: rgba(255, 255, 255, .72);
  margin-top: .28em;
}

/* ---- 副文案：旧版 60ch≈552px，右侧空 500px，这里放宽 ---- */
.page-about .abn-hero-lead {
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.78;
  color: rgba(255, 255, 255, .9);
  max-width: 680px;
  margin-bottom: var(--sp-5);
}

/* ---- CTA ---- */
.page-about .abn-hero-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.page-about .abn-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  background: var(--brand-red);
  color: #fff;
  border-radius: var(--r-sm);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .02em;
  transition: background var(--dur-fast), transform var(--dur-fast) var(--ease);
}
.page-about .abn-hero-btn:hover {
  background: var(--brand-red-dark);
  color: #fff;
  transform: translateY(-2px);
}
.page-about .abn-hero-link {
  font-size: .92rem;
  color: rgba(255, 255, 255, .88);
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(255, 255, 255, .34);
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.page-about .abn-hero-link:hover {
  color: #fff;
  border-bottom-color: #fff;
}

/* ---- 底部信息条：画面的「落脚点」 ---- */
.page-about .abn-hero-strip {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, .16);
  border-top: 1px solid rgba(255, 255, 255, .2);
}
.page-about .abn-strip-item {
  /*
   * v1.12.6：蒙版透明度 .34 → .55。
   * ⚠ 原因：About 页 hero 底图偏亮，.34 的深色蒙版叠上去后实际底色只有 #adacac，
   *   白字对比度 2.26、#dadada 只有 1.61（Lighthouse color-contrast 报错，
   *   且中文 /zh/about/ 移动端才暴露 —— 桌面端该区域是深色，掩盖了问题）。
   * ⚠ .72 时：合成底色 ≈ #4f4f4f → 纯白 7.2 / .88白 5.9，全部达 AA。
   *   （Lighthouse 会把半透明文字与背景**合成后**再算对比度，
   *    所以文字本身也要接近纯白才够。）
   * ⚠ 只改透明度，**不动布局**（padding / grid / 尺寸都没动）。
   */
  background: rgba(12, 10, 10, .72);
  padding: var(--sp-4) 0 var(--sp-4) var(--sp-4);
}
.page-about .abn-strip-item:first-child { padding-left: 0; }
.page-about .abn-strip-label {
  display: block;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  /* v1.12.6：.55 → .88（配合加深的蒙版才达 AA；Lighthouse 合成半透明后计算） */
  color: rgba(255, 255, 255, .88);
  margin-bottom: 8px;
}
.page-about .abn-strip-item b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.1vw, 1.75rem);
  font-weight: 800;
  line-height: 1;
  color: #fff;
  margin-bottom: 6px;
}
.page-about .abn-strip-note {
  display: block;
  font-size: .74rem;
  letter-spacing: .04em;
  /* v1.12.6：.5 → .88（配合加深的蒙版才达 AA） */
  color: rgba(255, 255, 255, .88);
}



/* ==========================================================================
   3. 小节双行标签 —— EPPB 的招牌结构
   ========================================================================== */
.page-about .abn-sec { padding-block: clamp(52px, 7vw, 92px); }
.page-about .abn-sec.is-soft { background: var(--bg-soft); }
.page-about .abn-sec.is-dark { background: var(--bg-dark); color: #fff; }

.page-about .abn-head { margin-bottom: clamp(30px, 4vw, 46px); }

/* 第一行：小字 + 红短线 */
.page-about .abn-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--ink-mute);
  margin-bottom: 10px;
}
.page-about .abn-tag::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--brand-red);
  flex: 0 0 auto;
}
/* 第二行：全大写大字 —— 与第一行形成明确的大小对比 */
.page-about .abn-title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: .01em;
  margin-bottom: var(--sp-3);
}
.page-about .abn-lead {
  font-size: clamp(.98rem, 1.3vw, 1.06rem);
  line-height: 1.72;
  color: var(--ink-mute);
  max-width: 68ch;
}
.page-about .is-dark .abn-tag,
.page-about .is-dark .abn-lead { color: rgba(255, 255, 255, .68); }
.page-about .is-dark .abn-title { color: #fff; }

/* ==========================================================================
   4. ★ 三位数编号条目 —— 本版核心装置（EPPB 最强的手法）
   --------------------------------------------------------------------------
   关键在**编号独立成列**且字号远大于正文：
   读者的视线先扫到灰色大数字，再横向进入文字 ——
   这让一长串内容有了「目录感」，不需要锚点导航也能定位。
   ========================================================================== */
.page-about .abn-items { border-top: 1px solid var(--line); }

.page-about .abn-item {
  /*
   * ⚠ `display: grid` 在这里被重置区的 `article` 规则覆盖过吗？没有——
   *   但 v1.11.37 首测时编号与标题是**上下堆叠**的，
   *   原因是 `.abn-item-body` 的 `h3`/`p` 没有明确宽度约束，
   *   在 grid 里没被撑开。**根因是 grid 列定义被覆盖**，
   *   所以这里补 `grid-template-columns` 到 `!important` 之外更稳的做法是
   *   **改用 flex**：编号固定宽度不伸缩，文字列 `flex:1` 撑满。
   *
   * 选flex 的理由：编号列必须**恒定**，文字列必须**吃掉全部剩余宽度** ——
   * flex 的 `flex: 1 1 auto` + `min-width: 0` 语义更直白，
   * 也不会因为任何 grid 覆盖而失效。
   */
  display: flex;
  align-items: flex-start;
  /* ⚠ v1.11.51：加大「编号 ↔ 文字」的间距（见 .abn-num 处的说明） */
  gap: clamp(28px, 4vw, 56px);
  padding-block: clamp(26px, 3.4vw, 38px);
  border-bottom: 1px solid var(--line);
}
.page-about .abn-num {
  /*
   * ⚠ v1.11.51：编号列宽与「数字到文字」的间距要分开调。
   *
   * 实测（1280 视口）旧值clamp(78px,9vw,124px) → 实际 114px：
   *   · `001` 三个字符只占约 60px → 列右侧空掉 50px
   *   · 编号到文字只有 32px → 数字紧贴左侧红线，右侧反而空一块
   *   视觉上就是「数字挤在边上、中间一大片空白」。
   *
   * 现在：列宽收到 78–96px（够放三位数即可），
   * gap 提到 clamp(28px,4vw,56px)，把间距让给数字与文字之间。
   */
  /*
   * ⚠ v1.11.53：编号需要**左侧内边距**，让开红线。
   *
   * v1.11.51 我以为用户要的是「数字↔文字」拉开（把 gap 加到 51px），
   * 但截图里**红线与数字贴在一起** —— 那是**另一段间距**：
   * `.abn-item::before` 的红线定位在 `left:0`，
   * 而编号 `padding-left:0` → 数字起点与红线**完全重合**。
   * 实测 gapLineToText = **-2px**（负数 = 数字压在红线上）。
   *
   * 注意 `box-sizing: border-box`（站点全局设置）：
   * 加 padding 后**文字区会被压窄**，
   * 所以宽度要同步加 padding 值，否则三位数会被挤到第二行。
   */
  flex: 0 0 calc(clamp(62px, 6.5vw, 82px) + clamp(16px, 2.2vw, 30px));
  width: calc(clamp(62px, 6.5vw, 82px) + clamp(16px, 2.2vw, 30px));
  /* 让开左侧红线 */
  padding-left: clamp(16px, 2.2vw, 30px);
  font-family: var(--font-display);
  /* 超大但极浅 —— 有存在感但不抢文字 */
  /*
   * ⚠ 字号与标题的**视觉高度**要接近，否则会「看着像上下堆叠」：
   *   首版用 3.9rem 时，编号比 h3（1.42rem）高出两倍，
   *   虽然 flex 上确实是同一行，视觉重心却错位 →
   *   截图上读起来像「001 是上一行的标题」，很误导。
   *   现在压到 2.2rem 上下，与标题同量级，
   *   同时靠**颜色**（浅灰）而不是字号来制造层级。
   */
  font-size: clamp(1.7rem, 2.6vw, 2.25rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  /* 浅灰比 --line(#e4e6e9) 略深一点，否则几乎看不见 */
  color: #c8ccd1;
  font-variant-numeric: tabular-nums;
  transition: color var(--dur) var(--ease);
}
.page-about .abn-item:hover .abn-num { color: var(--brand-red); }

.page-about .abn-item-body {
  /* min-width:0 很关键 —— 不写的话长英文单词会撑破 flex 容器 */
  flex: 1 1 auto;
  min-width: 0;
}
.page-about .abn-item-body h3 {
  /* 论断式标题：本身就是一句话结论 */
  font-size: clamp(1.12rem, 1.9vw, 1.42rem);
  line-height: 1.28;
  margin-bottom: 10px;
  max-width: 34ch;
}
.page-about .abn-item-body p {
  font-size: .96rem;
  line-height: 1.76;
  color: var(--ink-mute);
  /* ⚠ 实测文字列有 926px，但 78ch 只让 p 实际占 646px
     —— 英文的 ch 单位比中文小很多，用 ch 限制会白白浪费右侧空间。
     所以这里**不加 max-width**，让它吃满 flex 剩余宽度；
     需要控制行长时用更宽的 ch 值（英文正文理想行长约 90–100ch）。 */
  max-width: none;
  margin: 0;
}
.page-about .abn-item-body strong { color: var(--ink); font-weight: 600; }

/* ==========================================================================
   5. 左右交错配图（只保留 3 处，控制图的量）
   ========================================================================== */
.page-about .abn-splits { display: flex; flex-direction: column; gap: clamp(32px, 4.5vw, 56px); }
.page-about .abn-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(26px, 4.5vw, 58px);
  align-items: center;
}
.page-about .abn-split.is-flip .abn-split-media { order: -1; }
.page-about .abn-split.is-inline {
  margin-top: clamp(34px, 4.5vw, 54px);
  padding-top: clamp(34px, 4.5vw, 54px);
  border-top: 1px solid var(--line);
}
.page-about .abn-split-body h3 {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.24;
  margin-bottom: var(--sp-3);
  max-width: 24ch;
}
.page-about .abn-split-body p {
  font-size: .95rem;
  line-height: 1.76;
  color: var(--ink-mute);
  margin: 0;
}
/*
 * 媒体容器：v1.11.52 起所有配图统一圆角。
 * ⚠ overflow:hidden 必须在**容器**上而不是只在 img 上 ——
 *   hover 时 img 会 scale(1.04) 放大，
 *   圆角加在 img 上会被放大后的直角顶破，必须靠容器裁切。
 */
.page-about .abn-split-media {
  overflow: hidden;
  border-radius: var(--r-md);
  line-height: 0;/* 去掉 img 下方的行内基线缝隙 */
}
.page-about .abn-split-media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  border-radius: var(--r-md);
}
/*
 * ⚠ v1.11.50：正方形配图用1:1 框（v1.11.14 的教训）
 * 新换的礼袋图是 1000×1000 正方形，若沿用上面的 3:2 框，
 * `object-fit: cover` 会**裁掉上下各约 25%** —— 礼袋提手与盒底都会被切。
 * 所以给正方素材单独一个 `.is-square` 类，比例按实际图片走。
 */
.page-about .abn-split.is-square .abn-split-media img {
  aspect-ratio: 1 / 1;
  /*
   * ⚠ v1.11.52：配图统一圆角（用户要求「这个图片…也采用圆角设计」）。
   * 礼袋是实拍产品图，直角矩形在浅色背景上显得生硬；
   * 圆角让它与页面上其他元素（按钮、卡片、证书图）语言一致。
   * ⚠ 媒体容器要 overflow:hidden —— 圆角 + hover scale(1.04)
   *   时图片会**溢出圆角边界**，露出直角。
   */
  border-radius: var(--r-md);
}
.page-about .abn-split.is-square .abn-split-media {
  overflow: hidden;
  border-radius: var(--r-md);
}

/* ==========================================================================
   6. 流程 —— 编号在上，细线连接
   ========================================================================== */
.page-about .abn-flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-4);
}
.page-about .abn-step {
  position: relative;
  padding-top: var(--sp-4);
}
.page-about .abn-step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--line);
}
.page-about .abn-step::after {
  /* 起点小方块，与流程「节点」呼应 */
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  width: 8px;
  height: 8px;
  background: var(--brand-red);
}
.page-about .abn-step b {
  display: block;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--brand-red);
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
/*
 * v1.12.6：<h4> 改成 <h3>（修 Lighthouse heading-order 跳级）。
 * ⚠ h3 与 h4 的浏览器默认 margin-top 不同（1em vs 1.33em），
 *   这里显式写死 1.33em —— 换算后与原 h4 **像素完全一致**，排版零变化。
 */
.page-about .abn-step h3 { font-size: 1rem; margin: 1.33em 0 6px; }
.page-about .abn-step p {
  font-size: .87rem;
  line-height: 1.62;
  color: var(--ink-mute);
  margin: 0;
}

/* ==========================================================================
   7. 时间轴 —— 三列横排行（年份 | 标题 | 说明）
   ========================================================================== */
.page-about .abn-tl { border-top: 1px solid rgba(255, 255, 255, .14); }
.page-about .abn-tl-row {
  display: grid;
  grid-template-columns: 120px 240px 1fr;
  gap: var(--sp-5);
  padding-block: var(--sp-4);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  align-items: baseline;
}
.page-about .abn-tl-year {
  font-family: var(--font-display);
  font-size: 1.42rem;
  font-weight: 800;
  color: rgba(255, 255, 255, .42);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.page-about .abn-tl-row.is-now .abn-tl-year,
.page-about .abn-tl-row:hover .abn-tl-year { color: var(--brand-red); }
.page-about .abn-tl-row h3 { font-size: 1rem; color: #fff; margin: 0; }
.page-about .abn-tl-row p {
  font-size: .9rem;
  line-height: 1.68;
  color: rgba(255, 255, 255, .62);
  margin: 0;
}

/* ==========================================================================
   8. Mission / Vision 两栏并置
   ========================================================================== */
.page-about .abn-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 52px);
}
.page-about .abn-duo-item {
  padding-top: var(--sp-4);
  border-top: 2px solid var(--brand-red);
}
.page-about .abn-duo-label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-red);
  margin-bottom: var(--sp-3);
}
.page-about .abn-duo-item p {
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  line-height: 1.72;
  color: var(--ink);
  margin: 0;
}

/* ==========================================================================
   9. 认证 —— 深底横排
   ========================================================================== */
.page-about .abn-certs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5) var(--sp-6);
}
.page-about .abn-cert {
  border-top: 1px solid rgba(255, 255, 255, .18);
  padding-top: var(--sp-3);
}
.page-about .abn-cert b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
}
.page-about .abn-cert p {
  font-size: .88rem;
  line-height: 1.62;
  color: rgba(255, 255, 255, .62);
  margin: 0;
}
.page-about .abn-cert-strip { margin-top: clamp(32px, 4vw, 50px); }
.page-about .abn-cert-strip img {
  /*
   * ⚠ v1.11.42：之前写死 `height: clamp(...)` + `object-fit: contain`
   *   → 框高 253px 而图按比例只需 192px，上下各留 30px 白边
   *   （实测 cropTop=0，没裁切，但看着「被缩小」）。
   * 正解：width:100% + height:auto 让图按自身比例撑开。
   *
   * ⚠ v1.11.47：**加圆角**
   *   用户要求「证书下面的图用圆角设计」。证书是放在**深炭底板块**里的，
   *   直角矩形会显得生硬 —— 圆角 + 细边框让它像「一张摊开的证书」。
   */
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-md);
  /* 一道浅色内描边：证书纸本身是浅色的，不加描边在深底上会「浮」 */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.page-about .abn-cert-strip:hover img {
  /* 轻微上浮 + 描边变亮，呼应「这张纸可以被拿起来看」的隐喻 */
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .34), var(--sh-lg);
}
.page-about .abn-cert-strip figcaption {
  padding-top: var(--sp-3);
  /* 圆角图注与图左边缘对齐才整齐 */
  padding-left: 2px;
}
.page-about .abn-cert-strip figcaption {
  font-size: .84rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .55);
  padding-top: var(--sp-3);
}

/* ==========================================================================
   10. 行业列表 —— 纯文字，靠分隔线分行（不用卡片）
   ========================================================================== */
.page-about .abn-list { border-top: 1px solid var(--line); }
.page-about .abn-list-row {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--sp-5);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--line);
  align-items: baseline;
  transition: background var(--dur-fast);
}
.page-about .abn-list-row:hover { background: var(--bg-soft); }
.page-about .abn-list-row h3 { font-size: 1.02rem; margin: 0; }
.page-about .abn-list-row p {
  font-size: .92rem;
  line-height: 1.65;
  color: var(--ink-mute);
  margin: 0;
}

/* ==========================================================================
   11. 响应式
   ========================================================================== */
@media (max-width: 1080px) {
  .page-about .abn-flow { grid-template-columns: repeat(3, 1fr); }
  .page-about .abn-tl-row { grid-template-columns: 100px 200px 1fr; }
  .page-about .abn-certs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .page-about .abn-item { gap: var(--sp-4); }
  .page-about .abn-num {
    flex-basis: 70px;
    width: 70px;
    padding-left: 14px;
  }
  .page-about .abn-split { grid-template-columns: 1fr; }
  .page-about .abn-split.is-flip .abn-split-media { order: 0; }
  .page-about .abn-tl-row { grid-template-columns: 86px 1fr; }
  .page-about .abn-tl-row p { grid-column: 2; }
  .page-about .abn-duo { grid-template-columns: 1fr; }
  .page-about .abn-list-row { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 620px) {
  .page-about .abn-hero { min-height: 360px; }
  .page-about .abn-flow { grid-template-columns: 1fr; }
  .page-about .abn-certs { grid-template-columns: 1fr; }
  /*
   * ⚠ v1.11.53：手机端改纵向堆叠，编号要**清掉 padding-left**。
   * 不清的话 `padding-left` 会保留（14px），
   * 加上 `flex-basis:auto` 让编号变成内容宽度，
   * 结果文字块的左边界与编号右边界错位（实测 gapNumToBody = -66px）。
   */
  .page-about .abn-item { flex-direction: column; gap: 8px; }
  .page-about .abn-num {
    flex-basis: auto;
    width: auto;
    padding-left: 0;
    font-size: 2rem;
  }
  .page-about .abn-sec { padding-block: var(--sp-6); }
}


@media (max-width: 620px) {
  .page-about .abn-hero h1 br { display: none; }
}

/* ==========================================================================
   能力板块的小标签（v1.11.41）
   --------------------------------------------------------------------------
   学 NW Paper Box 的能力卡：卡片顶部先给一个**工序类别词**
   （"Shipping & Display" / "Corrugated"），下面才是标题与说明。
   它起的作用是把「这是哪道工序」和「这工序解决什么」分成两层，
   买家扫一眼就知道自己的产品对应哪条线。
   ========================================================================== */
.page-about .abn-split-tag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-red);
  margin-bottom: 8px;
}

/* ==========================================================================
   动效补充（v1.11.42）
   --------------------------------------------------------------------------
   ⚠ 全部复用 main.js 已有的能力，**没有引入任何新 JS 依赖**：
     · [data-reveal]        → 滚动上浮（IntersectionObserver + 安全网兜底）
     · [data-reveal-group]  → 同组按顺序 60ms 递增延迟
     · [data-word-rise]     → 标题逐词上浮
     · [data-count]         → 数字递增（本次为它加了 data-prefix/suffix 支持）
   这样 reduced-motion 与 JS 未就绪的降级逻辑全部沿用现成的那一套，
   不需要在本页重复实现一遍。
   ========================================================================== */

/* ---------- 编号条目：左侧红线随入场延展 ---------- */
.page-about .abn-item {
  position: relative;
  overflow: hidden;
}
.page-about .abn-item::before {
  /* 一条从左生长的细红线，滚动到视口时才展开 */
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--brand-red);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .55s var(--ease-out);
}
.page-about .abn-item.is-in::before { transform: scaleY(1); }
.page-about .abn-item:hover { background: var(--bg-soft); }

/* ---------- 编号数字：hover 时放大并转红 ---------- */
.page-about .abn-num {
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.page-about .abn-item:hover .abn-num {
  transform: translateX(2px);
}

/* ---------- 交错配图：图片轻微放大 + 标题位移 ---------- */
.page-about .abn-split-media {
  overflow: hidden;
}
.page-about .abn-split-media img {
  transition: transform .7s var(--ease-out);
}
.page-about .abn-split:hover .abn-split-media img { transform: scale(1.04); }
.page-about .abn-split-body h3 {
  transition: transform var(--dur) var(--ease);
}
.page-about .abn-split:hover .abn-split-body h3 { transform: translateX(4px); }

/* ---------- 时间轴：年份滑入 + 底线生长 ---------- */
.page-about .abn-tl-row {
  position: relative;
  transition: background var(--dur-fast);
}
.page-about .abn-tl-row:hover { background: rgba(255, 255, 255, .04); }
.page-about .abn-tl-year {
  display: inline-block;
  transition: transform var(--dur) var(--ease);
}
.page-about .abn-tl-row:hover .abn-tl-year { transform: translateX(4px); }

/* ---------- 行业行：左缘红条滑入 ---------- */
.page-about .abn-list-row {
  position: relative;
  transition: background var(--dur-fast), padding-left var(--dur) var(--ease);
}
.page-about .abn-list-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--brand-red);
  transform: scaleY(0);
  transition: transform var(--dur) var(--ease);
}
.page-about .abn-list-row:hover::before { transform: scaleY(1); }
.page-about .abn-list-row:hover { padding-left: 14px; }

/* ---------- 认证项：hover 上浮 ---------- */
.page-about .abn-cert {
  transition: transform var(--dur) var(--ease), border-color var(--dur);
}
.page-about .abn-cert:hover {
  transform: translateY(-3px);
  border-top-color: var(--brand-red);
}

/* ---------- hero 图片：极缓慢的Ken Burns 感（transform 驱动，不耗性能） ---------- */
@media (prefers-reduced-motion: no-preference) {
  .page-about .abn-hero-media img {
    animation: abn-hero-zoom 24s ease-in-out infinite alternate;
  }
}
@keyframes abn-hero-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

/* ---------- 流程步：顶部红线从左生长 ---------- */
.page-about .abn-step {
  overflow: hidden;
}
.page-about .abn-step::before {
  transform-origin: left;
  animation: abn-line-grow .8s var(--ease-out) both;
}
@keyframes abn-line-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ---------- reduced-motion：把上面所有动效彻底关掉 ---------- */
@media (prefers-reduced-motion: reduce) {
  .page-about .abn-hero-media img { animation: none; }
  .page-about .abn-step::before { animation: none; transform: scaleX(1); }
  .page-about .abn-item::before,
  .page-about .abn-list-row::before { transform: scaleY(1); }
  .page-about .abn-split:hover .abn-split-media img,
  .page-about .abn-item:hover .abn-num,
  .page-about .abn-split:hover .abn-split-body h3,
  .page-about .abn-tl-row:hover .abn-tl-year,
  .page-about .abn-cert:hover,
  .page-about .abn-list-row:hover { transform: none; }
  .page-about .abn-split:hover .abn-split-media img { transform: none; }
}

/* ==========================================================================
   HERO 新元素的响应式（v1.11.47）
   ========================================================================== */
@media (max-width: 1080px) {
  .page-about .abn-hero-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .page-about .abn-hero { min-height: 560px; }
  .page-about .abn-hero-lead { max-width: none; }
}
@media (max-width: 620px) {
  /* 手机上 78vh 会让首屏只剩图，文字被推到折叠线以下 —— 压回 70vh */
  .page-about .abn-hero { min-height: 520px; }
  .page-about .abn-h1-cn { font-size: clamp(2.1rem, 10vw, 3rem); }
  .page-about .abn-h1-en { font-size: clamp(.95rem, 4.4vw, 1.2rem); }
  /* 信息条改两列：四列在手机上会挤成一条缝 */
  .page-about .abn-hero-strip { grid-template-columns: repeat(2, 1fr); }
  .page-about .abn-strip-item { padding-left: var(--sp-3); }
  .page-about .abn-hero-actions { gap: var(--sp-4); }
  .page-about .abn-hero-btn { padding: 12px 20px; }
  /* 证书图圆角在手机上收一点，避免小图上圆角过大显得笨重 */
  .page-about .abn-cert-strip img { border-radius: var(--r-sm); }
}

/* reduced-motion：把 hero 新增的动效关掉 */
@media (prefers-reduced-motion: reduce) {
  .page-about .abn-hero-btn:hover,
  .page-about .abn-cert-strip:hover img { transform: none; }
}