/* =====================================================
GLOBAL DESIGN SYSTEM
===================================================== */


/* =====================
COLORS AND VARIABLES
===================== */

:root{

    --navy:#0c1224;
    --navy-dark:#0a0f24;

    --green:#4c8414;
    --green-dark:#3a6b0f;

    --white:#ffffff;
    --light-bg:#f5f7fa;

    --text-dark:#0c1224;
    --text-gray:#64748b;
    --text-light:#cbd5e1;

    --section-padding:100px;
    --container-width:1200px;
    --grid-gap:30px;

    --radius:10px;

}


/* =====================
RESET
===================== */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


/* =====================
BODY
===================== */

body{

    font-family:"Inter", sans-serif;
    background:var(--white);
    color:var(--text-dark);
    line-height:1.6;

}


/* =====================
BASIC ELEMENTS
===================== */

img{

    max-width:100%;
    display:block;

}


button,
input,
select,
textarea{

    font:inherit;

}


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

h1{

    font-size:48px;
    font-weight:800;
    line-height:1.15;

}


h2{

    font-size:36px;
    line-height:1.25;

}


h3{

    font-size:20px;
    line-height:1.35;

}


p{

    font-size:16px;

}


/* =====================================================
GLOBAL LAYOUT
===================================================== */


/* =====================
CONTAINER
===================== */

.container{

    width:100%;
    max-width:var(--container-width);

    margin:0 auto;

    padding-left:24px;
    padding-right:24px;

}


/* =====================
SECTION SYSTEM
===================== */

.section{

    width:100%;
    padding:var(--section-padding) 0;

}


.section-light{

    background:var(--light-bg);

}


.section-dark{

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

}


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

.section-header{

    max-width:750px;

    margin:0 auto 60px;

    text-align:center;

}


.section-header h2,
.section-title{

    margin-bottom:16px;

    font-size:36px;
    font-weight:700;

    color:var(--navy);

}


.section-header p,
.section-subtitle{

    font-size:16px;
    line-height:1.6;

    color:var(--text-gray);

}


/* =====================
GRID SYSTEM
===================== */

.grid{

    display:grid;
    gap:var(--grid-gap);

}


/* =====================================================
BUTTON SYSTEM
===================================================== */

.btn{

    display:inline-block;

    padding:14px 26px;

    border:0;
    border-radius:6px;

    font-size:15px;
    font-weight:600;
    line-height:1.2;

    text-align:center;
    text-decoration:none;

    cursor:pointer;

    transition:
        background-color .25s ease,
        border-color .25s ease,
        color .25s ease,
        transform .25s ease;

}


/* PRIMARY BUTTON */

.btn-primary{

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

}


.btn-primary:hover{

    background:var(--green-dark);
    color:var(--white);

    transform:translateY(-2px);

}


/* GREEN OUTLINE BUTTON */

.btn-outline{

    border:2px solid var(--green);

    background:transparent;
    color:var(--green);

}


.btn-outline:hover{

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

}


/* WHITE OUTLINE BUTTON */

.btn-outline-navy{

    border:2px solid var(--white);

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

}


.btn-outline-navy:hover{

    border-color:var(--navy);

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

}


/* WHITE BUTTON */

.btn-white{

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

}


.btn-white:hover{

    background:#f3f4f6;

}


/* BUTTON SPACING */

.btn + .btn{

    margin-left:12px;

}


/* =====================================================
PLATFORM VIEW ACTION

Use one recognizable treatment for every action that opens a record,
profile, product, or detail page across the public and portal interfaces.
===================================================== */

.platform-view-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:36px;
    padding:8px 13px;
    border:1px solid #cbd5e1 !important;
    border-radius:7px;
    background:#ffffff !important;
    color:var(--navy) !important;
    font-family:inherit;
    font-size:12px;
    font-weight:700;
    line-height:1.2;
    text-align:center;
    text-decoration:none;
    white-space:nowrap;
    cursor:pointer;
    transition:
        border-color .2s ease,
        background .2s ease,
        color .2s ease;
}

