/* ==========================================================================
   Font Awesome webfont compatibility                    GENERATED - see below

   In SVG+JS mode Font Awesome replaces <i class="fa-..."> with an <svg>, so
   every icon rule in this stylesheet targets `svg`. In webfont mode the element
   stays an <i>, none of those rules match, and icons lose their colour, size and
   position. These are the same rules retargeted at <i>.

   BOX MODEL - the important part. Font Awesome's <svg> renders as content-box,
   so width and padding ADD: 18px + 11px + 11px = a 40px circle. An <i> inherits
   this theme's global border-box (style.css:37), where padding is subtracted
   instead, collapsing the same rule to 22px. Every sized rule below therefore
   forces content-box. Measured on both environments 2026-08-26:

       live  (svg)  box 40x40  content-box
       staging (i)  box 22x22  border-box     <- the bug

   GLYPH SIZE. A glyph at font-size 18px measures 18px tall - exactly 1em, the
   same as the SVG. So --fa-glyph-scale defaults to 1 and should not normally
   need changing. It exists as a single knob if a particular icon still reads
   small once the box model is right.
   ========================================================================== */

:root {
    --fa-glyph-scale: 1;   /* icons inside a padded box (carousel buttons) */
    --fa-nudge-y: 1px;     /* centring nudge, BORDERED circles only          */
    --fa-icon-gap: 0.6rem; /* gap between a nav icon and its label           */
    --fa-btn-gap: -1rem;   /* button arrow: negative pulls it toward the word */
}

/* --------------------------------------------------------------------------
   Per-icon aspect correction.

   An <svg> with width/height scales its artwork to FIT that square, so a wide
   icon ends up shorter than the box. A glyph is always ~1em tall. The
   correction is therefore a property of the ICON, not of the rule:

       scale = 1 / max(1, glyph advance width in em)

   Read from the real font metrics (fa-solid-900.woff2, fa-brands-400.woff2)
   via fontTools, and confirmed against measurements taken on production:
     paintbrush 27px, sign-hanging 30px, sun 28px, truck-fast 23px in a 30px box.

   Icons not listed default to 1 via var(--fa-aspect, 1) — correct for any
   icon that is square, which is most of them.
   -------------------------------------------------------------------------- */
i.fa-arrow-left-long { --fa-aspect: 0.8889; }
i.fa-arrow-right-long { --fa-aspect: 0.8889; }
i.fa-cart-shopping { --fa-aspect: 0.8; }
i.fa-paintbrush { --fa-aspect: 0.8889; }
i.fa-star { --fa-aspect: 0.8889; }
i.fa-sun { --fa-aspect: 0.8889; }
i.fa-truck-fast { --fa-aspect: 0.8; }
i.fa-truck-medical { --fa-aspect: 0.8889; }
i.fa-youtube { --fa-aspect: 0.8889; }

/* Icons with no explicit rule of their own were sized by Font Awesome's
   .svg-inline--fa { height: 1em }. A glyph is already 1em tall, so this only
   pins line-height and baseline alignment to match. */
i[class^="fa-"],
i[class*=" fa-"] {
    display: inline-block;
    height: 1em;
    line-height: 1;
    vertical-align: -0.125em;
    overflow: visible;
}

.nav-primary .menu > .menu-item a > i {
    display: none;
}

.nav-primary .menu > .menu-item > a .chevron-icon > i, .nav-primary .menu > .menu-item > p .chevron-icon > i {
    box-sizing: content-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    width: auto;
    margin: 0;
}

.sub-menu-toggle i {
    color: #000;
}

.search-widget .submit-container i {
    box-sizing: content-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    width: 1.6rem;
    height: 1.6rem;
    font-size: calc(1.6rem * var(--fa-aspect, 1) * var(--fa-glyph-scale));
    line-height: 1;
}

.custom-social--link i {
    box-sizing: content-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #222;
    width: 2.4rem;
    height: 2.4rem;
    transition: 0.25s ease-in-out all;
    font-size: calc(2.4rem * var(--fa-aspect, 1) * var(--fa-glyph-scale));
    line-height: 1;
}

.custom-social--link:hover i {
    color: #555;
}

.home-carousel .swiper-button-prev i, .home-carousel .swiper-button-next i {
    box-sizing: content-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    padding: 11px;
    font-size: calc(18px * var(--fa-aspect, 1) * var(--fa-glyph-scale));
    line-height: 1;
}

