/* ==========================================================================
   Prestige Detailing — testimonials (pd-testimonials)
   Figma 580:2698 (@1728): left, pd-text-block's head + rule + text in a 580 column,
   48px prev/next 36 below the text (rest 27:2043 white 8%, hover 27:2047 red); right, 462 × 560 quote cards from 130px past the column,
   running to the screen edge. The rule runs to the LEFT screen edge.
   The left column is pd-text-block's markup; its rules are carried in this sheet (self-contained).
   Rendered inside #wrap_all, so every rule is paired: ".pd-tm .x" + "#top #wrap_all .pd-tm .x".
   Vendor sheet (css/vendor/splide-core.min.css) loads first; pre-mount rules sit behind
   .pd-tm:not(.pd-tm--ready) so the two cannot fight.
   ========================================================================== */

@property --pd-fb       { syntax: "<number>"; inherits: true;  initial-value: 0; }
@property --pd-nav-tt   { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --pd-nav-tb   { syntax: "<length>"; inherits: false; initial-value: 0px; }

/* ---------- Tokens (ramps: 375 → 1728) ---------- */
.pd-tm {
	/* Shared site tokens — same values as pd-main-nav / pd-text-block */
	--pd-nav-font: "Google Sans Flex", "Google Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--pd-cap: 0.71875;
	--pd-asc: 0.966;
	--pd-desc: 0.286;

	--pd-tm-white: #fff;
	--pd-tm-red: #d60c0c;
	--pd-tm-card-bg: #242222;
	--pd-tm-line: rgba(255, 255, 255, 0.2);                              /* card border */
	--pd-tm-soft: rgba(255, 255, 255, 0.08);                             /* arrows at rest */
	--pd-tm-dim: rgba(255, 255, 255, 0.72);                              /* role */

	--pd-tm-text-w: 580px;                                                /* left column (weight) */
	--pd-tm-cards-w: 698px;                                               /* 1408 − 580 − 130 (weight) */
	--pd-tm-col-gap: clamp(48px, calc(25.27px + 6.0606vw), 130px);
	--pd-tm-stack-gap: 48px;                                              /* stacked: intro → cards */
	--pd-tm-arrows-gap: clamp(28px, calc(25.78px + 0.5913vw), 36px);      /* text → arrows */
	--pd-tm-btn: clamp(40px, calc(37.783px + 0.5913vw), 48px);
	--pd-tm-btn-gap: 8px;
	--pd-tm-icon: 24px;

	--pd-tm-card: min(clamp(300px, calc(255.1px + 11.973vw), 462px), 84vw);
	--pd-tm-overlap: 2px;                                                 /* cards 462 wide, 460 apart */
	--pd-tm-px: clamp(24px, calc(15.131px + 2.3651vw), 56px);
	--pd-tm-py: clamp(32px, calc(23.131px + 2.3651vw), 64px);
	--pd-tm-quote-gap: clamp(48px, calc(34.696px + 3.5477vw), 96px);      /* quote → author (min) */
	--pd-tm-corner: 8px;
	--pd-tm-corner-w: 2px;
	--pd-tm-quote-fs: clamp(18px, calc(16.89px + 0.2956vw), 22px);        /* Body_lg 22/32 */
	--pd-tm-quote-lh: clamp(28px, calc(26.89px + 0.2956vw), 32px);
	--pd-tm-name-fs: clamp(16px, calc(15.45px + 0.1478vw), 18px);         /* Body_md 18/28 */
	--pd-tm-name-lh: clamp(24px, calc(22.89px + 0.2956vw), 28px);
	--pd-tm-role-fs: clamp(14px, calc(13.446px + 0.14782vw), 16px);       /* Body_sm 16/24 */
	--pd-tm-role-lh: clamp(22px, calc(21.446px + 0.14782vw), 24px);
	--pd-tm-who-gap: clamp(8px, calc(6.89px + 0.2956vw), 12px);           /* name → role */
	--pd-tm-photo: clamp(56px, calc(53.783px + 0.59128vw), 64px);
	--pd-tm-author-gap: 16px;

	/* Distance from the root to the screen edges — written inline by the script (0 without it) */
	--pd-tm-bl: 0px;
	--pd-tm-br: 0px;

	/* Margins: inline --pd-tm-mt / --pd-tm-mb from the panel; the ramp only writes -now */
	--pd-tm-mt-now: var(--pd-tm-mt, 0px);
}

.pd-tm.pd-tm--bleed {
	--pd-tm-bl: var(--pd-tm-bleed-l, 0px);
	--pd-tm-br: var(--pd-tm-bleed-r, 0px);
}

@media (max-width: 1199px) {
	.pd-tm.pd-tm--scale { --pd-tm-mt-now: calc(var(--pd-tm-mt, 0px) * 0.75); }
}
@media (max-width: 899px) {
	.pd-tm.pd-tm--scale { --pd-tm-mt-now: calc(var(--pd-tm-mt, 0px) * 0.6); }
}

/* ---------- Cap trim (text-box) with a metric fallback — same as pd-main-nav / pd-text-block ---------- */
.pd-tm .pd-nav-t,
#top #wrap_all .pd-tm .pd-nav-t {
	display: block;
	--pd-nav-tt: calc(var(--pd-fb) * ((var(--lh) - (var(--pd-asc) + var(--pd-desc)) * var(--fs)) / 2 + (var(--pd-asc) - var(--pd-cap)) * var(--fs)));
	--pd-nav-tb: calc(var(--pd-fb) * ((var(--lh) - (var(--pd-asc) + var(--pd-desc)) * var(--fs)) / 2 + var(--pd-desc) * var(--fs)));
	font-size: var(--fs);
	line-height: var(--lh);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	text-box: trim-both cap alphabetic;
	margin-top: calc(-1 * var(--pd-nav-tt));
	margin-bottom: calc(-1 * var(--pd-nav-tb));
}

