/* ================================================================
   mhpn.cn · 城市服务营销长页分片私有样式（pages-chengshi1.css）
   覆盖页面：sanmenxia / hubin / shanzhou / mianchi / lushi /
             yima / lingbao / yicheng / zhumadian
   风格：画册高级风 · 米白 + 深棕 + 墨黑（只引用 base.css 令牌）
   约束：禁止内联样式；本文件为本分片唯一新增 css；不改动 base.css
   ================================================================ */

/* ============ 一、内页骨架：面包屑条 / 页首横幅 / CTA / 相关链接 ============ */

/* 面包屑浅色条 */
.cs1-crumbwrap{ background:var(--paper); border-bottom:1px solid var(--line-soft); }
.cs1-crumbwrap .crumb{ padding:14px 0; }

/* 页首横幅 A：全屏深色城市大图（sanmenxia / shanzhou / lushi / lingbao / zhumadian 用） */
.cs1-hero{
  position:relative; padding:120px 0 96px; overflow:hidden;
  background:var(--ink); color:var(--paper-3);
}
.cs1-hero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.34; }
.cs1-hero__inner{ position:relative; z-index:2; max-width:820px; }
.cs1-hero__kicker{
  display:inline-flex; align-items:center; gap:12px;
  color:var(--gold); font-size:13px; letter-spacing:.4em; margin-bottom:18px;
}
.cs1-hero__kicker::before{ content:""; width:34px; height:1px; background:var(--gold); }
.cs1-hero h1{ font-size:clamp(28px,4.2vw,48px); line-height:1.28; }
.cs1-hero p{ margin-top:18px; max-width:680px; color:rgba(244,238,226,.78); font-size:15.5px; line-height:2; }
.cs1-hero__actions{ margin-top:30px; display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.cs1-hero__tel{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--gold); font-family:var(--font-serif); font-size:17px; letter-spacing:.04em;
}
.cs1-hero__tel svg{ width:18px; height:18px; }

