/* ---------------------------------------------------------------------------
   Site Header v4 — Universal Glass Morphism Navigation

   2026-04-21: Universal glass morphism aesthetic with atmospheric
   surfaces, gemstone gradients, and consistent premium feel.
   --------------------------------------------------------------------------- */

.site-header {
  --site-shell-radius: 33px;
  --site-header-backdrop-z: 10980;
  --site-header-drawer-z: 10990;
  --site-header-toggle-z: 11000;
  --site-header-bg:
    linear-gradient(180deg, rgb(13 23 38 / 98%), rgb(10 18 30 / 99%)),
    radial-gradient(circle at 50% -8%, rgb(78 129 197 / 12%), transparent 46%),
    radial-gradient(circle at 85% -10%, rgb(212 169 104 / 8%), transparent 34%);

  position: relative;
  top: 0;
  right: 0;
  left: 0;
  z-index: var(--z-header, 3000);
  padding: 0.6rem clamp(0.9rem, 2.4vw, 1.5rem) 0;
  backdrop-filter: none;
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  isolation: isolate;
  overflow: visible;
  transition:
    top 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    visibility 320ms linear,
    background 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    backdrop-filter 220ms ease;
}

.site-header::before {
  content: none;
}

/* Scrolled state — enhanced glass elevation */
.site-header.site-header--scrolled {
  padding-top: 0.4rem;
}

/* Smart hide — translate header above viewport on scroll-down */
.site-header.site-header--hidden {
  transform: translateY(calc(-100% - 2px));
  visibility: hidden;
  pointer-events: none;
}

/* Mobile (<1360px): header stays pinned — never translate away.
   Boring, reliable sticky. Defense-in-depth alongside menu.js guard. */
