/* Customers page polish: selected-industry identity and lighter customer proof. */
.customersPage .industryExplorer {
  --industry-panel-accent: var(--primary-green);
  --industry-panel-tint: var(--surface-green-subtle);
}

.customersPage .industryExplorer:has(.industryOptions button:nth-child(1).is-active) {
  --industry-panel-accent: var(--primary-green);
  --industry-panel-tint: var(--surface-green-subtle);
}

.customersPage .industryExplorer:has(.industryOptions button:nth-child(2).is-active) {
  --industry-panel-accent: var(--blue-500);
  --industry-panel-tint: var(--surface-blue-subtle);
}

.customersPage .industryExplorer:has(.industryOptions button:nth-child(3).is-active) {
  --industry-panel-accent: var(--aqua-500);
  --industry-panel-tint: var(--surface-aqua-subtle);
}

.customersPage .industryExplorer:has(.industryOptions button:nth-child(4).is-active) {
  --industry-panel-accent: var(--coral-500);
  --industry-panel-tint: var(--surface-coral-subtle);
}

.customersPage .industryExplorer:has(.industryOptions button:nth-child(5).is-active) {
  --industry-panel-accent: var(--blue-400);
  --industry-panel-tint: var(--surface-blue-subtle);
}

.customersPage .industryExplorer:has(.industryOptions button:nth-child(6).is-active) {
  --industry-panel-accent: var(--aqua-400);
  --industry-panel-tint: var(--surface-aqua-subtle);
}

.customersPage .industryPanel {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(
      135deg,
      var(--industry-panel-tint) 0%,
      color-mix(in srgb, var(--primary-white) 98%, transparent) 46%
    ),
    var(--primary-white);
}

.customersPage .industryPanel::before {
  position: absolute;
  z-index: 1;
  inset: 0 0 auto;
  height: 4px;
  background: var(--industry-panel-accent);
  content: "";
  opacity: 0.72;
}

.customersPage .industryPanel h3,
.customersPage .industryPanel > p,
.customersPage .industryPanel ul {
  position: relative;
  z-index: 2;
}

.customersPage .industryPanel ul {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  margin-top: 28px;
  border-top: 1px solid var(--green-100);
}

.customersPage .industryPanel li {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 0 12px 18px;
  border: 0;
  border-bottom: 1px solid var(--green-100);
  background: transparent;
}

.customersPage .industryPanel li::before {
  position: absolute;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--industry-panel-accent);
  content: "";
}

/* Customer outcome: keep the proof, remove the table-like scaffolding. */
.customersPage .customerCaseMetrics {
  gap: clamp(14px, 1.8vw, 24px);
  border-top: 0;
  border-bottom: 0;
}

.customersPage .customerCaseMetrics article {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 176px;
  padding: clamp(24px, 2.6vw, 30px);
  border-right: 0;
  background: var(--surface-green-soft);
}

.customersPage .customerCaseMetrics article:nth-child(2) {
  background: var(--surface-blue-soft);
}

.customersPage .customerCaseMetrics article:nth-child(3) {
  background: var(--surface-aqua-soft);
}

.customersPage .customerCaseMetrics span {
  margin-bottom: 14px;
}

.customersPage .customerCaseMetrics strong {
  width: 100%;
}

.customersPage .customerCaseMetrics p {
  max-width: 34ch;
  margin: 12px auto 0;
}

.customersPage .customerCaseBody {
  gap: clamp(42px, 6vw, 76px);
  margin-top: clamp(46px, 5.5vw, 68px);
}

.customersPage .customerCaseNarrative {
  gap: clamp(28px, 3vw, 38px);
}

.customersPage .customerCaseNarrative article {
  padding-top: 0;
  border-top: 0;
}

.customersPage .customerCaseNarrative article > span {
  margin-bottom: 10px;
}

.customersPage .customerCaseNarrative h3 {
  margin-bottom: 8px;
}

.customersPage .customerCaseImageButton img {
  border: 0;
  box-shadow: 0 12px 32px rgba(3, 11, 6, 0.055);
}

/* Customer First: align the copy with the visual mass of the orbit, not its geometric midpoint. */
@media (min-width: 981px) {
  .customersPage .customerFirstStatement {
    position: relative;
    top: -56px;
  }
}

/* Working with Capilyst: make starting small look genuinely lightweight. */
.customersPage .cooperationSteps {
  gap: clamp(28px, 3.4vw, 52px);
  align-items: stretch;
  margin-top: clamp(46px, 5vw, 60px);
  border-top: 0;
  border-bottom: 0;
}

.customersPage .cooperationSteps article {
  --step-accent: var(--primary-green);
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  min-height: 168px;
  padding: 0 0 26px;
  border-right: 0;
  border-bottom: 1px solid var(--green-100);
}

.customersPage .cooperationSteps article::after {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 58px;
  height: 2px;
  border-radius: 999px;
  background: var(--step-accent);
  content: "";
  opacity: 0.58;
}

.customersPage .cooperationSteps article:nth-child(2) {
  --step-accent: var(--blue-500);
}

.customersPage .cooperationSteps article:nth-child(3) {
  --step-accent: var(--aqua-500);
}

.customersPage .cooperationSteps article:nth-child(4) {
  --step-accent: var(--coral-500);
}

.customersPage .cooperationSteps span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 20px;
  border: 1px solid color-mix(in srgb, var(--step-accent) 22%, var(--green-100));
  border-radius: 50%;
  background: color-mix(in srgb, var(--step-accent) 4%, var(--primary-white));
  color: var(--step-accent);
}

.customersPage .cooperationSteps h3 {
  margin-bottom: 9px;
}

.customersPage .cooperationSteps p {
  max-width: 30ch;
}

/* Desktop: align the process band with the page content edge without compressing it. */
@media (min-width: 981px) {
  .customersPage .cooperationSteps {
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(27px, 3.2vw, 48px);
    margin-right: 0;
    margin-left: 0;
  }

  .customersPage .cooperationSteps span {
    transform: translateY(6px);
  }

  .customersPage .cooperationSteps p {
    max-width: 29ch;
  }
}

@media (max-width: 760px) {
  .customersPage .industryPanel ul {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .customersPage .customerCaseMetrics {
    gap: 12px;
  }

  .customersPage .customerCaseMetrics article {
    min-height: 0;
    border-right: 0;
    border-bottom: 0;
  }

  .customersPage .cooperationSteps {
    gap: 30px;
  }

  .customersPage .cooperationSteps article {
    min-height: 0;
    padding-bottom: 22px;
    border-right: 0;
    border-bottom: 1px solid var(--green-100);
  }
}

@media (prefers-reduced-motion: reduce) {
  .customersPage .industryPanelRefresh {
    animation: none;
  }
}

/* Customers industries: compact the desktop vertical rhythm without shrinking the core content. */
@media (min-width: 981px) {
  .customersPage .industriesSection {
    padding-top: clamp(64px, 6vw, 84px);
    padding-bottom: clamp(64px, 6vw, 84px);
  }

  .customersPage .industriesSection .industryExplorer {
    margin-top: clamp(28px, 2.4vw, 34px);
  }

  .customersPage .industryOptions button {
    min-height: 72px;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .customersPage .industryPanel {
    display: grid;
    align-content: center;
    min-height: 432px;
    padding: 34px clamp(36px, 4vw, 46px) 30px;
  }

  .customersPage .industryPanel h3 {
    margin-bottom: 14px;
  }

  .customersPage .industryPanel ul {
    margin-top: 22px;
  }

  .customersPage .industryPanel li {
    padding-top: 11px;
    padding-bottom: 11px;
  }
}