.coverage-hero {
  padding-block: clamp(36px, 5vw, 72px);
  background: var(--cream);
  border-bottom: 1px solid rgb(42 61 107 / 12%);
}
.coverage-towns {
  background: var(--cream);
}
.coverage-towns h2 {
  margin-bottom: var(--space-4, 16px);
  font-family: var(--heading-font);
  font-size: var(--type-section, 36px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.2;
}
.coverage-towns > .container > p {
  max-width: 72ch;
}
.town-directory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--column-space, 48px);
  margin-top: var(--space-8, 32px);
}
.town-directory-grid h3,
.town-neighbours h3 {
  font-family: var(--heading-font);
  font-size: var(--type-editorial, 28px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.25;
  margin-bottom: var(--space-4, 16px);
}
.coverage-town-list,
.town-neighbours ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.coverage-town-list .text-link,
.town-neighbours .text-link {
  min-height: 44px;
  padding-block: 10px;
  font-size: var(--type-body, 16px);
}
.borough-town-directory {
  margin-top: var(--space-6, 24px);
}
.borough-town-directory .coverage-town-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--column-space, 48px);
}
.town-boundary-note {
  margin-top: var(--space-8, 32px);
}
.coverage-map-note {
  margin-top: var(--space-4, 16px);
  font-size: var(--type-ui, 14px);
}
.town-neighbours {
  padding-bottom: var(--section-space, 64px);
}
.town-neighbours ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-8, 32px);
}
@media (max-width: 767.98px) {
  .town-directory-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8, 32px);
  }
  .town-directory-grid .coverage-town-list,
  .borough-town-directory .coverage-town-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-4, 16px);
  }
}
@media (max-width: 359.98px) {
  .town-directory-grid .coverage-town-list,
  .borough-town-directory .coverage-town-list {
    grid-template-columns: minmax(0, 1fr);
  }
}
.borough-local-context {
  padding-block: 36px 0;
}
.borough-local-context,
.borough-practical {
  --borough-body-size: var(--type-body, 16px);
  --borough-subheading-size: var(--type-editorial, 28px);
  font-size: var(--borough-body-size);
}
.borough-local-context .text-link,
.borough-practical .text-link {
  font-size: var(--borough-body-size);
}
.borough-council-link {
  margin-top: 12px;
}
.borough-local-planning {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  margin-top: 40px;
}
.borough-local-planning h2 {
  margin-bottom: 16px;
  font-size: var(--borough-subheading-size);
  font-family: var(--heading-font);
  font-style: italic;
  font-weight: 400;
}
.borough-local-planning p {
  max-width: 66ch;
}
.borough-council-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 18px;
}
.borough-reading ul {
  display: grid;
  gap: 14px;
  list-style: none;
  padding: 0;
  margin-bottom: 18px;
}
@media (max-width: 639.98px) {
  .borough-local-planning {
    grid-template-columns: minmax(0, 1fr);
  }
  .borough-local-context {
    padding-top: 28px;
  }
}
.coverage-map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(36px, 5vw, 64px);
}
.coverage-directory h1,
.borough-intro-copy h1 {
  font-size: clamp(38px, 5.2vw, 64px);
  line-height: 1.08;
}
.coverage-directory > p,
.borough-intro-copy > p {
  max-width: 42ch;
  margin-top: 22px;
  font-size: 17px;
  line-height: 1.7;
}
.coverage-borough-index {
  padding: 0;
  margin: 28px 0 0;
  list-style: none;
  border-top: 1px solid rgb(42 61 107 / 18%);
}
.coverage-borough-link {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 16px;
  padding-block: 18px;
  border-bottom: 1px solid rgb(42 61 107 / 18%);
  border-radius: var(--radius-control);
  color: var(--navy);
  text-decoration: none;
}
.coverage-borough-number {
  font-size: 12px;
  font-weight: 500;
}
.coverage-borough-name {
  font-family: var(--heading-font);
  font-size: clamp(23px, 2.5vw, 29px);
  font-style: italic;
  line-height: 1.25;
}
.coverage-borough-link .text-link-arrow {
  width: 16px;
  height: 16px;
}
@media (hover: hover) and (pointer: fine) {
  .coverage-borough-link:hover .coverage-borough-name {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
  }
}
.coverage-borough-link:focus-visible {
  outline: 2px solid var(--blueprint);
  outline-offset: 4px;
}
.coverage-directory > .coverage-postcode-note {
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.6;
}
.coverage-map-art {
  min-width: 0;
}
.coverage-map {
  padding: 0;
  margin: 0;
}
.coverage-map-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.coverage-map-region {
  cursor: pointer;
  text-decoration: none;
}
.coverage-map-shape {
  stroke: var(--cream);
  stroke-width: 2px;
  stroke-linejoin: round;
  transition:
    fill 240ms ease,
    stroke 240ms ease;
}
.coverage-map-region[data-borough="kingston"] .coverage-map-shape {
  fill: #a3b7cf;
}
.coverage-map-region[data-borough="richmond"] .coverage-map-shape {
  fill: #d2ddea;
}
.coverage-map-region[data-borough="merton"] .coverage-map-shape {
  fill: #bdcde0;
}
.coverage-map-label {
  fill: var(--navy);
  font-family: inherit;
  font-size: 20px;
  font-weight: 650;
  text-decoration: none;
  pointer-events: none;
  transition: fill 240ms ease;
}
.coverage-map-region:is(:focus-visible, .is-active) .coverage-map-shape,
.coverage-map-layout:has([data-borough-row="kingston"]:focus-visible)
  .coverage-map-region[data-borough="kingston"]
  .coverage-map-shape,
