/* ==========================================================================
   HDC CONSTRUCTION — responsive behaviour
   Breakpoints: 1200 / 1100 / 980 / 820 / 640 / 480 / 380
   ========================================================================== */

@media (max-width: 1240px) {
    .hero-badge { display: none; }
    .hero-scroll { display: none; }
    .nav-list { gap: 18px; }
    .nav-list > li > a { font-size: 11px; letter-spacing: .07em; }
    .header-quote { padding-inline: 18px; }
    .process-grid { gap: 12px; }
}

@media (max-width: 1100px) {
    :root {
        --topbar-h: 0px;
        --header-main-h: 76px;
    }

    .topbar { display: none; }
    .header-main { height: var(--header-main-h); background: rgba(4, 17, 39, .55); }
    .header-inner { height: var(--header-main-h); gap: 16px; }
    .brand img { height: 40px; }

    .main-nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1200;
        width: min(410px, 92vw);
        margin: 0;
        padding: 0 26px 34px;
        background: #fff;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(103%);
        visibility: hidden;
        transition: transform .38s cubic-bezier(.28, .8, .3, 1), visibility .38s;
        box-shadow: -20px 0 60px rgba(4, 17, 39, .2);
    }
    body.nav-open .main-nav { transform: none; visibility: visible; }

    .nav-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: var(--header-main-h);
        margin: 0 -26px;
        padding: 0 26px;
        border-bottom: 1px solid var(--line);
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 6;
    }
    .nav-head-brand img { height: 36px; width: auto; }
    .nav-close {
        width: 40px; height: 40px; border-radius: 50%;
        border: 1px solid var(--line); background: #fff; color: var(--ink);
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 15px; cursor: pointer;
    }
    .nav-close:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

    .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
    .nav-list > li { display: block; position: relative; border-bottom: 1px solid #eef1f6; }
    .nav-list > li > a {
        display: block;
        padding: 15px 44px 15px 0;
        color: var(--ink);
        font-size: 14px;
        font-weight: 600;
        letter-spacing: .01em;
        text-transform: none;
        line-height: 1.4;
    }
    .nav-list > li > a::after { display: none; }
    .nav-list > li > a.is-active { color: var(--blue); }

    .submenu-toggle {
        position: absolute; right: 0; top: 7px;
        width: 40px; height: 40px; margin: 0;
        color: var(--ink); font-size: 11px;
    }
    .submenu-toggle[aria-expanded="true"] i { transform: rotate(180deg); }

    .submenu, .mega-menu {
        position: static;
        display: none;
        width: auto;
        min-width: 0;
        padding: 2px 0 14px;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        opacity: 1;
        visibility: visible;
        transform: none !important;
    }
    .nav-list > li.is-open > .submenu,
    .nav-list > li.is-open > .mega-menu { display: block; }
    .submenu::before { display: none; }
    .submenu a { padding: 9px 10px; font-size: 13px; color: var(--body); }
    .submenu a:hover { background: var(--blue-soft); }
    .mega-cats { padding: 0; }
    .mega-eyebrow { display: none; }
    .mega-cats > a { padding: 9px 10px; font-size: 13px; border-bottom: 1px solid #f3f6fa; }
    .mega-feature { display: none; }
    .mega-links { border-left: 0; padding: 6px 0 0; }
    .mega-links a { padding: 8px 10px; }
    .mega-links i { width: 30px; height: 30px; font-size: 11px; }
    .mega-links small { display: none; }

    .nav-mobile-extra { display: block; padding: 24px 0 0; }
    .nav-mobile-extra .btn { width: 100%; }
    .nav-contact-line { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink); padding: 7px 0; }
    .nav-contact-line i { color: var(--blue); width: 16px; text-align: center; }
    .nav-contact-line:hover { color: var(--blue); }
    .nav-socials { display: flex; gap: 8px; margin-top: 16px; }
    .nav-socials a {
        width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line);
        display: inline-flex; align-items: center; justify-content: center;
        color: var(--navy); font-size: 12px;
    }
    .nav-socials a:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

    .nav-toggle { display: flex; }
    .header-quote { display: none; }

    .product-grid { grid-template-columns: repeat(3, 1fr); }
    .process-grid { grid-template-columns: repeat(3, 1fr); }
    .process-step::after { display: none; }
    .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
    .footer-contact { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; }
    .footer-contact h3 { grid-column: 1 / -1; }
    .footer-contact .footer-address { margin-bottom: 14px; }

    .video-layout { grid-template-columns: 1fr 1fr; }
    .video-hero-card { min-height: 420px; }
    .video-list .video-media { width: 110px; min-width: 110px; }
}

