@media (max-width: 980px) {
    .main-nav,
    .header-btn {
        display: none;
    }

    .intro-grid,
    .diagonal-grid {
        grid-template-columns: 1fr;
    }

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

    .image-panel {
        min-height: 420px;
        transform: rotate(0);
    }

    .image-panel-inner {
        min-height: 380px;
    }
}

@media (max-width: 640px) {
    .container {
        padding: 0 18px;
    }

    .site-header .container {
        height: 72px;
    }

    .hero {
        min-height: 92vh;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-primary,
    .btn-secondary {
        text-align: center;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .service-card {
        min-height: auto;
    }

    .service-card span {
        margin-bottom: 48px;
    }

    .intro-stats {
        transform: none;
    }

    .cta-box {
        border-radius: 30px;
    }
}

@media (max-width: 640px) {

    .intro-section,
    .services-section,
    .diagonal-section,
    .cta-section {
        margin-top: 0;
        border-radius: 0;
    }

    .page-glow {
        opacity: .28;
    }

    .hero h1 {
        line-height: .95;
    }

    .service-card,
    .stat-card,
    .cta-box,
    .diagonal-card {
        border-radius: 24px;
    }

    .services-section,
    .diagonal-section,
    .cta-section {
        border-top-left-radius: 32px;
        border-top-right-radius: 32px;
    }

}

@media (max-width: 640px) {

    .before-after-slider {
        border-radius: 28px;
    }

    .slider-button {
        width: 62px;
        height: 62px;

        font-size: 1.2rem;
    }

    .label-before,
    .label-after {
        top: 16px;

        padding: 8px 14px;

        font-size: .8rem;
    }

}

@media (max-width: 980px) {

    .process-section {
        height: auto;
        padding: 100px 0;
    }

    .process-pin {
        position: relative;
        height: auto;
    }

    .process-track {
        flex-direction: column;

        width: 100%;

        padding:
            0 24px;
    }

    .process-card {
        width: 100%;

        min-height: auto;
    }

    .process-card:nth-child(2),
    .process-card:nth-child(3),
    .process-card:nth-child(4) {
        transform: none;
    }

}

@media (max-width: 980px) {

    .hero-content {
        grid-template-columns: 1fr;
    }

    .hero-floating {
        display: none;
    }

}

@media (max-width: 640px) {

    .hero {
        min-height: 92vh;
    }

    .hero-title {
        line-height: .9;
    }

    .hero-badge {
        font-size: .72rem;
    }

}