/**
 * Testimonial Manager - front end.
 *
 * Everything themeable is a custom property, so a builder can restyle a grid
 * by setting variables inline rather than fighting selector specificity.
 */

/* Shared visual tokens. The modal is moved to <body>, so it sits outside
   .tm-grid and would otherwise resolve these to nothing - which is how the
   popup stars ended up black. The script copies the grid's own values over
   these defaults when a card opens the popup. */
.tm-grid,
.tm-modal,
.tm-slider {
	--tm-accent: #7a9a98;

	--tm-text-color: #33383d;
	--tm-name-color: #1f2d3a;
	--tm-role-color: #7b8792;

	--tm-star-color: var(--tm-accent);
	--tm-star-empty-color: #d8e3e2;
	--tm-star-size: 17px;
	--tm-star-gap: 3px;

	--tm-quote-mark-size: 44px;

	--tm-avatar-size: 44px;

	--tm-font: inherit;

	--tm-quote-size: 15px;
	--tm-quote-align: justify;
	--tm-quote-style: italic;
	--tm-quote-weight: 400;
	--tm-quote-lh: 1.62;
	--tm-quote-spacing: normal;

	--tm-name-size: 17px;
	--tm-name-weight: 500;
	--tm-name-lh: 1.3;
	--tm-name-spacing: normal;
	--tm-name-transform: none;

	--tm-role-size: 13px;
	--tm-role-weight: 400;
	--tm-role-lh: 1.35;
}

.tm-grid {
	--tm-cols: 3;
	--tm-cols-t: 2;
	--tm-cols-m: 1;
	--tm-gap: 24px;

	--tm-card-bg: #ffffff;
	--tm-card-border-color: #a9c6c4;
	--tm-card-border-width: 1px;
	--tm-card-radius: 2px;

	--tm-btn-bg: var(--tm-accent);
	--tm-btn-color: #ffffff;
	--tm-btn-border-color: var(--tm-accent);
	--tm-btn-bg-hover: #658b88;
	--tm-btn-color-hover: #ffffff;
	--tm-btn-border-hover: #658b88;
	--tm-btn-border-width: 1px;
	--tm-btn-radius: 2px;
	--tm-btn-padding: 14px 18px;
	--tm-btn-font-size: 14px;
	--tm-btn-weight: 500;
	--tm-btn-spacing: 0.06em;
	--tm-btn-transform: uppercase;
	--tm-card-shadow: none;

	--tm-card-padding: 26px;

	display: grid;
	grid-template-columns: repeat(var(--tm-active-cols, var(--tm-cols)), minmax(0, 1fr));
	gap: var(--tm-gap);
}

/* Laptop first, so the tablet and mobile rules below still override it. */
@media (max-width: 1300px) {
	.tm-grid { --tm-active-cols: var(--tm-cols-l, var(--tm-cols)); }
}

@media (max-width: 1024px) {
	.tm-grid { --tm-active-cols: var(--tm-cols-t); }
}

@media (max-width: 767px) {
	.tm-grid { --tm-active-cols: var(--tm-cols-m); }
}

/* ---------- Card ---------- */

.tm-card {
	display: flex;
	flex-direction: column;
	padding: var(--tm-card-padding);
	background: var(--tm-card-bg);
	border: var(--tm-card-border-width) solid var(--tm-card-border-color);
	border-radius: var(--tm-card-radius);
	box-shadow: var(--tm-card-shadow);
	font-family: var(--tm-font);
}

.tm-quote { margin: 0; }

/* ---------- Quote mark ----------
   Themes decorate a <blockquote> with their own large quote glyph, which lands
   behind the first words of the testimonial. It is switched off here and drawn
   by the plugin instead, so it is an option rather than a surprise. */
.tm-quote::before,
.tm-quote::after,
.tm-excerpt::before,
.tm-excerpt::after,
.tm-excerpt p::before,
.tm-excerpt p::after,
.tm-slide-quote::before,
.tm-slide-quote::after,
.tm-slide-quote p::before,
.tm-slide-quote p::after,
.tm-modal-quote::before,
.tm-modal-quote::after,
.tm-modal-quote p::before,
.tm-modal-quote p::after,
.tm-home-quote::before,
.tm-home-quote::after,
.tm-home-quote p::before,
.tm-home-quote p::after {
	content: none !important;
	display: none !important;
	background: none !important;
}

