:root {
    --ink: #101410;
    --ink-soft: #171d18;
    --deep-green: #19251a;
    --green: #31412d;
    --olive: #68734d;
    --olive-light: #a9ad79;

    --orange: #e85d18;
    --orange-hover: #f46a22;

    --cream: #f2efe7;
    --paper: #f8f7f3;
    --white: #ffffff;

    --text: #171a17;
    --muted: #70766e;

    --border: #dadbd4;

    --shell: 1460px;

    --shadow:
        0 18px 55px rgba(16, 20, 16, .08);
}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    color: var(--text);
    background: var(--paper);

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;
}


body.menu-open {
    overflow: hidden;
}


img {
    max-width: 100%;
    display: block;
}


button,
input,
textarea {
    font: inherit;
}


button,
a {
    -webkit-tap-highlight-color: transparent;
}


button {
    cursor: pointer;
}


a {
    color: inherit;
    text-decoration: none;
}


.shell {
    width: min(calc(100% - 48px), var(--shell));
    margin-inline: auto;
}


.site-header {
    position: sticky;
    top: 0;

    z-index: 100;

    background:
        linear-gradient(
            90deg,
            rgba(13, 20, 14, .99),
            rgba(20, 30, 21, .99)
        );

    border-bottom:
        1px solid rgba(255, 255, 255, .08);

    backdrop-filter: blur(12px);
}


.header-inner {
    height: 78px;

    display: flex;
    align-items: center;

    gap: 30px;
}


.brand {
    width: 180px;
    flex: 0 0 auto;
}


.brand img {
    width: 156px;
    height: 64px;

    object-fit: contain;
}


.desktop-nav {
    margin-left: auto;

    display: flex;
    align-items: stretch;

    height: 100%;

    gap: 8px;
}


.desktop-nav a {
    position: relative;

    min-width: 94px;

    display: grid;
    place-items: center;

    padding-inline: 12px;

    color: rgba(255,255,255,.78);

    font-size: 13px;
    font-weight: 700;
}


.desktop-nav a:hover,
.desktop-nav a.active {
    color: white;
}


.desktop-nav a.active::after,
.desktop-nav a:hover::after {
    content: "";

    position: absolute;

    left: 14px;
    right: 14px;
    bottom: 0;

    height: 2px;

    background: var(--olive-light);
}


.header-actions {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-left: 20px;
}


.search-toggle,
.menu-toggle {
    border: 0;
    background: transparent;

    color: white;
}


.search-toggle {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    font-size: 28px;
}


.lang {
    color: white;

    font-size: 12px;
    font-weight: 800;
}


.header-contact {
    min-height: 44px;

    display: inline-flex;
    align-items: center;

    padding: 0 21px;

    border-radius: 4px;

    color: white;
    background: var(--orange);

    font-size: 13px;
    font-weight: 800;
}


.header-contact:hover {
    background: var(--orange-hover);
}


.menu-toggle {
    display: none;

    width: 42px;
}


.menu-toggle span {
    display: block;

    width: 26px;
    height: 2px;

    margin: 6px auto;

    background: white;
}


.mobile-nav {
    display: none;
}


.btn {
    min-height: 50px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    padding: 0 24px;

    border-radius: 4px;
    border: 0;

    font-weight: 850;

    transition:
        transform .15s ease,
        background .15s ease;
}


.btn:hover {
    transform: translateY(-1px);
}


.btn-orange {
    background: var(--orange);
    color: white;
}


.btn-orange:hover {
    background: var(--orange-hover);
}


.btn-outline {
    color: white;

    border:
        1px solid rgba(255,255,255,.62);

    background:
        rgba(0,0,0,.15);
}


.btn-green {
    color: white;
    background: var(--deep-green);
}


.section-head {
    margin-bottom: 26px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;
}


.section-label {
    display: block;

    margin-bottom: 8px;

    color: var(--olive);

    font-size: 11px;
    line-height: 1;

    font-weight: 900;

    letter-spacing: .18em;
    text-transform: uppercase;
}


.section-head h2 {
    margin: 0;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Arial,
        sans-serif;

    font-size: clamp(30px, 3vw, 46px);
    line-height: .95;

    letter-spacing: -.025em;

    text-transform: uppercase;
}


.section-link {
    color: var(--orange);

    font-size: 13px;
    font-weight: 850;
}


.site-footer {
    padding-top: 54px;

    color: #d9ded9;

    background:
        linear-gradient(
            100deg,
            #0e1510,
            #172218
        );

    border-top:
        1px solid rgba(255,255,255,.08);
}


