/* Responsive Global Fixes for Tablet and Mobile (<=1024px) */
@media (max-width: 1024px) {

    /* Hero Section */
    .main-hero__content {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .main-hero__content>p,
    .main-hero__content h1,
    .main-hero__content h2,
    .main-hero__content h3,
    .main-hero__eyebrow {
        text-align: center !important;
    }

    .main-hero__actions {
        justify-content: center !important;
        width: 100% !important;
    }

    /* Visual Wrappers (Images/Illustrations) */
    .main-hero__visual,
    .main-section__media,
    .main-section__visual {
        margin-top: 2rem !important;
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .main-hero__panel,
    .main-hero__panel img {
        margin: 0 auto !important;
    }

    /* Section Headings and Content */
    .main-heading {
        text-align: center !important;
        margin-inline: auto !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 100% !important;
    }

    .main-heading h1,
    .main-heading h2,
    .main-heading h3 {
        text-align: center !important;
    }

    .main-section__eyebrow,
    .main-section__intro,
    .main-section__intro-subtitle,
    .main-section__content {
        text-align: center !important;
        margin-inline: auto !important;
    }

    .main-section__intro p,
    .main-section__intro-subtitle p,
    .main-section__content p {
        text-align: center !important;
    }

    /* Two-Column Shell Layouts */
    /* Force grid wrappers to single column */
    .main-shell,
    .main-inner-page-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* In case elements are positioned via grid row/col, reset them */
    .main-shell>* {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }

    /* Add top margin to the second (usually media) item if it stacked */
    .main-shell>*:nth-child(2) {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    /* CTA Sections */
    .main-contact-cta__inner {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .main-contact-cta__inner>div {
        text-align: center !important;
        align-items: center !important;
    }

    .main-contact-cta__button {
        margin-top: 1.5rem !important;
    }

    /* Cards Grid (Tablet) */
    .main-card-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }

    .main-card-grid>*:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .main-bullet-grid,
    .main-feature-list,
    .main-service-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Ensure card content is centered */
    .main-card-grid>article,
    .main-card-grid>div {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .main-card-grid>article>p,
    .main-card-grid>div>p {
        text-align: center !important;
    }

}

/* Mobile (<=767px) */
@media (max-width: 767px) {

    /* Cards to 1 column on Mobile */
    .main-card-grid,
    .main-bullet-grid,
    .main-feature-list,
    .main-service-list {
        grid-template-columns: 1fr !important;
    }

    /* Prevent massive headings on mobile if not already handled */
    .main-heading h2 {
        font-size: clamp(1.75rem, 6vw, 2.2rem) !important;
    }

    .main-hero__content h1 {
        font-size: clamp(2rem, 8vw, 2.5rem) !important;
    }
        .main-shell>*:last-child:nth-child(odd),
    .main-inner-page-grid>*:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

/* Lists and Feature Points logic (Exception to centering) */
@media (max-width: 1024px) {

    /* Feature lists must remain left-aligned for readability */
    .main-bullet-grid,
    .main-feature-list,
    .main-service-list {
        text-align: left !important;
    }

    .main-bullet-grid li,
    .main-feature-list li,
    .main-service-list li {
        text-align: left !important;
        justify-content: flex-start !important;
    }

    .main-bullet-grid li span,
    .main-feature-list li span,
    .main-service-list li span {
        text-align: left !important;
    }
}