.tm-show-quote .tm-excerpt::before,
.tm-show-quote .tm-slide-quote::before,
.tm-show-quote .tm-modal-quote::before {
	content: '\201C' !important;
	display: block !important;
	color: var(--tm-quote-mark-color, var(--tm-accent));
	font-size: var(--tm-quote-mark-size, 44px);
	font-family: Georgia, 'Times New Roman', serif;
	font-style: normal;
	line-height: 0.9;
	margin-bottom: 6px;
}

.tm-excerpt {
	margin: 0;
	padding: 0;
	border: 0;
	quotes: none;
	color: var(--tm-text-color);
	font-style: var(--tm-quote-style);
	font-size: var(--tm-quote-size);
	font-weight: var(--tm-quote-weight);
	line-height: var(--tm-quote-lh);
	letter-spacing: var(--tm-quote-spacing);
	text-align: var(--tm-quote-align);
	hyphens: auto;
}

.tm-excerpt p { margin: 0; }

/* ---------- Stars ---------- */

.tm-stars {
	display: flex;
	gap: var(--tm-star-gap, 3px);
	margin-bottom: 18px;
}

.tm-star {
	width: var(--tm-star-size);
	height: var(--tm-star-size);
	flex: 0 0 auto;
	fill: var(--tm-star-empty-color);
}

.tm-star.is-on { fill: var(--tm-star-color); }

/* ---------- Client ---------- */

/* margin-top:auto pushes the client block and button to the bottom, so cards
   with different amounts of text still line their buttons up. */
.tm-person {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: auto;
	padding-top: 26px;
}

.tm-avatar {
	width: var(--tm-avatar-size);
	height: var(--tm-avatar-size);
	flex: 0 0 auto;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.tm-avatar-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tm-accent);
	color: #fff;
	font-size: calc(var(--tm-avatar-size) * 0.42);
	font-weight: 600;
	line-height: 1;
}

