/* Final footer on phones (chosen 2026-11-06, phone layout 4 "Centered"). Desktop and tablet keep Footer 3A from
   footers.css; everything here applies at 640px and below. Loaded after footers.css, so these rules win. */
@media (max-width: 640px) {
  /* the legal links appear once, in the bottom row */
  .fvm .fv-col li:has(> a[href="/privacy-policy"], > a[href="/terms-and-conditions"]) { display: none; }
  .fvm .fv-bottom { flex-direction: column; align-items: flex-start; gap: 2px; }
  .fvm .fv3-tile:hover { translate: none; box-shadow: none; }

  /* centered and short: quote button, phone and email, the main pages; services stay in the menu */
  .fvm4 { text-align: center; }
  .fvm4 > .container { display: flex; flex-direction: column; align-items: center; }
  .fvm4 :is(.fv3-grid, .fv3-about) { display: contents; }
  .fvm4 .fv3-about .brand { order: 1; display: inline-flex; --zl-h: 30px; }
  .fvm4 .fv3-about p { order: 2; margin: 12px auto 24px; font-size: .9375rem; }
  .fvm4 .fv3-tiles { order: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 20px; width: 100%; margin: 0 0 20px; }
  .fvm4 .fv3-cta { order: -1; flex: 1 0 100%; justify-content: center; min-height: 52px; margin-bottom: 10px; padding: 0 20px; border-radius: 999px; }
  .fvm4 .fv3-cta :is(.fv3-ic, small), .fvm4 .fv3-tile:not(.fv3-cta) small { display: none; }
  .fvm4 .fv3-tile:not(.fv3-cta) { gap: 6px; padding: 9px 0; background: none; }
  .fvm4 .fv3-tile:not(.fv3-cta) .fv3-ic { width: auto; height: auto; background: none; }
  .fvm4 .fv3-tile:not(.fv3-cta) .fv3-ic svg { width: 16px; height: 16px; }
  .fvm4 .fv3-tile:not(.fv3-cta) b { font-size: .9375rem; font-weight: 500; color: var(--primary); }
  .fvm4 .fv-col { order: 4; width: 100%; }
  .fvm4 .fv3-grid > :nth-child(2), .fvm4 .fv-col .fv-h { display: none; }
  .fvm4 .fv-col ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 16px; }
  .fvm4 .fv-col li { font-size: .9375rem; }
  .fvm4 .fv-col li a { color: var(--text); }
  .fvm4 .fv3-about .socials { order: 5; justify-content: center; margin: 24px 0 28px; }
  .fvm4 .fv-bottom { order: 6; align-self: stretch; align-items: center; }
}