.platform-view-button:hover,
.platform-view-button:focus-visible{
    border-color:var(--green) !important;
    background:#f4f8f1 !important;
    color:var(--green) !important;
    text-decoration:none !important;
}

.platform-view-button i{
    flex:0 0 auto;
    font-size:11px;
}


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

This is the Admin Products pagination treatment used consistently across
Admin, Supplier, and Client lists.
===================================================== */

.platform-pagination{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:70px;
    margin-top:20px;
    padding:15px 0 25px;
    border-top:1px solid #e5e7eb;
}

.platform-pagination[hidden]{
    display:none !important;
}

.platform-pagination-info{
    position:absolute;
    left:15px;
    color:var(--text-gray);
    font-size:13px;
    white-space:nowrap;
}

.platform-pagination-buttons{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:6px;
}

.platform-pagination-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    padding:0;
    border:1px solid #d9dee8;
    border-radius:6px;
    background:#ffffff;
    color:var(--navy);
    font-family:inherit;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
    transition:
        border-color .2s ease,
        background .2s ease,
        color .2s ease;
}

.platform-pagination-btn:hover:not(:disabled){
    border-color:var(--green);
    color:var(--green);
}

.platform-pagination-btn.is-active{
    border-color:var(--green);
    background:var(--green);
    color:#ffffff;
}

.platform-pagination-btn:disabled{
    cursor:not-allowed;
    opacity:.4;
}

.platform-pagination-btn i{
    font-size:9px;
}

@media(max-width:600px){
    .platform-pagination{
        flex-direction:column;
        gap:12px;
        padding:15px 0 20px;
    }

    .platform-pagination-info{
        position:static;
        font-size:12px;
        text-align:center;
    }

    .platform-pagination-buttons{
        gap:5px;
    }

    .platform-pagination-btn{
        width:28px;
        height:28px;
        font-size:11px;
    }
}


/* =====================================================
BUSINESSBRIDGE CHINA
PUBLIC HEADER
===================================================== */

.header{

    position:sticky;

    top:0;

    width:100%;

    background:#ffffff;

    border-bottom:1px solid #e5e7eb;

    box-shadow:0 2px 8px rgba(15,23,42,.03);

    z-index:1000;

}


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

.header-inner{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:68px;

}


/* =====================================================
LOGO
===================================================== */

.logo{

    flex-shrink:0;

    color:var(--navy);

    font-size:20px;

    font-weight:800;

    line-height:1.4;

    letter-spacing:-.35px;

}


.logo,
.logo:hover,
.logo:focus,
.logo:visited{

    color:var(--navy);

    text-decoration:none;

}


.logo span{

    color:var(--green);

}


/* =====================================================
LOGO PRINT EFFECT
===================================================== */

.logo-print{

    position:relative;

    display:inline-block;

    overflow:hidden;

}


.logo-print::after{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:120%;

    height:100%;

    background:
        linear-gradient(
            120deg,
            transparent 0%,
            rgba(255,255,255,.7) 50%,
            transparent 100%
        );

    animation:logoPrint 6s ease-in-out infinite;

}


@keyframes logoPrint{

    0%{

        left:-120%;

    }

    40%{

        left:120%;

    }

    100%{

        left:120%;

    }

}


/* =====================================================
PUBLIC NAVIGATION
===================================================== */

.nav{

    display:flex;

    align-items:center;

    gap:24px;

}


/* =====================================================
NAVIGATION LINKS
===================================================== */

.nav > a:not(.nav-btn){

    position:relative;

    color:#475569;

    font-size:13px;

    font-weight:600;

    line-height:1;

    text-decoration:none;

    white-space:nowrap;

    transition:color .2s ease;

}


.nav > a:not(.nav-btn):hover{

    color:var(--green);

}


/* SUBTLE HOVER LINE */

