.brand-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  width: 100%;
  transition: 0.3s;
}
.brand-header.scrolled {
  background-color: rgba(35, 40, 50, 0.5);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}
.brand-header__logo {
  display: block;
  width: 25vw;
  min-width: 10rem;
  max-width: 16rem;
}
.brand-header__wrapper {
  display: flex;
  place-content: space-between;
  align-items: center;
  width: 100%;
  padding: clamp(1.25rem, 1.077rem + 0.769vw, 2rem);
}
.brand-header__button {
  position: relative;
  z-index: 1;
  width: clamp(3rem, 2.538rem + 2.051vw, 5rem);
  height: clamp(0.8rem, 0.696rem + 0.462vw, 1.25rem);
}
.brand-header__button span {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 2px;
  background-color: #ffffff;
  transition: 0.3s;
}
.brand-header__button span:first-of-type {
  top: 0;
}
.brand-header__button span:last-of-type {
  bottom: 0;
}
.active .brand-header__button span:first-of-type {
  top: 50%;
  transform: translateY(-50%) rotate(30deg);
}
.active .brand-header__button span:last-of-type {
  bottom: 50%;
  transform: translateY(50%) rotate(-30deg);
}
.brand-header__navigation {
  position: fixed;
  top: 0;
  right: 0;
  z-index: -1;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
  max-width: 40rem;
  height: 100vh;
  padding: 6rem clamp(3rem, 2.769rem + 1.026vw, 4rem) 2rem;
  background-color: rgba(35, 40, 50, 0.95);
  transition: transform 0.3s ease-in-out;
  transform: translateX(100%);
}
.active .brand-header__navigation {
  transform: translateX(0);
}
.brand-header__navigation-list {
  display: flex;
  flex-direction: column;
  gap: 1.5vh;
}
.brand-header__navigation-list a {
  font-size: clamp(1rem, 0.954rem + 0.205vw, 1.2rem);
  line-height: 1.5;
  color: #ffffff;
}
.brand-header__to-cta {
  display: flex;
  gap: 0.5rem;
  place-content: center;
  place-items: center;
  width: 100%;
  padding: 1rem;
  font-size: 1.5em;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  background-color: #ed6735;
}
.brand-header__to-cta:hover {
  color: #ffffff;
  text-decoration: none;
}
.brand-header__to-cta::before {
  display: block;
  width: 2.5em;
  height: 2.5em;
  background-repeat: no-repeat;
  background-size: cover;
  width: 2.1em;
  content: "";
  background-image: url('data:image/svg+xml;utf8,<svg width="32" height="32" viewBox="0 0 20 20" fill="%23ffffff" xmlns="http://www.w3.org/2000/svg"><g><path d="M2.997 3.496a.5.5 0 0 1 .5-.5h.438c.727 0 1.145.473 1.387.945c.165.323.284.717.383 1.059H16a1 1 0 0 1 .962 1.272l-1.496 5.275A2 2 0 0 1 13.542 13H8.463a2 2 0 0 1-1.93-1.473l-.642-2.355l-.01-.032l-1.03-3.498l-.1-.337c-.1-.346-.188-.652-.32-.909c-.159-.31-.305-.4-.496-.4h-.438a.5.5 0 0 1-.5-.5M6.845 8.87l.653 2.396a1 1 0 0 0 .965.736h5.08a1 1 0 0 0 .961-.727L16 6H6zM10 15.499a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0m-1 0a.5.5 0 1 0-1 0a.5.5 0 0 0 1 0m6 0a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0m-1 0a.5.5 0 1 0-1 0a.5.5 0 0 0 1 0"/></g></svg>');
  background-position: center;
}/*# sourceMappingURL=brand.css.map */