/* ==========================================================
   ABOUT — HERO
   CLOSE TO THE BUSINESS / CLOSE TO THE BUILD
   ========================================================== */
   /* ==========================================================
   ABOUT — SITE WIDTH
   ========================================================== */

.wn-about .wn-wrap{
    width:min(1280px, calc(100% - 100px));
    margin-inline:auto;
}

@media (max-width:760px){
    .wn-about .wn-wrap{
        width:min(100% - 40px, 1280px);
    }
}

@media (max-width:520px){
    .wn-about .wn-wrap{
        width:min(100% - 32px, 1280px);
    }
}

@media (max-width:380px){
    .wn-about .wn-wrap{
        width:min(100% - 28px, 1280px);
    }
}

.wn-about{
    --wn-about-navy:#031421;
    --wn-about-navy-2:#061b2b;
    --wn-about-panel:#08253a;
    --wn-about-line:rgba(92,158,205,.16);
    --wn-about-blue:#168df4;
    --wn-about-blue-light:#62b8fa;
    --wn-about-green:#3bd29b;
    --wn-about-text:#f3f8fb;
    --wn-about-muted:#8ba5b8;
}

.wn-about .wn-about-hero{
    position:relative;
    overflow:hidden;
    padding:92px 0 0;
    color:#fff;
    background:
        radial-gradient(circle at 78% 38%,rgba(18,123,207,.15),transparent 29%),
        radial-gradient(circle at 42% 82%,rgba(17,82,132,.07),transparent 26%),
        linear-gradient(145deg,#02111d 0%,#041827 56%,#03131f 100%);
}

.wn-about .wn-about-hero::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.34;
    background-image:
        linear-gradient(rgba(91,154,199,.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(91,154,199,.04) 1px,transparent 1px);
    background-size:72px 72px;
    mask-image:linear-gradient(
        to bottom,
        transparent,
        #000 15%,
        #000 86%,
        transparent
    );
}

.wn-about .wn-about-hero::after{
    content:"";
    position:absolute;
    right:-220px;
    top:-270px;
    width:790px;
    height:790px;
    border:1px solid rgba(75,153,211,.055);
    border-radius:50%;
    box-shadow:
        0 0 0 105px rgba(42,131,196,.018),
        0 0 0 210px rgba(42,131,196,.009);
    pointer-events:none;
}


/* ==========================================================
   MAIN GRID
   ========================================================== */

.wn-about .wn-about-hero-grid{
    position:relative;
    z-index:3;
    display:grid;
    grid-template-columns:minmax(0,.84fr) minmax(520px,1.16fr);
    gap:82px;
    align-items:center;
    min-height:535px;
}


/* ==========================================================
   LEFT / COPY
   ========================================================== */

.wn-about .wn-about-hero-content{
    min-width:0;
    padding-bottom:56px;
}

.wn-about .wn-about-hero-kicker{
    display:flex;
    align-items:center;
    gap:11px;
    margin-bottom:26px;
}

.wn-about .wn-about-hero-kicker i{
    position:relative;
    width:35px;
    height:1px;
    background:#168df4;
}

.wn-about .wn-about-hero-kicker i::after{
    content:"";
    position:absolute;
    right:-2px;
    top:-2px;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#4eaff7;
    box-shadow:0 0 9px rgba(78,175,247,.38);
}

.wn-about .wn-about-hero-kicker span{
    color:#61b4f3;
    font-size:8px;
    line-height:1;
    font-weight:800;
    letter-spacing:.16em;
}

.wn-about .wn-about-hero-content h1{
    max-width:720px;
    margin:0;
    color:#f5f9fc;
    font-size:clamp(48px,4.35vw,67px);
    line-height:.98;
    font-weight:650;
    letter-spacing:-.055em;
}

.wn-about .wn-about-hero-content h1 > span{
    display:block;
    color:#8fa5b6;
    font-weight:520;
}

.wn-about .wn-about-hero-content h1 > strong{
    display:block;
    color:#61b5fa;
    font-weight:700;
}

.wn-about .wn-about-hero-lead{
    max-width:620px;
    margin:29px 0 0;
    color:#91a9ba;
    font-size:14px;
    line-height:1.75;
}

.wn-about .wn-about-hero-principle{
    display:grid;
    grid-template-columns:112px minmax(0,1fr);
    gap:18px;
    align-items:center;
    max-width:490px;
    margin-top:35px;
    padding-top:23px;
    border-top:1px solid rgba(95,155,198,.13);
}

.wn-about .wn-about-hero-principle > span{
    color:#4f7896;
    font-size:7px;
    line-height:1.3;
    font-weight:800;
    letter-spacing:.13em;
}

.wn-about .wn-about-hero-principle > strong{
    position:relative;
    padding-left:17px;
    color:#c4d4df;
    font-size:12px;
    line-height:1.4;
    font-weight:650;
}

.wn-about .wn-about-hero-principle > strong::before{
    content:"";
    position:absolute;
    left:0;
    top:2px;
    bottom:2px;
    width:2px;
    background:linear-gradient(
        #178ef4,
        rgba(23,142,244,.12)
    );
}


/* ==========================================================
   RIGHT / RELATIONSHIP ARCHITECTURE
   ========================================================== */

.wn-about .wn-about-hero-visual{
    position:relative;
    min-width:0;
    min-height:425px;
    border:1px solid rgba(85,153,202,.15);
    border-radius:5px;
    background:
        linear-gradient(rgba(72,137,185,.032) 1px,transparent 1px),
        linear-gradient(90deg,rgba(72,137,185,.032) 1px,transparent 1px),
        radial-gradient(circle at 50% 49%,rgba(15,128,214,.10),transparent 29%),
        rgba(4,25,41,.52);
    background-size:47px 47px,47px 47px,auto,auto;
    box-shadow:0 28px 70px rgba(0,0,0,.13);
}

.wn-about .wn-about-hero-visual::before{
    content:"";
    position:absolute;
    left:50%;
    top:52%;
    width:260px;
    height:260px;
    border:1px solid rgba(61,145,206,.07);
    border-radius:50%;
    transform:translate(-50%,-50%);
    box-shadow:
        0 0 0 52px rgba(47,131,193,.018),
        0 0 0 104px rgba(47,131,193,.009);
    pointer-events:none;
}


/* ==========================================================
   VISUAL HEAD
   ========================================================== */

.wn-about .wn-about-hero-visual-head{
    position:relative;
    z-index:5;
    display:flex;
    justify-content:space-between;
    align-items:center;
    min-height:66px;
    padding:0 20px;
    border-bottom:1px solid rgba(91,153,197,.11);
}

.wn-about .wn-about-hero-visual-head > div span{
    display:block;
    color:#559ed3;
    font-size:7px;
    line-height:1;
    font-weight:800;
    letter-spacing:.13em;
}

.wn-about .wn-about-hero-visual-head > div small{
    display:block;
    margin-top:7px;
    color:#587990;
    font-size:7px;
    line-height:1;
}

.wn-about .wn-about-hero-visual-head em{
    display:flex;
    align-items:center;
    gap:7px;
    padding:7px 9px;
    border:1px solid rgba(61,202,150,.14);
    border-radius:3px;
    color:#54bc94;
    background:rgba(45,190,137,.035);
    font-size:6px;
    line-height:1;
    font-style:normal;
    font-weight:800;
    letter-spacing:.09em;
}

.wn-about .wn-about-hero-visual-head em i{
    width:5px;
    height:5px;
    border-radius:50%;
    background:#3bd29b;
    box-shadow:0 0 8px rgba(59,210,155,.42);
}


/* ==========================================================
   BUSINESS / BUILD SIDES
   ========================================================== */

.wn-about .wn-about-hero-side{
    position:absolute;
    z-index:4;
    top:116px;
    width:190px;
    min-height:150px;
    padding:18px 16px 15px;
    border:1px solid rgba(80,150,200,.17);
    background:
        linear-gradient(145deg,rgba(8,41,66,.96),rgba(5,27,45,.96));
    box-shadow:0 18px 38px rgba(0,0,0,.12);
}

.wn-about .wn-about-hero-side--business{
    left:23px;
    border-radius:4px 13px 4px 4px;
}

.wn-about .wn-about-hero-side--build{
    right:23px;
    border-radius:13px 4px 4px 4px;
}

.wn-about .wn-about-hero-side-index{
    display:grid;
    place-items:center;
    width:27px;
    height:27px;
    border:1px solid rgba(72,157,220,.17);
    border-radius:3px;
    color:#55acf0;
    background:#0a3150;
    font-size:7px;
    line-height:1;
    font-weight:800;
}

.wn-about .wn-about-hero-side-copy{
    margin-top:18px;
}

.wn-about .wn-about-hero-side-copy small{
    display:block;
    color:#5488ad;
    font-size:7px;
    line-height:1;
    font-weight:800;
    letter-spacing:.10em;
}

.wn-about .wn-about-hero-side-copy strong{
    display:block;
    margin-top:7px;
    color:#d6e3ec;
    font-size:15px;
    line-height:1.13;
    font-weight:650;
    letter-spacing:-.02em;
}

.wn-about .wn-about-hero-side-data{
    display:flex;
    gap:4px;
    margin-top:19px;
    padding-top:12px;
    border-top:1px solid rgba(85,145,187,.10);
}

.wn-about .wn-about-hero-side-data span{
    flex:1;
    min-width:0;
    padding:5px 3px;
    border:1px solid rgba(75,139,184,.10);
    color:#567b96;
    background:rgba(4,24,40,.30);
    font-size:5px;
    line-height:1;
    font-weight:800;
    text-align:center;
    letter-spacing:.05em;
}


/* ==========================================================
   DIRECT CONNECTION
   ========================================================== */

.wn-about .wn-about-hero-direct{
    position:absolute;
    z-index:6;
    left:50%;
    top:178px;
    display:grid;
    grid-template-columns:minmax(35px,1fr) 130px minmax(35px,1fr);
    align-items:center;
    width:calc(100% - 390px);
    transform:translateX(-50%);
}

.wn-about .wn-about-hero-direct-line{
    position:relative;
    height:1px;
}

.wn-about .wn-about-hero-direct-line--left{
    background:linear-gradient(
        90deg,
        rgba(41,120,177,.14),
        #238edc
    );
}

.wn-about .wn-about-hero-direct-line--right{
    background:linear-gradient(
        90deg,
        #238edc,
        rgba(41,120,177,.14)
    );
}

.wn-about .wn-about-hero-direct-line i{
    position:absolute;
    top:-3px;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#47a9f1;
    box-shadow:
        0 0 0 5px rgba(71,169,241,.04),
        0 0 11px rgba(71,169,241,.30);
}

.wn-about .wn-about-hero-direct-line--left i{
    right:-3px;
}

.wn-about .wn-about-hero-direct-line--right i{
    left:-3px;
}

.wn-about .wn-about-hero-direct-core{
    text-align:center;
}

.wn-about .wn-about-hero-direct-label{
    display:block;
    margin-bottom:9px;
    color:#557f9e;
    font-size:6px;
    line-height:1;
    font-weight:800;
    letter-spacing:.14em;
}

.wn-about .wn-about-hero-direct-mark{
    display:grid;
    place-items:center;
    width:58px;
    height:58px;
    margin:0 auto;
    border:1px solid rgba(55,158,231,.35);
    border-radius:50%;
    background:
        radial-gradient(circle,rgba(21,139,224,.18),rgba(7,39,63,.94));
    box-shadow:
        0 0 0 9px rgba(45,143,211,.035),
        0 0 25px rgba(29,139,219,.12);
}

.wn-about .wn-about-hero-direct-mark span{
    color:#69baf5;
    font-size:20px;
    line-height:1;
    font-weight:700;
}

.wn-about .wn-about-hero-direct-core > strong{
    display:block;
    margin-top:10px;
    color:#f0f7fb;
    font-size:12px;
    line-height:1;
    font-weight:800;
    letter-spacing:.04em;
}

.wn-about .wn-about-hero-direct-core > small{
    display:block;
    margin-top:7px;
    color:#4e7998;
    font-size:5px;
    line-height:1;
    font-weight:800;
    letter-spacing:.10em;
}


/* ==========================================================
   NO UNNECESSARY LAYERS
   ========================================================== */

.wn-about .wn-about-hero-layers{
    position:absolute;
    z-index:5;
    left:50%;
    bottom:72px;
    width:72%;
    transform:translateX(-50%);
}

.wn-about .wn-about-hero-layers-label{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:11px;
}

.wn-about .wn-about-hero-layers-label span{
    color:#4f748f;
    font-size:6px;
    line-height:1;
    font-weight:800;
    letter-spacing:.11em;
}

.wn-about .wn-about-hero-layers-label strong{
    color:#6696b8;
    font-size:6px;
    line-height:1;
    font-weight:800;
    letter-spacing:.09em;
}

.wn-about .wn-about-hero-layers-track{
    display:grid;
    grid-template-columns:minmax(20px,1fr) auto auto auto minmax(20px,1fr);
    gap:8px;
    align-items:center;
}

.wn-about .wn-about-hero-layers-track > i{
    height:1px;
    background:rgba(54,131,186,.20);
}

.wn-about .wn-about-hero-layer{
    padding:6px 8px;
    border-radius:2px;
    font-size:5px;
    line-height:1;
    font-weight:800;
    letter-spacing:.08em;
}

.wn-about .wn-about-hero-layer--off{
    position:relative;
    color:#405f75;
    border:1px solid rgba(72,113,143,.11);
    background:rgba(5,27,44,.48);
}

.wn-about .wn-about-hero-layer--off::after{
    content:"";
    position:absolute;
    left:3px;
    right:3px;
    top:50%;
    height:1px;
    background:rgba(101,129,149,.45);
    transform:rotate(-8deg);
}

.wn-about .wn-about-hero-layer--active{
    color:#48c897;
    border:1px solid rgba(62,202,151,.18);
    background:rgba(45,188,136,.055);
}


/* ==========================================================
   TRACE
   ========================================================== */

.wn-about .wn-about-hero-trace{
    position:absolute;
    z-index:5;
    left:20px;
    right:20px;
    bottom:18px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    gap:12px;
    align-items:center;
}

.wn-about .wn-about-hero-trace > div{
    display:flex;
    align-items:center;
    gap:9px;
    min-width:0;
}

.wn-about .wn-about-hero-trace > div:last-child{
    flex-direction:row-reverse;
}

.wn-about .wn-about-hero-trace span,
.wn-about .wn-about-hero-trace strong{
    font-size:5px;
    line-height:1;
    font-weight:800;
    letter-spacing:.10em;
}

.wn-about .wn-about-hero-trace span{
    color:#4f7189;
}

.wn-about .wn-about-hero-trace strong{
    color:#5599ca;
}

.wn-about .wn-about-hero-trace i{
    flex:1;
    height:1px;
    background:linear-gradient(
        90deg,
        rgba(43,111,159,.12),
        rgba(42,144,215,.58)
    );
}

.wn-about .wn-about-hero-trace > div:last-child i{
    background:linear-gradient(
        90deg,
        rgba(42,144,215,.58),
        rgba(43,111,159,.12)
    );
}


/* ==========================================================
   BOTTOM COMPANY SIGNAL
   ========================================================== */

.wn-about .wn-about-hero-bottom{
    position:relative;
    z-index:3;
    display:grid;
    grid-template-columns:auto minmax(50px,1fr) auto minmax(50px,1fr) auto;
    gap:24px;
    align-items:center;
    min-height:86px;
    border-top:1px solid rgba(91,154,199,.13);
}

.wn-about .wn-about-hero-bottom-item span{
    display:block;
    color:#4c7089;
    font-size:6px;
    line-height:1;
    font-weight:800;
    letter-spacing:.13em;
}

.wn-about .wn-about-hero-bottom-item strong{
    display:block;
    margin-top:7px;
    color:#819bad;
    font-size:8px;
    line-height:1;
    font-weight:650;
}

.wn-about .wn-about-hero-bottom-line{
    position:relative;
    height:1px;
    background:linear-gradient(
        90deg,
        rgba(57,118,160,.08),
        rgba(57,145,207,.42),
        rgba(57,118,160,.08)
    );
}

.wn-about .wn-about-hero-bottom-line i{
    position:absolute;
    left:50%;
    top:-2px;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#288fd9;
    transform:translateX(-50%);
}


/* ==========================================================
   ≤ 1100
   ========================================================== */

@media (max-width:1100px){

    .wn-about .wn-about-hero{
        padding-top:82px;
    }

    .wn-about .wn-about-hero-grid{
        grid-template-columns:minmax(0,.82fr) minmax(470px,1.18fr);
        gap:45px;
    }

    .wn-about .wn-about-hero-content h1{
        font-size:53px;
    }

    .wn-about .wn-about-hero-side{
        width:168px;
    }

    .wn-about .wn-about-hero-side--business{
        left:17px;
    }

    .wn-about .wn-about-hero-side--build{
        right:17px;
    }

    .wn-about .wn-about-hero-direct{
        grid-template-columns:minmax(20px,1fr) 110px minmax(20px,1fr);
        width:calc(100% - 335px);
    }

    .wn-about .wn-about-hero-direct-mark{
        width:52px;
        height:52px;
    }
}


/* ==========================================================
   ≤ 950
   HERO BECOMES A TWO-SCENE STORY
   ========================================================== */

@media (max-width:950px){

    .wn-about .wn-about-hero-grid{
        grid-template-columns:1fr;
        gap:52px;
        min-height:0;
    }

    .wn-about .wn-about-hero-content{
        display:grid;
        grid-template-columns:minmax(0,1.1fr) minmax(270px,.65fr);
        column-gap:52px;
        padding-bottom:0;
    }

    .wn-about .wn-about-hero-kicker,
    .wn-about .wn-about-hero-content h1{
        grid-column:1;
    }

    .wn-about .wn-about-hero-lead{
        grid-column:2;
        grid-row:1 / span 2;
        align-self:end;
        margin:0;
    }

    .wn-about .wn-about-hero-principle{
        grid-column:1 / -1;
        width:490px;
        margin-top:30px;
    }

    .wn-about .wn-about-hero-content h1{
        font-size:55px;
    }

    .wn-about .wn-about-hero-visual{
        min-height:430px;
    }

    .wn-about .wn-about-hero-side{
        width:205px;
    }

    .wn-about .wn-about-hero-direct{
        width:calc(100% - 405px);
    }

    .wn-about .wn-about-hero-bottom{
        margin-top:50px;
    }
}


/* ==========================================================
   ≤ 760
   ========================================================== */

@media (max-width:760px){

    .wn-about .wn-about-hero{
        padding-top:68px;
    }

    .wn-about .wn-about-hero-content{
        display:block;
    }

    .wn-about .wn-about-hero-content h1{
        font-size:clamp(42px,9vw,54px);
    }

    .wn-about .wn-about-hero-lead{
        max-width:580px;
        margin-top:26px;
    }

    .wn-about .wn-about-hero-principle{
        width:min(490px,100%);
    }

    .wn-about .wn-about-hero-visual{
        min-height:445px;
    }

    .wn-about .wn-about-hero-side{
        width:180px;
    }

    .wn-about .wn-about-hero-direct{
        width:calc(100% - 355px);
        grid-template-columns:minmax(12px,1fr) 105px minmax(12px,1fr);
    }

    .wn-about .wn-about-hero-layers{
        width:78%;
    }

    .wn-about .wn-about-hero-bottom{
        gap:14px;
    }
}


/* ==========================================================
   ≤ 520
   TRUE MOBILE
   ========================================================== */

@media (max-width:520px){

    .wn-about .wn-about-hero{
        padding-top:56px;
    }

    .wn-about .wn-about-hero-kicker{
        margin-bottom:20px;
    }

    .wn-about .wn-about-hero-content h1{
        font-size:39px;
        line-height:1;
    }

    .wn-about .wn-about-hero-lead{
        margin-top:23px;
        font-size:13px;
        line-height:1.68;
    }

    .wn-about .wn-about-hero-principle{
        grid-template-columns:92px minmax(0,1fr);
        gap:12px;
        margin-top:27px;
        padding-top:19px;
    }


    /* visual becomes vertical */

    .wn-about .wn-about-hero-visual{
        display:flex;
        flex-direction:column;
        min-height:0;
        margin-top:0;
        background:
            linear-gradient(rgba(72,137,185,.03) 1px,transparent 1px),
            linear-gradient(90deg,rgba(72,137,185,.03) 1px,transparent 1px),
            rgba(4,25,41,.52);
        background-size:40px 40px;
    }

    .wn-about .wn-about-hero-visual::before{
        left:50%;
        top:47%;
        width:210px;
        height:210px;
        box-shadow:
            0 0 0 38px rgba(47,131,193,.014),
            0 0 0 76px rgba(47,131,193,.007);
    }

    .wn-about .wn-about-hero-visual-head{
        order:1;
        min-height:64px;
        padding:0 13px;
    }

    .wn-about .wn-about-hero-visual-head > div small{
        line-height:1.25;
    }

    .wn-about .wn-about-hero-visual-head em{
        padding:6px;
    }

    .wn-about .wn-about-hero-visual-head em{
        font-size:0;
    }

    .wn-about .wn-about-hero-visual-head em i{
        margin:0;
    }


    /* business */

    .wn-about .wn-about-hero-side,
    .wn-about .wn-about-hero-side--business,
    .wn-about .wn-about-hero-side--build{
        position:relative;
        left:auto;
        right:auto;
        top:auto;
        order:2;
        width:auto;
        min-height:0;
        margin:15px 13px 0;
        padding:15px;
        border-radius:4px;
    }

    .wn-about .wn-about-hero-side{
        display:grid;
        grid-template-columns:29px minmax(0,1fr);
        gap:11px;
        align-items:start;
    }

    .wn-about .wn-about-hero-side-copy{
        margin-top:0;
    }

    .wn-about .wn-about-hero-side-copy strong{
        font-size:14px;
    }

    .wn-about .wn-about-hero-side-data{
        grid-column:1 / -1;
        margin-top:4px;
    }


    /* Webnime bridge */

    .wn-about .wn-about-hero-direct{
        position:relative;
        left:auto;
        top:auto;
        order:3;
        display:grid;
        grid-template-columns:1fr;
        width:auto;
        margin:17px 13px 2px;
        transform:none;
    }

    .wn-about .wn-about-hero-direct-line{
        width:1px;
        height:24px;
        margin:0 auto;
    }

    .wn-about .wn-about-hero-direct-line--left{
        background:linear-gradient(
            transparent,
            #238edc
        );
    }

    .wn-about .wn-about-hero-direct-line--right{
        background:linear-gradient(
            #238edc,
            transparent
        );
    }

    .wn-about .wn-about-hero-direct-line i{
        left:-3px;
        right:auto;
    }

    .wn-about .wn-about-hero-direct-line--left i{
        top:auto;
        bottom:-3px;
    }

    .wn-about .wn-about-hero-direct-line--right i{
        top:-3px;
    }

    .wn-about .wn-about-hero-direct-core{
        padding:10px 0;
    }

    .wn-about .wn-about-hero-direct-mark{
        width:61px;
        height:61px;
    }

    .wn-about .wn-about-hero-direct-mark span{
        font-size:21px;
    }


    /* build follows bridge */

    .wn-about .wn-about-hero-side--build{
        order:4;
        margin-top:2px;
    }


    /* layers */

    .wn-about .wn-about-hero-layers{
        position:relative;
        left:auto;
        bottom:auto;
        order:5;
        width:auto;
        margin:24px 13px 0;
        padding-top:17px;
        border-top:1px solid rgba(91,153,197,.10);
        transform:none;
    }

    .wn-about .wn-about-hero-layers-label{
        display:block;
    }

    .wn-about .wn-about-hero-layers-label strong{
        display:block;
        margin-top:7px;
    }

    .wn-about .wn-about-hero-layers-track{
        grid-template-columns:minmax(10px,1fr) auto auto auto minmax(10px,1fr);
    }


    /* trace */

    .wn-about .wn-about-hero-trace{
        position:relative;
        left:auto;
        right:auto;
        bottom:auto;
        order:6;
        display:block;
        margin:23px 13px 17px;
        padding-top:16px;
        border-top:1px solid rgba(91,153,197,.10);
        text-align:center;
    }

    .wn-about .wn-about-hero-trace > div{
        display:none;
    }

    .wn-about .wn-about-hero-trace strong{
        display:block;
        line-height:1.4;
    }


    /* bottom company signal */

    .wn-about .wn-about-hero-bottom{
        grid-template-columns:1fr;
        gap:0;
        min-height:0;
        margin-top:35px;
        padding:8px 0 22px;
    }

    .wn-about .wn-about-hero-bottom-item{
        display:grid;
        grid-template-columns:92px minmax(0,1fr);
        align-items:center;
        min-height:48px;
        border-bottom:1px solid rgba(91,154,199,.08);
    }

    .wn-about .wn-about-hero-bottom-item strong{
        margin-top:0;
    }

    .wn-about .wn-about-hero-bottom-line{
        display:none;
    }
}


/* ==========================================================
   ≤ 380
   ========================================================== */

@media (max-width:380px){

    .wn-about .wn-about-hero-content h1{
        font-size:35px;
    }

    .wn-about .wn-about-hero-principle{
        grid-template-columns:1fr;
    }

    .wn-about .wn-about-hero-principle > strong{
        margin-top:3px;
    }

    .wn-about .wn-about-hero-layers-track{
        gap:4px;
    }

    .wn-about .wn-about-hero-layer{
        padding:6px 5px;
    }
}
/* ==========================================================
   ABOUT — 01 HOW WE THINK
   BUSINESS REALITY → THINKING → SOFTWARE STRUCTURE
   ========================================================== */

.wn-about .wn-about-thinking{
    position:relative;
    overflow:hidden;
    padding:118px 0 104px;
    color:#0a2032;
    background:
        radial-gradient(circle at 18% 55%,rgba(18,132,221,.045),transparent 25%),
        radial-gradient(circle at 82% 48%,rgba(31,139,219,.035),transparent 27%),
        linear-gradient(180deg,#ffffff 0%,#f8fbfd 100%);
}

.wn-about .wn-about-thinking::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.45;
    background-image:
        linear-gradient(rgba(28,105,164,.025) 1px,transparent 1px),
        linear-gradient(90deg,rgba(28,105,164,.025) 1px,transparent 1px);
    background-size:72px 72px;
    mask-image:linear-gradient(
        to bottom,
        transparent 0%,
        #000 17%,
        #000 84%,
        transparent 100%
    );
}

.wn-about .wn-about-thinking::after{
    content:"";
    position:absolute;
    left:-270px;
    top:360px;
    width:680px;
    height:680px;
    border:1px solid rgba(21,126,207,.04);
    border-radius:50%;
    box-shadow:
        0 0 0 95px rgba(21,126,207,.014),
        0 0 0 190px rgba(21,126,207,.007);
    pointer-events:none;
}


/* ==========================================================
   INTRO
   ========================================================== */

.wn-about .wn-about-thinking-intro{
    position:relative;
    z-index:3;
    display:grid;
    grid-template-columns:235px minmax(0,1fr);
    gap:72px;
    align-items:start;
}

.wn-about .wn-about-thinking-number{
    display:flex;
    align-items:center;
    gap:12px;
    padding-top:11px;
}

.wn-about .wn-about-thinking-number > span{
    color:#0c88ef;
    font-size:12px;
    line-height:1;
    font-weight:800;
    letter-spacing:.08em;
}

.wn-about .wn-about-thinking-number > i{
    width:38px;
    height:1px;
    background:rgba(16,127,213,.30);
}

.wn-about .wn-about-thinking-number > small{
    color:#6d899d;
    font-size:8px;
    line-height:1.4;
    font-weight:800;
    letter-spacing:.14em;
}

.wn-about .wn-about-thinking-heading{
    display:grid;
    grid-template-columns:minmax(0,1.22fr) minmax(280px,.58fr);
    gap:72px;
    align-items:end;
}

.wn-about .wn-about-thinking-heading h2{
    max-width:800px;
    margin:0;
    color:#081f32;
    font-size:clamp(44px,4vw,59px);
    line-height:1.02;
    font-weight:700;
    letter-spacing:-.05em;
}

.wn-about .wn-about-thinking-heading h2 span{
    color:#0b87ef;
}

.wn-about .wn-about-thinking-heading p{
    max-width:400px;
    margin:0 0 5px;
    color:#637c8f;
    font-size:14px;
    line-height:1.78;
}


/* ==========================================================
   MODEL
   ========================================================== */

.wn-about .wn-about-thinking-model{
    position:relative;
    z-index:3;
    display:grid;
    grid-template-columns:minmax(0,1fr) 175px minmax(0,.86fr);
    gap:43px;
    align-items:stretch;
    min-width:0;
    margin-top:80px;
    padding:49px 0 54px;
    border-top:1px solid rgba(13,82,134,.11);
    border-bottom:1px solid rgba(13,82,134,.10);
}


/* ==========================================================
   SHARED LABEL
   ========================================================== */

.wn-about .wn-about-thinking-label{
    margin-bottom:22px;
}

.wn-about .wn-about-thinking-label span{
    display:block;
    color:#1687df;
    font-size:8px;
    line-height:1;
    font-weight:800;
    letter-spacing:.13em;
}

.wn-about .wn-about-thinking-label small{
    display:block;
    margin-top:7px;
    color:#8297a6;
    font-size:8px;
    line-height:1.3;
}


/* ==========================================================
   LEFT — BUSINESS REALITY
   ========================================================== */

.wn-about .wn-about-thinking-reality{
    min-width:0;
}

.wn-about .wn-about-thinking-reality-stage{
    position:relative;
    min-height:400px;
    border:1px solid rgba(16,94,151,.09);
    background:
        linear-gradient(rgba(20,103,166,.025) 1px,transparent 1px),
        linear-gradient(90deg,rgba(20,103,166,.025) 1px,transparent 1px),
        radial-gradient(circle at 50% 50%,rgba(16,135,223,.055),transparent 30%),
        rgba(255,255,255,.48);
    background-size:45px 45px,45px 45px,auto,auto;
}

.wn-about .wn-about-thinking-reality-stage::before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:245px;
    height:245px;
    border:1px solid rgba(20,127,208,.055);
    border-radius:50%;
    transform:translate(-50%,-50%);
    box-shadow:
        0 0 0 47px rgba(20,127,208,.012),
        0 0 0 94px rgba(20,127,208,.006);
}