.nav > a:not(.nav-btn)::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:-8px;

    height:2px;

    border-radius:2px;

    background:var(--green);

    transform:scaleX(0);

    transform-origin:center;

    transition:transform .2s ease;

}


.nav > a:not(.nav-btn):hover::after{

    transform:scaleX(1);

}


/* =====================================================
SUBMIT PROJECT LINK
===================================================== */

.nav-link-highlight{

    color:var(--green) !important;

    font-weight:700 !important;

}


/* =====================================================
NAV ACCOUNT / LOGOUT BUTTON
===================================================== */

.nav-btn{

    min-height:36px;

    padding:8px 15px;

    border-radius:7px;

    font-size:12px;

    font-weight:700;

}


.nav-btn:hover{

    background:var(--green-dark);

    color:#ffffff !important;

    transform:none;

}


/* =====================================================
MOBILE MENU BUTTON
===================================================== */

.menu-toggle{

    display:none;

    align-items:center;

    justify-content:center;

    width:38px;

    height:38px;

    padding:0;

    border:1px solid #e5e7eb;

    border-radius:7px;

    background:#ffffff;

    color:var(--navy);

    font-size:18px;

    line-height:1;

    cursor:pointer;

    transition:
        border-color .2s ease,
        background .2s ease,
        color .2s ease;

}


.menu-toggle:hover{

    border-color:#cbd5e1;

    background:#f8fafc;

    color:var(--green);

}


/* =====================================================
ACCOUNT NAVIGATION
===================================================== */

.account-nav{

    position:relative;

}


/* =====================================================
ACCOUNT BUTTON
===================================================== */

.account-nav-toggle{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    min-height:36px;

    margin:0;

    padding:8px 14px;

    border:1px solid var(--green);

    border-radius:7px;

    background:var(--green);

    color:#ffffff;

    font-family:inherit;

    font-size:12px;

    font-weight:700;

    line-height:1;

    cursor:pointer;

}


.account-nav-toggle.btn{

    margin:0;

}


.account-nav-toggle:hover{

    background:var(--green-dark);

    border-color:var(--green-dark);

    transform:none;

}


.account-nav-toggle i{

    font-size:11px;

}


.account-nav-arrow{

    margin-left:2px;

    font-size:9px !important;

    transition:transform .2s ease;

}


.account-nav.is-open
.account-nav-arrow{

    transform:rotate(180deg);

}


/* =====================================================
ACCOUNT DROPDOWN
===================================================== */

.account-nav-menu{

    position:absolute;

    top:calc(100% + 11px);

    right:0;

    width:290px;

    padding:7px;

    border:1px solid #e5e7eb;

    border-radius:10px;

    background:#ffffff;

    box-shadow:
        0 18px 40px
        rgba(15,23,42,.14);

    opacity:0;

    visibility:hidden;

    transform:translateY(-6px);

    transition:
        opacity .2s ease,
        visibility .2s ease,
        transform .2s ease;

    z-index:1100;

}


.account-nav.is-open
.account-nav-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}


/* =====================================================
DROPDOWN ARROW
===================================================== */

.account-nav-menu::before{

    content:"";

    position:absolute;

    top:-6px;

    right:23px;

    width:10px;

    height:10px;

    border-top:1px solid #e5e7eb;

    border-left:1px solid #e5e7eb;

    background:#ffffff;

    transform:rotate(45deg);

}


/* =====================================================
ACCOUNT DROPDOWN LINKS
===================================================== */

.nav
.account-nav-menu a{

    display:flex;

    align-items:center;

    gap:11px;

    width:100%;

    padding:11px;

    border-radius:7px;

    color:var(--navy);

    text-align:left;

    text-decoration:none;

    transition:background .2s ease;

}


.nav
.account-nav-menu a::after{

    display:none;

}


.nav
.account-nav-menu a:hover{

    color:var(--navy);

    background:#f5f8f2;

}


/* =====================================================
ACCOUNT DROPDOWN ICON
===================================================== */

