/* ============================================
   ATOLL EXIM — responsive.css
   Cleaned + extended for full mobile compatibility
   (fluid typography now lives in style.css via clamp() —
   see style-mobile-additions.css)
   ============================================ */

/* ============================================
   TABLET (≤ 991px)
   ============================================ */
@media (max-width: 991px) {

  /* ---- Navbar ---- */
  .nav-toggle { display: block; }

  .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 24px 24px;
    box-shadow: 0 14px 30px rgba(11,46,79,0.12);
    display: none;
    gap: 0;
    z-index: 999;
    max-height: 80vh;
    overflow-y: auto;
  }

  .nav-menu.open { display: flex; }
  .nav-menu > li { width: 100%; }

  .nav-link {
    width: 100%;
    padding: 13px 4px;
    justify-content: space-between;
  }

  .nav-link::after { display: none; }
  .nav-cta { margin: 10px 0 0; justify-content: center; }

  .mega-dropdown {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    display: none;
    box-shadow: none;
    border: 1px solid rgba(11,46,79,0.08);
    width: 100%;
    margin-top: 6px;
  }

  .mega-dropdown.show { display: block; }
  .has-dropdown:hover .mega-dropdown { display: none; }
  .has-dropdown:hover .mega-dropdown.show { display: block; }

  /* 2-tier navbar tablet */
  .navbar-bottom-strip .nav-menu {
    background: var(--navy);
    z-index: 100;
  }
  .navbar-bottom-strip .nav-link { color: rgba(255,255,255,0.88) !important; }

  /* ---- Hero ---- */
  .hero-content { max-width: 90%; }

  /* ---- Home ---- */
  .about-snap-grid { grid-template-columns: 1fr; }
  .checklist { grid-template-columns: 1fr 1fr; }
  .counters-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .industries-grid { grid-template-columns: repeat(2, 1fr); }
  .cta-flex { flex-direction: column; text-align: center; }

  /* ---- About ---- */
  .group-companies-row { grid-template-columns: 1fr; }
  .split-grid { grid-template-columns: 1fr; }
  .split-grid.reverse .split-grid-text { order: 1; }
  .split-grid.reverse .split-grid-photo { order: 2; }
  .photo-placeholder { min-height: 320px; }
  .values-timeline::before { left: 28px; }
  .value-row { grid-template-columns: 58px 1fr; gap: 18px; }
  .value-num { width: 58px; height: 58px; font-size: 1.2rem; }
  .vm-grid { grid-template-columns: 1fr; }
  .ais-grid { grid-template-columns: 1fr; }
  .milestones-dark-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .milestone-arrows { align-self: flex-end; }

  /* ---- Products ---- */
  .products-banner { height: 340px; }
  .products-stat-row { gap: 16px 30px; }
  .products-layout { grid-template-columns: 1fr; gap: 0; padding-top: 20px; }
  .industry-nav { display: none; }
  .industry-pill-nav { display: block; }
  .industry-section-head { align-items: flex-start; }
  .industry-section-icon { width: 54px; height: 54px; font-size: 1.4rem; }
  .product-showcase-grid { grid-template-columns: repeat(2, 1fr); }
  .pn-bullet-list { column-count: 2 !important; }

  /* ---- Brand ---- */
  .func-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-range-grid { grid-template-columns: repeat(2, 1fr); }
  .two-boxes-grid { grid-template-columns: 1fr; }
  .brand-cards-grid { grid-template-columns: 1fr; gap: 60px; }
  .atosol-app-grid { grid-template-columns: repeat(2, 1fr); }
  .analytical-grid { grid-template-columns: 1fr; gap: 40px; }
  .acl-box { flex-direction: column; padding: 32px 26px; text-align: center; }
  .acl-left { flex-direction: column; align-items: center; }

  /* ---- Contact ---- */
  .contact-layout { grid-template-columns: 1fr; gap: 36px; }
  .contact-side { order: -1; }

  /* ---- Career ---- */
  .openings-layout { grid-template-columns: 1fr; }
  .apply-form-wrap { position: static; }
}

/* ============================================
   SMALL TABLET / LARGE PHONE (≤ 768px)
   ============================================ */
@media (max-width: 768px) {
  .pn-product-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .form-grid { grid-template-columns: 1fr !important; }
  .contact-form-panel { padding: 32px 26px; }
  .footer-offices-compact { grid-template-columns: 1fr 1fr; }
  .pn-cta-section .cta-flex,
  .cta-flex { flex-direction: column; align-items: flex-start; gap: 18px; }
  .pn-cta-section .cta-flex .btn-gold,
  .cta-flex .btn-gold { width: 100%; justify-content: center; }
}

/* ============================================
   MOBILE (≤ 576px)
   ============================================ */
