.conva-about-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 700px;
  height: min(940px, 100svh);
  color: #f0f4ee;
  background: #101514;
}
.about-atmosphere {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: #101514;
  background-image:
    radial-gradient(ellipse 65% 65% at 30% 65%, #1db71114, transparent 75%),
    radial-gradient(ellipse 65% 70% at 75% 35%, #7cd4730d, transparent 75%),
    linear-gradient(150deg, #080c0b, #101514 60%, #131d17);
}
/* Static fine film grain, independent of the moving colour field. */
.about-atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
  pointer-events: none;
}

.about-hero-location {
  position: absolute;
  top: 150px;
  left: 8%;
  margin: 0;
  font: 500 .75rem/1.4 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #d4e4d5;
}
.about-display {
  position: absolute;
  top: 76%;
  left: 8%;
  right: 8%;
  display: flex;
  justify-content: center;
  gap: .22em;
  margin: 0;
  transform: translateY(-50%);
  font: 300 clamp(4rem, 10.5vw, 11rem)/1.1 var(--font-display);
  letter-spacing: -.04em;
  white-space: nowrap;
  color: #e6ece7;
}
.about-logo-stage {
  position: absolute;
  top: 42%;
  left: 50%;
  width: min(64vw, 780px);
  height: min(58svh, 590px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.about-logo-stage canvas { position: relative; display: block; width: 100%; height: 100%; }
.about-logo-fallback {
  position: absolute;
  width: 52%;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) perspective(800px) rotateX(12deg) rotateY(-22deg) rotateZ(-9deg);
  filter: drop-shadow(12px 16px 0 #071109) drop-shadow(0 24px 24px #040b0740);
}
.about-logo-stage[data-ready] .about-logo-fallback { visibility: hidden; }
.about-hero-caption {
  position: absolute;
  bottom: 48px;
  left: 8%;
  right: 8%;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  font: 400 1rem/1.5 var(--font-body);
  color: #e6ece7;
}
.about-hero-caption a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 28px; min-height: 44px; border-bottom: 1px solid #e6ece760; }
.about-hero-caption a:hover { border-color: currentColor; }
.conva-about-hero :focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
#About { scroll-margin-top: 110px; }
@media (max-width: 700px) {
  .conva-about-hero { min-height: 660px; height: 94svh; max-height: 860px; }
  .about-hero-location { top: 118px; left: 6%; }
  .about-display { top: 190px; left: 6%; right: 6%; justify-content: center; font-size: clamp(2.8rem, 12vw, 5rem); }
  .about-logo-stage { top: 53%; width: 100%; height: 410px; }
  .about-logo-fallback { width: 62%; }
  .about-hero-caption { bottom: 28px; left: 6%; right: 6%; flex-direction: column; align-items: start; gap: 12px; font-size: .875rem; }
}