.rtx-hero,
.rtx-hero *,
.rtx-hero *::before,
.rtx-hero *::after {
  box-sizing: border-box;
}

.rtx-hero {
  --rtx-hero-height-desktop: 744px;
  --rtx-hero-height-tablet: 680px;
  --rtx-hero-height-mobile: 640px;
  --rtx-hero-title-width: 920px;
  --rtx-hero-transition-ms: 980ms;
  --rtx-hero-rail-width: 194px;
  --rtx-hero-content-left: clamp(238px, 14vw, 276px);
  --rtx-hero-button-start: #3b83a7;
  --rtx-hero-button-mid: #549bbc;
  --rtx-hero-button-end: #6eb7da;
  --rtx-hero-blue: #5ba7cc;
  --rtx-hero-bg: #071117;
  --rtx-hero-nav-color: #fff;
  --rtx-hero-nav-border: rgba(226, 238, 244, .42);
  --rtx-hero-nav-start: #4b94b7;
  --rtx-hero-nav-end: #65afd2;
  --rtx-hero-dot-active: #fff;
  --rtx-hero-dot-inactive: rgba(255, 255, 255, .13);
  position: relative;
  display: block;
  width: 100%;
  height: var(--rtx-hero-height-desktop);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 84% 46%, rgba(17, 83, 109, .68) 0, rgba(7, 35, 47, .48) 28%, rgba(3, 12, 17, .12) 61%),
    linear-gradient(105deg, #020405 0%, #061015 49%, #0b3142 100%);
  color: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.rtx-hero :where(h1, h2, h3, p, span, nav, section, article, picture, img, div) {
  margin: 0;
  padding: 0;
  border: 0;
}

.rtx-hero::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 5;
  width: var(--rtx-hero-rail-width);
  border-right: 1px solid rgba(255, 255, 255, .025);
  background: linear-gradient(90deg, rgba(0, 0, 0, .95), rgba(0, 0, 0, .74));
  pointer-events: none;
}

.rtx-hero__watermark {
  position: absolute;
  z-index: 2;
  left: -54px;
  top: -132px;
  width: 650px;
  height: 870px;
  overflow: hidden;
  pointer-events: none;
}

.rtx-hero__watermark span {
  display: block;
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-size: 660px;
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.14em;
  color: transparent;
  -webkit-text-stroke: 6px rgba(255, 255, 255, .032);
  transform: scaleX(.78) rotate(-4deg);
  transform-origin: left center;
}

.rtx-hero__viewport,
.rtx-hero__slides,
.rtx-hero__slide {
  width: 100%;
  height: 100%;
}

.rtx-hero__viewport,
.rtx-hero__slides {
  position: relative;
  overflow: hidden;
}

.rtx-hero__slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--rtx-hero-transition-ms) cubic-bezier(.25, .46, .45, .94),
    visibility 0s linear var(--rtx-hero-transition-ms);
}

.rtx-hero:not(.is-ready) .rtx-hero__slide:first-child,
.rtx-hero__slide.is-active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity var(--rtx-hero-transition-ms) cubic-bezier(.25, .46, .45, .94),
    visibility 0s linear 0s;
}

.rtx-hero__media,
.rtx-hero__media picture,
.rtx-hero__media img,
.rtx-hero__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.rtx-hero__media {
  z-index: 0;
  overflow: hidden;
}

.rtx-hero__media picture,
.rtx-hero__media img {
  display: block;
}

.rtx-hero__media img {
  object-fit: cover;
  object-position: center center;
  transform: scale(1.052) translate3d(.2%, 0, 0);
  transition: transform 7.4s cubic-bezier(.2, .7, .2, 1);
  will-change: transform;
}

.rtx-hero__slide.is-active .rtx-hero__media img {
  transform: scale(1.012) translate3d(-.2%, -.12%, 0);
}