/* 页首横幅 B：浅色左右分栏（hubin / mianchi / yima / yicheng 用） */
.cs1-split{ background:var(--paper-3); border-bottom:1px solid var(--line-soft); }
.cs1-split__inner{ display:grid; grid-template-columns:1.05fr 1fr; align-items:stretch; gap:0; }
.cs1-split__media{ position:relative; min-height:340px; }
.cs1-split__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cs1-split__body{ padding:72px 0 72px 56px; }
.cs1-split--rev .cs1-split__media{ order:2; }
.cs1-split--rev .cs1-split__body{ padding:72px 56px 72px 0; }
.cs1-split__kicker{
  display:inline-flex; align-items:center; gap:12px;
  color:var(--brown-3); font-size:13px; letter-spacing:.4em; margin-bottom:16px;
}
.cs1-split__kicker::before{ content:""; width:30px; height:1px; background:var(--gold); }
.cs1-split h1{ font-size:clamp(26px,3.4vw,42px); line-height:1.3; color:var(--ink); }
.cs1-split p{ margin-top:16px; color:var(--ink-2); font-size:15px; line-height:2; max-width:560px; }
.cs1-split__actions{ margin-top:28px; display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.cs1-split__tel{ display:inline-flex; align-items:center; gap:9px; color:var(--brown); font-family:var(--font-serif); font-size:16px; }
.cs1-split__tel svg{ width:17px; height:17px; }

/* 深棕 CTA 横条（统一收口） */
.cs1-cta{ background:var(--brown); color:var(--paper-3); }
.cs1-cta__inner{ display:flex; align-items:center; justify-content:space-between; gap:30px; padding:58px 0; flex-wrap:wrap; }
.cs1-cta h2{ color:var(--paper-3); font-size:clamp(22px,2.8vw,32px); margin-bottom:8px; }
.cs1-cta p{ color:rgba(244,238,226,.82); font-size:15px; }

/* 相关推荐链接条 */
.cs1-related{ background:var(--paper-2); }
.cs1-related__inner{ padding:56px 0; }
.cs1-related__title{ font-size:15px; letter-spacing:.22em; color:var(--brown); margin-bottom:20px; display:flex; align-items:center; gap:12px; }
.cs1-related__title::before{ content:""; width:22px; height:1px; background:var(--gold); }
.cs1-related__links{ display:flex; flex-wrap:wrap; gap:12px; }
.cs1-related__links a{
  padding:9px 18px; border:1px solid var(--line); border-radius:999px;
  background:var(--paper-3); font-size:13.5px; color:var(--brown-2);
  transition:all var(--transition);
}
.cs1-related__links a:hover{ background:var(--brown); color:var(--paper-3); border-color:var(--brown); transform:translateY(-2px); }

/* 正文段落工具类 */
.cs1-lead{ font-size:15px; color:var(--ink-2); line-height:2.05; margin-bottom:14px; }

/* ============ 二、图文双栏（左右可互换） ============ */
.cs1-twocol{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.cs1-twocol--rev > .cs1-twocol__media{ order:-1; }
.cs1-twocol h2{ font-size:clamp(23px,2.8vw,32px); margin-bottom:18px; }
.cs1-twocol p{ font-size:15px; color:var(--ink-2); margin-bottom:14px; line-height:2; }
.cs1-twocol ul{ display:grid; gap:9px; margin:6px 0 18px; }
.cs1-twocol ul li{ font-size:14px; color:var(--ink-2); display:flex; gap:10px; }
.cs1-twocol ul li::before{ content:""; flex:none; width:5px; height:5px; background:var(--gold); transform:rotate(45deg); margin-top:11px; }
.cs1-twocol__media img{ width:100%; border-radius:var(--radius-lg); box-shadow:var(--shadow); }
.cs1-twocol__media figcaption{ margin-top:10px; font-size:12.5px; color:var(--brown-3); letter-spacing:.1em; }

/* ============ 三、深色图文信息条（banner 底图） ============ */
.cs1-band{ position:relative; overflow:hidden; background:var(--ink); color:var(--paper-3); }
.cs1-band__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.2; }
.cs1-band__inner{ position:relative; z-index:2; padding:92px 0; display:grid; grid-template-columns:1.2fr 1fr; gap:56px; align-items:center; }
.cs1-band h2{ color:var(--paper-3); font-size:clamp(24px,3vw,36px); margin-bottom:18px; }
.cs1-band p{ color:rgba(244,238,226,.76); font-size:15px; line-height:2; margin-bottom:14px; }
.cs1-band ul{ display:grid; gap:12px; margin-top:20px; }
.cs1-band li{ display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:rgba(244,238,226,.9); }
.cs1-band li svg{ flex:none; width:18px; height:18px; margin-top:3px; color:var(--gold); }

/* ============ 四、本地产业卡片（3列 / 2列错落） ============ */
.cs1-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.cs1-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);
}
.cs1-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.cs1-card img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.cs1-card__body{ padding:22px 22px 26px; }
.cs1-card__tag{ display:inline-block; font-size:11.5px; letter-spacing:.2em; color:var(--brown); background:var(--paper-2); border:1px solid var(--line); padding:3px 11px; border-radius:999px; margin-bottom:12px; }
.cs1-card h3{ font-size:17.5px; margin-bottom:8px; }
.cs1-card p{ font-size:13.8px; color:var(--ink-2); line-height:1.95; }