@supports not ((text-box: trim-both cap alphabetic) or (text-box-trim: trim-both)) {
	.pd-tm { --pd-fb: 1; }
}

/* ---------- Left column: pd-text-block's rules, carried here (v1.0.1) ----------
   A copy of pd-text-block.css scoped to .pd-tm, so this widget never depends on a sibling
   stylesheet being current on the server (same fix as pd-quote-cta / pd-blog / pd-stat).
   Tick list and button rules are left out: this widget renders neither.
   validate.php asserts every rule here matches pd-text-block.css declaration for declaration. */

.pd-tm .pd-tb {
	--pd-nav-white: #fff;
	--pd-nav-font: "Google Sans Flex", "Google Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--pd-cap: 0.71875;
	--pd-asc: 0.966;
	--pd-desc: 0.286;
	--pd-tb-ink: 255, 255, 255;
	--pd-tb-w: 580px;
	--pd-tb-l1-fs: clamp(24px, calc(21.78px + 0.5913vw), 32px);
	--pd-tb-l2-fs: clamp(32px, calc(27.57px + 1.1826vw), 48px);
	--pd-tb-l2-lh: clamp(32px, calc(28.67px + 0.8869vw), 44px);
	--pd-tb-title-gap: clamp(8px, calc(6.89px + 0.2956vw), 12px);
	--pd-tb-rule-gap: clamp(32px, calc(29.78px + 0.5913vw), 40px);
	--pd-tb-text-fs: clamp(16px, calc(15.45px + 0.1478vw), 18px);
	--pd-tb-text-lh: clamp(24px, calc(22.89px + 0.2956vw), 28px);
	--pd-tb-lg-fs: clamp(18px, calc(16.89px + 0.2956vw), 22px);
	--pd-tb-lg-lh: clamp(28px, calc(26.89px + 0.2956vw), 32px);
	--pd-tb-block-gap: clamp(40px, calc(33.35px + 1.7738vw), 64px);
	--pd-tb-checks-gap: clamp(24px, calc(21.78px + 0.5913vw), 32px);
	--pd-tb-item-gap: clamp(28px, calc(25.78px + 0.5913vw), 36px);
	--pd-tb-li-gap: 4px;
	--pd-tb-indent: 27px;
	--pd-tb-tick: 40px;
	--pd-tb-tick-icon: 24px;
	--pd-tb-tick-gap: 16px;
	--pd-tb-para-gap: calc(2 * var(--pd-tb-text-lh) - var(--pd-cap) * var(--pd-tb-text-fs));
	--pd-tb-gw: calc(min(var(--pd-tb-w), 100vw - 32px) * 0.25);
	--pd-tb-mt-now: var(--pd-tb-mt, 0px);
}

