/* Phone layouts made by mobile.js. Max-width 767px only; desktop is untouched. */
@media (max-width: 767px) {
  /* clients: two moving logo rows replace the sky map and the sector boxes */
  .m-has-mq .sky, .m-has-mq .sectors { display: none !important; }
  .m-mq { display: grid; gap: 14px; margin-top: 28px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
  .m-mq-track { display: flex; width: max-content; gap: 12px; animation: m-mq 46s linear infinite; }
  .m-mq-track.rev { animation-direction: reverse; animation-duration: 52s; }
  .m-mq.still .m-mq-track { animation: none; flex-wrap: wrap; width: auto; }
  /* black and white, as on desktop: the files are dark marks on white, so invert and screen them onto the dark tile */
  .m-mq-logo { flex: none; width: 136px; height: 80px; display: grid; place-items: center; padding: 14px 18px; border-radius: 16px; background: oklch(0.17 0.008 358); border: 1px solid oklch(1 0 0 / .1); isolation: isolate; }
  .m-mq-logo img { max-width: 100%; max-height: 44px; width: auto; height: auto; object-fit: contain; filter: invert(1) grayscale(1) contrast(1.3); mix-blend-mode: screen; opacity: .92; }
  .m-mq-logo.dark img { filter: none; mix-blend-mode: normal; }
  @keyframes m-mq { to { transform: translateX(-50%); } }

  /* How We Think (One Idea Carries Every Piece of Work): desktop only */
  section.think { display: none !important; }

  /* home LeadForge band: the dashboard object kept, framed in its own card so it no longer spills off the screen */
  .band-lf .lf-stage { height: 460px; margin-top: 28px; border-radius: 24px; overflow: hidden; background: radial-gradient(80% 70% at 60% 30%, oklch(0.3 0.12 358 / .55), transparent 70%), oklch(0.15 0.008 358); box-shadow: 0 40px 70px -40px rgb(0 0 0 / .6); }
  .band-lf .lf-flow { left: 0; width: 100%; opacity: .7; }
  .band-lf .lf-3d { width: 100%; }
  .band-lf .lf-dash { width: 150%; left: -24%; top: 30%; opacity: .45; }
  .band-lf .lf-card { width: 60%; right: auto; left: 20%; top: 7%; box-shadow: 0 40px 70px -24px rgb(0 0 0 / .8); }
  .band-lf .lf-stage figcaption { left: 18px; right: 18px; bottom: 14px; color: oklch(0.75 0.01 358); }

  /* services: swipe cards with the service images replace the type list */
  .m-has-rail .svc-list, .m-has-rail .svc-media, .m-has-rail .svc-gl { display: none !important; }
  .m-rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad, 20px); padding: 4px var(--pad, 20px) 8px; margin-inline: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .m-rail::-webkit-scrollbar { display: none; }
  .m-card { position: relative; flex: 0 0 82%; aspect-ratio: 4 / 5; scroll-snap-align: start; border-radius: 22px; overflow: hidden; color: #fff; text-decoration: none; isolation: isolate; background: #0d0b0c; box-shadow: 0 30px 60px -36px rgb(0 0 0 / .6); }
  .m-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.04); transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
  .m-card:active img { transform: scale(1.1); }
  .m-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(10 8 9 / .92) 0%, rgb(10 8 9 / .45) 42%, transparent 70%); }
  .m-card-b { position: absolute; left: 20px; right: 20px; bottom: 22px; display: grid; gap: 8px; }
  .m-card-b small { font: 400 11px/1 var(--f-mono, ui-monospace, monospace); letter-spacing: .16em; color: oklch(0.85 0.01 358); }
  .m-card-b b { font: 700 1.9rem/1 var(--f-display, sans-serif); letter-spacing: -0.03em; }
  .m-card-b > span { color: oklch(0.85 0.01 358); font-size: .98rem; line-height: 1.4; }
  .m-card-b i { font-style: normal; margin-top: 6px; display: inline-flex; align-items: center; gap: 8px; font: 600 .9rem/1 var(--f-body, sans-serif); color: #fff; }
  .m-card-b i::after { content: "→"; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: oklch(0.6 0.244 358.6); }
  .m-dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
  .m-dots i { width: 6px; height: 6px; border-radius: 3px; background: oklch(0.5 0.01 358 / .45); transition: width .4s cubic-bezier(.16, 1, .3, 1), background-color .4s; }
  .m-dots i.on { width: 22px; background: oklch(0.6 0.244 358.6); }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .m-mq-track { animation: none; }
}