/* Treadstone Law — /reviews hub (Sprint CS, Workstream W5 Reviews).
   Scoped entirely under .revs- classnames (new to the site) so nothing
   here can collide with or override a rule in styles.css — this file is
   linked ALONGSIDE styles.css, never instead of it, and never edits it.
   Tokens only: every colour, radius, shadow and space below comes from
   the site's own custom properties (styles.css :root) so this page stays
   in step automatically if the palette or scale ever changes.

   No stars, no rating numbers, no review/AggregateRating visual language
   anywhere in this file, matching SPRINT-CS-SPEC.md §9 / BRIEF.md Round 6:
   Google ignores self-serving review markup on a firm's own site and it
   can look spammy — reviews present here as plain quotes with a label. */

/* ---- Hero ---- */
.revs-hero{padding:54px 0 8px;text-align:center}
.revs-hero .wrap{max-width:640px}
.revs-hero h1{margin:0 0 12px}
.revs-herolede{margin:0 0 8px;font-size:var(--fs-lede);color:var(--text-muted)}
.revs-privacy{margin:0;font-size:var(--fs-small);color:var(--text-muted);font-style:italic}

/* ---- Jump nav ---- */
.revs-jump{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:28px var(--gutter) 8px;margin:0 auto;max-width:var(--maxw);box-sizing:border-box}
.revs-jump a{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--text-muted);background:var(--bg-raised);border:1px solid var(--border-strong);border-radius:var(--radius-pill);padding:8px 14px;text-decoration:none;transition:all var(--dur-fast)}
.revs-jump a:hover{background:var(--tsl-navy);border-color:var(--tsl-navy);color:#fff}
.revs-jump a:focus-visible{outline:2px solid var(--tsl-crimson);outline-offset:2px}
.revs-jump a span{background:var(--tsl-gold-soft);color:var(--tsl-navy);font-size:11px;font-weight:800;border-radius:var(--radius-pill);padding:1px 7px}

/* ---- Groups ---- */
.revs-groups{padding:16px 0 8px}
.revs-group{margin-bottom:48px;scroll-margin-top:96px}
.revs-group:last-child{margin-bottom:0}
.revs-grouphead{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;border-bottom:2px solid var(--tsl-ink);padding-bottom:10px;margin-bottom:6px}
.revs-grouphead h2{font-family:var(--font-display);font-weight:500;font-size:24px;margin:0;letter-spacing:var(--tracking-display)}
.revs-cpill{margin-left:auto;font-size:12px;font-weight:700;color:var(--tsl-navy);background:var(--tsl-gold-soft);border-radius:var(--radius-pill);padding:4px 12px;white-space:nowrap}
.revs-groupsub{margin:0 0 18px;font-size:var(--fs-small);color:var(--text-muted)}

.revs-cards{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:700px){.revs-cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1020px){.revs-cards{grid-template-columns:repeat(3,1fr)}}

.revs-card{display:flex;gap:13px;align-items:flex-start;background:var(--bg-card);border:1px solid var(--border-strong);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:17px 18px}
.revs-card-body{flex:1;min-width:0}
.revs-quote{font-family:var(--font-display);font-weight:400;font-style:italic;font-size:15px;line-height:1.5;color:var(--tsl-ink);margin:0 0 10px}
.revs-who{font-size:12px;font-weight:600;color:var(--text-muted);margin:0}
.revs-viz{flex:none;display:flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--bg-raised);color:var(--tsl-navy);overflow:hidden}
.revs-viz svg{display:block}

/* ---- Regions ---- */
.revs-regions{padding:20px 0}
.revs-regions .wrap{max-width:var(--maxw)}
.revs-regions h2{font-size:22px;margin:0 0 4px}
.revs-regionslede{font-size:var(--fs-small);color:var(--text-muted);margin:0 0 14px}
.revs-chips{display:flex;flex-wrap:wrap;gap:8px}
.revs-chips span{font-size:12.5px;font-weight:600;color:var(--tsl-ink);background:var(--bg-card);border:1px solid var(--border-strong);border-radius:var(--radius-pill);padding:6px 12px}
.revs-chips span b{color:var(--tsl-crimson);font-weight:800;margin-left:4px}

/* ---- Call block ---- */
/* .wrap keeps the base .wrap rule's responsive --gutter side padding (see
   styles.css:135) so the card below stays inset at every width down to
   320px — only max-width narrows the column. The visual card (background/
   border/radius/padding) belongs to the nested .card, never to .wrap
   itself: styling .wrap directly overrides its own gutter padding with a
   fixed one, so at any viewport under the max-width the card's background
   sits flush against the screen edge with its corners clipped off-screen
   (mobile-gutter-verification memory; fixed 24 Sept 2026). See
   .revs-citycard below for the same nest-a-card-inside-.wrap precedent. */
