@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/BarlowCondensed-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/BarlowCondensed-ExtraBold.woff2") format("woff2");
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Barlow-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/Barlow-SemiBold.woff2") format("woff2");
}

:root {
  --bond: #FFFFFF;
  --vellum: #EEF1EE;
  --ink: #1B1F1D;
  --graphite: #5B615E;
  --green: #2D5F4E;
  --green-deep: #234B3E;
  --stake: #F5A03A;
  --rule: rgba(27, 31, 29, 0.2);
  --rule-on-ink: rgba(255, 255, 255, 0.4);
  --secondary-on-ink: rgba(255, 255, 255, 0.72);
  --display: "Barlow Condensed", Bahnschrift, "DIN Alternate", "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  --text: Barlow, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: 20px;
  --max: 1120px;
  --rail: 300px;
  --rail-gap: 48px;
  --bleed: max(var(--gutter), calc((100% - var(--max)) / 2));
}

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

html {
  background: var(--bond);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bond);
}

h1,
h2,
h3,
.wordmark,
.scale,
.close-line,
.display-sentence,
.proof-numeral,
.name-line {
  font-family: var(--display);
  color: var(--green);
  margin: 0;
}

h1 {
  font-size: 44px;
  font-weight: 800;
  line-height: 0.95;
  max-width: 14ch;
}

h2 {
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  position: relative;
  padding-left: 18px;
}

h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 4px;
  height: 20px;
  background: var(--stake);
}

h3 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.1;
}

.display-sentence {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
}

.name-line {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 16px;
}

p {
  margin: 0 0 1em;
}

p:last-child {
  margin-bottom: 0;
}

ul,
ol {
  margin: 0 0 1em;
  padding-left: 1.2em;
}

ul {
  list-style: square;
}

li {
  margin: 0.35em 0;
}

a {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}

a:focus-visible,
.button:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}

.band-ink a:focus-visible,
.band-green a:focus-visible,
.band-ink .button:focus-visible,
.band-green .button:focus-visible {
  outline-color: var(--bond);
}

strong {
  font-weight: 600;
}

.wordmark {
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.06em;
}

.lockup {
  display: flex;
  align-items: center;
}

.lockup .wordmark {
  position: relative;
}

.lockup .wordmark::after {
  content: "";
  position: absolute;
  left: -4px;
  right: calc(0.06em - 4px);
  bottom: -5px;
  height: 12px;
  background-image:
    linear-gradient(var(--stake), var(--stake)),
    linear-gradient(var(--stake), var(--stake)),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-size: 1.5px 12px, 1.5px 12px, 1px 3px, 1px 3px, 1px 3px, 100% 1px;
  background-position: 0 0, 100% 0, 25% 9px, 50% 9px, 75% 9px, 0 8px;
  background-repeat: no-repeat;
}

.band {
  padding-left: var(--bleed);
  padding-right: var(--bleed);
  padding-top: 56px;
  padding-bottom: 60px;
}

.band-vellum {
  background-color: var(--vellum);
  background-image: url("grain.svg");
  background-size: 96px 96px;
}

.band-ink {
  background: var(--ink);
  color: var(--bond);
}

.band-ink h2,
.band-ink h3,
.band-ink a {
  color: var(--bond);
}

.band-ink .support {
  color: var(--secondary-on-ink);
}

.band-green {
  background: var(--green);
  color: var(--bond);
}

.band-green a,
.band-green .wordmark {
  color: var(--bond);
}

.masthead {
  background: var(--bond);
  border-bottom: 1px solid var(--rule);
}

.titleblock,
.anchors {
  padding-left: var(--bleed);
  padding-right: var(--bleed);
}

.titleblock {
  padding-top: 16px;
  padding-bottom: 12px;
}

.titleblock p {
  margin: 0;
}

.titleblock .tagline {
  color: var(--graphite);
  font-size: 15px;
  margin-top: 12px;
}