.pd-tm .pd-tb .pd-nav-t,
.pd-tm .pd-tb .pd-tb__text > p,
.pd-tm .pd-tb .pd-tb__text > :is(h2, h3, h4, h5, h6),
#top #wrap_all .pd-tm .pd-tb .pd-nav-t,
#top #wrap_all .pd-tm .pd-tb .pd-tb__text > p,
#top #wrap_all .pd-tm .pd-tb .pd-tb__text > :is(h2, h3, h4, h5, h6) {
	display: block;
	--pd-nav-tt: calc(var(--pd-fb) * ((var(--lh) - (var(--pd-asc) + var(--pd-desc)) * var(--fs)) / 2 + (var(--pd-asc) - var(--pd-cap)) * var(--fs)));
	--pd-nav-tb: calc(var(--pd-fb) * ((var(--lh) - (var(--pd-asc) + var(--pd-desc)) * var(--fs)) / 2 + var(--pd-desc) * var(--fs)));
	font-size: var(--fs);
	line-height: var(--lh);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
	text-box: trim-both cap alphabetic;
	margin-top: calc(-1 * var(--pd-nav-tt));
	margin-bottom: calc(-1 * var(--pd-nav-tb));
}

.pd-tm .pd-tb .pd-tb__text > :is(ul, ol) > li:first-child,
#top #wrap_all .pd-tm .pd-tb .pd-tb__text > :is(ul, ol) > li:first-child {
	--pd-nav-tt: calc(var(--pd-fb) * ((var(--lh) - (var(--pd-asc) + var(--pd-desc)) * var(--fs)) / 2 + (var(--pd-asc) - var(--pd-cap)) * var(--fs)));
	text-box-trim: trim-start;
	text-box-edge: cap alphabetic;
	text-box: trim-start cap alphabetic;
	margin-top: calc(-1 * var(--pd-nav-tt));
}

.pd-tm .pd-tb .pd-tb__text > :is(ul, ol) > li:last-child,
#top #wrap_all .pd-tm .pd-tb .pd-tb__text > :is(ul, ol) > li:last-child {
	--pd-nav-tb: calc(var(--pd-fb) * ((var(--lh) - (var(--pd-asc) + var(--pd-desc)) * var(--fs)) / 2 + var(--pd-desc) * var(--fs)));
	text-box-trim: trim-end;
	text-box-edge: cap alphabetic;
	text-box: trim-end cap alphabetic;
	margin-bottom: calc(-1 * var(--pd-nav-tb));
}

.pd-tm .pd-tb .pd-tb__text > :is(ul, ol) > li:only-child,
#top #wrap_all .pd-tm .pd-tb .pd-tb__text > :is(ul, ol) > li:only-child {
	text-box-trim: trim-both;
	text-box: trim-both cap alphabetic;
}

.pd-tm .pd-tb,
#top #wrap_all .pd-tm .pd-tb {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	row-gap: var(--pd-tb-rule-gap);
	box-sizing: border-box;
	width: 100%;
	margin-top: var(--pd-tb-mt-f, var(--pd-tb-mt-now));
	margin-bottom: var(--pd-tb-mb, 0px);
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	color: rgb(var(--pd-tb-ink));
	font-family: var(--pd-nav-font);
	font-size: var(--pd-tb-text-fs);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}

.pd-tm .pd-tb *,
#top #wrap_all .pd-tm .pd-tb * {
	box-sizing: border-box;
}

.pd-tm .pd-tb .pd-tb__col,
#top #wrap_all .pd-tm .pd-tb .pd-tb__col {
	width: min(var(--pd-tb-w), 100%);
	margin-top: 0;
	margin-bottom: 0;
	margin-left: auto;
	margin-right: 0;
}

.pd-tm .pd-tb.pd-tb--left .pd-tb__col,
#top #wrap_all .pd-tm .pd-tb.pd-tb--left .pd-tb__col {
	margin-left: 0;
	margin-right: auto;
}