.revs-callblock{padding:16px 0 64px}
.revs-callblock .wrap{max-width:560px}
.revs-callblock .card{text-align:center;background:var(--bg-raised);border:1px solid var(--border-strong);border-radius:var(--radius-lg);padding:36px 28px}
.revs-callblock h2{font-size:22px;margin:0 0 12px}
.revs-repeat{font-size:13.5px;line-height:1.55;color:var(--text-muted);font-style:italic;margin:0 0 12px}
.revs-pricenote{font-size:13px;color:var(--text-muted);margin:0 0 22px}
.revs-pricenote span{white-space:nowrap}
.revs-callblock .cs-btn{margin:0 auto}
.revs-callblock .cs-btn .arr{display:inline-block;transition:transform var(--dur-fast)}
.revs-callblock .cs-btn:hover .arr{transform:translateX(3px)}
/* .cs-btn itself (styles.css, owned by W1) is authored padding:0 26px;
   white-space:nowrap, one direct flex item (an anonymous text run plus
   the .arr span) for a short label. This page's own longest CTA, "Book a
   20-minute call", doesn't fit that box at ~320-359px viewport width once
   .wrap's gutter and .card's own 28px side padding are subtracted (as
   little as ~171px of content width against ~184px of unbreakable text
   alone): the text run freezes at its own min-content (nowrap forbids it
   shrinking at all) and the flex algorithm has nowhere left to take the
   deficit from but .arr, which gets shrunk to 0 width — confirmed with
   Playwright at 320px, JS on and off (same shared-component defect the
   /book/* pages hit independently; adversarial pass, 24 Sept 2026). The
   real fix belongs in .cs-btn itself, out of this workstream's ownership,
   and per that same finding is already flagged on another page this round
   — editing styles.css here risks colliding with that fix. Fixed instead
   entirely on this page's own side of the boundary: build_reviews_page.py
   now wraps the label text and .arr together in one .cs-label span, so
   the button has a single flex item instead of two competing ones, and
   the rule below lets THAT item wrap normally. white-space:normal has no
   effect at any width wide enough for the label to fit on one line (the
   common case, and every width above ~360px) — .cs-label only ever
   actually wraps right where .arr used to collapse, and wrapping keeps
   "call" and the arrow glued together on the same line since they now
   flow as ordinary text instead of as separate flex items. Scoped under
   this page's own .revs-callblock ancestor (this file's own convention:
   nothing below can reach any other page's .cs-btn), so regardless of
   when or whether the shared styles.css fix lands, this page's button
   never overflows or loses its arrow. */
.revs-callblock .cs-btn .cs-label{white-space:normal}
@media(max-width:400px){
  .revs-callblock .cs-btn{height:auto;min-height:48px;padding:12px 22px;text-align:center}
  .revs-callblock .cs-btn .cs-label{line-height:1.3}
}
.revs-msglink{display:block;text-align:center;font-size:13px;font-weight:600;color:var(--text-muted);text-decoration:underline;padding:14px 0 0}
.revs-msglink:hover{color:var(--tsl-crimson)}

/* ---- Injected strips (homepage band, service-page strip, sales-page
   block, calculator-page card) — scripts/reviews/inject_reviews.py's
   render_strip(). Reuses .revs-card/.revs-cards/.revs-viz etc. above. ---- */
.revs-homeband{padding:24px 0}
.revs-strip{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);box-sizing:border-box;text-align:center}
.revs-eyebrow{display:block;font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--tsl-crimson);margin-bottom:8px}
.revs-strip h2{font-size:clamp(26px,3.4vw,36px);margin:0 0 26px}
.revs-strip h2 em{color:var(--tsl-crimson);font-style:italic}
.revs-strip .revs-cards{text-align:left;grid-template-columns:1fr}
@media(min-width:700px){.revs-strip .revs-cards{grid-template-columns:repeat(3,1fr)}}
/* n==2 result strips (tax.html today, per SERVICE_PAGE_KEYWORDS short-count
   pages) stay single-column below 700px like every other short strip — only
   widen to a centred 2-up grid on desktop. Fixes a 360px overflow an
   earlier unconditional inline `grid-template-columns:repeat(2,1fr)` caused
   (reviews verify-fixer pass, 23 Sept 2026). */
.revs-strip .revs-cards.revs-cards-pair{max-width:740px;margin:0 auto}
@media(min-width:700px){.revs-strip .revs-cards.revs-cards-pair{grid-template-columns:repeat(2,1fr)}}
/* Decision 9's required privacy line, centred like the rest of .revs-strip
   (base .revs-privacy is margin:0 — the hero's own use in build_reviews_
   page.py sits after a lede paragraph that already carries the gap below
   it; here it sits between the cards and the "more" link so it needs its
   own top margin). Verify-fixer (24 Sept 2026). */
.revs-strip .revs-privacy{margin-top:16px}
.revs-strip-more{display:inline-block;margin-top:22px;font-size:13.5px;font-weight:600;color:var(--tsl-crimson);text-decoration:none;border-bottom:1px solid var(--tsl-gold-soft)}
.revs-strip-more:hover{border-color:var(--tsl-crimson)}

/* City lawyer page — one bare .revs-card, no eyebrow/heading/more-link,
   sitting between the hero and the page's first tab section (frag-k.html
   Mockup 5). render_city_card() in scripts/reviews/inject_reviews.py. */
/* Bottom padding was 4px — the section immediately after this one on
   every city page is the sticky .tabwrap fee-navigation bar (re-city-
   page.css), so 4px left the privacy line touching the tab pills with no
   breathing room. 28px matches the ~28px gap frag-k.html Mockup 5 shows
   between the card and the next section. Verify-fixer (24 Sept 2026). */
.revs-citycard{padding:20px 0 28px}
.revs-citycard .wrap{max-width:640px}
/* Decision 9's privacy line, left-aligned under the single card like the
   card's own quote/who text (no centred heading here to align under).
   Verify-fixer (24 Sept 2026). */
.revs-citycard .revs-privacy{margin-top:10px}

/* Calculator-page single card, sitting beside/under the call block —
   the calculator template (owned by W3) wraps this card in its own
   layout container; this file only styles the card contents themselves,
   already covered by .revs-card above. */

/* ---- Reduced motion: no extra rules needed — this page's only motion is
   the sitewide .rv reveal + .h-an rise, both already neutralized by
   styles.css's own @media (prefers-reduced-motion: reduce) block. ---- */