/* Cristal — responsive overrides.
   The pages come from a desktop-1440 design with inline styles, so these
   rules target those inline values and win with !important. */

@media (max-width: 1200px) {
  [style*="grid-template-columns: repeat(5"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  section, footer { padding-left: 40px !important; padding-right: 40px !important; }
  header { padding: 0 40px !important; }
  header > nav { gap: 24px !important; }
}

@media (max-width: 900px) {
  html, body { overflow-x: hidden; }
  body > div { min-height: auto !important; }

  /* Header: logo row, then the nav links + phone on a second row. */
  header { height: auto !important; padding: 14px 20px !important; flex-wrap: wrap !important; gap: 12px !important; }
  header > nav { width: 100%; flex-wrap: wrap; justify-content: space-between !important; gap: 12px 18px !important; font-size: 13px !important; }
  header > nav > a[href^="tel:"] { height: 40px !important; padding: 0 14px !important; font-size: 13px !important; width: 100%; justify-content: center; }

  /* Sections and grids collapse to one column. */
  section, footer { padding: 44px 20px !important; }
  [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; }
  [style*="grid-template-columns"] > * { min-width: 0; }
  [style*="max-width: 540px"], [style*="max-width: 700px"], [style*="max-width: 820px"] { max-width: none !important; }

  /* Type scale. */
  h1 { font-size: 34px !important; line-height: 1.12 !important; }
  h2 { font-size: 26px !important; }
  [style*="font-size: 20px"], [style*="font-size: 19px"], [style*="font-size: 18px"] { font-size: 17px !important; }
  [style*="font-size: 30px"] { font-size: 26px !important; }

  /* Image placeholders: shorter, no offset frame. */
  [style*="position: absolute; right: -24px"] { display: none !important; }
  [style*="height: 480px"] { height: 220px !important; }
  [style*="height: 360px"], [style*="height: 320px"], [style*="height: 280px"] { height: 200px !important; }

  /* Trust strip. */
  section[style*="height: 76px"] { height: auto !important; padding: 14px 20px !important; flex-wrap: wrap; gap: 12px 14px !important; font-size: 13px !important; }

  /* CTA bands and other side-by-side rows stack. */
  section[style*="justify-content: space-between"] { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; }
  section [style*="justify-content: space-between"] { flex-wrap: wrap; gap: 14px !important; }
  [style*="display: flex; gap: 16px; align-items: center"] { flex-wrap: wrap; }

  /* Buttons. */
  [style*="height: 56px"] { height: 50px !important; padding: 0 20px !important; font-size: 14px !important; }
  [style*="min-height: 250px"] { min-height: auto !important; }

  /* Contact form and info cards. */
  form { padding: 24px 18px !important; }
  a[href^="mailto:"] [style*="font-size: 18px"] { font-size: 15px !important; overflow-wrap: anywhere; }
  [style*="padding: 24px 28px"] { padding: 18px 16px !important; }

  /* Footer. */
  footer > div:last-child { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
}

@media (min-width: 600px) and (max-width: 900px) {
  [style*="grid-template-columns: repeat(5"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  header > nav > a[href^="tel:"] { width: auto; }
}