/* Google review carousel. Native scroll-snap, no JS: CSP is script-src 'self'
   with no inline scripts, and a swipeable snap row is the whole feature. */
.rev-track {
  display: flex;
  /* start, not stretch: reviews vary in length, and equal
     heights leave the short cards with a block of dead space under the name. */
  align-items: flex-start;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 4px;
  padding: 4px 4px 18px;
  margin: 0 auto;
  max-width: var(--wrap);
  -webkit-overflow-scrolling: touch;
  /* pan-x AND pan-y. `pan-y` alone reserved every touch gesture for the page,
     so the row could not be swiped at all on a phone — the browser already
     locks a gesture to whichever axis it starts on, which is what keeps a
     normal up/down swipe scrolling the page. */
  touch-action: pan-x pan-y pinch-zoom;
  overscroll-behavior-x: contain;
  /* No scrollbar: it sat as a grey rule between the cards and the CTA. The
     peeking next card plus the autoplay are the affordance. */
  scrollbar-width: none;
  /* Paint containment + its own layer: without these, a page scroll repaints
     all 24 cards (8 real, 16 loop clones) and their shadows, which shows up as
     a hitch in the page scroll. */
  contain: paint;
  will-change: transform;
}
.rev-track::-webkit-scrollbar { display: none; }
.rev-card {
  /* Each card isolates its own layout and paint, so one card changing (See
     more, or a clone scrolling in) can't invalidate the whole row. */
  contain: layout paint;
  flex: 0 0 min(85%, 340px);
  /* start, not center: a centred first card sits at a negative scroll offset
     the browser clamps to 0, which puts a visible jump in the infinite-loop
     rewind (home.js). Start-aligned, every card's snap position is exact. */
  scroll-snap-align: start;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: var(--shadow);
  margin: 0;
}
/* Stars and attribution share the top line of the card, so the reviewer is
   named before the quote rather than after it. */