.masthead-phone {
  font-size: 15px;
  margin-top: 4px;
}

.masthead-phone a,
.anchors a {
  text-decoration: none;
  font-weight: 600;
  border-bottom: 2px solid transparent;
}

.anchors {
  border-top: 1px solid var(--rule);
}

.anchors ul {
  list-style: none;
  margin: 0;
  padding: 0 20px 0 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
}

.anchors ul::-webkit-scrollbar {
  display: none;
}

.anchors li {
  margin: 0;
  flex: 0 0 auto;
}

.anchors a {
  display: inline-block;
  padding: 10px 0;
  font-size: 14px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.hero {
  background-color: var(--ink);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.09) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 200px 200px, 200px 200px, 40px 40px, 40px 40px;
  padding-top: 56px;
  padding-bottom: 64px;
}

.hero h1 {
  color: var(--bond);
}

.subhead {
  font-size: 19px;
  max-width: 64ch;
  margin-top: 24px;
  color: rgba(255, 255, 255, 0.85);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.button {
  display: inline-block;
  padding: 13px 24px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  border: 2px solid var(--green);
}

.button-primary {
  background: var(--green);
  color: var(--bond);
}

.button-secondary {
  background: transparent;
  color: var(--green);
}

.band-ink .button-secondary {
  border-color: var(--bond);
  color: var(--bond);
}

.support {
  font-size: 15px;
  color: var(--graphite);
  margin-top: 20px;
  max-width: 64ch;
}

.drawing {
  display: block;
  width: 100%;
  max-width: 540px;
  margin-top: 36px;
  cursor: pointer;
}

.drawing:focus-visible {
  outline: 3px solid var(--bond);
  outline-offset: 4px;
}

.sk {
  display: block;
  width: 100%;
  height: auto;
}

.sk text {
  font-family: var(--text);
  font-weight: 600;
  font-size: 11px;
}

.sk .sk-lab {
  font-family: var(--display);
  font-size: 12px;
}

.sk .sk-tl {
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: rgba(255, 255, 255, 0.72);
}

.sk .sk-tv {
  font-weight: 400;
  font-size: 11px;
  fill: var(--bond);
}

.sk-curb,
.sk-bracket {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.sk-foot {
  opacity: 0.3;
}

.sk-lab-b {
  fill: var(--stake);
}

.sk-tick-b,
.sk-stake {
  transform-box: fill-box;
  transform-origin: center;
}

.js .drawing .sk-curb,
.js .drawing .sk-bracket {
  stroke-dashoffset: 1;
}

.js .drawing .sk-dim {
  opacity: 0;
}

.js .drawing .sk-hatch {
  clip-path: inset(0 100% 0 0);
}

.js .drawing .sk-basin,
.js .drawing .sk-pave-fill {
  fill-opacity: 0;
}

.js .drawing .sk-tick-a {
  opacity: 0;
  transform: translateY(-6px);
}

.js .drawing .sk-tick-b {
  opacity: 0;
  transform: scale(1.4);
}

.js .drawing .sk-lab-b {
  fill: var(--bond);
}

.js .drawing .sk-foot {
  opacity: 1;
}

.js .drawing .sk-block {
  opacity: 0;
  transform: translateY(18px);
}

.js .drawing .sk-stake {
  transform: scale(0);
}

@keyframes sk-trace {
  to { stroke-dashoffset: 0; }
}

@keyframes sk-fade {
  to { opacity: 1; }
}

@keyframes sk-reveal {
  to { clip-path: inset(0 0 0 0); }
}

@keyframes sk-fill-on {
  to { fill-opacity: 1; }
}

@keyframes sk-drop {
  to { opacity: 1; transform: none; }
}

@keyframes sk-stamp {
  to { opacity: 1; transform: scale(1); }
}

@keyframes sk-label {
  to { fill: #F5A03A; }
}

@keyframes sk-dim-foot {
  to { opacity: 0.3; }
}

@keyframes sk-pave {
  to { fill-opacity: 0.15; }
}

@keyframes sk-plant {
  0% { transform: scale(0); }
  80% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.js .drawing.play .sk-curb {
  animation: sk-trace 1400ms linear 0ms forwards;
}

.js .drawing.play .sk-dim-curb {
  animation: sk-fade 150ms cubic-bezier(0.2, 0.7, 0.2, 1) 1400ms forwards;
}

.js .drawing.play .sk-hatch {
  animation: sk-reveal 800ms linear 1550ms forwards;
}

.js .drawing.play .sk-dim-pave {
  animation: sk-fade 150ms cubic-bezier(0.2, 0.7, 0.2, 1) 2350ms forwards;
}

.js .drawing.play .sk-basin-1 {
  animation: sk-fill-on 120ms cubic-bezier(0.2, 0.7, 0.2, 1) 2500ms forwards;
}

.js .drawing.play .sk-basin-2 {
  animation: sk-fill-on 120ms cubic-bezier(0.2, 0.7, 0.2, 1) 2620ms forwards;
}

.js .drawing.play .sk-basin-3 {
  animation: sk-fill-on 120ms cubic-bezier(0.2, 0.7, 0.2, 1) 2740ms forwards;
}

.js .drawing.play .sk-dim-foot {
  animation: sk-fade 150ms cubic-bezier(0.2, 0.7, 0.2, 1) 2900ms forwards;
}

.js .drawing.play .sk-tick-a {
  animation: sk-drop 200ms cubic-bezier(0.2, 0.7, 0.2, 1) 3600ms forwards;
}

.js .drawing.play .sk-tick-b {
  animation: sk-stamp 220ms cubic-bezier(0.2, 0.7, 0.2, 1) 4100ms forwards;
}

.js .drawing.play .sk-lab-b {
  animation: sk-label 220ms cubic-bezier(0.2, 0.7, 0.2, 1) 4100ms forwards;
}

.js .drawing.play .sk-bracket {
  animation: sk-trace 700ms linear 4500ms forwards;
}

.js .drawing.play .sk-foot {
  animation: sk-dim-foot 900ms cubic-bezier(0.2, 0.7, 0.2, 1) 5600ms forwards;
}

.js .drawing.play .sk-block {
  animation: sk-drop 900ms cubic-bezier(0.2, 0.7, 0.2, 1) 5600ms forwards;
}

.js .drawing.play .sk-pave-fill {
  animation: sk-pave 400ms cubic-bezier(0.2, 0.7, 0.2, 1) 6400ms forwards;
}

.js .drawing.play .sk-stake {
  animation: sk-plant 300ms cubic-bezier(0.2, 0.7, 0.2, 1) 7000ms forwards;
}

.strip {
  padding-top: 56px;
  padding-bottom: 64px;
  overflow-x: hidden;
  overflow-x: clip;
}

.scale {
  color: var(--bond);
  margin: 0;
  max-width: 880px;
}

.scale-lead {
  display: block;
  font-family: var(--text);
  font-size: 24px;
  line-height: 1.2;
  font-weight: 400;
  margin-bottom: 28px;
}

.scale-bar {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0;
  padding-top: 52px;
  font-size: clamp(32px, 11vw, 40px);
  font-weight: 800;
  line-height: 1;
}

.scale-rule {
  position: absolute;
  left: 0;
  right: 0;
  top: 16px;
  height: 4px;
  background: var(--bond);
}

.scale-bar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 12px;
  height: 12px;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.5) 1px, transparent 1px);
  background-size: 10% 100%;
  background-repeat: repeat-x;
}

.scale-tick {
  position: absolute;
  top: 0;
  width: 6px;
  height: 36px;
  background: var(--stake);
}

.scale-tick-a {
  left: 0;
}

.scale-tick-b {
  right: 0;
}

.scale-marker {
  position: absolute;
  left: 0;
  right: 0;
  top: -4px;
  height: 22px;
  pointer-events: none;
  transform: translateX(calc(100% - 6px));
}

.scale-marker::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 0;
  width: 10px;
  height: 22px;
  background: var(--stake);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
}

