/*
 * Fast Farm render farm page (page-renderfarm.php): hero poster cards, projects dots slider, centred service cards,
 * social band, wave steps, tools card. Loaded after service.css on this page only.
 * Motion uses transform/opacity/colour/box-shadow only, so no hover, slide or step change moves any height.
 * Physical left/right values are measured on the 1440px design container.
 */

/* Latin digits for product names such as "3ds Max" / "Cinema 4D" (the theme's Kalameh FaNum maps 0-9 to Persian glyphs). */
@font-face {
	font-family: "Atieh Latin Digits";
	src: local("Segoe UI"), local("SegoeUI"), local("Tahoma"), local("Arial"), local("Helvetica Neue"), local("Roboto"), local("DejaVu Sans");
	unicode-range: U+0030-0039;
	font-display: swap;
}

/* ---------- 1. Hero ---------- */
.rf-hero {
	padding-top: clamp(32px, 3.2vw, 62px);
}

.rf-hero__inner {
	position: relative;
}

.rf-hero__decor {
	position: absolute;
	z-index: -1;
	height: auto;
	pointer-events: none;
}

.rf-hero__decor--l {
	left: 0.9%;
	top: 66px;
	width: 8.2%;
}

.rf-hero__decor--r {
	left: 85%;
	top: 106px;
	width: 8.2%;
}

.rf-hero__head {
	max-width: 880px;
	margin: 0 auto;
	text-align: center;
}

.rf-hero__title {
	margin: 0;
	color: var(--at-body);
	font-size: clamp(22px, 1.2vw + 9px, 32px);
	font-weight: 600;
	line-height: 1.6;
}

.rf-hero__text {
	max-width: 820px;
	margin: 20px auto 0;
	color: var(--at-body);
	font-size: clamp(16px, 0.45vw + 11.4px, 20px);
	font-weight: 500;
	line-height: 1.9;
}

.rf-hero__actions {
	margin-top: 24px;
}

.rf-hero__cards {
	display: grid;
	grid-template-columns: minmax(0, 708fr) minmax(0, 344fr) minmax(0, 344fr); /* RTL: wide card on the right */
	gap: clamp(16px, 1.5%, 22px);
	margin: 60px 0 0;
	padding: 0;
	list-style: none;
}

.rf-card {
	position: relative;
	overflow: hidden;
	border-radius: 32px;
	box-shadow: 0 0 3px rgba(43, 43, 43, 0.22);
	transition: transform 0.35s var(--at-ease), box-shadow 0.35s ease;
}

.rf-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 0 0 1px rgba(87, 179, 183, 0.3), 0 18px 36px -18px rgba(43, 43, 43, 0.35);
}

.rf-card--wide {
	background: #f9fffc;
}

.rf-card--dolphin {
	aspect-ratio: 344 / 540;
	background: #f8fbff;
}

.rf-card--filshah {
	aspect-ratio: 344 / 540;
	background: #fffaf9;
}

.rf-card__logo {
	position: absolute;
	z-index: 2;
	left: 50%;
	height: auto;
	transform: translateX(-50%);
}

.rf-card--wide .rf-card__logo {
	top: 24px;
	width: min(192px, 27%);
}

.rf-card--dolphin .rf-card__logo {
	top: 1.5%;
	width: 53.5%;
}

.rf-card--filshah .rf-card__logo {
	top: 4.4%;
	width: 50%;
}

.rf-card__art {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;
	width: 100%;
	height: auto;
}

.rf-card--wide .rf-card__art {
	width: min(62.8%, calc(100% - 250px));
}

.rf-card__stats {
	position: absolute;
	z-index: 2;
	right: 37px;
	bottom: 10.2%;
	width: 200px;
}

.rf-card__stats-title {
	margin: 0 0 24px;
	color: var(--at-body);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.7;
}

