.site-header {
  position:
    relative;

  z-index:
    100;

  background:
    rgba(
      255,
      255,
      255,
      .97
    );

  border-bottom:
    1px solid
    var(--line);

  backdrop-filter:
    blur(14px);
}

.site-header__inner {
  min-height:
    var(--header-height);

  display:
    flex;

  align-items:
    center;

  gap:
    42px;
}

.brand {
  display:
    flex;

  align-items:
    center;

  flex-shrink:
    0;

  padding:
    4px 0;

  text-decoration:
    none;
}

.brand__logo {
  width:
    165px;

  height:
    auto;
}

.site-nav {
  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  margin-left:
    auto;
}

.site-nav a {
  position:
    relative;

  padding:
    10px 13px;

  color:
    var(--trazza-dark);

  border-radius:
    8px;

  font-size:
    14px;

  font-weight:
    700;

  text-decoration:
    none;

  transition:
    color var(--transition),
    background var(--transition);
}

.site-nav a:hover {
  color:
    var(--trazza-green);

  background:
    var(--green-soft);
}

.nav-toggle {
  display:
    none;

  width:
    44px;

  height:
    44px;

  margin-left:
    auto;

  padding:
    10px;

  color:
    var(--trazza-dark);

  background:
    transparent;

  border:
    0;

  border-radius:
    9px;

  cursor:
    pointer;
}

.nav-toggle > span:not(.sr-only) {
  display:
    block;

  width:
    22px;

  height:
    2px;

  margin:
    4px auto;

  background:
    currentColor;

  border-radius:
    999px;

  transition:
    transform var(--transition),
    opacity var(--transition);
}

.nav-toggle[aria-expanded="true"]
> span:nth-child(1) {
  transform:
    translateY(6px)
    rotate(45deg);
}

.nav-toggle[aria-expanded="true"]
> span:nth-child(2) {
  opacity:
    0;
}

.nav-toggle[aria-expanded="true"]
> span:nth-child(3) {
  transform:
    translateY(-6px)
    rotate(-45deg);
}

@media (max-width: 860px) {

  .brand__logo {
    width:
      150px;
  }

  .nav-toggle {
    display:
      block;
  }

  .site-nav {
    position:
      absolute;

    top:
      calc(100% + 1px);

    left:
      0;

    right:
      0;

    display:
      none;

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      2px;

    margin:
      0;

    padding:
      18px 20px;

    background:
      #ffffff;

    border-bottom:
      1px solid
      var(--line);

    box-shadow:
      var(--shadow-md);
  }

  .site-nav.is-open {
    display:
      flex;
  }

  .site-nav a {
    padding:
      13px 10px;

    font-size:
      15px;
  }

}

@media (max-width: 480px) {

  .brand__logo {
    width:
      138px;
  }

}