/* Full-width black section; media keeps the site's alignment and 3:1 aspect ratio. */
.energy-slot { background: #000; margin-block: 18px 52px; scroll-margin-top: 24px; }
/* Copy occupies its own row above the unchanged video frame. */
.energy-intro { max-width: 760px; padding-block: 50px 28px; }
.energy-intro > .eyebrow { display: block; color: #92949c; margin-bottom: 17px; }
.energy-intro h2 { font-size: clamp(32px,3.6vw,52px); font-weight: 500; line-height: 1.12; letter-spacing: -.048em; color: #08090b; margin-bottom: 16px; }
.energy-intro p { font-size: 16px; line-height: 1.7; color: #c4c5ca; margin: 0; }
.energy-loop {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 1;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  background: #000;
}
.energy-loop__video,
.energy-loop__poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.energy-loop__poster { z-index: 1; pointer-events: none; }
.energy-loop[data-ready="true"]:not([data-static="true"]) .energy-loop__poster { opacity: 0; }
@media (max-width: 700px) {
  .energy-slot { margin-top: 10px; margin-bottom: 34px; }
  .energy-intro { padding-block: 34px 22px; }.energy-intro > .eyebrow { font-size: 11px; letter-spacing: .6px; margin-bottom: 13px; }.energy-intro p { font-size: 15px; }
}