@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@600;700;800&display=swap');

/* ==========================================================================
   1. ENTERPRISE LOGISTICS THEME VARIABLES
   ========================================================================== */
:root {
  --cm-primary: #FFB703;       /* High-Vis Logistics Gold */
  --cm-primary-hover: #FFA200;
  --cm-accent: #FB8500;        /* Express Orange */
  --cm-dark: #0F172A;          /* Enterprise Slate Navy */
  --cm-dark-card: #1E293B;     /* Deep Slate Card */
  --cm-surface: #F8FAFC;       /* Clean Light Background */
  --cm-white: #FFFFFF;
  --cm-border: #E2E8F0;
  --cm-text-main: #1E293B;
  --cm-text-muted: #64748B;
  --cm-success: #10B981;
  --cm-danger: #EF4444;
  --cm-radius-sm: 6px;
  --cm-radius-md: 12px;
  --cm-radius-lg: 20px;
  --cm-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --cm-shadow-md: 0 10px 25px -5px rgba(15, 23, 42, 0.08);
  --cm-shadow-lg: 0 20px 40px -10px rgba(15, 23, 42, 0.16);
  --cm-container: 1280px;
  --cm-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  color: var(--cm-text-main);
  background-color: var(--cm-surface);
  line-height: 1.65;
  padding-bottom: 80px;
}

@media (min-width: 769px) {
  body { padding-bottom: 0; }
}

h1, h2, h3, h4, .cm-btn, .cm-form-submit, .cm-brand-title {
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -0.02em;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--cm-transition);
}

ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }

.cm-container {
  width: 100%;
  max-width: var(--cm-container);
  margin: 0 auto;
  padding: 0 24px;
}

section {
  padding: 70px 0;
}

/* ==========================================================================
   2. COMMON SECTION HEADINGS & BADGES
   ========================================================================== */
.cm-section-head {
  text-align: center;
  max-width: 860px;
  margin: 0 auto 45px;
}

.cm-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cm-dark);
  background: var(--cm-primary);
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.cm-section-head h2 {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--cm-dark);
  line-height: 1.2;
  margin-bottom: 14px;
}

.cm-section-head p {
  color: var(--cm-text-muted);
  font-size: 1.05rem;
}

/* ==========================================================================
   3. TOPBAR & NAVIGATION
   ========================================================================== */
.cm-topbar {
  background: var(--cm-dark);
  color: #94A3B8;
  font-size: 0.85rem;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.cm-topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cm-top-links a {
  margin-left: 20px;
  color: #F1F5F9;
  font-weight: 600;
}

.cm-top-links a:hover { color: var(--cm-primary); }

.cm-header {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid var(--cm-border);
}

.cm-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
}

.cm-nav-menu {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cm-nav-menu a {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--cm-dark);
  padding: 8px 14px;
  border-radius: var(--cm-radius-sm);
}

.cm-nav-menu a:hover {
  background: var(--cm-surface);
  color: var(--cm-accent);
}

.cm-btn-call-nav {
  background: var(--cm-dark) !important;
  color: var(--cm-primary) !important;
  font-weight: 700 !important;
}

