/*
 * Services page (not in Figma; on request 2026-10-26): sv-hero, sv-services, sv-process, sv-engage, sv-about,
 * sv-faq and sv-quote. Built from the site's own parts: the pricing hero's lavender stage, white cards with
 * radius 20 outlined in the grey border colour (on request 2026-10-26; the plan cards use purple/30),
 * rs-eyebrow / rs-section-head, and the heading and button presets. Every rule is scoped under its section's
 * root class. Sections are 128px apart at 1600 (clamp(64px, 8vw, 128px) above each, none below; the
 * last also below), on request 2026-10-27.
 */

/* ---------- Hero ---------- */

.rs-sv-hero {
	box-sizing: border-box;
	padding: 160px var(--wp--style--root--padding-right, 16px) 0 var(--wp--style--root--padding-left, 16px);
	background: linear-gradient(180deg, var(--wp--preset--color--purple-20) 0%, var(--wp--preset--color--white) 100%);
	overflow: hidden;
}

.rs-sv-hero > .rs-sv-hero__inner {
	max-width: 1280px;
	margin: 0 auto;
}

.rs-sv-hero__inner > * {
	margin: 0;
}

/* Giant two-line headline (after a "Let's Work Together" reference): heading font, bold, tight. */
.rs-sv-hero__inner > .rs-sv-hero__title {
	font-family: var(--wp--preset--font-family--stack-sans-headline);
	font-size: clamp(48px, 9vw, 148px);
	font-weight: 700;
	line-height: 0.98;
	letter-spacing: -0.032em;
}

/* The icon tile with its cursor tags, inline between "Let's" and "Work". The picture is 3:2 with the tile in
   the middle ~47% wide, so negative side margins keep the words close to the tile (more on the right, where
   the ReviewScribe tag reaches under "Work"). */
.rs-sv-hero__title .rs-sv-hero__icon {
	display: inline-block;
	width: 1.9em;
	height: auto;
	margin: -0.3em -0.44em -0.2em -0.2em;
	vertical-align: -0.22em;
}

.rs-sv-hero__inner > .rs-sv-hero__lead {
	max-width: 640px;
	margin-top: 8px;
}

.rs-sv-hero__inner > .rs-sv-hero__actions {
	margin-top: 16px;
}

/* ---------- Cards shared by the services, ways and values ---------- */

.rs-sv-engage .rs-sv-way,
.rs-sv-about .rs-sv-value {
	box-sizing: border-box;
	min-width: 0;
	padding: 31px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--preset--border-radius--20, 20px);
	background: var(--wp--preset--color--white);
}

.rs-sv-way > *,
.rs-sv-value > *,
.rs-sv-step > * {
	margin: 0;
}

/* ---------- What we do ---------- */

/* Cards after a "Refer & Earn" reference: a tinted top panel (price pill, title, subtitle, glossy icon art off its
   right edge), a short description, and the quote button. */
.rs-sv-services__grid {
	align-items: stretch;
}

.rs-sv-services .rs-sv-card {
	box-sizing: border-box;
	min-width: 0;
	padding: 11px 11px 11px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--preset--border-radius--24, 24px);
	background: var(--wp--preset--color--white);
}

.rs-sv-card > * {
	margin: 0;
}

.rs-sv-card > .rs-sv-card__top {
	position: relative;
	box-sizing: border-box;
	min-height: 216px; /* room for a two-line title, so panels in a row match and "What's included" lines up */
	overflow: hidden;
	padding: 20px 120px 24px 20px;
	border-radius: var(--wp--preset--border-radius--16, 16px);
	background: #f4f4f6; /* one light grey for every card (2026-10-26); the icon art keeps its colours */
}

.rs-sv-card__top > * {
	position: relative;
	z-index: 1;
	margin: 0;
}

.rs-sv-card__top::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -46px;
	width: 160px;
	height: 160px;
	background: var(--rs-sv-art) center / contain no-repeat;
	transform: translateY(-50%);
}

.rs-sv-card__top > .rs-sv-card__pill {
	align-self: flex-start;
	margin-bottom: auto; /* title and subtitle sit at the bottom of the panel */
	padding: 6px 14px;
	border-radius: 99px;
	background: var(--wp--preset--color--white);
	box-shadow: 0 1px 2px rgba(20, 16, 40, .06);
}

.rs-sv-card__pill strong {
	font-weight: 700;
}

.rs-sv-card__top > .rs-sv-card__title {
	margin-top: 32px;
}

.rs-sv-card__top > .rs-sv-card__sub {
	margin-top: 4px;
}

