/* ==========================================================================
   Shared site header, matching the v13 homepage (www.aipartnershq.com).
   Brand colours only: #0a0a0a, #ffffff, #F6F8FB, #D9E1EC, #78A7E3, #426CA8, #2E8B6A.
   ========================================================================== */
:root {
  --hq-ink: #0a0a0a;
  --hq-blue: #426CA8;
  --hq-blue-soft: #78A7E3;
  --hq-line: #D9E1EC;
  --hq-mist: #F6F8FB;
  --hq-text-primary: #0a0a0a;
  --hq-text-secondary: #404040;
  --hq-text-muted: #737373;
  /* Kept for pages that still read the old variable names. */
  --hq-accent: #426CA8;
  --hq-accent-2: #426CA8;
  --hq-accent-teal: #426CA8;
  --hq-accent-light: #E8EEF7;
  --hq-accent-glow: rgba(66, 108, 168, 0.25);
  --hq-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
}

#hq-header.hq-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  font-family: var(--hq-font-sans);
  background: rgba(255, 255, 255, 0);
  border-bottom: 1px solid transparent;
  transition: background .4s, border-color .4s, box-shadow .4s;
  -webkit-font-smoothing: antialiased;
}
#hq-header.scrolled, #hq-header.menu-open {
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border-bottom-color: rgba(229, 229, 229, 0.7);
  box-shadow: 0 10px 30px -24px rgba(15, 23, 42, 0.35);
}
.hq-bar-in {
  position: relative; max-width: 1280px; margin: 0 auto; padding: 0 32px;
  height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  transition: height .4s;
}
#hq-header.scrolled .hq-bar-in { height: 64px; }

.hq-page-nav { display: flex; align-items: center; flex: 0 0 auto; text-decoration: none; line-height: 0; }
.hq-page-nav .hmark, .hq-page-nav .hmark-white { height: 26px; width: auto; display: block; user-select: none; }
.hq-page-nav .hmark-white { display: none; }

/* Pages that open on a dark hero: white logo and light links until the bar turns white on scroll. */
#hq-header.on-dark:not(.scrolled):not(.menu-open) .hmark { display: none; }
#hq-header.on-dark:not(.scrolled):not(.menu-open) .hmark-white { display: block; }
#hq-header.on-dark:not(.scrolled):not(.menu-open) .hq-scene-pill { color: rgba(255, 255, 255, 0.78); }
#hq-header.on-dark:not(.scrolled):not(.menu-open) .hq-scene-pill:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
#hq-header.on-dark:not(.scrolled):not(.menu-open) .hq-btn-ghost { color: #fff; background: transparent; border-color: rgba(255, 255, 255, 0.35); }
#hq-header.on-dark:not(.scrolled):not(.menu-open) .hq-btn-primary { color: #0a0a0a; background: #fff; border-color: #fff; }
#hq-header.on-dark:not(.scrolled):not(.menu-open) .hq-burger-btn { color: #fff; }

.hq-scene-nav {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 4px;
}
.hq-scene-pill {
  color: #404040; font-size: 14.5px; font-weight: 500; text-decoration: none; white-space: nowrap;
  padding: 8px 14px; border-radius: 8px; transition: color .2s, background .2s;
}
.hq-scene-pill:hover { color: var(--hq-ink); background: #fafafa; }
.hq-scene-pill.on { color: var(--hq-ink); background: rgba(245, 245, 245, 0.9); }

.hq-bar-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.hq-btn {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; text-decoration: none;
  font-size: 14.5px; font-weight: 600; border-radius: 999px; padding: 9px 18px; line-height: 1.2;
  transition: background .2s, border-color .2s, transform .15s, box-shadow .2s;
}
.hq-btn:active { transform: scale(.98); }
.hq-btn-ghost { color: var(--hq-ink); background: #fff; border: 1px solid #e5e5e5; font-weight: 500; }
.hq-btn-ghost:hover { border-color: #a3a3a3; }
.hq-btn-primary { color: #fff; background: var(--hq-ink); border: 1px solid var(--hq-ink); box-shadow: 0 8px 20px -12px rgba(15, 23, 42, 0.6); }
.hq-btn-primary:hover { background: #262626; }
.hq-short { display: none; }

.hq-burger-btn { display: none; background: none; border: 0; padding: 8px; margin-left: -8px; cursor: pointer; color: #262626; }
.hq-burger { display: grid; gap: 4px; width: 20px; }
.hq-burger i { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s, opacity .2s; }
#hq-header.menu-open .hq-burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
#hq-header.menu-open .hq-burger i:nth-child(2) { opacity: 0; }
#hq-header.menu-open .hq-burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile menu panel (hidden on desktop) */
.hq-panel-root { display: none; }
.hq-panel-body { padding: 8px 16px 18px; display: grid; gap: 2px; }
.hq-link-row { display: block; padding: 10px 12px; border-radius: 10px; color: #262626; font-size: 15px; font-weight: 500; text-decoration: none; }
.hq-link-row:hover, .hq-link-row.on { background: #f5f5f5; color: var(--hq-ink); }
.hq-sep { height: 1px; background: #eee; margin: 8px 4px; }
.hq-action.primary {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px;
  padding: 12px 18px; border-radius: 999px; background: var(--hq-ink); color: #fff; font-weight: 600; font-size: 15px; text-decoration: none;
}

@media (max-width: 1240px) {
  .hq-scene-pill { padding: 8px 9px; font-size: 14px; }
}
@media (max-width: 1140px) {
  .hq-bar-in { padding: 0 16px; height: 64px; }
  .hq-scene-nav, .hq-btn-ghost { display: none; }
  .hq-burger-btn { display: block; }
  .hq-page-nav { margin-right: auto; }
  .hq-page-nav .hmark, .hq-page-nav .hmark-white { height: 22px; }
  .hq-btn-primary { padding: 8px 14px; font-size: 13.5px; }
  .hq-long { display: none; }
  .hq-short { display: inline; }
  #hq-header.menu-open .hq-panel-root:not(.collapsed) { display: block; border-top: 1px solid #f0f0f0; }
}
@media (max-width: 360px) {
  .hq-page-nav .hmark, .hq-page-nav .hmark-white { height: 20px; }
  .hq-btn-primary svg { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #hq-header, .hq-bar-in, .hq-btn, .hq-burger i { transition: none; }
}