.wn-about .wn-about-thinking-reality-item{
    position:absolute;
    z-index:4;
    display:grid;
    grid-template-columns:25px minmax(0,1fr);
    gap:10px;
    align-items:start;
    width:172px;
    min-height:78px;
    padding:12px;
    border:1px solid rgba(18,105,169,.12);
    background:rgba(255,255,255,.94);
    box-shadow:0 13px 28px rgba(22,72,109,.045);
}

.wn-about .wn-about-thinking-reality-item > span{
    display:grid;
    place-items:center;
    width:25px;
    height:25px;
    border:1px solid rgba(14,132,221,.13);
    border-radius:3px;
    color:#1189e8;
    background:#f3faff;
    font-size:7px;
    line-height:1;
    font-weight:800;
}

.wn-about .wn-about-thinking-reality-item small{
    display:block;
    margin-top:2px;
    color:#1683d3;
    font-size:7px;
    line-height:1;
    font-weight:800;
    letter-spacing:.08em;
}

.wn-about .wn-about-thinking-reality-item strong{
    display:block;
    margin-top:7px;
    color:#496476;
    font-size:10px;
    line-height:1.28;
    font-weight:650;
}

.wn-about .wn-about-thinking-reality-item--people{
    left:5%;
    top:8%;
    border-radius:4px 12px 4px 4px;
}

.wn-about .wn-about-thinking-reality-item--process{
    right:4%;
    top:16%;
    border-radius:12px 4px 4px 4px;
}

.wn-about .wn-about-thinking-reality-item--information{
    left:3%;
    bottom:9%;
    border-radius:4px 4px 12px 4px;
}

.wn-about .wn-about-thinking-reality-item--constraints{
    right:6%;
    bottom:6%;
    border-radius:4px 4px 4px 12px;
}


/* central business reality */

.wn-about .wn-about-thinking-reality-core{
    position:absolute;
    z-index:5;
    left:50%;
    top:50%;
    width:176px;
    min-height:125px;
    padding:22px 17px 18px;
    border:1px solid rgba(16,135,222,.25);
    border-radius:6px 17px 6px 17px;
    background:
        radial-gradient(circle at 80% 15%,rgba(18,139,224,.08),transparent 40%),
        #ffffff;
    box-shadow:
        0 20px 45px rgba(21,86,136,.09),
        0 0 0 6px rgba(17,133,218,.015);
    transform:translate(-50%,-50%);
}

.wn-about .wn-about-thinking-reality-core small{
    display:block;
    color:#1687dd;
    font-size:7px;
    line-height:1;
    font-weight:800;
    letter-spacing:.12em;
}

.wn-about .wn-about-thinking-reality-core strong{
    display:block;
    margin-top:11px;
    color:#0a263b;
    font-size:18px;
    line-height:1.05;
    font-weight:700;
    letter-spacing:-.03em;
}

.wn-about .wn-about-thinking-reality-core span{
    display:block;
    margin-top:17px;
    padding-top:11px;
    border-top:1px solid rgba(18,105,169,.08);
    color:#7891a3;
    font-size:6px;
    line-height:1;
    font-weight:800;
    letter-spacing:.11em;
}


/* organic connections */

.wn-about .wn-about-thinking-reality-line{
    position:absolute;
    z-index:2;
    height:1px;
    background:linear-gradient(
        90deg,
        rgba(19,118,190,.12),
        rgba(16,139,229,.55)
    );
    transform-origin:left center;
}

.wn-about .wn-about-thinking-reality-line::after{
    content:"";
    position:absolute;
    right:-2px;
    top:-2px;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#168ce9;
    box-shadow:0 0 8px rgba(22,140,233,.22);
}

.wn-about .wn-about-thinking-reality-line--one{
    left:29%;
    top:29%;
    width:22%;
    transform:rotate(23deg);
}

.wn-about .wn-about-thinking-reality-line--two{
    left:50%;
    top:38%;
    width:25%;
    transform:rotate(-24deg);
}

.wn-about .wn-about-thinking-reality-line--three{
    left:28%;
    top:69%;
    width:24%;
    transform:rotate(-20deg);
}

.wn-about .wn-about-thinking-reality-line--four{
    left:50%;
    top:63%;
    width:25%;
    transform:rotate(24deg);
}


/* ==========================================================
   CENTER — OUR APPROACH
   ========================================================== */

.wn-about .wn-about-thinking-bridge{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    min-width:0;
    padding-top:30px;
}

