/* ============================================================
   LEGALFREI GLOBAL PUBLIC DESIGN SYSTEM
   Applies to all public pages and blogs.
   ============================================================ */

:root {

    --lf-global-ink:
        #0b1728;

    --lf-global-text:
        #29384c;

    --lf-global-muted:
        #66768a;

    --lf-global-blue:
        #1265a0;

    --lf-global-blue-light:
        #248ac7;

    --lf-global-green:
        #168163;

    --lf-global-bg:
        #ffffff;

    --lf-global-soft:
        #f5f8fb;

    --lf-global-soft-2:
        #eef4f8;

    --lf-global-line:
        #dde7ef;

    --lf-global-width:
        1180px;

    --lf-global-reading:
        820px;

    --lf-global-radius:
        18px;

    --lf-global-radius-small:
        12px;

    --lf-global-shadow:
        0 16px 44px
        rgba(11,23,40,.075);

    --lf-global-shadow-hover:
        0 22px 58px
        rgba(11,23,40,.115);

}


/* ============================================================
   BASE
   ============================================================ */

html {

    scroll-behavior:
        smooth;

    background:
        #ffffff;
}


body {

    margin:
        0;

    overflow-x:
        hidden;

    background:
        var(--lf-global-bg);

    color:
        var(--lf-global-text);

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;
}


body,
button,
input,
select,
textarea {

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
}


*,
*::before,
*::after {

    box-sizing:
        border-box;
}


img,
svg,
video,
iframe {

    max-width:
        100%;
}


img {

    height:
        auto;
}


h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
a {

    overflow-wrap:
        break-word;
}


main {

    min-height:
        1px;

    overflow:
        hidden;
}


/* ============================================================
   GLOBAL TYPOGRAPHY
   ============================================================ */

main h1 {

    color:
        var(--lf-global-ink);

    font-size:
        clamp(
            2.35rem,
            5vw,
            4.65rem
        );

    line-height:
        1.02;

    letter-spacing:
        -.045em;
}


main h2 {

    color:
        var(--lf-global-ink);

    font-size:
        clamp(
            1.75rem,
            3.6vw,
            3rem
        );

    line-height:
        1.08;

    letter-spacing:
        -.03em;
}


main h3 {

    color:
        var(--lf-global-ink);

    line-height:
        1.22;
}


main h4,
main h5,
main h6 {

    color:
        var(--lf-global-ink);

    line-height:
        1.3;
}


main p,
main li {

    color:
        var(--lf-global-muted);

    line-height:
        1.72;
}


main strong {

    color:
        var(--lf-global-ink);
}


main a {

    color:
        var(--lf-global-blue);

    text-decoration-thickness:
        1px;

    text-underline-offset:
        3px;
}


main a:hover {

    color:
        #0d4d7d;
}


/* ============================================================
   HEADER
   ============================================================ */

header,
.site-header,
.main-header {

    position:
        relative;

    z-index:
        1000;

    background:
        rgba(255,255,255,.96) !important;

    color:
        var(--lf-global-ink) !important;

    border-bottom:
        1px solid
        rgba(221,231,239,.9);

    backdrop-filter:
        blur(17px);

    -webkit-backdrop-filter:
        blur(17px);
}


header a,
.site-header a,
.main-header a {

    color:
        #17283b !important;

    -webkit-text-fill-color:
        #17283b !important;

    opacity:
        1 !important;

    transition:
        color .18s ease,
        background .18s ease,
        transform .18s ease;
}


header a:hover,
.site-header a:hover,
.main-header a:hover {

    color:
        var(--lf-global-blue) !important;

    -webkit-text-fill-color:
        var(--lf-global-blue) !important;
}


/* ============================================================
   MOBILE MENU VISIBILITY
   ============================================================ */

header button[aria-label*="menu" i],
.site-header button[aria-label*="menu" i],
.main-header button[aria-label*="menu" i],

.menu-toggle,
.nav-toggle,
.mobile-menu-toggle,
.menu-button {

    color:
        var(--lf-global-ink) !important;

    -webkit-text-fill-color:
        var(--lf-global-ink) !important;

    background:
        #ffffff !important;

    border:
        1px solid
        var(--lf-global-line) !important;

    opacity:
        1 !important;

    visibility:
        visible !important;

    box-shadow:
        0 5px 16px
        rgba(11,23,40,.07);
}


