/* ═══════════════════════════════════════════════════════════════
   LUBECHEM CONSULTANT — mobile-responsive.css v6
   Built from actual CSS files: main.css + pages.css + lubechem-theme.css
   Loaded LAST — highest cascade priority.
   JS handles scroll reveal via isMob check in main.js / lubechem-theme.js
═══════════════════════════════════════════════════════════════ */

/* ── 0. GLOBAL ───────────────────────────────────────────────── */
html, body { overflow-x: hidden !important; }
img, video, iframe { max-width: 100% !important; }

/* Table scroll */
.lc-tbl {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  width: 100% !important;
}

/* ── 1. SCROLL REVEAL — force visible on mobile ──────────────────
   main.js already handles .sr via isMob check now.
   This CSS is a safety net in case JS hasn't run yet.
────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .sr, .sr-d1, .sr-d2, .sr-d3, .sr-d4, .sr-d5 {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    visibility: visible !important;
  }
  .bio-sr {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    visibility: visible !important;
  }
}

/* ── 2. NAV ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav-inner     { padding: 0 1.25rem !important; }
  .logo-img      { height: 44px !important; }
  .nav-menu      { display: none !important; }
  .nav-hamburger { display: flex !important; }
}

/* ── 3. SECTION PADDING ─────────────────────────────────────── */
@media (max-width: 640px) {
  .sec           { padding: 3rem 1.25rem !important; }
  .highlight-band{ padding: 3.5rem 1.25rem !important; }
  .cta-band      { padding: 3rem 1.25rem !important; }
  .site-footer   { padding: 3rem 1.25rem 1.5rem !important; }
}

/* ── 4. PAGE HERO ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .page-hero     { padding: 7rem 1.25rem 3rem !important; min-height: auto !important; }
  .page-hero h1  { font-size: clamp(1.9rem, 6.5vw, 2.8rem) !important; }
  .page-hero p   { font-size: .9rem !important; max-width: 100% !important; }
  .rnd-hero      { padding: 7rem 1.25rem 4rem !important; min-height: auto !important; }
}
@media (max-width: 480px) {
  .page-hero     { padding: 6.5rem 1rem 2.5rem !important; }
  .page-hero h1  { font-size: clamp(1.75rem, 6vw, 2.2rem) !important; }
}

/* ── 5. HOMEPAGE HERO ──────────────────────────────────────── */
/* pages.css already handles 1024px. We tighten further. */
@media (max-width: 768px) {
  .hero          { padding: 6rem 1.25rem 2.5rem !important; }
  .hero h1       { font-size: clamp(2rem, 7vw, 2.8rem) !important; }
  .hero-visual   { height: 240px !important; }
  .hero-float-badge { bottom: -.5rem !important; left: -.5rem !important; }
}
@media (max-width: 480px) {
  .hero          { padding: 5.5rem 1rem 2rem !important; }
  .hero-visual   { height: 180px !important; }
  .hero-img-stack{ grid-template-columns: 1fr 1fr !important; }
}

