/*
   Spotless shared page-boundary spacing
   One source of truth for:
   1) hero -> first visible content section
   2) final content section -> footer
*/
:root {
    --site-boundary-space: 48px;
    --site-boundary-space-tablet: 40px;
    --site-boundary-space-mobile: 32px;
}

/* Every page ends with the same clear breathing room before the footer. */
main {
    padding-bottom: var(--site-boundary-space) !important;
}

/* Remove legacy bottom spacing that stacks with the shared main spacing. */
main > :last-child,
main > .final-cta,
main > .mobile-final-cta,
main > .home-mobile-final-cta,
main > .contact-final-cta,
main > .gallery-cta,
main > .legal-content,
main > .related-services-section {
    margin-bottom: 0 !important;
}

/* First visible section after each hero: same compact top distance site-wide. */
.home-main > .about-area-13,
main > .service-hero + .spotless-section,
main > .services-hero + .spotless-section,
main > .gallery-hero + .gallery-section,
main > .contact-hero + .contact-section,
main > .contact-hero + .contact-services,
main > .legal-hero + .legal-content,
main > .about-intro-section {
    margin-top: 0 !important;
    padding-top: var(--site-boundary-space) !important;
}

/* About has mobile-only sections before the desktop introduction. */
main > .page-hero + .about-mobile-guides {
    margin-top: 0 !important;
    padding-top: var(--site-boundary-space-mobile) !important;
}

/* Prevent hero or first-section utility classes from adding a second gap. */
.home-main > #hero,
main > .service-hero,
main > .services-hero,
main > .gallery-hero,
main > .contact-hero,
main > .page-hero,
main > .legal-hero {
    margin-bottom: 0 !important;
}

@media (max-width: 991px) {
    main {
        padding-bottom: var(--site-boundary-space-tablet) !important;
    }

    .home-main > .about-area-13,
    main > .service-hero + .spotless-section,
    main > .services-hero + .spotless-section,
    main > .gallery-hero + .gallery-section,
    main > .contact-hero + .contact-section,
    main > .contact-hero + .contact-services,
    main > .legal-hero + .legal-content,
    main > .about-intro-section {
        padding-top: var(--site-boundary-space-tablet) !important;
    }
}

@media (max-width: 575px) {
    main {
        padding-bottom: var(--site-boundary-space-mobile) !important;
    }

    .home-main > .about-area-13,
    main > .service-hero + .spotless-section,
    main > .services-hero + .spotless-section,
    main > .gallery-hero + .gallery-section,
    main > .contact-hero + .contact-section,
    main > .contact-hero + .contact-services,
    main > .legal-hero + .legal-content,
    main > .page-hero + .about-intro-section,
    main > .page-hero + .about-mobile-guides {
        padding-top: var(--site-boundary-space-mobile) !important;
    }
}