@media (width < 1360px) {
  .site-header.site-header--hidden {
    transform: none;
    visibility: visible;
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header.site-header--hidden {
    transform: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* At top — dissolve glass capsule so nav floats with restraint */
.site-header.site-header--at-top .site-header__inner {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

/* ── Dark Mode: Universal Glass Morphism ───────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .site-header:not([data-theme="light"]) {
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
    backdrop-filter: none;
  }
}

[data-theme="dark"] .site-header {
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  backdrop-filter: none;
}

[data-theme="dark"] .site-header.site-header--scrolled {
  padding-top: 0.55rem;
}

/* Animated gradient beam — premium gemstone shimmer */
.site-header__beam {
  display: none;
}

@keyframes beam-shimmer {
  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

/* Header inner — generous height for prominent brand mark */
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.75rem;
  padding-block: 0.5rem;
  padding-inline: 1.25rem;
  overflow: visible; /* was hidden — clipped dropdown submenus. Shell radius still renders via border + background. */
  border-radius: var(--site-shell-radius);
  background: var(--site-header-bg);
  border: 1px solid color-mix(in srgb, rgb(160 179 203) 16%, rgb(11 19 31));
  box-shadow:
    0 18px 42px rgb(5 10 18 / 28%),
    inset 0 1px 0 rgb(255 255 255 / 6%);
  transition:
    background 250ms ease,
    border-color 250ms ease,
    box-shadow 250ms ease,
    backdrop-filter 250ms ease;
}

/* ── Header width override ──────────────────────────────────────────────────
   The header inner is also marked .site-container, which clamps body content
   to --site-max-width (1200px). The navigation bar is structural chrome — not
   body prose — and should breathe wider so brand, nav, and actions don't sit
   pinched in a small island on monitors above 1200px. We override here with
   a header-specific max so the bar feels full-width on desktop without
   touching the body content's reading width.                                  */
.site-header__inner.site-container {
  width: min(100% - 2rem, 1600px);
  max-width: 1600px;
}

.landing-body .site-header__brand-cluster,
.landing-body .site-header__desktop-lane {
  opacity: 0;
  transform: translateY(-0.35rem);
  transition:
    opacity 360ms ease,
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.landing-body .site-header__desktop-lane--left {
  transition-delay: 40ms;
}

.landing-body .site-header__desktop-lane--right {
  transition-delay: 90ms;
}

.landing-body .site-header.site-header--ready .site-header__brand-cluster,
.landing-body .site-header.site-header--ready .site-header__desktop-lane {
  opacity: 1;
  transform: translateY(0);
}

@media (width >= 768px) {
  .site-header__inner {
    min-height: 4.25rem;
    padding-block: 0.625rem;
  }
}

@media (width >= 1024px) {
  .site-header__inner {
    min-height: 4.5rem;
  }
}

@media (width >= 1280px) {
  .site-header__inner {
    padding-inline: 1.5rem;
    gap: 1.5rem;
  }
}

/* ── Site-header height token — consumed by app-bar for sticky top offset ──
   Each value = outer top-padding (0.6rem) + inner min-height (border-box):
     mobile  < 768px : 0.6 + 3.75 = 4.35rem
     tablet  ≥ 768px : 0.6 + 4.25 = 4.85rem
     desktop ≥ 1024px: 0.6 + 4.5  = 5.1rem
   Keep in sync with the min-height rules directly above.                     */
:root {
  --site-header-height: 4.35rem;
  --drawer-offset-top: 4.35rem;
  --drawer-max-height: calc(100svh - 4.35rem);
}

html.site-drawer-open,
body.site-drawer-open {
  overscroll-behavior: none;
}

@media (width >= 768px) {
  :root {
    --site-header-height: 4.85rem;
  }
}

@media (width >= 1024px) {
  :root {
    --site-header-height: 5.1rem;
  }
}

/* Brand cluster � protected spacing from nav */
.site-header__brand-cluster {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  min-width: 0;
  overflow: visible;
  margin-inline-end: 1.5rem;
}

@media (width >= 1024px) {
  .site-header__brand-cluster {
    margin-inline-end: 2rem;
  }
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  position: relative;

  --brand-shift-x: 0px;
  --brand-shift-y: 0px;
  --brand-scale: 1;

  overflow: visible;
  max-inline-size: min(92vw, 32rem);
  transition:
    opacity 200ms ease,
    transform 200ms ease,
    max-inline-size 240ms ease;
}

.site-header__shield-mark {
  display: none;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 999px;
  background: linear-gradient(180deg, rgb(255 255 255 / 86%), rgb(240 245 252 / 82%));
  border: 1px solid color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 16%, white);
  box-shadow:
    0 10px 20px rgb(6 16 28 / 16%),
    inset 0 1px 0 rgb(255 255 255 / 70%);
  backdrop-filter: blur(10px) saturate(120%);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.site-header__shield-mark img {
  display: block;
  inline-size: 1.75rem;
  block-size: 1.75rem;
}

.site-header__brand:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

.site-header__brand:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
  outline: none;
}

/* Logo — Universal brand mark. Fluid height scales with viewport;
   width auto keeps the wide 820:240 lockup proportional. */
.site-header__logo,
.evident-logo {
  display: block;
  height: clamp(2.5rem, 5vw, 4rem);
  width: auto;
  overflow: visible;
  transform: translate3d(var(--brand-shift-x), calc(0.15rem + var(--brand-shift-y)), 0) scale(var(--brand-scale));
  transform-origin: left center;
  will-change: transform;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (width >= 768px) {
  .site-header__logo,
  .evident-logo {
    height: clamp(3rem, 5vw, 4.5rem);
  }
}

@media (width >= 1024px) {
  .site-header__logo,
  .evident-logo {
    height: clamp(3.25rem, 4.5vw, 5rem);
  }
}

.evident-logo {
  overflow: visible;
}

/* Gentle lift on hover — subtle scale, no overflow, no floating animation. */
.evident-logo__shield {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition: scale 220ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.site-header__brand:hover .evident-logo__shield,
.guest-header__brand:hover .evident-logo__shield {
  scale: 1.04;
}

@media (prefers-reduced-motion: reduce) {
  .evident-logo__shield,
  .site-header__brand:hover .evident-logo__shield,
  .guest-header__brand:hover .evident-logo__shield {
    transition: none;
    scale: 1;
  }
}

.evident-logo__name {
  transition: fill 220ms ease;
}

.evident-logo__tagline {
  font-size: clamp(14px, 2vw, 24px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.site-header__logo--dark {
  display: none;
}

/* Header uses the same canonical universal-logo partial as the footer.
   The .evident-logo class is set on the root <svg> element.
   Height drives sizing; width stays auto so the 820:240 lockup
   keeps its intrinsic proportions and stays on the nav baseline. */
.site-header__brand .evident-logo {
  display: block;
  block-size: clamp(2.5rem, 4vw, 2.75rem);
  inline-size: auto;
  overflow: visible;
  filter: drop-shadow(0 1px 0 rgb(255 255 255 / 35%)) drop-shadow(0 10px 22px rgb(8 18 33 / 24%));
  transform-origin: left center;
  transition: none;
}

@media (width >= 768px) {
  .site-header__brand .evident-logo {
    block-size: clamp(2.25rem, 3.5vw, 3rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header__brand {
    --brand-shift-x: 0px;
    --brand-shift-y: 0px;
    --brand-scale: 1;
  }

  .site-header__logo {
    will-change: auto;
    transition: none;
  }
}

@media (width >= 1024px) {
  .site-header__brand .evident-logo {
    block-size: clamp(2.5rem, 3vw, 3.25rem);
  }
}

/* Shield is now visible in the header — universal-logo.njk renders the full lockup.
   Only suppress the footer subtitle class if accidentally included. */
.site-header__brand .footer-lockup__subtitle {
  display: none;
}

@media (prefers-color-scheme: dark) {
  .site-header:not([data-theme="light"]) .site-header__brand .evident-logo {
    filter: drop-shadow(0 1px 0 rgb(255 255 255 / 22%)) drop-shadow(0 12px 24px rgb(0 0 0 / 44%));
  }
}

[data-theme="dark"] .site-header__brand .evident-logo {
  filter: drop-shadow(0 1px 0 rgb(255 255 255 / 22%)) drop-shadow(0 12px 24px rgb(0 0 0 / 44%));
}

/* Landing behavior: keep nav in control while brand collapses on scroll. */
@media (width >= 1024px) {
  .landing-body .site-header__inner {
    min-height: 4.25rem;
    padding-block: 0.4rem;
  }

  .landing-body .site-header.site-header--scrolled .site-header__inner {
    min-height: 3.75rem;
    padding-block: 0.32rem;
  }

  .landing-body .site-header.site-header--scrolled .site-header__brand {
    opacity: 1;
    transform: none;
    max-inline-size: min(92vw, 32rem);
    pointer-events: auto;
  }

  .landing-body .site-header.site-header--scrolled .site-header__shield-mark,
  .landing-body .site-header:not(.site-header--scrolled) .site-header__shield-mark {
    display: none;
    opacity: 0;
    transform: none;
    pointer-events: none;
  }

  .landing-body .site-header.site-header--scrolled .site-header__brand-copy {
    opacity: 0;
    max-width: 0;
    margin-inline-start: 0;
    padding-inline-start: 0;
    border-inline-start-width: 0;
    overflow: hidden;
    transition:
      opacity 180ms ease,
      max-width 180ms ease,
      padding-inline-start 180ms ease;
  }

  .landing-body .site-header.site-header--scrolled .site-header__brand-cluster {
    margin-inline-end: 0.5rem;
  }
}

/* Dark mode logo swap */
@media (prefers-color-scheme: dark) {
  .site-header:not([data-theme="light"]) .site-header__logo--light {
    display: none;
  }

  .site-header:not([data-theme="light"]) .site-header__logo--dark {
    display: block;
  }
}

[data-theme="dark"] .site-header__logo--light {
  display: none;
}

[data-theme="dark"] .site-header__logo--dark {
  display: block;
}

/* Brand tagline � minimal, only on very wide screens */
.site-header__brand-copy {
  display: none;
  align-items: center;
  min-width: 0;
  margin-inline-start: 0.5rem;
  padding-inline-start: 0.5rem;
  border-inline-start: 1px solid color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 15%, transparent);
}

.site-header__brand-line {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.015em;
  color: color-mix(in srgb, var(--color-text, #1a2040) 55%, white);
  white-space: nowrap;
  line-height: 1.3;
}

/* Dark mode brand line */
@media (prefers-color-scheme: dark) {
  .site-header:not([data-theme="light"]) .site-header__brand-line {
    color: color-mix(in srgb, var(--color-text, #e9eef8) 70%, white);
    border-inline-start-color: color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 30%, transparent);
  }
}

[data-theme="dark"] .site-header__brand-line {
  color: color-mix(in srgb, var(--color-text, #e9eef8) 70%, white);
  border-inline-start-color: color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 30%, transparent);
}

/* Navigation � hidden on mobile */
.site-header__nav {
  display: none;
  min-width: 0;
  flex: 1 1 auto;
  justify-content: center;
}

.site-header__menu {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header__desktop-lane {
  display: none;
  align-items: center;
  min-width: 0;
}

.site-header__desktop-lane--left {
  justify-content: flex-end;
}

.site-header__desktop-lane--right {
  justify-content: flex-start;
  gap: 0.75rem;
}

.site-header__item {
  position: relative;
}

.site-header__item--separator {
  display: none;
}

/* Navigation links � refined, compact */
.site-header__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.85rem;
  border: 0;
  border-radius: var(--site-shell-radius);
  color: #e6eef8;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 550;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  text-shadow: none;
  transition:
    background 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease;
}

.site-header__link:hover,
.site-header__link:focus-visible {
  background: rgb(255 255 255 / 7%);
  color: #fff;
  text-shadow: none;
}

.site-header__link:focus-visible {
  outline: 2px solid var(--color-accent, #f7b32b);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgb(247 179 43 / 18%);
}

/* Dark mode navigation links */
@media (prefers-color-scheme: dark) {
  .site-header:not([data-theme="light"]) .site-header__link {
    color: color-mix(in srgb, var(--color-text, #e9eef8) 85%, black);
  }

  .site-header:not([data-theme="light"]) .site-header__link:hover,
  .site-header:not([data-theme="light"]) .site-header__link:focus-visible {
    background: color-mix(in srgb, rgb(255 255 255) 12%, rgb(28 33 39));
    color: var(--gem-sapphire-text, #d0dcff);
  }

  .site-header:not([data-theme="light"]) .site-header__link:focus-visible {
    outline-color: var(--color-accent, #f7b32b);
    box-shadow: 0 0 0 6px rgb(247 179 43 / 16%);
  }

  .site-header:not([data-theme="light"]) .site-header__chevron {
    opacity: 0.7;
  }
}

[data-theme="dark"] .site-header__link {
  color: color-mix(in srgb, var(--color-text, #e9eef8) 85%, black);
}

[data-theme="dark"] .site-header__link:hover,
[data-theme="dark"] .site-header__link:focus-visible {
  background: color-mix(in srgb, rgb(255 255 255) 12%, rgb(28 33 39));
  color: var(--gem-sapphire-text, #d0dcff);
}

[data-theme="dark"] .site-header__link:focus-visible {
  outline-color: var(--color-accent, #f7b32b);
  box-shadow: 0 0 0 6px rgb(247 179 43 / 16%);
}

[data-theme="dark"] .site-header__chevron {
  opacity: 0.7;
}

.site-header__chevron {
  width: 10px;
  height: 10px;
  opacity: 0.5;
  transition: transform 200ms ease;
}

.site-header__item--has-dropdown:hover .site-header__chevron,
.site-header__item--has-dropdown:focus-within .site-header__chevron {
  transform: rotate(180deg);
}

/* Dropdown � refined, compact */
.site-header__dropdown {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: var(--z-dropdown, 3010);
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 10%, white);
  border-radius: 1rem;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 98%), rgb(250 251 253 / 96%)),
    radial-gradient(circle at top right, color-mix(in srgb, var(--gem-blue-topaz-flat, #29b6f6) 8%, transparent), transparent 30%);
  box-shadow:
    0 24px 64px rgb(17 24 39 / 12%),
    0 6px 16px rgb(17 24 39 / 6%),
    0 0 0 1px rgb(255 255 255 / 60%) inset;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(0.25rem);
  transition:
    opacity 180ms ease,
    visibility 180ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  min-width: 14rem;
}

/* Dark mode dropdown */
@media (prefers-color-scheme: dark) {
  .site-header:not([data-theme="light"]) .site-header__dropdown {
    background:
      linear-gradient(180deg, rgb(35 40 47 / 93%), rgb(28 33 39 / 90%)),
      radial-gradient(circle at top right, color-mix(in srgb, rgb(208 120 0) 10%, transparent), transparent 34%);
    border-color: color-mix(in srgb, var(--color-border-dark, #334155) 60%, rgb(28 33 39));
    box-shadow:
      0 24px 64px rgb(0 0 0 / 34%),
      0 6px 16px rgb(0 0 0 / 22%),
      0 0 0 1px rgb(255 255 255 / 10%) inset;
  }

  .site-header:not([data-theme="light"]) .site-header__panel-group {
    background: linear-gradient(180deg, rgb(255 255 255 / 8%), rgb(255 255 255 / 4%));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-border-dark, #334155) 36%, transparent);
  }

  .site-header:not([data-theme="light"]) .site-header__dropdown-heading {
    color: color-mix(in srgb, var(--gem-sapphire-text, #d0dcff) 70%, white);
  }

  .site-header:not([data-theme="light"]) .site-header__dropdown-link {
    color: var(--color-text, #e9eef8);
  }

  .site-header:not([data-theme="light"]) .site-header__dropdown-link:hover,
  .site-header:not([data-theme="light"]) .site-header__dropdown-link:focus-visible {
    background: color-mix(in srgb, rgb(255 255 255) 12%, rgb(28 33 39));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-border-dark, #334155) 45%, transparent);
  }

  .site-header:not([data-theme="light"]) .site-header__dropdown-copy {
    color: color-mix(in srgb, var(--color-text, #e9eef8) 60%, white);
  }

  .site-header:not([data-theme="light"]) .site-header__dropdown-badge {
    background: color-mix(in srgb, rgb(255 255 255) 14%, rgb(28 33 39));
    color: var(--gem-sapphire-text, #d0dcff);
  }
}

[data-theme="dark"] .site-header__dropdown {
  background:
    linear-gradient(180deg, rgb(35 40 47 / 93%), rgb(28 33 39 / 90%)),
    radial-gradient(circle at top right, color-mix(in srgb, rgb(208 120 0) 10%, transparent), transparent 34%);
  border-color: color-mix(in srgb, var(--color-border-dark, #334155) 60%, rgb(28 33 39));
  box-shadow:
    0 24px 64px rgb(0 0 0 / 34%),
    0 6px 16px rgb(0 0 0 / 22%),
    0 0 0 1px rgb(255 255 255 / 10%) inset;
}

[data-theme="dark"] .site-header__panel-group {
  background: linear-gradient(180deg, rgb(255 255 255 / 8%), rgb(255 255 255 / 4%));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-border-dark, #334155) 36%, transparent);
}

[data-theme="dark"] .site-header__dropdown-heading {
  color: color-mix(in srgb, var(--gem-sapphire-text, #d0dcff) 70%, white);
}

[data-theme="dark"] .site-header__dropdown-link {
  color: var(--color-text, #e9eef8);
}

[data-theme="dark"] .site-header__dropdown-link:hover,
[data-theme="dark"] .site-header__dropdown-link:focus-visible {
  background: color-mix(in srgb, rgb(255 255 255) 12%, rgb(28 33 39));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-border-dark, #334155) 45%, transparent);
}

[data-theme="dark"] .site-header__dropdown-copy {
  color: color-mix(in srgb, var(--color-text, #e9eef8) 60%, white);
}

[data-theme="dark"] .site-header__dropdown-badge {
  background: color-mix(in srgb, rgb(255 255 255) 14%, rgb(28 33 39));
  color: var(--gem-sapphire-text, #d0dcff);
}

@media (prefers-color-scheme: dark) {
  .site-header:not([data-theme="light"]) .site-header__dropdown-rail {
    background:
      radial-gradient(circle at top left, color-mix(in srgb, rgb(208 120 0) 10%, transparent), transparent 38%),
      linear-gradient(180deg, rgb(40 45 53 / 74%), rgb(30 35 42 / 68%));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-border-dark, #334155) 32%, transparent);
  }

  .site-header:not([data-theme="light"]) .site-header__dropdown-rail-title {
    color: var(--color-text, #e9eef8);
  }

  .site-header:not([data-theme="light"]) .site-header__dropdown-rail-copy {
    color: color-mix(in srgb, var(--color-text, #e9eef8) 68%, white);
  }

  .site-header:not([data-theme="light"]) .site-header__dropdown-rail-tags span {
    border-color: color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 24%, transparent);
    background: rgb(255 255 255 / 8%);
    color: color-mix(in srgb, var(--color-text, #e9eef8) 84%, white);
  }
}

[data-theme="dark"] .site-header__dropdown-rail {
  background:
    radial-gradient(circle at top left, color-mix(in srgb, rgb(208 120 0) 10%, transparent), transparent 38%),
    linear-gradient(180deg, rgb(40 45 53 / 74%), rgb(30 35 42 / 68%));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-border-dark, #334155) 32%, transparent);
}

[data-theme="dark"] .site-header__dropdown-rail-title {
  color: var(--color-text, #e9eef8);
}

[data-theme="dark"] .site-header__dropdown-rail-copy {
  color: color-mix(in srgb, var(--color-text, #e9eef8) 68%, white);
}

[data-theme="dark"] .site-header__dropdown-rail-tags span {
  border-color: color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 24%, transparent);
  background: rgb(255 255 255 / 8%);
  color: color-mix(in srgb, var(--color-text, #e9eef8) 84%, white);
}

.site-header__dropdown::before {
  content: "";
  position: absolute;
  inset: -0.75rem -0.25rem auto;
  block-size: 0.75rem;
}

.site-header__item--has-dropdown:hover .site-header__dropdown,
.site-header__item--has-dropdown:focus-within .site-header__dropdown,
.site-header__dropdown.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.site-header__dropdown--framework {
  width: min(50rem, calc(100vw - 2rem));
  grid-template-columns: 1fr;
}

.site-header__dropdown--mega {
  width: min(46rem, calc(100vw - 2rem));
  grid-template-columns: minmax(12rem, 14rem) 1fr;
}

.site-header__dropdown--products {
  width: min(62rem, calc(100vw - 2rem));
}

.site-header__dropdown--platform {
  width: min(36rem, calc(100vw - 2rem));
}

.site-header__dropdown--workflow {
  width: min(42rem, calc(100vw - 2rem));
}

.site-header__dropdown--workflow-conversion {
  width: min(56rem, calc(100vw - 2rem));
}

/* Large nav panel: center the open position so it doesn't clip on desktop. */
@media (width >= 1024px) {
  .site-header__dropdown--centered {
    left: 50%;
    right: auto;
    transform: translate(-50%, 0.25rem);
    transform-origin: top center;
    max-inline-size: calc(100vw - 2rem);
  }

  .site-header__item--has-dropdown:hover .site-header__dropdown--centered,
  .site-header__item--has-dropdown:focus-within .site-header__dropdown--centered,
  .site-header__dropdown--centered.is-open {
    transform: translate(-50%, 0);
  }
}

.site-header__dropdown--resources {
  width: min(22rem, calc(100vw - 2rem));
}

.site-header__dropdown-rail-layout {
  display: grid;
  grid-template-columns: minmax(14rem, 16rem) minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
}

.site-header__dropdown-rail {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  min-height: 100%;
  padding: 0.9rem;
  border-radius: 1rem;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--gem-blue-topaz-flat, #29b6f6) 14%, transparent), transparent 36%),
    linear-gradient(180deg, rgb(246 249 255 / 92%), rgb(236 241 249 / 88%));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 8%, white);
}

.site-header__dropdown-rail-title {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.1;
  color: color-mix(in srgb, var(--color-text, #1a2040) 92%, white);
}

.site-header__dropdown-rail-copy {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--color-text, #1a2040) 68%, white);
}

.site-header__dropdown-rail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.site-header__dropdown-rail-tags span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.9rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 10%, white);
  background: rgb(255 255 255 / 70%);
  color: color-mix(in srgb, var(--color-text, #1a2040) 78%, white);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.site-header__panel-groups--product-surfaces {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.site-header__dropdown-link--product {
  min-height: 5.4rem;
}

/* Panel groups */
.site-header__panel-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.9rem;
}

.site-header__panel-groups--three-up {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.site-header__panel-groups--two-up {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (width <= 1279px) {
  .site-header__panel-groups--three-up {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-header__panel-groups--two-up {
    grid-template-columns: 1fr;
  }
}

.site-header__panel-group {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  padding: 0.85rem;
  border-radius: 1rem;
  background: linear-gradient(180deg, rgb(255 255 255 / 78%), rgb(245 247 251 / 94%));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 7%, white),
    0 10px 24px rgb(15 23 42 / 4%);
}

.site-header__dropdown-heading {
  display: block;
  padding: 0 0.1rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 70%, white);
}

.site-header__dropdown-link {
  display: grid;
  gap: 0.28rem;
  padding: 0.78rem 0.72rem;
  border-radius: 0.8rem;
  color: var(--color-text, #1a2040);
  font-size: 0.88rem;
  text-decoration: none;
  transition:
    background 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.site-header__dropdown-link:hover,
.site-header__dropdown-link:focus-visible {
  background: color-mix(in srgb, var(--gem-blue-topaz-flat, #29b6f6) 7%, white);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 10%, transparent);
  transform: translateY(-1px);
}

.site-header__dropdown-link:focus-visible {
  outline: 2px solid var(--color-accent, #f7b32b);
  outline-offset: 2px;
  box-shadow:
    0 0 0 5px rgb(247 179 43 / 14%),
    inset 0 0 0 1px color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 10%, transparent);
}

.site-header__dropdown-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-weight: 620;
  font-size: 0.91rem;
  line-height: 1.28;
  letter-spacing: -0.01em;
}

.site-header__dropdown-copy {
  max-width: 34ch;
  font-size: 0.79rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--color-text, #1a2040) 60%, white);
}

.site-header__dropdown-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.16rem 0.42rem;
  border-radius: var(--radius-full, 999px);
  background: color-mix(in srgb, var(--gem-sapphire-flat, #1f3a99) 12%, white);
  color: var(--gem-sapphire-flat, #1f3a99);
  font-size: 0.56rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.site-header__dropdown-badge--starter {
  color: var(--gem-sapphire-flat, #1f3a99);
}

.site-header__dropdown-badge--core {
  color: #0b73d2;
}

.site-header__dropdown-badge--complete {
  color: var(--gem-ruby-flat, #9b0020);
}

.site-header__dropdown-badge--enterprise {
  color: var(--gem-tanzanite-flat, #3d1f8a);
}

/* Actions � compact, right-aligned */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
  margin-inline-start: auto;
}

/* Theme toggle in header */
.site-header .theme-toggle {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border-radius: var(--radius-full, 999px);
  border: 1px solid color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 10%, white);
  background: rgb(255 255 255 / 60%);
  color: color-mix(in srgb, var(--color-text, #1a2040) 70%, white);
  transition:
    background 150ms ease,
    border-color 150ms ease,
    color 150ms ease;
}

.site-header .theme-toggle:hover {
  background: rgb(255 255 255 / 85%);
  border-color: color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 20%, white);
  color: var(--color-text, #1a2040);
}

.site-header .theme-toggle svg {
  width: 18px;
  height: 18px;
}

.site-header__signal {
  display: none;
  align-items: center;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-full, 999px);
  border: 1px solid color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 12%, white);
  background: rgb(255 255 255 / 70%);
  color: color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 75%, black);
  font-size: 0.8rem;
  font-weight: 550;
  white-space: nowrap;
  transition:
    background 150ms ease,
    border-color 150ms ease,
    color 150ms ease;
}

/* Dark mode theme toggle */
@media (prefers-color-scheme: dark) {
  .site-header:not([data-theme="light"]) .theme-toggle {
    border-color: color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 30%, rgb(14 21 40));
    background: rgb(255 255 255 / 8%);
    color: var(--color-text, #e9eef8);
  }

  .site-header:not([data-theme="light"]) .theme-toggle:hover {
    background: rgb(255 255 255 / 12%);
    border-color: color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 40%, rgb(14 21 40));
    color: var(--color-text, #e9eef8);
  }
}

[data-theme="dark"] .site-header .theme-toggle {
  border-color: color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 30%, rgb(14 21 40));
  background: rgb(255 255 255 / 8%);
  color: var(--color-text, #e9eef8);
}

[data-theme="dark"] .site-header .theme-toggle:hover {
  background: rgb(255 255 255 / 12%);
  border-color: color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 40%, rgb(14 21 40));
  color: var(--color-text, #e9eef8);
}

.site-header__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0.45rem 0.9rem;
  border-radius: var(--site-shell-radius);
  border: 1px solid transparent;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background 150ms ease,
    color 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
  cursor: pointer;
}

.site-header__btn:hover {
  transform: translateY(-1px);
}

.site-header__btn:focus-visible {
  outline: 2px solid var(--color-accent, #f7b32b);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgb(247 179 43 / 18%);
}

.site-header__btn--ghost {
  color: #dbe5f0;
  border-color: color-mix(in srgb, rgb(160 179 203) 16%, rgb(11 19 31));
  background: rgb(255 255 255 / 5%);
}

.site-header__btn--ghost:hover {
  background: rgb(255 255 255 / 10%);
  border-color: color-mix(in srgb, rgb(160 179 203) 22%, rgb(11 19 31));
}

.site-header__btn--primary {
  color: #fff;
  background: linear-gradient(135deg, rgb(34 72 128), rgb(24 50 92));
  border-color: color-mix(in srgb, rgb(160 179 203) 18%, rgb(24 50 92));
  box-shadow: none;
}

.site-header__btn--primary:hover {
  background: linear-gradient(135deg, rgb(40 83 145), rgb(28 58 107));
}

/* Dark mode buttons */
@media (prefers-color-scheme: dark) {
  .site-header:not([data-theme="light"]) .site-header__btn--ghost {
    color: color-mix(in srgb, var(--color-text, #e9eef8) 80%, black);
    border-color: color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 25%, rgb(14 21 40));
    background: rgb(255 255 255 / 8%);
  }

  .site-header:not([data-theme="light"]) .site-header__btn--ghost:hover {
    background: rgb(255 255 255 / 12%);
    border-color: color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 35%, rgb(14 21 40));
  }

  .site-header:not([data-theme="light"]) .site-header__btn--primary {
    background: linear-gradient(
      135deg,
      var(--gem-sapphire-flat, #1f3a99) 0%,
      color-mix(in srgb, var(--gem-sapphire-flat, #1f3a99) 70%, var(--gem-blue-topaz-flat, #29b6f6)) 100%
    );
    box-shadow:
      0 4px 12px rgb(31 58 153 / 40%),
      0 0 24px rgb(31 58 153 / 20%);
  }

  .site-header:not([data-theme="light"]) .site-header__btn--primary:hover {
    box-shadow:
      0 6px 16px rgb(31 58 153 / 50%),
      0 0 32px rgb(31 58 153 / 30%);
  }
}

[data-theme="dark"] .site-header__btn--ghost {
  color: color-mix(in srgb, var(--color-text, #e9eef8) 80%, black);
  border-color: color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 25%, rgb(14 21 40));
  background: rgb(255 255 255 / 8%);
}

[data-theme="dark"] .site-header__btn--ghost:hover {
  background: rgb(255 255 255 / 12%);
  border-color: color-mix(in srgb, var(--gem-labradorite-flat, #2d3f6e) 35%, rgb(14 21 40));
}

[data-theme="dark"] .site-header__btn--primary {
  background: linear-gradient(
    135deg,
    var(--gem-sapphire-flat, #1f3a99) 0%,
    color-mix(in srgb, var(--gem-sapphire-flat, #1f3a99) 70%, var(--gem-blue-topaz-flat, #29b6f6)) 100%
  );
  box-shadow:
    0 4px 12px rgb(31 58 153 / 40%),
    0 0 24px rgb(31 58 153 / 20%);
}

[data-theme="dark"] .site-header__btn--primary:hover {
  box-shadow:
    0 6px 16px rgb(31 58 153 / 50%),
    0 0 32px rgb(31 58 153 / 30%);
}

/* Mobile toggle — Minimum 44x44px touch target (WCAG 2.5.5 AAA) */
.site-header__mobile-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative; /* anchor absolute icon children */
  z-index: var(--site-header-toggle-z, 11000);
  width: 2.75rem; /* 44px minimum touch target */
  height: 2.75rem; /* 44px minimum touch target */
  border-radius: var(--site-shell-radius);
  border: 1px solid color-mix(in srgb, rgb(160 179 203) 16%, rgb(11 19 31));
  background: rgb(255 255 255 / 5%);
  color: #e6eef8;
  cursor: pointer;
  transition:
    background 150ms ease,
    border-color 180ms ease,
    box-shadow 200ms ease,
    transform 80ms ease;
  flex-shrink: 0;

  /* Ensure toggle doesn't get squeezed at narrow viewports */
  margin-inline-end: max(0.5rem, env(safe-area-inset-right));
}

.site-header__mobile-toggle:hover {
  background: rgb(255 255 255 / 10%);
  border-color: rgb(45 120 255 / 30%);
}

.site-header__mobile-toggle:active {
  transform: scale(0.92);
}

/* Glow ring when the drawer is open */
.site-header__mobile-toggle[aria-expanded="true"] {
  background: rgb(45 120 255 / 16%);
  border-color: rgb(45 120 255 / 45%);
  box-shadow:
    0 0 0 3px rgb(45 120 255 / 14%),
    inset 0 1px 0 rgb(255 255 255 / 8%);
}

/* ── Icon morph: opacity + scale + rotate cross-fade ─────────────────────── */
.site-header__hamburger,
.site-header__close {
  position: absolute;
  inset: 0;
  margin: auto;
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.site-header__hamburger {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.site-header__close {
  opacity: 0;
  transform: scale(0.5) rotate(45deg);
}

.site-header__mobile-toggle[aria-expanded="true"] .site-header__hamburger {
  opacity: 0;
  transform: scale(0.5) rotate(-45deg);
}

.site-header__mobile-toggle[aria-expanded="true"] .site-header__close {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.site-header__drawer {
  display: none;
}

/* ── Drawer backdrop scrim ─────────────────────────────────────────────────── */
.site-header__drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  top: var(--drawer-offset-top, var(--site-header-height));
  background: rgb(2 8 20 / 55%);
  backdrop-filter: blur(3px);
  z-index: var(--site-header-backdrop-z, 10980);
  cursor: pointer;
  animation: backdrop-fade-in 240ms ease forwards;
}

.site-header__drawer-backdrop.is-visible {
  display: block;
}

@keyframes backdrop-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes backdrop-fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* Dark mode mobile toggle — kept; drawer is always dark so no override needed */
@media (prefers-color-scheme: dark) {
  .site-header:not([data-theme="light"]) .site-header__mobile-toggle {
    border-color: color-mix(in srgb, var(--color-border-dark, #334155) 58%, rgb(28 33 39));
    background: rgb(255 255 255 / 8%);
    color: var(--color-text, #e9eef8);
  }

  .site-header:not([data-theme="light"]) .site-header__mobile-toggle:hover {
    background: rgb(255 255 255 / 12%);
  }
}

[data-theme="dark"] .site-header__mobile-toggle {
  border-color: color-mix(in srgb, var(--color-border-dark, #334155) 58%, rgb(28 33 39));
  background: rgb(255 255 255 / 8%);
  color: var(--color-text, #e9eef8);
}

[data-theme="dark"] .site-header__mobile-toggle:hover {
  background: rgb(255 255 255 / 12%);
}

.site-header__drawer-shell {
  border-radius: var(--site-shell-radius);
}

/* ── Logo subtitle hidden in header — only shown in footer context ────────── */
.site-header__brand .footer-lockup__subtitle {
  display: none;
}

@media (width >= 1280px) {
  .landing-body .site-header__inner {
    gap: 1.4rem;
  }

  .landing-body .site-header__menu {
    gap: 0.22rem;
  }

  .landing-body .site-header__link {
    padding: 0.5rem 0.78rem;
    font-size: 0.84rem;
  }
}

/* Desktop � refined spacing */
@media (width >= 1200px) {
  .site-header__inner {
    gap: 2rem;
  }

  .site-header__logo {
    height: 88px;
    width: auto;
  }

  .site-header__link {
    padding: 0.55rem 0.85rem;
    font-size: 0.88rem;
  }

  .site-header__actions {
    gap: 0.6rem;
  }

  .site-header__btn {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
  }
}

@media (width < 1280px) {
  .site-header__dropdown-rail-layout {
    grid-template-columns: 1fr;
  }

  .site-header__panel-groups--product-surfaces {
    grid-template-columns: 1fr;
  }
}

/* Wide desktop � show signal text */
@media (width >= 1280px) {
  .site-header__signal {
    display: inline-flex;
  }
}

/* Extra wide � show brand tagline */
@media (width >= 1600px) {
  .site-header__brand-copy {
    display: flex;
  }
}

/* Mobile + laptop drawer styles (shared drawer mode through 1439px) */
@media (width < 1280px) {
  /* ── Drawer open state — deep glass morphism panel ──────────────────────── */
  .site-header__drawer[aria-hidden="false"],
  .site-header__drawer.is-open {
    position: fixed;
    inset: var(--drawer-offset-top, var(--site-header-height)) 0 0;
    z-index: var(--site-header-drawer-z, 10990);
    display: block;
    padding: 0.5rem 0 0;
    background:
      linear-gradient(168deg, rgb(8 14 28 / 97%) 0%, rgb(10 19 37 / 98%) 100%),
      radial-gradient(ellipse 70% 50% at 10% -10%, rgb(45 120 255 / 20%), transparent 62%),
      radial-gradient(ellipse 50% 40% at 90% 110%, rgb(199 71 94 / 10%), transparent 60%);
    backdrop-filter: blur(24px) saturate(1.4);
    border-bottom: 1px solid rgb(255 255 255 / 10%);
    box-shadow:
      0 28px 64px rgb(0 4 18 / 60%),
      inset 0 1px 0 rgb(255 255 255 / 7%);
    max-height: var(--drawer-max-height, calc(100svh - var(--site-header-height)));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    animation: drawer-slide-in 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  /* ── Closing animation state ─────────────────────────────────────────────── */
  .site-header__drawer.is-closing {
    animation: drawer-slide-out 260ms cubic-bezier(0.55, 0, 1, 0.45) forwards !important;
    pointer-events: none;
  }

  .site-header__drawer.is-closing .site-header__drawer-item {
    animation: none !important;
  }

  @keyframes drawer-slide-in {
    from {
      opacity: 0;
      transform: translateY(-0.625rem);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes drawer-slide-out {
    from {
      opacity: 1;
      transform: translateY(0);
    }

    to {
      opacity: 0;
      transform: translateY(-0.5rem);
    }
  }

  /* ── Per-item stagger entrance ───────────────────────────────────────────── */
  @media (prefers-reduced-motion: no-preference) {
    .site-header__drawer[aria-hidden="false"] .site-header__drawer-item,
    .site-header__drawer.is-open .site-header__drawer-item {
      animation: drawer-item-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .site-header__drawer-item:nth-child(1) {
      animation-delay: 40ms;
    }

    .site-header__drawer-item:nth-child(2) {
      animation-delay: 72ms;
    }

    .site-header__drawer-item:nth-child(3) {
      animation-delay: 104ms;
    }

    .site-header__drawer-item:nth-child(4) {
      animation-delay: 136ms;
    }

    .site-header__drawer-item:nth-child(5) {
      animation-delay: 168ms;
    }

    .site-header__drawer-item:nth-child(6) {
      animation-delay: 200ms;
    }

    .site-header__drawer-item:nth-child(7) {
      animation-delay: 232ms;
    }

    .site-header__drawer-item:nth-child(8) {
      animation-delay: 264ms;
    }
  }

  @keyframes drawer-item-in {
    from {
      opacity: 0;
      transform: translateX(-0.5rem);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  /* ── Shell container ─────────────────────────────────────────────────────── */
  .site-header__drawer-shell {
    display: grid;
    gap: 0;
    max-width: 38rem;
    margin-inline: auto;
    padding-inline: 0.75rem;
  }

  /* ── Nav list ────────────────────────────────────────────────────────────── */
  .site-header__drawer-menu {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0 0 0.25rem;
    list-style: none;
  }

  /* ── Top-level links + group summaries ───────────────────────────────────── */
  .site-header__drawer-link,
  .site-header__drawer-details summary,
  .site-header__drawer-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8125rem 1rem;
    border-radius: 0.75rem;
    color: var(--nav-atmo-text, #e6eef8);
    font-size: 0.9rem;
    font-weight: 550;
    text-decoration: none;
    cursor: pointer;
    transition:
      background 150ms ease,
      color 150ms ease,
      box-shadow 150ms ease;
    background: transparent;
    border: none;
    list-style: none;
    width: 100%;
    text-align: left;
  }

  .site-header__drawer-link:hover,
  .site-header__drawer-details summary:hover,
  .site-header__drawer-summary:hover {
    background: rgb(255 255 255 / 8%);
    color: rgb(255 255 255);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%);
  }

  .site-header__drawer-link:focus-visible,
  .site-header__drawer-details summary:focus-visible,
  .site-header__drawer-summary:focus-visible {
    outline: 2px solid var(--nav-atmo-sapphire, rgb(45 120 255));
    outline-offset: 2px;
  }

  /* ── Primary link (Workspace / Dashboard) ───────────────────────────────── */
  .site-header__drawer-link--primary {
    background: linear-gradient(135deg, rgb(22 72 168 / 18%), rgb(36 98 210 / 14%));
    border: 1px solid rgb(45 120 255 / 28%);
    color: color-mix(in srgb, var(--nav-atmo-sapphire, rgb(45 120 255)) 85%, white);
    font-weight: 600;
  }

  .site-header__drawer-link--primary:hover {
    background: linear-gradient(135deg, rgb(22 72 168 / 28%), rgb(36 98 210 / 22%));
    border-color: rgb(45 120 255 / 45%);
    color: rgb(255 255 255);
    box-shadow: none;
  }

  /* ── Chevron — rotates when details open ─────────────────────────────────── */
  .site-header__chevron {
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
    opacity: 0.65;
    flex-shrink: 0;
    margin-inline-start: 0.5rem;
  }

  .site-header__drawer-group[open] > .site-header__drawer-summary .site-header__chevron,
  .site-header__drawer-group[open] > summary .site-header__chevron {
    transform: rotate(180deg);
    opacity: 0.9;
  }

  /* ── Sub-list — sapphire accent bar ─────────────────────────────────────── */
  .site-header__drawer-sub,
  .site-header__drawer-sublist {
    margin: 0 0 0.125rem;
    padding: 0.125rem 0 0.5rem;
    list-style: none;
    border-inline-start: 2px solid rgb(45 120 255 / 42%);
    margin-inline-start: 1.875rem;
    padding-inline-start: 0.125rem;
  }

  /* ── Sub-links ───────────────────────────────────────────────────────────── */
  .site-header__drawer-link--sub,
  .site-header__drawer-sublink {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.5rem 0.875rem;
    border-radius: 0.5rem;
    color: var(--nav-atmo-muted, rgb(184 201 229));
    font-size: 0.845rem;
    font-weight: 450;
    text-decoration: none;
    transition:
      background 150ms ease,
      color 150ms ease;
    background: transparent;
    width: 100%;
    box-sizing: border-box;
    border: none;
  }

  .site-header__drawer-link--sub:hover,
  .site-header__drawer-sublink:hover {
    background: rgb(255 255 255 / 8%);
    color: var(--nav-atmo-text, #e6eef8);
  }

  .site-header__drawer-sublink span {
    font-size: 0.74rem;
    color: color-mix(in srgb, var(--nav-atmo-muted, rgb(184 201 229)) 65%, transparent);
  }

  /* ── Badge (New / Beta etc.) ─────────────────────────────────────────────── */
  .site-header__drawer-badge {
    display: inline-flex;
    padding: 0.1rem 0.45rem;
    border-radius: var(--radius-full, 999px);
    background: color-mix(in srgb, var(--nav-atmo-sapphire, rgb(45 120 255)) 16%, transparent);
    color: color-mix(in srgb, var(--nav-atmo-sapphire, rgb(45 120 255)) 90%, white);
    border: 1px solid color-mix(in srgb, var(--nav-atmo-sapphire, rgb(45 120 255)) 30%, transparent);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
  }

  /* ── Section sub-heading labels ──────────────────────────────────────────── */
  .site-header__drawer-subheading {
    padding: 0.4rem 1rem 0.1rem;
    color: color-mix(in srgb, var(--nav-atmo-text, #e6eef8) 42%, transparent);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    list-style: none;
  }

  /* ── Actions footer — CTA buttons ───────────────────────────────────────── */
  .site-header__drawer-actions {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.875rem 1rem 1.875rem;
    border-top: 1px solid rgb(255 255 255 / 9%);
    margin-top: 0.375rem;
  }

  .site-header__drawer-actions .site-header__btn {
    justify-content: center;
    width: 100%;
    padding-block: 0.75rem;
    font-size: 0.875rem;
  }

  /* Using .site-header__btn.site-header__btn--{variant} (3-class chain = 0,3,0
     specificity) so these drawer-actions rules beat the surface-scoped overrides
     in sirens-to-scales.css (0,2,0) regardless of load order. */
  .site-header__drawer-actions .site-header__btn.site-header__btn--ghost {
    background: rgb(255 255 255 / 7%);
    border-color: rgb(255 255 255 / 22%);
    color: var(--nav-atmo-text, #e6eef8);
  }

  .site-header__drawer-actions .site-header__btn.site-header__btn--ghost:hover {
    background: rgb(255 255 255 / 13%);
    border-color: rgb(255 255 255 / 32%);
    color: rgb(255 255 255);
  }

  .site-header__drawer-actions .site-header__btn.site-header__btn--primary {
    background: linear-gradient(135deg, rgb(22 72 168 / 96%), rgb(36 98 210 / 94%));
    box-shadow:
      0 8px 24px rgb(6 17 40 / 44%),
      inset 0 1px 0 rgb(255 255 255 / 14%);
    border-color: transparent;
    color: #fff;
  }

  .site-header__drawer-actions .site-header__btn.site-header__btn--primary:hover {
    background: linear-gradient(135deg, rgb(28 82 182 / 98%), rgb(42 108 224 / 96%));
    box-shadow:
      0 10px 28px rgb(6 17 40 / 50%),
      inset 0 1px 0 rgb(255 255 255 / 18%);
  }

  .site-header__drawer-actions .theme-toggle {
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    align-self: center;
  }
}

@media (width < 640px) {
  .site-header__inner {
    gap: 0.75rem;
    padding-inline: 0.75rem;
  }

  .site-header__brand-cluster {
    flex: 1 1 auto;
    min-width: 0;
    margin-inline-end: 0.5rem;
  }

  .site-header__brand {
    max-inline-size: min(86vw, 22rem);
    min-width: 0;
  }

  .site-header__brand .evident-logo {
    block-size: 3.45rem;
    inline-size: auto;
  }

  .site-header__logo {
    height: 68px;
    width: auto;
    transform: translateY(0.14rem);
  }

  .site-header__actions .site-header__btn--signup {
    display: none;
  }
}

@media (width < 430px) {
  .site-header__inner {
    gap: 0.55rem;
    padding-inline: 0.65rem;
  }

  .site-header__brand {
    max-inline-size: min(88vw, 20.5rem);
  }

  .site-header__brand .evident-logo {
    block-size: 3.2rem;
  }
}

/* Final landing authority: keep atmospheric tint + stable full logo lockup.
   This block is intentionally last to beat runtime theme and state toggles.
   Stars visible through nav — light blur, not opaque. */
.landing-body .site-header,
[data-theme="dark"] .landing-body .site-header,
[data-appearance="dark"] .landing-body .site-header {
  background:
    linear-gradient(180deg, rgb(3 7 18 / 52%), rgb(7 14 26 / 46%)),
    radial-gradient(ellipse 78% 56% at 50% -12%, rgb(59 130 246 / 12%), transparent 66%),
    radial-gradient(ellipse 54% 42% at 100% 0%, rgb(185 28 28 / 8%), transparent 64%);
  backdrop-filter: blur(8px) saturate(120%);
}

.landing-body .site-header.site-header--scrolled,
[data-theme="dark"] .landing-body .site-header.site-header--scrolled,
[data-appearance="dark"] .landing-body .site-header.site-header--scrolled {
  background:
    linear-gradient(180deg, rgb(3 7 18 / 58%), rgb(10 18 30 / 50%)),
    radial-gradient(ellipse 74% 52% at 50% -10%, rgb(59 130 246 / 10%), transparent 66%),
    radial-gradient(ellipse 52% 40% at 100% 0%, rgb(185 28 28 / 8%), transparent 64%);
  backdrop-filter: blur(10px) saturate(120%);
}

.landing-body .site-header .site-header__brand {
  opacity: 1;
  transform: none;
  max-inline-size: min(94vw, 34rem);
  pointer-events: auto;
}

.landing-body .site-header .site-header__brand .evident-logo {
  block-size: 5.8rem;
  inline-size: auto;
  overflow: visible;
  filter: drop-shadow(0 1px 0 rgb(255 255 255 / 40%)) drop-shadow(0 12px 26px rgb(7 17 30 / 30%));
  transition: none;
}

.landing-body .site-header .site-header__shield-mark {
  display: none;
}

@media (width < 640px) {
  .landing-body .site-header .site-header__brand-cluster {
    flex: 0 1 auto;
    min-width: 0;
    margin-inline-end: 0.35rem;
  }

  .landing-body .site-header .site-header__brand {
    max-inline-size: min(90vw, 24rem);
  }

  .landing-body .site-header .site-header__brand .evident-logo {
    block-size: 3.65rem;
  }
}

@media (width < 430px) {
  .landing-body .site-header .site-header__brand {
    max-inline-size: min(90vw, 22rem);
  }

  .landing-body .site-header .site-header__brand .evident-logo {
    block-size: 3.35rem;
  }
}

/* Atmospheric nav system — transparent header with coherent titles, actions, and nested menus. */
.site-header {
  --nav-atmo-sapphire: rgb(45 120 255);
  --nav-atmo-ruby: rgb(199 71 94);
  --nav-atmo-deep: rgb(8 14 26);
  --nav-atmo-deeper: rgb(11 19 35);
  --nav-atmo-text: rgb(230 238 255);
  --nav-atmo-muted: rgb(184 201 229);
  --nav-atmo-border: rgb(255 255 255 / 16%);
  --nav-atmo-hover: rgb(255 255 255 / 12%);
  --nav-atmo-panel:
    linear-gradient(180deg, rgb(8 14 26 / 86%), rgb(11 19 35 / 82%)),
    radial-gradient(ellipse 66% 48% at 20% -18%, rgb(45 120 255 / 18%), transparent 64%),
    radial-gradient(ellipse 56% 42% at 100% 112%, rgb(199 71 94 / 12%), transparent 66%);
}

.landing-body .site-header__link,
.landing-body .site-header__link:visited {
  color: var(--nav-atmo-text);
  text-shadow: 0 0 10px rgb(9 18 35 / 36%);
  background: rgb(255 255 255 / 0%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0%);
}

.landing-body .site-header__link:hover,
.landing-body .site-header__link:focus-visible {
  background: rgb(255 255 255 / 9%);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 18%);
  text-shadow: none;
}

.landing-body .site-header__link:focus-visible {
  outline: 2px solid rgb(247 179 43 / 92%);
  outline-offset: 2px;
}

.landing-body .site-header__chevron {
  opacity: 0.66;
}

.landing-body .site-header__btn--ghost {
  background: rgb(255 255 255 / 7%);
  border-color: rgb(255 255 255 / 20%);
  color: var(--nav-atmo-text);
}

.landing-body .site-header__btn--ghost:hover,
.landing-body .site-header__btn--ghost:focus-visible {
  background: rgb(255 255 255 / 14%);
  border-color: rgb(255 255 255 / 30%);
}

.landing-body .site-header__btn--primary {
  background: linear-gradient(135deg, rgb(24 75 170 / 92%), rgb(37 95 200 / 90%));
  box-shadow: 0 8px 22px rgb(6 17 34 / 32%);
}

.landing-body .site-header__btn--primary:hover,
.landing-body .site-header__btn--primary:focus-visible {
  box-shadow:
    0 10px 26px rgb(5 14 29 / 36%),
    0 0 0 1px rgb(255 255 255 / 18%) inset;
}

.landing-body .site-header__dropdown,
.landing-body .site-header__panel-group,
.landing-body .site-header__dropdown-rail,
[data-theme="dark"] .landing-body .site-header__dropdown,
[data-theme="dark"] .landing-body .site-header__panel-group,
[data-theme="dark"] .landing-body .site-header__dropdown-rail,
[data-appearance="dark"] .landing-body .site-header__dropdown,
[data-appearance="dark"] .landing-body .site-header__panel-group,
[data-appearance="dark"] .landing-body .site-header__dropdown-rail {
  background: var(--nav-atmo-panel);
  border-color: var(--nav-atmo-border);
  box-shadow:
    0 22px 54px rgb(2 8 20 / 36%),
    inset 0 0 0 1px rgb(255 255 255 / 14%);
}

/* Drawer links: landing body mobile drawer shell is always dark */
.landing-body .site-header__drawer-link,
.landing-body .site-header__drawer-details summary,
.landing-body .site-header__drawer-sublink {
  color: var(--nav-atmo-text);
}

.landing-body .site-header__drawer-sublink span {
  color: var(--nav-atmo-muted);
}

.landing-body .site-header__drawer-link:hover,
.landing-body .site-header__drawer-details summary:hover,
.landing-body .site-header__drawer-sublink:hover {
  background: var(--nav-atmo-hover);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 14%);
}

.landing-body .site-header__drawer-badge {
  border-color: rgb(255 255 255 / 20%);
  background: rgb(255 255 255 / 10%);
  color: var(--nav-atmo-text);
}

/* Dropdown panels: only use light text when the panel background IS dark.
   In light mode the panel is white — fall through to base dark-text styles.
   In dark mode (OS or explicit data-appearance) the panel is dark — light text. */
[data-appearance="dark"] .landing-body .site-header__dropdown-heading,
[data-appearance="dark"] .landing-body .site-header__dropdown-label,
[data-appearance="dark"] .landing-body .site-header__dropdown-link,
[data-appearance="dark"] .landing-body .site-header__dropdown-rail-title {
  color: var(--nav-atmo-text);
}

[data-appearance="dark"] .landing-body .site-header__dropdown-copy,
[data-appearance="dark"] .landing-body .site-header__dropdown-rail-copy {
  color: var(--nav-atmo-muted);
}

[data-appearance="dark"] .landing-body .site-header__dropdown-link:hover,
[data-appearance="dark"] .landing-body .site-header__dropdown-link:focus-visible {
  background: var(--nav-atmo-hover);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 14%);
}

[data-appearance="dark"] .landing-body .site-header__dropdown-badge,
[data-appearance="dark"] .landing-body .site-header__dropdown-rail-tags span {
  border-color: rgb(255 255 255 / 20%);
  background: rgb(255 255 255 / 10%);
  color: var(--nav-atmo-text);
}

/* OS dark mode without an explicit data-appearance toggle */
@media (prefers-color-scheme: dark) {
  .site-header:not([data-theme="light"]) .landing-body .site-header__dropdown-heading,
  .site-header:not([data-theme="light"]) .landing-body .site-header__dropdown-label,
  .site-header:not([data-theme="light"]) .landing-body .site-header__dropdown-link,
  .site-header:not([data-theme="light"]) .landing-body .site-header__dropdown-rail-title {
    color: var(--nav-atmo-text);
  }

  .site-header:not([data-theme="light"]) .landing-body .site-header__dropdown-copy,
  .site-header:not([data-theme="light"]) .landing-body .site-header__dropdown-rail-copy {
    color: var(--nav-atmo-muted);
  }

  .site-header:not([data-theme="light"]) .landing-body .site-header__dropdown-link:hover,
  .site-header:not([data-theme="light"]) .landing-body .site-header__dropdown-link:focus-visible {
    background: var(--nav-atmo-hover);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 14%);
  }

  .site-header:not([data-theme="light"]) .landing-body .site-header__dropdown-badge,
  .site-header:not([data-theme="light"]) .landing-body .site-header__dropdown-rail-tags span {
    border-color: rgb(255 255 255 / 20%);
    background: rgb(255 255 255 / 10%);
    color: var(--nav-atmo-text);
  }
}

.landing-body .site-header__mobile-toggle,
[data-theme="dark"] .landing-body .site-header__mobile-toggle {
  background: rgb(255 255 255 / 9%);
  border-color: rgb(255 255 255 / 24%);
  color: var(--nav-atmo-text);
}

.landing-body .site-header__mobile-toggle:hover,
[data-theme="dark"] .landing-body .site-header__mobile-toggle:hover {
  background: rgb(255 255 255 / 15%);
}

/* All drawer contexts share the base glass panel — no landing-body override needed.
   Only keep this block to reaffirm the deeper Evident Navy on landing pages. */
@media (width < 1280px) {
  .landing-body .site-header__drawer[aria-hidden="false"],
  .landing-body .site-header__drawer.is-open {
    background:
      linear-gradient(168deg, rgb(7 12 24 / 98%) 0%, rgb(9 17 34 / 99%) 100%),
      radial-gradient(ellipse 72% 52% at 8% -12%, rgb(45 120 255 / 22%), transparent 62%),
      radial-gradient(ellipse 50% 40% at 92% 112%, rgb(199 71 94 / 12%), transparent 58%);
    border-bottom-color: var(--nav-atmo-border);
    box-shadow:
      0 32px 72px rgb(0 3 14 / 68%),
      inset 0 1px 0 rgb(255 255 255 / 8%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-body .site-header__brand-cluster,
  .landing-body .site-header__desktop-lane,
  .site-header__beam,
  .site-header__drawer[aria-hidden="false"] {
    animation: none;
    transition: none;
  }
}

/* ============================================================================
   Logo bounding box + brand container — 2026-04-22
   ----------------------------------------------------------------------------
   The header uses brand/wordmark-only.njk, now mapped to the canonical full
   logo asset. Brand anchor is locked to flex: 0 0 auto with a hard
   max-inline-size to prevent nav collisions.
   ============================================================================ */
.site-header__brand {
  flex: 0 0 auto;
  max-inline-size: clamp(12rem, 20vw, 15rem); /* was 9rem — too narrow; wordmark (4.09:1 AR) at 2.5rem height needs ~10.2rem */
  overflow: hidden; /* kill invisible hit-area bleed */
}

.site-header__brand .evident-logo--wordmark {
  block-size: clamp(2.5rem, 4vw, 3.25rem); /* was 2.25rem — bumped to 2.5rem for mobile legibility */
  inline-size: auto;
  display: block;
  filter: drop-shadow(0 1px 0 rgb(255 255 255 / 28%)) drop-shadow(0 6px 14px rgb(8 18 33 / 18%));
}

@media (width >= 768px) {
  .site-header__brand .evident-logo--wordmark {
    block-size: clamp(2.5rem, 4vw, 3.75rem);
  }
}

/* ============================================================================
   Navigation Flow Corrections — 2026-04-22
   ----------------------------------------------------------------------------
   Fixes: logo overflowing left, CTAs overflowing right, nav groups visually
   fragmented by ARIA-only group labels ("Platform"/"Workflow"/"Workspace"
   text leaking into the visible nav).

   Strategy:
   1. ARIA-only <li> group labels are hidden visually (they carry no visible
      information; their aria-hidden attribute confirms intent).
   2. Desktop layout becomes a deterministic 3-lane grid in DOM order:
      [brand auto] [nav 1fr minmax(0)] [actions auto]
      matching how header DOM is written, so brand pins left, CTAs pin
      right, and nav flows through the center without ever overflowing.
   3. The nav container flattens all nav-group <ul>s into a single flex
      row with consistent gap — "order, navigation, nesting, like a river."
   4. Applies uniformly to landing and non-landing surfaces at ≥1024px so
      the whole site reads the same.
   ============================================================================ */

/* Screen-reader-only nav group labels: never paint them. */
.site-header__nav-group-label {
  display: none !important;
}

@media (width >= 1280px) {
  /* Unified 3-lane grid — replaces the prior flex + landing-only grid mix.
     Brand in col 1 (auto, left), nav in col 2 (shrinkable 1fr, centered),
     actions in col 3 (auto, right). Mobile toggle is display:none at this
     breakpoint and doesn't participate. */
  .site-header__inner,
  .landing-body .site-header__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
  }

  .site-header__brand-cluster,
  .landing-body .site-header__brand-cluster {
    grid-column: 1;
    justify-self: start;
    margin-inline: 0;
    min-width: 0;
  }

  .site-header__desktop-lane--left,
  .landing-body .site-header__desktop-lane--left {
    grid-column: 2;
    justify-self: stretch;
    min-width: 0;
    display: flex;
    justify-content: center;
    overflow: visible;
  }

  .site-header__desktop-lane--right,
  .landing-body .site-header__desktop-lane--right {
    grid-column: 3;
    justify-self: end;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
  }

  /* Nav container: single unified flex row, centered, gracefully shrinks.
     All nav-group <ul>s become inline segments of one continuous river. */
  .site-header__nav,
  .site-header__nav--left {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
  }

  .site-header__nav .site-header__menu {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: nowrap;
  }

  /* Keep the logo proportioned so it never hogs space away from nav. */
  .site-header__brand {
    max-inline-size: clamp(10rem, 22vw, 18rem);
  }
}

/* At very wide viewports, allow the logo a little more room. */
@media (width >= 1280px) {
  .site-header__brand {
    max-inline-size: clamp(12rem, 20vw, 20rem);
  }
}

/* ============================================================================
   Five-Item IA + Dropdowns — 2026-04-22
   ----------------------------------------------------------------------------
  Data-driven primary nav (see src/_data/nav.js `menu`). Top-level items
  are rendered inline at >=1280px and collapse to a hamburger accordion
   drawer below. Items with children show a glass dropdown panel on hover
   AND when aria-expanded="true" (click/keyboard).
   ============================================================================ */

/* Primary nav container — river row between logo and actions */
.site-header__nav--primary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 0;
  inline-size: 100%;
  overflow: visible;
}

.site-header__nav--primary > .site-header__menu {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(0.25rem, 1.4vw, 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
  min-inline-size: 0;
}

.site-header__nav--primary .site-header__item {
  position: relative;
  display: flex;
  align-items: center;
  min-inline-size: 0;
  flex: 0 0 auto;
}

.site-header__nav--primary .site-header__item:last-child {
  margin-inline-end: 0.65rem;
}

/* Trigger buttons (items that have children) use the same look as <a> links */
.site-header__link--trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  padding: 0.5rem 0.9rem;
  border-radius: 0.5rem;
  white-space: nowrap;
  transition:
    color 180ms ease,
    background 180ms ease;
}

.site-header__link--trigger:hover,
.site-header__link--trigger:focus-visible {
  background: rgb(30 64 175 / 6%);
  color: var(--color-on-surface, #0f1e3d);
}

.site-header__link--trigger:focus-visible {
  outline: 2px solid rgb(30 64 175 / 50%);
  outline-offset: 2px;
}

.site-header__chevron {
  flex: 0 0 auto;
  transition: transform 200ms ease;
}

.site-header__link--trigger[aria-expanded="true"] .site-header__chevron {
  transform: rotate(180deg);
}

/* Active section highlight — applies to parent item when the user is on
   any child URL. */
.site-header__item--active-section > .site-header__link,
.site-header__item--active-section > .site-header__link--trigger {
  color: var(--color-primary, #1e40af);
  font-weight: 600;
}

.site-header__item--active-section > .site-header__link::after,
.site-header__item--active-section > .site-header__link--trigger::after {
  content: "";
  position: absolute;
  inset-inline: 0.75rem;
  inset-block-end: -0.25rem;
  block-size: 2px;
  background: linear-gradient(90deg, var(--color-sapphire, #1e40af), var(--color-emerald, #059669));
  border-radius: 2px;
}

.site-header__link--active {
  color: var(--color-primary, #1e40af);
  font-weight: 600;
}

/* ---- Dropdown submenu panel ---- */
.site-header__submenu {
  position: absolute;
  top: calc(100% + 0.375rem);
  inset-inline-start: 0;
  min-inline-size: 16rem;
  max-inline-size: 22rem;
  padding: 0.5rem;
  border-radius: 0.875rem;
  background: linear-gradient(180deg, rgb(255 255 255 / 96%), rgb(248 250 252 / 94%));
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgb(148 163 184 / 28%);
  box-shadow:
    0 12px 40px rgb(14 21 40 / 14%),
    0 0 0 1px rgb(30 64 175 / 6%);
  z-index: var(--z-dropdown, 3020); /* above header (3000); was 30 which lost to later stacking contexts */
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.site-header__submenu[hidden] {
  display: block; /* override — we control visibility via opacity + pointer-events */
}

/* Reveal driven solely by the trigger's aria-expanded state (managed by nav-dropdowns.js).
   Hover/focus-within reveals were removed — they fought the click-to-toggle-off behavior
   (cursor still hovering parent kept the panel open after click). */
.site-header__link--trigger[aria-expanded="true"] + .site-header__submenu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.site-header__submenu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.site-header__submenu-link {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.625rem;
  color: var(--color-text, #0f172a); /* explicit dark — panel is near-white, header is dark */
  text-decoration: none;
  transition:
    background 160ms ease,
    transform 160ms ease;
}

.site-header__submenu-link:hover,
.site-header__submenu-link:focus-visible {
  background: linear-gradient(135deg, rgb(30 64 175 / 8%), rgb(5 150 105 / 6%));
  outline: none;
}

.site-header__submenu-link:focus-visible {
  box-shadow: 0 0 0 2px rgb(30 64 175 / 45%);
}

.site-header__submenu-link--active {
  background: rgb(30 64 175 / 8%);
  color: var(--color-primary, #1e40af);
  font-weight: 600;
}

.site-header__submenu-label {
  font-size: 0.9375rem;
  font-weight: 500;
}

.site-header__submenu-desc {
  font-size: 0.75rem;
  color: var(--color-on-surface-muted, #5a6782);
  line-height: 1.3;
}

/* ---- Submenu dark-mode variants ---- */
@media (prefers-color-scheme: dark) {
  .site-header:not([data-theme="light"]) .site-header__submenu {
    background: linear-gradient(180deg, rgb(30 37 52 / 97%), rgb(22 28 42 / 96%));
    border-color: rgb(71 85 105 / 35%);
    box-shadow:
      0 12px 40px rgb(0 0 0 / 36%),
      0 0 0 1px rgb(99 130 191 / 14%);
  }

  .site-header:not([data-theme="light"]) .site-header__submenu-link {
    color: var(--color-on-dark, #e9eef8);
  }

  .site-header:not([data-theme="light"]) .site-header__submenu-link:hover,
  .site-header:not([data-theme="light"]) .site-header__submenu-link:focus-visible {
    background: linear-gradient(135deg, rgb(99 130 191 / 12%), rgb(5 150 105 / 8%));
  }

  .site-header:not([data-theme="light"]) .site-header__submenu-desc {
    color: color-mix(in srgb, var(--color-on-dark, #e9eef8) 62%, transparent);
  }
}

[data-theme="dark"] .site-header__submenu {
  background: linear-gradient(180deg, rgb(30 37 52 / 97%), rgb(22 28 42 / 96%));
  border-color: rgb(71 85 105 / 35%);
  box-shadow:
    0 12px 40px rgb(0 0 0 / 36%),
    0 0 0 1px rgb(99 130 191 / 14%);
}

[data-theme="dark"] .site-header__submenu-link {
  color: var(--color-on-dark, #e9eef8);
}

[data-theme="dark"] .site-header__submenu-link:hover,
[data-theme="dark"] .site-header__submenu-link:focus-visible {
  background: linear-gradient(135deg, rgb(99 130 191 / 12%), rgb(5 150 105 / 8%));
}

[data-theme="dark"] .site-header__submenu-desc {
  color: color-mix(in srgb, var(--color-on-dark, #e9eef8) 62%, transparent);
}

/* ---- Responsive behavior ---- */

/* Below 1280px: hide inline nav, show hamburger (rule already exists above
   via .site-header__mobile-toggle — we just make sure the primary nav is
   hidden so its flex box does not reserve space). */
@media (width < 1280px) {
  .site-header__desktop-lane,
  .site-header__desktop-lane--left,
  .site-header__desktop-lane--right,
  .site-header__actions {
    display: none;
  }

  .site-header__nav--primary {
    display: none;
  }

  .site-header__brand-cluster {
    flex: 1 1 auto;
    min-width: 0;
  }

  .site-header__mobile-toggle {
    margin-inline-start: auto;
  }
}

/* At >=1280px: make sure the trigger buttons cannot overflow the row */
@media (width >= 1280px) {
  .site-header__nav--primary > .site-header__menu {
    flex-wrap: nowrap;
  }

  .site-header__item {
    min-inline-size: 0;
  }
}

/* ---- Mobile drawer dropdown accordion ---- */
.site-header__drawer-item--group {
  display: block;
}

.site-header__drawer-group {
  border-block-end: 1px solid rgb(148 163 184 / 20%);
}

.site-header__drawer-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  cursor: pointer;
}

.site-header__drawer-group > summary::-webkit-details-marker {
  display: none;
}

.site-header__drawer-group[open] > summary .site-header__chevron {
  transform: rotate(180deg);
}

.site-header__drawer-sublist {
  list-style: none;
  margin: 0;
  padding: 0 0 0.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.site-header__drawer-link--sub {
  padding-block: 0.5rem;
  font-size: 0.9375rem;
  color: var(--color-on-surface-muted, #475569);
}

.site-header__drawer-link--sub:hover,
.site-header__drawer-link--sub:focus-visible {
  color: var(--color-primary, #1e40af);
}

.site-header__drawer-link--primary {
  background: linear-gradient(135deg, rgb(30 64 175 / 8%), rgb(5 150 105 / 6%));
  border-radius: 0.5rem;
  font-weight: 600;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .site-header__submenu,
  .site-header__chevron,
  .site-header__submenu-link,
  .site-header__link--trigger {
    transition: none;
  }

  /* Icon morph: disable transitions; force correct visible state via opacity only */
  .site-header__hamburger,
  .site-header__close {
    transition: none;
    animation: none;
  }

  /* Ensure icons snap cleanly without mid-transform artifacts */
  .site-header__mobile-toggle[aria-expanded="false"] .site-header__close {
    transform: none;
  }

  .site-header__mobile-toggle[aria-expanded="true"] .site-header__hamburger {
    transform: none;
  }
}

/* ============================================================================
   Final Nav/Drawer Breakpoint Contract — 2026-04-27
   ----------------------------------------------------------------------------
   Unified behavior for all ICU public layouts (base + landing):
   - Drawer navigation from mobile through laptop widths.
   - Full inline desktop nav only when there is enough horizontal room.
   This block is intentionally last to win over legacy 1024px fragments above.
   ============================================================================ */

@media (width < 1280px) {
  .site-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.55rem;
  }

  .site-header__brand-cluster {
    grid-column: 1;
    min-width: 0;
    margin-inline-end: 0;
    overflow: clip; /* prevent SVG filter bleed into actions column */
  }

  .site-header__brand {
    max-inline-size: clamp(8.5rem, 34vw, 14rem);
    overflow: clip; /* clip SVG + filter output hard within brand bounds */
  }

  .site-header__desktop-lane--left,
  .site-header__nav--primary {
    display: none !important;
  }

  .site-header__desktop-lane--right {
    grid-column: 2;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    margin-inline-start: auto;
    gap: 0.45rem;
    min-width: 0;
    flex-wrap: nowrap;
  }

  .site-header__actions {
    flex-wrap: nowrap;
    margin-inline-start: 0;
    gap: 0.4rem;
  }

  /* At phone widths, hide the "Start Free" CTA from the top bar to prevent
     crowding — it remains accessible in the mobile drawer. */
  @media (width < 640px) {
    .site-header__actions .site-header__btn--signup {
      display: none !important;
    }
  }

  .site-header__mobile-toggle {
    grid-column: 3;
    display: inline-flex !important;
    margin-inline-start: 0.15rem;
    align-self: center;
  }

  /* ── Drawer: structural positioning only — appearance handled in the
     premium glass block above. Removing light backgrounds here prevents
     cascade-order conflicts. ───────────────────────────────────────── */
  .site-header__drawer[aria-hidden="false"] {
    position: fixed;
    inset: var(--drawer-offset-top, var(--site-header-height)) 0 0;
    z-index: var(--site-header-drawer-z, 10990);
    display: block;
    padding: 0.5rem 0 0;
    max-height: var(--drawer-max-height, calc(100svh - var(--site-header-height)));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .site-header__drawer-shell {
    display: grid;
    gap: 0;
    max-width: 38rem;
    margin-inline: auto;
    padding-inline: 0.75rem;
  }

  .site-header__drawer-shell nav {
    display: grid;
    gap: 0.9rem;
  }

  .site-header__drawer-menu {
    display: grid;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .site-header__drawer-item,
  .site-header__drawer-group {
    overflow: hidden;
  }

  .site-header__drawer-link,
  .site-header__drawer-summary {
    min-height: 3.35rem;
    padding: 0.95rem 1.05rem;
    font-size: 0.96rem;
    font-weight: 600;
    letter-spacing: -0.01em;
  }

  .site-header__drawer-sublist {
    display: grid;
    gap: 0.35rem;
    padding: 0 0.8rem 0.8rem;
    margin: 0;
    list-style: none;
  }

  .site-header__drawer-link--sub,
  .site-header__drawer-sublink {
    min-height: 2.85rem;
    padding: 0.75rem 0.85rem;
    border-radius: 0.85rem;
  }

  .site-header__drawer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    padding: 0.4rem;
    border-top: 0;
  }

  .site-header__drawer-actions .site-header__btn {
    min-height: 2.8rem;
  }
}

@media (width >= 1360px) {
  .site-header__desktop-lane,
  .site-header__nav--primary {
    display: flex !important;
  }

  .site-header__mobile-toggle,
  .site-header__drawer {
    display: none !important;
  }
}

/* Dense-desktop fit guard: prevent nav/company label overlap with auth actions.
   Keeps all top-bar elements on one lane without colliding at common laptop widths. */
@media (width >= 1360px) and (width < 1600px) {
  .site-header__inner,
  .landing-body .site-header__inner {
    grid-template-columns: minmax(11rem, 18rem) minmax(0, 1fr) auto;
    gap: clamp(0.55rem, 1vw, 0.95rem);
  }

  .site-header__brand,
  .landing-body .site-header__brand {
    max-inline-size: clamp(11rem, 16vw, 15.5rem);
  }

  .site-header__desktop-lane--left,
  .landing-body .site-header__desktop-lane--left,
  .site-header__nav,
  .site-header__nav--primary {
    overflow: hidden;
  }

  .site-header__menu {
    gap: 0.05rem;
  }

  .site-header__link {
    padding: 0.42rem 0.62rem;
    font-size: 0.8rem;
  }

  .site-header__desktop-lane--right,
  .landing-body .site-header__desktop-lane--right {
    gap: 0.35rem;
  }

  .site-header__actions {
    gap: 0.35rem;
  }

  .site-header__btn {
    min-height: 2.1rem;
    padding: 0.38rem 0.7rem;
    font-size: 0.78rem;
  }
}

/* Adaptive overflow safety: whenever JS marks force-drawer, hide inline nav
   and expose the hamburger trigger to prevent clipped/overlapping titles. */
.site-header.site-header--force-drawer .site-header__desktop-lane--left,
.site-header.site-header--force-drawer .site-header__nav--primary {
  display: none !important;
}

.site-header.site-header--force-drawer .site-header__desktop-lane--right {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  margin-inline-start: auto;
  min-width: 0;
  flex-wrap: nowrap;
  grid-column: 2;
}

.site-header.site-header--force-drawer .site-header__mobile-toggle {
  display: inline-flex !important;
  grid-column: 3;
  justify-self: end;
  margin-inline-start: 0.35rem;
}

/* Legacy safety block kept scoped to sub-1360 surfaces where drawer is default. */
@media (width < 1360px) {
  .site-header.site-header--force-drawer .site-header__desktop-lane,
  .site-header.site-header--force-drawer .site-header__nav--primary {
    display: none !important;
  }

  .site-header.site-header--force-drawer .site-header__desktop-lane--right {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    margin-inline-start: auto;
    min-width: 0;
    flex-wrap: nowrap;
  }

  .site-header.site-header--force-drawer .site-header__mobile-toggle {
    display: inline-flex !important;
  }
}

.site-header.site-header--force-drawer .site-header__drawer[aria-hidden="false"] {
  position: fixed;
  inset: var(--drawer-offset-top, var(--site-header-height)) 0 0 auto;
  width: min(26rem, 100vw);
  z-index: var(--site-header-drawer-z, 10990);
  display: block !important;
  padding: 0.6rem 0 0;
  background:
    linear-gradient(168deg, rgb(8 14 28 / 97%) 0%, rgb(10 19 37 / 98%) 100%),
    radial-gradient(ellipse 70% 50% at 6% -8%, rgb(45 120 255 / 20%), transparent 60%),
    radial-gradient(ellipse 48% 38% at 94% 110%, rgb(199 71 94 / 10%), transparent 56%);
  border-inline-start: 1px solid rgb(45 120 255 / 22%);
  border-top: 1px solid rgb(45 120 255 / 14%);
  box-shadow:
    -20px 0 48px rgb(0 4 18 / 48%),
    0 14px 28px rgb(0 4 18 / 44%),
    inset 0 1px 0 rgb(255 255 255 / 7%);
  backdrop-filter: blur(24px) saturate(1.4);
  max-height: var(--drawer-max-height, calc(100svh - var(--site-header-height)));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 1rem 0 0 1rem; /* left-edge rounding on the right panel */
  will-change: transform, opacity; /* hint compositor for right-slide entrance */
  scrollbar-width: thin;
  scrollbar-color: rgb(45 120 255 / 30%) transparent;
  animation: drawer-slide-in-right 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.site-header.site-header--force-drawer .site-header__drawer::-webkit-scrollbar {
  width: 4px;
}

.site-header.site-header--force-drawer .site-header__drawer::-webkit-scrollbar-thumb {
  background: rgb(45 120 255 / 40%);
  border-radius: 2px;
}

.site-header.site-header--force-drawer .site-header__drawer-shell {
  display: grid;
  gap: 0;
  margin-inline: auto;
  padding-inline: 0.85rem;
}

.site-header.site-header--force-drawer .site-header__drawer-shell nav {
  display: grid;
  gap: 0.75rem;
}

.site-header.site-header--force-drawer .site-header__drawer-menu {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0 0 0.25rem;
  list-style: none;
}

.site-header.site-header--force-drawer .site-header__drawer-link,
.site-header.site-header--force-drawer .site-header__drawer-summary,
.site-header.site-header--force-drawer .site-header__drawer-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3rem;
  padding: 0.8rem 1rem;
  border-radius: 0.75rem;
  color: var(--nav-atmo-text, #e6eef8);
  background: transparent;
  border: none;
  text-decoration: none;
}

.site-header.site-header--force-drawer .site-header__drawer-sub,
.site-header.site-header--force-drawer .site-header__drawer-sublist {
  margin: 0 0 0.125rem;
  padding: 0.125rem 0 0.5rem;
  list-style: none;
  border-inline-start: 2px solid rgb(45 120 255 / 42%);
  margin-inline-start: 1.875rem;
  padding-inline-start: 0.125rem;
}

.site-header.site-header--force-drawer .site-header__drawer-link--sub,
.site-header.site-header--force-drawer .site-header__drawer-sublink {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.5rem 0.875rem;
  border-radius: 0.5rem;
  color: var(--nav-atmo-muted, rgb(184 201 229));
  text-decoration: none;
}

.site-header.site-header--force-drawer .site-header__drawer-actions {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.875rem 1rem 1.25rem;
  border-top: 1px solid rgb(255 255 255 / 9%);
  margin-top: 0.375rem;
}

body.landing-body .site-header.site-header--force-drawer .site-header__drawer[aria-hidden="false"],
[data-theme="dark"] body.landing-body .site-header.site-header--force-drawer .site-header__drawer[aria-hidden="false"],
[data-appearance="dark"] body.landing-body .site-header.site-header--force-drawer .site-header__drawer[aria-hidden="false"] {
  background:
    linear-gradient(
      90deg,
      rgb(8 14 26 / 62%) 0%,
      rgb(11 19 35 / 84%) 14%,
      rgb(11 19 35 / 92%) 32%,
      rgb(11 19 35 / 92%) 68%,
      rgb(11 19 35 / 84%) 86%,
      rgb(8 14 26 / 62%) 100%
    ),
    radial-gradient(ellipse 68% 48% at 16% -18%, rgb(45 120 255 / 16%), transparent 64%);
  border-bottom-color: var(--nav-atmo-border);
  box-shadow:
    0 20px 44px rgb(2 8 20 / 40%),
    inset 0 1px 0 rgb(255 255 255 / 18%);
  backdrop-filter: blur(20px) saturate(132%);
}

/* 1024-1439 now intentionally remains in drawer mode via the universal
   contract above to prevent desktop nav squeeze on medium-wide displays. */

/* ── Force-drawer: close animation slides panel back to the right ─────────── */
.site-header.site-header--force-drawer .site-header__drawer.is-closing {
  animation: drawer-slide-out-right 260ms cubic-bezier(0.55, 0, 1, 0.45) forwards !important;
}

/* ── Force-drawer: drawer items stagger entrance from right ──────────────── */
@media (prefers-reduced-motion: no-preference) {
  .site-header.site-header--force-drawer .site-header__drawer[aria-hidden="false"] .site-header__drawer-item {
    animation: drawer-item-in-right 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .site-header.site-header--force-drawer .site-header__drawer-item:nth-child(1) {
    animation-delay: 60ms;
  }

  .site-header.site-header--force-drawer .site-header__drawer-item:nth-child(2) {
    animation-delay: 100ms;
  }

  .site-header.site-header--force-drawer .site-header__drawer-item:nth-child(3) {
    animation-delay: 140ms;
  }

  .site-header.site-header--force-drawer .site-header__drawer-item:nth-child(4) {
    animation-delay: 180ms;
  }

  .site-header.site-header--force-drawer .site-header__drawer-item:nth-child(5) {
    animation-delay: 220ms;
  }

  .site-header.site-header--force-drawer .site-header__drawer-item:nth-child(6) {
    animation-delay: 260ms;
  }
}

/* ── Right-panel slide keyframes ─────────────────────────────────────────── */
@keyframes drawer-slide-in-right {
  from {
    opacity: 0.7;
    transform: translateX(100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes drawer-slide-out-right {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0.6;
    transform: translateX(100%);
  }
}

@keyframes drawer-item-in-right {
  from {
    opacity: 0;
    transform: translateX(0.75rem);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ── Backdrop: animated fade-out on close ───────────────────────────────── */
.site-header__drawer-backdrop.is-hiding {
  animation: backdrop-fade-out 220ms ease forwards;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Emergency navigation stacking fix
   Root cause: public landing/hero visuals can create higher stacking contexts
   than the opened navigation drawer. The menu must always sit above page art.
   -------------------------------------------------------------------------- */

:root {
  --ev-z-header: 9000;
  --ev-z-menu-overlay: 9500;
  --ev-z-menu-drawer: 10000;
}

/* Keep the public header above all page-level hero/scene layers. */
.site-header,
.site-header-v2,
.public-header,
.evident-header,
.ev-header,
.header-shell,
[data-site-header],
[data-public-header] {
  position: relative;
  z-index: var(--ev-z-header) !important;
  isolation: isolate;
}

/* Any opened mobile menu/drawer/panel must beat landing hero artwork. */
.site-header__menu,
.site-header__mobile,
.site-header__drawer,
.site-header__panel,
.site-nav__mobile,
.mobile-nav,
.mobile-menu,
.nav-drawer,
.nav-panel,
.menu-drawer,
[data-mobile-menu],
[data-nav-menu],
[data-nav-panel],
[data-menu-panel] {
  z-index: var(--ev-z-menu-drawer) !important;
}

/* Fixed overlays need their own stacking context and visible scroll area. */
.site-header__drawer,
.site-header__panel,
.site-nav__mobile,
.mobile-nav,
.mobile-menu,
.nav-drawer,
.nav-panel,
.menu-drawer,
[data-mobile-menu],
[data-nav-panel],
[data-menu-panel] {
  isolation: isolate;
  max-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Backdrops should sit below the drawer but above page content. */
.site-header__backdrop,
.mobile-menu__backdrop,
.nav-drawer__backdrop,
.menu-backdrop,
[data-menu-backdrop],
[data-nav-backdrop] {
  z-index: var(--ev-z-menu-overlay) !important;
}

/* Landing/root page layers must never outrank the opened menu. */
.landing-hero,
.landing-hero *,
.landing-pipeline,
.landing-artifacts,
.sirens-scene,
.sirens-scene *,
.sirens-bg,
.sirens-bg *,
.sirens-orb,
.sirens-orb *,
[data-sirens-stage],
[data-sirens-stage] * {
  z-index: auto;
}

/* Keep intentional positioned content sane without letting it eclipse the nav. */
body[data-site-surface="public"] main,
body[data-site-surface="public"] .page-shell,
body[data-site-surface="public"] .landing-shell {
  position: relative;
  z-index: 1;
}

/* Mobile drawer refinement: make the operational menu feel intentional. */
@media (max-width: 900px) {
  .site-header__drawer,
  .site-header__panel,
  .site-nav__mobile,
  .mobile-nav,
  .mobile-menu,
  .nav-drawer,
  .nav-panel,
  .menu-drawer,
  [data-mobile-menu],
  [data-nav-panel],
  [data-menu-panel] {
    background:
      radial-gradient(circle at 20% 0%, rgba(79, 129, 255, 0.16), transparent 34rem),
      linear-gradient(180deg, rgba(9, 19, 35, 0.98), rgba(6, 15, 28, 0.99)) !important;
    box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.45);
  }

  .site-header__drawer a,
  .site-header__panel a,
  .site-nav__mobile a,
  .mobile-nav a,
  .mobile-menu a,
  .nav-drawer a,
  .nav-panel a,
  .menu-drawer a,
  [data-mobile-menu] a,
  [data-nav-panel] a,
  [data-menu-panel] a {
    position: relative;
    z-index: 1;
  }
}

/* Permanent public-nav stacking guard.
   The public drawer, backdrop, and toggle must outrank every landing/homepage visual layer. */
:root {
  --site-header-backdrop-z: 39980;
  --site-header-drawer-z: 39990;
  --site-header-toggle-z: 40000;
  --ev-z-header: 39000;
  --ev-z-menu-overlay: 39980;
  --ev-z-menu-drawer: 39990;
}

body.site-drawer-open .site-header,
html.site-drawer-open .site-header {
  z-index: 39000 !important;
}

body.site-drawer-open .site-header__drawer,
body.site-drawer-open .site-header__drawer[aria-hidden="false"],
body.site-drawer-open .site-header__drawer.is-open {
  position: fixed !important;
  z-index: 39990 !important;
  pointer-events: auto !important;
}

body.site-drawer-open .site-header__drawer-backdrop,
body.site-drawer-open #drawer-backdrop {
  position: fixed !important;
  z-index: 39980 !important;
  pointer-events: auto !important;
}

body.site-drawer-open #mobile-nav-toggle,
body.site-drawer-open .site-header__mobile-toggle {
  z-index: 40000 !important;
}

/* --------------------------------------------------------------------------
   Homepage drawer hard-fix
   Issue: root/landing page opens only the drawer chrome/top bar while the menu
   content remains visually buried, collapsed, or structurally transparent.
   Fix: when the drawer is open, force the drawer into a real viewport overlay
   and force drawer navigation/actions visible inside that overlay.
   -------------------------------------------------------------------------- */

html.site-drawer-open,
body.site-drawer-open {
  overflow: hidden !important;
}

body.site-drawer-open .site-header {
  position: relative !important;
  z-index: 40000 !important;
  isolation: isolate;
}

/* Real full-screen drawer, not a decorative strip. */
body.site-drawer-open .site-header__drawer,
body.site-drawer-open .site-header__drawer[aria-hidden="false"],
body.site-drawer-open .site-header__drawer.is-open,
body.site-drawer-open #site-drawer,
body.site-drawer-open [data-site-drawer],
body.site-drawer-open [data-mobile-menu],
body.site-drawer-open [data-nav-panel],
body.site-drawer-open [data-menu-panel] {
  position: fixed !important;
  inset: 0 !important;
  z-index: 39990 !important;
  display: grid !important;
  grid-template-rows: auto 1fr auto;
  min-width: 100vw !important;
  width: 100vw !important;
  max-width: none !important;
  min-height: 100dvh !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  padding: max(1rem, env(safe-area-inset-top)) clamp(1.25rem, 5vw, 4rem) max(1.5rem, env(safe-area-inset-bottom)) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(112, 58, 91, 0.22), transparent 36rem),
    radial-gradient(circle at 88% 8%, rgba(47, 98, 171, 0.22), transparent 38rem),
    linear-gradient(180deg, rgba(8, 18, 33, 0.985), rgba(5, 13, 25, 0.995)) !important;
  box-shadow:
    inset 0 -1px 0 rgba(135, 181, 240, 0.18),
    0 2rem 6rem rgba(0, 0, 0, 0.55);
}

/* Force menu content to be visible inside the opened drawer. */
body.site-drawer-open .site-header__drawer nav,
body.site-drawer-open .site-header__drawer .site-header__nav,
body.site-drawer-open .site-header__drawer .site-header__links,
body.site-drawer-open .site-header__drawer .site-header__actions,
body.site-drawer-open .site-header__drawer .site-nav,
body.site-drawer-open .site-header__drawer .site-nav__links,
body.site-drawer-open .site-header__drawer .site-nav__actions,
body.site-drawer-open #site-drawer nav,
body.site-drawer-open #site-drawer .site-header__nav,
body.site-drawer-open #site-drawer .site-header__links,
body.site-drawer-open #site-drawer .site-header__actions,
body.site-drawer-open [data-site-drawer] nav,
body.site-drawer-open [data-mobile-menu] nav,
body.site-drawer-open [data-nav-panel] nav,
body.site-drawer-open [data-menu-panel] nav {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 39991 !important;
}

/* Drawer links/actions must render above homepage visual layers. */
body.site-drawer-open .site-header__drawer a,
body.site-drawer-open .site-header__drawer button,
body.site-drawer-open #site-drawer a,
body.site-drawer-open #site-drawer button,
body.site-drawer-open [data-site-drawer] a,
body.site-drawer-open [data-site-drawer] button,
body.site-drawer-open [data-mobile-menu] a,
body.site-drawer-open [data-mobile-menu] button,
body.site-drawer-open [data-nav-panel] a,
body.site-drawer-open [data-nav-panel] button,
body.site-drawer-open [data-menu-panel] a,
body.site-drawer-open [data-menu-panel] button {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 39992 !important;
}

/* If homepage-specific CSS created a hostile stacking context, neutralize it only while drawer is open. */
body.site-drawer-open main,
body.site-drawer-open .landing-hero,
body.site-drawer-open .landing-hero *,
body.site-drawer-open .sirens-scene,
body.site-drawer-open .sirens-scene *,
body.site-drawer-open [data-sirens-stage],
body.site-drawer-open [data-sirens-stage] * {
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Keep drawer chrome clickable. */
body.site-drawer-open .site-header,
body.site-drawer-open .site-header *,
body.site-drawer-open .site-header__drawer,
body.site-drawer-open .site-header__drawer *,
body.site-drawer-open #site-drawer,
body.site-drawer-open #site-drawer *,
body.site-drawer-open [data-site-drawer],
body.site-drawer-open [data-site-drawer] * {
  pointer-events: auto !important;
}

/* Ensure the close/toggle button stays above everything. */
body.site-drawer-open #mobile-nav-toggle,
body.site-drawer-open .site-header__mobile-toggle,
body.site-drawer-open .site-header__drawer-close,
body.site-drawer-open [data-nav-toggle],
body.site-drawer-open [data-menu-close] {
  position: relative !important;
  z-index: 40001 !important;
}

/* =========================================================
   Sticky header stabilization over hero/video
   ========================================================= */

.site-header,
header[role="banner"] {
  position: relative;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
  background: rgba(8, 12, 24, 0.76);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

/* subtle visual integration when laid over the hero */
.site-header::after,
header[role="banner"]::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.1) 20%,
    rgba(255, 255, 255, 0.16) 50%,
    rgba(255, 255, 255, 0.1) 80%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* ── Header logo: always use the bright-text (dark-background) variant ────────
   The header surface is always dark navy regardless of OS colour scheme.
   The SVG's runtime detector starts from document.documentElement (the <html>
   element, not the inline SVG's DOM position) so detectBg() never reaches the
   dark header background — it falls back to the body colour, which may be light.
   Force the correct variant here at the CSS level with !important so this
   overrides any incorrect inline style the broken JS may have applied.          */
.site-header__brand .evident-logo g[id$="-variant-light"] {
  display: none !important;
}

.site-header__brand .evident-logo g[id$="-variant-dark"] {
  display: block !important;
}