/* ============================================================
   css/qu-songxian.css —— 洛阳嵩县区域服务页（键盘复古风）
   本页独有：hero 异形裁切 polygon(0 0, 100% 0, 100% 92%, 88% 96%, 74% 91%, 60% 97%, 46% 92%, 32% 97%, 18% 92%, 4% 96%, 0 93%) / 配色侧重 pale
   ============================================================ */
:root{
  --clip-hero: polygon(0 0, 100% 0, 100% 92%, 88% 96%, 74% 91%, 60% 97%, 46% 92%, 32% 97%, 18% 92%, 4% 96%, 0 93%);
  --clip-cta: polygon(0 8%, 100% 0, 100% 100%, 0 100%);
  --clip-case: polygon(0 0, 100% 0, 98% 100%, 2% 100%);
}

/* ===== Hero：异形柔化裁切 ===== */
.rg-hero{
  margin-top: var(--nav-h);
  position: relative;
  background:
    linear-gradient(100deg, rgba(28,26,23,.86) 0%, rgba(28,26,23,.58) 48%, rgba(28,26,23,.28) 100%),
    url(../images/banner-quyu.jpg) center / cover no-repeat;
  clip-path: var(--clip-hero);
}
.rg-hero .wrap{ padding: 84px 24px 136px; }
.crumb-hero{ color: rgba(242,232,213,.78); margin-bottom: 18px; }
.crumb-hero a{ color: rgba(242,232,213,.78); }
.crumb-hero a:hover{ color: var(--tan); }
.hero-tag{ margin-bottom: 18px; }
.rg-hero h1{
  font-size: 46px; color: var(--paper); letter-spacing: 3px; margin-bottom: 18px;
  text-shadow: 0 2px 14px rgba(0,0,0,.4);
}
.rg-hero-sub{ max-width: 660px; font-size: 16.5px; color: rgba(242,232,213,.9); margin-bottom: 32px; line-height: 1.9; }
.rg-hero-btns{ display: flex; gap: 14px; flex-wrap: wrap; }
.rg-hero .btn-ghost{ color: var(--paper); border-color: rgba(242,232,213,.55); }
.rg-hero .btn-ghost:hover{ color: var(--paper); border-color: var(--tan); transform: translateY(-2px); }

/* ===== 区块基元与配色侧重（theme-*） ===== */
.sec{ padding: 74px 0; }
.sec-a{ background: var(--paper); }
.theme-warm .sec-b{ background: var(--paper-3); }
.theme-pale .sec-b{ background: var(--paper-2); }
.theme-ink .sec-b{ background: var(--ink); color: rgba(242,232,213,.88); }
.theme-ink .sec-b .need-tags .keycap,
.theme-ink .sec-b .online-list li{ background: var(--ink-2); border-color: rgba(242,232,213,.25); color: rgba(242,232,213,.85); }
.theme-ink .sec-b a{ color: var(--tan); }
.theme-band .sec-b{ background: var(--brown); color: rgba(242,232,213,.92); }
.theme-band .sec-b .need-tags .keycap,
.theme-band .sec-b .online-list li{ background: var(--brown-2); border-color: rgba(242,232,213,.3); color: rgba(242,232,213,.9); }
.sec-b .sec-kicker{ color: var(--tan); }
.sec-head{ margin-bottom: 28px; }
.sec-kicker{ font-family: var(--font-mono); font-size: 12px; letter-spacing: 3px; color: var(--brown-3); margin-bottom: 8px; }
.sec h2{ font-size: 30px; margin-bottom: 12px; }
.sec-lead{ font-size: 15.5px; max-width: 780px; }
.sec p{ margin-bottom: 14px; }
.svc-more{ font-family: var(--font-mono); font-size: 12.5px; color: var(--brown-3); }
.theme-ink .svc-more, .theme-band .svc-more{ color: var(--tan); }

