/* ============================================================
   contact.html · H3左右分栏图文 + C6色带磁贴 + G2表单 +
   D1横向步进箭头 + 深色服务区域
   ============================================================ */

/* ---------- 题头：H3 左右分栏图文（深色底） ---------- */
.contact-hero{
  background:var(--green-900);
  padding-top:calc(var(--header-h) + 60px);
  padding-bottom:0;overflow:hidden;
}
.contact-hero-inner{
  display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:end;
  padding-bottom:0;
}
.contact-hero-text{padding-bottom:60px}
.contact-hero h1{
  font-size:clamp(38px,5vw,58px);color:var(--cream-50);margin:18px 0 14px;letter-spacing:.04em;
}
.contact-hero-text > p{color:var(--cream-200);font-size:16.5px;line-height:1.9;max-width:520px}
.contact-hero .crumb a{color:var(--brass-light)}
.contact-hero-media{position:relative;align-self:stretch}
.contact-hero-media img{
  width:100%;height:100%;min-height:340px;object-fit:cover;
  clip-path:polygon(8% 0,100% 0,100% 100%,0 100%);
}

/* ---------- 联系方式：C6 连续色带磁贴 ---------- */
.contact-meta{background:var(--cream-50)}
.meta-strip{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border:2px solid var(--brown-700);background:var(--brown-800);
}
.meta-cell{
  padding:36px 28px;color:var(--cream-100);
  border-right:1px solid var(--line-dark);
  transition:background .3s ease;
}
.meta-cell:last-child{border-right:none}
a.meta-cell:hover{background:var(--brown-700)}
.meta-ico{
  display:inline-flex;width:46px;height:46px;align-items:center;justify-content:center;
  border:1.5px solid var(--brass);border-radius:50%;color:var(--brass-light);margin-bottom:14px;
}
.meta-ico svg{width:22px;height:22px}
.meta-cell h3{color:var(--cream-50);font-size:15px;letter-spacing:.1em;margin-bottom:8px}
.meta-big{
  font-family:var(--font-display);font-size:26px;color:var(--brass-light);margin-bottom:8px;line-height:1.2;
}
.meta-cell p{font-size:13.5px;color:var(--cream-200);line-height:1.7}

/* ---------- 表单区：G2 ---------- */
.contact-form-sec{border-top:1px solid var(--line)}
.form-layout{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.form-intro h2{font-size:clamp(24px,3vw,34px);margin:6px 0 16px}
.form-intro > p{color:var(--ink-soft);line-height:1.9;margin-bottom:16px}
.form-points{margin-bottom:24px}
.form-points li{
  padding:6px 0 6px 20px;position:relative;color:var(--muted);font-size:14.5px;
}
.form-points li::before{content:"▸";position:absolute;left:0;color:var(--brass)}
.form-intro img{width:100%;height:280px;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--line)}
.btn-block{width:100%}

/* ---------- 咨询流程：D1 横向步进箭头 ---------- */
.contact-flow{background:var(--cream-50)}
.flow-row{
  list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:0;
  counter-reset:step;
}
.flow-row li{
  position:relative;padding:28px 20px 28px 24px;background:var(--cream-100);
  border-right:2px solid var(--cream-50);
}
.flow-row li:not(:last-child)::after{
  content:"";position:absolute;right:-14px;top:50%;transform:translateY(-50%);
  width:0;height:0;border-left:14px solid var(--cream-100);
  border-top:14px solid transparent;border-bottom:14px solid transparent;
  z-index:2;
}
.flow-row b{
  display:block;font-family:var(--font-display);font-size:34px;color:var(--brass);
  line-height:1;margin-bottom:10px;
}
.flow-row h3{font-size:17px;margin-bottom:6px;color:var(--brown-800)}
.flow-row p{font-size:13.5px;color:var(--muted);line-height:1.7}

