/* Video wrapper sits behind overlay/content */
.nhls-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* HubSpot video_player outputs a wrapper + iframe/scripted embed.
   Force whatever it outputs to fill the hero. */
.nhls-hero__media iframe,
.nhls-hero__media video,
.nhls-hero__media .hs-video-widget,
.nhls-hero__media .vidyard_player,
.nhls-hero__media [class*="video"],
.nhls-hero__media > span,
.nhls-hero__media > div {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* If the embed uses an iframe, this helps it “cover” like a bg video */
.nhls-hero__media iframe {
  transform: scale(1.15);
}

/* Optional: hide any leftover UI overlays if they appear */
.nhls-hero__media * {
  outline: none;
}


/* Hide native play button overlays (iOS / WebKit) */
.nhls-hero__video::-webkit-media-controls {
  display: none !important;
}

.nhls-hero__video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}


.nhls-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: white;
  text-align: center;
}

/* NEW: when background_media = bg-video, avoid fixed attachment */
.nhls-hero--video {
  background-attachment: scroll;
}

/* NEW: video layer (sits above background-image, below overlay/content) */
.nhls-hero__media {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  overflow: hidden;
}

/* NEW: full-bleed background video */
.nhls-hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  object-position: center;
}

/* Override global h1 styles within hero */
.nhls-hero h1,
.nhls-hero h2,
.nhls-hero h3,
.nhls-hero h4,
.nhls-hero h5,
.nhls-hero h6 {
  color: white !important;
}

.nhls-hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.nhls-hero__content {
  position: relative;
  z-index: 2;
  max-width: 1200px !important;
  padding: 0 20px;
}

.nhls-hero .nhls-hero__title,
.nhls-hero h1.nhls-hero__title,
.nhls-hero__title {
 font-size: 2.25rem;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.1;
  text-transform: none;
  letter-spacing: -0.02em;
  color: white !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.nhls-hero__sub {
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: 40px;
  color: white;
  opacity: 0.95;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* NEW: optional support if your markup uses nhls-hero__subtitle */
.nhls-hero__subtitle {
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: 40px;
  color: white;
  opacity: 0.95;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.nhls-hero .nhls-button,
.nhls-hero .nhls-button--pill {
  background: #4caf50;
  color: white;
  padding: 8px 16px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: none;
  display: inline-block;
  cursor: pointer;
}

.nhls-hero .nhls-button,
.nhls-hero .nhls-button--pill {
 transform: translateY(0px) !important;;
  transition:.25s ease-in !important;}

.nhls-hero .nhls-button:hover,
.nhls-hero .nhls-button--pill:hover {
background: #42513a82 !important; 
transition:.25s ease-in !important;
  transform: translateY(-2px) !important;;
  box-shadow: none;
}
@supports (height: 100svh) {
  @media (min-width: 769px) and (max-width: 1024px) {
    .nhls-hero {
      height: 70svh;
      min-height: 70svh;
    }
  }
}

/* Media Queries */
@media (max-width: 1200px) {
  .nhls-hero__title {
    font-size: 2.2rem;
  }

  .nhls-hero__sub {
    font-size: 1.1rem;
  }

  /* NEW: keep subtitle alias in sync */
  .nhls-hero__subtitle {
    font-size: 1.1rem;
  }
}

/* Tablet height normalization (iPad / medium screens) */
@media (min-width: 769px) and (max-width: 1024px) {
  .nhls-hero {
    min-height: 70vh;
    height: 70vh;
    max-height: 800px;
  }

  /* Ensure background video respects the capped height */
  .nhls-hero--video .nhls-hero__media,
  .nhls-hero--video .nhls-hero__video {
    height: 100%;
  }
}


@media (max-width: 768px) {
  
  .nhls-hero {
    height: 90vh;   
    min-height:fit-content;
    max-height: 700px;
    background-attachment: scroll;
  }

  .nhls-hero .nhls-hero__title,
  .nhls-hero h1.nhls-hero__title,
  .nhls-hero__title {
    color: #fff !important;
    font-size: 1.5rem;
    width: 90%;
    margin: 0 auto;
  }

  .nhls-hero__sub {
    font-size: 1rem;
    margin-bottom: 30px;
  }

  /* NEW: keep subtitle alias in sync */
  .nhls-hero__subtitle {
    font-size: 1rem;
    margin-bottom: 30px;
  }

  .nhls-hero .nhls-button {
    padding: 8px 16px;
    font-size: 14px;
  }
}

@media (max-width: 576px) {
  .nhls-hero__title {
    font-size: 1.8rem;
  }

  .nhls-hero__sub {
    font-size: 0.9rem;
  }

  /* NEW: keep subtitle alias in sync */
  .nhls-hero__subtitle {
    font-size: 0.9rem;
  }
}

/* NEW: respect reduced motion users — show image fallback (video hidden) */
@media (prefers-reduced-motion: reduce) {
  .nhls-hero__video {
    display: none;
  }
}

/* Make the HS video embed behave like a background layer */
.nhls-hero--video .nhls-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* Kill the 16:9 aspect-ratio wrapper so it can fill the hero */
.nhls-hero--video .nhls-hero__media .hs-video-container {
  max-width: none !important;
  margin: 0 !important;
  height: 100% !important;
}

.nhls-hero--video .nhls-hero__media .hs-video-wrapper {
  position: absolute !important;
  inset: 0 !important;
  height: 100% !important;
  padding-bottom: 0 !important; /* removes 56.25% */
}

/* Fill the hero */
.nhls-hero--video .nhls-hero__media iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}

/* “Cover” effect (iframe videos need scaling) */
.nhls-hero--video .nhls-hero__media iframe {
  transform: scale(1.15);
}

/* Let the section background-image show through while video is “loading” */
.nhls-hero--video .nhls-hero__media {
  background: transparent;
}

/* Some HS embeds paint a background; keep it from masking your bg image */
.nhls-hero--video .nhls-hero__media .hs-video-widget,
.nhls-hero--video .nhls-hero__media .hs-video-container,
.nhls-hero--video .nhls-hero__media .hs-video-wrapper {
  background: transparent !important;
}
.nhls-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.nhls-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* FINAL: native background video should not be translated */
.nhls-hero--video .nhls-hero__video {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important; /* cancels translate(-50%, -50%) */
  object-fit: cover;
  object-position: center;
}

.nhls-hero--video .nhls-hero__media {
  pointer-events: none;
}