/* pages/about.css — 关于我们页（bundle 15:1415「about」，1920×4112）
   断点：base 移动流式；≥768 加大留白；≥1280 按 1920 设计稿精确几何（frontend-execute.md §2.1/§2.3）。
   设计稿 hero 顶部为白色渐隐区（蒙版渐显）→ 导航用 page-sub 白底黑字，与首屏自然衔接。 */

/* ---------- 子页面导航（同 news.css：白底黑字、下滑吸附置顶、分隔线淡出） ---------- */
.page-sub .site-nav {
  position: sticky; /* 子页导航在文档流内，sticky 吸附不产生内容位移（fixed 会掉 96px） */
  top: 0;
  background: var(--color-bg-page);
  color: var(--color-text-1);
}

.page-sub .site-nav.is-scrolled {
  position: sticky; /* 必须 sticky：本选择器 (0,3,0) 压过 components.css 的 .site-nav.is-scrolled (0,2,0) */
  top: 0;
  height: 6rem; /* 保持 96px：子页导航在流内，缩到 88 会把下方内容顶上 8px */
}

.page-sub .site-nav__inner {
  border-color: transparent;
}

.page-sub .site-nav__menu a:hover {
  color: var(--color-primary);
}

.page-sub .site-nav__toggle span {
  background: var(--color-text-1);
}

/* ---------- 眉题（各区共用：18/24 主红） ---------- */
.pab-eyebrow {
  font-size: var(--font-size-body-md);
  line-height: 1.5rem; /* 24 */
  color: var(--color-primary);
}

/* ---------- 首屏（15:1474：hero 高 1000；图片自上而下渐显 + 底部微红晕；
   SINCE 1956 压两张错落照片上方；大标语三段横贯，中段 IN 印在照片上） ---------- */
.pab-hero {
  position: relative;
  height: auto;
  min-height: 40rem;
  padding: 4rem var(--space-6) 3rem;
  overflow: hidden;
  background: var(--color-bg-page);
}

.pab-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* 默认（移动/平板）：等比铺满并顶对齐——不裁切图片顶部 */
  background: url("../../assets/images/about-hero.webp") center top / cover no-repeat;
  filter: saturate(.85) brightness(.94) contrast(.92); /* 设计 vib −0.15 / exp −0.06 / con −0.08 */
}

/* 蒙版等效：白渐隐层（顶部不透明 → 底部透明，图自上而下渐显）+ 底部 4% 红晕（渐变层 op .2 × stop .2） */
.pab-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, var(--color-bg-page) 0%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(to bottom, rgba(195, 14, 35, 0) 70%, rgba(195, 14, 35, .04) 100%);
}

.pab-hero__since,
.pab-hero__photo,
.pab-hero__title {
  position: relative;
  z-index: 1;
}

.pab-hero__since {
  display: block;
  width: fit-content;
  margin: 2rem auto 1.5rem;
  padding-right: .3em; /* 斜体字形右倾超出盒宽——渐变背景（background-clip:text）需覆盖到 padding 区，否则「6」右缘被裁成透明 */
  font-size: clamp(1.5rem, .6rem + 2.2vw, 2.25rem); /* 36 */
  line-height: 4.375rem; /* 70 */
  font-weight: var(--font-weight-bold);
  font-style: italic;
  letter-spacing: -.0556em; /* −2px */
  text-align: center;
  background-image: linear-gradient(90deg, var(--color-primary) 0%, #5d0711 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pab-hero__photos {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.pab-hero__photo {
  display: block;
  height: auto;
}

.pab-hero__photo--1 {
  width: 15.9375rem; /* 255 */
}

.pab-hero__photo--2 {
  width: 17.9375rem; /* 287 */
  margin-left: -2.875rem; /* 与照片 1 重叠 46px */
}

.pab-hero__title {
  margin-top: 1.5rem;
  font-size: clamp(2rem, 1rem + 2.9vw, var(--font-size-display)); /* 56 */
  line-height: 1;
  font-weight: var(--font-weight-medium);
  text-align: center;
  text-wrap: balance;
}

.pab-hero__t1,
.pab-hero__t3 {
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #888888 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pab-hero__t2 {
  color: #888888; /* 文字渐变端点色（一次性装饰精确值） */
}

/* ---------- OUR CULTURE（15:1456：区块高 1200；三卡左右错落垂直叠压，两条 #999 细线横贯卡后） ---------- */
.pab-culture {
  padding-top: 6.25rem; /* 眉题 y=100 */
}

.pab-culture__title {
  margin-top: var(--space-5); /* 标题 y=144（眉题底 124 + 20） */
  padding-inline: var(--space-6);
  font-size: clamp(1.75rem, 1rem + 2.6vw, var(--font-size-h1));
  line-height: var(--line-height-title); /* 60/48 */
  font-weight: var(--font-weight-medium);
}

.pab-culture__stage {
  position: relative;
  margin-top: 2rem;
}

.pab-culture__line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-text-3); /* Line 330/331 #999 */
}