.cm-btn-wa-nav {
  background: var(--cm-success) !important;
  color: var(--cm-white) !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   4. HERO SECTION & FAST LEAD CARD
   ========================================================================== */
.cm-hero {
  background: radial-gradient(circle at 80% 20%, #1E293B 0%, #0F172A 100%);
  color: var(--cm-white);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}

.cm-hero-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.85fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.cm-hero-content h1 {
  font-size: 3.1rem;
  line-height: 1.12;
  font-weight: 800;
  margin-bottom: 20px;
}

.cm-hero-content h1 span {
  color: var(--cm-primary);
}

.cm-hero-content p {
  font-size: 1.1rem;
  color: #CBD5E1;
  margin-bottom: 26px;
  line-height: 1.7;
}

.cm-rating-card {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  padding: 10px 18px;
  border-radius: var(--cm-radius-md);
  border: 1px solid rgba(255,255,255,0.12);
  margin-bottom: 28px;
}

.cm-rating-val {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--cm-primary);
}

.cm-rating-text strong { display: block; font-size: 0.95rem; }
.cm-rating-text span { font-size: 0.78rem; color: #94A3B8; }

.cm-hero-actions {
  display: flex;
  gap: 14px;
  margin-bottom: 28px;
}

.cm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  padding: 15px 28px;
  border-radius: var(--cm-radius-md);
  font-size: 1.02rem;
  cursor: pointer;
  border: none;
}

.cm-btn-primary {
  background: var(--cm-primary);
  color: var(--cm-dark);
  box-shadow: 0 4px 14px rgba(255, 183, 3, 0.35);
}
.cm-btn-primary:hover { background: var(--cm-primary-hover); transform: translateY(-2px); }

.cm-btn-wa {
  background: var(--cm-success);
  color: var(--cm-white);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
}
.cm-btn-wa:hover { background: #059669; transform: translateY(-2px); }

.cm-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #E2E8F0;
}

/* Quote Booking Card */
.cm-quote-card {
  background: var(--cm-white);
  color: var(--cm-text-main);
  padding: 32px;
  border-radius: var(--cm-radius-lg);
  box-shadow: var(--cm-shadow-lg);
  border: 1px solid var(--cm-border);
  position: relative;
}

.cm-quote-head {
  margin-bottom: 20px;
  border-bottom: 1px solid var(--cm-border);
  padding-bottom: 14px;
}

.cm-quote-head h2 {
  font-size: 1.45rem;
  color: var(--cm-dark);
  font-weight: 800;
}

.cm-quote-head p { font-size: 0.88rem; color: var(--cm-text-muted); }

.cm-form-group {
  margin-bottom: 14px;
}

.cm-form-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--cm-dark);
  margin-bottom: 5px;
}

.cm-form-group input,
.cm-form-group select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius-sm);
  font-size: 0.95rem;
  font-family: inherit;
  background: #F8FAFC;
  outline: none;
  transition: var(--cm-transition);
}

.cm-form-group input:focus,
.cm-form-group select:focus {
  border-color: var(--cm-accent);
  background: var(--cm-white);
  box-shadow: 0 0 0 3px rgba(251, 133, 0, 0.15);
}

.cm-form-submit {
  width: 100%;
  padding: 15px;
  background: var(--cm-accent);
  color: var(--cm-white);
  border: none;
  border-radius: var(--cm-radius-md);
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
  transition: var(--cm-transition);
  box-shadow: 0 4px 14px rgba(251, 133, 0, 0.35);
}

.cm-form-submit:hover { background: #EA580C; transform: translateY(-2px); }

/* ==========================================================================
   5. INTERACTIVE CALCULATOR & PRICING TABLES
   ========================================================================== */
.cm-calc-box {
  background: var(--cm-white);
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius-lg);
  padding: 36px;
  box-shadow: var(--cm-shadow-md);
  border-top: 6px solid var(--cm-primary);
}

.cm-calc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}

.cm-calc-result {
  background: var(--cm-dark);
  color: var(--cm-white);
  padding: 20px;
  border-radius: var(--cm-radius-md);
  text-align: center;
  font-size: 1.1rem;
  border: 2px solid var(--cm-primary);
  margin-bottom: 20px;
}

.cm-calc-result strong {
  color: var(--cm-primary);
  font-size: 1.35rem;
  display: inline-block;
  margin: 0 4px;
}

.cm-table-wrap {
  overflow-x: auto;
  border-radius: var(--cm-radius-md);
  border: 1px solid var(--cm-border);
  box-shadow: var(--cm-shadow-sm);
  background: var(--cm-white);
  margin-bottom: 35px;
}

.cm-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.cm-table th, .cm-table td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--cm-border);
  font-size: 0.95rem;
}

