American Residential Services (ARS)
Project Type: Customizable Landing Page System
Core Disciplines:
- Configurable Javascript
- Configurable CSS
- Hard-coded Vector Graphics
- HTML
- Instapage Landing Page Platform
Note: This project was completed while Barrelmaker founder Christopher Cooper worked for another team, however the development work described below was completed solely by Christopher and represents the kind of innovative problem-solving under severe restrictions that Barrelmaker prides ourselves on.
The TLDR
With the client bound to a deeply inflexible landing page platform without broadscale templating or content management features, I developed a custom, configurable Javascript Class + CSS system to reduce page production time from 30-75 minutes each to less than two minutes*.
Over 300 unique, fully customized pages were created in the course of the first 9 months of the engagement. Within the first three months, the client saw a double-digit conversion rate growth and massive reduction in production labor, driving a major expansion of project scope before CRO-A/B Testing efforts even began.
Introduction
In early 2025, American Residential Services (ARS), a residential HVAC and plumbing service provider with 50+ branches nationwide, reached out to improve conversions on location-specific landing pages targeted by paid search and hosted on the Instapage platform. ARS already had at between one and three pages per branch in production, all of which had to be replaced.
The Plan
The plan was to drive conversions by increasing qualified bookable demand through seasonally appropriate, topic-based landing pages in conjunction with paid search. Each branch offers a different array of services, resulting in each branch requiring a minimum of 3 pages, but possibly having upwards of 9. A high frequency of content updates was expected.
The Challenge
Although Instapage's slogan is "Landing Pages Without Limits", the challenge of executing this project was defined almost entirely by the platform's considerable limitations.
Instapage is a drag-and-drop, mostly no-code landing page platform, though understanding webpage code is essential to understanding how to use it effectively. It is not a CMS and it was not built to efficiently produce dozens or hundreds of template-based pages. All custom CSS and Javascript had to be applied separately on every page, rather than globally. Layout tools are limited, and one of the primary container blocks is unable to adjust its height to accommodate differing lengths of text.
Project managers discouraged the use of custom code, believing that adhering to the platform's page builder would speed development. This resulted in the first round of 50+ pages requiring 30-75 minutes each to build, with QA requiring additional time. It was simply not feasible at scale.
The Solution
As the sole developer on the project, Chris was able to explore and implement solutions without worry of disrupting others. Custom code was introduced on a large scale within boundaries that harnessed Instapage’s strengths while avoiding its weaknesses.
- Layout limitations were addressed by placing all content into custom HTML blocks that could be controlled with CSS and stretch content containers.
- Implemented configurable CSS system with sensible ARS branded defaults that could apply branch-specific color palettes and design tweaks only if necessary.
- Rebuilt dozens of icons as hard-coded vectors that could be recolored with configurable CSS, rather than swapping out each icon manually.
- Created a configurable JavaScript class to auto-populate branch data (form inputs, phone numbers, testimonials, coupons, legal text, etc) before additional third-party scripts.
- All JavaScript Class methods were self-testing and reported errors during development.
- Built JavaScript Class methods to add stable class hooks to modules where Instapage only generates randomized module classes.
- All code on each landing page was identical except for CSS and Javascript configurations.
The Results
Reduced per-page average build times from approximately 1 hour to under 2 minutes*, resulting in days or weeks of saved labor. *A handful of pages had much heavier customization, but build time was still under five minutes.
Enabled rapid A/B test variant generation, making net-new builds faster than updating old ones.
Supported a double-digit conversion lift across ARS’s business in just three months—directly enabling the expanded engagement.
While Chris cannot take credit for the designs or other aspects of the project that drove the conversion gains, his unique technical understanding of the design process, design asset production, landing page platforms, web page architecture, and front-end development techniques are what made the speed and scale of this solution feasible.
See The Code
// Landing Page Class Definition
class LandingPage {
constructor(config) {
this.config = config;
this.reviews = config.reviews || {};
this.coupons = config.coupons || {};
document.addEventListener("DOMContentLoaded", () => {
this.init();
});
}
init() {
const results = {
handleServiceBodyClasses: this.handleServiceBodyClasses(),
handleModuleClasses: this.handleModuleClasses(),
setFormValues: this.setFormValues(),
handleFormContainer: this.handleFormContainer(),
replacePhoneCTAs: this.replacePhoneCTAs(),
replacePlaceholders: this.replacePlaceholders(),
handleFinanceModule: this.handleFinanceModule(),
handleFDICLogo: this.handleFDICLogo(),
injectReviews: this.injectReviews(),
injectCoupons: this.injectCoupons(),
setupTooltips: this.setupTooltips(),
setupMenuToggle: this.setupMenuToggle(),
equalizeCouponHeights: this.equalizeCouponHeights(),
updateExpirationDates: this.updateExpirationDates(),
};
const failed = Object.entries(results).filter(([, success]) => !success);
if (failed.length === 0) {
console.log("All LandingPage functions completed successfully.");
} else {
console.warn(
"Some functions did not complete successfully:",
failed.map(([fn]) => fn)
);
}
}
// Look at config.service
// Apply a body class prefixed 'svcs' and separate services by hyphen
// Available services control visibility of service content on '/request-service' landing page
handleServiceBodyClasses() {
try {
const enabled = Object.entries(this.config.services)
.filter(([, isEnabled]) => isEnabled)
.map(([svc]) => svc);
if (enabled.length) {
document.body.classList.add(`svcs-${enabled.join("-")}`);
return true;
}
return false;
} catch (e) {
console.error("handleServiceBodyClasses failed", e);
return false;
}
}
// Loop through Instapage band modules
// Find all custom components that contain data attributes 'data-module-type' and 'data-module-variant'
// Apply values of 'data-module-type' and 'data-module-variant' to parent module as a class
handleModuleClasses() {
try {
let success = false;
document.querySelectorAll("[data-module-type]").forEach((moduleType) => {
const type = moduleType.getAttribute("data-module-type");
const parent = moduleType.closest('[id^="page-block"]');
const elem = moduleType.closest('[id^="element"]');
if (parent) {
parent.classList.add(`module--${type}`);
// Check the next sibling for a variant
const next = moduleType.nextElementSibling;
if (next && next.hasAttribute("data-module-variant")) {
const variant = next.getAttribute("data-module-variant");
parent.classList.add(`${type}--${variant}`);
}
}
if (elem) elem.remove();
success = true;
});
return success;
} catch (e) {
console.error("handleModuleClasses failed", e);
return false;
}
}
// Replace default hidden form field values with corresponding config values
setFormValues() {
try {
const branchInputs = document.querySelectorAll('form input[name="Branch ID"]');
const svcInputs = document.querySelectorAll('form input[name="Service Line"]');
if (!branchInputs.length && !svcInputs.length) return false;
branchInputs.forEach((input) => input.setAttribute("value", this.config.branchId));
svcInputs.forEach((input) => input.setAttribute("value", this.config.svcLine));
return true;
} catch (e) {
console.error("setFormValues failed", e);
return false;
}
}
// Find the module that contains the lead form and apply 'form-container' class for styling hook
handleFormContainer() {
try {
const formModule = document.querySelector(".module--lead-form");
if (!formModule) return false;
const formElement = formModule.querySelector(".multistep-form");
if (!formElement) return false;
let parent = formElement.parentElement;
while (parent && (!parent.id || !parent.id.startsWith("element-"))) {
parent = parent.parentElement;
}
if (!parent) return false;
parent.classList.add("form-container");
return parent.classList.contains("form-container");
} catch (e) {
console.error("handleFormContainer failed", e);
return false;
}
}
// Loop through all cta buttons with phone numbers and replace value with config.phone
replacePhoneCTAs() {
try {
const phone = this.config.phone;
const spans = document.querySelectorAll('span[data-cta="phone"]');
if (!spans.length) return false;
spans.forEach((span) => {
span.textContent = phone;
const link = span.closest("a");
if (link) {
link.setAttribute("href", `tel:${phone}`);
}
});
return true;
} catch (e) {
console.error("replacePhoneCTAs failed", e);
return false;
}
}
// Replace bracketed placeholder text with identified config values
replacePlaceholders() {
try {
const replacements = {
Brand: this.config.brand,
Location: this.config.locRegion,
SVC: this.config.services.svcString,
Lead: this.config.services.leadString,
};
const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
const nodes = [];
let node;
while ((node = walker.nextNode())) {
if (/\[.*\]/.test(node.nodeValue)) nodes.push(node);
}
for (const node of nodes) {
let newText = node.nodeValue;
for (const [key, val] of Object.entries(replacements)) {
newText = newText.replaceAll(`[${key}]`, val);
}
const span = document.createElement("span");
span.innerHTML = newText;
node.parentNode.replaceChild(span, node);
}
return true;
} catch (e) {
console.error("replacePlaceholders failed", e);
return false;
}
}
// Find Finance Module and apply visibility according to config.hasFinance
handleFinanceModule() {
try {
const block = document.querySelector(".module--financing");
const nav = document.querySelectorAll(".nav-menu__item--financing");
if (!this.config.hasFinance) {
let success = false;
if (block) {
block.style.display = "none";
if (block.style.display === "none") {
success = true;
}
}
if (nav && nav.length > 0) {
nav.forEach((el) => {
el.style.display = "none";
});
if ([...nav].every((el) => el.style.display === "none")) {
success = true;
}
}
return success;
} else {
if (this.config.hasFinance) {
let success = false;
if (block && nav && nav.length > 0) {
success = true;
}
return success;
}
}
} catch (e) {
console.error("handleFinanceModule failed", e);
return false;
}
}
// Find FDIC Logo and apply visibility according to config.hasFDICLogo
handleFDICLogo() {
try {
const footerModule = document.querySelector(".module--footer");
if (!footerModule) return false;
const logoImage = footerModule.querySelector('img[data-src*="fdic.png"]');
if (!logoImage) return false;
let parent = logoImage.parentElement;
while (parent && (!parent.id || !parent.id.startsWith("element-"))) {
parent = parent.parentElement;
}
if (!parent) return false;
if (this.config.hasFDICLogo) {
parent.classList.add("fdic-logo");
return true;
} else {
parent.remove();
return true;
}
} catch (e) {
console.error("handleFDICLogo failed", e);
return false;
}
}
// Inject reviews from config.reviews
injectReviews() {
try {
const loc = this.config.locState ? `${this.config.locRegion}, ${this.config.locState}` : this.config.locRegion;
let found = false;
document.querySelectorAll(".review__body").forEach((review) => {
const key = review.getAttribute("data-review-num");
if (this.reviews[key]) {
review.querySelector(".review-txt").textContent = this.reviews[key].text;
found = true;
}
});
document.querySelectorAll(".review__location").forEach((location) => {
const key = location.previousElementSibling.getAttribute("data-review-num");
if (this.reviews[key]) {
location.querySelector(".review-loc").textContent = loc;
found = true;
}
});
return found;
} catch (e) {
console.error("injectReviews failed", e);
return false;
}
}
// Inject coupons according to config.coupons
injectCoupons() {
try {
const container = document.querySelector(".coupons");
const template = document.querySelector("#coupon-template");
const disclaimer = document.querySelector("#disclaimer");
if (!container || !template || !disclaimer || !Object.keys(this.coupons).length) return false;
Object.keys(this.coupons)
.sort()
.forEach((key, idx) => {
const n = idx + 1;
const data = this.coupons[key];
const clone = template.content.cloneNode(true);
const div = clone.querySelector(".coupon");
div.classList.remove("coupon-1");
div.classList.add(`coupon-${n}`);
clone.querySelector(".coupon__price").innerHTML = data.head;
const titleEl = clone.querySelector(".coupon__title");
titleEl.innerHTML = data.subhead;
const span = document.createElement("span");
span.className = `lgl${n}`;
span.textContent = "*".repeat(n);
titleEl.appendChild(span);
clone.querySelector(".coupon__desc").innerHTML = data.cta;
clone.querySelector(".coupon__legal").innerHTML = data.legal;
const dateMatch = data.legal.match(/Offer expires (\d{2}\/\d{2}\/\d{4})/);
const expDate = dateMatch ? dateMatch[1] : "xx/xx/xxxx";
const legalDiv = document.createElement("div");
legalDiv.className = "legal";
legalDiv.innerHTML = `
<p>
<span class="lgl${n}">${"*".repeat(n)}</span>
<span class="lgl-txt${n}"></span>
Offer expires <span class="expire-date-string">${expDate}</span>
</p>
`;
disclaimer.appendChild(legalDiv);
container.appendChild(clone);
});
document.querySelectorAll(".coupon").forEach((coupon) => {
const number = coupon.classList[1].split("-")[1];
const txtEl = document.querySelector(`.lgl-txt${number}`);
const legal = coupon.querySelector(".coupon__legal");
if (txtEl && legal) {
txtEl.textContent = legal.textContent.trim();
legal.remove();
}
});
// Update exit intent popup with values from coupon 1
const popup = document.querySelector(".popup-content__promo-head p");
const popupSub = document.querySelector(".popup-content__promo-subhead .subhead-text");
if (this.coupons.c1 && popup && popupSub) {
popup.innerHTML = this.coupons.c1.head;
popupSub.innerHTML = this.coupons.c1.subhead;
}
return true;
} catch (e) {
console.error("injectCoupons failed", e);
return false;
}
}
// Handle the visibility triggers of tooltips
setupTooltips() {
try {
const tooltipPairs = document.querySelectorAll("[data-tooltip-group]");
if (!tooltipPairs.length) return false;
tooltipPairs.forEach((group) => {
const btn = group.querySelector(".tooltip-toggle");
const body = group.querySelector(".rtb__tooltip, .svc-trust__tooltip");
const close = group.querySelector(".icon-tooltip-close");
if (!btn || !body || !close) return;
btn.addEventListener("click", (e) => {
e.stopPropagation();
body.classList.add("active");
});
close.addEventListener("click", () => {
body.classList.remove("active");
});
body.dataset.tooltip = "true";
});
document.addEventListener("click", (e) => {
document.querySelectorAll("[data-tooltip='true'].active").forEach((tooltip) => {
const btn = tooltip.closest("[data-tooltip-group]")?.querySelector(".tooltip-toggle");
if (!tooltip.contains(e.target) && e.target !== btn) {
tooltip.classList.remove("active");
}
});
});
return true;
} catch (e) {
console.error("setupTooltips failed", e);
return false;
}
}
// Handle the visibility triggers of menu on mobile
setupMenuToggle() {
try {
const menu = document.querySelector("#element-215 .jump-nav-mob");
const triggers = document.querySelectorAll(".trigger-link");
if (!menu || !triggers.length) return false;
let ignoreNext = false;
window.addEventListener("scroll", () => {
if (ignoreNext) {
ignoreNext = false;
return;
}
if (menu.dataset.state === "open") {
triggers.forEach((t) => t.setAttribute("data-state", "inactive"));
menu.dataset.state = "closed";
document.body.classList.remove("menu-open");
document.querySelector(".module--header")?.classList.remove("menu-open");
}
});
triggers.forEach((trigger) => {
trigger.addEventListener("click", (e) => {
e.preventDefault();
ignoreNext = true;
const isOpen = menu.dataset.state === "open";
menu.dataset.state = isOpen ? "closed" : "open";
document.body.classList.toggle("menu-open", !isOpen);
document.querySelector(".module--header")?.classList.toggle("menu-open", !isOpen);
trigger.setAttribute("data-state", isOpen ? "inactive" : "active");
});
});
return true;
} catch (e) {
console.error("setupMenuToggle failed", e);
return false;
}
}
// Force coupon elements to be the same height
equalizeCouponHeights() {
try {
const setHeights = () => {
if (window.innerWidth <= 768) return;
const coupons = document.querySelectorAll(".coupon");
let maxTitle = 0;
let maxDesc = 0;
coupons.forEach((c) => {
const title = c.querySelector(".coupon__title");
const desc = c.querySelector(".coupon__desc");
if (title) {
title.style.height = "auto";
maxTitle = Math.max(maxTitle, title.offsetHeight);
}
if (desc) {
desc.style.height = "auto";
maxDesc = Math.max(maxDesc, desc.offsetHeight);
}
});
coupons.forEach((c) => {
c.querySelector(".coupon__title").style.height = `${maxTitle}px`;
c.querySelector(".coupon__desc").style.height = `${maxDesc}px`;
});
};
setHeights();
window.addEventListener("resize", setHeights);
return true;
} catch (e) {
console.error("equalizeCouponHeights failed", e);
return false;
}
}
// Automatically set expiration dates to the end of the month
updateExpirationDates() {
try {
const now = new Date();
const lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0);
const dateStr = `${String(lastDay.getMonth() + 1).padStart(2, "0")}/${String(lastDay.getDate()).padStart(2, "0")}/${lastDay.getFullYear()}`;
document.querySelectorAll(".expire-date-string").forEach((el) => {
el.textContent = dateStr;
});
return true;
} catch (e) {
console.error("updateExpirationDates failed", e);
return false;
}
}
}
// Landing Page Configuration
const thisPage = new LandingPage({
templateVersion: "4.5.0",
branchId: "0000",
brand: "ARS<sup>®</sup> / Rescue Rooter<sup>®</sup>",
phone: "555-555-5555",
locRegion: "Placeholder Location",
locState: "XX",
pageType: "Heating",
svcLine: "HVAC",
services: {
svcString: "Heating",
leadString: "heating",
hvac: false,
plumbing: false,
drains: false,
waterheater: false,
electrical: false,
},
hasFinance: true,
hasFDICLogo: true,
reviews: {
r1: { text: "Review 1 Copy" },
r2: { text: "Review 2 Copy" },
},
coupons: {
c1: {
head: "C1 Head",
subhead: "C1 Subhead",
cta: "C1 CTA",
legal: "C1 Legal text.",
},
c2: {
head: "C2 Head",
subhead: "C2 Subhead",
cta: "C2 CTA",
legal: "C2 Legal text.",
},
c3: {
head: "C3 Head",
subhead: "C3 Subhead",
cta: "C3 CTA",
legal: "C3 Legal text.",
},
},
});
/* Begin Color Palette Variables */
:root {
/* Brand Color Palette */
--ars-black: #231f20;
--ars-mid-gray: #808080;
--ars-lite-gray: #F0F8FF;
--ars-navy: #0C2744;
--ars-blue: #0279B4;
--brand-cta: #D62628;
--brand-cta-hover: #AB1E20;
--brand-primary: var(--ars-navy);
--brand-secondary: var(--ars-blue);
--brand-tertiary: var(--ars-lite-gray);
/* Configuration */
/* Buttons */
--btn-primary: var(--brand-cta);
--btn-primary-hov: var(--brand-cta-hover);
--btn-secondary: white;
--btn-secondary-hov: var(--brand-primary);
--btn-txt-color: white;
--btn-txt-color-hov: white;
/* Request Service Button Border */
--clr-border-req-svc-cta: var(--brand-cta);
/* Page Section Backgrounds */
--bgcolor-hero: var(--brand-primary);
--bgcolor-form: var(--brand-secondary);
--bgcolor-limited-time-offers: var(--brand-secondary);
--bgcolor-service-offering: white;
--bgcolor-solutions-primary: var(--brand-tertiary);
--bgcolor-solutions-secondary: white;
--bgcolor-service-guarantee: var(--brand-primary);
--bgcolor-testimonials: var(--brand-tertiary);
--bgcolor-footer-cta-bar: var(--brand-cta);
--bgcolor-footer: var(--ars-black);
/* Mobile Navigation */
--jump-nav-icon-color: var(--brand-cta);
/* Hero Section */
--txt-rtb-hero-color: white;
--rtb-hero-icon-color: white;
--rtb-hero-tooltip-icon-color: white;
--hero-border-bottom-width-mob: 0px;
--hero-border-bottom-width-lg: 0px;
--hero-border-bottom-color: var(--brand-primary);
/* Coupons Section */
--clr-coupon-headings: white;
--coupon-price-color: var(--brand-cta);
--icon-coupon-color: var(--ars-mid-gray);
/* Exit Intent / Promo Popup */
--popup-promo-color: var(--coupon-price-color);
/* Service Offering Section */
--service-icon-color: var(--brand-secondary);
/* Reviews Section */
--review-star-color: var(--brand-cta);
/* Service Guarantee Section */
--txt-rtb-guarantee-color: white;
--rtb-guarantee-icon-color: white;
/* Footer CTA Section */
--clr-txt-footer-cta: white;
/* Tooltips */
--bgcolor-tooltip-hero: white;
--tooltip-close-icon-color: var(--ars-black);
--clr-txt-hero-tooltip-copy: var(--ars-black);
--pos-bottom-hero-tooltip-lg: 125px;
--pos-right-hero-tooltip-lg: -25px;
--pos-bottom-hero-tooltip-mob: 125px;
--pos-right-hero-tooltip-mob: 2px;
--bgcolor-tooltip-svc: #0C2744;
--tooltip-svc-close-icon-color: white;
--clr-txt-svc-tooltip-copy: white;
--pos-top-svc-tooltip-lg: -95px;
--pos-right-svc-tooltip-lg: -65px;
--pos-top-svc-tooltip-mob: 10px;
--pos-right-svc-tooltip-mob: 20px;
}
/* End Configuration */
/* DO NOT EDIT PAST THIS POINT UNLESS ADDING NEW STYLES */
/* Begin Module Styles */
/* Hero */
.module--hero .section-block {
background-color: var(--bgcolor-hero, #0C2744) !important;
border-bottom: var(--hero-border-bottom-width-lg) solid var(--hero-border-bottom-color);
}
@media screen and (max-width: 767px) {
.module--hero .section-block {
border-bottom: var(--hero-border-bottom-width-mob) solid var(--hero-border-bottom-color);
}
.module--hero .section-inner {
min-height: unset !important;
}
}
/* Form */
.module--lead-form .section-block {
background-color: var(--bgcolor-form, #0279B4) !important;
}
@media screen and (max-width: 767px) {
.module--lead-form .section-block {
background-color: transparent;
}
}
/* Limited Time Offers */
.module--coupons .section-block {
background-color: var(--bgcolor-limited-time-offers, #0279B4) !important;
}
/* Service Menu */
.module--service-menu {
z-index: 1000;
}
.module--service-menu .section-block {
background-color: var(--bgcolor-service-offering, white) !important;
}
@media screen and (max-width: 767px) {
#element-628,
#element-629,
#element-630,
#element-631 {
width: 45px;
}
#element-87,
#element-88,
#element-92,
#element-101 {
ul {
padding-left: 4.5rem;
}
}
#element-86,
#element-89,
#element-91,
#element-93 {
max-width: calc(100% - 55px);
}
}
/* Solutions */
.module--solutions:nth-of-type(odd) .section-block {
background-color: var(--bgcolor-solutions-primary, #F0F8FF) !important;
}
.module--solutions:nth-of-type(even) .section-block {
background-color: var(--bgcolor-solutions-secondary, white) !important;
}
@media screen and (max-width: 767px) {
.module--solutions:nth-of-type(odd) .section-responsive-cell:nth-of-type(odd) div[id^="element-"]:first-of-type {
width: 100% !important;
}
.module--solutions:nth-of-type(even) .section-responsive-cell:nth-of-type(odd) {
grid-row-start: 2 !important;
grid-row-end: 2 !important;
}
.module--solutions:nth-of-type(even) .section-responsive-cell:nth-of-type(even) {
grid-row-start: 1 !important;
grid-row-end: 1 !important;
}
}
/* Service Guarantee */
.module--guarantee .section-block {
background-color: var(--bgcolor-service-guarantee, #0C2744) !important;
}
/* Reviews */
.module--reviews .section-block {
background-color: var(--bgcolor-testimonials, #F0F8FF) !important;
}
@media screen and (max-width: 767px) {
.module--reviews .section-inner {
min-height: unset !important;
}
}
/* Footer CTA Bar */
.module--footer-cta .section-block {
background-color: var(--bgcolor-footer-cta-bar, #D62628) !important;
}
@media screen and (min-width: 768px) {
.module--footer-cta #element-143 {
min-width: 35rem !important;
}
}
.module--footer-cta #element-143 p {
color: var(--clr-txt-footer-cta, white) !important;
}
.footer-cta-content {
display: flex;
align-items: center;
gap: 32px;
}
@media screen and (max-width: 767px) {
.footer-cta-content {
flex-direction: column;
gap: 1rem;
}
}
.footer-cta__heading {
color: var(--clr-txt-footer-cta, white) !important;
font-size: 1.4861rem;
font-weight: 500;
text-align: center;
line-height: 2.375rem;
}
.footer-cta-content .cta-group__btn .btn {
background: var(--btn-secondary) !important;
color: var(--ars-black) !important;
}
.footer-cta-content .cta-group__btn .btn:hover {
background: var(--btn-secondary-hov) !important;
color: white !important;
}
/* Footer */
.module--footer .section-block {
background-color: var(--bgcolor-footer, #231F20) !important;
}
/* End Page Block Background Colors */
/* Begin Button Primary Color/Hover Color Overrides */
.btn.form-btn {
background: var(--btn-primary) !important;
color: var(--btn-txt-color) !important;
}
.btn.form-btn:hover {
background: var(--btn-primary-hov) !important;
color: var(--btn-txt-color-hov) !important;
}
.btn.url-link {
background: var(--btn-primary) !important;
color: var(--btn-txt-color) !important;
}
.btn.url-link:hover {
background: var(--btn-primary-hov) !important;
color: var(--btn-txt-color-hov) !important;
}
/* CTA Bar located directly above the footer */
#element-142 {
.btn.url-link {
background: var(--btn-secondary) !important;
color: var(--ars-black) !important;
}
.btn.url-link:hover {
background: var(--btn-secondary-hov) !important;
color: white !important;
}
}
/* End Button Primary Color/Hover Color Overrides */
/* Popup Promo */
.lightbox-dim {
display: flex;
align-items: center;
}
.lightbox-content {
min-height: 23rem;
max-height: 24rem;
margin: 0 auto;
}
div[data-at="modal-content"] {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
padding-top: 2rem;
}
#element-789 {
position: relative;
top: unset;
left: unset;
height: unset;
width: unset;
}
#element-503 {
position: relative;
top: unset;
left: unset;
height: unset;
width: unset;
}
#element-500 .x_fb0aed2e {
color: var(--popup-promo-color);
}
.popup-content {
width: 100%;
max-width: 340px;
margin: 0 auto;
}
.popup-content__eyebrow {
padding-bottom: 20px;
}
.popup-content__eyebrow p {
color: var(--ars-black);
font-family: Roboto, sans-serif;
font-size: 16px;
font-weight: 700;
text-align: center;
}
.popup-content__promo-head p {
color: var(--popup-promo-color, #d62628);
text-align: center;
font-family: Roboto;
font-size: 64px;
font-style: normal;
font-weight: 700;
line-height: 75px;
letter-spacing: -0.32px;
}
.popup-content__promo-subhead {
padding-top: 20px;
}
.popup-content__promo-subhead p {
color: var(--ars-black);
font-family: Roboto, sans-serif;
font-size: 20px;
font-weight: 700;
text-align: center;
}
.popup-content__promo-detail {
padding-top: 1rem;
}
.popup-content__promo-detail p {
color: var(--ars-black);
font-family: Roboto, sans-serif;
font-size: 16px;
line-height: 1.4em;
}
.popup-content .cta-group {
display: flex;
justify-content: center;
width: 100%;
padding-top: 20px;
}
/* End Popup Promo */
/* Begin Header */
@media screen and (max-width: 767px) {
.module--header .section-fit {
max-width: 100% !important;
}
}
@media screen and (max-width: 767px) {
#element-1157 {
display: none;
}
}
#element-211 {
.item-block {
display: flex !important;
}
img {
display: block; /* avoids inline-gap issues */
width: auto;
max-width: 100%;
height: auto;
max-height: 100%;
object-fit: contain;
}
}
@media screen and (max-width: 767px) {
#element-211 {
width: 150px !important;
height: 75px !important;
img {
display: block; /* avoids inline-gap issues */
width: auto;
max-width: 100%;
height: auto;
max-height: 100%;
object-fit: contain;
}
}
}
@media screen and (min-width: 768px) {
#element-211 {
width: 400px !important;
height: 110px !important;
}
}
@media screen and (max-width: 767px) {
.module--header.scrolled {
max-height: 93px !important;
border-bottom: 1px solid #d2d2d2;
overflow: hidden;
#element-216,
#element-212 {
display: none;
}
#element-1157 {
display: block;
top: 1.5rem !important;
right: 20px;
left: unset;
}
.trigger-link {
border-bottom: 0;
}
}
.module--header.scrolled.menu-open {
height: 400px !important;
max-height: 500px !important;
border-bottom: 0;
}
}
.header-content {
display: flex;
align-items: center;
gap: 64px;
}
@media screen and (max-width: 767px) {
.header-content .cta-group
}
.header-content-mob {
display: flex;
justify-content: end;
}
/* End Header */
/* Begin Hero */
@media screen and (max-width: 767px) {
#element-632 h1 .x_f2074b6c {
font-size: 44px;
letter-spacing: -0.02em;
}
}
.rtb--hero {
width: 100%;
position: relative;
}
.rtb__hero-heading {
color: var(--txt-rtb-hero-color);
font-size: 47px;
font-weight: bold;
line-height: 1.2em;
text-align: left;
}
@media screen and (max-width: 767px) {
.rtb__hero-heading {
font-size: 36px;
}
}
.rtb-list {
list-style-type: none;
display: flex;
flex-direction: column;
align-items: start;
padding-left: 0;
gap: 8px;
}
.rtb-list__item {
display: flex;
align-items: center;
}
.rtb__icon {
width: 24px;
}
.rtb-hero-icon path {
fill: var(--rtb-hero-icon-color);
}
.rtb__copy {
display: flex;
align-items: baseline;
padding-left: 1rem;
text-align: left;
p {
color: var(--txt-rtb-hero-color);
font-size: 20px;
}
}
.rtb__hero-cta {
padding: 10px 0;
p {
color: var(--txt-rtb-hero-color);
font-size: 20px;
text-align: left;
}
}
.tooltip-toggle {
display: inline-block;
height: 21px;
cursor: pointer;
}
.tooltip-toggle-hero circle {
fill: transparent !important;
}
.tooltip-toggle-hero path {
fill: var(--rtb-hero-tooltip-icon-color) !important;
}
.tooltip-toggle-hero,
.tooltip-toggle-hero * {
pointer-events: all;
}
.rtb__tooltip {
display: none;
width: 333px;
height: 176px;
position: absolute;
}
@media screen and (min-width: 768px) {
.rtb__tooltip {
right: var(--pos-right-hero-tooltip-lg) !important;
bottom: var(--pos-bottom-hero-tooltip-lg) !important;
}
}
@media screen and (max-width: 767px) {
.rtb__tooltip {
right: var(--pos-right-hero-tooltip-mob) !important;
bottom: var(--pos-bottom-hero-tooltip-mob) !important;
}
}
.rtb__tooltip.active {
display: block;
}
.icon-tooltip-close {
display: flex;
justify-content: end;
padding-top: .5rem;
padding-right: 1rem;
position: relative;
z-index: 999;
cursor: pointer;
}
.tooltip-close-icon path {
fill: black;
}
.tooltip__body {
display: flex;
flex-direction: column;
gap: 10px;
padding: 1rem;
position: relative;
z-index: 999;
}
.tooltip__headline {
color: var(--clr-txt-hero-tooltip-copy);
font-size: 14px;
font-weight: bold;
text-align: left;
}
.tooltip__copy {
color: var(--clr-txt-hero-tooltip-copy);
font-size: 12px;
text-align: left;
}
.tooltip__shape {
position: absolute;
top: 0;
left: 0;
width: fit-content;
height: fit-content;
z-index: 998;
}
@media screen and (min-width: 768px) {
.tooltip-shape--lg {
display: block;
}
.tooltip-shape--sm {
display: none;
}
}
@media screen and (max-width: 767px) {
.tooltip-shape--lg {
display: none;
}
.tooltip-shape--sm {
display: block;
}
}
.tooltip-shape-hero path {
fill: var(--bgcolor-tooltip-hero);
}
/* Hero Tooltip Elements */
#element-507,
#element-508,
#element-509,
#element-511 {
display: none;
}
#element-507.active,
#element-508.active,
#element-509.active,
#element-511.active {
display: block;
}
@media screen and (max-width: 767px) {
#element-508 {
top: 10.5rem;
}
#element-508 .contents p {
font-size: 14px;
}
}
@media screen and (max-width: 767px) {
#element-509 {
top: 12.5rem;
height: auto;
}
#element-509 .contents p {
font-size: 12px;
}
}
@media screen and (max-width: 767px) {
#element-511 {
top: 9.5rem;
left: 21.875rem;
}
}
#element-507::after {
content: "";
display: block;
width: 20px;
height: 20px;
background-color: white;
position: absolute;
bottom: -9px;
transform: rotate(45deg);
cursor: pointer;
}
@media screen and (max-width: 767px) {
#element-507 {
top: 8.5rem;
left: 1.063rem;
width: 22.813rem;
height: 11rem;
}
#element-507::after {
right: 28px;
left: unset;
}
}
@media screen and (min-width: 768px) {
#element-507::after {
left: 33px;
}
}
/* End Tooltip Elements */
/* End Hero */
/* Begin Header */
@media screen and (max-width: 767px) {
.module--header {
max-height: calc(13.0625rem - 65px) !important;
}
}
@media screen and (max-width: 767px) {
.module--header .section-block {
height: 9rem !important;
}
}
/* End Header */
/* Begin Form */
/* This is the Form container block */
@media screen and (min-width: 768px) {
.module--lead-form,
.module--lead-form .section-block {
height: 14.25rem !important;
}
.module--lead-form .form-container {
top: 8rem !important;
}
}
@media screen and (max-width: 767px) {
.module--lead-form .section-block {
background-color: white !important;
}
.module--lead-form,
.module--lead-form .section-block,
.module--lead-form div[id^="element-"]:first-of-type {
height: 25rem !important;
}
.module--lead-form .form-container {
top: 11rem !important;
}
}
/* This is the white rectangle with the rounded corners that surrounds the form content */
@media screen and (min-width: 768px) {
.module--lead-form div[id^="element-"]:first-of-type {
height: 15rem !important;
}
}
@media screen and (max-width: 767px) {
.module--lead-form div[id^="element-"]:first-of-type .shape {
border-radius: 0 !important;
}
}
/* These are the heading and paragraph elements within the white rectangle that surrounds the form content */
.form__heading {
padding-bottom: .5rem;
color: var(--ars-navy);
font-size: 36px;
font-weight: 900;
text-align: center;
}
@media screen and (max-width: 767px) {
.form__heading {
max-width: 250px;
margin: 0 auto;
font-size: 32px;
}
}
.form__copy {
color: var(--ars-navy);
text-align: center;
}
/* These are the individual elements within the form container UI */
/* This style allows the form container to be positioned above the Hero */
/* #element-345 contains the form itself */
@media screen and (min-width: 768px) {
.module--lead-form .section-inner > div[id^="element-"] {
margin-top: -50px;
}
}
@media screen and (min-width: 768px) {
form {
display: flex;
justify-content: space-between;
gap: 1.5rem;
}
}
@media screen and (min-width: 768px) {
form div,
form input[data-label-inside="ZIP code"] {
width: calc(50% - 10px);
}
}
/* Form Button Positioning - Mobile */
@media screen and (max-width: 767px) {
.multistep-form-step .form-btn-geometry {
top: 9.5rem !important;
left: 0rem !important;
}
}
/* Form Button Positioning - Desktop */
@media screen and (min-width: 768px) {
.multistep-form-step .form-btn-geometry {
top: 0.5rem !important;
left: 39rem !important;
}
}
/* End Form */
/* Begin Mobile Header Image Below Form */
@media screen and (min-width: 768px) {
.module--mobile-hero-img {
display: none !important;
}
}
@media screen and (max-width: 767px) {
#element-584,
#element-1099 {
width: 100%;
height: 100%;
}
.module--mobile-hero-img,
.module--mobile-hero-img .section-block .section-inner {
min-height: unset !important;
}
.module--mobile-hero-img,
.module--mobile-hero-img .section-block,
#cell-d7144a20-f97a-4287-aa9d-33d741390ac4 {
max-height: 175px !important;
}
.module--mobile-hero-img div[id^="element-"]:last-of-type {
width: 100%;
}
}
/* End Mobile Header Image Below Form */
/* Begin Coupons */
.coupons-heading {
color: var(--clr-coupon-headings, white) !important;
font-weight: 700;
text-align: center;
}
@media screen and (max-width: 767px) {
.coupons-heading {
padding-top: 30px;
font-size: 32px;
}
}
@media screen and (min-width: 768px) {
.coupons-heading {
font-size: 36px;
}
}
.coupons-subheading {
padding: 4px 0 3rem;
color: var(--clr-coupon-headings, white) !important;
font-size: 16px;
font-weight: 700;
text-align: center;
}
.coupon {
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 8px;
padding: 12px 16px 8px;
border-radius: 16px;
border: 1px dashed #0c2744;
background-color: white;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
}
.coupon__icon {
display: flex;
align-items: flex-end;
justify-content: flex-end;
width: 100%;
}
.icon__image {
display: block;
width: 24px;
height: 24px;
}
.icon-coupon path {
fill: var(--icon-coupon-color, black); /* Default to red */
}
.coupon__price {
color: var(--coupon-price-color, #d62628);
text-align: center;
font-family: Roboto;
font-size: 64px;
font-style: normal;
font-weight: 700;
line-height: 75px; /* 117.188% */
letter-spacing: -0.32px;
}
@media screen and (max-width: 767px) {
.coupon__price {
font-size: 48px;
line-height: 56px;
}
}
.coupon__title {
color: var(--ars-black, #231f20);
text-align: center;
font-family: Roboto;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 130%; /* 26px */
}
.coupon__desc {
color: var(--ars-mid-gray, #808080);
text-align: center;
font-family: Roboto;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 22px; /* 137.5% */
}
.coupon__expire {
display: flex;
justify-content: space-between;
width: 100%;
margin-top: 8px;
padding: 8px 0;
border-top: 1px solid var(--ars-lite-gray, #f0f8ff);
}
.expire__title,
.expire__date {
color: var(--ars-mid-gray, #808080);
font-family: Roboto;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 22px; /* 137.5% */
}
/* These are the actual columns that contain the coupons */
#element-134,
#element-135,
#element-136 {
width: 100%;
}
#element-744 {
width: 100%;
}
.coupons {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 44px;
width: 100%;
.coupon {
width: 100%;
max-width: 370px;
}
}
/* End Coupons */
/* Begin Service Menu */
.svc-trust {
.tooltip-toggle-svc circle {
fill: transparent !important;
}
.tooltip-toggle-svc path {
fill: var(--ars-black);
}
}
.svc-trust__heading {
padding-top: 64px;
color: var(--ars-black);
font-weight: 700;
text-align: center;
}
@media screen and (max-width: 767px) {
.svc-trust__heading {
padding-top: 32px;
font-size: 32px;
}
}
@media screen and (min-width: 768px) {
.svc-trust__heading {
font-size: 36px;
}
}
.svc-trust-list {
display: flex;
gap: 20px;
padding-left: 0;
list-style-type: none;
}
@media screen and (max-width: 767px) {
.svc-trust-list {
flex-direction: column;
}
}
@media screen and (min-width: 768px) {
.svc-trust-list {
justify-content: center;
}
}
.svc-trust-list__item {
display: flex;
}
.svc-trust-list__title .title-copy {
color: #231F20;
font-size: 20px;
font-weight: bold;
text-align: left;
}
.svc-trust__tooltip {
display: none;
width: 333px;
height: 176px;
position: absolute;
.tooltip__headline,
.tooltip__copy {
color: var(--clr-txt-svc-tooltip-copy);
}
}
@media screen and (min-width: 768px) {
.svc-trust__tooltip {
top: var(--pos-top-svc-tooltip-lg);
right: var(--pos-right-svc-tooltip-lg);
}
}
@media screen and (max-width: 767px) {
.svc-trust__tooltip {
top: var(--pos-top-svc-tooltip-mob);
right: var(--pos-right-svc-tooltip-mob);
}
}
.svc-trust__tooltip.active {
display: block;
.tooltip-shape-hero path {
fill: var(--bgcolor-tooltip-svc);
}
.tooltip-close-icon path {
fill: var(--tooltip-svc-close-icon-color);
}
}
.svc-menu {
display: flex;
width: 100%;
padding-top: 32px;
padding-bottom: 64px;
@media screen and (max-width: 767px) {
flex-direction: column;
padding-bottom: 32px;
}
@media screen and (min-width: 768px) {
gap: 32px;
}
}
.svc-menu__column {
width: 100%;
@media screen and (max-width: 767px) {
max-width: 100%;
}
@media screen and (min-width: 768px) {
max-width: 25%;
}
}
.service {
@media screen and (max-width: 767px) {
display: grid;
grid-template-columns: 50px 1fr;
padding-bottom: 20px;
}
}
.service__icon {
display: flex;
align-items: start;
justify-content: center;
}
.service__heading {
@media screen and (min-width: 768px) {
padding-top: 6px;
}
}
.svc-head-txt {
font-family: "Roboto", sans-serif;
font-size: 20px;
font-weight: bold;
text-align: left;
}
@media screen and (min-width: 768px) {
.svc-head-txt {
text-align: center;
}
}
.service__details {
@media screen and (max-width: 767px) {
grid-column-start: 2;
}
}
.svc-dtl-list {
margin: 0;
padding-top: 7px;
padding-left: 14px;
}
.svc-dtl-list__item {
color: var(--ars-black);
line-height: 1.625rem;
text-align: left;
}
.svc-menu__tooltip {
display: none;
}
/* End Service Menu */
/* Begin "We Can Solve Any Problems Sections */
.solutions {
padding-top: .5rem;
}
.solutions__heading {
padding-bottom: .5rem;
color: var(--ars-black);
font-weight: 700;
text-align: left;
}
@media screen and (max-width: 767px) {
.solutions__heading {
max-width: 330px;
margin: 0 auto;
font-size: 32px;
text-align: center;
letter-spacing: -.01rem;
}
}
@media screen and (min-width: 768px) {
.solutions__heading {
font-size: 36px;
}
}
.solutions-list {
padding-left: 0;
list-style-type: none;
}
@media screen and (min-width: 768px) {
.solutions-list {
column-count: 2;
}
}
.solutions-list__item {
break-inside: avoid;
}
.solution {
margin-top: 20px;
.solution__title,
.solution__copy {
color: var(--ars-black, #231F20);
text-align: left;
}
.solution__title {
padding-bottom: 10px;
font-size: 1.2384rem;
font-weight: bold;
}
.solution__copy {
line-height: 1.4rem;
}
}
.solution:first-of-type {
margin-top: 0;
}
@media screen and (max-width: 767px) {
#element-663 {
width: 100%;
}
}
/* End "We Can Solve Any Problems Sections */
/* Begin Finance Section */
@media screen and (max-width: 767px) {
.module--financing {
.section-inner {
min-height: unset !important;
}
div[id^="element-"] {
width: 100% !important;
padding: 0 20px;
}
div[id^="element-"]:first-of-type {
padding: 0;
}
}
}
.financing-content .financing__heading {
padding-bottom: 1rem;
font-size: 2.2291rem;
font-weight: bold;
line-height: 2.6875rem;
text-align: left;
}
@media screen and (max-width: 767px) {
.financing-content .financing__heading {
text-align: center;
}
}
.financing-content .financing__copy {
padding-bottom: 1rem;
font-size: 1rem;
line-height: 1.625rem;
text-align: left;
}
/* End Finance Section */
/* Begin Guarantee */
@media screen and (min-width: 768px) {
.module--guarantee .section-inner {
grid-template-columns: 150px 1fr 1fr;
}
}
@media screen and (max-width: 767px) {
#element-646 {
max-width: 88px;
max-height: 88px;
}
}
.guarantee {
width: 490px;
}
@media screen and (max-width: 767px) {
.guarantee {
width: calc(100%);
}
}
.guarantee__title {
color: var(--txt-rtb-guarantee-color);
font-size: 2.1672rem;
font-weight: bold;
line-height: 2.625rem;
text-align: left;
}
@media screen and (max-width: 767px) {
.guarantee__title {
text-align: center;
}
}
.guarantee__copy {
color: var(--txt-rtb-guarantee-color);
font-size: 0.743rem;
text-align: left;
}
@media screen and (min-width: 768px) {
.guarantee__copy.lg-only {
display: block;
}
.guarantee__copy.sm-only {
display: none;
}
}
@media screen and (max-width: 767px) {
.guarantee__copy.lg-only {
display: none;
}
.guarantee__copy.sm-only {
display: block;
padding-top: 20px;
}
}
.rtb--guarantee {
width: 500px;
padding-left: 25px;
position: relative;
.rtb-list {
gap: 14px;
}
.rtb__copy {
padding-left: 0.5rem;
text-align: left;
p {
color: var(--txt-rtb-guarantee-color);
font-size: 20px;
font-weight: bold;
}
}
}
@media screen and (max-width: 767px) {
.rtb--guarantee {
width: calc(100%);
padding-left: 0;
}
}
.rtb-guarantee-icon path {
fill: var(--rtb-guarantee-icon-color);
}
/* End Guarantee */
/* Begin Testimonials */
.review {
display: flex;
flex-direction: column;
align-items: start;
width: 100%;
padding: 20px;
border-radius: 1rem;
box-shadow: rgba(35, 31, 32, 0.25) 1px 0 4px 0;
background-color: white;
}
.review__rating {
display: flex;
align-items: center;
justify-content: start;
.star {
display: block;
width: 20px;
height: 20px;
}
.star path {
fill: var(--review-star-color, #D62628); /* Default to red */
}
}
.review__body p {
padding: 12px 0;
font-size: 16px;
text-align: left;
}
.review__location p {
font-size: 0.8077rem;
font-weight: bold;
}
/* These are the columns that contain the actual reviews */
#element-577,
#element-578 {
width: 100%;
}
@media screen and (min-width: 768px) {
.module--reviews .section-responsive-inner {
grid-template-columns: 1fr 310px 310px;
}
.module--reviews .section-responsive-inner .section-responsive-cell:first-of-type .widget {
max-width: 390px;
}
}
.review-content .review__heading {
padding-bottom: 1rem;
font-size: 2.2291rem;
font-weight: bold;
line-height: 2.6875rem;
text-align: left;
}
@media screen and (max-width: 767px) {
.review-content .review__heading {
text-align: center;
}
}
/* End Testimonials */
/* Begin Mobile Jump Menu */
@media screen and (max-width: 767px) {
#element-215 {
width: 100%;
top: calc(5.75rem + 1px);
}
}
.jump-nav-mob {
height: auto;
border-top: 1px solid #d2d2d2;
overflow: hidden;
}
.jump-nav-mob[data-state="closed"] {
max-height: 51px;
}
.jump-nav-mob[data-state="open"] {
max-height: 1000px;
border-bottom: 0;
}
.jump-nav-mob__trigger {
height: 50px;
background-color: white;
position: relative;
color: black;
font-family: "Roboto", sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 50px;
text-align: left;
}
body.scrolled #element-215 .jump-nav-mob__trigger {
display: none;
}
.trigger-link {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
height: 100%;
padding: 0 16px 0 20px;
border-bottom: 1px solid #d2d2d2;
position: absolute;
top: 0;
left: 0;
}
body.scrolled #element-1157 .trigger-link {
justify-content: end;
padding: 0;
}
body.scrolled #element-1157 .jump-nav-icon {
margin-left: 10px;
}
.jump-nav-icon path {
fill: var(--jump-nav-icon-color, #D62628); /* Default to red */
}
.trigger-link[data-state="active"]::after {
transform: rotate(180deg);
}
@media screen and (min-width: 768px) {
#element-1250 {
display: flex;
align-items: center;
justify-content: end;
}
.jump-nav {
display: flex;
justify-content: end;
}
.nav-menu {
display: flex;
align-items: center;
gap: 40px;
margin: 0;
padding: 0;
list-style-type: none;
}
.nav-menu__item {
a {
font-size: 1.1708rem;
font-weight: bold;
}
}
.nav-menu__item--request {
a {
font-size: 16px;
font-weight: bold;
}
}
}
@media screen and (max-width: 767px) {
.jump-nav {
display: none;
}
.nav-menu {
margin: 0;
padding-left: 0;
background-color: white;
list-style-type: none;
}
.nav-menu__item {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
padding: 0;
border-bottom: 1px solid #d2d2d2;
color: black;
font-family: "Roboto", sans-serif;
font-size: 16px;
font-weight: 700;
text-align: center;
}
}
.btn-req {
display: flex;
align-items: center;
width: fit-content;
height: 38px;
padding: 0 24px;
border-radius: 25px;
border: 2px solid var(--clr-border-req-svc-cta) !important;
}
.btn-req:hover {
text-decoration: none !important;
}
/* End Mobile Jump Menu */
/* Begin Footer */
.legal p {
margin-bottom: 12px;
color: white;
font-size: 14px;
text-align: left;
}
/* FDIC Logo - Mobile */
@media screen and (max-width: 767px) {
#element-575 {
width: 120px;
}
}
@media screen and (min-width: 768px) {
.module--footer-dual-cta {
display: none;
}
}
@media screen and (max-width: 767px) {
.module--footer-dual-cta {
display: none;
width: 100%;
max-height: 85px;
border-top: 1px solid #d2d2d2;
background-color: white;
position: fixed;
bottom: 0;
overflow: hidden;
z-index: 1000031;
}
.module--footer-dual-cta.active {
display: block;
}
.module--footer-dual-cta .section-inner {
grid-template-rows: unset !important;
padding: 8px 0 12px !important;
.section-responsive-cell {
grid-column-start: unset !important;
grid-column-end: unset !important;
grid-row-start: unset !important;
grid-row-end: unset !important;
justify-content: start !important;
padding: 0 8px !important;
.widget {
width: 100% !important;
}
.btn {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
width: 100% !important;
height: 44px !important;
padding: 10px !important;
font-size: 16px !important;
}
}
.section-responsive-cell:first-child {
grid-column-start: 1 !important;
grid-column-end: 1 !important;
padding: 0 8px 0 16px !important;
}
.section-responsive-cell:last-child {
grid-column-start: 2 !important;
grid-column-end: 2 !important;
gap: 4px;
padding: 0 16px 0 8px !important;
}
}
#element-1152 .btn {
border-color: var(--clr-border-req-svc-cta) !important;
}
#element-1153 .btn::before {
content: "";
display: block;
width: 18px;
height: 18px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cg transform='matrix(1,0,0,1,-3.5,-3.01953)'%3E%3Cpath d='M20.45,21.02C18.367,21.02 16.308,20.565 14.275,19.657C12.242,18.749 10.392,17.461 8.725,15.794C7.058,14.128 5.771,12.278 4.863,10.245C3.954,8.211 3.5,6.153 3.5,4.07C3.5,3.77 3.6,3.52 3.8,3.32C4,3.12 4.25,3.02 4.55,3.02L8.6,3.02C8.833,3.02 9.042,3.099 9.225,3.257C9.408,3.415 9.517,3.603 9.55,3.82L10.2,7.32C10.233,7.586 10.225,7.811 10.175,7.995C10.125,8.178 10.033,8.336 9.9,8.47L7.475,10.92C7.808,11.536 8.204,12.132 8.663,12.707C9.121,13.282 9.625,13.836 10.175,14.37C10.692,14.886 11.233,15.365 11.8,15.807C12.367,16.249 12.967,16.653 13.6,17.02L15.95,14.669C16.1,14.52 16.296,14.407 16.538,14.332C16.779,14.257 17.017,14.236 17.25,14.27L20.7,14.97C20.933,15.036 21.125,15.157 21.275,15.332C21.425,15.507 21.5,15.703 21.5,15.919L21.5,19.97C21.5,20.27 21.4,20.52 21.2,20.72C21,20.92 20.75,21.02 20.45,21.02ZM6.525,9.02L8.175,7.37L7.75,5.02L5.525,5.02C5.608,5.703 5.725,6.378 5.875,7.045C6.025,7.711 6.242,8.37 6.525,9.02ZM15.475,17.97C16.125,18.253 16.788,18.478 17.463,18.645C18.138,18.811 18.817,18.92 19.5,18.97L19.5,16.77L17.15,16.294L15.475,17.97Z' fill='%23ffffff'/%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
}
#element-1154 p {
white-space: nowrap;
}
}
.footer-legal {
display: flex;
flex-direction: column;
align-items: start;
justify-content: start;
padding-top: 20px;
}
.footer-legal__cr p {
color: white;
font-size: .75rem;
text-align: left;
text-transform: uppercase;
}
.footer-legal__links {
padding-top: 1rem;
}
.footer-legal__links .links-list {
list-style-type: none;
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
}
.footer-legal__links .links-list li {
color: white;
white-space: nowrap;
}
.footer-legal__links .links-list li::after {
content: "|";
padding: 0 .5rem;
}
.footer-legal__links .links-list li:last-of-type::after {
content: "";
padding-left: 0;
}
.footer-legal__links .links-list li a {
color: white;
font-size: .75rem;
text-decoration: underline;
text-transform: uppercase;
}
/* End Footer */
/* Begin General Page Styles */
.cta-group {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
width: fit-content;
}
.cta-group__btn {
.btn {
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 24px;
border-radius: 25px;
font-weight: 600;
white-space: nowrap;
[data-cta="phone"] {
padding-left: 4px;
}
}
}
.cta-group__copy p {
font-size: 14px;
white-space: nowrap;
}
.service-icon {
path,
rect {
fill: var(--service-icon-color, #0279B4); /* Default to red */
}
}
sup {
font-size: .5em;
}
@media screen and (min-width: 768px) {
#cell-174cbc13-188b-4020-942a-cc7fa29b3772 {
gap: 20px;
}
}
@media screen and (max-width: 767px) {
.grecaptcha-badge {
bottom: 11% !important;
}
}
#element-143 .x_f2074b6c {
color: unset !important;
}
/* End General Page Styles */