/* ===================== HEADER ===================== */
.util-bar{ background: var(--navy-950); border-bottom: 1px solid rgba(255,255,255,.08); }
.util-inner{
  display:flex; align-items:center; justify-content:space-between; padding-block:.5rem;
  font-family: var(--font-mono); font-size:.68rem; letter-spacing:.08em;
  color: rgba(255,255,255,.5); text-transform:uppercase;
}
.util-inner .sep{ color: rgba(255,255,255,.25); margin-inline:.7rem; }

.nav-bar{ position:sticky; top:0; z-index:100; background:#fff; border-bottom:1px solid var(--line); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; padding-block:.9rem; }
.brand{ display:flex; align-items:center; gap:.7rem; }
.brand-mark{
  width:44px; height:44px; border-radius:8px;
  background: linear-gradient(155deg, var(--navy-800), var(--navy-950));
  color: var(--gold-400); display:grid; place-items:center;
  font-family: var(--font-display); font-weight:700; font-size:1rem;
}
.brand-word{ display:flex; flex-direction:column; line-height:1.05; }
.brand-word strong{ font-family: var(--font-display); font-size:1.1rem; color: var(--navy-900); font-weight:700; letter-spacing:-.01em; }
.brand-word span{ font-family: var(--font-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color: var(--ink-faint); }

/* Consistent firm-name image logo used across all pages */
.brand-logo{
  height:44px;
  width:auto;
  max-width:220px;
  object-fit:contain;
  border-radius:6px;
}
@media (max-width:520px){
  .brand-logo{ max-width:150px; height:34px; }
}

.main-nav{ display:flex; align-items:center; gap: clamp(1.1rem,2vw,2rem); }
.main-nav a{
  font-size:.86rem; font-weight:500; color: var(--ink-soft);
  position:relative; padding-block:.3rem; transition: color .25s ease;
}
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:-3px; width:0; height:2px;
  background: var(--blue-600); transition: width .3s var(--ease);
}
.main-nav a:hover{ color: var(--navy-900); }
.main-nav a:hover::after{ width:100%; }
.main-nav a.is-active{ color: var(--navy-900); font-weight:700; }
.main-nav a.is-active::after{ width:100%; background: var(--gold-500); }

.nav-cta{ display:flex; align-items:center; gap:1.1rem; }
.nav-cta .btn{ padding:.68rem 1.25rem; font-size:.84rem; }

@media (max-width: 900px){ .main-nav{ display:none; } .util-bar{ display:none; } }