/* Site-wide split-screen and tablet safeguards. */

/* Keep form labels, required markers, and controls on a consistent baseline. */
.enquiry-form label:not(.form-check),
.invoice-form label:not(.form-check) {
    display: block;
}

.enquiry-form label:not(.form-check) > span,
.invoice-form label:not(.form-check) > span {
    display: inline;
    margin-left: 3px;
}

.enquiry-form label:not(.form-check) > input,
.enquiry-form label:not(.form-check) > select,
.enquiry-form label:not(.form-check) > textarea,
.invoice-form label:not(.form-check) > input,
.invoice-form label:not(.form-check) > textarea {
    display: block;
    margin-top: 7px;
}

@media (max-width: 980px) {
    /* Compact navigation dropdown for tablets and split-screen windows. */
    .nav nav {
        top: calc(100% - 4px);
        right: 24px;
        left: auto;
        width: min(340px, calc(100vw - 32px));
        max-height: calc(100vh - 110px);
        gap: 4px;
        padding: 12px;
        overflow-y: auto;
        border: 1px solid var(--line);
        border-radius: 14px;
        box-shadow: 0 22px 55px rgba(18, 43, 87, 0.22);
    }

    .nav nav a {
        width: 100%;
        padding: 11px 13px;
        border-radius: 8px;
        line-height: 1.35;
    }

    .nav nav a:hover,
    .nav nav a.active {
        color: var(--blue);
        background: var(--pale);
    }

    .nav nav a::after {
        display: none;
    }

    /* Home */
    .split,
    /* About */
    .story-grid,
    .mission-grid,
    .why-grid,
    /* Services */
    .detail-grid,
    /* Portfolio */
    .case-grid,
    /* Process */
    .collaboration-grid,
    .faq-grid,
    /* Contact */
    .enquiry-grid,
    .visit-grid,
    .contact-faq .faq-grid,
    /* Pricing */
    .custom-grid,
    .payment-grid,
    .invoice-grid,
    .pricing-faq .faq-grid,
    /* Projects */
    .project-main,
    .roadmap-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 42px;
    }

    .mission-main {
        grid-row: auto;
    }

    .detail-row.alt .detail-visual {
        order: 2;
    }

    .detail-visual,
    .case-dashboard,
    .enquiry-form,
    .location-panel,
    .payment-card,
    .invoice-form,
    .project-visual {
        width: 100%;
        max-width: 720px;
        margin-inline: auto;
    }

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

    .workflow-step {
        grid-template-columns: 100px minmax(0, 1fr);
        gap: 35px;
    }

    .step-output {
        grid-column: 2;
    }
}

@media (max-width: 680px) {
    .nav nav {
        right: 14px;
        width: calc(100vw - 28px);
    }

    .steps,
    .workflow-step {
        grid-template-columns: minmax(0, 1fr);
    }

    .step-output {
        grid-column: auto;
    }
}