.rf-stats {
	display: grid;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rf-stat {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.rf-stat__icon {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 4px;
	color: #ff5722;
}

.rf-stat__icon .at-icon {
	display: block;
	width: 100%;
	height: 100%;
}

.rf-stat__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.rf-stat__value {
	color: var(--at-muted);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.6;
}

.rf-stat__value[dir="ltr"] {
	text-align: right;
}

.rf-stat__label {
	color: #8d8d8d;
	font-size: 13px;
	line-height: 1.6;
}

@media (max-width: 1439.98px) {
	.rf-card__stats-title {
		margin-bottom: 18px;
		font-size: 16px;
	}

	.rf-stats {
		gap: 16px;
	}

	.rf-stat__value {
		font-size: 15px;
	}

	.rf-stat__label {
		font-size: 12px;
	}
}

/* ---------- 2. Projects slider ---------- */
.rf-projects__track {
	display: grid;
	gap: 48px;
}

.rf-project {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* RTL: image on the right */
	align-items: center;
	gap: 24px;
}

.rf-project__media {
	margin: 0;
	overflow: hidden;
	border-radius: 24px;
	aspect-ratio: 708 / 448;
	background: var(--at-soft);
}

.rf-project__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rf-project__body {
	padding-inline-end: clamp(0px, 3%, 42px);
}

.rf-project__eyebrow {
	margin: 0 0 16px;
	color: var(--at-teal);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.6;
}

.rf-project__title {
	margin: 0 0 16px;
	color: var(--at-body);
	font-size: clamp(20px, 0.6vw + 13px, 24px);
	font-weight: 600;
	line-height: 1.6;
}

.rf-project__text {
	margin: 0;
	color: var(--at-muted);
	font-size: clamp(14px, 0.2vw + 12.2px, 16px);
	font-weight: 500;
	line-height: 2.1;
}

.rf-project__actions {
	margin-top: 32px;
}

/* With JS: every slide in one grid cell (height = tallest slide), only the active one visible. */
.rf-projects__slider.is-ready .rf-project {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

.rf-projects__slider.is-ready .rf-project.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.5s ease, visibility 0s;
}

.rf-projects__slider.is-ready .rf-project .rf-project__media img {
	transform: scale(1.04);
	transition: transform 0.9s var(--at-ease);
}

.rf-projects__slider.is-ready .rf-project.is-active .rf-project__media img {
	transform: none;
}

/* Prev arrow (right in RTL), dots, next arrow (left). The dots keep their old vertical centre (14 + 20 = 22 + 12px). */
.rf-projects__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-top: 14px;
}

.rf-projects__nav[hidden] {
	display: none;
}

.rf-projects__dots {
	display: flex;
	justify-content: center;
	gap: 0;
}

/* r17 (WCAG 2.5.8): each button is >= 24 x 24 (8px dot + 2 x 8px padding); the visible dot (::before) is unchanged. */
.rf-projects__dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 24px;
	padding: 0 8px;
	border: 0;
	background: none;
	cursor: pointer;
}

.rf-projects__dot::before {
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 4px;
	background: #d9d9d9;
	transition: width 0.35s var(--at-ease), background-color 0.35s ease;
}

.rf-projects__dot:hover::before {
	background: #b5dcde;
}

.rf-projects__dot[aria-current="true"]::before {
	width: 24px;
	background: var(--at-teal);
}

.rf-projects__dot:focus-visible {
	outline: 2px solid var(--at-ink);
	outline-offset: 2px;
	border-radius: 6px;
}

/* ---------- 3. Service cards (4 columns, centred icon + title) ---------- */
.svc-features--centered .at-section-head {
	max-width: 1060px;
}

.svc-features--cols-4 .svc-features__list {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}

.svc-features--centered .svc-feature {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	min-height: 0;
	padding: 40px 24px 32px;
}

.svc-features--centered .svc-feature__icon {
	width: 88px;
	height: 88px;
	margin: 0 auto 32px;
}

.svc-features--centered .svc-feature__title {
	margin-bottom: 16px;
	font-size: clamp(17px, 0.3vw + 14.2px, 20px);
	text-align: center;
}

.svc-features--centered .svc-feature__text {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.9;
}

/* ---------- 4. Social band ---------- */
.rf-social__card {
	position: relative;
	height: 448px;
	overflow: hidden;
	border-radius: 32px;
	background: #fff;
	box-shadow: 0 0 3px rgba(43, 43, 43, 0.22);
}

.rf-social__panel {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	width: 52.4%;
	height: 73.4%;
	border-bottom-left-radius: 32px;
	background: #316466;
	clip-path: polygon(0 0, 100% 0, 75.2% 100%, 0 100%);
}

.rf-social__content {
	margin-left: 6.6%;
	margin-right: 19%;
	color: #fff;
	text-align: center;
}

.rf-social__title {
	margin: 0;
	color: #fff;
	font-size: clamp(20px, 0.6vw + 13px, 24px);
	font-weight: 600;
	line-height: 1.6;
}

.rf-social__text {
	margin: 16px 0 0;
	color: rgba(255, 255, 255, 0.92);
	font-size: 16px;
	line-height: 2;
}

.rf-social__actions {
	margin-top: 24px;
}

.rf-social__media {
	position: absolute;
	right: 0;
	top: 43px;
	bottom: 0;
	width: 59.8%;
	margin: 0;
	overflow: hidden;
	border-top-right-radius: 24px;
}

.rf-social__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	clip-path: polygon(20.3% 0, 100% 0, 100% 100%, 0 100%);
}

.rf-social__bar {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 40%;
	height: 78px;
	margin: 0;
	padding: 0 64px 0 72px;
	list-style: none;
	background: var(--at-soft);
	clip-path: polygon(0 0, calc(100% - 42px) 0, 100% 100%, 0 100%);
}

.rf-social__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	color: #316466;
	transition: transform 0.3s var(--at-ease), color 0.3s ease, background-color 0.3s ease;
}

.rf-social__link .at-icon {
	display: block;
	width: 24px;
	height: 24px;
}

.rf-social__link:hover,
.rf-social__link:focus-visible {
	color: var(--at-teal-hover);
	background: rgba(87, 179, 183, 0.12);
	transform: translateY(-2px);
}

.rf-social__link:focus-visible {
	outline: 2px solid var(--at-ink);
	outline-offset: 2px;
}

/* ---------- 5. Wave steps (looping highlight from assets/js/service-steps.js) ---------- */
.svc-steps--wave {
	overflow-x: clip; /* the wave runs past the container to the viewport edges */
}

.svc-steps--wave .svc-steps__box {
	position: relative;
}

.svc-steps--wave .svc-steps__head {
	max-width: 1060px;
	margin: 0 auto;
	text-align: center;
}

.svc-steps--wave .svc-steps__title {
	margin: 0;
	color: var(--at-body);
	font-size: clamp(22px, 1.4vw + 4px, 26px);
	font-weight: 600;
	line-height: 1.6;
}

.svc-steps--wave .svc-steps__text {
	margin: 12px 0 0;
	color: var(--at-muted);
	font-size: 16px;
	line-height: 2;
}

.svc-steps__wave {
	position: absolute;
	left: 0;
	bottom: 40px;
	width: 100%;
	height: 560px;
	overflow: visible;
	pointer-events: none;
}

.svc-steps__wave path {
	fill: none;
	stroke: var(--at-teal);
	stroke-width: 1.5;
	stroke-dasharray: 3 4;
	stroke-linecap: round;
}

.svc-steps--wave .svc-steps__list {
	--oy: 0px;
	position: relative;
	height: 600px;
	margin: 88px 0 0;
	padding: 0;
	list-style: none;
}

.svc-steps--wave .svc-step {
	--p: 0;
	--bw: 300px;
	position: absolute;
	top: 0;
	left: var(--x);
	width: 0;
	height: 100%;
	cursor: pointer;
}

.svc-steps--wave .svc-step:nth-child(1) {
	--x: 91.111%;
	--cy: calc(201px + var(--oy));
}

.svc-steps--wave .svc-step:nth-child(2) {
	--x: 62.083%;
	--cy: calc(335px + var(--oy));
}

.svc-steps--wave .svc-step:nth-child(3) {
	--x: 36.25%;
	--cy: calc(201px + var(--oy));
}

.svc-steps--wave .svc-step:nth-child(4) {
	--x: 12.292%;
	--cy: calc(349px + var(--oy));
}

.svc-steps--wave .svc-step__track {
	position: absolute;
	left: -32px;
	top: calc(var(--cy) - 32px);
	width: 64px;
	height: 64px;
}