.pd-tm .pd-tb .pd-tb__head,
.pd-tm .pd-tb .pd-tb__title,
#top #wrap_all .pd-tm .pd-tb .pd-tb__head,
#top #wrap_all .pd-tm .pd-tb .pd-tb__title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: var(--pd-tb-title-gap);
}

.pd-tm .pd-tb .pd-tb__title,
#top #wrap_all .pd-tm .pd-tb .pd-tb__title {
	width: 100%;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	font-family: var(--pd-nav-font);
	font-size: var(--pd-tb-l2-fs);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: rgb(var(--pd-tb-ink));
	overflow-wrap: break-word;
}

.pd-tm .pd-tb .pd-tb__main,
#top #wrap_all .pd-tm .pd-tb .pd-tb__main {
	--fs: var(--pd-tb-l2-fs);
	--lh: var(--pd-tb-l2-lh);
	max-width: 100%;
	font-weight: 700;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	color: rgb(var(--pd-tb-ink));
}

.pd-tm .pd-tb .pd-tb__sub,
#top #wrap_all .pd-tm .pd-tb .pd-tb__sub {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	column-gap: 4px;
	row-gap: var(--pd-tb-title-gap);
	max-width: 100%;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	font-family: var(--pd-nav-font);
	font-size: var(--pd-tb-l1-fs);
	font-weight: 400;
	line-height: 1;
	white-space: normal;
	color: rgb(var(--pd-tb-ink));
}

.pd-tm .pd-tb .pd-tb__accent,
#top #wrap_all .pd-tm .pd-tb .pd-tb__accent {
	--fs: var(--pd-tb-l1-fs);
	--lh: var(--pd-tb-l1-fs);
	max-width: 100%;
	font-weight: 400;
	letter-spacing: -0.03em;
	text-transform: uppercase;
}

.pd-tm .pd-tb .pd-tb__grad,
#top #wrap_all .pd-tm .pd-tb .pd-tb__grad {
	background-image: linear-gradient(90deg, rgba(var(--pd-tb-ink), 0.4) 0, rgb(var(--pd-tb-ink)) var(--pd-tb-gw));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.pd-tm .pd-tb .pd-tb__note,
#top #wrap_all .pd-tm .pd-tb .pd-tb__note {
	--fs: var(--pd-tb-text-fs);
	--lh: var(--pd-tb-text-lh);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: rgba(var(--pd-tb-ink), 0.64);
}

.pd-tm .pd-tb .pd-tb__rule,
#top #wrap_all .pd-tm .pd-tb .pd-tb__rule {
	display: block;
	flex: none;
	width: 100%;
	height: 1px;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	background-color: rgba(var(--pd-tb-ink), 0.4);
}

.pd-tm .pd-tb .pd-tb__body,
#top #wrap_all .pd-tm .pd-tb .pd-tb__body {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	row-gap: var(--pd-tb-block-gap);
}

.pd-tm .pd-tb .pd-tb__text,
#top #wrap_all .pd-tm .pd-tb .pd-tb__text {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	row-gap: var(--pd-tb-para-gap);
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	--fs: var(--pd-tb-text-fs);
	--lh: var(--pd-tb-text-lh);
	font-family: var(--pd-nav-font);
	font-size: var(--pd-tb-text-fs);
	line-height: var(--pd-tb-text-lh);
	font-weight: 400;
	letter-spacing: 0;
	color: rgba(var(--pd-tb-ink), 0.72);
	overflow-wrap: break-word;
}

.pd-tm .pd-tb .pd-tb__text > p,
#top #wrap_all .pd-tm .pd-tb .pd-tb__text > p {
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
	color: rgba(var(--pd-tb-ink), 0.72);
	font-family: var(--pd-nav-font);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.pd-tm .pd-tb .pd-tb__text > :is(h2, h3, h4, h5, h6),
#top #wrap_all .pd-tm .pd-tb .pd-tb__text > :is(h2, h3, h4, h5, h6) {
	--fs: var(--pd-tb-lg-fs);
	--lh: var(--pd-tb-lg-lh);
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
	color: rgb(var(--pd-tb-ink));
	font-family: var(--pd-nav-font);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.pd-tm .pd-tb .pd-tb__text > :is(ul, ol),