.wn-about .wn-about-thinking-bridge::before{
    content:"";
    position:absolute;
    left:50%;
    top:76px;
    bottom:31px;
    width:1px;
    background:linear-gradient(
        transparent,
        rgba(17,132,219,.24) 12%,
        rgba(17,132,219,.24) 88%,
        transparent
    );
}

.wn-about .wn-about-thinking-bridge-head{
    position:relative;
    z-index:2;
    padding:7px 9px;
    border:1px solid rgba(15,127,212,.11);
    border-radius:3px;
    background:#f8fcff;
}

.wn-about .wn-about-thinking-bridge-head span{
    display:block;
    color:#1887dc;
    font-size:7px;
    line-height:1;
    font-weight:800;
    letter-spacing:.12em;
}

.wn-about .wn-about-thinking-bridge-flow{
    position:relative;
    z-index:3;
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    margin-top:24px;
}

.wn-about .wn-about-thinking-bridge-step{
    width:112px;
    padding:10px 8px;
    border:1px solid rgba(17,118,193,.11);
    background:#fff;
    text-align:center;
    box-shadow:0 8px 20px rgba(24,78,118,.035);
}

.wn-about .wn-about-thinking-bridge-step span{
    display:block;
    color:#8ca0ae;
    font-size:6px;
    line-height:1;
    font-weight:800;
}

.wn-about .wn-about-thinking-bridge-step strong{
    display:block;
    margin-top:5px;
    color:#315b78;
    font-size:7px;
    line-height:1;
    font-weight:800;
    letter-spacing:.08em;
}

.wn-about .wn-about-thinking-bridge-flow > i{
    position:relative;
    width:1px;
    height:22px;
    background:#9ccae9;
}

.wn-about .wn-about-thinking-bridge-flow > i::after{
    content:"";
    position:absolute;
    left:-2px;
    bottom:-2px;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#168be8;
}

.wn-about .wn-about-thinking-bridge-principle{
    position:relative;
    z-index:4;
    width:145px;
    margin-top:28px;
    padding:17px 13px 14px;
    border-top:1px solid rgba(13,127,215,.18);
    border-bottom:1px solid rgba(13,127,215,.18);
    background:rgba(248,252,255,.84);
    text-align:center;
}

.wn-about .wn-about-thinking-bridge-principle small{
    display:block;
    color:#7892a4;
    font-size:6px;
    line-height:1;
    font-weight:800;
    letter-spacing:.11em;
}

.wn-about .wn-about-thinking-bridge-principle strong{
    display:block;
    margin-top:8px;
    color:#0d7fd6;
    font-size:11px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:.04em;
}

.wn-about .wn-about-thinking-bridge-principle span{
    display:grid;
    place-items:center;
    width:24px;
    height:24px;
    margin:12px auto 0;
    border:1px solid rgba(15,132,219,.15);
    border-radius:50%;
    color:#118be9;
    background:#fff;
    font-size:12px;
    line-height:1;
}


/* ==========================================================
   RIGHT — SOFTWARE STRUCTURE
   ========================================================== */

.wn-about .wn-about-thinking-structure{
    min-width:0;
}

.wn-about .wn-about-thinking-structure-panel{
    overflow:hidden;
    border:1px solid rgba(14,96,158,.12);
    border-radius:5px;
    background:#fff;
    box-shadow:0 18px 45px rgba(20,68,104,.05);
}

.wn-about .wn-about-thinking-structure-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:68px;
    padding:0 17px;
    border-bottom:1px solid rgba(13,87,142,.08);
    background:
        linear-gradient(90deg,rgba(16,137,224,.025),transparent);
}

.wn-about .wn-about-thinking-structure-head small{
    display:block;
    color:#1686d9;
    font-size:7px;
    line-height:1;
    font-weight:800;
    letter-spacing:.10em;
}

.wn-about .wn-about-thinking-structure-head strong{
    display:block;
    margin-top:7px;
    color:#1b3548;
    font-size:11px;
    line-height:1;
    font-weight:700;
}

.wn-about .wn-about-thinking-structure-head em{
    display:flex;
    align-items:center;
    gap:6px;
    padding:6px 7px;
    border:1px solid rgba(38,188,135,.14);
    border-radius:3px;
    color:#36a97e;
    background:rgba(38,188,135,.035);
    font-size:6px;
    line-height:1;
    font-style:normal;
    font-weight:800;
    letter-spacing:.07em;
}

.wn-about .wn-about-thinking-structure-head em i{
    width:5px;
    height:5px;
    border-radius:50%;
    background:#32ca91;
    box-shadow:0 0 7px rgba(50,202,145,.25);
}

.wn-about .wn-about-thinking-structure-body{
    padding:6px 17px;
}

.wn-about .wn-about-thinking-structure-row{
    display:grid;
    grid-template-columns:27px minmax(0,1fr) 44px;
    gap:11px;
    align-items:center;
    min-height:63px;
    border-bottom:1px solid rgba(13,87,142,.075);
}

.wn-about .wn-about-thinking-structure-row:last-child{
    border-bottom:0;
}

.wn-about .wn-about-thinking-structure-row > span{
    display:grid;
    place-items:center;
    width:25px;
    height:25px;
    border:1px solid rgba(13,129,216,.10);
    border-radius:3px;
    color:#1688df;
    background:#f6fbff;
    font-size:7px;
    line-height:1;
    font-weight:800;
}

.wn-about .wn-about-thinking-structure-row small{
    display:block;
    color:#6e8ca1;
    font-size:7px;
    line-height:1;
    font-weight:800;
    letter-spacing:.08em;
}

.wn-about .wn-about-thinking-structure-row strong{
    display:block;
    margin-top:6px;
    color:#344f62;
    font-size:10px;
    line-height:1.2;
    font-weight:650;
}

.wn-about .wn-about-thinking-structure-row > i{
    position:relative;
    height:3px;
    border-radius:20px;
    background:rgba(18,133,217,.10);
}

.wn-about .wn-about-thinking-structure-row > i::after{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:68%;
    height:100%;
    border-radius:inherit;
    background:#168be7;
    opacity:.45;
}

.wn-about .wn-about-thinking-structure-row:nth-child(2) > i::after{
    width:82%;
}

.wn-about .wn-about-thinking-structure-row:nth-child(3) > i::after{
    width:73%;
}

.wn-about .wn-about-thinking-structure-row:nth-child(4) > i::after{
    width:91%;
}

.wn-about .wn-about-thinking-structure-foot{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:8px 14px;
    align-items:center;
    min-height:68px;
    padding:13px 17px;
    border-top:1px solid rgba(13,87,142,.08);
    background:#f8fbfd;
}

.wn-about .wn-about-thinking-structure-foot small{
    color:#8398a7;
    font-size:6px;
    line-height:1;
    font-weight:800;
    letter-spacing:.10em;
}

.wn-about .wn-about-thinking-structure-foot strong{
    color:#1486db;
    font-size:7px;
    line-height:1;
    font-weight:800;
    letter-spacing:.08em;
    text-align:right;
}

.wn-about .wn-about-thinking-structure-foot span{
    grid-column:1 / -1;
    padding-top:9px;
    border-top:1px solid rgba(13,87,142,.06);
    color:#526f83;
    font-size:7px;
    line-height:1;
    font-weight:800;
    letter-spacing:.08em;
}


/* ==========================================================
   CLOSING STATEMENT
   ========================================================== */

.wn-about .wn-about-thinking-statement{
    position:relative;
    z-index:3;
    display:grid;
    grid-template-columns:235px minmax(0,.72fr) minmax(0,1fr);
    gap:72px;
    align-items:start;
    padding-top:62px;
}

.wn-about .wn-about-thinking-statement-index{
    padding-top:8px;
    color:#7891a2;
    font-size:7px;
    line-height:1;
    font-weight:800;
    letter-spacing:.13em;
}

.wn-about .wn-about-thinking-statement p{
    margin:0;
    color:#8799a7;
    font-size:clamp(22px,2vw,29px);
    line-height:1.18;
    font-weight:600;
    letter-spacing:-.03em;
}

.wn-about .wn-about-thinking-statement > strong{
    color:#0a2134;
    font-size:clamp(25px,2.35vw,35px);
    line-height:1.12;
    font-weight:700;
    letter-spacing:-.04em;
}

.wn-about .wn-about-thinking-statement > strong span{
    display:block;
    color:#0b87ef;
}


/* ==========================================================
   ≤ 1100
   ========================================================== */

@media (max-width:1100px){

    .wn-about .wn-about-thinking{
        padding:100px 0 92px;
    }

    .wn-about .wn-about-thinking-intro{
        grid-template-columns:190px minmax(0,1fr);
        gap:45px;
    }

    .wn-about .wn-about-thinking-heading{
        gap:42px;
    }

    .wn-about .wn-about-thinking-heading h2{
        font-size:47px;
    }

    .wn-about .wn-about-thinking-model{
        grid-template-columns:minmax(0,1fr) 135px minmax(0,.85fr);
        gap:26px;
    }

    .wn-about .wn-about-thinking-reality-item{
        width:155px;
    }

    .wn-about .wn-about-thinking-reality-core{
        width:160px;
    }

    .wn-about .wn-about-thinking-bridge-principle{
        width:125px;
    }

    .wn-about .wn-about-thinking-statement{
        grid-template-columns:190px minmax(0,.7fr) minmax(0,1fr);
        gap:45px;
    }
}


/* ==========================================================
   ≤ 950
   MODEL BECOMES A VERTICAL STORY
   ========================================================== */

@media (max-width:950px){

    .wn-about .wn-about-thinking-intro{
        grid-template-columns:1fr;
        gap:31px;
    }

    .wn-about .wn-about-thinking-heading{
        grid-template-columns:minmax(0,1.15fr) minmax(250px,.68fr);
    }

    .wn-about .wn-about-thinking-model{
        grid-template-columns:1fr;
        gap:0;
        margin-top:64px;
    }

    .wn-about .wn-about-thinking-reality,
    .wn-about .wn-about-thinking-structure{
        width:min(700px,100%);
        margin-inline:auto;
    }

    .wn-about .wn-about-thinking-reality-stage{
        min-height:420px;
    }

    .wn-about .wn-about-thinking-reality-item{
        width:185px;
    }

    .wn-about .wn-about-thinking-bridge{
        width:100%;
        padding:45px 0;
    }

    .wn-about .wn-about-thinking-bridge::before{
        top:80px;
        bottom:40px;
    }

    .wn-about .wn-about-thinking-bridge-principle{
        width:170px;
    }

    .wn-about .wn-about-thinking-structure-panel{
        max-width:600px;
        margin-inline:auto;
    }

    .wn-about .wn-about-thinking-statement{
        grid-template-columns:1fr 1fr;
        gap:35px 55px;
    }

    .wn-about .wn-about-thinking-statement-index{
        grid-column:1 / -1;
    }
}


/* ==========================================================
   ≤ 760
   ========================================================== */

@media (max-width:760px){

    .wn-about .wn-about-thinking{
        padding:78px 0 72px;
    }

    .wn-about .wn-about-thinking-number{
        padding-top:0;
    }

    .wn-about .wn-about-thinking-heading{
        grid-template-columns:1fr;
        gap:23px;
    }

    .wn-about .wn-about-thinking-heading h2{
        font-size:clamp(38px,9vw,50px);
    }

    .wn-about .wn-about-thinking-heading p{
        max-width:580px;
    }

    .wn-about .wn-about-thinking-model{
        margin-top:52px;
        padding-top:40px;
    }

    .wn-about .wn-about-thinking-reality-stage{
        min-height:430px;
    }

    .wn-about .wn-about-thinking-reality-item{
        width:170px;
    }

    .wn-about .wn-about-thinking-statement{
        grid-template-columns:1fr;
        gap:14px;
        padding-top:50px;
    }

    .wn-about .wn-about-thinking-statement-index{
        grid-column:auto;
        margin-bottom:12px;
    }
}


/* ==========================================================
   ≤ 520
   TRUE MOBILE
   ========================================================== */

@media (max-width:520px){

    .wn-about .wn-about-thinking{
        padding:66px 0 62px;
    }

    .wn-about .wn-about-thinking-number{
        gap:9px;
    }

    .wn-about .wn-about-thinking-number > i{
        width:24px;
    }

    .wn-about .wn-about-thinking-heading h2{
        font-size:38px;
    }

    .wn-about .wn-about-thinking-heading p{
        font-size:13px;
        line-height:1.7;
    }

    .wn-about .wn-about-thinking-model{
        margin-top:44px;
        padding:35px 0 41px;
    }


    /* ------------------------------------------
       BUSINESS REALITY — vertical on mobile
       ------------------------------------------ */

    .wn-about .wn-about-thinking-reality-stage{
        display:flex;
        flex-direction:column;
        min-height:0;
        padding:13px;
        background:
            linear-gradient(rgba(20,103,166,.025) 1px,transparent 1px),
            linear-gradient(90deg,rgba(20,103,166,.025) 1px,transparent 1px),
            rgba(255,255,255,.48);
        background-size:40px 40px;
    }

    .wn-about .wn-about-thinking-reality-stage::before{
        display:none;
    }

    .wn-about .wn-about-thinking-reality-core{
        position:relative;
        left:auto;
        top:auto;
        order:1;
        width:100%;
        min-height:0;
        padding:18px 16px;
        transform:none;
    }

    .wn-about .wn-about-thinking-reality-core strong{
        font-size:19px;
    }

    .wn-about .wn-about-thinking-reality-item,
    .wn-about .wn-about-thinking-reality-item--people,
    .wn-about .wn-about-thinking-reality-item--process,
    .wn-about .wn-about-thinking-reality-item--information,
    .wn-about .wn-about-thinking-reality-item--constraints{
        position:relative;
        left:auto;
        right:auto;
        top:auto;
        bottom:auto;
        order:2;
        width:100%;
        min-height:70px;
        margin-top:7px;
        border-radius:4px;
        box-shadow:none;
    }

    .wn-about .wn-about-thinking-reality-item--people{
        margin-top:28px;
    }

    .wn-about .wn-about-thinking-reality-item--people::before{
        content:"";
        position:absolute;
        left:50%;
        bottom:100%;
        width:1px;
        height:28px;
        background:linear-gradient(
            rgba(20,139,226,.14),
            rgba(20,139,226,.55)
        );
    }

    .wn-about .wn-about-thinking-reality-line{
        display:none;
    }


    /* ------------------------------------------
       APPROACH — becomes strong vertical bridge
       ------------------------------------------ */

    .wn-about .wn-about-thinking-bridge{
        padding:40px 0 43px;
    }

    .wn-about .wn-about-thinking-bridge::before{
        top:73px;
        bottom:37px;
    }

    .wn-about .wn-about-thinking-bridge-flow{
        margin-top:21px;
    }

    .wn-about .wn-about-thinking-bridge-step{
        width:155px;
        padding:11px 9px;
    }

    .wn-about .wn-about-thinking-bridge-flow > i{
        height:25px;
    }

    .wn-about .wn-about-thinking-bridge-principle{
        width:185px;
        margin-top:27px;
    }

    .wn-about .wn-about-thinking-bridge-principle strong{
        font-size:12px;
    }


    /* ------------------------------------------
       SOFTWARE STRUCTURE
       ------------------------------------------ */

    .wn-about .wn-about-thinking-structure-panel{
        width:100%;
    }

    .wn-about .wn-about-thinking-structure-head{
        padding:0 13px;
    }

    .wn-about .wn-about-thinking-structure-head strong{
        font-size:10px;
    }

    .wn-about .wn-about-thinking-structure-body{
        padding:5px 13px;
    }

    .wn-about .wn-about-thinking-structure-row{
        grid-template-columns:26px minmax(0,1fr) 30px;
        gap:9px;
    }

    .wn-about .wn-about-thinking-structure-row strong{
        font-size:10px;
    }

    .wn-about .wn-about-thinking-structure-foot{
        padding:13px;
    }


    /* ------------------------------------------
       STATEMENT
       ------------------------------------------ */

    .wn-about .wn-about-thinking-statement{
        padding-top:43px;
    }

    .wn-about .wn-about-thinking-statement p{
        font-size:22px;
    }

    .wn-about .wn-about-thinking-statement > strong{
        font-size:28px;
    }
}


/* ==========================================================
   ≤ 380
   ========================================================== */

@media (max-width:380px){

    .wn-about .wn-about-thinking-heading h2{
        font-size:35px;
    }

    .wn-about .wn-about-thinking-structure-head em{
        padding:6px;
        font-size:0;
    }

    .wn-about .wn-about-thinking-structure-head em i{
        margin:0;
    }

    .wn-about .wn-about-thinking-structure-row{
        grid-template-columns:25px minmax(0,1fr);
    }

    .wn-about .wn-about-thinking-structure-row > i{
        display:none;
    }

    .wn-about .wn-about-thinking-statement > strong{
        font-size:25px;
    }
}
/* ==========================================================
   ABOUT — 02 A DIFFERENT KIND OF DEVELOPMENT PARTNER
   DISTANCE → DIRECT RELATIONSHIP
   ========================================================== */

