/* ==========================================================================
   Delivery-area pages
   A district page borrows the rate-card styling from site.css and adds only
   what it needs of its own: the four-number header and the district grid.
   ========================================================================== */

.ar-hero{padding-top:38px;padding-bottom:30px}
.ar-h1{margin:14px 0 10px;max-width:16ch}
.ar-lead{max-width:62ch;margin-bottom:26px}

/* --- The four figures a buyer wants before anything else --- */
.ar-stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;
  margin:0 0 26px;padding:0;list-style:none
}
.ar-stats>div{
  background:#fff;border:1px solid var(--line,#E4E9E0);border-radius:16px;
  padding:16px 16px 14px;box-shadow:0 2px 10px rgba(15,51,37,.05)
}
.ar-stats b{
  display:block;font-size:clamp(22px,3.2vw,30px);line-height:1.05;
  color:var(--ink,#0F3325);font-weight:800;letter-spacing:-.01em
}
.ar-stats b small{font-size:.46em;font-weight:700;margin-inline-start:3px;opacity:.6}
.ar-stats span{display:block;margin-top:7px;font-size:13px;color:var(--muted,#5C6B60)}

.ar-count{
  display:inline-block;margin:0 0 4px;padding:6px 13px;border-radius:999px;
  background:rgba(125,184,62,.12);color:#3D6B1E;font-weight:700;font-size:13.5px
}

/* --- District grid, used by both the index and the "rest of the route" --- */
.ar-div{margin-bottom:32px}
.ar-div>.h3{margin:0 0 14px}

.ar-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:12px;margin:0;padding:0;list-style:none
}
.ar-grid a{
  display:block;height:100%;padding:15px 16px 14px;border-radius:15px;
  background:#fff;border:1px solid var(--line,#E4E9E0);text-decoration:none;
  transition:border-color .2s,transform .24s cubic-bezier(.19,.86,.24,1),box-shadow .24s
}
.ar-grid a:hover,.ar-grid a:focus-visible{
  border-color:#4F8A26;transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(15,51,37,.09)
}
.ar-grid b{display:block;color:var(--ink,#0F3325);font-size:16px;line-height:1.25}
.ar-grid span{display:block;margin-top:5px;font-size:13px;color:var(--muted,#5C6B60)}
.ar-grid small{display:block;margin-top:2px;font-size:12.5px;color:#3D6B1E;font-weight:600}

.ar-note{
  margin:6px 0 0;max-width:64ch;font-size:14px;color:var(--muted,#5C6B60);
  padding-inline-start:14px;border-inline-start:3px solid var(--line,#E4E9E0)
}

.ar-near{background:var(--mist,#F4F7F2)}
.ar-all{margin:18px 0 0}
.ar-all a{color:#3D6B1E;font-weight:700;text-decoration:none}
.ar-all a:hover{text-decoration:underline}

@media (max-width:860px){
  .ar-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .ar-h1{max-width:none}
  .ar-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ar-grid a{padding:13px 13px 12px}
  .ar-grid b{font-size:15px}
}

@media (prefers-reduced-motion:reduce){
  .ar-grid a{transition:none}
  .ar-grid a:hover,.ar-grid a:focus-visible{transform:none}
}