/* ---------------------------------------------------------------------------
   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-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: sticky;
  top: 0;
  right: 0;
  left: 0;
  z-index: var(--z-header, 3000);
  padding: 0.8rem clamp(0.9rem, 2.4vw, 1.5rem) 0;
  backdrop-filter: none;
  -webkit-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),
    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.55rem;
}

/* ── 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;
    -webkit-backdrop-filter: none;
  }
}

[data-theme="dark"] .site-header {
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-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: 5rem;
  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%);
}

/* ── 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: 6rem;
    padding-block: 0.625rem;
  }
}

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

@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.8rem) + inner min-height (border-box):
     mobile  < 768px : 0.8 + 5.0 = 5.8rem
     tablet  ≥ 768px : 0.8 + 6.0 = 6.8rem
     desktop ≥ 1024px: 0.8 + 7.0 = 7.8rem
   Keep in sync with the min-height rules directly above.                     */
:root {
  --site-header-height: 5.8rem;
}

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

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

/* 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, 5vw, 4rem);
  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(3rem, 5vw, 4.5rem);
  }
}

@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(3.25rem, 4.5vw, 5rem);
  }
}

/* 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.5rem;
    padding-block: 0.4rem;
  }

  .landing-body .site-header.site-header--scrolled .site-header__inner {
    min-height: 4rem;
    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: all 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: all 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: all 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: all 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;
  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: all 150ms 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%);
}

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

.site-header__mobile-toggle[aria-expanded="true"] .site-header__close {
  display: block;
}

.site-header__close {
  display: none;
}

.site-header__drawer {
  display: none;
  will-change: opacity, transform;
}

/* ── Drawer backdrop scrim ─────────────────────────────────────────────────── */
.site-header__drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  top: var(--site-header-height);
  background: rgb(2 8 20 / 55%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: calc(var(--z-dropdown, 3010) - 1);
  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;
    top: var(--site-header-height);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-dropdown, 3010);
    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);
    -webkit-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: 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 220ms 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. */
.landing-body .site-header,
[data-theme="dark"] .landing-body .site-header,
[data-appearance="dark"] .landing-body .site-header {
  background:
    linear-gradient(180deg, rgb(19 34 52 / 80%), rgb(24 28 41 / 72%)),
    radial-gradient(ellipse 78% 56% at 50% -12%, rgb(59 130 246 / 18%), transparent 66%),
    radial-gradient(ellipse 54% 42% at 100% 0%, rgb(185 28 28 / 14%), transparent 64%);
  backdrop-filter: blur(20px) saturate(118%);
}

.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(18 32 49 / 88%), rgb(23 27 40 / 82%)),
    radial-gradient(ellipse 74% 52% at 50% -10%, rgb(59 130 246 / 16%), transparent 66%),
    radial-gradient(ellipse 52% 40% at 100% 0%, rgb(185 28 28 / 12%), transparent 64%);
  backdrop-filter: blur(22px) saturate(122%);
}

.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(9rem, 20vw, 15rem);
  overflow: hidden; /* kill invisible hit-area bleed */
}

.site-header__brand .evident-logo--wordmark {
  block-size: clamp(2.25rem, 4vw, 3.25rem);
  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%);
  -webkit-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__nav--primary {
    display: none;
  }
}

/* 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;
  }
}

/* ============================================================================
   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;
  }

  .site-header__brand {
    max-inline-size: clamp(8.5rem, 34vw, 14rem);
  }

  .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;
  }

  .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: absolute;
    inset: 100% 0 auto;
    z-index: var(--z-dropdown, 3010);
    display: block;
    padding: 1rem;
    max-height: calc(100svh - 5rem);
    overflow-y: auto;
  }

  .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 >= 1280px) {
  .site-header__desktop-lane,
  .site-header__nav--primary {
    display: flex !important;
  }

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

/* Ensure desktop nav remains visible at large viewports even when the
   adaptive 'force-drawer' class has been applied by measurement checks.
   This prevents automated test and headless-measurement false-positives
   from hiding the primary navigation at standard desktop widths. */
@media (width >= 1280px) {
  .site-header.site-header--force-drawer .site-header__nav--primary {
    display: flex !important;
  }

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

  .site-header.site-header--force-drawer .site-header__drawer {
    display: none !important;
  }
}

/* Adaptive overflow safety: even on narrow/medium screens, force drawer mode
   whenever brand + nav + action lanes cannot fit without collision. This
   block intentionally applies only below the 1280px unified desktop
   breakpoint so that wide desktop viewports keep their inline nav. */
@media (width < 1280px) {
  .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: absolute;
  inset: 100% 0 auto;
  z-index: var(--z-dropdown, 3010);
  display: block !important;
  padding: 1rem;
  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: 1px solid rgb(45 120 255 / 18%);
  border-top: 0;
  box-shadow:
    0 28px 64px rgb(0 4 18 / 60%),
    inset 0 1px 0 rgb(255 255 255 / 7%);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  max-height: calc(100svh - 5rem);
  overflow-y: auto;
  animation: drawer-slide-in 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

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. */