/* ---------- 服务区域 ---------- */
.contact-area{
  background:
    repeating-linear-gradient(90deg,rgba(210,176,120,.05) 0 1px,transparent 1px 60px),
    repeating-linear-gradient(0deg,rgba(210,176,120,.05) 0 1px,transparent 1px 60px),
    var(--green-900);
}
.contact-area .sec-head h2{color:var(--cream-50)}
.contact-area .sec-lead{color:var(--cream-200)}
.area-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-bottom:26px}
.area-block{
  background:rgba(251,247,236,.04);border:1px solid var(--line-dark);
  border-left:4px solid var(--brass);padding:28px;
}
.area-block h3{color:var(--brass-light);font-size:20px;margin-bottom:12px}
.area-block p{color:var(--cream-200);font-size:14.5px;line-height:1.9;margin-bottom:10px}
.area-note{
  background:rgba(210,176,120,.1);border:1px dashed var(--brass);padding:20px 26px;
  color:var(--cream-200);font-size:14px;line-height:1.9;border-radius:var(--r-sm);
}
.area-note strong{color:var(--brass-light)}

/* ---------- 底部 CTA ---------- */
.contact-cta{border-top:4px solid var(--brass)}
.contact-cta-inner{text-align:center;padding:20px 0}
.contact-cta-inner h2{color:var(--cream-50);font-size:clamp(24px,3vw,34px);margin-bottom:8px}
.contact-cta-inner p{color:var(--cream-200);margin-bottom:22px}
.contact-cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  .contact-hero-inner{grid-template-columns:1fr}
  .contact-hero-media{min-height:240px}
  .contact-hero-media img{clip-path:none;height:240px}
  .meta-strip{grid-template-columns:1fr}
  .meta-cell{border-right:none;border-bottom:1px solid var(--line-dark)}
  .form-layout{grid-template-columns:1fr}
  .flow-row{grid-template-columns:1fr}
  .flow-row li{border-right:none;border-bottom:2px solid var(--cream-50)}
  .flow-row li:not(:last-child)::after{
    right:50%;top:auto;bottom:-14px;transform:translateX(50%) rotate(90deg);
  }
  .area-grid{grid-template-columns:1fr}
}

/* ---------- 扩充：适用人群三卡 ---------- */
.contact-who{background:var(--cream-50)}
.who-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.who-card{
  background:var(--cream-100);border:1.5px solid var(--brown-700);
  padding:26px 22px;border-top:4px solid var(--brass);
}
.who-ico{
  width:52px;height:52px;display:flex;align-items:center;justify-content:center;
  background:var(--brown-800);color:var(--brass-light);margin-bottom:14px;
}
.who-card h3{font-size:18px;color:var(--brown-800);margin-bottom:8px}
.who-card p{font-size:14px;color:var(--ink-soft);line-height:1.85}

/* ---------- 扩充：误区vs真相 ---------- */
.contact-myth{border-top:1px solid var(--line)}
.myth-wrap{max-width:960px}
.myth-row{
  display:grid;grid-template-columns:1fr 1.3fr;gap:0;
  border:1.5px solid var(--brown-700);margin-bottom:14px;
}
.myth-wrong{
  background:#f3e2d0;color:var(--brown-900);
  padding:20px 22px;font-size:14.5px;line-height:1.8;
  border-right:1.5px solid var(--brown-700);
}
.myth-right{
  background:var(--green-900);color:var(--cream-100);
  padding:20px 22px;font-size:14.5px;line-height:1.8;
}
.myth-tag{
  display:inline-block;font-size:11px;letter-spacing:.15em;
  padding:2px 8px;margin-right:8px;border:1px solid currentColor;
}
.myth-tag.good{color:var(--brass-light)}

/* ---------- 扩充：关联服务导航 ---------- */
.contact-relate{background:var(--cream-50)}
.relate-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.relate-cell{
  display:block;background:var(--cream-100);border:1.5px solid var(--brown-700);
  padding:22px 20px;transition:all .25s ease;
}
.relate-cell:hover{background:var(--brown-800);transform:translateY(-4px)}
.relate-cell:hover h3{color:var(--brass-light)}
.relate-cell:hover p{color:var(--cream-200)}
.relate-cell h3{font-size:16px;color:var(--brown-800);margin-bottom:6px}
.relate-cell p{font-size:13.5px;color:var(--muted);line-height:1.7}

@media (max-width:900px){
  .who-grid,.relate-grid{grid-template-columns:1fr}
  .myth-row{grid-template-columns:1fr}
  .myth-wrong{border-right:none;border-bottom:1.5px solid var(--brown-700)}
}

/* ---------- 扩充：本地服务说明 ---------- */
.contact-note{background:var(--cream-50)}
.contact-note .narrow{max-width:820px}
.note-body p{color:var(--ink-soft);line-height:2;margin-bottom:14px;font-size:15.5px}