.menu-toggle span,
.nav-toggle span,
.mobile-menu-toggle span,
.menu-button span {

    background:
        var(--lf-global-ink) !important;

    border-color:
        var(--lf-global-ink) !important;

    opacity:
        1 !important;
}


header button svg,
.site-header button svg,
.main-header button svg {

    color:
        var(--lf-global-ink) !important;

    opacity:
        1 !important;
}


header button svg path,
header button svg line,
.site-header button svg path,
.site-header button svg line,
.main-header button svg path,
.main-header button svg line {

    stroke:
        var(--lf-global-ink) !important;
}


/* ============================================================
   OPEN MOBILE MENU
   ============================================================ */

.mobile-menu,
.mobile-nav,
.nav-drawer,
.menu-drawer,
.menu-panel {

    background:
        #ffffff !important;

    color:
        var(--lf-global-ink) !important;

    border:
        1px solid
        var(--lf-global-line);

    box-shadow:
        var(--lf-global-shadow);
}


.mobile-menu a,
.mobile-nav a,
.nav-drawer a,
.menu-drawer a,
.menu-panel a {

    color:
        #17283b !important;

    -webkit-text-fill-color:
        #17283b !important;

    opacity:
        1 !important;

    visibility:
        visible !important;
}


/* ============================================================
   COMMON PAGE HERO / PAGE HEADINGS
   ============================================================ */

.page-hero,
.inner-hero,
.service-hero,
.article-hero,
.blog-hero,
.page-header,
.entry-header {

    position:
        relative;

    height:
        auto !important;

    min-height:
        0 !important;

    padding:
        clamp(52px,7vw,88px)
        20px
        clamp(42px,5vw,64px)
        !important;

    background:

        radial-gradient(
            circle at 85% 12%,
            rgba(36,138,199,.12),
            transparent 31%
        ),

        radial-gradient(
            circle at 7% 90%,
            rgba(22,129,99,.07),
            transparent 27%
        ),

        linear-gradient(
            180deg,
            #fcfeff,
            #f3f8fc
        )
        !important;
}


.page-hero > *,
.inner-hero > *,
.service-hero > *,
.article-hero > *,
.blog-hero > *,
.page-header > *,
.entry-header > * {

    width:
        min(
            var(--lf-global-width),
            100%
        );

    margin-left:
        auto;

    margin-right:
        auto;
}


/* ============================================================
   COMMON CONTENT CONTAINERS
   ============================================================ */

.page-content,
.content-wrap,
.content-wrapper,
.main-content,
.entry-content,
.article-content,
.service-content,
.container,
.container-wide {

    width:
        min(
            var(--lf-global-width),
            calc(100% - 36px)
        );

    margin-left:
        auto;

    margin-right:
        auto;
}


/* ============================================================
   COMMON SECTIONS
   ============================================================ */

.section,
.page-section,
.content-section,
.service-section {

    height:
        auto !important;

    min-height:
        0 !important;

    margin:
        0 !important;

    padding:
        clamp(48px,6vw,72px)
        20px
        !important;
}


.section-deep,
.section-soft,
.bg-soft {

    background:
        var(--lf-global-soft)
        !important;
}


.section + .section,
.page-section + .page-section,
.content-section + .content-section {

    border-top:
        1px solid
        rgba(221,231,239,.65);
}


/* ============================================================
   SECTION HEADERS
   ============================================================ */

.section-heading,
.page-heading,
.content-heading {

    max-width:
        780px;

    margin:
        0 auto 28px
        !important;

    text-align:
        center;
}


.section-heading h2,
.page-heading h2,
.content-heading h2 {

    margin:
        0 0 10px
        !important;
}


.section-heading p,
.page-heading p,
.content-heading p {

    max-width:
        680px;

    margin:
        0 auto
        !important;
}


/* ============================================================
   CARDS
   ============================================================ */

.card,
.service-card,
.info-card,
.feature-card,
.process-card,
.promise-card,
.review-card,
.blog-card,
.article-card,
[class*="service-card"],
[class*="feature-card"] {

    height:
        auto !important;

    min-height:
        0 !important;

    border:
        1px solid
        var(--lf-global-line)
        !important;

    border-radius:
        var(--lf-global-radius)
        !important;

    background:
        #ffffff
        !important;

    color:
        var(--lf-global-text)
        !important;

    box-shadow:
        0 9px 30px
        rgba(11,23,40,.045)
        !important;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}


