/*
 * NTI Clarity — Large Block Backgrounds V3
 * Purpose-built editorial scenes for the eight large dark panels identified
 * in the 2026-08 visual review. Loaded last to preserve the existing layout.
 */

:root {
  --nti-scene-overlay: linear-gradient(
    90deg,
    rgba(4, 17, 35, .97) 0%,
    rgba(4, 17, 35, .91) 38%,
    rgba(4, 17, 35, .73) 65%,
    rgba(4, 17, 35, .50) 100%
  );
  --nti-scene-overlay-compact: linear-gradient(
    90deg,
    rgba(4, 17, 35, .97) 0%,
    rgba(4, 17, 35, .88) 48%,
    rgba(4, 17, 35, .55) 100%
  );
  --nti-glass: rgba(7, 29, 51, .78);
  --nti-glass-strong: rgba(7, 29, 51, .88);
  --nti-glass-line: rgba(121, 215, 220, .24);
}

.page-home .final,
.page-mobile .dark,
.page-mobile .integration,
.page-legacy .direction,
.page-experience .principle,
.page-about .remain,
.page-about .final,
.page-partners .principles {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff !important;
  background-color: #07192c !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
}

.page-home .final {
  background-image: var(--nti-scene-overlay-compact), url("nti-bg-home-clarity.webp") !important;
  background-position: center 54% !important;
}

.page-mobile .dark {
  background-image: var(--nti-scene-overlay), url("nti-bg-mobile-value.webp") !important;
  background-position: center 52% !important;
}

.page-mobile .integration {
  background-image: var(--nti-scene-overlay), url("nti-bg-mobile-integration.webp") !important;
  background-position: center 50% !important;
}

.page-legacy .direction {
  background-image: var(--nti-scene-overlay), url("nti-bg-legacy-directions.webp") !important;
  background-position: center 54% !important;
}

.page-experience .principle {
  background-image: var(--nti-scene-overlay), url("nti-bg-case-trust.webp") !important;
  background-position: center 50% !important;
}

.page-about .remain {
  background-image: var(--nti-scene-overlay), url("nti-bg-enduring-capability.webp") !important;
  background-position: center 54% !important;
}

.page-about .final {
  background-image: var(--nti-scene-overlay-compact), url("nti-bg-about-clarity.webp") !important;
  background-position: center 52% !important;
}

.page-partners .principles {
  background-image: var(--nti-scene-overlay), url("nti-bg-collaboration-boundaries.webp") !important;
  background-position: center 50% !important;
}

.page-home .final > .container,
.page-mobile .dark > .container,
.page-mobile .integration > .container,
.page-legacy .direction > .container,
.page-experience .principle > .container,
.page-about .remain > .container,
.page-about .final > .container,
.page-partners .principles > .container {
  position: relative;
  z-index: 1;
}

.page-home .final .section-title,
.page-mobile .dark .section-title,
.page-mobile .integration .section-title,
.page-legacy .direction .section-title,
.page-experience .principle .section-title,
.page-about .remain .section-title,
.page-about .final .section-title,
.page-partners .principles .section-title {
  color: #fff !important;
  text-shadow: 0 3px 26px rgba(0, 0, 0, .32);
}

.page-home .final p,
.page-mobile .dark .section-lead,
.page-mobile .integration .section-lead,
.page-legacy .direction .section-lead,
.page-experience .principle .section-lead,
.page-about .remain .section-lead,
.page-about .final .section-lead,
.page-partners .principles .section-lead {
  color: #d2dde8 !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}

/* Let the background remain visible while keeping every card readable. */
.page-mobile .dark .promise,
.page-legacy .direction .dir,
.page-about .remain .remain-card,
.page-partners .principles .principle {
  background: var(--nti-glass-strong) !important;
  border-color: var(--nti-glass-line) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  backdrop-filter: blur(6px);
}

.page-mobile .integration .layer,
.page-experience .principle .rule {
  background: var(--nti-glass) !important;
  border-color: var(--nti-glass-line) !important;
  backdrop-filter: blur(7px);
}

.page-mobile .integration .layer strong,
.page-experience .principle .rule b,
.page-mobile .dark .promise h3,
.page-legacy .direction .dir h3,
.page-about .remain .remain-card h3,
.page-partners .principles .principle h3 {
  color: #fff !important;
}

.page-mobile .integration .integration-foot,
.page-mobile .integration .layer span,
.page-experience .principle .rule span,
.page-mobile .dark .promise p,
.page-legacy .direction .dir p,
.page-about .remain .remain-card p,
.page-partners .principles .principle p {
  color: #b9c9d8 !important;
}

@media (max-width: 980px) {
  :root {
    --nti-scene-overlay: linear-gradient(90deg, rgba(4, 17, 35, .96), rgba(4, 17, 35, .78));
    --nti-scene-overlay-compact: linear-gradient(90deg, rgba(4, 17, 35, .96), rgba(4, 17, 35, .76));
  }

  .page-home .final,
  .page-mobile .dark,
  .page-mobile .integration,
  .page-legacy .direction,
  .page-experience .principle,
  .page-about .remain,
  .page-about .final,
  .page-partners .principles {
    background-position: 64% center !important;
  }
}

@media (max-width: 620px) {
  :root {
    --nti-scene-overlay: linear-gradient(rgba(4, 17, 35, .94), rgba(4, 17, 35, .90));
    --nti-scene-overlay-compact: linear-gradient(rgba(4, 17, 35, .94), rgba(4, 17, 35, .88));
  }

  .page-home .final,
  .page-mobile .dark,
  .page-mobile .integration,
  .page-legacy .direction,
  .page-experience .principle,
  .page-about .remain,
  .page-about .final,
  .page-partners .principles {
    background-position: 70% center !important;
  }
}