/* Mobile + tablet responsiveness. The site is built with inline styles, so these
   overrides target the inline values by substring and use !important to win. */

/* Softer charcoal text instead of near-black */
:root { --ink-900: #3f443d; --ink-800: #4f544b; }

/* Nav labels never wrap mid-phrase */
header nav > a { white-space: nowrap; }

/* In-page anchors must clear the sticky header (which grew with the larger logo) */
section { scroll-margin-top: 160px !important; }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  [style*="repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="repeat(5, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="repeat(3, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="1.5fr 1fr 1fr 1.2fr"] { grid-template-columns: repeat(2, 1fr) !important; }
  [style*="1.05fr 0.95fr"], [style*="300px 1fr"] { grid-template-columns: 1fr !important; }
  [style*="px 32px"] { padding-inline: 24px !important; }
}

/* ---------- Header collapses before the nav can overflow ---------- */
@media (max-width: 1024px) {
  header > div:has(nav)[style*="px 32px"] {
    flex-direction: column !important;
    gap: 10px !important;
    padding-block: 10px !important;
  }
  header > div:has(nav) img[style*="height: 124px"] { height: 110px !important; }
  header nav {
    width: 100% !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  header nav::-webkit-scrollbar { display: none; }
  header nav > a { flex: 0 0 auto; white-space: nowrap; }
  header nav > button { flex: 0 0 auto; white-space: nowrap !important; }
  section { scroll-margin-top: 188px !important; }
}

/* ---------- Phone ---------- */
@media (max-width: 640px) {
  :root {
    --text-4xl: 2.25rem;
    --text-3xl: 1.875rem;
    --text-2xl: 1.5rem;
    --text-xl: 1.3125rem;
    --text-lg: 1.1875rem;
    --text-md: 1.0625rem;
  }
  /* every multi-column grid collapses */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* tighten section padding (generic first, specific values after) */
  [style*="px 32px"] { padding-inline: 20px !important; }
  [style*="padding: 100px 32px"] { padding: 56px 20px !important; }
  [style*="padding: 84px 32px 92px"] { padding: 32px 20px 52px !important; }
  [style*="padding: 88px 32px"] { padding: 56px 20px !important; }
  [style*="padding: 72px 32px 80px"] { padding: 44px 20px 52px !important; }
  [style*="padding: 72px 32px 60px"] { padding: 44px 20px 40px !important; }
  [style*="padding: 72px 32px 40px"] { padding: 44px 20px 24px !important; }
  [style*="padding: 64px 32px 60px"] { padding: 36px 20px 40px !important; }
  [style*="padding: 40px 32px 88px"] { padding: 24px 20px 52px !important; }
  [style*="padding: 72px 32px 88px"] { padding: 44px 20px 52px !important; }
  [style*="padding: 56px 32px"] { padding: 36px 20px !important; }

  /* header: logo smaller on phones; nav row handled in the 1024px block */
  header img[style*="height: 124px"] { height: 72px !important; }
  section { scroll-margin-top: 150px !important; }
  footer img[style*="height: 58px"] { height: 46px !important; }
  [style*="padding: 12px 32px"] { padding: 10px 20px !important; }

  /* dialog fits the viewport; GHL form keeps its own height */
  [role="dialog"] { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; }

  /* stop wide media boxes forcing horizontal scroll */
  img, iframe { max-width: 100% !important; }

  /* long-label buttons wrap instead of overflowing */
  button { max-width: 100% !important; white-space: normal !important; }
  header nav > button { white-space: nowrap !important; }
}

/* ---------- Small phone ---------- */
@media (max-width: 400px) {
  :root { --text-4xl: 2rem; --text-3xl: 1.6875rem; }
  [style*="px 32px"] { padding-inline: 16px !important; }
}