/*================================================
HAPI DESIGN — responsive.css
================================================*/

@media (max-width:1080px){
    .hero-side{border-left:none;border-top:1px solid rgba(251,248,241,.25);padding-left:0;padding-top:24px;max-width:none;}
    .intro-grid, .verhaal-grid, .contact-grid, .pd-grid{grid-template-columns:1fr;}
    .feat-row, .feat-row.reverse{grid-template-columns:1fr;}
    .feat-row.reverse .feat-media{order:1;}
    .feat-row.reverse .feat-copy{order:2;}
    .cta-block{grid-template-columns:1fr;text-align:left;}
    .steps-rail{grid-template-columns:1fr 1fr;row-gap:36px;}
    .cutlist-row{grid-template-columns:50px 1fr;grid-template-areas:"idx title" ". desc";}
    .cutlist-row .idx{grid-area:idx;}
    .cutlist-row h3{grid-area:title;}
    .cutlist-row p{grid-area:desc;}
}

@media (max-width:860px){
    nav{padding:0 22px;height:76px;}
    .logo img{height:40px;}
    .burger{display:flex;}
    .menu{
        position:fixed;top:0;right:0;height:100vh;width:min(300px,82%);
        background:var(--ink);flex-direction:column;justify-content:center;
        align-items:flex-start;gap:28px;padding:40px;
        transform:translateX(100%);transition:.4s ease;z-index:1000;
    }
    .menu.open{transform:translateX(0);}
    .menu a{font-size:16px;}
    .nav-button{display:none;}

    section{padding:80px 0;}
    .hero-inner{padding:0 22px 60px;}
    .hero h1{max-width:none;}
    .section-head{grid-template-columns:1fr;}
    .section-head .lead{margin-top:10px;}

    .pd-photo img{height:340px;}
    .pd-thumbs{grid-template-columns:repeat(3,1fr);}

    .footer-grid{grid-template-columns:1fr 1fr;}
    .footer-logo{width:210px;}

    .plist-row{padding:20px 0;}
    .order-form{padding:28px;}
    .contact-card{padding:28px;}
    .frow{grid-template-columns:1fr;}

    .page-hero{padding:calc(76px + 60px) 0 50px;}
}

@media (max-width:560px){
    .footer-grid{grid-template-columns:1fr;}
    .steps-rail{grid-template-columns:1fr;}
    .pd-thumbs{grid-template-columns:repeat(4,1fr);}
    .hero-sign{white-space:normal;font-size:1.5rem;max-width:20ch;}
}