
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations"),
    url("/assets/fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin-ext-wdth-normal.woff2") format("woff2-variations"),
    url("/assets/fonts/archivo-latin-ext-wdth-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --ground: #e8e9e8;        --raised: #f6f6f4;        --ink: #17181a;           --muted: #4b5055;         --brick: #9e3520;         --brick-deep: #7d2816;    --on-brick: #f6f2ee;      --blue: #2343c9;          --rule: #b9bdbf;        
    --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --weight-body: 400;
  --weight-ui: 500;
  --weight-strong: 600;
  --weight-sub: 700;
  --weight-display: 800;
  --stretch-text: 100%;
  --stretch-display: 112%;
    --stretch-heading: var(--stretch-text);
  --tracking-display: -0.02em;
  --text-h1: clamp(2.5rem, 1.6rem + 3.6vw, 5rem);
    --text-h1-long: clamp(2.5rem, 1.9rem + 1.6vw, 3.5rem);
  --text-h2: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem);
  --text-h2-hung: clamp(1.6rem, 1rem + 0.8vw, 1.9rem);
  --text-h3: 1.25rem;
  --text-body: 1.0625rem;
  --text-small: 0.875rem;
  --leading-display: 0.98;
  --leading-h2: 1.05;
  --leading-h3: 1.2;
  --leading-body: 1.55;
  --leading-small: 1.45;
  --measure: 68ch;

    --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --section-space: var(--space-7);
  --gutter: var(--space-4);
  --content-max: 72rem;

    --line: 1px;
  --focus-width: 3px;
  --radius: 0;
  --tap: 44px;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-draw: 700ms;
  --motion-settle: 320ms;
  --motion-settle-delay: 620ms;
}

@media (min-width: 768px) {
  :root {
    --gutter: var(--space-5);
    --section-space: var(--space-8);
    --stretch-heading: var(--stretch-display);
  }
}

