.site-header {
  position: relative;
  /* Header sits ABOVE the open mobile-menu overlay so the logo and the
     hamburger/X button stay visible (and in their original DOM-flow
     position — no positional jump on toggle). The overlay's z-index
     is 40; this is 50. */
  z-index: 50;
  /* 20 (vs the math-perfect 24) reads as better-balanced optically. */
  padding-top: 20px;
  padding-bottom: 20px;
}

.site-header__inner {
  position: relative;
  /* Higher than .mobile-menu's z-index (40) so the logo + hamburger paint
     above the open menu overlay. Without this, .mobile-menu (position: fixed,
     a positioned sibling of .site-header__inner) paints on top of the static
     inner — a stacking-group issue. Making the inner positioned + z-indexed
     puts both siblings in the same group, and the higher z wins. */
  z-index: 50;
  /* 3-column grid with equal-fraction left + right columns. With a flex
     layout the nav-primary's center landed at the midpoint between the
     logo and the CTA — but those have different widths, so the nav drifted
     right of true viewport center. Equal 1fr columns guarantee the middle
     column (nav) is centered to the inner regardless of side widths. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.site-header__logo { grid-column: 1; justify-self: start; }
.nav-primary       { grid-column: 2; }
/* CTA + burger share column 3 — only one is visible at any breakpoint. */
.site-header__cta  { grid-column: 3; justify-self: end; }
.nav-burger        { grid-column: 3; justify-self: end; }

.site-header__logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  /* Nudge the whole wrapper 6px left so the visible "T" aligns with the
     column edge (the Rive artboard reserves left padding for animation
     overshoot). Margin on the parent — not the canvas — so the canvas's
     content box stays at its declared width across all entry points. */
  margin-left: -6px;
}
.site-header__logo img,
.site-header__logo canvas {
  /* Scaled up ~21% from the original sizing for the new animated-logo
     height. 220px max is the canonical width shared with /login, /signup,
     and /request-demo so the topnav matches across all entry points. */
  width: clamp(174px, 22.4vw, 220px);
  height: auto;
  aspect-ratio: 191 / 26;
  display: block;
}

.nav-primary {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}
.nav-primary ul {
  display: flex;
  gap: clamp(20px, 3vw, 40px);
}
.nav-primary a {
  font-weight: 500;
  font-size: var(--fs-nav);
  line-height: 1.6;
  color: var(--c-navy);
  transition: color 200ms var(--ease-out), opacity 200ms var(--ease-out), font-weight 200ms var(--ease-out);
}
.nav-primary a:hover { opacity: 0.7; }
/* Active state — scrollspy in main.js sets aria-current="true" on the
   anchor whose target section is currently in view. .is-active is a
   manual fallback for cases without scrollspy. */
.nav-primary a[aria-current="true"],
.nav-primary a.is-active {
  color: var(--c-sage);
  font-weight: 600;
}

.site-header__cta { flex: 0 0 auto; }

/* Hamburger — inline SVG icon (28×20). Touch target stays 44×44; the visible
   icon is 20px tall to match the logo. Paths morph into an X when expanded. */
.nav-burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
}
.nav-burger__icon {
  width: 28px;
  height: 20px;
  display: block;
}
.nav-burger__path {
  transition: transform 250ms var(--ease-out), opacity 200ms var(--ease-out);
  transform-origin: 50% 50%;
  transform-box: fill-box;
}
.nav-burger[aria-expanded="true"] .nav-burger__path--top {
  transform: translateY(8px) rotate(45deg);
}
.nav-burger[aria-expanded="true"] .nav-burger__path--mid {
  opacity: 0;
}
.nav-burger[aria-expanded="true"] .nav-burger__path--bot {
  transform: translateY(-8px) rotate(-45deg);
}

/* While the menu is open: pin the entire header to the top of the
   viewport so the logo + hamburger/X stay visible regardless of how
   far the user had scrolled before opening. Lock body scroll.
   z-index 50 keeps it on top of the .mobile-menu overlay (z-index 40).
   The hamburger doesn't move WITHIN the header, so the SVG path morph
   stays in place — no jump. */
body[data-menu="open"] { overflow: hidden; }
body[data-menu="open"] .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
}

