.d-batt {

  position: relative;

  margin: calc(var(--sec-pad) * 0.5) 0;

}

.d-batt .pin-card { position: static; }

.d-batt .pin-card > .wrap { width: 100%; }



.d-batt .band-grid {

  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);

  grid-template-areas: "intro intro" "card steps";

  column-gap: 60px; row-gap: 30px; align-items: start;

}

.d-batt .band-intro { grid-area: intro; }

.d-batt .card-live { grid-area: card; }

.d-batt .steps { grid-area: steps; }



.d-batt .band-intro h2 {

  font-size: clamp(30px, 3.6vw, 50px);

  color: var(--red110);

  max-width: 30ch;

  margin-top: var(--label-gap);

}

.d-batt .eyebrow { color: var(--warm-grey); }



.d-batt .steps-stack { margin-top: 0; }

.d-batt .rung {

  display: grid; grid-template-columns: 3.4rem 1fr; gap: 20px;

  padding: 18px 0; border-top: 1px solid var(--stone-mid);

  opacity: 1;

}

.d-batt .rung:last-child { border-bottom: 1px solid var(--stone-mid); }

.d-batt .num {

  font-family: var(--font-display); font-weight: 500; font-size: 15px;

  letter-spacing: .06em; line-height: 1.4; color: var(--flare-ink);

}

.d-batt .step h3 {

  font-family: var(--font-display); font-weight: 500;

  font-size: clamp(19px, 1.5vw, 22px); letter-spacing: -.025em; line-height: 1.05;

  color: var(--red110); margin: 0;

}

.d-batt .step p {

  margin: 8px 0 0; max-width: 38ch;

  font-size: 15px; line-height: 1.5; color: var(--ink-soft);

}



.d-batt .visual {

  position: relative; overflow: hidden;

  border-radius: 18px; aspect-ratio: 1880 / 1080;

  background: var(--stonelight); border: 1px solid var(--stone-mid);

}

.d-batt .visual .poster,

.d-batt .visual .clip,

.d-batt .visual .still { position: absolute; inset: 0; }

.d-batt .visual .poster img,

.d-batt .visual .clip {

  width: 100%; height: 100%; object-fit: cover; display: block;

}



.d-batt .visual .poster { opacity: 1; transition: opacity .45s linear; z-index: 1; }

.d-batt .visual .clip { opacity: 0; transition: opacity .45s linear; z-index: 1; }

.d-batt .visual.ready .poster { opacity: 0; }

.d-batt .visual.ready .clip { opacity: 1; }



.d-batt .visual .still {

  display: none; z-index: 2;

  background: url("/assets/img/battery/clay-evening.jpg") center / cover no-repeat;

  background-image: image-set(

    url("/assets/img/battery/clay-evening.webp") type("image/webp"),

    url("/assets/img/battery/clay-evening.jpg") type("image/jpeg"));

}



.d-batt .visual-tag {

  position: absolute; left: 14px; bottom: 12px; z-index: 3;

  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;

  color: var(--paper); background: rgba(78,37,27,.72);

  padding: 6px 11px; border-radius: 999px;

}

.d-batt .card-live { position: relative; }



@media (prefers-reduced-motion: reduce) {

  .d-batt .visual .clip { display: none; }

  .d-batt .visual .poster { display: none; }

  .d-batt .visual .still { display: block; }

}



.d-batt .band-intro h2 br.lb-m { display: none; }

@media (max-width: 460px) {

  .d-batt .band-intro h2 br.lb-m { display: inline; }

}



@media (max-width: 900px) {

  .d-batt .band-grid {

    grid-template-columns: 1fr;

    grid-template-areas: "intro" "card" "steps";

    column-gap: 0; row-gap: 32px;

  }

}