.method-page{
    background:#fff;
}

.method-page .nav a[aria-current="page"]{
    color:#1d9bf0;
}

.method-hero{
    position:relative;
    margin:clamp(16px, 2.6vw, 32px) var(--container-gutter) 0;
    overflow:hidden;
    border-radius:var(--radius-section);
    background:#101016e6;
    color:#fff;
}

.method-hero-bg{
    position:absolute;
    inset:0;
       background: linear-gradient(2deg, rgb(16 16 22 / 0%) 0%, rgb(16 16 22 / 27%) 44%, rgba(16, 16, 22, .24) 100%), url(../images/sky.png) center / cover no-repeat;
}


.method-hero-inner{
    position:relative;
    z-index:2;
      align-items:center;
    gap:clamp(42px, 7vw, 90px);
    padding-top:130px;
    padding-bottom:clamp(44px, 7vw, 76px);
}



.method-hero-copy h1{
    margin-bottom:24px;

    line-height:.9;
    font-weight:700;
}

.method-hero-copy p:not(.sec-label){
    max-width:680px;



    font-weight:300;
}

.method-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:32px;
}



.method-orbit{
    position:relative;
    width:min(42vw, 520px);
    aspect-ratio:1;
    justify-self:end;
}

.orbit-track{
    position:absolute;
    border:1px solid rgba(255,255,255,.24);
    border-radius:50%;
}

.orbit-track-one{
    inset:7%;
}

.orbit-track-two{
    inset:19%;
    border-style:dashed;
    opacity:.75;
}

.orbit-core{
    position:absolute;
    left:50%;
    top:50%;
    width:42%;
    aspect-ratio:1;
    transform:translate(-50%, -50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#fff;
    color:#101016e6;
    text-align:center;
    box-shadow:0 24px 70px rgba(0,0,0,.22);
}

.orbit-core span{
    color:#1d9bf0;
    font-size:13px;
    font-weight:700;
   
}

.orbit-core strong{
    max-width:130px;
    margin-top:8px;
    font-size:clamp(22px, 2.6vw, 32px);
    line-height:1;
    
}

.orbit-node{
    position:absolute;
    width:142px;
    min-height:96px;
    padding:16px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:18px;
    background:rgba(255,255,255,.11);
    backdrop-filter:blur(14px);
}

.orbit-node span{
    display:block;
    margin-bottom:7px;
    color:#9bd7ff;
    font-size:12px;
    font-weight:700;
   
}

.orbit-node strong{
    display:block;
    font-size:18px;
    line-height:1.15;
}

.node-buyers{
    left:4%;
    top:12%;
}

.node-partners{
    right:0;
    top:24%;
}

.node-programs{
    left:0;
    bottom:18%;
}

.node-homes{
    right:9%;
    bottom:5%;
}

.method-value{
    display:grid;
    grid-template-columns:minmax(0, .95fr) minmax(520px, 1.05fr);
    gap:clamp(38px, 7vw, 74px);
    align-items:start;
}

.method-value-copy{
    position:sticky;
    top:124px;
}

.method-value-copy h2,
.hub-map-head h2,
.home-method-head h2,
.outcomes-intro h2,
.method-cta h2{
    line-height:1.02;
    font-weight:700;
}

.method-value-grid{
    display:grid;
    gap:var(--grid-gap);
}

.method-value-grid article{
    padding:var(--card-pad);
    border-radius:var(--radius-card);
    border:1px solid rgba(0,0,0,.06);
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
}

.method-value-grid article:first-child{
    background:#101016e6;
    color:#fff;
}

.method-value-grid article:last-child{
    background:#f7f7f5;
}

.method-value-grid span,
.hub-rail span,
.hub-core span,
.method-detail span,
.outcomes-grid span{
    display:block;
    margin-bottom:14px;
    color:#1d9bf0;
    font-size:12px;
    font-weight:700;
    
    
}

.method-value-grid h3{
    max-width:520px;
    margin-bottom:14px;
    font-size:clamp(26px, 3vw, 38px);
    line-height:1.05;
    ;
    font-weight:700;
}

.method-value-grid p{
    max-width:560px;


}

.hub-map{
    padding-top:0;
}

.hub-map-head{
    max-width:830px;
    margin-bottom:var(--section-gap);
}

.hub-map-layout{
    display:grid;
    grid-template-columns:minmax(220px, .75fr) minmax(340px, 1.1fr) minmax(220px, .75fr);
    gap:var(--grid-gap);
    align-items:center;
}

.hub-rail{
    display:grid;
    gap:var(--grid-gap);
}

.hub-rail article{
    padding:24px;
    border-radius:var(--radius-card);
    background:#f7f7f5;
    border:1px solid rgba(0,0,0,.06);
}

.hub-rail strong{
    display:block;
    font-size:19px;
    line-height:1.25;
    ;
    font-weight:700;
}

.hub-core{
    overflow:hidden;
    border-radius:var(--radius-section);
    background:#101016e6;
    color:#fff;
}

.hub-core img{
    display:block;
    width:100%;
    aspect-ratio:4 / 3;
    object-fit:cover;
}

.hub-core div{
    padding:var(--card-pad);
}

.hub-core strong{
    display:block;
    max-width:440px;
    margin-bottom:12px;
    font-size:clamp(30px, 3.4vw, 44px);
    line-height:1;
    
    font-weight:700;
}

.home-method{
    border-radius:var(--radius-section);
    background:#f7f7f5;
}

.home-method-head{
    max-width:860px;
    margin-bottom:var(--section-gap);
}

.method-stage{
    display:grid;
    grid-template-columns:minmax(250px, .45fr) minmax(0, 1fr);
    gap:var(--grid-gap);
}

.method-letter-stack{
    display:grid;
    gap:12px;
}

.method-letter{
    width:100%;
    min-height:96px;
    padding:18px;
    display:flex;
    align-items:center;
    gap:16px;
    border:1px solid rgba(0,0,0,.08);
    border-radius:var(--radius-card);
    background:#fff;
    color:#101016e6;
    font:inherit;
    text-align:left;
    cursor:pointer;
    transition:border-color .24s ease, transform .24s ease, background .24s ease, color .24s ease;
}

.method-letter:hover,
.method-letter:focus-visible{
    border-color:rgba(29,155,240,.52);
    outline:none;
}

.method-letter.active{
    transform:translateX(8px);
    border-color:#1d9bf0;
    background:#1d9bf0;
    color:#fff;
}

.method-letter span{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 58px;
    width:58px;
    height:58px;
    border-radius:50%;
    background:rgba(29,155,240,.12);
    color:#1d9bf0;
    font-size:30px;
    font-weight:700;
}

.method-letter.active span{
    background:#fff;
    color:#1d9bf0;
}

.method-letter strong{
    font-size:20px;
}

.method-detail{
    display:none;
    min-height:420px;
    padding:var(--panel-pad);
    border-radius:var(--radius-card);
    background:#fff;
    border:1px solid rgba(0,0,0,.06);
}

.method-detail.active{
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
}

.method-detail h3{
    max-width:820px;
    margin-bottom:18px;
    font-size:clamp(38px, 5vw, 64px);
    line-height:.98;
    
    font-weight:700;
}

.method-detail p{
    max-width:760px;



}

.method-detail ul{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:12px;
    margin-top:30px;
}

.method-detail li{
    min-height:94px;
    padding:16px;
    border-radius:18px;
    background:#f7f7f5;
    color:#101016e6;
    font-size:14px;
    font-weight:700;
    line-height:1.4;
}

.method-outcomes{
    display:grid;
    grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr);
    gap:clamp(38px, 7vw, 74px);
    align-items:start;
}