.account-nav-icon{

    display:flex;

    flex:0 0 36px;

    align-items:center;

    justify-content:center;

    width:36px;

    height:36px;

    border-radius:8px;

    background:#eef5e8;

    color:var(--green);

}


.account-nav-icon i{

    font-size:14px;

}


/* =====================================================
ACCOUNT DROPDOWN TEXT
===================================================== */

.account-nav-text{

    display:flex;

    min-width:0;

    flex-direction:column;

    line-height:1.35;

}


.account-nav-text strong{

    color:var(--navy);

    font-size:13px;

    font-weight:700;

}


.account-nav-text small{

    margin-top:2px;

    color:#64748b;

    font-size:10px;

    font-weight:400;

}


/* =====================================================
LOGOUT BUTTON
===================================================== */

.nav
.account-logout-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    min-height:36px;

    padding:8px 14px;

    border-radius:7px;

    font-size:12px;

    font-weight:700;

    line-height:1;

    box-shadow:none;

}


.nav
.account-logout-btn:hover{

    box-shadow:none;

    transform:none;

}


.account-logout-btn i{

    font-size:11px;

}


/* =====================================================
PUBLIC HEADER — TABLET / MOBILE
===================================================== */

@media(max-width:900px){

    .header-inner{

        min-height:62px;

    }


    .menu-toggle{

        display:flex;

    }


    /* =====================================================
    MOBILE NAVIGATION PANEL
    ===================================================== */

    .nav{

        position:absolute;

        top:62px;

        left:0;

        right:0;

        display:none;

        flex-direction:column;

        align-items:stretch;

        gap:0;

        padding:10px 20px 20px;

        background:#ffffff;

        border-top:1px solid #eef2f7;

        border-bottom:1px solid #e5e7eb;

        box-shadow:
            0 12px 24px
            rgba(15,23,42,.08);

        text-align:left;

    }


    .nav.active{

        display:flex;

    }


    /* =====================================================
    MOBILE NAV LINKS
    ===================================================== */

    .nav > a:not(.nav-btn){

        width:100%;

        padding:13px 4px;

        border-bottom:1px solid #f1f5f9;

        color:#334155;

        font-size:13px;

        text-align:left;

    }


    .nav > a:not(.nav-btn)::after{

        display:none;

    }


    .nav > a:not(.nav-btn):hover{

        color:var(--green);

    }


    .nav-link-highlight{

        color:var(--green) !important;

    }


    /* =====================================================
    MOBILE ACCOUNT AREA
    ===================================================== */

    .nav > .account-nav{

        width:100%;

        margin-top:12px;

    }


    .nav-btn,
    .account-nav-toggle{

        width:100%;

        min-height:42px;

    }


    .account-nav-toggle{

        padding:11px 15px;

    }


    /* =====================================================
    MOBILE ACCOUNT DROPDOWN
    ===================================================== */

    .account-nav-menu{

        position:static;

        display:none;

        width:100%;

        margin-top:8px;

        padding:6px;

        border:1px solid #e5e7eb;

        border-radius:8px;

        background:#f8fafc;

        box-shadow:none;

        opacity:1;

        visibility:visible;

        transform:none;

    }


    .account-nav.is-open
    .account-nav-menu{

        display:block;

    }


    .account-nav-menu::before{

        display:none;

    }


    .nav
    .account-nav-menu a{

        background:#ffffff;

    }


    .nav
    .account-nav-menu a + a{

        margin-top:5px;

    }


    .account-logout-btn{

        width:100%;

        margin-top:12px;

    }

}


/* =====================================================
SMALL PHONE
===================================================== */

@media(max-width:520px){

    .container{

        padding-left:16px;

        padding-right:16px;

    }

    .header-inner{

        min-height:58px;

        padding-left:16px;

        padding-right:16px;

    }


    .logo{

        font-size:18px;

    }


    .menu-toggle{

        width:36px;

        height:36px;

    }


    .nav{

        top:58px;

        padding-left:16px;

        padding-right:16px;

    }

}
/* =====================================================
PUBLIC HEADER — PROFESSIONAL NAVIGATION STATES
===================================================== */

