/*======================================
  Wx Design System v1.0
  Sections
======================================*/


/*==============================
  DEFAULT SECTION
===============================*/

.section{

    position:relative;

    padding:var(--section-padding) 0;

    overflow:hidden;
}


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

.section-header{

    max-width:760px;

    margin:0 auto 4rem;

    text-align:center;
}

.section-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:.6rem 1.2rem;

    margin-bottom:1rem;

    border-radius:999px;

    background:rgba(198,144,46,.12);

    color:var(--color-accent);

    font-weight:var(--fw-semibold);

    letter-spacing:.5px;

    text-transform:uppercase;
}

.section-title{

    margin-bottom:1rem;
}

.section-description{

    max-width:680px;

    margin:0 auto;

    color:var(--text-body);
}


/*==============================
  SECTION BACKGROUNDS
===============================*/

.section-light{

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

.section-soft{

    background:var(--bg-soft);
}

.section-dark{

    background:var(--bg-dark);

    color:var(--text-light);
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark h5,
.section-dark h6{

    color:var(--text-light);
}


/*==============================
  CONTENT WIDTH
===============================*/

.section-content{

    position:relative;

    z-index:2;
}


/*==============================
  DECORATION
===============================*/

.section-divider{

    width:90px;

    height:4px;

    margin:1.5rem auto;

    border-radius:999px;

    background:var(--color-accent);
}


/*==============================
  OVERLAY
===============================*/

.section-overlay{

    position:absolute;

    inset:0;

    pointer-events:none;
}


/*==============================
  HERO SPACING
===============================*/

.hero-section{

    padding-top:calc(var(--header-height) + 2rem);

    min-height:100vh;

    display:flex;

    align-items:center;
}


/*==============================
  CTA SPACING
===============================*/

.cta-section{

    text-align:center;
}


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

.footer-section{

    padding:5rem 0 2rem;
}

/*======================================
  HEADER & NAVIGATION
======================================*/


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

.site-header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:var(--header-height);
    z-index:var(--z-fixed);

    background:rgba(250,248,244,.88);
    border-bottom:1px solid var(--border-color);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    transition:
        background var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}


/* Scrolled state */

.site-header.is-scrolled{
    background:rgba(250,248,244,.96);
    box-shadow:var(--shadow-sm);
}


/*==============================
  NAVBAR
===============================*/

.navbar{
    height:var(--header-height);

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

    gap:var(--space-xl);
}


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

.logo{
    display:inline-flex;
    align-items:center;
    flex-shrink:0;
}

.logo:hover{
    color:inherit;
}

.logo__image{
    width:auto;
    height:58px;
    object-fit:contain;
}


/*==============================
  DESKTOP NAVIGATION
===============================*/

.nav-menu{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:var(--space-xl);

    margin-left:auto;
}

.nav-item{
    position:relative;
}

.nav-link{
    position:relative;

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

    padding:.75rem 0;

    font-family:var(--font-heading);
    font-size:var(--text-sm);
    font-weight:var(--fw-semibold);

    color:var(--text-heading);

    transition:color var(--transition-fast);
}

.nav-link::after{
    content:"";

    position:absolute;
    left:0;
    bottom:.35rem;

    width:100%;
    height:2px;

    background:var(--color-accent);
    border-radius:var(--radius-pill);

    transform:scaleX(0);
    transform-origin:right;

    transition:transform var(--transition);
}

.nav-link:hover,
.nav-link.is-active{
    color:var(--color-accent);
}

.nav-link:hover::after,
.nav-link.is-active::after{
    transform:scaleX(1);
    transform-origin:left;
}


/*==============================
  NAVIGATION ACTIONS
===============================*/

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

    gap:var(--space-md);

    flex-shrink:0;
}

.nav-cta{
    padding:.85rem 1.4rem;
}


/*==============================
  MOBILE MENU TOGGLE
===============================*/

.menu-toggle{
    display:none;

    width:46px;
    height:46px;

    align-items:center;
    justify-content:center;
    flex-direction:column;

    gap:5px;

    border-radius:var(--radius-md);

    color:var(--color-primary);

    transition:
        background var(--transition-fast),
        transform var(--transition-fast);
}

.menu-toggle:hover{
    background:rgba(15,45,82,.07);
}

.menu-toggle__line{
    display:block;

    width:22px;
    height:2px;

    background:currentColor;
    border-radius:var(--radius-pill);

    transition:
        transform var(--transition),
        opacity var(--transition);
}


/* Open hamburger state */

.menu-toggle.is-active .menu-toggle__line:nth-child(1){
    transform:translateY(7px) rotate(45deg);
}

.menu-toggle.is-active .menu-toggle__line:nth-child(2){
    opacity:0;
}

.menu-toggle.is-active .menu-toggle__line:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
}


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

.mobile-navigation{
    display:none;

    position:absolute;
    top:100%;
    left:0;

    width:100%;

    padding:0;

    background:rgba(250,248,244,.98);
    border-bottom:1px solid var(--border-color);

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    opacity:0;
    visibility:hidden;

    transform:translateY(-12px);

    transition:
        opacity var(--transition),
        visibility var(--transition),
        transform var(--transition);
}

