/* ============================================================
   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);
}

/* 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] {
  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] {
  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 the transparent variant always 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 {
    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);
  --fnav-ink-soft: var(--_primitives---colors--neutral, #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));
  --fnav-surface: var(--_primitives---colors--neutral-dark, #2b2f31);
  --fnav-surface-alt: var(--_primitives---colors--neutral-darker, #1e2325);
  --fnav-surface-hover: var(--_primitives---colors--neutral-darker, #1e2325);
  --fnav-surface-active: var(--_primitives---colors--neutral, #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);
}