/* ==========================================================================
   review-compact.css  --  MOCK-UP ONLY. Standalone; touches no bundle.

   The brief, Danny 2026-09-22: the panels are huge, they don't read as a
   carousel, and they carry information nobody needs. So:

     * one fixed card height, set here and nowhere else       --rvc-h
     * text auto-truncated to a line count, never by hand     --rvc-lines
     * three cards visible at once, with the fourth peeking
     * no date, no reply, no service chip
     * real avatar where the platform has one, initial disc where it doesn't

   Every size below hangs off the two custom properties at the top, so the
   whole strip can be made bigger or smaller by changing one number.
   ========================================================================== */

/* Palette on :root, NOT on .rvc -- the page scaffolding (.rvc-sec--dark) sits
   outside .rvc, and a var scoped to .rvc resolves to nothing out there, which
   silently paints the section transparent rather than erroring. */
:root {
  --rvc-navy: rgb(0, 16, 33);
  --rvc-ink: #202c38;
  --rvc-muted: #70757a;    /* Google's own secondary grey */
  --rvc-line: #e3e8ec;
  --rvc-gold: #fbbc04;     /* Google's star gold */
  --rvc-blue: #1a73e8;     /* Google's link blue */
  --rvc-off: #dadce0;
}

/* Sizing lives on the component, so one strip can differ from another.

   The card height is NOT a number you pick -- it is derived from the parts, so
   it cannot drift out of step with them. (This site sets a 20px root font, so
   a hand-guessed pixel height was 13px short and sliced the last line.) */
.rvc {
  --rvc-lines: 4;          /* body lines before truncation. THE number. */
  --rvc-fs: .72rem;        /* ~14.4px at this site's 20px root */
  --rvc-lh: 1.55;
  --rvc-av: 40px;          /* avatar, and therefore the header row */
  --rvc-per-view: 3;       /* cards fully visible */
  --rvc-peek: 34px;        /* how much of the next card shows */
  --rvc-gap: 16px;

  --rvc-body: calc(var(--rvc-lines) * var(--rvc-lh) * var(--rvc-fs));
  --rvc-h: calc(var(--rvc-av) + 10px + var(--rvc-body) + 30px + 32px);
}

/* tighter variant: four across, three lines */
.rvc--micro {
  --rvc-lines: 3;
  --rvc-per-view: 4;
  --rvc-peek: 28px;
}

/* ------------------------------------------------------------------- the rail */

