/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-main { min-height: 100vh; font-family: "Karla", sans-serif; }
.contact-wrap {
  display: flex; flex-direction: column; gap: 5rem;
  min-height: 100vh; padding-top: 8rem; padding-bottom: 8rem;
}
@media (width >= 1024px) { .contact-wrap { flex-direction: row; } }
.contact-media { display: flex; align-items: center; justify-content: center; }
@media (width >= 1024px) { .contact-media { width: 50%; } }
.contact-media__inner { position: relative; width: 100%; aspect-ratio: 4/3; background: #fff; }
.contact-media__inner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.contact-info {
  display: flex; flex-direction: column; justify-content: center; background: #fff;
  padding-left: 1.5rem; padding-right: 1.5rem;
}
@media (width >= 768px) { .contact-info { padding-left: 3rem; padding-right: 3rem; } }
@media (width >= 1024px) { .contact-info { width: 50%; } }
.contact-info__inner { max-width: 28rem; width: 100%; }
.contact-info .zigzag { margin-bottom: 0.75rem; width: 3rem; }
.contact-info__title { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.025em; color: #000; margin-bottom: 1.5rem; }
@media (width >= 768px) { .contact-info__title { font-size: 3rem; } }
.contact-info__desc { color: #6a7282; margin-bottom: 3rem; line-height: 1.625; }

.contact-form { display: flex; flex-direction: column; gap: 1rem; }
.contact-form input, .contact-form textarea {
  width: 100%; border: 1px solid #d1d5db; background: #fff; padding: 1rem 1.5rem;
  outline: none; font-size: 0.875rem; transition: border-color 0.15s;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #99a1af; }
.contact-form input:focus, .contact-form textarea:focus { border-color: #000; }
.contact-form textarea { resize: none; }
.contact-form button {
  margin-top: 1rem; background: #000; color: #fff; padding: 1.25rem 2.5rem;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  transition: background 0.15s; align-self: flex-start;
}
.contact-form button:hover { background: #1e2939; }
.contact-form button:disabled { background: #99a1af; }