/*
 * Service and document-type page family (T100, Phase 3S).
 *
 * P02 "Legal Translation" and P03-P06, the four document types, on the
 * inner-page rhythm of design/creative-brief.md §13.2: the page-header
 * family on ivory over paper-200, the body on ivory with one paper-200
 * band per page, the quote desk on petrol-950, the footer on petrol-900.
 *
 * Enqueued by functions.php on those two templates only. Everything is
 * scoped under `.qlp-svc`, the class both templates put on <main>, so no
 * rule here can reach another template. `.qlp-svc--service` and
 * `.qlp-svc--type` exist for the two families; nothing below needs them
 * yet, because the two page bodies use disjoint section classes.
 *
 * What this file does NOT own: tokens, the page-header family, the
 * eyebrow and its verification mark, `.qlp-statement`, `.qlp-ruled`,
 * `.qlp-sheet-surface`, `.qlp-textlink`, the grounds, the focus ring and
 * the reveal contract all come from style.css (T057), and the aligned
 * sheets come from `quicklink_prime_svg_aligned_sheets()`. A mark is
 * always the one asset in assets/svg/, masked with `currentColor` or a
 * token: never a second copy of a shape (VR-F018).
 *
 * Logical properties only (constitution VII, ADR-002): no left/right
 * anywhere, and every horizontal motion follows `--qlp-motion-x`
 * (MOT-006). Every text at or below 18 px is set in a solid token that
 * clears 4.5:1 on its own ground (VR-F020).
 */

/* ------------------------------------------------------------------ tokens */

/* Short local names for the system's own custom properties, so this family
 * breathes on exactly the same grid as the home page and one change to
 * style.css moves both. Nothing new is defined here. */
.qlp-svc {
	--qlp-petrol-800: var(--wp--preset--color--petrol-800, #103B3A);
	--qlp-petrol-700: var(--wp--preset--color--petrol-700, #17504E);
	--qlp-paper-50: var(--wp--preset--color--paper-50, #FBF9F5);
	--qlp-ivory: var(--wp--preset--color--ivory, #F7F4EE);
	--qlp-paper-200: var(--wp--preset--color--paper-200, #EFE9DC);
	--qlp-paper-300: var(--wp--preset--color--paper-300, #E4DCCB);
	--qlp-ink-700: var(--wp--preset--color--ink-700, #2C3A37);
	--qlp-muted-400: var(--wp--preset--color--muted-400, #7C8985);
	--qlp-gold-line: var(--wp--preset--color--gold-line, #A57E4A);
	--qlp-gold-700: var(--wp--preset--color--gold-700, #81633A);

	--qlp-f-ui: var(--qlp-font-ui);
	--qlp-f-display: var(--qlp-font-display);
	--qlp-f-body: var(--qlp-font-body);

	--qlp-x: var(--qlp-motion-x);
	--qlp-dur-fast: var(--qlp-motion-duration-fast);
	--qlp-dur-base: var(--qlp-motion-duration-base);
	--qlp-dur-slow: var(--qlp-motion-duration-slow);
	--qlp-ease: var(--qlp-motion-ease-out);
	--qlp-rise: var(--qlp-motion-distance);
}

/* Arabic sets the display and body roles in the UI face (brief §4.2). */
[dir="rtl"] .qlp-svc {
	--qlp-f-display: var(--qlp-font-ui);
	--qlp-f-body: var(--qlp-font-ui);
}

/* -------------------------------------------------------------- scaffolding */

/* The pattern owns its own widths: neutralise the constrained layout and
 * the flow gaps core prints around post content, so a section can run edge
 * to edge and set its own rhythm. */
.qlp-svc > .wp-block-post-content,
.qlp-svc .wp-block-post-content > * {
	max-inline-size: none;
	margin-block: 0;
}

.qlp-svc > .wp-block-post-content {
	padding-inline: 0;
}

.qlp-svc .wp-block-group > *,
.qlp-svc :is(h1, h2, h3, p, ul, ol, li) {
	margin-block: 0;
}

.qlp-svc .qlp-section {
	isolation: isolate;
	position: relative;
}

/* ---------------------------------------------------------------- typography */

.qlp-svc h2,
.qlp-svc h3 {
	color: var(--qlp-petrol-800);
	font-family: var(--qlp-f-display);
	font-weight: 600;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.qlp-svc h2 {
	font-size: clamp(1.625rem, 1.35rem + 1.2vw, 2.25rem);
	line-height: 1.18;
}

.qlp-svc h3 {
	font-size: 1.1875rem;
	line-height: 1.3;
}

/* Arabic display type: Cairo 700, ~7 % smaller nominal size with taller
 * leading, so the rendered block depth matches the English (brief §13). */
[dir="rtl"] .qlp-svc h2,
[dir="rtl"] .qlp-svc h3 {
	font-weight: 700;
	letter-spacing: 0;
}

[dir="rtl"] .qlp-svc h2 {
	font-size: clamp(1.5rem, 1.25rem + 1.05vw, 2.05rem);
	line-height: 1.4;
}

[dir="rtl"] .qlp-svc h3 {
	font-size: 1.125rem;
	line-height: 1.6;
}

.qlp-svc p {
	color: var(--qlp-ink-700);
	font-family: var(--qlp-f-body);
	font-size: 1.0625rem;
	line-height: 1.65;
}

[dir="rtl"] .qlp-svc p {
	line-height: 1.9;
}

/* The statement is `.qlp-statement` from style.css, re-declared here at the
 * same values: `.qlp-svc p` above is one specificity point heavier than the
 * system's own single-class rule, so without this the display line would be
 * silently demoted to body size (and its ch-based measure would collapse
 * with it). */
.qlp-svc .qlp-statement {
	color: var(--qlp-petrol-800);
	font-family: var(--qlp-f-display);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
	font-weight: 600;
	line-height: 1.25;
	max-inline-size: 22ch;
	text-wrap: balance;
}

[dir="rtl"] .qlp-svc .qlp-statement {
	font-weight: 700;
	line-height: 1.55;
	max-inline-size: 24ch;
}

/* ------------------------------------------------------------ section heads */

.qlp-svc .qlp-sechead {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-block-end: clamp(1.75rem, 1.4rem + 1.6vw, 3rem);
	/* VR-F004: never a narrow one-word-per-line column at 1440 px. */
	max-inline-size: min(100%, 58.34%);
}

@media (max-width: 899px) {
	.qlp-svc .qlp-sechead {
		max-inline-size: 100%;
	}
}

.qlp-svc .qlp-eyebrow p {
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	letter-spacing: inherit;
	line-height: inherit;
}

/* ----------------------------------------------------------------- controls */

/* Text link with the register-line underscore and a direction-aware
 * chevron, matching the home page's secondary affordance exactly. */
.qlp-svc .qlp-linkline a {
	align-items: center;
	border-block-end: 1px solid var(--qlp-gold-line);
	color: var(--qlp-petrol-800);
	display: inline-flex;
	font-family: var(--qlp-f-ui);
	font-size: 0.9375rem;
	font-weight: 600;
	gap: 0.55em;
	min-block-size: 44px;
	padding-block-end: 3px;
	text-decoration: none;
	transition: border-color var(--qlp-dur-fast) var(--qlp-ease);
}

.qlp-svc .qlp-linkline a::after {
	block-size: 7px;
	border-block-start: 1.5px solid currentColor;
	border-inline-end: 1.5px solid currentColor;
	content: "";
	flex: none;
	inline-size: 7px;
	transform: rotate(calc(var(--qlp-x) * 45deg));
	transition: translate var(--qlp-dur-fast) var(--qlp-ease);
}

.qlp-svc .qlp-linkline a:hover {
	border-block-end-color: var(--qlp-petrol-800);
}

.qlp-svc .qlp-linkline a:hover::after {
	translate: calc(var(--qlp-x) * 3px) 0;
}

.qlp-svc :is(a, button, summary):focus-visible {
	border-radius: 1px;
	outline: 2px solid var(--qlp-focus);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------- motion */

/* MOT-002 / MOT-003: the resting state is the finished state. Only a page
 * that has JavaScript and has not asked for reduced motion is ever offset,
 * and motion.js puts it back by adding `is-visible`.
 *
 * The stagger is carried by a class rather than by `[data-qlp-delay]`:
 * these are core group blocks, and a data attribute on a core block's saved
 * markup does not survive an editor re-save, so it would silently stop
 * working the first time a client edited the copy. Same 70 ms step, same
 * result, editable-safe (DES-011). */
.qlp-svc .qlp-reveal {
	opacity: 1;
	transform: none;
}

html.js:not(.qlp-reduced) .qlp-svc .qlp-reveal {
	transition:
		opacity var(--qlp-dur-base) var(--qlp-ease),
		transform var(--qlp-dur-base) var(--qlp-ease);
}

html.js:not(.qlp-reduced) .qlp-svc .qlp-reveal:not(.is-visible):not(.qlp-reveal--line) {
	opacity: 0;
	transform: translate3d(0, var(--qlp-rise), 0);
}

html.js:not(.qlp-reduced) .qlp-svc .qlp-reveal--x:not(.is-visible) {
	transform: translate3d(calc(var(--qlp-x) * var(--qlp-rise) * -1), 0, 0);
}

@media (prefers-reduced-motion: reduce) {
	.qlp-svc .qlp-reveal,
	html.js .qlp-svc .qlp-reveal {
		opacity: 1;
		transform: none;
		transition: none;
		transition-delay: 0s;
	}

	.qlp-svc *,
	.qlp-svc *::before,
	.qlp-svc *::after {
		animation-delay: 0s !important;
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

/* ============================================================ P02: service */

/* ------------------------------------------- what legal translation covers */

.qlp-svc .qlp-svc-covers__in {
	display: grid;
	gap: clamp(32px, 4vw, 64px);
}

@media (min-width: 900px) {
	.qlp-svc .qlp-svc-covers__in {
		align-items: center;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}
}

.qlp-svc .qlp-svc-covers__text {
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 1.5vw, 24px);
}

.qlp-svc .qlp-svc-covers__text h2 {
	color: var(--qlp-gold-700);
	font-family: var(--qlp-f-ui);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
}

[dir="rtl"] .qlp-svc .qlp-svc-covers__text h2 {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
}

.qlp-svc .qlp-svc-covers__text .qlp-statement {
	max-inline-size: 26ch;
}

.qlp-svc .qlp-svc-covers__body {
	max-inline-size: 52ch;
}

.qlp-svc .qlp-svc-covers__art {
	inline-size: 100%;
	max-inline-size: 420px;
	margin-inline: auto;
}

/* VR-F009's lesson, applied to this instance of the composition: paper-200
 * on ivory is almost nothing, so the back sheet is given the same soft
 * petrol shadow the front one already carries, at a third of the depth. It
 * is a filter on this page's copy of the composition, never a change to the
 * shared helper. */
.qlp-svc .qlp-svc-sheets .qlp-sheet--back {
	filter: drop-shadow(0 12px 22px rgb(16 59 58 / 0.12));
}

/* ------------------------------------------------ included / not included */

.qlp-svc .qlp-svc-ledger__in {
	display: grid;
	gap: clamp(32px, 3.5vw, 56px);
}

@media (min-width: 860px) {
	.qlp-svc .qlp-svc-ledger__in {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.qlp-svc .qlp-svc-ledger__col {
	display: flex;
	flex-direction: column;
	gap: clamp(14px, 1.4vw, 20px);
}

.qlp-svc .qlp-svc-ledger__list > li {
	align-items: start;
	color: var(--qlp-ink-700);
	display: grid;
	font-family: var(--qlp-f-body);
	font-size: 1.0625rem;
	gap: 0 1.1rem;
	grid-template-columns: 14px minmax(0, 1fr);
	line-height: 1.6;
	padding-block: 0.95rem;
}

[dir="rtl"] .qlp-svc .qlp-svc-ledger__list > li {
	line-height: 1.9;
}

.qlp-svc .qlp-svc-ledger__list > li::before {
	background-color: var(--qlp-gold-line);
	block-size: 8px;
	content: "";
	inline-size: 14px;
	margin-block-start: 0.58em;
}

/* Included: the system's own tick, from the one asset in assets/svg/,
 * with its authored counterpart for Arabic (never a scaleX flip). */
.qlp-svc .qlp-svc-ledger__col--in .qlp-svc-ledger__list > li::before {
	-webkit-mask: url("../svg/tick.svg") no-repeat center / contain;
	mask: url("../svg/tick.svg") no-repeat center / contain;
}

[dir="rtl"] .qlp-svc .qlp-svc-ledger__col--in .qlp-svc-ledger__list > li::before {
	-webkit-mask-image: url("../svg/tick-rtl.svg");
	mask-image: url("../svg/tick-rtl.svg");
}

/* Not included: a plain rule, not a red cross and not a second colour. The
 * two columns are told apart by their heading and their mark, never by hue
 * alone (A11Y: colour is never the only channel). */
.qlp-svc .qlp-svc-ledger__col--out .qlp-svc-ledger__list > li::before {
	background-color: var(--qlp-muted-400);
	block-size: 1px;
	margin-block-start: 0.85em;
}

/* ------------------------------------------- how your documents are handled */

.qlp-svc .qlp-svc-handling__in {
	display: grid;
	gap: clamp(32px, 4vw, 60px);
}

@media (min-width: 900px) {
	.qlp-svc .qlp-svc-handling__in {
		align-items: center;
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	}
}

.qlp-svc .qlp-svc-handling__text {
	display: flex;
	flex-direction: column;
	gap: clamp(14px, 1.4vw, 20px);
}

.qlp-svc .qlp-svc-handling__text p {
	max-inline-size: 48ch;
}

.qlp-svc .qlp-svc-handling__art {
	inline-size: 100%;
	max-inline-size: 440px;
	margin-inline: auto;
}

.qlp-svc .qlp-linework svg {
	block-size: auto;
	display: block;
	inline-size: 100%;
}

.qlp-svc .qlp-linework__face {
	fill: var(--qlp-paper-50);
	stroke: var(--qlp-paper-300);
	stroke-width: 1;
}

.qlp-svc .qlp-linework__head {
	fill: var(--qlp-muted-400);
}

.qlp-svc .qlp-linework__rule {
	fill: var(--qlp-paper-300);
}

.qlp-svc .qlp-linework__custody {
	fill: none;
	stroke: var(--qlp-muted-400);
	stroke-linecap: square;
	stroke-width: 1.5;
}

/* The one gold element of this section: the register line closing the
 * sheet (C-06 -- gold as line and mark, never a fill). */
.qlp-svc .qlp-linework__register {
	fill: var(--qlp-gold-line);
}

/* ------------------------------------------------------------ certification */

.qlp-svc .qlp-svc-cert__sheet {
	display: flex;
	flex-direction: column;
	gap: clamp(12px, 1.2vw, 18px);
	margin-inline: auto;
	max-inline-size: 780px;
	padding: clamp(28px, 2rem + 1.6vw, 48px);
}

.qlp-svc .qlp-svc-cert__sheet p {
	max-inline-size: 60ch;
}

/* ------------------------------------------------------ related type cards */

/* A hairline-ruled field of four, not four floating boxes: the gaps are the
 * rules, so the group reads as one ledger page (brief §3). */
.qlp-svc .qlp-svc-cards {
	background-color: var(--qlp-paper-300);
	border-block: 1px solid var(--qlp-paper-300);
	display: grid;
	gap: 1px;
}

@media (min-width: 680px) {
	.qlp-svc .qlp-svc-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1120px) {
	.qlp-svc .qlp-svc-cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.qlp-svc .qlp-svc-card {
	background-color: var(--qlp-ivory);
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: clamp(22px, 1.4rem + 1vw, 32px);
	position: relative;
	transition: background-color var(--qlp-dur-fast) var(--qlp-ease);
}

.qlp-svc .qlp-svc-card:hover {
	background-color: var(--qlp-paper-50);
}

.qlp-svc .qlp-svc-card__mark {
	background-color: var(--qlp-petrol-800);
	block-size: 34px;
	display: block;
	inline-size: 34px;
	-webkit-mask: var(--qlp-typeglyph) no-repeat center / contain;
	mask: var(--qlp-typeglyph) no-repeat center / contain;
}

.qlp-svc .qlp-svc-card--contract {
	--qlp-typeglyph: url("../svg/service/type-contract.svg");
}

.qlp-svc .qlp-svc-card--authority {
	--qlp-typeglyph: url("../svg/service/type-authority.svg");
}

.qlp-svc .qlp-svc-card--certificate {
	--qlp-typeglyph: url("../svg/service/type-certificate.svg");
}

.qlp-svc .qlp-svc-card--corporate {
	--qlp-typeglyph: url("../svg/service/type-corporate.svg");
}

/* The card title is a two-line label on most widths, so the arrow settles
 * on the last line instead of floating beside the middle of the block. */
.qlp-svc .qlp-svc-card .qlp-textlink {
	align-items: flex-end;
	align-self: start;
	font-size: 1rem;
	line-height: 1.35;
	min-block-size: 0;
}

.qlp-svc .qlp-svc-card .qlp-textlink .qlp-mark {
	margin-block-end: 0.28em;
}

/* The card's own title is its link, and the whole card is its hit area. */
.qlp-svc .qlp-svc-card .qlp-textlink::after {
	content: "";
	inset: 0;
	position: absolute;
}

.qlp-svc .qlp-svc-card__desc {
	font-size: 0.9375rem;
	line-height: 1.6;
}

[dir="rtl"] .qlp-svc .qlp-svc-card__desc {
	line-height: 1.85;
}

/* ===================================================== P03-P06: doc types */

/* --------------------------------------------------------- what this covers */

.qlp-svc .qlp-dt-covers__in {
	align-items: center;
	display: grid;
	gap: clamp(28px, 3vw, 48px);
}

@media (min-width: 720px) {
	.qlp-svc .qlp-dt-covers__in {
		grid-template-columns: minmax(0, 1fr) auto;
	}
}

.qlp-svc .qlp-dt-covers__text {
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 1.5vw, 24px);
}

.qlp-svc .qlp-dt-covers__text h2 {
	color: var(--qlp-gold-700);
	font-family: var(--qlp-f-ui);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
}

[dir="rtl"] .qlp-svc .qlp-dt-covers__text h2 {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
}

.qlp-svc .qlp-dt-covers__text .qlp-statement {
	max-inline-size: 30ch;
}

/* The type's mark is mounted as a plate: the glyph over the section's one
 * gold register line, so it reads as part of the composition rather than as
 * an icon that drifted to the edge of the column. */
.qlp-svc .qlp-dt-covers__art {
	border-block-end: 1px solid var(--qlp-gold-line);
	justify-self: start;
	padding-block-end: clamp(14px, 1.4vw, 22px);
	padding-inline-end: clamp(20px, 3vw, 48px);
}

.qlp-svc .qlp-typemark {
	background-color: var(--qlp-petrol-800);
	block-size: clamp(72px, 7.5vw, 116px);
	display: block;
	inline-size: clamp(72px, 7.5vw, 116px);
	-webkit-mask: var(--qlp-typeglyph) no-repeat center / contain;
	mask: var(--qlp-typeglyph) no-repeat center / contain;
	opacity: 0.9;
}

.qlp-svc .qlp-dt-covers__art--contract {
	--qlp-typeglyph: url("../svg/service/type-contract.svg");
}

.qlp-svc .qlp-dt-covers__art--authority {
	--qlp-typeglyph: url("../svg/service/type-authority.svg");
}

.qlp-svc .qlp-dt-covers__art--certificate {
	--qlp-typeglyph: url("../svg/service/type-certificate.svg");
}

.qlp-svc .qlp-dt-covers__art--corporate {
	--qlp-typeglyph: url("../svg/service/type-corporate.svg");
}

/* ------------------------------------------------------------ what to prepare */

.qlp-svc .qlp-dt-prepare__in {
	display: grid;
	gap: clamp(28px, 3.5vw, 56px);
}

@media (min-width: 960px) {
	.qlp-svc .qlp-dt-prepare__in {
		align-items: start;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}
}

.qlp-svc .qlp-dt-prepare__sheet {
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 1.5vw, 24px);
	padding: clamp(26px, 1.6rem + 1.6vw, 46px);
}

.qlp-svc .qlp-dt-prep {
	counter-reset: qlp-prep;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The same ruled rows with serif ordinals the home explorer promotes, so
 * the explorer and the page it links to read as one system. */
.qlp-svc .qlp-dt-prep li {
	align-items: baseline;
	border-block-start: 1px solid var(--qlp-paper-300);
	color: var(--qlp-ink-700);
	display: grid;
	font-family: var(--qlp-f-body);
	font-size: 1rem;
	gap: 0.1em 1.1em;
	grid-template-columns: auto minmax(0, 1fr);
	line-height: 1.55;
	padding-block: 14px;
}

[dir="rtl"] .qlp-svc .qlp-dt-prep li {
	line-height: 1.85;
}

.qlp-svc .qlp-dt-prep li:last-child {
	border-block-end: 1px solid var(--qlp-paper-300);
}

.qlp-svc .qlp-dt-prep li::before {
	color: var(--qlp-gold-700);
	content: counter(qlp-prep, decimal-leading-zero);
	counter-increment: qlp-prep;
	direction: ltr;
	font-family: var(--qlp-f-display);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums lining-nums;
	font-weight: 600;
	letter-spacing: 0.06em;
	unicode-bidi: isolate;
}

/* One gold rule for the whole notes column, not one per note (C-06). */
.qlp-svc .qlp-dt-prepare__notes {
	display: flex;
	flex-direction: column;
	gap: clamp(18px, 1.8vw, 26px);
	padding-inline-start: 20px;
	position: relative;
}

.qlp-svc .qlp-dt-prepare__notes::before {
	background-color: var(--qlp-gold-line);
	content: "";
	inline-size: 1px;
	inset-block: 4px;
	inset-inline-start: 0;
	position: absolute;
}

.qlp-svc .qlp-dt-note {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.qlp-svc .qlp-dt-note + .qlp-dt-note {
	border-block-start: 1px solid var(--qlp-paper-300);
	padding-block-start: clamp(18px, 1.8vw, 26px);
}

.qlp-svc .qlp-dt-note h3 {
	color: var(--qlp-petrol-800);
	font-family: var(--qlp-f-ui);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0;
}

.qlp-svc .qlp-dt-note p {
	font-size: 0.9375rem;
	line-height: 1.6;
}

[dir="rtl"] .qlp-svc .qlp-dt-note p {
	line-height: 1.85;
}

/* --------------------------------------------------------- typical documents */

.qlp-svc .qlp-dt-typical__list {
	display: grid;
	gap: 0 clamp(24px, 3vw, 56px);
	max-inline-size: 900px;
}

@media (min-width: 760px) {
	.qlp-svc .qlp-dt-typical__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.qlp-svc .qlp-dt-typical__list > li {
	align-items: start;
	color: var(--qlp-ink-700);
	display: grid;
	font-family: var(--qlp-f-body);
	font-size: 1.0625rem;
	gap: 0 1.1rem;
	grid-template-columns: 14px minmax(0, 1fr);
	line-height: 1.6;
	padding-block: 0.95rem;
}

[dir="rtl"] .qlp-svc .qlp-dt-typical__list > li {
	line-height: 1.9;
}

.qlp-svc .qlp-dt-typical__list > li::before {
	background-color: var(--qlp-gold-line);
	block-size: 8px;
	content: "";
	inline-size: 14px;
	margin-block-start: 0.58em;
	-webkit-mask: url("../svg/tick.svg") no-repeat center / contain;
	mask: url("../svg/tick.svg") no-repeat center / contain;
}

[dir="rtl"] .qlp-svc .qlp-dt-typical__list > li::before {
	-webkit-mask-image: url("../svg/tick-rtl.svg");
	mask-image: url("../svg/tick-rtl.svg");
}

/* In a two-column ruled field every row needs its own closing rule, not
 * only the last item of the list. */
@media (min-width: 760px) {
	.qlp-svc .qlp-dt-typical__list > li:nth-last-child(2) {
		border-block-end: 1px solid var(--qlp-rule);
	}
}

/* ---------------------------------------------------- how it works (compact) */

.qlp-svc .qlp-dt-track {
	display: grid;
	gap: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
	position: relative;
}

/* The spine: one gold register line the stations hang from. */
.qlp-svc .qlp-dt-track::before {
	background-color: var(--qlp-gold-line);
	content: "";
	position: absolute;
	transition: transform var(--qlp-dur-slow) var(--qlp-ease);
}

.qlp-svc .qlp-dt-station {
	display: flex;
	flex-direction: column;
	gap: 10px;
	position: relative;
}

.qlp-svc .qlp-dt-station::before {
	background-color: var(--qlp-petrol-800);
	block-size: 28px;
	content: "";
	display: block;
	inline-size: 28px;
	-webkit-mask: var(--qlp-glyph) no-repeat center / contain;
	mask: var(--qlp-glyph) no-repeat center / contain;
}

.qlp-svc .qlp-dt-station--1 {
	--qlp-glyph: url("../svg/service/journey-receive.svg");
}

.qlp-svc .qlp-dt-station--2 {
	--qlp-glyph: url("../svg/service/journey-translate.svg");
}

.qlp-svc .qlp-dt-station--3 {
	--qlp-glyph: url("../svg/service/journey-review.svg");
}

.qlp-svc .qlp-dt-station--4 {
	--qlp-glyph: url("../svg/service/journey-deliver.svg");
}

.qlp-svc .qlp-dt-station h3 {
	color: var(--qlp-petrol-800);
	font-family: var(--qlp-f-ui);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.4;
}

.qlp-svc .qlp-dt-station p {
	font-size: 0.9375rem;
	line-height: 1.6;
	max-inline-size: 32ch;
}

[dir="rtl"] .qlp-svc .qlp-dt-station p {
	line-height: 1.85;
}

.qlp-svc .qlp-dt-journey__foot {
	margin-block-start: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem);
}

@media (min-width: 900px) {
	.qlp-svc .qlp-dt-track {
		column-gap: clamp(1.5rem, 0.5rem + 2vw, 2.75rem);
		grid-template-columns: repeat(4, minmax(0, 1fr));
		padding-block-start: 40px;
	}

	.qlp-svc .qlp-dt-track::before {
		block-size: 1px;
		inset-block-start: 13px;
		inset-inline: 0;
		transform-origin: 0 50%;
	}

	[dir="rtl"] .qlp-svc .qlp-dt-track::before {
		transform-origin: 100% 50%;
	}

	.qlp-svc .qlp-dt-station {
		padding-block-start: 27px;
	}

	/* A tick rising from the spine to each station. */
	.qlp-svc .qlp-dt-station::after {
		background-color: var(--qlp-gold-line);
		block-size: 27px;
		content: "";
		inline-size: 1px;
		inset-block-start: -27px;
		inset-inline-start: 0;
		opacity: 0.55;
		position: absolute;
	}
}

@media (max-width: 899px) {
	.qlp-svc .qlp-dt-track {
		padding-inline-start: 32px;
	}

	.qlp-svc .qlp-dt-track::before {
		inline-size: 1px;
		inset-block: 8px 24px;
		inset-inline-start: 0;
		transform-origin: 50% 0;
	}

	.qlp-svc .qlp-dt-station::after {
		background-color: var(--qlp-gold-line);
		block-size: 1px;
		content: "";
		inline-size: 24px;
		inset-block-start: 14px;
		inset-inline-start: -32px;
		opacity: 0.55;
		position: absolute;
	}
}

html.js:not(.qlp-reduced) .qlp-svc .qlp-dt-track:not(.is-visible)::before {
	transform: scaleX(0);
}

@media (max-width: 899px) {
	html.js:not(.qlp-reduced) .qlp-svc .qlp-dt-track:not(.is-visible)::before {
		transform: scaleY(0);
	}
}

html.js:not(.qlp-reduced) .qlp-svc .qlp-dt-station--2,
html.js:not(.qlp-reduced) .qlp-svc .qlp-svc-card--authority {
	transition-delay: 70ms;
}

html.js:not(.qlp-reduced) .qlp-svc .qlp-dt-station--3,
html.js:not(.qlp-reduced) .qlp-svc .qlp-svc-card--certificate {
	transition-delay: 140ms;
}

html.js:not(.qlp-reduced) .qlp-svc .qlp-dt-station--4,
html.js:not(.qlp-reduced) .qlp-svc .qlp-svc-card--corporate {
	transition-delay: 210ms;
}

/* -------------------------------------------------------- other documents */

.qlp-svc .qlp-dt-related__list {
	list-style: none;
	margin: 0;
	max-inline-size: 820px;
	padding: 0;
}

.qlp-svc .qlp-dt-related__list > li {
	border-block-start: 1px solid var(--qlp-rule);
}

.qlp-svc .qlp-dt-related__list > li:last-child {
	border-block-end: 1px solid var(--qlp-rule);
}

.qlp-svc .qlp-dt-related__list a {
	align-items: center;
	color: var(--qlp-petrol-800);
	display: flex;
	font-family: var(--qlp-f-ui);
	font-size: 1.0625rem;
	font-weight: 600;
	gap: 0.9em;
	justify-content: space-between;
	min-block-size: 44px;
	padding-block: 1.05rem;
	text-decoration: none;
	transition: color var(--qlp-dur-fast) var(--qlp-ease);
}

.qlp-svc .qlp-dt-related__list a::after {
	block-size: 8px;
	border-block-start: 1.5px solid var(--qlp-gold-line);
	border-inline-end: 1.5px solid var(--qlp-gold-line);
	content: "";
	flex: none;
	inline-size: 8px;
	transform: rotate(calc(var(--qlp-x) * 45deg));
	transition: translate var(--qlp-dur-fast) var(--qlp-ease);
}

.qlp-svc .qlp-dt-related__list a:hover {
	color: var(--qlp-petrol-700);
}

.qlp-svc .qlp-dt-related__list a:hover::after {
	translate: calc(var(--qlp-x) * 3px) 0;
}

/* --------------------------------------------- IMG-SERVICE: the section art */

/* T102 / VR-F030. The photograph is the section's art, in the art column, at
 * the column's own measure -- not a ground behind the aligned-sheet
 * composition, which covered it. In flow, so nothing is read over it
 * (IMG-008), and it stacks under the copy at the same breakpoint the section
 * has always stacked at. */
.qlp-svc figure.qlp-svc-covers__art {
	margin: 0;

	/* The 420 px cap is the drawing's measure; the photograph is the column's
	 * own plate and takes the whole of it. */
	max-inline-size: none;
}

.qlp-svc .qlp-svc-covers__art img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border: 1px solid var(--qlp-paper-300);
	border-radius: 2px;
}