/*
 * services.css — section 02, the core BPO services deck.
 * Contents: 1 local tokens · 2 shell · 3 deck layout · 4 copy column ·
 * 5 controls · 6 stage, viewport, track · 7 card shell and accents ·
 * 8 card intro · 9 capabilities panel · 10 the deck (needs JavaScript) ·
 * 11 narrow screens.
 *
 * Loaded by inc/assets.php as "synergi-section-services", only on pages that
 * declare the section through syn_use_sections(). Markup: sections/services.php.
 * Behaviour: assets/js/sections/services.js.
 *
 * main.min.css styles this section across EIGHT passes, roughly 180 rules, and
 * the later passes reverse the earlier ones wholesale — the first pass is a
 * two-column light card on a white background, the last is a single-column dark
 * gradient card in a fanned deck. What is here is only what survives the
 * cascade, resolved once with the whole file's source order and specificity
 * taken into account (the same method the Stage 2 :root audit used, since the
 * eight-layer problem is identical).
 *
 * THREE DELIBERATE DEVIATIONS from what the source renders today. Each is a
 * leftover from an earlier pass that the last pass tried and failed to undo:
 *
 * 1. The card summary. The source's last pass writes
 *    `.service-card-summary { font-weight:400; text-transform:none;
 *    letter-spacing:normal }` to make it a readable sentence — but an earlier
 *    `.service-card-intro>p:first-of-type` rule has higher specificity (0,2,1
 *    against 0,2,0), so it never lands and the summary renders UPPERCASE, 800
 *    weight, letter-spaced, at 0.68rem. A 15-word sentence set in caps at 11px
 *    with a 3-line clamp is plainly not what the reset was written to produce.
 *    The reset's values are used here. This is visible in a side-by-side.
 *
 * 2. The card grid between 61.25rem and 74rem. The last pass sets
 *    `grid-template-columns:1fr` unconditionally, but a first-pass media block
 *    later in the file restores a two-column card in that one window — which,
 *    combined with the last pass's `grid-template-rows:auto 1fr`, puts the
 *    capabilities panel beside the intro and leaves the bottom half of a 38rem
 *    card empty. One column at every width here.
 *
 * 3. Card gap in the same window (3rem, then 2rem, against 1.4rem either side)
 *    is the other half of that same leftover, and goes with it.
 *
 * Also not carried across: `.service-deck-stage::before`, a large ringed circle
 * behind the deck that a later pass sets to `display:none`; and the source's
 * `filter: brightness(0) invert(1)` on the service icons, unnecessary now the
 * icons are inlined and inherit currentColor (see syn_inline_icon()).
 *
 * THE DECK'S HEIGHT IS ITS OWN, which is the one structural departure from the
 * source. There, cards are position: absolute, so nothing in the track has a
 * height and the track needs one — the source writes eight (a track height and
 * a card height at each of four breakpoints), each a guess at how tall the
 * longest capability list wraps to. Guessing high left the shorter cards with
 * dead space and stood the deck taller than a laptop viewport; guessing low
 * would clip content, since the card is overflow: hidden. Here the cards share
 * one grid cell instead (section 10), so the tallest card sets the height and
 * the other five match it. All eight numbers are gone, and so is the reason
 * they were wrong. The three rules this rests on — a content-sized intro
 * (section 8), a capabilities panel that hugs its list (section 9) and a
 * service name sized from the card so the longest fits one line (section 8) —
 * each carry a note where they are written.
 *
 * Class map, design source -> theme:
 *   .services-section    -> .syn-services         .service-carousel -> .syn-services__deck
 *   .service-deck-copy   -> .syn-services__copy   .service-deck-lead -> .syn-services__lead
 *   .service-controls    -> .syn-services__controls   button -> .syn-services__control
 *   .service-deck-stage  -> .syn-services__stage  .service-viewport -> .syn-services__viewport
 *   .service-track       -> .syn-services__track  .service-card -> .syn-services__card
 *   .service-card-intro  -> .syn-services__intro  .service-card-kicker -> .syn-services__kicker
 *   .service-card-index  -> .syn-services__index  .service-card-label p -> .syn-services__label
 *   .service-card-summary -> .syn-services__summary
 *   .service-card-capabilities -> .syn-services__capabilities
 *   .text-link           -> .syn-text-link        (shared, defined in base.css)
 *   .eyebrow             -> .syn-eyebrow          (shared, defined in base.css)
 *
 * The source paints the whole card in white and near-black at a dozen
 * opacities. All of them are derived with color-mix() from palette tokens
 * rather than written as rgba() literals (CLAUDE.md §2.7). The six accent
 * gradients cannot be: their hues (teal, gold, violet, rose) are outside the §3
 * palette, so they live in theme.json under settings.custom and reach this file
 * through the alias layer in base.css, like every other token.
 */

