/* Service Area styles — appended */

.section--area{
  background: var(--paper);
}
.area{
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 2rem;
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--rad-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
@media (max-width: 991.98px){
  .area{ grid-template-columns: 1fr; }
}

/* Map */
.area__map{
  position: relative;
  background:
    radial-gradient(circle at 50% 50%, rgba(28,48,112,.55), transparent 60%),
    linear-gradient(160deg, var(--navy-950), var(--navy-800));
  min-height: 580px;
  padding: 2rem;
  overflow: hidden;
  isolation: isolate;
}
.area__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(circle at 60% 55%, #000 0%, #000 50%, transparent 90%);
  -webkit-mask-image: radial-gradient(circle at 60% 55%, #000 0%, #000 50%, transparent 90%);
}
.area__glow{
  position:absolute; left:60%; top:55%;
  width: 70%; height: 70%;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(226,36,27,.22), transparent 60%);
  pointer-events: none;
  filter: blur(20px);
}

/* Radar */
.area__radar{
  position: absolute;
  left: 60%; top: 55%;
  width: clamp(380px, 70%, 520px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
}
.area__ring{
  position:absolute; inset:0;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,.18);
}
.area__ring--1{ inset: 35%; border-color: rgba(226,36,27,.55); border-style: solid; }
.area__ring--2{ inset: 22%; border-color: rgba(255,255,255,.22); }
.area__ring--3{ inset: 10%; border-color: rgba(255,255,255,.14); }
.area__ring--4{ inset: 0%;  border-color: rgba(255,255,255,.08); }
.area__sweep{
  position:absolute; inset:0;
  border-radius:50%;
  background: conic-gradient(from 0deg,
    rgba(226,36,27,0) 0deg,
    rgba(226,36,27,0) 300deg,
    rgba(226,36,27,.55) 355deg,
    rgba(226,36,27,0) 360deg);
  animation: areaSweep 4s linear infinite;
  mask-image: radial-gradient(circle, #000 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle, #000 60%, transparent 100%);
}
@keyframes areaSweep{ to { transform: rotate(360deg); } }

/* Dispatch points */
.area__pt{
  position:absolute;
  left: var(--x); top: var(--y);
  width: 10px; height: 10px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255,255,255,.15), 0 0 14px rgba(255,255,255,.6);
  animation: ptBlink 3s ease-in-out infinite;
  animation-delay: var(--d);
}
.area__pt::after{
  content: attr(data-label);
  position:absolute; left: 16px; top: -6px;
  font: 700 .68rem/1 Manrope, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  white-space: nowrap;
  background: rgba(10,19,48,.7);
  border: 1px solid rgba(255,255,255,.14);
  padding: .3rem .5rem;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
@keyframes ptBlink{
  0%, 100%{ opacity: 1; transform: scale(1); }
  50%{ opacity: .55; transform: scale(.85); }
}

/* HQ centerpiece */
.area__hq{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%,-50%);
  width: 18px; height: 18px;
}
.area__hq-dot{
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(226,36,27,.35), 0 0 30px rgba(226,36,27,.7);
  position:relative;
  z-index: 3;
}
.area__hq-pulse, .area__hq-pulse--lg{
  position:absolute; inset:0;
  border-radius:50%;
  border: 1px solid rgba(226,36,27,.7);
  animation: hqPulse 2.4s ease-out infinite;
}
.area__hq-pulse--lg{ animation-delay: 1.2s; }
@keyframes hqPulse{
  0%{ transform: scale(1); opacity: .9; }
  100%{ transform: scale(8); opacity: 0; }
}

/* Address card */
.area__card{
  position:absolute;
  left: 24px; bottom: 24px;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  padding: 1rem 1.1rem;
  color: #fff;
  width: 240px;
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
}
.area__card-row{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: .7rem;
}
.area__card-tag{
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  background: var(--red); color:#fff;
  padding: .25rem .55rem; border-radius: 999px;
  display:inline-flex; align-items:center; gap:.25rem;
}
.area__card-live{
  font-size: .68rem; letter-spacing: .08em; color: rgba(255,255,255,.75);
  display:inline-flex; align-items:center; gap:.35rem;
}
.area__card-live span{
  width: 7px; height: 7px; border-radius: 50%; background: #18c964;
  box-shadow: 0 0 0 2px rgba(24,201,100,.25);
  animation: liveBlink 1.4s infinite;
}
@keyframes liveBlink { 50%{ opacity: .35; } }
.area__card-addr strong{
  display:block; font-family: var(--display); font-size: 1.45rem; font-weight: 800; line-height: 1.05;
}
.area__card-addr span{ display:block; font-size: .85rem; color: rgba(255,255,255,.65); margin-top: .15rem; }
.area__card-stats{
  display:grid; grid-template-columns: repeat(3,1fr);
  gap: .5rem;
  margin-top: .85rem;
  border-top: 1px dashed rgba(255,255,255,.16);
  padding-top: .75rem;
}
.area__card-stats b{
  display:block; font-family: var(--display);
  font-size: 1.15rem; font-weight: 800; color: #fff;
  line-height: 1;
}
.area__card-stats span{
  font-size: .65rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

/* Compass */
.area__compass{
  position:absolute; right: 24px; top: 24px;
  width: 56px; height: 56px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  color: #fff;
  font-family: var(--display);
  font-size: .85rem; font-weight: 800;
  letter-spacing: .08em;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(8px);
}
.area__compass span:first-child{ position:relative; z-index: 1; }
.area__compass-dial{
  position:absolute; inset: 4px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, rgba(255,255,255,.0) 0 85deg, rgba(226,36,27,.55) 90deg, rgba(255,255,255,0) 95deg 360deg);
  mask-image: radial-gradient(circle, transparent 60%, #000 62%);
  -webkit-mask-image: radial-gradient(circle, transparent 60%, #000 62%);
}

/* Legend */
.area__legend{
  position:absolute; right: 24px; bottom: 24px;
  display:flex; flex-direction:column; gap:.4rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: .75rem .85rem;
  backdrop-filter: blur(8px);
}
.area__legend-row{
  font-size: .7rem; letter-spacing: .08em;
  color: rgba(255,255,255,.78);
  display:flex; align-items:center; gap:.5rem;
}
.area__legend-row i{
  width: 10px; height: 10px; border-radius: 50%;
  display:inline-block;
  box-shadow: 0 0 0 2px rgba(255,255,255,.1);
}

@media (max-width: 991.98px){
  .area__map{ min-height: 520px; }
  .area__card{ width: auto; right: 24px; }
  .area__legend{ display: none; }
}
@media (max-width: 575.98px){
  .area__pt::after{ display: none; }
  .area__compass{ display: none; }
  .area__card-stats{ gap: .25rem; }
}

/* List */
.area__list{
  padding: 2rem;
  display:flex; flex-direction:column;
}
.area__list h3{
  font-family: var(--body);
  font-weight: 800;
  font-size: 1.2rem;
  margin: 0 0 1.25rem;
}
.area__boroughs{
  display:flex; flex-direction:column; gap:.6rem;
  flex: 1;
}
.area__boroughs--titles{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
@media (max-width: 575.98px){
  .area__boroughs--titles{ grid-template-columns: 1fr; }
}
.area__group--static{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding: 1rem 1.1rem;
  background:#fff;
  border:1px solid var(--line);
  border-left: 3px solid var(--navy-700);
  border-radius: 12px;
  transition: transform .2s ease, box-shadow .2s ease, border-left-color .2s ease;
}
.area__group--static:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-left-color: var(--red);
}
.area__group--static i{
  color: var(--navy-700);
  font-size: 1.1rem;
}
.area__group--static:hover i{ color: var(--red); }
.area__group{
  border:1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  overflow: hidden;
}
.area__group[open]{
  background:#fff;
  border-color: var(--navy-700);
  box-shadow: 0 6px 18px rgba(10,19,48,.06);
}
.area__group summary{
  list-style: none;
  cursor: pointer;
  padding: .85rem 1rem;
  display:flex; align-items:center; gap:.75rem;
  font-weight: 600;
  user-select: none;
}
.area__group summary::-webkit-details-marker{ display:none; }
.area__chip{
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .04em;
  color: var(--navy-900);
  flex: 1;
}
.area__count{
  background: var(--navy-900);
  color:#fff;
  border-radius: 999px;
  padding: .2rem .6rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
}
.area__group[open] .area__count{ background: var(--red); }
.area__chevron{
  font-size: 1rem;
  color: var(--muted);
  transition: transform .25s ease;
}
.area__group[open] .area__chevron{ transform: rotate(180deg); color: var(--navy-900); }
.area__group ul{
  list-style: none;
  margin: 0;
  padding: 0 1rem 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: .35rem .75rem;
}
@media (max-width: 575.98px){
  .area__group ul{ grid-template-columns: 1fr 1fr; }
}
.area__group ul li{
  font-size: .88rem;
  color: var(--ink-2);
  padding: .25rem 0;
  border-top: 1px dashed var(--line);
  position: relative;
  padding-left: .9rem;
}
.area__group ul li::before{
  content: "";
  width: 5px; height: 5px;
  background: var(--navy-700);
  border-radius: 50%;
  position: absolute;
  left: 0; top: .65rem;
}

/* CTA */
.area__cta{
  margin-top: 1.25rem;
  background: var(--navy-950);
  color:#fff;
  border-radius: 14px;
  padding: 1rem 1.2rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  flex-wrap: wrap;
}
.area__cta strong{ display:block; font-size: 1rem; }
.area__cta span{ display:block; font-size:.85rem; color: rgba(255,255,255,.65); }