.wn-about .wn-about-partner{
    position:relative;
    overflow:hidden;
    padding:116px 0 105px;
    color:#f2f7fb;
    background:
        radial-gradient(circle at 78% 48%,rgba(15,130,215,.12),transparent 27%),
        radial-gradient(circle at 20% 67%,rgba(15,83,132,.07),transparent 28%),
        linear-gradient(145deg,#02111d 0%,#041827 55%,#03131f 100%);
}

.wn-about .wn-about-partner::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.32;
    background-image:
        linear-gradient(rgba(83,150,199,.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(83,150,199,.04) 1px,transparent 1px);
    background-size:72px 72px;
    mask-image:linear-gradient(
        to bottom,
        transparent,
        #000 14%,
        #000 88%,
        transparent
    );
}

.wn-about .wn-about-partner::after{
    content:"";
    position:absolute;
    right:-290px;
    top:310px;
    width:720px;
    height:720px;
    border:1px solid rgba(47,142,211,.045);
    border-radius:50%;
    box-shadow:
        0 0 0 100px rgba(47,142,211,.014),
        0 0 0 200px rgba(47,142,211,.007);
    pointer-events:none;
}


/* ==========================================================
   INTRO
   ========================================================== */

.wn-about .wn-about-partner-intro{
    position:relative;
    z-index:3;
    display:grid;
    grid-template-columns:235px minmax(0,1fr);
    gap:72px;
    align-items:start;
}

.wn-about .wn-about-partner-number{
    display:flex;
    align-items:center;
    gap:12px;
    padding-top:11px;
}

.wn-about .wn-about-partner-number > span{
    color:#45aaf4;
    font-size:12px;
    line-height:1;
    font-weight:800;
    letter-spacing:.08em;
}

.wn-about .wn-about-partner-number > i{
    width:38px;
    height:1px;
    background:rgba(57,156,226,.35);
}

.wn-about .wn-about-partner-number > small{
    max-width:135px;
    color:#62839b;
    font-size:7px;
    line-height:1.45;
    font-weight:800;
    letter-spacing:.12em;
}

.wn-about .wn-about-partner-heading{
    display:grid;
    grid-template-columns:minmax(0,1.22fr) minmax(280px,.58fr);
    gap:72px;
    align-items:end;
}

.wn-about .wn-about-partner-heading h2{
    max-width:800px;
    margin:0;
    color:#f3f8fb;
    font-size:clamp(44px,4vw,59px);
    line-height:1.02;
    font-weight:700;
    letter-spacing:-.05em;
}

.wn-about .wn-about-partner-heading h2 span{
    color:#91a9ba;
    font-weight:600;
}

.wn-about .wn-about-partner-heading h2 strong{
    display:block;
    color:#59b2f6;
    font-weight:700;
}

.wn-about .wn-about-partner-heading p{
    max-width:400px;
    margin:0 0 5px;
    color:#819bac;
    font-size:14px;
    line-height:1.78;
}


/* ==========================================================
   MAIN STAGE
   ========================================================== */

.wn-about .wn-about-partner-stage{
    position:relative;
    z-index:3;
    display:grid;
    grid-template-columns:minmax(0,1.05fr) 76px minmax(0,.95fr);
    gap:27px;
    align-items:stretch;
    min-width:0;
    margin-top:78px;
    padding:48px 0 54px;
    border-top:1px solid rgba(91,154,199,.12);
    border-bottom:1px solid rgba(91,154,199,.11);
}

.wn-about .wn-about-partner-route{
    position:relative;
    min-width:0;
    min-height:380px;
    border:1px solid rgba(78,145,194,.14);
    border-radius:5px;
    background:
        linear-gradient(rgba(74,140,188,.026) 1px,transparent 1px),
        linear-gradient(90deg,rgba(74,140,188,.026) 1px,transparent 1px),
        rgba(4,25,41,.54);
    background-size:42px 42px;
}

.wn-about .wn-about-partner-route--long{
    opacity:.78;
}

.wn-about .wn-about-partner-route--direct{
    border-color:rgba(47,153,228,.23);
    background:
        radial-gradient(circle at 50% 47%,rgba(17,137,220,.10),transparent 33%),
        linear-gradient(rgba(74,140,188,.026) 1px,transparent 1px),
        linear-gradient(90deg,rgba(74,140,188,.026) 1px,transparent 1px),
        rgba(4,27,44,.75);
    background-size:auto,42px 42px,42px 42px,auto;
    box-shadow:
        0 24px 55px rgba(0,0,0,.13),
        inset 0 0 70px rgba(21,119,190,.025);
}


/* ==========================================================
   ROUTE HEADS
   ========================================================== */

.wn-about .wn-about-partner-route-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    min-height:65px;
    padding:0 17px;
    border-bottom:1px solid rgba(83,147,192,.10);
}

.wn-about .wn-about-partner-route-head span{
    display:block;
    color:#559dd1;
    font-size:7px;
    line-height:1;
    font-weight:800;
    letter-spacing:.12em;
}

.wn-about .wn-about-partner-route-head small{
    display:block;
    margin-top:7px;
    color:#52738a;
    font-size:7px;
    line-height:1.2;
}

.wn-about .wn-about-partner-route-head em{
    padding:7px 8px;
    border:1px solid rgba(87,132,164,.13);
    border-radius:3px;
    color:#607f95;
    background:rgba(7,30,48,.45);
    font-size:6px;
    line-height:1;
    font-style:normal;
    font-weight:800;
    letter-spacing:.08em;
}

.wn-about .wn-about-partner-route--direct
.wn-about-partner-route-head em{
    display:flex;
    align-items:center;
    gap:6px;
    color:#49c897;
    border-color:rgba(57,198,146,.16);
    background:rgba(48,193,139,.045);
}

.wn-about .wn-about-partner-route--direct
.wn-about-partner-route-head em i{
    width:5px;
    height:5px;
    border-radius:50%;
    background:#3bd29b;
    box-shadow:0 0 8px rgba(59,210,155,.40);
}


/* ==========================================================
   LONG ROUTE
   ========================================================== */

.wn-about .wn-about-partner-route-flow{
    display:grid;
    grid-template-columns:
        minmax(78px,1fr)
        45px
        minmax(78px,1fr)
        45px
        minmax(78px,1fr)
        45px
        minmax(78px,1fr);
    gap:7px;
    align-items:center;
    padding:56px 17px 42px;
}

.wn-about .wn-about-partner-node{
    position:relative;
    min-width:0;
    min-height:92px;
    padding:13px 10px;
    border:1px solid rgba(79,139,182,.13);
    border-radius:4px;
    background:rgba(7,34,54,.82);
}

.wn-about .wn-about-partner-node > span{
    display:grid;
    place-items:center;
    width:23px;
    height:23px;
    border:1px solid rgba(71,145,199,.14);
    border-radius:3px;
    color:#558caf;
    background:rgba(10,47,74,.72);
    font-size:6px;
    font-weight:800;
}

.wn-about .wn-about-partner-node div{
    margin-top:12px;
}

.wn-about .wn-about-partner-node small{
    display:block;
    color:#557d98;
    font-size:6px;
    line-height:1;
    font-weight:800;
    letter-spacing:.08em;
}

.wn-about .wn-about-partner-node strong{
    display:block;
    margin-top:6px;
    color:#9db0bd;
    font-size:9px;
    line-height:1.2;
    font-weight:650;
}

.wn-about .wn-about-partner-node--source{
    border-color:rgba(40,144,217,.20);
}

.wn-about .wn-about-partner-node--source small{
    color:#55a9e7;
}

.wn-about .wn-about-partner-node--source strong{
    color:#d1dee7;
}

.wn-about .wn-about-partner-node--end{
    border-color:rgba(40,144,217,.17);
}


/* handoffs */

.wn-about .wn-about-partner-handoff{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-width:0;
}

.wn-about .wn-about-partner-handoff > i{
    position:relative;
    width:100%;
    height:1px;
    background:rgba(61,125,171,.24);
}

.wn-about .wn-about-partner-handoff > i:first-child::after{
    content:"";
    position:absolute;
    right:-2px;
    top:-2px;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#397fae;
}

.wn-about .wn-about-partner-handoff > span{
    display:block;
    margin:7px 0;
    color:#52758d;
    font-size:5px;
    line-height:1;
    font-weight:800;
    text-align:center;
    letter-spacing:.06em;
}

.wn-about .wn-about-partner-handoff > span small{
    display:block;
    margin-top:4px;
    color:#3f5c70;
    font-size:5px;
    font-weight:600;
    letter-spacing:0;
}


/* context signal */

.wn-about .wn-about-partner-signal{
    position:absolute;
    left:17px;
    right:17px;
    bottom:21px;
    display:grid;
    grid-template-columns:120px minmax(0,1fr);
    gap:18px;
    align-items:center;
    padding-top:15px;
    border-top:1px solid rgba(76,139,184,.09);
}

.wn-about .wn-about-partner-signal-label span{
    display:block;
    color:#547e9a;
    font-size:6px;
    line-height:1;
    font-weight:800;
    letter-spacing:.09em;
}

.wn-about .wn-about-partner-signal-label small{
    display:block;
    margin-top:5px;
    color:#3f6076;
    font-size:6px;
}

.wn-about .wn-about-partner-signal-track{
    display:grid;
    grid-template-columns:auto 1fr auto 1fr auto 1fr auto;
    align-items:center;
}

.wn-about .wn-about-partner-signal-track > i{
    height:1px;
    background:linear-gradient(
        90deg,
        rgba(43,135,199,.45),
        rgba(55,105,140,.12)
    );
}

.wn-about .wn-about-partner-signal-point{
    display:grid;
    place-items:center;
    width:19px;
    height:19px;
    border:1px solid rgba(71,126,165,.14);
    border-radius:50%;
    color:#4a6a80;
    background:#071e30;
    font-size:5px;
    font-weight:800;
}

.wn-about .wn-about-partner-signal-point--full{
    color:#64b5ef;
    border-color:rgba(59,157,226,.28);
    box-shadow:0 0 10px rgba(40,142,214,.10);
}


/* ==========================================================
   VS / CENTRAL DIVIDER
   ========================================================== */

.wn-about .wn-about-partner-vs{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-width:0;
}

.wn-about .wn-about-partner-vs > span{
    display:grid;
    place-items:center;
    width:39px;
    height:39px;
    border:1px solid rgba(65,150,211,.22);
    border-radius:50%;
    color:#5a9bca;
    background:#061c2d;
    font-size:8px;
    line-height:1;
    font-weight:800;
}

.wn-about .wn-about-partner-vs > i{
    width:1px;
    height:65px;
    background:linear-gradient(
        transparent,
        rgba(60,141,199,.25),
        transparent
    );
}

.wn-about .wn-about-partner-vs small{
    color:#527991;
    font-size:6px;
    line-height:1.5;
    font-weight:800;
    text-align:center;
    letter-spacing:.09em;
}


/* ==========================================================
   DIRECT ROUTE
   ========================================================== */

.wn-about .wn-about-partner-direct{
    display:grid;
    grid-template-columns:minmax(120px,1fr) 115px minmax(120px,1fr);
    gap:12px;
    align-items:center;
    padding:49px 20px 35px;
}

.wn-about .wn-about-partner-direct-side{
    min-width:0;
    padding:17px 15px;
    border:1px solid rgba(53,145,211,.18);
    border-radius:4px 13px 4px 4px;
    background:
        linear-gradient(145deg,rgba(9,45,71,.95),rgba(5,29,47,.95));
}

.wn-about .wn-about-partner-direct-side--webnime{
    border-radius:13px 4px 4px 4px;
    border-color:rgba(55,161,235,.28);
    box-shadow:0 16px 35px rgba(0,0,0,.10);
}

.wn-about .wn-about-partner-direct-side > span{
    display:grid;
    place-items:center;
    width:25px;
    height:25px;
    border:1px solid rgba(53,153,224,.18);
    border-radius:3px;
    color:#5cb3f1;
    background:#0a3150;
    font-size:6px;
    font-weight:800;
}

.wn-about .wn-about-partner-direct-side > small{
    display:block;
    margin-top:16px;
    color:#5793bd;
    font-size:6px;
    line-height:1;
    font-weight:800;
    letter-spacing:.10em;
}

.wn-about .wn-about-partner-direct-side > strong{
    display:block;
    margin-top:7px;
    color:#d9e6ee;
    font-size:14px;
    line-height:1.12;
    font-weight:700;
    letter-spacing:-.02em;
}

.wn-about .wn-about-partner-direct-side > div{
    display:flex;
    align-items:center;
    gap:5px;
    margin-top:19px;
    padding-top:11px;
    border-top:1px solid rgba(75,139,184,.10);
    color:#537b97;
    font-size:5px;
    line-height:1;
    font-weight:800;
    letter-spacing:.05em;
}

.wn-about .wn-about-partner-direct-side > div i{
    flex:1;
    height:1px;
    background:rgba(62,135,187,.20);
}


/* direct link */

.wn-about .wn-about-partner-direct-link{
    min-width:0;
    text-align:center;
}

.wn-about .wn-about-partner-direct-link-line{
    display:flex;
    align-items:center;
    width:100%;
}

.wn-about .wn-about-partner-direct-link-line > span{
    flex:1;
    height:1px;
    background:linear-gradient(
        90deg,
        rgba(36,132,201,.30),
        #2b9be9,
        rgba(36,132,201,.30)
    );
}

.wn-about .wn-about-partner-direct-link-line > i{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#4aacf1;
    box-shadow:
        0 0 0 5px rgba(74,172,241,.035),
        0 0 11px rgba(74,172,241,.25);
}

.wn-about .wn-about-partner-direct-link > strong{
    display:block;
    margin-top:15px;
    color:#68b9f4;
    font-size:8px;
    line-height:1.3;
    font-weight:800;
    letter-spacing:.07em;
}

.wn-about .wn-about-partner-direct-link > small{
    display:block;
    margin-top:8px;
    color:#52778f;
    font-size:5px;
    line-height:1.35;
    font-weight:800;
    letter-spacing:.07em;
}


/* feedback loop */

.wn-about .wn-about-partner-loop{
    position:absolute;
    left:20px;
    right:20px;
    bottom:20px;
    display:grid;
    grid-template-columns:auto minmax(50px,1fr) auto;
    gap:12px;
    align-items:center;
    padding-top:14px;
    border-top:1px solid rgba(70,142,193,.10);
}

.wn-about .wn-about-partner-loop > span{
    color:#527891;
    font-size:5px;
    line-height:1;
    font-weight:800;
    letter-spacing:.08em;
}

.wn-about .wn-about-partner-loop > div{
    display:flex;
    align-items:center;
    gap:9px;
}

.wn-about .wn-about-partner-loop > div i{
    flex:1;
    height:1px;
    background:linear-gradient(
        90deg,
        rgba(44,131,193,.12),
        rgba(52,157,230,.48)
    );
}

.wn-about .wn-about-partner-loop > div i:last-child{
    background:linear-gradient(
        90deg,
        rgba(52,157,230,.48),
        rgba(44,131,193,.12)
    );
}

.wn-about .wn-about-partner-loop strong{
    color:#4ebd94;
    font-size:5px;
    line-height:1;
    font-weight:800;
    white-space:nowrap;
    letter-spacing:.07em;
}


/* ==========================================================
   PRINCIPLES
   ========================================================== */

.wn-about .wn-about-partner-principles{
    position:relative;
    z-index:3;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    margin-top:67px;
    border-top:1px solid rgba(82,148,195,.11);
    border-bottom:1px solid rgba(82,148,195,.11);
}

.wn-about .wn-about-partner-principles article{
    position:relative;
    min-width:0;
    padding:38px 42px 40px 0;
}

.wn-about .wn-about-partner-principles article + article{
    padding-left:42px;
    border-left:1px solid rgba(82,148,195,.11);
}

.wn-about .wn-about-partner-principles article:not(:last-child)::after{
    content:"";
    position:absolute;
    right:-3px;
    top:37px;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#228edb;
    box-shadow:0 0 8px rgba(34,142,219,.22);
}

.wn-about .wn-about-partner-principles article > span{
    display:block;
    color:#559fd3;
    font-size:7px;
    line-height:1;
    font-weight:800;
    letter-spacing:.11em;
}

.wn-about .wn-about-partner-principles h3{
    max-width:260px;
    margin:17px 0 0;
    color:#eaf3f8;
    font-size:25px;
    line-height:1.02;
    font-weight:700;
    letter-spacing:-.04em;
}

.wn-about .wn-about-partner-principles p{
    max-width:310px;
    margin:17px 0 0;
    color:#738da0;
    font-size:12px;
    line-height:1.65;
}


/* ==========================================================
   SIGNATURE
   ========================================================== */

.wn-about .wn-about-partner-signature{
    position:relative;
    z-index:3;
    display:grid;
    grid-template-columns:auto minmax(80px,1fr) auto;
    gap:27px;
    align-items:center;
    padding-top:57px;
}

.wn-about .wn-about-partner-signature > span{
    color:#52768e;
    font-size:7px;
    line-height:1;
    font-weight:800;
    letter-spacing:.13em;
}

.wn-about .wn-about-partner-signature > i{
    height:1px;
    background:linear-gradient(
        90deg,
        rgba(52,128,184,.12),
        rgba(44,148,220,.48),
        rgba(52,128,184,.12)
    );
}

.wn-about .wn-about-partner-signature > strong{
    color:#dbe7ee;
    font-size:clamp(24px,2.25vw,34px);
    line-height:1.08;
    font-weight:650;
    letter-spacing:-.035em;
}

.wn-about .wn-about-partner-signature em{
    color:#59b2f6;
    font-style:normal;
}


/* ==========================================================
   ≤ 1100
   ========================================================== */

