/* Native artwork geometry: desktop 2830 × 500, mobile 704 × 160.
   Only the upper arc is visible; the rest continues below the section. */
.section-with-ellipse {
  position: relative;
}
.section-ellipse {
  --ellipse-width: 2830px;
  --ellipse-height: 500px;
  --ellipse-depth: clamp(24px, 5vw, 100px);
  position: absolute;
  inset: auto 0 -1px;
  height: var(--ellipse-depth);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  z-index: 2;
}
.section-ellipse::before {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--ellipse-width);
  max-width: none;
  max-height: none;
  height: var(--ellipse-height);
  content: "";
  border-radius: 50%;
  background: var(--bg-color, #fff);
}
@media (max-width: 767px) {
  .section-ellipse {
    --ellipse-width: 900px;
    --ellipse-height: 160px;
  }
}
/* Upper boundaries share the exact same artwork and crop, outside their host. */
.section-ellipse--top {
  top: calc(1px - var(--ellipse-depth));
  bottom: auto;
}
/* Footer and editorial sections keep their fixed surface in both themes. */
.section-ellipse--ink::before {
  background: #161616;
}

/* Seal fractional raster gaps on mobile, including hosts that clip the oval. */
@media (max-width: 767px) {
  .section-ellipse::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 3px;
    background: var(--bg-color, #fff);
  }
  .section-ellipse--ink::after {
    background: #161616;
  }
  .section-with-ellipse:has(> .section-ellipse:not(.section-ellipse--top)) + * {
    position: relative;
    background-color: var(--bg-color, #fff);
    box-shadow: 0 -2px 0 var(--bg-color, #fff);
  }
  .section-with-ellipse:has(> .section-ellipse--ink:not(.section-ellipse--top)) + * {
    background-color: #161616;
    box-shadow: 0 -2px 0 #161616;
  }
}

/* Partner logos follow the hero artwork in normal flow. Their solid surface
   owns the same upper boundary so the oval never paints over the logos. */
.hero-partners-surface {
  display: flow-root;
  background: var(--bg-color);
  position: relative;
}
/* These legacy hero text layers are absolutely positioned. Keep the new
   decoration behind their controls without changing their existing layout. */
.power-hero > .power-info,
.team-main > .power-info {
  z-index: 3;
}

.hero-section > .hero-partners-wrapper {
  z-index: 3;
}