.rtx-hero__overlay {
  background: linear-gradient(
    90deg,
    rgba(var(--rtx-slide-overlay-rgb, 0, 0, 0), var(--rtx-slide-overlay-strong, .58)) 0%,
    rgba(var(--rtx-slide-overlay-rgb, 0, 0, 0), var(--rtx-slide-overlay-mid, .44)) 38%,
    rgba(var(--rtx-slide-overlay-rgb, 0, 0, 0), var(--rtx-slide-overlay-soft, .22)) 70%,
    rgba(var(--rtx-slide-overlay-rgb, 0, 0, 0), var(--rtx-slide-overlay-edge, .06)) 100%
  );
  pointer-events: none;
}

.rtx-hero__inner {
  position: relative;
  z-index: 6;
  width: 100%;
  height: 100%;
  padding: 64px 112px 76px var(--rtx-hero-content-left);
}

.rtx-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: min(100%, var(--rtx-hero-title-width));
}

.rtx-hero__motion {
  position: relative;
  display: block;
  will-change: transform, opacity;
}

.rtx-hero__motion--eyebrow {
  width: auto;
}

.rtx-hero__motion--title {
  width: min(100%, var(--rtx-hero-title-width));
  margin-top: 43px;
}

.rtx-hero__motion--button {
  width: max-content;
  margin-top: 40px;
}

.rtx-hero__motion--description {
  width: min(100%, 590px);
  margin-top: 82px;
}

.rtx-hero__eyebrow {
  display: block;
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: #f2f4f5;
}

.rtx-hero__title {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(64px, 4.55vw, 86px);
  font-weight: 700;
  font-style: normal;
  line-height: 1.08;
  letter-spacing: .012em;
  text-transform: uppercase;
  color: #fff;
  text-wrap: balance;
}

.rtx-hero__description {
  display: block;
  max-width: 590px;
  margin: 0 !important;
  padding: 0 !important;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 2.05;
  letter-spacing: -.01em;
  color: #e7e8e9;
}

.rtx-hero .rtx-hero__button {
  all: unset;
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 292px;
  min-height: 68px;
  padding: 12px 30px !important;
  overflow: hidden;
  border: 2px solid rgba(164, 218, 243, .72) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(112deg, var(--rtx-hero-button-start) 0%, var(--rtx-hero-button-mid) 51%, var(--rtx-hero-button-end) 100%);
  background-size: 128% 100%;
  background-position: 8% 50%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .19),
    inset 0 -1px 0 rgba(7, 36, 50, .08),
    0 2px 7px rgba(0, 0, 0, .08);
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-size: 21px;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  letter-spacing: .022em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  transition:
    transform .42s cubic-bezier(.22, 1, .36, 1),
    background-position .62s cubic-bezier(.22, 1, .36, 1),
    border-color .34s ease,
    box-shadow .42s ease !important;
}

.rtx-hero .rtx-hero__button::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 7px;
  border-top: 1px solid rgba(255, 255, 255, .13);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .rtx-hero .rtx-hero__button:hover {
    transform: translate3d(0, -1px, 0);
    background-position: 92% 50%;
    border-color: rgba(188, 229, 247, .9) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .24),
      0 7px 20px rgba(27, 100, 133, .12);
  }
}

.rtx-hero .rtx-hero__button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .96) !important;
  outline-offset: 4px !important;
}

.rtx-hero__social {
  position: absolute;
  z-index: 8;
  left: 77px;
  top: 221px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 28px;
}

.rtx-hero .rtx-hero__social-link {
  all: unset;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  --rtx-hero-social-icon-size: 18px;
  color: #fff;
  opacity: .96;
  cursor: pointer;
  transition: color .28s ease, transform .44s cubic-bezier(.22, 1, .36, 1), opacity .28s ease;
}

.rtx-hero__social-link i,
.rtx-hero__social-link svg {
  display: block;
  width: var(--rtx-hero-social-icon-size);
  height: var(--rtx-hero-social-icon-size);
  font-size: var(--rtx-hero-social-icon-size);
  line-height: 1;
}

