/* / contact group styles (owned by the contact-legal agent) */

/* 404 helper links */
.la-404-links {
  margin-top: 24px;
  font-family: Poppins, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: #6b6b6b;
  text-align: center;
}

.la-404-links a {
  color: #211e1d;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.la-404-links a:hover {
  color: #536ee5;
}

/* Contact A + B FAQ: renamed from the template's faq-question / faq-answer /
   faq-plus-icon-wrapper-2 classes, which sections.css force-hides for Home A.
   Rules mirror the template's originals so the accordions render unchanged. */
.contact-faq-question {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  font-family: var(--font-family--font-family-heading);
  color: var(--_color-and-text-hight---color--dark-2);
  font-size: var(--font-size--display-sm);
  font-weight: var(--_color-and-text-hight---font-weight--medium);
  justify-content: space-between;
  align-self: stretch;
  align-items: center;
  display: flex;
}

.contact-faq-answer {
  overflow: hidden;
}

.contact-faq-plus-icon {
  color: #0000;
  background-color: #fff;
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  display: flex;
}

@media screen and (max-width: 991px) {
  .contact-faq-question {
    font-size: var(--font-size--text-xl-fixed);
  }
}

@media screen and (max-width: 479px) {
  .contact-faq-question {
    justify-content: space-between;
    align-items: flex-start;
  }
}

/* Contact C FAQ cards: the template gives each card min-height 245px with
   space-between plus a large flex gap, so collapsed cards reserve a block of
   empty space under the question. Collapse the reserve so closed cards hug
   the question row; the open-state gap moves into the answer's own padding,
   which the GSAP height animation measures via offsetHeight. */
.faq-3-card-wrapper {
  min-height: 0;
  justify-content: flex-start;
  grid-row-gap: 0;
  row-gap: 0;
}

.faq-3-answer-wrapper {
  height: 0;
  opacity: 0;
  visibility: hidden;
}

.home-3-faq-answer {
  padding-top: 16px;
}

/* Contact A FAQ list: renamed from the template's faq-tab / faq-tab-menue /
   faq-tab-link / faq-card-wrapper classes, which sections.css force-hides for
   Home A. Rules mirror the template's originals exactly so the accordion
   renders as designed. */
.contact-faq-tab {
  flex-flow: column;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: flex-start;
  width: 100%;
  min-width: 100%;
  height: 100%;
}

.contact-faq-tab-menue {
  flex-flow: column;
  order: 9999;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  min-width: 100%;
  display: flex;
}

.contact-faq-tab-link {
  border: 1px solid var(--_color-and-text-hight---color--strock);
  border-radius: var(--_size-responsiveness---radious--radius-xl);
  background-color: var(--_color-and-text-hight---color--background);
  color: #eee;
  width: 100%;
  margin-bottom: -16px;
  padding: 24px 20px;
  font-weight: 400;
  text-decoration: none;
}

.contact-faq-tab-link.w--current {
  border-width: 1px;
  border-color: var(--_color-and-text-hight---color--strock);
  border-radius: var(--_size-responsiveness---radious--radius-xl);
  background-color: var(--_color-and-text-hight---color--white);
}

/* Shared by Contact A and Contact B (contact-b's cards sit inside the
   faq-2 tab links, same wrapper markup). */
.contact-faq-card-wrapper {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

@media screen and (max-width: 991px) {
  .contact-faq-tab {
    flex-flow: column;
  }

  .contact-faq-tab-link {
    width: 100%;
  }

  .contact-faq-tab-link.w--current {
    align-self: stretch;
  }

  .contact-faq-card-wrapper {
    justify-content: center;
    align-items: flex-start;
  }
}

@media screen and (max-width: 479px) {
  .contact-faq-tab-link,
  .contact-faq-tab-link.w--current {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Contact A hero card: the avatar-row caption used to wear the card's big
   heading style (contact-client-text), which made it read as the title of the
   checklist below. The caption goes small; the checklist gets its own real
   heading. */
.contact-client-caption {
  font-family: var(--font-family--font-family-heading);
  color: #6b7280;
  font-size: 14px;
  line-height: 1.4;
  font-weight: var(--_color-and-text-hight---font-weight--medium);
}

.contact-review-heading {
  margin: 0;
  font-family: var(--font-family--font-family-heading);
  color: var(--_color-and-text-hight---color--dark);
  font-size: var(--font-size--display-md);
  line-height: var(--_color-and-text-hight---line-hight--line-height-none);
  font-weight: var(--_color-and-text-hight---font-weight--semibold);
}

@media screen and (max-width: 991px) {
  .contact-review-heading {
    font-size: var(--font-size--display-sm);
  }
}

/* Contact B CTA card at phone width: the collage is three fixed-width photos
   laid out in a row, so at 390px the second photo gets sliced at the card edge
   and the third never appears. Show one photo full-width inside the card and
   drop the overflowing pair plus the marquee edge shadows. */
@media screen and (max-width: 479px) {
  .cta-2-right-content-wrapper {
    flex-flow: column;
    justify-content: center;
    align-items: stretch;
    width: 100%;
  }

  .cta-2-right-content-wrapper > .cta-2-single-image-wrapper {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
  }

  .cta-2-right-content-wrapper .cta-2-image-wrapper,
  .home-2-cta-left-shadow,
  .home-2-cta-right-shadow {
    display: none;
  }

  .cta-2-image {
    width: 100%;
    height: auto;
    display: block;
  }
}

/* Contact A: the column stretches to match the checklist beside it, and
   space-between pins the form to the bottom. That is the empty band under
   "Tell us where your week goes". */
.join-us-grid {
  align-items: start;
}

.join-1-contact-wrapper {
  justify-content: flex-start !important;
  height: auto !important;
  gap: 20px;
}

/* Contact master: B's info tiles sit under A's form. */
.la-contact-tiles { width: 100%; margin-top: 20px; }
.la-contact-tiles .contact-2-address-wrapper { width: 100%; }
.faq-image[src*="the-builders.jpg"] { object-fit: cover; object-position: 80% 35%; }

/* Owners avatar stack on Contact: one even row, same size, same overlap. */
.hero-avatar-group-component .contact-client-image-wrapper { width: 2.25rem; height: 2.25rem; margin-right: -.6rem; justify-content: center; }
.hero-avatar-group-component .avatar-group-item { width: 2.25rem; height: 2.25rem; margin: 0; position: relative; object-fit: cover; border: 2px solid #FFFFFF; border-radius: 50%; padding: 0; }
/* The hero paragraph reads in fewer, longer lines (2026-10-05). */
.contact-hero-subtitle-wrapper { max-width: 46rem; }