.rs-sv-card > .rs-sv-card__text {
	margin-top: 8px;
	padding: 0 12px 8px;
}

/* Get a quote, at the bottom left of the card. */
.rs-sv-card > .rs-sv-card__actions {
	margin-top: auto;
	padding: 4px 12px 12px;
}

/* The black large button, at a card-sized scale. */
.rs-sv-card__actions .wp-block-button.is-style-black-lg > .wp-block-button__link {
	padding: 10px 18px;
	border-radius: var(--wp--preset--border-radius--12, 12px);
	font-size: 15px;
	line-height: 20px;
}

/* Per service: icon art. */
.rs-sv-card.is-setup { --rs-sv-art: url("../../images/services/art-setup.webp"); }
.rs-sv-card.is-development { --rs-sv-art: url("../../images/services/art-development.webp"); }
.rs-sv-card.is-design { --rs-sv-art: url("../../images/services/art-design.webp"); }
.rs-sv-card.is-maintenance { --rs-sv-art: url("../../images/services/art-maintenance.webp"); }
.rs-sv-card.is-dev-support { --rs-sv-art: url("../../images/services/art-dev-support.webp"); }
.rs-sv-card.is-design-support { --rs-sv-art: url("../../images/services/art-design-support.webp"); }

/* Enterprise & agencies: one wide dark card under the grid, text left, glossy building icon right. */
.rs-sv-services > .rs-sv-enterprise.rs-sv-enterprise {
	position: relative;
	box-sizing: border-box;
	max-width: 1280px;
	margin-block-start: 24px;
	padding: 44px 48px;
	overflow: hidden;
	border-radius: var(--wp--preset--border-radius--24, 24px);
	background:
		radial-gradient(60% 120% at 85% 50%, rgba(161, 68, 255, .35) 0%, transparent 70%),
		linear-gradient(135deg, #17141f 0%, #2a0a52 100%);
}

.rs-sv-enterprise > .rs-sv-enterprise__text {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	min-width: 0;
	max-width: 680px;
}

.rs-sv-enterprise__text > * {
	margin: 0;
}

.rs-sv-enterprise__text > .rs-sv-card__pill {
	align-self: flex-start;
	margin-bottom: 28px;
	padding: 6px 14px;
	border-radius: 99px;
	background: var(--wp--preset--color--white);
}

.rs-sv-enterprise__text > .rs-sv-enterprise__sub {
	margin-top: 4px;
	color: rgba(255, 255, 255, .7);
}

.rs-sv-enterprise__text > .rs-sv-enterprise__desc {
	margin-top: 20px;
	color: rgba(255, 255, 255, .86);
}

/* Confirmed commitments as tags on the dark card. */
.rs-sv-enterprise__text > .rs-sv-enterprise__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 24px;
	padding: 0;
	list-style: none;
}

.rs-sv-enterprise__tags li {
	padding: 7px 14px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 99px;
	background: rgba(255, 255, 255, .08);
	color: var(--wp--preset--color--white);
	font-weight: 500;
	line-height: 18px;
}

.rs-sv-enterprise__text > .rs-sv-enterprise__actions {
	margin-top: 28px;
}

.rs-sv-enterprise > .rs-sv-enterprise__art {
	flex: none;
	width: 320px;
	height: 320px;
	margin: -60px -32px -60px auto;
	background: url("../../images/services/art-enterprise.webp") center / contain no-repeat;
}

/* ---------- How it works ---------- */

/* Four step columns split by thin lines (after a steps reference): a "Step N" pill over a dashed rule, title,
   text and a flat colour drawing in a light panel at the bottom. Step 1 is highlighted (black pill, soft background). */
.rs-sv-process {
	background: var(--wp--preset--color--white);
}

.rs-sv-process .rs-sv-process__grid {
	align-items: stretch;
	border-right: 1px solid var(--wp--preset--color--border);
	border-left: 1px solid var(--wp--preset--color--border);
}

.rs-sv-process .rs-sv-step {
	box-sizing: border-box;
	min-width: 0;
	padding: 20px 16px 16px;
	background:
		linear-gradient(90deg, var(--wp--preset--color--border-strong) 50%, transparent 0) 0 64px / 6px 1px repeat-x;
	transition: background-color .2s ease;
}

.rs-sv-process .rs-sv-step + .rs-sv-step {
	border-left: 1px solid var(--wp--preset--color--border);
}

.rs-sv-step > * {
	margin: 0;
}