.cm-table th {
  background: var(--cm-dark);
  color: var(--cm-white);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1rem;
}

.cm-table tr:nth-child(even) { background: #F8FAFC; }
.cm-table tr:hover { background: #FFFBEB; }

/* ==========================================================================
   6. GRID CARDS & SERVICE BOXES
   ========================================================================== */
.cm-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.cm-grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.cm-card {
  background: var(--cm-white);
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius-md);
  padding: 26px;
  transition: var(--cm-transition);
  box-shadow: var(--cm-shadow-sm);
}

.cm-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--cm-shadow-md);
  border-color: var(--cm-accent);
}

.cm-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: #FFF7ED;
  color: var(--cm-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 16px;
}

.cm-card h3 {
  font-size: 1.25rem;
  color: var(--cm-dark);
  margin-bottom: 10px;
  font-weight: 700;
}

.cm-card p {
  color: var(--cm-text-muted);
  font-size: 0.95rem;
}

.cm-card ul {
  margin-top: 14px;
}

.cm-card ul li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  font-size: 0.9rem;
  color: var(--cm-text-main);
  font-weight: 500;
}

.cm-card ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--cm-success);
  font-weight: 800;
}

/* Route Link Cards */
.cm-route-link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.cm-route-link {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--cm-white);
  padding: 12px 16px;
  border-radius: var(--cm-radius-sm);
  border: 1px solid var(--cm-border);
  transition: var(--cm-transition);
}

.cm-route-link:hover {
  background: var(--cm-primary);
  border-color: var(--cm-dark);
  transform: translateY(-2px);
}

.cm-route-link strong {
  display: block;
  font-size: 0.95rem;
  color: var(--cm-dark);
}

.cm-route-link small {
  color: var(--cm-text-muted);
  font-size: 0.8rem;
}

/* ==========================================================================
   7. ACCORDION FAQ
   ========================================================================== */
.cm-faq-list {
  max-width: 900px;
  margin: 0 auto;
}

.cm-faq-item {
  background: var(--cm-white);
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius-md);
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: var(--cm-shadow-sm);
}

.cm-faq-item summary {
  padding: 18px 22px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--cm-dark);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cm-faq-item summary::-webkit-details-marker { display: none; }

.cm-faq-item summary::after {
  content: '+';
  font-size: 1.5rem;
  color: var(--cm-accent);
  font-weight: 700;
  transition: var(--cm-transition);
}

.cm-faq-item[open] summary::after {
  transform: rotate(45deg);
}

.cm-faq-answer {
  padding: 0 22px 20px;
  color: var(--cm-text-muted);
  font-size: 0.95rem;
  border-top: 1px solid var(--cm-border);
  padding-top: 12px;
  line-height: 1.7;
}

/* ==========================================================================
   8. FOOTER & MOBILE STICKY BAR
   ========================================================================== */
.cm-footer {
  background: var(--cm-dark);
  color: #94A3B8;
  padding: 70px 0 30px;
  border-top: 4px solid var(--cm-primary);
}

.cm-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 36px;
  margin-bottom: 40px;
}

.cm-footer h3 {
  color: var(--cm-white);
  font-size: 1.15rem;
  margin-bottom: 18px;
}

.cm-footer ul li { margin-bottom: 10px; }
.cm-footer ul li a { color: #94A3B8; font-size: 0.92rem; }
.cm-footer ul li a:hover { color: var(--cm-primary); padding-left: 4px; }

.cm-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 24px;
  text-align: center;
  font-size: 0.88rem;
}

.cm-mobile-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; width: 100%;
  background: var(--cm-white);
  border-top: 2px solid var(--cm-primary);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
  z-index: 9999;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 10px 0;
}

.cm-mobile-bar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--cm-dark);
}

@media (max-width: 992px) {
  .cm-hero-grid { grid-template-columns: 1fr; }
  .cm-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .cm-nav-menu { display: none; }
  .cm-hero-content h1 { font-size: 2.2rem; }
  .cm-section-head h2 { font-size: 1.8rem; }
  .cm-footer-grid { grid-template-columns: 1fr; }
  .cm-mobile-bar { display: grid; }
}














