.city-service-section {
  padding-top: 62px;
}

.city-service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
}

.city-service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 106px;
  padding: 19px 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}

.city-service-card:hover {
  border-color: #a9dabc;
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.city-service-card strong { font-size: 18px; }
.city-service-card span { color: var(--muted); font-size: 12px; }
.city-service-card b {
  position: absolute;
  right: 20px;
  top: 17px;
  color: var(--green-dark);
  font-size: 18px;
}

.city-service-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--wash);
}

.city-service-empty p { margin: 0; color: var(--muted); }

.city-service-help {
  margin-top: 34px;
  padding: 28px;
  border-radius: 18px;
  background: var(--wash);
}

.city-service-help h3 { font-size: 21px; margin: 0 0 16px; }
.city-service-help > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.city-service-help article {
  border-left: 2px solid #a9dabc;
  padding-left: 15px;
}

.city-service-help h4 { font-size: 15px; margin: 0 0 5px; }
.city-service-help p { font-size: 13px; color: var(--muted); margin: 0; }
.city-type-help { margin: 36px 0 10px; }
.city-type-help h2 { font-size: 23px; margin: 0 0 8px; }
.city-type-help > p { font-size: 14px; margin-bottom: 18px; }
.city-type-help > .text-link { display: inline-block; margin-top: 21px; }

.about-process {
  border-top: 1px solid var(--line);
  margin-top: 29px;
  padding-top: 27px;
}

.about-process-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}

.about-process-grid article {
  padding: 19px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--wash);
}

.about-process-grid span {
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 800;
}

.about-process-grid h3 { font-size: 16px; margin: 7px 0 5px; }
.about-process-grid p { font-size: 13px; line-height: 1.7; margin: 0; }

.about-lead { font-size: 19px; color: var(--ink) !important; max-width: 850px; }
.about-policy-grid, .about-story-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.about-policy-grid > div, .about-story-grid blockquote { margin: 0; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--wash); }
.about-policy-grid h3 { margin: 0 0 8px; font-size: 17px; }
.about-policy-grid p, .about-story-grid p { margin: 0; font-size: 14px; }
.about-story-grid strong { display: block; margin-bottom: 9px; color: var(--green-dark); }
.about-story-grid footer { margin-top: 13px; font-size: 14px; color: var(--ink); }
.about-small-note { margin: 12px 0 0; font-size: 12px; }
.field-textarea { min-height: 78px; height: auto; padding: 11px 13px; resize: vertical; font: inherit; }
.request-more { margin-top: 12px; font-size: 13px; }
.request-more summary { width: fit-content; color: var(--green-dark); font-weight: 700; cursor: pointer; }
.request-more[open] summary { margin-bottom: 7px; }
.request-intent { padding: 9px 11px; margin-top: 12px; border-radius: 9px; background: var(--green-soft); color: var(--green-dark); font-size: 12px; }
.request-intent[hidden] { display: none; }
.article-content { max-width: 860px; overflow-wrap: anywhere; }
.article-content img, .article-content video { display: block; max-width: 100%; width: auto; height: auto; margin: 18px auto; border-radius: 9px; }
.article-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.article-content td, .article-content th { border: 1px solid var(--line); padding: 8px; }
.article-content a { color: var(--green-dark); text-decoration: underline; }

.city-search { margin-bottom: 16px; }
.city-hot { margin: -2px 0 24px; padding:20px 22px 22px; border:1px solid var(--line); border-radius:15px; background:#fff; }
.city-hot h2 { margin:0 0 15px; font-size:17px; line-height:1.4; }
.city-hot-list { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
.city-hot-list a { display:grid; place-items:center; min-height:45px; border:1px solid #e2eee5; border-radius:9px; background:#f8fcf9; color:var(--ink); font-size:14px; font-weight:700; transition:background .18s ease,border-color .18s ease,color .18s ease; }
.city-hot-list a:hover,.city-hot-list a:focus-visible { border-color:#a8d8b5; background:var(--green-soft); color:var(--green-dark); }
.city-hot[hidden], .city-letters[hidden], .city-directory[hidden], .city-search-results[hidden] { display: none; }
.city-search-results {
  max-width: 580px;
  margin: 0 0 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(31,77,49,.07);
}
.city-search-summary { margin: 0; padding: 10px 15px; color: var(--muted); font-size: 13px; }
.city-search-matches { max-height: 360px; overflow-y: auto; }
.city-search-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 15px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-weight: 700;
}
.city-search-result span { color: var(--green-dark); font-size: 12px; font-weight: 600; white-space: nowrap; }
.city-search-result:hover, .city-search-result:focus-visible { background: var(--green-soft); color: var(--green-dark); }

@media (max-width: 1000px) {
  .city-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .city-hot-list { grid-template-columns: repeat(4,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .city-hot { padding:16px; }
  .city-hot-list { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .hero h1 { font-size: clamp(30px, 8.8vw, 36px); }
  .city-service-section { padding-top: 48px; }
  .city-service-grid { gap: 10px; }
  .city-service-card { min-height: 94px; padding: 14px; }
  .city-service-card strong { font-size: 15px; }
  .city-service-card b { right: 13px; top: 12px; }
  .city-service-empty { align-items: flex-start; flex-direction: column; }
  .city-service-help { padding: 20px; }
  .city-service-help > div, .about-process-grid, .about-policy-grid, .about-story-grid { grid-template-columns: 1fr; }
  .city-service-help > div { gap: 16px; }
}