@media (max-width: 980px) {
    .section { padding: 78px 0; }
    .page-section { padding: 72px 0; }
    .section-head { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 36px; }
    .section-head.is-center { align-items: center; }
    .section-head .section-link { margin-bottom: 0; }

    .split-layout { grid-template-columns: 1fr; gap: 54px; }
    .media-collage { max-width: 620px; width: 100%; margin-inline: auto; }
    .media-main img { height: 480px; }
    .split-copy { max-width: 720px; }

    .trust-strip { grid-template-columns: 1fr 1fr; gap: 22px 30px; margin-top: 58px; }

    .application-grid { grid-template-columns: 1fr 1fr; }
    .application-card { height: 290px; }

    .why-section { padding: 78px 0; }
    .why-layout { grid-template-columns: 1fr; gap: 44px; }
    .why-copy { position: static; }
    .why-copy p { max-width: 640px; }

    .project-grid { grid-template-columns: 1fr 1fr; }
    .post-grid { grid-template-columns: 1fr 1fr; }
    .video-layout { grid-template-columns: 1fr; }
    .video-hero-card { min-height: 460px; }
    .video-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .video-list .video-card { height: 100%; }
    .vr-cta { grid-column: 1 / -1; }

    .process-grid { grid-template-columns: 1fr 1fr; }

    .project-foot { align-items: flex-start; flex-direction: column; gap: 16px; }
    .testimonial-author { row-gap: 8px; }

    .about-grid { grid-template-columns: 1fr; gap: 56px; }
    .about-media { max-width: 620px; }
    .about-media img { height: 460px; }
    .about-media .about-media-small { right: 0; }
    .value-grid { grid-template-columns: 1fr 1fr; }
    .team-grid { grid-template-columns: 1fr 1fr; }
    .factory-gallery { grid-template-columns: 1fr 1fr; }
    .factory-stats { grid-template-columns: 1fr 1fr; }
    .cert-grid { grid-template-columns: repeat(3, 1fr); }
    .split-cta { flex-direction: column; align-items: flex-start; padding: 34px 30px; }

    .detail-layout { grid-template-columns: 1fr; gap: 40px; }
    .detail-gallery { position: static; }
    .detail-main-image { max-height: 560px; }
    .detail-copy h1 { margin-top: 4px; }
    .detail-prose { margin-top: 38px; padding-top: 34px; }

    .project-detail-head { grid-template-columns: 1fr; gap: 26px; }
    .project-detail-body { grid-template-columns: 1fr; }
    .project-sidebar { position: static; display: grid; grid-template-columns: 1fr 1fr; }
    .project-detail-body .prose { max-width: 820px; }

    .blog-featured { grid-template-columns: 1fr; }
    .blog-featured-media { min-height: 320px; }
    .blog-layout { grid-template-columns: 1fr; }
    .blog-sidebar { position: static; display: grid; grid-template-columns: 1fr 1fr; }
    .article-layout { grid-template-columns: 1fr; }
    .article { max-width: 100%; }
    .article-layout .blog-sidebar { display: grid; }
    .comments { margin-top: 40px; }

    .contact-layout { grid-template-columns: 1fr; gap: 44px; }
    .contact-info { max-width: 720px; }
    .map-card { height: 340px; }
    .video-grid { grid-template-columns: 1fr 1fr; }

    .featured-catalog { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
    .container { width: calc(100% - 48px); }
    .stats-band { padding: 42px 0; }
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 30px 0; }
    .stat { padding: 0 22px; }
    .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
    .stat:nth-child(even) { border-left: 1px solid rgba(255,255,255,.16); }
    .stat strong { font-size: 34px; }
    .stat > span { font-size: 9.5px; letter-spacing: .12em; }

    .hero { min-height: 620px; }
    .hero-caption { padding-top: 110px; padding-bottom: 110px; }
    .hero-caption h1 { font-size: clamp(32px, 6.8vw, 46px); }
    .hero-caption p { font-size: 14.5px; max-width: 540px; }
    .hero-controls-wrap { bottom: 24px; }
    .hero-controls { gap: 18px; }
    .hero-arrow { width: 44px; height: 44px; }
    .hero-dot { width: 38px; }

    .page-hero { min-height: 340px; }
    .page-hero-inner { padding-top: 112px; padding-bottom: 46px; }
    .page-hero p { font-size: 14px; }

    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-contact { grid-column: 1 / -1; }
    .footer-top { padding: 60px 0 50px; }
    .newsletter-inner { flex-direction: column; align-items: flex-start; gap: 18px; }
    .newsletter-form { width: 100%; }

    .product-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
    .project-grid { gap: 18px; }
    .post-grid { gap: 20px; }
    .application-grid { gap: 14px; }
    .application-card { height: 260px; }
    .application-copy { left: 18px; right: 18px; bottom: 18px; }
    .application-copy strong { font-size: 17px; }

    .timeline::before { left: 8px; }
    .timeline-item, .timeline-item:nth-child(even) {
        width: 100%; margin-left: 0; padding: 0 0 34px 34px; text-align: left;
    }
    .timeline-item::after, .timeline-item:nth-child(even)::after { left: 3px; right: auto; }
    .timeline-year { font-size: 22px; }

    .contact-cards { grid-template-columns: 1fr 1fr; }
    .contact-form-card { padding: 26px 22px; }

    .blog-sidebar { grid-template-columns: 1fr; }
    .project-sidebar { grid-template-columns: 1fr; }
    .article-layout .blog-sidebar { grid-template-columns: 1fr; }
    .factory-gallery .wide { grid-column: span 1; grid-row: span 1; }

    .video-list { grid-template-columns: 1fr; }
    .video-list .video-media { width: 150px; min-width: 150px; }
    .video-hero-card { min-height: 400px; }

    .cookie-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
    .cookie-actions { width: 100%; }
    .cookie-actions .btn { flex: 1; }
}