<!-- =====================================================
     3. GRANULAR PRICING MATRICES & TRANSPARENT TARIFFS
===================================================== -->
<section style="background: var(--cm-white);">
  <div class="cm-container">
    <div class="cm-section-head">
      <span class="cm-tag">💰 100% Upfront Pricing</span>
      <h2>Bangalore Packers and Movers Tariff & Cost Breakup Matrix</h2>
      <p>Transparent pricing schedules categorized by apartment configuration, intra-city corridors, vehicle carriers, and written scope of work.</p>
    </div>

    <!-- Table 1: Local Shifting Breakdown -->
    <h3 style="margin-bottom: 14px; font-size: 1.3rem; color: var(--cm-dark);">1. Local Bangalore House Shifting Rates (Full Breakdown)</h3>
    <div class="cm-table-wrap">
      <table class="cm-table">
        <thead>
          <tr>
            <th>Apartment Configuration</th>
            <th>Standard Inventory Scope</th>
            <th>Packing Material & Labor</th>
            <th>Transport Freight (Closed Truck)</th>
            <th>Total Local Cost Range</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><strong>1 BHK Flat</strong></td>
            <td>Single cot, 3-seater sofa, fridge, washing machine, 10–15 boxes</td>
            <td>₹2,500 – ₹3,500</td>
            <td>₹2,000 – ₹4,500</td>
            <td><strong>₹4,500 – ₹8,500</strong></td>
          </tr>
          <tr>
            <td><strong>2 BHK Flat</strong></td>
            <td>2 double beds, sofa set, dining table, fridge, TV, 20–30 boxes</td>
            <td>₹4,000 – ₹6,000</td>
            <td>₹3,500 – ₹8,000</td>
            <td><strong>₹7,500 – ₹14,000</strong></td>
          </tr>
          <tr>
            <td><strong>3 BHK Flat</strong></td>
            <td>3 bedroom sets, large appliances, kitchen crockery, 35–50 boxes</td>
            <td>₹6,500 – ₹9,000</td>
            <td>₹4,500 – ₹11,000</td>
            <td><strong>₹11,000 – ₹20,000</strong></td>
          </tr>
          <tr>
            <td><strong>4 BHK / Penthouse / Villa</strong></td>
            <td>Extensive luxury furniture, fragile artifacts, 50+ cartons</td>
            <td>₹9,000 – ₹14,000</td>
            <td>₹7,000 – ₹14,000</td>
            <td><strong>₹16,000 – ₹28,000+</strong></td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- Table 2: Micro-Corridor Pricing (Within Bangalore) -->
    <h3 style="margin-bottom: 14px; font-size: 1.3rem; color: var(--cm-dark);">2. Bangalore Micro-Corridor Shifting Rates (Distance-Based)</h3>
    <div class="cm-table-wrap">
      <table class="cm-table">
        <thead>
          <tr>
            <th>Intra-City Corridor</th>
            <th>Approx Distance</th>
            <th>1 BHK Shifting</th>
            <th>2 BHK Shifting</th>
            <th>3 BHK Shifting</th>
            <th>Estimated Transit Time</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><strong>Whitefield to HSR Layout</strong></td>
            <td>~22 KM</td>
            <td>₹4,800 – ₹7,500</td>
            <td>₹8,000 – ₹13,500</td>
            <td>₹12,500 – ₹18,000</td>
            <td>4 – 6 Hours</td>
          </tr>
          <tr>
            <td><strong>Electronic City to Hebbal</strong></td>
            <td>~32 KM (via Elevated Toll)</td>
            <td>₹5,500 – ₹8,500</td>
            <td>₹9,000 – ₹15,000</td>
            <td>₹14,000 – ₹21,000</td>
            <td>5 – 7 Hours</td>
          </tr>
          <tr>
            <td><strong>Marathahalli to Indiranagar</strong></td>
            <td>~11 KM</td>
            <td>₹4,500 – ₹6,500</td>
            <td>₹7,000 – ₹11,500</td>
            <td>₹10,500 – ₹16,000</td>
            <td>3 – 5 Hours</td>
          </tr>
          <tr>
            <td><strong>Jayanagar to Malleshwaram</strong></td>
            <td>~14 KM</td>
            <td>₹4,500 – ₹7,000</td>
            <td>₹7,500 – ₹12,000</td>
            <td>₹11,000 – ₹17,000</td>
            <td>4 – 5 Hours</td>
          </tr>
          <tr>
            <td><strong>Koramangala to Whitefield</strong></td>
            <td>~18 KM</td>
            <td>₹4,800 – ₹7,200</td>
            <td>₹8,000 – ₹13,000</td>
            <td>₹12,000 – ₹17,500</td>
            <td>4 – 6 Hours</td>
          </tr>
          <tr>
            <td><strong>BTM Layout to Marathahalli</strong></td>
            <td>~15 KM (via ORR)</td>
            <td>₹4,500 – ₹6,800</td>
            <td>₹7,500 – ₹12,500</td>
            <td>₹11,500 – ₹17,000</td>
            <td>3 – 5 Hours</td>
          </tr>
          <tr>
            <td><strong>Yelahanka to Electronic City</strong></td>
            <td>~38 KM (via Bellary Rd / Hosur Rd)</td>
            <td>₹6,000 – ₹9,500</td>
            <td>₹9,500 – ₹16,500</td>
            <td>₹15,000 – ₹23,000</td>
            <td>6 – 8 Hours</td>
          </tr>
          <tr>
            <td><strong>Banashankari to Whitefield</strong></td>
            <td>~28 KM</td>
            <td>₹5,200 – ₹8,200</td>
            <td>₹8,500 – ₹14,500</td>
            <td>₹13,500 – ₹20,000</td>
            <td>5 – 7 Hours</td>
          </tr>
          <tr>
            <td><strong>Banaswadi to HSR Layout</strong></td>
            <td>~16 KM</td>
            <td>₹4,500 – ₹7,000</td>
            <td>₹7,500 – ₹12,500</td>
            <td>₹11,500 – ₹17,500</td>
            <td>4 – 5 Hours</td>
          </tr>
          <tr>
            <td><strong>Ramamurthy Nagar to Jayanagar</strong></td>
            <td>~19 KM</td>
            <td>₹4,800 – ₹7,500</td>
            <td>₹8,000 – ₹13,000</td>
            <td>₹12,000 – ₹18,000</td>
            <td>4 – 6 Hours</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- Table 3: Vehicle Shipping Rates -->
    <h3 style="margin-bottom: 14px; font-size: 1.3rem; color: var(--cm-dark);">3. Vehicle Shifting Charges (Two-Wheeler & Car Transport)</h3>
    <div class="cm-table-wrap">
      <table class="cm-table">
        <thead>
          <tr>
            <th>Vehicle Category</th>
            <th>Packaging Standard</th>
            <th>Local Transit Rate</th>
            <th>Interstate Carrier Rate</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><strong>Standard Bike / Scooter</strong></td>
            <td>Bubble wrap, mirror removal, wheel lock</td>
            <td>₹2,500 – ₹3,500</td>
            <td>₹5,500 – ₹7,500</td>
          </tr>
          <tr>
            <td><strong>Royal Enfield / Cruiser Bike</strong></td>
            <td>3-Layer wrap with wooden crate casing</td>
            <td>₹3,500 – ₹4,500</td>
            <td>₹7,500 – ₹10,500</td>
          </tr>
          <tr>
            <td><strong>Hatchback / Sedan Car</strong></td>
            <td>Enclosed hydraulic carrier trailer</td>
            <td>₹5,000 – ₹7,000</td>
            <td>₹12,000 – ₹16,000</td>
          </tr>
          <tr>
            <td><strong>SUV / Luxury Car</strong></td>
            <td>Individual dedicated car bay</td>
            <td>₹6,500 – ₹8,500</td>
            <td>₹15,000 – ₹22,000</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- Table 4: Itemized Invoice Simulation (Cost Anatomy) -->
    <h3 style="margin-bottom: 14px; font-size: 1.3rem; color: var(--cm-dark);">4. Transparent Cost Anatomy (Sample 2 BHK Move Simulation)</h3>
    <div class="cm-table-wrap">
      <table class="cm-table">
        <thead>
          <tr>
            <th>Cost Head</th>
            <th>Description & Resource Allocation</th>
            <th>Amount (INR)</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><strong>Base Truck Freight</strong></td>
            <td>14-Foot Dedicated Closed Container (Within 20 KM Radius)</td>
            <td>₹3,800</td>
          </tr>
          <tr>
            <td><strong>Packaging Material</strong></td>
            <td>5-Ply Cartons (25), Bubble Wrap (3 Rolls), Stretch Film & Tapes</td>
            <td>₹2,400</td>
          </tr>
          <tr>
            <td><strong>Trained Moving Crew</strong></td>
            <td>3 Certified Handlers (Packing, Loading, Unloading & Placement)</td>
            <td>₹2,800</td>
          </tr>
          <tr>
            <td><strong>Dismantling & Assembly</strong></td>
            <td>Double Bed & Wardrobe dismantling and reassembly with power tools</td>
            <td>₹1,000</td>
          </tr>
          <tr>
            <td><strong>Elevator Surcharge</strong></td>
            <td>Service Elevator Available at Both Origin & Destination</td>
            <td>₹0 (Complimentary)</td>
          </tr>
          <tr style="background: #FFFBEB; font-weight: bold;">
            <td><strong>Total Estimated Invoice</strong></td>
            <td><strong>All-Inclusive Moving Price (Excluding 18% Optional GST)</strong></td>
            <td><strong style="color: var(--cm-accent); font-size: 1.15rem;">₹10,000</strong></td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- Table 5: Scope of Work (SOW): Included vs Excluded -->
    <h3 style="margin-bottom: 14px; font-size: 1.3rem; color: var(--cm-dark);">5. Scope of Work (SOW): Included vs. Excluded Transparency</h3>
    <div class="cm-table-wrap">
      <table class="cm-table">
        <thead>
          <tr>
            <th>Operational Component</th>
            <th>Century Standard Inclusion</th>
            <th>Excluded / Optional Custom Add-on</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><strong>Packing Materials</strong></td>
            <td><strong style="color: var(--cm-success);">✔️ 5-Ply Cartons, Bubble Wrap, Tapes & Stretch Film</strong></td>
            <td>Custom Wooden Crates for Sculptures (On Demand)</td>
          </tr>
          <tr>
            <td><strong>Furniture Dismantling</strong></td>
            <td><strong style="color: var(--cm-success);">✔️ Bed frames, dining tables, modular workstations</strong></td>
            <td>Civil masonry, wall drilling, or wall carpentry work</td>
          </tr>
          <tr>
            <td><strong>Appliance Handling</strong></td>
            <td><strong style="color: var(--cm-success);">✔️ Multi-layer wrapping, padding, securing</strong></td>
            <td>AC uninstallation, copper pipe casing & gas refill</td>
          </tr>
          <tr>
            <td><strong>Transit Vehicle</strong></td>
            <td><strong style="color: var(--cm-success);">✔️ Dedicated closed container truck, fuel & tolls</strong></td>
            <td>Interstate octroi/entry tax for commercial machines</td>
          </tr>
          <tr>
            <td><strong>Delivery & Placement</strong></td>
            <td><strong style="color: var(--cm-success);">✔️ Room-by-room unloading via service elevators</strong></td>
            <td>Rooftop/Balcony crane hoisting for oversized sofas</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</section>