/* ── 6. TYPOGRAPHY ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .sec-h2        { font-size: clamp(1.6rem, 5.5vw, 2.2rem) !important; }
  .sec-lead      { font-size: .9rem !important; }
}
@media (max-width: 480px) {
  .sec-h2        { font-size: clamp(1.5rem, 5vw, 1.9rem) !important; }
}

/* ── 7. HOMEPAGE GRIDS ─────────────────────────────────────── */
/* pages.css covers 1024px already. These fill the 640–768px gap. */
@media (max-width: 768px) {
  .why-grid      { grid-template-columns: 1fr 1fr !important; gap: 1rem !important; }
  .svc-grid      { grid-template-columns: 1fr 1fr !important; gap: 1rem !important; }
  .testi-grid    { grid-template-columns: 1fr !important; }
  .grease-types  { grid-template-columns: 1fr 1fr !important; }
  .rnd-band-inner{ grid-template-columns: 1fr !important; gap: 2rem !important; }
  .additive-row  { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .process-steps { grid-template-columns: 1fr 1fr !important; gap: 1.5rem !important; }
  .process-steps::before { display: none !important; }
}
@media (max-width: 480px) {
  .why-grid, .svc-grid { grid-template-columns: 1fr !important; }
  .grease-types        { grid-template-columns: 1fr !important; }
  .process-steps       { grid-template-columns: 1fr !important; }
  .add-chem-grid       { grid-template-columns: 1fr 1fr !important; }
}

/* ── 8. TRUST BAR ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .trust-bar     { padding: 1rem 1.25rem !important; }
  .trust-inner   { gap: .75rem !important; flex-wrap: wrap !important; }
  .trust-sep     { display: none !important; }
}

/* ── 9. ABOUT PAGE ─────────────────────────────────────────── */
/* pages.css covers 1024px. Fill gap. */
@media (max-width: 768px) {
  .founder-grid  { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .stats-row     { grid-template-columns: 1fr 1fr !important; }
  .exp-grid      { grid-template-columns: 1fr !important; }
  .values-grid   { grid-template-columns: 1fr 1fr !important; }
  .cities-grid   { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 480px) {
  .values-grid, .cities-grid { grid-template-columns: 1fr !important; }
}

/* ── 10. CONTACT PAGE ──────────────────────────────────────── */
@media (max-width: 768px) {
  .contact-layout { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
  .f2-row         { grid-template-columns: 1fr !important; gap: .85rem !important; }
}

/* ── 11. SERVICES PAGE ─────────────────────────────────────── */
@media (max-width: 768px) {
  .svc-section   { grid-template-columns: 1fr !important; gap: 2rem !important; padding: 3rem 0 !important; }
  .svc-section.reverse { direction: ltr !important; }
  .svc-specs     { grid-template-columns: 1fr 1fr !important; }
  .svc-img img   { height: 220px !important; }
}
@media (max-width: 480px) {
  .svc-specs     { grid-template-columns: 1fr !important; }
  .plant-grid    { grid-template-columns: 1fr 1fr !important; }
  .comply-grid   { grid-template-columns: 1fr !important; }
}

/* ── 12. GREASE / LUBRICANT SERVICE PAGE ───────────────────── */
@media (max-width: 768px) {
  /* sub-hero-stats uses inline style="grid-template-columns:206px 206px"
     Fixed px overflows mobile. Force responsive. */
  .sub-hero-stats { grid-template-columns: 1fr 1fr !important; }
}

/* ── 13. R&D PARTNERSHIP PAGE ──────────────────────────────── */
@media (max-width: 768px) {
  .rnd-hero-inner { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .ptn-timeline   { grid-template-columns: repeat(3, 1fr) !important; }
  .key-numbers    { grid-template-columns: repeat(2, 1fr) !important; }
  .included-grid  { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 480px) {
  .ptn-timeline   { grid-template-columns: 1fr !important; }
  .key-numbers    { grid-template-columns: 1fr 1fr !important; }
  .included-grid  { grid-template-columns: 1fr !important; }
}

/* ── 14. BIO PAGE ──────────────────────────────────────────── */
@media (max-width: 960px) {
  /* Split hero: column on mobile */
  .bio-split-hero       { flex-direction: column !important; min-height: auto !important; }
  .bio-split-left, .bio-split-right {
    flex: none !important; width: 100% !important; max-width: 100% !important;
    flex-basis: auto !important; min-height: 45vh !important;
    padding: 5rem 1.5rem 3rem !important;
  }
  .bio-divider, .bio-drag-hint { display: none !important; }
}
@media (max-width: 768px) {
  .bio-types-grid, .bio-grease-grid, .bio-apps-grid {
    grid-template-columns: 1fr !important;
  }
  .bio-why-inner        { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .bio-why-facts        { grid-template-columns: 1fr 1fr !important; }
  .bio-rnd-inner        { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .bio-hero-band-inner  { grid-template-columns: 1fr 1fr !important; }
  .bio-std-grid         { grid-template-columns: repeat(3, 1fr) !important; }
  .bio-teaser-split-preview { grid-template-columns: 1fr !important; }
  .bio-teaser-grid      { grid-template-columns: repeat(2, 1fr) !important; }
  .bio-teaser-stats     { grid-template-columns: 1fr 1fr !important; }
  .bio-teaser-header    { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
  .bio-why-facts        { grid-template-columns: 1fr !important; }
  .bio-std-grid         { grid-template-columns: 1fr 1fr !important; }
  .bio-hero-band-inner  { grid-template-columns: 1fr 1fr !important; }
  .bio-teaser-grid      { grid-template-columns: 1fr !important; }
  .bio-split-left, .bio-split-right { padding: 4rem 1rem 2.5rem !important; }
}

/* ── 15. HOMEPAGE MARKET + EMERGING + WHO WE HELP ─────────── */
@media (max-width: 768px) {
  .who-grid        { grid-template-columns: 1fr !important; gap: 1rem !important; }
  .emerging-grid   { grid-template-columns: 1fr !important; gap: 1rem !important; }
  .market-stats    { grid-template-columns: 1fr 1fr !important; }
  .market-two-col  { grid-template-columns: 1fr !important; gap: 2rem !important; }
}
@media (max-width: 480px) {
  .market-stats    { grid-template-columns: 1fr 1fr !important; }
}

/* ── 16. INDUSTRY FINDER ───────────────────────────────────── */
@media (max-width: 768px) {
  .ind-sec       { padding: 3.5rem 1.25rem !important; }
  .ind-grid      { grid-template-columns: 1fr 1fr !important; gap: .85rem !important; }
  .ind-lube-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .ind-lube-chip { font-size: .58rem !important; padding: .4rem .45rem !important; }
  .ind-tab       { font-size: .38rem !important; padding: .3rem .5rem !important; }
  .ind-lube-index{ padding: 2rem 1.25rem !important; }
}
@media (max-width: 480px) {
  .ind-grid      { grid-template-columns: 1fr !important; }
  .ind-lube-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── 17. COUNTRY STRIP ─────────────────────────────────────── */
@media (max-width: 640px) {
  .country-strip  { padding: 1.5rem 1.25rem !important; }
  .country-inner  { gap: .75rem !important; flex-wrap: wrap !important; justify-content: flex-start !important; }
}

/* ── 18. FOOTER ────────────────────────────────────────────── */
/* main.css already handles 640px. Nothing extra needed. */

/* ── 19. CARDS ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  .card          { padding: 1.5rem 1.25rem !important; }
  .testi-card    { padding: 1.5rem 1.25rem !important; }
}

/* ── 20. BUTTONS ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .btn           { padding: .72rem 1.1rem !important; font-size: .68rem !important; }
}

/* ── 21. FEAT ROWS (R&D band) ──────────────────────────────── */
@media (max-width: 640px) {
  .feat-row      { flex-wrap: wrap !important; gap: .75rem !important; }
  .feat-badge    { margin-left: 0 !important; }
}