/* Shared responsive and layout quality layer */
html {
    min-width: 320px;
    overflow-x: clip;
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    overflow-x: clip;
}

img,
picture,
video,
canvas,
svg {
    max-width: 100%;
}

img {
    display: block;
    width: 100%;
    height: auto;
}

button,
a,
input,
textarea,
select {
    font: inherit;
}

h1,
h2,
h3,
h4,
p,
li,
a,
span {
    overflow-wrap: break-word;
}

.hero,
.main-nav {
    width: 100%;
}

/* Home */
.home-page .hero {
    width: 100%;
    max-width: var(--site-max-width, 1400px);
    min-height: auto;
    margin: 0 auto;
}

.home-page .hero-content,
.home-page .hero-image-wrapper,
.home-page .meet-content,
.home-page .meet-image {
    min-width: 0;
}

.home-page .hero-image-wrapper img {
    max-width: 560px;
    margin-inline: auto;
    object-fit: contain;
}

.home-page .meet-image img {
    max-width: 560px;
    margin-inline: auto;
    object-fit: contain;
}

.home-page .service-card,
.home-page .step-card,
.home-page .assess-card,
.home-page .industry-card {
    min-width: 0;
    height: 100%;
}

.home-page .services-grid,
.home-page .assess-grid {
    align-items: stretch;
}

.services-page .hero {
    min-height: auto;
}

/* .services-page .hero-content,
.services-page .hero-graphic,
.services-page .block-content,
.services-page .block-image {
    min-width: 0;
} */

.services-page .hero-graphic img,
.services-page .block-image img {
    max-height: auto;
}

.services-page .service-block {
    align-items: center;
}

.services-page .icon-item,
.services-page .outcomes-list>div {
    min-width: 0;
}

.services-page .btn,
.services-page .cta-actions a {
    justify-content: center;
    text-align: center;
    white-space: normal;
}

.industry-page .hero-content,
.industry-page .hero-visual,
.industry-page .card-content,
.industry-page .card-info,
.industry-page .card-features {
    min-width: 0;
}

.industry-page .hero-visual img {
    width: min(100%, 520px);
    
    object-fit: contain;
}

.industry-page .card-image-mock img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.industry-page .feature-item {
    min-width: 0;
}

.industry-page .cta-buttons .btn {
    justify-content: center;
    text-align: center;
    white-space: normal;
}

.pricing-page .pricing-grid {
    align-items: stretch;
}

.pricing-page .pricing-card {
    min-width: 0;
    height: 100%;
}

.pricing-page .card-features li,
.pricing-page .monitor-left,
.pricing-page .monitor-content,
.pricing-page .feature-item {
    min-width: 0;
}

.pricing-page .pricing-card .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    white-space: normal;
}

@media (max-width: 1120px) {
    .home-page .container {
        padding-block: 64px;
    }

    .home-page .hero {
        /* Fix: Increase top padding to prevent fixed navbar from hiding the heading */
        padding: 120px 32px 56px;
    }

    .home-page .hero-content h1 {
        font-size: clamp(2.5rem, 6vw, 3.25rem);
    }

    .home-page .workflow-container {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 20px;
    }

    .home-page .workflow-arrow {
        display: none;
    }

    .home-page .step-card {
        width: auto;
        min-width: 0;
    }

    .home-page .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-page .assess-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .services-page .hero,
    .services-page .service-block,
    .services-page .service-block.reverse {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 40px;
    }

    .services-page .icon-grid,
    .services-page .icon-grid[style] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .industry-page .hero {
        gap: 40px;
    }

    .industry-page .industry-card {
        display: grid;
        grid-template-columns: minmax(220px, 32%) minmax(0, 1fr);
    }

    .industry-page .card-image-mock {
        width: 100%;
        height: 100%;
        min-height: 250px;
    }

    .industry-page .card-content {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
    }

    .industry-page .card-features {
        grid-column: 2;
    }

    .pricing-page .pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pricing-page .pricing-card.popular {
        transform: none;
    }

    .pricing-page .features-strip {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px;
    }

    .pricing-page .feature-item {
        min-width: 0;
    }

}

