/* Mirror the inline lazy-load gate from the original page so background images
   only appear once the e-lazyloaded class is applied by IntersectionObserver. */
.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload),
.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload) * {
  background-image: none !important;
}
@media screen and (max-height: 1024px) {
  .e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload),
  .e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload) * {
    background-image: none !important;
  }
}
@media screen and (max-height: 640px) {
  .e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload),
  .e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload) * {
    background-image: none !important;
  }
}

/* Make the background video element itself cover its container. Elementor's
   frontend.min.css already sets position:absolute and inset:0 on the wrapper. */
.elementor-background-video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Native Netlify contact form, styled to mirror the HubSpot embed it replaces:
   pill-shaped fields on the green section, teal submit button. */
.ce-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 640px;
  margin: 0 auto;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.ce-form__hp {
  position: absolute;
  left: -10000px;
}
.ce-form__field {
  display: block;
}
.ce-form__label-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.ce-form input[type='email'],
.ce-form input[type='text'],
.ce-form textarea {
  width: 100%;
  background: #f5f8fa;
  border: 1px solid #cbd6e2;
  border-radius: 999px;
  padding: 14px 22px;
  font: inherit;
  color: #33475b;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ce-form textarea {
  border-radius: 22px;
  resize: vertical;
  min-height: 110px;
}
.ce-form input::placeholder,
.ce-form textarea::placeholder {
  color: #99acc2;
  opacity: 1;
}
.ce-form input:focus,
.ce-form textarea:focus {
  outline: none;
  border-color: #51a39a;
  box-shadow: 0 0 0 3px rgba(81, 163, 154, 0.25);
}
.ce-form__submit {
  align-self: flex-start;
  background: #51a39a;
  color: #fff;
  font: 700 0.95em / 1 'Plus Jakarta Sans', sans-serif;
  border: 0;
  border-radius: 999px;
  padding: 14px 28px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.ce-form__submit:hover,
.ce-form__submit:focus-visible {
  background: #3f8a82;
  outline: none;
}
.ce-form__submit[disabled] {
  opacity: 0.7;
  cursor: progress;
}
.ce-form__status {
  margin: 4px 0 0;
  min-height: 1.2em;
  font-size: 0.95em;
  color: #ffffff;
}
.ce-form__status[data-state='ok'] {
  color: #d4f5d0;
}
.ce-form__status[data-state='err'] {
  color: #ffd5cd;
}

/* Logo wrapper – Elementor's sticky widget keeps this pinned to the top of the
   viewport on desktop/tablet. Replicate the rendered result with position:fixed
   so we don't need Elementor's runtime JS. The elementor-frontend stylesheet
   has a `.e-con > .elementor-element.elementor-absolute` rule, so we match that
   specificity to override it. */
.elementor-748 .elementor-element.elementor-element-99ec111 {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}
@media (max-width: 767px) {
  /* Match the original sticky_on:["desktop","tablet"] – on mobile it's static. */
  .elementor-748 .elementor-element.elementor-element-99ec111 {
    position: absolute;
  }
}