@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");

:root{
    --spi-header-max:1400px;
    --spi-header-side:20px;
    --spi-beige:#AA9173;
    --spi-beige-dark:#92795E;
    --spi-charcoal:#4A4A49;
    --spi-white:#FFFFFF;
}

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

.spi-header,
.spi-header *,
.spi-header *::before,
.spi-header *::after{
    box-sizing:border-box;
}

.spi-header{
    position:absolute;
    inset:0 0 auto;
    z-index:99990;
    width:100%;
    color:var(--spi-white);
    background:transparent;
    font-family:"Plus Jakarta Sans",Arial,sans-serif;
    transition:
        background-color .28s ease,
        box-shadow .28s ease,
        backdrop-filter .28s ease;
}

.spi-header__shell{
    width:min(calc(100% - (var(--spi-header-side) * 2)),var(--spi-header-max));
    margin-inline:auto;
}

/* =========================================================
   DESKTOP TOP ROW
   ========================================================= */

.spi-header__top{
    min-height:84px;
    display:grid;
    grid-template-columns:minmax(210px,auto) minmax(0,1fr) auto;
    align-items:center;
    column-gap:32px;
    border-bottom:1px solid rgba(255,255,255,.20);
}

.spi-header__brand{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-self:start;
    width:220px;
    min-width:0;
    text-decoration:none;
}

.spi-header__logo{
    display:block;
    width:auto;
    max-width:220px;
    height:31px;
    object-fit:contain;
    object-position:left center;
    transition:opacity .22s ease;
}

.spi-header__logo--sticky{
    position:absolute;
    inset:auto auto auto 0;
    opacity:0;
}

.spi-header__actions{
    justify-self:end;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    min-width:0;
}

.spi-header__contact{
    display:flex;
    align-items:center;
    min-width:0;
}

.spi-header__valuation{
    min-height:52px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:0 26px;
    border:1px solid var(--spi-beige);
    border-radius:999px;
    color:var(--spi-white)!important;
    background:var(--spi-beige);
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    text-decoration:none!important;
    transition:
        background-color .22s ease,
        border-color .22s ease,
        transform .22s ease,
        box-shadow .22s ease;
}

.spi-header__valuation:hover{
    color:var(--spi-white)!important;
    background:var(--spi-beige-dark);
    border-color:var(--spi-beige-dark);
    transform:translateY(-1px);
    box-shadow:0 11px 28px rgba(0,0,0,.12);
}

.spi-header__valuation span{
    font-size:11px;
    line-height:1;
    font-weight:700;
    letter-spacing:.015em;
    white-space:nowrap;
}

.spi-header__valuation svg{
    width:22px;
    height:14px;
    flex:0 0 auto;
}

