.bh { position: relative; z-index: 2; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; background: var(--yvo-black); color: var(--yvo-goldenrod); }
.bh-images { position: absolute; inset: 0; }
.bh-w { position: absolute; overflow: hidden; will-change: transform; background: var(--yvo-black); }
.bh-w img, .bh-grad { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.bh-w1 { left: 0; top: 0; width: 100%; height: 66.7%; }
.bh-w1 img { object-position: 60% 30%; }
.bh-w3 { left: 0; top: 50%; width: 44.2%; height: 33.4%; z-index: 1; }
.bh-w2 { left: 0; top: 66.7%; width: 60%; height: 33.3%; z-index: 2; }
.bh-w2 img { object-position: 50% 45%; }
.bh-w4 { left: 44.2%; top: 66.7%; width: 55.8%; height: 33.3%; z-index: 3; }

.bh-duo img { filter: grayscale(1) contrast(1.55) brightness(.82); }
.bh-duo::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply;
  background: linear-gradient(120deg, #00403a 0%, #00574c 35%, #5fae1f 75%, #9ada21 100%); }
.bh-duo::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(90% 90% at 70% 40%, transparent 40%, rgba(0, 0, 0, .55) 100%); }

.bh-grad { display: block; inset: -20%; width: 140%; height: 140%; }
.bh-grad::after { content: ""; position: absolute; inset: 0; opacity: .22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.bh-grad.g1 { background:
  radial-gradient(60% 90% at 18% 30%, #d4e77e 0%, rgba(154, 218, 33, .85) 22%, rgba(0, 87, 76, .6) 55%, transparent 80%),
  radial-gradient(70% 120% at 90% 80%, #00574c 0%, #002a24 55%, #000 100%), #000;
  animation: bh-drift 14s var(--e-sine) infinite alternate; }
.bh-grad.g2 { background:
  radial-gradient(55% 110% at 88% 20%, rgba(212, 231, 126, .9) 0%, rgba(154, 218, 33, .7) 25%, rgba(0, 87, 76, .55) 55%, transparent 80%),
  radial-gradient(80% 120% at 10% 90%, #004d43 0%, #001f1b 60%, #000 100%), #000;
  animation: bh-drift 18s var(--e-sine) infinite alternate-reverse; }
@keyframes bh-drift { from { background-position: 0 0, 0 0; translate: -3% -2%; } to { translate: 3% 2%; } }

.bh-shade { position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, transparent 22%, transparent 70%, rgba(0, 0, 0, .35) 100%); }

.bh-content { position: relative; z-index: 5; height: 100%; }
.bh-title { position: absolute; left: 8.33vw; right: 8.33vw; top: 32.8%; margin: 0;
  font-size: clamp(56px, 10vw, 172px); line-height: .9; letter-spacing: -.03em; font-weight: 500; text-transform: uppercase; }
.bh-mask { display: block; overflow: hidden; padding-bottom: .04em; }
.bh-l { display: block; white-space: nowrap; will-change: transform; }
.bh-l1 { color: var(--yvo-goldenrod); }
.bh-l2 { color: var(--yvo-goldenrod); text-indent: 20vw; }
.bh-l2 b { font-weight: inherit; color: var(--yvo-yellow-green); }
.bh-bottom { position: absolute; left: 8.33vw; right: 8.33vw; bottom: 32px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.bh-sub { max-width: 31ch; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.25; font-weight: 500; color: var(--yvo-goldenrod); }
.bh-scroll { display: flex; align-items: center; gap: 14px; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--yvo-key-lime); }
.bh-arrow { position: relative; width: 18px; height: 22px; }
.bh-arrow i { position: absolute; width: 2px; height: 2px; background: var(--yvo-yellow-green); animation: bh-dot 1.6s var(--e-sine) infinite; }
.bh-arrow i:nth-child(n+5) { animation-delay: .15s; }
.bh-arrow i:nth-child(n+7) { animation-delay: .3s; }
@keyframes bh-dot { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

.bh-fade { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .4) 0%, #000 70%); }

@media (max-width: 760px) {
  .bh-w1 { height: 58%; }
  .bh-w3 { top: 44%; width: 62%; height: 22%; }
  .bh-w2 { top: 58%; width: 72%; height: 42%; }
  .bh-w4 { left: 72%; top: 58%; width: 28%; height: 42%; }
  .bh-title { left: 20px; right: 20px; top: 30%; font-size: 14vw; }
  .bh-l2 { text-indent: 5vw; }
  .bh-bottom { left: 20px; right: 20px; bottom: 24px; }
  .bh-sub { font-size: 15px; max-width: 22ch; }
  .bh-scroll span:first-child { display: none; }
}

html.rm .bh-grad { animation: none; }