/* PhotosbyB4 "Service Area" section + Leaflet map styling (navy/pink, dark-moody). */
.svc-section { background: #141425; padding: 80px 24px; }
.svc-inner { max-width: 1120px; margin: 0 auto; }
.svc-head { text-align: center; max-width: 700px; margin: 0 auto 40px; }
.svc-head .section-script { color: #ff71cb; }
.svc-head h2 { color: #fff; margin: 2px 0 14px; }
.svc-head p {
  color: rgba(255,255,255,0.7); font-family: 'Karla', sans-serif;
  font-size: 16px; line-height: 1.65; margin: 0;
}

.svc-layout { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: stretch; }
@media (min-width: 900px) { .svc-layout { grid-template-columns: 300px 1fr; } }

.svc-aside { display: flex; flex-direction: column; }
.svc-aside__label {
  font-family: 'Rubik', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; color: #ff9ee0; margin-bottom: 14px;
}
.svc-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.area-chip {
  font-family: 'Rubik', sans-serif; font-size: 13.5px; font-weight: 500;
  color: #fff; background: #2d2d4a; border: 1px solid rgba(255,113,203,0.35);
  border-radius: 999px; padding: 8px 15px; cursor: pointer; transition: background .2s, border-color .2s, color .2s;
}
.area-chip:hover, .area-chip:focus-visible { border-color: #ff71cb; background: #3a3a54; }
.area-chip.active { background: #ff71cb; color: #141425; border-color: #ff71cb; }
.area-chip--hq { border-color: rgba(255,113,203,0.6); }
.svc-aside__note {
  margin-top: 18px; font-family: 'Karla', sans-serif; font-size: 13.5px;
  line-height: 1.6; color: rgba(255,255,255,0.55);
}

/* Map container */
.svcmap {
  width: 100%; aspect-ratio: 16 / 10; min-height: 440px;
  border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 22px 50px -24px rgba(10,10,25,0.7); background: #1a1a2e;
  position: relative; z-index: 0;
}
@media (max-width: 700px) { .svcmap { min-height: 360px; aspect-ratio: 3 / 4; } }

/* Leaflet overrides */
.svcmap .leaflet-tile-pane { filter: grayscale(.35) contrast(1.02) brightness(1.02); }
.svcmap .leaflet-container { font-family: 'Rubik', sans-serif; background: #1a1a2e; }
.svcmap .leaflet-control-attribution { font-size: 10px; }
.svcmap .leaflet-control-attribution a { color: #c2408f; }
.svcpin svg { display: block; filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); transition: transform .2s ease; transform-origin: bottom center; }
.svcpin.hi svg { transform: scale(1.3); }
.svc-pop {
  background: #fff; color: #1a1a2e; font-family: 'Rubik', sans-serif; font-weight: 600;
  font-size: 12px; border: none; border-radius: 8px; box-shadow: 0 3px 10px rgba(0,0,0,.2); padding: 3px 9px;
}
.svc-pop::before { display: none; }