/* Contact — full-width fields, no horizontal overflow on ~390px */
.contact-page {
  overflow-x: hidden;
}

.contact-page h1 {
  font-family: var(--site-display);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.contact-card {
  width: 100%;
}

.contact-form .contact-input {
  width: 100%;
  max-width: 100%;
  background-color: var(--site-surface);
  border: 1px solid var(--site-border);
  color: var(--site-text);
  border-radius: 0.75rem;
  padding: 0.85rem 1rem;
  display: block;
}

.contact-form .contact-input:focus {
  background-color: var(--site-surface);
  color: var(--site-text);
  border-color: var(--site-accent);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--site-accent) 28%, transparent);
  outline: 0;
}

.contact-form .contact-input::placeholder {
  color: var(--site-accent);
  opacity: 1;
}

.contact-form textarea.contact-input {
  min-height: 140px;
  resize: vertical;
}

.contact-form .btn-primary {
  font-weight: 600;
}

@media (max-width: 400px) {
  .contact-card .card-body {
    padding: 1.25rem !important;
  }
}

/* Cloudflare Turnstile — centered, dark-theme friendly spacing */
.contact-form .cf-turnstile-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

.contact-form .cf-turnstile {
  max-width: 100%;
}