@media (min-width: 1024px) {
  :root {
    --section-space: var(--space-9);
    --text-body: 1.125rem;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  font-stretch: var(--stretch-text);
  line-height: var(--leading-body);
  font-synthesis: none;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
p,
figure,
dl,
dd,
ol,
ul {
  margin: 0;
}

ul,
ol {
  padding: 0;
}

h1,
h2 {
  font-weight: var(--weight-display);
  font-stretch: var(--stretch-heading);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

h3 {
  font-size: var(--text-h3);
  font-weight: var(--weight-sub);
  line-height: var(--leading-h3);
  text-wrap: balance;
}

p,
li,
dd {
  text-wrap: pretty;
}

strong,
b,
em {
  font-style: normal;
  font-weight: var(--weight-strong);
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: var(--line);
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

img,
svg {
  display: block;
  max-width: 100%;
}

::selection {
  background: var(--ink);
  color: var(--ground);
}

:focus-visible {
  outline: var(--focus-width) solid var(--blue);
  outline-offset: 2px;
}

.site-main:focus-visible {
  outline: none;
}

.page-width {
  width: min(100% - 2 * var(--gutter), var(--content-max));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: calc(-1 * var(--space-9));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: var(--space-2) var(--space-4);
  background: var(--ink);
  color: var(--ground);
  font-weight: var(--weight-strong);
  text-decoration: none;
}

.skip-link:focus-visible {
  top: var(--space-2);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.site-header {
  position: relative;
  z-index: 20;
  background: var(--ground);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-4);
  min-height: 72px;
  border-bottom: var(--line) solid var(--ink);
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap);
  color: var(--ink);
  text-decoration: none;
}

.brand-lockup .brand-mark {
  flex: none;
  width: 40px;
  height: 40px;
}

.brand-lockup__name {
  display: flex;
  flex-direction: column;
  font-size: 1.1875rem;
  font-weight: var(--weight-display);
  font-stretch: var(--stretch-text);
  letter-spacing: var(--tracking-display);
  line-height: 1.02;
  white-space: nowrap;
}

.brand-lockup:hover .brand-lockup__name {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

.site-nav {
  display: none;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
}

.site-nav__item {
  position: relative;
}

.nav-menu__toggle,
.site-nav__link,
.phone-menu__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding-inline: var(--space-3);
  color: var(--ink);
  font-weight: var(--weight-ui);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}

.nav-menu__toggle::-webkit-details-marker,
.phone-menu__toggle::-webkit-details-marker {
  display: none;
}

.nav-menu__toggle:hover,
.site-nav__link:hover,
.phone-menu__toggle:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

.site-nav__link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

.nav-menu__chevron,
.phone-menu__chevron {
  display: inline-block;
  flex: none;
  width: 12px;
  height: 12px;
}

.nav-menu[open] .nav-menu__chevron,
.phone-menu[open] .phone-menu__chevron {
  transform: rotate(180deg);
}

.nav-menu__list {
  position: absolute;
  top: calc(100% + var(--space-3));
  right: 0;
  z-index: 30;
  min-width: 21rem;
  padding: var(--space-2) 0;
  list-style: none;
  background: var(--raised);
  border: var(--line) solid var(--ink);
}

.nav-menu__list a,
.phone-menu__list a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: var(--space-2) var(--space-5);
  text-decoration: none;
}

.nav-menu__list a:hover,
.phone-menu__list a:hover {
  background: var(--ground);
  text-decoration: underline;
}

.nav-menu__list a[aria-current="page"],
.phone-menu__list a[aria-current="page"] {
  font-weight: var(--weight-strong);
}

.phone-menu__toggle {
  border: var(--line) solid var(--ink);
  padding-inline: var(--space-4);
}

.phone-menu[open] .phone-menu__toggle {
  background: var(--ink);
  color: var(--ground);
}

.phone-menu__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  padding: var(--space-3) var(--gutter) var(--space-6);
  background: var(--raised);
  border-bottom: var(--line) solid var(--ink);
}

.phone-menu__group {
  margin-top: var(--space-5);
  padding-bottom: var(--space-2);
  border-bottom: var(--line) solid var(--rule);
  color: var(--muted);
  font-size: var(--text-small);
  font-weight: var(--weight-strong);
}

.phone-menu__group:first-child {
  margin-top: var(--space-2);
}

.phone-menu__list {
  list-style: none;
}

.phone-menu__list a {
  padding-inline: 0;
}

.phone-menu__panel .call-action {
  margin-top: var(--space-5);
}

.phone-menu {
  margin-left: auto;
}

.site-header__call {
  display: none;
}

@media (min-width: 768px) {
  .site-header__call {
    display: block;
    margin-left: auto;
  }

  .site-header__call + .phone-menu {
    margin-left: var(--space-3);
  }
}

@media (min-width: 1024px) {
  .site-nav {
    display: block;
    margin-left: auto;
  }

  .site-header__call {
    margin-left: var(--space-5);
  }

  .phone-menu {
    display: none;
  }

  .site-header__inner {
    min-height: 80px;
  }
}

.sleeve__frame {
  overflow: hidden;
  aspect-ratio: 12 / 5;
  background: var(--brick);
}

.sleeve__art {
  width: 100%;
  height: 100%;
}

.sleeve__caption {
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.art-field {
  fill: var(--brick);
}

.art-deep {
  fill: var(--brick-deep);
}

.art-line {
  fill: none;
  stroke: var(--on-brick);
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.art-deep.art-line {
  fill: var(--brick-deep);
}

.art-fill {
  fill: var(--on-brick);
}

.art-pipe {
  stroke-linecap: butt;
}

.located-point__ring {
  fill: var(--on-brick);
}

.located-point__disc {
  fill: var(--blue);
}

@media (min-width: 768px) {
  .sleeve__frame {
    aspect-ratio: 3 / 1;
  }
}

@media (min-width: 1024px) {
  .sleeve__frame {
    aspect-ratio: 1 / 1;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .sleeve--animate .sleeve__run {
    stroke-dasharray: 1;
    animation: sleeve-draw var(--motion-draw) var(--ease-out) both;
  }

  .sleeve--animate .located-point {
    transform-box: fill-box;
    transform-origin: center;
    animation: point-settle var(--motion-settle) var(--ease-out) var(--motion-settle-delay) both;
  }
}

@media (min-width: 1024px) {
  .sleeve__run {
    --run-from: var(--run-from-square, 1);
  }
}

@keyframes sleeve-draw {
  from {
    stroke-dashoffset: var(--run-from, 1);
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes point-settle {
  from {
    opacity: 0;
    transform: scale(1.5);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.sleeve-hero {
  padding-bottom: var(--space-7);
}

.sleeve-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.sleeve-hero .sleeve {
  order: -1;
  margin-inline: calc(-1 * var(--gutter));
  margin-bottom: var(--space-5);
}

.sleeve-hero .sleeve__caption {
  padding-inline: var(--gutter);
}

.sleeve-hero__title,
.page-head__title {
  max-width: 17ch;
  font-size: var(--text-h1);
  line-height: var(--leading-display);
}

.sleeve-hero__title--long,
.page-head__title--long {
  max-width: 22ch;
  font-size: var(--text-h1-long);
}

.sleeve-hero__answer,
.page-head__answer {
  max-width: 60ch;
  margin-top: var(--space-5);
}

.sleeve-hero .call-action,
.page-head .call-action {
  margin-top: var(--space-5);
  justify-self: start;
}

.page-head {
  padding-block: var(--space-7) var(--space-7);
}

@media (min-width: 1024px) {
  .sleeve-hero {
    padding-block: var(--space-7) var(--space-8);
  }

  .sleeve-hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto auto 1fr;
    column-gap: var(--space-7);
    align-items: start;
  }

  .sleeve-hero__title {
    grid-column: 1;
    grid-row: 1;
  }

  .sleeve-hero__answer {
    grid-column: 1;
    grid-row: 2;
  }

  .sleeve-hero .call-action {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
  }

  .sleeve-hero .sleeve {
    order: 0;
    grid-column: 2;
    grid-row: 1 / span 3;
    margin: 0;
  }

  .sleeve-hero .sleeve__caption {
    padding-inline: 0;
  }

  .page-head {
    padding-block: var(--space-8) var(--space-7);
  }
}

.page-section {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [content-start] minmax(0, var(--content-max))
    [content-end] minmax(var(--gutter), 1fr)
    [full-end];
  padding-bottom: var(--section-space);
}

.page-section > * {
  grid-column: content;
  min-width: 0;
}

.page-section::before {
  content: "";
  grid-column: content;
  margin-bottom: var(--section-space);
  border-top: var(--line) solid var(--rule);
}

.page-section__title {
  max-width: 30ch;
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
}

.page-section__answer {
  max-width: var(--measure);
  margin-top: var(--space-4);
}

.page-section__answer + *,
.prose + *:not(.prose) {
  margin-top: var(--space-6);
}

.prose {
  max-width: var(--measure);
  margin-top: var(--space-4);
}

.page-section__answer + .prose {
  margin-top: var(--space-4);
}

.subheading {
  max-width: 40ch;
  margin-top: var(--space-6);
}

.subheading + p {
  margin-top: var(--space-2);
}

.page-section--field {
  isolation: isolate;
}

.page-section--field::before {
  grid-column: full;
  grid-row: 1 / 3;
  z-index: -1;
  margin: 0;
  border: 0;
  background: var(--brick);
}

.page-section--field > .page-section__title,
.page-section--field > .page-section__answer {
  background-color: var(--brick);
}

.page-section--field > .page-section__title {
  grid-row: 1;
  padding-top: var(--space-8);
  color: var(--on-brick);
}

.page-section--field > .page-section__answer {
  grid-row: 2;
  margin-top: 0;
  padding-top: var(--space-4);
  padding-bottom: var(--space-8);
  color: var(--on-brick);
}

.page-section--field > .page-section__answer + * {
  margin-top: var(--space-7);
}

@media (min-width: 1024px) {
  .page-section {
    --section-content: min(100% - 2 * var(--gutter), var(--content-max));
    --section-head: calc((var(--section-content) - var(--space-7)) * 5 / 12);
    grid-template-columns:
      [full-start] minmax(var(--gutter), 1fr)
      [content-start head-start] var(--section-head)
      [head-end] var(--space-7)
      [body-start] calc(var(--section-content) - var(--section-head) - var(--space-7))
      [body-end content-end] minmax(var(--gutter), 1fr)
      [full-end];
  }

  .page-section > * {
    grid-column: body;
  }

    .page-section > .page-section__title {
    grid-column: head;
    grid-row: 2 / span 3;
    align-self: first baseline;
    font-size: var(--text-h2-hung);
  }

    .page-section > .page-section__answer {
    grid-row: 2;
    align-self: first baseline;
    margin-top: 0;
  }

  .page-section
    > :is(.index-list, .method-chart, .data-table, .plate, .place-sheet, .place-list, .district-index:not(.district-index--plain)) {
    grid-column: content;
  }

    .page-section--field::before {
    grid-row: 1;
  }

  .page-section--field > .page-section__title,
  .page-section--field > .page-section__answer {
    grid-row: 1;
    align-self: first baseline;
    padding-block: var(--space-8);
  }

  .page-section--field > .page-section__answer {
    padding-top: calc(var(--space-8) + var(--space-4));
  }
}

.page-section--field :focus-visible,
.coverage-grid__tile--town:focus-visible {
  outline-color: var(--blue);
  box-shadow: 0 0 0 8px var(--on-brick);
}

.item-list {
  max-width: var(--measure);
  list-style: none;
}

.item-list__item {
  position: relative;
  padding-left: var(--space-6);
}

.item-list__item + .item-list__item {
  margin-top: var(--space-2);
}

.item-list__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: var(--space-4);
  height: 2px;
  background: var(--ink);
}

.item-list--ordered {
  counter-reset: item;
}

.item-list--ordered .item-list__item {
  counter-increment: item;
}

.item-list--ordered .item-list__item::before {
  content: counter(item);
  top: 0;
  width: auto;
  height: auto;
  background: none;
  font-weight: var(--weight-display);
  font-stretch: var(--stretch-display);
}

.link-list {
  list-style: none;
}

.link-list__item a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}

.attribute-list {
  display: grid;
  gap: var(--space-3);
}

.attribute-list__row {
  display: grid;
  gap: var(--space-1);
}

.attribute-list__term {
  font-size: var(--text-small);
  font-weight: var(--weight-strong);
  line-height: var(--leading-small);
}

.attribute-list__value {
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

@media (min-width: 768px) {
  .attribute-list__row {
    grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
    column-gap: var(--space-4);
  }
}

.data-table {
  max-width: 100%;
}

.data-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.data-table__caption {
  caption-side: bottom;
  margin-top: var(--space-3);
  color: var(--muted);
  text-align: left;
}

.data-table th,
.data-table td {
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: var(--line) solid var(--rule);
  text-align: left;
  vertical-align: top;
}

.data-table thead th {
  border-bottom-color: var(--ink);
  font-weight: var(--weight-strong);
}

.data-table tbody th {
  font-weight: var(--weight-strong);
}

@media (max-width: 767px) {
  .data-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .data-table tr {
    display: block;
    padding-block: var(--space-3);
    border-top: var(--line) solid var(--ink);
  }

  .data-table tbody th,
  .data-table td {
    display: grid;
    grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-1) 0;
    border: 0;
  }

  .data-table tbody th::before,
  .data-table td::before {
    content: attr(data-label);
    font-weight: var(--weight-strong);
  }

    .coverage-table thead {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }

  .coverage-table tr {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) min-content;
    column-gap: var(--space-3);
    padding-block: var(--space-2);
    border-top: var(--line) solid var(--rule);
  }

  .coverage-table thead tr {
    border-top: 0;
    border-bottom: var(--line) solid var(--ink);
  }

  .coverage-table th,
  .coverage-table td,
  .coverage-table tbody th {
    display: block;
    padding: 0;
    border: 0;
  }

  .coverage-table tbody th::before,
  .coverage-table td::before {
    content: none;
  }

  .coverage-table tr > :nth-child(1) {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .coverage-table tr > :nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    font-weight: var(--weight-strong);
  }

  .coverage-table tr > :nth-child(3) {
    grid-column: 2;
    grid-row: 2;
    color: var(--muted);
  }

  .coverage-table tr > :nth-child(4) {
    grid-column: 3;
    grid-row: 1;
    text-align: right;
  }
}

.index-list {
  list-style: none;
  background: var(--raised);
  border-top: var(--line) solid var(--ink);
}

.index-list__item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-areas:
    "glyph title"
    "summary summary"
    "facts facts";
  column-gap: var(--space-4);
  padding: var(--space-5) var(--space-4);
}

.index-list__item + .index-list__item {
  border-top: var(--line) solid var(--rule);
}

.index-list__body {
  display: contents;
}

.index-list__glyph {
  grid-area: glyph;
}

.index-list__glyph svg {
  width: 56px;
  height: 56px;
}

.index-list__title {
  grid-area: title;
  align-self: center;
  font-size: var(--text-h3);
}

.index-list__title a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  text-decoration-thickness: 2px;
}

.index-list__summary {
  grid-area: summary;
  max-width: 60ch;
  margin-top: var(--space-4);
}

.index-list__facts {
  grid-area: facts;
  margin-top: var(--space-4);
}

@media (min-width: 768px) {
  .index-list__item {
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: var(--space-5);
    padding: var(--space-6) var(--space-5);
  }

  .index-list__glyph svg {
    width: 72px;
    height: 72px;
  }
}

@media (min-width: 1024px) {
  .index-list__item {
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-areas: none;
    column-gap: var(--space-6);
    padding: var(--space-6);
  }

  .index-list__glyph {
    grid-area: auto;
  }

  .index-list__glyph svg {
    width: 96px;
    height: 96px;
  }

  .index-list__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-rows: auto 1fr;
    column-gap: var(--space-7);
  }

  .index-list__title,
  .index-list__summary {
    grid-area: auto;
    grid-column: 1;
    align-self: start;
  }

  .index-list__summary {
    margin-top: var(--space-2);
  }

  .index-list__facts {
    grid-area: auto;
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;
  }
}

.method-chart {
  border-top: var(--line) solid var(--ink);
}

.method-chart__row {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-5);
}