.scale-a,
.scale-b {
  white-space: nowrap;
}

.scale-b {
  color: var(--stake);
}

.scale-vs {
  position: absolute;
  left: 50%;
  top: 6px;
  transform: translateX(-50%);
  padding: 0 10px;
  background: var(--green);
  font-family: var(--text);
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
}

.strip-body {
  max-width: 64ch;
  margin-top: 32px;
  font-size: 18px;
}

.sheet h2 {
  margin-bottom: 24px;
}

.content {
  max-width: 64ch;
}

.services .content,
.how .content {
  max-width: none;
}

.display-sentence {
  margin-top: 28px;
}

.proof-figure {
  margin-bottom: 20px;
}

.proof-kicker,
.proof-tag {
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bond);
  margin: 0;
}

.proof-kicker {
  margin-bottom: 8px;
}

.proof-tag {
  margin-top: 8px;
}

.proof-numeral {
  color: var(--stake);
  font-size: 120px;
  font-weight: 800;
  line-height: 0;
  margin: 0;
}

.pn {
  display: block;
  width: 124px;
  height: 89.5px;
}

.pn path {
  fill: var(--stake);
  stroke: var(--stake);
  stroke-width: 5;
  stroke-linejoin: round;
  stroke-opacity: 0;
}

.proof-text {
  font-size: 20px;
  line-height: 1.5;
  color: var(--bond);
}

