/* THE HEADER - one file, loaded last by every page, so there is exactly one
   header on the site and no page can drift from it.
   It also owns .cta, the blue pill, which is used in the header, the hero, the
   mid-page prompts and the quote band - so the rule is deliberately global.
   Fallbacks are supplied on every token this file uses, so it renders the same
   whatever stylesheet a page happens to load alongside it. */

.top{
  /* its own inset, not the page's --edge: every stylesheet defines that token
     differently, which made the header sit at a different width per page */
  --top-inset:clamp(var(--space-4,16px),3vw,var(--space-10,40px));
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-4,16px);
  padding:var(--space-3,12px) var(--top-inset);
  background:var(--white,#fff);
  border-bottom:1px solid var(--ink-075,#EDF3F7);
}
.top img{width:160px;height:auto;display:block}

.top__nav{
  display:flex;align-items:center;gap:var(--space-8,32px);
  font-family:var(--font-body,sans-serif);
  font-weight:var(--weight-heavy,800);font-size:var(--text-xs,12px);
  letter-spacing:var(--tracking-caps,.08em);text-transform:uppercase;
}
.top__nav a{
  color:var(--ink-500,#5B6871);white-space:nowrap;text-decoration:none;
  transition:color var(--speed-fast,120ms) var(--ease-out,ease);
}
.top__nav a:hover{color:var(--ink-900,#0B0B0C)}
/* .top__nav a (0,1,1) outranks .cta (0,1,0), so every .cta colour needs a
   .top__nav-scoped twin or the nav's grey wins inside the header. */
.top__nav a.cta{color:var(--ink-900,#0B0B0C)}
.top__nav a.cta:hover{color:var(--ink-900,#0B0B0C)}

.cta{
  padding:var(--space-3,12px) var(--space-6,24px);
  border-radius:var(--radius-pill,999px);
  background:var(--sky-500,#00A8F0);color:var(--ink-900,#0B0B0C);
  font-weight:var(--weight-bold,700);font-size:var(--text-sm,14px);
  /* the nav is uppercased micro type; the button is a sentence, not a label */
  text-transform:none;letter-spacing:normal;
  box-shadow:var(--shadow-button,0 2px 6px rgba(0,168,240,.35));
  transition:background-color var(--speed-fast,120ms) var(--ease-out,ease),
             transform var(--speed-fast,120ms) var(--ease-out,ease);
}
.cta:hover{background:var(--sky-600,#0088C6);color:var(--ink-900,#0B0B0C);transform:translateY(-2px)}
/* the press is the scale alone - no colour shift, so the button does not darken */
.cta:active{transform:scale(.98)}

/* Desktop: links inline, burger out of the way. */
.top__links{display:flex;align-items:center;gap:var(--space-4,16px)}
.burger{display:none}

/* The lockup holds its 160px minimum, so on a phone the secondary links used
   to simply vanish and the CTA was the only way anywhere. They now live behind
   the burger, which sits to the right of the pill as the last thing in the row.

   767px, not 820: this is the site's one mobile/desktop switch, shared with the
   quick-link strip and the sticky bar. The header was the last thing using its
   own number. Measured at the widths this changes: logo + links + CTA needs
   632px against 768 available, so the links go inline with room to spare. */
@media (max-width:767px){
  .burger{
    display:grid;gap:4px;place-content:center;
    width:44px;height:44px;                 /* a real 44px touch target */
    border-radius:var(--radius-sm,8px);
    background:none;border:0;cursor:pointer;flex:none;
  }
  .burger span{
    display:block;width:20px;height:2px;border-radius:2px;
    background:var(--ink-900,#0B0B0C);
    transition:transform var(--speed-fast,120ms) var(--ease-out,ease),
               opacity var(--speed-fast,120ms) var(--ease-out,ease);
  }
  /* the bars fold into a cross while the panel is open */
  .top.is-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .top.is-open .burger span:nth-child(2){opacity:0}
  .top.is-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

  .top__links{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--white,#fff);
    border-bottom:1px solid var(--ink-075,#EDF3F7);
    box-shadow:var(--shadow-card,0 8px 24px rgba(0,106,156,.10));
    padding:var(--space-2,8px) var(--top-inset);
  }
  .top.is-open .top__links{display:flex}
  .top__links a{
    padding:var(--space-4,16px) 0;
    border-bottom:1px solid var(--ink-075,#EDF3F7);
  }
  .top__links a:last-child{border-bottom:0}
}
@media (prefers-reduced-motion:reduce){.burger span{transition:none}}