/* ==========================================================================
   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-question {
	display: block;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .3px;
	color: var(--rj-white);
	margin-bottom: 7px;
}
.rj-question em { color: #FF7272; font-style: normal; }

.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; }

/* side by side, so the yes / no answer costs one row instead of two */
.rj-radio-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.rj-radio {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 9px 12px;
	border: 1px solid var(--rj-line);
	background: var(--rj-panel-soft);
	font-size: 14px;
	line-height: 1.3;
	color: var(--rj-grey);
	cursor: pointer;
	transition: border-color .25s ease, background-color .25s ease, color .25s ease;
}
.rj-radio:hover { border-color: rgba(41, 192, 138, .5); }
.rj-radio input { accent-color: var(--rj-accent); width: 18px; height: 18px; flex: none; }
.rj-radio:has(input:checked) { border-color: var(--rj-accent); color: var(--rj-white); }

.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,
.rj-field-invalid .rj-radio { 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. progress bars */

.rj-progress-card { padding-left: 10px; }

.rj-progress { margin-bottom: 30px; }

.rj-progress-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 12px;
}
.rj-progress-head span {
	font-family: var(--rj-font);
	font-size: 20px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .3px;
	color: var(--rj-white);
	line-height: 1.35;
}
.rj-progress-head b {
	font-family: var(--rj-display);
	font-size: 28px;
	color: var(--rj-accent-bright);
	flex: none;
}

.rj-progress-track {
	position: relative;
	height: 8px;
	background: rgba(255, 255, 255, .12);
	overflow: hidden;
}

.rj-progress-bar {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	display: block;
	width: 0;
	background: var(--rj-accent);
	transition: width 1.4s cubic-bezier(.22, .8, .3, 1);
}

.rj-progress-note {
	font-size: 14px;
	color: #7A7A7A;
	margin: 0 0 28px;
}


/* ------------------------------------------------------------------ 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);
}


/* ------------------------------------------------------------------ 7. trust badges */

.rj-badges {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 26px;
	align-items: center;
}

.rj-badge {
	display: grid;
	place-items: center;
	padding: 22px 18px;
	border: 1px solid var(--rj-line);
}
.rj-badge img { max-height: 76px; width: auto; }


/* ------------------------------------------------------------------ 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); }


/* ------------------------------------------------------------------ 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-aos { opacity: 1; transform: none; transition: none; }
	.rj-progress-bar { 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-progress-card { padding-left: 0; margin-top: 34px; }
	.rj-badges { grid-template-columns: repeat(2, 1fr); }
	.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-radio-row { 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-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; }
}