/* Reviews page (13 Oct 2026). Loaded by /reviews/ only; markup in src/pages/reviews.mjs.
   The customers' words are the biggest thing on the page, set in Red Hat Display; everything we say is small and
   plain. The sun ring from the logo marks each step of the journey.
   Rebranded 15 Oct 2026 to match the home page (James: "now same with the reviews page", after the prices page):
   - the hero is bright (daylight sky fading to white), with the ratings in a white card ringed in the sun gradient and
     the faded sun arc rising behind it, as on the prices page;
   - every customer is named with their initial in the sun ring, as on the home page's review cards;
   - the shorter quotes and the full reviews are review cards: white (pale blue on white), a soft shadow, the stars and
     the site along the top, a faint coral quote mark in the corner;
   - the topic buttons light up in the button orange; "Show all" is a white pill;
   - Jai's £0.00p sits on pale blue with the sun arc in its corner (it was cream, a colour the home page doesn't use). */

.page-reviews { --rv-shadow: 0 1px 2px rgba(38, 40, 42, .06), 0 14px 30px -20px rgba(38, 40, 42, .35); }

/* ---------- Hero: a customer's words as the headline ---------- */
.rv-hero { position: relative; overflow: hidden; padding: clamp(24px, 3.4vw, 44px) 0 clamp(40px, 5vw, 64px);
  background: linear-gradient(180deg, var(--sky) 0%, #f5f8fa 52%, var(--paper) 100%); }
.rv-hero-grid { display: grid; gap: 40px; }
@media (min-width: 980px) {
  .rv-hero-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(48px, 6vw, 96px); align-items: center; }
}
.rv-hero h1 { display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 1; }
.rv-hero h1 .kicker { font: 500 1.125rem/1.4 var(--text); color: var(--ink-soft); }
.rv-hero .rv-hero-quote {
  display: block;
  font-size: clamp(2.125rem, 1.35rem + 2.9vw, 3.75rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.024em;
  max-width: 15em;
  text-wrap: balance;
}
/* Opening quotation marks hang outside the text, so the words line up with the rest of the page. */
.rv-open { margin-left: -0.42em; }
.rv-hero-quote .rv-open,
.rv-lead .rv-open,
.rv-support .rv-open { display: inline-block; width: 0.42em; }
.rv-hero-quote .rv-open { color: var(--sun-coral); }
.rv-hero .page-lede { max-width: 36rem; }

/* Who said it: their initial in the sun ring, then the name, the stars or site, and the month. */
.rv-initial { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font: 600 .9375rem/1 var(--text); color: var(--ink);
  border: 2px solid transparent; background: linear-gradient(var(--paper), var(--paper)) padding-box, linear-gradient(225deg, var(--sun-coral), var(--sun-amber)) border-box; }
.rv-hero-cite, .rv-who, .rv-by { display: flex; align-items: center; gap: 12px; }
.rv-hero-cite > span:last-child, .rv-who > span:last-child, .rv-by > span:last-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.rv-hero-cite { margin-top: 22px; font-size: 1.0625rem; color: var(--ink-soft); position: relative; z-index: 1; }
.rv-hero-cite .rv-initial { width: 40px; height: 40px; font-size: 1.0625rem; }
.rv-hero-cite strong, .rv-who strong, .rv-by strong { font-weight: 600; color: var(--ink); }
.rv-stars { color: var(--star); letter-spacing: 2px; }

/* The ratings, in a white card ringed in the sun gradient, the faded sun arc rising behind it. Google's links to the
   reviews where they were written; Trustpilot's is plain (no links to Trustpilot since 14 Oct 2026, James). */
.rv-hero-card { position: relative; }
.rv-hero-card::before { content: ""; position: absolute; z-index: 0; width: 520px; height: 520px; right: -220px; top: -190px;
  background: url("sun-arc.svg") center / contain no-repeat; pointer-events: none; }
.rv-ratings { position: relative; z-index: 1; padding: 6px 28px 20px; border-radius: 22px; border: 3px solid transparent;
  background: linear-gradient(var(--paper), var(--paper)) padding-box, linear-gradient(135deg, var(--sun-coral), var(--sun-amber)) border-box;
  box-shadow: 0 1px 2px rgba(38, 40, 42, .06), 0 34px 64px -38px rgba(38, 40, 42, .55); }
.rv-rating {
  display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: center;
  padding: 22px 0; text-decoration: none; color: var(--ink);
}
.rv-rating + .rv-rating { border-top: 1px solid var(--line); }
.rv-rating-score { grid-row: 1 / span 3; font: 500 3.75rem/1 var(--display); letter-spacing: -0.04em; }
.rv-rating-stars { color: var(--star); font-size: 1.125rem; letter-spacing: 2px; line-height: 1.2; }
.rv-rating-count { display: inline-flex; align-items: center; gap: 6px; font-size: 1rem; line-height: 1.35; }
.rv-rating-count .g-logo { margin: 0; }
.rv-rating-go { font-size: 1rem; font-weight: 600; line-height: 1.35; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.rv-rating:hover .rv-rating-go { text-decoration-color: var(--sun-coral); }
.rv-asof { padding-top: 14px; border-top: 1px solid var(--line); font-size: .9375rem; color: var(--ink-soft); }
@media (max-width: 979px) {
  .rv-hero-card { max-width: 26rem; }
  .rv-hero-card::before { width: 360px; height: 360px; right: -160px; top: -140px; }
}
@media (max-width: 700px) {
  .rv-hero-card::before { width: 300px; height: 300px; right: -200px; top: -40px; }
}

/* ---------- Step by step: what customers wrote about each step ---------- */
/* Straight after the hero, whose foot is already white: less space above it than a normal section. */
.rv-hero + .section { padding-top: clamp(32px, 4vw, 64px); }
.rv-steps { list-style: none; margin: 0; padding: 0; }
.rv-step {
  --node: 76px;
  position: relative;
  display: grid; grid-template-columns: var(--node) minmax(0, 1fr); column-gap: clamp(20px, 3.5vw, 48px);
  padding-bottom: clamp(64px, 8vw, 104px);
}
.rv-step:last-child { padding-bottom: 0; }
/* The line from one step to the next: the sun's colours, from coral to amber. */
.rv-step::before {
  content: ""; position: absolute; left: calc(var(--node) / 2 - 1.5px); top: calc(var(--node) + 10px); bottom: 10px;
  width: 3px; border-radius: 2px; background: linear-gradient(var(--sun-coral), var(--sun-amber)); opacity: .5;
}
.rv-step:last-child::before { display: none; }
.rv-node {
  width: var(--node); height: var(--node); border-radius: 50%; padding: 5px;
  background: linear-gradient(225deg, var(--sun-coral), var(--sun-amber));
  box-shadow: 0 10px 22px -14px rgba(38, 40, 42, .5);
}
.rv-node > span, .rv-node img {
  display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--paper); background: var(--paper);
}
.rv-step-head { padding-top: 6px; }
.rv-step-head h3 { font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }
.rv-step-head p { margin-top: 8px; color: var(--ink-soft); max-width: 38rem; }

/* The step's main quote: large, then who said it. */
.rv-lead { margin: 30px 0 0; }
.rv-lead blockquote { margin: 0; }
.rv-lead p {
  font: 400 clamp(1.375rem, 1.05rem + 1.15vw, 2.0625rem)/1.3 var(--display);
  letter-spacing: -0.012em; color: var(--ink); max-width: 30em;
}
.rv-lead .rv-open { color: var(--sun-coral); }
.rv-who { margin-top: 16px; font-size: .9375rem; line-height: 1.4; color: var(--ink-soft); }

/* The shorter quotes: small review cards, pale blue on the white section. */
.rv-supports { display: grid; gap: 16px; margin-top: 36px; }
@media (min-width: 720px) { .rv-supports { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; } }
.rv-support { position: relative; margin: 0; display: flex; flex-direction: column; padding: 20px 22px 16px; border-radius: 16px; background: var(--sky); overflow: hidden; }
.rv-support::before { content: ""; position: absolute; top: 14px; right: 16px; width: 34px; height: 34px; opacity: .22; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ec7a4a' transform='rotate(180 12 12)' d='M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z'/%3E%3C/svg%3E") center / contain no-repeat; }
.rv-support blockquote { margin: 0; flex: 1; }
.rv-support p { position: relative; padding-right: 26px; font-size: 1.0625rem; line-height: 1.55; color: var(--ink); }
.rv-support .rv-who { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--sky-deep); }
.rv-support .rv-initial { width: 30px; height: 30px; font-size: .875rem; }

/* Afterwards: Jai's smart meter, the day the system went in. Pale blue, the sun arc rising in the far corner. */
.rv-meter {
  margin: 30px 0 0; padding: clamp(24px, 3.5vw, 40px);
  border-radius: 20px; background: var(--sky) url("sun-arc.svg") no-repeat left -130px bottom -170px / 280px 280px;
  display: grid; gap: 18px 40px; align-items: center;
}
@media (min-width: 860px) { .rv-meter { grid-template-columns: auto minmax(0, 1fr); } }
.rv-meter-figure {
  font: 400 clamp(4rem, 2.6rem + 5vw, 7.25rem)/.9 var(--display);
  letter-spacing: -0.045em; color: var(--ink); white-space: nowrap;
}
.rv-meter .rv-lead { margin: 0; }
.rv-meter .rv-lead p { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.625rem); }
.rv-meter + .rv-supports { margin-top: 18px; }

/* "Get My Free Solar Quote" after the steps, as on the home page. */
.rv-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: clamp(56px, 7vw, 88px);
  padding-top: clamp(32px, 4vw, 44px); border-top: 1px solid var(--line); }
