Remote Support

/* ===============================
REMOTE SUPPORT HERO
================================ */
.remote-hero {
background: linear-gradient(180deg, var(–black), var(–charcoal));
padding: 4.5rem 2rem;
text-align: center;
color: #ffffff;
}

.remote-hero h1 {
margin-bottom: 1rem;
}

.remote-hero p {
max-width: 760px;
margin: 0 auto;
color: var(–text-light);
line-height: 1.6;
}
/* ===============================
REMOTE SUPPORT CONTENT
================================ */
.remote-content {
background-color: var(–charcoal);
padding: 5rem 2rem;
color: #ffffff;
}

.remote-content h2 {
margin-bottom: 1rem;
}

.remote-content p {
max-width: 800px;
margin-bottom: 2rem;
color: var(–text-light);
}
/* ===============================
REMOTE SUPPORT GRID
================================ */
.remote-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 2.2rem;
margin-top: 3rem;
}

.remote-card {
background-color: var(–black);
padding: 2.2rem;
border-left: 4px solid var(–peacock-teal);
border-radius: 6px;
}

.remote-card h3 {
margin-bottom: 0.6rem;
color: #ffffff;
}

.remote-card p {
color: var(–text-light);
line-height: 1.6;
}

/* subtle gold micro-accent */
.remote-card::after {
content: “”;
display: block;
width: 38px;
height: 2px;
margin-top: 1.1rem;
background-color: var(–soft-gold);
}
/* ===============================
REMOTE TRUST SECTION
================================ */
.remote-trust {
background-color: #f5f7fa;
padding: 4.5rem 2rem;
text-align: center;
color: #111;
}

.remote-trust h2 {
color: var(–purple);
margin-bottom: 1rem;
}

.remote-trust p {
max-width: 760px;
margin: 0 auto 2rem;
}
/* ===============================
REMOTE SUPPORT CTA
================================ */
.remote-cta {
background-color: var(–purple);
padding: 4rem 2rem;
text-align: center;
color: #ffffff;
}

.remote-cta p {
max-width: 680px;
margin: 0 auto 2rem;
}
“