/* Portrait silhouettes and a single native sticky-card scroll model — 2026-09-16 */
.gj-phase-list article {
  top: 72px;
  min-height: calc(100svh - 72px);
  height: calc(100svh - 72px);
}

.gj-founder-portrait .gj-silhouette,
.gj-cofounder-portrait .gj-silhouette {
  display: block !important;
  left: 50%;
  bottom: -1%;
  width: min(76%, 620px);
  height: 91%;
  aspect-ratio: auto;
  border-radius: 0;
  background: url("../silhouettes/founder-longhair-suit.svg") center bottom / contain no-repeat;
  box-shadow: none;
  opacity: .72;
  filter: drop-shadow(0 28px 58px rgba(66, 230, 164, .13));
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  pointer-events: none;
}

.gj-founder-portrait .gj-silhouette::before,
.gj-cofounder-portrait .gj-silhouette::before {
  content: none;
}

.gj-founder-portrait .gj-silhouette i,
.gj-cofounder-portrait .gj-silhouette i {
  inset: 17% 5% auto;
  background: linear-gradient(90deg, transparent, rgba(98, 242, 185, .42), transparent);
  box-shadow: 0 118px rgba(65, 230, 164, .13), 0 236px rgba(65, 230, 164, .08), 0 354px rgba(65, 230, 164, .05);
  mix-blend-mode: screen;
}

.gj-cofounder-portrait .gj-silhouette {
  left: 51%;
  bottom: -2%;
  width: min(72%, 570px);
  height: 90%;
  background-image: url("../silhouettes/cofounder-woman.svg");
  opacity: .47;
  filter: drop-shadow(0 26px 52px rgba(116, 76, 68, .12));
}

.gj-cofounder-portrait .gj-silhouette i {
  background: linear-gradient(90deg, transparent, rgba(170, 91, 78, .36), transparent);
  box-shadow: 0 116px rgba(170, 91, 78, .11), 0 232px rgba(66, 128, 112, .08);
}

.gj-together-art {
  isolation: isolate;
}

.gj-together-art::before,
.gj-together-art::after {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: -3%;
  width: 48%;
  height: 78%;
  background: center bottom / contain no-repeat;
  opacity: .24;
  pointer-events: none;
}

.gj-together-art::before {
  left: 17%;
  background-image: url("../silhouettes/founder-longhair-suit.svg");
  filter: drop-shadow(0 20px 55px rgba(66, 230, 164, .16));
  transform: rotate(-2deg);
}

.gj-together-art::after {
  right: 14%;
  background-image: url("../silhouettes/cofounder-woman.svg");
  filter: drop-shadow(0 20px 55px rgba(195, 92, 76, .13));
  transform: rotate(2deg);
}

.gj-together-art > * {
  z-index: 3;
}

.gj-together-art > span,
.gj-together-art > small,
.gj-together-art .gj-founder-mark,
.gj-together-art .gj-together-equation,
.gj-together-art .gj-dual-orbit {
  position: absolute;
}

@media (max-width: 900px) {
  .gj-phase-list article {
    top: 64px;
    min-height: calc(100svh - 64px);
    height: calc(100svh - 64px);
  }

  .gj-founder-portrait .gj-silhouette {
    left: 56%;
    width: min(62%, 360px);
    height: 94%;
    opacity: .58;
  }

  .gj-cofounder-portrait .gj-silhouette {
    left: 50%;
    width: min(68%, 390px);
    opacity: .42;
  }

  .gj-together-art::before,
  .gj-together-art::after {
    width: 58%;
    height: 70%;
    opacity: .19;
  }

  .gj-together-art::before { left: 6%; }
  .gj-together-art::after { right: 3%; }
}

/* Desktop content rhythm: keep full-bleed scenery, pull the readable layout inward. */
@media (min-width: 901px) {
  .group-site,
  .group-site-v2,
  .group-journey {
    --comfortable-content: 1220px;
    --comfortable-gutter: max(
      clamp(40px, 7vw, 120px),
      calc((100vw - var(--comfortable-content)) / 2)
    );
  }

  /* Group homepage — intentionally excludes .g-hero and .g-hero-v2. */
  :is(.group-site, .group-site-v2) :is(
    .g-group-intro,
    .g-business-section,
    .g-loop-section,
    .g-strength-section,
    .g-brands-section,
    .g-contact-section
  ) {
    padding-left: var(--comfortable-gutter);
    padding-right: var(--comfortable-gutter);
  }

  :is(.group-site, .group-site-v2) :is(
    .g-section-head,
    .g-business-story-stage,
    .g-strength-grid,
    .g-metrics
  ) {
    width: 100%;
    max-width: var(--comfortable-content);
    margin-left: auto;
    margin-right: auto;
  }

  :is(.group-site, .group-site-v2) .g-contact-copy {
    width: min(100%, 760px);
  }

  /* Journey — preserve full-width section colour fields and hero artwork. */
  .group-journey :is(
    .gj-prologue,
    .gj-founder-intro,
    .gj-together,
    .gj-evolution,
    .gj-next
  ) {
    padding-left: var(--comfortable-gutter);
    padding-right: var(--comfortable-gutter);
  }

  .group-journey .gj-phase-list article {
    padding-left: var(--comfortable-gutter);
    padding-right: var(--comfortable-gutter);
    gap: clamp(42px, 4.5vw, 72px);
  }

  .group-journey .gj-phase-list article::after {
    left: var(--comfortable-gutter);
    right: var(--comfortable-gutter);
  }

  .group-journey :is(.gj-leader-stage, .gj-evolution-grid) {
    width: 100%;
    max-width: var(--comfortable-content);
    margin-left: auto;
    margin-right: auto;
  }

  .group-journey .gj-founder-copy,
  .group-journey .gj-cofounder-copy > * {
    width: 100%;
    max-width: 560px;
  }

  .group-journey .gj-founder-copy {
    justify-self: center;
  }

  .group-journey .gj-cofounder-copy > * {
    margin-left: auto;
    margin-right: auto;
  }
}