.services-hero,
.services-list,
.services-packages {
  padding: var(--space-lg) 0;
}

.services-hero {
  padding-bottom: 0;
}

.services-hero__inner,
.services-packages__inner {
  width: min(100% - 2.5rem, 40rem);
  margin-inline: auto;
}

.services-hero__mark {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: var(--space-md);
}

.services-hero__icon {
  width: 4.25rem;
  height: 4.25rem;
  flex: 0 0 auto;
}

.services-hero__icon svg,
.services-card__icon svg,
.services-package__icon svg,
.services-card__clock svg {
  width: 100%;
  height: 100%;
}

.services-hero__mark .eyebrow {
  margin: 0;
  font-size: 1.05rem;
  font-size: 1.8rem;
}

.services-hero__title {
  margin-bottom: var(--space-sm);
}

.services-hero__intro {
  color: var(--color-text-muted);
  font-size: 1.125rem;
  line-height: 1.6;
}

.services-list {
  display: grid;
  gap: 1.15rem;
  width: min(100% - 2.5rem, 40rem);
  margin-inline: auto;
}

.services-card {
  padding: 1.2rem 1.15rem 1.35rem;
  border-radius: 1.6rem;
}

.services-card {
  background: var(--color-surface);
  border: 1px solid rgba(82, 66, 129, 0.08);
  box-shadow: 0 10px 30px rgba(82, 66, 129, 0.04);
}

.services-card--warm {
  background: var(--color-section-warm);
  border-color: transparent;
  box-shadow: none;
}

.services-card__heading,
.services-package__icon {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.services-card__icon,
.services-package__icon {
  width: 3.4rem;
  height: 3.4rem;
  flex: 0 0 auto;
}

.services-card__heading h2,
.services-package h3 {
  margin: 0;
}

.services-card__photo {
  margin: var(--space-md) 0 0;
  overflow: hidden;
  border-radius: 1.15rem;
}

.services-card__image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.services-card__duration {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: var(--space-md) 0 0.85rem;
  color: var(--color-text-muted);
  font-family: var(--font-secondary);
  font-size: 0.98rem;
}

.services-card__clock {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-text-muted);
}

.services-card__lead,
.services-card__text,
.services-package__intro,
.services-package__ideal,
.services-steps__body {
  color: var(--color-text-muted);
  font-size: 1.05rem;
  font-family: var(--font-secondary);
  line-height: 1.6;
}

.services-card__lead {
  margin-bottom: 0.9rem;
}

.services-card__lead > :last-child,
.services-card__text > :last-child,
.services-package__intro > :last-child,
.services-steps__body > :last-child {
  margin-bottom: 0;
}

.services-card__points,
.services-package__includes {
  margin: var(--space-md) 0 0;
  padding-left: 1.15rem;
  color: var(--color-text);
  font-family: var(--font-secondary);
}

.services-card__points li + li,
.services-package__includes li + li,
.services-steps__body li + li {
  margin-top: 0.45rem;
}

.services-card .button,
.services-package .button {
  width: 100%;
  min-width: 0;
  margin-top: var(--space-lg);
}

.services-process {
  margin-top: var(--space-lg);
}

.services-process__intro {
  margin: 0 0 var(--space-md);
  color: var(--color-text);
  font-family: var(--font-secondary);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.45;
}