.spi-header__valuation path{
    fill:none;
    stroke:currentColor;
    stroke-width:1.25;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* =========================================================
   MAIN DESKTOP NAVIGATION
   Starts exactly at logo left edge
   ========================================================= */

.spi-header__main-nav{
    min-height:64px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
}

.spi-header__main-nav nav,
.spi-header__main-nav nav>div{
    width:100%;
}

.spi-header__menu,
.spi-header__main-nav nav>div>ul,
.spi-header__sticky-nav nav>div>ul{
    display:flex;
    align-items:center;
    margin:0;
    padding:0;
    list-style:none;
}

.spi-header__menu--main,
.spi-header__main-nav nav>div>ul{
    justify-content:flex-start;
    gap:clamp(28px,2.35vw,42px);
}

.spi-header__menu li,
.spi-header__main-nav li,
.spi-header__sticky-nav li{
    position:relative;
    margin:0;
    padding:0;
    list-style:none;
}

.spi-header__menu>li>a,
.spi-header__main-nav nav>div>ul>li>a{
    position:relative;
    display:flex;
    align-items:center;
    min-height:48px;
    padding:0;
    color:var(--spi-white)!important;
    font-size:18px;
    line-height:1.15;
    font-weight:500;
    letter-spacing:-.025em;
    white-space:nowrap;
    text-decoration:none!important;
}

.spi-header__menu>li>a::after,
.spi-header__main-nav nav>div>ul>li>a::after{
    content:"";
    position:absolute;
    right:0;
    bottom:2px;
    left:0;
    height:1px;
    background:var(--spi-beige);
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform .25s ease;
}

.spi-header__menu>li>a:hover::after,
.spi-header__menu>li.current-menu-item>a::after,
.spi-header__menu>li.current-menu-ancestor>a::after{
    transform:scaleX(1);
}

/* Dropdowns */
.spi-header__menu .sub-menu,
.spi-header nav .sub-menu{
    position:absolute;
    top:100%;
    left:-18px;
    min-width:240px;
    margin:0;
    padding:12px;
    border:1px solid rgba(74,74,73,.08);
    border-radius:16px;
    background:rgba(255,255,255,.98);
    box-shadow:0 18px 50px rgba(0,0,0,.14);
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    transition:opacity .2s ease,visibility .2s ease,transform .2s ease;
}

.spi-header__menu li:hover>.sub-menu,
.spi-header__menu li:focus-within>.sub-menu{
    opacity:1;
    visibility:visible;
    transform:none;
}

.spi-header__menu .sub-menu a{
    display:block;
    padding:10px 12px;
    border-radius:10px;
    color:var(--spi-charcoal)!important;
    font-size:14px;
    line-height:1.35;
    text-decoration:none!important;
}

.spi-header__menu .sub-menu a:hover{
    background:rgba(170,145,115,.10);
}

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

.spi-header__sticky-nav{
    display:none;
    min-width:0;
}

.spi-header.is-scrolled{
    position:fixed;
    color:var(--spi-charcoal);
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    box-shadow:0 10px 34px rgba(0,0,0,.10);
}

.spi-header.is-scrolled .spi-header__top{
    min-height:74px;
    border-bottom:0;
}

.spi-header.is-scrolled .spi-header__logo--default{
    opacity:0;
}

.spi-header.is-scrolled .spi-header__logo--sticky{
    opacity:1;
}

.spi-header.is-scrolled .spi-header__main-nav{
    display:none;
}

.spi-header.is-scrolled .spi-header__sticky-nav{
    display:flex;
    align-items:center;
    align-self:stretch;
    min-height:74px;
}

.spi-header.is-scrolled .spi-header__sticky-nav nav,
.spi-header.is-scrolled .spi-header__sticky-nav nav>div,
.spi-header.is-scrolled .spi-header__sticky-nav nav>div>ul{
    width:100%;
    height:100%;
}

.spi-header.is-scrolled .spi-header__menu--sticky,
.spi-header.is-scrolled .spi-header__sticky-nav nav>div>ul{
    justify-content:center;
    gap:clamp(22px,1.7vw,31px);
}

.spi-header.is-scrolled .spi-header__sticky-nav li{
    display:flex;
    align-items:center;
    height:100%;
}

html body .spi-header.is-scrolled .spi-header__sticky-nav nav ul>li>a,
html body .spi-header.is-scrolled .spi-header__sticky-nav nav>div>ul>li>a,
html body .spi-header.is-scrolled .spi-header__sticky-nav .current-menu-item>a,
html body .spi-header.is-scrolled .spi-header__sticky-nav .current-menu-ancestor>a,
html body .spi-header.is-scrolled .spi-header__sticky-nav .current_page_item>a,
html body .spi-header.is-scrolled .spi-header__sticky-nav a:hover{
    display:flex;
    align-items:center;
    justify-content:center;
    height:100%;
    min-height:0;
    padding:0;
    color:#4A4A49!important;
    -webkit-text-fill-color:#4A4A49!important;
    opacity:1!important;
    font-size:15px;
    line-height:1;
    font-weight:500;
    white-space:nowrap;
    text-decoration:none!important;
}

.spi-header.is-scrolled .spi-header__valuation{
    min-height:48px;
}

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

.spi-header__toggle{
    display:none;
    position:relative;
    width:46px;
    height:46px;
    flex:0 0 46px;
    padding:0;
    border:0;
    background:transparent;
    cursor:pointer;
    z-index:100002;
}

.spi-header__toggle span{
    position:absolute;
    left:12px;
    width:22px;
    height:2px;
    border-radius:999px;
    background:var(--spi-beige);
    transform-origin:center;
    transition:top .25s ease,transform .25s ease;
}

.spi-header__toggle span:first-child{top:18px}
.spi-header__toggle span:last-child{top:26px}

.spi-header__toggle.is-active span:first-child{
    top:22px;
    transform:rotate(45deg);
}

.spi-header__toggle.is-active span:last-child{
    top:22px;
    transform:rotate(-45deg);
}

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

.spi-header__mobile-panel{
    display:none;
}

@media(max-width:980px){

    .spi-header{
        position:absolute;
        background:transparent;
        box-shadow:none;
    }

    .spi-header__shell{
        width:calc(100% - 28px);
    }

    .spi-header__top,
    .spi-header.is-scrolled .spi-header__top{
        min-height:74px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        border-bottom:0;
    }

    .spi-header__brand{
        width:min(178px,46vw);
    }

    .spi-header__logo,
    .spi-header.is-scrolled .spi-header__logo{
        width:100%;
        max-width:none;
        height:auto;
    }

    .spi-header__contact,
    .spi-header__valuation,
    .spi-header__main-nav,
    .spi-header__sticky-nav{
        display:none!important;
    }

    .spi-header__actions{
        margin-left:auto;
    }

    .spi-header__toggle{
        display:block;
    }

    /* Transparent until scroll, like desktop */
    .spi-header:not(.is-scrolled):not(.is-menu-open){
        background:transparent!important;
        box-shadow:none!important;
        backdrop-filter:none!important;
        -webkit-backdrop-filter:none!important;
    }

    /* White only after scroll */
    .spi-header.is-scrolled:not(.is-menu-open){
        position:fixed;
        background:rgba(255,255,255,.96)!important;
        box-shadow:0 8px 24px rgba(0,0,0,.08)!important;
        backdrop-filter:blur(12px);
        -webkit-backdrop-filter:blur(12px);
    }

    /* White while menu is open */
    .spi-header.is-menu-open{
        position:fixed;
        background:#fff!important;
        box-shadow:0 8px 24px rgba(0,0,0,.08)!important;
    }

    .spi-header.is-menu-open .spi-header__logo--default,
    .spi-header.is-scrolled .spi-header__logo--default{
        opacity:0;
    }

    .spi-header.is-menu-open .spi-header__logo--sticky,
    .spi-header.is-scrolled .spi-header__logo--sticky{
        opacity:1;
    }

    .spi-header__mobile-panel{
        position:fixed;
        inset:0;
        display:block;
        width:100%;
        height:100vh;
        height:100dvh;
        padding-top:74px;
        background:#fff;
        opacity:0;
        visibility:hidden;
        transform:translateY(-8px);
        transition:opacity .28s ease,visibility .28s ease,transform .32s ease;
        overflow:hidden;
        z-index:99990;
    }

    .spi-header__mobile-panel.is-open{
        opacity:1;
        visibility:visible;
        transform:none;
    }

    .spi-header__mobile-layout{
        width:min(calc(100% - 34px),620px);
        height:calc(100dvh - 74px);
        margin-inline:auto;
        padding:clamp(16px,3vh,30px) 0;
        display:grid;
        grid-template-rows:minmax(0,1fr) auto;
        gap:clamp(14px,2.5vh,26px);
        overflow:hidden;
    }

    .spi-header__mobile-scroll{
        min-height:0;
        overflow-y:auto;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
    }

    .spi-header__mobile-menu,
    .spi-header__mobile-scroll nav>div>ul{
        display:grid;
        margin:0;
        padding:0;
        list-style:none;
    }

    .spi-header__mobile-menu li,
    .spi-header__mobile-scroll nav li{
        margin:0;
        padding:0;
        list-style:none;
        border-bottom:1px solid rgba(74,74,73,.10);
    }

    .spi-header__mobile-menu a,
    .spi-header__mobile-scroll nav a{
        display:flex;
        align-items:center;
        padding:clamp(9px,1.55vh,14px) 0;
        color:#4A4A49!important;
        -webkit-text-fill-color:#4A4A49!important;
        font-size:clamp(19px,5vw,28px);
        line-height:1.08;
        font-weight:500;
        letter-spacing:-.025em;
        text-decoration:none!important;
    }

    .spi-header__mobile-menu .sub-menu,
    .spi-header__mobile-scroll .sub-menu{
        position:static;
        min-width:0;
        padding:0 0 8px 14px;
        border:0;
        border-radius:0;
        background:transparent;
        box-shadow:none;
        opacity:1;
        visibility:visible;
        transform:none;
    }

    .spi-header__mobile-menu .sub-menu a,
    .spi-header__mobile-scroll .sub-menu a{
        padding:7px 0;
        font-size:15px;
    }

    .spi-header__mobile-footer{
        display:grid;
        grid-template-columns:minmax(0,1fr) auto;
        align-items:center;
        gap:12px 14px;
        padding-top:14px;
        border-top:1px solid rgba(74,74,73,.12);
    }

    .spi-header__mobile-contact{
        min-width:0;
        color:#4A4A49;
    }

    .spi-header__mobile-contact .spi-menu-contact{
        color:#4A4A49!important;
    }

    .spi-header__socials{
        display:flex;
        align-items:center;
        gap:8px;
    }

    .spi-header__socials a{
        width:40px;
        height:40px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        border:1px solid rgba(74,74,73,.14);
        border-radius:50%;
        color:#4A4A49!important;
        text-decoration:none!important;
    }

    .spi-header__socials svg{
        width:18px;
        height:18px;
    }

    .spi-header__socials svg path,
    .spi-header__socials svg rect,
    .spi-header__socials svg circle{
        fill:none;
        stroke:currentColor;
        stroke-width:1.55;
        stroke-linecap:round;
        stroke-linejoin:round;
    }

    .spi-header__socials a:nth-child(2) svg path{
        fill:currentColor;
        stroke:none;
    }

    .spi-header__mobile-valuation{
        grid-column:1/-1;
        min-height:46px;
        display:flex;
        align-items:center;
        justify-content:center;
        padding:0 20px;
        border-radius:999px;
        color:#fff!important;
        background:var(--spi-beige);
        font-size:11px;
        line-height:1;
        font-weight:700;
        letter-spacing:.08em;
        text-transform:uppercase;
        text-decoration:none!important;
    }

    body.spi-mobile-menu-open{
        overflow:hidden;
        touch-action:none;
    }
}

@media(max-width:390px), (max-height:700px) and (max-width:980px){
    .spi-header__mobile-layout{
        padding-top:12px;
        padding-bottom:12px;
        gap:10px;
    }

    .spi-header__mobile-menu a,
    .spi-header__mobile-scroll nav a{
        padding:7px 0;
        font-size:clamp(17px,4.7vw,23px);
    }

    .spi-header__mobile-valuation{
        min-height:42px;
    }
}

@media(prefers-reduced-motion:reduce){
    .spi-header,
    .spi-header *,
    .spi-header *::before,
    .spi-header *::after{
        scroll-behavior:auto!important;
        transition:none!important;
        animation:none!important;
    }
}