.s-site-header{
  position:fixed;
  inset-block-start:0;
  inset-inline:0;
  z-index:100;
  background:transparent;
  border-block-end:1px solid transparent;
  transition:background .35s ease,border-color .35s ease,backdrop-filter .35s ease;
}
.s-site-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-block:24px;
  padding-inline:40px;
  max-width:1440px;
  margin-inline:auto;
}
.s-site-header .brand{
  display:inline-flex;
  align-items:center;
  gap:16px;
  font-family:var(--font-head);
  font-size:clamp(1.05rem,1.6vw,1.35rem);
  font-weight:600;
  letter-spacing:.02em;
  color:var(--c-text);
  text-decoration:none;
  line-height:1.2;
  min-height:44px;
}
.s-site-header .brand span[data-logo]{
  display:inline-block;
  white-space:nowrap;
}
.s-site-header .brand::after{
  content:"";
  display:block;
  inline-size:1px;
  block-size:1.15em;
  background:var(--c-secondary);
  opacity:.35;
}
.s-site-header__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding-block:8px;
  padding-inline:18px;
  border:1px solid color-mix(in srgb,var(--c-secondary) 30%,transparent);
  border-radius:999px;
  font-family:var(--font-body);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--c-secondary);
  white-space:nowrap;
  transition:border-color .3s ease,color .3s ease;
}
.s-site-header.is-scrolled{
  background:color-mix(in srgb,var(--c-bg) 82%,transparent);
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  border-block-end-color:color-mix(in srgb,var(--c-secondary) 12%,transparent);
}
.s-site-header.is-scrolled .s-site-header__badge{
  border-color:color-mix(in srgb,var(--c-secondary) 40%,transparent);
  color:var(--c-text);
}
@media (max-width:900px){
  .s-site-header__inner{
    padding-inline:32px;
    gap:16px;
  }
}
@media (max-width:600px){
  .s-site-header__inner{
    padding-block:20px;
    padding-inline:24px;
    gap:12px;
  }
  .s-site-header .brand{
    gap:12px;
    font-size:1rem;
  }
  .s-site-header__badge{
    padding-inline:14px;
    font-size:.66rem;
    letter-spacing:.12em;
  }
}
@media (prefers-reduced-motion:reduce){
  .s-site-header,.s-site-header__badge{transition:none;}
}