/* ==========================================================================
   Free consultation landing page - demo build

   Dark theme, matched to the original page:
     section backgrounds  #000 / #111 / #070707
     display headings     Antonio, 56px, 1.2em, uppercase
     body + buttons       Jost
     buttons              square, uppercase, 20px 40px
     motion               fade-up / fade-up-left, 1000ms, 50ms delay

   The one deliberate change is the accent. The original used gold
   (#C9B21E) for every button and for the "no recovery no fee" band;
   here that role is played by --rj-accent. Change that single token to
   recolour every call to action on the page.
   ========================================================================== */

/* ------------------------------------------------------------------ fonts */
/* Antonio + Jost are the faces the original uses, loaded in include/header.php.
   The local files below are the offline fallback, so the page still reads
   correctly with no network. */

@font-face {
	font-family: 'Poppins';
	src: url('fonts/poppins-normal.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Poppins';
	src: url('fonts/poppins-bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'RJ Condensed';
	src: url('fonts/RobotoCondensed-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'RJ Condensed';
	src: url('fonts/RobotoCondensed-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}


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

:root {
	--rj-black:        #000000;
	--rj-panel:        #111111;
	--rj-panel-deep:   #070707;
	--rj-panel-soft:   #181818;

	/* the colour that replaced the original gold (#C9B21E) */
	--rj-accent:       #0B8F62;
	--rj-accent-hover: #097249;
	--rj-accent-bright:#29C08A;

	--rj-white:        #FFFFFF;
	--rj-grey:         #D0D0D0;
	--rj-grey-dim:     #999999;
	--rj-line:         rgba(255, 255, 255, .12);

	--rj-font:         'Jost', 'Poppins', 'Segoe UI', Arial, sans-serif;
	--rj-display:      'Antonio', 'RJ Condensed', 'Arial Narrow', sans-serif;

	--rj-section-pad:  90px;
	--rj-max:          1200px;
}


/* ------------------------------------------------------------------ base */

.rj-body {
	margin: 0;
	background: var(--rj-black);
	color: var(--rj-grey);
	font-family: var(--rj-font);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

.rj-body img {
	max-width: 100%;
	height: auto;
	display: block;
}

.rj-body a { color: var(--rj-accent-bright); text-decoration: none; }
.rj-body a:hover { color: var(--rj-white); }

.rj-container {
	width: 100%;
	max-width: var(--rj-max);
	margin: 0 auto;
	padding: 0 20px;
}

.rj-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--rj-accent);
	color: #fff;
	padding: 12px 20px;
}
.rj-skip-link:focus { left: 0; color: #fff; }

:focus-visible {
	outline: 3px solid var(--rj-accent-bright);
	outline-offset: 2px;
}


/* ------------------------------------------------------------------ headings */

.rj-h1,
.rj-h2 {
	font-family: var(--rj-display);
	font-weight: 700;
	font-size: 56px;
	line-height: 1.2em;
	text-transform: uppercase;
	color: var(--rj-white);
	margin: 0 0 22px;
}

.rj-h3 {
	font-family: var(--rj-font);
	font-size: 30px;
	font-weight: 700;
	line-height: 35px;
	letter-spacing: -.18px;
	text-transform: uppercase;
	color: var(--rj-white);
	margin: 0 0 12px;
}

.rj-eyebrow {
	display: block;
	font-family: var(--rj-font);
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 2.6px;
	text-transform: uppercase;
	color: var(--rj-accent-bright);
	margin: 0 0 14px;
}

.rj-lead {
	font-size: 18px;
	line-height: 1.8;
	color: var(--rj-grey);
	margin: 0 0 20px;
}

.rj-text {
	font-size: 17px;
	line-height: 1.8;
	color: var(--rj-grey-dim);
	margin: 0 0 20px;
}

.rj-lead-center { margin-left: auto; margin-right: auto; max-width: 780px; }


/* ------------------------------------------------------------------ buttons */
/* square, uppercase, 20px 40px - the original geometry */

.rj-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--rj-font);
	font-size: 17px;
	font-weight: 500;
	letter-spacing: .6px;
	line-height: 1.3;
	text-transform: uppercase;
	text-align: center;
	padding: 20px 40px;
	border: 2px solid transparent;
	border-radius: 0;
	cursor: pointer;
	transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.rj-btn svg { width: 19px; height: 19px; flex: none; }

.rj-btn-accent {
	background: var(--rj-accent);
	color: var(--rj-white);
}
.rj-btn-accent:hover { background: var(--rj-accent-hover); color: var(--rj-white); }

.rj-btn-outline {
	background: transparent;
	color: var(--rj-white);
	border-color: rgba(255, 255, 255, .45);
}
.rj-btn-outline:hover {
	background: var(--rj-accent);
	border-color: var(--rj-accent);
	color: var(--rj-white);
}

.rj-btn-block { width: 100%; }

.rj-cta-pair {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 12px;
}
.rj-cta-pair-center { justify-content: center; }


/* ------------------------------------------------------------------ sections */

.rj-section { position: relative; padding: var(--rj-section-pad) 0; overflow: hidden; }
.rj-section-black { background: var(--rj-black); }
.rj-section-panel { background: var(--rj-panel); }
.rj-section-deep  { background: var(--rj-panel-deep); }

.rj-section-head {
	text-align: center;
	max-width: 900px;
	margin: 0 auto 54px;
}

.rj-section-foot { text-align: center; margin-top: 50px; }

/* the soft circle the original floats behind a few sections */
.rj-shape {
	position: absolute;
	width: 569px;
	height: 569px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(11, 143, 98, .20) 0%, rgba(11, 143, 98, 0) 68%);
	pointer-events: none;
	z-index: 0;
}
.rj-shape-left  { left: -240px; top: -170px; }
.rj-shape-right { right: -240px; bottom: -190px; }

.rj-relative { position: relative; z-index: 1; }

.rj-figure { margin: 0; overflow: hidden; }
.rj-figure img { width: 100%; }


/* ------------------------------------------------------------------ 1. hero */

.rj-hero {
	position: relative;
	min-height: 700px;
	display: flex;
	align-items: center;
	background-color: var(--rj-black);
	background-size: cover;
	background-position: center;
	padding: 60px 0 var(--rj-section-pad);
	overflow: hidden;
}

/* opacity .85 over an 85deg black gradient - the original overlay */
.rj-hero-overlay {
	position: absolute;
	inset: 0;
	opacity: .85;
	background: linear-gradient(85deg, #000 11%, #0000001C 75%);
}

.rj-hero-inner { position: relative; z-index: 2; width: 100%; }

.rj-hero-copy { padding-right: 10px; }

.rj-hero-eyebrow {
	display: block;
	font-family: var(--rj-font);
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--rj-accent-bright);
	margin: 0 0 14px;
}

.rj-hero-note {
	font-size: 16px;
	line-height: 1.7;
	color: var(--rj-grey-dim);
	margin: 0 0 26px;
	max-width: 560px;
}

.rj-hero-points {
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
	display: grid;
	gap: 14px;
}
.rj-hero-points li {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	color: var(--rj-white);
	font-size: 17px;
	line-height: 1.5;
}

.rj-tick {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	flex: none;
	margin-top: 2px;
	background: var(--rj-accent);
	color: var(--rj-white);
}
.rj-tick svg { width: 15px; height: 15px; }

.rj-hero-call {
	display: inline-flex;
	align-items: center;
	gap: 15px;
	padding: 14px 26px 14px 16px;
	border: 1px solid var(--rj-line);
	color: var(--rj-white);
}
.rj-hero-call:hover { border-color: var(--rj-accent); color: var(--rj-white); }
.rj-hero-call small { display: block; font-size: 13px; color: var(--rj-grey-dim); letter-spacing: .5px; }
.rj-hero-call strong { font-family: var(--rj-display); font-size: 30px; line-height: 1.1; letter-spacing: .8px; }

.rj-hero-call-icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	flex: none;
	background: var(--rj-accent);
	color: var(--rj-white);
}
.rj-hero-call-icon svg { width: 21px; height: 21px; }


/* ------------------------------------------------------------------ form card */
/* the original form panel sits on #111 */

.rj-form-card {
	background: var(--rj-panel);
	padding: 26px 26px 24px;
	scroll-margin-top: 30px;
}

.rj-form-card-head { margin-bottom: 18px; }

.rj-form-card-head h2 {
	font-family: var(--rj-display);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.15em;
	text-transform: uppercase;
	color: var(--rj-white);
	margin: 0 0 8px;
}

.rj-form-card-head p {
	font-size: 15px;
	line-height: 1.55;
	color: var(--rj-grey-dim);
	margin: 0;
}

.rj-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 14px;
}

.rj-field { display: flex; flex-direction: column; min-width: 0; }
.rj-field-wide { grid-column: 1 / -1; }

/* the inputs are labelled by their placeholder, so the real label is
   hidden from sight but still read out by a screen reader */
.rj-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* the one question that still needs words above it */
.rj-input {
	width: 100%;
	font-family: var(--rj-font);
	font-size: 15px;
	color: var(--rj-white);
	background: var(--rj-panel-soft);
	border: 1px solid var(--rj-line);
	border-radius: 0;
	padding: 10px 13px;
	transition: border-color .25s ease, background-color .25s ease;
	appearance: none;
}
.rj-input::placeholder { color: #9A9A9A; opacity: 1; }
.rj-input:focus {
	outline: none;
	background: #1F1F1F;
	border-color: var(--rj-accent);
}

select.rj-input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D0D0D0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 17px;
	padding-right: 44px;
}
select.rj-input option { background: var(--rj-panel); color: var(--rj-white); }

.rj-textarea { resize: vertical; min-height: 56px; line-height: 1.5; }

.rj-field-hint {
	font-size: 14px;
	line-height: 1.6;
	color: var(--rj-grey-dim);
	margin: 8px 0 0;
}

.rj-field-error {
	font-size: 14px;
	font-weight: 500;
	color: #FF7272;
	margin-top: 8px;
}

.rj-field-invalid .rj-input { border-color: #8A3A3A; }

.rj-form-alert {
	padding: 15px 18px;
	font-size: 16px;
	line-height: 1.6;
	margin-bottom: 22px;
}
.rj-form-alert-success {
	background: rgba(11, 143, 98, .16);
	color: var(--rj-white);
	border-left: 4px solid var(--rj-accent);
}
.rj-form-alert-error {
	background: rgba(192, 57, 43, .16);
	color: #FFD3CE;
	border-left: 4px solid #C0392B;
}

.rj-form-consent {
	font-size: 12px;
	line-height: 1.55;
	color: #7A7A7A;
	margin: 10px 0 0;
	text-align: center;
}

.rj-recaptcha-note {
	font-size: 12px;
	line-height: 1.5;
	color: #7A7A7A;
	margin: 0;
}

/* honeypot : off screen but still reachable by a bot */
.rj-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}


/* ------------------------------------------------------------------ 2. business case card */
/* replaces the old progress bars - the client brief rules out showing a
   recovery-rate percentage, so the right hand column carries the business
   case as plain points instead of bars */

.rj-case-card {
	background: var(--rj-panel);
	border: 1px solid var(--rj-line);
	padding: 34px 32px 30px;
}

.rj-case-title {
	font-family: var(--rj-font);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.18px;
	text-transform: uppercase;
	color: var(--rj-white);
	margin: 0 0 14px;
}

.rj-case-intro {
	font-size: 16px;
	line-height: 1.7;
	color: var(--rj-grey);
	margin: 0 0 22px;
}

.rj-case-list {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	display: grid;
	gap: 14px;
}
.rj-case-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--rj-white);
}

