.header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--pad);transition:.5s var(--ease);
}
.header::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:rgba(12,19,17,.78);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);transition:opacity .5s var(--ease)}
.header.scrolled::before{opacity:1}
.header.scrolled{padding-block:14px}
.header__logo img{height:26px;width:auto}
.nav{display:flex;align-items:center;gap:2.4rem}
.nav a{
  font-family:var(--t-display);font-weight:400;font-size:.92rem;letter-spacing:.01em;
  color:var(--gray);position:relative;padding:.2em 0;transition:color .3s;
}
.nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--paper);transition:width .4s var(--ease)}
.nav a:hover{color:var(--paper)}
.nav a:hover::after{width:100%}
.nav a.is-current{color:var(--paper)}
.nav a.is-current::after{width:100%;background:var(--gray)}
.header__cta{display:flex;align-items:center;gap:1.4rem}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.burger span{width:24px;height:1.5px;background:var(--paper);transition:.35s var(--ease)}
@media(max-width:820px){
  .nav{position:fixed;inset:0 0 0 auto;width:min(78vw,360px);
    background:radial-gradient(120% 90% at 100% 0%,#1c2b27 0%,var(--green) 45%,var(--green-deep) 100%);
    flex-direction:column;align-items:flex-start;justify-content:center;padding:0 40px;gap:1.6rem;
    transform:translateX(100%);transition:transform .5s var(--ease);border-left:1px solid var(--line);z-index:99}
  .nav.open{transform:none}
  .nav a{font-size:1.4rem}
  .burger{display:flex;z-index:101}
  .header__cta .btn{display:none}
}