/* ============================================================
   RESPONSIVE PATCH: tablet + phone fixes shared by every page.
   Kept as one block so it can be lifted into a shared stylesheet later.
   ============================================================ */

/* Narrow side gutters on tablets and phones (a few pages never switched) */
@media (max-width: 960px) {
  :root { --gutter: var(--gutter-sm, 24px); }
}

/* Header: hamburger up to 1023px, one-line compact nav from 1024px to 1169px */
@media (min-width: 961px) and (max-width: 1023px) {
  html body .nav-menu-btn { display: inline-flex !important; }
  html body .nav .nav-links, html body .nav .nav-cta, html body .nav .nav-phone { display: none !important; }
  html body .mobile-menu { display: flex !important; }
}
@media (min-width: 1024px) and (max-width: 1169px) {
  html body .nav .nav-phone { display: none !important; }
  html body .nav-left { gap: 32px !important; }
  html body .nav-links { gap: 16px !important; }
  html body .nav-links a, html body .nav-login, html body .nav .nav-cta { white-space: nowrap; }
}

/* Footer: columns can shrink and wrap, badge keeps its proportions */
@media (max-width: 440px) {
  html body .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 32px 24px !important; }
  html body .footer-col a { white-space: normal !important; }
}
@media (max-width: 768px) {
  html body .footer-bottom { flex-direction: column-reverse !important; align-items: flex-start !important; gap: 24px !important; }
  html body .footer-right { justify-content: flex-start !important; }
  html body .footer-bbb { height: 68px !important; width: auto !important; flex-shrink: 0 !important; }
}

/* Buttons: long labels wrap on phones instead of pushing the page wider */
@media (max-width: 480px) {
  html body .pill, html body .svc-btn { white-space: normal; text-align: center; max-width: 100%; }
}

/* Partner pages: single-column hero may shrink to the screen, long headline wraps below 1440px */
@media (max-width: 860px) { html body .hero-grid > * { min-width: 0; } }
html body .matter-card-head { flex-wrap: wrap; row-gap: 8px; }
@media (max-width: 1439px) {
  html body .attorney-hero h1 { white-space: normal; text-wrap: balance; }
}

/* Service hub + pillar pages */
html body .svc-involved-grid { grid-template-columns: 320px minmax(0, 1fr); }
@media (max-width: 1120px) {
  html body .svc-involved-grid .svc-btn { white-space: normal; max-width: 100%; text-align: left; line-height: 1.35; border-radius: var(--r-pill); }
}
@media (max-width: 800px) {
  html body .svc-involved-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 920px) {
  html body .svc-why-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 900px) {
  html body .cat-row { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 760px) {
  html body .svc-wrap { padding-left: 20px !important; padding-right: 20px !important; }
}
@media (max-width: 700px) {
  html body .svc-steps-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }
}

/* Partner hub cards stack on phones */
@media (max-width: 640px) {
  html body .partner-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Closing CTA band — the site-wide page closer (54 other pages use this) */
/* ============================================================
   CLOSING CTA BAND  (same as the partner pages)
   ============================================================ */
.close-cta{background: var(--paper); border-top: 1px solid var(--ink-10); padding: clamp(48px, 6.5vw, 96px) 0;}
.close-cta-wrap{width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter);}
.close-cta-inner{text-align: center; max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--s-5);}
.close-cta-eyebrow{font-family: var(--font-meta); font-weight: 500; font-size: var(--fs-meta); letter-spacing: var(--ls-meta); text-transform: uppercase; color: var(--earthy, #465D38);}
.close-cta h2{font-family: var(--font-serif); font-weight: 400; font-size: clamp(32px, 4vw, 52px); line-height: var(--lh-display, 1.10); letter-spacing: var(--ls-tight); color: var(--fg); margin: 0;}
.close-cta p{font-family: var(--font-sans); font-weight: 350; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: var(--fg-2); margin: 0;}
.close-cta .pill{all: unset; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-top: var(--s-2); padding: 18px 32px; border-radius: var(--r-pill); background: var(--light-green, #DBE5CF); color: var(--ink); font-family: var(--font-sans); font-weight: 350; font-size: 17px; letter-spacing: 0.01em; line-height: 1; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);}
.close-cta .pill .dot{width: 6px; height: 6px; border-radius: var(--r-pill); flex-shrink: 0; background: var(--ink); transition: background var(--dur-fast) var(--ease-out);}
.close-cta .pill:hover{background: var(--ink); color: var(--white);}
.close-cta .pill:hover .dot{background: var(--white);}
.close-cta .pill:focus-visible{outline: 2px solid var(--ink); outline-offset: 3px;}
@media (max-width: 960px){
  .close-cta-wrap{padding: 0 var(--gutter-sm);}
}
@media (max-width: 480px){
  .close-cta .pill{white-space: normal; text-align: center; padding: 16px 24px;}
}