.fp4-benefits i, .benefits-section--items i {
    box-sizing: content-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--shieldco-primary);
    width: 3rem;
    height: 3rem;
    font-size: calc(3rem * var(--fa-aspect, 1) * var(--fa-glyph-scale));
    line-height: 1;
}

.roadmap-item.placeholder i {
    box-sizing: content-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #d7c19b;
    width: 50%;
    height: 50%;
    font-size: calc(50% * var(--fa-aspect, 1) * var(--fa-glyph-scale));
    line-height: 1;
}

.reviews-slider .testimonial-stars i {
    box-sizing: content-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #edb25e;
    width: 20px;
    height: 20px;
    font-size: calc(20px * var(--fa-aspect, 1) * var(--fa-glyph-scale));
    line-height: 1;
}

.reviews-slider .swiper-button-prev i, .reviews-slider .swiper-button-next i {
    box-sizing: content-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--shieldco-black);
    width: 2rem;
    height: 2rem;
    padding: 1.1rem;
    border: 1px solid var(--shieldco-black);
    border-radius: 50%;
    transition: 0.25s ease-in-out all;
    font-size: calc(2rem * var(--fa-aspect, 1) * var(--fa-glyph-scale));
    line-height: 1;
}

.reviews-slider .swiper-button-prev i:hover, .reviews-slider .swiper-button-next i:hover {
    color: var(--shieldco-dark);
    border-color: var(--shieldco-dark);
}

.bottom-page-cta .custom-social--link i {
    box-sizing: content-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    width: 4rem;
    height: 4rem;
    transition: none;
    font-size: calc(4rem * var(--fa-aspect, 1) * var(--fa-glyph-scale));
    line-height: 1;
}

.site-footer .custom-socials i {
    box-sizing: content-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    width: 2rem;
    height: 2rem;
    font-size: calc(2rem * var(--fa-aspect, 1) * var(--fa-glyph-scale));
    line-height: 1;
}

.site-footer .footer-info a:hover, .site-footer .menu-widget .menu .menu-item a:hover, .site-footer .custom-social--link:hover p, .site-footer .custom-social--link:hover i {
    color: var(--shieldco-primary);
}

.product-faqs .accordion-item h3 button i {
    box-sizing: content-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    transition: 0.5s ease-in-out all;
    font-size: calc(1.8rem * var(--fa-aspect, 1) * var(--fa-glyph-scale));
    line-height: 1;
}

.product-faqs .accordion-item h3 button:not(.collapsed) i {
    transform: rotate(-90deg);
}

.blog-pagination ul li a i {
    box-sizing: content-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    font-size: calc(1.4rem * var(--fa-aspect, 1) * var(--fa-glyph-scale));
    line-height: 1;
}

.single-post .header-section .entry-meta--inner i {
    filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.3));
}

.contact-block .address-cta-block i, .contact-block .phone-number-block i, .contact-block .email-cta-block i {
    box-sizing: content-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin: 0.4rem 0 0;
    font-size: calc(2rem * var(--fa-aspect, 1) * var(--fa-glyph-scale));
    line-height: 1;
}

.contact-block .phone-number-block a:hover, .contact-block .email-cta-block a:hover, .contact-block .custom-social--link:hover, .contact-block .custom-social--link:hover i {
    color: var(--shieldco-dark);
    opacity: 1;
}

.gallery-slider--main .swiper-button-prev i, .gallery-slider--main .swiper-button-next i {
    box-sizing: content-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--shieldco-black);
    width: 2.4rem;
    height: 2.4rem;
    padding: 1.05rem;
    border: 1.5px solid var(--shieldco-black);
    border-radius: 50%;
    transition: 0.25s ease-in-out all;
    font-size: calc(2.4rem * var(--fa-aspect, 1) * var(--fa-glyph-scale));
    line-height: 1;
}

.gallery-slider--main .swiper-button-prev i:hover, .gallery-slider--main .swiper-button-next i:hover {
    color: var(--shieldco-dark);
    border-color: var(--shieldco-dark);
}

.founder-section--headshot .custom-button a.button i {
    filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.3));
}

.location-benefits i {
    font-size: 7rem;
}

.youtube-lightbox--icon i {
    box-sizing: content-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 25%;
    height: auto;
    color: #fff;
    filter: drop-shadow(2px 3px 7px rgba(0, 0, 0, 0.5));
    transition: 0.25s ease-in-out all;
    font-size: calc(auto * var(--fa-aspect, 1) * var(--fa-glyph-scale));
    line-height: 1;
}

.youtube-lightbox:hover .youtube-lightbox--icon i {
    filter: drop-shadow(2px 3px 5px rgba(0, 0, 0, 0.2));
}

