.shht-about-hero {
  display: flex;
  min-height: 480px;
  align-items: center;
}

.shht-about-hero .shht-about-hero__inner {
  padding-top: 6.5rem;
  padding-bottom: 6.5rem;
}

.shht-about-hero h1.text-display {
  line-height: 1.75 !important;
}

.shht-about-hero p.text-body {
  line-height: 1.8 !important;
}

/*
 * Homepage Elementor full-bleed guard
 * ------------------------------------------------------------
 * Home widgets are built as full-bleed sections with inner .container.
 * If a client leaves an Elementor section as Boxed, or Elementor stretch
 * is not recalculated after cache/migration, the section can collapse into
 * the centered content column. This guard forces only homepage top-level
 * Elementor sections/containers to span the viewport while preserving each
 * widget's internal .container layout.
 */
body.home:not(.elementor-editor-active):not(.elementor-editor-preview) .elementor .elementor-top-section,
body.home:not(.elementor-editor-active):not(.elementor-editor-preview) .elementor > .elementor-section,
body.home:not(.elementor-editor-active):not(.elementor-editor-preview) .elementor-section-wrap > .elementor-section,
body.home:not(.elementor-editor-active):not(.elementor-editor-preview) .elementor > .e-con,
body.home:not(.elementor-editor-active):not(.elementor-editor-preview) .elementor > .elementor-element.e-con {
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}

body.home:not(.elementor-editor-active):not(.elementor-editor-preview) .elementor > .elementor-section > .elementor-container,
body.home:not(.elementor-editor-active):not(.elementor-editor-preview) .elementor-section-wrap > .elementor-section > .elementor-container {
  max-width: none !important;
}

body.elementor-editor-active .elementor .elementor-top-section,
body.elementor-editor-preview .elementor .elementor-top-section,
body.elementor-editor-active .elementor > .elementor-section,
body.elementor-editor-preview .elementor > .elementor-section {
  left: auto !important;
  right: auto !important;
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/*
 * Elementor editor preview guard
 * ------------------------------------------------------------
 * Frontend uses the .reveal animation class and JS turns blocks visible
 * after scroll. Inside Elementor's preview iframe that observer may not run
 * reliably, leaving valid widget content rendered with opacity: 0.
 * Keep this scoped to editor/preview only so the public animation is intact.
 */
body.elementor-editor-active .reveal,
body.elementor-editor-preview .reveal,
body.e-preview--show-hidden-elements .reveal,
.elementor-editor-active .reveal,
.elementor-edit-area-active .reveal {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

body.elementor-editor-active .reveal *,
body.elementor-editor-preview .reveal *,
body.e-preview--show-hidden-elements .reveal * {
  opacity: 1 !important;
  visibility: visible !important;
}

@media (min-width: 1024px) {
  .shht-about-hero {
    min-height: 540px;
  }

  .shht-about-hero .shht-about-hero__inner {
    padding-top: 7.5rem;
    padding-bottom: 7.5rem;
  }
}

@media (max-width: 767px) {
  .shht-about-hero {
    min-height: 430px;
  }

  .shht-about-hero .shht-about-hero__inner {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }

  .shht-about-hero h1.text-display {
    line-height: 1.75 !important;
  }
}