/* ================================================
   CONTACT — scoped under .contact.
   No mockup exists for this page in the design project,
   so this form is designed fresh from the same tokens
   (border/radius/shadow-focus) used everywhere else.
   Hero reuses .svc-hero/.svc-breadcrumb/.svc-eyebrow
   from services.css (loaded alongside this file).
   ================================================ */

.contact { font-family: var(--font-body); color: var(--color-text); background: #fff; }
.contact a { color: var(--color-primary); text-decoration: none; }
.contact-wrap { max-width: 1160px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }

.contact-form-standalone { max-width: 640px; margin: 0 auto; padding-top: 56px; padding-bottom: 80px; }

.contact-form-wrap { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 40px; }
.contact-form-title { font: var(--text-heading-md); color: var(--color-text); margin-bottom: 6px; }
.contact-form-sub { font: var(--text-body-sm); color: var(--color-text-secondary); margin-bottom: 28px; }
.contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 560px) { .contact-row { grid-template-columns: 1fr; } }
.contact-group { margin-bottom: 20px; }
.contact-group label { display: block; font: var(--text-label-md); color: var(--color-text); margin-bottom: 8px; }
.contact-group .opt { font-weight: 400; color: var(--color-text-tertiary); }
.contact-group input, .contact-group select, .contact-group textarea {
  width: 100%; padding: 12px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  font: var(--text-body-md); color: var(--color-text); background: #fff; outline: none;
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
  font-family: var(--font-body);
}
.contact-group input:focus, .contact-group select:focus, .contact-group textarea:focus {
  border-color: var(--color-primary); box-shadow: var(--shadow-focus);
}
.contact-group textarea { resize: vertical; min-height: 120px; }
.contact-submit {
  width: 100%; justify-content: center; padding: 14px; border: none; cursor: pointer;
  background: var(--gray-950); color: #fff; border-radius: var(--radius-sm);
  font: 600 var(--text-label-md); display: flex; align-items: center; gap: 8px;
  transition: background var(--duration-fast) var(--ease-out);
}
.contact-submit:hover { background: var(--color-primary); }
.contact-submit:disabled { opacity: 0.6; cursor: default; }
.contact-privacy { font: var(--text-caption); color: var(--color-text-tertiary); text-align: center; margin-top: 14px; }

.contact-success { display: none; text-align: center; padding: 32px; }
.contact-success.show { display: block; }
.contact-success-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--gray-950); color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 1.3rem; }
.contact-success h3 { font: var(--text-heading-md); color: var(--color-text); margin-bottom: 10px; }
.contact-success p { font: var(--text-body-sm); color: var(--color-text-secondary); }

/* --- FAQ --- */
.contact-faq { background: var(--color-bg-subtle); border-top: 1px solid var(--color-border); padding: 64px 0; }
.contact-faq-list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.contact-faq-item { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
.contact-faq-item summary { padding: 18px 22px; font: var(--text-label-md); color: var(--color-text); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.contact-faq-item summary::-webkit-details-marker { display: none; }
.contact-faq-item summary i { color: var(--color-primary); transition: transform var(--duration-fast) var(--ease-out); flex-shrink: 0; }
.contact-faq-item[open] summary i { transform: rotate(180deg); }
.contact-faq-item .body { padding: 0 22px 18px; font: var(--text-body-sm); color: var(--color-text-secondary); line-height: 1.6; }