.rj-case-note {
	font-size: 13px;
	line-height: 1.6;
	color: #7A7A7A;
	border-top: 1px solid var(--rj-line);
	padding-top: 16px;
	margin: 0 0 22px;
}

/* ------------------------------------------------------------------ 3. six numbered points */

.rj-points {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 34px 30px;
	margin-top: 70px;
}

.rj-point { position: relative; }

.rj-point-number {
	display: block;
	font-family: var(--rj-display);
	font-size: 62px;
	font-weight: 700;
	line-height: 1;
	color: var(--rj-accent);
	margin-bottom: 14px;
}

.rj-point h3 {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	text-transform: uppercase;
	letter-spacing: -.18px;
	color: var(--rj-white);
	margin: 0 0 10px;
}

.rj-point p {
	font-size: 16px;
	line-height: 1.75;
	color: var(--rj-grey-dim);
	margin: 0;
}


/* ------------------------------------------------------------------ 4. no recovery no fee band */
/* the original band is a full-width accent block with outlined text */

.rj-band {
	background: var(--rj-accent);
	padding: var(--rj-section-pad) 0;
	text-align: center;
}

.rj-band-title {
	font-family: var(--rj-display);
	font-weight: 700;
	font-size: 96px;
	line-height: 1.05;
	text-transform: uppercase;
	margin: 0 0 10px;
	color: #02010100;
	-webkit-text-stroke: 2px var(--rj-white);
	text-stroke: 2px var(--rj-white);
}

