/* =========================================================
   Google reviews — native, server-rendered (REV-01, October 2026)
   Replaces the Elfsight widget. Markup between the google-reviews markers is
   generated by reviews-sync/gen.py from the Business Profile API; edit the
   script, never the block. Loaded only on the 7 pages that carry a block, after
   page-extras.css. Works without JavaScript: the rail scrolls natively and
   every card links out through the "Read all on Google Maps" button.
   ========================================================= */

/* The Elfsight-era height reservation (page-extras block 5) is unnecessary now
   that the reviews are in the HTML; it only left a gap under the short
   link-out panel. */
.g-reviews{ min-height: 0; }
.g-reviews[data-band="dark"] .eyebrow{ color: var(--c-paper); }

.gr{
  --gr-bleed: var(--gutter);         /* = the container's side padding */
  --gr-gap: clamp(12px, 1.5vw, 20px);
  --gr-ink: var(--c-ink);
  --gr-mute: var(--c-mute);
  --gr-rule: var(--c-line);
  --gr-bg: var(--c-paper);
  --gr-card: var(--c-paper-2);
  --gr-card-ink: var(--c-ink);
  --gr-card-mute: #5A5A5A;          /* 6.4:1 on paper-2, 7:1 on white */
  --gr-card-line: transparent;
}
.gr--dark{
  --gr-ink: var(--c-paper);
  --gr-mute: rgba(255,255,255,.70);
  --gr-rule: rgba(255,255,255,.18);
  --gr-bg: var(--c-ink);
  --gr-card: var(--c-paper);
  --gr-card-line: transparent;
}

