.site-header{
  height:84px;
  border-bottom:1px solid var(--gold);
  background:var(--paper)
}
.header-inner{
  width:min(100%,var(--max));
  height:100%;
  margin:auto;
  padding:8px 20px;
  display:grid;
  grid-template-columns:150px 1fr auto auto;
  align-items:center;
  gap:24px
}
.logo img{
  width:142px;
  height:64px;
  object-fit:cover
}
.site-header nav{
  display:flex;
  gap:24px;
  align-items:center
}
.site-header nav a,.phone{
  font-size:15px;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap
}
.site-header nav a{
  position:relative;
  padding-block:10px
}
.site-header nav a::after{
  content:"";
  position:absolute;
  right:0;
  bottom:4px;
  left:0;
  height:2px;
  border-radius:2px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .35s cubic-bezier(.2,.8,.2,1)
}
.site-header nav a:hover::after,.site-header nav a:focus-visible::after{
  transform:scaleX(1);
  transform-origin:left
}
.phone{
  margin-left:auto
}
@media(max-width:800px){
  .site-header{
    height:auto
  }
  .header-inner{
    min-height:76px;
    grid-template-columns:120px 1fr auto;
    gap:12px
  }
  .logo img{
    width:115px
  }
  .site-header nav{
    display:none
  }
  .phone{
    font-size:11px
  }
  .site-header .button{
    padding-inline:14px;
    font-size:11px
  }
}
@media(max-width:520px){
  .header-inner{
    grid-template-columns:1fr auto
  }
  .phone{
    display:none
  }
}