/* ================================================================
   mhpn.cn · 工种介绍类样式 · 分片二（pages-zhonggong2.css）
   覆盖页面：登高架设 / 制冷与空调 / 危险化学品 / 特种设备作业 /
             起重机作业 / 叉车司机 / 电力线路
   设计基准：米白 + 深棕 + 墨黑 · 画册高级风
   说明：仅引用 base.css 设计令牌，不另造色值；每页私有布局互不相同构。
   ================================================================ */

/* ============ 通用：本分片页首 Hero（深色横幅） ============ */
.pg-hero{
  position:relative; padding:104px 0 76px; overflow:hidden;
  background:var(--ink); color:var(--paper-3);
}
.pg-hero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.30; }
.pg-hero__inner{ position:relative; z-index:2; }
.pg-hero__crumb{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:13px; color:rgba(244,238,226,.6); margin-bottom:26px; }
.pg-hero__crumb a:hover{ color:var(--gold); }
.pg-hero__crumb .sep{ color:rgba(244,238,226,.3); }
.pg-hero h1{ font-size:clamp(28px,4vw,46px); margin-bottom:16px; }
.pg-hero__sub{ max-width:660px; color:rgba(244,238,226,.76); font-size:15.5px; line-height:2; }
.pg-hero__tags{ display:flex; gap:10px; flex-wrap:wrap; margin-top:24px; }

/* 浅色 Hero（制冷 / 叉车页用，与深色页区分） */
.pg-hero--light{ background:var(--paper); color:var(--ink); }
.pg-hero--light .pg-hero__bg{ opacity:.18; }
.pg-hero--light .pg-hero__crumb{ color:var(--brown-3); }
.pg-hero--light .pg-hero__crumb .sep{ color:var(--line); }
.pg-hero--light .pg-hero__sub{ color:var(--ink-2); }

/* ============ 通用：页内预约 CTA + 表单 ============ */
.pg-cta{ background:var(--brown); color:var(--paper-3); }
.pg-cta--ink{ background:var(--ink); color:var(--paper-3); }
.pg-cta__inner{ padding:64px 0; display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center; }
.pg-cta h2{ color:var(--paper-3); font-size:clamp(22px,2.8vw,32px); margin-bottom:14px; }
.pg-cta p{ color:rgba(244,238,226,.82); font-size:15px; line-height:2; margin-bottom:10px; }
.pg-cta__tel{ font-family:var(--font-serif); font-size:22px; color:var(--gold); letter-spacing:.04em; }
.pg-cta__form{
  background:var(--paper-3); border-radius:var(--radius-lg); padding:30px 30px 26px;
  box-shadow:var(--shadow);
}
.pg-cta__form h3{ font-size:18px; color:var(--ink); margin-bottom:4px; }
.pg-cta__form .form-note{ margin-top:10px; }

/* ================================================================
   P1 登高架设 denggao-jiashe.html —— 斜切图文 / 三卡等宽 / 时间轴 / 全宽图条
   ================================================================ */
.dg-skew{ padding:96px 0; }
.dg-skew__grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:center; }
.dg-skew__fig{ position:relative; }
.dg-skew__fig img{ width:100%; height:460px; object-fit:cover; clip-path:polygon(0 0, 100% 0, 92% 100%, 0 100%); box-shadow:var(--shadow); }
.dg-skew__copy{ padding:10px 0 10px 56px; }
.dg-skew__copy h2{ font-size:clamp(23px,3vw,32px); margin-bottom:18px; }
.dg-skew__copy p{ font-size:15px; color:var(--ink-2); line-height:2.05; margin-bottom:14px; }
.dg-skew__copy .rule{ margin:22px 0; }

/* 三卡等宽（无下沉，区别于 zhonggong1 中沉三卡） */
.dg-cards{ background:var(--paper-2); padding:96px 0; }
.dg-cards__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.dg-cards__card{
  background:var(--paper-3); border:1px solid var(--line-soft); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow-sm); transition:transform var(--transition), box-shadow var(--transition);
}
.dg-cards__card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.dg-cards__card img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.dg-cards__body{ padding:24px 24px 26px; }
.dg-cards__body h3{ font-size:18px; margin-bottom:10px; }
.dg-cards__body p{ font-size:14px; color:var(--ink-2); line-height:1.95; }

