/* ================= PAGE ================= */
 .agencies-user {
     max-width: 1200px;
     margin: auto;
     padding: 1rem;
 }

 /* Header */
 .agencies-header {

     margin-block: 1.5rem;
 }

 .agencies-header h1 {
     font-size: 1.6rem;
     font-weight: 800;
     color: #333333;
 }

 .agencies-header p {
     font-size: 0.85rem;
     color: #6b7280;
     max-width: 600px;

 }

 /* Controls */
 .agencies-controls {
     display: grid;
     grid-template-columns: 2fr 1fr;
     gap: 0.6rem;
     margin-bottom: 1rem;
 }

 .agencies-controls input,
 .agencies-controls select {
     padding: 0.6rem 0.8rem;
     border-radius: 0.7rem;
     border: 1px solid #e5e7eb;
     font-size: 0.8rem;
 }

 select {
     color: black;
 }

 @media (max-width: 768px) {
     .agencies-controls {
         grid-template-columns: 1fr;
     }
 }

 /* Map + List */
 .agencies-layout {
     display: grid;
     grid-template-columns: 2fr 1fr;
     gap: 1rem;
 }

 @media (max-width: 900px) {
     .agencies-layout {
         grid-template-columns: 1fr;
     }
 }

 /* Map */
 #agenciesMap {
     height: 420px;
     border-radius: 1rem;
     overflow: hidden;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
 }

 /* remove leaflet branding */
 .leaflet-control-attribution {
     display: none !important;
 }

 /* List */
 .agencies-list {
     background: #fff;
     border-radius: 1rem;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
     padding: 0.6rem;
     max-height: 420px;
     overflow-y: auto;
 }

 .agency-item {
     padding: 0.6rem;
     border-radius: 0.7rem;
     cursor: pointer;
     transition: background 0.2s ease;
 }

 .agency-item:hover {
     background: rgba(59, 130, 246, 0.08);
 }

 .agency-item h3 {
     font-size: 0.85rem;
     margin-bottom: 0.2rem;
 }

 .agency-item span {
     font-size: 0.7rem;
     color: #6b7280;
     display: block;
 }

 /* Programmatic SEO text */
 .agencies-seo {
     margin-top: 2rem;
     font-size: 0.8rem;
     line-height: 1.8;
     color: #374151;
 }

 /* Breadcrumb */
 .breadcrumb {
     font-size: 13px;
     margin-bottom: 24px;
     color: #666;
 }

 .breadcrumb a {
     color: var(--brand-color);
     text-decoration: none;
 }

 .breadcrumb span {
     margin: 0 6px;
 }