/* ==========================================================================
   PART 3: GRID CARDS, SERVICES SPECTRUM & OPERATIONAL SOP LAYOUTS
   ========================================================================== */

/* Multi-Column Responsive Grids */
.cm-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 26px;
}

.cm-grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
}

/* Master Operational & Service Card */
.cm-card {
  background: var(--cm-white);
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius-md);
  padding: 28px 24px;
  transition: var(--cm-transition);
  box-shadow: var(--cm-shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
}

.cm-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--cm-shadow-md);
  border-color: var(--cm-accent);
}

/* Card Visual Icon Container */
.cm-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: #FFF7ED;
  color: var(--cm-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  font-weight: 800;
  margin-bottom: 18px;
  border: 1px solid rgba(251, 133, 0, 0.15);
}

.cm-card h3 {
  font-size: 1.25rem;
  color: var(--cm-dark);
  margin-bottom: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.cm-card p {
  color: var(--cm-text-muted);
  font-size: 0.94rem;
  line-height: 1.65;
}

/* Bullet Feature Lists inside Cards */
.cm-card ul {
  margin-top: 16px;
  border-top: 1px dashed var(--cm-border);
  padding-top: 14px;
}

.cm-card ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  font-size: 0.88rem;
  color: var(--cm-text-main);
  font-weight: 500;
  line-height: 1.5;
}