@media (max-width:1100px){

    .wn-about .wn-about-partner{
        padding:100px 0 92px;
    }

    .wn-about .wn-about-partner-intro{
        grid-template-columns:190px minmax(0,1fr);
        gap:45px;
    }

    .wn-about .wn-about-partner-heading{
        gap:42px;
    }

    .wn-about .wn-about-partner-heading h2{
        font-size:47px;
    }

    .wn-about .wn-about-partner-stage{
        grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr);
        gap:18px;
    }

    .wn-about .wn-about-partner-route-flow{
        grid-template-columns:
            minmax(65px,1fr)
            28px
            minmax(65px,1fr)
            28px
            minmax(65px,1fr)
            28px
            minmax(65px,1fr);
        gap:5px;
        padding-inline:12px;
    }

    .wn-about .wn-about-partner-node{
        padding:11px 8px;
    }

    .wn-about .wn-about-partner-handoff > span{
        font-size:4px;
    }

    .wn-about .wn-about-partner-handoff > span small{
        display:none;
    }

    .wn-about .wn-about-partner-direct{
        grid-template-columns:minmax(100px,1fr) 90px minmax(100px,1fr);
        gap:8px;
        padding-inline:14px;
    }

    .wn-about .wn-about-partner-direct-side{
        padding:15px 12px;
    }
}


/* ==========================================================
   ≤ 950
   STACK THE TWO ROUTES
   ========================================================== */

@media (max-width:950px){

    .wn-about .wn-about-partner-intro{
        grid-template-columns:1fr;
        gap:31px;
    }

    .wn-about .wn-about-partner-heading{
        grid-template-columns:minmax(0,1.15fr) minmax(250px,.68fr);
    }

    .wn-about .wn-about-partner-stage{
        grid-template-columns:1fr;
        gap:0;
        margin-top:64px;
    }

    .wn-about .wn-about-partner-route{
        width:min(760px,100%);
        margin-inline:auto;
    }

    .wn-about .wn-about-partner-route-flow{
        grid-template-columns:
            minmax(85px,1fr)
            45px
            minmax(85px,1fr)
            45px
            minmax(85px,1fr)
            45px
            minmax(85px,1fr);
        padding-inline:18px;
    }

    .wn-about .wn-about-partner-vs{
        padding:31px 0;
    }

    .wn-about .wn-about-partner-vs > i{
        height:30px;
    }

    .wn-about .wn-about-partner-direct{
        grid-template-columns:minmax(150px,1fr) 130px minmax(150px,1fr);
        padding-inline:25px;
    }

    .wn-about .wn-about-partner-principles article{
        padding-right:28px;
    }

    .wn-about .wn-about-partner-principles article + article{
        padding-left:28px;
    }
}


/* ==========================================================
   ≤ 760
   ========================================================== */

@media (max-width:760px){

    .wn-about .wn-about-partner{
        padding:78px 0 74px;
    }

    .wn-about .wn-about-partner-number{
        padding-top:0;
    }

    .wn-about .wn-about-partner-heading{
        grid-template-columns:1fr;
        gap:23px;
    }

    .wn-about .wn-about-partner-heading h2{
        font-size:clamp(38px,9vw,50px);
    }

    .wn-about .wn-about-partner-heading p{
        max-width:580px;
    }

    .wn-about .wn-about-partner-stage{
        margin-top:52px;
        padding-top:39px;
    }

    .wn-about .wn-about-partner-route-flow{
        grid-template-columns:1fr;
        gap:0;
        padding:27px 17px 78px;
    }

    .wn-about .wn-about-partner-node{
        display:grid;
        grid-template-columns:25px minmax(0,1fr);
        gap:10px;
        align-items:center;
        min-height:68px;
    }

    .wn-about .wn-about-partner-node div{
        margin-top:0;
    }

    .wn-about .wn-about-partner-handoff{
        height:34px;
    }

    .wn-about .wn-about-partner-handoff > i{
        width:1px;
        height:12px;
    }

    .wn-about .wn-about-partner-handoff > span{
        margin:3px 0;
    }

    .wn-about .wn-about-partner-handoff > i:first-child::after{
        left:-2px;
        right:auto;
        top:auto;
        bottom:-2px;
    }

    .wn-about .wn-about-partner-signal{
        grid-template-columns:1fr;
        gap:10px;
    }

    .wn-about .wn-about-partner-signal-label small{
        display:none;
    }

    .wn-about .wn-about-partner-direct{
        grid-template-columns:minmax(0,1fr) 105px minmax(0,1fr);
        padding-inline:17px;
    }

    .wn-about .wn-about-partner-principles{
        grid-template-columns:1fr;
    }

    .wn-about .wn-about-partner-principles article,
    .wn-about .wn-about-partner-principles article + article{
        padding:31px 0;
        border-left:0;
    }

    .wn-about .wn-about-partner-principles article + article{
        border-top:1px solid rgba(82,148,195,.11);
    }

    .wn-about .wn-about-partner-principles article:not(:last-child)::after{
        right:auto;
        left:0;
        top:auto;
        bottom:-3px;
    }

    .wn-about .wn-about-partner-principles h3,
    .wn-about .wn-about-partner-principles p{
        max-width:520px;
    }

    .wn-about .wn-about-partner-signature{
        grid-template-columns:auto minmax(30px,1fr);
        gap:17px;
    }

    .wn-about .wn-about-partner-signature > strong{
        grid-column:1 / -1;
        margin-top:8px;
    }
}


/* ==========================================================
   ≤ 520
   TRUE MOBILE
   ========================================================== */

@media (max-width:520px){

    .wn-about .wn-about-partner{
        padding:66px 0 64px;
    }

    .wn-about .wn-about-partner-number{
        align-items:flex-start;
    }

    .wn-about .wn-about-partner-number > i{
        width:24px;
        margin-top:5px;
    }

    .wn-about .wn-about-partner-number > small{
        max-width:170px;
    }

    .wn-about .wn-about-partner-heading h2{
        font-size:38px;
    }

    .wn-about .wn-about-partner-heading p{
        font-size:13px;
        line-height:1.7;
    }

    .wn-about .wn-about-partner-stage{
        margin-top:44px;
        padding:34px 0 39px;
    }

    .wn-about .wn-about-partner-route{
        min-height:0;
    }

    .wn-about .wn-about-partner-route-head{
        min-height:64px;
        padding:0 13px;
    }

    .wn-about .wn-about-partner-route-head em{
        padding:6px;
        font-size:5px;
    }

    .wn-about .wn-about-partner-route-flow{
        padding:22px 13px 86px;
    }

    .wn-about .wn-about-partner-signal{
        left:13px;
        right:13px;
        bottom:17px;
    }


    /* direct relationship becomes vertical */

    .wn-about .wn-about-partner-direct{
        grid-template-columns:1fr;
        gap:0;
        padding:22px 13px 78px;
    }

    .wn-about .wn-about-partner-direct-side{
        width:100%;
        border-radius:4px;
    }

    .wn-about .wn-about-partner-direct-link{
        padding:0 24px;
    }

    .wn-about .wn-about-partner-direct-link-line{
        flex-direction:column;
        height:45px;
    }

    .wn-about .wn-about-partner-direct-link-line > span{
        width:1px;
        height:auto;
        background:linear-gradient(
            rgba(36,132,201,.30),
            #2b9be9,
            rgba(36,132,201,.30)
        );
    }

    .wn-about .wn-about-partner-direct-link > strong{
        margin-top:7px;
    }

    .wn-about .wn-about-partner-direct-link > small{
        margin-bottom:10px;
    }

    .wn-about .wn-about-partner-loop{
        left:13px;
        right:13px;
        grid-template-columns:1fr;
        gap:7px;
        text-align:center;
    }

    .wn-about .wn-about-partner-loop > div{
        order:-1;
    }

    .wn-about .wn-about-partner-loop > span{
        display:none;
    }

    .wn-about .wn-about-partner-principles{
        margin-top:49px;
    }

    .wn-about .wn-about-partner-principles h3{
        font-size:24px;
    }

    .wn-about .wn-about-partner-signature{
        padding-top:45px;
    }

    .wn-about .wn-about-partner-signature > strong{
        font-size:27px;
    }
}


/* ==========================================================
   ≤ 380
   ========================================================== */

@media (max-width:380px){

    .wn-about .wn-about-partner-heading h2{
        font-size:35px;
    }

    .wn-about .wn-about-partner-route-head > div small{
        max-width:170px;
    }

    .wn-about .wn-about-partner-route-head em{
        font-size:0;
    }

    .wn-about .wn-about-partner-route--long
    .wn-about-partner-route-head em::after{
        content:"ROUTE";
        font-size:5px;
    }

    .wn-about .wn-about-partner-route--direct
    .wn-about-partner-route-head em{
        font-size:5px;
    }

    .wn-about .wn-about-partner-direct-link{
        padding-inline:15px;
    }

    .wn-about .wn-about-partner-signature > strong{
        font-size:24px;
    }
}
/* ==========================================================
   ABOUT — 03 THREE DECADES OF BUILDING FOR THE WEB
   HUMAN / FOUNDER STORY
   ========================================================== */

.wn-about .wn-about-human{
    position:relative;
    overflow:hidden;
    padding:112px 0 108px;
    color:#092136;
    background:
        radial-gradient(circle at 12% 37%,rgba(24,139,222,.055),transparent 25%),
        linear-gradient(180deg,#ffffff 0%,#f8fbfd 100%);
}

.wn-about .wn-about-human::before{
    content:"";
    position:absolute;
    left:-310px;
    top:260px;
    width:720px;
    height:720px;
    border:1px solid rgba(20,132,214,.045);
    border-radius:50%;
    box-shadow:
        0 0 0 105px rgba(20,132,214,.014),
        0 0 0 210px rgba(20,132,214,.007);
    pointer-events:none;
}

.wn-about .wn-about-human::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.35;
    background-image:
        linear-gradient(rgba(18,105,169,.024) 1px,transparent 1px),
        linear-gradient(90deg,rgba(18,105,169,.024) 1px,transparent 1px);
    background-size:72px 72px;
    mask-image:linear-gradient(
        to bottom,
        transparent,
        #000 12%,
        #000 88%,
        transparent
    );
}


/* ==========================================================
   INDEX
   ========================================================== */

.wn-about .wn-about-human-index{
    position:relative;
    z-index:3;
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:57px;
}

.wn-about .wn-about-human-index > span{
    color:#0b89ed;
    font-size:12px;
    line-height:1;
    font-weight:800;
    letter-spacing:.08em;
}

.wn-about .wn-about-human-index > i{
    width:38px;
    height:1px;
    background:rgba(16,127,213,.30);
}

.wn-about .wn-about-human-index small,
.wn-about .wn-about-human-index strong{
    display:block;
    font-size:7px;
    line-height:1.3;
    font-weight:800;
    letter-spacing:.13em;
}

.wn-about .wn-about-human-index small{
    color:#93a5b2;
}

.wn-about .wn-about-human-index strong{
    margin-top:2px;
    color:#52758e;
}


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

.wn-about .wn-about-human-main{
    position:relative;
    z-index:3;
    display:grid;
    grid-template-columns:minmax(280px,.62fr) minmax(0,1.38fr);
    gap:105px;
    align-items:center;
    min-width:0;
}


/* ==========================================================
   PORTRAIT COMPOSITION
   ========================================================== */

.wn-about .wn-about-human-person{
    min-width:0;
}

.wn-about .wn-about-human-portrait{
    position:relative;
    width:100%;
    max-width:390px;
    height:475px;
    margin:0 auto;
}


/* subtle stage */

.wn-about .wn-about-human-portrait::before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:315px;
    height:315px;
    border-radius:50%;
    background:
        radial-gradient(
            circle,
            rgba(18,139,224,.085) 0%,
            rgba(18,139,224,.025) 46%,
            transparent 69%
        );
    transform:translate(-50%,-47%);
}

.wn-about .wn-about-human-portrait::after{
    content:"";
    position:absolute;
    left:8%;
    right:8%;
    bottom:18px;
    height:1px;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(18,128,210,.24),
        transparent
    );
}


/* grid only behind portrait */

.wn-about .wn-about-human-portrait-grid{
    position:absolute;
    inset:44px 10px 42px;
    opacity:.55;
    background-image:
        linear-gradient(rgba(21,119,190,.045) 1px,transparent 1px),
        linear-gradient(90deg,rgba(21,119,190,.045) 1px,transparent 1px);
    background-size:36px 36px;
    mask-image:radial-gradient(
        ellipse at center,
        #000 10%,
        transparent 72%
    );
}


/* circles */

.wn-about .wn-about-human-portrait-circle{
    position:absolute;
    left:50%;
    top:47%;
    border:1px solid rgba(19,135,219,.11);
    border-radius:50%;
    transform:translate(-50%,-50%);
}

.wn-about .wn-about-human-portrait-circle--one{
    width:305px;
    height:305px;
}

.wn-about .wn-about-human-portrait-circle--two{
    width:220px;
    height:220px;
    border-color:rgba(19,135,219,.07);
}


/* photo */

.wn-about .wn-about-human-photo{
    position:absolute;
    z-index:3;
    left:50%;
    bottom:20px;
    width:82%;
    height:415px;
    transform:translateX(-50%);
}

.wn-about .wn-about-human-photo img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center bottom;
}


/* top founder marker */

.wn-about .wn-about-human-portrait-label{
    position:absolute;
    z-index:6;
    display:flex;
    align-items:center;
    gap:8px;
}

.wn-about .wn-about-human-portrait-label--top{
    left:8px;
    top:19px;
}

.wn-about .wn-about-human-portrait-label i{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#168ee8;
    box-shadow:
        0 0 0 5px rgba(22,142,232,.045),
        0 0 9px rgba(22,142,232,.18);
}

.wn-about .wn-about-human-portrait-label span{
    color:#65859b;
    font-size:6px;
    line-height:1;
    font-weight:800;
    letter-spacing:.11em;
}


/* 1990s / today */

.wn-about .wn-about-human-portrait-line{
    position:absolute;
    z-index:5;
    display:flex;
    align-items:center;
    gap:8px;
}

.wn-about .wn-about-human-portrait-line span{
    color:#7891a2;
    font-size:6px;
    line-height:1;
    font-weight:800;
    letter-spacing:.08em;
}

.wn-about .wn-about-human-portrait-line i{
    position:relative;
    width:50px;
    height:1px;
    background:rgba(17,126,208,.20);
}

.wn-about .wn-about-human-portrait-line i::after{
    content:"";
    position:absolute;
    top:-2px;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#168ce7;
}

.wn-about .wn-about-human-portrait-line--left{
    left:0;
    top:50%;
}

.wn-about .wn-about-human-portrait-line--left i::after{
    right:-2px;
}

.wn-about .wn-about-human-portrait-line--right{
    right:0;
    top:50%;
}

.wn-about .wn-about-human-portrait-line--right i::after{
    left:-2px;
}


/* status */

.wn-about .wn-about-human-status{
    position:absolute;
    z-index:7;
    right:2px;
    bottom:40px;
    display:flex;
    align-items:center;
    gap:9px;
    padding:9px 11px;
    border:1px solid rgba(13,126,207,.12);
    border-radius:3px;
    background:rgba(250,253,255,.84);
    box-shadow:0 10px 25px rgba(21,73,109,.05);
    backdrop-filter:blur(7px);
}

.wn-about .wn-about-human-status > i{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#32c995;
    box-shadow:0 0 8px rgba(50,201,149,.35);
}

.wn-about .wn-about-human-status span{
    display:block;
    color:#8095a4;
    font-size:5px;
    line-height:1.3;
    font-weight:800;
    letter-spacing:.08em;
}

.wn-about .wn-about-human-status strong{
    display:block;
    color:#1688df;
    font-size:6px;
}


/* name */

.wn-about .wn-about-human-name{
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:flex-start;
    max-width:390px;
    margin:17px auto 0;
    padding-top:16px;
    border-top:1px solid rgba(14,92,149,.09);
}

.wn-about .wn-about-human-name strong{
    display:block;
    color:#102b3e;
    font-size:10px;
    line-height:1;
    font-weight:800;
    letter-spacing:.08em;
}

.wn-about .wn-about-human-name span{
    display:block;
    margin-top:7px;
    color:#1687dd;
    font-size:7px;
    line-height:1;
    font-weight:800;
    letter-spacing:.10em;
}

.wn-about .wn-about-human-name > small{
    color:#8498a7;
    font-size:6px;
    line-height:1.55;
    font-weight:800;
    text-align:right;
    letter-spacing:.07em;
}


/* ==========================================================
   STORY
   ========================================================== */

.wn-about .wn-about-human-story{
    min-width:0;
}

.wn-about .wn-about-human-eyebrow{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:9px;
    margin-bottom:27px;
}

.wn-about .wn-about-human-eyebrow span,
.wn-about .wn-about-human-eyebrow strong{
    font-size:6px;
    line-height:1;
    font-weight:800;
    letter-spacing:.10em;
}

.wn-about .wn-about-human-eyebrow span{
    color:#8096a6;
}

.wn-about .wn-about-human-eyebrow strong{
    padding:7px 9px;
    color:#1687dc;
    border:1px solid rgba(19,133,216,.13);
    border-radius:3px;
    background:rgba(20,139,224,.035);
}

.wn-about .wn-about-human-eyebrow > i{
    width:4px;
    height:4px;
    border-radius:50%;
    background:#c1ced6;
}


