/* ==========================================================================
   MailSoar Reviews — front-end styles
   All the dials you'll want to tweak live in the :where(.ms-reviews) block
   below. Fonts are inherited from the theme on purpose.
   ========================================================================== */
:where(.ms-reviews){
	/* --- colours --- */
	--ms-rv-ink:#141414;          /* main text */
	--ms-rv-muted:#6b6b6b;        /* secondary / grey text */
	--ms-rv-border:#1d1d1d;       /* card outline + divider lines */
	--ms-rv-accent:#5fe3a1;       /* the green result pill */
	--ms-rv-stars:#f5821f;        /* star colour */
	--ms-rv-bar-bg:#f2eee3;       /* cream tab strip */
	--ms-rv-icon-bg:#111;         /* black rounded icon square */
	--ms-rv-icon-fg:#fff;         /* icon colour */
	--ms-rv-cs-link:#141414;      /* "Read the case study" link */
	--ms-rv-cs-rule:#e7e2d6;      /* the rule above it */

	/* --- shape + spacing --- */
	--ms-rv-card-radius:12px;
	--ms-rv-card-pad:26px 18px;   /* padding inside each card section */
	--ms-rv-gap:24px;             /* gap between cards */
	--ms-rv-icon-size:52px;
	--ms-rv-linkedin-icon-size:22px; /* small LinkedIn icon beside the contact name */
	--ms-rv-pill-radius:8px;
	--ms-rv-card-body-h:350px;    /* fixed height for the quote+footer section — never grows with a long quote */
	--ms-rv-card-quote-lines:4;   /* quote truncates with an ellipsis past this many lines, sized to leave room for the footer (and, on case-study cards, the "Read the case study" link) within the fixed body height above */

	/* --- carousel --- */
	--ms-rv-nav-size:40px;        /* the < > arrow buttons */
	--ms-rv-edge:56px;            /* room kept clear at each side for arrows */

	color:var(--ms-rv-ink);
	font-family:inherit;
	box-sizing:border-box;
}
:where(.ms-reviews) *,
:where(.ms-reviews) *::before,
:where(.ms-reviews) *::after{ box-sizing:border-box; }

/* ---------- the card ---------- */
.ms-review-card{
	display:flex;
	flex-direction:column;
	background:#fff;
	border:1px solid var(--ms-rv-border);
	border-radius:var(--ms-rv-card-radius);
	overflow:hidden;
}
.ms-review-card.is-hidden{ display:none; }
.ms-review-card p{ margin-bottom:0; }

.ms-review-card__head,
.ms-review-card__result{
	border-bottom:1px solid var(--ms-rv-border);
}
.ms-review-card__head,
.ms-review-card__result,
.ms-review-card__body{
	padding:var(--ms-rv-card-pad);
}

/* header row: company + icon */
.ms-review-card__head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
}
.ms-review-card__company{
	margin:0;
	font-size:clamp(1.25rem,1rem + 0.8vw,1.6rem);
	font-weight:800;
	line-height:1.15;
}
.ms-review-card__sector{
	color:var(--ms-rv-muted);
	font-size:.95rem;
}
.ms-review-card__icon{
	flex:0 0 var(--ms-rv-icon-size);
	width:var(--ms-rv-icon-size);
	height:var(--ms-rv-icon-size);
	display:inline-flex;
	align-items:center;
	justify-content:center;
	background:var(--ms-rv-icon-bg);
	color:var(--ms-rv-icon-fg);
	border-radius:10px;
	text-decoration:none;
}
.ms-review-card__icon svg{ width:55%; height:55%; }
.ms-review-card__icon--website svg{
	stroke:var(--ms-rv-icon-fg);   /* set via CSS, not an attribute */
	stroke-width:2;
	stroke-linecap:round;
	stroke-linejoin:round;
}