.svc-steps--wave .svc-step__num {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	padding: 0;
	border: 1px solid var(--at-teal);
	border-radius: 50%;
	background: #fcfcfc;
	color: var(--at-btn);
	font: inherit;
	font-size: 30px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}

/* Progress ring around the active circle (fills while its time runs). */
.svc-steps--wave .svc-step__num::after {
	content: "";
	position: absolute;
	inset: -7px;
	border-radius: 50%;
	background: conic-gradient(var(--at-teal) calc(var(--p) * 1turn), rgba(87, 179, 183, 0.16) 0);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.svc-steps--wave .svc-step__num:focus-visible {
	outline: 2px solid var(--at-ink);
	outline-offset: 10px;
}

/* L-shaped grey connector from the circle to the step title. */
.svc-steps--wave .svc-step__line {
	position: absolute;
	border: 0 solid #d6d6d6;
	pointer-events: none;
}

.svc-steps--wave .svc-step__progress {
	display: none;
}

.svc-steps--wave .svc-step:nth-child(odd) .svc-step__line {
	right: 50%;
	bottom: 100%;
	width: 27px;
	height: calc(var(--cy) - 32px - 13px);
	border-top-width: 1px;
	border-right-width: 1px;
	border-top-right-radius: 12px;
}

.svc-steps--wave .svc-step:nth-child(even) .svc-step__line {
	left: 50%;
	top: 100%;
	width: 96px;
	height: 51px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-left-radius: 12px;
}

.svc-steps--wave .svc-step__body {
	position: absolute;
}

/* Crest steps: copy above-left of the circle. */
.svc-steps--wave .svc-step:nth-child(odd) .svc-step__body {
	right: 49px;
	top: 0;
	width: var(--bw);
}

/* Trough steps: title to the right of the connector's end, copy under it running leftwards. */
.svc-steps--wave .svc-step:nth-child(even) .svc-step__body {
	left: 116px;
	top: calc(var(--cy) + 32px + 51px - 13px);
	width: max-content;
}

.svc-steps--wave .svc-step:nth-child(even) .svc-step__text {
	position: absolute;
	right: 0;
	top: 52px;
	width: var(--bw);
}

.svc-steps--wave .svc-step__title {
	margin: 0 0 26px;
	color: var(--at-body);
	font-size: clamp(16px, 0.3vw + 13.2px, 19px);
	font-weight: 600;
	line-height: 1.6;
	transition: color 0.4s ease;
}

.svc-steps--wave .svc-step__text {
	margin: 0;
	color: var(--at-muted);
	font-size: 14px;
	font-weight: 500;
	line-height: 2;
}

.svc-steps--wave .svc-step:hover .svc-step__num {
	box-shadow: 0 0 0 6px rgba(87, 179, 183, 0.12);
}

.svc-steps--wave .svc-step.is-active .svc-step__num {
	background: var(--at-btn);
	color: #fff;
	box-shadow: 0 8px 20px -8px rgba(70, 158, 162, 0.7);
}

.svc-steps--wave .svc-step.is-active .svc-step__num::after {
	opacity: 1;
}

.svc-steps--wave .svc-step.is-active .svc-step__title {
	color: var(--at-teal);
}

/* Reduced motion (set by JS): no ring, the highlight only moves on click/focus. */
.svc-steps--wave .svc-steps__box.is-static .svc-step__num::after {
	content: none;
}

/* ---------- 6. Tools card ---------- */
.site-main--renderfarm > .rf-tools {
	margin-top: clamp(96px, 7vw, 128px); /* room for the photo rising above the card */
}

.rf-tools__card {
	position: relative;
	display: flex;
	min-height: 446px;
	padding: 64px 41px 40px;
	border-radius: 32px;
	background: #fff;
	box-shadow: 0 0 3px rgba(43, 43, 43, 0.22);
}

.rf-tools__content {
	position: relative;
	z-index: 1;
	width: min(560px, 54%);
}

.rf-tools__eyebrow {
	margin: 0 0 16px;
	color: var(--at-teal);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.6;
}

.rf-tools__title {
	margin: 0;
	color: var(--at-body);
	font-size: clamp(20px, 0.6vw + 13px, 24px);
	font-weight: 600;
	line-height: 1.6;
}

.rf-tools__lists {
	display: grid;
	gap: 18px;
	margin: 30px 0 0;
}

.rf-tools__row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 16px;
}

