/* ==========================================================================
   contact.html — 联系我们（双列地址卡骨架）
   模块：双城地址卡 / 乘车指引双栏 / 地图占位块 / 联系表单
   ========================================================================== */

.contact-hero{background-image:url('../../images/svc-yuyue.jpg')}

/* CTA 条 */
.cta-flex{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cta-kicker{display:inline-block;color:var(--gold);font-size:13px;letter-spacing:.2em;font-weight:600;margin-bottom:14px}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap}
.container-narrow{max-width:820px}

/* ---------- 模块一：服务点双列卡 ---------- */
.office-points{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.point-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease}
.point-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.point-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:18px;margin-bottom:18px;border-bottom:2px solid var(--gold-line)}
.point-city{font-family:var(--serif);font-size:24px;font-weight:700;color:var(--ink)}
.point-tag{font-size:12.5px;color:var(--gold-deep);background:var(--gold-pale);border-radius:999px;padding:3px 12px}
.point-list{margin-bottom:22px;flex:1}
.point-list li{display:flex;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line)}
.point-list li:last-child{border-bottom:0}
.point-list svg{flex:0 0 auto;color:var(--gold-deep);margin-top:4px}
.point-list strong{display:block;font-size:13px;color:var(--muted);font-weight:600;margin-bottom:2px}
.point-list p{font-size:14.5px;margin:0;color:var(--text)}
.point-list a{color:var(--gold-deep);font-weight:600}
.point-card .btn{align-self:flex-start}

/* ---------- 模块二：乘车指引 ---------- */
.traffic-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.traffic-col{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.traffic-col h3{font-size:18px;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.traffic-city{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;background:var(--ink);color:var(--gold-pale);font-family:var(--serif);font-size:16px}
.traffic-list li{padding:11px 0;border-bottom:1px dashed var(--line);font-size:14.5px;color:var(--muted)}
.traffic-list li:last-child{border-bottom:0}
.traffic-list strong{color:var(--ink);margin-right:6px}
.traffic-list a{color:var(--gold-deep);text-decoration:underline}
.traffic-note{max-width:1100px;margin:26px auto 0}

/* ---------- 模块三：地图占位块 ---------- */
.map-placeholder{position:relative;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--paper-warm);height:380px}
.map-grid-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(169,133,63,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(169,133,63,.14) 1px,transparent 1px);background-size:48px 48px}
.map-pin{position:absolute;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--gold-deep);font-size:13px;font-weight:600}
.map-pin-py{left:22%;top:34%}
.map-pin-xc{right:20%;bottom:26%}
.map-note{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:6px 18px;font-size:12.5px;color:var(--muted);white-space:nowrap}
.map-note a{color:var(--gold-deep)}

/* ---------- 模块四：表单 ---------- */
.contact-form{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:34px 30px}
.form-submit-btn{margin-top:18px}

/* ---------- 上门前清单 ---------- */
.visit-check{max-width:680px;margin:0 auto 22px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px 30px}
.visit-check li{position:relative;padding:10px 0 10px 30px;font-size:14.5px;border-bottom:1px dashed var(--line)}
.visit-check li:last-child{border-bottom:0}
.visit-check li::before{content:"";position:absolute;left:4px;top:17px;width:12px;height:7px;border-left:2px solid var(--gold-deep);border-bottom:2px solid var(--gold-deep);transform:rotate(-45deg)}
.visit-check + .notice{max-width:680px;margin-left:auto;margin-right:auto}

/* ---------- 打电话前想清楚 ---------- */
.prep-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.prep-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px}
.prep-no{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--gold-pale);color:var(--gold-deep);font-family:var(--serif);font-weight:700;font-size:18px;margin-bottom:14px}
.prep-card h3{font-size:17px;margin-bottom:8px}
.prep-card p{font-size:14px;color:var(--muted);margin:0}
.prep-card a{color:var(--gold-deep);text-decoration:underline}

/* ---------- 响应式 ---------- */
@media (max-width:980px){
  .office-points{grid-template-columns:1fr}
  .traffic-grid{grid-template-columns:1fr}
  .map-placeholder{height:300px}
  .prep-grid{grid-template-columns:1fr}
}