@media (max-width: 640px) {
    .container { width: calc(100% - 36px); }
    body { font-size: 15px; }
    h1 { font-size: 34px; }
    h2 { font-size: 28px; }

    .section { padding: 62px 0; }
    .page-section { padding: 58px 0; }
    .section-sm { padding: 50px 0; }
    .section-head { margin-bottom: 30px; }
    .section-head h2 { font-size: 27px; }
    .section-head p { font-size: 13.5px; }

    .btn { padding: 12px 20px; font-size: 11.5px; }
    .btn-lg { padding: 14px 22px; font-size: 12px; }

    .header-main { background: rgba(4, 17, 39, .66); }
    .brand img { height: 35px; }
    .nav-toggle { width: 40px; height: 40px; }
    .main-nav { padding: 0 22px 30px; }
    .nav-head { margin: 0 -22px; padding: 0 22px; }

    .hero { min-height: 600px; height: 92vh; }
    .hero-shade {
        background:
            linear-gradient(90deg, rgba(4,15,36,.9), rgba(4,15,36,.5)),
            linear-gradient(0deg, rgba(4,15,36,.82), transparent 55%);
    }
    .hero-caption { padding-top: 104px; padding-bottom: 108px; }
    .hero-caption h1 { font-size: clamp(30px, 9vw, 40px); line-height: 1.1; }
    .hero-caption p { font-size: 13.5px; line-height: 1.7; margin-bottom: 26px; }
    .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; max-width: 340px; }
    .hero-actions .btn { width: 100%; }
    .hero-controls-wrap { bottom: 20px; }
    .hero-dot { width: 30px; }
    .hero-arrow { display: none; }

    .page-hero { min-height: 300px; }
    .page-hero-inner { padding-top: 102px; padding-bottom: 38px; }
    .page-hero h1 { font-size: 30px; }
    .breadcrumbs { margin-top: 16px; font-size: 10px; }

    .media-main img { height: 380px; }
    .media-small img { height: 170px; }
    .media-collage { padding: 0 22px 52px 0; }
    .experience-badge { left: -8px; bottom: 52px; padding: 14px 16px; gap: 10px; }
    .experience-badge strong { font-size: 36px; }
    .experience-badge small { font-size: 8.5px; }
    .media-small { border-width: 6px; border-radius: 12px; }
    .split-copy .lead { font-size: 15.5px; }
    .split-copy h2 { font-size: 27px; }
    .check-grid { grid-template-columns: 1fr; gap: 9px; margin: 20px 0 26px; }

    .trust-strip { grid-template-columns: 1fr; gap: 16px; margin-top: 44px; padding-top: 26px; }
    .trust-strip i { width: 36px; height: 36px; }

    .stats-band { padding: 34px 0; }
    .stats-grid { gap: 24px 0; }
    .stat strong { font-size: 30px; }
    .stat { padding: 0 16px; }

    .application-grid { grid-template-columns: 1fr; }
    .application-card { height: 250px; }
    .application-copy em { opacity: 1; transform: none; }

    .why-item { grid-template-columns: 30px 44px 1fr; gap: 12px; padding: 20px 8px 20px 0; }
    .why-icon { width: 42px; height: 42px; font-size: 14px; }
    .why-item h3 { font-size: 16px; }
    .why-copy h2 { font-size: 31px; }

    .filter-pills { gap: 6px; margin-bottom: 26px; }
    .filter-pills a { padding: 8px 13px; font-size: 10px; }

    .product-grid { grid-template-columns: 1fr; }
    .project-grid { grid-template-columns: 1fr; }
    .post-grid { grid-template-columns: 1fr; }
    .blog-main .post-grid { grid-template-columns: 1fr; }
    .video-grid { grid-template-columns: 1fr; }
    .process-grid { grid-template-columns: 1fr; gap: 12px; }
    .process-step { padding: 24px 20px; }
    .process-icon { margin-bottom: 14px; }

    .video-hero-card { min-height: 320px; }
    .video-hero-caption { left: 20px; right: 20px; bottom: 20px; }
    .video-hero-caption strong { font-size: 19px; }
    .video-play-lg { width: 64px; height: 64px; font-size: 16px; }
    .video-play { width: 54px; height: 54px; font-size: 13px; }

    .testimonial-inner blockquote { font-size: 20px; line-height: 1.6; }
    .quote-mark { width: 48px; height: 48px; font-size: 17px; }
    .testimonial-stars { margin-left: 0; }

    .blog-featured-media { min-height: 230px; }
    .blog-featured-body { padding: 24px 22px 26px; }
    .blog-featured-body h2 { font-size: 23px; }

    .cta-band { padding: 72px 0; }
    .cta-inner h2 { font-size: 30px; }
    .cta-inner p { font-size: 13.5px; }
    .cta-actions { flex-direction: column; align-items: stretch; }
    .cta-actions .btn { width: 100%; }

    .footer-grid { grid-template-columns: 1fr; gap: 34px; }
    .footer-contact { grid-template-columns: 1fr; }
    .footer-brand p { max-width: 100%; }
    .footer-bottom-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
    .newsletter-form { flex-direction: column; }
    .newsletter-form .btn { width: 100%; }

    .contact-cards { grid-template-columns: 1fr; }
    .contact-form-card { padding: 24px 18px; }
    .form-grid { grid-template-columns: 1fr; }
    .map-card { height: 300px; }

    .detail-main-image { max-height: 420px; }
    .detail-thumbs { grid-template-columns: repeat(4, 1fr); }
    .detail-specs { grid-template-columns: 1fr 1fr; }
    .detail-actions .btn { flex: 1; }
    .detail-assurance { grid-template-columns: 1fr; gap: 10px; }

    .project-gallery-thumbs { grid-template-columns: repeat(4, 1fr); }
    .project-detail-head h1 { font-size: 27px; }
    .project-specs { grid-template-columns: 1fr 1fr; }

    .value-grid { grid-template-columns: 1fr; }
    .team-grid { grid-template-columns: 1fr; }
    .cert-grid { grid-template-columns: 1fr 1fr; }
    .factory-stats { grid-template-columns: 1fr 1fr; }
    .factory-gallery { gap: 10px; }
    .about-media img { height: 380px; }
    .about-media .about-media-small { width: 48%; bottom: -24px; }
    .about-media .about-media-small img { height: 150px; }
    .split-cta { padding: 28px 22px; }
    .split-cta h2 { font-size: 24px; }

    .article-head h1 { font-size: 27px; }
    .article-cover { margin-bottom: 24px; aspect-ratio: 4 / 3; }
    .prose { font-size: 14.5px; }
    .prose h2 { font-size: 23px; }
    .prose h3 { font-size: 19px; }
    .comment-form { padding: 18px; }
    .comment-form .form-row { grid-template-columns: 1fr; gap: 0; }
    .article-nav { grid-template-columns: 1fr; }

    .article-share { flex-wrap: wrap; }

    .video-lightbox { padding: 12px; }
    .video-lightbox-close { right: 0; top: -44px; }

    .chat-launcher { right: 18px; bottom: 18px; width: 56px; height: 56px; font-size: 19px; }
    .whatsapp-float { left: 18px; bottom: 18px; width: 50px; height: 50px; font-size: 22px; }
    .back-to-top { display: none; }

    .chat-panel {
        right: 0; bottom: 0; width: 100%; height: 100dvh; max-height: none;
        border-radius: 0; z-index: 2000;
    }
    .chat-head { padding: 14px 18px; padding-top: max(14px, env(safe-area-inset-top)); }
    .chat-composer { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
    .chat-emoji { right: 10px; bottom: 120px; width: min(300px, calc(100vw - 20px)); }
    .chat-start { padding: 30px 24px; }

    .modal { padding: 0; align-items: flex-end; }
    .modal-dialog {
        max-width: 100%; max-height: 94vh; border-radius: 18px 18px 0 0;
        padding: 28px 20px max(24px, env(safe-area-inset-bottom));
        transform: translateY(40px);
    }
    .modal-head h2 { font-size: 24px; }
    .quote-form .form-row { grid-template-columns: 1fr; gap: 0; }

    .toast-stack { top: 76px; right: 12px; width: calc(100vw - 24px); }
    .cookie-inner { width: calc(100% - 28px); }
    .cookie-inner p { font-size: 10.5px; }
    .page-link { min-width: 36px; height: 36px; }
}