.mobile-navigation.is-open{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.mobile-navigation .container{
    padding-top:var(--space-lg);
    padding-bottom:var(--space-xl);
}

.mobile-nav-menu{
    display:flex;
    flex-direction:column;

    margin-bottom:var(--space-lg);
}

.mobile-nav-link{
    display:block;

    padding:1rem 0;

    border-bottom:1px solid var(--border-color);

    font-family:var(--font-heading);
    font-weight:var(--fw-semibold);

    color:var(--text-heading);
}

.mobile-nav-link:hover,
.mobile-nav-link.is-active{
    color:var(--color-accent);
}

.mobile-nav-cta{
    width:100%;
}


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

@media (max-width:992px){

    .nav-menu{
        display:none;
    }

    .menu-toggle{
        display:flex;
    }

    .mobile-navigation{
        display:block;
    }

}


@media (max-width:576px){

    .logo__image{
        height:40px;
    }

    .nav-cta{
        display:none;
    }

}

body.menu-open{
    overflow:hidden;
}

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


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

.site-footer{
    position:relative;
    overflow:hidden;

    background:var(--bg-dark);
    color:rgba(255,255,255,.72);
}


/* Subtle premium glow */

.site-footer::before{
    content:"";

    position:absolute;
    top:-220px;
    left:-180px;

    width:520px;
    height:520px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(198,144,46,.16) 0%,
        rgba(198,144,46,.05) 42%,
        transparent 70%
    );

    pointer-events:none;
}


/* Secondary soft glow */

.site-footer::after{
    content:"";

    position:absolute;
    right:-250px;
    bottom:-300px;

    width:600px;
    height:600px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(232,135,30,.09) 0%,
        transparent 68%
    );

    pointer-events:none;
}


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

.footer-main{
    position:relative;
    z-index:1;

    padding:5.5rem 0 4rem;
}


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

.footer-grid{
    display:grid;

    grid-template-columns:
        minmax(260px,1.6fr)
        repeat(3,minmax(130px,.7fr))
        minmax(200px,1fr);

    gap:var(--space-2xl);
}


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

.footer-brand{
    max-width:340px;
}

.footer-logo{
    display:inline-flex;
    align-items:center;

    margin-bottom:var(--space-lg);
}

.footer-logo:hover{
    color:inherit;
}

.footer-logo__image{
    width:auto;
    height:52px;

    object-fit:contain;
}

.footer-brand__description{
    margin-bottom:var(--space-lg);

    font-size:var(--text-sm);
    line-height:1.8;

    color:rgba(255,255,255,.66);
}

.footer-brand__tagline{
    display:inline-flex;
    align-items:center;

    color:var(--color-accent-light);

    font-family:var(--font-heading);
    font-size:var(--text-sm);
    font-weight:var(--fw-semibold);

    letter-spacing:.08em;
}


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

.footer-column__title{
    margin-bottom:var(--space-lg);

    color:var(--text-light);

    font-size:var(--text-base);
    font-weight:var(--fw-bold);

    letter-spacing:-.01em;
}

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

    gap:.8rem;
}

.footer-links a{
    display:inline-flex;

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

    font-size:var(--text-sm);

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}

.footer-links a:hover{
    color:var(--color-accent-light);
    transform:translateX(4px);
}


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

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

    gap:var(--space-lg);
}

.footer-contact-list li{
    display:flex;
    flex-direction:column;

    gap:.25rem;
}

.footer-contact-label{
    color:rgba(255,255,255,.42);

    font-size:var(--text-xs);
    font-weight:var(--fw-semibold);

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

.footer-contact-list a,
.footer-contact-list li > span:last-child{
    color:rgba(255,255,255,.76);

    font-size:var(--text-sm);
}

.footer-contact-list a:hover{
    color:var(--color-accent-light);
}


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

.footer-bottom{
    position:relative;
    z-index:1;

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

.footer-bottom__inner{
    min-height:76px;

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

    gap:var(--space-xl);
}

.footer-copyright{
    margin:0;

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

    font-size:var(--text-sm);
}

.footer-legal{
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:var(--space-lg);
}

.footer-legal a{
    color:rgba(255,255,255,.48);

    font-size:var(--text-xs);
}

.footer-legal a:hover{
    color:var(--color-accent-light);
}


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

@media (max-width:1200px){

    .footer-grid{
        grid-template-columns:
            minmax(260px,1.4fr)
            repeat(2,1fr)
            minmax(200px,1fr);

        gap:var(--space-2xl);
    }

    .footer-contact{
        grid-column:2 / -1;
    }

}


@media (max-width:768px){

    .footer-main{
        padding:4.5rem 0 3rem;
    }

    .footer-grid{
        grid-template-columns:repeat(2,1fr);
        gap:var(--space-2xl) var(--space-xl);
    }

    .footer-brand{
        grid-column:1 / -1;

        max-width:500px;
    }

    .footer-contact{
        grid-column:auto;
    }

    .footer-bottom__inner{
        padding:var(--space-lg) 0;

        flex-direction:column;
        align-items:flex-start;

        min-height:auto;
    }

}


@media (max-width:576px){

    .footer-grid{
        grid-template-columns:1fr;
    }

    .footer-brand,
    .footer-contact{
        grid-column:auto;
    }

    .footer-legal{
        gap:var(--space-md);
    }

}