/* Identity refinements: crisp vector icon and a bolder wordmark. */
.brand img {
  width: 154px;
  height: auto;
  object-fit: contain;
  filter: none;
}

.brand span { color: #f1eee8; }

.spider-hero img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 1;
  filter: drop-shadow(0 0 1.3px #f1eee8) drop-shadow(0 12px 18px rgba(0, 0, 0, 0.45));
}

.hero > *:not(.hero-web) { z-index: 1; }

.hero-web {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms ease;
}

.hero:hover .hero-web { opacity: 1; }

.hero-web canvas { width: 100%; height: 100%; display: block; }

/* Keep the closing-panel spider light on the red field instead of flattening it to black. */
.statement-mark img {
  filter: none;
  mix-blend-mode: normal;
}

.interactive-section { position: relative; isolation: isolate; }
.interactive-section > *:not(.section-web) { position: relative; z-index: 1; }
.section-web { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.section-web canvas { width: 100%; height: 100%; display: block; }

.interactive-section .statement-mark {
  position: absolute;
  right: 14%;
  top: 27%;
  width: 180px;
}

@media (max-width: 700px) {
  .interactive-section .statement-mark { width: 120px; right: 5%; top: 49%; }
}

@media (max-width: 700px) {
  .brand img { width: 122px; height: auto; }
}