/* Laura homepage hero preview — 2026-09-18.
   Desktop only. All other homepage content and mobile styling remain unchanged. */
@media (min-width: 901px) {
  .home-hero {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 1448 / 781;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background: url('/assets/laura-home-hero-preview-20260918.webp?v=20260918-preview') center center / cover no-repeat !important;
  }

  .home-hero::after,
  .home-hero > .home-lighthouse,
  .home-hero > .home-portrait {
    display: none !important;
  }

  .home-hero > .home-hero-copy {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }

  .home-approved-hero-link {
    display: block !important;
    position: absolute !important;
    left: 21.5% !important;
    top: 60.0% !important;
    width: 20.0% !important;
    height: 6.2% !important;
    z-index: 20 !important;
    border-radius: 12px;
    text-indent: -9999px;
    overflow: hidden;
    cursor: pointer;
  }

  .home-approved-hero-link:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 4px;
    box-shadow: 0 0 0 6px #5a1b83;
  }
}


/* Desktop header/hero integration — requested 2026-09-18.
   Overlay the navigation onto the hero so the top of the page reads as one
   continuous composition. Mobile remains untouched. */
@media (min-width: 901px) {
  .home-site > .topbar {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    z-index: 40 !important;
    padding: 18px 42px 12px !important;
    background:
      linear-gradient(
        180deg,
        rgba(255, 247, 240, 0.72) 0%,
        rgba(255, 247, 240, 0.34) 62%,
        rgba(255, 247, 240, 0) 100%
      ) !important;
    background-image: linear-gradient(
      180deg,
      rgba(255, 247, 240, 0.72) 0%,
      rgba(255, 247, 240, 0.34) 62%,
      rgba(255, 247, 240, 0) 100%
    ) !important;
    box-shadow: none !important;
  }

  .home-site .brand {
    width: 360px !important;
    min-width: 360px !important;
  }

  .home-site .brand-crop {
    width: 360px !important;
    height: 92px !important;
  }

  .home-site .brand-crop img {
    filter: saturate(1.08) contrast(1.04) drop-shadow(0 2px 4px rgba(74, 23, 111, 0.14));
  }

  .home-site .nav {
    color: #4a176f !important;
    gap: 24px !important;
    font-size: 15px !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58);
  }

  .home-site .nav a:hover,
  .home-site .nav a:focus-visible,
  .home-site .nav a.active {
    border-bottom-color: #f1b52a !important;
  }

  .home-site .nav .cta {
    background: #4a176f !important;
    color: #fff !important;
    box-shadow: 0 7px 18px rgba(74, 23, 111, 0.20) !important;
  }

  .home-site .nav .cta:hover {
    background: #5c2282 !important;
  }
}


/* Mobile implementation of the approved homepage hero — 2026-09-18.
   Preserve the complete approved artwork without cropping or stretching,
   while keeping the real /about link available as a larger tap target. */
@media (max-width: 900px) {
  .home-site > .topbar {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 12px 14px 10px !important;
    background: linear-gradient(
      180deg,
      #f4c6c4 0%,
      #f8d3c9 58%,
      #f9d9cf 100%
    ) !important;
    background-image: linear-gradient(
      180deg,
      #f4c6c4 0%,
      #f8d3c9 58%,
      #f9d9cf 100%
    ) !important;
    box-shadow: none !important;
  }

  .home-site .brand {
    width: min(320px, 94vw) !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    justify-content: center !important;
  }

  .home-site .brand-crop {
    width: min(320px, 94vw) !important;
    height: 82px !important;
    margin: 0 auto !important;
  }

  .home-site .brand-crop img {
    filter: saturate(1.08) contrast(1.04) drop-shadow(0 2px 4px rgba(74, 23, 111, 0.12));
  }

  .home-site .nav {
    color: #4a176f !important;
  }

  .home-site .nav .cta {
    background: #4a176f !important;
    color: #fff !important;
  }

  .home-hero {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 1448 / 1086;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background: url('/assets/laura-homepage-hero-FINAL-LOCKED-clean-no-scrollbar.png?v=20260920-final-locked-mobile') center center / 100% 100% no-repeat !important;
  }

  .home-hero::before,
  .home-hero::after,
  .home-hero > .home-lighthouse,
  .home-hero > .home-portrait,
  .home-hero > .home-hero-copy {
    display: none !important;
  }

  .home-approved-hero-link {
    display: block !important;
    position: absolute !important;
    left: 18.5% !important;
    top: 52.5% !important;
    width: 29% !important;
    height: 13.5% !important;
    min-height: 44px !important;
    z-index: 20 !important;
    border-radius: 10px !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    cursor: pointer !important;
  }

  .home-approved-hero-link:focus-visible {
    outline: 3px solid #ffffff !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 6px #4a176f !important;
  }
}


/* HAZE FIX — 2026-09-18.
   Preserve the approved hero artwork exactly; remove only translucent/blur
   treatments that were washing it out. */
.home-site > .topbar {
  background: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

.home-hero {
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
}

.home-hero::after {
  display: none !important;
  opacity: 0 !important;
  background: none !important;
}