.section-label {
  margin: 0 0 1rem;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.manifesto {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  padding: clamp(6rem, 12vw, 11rem) var(--page-gutter);
  background: var(--color-cream);
  isolation: isolate;
}

.manifesto__inner,
.services__inner {
  width: min(100%, var(--content-width));
  margin-inline: auto;
}

.manifesto__inner {
  position: relative;
  z-index: 2;
}

.manifesto__title {
  max-width: 82rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3.1rem, 12vw, 10rem);
  letter-spacing: -0.018em;
  line-height: 0.98;
  word-spacing: 0.06em;
  text-transform: uppercase;
}

.manifesto__line {
  display: block;
}

.manifesto__line + .manifesto__line { margin-top: 0.08em; }

.manifesto__line--accent {
  color: var(--color-hot-pink);
  text-align: right;
}

.manifesto__copy {
  max-width: 36rem;
  margin: 2.5rem 0 0 auto;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 700;
}

.manifesto__shape {
  position: absolute;
  z-index: 1;
  display: block;
  filter: drop-shadow(0 1rem 1.25rem rgb(17 17 17 / 15%));
}

.manifesto__shape--cake {
  top: 9%;
  right: 4%;
  width: clamp(5rem, 10vw, 9rem);
  aspect-ratio: 1;
  border: 0.75rem solid var(--color-white);
  border-radius: 50% 50% 45% 45%;
  background: var(--color-pink);
}

.manifesto__shape--cake::after {
  position: absolute;
  inset: 18% 14% auto;
  height: 18%;
  border-radius: 999px;
  background: var(--color-white);
  content: "";
}

.manifesto__shape--chocolate {
  right: 12%;
  bottom: 9%;
  width: clamp(5rem, 9vw, 8rem);
  aspect-ratio: 1.35;
  border: 0.65rem solid var(--color-ink);
  border-radius: 1.5rem;
  background: var(--color-rose);
  transform: rotate(12deg);
}

.manifesto__shape--berry {
  top: 46%;
  left: 2%;
  width: clamp(4rem, 8vw, 7rem);
  aspect-ratio: 1;
  border-radius: 50% 45% 52% 48%;
  background: var(--color-petal);
  transform: rotate(-14deg);
}

.bio {
  padding: clamp(5rem, 10vw, 9rem) var(--page-gutter);
  background: var(--color-clay);
  color: var(--color-ink);
}

.bio__inner {
  display: grid;
  width: min(100%, 76rem);
  margin-inline: auto;
  align-items: center;
  gap: clamp(2.5rem, 7vw, 7rem);
}

.bio__portrait {
  position: relative;
  max-width: 31rem;
  margin-inline: auto;
  padding: 1rem 1rem 0;
  border-radius: 45% 45% 2rem 2rem;
  background: var(--color-pink);
}

.bio__portrait img {
  max-height: 42rem;
  object-fit: contain;
  object-position: center bottom;
}

.bio__stamp {
  position: absolute;
  right: 0;
  bottom: 1.5rem;
  display: grid;
  width: 6.5rem;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: var(--color-petal);
  color: var(--color-ink);
  font-size: 0.75rem;
  font-weight: 900;
  transform: rotate(8deg);
}

.bio__content h2,
.section-heading h2,
.benefits__heading h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 5.5rem);
  letter-spacing: -0.012em;
  line-height: 1;
  text-transform: uppercase;
}

.bio__content p:not(.section-label) {
  max-width: 38rem;
  font-size: clamp(1rem, 2vw, 1.2rem);
}

.bio__lead {
  margin-top: 2rem;
  font-weight: 800;
}

.services {
  padding: clamp(5rem, 10vw, 9rem) var(--page-gutter);
}

.section-heading {
  display: grid;
  margin-bottom: 3rem;
  gap: 1rem;
}

.section-heading p:last-child {
  max-width: 36rem;
  margin: 0;
  font-weight: 700;
}

.services__grid,
.benefits__rail {
  display: grid;
  gap: 1rem;
}

.service-card,
.benefit-card {
  --card-surface: var(--color-cream);
  min-height: 20rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-card);
}

.service-card h3,
.benefit-card h3 {
  margin: auto 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 3.5rem);
  letter-spacing: -0.008em;
  line-height: 1.02;
  text-transform: uppercase;
}

.service-card,
.benefit-card {
  display: flex;
  flex-direction: column;
}

.service-card,
.benefit-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.service-card { min-height: 24rem; }

:is(.service-card, .benefit-card) > :not(.story-card__media) {
  position: relative;
  z-index: 2;
  max-width: 58%;
}

.story-card__media {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 0;
  width: 58%;
}

.story-card__media img { width: 100%; height: 100%; object-fit: cover; }
.story-card__media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--card-surface) 0%, transparent 78%);
  content: "";
}

.service-card p,
.benefit-card p {
  margin: 0;
  font-weight: 700;
}

.service-card__number,
.benefit-card__number {
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.service-card--clay,
.benefit-card--clay { --card-surface: var(--color-clay); background: var(--color-clay); }
.service-card--blush,
.benefit-card--blush { --card-surface: var(--color-blush); background: var(--color-blush); }
.service-card--rose,
.benefit-card--rose { --card-surface: var(--color-petal); background: var(--color-petal); }
.service-card--cream { --card-surface: var(--color-cream); background: var(--color-cream); }

.benefits {
  padding: clamp(5rem, 10vw, 9rem) var(--page-gutter);
  overflow: hidden;
  background: var(--color-ink);
  color: var(--color-white);
}

.benefits__heading,
.benefits__viewport {
  width: min(100%, var(--content-width));
  margin-inline: auto;
}

.benefits__heading {
  margin-bottom: 3rem;
}

.benefit-card {
  color: var(--color-ink);
}

@media (min-width: 48rem) {
  .bio__stamp { right: -1rem; }
  .bio__inner { grid-template-columns: minmax(18rem, 0.85fr) minmax(0, 1.15fr); }
  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-heading { grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 0.6fr); }
  .section-heading .section-label { grid-column: 1 / -1; }
}

@media (min-width: 80rem) {
  .motion-enhanced .services__grid { display: block; }
  .motion-enhanced .service-card {
    position: sticky;
    top: 7rem;
    margin-bottom: clamp(2rem, 6vw, 5rem);
  }
  .benefits__rail { grid-template-columns: repeat(3, minmax(34rem, 1fr)); }
  .motion-enhanced .benefits__rail { width: max-content; }
  .motion-enhanced .benefit-card { width: min(42rem, 72vw); }
}

@media (prefers-reduced-motion: reduce) {
  .manifesto__shape { transform: none; }
  .motion-enhanced .services__grid { display: grid; }
  .motion-enhanced .service-card { position: static; margin-bottom: 0; }
  .benefits,
  .motion-enhanced .benefits { min-height: auto; }
  .motion-enhanced .benefits__viewport { position: static; }
  .motion-enhanced .benefits__rail { width: auto; grid-template-columns: 1fr; }
  .motion-enhanced .benefit-card { width: auto; }
}