/* About Us 页共享样式 —— 6 个 About Us 区块 widget（about-banner / about-intro /
   about-certifications / about-cta-banner / about-timeline，另 Recent News
   区块复用首页的 jiesheng-pages-home-news widget，走 home-shared.css）共用，
   靠各 widget 的 get_style_depends() 覆写指向这份文件。
   类名体系跟随 jcrapid.com /about-us/ 真实 Elementor 类名
   （elementor-element / e-con / e-con-full 等），补充的 jiesheng-about-* 类是
   我们自己加的结构/外层类，不是 jcrapid 原有的。

   2026-09-04 返工记录：这份文件原来 6 个区块的划分跟 jcrapid.com /about-us/
   真实结构对不上——之前只做了 Banner/Intro+Stats 两块，把参考站真实存在的
   "客户logo墙"/"CTA声明条"/"公司历程时间轴"三个区块漏掉了，还多加了参考站
   根本没有的"Why Choose Us清单"/"Manufacturing Capabilities网格"两块（后者数据
   其实是 capabilities.json 的内容，跟 /capabilities/ 归档页重复，已删除这个区块，
   不是"找不到地方放"，是"本来就已经在归档页正确的位置显示了"）。这次核实
   ref/raw/jcrapid.com/about-us/index.html 后按真实 6 个区块重做，详见
   AGENTS.md「About Us 返工」记录。

   CSS 属性值来源：
   - 字色 / 品牌色：复用 global/header.css 里已有的 CSS 变量
     （--brand: #e7823a / --text: #333 / --text-light: #808285 / --bg-light: #f8f8f8）
   - 字体：Manrope（jcrapid.com 真实字体，已在全站 head 里注册）
   - 间距：从 home-shared.css 提取的 Elementor 标准 padding 值
   - ⚠️ About Us 这一页真正的页面级样式表 wp-content/uploads/elementor/css/
     post-594.css 在归档阶段没有被抓下来（ref/raw/jcrapid.com 下只有全局
     post-4.css，没有 post-594.css），意味着这页真实的精确间距/网格列数/断点
     值本来就没有素材可抠，属性值只能靠 tools/extract-matching-css.py 从
     全局共享样式（frontend.min.css / astra main.min.css / post-4.css 这些
     通用 Elementor 组件规则）里抽，加上人工按视觉合理估算——跟首页
     home-shared.css 那种"逐条从页面专属样式表精确抠出"不是同一个精确度，
     这是归档缺失导致的已知上限，不是这次图省事

   🚩 Elementor 容器 --display 坑（同 home-shared.css 顶部说明）：
   凡是作用在带 e-con class 的元素上的 display 声明，都同步写 --display，
   否则 .e-con{display:var(--display)} 这条 Elementor 核心 CSS 会盖掉手写的值。

   ⚠️ 2026-09-05 第三轮返工：用户指出"每个区块都有各种各样的问题"，逼着重新
   打开归档页（起本地 http.server 跑 http://127.0.0.1:8899/about-us/index.html，
   不能用 file://，理由见 tools/probe/README.md）用 getComputedStyle 逐个元素
   量了一遍真实字号/字重/颜色/行高，跟我们站对比，发现第一/二轮全部没有真的
   验证过字体排版，值基本是"看着差不多"手写的，不是抠出来的。系统性问题：
   ① H2 大标题字号统一应该是 44px，之前 clamp 上限各区块写得都不一样
      （40/28/36px），全部改成 2.75rem
   ② 正文段落颜色应该是 var(--text)（#333，较深），之前全部误用成了
      var(--text-light)（#808285，偏浅灰）——intro/certs/cta 三处正文、
      counter 数字标签全部改
   ③ eyebrow（h6 小标题）颜色应该是黑色，不是品牌橙色；字重 700 不是 600；
      行高要留出额外 leading（约 1.4 倍字号），不是紧贴 1 倍
   ④ 统计计数器数字字号应该是 69px（接近大标题的量级），之前只写了 32px；
      颜色是深色不是橙色；字重 600 不是 700
   ⑤ 统计计数器标签字号应该是 19px，之前只写了 14px
   ⑥ CTA 声明条参考站真实是白字（rgb(255,255,255)），说明真实背景是深色/
      有底色，但这页的页面专属样式表 post-594.css 没抓到（见上面已经写的
      归档缺失说明），真实背景色数值不可考——改成复用页头工具条已有的深色
      #1d2939（header.css 里的真实值），不是瞎编一个新颜色
   这些不是"新引入的坑"，是第一版从来没有真的用 getComputedStyle 核对过，
   下面各区块的属性值已经按量出来的真实数字改。

   🚩 2026-09-05 第四轮（按新加的 probe-compare SKILL 重跑，用户追问"map 模式
   不是按区块跑的吗"）：用 --map 对当前线上代码重新测才发现第三轮的字号/颜色
   fix 本身没错，但 intro 区块的**结构判断从第一版起就是错的**——之前一直当
   "配图列/文字列/统计网格"是三个平级栏，用 Playwright 挂真实归档页
   （http://localhost:8899/about-us/index.html）逐元素查 parentElement 才发现
   真实 DOM 是：配图列（03c7ec2，flex-direction:row，宽度 42%≈588px）内部有两个
   子项——图片（23bc2e1，42%）和文字列（aa14236，flex-direction:column，
   宽度 58%≈812px，58%是"剩余空间"不是独立设置值）；统计网格（e181ac6）又嵌在
   文字列内部（eyebrow+H2+正文之后），不是跟配图列/文字列平级的第三栏。
   probe --map 量出来"intro配图列 width 1400 vs 我们 700"「宽度对不上」，
   根因就是参考站这个 ident 实际是"图文两栏行容器"整体（因为它包含了两个子项），
   不是单纯的配图列——三个平级栏的结构假设从根上就错了，不是字号颜色能补救的。
   这版改成真实的两栏嵌套：`.jiesheng-about-intro__row`（新增，对应真实的
   03c7ec2，行flex，两个子项）→ `.jiesheng-about-intro__visual`（图片，现在是
   普通 widget 不再是 e-con，不用再打 3-class specificity 补丁）+
   `.jiesheng-about-intro__text`（文字列，仍是 e-con-full/e-flex/e-child，
   3-class 补丁保留，内部纵向堆叠 eyebrow/H2/正文/统计网格）。统计网格现在是
   `.jiesheng-about-intro__text` 的纵向 flex 子项，不再需要跟另外两栏抢一整行
   （之前的 `flex:1 0 100%` 3-class 补丁已删除，纵向 flex 默认 stretch 到父容器
   宽度即可）。 */