/* ==========================================================================
   1. Local tokens
   The opacities the card reuses. Named for the job, not the number, so a change
   of shade is one edit.
   ========================================================================== */

.syn-services {
	--syn-services-on-strong: color-mix(in srgb, var(--syn-white) 94%, transparent);
	--syn-services-on-muted: color-mix(in srgb, var(--syn-white) 82%, transparent);
	--syn-services-on-soft: color-mix(in srgb, var(--syn-white) 72%, transparent);
	--syn-services-line: color-mix(in srgb, var(--syn-white) 30%, transparent);
	--syn-services-line-soft: color-mix(in srgb, var(--syn-white) 18%, transparent);
	--syn-services-veil: color-mix(in srgb, var(--syn-white) 8%, transparent);

	/* The panel behind the capability list. The source uses a near-black that
	   sits two shades below ink; ink at 58% reads the same over the gradients. */
	--syn-services-panel: color-mix(in srgb, var(--syn-ink) 58%, transparent);

	/* Section-specific radii. The §3 radius scale tops out at 8px, which is for
	   UI chrome — these two are the design's soft card corners and have no
	   token because nothing else in the theme uses them. */
	--syn-services-card-radius: 1.6rem;
	--syn-services-panel-radius: 1.15rem;
}

/* ==========================================================================
   2. Shell
   ========================================================================== */

.syn-services {
	/* Clipped, not hidden: the fanned cards overhang the container on the
	   inline-end side and must not open a horizontal scrollbar. */
	overflow: clip;
	border-block-end: 1px solid var(--syn-border);
	background-color: var(--syn-white);
}

/* ==========================================================================
   3. Deck layout
   Copy on one side, the card stage on the other.
   ========================================================================== */

.syn-services__deck {
	position: relative;
	display: grid;
	grid-template-columns: minmax(18rem, 0.72fr) minmax(35rem, 1.28fr);
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: center;
	min-inline-size: 0;
}

/* ==========================================================================
   4. Copy column
   ========================================================================== */

.syn-services__copy {
	position: relative;
	/* Above the stage, so the fan never overlaps the heading when the two
	   columns are close together. */
	z-index: 8;
	min-inline-size: 0;
}

.syn-services__title {
	max-inline-size: 8em;
	margin-block: 0 1rem;
	color: var(--syn-navy);
	font-size: clamp(2.2rem, 3.6vw, 3.5rem);
	letter-spacing: 0;
	line-height: 1.08;
}

.syn-services__lead {
	max-inline-size: 36rem;
	margin-block-start: 0;
	color: var(--syn-text-soft);
	font-size: 0.92rem;
	line-height: 1.55;
}

/* ==========================================================================
   5. Controls
   Hidden by default and shown only where JavaScript can run: a previous/next
   button that cannot move anything is worse than no button at all. Same guard
   base.css uses for the scroll reveal.
   ========================================================================== */

.syn-services__controls {
	display: none;
}

@media (scripting: enabled) {

	.syn-services__controls {
		display: flex;
		gap: 0.55rem;
		margin-block: 1.5rem 1rem;
	}
}

/* One arrow style site-wide (2 Sep): these are the same square control the
   blog and industries carousels draw, byte for byte, replacing this deck's
   own larger circle. Three carousels, one look — a reader who has learned
   one set of arrows has learned them all. */
.syn-services__control {
	display: inline-grid;
	inline-size: 3rem;
	block-size: 3rem;
	padding: 0;
	place-items: center;
	border: 1px solid var(--syn-border);
	border-radius: 0.45rem;
	background-color: var(--syn-white);
	color: var(--syn-navy);
	cursor: pointer;
	transition:
		color var(--syn-duration-fast),
		border-color var(--syn-duration-fast),
		background-color var(--syn-duration-fast),
		transform var(--syn-duration-fast);
}

.syn-services__control svg {
	inline-size: 1.35rem;
	block-size: 1.35rem;
	fill: none;
	stroke: currentcolor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}

.syn-services__control:hover {
	border-color: var(--syn-navy);
	background-color: var(--syn-navy);
	color: var(--syn-white);
	transform: translateY(-2px);
}

