/* MIZOOR Service Area page. Builds on home.css. */
.area-hero { min-height: 82svh; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; }
.area-hero h1 { font-size: clamp(3rem, 7vw, 7rem); }
.area-hero-text { margin-top: .9rem; max-width: 30rem; color: var(--silver-dim); font-size: 1.05rem; }

/* Pin with water rings */
.area-pin { position: relative; justify-self: center; width: min(26rem, 70vw); aspect-ratio: 1; display: grid; place-items: center; margin-right: var(--gutter); }
.area-pin .ring { position: absolute; inset: 0; margin: auto; width: 30%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgba(60,199,226,.55); opacity: 0; }
.area-pin .pin { position: relative; width: 30%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(closest-side, rgba(60,199,226,.25), rgba(60,199,226,0)); }
.area-pin .pin img { width: 100%; height: auto; filter: drop-shadow(0 16px 30px rgba(0,0,0,.4)); }
.area-pin .pin-label { position: absolute; left: 50%; bottom: 14%; translate: -50% 0; white-space: nowrap; padding: .45rem 1rem; border-radius: 999px; background: rgba(205,214,224,.08); border: 1px solid rgba(205,214,224,.16); color: #fff; font-size: .95rem; }
@media (prefers-reduced-motion: no-preference) {
  .area-pin .ring { animation: ripple 4.5s cubic-bezier(.2,.6,.3,1) infinite; }
  .area-pin .ring:nth-child(2) { animation-delay: 1.5s; }
  .area-pin .ring:nth-child(3) { animation-delay: 3s; }
  .area-pin .pin img { animation: float 5s ease-in-out infinite alternate; }
}
@media (prefers-reduced-motion: reduce) { .area-pin .ring { opacity: .3; } .area-pin .ring:nth-child(2) { width: 60%; } .area-pin .ring:nth-child(3) { width: 90%; } }
@keyframes ripple { 0% { width: 30%; opacity: .9; } 100% { width: 100%; opacity: 0; } }

/* Coverage */
.area-coverage { background: var(--linen); color: var(--ink); padding: clamp(5rem, 9vw, 7.5rem) var(--gutter); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.area-coverage-head { display: grid; gap: 1.2rem; }
.area-coverage h2 { color: var(--ink); font-size: clamp(2.4rem, 4.6vw, 4.2rem); }
.area-coverage-head p { font-size: 1.15rem; color: #3d4756; max-width: 28rem; }
.coverage-states { list-style: none; margin: 0; padding: 0; }
.coverage-state { padding: 2rem; border-radius: 18px; background: #fbfaf6; box-shadow: 0 1px 0 rgba(19,25,37,.08), 0 30px 60px -40px rgba(19,25,37,.45); }
.coverage-state h3 { font-family: var(--serif); font-weight: 600; font-size: 1.1rem; color: #59636f; }
.coverage-cities { list-style: none; margin: 1rem 0 0; padding: 0; }
.coverage-cities li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid rgba(19,25,37,.14); }
.coverage-city { font-family: var(--serif); font-weight: 600; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.1; color: var(--ink); }
.coverage-status { display: inline-flex; align-items: center; gap: .5rem; color: #3d4756; font-size: .95rem; white-space: nowrap; }
.coverage-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #1fae7a; box-shadow: 0 0 0 4px rgba(31,174,122,.18); }
.area-notes { grid-column: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.area-note { padding: 1.5rem 0 0; border-top: 1px solid var(--ink); display: grid; gap: .5rem; }
.area-note h3 { font-family: var(--serif); font-weight: 600; font-size: 1.3rem; color: var(--ink); }
.area-note p { color: #4f5a69; }

@media (max-width: 900px) {
  .area-hero { grid-template-columns: 1fr; }
  .area-pin { order: -1; width: min(16rem, 64vw); margin: 7rem auto 0; }
  .area-hero .hero-text { padding: 1.5rem var(--gutter) 4rem; }
  .area-coverage { grid-template-columns: 1fr; }
  .area-notes { grid-column: auto; grid-template-columns: 1fr; }
  .coverage-cities li { flex-direction: column; gap: .5rem; }
}