/* WFJ mobile layout: keep content within the viewport and stack wide grids. */
body { overflow-wrap: break-word; }
img { max-width: 100%; }
@media (max-width: 1023px) {
  body { width: 100%; min-width: 0; }
  [data-sc-name="script-sandbox"] { width: 100%; min-width: 0; }
  div[style*="display: grid"] { min-width: 0; }
  div[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  div[style*="display: grid"] > * { min-width: 0; }
  div[style*="max-width: 1240px"], div[style*="max-width: 1040px"] { padding-left: 20px !important; padding-right: 20px !important; }
  div[style*="width:"]:not([style*="max-width"]):not([style*="position: absolute"]) { max-width: 100%; }
  .wfj-cta { flex-wrap: wrap; flex-shrink: 1 !important; gap: 10px !important; justify-content: flex-start; margin-left: 0 !important; }
  .wfj-nav { justify-content: flex-start !important; }
  header a { white-space: normal !important; }
  form { padding: 22px !important; }
  #contact > div > div { padding: 24px !important; gap: 24px !important; }
  h1 { font-size: clamp(32px, 8vw, 44px) !important; }
  h2 { font-size: clamp(26px, 7vw, 36px) !important; }
  a[href^="mailto:"] { overflow-wrap: anywhere; }
}

@media (max-width: 1023px) {
  .wfj-scroll-header { transition: transform 180ms ease; }
  .wfj-scroll-header.wfj-header-hidden { transform: translateY(-100%); pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wfj-scroll-header { transition: none; }
}

@media (max-width: 1023px) {
  #how div[style*='position: sticky'] { position: static !important; top: auto !important; }
}

/* Mobile header returns only with the top of the document. Keyboard resizing cannot reveal it over a form. */
@media (max-width: 1023px) {
  .wfj-scroll-header { position: static !important; top: auto !important; transform: none !important; transition: none !important; }
}