.header{
    background:var(--navy);
    border-bottom-color:rgba(255,255,255,.09);
    box-shadow:0 5px 18px rgba(5,10,24,.12);
    transition:
        background-color .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.header-inner,
.logo,
.nav,
.nav > a:not(.nav-btn),
.account-nav-toggle,
.menu-toggle{
    transition:
        min-height .22s ease,
        gap .22s ease,
        color .22s ease,
        background-color .22s ease,
        border-color .22s ease,
        font-size .22s ease;
}

.header .logo,
.header .logo:hover,
.header .logo:focus,
.header .logo:visited{
    color:#ffffff;
}

.header .logo span{
    color:var(--green);
}

@media(min-width:901px){
    .header:not(.is-scrolled)
    .nav > a:not(.nav-btn){
        color:#dbe4ef;
    }

    .header:not(.is-scrolled)
    .nav > a:not(.nav-btn):hover{
        color:#ffffff;
    }

    .header:not(.is-scrolled)
    .nav > a.is-active:not(.nav-btn),
    .header:not(.is-scrolled)
    .nav-link-highlight{
        color:#8fca52 !important;
    }
}

.header.is-scrolled{
    background:#ffffff;
    border-bottom-color:#e5e7eb;
    box-shadow:0 4px 16px rgba(15,23,42,.08);
}

.header.is-scrolled .header-inner{
    min-height:54px;
}

.header.is-scrolled .logo,
.header.is-scrolled .logo:hover,
.header.is-scrolled .logo:focus,
.header.is-scrolled .logo:visited{
    color:var(--navy);
    font-size:18px;
}

.header.is-scrolled .logo span{
    color:var(--green);
}

.header.is-scrolled .nav{
    gap:21px;
}

.nav > a.is-active:not(.nav-btn){
    color:var(--green);
}

.nav > a.is-active:not(.nav-btn)::after{
    transform:scaleX(1);
}

.header.is-scrolled .nav > a:not(.nav-btn){
    color:#475569;
    font-size:12px;
}

.header.is-scrolled .nav > a:not(.nav-btn):hover,
.header.is-scrolled .nav > a.is-active:not(.nav-btn),
.header.is-scrolled .nav-link-highlight{
    color:var(--green) !important;
}

.header.is-scrolled .nav > a:not(.nav-btn)::after{
    background:var(--green);
}

.account-nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:auto;
    margin:0;
    padding:8px 0;
    border:0;
    border-radius:0;
    background:transparent;
    color:#dbe4ef;
    font-family:inherit;
    font-size:13px;
    font-weight:650;
    line-height:1;
    cursor:pointer;
}

.account-nav-toggle:hover{
    border-color:transparent;
    background:transparent;
    color:#ffffff;
    transform:none;
}

.account-nav-toggle:focus-visible{
    border-radius:4px;
    outline:2px solid var(--green);
    outline-offset:4px;
}

