/* Powershift quotes — the blockquote styles and the testimonial renderer, one look.
   Front end AND editor canvas (enqueue_block_assets), so the editor shows the real thing.

   Built to powershift-quotes-handoff/QUOTES-HANDOFF.md. reference.html is the acceptance
   test: if a change here stops matching it, the change is wrong or the handoff moved.

   WHY EVERYTHING IS IN THIS FILE AND NOT IN THE PARTIALS — read before editing
   ---------------------------------------------------------------------------
   Two things have to look identical: the named styles on core/quote, and the markup the
   testimonial block prints. They are different elements with different classes, so the look
   would otherwise be written twice and drift.

   The same specificity problem as buttons.css applies (read its header). WordPress wraps
   /styles/*.json partials in `:root :where(…)` — specificity (0,1,0) — and this file is a
   separate enqueued stylesheet, printed after them, so anything here beats them. That is
   used deliberately rather than fought: the partials do nothing but register the style and
   kill core's borders and padding, and the whole look lives here. Do not add colour or
   type to /styles/quote-*.json; it will either be overridden here or override this, and
   which one depends on print order, which is not something to rely on.

   THE TOKEN NAMES IN THE HANDOFF ARE NOT THIS THEME'S
   ---------------------------------------------------
   The handoff speaks the design system's names; this theme's palette uses shorter slugs.
   The mapping, applied throughout:

     pwr-orange      → orange          pwr-grey        → grey
     pwr-green-light → green-light     pwr-grey-bright → grey-bright
     pwr-grey-deep   → contrast        pwr-orange-dark → orange-dark
     pwr-sm shadow   → shadow preset `s`   --chamfer-ui-lg → --wp--custom--chamfer-sm (10px)

   So the handoff's dark-surface test class `has-pwr-grey-deep-background-color` is
   `has-contrast-background-color` here.

   THE MARKS — the parentheses (15 Oct 2026 design review)
   -----------------------------------------------------
   A quote sits between the two halves of the Powershift mark: the ORANGE bracket top-left,
   the GREEN bracket bottom-right, exactly as the logo stacks them. They are the two polygons
   of assets/images/logos/icon-gradient.svg, each in its own 8.5 × 18.71 box, painted as CSS
   masks so the colour is a token. The colours are FIXED — orange and light green on every
   surface — because the pair IS the logo; the dark variants below repoint the dots, arrows
   and emphasis, never the brackets. Static beside a quote in running text; in the slider the
   same two shapes close over the outgoing quote and open on the next (see the turn, at the
   end of this file). Decorative: no quote characters are ever added with `content`.
   The old single mark (quote.svg rotated) went with this; quote-open.svg stays in
   assets/images/shapes for inline use. */

:root {
	--pwr-q-open: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8.5 18.71'%3E%3Cpolygon fill='%23000' points='4.25 14.46 4.25 11.06 8.5 6.81 8.5 0 0 8.51 0 18.71 8.5 18.71 8.5 14.46 4.25 14.46'/%3E%3C/svg%3E");
	--pwr-q-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8.5 18.71'%3E%3Cpolygon fill='%23000' points='0 4.25 4.25 4.25 4.25 7.65 0 11.9 0 18.71 8.5 10.2 8.5 0 0 0 0 4.25'/%3E%3C/svg%3E");
	--pwr-q-open-ink: var(--wp--preset--color--orange);
	--pwr-q-close-ink: var(--wp--preset--color--green-light);
	/* the bracket's width is 0.4543 of its height (8.5 / 18.71) */
	--pwr-q-bracket: 40px;
}

/* ---------- the surface every quote shares ---------- */

/* `:not([class*="is-style-pwr-"])` is how a quote carrying no style class gets the house
   look — the same device buttons.css uses for the default fill, and what makes registering
   Quote as `is_default` honest rather than a label on nothing. Match on the substring, never
   an exact class: WP writes both `is-style-pwr-quote` and a per-instance variant. */
.wp-block-quote:not([class*="is-style-pwr-"]),
.is-style-pwr-quote,
.is-style-pwr-quote-dark,
.is-style-pwr-statement,
.pwr-quotes,
.pwr-testimonial {
	/* Light surface by default. The dark variants below repoint these four and nothing else. */
	--pwr-q-accent: var(--wp--preset--color--orange);
	--pwr-q-ink: var(--wp--preset--color--contrast);
	--pwr-q-muted: var(--wp--preset--color--grey);
	--pwr-q-emphasis: var(--wp--preset--color--orange);

	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	color: var(--pwr-q-ink);
	font-family: var(--wp--preset--font-family--red-hat-display);
}

/* The opening bracket: orange, top-left, never stretched, never shadowed. */
.wp-block-quote:not([class*="is-style-pwr-"])::before,
.is-style-pwr-quote::before,
.is-style-pwr-quote-dark::before,
.is-style-pwr-statement::before,
.pwr-testimonial__mark {
	content: "";
	display: block;
	width: calc(var(--pwr-q-bracket) * 0.4543);
	height: var(--pwr-q-bracket);
	margin-bottom: 20px;
	background: var(--pwr-q-open-ink);
	-webkit-mask: var(--pwr-q-open) center / contain no-repeat;
	mask: var(--pwr-q-open) center / contain no-repeat;
}

