/* Contact page (contact.html). Loaded after styles.css and shared.css. */

/* ---------- Info panel (accent stroke, no fill) left, form right. The panel is only as tall as its own text. ---------- */
.contact__grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gap); align-items: start; }
.contact__info {
  border: 1px solid var(--accent);
  padding: var(--gutter);
  display: flex; flex-direction: column; justify-content: space-between; gap: clamp(40px, 5vw, 80px);
  position: sticky; top: calc(62px + 8px + var(--gap) + 8px); /* stays in view under the scrolled header (62px logo + 2 x 8px nav padding) while the form scrolls */
}
.contact__info p { max-width: 460px; }

/* ---------- Form: the BuilderLab embed (iframe). It sizes itself through form_embed.js; min-height holds the space until it loads. ---------- */
.contact__form { padding-left: clamp(0px, 3vw, 56px); }
.contact__form iframe { display: block; width: 100%; min-height: 749px; border: 0; }

@media (max-width: 900px) {
  .contact__grid { grid-template-columns: 1fr; gap: clamp(40px, 6vw, 64px); }
  .contact__info { position: static; } /* stacked, so nothing to stay beside */
  .contact__form { padding-left: 0; }
}

/* Hero photo: the porch columns and the double front doors both stay in the wide banner crop */
.page-hero__bg img { object-position: 70% 55%; }