/* =====================================================
  PAGE LAYOUT & SCROLLING
=====================================================
*/
body.page_contact {
  overflow-y: auto;
  height: auto;
}
body.page_contact .home_layout {
  height: auto;
  min-height: 100svh;
}
body.page_contact .home_content {
  flex: 1;
  height: auto;
  overflow: visible;
  padding-top: 24px;
  padding-bottom: 40px;
}

/* =====================================================
  CONTACT PAGE STYLES
=====================================================
*/
.contact_container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}
.contact_container h1 {
  text-align: center;
  color: #333;
  margin-top: 0;
  margin-bottom: 16px;
}
.contact_intro {
  /* UPDATED: Added box styling */
  text-align: left;
  font-size: 17px;
  color: #555;
  max-width: 900px;
  margin: 0 auto 32px auto;
  line-height: 1.6;
  background-color: #fcfcfc;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid #e9e9e9;
}
.contact_wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.contact_info_box,
.contact_form_box {
  background: #ffffff;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .12);
}

/* --- Info Box (Email) --- */
.contact_info_box {
  text-align: center; /* Centers the email button */
}

.contact_info_box h2,
.contact_form_box h2 {
  color: #333;
  margin-top: 0;
  margin-bottom: 16px;
  padding-bottom: 4px;
  border-bottom: 2px solid #f0f0f0;
  text-align: left; /* Keep h2 aligned left */
}
.contact_info_box p {
  font-size: 16px;
  color: #555;
  line-height: 1.7;
  margin-bottom: 16px;
  text-align: left; /* Keep paragraphs aligned left */
}

/* --- Email Link Button --- */
.contact_email_link {
  display: inline-block;
  text-decoration: none;
  padding: 12px 28px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
  background: #fff; 
  color: #333; 
  border: 2px solid #333;
  margin: 8px 0;
}
.contact_email_link:hover {
  background: #f6f6f6;
  transform: translateY(-1px);
}

.contact_note {
  margin-top: 24px;
  font-size: 15px;
  color: #666;
  font-style: italic;
  text-align: left; /* Keep note aligned left */
}
.contact_note a {
  color: #333;
  font-weight: 600;
}

/* --- Form Box (Web Form) --- */
.contact_form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* text-align: center; <-- This is not needed for flex */
}

/* Keep form groups left-aligned */
.contact_form .form_group {
  text-align: left;
}

/* --- UPDATED: This is the fix --- */
.contact_form .cta_button {
  margin-top: 10px;
  width: 100%; /* Full width on mobile */
  max-width: 250px; /* Cap the width */
  align-self: center; /* This centers the button in the flex container */
}
/* --- End of fix --- */


@media (min-width: 860px) {
  .contact_wrapper {
    grid-template-columns: 1fr 1.5fr;
    gap: 32px;
  }
  .contact_info_box,
  .contact_form_box {
    padding: 32px;
  }
  
  /* NEW: Make contact intro match pricing intro on desktop */
  .contact_intro {
    max-width: 900px;
  }
}