/* Shared sticky site header — one component across every public page.
   Direction: FLOATING GLASS ISLAND — the bar detaches into a rounded, frosted
   lavender-glass island that floats just below the top edge. Translucent
   (backdrop-filter), so content blurs through it rather than a flat white fill.
   Self-contained: its own tokens + logo face, so it renders identically no
   matter which page's stylesheet sits below it. */
@font-face{font-family:InfHeaderSerif;src:url('/fonts/instrument/InstrumentSerif-Regular.ttf') format('truetype');font-weight:400;font-display:swap}

.site-header{
  --sh-ink:#242532; --sh-muted:#5c6070; --sh-blue:#3d3df5; --sh-blue-dark:#2929cb;
  --sh-line:#e6e8f2;
  position:sticky; top:0; z-index:100;
  background:transparent;                 /* wrapper is transparent; the island carries the glass */
  padding:14px clamp(14px,3vw,26px) 0;    /* floats below the top edge, with side gutters */
  transition:padding .2s;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* the floating glass island */
.site-header-inner{
  position:relative;
  max-width:1160px; margin:auto; height:60px; padding:0 12px 0 22px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  border-radius:16px;
  /* AT REST (over the pale hero top): blend into the page — a barely-there
     lavender tint + hairline lavender border, no white fill / no white highlight,
     so it never reads as a white slab where there is nothing behind it to frost. */
  background:rgba(224,227,250,.13);
  -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(203,208,238,.5);
  box-shadow:0 6px 22px rgba(48,45,120,.07);
  transition:box-shadow .25s, background .25s, border-color .25s, -webkit-backdrop-filter .25s, backdrop-filter .25s;
}
/* ON SCROLL (content now sits under the bar): the frosted glass materialises. */
.site-header[data-scrolled="true"] .site-header-inner{
  background:rgba(224,227,250,.5);
  -webkit-backdrop-filter:blur(34px) saturate(1.75); backdrop-filter:blur(34px) saturate(1.75);
  border-color:rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(255,255,255,.14), 0 14px 36px rgba(48,45,120,.2);
}

/* OVER A DARK SECTION (marked [data-nav-dark]): invert to light text + dark glass */
.site-header[data-on-dark="true"] .site-header-inner{
  background:rgba(22,22,42,.34);
  border-color:rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 12px 34px rgba(0,0,0,.24);
}
.site-header[data-on-dark="true"] .site-header-logo{color:#fff}
.site-header[data-on-dark="true"] .site-header-logo .sh-mark{color:#b9b6ff}
.site-header[data-on-dark="true"] .site-header-nav a{color:rgba(255,255,255,.78)}
.site-header[data-on-dark="true"] .site-header-nav a:hover,
.site-header[data-on-dark="true"] .site-header-nav a[aria-current="page"]{color:#fff}
.site-header[data-on-dark="true"] .site-header-burger{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.12)}
.site-header[data-on-dark="true"] .site-header-burger span{background:#fff}

.site-header-logo{
  display:flex; align-items:center; gap:8px;
  font-family:InfHeaderSerif,Georgia,serif; font-size:27px; line-height:1;
  letter-spacing:-1.4px; color:var(--sh-ink); text-decoration:none;
  transition:color .2s;
}
/* the mark is the infinite-ring icon — a dark cosmic tile, rounded so it reads
   as an intentional icon chip beside the wordmark */
.site-header-logo .sh-mark{display:block;flex:none;width:28px;height:28px;border-radius:7px}

/* flat links — no capsule; current page gets a blue underline */
.site-header-nav{display:flex; align-items:center; gap:24px}
.site-header-nav a{
  position:relative; font-size:13px; color:var(--sh-muted); text-decoration:none; line-height:1;
  padding:6px 0; transition:color .15s;
}
.site-header-nav a:hover{color:var(--sh-ink)}
.site-header-nav a[aria-current="page"]{color:var(--sh-ink);font-weight:500}
.site-header-nav a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px; border-radius:2px; background:var(--sh-blue);
}

/* GTM Hub — a small pill button, secondary to the blue primary CTA: a soft
   indigo tint with an outline so it reads as a button of a different colour */
.site-header .sh-hub{
  display:inline-flex; align-items:center; gap:5px;
  font-size:13px; font-weight:500; color:var(--sh-blue); text-decoration:none;
  background:rgba(61,61,245,.09); border:1px solid rgba(61,61,245,.24);
  border-radius:999px; padding:8px 15px; line-height:1;
  transition:background .15s, border-color .15s, color .15s;
}
.site-header .sh-hub:hover{background:rgba(61,61,245,.16); border-color:rgba(61,61,245,.4); color:var(--sh-blue-dark)}
.site-header[data-on-dark="true"] .sh-hub{
  background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3); color:#fff;
}
.site-header[data-on-dark="true"] .sh-hub:hover{background:rgba(255,255,255,.22)}

/* blue primary CTA */
.site-header-cta{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:500; color:#fff; text-decoration:none;
  background:var(--sh-blue); border-radius:999px; padding:10px 18px;
  box-shadow:0 6px 16px #3d3df540, inset 0 1px 0 rgba(255,255,255,.3);
  transition:background .15s, transform .06s;
}
.site-header-cta:hover{background:var(--sh-blue-dark)}
.site-header-cta:active{transform:translateY(1px)}
.site-header a:focus-visible,.site-header-cta:focus-visible,.site-header-burger:focus-visible{outline:2px solid var(--sh-blue);outline-offset:3px}

.site-header-right{display:flex;align-items:center;gap:12px}

/* hamburger — hidden on desktop */
.site-header-burger{display:none;flex-direction:column;justify-content:center;gap:4px;width:38px;height:38px;padding:0 9px;border:1px solid rgba(255,255,255,.6);border-radius:9px;background:rgba(255,255,255,.4);cursor:pointer}
.site-header-burger span{display:block;height:1.6px;background:var(--sh-ink);border-radius:2px;transition:transform .2s,opacity .2s}
.site-header[data-menu-open="true"] .site-header-burger span:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
.site-header[data-menu-open="true"] .site-header-burger span:nth-child(2){opacity:0}
.site-header[data-menu-open="true"] .site-header-burger span:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}

@media(max-width:900px){
  .site-header{padding:10px clamp(12px,3vw,18px) 0}
  .site-header-inner{height:54px;padding:0 12px 0 16px;gap:14px}
  .site-header-logo{font-size:23px}
  .site-header-burger{display:flex}
  .site-header-cta{padding:9px 14px;font-size:12px}
  /* nav drops as a matching frosted-glass panel below the island */
  .site-header-nav{
    display:none; position:absolute; top:calc(100% + 8px); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:2px; border-radius:16px;
    padding:9px; background:rgba(233,235,252,.75);
    -webkit-backdrop-filter:blur(34px) saturate(1.6); backdrop-filter:blur(34px) saturate(1.6);
    border:1px solid rgba(255,255,255,.55);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 20px 44px rgba(48,45,120,.2);
  }
  .site-header[data-menu-open="true"] .site-header-nav{display:flex}
  .site-header-nav a{padding:12px 13px;border-radius:9px;font-size:15px}
  .site-header-nav a:not([aria-current="page"]):active{background:rgba(255,255,255,.5)}
  .site-header-nav a[aria-current="page"]::after{display:none}
  .site-header-nav a[aria-current="page"]{background:rgba(61,61,245,.1)}
}
@media(prefers-reduced-motion:reduce){.site-header-burger span,.site-header,.site-header-inner,.site-header-nav a,.site-header-cta{transition:none}}