/* Shared light header shadow, used by the public site and portfolio landers. */
:root { --header-shadow: 0 8px 22px rgba(18, 24, 21, 0.11); }

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/PlusJakartaSans-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/PlusJakartaSans-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
/* Shared live Terrestrial logo. */
.brand {
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  display: inline-flex;
  align-items: center;
  gap: 17.16px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.brand-mark {
  width: 51px;
  height: 51px;
  flex: 0 0 51px;
  display: grid;
  grid-template-columns: repeat(3, 13px);
  grid-template-rows: 13px 32px;
  gap: 6px;
}

.brand-mark span {
  background: var(--green);
}

.brand-mark .top {
  grid-column: 1 / 4;
}

.brand-mark .stem {
  display: grid;
  grid-template-rows: 13px 13px;
  align-content: space-between;
  background: transparent;
}

.brand-mark .stem::before,
.brand-mark .stem::after {
  content: "";
  display: block;
  background: var(--green);
}

.brand-mark .left,
.brand-mark .right {
  opacity: 0.68;
}

.brand-name {
  width: max-content;
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.brand-name strong {
  font-size: 1.399rem;
  font-weight: 700;
}

.brand-name small {
  width: 100%;
  margin-top: 6.6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--gray-700);
  font-size: 0.898rem;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.brand-name small span {
  display: block;
}

@media (max-width: 720px) {
  .brand {
    gap: 16.69px;
  }

  .brand-mark {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    grid-template-columns: repeat(3, 12px);
    grid-template-rows: 12px 30px;
    gap: 6px;
  }

  .brand-mark .stem {
    grid-template-rows: 12px 12px;
  }

  .brand-name strong {
    font-size: 1.361rem;
  }

  .brand-name small {
    margin-top: 3.85px;
    font-size: 0.745rem;
  }

}