/* no text-stroke support : show it filled instead of invisible */
@supports not ((-webkit-text-stroke: 1px #000) or (text-stroke: 1px #000)) {
	.rj-band-title { color: var(--rj-white); }
}

.rj-band-text {
	font-size: 20px;
	color: rgba(255, 255, 255, .92);
	margin: 0;
}


/* ------------------------------------------------------------------ 5. what you get */

.rj-offer { height: 100%; }

.rj-offer-icon {
	display: grid;
	place-items: center;
	width: 68px;
	height: 68px;
	background: rgba(11, 143, 98, .16);
	border: 1px solid rgba(41, 192, 138, .35);
	color: var(--rj-accent-bright);
	margin-bottom: 22px;
}
.rj-offer-icon svg { width: 32px; height: 32px; }

.rj-offer h3 {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.18px;
	text-transform: uppercase;
	color: var(--rj-white);
	margin: 0 0 10px;
}

.rj-offer p {
	font-size: 16px;
	line-height: 1.75;
	color: var(--rj-grey-dim);
	margin: 0;
}


/* ------------------------------------------------------------------ 6. stats */

.rj-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 32px 0 34px;
}

.rj-stat {
	border: 1px solid var(--rj-line);
	padding: 22px 20px;
	text-align: center;
}
.rj-stat b {
	display: block;
	font-family: var(--rj-display);
	font-size: 44px;
	line-height: 1;
	color: var(--rj-accent-bright);
	margin-bottom: 8px;
}
.rj-stat span {
	font-size: 14px;
	line-height: 1.55;
	color: var(--rj-grey-dim);
}