.rv-cta p { color: var(--ink-soft); }
.rv-cta a:not(.btn) { color: var(--ink); font-weight: 600; }

/* Phones: the ring sits beside the step's heading and the quotes use the full width, so there's no line between
   steps. Two of the three shorter quotes per step (the third is in the full reviews below). */
@media (max-width: 639px) {
  .rv-step { --node: 52px; column-gap: 16px; align-items: center; }
  .rv-step::before { display: none; }
  .rv-step-body { display: contents; }
  .rv-node { padding: 4px; align-self: start; }
  .rv-node > span, .rv-node img { border-width: 2px; }
  .rv-step-head { padding-top: 0; }
  .rv-lead, .rv-meter, .rv-supports { grid-column: 1 / -1; }
  .rv-lead { margin-top: 24px; }
  .rv-meter { margin-top: 24px; }
  .rv-supports { margin-top: 24px; gap: 12px; }
  .rv-support:nth-child(n+3) { display: none; }
}

/* ---------- Every review in full ---------- */
.rv-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; }
html:not(.js) .rv-filter, html:not(.js) .rv-status { display: none; }
.rv-filter-label { width: 100%; margin-bottom: 2px; font-weight: 600; }
.rv-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  font: 500 1rem/1 var(--text); color: var(--ink); background: var(--paper);
  border: 1.5px solid transparent; border-radius: 999px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(38, 40, 42, .08), 0 6px 14px -10px rgba(38, 40, 42, .35);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.rv-chip span { font-weight: 400; color: var(--ink-soft); }
