.service-section {
  position: relative;
  padding-block: var(--space-6xl);
}

.service-section--sand-light {
  background: var(--sand-light);
  border-top: 2px solid var(--sand);
}

.service-section--border-top {
  border-top: 2px solid var(--sand);
}

.service-section--navy {
  background: var(--navy);
  color: var(--white);
}

@media (max-width: 767px) {
  .service-section {
    padding-block: 80px;
  }
}

.service-hero {
  --hero-bg: var(--navy);
  --hero-fg: var(--white);
  --hero-eyebrow: var(--copper);
  --hero-bars: var(--copper);
  --hero-bars-opacity: 1;
  --hero-gap-title: 20.5px;
  --hero-gap-text: 17.25px;
  --hero-gap-button: 50.5px;
  --hero-pad-bottom: var(--space-6xl);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 160px 0 var(--hero-pad-bottom);
  background: var(--hero-bg);
  color: var(--hero-fg);
}

.header-light .service-hero {
  margin-top: calc(-1 * var(--header-h));
}

.service-hero:last-child {
  margin-bottom: var(--space-6xl);
}

.service-hero--sand,
.service-hero--lemon,
.service-hero--white {
  --hero-fg: var(--navy);
  --hero-eyebrow: var(--navy-light);
  --hero-bars: var(--navy-light);
  --hero-gap-title: 24.5px;
  --hero-gap-text: 25.25px;
  --hero-gap-button: 34.5px;
}

.service-hero--sand {
  --hero-bg: var(--sand);
  --hero-bars-opacity: .5;
}

.service-hero--lemon {
  --hero-bg: var(--lemon);
  --hero-bars: var(--navy);
  --hero-pad-bottom: var(--space-7xl);
}

.service-hero--white {
  --hero-bg: color-mix(in srgb, var(--sand-light) 50%, var(--white));
  --hero-pad-bottom: var(--space-7xl);
  border: 1px solid var(--sand);
}

.service-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.service-hero--navy .service-hero__inner,
.service-hero--white .service-hero__inner {
  align-items: center;
  text-align: center;
}

.service-hero__eyebrow {
  color: var(--hero-eyebrow);
}

.service-hero__title {
  max-width: 800px;
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: calc(70 / 64);
  letter-spacing: -0.03em;
}

.service-hero__eyebrow + .service-hero__title {
  margin-top: var(--hero-gap-title);
}

.service-hero__text {
  max-width: 44rem;
  margin-top: var(--hero-gap-text);
}

.service-hero__text + .service-hero__text {
  margin-top: var(--space-4xs);
}

.service-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: inherit;
  gap: var(--space-3xs);
  margin-top: var(--hero-gap-button);
}

.service-hero--navy .service-hero__actions,
.service-hero--white .service-hero__actions {
  justify-content: center;
}

.service-hero__action {
  display: grid;
  justify-items: center;
  gap: var(--space-5xs);
}

.service-hero__note {
  opacity: .8;
}

.service-hero--lemon .service-hero__button,
.service-page--lemon .site-header__bar .btn--primary {
  --btn-bg: var(--white);
  --btn-bg-hover: color-mix(in srgb, var(--white) 55%, var(--lemon));
}

.service-page--sand .site-header,
.service-page--white .site-header {
  --header-line: rgb(48 49 74 / .3);
}

.service-page--lemon .site-header {
  --header-line: rgb(48 49 74 / .2);
}

.service-hero__bars {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1074px;
  height: 58.14px;
  margin-left: -537px;
  background: var(--hero-bars);
  opacity: var(--hero-bars-opacity);
  -webkit-mask: url("../../img/services/hero-bars-top.svg") 0 0 / 100% 100% no-repeat;
  mask: url("../../img/services/hero-bars-top.svg") 0 0 / 100% 100% no-repeat;
}

.service-hero__donut {
  --art-donut-fill: var(--navy-light);
  position: absolute;
  top: -86px;
  left: calc(50% + 282px);
  width: 600px;
  height: 600px;
  opacity: .5;
  pointer-events: none;
}

.service-clients {
  overflow: hidden;
  padding-block: var(--space-6xl) 88px;
  background: var(--sand-light);
  border-bottom: 2px solid var(--sand);
  text-align: center;
}

.service-clients__bars {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1074px;
  max-width: none;
  height: 49px;
  margin-left: -537px;
}

.service-clients__text {
  text-wrap: balance;
}

.service-clients__logos {
  margin-top: var(--space-l);
}