.syn-services__control:focus-visible {
	outline-offset: 3px;
}

/* ==========================================================================
   6. Stage, viewport, track
   The stage reserves the room the fan needs on the inline-end side; the
   viewport is the focusable, keyboard-operable region; the track holds the
   cards. Without JavaScript the track is a plain stack (see 10).
   ========================================================================== */

.syn-services__stage {
	position: relative;
	min-inline-size: 0;
	padding-block: 0.5rem 2.5rem;
	padding-inline: 0 4rem;
}

.syn-services__viewport {
	position: relative;
	z-index: 1;
	min-inline-size: 0;
	/* Vertical scrolling stays with the page; horizontal is the deck's. */
	touch-action: pan-y;
}

.syn-services__viewport:focus-visible {
	/* Further out than the theme default: the ring has to clear the card's
	   shadow to stay visible against it. */
	outline-offset: 0.35rem;
}

.syn-services__track {
	display: grid;
	gap: 1.5rem;
	min-inline-size: 0;
}

/* ==========================================================================
   7. Card shell and accents
   ========================================================================== */

.syn-services__card {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	/*
	 * Intro at the top, capabilities panel at the bottom. The 1fr row is the
	 * slack: on a card with a short capability list it opens up between the
	 * link and the panel, which reads as breathing room, instead of stretching
	 * the panel into a half-empty box the way the source did.
	 */
	grid-template-rows: auto 1fr;
	gap: 1.4rem;
	min-inline-size: 0;
	/*
	 * Makes the card a size container, so the service name can be sized against
	 * the card's own width rather than the viewport's — see .syn-services__name.
	 */
	container-type: inline-size;
	padding: clamp(1.85rem, 2.8vw, 2.35rem);
	overflow: hidden;
	border: 1px solid var(--syn-services-line-soft);
	border-radius: var(--syn-services-card-radius);
	color: var(--syn-white);
	box-shadow:
		0 2.25rem 4.5rem color-mix(in srgb, var(--syn-ink) 24%, transparent),
		0 0.35rem 1rem color-mix(in srgb, var(--syn-ink) 18%, transparent);
}

/* Fine horizontal grain plus a diagonal sheen, both barely there. */
.syn-services__card::before {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background-image:
		repeating-linear-gradient(
			0deg,
			transparent 0,
			transparent 5px,
			color-mix(in srgb, var(--syn-white) 2%, transparent) 6px
		),
		linear-gradient(118deg, color-mix(in srgb, var(--syn-white) 12%, transparent), transparent 44%);
	content: "";
	pointer-events: none;
}

/* The large ring that breaks the top corner. */
.syn-services__card::after {
	position: absolute;
	inset-block-start: 15%;
	inset-inline-end: -18%;
	inline-size: 24rem;
	block-size: 24rem;
	border: 1px solid var(--syn-services-line-soft);
	border-radius: 50%;
	content: "";
	opacity: 0.32;
	pointer-events: none;
}

/*
 * One accent per service. Values live in theme.json (settings.custom) and are
 * aliased in base.css, because these hues are outside the §3 palette and a
 * gradient literal in a stylesheet is exactly what CLAUDE.md §2.7 forbids.
 */
.syn-services__card--accounting {
	background-image: var(--syn-service-accounting);
}

.syn-services__card--human-resources {
	background-image: var(--syn-service-human-resources);
}

.syn-services__card--procurement {
	background-image: var(--syn-service-procurement);
}

.syn-services__card--technology-ai {
	background-image: var(--syn-service-technology-ai);
}

.syn-services__card--marketing {
	background-image: var(--syn-service-marketing);
}

.syn-services__card--project-management {
	background-image: var(--syn-service-project-management);
}

/* ==========================================================================
   8. Card intro
   Rows size to their content, with one gap between them.

   The source fixed all four (4rem 6.8rem 3.25rem auto), the second of which is
   two lines of heading — so every card with a one-line name carried a blank
   line's worth of card, and only Project Management ever used it. The cards
   still line up with each other because the deck gives them a common height
   (section 10) and every row above the name is a fixed size, so the name starts
   at the same point on all six.
   ========================================================================== */

.syn-services__intro {
	position: relative;
	z-index: 2;
	display: grid;
	row-gap: 0.9rem;
	align-content: start;
	align-self: stretch;
	min-block-size: 0;
}

/*
 * The kicker is a positioning context, not a flex row: the index, the label and
 * the icon are placed against its box so a long label can never push the icon
 * out of the corner.
 */
.syn-services__kicker {
	position: relative;
	display: block;
	block-size: 3.55rem;
	min-block-size: 3.55rem;
	margin: 0;
}

.syn-services__index {
	position: absolute;
	inset-block-start: 0.15rem;
	inset-inline-start: 0;
	color: var(--syn-services-on-strong);
	font-size: 0.58rem;
	font-weight: 850;
	letter-spacing: 0.08em;
}

.syn-services__label {
	position: absolute;
	inset-block-start: 1.45rem;
	inset-inline-start: 0;
	inset-inline-end: 4.25rem;
	max-inline-size: 28rem;
	margin: 0;
	color: var(--syn-services-on-soft);
	font-size: 0.58rem;
	font-weight: 800;
	letter-spacing: 0.11em;
	line-height: 1.25;
	text-transform: uppercase;
}

.syn-services__icon {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	inline-size: 2.8rem;
	block-size: 2.8rem;
	padding: 0.62rem;
	border: 1px solid color-mix(in srgb, var(--syn-white) 28%, transparent);
	border-radius: 50%;
	/* The inlined SVG strokes with currentColor, so this one line is what makes
	   the same file cyan elsewhere and white here. */
	color: var(--syn-white);
	opacity: 0.9;
}

.syn-services__icon svg {
	inline-size: 100%;
	block-size: 100%;
}

/*
 * Sized against the card, not the viewport. "Project Management" is the longest
 * of the six by a wide margin, and at the source's size it was the only one that
 * wrapped — which cost every other card a blank line, because a deck has to give
 * all six the same height.
 *
 * 9.5cqi is 9.5% of the card's own inline size, which fits that name on one line
 * at every width the theme is built for, from a 320px phone to the full
 * container. The viewport clamp on the line above is the fallback for a browser
 * without container query units; it is the source's own scale, so such a browser
 * gets the old two-line wrap rather than anything broken.
 */
.syn-services__name {
	align-self: start;
	max-inline-size: 100%;
	margin: 0;
	color: var(--syn-white);
	font-size: clamp(1.4rem, 7.35vw, 3.25rem);
	font-size: min(3.25rem, 9.5cqi);
	letter-spacing: -0.055em;
	line-height: 0.98;
}

/*
 * Clamped to three lines so a long summary cannot push the link out of its row
 * and break the alignment the fixed rows above exist to hold. The -webkit-
 * prefixed properties are the only form with support; they are not legacy.
 */
.syn-services__summary {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	align-self: start;
	max-inline-size: 31rem;
	margin: 0;
	overflow: hidden;
	color: var(--syn-services-on-soft);
	font-size: 0.7rem;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1.45;
	text-transform: none;
}

/* The shared arrow link, rebuilt as a pill for the dark card. */
.syn-services__link {
	align-self: start;
	inline-size: fit-content;
	margin-block-start: 0;
	padding-block: 0.62rem;
	padding-inline: 0.85rem;
	border: 1px solid var(--syn-services-line);
	border-radius: var(--syn-radius-md);
	background-color: var(--syn-services-veil);
	color: var(--syn-white);
	font-size: 0.66rem;
	letter-spacing: 0;
}

.syn-services__link:hover {
	border-color: var(--syn-white);
	background-color: var(--syn-white);
	color: var(--syn-ink);
}

/* ==========================================================================
   9. Capabilities panel
   ========================================================================== */

.syn-services__capabilities {
	position: relative;
	z-index: 2;
	justify-self: start;
	/*
	 * Hugs its list and sits on the card's bottom edge. Stretching it instead —
	 * what the source did — is what turned Accounting's six short capabilities
	 * into a panel with a third of its height empty, while Procurement's seven
	 * long ones filled the same box exactly.
	 */
	align-self: end;
	inline-size: min(100%, 28rem);
	padding: 1rem 1.1rem;
	border: 1px solid color-mix(in srgb, var(--syn-white) 17%, transparent);
	border-radius: var(--syn-services-panel-radius);
	background-color: var(--syn-services-panel);
	backdrop-filter: blur(12px);
}

