/* MSP Nexus: index.html
 * Page layout, illustrations and initial animation styles.
 * Shared branding and footer styles are in custom.css.
 */

/* Page layout */
.msp-alternative-hero {
    padding: 36px 0 40px;
}

.msp-alternative-copy {
    text-align: center;
}

.msp-alternative-hero .ail-hero-title {
    max-width: 680px;
    margin: 0 auto;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.15;
}

.msp-alternative-copy > .btn {
    margin-bottom: 0;
}

.msp-alternative-visual {
    margin-top: 28px;
}

.msp-alternative-hero .msp-hero-art {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 760px;
    height: auto;
    margin: 0 auto;
    aspect-ratio: 950 / 694;
    overflow: hidden;
}

/* Match all three SVG layers to the tighter artwork canvas. */
.msp-alternative-hero .msp-hero-stage {
    width: 100%;
    height: auto;
    aspect-ratio: 950 / 694;
}

@media (min-width: 992px) {
    .msp-alternative-hero {
        display: flex;
        align-items: center;
        min-height: calc(100svh - 94px);
        padding: 48px 0 64px;
    }

    .msp-alternative-copy {
        text-align: left;
    }

    .msp-alternative-hero .ail-hero-title {
        margin: 0;
        font-size: clamp(2.4rem, 3.6vw, 3.5rem);
    }

    .msp-alternative-visual {
        margin-top: 0;
    }

    .msp-alternative-hero .msp-hero-art {
        max-width: none;
    }
}
.msp-nexus-dark-bg {
    background: #252831;
    color: #fff;
}

/* Extracted element styles. The wrapper selector preserves their priority;
 * JavaScript can still update animation transforms at runtime.
 */

#msp-page-top .msp-index-inline-001 {
  fill: none
}

#msp-page-top .msp-index-inline-002 {
  fill: #c5e8f0
}

#msp-page-top .msp-index-inline-003 {
  fill: #00a5cf
}

#msp-page-top .msp-index-inline-004 {
  fill: #fff
}

#msp-page-top .msp-index-inline-005 {
  fill: #0e8fb1
}

#msp-page-top .msp-index-inline-006 {
  opacity: .3
}

#msp-page-top .msp-index-inline-007 {
  fill: #b3b4b4
}

#msp-page-top .msp-index-inline-008 {
  fill: #162544
}

#msp-page-top .msp-index-inline-009 {
  fill: #252831
}

#msp-page-top .msp-index-inline-010 {
  fill: #0f6f8a
}

#msp-page-top .msp-index-inline-011 {
  fill: #f0fafc
}

#msp-page-top .msp-index-inline-012 {
  fill: #cdedf6
}

#msp-page-top .msp-index-inline-013 {
  fill: #72d98b
}

#msp-page-top .msp-index-inline-014 {
  fill: #04a7d1
}

#msp-page-top .msp-index-inline-015 {
  stroke-linecap: round; stroke-miterlimit: 2; stroke-width: 4.9px; stroke: #72d98b
}

#msp-page-top .msp-index-inline-016 {
  isolation: isolate; font-family: Arial-Black, Arial; font-weight: 800; fill: #252831; font-size: 48px
}

#msp-page-top .msp-index-inline-017 {
  stroke-linecap: round; stroke: #04a7d1; stroke-miterlimit: 2; stroke-width: 11.2px
}

#msp-page-top .msp-index-inline-018 {
  stroke-linecap: round; fill: none; stroke-miterlimit: 2; stroke: #252831; stroke-width: 7.8px
}

#msp-page-top .msp-index-inline-019 {
  stroke-linecap: round; stroke: #04a7d1; stroke-miterlimit: 2; stroke-width: 4.9px
}

#msp-page-top .msp-index-inline-020 {
  fill: #fbbe9d
}

#msp-page-top .msp-index-inline-021 {
  fill: #183660
}

#msp-page-top .msp-index-inline-022 {
  fill: #0d5668
}

#msp-page-top .msp-index-inline-023 {
  isolation: isolate; opacity: .2
}

#msp-page-top .msp-index-inline-024 {
  fill: #0b6f8a
}

#msp-page-top .msp-index-inline-025 {
  fill: #f7976a
}

#msp-page-top .msp-index-inline-026 {
  fill: #1d3354
}

#msp-page-top .msp-index-inline-027 {
  fill: url(#msp-main-art-linear-gradient)
}

#msp-page-top .msp-index-inline-028 {
  fill: url(#msp-main-art-linear-gradient1)
}

#msp-page-top .msp-index-inline-029 {
  clip-path: url(#msp-main-art-clippath)
}

#msp-page-top .msp-index-inline-030 {
  stroke-linecap: round; fill: none; stroke-miterlimit: 1.5; stroke: #cdedf6; stroke-width: 6.9px
}

#msp-page-top .msp-index-inline-031 {
  stroke-width: 5.4px; stroke-linecap: round; fill: none; stroke-miterlimit: 1.5; stroke: #cdedf6
}

