.intro-h1 {
  position: relative;
  background: var(--color-brand-navy, #111a23);
  overflow: hidden;
}

.intro-h1__inner {
  width: min(1290px, calc(100% - (var(--section-padding-x) * 2)));
  margin: 0 auto;
  padding: 96px 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-3, 30px);
}

.intro-h1__heading {
  flex: 1 1 740px;
  max-width: 740px;
  min-width: min(100%, 280px);
}

.intro-h1__title {
  margin: 0;
  color: var(--color-brand-text-inverse, #f1fcff);
}

.intro-h1__title-highlight {
  color: var(--color-brand-primary);
}

.intro-h1__title-rest {
  color: var(--color-brand-text-inverse, #f1fcff);
}

.intro-h1__aside {
  flex: 1 1 537px;
  max-width: 537px;
  min-width: min(100%, 280px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-xl, 32px);
}

.intro-h1__copy {
  width: 100%;
  margin: 0;
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
}

.intro-h1__copy p {
  margin: 0 0 var(--space-md);
}

.intro-h1__copy p:last-child {
  margin-bottom: 0;
}

/* Hide trailing paragraphs until JS runs (avoids flash before .hidden is applied). */
.intro-h1__copy:not([data-intro-h1-ready]) p ~ p {
  display: none;
}

.intro-h1__copy .hidden {
  display: none;
}

.intro-h1 .show-more-btn,
.intro-h1__copy .intro-h1__read-more {
  margin-bottom: 0;
}

.intro-h1__copy .intro-h1__read-more {
  display: inline-flex;
  margin-top: var(--space-sm, 8px);
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .intro-h1__inner {
    padding: calc(var(--section-padding-y) * 0.9) 0;
    flex-direction: column;
  }

  .intro-h1__heading,
  .intro-h1__aside {
    flex-basis: 100%;
    max-width: 100%;
  }
}