/* ── Site nav (canonical) ──────────────────────────────────────────────
   The base nav component, taken from index.html so every page renders an
   identical bar. Only the original component rules live here, the glass,
   motion and clearance layers are injected per page and must NOT be
   duplicated here, or their @supports/@media fallbacks leak out of their
   wrappers and apply unconditionally. */

/* Geist 600 is the logotype face. index.html loads the full family already;
   these pages only ever need the one weight the wordmark is set in. */
/* fonts hoisted to a single <link> in each page's <head> (removes the @import waterfall) */

.wordmark{display:flex;align-items:center;gap:11px;font-weight:400;font-size:16px}
.wordmark .logo-img{height:34px;width:34px;object-fit:contain;display:block}
.wordmark .sq{width:28px;height:28px;border-radius:var(--pill);border:1px solid var(--gold);color:var(--gold);display:grid;place-items:center;font-size:13px;font-weight:500}
.nav-links{display:flex;gap:30px;align-items:center;list-style:none}
.nav-links a{font-size:14px;font-weight:400;color:var(--soft);transition:color .15s;white-space:nowrap}
.nav-links a:hover{color:var(--ink)}
.nav-links a.btn-pill,.mobile-menu a.btn-pill,a.btn-pill{color:#fff !important}
.nav-links a.btn-pill:hover{color:#fff !important}
.hamburger{display:none;flex-direction:column;gap:5px;width:38px;height:38px;align-items:center;justify-content:center}
.hamburger span{width:22px;height:1.5px;background:var(--ink);transition:.3s}
.hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mobile-menu{display:none;position:fixed;inset:0;background:rgba(247,246,243,0.98);backdrop-filter:blur(20px);z-index:49;flex-direction:column;align-items:center;justify-content:center;gap:30px}
.mobile-menu.open{display:flex}
.mobile-menu a{font-size:26px;font-weight:400;color:var(--ink)}
@media(max-width:900px){
.nav-links{display:none}
.hamburger{display:flex}
}
/* A fixed nav with z-index:auto is painted under any later position:relative
   sibling, that is what hid the nav on the Tampa page. shared.css only sets a
   z-index on .nav-light, a class most of these navs do not carry, so pin it
   here for every #nav. Sits above .mobile-menu (49) so the hamburger stays
   tappable while the menu is open, matching index.html's nav/menu order. */
#nav{z-index:100;
  top:0;left:0;right:0;transform:none;width:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
  padding:15px 40px;background:rgba(255,255,255,0.45);backdrop-filter:blur(24px) saturate(1.8);-webkit-backdrop-filter:blur(24px) saturate(1.8);
  border:none;border-bottom:1px solid rgba(20,17,13,0.06);border-radius:0;box-shadow:none;transition:padding .25s,background .25s,box-shadow .25s}
#nav.compact{padding:10px 40px;background:rgba(255,255,255,0.6);box-shadow:0 8px 30px rgba(20,17,13,0.07)}
#nav .wordmark{justify-self:start;display:inline-flex;flex-direction:column;align-items:flex-start;gap:3px;text-decoration:none}
#nav .wordmark .logo-img{background:none;border-radius:0;padding:0;height:36px;width:auto;transition:filter .25s ease}
#nav .nav-links{justify-self:center;gap:36px;align-items:center}
#nav .nav-links a{font-size:14px;font-weight:500;color:var(--soft);transition:color .15s}
#nav .nav-links a:hover{color:var(--ink)}
#nav .nav-actions{justify-self:end;display:flex;align-items:center;gap:14px}
#nav .nav-actions a.btn-pill{background:var(--ink);color:#fff !important;font-weight:500;box-shadow:0 6px 18px rgba(20,17,13,0.18)}
#nav .nav-actions a.btn-pill:hover{background:#2A2724;color:#fff !important;transform:translateY(-1px);box-shadow:0 10px 28px rgba(20,17,13,0.28)}
#nav .nav-actions a.btn-pill .live{background:#fff}
/* ── while the header sits over the dark hero, it goes transparent + light so it blends in;
      everything reverts to the normal light header once scrolled past the hero ── */
#nav.on-hero{background:transparent !important;border-bottom-color:transparent;box-shadow:none !important;
  -webkit-backdrop-filter:none;backdrop-filter:none}
#nav.on-hero .nav-links a{color:rgba(255,255,255,0.72)}
#nav.on-hero .nav-links a:hover{color:#fff}
#nav.on-hero .wordmark .logo-img{filter:brightness(0) invert(1)}
#nav.on-hero .hamburger span{background:#fff}
/* glassy light pill on the dark hero */
#nav.on-hero .nav-actions a.btn-pill{background:rgba(255,255,255,0.10);color:#fff !important;border:1px solid rgba(255,255,255,0.32);box-shadow:none !important}
#nav.on-hero .nav-actions a.btn-pill:hover{background:rgba(255,255,255,0.18);border-color:rgba(255,255,255,0.55);box-shadow:none !important}
#nav.on-hero .nav-actions a.btn-pill .live{background:rgb(186,154,114)}
#nav .hamburger{justify-self:end}
#nav .hamburger span{background:var(--ink)}
@media(max-width:820px){
#nav{grid-template-columns:1fr auto;padding:14px 22px}
#nav .nav-links{display:none}
#nav .nav-actions{display:none}
#nav .hamburger{display:flex}
}

