/* Contact CTA banner — v1.5.0 full rebuild.
 *
 * Previous versions of this module (v124 through v132) accumulated a
 * 3-track CSS Grid (minmax(390px,40%) minmax(280-330px,26-28%) minmax(...))
 * with separate hand-tuned pixel overrides at four different breakpoints,
 * plus THREE more competing full copies of the same rules left behind in
 * page-v116.css from earlier redesigns (all now removed). Any one of those
 * layers could win a given property on a given screen width depending on
 * source order, which is what produced the recurring bugs: text overlapping
 * the form at tablet width, a flat white wash overpowering the mint page
 * background on mobile, clipped card height, etc.
 *
 * This file is the ONLY stylesheet allowed to touch this module now
 * (elementor-element-5fdb8b83 and its descendants). Layout uses a single
 * flexbox rule that wraps naturally — no per-breakpoint column-width math.
 *
 * Structure (unchanged, from Elementor):
 *   .elementor-element-5fdb8b83                 section (photo + mint wash)
 *     > .e-con-inner
 *       > .elementor-element-1a3be6a4            band (flex row -> column)
 *         > .elementor-element-5ac67d84  .sopcta-copy   text column
 *         > .elementor-element-6fc59aa2  .sopcta-form   form card
 */

/* fix: replaced the photo background entirely (v1.6.0). It was a small
   450x400 crop stretched/cropped to fit widths from 340px to 1200px+,
   which is what forced the whole "auto 100% vs cover" tradeoff and the
   mobile no-photo fallback this file used to carry. A generated gradient
   scales to any width with no crop math and no dead weight to download. */
/* fix: this used to be a rounded 1200px-wide "card" floating on the page
   with a 48px mint gap on every side (margin:48px auto) - the gradient's
   own hard-edged rounded corner sat directly against that plain mint gap,
   reading as a box dropped onto the page rather than part of it. Full-bleed
   (no side margins, no border-radius) turns it into a continuous band -
   the color change between sections is still visible, but without a boxed
   edge/corner it reads as one flowing layout instead of a seam. */
body.page-id-536 .elementor-element-5fdb8b83,
body.page-id-536 .elementor-element-5fdb8b83.sop8-reveal {
  position: relative !important;
  isolation: isolate !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  background: #eefaf8 url("./contact-bg.jpg") center center / cover no-repeat !important;
  opacity: 1 !important;
  transform: none !important;
}

/* fix: the old dot-grid overlay (::before) was hand-drawn to sit on top of
   the flat gradient this section used to have - the new background image
   already carries its own dot texture and rounded-rectangle line accents,
   so that overlay is gone now to avoid a double-texture clash. */