.account-nav-toggle > span{
    max-width:160px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.header.is-scrolled .account-nav-toggle{
    color:#475569;
    font-size:12px;
}

.header.is-scrolled .account-nav-toggle:hover{
    color:var(--green);
}

.header.is-scrolled .nav-link-highlight{
    color:var(--green) !important;
}

.header.is-scrolled .nav-link-highlight:hover{
    color:var(--green-dark) !important;
}

.account-nav-menu{
    width:318px;
}

.account-access-heading{
    padding:7px 10px 8px;
    color:#8793a5;
    font-size:10px;
    font-weight:800;
    letter-spacing:.055em;
    text-transform:uppercase;
}

.account-access-group{
    padding:11px;
    border-radius:8px;
}

.account-access-group + .account-access-group{
    margin-top:3px;
    border-top:1px solid #edf1f5;
    border-radius:0 0 8px 8px;
}

.account-access-identity{
    display:flex;
    align-items:center;
    gap:11px;
}

.account-access-links{
    display:flex;
    align-items:center;
    gap:14px;
    margin:8px 0 0 47px;
}

.nav .account-nav-menu .account-access-links a{
    display:inline-flex;
    width:auto;
    padding:0;
    border-radius:0;
    background:transparent;
    color:var(--green);
    font-size:11px;
    font-weight:750;
    line-height:1.4;
}

.nav .account-nav-menu .account-access-links a + a{
    position:relative;
    margin:0;
    padding-left:14px;
}

.nav .account-nav-menu .account-access-links a + a::before{
    content:"";
    position:absolute;
    top:2px;
    bottom:2px;
    left:0;
    width:1px;
    background:#dfe5ec;
}

.nav .account-nav-menu .account-access-links a:hover{
    background:transparent;
    color:var(--green-dark);
    text-decoration:underline;
}

.header .menu-toggle{
    border-color:rgba(255,255,255,.22);
    background:transparent;
    color:#ffffff;
}

.header .menu-toggle:hover{
    border-color:rgba(255,255,255,.4);
    background:rgba(255,255,255,.08);
    color:#ffffff;
}

.header.is-scrolled .menu-toggle{
    border-color:#e5e7eb;
    background:#ffffff;
    color:var(--navy);
}

.header.is-scrolled .menu-toggle:hover{
    border-color:#cbd5e1;
    background:#f8fafc;
    color:var(--green);
}

@media(max-width:900px){
    .nav{
        top:100%;
    }

    .header.is-scrolled .header-inner{
        min-height:54px;
    }

    .header.is-scrolled .nav{
        gap:0;
        background:#ffffff;
        border-top-color:#e8edf3;
    }

    .header.is-scrolled .nav > a:not(.nav-btn){
        color:#334155;
        font-size:13px;
    }

    .header.is-scrolled .nav > a:not(.nav-btn):hover,
    .header.is-scrolled .nav > a.is-active:not(.nav-btn),
    .header.is-scrolled .nav-link-highlight{
        color:var(--green) !important;
    }

    .nav > .account-nav{
        padding-top:2px;
        border-top:1px solid #edf1f5;
    }

    .account-nav:not(.account-nav-guest) .account-nav-toggle{
        justify-content:flex-start;
        padding:12px 4px;
        color:#334155;
    }

    .account-nav:not(.account-nav-guest)
    .account-nav-arrow{
        margin-left:auto;
    }

    .header.is-scrolled
    .account-nav:not(.account-nav-guest)
    .account-nav-toggle{
        color:#334155;
        font-size:13px;
    }

    .account-nav-guest > .account-nav-toggle{
        display:none;
    }

    .account-nav-guest .account-nav-menu{
        position:static;
        display:block !important;
        width:100%;
        margin-top:0;
        padding:7px;
        border:1px solid #e5e7eb;
        border-radius:9px;
        background:#f8fafc;
        box-shadow:none;
        opacity:1;
        visibility:visible;
        transform:none;
    }

    .account-nav-guest .account-nav-menu::before{
        display:none;
    }

    .account-access-group{
        background:#ffffff;
    }

    .account-access-group + .account-access-group{
        margin-top:6px;
        border:0;
        border-radius:8px;
    }

    .nav .account-nav-menu .account-access-links a{
        background:transparent;
    }
}

@media(max-width:520px){
    .header.is-scrolled .header-inner{
        min-height:52px;
    }

    .header.is-scrolled .logo,
    .header.is-scrolled .logo:hover,
    .header.is-scrolled .logo:focus,
    .header.is-scrolled .logo:visited{
        font-size:17px;
    }
}

@media(prefers-reduced-motion:reduce){
    .header,
    .header-inner,
    .logo,
    .nav,
    .nav > a:not(.nav-btn),
    .account-nav-toggle,
    .menu-toggle{
        transition:none;
    }
}

/* =====================================================
BUSINESSBRIDGE CHINA
PUBLIC FOOTER
===================================================== */

.site-footer{

    background:var(--navy);

    color:#cbd5e1;

    font-family:"Inter",sans-serif;

    font-size:13px;

    line-height:1.6;

}


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

.footer-main{

    display:grid;

    grid-template-columns:
        minmax(260px,1.25fr)
        minmax(0,2fr);

    gap:60px;

    padding-top:52px;

    padding-bottom:42px;

}


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

.footer-brand{

    min-width:0;

}


.footer-logo{

    display:inline-block;

    margin-bottom:12px;

    color:#ffffff;

    font-size:20px;

    font-weight:800;

    letter-spacing:-.35px;

    line-height:1.2;

    text-decoration:none;

}


.footer-logo:hover,
.footer-logo:focus,
.footer-logo:visited{

    color:#ffffff;

    text-decoration:none;

}


.footer-logo span{

    color:var(--green);

}


.footer-intro{

    max-width:430px;

    margin:0;

    color:#aeb9c8;

    font-size:13px;

    line-height:1.7;

}


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

.footer-contact{

    display:flex;

    flex-direction:column;

    gap:8px;

    margin-top:18px;

}


.footer-contact a,
.footer-contact span{

    display:flex;

    align-items:center;

    gap:9px;

    color:#cbd5e1;

    font-size:12px;

    text-decoration:none;

}


.footer-contact a:hover{

    color:var(--green);

}


.footer-contact i{

    width:16px;

    color:var(--green);

    text-align:center;

    font-size:12px;

}


/* =====================================================
FOOTER LINK GRID
===================================================== */

.footer-links{

    display:grid;

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

    gap:28px;

}


.footer-column{

    min-width:0;

}


.footer-column h4{

    margin:0 0 12px;

    color:#ffffff;

    font-size:13px;

    font-weight:700;

    line-height:1.3;

}


.footer-column ul{

    margin:0;

    padding:0;

    list-style:none;

}


.footer-column li{

    margin-bottom:8px;

}


.footer-column a{

    color:#aeb9c8;

    font-size:12px;

    text-decoration:none;

    transition:color .2s ease;

}


.footer-column a:hover{

    color:var(--green);

}


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

.footer-bottom{

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

}


.footer-bottom-inner{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    min-height:58px;

}


.footer-bottom p{

    margin:0;

    color:#7f8b9b;

    font-size:11px;

    line-height:1.4;

}


.footer-legal{

    display:flex;

    align-items:center;

    gap:18px;

}


.footer-legal a{

    color:#7f8b9b;

    font-size:11px;

    text-decoration:none;

    transition:color .2s ease;

}


.footer-legal a:hover{

    color:var(--green);

}


/* =====================================================
FOOTER — TABLET
===================================================== */

@media(max-width:1000px){

    .footer-main{

        grid-template-columns:1fr;

        gap:36px;

    }


    .footer-brand{

        max-width:600px;

    }


    .footer-links{

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

        gap:28px 36px;

    }

}


/* =====================================================
FOOTER — MOBILE
===================================================== */

@media(max-width:600px){

    .footer-main{

        gap:30px;

        padding-top:38px;

        padding-bottom:30px;

    }


    .footer-logo{

        font-size:18px;

    }


    .footer-intro{

        font-size:12px;

    }


    .footer-links{

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

        gap:24px 20px;

    }


    .footer-column h4{

        margin-bottom:9px;

        font-size:12px;

    }


    .footer-column a{

        font-size:11px;

    }


    .footer-contact a,
    .footer-contact span{

        font-size:11px;

    }


    .footer-bottom-inner{

        flex-direction:column;

        align-items:flex-start;

        justify-content:center;

        gap:7px;

        padding-top:15px;

        padding-bottom:15px;

    }


    .footer-legal{

        gap:14px;

        flex-wrap:wrap;

    }

}


/* =====================================================
SMALL PHONE
===================================================== */

@media(max-width:430px){

    .footer-links{

        grid-template-columns:1fr;

        gap:20px;

    }

}