.contact.page-section { 
  align-items: flex-start; 
  padding-top: 96px;
  padding-bottom: 96px;
  min-height: auto; /* wrap contents instead of 120vh */
}
.contact .contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.contact-title {
  font-family: var(--fam-font-heading);
  font-weight: 400;
  font-style: normal;
  font-size: 36px;
  line-height: 44px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #202126;
  margin: 0;
}

.contact-subtitle {
  margin-top: 24px; /* 24px gap */
  font-family: var(--fam-font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.02em; /* 2% */
  color: #616262;
  max-width: 52ch;
}

.contact-feedback {
  font-family: var(--fam-font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.02em;
  padding: 12px 20px;
  border-radius: 4px;
  margin-top: 24px;
  width: fit-content;
}

.contact-feedback.success-message {
  background-color: #e6ffed; /* Light green */
  color: #1a7f37; /* Dark green */
  border: 1px solid #7ed38c;
}

.contact-feedback.error-message {
  background-color: #fff0f0; /* Light red */
  color: #c92222; /* Dark red */
  border: 1px solid #e0b4b4;
}

.contact-form {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    "name message"
    "email message"
    "phone message"
    "service actions";
  row-gap: 24px; /* 24px gap between fields */
  column-gap: 48px; /* 48px gap between left column and message/CTA column */
}

.contact-form .field-group { position: relative; }

.contact-form input {
  width: 330px;
  height: 48px;
  background: transparent;
  border: 1px solid rgba(97, 98, 98, 0.3); /* per spec */
  color: #202126;
  font-family: var(--fam-font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.02em;
  padding: 16px 20px; /* top/right/bottom/left per spec */
  box-sizing: border-box;
}

/* Styling for the custom filter dropdowns in the contact form */
.contact-form .filter-dropdown {
  width: 330px; /* Match input field width */
  height: 48px; /* Match input field height */
  border: 1px solid rgba(97, 98, 98, 0.3); /* Match input field border */
  box-sizing: border-box;
  padding: 0 20px; /* Horizontal padding, vertical handled by label */
  display: flex;
  align-items: center;
}

.contact-form .filter-dropdown .filter-label {
  border-bottom: none; /* Remove bottom border from label to use dropdown's own border */
  padding: 0; /* Remove padding from label, handled by parent filter-dropdown */
  width: 100%;
}

.contact-form .filter-dropdown.is-open .filter-label {
  border-color: transparent; /* No border color change on open for filter-label */
}

.contact-form .filter-dropdown .filter-options {
  top: 100%; /* Position options right below the dropdown */
  left: -1px; /* Adjust to align with border */
  right: -1px; /* Adjust to align with border */
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: none;
  max-width: 330px;
}

/* Prevent vertical clipping of placeholder/hint inside dropdowns without changing control height */
/* No longer needed for select element, as we use custom dropdown */

.contact-form textarea {
  width: 330px;
  height: 176px;
  background: transparent;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(97, 98, 98, 0.3);
  color: #202126;
  font-family: var(--fam-font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.02em;
  padding: 16px 20px;
  box-sizing: border-box;
  resize: none; /* fixed size, not extendable */
}

.contact-form input::placeholder,
.contact-form textarea::placeholder { color: #202126; opacity: 1; }

/* Map fields to grid areas */
.contact-form .field-group:nth-child(1) { grid-area: name; }
.contact-form .field-group:nth-child(2) { grid-area: email; }
.contact-form .field-group.field-phone { grid-area: phone; }
.contact-form .field-group:nth-child(4) { grid-area: service; }
.contact-form .field-message { grid-area: message; }
.contact-form .form-actions { grid-area: actions; align-self: start; margin-top: 0px; /* moved up ~25% (12px of 48px button height) */ }

/* override default min-height removed above */

/* Custom select arrow (simple) - NO LONGER USED, replaced by custom dropdowns */
/* .select-with-arrow {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: linear-gradient(45deg, #4E0004 50%, transparent 50%),
                    linear-gradient(135deg, #4E0004 50%, transparent 50%);
  background-position: right 24px top 55%, right 16px top 55%;
  background-size: 8px 8px, 8px 8px;
  background-repeat: no-repeat;
} */

.contact .btn.btn-on-light-red { height: 48px; padding: 8px 24px; }

/* Contact Info Map Section */
.contact-info-map.page-section {
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: 96px;
  padding-bottom: 96px;
  min-height: auto; /* wrap contents instead of 120vh */
}

.contact-info-map .container {
  width: 100%;
  max-width: var(--fam-page-max-width);
  margin: 0 auto;
  padding: 0 var(--fam-container-padding);
  box-sizing: border-box;
}

.map-container {
  width: 100%;
  height: 100%;
  background-image: url('https://fam-contracting.com/wp-content/uploads/2025/09/Map.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: flex-start; /* left align the card */
  align-items: flex-start;
  min-height: auto; /* at least the card height so image shows fully */
}

.contact-info-card {
  width: 371px;
  min-height: 515px; /* minimum height, but can expand */
  background-color: rgba(244, 244, 244, 1);
  padding: 42px; /* 24px padding on card contents */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 18px; /* reduced gap between each section */
}

.info-title {
  font-family: var(--fam-font-body);
  font-weight: 600; /* SemiBold */
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0.02em; /* 2% */
  text-transform: uppercase;
  color: #202126;
  margin: 0;
}

.info-detail {
  font-family: var(--fam-font-body);
  font-weight: 300; /* Light */
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.02em; /* 2% */
  color: rgba(97, 98, 98, 1);
  margin: 0;
}

.contact-info-card .btn {
  margin-top: auto; /* push button to bottom */
}

/* FAQ Styles */
.faq.page-section { 
  align-items: flex-start; 
  justify-content: flex-start;
  padding-top: 96px;
  padding-bottom: 96px;
  min-height: auto; /* wrap contents instead of 120vh */
}

.faq .container {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.faq .faq-title {
  font-family: var(--fam-font-heading);
  font-weight: 400;
  font-style: normal;
  font-size: 36px;
  line-height: 24px;
  letter-spacing: 0;
  color: #202126;
  text-transform: none;
  margin: 0 0 48px 0; /* 48px gap to questions */
  width: 100%;
  text-align: left;
}

/* FAQ title mobile - line height 1 */
@media (max-width: 768px) {
  .faq .faq-title {
    line-height: 1.2;
  }
}

.faq-list { 
  border-top: none; 
  width: 100%; 
  max-width: 100%;
}

.faq-item { 
  border-bottom: 1px solid rgba(0,0,0,0.1); 
  width: 100%;
  display: block;
}
.faq-item[open] { background: transparent; }

.faq-question {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.faq-question::-webkit-details-marker { display: none; }

.faq-question .q-text {
  font-family: var(--fam-font-body);
  font-weight: 600; /* SemiBold */
  font-size: 18px;
  line-height: 120%;
  letter-spacing: 0;
  color: #202126;
  flex: 1 1 auto; /* take full available width, push icon to far right */
}

.faq-icon { width: 24px; height: 24px; flex: 0 0 auto; }
.faq-icon-cross { display: none; }
.faq-item[open] .faq-icon-plus { display: none; }
.faq-item[open] .faq-icon-cross { display: inline-block; }

.faq-answer {
  font-family: var(--fam-font-body);
  font-weight: 300; /* Light */
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
  color: rgba(97, 98, 98, 1);
  padding: 0 0 16px 0;
  width: 100%;
}

@media (max-width: 480px) {
  .contact-info-map .container {
    padding: 0 var(--fam-mobile-edge-padding);
  }
}

@media (max-width: 980px) {
  .contact .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .contact-form { grid-template-columns: 1fr; grid-template-areas:
    "name"
    "email"
    "phone"
    "service"
    "message"
    "actions"; }
  .contact-form input,
  .contact-form .filter-dropdown,
  .contact-form textarea { width: 100%; }
}