/* ==========================================================================
   RESPONSIVE.CSS — breakpoints for Shine View Technical Services
   Breakpoints tested: 320 / 375 / 425 / 768 / 1024 / 1280 / 1440 / 1920
   ========================================================================== */

/* Large desktop refinement ------------------------------------------------ */
@media (min-width: 1441px) {
    .container { max-width: 1280px; }
}

/* Laptop / small desktop --------------------------------------------------- */
@media (max-width: 1280px) {
    .services-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .feature-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Tablet landscape ---------------------------------------------------------- */
@media (max-width: 1024px) {
    :root { --nav-height: 76px; --nav-height-scrolled: 64px; }

    .hero-grid { grid-template-columns: 1fr; }
    .hero-media { order: -1; }
    .hero-sub { max-width: none; }

    .two-col { grid-template-columns: 1fr; gap: 36px; }
    .two-col.reverse .about-media { order: -1; }

    .trust-grid { grid-template-columns: repeat(2, 1fr); }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .steps-grid { grid-template-columns: repeat(2, 1fr); }
    .process-grid { grid-template-columns: repeat(2, 1fr); }
    .related-grid { grid-template-columns: repeat(2, 1fr); }
    .offer-grid { grid-template-columns: 1fr; }

    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }

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

    .cta-band { flex-direction: column; text-align: center; }

    .before-after { grid-template-columns: 1fr; }

    .section { padding: 64px 0; }
}

/* Tablet portrait / large phones -------------------------------------------- */
@media (max-width: 900px) {
    .nav-links,
    .nav-cta .btn-call,
    .nav-cta .btn-primary { display: none; }
    .nav-toggle { display: inline-flex; }

    .navbar-inner { height: var(--nav-height-scrolled); }
    .brand img { height: 42px; }
}

/* Standard mobile (768px and down) ------------------------------------------- */
@media (max-width: 768px) {
    h1 { font-size: clamp(1.8rem, 7vw, 2.4rem); }
    h2 { font-size: clamp(1.5rem, 6vw, 1.9rem); }

    .section { padding: 52px 0; }
    .section-head { margin-bottom: 36px; }

    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .trust-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
    .trust-item { padding: 16px; flex-direction: column; text-align: center; }

    .services-grid { grid-template-columns: 1fr; }
    .feature-grid { grid-template-columns: 1fr; }
    .steps-grid { grid-template-columns: 1fr 1fr; }
    .process-grid { grid-template-columns: 1fr 1fr; }
    .related-grid { grid-template-columns: 1fr; }

    .form-row { grid-template-columns: 1fr; }

    .footer-grid { grid-template-columns: 1fr; gap: 30px; padding-bottom: 34px; }
    .footer-links-services { column-count: 1; }
    .footer-bottom { flex-direction: column; text-align: center; }

    .btn-group { width: 100%; }
    .btn-group .btn { flex: 1; }

    .hero-badge { position: static; margin-top: 18px; max-width: none; }

    .cta-band { padding: 40px 26px; }

    .float-buttons { right: 14px; bottom: 14px; }
    .whatsapp-float { width: 54px; height: 54px; }
    .whatsapp-float .tooltip { display: none; }

    .modal-box { padding: 26px; }
}

/* Small phones (425px and down) -------------------------------------------------- */
@media (max-width: 425px) {
    .container { padding: 0 18px; }
    .hero { padding: 48px 0 64px; }
    .steps-grid { grid-template-columns: 1fr; }
    .process-grid { grid-template-columns: 1fr; }
    .btn { padding: 14px 20px; font-size: 0.9rem; }
    .contact-info-card, .contact-form-card { padding: 24px; }
    .service-card-body { padding: 30px 18px 20px; }
}

/* Extra small (375px / 320px) ------------------------------------------------------ */
@media (max-width: 375px) {
    .brand-text { font-size: 0.92rem; }
    .hero-eyebrow { font-size: 0.75rem; padding: 6px 12px; }
    .error-code { font-size: 4rem; }
}