.lede {
  font-size: 19px;
}

.tile-anchor {
  position: relative;
  background: var(--vellum);
  padding: 34px 24px 28px;
  margin-bottom: 40px;
}

.tile-anchor::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 6px;
  background: var(--green);
}

.tile-anchor h3 {
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 12px;
}

.marked {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.marked li {
  position: relative;
  padding-left: 20px;
  break-inside: avoid;
}

.marked li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  background: var(--stake);
}

.tile-anchor .marked + p {
  margin-top: 16px;
}

.entry-tier {
  background: var(--bond);
  border-left: 4px solid var(--green);
  padding: 16px 20px;
  margin-top: 24px;
  margin-bottom: 0;
}

.schedule .tile {
  border-top: 1px solid var(--rule);
  padding-top: 28px;
  padding-bottom: 28px;
}

.schedule .tile:last-child {
  border-bottom: 1px solid var(--rule);
}

.schedule h3 {
  margin-bottom: 12px;
}

.schedule .tile-body {
  max-width: 64ch;
}

.schedule .lede {
  font-size: 18px;
}

.schedule ul {
  margin-bottom: 0;
}

.steps {
  list-style: none;
  padding: 0 0 0 40px;
  margin: 0;
  position: relative;
  counter-reset: step;
}

.steps::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--ink);
}

.steps li {
  position: relative;
  counter-increment: step;
  margin: 0 0 32px;
  padding-top: 64px;
}

.steps li:last-child {
  margin-bottom: 0;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: 56px;
  line-height: 1;
  color: var(--green);
}

.station {
  position: absolute;
  left: -40px;
  top: 22px;
  width: 12px;
  height: 12px;
  background: var(--stake);
}

.twin-col + .twin-col {
  margin-top: 56px;
}

.twin h2 {
  margin-bottom: 24px;
}

.memberships-inactive {
  display: none;
}

.memberships h3 {
  font-size: 20px;
  margin-bottom: 4px;
}

.fee-schedule {
  margin: 24px 0 28px;
}

.fee-schedule > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) fit-content(58%);
  column-gap: 20px;
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
}

.fee-schedule > div:last-child {
  border-bottom: 1px solid var(--rule);
}

.fee-schedule dt {
  font-weight: 600;
  margin: 0;
}