.rs-sv-step > .rs-sv-step__pill {
	align-self: flex-start;
	margin-bottom: 30px;
	padding: 6px 12px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--text-secondary);
	font-weight: 500;
	line-height: 18px;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.rs-sv-step > .rs-sv-step__media {
	margin-top: auto;
	padding-top: 14px;
}

.rs-sv-step__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
	background: #f4f4f6;
}

/* Highlight: Step 1 (is-active), as in the reference. */
.rs-sv-process .rs-sv-step.is-active {
	background-color: #fafafa;
}

.rs-sv-step.is-active > .rs-sv-step__pill {
	border-color: var(--wp--preset--color--black);
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

/* ---------- Ways to work with us ---------- */

.rs-sv-engage__grid {
	align-items: stretch;
}

/* Colour drawing on top, in the How it works style. */
.rs-sv-way > .rs-sv-way__media {
	margin: -15px -15px 12px;
}

.rs-sv-way__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
	background: #f4f4f6;
}

/* ---------- Why us ---------- */

/* A featured card (lilac, big "8+ years") beside a 3×2 grid of trust points with icon tiles. */
.rs-sv-why__row > .rs-sv-why__lead {
	flex: 0 1 400px;
	min-width: 0;
	box-sizing: border-box;
	padding: 31px;
	border: 1px solid var(--wp--preset--color--purple-30);
	border-radius: var(--wp--preset--border-radius--20, 20px);
	background: linear-gradient(160deg, var(--wp--preset--color--purple-20) 0%, var(--wp--preset--color--white) 100%);
}

.rs-sv-why__lead > * {
	margin: 0;
}

.rs-sv-why__lead > .rs-sv-why__num {
	font-family: var(--wp--preset--font-family--stack-sans-headline);
	font-size: clamp(36px, 3.2vw, 44px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: var(--wp--preset--color--purple-100);
}

.rs-sv-why__lead > .rs-sv-why__num-label {
	margin-top: 8px;
	color: var(--wp--preset--color--text-secondary);
}

.rs-sv-why__lead > .rs-sv-why__lead-title {
	margin-top: auto;
	padding-top: 40px;
}

.rs-sv-why__lead > .rs-sv-why__lead-text {
	margin-top: 10px;
}

.rs-sv-why__row > .rs-sv-why__grid {
	flex: 1 1 0;
	min-width: 0;
	align-items: stretch;
}

.rs-sv-why .rs-sv-why-point {
	box-sizing: border-box;
	min-width: 0;
	padding: 23px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--preset--border-radius--20, 20px);
	background: var(--wp--preset--color--white);
}

.rs-sv-why-point > * {
	margin: 0;
}

.rs-sv-why .rs-sv-why-point__icon {
	position: relative;
	width: 44px;
	height: 44px;
	margin-bottom: 8px;
	border-radius: 12px;
	background: var(--wp--preset--color--purple-20);
}

.rs-sv-why-point__icon::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--purple-100);
	-webkit-mask: var(--rs-sv-why-icon) center / 22px 22px no-repeat;
	mask: var(--rs-sv-why-icon) center / 22px 22px no-repeat;
}

.rs-sv-why-point.is-guarantee { --rs-sv-why-icon: url("../../images/services/why-guarantee.svg"); }
.rs-sv-why-point.is-scope { --rs-sv-why-icon: url("../../images/services/why-scope.svg"); }
.rs-sv-why-point.is-reply { --rs-sv-why-icon: url("../../images/services/why-reply.svg"); }
.rs-sv-why-point.is-manager { --rs-sv-why-icon: url("../../images/services/why-manager.svg"); }
.rs-sv-why-point.is-nda { --rs-sv-why-icon: url("../../images/services/why-nda.svg"); }
.rs-sv-why-point.is-invoice { --rs-sv-why-icon: url("../../images/services/why-invoice.svg"); }

/* ---------- About us ---------- */

/* Story beside the picture, then the four values in a row. */
.rs-sv-about__row > .rs-sv-about__story {
	flex: 1 1 0;
	min-width: 0;
}

.rs-sv-about__story > * {
	margin: 0;
}

.rs-sv-about__row > .rs-sv-about__media {
	flex: 1.25 1 0;
	min-width: 0;
	margin: 0;
}

.rs-sv-about__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--preset--border-radius--20, 20px);
}

.rs-sv-about > .rs-sv-about__values {
	margin-top: 48px;
	align-items: stretch;
}

.rs-sv-about .rs-sv-value {
	padding: 23px;
}

/* ---------- FAQ (home FAQ design, see home-why.css) ---------- */

.rs-sv-faq .rs-eyebrow {
	font-weight: 600;
}