.card:hover,
.service-card:hover,
.info-card:hover,
.feature-card:hover,
.process-card:hover,
.promise-card:hover,
.blog-card:hover,
.article-card:hover {

    transform:
        translateY(-3px);

    border-color:
        rgba(18,101,160,.22)
        !important;

    box-shadow:
        var(--lf-global-shadow-hover)
        !important;
}


/* ============================================================
   BUTTONS
   ============================================================ */

.btn,
.button,
.primary-button,
.secondary-button,
.cta-button,
main button[type="submit"],
main input[type="submit"] {

    min-height:
        46px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    padding:
        10px 18px;

    border:
        1px solid
        transparent;

    border-radius:
        10px;

    background:
        var(--lf-global-blue);

    color:
        #ffffff !important;

    -webkit-text-fill-color:
        #ffffff !important;

    text-decoration:
        none !important;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        transform .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}


.btn:hover,
.button:hover,
.primary-button:hover,
.cta-button:hover,
main button[type="submit"]:hover,
main input[type="submit"]:hover {

    background:
        #0d527f;

    transform:
        translateY(-1px);

    box-shadow:
        0 10px 25px
        rgba(18,101,160,.18);
}


/* ============================================================
   FORMS
   ============================================================ */

main form {

    max-width:
        100%;
}


main label {

    color:
        var(--lf-global-ink);

    font-weight:
        700;
}


main input[type="text"],
main input[type="email"],
main input[type="tel"],
main input[type="url"],
main input[type="number"],
main input[type="date"],
main input[type="file"],
main select,
main textarea {

    width:
        100%;

    min-height:
        46px;

    padding:
        11px 13px;

    border:
        1px solid
        #ccd9e3;

    border-radius:
        10px;

    background:
        #ffffff;

    color:
        var(--lf-global-ink);

    font: inherit;

    outline:
        none;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}


main textarea {

    min-height:
        130px;

    resize:
        vertical;
}


main input:focus,
main select:focus,
main textarea:focus {

    border-color:
        var(--lf-global-blue);

    box-shadow:
        0 0 0 4px
        rgba(18,101,160,.10);
}


/* ============================================================
   FAQ / DETAILS
   ============================================================ */

main details {

    margin:
        9px 0;

    border:
        1px solid
        var(--lf-global-line);

    border-radius:
        12px;

    background:
        #ffffff;

    overflow:
        hidden;

    box-shadow:
        0 6px 20px
        rgba(11,23,40,.035);
}


main details[open] {

    border-color:
        rgba(18,101,160,.24);
}


main details summary {

    padding:
        15px 17px;

    color:
        var(--lf-global-ink);

    cursor:
        pointer;

    font-weight:
        800;

    line-height:
        1.4;
}


main details > p,
main details > div {

    padding-left:
        17px;

    padding-right:
        17px;
}


/* ============================================================
   TABLES
   ============================================================ */

main table {

    width:
        100%;

    border-collapse:
        collapse;

    margin:
        24px 0;

    overflow:
        hidden;

    border:
        1px solid
        var(--lf-global-line);

    border-radius:
        12px;

    background:
        #ffffff;
}


main th {

    padding:
        12px 14px;

    background:
        var(--lf-global-soft-2);

    color:
        var(--lf-global-ink);

    text-align:
        left;
}


main td {

    padding:
        12px 14px;

    border-top:
        1px solid
        var(--lf-global-line);

    color:
        var(--lf-global-muted);
}


/* ============================================================
   BLOG / ARTICLE SYSTEM
   ============================================================ */

.lf-article,
.blog-article,
.article-page,
.post-content {

    width:
        min(
            var(--lf-global-reading),
            calc(100% - 34px)
        )
        !important;

    margin:
        0 auto
        !important;

    padding:
        clamp(38px,5vw,60px)
        0
        !important;
}


.lf-article h1,
.blog-article h1,
.article-page h1 {

    max-width:
        850px;

    margin:
        0 0 20px
        !important;

    font-size:
        clamp(
            2.3rem,
            5vw,
            4.3rem
        )
        !important;

    line-height:
        1.02
        !important;
}


