/* Special request (S43) and the contact page (S19): the form plate, service check cards, progress caliper, page layout. */

.rq {
	display: grid;
	gap: 0;
	background: linear-gradient(180deg, color-mix(in srgb, var(--ink-700) 50%, transparent), color-mix(in srgb, var(--ink-950) 90%, transparent));
}

/* a form does not react to the pointer like a card: no gold glow, corner marks stay small */
.rq:hover::before,
.rq:focus-within::before {
	opacity: 0;
}

.rq:hover,
.rq:focus-within {
	border-color: var(--ln-s);
}

.rq:hover .cm,
.rq:focus-within .cm {
	inline-size: 12px;
	block-size: 12px;
}

.rq-body {
	display: grid;
	gap: var(--sp-24);
	padding: clamp(var(--sp-16), 3vw, var(--sp-32));
}

.rq-two {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-16);
}

/* honeypot: out of sight and out of the tab order; people never fill it */
.rq-hp {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	opacity: 0;
	pointer-events: none;
}

/* progress caliper in the plate bar */
.rq-cal {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-12);
}

.rq-cal i {
	position: relative;
	inline-size: 72px;
	block-size: 4px;
	background: var(--ln-ctl);
}

.rq-cal i::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--hi);
	transform: scaleX(var(--p, 0));
	transform-origin: left;
	transition: transform var(--d-base) var(--ease);
}

html[dir="rtl"] .rq-cal i::after {
	transform-origin: right;
}

/* the count reads left to right in every language: digits first, then the word */
.rq-cal [data-rq-count] {
	direction: ltr;
	unicode-bidi: isolate;
}

html.rm .rq-cal i::after {
	transition: none;
}

/* prefill chips from /contact?product= and ?similar= */
.rq-ctx {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-8);
}

.rq-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-8);
	padding-block: var(--sp-4);
	padding-inline: var(--sp-12) var(--sp-4);
	border: var(--hairline) solid var(--hi);
	background: var(--hi-wash);
	color: var(--fg);
}

.rq-chip a {
	display: grid;
	place-items: center;
	inline-size: 44px;
	block-size: 44px;
	margin-block: calc(var(--sp-4) * -1);
	color: var(--fg2);
}

.rq-chip a:hover {
	color: var(--fg);
}

.rq-chip svg {
	inline-size: 14px;
	block-size: 14px;
}

/* service groups */
.rq-needs {
	gap: var(--sp-16);
}

.rq-needs .fh {
	margin: 0;
	color: var(--fg2);
	font-size: var(--fs-s);
}

.rq-grp {
	display: grid;
	gap: var(--sp-8);
	min-inline-size: 0;
	padding: 0;
	border: 0;
}

.rq-grp > legend {
	padding: 0;
	margin-block-end: var(--sp-8);
	font-size: var(--fs-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hi);
}

:lang(ar) .rq-grp > legend {
	letter-spacing: 0;
	text-transform: none;
}

.rq-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
	gap: var(--sp-8);
}

.rq-cards .ck-card {
	block-size: 100%;
	overflow-wrap: anywhere;
}

.rq-act {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-16);
}

.rq-msg {
	flex: 1 1 240px;
	margin: 0;
	color: var(--fg2);
	font-size: var(--fs-s);
}

.rq-msg[data-tone="bad"] {
	color: var(--bad-t);
}

.rq-body .ck-consent a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* contact page */
.rqp {
	padding-block: calc(var(--hdr-h) + var(--sp-32)) var(--sp-64);
}

.rqp-in {
	display: grid;
	gap: var(--sp-32);
	align-items: start;
}

.rqp-side {
	display: grid;
	gap: var(--sp-24);
	justify-items: start;
}

.rqp-side .d2 {
	font-size: clamp(40px, 5.6vw, 88px);
}

.rqp-box {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-12);
	padding: var(--sp-12) var(--sp-16);
	border: var(--hairline) solid var(--ln-ctl);
}

.rqp-box span {
	color: var(--fg2);
}

.rqp-more {
	display: grid;
	gap: var(--sp-8);
}

.rqp-more a {
	color: var(--fg2);
	text-decoration: underline;
	text-underline-offset: 3px;
	padding-block: var(--sp-8);
}

.rqp-more a:hover {
	color: var(--fg);
}

/* hub scene 03 */
.rqs .rq {
	margin-block-start: var(--sp-32);
}

/* thanks page */
.rq-next {
	display: grid;
	gap: var(--sp-8);
	padding: 0;
	margin: 0;
	list-style: none;
	counter-reset: n;
	color: var(--gray-100);
}

.rq-next li {
	counter-increment: n;
	display: flex;
	gap: var(--sp-12);
}

.rq-next li::before {
	content: "0" counter(n);
	font-family: var(--font-mono);
	color: var(--hi);
}

@media (min-width: 1000px) {
	.rqp-in {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: clamp(32px, 5vw, 80px);
	}

	.rqp-side {
		position: sticky;
		inset-block-start: calc(var(--hdr-h) + var(--sp-24));
	}
}

@media (max-width: 640px) {
	.rq-two {
		grid-template-columns: minmax(0, 1fr);
	}

	.rq-cards {
		grid-template-columns: minmax(0, 1fr);
	}
}