/* result row: 55% -> 99.1%  + metric */
.ms-review-card__result{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
}
.ms-review-card__stat{
	display:inline-flex;
	align-items:center;
	gap:12px;
	font-size:1.4rem;
	font-weight:800;
}
.ms-review-card__arrow{ font-weight:700; }
.ms-review-card__to{
	background:var(--ms-rv-accent);
	border-radius:var(--ms-rv-pill-radius);
	padding:4px 12px;
}
.ms-review-card__metric{
	margin:0;
	color:var(--ms-rv-muted);
	font-size:1rem;
}

/* body: quote + footer — fixed height so a long quote never grows the card */
.ms-review-card__body{
	display:flex;
	flex-direction:column;
	flex:0 0 auto;
	height:var(--ms-rv-card-body-h);
	overflow:hidden; /* belt-and-braces alongside the quote's own line-clamp below */
}
.ms-review-card__quote{
	margin:0 0 28px;
	padding:0;
	border:0;
	font-style:italic;
	font-weight:700;
	font-size:1.2rem;
	line-height:1.45;
	/* Fixed (not growing/shrinking) — see the matching comment on
	   .ms-review-grid-card__quote for why flex-shrink must be 0 here. */
	flex:0 0 auto;
	overflow:hidden;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:var(--ms-rv-card-quote-lines);
}
.ms-review-card__foot{
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:16px;
	margin-top:auto;
}
.ms-review-card__person{
	display:flex;
	align-items:center;
	gap:8px;
}
.ms-review-card__name{ margin:0; font-weight:700; }
.ms-review-card__role{ margin:2px 0 0; color:var(--ms-rv-muted); font-size:.95rem; }
.ms-review-card__linkedin{
	flex:0 0 var(--ms-rv-linkedin-icon-size);
	width:var(--ms-rv-linkedin-icon-size);
	height:var(--ms-rv-linkedin-icon-size);
	display:inline-flex;
	align-items:center;
	justify-content:center;
	background:var(--ms-rv-icon-bg);
	color:var(--ms-rv-icon-fg);
	border-radius:6px;
	text-decoration:none;
}
.ms-review-card__linkedin svg{ width:60%; height:60%; }
/* Same theme link-hover conflict as the slider's LinkedIn icon — invert instead. */
a.ms-review-card__linkedin.ms-review-card__linkedin:hover,
a.ms-review-card__linkedin.ms-review-card__linkedin:focus,
a.ms-review-card__linkedin.ms-review-card__linkedin:focus-visible,
a.ms-review-card__linkedin.ms-review-card__linkedin:active{
	background:#ffffff !important;
	color:var(--ms-rv-icon-bg) !important;
}
.ms-review-card__stars{
	color:var(--ms-rv-stars);
	font-size:1.25rem;
	letter-spacing:3px;
	white-space:nowrap;
}
/* Trustfolio-linked stars (a.ms-review-card__stars / a.ms-review-grid-card__stars /
   a.ms-review-slide__stars, added when the Trustfolio URL field is set) keep the
   same look as the plain, unlinked version rather than picking up link styling. */
a.ms-review-card__stars,
a.ms-review-grid-card__stars{
	display:inline-block;
	text-decoration:none;
	color:var(--ms-rv-stars);
	cursor:pointer;
}
a.ms-review-slide__stars{ cursor:pointer; }

/* Only on cards backed by a case study — a route through to the full write-up. */
.ms-review-card__cs-link{
	display:inline-flex;
	align-items:center;
	gap:8px;
	margin-top:18px;
	padding-top:16px;
	border-top:1px solid var(--ms-rv-cs-rule);
	color:var(--ms-rv-cs-link);
	font-weight:700;
	font-size:.95rem;
	text-decoration:none;
	width:100%;
}
.ms-review-card__cs-link:hover,
.ms-review-card__cs-link:focus-visible{ text-decoration:underline; }
.ms-review-card__cs-link svg{ flex:0 0 16px; transition:transform .15s ease; }
.ms-review-card__cs-link:hover svg{ transform:translateX(3px); }

/* ==========================================================================
   CAROUSEL layout
   ========================================================================== */
