/* Piquiyo Split Steps
   Sticky image on one side, numbered steps on the other.
   Every colour and gap is a custom property so Elementor controls can drive it. */

.pqss {
	--pqss-accent: #ff4937;
	--pqss-heading: #14161a;
	--pqss-body: #4a4f57;
	--pqss-rule: #e4e7eb;
	--pqss-eyebrow: #8a8f98;
}

.pqss *,
.pqss *::before,
.pqss *::after {
	box-sizing: border-box;
}

.pqss__inner {
	--pqss-gap: 72px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--pqss-gap);
	align-items: start;
}

/* Image side ------------------------------------------------------------- */

.pqss--image-right .pqss__media {
	order: 2;
}

.pqss__media {
	--pqss-sticky-top: 100px;
	min-width: 0;
}

.pqss--sticky .pqss__media {
	position: sticky;
	top: var(--pqss-sticky-top);
}

.pqss__media figure {
	margin: 0;
	overflow: hidden;
	border-radius: 16px;
	line-height: 0;
	background: #f2f3f5;
}

.pqss__img {
	display: block;
	width: 100%;
	height: auto;
}

.pqss--ratio-4-5 .pqss__img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.pqss--ratio-1-1 .pqss__img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.pqss--ratio-3-2 .pqss__img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Content side ----------------------------------------------------------- */

.pqss__content {
	min-width: 0;
}

.pqss__eyebrow {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pqss-eyebrow);
}

.pqss__heading {
	margin: 0 0 16px;
	font-size: clamp(28px, 3.2vw, 44px);
	line-height: 1.12;
	color: var(--pqss-heading);
}

.pqss__intro {
	margin: 0 0 8px;
	font-size: 17px;
	line-height: 1.55;
	color: var(--pqss-body);
}

/* Steps ------------------------------------------------------------------ */

.pqss__steps {
	--pqss-step-gap: 26px;
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
	counter-reset: none;
}

.pqss__step {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	gap: 18px;
	align-items: start;
	padding: var(--pqss-step-gap) 0;
	border-top: 1px solid var(--pqss-rule);
}

.pqss__step:first-child {
	border-top: 0;
	padding-top: 0;
}

.pqss__step:last-child {
	padding-bottom: 0;
}

/* The badge is the only thing that reacts to scroll, so body text keeps
   full contrast at all times. */
.pqss__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1.5px solid var(--pqss-accent);
	border-radius: 50%;
	background: transparent;
	color: var(--pqss-accent);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	transition: background-color 220ms ease, color 220ms ease, transform 220ms ease;
}

.pqss__step.is-active .pqss__num {
	background: var(--pqss-accent);
	color: #fff;
	transform: scale(1.06);
}

.pqss__step-title {
	margin: 5px 0 6px;
	font-size: 19px;
	line-height: 1.3;
	color: var(--pqss-heading);
}

.pqss__step-text {
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
	color: var(--pqss-body);
}

/* Link ------------------------------------------------------------------- */

.pqss__cta {
	display: inline-block;
	margin-top: 28px;
	color: var(--pqss-accent);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.pqss__cta:hover,
.pqss__cta:focus-visible {
	color: var(--pqss-heading);
	text-decoration: underline;
	text-underline-offset: 4px;
}

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

@media (max-width: 1024px) {
	.pqss__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}

	.pqss--image-right .pqss__media {
		order: 0;
	}

	.pqss--sticky .pqss__media {
		position: static;
	}

	/* A tall portrait crop wastes the whole screen on a phone. */
	.pqss--ratio-4-5 .pqss__img {
		aspect-ratio: 3 / 2;
	}
}

@media (max-width: 600px) {
	.pqss__step {
		grid-template-columns: 30px minmax(0, 1fr);
		gap: 14px;
	}

	.pqss__num {
		width: 30px;
		height: 30px;
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pqss__num {
		transition: none;
	}

	.pqss__step.is-active .pqss__num {
		transform: none;
	}
}