.rv-chip:hover { border-color: var(--sun-solid); }
/* The topic shown: the button orange, as the current step on the quote form's tabs. */
.rv-chip[aria-pressed="true"] { background: var(--sun-solid); border-color: var(--sun-solid); color: var(--ink); font-weight: 600; }
.rv-chip[aria-pressed="true"] span { color: var(--ink); }
@media (max-width: 639px) {
  .rv-filter { gap: 8px 6px; }
  .rv-chip { min-height: 42px; padding: 0 13px; font-size: .9375rem; gap: 6px; }
}
.rv-status { min-height: 1.6em; margin: 16px 0 26px; font-size: 1rem; color: var(--ink-soft); }
html:not(.js) .rv-wall { margin-top: 8px; }

.rv-wall { list-style: none; margin: 0; padding: 0; columns: 3 300px; column-gap: 22px; }
.rv-card { display: inline-block; width: 100%; margin: 0 0 22px; break-inside: avoid; vertical-align: top; }
.rv-card[hidden] { display: none; }
.rv-card > article { position: relative; background: var(--paper); border-radius: 18px; padding: 22px 24px 18px; box-shadow: var(--rv-shadow); overflow: hidden; }
/* The faint coral quote mark, as on the home page's review cards. */
.rv-card > article::before { content: ""; position: absolute; top: 16px; right: 18px; width: 40px; height: 40px; opacity: .2; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ec7a4a' transform='rotate(180 12 12)' d='M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z'/%3E%3C/svg%3E") center / contain no-repeat; }
.rv-card--photo > article::before { display: none; }
.rv-card > article:focus { outline: none; }
.rv-card > article:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.rv-card--photo > article { padding-top: 0; }
.rv-photo { margin: 0 -24px 18px; }
.rv-photo-img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.rv-photo figcaption { padding: 12px 24px 0; font-size: .9375rem; font-weight: 600; line-height: 1.35; color: var(--ink); }
.rv-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding-right: 44px; font-size: .875rem; line-height: 1.3; color: var(--ink-soft); }
.rv-top .rv-stars { font-size: 1rem; }
.rv-src { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--ink); }
.rv-src .g-logo { margin: 0 2px 0 0; }
.rv-title { margin-top: 12px; font: 600 1.125rem/1.3 var(--display); color: var(--ink); overflow-wrap: anywhere; }
.rv-text { margin-top: 10px; font-size: 1.0625rem; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }
.rv-text p + p { margin-top: .75em; }
/* Long reviews show eight lines until "Read the whole review". */
.rv-text.is-clamped {
  max-height: calc(1.6em * 8); overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 3.2em), transparent);
  mask-image: linear-gradient(#000 calc(100% - 3.2em), transparent);
}
.rv-expand {
  margin-top: 6px; padding: 6px 0; background: none; border: 0; cursor: pointer;
  font: 600 1rem/1.4 var(--text); color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.rv-expand:hover { text-decoration-color: var(--sun-coral); }
.rv-by { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .9375rem; line-height: 1.4; color: var(--ink-soft); }

.rv-more-wrap { text-align: center; margin-top: 10px; }
.rv-more {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 30px;
  font: 600 1.0625rem/1 var(--text); color: var(--ink); background: var(--paper);
  border: 1.5px solid transparent; border-radius: 999px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(38, 40, 42, .08), 0 10px 22px -14px rgba(38, 40, 42, .4);
  transition: border-color .15s ease;
}
.rv-more:hover { border-color: var(--sun-solid); }
.rv-more[hidden] { display: none; }
.rv-elsewhere { margin: 36px auto 0; max-width: 40rem; text-align: center; font-size: 1rem; color: var(--ink-soft); }
.rv-elsewhere a { color: var(--ink); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .rv-chip, .rv-more { transition: none; }
}