.wn-about .wn-about-human-story h2{
    max-width:730px;
    margin:0;
    color:#092237;
    font-size:clamp(50px,4.65vw,68px);
    line-height:.98;
    font-weight:700;
    letter-spacing:-.055em;
}

.wn-about .wn-about-human-story h2 > span{
    color:#98aab7;
    font-weight:600;
}

.wn-about .wn-about-human-story h2 > strong{
    display:block;
    margin-top:5px;
    color:#0b89ed;
    font-weight:700;
}


/* intro */

.wn-about .wn-about-human-intro{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(220px,.72fr);
    gap:45px;
    align-items:start;
    max-width:760px;
    margin-top:39px;
    padding:25px 0;
    border-top:1px solid rgba(13,88,144,.10);
    border-bottom:1px solid rgba(13,88,144,.10);
}

.wn-about .wn-about-human-intro p{
    margin:0;
    color:#5d788b;
    font-size:14px;
    line-height:1.7;
}

.wn-about .wn-about-human-intro > strong{
    position:relative;
    display:block;
    padding-left:18px;
    color:#29495f;
    font-size:12px;
    line-height:1.55;
    font-weight:700;
}

.wn-about .wn-about-human-intro > strong::before{
    content:"";
    position:absolute;
    left:0;
    top:7px;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#168de7;
}

.wn-about .wn-about-human-intro > strong span{
    display:block;
    color:#1687dc;
}


/* copy */

.wn-about .wn-about-human-copy{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:25px 45px;
    max-width:760px;
    margin-top:34px;
}

.wn-about .wn-about-human-copy p{
    position:relative;
    margin:0;
    padding-left:16px;
    color:#627c8e;
    font-size:12px;
    line-height:1.72;
}

.wn-about .wn-about-human-copy p::before{
    content:"";
    position:absolute;
    left:0;
    top:8px;
    width:4px;
    height:4px;
    border-radius:50%;
    background:#168ce7;
    opacity:.75;
}


/* role */

.wn-about .wn-about-human-role{
    display:grid;
    grid-template-columns:auto minmax(50px,1fr) auto;
    gap:17px;
    align-items:center;
    max-width:760px;
    margin-top:40px;
    padding-top:21px;
    border-top:1px solid rgba(13,88,144,.09);
}

.wn-about .wn-about-human-role > span{
    color:#8296a5;
    font-size:6px;
    line-height:1;
    font-weight:800;
    letter-spacing:.12em;
}

.wn-about .wn-about-human-role > i{
    height:1px;
    background:linear-gradient(
        90deg,
        rgba(19,126,205,.08),
        rgba(19,126,205,.27)
    );
}

.wn-about .wn-about-human-role > strong{
    color:#28485e;
    font-size:11px;
    line-height:1.4;
    font-weight:700;
    text-align:right;
}

.wn-about .wn-about-human-role em{
    display:block;
    color:#1687dc;
    font-style:normal;
}


/* ==========================================================
   EXPERIENCE STRIP
   ========================================================== */

.wn-about .wn-about-human-experience{
    position:relative;
    z-index:3;
    display:grid;
    grid-template-columns:1.15fr repeat(3,.85fr);
    margin-top:84px;
    border-top:1px solid rgba(13,88,144,.11);
    border-bottom:1px solid rgba(13,88,144,.11);
}

.wn-about .wn-about-human-experience > *{
    min-width:0;
}

.wn-about .wn-about-human-experience-intro{
    padding:31px 38px 31px 0;
}

.wn-about .wn-about-human-experience-intro > span{
    display:block;
    color:#1687dc;
    font-size:6px;
    line-height:1;
    font-weight:800;
    letter-spacing:.11em;
}

.wn-about .wn-about-human-experience-intro > strong{
    display:block;
    max-width:265px;
    margin-top:13px;
    color:#24455b;
    font-size:15px;
    line-height:1.28;
    font-weight:700;
    letter-spacing:-.015em;
}

.wn-about .wn-about-human-experience article{
    display:grid;
    grid-template-columns:27px minmax(0,1fr);
    gap:14px;
    padding:31px 25px;
    border-left:1px solid rgba(13,88,144,.09);
}

.wn-about .wn-about-human-experience article > span{
    color:#9aabb7;
    font-size:6px;
    line-height:1;
    font-weight:800;
}

.wn-about .wn-about-human-experience article strong{
    display:block;
    color:#1687dc;
    font-size:10px;
    line-height:1;
    font-weight:800;
    letter-spacing:.07em;
}

.wn-about .wn-about-human-experience article p{
    max-width:190px;
    margin:9px 0 0;
    color:#718a9b;
    font-size:9px;
    line-height:1.55;
}


/* ==========================================================
   HUMAN CLOSING
   ========================================================== */

.wn-about .wn-about-human-closing{
    position:relative;
    z-index:3;
    display:grid;
    grid-template-columns:235px minmax(0,.9fr) minmax(310px,.75fr);
    gap:70px;
    align-items:start;
    padding-top:69px;
}

.wn-about .wn-about-human-closing-label{
    display:flex;
    align-items:center;
    gap:9px;
    padding-top:9px;
}

.wn-about .wn-about-human-closing-label i{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#168ce7;
    box-shadow:0 0 0 5px rgba(22,140,231,.045);
}

.wn-about .wn-about-human-closing-label span{
    color:#758e9f;
    font-size:6px;
    line-height:1.3;
    font-weight:800;
    letter-spacing:.11em;
}

.wn-about .wn-about-human-closing h3{
    margin:0;
    color:#0a2235;
    font-size:clamp(33px,3.15vw,45px);
    line-height:1.02;
    font-weight:700;
    letter-spacing:-.045em;
}

.wn-about .wn-about-human-closing h3 span{
    color:#0b89ed;
}

.wn-about .wn-about-human-closing-copy p{
    margin:0;
    color:#627c8e;
    font-size:13px;
    line-height:1.72;
}

.wn-about .wn-about-human-closing-copy > strong{
    display:block;
    margin-top:22px;
    padding-top:17px;
    border-top:1px solid rgba(13,88,144,.09);
    color:#28485e;
    font-size:11px;
    line-height:1.5;
    font-weight:700;
}

.wn-about .wn-about-human-closing-copy > strong span{
    display:block;
    color:#1687dc;
}


/* ==========================================================
   ≤ 1100
   ========================================================== */

@media (max-width:1100px){

    .wn-about .wn-about-human{
        padding:100px 0 94px;
    }

    .wn-about .wn-about-human-main{
        grid-template-columns:minmax(260px,.58fr) minmax(0,1.42fr);
        gap:65px;
    }

    .wn-about .wn-about-human-portrait{
        height:440px;
    }

    .wn-about .wn-about-human-photo{
        height:385px;
    }

    .wn-about .wn-about-human-story h2{
        font-size:55px;
    }

    .wn-about .wn-about-human-copy{
        gap:22px 30px;
    }

    .wn-about .wn-about-human-experience{
        grid-template-columns:1fr repeat(3,.8fr);
    }

    .wn-about .wn-about-human-experience article{
        padding-inline:18px;
    }

    .wn-about .wn-about-human-closing{
        grid-template-columns:190px minmax(0,.9fr) minmax(280px,.75fr);
        gap:45px;
    }
}


/* ==========================================================
   ≤ 950
   ========================================================== */

@media (max-width:950px){

    .wn-about .wn-about-human-main{
        grid-template-columns:300px minmax(0,1fr);
        gap:45px;
    }

    .wn-about .wn-about-human-portrait{
        height:415px;
    }

    .wn-about .wn-about-human-photo{
        height:365px;
    }

    .wn-about .wn-about-human-story h2{
        font-size:48px;
    }

    .wn-about .wn-about-human-intro{
        grid-template-columns:1fr;
        gap:18px;
    }

    .wn-about .wn-about-human-copy{
        grid-template-columns:1fr;
        gap:18px;
    }

    .wn-about .wn-about-human-experience{
        grid-template-columns:1fr;
    }

    .wn-about .wn-about-human-experience-intro{
        padding:27px 0;
    }

    .wn-about .wn-about-human-experience-intro > strong{
        max-width:470px;
    }

    .wn-about .wn-about-human-experience article{
        grid-template-columns:35px minmax(0,1fr);
        padding:23px 0;
        border-left:0;
        border-top:1px solid rgba(13,88,144,.09);
    }

    .wn-about .wn-about-human-experience article p{
        max-width:450px;
    }

    .wn-about .wn-about-human-closing{
        grid-template-columns:1fr 1fr;
        gap:34px 50px;
    }

    .wn-about .wn-about-human-closing-label{
        grid-column:1 / -1;
    }
}


/* ==========================================================
   ≤ 760
   ========================================================== */

@media (max-width:760px){

    .wn-about .wn-about-human{
        padding:78px 0 74px;
    }

    .wn-about .wn-about-human-index{
        margin-bottom:43px;
    }

    .wn-about .wn-about-human-main{
        grid-template-columns:1fr;
        gap:52px;
    }

    .wn-about .wn-about-human-person{
        width:min(390px,100%);
    }

    .wn-about .wn-about-human-portrait{
        height:460px;
    }

    .wn-about .wn-about-human-photo{
        height:405px;
    }

    .wn-about .wn-about-human-story h2{
        max-width:620px;
        font-size:clamp(42px,10vw,57px);
    }

    .wn-about .wn-about-human-intro,
    .wn-about .wn-about-human-copy,
    .wn-about .wn-about-human-role{
        max-width:620px;
    }

    .wn-about .wn-about-human-experience{
        margin-top:64px;
    }

    .wn-about .wn-about-human-closing{
        grid-template-columns:1fr;
        gap:25px;
        padding-top:55px;
    }

    .wn-about .wn-about-human-closing-label{
        grid-column:auto;
        margin-bottom:6px;
    }

    .wn-about .wn-about-human-closing h3,
    .wn-about .wn-about-human-closing-copy{
        max-width:560px;
    }
}


/* ==========================================================
   ≤ 520
   ========================================================== */

@media (max-width:520px){

    .wn-about .wn-about-human{
        padding:66px 0 64px;
    }

    .wn-about .wn-about-human-index{
        align-items:flex-start;
        margin-bottom:34px;
    }

    .wn-about .wn-about-human-index > i{
        width:24px;
        margin-top:5px;
    }

    .wn-about .wn-about-human-portrait{
        height:405px;
    }

    .wn-about .wn-about-human-photo{
        width:88%;
        height:355px;
    }

    .wn-about .wn-about-human-portrait-circle--one{
        width:270px;
        height:270px;
    }

    .wn-about .wn-about-human-portrait-circle--two{
        width:190px;
        height:190px;
    }

    .wn-about .wn-about-human-portrait-line i{
        width:30px;
    }

    .wn-about .wn-about-human-name{
        display:block;
    }

    .wn-about .wn-about-human-name > small{
        display:block;
        margin-top:13px;
        text-align:left;
    }

    .wn-about .wn-about-human-main{
        gap:45px;
    }

    .wn-about .wn-about-human-eyebrow{
        margin-bottom:23px;
    }

    .wn-about .wn-about-human-story h2{
        font-size:40px;
    }

    .wn-about .wn-about-human-intro{
        margin-top:30px;
    }

    .wn-about .wn-about-human-copy{
        margin-top:27px;
    }

    .wn-about .wn-about-human-copy p{
        font-size:12px;
        line-height:1.7;
    }

    .wn-about .wn-about-human-role{
        grid-template-columns:1fr;
        gap:10px;
        margin-top:30px;
    }

    .wn-about .wn-about-human-role > i{
        width:100%;
    }

    .wn-about .wn-about-human-role > strong{
        text-align:left;
    }

    .wn-about .wn-about-human-experience{
        margin-top:51px;
    }

    .wn-about .wn-about-human-closing{
        padding-top:45px;
    }

    .wn-about .wn-about-human-closing h3{
        font-size:35px;
    }
}


/* ==========================================================
   ≤ 380
   ========================================================== */

@media (max-width:380px){

    .wn-about .wn-about-human-portrait{
        height:365px;
    }

    .wn-about .wn-about-human-photo{
        height:320px;
    }

    .wn-about .wn-about-human-portrait-line--left,
    .wn-about .wn-about-human-portrait-line--right{
        display:none;
    }

    .wn-about .wn-about-human-status{
        right:0;
    }

    .wn-about .wn-about-human-story h2{
        font-size:36px;
    }

    .wn-about .wn-about-human-closing h3{
        font-size:32px;
    }
}
/* ==========================================================
   03 — FINAL PORTRAIT MICRO TUNING
   ========================================================== */

.wn-about .wn-about-human-photo{
    position:absolute;
    z-index:3;
    left:50%;
    bottom:28px;
    width:85%;
    height:425px;
    transform:translateX(-50%);
}


/* malo čitljiviji detalji oko portreta */

.wn-about .wn-about-human-portrait-label span{
    font-size:6.5px;
    letter-spacing:.10em;
}

.wn-about .wn-about-human-portrait-line span{
    font-size:6.5px;
}

.wn-about .wn-about-human-status span{
    font-size:5.5px;
}

.wn-about .wn-about-human-status strong{
    font-size:6.5px;
}

.wn-about .wn-about-human-name strong{
    font-size:10.5px;
}

.wn-about .wn-about-human-name span{
    font-size:7.5px;
}

.wn-about .wn-about-human-name > small{
    font-size:6.5px;
}


/* tablet — zadržavamo isti odnos */

@media (max-width:1100px){

    .wn-about .wn-about-human-photo{
        bottom:26px;
        width:85%;
        height:395px;
    }
}


@media (max-width:950px){

    .wn-about .wn-about-human-photo{
        bottom:25px;
        width:86%;
        height:375px;
    }
}


/* mobile ne povećavamo agresivno */

@media (max-width:760px){

    .wn-about .wn-about-human-photo{
        bottom:24px;
        width:84%;
        height:410px;
    }
}


@media (max-width:520px){

    .wn-about .wn-about-human-photo{
        bottom:22px;
        width:86%;
        height:365px;
    }
}


@media (max-width:380px){

    .wn-about .wn-about-human-photo{
        bottom:20px;
        width:86%;
        height:328px;
    }
}
/* ==========================================================
   ABOUT — 04 EXPERIENCE THAT EVOLVED WITH THE WEB
   DARK EDITORIAL EVOLUTION TIMELINE
   ========================================================== */

.wn-about .wn-about-evolution{
    position:relative;
    overflow:hidden;
    padding:116px 0 108px;
    color:#d9e9f4;
    background:
        radial-gradient(circle at 83% 37%,rgba(13,126,210,.12),transparent 29%),
        radial-gradient(circle at 16% 83%,rgba(11,101,171,.07),transparent 25%),
        linear-gradient(145deg,#031927 0%,#041d2d 48%,#031723 100%);
}

.wn-about .wn-about-evolution::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.38;
    background-image:
        linear-gradient(rgba(78,158,211,.025) 1px,transparent 1px),
        linear-gradient(90deg,rgba(78,158,211,.025) 1px,transparent 1px);
    background-size:72px 72px;
    mask-image:linear-gradient(
        to bottom,
        transparent 0%,
        #000 12%,
        #000 88%,
        transparent 100%
    );
}

.wn-about .wn-about-evolution::after{
    content:"";
    position:absolute;
    right:-340px;
    top:260px;
    width:780px;
    height:780px;
    border:1px solid rgba(43,150,222,.055);
    border-radius:50%;
    box-shadow:
        0 0 0 105px rgba(43,150,222,.018),
        0 0 0 210px rgba(43,150,222,.008);
    pointer-events:none;
}


/* ==========================================================
   INTRO
   ========================================================== */

.wn-about .wn-about-evolution-intro{
    position:relative;
    z-index:3;
}

.wn-about .wn-about-evolution-index{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:53px;
}

.wn-about .wn-about-evolution-index > span{
    color:#37a8f5;
    font-size:12px;
    line-height:1;
    font-weight:800;
    letter-spacing:.08em;
}

.wn-about .wn-about-evolution-index > i{
    width:38px;
    height:1px;
    background:rgba(55,168,245,.32);
}

.wn-about .wn-about-evolution-index small,
.wn-about .wn-about-evolution-index strong{
    display:block;
    font-size:7px;
    line-height:1.3;
    font-weight:800;
    letter-spacing:.13em;
}

.wn-about .wn-about-evolution-index small{
    color:#55798f;
}

.wn-about .wn-about-evolution-index strong{
    margin-top:2px;
    color:#80a8bf;
}


.wn-about .wn-about-evolution-heading{
    display:grid;
    grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);
    gap:90px;
    align-items:end;
}

.wn-about .wn-about-evolution-heading h2{
    max-width:760px;
    margin:0;
    color:#f2f8fc;
    font-size:clamp(51px,4.9vw,72px);
    line-height:.98;
    font-weight:700;
    letter-spacing:-.055em;
}

.wn-about .wn-about-evolution-heading h2 span{
    color:#8fa9ba;
    font-weight:600;
}

.wn-about .wn-about-evolution-heading h2 strong{
    display:block;
    color:#37a8f5;
    font-weight:700;
}

.wn-about .wn-about-evolution-heading > p{
    max-width:380px;
    margin:0 0 5px;
    color:#7693a6;
    font-size:13px;
    line-height:1.72;
}


/* ==========================================================
   EVOLUTION MAP
   ========================================================== */