.services-steps {
  --step-gap: 1.15rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  column-gap: var(--step-gap);
  row-gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.services-steps__item {
  display: contents;
}

.services-steps__head {
  position: relative;
  display: flex;
  flex: 0 1 9.2rem;
  flex-direction: column;
  align-items: center;
  align-self: flex-start;
  order: 0;
  width: 9.2rem;
  max-width: calc((100% - var(--step-gap)) / 2);
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.services-steps__head:not(.is-last)::after {
  content: "";
  position: absolute;
  top: 0.84rem;
  left: calc(50% + 1.2rem);
  width: calc(100% + var(--step-gap) - 2.4rem);
  border-top: 2px dotted #d9cfe4;
}

.services-steps__number {
  display: inline-grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-secondary);
  font-size: 0.92rem;
  font-weight: 600;
}

.services-steps__title {
  display: block;
  margin: 0.4rem 0 0;
  font-family: var(--font-secondary);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
}

html.js .services-steps__item:not(.is-active) .services-steps__number,
html.js .services-steps__item:not(.is-active) .services-steps__title,
html.js .services-steps__item:not(.is-active) .services-steps__kicker {
  opacity: 0.4;
}

html.js .services-steps__item:not(.is-active) .services-steps__body {
  display: none;
}

.services-steps__kicker {
  display: block;
  margin: 0.15rem 0 0;
  color: var(--color-text-muted);
  font-family: var(--font-secondary);
  font-size: 0.92rem;
}

.services-steps__body {
  flex: 1 1 100%;
  order: 1;
  margin-top: 0;
}

.services-steps__body ul {
  margin: 0.85rem 0 0;
  padding-left: 1.15rem;
}

.services-steps__body li strong {
  display: block;
  color: var(--color-text);
}

.services-packages__list {
  display: grid;
  gap: 1rem;
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
}

.services-package {
  padding: 1.3rem 1.15rem 1.4rem;
  border-radius: 1.5rem;
  background: var(--color-footer);
}

.services-package__icon {
  margin-bottom: var(--space-sm);
}

.services-package h3 {
  margin-bottom: var(--space-md);
}

.services-package__ideal {
  margin-top: var(--space-md);
  color: var(--color-text);
}

.services-package__ideal strong,
.services-package__applies {
  color: var(--color-text);
  font-weight: 700;
  font-family: var(--font-secondary);
}

.services-package__applies {
  margin: var(--space-md) 0 0.4rem;
}

.services-package__includes {
  color: var(--color-text);
  font-weight: 700;
}

.services-page .button--peach svg path {
  fill: #77462f;
}

@media (min-width: 768px) {
  .services-hero__inner,
  .services-list,
  .services-packages__inner {
    width: min(100% - 4rem, 42rem);
  }
}

@media (min-width: 1024px) {
  .services-hero,
  .services-list,
  .services-packages {
    padding: 4.5rem 0;
  }

  .services-hero {
    padding-bottom: 0;
  }

  .services-hero__inner,
  .services-list,
  .services-packages__inner {
    width: min(100% - 5rem, var(--container));
  }

  .services-hero__mark .eyebrow {
    font-size: 1.4rem;
    letter-spacing: 0.16em;
  }

  .services-hero__intro {
    max-width: 46rem;
  }

  .services-card:not(:has(.services-card__photo)) {
    display: grid;
    grid-template-columns: minmax(15rem, 0.36fr) minmax(0, 0.64fr);
    column-gap: 2.75rem;
    align-items: start;
    padding: 1.8rem 2rem;
  }

  .services-card:not(:has(.services-card__photo)) .services-card__heading,
  .services-card:not(:has(.services-card__photo)) .services-card__duration,
  .services-card:not(:has(.services-card__photo)) > .button {
    grid-column: 1;
  }

  .services-card:not(:has(.services-card__photo)) .services-card__lead,
  .services-card:not(:has(.services-card__photo)) .services-card__text,
  .services-card:not(:has(.services-card__photo)) .services-card__points,
  .services-card:not(:has(.services-card__photo)) .services-process {
    grid-column: 2;
  }

  .services-card:has(.services-card__photo) {
    --media: min(22rem, 34%);
    position: relative;
    min-height: 18rem;
    padding: 1.6rem 1.75rem 1.6rem calc(1.6rem + var(--media) + 1.75rem);
  }

  .services-card__photo {
    position: absolute;
    top: 1.6rem;
    left: 1.6rem;
    width: var(--media);
    height: min(28rem, calc(100% - 3.2rem));
    margin: 0;
  }

  .services-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .services-card .button,
  .services-package .button {
    width: auto;
  }

  .services-packages__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 1.25rem;
  }

  .services-package {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.6rem 1.5rem 1.5rem;
  }

  .services-package .button {
    margin-top: auto;
  }
}