#top #wrap_all .pd-tm .pd-tb .pd-tb__text > :is(ul, ol) {
	display: block;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: var(--pd-tb-indent);
	padding-right: 0;
	list-style-type: disc;
	list-style-position: outside;
	color: rgba(var(--pd-tb-ink), 0.72);
}

.pd-tm .pd-tb .pd-tb__text > ol,
#top #wrap_all .pd-tm .pd-tb .pd-tb__text > ol {
	list-style-type: decimal;
}

.pd-tm .pd-tb .pd-tb__text > :is(ul, ol) > li,
#top #wrap_all .pd-tm .pd-tb .pd-tb__text > :is(ul, ol) > li {
	--fs: var(--pd-tb-text-fs);
	--lh: var(--pd-tb-text-lh);
	display: list-item;
	margin-top: 0;
	margin-bottom: var(--pd-tb-li-gap);
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	font-size: var(--fs);
	line-height: var(--lh);
	color: inherit;
	list-style-type: inherit;
}

.pd-tm .pd-tb .pd-tb__text :is(strong, b),
#top #wrap_all .pd-tm .pd-tb .pd-tb__text :is(strong, b) {
	font-weight: 700;
	color: rgb(var(--pd-tb-ink));
}

.pd-tm .pd-tb .pd-tb__text a,
#top #wrap_all .pd-tm .pd-tb .pd-tb__text a {
	color: rgb(var(--pd-tb-ink));
	text-decoration-line: underline;
	text-underline-offset: 0.15em;
	border-bottom-width: 0;
}

.pd-tm .pd-tb .pd-tb__text a:hover,
.pd-tm .pd-tb .pd-tb__text a:focus-visible,
#top #wrap_all .pd-tm .pd-tb .pd-tb__text a:hover,
#top #wrap_all .pd-tm .pd-tb .pd-tb__text a:focus-visible {
	color: rgb(var(--pd-tb-ink));
	text-decoration-line: none;
}

/* ---------- end of the pd-text-block copy ---------- */

/* ---------- Root: text column | cards ---------- */
.pd-tm,
#top #wrap_all .pd-tm {
	display: grid;
	grid-template-columns: minmax(0, 580fr) minmax(0, 698fr);
	column-gap: var(--pd-tm-col-gap);
	row-gap: var(--pd-tm-stack-gap);
	align-items: start;
	box-sizing: border-box;
	width: 100%;
	margin-top: var(--pd-tm-mt-f, var(--pd-tm-mt-now));
	margin-bottom: var(--pd-tm-mb, 0px);
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	color: var(--pd-tm-white);
	font-family: var(--pd-nav-font);
	-webkit-font-smoothing: antialiased;
}

.pd-tm.pd-tm--empty,
#top #wrap_all .pd-tm.pd-tm--empty {
	grid-template-columns: minmax(0, 1fr);
}

/* Stacked below 1024: intro, then the cards */
@media (max-width: 1023px) {
	.pd-tm,
	#top #wrap_all .pd-tm {
		grid-template-columns: minmax(0, 1fr);
	}
}

.pd-tm *,
#top #wrap_all .pd-tm * {
	box-sizing: border-box;
}

/* ---------- Intro: pd-text-block + arrows ---------- */
.pd-tm .pd-tm__intro,
#top #wrap_all .pd-tm .pd-tm__intro {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	row-gap: var(--pd-tm-arrows-gap);
	min-width: 0;
}

/* The nested text block fills the column; its own margins are panel-less here */
.pd-tm .pd-tm__intro .pd-tb,
#top #wrap_all .pd-tm .pd-tm__intro .pd-tb {
	margin-top: 0;
	margin-bottom: 0;
}

/* The rule runs on to the left screen edge */
.pd-tm .pd-tm__intro .pd-tb .pd-tb__rule,
#top #wrap_all .pd-tm .pd-tm__intro .pd-tb .pd-tb__rule {
	width: calc(100% + var(--pd-tm-bl));
	margin-left: calc(-1 * var(--pd-tm-bl));
}

.pd-tm .pd-tm__arrows,
#top #wrap_all .pd-tm .pd-tm__arrows {
	display: flex;
	align-items: center;
	column-gap: var(--pd-tm-btn-gap);
	width: min(var(--pd-tm-text-w), 100%);
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
}