.cm-card ul li:last-child {
  margin-bottom: 0;
}

.cm-card ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--cm-success);
  font-weight: 800;
  font-size: 0.95rem;
}

/* Priority First-Night Survival Box Grid Widget */
.cm-calc-box .cm-grid-4 {
  margin-top: 16px;
  border-top: 1px solid var(--cm-border);
  padding-top: 16px;
}

.cm-calc-box .cm-grid-4 div {
  background: #F8FAFC;
  padding: 14px 16px;
  border-radius: var(--cm-radius-sm);
  border: 1px solid var(--cm-border);
  font-size: 0.88rem;
  color: var(--cm-text-main);
  line-height: 1.5;
}

.cm-calc-box .cm-grid-4 div strong {
  display: block;
  color: var(--cm-dark);
  margin-bottom: 4px;
}

/* Hourly Timeline Step Icon Special Format */
.cm-card-icon:is(:empty, [class*="08:"], [class*="09:"], [class*="12:"], [class*="02:"], [class*="04:"], [class*="06:"]) {
  width: auto;
  min-width: 90px;
  padding: 0 12px;
  font-size: 0.85rem;
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: 0.02em;
}














/* ==========================================================================
   PART 4: ROUTE DIRECTORY, FAQ ACCORDION, FOOTER & MOBILE STICKY BAR
   ========================================================================== */

