/*
 * 2026 redesign — shared styles for the Home, About and Practice Area templates.
 * Values are read from the Figma file (Home canvas, 1920px frames), not chosen;
 * the node each block comes from is named above it. Responsive behaviour is ours:
 * the file has no tablet or phone frames.
 *
 * main.css still loads (the header needs it), so everything here is scoped to .rd
 * and prefixed rd-, and resets the few main.css element rules that reach inside.
 */

@font-face {
	font-family: "Roboto RD";
	src: url("../fonts/roboto-latin-wght-normal.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
/* Arial scaled to Roboto's measurements, for the moment before Roboto arrives, so text keeps its
   line breaks when the real font swaps in instead of jumping (metrics as used by next/font) */
@font-face {
	font-family: "Roboto RD Fallback";
	src: local("Arial"), local("ArialMT");
	ascent-override: 92.49%;
	descent-override: 24.34%;
	line-gap-override: 0%;
	size-adjust: 100.3%;
}

:root {
	--rd-blue: #3454D1;
	--rd-sky: #3CB7FF;
	--rd-slate: #364049;
	--rd-ink: #212121;
	--rd-text: #333333;
	--rd-line: #D9D9D9;
	--rd-rule: #E3E3E3;
	--rd-grey: #F2F2F2;
	--rd-muted: #626A74;
	--rd-stat-label: #D4EFFF;

	/* content column: x 310–1610 in every frame */
	--rd-content: 1300px;
	--rd-gutter: 40px;
	/* full-bleed bands sit 24px in from each edge (x 24, w 1872) */
	--rd-inset: 24px;
	--rd-container-left: max(var(--rd-gutter), (100vw - var(--rd-scrollbar, 0px) - var(--rd-content)) / 2);

	--rd-h2: clamp(30px, 1.6rem + 1.9vw, 50px);
}
@media (max-width: 767px) {
	:root { --rd-gutter: 20px; --rd-inset: 10px; }
}

/* No single word stranded on the last line of a paragraph, list item or card name */
.rd :where(h1, h2, h3, p, li, .rd-trust__name, .rd-acc__label) { text-wrap: pretty; }

.rd {
	font-family: "Roboto RD", Roboto, "Roboto RD Fallback", "Helvetica Neue", Arial, sans-serif;
	color: var(--rd-slate);
	font-size: 18px;
	line-height: 26px;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}
/*
 * The reset is written with :where(), which contributes no specificity, so a component
 * rule with a single class still beats it. Written as plain descendant selectors it
 * outranks every `.rd-thing { padding }` in this file and silently flattens the page.
 */
.rd *, .rd *::before, .rd *::after { box-sizing: border-box; }
.rd :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd) {
	margin: 0;
	padding: 0;
	font-family: inherit;
}
.rd :where(ul, ol) { list-style: none; }
.rd :where(li) { padding: 0; margin: 0; }
.rd :where(img) { max-width: 100%; height: auto; display: block; }
.rd :where(a) { transition: color .15s, background-color .15s, border-color .15s, opacity .15s; }
.rd :where(button) { font-family: inherit; }
.rd :focus-visible { outline: 3px solid var(--rd-sky); outline-offset: 3px; border-radius: 4px; }

.rd-container {
	width: min(var(--rd-content), 100% - 2 * var(--rd-gutter));
	margin-inline: auto;
	position: relative;
}
/*
 * A container nested inside a full-bleed band would otherwise measure its gutter from
 * the band's edge, so text inside a band sat 24px further in than text outside it at
 * every width below 1380. Measure from the viewport instead, which is the grid the
 * comp draws.
 */
.rd-band .rd-container {
	width: min(var(--rd-content), 100vw - var(--rd-scrollbar, 0px) - 2 * var(--rd-gutter));
}
/*
 * Between phone and design width the band's own padding matters more than the page grid:
 * text measured off the viewport sat 16px inside the band at 1280 and 1024, reading as no
 * padding at all. The inset now grows from 48px at a 1024 window toward the design's
 * spacing, and is capped by the 1300px column long before 1920.
 */
@media (min-width: 768px) {
	.rd-band .rd-container { width: min(var(--rd-content), 100vw - var(--rd-scrollbar, 0px) - 2 * var(--rd-inset) - 2 * clamp(48px, 5.5vw, 110px)); }
	.rd-formband__inner { width: min(var(--rd-content), 100vw - var(--rd-scrollbar, 0px) - 2 * var(--rd-inset) - 2 * clamp(48px, 5.5vw, 110px)); }
}
/* On a phone a band sits 10px in from the screen edge, so the page gutter left text 10px
   inside the band's own edge; bands get 26px of their own instead. */
@media (max-width: 767px) {
	.rd-band .rd-container { width: calc(100vw - var(--rd-scrollbar, 0px) - 2 * var(--rd-inset) - 52px); }
}
.rd-center { text-align: center; }
.rd-sr {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Section heading: Roboto 600 50px #212121, 59px lines (#1075:1069 is 979x59 on one line) */
.rd-h2 {
	font-size: var(--rd-h2);
	line-height: 1.18;
	font-weight: 600;
	color: var(--rd-ink);
	letter-spacing: 0;
	text-wrap: balance;
}

/* Buttons (#1075:1116): padding 15px 30px, radius 50px, Roboto 600 17px, white */
.rd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 30px;
	border-radius: 50px;
	font-size: 17px;
	line-height: 20px;
	font-weight: 600;
	color: #fff !important;
	text-decoration: none !important;
	background: var(--rd-blue);
	border: 0;
	cursor: pointer;
	min-height: 44px;
	white-space: nowrap;
}
.rd-btn--sky { background: var(--rd-sky); }
.rd-btn:hover { background: #2742ae; }
.rd-btn--sky:hover { background: #1fa3ef; }

/* Decorative radial line-work behind a heading */
.rd-lines {
	position: absolute;
	inset: 0 0 auto 0;
	pointer-events: none;
	z-index: 0;
	display: flex;
	justify-content: center;
	overflow: hidden;
}
.rd-lines svg { width: 1920px; min-width: 1920px; height: auto; flex: none; }
.rd-lines + * { position: relative; z-index: 1; }

/* ------------------------------------------------------------------- prose */
/* Editor copy: 18/26 body, list and link styling. Shared by every redesigned page. */
.rd-prose { font-size: 18px; line-height: 26px; color: var(--rd-slate); }
.rd-prose > * + * { margin-top: 26px !important; }
.rd-prose ul { list-style: disc; padding-left: 22px; }
.rd-prose ol { list-style: decimal; padding-left: 22px; }
.rd-prose li + li { margin-top: 6px; }
.rd-prose a { color: var(--rd-blue); text-decoration: underline; text-underline-offset: 2px; }
.rd-prose a:hover { color: #1f3aa3; }
.rd-prose strong { font-weight: 700; }
.rd-prose--invert, .rd-prose--invert p, .rd-prose--invert li { color: #fff; }
.rd-prose--invert a { color: #fff; text-decoration-color: var(--rd-sky); }
.rd-prose--invert a:hover { color: #D4EFFF; }

/* ------------------------------------------------------------------ sliders */
/*
 * Embla moves the track with a transform. Until it initialises (or if it never
 * does) the viewport is a native horizontal scroller, so every slide is reachable.
 */
.rd-slider { position: relative; }
.rd-slider__viewport { overflow-x: auto; scrollbar-width: none; touch-action: pan-y pinch-zoom; }
.rd-slider__viewport::-webkit-scrollbar { display: none; }
.rd-slider.is-ready .rd-slider__viewport { overflow: hidden; clip-path: inset(-20px -20px -20px var(--rd-clip, 0px)); }
.rd-slider__track {
	display: flex;
	/* the resting crop: JS sets --rd-rest; a margin, not a transform, so Embla keeps it */
	margin-left: var(--rd-rest, var(--rd-container-left));
}
.rd-slider__slide { flex: 0 0 auto; min-width: 0; }

/* #1075:1088: 1130px track, 60px, then two 40px arrows 30px apart */
.rd-slider__controls {
	display: flex;
	align-items: center;
	gap: 60px;
	margin-top: 50px;
}
.rd-slider__progress {
	position: relative;
	flex: 1 1 auto;
	height: 5px;
	cursor: pointer;
}
.rd-slider__progress::before {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 2px;
	height: 1px;
	background: var(--rd-line);
}
.rd-slider__thumb {
	position: absolute;
	left: 0; top: 0;
	height: 5px;
	width: var(--rd-thumb, 40.6%); /* 459 of 1130 in the comp */
	background: var(--rd-sky);
	transform: translateX(var(--rd-thumb-x, 0px));
	will-change: transform;
}
.rd-slider__arrows { display: flex; gap: 30px; flex: none; }
.rd-slider__prev, .rd-slider__next {
	width: 44px; height: 44px;
	display: grid; place-items: center;
	padding: 0; margin: -2px;
	background: none; border: 0; border-radius: 50%;
	cursor: pointer;
}
.rd-slider__prev svg, .rd-slider__next svg { width: 40px; height: 40px; }
.rd-slider__prev:hover, .rd-slider__next:hover { background: var(--rd-grey); }
.rd-slider__prev:disabled, .rd-slider__next:disabled { opacity: .35; cursor: default; background: none; }
@media (max-width: 767px) {
	.rd-slider__controls { gap: 24px; margin-top: 30px; }
	.rd-slider__arrows { gap: 12px; }
}

/* -------------------------------------------------------------- testimonials */
/* #1139:6191: column, padding 100px 0, gap 50px */
.rd-testimonials { padding: 100px 0; }
.rd-testimonials .rd-h2 { max-width: 1001px; margin: 0 auto 50px; }
/* #1139:6194: row gap 24px; card 640 wide, padding 30px 0, gap 30px, 1px #E3E3E3 top rule */
.rd-slider--testimonials .rd-slider__slide { width: 640px; margin-right: 24px; }
/* Below 1024 one quote at a time, as wide as the column, and the next one starts past the screen
   edge: a peek of 1–30px showed only chopped letters ("We / deli / also") */
@media (max-width: 1023px) {
	.rd-slider--testimonials .rd-slider__slide {
		width: calc(100vw - var(--rd-scrollbar, 0px) - 2 * var(--rd-gutter));
		max-width: 640px;
		margin-right: calc(var(--rd-gutter) + 8px);
	}
}
.rd-quote__inner {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-top: 30px;
	border-top: 1px solid var(--rd-rule);
	height: 100%;
}
.rd-quote__mark { width: 35px; height: 35px; display: grid; place-items: center; }
.rd-quote__mark svg { width: 27px; height: 23px; }
/* #1139:6182: Roboto 500 21px / 31px, #364049 */
/* a <blockquote>: main.css (Bootstrap) gives every blockquote a 5px grey left border, which
   is the grey bar the design does not have */
.rd-quote__text { font-size: 21px; line-height: 31px; font-weight: 500; color: var(--rd-slate); border: 0; padding: 0; margin: 0; }
.rd-quote__text p + p { margin-top: 12px; }
/* #1139:6189: 20px / 25px #333; name in bold, role lighter */
.rd-quote__who { margin-top: 10px; font-size: 15px; line-height: 25px; font-weight: 400; color: var(--rd-text); }
.rd-quote__who strong { font-size: 20px; font-weight: 600; }
@media (max-width: 767px) {
	.rd-testimonials { padding: 60px 0; }
	.rd-testimonials .rd-h2 { margin-bottom: 30px; }
	.rd-quote__text { font-size: 18px; line-height: 27px; }
}

/* --------------------------------------------------------------------- logos */
/* #1190:4167: column, padding 100px 0, gap 50px; two rows of logos */
.rd-logos { position: relative; padding: 100px 0; }
.rd-logos__title { max-width: 996px; margin: 0 auto 50px; text-align: center; }
.rd-logos__rows { display: grid; gap: 30px; overflow: hidden; }
.rd-logos__row { display: flex; overflow: hidden; }
/* Moved by assets/rd/js/logos.js, which recycles logos from one end to the other rather than
   animating a duplicated track. Until it runs (LiteSpeed holds scripts until the first
   interaction) the row simply sits still. */
.rd-logos__track {
	display: flex;
	align-items: center;
	flex: none;
	margin: 0;
	padding: 0;
	list-style: none;
	will-change: transform;
}
/* too few logos to fill the screen, or reduced motion: a still, centred row */
.rd-logos__row.is-static { justify-content: center; }
.rd-logos__row.is-static .rd-logos__track { flex: 0 1 auto; flex-wrap: wrap; justify-content: center; transform: none !important; }
.rd-logos__item {
	width: 280px;
	height: 120px;
	display: grid;
	place-items: center;
	padding: 10px 45px;
	flex: none;
}
/* capped by the cell as well as by size: a fixed 190px overflowed the phone cell and the marks overlapped */
.rd-logos__img { max-width: min(190px, 100%); max-height: 90px; width: auto !important; height: auto !important; object-fit: contain; }
/* An SVG has no pixel size to fall back on and came out at 121px beside 190px raster logos */
.rd-logos__img[src*=".svg"] { width: min(190px, 100%) !important; }
@media (prefers-reduced-motion: reduce) {
	.rd-logos__row { justify-content: center; }
	.rd-logos__track { flex: 0 1 auto; flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 767px) {
	.rd-logos { padding: 60px 0; }
	.rd-logos__title { margin-bottom: 30px; }
	.rd-logos__rows { gap: 10px; }
	.rd-logos__item { width: 150px; height: 90px; padding: 10px 18px; }
	.rd-logos__img { max-height: 60px; }
}

/* ------------------------------------------------------------------ form card */
/* #1139:6344: column, padding 50px, gap 31px, #3454D1, 1px rgba(255,255,255,.35), radius 20px */
.rd-formcard {
	width: 635px;
	max-width: 100%;
	flex: none;
	display: flex;
	flex-direction: column;
	gap: 31px;
	padding: 50px;
	background: var(--rd-blue);
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 20px;
	color: #fff;
}
/* #1139:6345: row, padding 5px, space-between, 2px white, radius 100px; each option 252x53 */
.rd-switch {
	display: flex;
	justify-content: space-between;
	padding: 5px;
	border: 2px solid #fff;
	border-radius: 100px;
}
.rd-switch__btn {
	flex: 1 1 0;
	height: 53px;
	border: 1px solid transparent;
	border-radius: 100px;
	background: transparent;
	color: #fff;
	font-size: 18px;
	line-height: 21px;
	font-weight: 700;
	cursor: pointer;
	padding: 0 12px;
}
.rd-switch__btn[aria-selected="true"] { background: #fff; border-color: #fff; color: var(--rd-text); }
.rd-switch__btn:not([aria-selected="true"]):hover { background: rgba(255, 255, 255, .12); }

/* Gravity Forms inside the card */
.rd-formcard .gform_wrapper { margin: 0 !important; }
.rd-formcard .gform_heading,
.rd-formcard .gform_validation_container,
.rd-formcard .gfield--type-captcha { display: none !important; }
.rd-formcard .gform_fields { display: flex !important; flex-direction: column; row-gap: 14px !important; }
.rd-formcard .gfield { margin: 0 !important; padding: 0 !important; }
.rd-formcard .gfield_label,
.rd-formcard .gform-field-label {
	display: block;
	margin: 0 0 10px !important;
	padding: 0 !important;
	font-family: inherit !important;
	font-size: 18px !important;
	line-height: 24px !important;
	font-weight: 700 !important;
	color: #fff !important;
}
/* #1139:6372: the asterisk, #FF0000 700 13px, raised */
.rd-formcard .gfield_required { color: #FF0000 !important; font-size: 13px !important; font-weight: 700; margin-left: 4px !important; vertical-align: 6px; }
.rd-formcard .gfield_required .gfield_required { margin: 0 !important; vertical-align: 0; }
/* #1139:6352: 535x52, radius 10px, rgba(255,255,255,.05) on 1px rgba(255,255,255,.35); text Roboto 600 14px */
.rd-formcard input[type="text"],
.rd-formcard input[type="email"],
.rd-formcard input[type="tel"],
.rd-formcard textarea {
	width: 100% !important;
	height: 52px;
	margin: 0 !important;
	padding: 0 13px !important;
	border: 1px solid rgba(255, 255, 255, .35) !important;
	border-radius: 10px !important;
	background: rgba(255, 255, 255, .05) !important;
	color: #fff !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 19px !important;
	box-shadow: none !important;
	outline: 0;
	transition: background-color .15s, color .15s;
}
.rd-formcard textarea { height: 134px !important; padding: 16px 13px !important; resize: vertical; }
.rd-formcard input::placeholder, .rd-formcard textarea::placeholder { color: rgba(255, 255, 255, .7); opacity: 1; }
/*
 * The comp draws a filled field white with #333 text ("John"). Scoped to the text
 * inputs by type: a bare `input:not(:placeholder-shown)` also matches the submit
 * button, which has no placeholder, and repainted it white.
 */
.rd-formcard :is(input[type="text"], input[type="email"], input[type="tel"]):is(:focus, :not(:placeholder-shown)),
.rd-formcard textarea:is(:focus, :not(:placeholder-shown)) {
	background: #fff !important;
	color: var(--rd-text) !important;
}
.rd-formcard :is(input[type="text"], input[type="email"], input[type="tel"], textarea):focus { box-shadow: 0 0 0 3px var(--rd-sky) !important; }
.rd-formcard input:focus::placeholder, .rd-formcard textarea:focus::placeholder { color: #9aa0a6; }
/* #1139:6370: 268x51, radius 100px, #3CB7FF, Roboto 700 18px, centred, 41px below the last field */
.rd-formcard .gform_footer { margin: 41px 0 0 !important; padding: 0 !important; display: flex; justify-content: center; }
.rd-formcard .gform_button {
	width: 268px !important;
	max-width: 100%;
	height: 51px;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 100px !important;
	background: var(--rd-sky) !important;
	color: #fff !important;
	font-family: inherit !important;
	font-size: 18px !important;
	line-height: 21px !important;
	font-weight: 700 !important;
	cursor: pointer;
	text-transform: none !important;
}
.rd-formcard .gform_button:hover { background: #1fa3ef !important; }
.rd-formcard .gform_validation_errors { background: #fff !important; border-radius: 10px; margin-bottom: 20px !important; }
.rd-formcard .validation_message { color: #fff !important; background: rgba(0, 0, 0, .2) !important; border: 0 !important; border-radius: 6px; padding: 4px 10px !important; margin-top: 6px !important; font-size: 14px; }
.rd-formcard .gform_confirmation_message { font-size: 20px; line-height: 28px; font-weight: 600; }
.rd-formcard .gform_ajax_spinner { margin-left: 12px; }

/* The resume drop zone (About "looking for a job" frame): dashed box, PDF glyph, underlined "upload here" */
.rd-formcard .resume-upload { position: relative; }
.rd-formcard .resume-upload .ginput_container {
	position: relative;
	height: 100px;
	border: 1px dashed rgba(255, 255, 255, .5);
	border-radius: 10px;
	background: rgba(255, 255, 255, .05);
}
.rd-formcard .resume-upload input[type="file"] {
	position: absolute; inset: 0; width: 100%; height: 100%;
	opacity: 0; cursor: pointer; z-index: 2;
}
.rd-formcard .resume-upload .ginput_container::before {
	content: "";
	position: absolute; left: 50%; top: 20px;
	width: 26px; height: 32px; margin-left: -13px;
	background: url("../icons/pdf.svg") center / contain no-repeat;
}
.rd-formcard .resume-upload.is-over .ginput_container { background: rgba(255, 255, 255, .15); border-color: #fff; }
.rd-formcard .resume-upload .gform_fileupload_rules { position: absolute; left: 0; right: 0; bottom: -22px; font-size: 13px; color: rgba(255, 255, 255, .7); text-align: right; }
.rd-formcard .upload-text {
	margin-top: -44px !important;
	text-align: center;
	font-size: 16px;
	line-height: 22px;
	color: #fff;
	pointer-events: none;
	position: relative;
	z-index: 1;
}
.rd-formcard .upload-text span { text-decoration: underline; }
/* The chosen file: an outlined row inside the card, with the name, its size and a way out.
   Nothing shows until there is a file, so an untouched form looks exactly as it did. */
.rd-formcard .filename-selected {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 16px;
	padding: 12px 14px;
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 10px;
	background: rgba(255, 255, 255, .12);
	color: #fff;
}
.rd-formcard .filename-selected.is-shown { display: flex; }
/* With a file in hand the box is smaller and quieter: it is now a way to change your mind. The
   prompt is pulled back over the box, so centring it means half the box plus half its own line. */
.rd-formcard form.rd-has-file .resume-upload .ginput_container,
.rd-formcard form.rd-has-file .gfield--type-fileupload .ginput_container { height: 64px; }
.rd-formcard form.rd-has-file .resume-upload .ginput_container::before,
.rd-formcard form.rd-has-file .gfield--type-fileupload .ginput_container::before { display: none; }
.rd-formcard form.rd-has-file .upload-text { margin-top: -53px !important; font-size: 15px; line-height: 22px; }

/* A file the form cannot take is refused as it is chosen, not at submit. */
.rd-formcard .rd-file__error:empty { display: none; }
.rd-formcard .rd-file__error {
	margin: 10px 0 0;
	padding: 10px 14px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .95);
	color: #8E2A2A;
	font-size: 15px;
	line-height: 21px;
}
.rd-formcard .has-error .ginput_container { border-color: #FFC9C9; }
.rd-formcard .resume-upload.has-file .ginput_container,
.rd-formcard .gfield--type-fileupload.has-file .ginput_container {
	border-style: solid;
	border-color: rgba(255, 255, 255, .7);
	background: rgba(255, 255, 255, .08);
}
.rd-formcard .rd-file { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rd-formcard .rd-file__icon { flex: none; color: rgba(255, 255, 255, .85); }
.rd-formcard .rd-file__text { display: flex; flex-direction: column; min-width: 0; }
.rd-formcard .filename-selected .file-name {
	font-size: 16px; line-height: 22px; font-weight: 600;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rd-formcard .rd-file__size { font-size: 13px; line-height: 18px; color: rgba(255, 255, 255, .75); }
.rd-formcard .remove-file {
	flex: none; background: none; border: 1px solid rgba(255, 255, 255, .5); border-radius: 100px;
	padding: 7px 16px; font: inherit; font-size: 14px; line-height: 1; color: #fff; cursor: pointer;
}
.rd-formcard .remove-file:hover, .rd-formcard .remove-file:focus-visible { background: rgba(255, 255, 255, .18); border-color: #fff; }
@media (max-width: 439px) {
	.rd-formcard .filename-selected { flex-direction: column; align-items: flex-start; gap: 10px; }
	.rd-formcard .remove-file { align-self: stretch; text-align: center; }
}

@media (max-width: 767px) {
	/* On phones the card's own border and padding go, so the fields use the band's full width;
	   the band's 26px inset is the padding that remains. */
	.rd-formcard { padding: 0; gap: 24px; border: 0; }
	.rd-switch__btn { font-size: 15px; height: 48px; padding: 0 6px; }
	/* The drop zone's line wraps to two on a phone; the box grows to hold both inside the dashes */
	.rd-formcard .resume-upload .ginput_container { height: 118px; }
	.rd-formcard .resume-upload .ginput_container::before { top: 16px; }
	.rd-formcard .upload-text { margin-top: -62px !important; padding: 0 16px; font-size: 15px; line-height: 20px; }
	/* Longer labels ("I want to learn more about OR") were cut off in the fixed 268px button at 18px */
	.rd-formcard .gform_button { width: auto !important; min-width: min(268px, 100%); padding: 0 20px !important; font-size: 16px !important; }
}
@media (max-width: 359px) {
	.rd-formcard .gform_button { padding: 0 12px !important; font-size: 15px !important; }
}
/* Below 440px "I’m looking for a job" no longer fits half the pill and wrapped to two lines,
   so the two options stack as full-width pills */
@media (max-width: 439px) {
	.rd-switch { flex-direction: column; gap: 4px; border-radius: 30px; }
	.rd-switch__btn { flex: none; height: 44px; }
}

/* ------------------------------------------------------------------ bands */
/* Full-width rounded band: x 21–24, 1872 wide at 1920, radius 20px */
.rd-band {
	width: calc(100% - 2 * var(--rd-inset));
	max-width: 1872px;
	margin-inline: auto;
	border-radius: 20px;
	background: var(--rd-blue);
	color: #fff;
}

/* #1139:6339: row, padding 80px 310px 80px 288px, space-between, align centre */
.rd-formband { padding: 80px 0; }
.rd-formband__inner {
	width: min(var(--rd-content), 100% - 2 * var(--rd-gutter));
	margin-inline: auto;
	padding-right: 27px; /* the card ends at x 1583, 27px inside the content column */
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
}
/* #1139:6340: 420 wide, column gap 50px */
.rd-formband__intro { width: 420px; flex: none; display: flex; flex-direction: column; gap: 50px; }
.rd-formband__copy { display: flex; flex-direction: column; gap: 30px; }
.rd-formband__copy[hidden] { display: none; }
.rd-formband__title { color: #fff; }
/* #1190:4472: steps, 398 wide, gap 20px, a 1px rgba(255,255,255,.35) rule threading the numbers */
/* 430 rather than the comp's 398: in the browser's text rendering "…within one business day" left "day" alone on a line */
.rd-steps { position: relative; display: flex; flex-direction: column; gap: 20px; width: 430px; max-width: 100%; }
.rd-steps::before {
	content: "";
	position: absolute;
	left: 20px; top: 17px; bottom: 17px;
	width: 1px;
	background: rgba(255, 255, 255, .35);
}
.rd-steps__item { display: flex; align-items: center; gap: 15px; font-size: 18px; line-height: 1.3; color: #fff; }
/* #1190:4564: 41x41 white, radius 16px, Roboto 600 13px #333 */
.rd-steps__num {
	position: relative;
	flex: none;
	width: 41px; height: 41px;
	display: grid; place-items: center;
	border-radius: 16px;
	background: #fff;
	color: var(--rd-text);
	font-size: 13px;
	font-weight: 600;
	line-height: 26px;
}
/* #1190:4491: row, padding 30px, gap 30px, rgba(51,51,51,.2), radius 20px */
.rd-formband__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 30px;
	padding: 30px;
	border-radius: 20px;
	background: rgba(51, 51, 51, .2);
}
.rd-formband__badge svg { width: 130px; height: 67px; flex: none; }
.rd-formband__badge p { font-size: 20px; line-height: 26px; font-weight: 300; color: #fff; }
.rd-formband__badge strong { font-weight: 700; }

@media (max-width: 1199px) {
	.rd-formband__inner { flex-direction: column; align-items: stretch; padding-right: 0; gap: 50px; }
	/* The explainer centres as one block once the form sits below it; the steps stay
	   left-aligned inside it so the numbers still line up down their rule. */
	.rd-formband__intro { width: 100%; align-items: center; text-align: center; }
	.rd-formband__copy { align-items: center; }
	.rd-steps { width: auto; text-align: left; }
	.rd-formband .rd-formcard { width: 100%; }
	.rd-formband__badge { justify-content: center; align-self: center; }
}
@media (max-width: 767px) {
	.rd-formband { padding: 50px 0; }
	.rd-formband__inner { width: calc(100% - 52px); }
	.rd-formband__badge { padding: 20px; gap: 16px; align-self: stretch; }
	.rd-formband__badge svg { width: 96px; height: 50px; }
	.rd-formband__badge p { font-size: 17px; line-height: 23px; }
}
/* the laurel above the line on small phones: beside it the text was squeezed into four short lines */
@media (max-width: 400px) {
	.rd-formband__badge { flex-direction: column; text-align: center; gap: 10px; }
}

/* ----------------------------------------------------------------- trust */
/* #1128:6005: 1298 wide, column, padding 80px 40px, gap 50px, #364049, 1px #E3E3E3, radius 20px */
.rd-trust {
	padding: 80px 40px;
	background: var(--rd-slate);
	border: 1px solid var(--rd-rule);
	border-radius: 20px;
	color: #fff;
}
.rd-trust__title { color: #fff; margin-bottom: 50px; }
.rd-trust__cols { display: flex; justify-content: space-between; }
/* #1128:5965: each column fills, padding 0 50px, centred; 1px rgba(227,227,227,.15) on the right */
.rd-trust__col {
	flex: 1 1 0;
	padding: 0 50px;
	display: flex;
	flex-direction: column;
	gap: 30px;
	align-items: flex-start;
	border-right: 1px solid rgba(227, 227, 227, .15);
}
.rd-trust__col:last-child { border-right: 0; }
.rd-trust__col > * { width: 250px; max-width: 100%; margin-inline: auto; }
.rd-trust__col > .rd-btn { width: auto; margin-left: calc((100% - min(250px, 100%)) / 2); margin-right: auto; }
.rd-trust__badge svg { width: 112px; height: 57px; }
/* #1128:5973: Roboto 600 25px, the second line in the light weight */
.rd-trust__name { font-size: 25px; line-height: 29px; font-weight: 300; color: #fff; }
.rd-trust__name strong { display: block; font-weight: 600; }
.rd-trust__text { font-size: 18px; line-height: 26px; font-weight: 400; color: #fff; }
/* Stacked below 1200: three columns at 1024 were 299px each and broke "Staffing Partner of the / Year" */
@media (max-width: 1199px) {
	.rd-trust { padding: 50px 24px; }
	.rd-trust__title { margin-bottom: 30px; }
	.rd-trust__cols { flex-direction: column; gap: 0; }
	.rd-trust__col { border-right: 0; border-bottom: 1px solid rgba(227, 227, 227, .15); padding: 30px 0; gap: 20px; }
	.rd-trust__col:first-child { padding-top: 0; }
	.rd-trust__col:last-child { border-bottom: 0; padding-bottom: 0; }
	.rd-trust__col > *, .rd-trust__col > .rd-btn { width: 100%; max-width: 480px; margin-inline: 0; }
	.rd-trust__col > .rd-btn { width: auto; }
}
@media (min-width: 768px) and (max-width: 1199px) {
	.rd-trust__cols { max-width: 480px; margin-inline: auto; }
}
@media (max-width: 359px) {
	/* "Read the Announcement" ran 17px past the column at 320 */
	.rd-trust__col > .rd-btn { max-width: 100%; padding-inline: 18px; font-size: 16px; }
}

.rd-formcard__headline { font-size: 26px; line-height: 32px; font-weight: 600; color: #fff; text-wrap: balance; }