/* ===== 区位概况（竖排标签 + 图文） ===== */
.loc-wrap{ position: relative; }
.side-tag{
  position: absolute; left: -4px; top: 6px;
  writing-mode: vertical-rl; font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 5px; color: var(--brown-3);
  border-left: 2px solid var(--brown-3); padding: 6px 0 6px 10px;
}
.loc-grid{ display: grid; grid-template-columns: 1.35fr 1fr; gap: 44px; align-items: center; }
.loc-fig{ margin: 0; }
.loc-img{ border-radius: var(--r-m); box-shadow: var(--shadow); width: 100%; height: auto; }
.loc-fig figcaption{ font-size: 12.5px; color: var(--brown-3); margin-top: 8px; }
.loc-more{ color: var(--brown-2); }

/* ===== 本地服务：键帽卡片 ===== */
.kv-keys{ display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.kv-keys .svc-item{
  background: var(--paper-2); border: 1px solid var(--line-2); border-radius: 12px;
  padding: 22px 22px 18px; box-shadow: 0 5px 0 var(--line-2);
}
.kv-keys .svc-item b{ display: block; font-family: var(--font-head); font-size: 18px; color: var(--brown-2); margin-bottom: 8px; }
.kv-keys .svc-item p{ font-size: 14px; margin-bottom: 8px; }

/* ===== 本地服务：印章卡片 ===== */
.stamp-cards{ display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
.stamp-card{
  position: relative; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-m); padding: 26px 22px 18px 78px; box-shadow: var(--shadow-sm);
}
.stamp-no{
  position: absolute; left: 18px; top: 24px; width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--brown-3); color: var(--brown-2);
  font-family: var(--font-mono); font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.stamp-card b{ display: block; font-family: var(--font-head); font-size: 18px; color: var(--brown-2); margin-bottom: 8px; }
.stamp-card p{ font-size: 14px; margin-bottom: 8px; }

/* ===== 本地服务：对照表 ===== */
.svc-table{ table-layout: fixed; }
.svc-table .w1{ width: 22%; }
.svc-table .w2{ width: 53%; }
.svc-table .w3{ width: 25%; }
.svc-table th, .svc-table td{ font-size: 14px; }
.svc-table td a{ color: var(--brown-3); }

/* ===== 时间轴（服务流程 / 服务四项） ===== */
.tl{ }
.tl-row{ display: grid; grid-template-columns: 56px 26px 1fr; }
.tl-no{ font-family: var(--font-mono); color: var(--brown-3); text-align: right; padding-top: 2px; font-size: 14px; }
.tl-axis{ position: relative; }
.tl-axis::before{ content: ""; position: absolute; left: 50%; top: 8px; bottom: -4px; width: 2px; background: var(--line-2); transform: translateX(-50%); }
.tl-row:last-child .tl-axis::before{ display: none; }
.tl-axis::after{ content: ""; position: absolute; left: 50%; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--brown-3); transform: translateX(-50%); }
.tl-body{ padding: 0 0 26px 16px; }
.tl-body b{ display: block; font-family: var(--font-head); font-size: 17px; color: var(--brown-2); margin-bottom: 4px; }
.tl-body p{ font-size: 14px; margin: 0; }
.tl-body .svc-more{ display: inline-block; margin-top: 6px; }

/* ===== 本地服务：错位图文 ===== */
.offset-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.off-img img{ border-radius: var(--r-m); box-shadow: var(--shadow); width: 100%; height: auto; }
.off-text{ margin: 0; }
.off-text li{ list-style: none; border-bottom: 1px dashed var(--line-2); padding: 12px 0; }
.off-text li b{ display: block; font-family: var(--font-head); font-size: 17px; color: var(--brown-2); }
.off-text li p{ font-size: 14px; margin: 0; }
.off-text .svc-off-title{ font-family: var(--font-mono); letter-spacing: 3px; color: var(--brown-3); border-bottom: 2px solid var(--brown-3); }

