/* ADJST marketing site — responsive layer.
   Pages are inline-styled; React serializes inline styles with a space after
   each colon ("padding: 96px 48px"), so selectors below match that form and
   use !important to win over the inline declaration. */

html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video { max-width: 100%; }

/* ---------- ≤ 1080px ---------- */
@media (max-width: 1080px) {
  [style*="max-width: 1180px"] { padding-left: 32px !important; padding-right: 32px !important; }
}

/* ---------- ≤ 900px : single column ---------- */
@media (max-width: 900px) {
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  [style*="max-width: 1180px"] { padding-left: 22px !important; padding-right: 22px !important; }
  [style*="padding: 96px 48px"],
  [style*="padding: 92px 48px"],
  [style*="padding: 88px 48px"],
  [style*="padding: 80px 48px"],
  [style*="padding: 72px 48px"],
  [style*="padding: 64px 48px"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  [style*="padding: 88px 48px 92px"] { padding: 52px 22px 56px !important; }
  [style*="padding: 52px 44px 40px"] { padding: 34px 22px 40px !important; }
  [style*="padding: 80px 48px 44px"] { padding-top: 56px !important; padding-bottom: 36px !important; }
  [style*="padding: 20px 48px"] { padding-left: 22px !important; padding-right: 22px !important; }

  /* column rules become stack separators */
  [style*="grid-template-columns"][style*="gap: 0px"] > * {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 28px !important;
    border-right: none !important;
  }
  [style*="grid-template-columns"][style*="gap: 0px"] > * + * {
    border-top: 1px solid rgba(128, 136, 150, 0.3) !important;
    padding-top: 28px !important;
  }

  [style*="border-left: 1px solid rgba(255, 255, 255, 0.1)"] {
    border-left: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  [style*="min-width: 150px"] { min-width: 0 !important; }

  [style*="gap: 64px"] { gap: 40px !important; }
  [style*="gap: 56px"] { gap: 34px !important; }
  [style*="gap: 48px"] { gap: 32px !important; }
  [style*="gap: 36px"] { gap: 26px !important; }

  /* proportional bars stack */
  [style*="display: flex"][style*="height: 72px"],
  [style*="display: flex"][style*="height: 52px"] {
    height: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  [style*="display: flex"][style*="height: 72px"] > *,
  [style*="display: flex"][style*="height: 52px"] > * {
    flex: none !important;
    padding: 14px 16px !important;
    border-right: none !important;
  }

  /* type scale — every inline size above 26px in use on the site */
  [style*="font-size: 66px"] { font-size: 42px !important; }
  [style*="font-size: 64px"] { font-size: 41px !important; }
  [style*="font-size: 62px"] { font-size: 40px !important; }
  [style*="font-size: 60px"] { font-size: 40px !important; }
  [style*="font-size: 56px"] { font-size: 40px !important; }
  [style*="font-size: 52px"] { font-size: 36px !important; }
  [style*="font-size: 48px"] { font-size: 36px !important; }
  [style*="font-size: 46px"] { font-size: 32px !important; }
  [style*="font-size: 44px"] { font-size: 31px !important; }
  [style*="font-size: 42px"] { font-size: 30px !important; }
  [style*="font-size: 40px"] { font-size: 29px !important; }
  [style*="font-size: 38px"] { font-size: 28px !important; }
  [style*="font-size: 32px"] { font-size: 26px !important; }
  [style*="font-size: 30px"] { font-size: 24px !important; }
  [style*="font-size: 28px"] { font-size: 23px !important; }
  [style*="font-size: 26px"] { font-size: 22px !important; }
  [style*="font-size: 24px"] { font-size: 21px !important; }
  [style*="font-size: 22px"] { font-size: 19px !important; }
  [style*="font-size: 21px"] { font-size: 19px !important; }

  /* article banners, featured panel and list thumbnails */
  [style*="height: 440px"] { height: 240px !important; }
  [style*="min-height: 400px"] { min-height: 220px !important; }
  [style*="width: 112px"][style*="height: 88px"] { width: 100% !important; height: 176px !important; }
  [style*="padding: 52px 48px"] { padding: 30px 22px 34px !important; }

  /* contact modal */
  [style*="max-width: 640px"] { max-width: 100% !important; }
  [style*="padding: 36px 40px 26px"] { padding: 26px 22px 20px !important; }
  [style*="padding: 30px 40px 36px"] { padding: 22px 22px 28px !important; }
}

/* ---------- the responsibility dial (home §04, /services §3) ---------- */
@media (max-width: 900px) {
  .dial-cols { grid-template-columns: 1fr !important; gap: 14px !important; }
  .dial-cols > div > div:first-child {
    height: 44px !important;
    flex-direction: row !important;
    border-bottom: 1px solid rgba(33, 40, 54, 0.16) !important;
  }
  .dial-cols > div > div:first-child > div { padding: 0 12px !important; }
  .dial-cols > div > div:last-child { border-top: 1px solid rgba(33, 40, 54, 0.16) !important; }
  .beat { padding-left: 0 !important; padding-right: 0 !important; }
}

/* ---------- 620–900px : card grids keep two columns ---------- */
@media (min-width: 620px) and (max-width: 900px) {
  [style*="repeat(4, 1fr)"][style*="gap: 24px"],
  [style*="repeat(4, 1fr)"][style*="gap: 20px"],
  [style*="repeat(3, 1fr)"][style*="gap: 24px"],
  [style*="repeat(3, 1fr)"][style*="gap: 20px"] { grid-template-columns: 1fr 1fr !important; }
}

/* ---------- ≤ 560px : phone ---------- */
@media (max-width: 560px) {
  [style*="max-width: 1180px"] { padding-left: 18px !important; padding-right: 18px !important; }
  [style*="padding: 88px 48px 92px"] { padding: 44px 18px 48px !important; }
  [style*="padding: 52px 44px 40px"] { padding: 30px 18px 36px !important; }
  [style*="padding: 20px 48px"] { padding-left: 18px !important; padding-right: 18px !important; }

  a[style*="display: inline-flex"][style*="padding: 15px 24px"],
  a[style*="display: inline-flex"][style*="padding: 14px 24px"],
  a[style*="display: inline-flex"][style*="padding: 13px 24px"] {
    width: 100% !important;
    justify-content: space-between !important;
  }

  [style*="font-size: 66px"], [style*="font-size: 64px"], [style*="font-size: 62px"], [style*="font-size: 60px"] { font-size: 33px !important; }
  [style*="font-size: 56px"], [style*="font-size: 52px"], [style*="font-size: 48px"] { font-size: 32px !important; }
  [style*="font-size: 46px"], [style*="font-size: 44px"], [style*="font-size: 42px"] { font-size: 27px !important; }
  [style*="font-size: 40px"], [style*="font-size: 38px"] { font-size: 26px !important; }
  [style*="font-size: 32px"], [style*="font-size: 28px"] { font-size: 23px !important; }

  [style*="display: flex"][style*="gap: 16px"][style*="padding: 16px 0px"] { flex-wrap: wrap !important; }
  [style*="display: flex"][style*="gap: 16px"][style*="padding: 16px 0px"] > span:first-child { width: 100% !important; }

  [style*="padding: 56px 24px"] { padding: 0px !important; }
}