/* ============================================
   CONTACT SECTION
   ============================================ */
.contact-section {
  padding: var(--space-xl) 0;
  background: var(--color-bg);
}
.contact-intro {
  text-align: center;
  max-width: var(--container-narrow);
  margin: 0 auto var(--space-lg);
}
.contact-intro h2 { margin-bottom: 0; }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}

/* Form */
.contact-form { display: flex; flex-direction: column; gap: var(--space-md); }
.contact-field-row { display: flex; gap: var(--space-md); }
.contact-field-row .contact-field { flex: 1; }
.contact-field { display: flex; flex-direction: column; gap: 6px; }
.contact-field label {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.contact-field input,
.contact-field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
  padding: 8px 2px;
  transition: border-color 0.25s ease;
  resize: vertical;
}
.contact-field input:focus,
.contact-field textarea:focus {
  outline: none;
  border-bottom-color: var(--color-accent);
}
.contact-form .btn { align-self: flex-start; margin-top: var(--space-xs); }
.contact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.contact-notice {
  padding: 12px 16px;
  margin-bottom: var(--space-md);
  border-left: 3px solid var(--color-accent);
  background: var(--color-surface);
  font-size: 0.9rem;
}
.contact-notice-error { border-left-color: #b3261e; }

/* Map + details */
.contact-map {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-md);
}
.contact-map iframe { width: 100%; height: 320px; border: 0; display: block; }

.contact-details { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.contact-details li { display: flex; align-items: center; gap: 12px; color: var(--color-text-muted); }
.contact-details svg { flex-shrink: 0; color: var(--color-accent-dark); }
.contact-details a:hover { color: var(--color-accent-dark); }

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-field-row { flex-direction: column; gap: var(--space-md); }
}