.coverage-map-layout:has([data-borough-row="richmond"]:focus-visible)
  .coverage-map-region[data-borough="richmond"]
  .coverage-map-shape,
.coverage-map-layout:has([data-borough-row="merton"]:focus-visible)
  .coverage-map-region[data-borough="merton"]
  .coverage-map-shape {
  fill: var(--navy);
}
.coverage-map-region:is(:focus-visible, .is-active) .coverage-map-label,
.coverage-map-layout:has([data-borough-row="kingston"]:focus-visible)
  .coverage-map-region[data-borough="kingston"]
  .coverage-map-label,
.coverage-map-layout:has([data-borough-row="richmond"]:focus-visible)
  .coverage-map-region[data-borough="richmond"]
  .coverage-map-label,
.coverage-map-layout:has([data-borough-row="merton"]:focus-visible)
  .coverage-map-region[data-borough="merton"]
  .coverage-map-label {
  fill: white;
}
@media (hover: hover) and (pointer: fine) {
  .coverage-map-region:hover .coverage-map-shape,
  .coverage-map-layout:has([data-borough-row="kingston"]:hover)
    .coverage-map-region[data-borough="kingston"]
    .coverage-map-shape,
  .coverage-map-layout:has([data-borough-row="richmond"]:hover)
    .coverage-map-region[data-borough="richmond"]
    .coverage-map-shape,
  .coverage-map-layout:has([data-borough-row="merton"]:hover)
    .coverage-map-region[data-borough="merton"]
    .coverage-map-shape {
    fill: var(--navy);
  }
  .coverage-map-region:hover .coverage-map-label,
  .coverage-map-layout:has([data-borough-row="kingston"]:hover)
    .coverage-map-region[data-borough="kingston"]
    .coverage-map-label,
  .coverage-map-layout:has([data-borough-row="richmond"]:hover)
    .coverage-map-region[data-borough="richmond"]
    .coverage-map-label,
  .coverage-map-layout:has([data-borough-row="merton"]:hover)
    .coverage-map-region[data-borough="merton"]
    .coverage-map-label {
    fill: white;
  }
}
.coverage-map-region:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 5px;
}
.site-footer .coverage-map-attribution {
  margin-top: 12px;
  color: inherit;
  font-size: 11px;
  line-height: 1.6;
}
.coverage-map-attribution a {
  color: inherit;
  text-underline-offset: 3px;
}
.borough-intro-copy h1 {
  max-width: 17ch;
  font-size: clamp(36px, 4.8vw, 58px);
}
.borough-intro-copy > .button {
  margin-top: 26px;
}
.borough-work-intro {
  max-width: 74ch;
}
.borough-work-intro h2,
.borough-visit h2,
.coverage-contact-copy h2 {
  font-family: var(--heading-font);
  font-style: italic;
  font-weight: 400;
}
.borough-work-intro p {
  margin-top: 18px;
  font-size: var(--borough-body-size);
  line-height: 1.7;
}
.borough-practical-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(32px, 5vw, 64px);
  margin-top: 36px;
}
.borough-job-list,
.borough-prep-list {
  padding: 0;
  margin: 0;
}
.borough-job-list {
  border-top: 1px solid var(--border);
}
.borough-job-list > div {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
  gap: 24px;
  padding-block: 20px;
  border-bottom: 1px solid var(--border);
}
.borough-job-list dt,
.borough-prep-list dt {
  color: var(--navy);
  font-size: var(--borough-body-size);
  font-weight: 650;
  line-height: 1.45;
}
.borough-job-list dd,
.borough-prep-list dd {
  margin: 0;
  font-size: var(--borough-body-size);
  line-height: 1.7;
}
.borough-all-services {
  margin-top: 22px;
}
.borough-visit {
  padding-left: 28px;
  border-left: 1px solid var(--border);
}
.borough-visit h2 {
  font-size: var(--borough-subheading-size);
}
.borough-prep-list {
  margin-top: 22px;
}
.borough-prep-list dd {
  margin-top: 8px;
  font-size: var(--borough-body-size);
}
.borough-prep-list > div + div {
  margin-top: 22px;
}
.borough-planning-note {
  margin-top: 32px;
  max-width: 62ch;
}
.borough-planning-note h3 {
  font-family: var(--heading-font);
  font-size: var(--borough-subheading-size);
  font-style: italic;
  font-weight: 400;
  line-height: 1.25;
}
.borough-planning-note p,
.borough-planning-note ul {
  margin-top: 14px;
  font-size: var(--borough-body-size);
  line-height: 1.7;
}
.borough-planning-note ul {
  padding-left: 20px;
}
.borough-planning-note li + li {
  margin-top: 8px;
}
.coverage-contact-strip {
  padding-block: 24px;
  border-block: 1px solid var(--border);
  background: white;
}
.coverage-contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 650px) 104px;
  grid-template-areas: "copy portrait" "actions portrait";
  align-items: start;
  justify-content: center;
  gap: 14px 28px;
  text-align: left;
}
.coverage-contact-copy {
  grid-area: copy;
}
.coverage-colin {
  grid-area: portrait;
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-control);
  object-fit: cover;
}
.coverage-contact-copy h2 {
  font-size: clamp(24px, 2.7vw, 30px);
  text-align: left;
}
.coverage-contact-copy p {
  max-width: 64ch;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.65;
}
.coverage-contact-actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}
.coverage-nearby {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 20px;
  font-size: 14px;
}
.coverage-nearby .text-link {
  min-height: 44px;
  font-size: inherit;
  font-weight: 400;
}
@media (max-width: 899.98px) {
  .coverage-map-layout {
    gap: 28px;
  }
  .coverage-directory h1 {
    font-size: 48px;
  }
  .coverage-directory > p,
  .borough-intro-copy > p {
    font-size: 16px;
  }
  .coverage-borough-link {
    gap: 12px;
  }
  .coverage-borough-name {
    font-size: 24px;
  }
  .coverage-borough-link {
    padding-block: 16px;
  }
  .borough-intro-copy h1 {
    font-size: 42px;
  }
  .borough-intro-copy > .button {
    padding-inline: 14px;
    font-size: 13px;
  }
  .borough-job-list > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .borough-practical-layout {
    gap: 28px;
  }
  .borough-visit {
    padding-left: 24px;
  }
}
@media (max-width: 639.98px) {
  .coverage-map-layout,
  .borough-practical-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .coverage-map-layout {
    gap: 28px;
  }
  .coverage-directory h1,
  .borough-intro-copy h1 {
    font-size: 40px;
  }
  .coverage-directory > p,
  .borough-intro-copy > p {
    margin-top: 18px;
    line-height: 1.6;
  }
  .coverage-borough-index {
    margin-top: 22px;
  }
  .coverage-borough-name {
    font-size: 24px;
  }
  .coverage-map-svg {
    width: 100%;
    aspect-ratio: 640 / 500;
    margin-inline: auto;
  }
  .borough-intro-copy > .button {
    font-size: 14px;
  }
  .borough-work-intro p {
    font-size: var(--borough-body-size);
  }
  .borough-practical-layout {
    margin-top: 28px;
    gap: 36px;
  }
  .borough-visit {
    padding-left: 0;
    border-left: 0;
  }
  .coverage-contact-layout {
    grid-template-columns: minmax(0, 1fr) clamp(76px, 22vw, 96px);
    grid-template-areas: "copy portrait" "actions actions";
    gap: 14px 18px;
  }
  .coverage-contact-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .coverage-contact-copy h2 {
    font-size: 26px;
  }
  .coverage-nearby > span {
    flex-basis: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .coverage-map-shape,
  .coverage-map-label {
    transition: none;
  }
}