/* MGS Roofing — town page extras (nearby-town chips + FAQ accordion). Classes start with mga-. */
.mga-chips{display:flex;flex-wrap:wrap;gap:.6rem}
.mga-chip{display:inline-flex;align-items:center;gap:.4rem;background:#fff;border:1px solid #E2E8F0;border-radius:999px;padding:.5rem .95rem;font-size:.85rem;font-weight:600;color:#0F172A;box-shadow:0 4px 12px -8px rgba(15,23,42,.35);transition:border-color .2s,color .2s}
.mga-chip:hover{border-color:#0C60A8;color:#0C60A8}
.mga-chip svg{width:.9rem;height:.9rem;color:#0C60A8}
.mga-faq{max-width:48rem;display:flex;flex-direction:column;gap:.6rem}
.mga-faq details{background:#fff;border:1px solid #E2E8F0;border-radius:.8rem;padding:0 1.1rem;box-shadow:0 6px 16px -12px rgba(15,23,42,.35)}
.mga-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 0;font-weight:600;color:#0F172A}
.mga-faq summary::-webkit-details-marker{display:none}
.mga-faq summary::after{content:"+";font-size:1.3rem;line-height:1;color:#0C60A8;transition:transform .2s}
.mga-faq details[open] summary::after{transform:rotate(45deg)}
.mga-faq details p{color:#475569;line-height:1.6;padding:0 0 1rem;margin:0}
.mga-facts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.mga-fact{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#084C85;background:#EAF2FB;border-radius:999px;padding:.3rem .7rem}
.mga-county h2{font-size:1.15rem;font-weight:700;color:#0F172A;margin:0 0 .8rem}
.mga-county{margin-bottom:2rem}