/* ─────────────────────────────────────────────────────────────────────────────
 * Salient Innovation Set – small-screen layer (css/site-mobile.css)
 *
 * Desktop (≥1025px) is untouched: every rule below lives inside
 * @media (max-width:1024px) except the two clearly-marked blocks at the end
 * (the app shell primitives, which are hidden on desktop, and the
 * #dikw-execution-physics rules that repair a section whose classes were
 * never defined in css/site.css).
 *
 * Load AFTER css/site.css and after any page-specific <style>.
 * Markup hooks a page needs to add (classes only, no structural change):
 *   .m-deck    – on a card-grid container that should become a swipe rail
 *   .m-split   – on a 2-column "text + panel" grid that should stack
 *   .m-clamp   – on a long body-copy block that should collapse behind Read more
 *   .m-zoom    – on a diagram/image that should open in the pinch-zoom lightbox
 * ──────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   1 · APP SHELL – phones and small tablets
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  html { scroll-padding-top: 64px; -webkit-text-size-adjust: 100%; }
  body { padding-bottom: 4.5rem; }            /* room for the quick-action bar */

  /* ── Top bar ────────────────────────────────────────────────────────────── */
  nav.fixed > div { height: 56px !important; padding-left: 1rem !important; padding-right: 1rem !important; }
  nav.fixed .h-16 { height: 56px !important; }
  body > .h-16 { height: 56px !important; }
  nav .hidden.md\:flex { display: none !important; }    /* desktop mega menus off */
  #mobile-toggle { display: flex !important; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-right: -.5rem; }
  nav.fixed img { height: 30px !important; }
  nav.fixed a[href="engage.html"].hidden { display: none !important; }  /* CTA lives in the bar */

  /* ── Rebuilt drawer: grouped, collapsible, 48px rows ────────────────────── */
  #mobile-drawer {
    top: 56px !important; padding: 0 !important;
    background: #041020 !important;
    overscroll-behavior: contain;
    padding-bottom: 5.5rem !important;
  }
  #mobile-drawer > .space-y-6 { display: block; }
  #mobile-drawer .m-acc { border-bottom: 1px solid #12233a; }
  #mobile-drawer .m-acc-head {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; min-height: 52px; padding: .75rem 1.25rem;
    background: none; border: 0; cursor: pointer;
    font-family: 'Inter', sans-serif; font-size: .95rem; font-weight: 600; color: #fff;
    text-align: left;
  }
  #mobile-drawer .m-acc-head span.m-acc-kicker {
    font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: #02e600; display: block; margin-bottom: .15rem;
  }
  #mobile-drawer .m-acc-head i { color: #64748b; transition: transform .2s ease; }
  #mobile-drawer .m-acc[data-open="true"] .m-acc-head i { transform: rotate(180deg); }
  #mobile-drawer .m-acc-body { display: none; padding: 0 1.25rem 1rem; }
  #mobile-drawer .m-acc[data-open="true"] .m-acc-body { display: block; }
  #mobile-drawer .m-acc-body a {
    display: flex; align-items: center; gap: .75rem;
    min-height: 48px; padding: .5rem .75rem;
    border-radius: 10px; text-decoration: none;
    font-family: 'Inter', sans-serif; font-size: .875rem; font-weight: 500; color: #cbd5e1;
    background: #081627; border: 1px solid #12233a; margin-bottom: .4rem;
  }
  #mobile-drawer .m-acc-body a:active { background: #122131; border-color: rgba(2,230,0,.4); color: #fff; }
  #mobile-drawer .m-acc-body a .m-sub {
    display: block; font-size: .7rem; font-weight: 400; color: #64748b; margin-top: .1rem;
  }
  #mobile-drawer .m-acc-body a img { width: 26px; height: 26px; object-fit: contain; flex: 0 0 26px; }
  #mobile-drawer .m-drawer-foot { padding: 1.25rem; display: grid; gap: .6rem; }

  /* ── Persistent quick-action bar ─────────────────────────────────────────── */
  .m-tabbar {
    display: grid !important; grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: rgba(5,20,36,.94); backdrop-filter: blur(12px);
    border-top: 1px solid #1c2b3c;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .m-tabbar a, .m-tabbar button {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .25rem; min-height: 58px; background: none; border: 0; cursor: pointer;
    text-decoration: none; font-family: 'Inter', sans-serif;
    font-size: .625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: #8fa3bd;
  }
  .m-tabbar i, .m-tabbar svg { width: 20px; height: 20px; }
  .m-tabbar .is-primary { color: #02e600; }
  .m-tabbar a:active, .m-tabbar button:active { background: #0b1c30; }

  /* ═════════════════════════════════════════════════════════════════════════
     2 · SECTION RHYTHM
     ═════════════════════════════════════════════════════════════════════════ */
  section { padding: 2.75rem 1.25rem !important; }
  section > div { max-width: 100% !important; }
  #sig-hero { padding: 1.25rem 1.25rem 2.5rem !important; }
  #sig-hero::before { width: 100% !important; height: 420px !important; }
  .sig-hero-inner > br { display: none; }

  .sig-headline { font-size: 1.75rem !important; line-height: 1.18 !important; margin-bottom: 1rem !important; }
  section h2 { font-size: 1.4rem !important; line-height: 1.22 !important; letter-spacing: -.015em !important; }
  section h3 { font-size: 1rem !important; }

  /* Other pages use plain h1/Tailwind text-5xl/6xl/7xl heroes (not .sig-headline) –
     cap those too, and stop overflow-hidden hero shells from clipping wrapped text. */
  h1 { font-size: 1.85rem !important; line-height: 1.2 !important; }
  .text-5xl, .text-6xl, .text-7xl, .text-8xl { font-size: 1.85rem !important; line-height: 1.2 !important; }
  .hero-bg, [class*="hero-bg"] { overflow: visible !important; height: auto !important; min-height: 0 !important; }
  .sig-eyebrow { font-size: .625rem !important; padding: .3rem .9rem !important; }

  /* Body copy: no justification on narrow measures */
  p, .sig-sub, .executive-briefing-narrative, .executive-briefing-impact,
  section p, main p, p.text-justify {
    text-align: left !important; text-align-last: left !important;
    hyphens: none;
  }
  .sig-sub { font-size: .95rem !important; line-height: 1.65 !important; }
  section p { font-size: .9375rem; line-height: 1.65; }

  /* Section-label pills */
  /* Section-label pills become plain accent kickers – a two-line pill looks broken */
  .inline-flex.items-center.gap-2.px-4 {
    display: inline-block !important;
    background: none !important; border: 0 !important; padding: 0 !important;
    margin-bottom: .85rem !important;
    font-size: .625rem !important; font-weight: 700 !important;
    letter-spacing: .18em !important; line-height: 1.3 !important;
    border-radius: 0 !important; color: #00ff00 !important;
  }
  .sig-eyebrow {
    display: inline-block !important;
    background: none !important; border: 0 !important; padding: 0 !important;
    margin: 0 0 1rem !important;
    font-size: .625rem !important; letter-spacing: .18em !important; line-height: 1.5 !important;
    border-radius: 0 !important;
  }
  .sig-eyebrow .sig-dot { display: none; }
  .executive-briefing-badge {
    background: none !important; border: 0 !important; padding: 0 !important;
    font-size: .625rem !important; letter-spacing: .18em !important;
    margin-bottom: 1rem !important;
  }

  /* ── Hero video: responsive iframe embed ────────────────── */
  .sig-video-wrap { display: block !important; width: 100% !important; margin: 0 auto 1.5rem !important; }

  /* ── Chips + CTAs ───────────────────────────────────────────────────────── */
  .sig-chips {
    display: flex !important; flex-wrap: nowrap !important; overflow-x: auto;
    justify-content: flex-start !important; gap: .5rem !important;
    margin: 0 -1.25rem 1.5rem !important; padding: 0 1.25rem .25rem !important;
    scrollbar-width: none;
  }
  .sig-chips::-webkit-scrollbar { display: none; }
  .sig-chips span { white-space: nowrap; }
  .sig-chips br { display: none; }
  .sig-ctas { flex-direction: column; gap: .6rem !important; }
  .sig-cta-primary, .sig-cta-secondary {
    display: flex !important; align-items: center; justify-content: center;
    min-height: 48px; padding: .8rem 1.5rem !important; width: 100%;
  }

  /* ═════════════════════════════════════════════════════════════════════════
     3 · SWIPEABLE CARD DECKS  (.m-deck)
     ═════════════════════════════════════════════════════════════════════════ */
  .m-deck {
    display: flex !important; grid-template-columns: none !important;
    gap: .75rem !important; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-left: -1.25rem !important; margin-right: -1.25rem !important;
    padding: .25rem 1.25rem 1rem !important;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .m-deck::-webkit-scrollbar { display: none; }
  .m-deck > * {
    flex: 0 0 80%; min-width: 0; scroll-snap-align: center;
    padding: 1.25rem !important;
  }
  .m-deck.m-deck--wide > * { flex: 0 0 88%; }
  .m-deck.m-deck--narrow > * { flex: 0 0 62%; }
  .m-deck-dots {
    display: flex; gap: .35rem; justify-content: center; margin: -.25rem 0 .25rem;
  }
  .m-deck-dots b {
    width: 6px; height: 6px; border-radius: 999px; background: #1e2d45; transition: all .2s;
  }
  .m-deck-dots b.is-on { background: #00ff00; width: 18px; }
  .m-deck-hint {
    display: flex; align-items: center; gap: .4rem; justify-content: center;
    font-family: 'Inter', sans-serif; font-size: .625rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: #64748b; margin-bottom: .6rem;
  }

  /* ── 2-column splits stack ──────────────────────────────────────────────── */
  .m-split { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .m-split .flex.justify-center { justify-content: flex-start !important; }

  /* ── Cards ──────────────────────────────────────────────────────────────── */
  .executive-briefing-card { padding: 1.5rem 1.25rem !important; margin: 1.5rem 0 !important; }
  .executive-briefing-title { font-size: 1.15rem !important; }

  /* ── Read-more clamp ────────────────────────────────────────────────────── */
  .m-clamp { position: relative; }
  .m-clamp:not(.is-open) .m-clamp-inner {
    max-height: 11.5em; overflow: hidden;
    mask-image: linear-gradient(#000 68%, transparent 100%);
    -webkit-mask-image: linear-gradient(#000 68%, transparent 100%);
  }
  .m-clamp-more {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 44px;
    background: none; border: 0; padding: 0; cursor: pointer;
    font-family: 'Inter', sans-serif; font-size: .75rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: #00ff00;
  }

  /* ── Link rows / tap targets ────────────────────────────────────────────── */
  a[style*="justify-content:space-between"] { min-height: 48px; }
  #salient-global-footer { padding-top: 2.5rem !important; }
  #salient-global-footer ul.footer-links a { min-height: 44px; display: flex !important; align-items: center; }
  #salient-global-footer ul.footer-links li { padding-bottom: 0 !important; margin-bottom: .35rem !important; }
  #salient-global-footer p { max-width: none !important; text-align: left !important; }
  #salient-global-footer ul.footer-socials a { width: 44px; height: 44px; }
  #salient-global-footer .footer-grid { gap: 2rem !important; margin-bottom: 2rem !important; }

  /* ── Generic overflow guards ────────────────────────────────────────────── */
  .m-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -1.25rem; padding: 0 1.25rem; }
  .m-tablewrap table { min-width: 640px; }
  img, video, svg { max-width: 100%; }
  .m-zoom { cursor: zoom-in; }
}

/* Phones only – tighter still */
@media (max-width: 480px) {
  .m-deck > * { flex: 0 0 86%; }
  .m-deck.m-deck--narrow > * { flex: 0 0 72%; }
  section { padding: 2.25rem 1rem !important; }
  .m-deck { margin-left: -1rem !important; margin-right: -1rem !important; padding-left: 1rem !important; padding-right: 1rem !important; }
  .sig-chips { margin-left: -1rem !important; margin-right: -1rem !important; padding-left: 1rem !important; padding-right: 1rem !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   4 · APP-SHELL PRIMITIVES – hidden on desktop, so desktop renders unchanged
   ═══════════════════════════════════════════════════════════════════════════ */
.m-tabbar { display: none; }
.m-deck-dots, .m-deck-hint, .m-clamp-more { display: none; }
@media (min-width: 1025px) { #mobile-drawer { display: none !important; } }

/* Pinch-zoom lightbox (all sizes; only opened by tapping a .m-zoom target) */
.m-lightbox {
  position: fixed; inset: 0; z-index: 200; display: none;
  background: rgba(1,4,17,.96); overflow: auto; touch-action: pinch-zoom;
  -webkit-overflow-scrolling: touch;
}
.m-lightbox.is-open { display: block; }
.m-lightbox img { display: block; margin: auto; min-width: 100%; padding: 3.5rem .5rem 2rem; }
.m-lightbox-close {
  position: fixed; top: .75rem; right: .75rem; z-index: 201;
  width: 44px; height: 44px; border-radius: 999px;
  background: #0c1323; border: 1px solid #1e2d45; color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.m-lightbox-hint {
  position: fixed; bottom: 1rem; left: 0; right: 0; text-align: center;
  font-family: 'Inter', sans-serif; font-size: .625rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #64748b;
}