.lf-article > p,
.blog-article > p,
.article-page > p,
.post-content > p {

    font-size:
        1.04rem;

    line-height:
        1.8;
}


/* ============================================================
   BLOG ARTICLE SECTIONS
   ============================================================ */

.lf-article-section {

    margin:
        0
        !important;

    padding:
        clamp(30px,4vw,46px)
        0
        !important;

    border-top:
        1px solid
        rgba(221,231,239,.74);
}


.lf-article-section:first-of-type {

    border-top:
        0;
}


.lf-article-section h2 {

    margin:
        0 0 14px
        !important;

    font-size:
        clamp(
            1.65rem,
            3vw,
            2.45rem
        )
        !important;
}


.lf-article-section h3 {

    margin:
        25px 0 9px
        !important;
}


.lf-article-section p {

    margin:
        0 0 17px;

    line-height:
        1.8;
}


.lf-article-section ul,
.lf-article-section ol {

    padding-left:
        22px;
}


.lf-article-section li {

    margin:
        7px 0;
}


/* ============================================================
   BLOG IMAGES
   ============================================================ */

.lf-article img,
.blog-article img,
.article-page img {

    display:
        block;

    width:
        100%;

    margin:
        25px auto;

    border-radius:
        16px;

    box-shadow:
        var(--lf-global-shadow);
}


/* ============================================================
   BLOG RELATED LINKS
   ============================================================ */

.lf-related {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:
        11px;

    margin-top:
        18px;
}


.lf-related a {

    display:
        flex;

    align-items:
        center;

    min-height:
        54px;

    padding:
        12px 14px;

    border:
        1px solid
        var(--lf-global-line);

    border-radius:
        11px;

    background:
        #ffffff;

    color:
        var(--lf-global-ink);

    text-decoration:
        none;

    font-weight:
        750;
}


.lf-related a:hover {

    border-color:
        rgba(18,101,160,.3);

    background:
        #f4f9fc;
}


/* ============================================================
   BLOG FAQ
   ============================================================ */

.lf-faq {

    margin-top:
        0;
}


/* ============================================================
   BLOG CTA
   ============================================================ */

.lf-cta {

    margin:
        25px 0
        !important;

    padding:
        clamp(28px,4vw,42px)
        !important;

    border:
        0
        !important;

    border-radius:
        18px;

    text-align:
        center;

    background:
        linear-gradient(
            125deg,
            #081b31,
            #0d4168 62%,
            #17684f 140%
        );

    box-shadow:
        var(--lf-global-shadow);
}


.lf-cta h2,
.lf-cta h3 {

    color:
        #ffffff !important;
}


.lf-cta p {

    color:
        rgba(255,255,255,.78)
        !important;
}


.lf-cta a {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        46px;

    margin-top:
        8px;

    padding:
        10px 17px;

    border-radius:
        10px;

    background:
        #ffffff;

    color:
        var(--lf-global-ink)
        !important;

    text-decoration:
        none;

    font-weight:
        800;
}


/* ============================================================
   USA BLOG STATE GRID
   ============================================================ */

.lf-state-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap:
        7px;

    padding:
        0 !important;

    list-style:
        none;
}


.lf-state-grid li {

    margin:
        0;

    padding:
        9px 11px;

    border:
        1px solid
        var(--lf-global-line);

    border-radius:
        9px;

    background:
        var(--lf-global-soft);
}


/* ============================================================
   FORM GRID
   ============================================================ */

.lf-form-grid,
.form-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:
        15px;
}


.lf-form-grid label,
.form-grid label {

    display:
        block;
}


.lf-form-grid label > span,
.form-grid label > span {

    display:
        block;

    margin-bottom:
        6px;
}


/* ============================================================
   SUCCESS / ERROR MESSAGES
   ============================================================ */

.lf-success,
.success,
.alert-success {

    padding:
        13px 15px;

    margin:
        12px 0;

    border:
        1px solid
        #b8dfcf;

    border-radius:
        10px;

    background:
        #edf9f4;

    color:
        #126348;
}


.lf-error,
.error,
.alert-error,
.alert-danger {

    padding:
        13px 15px;

    margin:
        12px 0;

    border:
        1px solid
        #ecc7c7;

    border-radius:
        10px;

    background:
        #fff3f3;

    color:
        #982c2c;
}