#msp-page-top .msp-index-inline-032 {
  isolation: isolate; font-family: Arial-Black, Arial; font-weight: 800; font-size: 4.5px; letter-spacing: .1em; fill: #fff
}

#msp-page-top .msp-index-inline-033 {
  isolation: isolate; font-family: Arial-Black, Arial; font-weight: 800; fill: #fff; font-size: 10.8px
}

#msp-page-top .msp-index-inline-034 {
  isolation: isolate; font-family: Arial-Black, Arial; font-weight: 800; fill: #72d98b; font-size: 18px
}

#msp-page-top .msp-index-inline-035 {
  stroke: #04a7d1; stroke-miterlimit: 1.5; stroke-width: 5.4px
}

#msp-page-top .msp-index-inline-036 {
  stroke-linecap: round; stroke: #04a7d1; stroke-miterlimit: 1.5; stroke-width: 9.6px
}

#msp-page-top .msp-index-inline-037 {
  stroke-linecap: round; fill: none; stroke-miterlimit: 1.5; stroke-width: 5.4px; stroke: #252831
}

#msp-page-top .msp-index-inline-038 {
  stroke-linecap: round; fill: none; stroke: #cdedf6; stroke-miterlimit: 1.5; stroke-width: 3.9px
}

#msp-page-top .msp-index-inline-039 {
  stroke-linecap: round; stroke: #04a7d1; stroke-miterlimit: 1.5; stroke-width: 5px
}

#msp-page-top .msp-index-inline-040 {
  isolation: isolate; font-size: 6.5px; letter-spacing: 0em; font-family: Arial-Black, Arial; font-weight: 800; fill: #252831
}

#msp-page-top .msp-index-inline-041 {
  isolation: isolate; opacity: .3
}

#msp-page-top .msp-index-inline-042 {
  fill: url(#msp-main-art-linear-gradient2)
}

#msp-page-top .msp-index-inline-043 {
  fill: #f9f9fa
}

#msp-page-top .msp-index-inline-044 {
  fill: url(#msp-main-art-linear-gradient3)
}

#msp-page-top .msp-index-inline-045 {
  fill: #e6e6e6
}

#msp-page-top .msp-index-inline-046 {
  isolation: isolate
}

#msp-page-top .msp-index-inline-047 {
  fill: #dedee0
}

#msp-page-top .msp-index-inline-048 {
  fill: #c5c7c9
}

/* Stretch each pair of feature cards to the same height within its row.
 * Each Bootstrap column still takes its natural height when the cards stack.
 */
.msp-feature-pair > [class*="col-"] {
  display: flex;
  min-width: 0;
}

.msp-feature-pair > [class*="col-"] > .ail-card-item,
.msp-feature-pair > [class*="col-"] > .ai-wt-enc-slider {
  width: 100%;
  min-width: 0;
}

/* Why Choose MSP Nexus: supplied 30px SVG icons. */
.msp-why-icon {
  color: var(--msp-primary, #158cae);
}

.msp-why-icon .msp-why-icon-tint {
  opacity: .3;
}

.msp-why-icon .msp-why-icon-fill {
  fill: currentColor;
}

.msp-why-icon .msp-why-icon-outline {
  fill: none;
  stroke: currentColor;
  stroke-linejoin: round;
  stroke-width: 1.8px;
}

.msp-why-icon .msp-why-icon-round {
  stroke-linecap: round;
}

.msp-why-icon .msp-why-icon-mask {
  fill: none;
  clip-rule: evenodd;
}

/* Clip decorative feature-card images to the card's existing rounded corners. */
.ai-wt-enhanced-content .ail-card-item.position-relative {
  overflow: hidden;
}

/* Give all six Why Choose cards equal heights across the multi-column grid. */
.msp-why-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--bs-gutter-x, 1.5rem);
  margin-left: 0;
  margin-right: 0;
}

.msp-why-cards > [class*="col-"] {
  display: flex;
  width: auto;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
}

.msp-why-cards > [class*="col-"] > .ail-card-item {
  width: 100%;
  min-width: 0;
  align-content: flex-start;
}

@media (min-width: 992px) {
  .msp-why-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
  }
}

@media (min-width: 1400px) {
  .msp-why-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Use a solid colour transition so feature links never flash as gradient text resets. */
.ai-wt-enhanced-content .ail-card-item a,
.ai-wt-enhanced-content .ail-card-item a:hover,
.ai-wt-enhanced-content .ail-card-item a:focus-visible {
  background: none;
  -webkit-text-fill-color: currentColor;
  transition: color .2s ease-in-out;
}

.ai-wt-enhanced-content .ail-card-item a:hover,
.ai-wt-enhanced-content .ail-card-item a:focus-visible {
  color: var(--msp-primary);
}

/* Intro artwork above Why Choose MSP Nexus, using the shared fade-up animation. */
.msp-why-intro-art {
  width: 100%;
  max-width: 983px;
  margin: 0 auto clamp(24px, 4vw, 48px);
}

.msp-why-intro-art img {
  display: block;
  width: 100%;
  height: auto;
}