@media (max-width: 1080px) {
    .card-grid-4,
    .detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero-grid,
    .split-layout,
    .contact-layout {
        grid-template-columns: 1fr;
    }

    .hero-grid {
        min-height: auto;
    }

    .hero-copy h1 {
        max-width: none;
    }

    .hero-panel {
        justify-self: center;
        width: 100%;
        max-width: 640px;
    }
}

@media (max-width: 860px) {
    html,
    body {
        overflow-x: hidden;
    }

    .header-inner {
        min-height: 72px;
    }

    .logo-text {
        font-size: 0.95rem;
    }

    .site-logo-image {
        width: 52px;
        height: 40px;
    }

    .site-nav {
        position: fixed;
        top: 72px;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.15rem;
        max-height: calc(100vh - 72px);
        overflow-y: auto;
        padding: 0.75rem 1rem 1rem;
        background: var(--sfs-blue-gradient);
        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
        box-shadow: 0 18px 40px rgba(15, 43, 58, 0.22);
        z-index: 1100;
    }

        .site-nav.is-open {
            display: flex;
        }

        .site-nav a,
        .nav-dropdown-toggle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 0.78rem 0.85rem;
            border-radius: 0.55rem;
        }

    .nav-dropdown {
        width: 100%;
        display: block;
    }

    .nav-dropdown-menu {
        position: static;
        min-width: 100%;
        border: 1px solid #c7d6e4;
        border-radius: 0.7rem;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 12px 30px rgba(18, 32, 47, 0.08);
        padding: 0.45rem;
        background: linear-gradient(180deg, #eef5fb 0%, #e3eef7 40%, #d6e6f4 100%);
    }

        .nav-dropdown-menu a {
            padding: 0.72rem 0.9rem;
            border-bottom: 1px solid rgba(18, 32, 47, 0.10);
            color: var(--sfs-blue);
            white-space: normal;
            border-radius: 0.45rem;
        }
    .site-nav .nav-dropdown-menu a[aria-current="page"] {
        background: rgba(18, 56, 95, 0.10);
        color: var(--sfs-blue);
        font-weight: 800;
        box-shadow: inset 4px 0 0 var(--sfs-blue);
    }

    .nav-toggle {
        display: inline-block;
    }

    .header-actions .btn {
        display: none;
    }

    .hero {
        min-height: auto;
        padding-top: 2rem;
        padding-bottom: 3rem;
    }

    .hero-grid {
        gap: 1.5rem;
    }

    .cinematic-media img {
        object-position: 70% top;
    }

    .cinematic-overlay-home {
        background: linear-gradient( to bottom, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.62) 42%, rgba(255,255,255,0.28) 78%, rgba(255,255,255,0.08) 100% );
    }

    .hero-copy h1 {
        text-shadow: 0 1px 0 rgba(255,255,255,0.30);
    }

    .hero-text {
        color: #18344f;
    }

    .hero-panel {
        padding: 1.15rem;
    }

    .hero-panel-metrics {
        grid-template-columns: 1fr;
    }

    .process-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .process-step {
        width: 100%;
        white-space: normal;
        min-height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .process-step:last-child {
            grid-column: 1 / -1;
            justify-self: center;
            max-width: calc(50% - 0.375rem);
        }

    .card-grid-3,
    .card-grid-2 {
        grid-template-columns: 1fr;
        gap: 0.9rem;
    }

    #products .card-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.85rem;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-logo-image {
        height: 90px;
        width: auto;
    }

    .footer-bottom {
        text-align: center;
    }
}
