/* =============================================================
   Homepage-only styles (index.html), loaded after the shared
   stylesheets. The Clutch review carousel it used to hold was
   extracted to the shared component sheet
   assets/css/components/review-carousel.css; only page-scoped
   homepage styles remain here.
   ============================================================= */

/* =============================================================
   Homepage services section — full-width gradient wrapper matching
   the mission section's treatment (same radial gradient + vertical
   padding rhythm) so Reviews (white) and Services read as one system
   instead of blending. Gradient + padding live on this wrapper; the
   inner .service--wrapper's pt-160 was dropped to avoid double padding.
   Padding restores the section's PREVIOUS spacing (the removed pt-160 and
   the responsive .service--wrapper values), not mission's: 160 (>=1360),
   120 (1200-1359), 100 (992-1199), 80 (768-991), 100 (<=767).
   ============================================================= */
.services-sec {
    background: radial-gradient(100% 100% at 50% 0%, rgba(244, 244, 247, 0.50) 0%, #EBEBF2 100%);
    padding: 160px 0;
}

/* Neutralize the inner wrapper's own vertical padding so .services-sec is
   the sole source of vertical rhythm — no double-padding. custom.css's
   base .service--wrapper has none, but responsive.css adds 100px (<=767)
   and 80px (768-991); this 2-class selector overrides both. Removing the
   HTML pt-160 handled >=992; this covers the mobile/tablet bands. */
.services-sec .service--wrapper {
    padding: 0;
}

@media (min-width: 1200px) and (max-width: 1359px) {
    .services-sec {
        padding: 120px 0;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .services-sec {
        padding: 100px 0;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .services-sec {
        padding: 80px 0;
    }
}

@media (max-width: 767px) {
    .services-sec {
        padding: 100px 0;
    }
}