.pd-tm .pd-tm__arrow,
#top #wrap_all .pd-tm .pd-tm__arrow {
	-webkit-appearance: none;
	appearance: none;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--pd-tm-btn);
	height: var(--pd-tm-btn);
	min-width: 0;
	min-height: 0;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	border-width: 0;
	border-style: none;
	border-radius: 0;
	box-shadow: none;
	background-image: none;
	background-color: var(--pd-tm-soft);   /* both at rest: white 8% (Figma 27:2043) */
	color: var(--pd-tm-white);
	line-height: 0;
	cursor: pointer;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}

/* Hover / keyboard focus: both arrows red (Figma 27:2047). Not gated on (hover: hover) — see project doc. */
.pd-tm .pd-tm__arrow:hover:not(:disabled),
#top #wrap_all .pd-tm .pd-tm__arrow:hover:not(:disabled) {
	background-color: var(--pd-tm-red);
}

.pd-tm .pd-tm__arrow:focus-visible,
#top #wrap_all .pd-tm .pd-tm__arrow:focus-visible {
	background-color: var(--pd-tm-red);
}

.pd-tm .pd-tm__arrow:focus-visible,
#top #wrap_all .pd-tm .pd-tm__arrow:focus-visible {
	outline: 2px solid var(--pd-tm-white);
	outline-offset: 2px;
}

.pd-tm .pd-tm__arrow:disabled,
#top #wrap_all .pd-tm .pd-tm__arrow:disabled {
	opacity: 0.4;
	cursor: default;
}

/* The exported lucide chevron (white), as an <img> */
.pd-tm .pd-tm__chev,
#top #wrap_all .pd-tm .pd-tm__chev {
	display: block;
	flex: 0 0 auto;
	width: var(--pd-tm-icon);
	height: var(--pd-tm-icon);
	max-width: none;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	border-width: 0;
	border-radius: 0;
	box-shadow: none;
	pointer-events: none;
}

.pd-tm .pd-tm__arrow--prev .pd-tm__chev,
#top #wrap_all .pd-tm .pd-tm__arrow--prev .pd-tm__chev {
	transform: rotate(180deg);
}

/* ---------- Stage: the carousel, running on to the right screen edge ---------- */
.pd-tm .pd-tm__stage,
#top #wrap_all .pd-tm .pd-tm__stage {
	min-width: 0;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: calc(-1 * var(--pd-tm-br));
}

.pd-tm .pd-tm__list,
#top #wrap_all .pd-tm .pd-tm__list {
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	list-style-type: none;
}

/* Each slide is one card minus the overlap; the card hangs 2px into the next slide,
   which paints over it, so neighbours share one border line (Figma: 462 wide, 460 apart). */
.pd-tm .pd-tm__slide,
#top #wrap_all .pd-tm .pd-tm__slide {
	width: calc(var(--pd-tm-card) - var(--pd-tm-overlap));
	margin-left: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	list-style-type: none;
}

/* ---------- Card ---------- */
.pd-tm .pd-tm__card,
#top #wrap_all .pd-tm .pd-tm__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	row-gap: var(--pd-tm-quote-gap);
	width: var(--pd-tm-card);
	height: 100%;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding-top: var(--pd-tm-py);
	padding-right: var(--pd-tm-px);
	padding-bottom: var(--pd-tm-py);
	padding-left: var(--pd-tm-px);
	background-color: var(--pd-tm-card-bg);
	box-shadow: inset 0 0 0 1px var(--pd-tm-line);   /* Figma's inside stroke: takes no space */
}