.pab-culture__line--top {
  top: 8.5rem; /* stage 顶 = 标题底；线绝对 y=1344，stage 顶约 1264（按内容流），xl 段精确 */
  display: none;
}

.pab-culture__line--bottom {
  display: none;
}

.pab-card {
  position: relative;
  box-sizing: border-box;
  margin-top: 2rem;
  padding: 2rem;
  color: #fff;
}

.pab-card--vision {
  background:
    linear-gradient(rgba(195, 14, 35, .75), rgba(195, 14, 35, .75)),
    url("../../assets/images/about-vision.webp") center / cover no-repeat;
}

/* Mission 卡：设计稿为红底 + 图片 20% 透明度叠加 → 等效 80% 红罩（此前漏写背景规则，白字落透明底不可见） */
.pab-card--mission {
  background:
    linear-gradient(rgba(195, 14, 35, .8), rgba(195, 14, 35, .8)),
    url("../../assets/images/about-mission.webp") center / cover no-repeat;
}

.pab-card--value {
  border: 1px solid var(--color-text-3); /* #999999 */
  background: var(--color-gray-100); /* 设计 #f8f8f7，归并 gray-100 */
  color: var(--color-text-2);
}

.pab-card__deco {
  position: absolute;
  top: -1rem;
  left: -1rem;
  width: 10rem;
  height: 10rem;
  color: #eeeeee; /* 设计 #eeeeee @0.75 */
  opacity: .75;
}

.pab-card--value h3 {
  color: var(--color-primary);
}

.pab-card h3 {
  font-size: clamp(2.25rem, 1.4rem + 2.6vw, var(--font-size-display)); /* 56 */
  line-height: 3.75rem; /* 60 */
  font-weight: var(--font-weight-extrabold);
}

.pab-card p {
  margin-top: 1rem;
  max-width: 37.5rem; /* 600 */
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, var(--font-size-h2)); /* 36 */
  line-height: 3.125rem; /* 50 */
}

/* Value 卡双列竖排（XITEC 字母 / 价值观单词，行高 50） */
.pab-card__letters,
.pab-card__words {
  display: flex;
  flex-direction: column;
  list-style: none;
  font-size: var(--font-size-h2); /* 36 */
  line-height: 3.125rem; /* 50 */
}

.pab-card__letters {
  color: var(--color-text-2);
}

/* ---------- R&D INNOVATION（15:1439：区块高 900；左文右图拼贴 + 三组红色数据） ---------- */
.pab-rd {
  padding: 7.0625rem var(--space-6) 4rem; /* 眉题 y=113 */
}

.pab-rd__title {
  margin-top: var(--space-5); /* 标题 y=157 */
  font-size: clamp(1.75rem, 1rem + 2.6vw, var(--font-size-h1));
  line-height: var(--line-height-title);
  font-weight: var(--font-weight-medium);
}

.pab-rd__desc {
  margin-top: 1.25rem; /* 导语 y=237（标题底 217 + 20） */
  max-width: 50.625rem; /* 810 */
  font-size: var(--font-size-h3);
  line-height: 2rem; /* 32 */
  color: var(--color-text-2);
}

/* R&D 三图：设计稿对 560×315 原片使用裁切窗（fill transform 解码）→
   图 1 = 原片中央竖条放大为 278×536；图 2 = cover 519×366；图 3 = 横向拉伸为 278×278。
   容器锁设计比例 + overflow hidden，图片按窗参数放大定位（height 100% + width/left 百分比） */
.pab-rd__media {
  position: relative;
  overflow: hidden;
  margin-top: 2rem;
}

.pab-rd__media img {
  position: absolute;
  top: 0;
  height: 100%;
  width: auto;
  max-width: none;
}

.pab-rd__media--1 {
  aspect-ratio: 278 / 536;
}

.pab-rd__media--1 img {
  width: 342.9%;  /* 1 / 0.2917 窗宽 */
  left: -163.2%;  /* −0.476 / 0.2917 窗左 */
  filter: brightness(1.13) contrast(1.09); /* 设计 exp +0.13 / con +0.09 */
}

.pab-rd__media--2 {
  aspect-ratio: 519 / 366;
}

.pab-rd__media--2 img {
  width: 125.4%; /* cover 中心裁：560/315 缩至高 366 → 宽 650.7 / 519 */
  left: -12.7%;
  filter: brightness(1.12); /* exp +0.12 */
}

