.ub-text-header {
  background-color: var(--ub-th-bg, #0F172A) !important;
  margin-top: var(--ub-th-header-clearance, 0px) !important;
  padding-top: 50px !important;
  padding-bottom: 50px !important;
  padding-left: 60px !important;
  padding-right: 60px !important;
  font-family: var(--ub-font-family, 'Open Sans', sans-serif) !important;
  box-sizing: border-box !important;
  width: 100% !important;
  position: relative !important;
}
 
/* Background image mode: hardcoded tall hero sizing + fixed dark overlay */
.ub-th-has-bg-image {
  overflow: hidden !important;
  min-height: 480px !important;
  display: flex !important;
  align-items: center !important;
  padding-top: 140px !important;
  padding-bottom: var(--ub-th-bg-padding-bottom, 140px) !important;
}
 
.ub-th-bg-layer {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 0 !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  pointer-events: none !important;
  transition: transform 0.3s ease !important;
}
 
.ub-th-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: rgba(0, 0, 0, 0.55) !important;
}
 
.ub-th-has-bg-image .ub-th-layout {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
}
 
/* Default (no image): width/centering controlled by --ub-th-max-width plus
   the inline margin-left/margin-right the template already sets per
   instance based on text_alignment — no extra centering rule needed here. */
.ub-th-layout {
  width: 100% !important;
}
 
.ub-th-inner {
  max-width: var(--ub-th-max-width, 600px);
  width: 100% !important;
}
 
/* Split layout when a side image is enabled.
   1240px matches the site-wide standard (same as the header default and
   hero-form module) — was 1200px before, which didn't match. */
.ub-th-has-image .ub-th-layout {
  display: flex !important;
  align-items: center !important;
  gap: 56px !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
}
 
.ub-th-has-image .ub-th-inner {
  flex: 1 1 50% !important;
  min-width: 0 !important;
}
 
.ub-th-image-col {
  flex: 1 1 50% !important;
  min-width: 0 !important;
}
 
.ub-th-side-image {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 12px !important;
  object-fit: cover !important;
}
 
/* Eyebrow — font-family/size/weight/letter-spacing/case now come from
   main.css's shared eyebrow tier (.ub-th-eyebrow was added to that
   selector list); only color/layout stay local here. */
.ub-th-eyebrow {
  color: var(--ub-th-eyebrow-color, #008FA4) !important;
  margin: 0 0 16px 0 !important;
  text-align: var(--ub-th-align, center) !important;
  width: 100% !important;
}
 
.ub-th-eyebrow-pill {
  display: inline-block !important;
  background: rgba(0, 143, 164, 0.12) !important;
  padding: 6px 16px !important;
  border-radius: 20px !important;
  width: auto !important;
}
 
.ub-th-eyebrow-dot {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  justify-content: var(--ub-th-align, center) !important;
}
 
.ub-th-eyebrow-dot-marker {
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--ub-th-eyebrow-color, #008FA4) !important;
  flex-shrink: 0 !important;
}
 
/* Headline — font-family, size, weight, line-height, and letter-spacing
   now come entirely from main.css's shared "Hero titles" tier
   (.ub-th-headline was added to that selector list) — this makes it
   match every other hero headline on the site exactly, including the
   non-bold weight. Note: this means the module's own
   headline_font_size field no longer has any visible effect, since
   main.css forces font-size with !important. Only color/layout stay
   local here. */
.ub-th-headline {
  color: var(--ub-th-headline-color, #ffffff) !important;
  margin: 0 0 20px 0 !important;
  text-align: var(--ub-th-align, center) !important;
  width: 100% !important;
}
 
/* Highlighted portion of the headline — same inline highlight-box
   treatment used on the hero-form module elsewhere on the site.
   A touch of vertical padding + the headline's own looser line-height
   (above) keep this box from visually overlapping the line above/below
   when the highlighted text wraps or sits close to another line. */
.ub-th-highlight {
  display: inline;
  padding: 4px 10px;
  margin: 0 -9px;
  background: var(--ub-th-highlight-bg, #008FA4);
  color: var(--ub-th-highlight-color, #ffffff);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
 
/* Body — same fallback-chain approach as the headline, for the same
   reason (per-instance --ub-th-body-size override to preserve). */
.ub-th-body {
  font-size: var(--ub-th-body-size, var(--ub-text-md, 16px)) !important;
  line-height: var(--ub-line-body, 1.6) !important;
  color: var(--ub-th-body-color, #94A3B8) !important;
  margin: 0 !important;
  font-weight: 400 !important;
  text-align: var(--ub-th-align, center) !important;
  width: 100% !important;
}
 
/* Responsive */
@media (max-width: 860px) {
  .ub-th-has-image .ub-th-layout {
    flex-direction: column !important;
    gap: 14px !important;
  }
  .ub-th-has-image.ub-th-image-left .ub-th-layout {
    flex-direction: column-reverse !important;
  }
  .ub-th-has-image .ub-th-inner,
  .ub-th-has-image .ub-th-image-col {
    flex: none !important;
  }
  .ub-th-has-image .ub-th-headline {
    margin-bottom: 8px !important;
  }
}
@media (max-width: 768px) {
  .ub-text-header {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    margin-top: 72px !important; /* replace 72px with your actual mobile sticky-header height */
  }
  ...
}
  .ub-th-headline {
    font-size: 32px !important;
  }
  .ub-th-body {
    font-size: 15px !important;
  }
}
/* Cap the side image's height so it can't dictate an oversized section */
.ub-th-image-col {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 12px;
}

.ub-th-side-image {
  height: 100% !important;
  object-fit: cover !important;
}

/* Tighter vertical rhythm specifically for side-image mode */
.ub-th-has-image {
  padding-top: 22px !important;
  padding-bottom: 0px !important;
}

.ub-th-cta-wrap {
  margin-top: 28px !important;
  text-align: var(--ub-th-align, center) !important;
}
.ub-th-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 24px !important;
  border: 1.5px solid #008FA4 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: background 0.2s ease !important;
}
.ub-th-cta:hover {
  background: #008FA4 !important;
  color: #ffffff !important;
}
.ub-th-cta svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}
.ub-th-cta:hover svg { transform: translateY(2px); }
@media (max-width: 768px) {
  .ub-th-cta { width: 100% !important; justify-content: center !important; }
}