/* Quiet Machines floating nav. Pill on top of viewport, sticky/fixed. */

/* Top scrim — sits behind the floating pill and obscures any page content
   that scrolls past the top of the viewport. Without this, sections at the
   bottom of their travel are visible above/around the pill (especially on
   wide viewports where the pill doesn't reach the viewport edges). Solid
   page background over the top portion; soft fade at the bottom edge so
   the transition reads as a gentle scrim instead of a hard cut-off band. */
.nav-scrim {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Solid through the pill's full footprint (pill is at top:16, ~58 tall →
     ends near y=74), then a short soft fade so the edge isn't a hard line. */
  height: 96px;
  background: linear-gradient(
    to bottom,
    var(--bg, #fdfcf8) 0%,
    var(--bg, #fdfcf8) 82%,
    rgba(253, 252, 248, 0) 100%
  );
  /* Below the floatnav (z=1000) so the pill renders on top, but above any
     page content (z auto / 0). */
  z-index: 999;
  pointer-events: none;
}

.floatnav {
  position: fixed;
  top: 16px;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  pointer-events: none;
  padding: 0 24px;
  --pill-bg: #ffffff;
  --pill-border: rgba(0, 0, 0, 0.08);
  --pill-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
                 0 6px 18px -6px rgba(15, 23, 42, 0.10);
  --pill-text: #0a0a0a;
  --pill-accent: #397ae7;
}

.floatnav__pill {
  pointer-events: auto;
  position: relative;
  width: 100%;
  max-width: 1200px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  border-radius: 28px;
  padding: 8px 14px 8px 28px;
  box-shadow: var(--pill-shadow);
  backdrop-filter: saturate(1.1);
  transition:
    background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Past-hero state: translucent, blurred, slightly more recessed shadow. */
.floatnav.is-scrolled .floatnav__pill {
  background: rgba(255, 255, 255, 0.67);
  border-color: rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.025),
              0 4px 12px -6px rgba(15, 23, 42, 0.06);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
}

/* Logo */
.floatnav__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 22px;
}
.floatnav__logo img {
  height: 22px;
  width: auto;
  display: block;
}

/* Link group is absolutely centered in the pill so logo width never shifts it */
.floatnav__links {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 2px;
  align-items: center;
}

/* CTAs flex to the right edge */
.floatnav__cta { margin-left: auto; }

.floatnav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 999px;
  font: 500 15px/1 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.005em;
  color: var(--pill-text);
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}
.floatnav__link:hover { color: var(--pill-accent); }
.floatnav__link--btn { font-family: inherit; }

.floatnav__caret {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 1px;
}
.floatnav__item--has-menu.is-open .floatnav__link {
  color: var(--pill-accent);
}
.floatnav__item--has-menu.is-open .floatnav__caret {
  transform: rotate(180deg);
}
.floatnav__link.is-active { color: var(--pill-accent); }

/* Dropdown menu */
.floatnav__item { position: relative; }
.floatnav__menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 380px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  padding: 10px;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.18),
              0 4px 12px -4px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 0.2s;
}
.floatnav__item--has-menu.is-open .floatnav__menu {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition:
    opacity 0.2s ease,
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 0s;
}

/* Invisible bridge so the menu doesn't close as the cursor moves down */
.floatnav__item--has-menu::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 14px;
}

