/* Desk #100 Option D — home hero cream wrap (Jason approved 2026-09-24).
   Loaded on index.html only. Continuous cream #f6f2ea; transparent mark above
   inset film. Scroll hands that mark off to a small header logo while the
   phone + social cluster fades in. HOLD MERGE / HOLD Wix. */

/* Tighten home mark — no tall empty cream plate, no white field */
.home-logo-hero {
  padding: 2px 20px 4px;
  text-align: center;
  background: transparent;
}
.home-logo-hero .logo-hug {
  display: inline-block;
  background: transparent;
  padding: 0;
  border-radius: 0;
  border: none;
  box-shadow: none;
  line-height: 0;
}
.home-logo-hero img,
.home-logo-hero .logo-hug img {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
}
@media (max-width: 650px) {
  .home-logo-hero { padding: 2px 12px 12px; }
  .home-logo-hero img,
  .home-logo-hero .logo-hug img { max-width: 210px; }
}

/* Home logo handoff. --logo-handoff is 0 at rest and 1 once the centered
   mark has eased away. site-nav.js writes it from scroll progress. The
   wordmark is taken out of flow so the bar does not jump when it appears,
   and only the social/phone cluster rides the same progress — the menu
   toggle stays put. */
body.home {
  --logo-handoff: 0;
}
body.home .header-bar,
body.home .header-inner {
  position: relative;
  justify-content: flex-end;
  /* Wordmark is out of flow so the bar does not jump when it fades in.
     Reserve the settled lockup so an 88/76px mark stays inside the bar. */
  min-height: calc(var(--logo-lockup) + 12px);
}
body.home .wordmark {
  display: flex;
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 2;
  opacity: var(--logo-handoff);
  transform: translate3d(0, calc(-50% + (1 - var(--logo-handoff)) * 10px), 0);
  pointer-events: none;
}
body.home .wordmark img {
  height: var(--logo-lockup);
  width: auto;
  max-height: var(--logo-lockup);
}
@media (min-width: 1024px) {
  body.home .header-aside {
    opacity: var(--logo-handoff);
    transform: translate3d(calc((1 - var(--logo-handoff)) * 14px), calc((1 - var(--logo-handoff)) * 6px), 0);
    pointer-events: none;
  }
}
body.home.is-logo-settled .wordmark,
body.home.is-logo-settled .header-aside {
  pointer-events: auto;
}
body.home .home-logo-hero {
  opacity: calc(1 - var(--logo-handoff));
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  body.home .wordmark {
    transform: translate3d(0, -50%, 0);
  }
  body.home .header-aside {
    transform: none;
  }
}

/* Full-bleed hero media (OD tip-refs/od-longevity): no side gutters, radius or shadow.
   Sticky/fade sibling structure unchanged. */
body.home .hero.hero-promise.hero-sticky,
body.home .hero.hero-sticky[data-od-id="home-hero"] {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 24px;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  background: transparent;
}
@media (max-width: 650px) {
  body.home .hero.hero-promise.hero-sticky,
  body.home .hero.hero-sticky[data-od-id="home-hero"] {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 16px;
    border-radius: 0;
  }
}