/* ── X WATERMARK ─────────────────────────────────────────────────────────────
   Use on any section: <section class="section section--navy x-watermark">
   The X mark appears as a large ghost behind the content.
   Works on both dark (navy) and light sections — opacity set per variant.      */

.x-watermark {
  position: relative;
  overflow: hidden;
}
.x-watermark::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -8%;
  width: 50%;
  aspect-ratio: 1;
  transform: translateY(-50%);
  background-image: url("/themes/yns/images/x-brand-logo.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 0;
}
/* On dark/navy sections: X at low opacity */
.section--navy.x-watermark::after,
.cta.x-watermark::after {
  background-image: url("/themes/yns/images/x-watermark-white.svg");
  opacity: 0.08;
  filter: none;
}
/* On light sections: X at very low opacity in brand navy */
.section--light.x-watermark::after,
.section.x-watermark::after {
  background-image: url("/themes/yns/images/x-watermark-navy.svg");
  opacity: 0.04;
  filter: none;
}
/* Ensure section content sits above the watermark */
.x-watermark > .container,
.x-watermark > div {
  position: relative;
  z-index: 1;
}

/* Variant: X on the LEFT side */
.x-watermark--left::after {
  right: auto;
  left: -8%;
}

/* Nav logo: X mark + stacked "Your / Next / Step" with cascade offset */
.nav__logo-wrap {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.nav__logo-x {
  height: 34px;
  width: auto;
  flex-shrink: 0;
  transition: height 0.3s ease;
}
.nav--scrolled .nav__logo-x {
  height: 34px;
} /* no size change on scroll */
.nav__logo-text {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  display: flex;
  flex-direction: column;
}
.nav__logo-text span:nth-child(1) {
  margin-left: 0;
}
.nav__logo-text span:nth-child(2) {
  margin-left: 0.4em;
}
.nav__logo-text span:nth-child(3) {
  margin-left: 0.8em;
}

/* Services slider X watermark */
.services.x-watermark {
  overflow: hidden;
}
.services.x-watermark::after {
  right: 2%;
  top: 50%;
  width: 38%;
  aspect-ratio: 1;
  transform: translateY(-50%);
  opacity: 0.08;
  z-index: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.services__slider,
.services__slide {
  position: relative;
  z-index: 1;
}