/* ── CSS 变量继承（复用全站已有的，不重复声明） ──────────────── */
/* --brand: #e7823a  --text: #333  --text-light: #808285
   --text-strong: #000  --bg-light: #f8f8f8  均来自 global/header.css */

/* ── Elementor 容器原语 ─────────────────────────────────────── */
.jiesheng-about-banner,
.jiesheng-about-intro,
.jiesheng-about-certs,
.jiesheng-about-cta,
.jiesheng-about-timeline {
    box-sizing: border-box;
}

/* ── 1. Banner 区块（真实结构：image-box，无 eyebrow/CTA） ──────── */
.jiesheng-about-banner {
    position: relative;
    background-size: cover;
    background-position: center;
    background-color: var(--text-strong, #000);
    min-height: 444px;
    --display: flex;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* 🚩 Elementor 用 min-height:var(--min-height) 消费自定义属性，单类选择器打不过
   .e-con 规则（同 timeline margin-top 和 CTA padding 的同类坑）。
   用 3-class 选择器 (0,3,0) 稳定覆写 --min-height，同时把移动端断点的
   --min-height 也搬到对应媒体查询里用同等 specificity 覆写。 */
.elementor-element.e-con-full.jiesheng-about-banner {
    --min-height: 444px;
}

.jiesheng-about-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 0;
}

.jiesheng-about-banner__inner {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin: 0 auto;
    /* 🚩 2026-09-04：这页跟 capability-archive-header 等页一样是深色 banner
       叠在透明页头下面（body.jiesheng-dark-header 把 body 的 padding-top 清零，
       见 header.css 对应注释），页头本身 position:fixed 悬浮在最上层——banner
       自己必须留够顶部内边距才不会被页头压住文字。第一版抄了首页非深色区块的
       80px，字号从 56px 提到真实的 72px 之后两行标题的第一行被页头盖住了一截
       （截图实测），改成跟 capability-archive-header.css 同一个惯例值 120px。 */
    /* 2026-09-04 第二次修：120px（照抄 capability-archive-header.css 的惯例值）
       实测在这个页面仍然不够——量出来页头 bottom=137px、h1 box top=120px，
       理论上还差 17px。/capabilities/ 页的单行 H1 因为字体上方留白（ascender）
       够大，17px 差值恰好落在空白区没露出来；这里是两行、72px、line-height:1.1
       更紧凑的标题，17px 差值直接吃进第一行字形，肉眼可见被切。这条差值站内
       其他深色页头页面可能也存在（同样量出 17px），只是文字够短/行数够少没露出来，
       这里不去改全站惯例值，只加大这页自己的顶部内边距到明显有富余的 160px。 */
    padding: 160px 24px 80px;
    text-align: center;
}

.jiesheng-about-banner .elementor-image-box-title {
    color: #fff;
    /* 2026-09-04 probe --map 实测 jcrapid.com 真实值：1440 视口下 72px（不是 56px），
       margin-bottom 20px（不是 16px），line-height 由 1.1 换算自动跟上 79.2px。 */
    font-size: clamp(2rem, 5vw, 4.5rem);
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 20px;
}

.jiesheng-about-banner .elementor-image-box-description {
    color: #fff;
    /* 2026-09-05 实测参考站真实值：15px / line-height 25.5px（1.7倍），
       之前写的 1.1rem(17.6px) 偏大，opacity:0.9 参考站也没有（纯白色）。 */
    font-size: 0.9375rem;
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto;
}

/* ── 2. Intro + Stats 区块（真实结构：图文两栏行容器，文字列内部纵向堆叠
   eyebrow/H2/正文/统计网格——不是三者并列，2026-09-05 第四轮修正） ── */
.jiesheng-about-intro {
    /* 🚩 2026-09-05 第六轮：用户反馈"hero 和这个区块之间没有间隙"，用 Playwright
       挂真实归档页查 getBoundingClientRect 才发现前几轮的检查停在了错误的层级——
       外层容器（723e4d4）padding 确实是 0 没错，但真正的 100px 上下留白其实在
       它内部的 .e-con-inner 上（padding:100px 0px），前几轮只查了外层就下结论
       "参考站纯靠 banner 高度撑间距"，没有再往下点一层看 e-con-inner 自己的
       padding，跟本文件其余好几处"没查到底"是同一类教训。外层这里改回 0。 */
    padding: 0 24px;
    background-color: #fff;
}

.jiesheng-about-intro .e-con-inner {
    max-width: 1400px;
    margin: 0 auto;
    /* 实测参考站真实值：100px 0px，是 hero 和这个区块之间视觉间隙的真正来源。
       🚩 第七轮：这条 padding 第一次改的时候只测过参考站的值，没有实测我们自己
       页面上有没有生效——查了才发现 Elementor 真实消费的不是 --padding-top/
       --padding-bottom（本文件其余好几处踩过的那个变量名），而是 CSS 逻辑属性
       --padding-block-start/--padding-block-end（frontend.min.css 里
       `.e-con>.e-con-inner{padding-block-start:var(--padding-block-start)}`），
       跟物理属性 padding-top 是两套不同变量，我单类选择器写的物理 padding 属性
       被这条逻辑属性规则同 specificity 后加载覆盖，实测 computed padding 一直
       是 0。解法同文件里其余"覆写变量本身"的坑一致，这次改覆写这两个逻辑属性
       变量。 */
    --padding-block-start: 100px;
    --padding-block-end: 100px;
    padding: 100px 0;
    --display: flex;
    display: flex;
}

/* 真实结构：e-con-inner 只有一个直接子项——图文两栏行容器（对应参考站
   03c7ec2）。这个子项自己也带 e-con/e-flex 真实 class，要让它撑满
   e-con-inner 整行宽度，同上面 .e-con.e-flex{flex:...} 那个坑，但这里用
   width:100% 更省事：flex-basis:auto 遇到有显式 width 的 flex item 时会
   用 width 的值作为 used flex-basis（CSS 规范行为），不用再叠 3-class。
   🚩 但 flex-direction/flex-wrap 这两个自定义属性本身还是要 3-class——
   写完第一遍用 Playwright 复核发现 __row 实测仍是 flex-direction:column
   （单类 (0,1,0) 打不过 `.e-con.e-flex{--flex-direction:column}` 的
   (0,2,0)，跟本文件其余好几处同一个坑，第一次漏了没给这个新容器补上）。 */
.elementor-element.e-con-full.jiesheng-about-intro__row {
    width: 100%;
    --display: flex;
    --flex-direction: row;
    --flex-wrap: wrap;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 48px;
    align-items: flex-start;
}

/* 配图列现在是普通 elementor-widget-image（真实结构里图片就是行容器的
   直接子项，不再包一层 e-con），没有 e-con/e-flex 这两个真实 class，
   .e-con.e-flex{flex:...} 那条规则压根不命中——但实测发现单类选择器
   （specificity (0,1,0)）还是没能让 flex-basis 生效（computed 出来
   basis 仍是 auto，不是我们写的 420px），Elementor 的 widget 相关规则里
   还有别的同级 specificity 规则在竞争，顺序上没赢。跟本文件其余"3-class
   才稳赢"的坑同一个教训，直接也叠 3 个真实 class 保险。实测参考站图片列
   自身宽度 588px≈42%（1400 的 42%），按同比例给 flex-basis。 */
.elementor-element.elementor-widget-image.jiesheng-about-intro__visual {
    flex: 0 1 42%;
}

.jiesheng-about-intro__img img {
    /* 实测参考站真实图片只占列宽的 76%（居中），不是撑满整列——76% + 居中
       用 auto margin 复刻，比嵌套 flex justify-content:center 简单。 */
    width: 76%;
    height: auto;
    border-radius: 6px;
    display: block;
    margin: 0 auto;
}

.elementor-element.e-con-full.jiesheng-about-intro__text {
    /* 文字列仍然带 e-con-full/e-flex/e-child 真实 class，同一个
       .e-con.e-flex{flex:...} 坑，3-class 补丁保留。真实结构里文字列宽度
       是"剩余空间"（1400-588=812≈58%），用 flex-grow:1 让它自动吃满
       __row 让出来的宽度，不用显式基准值凑巧对上 58%。 */
    --flex-grow: 1;
    --flex-shrink: 1;
    --flex-basis: 320px;
    flex: 1 1 320px;
    --display: flex;
    --flex-direction: column;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* eyebrow（h6 小标题）实测参考站真实值：15px / 字重 700 / 黑色（不是品牌橙）/
   行高 21px（1.4倍，不是紧贴 1 倍）——之前四个数值全错，是"看着像 eyebrow
   就该用品牌色"的想当然，没有真的量过。timeline 的 h6 同款，一起改。 */
.jiesheng-about-intro__text h6.elementor-heading-title,
.jiesheng-about-timeline__header h6.elementor-heading-title {
    font-size: 0.9375rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-strong, #000);
    line-height: 1.4;
    margin: 0;
}

/* H2 大标题实测参考站统一是 44px（intro/certs/cta/timeline 四处一个值，
   之前四处各写了一个 clamp 上限，全部不对），行高 1.1（48.4px÷44px）。 */
.jiesheng-about-intro__text h2.elementor-heading-title {
    font-size: clamp(1.6rem, 3vw, 2.75rem);
    font-weight: 700;
    color: var(--text-strong, #000);
    line-height: 1.1;
    margin: 0;
}

/* 正文段落颜色实测参考站是 var(--text)（#333，较深），之前误用了
   var(--text-light)（#808285，偏浅灰）——certs/cta 正文、统计标签同款问题。 */
.jiesheng-about-intro__text p {
    color: var(--text, #333);
    line-height: 1.7;
    margin: 0;
}

/* 统计计数器：2026-09-05 第四轮改成嵌在文字列内部的纵向 flex 子项（真实
   结构，见文件头部第四轮说明），不再是跟配图列/文字列抢一整行的第三栏，
   所以不再需要 flex:1 0 100% 这个「独立成行」的补丁——纵向 flex 容器
   （.jiesheng-about-intro__text）默认 align-items:stretch，子项自动撑满
   父容器宽度。
   🚩 2026-09-04 用户指出"样式还是有问题"后重新逐项核对才挖出来的第 5 个同类坑：
   之前只顾着修配图/文字/统计三者的相对位置，没有再往下核对统计网格自己内部
   4 个计数器是不是真排成了 4 列——实测无论桌面还是移动端，实际都是 Elementor
   自己的 3 列网格布局（20+/200+/5000+ 一行，1000+ 单独换行），根因是
   `.e-con.e-grid{grid-template-columns:var(--e-con-grid-template-columns)}`
   （两个 class，specificity (0,2,0)）赢过了这条规则的标准属性声明。跟前面
   --flex-grow 系列坑一样的解法：既然标准属性打不过，就把它读的
   --e-con-grid-template-columns 自定义属性本身覆写掉。 */
div.jiesheng-about-stats {
    --display: grid;
    --e-con-grid-template-columns: repeat(4, 1fr);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 12px;
}

/* 🚩 2026-09-05 用户指出这里"样式跟参考站不一致"才回头查证：这层卡片装饰
   （灰底+橙色左边框+内边距）是本站自己加的，参考站真实的 .elementor-counter
   压根没有背景色/边框/内边距，是纯文字贴在页面背景上——之前的注释写"是本站
   自己加的独立设计取舍，不是要抠的对象"，但用户既然要 1:1，这个凭空加的
   装饰就不该留，删掉贴合参考站真实的无装饰纯文字呈现。 */
.jiesheng-about-stats .elementor-counter {
    text-align: left;
}

/* 实测参考站真实值：数字 69px / 字重 600 / 深色 var(--text)（不是品牌橙）；
   标签 19px / 同款深色（不是浅灰）。之前数字只写了 32px、颜色还用了品牌橙，
   两个数值都没有真的量过参考站的 computed style。

   🚩 2026-09-05：去掉卡片装饰后才暴露出一个被卡片背景遮住的真实 bug——
   69px 字号在这栏（嵌在文字列内部，单列只有约 190px 宽）放"5000+""1000+"
   这种 4 位数+加号的真实内容会溢出（实测 scrollWidth 213px/202px，但盒子
   只有 173px 宽），文字糊到相邻数字上。参考站真实内容是 JS 动态计数器，
   静态归档只拍到占位的"0"，测不出真实数字有几位、要多宽——69px 是它在
   自己那个约 190px 宽栏位里对"0"这种 1 位数没问题的字号，不能直接套到我们
   "5000+"这种更长的真实数字上。优先保证不重叠、能读清楚，把上限从 69px
   降到能放下 5 个字符还有余量的 56px，vw 系数按比例跟着降。 */
.jiesheng-about-stats .elementor-counter-number {
    font-size: clamp(1.75rem, 3.9vw, 3.5rem);
    font-weight: 600;
    color: var(--text, #333);
    display: block;
    line-height: 1.1;
}

.jiesheng-about-stats .elementor-counter-title {
    font-size: 1.1875rem;
    font-weight: 400;
    color: var(--text, #333);
    margin-top: 4px;
    /* 实测参考站真实行高是字号的 2.5 倍（47.5px/19px），比常规正文行高松得多，
       之前只是随手给了个 1.4，没有真的量过这一项。 */
    line-height: 2.5;
}

/* ── 3. Certifications 区块（真实第三区块，logo 轮播换成旧站真实证书照片） ── */
.jiesheng-about-certs {
    padding: 60px 24px;
    background-color: var(--bg-light, #f8f8f8);
}

/* 🚩 2026-09-05 第四轮：用 Playwright 挂真实归档页查
   `.elementor-element-d18d709 > .e-con-inner` 才发现这里的 flex-direction
   从第一版起就错了——真实结构是纵向堆叠（column）：标题行（左对齐，不居中）
   在上，证书图这一整行（真实是 Swiper 轮播，宽度铺满 1345px）在下，
   margin-top 80px 分隔两者，不是"标题在左、证书图在右"的左右两栏。
   之前照抄了首页常见的"标题+内容左右分栏"套路，没有实测这一区块本身的
   flex-direction，是想当然导致的结构错误，不是字号颜色能补救的。 */
/* 🚩 2026-09-05 截图比对发现 gap:32px 没生效（computed 仍是 0px）——
   `.e-con-inner{gap:var(--row-gap) var(--column-gap)}` 读的是这两个自定义
   属性，标准 gap 属性本身没被消费，同一套坑，把 --row-gap/--column-gap
   也一起写上，再叠父级真实 class 提高 specificity。 */
.elementor-element.e-con-boxed.jiesheng-about-certs .e-con-inner {
    max-width: 1400px;
    margin: 0 auto;
    --display: flex;
    --flex-direction: column;
    --row-gap: 32px;
    --column-gap: 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.jiesheng-about-certs__header {
    /* 实测参考站标题行文字是左对齐（text-align:start），不是居中。 */
    text-align: left;
}

/* 🚩 2026-09-05 截图比对才发现：标题(h2)和正文(p)真实是同一行内左右两栏
   （h2 占约 45%，正文占约 50%，中间空出宽间距），不是纵向堆叠——第一次
   核实到"标题行整体 vs 图片行是纵向堆叠"就没再往下多点一层看标题行
   内部自己是怎么排的。 */
.jiesheng-about-certs__header-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 32px;
}

.jiesheng-about-certs__header-row .elementor-widget-heading:first-child {
    flex: 1 1 420px;
}

.jiesheng-about-certs__header-row .elementor-widget-heading:last-child {
    flex: 1 1 420px;
    padding-top: 12px;
}

.jiesheng-about-certs__header h2.elementor-heading-title {
    /* 同 intro h2 的注释：实测参考站 H2 统一是 44px，不是每个区块各写一个
       clamp 上限。 */
    font-size: clamp(1.6rem, 3vw, 2.75rem);
    font-weight: 700;
    color: var(--text-strong, #000);
    line-height: 1.1;
    margin: 0;
}

.jiesheng-about-certs__header p {
    color: var(--text, #333);
    line-height: 1.6;
    margin: 0;
}

.jiesheng-about-certs__badges,
div.jiesheng-about-certs__badges {
    /* 2026-09-05 第四轮：不再跟标题行抢左右分栏空间，改成独立一整行——
       真实结构本来就是标题行在上、证书图整行在下（column 堆叠），见上面
       .e-con-inner 的注释。宽度直接铺满父容器（列 flex 默认 stretch）。 */
    --display: flex;
    /* 🚩 2026-09-04 第三个 --xxx 变量坑（同文件已有 --display/--flex-direction
       两处注释同一个机制）：这个元素带 elementor-widget class，命中
       frontend.min.css 的 `.elementor-element{--flex-wrap:initial}` +
       `.elementor-element:where(.e-con-full,.elementor-widget)
       {flex-wrap:var(--flex-wrap)}`（:where() 不计入 specificity）——本页因为
       复用了首页的 jiesheng-pages-home-news widget，home-shared.css 也被一起
       加载，且加载顺序在 about-shared.css 之后，它里面同一条 `--flex-wrap:initial`
       重置规则（单类选择器，跟第一次只写 .jiesheng-about-certs__badges 同一个
       specificity）后加载覆盖了这里的 --flex-wrap:wrap，flex-wrap 又变回
       nowrap，导致 8 张 100px 证书图挤不换行，整行横向溢出视口（probe 实测撑出
       1703px，超视口 1440px 263px；只加 --flex-wrap:wrap 不够，第一次尝试后
       复测仍然溢出，是因为选择器 specificity 打平了，加载顺序说了算——这里补
       `div.` 标签把 specificity 提到 (0,1,1)，稳定赢过对方的 (0,1,0)，不再
       依赖"哪个文件后加载"这种脆弱假设，同 ketian1/contact 页踩过的同款坑）。 */
    --flex-wrap: wrap;
    display: flex;
    flex-wrap: wrap;
    /* 🚩 2026-09-05 第六轮：8 个徽章从手绘 SVG 换回真实 jcrapid.com 图片
       （见上面大段注释）后，gap 实测参考站 slide 宽 140.8px、图片本身 100px，
       换算下来真实横向间距约 40px，比之前手绘凑数时用的 16px 宽松得多。 */
    gap: 40px;
    justify-content: flex-start;
    align-items: center;
}

.jiesheng-about-certs__badges img {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

/* ── 4. CTA 声明条区块（真实第四区块，之前完全没有，新加） ─────────── */
/* 🚩 2026-09-05 第六轮：前几轮判断"这页 post-594.css 没抓到，背景图/精确
   padding 不可考"其实是没查到底——这次直接挂真实 jcrapid.com/about-us/
   活页面（不是本地静态归档）用 getComputedStyle 查完整祖先链才发现：
   ① 背景图 URL 就在这个容器实例自己的 computed style 里
   （.../wp-content/uploads/2025/03/Home-Banner-cnc-machining-2.webp，
   是首页 hero 复用的同一张 CNC 车间特写图，经 berqwp 懒加载 CDN 转发但
   真实源站路径可读，不是不可考）；
   ② 真正的 100px 上下 padding 在 .e-con-inner 上（computed padding:
   100px 0px，整体高度 483px），外层容器自己 padding 实测只有 "0px 40px"
   （左右）——前几轮在外层容器上加 140px 凑出了接近的总高度，层级是错的，
   跟 intro 区块同一个教训。
   overlay 机制确认：::before 黑色 rgba(0,0,0,.5) 叠在背景图上（方向判断
   对了），#1d2939 纯色保留作为图片导入前的占位兜底。 */
.jiesheng-about-cta {
    position: relative;
    background-color: #1d2939;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.jiesheng-about-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 0;
}

.jiesheng-about-cta > .e-con-inner {
    position: relative;
    z-index: 1;
}

.elementor-element.e-con-boxed.jiesheng-about-cta {
    padding: 0 40px;
}

/* 🚩 2026-09-05 用 tools/probe/deep-diff.py 深度比对挖出来的：单类选择器写的
   text-align:center 没生效（实测 computed 仍是 start）——同一个 Elementor
   default 更高 specificity 覆盖标准属性的坑，这次是 text-align。补 3 个真实
   class 提高 specificity，跟本文件其余同类修复一致。 */
.elementor-element.e-con-boxed.jiesheng-about-cta {
    text-align: center;
}

/* 🚩 2026-09-05 第六轮：挂真实活页面实测 .e-con-inner 的 max-width 真实值是
   800px（不是前几轮凭视觉估的 780px），同时这里还要补上真实的 100px 上下
   padding（真正的间距来源，见上面 .jiesheng-about-cta 大段注释）。 */
.elementor-element.e-con-boxed.jiesheng-about-cta .e-con-inner {
    --content-width: 800px;
    max-width: 800px;
    padding: 100px 0;
    margin: 0 auto;
    --display: flex;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.jiesheng-about-cta h2.elementor-heading-title {
    font-size: clamp(1.6rem, 3vw, 2.75rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    margin: 0;
}

.jiesheng-about-cta p.elementor-heading-title {
    font-size: 0.9375rem;
    color: #fff;
    line-height: 1.7;
    margin: 0 0 8px;
}

.jiesheng-about-cta .elementor-button {
    border-radius: 50px;
    padding: 14px 36px;
    background-color: var(--brand, #e7823a);
    border-color: var(--brand, #e7823a);
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.2s, border-color 0.2s;
}

.jiesheng-about-cta .elementor-button:hover {
    background-color: #d56b1f;
    border-color: #d56b1f;
}

/* ── 5. 公司历程时间轴区块（真实第五区块，原生 HTML 复刻 eael-content-timeline） ── */
.jiesheng-about-timeline {
    padding: 80px 24px;
    background-color: #fff;
}

/* 2026-09-05 probe 实测参考站 timeline 外容器有 margin-top: 100px，我们之前没有。
   🚩 `.e-con { margin-top: 0px }` 在 home-shared.css 里后加载，同级 specificity (0,1,0)
   压掉了 .jiesheng-about-timeline 里的 margin-top: 100px。解法：把 --margin-top 写在
   3-class 选择器上，specificity (0,3,0) 稳赢。这个元素真实带 e-flex e-con-boxed e-con
   这三个 class，用这三个再加 .jiesheng-about-timeline 共 4 个 class。 */
.elementor-element.e-con-boxed.jiesheng-about-timeline {
    --margin-top: 100px;
    margin-top: 100px;
}

/* 🚩 2026-09-05 第七轮：用户反馈"标题位置不对"，挂真实活页面查完整 DOM 链才
   发现第一版的结构判断就是错的——标题（eyebrow+H2）和时间轴列表根本不在同一层
   宽度约束里：真实结构是外层 e-con-inner 跟 intro/certs 其余区块一样是全宽
   1400px（标题就长在这一层，跟别的区块标题左边对齐），900px（实测真实是
   980px）的收窄只作用在时间轴卡片列表自己身上（eael-content-timeline-container
   有它自己独立的居中窄列），不是套在标题外面的共同容器。之前把两者当成同一个
   宽度约束点，标题被跟着卡片一起收窄到 900px，导致标题比首页/intro/certs 的
   标题缩进更多，肉眼看起来"位置不对"。这里改回真实值：外层跟其余区块一样
   1400px，收窄挪到下面 .jiesheng-timeline-list 自己身上。 */
.elementor-element.e-con-boxed.jiesheng-about-timeline .e-con-inner {
    --content-width: 1400px;
    max-width: 1400px;
    margin: 0 auto;
    --display: flex;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.jiesheng-about-timeline__header {
    /* 实测参考站真实 text-align 是 start（左对齐），之前想当然写了 center。 */
    text-align: left;
    --display: flex;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.jiesheng-about-timeline__header h2.elementor-heading-title {
    font-size: clamp(1.6rem, 3vw, 2.75rem);
    font-weight: 700;
    color: var(--text-strong, #000);
    line-height: 1.1;
    margin: 0;
}

/* 🚩 2026-09-05 用户指出参考站真实时间轴是"一左一右"交替排布（桌面端），
   之前单列靠左是没实测过布局本身的想当然（真实 CSS：
   `.eael-content-timeline-line{left:50%}` 桌面端中线居中，
   `.eael-content-timeline-content{width:45%}` 奇数默认在左、
   `:nth-child(even){float:right}` 偶数在右，圆点用 left:50%+margin-left:-20px
   钉在中线上）。这版改成同款结构：移动端（<922px）保持单列靠左（跟真实 CSS
   的 max-width:991px 断点行为一致），桌面端中线居中+奇偶交替。 */
.jiesheng-timeline-list {
    list-style: none;
    /* 实测参考站真实值：.eael-content-timeline-container 宽 980px，在
       1400px 的外层容器里居中——只有卡片列表本身收窄，标题不收窄，见上面
       .e-con-inner 大段注释。 */
    max-width: 980px;
    margin: 0 auto;
    padding: 0;
    position: relative;
}

.jiesheng-timeline-list::before {
    content: '';
    position: absolute;
    top: 6px;
    bottom: 6px;
    /* 圆点从 16px 放大到真实的 40px 之后，中线要跟着挪到新圆点的几何中心
       （20px 半径 - 1px 线宽的一半）。 */
    left: 19px;
    width: 2px;
    /* 🚩 2026-09-05 第六轮：静态 CSS 里 .eael-content-timeline-line 的 base
       规则确实是 #d7e4ed 浅灰蓝色没错，但这是"未触发"的初始态——真实插件带一个
       滚动触发的进度填色动画（Essential Addons 自己的 JS，本站没有这套依赖）：
       挂真实 jcrapid.com/about-us/ 活页面滚动看才发现，线和圆点在滚动经过后
       会永久变成品牌橙 + 白色图标，且滚到底时全部时间轴都已经是这个"已激活"
       状态。用户反馈"图标没颜色"看到的就是我们这边永远停在初始态的浅灰蓝——
       静态页面复刻不了滚动触发效果，索性直接用滚动后的"最终态"做常驻样式，
       比常驻一个几乎不可见的浅灰蓝更贴近参考站访客实际看到的效果。 */
    background: var(--brand, #e7823a);
}

.jiesheng-timeline-item {
    position: relative;
    /* 圆点放大到 40px 后，左内边距要跟着从 32px 加大到 56px，不然文字会
       被圆点压住。 */
    padding: 0 0 32px 56px;
}

.jiesheng-timeline-item:last-child {
    padding-bottom: 0;
}

/* 🚩 2026-09-05 截图比对才发现的：参考站每条时间轴旁边还有一个 "Nov 09, 2017"
   日期标签，之前判断"8 条数据完全相同，是插件占位噪声"就直接不做了——但
   跟 Read More 按钮一样，这是设计里真实存在的可见元素，不该因为背后的数据
   是假的就连元素本身也一起删掉（同一个错误犯了两次）。桌面端交替布局才有
   意义，移动端单列隐藏（真实参考站的日期定位机制本来就依赖桌面端的中线
   居中，移动端没有对应的真实呈现可抠）。 */
.jiesheng-timeline-item__date {
    display: none;
    color: var(--text-light, #808285);
    font-size: 0.875rem;
}

/* 🚩 2026-09-05 用户指出"时间轴节点图标不一致"——实测参考站真实圆点是
   40px（不是 16px），浅灰底 rgb(241,242,243)、浅色描边，中间嵌一个白色
   小图标（真实是 Font Awesome 铅笔图标，本站没引入 Font Awesome，改用
   等价的内联 SVG，不新增字体图标库依赖），不是纯色小圆点。 */
.jiesheng-timeline-item__dot {
    position: absolute;
    left: 0;
    /* 🚩 2026-09-05 第七轮：挂真实活页面查 dot 相对卡片顶部的偏移实测是 20px
       （之前的 4px 是没实测过、凭视觉估的），跟标题顶部偏移 24px 很接近——
       圆点大致跟标题第一行文字垂直居中对齐，不是贴在卡片最顶上。 */
    top: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* 🚩 2026-09-05 第六轮：同上面 ::before 中线的注释——常驻用滚动后的
       "已激活"态（品牌橙底），不是插件默认的浅灰底 #f1f2f3，理由同上。 */
    background: var(--brand, #e7823a);
    border: 6px solid #f9f9f9;
    box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.jiesheng-timeline-item__dot-icon {
    width: 14px;
    height: 14px;
    color: #fff;
}

/* 2026-09-05 deep-diff.py 实测参考站真实值：15px（不是 17px）、颜色
   #303e49 深蓝灰（不是纯黑）、行高 1.5 倍（原来没设，默认继承行距偏紧）。 */
.jiesheng-timeline-item__title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #303e49;
    line-height: 1.5;
    /* 🚩 2026-09-05 第六轮：挂真实活页面查 h3/p/button 的 margin 才发现标题
       margin-bottom 真实是 0（不是之前想当然写的 6px），标题到正文的间距其实
       来自下面 p 自己的 margin-top，不是标题自己留白——这也是用户反馈"标题
       位置不对"的真实原因：之前用错了元素背 spacing，视觉总量凑巧接近但
       两个数值内部分配是错的。 */
    margin: 0;
}

.jiesheng-timeline-item__text {
    /* timeline 条目是原生复刻（无参考站真实元素可量），跟其余区块正文颜色
       统一改成 var(--text)，理由见文件头部的返工说明。 */
    color: var(--text, #333);
    line-height: 1.65;
    /* 挂真实活页面实测：p 的 margin 真实是 15px 0（标题到正文、正文到按钮
       各留 15px），不是之前的"标题 margin-bottom:6px + 按钮 margin-top:12px"
       两头凑。 */
    margin: 15px 0;
}

/* 🚩 2026-09-05 用户指出"少了灰色背景"——实测参考站卡片真实背景色
   rgb(241,242,243)、内边距 24px、圆角约 4px（0.25em），之前是纯文字
   贴在页面背景上，没有卡片感。 */
.jiesheng-timeline-item__content {
    background: #f1f2f3;
    padding: 24px;
    border-radius: 4px;
}

/* 🚩 2026-09-05 第八轮：用户指出"Read More 按钮还是在左边，参考站的是在右边"
   ——挂真实活页面查才发现按钮不是简单的 inline-block 贴左，是 float，且
   left 列（奇数项）和 right 列（偶数项）的浮动方向是相反的：奇数项（卡片在
   左半区）按钮 float:right（贴向卡片朝中线的那一侧，也就是卡片自己的右边），
   偶数项（卡片在右半区）按钮 float:left（贴向卡片朝中线的那一侧，也就是卡片
   自己的左边）——按钮始终贴在"卡片朝向时间轴中线"的那一侧，不是固定贴左。
   之前只测过偶数列的按钮（July 2021，float:left，视觉上跟默认 inline-block
   没区别，没发现问题），漏了奇数列的按钮其实是反方向浮动。float 需要清除，
   参考站真实用 ::after 伪元素 clearfix（display:table;clear:both），照抄。 */
.jiesheng-timeline-item__content::after {
    content: '';
    display: table;
    clear: both;
}

/* Read More 按钮：参考站真实背景色 rgb(231,130,58) 正好等于本站的
   --brand 变量（不是巧合抄错，是两站品牌色恰好一致），实测过。 */
.jiesheng-timeline-item__more {
    display: inline-block;
    /* 挂真实活页面实测按钮 margin-top 是 0——按钮到正文的间距由上面 p 的
       margin-bottom:15px 提供，不是按钮自己再加一层 margin-top。 */
    margin-top: 0;
    padding: 10px 25px;
    background: var(--brand, #e7823a);
    color: #fff;
    font-size: 0.8em;
    line-height: 1.5;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
}

/* 桌面端一左一右交替：中线居中，li 各占 50% 宽度，奇数项贴左半区（右内边距
   让文字不挤到中线），偶数项贴右半区（左内边距），圆点始终定位在两个半区的
   交界处（中线上）——跟真实 CSS 同一个几何原理，只是用现代 flex/margin:auto
   实现，不需要照抄 float。 */
@media (min-width: 922px) {
    .jiesheng-timeline-list::before {
        left: 50%;
    }

    .jiesheng-timeline-item {
        width: 50%;
        padding: 0 0 48px;
    }

    .jiesheng-timeline-item:nth-child(odd) {
        margin-right: auto;
        padding-right: 64px;
    }

    .jiesheng-timeline-item:nth-child(even) {
        margin-left: auto;
        padding-left: 64px;
    }

    /* 实测参考站真实值：Read More 按钮始终贴在卡片朝向中线的那一侧——奇数项
       （卡片在左半区）按钮 float:right，偶数项（卡片在右半区）按钮
       float:left，不是固定贴左。见上面 .jiesheng-timeline-item__content::after
       clearfix 注释。 */
    .jiesheng-timeline-item:nth-child(odd) .jiesheng-timeline-item__more {
        float: right;
    }

    .jiesheng-timeline-item:nth-child(even) .jiesheng-timeline-item__more {
        float: left;
    }

    .jiesheng-timeline-item__dot {
        left: auto;
        top: 20px;
    }

    /* 圆点放大到 40px 后，偏移量从 -8px（16px 圆点的一半）改成 -20px
       （40px 圆点的一半），才能继续稳稳落在两个半区的交界线上。 */
    .jiesheng-timeline-item:nth-child(odd) .jiesheng-timeline-item__dot {
        right: -20px;
    }

    .jiesheng-timeline-item:nth-child(even) .jiesheng-timeline-item__dot {
        left: -20px;
    }

    /* 日期标签只在桌面端交替布局里显示，定位在圆点之外、对侧半区的空白处——
       奇数项卡片在左，日期贴着圆点右边；偶数项反过来。 */
    .jiesheng-timeline-item__date {
        display: block;
        position: absolute;
        top: 8px;
        width: 140px;
    }

    .jiesheng-timeline-item:nth-child(odd) .jiesheng-timeline-item__date {
        right: -170px;
        text-align: left;
    }

    .jiesheng-timeline-item:nth-child(even) .jiesheng-timeline-item__date {
        left: -170px;
        text-align: right;
    }
}

/* ── 响应式 ─────────────────────────────────────────────────── */
@media (max-width: 921px) {
    .jiesheng-about-banner {
        min-height: 340px;
    }
    .elementor-element.e-con-full.jiesheng-about-banner {
        --min-height: 340px;
    }

    .jiesheng-about-banner__inner {
        /* 🚩 2026-09-04 移动端实测出的真实 bug：顶部固定页头（工具条+logo/汉堡行）
           在 390px 视口下量出来仍是 137px，没有随视口收窄变矮——跟桌面端同一个
           "深色页头叠加需要 banner 自己留够顶部空间"的道理，但这条响应式规则
           之前把顶部内边距缩到了 60px，比页头矮不了多少，H1 标题直接压在
           logo/汉堡菜单下面（截图实测）。只缩小下内边距，上内边距保持跟桌面
           同量级。 */
        padding: 150px 20px 60px;
    }

    .jiesheng-about-intro {
        padding: 0 20px;
    }

    .jiesheng-about-intro .e-con-inner {
        padding: 48px 0;
    }

    .jiesheng-about-certs,
    .jiesheng-about-cta,
    .jiesheng-about-timeline {
        padding: 60px 20px;
    }
    div.jiesheng-about-stats {
        /* div. 标签 + 自定义属性，跟桌面基础规则同一套 fix，理由见那条注释。 */
        --e-con-grid-template-columns: repeat(2, 1fr);
        grid-template-columns: repeat(2, 1fr);
    }

    .jiesheng-about-certs .e-con-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 544px) {
    .jiesheng-about-banner {
        min-height: 280px;
    }
    .elementor-element.e-con-full.jiesheng-about-banner {
        --min-height: 280px;
    }

    .jiesheng-about-banner__inner {
        /* 同上一个断点的注释，390px 实测页头仍是 137px。 */
        padding: 150px 16px 50px;
    }

    .jiesheng-about-intro {
        padding: 0 16px;
    }

    .jiesheng-about-intro .e-con-inner {
        padding: 40px 0;
    }

    .jiesheng-about-certs,
    .jiesheng-about-cta,
    .jiesheng-about-timeline {
        padding: 50px 16px;
    }

    div.jiesheng-about-stats {
        --e-con-grid-template-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    }
}