/* 全宽大图 + 信息条 */
.dg-band{ position:relative; height:420px; overflow:hidden; }
.dg-band img{ width:100%; height:100%; object-fit:cover; }
.dg-band__bar{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  background:linear-gradient(0deg, rgba(25,21,16,.86), rgba(25,21,16,0));
  padding:70px 0 28px; color:var(--paper-3);
}
.dg-band__bar h3{ font-size:clamp(19px,2.4vw,26px); margin-bottom:8px; }
.dg-band__bar p{ max-width:680px; color:rgba(244,238,226,.8); font-size:14.5px; line-height:1.9; }

/* FAQ 两列 */
.dg-faq{ padding:96px 0; }
.dg-faq__list{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-content:start; }
.dg-faq__item{ background:var(--paper-3); border:1px solid var(--line-soft); border-radius:var(--radius-lg); overflow:hidden; }
.dg-faq__item summary{ display:flex; justify-content:space-between; gap:14px; padding:18px 22px; cursor:pointer; list-style:none; font-size:15px; font-weight:600; }
.dg-faq__item summary::-webkit-details-marker{ display:none; }
.dg-faq__item summary::after{ content:"+"; font-family:var(--font-serif); font-size:20px; color:var(--gold); transition:transform var(--transition); flex:none; }
.dg-faq__item[open] summary::after{ transform:rotate(45deg); }
.dg-faq__item .ans{ padding:0 22px 20px; font-size:13.5px; color:var(--ink-2); line-height:1.95; }

/* ================================================================
   P2 制冷与空调 lengdong-kongtiao.html —— 交替图文 / 分类表 / 竖编号列表
   ================================================================ */
.ld-alt{ padding:96px 0; }
.ld-alt__row{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.ld-alt__row + .ld-alt__row{ margin-top:72px; }
.ld-alt__row--rev .ld-alt__fig{ order:2; }
.ld-alt__fig img{ width:100%; height:340px; object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow); }
.ld-alt__copy h3{ font-size:clamp(20px,2.6vw,27px); margin-bottom:14px; }
.ld-alt__copy p{ font-size:15px; color:var(--ink-2); line-height:2.05; margin-bottom:12px; }

/* 分类表 */
.ld-tbl{ background:var(--paper-2); padding:96px 0; }
.ld-tbl__wrap{ overflow-x:auto; }
.ld-tbl .tbl{ min-width:600px; }

/* 竖编号列表（区别于横排步骤） */
.ld-num{ padding:96px 0; }
.ld-num__list{ display:grid; gap:18px; max-width:880px; }
.ld-num__item{ display:grid; grid-template-columns:64px 1fr; gap:22px; align-items:start; background:var(--paper-3); border:1px solid var(--line-soft); border-radius:var(--radius-lg); padding:22px 26px; }
.ld-num__no{ font-family:var(--font-serif); font-size:34px; font-weight:700; color:var(--gold); line-height:1; }
.ld-num__item h4{ font-size:17px; margin-bottom:6px; }
.ld-num__item p{ font-size:14px; color:var(--ink-2); line-height:1.95; }

/* ================================================================
   P3 危险化学品 weixian-huaxue.html —— 数据条 / 四宫格 / 错层图文 / 条件清单
   ================================================================ */
.wx-stats{ background:var(--ink); color:var(--paper-3); padding:64px 0; }
.wx-stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.wx-stat .n{ font-family:var(--font-serif); font-size:clamp(28px,3.6vw,42px); color:var(--gold); }
.wx-stat .l{ font-size:13px; color:rgba(244,238,226,.7); letter-spacing:.12em; margin-top:6px; }