/* ===== 需求区块 ===== */
.need-lead{ max-width: 860px; }
.need-tags{ display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.need-more{ color: var(--brown-2); max-width: 860px; }

/* ===== 上门响应 ===== */
.online-list{ display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin: 22px 0; }
.online-list li{
  border: 1px dashed var(--line-2); border-radius: 10px; padding: 16px 18px; font-size: 14px; list-style: none;
}

/* ===== 案例 ===== */
.case-wrap{ display: grid; grid-template-columns: 1fr 1.2fr; gap: 30px; align-items: center; }
.case-fig{ margin: 0; }
.case-img{ width: 100%; height: auto; border-radius: var(--r-m); box-shadow: var(--shadow); clip-path: var(--clip-case); }
.case-box{
  background: var(--paper-2); border-left: 4px solid var(--brown-3);
  border-radius: 0 12px 12px 0; padding: 24px 28px;
}
.theme-ink .case-box{ background: var(--ink-2); }
.theme-band .case-box{ background: var(--brown-2); }
.case-link{ font-size: 13.5px; color: var(--brown-3); }

/* ===== 政策提示 ===== */
.policy-box{
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-m);
  padding: 24px 28px; max-width: 900px;
}
.theme-ink .policy-box{ background: var(--ink-2); }
.theme-band .policy-box{ background: var(--brown-2); }

