/* ── 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. */

.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:200;color:var(--ink)}
@media(max-width:900px){
.nav-links{display:none}
.hamburger{display:flex}
}
#nav{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:600;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(126,190,158)}
#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:999px!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:600!important;
  text-transform:none!important;letter-spacing:-0.16px!important;
  padding:11px 20px!important;border-radius:999px!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}
#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 .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:999px!important;
  padding:14px 26px!important;font-weight:600!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}