/* ------------------------------------------------------------------ 8. review */

.rj-review {
	max-width: 1000px;
	margin: 0 auto;
	text-align: center;
}

.rj-review-mark {
	display: inline-grid;
	place-items: center;
	width: 76px;
	height: 76px;
	color: var(--rj-accent-bright);
	margin-bottom: 18px;
}
.rj-review-mark svg { width: 56px; height: 56px; }

.rj-review-photo {
	width: 104px;
	height: 104px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto 26px;
	border: 2px solid var(--rj-accent);
}

.rj-review-quote {
	font-family: var(--rj-font);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.65;
	color: var(--rj-white);
	margin: 0 0 24px;
	quotes: none;
}

.rj-review-name {
	font-family: var(--rj-display);
	font-size: 26px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--rj-accent-bright);
	margin: 0 0 4px;
}

.rj-review-role {
	font-size: 15px;
	color: #7A7A7A;
	margin: 0 0 26px;
}


/* ---- the slider ------------------------------------------------------- */
/*
	The viewport is a genuine scroll container with scroll snapping. That
	means swipe works for free on touch, and with javascript off every
	review is still reachable by scrolling. The arrows, dots and autoplay
	in customize-web.js only drive that same scroll position.

	Controls sit in a row underneath rather than floating over the quote,
	so they never land on top of the text at any width.
*/

.rj-slider {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin-bottom: 30px;
}

.rj-slider-viewport {
	flex: 0 0 100%;
	order: 1;
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior-x: contain;
}
.rj-slider-viewport::-webkit-scrollbar { display: none; }

/* every slide is exactly one viewport wide, so the track height is the
   tallest review and nothing jumps as you move between them */
.rj-slide {
	flex: 0 0 100%;
	min-width: 100%;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	padding: 0 6px;
}

.rj-slider-prev { order: 2; margin: 26px 14px 0 0; }
.rj-slider-dots { order: 3; margin-top: 26px; }
.rj-slider-next { order: 4; margin: 26px 0 0 14px; }

.rj-slider-arrow {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	flex: none;
	padding: 0;
	background: transparent;
	border: 1px solid var(--rj-line);
	color: var(--rj-white);
	cursor: pointer;
	transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.rj-slider-arrow:hover {
	background: var(--rj-accent);
	border-color: var(--rj-accent);
	color: var(--rj-white);
}
.rj-slider-arrow svg { width: 20px; height: 20px; }

.rj-slider-dots {
	display: flex;
	align-items: center;
	gap: 9px;
}

.rj-slider-dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .22);
	cursor: pointer;
	transition: width .3s ease, border-radius .3s ease, background-color .3s ease;
}
.rj-slider-dot:hover { background: rgba(255, 255, 255, .45); }

.rj-slider-dot-on {
	width: 30px;
	border-radius: 999px;
	background: var(--rj-accent);
}
.rj-slider-dot-on:hover { background: var(--rj-accent); }

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


/* ------------------------------------------------------------------ 9. final cta */