/* Mobile menu panel — full-viewport overlay. The header (with logo +
   hamburger/X) sits on top via z-index, so the logo stays visible and
   the close X is the same DOM element as the open hamburger. */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: #D9E7F6;
  overflow: hidden; /* clip drifting cloud SVGs to the viewport */
}
.mobile-menu[hidden] { display: none; }

/* Drifting clouds — ambient pure-CSS animation. Each cloud has a unique
   keyframe + duration so they don't sync. pointer-events: none so they
   never block link/button taps. */
.mobile-menu__cloud {
  position: absolute;
  pointer-events: none;
  user-select: none;
  height: auto;
}
/* Asymmetric scatter — varied sizes, no horizontal pairings, mix of
   off-canvas and inset positions so the rhythm doesn't read as 2/2/2. */
.mobile-menu__cloud--1 { top:  3%;  left: -12%; width: 280px; opacity: 0.7;  animation: mm-drift-1 24s ease-in-out infinite; }
.mobile-menu__cloud--2 { top: 24%;  right: -4%; width: 140px; opacity: 0.5;  animation: mm-drift-2 28s ease-in-out infinite; }
.mobile-menu__cloud--3 { top: 46%;  left: 56%;  width: 110px; opacity: 0.4;  animation: mm-drift-3 32s ease-in-out infinite; }
.mobile-menu__cloud--4 { top: 62%;  left: -10%; width: 240px; opacity: 0.6;  animation: mm-drift-4 22s ease-in-out infinite; }
.mobile-menu__cloud--5 { bottom: 6%; right: -2%; width: 200px; opacity: 0.55; animation: mm-drift-5 30s ease-in-out infinite; }
.mobile-menu__cloud--6 { bottom: 26%; left: 10%; width: 90px;  opacity: 0.35; animation: mm-drift-6 26s ease-in-out infinite; }

@keyframes mm-drift-1 { 0%, 100% { translate: 0 0; } 50% { translate: 26px -10px; } }
@keyframes mm-drift-2 { 0%, 100% { translate: 0 0; } 50% { translate: -20px 14px; } }
@keyframes mm-drift-3 { 0%, 100% { translate: 0 0; } 50% { translate: 18px 12px; } }
@keyframes mm-drift-4 { 0%, 100% { translate: 0 0; } 50% { translate: -28px -8px; } }
@keyframes mm-drift-5 { 0%, 100% { translate: 0 0; } 50% { translate: 22px -16px; } }
@keyframes mm-drift-6 { 0%, 100% { translate: 0 0; } 50% { translate: -18px 10px; } }

@media (prefers-reduced-motion: reduce) {
  .mobile-menu__cloud { animation: none; }
}

/* Inner content — centered vertically + horizontally inside the overlay.
   Sits above the clouds via z-index. Generous gaps so each section's
   rhythm matches the mockup. */
.mobile-menu__inner {
  position: relative;
  z-index: 1;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 56px;
  padding: calc(var(--header-h) + 32px) var(--gutter) 32px;
  text-align: center;
  overflow-y: auto;
}

/* Nav lists — vertical stack with breathing room sized to match the
   mockup. Large items get a heavier gap than small items so the visual
   weight reads as two distinct sections. */
.mobile-menu__primary ul,
.mobile-menu__secondary ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.mobile-menu__primary ul { gap: 40px; }
.mobile-menu__secondary ul { gap: 22px; }

/* Base link — navy 500, transitions to sage 600 when active. Single rule
   applies to both large + small variants; size differences below. */
.mobile-menu__link {
  color: var(--c-navy);
  font-weight: 500;
  text-decoration: none;
  transition: color 200ms var(--ease-out), font-weight 200ms var(--ease-out);
}
.mobile-menu__link--large { font-size: 23px; line-height: 1.3; }
.mobile-menu__link--small { font-size: 15px; line-height: 1.4; }
.mobile-menu__link[aria-current="true"],
.mobile-menu__link.is-active {
  color: var(--c-sage);
  font-weight: 600;
}

/* Social icons row — 32×32 with a comfortable thumb-friendly gap. */
.mobile-menu__socials {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
}
.mobile-menu__social {
  display: inline-flex;
  width: 32px;
  height: 32px;
  transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out);
}
.mobile-menu__social img { width: 32px; height: 32px; display: block; }
.mobile-menu__social:hover { opacity: 0.8; transform: scale(1.05); }

