/* ============================================================
   豫工特种作业考证咨询网 · 行业化皮肤 skin.css
   内容：特种工行业配色落地 / 联系方式上浮 / 图标缩尺 /
        移动端吸底导航 / 长图约束
   说明：本文件在 base.css 与各页样式之后加载，用于覆盖旧视觉
   ============================================================ */

/* ---------- 1. 字体与标题：黑体加粗，贴合工程行业 ---------- */
:root{
  --font-h:'PingFang SC','Microsoft YaHei','Source Han Sans SC','Noto Sans SC','Helvetica Neue',sans-serif;
}
h1,h2,h3,h4{font-weight:800;letter-spacing:.01em}
h1{letter-spacing:.005em}
.hero h1{letter-spacing:0}
.brand-txt b{letter-spacing:.08em}
.idx-num,.hero-facts b,.steps-b .num,.foot-brand .logo{font-family:var(--font-h)}

/* ---------- 2. 顶部联系方式信息条 ---------- */
.site-header{padding:0}
.nav-wrap{padding:15px 0}
.site-header.scrolled{padding:0}
.site-header.scrolled .nav-wrap{padding:8px 0}
.topbar{
  background:rgba(13,33,54,.97);
  border-bottom:1px solid rgba(255,255,255,.1);
  --paper-2:#c6d4e2;--paper-3:#9db0c4;--line:rgba(201,161,92,.36);
  --bronze:#d3a85e;--bronze-l:#ecd094;--line-2:rgba(255,255,255,.12);
}
.topbar-in{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:36px;padding:5px 0;
}
.topbar-note{
  display:flex;align-items:center;gap:8px;min-width:0;
  font-size:12.5px;color:var(--paper-2);letter-spacing:.04em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.topbar-note svg{width:14px;height:14px;flex-shrink:0;color:var(--bronze)}
.topbar-note b{color:var(--bronze-l);font-weight:700}
.topbar-contact{display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:nowrap}
.topbar-contact a,.topbar-contact button{
  display:inline-flex;align-items:center;gap:6px;padding:4px 13px;border-radius:999px;
  font-size:12.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap;cursor:pointer;
  border:1px solid transparent;background:none;transition:transform .3s var(--ease),filter .3s;
}
.topbar-contact a:hover,.topbar-contact button:hover{transform:translateY(-2px);filter:brightness(1.08)}
.topbar-contact svg{width:13px;height:13px;flex-shrink:0}
.tb-tel{background:var(--grad-red);color:#ffffff;box-shadow:0 4px 12px rgba(185,58,44,.35)}
.tb-wx{background:rgba(31,138,91,.18);border-color:rgba(31,138,91,.45)!important;color:#8fe0b6}
.tb-mail{background:rgba(183,140,64,.14);border-color:var(--line)!important;color:var(--bronze-l)}

/* ---------- 3. 图标缩尺：与标题、正文成比例 ---------- */
.quick-item .qi-ico{width:40px;height:40px;border-radius:11px}
.quick-item .qi-ico svg{width:19px;height:19px}
.adv-item .em{width:38px;height:38px;border-radius:11px}
.adv-item .em svg{width:17px;height:17px}
.t-card-b .emblem{width:44px;height:44px;border-radius:12px}
.t-card-b .emblem svg{width:22px;height:22px}
.t-card-c .ico{width:32px;height:32px;margin-bottom:14px}
.t-card-c .ico svg{width:26px;height:26px}
.steps-b .num{width:44px;height:44px;font-size:18px}
.cert-flow .cf-ico{width:40px;height:40px}
.cert-flow .cf-ico svg{width:18px;height:18px}
.check-cell .ok-ico{width:32px;height:32px;border-radius:9px}
.check-cell .ok-ico svg{width:16px;height:16px}
.channel-row .ch-ico{width:36px;height:36px;border-radius:10px}
.channel-row .ch-ico svg{width:17px;height:17px}
.apply-mini .am .am-ico{width:36px;height:36px;border-radius:10px}
.apply-mini .am .am-ico svg{width:17px;height:17px}
.trade-group .tg-ico{width:34px;height:34px;border-radius:9px}
.trade-group .tg-ico svg{width:17px;height:17px}
.bi-item .bi-ico{width:38px;height:38px;border-radius:10px}
.bi-item .bi-ico svg{width:17px;height:17px}
.contact-card .cc-ico{width:42px;height:42px;border-radius:11px}
.contact-card .cc-ico svg{width:19px;height:19px}
.mile .md{width:38px;height:38px;font-size:13px}

/* ---------- 4. 按钮与卡片：从复古圆润改为工程直角 ---------- */
.btn{border-radius:8px}
.btn-sm{border-radius:6px}
.to-top{border-radius:8px}
.brand .logo{border-radius:9px}

/* ---------- 5. 长图约束：任何长图不再撑破版式 ---------- */
.prose img,
.content img,
.article-body img,
.article-body .content img,
.rich-text img{
  width:100%;
  max-height:none;
  aspect-ratio:16/10;
  object-fit:cover;
  border-radius:12px;
  margin:18px 0;
}
.page-hero .bg,.hero .hero-bg{aspect-ratio:auto;max-height:none;margin:0;border-radius:0}

/* ---------- 6. 联系方式面板（替代原表单） ---------- */
.contact-panel{
  border:1px solid var(--line);border-radius:12px;padding:26px;
  background:linear-gradient(120deg,rgba(183,140,64,.07),rgba(185,58,44,.05) 60%,transparent);
}
.cp-lead{font-size:13.5px;color:var(--paper-2);margin-bottom:18px}
.cp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cp-grid--stack{grid-template-columns:1fr;gap:11px}
.cp-item{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  padding:16px 18px;border-radius:10px;border:1px solid var(--line-2);
  background:#fff;transition:.35s var(--ease);cursor:pointer;text-align:left;
}
.cp-item:hover{transform:translateY(-3px);border-color:var(--bronze);background:rgba(183,140,64,.07)}
.cp-item .cp-ico{width:22px;height:22px;color:var(--bronze-l);margin-bottom:6px}
.cp-item b{font-size:16px;color:var(--hd);letter-spacing:.02em}
.cp-item small{font-size:12px;color:var(--paper-3)}
.cp-tel b{color:#a93326}
.cp-mail b{color:var(--bronze-l)}

/* ---------- 7. 移动端吸底导航 ---------- */
.m-tabbar{display:none}
@media (max-width:1024px){
  .m-tabbar{
    display:grid;grid-template-columns:repeat(4,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:940;
    background:rgba(255,255,255,.98);border-top:1px solid var(--line-2);
    box-shadow:0 -8px 28px rgba(16,38,60,.1);
    padding:4px 0 calc(4px + env(safe-area-inset-bottom));
    backdrop-filter:blur(12px);
  }
  .m-tabbar a,.m-tabbar button{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    padding:6px 2px;background:none;border:none;cursor:pointer;
    font-size:11px;color:var(--paper-2);letter-spacing:.02em;
  }
  .m-tabbar a:active,.m-tabbar button:active{background:rgba(183,140,64,.08)}
  .m-tabbar svg{width:20px;height:20px}
  .m-tabbar .mt-tel{color:#a93326}
  .m-tabbar .mt-tel svg{color:#a93326}
  .m-tabbar .mt-wx svg{color:#15784d}
  .m-tabbar .mt-mail svg{color:var(--bronze-l)}
  .m-tabbar .mt-menu svg{color:var(--paper)}
  body{padding-bottom:62px}
  .float-tel{display:none}
  .to-top{bottom:78px}
}
@media (max-width:640px){
  .topbar-in{min-height:34px;gap:10px}
  .topbar-note{font-size:11.5px}
  .topbar-contact{gap:6px;overflow-x:auto;scrollbar-width:none}
  .topbar-contact::-webkit-scrollbar{display:none}
  .topbar-contact a,.topbar-contact button{padding:4px 10px;font-size:11.5px}
  .cp-grid{grid-template-columns:1fr}
  .contact-panel{padding:18px}
}

/* ---------- 8. 微信复制提示 ---------- */
.wx-toast{
  position:fixed;left:50%;bottom:90px;transform:translate(-50%,14px);
  background:rgba(31,138,91,.96);color:#fff;font-size:13.5px;font-weight:600;
  padding:10px 22px;border-radius:999px;z-index:999;opacity:0;visibility:hidden;
  transition:.32s var(--ease);box-shadow:0 12px 28px rgba(0,0,0,.4);
}
.wx-toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* ---------- 9. 页脚五列（新增服务地区列） ---------- */
.foot-grid{grid-template-columns:1.35fr .95fr .95fr .95fr 1.15fr}
@media (max-width:1024px){
  .foot-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .foot-grid{grid-template-columns:1fr}
}

/* ---------- 10. 河南 18 地市宫格 ---------- */
.dishi-top{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:16px}
.dishi-main{
  position:relative;display:block;padding:26px 24px 22px;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(140deg,rgba(183,140,64,.12),rgba(185,58,44,.06) 55%,transparent 80%),#fff;
  transition:.4s var(--ease);
}
.dishi-main:hover{transform:translateY(-4px);border-color:var(--bronze);box-shadow:var(--shadow)}
.dishi-main .dm-tag{
  position:absolute;top:0;right:0;padding:5px 14px;font-size:11.5px;font-weight:700;letter-spacing:.08em;
  background:var(--grad-bronze);color:#2a1d08;border-radius:0 12px 0 10px;
}
.dishi-main h3{font-size:21px;color:var(--hd);margin-bottom:6px}
.dishi-main h3 em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--bronze-l);margin-left:8px;letter-spacing:.06em}
.dishi-main p{font-size:13px;color:var(--paper-2);margin-bottom:12px}
.dishi-main ul{display:flex;flex-wrap:wrap;gap:6px}
.dishi-main li{font-size:11.5px;color:var(--paper-2);padding:3px 9px;border-radius:999px;background:rgba(16,38,60,.05);border:1px solid var(--line-2)}
.dishi-list{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}
.dishi-cell{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:13px 15px;border:1px solid var(--line-2);border-radius:9px;
  background:#fff;transition:.32s var(--ease);
}
.dishi-cell:hover{border-color:var(--bronze);background:rgba(183,140,64,.07);transform:translateY(-2px)}
.dishi-cell b{font-size:14.5px;color:var(--paper);font-weight:700}
.dishi-cell span{font-size:11px;color:var(--paper-3)}
.dishi-cell svg{width:13px;height:13px;color:var(--bronze);flex-shrink:0}
@media (max-width:900px){
  .dishi-top{grid-template-columns:1fr}
  .dishi-list{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .dishi-list{grid-template-columns:1fr 1fr;gap:8px}
  .dishi-cell{padding:11px 12px}
  .dishi-cell b{font-size:13.5px}
}


/* ================= 页脚 18 地市链接带 ================= */
.foot-cities{
  display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;
  padding:22px 0 20px;margin-bottom:24px;border-bottom:1px solid var(--line-2);
}
.foot-cities .fc-title{
  font-size:12px;letter-spacing:.16em;color:var(--bronze-l);flex-shrink:0;padding-top:6px;
}
.foot-cities .fc-links{display:flex;flex-wrap:wrap;gap:6px}
.foot-cities a{
  font-size:12.5px;color:var(--paper-2);padding:5px 11px;border-radius:6px;
  border:1px solid transparent;transition:.28s var(--ease);line-height:1.4;
}
.foot-cities a:hover{color:var(--bronze-l);border-color:var(--line);background:rgba(183,140,64,.07)}
.foot-cities a:nth-child(-n+2){color:var(--hd);border-color:var(--line-2);font-weight:600}
@media (max-width:640px){
  .foot-cities{gap:10px;padding:18px 0}
  .foot-cities .fc-links{gap:4px}
  .foot-cities a{font-size:12px;padding:4px 8px}
}

/* ================= 材料清单网格 ================= */
.check-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:900px){.check-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.check-grid{grid-template-columns:1fr}}

/* ================= 联系方式卡片（行内链接改 span 后保持一致） ================= */
.contact-card .cc-val{color:var(--bronze-l);font-size:15px;font-weight:600;display:block;margin-top:6px}

/* ================= 行内样式提取后的工具类 ================= */
.u-g3{grid-template-columns:repeat(3,1fr)}
.u-tal{text-align:left}
.u-pt0{padding-top:0}
.u-pt10{padding-top:10px}
.u-pt20{padding-top:20px}
.u-pt40{padding-top:40px}
.u-pt50{padding-top:50px}
.u-pt60{padding-top:60px}
.u-pt130{padding-top:130px}
.u-mt10{margin-top:10px}
.u-mt16{margin-top:16px}
.u-mt18{margin-top:18px}
.u-mt20{margin-top:20px}
.u-mt22{margin-top:22px}
.u-mt30{margin-top:30px}
.u-mb14{margin-bottom:14px}
.u-ml12{margin-left:12px}
.u-pl34{padding-left:34px}
.u-c1{columns:1}
.u-scroll{overflow:auto}
.u-flex14{display:flex;gap:14px;flex-wrap:wrap}
.u-flex10-mt20{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.u-center-mt26{text-align:center;margin-top:26px}
.u-center-mt28{text-align:center;margin-top:28px}
.u-center-mt30{text-align:center;margin-top:30px}
.u-center-mt32{text-align:center;margin-top:32px}
.u-center-mt34{text-align:center;margin-top:34px}
.u-note-mid{color:var(--paper-3);max-width:760px;margin:0 auto}
.u-mt16-note{margin-top:16px;font-size:13px;color:var(--paper-3)}
.u-mt14-note{margin-top:14px;font-size:13px;color:var(--paper-3)}
.u-card-bronze{margin-top:16px;border-color:rgba(176,124,50,.35);background:linear-gradient(130deg,rgba(183,140,64,.1),rgba(255,255,255,.6) 60%)}
.u-stroke{-webkit-text-stroke:1.5px var(--bronze)}
@media (max-width:900px){
  .u-g3{grid-template-columns:1fr 1fr}
  .u-pt130{padding-top:96px}
}
@media (max-width:640px){
  .u-g3{grid-template-columns:1fr}
  .u-pt130{padding-top:76px}
  .u-flex14,.u-flex10-mt20{gap:10px}
}
.n-card--pad{padding:10px;margin-bottom:10px}

/* ================= 顶部联系方式条：固定置顶，导航紧随其下 ================= */
:root{--topbar-h:40px}
body{padding-top:var(--topbar-h)}
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:960;height:var(--topbar-h);
  background:rgba(13,33,54,.98);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar .topbar-in{height:100%;min-height:0;padding:0}
.site-header{inset:var(--topbar-h) 0 auto 0}
.page-hero{padding:112px 0 80px}
.mobile-menu{padding-top:132px}
@media (max-width:1024px){
  :root{--topbar-h:38px}
  .topbar-note{display:none}
  .topbar-contact{width:100%;gap:5px;justify-content:space-between;overflow:visible}
  .topbar-contact a,.topbar-contact button{flex:1;justify-content:center;padding:4px 6px;font-size:11px;letter-spacing:0}
  .mobile-menu{padding-top:112px}
  .page-hero{padding:88px 0 56px}
  .hero-inner{padding:120px 0 70px}
}
@media (max-width:380px){
  .topbar-contact a,.topbar-contact button{font-size:10.5px;padding:4px 2px;gap:3px}
  .topbar-contact svg{width:12px;height:12px}
}

/* ================= 移动端渐入方向改为纵向，避免横向溢出 ================= */
.split-a{min-width:0}
.split-a>*{min-width:0}
@media (max-width:1024px){
  .reveal-l,.reveal-r{transform:translateY(30px)}
  .split-a{gap:26px}
}

@media (max-width:640px){
  .page-hero h1{font-size:27px;line-height:1.28}
  .hero h1{font-size:30px;line-height:1.24}
}
@media (max-width:380px){
  .page-hero h1{font-size:25px}
}

@media (max-width:640px){
  .t-card .thumb{aspect-ratio:16/9}
  .t-card .no{font-size:26px;left:12px;bottom:8px}
  .t-card .body{padding:16px 16px 18px}
  .t-card h3{font-size:17px}
}

@media (max-width:1024px){
  .topbar-contact{justify-content:center;gap:26px}
  .topbar-contact a,.topbar-contact button{flex:0 0 auto}
}
@media (max-width:640px){
  .topbar-contact{gap:0}
  .topbar-contact a,.topbar-contact button{flex:1 1 0;min-width:0;justify-content:center;padding:4px 2px;font-size:10.5px}
}

@media (max-width:640px){
  .topbar-contact{gap:4px;padding:0 2px}
  .topbar-contact a,.topbar-contact button{font-size:10px;gap:4px;padding:0 2px;letter-spacing:-.2px;white-space:nowrap;text-decoration:none}
  .topbar-contact a:last-child{text-decoration:none}
  .topbar-contact svg{width:12px;height:12px}
  .page-hero h1{font-size:26px;text-wrap:balance}
}

/* ================= 地市页首屏移动端 ================= */
@media (max-width:640px){
  .city-hero{padding:104px 0 54px}
  .city-hero h1{font-size:26px;line-height:1.32;text-wrap:balance;margin-bottom:14px}
  .city-hero .city-mark{font-size:64px;top:4px;right:2px;opacity:.26}
  .city-hero .lead{font-size:13.5px;line-height:1.7}
  .city-hero .breadcrumb{margin-bottom:26px}
  .city-hero .city-tags{gap:8px}
  .city-hero .city-tags span{font-size:11.5px;padding:5px 9px}
}
@media (max-width:380px){
  .city-hero h1{font-size:24px}
  .city-hero .city-mark{font-size:56px}
}

/* 手机端顶部联系方式改为两行，避免挤压 */
@media (max-width:640px){
  :root{--topbar-h:54px}
  .topbar .topbar-in{display:flex;flex-wrap:wrap;align-content:center;justify-content:center;row-gap:3px;column-gap:12px}
  .topbar-contact{width:auto;flex-wrap:wrap;justify-content:center;gap:3px 12px}
  .topbar-contact a,.topbar-contact button{flex:0 0 auto;font-size:11px;padding:0;gap:4px;letter-spacing:0}
  .topbar-contact a:last-child{flex:1 0 100%;justify-content:center}
}
@media (max-width:380px){
  .topbar-contact a,.topbar-contact button{font-size:10.5px}
  .topbar .topbar-in{column-gap:9px}
}