/* The approved journey overview is isolated from the other public mega menus. */
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("/webfonts/owners-properties/open-sans-latin-variable.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/webfonts/owners-properties/poppins-latin-600.woff2") format("woff2"); }
#site-nav .how-nav-wrap { position: static; cursor: default; }
#site-nav .how-nav-panel {
  position: absolute; top: calc(100% + 8px); left: 50%;
  width: min(1040px, calc(100vw - 48px)); max-height: calc(100dvh - 116px);
  overflow: auto; overscroll-behavior: contain; z-index: 112;
  color-scheme: light; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-card);
  box-shadow: var(--elev-3); font: 400 14px/22px "Open Sans", Arial, sans-serif;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 5px);
  transition: opacity .18s ease, transform .18s ease;
}
#site-nav .how-nav-wrap:not([data-how-nav-ready]):is(:hover,:focus-within) .how-nav-panel,
#site-nav .how-nav-wrap.is-how-open .how-nav-panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
#site-nav .how-nav-wrap:is(:hover,:focus-within,.is-how-open)::after {
  content: ""; position: absolute; top: 100%; left: 50%; width: min(1040px, calc(100vw - 48px));
  height: 9px; transform: translateX(-50%); z-index: 113;
}
#site-nav .how-nav-wrap.is-how-open .nav-chev { transform: rotate(180deg); }
#site-nav .how-nav-wrap.is-how-open .nav-top::after { transform: scaleX(1); opacity: 1; }
#site-nav :is(.how-nav-panel,.how-nav-mobile) * { box-sizing: border-box; }
#site-nav .how-nav-overview { display: grid; grid-template-columns: 1fr 2fr; align-items: center; gap: 24px; padding: 28px 32px; }
#site-nav .how-nav-copy { align-self: start; }
#site-nav .how-nav-copy .how-nav-eyebrow { margin: 0; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-deep-purple); }
#site-nav .how-nav-copy h2 { margin: 10px 0; font: 600 24px/32px "Poppins", "Open Sans", Arial, sans-serif; letter-spacing: -.5px; color: var(--text); }
#site-nav .how-nav-copy > p:not(.how-nav-eyebrow) { margin: 0; max-width: 250px; font-size: 12px; line-height: 20px; color: var(--text-muted); }
#site-nav .how-nav-art { display: block; width: 160px; height: 85px; object-fit: contain; margin-top: 15px; background: var(--accent-landlord-tint); border-radius: var(--radius-card); }
#site-nav .how-nav-route { position: relative; padding: 10px 20px; min-width: 0; }
#site-nav .how-nav-path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
#site-nav .how-nav-path path { fill: none; stroke: var(--ai-border); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
#site-nav .how-nav-route ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 32px 18px; position: relative; z-index: 1; }
#site-nav .how-nav-route li { display: flex; align-items: center; flex-direction: column; text-align: center; min-width: 0; }
#site-nav .how-nav-route li:nth-child(5) { grid-column: 4; grid-row: 2; }
#site-nav .how-nav-route li:nth-child(6) { grid-column: 3; grid-row: 2; }
#site-nav .how-nav-route li:nth-child(7) { grid-column: 2; grid-row: 2; }
#site-nav .how-nav-route li:nth-child(8) { grid-column: 1; grid-row: 2; }
#site-nav .how-nav-node { display: grid; place-items: center; height: 33px; width: 33px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--ai-border); background: var(--surface); color: var(--brand-deep-purple); font-size: 10px; font-weight: 600; box-shadow: 0 0 0 5px var(--surface); }
#site-nav .how-nav-route li:first-child .how-nav-node { color: var(--text-on-dark); background: var(--brand-deep-purple); border-color: var(--brand-deep-purple); }
#site-nav .how-nav-route li:last-child .how-nav-node { color: var(--action-ink, var(--brand-deep-teal)); background: var(--action-soft, var(--brand-deep-tint)); border-color: var(--action-soft, var(--brand-deep-tint)); }
#site-nav .how-nav-route strong { margin: 10px 0 2px; font-size: 11px; font-weight: 600; line-height: 18px; color: var(--text); }
#site-nav .how-nav-route small { font-size: 10px; line-height: 16px; color: var(--text-muted); }
#site-nav .how-nav-footer { padding: 18px 32px; border-top: 1px solid var(--border); background: var(--surface-canvas); display: flex; justify-content: space-between; align-items: center; gap: 20px; }
#site-nav .how-nav-footer p { margin: 0; color: var(--text-muted); font-size: 11px; line-height: 18px; }
#site-nav .how-nav-footer p > span { color: var(--brand-deep-purple); font-size: 17px; margin-right: 5px; }
#site-nav .how-nav-link { display: inline-flex; justify-content: center; align-items: center; gap: 9px; min-height: 44px; padding: 11px 16px; border-radius: var(--radius-md); background: var(--action-soft, var(--brand-deep-tint)); color: var(--action-ink, var(--brand-deep-teal)); font-size: 12px; line-height: 20px; font-weight: 600; text-decoration: none; white-space: nowrap; }
#site-nav .how-nav-link:hover { background: var(--action-soft-hover, var(--brand-deep-border)); }
#site-nav .how-nav-link:focus-visible { outline: 2px solid var(--brand-deep-purple); outline-offset: 3px; }
#site-nav .is-how-open .how-nav-node { animation: how-nav-arrive .4s ease both; }
#site-nav .is-how-open li:nth-child(2) .how-nav-node { animation-delay: .1s; }
#site-nav .is-how-open li:nth-child(3) .how-nav-node { animation-delay: .2s; }
#site-nav .is-how-open li:nth-child(4) .how-nav-node { animation-delay: .3s; }
#site-nav .is-how-open li:nth-child(5) .how-nav-node { animation-delay: .4s; }
#site-nav .is-how-open li:nth-child(6) .how-nav-node { animation-delay: .5s; }
#site-nav .is-how-open li:nth-child(7) .how-nav-node { animation-delay: .6s; }
#site-nav .is-how-open li:nth-child(8) .how-nav-node { animation-delay: .7s; }
@keyframes how-nav-arrive { from { opacity: .35; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
#site-nav .how-nav-mobile { font-family: "Open Sans", Arial, sans-serif; color: var(--text); color-scheme: light; }
#site-nav .how-nav-mobile > summary { list-style: none; cursor: pointer; }
#site-nav .how-nav-mobile > summary::-webkit-details-marker { display: none; }
#site-nav .how-nav-mobile[open] > summary .sl-v2-row-chev { transform: rotate(180deg); }
#site-nav .how-nav-mobile .how-nav-overview { grid-template-columns: 1fr; padding: 15px 12px 20px; gap: 20px; }
#site-nav .how-nav-mobile .how-nav-copy h2 { font-size: 21px; line-height: 29px; }
#site-nav .how-nav-mobile .how-nav-copy h2 br { display: none; }
#site-nav .how-nav-mobile .how-nav-copy > p:not(.how-nav-eyebrow) { max-width: none; }
#site-nav .how-nav-mobile .how-nav-route { padding: 0; }
#site-nav .how-nav-mobile .how-nav-route ol { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
#site-nav .how-nav-mobile .how-nav-route li { grid-column: auto; grid-row: auto; align-items: flex-start; text-align: left; }
#site-nav .how-nav-mobile .how-nav-route strong { margin-top: 7px; }
#site-nav .how-nav-mobile .how-nav-footer { flex-direction: column; align-items: stretch; gap: 12px; padding: 15px 12px; border-radius: var(--radius-md); margin-bottom: 10px; }
@media (prefers-reduced-motion: reduce) {
  #site-nav .how-nav-panel { transition: none; }
  #site-nav .is-how-open .how-nav-node { animation: none; }
}