.rvc__rail {
  display: grid;
  grid-auto-flow: column;
  /* (track - peek - gaps) / per-view  =  one card */
  grid-auto-columns: calc((100% - var(--rvc-peek) - (var(--rvc-per-view) - 1) * var(--rvc-gap)) / var(--rvc-per-view));
  gap: var(--rvc-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 2px 16px;
  margin: -4px -2px 0;
  scrollbar-width: none;
}

.rvc__rail::-webkit-scrollbar { display: none; }

/* ------------------------------------------------------------------- the card */

/* Height is NOT set here. Every card holds the same shape -- header, exactly
   --rvc-lines of text, button -- so they are already identical, and the grid
   stretches any odd one out to match its row. Forcing a pixel height on top of
   that is what sliced the last line: the number has to agree with the parts,
   and sooner or later it stops agreeing. --rvc-h is a floor, nothing more. */
.rvc__card {
  scroll-snap-align: start;
  min-height: var(--rvc-h);
  background: #fff;
  color: var(--rvc-ink);
  border: 1px solid var(--rvc-line);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(60, 64, 67, .12);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.rvc__head {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  column-gap: 11px;
  margin-bottom: 10px;
}

/* --- avatar: real photo, or the initial disc Google draws when there isn't one */
.rvc__av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: #e8eaed;
}

.rvc__av--letter {
  display: grid;
  place-items: center;
  font-family: Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 400;
  color: #fff;
  line-height: 1;
  user-select: none;
}

/* Google's own palette for letter avatars */
.rvc__av--c0 { background: #1a73e8; }
.rvc__av--c1 { background: #d93025; }
.rvc__av--c2 { background: #188038; }
.rvc__av--c3 { background: #e37400; }
.rvc__av--c4 { background: #9334e6; }
.rvc__av--c5 { background: #007b83; }

.rvc__name {
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--rvc-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rvc__stars { display: flex; gap: 1px; margin-top: 3px; }
.rvc__stars svg { width: 14px; height: 14px; display: block; }
.rvc__on { fill: var(--rvc-gold); }
.rvc__off { fill: var(--rvc-off); }

/* the platform mark, top right, exactly as a real widget does it */
.rvc__mark { width: 20px; height: 20px; display: block; opacity: .95; align-self: start; }

/* ------------------------------------------------------------------- the body */

.rvc__text {
  margin: 0;
  font-size: var(--rvc-fs);
  line-height: var(--rvc-lh);
  color: #3c4043;
  display: -webkit-box;
  -webkit-line-clamp: var(--rvc-lines);
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Reserve exactly N lines. Without this the flex column shrinks the box
     below its clamp and the last line gets sliced through the middle. */
  flex: 0 0 auto;
  height: var(--rvc-body);
  /* Auto margins on a flex item absorb the free space either side, so a
     two-line review sits centred in the card instead of leaving ~90px of
     dead air beneath it. A review long enough to be truncated has no free
     space, so this does nothing to it. */
  margin-top: auto;
  margin-bottom: auto;
}

.rvc__more {
  margin: 6px 0 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: .82rem;
  color: var(--rvc-blue);
  cursor: pointer;
  align-self: flex-start;
}

.rvc__more:hover { text-decoration: underline; }

/* expanded state lives in an overlay so the row never changes height */
.rvc__card--open { overflow: visible; }

/* ------------------------------------------------------- read-more, as a dialog */

.rvc-modal {
  border: 0;
  border-radius: 10px;
  padding: 0;
  max-width: 560px;
  width: calc(100% - 32px);
  box-shadow: 0 12px 40px rgba(0, 16, 33, .32);
}

.rvc-modal::backdrop { background: rgba(0, 16, 33, .55); }
.rvc-modal__in { padding: 24px 26px 22px; }
.rvc-modal__in .rvc__head { margin-bottom: 14px; }

.rvc-modal__text {
  margin: 0;
  font-size: .95rem;
  line-height: 1.62;
  color: #3c4043;
  max-height: 52vh;
  overflow-y: auto;
}

.rvc-modal__foot {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--rvc-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.rvc-modal__foot a { font-size: .85rem; text-decoration: none; }
.rvc-modal__foot a:hover { text-decoration: underline; }

/* The dialog is emitted INSIDE the review strip's coloured band, so
   `.section-blue-02 a:link` -- two classes and a pseudo-class -- was beating the
   plain `.rvc-modal__foot a` above and painting this link #8dd3e8, or #c6eaf4 on
   hover, on a WHITE panel. "Read it on Google" was very nearly invisible.
   The #id lifts the specificity above any section rule, and every pseudo-class
   the band styles has to be answered or the dark-band colour comes back on that
   state alone. showModal() puts the dialog in the top layer but does not detach
   it from the cascade.

   Not --rvc-blue (#1a73e8, Google's own): measured at 4.51:1 on white, which
   clears AA by a hundredth and is thin for a .85rem link. #0c5bbd is 6.47:1. */
#rvc-modal .rvc-modal__foot a,
#rvc-modal .rvc-modal__foot a:link,
#rvc-modal .rvc-modal__foot a:visited,
#rvc-modal .rvc-modal__foot a:active { color: #0c5bbd; }
#rvc-modal .rvc-modal__foot a:hover,
#rvc-modal .rvc-modal__foot a:focus { color: #083f85; text-decoration: underline; }

.rvc-modal__close {
  font: inherit;
  font-size: .86rem;
  font-weight: 600;
  border: 1px solid var(--rvc-line);
  background: #fff;
  border-radius: 6px;
  padding: 8px 18px;
  cursor: pointer;
}

.rvc-modal__close:hover { background: #f5f7f9; }

/* ---------------------------------------------------------------- the controls */

.rvc__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.rvc__arrows { display: flex; gap: 8px; }

.rvc__arrows button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, opacity .15s ease;
}

.rvc__arrows button:hover:not(:disabled) { background: #ff8c00; border-color: #ff8c00; }
.rvc__arrows button:disabled { opacity: .3; cursor: default; }

.rvc__dots { display: flex; justify-content: center; gap: 7px; margin-top: 4px; }

.rvc__dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .38);
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}

.rvc__dots button[aria-current="true"] { background: #ff8c00; transform: scale(1.3); }

/* past the dot cap: a counter, not a row of unreadable dots */
.rvc__dots--counter { font-size: .78rem; letter-spacing: .04em; opacity: .75; margin-top: 8px; }
.rvc-sec--light .rvc__dots--counter { color: var(--rvc-muted); opacity: 1; }

/* -------------------------------------------- mock-up control (not shipped) */

.rvc-tune { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 20px; }
.rvc-tune__lbl { font-size: .78rem; opacity: .75; margin-right: 4px; }

.rvc-tune button {
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, .42);
  background: transparent;
  color: #fff;
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.rvc-tune button:hover { border-color: #ff8c00; }
.rvc-tune button[aria-pressed="true"] { background: #ff8c00; border-color: #ff8c00; color: var(--rvc-navy); }
.rvc-sec--light .rvc-tune button { border-color: #c2d4e0; color: var(--rvc-ink); }
.rvc-sec--light .rvc-tune button[aria-pressed="true"] { background: var(--rvc-navy); border-color: var(--rvc-navy); color: #fff; }

/* ---------------------------------------------- the summary badge (compact) */

.rvc-badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--rvc-line);
  border-radius: 8px;
  padding: 10px 18px;
  color: var(--rvc-ink);
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(60, 64, 67, .12);
}

.rvc-badge:hover { box-shadow: 0 2px 8px rgba(60, 64, 67, .24); }
.rvc-badge__score { font-size: 1.8rem; font-weight: 700; line-height: 1; color: var(--rvc-ink); }
.rvc-badge__stars { display: flex; gap: 1px; }
.rvc-badge__stars svg { width: 16px; height: 16px; fill: var(--rvc-gold); display: block; }
.rvc-badge__meta { font-size: .75rem; color: var(--rvc-muted); margin-top: 3px; display: block; white-space: nowrap; }
.rvc-badge img { width: 22px; height: 22px; }

/* on a dark section the white chip is right; on a light one, invert it */
.rvc-sec--light .rvc-badge { background: var(--rvc-navy); border-color: transparent; color: #fff; }
.rvc-sec--light .rvc-badge__score { color: #fff; }
.rvc-sec--light .rvc-badge__meta { color: rgba(255, 255, 255, .8); }

/* ------------------------------------------------------------------ scaffolding */

.rvc-page { padding-top: 134px; }

.rvc-sec { background: #054e74; color: #fff; }
.rvc-sec--light { background: #eef3f7; color: var(--rvc-ink); }
.rvc-sec--dark { background: var(--rvc-navy); color: #fff; }

/* Mock-up only. The live page gets its two bands from CreateSections, which the
   mock-up does not run -- so without this the strip would sit in the panel's
   band with no divider at all, now that the hairline is gone. Same blue-02 and
   the same 40/46 the real strip band uses, so the reference still shows what
   ships. @blue-02 in _variables.less; hard-coded because this file is plain CSS. */
.rvc-sec--panel { background: #033a58; color: #fff; }                  /* @blue-03 */
.rvc-sec--panel .rvc-wrap { padding-bottom: 40px; }
.rvc-sec--strip { background: #02304a; color: #fff; padding-top: 40px; padding-bottom: 46px; }
.rvc-sec--strip .rvc-wrap { padding-top: 0; padding-bottom: 0; }

.rvc-wrap { max-width: 1180px; margin: 0 auto; padding: 48px 20px; }
.rvc-wrap--narrow { max-width: 900px; }

.rvc-eyebrow {
  font-family: Lato, sans-serif;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
  font-weight: 700;
  color: #ff8c00;
  margin: 0 0 8px;
}

.rvc-sec--light .rvc-eyebrow { color: #0770b1; }

.rvc-h2 {
  font-family: "Libre Franklin", sans-serif;
  font-size: clamp(1.35rem, 1.05rem + 1.3vw, 1.85rem);
  line-height: 1.22;
  font-weight: 700;
  margin: 0 0 10px;
}

.rvc-lede { font-size: .97rem; line-height: 1.6; max-width: 66ch; margin: 0 0 24px; opacity: .92; }

.rvc-measure {
  display: inline-block;
  font-family: Consolas, monospace;
  font-size: .78rem;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 4px;
  padding: 4px 10px;
  margin-bottom: 16px;
}

.rvc-sec--light .rvc-measure { background: #dce7ef; border-color: #c2d4e0; color: #2b4256; }

/* ------------------------------------------------- the CTA panel, rebuilt small */

.rvc-cta {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 30px;
  align-items: center;
  /* Two small cards, not one wide one. A single card stretched to fill this
     column is both enormous AND still truncated, which is the worst of both:
     it looks like it has room and then stops mid-sentence. Two at this width
     match the cards in Option 1 exactly. */
  --rvc-per-view: 2;
  --rvc-peek: 30px;
}

/* A grid item defaults to min-width:auto, so the scrolling rail refuses to
   shrink and shoves the CTA column off the page instead of scrolling. */
.rvc-cta > * { min-width: 0; }

.rvc-cta__right { text-align: center; }

.rvc-cta__line {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.45;
  margin: 16px 0 18px;
}

/* base.css colours links inside .section-* panels, so state the colour on every
   link state or the button legend comes out link-blue on green */
.rvc-cta__btn,
.rvc-cta__btn:link,
.rvc-cta__btn:visited,
.rvc-cta__btn:hover,
.rvc-cta__btn:focus {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #16a34a;
  color: #fff;
  font-size: 1.12rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 6px;
  padding: 13px 28px;
}

.rvc-cta__btn:hover, .rvc-cta__btn:focus { background: #12833c; }


/* Review bodies are stored as PLAIN TEXT with real newlines -- the <br /> tags
   were normalised out of tblFeedback on 2026-09-23 so the renderer can encode
   everything, always, and never has to decide which markup is safe to trust.

   The card and the modal then disagree on one thing, deliberately:
   the card has a hard line budget and a paragraph break would cost it one of
   four lines, so newlines collapse to a space. The modal has no budget and the
   longest review here runs to 3,283 characters, where the breaks earn their
   place. One property, two answers. */
.rvc__text { white-space: normal; }
.rvc-modal__text { white-space: pre-line; }

/* --------------------------------------- Option 4: one review, big button ----
   Change of plan, Danny 2026-09-23. The original brief swapped the CTA's single
   review for a carousel. But the finding that started all this was that the
   BIGGER the button, the better it converted -- and a carousel parked next to
   the button is the one thing guaranteed to shrink it. So: the CTA keeps ONE
   review, the button gets the room back, and the carousel moves below where it
   can run full width and cost the button nothing. */

.rvc-cta2 {
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: 44px;
  align-items: center;
}

/* same trap as .rvc-cta: a grid item's auto min-width refuses to shrink */
.rvc-cta2 > * { min-width: 0; }

/* The solo card is the only review on show, so it can afford more lines than a
   card in a rail -- nothing sits beside it that it has to match. */
.rvc--solo {
  --rvc-lines: 7;
  display: grid;
  gap: 14px;
  justify-items: stretch;
}

.rvc--solo .rvc-badge { width: 100%; }

/* A card in a rail reserves the full line count so its neighbours line up. The
   solo card has no neighbours, so reserving is just dead air -- and on a phone,
   where the card goes full width, a 342-character review needs four lines and
   was holding seven. Height goes back to the content; the clamp still caps it. */
.rvc--solo .rvc__card { min-height: 0; }
.rvc--solo .rvc__text { height: auto; max-height: var(--rvc-body); }

.rvc-cta2__right { text-align: center; }

.rvc-cta2__line {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 6px;
}

/* One sentence, one unbreakable unit -- see CTA_SentenceSpans in cta-panel.asp.
   A two-sentence line now breaks at the full stop rather than mid-clause, and a
   line wide enough to fit on one row is unaffected. Scoped to the panel: the
   spans are harmless anywhere this rule does not reach, they just render inline. */
.rvc-cta2 .cta-s { display: inline-block; }

.rvc-cta2__sub {
  font-size: .95rem;
  line-height: 1.5;
  opacity: .88;
  margin: 0 auto 22px;
  max-width: 46ch;
}

/* The button itself is NOT styled here. It is .btn-talk out of base.css, the
   same pill the video-page CTA uses, and the panel carries columns--cta-first
   so it picks up that class's larger size (72px tall, 30px) rather than the
   58px default. Restyling it here would have produced a second button that
   looks like the first until one of them changes. The only thing base.css
   cannot know is that this panel is a grid, so column-reverse -- the sole
   layout rule columns--cta-first carries -- is inert on it, which is what we
   want: the review still sits left of the button on desktop. */

/* The only thing under the button, since the "more about..." link came out on
   2026-09-24. It started as quiet microcopy at .85rem/.72 -- but with nothing
   below it to defer to it just looked dropped, so Danny asked for it bolder with
   room around it. It is still not a link and must not read as one: weight and
   space do the work, the body colour stays. */
.rvc-cta2__free {
  margin: 22px 0 2px;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .02em;
  opacity: .9;
}

/* the strip below the panel, not beside it
   ----------------------------------------
   Up to 2026-09-24 this was a hairline rule inside the panel's own section,
   doing the job of a section break. It is a real band now -- SCTA_Carousel
   emits <!--blue-02--> ahead of itself, one step darker than the panel's
   blue-03 -- so the rule, the top margin and the top padding all come off:
   the section's own padding is the gap, and the colour change is the divider.

   The band is opened by the STRIP, not by the panel, because 18 of the 33
   pages have no strip to show. See SCTA_STRIP_BAND in service-cta.asp. */
.rvc-below { margin-top: 0; border-top: 0; padding-top: 0; }

/* Tighten the band around it. A review strip does not need the 50px top and
   bottom that a section of body copy gets, and the panel above it already
   supplies plenty of air. Scoped with :has() so it reaches THIS blue-02 and
   not the 29 pages that use blue-02 for ordinary content -- and where :has()
   is unsupported the band simply keeps the standard padding.

   Two levels contribute padding, not one: the section and the .section-content
   inside it, 50px each. Zero the inner one on both bands and set the whole gap
   on the section, so the numbers here are the numbers on screen rather than
   half of them. */
section:has(> .section-content > .rvc-below) { padding-top: 40px; padding-bottom: 46px; }
section:has(> .section-content > .rvc-below) > .section-content { padding-top: 0; padding-bottom: 0; }

/* And close the gap above it. Unchanged, those two levels put 100px of empty
   blue-03 below the panel before the colour changed -- which reads as a gap
   rather than as one band ending and the next beginning. Only when the strip
   actually follows: on the 18 pages with no strip the panel's band runs into
   the body copy below and wants its full padding. `:has(+ section ...)` is
   what expresses "followed by". */
/* Half the air above the CTA. Danny, 2026-09-24. The section and its
   .section-content were contributing 50px each, so the panel started 100px down
   its own band. Zeroing the inner one leaves the section's 50px: half, exactly,
   without inventing a number. Unconditional -- the gap above the panel is the
   same question whether or not a strip follows. */
section:has(> .section-content > .rvc-cta2) > .section-content { padding-top: 0; }

section:has(> .section-content > .rvc-cta2):has(+ section > .section-content > .rvc-below) {
  padding-bottom: 40px;
}
section:has(> .section-content > .rvc-cta2):has(+ section > .section-content > .rvc-below) > .section-content {
  padding-bottom: 0;
}

/* .rvc-below__hd was the "What our customers say" heading. Removed 2026-09-24 --
   redundant above a row of review cards -- and the rule went with it rather than
   being left behind to style nothing. The mock-up's descriptive line now uses
   .rvc-lede, which is mock-up scaffolding and always was. */

/* ------------------------------------------------------------------- responsive */

@media (max-width: 991px) {
  .rvc-page { padding-top: 104px; }
  .rvc { --rvc-per-view: 2; --rvc-peek: 30px; }
  .rvc--micro { --rvc-per-view: 2; }
  .rvc-cta { grid-template-columns: 1fr; }
  .rvc-cta2 { grid-template-columns: 1fr; gap: 28px; }
}

/* On a phone the solo review is a redundant panel: the carousel is directly
   below it carrying the same kind of proof, swipeable, and more of it. The card
   only existed to sit BESIDE the button without stealing its width, and on one
   column nothing is being shared -- so it costs a screenful and earns nothing.
   The 4.7 badge stays: it is compact proof and it is not what the carousel does. */
@media (max-width: 767px) {
  .rvc--solo .rvc__card { display: none; }
  .rvc--solo { gap: 0; }

  /* The badge is width:100% on desktop so it lines up with the review card
     beneath it. On a phone that card is hidden, so the badge was left alone and
     stretched across the whole column: 618px of mostly white, with the score
     pinned left and the logo pinned right. Nothing to line up with any more, so
     it goes back to sizing itself and sits in the middle. `justify-self` is what
     does the centring -- .rvc--solo is a grid with justify-items: stretch, which
     would otherwise pull it wide again whatever width says. */
  .rvc--solo .rvc-badge { width: auto; justify-self: center; }
  /* nothing to reduce here any more -- the band's own padding is the spacing */
  section:has(> .section-content > .rvc-below) { padding-top: 26px; padding-bottom: 30px; }
}

@media (max-width: 620px) {
  .rvc { --rvc-per-view: 1; --rvc-peek: 42px; }
  .rvc--micro { --rvc-per-view: 1; }
  .rvc-wrap { padding: 34px 14px; }
}

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

/* ---------------------------------------- stars, on the real service page ----
   base.css only draws .star4 / .star5 inside .review .review-header or inside
   .review-panel, both of which are the OLD markup. The panel uses its own
   classes, so on a live page the ratings rendered as nothing at all -- the
   element was there, the ::after that draws it was not.

   Same FontAwesome glyph and the same gold as base.css, so a star in the panel
   is the same star as a star anywhere else on the site. Not re-declared as SVG:
   two drawings of one thing drift apart the first time someone changes a colour. */
/* Scoped to the CARD HEAD, not to .rvc-cta2. The first version keyed off the CTA
   panel, so the review pages -- same card, different page -- rendered no stars at
   all. The rule belongs to the component that draws the star, not to one of the
   two places that component happens to appear. */
.rvc__head .star4:after,
.rvc__head .star5:after,
.rvc-cta2 .star4:after,
.rvc-cta2 .star5:after {
  font-family: FontAwesome;
  color: #fbbc04;
  font-size: .8rem;
  letter-spacing: 1px;
  display: block;
  line-height: 1.2;
}

.rvc__head .star5:after,
.rvc-cta2 .star5:after { content: "\f005 \f005 \f005 \f005 \f005"; }

.rvc__head .star4:after,
.rvc-cta2 .star4:after { content: "\f005 \f005 \f005 \f005"; }

/* The badge carries its stars beside the score, not under a name. */
.rvc-badge .star4:after,
.rvc-badge .star5:after { font-size: .95rem; display: inline; }

/* The strip on a real service page. The mock-up wrapped it in .rvc-sec, which the
   service template does not have -- the band comes from CreateSections instead. */
/* The `.rvc-cta2 + .rvc-below` half of this pair was dropped on 2026-09-24:
   the two are in different sections now, so they are no longer siblings and it
   could never match again. The plain .rvc-below rule is the one that works. */
.rvc-below { max-width: 1180px; margin-left: auto; margin-right: auto; }
/* Dimmed with a translucent COLOUR, not opacity. `opacity` applies to the whole
   subtree, so the "see all" link inside was being rendered at 75% too and the
   one clickable thing in the strip was the faintest. A colour only affects the
   text that inherits it, and the link sets its own. */
.rvc-below__count { font-size: .85rem; color: rgba(255, 255, 255, .75); }

/* @na-link-ondark from _variables.less -- the light link colour the dark section
   bands already use. Stated here rather than inherited so it survives whatever
   band the strip ends up in, and at full strength against the dimmed text
   beside it. */
.rvc-below__all,
.rvc-below__all:link,
.rvc-below__all:visited { color: #8dd3e8; }
.rvc-below__all:hover,
.rvc-below__all:focus { color: #c6eaf4; }

/* ------------------------------------------------- the review pages -------- */
/* Danny picked Option B's card -- the tighter four-across one -- for these, but a
   review page is a grid, not a rail: nothing to scroll past, everything on show.
   So the .rvc--micro sizing is reused and the rail behaviour is not. */

.rvp__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  align-items: start;
}

/* The card in the strip clamps to a fixed line count so neighbours line up. Here
   every review is on show and there is no Read more to press, so the text runs to
   its natural length and the cards end up different heights. align-items:start
   above stops the short ones stretching to match the tall ones. */
.rvp__grid .rvc__card { min-height: 0; }

.rvc__text--full {
  display: block;
  height: auto;
  max-height: none;
  -webkit-line-clamp: none;
  overflow: visible;
  white-space: pre-line;
}

.rvp__h1 { font-family: "Libre Franklin", sans-serif; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); margin: 0 0 6px; }
.rvp__sub { font-size: 1rem; opacity: .9; margin: 0 0 14px; }
.rvp__back { margin: 0; font-size: .95rem; }
.rvp__back a, .rvp__back a:link, .rvp__back a:visited { color: #9ddffe; }

/* On a category page each card says which service it is about -- that is the one
   piece of context a mixed page needs, and it is the page's own words, not a
   platform badge. */
.rvp__svc {
  margin: 10px 0 0;
  padding-top: 9px;
  border-top: 1px solid var(--rvc-line);
  font-size: .72rem;
  color: var(--rvc-muted);
}

/* The site nav is fixed, so a page whose first element is its own heading puts the
   heading underneath it. The mock-up had the same offset; the review pages need it
   for the same reason. */
/* #main-content carries padding in base.css, and an id outranks a class, so the
   first version of this rule did nothing at all -- the h1 stayed at 100px with the
   nav ending at 134px. Match the specificity rather than reaching for !important. */
#main-content.rvp { padding-top: 140px; }

@media (max-width: 991px) { #main-content.rvp { padding-top: 104px; } }

/* ======================================================= the mid-page CTA ====
   <!--cta2-->, rendered by SCTA_Mid in includes/service-cta.asp.

   Deliberately a different instrument from .rvc-cta2 above: no badge, no
   review, no carousel. The main panel proves; this one just offers the next
   step, at the point in the page where the reader's problem is being described.
   Modelled on the SCC panel Danny shared -- a quiet bordered box, one line, the
   buttons -- but with our own components rather than a second set that looks
   like them until one of them changes. */

/* Full width of the usable column. It was 640px in a 945px measure, which left
   it sitting in the middle of the band looking like a dialog that had opened by
   accident and threw the page out of balance. Danny, 2026-09-24. */
.cta-mid {
  margin: 26px 0;
  padding: 24px 22px 20px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 10px;
  text-align: center;
}

/* On the light review pages and the mock-up's light band, a white-ish border
   disappears. Same box, borrowed from the carousel's own light treatment. */
.rvc-sec--light .cta-mid { border-color: #c2d4e0; }

.cta-mid__line {
  font-size: 1.05rem;
  line-height: 1.45;
  font-weight: 700;
  margin: 0 0 18px;
}

.cta-mid__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

/* .btn-whatsapp is 30px/inline-block out of base.css and would stand a head
   taller than the pill beside it. Matched to .btn-talk's 58px rather than
   restyled, so it stays the site's WhatsApp button. */
/* Round, logo only. base.css builds .btn-whatsapp as a labelled pill: 60px of
   left padding with the FontAwesome glyph absolutely positioned into it at
   left:20px. With the label gone that padding is just an off-centre hole, so
   the icon comes out of absolute flow and gets centred by the flexbox instead.
   58px square to match .btn-talk's height beside it. */
.cta-mid .btn-whatsapp--round {
  box-sizing: border-box;
  width: 58px;
  height: 58px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  line-height: 1;
}

.cta-mid .btn-whatsapp--round:before {
  position: static;
  left: auto;
}

.cta-mid__free {
  margin: 16px 0 0;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .02em;
  opacity: .82;
}

/* Stacked on a phone: two 58px controls side by side in a 320px column leaves
   neither of them a usable tap target, which is the finding this whole CTA
   project started from. */
@media (max-width: 560px) {
  .cta-mid__actions { flex-direction: column; gap: 12px; }
  .cta-mid__actions > a { width: 100%; justify-content: center; }
  .cta-mid .btn-talk { padding-left: 56px; padding-right: 20px; }
}

/* Standalone is the GENERIC case: the info-panel beside it on 1006 is hand
   written for that page and cannot be dropped into the other 32, so .cta-mid
   has to carry its own band. When it is the only thing in its section, the
   section and .section-content each add 50px on top of the panel's own 26px --
   126px of air around a 194px box. Same :has() scoping as the main panel's
   band, and it deliberately does NOT match when the marker sits inside a
   div.columns beside something, because then the row sets the rhythm. */
section:has(> .section-content > .cta-mid) { padding-top: 30px; padding-bottom: 30px; }
section:has(> .section-content > .cta-mid) > .section-content { padding-top: 0; padding-bottom: 0; }