.hero-art {
  background: transparent;
}

.hero-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  position: relative;
  z-index: 0;
  transform-origin: center top;
}

.hero-art::after {
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--ink) 0%, rgba(17, 22, 17, .55) 13%, transparent 34%, transparent 78%, rgba(17, 22, 17, .38) 94%, var(--ink) 100%),
    linear-gradient(0deg, var(--ink) 0%, transparent 24%);
}

.hero-art p {
  z-index: 2;
}

@media (min-width: 901px) {
  .hero {
    padding-right: 0;
    grid-template-columns: minmax(0, 1fr) minmax(520px, 1.1fr);
  }

  .hero-art {
    margin-top: -72px;
    height: calc(100% + 72px);
  }

  .stingray {
    height: clamp(420px, 52svh, 520px);
    min-height: 0;
  }

  .stingray .project-copy h2 {
    font-size: clamp(3.5rem, 5.8vw, 6.6rem);
  }
}

.hero h1 {
  letter-spacing: -.075em;
}

.hero h1 em {
  letter-spacing: -.055em;
}

.hero-role {
  font-size: clamp(15px, 1.15vw, 19px);
  line-height: 1.45;
}

.hero-stats {
  width: 100vw;
  margin-left: calc(-1 * clamp(24px, 7vw, 130px));
}

.hero-stats b {
  font-size: clamp(18px, 1.35vw, 24px);
}

@media (min-width: 901px) {
  .hero-stats article,
  .hero-stats article + article {
    padding: 22px 28px;
  }
}

.manifesto p,
.project-copy h2,
.toolkit h2,
.contact h2,
.portrait-copy h2 {
  letter-spacing: -.065em;
}

.portrait-break {
  grid-template-columns: .8fr 1.2fr;
  background: var(--lime);
}

.portrait-copy {
  max-width: 780px;
}

.portrait-break .eyebrow {
  color: var(--ink);
}

.portrait-break-art {
  width: 100%;
  height: min(76svh, 850px);
  justify-self: end;
  align-self: center;
  object-fit: cover;
  object-position: center;
  background: #000;
  mix-blend-mode: normal;
  -webkit-mask-image: none;
  mask-image: none;
  clip-path: inset(0 14% 0 14%);
}

.toolkit .eyebrow,
.contact > .eyebrow {
  color: var(--green);
}

.site-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

.site-nav nav {
  justify-self: center;
}

.nav-cta {
  justify-self: end;
}

button[data-modal] {
  padding: 13px 18px;
  font-size: 12px;
}

.mindbridge-visual {
  background: #fff;
}

.mindbridge-visual img {
  object-fit: contain;
  object-position: center;
  padding: clamp(32px, 7vw, 120px);
  transform: none;
  animation: none;
}

@media (max-width: 900px) {
  .site-nav {
    grid-template-columns: 1fr auto;
  }

  .hero {
    padding-right: 24px;
    grid-template-columns: 1fr;
  }

  .hero-stats {
    width: auto;
    margin-left: 0;
  }

  .hero-art {
    margin-inline: -24px;
    background: var(--ink);
    isolation: isolate;
  }

  .hero-art img {
    width: 100%;
    object-fit: contain;
    object-position: center bottom;
    transform: scale(1.12);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  }

  .hero-art::after {
    background:
      linear-gradient(90deg, var(--ink) 0%, rgba(17, 22, 17, .35) 14%, transparent 32%, transparent 76%, rgba(17, 22, 17, .42) 92%, var(--ink) 100%),
      linear-gradient(0deg, var(--ink) 0%, transparent 17%),
      linear-gradient(180deg, var(--ink) 0%, transparent 14%);
  }

  .feature-project .project-visual {
    order: -1;
  }

  .portrait-break {
    grid-template-columns: 1fr;
  }

  .portrait-break-art {
    width: 100%;
    max-width: 780px;
    height: min(62svh, 650px);
    margin-inline: 0;
    justify-self: center;
    object-position: center;
    clip-path: inset(0 14% 0 14%);
  }
}

@media (min-width: 600px) and (max-width: 900px) {
  .portrait-break {
    grid-template-columns: .8fr 1.2fr;
  }

  .portrait-break-art {
    height: min(64svh, 700px);
    justify-self: end;
    align-self: center;
  }
}

@media (max-width: 520px) {
  .hero {
    padding-right: 18px;
  }

  .hero-art {
    margin-inline: -18px;
  }

  .portrait-break-art {
    width: 100%;
    margin-inline: 0;
  }
}