@media (prefers-reduced-motion: no-preference) {
  .service-hero__bars,
  .service-clients__bars {
    animation: service-bars 1.6s cubic-bezier(.33, 1, .68, 1) .2s both;
  }
}

@keyframes service-bars {
  from {
    clip-path: inset(0 50%);
  }

  to {
    clip-path: inset(0 0);
  }
}

@media (max-width: 767px) {
  .service-hero {
    --hero-gap-title: 12px;
    --hero-gap-text: 20px;
    --hero-gap-button: 24px;
    padding-top: calc(var(--header-h) + 58px);
  }

  .service-hero:last-child {
    margin-bottom: 80px;
  }

  .service-hero__title {
    line-height: var(--lh-display);
    letter-spacing: var(--ls-display);
  }

  .service-hero__donut {
    display: none;
  }

  .service-clients {
    padding-block: var(--space-6xl) 80px;
  }

  .service-clients__logos {
    margin-top: var(--space-m);
    column-gap: var(--space-s);
  }
}

.service-features__header,
.service-features__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-l);
}

.service-features__header {
  margin-bottom: var(--space-l);
}

.service-features__heading {
  display: grid;
  gap: var(--space-3xs);
}

.service-features__eyebrow,
.service-process__eyebrow {
  opacity: .7;
}

.service-features__intro {
  align-self: end;
  line-height: 22px;
}

.service-features__grid {
  position: relative;
  isolation: isolate;
}

.service-features__art {
  position: absolute;
  z-index: -1;
  top: 110px;
  left: calc(50% - 205px);
  width: 440px;
  pointer-events: none;
}

.service-features__card {
  display: flex;
  flex-direction: column;
  min-height: 558px;
  padding: 52px var(--space-l) var(--space-l);
  border: 1px solid var(--sand);
  background: rgb(249 249 246 / .5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.service-features__card--plain {
  gap: var(--space-xs);
  height: 100%;
  min-height: 0;
}

.service-features__card-head {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.service-features__number,
.service-process__number {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--copper);
}

.service-features__title {
  font-size: var(--fs-body-large);
  line-height: 1.4;
  letter-spacing: -0.03em;
}

.service-features__icon {
  align-self: center;
  margin-block: auto;
  padding-block: var(--space-l);
  box-sizing: content-box;
}

.service-features__text {
  line-height: 22px;
}

.service-features__more {
  display: grid;
  gap: var(--space-2xs);
  margin-top: var(--space-m);
  font-size: var(--fs-body-small);
  line-height: 20px;
  letter-spacing: -0.02em;
  color: var(--navy-light);
}

.service-features__more .service-features__list {
  padding-left: 21px;
  list-style: disc;
}

.service-features__summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-l);
  margin-top: var(--space-l);
  padding-top: var(--space-l);
  border-top: 1px solid var(--sand);
}

.service-process__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 504px);
  gap: var(--space-l) var(--space-xs);
}

.service-process.service-section {
  padding-bottom: calc(var(--space-6xl) - var(--space-m));
}

.service-process__intro {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-2xs);
  max-width: 392px;
  padding-top: 4px;
}

.service-process__action {
  display: grid;
  justify-items: start;
  gap: var(--space-5xs);
  margin-top: 28px;
}

.service-process__note {
  padding-left: 35px;
}

.service-process__steps,
.service-process__step {
  border-color: var(--sand);
}

.service-process__step:last-child {
  border-bottom: 0;
}

.service-process__question {
  justify-content: flex-start;
  gap: 0;
  padding-block: var(--space-m);
  line-height: 1.4;
}

.service-process__number {
  flex: none;
  width: 59px;
}

.service-process__step-title {
  flex: 1;
  padding-right: var(--space-xs);
}

.service-process__question .accordion__toggle {
  width: 50px;
  height: 29px;
}

.service-process__answer {
  gap: var(--space-2xs);
  max-width: none;
  padding: 4px 0 var(--space-m) 59px;
  font-size: var(--fs-body-small);
  line-height: 20px;
  letter-spacing: -0.02em;
}

ul.service-process__list {
  display: grid;
  gap: var(--space-5xs);
  padding-left: 21px;
  list-style: disc;
}

@media (max-width: 1023px) {
  .service-features__header,
  .service-features__grid,
  .service-features__summary,
  .service-process__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-features__header,
  .service-features__summary {
    gap: var(--space-xs);
  }

  .service-features__art {
    display: none;
  }

  .service-features__card:not(.service-features__card--plain) {
    min-height: 480px;
  }
}