body.page-id-536 .elementor-element-5fdb8b83 > .e-con-inner {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* the band: flex row on wide screens, wraps to a column when it no longer
   fits - no explicit breakpoint needed for the wrap itself */
body.page-id-536 .elementor-element-5fdb8b83 .elementor-element-1a3be6a4 {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 1200px !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: clamp(10px, 1.3vw, 18px) clamp(24px, 5vw, 56px) clamp(14px, 2vw, 28px) !important;
  gap: clamp(24px, 4vw, 40px) !important;
  overflow: visible !important;
  background: transparent !important;
}

/* text column */
body.page-id-536 .elementor-element-5fdb8b83 .elementor-element-5ac67d84 {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  flex: 1 1 320px !important;
  width: auto !important;
  max-width: 420px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.page-id-536 .elementor-element-5fdb8b83 .elementor-element-5ac67d84 > .elementor-element {
  width: 100% !important;
  max-width: 100% !important;
}

body.page-id-536 .elementor-element-5fdb8b83 .sopcta-kicker,
body.page-id-536 .elementor-element-5fdb8b83 .sopcta-kicker .elementor-widget-container,
body.page-id-536 .elementor-element-5fdb8b83 .sopcta-kicker p {
  margin: 0 0 13px !important;
  color: #008c89 !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  letter-spacing: 0.075em !important;
  text-transform: uppercase !important;
}

body.page-id-536 .elementor-element-5fdb8b83 .sopcta-title {
  margin: 0 0 15px !important;
}

body.page-id-536 .elementor-element-5fdb8b83 .sopcta-title .elementor-heading-title {
  max-width: 390px !important;
  margin: 0 !important;
  color: #073a3c !important;
  font-size: clamp(26px, 3vw, 31px) !important;
  line-height: 1.1 !important;
  font-weight: 650 !important;
  letter-spacing: -0.03em !important;
}

body.page-id-536 .elementor-element-5fdb8b83 .sopcta-text,
body.page-id-536 .elementor-element-5fdb8b83 .sopcta-text .elementor-widget-container,
body.page-id-536 .elementor-element-5fdb8b83 .sopcta-text p {
  max-width: 390px !important;
  margin: 0 0 18px !important;
  color: #557273 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
}

body.page-id-536 .elementor-element-5fdb8b83 .sopcta-phone,
body.page-id-536 .elementor-element-5fdb8b83 .sopcta-phone .elementor-widget-container,
body.page-id-536 .elementor-element-5fdb8b83 .sopcta-phone p {
  margin: 0 !important;
}

body.page-id-536 .elementor-element-5fdb8b83 .sopcta-phone a {
  color: #073a3c !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  font-weight: 800 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* form card - always a real white card with its own elevation, at every
   width, so it reads correctly whether it sits over the photo or over the
   plain mint background once the band wraps to a column */
body.page-id-536 .elementor-element-5fdb8b83 .elementor-element-6fc59aa2 {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  /* fix: a fixed flex-basis (the 3rd value in the old "flex: 0 1 300px")
     sets the item's size on the BAND's main axis - width in row mode
     (desktop), but height once the <900px media query below flips the
     band to flex-direction:column (mobile/tablet). At 300px that capped
     the form to a 300px-tall box regardless of the explicit height:auto
     next to it (flex-basis wins over height when it isn't auto), so the
     6th field + submit button had nowhere to go and Elementor's own
     flex-wrap:wrap (from .e-con's var(--flex-wrap)) shoved them into a
     phantom second column off to the right instead of stacking below.
     flex-basis:auto lets each axis size itself from width/height instead. */
  flex: 0 1 auto !important;
  width: 100% !important;
  max-width: 300px !important;
  min-width: 260px !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 22px 20px !important;
  gap: 5px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 16px 40px rgba(7, 58, 60, 0.14) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body.page-id-536 .elementor-element-5fdb8b83 .elementor-element-6fc59aa2 > .elementor-element {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

body.page-id-536 .elementor-element-5fdb8b83 .sop8-field {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  color: #073a3c !important;
}

body.page-id-536 .elementor-element-5fdb8b83 .sop8-field > span {
  display: block !important;
  margin: 0 0 2px !important;
  color: #073a3c !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

body.page-id-536 .elementor-element-5fdb8b83 .sop8-field input,
body.page-id-536 .elementor-element-5fdb8b83 .sop8-field textarea {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 4px 0 6px !important;
  border: 0 !important;
  border-bottom: 1px solid #cbdcda !important;
  border-radius: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: #073a3c !important;
  font: inherit !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  box-shadow: none !important;
  resize: vertical !important;
}

body.page-id-536 .elementor-element-5fdb8b83 .sop8-field textarea {
  min-height: 44px !important;
  max-height: 70px !important;
}

body.page-id-536 .elementor-element-5fdb8b83 .sop8-field input:focus,
body.page-id-536 .elementor-element-5fdb8b83 .sop8-field textarea:focus {
  border-bottom-color: #0ca39d !important;
}

body.page-id-536 .elementor-element-5fdb8b83 .sop8-field [aria-invalid="true"] {
  border-bottom-color: #c84e4e !important;
}

body.page-id-536 .elementor-element-5fdb8b83 .sop8-field small {
  display: block !important;
  min-height: 0 !important;
  margin: 2px 0 0 !important;
  color: #b23d3d !important;
  font-size: 9px !important;
  line-height: 1.15 !important;
}

body.page-id-536 .elementor-element-5fdb8b83 .sopcta-submit .elementor-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 44px !important;
  margin: 6px 0 0 !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #0ca39d !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: 0 8px 18px rgba(12, 163, 157, 0.18) !important;
  cursor: pointer !important;
}

body.page-id-536 .elementor-element-5fdb8b83 .sop8-success {
  margin: 0 !important;
  color: #087b76 !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}

/* fix: photo column re-added (see addContactPhoto() in page-v116.js) as a
   bounded flex item instead of the old full-width background - object-fit
   only has to cover this panel's own box, not every viewport width. */
body.page-id-536 .elementor-element-5fdb8b83 .sopcta-photo {
  flex: 1 1 220px !important;
  max-width: 280px !important;
  min-width: 200px !important;
  align-self: stretch !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 16px 40px rgba(7, 58, 60, 0.28) !important;
  min-height: 260px !important;
}

body.page-id-536 .elementor-element-5fdb8b83 .sopcta-photo img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 20% !important;
}

@media (max-width: 640px) {
  body.page-id-536 .elementor-element-5fdb8b83 .sopcta-photo {
    max-width: none !important;
    min-height: 220px !important;
  }
}

/* below this width the band has already wrapped to a column (flex-wrap
   handles that on its own) - the gradient background scales to any height
   with no crop math, so nothing needs to change about it here. */
@media (max-width: 899px) {
  body.page-id-536 .elementor-element-5fdb8b83 .elementor-element-1a3be6a4 {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body.page-id-536 .elementor-element-5fdb8b83 .elementor-element-5ac67d84 {
    max-width: none !important;
    align-items: flex-start !important;
  }

  body.page-id-536 .elementor-element-5fdb8b83 .sopcta-title .elementor-heading-title,
  body.page-id-536 .elementor-element-5fdb8b83 .sopcta-text,
  body.page-id-536 .elementor-element-5fdb8b83 .sopcta-text .elementor-widget-container,
  body.page-id-536 .elementor-element-5fdb8b83 .sopcta-text p {
    max-width: none !important;
  }

  body.page-id-536 .elementor-element-5fdb8b83 .elementor-element-6fc59aa2 {
    max-width: 420px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 480px) {
  body.page-id-536 .elementor-element-5fdb8b83,
  body.page-id-536 .elementor-element-5fdb8b83.sop8-reveal {
    width: calc(100% - 24px) !important;
    margin: 24px auto !important;
    border-radius: 16px !important;
  }

  body.page-id-536 .elementor-element-5fdb8b83 .sopcta-title .elementor-heading-title {
    font-size: 26px !important;
  }
}