:root {
  --color-background: #202a43;
  --color-main-background: #e8eaea;
  --color-logo-background: #bdc4c2;
  --color-primary: #2d3750;
  --color-primary-light: #596580;
  --color-heating: #53af3b;
  --color-plumbing-spa: #00aabc;
  --color-cooling: #1d79a7;
  --color-geothermal: #2b8a4c;
  --font-family: 'Inter', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-size: 22px;
  --limit-width: 1200px;
  --focus-color: var(--color-cooling);
  --selection-background-color: var(--color-primary);
  --selection-color: var(--color-white);
}
html {
  /* todo: is this fouc fix okay? */
  opacity: 0;
  will-change: opacity;
  transition: opacity 0.25s var(--transition-curve);
}
/* todo: is this fouc fix okay? */
html.loaded,
html.no-js {
  opacity: 1;
  background-color: var(--color-background);
}
body {
  font-optical-sizing: auto;
}
@font-face {
  font-family: 'Inter';
  src: url('../font/inter.ttf') format('truetype-variations');
  font-weight: 100 900;
}
@keyframes hero-background {
  0%, 100% {
    background-size: 100% 100%;
  }
  50% {
    background-size: 100% 150%;
  }
}
@keyframes header-list-scroll {
  0%, 10%, 100% {
    transform: translateY(0);
  }
  90%, 99% {
    transform: translateY(-50%);
  }
}
h1:not(:first-child):not([data-link-to]),
h2:not(:first-child):not([data-link-to]),
h3:not(:first-child):not([data-link-to]),
h4:not(:first-child):not([data-link-to]),
h5:not(:first-child):not([data-link-to]),
h6:not(:first-child):not([data-link-to]) {
  margin-top: calc(1.5 * var(--font-size)) !important;
}
.no-js body {
  padding: 16px;
}
.no-js h1,
.no-js h2,
.no-js h3,
.no-js h4,
.no-js h5,
.no-js h6,
.no-js p,
.no-js img {
  margin-top: 8px;
  margin-top: 8px;
}
.no-js img {
  width: 300px;
}
.rating-stars {
  transition: transform 0.2s var(--transition-curve);
  display: flex;
  align-items: center;
  margin-bottom: 32px;
  width: 280px;
}
.rating-star {
  cursor: pointer;
  padding-left: 4px;
  padding-right: 4px;
}
.rating-star svg {
  transition: fill 0.2s var(--transition-curve), transform 0.2s var(--transition-curve);
  fill: var(--color-gray-80);
}
.rating-pulse .rating-stars {
  transform: scale(1.05);
}
.rating[data-rating="1"] .rating-star:nth-child(-n+1) svg,
.rating[data-rating="2"] .rating-star:nth-child(-n+2) svg,
.rating[data-rating="3"] .rating-star:nth-child(-n+3) svg,
.rating[data-rating="4"] .rating-star:nth-child(-n+4) svg,
.rating[data-rating="5"] .rating-star:nth-child(-n+5) svg {
  fill: var(--color-cooling);
  transform: scale(1.2);
}
.rating[data-rating-preview] .rating-star svg {
  fill: var(--color-gray-80) !important;
  transform: none !important;
}
.rating[data-rating-preview="1"] .rating-star:nth-child(-n+1) svg,
.rating[data-rating-preview="2"] .rating-star:nth-child(-n+2) svg,
.rating[data-rating-preview="3"] .rating-star:nth-child(-n+3) svg,
.rating[data-rating-preview="4"] .rating-star:nth-child(-n+4) svg,
.rating[data-rating-preview="5"] .rating-star:nth-child(-n+5) svg {
  fill: var(--color-cooling) !important;
  transform: scale(1.2) !important;
}