/* ── Lock to index ────────────────────────────────────────────────────────
   Pages style their own links (uppercase, wide tracking, zero-padding pills).
   These are index's exact computed values, forced so every nav is identical. */
#nav .nav-links a{
  font-size:14px!important;font-weight:500!important;
  text-transform:none!important;letter-spacing:-0.16px!important;
  padding:7px 13px!important;border-radius:var(--pill)!important;
  display:inline-block!important;white-space:nowrap!important;
  font-family:inherit!important;
}
#nav .nav-actions a.btn-pill{
  font-size:14px!important;font-weight:500!important;
  text-transform:none!important;letter-spacing:-0.16px!important;
  padding:11px 20px!important;border-radius:var(--pill)!important;
  display:inline-flex!important;align-items:center!important;gap:8px!important;
  white-space:nowrap!important;
}
#nav .wordmark .logo-img{height:36px!important;width:auto!important}
/* light state: dark text. dark state handled by .on-hero below. */
#nav:not(.on-hero) .nav-links a{color:rgba(20,17,13,.74)!important}
#nav:not(.on-hero) .nav-links a:hover{color:#14110D!important}
#nav:not(.on-hero) .nav-actions a.btn-pill{background:#14110D!important;color:#fff!important;border:none!important}
#nav:not(.on-hero) .wordmark .logo-img{filter:none!important}
#nav:not(.on-hero) .hamburger span{background:#14110D!important}
#nav.on-hero .nav-links a{color:rgba(255,255,255,.72)!important}
#nav.on-hero .nav-links a:hover{color:#fff!important}
#nav.on-hero .wordmark .logo-img{filter:brightness(0) invert(1)!important}
#nav.on-hero .hamburger span{background:#fff!important}

/* ── wordmark: text logotype ──────────────────────────────────────────────
   The nav says the name rather than showing the mark alone. Colour is set
   per state, never transitioned, see transition-guard below. */
#nav .wordmark .wm-word{
  font-family:'Inter', 'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:19px!important;font-weight:600!important;
  letter-spacing:-.03em;line-height:1;white-space:nowrap;
}
#nav:not(.on-hero) .wordmark .wm-word{color:#14110D!important}
#nav.on-hero .wordmark .wm-word{color:#fff!important}
@media (max-width:600px){#nav .wordmark .wm-word{font-size:17px!important}}
#nav.on-hero .nav-actions a.btn-pill{
  background:rgba(255,255,255,.10)!important;color:#fff!important;
  border:1px solid rgba(255,255,255,.32)!important;
}

/* ── Mobile lock ──────────────────────────────────────────────────────────
   nav-mobile-lock: the breakpoint rules lived in per-page media queries that
   were stripped, so the hamburger could end up display:none with the links
   also hidden, nothing to tap. Pinned here. */
@media (max-width:900px){
  #nav .nav-links{display:none!important}
  #nav .nav-actions{display:none!important}
  #nav .hamburger{display:flex!important}
}
@media (min-width:901px){
  #nav .nav-links{display:flex!important}
  #nav .nav-actions{display:flex!important}
  #nav .hamburger{display:none!important}
}
.mobile-menu{display:none}
.mobile-menu.open{display:flex!important}
#nav .hamburger{background:none!important;border:none!important;cursor:pointer;
  z-index:60!important;position:relative!important;pointer-events:auto!important}
#nav .hamburger span{display:block!important;width:22px;height:1.5px;transition:.3s}

/* ── transition-guard ─────────────────────────────────────────────────────
   A running CSS transition sits ABOVE author !important in the cascade, so a
   colour transition that keeps restarting will pin the link colour and no
   selector, however specific, even inline !important, can override it.
   Colour is therefore excluded from the transition; background and shadow
   still animate. */
#nav .nav-links a,
#nav .nav-actions a.btn-pill,
#nav .wordmark .logo-img,
#nav .wordmark .wm-word,
#nav .hamburger span{
  transition-property:background-color,box-shadow,border-color,opacity,transform!important;
}

/* ── mobile-cta ───────────────────────────────────────────────────────────
   The Book a Call button inside the mobile menu picked up the light-state
   pill styling and disappeared against the menu's near-white backdrop. */
.mobile-menu a.btn-pill{
  background:#14110D!important;color:#FFFFFF!important;
  border:none!important;border-radius:var(--pill)!important;
  padding:14px 26px!important;font-weight:500!important;font-size:15px!important;
  display:inline-flex!important;align-items:center!important;gap:8px!important;
  box-shadow:0 8px 22px rgba(20,17,13,.22)!important;
}
.mobile-menu a.btn-pill:hover{background:#2A2724!important;color:#fff!important}
.mobile-menu a{color:#14110D!important;font-size:19px!important;font-weight:500!important}
.mobile-menu a.btn-pill span,.mobile-menu a.btn-pill .live{color:#fff!important}