.rev-head {
  display: flex;
  align-items: baseline;
  /* Packed left with a fixed gap, not space-between: spread apart, the name
     sat inline on cards where it fitted and wrapped on the ones where it
     didn't, so no two cards lined up. */
  gap: 10px;
  margin-bottom: 12px;
}
.rev-who { white-space: nowrap; }
.rev-stars { color: #B07000; letter-spacing: 2px; }
.rev-who { font-size: 13px; font-weight: 700; color: var(--teal-deep); }
/* Clamped to 8 lines so one long review can't set the height of the whole row.
   home.js adds the See more button only to the cards that actually overflow,
   so a card with no button is showing its full text. */
.rev-card p {
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  overflow: hidden;
}
.rev-card.is-open p { -webkit-line-clamp: unset; }
.rev-more {
  /* 44px tall hit area (WCAG 2.5.8 needs 24, 44 is the comfortable touch size)
     without making the underlined label itself any bigger. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 2px 0 0;
  padding: 0 6px 0 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--teal-deep);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rev-more:hover { color: var(--ink); }
.rev-more:focus-visible { outline: 3px solid #1C5F92; outline-offset: 3px; border-radius: 4px; }

.rev-share-label {
  text-align: center;
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.rev-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 12px 0 0;
}
/* These two are brand marks, not CTAs: .btn-ghost's hover fills the button
   with near-black ink, which turned the Google wordmark unreadable and would
   have swallowed Trustpilot's dark wordmark too. No fill, no lift, no colour
   flip on either. The border, shadow and the shared .btn lift carry it. */
.rev-share { gap: 9px; font-size: 14.5px; background: var(--white); }
.rev-share:hover,
.rev-share:focus-visible {
  background: var(--white);
  color: var(--ink);
  border-color: #1C5F92;
  box-shadow: 0 4px 14px -6px rgba(35,44,43,.28);
}
.rev-share:active { transform: scale(.985); }
/* Official Trustpilot mark (their brand CDN, self-hosted because CSP img-src
   is 'self'). It carries its own wordmark, so this button has no text label
   and the alt text does the talking. */
.rev-share-logo { height: 20px; width: auto; display: block; }

@media (min-width: 900px) { .rev-card { flex: 0 0 340px; } }
.rev-rating { margin: 12px 0 0; text-align: center; }
/* Links to the Google review form but deliberately looks identical to the
   plain rating it replaced: inherited colour, no underline. */
.rev-rating-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  /* Same timing as .btn, so the lift matches the two buttons below it. */
  transition: transform .15s;
}
.rev-rating-link:hover { transform: translateY(-2px); }
.rev-rating-link:active { transform: scale(.985); }
.rev-rating-link:focus-visible { outline: 3px solid #1C5F92; outline-offset: 4px; border-radius: 6px; }
.rev-rating-num { font-size: 26px; font-weight: 800; color: var(--ink); line-height: 1; }
.rev-rating-stars { color: #B07000; font-size: 22px; letter-spacing: 3px; }
.rev-rating svg { flex: none; }
/* Mobile: the longest review is ~90 words, and at desktop type sizes that card
   runs past a phone screen on its own. Tighter type and padding keep a whole
   card in view so the swipe affordance (next card peeking) stays visible. */
@media (max-width: 600px) {
  .rev-track { gap: 14px; padding-bottom: 14px; }
  .rev-card { flex-basis: 82%; padding: 20px 18px; }
  /* Narrower cards mean more lines, so 8 would put a See more on nearly every
     card. 10 keeps the button for the genuinely long ones. */
  .rev-card p { font-size: 14.5px; line-height: 1.55; -webkit-line-clamp: 10; }
  /* Narrow cards can't hold both on one line, so stack them; still identical
     card to card, which is the point. */
  .rev-head { flex-wrap: wrap; gap: 2px 10px; }
  .rev-who { font-size: 12.5px; }
  .rev-rating-num { font-size: 22px; }
  .rev-rating-stars { font-size: 19px; }
}

#reviews .sec-head h2{font-size:clamp(26px,3.6vw,40px);line-height:1.2;letter-spacing:-.02em;margin:0 0 16px}

/* TGG adaptation: the existing blue identity, with readable link targets. */
.tgg-reviews { padding: 72px 0; background: #F4F7FA; }
.rev-intro { text-align: center; max-width: 720px; margin: 0 auto 22px; }
.rev-intro .hv-eyebrow { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #2270AA; }
.rev-intro h2 { margin: 0 0 20px; font-size: clamp(28px,3.6vw,40px); line-height: 1.15; letter-spacing: -.02em; }
.hero-review-badges { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 20px; }
.review-badge { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 44px; max-width: 100%; padding: 9px 15px; border: 1px solid #DDE4EA; border-radius: 999px; background: #FFFFFF; color: #14181B; text-decoration: none; font-size: 13.5px; font-weight: 600; line-height: 1.5; }
.review-badge svg { flex: none; }
.review-badge-stars { color: #966000; letter-spacing: 1px; }
.hero-content .review-badge, .sv-banner .review-badge { color: #FFFFFF; border-color: #FFFFFF66; background: #14181BCC; }
.hero-content .review-badge-stars, .sv-banner .review-badge-stars { color: #FFD166; }
.review-badge:hover { border-color: #2E86C8; }
.review-badge:focus-visible, .rev-controls button:focus-visible, .rev-who:focus-visible, .rev-source:focus-visible, .rev-track:focus-visible { outline: 3px solid #2E86C8; outline-offset: 4px; }
.rev-head { flex-wrap: wrap; gap: 4px 10px; }
.rev-who { color: #1C5F92; white-space: normal; min-height: 24px; display: inline-flex; align-items: center; text-underline-offset: 3px; }
.rev-card blockquote { margin: 0; }
.rev-source { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; font-size: 13px; font-weight: 600; color: #1C5F92; text-underline-offset: 3px; }
.rev-controls { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 20px; }
.rev-controls[hidden], .rev-controls button[hidden] { display: none; }
.rev-controls button { min-width: 44px; min-height: 44px; padding: 8px 14px; border: 1px solid #CBD6DF; border-radius: 999px; background: #FFFFFF; color: #1C5F92; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.rev-check { text-align: center; font-size: 13px; margin: 10px 0; color: #5B666E; }
.tgg-reviews .rev-actions { margin-top: 20px; }
@media (max-width:600px) { .tgg-reviews { padding: 48px 0; } .review-badge { font-size: 12px; padding: 8px 12px; gap: 7px; } }
@media (prefers-reduced-motion:reduce) { .review-badge, .rev-rating-link { transition: none; } }