/* ===== MOBILE RESPONSIVE ===== */
  @media (max-width: 900px) {
    /* Top strip - stack, hide green blocks, shrink contact info */
    .top-strip { height: auto; flex-wrap: wrap; }
    .top-strip .green,
    .top-strip .green-right { display: none; }
    .top-strip .blue-main {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      padding: 10px 15px;
    }
    .top-strip .contact { display: flex; flex-direction: column; gap: 4px; }
    .top-strip .contact span { margin-right: 0; }
    .top-strip .links a { margin-right: 12px; }

    /* Nav bar - hamburger replaces horizontal nav */
    .navbar-inner { flex-wrap: wrap; }
    .hamburger { display: flex; }
    .logo-text { font-size: 20px; }
    .logo-badge { width: 38px; height: 38px; }
    .nav-links {
      display: none;
      flex-direction: column;
      width: 100%;
      order: 3;
    }
    .nav-links.open { display: flex; }
    .nav-links a {
      border-right: none;
      border-bottom: 1px solid rgba(255,255,255,0.25);
      padding: 16px 20px;
      text-align: left;
    }
    .nav-item { width: 100%; flex-direction: column; }
    .nav-item > a.dropdown-trigger { width: 100%; }
    .mega-menu {
      display: none;
      position: static;
      width: 100%;
      box-shadow: none;
      background: #f7f9fb;
      padding: 10px 20px 15px 30px;
    }
    .nav-item.open .mega-menu { display: block; }
    .mega-cols { flex-direction: column; gap: 0; }
    .mega-cols-2, .mega-cols-5 { gap: 0; }
    .mega-col { width: 100%; margin-bottom: 10px; }
    .mega-menu .mega-item-bold, .mega-menu .mega-item-plain, .mega-menu .mega-item-arrow {
      color: #222;
      border-bottom: 1px solid #e3e8ee;
      padding: 12px 0;
    }

    /* Hero carousel - shorter, retrofit to mobile screen width */
    .hero { height: 220px; margin: 10px; }
    .dots-nav { bottom: 8px; }

    /* Icon row - stack 2 per row */
    .icon-row { padding: 20px 10px 30px; gap: 10px; }
    .icon-item { width: 45%; padding: 12px 6px; }
    .icon-img { width: 90px; }
    .icon-item .label { font-size: 12px; }

    /* About section - stack columns */
    .about-section { padding: 24px 20px; }
    .about-section .container { flex-direction: column; }
    .about-text h2 { font-size: 22px; }

    /* Section headings */
    .section-heading { padding: 20px 20px 10px; flex-wrap: wrap; }
    .section-heading h2 { font-size: 22px; }

    /* Project grid / Cutting Edge grid - stack to single column */
    .project-grid { flex-direction: column; padding: 10px 20px 30px; }
    .cutting-edge-grid { flex-direction: column; padding: 0 20px 30px; }
    .ce-card { min-height: 140px; }

    /* Quote band */
    .quote-band { padding: 20px 20px; }
    .quote-box { padding: 24px 20px; font-size: 16px; }
    .quote-underline { margin: 0 20px; }

    /* Footer - stack columns */
    footer { padding: 30px 20px 0; }
    .footer-grid { flex-direction: column; gap: 30px; }
    .footer-col a { width: 100%; }
    .map-box { width: 100%; }
    .footer-bottom {
      flex-direction: column;
      gap: 10px;
      padding: 16px 20px;
      text-align: center;
    }

    /* Breadcrumb / page header */
    .page-header { flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px; }
    .page-header h1 { font-size: 26px; }

    /* Map */
    .map-wrap { padding: 15px 20px 0; }
    .map-frame { height: 260px; }

    /* Contact columns - stack */
    .contact-cols { flex-direction: column; gap: 24px; padding: 30px 20px 20px; }

    /* Province tabs - horizontal scroll instead of squeeze */
    .tabs-bar {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      margin: 15px 20px 0;
    }
    .tab-btn { flex: 0 0 auto; padding: 14px 16px; font-size: 15px; white-space: nowrap; }
    .tab-panels { margin: 0 20px 40px; }

    /* Office table - allow horizontal scroll on small screens */
    .office-table { display: block; overflow-x: auto; white-space: nowrap; }
    .tender-page-section { padding: 15px 20px 40px; }
    .info-page-section { padding: 15px 20px 40px; }

    /* Tender tables: stack into labeled cards instead of a cramped fixed-width table */
    .tender-table { table-layout: auto; }
    .tender-table thead { display: none; }
    .tender-table, .tender-table tbody, .tender-table tr, .tender-table td {
      display: block;
      width: 100%;
    }
    .tender-table tr {
      margin-bottom: 14px;
      border: 1px solid #e3e8ee;
      border-radius: 4px;
    }
    .tender-table tbody tr:nth-child(even) { background: #f5f5f5; }
    .tender-table td {
      border-bottom: 1px solid #eee;
      padding: 10px 14px;
      word-break: break-word;
    }
    .tender-table td:last-child { border-bottom: none; }
    .tender-table td::before {
      content: attr(data-label);
      display: block;
      font-weight: 700;
      color: #4fa8de;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.4px;
      margin-bottom: 4px;
    }
    .tender-table td[data-label=""]::before,
    .tender-table td:not([data-label])::before { content: none; margin-bottom: 0; }
    .tender-table td:empty { display: none; }
    .tender-table .dl-cell { position: static; }
    .tender-table .dl-wrap { display: block; }
    .tender-table .dl-menu { left: 14px; right: 14px; width: auto; min-width: 0; }
  }

  @media (max-width: 480px) {
    .hero { height: 170px; margin: 8px; }
    .icon-item { width: 100%; }
    .logo-text { font-size: 17px; }
  }