/* ═══ HOMEPAGE HERO VIDEO — TRANSPARENT HEADER OVERLAY ═══
   The live WordPress site uses Astra's transparent header so the
   navbar sits ON TOP of the hero video with no gap.  The static
   export lost that behaviour.  These rules restore it. */

/* ── 1. Make the header overlay the content with semi-transparent bg ── */
.home #masthead {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  width: 100% !important;
  z-index: 100 !important;
}

.home .ast-primary-header-bar {
  background: rgba(255, 255, 255, 0.85) !important;
  border-bottom: none !important;
}

/* ── 2. Strip wrapper spacing so hero sits at top of page ── */
/* Black background on all wrappers so no white bleeds between dark sections */
.home,
.home.ast-page-builder-template {
  background-color: #000000 !important;
}

.home #content,
.home #content .ast-container,
.home #content #primary,
.home #content .site-main,
.home #content main,
.home #content article,
.home #content .entry-content,
.home #content .elementor,
.home .ast-article-single,
.home .site-content {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* Hide the empty entry-header element */
.home .entry-header.ast-no-title.ast-header-without-markup {
  display: none !important;
}

/* ── 3. Hero video section — full viewport, edge to edge ── */
.elementor-268 .elementor-element.elementor-element-b0db482 {
  background-color: #000000 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  overflow: hidden;
  padding: 0 !important;
  position: relative;
}

/* Kill section margins so everything sits flush */
.elementor-268 .elementor-top-section {
  margin-bottom: 0 !important;
}

.elementor-268 .elementor-element.elementor-element-b0db482 {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* ── 4. Background video container positioning ── */
.elementor-268 .elementor-element.elementor-element-b0db482 .elementor-background-video-container {
  background: transparent;
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

.elementor-268 .elementor-element.elementor-element-b0db482 .elementor-background-video-embed {
  background: transparent;
  height: 100%;
  inset: 0;
  left: 0 !important;
  max-width: none !important;
  position: absolute;
  top: 0 !important;
  transform: none !important;
  width: 100%;
}

/* ── 5. YouTube iframe — cover the entire hero area ── */
.elementor-268 .elementor-element.elementor-element-b0db482 .elementor-background-video-embed iframe {
  border: 0;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: block;
  height: 56.25vw;
  left: 50%;
  max-height: none;
  max-width: none;
  min-height: 100vh;
  min-height: 100svh;
  min-width: 177.78vh;
  min-width: 177.78svh;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 400ms ease;
  width: 100vw;
}

/* ── 6. Hero overlay container ── */
.elementor-268 .elementor-element.elementor-element-b0db482 > .elementor-background-overlay {
  background: none !important;
  opacity: 0 !important;
}

.elementor-268 .elementor-element.elementor-element-b0db482 > .elementor-container {
  max-width: none !important;
  min-height: 100vh !important;
  min-height: 100svh !important;
  position: relative;
  width: 100% !important;
  z-index: 1;
  align-items: flex-end !important;
  padding-bottom: 70px !important;
}

/* ── 7. Remove white backgrounds from hero text overlay ── */
.elementor-268 .elementor-element.elementor-element-fde800f,
.elementor-268 .elementor-element.elementor-element-fde800f > .elementor-background-overlay {
  background: transparent !important;
}

/* Nudge hero text + button */
.elementor-268 .elementor-element.elementor-element-fde800f {
  transform: none;
}

.elementor-268 .elementor-element.elementor-element-5b5048d > .elementor-element-populated,
.elementor-268 .elementor-element.elementor-element-5b5048d > .elementor-element-populated > .elementor-background-overlay {
  background: transparent !important;
}

/* ── 8. About Us section — flush below hero, no gap ── */
.elementor-268 .elementor-element.elementor-element-820e781 {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Kill Elementor default section spacing between hero and about us */
.elementor-268 .elementor-element.elementor-element-b0db482 {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Elementor adds default 20px margin-bottom on sections — nuke it for all homepage top sections */
.elementor-268 > .elementor-top-section,
.elementor-268 > .elementor-section-wrap > .elementor-top-section {
  margin-bottom: 0 !important;
}

/* The background overlay on the About Us section can add spacing */
.elementor-268 .elementor-element.elementor-element-820e781 > .elementor-background-overlay {
  margin: 0 !important;
  padding: 0 !important;
}

/* ── 9. Hide the empty "Popular" section ── */
.elementor-268 .elementor-element.elementor-element-dc11c03 {
  display: none !important;
}

/* ── 10. CTA section flush after gallery ── */
.elementor-268 .elementor-element.elementor-element-c86cd5b {
  margin-top: 0 !important;
}

/* ── 11. Remove gap helpers ── */
.home #content .site-content,
.home .site-content,
.home #content,
.home .ast-container,
.home #primary,
.home .site-main,
.home .entry-content {
  gap: 0 !important;
}

/* ── 12. Mobile hero text — bottom aligned ── */
@media (max-width: 921px) {
  .elementor-268 .elementor-element.elementor-element-fde800f {
    transform: none !important;
  }
  .elementor-268 .elementor-element.elementor-element-b0db482 > .elementor-container {
    padding-bottom: 40px !important;
  }
}

/* ── 14. Small phone hero refinements ── */
@media (max-width: 480px) {
  /* Hero heading — prevent text overflow on small screens */
  .elementor-268 .elementor-element-b0db482 .elementor-heading-title {
    font-size: clamp(1.6rem, 8vw, 2.4rem) !important;
    line-height: 1.15 !important;
    word-break: break-word;
  }

  /* Announcement bar — tighter padding so dismiss "×" doesn't cover text */
  #fl-announcement {
    padding: .55rem 2.5rem .55rem 1rem !important;
    font-size: .82rem !important;
    gap: .4rem !important;
  }

  /* Hero CTA button — full width on phone */
  .elementor-268 .elementor-element-f8f00fc .elementor-button {
    width: 100% !important;
    justify-content: center !important;
    min-height: 50px !important;
  }

  /* "Start Your Build" CTA wrap — tighter padding */
  .frontline-get-started-wrap {
    padding: 22px 16px 30px !important;
  }
  .frontline-get-started-wrap a.frontline-get-started-btn,
  .frontline-get-started-wrap a.elementor-button.frontline-get-started-btn {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 16px 24px !important;
    font-size: 14px !important;
  }
}

/* ── 13b. Hero CTA button — bigger on desktop ── */
.elementor-268 .elementor-element-f8f00fc .elementor-button {
  padding: 20px 52px !important;
  font-size: 1rem !important;
  letter-spacing: 1.5px !important;
  font-weight: 600 !important;
  min-height: 58px !important;
}

/* ── 13. "Start Your Build" button after What We Do section ── */
.frontline-get-started-wrap {
  text-align: center;
  padding: 30px 20px 40px;
  background: #000000;
}

.frontline-get-started-wrap .elementor-widget-button {
  display: inline-block;
}

.frontline-get-started-wrap a.frontline-get-started-btn,
.frontline-get-started-wrap a.elementor-button.frontline-get-started-btn {
  display: inline-block;
  background-color: #c93535 !important;
  color: #ffffff !important;
  font-family: 'Rubik', 'Karla', sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 18px 36px !important;
  border-radius: 5px;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 15px rgba(201, 53, 53, 0.4);
  border: none !important;
}

.frontline-get-started-wrap a.frontline-get-started-btn:hover,
.frontline-get-started-wrap a.elementor-button.frontline-get-started-btn:hover {
  background-color: #a01f1f !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(201, 53, 53, 0.55);
}