/* RASPAD palette sampled from the supplied PSD foreground layers. */
:root {
  --brand-accent: #d9a21b;
  --brand-glow: #d9a21b66;
  --brand-ink: #141411;
  --brand-paper: #e6e1d3;
}

.header {
  border-bottom: 1px solid #d9a21b30;
}

.header__container > a,
.footer__top > a {
  flex-shrink: 0;
}

.footer .logo {
  width: 180px;
  height: 52px;
}

.hero__slide-inner {
  overflow: hidden;
}

.hero__slide-content {
  gap: 24px;
  margin-bottom: 120px;
}

.hero__brand {
  width: min(440px, 100%);
  height: auto;
}

.hero__slide-title {
  font-size: clamp(34px, 3.4vw, 52px);
  line-height: 1.12;
}

/* Crop the old corner signature out of the original full-screen artwork. */
.hero__slide-bg,
.notfound__bg {
  transform: scale(1.10);
}

.howto__section {
  background-image: linear-gradient(to top, #030305 0%, transparent 9%), url('/static/img/5.png');
}

.button,
.howto__number,
.vacancies__number {
  color: var(--brand-ink);
  font-weight: 700;
}

.button:hover,
.button--header,
.button--header:hover {
  color: var(--brand-paper);
}

.button--header:hover {
  color: var(--brand-ink);
}

#scrollToTop {
  color: var(--brand-ink);
}

.nav__link:hover,
.header__dropdown-link:hover,
.footer__link:hover {
  color: var(--brand-accent);
}

:is(a, button, input, textarea):focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 4px;
}

.footer__top {
  padding: 20px 0;
  border-color: #d9a21b30;
}

.footer__copy {
  color: #9a978e;
}

.notfound__brand {
  width: min(340px, 80vw);
  height: auto;
  margin: 0 auto 16px;
}

.notfound__button:hover {
  color: var(--brand-ink);
}

@media (max-width: 1024px) {
  .header .logo {
    width: 154px;
    height: 44px;
  }

  .header__nav--wrapper {
    top: 61px;
    height: calc(100dvh - 61px);
    overflow-y: auto;
  }

  .hero__slide-content {
    margin-bottom: 64px;
    gap: 20px;
  }

  .hero__brand {
    width: min(340px, 88%);
  }

  .hero__slide-title {
    font-size: clamp(30px, 6vw, 38px);
  }

  .footer .logo {
    width: 154px;
    height: 44px;
  }

  .benefits__logo {
    right: 0;
  }

  .footer__socials {
    gap: 8px;
  }

  .footer__social-link {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 360px) {
  .footer__top {
    flex-wrap: wrap;
    gap: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .benefits__logo,
  .loader-logo,
  .online__counter-dot {
    animation: none;
  }
}