@media (max-width: 1180px){
    .hero-grid,
    .duo-grid,
    .footer-grid,
    .section-title,
    .cta-panel,
    .cta-panel--final{
        grid-template-columns:1fr;
    }

    .cards{
        grid-template-columns:repeat(2, minmax(0,1fr));
    }

    .hero-wrap{
        padding-top:90px;
    }
}

@media (max-width: 1024px){
    .method-cards{
        grid-template-columns:1fr;
    }
}

@media (max-width: 980px){
    .cta-actions{
        justify-self:start;
        max-width:340px;
    }
}

@media (max-width: 920px){
    .nav{
        display:none;
        position:absolute;
        top:88px;
        left:20px;
        right:20px;
        padding:20px;
        border-radius:24px;
        background:rgba(1,63,82,.96);
        box-shadow:var(--shadow-soft);
        flex-direction:column;
        align-items:flex-start;
        gap:16px;
    }

    body.menu-open .nav{
        display:flex;
    }

    .menu-toggle{
        display:inline-flex;
    }

    .hero{
        min-height:auto;
    }

    .hero-grid,
    .split-links{
        grid-template-columns:1fr;
    }

    .hero-copy h1{
        font-size:clamp(42px, 13vw, 68px);
    }

    .hero-stats{
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .stat{
        text-align: center;
        padding-top: 18px;
    }
    .stat strong{
        margin-bottom: 12px;
    }
    .stat span{
        max-width: 280px;
        margin: 0 auto;
    }
}

@media (max-width: 680px){
    .container{
        width:min(calc(100% - 26px), var(--maxw));
    }

    .section{
        padding:72px 0;
    }

    .site-brand img{
        height:86px;
        margin-top:20px;
    }

    .visual-panel{
        min-height:280px;
    }

    .split-link,
    .duo-card,
    .card,
    .method-card,
    .cta-panel--final,
    .payoff-shell,
    .method-shell{
        border-radius:24px;
    }

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

    .payoff h2,
    .section-title h2,
    .cta-panel--final h3,
    .method-top h2{
        font-size:28px;
    }

    .duo-card h3{
        font-size:26px;
    }

    .card-body h4{
        font-size:24px;
    }

    .method-shell,
    .cta-panel--final,
    .payoff-shell{
        padding:24px;
    }

    .cta-actions{
        max-width:100%;
    }
    .payoff h2{
        font-size: 26px;
        line-height: 1.12;
        letter-spacing: -.03em;
    }
    .payoff{
        max-width: 100%;
        padding: 8px 12px;
    }
    .payoff p{
        margin-top: 18px;
        font-size: 15px;
        line-height: 1.75;
        max-width: 100%;
    }
    payoff-shell{
        padding: 22px 18px;
        border-radius: 24px;
    }
    .payoff-corner{
        width: 28px;
        height: 28px;
    }
    .payoff-dot{
        width: 8px;
        height: 8px;
    }
    .payoff-corner--start{
        top: -2px;
        left: 2px;
    }
    .payoff-dot--start{
        top: 14px;
        left: 30px;
    }
    .payoff-corner--end{
        right: 2px;
        bottom: -2px;
    }
    .payoff-dot--end{
        right: 30px;
        bottom: 14px;
    }
    .footer-grid > div:first-child{
        text-align: center;
    }
    .footer-grid > div:first-child img{
        margin: 0 auto;
    }
    .footer-grid > div:first-child p{
        margin-left: auto;
        margin-right: auto;
    }
    .footer-menu{
        padding-left: 25px;
        padding-right: 10px;
    }
}
@media (max-width: 768px) {
    .almalife-v12 .menu-toggle {
        color: #07485a;
        border-color: rgba(7, 72, 90, .25);
    }

    .almalife-v12 .menu-toggle__text {
        color: #07485a;
    }

    .almalife-v12 .menu-toggle__icon span {
        background-color: #07485a;
    }
}

@media (max-width: 768px) {
    .hero .hero-stats {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        width: 100%;
        margin-top: 28px;
        padding: 0;
        border: 0;
    }

    .hero .hero-stats .stat {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 24px;
        text-align: left;

        background: rgba(255, 255, 255, .08);
        border: 1px solid rgba(255, 255, 255, .18);
        border-radius: 22px;
    }

    .hero .hero-stats .stat strong {
        display: block;
        margin: 0;
        color: #f5df83;
        font-size: 32px;
        font-weight: 800;
        line-height: 1;
    }

    .hero .hero-stats .stat span {
        display: block;
        color: #e0edf1;
        font-size: 15px;
        line-height: 1.7;
        text-align: left;
    }

    .hero .hero-stats .stat em {
        color: #f5df83;
        font-style: normal;
        font-weight: 700;
    }
}