*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#07090b;color:#fff}
body{font-family:Arial,Helvetica,sans-serif;overflow:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

.split-stage{
    position:relative;
    display:grid;
    grid-template-rows:1fr 58px;
    min-height:100svh;
    background:#07090b;
}
.split-brand{
    position:fixed;
    top:30px;
    left:50%;
    z-index:20;
    display:flex;
    align-items:center;
    flex-direction:column;
    transform:translateX(-50%);
    pointer-events:none;
}
.split-brand__logo{
    width:86px;
    height:58px;
    object-fit:contain;
    filter:brightness(0) invert(1);
}
.split-brand__text{
    font-size:54px;
    font-weight:200;
    letter-spacing:-.08em;
}
.split-brand__name{
    margin-top:6px;
    font-size:11px;
    letter-spacing:.48em;
    text-transform:uppercase;
}
.split-directions{
    position:relative;
    display:flex;
    min-height:0;
    overflow:hidden;
}
.split-direction{
    position:relative;
    display:flex;
    flex:1 1 0;
    min-width:0;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-right:1px solid rgba(255,255,255,.12);
    transition:flex .7s cubic-bezier(.2,.7,.2,1);
}
.split-direction:last-of-type{border-right:0}
.split-direction__image,
.split-direction__shade{
    position:absolute;
    inset:0;
}
.split-direction__image{
    background:
        var(--direction-image)
        var(--direction-position, center center)/cover no-repeat;
    transform:scale(1.025);
    transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .6s ease;
}
.split-direction__shade{
    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.70),
            rgba(0,0,0,.30) 45%,
            rgba(0,0,0,.16)
        );
    transition:background .55s ease;
}
.split-direction__content{
    position:relative;
    z-index:3;
    width:min(450px,72%);
    margin-top:68px;
    transition:transform .65s cubic-bezier(.2,.7,.2,1);
}
.split-direction__title{
    margin:0 0 34px;
    font-size:clamp(48px,5.2vw,92px);
    font-weight:300;
    line-height:.9;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.split-direction__eyebrow{
    margin:0 0 22px;
    font-size:12px;
    letter-spacing:.35em;
    text-transform:uppercase;
}
.split-direction__subtitle{
    margin:0 0 18px;
    color:rgba(255,255,255,.72);
    font-size:14px;
    letter-spacing:.08em;
}
.split-direction__description{
    max-width:370px;
    margin:0 0 28px;
    color:rgba(255,255,255,.54);
    font-size:12px;
    line-height:1.55;
}
.split-direction__button{
    display:flex;
    width:198px;
    height:54px;
    align-items:center;
    justify-content:space-between;
    padding:0 24px;
    border:1px solid rgba(255,255,255,.65);
    font-size:11px;
    letter-spacing:.4em;
    transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.split-direction:hover .split-direction__button{
    background:#fff;
    color:#050607;
    border-color:#fff;
}
.split-directions:has(.split-direction:hover) .split-direction{
    flex:.72 1 0;
}
.split-directions:has(.split-direction:hover) .split-direction:hover{
    flex:1.28 1 0;
}
.split-direction:hover .split-direction__image{
    transform:scale(1.065);
}
.split-direction:hover .split-direction__content{
    transform:translateX(12px);
}
.split-center-mark{
    position:absolute;
    left:50%;
    top:53%;
    z-index:10;
    display:grid;
    width:74px;
    height:74px;
    place-items:center;
    border:1px solid rgba(255,255,255,.72);
    border-radius:50%;
    background:rgba(4,6,8,.42);
    font-size:19px;
    font-weight:300;
    transform:translate(-50%,-50%);
    backdrop-filter:blur(9px);
    pointer-events:none;
}
.split-center-mark::before,
.split-center-mark::after{
    content:"";
    position:absolute;
    top:50%;
    width:48px;
    height:1px;
    background:rgba(255,255,255,.28);
}
.split-center-mark::before{right:100%}
.split-center-mark::after{left:100%}
.split-footer{
    position:relative;
    z-index:15;
    display:grid;
    grid-template-columns:1.6fr 1fr 1fr 1.6fr;
    align-items:center;
    gap:18px;
    padding:0 4vw;
    border-top:1px solid rgba(255,255,255,.15);
    background:#07090b;
    font-size:8px;
    letter-spacing:.3em;
    text-transform:uppercase;
}
.split-footer > *:nth-child(2),
.split-footer > *:nth-child(3){text-align:center}
.split-footer > *:last-child{text-align:right}

@media(max-width:900px){
    body{overflow:auto}
    .split-stage{display:block}
    .split-brand{top:22px}
    .split-brand__logo{width:62px;height:44px}
    .split-brand__name{font-size:9px}
    .split-directions{
        display:grid;
        min-height:100svh;
        grid-auto-rows:minmax(52svh,auto);
    }
    .split-direction{
        min-height:52svh;
        border-right:0;
        border-bottom:1px solid rgba(255,255,255,.13);
    }
    .split-direction__content{
        width:calc(100% - 44px);
        margin-top:48px;
        padding:50px 0 32px;
    }
    .split-direction__title{
        margin-bottom:20px;
        font-size:clamp(42px,14vw,74px);
    }
    .split-direction__eyebrow{margin-bottom:12px;font-size:10px}
    .split-direction__subtitle{font-size:12px}
    .split-direction__description{font-size:11px}
    .split-direction__button{width:170px;height:48px}
    .split-center-mark{display:none}
    .split-directions:has(.split-direction:hover) .split-direction,
    .split-directions:has(.split-direction:hover) .split-direction:hover{
        flex:1 1 auto;
    }
    .split-footer{
        display:grid;
        grid-template-columns:1fr 1fr;
        min-height:84px;
        padding:16px 20px;
        gap:14px;
    }
    .split-footer > *{text-align:left!important}
    .split-footer > *:nth-child(even){text-align:right!important}
}


/* ==========================================================
   POLISH STEP 2 — closer to approved mockup
========================================================== */

.split-brand
{
    top: 38px;
}

.split-brand__logo
{
    width: 92px;
    height: 66px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.split-brand__name
{
    margin-top: 7px;
    font-size: 10px;
    letter-spacing: .48em;
}

.split-direction__content
{
    width: min(430px, 70%);
    margin-top: 115px;
}

.split-direction__title
{
    margin-bottom: 36px;
    font-size: clamp(58px, 5vw, 86px);
    font-weight: 300;
    letter-spacing: .055em;
}

.split-direction__eyebrow
{
    margin-bottom: 21px;
    font-size: 11px;
    letter-spacing: .36em;
}

.split-direction__subtitle
{
    margin-bottom: 22px;
    font-size: 13px;
    letter-spacing: .045em;
}

.split-direction__button
{
    width: 200px;
    height: 54px;
}

.split-footer
{
    min-height: 58px;
}

@media (min-width: 901px)
{
    .split-direction:first-of-type .split-direction__content
    {
        transform: translateX(4%);
    }

    .split-direction:last-of-type .split-direction__content
    {
        transform: translateX(-4%);
    }

    .split-direction:first-of-type:hover .split-direction__content
    {
        transform: translateX(calc(4% + 12px));
    }

    .split-direction:last-of-type:hover .split-direction__content
    {
        transform: translateX(calc(-4% + 12px));
    }
}


/* ==========================================================
   POLISH STEP 3 — approved split-screen look
========================================================== */

@media (min-width: 901px)
{
    .split-stage
    {
        grid-template-rows: minmax(0, 1fr) 60px;
        height: 100svh;
        min-height: 720px;
    }

    .split-directions
    {
        height: 100%;
    }

    .split-brand
    {
        top: 34px;
    }

    .split-brand__logo
    {
        width: 82px;
        height: 58px;
    }

    .split-brand__name
    {
        margin-top: 4px;
        font-size: 10px;
        letter-spacing: .46em;
    }

    .split-direction
    {
        transition:
            flex .72s cubic-bezier(.22,.61,.36,1),
            filter .45s ease;
    }

    .split-direction__image
    {
        transform: scale(1.02);
        transition:
            transform .9s cubic-bezier(.22,.61,.36,1),
            filter .45s ease;
    }

    .split-direction__shade
    {
        background:
            linear-gradient(
                90deg,
                rgba(0,0,0,.74) 0%,
                rgba(0,0,0,.50) 28%,
                rgba(0,0,0,.25) 56%,
                rgba(0,0,0,.10) 100%
            );
        transition: background .5s ease, opacity .5s ease;
    }

    .split-direction:nth-of-type(even) .split-direction__shade
    {
        background:
            linear-gradient(
                270deg,
                rgba(0,0,0,.42) 0%,
                rgba(0,0,0,.24) 34%,
                rgba(0,0,0,.14) 62%,
                rgba(0,0,0,.20) 100%
            );
    }

    .split-direction__content
    {
        width: min(430px, 69%);
        margin-top: 92px;
        transition:
            transform .68s cubic-bezier(.22,.61,.36,1),
            opacity .4s ease;
    }

    .split-direction:first-of-type .split-direction__content
    {
        transform: translateX(2%);
    }

    .split-direction:last-of-type .split-direction__content
    {
        transform: translateX(-2%);
    }

    .split-direction__title
    {
        margin: 0 0 32px;
        font-size: clamp(56px, 4.6vw, 82px);
        line-height: .92;
        letter-spacing: .05em;
    }

    .split-direction__eyebrow
    {
        margin-bottom: 18px;
        font-size: 11px;
        letter-spacing: .33em;
    }

    .split-direction__subtitle
    {
        margin-bottom: 20px;
        font-size: 13px;
    }

    .split-direction__description
    {
        max-width: 330px;
        margin-bottom: 24px;
        font-size: 11px;
    }

    .split-direction__button
    {
        width: 200px;
        height: 52px;
        padding: 0 22px;
        font-size: 10px;
        letter-spacing: .36em;
    }

    .split-directions:has(.split-direction:hover) .split-direction
    {
        flex: .78 1 0;
    }

    .split-directions:has(.split-direction:hover) .split-direction:hover
    {
        flex: 1.22 1 0;
    }

    .split-directions:has(.split-direction:hover)
    .split-direction:not(:hover)
    .split-direction__image
    {
        filter: brightness(.64) saturate(.78);
    }

    .split-direction:hover .split-direction__image
    {
        transform: scale(1.055);
    }

    .split-direction:hover .split-direction__shade
    {
        opacity: .82;
    }

    .split-direction:first-of-type:hover .split-direction__content
    {
        transform: translateX(calc(2% + 10px));
    }

    .split-direction:last-of-type:hover .split-direction__content
    {
        transform: translateX(calc(-2% - 10px));
    }

    .split-center-mark
    {
        top: 54%;
        width: 68px;
        height: 68px;
        font-size: 18px;
        background: rgba(7,9,11,.48);
        border-color: rgba(255,255,255,.66);
    }

    .split-center-mark::before,
    .split-center-mark::after
    {
        width: 44px;
    }

    .split-footer
    {
        min-height: 60px;
        padding: 0 3.7vw;
        font-size: 8px;
        letter-spacing: .27em;
    }

    .split-footer a
    {
        transition: color .2s ease, opacity .2s ease;
    }

    .split-footer a:hover
    {
        color: #fff;
        opacity: .68;
    }
}

.split-direction:focus-visible
{
    outline: 1px solid rgba(255,255,255,.75);
    outline-offset: -1px;
}

.split-direction:focus-visible .split-direction__button
{
    background: #fff;
    color: #050607;
    border-color: #fff;
}

.split-direction__image
{
    background-color: #080a0c;
}

@media (min-width: 721px) and (max-width: 900px)
{
    .split-brand
    {
        top: 24px;
    }

    .split-directions
    {
        grid-auto-rows: minmax(56svh, auto);
    }

    .split-direction
    {
        min-height: 56svh;
    }

    .split-direction__content
    {
        width: calc(100% - 64px);
        max-width: 520px;
        margin-top: 44px;
    }
}

@media (max-width: 720px)
{
    .split-brand
    {
        top: 18px;
    }

    .split-brand__logo
    {
        width: 54px;
        height: 38px;
    }

    .split-brand__name
    {
        margin-top: 3px;
        font-size: 8px;
        letter-spacing: .38em;
    }

    .split-directions
    {
        padding-top: 0;
        grid-auto-rows: minmax(56svh, auto);
    }

    .split-direction
    {
        min-height: 56svh;
    }

    .split-direction__shade,
    .split-direction:nth-of-type(even) .split-direction__shade
    {
        background:
            linear-gradient(
                90deg,
                rgba(0,0,0,.72) 0%,
                rgba(0,0,0,.46) 48%,
                rgba(0,0,0,.22) 100%
            );
    }

    .split-direction__content
    {
        width: calc(100% - 36px);
        margin-top: 32px;
        padding: 72px 0 34px;
    }

    .split-direction__title
    {
        margin-bottom: 18px;
        font-size: clamp(40px, 13vw, 64px);
        letter-spacing: .04em;
    }

    .split-direction__eyebrow
    {
        margin-bottom: 11px;
        font-size: 9px;
    }

    .split-direction__subtitle
    {
        margin-bottom: 14px;
        font-size: 11px;
    }

    .split-direction__description
    {
        max-width: 280px;
        font-size: 10px;
    }

    .split-direction__button
    {
        width: 162px;
        height: 46px;
        padding: 0 17px;
        font-size: 9px;
    }

    .split-footer
    {
        min-height: 88px;
        font-size: 7px;
        letter-spacing: .2em;
    }
}

/* ==========================================================
   STEP 6.2 — exact real divider tracking
========================================================== */

@media (min-width: 901px)
{
    .split-stage
    {
        --split-divider-x-px: 50vw;
    }

    /*
     * The JS writes the REAL current x-coordinate of the divider
     * between the first and second split-direction panels.
     * Both floating elements are positioned from that same value.
     */

    .split-brand
    {
        left: var(--split-divider-x-px);
        transform: translateX(-50%);
        transition: none;
    }

    .split-center-mark
    {
        left: var(--split-divider-x-px);
        transform: translate(-50%, -50%);
        transition: none;
    }
}

@media (max-width: 900px)
{
    .split-brand
    {
        left: 50%;
        transform: translateX(-50%);
    }

    .split-center-mark
    {
        left: 50%;
        transform: translate(-50%, -50%);
    }
}