.wx-grid{ padding:96px 0; }
.wx-grid__2x2{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.wx-grid__card{ background:var(--paper-3); border:1px solid var(--line-soft); border-radius:var(--radius-lg); padding:30px 28px; box-shadow:var(--shadow-sm); transition:transform var(--transition), box-shadow var(--transition); }
.wx-grid__card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.wx-grid__card .ic{ width:40px; height:40px; color:var(--brown); margin-bottom:16px; }
.wx-grid__card h3{ font-size:18px; margin-bottom:10px; }
.wx-grid__card p{ font-size:14px; color:var(--ink-2); line-height:1.95; }

/* 错层图文 */
.wx-offset{ background:var(--paper-2); padding:120px 0; }
.wx-offset__grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:center; }
.wx-offset__fig{ margin-top:-56px; }
.wx-offset__fig img{ width:100%; height:380px; object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow); }
.wx-offset__copy{ padding-left:48px; }
.wx-offset__copy h2{ font-size:clamp(23px,3vw,32px); margin-bottom:16px; }
.wx-offset__copy p{ font-size:15px; color:var(--ink-2); line-height:2.05; margin-bottom:12px; }

/* 条件清单（大对勾） */
.wx-chk{ padding:96px 0; }
.wx-chk__list{ display:grid; grid-template-columns:1fr 1fr; gap:16px 30px; }
.wx-chk__item{ display:flex; gap:14px; align-items:flex-start; font-size:15px; color:var(--ink-2); line-height:1.9; }
.wx-chk__item svg{ flex:none; width:22px; height:22px; margin-top:4px; color:var(--ok); }

/* ================================================================
   P4 特种设备 teshe-shebei.html —— 对比大表 / 三横卡 / 竖步骤
   ================================================================ */
.ts-cmp{ padding:96px 0; }
.ts-cmp__wrap{ overflow-x:auto; }
.ts-cmp .tbl{ min-width:680px; }
.ts-cmp .tbl th:first-child{ width:22%; }
.ts-cmp .tbl .yes{ color:var(--ok); font-weight:600; }
.ts-cmp .tbl .no{ color:var(--brown-3); }

/* 三横卡（左文右图标，区别于其他三卡） */
.ts-cards{ background:var(--paper-2); padding:96px 0; }
.ts-cards__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.ts-card{ background:var(--paper-3); border:1px solid var(--line-soft); border-radius:var(--radius-lg); padding:28px 26px; box-shadow:var(--shadow-sm); transition:transform var(--transition), box-shadow var(--transition); }
.ts-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.ts-card .ic{ width:46px; height:46px; color:var(--gold); margin-bottom:18px; }
.ts-card h3{ font-size:18px; margin-bottom:10px; }
.ts-card p{ font-size:14px; color:var(--ink-2); line-height:1.95; }

/* 竖步骤（左侧大序号） */
.ts-steps{ padding:96px 0; }
.ts-steps__list{ display:grid; gap:0; max-width:760px; }
.ts-steps__item{ display:grid; grid-template-columns:70px 1fr; gap:20px; padding-bottom:28px; position:relative; }
.ts-steps__item::before{ content:""; position:absolute; left:34px; top:44px; bottom:0; width:1px; background:var(--line); }
.ts-steps__item:last-child::before{ display:none; }
.ts-steps__no{ font-family:var(--font-serif); font-size:30px; font-weight:700; color:var(--gold); line-height:1.2; }
.ts-steps__body h4{ font-size:17px; margin-bottom:6px; }
.ts-steps__body p{ font-size:14px; color:var(--ink-2); line-height:1.95; }

/* ================================================================
   P5 起重机 qizhongji.html —— 全宽图条 / 两大卡对比 / 数据条 / 图文
   ================================================================ */
.qz-band{ position:relative; height:460px; overflow:hidden; }
.qz-band img{ width:100%; height:100%; object-fit:cover; }
.qz-band__inner{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(25,21,16,.82), rgba(25,21,16,.25)); display:flex; align-items:center; }
.qz-band__box{ max-width:560px; color:var(--paper-3); padding:40px 0; }
.qz-band__box h1{ font-size:clamp(28px,4vw,44px); margin-bottom:14px; }
.qz-band__box p{ color:rgba(244,238,226,.82); font-size:15px; line-height:2; }
.qz-band__box .crumb2{ display:flex; gap:8px; align-items:center; font-size:13px; color:rgba(244,238,226,.6); margin-bottom:20px; }
.qz-band__box .crumb2 a:hover{ color:var(--gold); }

