/* ============================================================
   Fetchly Navbar — component styles (Shadow DOM scoped).
   All internal sizing uses `em` so the `size` prop (root font-size)
   scales the whole navbar. Colors come from tokens.css (fnav-*).
   ============================================================ */

.vWeW4_vn3SnCik_Mf18C {
  display: block;
  width: 100%;
  position: relative;
  isolation: isolate;
  font-family: var(--fnav-font-body);
  color: var(--fnav-ink);
  -webkit-font-smoothing: antialiased;
}

/* Pinned: fix to the viewport top so it stays put on scroll, and so the
   centered pill measures against the full viewport (not a parent container,
   which would otherwise shrink/offset it). */
.vWeW4_vn3SnCik_Mf18C[data-sticky] {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1000;
}

/* Fluid scale: the whole navbar is authored in `em` off this root font-size,
   so clamping it to the viewport scales text, padding, logo, icons and the
   dropdown together — refined on small screens, generous on large, with floors
   and ceilings so it never gets cramped or oversized. The `size` prop shifts
   the whole range. */
.vWeW4_vn3SnCik_Mf18C[data-size="small"] {
  font-size: clamp(12.5px, 11.3px + 0.22vw, 16px);
}
.vWeW4_vn3SnCik_Mf18C[data-size="medium"] {
  font-size: clamp(13.5px, 11.8px + 0.32vw, 18px);
}
.vWeW4_vn3SnCik_Mf18C[data-size="large"] {
  font-size: clamp(15px, 12.6px + 0.46vw, 21px);
}

/* ---- Inner shell (side padding only; the root handles positioning) ---- */
.no9ycSgBcLVFiWQr8rWr {
  width: 100%;
  padding: 0 16px;
}