.rf-tools__label {
	color: #8d8d8d;
	font-size: 12px;
	line-height: 1.6;
}

.rf-tools__items {
	margin: 0;
}

.rf-tools__items ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rf-tools__items li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--at-muted);
	font-family: "Atieh Latin Digits", "Kalameh", Tahoma, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
}

/* 20px product logo before the name (LTR item: logo on the left). Shorter than the 22.4px line, so rows keep their height. */
.rf-tools__logo {
	display: block;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	object-fit: contain;
}

.rf-tools__logo--fallback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	background: #e6f3f4;
	color: var(--at-teal);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

.rf-tools__items li + li {
	margin-right: 8px;
	padding-right: 8px;
	border-right: 1px solid #cde8e9;
}

.rf-tools__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 36px;
}

.rf-tools__call {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--at-muted);
	text-decoration: none;
}

.rf-tools__call-icon {
	display: flex;
	flex: 0 0 48px;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--at-teal);
	color: #fff;
	transition: transform 0.35s var(--at-ease), background-color 0.3s ease;
}

.rf-tools__call-icon .at-icon {
	display: block;
	width: 21px;
	height: 21px;
}

.rf-tools__call-text {
	display: flex;
	flex-direction: column;
	line-height: 1.6;
}

.rf-tools__call-label {
	color: #8d8d8d;
	font-size: 12px;
}

.rf-tools__call-number {
	color: var(--at-muted);
	font-size: 14px;
	font-weight: 600;
	text-align: right;
}

.rf-tools__call:hover .rf-tools__call-icon,
.rf-tools__call:focus-visible .rf-tools__call-icon {
	transform: rotate(-12deg) scale(1.06);
	background: var(--at-teal-hover);
}

.rf-tools__call:focus-visible {
	outline: 2px solid var(--at-ink);
	outline-offset: 4px;
	border-radius: 999px;
}

.rf-tools__loop {
	position: absolute;
	left: 35.8%;
	top: 131px;
	width: 155px;
	height: auto;
	pointer-events: none;
}

.rf-tools__man {
	position: absolute;
	left: 40px;
	bottom: 0;
	width: min(551px, 38%);
	height: auto;
	pointer-events: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 1279.98px) {
	/* Narrower steps: shorter copy columns, everything pushed 40px down so the longer copy clears the circles. */
	.svc-steps--wave .svc-steps__list {
		--oy: 40px;
		height: 680px;
	}

	.svc-steps__wave {
		bottom: 80px;
	}

	.svc-steps--wave .svc-step {
		--bw: 250px;
	}

	.svc-features--cols-4 .svc-features__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.rf-tools__man {
		left: 16px;
	}

	.rf-tools__loop {
		display: none;
	}
}

@media (max-width: 1199.98px) {
	.rf-hero__decor {
		display: none;
	}

	/* Wide card on its own row, the two posters under it, all at the design's poster width. */
	.rf-hero__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 710px;
		margin-inline: auto;
	}

	.rf-card--wide {
		grid-column: 1 / -1;
		height: 420px;
	}

	.rf-card--wide .rf-card__logo {
		left: auto;
		right: 24px;
		width: 160px;
		transform: none;
	}

	.rf-card__stats {
		bottom: 32px;
		right: 24px;
		width: 240px;
	}

	.rf-card--wide .rf-card__art {
		width: min(60%, calc(100% - 280px));
	}
}

