/* Pro Pipes Plumbing: the home page reviews carousel (index.html only). Apex Solved, 7 Oct 2026.
   Loads after site.css and brand.css and leans on their tokens: the steel blue band, the white .card, the copper stars (palette C, 7 Oct).
   One markup, three states:
   1. No JavaScript (html.no-js): a plain row that scrolls sideways, cards snap to the gutter, no controls.
   2. JavaScript with "reduce motion" on (.is-native): the same row, plus arrows and dots that scroll it. Nothing drifts.
   3. JavaScript (.is-live): the row drifts on a loop, pauses on hover, focus and touch; arrows, dots, the arrow keys,
      a drag or a swipe all move it. */

.rvw{--rvw-card:min(380px,84vw);--rvw-gap:16px;--rvw-anchor:var(--gutter,16px);--rvw-fade:0px;margin-top:clamp(4px,1vw,8px)}
@media (min-width:720px){.rvw{--rvw-anchor:48px;--rvw-fade:40px}}

/* the row (states 1 and 2): a native sideways scroller */
.rvw-viewport{position:relative;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--rvw-anchor);-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.35) transparent}
.rvw-track{list-style:none;margin:0;display:flex;gap:var(--rvw-gap);width:max-content;min-width:100%;padding:4px var(--rvw-anchor) 12px}
.rvw-track>li{flex:0 0 var(--rvw-card);width:var(--rvw-card);scroll-snap-align:start}

/* state 3: the track moves by transform, the viewport clips, soft fades at the edges on wide screens
   (the fade lifts while the viewport has keyboard focus so the copper focus ring shows whole) */
.rvw.is-live .rvw-viewport{overflow:hidden;scroll-snap-type:none;touch-action:pan-y;cursor:grab}
.rvw.is-live .rvw-viewport:not(:focus-visible){-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--rvw-fade),#000 calc(100% - var(--rvw-fade)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--rvw-fade),#000 calc(100% - var(--rvw-fade)),transparent 100%)}
.rvw.is-live.is-dragging .rvw-viewport{cursor:grabbing}
.rvw.is-live .rvw-track{padding-left:0;padding-right:0;will-change:transform;user-select:none;-webkit-user-select:none}
.rvw.is-live .rvw-track>li{scroll-snap-align:none}

/* arrows and dots, under the row (hidden without JavaScript: site.css hides .js-only on html.no-js) */
.rvw-controls{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px;padding:0 var(--gutter,16px)}
.rvw-arrow{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:0;margin:0;border-radius:50%;border:2px solid rgba(255,255,255,.6);background:transparent;color:#fff;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.rvw-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.rvw-arrow:hover{background:#fff;color:var(--pipe,#1E3A5F);border-color:#fff}
.rvw-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:2px}
.rvw-dot{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;margin:0;border:0;border-radius:50%;background:transparent;cursor:pointer}
.rvw-dot::before{content:"";width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.45);transition:background .2s,transform .2s}
.rvw-dot:hover::before{background:rgba(255,255,255,.85)}
.rvw-dot[aria-current="true"]::before{background:var(--copper-light,#E08A45);transform:scale(1.3)}

/* under it: "Had Bryce out recently?", the one button to /review/ and the small Google link */
.rvw-cta{text-align:center;max-width:560px;margin:clamp(30px,5vw,44px) auto 0;padding-top:clamp(26px,4vw,36px);border-top:1px solid rgba(255,255,255,.18)}
.rvw-cta h3{color:#fff;font-size:clamp(1.45rem,2.6vw,1.9rem);margin:0 0 6px}
.rvw-cta p{margin:0 0 18px;color:rgba(255,255,255,.86)}
.rvw-cta .btn{min-width:220px}
.rvw-cta-alt{margin:16px 0 0;font-size:.95rem}
.rvw-cta-alt a{color:#fff}

@media (prefers-reduced-motion:reduce){.rvw-arrow,.rvw-dot::before{transition:none}}
@media print{
  .rvw-viewport{overflow:visible}
  .rvw-track{flex-wrap:wrap;width:auto;transform:none!important;padding:0}
  .rvw-controls,.rvw-track>li.is-clone{display:none!important}
}