:root {
  --purple: #963cac;
  --purple-dark: #782b8f;
}

.footer-grid h3 {
  color: #d493e3;
}

@media (min-width: 821px) {
  .about-section .principles {
    position: sticky;
    top: 108px;
    align-self: start;
    z-index: 2;
  }

  .about-section .principles article {
    position: relative;
    transition: opacity .35s ease, transform .35s ease, background-color .35s ease,
      padding-left .35s ease, padding-right .35s ease;
  }

  .about-section .principles.is-scroll-active article {
    opacity: .42;
  }

  .about-section .principles.is-scroll-active article.is-active {
    padding-left: 16px;
    padding-right: 16px;
    background: rgba(150, 60, 172, .07);
    opacity: 1;
    transform: translateX(10px);
  }

  .content-section .two-col > aside.prose {
    position: sticky;
    top: 108px;
    align-self: start;
  }
}

@media (max-width: 820px) {
  .site-header {
    isolation: isolate;
  }

  body.menu-open .site-header {
    background: #082b3c;
    border-color: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  body.menu-open .brand img {
    filter: brightness(0) invert(1);
  }

  .nav-toggle {
    position: relative;
    z-index: 1001;
    display: grid;
    width: 48px;
    height: 48px;
    padding: 7px;
    place-content: center;
    border: 1px solid rgba(14, 60, 82, .28);
    border-radius: 0;
    background: #fff;
    opacity: 1;
  }

  body.menu-open .nav-toggle {
    border-color: rgba(255, 255, 255, .45);
    background: #082b3c;
  }

  body.menu-open .nav-toggle span:not(.sr-only) {
    background: #fff;
  }

  .primary-nav {
    position: fixed !important;
    z-index: 1000;
    top: 110px !important;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: calc(100dvh - 110px) !important;
    padding: 48px 28px;
    overflow-y: auto;
    background: #082b3c !important;
    color: #fff;
    opacity: 1 !important;
    visibility: hidden;
    pointer-events: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .site-header.scrolled .primary-nav {
    top: 72px !important;
    min-height: calc(100dvh - 72px) !important;
  }

  .primary-nav.open {
    visibility: visible;
    pointer-events: auto;
  }

  .primary-nav a {
    color: #fff;
  }

  .contact-steps {
    grid-template-columns: 1fr !important;
  }

  .about-section .principles {
    position: static;
  }

  .content-section .two-col > aside.prose {
    position: static;
  }
}

@media (max-width: 560px) {
  .site-header:not(.scrolled) .primary-nav {
    top: 107px !important;
    min-height: calc(100dvh - 107px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-section .principles article {
    transition: none;
  }
}