/* The closing bracket: green, bottom-right, after the citation. A block pushed to the right
   edge of the quote's measure; the centred layouts re-place it below. */
.wp-block-quote:not([class*="is-style-pwr-"])::after,
.is-style-pwr-quote::after,
.is-style-pwr-quote-dark::after,
.is-style-pwr-statement::after,
.pwr-testimonial::after {
	content: "";
	display: block;
	width: calc(var(--pwr-q-bracket) * 0.4543);
	height: var(--pwr-q-bracket);
	margin: 20px 0 0 auto;
	background: var(--pwr-q-close-ink);
	-webkit-mask: var(--pwr-q-close) center / contain no-repeat;
	mask: var(--pwr-q-close) center / contain no-repeat;
}

/* The running-text quote takes the measure itself now, so the closing bracket sits at the
   end of the TEXT rather than at the edge of the column. */
.wp-block-quote:not([class*="is-style-pwr-"]),
.is-style-pwr-quote {
	max-width: 54ch;
}

/* ---------- the words ---------- */

.wp-block-quote:not([class*="is-style-pwr-"]) blockquote,
.is-style-pwr-quote blockquote,
.is-style-pwr-quote-dark blockquote,
.is-style-pwr-statement blockquote,
.pwr-testimonial__quote {
	margin: 0;
	border: 0;
	padding: 0;
}

.wp-block-quote:not([class*="is-style-pwr-"]) p,
.is-style-pwr-quote p,
.is-style-pwr-quote-dark p,
.is-style-pwr-statement p,
.pwr-testimonial__quote p {
	margin: 0;
	font-weight: 300;
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.45;
	letter-spacing: 0;
	text-transform: none;
	/* Italic (client, 29 Oct). The real Red Hat Display italic is in theme.json, so this is
	   the drawn italic, not a slanted roman. The attribution below stays upright. */
	font-style: italic;

	/* A measure, not a width. At xl a full-width line runs past 100 characters and the eye
	   loses the line it is on; 54ch lands around 60. The cards and the Statement set their
	   own below, so this only bites where a quote has the run of a wide band. */
	max-width: 54ch;
}

.wp-block-quote:not([class*="is-style-pwr-"]) p + p,
.is-style-pwr-quote p + p,
.is-style-pwr-quote-dark p + p,
.is-style-pwr-statement p + p,
.pwr-testimonial__quote p + p {
	margin-top: 0.75em;
}

/* Emphasis inside a quote is a colour, never a change of style and never a highlight. The
   words are italic (29 Oct), so emphasis inherits that rather than turning upright. */
.wp-block-quote:not([class*="is-style-pwr-"]) :is(em, strong, mark),
.is-style-pwr-quote :is(em, strong, mark),
.is-style-pwr-quote-dark :is(em, strong, mark),
.is-style-pwr-statement :is(em, strong, mark),
.pwr-testimonial__quote :is(em, strong, mark) {
	font-style: inherit;
	background: none;
	color: var(--pwr-q-emphasis);
}

/* ---------- attribution ---------- */

/* The renderer's caption is a row — a logo or headshot beside the text. A core <cite> is
   not: it is `Name<br><em>Role</em>`, and flex would make the two halves flex items side by
   side, which is exactly what the <br> says not to do. So they are laid out separately. */
.wp-block-quote:not([class*="is-style-pwr-"]) cite,
.is-style-pwr-quote cite,
.is-style-pwr-quote-dark cite,
.is-style-pwr-statement cite {
	display: block;
	margin-top: 24px;
	font-style: normal;
}

.pwr-testimonial__cite {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 24px;
	font-style: normal;
}

/* cite text is the NAME. An <em> inside it is the role — see the style descriptions. */
.wp-block-quote:not([class*="is-style-pwr-"]) cite,
.is-style-pwr-quote cite,
.is-style-pwr-quote-dark cite,
.is-style-pwr-statement cite,
.pwr-testimonial__name {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--s);
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--tight);
	color: var(--pwr-q-ink);
}

.wp-block-quote:not([class*="is-style-pwr-"]) cite br,
.is-style-pwr-quote cite br,
.is-style-pwr-quote-dark cite br,
.is-style-pwr-statement cite br {
	display: none;
}

.wp-block-quote:not([class*="is-style-pwr-"]) cite em,
.is-style-pwr-quote cite em,
.is-style-pwr-quote-dark cite em,
.is-style-pwr-statement cite em,
.pwr-testimonial__role {
	display: block;
	font-weight: 300;
	font-size: var(--wp--preset--font-size--s);
	line-height: 1.4;
	font-style: normal;
	text-transform: none;
	letter-spacing: 0;
	color: var(--pwr-q-muted);
}

/* Headshot: chamfered like every other image on this site. Never a circle. */
.pwr-testimonial__photo {
	flex: none;
	width: 56px;
	height: 56px;
	object-fit: cover;
	display: block;
	clip-path: polygon(
		var(--wp--custom--chamfer-sm) 0, 100% 0,
		100% calc(100% - var(--wp--custom--chamfer-sm)),
		calc(100% - var(--wp--custom--chamfer-sm)) 100%,
		0 100%, 0 var(--wp--custom--chamfer-sm)
	);
}


/* ---------- Quote — Dark, and the feature testimonial ---------- */

/* Dark is two separable things. The COLOUR flip applies wherever a quote sits on a dark
   surface — including inside a band that is already dark, such as the case study Proof Band,
   where adding another padded, chamfered block would be a block inside a block. */
.is-style-pwr-quote-dark,
.pwr-quotes--dark,
.pwr-testimonial--dark,
.pwr-testimonial--feature {
	--pwr-q-accent: var(--wp--preset--color--green-light);
	--pwr-q-ink: var(--wp--preset--color--base);
	--pwr-q-muted: var(--wp--preset--color--grey-bright);
	--pwr-q-emphasis: var(--wp--preset--color--green-light);
}

/* The SURFACE is only for the ones that draw their own block. */
.is-style-pwr-quote-dark,
.pwr-testimonial--feature {
	background-color: var(--wp--preset--color--contrast);
	padding: 48px 52px;

	/* Same chamfer rule as the Callout group styles, scaled to the container. */
	--pwr-chamfer: clamp(18px, 6cqi, 40px);
	clip-path: polygon(
		var(--pwr-chamfer) 0, 100% 0,
		100% calc(100% - var(--pwr-chamfer)),
		calc(100% - var(--pwr-chamfer)) 100%,
		0 100%, 0 var(--pwr-chamfer)
	);
}

/* ---------- Statement: the brand quote band ---------- */

.is-style-pwr-statement,
.pwr-testimonial--statement {
	text-align: center;
	padding: 88px 32px;
}

.is-style-pwr-statement::before,
.pwr-testimonial--statement .pwr-testimonial__mark {
	--pwr-q-bracket: 46px;
	margin: 0 auto 22px;
}
/* …and the closing bracket centred under it: a band, so both brackets sit on the axis. */
.is-style-pwr-statement::after,
.pwr-testimonial--statement::after {
	--pwr-q-bracket: 46px;
	margin: 22px auto 0;
}

.is-style-pwr-statement p,
.pwr-testimonial--statement .pwr-testimonial__quote p {
	font-weight: 700;
	/* xxl, the largest body token. It was a hard 1.875rem (30px) with a media query dropping
	   it to 1.375rem on a phone; xxl is fluid, so the token does that on its own and the
	   override below went with it. 28px at the top end rather than 30 — the scale's step. */
	font-size: var(--wp--preset--font-size--xxl);
	line-height: 1.35;
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--tight);
	max-width: 780px;
	margin-inline: auto;
}

.is-style-pwr-statement cite,
.pwr-testimonial--statement .pwr-testimonial__cite {
	justify-content: center;
}

/* A Statement takes its surface from the block's own background, so the accent follows the
   background rather than needing a second style. A band, not a block: no chamfer. */
.is-style-pwr-statement.has-contrast-background-color {
	--pwr-q-accent: var(--wp--preset--color--green-light);
	--pwr-q-ink: var(--wp--preset--color--base);
	--pwr-q-muted: var(--wp--preset--color--grey-bright);
	--pwr-q-emphasis: var(--wp--preset--color--green-light);
}

/* ---------- testimonials are centred ---------- */

/* Wayne, 25 Sep: every testimonial the renderer draws is centre-aligned — the mark, the
   words, the citation and, in the slider, the dots. This is the RENDERER only. The named
   styles on core/quote stay left-aligned as the handoff sets them, because an editor placing
   a quote in running text wants it to run with the text; only Statement centres there.

   Each part has to be told separately: the mark and the quote are block boxes with their own
   max-width, so text-align alone would centre the text inside a box still pinned to the left,
   and the citation is a flex row rather than text at all. */
.pwr-testimonial {
	text-align: center;
}
.pwr-testimonial .pwr-testimonial__mark {
	margin-inline: auto;
}
.pwr-testimonial .pwr-testimonial__quote p {
	margin-inline: auto;
}
.pwr-testimonial .pwr-testimonial__cite {
	justify-content: center;
}
.pwr-quotes__track > * {
	margin-inline: auto;
}
.pwr-quotes__dots {
	justify-content: center;
}

/* ---------- a long single quote: one wide column (two columns 12 Oct – 3 Nov) ---------- */

/* Wayne, 12 Oct: a single quote over ~500 characters (the renderer adds --long) flows into two
   columns on desktop. The columns sit centred in the band like every testimonial; the TEXT in
   them is left-aligned, because centred lines of a long paragraph are hard to read. The mark
   and the citation stay centred above and below. The paragraph's own 54ch measure is lifted —
   each column is the measure now — and the slider's two-thirds cap widens to fit two. */
/* Left-aligned at every width: on a phone it is one column, but centred lines of a quote this
   long read just as badly there. */
.pwr-testimonial--long .pwr-testimonial__quote { text-align: left; }
/* ONE COLUMN since 3 Nov (meeting + Website To-Do: "long form — ditch the columns, just do one
   column the whole width of the testimonial space"). The two-column flow below is now a single
   column across the same 1100px; the 66 / 99 marks stay at its top-left and bottom-right. */
@media (min-width: 861px) {
	.pwr-testimonial--long .pwr-testimonial__quote {
		column-count: 1;
		max-width: 1100px;
		margin-inline: auto;
		orphans: 3;
		widows: 3;
	}
	.pwr-testimonial.pwr-testimonial--long .pwr-testimonial__quote p { max-width: none; margin-inline: 0; }
	.pwr-quotes__track:has(> .pwr-testimonial--long) { max-width: min(100%, 1100px); }
}

/* ---------- the testimonial grid ---------- */

.pwr-testimonials__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 22px;
}
.pwr-testimonials__list > li {
	display: flex;
}

/* The wall (Wayne, 22 Oct): every quote at once, full length, for the Testimonials page. Cards
   packed into columns, each its own height, so a 60-character slogan is not stretched to the
   1200-character quote beside it the way a grid row would. Reading order runs down each column. */
.pwr-testimonials__wall {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 3 300px;
	column-gap: 22px;
}
.pwr-testimonials__wall > li {
	break-inside: avoid;
	margin-bottom: 22px;
}
/* the card's 32px padding inside the column, not added to it */
.pwr-testimonials__wall .pwr-testimonial--card { box-sizing: border-box; }

/* Card surface: border and a small shadow, square corners, cite pinned to the bottom so a
   row of cards lines up however uneven the quotes are. */
.pwr-testimonial--card {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 32px;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--grey-bright);
	box-shadow: var(--wp--preset--shadow--s);
}
.pwr-testimonial--card .pwr-testimonial__mark {
	--pwr-q-bracket: 32px;
	margin-bottom: 16px;
}
/* the card is a flex column with the cite pinned to the bottom, so the closing bracket is
   taken out of flow and sat in the corner; the cite keeps clear of it */
.pwr-testimonial--card { position: relative; }
.pwr-testimonial--card::after {
	--pwr-q-bracket: 32px;
	position: absolute;
	right: 32px;
	bottom: 32px;
	margin: 0;
}
.pwr-testimonial--card .pwr-testimonial__cite { padding-right: 32px; }
.pwr-testimonial--card .pwr-testimonial__quote p {
	font-size: var(--wp--preset--font-size--l);
	line-height: 1.55;
}
.pwr-testimonial--card .pwr-testimonial__cite {
	margin-top: auto;
	padding-top: 24px;
}

/* A card in a grid reads left-aligned (Wayne, 13 Oct) — the 25 Sep centring above is for the
   quote running alone in a band. Doubled class to outrank those per-part rules. */
.pwr-testimonial.pwr-testimonial--card { text-align: left; }
.pwr-testimonial.pwr-testimonial--card :is(.pwr-testimonial__mark, .pwr-testimonial__quote p) { margin-inline: 0; }
.pwr-testimonial.pwr-testimonial--card .pwr-testimonial__cite { justify-content: flex-start; }

/* Stacked single testimonials, when a block renders more than one. */
.pwr-testimonials--single .pwr-testimonial + .pwr-testimonial,
.pwr-testimonials--feature .pwr-testimonial + .pwr-testimonial {
	margin-top: var(--wp--preset--spacing--xl);
}
/* …but not inside the carousel, where the quotes share one grid cell: there the gap pushed every
   quote after the first 80px down, so the copy jumped on every turn (Website To-Do 165, 3 Nov). */
.pwr-quotes .pwr-quotes__track > .pwr-testimonial + .pwr-testimonial { margin-top: 0; }

/* ---------- narrow ---------- */

@media (max-width: 600px) {
	.is-style-pwr-quote-dark,
	.pwr-testimonial--feature {
		padding: 32px 24px;
	}
	.is-style-pwr-statement,
	.pwr-testimonial--statement {
		padding: 56px 16px;
	}
}

/* ---------- more than one quote: one at a time, with dots ---------- */

/* Auto-plays (15 Oct review), and the pointer is the pause: it stops while the quote is hovered
   or anything inside has focus, and for good once the visitor takes an arrow or a dot. There is
   no pause/play button (Wayne, 20 Oct: "no pause/play needed — hover stops"); the rules are in
   quotes.js.

   Every quote is in the DOM and in the document order a screen reader reads; the dots only
   change which one is visible. Without JS, `is-current` is never set and the fallback below
   shows them all stacked, which is a worse layout but never a lost quote. */
.pwr-quotes {
	container-type: inline-size;
}

/* Two thirds of the band, so the quote reads as a column rather than a full-width slab — with
   a ceiling so it does not become an 85-character line on a very wide one. On the TRACK, not
   the items: the slider's brackets are the track's own (see the turn, below) and they sit at
   its edges, so the track has to be the measure. */
.pwr-quotes__track {
	position: relative;
	max-width: min(66%, 62ch);
	margin-inline: auto;
	/* room for the brackets either side */
	padding-inline: calc(var(--pwr-q-bracket) * 0.4543 + 16px);
	container-type: inline-size;
}
/* the items' own brackets are off in the slider; the track draws the pair once */
.pwr-quotes .pwr-testimonial__mark,
.pwr-quotes .pwr-testimonial::after { display: none; }
/* The figure is doing the measuring here, so the paragraph's own 54ch cap would fight it and
   land the text nearer half the band than two thirds. Let it fill what it is given. */
.pwr-quotes__track .pwr-testimonial__quote p {
	max-width: none;
}

/* Every quote sits in the same grid cell, so the track is always as tall as the LONGEST one
   and the dots never move when the quote changes (Wayne, 29 Sep: it jumped on every toggle).
   No JS measuring, so it stays right through a resize or a font swap.

   Hidden quotes are `visibility: hidden`, not `display: none`, because they have to keep
   their height in the cell. visibility still takes them out of the accessibility tree and
   out of the tab order, so a screen reader is still read one quote, not four. The delay on
   visibility lets the outgoing quote fade before it disappears. */
.pwr-quotes.is-ready .pwr-quotes__track {
	display: grid;
}
.pwr-quotes.is-ready .pwr-quotes__item {
	grid-area: 1 / 1;
	/* A shorter quote is only as wide as its own lines, so the brackets (which quotes.js sets
	   to the CURRENT quote's box) hug its text rather than framing the longest quote's box with
	   this one lost inside it (Wayne, 22 Oct). It sits at the TOP of the cell, not the middle
	   (Website To-Do 165, 3 Nov: "testimonial copy shifts between the logo quotation icons" —
	   centred in a band as tall as the longest quote, the client name and first line rode up
	   and down on every turn). The brackets follow its middle instead; see --pwr-q-ym below. */
	align-self: start;
	justify-self: center;
	width: fit-content;
	max-width: 100%;
	visibility: hidden;
	opacity: 0;
	transition: opacity 300ms var(--wp--custom--motion--ease-standard, ease),
	            visibility 0s linear 300ms;
}
.pwr-quotes.is-ready .pwr-quotes__item.is-current {
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
}

@container (max-width: 700px) {
	.pwr-quotes__track { max-width: none; }
}

/* The row: previous, the dots, next. */
.pwr-quotes__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 28px;
}

.pwr-quotes__dots {
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The brand double-chevron, the SAME arrow every slider on the site wears (Wayne, 20 Oct: "the
   testimonials block needs to have the same back/forward arrows as the gallery"). This is the
   carousel's .pwr-carousel__btn rule, re-stated here because the plugin's carousel.css is only
   loaded where a carousel is: the theme's own copy of the file, drawn as a mask so it is orange
   on every surface, mirrored for previous, no bounding box, and hover deepens it to orange-dark
   with the soft glow the buttons have. 3rem target, 1.4rem glyph. */
.pwr-quotes__arrow {
	position: relative;
	width: 3rem;
	height: 3rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	cursor: pointer;
	line-height: 0;
	transition: filter 0.2s ease;
}
.pwr-quotes__arrow::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--wp--preset--color--orange);
	-webkit-mask: url(../images/ui/arrow-right.svg) no-repeat center / 1.4rem 1.4rem;
	mask: url(../images/ui/arrow-right.svg) no-repeat center / 1.4rem 1.4rem;
	transition: background-color 0.2s ease;
}
.pwr-quotes__arrow--prev {
	transform: scaleX(-1);
}
.pwr-quotes__arrow:is(:hover, :focus-visible) {
	filter: drop-shadow(0 0 6px color-mix(in srgb, var(--wp--preset--color--orange) 70%, transparent));
}
.pwr-quotes__arrow:is(:hover, :focus-visible)::before {
	background-color: var(--wp--preset--color--orange-dark);
}
.pwr-quotes__arrow:focus-visible {
	outline: 2px solid var(--wp--preset--color--orange);
	outline-offset: 2px;
}

/* A real button: focusable, reachable by keyboard, and big enough to hit. The visible dot is
   smaller than the target, which is why the padding is on the button and the shape on ::before. */
.pwr-quotes__dot {
	appearance: none;
	background: none;
	border: 0;
	margin: 0;
	padding: 8px;
	cursor: pointer;
	line-height: 0;
}
.pwr-quotes__dot::before {
	content: "";
	display: block;
	/* a hexagon, point-up, not a square (15 Oct design review) */
	width: 11px;
	height: 12px;
	clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
	background: var(--pwr-q-muted);
	opacity: 0.5;
	transition: opacity 200ms var(--wp--custom--motion--ease-standard, ease),
	            background-color 200ms var(--wp--custom--motion--ease-standard, ease);
}
.pwr-quotes__dot:hover::before {
	opacity: 0.8;
}
.pwr-quotes__dot[aria-current="true"]::before {
	/* orange on every surface — the review named the colour, and the brackets agree */
	background: var(--wp--preset--color--orange);
	opacity: 1;
}
.pwr-quotes__dot:focus-visible {
	outline: 2px solid var(--pwr-q-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.pwr-quotes__dot::before,
	.pwr-quotes__arrow,
	.pwr-quotes__arrow::before,
	.pwr-quotes.is-ready .pwr-quotes__item { transition: none; }
}

/* ---------- the slider's mark, and the split ---------- */

/* The pair in the slider (built by quotes.js, two spans at the end of the track) is the
   Powershift mark at one and a half times the inline brackets (Wayne, 23 Oct: "50% bigger").
   It rests split, its halves either side of the CURRENT quote, 16px out from its box, on the
   band's middle line; on a change of quote they slide together into the whole mark in the
   middle, the quote swaps behind it, and they slide apart again as the next quote fades in
   from nothing. The motion is sideways only: each half keeps its height all the way, orange a
   little above green as the logo stacks them (orange's top 68% of a bracket above the middle
   line, green's 32%), so the mark it closes into is the logo exactly.
   quotes.js measures the quote's box into --pwr-q-x0/x1 on every change and every resize;
   without the script's numbers the fallbacks put the halves at the track's edges. It sets
   `is-shut` to close the mark and takes it off to open it; the transitions here do the rest,
   so an interrupted turn just reverses from where it is. Keep --pwr-q-split under HALF in
   quotes.js. Under 22 Oct the halves went to the top corners; that is gone. */
.pwr-quotes {
	--pwr-q-split: 400ms;
	--pwr-q-ease: cubic-bezier(0.65, 0, 0.35, 1);
}
.pwr-quotes__track {
	--pwr-q-bracket: 60px;
	/* where each half rests: 16px outside the current quote's box */
	--pwr-q-gap: calc(var(--pwr-q-bracket) * 0.4543 + 16px);
	--pwr-q-rest-left: calc(var(--pwr-q-x0, var(--pwr-q-gap)) - var(--pwr-q-gap));
	--pwr-q-rest-right: calc(var(--pwr-q-x1, var(--pwr-q-gap)) - var(--pwr-q-gap));
}
@container (max-width: 700px) {
	.pwr-quotes__track { --pwr-q-bracket: 42px; }
}
.pwr-quotes__bracket {
	position: absolute;
	display: block;
	width: calc(var(--pwr-q-bracket) * 0.4543);
	height: var(--pwr-q-bracket);
	pointer-events: none;
}
/* --pwr-q-ym: the current quote's middle, from quotes.js (the quotes sit at the top of the band
   now, so the band's own middle is no longer theirs). The halves move to it while shut, so the
   step is never seen; without the script they fall back to the band's middle. */
.pwr-quotes__bracket--open {
	top: calc(var(--pwr-q-ym, 50%) - var(--pwr-q-bracket) * 0.68);
	left: var(--pwr-q-rest-left);
	background: var(--pwr-q-open-ink);
	-webkit-mask: var(--pwr-q-open) center / contain no-repeat;
	mask: var(--pwr-q-open) center / contain no-repeat;
	transition: left var(--pwr-q-split) var(--pwr-q-ease), top var(--pwr-q-split) var(--pwr-q-ease);
}
.pwr-quotes__bracket--close {
	top: calc(var(--pwr-q-ym, 50%) - var(--pwr-q-bracket) * 0.32);
	right: var(--pwr-q-rest-right);
	background: var(--pwr-q-close-ink);
	-webkit-mask: var(--pwr-q-close) center / contain no-repeat;
	mask: var(--pwr-q-close) center / contain no-repeat;
	transition: right var(--pwr-q-split) var(--pwr-q-ease), top var(--pwr-q-split) var(--pwr-q-ease);
}
/* Shut: the open half's right edge and the close half's left edge meet on the centre line,
   which is also the centre of every quote (they sit centred in the one cell). */
.pwr-quotes.is-shut .pwr-quotes__bracket--open { left: calc(50% - var(--pwr-q-bracket) * 0.4543); }
.pwr-quotes.is-shut .pwr-quotes__bracket--close { right: calc(50% - var(--pwr-q-bracket) * 0.4543); }

/* The words are never seen under the mark (Website To-Do 165, 3 Nov: "testimonial copy shifts
   between the logo quotation icons" — the screen recording showed the next quote fading in
   while the halves were still shut over its middle, and the outgoing one still legible as they
   closed across it). So: the outgoing words are gone in 150ms, before the halves meet; the
   incoming words wait until the halves are 60% of the way out, then fade in over 300ms. It
   was a fade over the whole split from the moment the quote swapped, out over 250ms. */
.pwr-quotes.is-ready .pwr-quotes__item.is-current {
	transition-duration: 300ms;
	transition-delay: calc(var(--pwr-q-split) * 0.6);
}
.pwr-quotes.is-ready.is-shut .pwr-quotes__item.is-current {
	opacity: 0;
	transition-duration: 150ms;
	transition-delay: 0s;
}

/* ---------- the carousel ---------- */

/* Every multi-quote band (Wayne, 23 Oct: "get rid of the slider altogether"): chevrons under
   it, no dots (since 28 Oct), and the words further in from the halves; quotes.js has the
   autoplay side. With
   twelve testimonials the dots row was wider than a phone and pushed the page sideways. A row
   of closed marks, one per quote, was tried first and dropped the same day. */

/* 56px between the words and each half, not 16 (24 on a phone): a narrower column. The track's
   padding is what makes room for the halves, so it grows with the gap. */
.pwr-quotes .pwr-quotes__track {
	--pwr-q-pad: 56px;
	--pwr-q-gap: calc(var(--pwr-q-bracket) * 0.4543 + var(--pwr-q-pad));
	padding-inline: var(--pwr-q-gap);
	touch-action: pan-y;
}
@container (max-width: 700px) {
	.pwr-quotes .pwr-quotes__track { --pwr-q-pad: 24px; }
}

/* Chevrons only (Wayne, 28 Oct: "we will go with chevrons only — we are going to push a
   consistent route for all carousels/sliders"). The pair sits centred under the band, side by
   side, exactly like every other carousel's nav (carousel.css: gap xs, the same 3rem chevron),
   and the dots are gone — the arrows are what says there is more. Dots came back small on 27
   Oct (#73) for that reason and went again the next day; before that, on 23 Oct, both were
   hidden. The arrows are real buttons, so the band stays keyboard-reachable without them. */
.pwr-quotes.is-ready .pwr-quotes__controls {
	gap: var(--wp--preset--spacing--xs);
	margin-top: var(--wp--preset--spacing--m);
}
.pwr-quotes.is-ready .pwr-quotes__dots { display: none; }

@media (prefers-reduced-motion: reduce) {
	.pwr-quotes__bracket { transition: none; }
}

/* ---------- a single centred quote outside the slider ---------- */

/* The figure takes the measure, so the brackets frame the TEXT: orange at the top-left of the
   measure, green at the bottom-right of it, rather than at the edges of the band. */
.pwr-testimonial--single:not(.pwr-testimonial--long) {
	max-width: min(100%, 62ch);
	margin-inline: auto;
}
.pwr-testimonial--single .pwr-testimonial__mark {
	margin-inline: 0 auto;
}

/* ---------- the halves at the SIDES, on every quote (sheet #130 + #139, 29 Oct) ---------- */

/* "All testimonials need to have the symbols in the middle on the right and left, not up and
   down." The carousel has done this since 23 Oct; this brings every other quote into line —
   the named styles on core/quote (Learning articles), Statement, the single testimonial and the
   wall's cards. Orange to the left and green to the right of the words, on the quote's middle
   line, orange a little above green as the logo stacks them (the carousel's 0.68 / 0.32).

   The quote makes room with inline padding, so the halves never sit on the words, whatever
   their length: --pwr-q-inset (where a half sits from the edge) + the bracket's width + a
   gutter (24px, 14px on a phone).
   Everything above this section still places the brackets above and below; it is overridden
   here rather than rewritten, so the old layout is one deletion away. */
:is(.wp-block-quote:not([class*="is-style-pwr-"]), .is-style-pwr-quote, .is-style-pwr-quote-dark, .is-style-pwr-statement, .pwr-testimonial) {
	--pwr-q-inset: 0px;
	padding-inline: calc(var(--pwr-q-inset) + var(--pwr-q-bracket) * 0.4543 + var(--pwr-q-gutter, 24px));
}
:is(.wp-block-quote:not([class*="is-style-pwr-"]), .is-style-pwr-quote, .is-style-pwr-quote-dark, .is-style-pwr-statement)::before,
:is(.wp-block-quote:not([class*="is-style-pwr-"]), .is-style-pwr-quote, .is-style-pwr-quote-dark, .is-style-pwr-statement, .pwr-testimonial) .pwr-testimonial__mark {
	position: absolute;
	top: calc(50% - var(--pwr-q-bracket) * 0.68);
	left: var(--pwr-q-inset);
	margin: 0;
}
:is(.wp-block-quote:not([class*="is-style-pwr-"]), .is-style-pwr-quote, .is-style-pwr-quote-dark, .is-style-pwr-statement, .pwr-testimonial)::after {
	position: absolute;
	top: calc(50% - var(--pwr-q-bracket) * 0.32);
	right: var(--pwr-q-inset);
	bottom: auto;
	margin: 0;
}
/* Sizes: the bracket was set on each half above; set it on the quote too, so the padding
   that makes room for it measures the same bracket. */
.is-style-pwr-statement.is-style-pwr-statement,
.pwr-testimonial.pwr-testimonial--statement { --pwr-q-bracket: 46px; --pwr-q-inset: 32px; }
.pwr-testimonial.pwr-testimonial--card { --pwr-q-bracket: 32px; --pwr-q-inset: 14px; }
.pwr-testimonial.pwr-testimonial--card .pwr-testimonial__cite { padding-right: 0; }
/* The carousel draws its own pair around the track and hides each quote's — no room needed. */
.pwr-quotes .pwr-testimonial.pwr-testimonial { padding-inline: 0; }
@media (max-width: 600px) {
	.is-style-pwr-statement.is-style-pwr-statement,
	.pwr-testimonial.pwr-testimonial--statement { --pwr-q-inset: 8px; }
	:is(.wp-block-quote:not([class*="is-style-pwr-"]), .is-style-pwr-quote, .is-style-pwr-quote-dark, .is-style-pwr-statement, .pwr-testimonial) { --pwr-q-gutter: 14px; }
}


/* ---------- the client above the quote; 66 / 99 on a long quote (sheet row 142, 30 Oct) ---------- */

/* "Move the company name to the top of the quote, change it to orange eyebrow style." The
   renderer prints the <figcaption> first now; this gives it the site's eyebrow — Syncopate
   caps, xs, eyebrow tracking — in orange on every surface and every layout, and takes away
   the spacing that sat it under the words (the card pinned it to the bottom with an auto
   margin). Doubled classes: the card's own cite rules are 0,2,0. */
.pwr-testimonial.pwr-testimonial .pwr-testimonial__cite {
	margin: 0 0 16px;
	padding: 0;
}
.pwr-testimonial.pwr-testimonial .pwr-testimonial__name {
	font-family: var(--wp--preset--font-family--syncopate, Syncopate, sans-serif);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.4;
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	text-transform: uppercase;
	color: var(--wp--preset--color--orange);
}

/* "For the long quotes that are in two columns, use 66 & 99 versions of the quote marks
   (static), aligned top-left and bottom-right." The brand's double mark — quote-open.svg (66)
   and quote-close.svg (99) from the quotes handoff — orange and green like the halves they
   replace, on the wrapper the renderer puts round a long quote's two columns. The logo halves
   step aside for it: the quote's own pair, and the carousel's pair while a long quote is up. */
:root {
	--pwr-q-66: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.7086 18.7087'%3E%3Cg transform='rotate(180 9.3543 9.3543)'%3E%3Cpolygon fill='%23000' points='0 4.252 4.252 4.252 4.252 7.6536 0 11.9055 0 18.7087 8.5039 10.2047 8.5039 0 0 0 0 4.252'/%3E%3Cpolygon fill='%23000' points='14.4567 4.252 14.4567 7.6536 10.2047 11.9055 10.2047 18.7087 18.7086 10.2047 18.7086 0 10.2047 0 10.2047 4.252 14.4567 4.252'/%3E%3C/g%3E%3C/svg%3E");
	--pwr-q-99: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.7086 18.7087'%3E%3Cpolygon fill='%23000' points='0 4.252 4.252 4.252 4.252 7.6536 0 11.9055 0 18.7087 8.5039 10.2047 8.5039 0 0 0 0 4.252'/%3E%3Cpolygon fill='%23000' points='14.4567 4.252 14.4567 7.6536 10.2047 11.9055 10.2047 18.7087 18.7086 10.2047 18.7086 0 10.2047 0 10.2047 4.252 14.4567 4.252'/%3E%3C/svg%3E");
}
.pwr-testimonial.pwr-testimonial--long {
	--pwr-q-mark: 40px;
	padding-inline: 0;
}
.pwr-testimonial.pwr-testimonial--long .pwr-testimonial__mark,
.pwr-testimonial.pwr-testimonial--long::after { display: none; }
.pwr-quotes:has(.pwr-quotes__item.is-current.pwr-testimonial--long) .pwr-quotes__bracket { display: none; }

.pwr-testimonial__body {
	position: relative;
	padding-inline: calc(var(--pwr-q-mark) + 20px);
}
.pwr-testimonial__body::before,
.pwr-testimonial__body::after {
	content: "";
	position: absolute;
	width: var(--pwr-q-mark);
	height: var(--pwr-q-mark);
}
.pwr-testimonial__body::before {
	top: 0;
	left: 0;
	background: var(--pwr-q-open-ink);
	-webkit-mask: var(--pwr-q-66) center / contain no-repeat;
	mask: var(--pwr-q-66) center / contain no-repeat;
}
.pwr-testimonial__body::after {
	right: 0;
	bottom: 0;
	background: var(--pwr-q-close-ink);
	-webkit-mask: var(--pwr-q-99) center / contain no-repeat;
	mask: var(--pwr-q-99) center / contain no-repeat;
}
@media (max-width: 600px) {
	.pwr-testimonial.pwr-testimonial--long { --pwr-q-mark: 26px; }
	.pwr-testimonial__body { padding-inline: calc(var(--pwr-q-mark) + 10px); }
}
/* With a long quote up, the carousel's halves are hidden, so on a narrow band the room the track
   keeps for them either side goes too — kept, it and the marks' own room left a phone a
   190px column. */
@container (max-width: 700px) {
	.pwr-quotes .pwr-quotes__track:has(> .pwr-testimonial--long.is-current) { padding-inline: 0; }
}