.wn-about .wn-about-evolution-map{
    position:relative;
    z-index:3;
    margin-top:72px;
    padding:28px 30px 31px;
    border:1px solid rgba(81,158,207,.12);
    background:
        linear-gradient(180deg,rgba(9,38,56,.62),rgba(5,28,42,.32));
    box-shadow:
        0 30px 80px rgba(0,8,14,.14),
        inset 0 1px 0 rgba(255,255,255,.012);
}


/* map header */

.wn-about .wn-about-evolution-map-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
    padding-bottom:20px;
    border-bottom:1px solid rgba(82,157,205,.09);
}

.wn-about .wn-about-evolution-map-head > span{
    color:#6d93aa;
    font-size:6px;
    line-height:1;
    font-weight:800;
    letter-spacing:.13em;
}

.wn-about .wn-about-evolution-map-head > div{
    display:flex;
    align-items:center;
    gap:8px;
    color:#52768d;
    font-size:6px;
    line-height:1;
    font-weight:800;
    letter-spacing:.10em;
}

.wn-about .wn-about-evolution-map-head > div i{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#31c995;
    box-shadow:0 0 9px rgba(49,201,149,.28);
}


/* ==========================================================
   MAIN TIMELINE
   ========================================================== */

.wn-about .wn-about-evolution-track{
    position:relative;
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    min-width:0;
    padding:70px 0 48px;
}

.wn-about .wn-about-evolution-track-line{
    position:absolute;
    z-index:0;
    left:5%;
    right:5%;
    top:91px;
    height:1px;
    background:linear-gradient(
        90deg,
        rgba(50,152,218,.18) 0%,
        rgba(50,152,218,.30) 28%,
        rgba(50,152,218,.52) 64%,
        rgba(55,174,248,.86) 100%
    );
}

.wn-about .wn-about-evolution-track-line::before{
    content:"";
    position:absolute;
    left:0;
    top:-2px;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#267fb9;
}

.wn-about .wn-about-evolution-track-line::after{
    content:"";
    position:absolute;
    right:-1px;
    top:-3px;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#3cb2fb;
    box-shadow:
        0 0 0 6px rgba(60,178,251,.06),
        0 0 15px rgba(60,178,251,.24);
}


/* individual eras */

.wn-about .wn-about-evolution-step{
    position:relative;
    z-index:2;
    min-width:0;
    padding:0 21px;
}

.wn-about .wn-about-evolution-step:first-of-type{
    padding-left:0;
}

.wn-about .wn-about-evolution-step:last-of-type{
    padding-right:0;
}

.wn-about .wn-about-evolution-step + .wn-about-evolution-step{
    border-left:1px solid rgba(71,142,188,.07);
}


/* points */

.wn-about .wn-about-evolution-point{
    position:relative;
    display:grid;
    place-items:center;
    width:43px;
    height:43px;
    margin-bottom:35px;
    border:1px solid rgba(46,150,219,.18);
    border-radius:50%;
    background:#062438;
    box-shadow:0 0 0 6px rgba(4,28,43,.88);
}

.wn-about .wn-about-evolution-point::before{
    content:"";
    position:absolute;
    inset:7px;
    border:1px solid rgba(50,161,232,.08);
    border-radius:50%;
}

.wn-about .wn-about-evolution-point span{
    position:relative;
    z-index:2;
    color:#6daed7;
    font-size:7px;
    line-height:1;
    font-weight:800;
}


/* progressively stronger nodes */

.wn-about .wn-about-evolution-step--02 .wn-about-evolution-point{
    border-color:rgba(48,157,228,.24);
}

.wn-about .wn-about-evolution-step--03 .wn-about-evolution-point{
    border-color:rgba(48,160,232,.31);
}

.wn-about .wn-about-evolution-step--04 .wn-about-evolution-point{
    border-color:rgba(49,164,237,.40);
}

.wn-about .wn-about-evolution-step--05 .wn-about-evolution-point{
    border-color:rgba(51,169,243,.52);
    box-shadow:
        0 0 0 6px rgba(4,28,43,.88),
        0 0 16px rgba(44,157,228,.07);
}