.rtx-hero__social-link svg {
  fill: currentColor;
}

@media (hover: hover) and (pointer: fine) {
  .rtx-hero .rtx-hero__social-link:hover {
    color: #69b9dd;
    opacity: 1;
    transform: translate3d(0, -1px, 0);
  }
}

.rtx-hero .rtx-hero__social-link:focus-visible {
  outline: 1px solid rgba(255, 255, 255, .8);
  outline-offset: 4px;
}

.rtx-hero__pagination {
  position: absolute;
  z-index: 9;
  left: 80px;
  bottom: 96px;
  display: flex;
  align-items: center;
  gap: 14px;
  width: auto;
}

/*
 * Each dot owns a fixed 22px slot. Only the visual circle inside that slot
 * changes size, always from its exact center. This prevents the pagination
 * row from shifting vertically or horizontally when the active dot changes.
 */
.rtx-hero .rtx-hero__dot {
  all: unset;
  box-sizing: border-box;
  position: relative;
  display: block;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.rtx-hero .rtx-hero__dot::before,
.rtx-hero .rtx-hero__dot::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.rtx-hero .rtx-hero__dot::before {
  width: 11px;
  height: 11px;
  background: var(--rtx-hero-dot-inactive);
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  transition:
    width .42s cubic-bezier(.22, 1, .36, 1),
    height .42s cubic-bezier(.22, 1, .36, 1),
    background-color .28s ease,
    box-shadow .28s ease;
}

.rtx-hero .rtx-hero__dot::after {
  width: 6px;
  height: 6px;
  background: #0b1115;
  opacity: 0;
  transition: opacity .2s ease .04s;
}

.rtx-hero .rtx-hero__dot.is-active::before {
  width: 22px;
  height: 22px;
  background: var(--rtx-hero-dot-active);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1);
}

.rtx-hero .rtx-hero__dot.is-active::after {
  opacity: 1;
}

.rtx-hero .rtx-hero__dot:focus-visible {
  outline: 1px solid rgba(255, 255, 255, .95);
  outline-offset: 4px;
}

.rtx-hero__arrows {
  position: absolute;
  z-index: 9;
  right: 96px;
  bottom: 87px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.rtx-hero .rtx-hero__nav {
  all: unset;
  box-sizing: border-box;
  position: relative;
  display: grid;
  place-items: center;
  width: 51px;
  height: 51px;
  flex: 0 0 51px;
  overflow: visible;
  color: var(--rtx-hero-nav-color);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  isolation: isolate;
}

/*
 * The control keeps a fixed 51px layout slot. Only its visual surface grows,
 * so hovering one arrow never shifts its sibling. Radius stays physically
 * constant throughout the transition: circle -> soft capsule, no radius jump.
 */
.rtx-hero .rtx-hero__nav::before {
  content: '';
  position: absolute;
  top: 0;
  z-index: -1;
  width: 51px;
  height: 51px;
  border: 1px solid var(--rtx-hero-nav-border);
  border-radius: 25px;
  background: rgba(5, 27, 37, .14);
  box-shadow: none;
  pointer-events: none;
  transition:
    width .46s cubic-bezier(.22, .61, .36, 1),
    background .38s cubic-bezier(.22, .61, .36, 1),
    border-color .32s ease,
    box-shadow .38s ease;
}

.rtx-hero__nav--prev::before { right: 0; }
.rtx-hero__nav--next::before { left: 0; }

.rtx-hero__nav-glyph {
  position: relative;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  pointer-events: none;
  transform: translateX(0);
  transition: transform .46s cubic-bezier(.22, .61, .36, 1);
}

.rtx-hero__nav-glyph :is(i, svg) {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 19px;
  line-height: 1;
  transition: transform .46s cubic-bezier(.22, .61, .36, 1);
}

.rtx-hero__nav--prev .rtx-hero__nav-glyph :is(i, svg),
.rtx-hero__nav--next .rtx-hero__nav-glyph :is(i, svg) {
  transform: none;
  transform-origin: center;
}

@media (hover: hover) and (pointer: fine) {
  .rtx-hero .rtx-hero__nav:hover::before {
    width: 76px;
    border-color: rgba(175, 222, 244, .8);
    background: linear-gradient(112deg, var(--rtx-hero-nav-start) 0%, var(--rtx-hero-nav-end) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 7px 20px rgba(16, 74, 101, .11);
  }

  .rtx-hero .rtx-hero__nav--prev:hover .rtx-hero__nav-glyph {
    transform: translateX(-12.5px);
  }

  .rtx-hero .rtx-hero__nav--next:hover .rtx-hero__nav-glyph {
    transform: translateX(12.5px);
  }

  .rtx-hero .rtx-hero__nav:hover .rtx-hero__nav-glyph :is(i, svg) {
    transform: none;
  }
}

.rtx-hero .rtx-hero__nav:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .94);
  outline-offset: 4px;
  border-radius: 25px;
}