.syn-services__capabilities-title {
	margin-block: 0 0.65rem;
	color: var(--syn-services-on-muted);
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.syn-services__capability-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.syn-services__capability-list li {
	position: relative;
	min-inline-size: 0;
	padding-inline-start: 1rem;
	color: var(--syn-services-on-strong);
	font-size: 0.78rem;
	line-height: 1.45;
}

.syn-services__capability-list li::before {
	position: absolute;
	inset-block-start: 0.55em;
	inset-inline-start: 0;
	inline-size: 0.32rem;
	block-size: 0.32rem;
	border-radius: 50%;
	background-color: var(--syn-cyan);
	content: "";
}

/* ==========================================================================
   10. The deck
   Everything that turns the stack above into a fan. Gated on scripting because
   only services.js can move it: with JavaScript off the rules in 6 and 7 leave
   six readable cards stacked down the page, which is the whole section's
   content, in order, with nothing hidden.

   The cards are stacked in one place and offset by transform — compositor-only
   properties, so moving through the deck never triggers layout (CLAUDE.md §6).
   ========================================================================== */

@media (scripting: enabled) {

	.syn-services__track {
		position: relative;
		/* Still a grid, but a one-cell one: every card is placed in the same
		   cell rather than taken out of flow. See the card rule below. */
		gap: 0;
	}

	.syn-services__card {
		/*
		 * All six cards share one grid cell. This is what makes the deck's
		 * height come from its own content: the cell is as tall as the tallest
		 * card, and every card stretches to match it, so they stay a flush
		 * stack without anyone writing a height down.
		 *
		 * The source used position: absolute instead, which takes the cards out
		 * of flow — and once nothing in the track has a height, the track needs
		 * one, so the source gave it four (38rem, then 33.75, 35.75 and 37.25
		 * at three breakpoints) and gave the cards four more to match. Every one
		 * of those eight numbers is a guess at how tall the longest capability
		 * list wraps, which is why the shorter cards had room to spare and the
		 * deck stood taller than a laptop viewport.
		 */
		grid-area: 1 / 1;
		justify-self: start;
		inline-size: calc(100% - 7rem);
		/* Only the front card takes clicks; the ones behind it are decoration
		   until they are brought forward. services.js keeps aria-hidden and
		   inert in step with this. */
		pointer-events: none;
		cursor: grab;
		user-select: none;
		transform-origin: 45% 94%;
		transition:
			transform 680ms var(--syn-ease-out),
			filter 680ms var(--syn-ease-out),
			opacity 680ms var(--syn-ease-out);
		will-change: transform;
	}

	.syn-services__viewport.syn-is-dragging,
	.syn-services__viewport.syn-is-dragging .syn-services__card {
		cursor: grabbing;
	}

	/*
	 * Deck positions. 0 is the card facing the reader; 1 to 5 fan out behind it,
	 * each one a step further along and a step darker. services.js rotates the
	 * numbers, so this is the only place the geometry is written down.
	 */
	.syn-services__card[data-syn-deck-position="0"] {
		z-index: 5;
		pointer-events: auto;
		transform: translate3d(0, 0, 0) rotate(0deg);
	}

	.syn-services__card[data-syn-deck-position="1"] {
		z-index: 4;
		filter: brightness(0.92) saturate(0.9);
		transform: translate3d(1.55rem, 0.5rem, 0) rotate(1deg);
	}

	.syn-services__card[data-syn-deck-position="2"] {
		z-index: 3;
		filter: brightness(0.84) saturate(0.86);
		transform: translate3d(3rem, 1rem, 0) rotate(2deg);
	}

	.syn-services__card[data-syn-deck-position="3"] {
		z-index: 2;
		filter: brightness(0.77) saturate(0.82);
		transform: translate3d(4.4rem, 1.55rem, 0) rotate(3deg);
	}

	.syn-services__card[data-syn-deck-position="4"] {
		z-index: 1;
		filter: brightness(0.7) saturate(0.78);
		transform: translate3d(5.65rem, 2.05rem, 0) rotate(4deg);
	}

	.syn-services__card[data-syn-deck-position="5"] {
		z-index: 0;
		filter: brightness(0.64) saturate(0.74);
		transform: translate3d(6.75rem, 2.55rem, 0) rotate(5deg);
	}
}

/* ==========================================================================
   11. Narrow screens
   Four steps, all from the design source. Below 48rem the copy column
   dissolves into the deck grid (display: contents) so the stage can sit between
   the lead and the buttons, which is the only order that works in one column.
   ========================================================================== */

@media (max-width: 74rem) {

	.syn-services__deck {
		grid-template-columns: minmax(17rem, 0.68fr) minmax(31rem, 1.32fr);
	}

	.syn-services__stage {
		padding-inline-end: 5.5rem;
	}
}

@media (max-width: 67.5rem) {

	.syn-services__stage {
		inline-size: min(100%, 52rem);
		padding-inline-end: 3rem;
	}
}

@media (max-width: 61.25rem) {

	.syn-services__deck {
		grid-template-columns: 1fr;
		gap: 2rem;
		inline-size: 100%;
	}

	/* The copy becomes two columns of its own: heading on one side, lead on the
	   other, buttons across the bottom. */
	.syn-services__copy {
		display: grid;
		grid-template-columns: minmax(17rem, 0.85fr) minmax(18rem, 1.15fr);
		gap: 1rem 3rem;
		align-items: end;
	}

	.syn-services__copy .syn-eyebrow,
	.syn-services__title {
		grid-column: 1;
	}

	.syn-services__lead {
		grid-column: 2;
		grid-row: 1 / 3;
	}

	.syn-services__controls {
		grid-column: 1 / -1;
	}

	.syn-services__stage {
		max-inline-size: 100%;
		margin-inline: auto;
	}
}

@media (max-width: 47.99rem) {

	.syn-services {
		padding-block-end: 2rem;
	}

	.syn-services__deck {
		min-block-size: 0;
		row-gap: 0;
	}

	.syn-services__copy {
		display: contents;
	}

	.syn-services__title {
		grid-column: 1 / -1;
		margin-block-end: 0.8rem;
	}

	.syn-services__lead {
		grid-column: 1 / -1;
		grid-row: auto;
		font-size: 0.82rem;
		line-height: 1.5;
	}

	.syn-services__stage {
		order: 1;
		inline-size: 100%;
		margin-block-start: 1.75rem;
		padding-block: 0.25rem 0.5rem;
		padding-inline: 0 0.75rem;
	}

	.syn-services__card {
		gap: 0.55rem;
		padding: 0.9rem;
	}

	.syn-services__kicker {
		block-size: 3.2rem;
		min-block-size: 3.2rem;
	}

	.syn-services__label {
		inset-block-start: 1.35rem;
		inset-inline-end: 3.25rem;
		font-size: 0.53rem;
	}

	.syn-services__icon {
		inline-size: 2.4rem;
		block-size: 2.4rem;
		padding: 0.5rem;
	}

	.syn-services__summary {
		font-size: 0.64rem;
		line-height: 1.42;
	}

	.syn-services__link {
		padding-block: 0.5rem;
		padding-inline: 0.68rem;
		font-size: 0.61rem;
	}

	.syn-services__capabilities {
		inline-size: 100%;
		padding: 0.72rem;
	}

	.syn-services__capabilities-title {
		font-size: 0.58rem;
	}

	.syn-services__capability-list {
		gap: 0.4rem 0.7rem;
	}

	.syn-services__capability-list li {
		padding-inline-start: 0.6rem;
		font-size: 0.72rem;
		line-height: 1.4;
	}
}

@media (scripting: enabled) and (max-width: 47.99rem) {

	.syn-services__card {
		inline-size: calc(100% - 1.5rem);
	}

	/* The fan closes up: there is no room for a 7rem spread on a phone. */
	.syn-services__card[data-syn-deck-position="1"] {
		transform: translate3d(0.3rem, 0.35rem, 0) rotate(0.5deg);
	}

	.syn-services__card[data-syn-deck-position="2"] {
		transform: translate3d(0.55rem, 0.7rem, 0) rotate(1deg);
	}

	.syn-services__card[data-syn-deck-position="3"] {
		transform: translate3d(0.8rem, 1.05rem, 0) rotate(1.5deg);
	}

	.syn-services__card[data-syn-deck-position="4"] {
		transform: translate3d(1.05rem, 1.4rem, 0) rotate(2deg);
	}

	.syn-services__card[data-syn-deck-position="5"] {
		transform: translate3d(1.3rem, 1.75rem, 0) rotate(2.5deg);
	}

	.syn-services__controls {
		order: 2;
		grid-column: auto;
		justify-content: center;
		gap: 1rem;
		margin-block: 1.25rem 0;
	}

	.syn-services__control {
		inline-size: 2.75rem;
		block-size: 2.75rem;
	}
}

/* Two more steps down, where the wrapped text needs the card to be taller. */
@media (max-width: 27rem) {

	.syn-services__capabilities {
		padding: 0.7rem 0.8rem;
	}

	.syn-services__capability-list li {
		font-size: 0.7rem;
	}
}

@media (max-width: 22rem) {

	.syn-services__capability-list li {
		font-size: 0.66rem;
	}
}