@media (max-width: 991.98px) {
	.rf-project {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.rf-project__body {
		padding: 0;
	}

	/* Social band: panel, photo and social bar stacked. */
	.rf-social__card {
		display: flex;
		flex-direction: column;
		height: auto;
	}

	.rf-social__panel {
		position: static;
		width: auto;
		height: auto;
		padding: 36px 20px;
		border-radius: 0;
		clip-path: none;
	}

	.rf-social__content {
		max-width: 560px;
		margin: 0 auto;
	}

	.rf-social__media {
		position: static;
		width: auto;
		aspect-ratio: 865 / 471;
		border-radius: 0;
	}

	.rf-social__media img {
		clip-path: none;
	}

	.rf-social__bar {
		position: static;
		justify-content: center;
		gap: 24px;
		width: auto;
		padding: 0 20px;
		clip-path: none;
	}

	/* Steps: vertical timeline, the wave hidden. */
	.svc-steps__wave {
		display: none;
	}

	.svc-steps--wave .svc-steps__list {
		height: auto;
		margin-top: 40px;
	}

	.svc-steps--wave .svc-step {
		position: relative;
		left: auto;
		width: auto;
		height: auto;
		min-height: 64px;
		padding: 0 72px 36px 0;
	}

	.svc-steps--wave .svc-step:last-child {
		padding-bottom: 0;
	}

	.svc-steps--wave .svc-step__track {
		left: auto;
		right: 0;
		top: 0;
		width: 52px;
		height: 52px;
	}

	.svc-steps--wave .svc-step__num {
		width: 52px;
		height: 52px;
		font-size: 24px;
	}

	.svc-steps--wave .svc-step:nth-child(n) .svc-step__line {
		display: none;
	}

	.svc-steps--wave .svc-step:not(:last-child)::before {
		content: "";
		position: absolute;
		right: 25px;
		top: 62px;
		bottom: 10px;
		border-right: 1px dashed var(--at-teal);
	}

	.svc-steps--wave .svc-step:nth-child(n) .svc-step__body,
	.svc-steps--wave .svc-step:nth-child(n) .svc-step__text {
		position: static;
		width: auto;
	}

	.svc-steps--wave .svc-step__body {
		padding-top: 12px;
	}

	.svc-steps--wave .svc-step__title {
		margin-bottom: 8px;
	}

	/* Tools card: photo on top, copy under it. */
	.site-main--renderfarm > .rf-tools {
		margin-top: clamp(56px, 3.75vw, 72px);
	}

	.rf-tools__card {
		flex-direction: column;
		padding: 0 20px 32px;
	}

	.rf-tools__man {
		position: static;
		order: -1;
		width: min(70%, 360px);
		margin: -24px auto 0;
	}

	.rf-tools__content {
		width: auto;
		padding-top: 24px;
		border-top: 1px solid var(--at-line);
	}
}

@media (max-width: 767.98px) {
	.svc-features--cols-4 .svc-features__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.svc-features--centered .svc-feature {
		padding: 28px 20px 24px;
	}

	.svc-features--centered .svc-feature__icon {
		width: 72px;
		height: 72px;
		margin-bottom: 20px;
	}
}

@media (max-width: 599.98px) {
	.rf-hero__cards {
		gap: 12px;
		margin-top: 40px;
	}

	.rf-card {
		border-radius: 24px;
	}

	/* Wide card flows: logo, stats, then the art at the bottom-left. */
	.rf-card--wide {
		display: flex;
		flex-direction: column;
		height: auto;
		padding: 20px 20px 0;
	}

	.rf-card--wide .rf-card__logo,
	.rf-card__stats,
	.rf-card--wide .rf-card__art {
		position: static;
		transform: none;
	}

	.rf-card--wide .rf-card__logo {
		width: 150px;
		margin: 0 auto 16px;
	}

	.rf-card__stats {
		width: auto;
	}

	.rf-card__stats-title {
		margin-bottom: 16px;
	}

	.rf-stats {
		gap: 14px;
	}

	.rf-card--wide .rf-card__art {
		align-self: flex-end; /* RTL: flex-end is the left edge */
		width: 82%;
		margin-top: 8px;
	}

	.rf-social__bar {
		justify-content: space-around;
		gap: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rf-card,
	.rf-project__media img,
	.rf-projects__dot::before,
	.rf-social__link,
	.rf-tools__call-icon,
	.svc-steps--wave .svc-step__num,
	.svc-steps--wave .svc-step__num::after,
	.svc-steps--wave .svc-step__title {
		transition: none;
	}

	.rf-projects__slider.is-ready .rf-project,
	.rf-projects__slider.is-ready .rf-project.is-active {
		transition: none;
	}

	.rf-card:hover,
	.rf-social__link:hover,
	.rf-tools__call:hover .rf-tools__call-icon {
		transform: none;
	}
}