/* ===== Large laptops / small desktops ===== */
@media (max-width:1199px) {
    .fg { grid-template-columns: 1fr 1fr }
    .pillars, .plies { grid-template-columns: repeat(2, 1fr) }
    .menu { gap: 22px }
    .menu ul { gap: 20px }
}

/* ===== Tablet & mobile (menu becomes full-screen) ===== */
@media (max-width:991px) {
    .burger { display: block }

    /* full screen menu, smooth open/close */
    .menu {
        position: fixed;
        inset: 0;
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        background: var(--ink);
        color: var(--cream);
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 30px;
        padding: 90px 8% 40px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-24px);
        transition: opacity .4s ease, transform .5s cubic-bezier(.7, 0, .2, 1), visibility 0s linear .5s;
        z-index: 2
    }
    header.open .menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        transition: opacity .4s ease, transform .5s cubic-bezier(.2, .8, .2, 1), visibility 0s
    }
    .menu ul { flex-direction: column; gap: 6px; width: 100% }
    .menu li a { font-size: 1.8rem; display: inline-block; padding: 8px 0 }
    .menu .btn { width: 100% }

    /* staggered links (pure CSS) */
    .menu li, .menu .btn {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity .35s ease, transform .45s ease
    }
    header.open .menu li, header.open .menu .btn {
        opacity: 1;
        transform: none;
        transition: opacity .5s ease, transform .5s ease
    }
    header.open .menu li:nth-child(1) { transition-delay: .15s }
    header.open .menu li:nth-child(2) { transition-delay: .21s }
    header.open .menu li:nth-child(3) { transition-delay: .27s }
    header.open .menu li:nth-child(4) { transition-delay: .33s }
    header.open .menu li:nth-child(5) { transition-delay: .39s }
    header.open .menu li:nth-child(6) { transition-delay: .45s }
    header.open .menu .btn { transition-delay: .52s }

    /* hero */
    .hero { min-height: 0; padding: 130px 0 70px }
    .hero.sm { padding: 120px 0 60px }
    .hero>.wrap { width: min(1240px, 92%) }
    .hero .grid, .two { grid-template-columns: minmax(0, 1fr) }
    .hero .grid { gap: 40px }
    .hero .grid>* { min-width: 0 }
    .hv { max-width: 560px; width: 100% }
    .hv img { width: 100% }
    .legal { padding-top: 130px }

    .g3 { grid-template-columns: 1fr 1fr }
    .strip .wrap { grid-template-columns: 1fr 1fr }
    .strip .it:nth-child(3) { border-left: 0 }
    .strip .it { border-top: 1px solid #f5ebdd26 }
    .head { margin-bottom: 32px }

    .steps { grid-template-columns: 1fr; gap: 28px; padding-left: 0 }
    .steps .line { top: 0; bottom: 0; left: 21px; right: auto; border-top: 0; border-left: 2px dashed var(--kraft) }
    .step { display: grid; grid-template-columns: 44px 1fr; gap: 0 18px }
    .step b { margin: 0; grid-row: span 2 }
    .step p { margin: 0 }

    .hs .track { display: grid; grid-template-columns: 1fr 1fr; padding: 40px 4% 80px; overflow: visible; width: auto }
    .panel { flex: auto }
    .fb { flex-direction: column }
    .cta .boxline { width: min(220px, 30vw) }
}

/* ===== Large phones ===== */
@media (max-width:767px) {
    .g3, .hs .track { grid-template-columns: 1fr }
    .ben { grid-template-columns: 1fr 1fr }
    .iso { padding: 24px; gap: 18px }
    .fb nav { flex-wrap: wrap; gap: 14px }
    .head { align-items: flex-start }
}

/* ===== Phones ===== */
@media (max-width:575px) {
    section { padding: 56px 0 }
    .g3, .hs .track, .frow, .ben, .pillars, .plies, .fg { grid-template-columns: 1fr }
    .plies { grid-template-columns: 1fr 1fr }
    .strip { padding: 0 }
    .strip .it { padding: 22px 14px }
    .strip strong { font-size: 1.15rem }
    .dlg { padding: 28px 20px }
    .btn { width: 100% }
    .btns { gap: 10px }
    .float { display: none }
    .cta .boxline { opacity: .15 }

    h1 { font-size: clamp(2rem, 9.5vw, 2.6rem) }
    h2 { font-size: clamp(1.6rem, 7vw, 2rem) }
    .lead { font-size: 1rem }
    .hero { padding: 110px 0 50px }
    .hero.sm { padding: 105px 0 44px }
    .hero .grid { gap: 28px }
    .eyebrow { white-space: normal; letter-spacing: .12em }
    .tl strong { font-size: 2rem }
    .formbox { padding: 22px 18px }

    header { padding: 14px 0 }
    header.solid { padding: 9px 0 }
    .bar { gap: 12px }
    .logo { font-size: .95rem; letter-spacing: .03em; gap: 8px }
    .logo i { width: 26px; height: 26px }
    .menu li a { font-size: 1.5rem }
    .top { right: 14px; bottom: 14px }
    footer { padding-top: 60px }
}

/* ===== Very small phones ===== */
@media (max-width:360px) {
    .logo { font-size: .8rem; letter-spacing: .02em }
    .logo i { width: 22px; height: 22px; font-size: .7rem }
    .plies { grid-template-columns: 1fr }
    h1 { font-size: 1.9rem }
}

/* ===== Very large screens ===== */
@media (min-width:1600px) {
    .wrap { width: min(1360px, 88%) }
}