/* Site-specific overrides for Orchard's Agency theme. */
header.masthead {
    position: relative;
    display: block;
    width: 100%;
    min-height: 0;
    aspect-ratio: 3 / 2;
    padding: 0;
    background-color: #050b0f;
    background-image: url("/assets/images/workshop-header.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

    /* The artwork includes the hero copy, so avoid showing the theme copy twice. */
    header.masthead > .container {
        visibility: hidden;
    }

@media (max-width: 767.98px) {
    header.masthead {
        min-height: 0;
        background-position: center center;
    }
}

@media (prefers-reduced-data: reduce) {
    header.masthead {
        background-image: none;
    }

        header.masthead > .container {
            visibility: visible;
        }
}
/* Workshop service artwork. The Agency recipe renders these as three columns. */
#services .section-heading {
    margin-top: 10px;
}
#portfolio .section-heading {
    margin-top: 10px;
}

#team .section-heading {
    margin-top: 10px;
}

#services .row.text-center > .col-md-4 > .fa-stack {
    display: block;
    width: clamp(8.5rem, 13vw, 11rem);
    height: clamp(8.5rem, 13vw, 11rem);
    margin: 0 auto 1.25rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#services .row.text-center > .col-md-4:nth-child(1) > .fa-stack {
    background-image: url("/assets/service-icons/winch-machine.png");
}

#services .row.text-center > .col-md-4:nth-child(2) > .fa-stack {
    background-image: url("/assets/service-icons/oil-machine.png");
}

#services .row.text-center > .col-md-4:nth-child(3) > .fa-stack {
    background-image: url("/assets/service-icons/steel-rollers-fabrication.png");
}

#services .fa-stack > .fa-stack-2x,
#services .fa-stack > .fa-stack-1x {
    display: none;
}

@media (max-width: 767.98px) {
    #services .row.text-center > .col-md-4 {
        margin-bottom: 2.5rem;
    }

        #services .row.text-center > .col-md-4 > .fa-stack {
            width: 9.5rem;
            height: 9.5rem;
            margin-bottom: 1rem;
        }
}
/* Transparent brand mark displayed before the Orchard site name. */
#mainNav .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
}

    #mainNav .navbar-brand::before {
        content: "";
        display: block;
        flex: 0 0 auto;
        width: 3rem;
        height: 3rem;
        background: url("/assets/branding/three-stars-logo.png") center / contain no-repeat;
    }

@media (max-width: 575.98px) {
    #mainNav .navbar-brand {
        gap: 0.45rem;
        font-size: 0.9rem;
    }

        #mainNav .navbar-brand::before {
            width: 2.5rem;
            height: 2.5rem;
        }
}
/* Professional navigation and hero proportions. */
#mainNav {
    background: rgba(5, 11, 15, 0.94);
    box-shadow: 0 1px 0 rgba(245, 166, 35, 0.18);
    backdrop-filter: blur(12px);
}

    #mainNav .navbar-brand {
        gap: 0.8rem;
        color: #fff;
        font-size: clamp(1rem, 1.35vw, 1.3rem);
        font-weight: 700;
        letter-spacing: 0.025em;
    }

        #mainNav .navbar-brand::before {
            width: 4rem;
            height: 4rem;
        }

header.masthead {
    width: 100%;
    height: min(66.6667vw, 48rem);
    min-height: 0;
    max-height: calc(100svh - 5.3rem);
    aspect-ratio: auto;
    background-size: contain;
    background-position: center;
}

@media (min-width: 1600px) {
    header.masthead {
        height: 48rem;
    }
}

@media (max-width: 991.98px) {
    #mainNav .navbar-brand::before {
        width: 3.5rem;
        height: 3.5rem;
    }

    header.masthead {
        height: 66.6667vw;
        max-height: none;
    }
}

@media (max-width: 575.98px) {
    #mainNav {
        padding-top: 0.45rem;
        padding-bottom: 0.45rem;
    }

        #mainNav .navbar-brand {
            max-width: calc(100vw - 7rem);
            gap: 0.5rem;
            font-size: 0.82rem;
            line-height: 1.15;
            white-space: normal;
        }

            #mainNav .navbar-brand::before {
                width: 3rem;
                height: 3rem;
            }

    header.masthead {
        height: 66.6667vw;
        min-height: 15rem;
        background-size: contain;
    }
}
/* Professional live-content hero. */
header.masthead {
    display: flex;
    width: 100%;
    height: clamp(36rem, 72svh, 48rem);
    min-height: 36rem;
    max-height: 48rem;
    padding: 5.5rem 0 0;
    background-color: #050b0f;
    background-image: linear-gradient(90deg, rgba(3, 9, 15, 0.2) 0%, rgba(3, 9, 15, 0.05) 48%, rgba(3, 9, 15, 0) 72%), url("/assets/images/hero-image.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

    header.masthead > .container {
        display: flex;
        visibility: visible;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        height: 100%;
        text-align: left;
    }

    header.masthead .masthead-subheading {
        margin-bottom: 1rem;
        color: #f5a623;
        font-size: clamp(1.05rem, 1.7vw, 1.45rem);
        font-style: normal;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    header.masthead .masthead-heading {
        max-width: 48rem;
        margin-bottom: 2rem;
        color: #fff;
        font-size: clamp(2.35rem, 5vw, 4.8rem);
        line-height: 0.98;
        letter-spacing: -0.025em;
        text-shadow: 0 3px 24px rgba(0, 0, 0, 0.35);
    }

    header.masthead .btn-primary {
        padding: 1rem 1.65rem;
        border-color: #f5a623;
        background: #f5a623;
        color: #07111a;
        box-shadow: 0 10px 30px rgba(245, 166, 35, 0.22);
        font-weight: 800;
    }

        header.masthead .btn-primary:hover,
        header.masthead .btn-primary:focus {
            border-color: #ffc04d;
            background: #ffc04d;
            transform: translateY(-2px);
        }

@media (max-width: 767.98px) {
    header.masthead {
        height: min(82svh, 42rem);
        min-height: 34rem;
        max-height: 42rem;
        padding-top: 4.75rem;
        background-image: linear-gradient(90deg, rgba(3, 9, 15, 0.88) 0%, rgba(3, 9, 15, 0.62) 58%, rgba(3, 9, 15, 0.18) 100%), url("/assets/images/hero-image.png");
        background-position: 62% center;
    }

        header.masthead .masthead-heading {
            max-width: 20rem;
            font-size: clamp(2.15rem, 11vw, 3.25rem);
        }

        header.masthead .masthead-subheading {
            max-width: 18rem;
            font-size: 0.95rem;
            line-height: 1.45;
        }
}
/* Keep fixed navigation from covering section headings after anchor jumps. */
html {
    scroll-padding-top: 7.5rem;
}

section[id] {
    scroll-margin-top: 7.5rem;
}

@media (max-width: 991.98px) {
    html {
        scroll-padding-top: 6.25rem;
    }

    section[id] {
        scroll-margin-top: 6.25rem;
    }
}