@media (max-width: 767px) {
  .service-features__header {
    margin-bottom: var(--space-m);
  }

  .service-features__heading {
    gap: var(--space-5xs);
  }

  .service-features__intro {
    font-size: var(--fs-body-small);
    line-height: 20px;
    letter-spacing: -0.02em;
  }

  .service-features__card {
    padding: var(--space-s) var(--space-xs);
  }

  .service-features__card:not(.service-features__card--plain) {
    min-height: 400px;
  }

  .service-features__number,
  .service-process__number {
    font-size: 1.25rem;
  }

  .service-features__title {
    font-size: var(--fs-body);
  }

  .service-features__icon {
    padding-block: var(--space-s);
  }

  .service-features__text {
    font-size: var(--fs-body-small);
    line-height: 20px;
    letter-spacing: -0.02em;
  }

  .service-features__more {
    margin-top: var(--space-xs);
  }

  .service-features__summary {
    margin-top: var(--space-m);
    padding-top: var(--space-m);
  }

  .service-process.service-section {
    padding-bottom: calc(80px - var(--space-xs));
  }

  .service-process__action {
    margin-top: var(--space-3xs);
  }

  .service-process__note {
    padding-left: var(--space-3xs);
  }

  .service-process__question {
    padding-block: var(--space-xs);
  }

  .service-process__number {
    width: 44px;
  }

  .service-process__answer {
    padding: 0 0 var(--space-xs) 44px;
  }
}

.service-cases {
  padding-block: 135px var(--space-7xl);
}

.service-cases .section-heading__main {
  max-width: 432px;
}

.service-results {
  padding-block: 132px var(--space-6xl);
}

.service-results .section-heading {
  justify-content: center;
  text-align: center;
}

.service-results .section-heading__main {
  gap: var(--space-2xs);
  justify-items: center;
}

.service-results .section-heading__title {
  line-height: 1.09375;
  letter-spacing: -0.03em;
}

.service-results__stats {
  margin-top: 44px;
}

.service-results__quote {
  margin-top: 100px;
}

.service-results .testimonial {
  max-width: 880px;
}

.service-faq {
  padding-block: var(--space-6xl) 110px;
}

.service-faq .faq__intro {
  gap: var(--space-l);
}

.service-faq .faq__intro .eyebrow {
  margin-bottom: calc(var(--space-2xs) - var(--space-l));
}

.service-faq .faq__intro .btn {
  margin-top: 0;
}

@media (max-width: 767px) {
  .service-cases {
    padding-block: 84px 80px;
  }

  .service-cases .section-heading {
    gap: var(--space-3xs);
  }

  .service-results {
    padding-block: 84px 80px;
  }

  .service-results .section-heading__title {
    font-size: var(--fs-h2);
    line-height: 1.15625;
  }

  .service-results__stats {
    margin-top: var(--space-m);
  }

  .service-results__quote {
    margin-top: 80px;
  }

  .service-faq {
    padding-block: 80px var(--space-l);
  }

  .service-faq .faq__intro {
    gap: var(--space-xs);
  }

  .service-faq .faq__intro .eyebrow {
    margin-bottom: calc(var(--space-5xs) - var(--space-xs));
  }
}

.service-features__intro {
  display: grid;
  justify-items: start;
  gap: var(--space-4xs);
}

.service-features__link {
  margin-top: var(--space-5xs);
}

.service-highlights__layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--space-2xl);
  align-items: start;
}

.service-highlights__intro,
.service-highlights__body {
  display: grid;
  justify-items: start;
  gap: var(--space-3xs);
}

.service-highlights__eyebrow {
  opacity: .7;
}

.service-highlights__text,
.service-highlights__after {
  font-size: var(--fs-body-large);
  line-height: var(--lh-body-large);
  letter-spacing: var(--ls-body-large);
}

.service-highlights__list {
  flex-direction: column;
  gap: var(--space-4xs);
  font-size: var(--fs-body-large);
  line-height: var(--lh-body-large);
  letter-spacing: var(--ls-body-large);
}

.service-highlights__list li {
  align-items: flex-start;
}

.service-highlights__list .check-list__icon {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: .15em;
}

.service-highlights + .service-highlights:not(.service-section--sand-light) {
  border-top: 1px solid var(--border-gray);
}

.service-cta.service-section {
  padding-block: var(--space-5xl);
}

@media (max-width: 1023px) {
  .service-highlights__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-m);
  }
}

@media (max-width: 767px) {
  .service-cta.service-section {
    padding-block: var(--space-2xl);
  }
}