.rj-final {
	position: relative;
	min-height: 700px;
	display: flex;
	align-items: center;
	background-color: var(--rj-black);
	background-size: cover;
	background-position: center;
	padding: 100px 0;
	text-align: center;
	overflow: hidden;
}

/* opacity .95 over an 85deg black gradient - the original overlay */
.rj-final-overlay {
	position: absolute;
	inset: 0;
	opacity: .95;
	background: linear-gradient(85deg, #000000A1 11%, #0000001C 85%);
}

.rj-final-inner { position: relative; z-index: 2; width: 100%; }

.rj-final-title {
	font-family: var(--rj-display);
	font-weight: 700;
	font-size: 56px;
	line-height: 1.2em;
	text-transform: uppercase;
	color: var(--rj-white);
	max-width: 950px;
	margin: 0 auto 18px;
}

.rj-final-text {
	font-size: 18px;
	line-height: 1.75;
	color: var(--rj-grey);
	max-width: 700px;
	margin: 0 auto 32px;
}


/* ------------------------------------------------------------------ footer */
/* the original ends on a centred logo, nothing else */

.rj-footer {
	background: var(--rj-black);
	padding: 70px 0 40px;
	text-align: center;
}

.rj-footer-logo { display: inline-block; }
.rj-footer-logo img { width: 230px; margin: 0 auto; }

.rj-footer-contact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 28px;
	margin: 26px 0 0;
	font-size: 16px;
	color: var(--rj-grey-dim);
}
.rj-footer-contact a { color: var(--rj-grey); }
.rj-footer-contact a:hover { color: var(--rj-accent-bright); }

.rj-footer-bottom {
	border-top: 1px solid var(--rj-line);
	margin-top: 34px;
	padding-top: 26px;
	font-size: 14px;
	line-height: 1.7;
	color: #6A6A6A;
}


/* ------------------------------------------------------------------ sticky mobile call bar */

.rj-sticky-call {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 70;
	display: none;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--rj-accent);
	color: var(--rj-white);
	font-family: var(--rj-font);
	font-size: 17px;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 16px;
}
.rj-sticky-call:hover { color: var(--rj-white); }


/* ------------------------------------------------------------------ the PHI notice */
/*
	A general website form is not a safe channel for protected health
	information, so the form says so. This has to read as a real notice
	rather than small print, hence the panel and the icon.
*/

.rj-phi-notice {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	background: rgba(11, 143, 98, .10);
	border-left: 3px solid var(--rj-accent);
	padding: 12px 14px;
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--rj-grey);
}
.rj-phi-icon { flex: none; color: var(--rj-accent-bright); line-height: 0; }
.rj-phi-icon svg { width: 19px; height: 19px; }


/* ------------------------------------------------------------------ 7. how it works */

.rj-steps {
	list-style: none;
	counter-reset: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
	max-width: 900px;
	margin-inline: auto;
}

.rj-step {
	position: relative;
	display: flex;
	gap: 26px;
	padding: 0 0 34px 0;
}

/* the line that joins one step to the next */
.rj-step::before {
	content: '';
	position: absolute;
	left: 27px;
	top: 56px;
	bottom: 0;
	width: 1px;
	background: var(--rj-line);
}
.rj-step:last-child { padding-bottom: 0; }
.rj-step:last-child::before { display: none; }

.rj-step-number {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	flex: none;
	border: 1px solid var(--rj-accent);
	background: var(--rj-black);
	color: var(--rj-accent-bright);
	font-family: var(--rj-display);
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
}

.rj-step-body { padding-top: 6px; }

.rj-step-body h3 {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.18px;
	text-transform: uppercase;
	color: var(--rj-white);
	margin: 0 0 8px;
}

.rj-step-body p {
	font-size: 16px;
	line-height: 1.75;
	color: var(--rj-grey-dim);
	margin: 0;
}


/* ------------------------------------------------------------------ 10. faq */
/* built on <details>, so it opens and closes with no javascript at all */

.rj-faq {
	max-width: 900px;
	margin: 0 auto;
	border-top: 1px solid var(--rj-line);
}

.rj-faq-item { border-bottom: 1px solid var(--rj-line); }

.rj-faq-q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 0;
	cursor: pointer;
	list-style: none;
	font-size: 19px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--rj-white);
	transition: color .25s ease;
}
.rj-faq-q::-webkit-details-marker { display: none; }
.rj-faq-q:hover { color: var(--rj-accent-bright); }

