/* 01 — Header (Figma 791:5130 desktop 1920 / 353:2186 mobile / 712:8538 mobile menu open) */
.site-header {
  position: sticky;
  top: var(--announce-h, 0px); /* the announcement strip stays above it while it is on screen */
  z-index: 50;
  width: 100%;
  background: var(--surface-white);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
/* scrolling down tucks the bar away (with the strip above it); scrolling up brings it back */
.site-header.is-tucked { transform: translateY(calc(-100% - var(--announce-h, 0px))); }
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }
.site-header__inner {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 16px var(--page-pad);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  box-sizing: border-box;
}
/* Logo — new wordmark lockup (Figma 1011:57209: 173×25) */
.site-header__logo {
  display: block;
  flex-shrink: 0;
  margin: 0;
  line-height: 0;
  transition: opacity .25s ease;
}
.site-header__logo-img {
  display: block;
  width: 173px;
  height: 25px;
}
.site-header__logo:hover { opacity: .8; }

.site-header__nav {
  flex: 1 0 0;
  min-width: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.site-header__link {
  display: block;
  position: relative;
  padding: 8px 16px;
  color: var(--text-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: color .25s ease;
}
/* hover: a hairline draws in from the left under the label, retracts to the right on leave */
.site-header__link::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 5px;
  height: 1.5px;
  background: var(--brand-primary);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
.site-header__link:hover { color: var(--brand-primary); }
.site-header__link:hover::after { transform: scaleX(1); transform-origin: left; }
/* the page being shown keeps its hairline (build.py marks the link aria-current) */
.site-header__link[aria-current="page"]::after { transform: scaleX(1); }

.site-header__demo-short { display: none; }
/* right-hand actions: the primary "Book a demo" plus "Contact us" */
.site-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
}
/* Figma buttons are 48px tall (stroke inside), 24px side padding — keep header at exactly 72px */
.site-header .btn { box-sizing: border-box; height: 48px; padding: 11px 24px; }
.site-header__menu {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  transition: background-color .25s ease;
}
.site-header__menu:hover { background: var(--surface-section); }
/* burger → X, drawn in CSS so it can morph (Figma 353:3254 / 712:8541) */
.site-header__burger { position: relative; display: block; width: 24px; height: 24px; }
.site-header__burger i {
  position: absolute; left: 3px; right: 3px; height: 1.5px; border-radius: 1px;
  background: var(--text-ink);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), opacity .2s ease;
}
.site-header__burger i:nth-child(1) { top: 6px; }
.site-header__burger i:nth-child(2) { top: 11.25px; }
.site-header__burger i:nth-child(3) { top: 16.5px; }
.site-header.is-open .site-header__menu { background: var(--surface-subtle); }
/* open state: the 44×44 / radius-12 plate from Figma 1022:57605, whatever the closed burger's footprint */
.site-header.is-open .site-header__menu { width: 44px; height: 44px; border-radius: 12px; }
.site-header.is-open .site-header__burger i:nth-child(1) { transform: translateY(5.25px) rotate(45deg); }
.site-header.is-open .site-header__burger i:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.site-header.is-open .site-header__burger i:nth-child(3) { transform: translateY(-5.25px) rotate(-45deg); }

/* Mobile full-screen menu — toggled by adding .is-open on .site-header (Figma 712:8538) */
.site-header__mobile-nav {
  display: none;
  flex-direction: column;
  flex: 1 0 0;
  min-height: 1px;
  overflow-y: auto;
  background: var(--surface-card);
  /* Lightship-style: the panel wipes down, then its rows rise into place */
  clip-path: inset(0 0 100% 0);
  transition: clip-path .6s cubic-bezier(.16, 1, .3, 1);
}
.site-header.is-open .site-header__mobile-nav { clip-path: inset(0 0 0 0); }
.site-header__mobile-link,
.site-header__mobile-sublink,
.site-header__mobile-cta .btn {
  opacity: 0;
  transform: translateY(28px);
}
.site-header__mobile-cta .btn { transition: opacity .5s ease, transform .7s cubic-bezier(.16, 1, .3, 1), background-color .25s ease, color .25s ease, border-color .25s ease; }
.site-header.is-open .site-header__mobile-link,
.site-header.is-open .site-header__mobile-sublink,
.site-header.is-open .site-header__mobile-cta .btn { opacity: 1; transform: none; }
.site-header.is-open .site-header__mobile-link:nth-child(1) { transition-delay: .10s; }
.site-header.is-open .site-header__mobile-link:nth-child(2) { transition-delay: .16s; }
.site-header.is-open .site-header__mobile-link:nth-child(3) { transition-delay: .22s; }
.site-header.is-open .site-header__mobile-link:nth-child(4) { transition-delay: .28s; }
.site-header.is-open .site-header__mobile-link:nth-child(5) { transition-delay: .34s; }
.site-header.is-open .site-header__mobile-link:nth-child(6) { transition-delay: .40s; }
.site-header.is-open .site-header__mobile-link:nth-child(7) { transition-delay: .46s; }
.site-header.is-open .site-header__mobile-sublink:nth-child(1) { transition-delay: .46s; }
.site-header.is-open .site-header__mobile-sublink:nth-child(2) { transition-delay: .50s; }
.site-header.is-open .site-header__mobile-cta .btn:nth-child(1) { transition-delay: .54s; }
.site-header.is-open .site-header__mobile-cta .btn:nth-child(2) { transition-delay: .60s; }
.site-header__mobile-divider { transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.16, 1, .3, 1) .42s; }
.site-header.is-open .site-header__mobile-divider { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .site-header__mobile-nav { clip-path: none; transition: none; }
  .site-header__mobile-link, .site-header__mobile-sublink, .site-header__mobile-cta .btn { opacity: 1; transform: none; transition: none; }
  .site-header__mobile-divider { transform: none; transition: none; }
}
.site-header__mobile-content {
  flex: 1 0 0;
  min-height: 1px;
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
  overflow-y: auto;
}
.site-header__mobile-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 0 20px;
}
.site-header__mobile-link {
  display: block;
  font: 500 28px/32px var(--font);
  letter-spacing: -0.03em;
  color: var(--text-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: color .25s ease, opacity .5s ease, transform .7s cubic-bezier(.16, 1, .3, 1);
}
.site-header__mobile-link:hover { color: var(--text-muted); }
.site-header__mobile-link--single { padding: 16px 0; }
.site-header__mobile-divider { width: 100%; height: 1px; background: var(--border-divider); flex-shrink: 0; }
.site-header__mobile-footer-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 20px;
}
.site-header__mobile-sublink { color: var(--text-ink); text-decoration: none; white-space: nowrap; transition: color .25s ease, opacity .5s ease, transform .7s cubic-bezier(.16, 1, .3, 1); }
.site-header__mobile-sublink:hover { color: var(--text-muted); }
.site-header__mobile-cta {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 16px 32px;
}
.site-header__mobile-cta .btn { width: 100%; }
.site-header__mobile-demo { padding-left: 32px; padding-right: 32px; }
.site-header__mobile-legal {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding-top: 8px;
  color: var(--text-muted);
}
.site-header__mobile-legal a { color: inherit; text-decoration: none; white-space: nowrap; }
.site-header__mobile-legal a:hover { color: var(--text-ink); }

