/* =====================================================================
   Evercrest Matrix — phone layout for the inner pages
   (about, services, work, industries, insights, contact).
   Everything is inside max-width: 767px, so tablet + desktop are untouched.
   Classes .m-swipe / .m-chips and the sticky bar are added by assets/mobile.js.
   ===================================================================== */
.m-sticky { display: none; }

@media (max-width: 767px) {
  /* ---- rhythm: shorter sections ---- */
  section.py-20, section.py-24, section.py-28 { padding-top: 3.75rem; padding-bottom: 3.75rem; }
  section[data-page-hero] { padding-top: 2.5rem; padding-bottom: 2.75rem; }
  section.space-y-24 > :not([hidden]) ~ :not([hidden]) { margin-top: 3.5rem; }
  section .mb-16 { margin-bottom: 2rem; }
  section .gap-12 { gap: 1.5rem; }

  /* ---- card rows swipe sideways (next card peeks in, dots below) ---- */
  .m-swipe { display: flex !important; gap: .75rem !important; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding: 0 1rem; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-left: -1rem !important; margin-right: -1rem !important; padding: .25rem 1rem .5rem !important; }
  .m-swipe::-webkit-scrollbar { display: none; }
  .m-swipe > * { flex: 0 0 84%; min-width: 0; scroll-snap-align: start; }
  .m-swipe > [class*="p-8"], .m-swipe > [class*="p-10"] { padding: 1.4rem; }
  .m-dots { display: flex; justify-content: center; gap: 6px; padding-top: .35rem; }
  .m-dots i { width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.22); transition: width .3s ease, background-color .3s ease; }
  .m-dots i.on { width: 20px; background: #F36B35; }
  .m-light .m-dots i { background: rgba(23,25,28,.18); }
  .m-light .m-dots i.on { background: #F36B35; }

  /* ---- filter buttons: one line that scrolls, instead of ragged wrapping ---- */
  .m-chips { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; margin-left: -1rem; margin-right: -1rem;
    padding-left: 1rem; padding-right: 1rem; }
  .m-chips::-webkit-scrollbar { display: none; }
  .m-chips > * { flex: none; white-space: nowrap; }

  /* ---- big content cards (industries, service divisions, contact): less padding ---- */
  section [class*="rounded-xl"][class*="p-8"], section [class*="rounded-xl"][class*="p-10"],
  section [class*="rounded-2xl"][class*="p-8"], section [class*="rounded-2xl"][class*="p-10"] { padding: 1.35rem; }

  /* ---- forms: 16px fields so iPhone does not zoom in on focus ---- */
  form input, form select, form textarea { font-size: 16px !important; }

  /* ---- footer: nav + capabilities side by side ---- */
  footer { padding-top: 3rem !important; padding-bottom: 6rem !important; }
  footer .grid.lg\:grid-cols-12 { grid-template-columns: 1fr 1fr; gap: 2rem 1.25rem; padding-bottom: 2.5rem; }
  footer .lg\:col-span-5, footer .grid.lg\:grid-cols-12 > div:last-child { grid-column: 1 / -1; }
  footer .lg\:col-span-2 ul a, footer .lg\:col-span-3 ul a { display: inline-block; padding: .2rem 0; }
  footer .pt-8 { text-align: center; }

  /* ---- sticky "Start a Project" bar ---- */
  .m-sticky { display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    position: fixed; left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); z-index: 60;
    padding: .55rem .55rem .55rem 1rem; border-radius: 16px;
    background: linear-gradient(135deg, rgba(40,40,44,.82), rgba(16,16,18,.88));
    -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
    border: 1px solid rgba(255,255,255,.12); box-shadow: 0 18px 40px -14px rgba(0,0,0,.9);
    transform: translateY(calc(100% + 1.5rem)); opacity: 0; pointer-events: none;
    transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .3s ease; }
  .m-sticky.on { transform: none; opacity: 1; pointer-events: auto; }
  .m-sticky-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .m-sticky-txt strong { font: 600 .9rem/1.1 'Space Grotesk', sans-serif; color: #fff; }
  .m-sticky-txt span { font: 500 .62rem/1.2 'Space Mono', ui-monospace, monospace; letter-spacing: .06em; color: rgba(255,255,255,.55); }
  .m-sticky-btn { flex: none; display: inline-flex; align-items: center; gap: .45rem; height: 44px; padding: 0 1rem; border-radius: 11px;
    background: #F36B35; color: #fff; text-decoration: none; font: 600 .72rem/1 'Space Grotesk', sans-serif; letter-spacing: .12em; text-transform: uppercase;
    box-shadow: 0 10px 24px -10px rgba(243,107,53,.8); }
  .m-sticky-btn svg { width: 15px; height: 15px; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) { .m-sticky { transition: none; } }