/* ==========================================================================
   1. PAN-INDIA ROUTE DIRECTORY (SEARCH, TABS & MATRIX)
   ========================================================================== */
.cm-hub-section {
  background: #0F172A;
  color: #F8FAFC;
  padding: 80px 0;
  position: relative;
}

.cm-hub-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 36px;
}

.cm-hub-header h2 {
  font-size: 2.3rem;
  color: #FFFFFF;
  margin-bottom: 12px;
}

.cm-hub-header p {
  color: #94A3B8;
  font-size: 1rem;
}

.cm-hub-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-bottom: 36px;
}

.cm-hub-search-box {
  width: 100%;
  max-width: 520px;
  position: relative;
}

.cm-hub-search-box input {
  width: 100%;
  padding: 14px 20px 14px 46px;
  background: #1E293B;
  border: 1px solid #334155;
  border-radius: 999px;
  color: #FFFFFF;
  font-size: 0.95rem;
  outline: none;
  transition: var(--cm-transition);
}

.cm-hub-search-box input:focus {
  border-color: var(--cm-primary);
  box-shadow: 0 0 0 3px rgba(255, 183, 3, 0.2);
}

.cm-hub-search-box .cm-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  fill: #64748B;
  width: 18px;
  height: 18px;
}

.cm-zone-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.cm-zone-btn {
  background: #1E293B;
  color: #94A3B8;
  border: 1px solid #334155;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--cm-transition);
}

