/* ============================================================
   HaulIQ — floating navigation

   Shared by index / pricing / contact so every page carries the
   same bar and the three can't drift apart again.

   Namespaced .hq-* and hung on <header> rather than <nav>: the
   older pages still style the bare `nav` element, and reusing
   either the tag or the .nav-* class names would collide.
   ============================================================ */

.hq-nav{
  position:fixed; top:16px; left:50%; transform:translateX(-50%);
  z-index:200; width:min(1380px, calc(100% - 32px));
  font-family:var(--font-body);
}
.hq-nav a{ text-decoration:none; color:inherit; }

.hq-nav-in{
  display:flex; align-items:center; gap:10px;
  padding:9px 9px 9px 22px;
  background:color-mix(in srgb, var(--surface) 86%, transparent);
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:var(--nav-shadow);
  transition:background .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
}
/* firms up once the page moves under it */
.hq-nav.is-stuck .hq-nav-in{
  background:color-mix(in srgb, var(--surface) 97%, transparent);
  border-color:var(--border-strong);
  box-shadow:var(--nav-shadow-lg);
}

.hq-brand{ display:flex; align-items:center; flex-shrink:0; }
.hq-brand img{ height:26px; width:auto; display:block; }

.hq-links{
  display:flex; align-items:center; gap:2px;
  list-style:none; margin:0 auto; padding:0;
}
.hq-links a{
  display:block; padding:9px 15px; border-radius:var(--r-pill);
  font-size:14px; font-weight:500; color:var(--text-muted); white-space:nowrap;
  transition:color .18s var(--ease), background .18s var(--ease);
}
.hq-links a:hover{ color:var(--text); background:var(--hover-wash); }
.hq-links a[aria-current="true"],
.hq-links a.is-here{ color:var(--brand-text); background:var(--brand-soft); }

.hq-act{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.hq-signin{
  padding:9px 15px; border-radius:var(--r-pill);
  font-size:14px; font-weight:600; color:var(--text); white-space:nowrap;
  transition:background .18s var(--ease);
}
.hq-signin:hover{ background:var(--hover-wash); }
/* Selector carries the `a` deliberately: `.hq-nav a{color:inherit}` above
   is (0,1,1) and was out-specifying a bare `.hq-cta` (0,1,0), so the CTA
   inherited body text — bone on lime, 1.09:1 — instead of its ink. */
.hq-nav a.hq-cta{
  padding:11px 21px; border-radius:var(--r-pill);
  background:var(--brand); color:var(--text-invert);
  font-size:14px; font-weight:700; white-space:nowrap;
  transition:background .18s var(--ease), transform .18s var(--ease);
}
.hq-cta:hover{ background:var(--brand-hover); transform:translateY(-1px); }

/* ---- mobile ---------------------------------------------- */
.hq-burger{
  display:none; margin-left:auto; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:var(--r-pill);
  background:none; border:1px solid var(--border); cursor:pointer; color:var(--text);
}
.hq-burger svg{ width:18px; height:18px; }
.hq-burger .hq-x{ display:none; }
.hq-burger[aria-expanded="true"] .hq-x{ display:block; }
.hq-burger[aria-expanded="true"] .hq-bars{ display:none; }

.hq-menu{
  display:none; margin-top:8px; padding:8px;
  background:color-mix(in srgb, var(--surface) 97%, transparent);
  border:1px solid var(--border); border-radius:22px;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:var(--nav-shadow-lg);
}
.hq-menu.open{ display:block; }
.hq-menu a{
  display:block; padding:13px 16px; border-radius:var(--r-pill);
  font-size:15px; font-weight:500; color:var(--text-muted);
}
.hq-menu a:hover{ background:var(--hover-wash); color:var(--text); }
.hq-menu .hq-menu-cta{
  margin-top:4px; background:var(--brand); color:var(--text-invert);
  font-weight:700; text-align:center;
}

@media(max-width:1080px){
  .hq-links{ display:none; }
  .hq-act{ display:none; }
  .hq-burger{ display:flex; }
  /* switch stays out of the burger menu — it's a control, not a link */
  .hq-theme{ margin-left:auto; }
}
@media(max-width:520px){
  .hq-nav{ top:10px; width:calc(100% - 20px); }
  .hq-nav-in{ padding:8px 8px 8px 16px; }
}

@media(prefers-reduced-motion:reduce){
  .hq-nav-in,.hq-links a,.hq-cta,.hq-signin{ transition:none; }
  .hq-cta:hover{ transform:none; }
}