/* ============================================================
   Bridge for pages whose body content predates the new design:
   shared header/footer and the photo hero come from site-chrome.css
   and pg.css; this brings the older sections onto the same type,
   colour and phone behaviour.
   ============================================================ */
body.pg-legacy { font-family: var(--pg-lato); color: var(--pg-ink); }
.pg-old { font-family: var(--pg-lato); }
.pg-old h2, .pg-old h3, .pg-old h4 { font-family: var(--pg-pop); font-weight: 600; color: var(--pg-ink); letter-spacing: 0; }
.pg-old h2 { font-size: clamp(22px, 2.4vw, 32px); line-height: 1.4; }
.pg-old h3 { line-height: 1.45; }
.pg-old p, .pg-old li { font-family: var(--pg-lato); }
.pg-old img, .pg-old iframe, .pg-old video { max-width: 100%; }
.pg-old a[class*="btn"], .pg-old button[class*="btn"] { font-family: var(--pg-pop); }

/* phones: the older pages lay grids out with inline styles and no breakpoints */
@media (max-width: 639px) {
  .pg-old [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  .pg-old [style*="padding: 60px"], .pg-old [style*="padding:60px"] { padding-top: 40px !important; padding-bottom: 40px !important; }
  .pg-old table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pg-old h2 { font-size: 22px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .pg-old [style*="repeat(3"], .pg-old [style*="repeat(4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
.pg-old > .pg-hero { margin-bottom: 28px; }
@media (min-width: 1024px) { .pg-old > .pg-hero { margin-bottom: 40px; } }