/* ============================================================
   fbnav.css — unified, simplified site navbar.
   Brand · Home · Services (dropdown) · Book a call.
   Sticky, translucent, responsive (burger on mobile).
   Token fallbacks included so it works on pages that don't
   load the revamp design tokens (e.g. contact page).
   ============================================================ */

.fbnav-wrap{ position:sticky; top:0; z-index:200;
  background:rgba(247,248,250,.82); -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid rgba(28,30,36,.07); }
.fbnav{ position:relative; max-width:1180px; margin:0 auto; display:flex; align-items:center;
  gap:18px; padding:13px 24px; }

.fbnav-brand{ display:flex; align-items:center; flex:0 0 auto; margin-right:auto; } /* brand left; links + CTA cluster right */
.fbnav-brand img{ height:30px; width:auto; display:block; filter:brightness(0); } /* logo svg is white → render black on light nav */

.fbnav-links{ display:flex; align-items:center; gap:4px; }
.fbnav-link{ display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:10px;
  font-family:'Satoshi',sans-serif; font-weight:600; font-size:15px; color:var(--ink,#1C1E24);
  text-decoration:none; background:none; border:0; cursor:pointer; line-height:1; }
.fbnav-link:hover{ background:rgba(28,30,36,.05); }
.fbnav-link.is-current{ color:var(--green-d,#1F7A6F); }

/* CTA */
.fbnav-cta{ margin-left:10px; display:inline-flex; align-items:center; gap:8px; padding:11px 18px;
  border-radius:999px; background:var(--green,#2B9E8F); color:#fff; font-family:'Satoshi',sans-serif;
  font-weight:700; font-size:15px; text-decoration:none; box-shadow:0 6px 16px rgba(43,158,143,.25);
  white-space:nowrap; transition:background .15s; }
.fbnav-cta svg{ width:17px; height:17px; }
.fbnav-cta:hover{ background:var(--green-d,#1F7A6F); }

/* ---- Services dropdown ---- */
.fbnav-dd{ position:relative; }
.fbnav-caret{ font-size:.62em; transition:transform .2s ease; opacity:.7; }
.fbnav-ddmenu{ position:absolute; top:calc(100% + 10px); left:50%;
  transform:translateX(-50%) translateY(6px); width:360px;
  background:#fff; border:1px solid rgba(28,30,36,.08); border-radius:16px;
  box-shadow:0 18px 44px rgba(28,30,36,.18); padding:8px;
  opacity:0; visibility:hidden; transition:opacity .18s ease, transform .18s ease; }
.fbnav-dd::after{ content:""; position:absolute; top:100%; left:0; right:0; height:12px; } /* hover bridge */
.fbnav-dd:hover .fbnav-ddmenu, .fbnav-dd.open .fbnav-ddmenu{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.fbnav-dd:hover .fbnav-caret, .fbnav-dd.open .fbnav-caret{ transform:rotate(180deg); }
/* mega-menu rows: icon + title + description */
.fbnav-dditem{ display:flex; align-items:flex-start; gap:12px; padding:10px 12px;
  border-radius:11px; text-decoration:none; transition:background .12s ease; }
.fbnav-dditem:hover{ background:rgba(28,30,36,.05); }
.fbnav-dditem.is-current{ background:var(--green-soft,#E4F4F1); }
.fbnav-ddicon{ width:38px; height:38px; border-radius:10px; background:var(--green-soft,#E4F4F1);
  color:var(--green-d,#1F7A6F); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.fbnav-ddicon svg{ width:19px; height:19px; }
.fbnav-ddtext{ display:flex; flex-direction:column; min-width:0; }
.fbnav-ddtext b{ font-family:'Satoshi',sans-serif; font-size:14.5px; font-weight:700;
  color:var(--ink,#1C1E24); line-height:1.25; }
.fbnav-ddtext small{ font-size:12.5px; color:var(--sub,#6E727B); margin-top:2px; line-height:1.35; }
.fbnav-dditem.is-current .fbnav-ddtext b{ color:var(--green-d,#1F7A6F); }

/* ---- burger (mobile) ---- */
.fbnav-burger{ display:none; flex-direction:column; gap:5px; background:none; border:0;
  cursor:pointer; padding:8px; margin-left:6px; }
.fbnav-burger span{ display:block; width:24px; height:2px; border-radius:2px; background:var(--ink,#1C1E24);
  transition:transform .2s ease, opacity .2s ease; }

@media (max-width:860px){
  .fbnav-burger{ display:inline-flex; }
  .fbnav-brand{ margin-right:auto; }     /* brand left; CTA + burger group right */
  .fbnav-cta{ margin-left:0; padding:10px 15px; font-size:14px; }
  .fbnav-links{ position:absolute; top:100%; left:0; right:0; margin:0; padding:12px;
    flex-direction:column; align-items:stretch; gap:2px; background:#fff;
    border-bottom:1px solid rgba(28,30,36,.08); box-shadow:0 18px 34px rgba(28,30,36,.12); display:none; }
  .fbnav.open .fbnav-links{ display:flex; }
  .fbnav-link{ font-size:16px; padding:12px 14px; }
  .fbnav-dd{ position:static; }
  .fbnav-ddmenu{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    border:0; padding:2px 0 6px 14px; width:auto; }
  .fbnav-dd::after{ display:none; }
  .fbnav-caret{ display:none; }
  .fbnav-ddtoggle{ pointer-events:none; opacity:.6; font-size:12px; letter-spacing:.06em;
    text-transform:uppercase; }
}

/* very small screens: collapse CTA to an icon-only circle so the burger fits */
@media (max-width:560px){
  .fbnav-cta{ font-size:0; gap:0; padding:11px; border-radius:50%; }
  .fbnav-cta svg{ width:18px; height:18px; }
}