/* Keep Services section introductions within a comfortable reading measure. */
.page-services :is(#recurring-service-levels, #filings, #project-options) .section-heading > p {
  max-width: 70ch;
  text-wrap: balance;
}

/* Project services use two equal columns with an explicit fee for each item. */
#project-options {
  background: var(--cream);
  padding-block: 48px;
}
#project-options .section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title action" "description description";
  align-items: end;
  gap: 12px 40px;
  max-width: none;
  margin-bottom: 28px;
}
#project-options .section-heading h2 {
  grid-area: title;
}
#project-options .section-heading > p {
  grid-area: description;
  max-width: 72ch;
  margin: 0;
  color: var(--muted);
}
#project-options .project-ledger,
#project-options .project-footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 48px;
  max-width: none;
  border: 0;
}
#project-options .project-service-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  grid-template-areas: "title price" "description description";
  align-items: start;
  align-content: start;
  gap: 12px 24px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
#project-options .project-service-row:nth-child(n + 3) {
  padding-top: 24px;
  border-top: 1px solid transparent;
}
#project-options .project-service-title {
  grid-area: title;
  min-width: 0;
  margin: 0;
  color: var(--ink);
}
#project-options .project-price {
  grid-area: price;
  justify-self: end;
  margin: 0;
  color: var(--ink);
  white-space: nowrap;
}
#project-options .project-service-description {
  grid-area: description;
  min-width: 0;
}
#project-options .project-service-description p {
  max-width: 56ch;
  margin: 0;
  text-wrap: balance;
}
#project-options .project-service-description p + p {
  margin-top: var(--space-paragraph);
}
#project-options .project-footer {
  margin-top: 28px;
}
#project-options .project-support-note {
  min-width: 0;
  margin: 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--line);
}
#project-options .project-support-note p {
  text-wrap: pretty;
}
#project-options .project-enquiry {
  grid-area: action;
  justify-self: end;
  position: relative;
  width: auto;
  min-height: 52px;
  padding: 12px 22px;
  border: 1px solid var(--navy-deep);
  background: var(--navy-deep);
  color: var(--white);
  text-align: center;
  text-decoration: none;
  box-shadow: none;
  transition: background-color .18s, color .18s, border-color .18s, transform .18s;
}
#project-options .project-enquiry::after {
  display: none;
}
#project-options .project-enquiry:hover,
#project-options .project-enquiry:focus-visible {
  background: #17394f;
  border-color: #17394f;
  transform: translateY(-2px);
}
#project-options .project-enquiry:focus-visible {
  outline: 2px solid var(--navy-deep);
  outline-offset: 4px;
}
@media (max-width: 900px) {
  #project-options .project-ledger,
  #project-options .project-footer {
    grid-template-columns: minmax(0, 1fr);
  }
  #project-options .project-service-row:nth-child(n + 2) {
    padding-top: 24px;
    border-top: 1px solid transparent;
  }
}
@media (max-width: 760px) {
  #project-options .section-heading {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "description" "action";
  }
  #project-options .project-service-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "price" "description";
  }
  #project-options .project-price {
    justify-self: start;
  }
  #project-options .project-enquiry {
    justify-self: start;
    max-width: 100%;
    margin-top: 4px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #project-options .project-enquiry {
    transition: none;
  }
  #project-options .project-enquiry:hover,
  #project-options .project-enquiry:focus-visible {
    transform: none;
  }
}