/* The workshop scene follows the full-width Home and Case Designs layout. */
.api-integration-page .ha-hero {
  min-height: clamp(500px, 35vw, 660px);
  isolation: isolate;
  background: #0b1110;
}

.api-integration-page .ha-hero::after { display: none; }

.api-integration-page .ha-hero-scene {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.api-integration-page .ha-hero-scene img {
  position: absolute;
  bottom: 0;
  left: 7%;
  display: block;
  width: 100%;
  height: auto;
  mask-image: linear-gradient(transparent, #000 80px);
}

.api-integration-page .ha-hero-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #0b1110c7, #0b111048 35%, transparent 56%);
}

.api-integration-page .ha-hero > .api-inner {
  display: flex;
  align-items: center;
  width: min(1530px, calc(100% - 96px));
  min-height: inherit;
  padding: 0;
}

.api-integration-page .ha-hero-copy {
  width: 52%;
  max-width: 800px;
  padding: 38px 0 42px;
  text-align: left;
}

.api-integration-page .ha-hero .ha-back-link { margin-bottom: 16px; }
.api-integration-page .ha-hero .api-eyebrow { display: block; }
.api-integration-page .ha-hero h1 { font-size: clamp(2.65rem, 3.7vw, 4.1rem); line-height: 1.06; }
.api-integration-page .ha-hero h1 strong { color: var(--accent-button); font-weight: inherit; }
.api-integration-page .ha-hero .api-lead { max-width: 510px; margin-inline: 0; color: #e2e7e4; font-size: 1rem; line-height: 1.7; }
.api-integration-page .ha-hero .site-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 12px; }
.api-integration-page .ha-hero .site-button { width: auto; min-width: 0; font-size: .95rem; }
.api-integration-page .ha-hero .site-button.secondary { color: #fff; }

@media (max-width: 1100px) {
  .api-integration-page .ha-hero { min-height: 0; }
  .api-integration-page .ha-hero > .api-inner { display: block; width: 100%; }
  .api-integration-page .ha-hero-copy { width: auto; max-width: 680px; padding: 36px 24px 0; }
  .api-integration-page .ha-hero h1 { max-width: 640px; font-size: clamp(2.5rem, 6.4vw, 4rem); }
  .api-integration-page .ha-hero .api-lead { max-width: 560px; }
  .api-integration-page .ha-hero-scene { position: relative; height: clamp(200px, 46vw, 400px); margin-top: 16px; }
  .api-integration-page .ha-hero { display: flex; flex-direction: column; }
  .api-integration-page .ha-hero > .api-inner { order: -1; }
  .api-integration-page .ha-hero-scene img { position: static; height: 100%; object-fit: cover; object-position: right center; mask-image: none; }
  .api-integration-page .ha-hero-scene::after { background: linear-gradient(#0b1110, transparent 28%); }
}

@media (max-width: 560px) {
  .api-integration-page .ha-hero-copy { padding-inline: 20px; }
  .api-integration-page .ha-hero h1 { font-size: clamp(2.25rem, 9.5vw, 3.25rem); }
  .api-integration-page .ha-hero .site-actions { display: grid; grid-template-columns: 1fr; }
  .api-integration-page .ha-hero .site-button { width: 100%; }
  .api-integration-page .ha-hero-scene { height: clamp(180px, 55vw, 300px); }
}