/* ============================================================
   Responsive layer — added for phones and tablets.
   The design itself is untouched: same colors, type, spacing
   tokens and copy. Only column counts and a few paddings change
   below 1100px. Every rule here is inside a media query, so the
   desktop rendering is byte-for-byte what it was before.
   ============================================================ */

/* Inline styles set these columns, so overrides need !important. */

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .split,
  .quote-layout      { grid-template-columns: 1fr !important; gap: var(--space-9) !important; }
  .grid-3            { grid-template-columns: repeat(2, 1fr) !important; }
  .footer-grid       { grid-template-columns: 1.4fr 1fr !important; }
  .timeline-row      { grid-template-columns: 140px 1fr !important; gap: var(--space-6) !important; }
}

/* ---------- Phone ---------- */
@media (max-width: 760px) {
  .grid-2,
  .grid-3,
  .quote-grid,
  .quote-types,
  .footer-grid       { grid-template-columns: 1fr !important; }

  .timeline-row      { grid-template-columns: 1fr !important; gap: var(--space-4) !important; }

  /* A field that spanned both columns must not span two tracks that no longer exist. */
  .quote-grid > *    { grid-column: auto !important; }

  /* Header: let the nav wrap under the wordmark instead of overflowing. */
  .hdr-inner         { height: auto !important; flex-wrap: wrap !important;
                       padding-top: var(--space-5) !important; padding-bottom: var(--space-5) !important;
                       gap: var(--space-5) !important; }
  .hdr-nav           { margin-left: 0 !important; width: 100% !important;
                       flex-wrap: wrap !important; gap: var(--space-6) !important;
                       order: 3 !important; }

  /* Submit row: button above the helper text rather than beside it. */
  .quote-actions     { flex-direction: column !important; align-items: flex-start !important; }

  /* Trim the generous desktop side padding so text isn't in a narrow gutter. */
  main > section,
  main,
  .hdr-inner,
  .footer-grid       { padding-left: var(--space-6) !important; padding-right: var(--space-6) !important; }

  /* Long headline type scaled down; ratios and font stay as designed. */
  :root {
    --text-5xl: 40px;
    --text-4xl: 33px;
    --text-3xl: 28px;
    --text-2xl: 24px;
  }
}

/* Never let a wide element force sideways scrolling of the whole page. */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg   { max-width: 100%; }