@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Gujarati:wght@400;500;600;700;800;900&family=Poppins:wght@400;500;600;700;800;900&display=swap');

  :root {
    --navy: #071a4f;
    --navy2: #0d2a6b;
    --blue: #1a56db;
    --blue2: #1341b0;
    --gold: #f5b500;
    --gold2: #ffd84d;
    --green: #16a34a;
    --green2: #15803d;
    --white: #ffffff;
    --bg: #f0f4ff;
    --bg2: #e4ecfe;
    --text: #0f172a;
    --muted: #475569;
    --border: #c7d9f8;
    --card-shadow: 0 4px 24px rgba(26,86,219,0.10);
  }

  html { scroll-behavior: smooth; }

  .ml-body {
    font-family: 'Poppins', 'Noto Sans Gujarati', sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 16px;
    line-height: 1.6;
  }

  .ml-nav {
    background: var(--white);
    border-bottom: 2px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: 0 2px 12px rgba(26,86,219,0.08);
  }

  .ml-nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    text-decoration: none;
  }

  .ml-nav-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 10px;
    border: 2px solid var(--border);
    background: var(--white);
  }

  .ml-nav-title {
    font-family: 'Poppins', 'Noto Sans Gujarati', sans-serif;
    font-size: 24px;
    font-weight: 900;
    color: var(--navy);
    letter-spacing: 2px;
  }

  .ml-nav-title span { color: var(--blue); }

  .ml-nav-links {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
  }

  .ml-nav-links a {
    color: var(--navy2);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    padding: 8px 14px;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s;
  }

  .ml-nav-links a:hover {
    background: var(--bg2);
    color: var(--blue);
  }

  .ml-hero {
    background: linear-gradient(135deg, #020d2e 0%, #071a4f 40%, #0e2e72 70%, #123c7c 100%);
    color: white;
    padding: 64px 20px 72px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }

  .ml-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 20% 50%, rgba(26,86,219,0.18) 0%, transparent 55%),
      radial-gradient(circle at 80% 20%, rgba(245,181,0,0.10) 0%, transparent 50%);
    pointer-events: none;
  }

  .ml-hero-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
  }

  .ml-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: auto;
  }

  .ml-hero-badge {
    display: inline-block;
    background: rgba(245,181,0,0.18);
    border: 1px solid rgba(245,181,0,0.4);
    color: var(--gold2);
    padding: 6px 18px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 20px;
  }

  .ml-hero h1 {
    font-family: 'Poppins', 'Noto Sans Gujarati', sans-serif;
    font-size: clamp(44px, 10vw, 78px);
    font-weight: 900;
    letter-spacing: 1px;
    line-height: 1.08;
    margin-bottom: 8px;
    color: white;
  }

  .ml-hero h1 span {
    color: var(--gold2);
  }

  .ml-hero-keyword {
    color: #dbe7ff;
    font-size: clamp(22px, 4vw, 34px);
    line-height: 1.2;
    margin: 16px auto 0;
    font-weight: 700;
    letter-spacing: 0.5px;
  }

  .ml-hero-sub {
    font-size: clamp(15px, 3vw, 20px);
    color: #bdd0ff;
    max-width: 760px;
    margin: 18px auto 32px;
    font-weight: 500;
  }

  .ml-hero-stats {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
    margin-bottom: 36px;
  }

  .ml-hero-stat {
    text-align: center;
  }

  .ml-hero-stat-num {
    font-family: 'Poppins', 'Noto Sans Gujarati', sans-serif;
    font-weight: 900;
    font-size: 38px;
    color: var(--gold2);
    line-height: 1;
  }

  .ml-hero-stat-label {
    font-size: 12px;
    color: #8aaee0;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  .ml-hero-btns {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
  }

  .ml-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 26px;
    border-radius: 12px;
    font-family: 'Poppins', 'Noto Sans Gujarati', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: transform 0.15s, opacity 0.15s;
    white-space: nowrap;
  }

  .ml-btn:hover {
    transform: translateY(-2px);
    opacity: 0.93;
  }

  .ml-btn:active {
    transform: scale(0.97);
  }

  .ml-btn-blue {
    background: var(--blue);
    color: white;
    box-shadow: 0 4px 16px rgba(26,86,219,0.35);
  }

  .ml-btn-green {
    background: var(--green);
    color: white;
    box-shadow: 0 4px 16px rgba(22,163,74,0.35);
  }

  .ml-btn-gold {
    background: var(--gold);
    color: var(--navy);
    box-shadow: 0 4px 16px rgba(245,181,0,0.30);
    font-weight: 800;
  }

  .ml-btn-outline {
    background: transparent;
    color: white;
    border: 2px solid rgba(255,255,255,0.4);
  }

  .ml-btn-full {
    width: 100%;
    justify-content: center;
    font-size: 18px;
    padding: 16px;
  }

  .ml-section {
    padding: 64px 20px;
  }

  .ml-section-inner {
    max-width: 1150px;
    margin: auto;
  }

  .ml-sec-badge {
    width: fit-content;
    max-width: 100%;
    text-align: center;
    color: white;
    background: linear-gradient(135deg, var(--blue), var(--blue2));
    border: 1px solid rgba(255,255,255,0.28);
    box-shadow: 0 7px 20px rgba(26,86,219,0.22);
    font-weight: 800;
    font-size: clamp(14px, 2.2vw, 16px);
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1.35;
    padding: 9px 20px;
    border-radius: 999px;
    margin: 0 auto 16px;
  }

  .ml-sec-title {
    text-align: center;
    font-family: 'Poppins', 'Noto Sans Gujarati', sans-serif;
    font-size: clamp(30px, 5vw, 48px);
    font-weight: 900;
    color: var(--navy);
    letter-spacing: -0.5px;
    line-height: 1.25;
    margin-bottom: 16px;
  }

  .ml-sec-sub {
    text-align: center;
    color: var(--muted);
    max-width: 820px;
    margin: 0 auto 40px;
    font-size: clamp(16px, 2vw, 18px);
    font-weight: 500;
    line-height: 1.8;
  }

  .ml-services-grid,
  .ml-whyus-grid,
  .ml-loads-grid,
  .ml-reviews-grid,
  .ml-contact-grid {
    display: grid;
    gap: 20px;
  }

  .ml-services-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .ml-svc-card,
  .ml-load-card,
  .ml-review-card {
    background: white;
    border-radius: 20px;
    padding: 28px 22px;
    box-shadow: var(--card-shadow);
    border: 1.5px solid var(--border);
  }

  .ml-svc-card {
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
    color: inherit;
  }

  .ml-svc-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 36px rgba(26,86,219,0.16);
  }

  .ml-svc-icon {
    width: 60px;
    height: 60px;
    background: var(--bg2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 16px;
    border: 1.5px solid var(--border);
  }

  .ml-svc-card h3 {
    font-size: 20px;
    font-weight: 800;
    color: var(--navy2);
    margin-bottom: 8px;
  }

  .ml-svc-card p {
    font-size: 15px;
    color: var(--muted);
    font-weight: 500;
    line-height: 1.75;
  }

  .ml-seo-box {
    margin-top: 30px;
    background: #ffffff;
    border: 1.5px solid var(--border);
    box-shadow: var(--card-shadow);
    border-radius: 22px;
    padding: 24px;
    color: var(--muted);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.8;
  }

  .ml-seo-box strong {
    color: var(--navy2);
  }

  .ml-materials-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }

  .ml-material-card {
    overflow: hidden;
    margin: 0;
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--card-shadow);
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
    color: inherit;
  }

  .ml-material-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(26,86,219,0.16);
  }

  .ml-material-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: block;
    object-fit: cover;
    background: #e7ecf6;
  }

  .ml-material-name {
    padding: 14px 10px;
    text-align: center;
    color: var(--navy);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.25;
  }

  .ml-fleet-bg {
    background: linear-gradient(180deg, #e9f0ff 0%, #f7f9ff 100%);
  }

  .ml-fleet-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  .ml-fleet-card {
    position: relative;
    min-height: 260px;
    overflow: hidden;
    border-radius: 20px;
    background: var(--navy);
    border: 2px solid white;
    box-shadow: var(--card-shadow);
  }

  .ml-fleet-card img {
    width: 100%;
    height: 100%;
    min-height: 260px;
    display: block;
    object-fit: cover;
    transition: transform 0.35s ease;
  }

  .ml-fleet-card:hover img {
    transform: scale(1.04);
  }

  .ml-fleet-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 34px 16px 15px;
    background: linear-gradient(transparent, rgba(2, 13, 46, 0.92));
    color: white;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.2px;
  }

  .ml-fleet-note {
    margin: 26px auto 0;
    max-width: 850px;
    padding: 16px 20px;
    text-align: center;
    border-radius: 14px;
    background: white;
    border: 1.5px solid var(--border);
    color: var(--muted);
    font-weight: 600;
  }

  .ml-whyus {
    background: var(--navy);
    color: white;
  }

  .ml-whyus .ml-sec-title {
    color: white;
  }

  .ml-whyus .ml-sec-sub {
    color: #8aaee0;
  }

  .ml-whyus-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .ml-why-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 18px;
    padding: 26px 20px;
    text-align: center;
  }

  .ml-why-num {
    font-family: 'Poppins', 'Noto Sans Gujarati', sans-serif;
    font-weight: 900;
    font-size: 48px;
    color: var(--gold2);
    line-height: 1;
    margin-bottom: 6px;
  }

  .ml-why-card h3 {
    font-size: 17px;
    font-weight: 700;
    color: white;
    margin-bottom: 8px;
  }

  .ml-why-card p {
    font-size: 14px;
    color: #8aaee0;
  }

  .ml-booking-bg {
    background: linear-gradient(135deg, var(--bg2) 0%, #d6e6ff 100%);
  }

  .ml-booking-card {
    max-width: 680px;
    margin: auto;
    background: white;
    border-radius: 28px;
    padding: 36px 32px;
    box-shadow: 0 12px 48px rgba(26,86,219,0.13);
    border: 1.5px solid var(--border);
  }

  .ml-form-group {
    margin-bottom: 16px;
  }

  .ml-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--navy2);
    margin-bottom: 6px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }

  .ml-form-group input,
  .ml-form-group select {
    width: 100%;
    padding: 13px 16px;
    border-radius: 12px;
    border: 2px solid var(--border);
    font-family: 'Poppins', 'Noto Sans Gujarati', sans-serif;
    font-size: 16px;
    color: var(--text);
    background: var(--bg);
    transition: border-color 0.2s;
    outline: none;
  }

  .ml-form-group input:focus,
  .ml-form-group select:focus {
    border-color: var(--blue);
    background: white;
  }

  .ml-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .ml-loads-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
  }

  .ml-load-card {
    border: 2px solid var(--border);
    transition: transform 0.2s, border-color 0.2s;
  }

  .ml-load-card:hover {
    transform: translateY(-4px);
    border-color: var(--blue);
  }

  .ml-load-badge {
    display: inline-block;
    background: #dbeafe;
    color: var(--blue2);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 20px;
    margin-bottom: 14px;
  }

  .ml-load-route {
    font-family: 'Poppins', 'Noto Sans Gujarati', sans-serif;
    font-weight: 900;
    font-size: 26px;
    color: var(--navy);
    letter-spacing: 1px;
    margin-bottom: 14px;
    line-height: 1.1;
  }

  .ml-load-route span {
    color: var(--blue);
  }

  .ml-load-info {
    font-size: 15px;
    color: var(--text);
    margin-bottom: 6px;
    font-weight: 500;
  }

  .ml-load-info strong {
    color: var(--navy2);
  }

  .ml-load-rate {
    display: inline-block;
    background: #dcfce7;
    color: var(--green2);
    font-size: 13px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 20px;
    margin: 8px 0 16px;
  }

  .ml-load-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 12px;
  }

  .ml-load-actions .ml-btn {
    width: 100%;
    min-width: 0;
    padding: 12px 10px;
    font-size: 14px;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
  }

  .ml-location-links {
    display: grid;
    gap: 8px;
    margin: 10px 0 14px;
  }

  .ml-location-link {
    display: block;
    padding: 9px 11px;
    border-radius: 9px;
    background: #f8fafc;
    border: 1px solid var(--border);
    color: var(--blue2);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
  }

  .ml-location-link:hover {
    background: #eaf1ff;
    border-color: var(--blue);
  }

  .ml-post-truck-banner {
    background: linear-gradient(135deg, var(--blue), var(--navy2));
    color: white;
    border-radius: 24px;
    padding: 36px 32px;
    text-align: center;
    margin-top: 48px;
    box-shadow: 0 8px 32px rgba(26,86,219,0.25);
  }

  .ml-post-truck-banner h3 {
    font-family: 'Poppins', 'Noto Sans Gujarati', sans-serif;
    font-weight: 900;
    font-size: 32px;
    letter-spacing: 2px;
    margin-bottom: 10px;
  }

  .ml-post-truck-banner p {
    color: #c8d9ff;
    margin-bottom: 22px;
  }

  .ml-areas-bg {
    background: var(--bg2);
  }

  .ml-areas-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 32px;
  }

  .ml-area-pill {
    background: white;
    border: 2px solid var(--border);
    color: var(--navy2);
    font-weight: 700;
    font-size: 15px;
    padding: 9px 20px;
    border-radius: 50px;
    box-shadow: 0 2px 8px rgba(26,86,219,0.07);
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    cursor: pointer;
    text-decoration: none;
  }

  .ml-area-pill:hover {
    background: var(--blue);
    color: white;
    border-color: var(--blue);
  }

  .ml-reviews-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }

  .ml-route-grid,
  .ml-process-grid,
  .ml-faq-grid {
    display: grid;
    gap: 18px;
  }

  .ml-route-grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  }

  .ml-route-card,
  .ml-process-card,
  .ml-faq-item,
  .ml-google-review-card {
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 18px;
    padding: 22px;
    box-shadow: var(--card-shadow);
  }

  .ml-route-card h3,
  .ml-process-card h3 {
    color: var(--navy2);
    font-size: 19px;
    margin-bottom: 7px;
  }

  .ml-route-card p,
  .ml-process-card p,
  .ml-faq-item p {
    color: var(--muted);
    font-size: 15px;
  }

  .ml-process-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  }

  .ml-process-num {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--blue);
    color: white;
    font-weight: 800;
    font-size: 20px;
    margin-bottom: 14px;
  }

  .ml-faq-grid {
    max-width: 900px;
    margin: auto;
  }

  .ml-faq-item h3 {
    color: var(--navy);
    font-size: 18px;
    margin-bottom: 8px;
  }

  .ml-google-review-card {
    max-width: 760px;
    margin: auto;
    text-align: center;
    border-color: #f5cf62;
    background: linear-gradient(135deg, #fffdf6, #ffffff);
  }

  .ml-google-review-card .stars {
    color: var(--gold);
    font-size: 30px;
    letter-spacing: 4px;
    margin-bottom: 12px;
  }

  .ml-review-stars {
    color: var(--gold);
    font-size: 20px;
    margin-bottom: 12px;
  }

  .ml-review-text {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 14px;
    font-style: italic;
  }

  .ml-review-author {
    font-weight: 700;
    color: var(--navy2);
    font-size: 15px;
  }

  .ml-contact-section {
    background: linear-gradient(135deg, #020d2e 0%, #071a4f 60%, #0e2e72 100%);
    color: white;
    padding: 64px 20px;
  }

  .ml-contact-section .ml-sec-title {
    color: white;
  }

  .ml-contact-section .ml-sec-sub {
    color: #8aaee0;
  }

  .ml-contact-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    margin-bottom: 36px;
  }

  .ml-contact-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 18px;
    padding: 26px 22px;
    text-align: center;
  }

  .ml-contact-icon {
    font-size: 36px;
    margin-bottom: 10px;
  }

  .ml-contact-card h3 {
    font-size: 14px;
    color: #8aaee0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
  }

  .ml-contact-card p,
  .ml-contact-card a {
    font-size: 18px;
    font-weight: 700;
    color: white;
    text-decoration: none;
  }

  .ml-contact-card a:hover {
    color: var(--gold2);
  }

  .ml-contact-btns {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
  }

  .ml-footer {
    background: #020617;
    color: #475569;
    text-align: center;
    padding: 22px 20px;
    font-size: 14px;
  }

  .ml-footer a {
    color: #64748b;
    text-decoration: none;
  }

  .ml-footer a:hover {
    color: var(--gold2);
  }

  .ml-wa-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 999;
    width: 58px;
    height: 58px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 28px;
    box-shadow: 0 4px 20px rgba(37,211,102,0.45);
    transition: transform 0.2s;
  }

  .ml-wa-float:hover {
    transform: scale(1.12);
  }

  .ml-truck-divider {
    text-align: center;
    padding: 10px 0;
    color: var(--border);
    font-size: 32px;
    letter-spacing: 8px;
    overflow: hidden;
    white-space: nowrap;
  }



  @media (max-width: 900px) {
    .ml-materials-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ml-fleet-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 560px) {
    .ml-materials-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .ml-material-name {
      padding: 11px 7px;
      font-size: 14px;
    }

    .ml-fleet-grid {
      grid-template-columns: 1fr;
      gap: 14px;
    }

    .ml-fleet-card,
    .ml-fleet-card img {
      min-height: 230px;
    }

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

    .ml-nav-links {
      display: none;
    }

    .ml-booking-card {
      padding: 28px 20px;
    }

  }

/* Original layout and colours above remain unchanged. Enhancements below are scoped. */
body{margin:0}*{box-sizing:border-box}html{scroll-padding-top:100px}.ml-nav{flex-wrap:wrap}.ml-nav-brand{flex-shrink:0}.ml-nav-toggle{display:none;border:1px solid var(--border);border-radius:9px;background:var(--white);color:var(--navy);font:700 14px 'Poppins','Noto Sans Gujarati',sans-serif;padding:9px 13px}.ml-body button:focus-visible,.ml-body a:focus-visible,.ml-body input:focus-visible,.ml-body select:focus-visible{outline:3px solid var(--gold);outline-offset:4px}.ml-form-group label{display:block}.ml-form-group input,.ml-form-group select{min-width:0}.ml-skip{position:absolute;left:12px;top:-100px;z-index:9999;background:#fff;color:var(--navy);padding:10px}.ml-skip:focus{top:6px}.ml-load-message{padding:32px 20px;text-align:center;border:1.5px solid var(--border);border-radius:20px;background:white;color:var(--muted);font-size:16px}.ml-load-tools{display:flex;align-items:center;gap:14px;margin-bottom:20px}.ml-load-tools input{flex:1;min-width:0;padding:12px 15px;border:1.5px solid var(--border);border-radius:10px;font:inherit;background:white;color:var(--text)}.ml-load-tools label{font-size:14px;font-weight:700;color:var(--navy)}.ml-booking-status{font-size:13px;margin-top:12px;color:var(--muted);text-align:center}.ml-booking-status a{text-decoration:underline;color:var(--blue)}
.ml-coal-story{--coal-progress:0;--coal-fill:0;--nav-height:86px;height:320vh;position:relative;color:white;background:linear-gradient(135deg,#020d2e 0%,#071a4f 40%,#0e2e72 70%,#123c7c 100%)}.ml-coal-sticky{position:sticky;top:var(--nav-height);height:calc(100svh - var(--nav-height));min-height:550px;display:flex;flex-direction:column;justify-content:space-evenly;gap:12px;padding:28px max(20px,calc((100% - 1150px)/2));overflow:hidden}.ml-coal-heading{text-align:center}.ml-coal-heading .ml-sec-badge{margin-bottom:13px}.ml-coal-heading h2{color:white;font-size:clamp(25px,3vw,38px);font-weight:800;line-height:1.4;margin:0 0 10px}.ml-coal-heading h2 span{color:var(--gold2)}.ml-coal-heading>p:last-child{font-size:14px;line-height:1.7;color:#bdd0ff;margin:0}.ml-coal-visual{width:100%;max-width:1100px;margin-inline:auto}.ml-coal-svg{display:block;width:100%;max-height:47svh;overflow:visible}.ml-coal-caption{display:grid;grid-template-columns:65px 1fr 145px;align-items:center;gap:20px;padding:18px 24px;border:1px solid #c7d9f852;background:#071a4f80;border-radius:16px}.ml-coal-caption>span{font-size:13px;font-weight:800;color:var(--gold2)}.ml-coal-caption h3{font-size:19px;font-weight:800;margin:0 0 5px}.ml-coal-caption p{font-size:13px;line-height:1.65;color:#bdd0ff;margin:0}.ml-coal-meter{position:relative;font-size:9px;color:#bdd0ff}.ml-coal-meter>span{font-size:10px;display:block;margin-bottom:6px}.ml-coal-meter>div{height:5px;background:#346099;border-radius:4px;margin-right:35px;overflow:hidden}.ml-coal-meter i{display:block;height:100%;width:calc(var(--coal-fill) * 100%);background:var(--gold2);border-radius:4px}.ml-coal-meter b{position:absolute;right:0;bottom:-6px;font-size:12px;color:var(--gold2)}.ml-coal-controls{display:flex;justify-content:center;align-items:center;gap:24px;flex-wrap:wrap}.ml-coal-controls>div{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}.ml-coal-controls button{font:700 12px 'Poppins','Noto Sans Gujarati',sans-serif;cursor:pointer;border:1.5px solid #c7d9f866;border-radius:10px;padding:11px 15px;color:#dbe7ff;background:#ffffff0a}.ml-coal-controls button.active{background:var(--gold);border-color:var(--gold);color:var(--navy);box-shadow:0 4px 16px #f5b50030}.ml-coal-controls .ml-coal-motion{font-size:10px;padding:9px 12px;background:transparent;color:#bdd0ff}.ml-dump-bed{transform-origin:420px 365px}.ml-tailgate{transform-origin:426px 365px}.ml-truck-coal{transform-origin:550px 299px;transform:scaleY(0)}.ml-unload-pile{transform-origin:465px 407px}.ml-coal-visual[data-stage="1"] .ml-falling-coal,.ml-coal-visual[data-stage="3"] .ml-falling-coal{animation:ml-coal-fall .66s linear infinite}.ml-coal-visual[data-stage="2"] .ml-coal-road{animation:ml-road-scroll .9s linear infinite}.ml-coal-visual[data-stage="2"] .ml-dumper{filter:drop-shadow(0 4px 7px #02061777)}.ml-coal-visual[data-stage="2"] .ml-loader{opacity:.3}.ml-coal-visual[data-stage="3"] .ml-loader{opacity:.15}.ml-coal-story.ml-static{height:auto}.ml-coal-story.ml-static .ml-coal-sticky{position:relative;top:0;height:auto;min-height:0;padding-block:40px;gap:26px}.ml-static .ml-falling-coal,.ml-static .ml-coal-road{animation:none!important}.ml-static .ml-coal-svg{max-height:490px}.ml-reveal{transition:opacity .75s ease,translate .75s cubic-bezier(.2,.65,.25,1);transition-delay:var(--reveal-delay,0ms)}.ml-enhanced .ml-reveal:not(.ml-visible){opacity:0;translate:0 30px}.ml-enhanced .ml-reveal.ml-visible{opacity:1;translate:0 0}.ml-fleet-card img{transition:transform .9s cubic-bezier(.2,.65,.25,1)}.ml-fleet-card:hover img{transform:scale(1.035)}.ml-material-card img{transition:transform .6s ease}.ml-material-card:hover img{transform:scale(1.035)}.ml-hero-dots{transform:translateY(var(--hero-parallax,0px))}.ml-hero-inner{animation:ml-hero-arrive .85s ease both}.ml-hero-stat{animation:ml-hero-arrive .85s ease both}.ml-hero-stat:nth-child(2){animation-delay:.12s}.ml-hero-stat:nth-child(3){animation-delay:.24s}@keyframes ml-coal-fall{to{transform:translateY(120px)}}@keyframes ml-road-scroll{to{transform:translateX(-155px)}}@keyframes ml-hero-arrive{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1050px){.ml-nav-links{gap:2px}.ml-nav-links a{font-size:12px;padding:8px}.ml-nav-title{font-size:22px}.ml-coal-sticky{padding-top:22px;padding-bottom:22px}.ml-coal-heading h2{font-size:29px}.ml-coal-controls{gap:12px}.ml-coal-svg{max-height:42svh}}
@media(max-width:760px){.ml-coal-story{height:300vh}.ml-coal-heading h2{font-size:26px}.ml-coal-heading>p:last-child{font-size:12px}.ml-coal-heading .ml-sec-badge{font-size:12px;padding:8px 13px}.ml-coal-caption{grid-template-columns:48px 1fr;gap:12px;padding:15px}.ml-coal-caption h3{font-size:17px}.ml-coal-caption p{font-size:11px}.ml-coal-caption>span{font-size:11px}.ml-coal-meter{grid-column:2;width:170px;margin-top:5px}.ml-coal-controls{gap:10px}.ml-coal-controls button{font-size:10px;padding:9px 10px}.ml-coal-controls .ml-coal-motion{font-size:9px}.ml-coal-svg{max-height:39svh}.ml-coal-sticky{gap:13px}.ml-load-tools{flex-wrap:wrap}.ml-load-tools label{width:100%}.ml-load-tools .ml-btn{font-size:12px;padding:12px}.ml-load-tools input{font-size:13px}.ml-coal-caption{border-radius:12px}}
@media(max-width:560px){.ml-nav{padding:0 14px;gap:8px}.ml-nav-brand{gap:8px}.ml-nav-title{font-size:19px;letter-spacing:.6px}.ml-nav-logo{width:40px;height:40px}.ml-nav-toggle{display:block;font-size:12px;padding:8px 10px}.ml-nav-links.ml-open{display:flex;width:100%;padding:5px 0 13px;flex-wrap:wrap}.ml-nav-links a{font-size:12px;padding:8px 10px}.ml-coal-story{height:285vh}.ml-coal-heading h2{font-size:22px}.ml-coal-heading h2 span{display:block}.ml-coal-heading>p:last-child{font-size:11px}.ml-coal-sticky{padding-inline:12px;min-height:510px;gap:10px}.ml-coal-svg{width:112%;max-width:none;margin-left:-6%;max-height:35svh}.ml-coal-caption{grid-template-columns:36px 1fr;gap:10px;padding:12px}.ml-coal-caption h3{font-size:15px}.ml-coal-caption p{font-size:10px}.ml-coal-meter{width:150px}.ml-coal-controls>div{gap:5px;flex-wrap:nowrap;width:100%}.ml-coal-controls>div button{flex:1;font-size:8px;padding:9px 4px;min-height:42px;line-height:1.5}.ml-coal-controls .ml-coal-motion{padding:6px 10px}.ml-wa-float{width:48px;height:48px;right:14px;bottom:14px}.ml-btn{max-width:100%}.ml-btn-full{white-space:normal}.ml-coal-heading .ml-sec-badge{font-size:10px;letter-spacing:.7px}.ml-static .ml-coal-svg{max-height:none}.ml-coal-story.ml-static .ml-coal-sticky{gap:22px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ml-hero-inner,.ml-hero-stat,.ml-falling-coal,.ml-coal-road{animation:none!important}.ml-reveal,.ml-fleet-card img,.ml-material-card img,.ml-btn{transition:none!important}.ml-enhanced .ml-reveal:not(.ml-visible){opacity:1;translate:none}.ml-hero-dots{transform:none}}