.ms-reviews--carousel{
	display:grid;
	grid-template-columns:1fr auto;
	grid-template-areas:
		"switch   switch"
		"filters  browse"
		"viewport viewport";
	row-gap:50px;
	align-items:center;
}

/* Explore by Industry / Explore by Issue toggle */
.ms-reviews__mode-switch{
	grid-area:switch;
	justify-self:center;
	display:inline-flex;
	align-items:center;
	gap:4px;
	background:var(--ms-rv-bar-bg);
	border-radius:999px;
	padding:6px;
}
.ms-reviews__mode{
	border:0;
	background:transparent;
	cursor:pointer;
	font:inherit;
	font-weight:600;
	font-size:.95rem;
	color:var(--ms-rv-muted);
	padding:12px 22px;
	border-radius:999px;
	white-space:nowrap;
	transition:background .15s ease,color .15s ease;
}
.ms-reviews__mode:hover{ color:#000; }
.ms-reviews__mode.is-active{
	background:var(--ms-rv-icon-bg);
	color:var(--ms-rv-icon-fg);
}

/* filter tabs */
.ms-reviews__filters{
	grid-area:filters;
	display:flex;
	align-items:center;
	justify-content:flex-start;
	border-top:1px solid #e7e2d6;
	border-bottom:1px solid #e7e2d6;
	min-height:60px;
	min-width:0; /* a grid item defaults to min-width:auto, which lets it grow to fit every filter button rather than clip+scroll them — this is what makes overflow-x below actually engage */
	overflow-x:auto;
	overflow-y:clip;
	scrollbar-width:none;
	-ms-overflow-style:none;
	cursor:grab; /* affordance for the click-and-drag scrolling ms-reviews.js adds — the hidden scrollbar leaves mouse users no other way to drag it */
}
.ms-reviews__filters::-webkit-scrollbar{ display:none; }
.ms-reviews__filters.is-dragging{ cursor:grabbing; }
.ms-reviews__filter-group{
	display:inline-flex;
	align-items:center;
	gap:6px;
	flex-shrink:0;
	margin-left:auto;
	padding-right:16px;
}
.ms-reviews__filter{
	border:0;
	background:transparent;
	cursor:pointer;
	font:inherit;
	color:#3a3a3a;
	padding:10px 18px;
	border-radius:999px;
	white-space:nowrap;
	transition:background .15s ease,color .15s ease;
}
.ms-reviews__filter:hover{ color:#000; }
.ms-reviews__filter.is-active{
	background:#111;
	color:#fff;
	font-weight:600;
}
.ms-reviews__filter-group.is-hidden{ display:none; }

/* no CTA button: centre the filter menu instead of hugging the right edge */
@media (min-width:1200px){
	.ms-reviews--no-cta .ms-reviews__filters{ justify-content:center; }
	.ms-reviews--no-cta .ms-reviews__filter-group{ margin-left:0; }
}

/* browse link */
.ms-reviews__browse{
	grid-area:browse;
	align-self:stretch;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	font-weight:700;
	color:var(--ms-rv-ink);
	text-decoration:none;
	white-space:nowrap;
	border-top:1px solid #e7e2d6;
	border-bottom:1px solid #e7e2d6;
	border-left:1px solid #e7e2d6;
	padding:0 24px;
}
.ms-reviews__browse:hover{ color:#000; text-decoration:none; }

@media (min-width:1200px){
	.ms-reviews__browse {
		background-color: #F5F1E5;
	}
}

/* the scrolling track + arrows */
.ms-reviews__viewport{
	grid-area:viewport;
	position:relative;
	padding:0 var(--ms-rv-edge);
	overflow-x:clip;
	max-width:100vw;
}
.ms-reviews__track{
	display:flex;
	gap:var(--ms-rv-gap);
	width:100%;
	overflow-x:auto;
	scroll-snap-type:x mandatory;
	scroll-behavior:smooth;
	scrollbar-width:none;
	-ms-overflow-style:none;
	padding-bottom:4px;
}
.ms-reviews__track::-webkit-scrollbar{ display:none; }

/* 2 cards on wide screens */
.ms-reviews__track .ms-review-card{
	flex:0 0 calc((100% - var(--ms-rv-gap)) / 2);
	min-width:0;
	scroll-snap-align:start;
}

.ms-reviews__nav{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	width:var(--ms-rv-nav-size);
	height:var(--ms-rv-nav-size);
	border-radius:50%;
	border:1px solid #d9d4c8;
	background:#f3efe6;
	color:#222;
	font-size:1.2rem;
	line-height:1;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:2;
	transition:opacity .15s ease;
}
.ms-reviews__nav--prev{ left:4px; }
.ms-reviews__nav--next{ right:4px; }
.ms-reviews__nav:disabled{ opacity:.35; cursor:default; }

/* ---------- carousel on 1199px and under: 1 card ---------- */
@media (max-width:1199px){
	.ms-reviews--carousel{
		grid-template-columns:1fr;
		grid-template-areas:
			"switch"
			"filters"
			"viewport"
			"browse";
		row-gap:24px;
	}

	.ms-reviews__mode-switch{ max-width:100%; overflow-x:auto; }

	.ms-reviews__filters{
		justify-content:flex-start;
		padding:0 16px;
		mask-image:linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 60px), transparent 100%);
		-webkit-mask-image:linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 60px), transparent 100%);
	}
	.ms-reviews__filter-group{ margin:0 auto; padding-right:0; }

	.ms-reviews__browse{
		justify-content:center;
		border-left:0;
		border-bottom:0;
		padding:14px 24px;
	}

	.ms-reviews__track .ms-review-card{ flex-basis:100%; max-width:100%; }
	.ms-reviews__viewport{ --ms-rv-edge:24px; }
}


