/* Sticky header — Claralix
   The header floats over the dark hero, then pins to the top on scroll and picks up
   keeps its own dark ground, compacting slightly so it takes less of the screen.
   Selectors are scoped to body.direction-e because site.css sets the header's
   position from `.direction-e header`, which outranks a bare `header` rule. */

body.direction-e header,
header{
  position:fixed;
  top:calc(36px + env(safe-area-inset-top,0px));
  left:0; right:0;
  margin:0;
  padding:0 4.5%;
  z-index:40;
  transition:top .32s cubic-bezier(.4,0,.2,1),
             height .32s cubic-bezier(.4,0,.2,1),
             background-color .3s ease,
             border-color .3s ease,
             box-shadow .3s ease;
}
body.direction-e header{height:92px}

body.direction-e.hdr-scrolled header{
  top:env(safe-area-inset-top,0px);
  height:74px;
  background:rgba(23,30,32,.92);
  -webkit-backdrop-filter:blur(14px) saturate(1.08);
  backdrop-filter:blur(14px) saturate(1.08);
  border-bottom-color:rgba(255,255,255,.16);
  box-shadow:0 14px 44px -26px rgba(0,0,0,.95);
}

/* in-page links must clear the pinned bar */
html{scroll-padding-top:132px}

@media(max-width:760px){
  body.direction-e header,
  header{top:calc(33px + env(safe-area-inset-top,0px));margin:0;padding:0 6%}
  body.direction-e.hdr-scrolled header{height:68px}
  html{scroll-padding-top:104px}
  /* the mobile menu hangs off the header, so let it follow the changing height */
  body.direction-e .site-nav{top:100%;left:0;right:0;padding-left:6%;padding-right:6%}
}

@media(prefers-reduced-motion:reduce){
  body.direction-e header,header{transition:none}
}