.hero-shell {
  background:
    linear-gradient(to bottom, transparent calc(100% - 70px), #eeecff 100%),
    radial-gradient(ellipse at 50% 27%, #fff 25%, #f8f7ff 66%, #eeecff 100%);
}

.studio-sections {
  position: relative;
  isolation: isolate;
  font-family: var(--font-ui);
  color: #0c154e;
}

.studio-sections::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    url('../images/studio-waves.svg') center bottom / 100% 65% no-repeat,
    radial-gradient(ellipse at 70% 15%, #e8e2ff99, transparent 60%),
    linear-gradient(120deg, #f8f7ff, #f2efff 65%, #eee9ff);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 140px, #000 calc(100% - 100px), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 140px, #000 calc(100% - 100px), transparent);
}

.h3-services {
  isolation: isolate;
  background: transparent;
}

.h3-sections {
  background: none;
}

.h3-services::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    url('../images/service-ribbons.svg?v=3') center / 100% 100% no-repeat,
    radial-gradient(ellipse at 82% 24%, #d8cdfb80 0%, #e3dbfa38 28%, transparent 58%),
    radial-gradient(ellipse at 12% 56%, #cec6f66b 0%, #e6dffc26 30%, transparent 62%),
    radial-gradient(ellipse at 72% 78%, #e0d1f752 0%, transparent 55%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 75px, #000 calc(100% - 150px), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 75px, #000 calc(100% - 150px), transparent);
}

.h3-development::before,
.h3-growth::before {
  display: none;
}

.studio-sections h2,
.studio-sections h3,
.studio-sections button {
  font-family: inherit;
}

.studio-sections > .team {
  background: transparent;
  color: #0c154e;
}

.studio-sections .team-inner {
  border-top: 0;
}

.workflow {
  padding-block: 48px 36px;
  background: transparent;
  color: #0c154e;
  font-family: inherit;
}

.workflow-inner {
  container-type: inline-size;
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  aspect-ratio: 864 / 240;
}

.workflow h2 {
  position: absolute;
  top: .6cqw;
  left: 6.25%;
  font-family: inherit;
  font-size: 2.55cqw;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0;
}

.workflow h2 span { color: #704cff; }

.workflow-path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.workflow-stages { list-style: none; padding: 0; margin: 0; }
.workflow-stage { position: absolute; width: 19%; }
.workflow-stage:nth-child(1) { --stage-color: #7453e5; left: 2.89%; top: 9cqw; }
.workflow-stage:nth-child(2) { --stage-color: #5965d6; left: 29.51%; top: 3cqw; }
.workflow-stage:nth-child(3) { --stage-color: #5378b7; left: 49.77%; top: 3cqw; }
.workflow-stage:nth-child(4) { --stage-color: #8257d6; left: 72.34%; top: 3cqw; }
.workflow-copy { margin-left: 7cqw; }
.workflow-number {
  display: block;
  color: var(--stage-color);
  font-size: 2.8cqw;
  font-weight: 550;
  line-height: 1.15;
  letter-spacing: 0;
  margin-bottom: .6cqw;
}
.workflow h3 {
  font-family: inherit;
  font-size: 1.39cqw;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: 0;
  white-space: nowrap;
  margin-bottom: .9cqw;
}
.workflow p {
  width: auto;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0;
  color: #676589;
}
.workflow-icon {
  position: absolute;
  left: 0;
  top: 4.89cqw;
  display: grid;
  place-items: center;
  width: 5.8cqw;
  height: 5.8cqw;
  border: 1px solid color-mix(in srgb, var(--stage-color) 55%, transparent);
  border-radius: 50%;
  color: var(--stage-color);
  background: linear-gradient(140deg, #ffffffee, #ece6ffb3 60%, #d7cbff99);
  backdrop-filter: blur(8px);
  box-shadow: 0 .6cqw 1.5cqw #6550a820, inset 0 0 1cqw #ffffffaa;
}
.workflow-icon::before {
  content: '';
  position: absolute;
  inset: -.85cqw;
  border: 1px dashed color-mix(in srgb, var(--stage-color) 25%, transparent);
  border-radius: 50%;
}
.workflow-icon svg { width: 62%; height: 62%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.workflow-stage:nth-child(2) .workflow-icon { top: 6.84cqw; }
.workflow-stage:nth-child(3) .workflow-icon,
.workflow-stage:nth-child(4) .workflow-icon { top: 13.21cqw; }

/* Stagger the copy along the wave while keeping icons on its anchor points. */
@media (min-width: 1301px) {
  .workflow-stage:nth-child(2) { top: 1.75cqw; }
  .workflow-stage:nth-child(3) { top: 5cqw; }
  .workflow-stage:nth-child(4) { top: 8.5cqw; width: 22%; }
  .workflow-stage:nth-child(2) .workflow-icon { top: 8.0815cqw; }
  .workflow-stage:nth-child(3) .workflow-icon { top: 11.1972cqw; }
  .workflow-stage:nth-child(4) .workflow-icon { top: 7.6972cqw; }
  .workflow-copy { text-wrap: pretty; }
  .workflow-stage:nth-child(1) .workflow-copy { width: 14cqw; }
  .workflow-stage:nth-child(2) .workflow-copy { width: 12.5cqw; }
  .workflow-stage:nth-child(3) .workflow-copy { width: 14.5cqw; }
  .workflow-stage:nth-child(4) .workflow-copy { width: 14cqw; }
  .workflow .workflow-copy h3 { margin-bottom: 12px; }
}

@media (max-width: 1300px) {
  .workflow { padding-block: 36px; }
  .workflow-inner { aspect-ratio: auto; width: 90%; padding: 0; }
  .workflow h2 { position: static; font-size: 28px; letter-spacing: 0; margin-bottom: 30px; }
  .workflow-path { display: none; }
  .workflow-stages { display: grid; gap: 30px; }
  .workflow-stage:nth-child(n) { position: relative; width: 100%; left: auto; top: auto; }
  .workflow-stage:not(:last-child)::after { content: ''; position: absolute; left: 25px; top: 60px; bottom: -24px; border-left: 1px solid #b2afff40; }
  .workflow-stage:nth-child(n) .workflow-copy { margin-left: 78px; }
  .workflow-number { font-size: 27px; letter-spacing: 0; margin-bottom: 4px; }
  .workflow h3 { font-size: 17px; letter-spacing: 0; margin-bottom: 8px; white-space: normal; }
  .workflow p { width: auto; max-width: 290px; font-size: 16px; letter-spacing: 0; }
  .workflow-stage:nth-child(n) .workflow-icon { top: 12px; width: 52px; height: 52px; box-shadow: 0 5px 12px #6550a820, inset 0 0 10px #ffffffaa; }
  .workflow-icon::before { inset: -6px; }
}

.studio-sections .team-copy p,
.studio-sections .glass-card p {
  color: #676589;
}

.studio-sections .glass-card {
  color: #0c154e;
}


.workflow .workflow-copy p { font-size: 16px; line-height: 1.6; }