/* 错落宫格（bento）：大小块混排 */
.cs1-bento{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.cs1-bento__item{
  position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform var(--transition), box-shadow var(--transition);
}
.cs1-bento__item:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.cs1-bento__item img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.cs1-bento__item--tall img{ aspect-ratio:auto; height:100%; min-height:320px; }
.cs1-bento__cap{ position:absolute; left:0; right:0; bottom:0; padding:18px 20px; background:linear-gradient(transparent, rgba(25,21,16,.84)); color:var(--paper-3); }
.cs1-bento__cap h3{ font-size:16.5px; color:var(--paper-3); }
.cs1-bento__cap p{ font-size:12.8px; color:rgba(244,238,226,.78); margin-top:3px; }

/* ============ 五、表格 / FAQ / 数字条 ============ */
.cs1-tblwrap{ overflow-x:auto; box-shadow:var(--shadow-sm); border-radius:var(--radius-lg); }
.cs1-tblwrap .tbl{ min-width:680px; }
.cs1-tblwrap td:first-child{ font-weight:600; white-space:nowrap; }

.cs1-faq{ display:grid; grid-template-columns:1fr 1fr; gap:16px 40px; }
.cs1-faq__item{ border-top:1px solid var(--line); padding:20px 4px; }
.cs1-faq__item h3{ font-size:16px; margin-bottom:8px; display:flex; gap:10px; }
.cs1-faq__item h3 .q{ flex:none; color:var(--gold); font-family:var(--font-serif); }
.cs1-faq__item p{ font-size:14px; color:var(--ink-2); line-height:1.95; }

.cs1-statrow{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }

/* 区县导航链接矩阵（市总页用） */
.cs1-countygrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.cs1-county{
  display:flex; flex-direction:column; background:var(--paper-3);
  border:1px solid var(--line-soft); border-radius:var(--radius-lg); overflow:hidden;
  transition:transform var(--transition), box-shadow var(--transition);
}
.cs1-county:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.cs1-county img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.cs1-county__body{ padding:18px 20px 22px; }
.cs1-county__body h3{ font-size:16.5px; margin-bottom:6px; display:flex; align-items:center; justify-content:space-between; }
.cs1-county__body h3 .arr{ color:var(--gold); transition:transform var(--transition); }
.cs1-county:hover .cs1-county__body h3 .arr{ transform:translateX(4px); }
.cs1-county__body p{ font-size:13.3px; color:var(--ink-2); line-height:1.9; }

/* 步骤/时间轴在 base 已有，这里补一个竖排编号步骤 */
.cs1-proc{ display:grid; gap:0; max-width:880px; }
.cs1-proc__step{ display:grid; grid-template-columns:88px 1fr; gap:22px; padding:24px 0; border-bottom:1px solid var(--line-soft); }
.cs1-proc__step:last-child{ border-bottom:0; }
.cs1-proc__no{ font-family:var(--font-serif); font-size:34px; color:var(--gold); line-height:1; }
.cs1-proc__body h3{ font-size:17px; margin-bottom:6px; }
.cs1-proc__body p{ font-size:14px; color:var(--ink-2); line-height:1.95; }

/* 表格列宽工具类（替代 <col style>） */
.cw16{width:16%}.cw20{width:20%}.cw22{width:22%}.cw24{width:24%}
.cw26{width:26%}.cw28{width:28%}.cw30{width:30%}.cw32{width:32%}
.cw34{width:34%}.cw36{width:36%}.cw38{width:38%}.cw40{width:40%}
.cw42{width:42%}.cw44{width:44%}.cw46{width:46%}.cw72{width:72%}

/* chips 行 */
.cs1-chiprow{ margin-top:22px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }

/* 表单卡片（本页 js-form） */
.cs1-formcard{ background:var(--paper-3); border:1px solid var(--line-soft); border-radius:var(--radius-lg); padding:36px 34px; box-shadow:var(--shadow-sm); }
.cs1-formcard h3{ font-size:22px; margin-bottom:6px; }
.cs1-formcard .tip{ font-size:14px; color:var(--ink-2); margin-bottom:22px; }

/* ============ 六、响应式 ============ */
@media (max-width:1100px){
  .cs1-split__inner{ grid-template-columns:1fr; }
  .cs1-split__media{ min-height:260px; order:-1; }
  .cs1-split__body{ padding:48px 0; }
  .cs1-split--rev .cs1-split__media{ order:-1; }
  .cs1-split--rev .cs1-split__body{ padding:48px 0; }
  .cs1-twocol{ grid-template-columns:1fr; gap:36px; }
  .cs1-twocol--rev > .cs1-twocol__media{ order:0; }
  .cs1-band__inner{ grid-template-columns:1fr; gap:30px; padding:72px 0; }
  .cs1-cards{ grid-template-columns:1fr; }
  .cs1-countygrid{ grid-template-columns:repeat(2,1fr); }
  .cs1-bento{ grid-template-columns:1fr; }
  .cs1-bento__item--tall img{ min-height:240px; }
  .cs1-faq{ grid-template-columns:1fr; }
  .cs1-statrow{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .cs1-hero{ padding:88px 0 64px; }
  .cs1-countygrid{ grid-template-columns:1fr; }
  .cs1-statrow{ grid-template-columns:repeat(2,1fr); gap:16px; }
  .cs1-cta__inner{ padding:44px 0; }
  .cs1-proc__step{ grid-template-columns:56px 1fr; gap:16px; }
  .cs1-proc__no{ font-size:26px; }
  .cs1-formcard{ padding:28px 22px; }
}

/* ================================================================
   差异化重构追加（cs1- 新组件，仅供本分片 9 页轮换使用）
   ================================================================ */

/* 软提示横条（金棕左边线）——插在痛点与卖点之间 */
.cs1-note{
  display:flex; gap:16px; align-items:flex-start;
  background:var(--paper-2); border-left:3px solid var(--gold);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:18px 22px; margin:26px 0;
}
.cs1-note svg{ flex:none; width:20px; height:20px; color:var(--brown); margin-top:2px; }
.cs1-note p{ font-size:14px; color:var(--ink-2); line-height:1.9; margin:0; }
.cs1-note b{ color:var(--ink); }

/* 居中大字金句（serif）——段落间的视觉停顿 */
.cs1-quote{
  text-align:center; padding:44px 0 8px;
  font-family:var(--font-serif); font-size:clamp(20px,2.6vw,28px);
  color:var(--ink); line-height:1.7; max-width:820px; margin:0 auto;
}
.cs1-quote small{ display:block; margin-top:12px; font-family:var(--font-sans); font-size:13px; letter-spacing:.3em; color:var(--brown-3); }

/* 双列对照块（左右两张卡 + VS），区别于表格 */
.cs1-vs{ display:grid; grid-template-columns:1fr auto 1fr; gap:0; align-items:stretch; max-width:960px; margin:0 auto; }
.cs1-vs__col{ background:var(--paper-3); border:1px solid var(--line-soft); border-radius:var(--radius-lg); padding:28px 26px; box-shadow:var(--shadow-sm); }
.cs1-vs__col h3{ font-size:17px; margin-bottom:6px; display:flex; align-items:center; gap:10px; }
.cs1-vs__col h3 .dot{ width:9px; height:9px; border-radius:50%; background:var(--gold); }
.cs1-vs__col--alt h3 .dot{ background:var(--brown-3); }
.cs1-vs__col p{ font-size:13.8px; color:var(--ink-2); line-height:1.95; margin-top:8px; }
.cs1-vs__vs{ align-self:center; padding:0 18px; font-family:var(--font-serif); font-size:20px; color:var(--gold); }

/* 上下堆叠图文（区别于左右 cs1-twocol） */
.cs1-stack{ display:grid; gap:26px; }
.cs1-stack figure{ margin:0; }
.cs1-stack img{ width:100%; border-radius:var(--radius-lg); box-shadow:var(--shadow); }
.cs1-stack figcaption{ margin-top:10px; font-size:12.5px; color:var(--brown-3); letter-spacing:.1em; }
.cs1-stack h2{ font-size:clamp(22px,2.6vw,30px); margin:6px 0 14px; }
.cs1-stack p{ font-size:15px; color:var(--ink-2); line-height:2; margin-bottom:12px; }

@media (max-width:1100px){
  .cs1-vs{ grid-template-columns:1fr; gap:14px; }
  .cs1-vs__vs{ text-align:center; padding:4px 0; }
}