/* ═══════════════════════════════════════════════════
   SILK MILE — GLOBAL RESPONSIVE STYLES
   Covers all breakpoints for every page
═══════════════════════════════════════════════════ */

/* ── Tablet Large: 1024px – 1399px ─────────────── */
@media (max-width: 1399px) {
    .page-hero-content    { padding: 48px 40px !important; }
    .service-nav          { position: static !important; }
}

/* ── Tablet: 768px – 1023px ────────────────────── */
@media (max-width: 1023px) {

    /* Header */
    #header-nav           { display: none !important; }
    header > div          { height: 70px !important; padding: 0 20px !important; }

    /* Sidebar */
    #sidebar              { width: 85% !important; max-width: 320px; }

    /* Hero */
    .page-hero            { min-height: 45vh !important; min-height: 360px !important; }
    .page-hero-content    { padding: 40px 32px !important; }
    .page-hero-content h1 { font-size: clamp(2rem,5vw,3.5rem) !important; }

    /* Two-column layouts → single column */
    .two-col              { grid-template-columns: 1fr !important; gap: 40px !important; }
    .ind-grid             { grid-template-columns: 1fr !important; gap: 32px !important; }

    /* Service / industry sidebar nav */
    .service-nav          { position: static !important; }

    /* Sections padding */
    section               { padding-left: 28px !important; padding-right: 28px !important; }

    /* Stats strip */
    .stats-strip          { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }

    /* Contact form grid */
    .contact-grid         { grid-template-columns: 1fr !important; gap: 40px !important; }

    /* Footer */
    .footer-inner         { grid-template-columns: 1fr !important; gap: 40px !important; }
    .footer-cols          { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
    .footer-newsletter    { grid-template-columns: 1fr !important; gap: 20px !important; }

    /* Marquee */
    .marquee-l .track,
    .marquee-r .track     { font-size: 0.88rem !important; }
}

/* ── Mobile Large: 640px – 767px ───────────────── */
@media (max-width: 767px) {

    /* Header */
    header > div          { height: 64px !important; padding: 0 16px !important; }
    header .btn-teal      { display: none !important; }

    /* Page hero */
    .page-hero            { min-height: 42vh !important; min-height: 340px !important; }
    .page-hero-content    { padding: 32px 20px !important; }
    .page-hero-content h1 { font-size: clamp(1.8rem,5vw,3rem) !important; }
    .page-hero-content p  { font-size: .92rem !important; }
    .breadcrumb           { font-size: .62rem !important; }

    /* Sections */
    section               { padding-left: 20px !important; padding-right: 20px !important; }

    /* Two-column → single column */
    .two-col              { grid-template-columns: 1fr !important; gap: 32px !important; }
    .three-col            { grid-template-columns: 1fr !important; gap: 16px !important; }
    .four-col             { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }

    /* Stats strip */
    .stats-strip          { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }

    /* Card grids */
    .card-grid            { grid-template-columns: 1fr !important; gap: 14px !important; }

    /* Service nav sidebar stacks above content */
    .service-nav          { position: static !important; }
    .ind-grid             { grid-template-columns: 1fr !important; gap: 24px !important; }

    /* Contact section */
    .contact-grid         { grid-template-columns: 1fr !important; gap: 32px !important; }
    .contact-form-grid    { grid-template-columns: 1fr !important; gap: 12px !important; }

    /* Buttons */
    .btn-teal,
    .btn-outline          { font-size: .70rem !important; padding: 11px 16px !important; }

    /* Form fields */
    .form-field           { padding: 12px 14px !important; font-size: .88rem !important; }

    /* Sub labels */
    .sub-label            { font-size: .66rem !important; }

    /* Industry/service tags */
    .industry-tag         { padding: 5px 12px !important; font-size: .67rem !important; }

    /* Serv cards */
    .serv-card            { padding: 20px !important; }
    .serv-icon            { width: 48px !important; height: 48px !important; }

    /* Footer */
    .footer-inner         { grid-template-columns: 1fr !important; gap: 32px !important; padding: 32px 20px !important; }
    .footer-cols          { grid-template-columns: 1fr !important; gap: 28px !important; text-align: center; }
    .footer-newsletter    { grid-template-columns: 1fr !important; }
    .footer-newsletter > div:last-child { flex-direction: column !important; }
    footer > div:last-child { flex-direction: column !important; gap: 12px !important; text-align: center; }

    /* WhatsApp button */
    #whatsapp-float       { width: 50px !important; height: 50px !important; right: 16px !important; bottom: 80px !important; }

    /* Marquee */
    .marquee-l .track,
    .marquee-r .track     { font-size: .82rem !important; }

    /* Step cards big number */
    .step-card::before    { display: none !important; }

    /* Loyalty / stats section */
    .loyalty-bg > div     { grid-template-columns: 1fr !important; gap: 32px !important; }
}

/* ── Mobile Medium: 480px – 639px ──────────────── */
@media (max-width: 639px) {

    header > div          { height: 60px !important; padding: 0 12px !important; }
    #sidebar              { width: 90% !important; }

    .page-hero            { min-height: 38vh !important; min-height: 300px !important; }
    .page-hero-content    { padding: 28px 16px !important; }

    section               { padding-left: 16px !important; padding-right: 16px !important; }

    h2                    { font-size: clamp(1.5rem, 5vw, 2.2rem) !important; }
    h3                    { font-size: clamp(1rem, 3.5vw, 1.2rem) !important; }

    .four-col             { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
    .stats-strip          { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
    .card-grid            { grid-template-columns: 1fr !important; }

    .btn-teal,
    .btn-outline          { font-size: .68rem !important; padding: 10px 14px !important; }

    .form-field           { padding: 11px 12px !important; font-size: .85rem !important; }

    .sub-label            { font-size: .62rem !important; }
    .industry-tag         { padding: 4px 10px !important; font-size: .64rem !important; }

    .serv-icon            { width: 44px !important; height: 44px !important; }

    /* Hero tabs stacking */
    #tab-track > div,
    #tab-quote > div,
    #tab-contact > div    { flex-direction: column !important; gap: 10px !important; }

    #tab-track .btn-teal  { width: 100% !important; justify-content: center; }

    .marquee-l .track,
    .marquee-r .track     { font-size: .75rem !important; }

    #whatsapp-float       { width: 46px !important; height: 46px !important; right: 12px !important; bottom: 72px !important; }
}

/* ── Mobile Small: 360px – 479px ───────────────── */
@media (max-width: 479px) {

    header > div          { height: 56px !important; padding: 0 10px !important; }
    #sidebar              { width: 95% !important; }

    .page-hero            { min-height: 35vh !important; min-height: 280px !important; padding-top: 65px !important; }
    .page-hero-content    { padding: 24px 14px !important; }
    .page-hero-content h1 { font-size: clamp(1.6rem, 5vw, 2.5rem) !important; }

    section               { padding-left: 14px !important; padding-right: 14px !important; }

    h2                    { font-size: clamp(1.4rem, 5vw, 2rem) !important; }

    .four-col             { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    .stats-strip          { grid-template-columns: 1fr 1fr !important; }

    .btn-teal,
    .btn-outline          { font-size: .65rem !important; padding: 9px 12px !important; }

    .form-field           { padding: 10px 11px !important; font-size: .82rem !important; }

    .sub-label            { font-size: .60rem !important; gap: 8px !important; }
    .sub-label::before    { width: 20px !important; }

    .serv-card            { padding: 16px !important; }
    .serv-icon            { width: 42px !important; height: 42px !important; margin-bottom: 10px !important; }

    .sidebar-dropdown-btn  { padding: 10px 12px !important; font-size: .67rem !important; }
    .sidebar-dropdown-item { padding: 8px 12px 8px 26px !important; font-size: .65rem !important; }
    .sidebar-link          { padding: 10px 12px !important; font-size: .68rem !important; }

    .marquee-l .track,
    .marquee-r .track     { font-size: .70rem !important; }

    #whatsapp-float       { width: 42px !important; height: 42px !important; right: 10px !important; bottom: 68px !important; }
}

/* ── Extra Small: below 360px ──────────────────── */
@media (max-width: 359px) {

    header > div          { height: 54px !important; }
    #sidebar              { width: 98% !important; }

    .page-hero            { min-height: 30vh !important; min-height: 250px !important; }
    .page-hero-content h1 { font-size: 1.5rem !important; }

    section               { padding-left: 12px !important; padding-right: 12px !important; }

    .btn-teal,
    .btn-outline          { font-size: .62rem !important; padding: 8px 10px !important; }

    .sub-label            { font-size: .56rem !important; }

    .marquee-l .track,
    .marquee-r .track     { font-size: .65rem !important; }
}

/* ═══════════════════════════════════════════════════
   UTILITY GRID CLASSES (use these in your HTML)
   instead of inline grid-template-columns
═══════════════════════════════════════════════════ */

/* Two equal columns */
.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

/* Three equal columns */
.three-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Four equal columns */
.four-col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* Auto-fit card grid (min 260px per card) */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

/* Sidebar + content layout */
.sidebar-content {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 60px;
    align-items: start;
}

/* Industry grid (same as sidebar-content) */
.ind-grid {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 60px;
    align-items: start;
}

/* Contact section grid */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

/* Contact form inner name/company row */
.contact-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

/* Stats strip */
.stats-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    text-align: center;
}

@media (max-width: 1023px) {
    .sidebar-content      { grid-template-columns: 1fr !important; }
    .two-col              { grid-template-columns: 1fr !important; gap: 40px !important; }
    .three-col            { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
    .contact-grid         { grid-template-columns: 1fr !important; gap: 40px !important; }
    .contact-form-grid    { grid-template-columns: 1fr !important; }
    .stats-strip          { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
}

@media (max-width: 767px) {
    .three-col            { grid-template-columns: 1fr !important; }
    .four-col             { grid-template-columns: 1fr 1fr !important; }
    .stats-strip          { grid-template-columns: 1fr 1fr !important; }
    .ind-grid             { grid-template-columns: 1fr !important; gap: 24px !important; }
}

@media (max-width: 479px) {
    .four-col             { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    .three-col            { grid-template-columns: 1fr !important; }
    .stats-strip          { grid-template-columns: 1fr 1fr !important; }
}