/**
 * Elementor ↔ theme.css bridge.
 *
 * The brand classes in theme.css (rr-btn, rr-eyebrow, rr-hero__title, etc.)
 * were designed for raw HTML markup. Elementor wraps every widget in nested
 * .elementor-element / .elementor-widget-container divs, and applies its own
 * default look to buttons / headings / lists. This file:
 *
 *   1. Strips Elementor's default backgrounds + padding on .rr-btn-wrapped
 *      buttons so the brand button look from theme.css takes over.
 *   2. Propagates a few rr-* classes from the outer wrapper down to the
 *      element Elementor actually styles.
 *   3. Forwards .rr-section--alt / .rr-page-hero / etc. backgrounds onto
 *      the .elementor-element wrapper.
 *
 * Edit theme.css for visual style; edit this file only to bridge Elementor's
 * wrapper conventions.
 */

/* ── Buttons ────────────────────────────────────────────────────────── */

/* Reset Elementor's default visual on buttons we wrapped in .rr-btn */
.elementor-widget-button.rr-btn .elementor-button,
.rr-btn > .elementor-widget-container > .elementor-button,
.rr-btn .elementor-button-link {
	background: transparent;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	padding: 0;
	border-radius: 0;
	box-shadow: none;
	border: 0;
}

/* Buttons in flex containers default to content-width, not stretched.
   The .rr-service-card__cta variant has its own width: 100% rule below
   so it stays full-width inside the service card footer. */
.elementor-element.elementor-widget-button.rr-btn:not(.rr-service-card__cta) {
	align-self: flex-start;
	width: auto !important;
}
/* Inside the CTA inner container, override the flex-start align-self so
   the button is horizontally centered along with the heading + copy.
   Also force text-align: center on the heading + copy so the
   inner text doesn't sit flush left within its full-width widget. */
.elementor-element.rr-cta__inner
	.elementor-element.elementor-widget-button.rr-btn {
	align-self: center;
}
.elementor-element.rr-cta__inner .elementor-heading-title,
.elementor-element.rr-cta__inner .elementor-widget-text-editor,
.elementor-element.rr-cta__inner .elementor-widget-text-editor p {
	text-align: center !important;
}

/* Re-apply brand button look on the actual <a> */
.elementor-widget.rr-btn > a.elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	padding: 12px 22px;
	border-radius: 10px;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--dur-base, 200ms) var(--ease-out, ease), transform var(--dur-fast, 120ms), box-shadow var(--dur-base, 200ms);
}

.elementor-widget.rr-btn.rr-btn--lg > a.elementor-button {
	font-size: 16px;
	padding: 14px 26px;
}