.floatnav__menu-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.2s ease;
}
.floatnav__menu-item:hover { background: #f7f4e8; }
.floatnav__menu-item.is-current { background: rgba(57, 122, 231, 0.08); }

/* Service rows: same colour-chipped treatment as the Solutions dropdown,
   so the two menus read as one system. Each service wears the colour its
   destination page already uses — Jumpstart blue, Studio green,
   Diligence indigo. Glyphs are declared in components/nav.js. */
[data-svc="jumpstart"] { --svc-chip: #c6dbff; --svc-tint: #eef4ff; }
[data-svc="studio"]    { --svc-chip: #caf0be; --svc-tint: #f1fbec; }
[data-svc="diligence"] { --svc-chip: #ddd4ff; --svc-tint: #f3f0ff; }
/* Resources and About rows wear the same treatment so every dropdown reads
   as one system. Pastels drawn from the shared solution palette; each menu
   is its own surface, so reuse across menus is fine. */
[data-svc="blog"]      { --svc-chip: #fcccbf; --svc-tint: #fff4ef; }
[data-svc="resources"] { --svc-chip: #bfe8e0; --svc-tint: #effaf7; }
[data-svc="scope"]     { --svc-chip: #ffeba1; --svc-tint: #fffaea; }
[data-svc="company"]   { --svc-chip: #c6dbff; --svc-tint: #eef4ff; }
[data-svc="careers"]   { --svc-chip: #caf0be; --svc-tint: #f1fbec; }

.floatnav__menu-item--svc {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  border: 1px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.floatnav__menu-item--svc:hover,
.floatnav__menu-item--svc.is-current {
  background: var(--svc-tint);
  border-color: var(--svc-chip);
}
.floatnav__menu-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.floatnav__menu-chip {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.55);
  background: var(--svc-chip);
  transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.3, 1), border-color 0.2s ease;
}
.floatnav__menu-chip svg { width: 18px; height: 18px; display: block; }
.floatnav__menu-item--svc:hover .floatnav__menu-chip,
.floatnav__menu-item--svc.is-current .floatnav__menu-chip {
  transform: scale(1.07);
  border-color: rgba(0, 0, 0, 0.78);
}
@media (prefers-reduced-motion: reduce) {
  .floatnav__menu-chip { transition: none; }
  .floatnav__menu-item--svc:hover .floatnav__menu-chip { transform: none; }
}
.floatnav__menu-title {
  font: 500 16px/1.25 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.01em;
  color: #0a0a0a;
}
.floatnav__menu-desc {
  font: 400 13.5px/1.4 "Neue Montreal", system-ui, sans-serif;
  color: #6b6b6d;
}

/* Narrower variant for short menus (e.g. About → Company / Careers) */
.floatnav__menu--narrow { min-width: 320px; }

/* CTAs inside the pill — sized to fit pill height */
.floatnav__cta {
  display: flex;
  gap: 8px;
  align-items: center;
}
.floatnav__btn {
  height: 40px;
  padding: 0 18px;
  font: 500 14px/1 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: -0.005em;
  border-radius: 22px;
  border: 1px solid transparent;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.floatnav__btn--secondary {
  background: transparent;
  color: #0a0a0a;
  border-color: rgba(0, 0, 0, 0.18);
}
.floatnav__btn--secondary:hover {
  background: rgba(0, 0, 0, 0.04);
  color: #0a0a0a;
  border-color: rgba(0, 0, 0, 0.32);
}
.floatnav__btn--primary {
  background: var(--pill-accent);
  color: #fff;
  border-color: var(--pill-accent);
  box-shadow: 0 1px 2px rgba(57, 122, 231, 0.18);
}
.floatnav__btn--primary:hover {
  background: #2866ce;
  border-color: #2866ce;
  box-shadow: 0 2px 8px rgba(57, 122, 231, 0.28);
}

/* Hamburger (mobile only) */
.floatnav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-left: auto;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  border-radius: 999px;
  transition: background 0.2s ease;
}
.floatnav__hamburger span {
  display: block;
  width: 22px;
  height: 1.8px;
  background: #0a0a0a;
  border-radius: 2px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.2s ease;
  transform-origin: center;
}
.floatnav__hamburger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.floatnav__hamburger.is-open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.floatnav__hamburger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile sheet */
.floatnav__sheet {
  pointer-events: auto;
  position: absolute;
  top: 100%;
  left: 24px;
  right: 24px;
  margin-top: 10px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* The nav is fixed, so the sheet can't ride the page scroll — it has to
     scroll itself or short viewports can never reach the CTAs at the bottom.
     16px top offset + ~58px pill + 10px gap ≈ 84px above; keep 24px below. */
  max-height: calc(100vh - 108px);
  max-height: calc(100dvh - 108px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.floatnav__sheet[hidden] { display: none; }
.floatnav__sheet-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.floatnav__sheet-label {
  font: 500 11px/1 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #888;
  padding: 4px 10px 8px;
}
.floatnav__sheet-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  text-decoration: none;
}
.floatnav__sheet-item:hover { background: #f7f4e8; }
/* Service rows in the sheet share .floatnav__menu-item--svc with the desktop
   dropdown, but .floatnav__sheet-item's flex-direction: column is declared
   later in this file and wins the tie — which stacked the chip above a
   centre-aligned label (align-items: center survived from the --svc rule).
   Re-assert the row layout at higher specificity. */
.floatnav__sheet-item.floatnav__menu-item--svc {
  flex-direction: row;
  align-items: center;
  gap: 14px;
}
.floatnav__sheet-link {
  display: block;
  padding: 12px 14px;
  border-radius: 12px;
  font: 500 16px/1 "Neue Montreal", system-ui, sans-serif;
  color: #0a0a0a;
  text-decoration: none;
}
.floatnav__sheet-link:hover { background: #f7f4e8; }
.floatnav__sheet-cta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Responsive breakpoints */
/* 1120, up from the old 920: with five top-level items the centred link
   group collides with the CTA pair below ~1110 (measured +8px clearance
   at 1120), so the sheet takes over earlier. Keep in step with the
   comment at the bottom of this file. */
@media (max-width: 1120px) {
  .floatnav__pill {
    padding: 6px 6px 6px 20px;
    gap: 8px;
  }
  .floatnav__links,
  .floatnav__cta {
    display: none;
  }
  .floatnav__hamburger { display: inline-flex; }
}
/* Above the breakpoint the hamburger is gone, so an open sheet would have no
   close control. nav.js closes it when crossing 1120px; this guarantees it
   can never paint on desktop even if that state slips. */
@media (min-width: 1121px) {
  .floatnav__sheet { display: none; }
}

/* Tighten on narrow desktops so the pill doesn't stretch awkwardly */
@media (min-width: 921px) and (max-width: 1100px) {
  .floatnav__btn {
    height: 38px;
    padding: 0 14px;
    font-size: 13.5px;
  }
  .floatnav__link { padding: 10px 12px; font-size: 14px; }
  .floatnav__pill { padding-left: 22px; gap: 8px; }
}

/* Hide the legacy inline header so old pages don't double-up while migrating */
.nav { display: none !important; }

/* Reserve space below the floating nav so heroes don't hug the pill.
   The stage is the scaled design canvas; padding here lives in design coords. */
#stage { padding-top: 200px; }

/* For pages WITHOUT a #stage wrapper (work/*, diligence, scope-your-project),
   reserve viewport-coord clearance on body so first content clears the pill. */
body:not(:has(#stage)) {
  padding-top: 132px;
}
@media (max-width: 720px) {
  body:not(:has(#stage)) {
    padding-top: 96px;
  }
}

/* ------------------------------------------------------------------
   Solutions menu: two labelled columns — industries on the left,
   functions on the right. Each row wears its solution's pastel the
   same way the segment rows did on the fin-serve branch: the chip is
   the pastel itself, the hover wash is that pastel diluted, and the
   edge picks the pastel back up, so the dropdown previews the page
   it leads to.
   ------------------------------------------------------------------ */
.floatnav__menu--solutions {
  min-width: 620px;
  padding: 14px 12px 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 18px;
}
.floatnav__menu--solutions .floatnav__menu-col { min-width: 0; }
.floatnav__menu--solutions .floatnav__menu-label { padding: 4px 12px 10px; }

.floatnav__menu-label {
  font: 500 10.5px/1 "Neue Montreal", system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* 0.58, up from 0.42 — at 10.5px caps the lighter grey fell below
     comfortable readability. */
  color: rgba(0, 0, 0, 0.58);
}

.floatnav__menu-segs {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.floatnav__menu-seg {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  border: 1px solid transparent;
  border-radius: 9px;
  font: 400 14px/1.2 "Neue Montreal", system-ui, sans-serif;
  color: #2a2a2c;
  text-decoration: none;
  /* Two zero-length shadows so the hover state can interpolate against them;
     a list only tweens into another list of the same length. */
  text-shadow: 0 0 0 currentColor, 0 0 0 currentColor;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease,
              text-shadow 0.2s ease;
}
/* Solution colours. Literals rather than vars: nav.css is global but the
   pastel tokens live in finserve.css, which only certain pages load.
   Keep in step with styles/finserve.css and styles/solutions.css. */
.floatnav__menu-seg[data-sol="financial-services"],
.floatnav__menu-seg[data-sol="business-operations"]   { --sol-chip: #c6dbff; --sol-tint: #eef4ff; }
.floatnav__menu-seg[data-sol="insurance"],
.floatnav__menu-seg[data-sol="customer-support"]      { --sol-chip: #fcccbf; --sol-tint: #fff4ef; }
.floatnav__menu-seg[data-sol="real-estate-construction"],
.floatnav__menu-seg[data-sol="finance"]               { --sol-chip: #caf0be; --sol-tint: #f1fbec; }
.floatnav__menu-seg[data-sol="logistics"],
.floatnav__menu-seg[data-sol="sales-marketing"]             { --sol-chip: #ffeba1; --sol-tint: #fffaea; }
.floatnav__menu-seg[data-sol="professional-services"],
.floatnav__menu-seg[data-sol="compliance-audit"]      { --sol-chip: #ddd4ff; --sol-tint: #f3f0ff; }
.floatnav__menu-seg[data-sol="hr"]                    { --sol-chip: #ffdff4; --sol-tint: #fff4fb; }
.floatnav__menu-seg[data-sol="legal"]                 { --sol-chip: #bfe8e0; --sol-tint: #effaf7; }
/* The weight lift. font-weight cannot be transitioned here, and crossfading a
   duplicate copy of the label would make screen readers announce every row
   twice. A symmetric sub-pixel smear thickens the stems instead. */
.floatnav__menu-seg:hover,
.floatnav__menu-seg.is-current {
  background: var(--sol-tint);
  border-color: var(--sol-chip);
  color: #0a0a0a;
  text-shadow: 0.32px 0 0 currentColor, -0.32px 0 0 currentColor;
}
/* Accent chip: a shrunk version of the tile the solution wears on the home
   page band, so the dropdown reads as the same family of things rather than
   thirteen anonymous rows. Glyphs are declared in components/nav.js. */
.floatnav__menu-seg i {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.55);
  background: var(--sol-chip);
  transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.3, 1), border-color 0.2s ease;
}
.floatnav__menu-seg i svg {
  width: 12px;
  height: 12px;
  display: block;
}
/* The chip leans in a touch on hover. Enough to feel alive, not enough to
   move the label beside it. */
.floatnav__menu-seg:hover i,
.floatnav__menu-seg.is-current i {
  transform: scale(1.09);
  border-color: rgba(0, 0, 0, 0.78);
}
/* Pages that aren't built yet render as spans, not anchors: same row, same
   hover wash so the design reads complete, but no navigation and no hand
   cursor promising one. Delete the modifier as each lander ships. */
.floatnav__menu-seg--soon { cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .floatnav__menu-seg,
  .floatnav__menu-seg i { transition: none; }
  .floatnav__menu-seg:hover i,
  .floatnav__menu-seg.is-current i { transform: none; }
}

/* Sheet mirror of the desktop Solutions menu: the two columns stack. */
.floatnav__sheet-section .floatnav__menu-label { padding: 12px 10px 6px; }
.floatnav__sheet-section .floatnav__menu-segs { gap: 0; }
.floatnav__sheet-section .floatnav__menu-seg { padding: 11px 14px; font-size: 15px; }

/* Five top-level items need a little more room than four did. Tighten link
   padding before conceding to the hamburger, and hand over to the sheet a
   little earlier than the old 920px so the centred links never collide with
   the logo or the CTA group. */
@media (max-width: 1180px) {
  .floatnav__link { padding: 10px 11px; }
}