/* ==============================
   TABLET — max 992px
============================== */
@media (max-width: 992px) {
    .about-container { flex-direction: column; gap: 3em; }
    .about-image { max-width: 440px; width: 100%; margin: 0 auto; }
    .benefits-container { grid-template-columns: repeat(2, 1fr); }
    .steps-grid { grid-template-columns: repeat(2, 1fr); }
    .reasons-container { grid-template-columns: repeat(2, 1fr); }
    .work-grid { grid-template-columns: repeat(2, 1fr); }
    .contact-wrapper { grid-template-columns: 1fr; }
    .footer-container { grid-template-columns: 1fr 1fr; gap: 2em; }
    .footer-logo-block { grid-column: 1 / -1; }
}

/* ==============================
   MOBILE — max 768px
============================== */
@media (max-width: 768px) {
    .top-div { display: none; }

    /* Nav */
    .main-nav { padding: 0.9em 1.2em; }
    .main-logo { flex-direction: row; align-items: baseline; gap: 0.45em; }
    .logo-span-1 { font-size: 1.45em; }
    .logo-span-2 { font-size: 0.58em; letter-spacing: 0.3em; margin-top: 0; }

    .hamburger { display: block; cursor: pointer; z-index: 10; }
    .hamburger.active .bar:nth-child(2) { opacity: 0; }
    .hamburger.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    .nav-list {
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(10, 20, 29, 0.97);
        backdrop-filter: blur(12px);
        z-index: 9;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        padding: 0.6em 0 1.2em;
        border-bottom: 1px solid rgba(212, 169, 98, 0.25);
    }
    .nav-list.active { opacity: 1; pointer-events: auto; }
    .nav-list li { text-align: center; padding: 0.55em 0; list-style: none; }
    .nav-list li a { font-size: 1.15em; }
    .main-nav-btn { display: none; }

    /* Hero */
    .hero { min-height: 86vh; }
    .hero-content { gap: 1.4em; }
    .hero-btns { gap: 0.9em; }
    .scroll-cue { display: none; }

    /* Grids collapse */
    .benefits-container { grid-template-columns: 1fr; max-width: 380px; }
    .steps-grid { grid-template-columns: 1fr; max-width: 380px; }
    .reasons-container { grid-template-columns: 1fr; max-width: 380px; }
    .work-grid { grid-template-columns: 1fr; max-width: 400px; }
    .service-card { width: 100%; max-width: 360px; }

    /* Pricing */
    .webdev-pricing-card { min-width: 88vw; max-width: 92vw; transform: none !important; }
    .pricing-grid { flex-direction: column; align-items: center; }

    /* Sections */
    .section-cream, .section-navy, .section-ink, .section-paper { padding: 4em 1.4em; }
    .owner-message-container { padding: 2.2em 1.6em 2em; }
    .owner-quote-mark { font-size: 4.5em; }

    /* Contact */
    .form-row { grid-template-columns: 1fr; }
    .contact-form-card { padding: 1.9em 1.5em; }
    .trust-badges { gap: 1.8em; }

    /* Footer */
    .footer-container { grid-template-columns: 1fr; gap: 2.2em; }
    .footer-logo-block { grid-column: auto; }
}

/* ==============================
   SMALL PHONES — max 480px
============================== */
@media (max-width: 480px) {
    .hero-btns { flex-direction: column; align-items: stretch; width: 100%; max-width: 280px; }
    .hero-btns .btn { width: 100%; }
    .thanks-btns { flex-direction: column; align-items: stretch; }
    .cta-band { padding: 4.5em 1.4em; }
}