/* Hub tab chrome — sits above studio/agency side nav */
:root {
  --hub-h: 54px;
  --hub-bg: #070D16;
  --hub-line: #24344A;
  --hub-gold: #E0B04A;
  --hub-text: #E8EEF6;
  --hub-muted: #A8B6C8;
  --hub-dim: #7A8B9E;
}
body.hubbed { padding-top: var(--hub-h); }
html.hubbed { scroll-padding-top: calc(var(--hub-h) + 20px); }

.hub-tabs {
  position: fixed; top: 0; left: 0; right: 0; height: var(--hub-h);
  z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 0 18px;
  background: var(--hub-bg);
  border-bottom: 1px solid var(--hub-line);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  font-family: "Liberation Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}
.hub-brand { display: flex; flex-direction: column; min-width: 0; }
.hub-brand .hb-name {
  font-size: 13px; font-weight: 700; color: #fff; letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hub-brand .hb-sub {
  font-size: 11px; color: var(--hub-dim); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hub-nav { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.hub-nav a {
  display: inline-flex; align-items: center; height: 32px;
  padding: 0 12px; border-radius: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--hub-muted);
  text-decoration: none; border: 1px solid transparent;
  white-space: nowrap;
}
.hub-nav a:hover { color: var(--hub-text); background: #121C2E; }
.hub-nav a.active {
  color: #0B1220; background: var(--hub-gold); border-color: var(--hub-gold);
}
.hub-nav a.active:hover { color: #0B1220; background: #E8C26A; }

/* Business page layout: reuse site tokens; no side nav */
.business-page .layout-business { display: block; min-height: 100vh; }
.business-page .main { max-width: 1100px; margin: 0 auto; }
.business-page .nav { display: none; }
.business-page .top-nav {
  position: sticky; top: var(--hub-h); z-index: 30;
  background: #0B1C2C; border-bottom: 1px solid var(--hub-line);
}

@media (max-width: 820px) {
  .hub-tabs { padding: 0 10px; gap: 8px; }
  .hub-brand .hb-sub { display: none; }
  .hub-nav a { padding: 0 8px; font-size: 11.5px; }
}
@media (max-width: 560px) {
  .hub-brand { display: none; }
  .hub-tabs { justify-content: center; }
}

/* Keep existing sticky side/top navs below the hub bar */
body.hubbed .nav {
  top: var(--hub-h);
  height: calc(100vh - var(--hub-h));
}
body.hubbed .top-nav {
  top: var(--hub-h);
}