.cm-zone-btn:hover,
.cm-zone-btn.active {
  background: var(--cm-primary);
  color: #0F172A;
  border-color: var(--cm-primary);
}

.cm-route-matrix {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.cm-route-card-v2 {
  background: #1E293B;
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  transition: var(--cm-transition);
  position: relative;
  overflow: hidden;
}

.cm-route-card-v2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--cm-primary);
  opacity: 0;
  transition: var(--cm-transition);
}

.cm-route-card-v2:hover {
  transform: translateY(-3px);
  border-color: #475569;
  background: #243248;
  box-shadow: 0 12px 25px -8px rgba(0, 0, 0, 0.5);
}

.cm-route-card-v2:hover::before {
  opacity: 1;
}

.cm-route-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.cm-dest-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cm-dest-title span {
  color: var(--cm-primary);
  font-size: 0.85rem;
}

.cm-badge-time {
  background: rgba(255, 183, 3, 0.12);
  color: var(--cm-primary);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.cm-route-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: #94A3B8;
  border-top: 1px dashed #334155;
  padding-top: 10px;
}

.cm-route-hw {
  color: #CBD5E1;
  font-weight: 600;
}

.cm-route-arrow {
  color: var(--cm-primary);
  font-weight: 800;
  font-size: 1.1rem;
}

/* ==========================================================================
   2. ACCORDION FAQ
   ========================================================================== */
.cm-faq-list {
  max-width: 900px;
  margin: 0 auto;
}

.cm-faq-item {
  background: var(--cm-white);
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius-md);
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: var(--cm-shadow-sm);
}

.cm-faq-item summary {
  padding: 18px 22px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--cm-dark);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cm-faq-item summary::-webkit-details-marker { display: none; }

.cm-faq-item summary::after {
  content: '+';
  font-size: 1.5rem;
  color: var(--cm-accent);
  font-weight: 700;
  transition: var(--cm-transition);
}

.cm-faq-item[open] summary::after {
  transform: rotate(45deg);
}

.cm-faq-answer {
  padding: 0 22px 20px;
  color: var(--cm-text-muted);
  font-size: 0.95rem;
  border-top: 1px solid var(--cm-border);
  padding-top: 12px;
  line-height: 1.7;
}

/* ==========================================================================
   3. FOOTER & MOBILE STICKY BAR
   ========================================================================== */
.cm-footer {
  background: var(--cm-dark);
  color: #94A3B8;
  padding: 70px 0 30px;
  border-top: 4px solid var(--cm-primary);
}

.cm-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 36px;
  margin-bottom: 40px;
}

.cm-footer h3 {
  color: var(--cm-white);
  font-size: 1.15rem;
  margin-bottom: 18px;
}

.cm-footer ul li { margin-bottom: 10px; }
.cm-footer ul li a { color: #94A3B8; font-size: 0.92rem; }
.cm-footer ul li a:hover { color: var(--cm-primary); padding-left: 4px; }

.cm-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 24px;
  text-align: center;
  font-size: 0.88rem;
}

.cm-mobile-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; width: 100%;
  background: var(--cm-white);
  border-top: 2px solid var(--cm-primary);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
  z-index: 9999;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 10px 0;
}

.cm-mobile-bar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--cm-dark);
}

/* ==========================================================================
   4. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
@media (max-width: 992px) {
  .cm-hero-grid { grid-template-columns: 1fr; }
  .cm-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .cm-nav-menu { display: none; }
  .cm-hero-content h1 { font-size: 2.2rem; }
  .cm-section-head h2 { font-size: 1.8rem; }
  .cm-footer-grid { grid-template-columns: 1fr; }
  .cm-mobile-bar { display: grid; }
}