:root{
  --header-height: 70px;
  --header-bg: rgba(255,255,255,0);
  --header-bg-solid: #ffffff;
  --text-light: #ffffff;
  --text-dark: #01131f;
  --shadow: 0 2px 12px rgba(0,0,0,.08);
}

.site-header{ position:fixed; top:0; left:0; right:0; height:var(--header-height); z-index:1000; transition: background-color .25s ease, box-shadow .25s ease; }
.site-header__inner{ height:var(--header-height); display:flex; align-items:center; justify-content:space-between; padding:0 20px; border-bottom:0 solid transparent; }

.site-logo{ display:inline-flex; align-items:center; }
.site-logo__img{ height:42px; width:auto; display:block; transition:filter .25s ease, opacity .25s ease; }
.header--solid .site-logo__img{ filter: drop-shadow(0 1px 1px rgba(0,0,0,.15)); }

.nav-toggle{ display:none; background:none; border:0; width:44px; height:44px; position:relative; }
.nav-toggle__bar{ position:absolute; left:10px; right:10px; height:2px; background:currentColor; transition:transform .2s; }
.nav-toggle__bar:nth-child(1){ top:14px; }
.nav-toggle__bar:nth-child(2){ top:21px; }
.nav-toggle__bar:nth-child(3){ top:28px; }

.primary-nav{ display:flex; }
.primary-nav__list{ list-style:none; margin:0; padding:0; display:flex; gap:10px; }
.primary-nav__item{ list-style:none; display:inline-block; }
.primary-nav__link{ text-decoration:none; font-weight:600; background-color:#ffffff; color:#000000; padding:10px 15px; display:inline-block; width:125px; text-align:center; border:0; }
.primary-nav__link:hover{ background-color:#f0f0f0; color:#000000; }

/* Transparent variant over hero */
.header--transparent{ background-color:var(--header-bg); color:var(--text-light); }
.header--transparent .primary-nav__link{ color:#000000; background-color:#ffffff; }

/* Solid variant after scroll */
.header--solid{ background-color:var(--header-bg-solid); color:var(--text-dark); box-shadow:var(--shadow); }
.header--solid .primary-nav__link{ color:#000000; background-color:#ffffff; }

/* Mobile */
@media (max-width: 991px){
  .nav-toggle{ display:inline-block; color:inherit; }
  .primary-nav{ position:fixed; inset:var(--header-height) 0 0 0; background:var(--header-bg-solid); transform:translateY(-100%); transition:transform .25s ease; }
  .primary-nav[aria-expanded="true"]{ transform:translateY(0); }
  .primary-nav__list{ flex-direction:column; padding:20px; gap:10px; }
}