.elementor-widget.rr-btn--primary > a.elementor-button {
	background: var(--rr-red, #EF4748) !important;
	color: #fff !important;
}
.elementor-widget.rr-btn--primary > a.elementor-button:hover {
	background: var(--rr-red-600, #D93738) !important;
}

.elementor-widget.rr-btn--deep > a.elementor-button {
	background: var(--rr-deep, #20454A) !important;
	color: #fff !important;
}
.elementor-widget.rr-btn--deep > a.elementor-button:hover {
	background: var(--rr-deep-900, #102628) !important;
}

.elementor-widget.rr-btn--white > a.elementor-button {
	background: #fff !important;
	color: var(--rr-ink, #1A1A1A) !important;
}
.elementor-widget.rr-btn--white > a.elementor-button:hover {
	background: var(--rr-bone, #FAFAFA) !important;
}

.elementor-widget.rr-btn--ghost > a.elementor-button {
	background: transparent;
	color: var(--rr-ink, #1A1A1A);
	border: 1.5px solid var(--border-strong, #CECECF);
}
.elementor-widget.rr-btn--ghost > a.elementor-button:hover {
	background: var(--rr-bone, #FAFAFA);
}

/* Arrow link variant.
 * Implemented as a Text Editor widget — its inner <a class="rr-link-arrow__a">
 * gets the brand link style. This intentionally avoids the Button widget so we
 * don't fight Elementor's --e-global-color-accent inheritance. theme.css
 * already adds the "→" via ::after, so the inline-flex arrangement is on the
 * .rr-link-arrow wrapper (the .elementor-widget-text-editor element). */
.elementor-widget-text-editor.rr-link-arrow {
	display: inline-block;
}
.elementor-widget-text-editor.rr-link-arrow > .elementor-widget-container {
	padding: 0 !important;
	display: inline-flex;
	align-items: center;
	gap: 0;
}
.elementor-widget-text-editor.rr-link-arrow .rr-link-arrow__a,
.elementor-widget-text-editor.rr-link-arrow a {
	color: var(--rr-deep, #20454A);
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
}
.elementor-widget-text-editor.rr-link-arrow a:hover {
	color: var(--rr-red, #EF4748);
}
/* Stop theme.css's .rr-link-arrow::after from doubling with the
   wrapper's flex spacing — keep arrow tight to the text. */
.elementor-widget-text-editor.rr-link-arrow::after {
	margin-left: 6px;
}

/* ── Icon-list inside service cards / bullets ─────────────────────────
   Elementor's icon-list defaults to --e-global-color-secondary (steel blue).
   Brand bullets need dark ink text + red check icon. */
.elementor-widget-icon-list.rr-service-card__bullets .elementor-icon-list-text,
.elementor-widget-icon-list .elementor-icon-list-text {
	color: var(--rr-ink, #1A1A1A) !important;
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif !important;
	font-weight: 400;
	font-size: 14px !important;
}
.elementor-widget-icon-list.rr-service-card__bullets .elementor-icon-list-icon svg,
.elementor-widget-icon-list.rr-service-card__bullets .elementor-icon-list-icon i,
.elementor-widget-icon-list .elementor-icon-list-icon svg,
.elementor-widget-icon-list .elementor-icon-list-icon i {
	fill: var(--rr-red, #EF4748) !important;
	color: var(--rr-red, #EF4748) !important;
}
.elementor-widget-icon-list .elementor-icon-list-item {
	align-items: flex-start;
}

/* ── Integration card — white box, rounded, bordered, with logo + meta
   Belt-and-suspenders selectors: target the outer .elementor-element AND
   the inner .elementor-widget-container so Elementor's --border-radius:0
   default cannot win on either layer. */
.elementor-element.rr-integration,
.elementor-element.elementor-element.rr-integration,
body .elementor-element.rr-integration {
	background: #fff !important;
	border: 1px solid var(--border, #E6E1E2) !important;
	border-radius: 14px !important;
	--border-radius: 14px !important;
	padding: 18px 20px !important;
	gap: 14px !important;
	transition: border-color .2s, box-shadow .2s;
	overflow: hidden;
}
.elementor-element.rr-integration:hover {
	border-color: var(--rr-deep, #20454A) !important;
	box-shadow: 0 4px 12px rgba(32,69,74,0.08);
}

/* ── Integration logo abbreviation — letter mark "Sa", "Ca", etc. ──── */
.rr-integration__logo {
	color: var(--rr-deep, #20454A) !important;
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif !important;
	font-weight: 700 !important;
}
.rr-integration__logo--lg {
	color: var(--rr-deep, #20454A) !important;
}
.rr-integration__name {
	color: var(--rr-deep, #20454A) !important;
	font-weight: 600;
}
.rr-integration__tag {
	color: var(--rr-stone-500, #7A7A7A) !important;
	font-weight: 400 !important;
}

/* ── Headings: forward selected brand classes from wrapper to <h*> ──── */
/* theme.css already targets classes like .rr-page-hero__title directly,
   but Elementor puts those on the wrapper div, not on the heading. Use
   compound selectors to bridge. */

.elementor-widget-heading.rr-hero__title h1,
.elementor-widget-heading.rr-hero__title h2,
.elementor-widget-heading.rr-hero__title h3,
.elementor-widget-heading.rr-hero__title h4,
.elementor-widget-heading.rr-hero__title div,
.elementor-widget-heading.rr-page-hero__title h1,
.elementor-widget-heading.rr-page-hero__title h2,
.elementor-widget-heading.rr-page-hero__title div,
.elementor-widget-heading.rr-product-hero__title h1,
.elementor-widget-heading.rr-product-hero__title h2,
.elementor-widget-heading.rr-product-hero__title div,
.elementor-widget-heading.rr-services__title h2,
.elementor-widget-heading.rr-services__title div,
.elementor-widget-heading.rr-integrations__title h2,
.elementor-widget-heading.rr-integrations__title div,
.elementor-widget-heading.rr-cta__title h2,
.elementor-widget-heading.rr-cta__title div,
.elementor-widget-heading.rr-h2 h2,
.elementor-widget-heading.rr-h2 div,
.elementor-widget-heading.rr-h3 h3,
.elementor-widget-heading.rr-h3 div {
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
	color: var(--rr-deep, #20454A);
	letter-spacing: -0.02em;
	line-height: 1.05;
	margin: 0;
}

.elementor-widget-heading.rr-hero__title .elementor-heading-title,
.elementor-widget-heading.rr-page-hero__title .elementor-heading-title {
	font-size: clamp(36px, 4.4vw, 56px);
	font-weight: 700;
}
/* Product hero title — capped slightly lower so "Better than a voicemail."
   and similar 3-4 word titles fit on a single line at common 1366–1440px
   viewports inside the split-layout text column (~640px). */
.elementor-widget-heading.rr-product-hero__title .elementor-heading-title {
	font-size: clamp(36px, 3.8vw, 50px);
	font-weight: 700;
}

.elementor-widget-heading.rr-eyebrow .elementor-heading-title {
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--rr-red, #EF4748);
	font-weight: 600;
	margin: 0;
}

.elementor-widget-heading.rr-services__title .elementor-heading-title,
.elementor-widget-heading.rr-integrations__title .elementor-heading-title,
.elementor-widget-heading.rr-cta__title .elementor-heading-title,
.elementor-widget-heading.rr-h2 .elementor-heading-title {
	font-size: clamp(28px, 3.2vw, 40px);
	font-weight: 700;
}

.elementor-widget-heading.rr-cta__title .elementor-heading-title {
	color: #fff;
}

/* ── Text editor (lead / pitch / blurb classes target inner <p>) ──── */

.elementor-widget-text-editor.rr-hero__lede p,
.elementor-widget-text-editor.rr-hero__lede,
.elementor-widget-text-editor.rr-page-hero__lede p,
.elementor-widget-text-editor.rr-page-hero__lede,
.elementor-widget-text-editor.rr-product-hero__lede p,
.elementor-widget-text-editor.rr-product-hero__lede,
.elementor-widget-text-editor.rr-services__sub p,
.elementor-widget-text-editor.rr-services__sub,
.elementor-widget-text-editor.rr-integrations__copy p,
.elementor-widget-text-editor.rr-integrations__copy,
.elementor-widget-text-editor.rr-cta__copy p,
.elementor-widget-text-editor.rr-cta__copy {
	font-family: "Libre Baskerville", "Iowan Old Style", "Apple Garamond", Baskerville, Georgia, serif;
	font-size: 20px;
	line-height: 1.5;
	color: var(--rr-stone-700, #4A4A4A);
}

.elementor-widget-text-editor.rr-cta__copy p,
.elementor-widget-text-editor.rr-cta__copy {
	color: rgba(255,255,255,0.92);
}

/* Brand body prose */
.elementor-widget-text-editor.rr-prose p,
.elementor-widget-text-editor.rr-prose {
	font-family: "Libre Baskerville", "Iowan Old Style", "Apple Garamond", Baskerville, Georgia, serif;
	font-size: 17px;
	line-height: 1.65;
	color: var(--rr-stone-700, #4A4A4A);
}

/* ── Testimonial section ────────────────────────────────────────────
   Centered eyebrow, large italic serif pullquote in deep teal, then a
   row with the dark-teal avatar circle on the left and (name on top,
   role below) on the right. theme.css handles the blockquote + avatar
   from raw HTML; this block overrides Elementor's heading widget
   defaults for name (bold dark) and role (muted gray, small). */
.elementor-widget-heading.rr-testimonial__name .elementor-heading-title {
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
	font-weight: 600 !important;
	font-size: 14px !important;
	color: var(--rr-deep, #20454A) !important;
	line-height: 1.3;
	margin: 0;
	text-align: left;
}
.elementor-widget-heading.rr-testimonial__role .elementor-heading-title {
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif !important;
	font-weight: 400 !important;
	font-size: 13px !important;
	color: var(--rr-stone-500, #7A7A7A) !important;
	line-height: 1.3;
	margin: 0;
	text-align: left;
}

/* Center the attribution row under the quote and make sure the
   container shrink-wraps so flex-justify-content: center has effect
   against its parent (which is align-items: center). */
.elementor-element.rr-testimonial__attr {
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 14px !important;
	width: auto !important;
}

/* ── Stats band ─────────────────────────────────────────────────────
   Blush section background with 4 white cards, one per stat. Number
   in sans-serif bold (deep teal), label in serif body color. */
.elementor-element.rr-stat {
	background: #fff;
	border: 1px solid var(--border, #E6E1E2);
	border-radius: 16px;
	padding: 32px 28px !important;
	gap: 10px !important;
}
.elementor-widget-heading.rr-stat__n .elementor-heading-title {
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
	font-weight: 700;
	font-size: 48px;
	letter-spacing: -0.025em;
	line-height: 1;
	color: var(--rr-deep, #20454A);
	margin: 0;
}
.elementor-widget-heading.rr-stat__l .elementor-heading-title {
	font-family: "Libre Baskerville", "Iowan Old Style", Georgia, serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.45;
	color: var(--rr-stone-700, #4A4A4A);
	margin: 0;
}

/* ── Sections: forward bg / padding to the .elementor-element wrap ── */
.elementor-element.rr-cta {
	background: var(--rr-red, #EF4748);
}
.elementor-element.rr-stats {
	background: var(--rr-blush, #F2F2F3);
}
.elementor-element.rr-section--alt {
	background: var(--rr-blush, #F2F2F3);
}
.elementor-element.rr-section--deep {
	background: var(--rr-deep, #20454A);
	color: #fff;
}

/* ── Service tier card ─────────────────────────────────────────────
   Three-tier layout: plate (gray top), body (text + bullets), foot
   (proof line + CTA button). Matches the design exactly. */
.elementor-element.rr-service-card {
	background: #fff;
	border: 1px solid var(--border, #E6E1E2);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 2px 6px rgba(32,69,74,0.06);
	transition: box-shadow .3s, transform .3s;
	position: relative;
	padding: 0 !important;
}
.elementor-element.rr-service-card:hover {
	box-shadow: 0 12px 32px rgba(32,69,74,0.10);
}
/* Featured tier — red border + lifted shadow */
.elementor-element.rr-service-card.is-featured {
	border: 2px solid var(--rr-red, #EF4748);
	transform: translateY(-8px);
	box-shadow: 0 16px 40px rgba(239,71,72,0.12), 0 2px 6px rgba(32,69,74,0.06);
}
.elementor-element.rr-service-card.is-featured:hover {
	box-shadow: 0 24px 56px rgba(239,71,72,0.16), 0 2px 6px rgba(32,69,74,0.06);
}

/* "Most popular" badge — top right of the featured card.
   The widget wrapper itself is pulled out of flex flow with position:absolute
   so it doesn't push the plate down. The inner badge div is normal flow
   inside the wrapper. */
.elementor-element.rr-service-card__badge-wrap {
	position: absolute !important;
	top: 0;
	right: 24px;
	width: auto !important;
	z-index: 2;
	padding: 0 !important;
	margin: 0 !important;
}
.rr-service-card__badge {
	background: var(--rr-red, #EF4748);
	color: #fff;
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 0 0 6px 6px;
	white-space: nowrap;
}

/* Plate — gray top area with the SVG illustration.
   Zero padding on EVERY HTML widget that's a direct child of the card so
   neither the plate nor the absolutely-positioned MOST POPULAR badge
   introduce any vertical offset. The plate then sits flush with the top
   of the card, and the card's overflow:hidden + border-radius clip the
   plate's top corners — producing the rounded-top/straight-bottom look. */
.elementor-element.rr-service-card > .elementor-widget-html,
.elementor-element.rr-service-card > .elementor-widget-html > .elementor-widget-container {
	padding: 0 !important;
	margin: 0 !important;
}
.elementor-widget-html .rr-service-card__plate {
	background: var(--rr-blush, #F2F2F3);
	padding: 36px 32px;
	min-height: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0;
	margin: 0;
}

/* Body — padding 32, gap 16, flexes to fill remaining height */
.elementor-element.rr-service-card__body {
	padding: 32px !important;
	gap: 16px !important;
	flex: 1;
	background: #fff;
}

/* Eyebrow inside card */
.elementor-widget-heading.rr-service-card__eyebrow .elementor-heading-title {
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--rr-red, #EF4748);
	margin: 0;
}

/* Card title — deep teal, tighter line-height */
.elementor-widget-heading.rr-service-card__title .elementor-heading-title {
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 1.2;
	color: var(--rr-deep, #20454A);
	margin: 0;
}

/* Pitch — serif body copy */
.elementor-widget-text-editor.rr-service-card__pitch,
.elementor-widget-text-editor.rr-service-card__pitch p {
	font-family: "Libre Baskerville", "Iowan Old Style", Georgia, serif;
	font-size: 15px;
	line-height: 1.6;
	color: var(--rr-stone-700, #4A4A4A);
	margin: 0;
}

/* Bullets — red round badge with white check inside */
.elementor-widget-icon-list.rr-service-card__bullets .elementor-icon-list-items {
	margin: 4px 0 0 !important;
	padding: 0 !important;
	gap: 10px !important;
	display: flex;
	flex-direction: column;
}
.elementor-widget-icon-list.rr-service-card__bullets .elementor-icon-list-item {
	padding: 0 !important;
	margin: 0 !important;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	line-height: 1.45;
}
.elementor-widget-icon-list.rr-service-card__bullets .elementor-icon-list-item:not(:last-child):after {
	display: none !important;  /* kill the default divider */
}
.elementor-widget-icon-list.rr-service-card__bullets .elementor-icon-list-icon {
	width: 18px !important;
	height: 18px !important;
	background: var(--rr-red-50, #FEF1F1) !important;
	border-radius: 50% !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 0 !important;
	margin-top: 2px !important;
}
.elementor-widget-icon-list.rr-service-card__bullets .elementor-icon-list-icon svg,
.elementor-widget-icon-list.rr-service-card__bullets .elementor-icon-list-icon i {
	width: 10px !important;
	height: 10px !important;
	font-size: 10px !important;
	fill: var(--rr-red, #EF4748) !important;
	color: var(--rr-red, #EF4748) !important;
}
.elementor-widget-icon-list.rr-service-card__bullets .elementor-icon-list-text {
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif !important;
	font-size: 14px !important;
	color: var(--rr-ink, #1A1A1A) !important;
	font-weight: 400;
}

/* Footer — separator line + proof + CTA button */
.elementor-element.rr-service-card__foot {
	margin-top: auto !important;
	padding-top: 20px !important;
	gap: 14px !important;
	border-top: 1px solid var(--border, #E6E1E2);
	display: flex;
	flex-direction: column;
}

/* Proof — small muted label above the CTA */
.elementor-widget-text-editor.rr-service-card__proof,
.elementor-widget-text-editor.rr-service-card__proof p {
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--rr-stone-500, #7A7A7A);
	margin: 0;
}

/* CTA button — full width inside the card body */
.elementor-widget-button.rr-service-card__cta {
	width: 100%;
}
.elementor-widget-button.rr-service-card__cta > .elementor-widget-container {
	padding: 0 !important;
}
.elementor-widget-button.rr-service-card__cta .elementor-button {
	width: 100% !important;
	justify-content: center;
	padding: 12px 22px !important;
}

/* ── Supporting / operational card ─────────────────────────────────
   White card with a small icon box at the top, eyebrow + deep-teal title,
   serif blurb, then a steel-blue "Learn more →" link at the bottom. The
   card itself raises 2px on hover and grows a 2px red top accent. */
.elementor-element.rr-supporting-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--border, #E6E1E2);
	border-radius: 14px;
	padding: 32px 32px 28px !important;
	gap: 0 !important;
	min-height: 260px;
	transition: border-color .3s, box-shadow .3s, transform .3s;
	overflow: hidden;
}
.elementor-element.rr-supporting-card::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 32px;
	right: 32px;
	height: 2px;
	background: var(--rr-red, #EF4748);
	opacity: 0;
	transition: opacity .2s;
}
.elementor-element.rr-supporting-card:hover {
	border-color: var(--border-strong, #CECECF);
	box-shadow: 0 1px 2px rgba(32,69,74,0.04), 0 12px 28px -16px rgba(32,69,74,0.18);
	transform: translateY(-2px);
}
.elementor-element.rr-supporting-card:hover::before { opacity: 1; }

/* Icon box at top — small 56x40 blush square with bordered SVG inside */
.elementor-widget-html .rr-supporting-card__icon {
	width: 56px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--rr-blush, #F2F2F3);
	border: 1px solid var(--border, #E6E1E2);
	border-radius: 8px;
	padding: 6px;
	margin: 0 0 24px 0;
}
.elementor-widget-html .rr-supporting-card__icon svg {
	width: 100%;
	height: 100%;
}

/* Eyebrow inside supporting card */
.elementor-widget-heading.rr-supporting-card__eyebrow .elementor-heading-title {
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--rr-red, #EF4748);
	margin: 0 0 10px 0;
}

/* Title */
.elementor-widget-heading.rr-supporting-card__title .elementor-heading-title {
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
	font-weight: 700;
	font-size: 19px;
	letter-spacing: -0.01em;
	color: var(--rr-deep, #20454A);
	line-height: 1.25;
	margin: 0 0 10px 0;
}

/* Blurb (serif, smaller, muted) */
.elementor-widget-text-editor.rr-supporting-card__blurb,
.elementor-widget-text-editor.rr-supporting-card__blurb p {
	font-family: "Libre Baskerville", "Iowan Old Style", Georgia, serif;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--rr-stone-700, #4A4A4A);
	margin: 0 0 24px 0;
}

/* "Learn more →" — steel blue link at the bottom of the card */
.elementor-widget-text-editor.rr-supporting-card__cta {
	margin-top: auto !important;
}
.elementor-widget-text-editor.rr-supporting-card__cta a,
.elementor-widget-text-editor.rr-supporting-card__cta .rr-link-arrow__a {
	color: var(--rr-blue, #43799F) !important;
	font-size: 13px;
	letter-spacing: 0.01em;
}
.elementor-element.rr-supporting-card:hover
	.elementor-widget-text-editor.rr-supporting-card__cta a {
	color: var(--rr-deep, #20454A) !important;
}

/* ── Section divider (between primary services and supporting row) ──
   Label on the left, horizontal hairline rule that fills the rest of
   the row. The rule is rendered inside an Elementor HTML widget, so we
   have to make BOTH the .elementor-widget wrapper AND the inner
   .rr-services__divider-line div stretch to fill remaining flex space. */
.elementor-element.rr-services__divider {
	flex-direction: row !important;
	align-items: center !important;
	gap: 16px !important;
}
.elementor-widget-heading.rr-services__divider-label {
	width: auto !important;
	flex: 0 0 auto;
}
.elementor-widget-heading.rr-services__divider-label .elementor-heading-title {
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--rr-stone-500, #7A7A7A);
	white-space: nowrap;
	margin: 0;
}
/* The HTML widget that holds the line: stretch to fill */
.elementor-element.rr-services__divider > .elementor-widget-html {
	flex: 1 1 auto !important;
	width: auto !important;
}
.elementor-element.rr-services__divider > .elementor-widget-html > .elementor-widget-container {
	height: 1px;
}
.rr-services__divider-line {
	width: 100%;
	height: 1px;
	background: var(--border, #E6E1E2);
}

.elementor-element.rr-bullet {
	background: #fff;
	border: 1px solid var(--border, #E6E1E2);
	border-top: 3px solid var(--rr-red, #EF4748);
	border-radius: var(--radius-md, 10px);
	padding: 20px;
}
.elementor-widget-heading.rr-bullet__title .elementor-heading-title {
	font-size: 17px;
	font-weight: 700;
	color: var(--rr-deep, #20454A);
}
.elementor-widget-text-editor.rr-bullet__copy p {
	font-size: 15px;
	color: var(--rr-stone-700, #4A4A4A);
	line-height: 1.5;
}

/* ── Insights (blog) card ───────────────────────────────────────
   Used on the Insights index. Same red-top accent + white card
   silhouette as .rr-bullet, but tuned for editorial post previews:
   slightly more padding, serif copy, larger title. */
.elementor-element.rr-insight-card {
	background: #fff !important;
	border: 1px solid var(--border, #E6E1E2) !important;
	border-top: 3px solid var(--rr-red, #EF4748) !important;
	border-radius: 12px !important;
	padding: 32px !important;
}
.elementor-widget-heading.rr-insight-card__date .elementor-heading-title {
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: var(--rr-red, #EF4748) !important;
	margin: 0 !important;
}
.elementor-widget-heading.rr-insight-card__title .elementor-heading-title {
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em !important;
	line-height: 1.3 !important;
	color: #0E1416 !important;
	margin: 0 !important;
}
.elementor-widget-text-editor.rr-insight-card__copy,
.elementor-widget-text-editor.rr-insight-card__copy p {
	font-family: "Libre Baskerville", "Iowan Old Style", Georgia, serif !important;
	font-size: 15px !important;
	line-height: 1.55 !important;
	color: #4A4A4A !important;
	margin: 0 !important;
}

/* ── "How it works" numbered steps ─────────────────────────────────
   Rendered as raw HTML (`<ol class="rr-steps">` etc.) inside an HTML
   widget, so theme.css' rules apply directly. Override only what's
   needed to ensure consistent spacing inside the Elementor container. */
.rr-steps {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 36px;
	max-width: 820px;
}
.rr-step {
	display: grid;
	grid-template-columns: 60px 1fr;
	gap: 24px;
	align-items: start;
}
.rr-step__n {
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
	font-weight: 700;
	font-size: 32px;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--rr-red, #EF4748);
}
.rr-step__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.rr-step__t {
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
	font-weight: 600;
	font-size: 20px;
	letter-spacing: -0.01em;
	line-height: 1.3;
	color: var(--rr-deep, #20454A);
}
.rr-step__c {
	font-family: "Libre Baskerville", "Iowan Old Style", Georgia, serif;
	font-size: 16px;
	line-height: 1.55;
	color: var(--rr-stone-700, #4A4A4A);
}

/* ── Div-based FAQ accordion ───────────────────────────────────────
   Replaces the <details>/<summary> markup with a div + button + wrapper
   so JS can animate the wrapper's height (the <details> slot system
   makes height transitions impossible). theme.css' rules for
   .rr-faq__item / .rr-faq__q / .rr-faq__a still apply for typography
   and borders — these rules only adjust what's needed for the new
   button + div-wrap structure. */
/* Zero out theme.css' .rr-faq__item padding so the only vertical space
   inside each row comes from .rr-faq__q below — gives us one place to
   tune row height instead of stacking two paddings. */
.rr-faq__item {
	padding: 0 !important;
}
.rr-faq__q {
	background: none;
	border: 0;
	width: 100%;
	text-align: left;
	font: inherit;
	cursor: pointer;
	color: var(--rr-deep, #20454A);
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
	font-weight: 600;
	font-size: 17px;
	letter-spacing: -0.005em;
	padding: 14px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.rr-faq__q::after {
	content: '+';
	font-size: 22px;
	color: var(--rr-red, #EF4748);
	font-weight: 400;
	line-height: 1;
	transition: transform 200ms ease;
}
.rr-faq__item[data-rr-open="1"] .rr-faq__q::after {
	content: '−';
}
/* Modern grid-template-rows transition: 0fr → 1fr animates the *actual*
   content height (not an arbitrary max-height ceiling), so both opening
   and closing feel symmetric and smooth at any answer length. The inner
   wrapper gets min-height:0 + overflow:hidden so it can shrink to 0
   during the transition. Supported in Chrome 117+, Safari 17.4+, Firefox 121+. */
.rr-faq__a-wrap {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rr-faq__a-wrap > * {
	min-height: 0;
	overflow: hidden;
}
.rr-faq__item.is-open .rr-faq__a-wrap {
	grid-template-rows: 1fr;
}
.rr-faq__item.is-open .rr-faq__q::after {
	content: '−';
}
.rr-faq__a {
	font-family: "Libre Baskerville", "Iowan Old Style", Georgia, serif;
	font-size: 15px;
	line-height: 1.55;
	color: var(--rr-stone-700, #4A4A4A);
	margin: 0 0 14px 0;
	max-width: 65ch;
}

/* ── FAQ accordion ─────────────────────────────────────────────────
   Elementor's accordion ships with boxed borders, background fill, and
   an active state that recolors the title — none of which match the
   design. The design wants hairline rules between items, transparent
   background, dark title text regardless of open/closed state, and a
   red "+" / "−" indicator on the right. */
.elementor-widget-accordion.rr-faq .elementor-accordion {
	border: 0 !important;
	background: transparent !important;
}
.elementor-widget-accordion.rr-faq .elementor-accordion-item {
	border: 0 !important;
	border-top: 1px solid var(--border, #E6E1E2) !important;
	margin: 0 !important;
	background: transparent !important;
}
.elementor-widget-accordion.rr-faq .elementor-accordion-item:last-child {
	border-bottom: 1px solid var(--border, #E6E1E2) !important;
}
.elementor-widget-accordion.rr-faq .elementor-tab-title,
.elementor-widget-accordion.rr-faq .elementor-tab-title.elementor-active {
	background: transparent !important;
	border: 0 !important;
	padding: 20px 0 !important;
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.elementor-widget-accordion.rr-faq .elementor-accordion-title,
.elementor-widget-accordion.rr-faq .elementor-tab-title.elementor-active .elementor-accordion-title {
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif !important;
	font-weight: 600 !important;
	font-size: 17px !important;
	letter-spacing: -0.005em !important;
	color: var(--rr-deep, #20454A) !important;
	text-decoration: none !important;
}
.elementor-widget-accordion.rr-faq .elementor-accordion-icon {
	order: 2;
	margin-left: auto !important;
	width: auto !important;
	padding: 0 !important;
	color: var(--rr-red, #EF4748) !important;
	font-size: 22px !important;
	font-weight: 400;
	line-height: 1;
	float: none !important;
}
.elementor-widget-accordion.rr-faq .elementor-accordion-icon svg,
.elementor-widget-accordion.rr-faq .elementor-accordion-icon i {
	fill: var(--rr-red, #EF4748) !important;
	color: var(--rr-red, #EF4748) !important;
	width: 14px !important;
	height: 14px !important;
}
.elementor-widget-accordion.rr-faq .elementor-tab-content {
	background: transparent !important;
	border: 0 !important;
	padding: 0 0 20px 0 !important;
	font-family: "Libre Baskerville", "Iowan Old Style", Georgia, serif !important;
	font-size: 15px !important;
	line-height: 1.55 !important;
	color: var(--rr-stone-700, #4A4A4A) !important;
	max-width: 65ch;
}
.elementor-widget-accordion.rr-faq .elementor-tab-content p {
	margin: 0;
}

/* ── Logo strip carousel ─────────────────────────────────────────
   The homepage partner-logo strip is rendered as Elementor's free
   "Image Carousel" widget so authors can swap images via the editor.
   These rules forward the brand styling (greyscale, label tone, mask
   gradient edges, centered slides) through the widget's wrappers. */
.elementor-widget-heading.rr-logostrip__label .elementor-heading-title {
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: #7A7A7A !important;
	margin: 0 !important;
}
.elementor-widget.rr-logostrip__carousel {
	width: 100%;
}
.elementor-widget.rr-logostrip__carousel .swiper,
.elementor-widget.rr-logostrip__carousel .elementor-image-carousel-wrapper {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
	        mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.elementor-widget.rr-logostrip__carousel .swiper-slide {
	display: flex !important;
	align-items: center;
	justify-content: center;
	height: auto;
}
.elementor-widget.rr-logostrip__carousel .swiper-slide img,
.elementor-widget.rr-logostrip__carousel figure img {
	max-height: 48px;
	width: auto;
	max-width: 160px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.65;
	transition: filter .3s ease, opacity .3s ease;
}
.elementor-widget.rr-logostrip__carousel .swiper-slide:hover img,
.elementor-widget.rr-logostrip__carousel figure:hover img {
	filter: grayscale(0);
	opacity: 1;
}

/* ── Pillar (about/careers) ──────────────────────────────────────
   White card with light border, small red bold number eyebrow,
   bold dark title, serif body copy. Matches the 5-up "A few things
   to know" grid on the Careers page. */
.elementor-element.rr-pillar {
	background: #fff !important;
	border: 1px solid var(--border, #E6E1E2) !important;
	border-radius: 12px !important;
	padding: 28px 24px !important;
	gap: 8px !important;
}
.elementor-element.rr-pillar > .e-con-inner {
	gap: 8px !important;
}
.elementor-widget-heading.rr-pillar__n .elementor-heading-title {
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: var(--rr-red, #EF4748) !important;
	margin: 0 !important;
}
.elementor-widget-heading.rr-pillar__t .elementor-heading-title {
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em !important;
	line-height: 1.3 !important;
	color: #0E1416 !important;
	margin: 4px 0 6px 0 !important;
}
.elementor-widget-text-editor.rr-pillar__d,
.elementor-widget-text-editor.rr-pillar__d p {
	font-family: "Libre Baskerville", "Iowan Old Style", Georgia, serif !important;
	font-size: 15px !important;
	line-height: 1.55 !important;
	color: #4A4A4A !important;
	margin: 0 !important;
}

/* ── Careers job list ────────────────────────────────────────────
   Stacked rows separated by thin gray rules. Title + meta on the
   left, "Apply →" link in deep teal on the right. */
.elementor-element.rr-jobs {
	border-top: 1px solid var(--border, #E6E1E2) !important;
	gap: 0 !important;
}
.elementor-element.rr-jobs > .e-con-inner {
	gap: 0 !important;
}
.elementor-element.rr-job {
	padding: 22px 16px !important;
	border-bottom: 1px solid var(--border, #E6E1E2) !important;
	gap: 24px !important;
	border-radius: 8px !important;
	transition: background .2s ease, transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease !important;
}
.elementor-element.rr-job > .e-con-inner {
	gap: 24px !important;
	transition: transform .25s cubic-bezier(.22,.61,.36,1) !important;
}
/* Hover: slight rightward indent + subtle white wash highlight */
.elementor-element.rr-job:hover {
	background: rgba(255, 255, 255, 0.7) !important;
	box-shadow: 0 1px 2px rgba(14, 20, 22, 0.04) !important;
}
.elementor-element.rr-job:hover > .e-con-inner {
	transform: translateX(12px);
}
.elementor-widget-heading.rr-job__title .elementor-heading-title {
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em !important;
	line-height: 1.3 !important;
	color: #0E1416 !important;
	margin: 0 !important;
}
.elementor-widget-heading.rr-job__meta .elementor-heading-title {
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: #7A7A7A !important;
	margin: 6px 0 0 !important;
}
.elementor-widget.rr-job__cta a,
.elementor-widget.rr-job__cta .elementor-button {
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var(--rr-red, #EF4748) !important;
	text-decoration: none !important;
	white-space: nowrap;
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
}
.elementor-widget.rr-job__cta a:hover,
.elementor-widget.rr-job__cta .elementor-button:hover {
	color: #D93B3C !important;
}

/* ── Lead card on hero ──────────────────────────────────────────── */
.elementor-element.rr-leadcard {
	background: #fff;
	border: 1px solid var(--border, #E6E1E2);
	border-radius: var(--radius-lg, 16px);
	padding: 24px;
	box-shadow: var(--shadow-md, 0 8px 24px rgba(32,69,74,0.10));
	max-width: 460px;
	margin: 0 auto;
}

/* ── Page hero / Product hero ──────────────────────────────────── */
.elementor-element.rr-page-hero,
.elementor-element.rr-product-hero,
.elementor-element.rr-hero {
	background: #fff;
}

/* Product hero plate — gray rounded area on the right, 4:3 aspect ratio,
   SVG illustration centered. theme.css already styles `.rr-product-hero__plate`,
   but Elementor's container defaults to width: 100% with min-height collapsing,
   so reinforce the aspect ratio + min-height here. */
.elementor-element.rr-product-hero__plate {
	background: var(--rr-blush, #F2F2F3) !important;
	border-radius: 16px !important;
	padding: 48px !important;
	aspect-ratio: 4 / 3;
	min-height: 380px;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.elementor-element.rr-product-hero__plate svg {
	max-width: 260px;
	width: 100%;
	height: auto;
}

/* Eyebrow under headline gets the red 56x3 accent rule when used as
   a page hero / product hero */
.elementor-element.rr-page-hero .elementor-widget-heading.rr-page-hero__title:after,
.elementor-element.rr-product-hero .elementor-widget-heading.rr-product-hero__title:after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	background: var(--rr-red, #EF4748);
	margin-top: 20px;
}

/* Page hero with split layout — big gray image placeholder on the right.
   Authors replace the placeholder with an Image widget at any time. */
.elementor-element.rr-page-hero__image {
	min-height: 420px;
}
.elementor-element.rr-page-hero__image .rr-page-hero__image-inner {
	background: var(--rr-blush, #F2F2F3);
	border-radius: 16px;
	width: 100%;
	height: 100%;
	min-height: 420px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.rr-page-hero__image-label {
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--rr-stone-500, #7A7A7A);
	font-weight: 600;
}

/* ── Contact ──────────────────────────────────────────────────── */

/* Section spacing between contact items */
.elementor-element.rr-contact-info {
	gap: 32px !important;
}
.elementor-element.rr-contact-info > .e-con-inner {
	gap: 32px !important;
}

/* Each contact-item block: red eyebrow label, bold dark value, small gray sub */
.elementor-widget-heading.rr-contact-item__label .elementor-heading-title {
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: var(--rr-red, #EF4748) !important;
	margin: 0 !important;
}
.rr-contact-item__value {
	display: block;
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
	font-weight: 700;
	font-size: 18px;
	letter-spacing: -0.01em;
	color: #0E1416;
	text-decoration: none;
}
.rr-contact-item__value:hover {
	color: var(--rr-red, #EF4748);
}
.rr-contact-item__value--small {
	font-family: "Libre Baskerville", "Iowan Old Style", Georgia, serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.55;
	letter-spacing: 0;
	color: #0E1416;
}
.elementor-widget-heading.rr-contact-item__sub .elementor-heading-title {
	font-family: "Libre Baskerville", "Iowan Old Style", Georgia, serif !important;
	font-style: italic;
	font-weight: 400 !important;
	font-size: 13px !important;
	color: #7A7A7A !important;
	margin: 4px 0 0 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

/* Form card — white panel with border, rounded corners, generous padding */
.elementor-element.rr-contact-form-wrap {
	background: #fff !important;
	border: 1px solid var(--border, #E6E1E2) !important;
	border-radius: 16px !important;
	padding: 40px !important;
	gap: 20px !important;
}
.elementor-element.rr-contact-form-wrap > .e-con-inner {
	gap: 20px !important;
}
.elementor-element.rr-contact-form-wrap
	.elementor-widget-heading.rr-h3 .elementor-heading-title {
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif !important;
	font-weight: 700 !important;
	font-size: 22px !important;
	letter-spacing: -0.015em !important;
	color: #0E1416 !important;
	margin: 0 !important;
}
.elementor-element.rr-contact-form-wrap
	.elementor-widget-text-editor.rr-prose-sm,
.elementor-element.rr-contact-form-wrap
	.elementor-widget-text-editor.rr-prose-sm p {
	font-family: "Libre Baskerville", "Iowan Old Style", Georgia, serif !important;
	font-size: 15px !important;
	line-height: 1.55 !important;
	color: #4A4A4A !important;
	margin: 0 0 8px 0 !important;
}

/* Elementor Pro Form widget — field labels, inputs, submit button */
.rr-contact-form .elementor-field-group > label,
.rr-contact-form .elementor-field-label {
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #0E1416 !important;
	margin-bottom: 6px !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}
.rr-contact-form .elementor-field-textual,
.rr-contact-form input[type="text"],
.rr-contact-form input[type="email"],
.rr-contact-form input[type="tel"],
.rr-contact-form select,
.rr-contact-form textarea {
	background: #fff !important;
	border: 1px solid var(--border, #E6E1E2) !important;
	border-radius: 8px !important;
	padding: 10px 12px !important;
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif !important;
	font-size: 15px !important;
	color: #0E1416 !important;
	min-height: 42px !important;
	transition: border-color .15s, box-shadow .15s;
}
.rr-contact-form .elementor-field-textual:focus,
.rr-contact-form input:focus,
.rr-contact-form select:focus,
.rr-contact-form textarea:focus {
	outline: none !important;
	border-color: var(--rr-deep, #20454A) !important;
	box-shadow: 0 0 0 3px rgba(32, 69, 74, 0.12) !important;
}
.rr-contact-form textarea {
	min-height: 120px !important;
	resize: vertical !important;
}

/* Submit button — full-width red pill */
.rr-contact-form .elementor-button,
.rr-contact-form button[type="submit"] {
	width: 100% !important;
	background: var(--rr-red, #EF4748) !important;
	background-color: var(--rr-red, #EF4748) !important;
	color: #fff !important;
	border: 1px solid var(--rr-red, #EF4748) !important;
	border-radius: 10px !important;
	padding: 14px 22px !important;
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	cursor: pointer;
	transition: background .15s, border-color .15s;
}
.rr-contact-form .elementor-button:hover,
.rr-contact-form button[type="submit"]:hover {
	background: #D93B3C !important;
	background-color: #D93B3C !important;
	border-color: #D93B3C !important;
}

/* ── Plain HTML form fallback (when Elementor Pro is not active) ──
   Renders semantic HTML form with the same look as the Pro version. */
form.rr-contact-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
}
form.rr-contact-form .rr-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
form.rr-contact-form .rr-form__col {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
form.rr-contact-form .rr-form__col--full {
	grid-column: 1 / -1;
}
form.rr-contact-form label {
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #0E1416;
	letter-spacing: 0;
}
form.rr-contact-form input,
form.rr-contact-form select,
form.rr-contact-form textarea {
	background: #fff;
	border: 1px solid var(--border, #E6E1E2);
	border-radius: 8px;
	padding: 10px 12px;
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
	font-size: 15px;
	color: #0E1416;
	min-height: 42px;
	transition: border-color .15s, box-shadow .15s;
	width: 100%;
	box-sizing: border-box;
}
form.rr-contact-form input:focus,
form.rr-contact-form select:focus,
form.rr-contact-form textarea:focus {
	outline: none;
	border-color: var(--rr-deep, #20454A);
	box-shadow: 0 0 0 3px rgba(32, 69, 74, 0.12);
}
form.rr-contact-form textarea {
	min-height: 120px;
	resize: vertical;
}
form.rr-contact-form .rr-form__submit {
	width: 100%;
	background: var(--rr-red, #EF4748);
	color: #fff;
	border: 1px solid var(--rr-red, #EF4748);
	border-radius: 10px;
	padding: 14px 22px;
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
	font-weight: 600;
	font-size: 16px;
	cursor: pointer;
	transition: background .15s, border-color .15s;
	margin-top: 8px;
}
form.rr-contact-form .rr-form__submit:hover {
	background: #D93B3C;
	border-color: #D93B3C;
}
form.rr-contact-form .rr-form__status {
	display: none;
	padding: 12px 16px;
	background: #F0FDF4;
	border: 1px solid #BBF7D0;
	border-radius: 8px;
	color: #14532D;
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
	font-size: 14px;
}
form.rr-contact-form.is-success .rr-form__status {
	display: block;
}
@media (max-width: 640px) {
	form.rr-contact-form .rr-form__row { grid-template-columns: 1fr; }
}

/* ── Footer ───────────────────────────────────────────────────── */
.elementor-element.rr-site-footer {
	color: rgba(255,255,255,0.78);
}
.elementor-widget-heading.rr-site-footer__col-title .elementor-heading-title {
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.92);
	font-weight: 600;
}
.elementor-element.rr-site-footer__brand a,
.elementor-element.rr-site-footer ul a {
	color: rgba(255,255,255,0.78);
	text-decoration: none;
}
.elementor-element.rr-site-footer__brand a:hover,
.elementor-element.rr-site-footer ul a:hover {
	color: #fff;
}

/* ── Restraint mode (pricing page) ────────────────────────────────
   Monochrome ink ramp, generous vertical rhythm, no red accents.
   Used only on the Pricing page (and any future enterprise/investor
   pages). theme.css defines the .rr-r-* classes; this bridge block
   forwards them through Elementor's widget wrappers so the inner
   .elementor-heading-title and text-editor <p> get the right styles. */
.elementor-element.rr-restraint {
	background: #fff;
	color: var(--rr-ink-700, #2A3134);
}

/* Eyebrow — small muted gray uppercase label */
.elementor-widget-heading.rr-r-eyebrow .elementor-heading-title {
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif !important;
	font-weight: 500 !important;
	font-size: 11px !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase !important;
	color: #5C6268 !important;
	margin: 0 !important;
}

/* H1 — big, black, near-display weight. Width set wide enough that
   the design's natural 2-line break ("…cost." / "No per-minute meter.")
   doesn't get pushed into a 3-line wrap on common viewports. */
.elementor-widget-heading.rr-r-h1 .elementor-heading-title {
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif !important;
	font-weight: 600 !important;
	font-size: clamp(40px, 5vw, 64px) !important;
	line-height: 1.05 !important;
	letter-spacing: -0.025em !important;
	color: #0E1416 !important;
	margin: 0 !important;
	max-width: 24ch;
	text-wrap: balance;
}

/* H2 (used in subsections — "Add-on services priced separately." etc) */
.elementor-widget-heading.rr-r-h2 .elementor-heading-title {
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif !important;
	font-weight: 600 !important;
	font-size: clamp(28px, 3vw, 40px) !important;
	line-height: 1.1 !important;
	letter-spacing: -0.02em !important;
	color: #0E1416 !important;
	margin: 0 !important;
}

/* Lede — serif body copy under H1 */
.elementor-widget-text-editor.rr-r-lede,
.elementor-widget-text-editor.rr-r-lede p {
	font-family: "Libre Baskerville", "Iowan Old Style", Georgia, serif !important;
	font-size: 19px !important;
	line-height: 1.6 !important;
	color: #4A4A4A !important;
	max-width: 60ch;
	margin: 0 !important;
}

/* Section spacing — editorial whitespace, but tighter than theme.css'
   144px default which feels excessive at common viewport heights.
   Tuned to match the home page's section rhythm (~56-64px). */
.elementor-element.rr-section-r {
	padding-top: 56px !important;
	padding-bottom: 56px !important;
}
.elementor-element.rr-section-r--hero {
	padding-top: 88px !important;
	padding-bottom: 32px !important;
}
.elementor-element.rr-section-r--cta {
	padding-top: 64px !important;
	padding-bottom: 88px !important;
}
/* CTA section: stack all children centered (heading, lede, button) */
.elementor-element.rr-section-r--cta .rr-r-inner,
.elementor-element.rr-section-r--cta .rr-r-inner > .e-con-inner {
	align-items: center !important;
	text-align: center !important;
}
.elementor-element.rr-section-r--cta .elementor-widget-text-editor.rr-r-lede,
.elementor-element.rr-section-r--cta .elementor-widget-text-editor.rr-r-lede p {
	max-width: 56ch;
	text-align: center !important;
}
.elementor-element.rr-section-r--cta .elementor-widget.rr-btn-r {
	align-self: center !important;
}
.elementor-element.rr-section-r--proof {
	padding-top: 64px !important;
	padding-bottom: 64px !important;
}

/* Inner column gap — eyebrow → title → lede gets cleaner rhythm */
.elementor-element.rr-r-inner {
	max-width: 1200px;
	width: 100%;
}

/* ── Restraint pricing tier cards ───────────────────────────────────
   Three-column tier comparison. Non-featured: white card / black text.
   Featured (middle): deep-teal card / white text. The .rr-r-tier base
   class on the Elementor container already triggers theme.css rules
   for the wrapper (background, border, padding, radius); these rules
   forward the typography through to Elementor's inner heading/text
   elements and re-shape the Book-a-demo button into a pill. */

/* Tier card container — explicit card visual + positioning context.
   `overflow: visible` so the "MOST CHOSEN" badge can hang off the top
   without being clipped. `position: relative` so the absolutely-positioned
   badge anchors to this card (theme.css already says so, but Elementor's
   per-element CSS can override). */
.elementor-element.rr-r-tier {
	background: #fff !important;
	border: 1px solid var(--border, #E6E1E2) !important;
	border-radius: 16px !important;
	--border-radius: 16px !important;
	padding: 56px 48px 48px 48px !important;
	gap: 28px !important;
	position: relative !important;
	overflow: visible !important;
}
.elementor-element.rr-r-tier > .e-con-inner {
	gap: 28px !important;
}
/* Tighten the gap between tier name and price block */
.elementor-element.rr-r-tier .elementor-widget-heading.rr-r-tier__name {
	margin-bottom: -12px !important;
}
.elementor-element.rr-r-tier--featured {
	background: var(--rr-deep, #20454A) !important;
	border-color: var(--rr-deep, #20454A) !important;
}

/* "What's included at every tier" inclusions grid — 6 items in a
   3-column grid. Each item is a stacked container: bold black title +
   serif body line. Forward styling through Elementor's heading/text
   wrappers so the rendered titles aren't deep teal inherited from kit. */
.elementor-widget-heading.rr-r-included__t .elementor-heading-title {
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	letter-spacing: -0.005em !important;
	color: #0E1416 !important;
	margin: 0 0 6px 0 !important;
	line-height: 1.3;
}
.elementor-widget-text-editor.rr-r-included__c,
.elementor-widget-text-editor.rr-r-included__c p {
	font-family: "Libre Baskerville", "Iowan Old Style", Georgia, serif !important;
	font-size: 14px !important;
	line-height: 1.55 !important;
	color: #4A4A4A !important;
	margin: 0 !important;
}
/* Even gaps inside each inclusion card */
.elementor-element.rr-r-included > .e-con-inner > *,
.elementor-element.rr-r-included > * {
	gap: 6px !important;
}

/* "MOST CHOSEN" badge — small red pill that overhangs the top of the
   featured card by half its height. Centered vertically on the card's
   top edge via translateY(-50%). */
.elementor-element.rr-r-tier__flag-wrap {
	position: absolute !important;
	top: 0 !important;
	left: 32px !important;
	transform: translateY(-50%) !important;
	z-index: 2;
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}
.elementor-element.rr-r-tier__flag-wrap > .elementor-widget-container {
	padding: 0 !important;
	margin: 0 !important;
	line-height: 0 !important;
}
.rr-r-tier__flag {
	display: inline-block;
	background: var(--rr-red, #EF4748);
	color: #fff;
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
	font-weight: 600;
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 4px;
	white-space: nowrap;
	line-height: 1;
}

/* Tier name (e.g. "Voice AI") — bold black on regular cards */
.elementor-widget-heading.rr-r-tier__name .elementor-heading-title {
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif !important;
	font-weight: 700 !important;
	font-size: 22px !important;
	letter-spacing: -0.015em !important;
	line-height: 1.2 !important;
	color: #0E1416 !important;
	margin: 0 !important;
}
.elementor-element.rr-r-tier--featured
	.elementor-widget-heading.rr-r-tier__name .elementor-heading-title {
	color: #fff !important;
}

/* Price block — large, bold, with FROM eyebrow and /mo suffix inline */
.rr-r-tier__price {
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif !important;
	font-weight: 700 !important;
	font-size: 60px !important;
	line-height: 1 !important;
	letter-spacing: -0.03em !important;
	color: #0E1416 !important;
	display: flex !important;
	align-items: baseline !important;
	gap: 10px !important;
	flex-wrap: wrap !important;
	margin: 0 !important;
}
.rr-r-tier__from {
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: #8A8A8A !important;
}
.rr-r-tier__per {
	font-size: 14px !important;
	font-weight: 400 !important;
	color: #8A8A8A !important;
}
.elementor-element.rr-r-tier--featured .rr-r-tier__price { color: #fff !important; }
.elementor-element.rr-r-tier--featured .rr-r-tier__from,
.elementor-element.rr-r-tier--featured .rr-r-tier__per {
	color: rgba(255,255,255,0.6) !important;
}

/* Lede paragraph under the price — serif, dark gray */
.elementor-widget-text-editor.rr-r-tier__lede,
.elementor-widget-text-editor.rr-r-tier__lede p {
	font-family: "Libre Baskerville", "Iowan Old Style", Georgia, serif !important;
	font-size: 16px !important;
	line-height: 1.55 !important;
	color: #4A4A4A !important;
	margin: 0 !important;
}
.elementor-element.rr-r-tier--featured
	.elementor-widget-text-editor.rr-r-tier__lede,
.elementor-element.rr-r-tier--featured
	.elementor-widget-text-editor.rr-r-tier__lede p {
	color: rgba(255,255,255,0.78) !important;
}

/* Feature list — serif rows with horizontal divider rule between each */
.rr-r-tier__list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column !important;
}
.rr-r-tier__list li {
	font-family: "Libre Baskerville", "Iowan Old Style", Georgia, serif !important;
	font-size: 15px !important;
	line-height: 1.5 !important;
	color: #0E1416 !important;
	padding: 18px 0 !important;
	border-top: 1px solid #E6E1E2 !important;
}
.rr-r-tier__list li:first-child { border-top: 0 !important; }
.elementor-element.rr-r-tier--featured .rr-r-tier__list li {
	color: #fff !important;
	border-color: rgba(255,255,255,0.16) !important;
}

/* Book-a-demo CTA — pill button, dark teal on regular cards */
.elementor-widget.rr-btn-r {
	margin-top: auto;
	align-self: flex-start;
	width: auto !important;
}
.elementor-widget.rr-btn-r > a.elementor-button {
	background: var(--rr-deep, #20454A) !important;
	background-color: var(--rr-deep, #20454A) !important;
	color: #fff !important;
	border: 1px solid var(--rr-deep, #20454A) !important;
	border-radius: 999px !important;
	padding: 14px 28px !important;
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif !important;
	font-weight: 500 !important;
	font-size: 15px !important;
	letter-spacing: 0.005em !important;
}
.elementor-widget.rr-btn-r > a.elementor-button:hover {
	background: var(--rr-deep-900, #102628) !important;
	background-color: var(--rr-deep-900, #102628) !important;
	border-color: var(--rr-deep-900, #102628) !important;
}

/* On the featured (dark teal) tier, the button inverts: white pill / deep teal text */
.elementor-element.rr-r-tier--featured
	.elementor-widget.rr-btn-r > a.elementor-button {
	background: #fff !important;
	background-color: #fff !important;
	color: var(--rr-deep, #20454A) !important;
	border-color: #fff !important;
}
.elementor-element.rr-r-tier--featured
	.elementor-widget.rr-btn-r > a.elementor-button:hover {
	background: rgba(255,255,255,0.92) !important;
	border-color: rgba(255,255,255,0.92) !important;
}

/* Raw <a class="rr-btn-r"> — solid dark teal pill used on the
   operational services pricing table for "Get a quote →" links.
   theme.css already defines the .rr-btn-r class, but Elementor's
   per-page CSS can override link colors via the kit, so reinforce here. */
a.rr-btn-r,
.rr-r-table a.rr-btn-r {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	background: var(--rr-deep, #20454A) !important;
	background-color: var(--rr-deep, #20454A) !important;
	color: #fff !important;
	border: 1px solid var(--rr-deep, #20454A) !important;
	border-radius: 999px !important;
	padding: 10px 18px !important;
	font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif !important;
	font-weight: 500 !important;
	font-size: 14px !important;
	letter-spacing: 0.005em !important;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background .2s, border-color .2s;
}
a.rr-btn-r:hover {
	background: var(--rr-deep-900, #102628) !important;
	background-color: var(--rr-deep-900, #102628) !important;
	border-color: var(--rr-deep-900, #102628) !important;
	color: #fff !important;
}