:root {
  --hdr-bg: rgba(0, 0, 0, .55);
  --overlay: rgba(0, 0, 0, .6);
}

/* Header */
.legal-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  background: transparent;
  transition: background .25s, box-shadow .25s;
}

.legal-header.solid {
  background: var(--black);
  box-shadow: 0 8px 24px #00000020;
}

.legal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 15px;
}

.legal-brand img {
  display: block
}

.legal-nav {
  display: flex;
  gap: 10px;
  align-items: center
}

.legal-link {
  color: var(--primary-light);
  padding: 10px 12px;
  transition: opacity .2s
}

.legal-link:hover {
  color: #fff;
  opacity: .95
}

/* Burger (spans) */
.burger {
  display: none;
  width: 40px;
  height: 40px;
  position: relative;
  border: none;
  background: transparent;
  cursor: pointer
}

.burger span {
  position: absolute;
  left: 8px;
  right: 8px;
  height: 2px;
  background: var(--primary-light);
  transition: transform .3s, opacity .2s, top .3s
}

.burger span:nth-child(1) {
  top: 12px
}

.burger span:nth-child(2) {
  top: 19px
}

.burger span:nth-child(3) {
  top: 26px
}

.burger.active span:nth-child(1) {
  top: 19px;
  transform: rotate(45deg)
}

.burger.active span:nth-child(2) {
  opacity: 0
}

.burger.active span:nth-child(3) {
  top: 19px;
  transform: rotate(-45deg)
}

/* Mobile nav panel */
.mnav {
  position: fixed;
  inset: 0 auto 0 0;
  width: 320px;
  max-width: 86%;
  background: var(--black);
  color: #fff;
  transform: translateX(-112%);
  opacity: 0;
  transition: transform .26s cubic-bezier(.2, .8, .2, 1), opacity .26s ease;
  z-index: 1001;
  display: flex;
  flex-direction: column
}

.mnav[aria-hidden="false"] {
  transform: translateX(0);
  opacity: 1
}

.mnav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #ffffff30
}

.mnav-close {
  position: relative;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  cursor: pointer
}

.mnav-close span {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 17px;
  height: 2px;
  background: #fff
}

.mnav-close span:first-child {
  transform: rotate(45deg)
}

.mnav-close span:last-child {
  transform: rotate(-45deg)
}

.mnav-links {
  display: flex;
  flex-direction: column;
  padding: 10px
}

.mnav-link {
  color: #fff;
  padding: 12px 8px;
  border-bottom: 1px solid #ffffff20
}

.mnav-link:hover {
  color: var(--primary-light)
}

.mnav-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  z-index: 1000
}

/* Hero */
.legal-hero {
  position: relative;
  padding-top: 150px;
  padding-bottom: 80px;
  background: var(--black);
  overflow: hidden
}

.legal-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(55%);
  z-index: -1
}

.legal-hero-inner {
  color: var(--primary-light);
  text-align: center
}

.legal-hero .pill {
  display: inline-block;
  border: 1px solid var(--primary-light);
  color: var(--primary-light);
  border-radius: 999px;
  padding: 6px 12px;
  margin-bottom: 8px
}

.legal-hero h1 {
  color: var(--primary-light);
  margin: 6px 0 10px
}

.legal-hero .lead {
  color: #fff;
  opacity: .9
}

/* Content */
.legal-wrap {
  max-width: 960px
}

.legal-doc {
  background: #fff;
  border: 1px solid var(--dark-gray-50);
  padding: 24px
}

.legal-doc h2 {
  margin-top: 20px
}

.legal-bullets {
  padding-left: 18px
}

.legal-bullets li {
  margin: 6px 0
}

.legal-ol {
  padding-left: 18px
}

.contact-box {
  background: var(--light-gray);
  border: 1px solid var(--dark-gray-50);
  padding: 16px
}

.contact-box .ico {
  font-family: "Fa solid 900", sans-serif;
  margin-right: 8px
}

/* Buttons row on Thanks */
.btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 16px
}

/* Header visibility */
@media (max-width: 991px) {
  .legal-nav {
    display: none
  }

  .burger {
    display: block
  }
}