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

.service-card {
  text-align: left;
  border: 1px solid var(--line);
  background: #fbfaf5;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  min-height: 252px;
  transition: background .2s, border-color .2s, transform .2s
}

.service-card:hover {
  background: #fffdf7;
  border-color: #9ca88e;
  transform: translateY(-3px)
}

.service-card__top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 23px
}

.service-icon {
  display: flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  color: #5b705a
}

.service-icon svg {
  width: 43px;
  height: 43px
}

.service-tag {
  font-size: 10px;
  background: #e8edde;
  padding: 6px 8px;
  border-radius: 5px;
  white-space: nowrap
}

.service-arrow {
  font-size: 21px;
  margin-left: auto;
  color: #7e8977
}

.service-card__title {
  font-weight: 650;
  font-size: 21px;
  letter-spacing: -.4px;
  line-height: 1.35;
  margin-bottom: 10px
}

.service-card__description {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
  max-width: 290px
}

.service-card__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 23px;
  font-size: 12px
}

.service-card__bottom>span {
  font-size: 17px
}

.section-note {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  margin: 21px 0 0;
  max-width: 850px
}

.section-note>span {
  font-size: 15px
}

.faq-item {
  border-bottom: 1px solid #d3d8ca
}

.faq-item:first-child {
  border-top: 1px solid #d3d8ca
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 16px;
  font-weight: 650;
  padding: 22px 0;
  line-height: 1.5
}

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

.faq-item summary::after {
  content: '+';
  font-size: 23px;
  font-weight: 400;
  flex-shrink: 0
}

.faq-item[open] summary::after {
  content: '−'
}

.faq-item p {
  color: var(--muted);
  font-size: 15px;
  max-width: 90%;
  margin-bottom: 22px
}

.faq-item[open] summary {
  padding-bottom: 13px
}

dialog {
  width: min(520px, calc(100% - 32px));
  padding: 40px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
  max-height: calc(100% - 40px);
  overflow-y: auto
}

dialog::backdrop {
  background: #14231990;
  backdrop-filter: blur(5px)
}

dialog h2 {
  font-size: 31px
}

dialog p {
  font-size: 16px
}

dialog .eyebrow {
  font-size: 11px;
  padding-right: 20px
}

dialog .muted {
  font-size: 14px
}

.dialog-close {
  position: absolute;
  right: 14px;
  top: 12px;
  border: 0;
  background: transparent;
  font-size: 29px;
  width: 40px;
  height: 40px;
  border-radius: 50%
}

.dialog-close:hover {
  background: #e5e8dc
}




body:has(dialog[open]) {
  overflow: hidden
}

@media(max-width:900px) {
  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .service-card {
    padding: 22px
  }

  .service-card__title {
  font-weight: 650;
    font-size: 21px
  }
}

@media(max-width:640px) {
  .services-grid {
    grid-template-columns: 1fr;
    gap: 11px
  }

  .service-card {
    min-height: 225px;
    padding: 22px
  }

  .service-card__top {
    margin-bottom: 16px
  }

  .service-card__description {
    max-width: 100%;
    font-size: 15px
  }

  .service-card__title {
  font-weight: 650;
    font-size: 21px
  }

  .service-card__bottom {
    padding-top: 18px;
    font-size: 13px
  }



  .section-note {
    font-size: 12px
  }

  .faq-item summary {
    font-size: 16px;
    padding-block: 19px
  }

  dialog {
    padding: 32px 23px
  }

  dialog h2 {
    font-size: 27px
  }
}

/* Both visit cards and the contact panel use the same location links. */
.location-list {
  display: grid;
  gap: 10px;
}

.location-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: 15px;
  line-height: 1.5;
}

.location-link > span:first-child {
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-color: #8a967b;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.location-link:hover > span:first-child {
  text-decoration-color: currentColor;
}

.contact-addresses .location-list {
  margin-top: 12px;
  gap: 12px;
}

.contact-addresses .location-link {
  font-size: 16px;
}

.contact-addresses .location-hint {
  font-size: 13px;
  color: #bac7b2;
  margin-top: 12px;
}