/* NorthOps header Services flyout (round 3b, 10 Nov 2026). Shared by every page with the site header
   (homepage + /websites/, /ai-assistants/, /ai-receptionist/, /toolkit/, /privacy/). Classes are nf-*.
   A full-width light panel drops from under the header; the page below goes milky white and heavily frosted.
   The same frost sits behind the search sheet (search.css uses the same values). Desktop only: on phones the
   Services button is hidden with the rest of the desktop links and the full-screen menu lists the same services. */

:root{
  --nf-frost-bg:rgba(246,246,248,.66);
  --nf-frost-blur:saturate(140%) blur(40px);
  --nf-ease:cubic-bezier(.16,1,.3,1);
}

/* the old dropdown wrapper no longer anchors anything */
.nav .dd,.nav-shell .nav-dd{position:static}
.nav-shell .nav-dd-btn[aria-expanded="true"]{background:transparent;color:var(--c-ink,#1d1d1f)}

/* while open, the header sits above everything but the search sheet, solid like the panel */
html.nf-open #nav{z-index:1600;background:var(--nf-bg,#fbfbfd);border-bottom-color:transparent;box-shadow:none}
.nav-shell{--nf-bg:#fff}

/* ---------- panel ---------- */
.nf{position:absolute;left:0;right:0;top:100%;z-index:1;background:var(--nf-bg,#fbfbfd);color:#1d1d1f;
  font-family:inherit;letter-spacing:-.011em;max-height:calc(100vh - 100%);overflow-y:auto;overscroll-behavior:contain;
  box-shadow:0 1px 0 rgba(0,0,0,.06)}
.nf[hidden]{display:none}
.nf-in{max-width:calc(1024px + 2 * 22px);margin:0 auto;padding:40px var(--side,22px) 72px;display:flex;flex-wrap:wrap;gap:36px 64px}
/* line up with each header's own content edge (logo) */
.nav-shell .nf-in{max-width:1100px;padding-left:var(--sp-5,24px);padding-right:var(--sp-5,24px)}
.nf-col{min-width:0}
.nf-main{flex:0 0 auto;min-width:300px;margin-right:24px}
.nf-label{margin:0 0 14px;font-size:12px;line-height:1.33;font-weight:400;letter-spacing:-.005em;color:#6e6e73}
.nf ul{list-style:none;margin:0;padding:0}
.nf a{display:inline-block;color:#1d1d1f;text-decoration:none!important;border-radius:6px;transition:color .2s ease}
.nf a:hover{color:var(--blue,#1f5fd1)}
.nf a:focus-visible{outline:2px solid var(--blue,#1f5fd1);outline-offset:3px}
.nf a[aria-current="page"]{color:var(--blue,#1f5fd1)}
/* left column: large plain service names, the site's own face and display weight */
.nf-main li + li{margin-top:6px}
.nf-main a{font-size:28px;line-height:1.14;font-weight:600;letter-spacing:-.022em;padding:3px 0}
/* smaller columns: real secondary links */
.nf-sub li + li{margin-top:2px}
.nf-sub a{font-size:14px;line-height:1.43;font-weight:600;letter-spacing:-.01em;padding:5px 0}

/* ---------- the frost below the panel ---------- */
.nf-scrim{position:fixed;inset:0;z-index:1590;background:var(--nf-frost-bg);
  -webkit-backdrop-filter:var(--nf-frost-blur);backdrop-filter:var(--nf-frost-blur)}
.nf-scrim[hidden]{display:none}

/* ---------- motion: calm drop and fade, no overshoot ---------- */
@media (prefers-reduced-motion:no-preference){
  .nf{clip-path:inset(0 0 100% 0);transition:clip-path .34s var(--nf-ease)}
  .nf.is-open{clip-path:inset(0 0 0 0);transition-duration:.42s}
  .nf li,.nf-label{opacity:0;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease}
  .nf.is-open li,.nf.is-open .nf-label{opacity:1;transform:none;transition:opacity .36s ease,transform .5s var(--nf-ease);
    transition-delay:calc(70ms + var(--i,0) * 22ms)}
  .nf-scrim{opacity:0;transition:opacity .28s ease}
  .nf-scrim.is-open{opacity:1;transition-duration:.36s}
}

@media (prefers-reduced-transparency:reduce){
  .nf-scrim{background:rgba(245,245,247,.95);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-contrast:more){.nf-label{color:#424245}}
/* the desktop links (and with them the Services button) give way to the full-screen menu below these widths */
@media (max-width:900px){.nav .nf{display:none!important}}
@media (max-width:860px){.nav-shell .nf{display:none!important}}
@media (max-width:1000px){.nf-in{gap:32px 40px}.nf-main{min-width:260px;margin-right:0}.nf-main a{font-size:24px}}
@media print{.nf,.nf-scrim{display:none!important}}