.page.contact { padding-top: 8em; }
.contact-form { padding: 2em; display: flex; flex-direction: column; gap: 4em; margin: 2em; background-color: var(--fg); border-radius: 1em; }
.contact-form h3, .contact-form p, .contact-form input, .contact-form textarea { color: var(--bg); }
.contact-form input, .contact-form textarea { background-color: var(--fg200); }
.contact-form .btn { background-color: var(--bg); color: var(--fg); }
.contact-form .btn:hover { background-color: var(--primary); color: #fff; }
.contact-form-row:nth-child(1) { width: 100%; display: flex; gap: 1em; }
.contact-form-row-copy-item { flex: 1; }
.contact-form-row-copy-item:nth-child(2) { text-align: center; }
.contact-form-row-copy-item:nth-child(3) { text-align: right; }
.contact-form-col:nth-child(1) { display: flex; flex-direction: column; justify-content: space-between; gap: 4em; }
.contact-form-header { display: flex; flex-direction: column; gap: 1.5em; }
.contact-form-header p { margin-bottom: 0.5em; width: 75%; }
.contact-form-row:nth-child(2) { display: flex; gap: 1em; }
.contact-form-col { flex: 1; }
.contact-form-availability { width: 75%; display: flex; justify-content: space-between; gap: 1em; border-top: 1px dashed var(--bg); padding: 0.5em 0; }
.contact-form-col:nth-child(2) { display: flex; flex-direction: column; gap: 0.75em; }
.contact-form-col:nth-child(2) form { display: flex; flex-direction: column; gap: 0.75em; }
.form-item .btn { width: 100%; text-align: center; }
/* Map */
.contact-map { position: relative; width: calc(100% - 4em); height: 70vh; margin: 2em; border-radius: 1em; overflow: hidden; border: 1px dashed var(--fg); }
.contact-map iframe { filter: grayscale(1) invert(1) contrast(1.1) brightness(0.5); }
.contact-map-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; padding: 3em; pointer-events: none; }
.contact-map-card { pointer-events: all; background: rgba(15,15,15,0.85); backdrop-filter: blur(20px); border: 1px solid rgba(108,92,231,0.15); border-radius: 1em; padding: 2em; max-width: 320px; }

.success-message { background: rgba(108, 92, 231, 0.1); border-radius: 1em; margin: 2em; }
.success-message h3 { color: var(--primary); }

@media (max-width: 1000px) {
  .contact-map { height: 50vh; margin: 1.25em; width: calc(100% - 2.5em); }
  .contact-map-overlay { align-items: flex-end; padding: 1.25em; }
  .contact-map-card { max-width: 100%; width: 100%; padding: 1.5em; }
}

@media (max-width: 900px) {
  .contact-form { margin: 1.25em; }
  .contact-form-row:nth-child(1) { flex-direction: column; gap: 0.25em; }
  .contact-form-row-copy-item, .contact-form-row-copy-item:nth-child(3), .contact-form h3, .contact-form p { text-align: center; }
  .contact-form-row:nth-child(2) { flex-direction: column; gap: 4em; }
  .contact-form-header p, .contact-form-availability { width: 100%; }
  .contact-form-col:nth-child(1) { gap: 2em; }
  .contact-form-availability { flex-direction: column; text-align: center; gap: 0.25em; }
}