/* Testimonials marquee — Home. Cards are PLACEHOLDER content (see PLACEHOLDER-REGISTER). */
/* Two-class selectors: Elementor's own .s-* local styles print after this sheet. */
.s-testimonials .s-testimonials-marquee{
	width:100vw;
	max-width:100vw;
	margin-inline:calc(50% - 50vw);
	overflow-x:auto;
	overflow-y:hidden;
	scrollbar-width:none;
	-webkit-overflow-scrolling:touch;
	-webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);
	mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);
}
.s-testimonials .s-testimonials-marquee::-webkit-scrollbar{display:none;}
.s-testimonials .s-testimonials-track{
	width:max-content;
	max-width:none;
}
@media (prefers-reduced-motion:reduce){
	.s-testimonials .s-testimonials-marquee{-webkit-mask-image:none;mask-image:none;}
}

/* 17 Sep 2026: avatar variant replaces the photo — no card image left to size at ≤767. */

/* H2 carried no breakpoint (14 Sep 2026 audit): 56px on a phone while every other H2 is 28px. */
@media (max-width:1024px){html body .elementor .s-testimonials-h2{font-size:42px !important;}}
@media (max-width:767px){html body .elementor .s-testimonials-h2{font-size:28px !important;line-height:1.15 !important;}}

/* Header prev/next (17 Sep 2026): JS-inserted into testimonials-head, overlaid top-right
   so the eyebrow/H2 column keeps its own layout.
   Reuses the rail-arrow idiom's own CSS from bp-about.css (selector keys off
   [data-id$="-rail-prev"/"-rail-next"], loaded site-wide via bp-enqueue) — bp-testimonials.js
   sets that data-id on its own buttons, no rule duplicated here. Hidden ≤767: dots + native
   touch-swipe cover mobile, and the heading column has no room to spare beside 2×44px chips. */
html body .s-testimonials-head{position:relative;}
html body .bp-marquee-nav{position:absolute;bottom:0;right:0;display:flex;gap:12px;}
@media (max-width:767px){html body .bp-marquee-nav{display:none;}}

/* Quote mark heading on each card (17 Sep 2026 — client review: purely decorative, dropped). */
.s-t-card-1-mark,.s-t-card-2-mark,.s-t-card-3-mark,.s-t-card-4-mark{display:none;}

/* Controls row under the cards: dot navigation. */
html body .bp-marquee-controls{display:flex;align-items:center;justify-content:center;gap:20px;margin:24px auto 0;}
html body .bp-marquee-dots{display:flex;align-items:center;gap:6px;padding:0;margin:0;list-style:none;}
/* Each dot is always its pill footprint (20x12, radius 999) so nothing ever changes size/layout —
   clip-path reveals a centered circle at rest and the full pill when active. clip-path is a
   compositor-only property (like transform/opacity), so this stays off width/height per the
   design system's "hover stays quiet, transform/color only" rule while still rendering a true
   flat-sided pill rather than a scaleX() ellipse. Footprint narrowed from 30px and the flex gap
   from 10px (17 Sep 2026 — inactive dots read too far apart). 17 Sep 2026 (client review, round 2):
   rest color moved to Olive Green Shade 2 (#575E38, DESIGN.md palette) to keep visible contrast
   against the cream section ground. All three states carry !important: border because the
   resolved border-color was still Hello Elementor's default #CC3366, latent behind
   border-width:0 and one border-width rule away from showing as a pink ring; background/hover/
   active because Hello Elementor's own button defaults print after bp-* with their own
   !important, so without it the browser's native press state still flashed #CC3366 on tap/click. */
html body .bp-marquee-dot{width:20px;height:12px;padding:0;border:0 !important;border-radius:var(--radius-pill,50px);background:#DCE6DF !important;cursor:pointer;clip-path:circle(6px at 50% 50%);transition:background-color .3s,clip-path .3s;}
html body .bp-marquee-dot:hover,html body .bp-marquee-dot:active{background:var(--accent,#52815F) !important;}
html body .bp-marquee-dot[aria-current="true"]{background:var(--accent,#52815F) !important;clip-path:inset(0 round 999px);}
html body .bp-marquee-dot:focus-visible{outline:2px solid var(--accent,#52815F);outline-offset:3px;}