/* up to 1700: the full 10-link nav only fits when compacted */
@media (max-width: 1700px) {
  .site-header__link { padding: 8px 10px; }
  .site-header__link::after { left: 10px; right: 10px; }
}
/* 1280–1599: the full nav only fits when compacted */
@media (max-width: 1599px) {
  .site-header__inner { gap: 16px; }
  .site-header__nav { gap: 0; }
  .site-header__link { padding: 8px 6px; font-size: 14px; }
  .site-header__link::after { left: 6px; right: 6px; }
  .site-header__logo-img { width: 150px; height: auto; }
}

/* Below 1400 the NAV collapses into the full-screen menu (logo, 10 links and 2 buttons no
   longer fit). Both buttons stay in the bar: measured, the pair needs 600px at this size
   and 514px once the compact treatment kicks in at 767, so there is room to spare all the
   way down to the 560 cut-off below. "Contact us" used to be dropped here too, which left
   a laptop-width header showing one CTA and a great deal of empty space. */
@media (max-width: 1399px) {
  .site-header__inner { justify-content: space-between; }
  .site-header__nav { display: none; }
  .site-header__menu { display: flex; }
  .site-header__actions { flex: none; gap: 20px; }

  /* open: header becomes a fixed full-screen panel */
  .site-header.is-armed {
    position: fixed;
    inset: 0;
    z-index: 60; /* the open menu covers the announcement strip too */
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--surface-card);
    overflow: hidden;
  }
  .site-header.is-armed .site-header__inner { background: var(--surface-card); flex-shrink: 0; width: 100%; }
  /* With the menu open the bar keeps only the logo and the close button: the panel
     underneath carries its own full-width "Book a demo" and "Contact us", so leaving
     either in the bar would show the same action twice, 80px apart. */
  .site-header.is-armed .site-header__demo,
  .site-header.is-armed .site-header__contact { display: none; }
  .site-header.is-armed .site-header__actions { justify-content: flex-end; }
  .site-header.is-armed .site-header__mobile-nav { display: flex; }
  body:has(.site-header.is-armed) { overflow: hidden; }
}

@media (max-width: 767px) {
  .site-header__inner {
    padding: 12px 16px;
    gap: 16px;
  }
  /* Figma 353:2186: logo 132.31×20, compact 36px CTA with the full label, 24px burger, 20px gap */
  .site-header__logo { flex: none; margin: 0; }
  .site-header__logo-img { width: 132.31px; height: 20px; }
  .site-header__actions { width: auto; gap: 20px; }
  .site-header__actions .btn { height: 36px; padding: 6px 24px; }
  .site-header__menu { width: 24px; height: 36px; }
  .site-header.is-open .site-header__menu { width: 44px; height: 44px; margin: -4px -10px; }
  .site-header__demo-full { display: inline; }
  .site-header__demo-short { display: none; }
}

/* Phones: the logo, two labelled buttons and the burger stop fitting. Measured on the
   real bar, the pair needs 514px, and no shortening rescues a 390px screen — "Book" plus
   "Contact" at 16px padding and a 12px gap still overflows 393 by 10px. So below 560,
   where there is still 46px to spare, "Contact us" hands off to the burger menu, which
   presents it as a full-width button rather than something squeezed into a corner. */
@media (max-width: 559px) {
  .site-header__contact { display: none; }
}