.brand-lockup {
  display: flex;
  align-items: center;
  gap: .55em;
  color: var(--bg);
}

.brand-lockup-mark {
  width: 1.15rem;
  height: 1.15rem;
  object-fit: contain;
  flex: 0 0 auto;
}

.brand-lockup-text {
  display: block;
  color: var(--bg);
  white-space: nowrap;
}

.hero-header-wrapper {
  position: relative;
}

.hero-brandmark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(18vw, 210px);
  aspect-ratio: 1;
  transform: translate(-50%, -58%) rotate(-10deg);
  opacity: .18;
  z-index: 0;
  pointer-events: none;
}

.hero-brandmark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Reverted to template hero-img <img> rendering (background-image + opacity:0 hack removed). */

.hero .hero-header {
  position: relative;
}

.hero .hero-header.hero-header-1,
.hero .hero-header.hero-header-2 {
  z-index: 2;
}

.pin-spacer {
  max-width: 100% !important;
}

@media (max-width: 1000px) {
  .brand-lockup {
    gap: .45em;
  }

  .brand-lockup-mark {
    width: 1rem;
    height: 1rem;
  }

  .brand-lockup-text {
    font-size: .72rem;
  }

  .hero-brandmark {
    width: min(34vw, 128px);
    opacity: .2;
    transform: translate(-50%, -68%) rotate(-10deg);
  }

  .pin-spacer,
  .pin-spacer .featured-work,
  .services .service-card,
  .services .service-card-inner {
    width: 100% !important;
    max-width: 100% !important;
  }

  .services .service-card-inner {
    width: calc(100% - 4em) !important;
    max-width: calc(100% - 4em) !important;
  }
}

@media (max-width: 600px) {
  .hero .hero-footer {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: .45em;
  }

  .hero .hero-footer .hero-footer-scroll-down {
    position: static !important;
    left: auto !important;
    transform: none !important;
  }
}