/* ==================================================================
   R&M Professional Cleaning — custom enhancements
   Loaded AFTER rmcleaning.css so these rules win.
   Kept intentionally small and scoped to avoid touching the
   existing Webflow design.
   ================================================================== */

/* ---- Sticky mobile click-to-call / quote bar -------------------- */
.mobile-cta-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
}
.mobile-cta-bar a {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 8px;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .02em;
  text-decoration: none;
  color: #fff;
}
.mobile-cta-bar .cta-call  { background: #c8102e; }   /* brand red */
.mobile-cta-bar .cta-quote { background: #1a1a1a; }
.mobile-cta-bar a:active { opacity: .85; }

/* Only show the bar on phones; add body padding so it never covers
   the footer content. */
@media screen and (max-width: 767px) {
  .mobile-cta-bar { display: flex; }
  body { padding-bottom: 56px; }
}

/* ---- Footer trust badges ---------------------------------------- */
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 14px;
}
.trust-badges span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: Montserrat, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #444;
}
.trust-badges span::before {
  content: "\2714";          /* check mark */
  color: #c8102e;
  font-weight: 700;
}

/* ---- Footer "areas we serve" + NAP strip ------------------------ */
.footer-areas {
  background: #111;
  padding: 18px 20px;
  text-align: center;
}
.footer-areas-inner {
  max-width: 1100px;
  margin: 0 auto;
  font-family: Montserrat, sans-serif;
}
.footer-serving,
.footer-nap {
  margin: 4px 0;
  font-size: 13px;
  line-height: 1.7;
  color: #cfcfcf;
}
.footer-serving strong,
.footer-nap strong { color: #fff; }
.footer-areas a { color: #f1f1f1; text-decoration: none; }
.footer-areas a:hover { color: #fff; text-decoration: underline; }

/* ---- Homepage hero ---------------------------------------------
   The exported template used a dental-clinic photo (dentista-hero)
   as the homepage hero background. Replace it with an on-brand
   office-cleaning image and a dark overlay so the white headline
   stays readable regardless of the photo. ---------------------- */
.section-44 {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
    url('../images/Office_cleaning_small_medium_enterprise_photograp_5e1e7c63-09ff-48c3-844f-2130c3ff33b9_0.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* Bottom-align the hero headline block on desktop. Webflow only set
   this flex rule on smaller breakpoints, so on wide screens the text
   floated to the top of the hero. Scoped to >=992px so the tablet/
   mobile breakpoints (which already bottom-align) are untouched. */
@media screen and (min-width: 992px) {
  .section-44 .container-39.sdsd {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    height: 100%;
  }
}

/* ---- About Us hero ----------------------------------------------
   Replaces the leftover dental "about-ida" tooth illustration with
   an on-brand commercial-cleaning banner. ---------------------- */
.section-10.about,
.section-10.about.v2 {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
    url('../images/Corporate_building_maintenance_services_photograp_af1fbf2a-6130-47d2-b6fc-838f33413fb8_3.jpg') !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* ---- Location landing pages (self-contained, readable) ----------
   Text colors are forced with !important: the inherited Webflow base
   otherwise rendered these bare elements invisible. Scoped to
   .loc-wrap so nothing else on the site is affected. ------------- */
.loc-wrap h1, .loc-wrap h2, .loc-wrap p, .loc-wrap li {
  opacity: 1 !important;
  visibility: visible !important;
}
.loc-page {
  padding: 70px 20px;
  font-family: Montserrat, sans-serif;
}
.loc-wrap {
  max-width: 940px;
  margin: 0 auto;
  color: #3a3a3a;
}
.loc-wrap h1 {
  font-size: 40px;
  line-height: 1.15;
  color: #1a1a1a !important;
  margin: 0 0 18px;
}
.loc-wrap h2 {
  font-size: 27px;
  line-height: 1.2;
  color: #1a1a1a !important;
  margin: 46px 0 14px;
}
.loc-wrap p {
  font-size: 16px;
  line-height: 1.75;
  color: #4a4a4a !important;
  margin: 0 0 20px;
}
.loc-lead { font-size: 18px; color: #333 !important; }
.loc-wrap a.button-2 { display: inline-block; margin: 8px 0 6px; }
.loc-services {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 28px;
}
.loc-services li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a !important;
}
.loc-services li::before {
  content: "\2714";
  color: #c8102e;
  font-weight: 700;
}
.loc-cta {
  margin-top: 50px;
  padding: 34px 28px;
  background: #f6f6f6;
  border-radius: 12px;
  text-align: center;
}
.loc-cta h2 { margin-top: 0; }
.loc-cta a { color: #c8102e; }
@media screen and (max-width: 600px) {
  .loc-page { padding: 44px 18px; }
  .loc-wrap h1 { font-size: 30px; }
  .loc-wrap h2 { font-size: 23px; }
  .loc-services { grid-template-columns: 1fr; }
}