@media (max-width: 576px) {

  .section-pad { padding: 50px 0; }
  .container-custom { padding: 0 18px; }

  /* ---- 2-tier Navbar ---- */
  .main-navbar-2tier { position: sticky; top: 0; z-index: 999; }
  .navbar-top-strip {
    padding: 10px 16px;
    justify-content: space-between;
  }
  .navbar-brand-center { transform: none !important; }
  .navbar-brand-center img { height: 44px; }
  .navbar-download-btn {
    position: static;
    transform: none;
    font-size: 0.76rem;
    padding: 6px 14px;
  }
  .navbar-bottom-strip .nav-inner { padding: 8px 16px; }

  /* ---- Hero ---- */
  .hero {
    text-align: left;
    height: auto;
    min-height: 480px;
    padding: 80px 0 60px;
  }
  .hero .lead { font-size: 0.95rem; margin-bottom: 22px; }
  .hero-actions { gap: 10px; flex-wrap: wrap; }
  .hero-actions a { width: 100%; justify-content: center; }
  .hero-content { max-width: 94%; }
  .scroll-indicator { display: none; }

  /* ---- About snap ---- */
  .parallax-frame { height: 260px; }
  .checklist { grid-template-columns: 1fr; }

  /* ---- Counters ---- */
  .counters-strip { padding: 50px 0; }
  .counters-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .stat-card { padding: 22px 14px 18px; }
  .stat-card .count-num { font-size: 1.8rem; }
  .stat-icon { width: 46px; height: 46px; font-size: 1.1rem; }

  /* ---- Industries ---- */
  .features-grid { grid-template-columns: 1fr; }
  .industries-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .industry-card { height: 180px; }

  /* ---- Certifications ---- */
  .cert-item img { height: 60px; }
  .cert-item span { font-size: 0.78rem; }

  /* ---- CTA ---- */
  .cta-strip { padding: 32px 20px; text-align: center; }
  .cta-flex { flex-direction: column; align-items: center; }
  .cta-flex .btn-gold { width: 100%; justify-content: center; }

  /* ---- Footer ---- */
  .footer-grid-v2 { grid-template-columns: 1fr !important; }
  .footer-offices-compact {
    grid-template-columns: 1fr !important;
    grid-column: auto !important;
  }
  .footer-offices-compact::before,
  .footer-offices-compact::after { display: none; }
  .foc-col-1, .foc-col-2 { grid-column: 1; }
  .footer-logo { height: 90px; }
  .whatsapp-float { width: 44px; height: 44px; font-size: 1.3rem; left: 14px; bottom: 14px; }
  .back-to-top { width: 40px; height: 40px; font-size: 1rem; right: 14px; bottom: 14px; }

  /* ---- About page ---- */
  .about-hero { height: auto; min-height: 280px; }
  .about-hero p { font-size: 0.92rem; }
  .ais-grid { grid-template-columns: 1fr; gap: 30px; }
  .vm-section { padding: 50px 0; }
  .vm-grid { grid-template-columns: 1fr; }
  .vm-card { padding: 28px 22px; }
  .values-arc-row { flex-wrap: wrap; }
  .value-arc-item { flex: 0 0 46%; margin-top: 0 !important; margin-bottom: 28px; }
  .values-arc-track { display: none; }
  .legacy-stamp { flex-direction: column; text-align: center; gap: 6px; padding: 16px 24px; }

  /* ---- Milestone mobile ---- */
  .milestones-section-dark { padding: 50px 0; }
  .ms-year { font-size: 2.4rem; min-width: auto; }
  .milestone-slide-single { flex-direction: column; gap: 14px; }
  .ms-body p { font-size: 0.92rem; }

  /* ---- Brand pages mobile ---- */
  .func-grid { grid-template-columns: 1fr; }
  .func-card { padding: 26px 22px; }
  .trust-range-grid { grid-template-columns: 1fr; }
  .atosol-app-grid { grid-template-columns: 1fr; }
  .analytical-grid { grid-template-columns: 1fr; }
  .brand-closing-cta { padding: 60px 0; }
  .closing-cta-actions { flex-direction: column; align-items: center; }
  .closing-cta-actions a { width: 100%; justify-content: center; }
  .brand-others-grid { grid-template-columns: 1fr; }
  .brand-other-card { flex-direction: column; }
  .brand-other-card img { width: 100%; height: 160px; }
  .atopol-func-grid { grid-template-columns: 1fr 1fr; }
  .advantages-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .atopol-accordion-section { padding: 50px 0; }

  /* ---- Products ---- */
  .products-banner { height: 260px; }
  .pn-hero { height: 320px; }
  .pn-bullet-list { column-count: 1 !important; }
  .pn-industry-section { padding: 40px 0 44px; }
  .pn-product-box { padding: 24px 20px; }

  /* ---- Contact ---- */
  .contact-hero { height: auto; min-height: 300px; padding: 40px 0; }
  .contact-main { padding: 50px 0 60px; }
  .contact-form-panel { padding: 26px 20px; }
  .form-submit-row { flex-direction: column; align-items: flex-start; }
  .form-submit-row .btn-gold { width: 100%; justify-content: center; }
  .map-card { height: 180px; }

  /* ---- Career ---- */
  .career-intro-pillars { grid-template-columns: 1fr 1fr; }
  .openings-layout { grid-template-columns: 1fr; }

  /* ---- Counter / char-reveal heading fix ---- */
  .counters-strip h2,
  .counters-strip .section-title,
  .char-reveal-heading {
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
  }

  /* ---- Brand Spotlight fix ---- */
  .brand-spotlight-grid { grid-template-columns: 1fr; gap: 28px; }
  .brand-spotlight-visual img { height: 240px; }
}

/* ============================================
   EXTRA SMALL PHONES (≤ 400px)
   ============================================ */
@media (max-width: 400px) {
  .counters-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card { padding: 16px 10px 14px; }
  .footer-social a { width: 32px; height: 32px; font-size: 0.85rem; }
  .btn-gold, .nav-cta { padding: 11px 18px; font-size: 0.85rem; }
}