@layer pages {
    /* Page-specific styles for the services page, scoped by .page-services */

    /* Web Design Pricing card: stay on own GPU layer so it doesn't jump layers on hover/scroll */
    .page-services .web-design-pricing-card {
        transform: translateZ(0);
        will-change: transform;
    }

    /* Web Design Pricing card: framer-style hover (lift, border glow, shadow) */
    .page-services .web-design-pricing-card:hover {
        border-color: rgba(251, 146, 60, 0.3);
        transform: translateZ(0) translateY(-2px);
        box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5), 0 0 30px rgba(234, 88, 12, 0.08);
    }

    /* Web Design feature list items: own compositor layer so one box doesn't grey out on scroll */
    .page-services .web-design-pricing-card ul.grid li {
        transform: translateZ(0);
    }
    .page-services .web-design-pricing-card ul.grid li:hover {
        transform: translateZ(0) translateY(-2px);
    }

    /* Local SEO Pricing cards: stay on own GPU layer so they don't jump layers on hover/scroll */
    .page-services .local-seo-pricing-card {
        transform: translateZ(0);
        will-change: transform;
        backface-visibility: hidden;
    }

    /* Local SEO Pricing cards: framer-style hover (lift, border glow, shadow) */
    .page-services .local-seo-pricing-card:hover {
        border-color: rgba(251, 146, 60, 0.4);
        transform: translateZ(0) translateY(-2px);
        box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5), 0 0 30px rgba(234, 88, 12, 0.08);
    }
}