/* ============================================================
   MERIDIAN — MOBILE FIX (v2)
   Add AFTER css/style.css.

   Your style.css already handles mobile responsiveness well —
   fluid clamp() type, and deliberate breakpoints for
   .diff-grid, .addons-grid, .why-grid, .contact-split,
   .service-row, .footer-grid, .path-cards, .trust-bar, etc.
   This file intentionally does NOT touch any of that.

   It covers exactly three elements that were set with inline
   `style="grid-template-columns:..."` and no class name, which
   means style.css's media queries have no selector to reach
   them. No !important needed — these are real classes now,
   following the same breakpoints (1024px / 768px) and design
   logic already used elsewhere on the site.
   ============================================================ */

/* "Who We Serve" — commercial.html, 6 cards, longer text
   (mirrors .diff-grid: 3 → 2 → 1) */
.serve-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(29,58,95,0.1);
}
@media (max-width: 1024px) {
  .serve-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .serve-grid { grid-template-columns: 1fr; }
}

/* "Trust Credentials" — commercial.html, 4 short stat blocks
   (mirrors .addons-grid: stays at 2 columns on phones) */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(29,58,95,0.1);
}
@media (max-width: 1024px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
}

/* "Our Approach" — residential.html, paragraph + info-block list
   (mirrors .contact-split: 2 columns until 768, then stacks) */
.approach-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 768px) {
  .approach-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Mobile menu active-page highlight — mirrors .nav-links a.active,
   which only exists for the desktop nav in style.css */
.nav-mobile a.active { color: var(--gold); }