.footer-main {
    display: grid;
    grid-template-columns:
        minmax(280px, 2fr)
        repeat(3, minmax(150px, 1fr));

    gap: 50px;
}


.footer-identity img {
    width: 145px;

    margin-bottom: 17px;
}


.footer-identity p {
    max-width: 500px;

    margin: 0;

    color: #909b92;

    line-height: 1.65;

    font-size: 13px;
}


.footer-column {
    display: flex;
    flex-direction: column;

    gap: 10px;

    font-size: 13px;
}


.footer-column strong {
    margin-bottom: 6px;

    color: white;
}


.footer-column a,
.footer-column span {
    color: #aab2aa;
}


.footer-bottom {
    margin-top: 45px;

    min-height: 70px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    border-top:
        1px solid rgba(255,255,255,.08);

    color: #788178;

    font-size: 11px;
}


.mobile-sticky {
    display: none;
}

/* ==========================================
   P004C — FIX STRETCHED / SQUASHED LOGOS
   ========================================== */

.site-logo,
.header-logo,
.footer-logo,
.footer-brand,
.brand-logo {
    display: inline-flex;
    align-items: center;
}

.site-logo img,
.header-logo img,
.footer-logo img,
.footer-brand img,
.brand-logo img,
img[src*="logo-armour-motors"],
img[src*="logo"] {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    aspect-ratio: auto !important;
    display: block !important;
}

/* header logo */
.site-logo img,
.header-logo img {
    max-height: 68px !important;
}

/* footer logo */
.footer-logo img,
.footer-brand img {
    max-height: 92px !important;
    width: auto !important;
}

/* if footer block is narrow, don't squash logo */
.footer-brand,
.footer-logo {
    width: auto !important;
    max-width: 100% !important;
}

/* ==========================================
   P004D — FOOTER LOGO SIZE FIX ONLY
   Keep header logo unchanged
   ========================================== */

.footer-logo img,
.footer-brand img,
footer .footer-logo img,
footer .footer-brand img,
footer img[src*="logo-armour-motors"] {
    width: 220px !important;
    max-width: 220px !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
}

@media (max-width: 768px) {
    .footer-logo img,
    .footer-brand img,
    footer .footer-logo img,
    footer .footer-brand img,
    footer img[src*="logo-armour-motors"] {
        width: 160px !important;
        max-width: 160px !important;
        height: auto !important;
    }
}


/* ==========================================================
   P004E — RESPONSIVE ARMOUR MOTORS LOGOS
   Exact selectors only.
   ========================================================== */


/* ---------- HEADER ---------- */

.site-header .brand {
    flex: 0 0 auto !important;

    width: clamp(
        112px,
        11vw,
        165px
    ) !important;

    max-width: 38vw !important;

    overflow: visible !important;
}


.site-header .brand img {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
    max-height: none !important;

    aspect-ratio: auto !important;
    object-fit: contain !important;
}


/* ---------- FOOTER ---------- */

.site-footer .footer-identity {
    min-width: 0 !important;
}


.site-footer .footer-identity img {
    display: block !important;

    width: clamp(
        145px,
        14vw,
        205px
    ) !important;

    max-width: 100% !important;

    height: auto !important;
    max-height: none !important;

    aspect-ratio: auto !important;
    object-fit: contain !important;

    margin: 0 0 18px 0 !important;
}


/* ---------- TABLET ---------- */

@media (max-width: 900px) {

    .site-header .brand {
        width: clamp(
            110px,
            20vw,
            145px
        ) !important;

        max-width: 42vw !important;
    }


    .site-footer .footer-identity img {
        width: clamp(
            140px,
            28vw,
            185px
        ) !important;
    }

}


/* ---------- MOBILE ---------- */

@media (max-width: 600px) {

    .site-header .brand {
        width: min(
            128px,
            36vw
        ) !important;

        max-width: 36vw !important;
    }


    .site-header .brand img {
        width: 100% !important;
        height: auto !important;
    }


    .site-footer .footer-identity img {
        width: min(
            165px,
            46vw
        ) !important;

        max-width: 46vw !important;

        height: auto !important;
    }

}


/* ---------- VERY SMALL PHONES ---------- */

@media (max-width: 380px) {

    .site-header .brand {
        width: min(
            108px,
            34vw
        ) !important;
    }


    .site-footer .footer-identity img {
        width: min(
            145px,
            44vw
        ) !important;
    }

}