.wn-about .wn-about-evolution-step--06 .wn-about-evolution-point{
    border-color:#39aef5;
    background:
        radial-gradient(circle,rgba(53,171,246,.16),#062438 67%);
    box-shadow:
        0 0 0 6px rgba(4,28,43,.88),
        0 0 21px rgba(53,171,246,.15);
}

.wn-about .wn-about-evolution-step--06 .wn-about-evolution-point span{
    color:#c0e7ff;
}


/* era copy */

.wn-about .wn-about-evolution-step > small{
    display:block;
    min-height:20px;
    color:#389fdf;
    font-size:6px;
    line-height:1.35;
    font-weight:800;
    letter-spacing:.11em;
}

.wn-about .wn-about-evolution-step > strong{
    display:block;
    min-height:58px;
    margin-top:9px;
    color:#e5f0f7;
    font-size:15px;
    line-height:1.18;
    font-weight:700;
    letter-spacing:-.02em;
}

.wn-about .wn-about-evolution-step > p{
    min-height:77px;
    margin:13px 0 0;
    color:#67889d;
    font-size:9px;
    line-height:1.58;
}

.wn-about .wn-about-evolution-tech{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px;
    margin-top:17px;
    color:#587c92;
    font-size:5px;
    line-height:1;
    font-weight:800;
    letter-spacing:.09em;
}

.wn-about .wn-about-evolution-tech i{
    width:3px;
    height:3px;
    border-radius:50%;
    background:#238fd4;
}


/* ==========================================================
   EVOLUTION / COMPLEXITY GRAPHIC
   ========================================================== */

/*
   Each era becomes visually more complex.
   These are intentionally subtle — not another dashboard.
*/

.wn-about .wn-about-evolution-step::before,
.wn-about .wn-about-evolution-step::after{
    content:"";
    position:absolute;
    pointer-events:none;
}


/* 02 — first branch */

.wn-about .wn-about-evolution-step--02::before{
    left:43px;
    top:21px;
    width:23px;
    height:17px;
    border-top:1px solid rgba(52,160,228,.14);
    border-right:1px solid rgba(52,160,228,.14);
}


/* 03 — data branch */

.wn-about .wn-about-evolution-step--03::before{
    left:42px;
    top:21px;
    width:31px;
    height:25px;
    border-top:1px solid rgba(52,163,232,.20);
    border-right:1px solid rgba(52,163,232,.20);
    border-bottom:1px solid rgba(52,163,232,.10);
}


/* 04 — workflow branch */

.wn-about .wn-about-evolution-step--04::before{
    left:42px;
    top:13px;
    width:39px;
    height:32px;
    border-top:1px solid rgba(53,166,237,.23);
    border-right:1px solid rgba(53,166,237,.23);
    border-bottom:1px solid rgba(53,166,237,.14);
}

.wn-about .wn-about-evolution-step--04::after{
    left:74px;
    top:42px;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#2998dc;
}


/* 05 — multiple system paths */

.wn-about .wn-about-evolution-step--05::before{
    left:42px;
    top:9px;
    width:47px;
    height:39px;
    border:
        1px solid rgba(55,170,241,.23);
    border-left:0;
}

.wn-about .wn-about-evolution-step--05::after{
    left:65px;
    top:28px;
    width:25px;
    height:1px;
    background:rgba(55,170,241,.25);
    box-shadow:
        0 -12px 0 rgba(55,170,241,.12),
        0 12px 0 rgba(55,170,241,.16);
}


/* 06 — connected network */

.wn-about .wn-about-evolution-step--06::before{
    left:41px;
    top:5px;
    width:54px;
    height:46px;
    background:
        radial-gradient(circle at 100% 0,#3aaef5 0 2px,transparent 3px),
        radial-gradient(circle at 100% 50%,#3aaef5 0 2px,transparent 3px),
        radial-gradient(circle at 100% 100%,#3aaef5 0 2px,transparent 3px),
        linear-gradient(rgba(58,174,245,.35),rgba(58,174,245,.35))
            left 22px top 0 / 33px 1px no-repeat,
        linear-gradient(rgba(58,174,245,.35),rgba(58,174,245,.35))
            left 22px center / 33px 1px no-repeat,
        linear-gradient(rgba(58,174,245,.35),rgba(58,174,245,.35))
            left 22px bottom / 33px 1px no-repeat;
}

.wn-about .wn-about-evolution-step--06::after{
    left:61px;
    top:6px;
    width:1px;
    height:44px;
    background:linear-gradient(
        to bottom,
        rgba(58,174,245,.14),
        rgba(58,174,245,.45),
        rgba(58,174,245,.14)
    );
}


/* ==========================================================
   COMPLEXITY SIGNAL
   ========================================================== */

.wn-about .wn-about-evolution-complexity{
    display:grid;
    grid-template-columns:175px minmax(0,1fr) auto;
    gap:27px;
    align-items:center;
    padding-top:26px;
    border-top:1px solid rgba(81,157,205,.08);
}

.wn-about .wn-about-evolution-complexity-label span,
.wn-about .wn-about-evolution-complexity-label small{
    display:block;
}

.wn-about .wn-about-evolution-complexity-label span{
    color:#638ba2;
    font-size:6px;
    line-height:1;
    font-weight:800;
    letter-spacing:.11em;
}

.wn-about .wn-about-evolution-complexity-label small{
    margin-top:5px;
    color:#385c72;
    font-size:6px;
}


/* bars progressively rise */

.wn-about .wn-about-evolution-complexity-line{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:8px;
    align-items:end;
    height:23px;
}

.wn-about .wn-about-evolution-complexity-line i{
    display:block;
    height:3px;
    background:#185c85;
}

.wn-about .wn-about-evolution-complexity-line i:nth-child(2){
    height:5px;
    background:#1b6c9c;
}

.wn-about .wn-about-evolution-complexity-line i:nth-child(3){
    height:8px;
    background:#207caf;
}

.wn-about .wn-about-evolution-complexity-line i:nth-child(4){
    height:11px;
    background:#258dca;
}

.wn-about .wn-about-evolution-complexity-line i:nth-child(5){
    height:16px;
    background:#2a9ce0;
}

.wn-about .wn-about-evolution-complexity-line i:nth-child(6){
    height:22px;
    background:#38aef4;
    box-shadow:0 0 10px rgba(56,174,244,.15);
}

.wn-about .wn-about-evolution-complexity > strong{
    color:#62899f;
    font-size:6px;
    line-height:1;
    font-weight:800;
    letter-spacing:.09em;
    white-space:nowrap;
}

.wn-about .wn-about-evolution-complexity > strong span{
    margin:0 7px;
    color:#35a9f1;
}


/* ==========================================================
   STILL EVOLVING
   ========================================================== */

.wn-about .wn-about-evolution-future{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:15px;
    margin-top:27px;
}

.wn-about .wn-about-evolution-future > div{
    text-align:right;
}

.wn-about .wn-about-evolution-future > div > span{
    display:block;
    color:#4f748a;
    font-size:5px;
    line-height:1;
    font-weight:800;
    letter-spacing:.12em;
}

.wn-about .wn-about-evolution-future strong{
    display:block;
    margin-top:4px;
    color:#769cb2;
    font-size:7px;
    line-height:1;
    font-weight:800;
    letter-spacing:.10em;
}

.wn-about .wn-about-evolution-future strong em{
    color:#38aef4;
    font-style:normal;
}

.wn-about .wn-about-evolution-future > i{
    width:70px;
    height:1px;
    background:linear-gradient(
        90deg,
        rgba(55,170,241,.15),
        rgba(55,170,241,.72)
    );
}

.wn-about .wn-about-evolution-future > span{
    color:#39aef5;
    font-size:17px;
    line-height:1;
}


/* ==========================================================
   WHAT EXPERIENCE CHANGES
   ========================================================== */

.wn-about .wn-about-evolution-meaning{
    position:relative;
    z-index:3;
    display:grid;
    grid-template-columns:235px minmax(0,.9fr) minmax(330px,.78fr);
    gap:70px;
    align-items:start;
    margin-top:72px;
    padding-top:61px;
    border-top:1px solid rgba(81,157,205,.09);
}

.wn-about .wn-about-evolution-meaning-label{
    display:flex;
    align-items:center;
    gap:9px;
    padding-top:8px;
}

.wn-about .wn-about-evolution-meaning-label i{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#39aef5;
    box-shadow:0 0 9px rgba(57,174,245,.22);
}

.wn-about .wn-about-evolution-meaning-label span{
    color:#64899f;
    font-size:6px;
    line-height:1.3;
    font-weight:800;
    letter-spacing:.11em;
}

.wn-about .wn-about-evolution-meaning-title > strong{
    display:block;
    color:#e7f2f8;
    font-size:clamp(31px,3vw,43px);
    line-height:1.04;
    font-weight:700;
    letter-spacing:-.045em;
}

.wn-about .wn-about-evolution-meaning-title > strong span{
    display:block;
    color:#39aef5;
}

.wn-about .wn-about-evolution-meaning-copy p{
    margin:0;
    color:#7895a7;
    font-size:13px;
    line-height:1.72;
}

.wn-about .wn-about-evolution-meaning-copy > strong{
    display:block;
    margin-top:22px;
    padding-top:18px;
    border-top:1px solid rgba(80,158,209,.09);
    color:#a9bfcc;
    font-size:11px;
    line-height:1.5;
    font-weight:700;
}

.wn-about .wn-about-evolution-meaning-copy > strong span{
    display:block;
    color:#39aef5;
}


/* ==========================================================
   ≤ 1100
   ========================================================== */

@media (max-width:1100px){

    .wn-about .wn-about-evolution{
        padding:100px 0 94px;
    }

    .wn-about .wn-about-evolution-heading{
        gap:60px;
    }

    .wn-about .wn-about-evolution-heading h2{
        font-size:58px;
    }

    .wn-about .wn-about-evolution-map{
        padding-inline:24px;
    }

    .wn-about .wn-about-evolution-step{
        padding-inline:15px;
    }

    .wn-about .wn-about-evolution-step > strong{
        font-size:13px;
    }

    .wn-about .wn-about-evolution-step > p{
        font-size:8px;
    }

    .wn-about .wn-about-evolution-meaning{
        grid-template-columns:190px minmax(0,.9fr) minmax(290px,.78fr);
        gap:45px;
    }
}


/* ==========================================================
   ≤ 950
   Timeline restructures BEFORE it gets cramped.
   ========================================================== */

@media (max-width:950px){

    .wn-about .wn-about-evolution-heading{
        grid-template-columns:1fr;
        gap:27px;
    }

    .wn-about .wn-about-evolution-heading > p{
        max-width:590px;
    }

    .wn-about .wn-about-evolution-map{
        padding:25px 26px 30px;
    }

    .wn-about .wn-about-evolution-track{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:0;
        padding:43px 0 25px;
    }

    .wn-about .wn-about-evolution-track-line{
        display:none;
    }

    .wn-about .wn-about-evolution-step,
    .wn-about .wn-about-evolution-step:first-of-type,
    .wn-about .wn-about-evolution-step:last-of-type{
        min-height:230px;
        padding:24px 30px 28px 0;
        border-left:0;
        border-top:1px solid rgba(76,151,200,.08);
    }

    .wn-about .wn-about-evolution-step:nth-of-type(even){
        padding-left:30px;
        border-left:1px solid rgba(76,151,200,.08);
    }

    .wn-about .wn-about-evolution-step:nth-of-type(2),
    .wn-about .wn-about-evolution-step:nth-of-type(3){
        border-top:0;
    }

    .wn-about .wn-about-evolution-point{
        width:38px;
        height:38px;
        margin-bottom:22px;
    }

    .wn-about .wn-about-evolution-step > small,
    .wn-about .wn-about-evolution-step > strong,
    .wn-about .wn-about-evolution-step > p{
        min-height:0;
    }

    .wn-about .wn-about-evolution-step > strong{
        max-width:260px;
        font-size:15px;
    }

    .wn-about .wn-about-evolution-step > p{
        max-width:300px;
        font-size:9px;
    }

    .wn-about .wn-about-evolution-step::before,
    .wn-about .wn-about-evolution-step::after{
        display:none;
    }

    .wn-about .wn-about-evolution-complexity{
        grid-template-columns:150px minmax(0,1fr);
    }

    .wn-about .wn-about-evolution-complexity > strong{
        grid-column:1 / -1;
    }

    .wn-about .wn-about-evolution-meaning{
        grid-template-columns:1fr 1fr;
        gap:35px 55px;
    }

    .wn-about .wn-about-evolution-meaning-label{
        grid-column:1 / -1;
    }
}


/* ==========================================================
   ≤ 760
   ========================================================== */

@media (max-width:760px){

    .wn-about .wn-about-evolution{
        padding:78px 0 74px;
    }

    .wn-about .wn-about-evolution-index{
        margin-bottom:41px;
    }

    .wn-about .wn-about-evolution-heading h2{
        font-size:clamp(42px,10vw,57px);
    }

    .wn-about .wn-about-evolution-map{
        margin-top:55px;
        padding:23px 20px 27px;
    }

    .wn-about .wn-about-evolution-track{
        grid-template-columns:1fr;
        padding-top:34px;
    }

    .wn-about .wn-about-evolution-step,
    .wn-about .wn-about-evolution-step:first-of-type,
    .wn-about .wn-about-evolution-step:last-of-type,
    .wn-about .wn-about-evolution-step:nth-of-type(even){
        min-height:0;
        padding:25px 0 29px 61px;
        border-left:0;
        border-top:1px solid rgba(76,151,200,.08);
    }

    .wn-about .wn-about-evolution-step:first-of-type{
        border-top:0;
    }

    .wn-about .wn-about-evolution-step::before{
        display:block;
        left:18px;
        top:0;
        bottom:0;
        width:1px;
        height:auto;
        border:0;
        background:rgba(51,157,226,.15);
    }

    .wn-about .wn-about-evolution-step::after{
        display:block;
        left:15px;
        top:31px;
        width:7px;
        height:7px;
        border-radius:50%;
        background:#2999dc;
    }

    .wn-about .wn-about-evolution-step--06::after{
        background:#3cb2fb;
        box-shadow:0 0 10px rgba(60,178,251,.30);
    }

    .wn-about .wn-about-evolution-point{
        display:none;
    }

    .wn-about .wn-about-evolution-step > strong{
        max-width:390px;
        font-size:17px;
    }

    .wn-about .wn-about-evolution-step > p{
        max-width:470px;
        font-size:10px;
    }

    .wn-about .wn-about-evolution-complexity{
        grid-template-columns:1fr;
        gap:15px;
    }

    .wn-about .wn-about-evolution-complexity-line{
        height:22px;
    }

    .wn-about .wn-about-evolution-complexity > strong{
        grid-column:auto;
        white-space:normal;
        line-height:1.5;
    }

    .wn-about .wn-about-evolution-meaning{
        grid-template-columns:1fr;
        gap:24px;
        margin-top:57px;
        padding-top:49px;
    }

    .wn-about .wn-about-evolution-meaning-label{
        grid-column:auto;
        margin-bottom:6px;
    }

    .wn-about .wn-about-evolution-meaning-title,
    .wn-about .wn-about-evolution-meaning-copy{
        max-width:570px;
    }
}


/* ==========================================================
   ≤ 520
   ========================================================== */

@media (max-width:520px){

    .wn-about .wn-about-evolution{
        padding:66px 0 64px;
    }

    .wn-about .wn-about-evolution-index{
        align-items:flex-start;
        margin-bottom:34px;
    }

    .wn-about .wn-about-evolution-index > i{
        width:24px;
        margin-top:5px;
    }

    .wn-about .wn-about-evolution-heading h2{
        font-size:40px;
    }

    .wn-about .wn-about-evolution-heading > p{
        font-size:12px;
    }

    .wn-about .wn-about-evolution-map{
        margin-top:45px;
        padding:20px 16px 24px;
    }

    .wn-about .wn-about-evolution-map-head{
        display:block;
    }

    .wn-about .wn-about-evolution-map-head > div{
        margin-top:12px;
    }

    .wn-about .wn-about-evolution-step,
    .wn-about .wn-about-evolution-step:first-of-type,
    .wn-about .wn-about-evolution-step:last-of-type,
    .wn-about .wn-about-evolution-step:nth-of-type(even){
        padding-left:49px;
    }

    .wn-about .wn-about-evolution-step::before{
        left:13px;
    }

    .wn-about .wn-about-evolution-step::after{
        left:10px;
    }

    .wn-about .wn-about-evolution-step > strong{
        font-size:16px;
    }

    .wn-about .wn-about-evolution-future > i{
        width:42px;
    }

    .wn-about .wn-about-evolution-meaning-title > strong{
        font-size:34px;
    }
}


/* ==========================================================
   ≤ 380
   ========================================================== */

@media (max-width:380px){

    .wn-about .wn-about-evolution-heading h2{
        font-size:36px;
    }

    .wn-about .wn-about-evolution-map{
        padding-inline:13px;
    }

    .wn-about .wn-about-evolution-step,
    .wn-about .wn-about-evolution-step:first-of-type,
    .wn-about .wn-about-evolution-step:last-of-type,
    .wn-about .wn-about-evolution-step:nth-of-type(even){
        padding-left:43px;
    }

    .wn-about .wn-about-evolution-meaning-title > strong{
        font-size:31px;
    }
}
/* ==========================================================
   ABOUT — FINAL CTA
   START A CONVERSATION
   ========================================================== */

.wn-about .wn-about-final{
    position:relative;
    overflow:hidden;
    padding:104px 0 54px;
    color:#092136;
    background:
        radial-gradient(circle at 83% 19%,rgba(18,139,224,.055),transparent 25%),
        radial-gradient(circle at 7% 82%,rgba(18,139,224,.04),transparent 27%),
        linear-gradient(180deg,#ffffff 0%,#f7fbfd 100%);
}

.wn-about .wn-about-final::before{
    content:"";
    position:absolute;
    right:-280px;
    top:-330px;
    width:720px;
    height:720px;
    border:1px solid rgba(20,132,214,.045);
    border-radius:50%;
    box-shadow:
        0 0 0 95px rgba(20,132,214,.014),
        0 0 0 190px rgba(20,132,214,.007);
    pointer-events:none;
}

.wn-about .wn-about-final::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.30;
    background-image:
        linear-gradient(rgba(18,105,169,.022) 1px,transparent 1px),
        linear-gradient(90deg,rgba(18,105,169,.022) 1px,transparent 1px);
    background-size:72px 72px;
    mask-image:linear-gradient(
        to bottom,
        transparent,
        #000 13%,
        #000 86%,
        transparent
    );
}


/* ==========================================================
   TOP SIGNAL
   ========================================================== */

.wn-about .wn-about-final-top{
    position:relative;
    z-index:3;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
    padding-bottom:24px;
    border-bottom:1px solid rgba(14,89,145,.10);
}

.wn-about .wn-about-final-kicker,
.wn-about .wn-about-final-status{
    display:flex;
    align-items:center;
    gap:9px;
}

.wn-about .wn-about-final-kicker i{
    width:29px;
    height:1px;
    background:#168ce7;
}

.wn-about .wn-about-final-kicker span{
    color:#1687dc;
    font-size:7px;
    line-height:1;
    font-weight:800;
    letter-spacing:.13em;
}

.wn-about .wn-about-final-status{
    padding:7px 9px;
    border:1px solid rgba(35,174,129,.13);
    border-radius:3px;
    background:rgba(35,174,129,.025);
}

.wn-about .wn-about-final-status i{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#31c995;
    box-shadow:0 0 8px rgba(49,201,149,.28);
}

.wn-about .wn-about-final-status span{
    color:#4b927b;
    font-size:6px;
    line-height:1;
    font-weight:800;
    letter-spacing:.10em;
}


/* ==========================================================
   MAIN CTA
   ========================================================== */

.wn-about .wn-about-final-main{
    position:relative;
    z-index:3;
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(350px,.72fr);
    gap:110px;
    align-items:start;
    padding:76px 0 80px;
}

.wn-about .wn-about-final-number{
    display:block;
    margin-bottom:24px;
    color:#91a5b3;
    font-size:7px;
    line-height:1;
    font-weight:800;
    letter-spacing:.13em;
}

.wn-about .wn-about-final-heading h2{
    max-width:730px;
    margin:0;
    color:#092237;
    font-size:clamp(55px,5.25vw,78px);
    line-height:.94;
    font-weight:700;
    letter-spacing:-.06em;
}

.wn-about .wn-about-final-heading h2 > span{
    display:block;
    color:#91a6b5;
    font-weight:600;
}

.wn-about .wn-about-final-heading h2 > strong{
    display:block;
    color:#0b89ed;
    font-weight:700;
}


/* conversation */

.wn-about .wn-about-final-conversation{
    min-width:0;
    padding-top:41px;
}

.wn-about .wn-about-final-conversation > p{
    margin:0;
    color:#607b8d;
    font-size:13px;
    line-height:1.72;
}

.wn-about .wn-about-final-conversation > p + p{
    margin-top:17px;
}


/* ==========================================================
   GOOD PLACE TO START
   ========================================================== */

.wn-about .wn-about-final-start{
    margin-top:34px;
    padding-top:23px;
    border-top:1px solid rgba(14,89,145,.10);
}

.wn-about .wn-about-final-start > small{
    display:block;
    color:#8398a7;
    font-size:6px;
    line-height:1;
    font-weight:800;
    letter-spacing:.12em;
}

.wn-about .wn-about-final-start-line{
    display:grid;
    grid-template-columns:auto minmax(20px,1fr) auto minmax(20px,1fr) auto;
    gap:10px;
    align-items:center;
    margin-top:16px;
}

.wn-about .wn-about-final-start-line span,
.wn-about .wn-about-final-start-line strong{
    font-size:6px;
    line-height:1;
    font-weight:800;
    letter-spacing:.08em;
    white-space:nowrap;
}

.wn-about .wn-about-final-start-line span{
    color:#708b9e;
}

.wn-about .wn-about-final-start-line strong{
    color:#1687dc;
}

.wn-about .wn-about-final-start-line i{
    position:relative;
    height:1px;
    background:rgba(17,126,207,.17);
}

.wn-about .wn-about-final-start-line i::after{
    content:"";
    position:absolute;
    right:-1px;
    top:-2px;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#168ce7;
}


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

.wn-about .wn-about-final-actions{
    display:flex;
    align-items:center;
    gap:29px;
    margin-top:38px;
}

.wn-about .wn-about-final-actions .wn-btn{
    flex:0 0 auto;
}

.wn-about .wn-about-final-email{
    position:relative;
    display:grid;
    grid-template-columns:1fr auto;
    gap:4px 14px;
    min-width:185px;
    padding:4px 0 9px;
    color:inherit;
    text-decoration:none;
    border-bottom:1px solid rgba(14,111,183,.20);
    transition:
        border-color .2s ease,
        transform .2s ease;
}

.wn-about .wn-about-final-email small{
    grid-column:1 / -1;
    color:#8a9daa;
    font-size:5px;
    line-height:1;
    font-weight:800;
    letter-spacing:.11em;
}

.wn-about .wn-about-final-email strong{
    color:#17394f;
    font-size:10px;
    line-height:1.3;
    font-weight:700;
}

.wn-about .wn-about-final-email > span{
    color:#1687dc;
    font-size:11px;
}

.wn-about .wn-about-final-email:hover{
    border-color:#1687dc;
    transform:translateY(-1px);
}


/* ==========================================================
   SHORT VERSION / PRINCIPLE
   ========================================================== */

.wn-about .wn-about-final-principle{
    position:relative;
    z-index:3;
    padding:31px 0;
    border-top:1px solid rgba(14,89,145,.10);
    border-bottom:1px solid rgba(14,89,145,.10);
}

.wn-about .wn-about-final-principle-label{
    margin-bottom:23px;
}

.wn-about .wn-about-final-principle-label span{
    color:#8196a5;
    font-size:6px;
    line-height:1;
    font-weight:800;
    letter-spacing:.12em;
}

.wn-about .wn-about-final-principle-line{
    display:grid;
    grid-template-columns:auto minmax(35px,1fr) auto minmax(35px,1fr) auto minmax(35px,1fr) auto;
    gap:22px;
    align-items:center;
}

.wn-about .wn-about-final-principle-line > div{
    min-width:0;
}

.wn-about .wn-about-final-principle-line small{
    display:block;
    margin-bottom:7px;
    color:#9aabb7;
    font-size:6px;
    line-height:1;
    font-weight:800;
}

.wn-about .wn-about-final-principle-line strong{
    display:block;
    color:#27475d;
    font-size:11px;
    line-height:1.3;
    font-weight:700;
    white-space:nowrap;
}

.wn-about .wn-about-final-principle-line > i{
    position:relative;
    height:1px;
    background:linear-gradient(
        90deg,
        rgba(17,126,207,.08),
        rgba(17,126,207,.28)
    );
}

.wn-about .wn-about-final-principle-line > i::after{
    content:"";
    position:absolute;
    right:-1px;
    top:-2px;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#168ce7;
}

.wn-about .wn-about-final-principle-result{
    padding:13px 16px;
    border:1px solid rgba(16,135,220,.13);
    border-radius:3px;
    background:rgba(17,137,222,.035);
}

.wn-about .wn-about-final-principle-result small{
    color:#1687dc;
}

.wn-about .wn-about-final-principle-result strong{
    color:#0b86df;
}


/* ==========================================================
   FINAL HUMAN NOTE
   ========================================================== */

.wn-about .wn-about-final-note{
    position:relative;
    z-index:3;
    display:grid;
    grid-template-columns:150px minmax(0,1fr) 150px;
    gap:35px;
    align-items:center;
    padding-top:49px;
}

.wn-about .wn-about-final-note > span{
    color:#8b9eab;
    font-size:6px;
    line-height:1;
    font-weight:800;
    letter-spacing:.13em;
}

.wn-about .wn-about-final-note > span:last-child{
    text-align:right;
}

.wn-about .wn-about-final-note p{
    margin:0;
    color:#7890a0;
    font-size:15px;
    line-height:1.4;
    text-align:center;
}

.wn-about .wn-about-final-note p strong{
    color:#17394f;
    font-weight:700;
}


/* ==========================================================
   ≤ 1100
   ========================================================== */

@media (max-width:1100px){

    .wn-about .wn-about-final{
        padding-top:94px;
    }

    .wn-about .wn-about-final-main{
        grid-template-columns:minmax(0,1.08fr) minmax(330px,.72fr);
        gap:70px;
    }

    .wn-about .wn-about-final-heading h2{
        font-size:62px;
    }

    .wn-about .wn-about-final-principle-line{
        gap:15px;
    }

    .wn-about .wn-about-final-principle-line strong{
        font-size:10px;
    }
}


/* ==========================================================
   ≤ 950
   ========================================================== */

@media (max-width:950px){

    .wn-about .wn-about-final-main{
        grid-template-columns:1fr;
        gap:37px;
        padding:65px 0 70px;
    }

    .wn-about .wn-about-final-heading h2{
        max-width:700px;
        font-size:60px;
    }

    .wn-about .wn-about-final-conversation{
        max-width:610px;
        padding-top:0;
    }

    .wn-about .wn-about-final-principle-line{
        grid-template-columns:1fr;
        gap:0;
    }

    .wn-about .wn-about-final-principle-line > div{
        position:relative;
        padding:19px 0 19px 39px;
    }

    .wn-about .wn-about-final-principle-line > i{
        position:absolute;
        display:none;
    }

    .wn-about .wn-about-final-principle-line > div::before{
        content:"";
        position:absolute;
        left:7px;
        top:0;
        bottom:0;
        width:1px;
        background:rgba(17,126,207,.13);
    }

    .wn-about .wn-about-final-principle-line > div::after{
        content:"";
        position:absolute;
        left:4px;
        top:25px;
        width:7px;
        height:7px;
        border-radius:50%;
        background:#168ce7;
    }

    .wn-about .wn-about-final-principle-line strong{
        font-size:12px;
        white-space:normal;
    }

    .wn-about .wn-about-final-principle-result{
        border:0;
        border-radius:0;
        background:transparent;
    }

    .wn-about .wn-about-final-note{
        grid-template-columns:100px minmax(0,1fr) 100px;
    }
}


/* ==========================================================
   ≤ 760
   ========================================================== */

@media (max-width:760px){

    .wn-about .wn-about-final{
        padding:77px 0 48px;
    }

    .wn-about .wn-about-final-top{
        align-items:flex-start;
    }

    .wn-about .wn-about-final-heading h2{
        font-size:clamp(44px,11vw,59px);
    }

    .wn-about .wn-about-final-main{
        padding:56px 0 61px;
    }

    .wn-about .wn-about-final-actions{
        align-items:flex-start;
        flex-direction:column;
        gap:24px;
    }

    .wn-about .wn-about-final-email{
        width:min(270px,100%);
    }

    .wn-about .wn-about-final-note{
        grid-template-columns:1fr;
        gap:15px;
        padding-top:40px;
    }

    .wn-about .wn-about-final-note > span,
    .wn-about .wn-about-final-note > span:last-child{
        text-align:left;
    }

    .wn-about .wn-about-final-note p{
        max-width:520px;
        text-align:left;
    }
}


/* ==========================================================
   ≤ 520
   ========================================================== */

@media (max-width:520px){

    .wn-about .wn-about-final{
        padding-top:65px;
    }

    .wn-about .wn-about-final-top{
        display:block;
    }

    .wn-about .wn-about-final-status{
        width:max-content;
        max-width:100%;
        margin-top:18px;
    }

    .wn-about .wn-about-final-main{
        padding:48px 0 55px;
    }

    .wn-about .wn-about-final-number{
        margin-bottom:19px;
    }

    .wn-about .wn-about-final-heading h2{
        font-size:42px;
    }

    .wn-about .wn-about-final-conversation > p{
        font-size:12px;
    }

    .wn-about .wn-about-final-start-line{
        grid-template-columns:1fr;
        gap:9px;
    }

    .wn-about .wn-about-final-start-line i{
        width:1px;
        height:17px;
        margin-left:4px;
        background:rgba(17,126,207,.20);
    }

    .wn-about .wn-about-final-start-line i::after{
        right:-2px;
        top:auto;
        bottom:-1px;
    }

    .wn-about .wn-about-final-start-line span,
    .wn-about .wn-about-final-start-line strong{
        font-size:7px;
    }

    .wn-about .wn-about-final-principle{
        padding-block:26px;
    }

    .wn-about .wn-about-final-note p{
        font-size:14px;
    }
}


/* ==========================================================
   ≤ 380
   ========================================================== */

@media (max-width:380px){

    .wn-about .wn-about-final-heading h2{
        font-size:37px;
    }

    .wn-about .wn-about-final-status span{
        font-size:5px;
    }

    .wn-about .wn-about-final-principle-line > div{
        padding-left:32px;
    }

    .wn-about .wn-about-final-note p{
        font-size:13px;
    }
}