.service-page {
  background: var(--color-bg-primary);
}

.service-header {
  position: absolute;
}

.service-detail-hero {
  position: relative;
  display: flex;
  min-height: 88svh;
  overflow: hidden;
  isolation: isolate;
  align-items: flex-end;
  color: var(--color-text-inverse);
}

.service-detail-hero-image,
.service-detail-hero-shade {
  position: absolute;
  inset: 0;
}

.service-detail-hero-image {
  z-index: -2;
  background-color: var(--color-ink-800);
  background-image: url("https://images.unsplash.com/photo-1516975080664-ed2fc6a32937?auto=format&fit=crop&w=1800&q=85");
  background-position: center;
  background-size: cover;
}

.service-detail-hero-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.service-detail-hero-shade {
  z-index: -1;
  background: linear-gradient(180deg, rgb(23 20 21 / 12%) 24%, rgb(23 20 21 / 88%) 100%);
}

.service-detail-hero-content {
  width: min(100%, 52rem);
  padding: 8rem var(--gutter-mobile) 6rem;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-10);
  color: rgb(255 250 248 / 78%);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

.back-link:hover {
  color: var(--color-gold-300);
}

.service-detail-hero h1 {
  max-width: 10ch;
  margin-top: var(--space-5);
  font-size: clamp(3.75rem, 17vw, 8rem);
}

.service-detail-hero-content > p:not(.eyebrow) {
  max-width: 34rem;
  margin: var(--space-6) 0 0;
  color: rgb(255 250 248 / 84%);
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
}

.service-detail-hero .button {
  margin-top: var(--space-7);
}

.detail-overview,
.detail-process,
.detail-care,
.detail-cta {
  padding: var(--space-11) var(--gutter-mobile);
}

.detail-overview {
  display: grid;
  gap: var(--space-8);
  background: var(--color-bg-secondary);
}

.detail-overview h2,
.detail-process h2,
.detail-care h2,
.detail-cta h2 {
  max-width: 9ch;
  margin-top: var(--space-6);
  font-size: clamp(3rem, 14vw, 6rem);
}

.detail-overview-copy > p,
.detail-process p,
.detail-cta > p:not(.eyebrow) {
  max-width: 34rem;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
}

.detail-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-primary);
}

.detail-meta div {
  display: grid;
  gap: var(--space-2);
}

.detail-meta span,
.detail-section-label {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

.detail-meta strong {
  color: var(--color-text-primary);
  font-family: var(--font-family-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
}

.detail-process {
  display: grid;
  gap: var(--space-8);
  background: var(--color-bg-accent);
}

.detail-section-label {
  display: flex;
  gap: var(--space-5);
}

.detail-section-label span:first-child {
  color: var(--color-gold-700);
  font-family: var(--font-family-display);
  font-size: var(--font-size-lg);
  letter-spacing: 0;
}

.detail-process p + p {
  margin-top: var(--space-5);
}

.detail-care {
  display: grid;
  gap: var(--space-8);
  background: var(--color-bg-secondary);
}

.detail-results {
  display: grid;
  gap: var(--space-8);
  padding: var(--space-11) var(--gutter-mobile);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}

.detail-results h2 {
  max-width: 9ch;
  margin-top: var(--space-6);
  font-size: clamp(3rem, 14vw, 6rem);
}

.detail-results-intro > p:last-child {
  max-width: 28rem;
  margin: var(--space-6) 0 0;
  color: var(--color-ink-300);
  line-height: var(--line-height-relaxed);
}

.result-slot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.result-slot {
  display: flex;
  min-height: 15rem;
  align-items: flex-end;
  padding: var(--space-4);
  background: linear-gradient(145deg, var(--color-rose-900), var(--color-ink-800));
  color: var(--color-rose-100);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

.result-slot-offset {
  margin-top: var(--space-7);
  background: linear-gradient(145deg, var(--color-gold-700), var(--color-ink-800));
}

.care-list {
  border-top: 1px solid var(--color-border-primary);
}

.care-list details {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-border-primary);
}

.care-list summary {
  cursor: pointer;
  font-family: var(--font-family-display);
  font-size: var(--font-size-lg);
  list-style-position: outside;
}

.care-list details p {
  max-width: 35rem;
  margin: var(--space-4) 0 0;
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.care-list ul {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
  padding-left: 1.15rem;
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.detail-cta {
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}

.detail-cta .eyebrow {
  color: var(--color-gold-300);
}

.detail-cta h2 em {
  color: var(--color-gold-300);
}

.detail-cta > p:not(.eyebrow) {
  color: var(--color-ink-300);
  margin-top: var(--space-6);
}

.detail-cta .button {
  margin-top: var(--space-7);
}

@media (min-width: 48rem) {
  .service-detail-hero-content,
  .detail-overview,
  .detail-process,
  .detail-care,
  .detail-cta {
    padding-inline: var(--gutter-tablet);
  }

  .detail-overview,
  .detail-process,
  .detail-care {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-10);
  }

  .detail-results {
    grid-template-columns: minmax(12rem, 0.7fr) minmax(20rem, 1.3fr);
    column-gap: var(--space-10);
    padding-inline: var(--gutter-tablet);
  }

  .detail-overview-copy,
  .detail-process > div:last-child,
  .care-list {
    padding-top: var(--space-7);
  }

  .detail-overview h2,
  .detail-process h2,
  .detail-care h2,
  .detail-cta h2 {
    font-size: clamp(2.75rem, 7vw, 4.75rem);
    overflow-wrap: break-word;
  }

  .detail-care h2 {
    max-width: 12ch;
  }
}

@media (min-width: 64rem) {
  .service-detail-hero-content,
  .detail-overview,
  .detail-process,
  .detail-care,
  .detail-cta {
    padding-inline: var(--gutter-desktop);
  }

  .detail-results {
    padding-inline: var(--gutter-desktop);
  }

  .service-detail-hero-content {
    padding-bottom: var(--space-11);
  }
}