/* ---------- Get a quote ---------- */

.rs-sv-quote .rs-sv-quote__card {
	box-sizing: border-box;
	padding: 47px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--preset--border-radius--25, 25px);
	background: linear-gradient(160deg, var(--wp--preset--color--purple-20) 0%, var(--wp--preset--color--white) 60%);
}

.rs-sv-quote__card > .rs-sv-quote__text {
	flex: 0 1 400px;
	min-width: 0;
	position: sticky;
	top: var(--rs-header-clearance, 96px);
	transition: top 0.25s ease;
}

.rs-sv-quote__text > * {
	margin: 0;
}

.rs-sv-quote__text > .rs-sv-quote__label {
	margin-top: 8px;
}

.rs-sv-quote__list {
	display: grid;
	gap: 8px;
	padding-left: 0;
	list-style: none;
	color: var(--wp--preset--color--text-secondary);
}

.rs-sv-quote__list li {
	position: relative;
	padding-left: 28px;
}

.rs-sv-quote__list li::before {
	content: "";
	position: absolute;
	top: 5px;
	left: 0;
	width: 16px;
	height: 16px;
	background: url("../../images/pricing/hero/check.svg") 0 0 / 100% 100% no-repeat;
}

.rs-sv-quote__card > .rs-sv-quote__form {
	flex: 1 1 0;
	min-width: 0;
}

/* ---------- Responsive ---------- */

/* Service cards need ~400px each: two per row below the full 1280 width. */
@media (max-width: 1279px) {
	.rs-sv-why .rs-sv-why__row {
		flex-direction: column;
	}

	.rs-sv-why__row > .rs-sv-why__lead,
	.rs-sv-why__row > .rs-sv-why__grid {
		flex: none;
	}

	.rs-sv-why__lead > .rs-sv-why__lead-title {
		padding-top: 24px;
	}

	.rs-sv-services .rs-sv-services__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 1023px) {
	/* How it works: two columns, the lines between them and between rows. */
	.rs-sv-process .rs-sv-process__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		border-top: 1px solid var(--wp--preset--color--border);
	}

	.rs-sv-process .rs-sv-step {
		border-bottom: 1px solid var(--wp--preset--color--border);
	}

	.rs-sv-process .rs-sv-step:nth-child(odd) {
		border-left: 0;
	}

	.rs-sv-engage .rs-sv-engage__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.rs-sv-why .rs-sv-why__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.rs-sv-about .rs-sv-about__values {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.rs-sv-about .rs-sv-about__row,
	.rs-sv-quote .rs-sv-quote__card {
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
	}

	.rs-sv-about__row > .rs-sv-about__story,
	.rs-sv-about__row > .rs-sv-about__media,
	.rs-sv-quote__card > .rs-sv-quote__text,
	.rs-sv-quote__card > .rs-sv-quote__form {
		flex: none;
	}

	.rs-sv-quote__card > .rs-sv-quote__text {
		position: static;
	}
}

@media (max-width: 781px) {
	.rs-sv-hero {
		padding-top: 128px;
		padding-bottom: 0;
	}

	.rs-sv-process .rs-sv-process__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.rs-sv-why .rs-sv-why__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.rs-sv-why__row > .rs-sv-why__lead {
		padding: 23px;
	}

	.rs-sv-process .rs-sv-step,
	.rs-sv-process .rs-sv-step:nth-child(odd) {
		border-left: 0;
	}

	.rs-sv-hero__actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.rs-sv-hero__actions > .wp-block-button,
	.rs-sv-hero__actions .wp-block-button__link {
		width: 100%;
	}

	.rs-sv-services .rs-sv-services__grid,
	.rs-sv-about .rs-sv-about__values {
		grid-template-columns: minmax(0, 1fr);
	}

	.rs-sv-engage .rs-sv-way {
		padding: 23px;
	}

	.rs-sv-card > .rs-sv-card__top {
		padding-right: 104px;
	}

	.rs-sv-services > .rs-sv-enterprise.rs-sv-enterprise {
		padding: 24px;
	}

	.rs-sv-enterprise > .rs-sv-enterprise__art {
		position: absolute;
		top: 4px;
		right: -32px;
		width: 156px;
		height: 156px;
		margin: 0;
	}

	.rs-sv-enterprise__text > .rs-sv-enterprise__title {
		padding-right: 88px;
	}

	.rs-sv-card__top::after {
		right: -40px;
		width: 136px;
		height: 136px;
	}

	.rs-sv-quote .rs-sv-quote__card {
		padding: 23px;
	}
}