@media (max-width: 820px) {
    .home-page .container {
        padding: 52px 20px;
    }

    .home-page .hero {
        flex-direction: column;
        gap: 40px;
        /* Fix: Maintain adequate top padding on tablet */
        padding: 110px 20px 48px;
        text-align: center;
    }

    .home-page .hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 680px;
    }

    .home-page .hero-content p {
        max-width: 620px;
    }

    .home-page .hero-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }

    .home-page .cards-container {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
    }

    .home-page .cards-container .card {
        width: auto;
        max-width: none;
    }

    .home-page .cards-container .card-blue {
        grid-column: 1 / -1;
        width: min(100%, 400px);
        justify-self: center;
    }

    .home-page .landscape-arrow {
        display: none;
    }

    .home-page .meet-section {
        gap: 36px;
    }

    .home-page .assess-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .services-page .hero,
    .services-page .service-block,
    .services-page .service-block.reverse {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .services-page .service-block.reverse .block-content {
        grid-row: auto;
    }

    .services-page .service-block.reverse .block-image {
        order: -1;
    }

    .industry-page .hero {
        flex-direction: column;
        padding-top: 110px;
        padding-bottom: 56px;
        text-align: center;
    }

    .industry-page .hero p {
        margin-inline: auto;
    }

    .industry-page .stats {
        justify-content: center;
        flex-wrap: wrap;
    }

    .industry-page .hero-visual {
        width: 100%;
        height: auto;
    }

    .industry-page .industry-card {
        grid-template-columns: minmax(180px, 34%) minmax(0, 1fr);
    }

    .industry-page .timeline {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .industry-page .timeline-item {
        min-width: 0;
    }

    .industry-page .outcomes-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .industry-page .outcome-item {
        min-width: 0;
    }

    .pricing-page .monitor-card {
        align-items: stretch;
    }

    .pricing-page .features-strip {
        padding: 32px;
    }
}

@media (max-width: 600px) {
    .home-page .container {
        padding: 44px 16px;
    }

    .home-page .hero {
        /* Fix: Maintain top padding for mobile navbar clearance */
        padding: 110px 16px 40px;
    }

    .home-page .hero-content h1 {
        font-size: clamp(2rem, 10vw, 2.6rem);
    }

    .home-page .hero-buttons {
        width: 100%;
    }

    .home-page .hero-buttons button,
    .home-page .btn-purple {
        width: 100%;
        max-width: 100%;
        justify-content: center;
        text-align: center;
    }

    .home-page .landscape-section-wrapper {
        padding-inline: 16px;
    }

    .home-page .landscape-section {
        gap: 32px;
    }

    .home-page .cards-container,
    .home-page .workflow-container,
    .home-page .services-grid,
    .home-page .assess-grid {
        grid-template-columns: 1fr;
    }

    .home-page .cards-container .card-blue {
        grid-column: auto;
        width: 100%;
    }

    .home-page .card,
    .home-page .step-card,
    .home-page .service-card,
    .home-page .assess-card {
        width: 100%;
        max-width: none;
        min-width: 0;
        padding: 24px 20px;
    }

    .home-page .industries-flex {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-page .industry-card {
        width: 100%;
    }

    .services-page .hero {
        padding-top: 110px;
        padding-bottom: 48px;
    }

    .services-page .hero-content h1 {
        font-size: clamp(2rem, 11vw, 3rem);
    }

    .services-page .hero-content .text-gradient {
        font-size: clamp(1.55rem, 7vw, 2.2rem) !important;
    }

    .services-page .service-block {
        padding-block: 40px;
    }

    .services-page .block-image {
        min-height: auto;
        height: auto;
    }

    .services-page .block-content>div:first-child {
        align-items: flex-start !important;
    }

    .services-page .icon-grid,
    .services-page .icon-grid[style] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .services-page .outcomes-list {
        grid-template-columns: 1fr !important;
    }

    .industry-page .hero {
        padding-top: 110px;
        padding-bottom: 44px;
    }

    .industry-page .hero h1 {
        font-size: clamp(2rem, 11vw, 3rem);
    }

    .industry-page .stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
        width: 100%;
    }

    .industry-page .hero-visual {
        min-height: 220px;
    }

    .industry-page .industry-card {
        grid-template-columns: 1fr;
    }

    .industry-page .card-image-mock {
        min-height: 210px;
        border-right: 0;
        border-bottom: 1px solid var(--border-color);
    }

    .industry-page .card-content {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 24px 20px;
    }

    .industry-page .card-features {
        grid-column: 1 / -1;
    }

    .industry-page .timeline,
    .industry-page .outcomes-grid {
        grid-template-columns: 1fr;
    }

    .pricing-page .page-header {
        padding-top: 110px;
        padding-bottom: 32px;
    }

    .pricing-page .page-header h1 {
        font-size: clamp(2rem, 10vw, 3rem);
    }

    .pricing-page .pricing-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .pricing-page .pricing-card {
        padding: 28px 20px;
    }

    .pricing-page .monitor-card {
        padding: 28px 20px;
    }

    .pricing-page .monitor-left {
        align-items: flex-start;
    }

    .pricing-page .features-strip {
        grid-template-columns: 1fr;
        padding: 28px 20px;
    }

}

@media (max-width: 380px) {

    .home-page .industries-flex,
    .industry-page .stats {
        grid-template-columns: 1fr;
    }

    .home-page .section-header h2,
    .industry-page .section-header h2,
    .services-page .core-header h2 {
        font-size: 1.75rem;
    }

}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/*=========================== about */

/* ==========================================================================
   ABOUT US RESPONSIVE FIXES
   ========================================================================== */

@media (max-width: 1200px) {
    .why-cards, .leader-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .why-grid, .perspective-grid, .future-building {
        grid-template-columns: 1fr;
    }
    
    .about-hero-graphic {
        opacity: 0.3;
        right: -30%;
    }

    .beliefs-grid, .work-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .future-timeline {
        margin-top: 40px;
        flex-wrap: wrap;
        gap: 20px;
    }

    .t-connector {
        display: none;
    }
}

@media (max-width: 768px) {
    .beliefs-grid, .work-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .perspective-list {
        grid-template-columns: 1fr;
    }

    .future-timeline {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }
    
    .t-step {
        flex-direction: row;
        text-align: left;
        gap: 20px;
    }
    
    .t-step i {
        margin-bottom: 0;
    }
}

@media (max-width: 480px) {
    .why-cards, .leader-grid, .beliefs-grid, .work-grid {
        grid-template-columns: 1fr;
    }
}