.fee-schedule dd {
  font-family: var(--display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.1;
  color: var(--green);
  text-align: right;
  justify-self: end;
  margin: 0;
}

.credentials-title {
  font-size: 20px;
  margin-top: 28px;
  margin-bottom: 8px;
}

.credentials {
  list-style: none;
  padding: 0;
  margin: 0;
}

.credentials li {
  margin: 0;
  padding: 10px 0;
  border-top: 1px solid var(--rule);
}

.credentials li:last-child {
  border-bottom: 1px solid var(--rule);
}

dl {
  margin: 0;
}

.faq-item {
  border-top: 1px solid var(--rule);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--rule);
}

.faq-item summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 18px 40px 18px 0;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background-image: linear-gradient(var(--stake), var(--stake)), linear-gradient(var(--stake), var(--stake));
  background-size: 16px 2px, 2px 16px;
  background-position: center;
  background-repeat: no-repeat;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item summary:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}

.faq-item p {
  padding: 0 40px 20px 0;
  margin: 0;
  max-width: 60ch;
}

.close-line {
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  margin-top: 44px;
}

.contact-line {
  font-size: 18px;
  margin-bottom: 12px;
  overflow-wrap: normal;
}

.contact .support {
  margin-top: 8px;
}

.contact .actions {
  margin-top: 32px;
}

.colophon {
  padding-top: 40px;
  padding-bottom: 44px;
  font-size: 15px;
}

.colophon .lockup {
  margin-bottom: 20px;
}

.colophon p {
  max-width: 64ch;
  margin: 0 0 4px;
}

[id] {
  scroll-margin-top: 16px;
}

@media (min-width: 760px) {
  body {
    font-size: 18px;
  }

  h1 {
    font-size: 84px;
  }

  h2 {
    font-size: 48px;
  }

  h3 {
    font-size: 30px;
  }

  .display-sentence {
    font-size: 28px;
  }

  .name-line {
    font-size: 30px;
  }

  .wordmark {
    font-size: 22px;
  }

  .band {
    padding-top: 80px;
    padding-bottom: 88px;
  }

  .masthead {
    position: sticky;
    top: 0;
    z-index: 1;
  }

  .titleblock {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .titleblock .lockup {
    padding-right: 24px;
  }

  .titleblock .tagline {
    margin: 0;
    padding-left: 24px;
    border-left: 1px solid var(--rule);
    line-height: 1.3;
  }

  .masthead-phone {
    margin: 0;
    padding-left: 24px;
    border-left: 1px solid var(--rule);
    line-height: 1.3;
  }

  .anchors ul {
    gap: 0 32px;
    padding-right: 0;
    overflow: visible;
  }

  .anchors a {
    padding: 12px 0;
    font-size: 15px;
  }

  .hero {
    min-height: 70vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 45%);
    column-gap: 48px;
    align-items: start;
    padding-top: 96px;
    padding-bottom: 72px;
  }

  .drawing {
    margin-top: 8px;
    justify-self: end;
  }

  .subhead {
    font-size: 21px;
    margin-top: 32px;
  }

  .actions {
    margin-top: 36px;
  }

  .strip {
    padding-top: 80px;
    padding-bottom: 88px;
  }

  .scale-lead {
    margin-bottom: 36px;
  }

  .scale-bar {
    font-size: 72px;
    padding-top: 64px;
  }

  .scale-rule {
    top: 16px;
  }

  .scale-tick {
    height: 36px;
  }

  .scale-vs {
    font-size: 17px;
  }

  .strip-body {
    font-size: 19px;
    margin-top: 40px;
  }

  .sheet {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, 1fr);
    column-gap: var(--rail-gap);
  }

  .sheet h2 {
    grid-column: 1;
    margin: 0;
  }

  .sheet .content {
    grid-column: 2;
  }

  .proof {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 48px;
    align-items: start;
  }

  .proof-figure {
    padding-top: 18px;
    margin-bottom: 0;
  }

  .proof-numeral {
    font-size: 200px;
    margin: 0;
  }

  .pn {
    width: 206.6px;
    height: 149.2px;
  }

  .pn path {
    stroke-width: 3;
  }

  .proof-text {
    font-size: 22px;
    max-width: 30ch;
    padding-top: 12px;
  }

  .lede {
    font-size: 21px;
  }

  .tile-anchor {
    padding: 42px 40px 36px;
    margin-bottom: 48px;
  }

  .tile-anchor .lede {
    max-width: 64ch;
  }

  .marked {
    columns: 2;
    column-gap: 40px;
  }

  .marked li {
    margin-top: 0;
  }

  .entry-tier {
    padding: 20px 24px;
    margin-top: 28px;
  }

  .schedule .tile {
    padding-top: 36px;
    padding-bottom: 36px;
  }

  .schedule .lede {
    font-size: 19px;
  }

  .steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 32px;
    padding: 0;
  }

  .steps::before {
    left: 0;
    right: 0;
    top: 82px;
    bottom: auto;
    width: auto;
    height: 3px;
  }

  .steps li {
    margin: 0;
    padding-top: 116px;
  }

  .station {
    left: 0;
    top: 77px;
  }

  .twin {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 48px;
  }

  .twin-col + .twin-col {
    margin-top: 0;
  }

  .twin .content {
    max-width: 48ch;
  }

  .fee-schedule > div {
    grid-template-columns: minmax(0, 1fr) fit-content(62%);
    column-gap: 32px;
    padding: 16px 0;
  }

  .fee-schedule dd {
    font-size: 30px;
  }

  .credentials {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .credentials li {
    padding: 4px 16px;
    border-top: 0;
    border-left: 1px solid var(--rule);
  }

  .credentials li:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .credentials li:last-child {
    border-bottom: 0;
  }

  .close-line {
    font-size: 48px;
    margin-top: 56px;
  }

  .contact .content {
    max-width: none;
  }

  .contact-line {
    font-size: clamp(22px, calc((100vw - 388px) / 17), 32px);
  }

  .contact-line a[href^="mailto:"] {
    display: inline-block;
  }

  .colophon {
    padding-top: 48px;
    padding-bottom: 56px;
  }

  [id] {
    scroll-margin-top: 104px;
  }
}

