@charset "UTF-8";
/* ============================================================
   contact.html 独有样式 · 校园展板风
   骨架：四宫格圆形图标联系卡 → 左文右表单 → 横条承诺卡
        → 服务范围chips → 到访图文 → 手风琴
============================================================ */

/* ---------- 四宫格联系卡 ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.contact-cell{
  background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-lg);
  padding:30px 24px;text-align:center;transition:transform var(--t-fast),box-shadow var(--t-fast);
}
.contact-cell:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.cell-ico{
  width:56px;height:56px;margin:0 auto 16px;border-radius:18px;
  background:var(--navy-900);color:var(--gold-400);
  display:flex;align-items:center;justify-content:center;
}
.cell-ico svg{width:26px;height:26px}
.contact-cell h3{font-size:16px;margin-bottom:8px}
.cell-main{font-family:var(--font-head);font-weight:800;color:var(--gold-500);font-size:18px;margin-bottom:6px}
.contact-cell p:last-child{font-size:12.5px;color:var(--muted)}

/* ---------- 表单区 ---------- */
.form-split{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:start}
.form-side .sec-title{margin-bottom:14px}
.form-notes{margin-top:22px;border-left:3px solid var(--gold-400);padding-left:16px}
.form-notes li{font-size:14px;color:var(--ink-2);margin-bottom:8px;line-height:1.8}
.contact-form{
  background:var(--white);border-radius:var(--r-lg);padding:34px 34px 30px;
  box-shadow:var(--shadow-md);border-top:4px solid var(--gold-500);
}
.form-submit{width:100%;margin-top:8px}

/* ---------- 承诺横条 ---------- */
.promise-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.promise-item{background:var(--paper);border-radius:var(--r-md);padding:26px 24px;border:1.5px solid transparent;transition:border-color var(--t-fast)}
.promise-item:hover{border-color:var(--gold-400)}
.promise-item span{
  display:inline-block;font-size:12px;font-weight:700;color:var(--navy-900);
  background:var(--gold-200);padding:3px 12px;border-radius:var(--r-pill);margin-bottom:12px;
}
.promise-item h3{font-size:16px;margin-bottom:8px}
.promise-item p{font-size:13.5px;color:var(--ink-2);line-height:1.8}

/* ---------- 服务范围 ---------- */
.scope-wrap{max-width:900px;margin:0 auto;text-align:center}
.scope-wrap h3{font-size:19px;margin-bottom:12px}
.scope-cities{font-size:14.5px;color:var(--ink-2);line-height:2;letter-spacing:1px}
.scope-note{font-size:13px;color:var(--muted);margin-top:8px}

/* ---------- 到访图文 ---------- */
.visit-split{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.visit-photo img{width:100%;height:340px;object-fit:cover;border-radius:var(--r-md) 60px 60px var(--r-md);box-shadow:var(--shadow-md)}
.visit-copy .sec-title{margin-bottom:14px}
.visit-list{margin-top:20px;border-top:1.5px dashed var(--line);padding-top:18px}
.visit-list li{font-size:14.5px;color:var(--ink-2);margin-bottom:10px;padding-left:22px;position:relative}
.visit-list li::before{content:"";position:absolute;left:0;top:8px;width:10px;height:10px;border-radius:50%;background:var(--gold-500)}

/* ---------- 手风琴 ---------- */
.faq-col{max-width:860px;margin:0 auto}
.faq-list .faq-item{background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-md);margin-bottom:14px;overflow:hidden}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:18px;text-align:left;padding:18px 22px;font-size:15px;font-weight:700;color:var(--navy-900)}
.faq-q::after{content:"+";flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--gold-500);color:var(--gold-500);display:flex;align-items:center;justify-content:center;font-size:17px;transition:transform var(--t-fast)}
.faq-item.open .faq-q::after{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq-item.open .faq-a{max-height:300px}
.faq-a p{padding:0 22px 18px;font-size:14.5px;color:var(--ink-2);line-height:1.9}

/* ---------- 错峰 ---------- */
.rv1{--d:.1s}.rv2{--d:.2s}.rv3{--d:.3s}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .contact-grid{grid-template-columns:repeat(2,1fr)}
  .promise-row{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:920px){
  .form-split,.visit-split{grid-template-columns:1fr;gap:32px}
  .contact-form{padding:26px 22px}
}
@media (max-width:640px){
  .contact-grid,.promise-row{grid-template-columns:1fr}
}