.alp-nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--space-4) var(--space-6);
  background:var(--nav-blur-bg);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border-subtle);
}
.alp-nav__logo{ display:flex; align-items:center; text-decoration:none; }
.alp-nav__logo img{ height:44px; width:auto; display:block; }
.alp-nav__logo img.alp-nav__logo--broadcast{ display:none; }
.alp-nav__logo img.alp-nav__logo--mark{ display:none; height:32px; }
:root[data-theme="broadcast"] .alp-nav__logo img.alp-nav__logo--studio{ display:none; }
:root[data-theme="broadcast"] .alp-nav__logo img.alp-nav__logo--broadcast{ display:block; }

/* Below ~480px the full wordmark lockup gets tight next to the hamburger
   button, switch to the compact mark instead of letting it overflow or
   shrink illegibly. The mark is a single amber color, so it works
   unchanged in both Studio and Broadcast, no separate light/dark variant
   needed for this one. */
@media (max-width:480px){
  alp-nav .alp-nav__logo img.alp-nav__logo--studio,
  alp-nav .alp-nav__logo img.alp-nav__logo--broadcast{ display:none !important; }
  alp-nav .alp-nav__logo img.alp-nav__logo--mark{ display:block !important; }
}
.alp-nav__links{ display:flex; gap:var(--space-6); list-style:none; margin:0; padding:0; }
.alp-nav__links a{ text-decoration:none; color:var(--text-secondary); font-size:14px; font-weight:500; transition:color var(--duration-fast) ease-out; }
.alp-nav__links a:hover{ color:var(--text-primary); }
.alp-nav__actions{ display:flex; align-items:center; gap:var(--space-4); }
.alp-nav__toggle{ display:none; background:none; border:none; color:var(--text-primary); cursor:pointer; }

@media (max-width:1024px){
  .alp-nav__links{
    position:fixed; inset:0; top:64px; z-index:100; background:var(--nav-blur-bg); backdrop-filter:blur(16px);
    flex-direction:column; padding:var(--space-6); gap:var(--space-5);
    transform:translateX(100%); transition:transform var(--duration-base) var(--ease-signature);
  }
  .alp-nav__links.is-open{ transform:translateX(0); }
  .alp-nav__toggle{ display:block; }
}

/* On the pages that also show a "Talk to an expert" CTA in the header
   (index, live, badili-initiative), drop it below 640px, three buttons plus
   a hamburger plus the logo has no room left at phone widths, and Contact
   is still one tap away via the menu. */
@media (max-width:640px){
  .alp-nav__actions alp-button[href="/contact"]{ display:none; }
}

/* LIVE badge on the nav, per Live Command Center spec */
.alp-nav__live-badge{
  display:none; align-items:center; gap:6px; font-size:11px; font-weight:700;
  letter-spacing:0.05em; color:var(--state-error); border:1px solid var(--state-error);
  border-radius:20px; padding:4px 10px;
}
.alp-nav__live-badge.is-active{ display:inline-flex; }
.alp-nav__live-badge .dot{ width:6px; height:6px; border-radius:50%; background:var(--state-error); animation:alp-pulse 1.6s ease-in-out infinite; }
@keyframes alp-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.35; } }

.alp-badge{ display:inline-flex; align-items:center; padding:4px 12px; border-radius:20px; font-size:12px; font-weight:600; letter-spacing:0.02em; }
.alp-badge--delivered{ background:var(--accent-subtle); color:#7A5410; }
.alp-badge--partner{ background:var(--border-subtle); color:var(--text-secondary); }
.alp-badge--crew{ background:rgba(61,190,124,0.15); color:var(--color-green-500); }

.alp-alert{ display:flex; gap:var(--space-3); padding:var(--space-4) var(--space-5); border-radius:10px; font-size:14px; align-items:flex-start; }
.alp-alert--info{ background:var(--border-subtle); border:1px solid var(--border-subtle); }
.alp-alert--success{ background:rgba(61,190,124,0.1); border:1px solid rgba(61,190,124,0.3); color:var(--color-green-500); }
.alp-alert--error{ background:rgba(229,72,77,0.1); border:1px solid rgba(229,72,77,0.3); color:var(--state-error); }