@media (min-width: 900px) {
  .schedule .tile {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    column-gap: 40px;
  }

  .schedule h3 {
    margin: 0;
  }
}

html {
  scroll-behavior: smooth;
}

.button {
  transition: background-color 160ms, color 160ms, border-color 160ms;
}

.button-primary:hover {
  background: var(--green-deep);
  border-color: var(--green-deep);
}

.button-secondary:hover {
  background: var(--green);
  color: var(--bond);
}

.button:active {
  transform: translateY(1px);
}

.band:not(.band-ink):not(.band-green) .button {
  transition: background-color 160ms, color 160ms, border-color 160ms, transform 160ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 160ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.band:not(.band-ink):not(.band-green) .button:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(27, 31, 29, 0.2);
}

.band:not(.band-ink):not(.band-green) .button:active {
  transform: translateY(1px);
  box-shadow: none;
}

a:hover {
  text-decoration-line: underline;
  text-decoration-color: var(--stake);
  text-decoration-thickness: 2px;
}

.anchors a:hover,
.anchors a.active {
  text-decoration: none;
  border-bottom-color: var(--stake);
}

.masthead-phone a:hover {
  text-decoration: none;
  border-bottom: 2px solid var(--stake);
}

.faq-item summary::after {
  transition: transform 160ms;
}

.js .scale-rule {
  transform: scaleX(0);
  transform-origin: left center;
}

.js .scale-bar::before,
.js .scale-tick,
.js .scale-a,
.js .scale-vs,
.js .scale-b {
  opacity: 0;
}

.js .scale-tick {
  transform: translateY(-14px);
}

