@font-face {
  font-family: "Builders Display";
  src: url("/fonts/league-gothic-variable.woff2") format("woff2");
  font-display: swap;
  font-stretch: 75% 100%;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Builders Heading";
  src: url("/fonts/lato-400.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Builders Heading";
  src: url("/fonts/lato-400-italic.woff2") format("woff2");
  font-display: swap;
  font-style: italic;
  font-weight: 400;
}

@font-face {
  font-family: "Builders Heading";
  src: url("/fonts/lato-700.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: "Builders Heading";
  src: url("/fonts/lato-900.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 900;
}

@font-face {
  font-family: "Builders Sans";
  src: url("/fonts/maven-pro-variable.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400 900;
}

/* Preserve the legacy templates' established metrics. Typography changes must
   be introduced component-by-component instead of globally remapping headings. */
@font-face {
  font-family: anivers;
  src: url("/fonts/karla-variable.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 100 900;
}

@font-face {
  font-family: anivers;
  src: url("/fonts/karla-variable-italic.woff2") format("woff2");
  font-display: swap;
  font-style: italic;
  font-weight: 100 900;
}

@font-face {
  font-family: trumpgothicpro;
  src: url("/fonts/oswald-variable.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 100 900;
}

@font-face {
  font-family: lato;
  src: url("/fonts/lato-400.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: lato;
  src: url("/fonts/lato-700.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: lato;
  src: url("/fonts/lato-900.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 900;
}

/* Keep the brand visible above the poster/video layer at every breakpoint. */
.banner-navbar,
.navbar,
.navbar-brand {
  position: relative;
  z-index: 3;
}

.navbar-brand {
  z-index: 3;
}

.navbar-brand-image {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Landing-page CSS colors regular navigation links blue on the same blue
   header. The injected shared navigation must retain readable contrast. */
.builders-standard-navigation .navbar-link {
  color: #fff !important;
}

/* Testimonials must not depend on Divi's private-use icon font. */
.et-db #et-boc .et-l .et_pb_testimonial::before {
  align-items: center;
  content: "\201C" !important;
  display: flex;
  font-family: Georgia, serif !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  height: 32px;
  justify-content: center;
  line-height: 1 !important;
  padding-top: 8px;
  width: 32px;
}

/* Background color owns the first paint until the video iframe loads. */
.builders-hero-media {
  background: #004f6f;
  container-type: size;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

/* iframe doesn't support object-fit, so cover the container by oversizing the
   iframe to a fixed 16:9 box guaranteed to meet or exceed the container in
   both dimensions, centering it, and clipping the excess via overflow:hidden
   above. vw/vh is a fallback for browsers without container query units; the
   cqw/cqh declarations after them win wherever supported, sizing off the
   actual hero box instead of the viewport (there's a header above this
   section and small negative margins, so it isn't exactly viewport-sized). */
.builders-hero-media iframe {
  border: 0;
  height: 56.25vw;
  left: 50%;
  min-height: 100vh;
  min-width: 177.78vh;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 56.25cqw;
  min-height: 100cqh;
  min-width: 177.78cqh;
  width: 100cqw;
}

.home .et_pb_section_0 > .et_pb_row_0 {
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .builders-hero-media iframe {
    display: none;
  }
}

@media (max-width: 767px) {
  /* The legacy page assigns this section an 808px minimum height, leaving a
     large empty band below the responsive Vimeo player on phones. */
  .home .et_pb_section_1 {
    min-height: 0 !important;
  }

  /* Divi gave the middle feature image a smaller percentage width. Keep all
     three mobile portraits on the same circular scale. */
  .home .et_pb_section_2 .circle {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 85% !important;
    width: 265px !important;
  }

  .home .et_pb_section_2 .circle .et_pb_image_wrap,
  .home .et_pb_section_2 .circle img {
    aspect-ratio: 1;
    display: block;
    width: 100% !important;
  }

  .home .et_pb_section_2 .circle img {
    height: 100% !important;
    object-fit: cover;
  }
}

/* Divi keeps these rows stacked until 981px, but reveals their large images at
   768px. Pair the image and copy on tablets instead of creating giant gaps. */
@media (min-width: 768px) and (max-width: 980px) {
  .home .et_pb_section_2 .et_pb_row {
    align-items: center;
    display: flex;
  }

  .home .et_pb_section_2 .et_pb_column_2_5 {
    flex: 0 0 40%;
    width: 40% !important;
  }

  .home .et_pb_section_2 .et_pb_column_3_5 {
    flex: 0 0 54.5%;
    width: 54.5% !important;
  }

  .home .et_pb_section_2 .et_pb_column:not(.et-last-child) {
    margin-right: 5.5% !important;
  }

  .home .et_pb_section_2 .et_pb_column.et-last-child {
    margin-right: 0 !important;
  }
}

/* Keep the compact navigation until the rest of the layout reaches its
   desktop breakpoint. */
@media (min-width: 900px) and (max-width: 980px) {
  .navbar,
  .navbar-nav {
    height: auto;
    min-height: 3.157rem;
  }

  .navbar {
    flex-wrap: wrap;
  }

  .navbar .navbar-brand {
    margin-bottom: 0.789rem;
    margin-top: 0.789rem;
  }

  .navbar .navbar-brand-image {
    height: 1.579rem;
  }

  .navbar .navbar-toggle {
    display: block;
  }

  .navbar > .nav--sm .is-sticky {
    display: inline-block;
  }

  .navbar > .nav--sm .is-sticky .navbar-link {
    border-radius: 0.888rem;
    border-width: 2px;
    font-size: 0.563rem;
    line-height: 1.333;
    padding: 0.422rem 0.563rem;
  }

  .navbar .navbar-collapse {
    order: 4;
    width: 100%;
  }

  .navbar .navbar-collapse:not(.show) {
    display: none;
  }

  .navbar .navbar-collapse.show {
    display: block;
  }

  .navbar-collapse .is-sticky {
    display: none;
  }

  .navbar-nav,
  .navbar-nav .navbar-item,
  .navbar-nav .navbar-link {
    width: 100%;
  }
}

/* Pastor actions use SVGs and a shared grid instead of browser-dependent glyphs. */
.page-id-27 .builders-action-icon {
  color: #7ebec5;
  display: block;
  height: 96px;
  margin: 0 auto;
  width: 96px;
}

.page-id-27 .et_pb_row_1 .et_pb_icon_wrap {
  display: block !important;
  line-height: 0;
}

@media (min-width: 981px) {
  .page-id-27 .et_pb_row_1 {
    align-items: stretch;
    display: grid !important;
    gap: 2rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-id-27 .et_pb_row_1 > .et_pb_column {
    display: grid;
    float: none !important;
    grid-template-rows: auto 1fr auto;
    margin: 0 !important;
    width: auto !important;
  }

  .page-id-27 .et_pb_row_1 .et_pb_button_module_wrapper {
    align-self: end;
  }
}

@media (max-width: 980px) {
  .body-inner {
    overflow-x: hidden;
  }

  .page-id-27 .et_pb_row_1 > .et_pb_column + .et_pb_column {
    margin-top: 2.369rem !important;
  }
}

/* Font metrics must not move the Project Life seal. */
.cms-project__seal {
  align-self: flex-start;
  flex: 0 0 90px;
  margin-left: 1rem;
  width: 90px;
}

.cms-project__seal img {
  height: auto;
  max-width: 100%;
  width: 90px;
}

#project-life-certified > .flex > .flex-natural:first-child {
  align-self: flex-start;
  flex: 0 0 110px;
  width: 110px;
}

@media (max-width: 767px) {
  .cms-project__seal {
    flex-basis: 72px;
    margin-left: 0.75rem;
    width: 72px;
  }

  .cms-project__seal img {
    width: 72px;
  }
}