/**
 * Site navigation, shared by the landing page and the case studies.
 * Same markup and look as the landing header (.hd); case studies point the links back to the landing sections.
 */
.hd {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: color-mix(in srgb, var(--home-paper, var(--color-bg-default)) 86%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: var(--border-width-default) solid transparent;
  transition: border-color .2s;
}
.hd.is-scrolled { border-bottom-color: var(--color-border-default); }
.hd__inner {
  max-width: 1120px; margin: 0 auto; padding: var(--space-12) var(--space-24);
  display: flex; align-items: center; gap: var(--space-24);
}
.hd__brand {
  font-family: var(--font-family-display); font-weight: var(--font-weight-bold);
  font-size: var(--font-size-500); letter-spacing: .01em; color: var(--color-fg-default); text-decoration: none;
}
.hd__nav { display: flex; gap: var(--space-4); margin-left: auto; }
.hd__nav a {
  color: var(--color-fg-muted); text-decoration: none; font-family: var(--font-family-sans); font-weight: var(--font-weight-medium);
  font-size: var(--font-size-200); line-height: var(--font-line-height-200); padding: var(--space-4) var(--space-8); border-radius: var(--radius-control);
  transition: color .15s, background-color .15s;
}
.hd__nav a:hover { color: var(--color-fg-default); background: var(--color-bg-muted); }
.hd__nav a.is-active, .hd__nav a[aria-current] { color: var(--button-ghost-fg); background: var(--color-action-ghost-bg-hover); }
.hd .status {
  display: inline-flex; align-items: center; gap: var(--space-8); font-family: var(--font-family-sans);
  font-size: var(--font-size-100); line-height: var(--font-line-height-100); font-weight: var(--font-weight-medium);
  color: var(--color-feedback-success-fg); background: var(--color-feedback-success-bg);
  border: var(--border-width-default) solid var(--color-feedback-success-border);
  padding: var(--space-4) var(--space-12); border-radius: var(--radius-pill); white-space: nowrap;
}
.hd .status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-green-500); position: relative; }
.hd .status__dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--color-green-500);
  animation: hd-ping 1.7s cubic-bezier(.2, .8, .2, 1) 3 both;   /* blinks 3x (about 5 s), then still: WCAG 2.2.2 */
}
.hd .status__dot { animation: hd-breathe 1.7s ease-in-out 3; }
.hd .status:hover .status__dot, .hd .status:hover .status__dot::after { animation-iteration-count: infinite; }
@keyframes hd-breathe { 50% { opacity: .45; } }
@keyframes hd-ping { 0% { transform: scale(1); opacity: .6; } 80%, 100% { transform: scale(2.6); opacity: 0; } }
@media (max-width: 640px) {
  .hd__inner { gap: var(--space-8); padding-inline: var(--space-16); }
  .hd .status { display: none; }
  .hd__nav a { padding: var(--space-4) 6px; }
}
@media (prefers-reduced-motion: reduce) { .hd .status__dot, .hd .status__dot::after { animation: none; } }

/* Reading progress under the navigation (case studies): primary colour, follows the scroll */
.hd__progress { position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--border-width-default)); height: 3px; pointer-events: none; }
.hd__progress span { display: block; height: 100%; background: var(--color-action-primary-bg-default); transform-origin: left; transform: scaleX(var(--hd-p, 0)); border-radius: 0 2px 2px 0; }