.topbar {
  position: sticky;
  top: 0;
  height: 72px;
  padding: 16px 5.5vw;
  background: #122b22;
  backdrop-filter: none;
  transition: opacity .22s linear, padding .4s, background .4s;
}

.topbar.scrolled {
  position: sticky;
  padding-top: 12px;
  padding-bottom: 12px;
  background: #122b22;
}

.hero {
  height: min(920px, calc(100svh - 72px));
  min-height: 520px;
}

.hero-content { top: 7%; }
.hero-side { top: 28%; }

.hero-art {
  background: #10271f;
}

.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  animation: photo-arrive 1.5s cubic-bezier(.2,.7,.2,1) both, photo-drift 32s 1.5s ease-in-out infinite alternate;
}

.hero-art::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(10, 30, 26, .84) 0%, rgba(10, 30, 26, .58) 38%, rgba(10, 30, 26, .08) 85%), linear-gradient(0deg, rgba(10, 30, 26, .66) 0%, transparent 38%);
}

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

@keyframes photo-arrive {
  from { opacity: .4; transform: scale(1.08); }
  to { opacity: 1; transform: scale(1.015); }
}

@keyframes photo-drift {
  from { transform: scale(1.015) translate3d(0, 0, 0); }
  to { transform: scale(1.08) translate3d(-1%, -1%, 0); }
}

@media (max-width: 700px) {
  .topbar { height: 66px; padding: 14px 6%; }
  .topbar.scrolled { padding-top: 11px; padding-bottom: 11px; }
  .hero { height: min(920px, calc(100svh - 66px)); min-height: 560px; }
  .hero-content { top: 10%; }
  .hero-photo { object-position: 58% center; }
  .hero-art::after { background: linear-gradient(90deg, rgba(10, 30, 26, .76), rgba(10, 30, 26, .24)), linear-gradient(0deg, rgba(10, 30, 26, .7), transparent 48%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-photo { animation: none; }
}