/* RA Strata one-page site — mobile overrides.
   Components use inline styles, so these rules use !important and target the
   stable [data-screen-label] wrappers. */
/* Header: cap the fixed desktop width so the CTA stays on-screen at every viewport */
[data-screen-label="Header"] header { max-width: 100%; }
[data-screen-label="Header"] header > div { max-width: min(var(--container-max), 100%); }

@media (max-width: 768px) {
  /* Header */
  [data-screen-label="Header"] header { width: 100% !important; height: auto !important; }
  [data-screen-label="Header"] header > div { padding: 0 20px !important; height: 72px !important; }
  [data-screen-label="Header"] header img { height: 48px !important; width: auto !important; }
  [data-screen-label="Header"] button { padding: 12px 20px !important; min-height: 44px !important; }

  /* Hero */
  [data-screen-label="Hero"] section > div { grid-template-columns: 1fr !important; padding: 48px 24px !important; gap: 32px !important; }
  [data-screen-label="Hero"] h1 { font-size: 34px !important; line-height: 42px !important; }
  [data-screen-label="Hero"] section img { height: 240px !important; }

  /* 5 simple steps */
  [data-screen-label="5 simple steps"] section > div { padding: 48px 24px !important; }
  [data-screen-label="5 simple steps"] h2 { font-size: 30px !important; line-height: 38px !important; }
  [data-screen-label="5 simple steps"] section > div > div { grid-template-columns: 1fr !important; max-width: 100% !important; }

  /* Trust band + What we manage */
  [data-screen-label="What we manage"] > section:first-of-type > div { grid-template-columns: repeat(2, 1fr) !important; gap: 28px !important; padding: 40px 24px !important; }
  [data-screen-label="What we manage"] > section:last-of-type > div { padding: 48px 24px !important; }
  [data-screen-label="What we manage"] > section:last-of-type > div > div { grid-template-columns: 1fr !important; }
  [data-screen-label="What we manage"] h2 { font-size: 30px !important; line-height: 38px !important; }

  /* Ready to move */
  [data-screen-label="Ready to move"] section > div:last-child { padding: 48px 24px !important; }
  [data-screen-label="Ready to move"] h2 { font-size: 32px !important; line-height: 40px !important; }
  [data-screen-label="Ready to move"] a { font-size: 16px !important; }

  /* Get a quote form */
  [data-screen-label="Get a quote form"] #quote > div { padding: 40px 16px !important; }
  [data-screen-label="Get a quote form"] form > div { grid-template-columns: 1fr !important; }
  [data-screen-label="Get a quote form"] input,
  [data-screen-label="Get a quote form"] select { max-width: 100% !important; }
  [data-screen-label="Get a quote form"] h2 { font-size: 24px !important; }

  /* Footer */
  [data-screen-label="Footer"] footer > div { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; padding: 32px 24px !important; }
  [data-screen-label="Footer"] footer > div > div { flex-wrap: wrap !important; }
}