/* ==================================================
   Homepage Services Section — sizing pass only.
   Loads after index_style.css so these overrides win on the section's
   own selectors (.services-header / .service-card*). Colors, gradients,
   glass-card look, and the hover-glow/mouse-tracker are untouched --
   only heading scale (to match the stats/news sections above it) and
   card dimensions are reduced. Mobile also gets a horizontal-scroll
   layout instead of a stacked full-width grid, and the 3D tilt is
   killed as a safety net (JS already skips wiring it on touch).
   ================================================== */

/* --- Heading: same reduced scale as the stats/news sections --- */
.services-header {
    margin-bottom: 56px;
    padding: 46px 0;
}

/* Kill the decorative glow line above the eyebrow. */
.services-header::before { content: none; display: none; }

.services-header .section-subtitle {
    font-size: 12px;
    letter-spacing: 2.5px;
    margin-bottom: 16px;
}

/* Kill the short flanking lines either side of the eyebrow. */
.services-header .section-subtitle::before,
.services-header .section-subtitle::after {
    content: none;
    display: none;
}

.services-header .section-title-main {
    font-size: clamp(28px, 3.4vw, 40px);
    line-height: 1.25;
    font-weight: 600;
    margin-bottom: 18px;
}

/* Kill the underline glow bar below the title. */
.services-header .section-title-main::after { content: none; display: none; }

.services-header .section-description-modern {
    font-size: 15px;
    line-height: 1.6;
    max-width: 520px;
}

/* Kill the decorative quote marks around the description. */
.services-header .section-description-modern::before,
.services-header .section-description-modern::after {
    content: none;
    display: none;
}

/* --- Cards: reduced to match the News section's card scale --- */
.services-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
    margin-bottom: 56px;
}

.service-image-container { height: 170px; }

.service-content { padding: 20px; }

.service-title { margin-bottom: 8px; }

.service-title a { font-size: 17px; line-height: 1.35; }

.service-description {
    font-size: 13.5px;
    line-height: 1.55;
    margin-bottom: 16px;
}

.service-icon { width: 40px; height: 40px; }
.service-icon i { font-size: 16px; }

.service-btn { font-size: 13px; }

.service-number { width: 32px; height: 32px; }
.service-number span { font-size: 12px; }

/* --- CTA button: slim ghost pill instead of the heavy filled/glowing
   button, matching the lighter look used across the rebuilt sections. --- */
.amzy-services-btn {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    padding: 12px 26px;
    font-size: 13.5px;
    box-shadow: none;
}

.amzy-services-btn:hover {
    background: #ff5e14;
    border-color: #ff5e14;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(255, 94, 20, 0.3);
}

/* --- Tablet --- */
@media (max-width: 992px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

/* --- Mobile: horizontal swipe row, matching the other rebuilt
   sections, instead of a stacked full-width grid. Tilt effect is
   force-killed here too as a safety net. --- */
@media (max-width: 768px) {
    .modern-services-section { padding: 56px 0; }
    .services-header { padding: 0; margin-bottom: 30px; }
    .services-header .section-title-main { font-size: 22px; }
    .services-header .section-description-modern { font-size: 13.5px; padding: 0 24px; }

    .services-grid {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 14px;
        padding: 4px 20px 10px;
        margin-bottom: 0;
        scrollbar-width: none;
    }
    .services-grid::-webkit-scrollbar { display: none; }

    .service-card { flex: 0 0 78%; scroll-snap-align: start; }
    .service-image-container { height: 150px; }
    .service-content { padding: 16px; }
    .service-title a { font-size: 15.5px; }
    .service-description { font-size: 12.5px; margin-bottom: 12px; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }

    /* CTA: small, centered, with clearance above the fixed
       back-to-top circle so the two never visually collide. */
    .services-cta { margin-top: 28px; padding: 0 24px 20px; }
    .amzy-services-btn {
        padding: 10px 22px;
        font-size: 12.5px;
        gap: 7px;
    }

    /* Kill the 3D tilt on touch: no real mouseleave means it can get
       stuck mid-rotation. JS already skips wiring it up here, this is
       just a hard backstop. */
    .service-card-inner,
    .service-card-inner:hover {
        transform: none !important;
        transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
    }
}