/* Homepage header state -------------------------------------------------------
   The landing view belongs to the hero: the header is transparent at the top,
   then returns to the shared white navigation surface after the page moves. */

html body[data-page="home"] > main {
  padding-top: 0 !important;
}

html body[data-page="home"] .site-header.site-header.site-header:not(.is-scrolled) {
  border-bottom-color: transparent !important;
  color: #fff !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

html body[data-page="home"].mega-open .site-header.site-header.site-header:not(.is-scrolled) {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

html body[data-page="home"] .site-header.site-header.site-header:not(.is-scrolled) .brand-mark {
  border-color: rgba(255, 255, 255, .28) !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 8px 24px rgba(5, 22, 15, .12) !important;
}

html body[data-page="home"] .site-header.site-header.site-header:not(.is-scrolled) :is(
  .brand-copy strong,
  .nav-primary,
  .nav-expand,
  .header-icon,
  .menu-toggle
) {
  color: #fff !important;
}

html body[data-page="home"] .site-header.site-header.site-header:not(.is-scrolled) .brand-copy small {
  color: rgba(255, 255, 255, .68) !important;
}

html body[data-page="home"] .site-header.site-header.site-header:not(.is-scrolled) .nav-primary::after {
  background: var(--lime) !important;
}

html body[data-page="home"] .site-header.site-header.site-header:not(.is-scrolled) .header-quick-actions {
  border-color: rgba(255, 255, 255, .26) !important;
  background: rgba(8, 25, 17, .24) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px) saturate(120%) !important;
}

html body[data-page="home"] .site-header.site-header.site-header:not(.is-scrolled) .header-contact {
  border: 1px solid rgba(255, 255, 255, .3) !important;
  color: #fff !important;
  background: rgba(8, 25, 17, .32) !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px) saturate(120%) !important;
}

html body[data-page="home"] .site-header.site-header.site-header:not(.is-scrolled) .header-icon + .header-icon::before {
  background: rgba(255, 255, 255, .24) !important;
}

html body[data-page="home"] .site-header.site-header.site-header:not(.is-scrolled) :is(.header-icon, .header-contact):hover {
  color: #fff !important;
  background: rgba(8, 25, 17, .52) !important;
}

html body[data-page="home"] .site-header.site-header.site-header:not(.is-scrolled) .site-scroll-progress i {
  background: var(--lime) !important;
}

/* The mobile navigation uses an opaque surface. Keep its header and controls
   on the shared surface palette even while the homepage hero is at the top. */
@media (max-width: 960px) {
  html body[data-page="home"].nav-open .site-header.site-header.site-header:not(.is-scrolled) {
    border-bottom-color: var(--line) !important;
    color: var(--heading) !important;
    background: var(--header-bg) !important;
    backdrop-filter: blur(18px) saturate(150%) !important;
  }

  html body[data-page="home"].nav-open .site-header.site-header.site-header:not(.is-scrolled) :is(
    .brand-copy strong,
    .nav-primary,
    .nav-expand,
    .header-icon,
    .menu-toggle
  ) {
    color: var(--heading) !important;
  }

  html body[data-page="home"].nav-open .site-header.site-header.site-header:not(.is-scrolled) .brand-copy small {
    color: var(--muted) !important;
  }

  html body[data-page="home"].nav-open .site-header.site-header.site-header:not(.is-scrolled) .header-quick-actions {
    border-color: var(--line) !important;
    background: var(--surface) !important;
    box-shadow: 0 4px 18px rgba(16, 35, 27, .035) !important;
    backdrop-filter: none !important;
  }

  html body[data-page="home"].nav-open .site-header.site-header.site-header:not(.is-scrolled) .header-icon + .header-icon::before {
    background: var(--line) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body[data-page="home"] .site-header.site-header.site-header {
    transition: none !important;
  }
}