.modal[id*="shieldCoVideo"] .modal-header .btn-close i {
    box-sizing: content-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    color: #fff;
    opacity: 0.8;
    transition: 0.25s ease-in-out opacity;
    font-size: calc(100% * var(--fa-aspect, 1) * var(--fa-glyph-scale));
    line-height: 1;
}

.modal[id*="shieldCoVideo"] .modal-header .btn-close:hover i {
    opacity: 1;
}

@media (max-width: 1023px) {
    .nav-primary ul:not(.sub-menu) .menu-item.menu-item-has-children a i {
        display: none;
    }

    .sub-menu-toggle i {
        box-sizing: content-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        width: 18px;
        height: 18px;
        font-size: calc(18px * var(--fa-aspect, 1) * var(--fa-glyph-scale));
        line-height: 1;
    }

}

@media (min-width: 1024px) {
    .nav-primary .menu > .menu-item > a .chevron-icon > i, .nav-primary .menu > .menu-item > p .chevron-icon > i {
        font-size: min(1.5rem, 1.1vw);
    }

    .mega-menu-wrap--cta-tagline p i {
        box-sizing: content-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.6rem;
        height: 1.6rem;
        font-size: calc(1.6rem * var(--fa-aspect, 1) * var(--fa-glyph-scale));
        line-height: 1;
    }

}

/* END Font Awesome webfont compatibility */

/* ==========================================================================
   MANUAL OVERRIDES - safe to hand-edit, and preserved when regenerating.
   Each entry records the visual symptom it fixes.
   ========================================================================== */


/* Symptom: the header cart and account icons sit low and to the right.
   FIRST ATTEMPT WAS WRONG: setting display:flex on .custom-icon shrank the
   wrapper from 18x18 to 18x14, because flex sizes to content and the icon fell
   back to the wrapper's min-height:14px. Measured 2026-08-26.
   The wrapper is fine as display:block; the fix belongs on the icon, which is
   handled by the global rule above reproducing Font Awesome's own SVG box
   (display:inline-block; height:1em; vertical-align:-.125em). */

/* Symptom: cart and account icons sit too close to "My Cart" / "My Account".
   Same cause as the dropdown carets: the <svg> was wider than the glyph's
   advance width, so it carried the gap itself. Restore it explicitly. */
.nav-top .menu > .menu-item > a .custom-icon,
.nav-primary .menu > .menu-item > a .custom-icon {
    margin-right: var(--fa-icon-gap);
}

/* Symptom: the dropdown carets sit too close to "Products", "Services" etc.
   Cause: the old rule used `width:auto` on the <svg>, whose intrinsic width was
   wider than the caret glyph's advance width, so it carried its own spacing.
   Restore that gap explicitly. */
.nav-primary .menu > .menu-item > a .chevron-icon > i,
.nav-primary .menu > .menu-item > p .chevron-icon > i {
    margin-left: 0.6rem;
}

/* Symptom: carousel arrows are a pixel or two off centre in their circles.
   Cause: flex centring centres the glyph's em box, but a glyph's ink is not
   centred within its em box. --fa-nudge-y shifts it; adjust in DevTools and set
   the value here. Left at 0 until measured. */
/* Only the BORDERED circles need this. The home-carousel buttons, which have the
   translucent black background, sit correctly already — measured by eye
   2026-08-26 — so they are deliberately excluded. */
.reviews-slider .swiper-button-prev i::before,
.reviews-slider .swiper-button-next i::before,
.gallery-slider--main .swiper-button-prev i::before,
.gallery-slider--main .swiper-button-next i::before {
    transform: translateY(var(--fa-nudge-y));
}

/* Symptom: the arrow next to "Get Started" / "Schedule Now" sits too far from
   the label.
   Cause: no CSS governs that gap at all — it is the literal whitespace between
   the two spans in the markup, plus the glyph's left side bearing. The <svg>
   had a tighter left bearing, so the same whitespace read smaller.
   Negative margin pulls it back; tune with --fa-btn-gap.

   NOTE an alternative: Font Awesome sets `width: var(--fa-width, 1.25em)` with
   `text-align: center` on every icon, so each glyph sits in a box wider than
   itself. Setting --fa-width to 1em would tighten every icon at the source
   rather than compensating per-component. Not adopted here because the current
   spacing has already been tuned by eye; worth revisiting if more of these
   gaps come up. */
a.button.has-icon > span + span {
    margin-left: var(--fa-btn-gap);
}