.rtx-hero .rtx-hero__nav:focus-visible::before {
  width: 76px;
  border-color: rgba(184, 229, 249, .92);
  background: linear-gradient(112deg, #4b94b7 0%, #65afd2 100%);
}

.rtx-hero .rtx-hero__nav--prev:focus-visible .rtx-hero__nav-glyph {
  transform: translateX(-12.5px);
}

.rtx-hero .rtx-hero__nav--next:focus-visible .rtx-hero__nav-glyph {
  transform: translateX(12.5px);
}

.rtx-hero .rtx-hero__nav:focus-visible .rtx-hero__nav-glyph :is(i, svg) {
  transform: none;
}

.rtx-hero-empty {
  padding: 24px;
  border: 1px solid #d9e3ea;
  border-radius: 16px;
  background: #fff;
  color: #17212b;
}

@media (max-width: 1200px) {
  .rtx-hero {
    --rtx-hero-rail-width: 112px;
    --rtx-hero-content-left: clamp(148px, 13vw, 170px);
  }

  .rtx-hero__social { left: 42px; }
  .rtx-hero__pagination { left: 43px; }
  .rtx-hero__inner { padding-right: 64px; }
  .rtx-hero__title { font-size: clamp(54px, 5.7vw, 74px); }
  .rtx-hero__motion--description { max-width: 560px; margin-top: 64px; }
  .rtx-hero__description { font-size: 18px; line-height: 1.85; }
  .rtx-hero__arrows { right: 48px; }
}

@media (max-width: 1024px) {
  .rtx-hero { height: var(--rtx-hero-height-tablet); }
  .rtx-hero::before { width: 84px; }
  .rtx-hero__inner { padding: 58px 48px 78px 124px; }
  .rtx-hero__social { left: 28px; top: 190px; }
  .rtx-hero__pagination { left: 30px; bottom: 54px; }
  .rtx-hero__arrows { right: 32px; bottom: 46px; }
  .rtx-hero__motion--title { margin-top: 34px; }
  .rtx-hero__title { font-size: clamp(48px, 6.2vw, 68px); }
  .rtx-hero__motion--button { margin-top: 34px; }
  .rtx-hero__motion--description { margin-top: 56px; max-width: 530px; }
  .rtx-hero__description { font-size: 17px; line-height: 1.78; }
}

@media (max-width: 767px) {
  .rtx-hero {
    --rtx-hero-rail-width: 0px;
    --rtx-hero-mobile-gutter: 20px;
    height: var(--rtx-hero-height-mobile-fallback, var(--rtx-hero-height-mobile));
    min-height: 0;
    max-height: none;
  }

  @supports (height: 100dvh) {
    .rtx-hero { height: var(--rtx-hero-height-mobile); }
  }

  .rtx-hero::before,
  .rtx-hero__social,
  .rtx-hero__watermark {
    display: none;
  }

  .rtx-hero__viewport {
    touch-action: pan-y;
  }

  .rtx-hero__media img,
  .rtx-hero__slide.is-active .rtx-hero__media img {
    transform: none;
    transition: none;
    will-change: auto;
  }

  .rtx-hero__overlay {
    background:
      linear-gradient(180deg,
        rgba(var(--rtx-slide-overlay-rgb, 0, 0, 0), .34) 0%,
        rgba(var(--rtx-slide-overlay-rgb, 0, 0, 0), .18) 34%,
        rgba(var(--rtx-slide-overlay-rgb, 0, 0, 0), .40) 68%,
        rgba(var(--rtx-slide-overlay-rgb, 0, 0, 0), .76) 100%),
      linear-gradient(90deg,
        rgba(var(--rtx-slide-overlay-rgb, 0, 0, 0), .48) 0%,
        rgba(var(--rtx-slide-overlay-rgb, 0, 0, 0), .10) 100%);
  }

  .rtx-hero__inner {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: clamp(104px, 16vh, 132px) var(--rtx-hero-mobile-gutter) 104px;
  }

  .rtx-hero__content {
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    margin: 0;
    text-align: left;
  }

  .rtx-hero__motion--eyebrow,
  .rtx-hero__motion--title,
  .rtx-hero__motion--button,
  .rtx-hero__motion--description {
    margin-inline: 0;
  }

  .rtx-hero__eyebrow {
    font-size: 12px;
    line-height: 1.25;
    letter-spacing: .08em;
    text-align: left;
  }

  .rtx-hero__motion--title {
    width: min(100%, var(--rtx-hero-title-width));
    max-width: 100%;
    margin-top: 18px;
  }

  .rtx-hero__title {
    width: 100%;
    max-width: none;
    margin: 0 !important;
    padding: 0 !important;
    font-size: clamp(34px, 10.2vw, 44px);
    line-height: 1.02;
    letter-spacing: .006em;
    text-align: left;
    text-wrap: initial;
    overflow-wrap: normal;
    word-break: normal;
  }

  .rtx-hero__motion--button {
    width: min(100%, 320px);
    margin-top: 26px;
  }

  .rtx-hero .rtx-hero__button {
    width: 100%;
    min-width: 0;
    min-height: 54px;
    padding: 10px 18px !important;
    border-width: 1px !important;
    border-radius: 9px !important;
    font-size: 17px;
    letter-spacing: .04em;
  }

  .rtx-hero__motion--description {
    width: min(100%, 39ch);
    max-width: 100%;
    margin-top: 28px;
  }

  .rtx-hero__description {
    max-width: 100%;
    font-size: 15.5px;
    line-height: 1.62;
    letter-spacing: -.008em;
    text-align: left;
  }

  .rtx-hero__pagination {
    left: var(--rtx-hero-mobile-gutter);
    right: auto;
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 12;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  /*
   * Mobile keeps the exact desktop visual language for Hero navigation.
   * Only positioning is responsive; dot and arrow geometry intentionally
   * inherit from the base desktop rules above.
   */
  .rtx-hero__arrows {
    right: var(--rtx-hero-mobile-gutter);
    bottom: max(12px, env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .rtx-hero__slide,
  .rtx-hero__media img,
  .rtx-hero .rtx-hero__button,
  .rtx-hero .rtx-hero__nav,
  .rtx-hero .rtx-hero__nav::before,
  .rtx-hero__nav-glyph,
  .rtx-hero__nav-glyph :is(i, svg),
  .rtx-hero .rtx-hero__dot,
  .rtx-hero .rtx-hero__dot::before,
  .rtx-hero .rtx-hero__dot::after,
  .rtx-hero .rtx-hero__social-link {
    animation: none !important;
    transition: none !important;
  }

  .rtx-hero__motion {
    opacity: 1 !important;
    transform: none !important;
  }
}

.rtx-hero .screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}