/* Corner ticks: an 8px L at each corner, 2px thick, over the border */
.pd-tm .pd-tm__card::before,
#top #wrap_all .pd-tm .pd-tm__card::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
	background-image:
		linear-gradient(var(--pd-tm-white), var(--pd-tm-white)), linear-gradient(var(--pd-tm-white), var(--pd-tm-white)),
		linear-gradient(var(--pd-tm-white), var(--pd-tm-white)), linear-gradient(var(--pd-tm-white), var(--pd-tm-white)),
		linear-gradient(var(--pd-tm-white), var(--pd-tm-white)), linear-gradient(var(--pd-tm-white), var(--pd-tm-white)),
		linear-gradient(var(--pd-tm-white), var(--pd-tm-white)), linear-gradient(var(--pd-tm-white), var(--pd-tm-white));
	background-size:
		var(--pd-tm-corner) var(--pd-tm-corner-w), var(--pd-tm-corner-w) var(--pd-tm-corner),
		var(--pd-tm-corner) var(--pd-tm-corner-w), var(--pd-tm-corner-w) var(--pd-tm-corner),
		var(--pd-tm-corner) var(--pd-tm-corner-w), var(--pd-tm-corner-w) var(--pd-tm-corner),
		var(--pd-tm-corner) var(--pd-tm-corner-w), var(--pd-tm-corner-w) var(--pd-tm-corner);
	background-position:
		left top, left top,
		right top, right top,
		left bottom, left bottom,
		right bottom, right bottom;
	background-repeat: no-repeat;
}

.pd-tm .pd-tm__quote,
#top #wrap_all .pd-tm .pd-tm__quote {
	display: flex;
	flex-direction: column;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	border-width: 0;
	border-style: none;
	background-color: transparent;
	quotes: none;
}

.pd-tm .pd-tm__quote::before,
.pd-tm .pd-tm__quote::after,
#top #wrap_all .pd-tm .pd-tm__quote::before,
#top #wrap_all .pd-tm .pd-tm__quote::after {
	content: none;
}

.pd-tm .pd-tm__text,
#top #wrap_all .pd-tm .pd-tm__text {
	--fs: var(--pd-tm-quote-fs);
	--lh: var(--pd-tm-quote-lh);
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	margin-left: 0;
	margin-right: 0;
	font-family: var(--pd-nav-font);
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--pd-tm-white);
	overflow-wrap: break-word;
}

/* Author: pinned to the bottom of the card, so a row of cards lines up on it */
.pd-tm .pd-tm__author,
#top #wrap_all .pd-tm .pd-tm__author {
	display: flex;
	align-items: center;
	column-gap: var(--pd-tm-author-gap);
	margin-top: auto;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
}

.pd-tm .pd-tm__photo,
#top #wrap_all .pd-tm .pd-tm__photo {
	display: block;
	flex: 0 0 auto;
	width: var(--pd-tm-photo);
	height: var(--pd-tm-photo);
	max-width: none;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	border-radius: 999px;
	object-fit: cover;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.pd-tm .pd-tm__who,
#top #wrap_all .pd-tm .pd-tm__who {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	row-gap: var(--pd-tm-who-gap);
	flex: 1 1 0;
	min-width: 0;
}

.pd-tm .pd-tm__name,
#top #wrap_all .pd-tm .pd-tm__name {
	--fs: var(--pd-tm-name-fs);
	--lh: var(--pd-tm-name-lh);
	font-family: var(--pd-nav-font);
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--pd-tm-white);
	overflow-wrap: break-word;
}

.pd-tm .pd-tm__role,
#top #wrap_all .pd-tm .pd-tm__role {
	--fs: var(--pd-tm-role-fs);
	--lh: var(--pd-tm-role-lh);
	font-family: var(--pd-nav-font);
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--pd-tm-dim);
	overflow-wrap: break-word;
}

/* ---------- Before Splide mounts (and without JavaScript): a plain scrolling row ---------- */
.pd-tm:not(.pd-tm--ready) .pd-tm__track,
#top #wrap_all .pd-tm:not(.pd-tm--ready) .pd-tm__track {
	overflow-x: auto;
	scrollbar-width: none;
}

.pd-tm:not(.pd-tm--ready) .pd-tm__track::-webkit-scrollbar,
#top #wrap_all .pd-tm:not(.pd-tm--ready) .pd-tm__track::-webkit-scrollbar {
	display: none;
}

.pd-tm:not(.pd-tm--ready) .pd-tm__arrows,
#top #wrap_all .pd-tm:not(.pd-tm--ready) .pd-tm__arrows {
	visibility: hidden;   /* keeps its space: no jump when the script mounts */
}

@media (prefers-reduced-motion: reduce) {
	.pd-tm .pd-tm__arrow,
	#top #wrap_all .pd-tm .pd-tm__arrow {
		transition: none;
	}
}