.js .scale-bar.drawn .scale-rule {
  transform: scaleX(1);
  transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.js .scale-bar.drawn::before {
  opacity: 1;
  transition: opacity 250ms 450ms;
}

.js .scale-bar.drawn .scale-tick {
  opacity: 1;
  transform: none;
  transition: opacity 200ms 500ms, transform 200ms 500ms;
}

.js .scale-bar.drawn .scale-tick-b {
  transition-delay: 650ms;
}

.js .scale-bar.drawn .scale-a,
.js .scale-bar.drawn .scale-vs,
.js .scale-bar.drawn .scale-b {
  opacity: 1;
  transition: opacity 300ms 700ms;
}

.js .steps::before {
  transform: scaleY(0);
  transform-origin: center top;
}

.js .station {
  opacity: 0;
  transform: scale(0.4);
}

.js .steps.drawn::before {
  transform: none;
  transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.js .steps.drawn .station {
  opacity: 1;
  transform: none;
  transition: opacity 160ms 500ms, transform 160ms 500ms;
}

.js .steps.drawn li:nth-child(2) .station {
  transition-delay: 580ms;
}

.js .steps.drawn li:nth-child(3) .station {
  transition-delay: 660ms;
}

.js .steps.drawn li:nth-child(4) .station {
  transition-delay: 740ms;
}

@media (min-width: 760px) {
  .js .steps::before {
    transform: scaleX(0);
    transform-origin: left center;
  }
}

.js .scale-marker {
  opacity: 0;
  transform: translateX(0);
}

@keyframes scale-settle {
  0% { transform: translateX(0); }
  57% { transform: translateX(calc(106% - 6px)); }
  74% { transform: translateX(calc(98.5% - 6px)); }
  88% { transform: translateX(calc(100.6% - 6px)); }
  100% { transform: translateX(calc(100% - 6px)); }
}

.js .scale-bar.drawn .scale-marker {
  opacity: 1;
  transition: opacity 200ms 800ms;
  animation: scale-settle 2100ms cubic-bezier(0.2, 0.7, 0.2, 1) 1000ms both;
}

.js .scale-bar.drawn.static .scale-marker {
  animation: none;
  transform: translateX(calc(100% - 6px));
}

.js .pn path {
  fill-opacity: 0;
  stroke-opacity: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.js .proof.drawn .pn path {
  fill-opacity: 1;
  stroke-opacity: 0;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 900ms linear 300ms, fill-opacity 300ms cubic-bezier(0.2, 0.7, 0.2, 1) 1200ms, stroke-opacity 300ms cubic-bezier(0.2, 0.7, 0.2, 1) 1200ms;
}

.js .proof.drawn .pn .pn-one {
  transition: stroke-dashoffset 300ms linear, fill-opacity 300ms cubic-bezier(0.2, 0.7, 0.2, 1) 1200ms, stroke-opacity 300ms cubic-bezier(0.2, 0.7, 0.2, 1) 1200ms;
}

.js .proof-kicker,
.js .proof-tag {
  opacity: 0;
}

.js .proof.drawn .proof-kicker,
.js .proof.drawn .proof-tag {
  opacity: 1;
  transition: opacity 300ms cubic-bezier(0.2, 0.7, 0.2, 1) 1500ms;
}

.js .tile-anchor::before {
  transform: scaleX(0);
  transform-origin: left center;
}

.js .tile-anchor .marked li::before {
  opacity: 0;
}

.js .tile-anchor.drawn::before {
  transform: none;
  transition: transform 400ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.js .tile-anchor.drawn .marked li::before {
  opacity: 1;
  transition: opacity 120ms cubic-bezier(0.2, 0.7, 0.2, 1) 400ms;
}

.js .tile-anchor.drawn .marked li:nth-child(2)::before { transition-delay: 460ms; }
.js .tile-anchor.drawn .marked li:nth-child(3)::before { transition-delay: 520ms; }
.js .tile-anchor.drawn .marked li:nth-child(4)::before { transition-delay: 580ms; }
.js .tile-anchor.drawn .marked li:nth-child(5)::before { transition-delay: 640ms; }
.js .tile-anchor.drawn .marked li:nth-child(6)::before { transition-delay: 700ms; }
.js .tile-anchor.drawn .marked li:nth-child(7)::before { transition-delay: 760ms; }
.js .tile-anchor.drawn .marked li:nth-child(8)::before { transition-delay: 820ms; }
.js .tile-anchor.drawn .marked li:nth-child(9)::before { transition-delay: 880ms; }

.js .fee-schedule dd {
  opacity: 0;
  transform: translateY(8px);
}

.js .fee-schedule.drawn dd {
  opacity: 1;
  transform: none;
  transition: opacity 300ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 300ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.js .fee-schedule.drawn > div:nth-child(2) dd { transition-delay: 70ms; }
.js .fee-schedule.drawn > div:nth-child(3) dd { transition-delay: 140ms; }
.js .fee-schedule.drawn > div:nth-child(4) dd { transition-delay: 210ms; }
.js .fee-schedule.drawn > div:nth-child(5) dd { transition-delay: 280ms; }

.js .drawn.static::before,
.js .drawn.static .scale-rule,
.js .drawn.static .scale-tick,
.js .drawn.static .scale-a,
.js .drawn.static .scale-vs,
.js .drawn.static .scale-b,
.js .drawn.static .scale-marker,
.js .drawn.static .station,
.js .drawn.static .pn path,
.js .drawn.static .proof-kicker,
.js .drawn.static .proof-tag,
.js .drawn.static .marked li::before,
.js .drawn.static dd {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js .scale-rule,
  .js .scale-bar::before,
  .js .scale-tick,
  .js .scale-a,
  .js .scale-vs,
  .js .scale-b,
  .js .steps::before,
  .js .station {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .button,
  .faq-item summary::after {
    transition: none;
  }

  .button:active {
    transform: none;
  }

  .band:not(.band-ink):not(.band-green) .button {
    transition: none;
  }

  .band:not(.band-ink):not(.band-green) .button:hover,
  .band:not(.band-ink):not(.band-green) .button:active {
    transform: none;
  }

  .js .scale-marker,
  .js .scale-bar.drawn .scale-marker {
    opacity: 1;
    transform: translateX(calc(100% - 6px));
    animation: none;
    transition: none;
  }

  .js .pn path,
  .js .proof.drawn .pn path {
    fill-opacity: 1;
    stroke-opacity: 0;
    stroke-dashoffset: 0;
    transition: none;
  }

  .js .proof-kicker,
  .js .proof-tag,
  .js .proof.drawn .proof-kicker,
  .js .proof.drawn .proof-tag {
    opacity: 1;
    transition: none;
  }

  .js .tile-anchor::before,
  .js .tile-anchor.drawn::before {
    transform: none;
    transition: none;
  }

  .js .tile-anchor .marked li::before,
  .js .tile-anchor.drawn .marked li::before {
    opacity: 1;
    transition: none;
  }

  .js .fee-schedule dd,
  .js .fee-schedule.drawn dd {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .drawing .sk-curb,
  .js .drawing .sk-bracket {
    stroke-dashoffset: 0;
  }

  .js .drawing .sk-dim,
  .js .drawing .sk-tick-a,
  .js .drawing .sk-tick-b,
  .js .drawing .sk-block {
    opacity: 1;
    transform: none;
  }

  .js .drawing .sk-hatch {
    clip-path: none;
  }

  .js .drawing .sk-basin {
    fill-opacity: 1;
  }

  .js .drawing .sk-pave-fill {
    fill-opacity: 0.15;
  }

  .js .drawing .sk-lab-b {
    fill: var(--stake);
  }

  .js .drawing .sk-foot {
    opacity: 0.3;
  }

  .js .drawing .sk-stake {
    transform: none;
  }

  .js .drawing.play [class^="sk-"] {
    animation: none;
  }
}