/* 两大卡对比 */
.qz-duo{ padding:96px 0; }
.qz-duo__grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.qz-duo__card{ border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line-soft); box-shadow:var(--shadow-sm); background:var(--paper-3); transition:transform var(--transition), box-shadow var(--transition); }
.qz-duo__card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.qz-duo__card img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.qz-duo__body{ padding:28px 28px 30px; }
.qz-duo__body .tag{ display:inline-block; font-size:12px; letter-spacing:.16em; color:var(--brown); border:1px solid var(--gold); border-radius:999px; padding:3px 12px; margin-bottom:14px; }
.qz-duo__body h3{ font-size:21px; margin-bottom:10px; }
.qz-duo__body p{ font-size:14px; color:var(--ink-2); line-height:1.95; margin-bottom:14px; }
.qz-duo__body ul{ display:grid; gap:8px; }
.qz-duo__body li{ display:flex; gap:8px; font-size:13.5px; color:var(--brown-2); }
.qz-duo__body li::before{ content:""; width:5px; height:5px; background:var(--gold); transform:rotate(45deg); flex:none; margin-top:8px; }

/* 三数据条 */
.qz-stats{ background:var(--brown); color:var(--paper-3); padding:60px 0; }
.qz-stats__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; text-align:center; }
.qz-stats .n{ font-family:var(--font-serif); font-size:clamp(28px,3.6vw,42px); color:var(--paper-3); }
.qz-stats .l{ font-size:13px; color:rgba(244,238,226,.78); letter-spacing:.1em; margin-top:6px; }

/* 图文 */
.qz-txt{ padding:96px 0; }
.qz-txt__grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center; }
.qz-txt__copy h2{ font-size:clamp(23px,3vw,32px); margin-bottom:18px; }
.qz-txt__copy p{ font-size:15px; color:var(--ink-2); line-height:2.05; margin-bottom:14px; }
.qz-txt__fig img{ width:100%; height:360px; object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow); }

/* ================================================================
   P6 叉车 chache.html —— 图文对开 / 横四步 / 三卡就业场景
   ================================================================ */
.cc-open{ padding:96px 0; }
.cc-open__grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.cc-open__fig img{ width:100%; height:400px; object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow); }
.cc-open__copy h2{ font-size:clamp(23px,3vw,32px); margin-bottom:18px; }
.cc-open__copy p{ font-size:15px; color:var(--ink-2); line-height:2.05; margin-bottom:14px; }

/* 横四步（大数字顶置） */
.cc-steps{ background:var(--paper-2); padding:96px 0; }
.cc-steps__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.cc-step{ background:var(--paper-3); border:1px solid var(--line-soft); border-radius:var(--radius-lg); padding:26px 24px 28px; box-shadow:var(--shadow-sm); }
.cc-step .n{ font-family:var(--font-serif); font-size:38px; font-weight:700; color:var(--gold); line-height:1; margin-bottom:14px; }
.cc-step h4{ font-size:17px; margin-bottom:8px; }
.cc-step p{ font-size:13.5px; color:var(--ink-2); line-height:1.9; }

/* 三卡就业场景 */
.cc-jobs{ padding:96px 0; }
.cc-jobs__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.cc-job{ border-radius:var(--radius-lg); overflow:hidden; position:relative; aspect-ratio:3/3.4; box-shadow:var(--shadow-sm); }
.cc-job img{ width:100%; height:100%; object-fit:cover; transition:transform .7s ease; }
.cc-job:hover img{ transform:scale(1.06); }
.cc-job::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(25,21,16,0) 40%, rgba(25,21,16,.8) 100%); }
.cc-job__body{ position:absolute; left:18px; right:18px; bottom:16px; z-index:2; color:var(--paper-3); }
.cc-job__body h4{ font-size:17px; margin-bottom:6px; }
.cc-job__body p{ font-size:13px; color:rgba(244,238,226,.82); line-height:1.7; }

/* ================================================================
   P7 电力线路 dianlin.html —— 反向斜切 / 登杆时间轴 / 范围表 / 安全清单
   ================================================================ */
.dl-skew{ padding:96px 0; }
.dl-skew__grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:center; }
.dl-skew__copy{ padding:10px 56px 10px 0; }
.dl-skew__copy h2{ font-size:clamp(23px,3vw,32px); margin-bottom:18px; }
.dl-skew__copy p{ font-size:15px; color:var(--ink-2); line-height:2.05; margin-bottom:14px; }
.dl-skew__fig img{ width:100%; height:460px; object-fit:cover; clip-path:polygon(8% 0, 100% 0, 100% 100%, 0 100%); box-shadow:var(--shadow); }