/* ==========================================================================
   MOSAIC layout (a multi-column wall of cards)
   ========================================================================== */
.ms-reviews--mosaic{
	--ms-rv-cols:3;
	column-count:var(--ms-rv-cols);
	column-gap:var(--ms-rv-gap);
}
.ms-reviews--mosaic .ms-review-card{
	break-inside:avoid;
	margin:0 0 var(--ms-rv-gap);
}
@media (max-width:1199px){
	.ms-reviews--mosaic{ column-count:2; }
}
@media (max-width:768px){
	.ms-reviews--mosaic{ column-count:1; }
}

/* ==========================================================================
   GRID layout — a fixed-size block of 3 cards (e.g. a featured trio)
   ========================================================================== */
:where(.ms-reviews){
	--ms-rv-grid-card-w:411px;    /* fixed card width, desktop/tablet */
	--ms-rv-grid-card-h:402px;    /* fixed card height, desktop/tablet */
	--ms-rv-grid-card-radius:12px;
	--ms-rv-grid-card-pad:30px;
	--ms-rv-grid-icon-size:28px;
	--ms-rv-grid-quote-lines:7;   /* quote truncates with an ellipsis past this many lines, so a long one never outgrows the fixed card height */
}

.ms-reviews--grid{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:var(--ms-rv-gap);
}

.ms-review-grid-card{
	position:relative;
	display:flex;
	flex-direction:column;
	width:var(--ms-rv-grid-card-w);
	height:var(--ms-rv-grid-card-h);
	overflow:hidden; /* belt-and-braces: even if the quote clamp below ever falls short, content never spills past the fixed card height */
	background:#fff;
	border-radius:var(--ms-rv-grid-card-radius);
	padding:var(--ms-rv-grid-card-pad);
}
.ms-review-grid-card p{ margin:0; }
.ms-review-grid-card--linked{ cursor:pointer; }

/* Trustfolio-linked cards get a full-cover link behind everything else at
   z-index 1; the star rating and website icon stay independently clickable
   by sitting above it at z-index 2 — same pattern as the slider's
   case-study link (see .ms-review-slide__link below). */