.pab-rd__media--3 {
  aspect-ratio: 278 / 278;
}

.pab-rd__media--3 img {
  width: 177.8%; /* 1 / 0.5625 窗宽 */
  left: -15.1%;  /* −0.085 / 0.5625 窗左 */
  filter: saturate(1.17) brightness(1.15); /* vib +0.17 / exp +0.15 */
}

/* R&D 三图 hover 放大（2026-09-18）：scale 1 → 1.05，.6s（与首页新闻卡/产品卡同量级同缓动）。
   ⚠ 坑 1：transform-origin 必须逐图给值，不能用默认 50%。
     三张图是「裁剪窗」结构（容器 overflow:hidden，img 比容器宽得多、靠负 left 定位），
     默认的 50% 是「img 自身中心」，不等于「容器中心」→ 放大时绕错点，窗内画面横向漂移
     （img1 在 1920 实测漂 5.8px / 278px 窗宽 = 2.1%，看着像「边放大边平移」）。
     公式：originX = (50 − imgLeft%) ÷ imgWidth%      ← imgLeft 是负值，等价于 (50 + |imgLeft%|) ÷ imgWidth%
     实测值（6 个宽度 768/1024/1280/1440/1920/2560 完全一致）：
       --1 (width 342.9%, left −163.2%) → 62.176%
       --2 (width 125.4%, left  −12.7%) → 50%      ← 本来就居中，写出来是为三图对齐、便于日后核对
       --3 (width 177.8%, left  −15.1%) → 36.614%
     ⚠ 上面三个数字与各图的 width/left 强耦合：**改 width/left 必须按公式重算**。
   ⚠ 坑 2：必须门控 ≥768。
     <768 档（下面的 @media (max-width:767px)）里 img1/img3 用 `transform: translateX(-50%)` 做居中，
     实测 computed = matrix(1,0,0,1,-204.969,0)。而 transform 是**单值属性** ——
     hover 的 scale() 会把整条 transform 顶掉，图直接偏出裁剪窗。
     ≥768 时三张图 transform 均为 none，无冲突；min-width:768px 正好是那段移动规则的精确补集。
   ⚠ 不写 will-change：hover-only 的元素常驻提升合成层属反模式，且 transform 过渡本身已走合成器。 */
@media (min-width: 768px) {
  .pab-rd__media--1 img { transform-origin: 62.176% 50%; }

  .pab-rd__media--2 img { transform-origin: 50% 50%; }

  .pab-rd__media--3 img { transform-origin: 36.614% 50%; }

  .pab-rd__media img {
    transform: scale(1);
    transition: transform .6s var(--m-ease, cubic-bezier(0.075, 0.82, 0.165, 1));
  }

  .pab-rd__media:hover img {
    transform: scale(1.05);
  }
}

/* 数据条（150/37/2，数字 80/110 Bold 主红，标签 20px） */
.pab-stats {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 3rem;
  list-style: none;
}

.pab-stats__num {
  font-size: var(--font-size-stat); /* 80 */
  line-height: 6.875rem; /* 110 */
  font-weight: var(--font-weight-bold);
  letter-spacing: -.0375em; /* −3px */
  color: var(--color-primary);
}

.pab-stats__label {
  font-size: var(--font-size-body-lg); /* 20 */
  line-height: 1;
  color: var(--color-text-1);
}

/* ---------- OUR CLIENTS（15:1417：与首页 clients 同构同图源；区块高 600 灰底） ---------- */
.pab-clients {
  margin-top: 4rem;
  padding: 5rem var(--space-6) 6rem;
  background: var(--color-gray-100);
}

.pab-clients__title {
  margin-top: var(--space-5); /* 标题 y=185（眉题底 165 + 20） */
  font-size: clamp(1.75rem, 1rem + 2.6vw, var(--font-size-h1));
  line-height: var(--line-height-title);
  font-weight: var(--font-weight-medium);
}

.pab-clients__desc {
  margin-top: 1.25rem; /* 导语 y=325（标题底 305 + 20） */
  max-width: 50.625rem; /* 810 */
  font-size: var(--font-size-body-md);
  line-height: 1.625rem; /* 26 */
  color: var(--color-text-2);
}

.pab-clients__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 3rem;
  list-style: none;
}

/* 客户 logo 卡与图片占比：与首页 home.css 的 .client-logo--N 完全同构（同图源同网格） */
.pab-clients__grid .client-logo {
  aspect-ratio: 170 / 80;
  display: grid;
  place-items: center;
  background: var(--color-bg-card);
}

.pab-clients__grid .client-logo img {
  height: auto;
}

