/* ============================================================
   Review Us on Google - the hero's third button (v6.8)
   Built to the supplied reference's OWN measured profile, not to a guess:
   decoded in Chromium and measured (scripts/measure_review_ref.py). In the
   reference the red pill is 231x45px and the review pill 223x46px - the SAME
   height, a fully rounded capsule, a 1px light border on white, the Google G
   about 1.3x the text, a thin chevron on the right, and ~14px between it and
   the row above, aligned to the red button's left edge.
   Kept in its own file so site.css is not rewritten for one component.
   ============================================================ */
/* v6.26: a wrapping row - the Google pill and the red "View Our Work" pill
   sit side by side on one baseline, 14px apart, and wrap on a narrow phone. */
.hero-review{margin:14px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:14px}

.btn.btn--review{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 22px;
  border:1px solid #D5CEC0;border-radius:999px;background:var(--white);color:var(--ink);
  font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:0;
  line-height:1;text-transform:none;white-space:nowrap;
  box-shadow:0 10px 22px -20px rgba(21,23,27,.6);
  transition:background-color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.btn.btn--review:hover{
  background:#FDFBF7;color:var(--ink);border-color:#B9B0A0;
  transform:translateY(-1px);box-shadow:0 16px 26px -22px rgba(21,23,27,.7);
}
.btn.btn--review:active{transform:translateY(0)}
/* the G and the chevron share the label's 10px gap, so the three gaps read even */
.btn.btn--review .g-mark{width:18px;height:18px;flex:0 0 18px}
.btn.btn--review .chev{width:13px;height:13px;flex:0 0 13px;color:#5C626A}
.btn.btn--review:hover .chev{color:var(--ink)}

@media (max-width:620px){
  .btn.btn--review{font-size:14.5px}
}
@media print{.hero-review{display:none !important}}