.rj-faq-mark {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	flex: none;
	border: 1px solid var(--rj-line);
	color: var(--rj-accent-bright);
	transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.rj-faq-mark svg { width: 17px; height: 17px; }
.rj-faq-q:hover .rj-faq-mark { border-color: var(--rj-accent); }

/* the plus turns into a minus when the answer is open */
.rj-faq-item[open] .rj-faq-mark {
	background: var(--rj-accent);
	border-color: var(--rj-accent);
	color: var(--rj-white);
}
.rj-faq-item[open] .rj-faq-bar { display: none; }

/* <details> cannot transition its own height, but the answer can still
   arrive rather than snap into place */
.rj-faq-a {
	padding: 0 54px 24px 0;
	animation: rj-faq-open .32s ease both;
}

@keyframes rj-faq-open {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}
.rj-faq-a p {
	font-size: 16px;
	line-height: 1.8;
	color: var(--rj-grey-dim);
	margin: 0;
}

/* ------------------------------------------------------------------ motion */
/*
	Same feel as the original: fade-up and fade-up-left, 1000ms, 50ms delay.
	The class is only added by javascript once the browser has painted a
	frame, so if nothing ever animates nothing is ever hidden either.
*/

.rj-aos {
	opacity: 0;
	transition: opacity 1000ms ease, transform 1000ms ease;
	transition-delay: 50ms;
	will-change: opacity, transform;
}
.rj-aos-fade-up      { transform: translate3d(0, 50px, 0); }
.rj-aos-fade-up-left { transform: translate3d(60px, 60px, 0); }

.rj-aos.rj-aos-in {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
	.rj-faq-a { animation: none; }
	.rj-aos { opacity: 1; transform: none; transition: none; }
	.rj-btn { transition: none; }
}


/* ------------------------------------------------------------------ responsive */

/*
	The form column is far taller than the copy beside it, so pin the copy to
	the top of the hero - otherwise the headline sits below the fold and you
	have to scroll to read it.

	The height guard matters: the copy is roughly 630px tall, and sticking
	something taller than the window would clip its bottom instead.
*/
@media (min-width: 992px) and (min-height: 720px) {
	.rj-hero-copy {
		position: sticky;
		top: 30px;
	}
}

@media (max-width: 1199.98px) {
	.rj-h1, .rj-h2, .rj-final-title { font-size: 48px; }
	.rj-points { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991.98px) {
	:root { --rj-section-pad: 64px; }
	.rj-h1, .rj-h2, .rj-final-title { font-size: 42px; }
	.rj-band-title { font-size: 68px; }
	.rj-hero, .rj-final { min-height: 0; }
	.rj-hero-copy { padding-right: 0; margin-bottom: 40px; }
	.rj-case-card { margin-top: 34px; }
	.rj-shape { display: none; }
}

@media (max-width: 767.98px) {
	.rj-body { font-size: 16px; }
	.rj-h1, .rj-h2, .rj-final-title { font-size: 34px; }
	.rj-h3, .rj-point h3, .rj-offer h3 { font-size: 22px; line-height: 1.3; }
	.rj-band-title { font-size: 44px; -webkit-text-stroke-width: 1.5px; }
	.rj-form-card { padding: 30px 22px 26px; }
	.rj-form-card-head h2 { font-size: 30px; }
	.rj-form { grid-template-columns: 1fr; }
	.rj-points { grid-template-columns: 1fr; margin-top: 46px; }
	.rj-stats { grid-template-columns: 1fr; }
	.rj-review-quote { font-size: 18px; }
	.rj-case-card { padding: 26px 22px 24px; }
	.rj-case-title { font-size: 22px; }
	.rj-step { gap: 16px; }
	.rj-step-number { width: 44px; height: 44px; font-size: 21px; }
	.rj-step::before { left: 21px; top: 46px; }
	.rj-step-body h3 { font-size: 20px; }
	.rj-faq-q { font-size: 17px; }
	.rj-faq-a { padding-right: 0; }
	.rj-slider-arrow { width: 42px; height: 42px; }
	.rj-slide { padding: 0 2px; }
	.rj-btn { width: 100%; padding: 18px 24px; font-size: 16px; }
	.rj-cta-pair { flex-direction: column; }
	.rj-sticky-call { display: flex; }
	.rj-footer { padding-bottom: 96px; }
}

@media (max-width: 575.98px) {
	.rj-hero-call { width: 100%; }
	.rj-hero-call strong { font-size: 25px; }
}