/* CTA + microcopy — uses the same content-sized pill as the desktop
   buttons (no width override, no justify-content rule — icon + text
   sit packed against the button's own padding). */
.mobile-menu__ctaWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.mobile-menu__microcopy {
  font-size: var(--fs-micro);
  color: var(--c-microcopy);
}
.mobile-menu__login {
  margin-top: 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-navy);
  text-decoration: none;
  transition: color 200ms var(--ease-out);
}
.mobile-menu__login:hover { color: var(--c-sage); }

/* ─── Staggered fade-in on open ────────────────────────────────────────
   Each menu section's items rise + fade in with a tiny per-item delay.
   25ms between items so the cascade is felt but the whole thing wraps
   in ~600ms. Re-fires every open because the body[data-menu="open"]
   selector starts matching fresh each time. Items animation-fill-mode
   defaults to `backwards`, so the @keyframes `from` state holds until
   each item's delay elapses (no flash of pre-animation visibility). */
@keyframes mm-item-in {
  from { opacity: 0; translate: 0 10px; }
  to   { opacity: 1; translate: 0 0; }
}

body[data-menu="open"] .mobile-menu__primary li,
body[data-menu="open"] .mobile-menu__secondary li,
body[data-menu="open"] .mobile-menu__social,
body[data-menu="open"] .mobile-menu__ctaWrap {
  animation: mm-item-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

body[data-menu="open"] .mobile-menu__primary   li:nth-child(1) { animation-delay:  65ms; }
body[data-menu="open"] .mobile-menu__primary   li:nth-child(2) { animation-delay: 100ms; }
body[data-menu="open"] .mobile-menu__primary   li:nth-child(3) { animation-delay: 140ms; }
body[data-menu="open"] .mobile-menu__primary   li:nth-child(4) { animation-delay: 185ms; }
body[data-menu="open"] .mobile-menu__secondary li:nth-child(1) { animation-delay: 230ms; }
body[data-menu="open"] .mobile-menu__secondary li:nth-child(2) { animation-delay: 270ms; }
body[data-menu="open"] .mobile-menu__secondary li:nth-child(3) { animation-delay: 310ms; }
body[data-menu="open"] .mobile-menu__socials   .mobile-menu__social:nth-child(1) { animation-delay: 355ms; }
body[data-menu="open"] .mobile-menu__socials   .mobile-menu__social:nth-child(2) { animation-delay: 395ms; }
body[data-menu="open"] .mobile-menu__socials   .mobile-menu__social:nth-child(3) { animation-delay: 440ms; }
body[data-menu="open"] .mobile-menu__ctaWrap                                      { animation-delay: 500ms; }

@media (prefers-reduced-motion: reduce) {
  body[data-menu="open"] .mobile-menu__primary li,
  body[data-menu="open"] .mobile-menu__secondary li,
  body[data-menu="open"] .mobile-menu__social,
  body[data-menu="open"] .mobile-menu__ctaWrap {
    animation: none;
  }
}

@media (max-width: 860px) {
  .nav-primary { display: none; }
  .site-header__cta { display: none; }
  .nav-burger { display: inline-flex; }
  /* Drop the desktop grid below the hamburger breakpoint so the empty
     middle column doesn't add an extra 24px of gap between the logo and
     the burger. flex + space-between is the cleaner mobile layout. */
  .site-header__inner {
    display: flex;
    justify-content: space-between;
  }
}

/* Mobile logo: 26px tall (6px taller than the 20px baseline the hamburger
   uses) per design — logo reads a touch more prominent than the burger.
   Nudged 1px down so the letterform optically aligns with the hamburger. */
@media (max-width: 720px) {
  .site-header__logo img,
  .site-header__logo canvas {
    width: auto;
    height: 26px;
    margin-top: 1px;
  }
  /* Compensate optically for the hamburger's 44px touch target — the visible
     icon inside has ~12px of internal vertical padding, which makes the top
     gap read taller than the bottom. Trim 10px from header padding-top to
     visually match the 20px gutter. */
  .site-header { padding-top: 10px; }
}