/* Navigation belongs to the hero and leaves with its scroll transition. */
:root { --header-space: 0px; --header-color-transition: 500ms cubic-bezier(.4,0,.2,1); }
.header {
  position: absolute; z-index: 10; top: 32px; left: 32px; right: 32px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 12px 16px; min-height: 72px; border-radius: 40px;
}
.header::before { opacity: var(--header-background-opacity, 0); }
.header::before, .header .button::before, .header .button::after, .header .navigation::before { transition: background-color var(--header-color-transition); }
.header .brand img { transition: filter var(--header-color-transition); }
.header .brand img { width: 128px; height: 32px; object-fit: contain; }
.header .navigation { position: relative; left: auto; display: flex; gap: 48px; margin: 0; width: auto; padding: 0; --smooth-fill: transparent; }
.header .navigation, .header .login-button, .header .button { transition: color var(--header-color-transition); }
.header .navigation { color: var(--brand); }
.header .navigation a, .header .navigation button { position: relative; line-height: 16px; }
.header .navigation a[aria-current="page"] { text-decoration: none; }
.navigation-indicator { position:absolute; left:0; top:0; height:2px; border-radius:1px; background:var(--brand); pointer-events:none; }
.navigation-indicator.is-ready { transition:transform 380ms cubic-bezier(.22,1,.36,1),width 380ms cubic-bezier(.22,1,.36,1),background-color var(--header-color-transition); }
@media(prefers-reduced-motion:reduce) { .navigation-indicator.is-ready { transition:none; } }
.header .account-actions { display: flex; gap: 32px; }
.header .account-actions .button { border-radius: 40px; }
.login-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--brand); font-weight: 700; }
.login-button:hover { text-decoration: underline; text-underline-offset: 4px; }


@media(max-width:1200px) {
  .header .navigation { gap: 24px; }
  .header .account-actions { gap: 12px; }
}
@media(max-width:1000px) {
  .header { flex-wrap: wrap; }
  .header .menu-toggle { display: flex; margin-left: auto; }
  .header .navigation {
    --smooth-fill: var(--input);
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    display: none; width: auto; padding: 16px 24px; gap: 12px 24px;
    border-radius: 24px;
  }
  .header .navigation.is-open { display: flex; }
  .header .navigation a, .header .navigation button { min-height: 44px; display: flex; align-items: center; }
}
@media(max-width:600px) {
  .header { top: 16px; left: 16px; right: 16px; gap: 12px; border-radius: 28px; }
  .header .brand img { width: 126px; height: auto; }
  .header .account-actions { width: 100%; justify-content: flex-end; }
  .header .account-actions .button { min-height: 42px; }
}
@media(prefers-reduced-motion:reduce) {
  .header::before, .header .navigation, .header .navigation::before, .header .login-button, .header .button, .header .brand img, .header .button::before, .header .button::after { transition:none; }
}