@media (max-width: 480px) {
    .container { width: calc(100% - 32px); }

    .hero-caption h1 { font-size: 30px; }
    .hero-caption p { font-size: 13px; }
    .hero-controls-wrap { bottom: 16px; }

    .media-main img { height: 330px; }
    .media-small { width: 50%; }
    .media-small img { height: 140px; }
    .experience-badge { display: none; }

    .stat strong { font-size: 27px; }
    .stat > span { font-size: 8.5px; }
    .stat { padding: 0 12px; }

    .application-card { height: 230px; }
    .product-body { padding: 16px 15px 18px; }
    .post-body { padding: 18px 16px 20px; }
    .project-body { padding: 17px 16px 19px; }

    .footer-top { padding: 50px 0 42px; }
    .footer-col h3 { margin-bottom: 16px; }

    .contact-form-card h3 { font-size: 19px; }
    .map-card { height: 260px; }

    .detail-thumbs { grid-template-columns: repeat(4, 1fr); gap: 7px; }
    .detail-actions { flex-direction: column; }
    .detail-actions .btn { width: 100%; }
    .project-gallery-thumbs { grid-template-columns: repeat(4, 1fr); }
    .project-specs { grid-template-columns: 1fr; }

    .about-media img { height: 330px; }
    .about-media .about-media-small { display: none; }
    .factory-stats { grid-template-columns: 1fr 1fr; }
    .cert-grid { gap: 10px; }
    .cert-card { padding: 9px; }
    .cert-card p { font-size: 10.5px; margin: 8px 2px 2px; }

    .article-meta { gap: 10px; font-size: 9.5px; }
    .article-meta span:nth-child(3) { display: none; }
    .blog-featured-body { padding: 20px 16px 22px; }

    .error-page { padding: 140px 0 80px; }
    .error-actions { flex-direction: column; align-items: stretch; }
}

@media (max-width: 380px) {
    .container { width: calc(100% - 26px); }
    .brand img { height: 32px; }
    .hero-caption h1 { font-size: 27px; }
    .hero-caption p { font-size: 12.5px; }
    .hero { min-height: 570px; }
    .btn { font-size: 10.5px; padding: 11px 16px; }
    .stat strong { font-size: 24px; }
    .section { padding: 54px 0; }
}