/* Client quote straight under the hero on the industry pages (not plumbers). Big quote, words darken as you scroll
   (js/industry-quote.js adds .hq-w spans), then who said it. Without JS the quote is simply shown in full. */
.hq{padding:96px 0 24px}
.hq__fig{max-width:940px;margin:0 auto}
.hq__q{margin:0;font-family:var(--head);font-size:clamp(26px,3.3vw,42px);font-weight:500;line-height:1.22;letter-spacing:-.025em;color:var(--n900);text-wrap:pretty}
.hq__q::before{content:"\201C"}
.hq__q::after{content:"\201D"}
.hq__q.is-split{color:var(--n300)}
.hq__q.is-split::before,.hq__q.is-done::after{color:var(--n900)}
.hq__q::after{transition:color .35s var(--ease)}
.hq-w{transition:color .35s var(--ease)}
.hq-w.is-on{color:var(--n900)}
.hq__by{display:flex;align-items:center;gap:14px;margin-top:40px;padding-top:28px;border-top:1px solid transparent;border-image:linear-gradient(90deg,var(--n200),rgba(229,229,229,0)) 1}
.hq__by>picture img,.hq__by>img:first-child{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none}
.hq__badge{width:52px;height:52px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--ink);color:var(--white);font-family:var(--head);font-weight:700;font-size:20px}
.hq__who{display:flex;flex-direction:column;line-height:1.3}
.hq__who b{font-size:16px}
.hq__who small{font-size:14px;color:var(--n500)}
.hq__who .stars{font-size:13px}
.hq__go{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:700;color:var(--orange-700);white-space:nowrap}
.hq__go svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.hq__go:hover svg{transform:translateX(3px)}
@media (max-width:760px){
  .hq{padding:64px 0 8px}
  .hq__by{flex-wrap:wrap;margin-top:28px;padding-top:22px}
  .hq__go{margin-left:66px}
}
@media (prefers-reduced-motion:reduce){.hq__q.is-split{color:var(--n900)}.hq-w{transition:none}}