/* ===== FAQ ===== */
.faq-item{ border: 1px solid var(--line-2); border-radius: 10px; margin-bottom: 12px; background: var(--paper); }
.theme-ink .faq-item{ background: var(--ink-2); border-color: rgba(242,232,213,.2); }
.theme-band .faq-item{ background: var(--brown-2); border-color: rgba(242,232,213,.25); }
.faq-item summary{
  cursor: pointer; padding: 16px 44px 16px 20px; font-weight: 700;
  font-family: var(--font-head); font-size: 15.5px; list-style: none; position: relative;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{
  content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 20px; color: var(--brown-3);
}
.faq-item[open] summary::after{ content: "–"; }
.faq-a{ padding: 0 20px 16px; font-size: 14.5px; line-height: 1.9; opacity: .92; }

/* ===== 底部 CTA（异形裁切） ===== */
.sec-cta{
  background: var(--ink); color: var(--paper); text-align: center;
  padding: 90px 0 100px; clip-path: var(--clip-cta);
}
.cta-kicker{ color: var(--tan); }
.sec-cta h2{ color: var(--paper); font-size: 32px; margin-bottom: 14px; }
.cta-lead{ max-width: 640px; margin: 0 auto 28px; color: rgba(242,232,213,.85); }
.cta-btns{ display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
.cta-mail{ font-size: 13.5px; color: rgba(242,232,213,.7); }
.cta-mail a{ color: var(--tan); }

/* ===== 响应式 ===== */
@media (max-width: 1080px){
  .rg-hero h1{ font-size: 34px; }
  .loc-grid, .offset-grid, .case-wrap{ grid-template-columns: 1fr; gap: 24px; }
  .online-list{ grid-template-columns: 1fr; }
  .side-tag{ display: none; }
}
@media (max-width: 640px){
  .rg-hero .wrap{ padding: 60px 20px 110px; }
  .rg-hero h1{ font-size: 27px; letter-spacing: 1px; }
  .sec{ padding: 54px 0; }
  .sec h2{ font-size: 23px; }
  .kv-keys, .stamp-cards{ grid-template-columns: 1fr; }
  .tl{ grid-template-columns: 44px 20px 1fr; }
}

/* ===== 骨架：历程时间轴 ===== */
.hist{ max-width: 880px; }
.hist-row{ display: grid; grid-template-columns: 70px 26px 1fr; }
.hist-year{ font-family: var(--font-mono); font-size: 16px; color: var(--brown-3); padding-top: 2px; }
.hist-axis{ position: relative; }
.hist-axis::before{ content: ""; position: absolute; left: 50%; top: 8px; bottom: 0; width: 2px; background: var(--line-2); transform: translateX(-50%); }
.hist-row:last-child .hist-axis::before{ display: none; }
.hist-axis::after{ content: ""; position: absolute; left: 50%; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--brown-3); transform: translateX(-50%); }
.hist-body{ padding: 0 0 26px 16px; }
.hist-body b{ display: block; font-family: var(--font-head); font-size: 17px; color: var(--brown-2); margin-bottom: 4px; }
.hist-body p{ font-size: 14px; margin: 0; }

/* ===== 骨架：对比表 ===== */
.cmp-table{ table-layout: fixed; }
.cmp-table .cw1{ width: 20%; }
.cmp-table .cw2{ width: 40%; }
.cmp-table .cw3{ width: 40%; }
.cmp-note{ margin-top: 18px; color: var(--brown-2); max-width: 860px; }

/* ===== 骨架：问答墙 ===== */
.faq-wall{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.faq-wall .faq-item{ background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.faq-wall .faq-item summary{ color: var(--ink); }
.faq-wall .faq-item summary::after{ color: var(--brown-3); }
.faq-wall .faq-item[open] summary{ color: var(--brown-2); }
.faq-wall .faq-a{ color: var(--ink); opacity: .82; }
@media (max-width: 1080px){ .faq-wall{ grid-template-columns: 1fr; } }

/* ===== 骨架：七步流程 ===== */
.steps{ list-style: none; max-width: 880px; }
.step-item{ display: grid; grid-template-columns: 56px 1fr; gap: 0 16px; margin-bottom: 18px; }
.step-no{
  font-family: var(--font-mono); color: var(--paper); background: var(--brown);
  border-radius: 8px; display: flex; align-items: center; justify-content: center; height: 40px;
}
.step-body b{ display: block; font-family: var(--font-head); font-size: 17px; color: var(--brown-2); margin-bottom: 4px; }
.step-body p{ font-size: 14px; margin: 0; }

/* ===== 骨架：图文错位瀑布 ===== */
.wf-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; margin-bottom: 44px; }
.wf-row:last-child{ margin-bottom: 0; }
.wf-row.rev .wf-img{ order: 2; }
.wf-img img{ width: 100%; height: auto; border-radius: var(--r-m); box-shadow: var(--shadow); }
.wf-text b{ display: block; font-family: var(--font-head); font-size: 20px; color: var(--brown-2); margin-bottom: 10px; }
.wf-text p{ font-size: 15px; margin: 0; }
@media (max-width: 1080px){
  .wf-row{ grid-template-columns: 1fr; }
  .wf-row.rev .wf-img{ order: 0; }
}

/* ===== 骨架：大表+自查清单 ===== */
.ck-grid{ display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; align-items: start; }
.checklist{ list-style: none; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-m); padding: 22px 26px; }
.checklist li{ padding: 9px 0 9px 26px; position: relative; font-size: 14px; border-bottom: 1px dashed var(--line-2); }
.checklist li:last-child{ border-bottom: 0; }
.checklist li::before{
  content: ""; position: absolute; left: 0; top: 13px;
  width: 11px; height: 11px; border: 2px solid var(--brown-3); border-radius: 3px;
}
@media (max-width: 1080px){ .ck-grid{ grid-template-columns: 1fr; } }

/* ===== 骨架：情景故事 ===== */
.story-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.story-card{
  background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r-m);
  padding: 22px; box-shadow: var(--shadow-sm); border-top: 4px solid var(--brown-3);
}
.story-card b{ display: block; font-family: var(--font-head); font-size: 16.5px; color: var(--brown-2); margin-bottom: 10px; }
.story-card p{ font-size: 14px; margin: 0; }
@media (max-width: 1080px){ .story-grid{ grid-template-columns: 1fr; } }

/* ===== 骨架：主次分栏 ===== */
.two-col{ display: grid; grid-template-columns: 1fr 320px; gap: 34px; align-items: start; }
.side-card{
  position: sticky; top: 96px; background: var(--paper-2);
  border: 1px solid var(--line-2); border-radius: var(--r-m); padding: 24px; box-shadow: var(--shadow-sm);
}
.side-card h3{ font-size: 17px; color: var(--brown-2); margin-bottom: 14px; }
.fact-list{ list-style: none; margin-bottom: 18px; }
.fact-list li{ padding: 8px 0 8px 18px; position: relative; font-size: 14px; border-bottom: 1px dashed var(--line-2); }
.fact-list li:last-child{ border-bottom: 0; }
.fact-list li::before{ content: ""; position: absolute; left: 0; top: 15px; width: 8px; height: 8px; background: var(--brown-3); border-radius: 2px; }
.side-btn{ width: 100%; }
@media (max-width: 1080px){
  .two-col{ grid-template-columns: 1fr; }
  .side-card{ position: static; }
}