.blog-page{background:#fff}
.blog-page .site-header{position:fixed}
.blog-hero,.detail-hero
{padding:150px 0 84px;color:#fff;
    background:linear-gradient(100deg,rgba(5,10,8,.98)
    ,rgba(5,10,8,.86),rgba(5,10,8,.5)),url('../images/hero/printing-machine.png') center/cover}
    .crumb{display:flex;gap:8px;margin:0 0 20px;color:#b8b8b8;font-size:12px}
    .crumb a{color:#fff}
    .crumb span:last-child{color:#f4b400}
    .blog-hero h1,
    .detail-hero h1{max-width:680px;
        margin:0 0 16px;
        font-size:clamp(40px,5vw,64px);
        line-height:1.1;font-weight:800;
        text-transform:uppercase}
        .blog-hero h1 span{color:#f4b400}
        .blog-hero p:not(.eyebrow),
        .detail-hero p{max-width:600px;color:#b8b8b8;line-height:1.8}
        .hero-image{height:350px;
            width:100%;object-fit:cover;
            border:1px solid rgba(255,255,255,.12);
            border-radius:18px;
            box-shadow:0 22px 50px rgba(0,0,0,.3)}
            .blog-page .section{padding:78px 0}
            .featured-post{overflow:hidden;border:1px solid #e7e7e7;
                border-radius:18px;
                box-shadow:0 12px 30px rgba(0,0,0,.08);
                transition:transform .35s,box-shadow .35s}
                .featured-post:hover,
                .blog-card:hover{transform:translateY(-10px);
                    box-shadow:0 24px 46px rgba(0,0,0,.15)}
                    .featured-post img{width:100%;height:100%;min-height:330px;object-fit:cover}
                    .featured-copy{padding:38px}
                    .badge-cat{display:inline-block;padding:6px 12px;border-radius:99px;color:#111;background:#f4b400;font-size:10px;font-weight:800;text-transform:uppercase}
                    .meta{margin:13px 0;color:#777;font-size:11px}
                    .featured-copy h2{font-size:30px;font-weight:700}
                    .featured-copy p{color:#626262;line-height:1.75}
                    .author{color:#222;font-size:12px;font-weight:700}
                    .blog-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:36px}
                    .blog-filter button{padding:9px 17px;border:1px solid #ddd;border-radius:99px;background:#fff;font-size:12px;font-weight:700;transition:.35s}.blog-filter button.active,
                    .blog-filter button:hover{color:#111;background:#f4b400;border-color:#f4b400}
                    .blog-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:38px}
                    .posts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
                    .blog-card{overflow:hidden;border:1px solid #e7e7e7;border-radius:18px;background:#fff;box-shadow:0 10px 25px rgba(0,0,0,.06);transition:transform .35s,box-shadow .35s}.blog-card.hidden{display:none}.blog-card img{width:100%;height:175px;object-fit:cover}.blog-card-body{padding:20px}.blog-card h3{min-height:52px;margin:9px 0;font-size:17px;line-height:1.35}.blog-card p{min-height:58px;margin:0 0 13px;color:#626262;font-size:12px;line-height:1.65}.blog-card a,.featured-copy a{color:#070707;font-size:12px;font-weight:800}
                    .sidebar-box{margin-bottom:22px;padding:23px;border:1px solid #e7e7e7;border-radius:18px;background:#fff;box-shadow:0 8px 22px rgba(0,0,0,.05)}.sidebar-box h3{margin:0 0 16px;font-size:18px}.sidebar-search,.newsletter-form{display:flex}.sidebar-search input,.newsletter-form input,.comment-form input,.comment-form textarea{width:100%;padding:12px;border:1px solid #ddd;border-radius:8px;font:inherit;font-size:12px}.sidebar-search button,.newsletter-form button{border:0;padding:0 13px;background:#f4b400}.side-post{display:flex;gap:10px;margin:13px 0}
                    .side-post img{width:58px;height:52px;object-fit:cover;border-radius:7px}
                    .side-post a{font-size:11px;font-weight:700;line-height:1.45}
                    .side-post small{display:block;color:#777;font-size:10px}
                    .side-list{display:grid;gap:9px;margin:0;padding:0;list-style:none}
                    .side-list a{font-size:12px}.tags{display:flex;flex-wrap:wrap;gap:7px}
                    .tags span{padding:6px 9px;border-radius:99px;background:#f7f7f7;font-size:10px}
                    .newsletter{color:#fff;background:#0e0e0e}.newsletter .section-heading p{color:#b8b8b8}
                    .newsletter-form{max-width:570px;margin:auto}
                    .newsletter-form input{border-radius:5px 0 0 5px}
                    .newsletter-form button{padding:0 24px;border-radius:0 5px 5px 0;font-weight:800}
                    .detail-main{max-width:840px;margin:auto}
                    .detail-image{width:100%;height:410px;object-fit:cover;border-radius:18px}
                    .article-copy{padding-top:28px;color:#444;font-size:15px;line-height:1.9}
                    .article-copy h2{margin-top:30px;color:#111;font-size:27px}
                    .article-copy blockquote{margin:28px 0;padding:24px;border-left:4px solid #f4b400;background:#f7f7f7;color:#222;font-size:19px;font-weight:600}
                    .article-nav{display:flex;justify-content:space-between;gap:18px;margin:35px 0;padding:20px 0;border-block:1px solid #e7e7e7}.article-nav a{font-size:12px;font-weight:800}
                    .comment-form{display:grid;gap:12px;margin-top:20px}
                    .comment-form textarea{min-height:120px}
                    .comment-form button{justify-self:start;border:0}
                    .related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}@media(max-width:991px){.blog-layout{grid-template-columns:1fr}.posts-grid{grid-template-columns:repeat(2,1fr)}.hero-image{margin-top:12px}.sidebar{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
                    .sidebar-box{margin:0}
                    .related-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:767px){.blog-page .section{padding:55px 0}
                    .blog-hero,.detail-hero{padding:125px 0 65px}
                    .posts-grid,.sidebar,.related-grid{grid-template-columns:1fr}
                    .featured-copy{padding:25px}
                    .featured-copy h2{font-size:25px}
                    .featured-post img{min-height:220px}
                    .hero-image{height:250px}
                    .detail-image{height:250px}}