/* =============================================================
   NLIGN — Hero Section
   ============================================================= */

.nlign-hero {
  position:         relative;
  background-color: var(--nlign-color-onyx);
  min-height:       700px;
  isolation:        isolate;
}

/* ── Background image ───────────────────────────────────────── */
.nlign-hero__bg {
  position:       absolute;
  top:            0;
  right:          0;
  object-fit:     contain;
  object-position:center;
  pointer-events: none;
  /* width: 33%; */
  top: 105px;
  height: 834px;

}

/* ── Content container ──────────────────────────────────────── */
.nlign-hero__container {
  position:       relative;
  z-index:        1;
  padding-top:    var(--nlign-section-padding-y);
  padding-bottom: var(--nlign-section-padding-y);
  padding-left:   var(--nlign-section-padding-x);
  padding-right:  var(--nlign-section-padding-x);
  max-width:      var(--nlign-max-width);
  margin-inline:  auto;
  display:        flex;
  flex-direction: column;
  gap:            96px;
}

/* ── Heading ─────────────────────────────────────────────────── */
.nlign-hero__heading {
  font-family:    var(--nlign-h1-font-family);
  font-weight:    var(--nlign-h1-font-weight);
  font-size:      var(--nlign-h1-font-size);
  letter-spacing: var(--nlign-h1-letter-spacing);
  line-height:    var(--nlign-h1-line-height);
  max-width:      961px;
  margin:         0;
}

.nlign-hero__heading--accent { color: var(--nlign-color-orange); }
.nlign-hero__heading--base   { color: var(--nlign-color-dust-grey); }

/* ── Subtext ─────────────────────────────────────────────────── */
.nlign-hero__subtext {
  font-family: var(--nlign-body-font-family);
  font-weight: var(--nlign-body-font-weight, 400);
  font-size:   var(--nlign-body-font-size);
  line-height: var(--nlign-body-line-height);
  color:       var(--nlign-color-dust-grey);
  max-width:   480px;
  margin:      32px 0 0;
}

/* ── CTA row ─────────────────────────────────────────────────── */
.nlign-hero__actions {
  display:   flex;
  flex-wrap: wrap;
  gap:       32px;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1199.98px) {
  .nlign-hero__heading   { font-size: 72px; line-height: 76px; }
  .nlign-hero__container { gap: 64px; }
}

@media (max-width: 767.98px) {
  .nlign-hero           { min-height: unset; }
  .nlign-hero__heading  { font-size: 48px; line-height: 52px; }
  .nlign-hero__subtext  { font-size: 16px; max-width: 100%; }
  .nlign-hero__bg       { width: 100%; opacity: 0.15; }
  .nlign-hero__container {
    padding-left:  24px;
    padding-right: 24px;
    padding-top:   64px;
    gap:           48px;
  }
}

@media (min-width: 1200px) {
  .col-xl-8 {
    flex: 0 0 100% !important;
  }
}