/* Sitewide header nav — Home icon always uses orientation dark (matches active-parent) */
.site-header .nav-item > a i.fa-home {
    color: #1F2A44;
}

.site-header .nav-item > a:hover i.fa-home {
    color: #abde99;
}

/* Desktop & tablet — content gutters only; header, hero, footer stay full width */

@media (min-width: 769px) {
    :root {
        --page-content-max: 1320px;
        --page-content-gutter: clamp(1.5rem, 4vw, 3rem);
    }

    .container {
        max-width: var(--page-content-max) !important;
        padding-left: var(--page-content-gutter) !important;
        padding-right: var(--page-content-gutter) !important;
        box-sizing: border-box;
    }

    .page-nav-wrapper {
        padding-left: var(--page-content-gutter) !important;
        padding-right: var(--page-content-gutter) !important;
        box-sizing: border-box;
    }

    .contact-form-container,
    .main-content-grid,
    .qa-container,
    .projects > .projects-slider-wrapper {
        max-width: var(--page-content-max) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: var(--page-content-gutter) !important;
        padding-right: var(--page-content-gutter) !important;
        box-sizing: border-box;
    }
}

@media (min-width: 1025px) {
    :root {
        --page-content-gutter: clamp(2rem, 5vw, 4rem);
    }
}