/* ================= CONTACT ================= */
.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 30px; align-items: stretch; }
.contact-form-card { padding: 56px; }
.contact-form-card h2 { margin-bottom: 16px; }
.contact-form-card > p { margin-bottom: 36px; max-width: 460px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.contact-form-card input, .contact-form-card textarea {
  width: 100%; padding: 16px 20px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg-soft); color: var(--white); font-size: 0.95rem;
  transition: border-color 0.3s;
}
.contact-form-card input::placeholder, .contact-form-card textarea::placeholder { color: var(--dim); }
.contact-form-card input:focus, .contact-form-card textarea:focus { border-color: var(--primary); outline: none; }
.contact-form-card textarea { margin-bottom: 26px; resize: vertical; min-height: 140px; }
.form-note { font-size: 0.78rem; color: var(--dim); margin-top: 16px; }
.form-note.is-success { color: #6ee787; }
.form-note.is-error { color: #ff6b6b; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.contact-form-card button[disabled] { opacity: 0.65; pointer-events: none; }
.contact-form-card input.is-invalid,
.contact-form-card textarea.is-invalid { border-color: #ff6b6b; }

.contact-side { display: flex; flex-direction: column; gap: 20px; }
.contact-side .portrait-card { flex: 1; min-height: 220px; border-radius: var(--radius-lg); overflow: hidden; position: relative; border: 1px solid var(--border); }
.contact-side .portrait-card img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.contact-side .portrait-card .fade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(9,9,10,0.85), transparent 50%); }
.contact-side .portrait-card .avail { position: absolute; bottom: 20px; left: 20px; right: 20px; display: flex; align-items: center; gap: 10px; font-size: 0.85rem; }
.contact-side .portrait-card .avail .dot { width: 8px; height: 8px; border-radius: 50%; background: #6ee787; box-shadow: 0 0 0 4px rgba(110,231,135,0.18); }

.info-card { padding: 26px 28px; display: flex; align-items: center; gap: 18px; transition: border-color 0.3s; }
.info-card:hover { border-color: var(--primary); }
.info-card .ic { width: 48px; height: 48px; border-radius: 50%; background: var(--primary-dim); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; flex-shrink: 0; }
.info-card h5 { font-size: 0.78rem; color: var(--dim); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; font-weight: 500; }
.info-card span, .info-card a { font-size: 1rem; color: var(--white); }
.info-card a:hover { color: var(--primary); }

.social-row { display: flex; gap: 12px; }
.social-row a {
  flex: 1; padding: 16px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--muted);
  transition: all 0.3s var(--ease);
}
.social-row a i { font-size: 1.1rem; color: var(--white); }
.social-row a:hover { border-color: var(--primary); color: var(--primary); }
.social-row a:hover i { color: var(--primary); }

@media (max-width: 1024px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-form-card { padding: 40px 26px; }
}
@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; }
  .social-row { flex-wrap: wrap; }
  .social-row a { flex: 1 1 30%; }
}