html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/dm-sans-latin.woff2") format("woff2");
}

*:focus-visible {
  outline: 3px solid #29d5ff;
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  transform: translateY(-160%);
  border-radius: 999px;
  background: #082f43;
  padding: 0.75rem 1rem;
  color: white;
  font-size: 0.875rem;
  font-weight: 700;
  transition: transform .2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.hero-image {
  background-image: linear-gradient(90deg, rgba(7, 27, 36, .89) 0%, rgba(9, 46, 61, .78) 48%, rgba(7, 27, 36, .18) 100%), url("../images/rooftop-solar-hero-alt.jpg");
}

.grain {
  background-image: radial-gradient(rgba(255,255,255,.13) .7px, transparent .7px);
  background-size: 7px 7px;
}

.solar-pattern {
  background-image: linear-gradient(rgba(13,126,165,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(13,126,165,.035) 1px, transparent 1px);
  background-size: 34px 34px;
}

.stat-number {
  display: inline-block;
  min-width: 1ch;
}

.bill-slider {
  appearance: none;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    #0b6387 0,
    #0b6387 var(--range-progress, 4.5%),
    #dbe7eb var(--range-progress, 4.5%),
    #dbe7eb 100%
  );
  outline: none;
}

.bill-slider::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 3px solid white;
  border-radius: 50%;
  background: #0b6387;
  box-shadow: 0 0 0 1px #0b6387, 0 2px 8px rgba(8, 47, 67, .2);
  cursor: grab;
}

.bill-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 3px solid white;
  border-radius: 50%;
  background: #0b6387;
  box-shadow: 0 0 0 1px #0b6387, 0 2px 8px rgba(8, 47, 67, .2);
  cursor: grab;
}

.bill-slider:focus-visible {
  box-shadow: 0 0 0 4px rgba(41, 213, 255, .3);
}

.cta-animated {
  position: relative;
  transform: translateY(0);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.cta-animated:hover {
  transform: translateY(-2px);
  filter: saturate(1.1);
  box-shadow: 0 12px 28px rgba(8, 47, 67, .22);
}

.cta-animated > span {
  display: inline-block;
  transition: transform .2s ease;
}

.cta-animated:hover > span {
  transform: translate(3px, -2px);
}

#testimonial-track {
  touch-action: pan-y;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}