/* 登杆流程时间轴（深色底，区别于浅色时间轴） */
.dl-tl{ background:var(--ink); color:var(--paper-3); padding:96px 0; }
.dl-tl .sec-head__title{ color:var(--paper-3); }
.dl-tl .sec-head__desc{ color:rgba(244,238,226,.7); }
.dl-tl .timeline{ max-width:880px; margin-inline:auto; }
.dl-tl .tl-node__time{ color:var(--gold); }
.dl-tl .tl-node__body{ background:rgba(244,238,226,.06); border-color:rgba(244,238,226,.14); }
.dl-tl .tl-node__body p{ color:rgba(244,238,226,.78); }
.dl-tl .tl-node__dot{ box-shadow:0 0 0 4px var(--ink); }
.dl-tl .tl-node__axis::before{ background:rgba(244,238,226,.25); }

/* 范围表 + 安全清单 */
.dl-tbl{ padding:96px 0; }
.dl-tbl__wrap{ overflow-x:auto; margin-bottom:40px; }
.dl-tbl .tbl{ min-width:600px; }
.dl-safe{ background:var(--paper-2); border-radius:var(--radius-lg); padding:30px 32px; }
.dl-safe h3{ font-size:19px; margin-bottom:16px; display:flex; align-items:center; gap:10px; }
.dl-safe h3 svg{ width:22px; height:22px; color:var(--danger); }
.dl-safe ul{ display:grid; grid-template-columns:1fr 1fr; gap:12px 26px; }
.dl-safe li{ display:flex; gap:10px; font-size:14px; color:var(--ink-2); line-height:1.8; }
.dl-safe li::before{ content:""; width:6px; height:6px; background:var(--danger); transform:rotate(45deg); flex:none; margin-top:9px; }

/* ============ 时间轴修正：每个 .tl-node 独立成行（本分片采用嵌套结构） ============ */
.timeline{ display:block; }
.timeline .tl-node{ display:grid; grid-template-columns:92px 24px 1fr; gap:0 14px; align-items:start; }
.timeline .tl-node__body{ margin-bottom:0; }
.ts-cards__lead{ max-width:760px; margin:-6px auto 28px; font-size:15px; color:var(--ink-2); line-height:2.05; text-align:center; }

/* ============ 响应式 1440 / 768 / 375 ============ */
@media (max-width:1100px){
  .dg-skew__grid,.ld-alt__row,.wx-offset__grid,.cc-open__grid,.dl-skew__grid,.qz-txt__grid,.pg-cta__inner{ grid-template-columns:1fr; gap:40px; }
  .dg-skew__fig img{ clip-path:none; height:340px; }
  .dg-skew__copy{ padding-left:0; }
  .dl-skew__fig{ order:-1; }
  .dl-skew__fig img{ clip-path:none; height:300px; }
  .dl-skew__copy{ padding-right:0; }
  .wx-offset__fig{ margin-top:0; }
  .wx-offset__copy{ padding-left:0; }
  .ld-alt__row--rev .ld-alt__fig{ order:0; }
  .dg-cards__grid,.ts-cards__grid,.cc-steps__grid,.wx-stats__grid,.qz-stats__grid{ grid-template-columns:1fr 1fr; }
  .wx-offset{ padding:80px 0; }
  .timeline .tl-node{ grid-template-columns:72px 20px 1fr; }
}
@media (max-width:720px){
  .pg-hero{ padding:96px 0 52px; }
  .dg-faq__list,.wx-grid__2x2,.wx-chk__list,.qz-duo__grid,.dl-safe ul{ grid-template-columns:1fr; }
  .dg-cards__grid,.ts-cards__grid,.cc-jobs__grid,.cc-steps__grid,.wx-stats__grid,.qz-stats__grid{ grid-template-columns:1fr; }
  .pg-cta__inner{ gap:30px; }
  .qz-band{ height:auto; min-height:420px; }
  .dg-band{ height:auto; min-height:360px; }
  .timeline .tl-node{ grid-template-columns:56px 18px 1fr; }
}