/* =========================================================
   RESPONSIVE — Vishwakarma Decor (single page)
========================================================= */

@media (max-width: 1280px) {
    .contact-grid { gap: 56px; }
}

@media (max-width: 1100px) {
    .form-panel { padding: 44px 36px; }
    .nav-links { gap: 28px; }
}

@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-2 { gap: 40px; }
    .section { padding: var(--section-space-tablet) 0; }
    .legal-section { padding: var(--section-space-tablet) 0; }
    .contact-section { padding: calc(var(--section-space-tablet) * 1.3) 0; }
    .contact-grid { grid-template-columns: 1fr; gap: 48px; }
    .contact-info { position: static; }
    .split-content { padding: 60px 5%; }
    .footer { padding: 80px 0 32px; }
}

@media (max-width: 860px) {
    .nav-links, .nav-cta { display: none; }
    .hamburger { display: flex; }
    .grid-2 { grid-template-columns: 1fr; }
    .hero-actions { flex-wrap: wrap; }
    .img-frame::after { inset: 12px -8px -12px 8px; }

    /* Process — vertical timeline */
    .process-container { grid-template-columns: 1fr; padding-left: 32px; gap: 48px; }
    .process-step { position: relative; }
    .step-dot { position: absolute; left: -32px; top: 4px; margin: 0; width: 20px; height: 20px; }
    .process-container::before { content: ''; position: absolute; left: 9px; top: 44px; width: 1px; height: calc(100% - 44px); background: var(--border-soft); z-index: 1; }
    .process-line-fill-vertical { position: absolute; left: 9px; top: 44px; width: 1px; height: 0; background: var(--gold-grad); transition: height 1.5s var(--ease); z-index: 2; }
    .process-container.active .process-line-fill-vertical { height: calc(100% - 44px); }

    /* Editorial splits stack */
    .split-layout { flex-direction: column; min-height: 0; }
    .split-img, .split-content { flex: 1 1 100%; width: 100%; }
    .split-img { min-height: 320px; }
    .vertical-text { display: none; }
    .bg-number { font-size: 11rem; }
    /* on stacked layouts the curtain always wipes left-to-right */
    .split-img.reveal-right { clip-path: inset(0 100% 0 0); }
    .split-img.reveal-right.active { clip-path: inset(0 0 0 0); }
    /* keep image above text in the residential block (image is 2nd in DOM) */
    #services .split-layout:first-child .split-img { order: -1; }

    .footer-bottom { flex-direction: column; gap: 16px; text-align: center; align-items: center; }
    .footer-legal { justify-content: center; gap: 20px; }
    .hero-scroll { display: none; }
}

@media (max-width: 768px) {
    .hero { min-height: 600px; }
    .gallery-grid { grid-template-columns: 1fr; }
    .whatsapp-float { bottom: 24px; right: 24px; width: 56px; height: 56px; }
    .section { padding: var(--section-space-mobile) 0; }
    .legal-section { padding: var(--section-space-mobile) 0; }
    .grid-2, .grid-3, .grid-4 { gap: var(--section-gap-small); }
    .head-row { margin-bottom: 36px; }
    .page-hero { padding: 80px 0 56px; }
    .desc-large { font-size: 1.02rem; }
    .grid-4 { grid-template-columns: 1fr; }
    .info-item:hover { transform: none; }
    .reveal-left, .reveal-right { transform: translateY(24px); }
    .reveal-left.active, .reveal-right.active { transform: translateY(0); }
}

@media (max-width: 560px) {
    .grid-3 { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; gap: 0; }
    .form-panel { padding: 36px 22px; border-radius: 22px; }
    .info-item { padding: 18px; gap: 16px; }
    .wa-card { padding: 26px 22px; }
    .split-content { padding: 48px 24px; }
    .bg-number { font-size: 8rem; }
}

@media (max-width: 430px) {
    .hero-actions { flex-direction: column; }
    .btn-primary, .btn-secondary { width: 100%; text-align: center; }
    .container { padding: 0 16px; }
    .eyebrow::before, .eyebrow-line::before, .text-center .eyebrow::after { width: 20px; }
    .mobile-menu { padding: 100px 28px 32px; }
}

/* Touch devices: no hover-only affordances */
@media (hover: none) {
    .project-overlay { opacity: 1; background: linear-gradient(to top, rgba(92,69,38,.85), transparent 55%); }
    .project-overlay span, .project-overlay h3 { transform: none; }
    .gallery-overlay { opacity: 0; }
}