/* ---------- Score bar ---------- */
.gr__bar{
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: 18px clamp(28px, 4vw, 64px);
  padding-bottom: clamp(18px, 2vw, 26px);
  margin-bottom: clamp(16px, 1.8vw, 22px);
  border-bottom: 1px solid var(--gr-rule);
}
.gr__score{
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: 10px 18px; min-width: 0;
}
.gr__score--big{ flex: 1 1 auto; }
.gr__num{
  font-family: var(--f-display); font-weight: 900;
  font-size: clamp(64px, 8vw, 128px); line-height: .78;
  letter-spacing: -.03em; color: var(--gr-ink);
}
.gr--multi .gr__num{ font-size: clamp(48px, 5vw, 76px); }
.gr__meta{ display: flex; flex-direction: column; gap: 8px; padding-bottom: 2px; min-width: 0; }
.gr__stars{ color: var(--c-accent); font-size: clamp(18px, 1.7vw, 24px); letter-spacing: .1em; line-height: 1; }
.gr__stars-off, .gr-card__stars-off{ opacity: .28; }
.gr__count{
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gr-mute);
}
.gr__count strong{ color: var(--gr-ink); font-weight: 500; }
.gr__all{
  display: inline-block; padding-block: 12px; line-height: 1.5;
  font-family: var(--f-mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gr-ink);
  text-decoration: underline; text-decoration-color: var(--c-accent);
  text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.gr__all:hover{ color: var(--c-accent); }
.gr__score--big .gr__all{ margin-left: auto; align-self: flex-end; }

/* Homepage: one compact score per branch, side by side at every width. */
.gr--multi .gr__bar{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px clamp(16px, 4vw, 56px); align-items: start;
}
.gr--multi .gr__score{
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: 18px; row-gap: 2px; align-items: end;
}
.gr--multi .gr__num{ grid-row: 1 / span 2; font-size: clamp(56px, 7vw, 112px); }
.gr--multi .gr__all{ grid-column: 2; padding-block: 4px 0; }
.gr--multi .gr__score--none{ grid-template-columns: minmax(0, 1fr); }
.gr--multi .gr__score--none .gr__all{ grid-column: 1; }
@media (max-width: 640px){
  .gr--multi .gr__score{ display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
  .gr--multi .gr__all{ padding-block: 4px 10px; }
}

/* ---------- Filter chips (revealed by JS) ---------- */
.gr__filters{
  display: flex; gap: 8px; margin-bottom: clamp(14px, 1.6vw, 20px);
  flex-wrap: wrap;
}
.gr__chip{
  min-height: 44px; padding: 0 16px;
  font-family: var(--f-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gr-ink); background: transparent;
  border: 1px solid var(--gr-rule); border-radius: var(--radius-pill);
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.gr__chip:hover{ border-color: var(--gr-ink); }
.gr__chip[aria-pressed="true"]{ background: var(--gr-ink); border-color: var(--gr-ink); color: var(--gr-bg); }
.gr__chip:focus-visible, .gr__nav button:focus-visible, .gr-card__more:focus-visible, .gr__all:focus-visible{
  outline: 2px solid var(--c-accent); outline-offset: 3px;
}

/* ---------- Rail ---------- */
.gr__rail{
  list-style: none; display: flex; gap: var(--gr-gap);
  margin: 0 calc(-1 * var(--gr-bleed)); padding: 2px var(--gr-bleed) 10px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gr-bleed);
  scrollbar-width: none;
}
.gr__rail::-webkit-scrollbar{ display: none; }
.gr__rail:focus-visible{ outline: 2px solid var(--c-accent); outline-offset: -2px; }

.gr-card{
  flex: 0 0 calc((100% - 2 * var(--gr-gap)) / 3); min-width: 0;
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(20px, 2vw, 28px);
  background: var(--gr-card); color: var(--gr-card-ink);
  border: 1px solid var(--gr-card-line);
}
.gr-card[hidden]{ display: none; }
@media (max-width: 1080px){ .gr-card{ flex-basis: calc((100% - var(--gr-gap)) / 2); } }
@media (max-width: 640px){ .gr-card{ flex-basis: 86%; } }

.gr-card__head{
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gr-card-mute);
}
.gr-card__stars{ font-family: var(--f-body); color: var(--c-accent); font-size: 17px; letter-spacing: .04em; line-height: 1; }
.gr-card__head time{ margin-left: auto; }

.gr-card__text{ margin: 0; }
.gr-card__text::before{
  content: "\201C"; display: block; height: .42em; margin-bottom: 6px;
  font-family: var(--f-display); font-size: 56px; line-height: .9;
  color: var(--c-accent);
}
.gr-card__text p{
  margin: 0; font-size: 16px; line-height: 1.55; white-space: pre-line;
  overflow-wrap: anywhere;
}
/* Clamp only when JS is present (html.js is set in <head> before paint), so a
   visitor without JS still reads every word. "Read more" opens the full review
   in a dialog rather than growing the card, which would grow the whole rail. */
.js .gr-card__text p{
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden;
}
/* Short reviews read as a statement: display-size type, centred in the card,
   instead of a line of body text over an empty box. Long ones clamp. */
.gr-card--s .gr-card__text{ flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding-bottom: 12px; }
.gr-card--s .gr-card__text::before{ margin-bottom: 10px; }
.gr-card--s .gr-card__text p{
  font-size: clamp(24px, 2.2vw, 30px); line-height: 1.2; font-weight: 700; letter-spacing: -.02em;
}
.gr-card--m .gr-card__text p{ font-size: clamp(17px, 1.35vw, 19px); line-height: 1.45; }
.js .gr-card--m .gr-card__text p{ -webkit-line-clamp: 4; }
.gr-card__more{
  align-self: flex-start; margin-top: -8px; min-height: 32px; padding: 0;
  background: none; border: 0; cursor: pointer; color: var(--gr-card-ink);
  font-family: var(--f-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  text-decoration: underline; text-decoration-color: var(--c-accent);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.gr-card__more[hidden]{ display: none; }

.gr-card__reply{
  margin: 0; padding-left: 12px; border-left: 2px solid var(--c-accent);
  font-size: 14px; line-height: 1.5; color: var(--gr-card-mute);
}
.js .gr-card__reply{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
.gr-card__reply-k{
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gr-card-ink); margin-right: 4px;
}

.gr-card__who{
  display: flex; align-items: center; gap: 10px;
  margin: auto 0 0; padding-top: 14px; border-top: 1px solid rgba(10,10,10,.10);
}
.gr-card__av{
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  font-family: var(--f-display); font-size: 15px; line-height: 1;
  background: var(--c-ink); color: var(--c-paper);
}
.gr-card:nth-child(3n+2) .gr-card__av{ background: var(--c-accent); color: var(--c-ink); }
.gr-card:nth-child(3n) .gr-card__av{ background: var(--c-warm); color: var(--c-ink); }
.gr-card__id{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gr-card__name{
  font-weight: 600; font-size: 15px; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gr-card__src{
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gr-card-mute);
}

/* ---------- Full review dialog ---------- */
.gr-dialog{
  margin: auto; inset: 0;
  width: min(640px, calc(100vw - 32px)); max-height: min(86vh, 900px);
  padding: 0; border: 0; background: var(--c-paper); color: var(--c-ink);
  overflow: auto; overscroll-behavior: contain;
}
.gr-dialog::backdrop{ background: rgba(10,10,10,.72); }
.gr-dialog .gr-card{ border: 0; background: var(--c-paper); padding: clamp(24px, 4vw, 40px); }
.gr-dialog .gr-card__text p, .gr-dialog .gr-card__reply{ display: block; -webkit-line-clamp: unset; overflow: visible; }
.gr-dialog .gr-card__more{ display: none; }
.gr-dialog__close{
  position: sticky; top: 0; float: right; z-index: 1;
  width: 48px; height: 48px; margin: 8px 8px 0 0; display: grid; place-items: center;
  font-size: 22px; line-height: 1; cursor: pointer;
  background: var(--c-ink); color: var(--c-paper); border: 0;
}
.gr-dialog__close:focus-visible{ outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* ---------- Foot: disclosure, progress, arrows ---------- */
.gr__progress{ height: 2px; margin-top: clamp(14px, 1.6vw, 20px); background: var(--gr-rule); }
.gr__progress > span{
  display: block; height: 100%; width: var(--p, 0%); background: var(--c-accent);
  transition: width var(--dur) var(--ease);
}
.gr__foot{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px 24px; margin-top: 14px;
}
.gr__note{ margin: 0; max-width: 62ch; font-size: 13.5px; line-height: 1.5; color: var(--gr-mute); }
.gr__nav{ display: flex; align-items: center; gap: 10px; margin-left: auto; }
.gr__nav[hidden]{ display: none; }
.gr__nav button{
  width: 48px; height: 48px; display: grid; place-items: center;
  font-size: 18px; line-height: 1; cursor: pointer;
  color: var(--gr-ink); background: transparent; border: 2px solid var(--gr-ink);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.gr__nav button:hover:not(:disabled){ background: var(--gr-ink); color: var(--gr-bg); }
.gr__nav button:disabled{ opacity: .3; cursor: default; }
.gr__pos{
  min-width: 7ch; text-align: center;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; color: var(--gr-mute);
}

/* ---------- Link-out panel (no data, or data older than 30 days) ---------- */
.gr__fallback{
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px;
  padding: 22px 24px; border: 1px solid var(--gr-rule);
}
.gr__fallback-stars{ font-family: var(--f-body); color: var(--c-accent); font-size: 20px; letter-spacing: .06em; line-height: 1; }
.gr__fallback-txt{ font-size: 15px; color: var(--gr-ink); }
.gr__fallback a{
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gr-ink);
  text-decoration: underline; text-decoration-color: var(--c-accent);
  text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.gr--multi .gr__bar .gr__fallback{ border: 0; padding: 0; }

/* ---------- Homepage: sits inside the light proof section ---------- */
/* page-extras sets .home .container{padding-inline:16px} at ≤360px; match it so
   the rail bleeds exactly to the screen edge and no further. */
@media (max-width: 360px){ .home .gr{ --gr-bleed: 16px; } }

/* ---------- Phones ---------- */
@media (max-width: 640px){
  .gr__bar{ gap: 14px 28px; }
  .gr__score--big .gr__all{ margin-left: 0; flex-basis: 100%; }
  .gr__filters{
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gr-bleed)); padding-inline: var(--gr-bleed);
  }
  .gr__filters::-webkit-scrollbar{ display: none; }
  .gr__nav{ display: none; }        /* swipe on phones; the progress bar shows position */
  .js .gr-card__text p{ -webkit-line-clamp: 6; }
}

/* ---------- Accent band (REV-03, 7 Oct 2026) ----------
   Owner feedback on the live REV-02: the section blended into the page. It is
   now the loudest block on every page that carries it: a full-width orange
   band (black on #E97A3D is 6.9:1), black score and stars, and white cards
   with a hard black offset shadow. Used on all 7 pages; the homepage gets its
   own section instead of sitting inside "In their own words". */
[data-band="accent"]{ background: var(--c-accent); color: var(--c-ink); }
[data-band="accent"] h2,
[data-band="accent"] .lede,
[data-band="accent"] .section-head p,
[data-band="accent"] .eyebrow{ color: var(--c-ink); }
[data-band="accent"] .eyebrow::before{ background: var(--c-ink); }
.gr--accent{
  --gr-ink: var(--c-ink);
  --gr-mute: rgba(10,10,10,.80);
  --gr-rule: rgba(10,10,10,.24);
  --gr-bg: var(--c-accent);
  --gr-card: var(--c-paper);
  --gr-card-line: var(--c-ink);
}
.gr--accent .gr__stars{ color: var(--c-ink); }
.gr--accent .gr__all{ text-decoration-color: var(--c-ink); }
.gr--accent .gr__all:hover{ color: var(--c-paper); }
.gr--accent .gr__chip{ border-color: rgba(10,10,10,.35); }
.gr--accent .gr__chip:hover{ border-color: var(--c-ink); }
.gr--accent .gr__chip[aria-pressed="true"]{ background: var(--c-ink); border-color: var(--c-ink); color: var(--c-paper); }
.gr--accent .gr__chip:focus-visible,
.gr--accent .gr__nav button:focus-visible,
.gr--accent .gr__all:focus-visible,
.gr--accent .gr__rail:focus-visible{ outline-color: var(--c-ink); }
.gr--accent .gr__nav button:hover:not(:disabled){ background: var(--c-ink); color: var(--c-paper); }
.gr--accent .gr__nav button:disabled{ opacity: .35; }
.gr--accent .gr__progress > span{ background: var(--c-ink); }
.gr--accent .gr-card{ border-width: 2px; box-shadow: 6px 6px 0 var(--c-ink); }
.gr--accent .gr__fallback{ border-color: var(--c-ink); }
.gr--accent .gr__fallback-stars{ color: var(--c-ink); }
.gr--accent .gr__fallback a{ text-decoration-color: var(--c-ink); }
@media (max-width: 640px){
  .gr--accent .gr-card{ box-shadow: 4px 4px 0 var(--c-ink); }
}

@media (prefers-reduced-motion: reduce){
  .gr__progress > span, .gr__chip, .gr__nav button{ transition: none; }
}
@media print{
  .gr__rail{ display: block; overflow: visible; margin: 0; padding: 0; }
  .gr-card{ break-inside: avoid; margin-bottom: 12px; border-color: #ccc; }
  .gr-card__text p{ display: block; -webkit-line-clamp: unset; }
  .gr__filters, .gr__nav, .gr__progress{ display: none; }
}