.pab-clients__grid .client-logo--1 img { width: 37.059%; }
.pab-clients__grid .client-logo--2 img { width: 77.059%; }
.pab-clients__grid .client-logo--3 img { width: 88.235%; }
/* BAHTI：设计稿拆层（图 40×42 + 9px 文字）已合成单图 143×63，与其它卡同构 */
.pab-clients__grid .client-logo--4 img { width: 84.118%; height: 78.75%; }
.pab-clients__grid .client-logo--5 img { width: 88.235%; }
.pab-clients__grid .client-logo--6 img { width: 88.235%; }
.pab-clients__grid .client-logo--7 img { width: 88.235%; }
.pab-clients__grid .client-logo--8 img { width: 88.235%; }

/* ---------- 平板档（768–1279：加大留白） ---------- */
@media (min-width: 768px) {
  .pab-hero {
    padding: 5rem var(--space-10) 4rem;
  }

  .pab-culture__title {
    padding-inline: var(--space-10);
  }

  .pab-card {
    padding: 2.5rem;
  }

  .pab-card__deco {
    width: 14rem;
    height: 14rem;
  }

  .pab-rd {
    padding-inline: var(--space-10);
  }

  .pab-rd__media-grid,
  .pab-stats {
    flex-direction: row;
  }

  .pab-clients {
    padding-inline: var(--space-10);
  }

  .pab-clients__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

/* ---------- 桌面档（≥1280：1920 设计值精确命中） ---------- */
@media (min-width: 1280px) {
  .pab-hero {
    height: 56.75rem; /* 设计 1000 含叠顶导航，流内减 96 → 904（页面总高闭环 4112） */
    min-height: 0;
    padding: 0;
  }

  .pab-hero__since {
    position: absolute;
    left: 38.385%; /* x=737 */
    top: 11rem;    /* 设计 y=272 − 导航 96 */
    margin: 0;
  }

  .pab-hero__photo {
    position: absolute;
    top: 15.375rem; /* 设计 y=342 − 96 */
  }

  .pab-hero__photo--1 {
    left: 36.927%;      /* x=709 */
    width: 15.9375rem;  /* 255 */
  }

  .pab-hero__photo--2 {
    left: 49.2708%;     /* x=946（照片 1 右缘 964 再靠近 18px）——两图贴近相邻 */
    margin-left: 0;     /* 清除 base 的重叠负边距（-46px），否则被拉回重叠位置 */
    width: 17.9375rem;  /* 287 */
  }

  /* 大标语渐变（外侧深、中间浅）：DRIVING INNOVATION 左深右浅；SMART EQUIPMENT 左浅右深 */
  .pab-hero__t1 {
    background-image: linear-gradient(90deg, #888888 0%, rgba(0, 0, 0, 0) 100%);
  }

  .pab-hero__t3 {
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #888888 100%);
  }

  /* IN 对齐 0 图形中心见下方 span 定位组（随 0 位置同步） */

  .pab-hero__title {
    position: relative; /* 保持 z 1 于渐隐层上；同时作为三段 span 的包含块 */
    font-size: var(--font-size-display); /* 56 */
  }

  /* KV 背景图：精确复刻设计稿显示窗（fill transform 解码：裁右侧 8.1%、底部 22.3%、顶对齐后拉伸铺满） */
  .pab-hero::before {
    background-size: 119.32% 128.78%;
    background-position: 49.78% 0%;
  }

  .pab-hero__title span {
    position: absolute;
    top: 23.3125rem; /* 设计 y=469 − 96 */
    line-height: 3.5rem; /* 56 */
  }

  .pab-hero__t1 { left: 8.802%; }  /* x=169 */
  .pab-hero__t2 { left: 56.7448%; transform: translateX(-50%); } /* 对齐 0 图形中心（946+287/2=1089.5） */
  .pab-hero__t3 { left: 64.323%; } /* x=1235 */

  /* ---------- culture：区块高 1200，卡绝对错落 ---------- */
  .pab-culture {
    height: 75rem; /* 1200 */
    padding: 0;
  }

  .pab-culture > .pab-eyebrow,
  .pab-culture__title {
    position: absolute;
    left: 4.2708%; /* x=82 */
  }

  .pab-culture > .pab-eyebrow {
    top: 6.25rem; /* y=100 */
  }

  .pab-culture__title {
    top: 9rem; /* y=144 */
    margin: 0;
    padding: 0;
  }

  .pab-culture__stage {
    position: static;
    margin: 0;
  }

  .pab-culture__line {
    display: block;
    z-index: 0;
  }

  .pab-culture__line--top {
    top: 21.5rem;    /* Line 330 y=1344（区块内 344） */
    left: 1px;
  }

  .pab-culture__line--bottom {
    top: 64rem;      /* Line 331 y=2023（区块内 1023） */
    left: 0;
  }

  .pab-card {
    position: absolute;
    z-index: 1; /* 压在装饰线与兄弟之上 */
    width: 52.708%; /* 1012 */
    height: 20rem;  /* 320 */
    margin: 0;
    padding: 0;
  }

  /* Vision/Mission：卡内文字按设计值绝对对位（标题 y=116、描述 y=88） */
  .pab-card--vision {
    left: 41.667%; /* x=800 */
    top: 18.75rem; /* y=300 */
  }

  .pab-card--vision h3 {
    position: absolute;
    left: calc(10.08% - 25px); /* x=77 (102 - 25) */
    top: 36.25%;  /* y=116 */
  }

  .pab-card--vision p {
    position: absolute;
    left: 34.58%; /* x=350 */
    top: 50%;
    transform: translateY(-50%);
    width: 59.29%; /* 600 */
    margin: 0;
    font-size: 2rem;      /* 32 */
    line-height: 2.75rem; /* 44 */
  }

  .pab-card--mission {
    left: 41.667%;
    top: 47.3125rem; /* y=757 */
  }

  .pab-card--mission h3 {
    position: absolute;
    left: 7.71%; /* x=78 */
    top: 36.25%;
  }

  .pab-card--mission p {
    position: absolute;
    left: 35.67%; /* x=361 */
    top: 50%;
    transform: translateY(-50%);
    width: 59.29%;
    margin: 0;
    font-size: 2rem;      /* 32 */
    line-height: 2.75rem; /* 44 */
  }

  .pab-card--value {
    left: 3.021%;  /* x=58 */
    top: 33.625rem; /* y=538 */
    overflow: hidden; /* 水印装饰裁进卡框（设计稿卡内可见部分止于框缘） */
  }

  .pab-card__deco {
    top: -6.56%;   /* y=−21 */
    left: -8.5%;   /* x=−86 */
    width: 33.7%;  /* 341 */
    height: auto;
    aspect-ratio: 1;
  }

  .pab-card--value h3 {
    position: absolute;
    left: 10.375%; /* x=105 */
    top: 42.19%;   /* y=135 */
  }

  p.pab-card__letters {
    position: absolute;
    left: calc(37.75% + 70px); /* x=452 (382 + 70) */
    top: 50%;
    transform: translateY(-50%);
    width: 1.6875rem; /* 27 */
    align-items: center;
    margin-top: 0;
    font-size: 2rem;      /* 32 */
    line-height: 2.75rem; /* 44 */
  }

  .pab-card__words {
    position: absolute;
    left: calc(44.66% + 70px); /* x=522 (452 + 70) */
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;      /* 32 */
    line-height: 2.75rem; /* 44 */
  }

  /* ---------- R&D：区块高 900，图组绝对拼贴 ---------- */
  .pab-rd {
    position: relative;
    height: 56.25rem; /* 900 */
    padding: 0 var(--space-6);
  }

  .pab-rd > .pab-eyebrow,
  .pab-rd__title,
  .pab-rd__desc,
  .pab-stats {
    position: absolute;
    left: 6.4063%; /* x=123 */
  }

  .pab-rd > .pab-eyebrow {
    top: 7.0625rem; /* y=113 */
  }

  .pab-rd__title {
    top: 9.8125rem; /* y=157 */
    margin: 0;
  }

  .pab-rd__desc {
    top: 14.8125rem; /* y=237 */
    margin: 0;
    width: 42.1875%; /* 810 */
  }

  .pab-rd__media {
    position: absolute;
    margin: 0;
  }

  .pab-rd__media--1 {
    left: 56.927%;   /* x=1093 */
    top: 15.6875rem; /* y=251 */
    width: 14.479%;  /* 278/1920，随宽流式保比例 */
  }

  .pab-rd__media--2 {
    right: 0;        /* 右缘贴 1920 出血 */
    top: 26.3125rem; /* y=421 */
    width: 27.031%;  /* 519/1920 */
  }

  .pab-rd__media--3 {
    left: 72.969%;   /* x=1401（与 rd-2 左对齐） */
    top: 7.0625rem;  /* y=113 */
    width: 14.479%;  /* 278/1920 */
  }

  .pab-stats {
    top: 40.25rem;   /* y=644 */
    flex-direction: row;
    gap: 3.75rem;    /* 60 */
    margin: 0;
  }

  .pab-stats__item {
    display: flex;
    flex-direction: column; /* 数字在上、标签在下 */
    width: 16.5625rem; /* 265 */
    gap: .4375rem;
  }

  .pab-stats__num {
    margin: 0;
  }

  .pab-stats__label {
    line-height: 1.8125rem; /* 29 */
  }

  /* ---------- clients：区块高 600，logo 墙右侧 4×2 ---------- */
  .pab-clients {
    position: relative;
    height: 37.5rem; /* 600 */
    margin-top: 0;
    padding: 0 var(--space-6);
  }

  .pab-clients > .pab-eyebrow,
  .pab-clients__title,
  .pab-clients__desc {
    position: absolute;
    left: 2.9167%; /* x=56 */
  }

  .pab-clients > .pab-eyebrow {
    top: 8.8125rem; /* y=141 */
  }

  .pab-clients__title {
    top: 11.5625rem; /* y=185 */
    margin: 0;
  }

  .pab-clients__desc {
    top: 20.3125rem; /* y=325 */
    margin: 0;
    width: 42.1875%; /* 810 */
  }

  .pab-clients__grid {
    position: absolute;
    left: 54.84375%; /* x=1053 */
    right: 3.4896%;  /* 右缘 1853 */
    top: 14.0625rem; /* y=225 */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2.5rem; /* 40 */
    margin: 0;
  }
}

/* ---------- 移动端专属（<768 手机档；PC / 平板档严格不动） ---------- */
@media (max-width: 767px) {
  /* KV 照片组（7 + 0 拼合）：原固定 255/287px 在窄屏溢出被裁 → 按容器占比缩放至 ~88% 宽 */
  .pab-hero__photo--1 {
    width: 45.3%;
  }

  .pab-hero__photo--2 {
    width: 50.9%;
    margin-left: -8.2%; /* 重叠约 26px，同比缩放 */
  }

  /* 大标语：灰色渐变改纯白，并略缩小 */
  .pab-hero__t1,
  .pab-hero__t3 {
    background-image: none;
    color: #fff;
  }

  .pab-hero__t2 {
    color: #fff;
  }

  .pab-hero__title {
    font-size: 1.75rem; /* 32 → 28 */
  }

  /* 首屏入场（需求 S）：四个元素**依次自下方滑入**，顺序 = 视觉自上而下
     （SINCE 1956 → 7 → 0 → 大标语）。
     沿用文末「KV 入场动效」段的既有约定：关键帧只给**起始态**、元素自身 CSS 即终态、
     `both` 让延迟期间停在起始态（首帧即隐藏、零闪烁）；prefers-reduced-motion 下
     base.css 的 `animation: none !important` 会让它直接落到终态 —— 全程无需 JS。
     ⚠ 只作用于 <768；≥768 的三套动画（L929 起）完全不受影响。
     ⚠ 4 个元素的 stagger = 0.3s，最后一个 0.95s 起、约 1.95s 落定。 */
  .pab-hero__since {
    animation: pab-kv-m-rise 1s cubic-bezier(.22, 1, .36, 1) .05s both;
  }

  .pab-hero__photo--1 { /* 7 */
    animation: pab-kv-m-rise 1s cubic-bezier(.22, 1, .36, 1) .35s both;
  }

  .pab-hero__photo--2 { /* 0 */
    animation: pab-kv-m-rise 1s cubic-bezier(.22, 1, .36, 1) .65s both;
  }

  .pab-hero__title {
    animation: pab-kv-m-rise 1s cubic-bezier(.22, 1, .36, 1) .95s both;
  }

  /* Value 卡：字母列（XITEC）与价值观列（WUXI…）移动端并排两列
     （原流式堆叠成上下两条长列 = 错位），标题跨两列 */
  .pab-card--value {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1.25rem;
    align-items: start;
  }

  .pab-card--value h3 {
    grid-column: 1 / -1;
  }

  .pab-card__letters {
    grid-column: 1;
    align-items: center;
  }

  .pab-card__words {
    grid-column: 2;
  }

  /* 装饰水印：移动端贴卡内左上角、不溢出边框（层级见下方文字元素 position:relative） */
  .pab-card__deco {
    top: 0;
    left: 0;
  }

  /* 水印退到文字之下：文字元素进入定位层（DOM 靠后 → 绘制在水印之上）；
     不用负 z-index——它会沉到卡片背景（非定位块背景）之下而不可见 */
  .pab-card--value h3,
  .pab-card__letters,
  .pab-card__words {
    position: relative;
  }

  /* 字母列与价值观列严格逐行上下居中对齐：
     去掉 <p> 继承的上边距（原多 16px 导致整列错位）、两列统一字号。
     注意 <p> 元素需 p.pab-card__letters 提升优先级覆盖 .pab-card p 的 margin */
  p.pab-card__letters {
    margin-top: 0;
    font-size: 1.5rem;
  }

  .pab-card__words,
  .pab-card__words li {
    font-size: 1.5rem;
  }

  /* 三张文化卡在移动端紧贴排列（原相邻卡间距 32px） */
  .pab-card + .pab-card {
    margin-top: 0;
  }

  /* OUR CULTURE 眉题与下方 R&D INNOVATION 眉题左对齐（补上左右内边距） */
  .pab-culture > .pab-eyebrow {
    padding-inline: var(--space-6);
  }

  /* 区块导语字号全站统一 18/26（与 OUR CLIENTS 导语一致；原 24/32 偏大） */
  .pab-rd__desc {
    font-size: var(--font-size-body-md); /* 18 */
    line-height: 1.625rem; /* 26 */
  }

  /* R&D 数据条：移动端单行横排、可左右滑动、字号缩小（数字 80→48、标签 20→14），
     JS（js/stats-marquee.js，非 js/about.js）克隆一份内容实现自动无限循环 */
  .pab-stats {
    flex-direction: row;
    gap: 3rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* 右侧渐隐提示可滑动 —— 可选，保持简洁不加遮罩 */
  }

  .pab-stats::-webkit-scrollbar {
    display: none;
  }

  .pab-stats__item {
    flex: none;
    width: auto;
  }

  .pab-stats__num {
    font-size: 3rem;      /* 80 → 48 */
    line-height: 4rem;    /* 64 */
  }

  .pab-stats__label {
    font-size: .875rem;   /* 20 → 14 */
    line-height: 1.25rem; /* 20 */
  }

  /* R&D 三图：移动端统一与第二张等高（519/366）；
     图 1/3 原为竖长/方形窗，改用等比居中裁切（cover 等效，避免拉伸变形） */
  .pab-rd__media--1,
  .pab-rd__media--3 {
    aspect-ratio: 519 / 366;
  }

  .pab-rd__media--1 img,
  .pab-rd__media--3 img {
    width: auto;                /* 等比：高度撑满、水平居中裁切 */
    height: 100%;
    aspect-ratio: 560 / 315;    /* 原图比例——否则 width:auto 会采用 HTML width/height 属性推导的比例 */
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}

/* ---------- KV 入场动效（≥768：PC + 平板；<768 手机档保持静态） ----------
   用户规格（2026-09-17 商定）：① 载入时背景图缓缓放大（幅度大、温柔）② 7 / 0 分别自下方上滑并淡入
   ③ SINCE 1956 自上方下滑 ④ 三段标语依次淡入。要求错落、有视差、温柔但幅度大。

   时间轴（重叠推进，不是逐段串行 —— 重叠才是「错落 / 视差」的来源）：
     0.00s  背景 scale 1 → 1.13（2.8s，最慢最远）＋ 揭幕层白 → 透明（1.6s）
     0.48s  7   上移 130px + 淡入（1.5s）
     0.66s  0   上移 104px + 淡入（1.5s）  ← 比 7 晚 0.18s、少走 26px = 前后景深
     1.05s  SINCE 1956  下移 70px + 淡入（1.25s）  ← 时间上晚于 7/0，像盖章
     1.50s  DRIVING INNOVATION 淡入（1.2s）＋ 整行微上浮 18px（1.6s）
     1.70s  IN 淡入（1.1s）
     1.90s  SMART EQUIPMENT 淡入（1.2s）      ← 左→右依次，视线像把句子读过去
     ≈3.1s  全部落定（背景 2.8s 先停、文字最后落定，眼睛最后停在标语上）

   视差来源 = 速度差：背景 2.8s 只走 13%（慢、远），前景 1.5s 走 130 / 104px（快、近），
   前景比背景快 3 倍多。缓动统一走 easeOut 家族（起步快、尾巴极长）= 「温柔但幅度大」的技术来源。

   ⚠ 改动前必读的三条硬约束
   1) 只动 transform / opacity（合成层，不触发重排），终态几何与静止稿逐像素相同。
   2) **所有关键帧只提供「起始态」，元素自身的 CSS 是终态**（opacity 1 / 无 transform）。
      `animation-fill-mode: both` 让延迟期间落在起始态 → 首帧即隐藏，**零闪烁**；
      而 `prefers-reduced-motion` 下 base.css 的 `animation: none !important` 会让动画整体失效、
      元素直接停在终态 —— **无需任何 JS**。本动效是全站唯一不依赖 JS 的动效，无 JS / 老浏览器也安全。
      （反例：若把「隐藏」写在普通规则里、靠 JS 加类释放，首帧就会「先可见→突然消失→再演」闪一下。）
   3) **背景 scale 只能 ≥ 1**：`.pab-hero::before` 是 `inset: 0`，scale < 1 会把盒子缩到 hero 之内、
      四周露出白底。代价是动画结束后背景停在 +13% 放大态（用户已确认接受：背景是抽象波纹，
      无实体位移，放大只是波纹变大）。若要落点精确等于设计稿，只能反向（1.13 → 1，观感变成「缓缓拉远」）。
   4) 「整行微上浮」作用在 `.pab-hero__title`（块）而不是三个 span：768–1279 的 span 是 `display:inline`，
      transform 对 inline 无效；若给它们加 `inline-block` 会改变 `text-wrap: balance` 的断行、动到静止排版。
      作用在 h1 上则两档共用同一套 transform。附带好处：**完全绕开** t2 的 `transform: translateX(-50%)`
      冲突 —— 三个 span 只做 opacity，不碰 transform。 */

.pab-hero__veil {
  display: none; /* 仅 ≥768 渲染；<768 连盒子都不产生 */
}

@media (min-width: 768px) {
  /* 揭幕层：白幕盖住整个 hero（内容 z-index 1 → 它取 2），开场第一帧全白，KV 从白里浮现。
     自身 opacity 终态为 0（不可见），起始态由关键帧给 —— 这样 reduced-motion / 动画失效时
     它天然不可见，不会把整个 KV 挡死。 */
  .pab-hero__veil {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--color-bg-page);
    pointer-events: none;
    opacity: 0;
    animation: pab-kv-veil 1.6s cubic-bezier(.22, 1, .36, 1) both;
  }

  /* 背景：2.8s 慢速推近。easeOutExpo（起步快、尾巴极长）是「温柔」的关键。 */
  .pab-hero::before {
    will-change: transform; /* ::before 带 filter + 大图，显式提升合成层避免逐帧重栅格化 */
    animation: pab-kv-zoom 2.8s cubic-bezier(.16, 1, .3, 1) both;
  }

  /* 7 与 0：分别自下方上滑 + 淡入；0 更晚、更近（视差） */
  .pab-hero__photo--1 {
    animation: pab-kv-rise-7 1.5s cubic-bezier(.22, 1, .36, 1) .48s both;
  }

  .pab-hero__photo--2 {
    animation: pab-kv-rise-0 1.5s cubic-bezier(.22, 1, .36, 1) .66s both;
  }

  /* SINCE 1956：自上方下滑（-70px），压在 7 之上 */
  .pab-hero__since {
    animation: pab-kv-drop 1.25s cubic-bezier(.22, 1, .36, 1) 1.05s both;
  }

  /* 整行微上浮 18px：与 t1 同时起，尾巴拖到最后 → 三段淡入期间整行一直在极缓地「沉下来」 */
  .pab-hero__title {
    animation: pab-kv-lift 1.6s cubic-bezier(.33, 1, .68, 1) 1.5s both;
  }

  /* 三段标语：只做 opacity（不碰 transform，故 t2 的 translateX(-50%) 居中不受影响） */
  .pab-hero__t1 {
    animation: pab-kv-fade 1.2s cubic-bezier(.33, 1, .68, 1) 1.5s both;
  }

  .pab-hero__t2 {
    animation: pab-kv-fade 1.1s cubic-bezier(.33, 1, .68, 1) 1.7s both;
  }

  .pab-hero__t3 {
    animation: pab-kv-fade 1.2s cubic-bezier(.33, 1, .68, 1) 1.9s both;
  }
}

@keyframes pab-kv-zoom { /* 背景缓缓放大（唯一可行方向：scale ≥ 1） */
  from { transform: scale(1); }
  to   { transform: scale(1.13); }
}

@keyframes pab-kv-veil { /* 揭幕：白 → 透明 */
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes pab-kv-rise-7 { /* 7：自下方上滑 130px */
  from { opacity: 0; transform: translateY(8.125rem); }
  to   { opacity: 1; transform: none; }
}

@keyframes pab-kv-rise-0 { /* 0：自下方上滑 104px（比 7 少 26 → 前后景深） */
  from { opacity: 0; transform: translateY(6.5rem); }
  to   { opacity: 1; transform: none; }
}

@keyframes pab-kv-drop { /* SINCE 1956：自上方下滑 70px */
  from { opacity: 0; transform: translateY(-4.375rem); }
  to   { opacity: 1; transform: none; }
}

@keyframes pab-kv-lift { /* 整行标语微上浮 18px */
  from { transform: translateY(1.125rem); }
  to   { transform: none; }
}

@keyframes pab-kv-fade { /* 单段标语淡入 */
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pab-kv-m-rise { /* 移动端首屏：自下方滑入 40px + 淡入（四元素共用） */
  from { opacity: 0; transform: translateY(2.5rem); }
  to   { opacity: 1; transform: none; }
}