/* Contact page — own stylesheet, deliberately not appended to the shared
   css/styles.css (a parallel Donate-page build is also avoiding that file,
   so there's zero risk of a concurrent-edit collision). Per
   DESIGN_UX_ANIMATION_SPEC.md §2.8, this is the simplest page on the site:
   standard scroll-fade only, one plain divider, no background motif. */

.contact-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 1rem;
  box-shadow: 0 20px 40px -20px rgba(63, 63, 63, 0.2), 0 2px 10px rgba(63, 63, 63, 0.06);
}

.contact-map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 20px 40px -20px rgba(63, 63, 63, 0.2), 0 2px 10px rgba(63, 63, 63, 0.06);
}
.contact-map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.contact-whatsapp-band {
  border-radius: 1.5rem;
  padding: 2.5rem 2rem;
  background: #FB6900;
}

/* Plainest possible divider — a thin line settling into place, per §1.6's
   "plainest possible rendering" style, simpler than any divider mechanism
   built elsewhere on the site. js/contact.js animates scaleX from 0 to 1;
   reduced-motion shows it already settled. */
.contact-divider {
  width: 4rem;
  height: 2px;
  background: #FB6900;
  opacity: 0.5;
  margin-top: 3.5rem;
  margin-bottom: 3.5rem;
  transform-origin: center;
}

.contact-form {
  max-width: 32rem;
}