/* ============================================================
   APPLICATION / CONTACT / GENERAL FORM CARDS
   ============================================================ */

.application-form,
.contact-form,
.inquiry-form,
.form-card {

    width:
        min(
            820px,
            100%
        );

    margin-left:
        auto;

    margin-right:
        auto;

    padding:
        clamp(20px,3vw,30px);

    border:
        1px solid
        var(--lf-global-line);

    border-radius:
        18px;

    background:
        #ffffff;

    box-shadow:
        var(--lf-global-shadow);
}


/* ============================================================
   REVIEWS
   ============================================================ */

#customer-reviews,
.reviews-page,
.reviews-section {

    color:
        var(--lf-global-text);
}


#customer-reviews article,
.reviews-page article,
.review-card {

    padding:
        18px;

    border:
        1px solid
        var(--lf-global-line)
        !important;

    border-radius:
        14px
        !important;

    background:
        #ffffff
        !important;

    box-shadow:
        0 8px 25px
        rgba(11,23,40,.045);
}


/* ============================================================
   PAGINATION
   ============================================================ */

.pagination {

    display:
        flex;

    gap:
        6px;

    flex-wrap:
        wrap;

    margin:
        25px 0;

    padding:
        0;

    list-style:
        none;
}


.pagination a,
.pagination span {

    min-width:
        39px;

    min-height:
        39px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        7px 10px;

    border:
        1px solid
        var(--lf-global-line);

    border-radius:
        8px;

    background:
        #ffffff;

    color:
        var(--lf-global-ink);

    text-decoration:
        none;
}


/* ============================================================
   FOOTER
   ============================================================ */

footer,
.site-footer {

    margin-top:
        0
        !important;

    padding-top:
        clamp(42px,5vw,62px)
        !important;

    padding-bottom:
        26px
        !important;
}


footer h1,
footer h2,
footer h3,
footer h4,
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4 {

    line-height:
        1.25;
}


footer p,
footer li,
footer a,
.site-footer p,
.site-footer li,
.site-footer a {

    line-height:
        1.65;
}


/* ============================================================
   REMOVE GIANT EMPTY SPACING
   ============================================================ */

main section {

    height:
        auto;
}


main section:last-child {

    margin-bottom:
        0 !important;
}


main > *:last-child,
body > *:last-child {

    margin-bottom:
        0 !important;
}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {

    outline:
        3px solid
        rgba(36,138,199,.38);

    outline-offset:
        3px;
}


/* ============================================================
   TABLET
   ============================================================ */

@media(max-width:900px) {

    .lf-state-grid {

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


    .lf-related {

        grid-template-columns:
            1fr;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:650px) {

    main h1 {

        font-size:
            clamp(
                2.1rem,
                11vw,
                3.3rem
            );
    }


    main h2 {

        font-size:
            clamp(
                1.7rem,
                8vw,
                2.5rem
            );
    }


    .section,
    .page-section,
    .content-section,
    .service-section {

        padding:
            40px
            15px
            !important;
    }


    .page-content,
    .content-wrap,
    .content-wrapper,
    .main-content,
    .entry-content,
    .article-content,
    .service-content,
    .container,
    .container-wide {

        width:
            calc(100% - 22px);
    }


    .lf-article,
    .blog-article,
    .article-page,
    .post-content {

        width:
            calc(100% - 24px)
            !important;

        padding:
            32px
            0
            !important;
    }


    .lf-article-section {

        padding:
            29px
            0
            !important;
    }


    .lf-related {

        grid-template-columns:
            1fr;
    }


    .lf-state-grid {

        grid-template-columns:
            1fr;
    }


    .lf-form-grid,
    .form-grid {

        grid-template-columns:
            1fr;
    }


    .application-form,
    .contact-form,
    .inquiry-form,
    .form-card {

        padding:
            17px;
    }


    main table {

        display:
            block;

        overflow-x:
            auto;

        -webkit-overflow-scrolling:
            touch;
    }


    main button[type="submit"],
    main input[type="submit"] {

        width:
            100%;
    }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media(
    prefers-reduced-motion:
    reduce
) {

    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

        animation-duration:
            .01ms !important;

        transition-duration:
            .01ms !important;
    }

}