.tm-person-text {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.tm-grid .tm-card .tm-name,
.tm-modal .tm-modal-body .tm-name {
	margin: 0;
	padding: 0;
	color: var(--tm-name-color);
	font-size: var(--tm-name-size);
	font-weight: var(--tm-name-weight);
	line-height: var(--tm-name-lh);
	letter-spacing: var(--tm-name-spacing);
	text-transform: var(--tm-name-transform);
}

.tm-grid .tm-card .tm-name::before,
.tm-grid .tm-card .tm-name::after {
	content: none;
}

.tm-role {
	color: var(--tm-role-color);
	font-size: var(--tm-role-size);
	font-weight: var(--tm-role-weight);
	line-height: var(--tm-role-lh);
}

/* ---------- Button ---------- */

.tm-btn {
	display: block;
	width: 100%;
	margin-top: 22px;
	padding: var(--tm-btn-padding);
	background: var(--tm-btn-bg);
	color: var(--tm-btn-color);
	border: var(--tm-btn-border-width) solid var(--tm-btn-border-color);
	border-radius: var(--tm-btn-radius);
	font-family: inherit;
	font-size: var(--tm-btn-font-size);
	font-weight: var(--tm-btn-weight);
	letter-spacing: var(--tm-btn-spacing);
	text-transform: var(--tm-btn-transform);
	text-align: center;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* Every interactive state is pinned to the plugin's own colours. Themes
   commonly style button:focus and button:active, and :focus-visible does not
   match a mouse click, so a clicked button would otherwise keep the theme
   colour after the popup closed. */
.tm-grid .tm-card .tm-btn:hover,
.tm-grid .tm-card .tm-btn:focus,
.tm-grid .tm-card .tm-btn:focus-visible,
.tm-grid .tm-card .tm-btn:active {
	background: var(--tm-btn-bg-hover);
	color: var(--tm-btn-color-hover);
	border-color: var(--tm-btn-border-hover);
}

.tm-grid .tm-card .tm-btn:focus-visible,
.tm-modal-close:focus-visible {
	outline: 3px solid var(--tm-btn-bg, #7a9a98);
	outline-offset: 2px;
}

/* Keyboard focus stays visible; a mouse click does not leave a ring behind. */
.tm-grid .tm-card .tm-btn:focus:not(:focus-visible) {
	outline: none;
}

/* ---------- Modal ---------- */

.tm-modal {
	--tm-modal-max-width: 840px;
	--tm-modal-bg: #ffffff;
	--tm-modal-overlay: rgba(20, 30, 38, 0.72);
	--tm-modal-text-color: #33383d;
	--tm-modal-font-size: 16px;
	--tm-modal-radius: 2px;
	--tm-modal-padding: 38px;
	--tm-modal-close-bg: #7a9a98;
	--tm-modal-close-color: #ffffff;

	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 20px 20px;
}

.tm-modal[hidden] { display: none; }

.tm-modal-overlay {
	position: absolute;
	inset: 0;
	background: var(--tm-modal-overlay);
	animation: tm-fade 0.2s ease;
}

.tm-modal-dialog {
	position: relative;
	width: 100%;
	max-width: var(--tm-modal-max-width);
	max-height: calc(100vh - 68px);
	overflow-y: auto;
	padding: var(--tm-modal-padding);
	background: var(--tm-modal-bg);
	border-radius: var(--tm-modal-radius);
	color: var(--tm-modal-text-color);
	animation: tm-rise 0.22s ease;
}

.tm-modal-dialog:focus { outline: none; }

/* The popup is re-parented to <body>, where the theme's own button rules apply
   to it. These are forced so the close button stays a circle of the right
   size and colour whatever the active theme does to <button>. */
.tm-modal .tm-modal-close {
	position: absolute !important;
	top: var(--tm-close-top, 12px) !important;
	right: var(--tm-close-right, 12px) !important;
	left: var(--tm-close-left, auto) !important;
	bottom: auto !important;
	transform: var(--tm-close-transform, none) !important;
	z-index: 2;

	width: var(--tm-close-size, 40px) !important;
	height: var(--tm-close-size, 40px) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	flex: 0 0 auto !important;

	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	margin: 0 !important;
	padding: 0 !important;
	background: var(--tm-modal-close-bg, #7a9a98) !important;
	background-image: none !important;
	color: var(--tm-modal-close-color, #ffffff) !important;
	border: 0 !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	line-height: 1 !important;
	cursor: pointer;
	opacity: 1 !important;
}

.tm-modal .tm-modal-close svg {
	display: block !important;
	width: 45% !important;
	height: 45% !important;
	stroke: currentColor !important;
	fill: none !important;
}

.tm-modal .tm-modal-close:hover {
	filter: brightness(0.92);
}

/* Keep the stars and text clear of a corner-positioned close button. */
.tm-modal-body { padding-right: 34px; }

.tm-modal-body .tm-stars { margin-bottom: 20px; }

.tm-modal-quote {
	color: inherit;
	font-style: italic;
	font-size: var(--tm-modal-font-size);
	line-height: 1.7;
}

.tm-modal-quote p { margin: 0 0 1em; }
.tm-modal-quote p:last-child { margin-bottom: 0; }

.tm-modal-body .tm-person {
	margin-top: 26px;
	padding-top: 0;
}

.tm-modal-body .tm-name {
	color: var(--tm-name-color, #1f2d3a);
}

/* Set by the script while the modal is open. */
body.tm-modal-open { overflow: hidden; }

@keyframes tm-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes tm-rise {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.tm-modal-overlay,
	.tm-modal-dialog { animation: none; }
	.tm-btn { transition: none; }
}

@media (max-width: 767px) {
	.tm-modal { padding: 44px 14px 14px; }
	.tm-modal-dialog { padding: 26px 20px; }
	.tm-modal-body { padding-right: 26px; }
	.tm-excerpt { text-align: left; hyphens: manual; }
}

/* Only used when the theme does not already provide it. */
.tm-grid .screen-reader-text,
.tm-modal .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}


/* =========================================================
 * SLIDER
 * ========================================================= */

.tm-slider {
	--tm-slider-bg: rgba(18, 26, 32, 0.72);
	--tm-slider-color: #ffffff;
	--tm-slider-padding: 44px;
	--tm-slider-radius: 0px;
	--tm-slider-min-height: 0px;
	--tm-slider-quote-size: 19px;
	--tm-slider-quote-weight: 400;
	--tm-slider-quote-lh: 1.6;
	--tm-slider-quote-style: italic;
	--tm-slider-quote-align: left;
	--tm-slider-quote-spacing: normal;
	--tm-slider-role-size: 13px;
	--tm-slider-name-size: 18px;
	--tm-slider-name-weight: 500;
	--tm-slider-nav-color: #ffffff;
	--tm-slider-nav-bg: rgba(255, 255, 255, 0.14);
	--tm-slider-dot: rgba(255, 255, 255, 0.4);
	--tm-slider-dot-active: var(--tm-accent);

	/* The panel sits over a banner image, so white is the working default. */
	--tm-name-color: #ffffff;
	--tm-role-color: rgba(255, 255, 255, 0.75);

	position: relative;
	background: var(--tm-slider-bg);
	border-radius: var(--tm-slider-radius);
	color: var(--tm-slider-color);
}

.tm-slider-viewport {
	overflow: hidden;
	padding: var(--tm-slider-padding);
	min-height: var(--tm-slider-min-height);
}

/* Every slide occupies the same grid cell, so the track is as tall as the
   longest testimonial and swapping slides never changes the layout. */
.tm-slides {
	display: grid;
	align-items: start;
}

.tm-slide {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease, transform 0.5s ease;
	pointer-events: none;
}

.tm-slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.tm-effect-slide .tm-slide { transform: translateX(28px); }
.tm-effect-slide .tm-slide.is-active { transform: none; }

.tm-slide .tm-stars { margin-bottom: 20px; }

.tm-slide-quote {
	margin: 0 0 26px;
	padding: 0;
	border: 0;
	quotes: none;
	color: inherit;
	font-style: var(--tm-slider-quote-style);
	font-size: var(--tm-slider-quote-size);
	font-weight: var(--tm-slider-quote-weight);
	line-height: var(--tm-slider-quote-lh);
	text-align: var(--tm-slider-quote-align);
	letter-spacing: var(--tm-slider-quote-spacing);
}

.tm-slide-quote p { margin: 0; }

.tm-slide .tm-person {
	margin-top: 0;
	padding-top: 0;
}

.tm-slider .tm-name {
	color: var(--tm-name-color);
	font-size: var(--tm-slider-name-size);
	font-weight: var(--tm-slider-name-weight);
	line-height: 1.3;
}

.tm-slider .tm-role {
	color: var(--tm-role-color);
	font-size: var(--tm-slider-role-size, 13px);
}

/* ---------- Navigation ---------- */

/* Forced for the same reason as the popup close button: themes style <button>
   with their own min-width and padding, and a 50% radius on a box that is not
   square draws an ellipse rather than a circle. */
.tm-slider .tm-slider-nav {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 38px !important;
	height: 38px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--tm-slider-nav-bg) !important;
	background-image: none !important;
	color: var(--tm-slider-nav-color) !important;
	border: 0 !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	line-height: 1 !important;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.tm-slider-prev { left: 10px !important; right: auto !important; }
.tm-slider-next { right: 10px !important; left: auto !important; }

.tm-slider.tm-has-arrows .tm-slider-viewport {
	padding-left: calc(var(--tm-slider-padding) + 40px);
	padding-right: calc(var(--tm-slider-padding) + 40px);
}

.tm-slider-nav svg { width: 20px; height: 20px; }

.tm-slider .tm-slider-nav:hover { background: var(--tm-accent) !important; }

.tm-slider-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	padding: 0 0 18px;
}

.tm-slider .tm-slider-dot {
	display: block !important;
	width: 9px !important;
	height: 9px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--tm-slider-dot) !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	font-size: 0 !important;
	line-height: 0 !important;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.tm-slider .tm-slider-dot.is-active {
	background: var(--tm-slider-dot-active) !important;
	transform: scale(1.25);
}

.tm-slider-nav:focus-visible,
.tm-slider-dot:focus-visible {
	outline: 2px solid var(--tm-slider-color);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.tm-slide,
	.tm-slider-nav,
	.tm-slider-dot { transition: none; }
	.tm-effect-slide .tm-slide { transform: none; }
}

@media (max-width: 767px) {
	.tm-slider { --tm-slider-padding: 26px; --tm-slider-quote-size: 16px; }
	.tm-slider-nav { display: none; }
}


/* =========================================================
 * HOME TESTIMONIAL
 *
 * A wide tinted panel: oversized quote mark and client photo down the left,
 * testimonial and signature to their right, chevrons bottom right. It reuses
 * the slider's skeleton and script, so everything here is scoped to .tm-home
 * and the existing slider is untouched.
 * ========================================================= */

.tm-slider.tm-home {
	--tm-home-bg: #7ab3af;
	--tm-home-radius: 0px;
	/* Vertical and horizontal are separate: the chevrons anchor to the
	   vertical figure, and a two-value shorthand cannot be used for that. */
	--tm-home-pad-y: 67px;
	--tm-home-pad-x: 55px;
	--tm-home-min-height: 0px;

	/* Left column: wide enough for the quote mark and the photo below it. */
	--tm-home-col: 128px;
	--tm-home-col-gap: 26px;
	--tm-home-row-gap: 40px;

	--tm-home-mark-color: #ffffff;
	--tm-home-mark-size: 96px;
	--tm-home-mark-weight: 700;
	--tm-home-mark-img-width: 96px;

	--tm-home-quote-color: #ffffff;
	--tm-home-quote-size: 19px;
	--tm-home-quote-weight: 400;
	--tm-home-quote-lh: 1.62;
	--tm-home-quote-style: italic;
	--tm-home-quote-align: left;
	--tm-home-quote-spacing: normal;

	--tm-avatar-size: 92px;
	--tm-home-ring-color: #ffffff;
	--tm-home-ring-width: 3px;

	--tm-home-name-color: #ffffff;
	--tm-home-name-size: 17px;
	--tm-home-name-weight: 600;
	--tm-home-name-style: italic;
	--tm-home-name-lh: 1.5;
	--tm-home-role-size: 14px;

	--tm-home-nav-color: rgba(255, 255, 255, 0.65);
	--tm-home-nav-hover: #ffffff;
	--tm-home-nav-size: 30px;
	--tm-home-nav-gap: 48px;
	--tm-home-nav-bottom: 78px;
	--tm-home-nav-right: 48px;

	--tm-home-bg-image: none;
	--tm-home-bg-size: cover;
	--tm-home-bg-position: center;
	--tm-home-bg-repeat: no-repeat;
	--tm-home-bg-opacity: 1;

	background-color: var(--tm-home-bg);
	border-radius: var(--tm-home-radius);
	color: var(--tm-home-quote-color);
	overflow: hidden;
}

/* The background image is its own layer rather than a shorthand on the panel,
   so it can carry an opacity and let the colour show through behind it. */
.tm-slider.tm-home::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--tm-home-bg-image, none);
	background-size: var(--tm-home-bg-size, cover);
	background-position: var(--tm-home-bg-position, center);
	background-repeat: var(--tm-home-bg-repeat, no-repeat);
	opacity: var(--tm-home-bg-opacity, 1);
	pointer-events: none;
}

/* Content clears that layer. The chevrons are positioned, so they are lifted
   explicitly rather than by a blanket rule that would break their placement. */
.tm-slider.tm-home > .tm-slider-viewport { position: relative; z-index: 1; }
.tm-slider.tm-home .tm-home-nav { z-index: 2; }
.tm-slider.tm-home > .tm-slider-dots { position: relative; z-index: 2; }

.tm-slider.tm-home .tm-slider-viewport {
	padding: var(--tm-home-pad-y) var(--tm-home-pad-x);
	min-height: var(--tm-home-min-height);

	/* The track fills the panel, however tall the panel is told to be. */
	display: flex;
	flex-direction: column;
}

/*
 * Every slide is the full height of the track, and the signature row sits on
 * the floor of it.
 *
 * Slides share one grid cell, so the cell is as tall as the LONGEST
 * testimonial. Left top-aligned, a two-word review put its photo and name
 * near the top of that cell while the chevrons stayed at the bottom - the
 * shorter the review, the wider the gap. Stretching the slide and pushing the
 * signature to the bottom puts it on the same line for every slide, which is
 * the line the chevrons are on.
 */
.tm-slider.tm-home .tm-slides {
	flex: 1;
	align-items: stretch;
}

.tm-slider.tm-home .tm-slide { display: flex; }

.tm-slider.tm-home .tm-home-inner {
	flex: 1;
	align-content: space-between;
}

/* Two columns: the mark sits over the photo, the text over the signature, so
   both rows share one left edge without any hand-tuned offsets. */
.tm-home-inner {
	display: grid;
	grid-template-columns: var(--tm-home-col) minmax(0, 1fr);
	column-gap: var(--tm-home-col-gap);
	row-gap: var(--tm-home-row-gap);
	align-items: start;
}

.tm-home-mark {
	grid-column: 1;
	color: var(--tm-home-mark-color);
	font-size: var(--tm-home-mark-size);
	font-weight: var(--tm-home-mark-weight);
	font-style: normal;
	line-height: 0.78;
}

/* An uploaded mark replaces the glyph; it scales on its own width so the
   typographic size control does not silently distort it. */
.tm-home-mark-img {
	display: block;
	width: var(--tm-home-mark-img-width, 96px);
	max-width: 100%;
	height: auto;
}

.tm-home-rating { grid-column: 2; margin-bottom: -18px; }

.tm-slider.tm-home .tm-home-quote {
	grid-column: 2;
	margin: 0;
	padding: 0;
	border: 0;
	quotes: none;
	color: var(--tm-home-quote-color);
	font-size: var(--tm-home-quote-size);
	font-weight: var(--tm-home-quote-weight);
	font-style: var(--tm-home-quote-style);
	line-height: var(--tm-home-quote-lh);
	text-align: var(--tm-home-quote-align);
	letter-spacing: var(--tm-home-quote-spacing);
}

.tm-home-quote p { margin: 0; }

/* The signature row repeats the same column track, so the photo lines up
   under the quote mark and the name under the first line of text. */
.tm-home-person {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: var(--tm-home-col) minmax(0, 1fr);
	column-gap: var(--tm-home-col-gap);
	align-items: center;
}

.tm-slider.tm-home .tm-avatar {
	width: var(--tm-avatar-size);
	height: var(--tm-avatar-size);
	border-radius: 50%;
	object-fit: cover;
	background: #ffffff;
	box-shadow: 0 0 0 var(--tm-home-ring-width) var(--tm-home-ring-color);
}

.tm-slider.tm-home .tm-avatar-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
}

.tm-home-person-text { display: flex; flex-direction: column; }

.tm-slider.tm-home .tm-home-salutation,
.tm-slider.tm-home .tm-home-person-text .tm-name {
	color: var(--tm-home-name-color);
	font-size: var(--tm-home-name-size);
	font-weight: var(--tm-home-name-weight);
	font-style: var(--tm-home-name-style);
	line-height: var(--tm-home-name-lh);
}

.tm-slider.tm-home .tm-home-person-text .tm-role {
	color: var(--tm-role-color, rgba(255, 255, 255, 0.8));
	font-size: var(--tm-home-role-size);
}

/* ---------- Chevrons ----------
   Plain glyphs rather than the round buttons used by the banner slider, so
   the forced circle styling there has to be undone at higher specificity. */
.tm-home-nav {
	position: absolute;
	right: var(--tm-home-nav-right);
	bottom: var(--tm-home-nav-bottom);
	display: flex;
	align-items: center;
	gap: var(--tm-home-nav-gap);
}

/*
 * The chevrons line up with the signature row - the photo and the client's
 * name - at every width.
 *
 * A hand-set offset from the bottom of the panel cannot do that: the panel's
 * height moves with the length of the quote, so the row it is meant to match
 * moves with it. The signature row is the last thing in the panel, so the
 * bottom padding plus the photo's own height puts the chevrons on its centre
 * line wherever it lands, with no figure to keep re-tuning per breakpoint.
 */
.tm-slider.tm-home .tm-home-nav {
	bottom: var(--tm-home-pad-y);
	height: var(--tm-avatar-size);
	align-items: center;
}

.tm-slider.tm-home .tm-home-nav .tm-slider-nav {
	position: static !important;
	transform: none !important;
	width: var(--tm-home-nav-size) !important;
	height: var(--tm-home-nav-size) !important;
	background: none !important;
	border-radius: 0 !important;
	color: var(--tm-home-nav-color) !important;
	opacity: 1 !important;
	transition: color 0.2s ease !important;
}

.tm-slider.tm-home .tm-home-nav .tm-slider-nav:hover,
.tm-slider.tm-home .tm-home-nav .tm-slider-nav:focus-visible {
	color: var(--tm-home-nav-hover) !important;
}

.tm-slider.tm-home .tm-home-nav .tm-slider-nav svg {
	width: 100% !important;
	height: 100% !important;
}

/* ---------- Responsive ---------- */

/*
 * Laptop widths. The quote drops to 16px, and the space it used to leave
 * comes down with it: the mark is what set the height of that first row, so
 * a smaller mark and a tighter row gap close the band between the quote and
 * the signature rather than just moving it.
 */
@media (min-width: 1200px) and (max-width: 1368px) {
	.tm-slider.tm-home {
		--tm-home-pad-y: 50px;
		--tm-home-pad-x: 40px;
		--tm-home-col: 104px;
		--tm-home-col-gap: 22px;
		--tm-home-row-gap: 22px;
		--tm-home-mark-size: 72px;
		--tm-home-mark-img-width: 72px;
		--tm-home-quote-size: 16px;
		--tm-avatar-size: 82px;
		--tm-home-nav-right: 38px;
	}

	.tm-home-rating { margin-bottom: -14px; }
}

@media (max-width: 1024px) {
	.tm-slider.tm-home {
		--tm-home-pad-y: 50px;
		--tm-home-pad-x: 40px;
		--tm-home-col: 104px;
		--tm-home-mark-size: 76px;
		--tm-home-mark-img-width: 76px;
		--tm-home-quote-size: 18px;
		--tm-avatar-size: 78px;
		--tm-home-nav-right: 38px;
		--tm-home-nav-bottom: 66px;
	}
}

/* Below the phone breakpoint the two columns collapse: the mark, text and
   signature stack, and the chevrons move under the content rather than
   overlapping it. */
@media (max-width: 767px) {
	.tm-slider.tm-home {
		--tm-home-pad-y: 34px;
		--tm-home-pad-x: 26px;
		--tm-home-quote-size: 16px;
		--tm-home-row-gap: 18px;
		--tm-avatar-size: 66px;
		--tm-home-nav-size: 26px;
		--tm-home-nav-gap: 26px;
		--tm-home-nav-right: 26px;
	}

	/* The quote mark goes: on one column it sat on its own line and cost more
	   height than it earned. */
	.tm-slider.tm-home .tm-home-mark { display: none; }

	.tm-home-inner { grid-template-columns: minmax(0, 1fr); }
	.tm-home-rating,
	.tm-slider.tm-home .tm-home-quote { grid-column: 1; }

	/* The chevrons stay on the signature row here too, so they read against
	   the client's name. The row keeps clear of them rather than running
	   underneath. */
	.tm-home-person {
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 16px;
		padding-right: calc(
			( var(--tm-home-nav-size) * 2 ) + var(--tm-home-nav-gap)
			+ var(--tm-home-nav-right) - var(--tm-home-pad-x) + 14px
		);
	}
}