/* OMT V15 — hero/header refinement
   - ticker flush to viewport top
   - navigation directly beneath ticker
   - smoother background video compositing
   - solid OMT-yellow hero typography with comfortable spacing */

:root {
  --omt-yellow: #F8C800;
  --omt-header-navy: #061426;
}

/* Prevent the original mt-40 child margin from collapsing through <header>. */
header {
  position: relative;
  z-index: 60;
  display: flow-root;
  padding-top: 32px;
  margin: 0 !important;
  background: var(--omt-header-navy);
}

.omt-market-ticker {
  position: absolute;
  inset: 0 0 auto 0;
  top: 0 !important;
  height: 32px;
  margin: 0 !important;
  transform: none !important;
}

/* Navigation begins exactly where the ticker ends: no gap and no overlap. */
.tp-header-2-area,
.tp-header-2-area.mt-40 {
  margin-top: 0 !important;
}

/* Keep the navigation on its own clean layer beneath the ticker. */
.tp-header-2-area {
  position: relative;
  z-index: 61;
  background: var(--omt-header-navy);
}

/* The source video is now web-optimized; avoid blur filters on a 1080p moving
   layer because they are expensive during the pinned 3D hero sequence. */
.omt-hero-bg-video {
  filter: none !important;
  transform: translate3d(0,0,0) scale(1.003) !important;
  backface-visibility: hidden;
  will-change: auto !important;
}

/* Use ordinary translucent overlays to keep the cinematic blue treatment
   without re-blurring every video frame. */
.mxd-hero-02__cover {
  background:
    radial-gradient(circle at 50% 34%, rgba(17, 54, 104, .08) 0%, rgba(4, 18, 49, .20) 44%, rgba(1, 7, 24, .54) 100%),
    linear-gradient(180deg, rgba(1, 7, 24, .56) 0%, rgba(3, 16, 45, .34) 38%, rgba(3, 15, 42, .20) 68%, rgba(1, 7, 24, .48) 100%) !important;
}

.mxd-hero-02__cover::before {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Solid hero text: remove OMT's difference blend that changed the yellow
   depending on the video/image underneath it. */
.mxd-hero-02__intro,
.mxd-hero-02__outro {
  mix-blend-mode: normal !important;
  width: min(68%, 1080px) !important;
  padding-inline: 24px !important;
}

.mxd-hero-02__intro h1,
.mxd-hero-02__outro p {
  color: var(--omt-yellow) !important;
  -webkit-text-fill-color: var(--omt-yellow) !important;
  background: none !important;
  background-image: none !important;
  font-kerning: normal;
  font-feature-settings: "kern" 1;
  text-rendering: geometricPrecision;
  text-shadow: 0 4px 26px rgba(0, 0, 0, .28);
}

.mxd-hero-02__intro h1 {
  font-family: 'ClashDisplay-Bold', sans-serif !important;
  font-size: clamp(64px, 6vw, 96px) !important;
  font-weight: 700 !important;
  line-height: 1.02 !important;
  letter-spacing: -.012em !important;
  word-spacing: .08em !important;
}

.mxd-hero-02__outro p {
  font-family: 'ClashDisplay-Medium', sans-serif !important;
  font-size: clamp(52px, 5.2vw, 88px) !important;
  font-weight: 500 !important;
  line-height: 1.04 !important;
  letter-spacing: -.01em !important;
  word-spacing: .09em !important;
  max-width: 980px;
  margin-inline: auto;
  text-wrap: balance;
}

/* SplitText creates individual words/chars. Give each word real breathing
   room so the title cannot collapse into the next word during the reveal. */
.mxd-hero-02__intro .omt-hero-word,
.mxd-hero-02__outro .omt-hero-word {
  display: inline-block !important;
  margin-right: .16em !important;
  white-space: nowrap;
}

.mxd-hero-02__intro .omt-hero-char,
.mxd-hero-02__outro .omt-hero-char {
  display: inline-block;
  letter-spacing: inherit;
}

/* The final gateway image gets the same solid-text treatment. */
.mxd-hero-02__cover-img::after {
  background:
    radial-gradient(circle at 50% 48%, rgba(3, 13, 34, .10) 0%, rgba(2, 9, 27, .22) 54%, rgba(1, 6, 20, .48) 100%),
    linear-gradient(180deg, rgba(1, 7, 23, .24) 0%, rgba(3, 14, 39, .10) 45%, rgba(1, 7, 24, .38) 100%) !important;
}

@media (max-width: 1199px) {
  .mxd-hero-02__intro,
  .mxd-hero-02__outro {
    width: min(82%, 900px) !important;
  }
}

@media (max-width: 767px) {
  header {
    padding-top: 30px;
  }
  .omt-market-ticker {
    height: 30px;
  }
  .mxd-hero-02__intro,
  .mxd-hero-02__outro {
    width: 94% !important;
    padding-inline: 12px !important;
  }
  .mxd-hero-02__intro h1 {
    font-size: clamp(44px, 12vw, 58px) !important;
    line-height: 1.04 !important;
    letter-spacing: -.008em !important;
  }
  .mxd-hero-02__outro p {
    font-size: clamp(40px, 10.5vw, 54px) !important;
    line-height: 1.05 !important;
  }
  .mxd-hero-02__intro .omt-hero-word,
  .mxd-hero-02__outro .omt-hero-word {
    margin-right: .13em !important;
  }
}