/* ---- The floating pill ---- */
.kyzXdblmciK8HGbFZmpO {
  position: relative;
  z-index: 70;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 0.4em;
  min-width: 0;
  padding: 0.6em 0.7em 0.6em 1.1em;
  background: var(--fnav-surface);
  border: 1px solid var(--fnav-line);
  border-radius: 0 0 1.1em 1.1em;
  box-shadow: var(--fnav-shadow-bar);
  transition: background-color 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

/* Transparent variant: fully clean at the top of the page — no fill, no
   stroke, no shadow — then fills to an opaque surface (with border + shadow)
   once scrolled. The 1px border stays in the layout but is transparent at the
   top, so the fill-in animates with no geometry shift. */
.vWeW4_vn3SnCik_Mf18C[data-appearance="transparent"] .kyzXdblmciK8HGbFZmpO {
  background: transparent;
  box-shadow: none;
  border-color: transparent;
}
.vWeW4_vn3SnCik_Mf18C[data-appearance="transparent"][data-scrolled] .kyzXdblmciK8HGbFZmpO {
  background: var(--fnav-surface);
  box-shadow: var(--fnav-shadow-bar);
  border-color: var(--fnav-line);
}

/* ---- Always transparent background (either mode) ----
   The pill never fills in: no background, no stroke, no shadow, at the top of
   the page AND after scrolling. It stays fixed in place (sticky) but reads as
   floating links over the page. */
.vWeW4_vn3SnCik_Mf18C[data-appearance="always transparent"] .kyzXdblmciK8HGbFZmpO {
  background: transparent;
  box-shadow: none;
  border-color: transparent;
}

/* Additional links: the FAQ + CTA cluster is usually far wider than the logo,
   so centering the links on the pill's midpoint crowds them against the CTA
   (239px after the logo vs 79px before the CTA on the DesignOps setup). Center
   them between the two clusters instead: equal breathing room on both sides. */
.vWeW4_vn3SnCik_Mf18C[data-mode="anchor"] .kyzXdblmciK8HGbFZmpO {
  justify-content: space-between;
}
.vWeW4_vn3SnCik_Mf18C[data-mode="anchor"] .YkGXL11Q7rlDvRaIAfeA,
.vWeW4_vn3SnCik_Mf18C[data-mode="anchor"] .r5Oes9RQWsSicgDJhUVQ {
  flex: 0 0 auto;
}

/* Additional (anchor) links are plain, same treatment as regular links before
   scroll; only the link whose section is currently under the viewport gets the
   solid high-contrast chip, with a hairline stroke (inset so no layout shift). */
.vWeW4_vn3SnCik_Mf18C[data-mode="anchor"] .CisovirJqC5Tt4FaGd3P[data-active],
.vWeW4_vn3SnCik_Mf18C[data-mode="anchor"][data-scrolled] .CisovirJqC5Tt4FaGd3P[data-active] {
  background: var(--_primitives---colors--white, #ffffff);
  color: var(--_primitives---colors--neutral-darkest, #050b0d);
  box-shadow: inset 0 0 0 1px var(--fnav-line);
}
.vWeW4_vn3SnCik_Mf18C[data-theme="dark"][data-mode="anchor"] .CisovirJqC5Tt4FaGd3P[data-active],
.vWeW4_vn3SnCik_Mf18C[data-theme="dark"][data-mode="anchor"][data-scrolled] .CisovirJqC5Tt4FaGd3P[data-active] {
  background: var(--_primitives---colors--neutral-darkest, #050b0d);
  color: var(--_primitives---colors--white, #ffffff);
  box-shadow: inset 0 0 0 1px var(--fnav-line);
}

/* Selected/current link in the transparent variant, BEFORE scroll: a solid
   high-contrast chip — full white pill + full black text in light mode,
   inverted to a full black pill + full white text in dark mode. Once the bar
   fills in on scroll, the normal (neutral) active style takes over. */
.vWeW4_vn3SnCik_Mf18C[data-appearance="transparent"]:not([data-scrolled]) .CisovirJqC5Tt4FaGd3P[data-active],
.vWeW4_vn3SnCik_Mf18C[data-appearance="always transparent"] .CisovirJqC5Tt4FaGd3P[data-active] {
  background: var(--_primitives---colors--white, #ffffff);
  color: var(--_primitives---colors--neutral-darkest, #050b0d);
}
.vWeW4_vn3SnCik_Mf18C[data-theme="dark"][data-appearance="transparent"]:not([data-scrolled]) .CisovirJqC5Tt4FaGd3P[data-active],
.vWeW4_vn3SnCik_Mf18C[data-theme="dark"][data-appearance="always transparent"] .CisovirJqC5Tt4FaGd3P[data-active] {
  background: var(--_primitives---colors--neutral-darkest, #050b0d);
  color: var(--_primitives---colors--white, #ffffff);
}

/* ---- Logo ---- */
.YkGXL11Q7rlDvRaIAfeA {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
}
.xOUqbhCQvp78tFel5E2r {
  display: inline-flex;
  align-items: center;
  flex: none;
  color: var(--fnav-ink);
  padding: 0.25em 0.4em;
  border-radius: 0.6em;
  text-decoration: none;
}
.L4ZnY52UUIVc4AjJzSZC {
  height: 2em;
  width: auto;
  display: block;
  color: inherit;
}
.vXtIX9XdKfbaHYWpaUuj {
  height: 2em;
  width: auto;
  display: block;
  object-fit: contain;
}

/* ---- Primary links ---- */
.FgSgtLShYpXr1df40vAn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.1em;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: none;
}

.CisovirJqC5Tt4FaGd3P {
  display: inline-flex;
  align-items: center;
  gap: 0.28em;
  font-family: inherit;
  font-size: 1em;
  font-weight: 400;
  line-height: 1;
  color: var(--fnav-ink);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.78em 1em;
  border: none;
  background: transparent;
  border-radius: 0.7em;
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease;
}
.CisovirJqC5Tt4FaGd3P:hover {
  background: var(--fnav-surface-hover);
}
.CisovirJqC5Tt4FaGd3P:focus-visible {
  outline: 2px solid var(--fnav-accent);
  outline-offset: 2px;
}
.CisovirJqC5Tt4FaGd3P[data-active] {
  background: var(--fnav-surface-active);
  font-weight: 500;
}

.B2JRe5atzGYJD77kA0oW[data-open] {
  background: var(--fnav-surface-hover);
}
.ViklBeE6wtYB1IGA0ugo {
  width: 0.9em;
  height: 0.9em;
  opacity: 0.75;
  transition: transform 0.2s ease;
}
.B2JRe5atzGYJD77kA0oW[data-open] .ViklBeE6wtYB1IGA0ugo {
  transform: rotate(180deg);
}

.RsZ_qqv1zj7c7v1WP2Es {
  position: relative;
  display: inline-flex;
}

/* ---- Services dropdown panel ---- */
.R3x5nvr372uVewskWm5g {
  position: absolute;
  top: calc(100% + 0.55em);
  left: 0;
  z-index: 60;
  min-width: 24em;
  max-width: min(34em, calc(100vw - 32px));
  background: var(--fnav-surface);
  border: 1px solid var(--fnav-line);
  border-radius: 1.1em;
  box-shadow: var(--fnav-shadow-menu);
  padding: 0.6em;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-0.4em);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}
/* Open on hover (pure CSS, immune to scripts that block JS hover events) or on
   click/keyboard via the data-open state. */
.RsZ_qqv1zj7c7v1WP2Es:hover .R3x5nvr372uVewskWm5g,
.R3x5nvr372uVewskWm5g[data-open] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.R3x5nvr372uVewskWm5g::before {
  /* invisible hover bridge across the gap to the trigger */
  content: "";
  position: absolute;
  top: -0.7em;
  left: 0;
  right: 0;
  height: 0.7em;
}
@keyframes z7g1WNDeOA3tr0BTMM0p {
  from {
    opacity: 0;
    transform: translateY(-0.4em);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.SN2QMro3L3xwS3qBhmm0 {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
}
.EgPme9QSDJ89Wlvg4AIv {
  display: flex;
  align-items: flex-start;
  gap: 0.85em;
  padding: 0.85em;
  border-radius: 0.85em;
  color: var(--fnav-ink);
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.EgPme9QSDJ89Wlvg4AIv:hover {
  background: var(--fnav-surface-hover);
}
.LOHQHExPyKVm3gNb5m4A {
  flex: none;
  width: 2.9em;
  height: 2.9em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.7em;
  background: var(--fnav-surface-alt);
  border: 1px solid var(--fnav-line);
  color: var(--fnav-ink);
}
.EgPme9QSDJ89Wlvg4AIv:hover .LOHQHExPyKVm3gNb5m4A {
  border-color: var(--fnav-accent-line);
}
.WID0qGhds9H0RNildMD9 {
  width: 1.45em;
  height: 1.45em;
}
.WJNoCkvNfdHsXhnM66xB {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  min-width: 0;
  padding-top: 0.1em;
}
.w4Fuan7IRcvy_523UWDo {
  font-size: 1em;
  font-weight: 600;
  line-height: 1.25;
  color: var(--fnav-ink);
}
.TU6prJbzzfB3D2KiADt6 {
  font-size: 0.88em;
  line-height: 1.4;
  color: var(--fnav-ink-soft);
}

/* ---- Right-side actions ---- */
.r5Oes9RQWsSicgDJhUVQ {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55em;
  flex: 1 1 0;
  min-width: 0;
}
.tw5x335LBG0IhfIJyWtj {
  width: 2.5em;
  height: 2.5em;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  color: var(--fnav-ink);
  font-size: 1.05em;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.tw5x335LBG0IhfIJyWtj:hover {
  background: var(--fnav-surface-hover);
}
.Iftumsx5FZnwsCE9dMMx {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  /* Starts neutral-light; warms to Malibu once the page is scrolled. */
  background: var(--fnav-surface-active);
  color: var(--fnav-ink);
  font-weight: 600;
  font-size: 0.95em;
  padding: 0.9em 1.5em;
  border-radius: 0.75em;
  text-decoration: none;
  transition: background-color 0.28s ease, color 0.28s ease, transform 0.16s ease;
}
.Iftumsx5FZnwsCE9dMMx:hover {
  transform: translateY(-1px);
}
.vWeW4_vn3SnCik_Mf18C[data-scrolled] .Iftumsx5FZnwsCE9dMMx {
  background: var(--fnav-accent);
  color: var(--fnav-accent-ink);
}
.vWeW4_vn3SnCik_Mf18C[data-scrolled] .Iftumsx5FZnwsCE9dMMx:hover {
  background: var(--fnav-accent-hover);
}

/* ---- Hamburger ---- */
.lG5VHLynK16gbm0ynvDD {
  display: none;
  width: 2.7em;
  height: 2.7em;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 0.65em;
  border: 1px solid var(--fnav-line);
  background: transparent;
  color: var(--fnav-ink);
  cursor: pointer;
}
.lG5VHLynK16gbm0ynvDD:hover {
  background: var(--fnav-surface-hover);
}
.YziR5ujURvmhLLN2fzJU {
  width: 1.35em;
  height: 1.35em;
}

/* ---- Mobile drawer ---- */
.DBWmotBLTuJbvr5VxBlz {
  position: absolute;
  top: calc(100% + 0.55em);
  left: 16px;
  right: 16px;
  z-index: 60;
  display: none;
  flex-direction: column;
  max-height: calc(100vh - 6em);
  overflow-y: auto;
  padding: 0.75em;
  background: var(--fnav-surface);
  border: 1px solid var(--fnav-line);
  border-radius: 1.1em;
  box-shadow: var(--fnav-shadow-menu);
  opacity: 0;
  transform: translateY(-0.5em);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.DBWmotBLTuJbvr5VxBlz[data-open] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.awtCE91l2mpj9a5Wd3GE {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1em;
}
.dxNVUzo74wl3bL43XxMr {
  margin: 0;
}
.PBvvZcMEx17XQ_J0zqoc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.6em;
  padding: 0.85em 0.9em;
  border-radius: 0.7em;
  background: transparent;
  border: none;
  color: var(--fnav-ink);
  font-family: inherit;
  font-size: 1.05em;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.PBvvZcMEx17XQ_J0zqoc:hover {
  background: var(--fnav-surface-hover);
}
.PBvvZcMEx17XQ_J0zqoc[data-active] {
  background: var(--fnav-surface-active);
}
.Rvsliau7GRylPjSvq7fg {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  transition: transform 0.2s ease;
}
.HO3vO2_7GtggtBtbgeFt[aria-expanded="true"] .Rvsliau7GRylPjSvq7fg {
  transform: rotate(180deg);
}
.kR1G6WHMJaw55a08g0vC {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}
.kR1G6WHMJaw55a08g0vC[data-open="true"] {
  grid-template-rows: 1fr;
}
.Iy63mrAG_pf97HlqBQ_a {
  overflow: hidden;
  min-height: 0;
  padding-left: 0.4em;
}
.djwUa6dp_NZGFQi8NqfQ {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  margin-top: 0.8em;
  padding-top: 0.8em;
  border-top: 1px solid var(--fnav-line);
}
.GzuqKNOC2WSlCy0mjOKw {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.5em 0.4em;
  color: var(--fnav-ink);
  text-decoration: none;
  font-weight: 500;
}
.JjQw75aqkvkmyjvTwaCo {
  width: 1.7em;
  height: 1.7em;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--fnav-line);
}
.KARTwRfA_TefyC8MQHNy {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fnav-accent);
  color: var(--fnav-accent-ink);
  font-weight: 600;
  padding: 0.95em;
  border-radius: 0.75em;
  text-decoration: none;
}

/* ---- Scrim ---- */
.J88xZCQJKI9S9s9EP3Kz {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: rgba(5, 11, 13, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.J88xZCQJKI9S9s9EP3Kz[data-open] {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================================
   Responsive — switch to the mobile drawer at <= 991px.
   ============================================================ */
@media (min-width: 992px) {
  .lG5VHLynK16gbm0ynvDD {
    display: none;
  }
  .DBWmotBLTuJbvr5VxBlz,
  .J88xZCQJKI9S9s9EP3Kz {
    display: none;
  }
}

@media (max-width: 991px) {
  .FgSgtLShYpXr1df40vAn,
  .r5Oes9RQWsSicgDJhUVQ .tw5x335LBG0IhfIJyWtj,
  .r5Oes9RQWsSicgDJhUVQ .Iftumsx5FZnwsCE9dMMx {
    display: none;
  }
  .lG5VHLynK16gbm0ynvDD {
    display: inline-flex;
  }
  .DBWmotBLTuJbvr5VxBlz {
    display: flex;
  }
  /* Mobile = simplified full-bleed bar: flush to the top, edge-to-edge, no
     side margins, no border, square corners. The open menu panel matches. */
  .vWeW4_vn3SnCik_Mf18C[data-sticky] {
    top: 0 !important;
  }
  .no9ycSgBcLVFiWQr8rWr {
    padding: 0;
  }
  .kyzXdblmciK8HGbFZmpO {
    border: 0;
    border-radius: 0;
    padding: 0.7em 16px;
  }
  .DBWmotBLTuJbvr5VxBlz {
    top: 100%;
    left: 0;
    right: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
  /* On mobile every transparent variant uses the solid surface — a
     see-through bar with just a logo + hamburger (and an open drawer) looks
     unfinished. */
  .vWeW4_vn3SnCik_Mf18C[data-appearance="transparent"] .kyzXdblmciK8HGbFZmpO,
  .vWeW4_vn3SnCik_Mf18C[data-appearance="always transparent"] .kyzXdblmciK8HGbFZmpO {
    background: var(--fnav-surface);
    box-shadow: var(--fnav-shadow-bar);
    border-color: var(--fnav-line);
  }
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .vWeW4_vn3SnCik_Mf18C *,
  .vWeW4_vn3SnCik_Mf18C *::before,
  .vWeW4_vn3SnCik_Mf18C *::after {
    transition: none !important;
    animation: none !important;
  }
}

/*
 * Fetchly brand tokens for the Navbar library.
 * Every token first reads the real Webflow site variable (verified against the
 * Fetchly site's Primitives / Color Schemes / Typography collections, 2026-06-10 —
 * site CSS variables resolve inside a component Shadow DOM) and falls back to the
 * canonical hex from the Fetchly-GUIDES brand book.
 *
 * Precedence: component color props (inline custom props on .fnav-root, set only
 * when non-empty) -> site variables -> brand-book hex fallbacks.
 */
.fnav-root {
  /* ink + surfaces */
  --fnav-ink: var(--_primitives---colors--neutral-darkest, #050b0d);
  /* Site primitives were re-audited 2026-07-07: "neutral" is now #E5E4DF (border
     beige), so soft ink must read "neutral-dark" (#505455, secondary text). */
  --fnav-ink-soft: var(--_primitives---colors--neutral-dark, #505455);
  --fnav-surface: var(--color-scheme-1--surface-1, #fffefa);
  --fnav-surface-alt: var(--_primitives---colors--neutral-lighter, #f6f5f1);
  --fnav-surface-hover: var(--_primitives---colors--neutral-lighter, #f6f5f1);
  --fnav-surface-active: var(--_primitives---colors--neutral-light, #eeede8);
  --fnav-line: var(--color-scheme-1--border, rgba(5, 11, 13, 0.1));

  /* malibu accent */
  --fnav-accent: var(--_primitives---colors--malibu, #69e5fb);
  --fnav-accent-hover: var(--_primitives---colors--malibu-light, #96ecfc);
  --fnav-accent-ink: var(--_primitives---colors--malibu-darkest, #1f444b);
  --fnav-accent-tint: var(--_primitives---colors--malibu-lightest, #f0fcfe);
  --fnav-accent-line: var(--_primitives---colors--malibu-light, #96ecfc);

  /* fonts */
  --fnav-font-body: var(--_typography---font-styles--neo-body, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --fnav-font-display: var(--_typography---font-styles--neo-heading, "Marjorie", Georgia, serif);
  --fnav-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* elevation */
  --fnav-shadow-bar: 0 1px 2px rgba(5, 11, 13, 0.04), 0 12px 32px -12px rgba(5, 11, 13, 0.18);
  --fnav-shadow-menu: 0 2px 4px rgba(5, 11, 13, 0.04), 0 24px 48px -16px rgba(5, 11, 13, 0.22);

  box-sizing: border-box;
}

.fnav-root *,
.fnav-root *::before,
.fnav-root *::after {
  box-sizing: border-box;
}

.fnav-root[data-theme="dark"] {
  --fnav-ink: var(--_primitives---colors--neutral-lightest, #fffefa);
  --fnav-ink-soft: var(--_primitives---opacity--white-60, rgba(255, 255, 255, 0.62));
  /* Literal hexes: the 2026-07 primitives realignment removed the dark grays
     these read ("neutral-dark" is now #505455 and "neutral" is #E5E4DF). */
  --fnav-surface: #2b2f31;
  --fnav-surface-alt: var(--_primitives---colors--neutral-darker, #1e2325);
  --fnav-surface-hover: var(--_primitives---colors--neutral-darker, #1e2325);
  --fnav-surface-active: #3c3f41;
  --fnav-line: var(--_primitives---opacity--white-15, rgba(255, 255, 255, 0.15));
  --fnav-accent-tint: var(--_primitives---colors--malibu-darkest, #1f444b);
  --fnav-accent-line: var(--_primitives---colors--malibu-darker, #2a5b64);
  --fnav-accent-ink: var(--_primitives---colors--neutral-darkest, #050b0d);
  --fnav-shadow-bar: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 40px -14px rgba(0, 0, 0, 0.6);
  --fnav-shadow-menu: 0 2px 4px rgba(0, 0, 0, 0.3), 0 28px 56px -18px rgba(0, 0, 0, 0.65);
}