.ms-review-grid-card__link{
	position:absolute;
	inset:0;
	z-index:1;
}
a.ms-review-grid-card__stars,
.ms-review-grid-card__icon{
	position:relative;
	z-index:2;
}

.ms-review-grid-card__stars{
	color:var(--ms-rv-stars);
	font-size:1.1rem;
	letter-spacing:3px;
	white-space:nowrap;
}
.ms-review-grid-card__company{
	margin-top:14px;
	color:var(--ms-rv-muted);
	font-size:1rem;
}
.ms-review-grid-card__quote{
	margin:18px 0 0;
	padding:0;
	border:0;
	font-style:italic;
	font-weight:700;
	font-size:1.15rem;
	line-height:1.4;
	/* Fixed (not growing/shrinking): a flex-shrink item gets squeezed shorter
	   than its own clamped box whenever the card runs short on space, which cuts
	   the last line off mid-letter instead of showing a clean line + ellipsis.
	   flex:0 0 auto keeps this box exactly as tall as its clamped content, and
	   .ms-review-grid-card's own overflow:hidden is the safety net if that ever
	   leaves too little room for the footer. */
	flex:0 0 auto;
	overflow:hidden;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:var(--ms-rv-grid-quote-lines);
}
.ms-review-grid-card__foot{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	margin-top:auto;
	padding-top:18px;
}
.ms-review-grid-card__person{
	display:flex;
	align-items:center;
	gap:10px;
	min-width:0;
}
.ms-review-grid-card__icon{
	flex:0 0 var(--ms-rv-grid-icon-size);
	width:var(--ms-rv-grid-icon-size);
	height:var(--ms-rv-grid-icon-size);
	display:inline-flex;
	color:var(--ms-rv-ink);
}
.ms-review-grid-card__icon svg{
	width:100%;
	height:100%;
	stroke:currentColor;
	stroke-width:1.5;
	stroke-linecap:round;
	stroke-linejoin:round;
}
.ms-review-grid-card__person-text{ min-width:0; }
.ms-review-grid-card__role{
	font-weight:700;
	color:var(--ms-rv-ink);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.ms-review-grid-card__name{
	margin-top:2px;
	color:var(--ms-rv-muted);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.ms-review-grid-card__sector{
	flex:0 0 auto;
	color:var(--ms-rv-muted);
	font-size:.8rem;
	letter-spacing:.06em;
	text-transform:uppercase;
	white-space:nowrap;
}

/* ---------- grid on mobile: fixed size gives way to a fluid, full-width card ---------- */
@media (max-width:768px){
	.ms-review-grid-card{
		width:100%;
		height:auto;
	}
}


/* ==========================================================================
   SLIDER layout — one review at a time, full width of the parent container
   ========================================================================== */
:where(.ms-reviews){
	--ms-rv-slide-bg:#fff;
	--ms-rv-slide-border:2px solid #000;
	--ms-rv-slide-radius:13.42px;
	--ms-rv-slide-pad:56px 32px;         /* vertical / horizontal */
	--ms-rv-slide-gap:28px;              /* between stars, quote and person */
	--ms-rv-slide-quote-size:1.5em;
	--ms-rv-slide-quote-max:800px;       /* the quote's own cap, inside the card */
	--ms-rv-slide-quote-lines:5;         /* quote truncates with an ellipsis past this many lines, so the card's height stays fixed instead of growing with a long quote */
	--ms-rv-slide-h:580px;               /* fixed card height — never grows regardless of quote/person content */
	--ms-rv-slide-stars-w:110px;
	--ms-rv-slide-stars-h:18px;
	--ms-rv-slide-linkedin-size:48px;    /* the black rounded LinkedIn square */
	--ms-rv-slide-linkedin-radius:10px;

	--ms-rv-slide-arrow-size:40px;       /* natural size of quote-sider-arrow.png */
	/* Each arrow straddles the card's border — half over the card, half outside
	   it. The half that hangs out needs somewhere to go, so the viewport keeps
	   exactly that much clear each side. */
	--ms-rv-slide-arrow-overhang:calc(var(--ms-rv-slide-arrow-size) / 2);

	/* dots */
	--ms-rv-slide-dots-gap:24px;         /* between the card and the dots */
	--ms-rv-slide-dot-size:5px;
	--ms-rv-slide-dot-active-w:22px;
	--ms-rv-slide-dot-color:#d8d2c4;
	--ms-rv-slide-dot-active-color:#141414;
}

.ms-reviews--slider{
	display:block;
	max-width:100%;
}

/* The padding is the arrows' outer half; the card fills what's left. */
.ms-reviews__slider-viewport{
	position:relative;
	padding:0 var(--ms-rv-slide-arrow-overhang);
}

/* The track is the scroll container; each slide snaps to full width. */
.ms-reviews__slider-track{
	display:flex;
	width:100%;
	overflow-x:auto;
	scroll-snap-type:x mandatory;
	scroll-behavior:smooth;
	scrollbar-width:none;
	-ms-overflow-style:none;
}
.ms-reviews__slider-track::-webkit-scrollbar{ display:none; }

.ms-review-slide{
	position:relative;
	flex:0 0 100%;
	width:100%;
	height:var(--ms-rv-slide-h);
	min-width:0;
	overflow:hidden; /* belt-and-braces alongside the quote's own line-clamp below */
	scroll-snap-align:start;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	text-align:center;
	gap:var(--ms-rv-slide-gap);
	background:var(--ms-rv-slide-bg);
	border:var(--ms-rv-slide-border);
	border-radius:var(--ms-rv-slide-radius);
	padding:var(--ms-rv-slide-pad);
}
.ms-review-slide p{ margin:0; }
/* The loop's duplicate slides: visible, but never a link target. */
.ms-review-slide--clone{ pointer-events:none; }
.ms-review-slide--linked{ cursor:pointer; }

/* Case-study slides get a full-cover link behind everything else at z-index 1;
   the LinkedIn/Trustfolio links and person block sit above it at z-index 2 so
   they stay independently clickable on hover rather than triggering the card link. */
.ms-review-slide__link{
	position:absolute;
	inset:0;
	z-index:1;
}
a.ms-review-slide__stars,
.ms-review-slide__person{
	position:relative;
	z-index:2;
}

.ms-review-slide__stars{
	display:block;
	width:var(--ms-rv-slide-stars-w);
	height:var(--ms-rv-slide-stars-h);
	background-image:url('../images/stars.png');
	background-repeat:no-repeat;
	background-position:center;
	background-size:contain;
}

.ms-review-slide__quote{
	margin:0;
	padding:0;
	border:0;
	font-style:italic;
	font-weight:700;
	font-size:var(--ms-rv-slide-quote-size);
	line-height:1.4;
	max-width:var(--ms-rv-slide-quote-max);
	/* flex-shrink:0 keeps this exactly as tall as its clamped content — without
	   it, a fixed-height flex column can squeeze the box shorter than the
	   clamp's own render height, cutting the last line off mid-letter instead
	   of showing a clean line + ellipsis (same fix as the grid card). */
	flex:0 0 auto;
	overflow:hidden;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:var(--ms-rv-slide-quote-lines);
}

.ms-review-slide__person{
	display:flex;
	align-items:center;
	gap:14px;
	text-align:left;
	min-width:0;
}
.ms-review-slide__linkedin{
	flex:0 0 var(--ms-rv-slide-linkedin-size);
	width:var(--ms-rv-slide-linkedin-size);
	height:var(--ms-rv-slide-linkedin-size);
	display:inline-flex;
	align-items:center;
	justify-content:center;
	background:var(--ms-rv-icon-bg);
	color:var(--ms-rv-icon-fg);
	border-radius:var(--ms-rv-slide-linkedin-radius);
	text-decoration:none;
}
.ms-review-slide__linkedin svg{ width:55%; height:55%; }
/* The theme's own link-hover styles recolour the icon (currentColor svg fill)
   without touching the still-dark background, making it invisible — invert
   instead of just re-asserting white-on-dark. Class doubled up to out-specificity
   theme hover rules that also carry !important, matching the same fix in
   ms-case-studies.css for .ms-case-studies__quote-linkedin. */
a.ms-review-slide__linkedin.ms-review-slide__linkedin:hover,
a.ms-review-slide__linkedin.ms-review-slide__linkedin:focus,
a.ms-review-slide__linkedin.ms-review-slide__linkedin:focus-visible,
a.ms-review-slide__linkedin.ms-review-slide__linkedin:active{
	background:#ffffff !important;
	color:var(--ms-rv-icon-bg) !important;
}
.ms-review-slide__role{ font-weight:700; }
.ms-review-slide__name{ margin-top:2px; color:var(--ms-rv-muted); font-size:.9rem; }

/* ---------- slider arrows, straddling the card border ---------- */
.ms-reviews__slider-arrow{
	position:absolute;
	top:50%;
	flex:0 0 auto;
	width:var(--ms-rv-slide-arrow-size);
	height:var(--ms-rv-slide-arrow-size);
	min-width:0;
	padding:0;
	background:url('../images/quote-sider-arrow.png') center / contain no-repeat;
	cursor:pointer;
	z-index:2;
	transition:opacity .15s ease;
	/* The theme's button styles otherwise paint a border/shadow over the icon. */
	border:0 !important;
	outline:0 !important;
	box-shadow:none !important;
	border-radius:50%;
}
.ms-reviews__slider-arrow:hover,
.ms-reviews__slider-arrow:focus,
.ms-reviews__slider-arrow:focus-visible,
.ms-reviews__slider-arrow:active{
	background:url('../images/quote-sider-arrow.png') center / contain no-repeat;
	border:0 !important;
	outline:0 !important;
	box-shadow:none !important;
}
.ms-reviews__slider-arrow:hover{ opacity:.8; }
.ms-reviews__slider-arrow:focus-visible{ outline:2px solid var(--ms-rv-ink) !important; outline-offset:3px; }

/* The one image serves both arrows — the back one is the same icon, turned. */
.ms-reviews__slider-arrow--next{
	right:var(--ms-rv-slide-arrow-overhang);
	transform:translate(50%,-50%);
}
.ms-reviews__slider-arrow--prev{
	left:var(--ms-rv-slide-arrow-overhang);
	transform:translate(-50%,-50%) rotate(180deg);
}

/* ---------- dots ---------- */
.ms-reviews__slider-dots{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	margin-top:var(--ms-rv-slide-dots-gap);
}
.ms-reviews__slider-dot{
	width:var(--ms-rv-slide-dot-size);
	height:3px;
	min-width:0;
	padding:0;
	background:var(--ms-rv-slide-dot-color);
	border-radius:999px;
	cursor:pointer;
	transition:width .2s ease,background .2s ease;
	border:0 !important;
	outline:0 !important;
	box-shadow:none !important;
}
.ms-reviews__slider-dot:hover,
.ms-reviews__slider-dot:focus,
.ms-reviews__slider-dot:focus-visible,
.ms-reviews__slider-dot:active{
	border:0 !important;
	outline:0 !important;
	box-shadow:none !important;
}
.ms-reviews__slider-dot:focus-visible{ outline:2px solid var(--ms-rv-ink) !important; outline-offset:4px; }
.ms-reviews__slider-dot.is-active{
	width:var(--ms-rv-slide-dot-active-w);
	background:var(--ms-rv-slide-dot-active-color);
}

/* ---------- slider on phones ---------- */
@media (max-width:768px){
	:where(.ms-reviews){
		--ms-rv-slide-pad:40px 24px;
		--ms-rv-slide-quote-size:1.25em;
		--ms-rv-slide-arrow-size:28px;
		--ms-rv-slide-linkedin-size:40px;
		--ms-rv-slide-h:480px; /* smaller fixed height to match the smaller padding/font at this breakpoint */
	}
}