/* Contact-page-only layout. Shared form controls live in global.css. */
.contact_page_main { padding-bottom: 2rem; }
.contact_page .contact_detail { min-height: 5.25rem; }

.contact_page_form .contact {
  width: 100%;
  margin: 0;
  padding: 0 0 2rem;
  background: transparent;
  border-top: 0;
}

.contact_page_form .contact_panel {
  width: 100%;
  max-width: none;
  margin-inline: auto;
  background: var(--bg_card);
  border: 1px solid var(--border);
  border-radius: var(--r_lg);
  box-shadow: var(--shadow_lg);
  overflow: hidden;
}

.contact_page_form .contact_panel_inner {
  padding: clamp(1.25rem, 4vw, 2.5rem);
}

@media (min-width: 768px) {
  .contact_page_form .contact_panel {
    max-width: 56rem;
  }
}

@media (max-width: 680px) {
  .contact_page .contact_page_main > .contact_page_hero,
  .contact_page .contact_page_main > .contact_page_form {
    width: min(calc(100% - 1.25rem), 560px);
  }

  .contact_page_form .contact_panel {
    border-radius: var(--r_md);
    box-shadow: var(--shadow_md);
  }

  .contact_page_form .contact_panel_inner {
    padding: 1.25rem;
  }

  .contact_page_form .contact {
    padding-bottom: 1.25rem;
  }
}

/* Keep the nested contact form fluid inside the content-page shell at every width. */
.contact_page_form,
.contact_page_form .contact,
.contact_page_form .container,
.contact_page_form .contact_panel,
.contact_page_form .contact_panel_inner {
  min-width: 0;
  max-width: 100%;
}

.contact_page_form .container {
  padding-inline: 0;
}

.contact_page_form .contact_panel_inner {
  overflow-wrap: anywhere;
}

@media (min-width: 681px) {
  .contact_page_form .contact_panel {
    width: min(100%, 56rem);
  }
}

@media (max-width: 680px) {
  .contact_page_form .contact_panel {
    width: 100%;
  }

  .contact_page_form .contact_panel_inner {
    padding-inline: clamp(.85rem, 4vw, 1.25rem);
  }
}