.contact-modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(20,40,70,0.45);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  z-index: 9999; align-items: center; justify-content: center; padding: 24px 16px;
}
.contact-modal-overlay.open { display: flex; }
.contact-modal-box {
  background: #ffffff; border-radius: 20px;
  box-shadow: 0 8px 48px rgba(20,60,120,0.18);
  padding: 48px 44px 52px; width: 100%; max-width: 560px;
  position: relative; animation: cmIn 0.25s ease both;
  max-height: 90vh; overflow-y: auto;
  font-family: "Noto Sans SC", sans-serif;
}
@keyframes cmIn { from{opacity:0;transform:translateY(24px) scale(0.97)} to{opacity:1;transform:translateY(0) scale(1)} }
.contact-modal-close {
  position: absolute; top:16px; right:20px; background:none; border:none;
  font-size:1.6rem; color:#8a9ab0; cursor:pointer; line-height:1; padding:4px 8px;
  transition:color 0.15s;
}
.contact-modal-close:hover { color:#1a2a3a; }
.contact-modal-box .card-header { margin-bottom:32px; }
.contact-modal-box .card-header h2 { font-size:1.75rem; font-weight:700; color:#1a2a3a; margin-bottom:8px; }
.contact-modal-box .card-header p  { font-size:0.88rem; color:#8a9ab0; font-weight:300; }
.contact-modal-box .tag { display:inline-block; background:#eef4fb; color:#4a7ab5; font-size:0.78rem; padding:4px 12px; border-radius:20px; margin-top:10px; }
.cm-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.contact-modal-box .field { margin-bottom:18px; }
.contact-modal-box label { display:block; font-size:0.8rem; font-weight:500; color:#4a5568; margin-bottom:7px; }
.contact-modal-box .req { color:#e05a5a; margin-left:2px; }
.contact-modal-box input,
.contact-modal-box textarea {
  width:100%; padding:11px 14px; border:1.5px solid #dde6f0; border-radius:10px;
  background:#f7fafd; font-family:"Noto Sans SC",sans-serif; font-size:0.9rem; color:#1a2a3a; outline:none;
  transition:border-color 0.18s,box-shadow 0.18s,background 0.18s;
}
.contact-modal-box input:focus,
.contact-modal-box textarea:focus { border-color:#6aaad4; box-shadow:0 0 0 3px rgba(106,170,212,0.15); background:#fff; }
.contact-modal-box input.invalid,
.contact-modal-box textarea.invalid { border-color:#e05a5a; box-shadow:0 0 0 3px rgba(224,90,90,0.1); }
.contact-modal-box input::placeholder,
.contact-modal-box textarea::placeholder { color:#b8c8d8; font-size:0.87rem; }
.contact-modal-box textarea { min-height:120px; resize:vertical; }
.contact-modal-box .err { color:#e05a5a; font-size:0.76rem; margin-top:5px; display:none; }
.cm-btn {
  width:100%; margin-top:8px; padding:13px; background:#2b5c8e; color:#fff;
  font-family:"Noto Sans SC",sans-serif; font-size:0.92rem; font-weight:500;
  border:none; border-radius:10px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:background 0.18s,transform 0.12s,box-shadow 0.18s;
}
.cm-btn:hover:not(:disabled) { background:#1e4a78; transform:translateY(-1px); box-shadow:0 6px 18px rgba(43,92,142,0.25); }
.cm-btn:disabled { opacity:0.55; cursor:not-allowed; }
.cm-spinner { width:15px; height:15px; border:2px solid rgba(255,255,255,0.35); border-top-color:#fff; border-radius:50%; animation:cmspin 0.65s linear infinite; display:none; }
@keyframes cmspin { to{transform:rotate(360deg)} }
.cm-success { display:none; text-align:center; padding:24px 0 8px; }
.cm-success-icon { width:60px; height:60px; background:linear-gradient(135deg,#6aaad4,#2b5c8e); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:26px; color:#fff; margin:0 auto 20px; }
.cm-success h3 { font-size:1.2rem; font-weight:600; color:#1a2a3a; margin-bottom:8px; }
.cm-success p { font-size:0.86rem; color:#8a9ab0; line-height:1.7; }
.cm-email-chip { display:inline-block; background:#eef4fb; color:#2b5c8e; font-size:0.82rem; padding:5px 14px; border-radius:20px; margin-top:12px; }
@media(max-width:520px){
  .contact-modal-box { padding:32px 22px 36px; }
  .cm-row { grid-template-columns:1fr; }
}
/* ── Contact Info Block ── */
.cm-contact-info { margin-top:28px; }
.cm-contact-divider { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.cm-contact-divider::before,
.cm-contact-divider::after { content:''; flex:1; height:1px; background:#dde6f0; }
.cm-contact-divider span { font-size:0.75rem; color:#b8c8d8; white-space:nowrap; font-weight:400; }
.cm-contact-items { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media(max-width:520px){ .cm-contact-items { grid-template-columns:1fr; } }
.cm-contact-item {
  display:flex; align-items:center; gap:11px;
  padding:11px 14px; background:#f7fafd;
  border:1.5px solid #dde6f0; border-radius:12px;
  text-decoration:none;
  transition:border-color 0.18s,background 0.18s,box-shadow 0.18s;
}
.cm-contact-item:hover { border-color:#6aaad4; background:#fff; box-shadow:0 4px 14px rgba(106,170,212,0.15); }
.cm-contact-icon {
  width:34px; height:34px;
  background:linear-gradient(135deg,#6aaad4,#2b5c8e);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:14px; color:#fff; flex-shrink:0;
}
.cm-contact-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.cm-contact-label { font-size:0.70rem; color:#8a9ab0; font-weight:400; }
.cm-contact-value { font-size:0.82rem; color:#1a2a3a; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }