/* Lumen front page: hero, partners, services list, FAQ, testimonials. (Selected Work lives in work.css.) */

/* === Hero: full-bleed render under a transparent header, centred type, foot strip === */
.lumen-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-block-size: max(36rem, 100svh);
	margin-block-start: calc(-1 * var(--lumen-header-h)) !important; /* slides under the sticky header; beats flow margins */
	padding-block: calc(var(--lumen-header-h) + var(--wp--preset--spacing--50)) var(--wp--preset--spacing--60);
	overflow: clip;
}
.lumen-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	margin: 0;
	overflow: hidden;
	background: var(--wp--preset--color--espresso);
}
.lumen-hero__media::after {
	/* Flat scrim (not a gradient) keeps ivory type at AA over any image. */
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(21 17 14 / 0.5);
}
.lumen-hero__img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 50% 35%;
}
.lumen-hero__inner {
	display: grid;
	justify-items: center;
	gap: var(--wp--preset--spacing--40);
	inline-size: 100%;
	margin-block: auto !important; /* centres the copy between header and foot strip */
	text-align: center;
}
.lumen-hero__inner > * { margin: 0; }
.lumen-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.55rem 1.1rem;
	border: 1px solid rgb(245 239 230 / 0.28);
	border-radius: 999px;
	background: rgb(21 17 14 / 0.35);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	font: var(--lumen-label);
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ivory);
}
.lumen-hero__badge::before {
	content: "";
	inline-size: 0.45rem;
	block-size: 0.45rem;
	border-radius: 50%;
	background: var(--wp--preset--color--caramel);
}
.lumen-hero__title {
	max-inline-size: 12em;
	font-size: var(--wp--preset--font-size--huge);
	font-weight: 500;
	line-height: 0.96;
	letter-spacing: -0.03em;
	text-wrap: balance;
}
.lumen-hero__title em { font-weight: 400; color: var(--wp--preset--color--caramel); }
.lumen-hero__lead { max-inline-size: 36rem; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem); line-height: 1.6; color: rgb(245 239 230 / 0.88); }
.lumen-hero__ctas { gap: 0.75rem 1rem; margin-block-start: var(--wp--preset--spacing--20) !important; }
.lumen-hero__ctas .is-style-outline > .wp-block-button__link { border-color: rgb(245 239 230 / 0.6); background: rgb(21 17 14 / 0.3); color: var(--wp--preset--color--ivory); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lumen-hero__ctas .is-style-outline > .wp-block-button__link:is(:hover, :focus-visible) { border-color: var(--wp--preset--color--ivory); color: var(--wp--preset--color--espresso); }

/* Foot strip: disciplines left, recent renders right. */
.lumen-hero__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem 2rem;
	inline-size: 100%;
	margin-block-start: var(--wp--preset--spacing--60) !important;
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: 1px solid rgb(245 239 230 / 0.2);
}
.lumen-hero__disciplines { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin: 0; padding: 0; list-style: none; font: var(--lumen-label); letter-spacing: 0.18em; text-transform: uppercase; color: rgb(245 239 230 / 0.82); }
.lumen-hero__disciplines li { margin: 0; }
.lumen-hero__recent { display: inline-flex; align-items: center; gap: 1rem; min-block-size: 44px; color: var(--wp--preset--color--ivory); text-decoration: none; }
.lumen-hero__thumbs { display: flex; }
.lumen-hero__thumbs img {
	inline-size: 4.25rem;
	block-size: 3rem;
	object-fit: cover;
	border: 2px solid var(--wp--preset--color--espresso);
	border-radius: 6px;
	transition: transform var(--lumen-dur-ui) var(--lumen-ease-out);
}
.lumen-hero__thumbs img + img { margin-inline-start: -1rem; }
.lumen-hero__recent:hover .lumen-hero__thumbs img:nth-child(1) { transform: translateX(-4px) rotate(-3deg); }
.lumen-hero__recent:hover .lumen-hero__thumbs img:nth-child(3) { transform: translateX(4px) rotate(3deg); }
.lumen-hero__recent-label { font: var(--lumen-label); letter-spacing: 0.16em; text-transform: uppercase; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 500ms var(--lumen-ease-out); }
.lumen-hero__recent:hover .lumen-hero__recent-label { background-size: 100% 1px; }
@media (max-width: 599px) {
	.lumen-hero__disciplines { display: none; }
	.lumen-hero__foot { justify-content: center; }
}

/* Intro sequence on load: image curtain + slow drift, then type. */
.lumen-hero__badge { --lumen-delay: 500ms; }
.lumen-hero__title { --lumen-delay: 650ms; }
.lumen-hero__lead { --lumen-delay: 1100ms; }
.lumen-hero__ctas { --lumen-delay: 1250ms; }
.lumen-hero__foot { --lumen-delay: 1450ms; }
@media (prefers-reduced-motion: no-preference) {
	.lumen-js .lumen-hero__media { animation: lumen-hero-curtain 1700ms var(--lumen-ease-in-out) both; }
	.lumen-js .lumen-hero__img { animation: lumen-hero-settle 2600ms var(--lumen-ease-out) both, lumen-drift 38s ease-in-out 2600ms infinite alternate; }
}
@keyframes lumen-hero-curtain { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes lumen-hero-settle { from { transform: scale(1.18); } to { transform: scale(1.04); } }
@keyframes lumen-drift { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.08) translate3d(-1.2%, -0.8%, 0); } }

/* === Intro: offset headline, text pushed right, layered images === */
.lumen-intro__grid { display: grid; gap: var(--wp--preset--spacing--40); }
.lumen-intro__grid > * { margin: 0; }
.lumen-intro__title { font-size: var(--wp--preset--font-size--xx-large); max-inline-size: 10em; }
.lumen-intro__text { max-inline-size: 30rem; font-size: var(--wp--preset--font-size--large); line-height: 1.5; color: var(--lumen-muted); }
.lumen-intro__visual { position: relative; margin-block-start: var(--wp--preset--spacing--50); padding-block-end: 18%; }
.lumen-intro__frame { margin: 0; overflow: hidden; background: var(--wp--preset--color--sand); }
.lumen-intro__frame img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.lumen-intro__frame--main { inline-size: 88%; aspect-ratio: 4 / 3; }
.lumen-intro__float { position: absolute; inset: auto 0 0 auto; inline-size: 40%; }
.lumen-intro__frame--detail { aspect-ratio: 4 / 5; outline: clamp(6px, 1vw, 14px) solid var(--wp--preset--color--ivory); --lumen-delay: 250ms; }

@media (min-width: 1080px) {
	.lumen-intro__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--wp--preset--spacing--40); }
	.lumen-intro__eyebrow { grid-column: 1 / 5; }
	.lumen-intro__title { grid-column: 1 / 9; }
	.lumen-intro__text { grid-column: 8 / 13; margin-block-start: var(--wp--preset--spacing--30) !important; } /* beats flow-layout margins */
	.lumen-intro__visual { grid-column: 2 / 13; margin-block-start: var(--wp--preset--spacing--60); padding-block-end: 12%; }
	.lumen-intro__frame--main { inline-size: 74%; aspect-ratio: 16 / 10; }
	.lumen-intro__float { inline-size: 30%; inset-block-end: -4%; }
}

/* === What We Create: numbered service list with descriptions === */
.lumen-sp__grid { display: grid; gap: var(--wp--preset--spacing--60); }
.lumen-sp__grid > * { margin: 0; }
.lumen-sp__head > * { margin: 0; }
.lumen-sp__head > * + * { margin-block-start: var(--wp--preset--spacing--40); }
.lumen-sp__title { font-size: var(--wp--preset--font-size--xx-large); }

.lumen-sp__listwrap { position: relative; }
.lumen-sp__list { margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--lumen-hair); }
.lumen-sp__item { margin: 0; border-block-end: 1px solid var(--lumen-hair); }
.lumen-sp__link {
	position: relative;
	display: grid;
	grid-template-columns: 2.25rem minmax(0, 1fr);
	align-items: start;
	gap: 0.75rem;
	padding-block: clamp(1.25rem, 2.2vw, 1.75rem);
	color: inherit;
	text-decoration: none;
}
.lumen-sp__num { padding-block-start: 0.55em; font: var(--lumen-label); letter-spacing: 0.16em; color: var(--wp--preset--color--caramel); }
.lumen-sp__body { display: grid; gap: 0.5rem; }
.lumen-sp__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.625rem, 1.25rem + 1.3vw, 2.5rem);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -0.015em;
	transition: transform 700ms var(--lumen-ease-out), color 400ms, opacity 400ms;
}
.lumen-sp__desc {
	max-inline-size: 34rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--lumen-muted);
	transition: transform 700ms var(--lumen-ease-out), opacity 400ms;
}
.lumen-sp__link:hover :is(.lumen-sp__name, .lumen-sp__desc),
.lumen-sp__link:focus-visible :is(.lumen-sp__name, .lumen-sp__desc) { transform: translateX(clamp(0.25rem, 1vw, 0.75rem)); }
.lumen-sp__link:hover .lumen-sp__name,
.lumen-sp__link:focus-visible .lumen-sp__name { color: var(--wp--preset--color--caramel); }
.lumen-sp__list:hover .lumen-sp__link:not(:hover) :is(.lumen-sp__name, .lumen-sp__desc) { opacity: 0.45; }


@media (min-width: 1080px) {
	.lumen-sp__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--wp--preset--spacing--60); align-items: start; }
	.lumen-sp__head { position: sticky; inset-block-start: calc(var(--lumen-header-h) + 2rem); }
	.lumen-sp__link { grid-template-columns: 3.5rem minmax(0, 1fr); }
}

/* === Studio: headline beside large city names === */
.lumen-studio__grid { display: grid; gap: var(--wp--preset--spacing--60); }
.lumen-studio__grid > *,
.lumen-studio__copy > * { margin: 0; }
.lumen-studio__copy > * + * { margin-block-start: var(--wp--preset--spacing--40); }
.lumen-studio__copy h2 { font-size: var(--wp--preset--font-size--xx-large); max-inline-size: 9em; }
.lumen-studio__text { max-inline-size: 30rem; color: var(--lumen-muted); }

.lumen-cities { margin: 0; padding: 0; list-style: none; }
.lumen-cities__item { display: grid; gap: 0.5rem; padding-block: clamp(1.25rem, 3vw, 2.25rem); border-block-start: 1px solid var(--lumen-hair); }
.lumen-cities__item:last-child { border-block-end: 1px solid var(--lumen-hair); }
.lumen-cities__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display);
	line-height: 0.88;
	letter-spacing: -0.04em;
}
.lumen-cities__name em { font-weight: 400; color: var(--wp--preset--color--brown); padding-inline-end: 0.08em; }
.lumen-cities__meta { font: var(--lumen-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--lumen-muted); }
.lumen-cities__item:last-child { text-align: end; }

@media (min-width: 1080px) {
	.lumen-studio__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; }
	.lumen-cities__name { font-size: clamp(4.5rem, 2rem + 5vw, 8rem); }
}

/* === FAQ (lumen/faq-pricing pattern + lumen/faq block markup) ===
 * Mirrors the FAQ rules in pages.css, which is not loaded on the front page. */
:where(body:not(.editor-styles-wrapper)) .lumen-faq-section:not(:has(.lumen-faq__item)) { display: none; }
.lumen-faq-section { border-block-start: 1px solid var(--lumen-hair); }
.lumen-faq-layout { display: grid; gap: var(--wp--preset--spacing--50); }
.lumen-faq-layout > *,
.lumen-faq-layout__intro > * { margin-block: 0; }
.lumen-faq-layout__intro > * + * { margin-block-start: 1.25rem; }
.lumen-faq-layout__intro h2 { max-inline-size: 11em; }
.lumen-faq { border-block-start: 1px solid var(--lumen-hair); }
.lumen-faq details { padding-block: 1.35rem; border-block-end: 1px solid var(--lumen-hair); }
.lumen-faq summary {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1.5rem;
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.75rem);
	line-height: 1.2;
	transition: color var(--lumen-dur-ui);
}
.lumen-faq summary::-webkit-details-marker { display: none; }
.lumen-faq summary:hover { color: var(--wp--preset--color--brown); }
.lumen-faq summary::after { content: "+" / ""; flex: none; font-family: var(--wp--preset--font-family--body); font-size: 1.4rem; font-weight: 300; }
.lumen-faq__answer { max-inline-size: 42rem; padding-block-start: 0.85rem; color: var(--lumen-muted); }
.lumen-faq__answer > :first-child { margin-block-start: 0; }
.lumen-faq__answer > :last-child { margin-block-end: 0; }
.lumen-link-arrow a {
	color: inherit;
	text-decoration: none;
	font: var(--lumen-label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
	padding-block: 0.35em;
}
@media (prefers-reduced-motion: no-preference) {
	.lumen-faq summary::after { transition: transform 500ms var(--lumen-ease-out); }
}
.lumen-faq details[open] summary::after { transform: rotate(45deg); }
@media (min-width: 1080px) {
	.lumen-faq-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 6rem; }
	.lumen-faq-layout__intro { position: sticky; inset-block-start: calc(var(--lumen-header-h) + 2rem); align-self: start; }
}

/* === Marquee (shared): lumen/partners and lumen/testimonials (layout "marquee") ===
 * Two copies of .lumen-marquee__group (the second aria-hidden) slide by -50%
 * in a loop. No Pause button (owner, 2026-10-10): it pauses while the viewport
 * is hovered or focused, off screen or in a hidden tab (marquee.js). Under
 * reduced motion the copy is hidden and nothing moves. */
.lumen-marquee { display: grid; gap: 0.5rem; }
.lumen-marquee__viewport {
	inline-size: 100%;
	overflow: hidden;
	container-type: inline-size;
	/* Soft edges so items fade in and out rather than being cut. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.lumen-marquee__viewport:focus-visible { -webkit-mask-image: none; mask-image: none; outline-offset: 6px; } /* the edge mask would clip the ring */
.lumen-marquee__track { display: flex; inline-size: max-content; }
.lumen-marquee__group {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-around;
	min-inline-size: 100cqi; /* each copy fills the band, so -50% loops without a gap */
	margin: 0;
	padding: 0;
	list-style: none;
}
.lumen-marquee__group > li { flex: none; margin: 0; }
@media (prefers-reduced-motion: no-preference) {
	.lumen-marquee[data-lumen-marquee] .lumen-marquee__track { animation: lumen-marquee var(--lumen-marquee-dur, 40s) linear infinite; }
	.lumen-marquee__viewport:is(:hover, :focus-within) .lumen-marquee__track,
	.lumen-marquee:is(.is-offscreen, .is-tab-hidden) .lumen-marquee__track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
	.lumen-marquee__group[aria-hidden="true"] { display: none; }
	.lumen-marquee__track { inline-size: auto; }
}
@keyframes lumen-marquee { to { transform: translateX(-50%); } }

/* === Partners: one slim row, tagline left + logo marquee right (lumen/logo-bar) ===
 * Below 782px the tagline sits centred above a full-bleed marquee.
 * Hidden when the block prints no logos. */
:where(body:not(.editor-styles-wrapper)) .lumen-partners:not(:has(.lumen-logos__item)) { display: none; }
.lumen-partners { border-block-end: 1px solid var(--lumen-hair); }
.lumen-partners > * { margin-block: 0; }
.lumen-partners__row { display: grid; gap: var(--wp--preset--spacing--30); align-items: center; }
.lumen-partners .lumen-partners__row > * { margin: 0; } /* beats the flow-layout block gap */
.lumen-partners__title {
	font: var(--lumen-label);
	letter-spacing: 0.18em;
	line-height: 1.6;
	text-align: center;
	text-transform: uppercase;
	color: var(--lumen-muted);
	text-wrap: balance;
}
/* Mobile: the marquee runs edge to edge, past the root padding. */
.lumen-partners .lumen-partners__logos {
	margin-inline: calc(-1 * var(--wp--style--root--padding-left, var(--lumen-gutter))) calc(-1 * var(--wp--style--root--padding-right, var(--lumen-gutter)));
}
@media (min-width: 782px) {
	.lumen-partners__row {
		grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr);
		column-gap: clamp(1.5rem, 3vw, 3rem);
	}
	.lumen-partners__title { max-inline-size: 15em; text-align: start; text-wrap: balance; }
	.lumen-partners .lumen-partners__logos {
		margin-inline: 0;
		padding-inline-start: clamp(1.5rem, 3vw, 3rem);
		border-inline-start: 1px solid var(--lumen-hair); /* quiet divider between label and logos */
	}
}

.lumen-logos__item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-block-size: 3.5rem;
	padding-inline: clamp(1.25rem, 2.6vw, 2.5rem);
}
.lumen-logos__link { display: flex; align-items: center; min-block-size: 44px; color: inherit; text-decoration: none; }
.lumen-logos__link:focus-visible { outline-offset: 4px; }
.lumen-logos__img {
	display: block;
	inline-size: auto;
	max-inline-size: clamp(7rem, 11vw, 10rem);
	block-size: auto;
	max-block-size: 2.5rem;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.7;
	transition: opacity var(--lumen-dur-ui) var(--lumen-ease-out);
}
.lumen-logos__item:hover .lumen-logos__img,
.lumen-logos__link:focus-visible .lumen-logos__img { filter: none; opacity: 1; }
.lumen-logos__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.625rem);
	font-weight: 500;
	letter-spacing: -0.01em;
	white-space: nowrap;
}
/* Placeholder tile ("[PLACEHOLDER]" in the admin title, no logo yet): obviously temporary. */
.lumen-logos__item.is-placeholder .lumen-logos__name {
	padding: 0.8rem 1.15rem;
	border: 1px dashed rgb(21 17 14 / 0.32);
	font: var(--lumen-label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lumen-muted);
}
/* Still, wrapping row: fewer than four logos, or reduced motion. */
.lumen-logos.is-static .lumen-marquee__viewport { -webkit-mask-image: none; mask-image: none; }
.lumen-logos.is-static .lumen-marquee__track { inline-size: auto; }
.lumen-logos.is-static .lumen-marquee__group { flex: 1 1 100%; flex-wrap: wrap; justify-content: center; min-inline-size: 0; }
@media (prefers-reduced-motion: reduce) {
	.lumen-logos .lumen-marquee__viewport { -webkit-mask-image: none; mask-image: none; }
	.lumen-logos .lumen-marquee__group { flex: 1 1 100%; flex-wrap: wrap; justify-content: center; min-inline-size: 0; row-gap: 0.25rem; }
}
@media (max-width: 781px) and (prefers-reduced-motion: reduce) {
	/* Keep the still grid of logos compact on small screens. */
	.lumen-logos__item { min-block-size: 3rem; padding-inline: clamp(0.6rem, 2.5vw, 1rem); }
	.lumen-logos__img { max-inline-size: 6rem; max-block-size: 1.9rem; }
}
@media (min-width: 782px) {
	.lumen-logos.is-static .lumen-marquee__group { justify-content: flex-start; }
}
@media (min-width: 782px) and (prefers-reduced-motion: reduce) {
	.lumen-logos .lumen-marquee__group { justify-content: flex-start; }
	.lumen-logos__item { padding-inline: 0 clamp(1.25rem, 2.6vw, 2.5rem); }
}

/* === Testimonials: compact head over a moving row of short quote cards, on sand ===
 * Last section of the home page, right above the footer. lumen/testimonials
 * with layout "marquee". Hidden when there are no testimonials. Reduced
 * motion: a still row the visitor scrolls (focusable). */
:where(body:not(.editor-styles-wrapper)) .lumen-voices:not(:has(.lumen-testimonial)) { display: none; }
.lumen-voices .lumen-voices__head { gap: var(--wp--preset--spacing--30); }
.lumen-voices__title { font-size: clamp(2rem, 1.55rem + 1.9vw, 3.25rem); line-height: 1; max-inline-size: 13em; }
.lumen-voices__aside { color: var(--lumen-muted); max-inline-size: 26rem; }
.lumen-voices__body { margin-block-start: var(--wp--preset--spacing--40) !important; } /* beats constrained-layout margins */

.lumen-testimonials--marquee .lumen-marquee__group { align-items: stretch; justify-content: space-evenly; }
.lumen-testimonials--marquee .lumen-marquee__item { display: flex; padding-inline: clamp(0.4rem, 0.8vw, 0.6rem); }
.lumen-testimonials--marquee .lumen-testimonial {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	box-sizing: border-box;
	inline-size: clamp(15rem, 84cqi, 22rem); /* cqi: the marquee viewport, so the next card always peeks */
	margin: 0;
	padding: clamp(1.15rem, 1.8vw, 1.5rem);
	background: var(--wp--preset--color--ivory);
	border: 1px solid var(--lumen-hair);
	white-space: normal;
}
.lumen-testimonial > * { margin: 0; }
.lumen-testimonial__headline {
	font: var(--lumen-label);
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brown);
}
.lumen-testimonial__quote { flex: 1; margin: 0; padding: 0; border: 0; }
.lumen-testimonial__quote p {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.2rem);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.005em;
	text-wrap: pretty;
}
.lumen-testimonials--marquee .lumen-testimonial__quote p {
	/* Short cards: at most five lines on phones, four from 600px (quotes are written to fit). */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	line-clamp: 5;
	overflow: hidden;
}
@media (min-width: 600px) {
	.lumen-testimonials--marquee .lumen-testimonial__quote p { -webkit-line-clamp: 4; line-clamp: 4; }
}
.lumen-testimonial__quote p::before {
	/* Decorative open quote: caramel is decoration only on light (design-system.md). */
	content: "\201C" / "";
	margin-inline-end: 0.06em;
	color: var(--wp--preset--color--caramel);
}
.lumen-testimonial__author {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	column-gap: 0.75rem;
	padding-block-start: 0.85rem;
	border-block-start: 1px solid var(--lumen-hair);
	line-height: 1.35;
}
.lumen-testimonial__photo {
	grid-row: span 2;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	inline-size: 3.25rem;
	block-size: 3.25rem;
	border-radius: 50%;
	object-fit: cover;
	background: var(--wp--preset--color--sand);
}
/* No headshot: initials on espresso (ivory on espresso, 16.4:1). */
.lumen-testimonial__monogram {
	background: var(--wp--preset--color--espresso);
	color: var(--wp--preset--color--ivory);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: 0.02em;
}
.lumen-testimonial__name { align-self: end; font-size: 0.9375rem; font-weight: 500; }
.lumen-testimonial__role { align-self: start; font-size: 0.8125rem; color: var(--lumen-muted); }
.lumen-testimonial__author:not(:has(.lumen-testimonial__role)) .lumen-testimonial__name { grid-row: span 2; align-self: center; }

@media (prefers-reduced-motion: reduce) {
	/* A still row the visitor scrolls (swipe, trackpad, or arrow keys once focused). */
	.lumen-testimonials--marquee .lumen-marquee__viewport {
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--lumen-gutter);
		padding-block-end: 0.75rem;
		-webkit-mask-image: none;
		mask-image: none;
		scrollbar-width: thin;
		scrollbar-color: var(--wp--preset--color--line) transparent;
	}
	.lumen-testimonials--marquee .lumen-marquee__track { padding-inline: var(--lumen-gutter); }
	.lumen-testimonials--marquee .lumen-marquee__group { justify-content: flex-start; min-inline-size: 0; }
	.lumen-testimonials--marquee .lumen-marquee__item { scroll-snap-align: start; }
}

/* Carousel layout of lumen/testimonials (not used on the home page; testimonials.js). */
.lumen-testimonials[data-lumen-carousel] .lumen-carousel__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	gap: 0 var(--wp--preset--spacing--40);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
}
.lumen-testimonials[data-lumen-carousel] .lumen-testimonial { display: grid; gap: var(--wp--preset--spacing--30); align-content: start; margin: 0; scroll-snap-align: start; }
.lumen-testimonials[data-lumen-carousel] .lumen-testimonial__quote p { font-size: clamp(1.625rem, 1.2rem + 1.8vw, 3rem); line-height: 1.14; }
.lumen-testimonials[data-lumen-carousel]:not(.is-enhanced) .lumen-carousel__controls { display: none; }
.lumen-testimonials[data-lumen-carousel] .lumen-carousel__controls { padding-inline: 0; }
.lumen-testimonials[data-lumen-carousel] .lumen-carousel__progress > span { position: absolute; inset-block: -1px; inset-inline-start: 0; inline-size: 100%; background: var(--wp--preset--color--espresso); transform-origin: 0 50%; transform: scaleX(var(--lumen-progress, 0)); }
.lumen-testimonials[data-lumen-carousel] :is(.lumen-carousel__prev, .lumen-carousel__next) { inline-size: 3rem; block-size: 3rem; border: 1px solid currentColor; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }