/* ADI /testimonials-2/ page styles
   Added 2026-09-06. The page used to carry a single Trustpilot iframe, so none
   of the review text was in the HTML: a crawler or an LLM reading the page saw
   187 words and no rating at all. These rules style the scorecard and the review
   cards that replaced the feed.

   Everything here sets its own background and colour rather than inheriting from
   the section it sits in, because the old .reviews-section context is gone. */

.rv-section {
  position: relative;
  z-index: 5;
  padding-top: 64px;
  padding-bottom: 64px;
  background: #ffffff;
}
.rv-section-alt {
  background: #f4f8fb;
}
.rv-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}
.rv-h2 {
  margin: 0 0 12px;
  color: #161e6f;
  font-family: "Raleway", sans-serif;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  scroll-margin-top: 90px;
}
.rv-h2 .rv-accent {
  color: #2d99ca;
}
.rv-lede {
  max-width: 64em;
  margin: 0 0 30px;
  color: #333333;
  font-size: 16px;
  line-height: 1.8;
}

/* ---- scorecard ----------------------------------------------------------- */
.rv-scorecard {
  display: grid;
  /* three metrics, three columns, one even row */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 24px;
}
.rv-metric {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px 20px;
  background: #ffffff;
  border: 1px solid #dbe6ee;
  border-top: 4px solid #00b67a;
  border-radius: 12px;
  /* .rv-hero-record is text-align:left, so the cards centre their own contents */
  text-align: center;
}
.rv-metric dt {
  margin: 0 0 6px;
  color: #161e6f;
  font-family: "Raleway", sans-serif;
  font-size: 32px;
  font-weight: 900;
  line-height: 1.05;
}
.rv-metric dd {
  margin: 0;
  color: #46596d;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

/* ---- accordions ---------------------------------------------------------- */
.rv-group {
  margin: 0 0 12px;
  background: #ffffff;
  border: 1px solid #dbe6ee;
  border-radius: 12px;
  overflow: hidden;
}
.rv-group-h {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  scroll-margin-top: 90px;
}
.rv-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 18px 20px;
  border: 0;
  background: #ffffff;
  color: #161e6f;
  font-family: "Raleway", sans-serif;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
  text-align: start;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.rv-toggle:hover {
  background: #f4f8fb;
}
.rv-toggle:focus-visible {
  outline: 3px solid #2d99ca;
  outline-offset: -3px;
}
.rv-toggle-label {
  flex: 1 1 auto;
  min-width: 0;
}
.rv-count {
  flex: none;
  padding: 3px 11px;
  background: #eef3f8;
  border-radius: 999px;
  color: #46596d;
  font-size: 13px;
  font-weight: 700;
}
.rv-chev {
  flex: none;
  width: 16px;
  height: 16px;
  color: #2d99ca;
  transition: transform 0.2s ease;
}
.rv-toggle[aria-expanded="true"] .rv-chev {
  transform: rotate(180deg);
}
.rv-panel {
  padding: 4px 20px 22px;
  border-top: 1px solid #e6eef4;
}
.rv-panel[hidden] {
  display: none;
}

/* ---- review cards -------------------------------------------------------- */
.rv-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.rv-card {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: #ffffff;
  border: 1px solid #e2eaf1;
  border-radius: 12px;
}
.rv-stars {
  display: flex;
  gap: 3px;
  margin: 0 0 10px;
}
.rv-star {
  width: 19px;
  height: 19px;
  background: #00b67a;
  border-radius: 2px;
  color: #ffffff;
  padding: 2px;
  box-sizing: border-box;
}
.rv-title {
  margin: 0 0 8px;
  color: #161e6f;
  font-family: "Raleway", sans-serif;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
}
.rv-body {
  margin: 0 0 14px;
  color: #333333;
  font-size: 15px;
  line-height: 1.7;
}
.rv-meta {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #eef3f7;
  color: #5b6b7f;
  font-size: 13px;
  line-height: 1.7;
}
.rv-who {
  color: #161e6f;
  font-weight: 700;
}
.rv-meta a {
  color: #1a5c86;
  font-weight: 600;
  text-decoration: underline;
}
.rv-meta a:hover,
.rv-meta a:focus {
  color: #ff5b03;
}

/* the counties a regional group covers, linked to their own pages */
.rv-counties {
  margin: 16px 0 0;
  color: #46596d;
  font-size: 14px;
  line-height: 1.9;
}
.rv-counties a {
  color: #1a5c86;
  font-weight: 600;
}

@media (max-width: 768px) {
  .rv-section {
    padding-top: 46px;
    padding-bottom: 46px;
  }
  .rv-h2 {
    font-size: 24px;
  }
  .rv-metric dt {
    font-size: 27px;
  }
  .rv-scorecard {
    grid-template-columns: 1fr;
  }
  .rv-cards {
    grid-template-columns: 1fr;
  }
  .rv-toggle {
    font-size: 16px;
    padding: 16px;
  }
  .rv-panel {
    padding: 4px 16px 18px;
  }
}

@media (max-width: 480px) {
  .rv-h2 {
    font-size: 21px;
  }
  .rv-lede,
  .rv-body {
    font-size: 14px;
  }
  .rv-metric {
    padding: 18px 16px;
  }
  .rv-metric dt {
    font-size: 24px;
  }
  .rv-toggle {
    font-size: 15px;
    gap: 9px;
  }
}

/* ---- the Trustpilot figures and the jump chips, both in the hero ---------- */
/* .hero-content is centred and white and puts a text-shadow on its headings. The
   metric cards and the chips keep their white treatment, which reads well against
   the dark hero; the provenance line under them has to invert. */
.rv-hero-record {
  max-width: 1100px;
  margin: 26px auto 0;
  text-align: left;
}
.hero-content .rv-metric dt,
.hero-content .rv-metric dd,
.hero-content .rv-chip {
  text-shadow: none;
}
.hero-content .rv-chips {
  justify-content: center;
  margin: 22px 0 0;
}

/* ---- chips that jump to each leak type ----------------------------------- */
.rv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0 0 26px;
}
.rv-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: #ffffff;
  border: 1px solid #dbe2ea;
  border-radius: 999px;
  color: #161e6f;
  font-family: "Raleway", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.rv-chip:hover,
.rv-chip:focus {
  border-color: #2d99ca;
  background: #f2fcff;
  color: #161e6f;
}
.rv-chip:focus-visible {
  outline: 3px solid #2d99ca;
  outline-offset: 2px;
}
.rv-chip-n {
  padding: 2px 8px;
  background: #eef3f8;
  border-radius: 999px;
  color: #5b6b7f;
  font-size: 12px;
  font-weight: 600;
}

@media (max-width: 768px) {
  .rv-hero-record {
    margin-top: 18px;
  }
  .rv-chips {
    gap: 7px;
    margin-bottom: 20px;
  }
  .rv-chip {
    padding: 8px 12px;
    font-size: 13px;
  }
}