.outcomes-intro{
    position:sticky;
    top:124px;
}

.outcomes-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:var(--grid-gap);
}

.outcomes-grid article{
    min-height:250px;
    padding:var(--card-pad);
    border-radius:var(--radius-card);
    border:1px solid rgba(0,0,0,.06);
    background:#f7f7f5;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
}

.outcomes-grid article:nth-child(2){
    background:#1d9bf0;
    color:#fff ;
}
.outcomes-grid article:nth-child(2) span{
     color:#fff !important;
}
.outcomes-grid h3{
    margin-bottom:10px;
    font-size:27px;
    line-height:1.08;
    
    font-weight:700;
}

.method-cta{
    margin-bottom:var(--section-y-tight);
    border-radius:var(--radius-section);
    background:#101016e6;
    color:#fff;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:28px;
}

.method-cta div{
    max-width:780px;
}

.method-cta .primary-btn{
    flex:0 0 auto;
}

@media(max-width:1100px){
    .method-hero-inner,
    .method-value,
    .method-outcomes{
        grid-template-columns:1fr;
    }

    .method-hero-inner{
        align-items:start;
    }

    .method-orbit{
        width:min(620px, 100%);
        justify-self:start;
    }

    .method-value-copy,
    .outcomes-intro{
        position:static;
    }

    .hub-map-layout{
        grid-template-columns:1fr;
    }

    .hub-rail{
        grid-template-columns:repeat(3, 1fr);
    }

    .method-stage{
        grid-template-columns:1fr;
    }

    .method-letter-stack{
        grid-template-columns:repeat(4, 1fr);
    }

    .method-letter{
        flex-direction:column;
        align-items:flex-start;
        min-height:132px;
    }

    .method-letter.active{
        transform:translateY(-6px);
    }
}

@media(max-width:760px){
    .method-page .nav{
        left:16px;
        right:auto;
        width:calc(100vw - 32px);
        max-width:calc(100vw - 32px);
    }

    .method-hero{
        min-height:auto;
        width:calc(100vw - 32px);
        margin:16px auto 0;
    }

    .method-hero-inner{
        min-height:auto;
        padding-top:118px;
    }

    .method-hero-copy h1{

        
}

    .method-orbit{
        aspect-ratio:auto;
        display:grid;
        gap:12px;
    }

    .orbit-track,
    .orbit-core{
        display:none;
    }

    .orbit-node{
        position:relative;
        left:auto;
        right:auto;
        top:auto;
        bottom:auto;
        width:100%;
        min-height:auto;
    }

    .method-value-grid article{
        min-height:230px;
    }

    .hub-rail{
        grid-template-columns:1fr;
    }

    .home-method,
    .method-cta{
        width:calc(100% - 32px);
    }

    .method-letter-stack,
    .outcomes-grid{
        grid-template-columns:1fr;
    }

    .method-detail{
        min-height:auto;
        padding:24px;
    }

    .method-detail h3{
        font-size:38px;
        
    }

    .method-detail ul{
        grid-template-columns:1fr;
    }

    .method-cta{
        flex-direction:column;
        align-items:flex-start;
    }
}