.yes-battery-services {
  --yes-bs-bg-light: #ffffff;
  --yes-bs-bg-soft: #f3f7f7;
  --yes-bs-hero-light:
    radial-gradient(circle at 82% 24%, rgba(73, 197, 177, 0.2), transparent 24%),
    linear-gradient(135deg, #fcfdfd 0%, #f4f8f8 46%, #e6f3ef 100%);
  --yes-bs-dark: #0d0f10;
  --yes-bs-dark-soft: #121617;
  --yes-bs-dark-surface: #171c1d;
  --yes-bs-dark-line: rgba(255, 255, 255, 0.12);
  --yes-bs-dark-text: #f3f7f7;
  --yes-bs-dark-muted: rgba(243, 247, 247, 0.74);
}

.yes-battery-services .yes-page-system {
  color: var(--yes-system-ink);
}

.yes-battery-services :where(#overview, #core-services, #damage-repair, #network, #coverage, #service-lines) {
  scroll-margin-top: 124px;
}

.yes-battery-services .yes-hero {
  background: var(--yes-bs-hero-light);
}

.yes-battery-services #overview {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 249, 250, 0.98) 100%);
}

.yes-battery-services #overview .yes-split {
  align-items: start;
}

.yes-battery-services #overview .yes-lede {
  max-width: 70ch;
}

.yes-battery-services #overview .yes-chip {
  margin: 6px 8px 0 0;
  background: rgba(73, 197, 177, 0.08);
}

.yes-battery-services .yes-anchor-nav {
  transition: background-color 180ms ease, border-color 180ms ease;
}

.yes-battery-services .yes-anchor-nav a,
.yes-battery-services .yes-chip,
.yes-battery-services #service-lines .yes-card a {
  transition:
    border-color 180ms ease,
    color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.yes-battery-services #core-services .yes-bento {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(220px, auto);
}

.yes-battery-services #core-services .yes-bento-card--large {
  grid-row: span 1;
}

.yes-battery-services .yes-card,
.yes-battery-services .yes-bento-card,
.yes-battery-services .yes-metric {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 249, 250, 0.98) 100%);
}

.yes-battery-services .yes-card h3 a {
  color: inherit;
  text-decoration: none;
}

.yes-battery-services .yes-card h3 a:hover,
.yes-battery-services .yes-card h3 a:focus-visible {
  color: var(--yes-system-teal);
}

.yes-battery-services .yes-hero__media,
.yes-battery-services .yes-media-frame {
  background: rgba(255, 255, 255, 0.82);
}

.yes-battery-services #coverage .yes-card {
  padding: clamp(14px, 2vw, 22px);
  background: rgba(255, 255, 255, 0.05);
}

.yes-battery-services #coverage .yes-card:hover {
  transform: none;
  box-shadow: none;
}

.yes-battery-services #coverage .wp-block-shortcode {
  margin: 0;
}

html.dark .yes-battery-services .yes-page-system {
  --yes-system-ink: var(--yes-bs-dark-text);
  --yes-system-graphite: var(--yes-bs-dark-text);
  --yes-system-muted: var(--yes-bs-dark-muted);
  --yes-system-line: var(--yes-bs-dark-line);
  --yes-system-panel: var(--yes-bs-dark-surface);
  --yes-system-wash: var(--yes-bs-dark-soft);
  color: var(--yes-bs-dark-text);
}

html.dark .yes-battery-services .yes-hero {
  background:
    radial-gradient(circle at 82% 18%, rgba(73, 197, 177, 0.18), transparent 26%),
    linear-gradient(135deg, #0d0f10 0%, #121617 42%, #17302d 100%);
}

html.dark .yes-battery-services #overview {
  background:
    radial-gradient(circle at 12% 22%, rgba(73, 197, 177, 0.08), transparent 20%),
    linear-gradient(180deg, #0f1213 0%, #121617 100%);
}

html.dark .yes-battery-services .yes-hero h1,
html.dark .yes-battery-services .yes-card h3,
html.dark .yes-battery-services .yes-bento-card h3,
html.dark .yes-battery-services .yes-metric strong {
  color: var(--yes-bs-dark-text);
}

html.dark .yes-battery-services .yes-hero__media,
html.dark .yes-battery-services .yes-media-frame {
  background: rgba(14, 18, 19, 0.88);
  box-shadow: 14px 14px 0 rgba(73, 197, 177, 0.2);
}

html.dark .yes-battery-services .yes-card,
html.dark .yes-battery-services .yes-bento-card,
html.dark .yes-battery-services .yes-metric {
  background:
    linear-gradient(180deg, rgba(20, 24, 25, 0.96) 0%, rgba(16, 19, 20, 0.96) 100%);
  border-color: rgba(255, 255, 255, 0.12);
}

html.dark .yes-battery-services .yes-metric span,
html.dark .yes-battery-services .yes-card p,
html.dark .yes-battery-services .yes-bento-card p,
html.dark .yes-battery-services .yes-lede {
  color: var(--yes-bs-dark-muted);
}

html.dark .yes-battery-services .yes-anchor-nav {
  background: rgba(13, 15, 16, 0.9);
  border-color: rgba(255, 255, 255, 0.08);
}

html.dark .yes-battery-services .yes-anchor-nav a,
html.dark .yes-battery-services .yes-chip {
  color: rgba(243, 247, 247, 0.92);
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
}

html.dark .yes-battery-services .yes-anchor-nav a:hover,
html.dark .yes-battery-services .yes-anchor-nav a:focus-visible,
html.dark .yes-battery-services .yes-chip:hover,
html.dark .yes-battery-services .yes-chip:focus-visible {
  color: #0d0f10;
  background: var(--yes-system-teal);
  border-color: var(--yes-system-teal);
  box-shadow: 5px 5px 0 rgba(73, 197, 177, 0.32);
}

html.dark .yes-battery-services #coverage .yes-card {
  background: rgba(255, 255, 255, 0.04);
}

html.dark .yes-battery-services #service-lines .yes-card a {
  color: var(--yes-bs-dark-text);
}

@media (max-width: 1180px) {
  .yes-battery-services #core-services .yes-bento {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
}

@media (max-width: 720px) {
  .yes-battery-services :where(#overview, #core-services, #damage-repair, #network, #coverage, #service-lines) {
    scroll-margin-top: 96px;
  }
}