.method-chart__row + .method-chart__row {
  border-top: var(--line) solid var(--rule);
}

.method-chart__method {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: var(--space-4);
  align-items: center;
}

.method-chart__name {
  font-size: var(--text-h3);
}

.method-chart__line {
  grid-column: 1 / -1;
  max-width: var(--measure);
  margin-top: var(--space-3);
}

@media (min-width: 768px) {
  .method-chart__row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--space-6);
    padding-block: var(--space-6);
  }

  .method-chart__method {
    align-items: start;
  }
}

@media (min-width: 1024px) {
  .method-chart__row {
    grid-template-columns: calc((100% - var(--space-7)) / 3) minmax(0, 1fr);
    column-gap: var(--space-7);
  }
}

.method-glyph {
  width: 48px;
  height: 48px;
}

.diagram-line {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.diagram-dash {
  fill: none;
  stroke: var(--ink);
  stroke-dasharray: 2 2;
}

.diagram-fill {
  fill: var(--ink);
}

.diagram-earth {
  fill: var(--ground);
}

.diagram-heat {
  fill: var(--brick);
}

.water-line {
  fill: none;
  stroke: var(--blue);
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

.water-line--main {
  fill: var(--raised);
}

.sequence {
  list-style: none;
  counter-reset: step;
  border-top: var(--line) solid var(--ink);
}

.sequence__step {
  display: grid;
  grid-template-columns: var(--space-7) minmax(0, 1fr);
  column-gap: var(--space-4);
  padding-block: var(--space-5);
  counter-increment: step;
}

.sequence__step + .sequence__step {
  border-top: var(--line) solid var(--rule);
}

.sequence__step::before {
  content: counter(step);
  grid-row: 1 / span 2;
  font-size: var(--text-h2);
  font-weight: var(--weight-display);
  font-stretch: var(--stretch-display);
  line-height: 1;
}

.sequence__title {
  grid-column: 2;
}

.sequence__body {
  grid-column: 2;
  max-width: var(--measure);
  margin-top: var(--space-2);
}

.plate__caption {
  max-width: var(--measure);
  margin-top: var(--space-3);
  color: var(--muted);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.plate__attribution {
  display: block;
  margin-top: var(--space-1);
}

.ownership-diagram {
  padding: var(--space-4);
  background: var(--raised);
  border-top: var(--line) solid var(--ink);
}

.ownership-diagram__art {
  width: 100%;
  height: auto;
}

.ownership-diagram__spans {
  display: grid;
  margin-top: var(--space-3);
}

.ownership-diagram__span {
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.ownership-diagram__span + .ownership-diagram__span {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--line) solid var(--rule);
}

.ownership-diagram__party {
  display: block;
}

@media (min-width: 600px) {
  .ownership-diagram__spans {
    grid-template-columns: var(--ownership-split, 1fr 1fr);
    margin-top: var(--space-2);
  }

  .ownership-diagram__span--company {
    grid-column: 1;
    grid-row: 1;
    padding-right: var(--space-3);
  }

  .ownership-diagram__span--owner {
    grid-column: 2;
    grid-row: 1;
    padding-left: var(--space-3);
    border-left: var(--line) dashed var(--ink);
  }

  .ownership-diagram__span + .ownership-diagram__span {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
}

@media (min-width: 768px) {
  .ownership-diagram {
    padding: var(--space-6);
  }

  .ownership-diagram__span--company {
    padding-right: var(--space-5);
  }

  .ownership-diagram__span--owner {
    padding-left: var(--space-5);
  }

  .ownership-diagram__party {
    display: inline;
  }
}

.coverage-grid {
  columns: 2;
  column-gap: var(--space-3);
  list-style: none;
}

.coverage-grid__item {
  break-inside: avoid;
  margin-bottom: var(--space-3);
}

.coverage-grid__tile {
  display: grid;
  gap: var(--space-1);
  min-height: var(--tap);
  padding: var(--space-3);
  color: var(--ink);
  text-decoration: none;
  background: var(--raised);
  border: var(--line) solid var(--ink);
}

.coverage-grid__tile:hover .coverage-grid__name {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.coverage-grid__code {
  font-size: 1.75rem;
  font-weight: var(--weight-display);
  font-stretch: var(--stretch-display);
  letter-spacing: var(--tracking-display);
  line-height: 1;
}

.coverage-grid__name {
  font-weight: var(--weight-strong);
  line-height: var(--leading-h3);
}

.coverage-grid__count,
.coverage-grid__flag {
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.coverage-grid__count {
  color: var(--muted);
}

.coverage-grid__cells {
  width: 100%;
  max-width: 150px;
  height: auto;
  margin-top: var(--space-2);
  fill: var(--ink);
}

.coverage-grid__tile--town {
  color: var(--on-brick);
  background: var(--brick);
  border-color: var(--brick);
}

.coverage-grid__tile--town .coverage-grid__count {
  color: var(--on-brick);
}

.coverage-grid__tile--town .coverage-grid__cells {
  fill: var(--on-brick);
}

@media (min-width: 768px) {
  .coverage-grid {
    columns: 3;
    column-gap: var(--space-4);
  }

  .coverage-grid__item {
    margin-bottom: var(--space-4);
  }

  .coverage-grid__tile {
    padding: var(--space-4);
  }
}

@media (min-width: 1024px) {
  .coverage-grid {
    columns: 4;
  }
}

.district-index {
  columns: 1;
}

.district-index__area {
  break-inside: avoid;
  margin-bottom: var(--space-6);
}

.district-index__title {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: var(--line) solid var(--ink);
  scroll-margin-top: var(--space-5);
}

.district-index__code {
  font-weight: var(--weight-display);
  font-stretch: var(--stretch-display);
}

.district-index__row {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
  gap: var(--space-3);
  padding-block: var(--space-2);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.district-index__row + .district-index__row {
  border-top: var(--line) solid var(--rule);
}

.district-index__town {
  font-weight: var(--weight-strong);
}

.district-index__note {
  color: var(--muted);
  font-weight: var(--weight-body);
}

@media (min-width: 768px) {
  .district-index {
    columns: 2;
    column-gap: var(--space-7);
  }

  .district-index--plain {
    columns: 1;
    max-width: var(--measure);
  }
}

.place-sheet {
  padding: var(--space-2) var(--space-4) var(--space-4);
  background: var(--raised);
  border-top: var(--line) solid var(--ink);
}

.place-sheet__row {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-4);
}

.place-sheet__row + .place-sheet__row {
  border-top: var(--line) solid var(--rule);
}

.place-sheet__label {
  font-weight: var(--weight-strong);
}

.place-sheet__source {
  display: block;
  margin-top: var(--space-1);
  color: var(--muted);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.place-sheet__licence {
  padding-top: var(--space-3);
  border-top: var(--line) solid var(--rule);
  color: var(--muted);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

@media (min-width: 768px) {
  .place-sheet {
    padding: var(--space-2) var(--space-6) var(--space-5);
  }

  .place-sheet__row {
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    column-gap: var(--space-6);
  }
}

.source-note {
  max-width: var(--measure);
  padding-block: var(--space-4);
  border-top: var(--line) solid var(--ink);
}

.source-note__source {
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.place-list {
  list-style: none;
  border-top: var(--line) solid var(--ink);
}

.place-list__item {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-4);
}

.place-list__item + .place-list__item {
  border-top: var(--line) solid var(--rule);
}

.place-list__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  justify-self: start;
  font-size: 1.125rem;
  font-weight: var(--weight-sub);
  text-decoration-thickness: 2px;
}

.place-list__label {
  color: var(--muted);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

@media (min-width: 1024px) {
  .place-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: var(--space-5);
    border-top: 0;
  }

  .place-list__item,
  .place-list__item + .place-list__item {
    align-content: start;
    border-top: var(--line) solid var(--ink);
  }

    .place-list {
    grid-template-rows: repeat(3, auto);
  }

  .place-list__item {
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: var(--space-1);
  }

  .place-list__link {
    align-self: start;
    align-items: flex-start;
  }
}

.call-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: var(--space-3) var(--space-5);
  color: var(--on-brick);
  font-weight: var(--weight-strong);
  text-decoration: none;
  background: var(--blue);
}

.call-action:hover {
  background: var(--ink);
}

.call-action__number {
  white-space: nowrap;
  font-stretch: var(--stretch-display);
}

.call-action--hero {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.call-action--hero .call-action__number {
  font-size: 1.5rem;
  font-weight: var(--weight-display);
}

.call-action--block {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--space-2);
  row-gap: 0;
  width: 100%;
  text-align: center;
}

.call-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  padding: var(--space-2) var(--gutter);
  background: var(--ground);
  border-top: var(--line) solid var(--ink);
}

@media (min-width: 1024px) {
  .call-bar {
    display: none;
  }
}

.phone-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-weight: var(--weight-strong);
  white-space: nowrap;
}

p .phone-link {
  margin-block: calc((var(--leading-body) * 1em - var(--tap)) / 2);
}

.phone-list {
  display: grid;
  gap: var(--space-2);
}

.phone-list__row {
  display: grid;
  gap: 0;
}

.phone-list__place {
  font-size: var(--text-small);
  color: var(--muted);
}

.breadcrumb {
  padding-block: var(--space-3);
  border-top: var(--line) solid var(--rule);
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-2);
  list-style: none;
  font-size: var(--text-small);
}

.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.breadcrumb__item a,
.breadcrumb__item span {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}

.breadcrumb__item + .breadcrumb__item::before {
  content: "/";
  color: var(--muted);
}

.site-footer {
  padding-block: var(--space-8) var(--space-6);
  border-top: var(--line) solid var(--ink);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-7);
}

.brand-lockup--footer .brand-mark {
  width: 56px;
  height: 56px;
}

.brand-lockup--footer .brand-lockup__name {
  font-size: 1.625rem;
}

.site-footer__coverage {
  max-width: 44ch;
  margin-top: var(--space-5);
  color: var(--muted);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
}

.site-footer__column:first-child {
  grid-column: 1 / -1;
}

.site-footer__heading {
  padding-bottom: var(--space-2);
  border-bottom: var(--line) solid var(--ink);
  font-size: var(--text-small);
  font-weight: var(--weight-strong);
}

.site-footer__list {
  list-style: none;
  margin-top: var(--space-1);
}

.site-footer__list a {
  display: inline-block;
  padding-block: var(--space-2);
  padding-block: calc((var(--tap) - 1lh) / 2);
  text-decoration: none;
}

.site-footer__list a:hover {
  text-decoration: underline;
}

.site-footer__legal {
  padding-top: var(--space-4);
  border-top: var(--line) solid var(--rule);
  color: var(--muted);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.site-footer__operator + .site-footer__copyright {
  margin-top: var(--space-2);
}

@media (min-width: 768px) {
  .site-footer__nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .site-footer__column:first-child {
    grid-column: auto;
  }
}

@media (min-width: 1024px) {
  .site-footer__inner {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: var(--space-8);
  }

  .site-footer__numbers,
  .site-footer__legal {
    grid-column: 1 / -1;
  }
}

.sitemap-entries .item-list__item + .item-list__item {
  margin-top: var(--space-5);
}

.sitemap-entry__link {
  display: inline-block;
  padding-block: var(--space-1);
  font-weight: var(--weight-strong);
}

.sitemap-entry__note {
  display: block;
  margin-top: var(--space-1);
  color: var(--muted);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

@media (min-width: 768px) {
  .company-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-6);
    max-width: var(--measure);
  }
}

.place-attribution {
  max-width: var(--measure);
  margin-top: var(--space-4);
  color: var(--muted);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.page--heating-systems .page-section > .attribute-list,
.page--pipes .page-section > .attribute-list,
.page--mains-leaks .page-section > .attribute-list,
.page--escape-of-water .page-section > .attribute-list,
.page--mains-leaks .page-section > .source-note,
.page--escape-of-water .page-section > .source-note {
  max-width: var(--measure);
}
