/* =========================================================
   GLOBAL: Hide “broken-image/alt-text looking” text while keeping real alt=""
   ========================================================= */
img{
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* =========================================================
   IMPORTANT FIXES (YOUR REQUEST)
   1) Hide deck arrows + hint on DESKTOP (only show arrows on mobile)
   2) Remove/Hide "Swipe" text everywhere
   ========================================================= */
.mp-deck-nav,
.mp-deck-hint{
  display:none !important; /* default: hidden (desktop + anything outside mobile query) */
}

/* =========================================================
   MP DIVISION STRIP (DESKTOP 8x / MOBILE DECK)
   ========================================================= */
.mp-division-strip{
  --mp-border: rgba(255,255,255,.14);
  width:100%;
  background: transparent;
  position: relative;
  isolation: isolate;
}

.mp-division-grid{
  display:grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap:0;
  width:100%;
  overflow:hidden;
}

.mp-division-tile{
  position:relative;
  display:block;
  height:540px;
  min-height:540px;
  border:1px solid var(--mp-border);
  border-left:none;
  background:#0b0b0f;
  text-decoration:none;
  overflow:hidden;
  isolation:isolate;
  transform: translateZ(0);
  cursor: pointer; /* now a div role=link */
}
.mp-division-tile:first-child{ border-left:1px solid var(--mp-border); }

.mp-division-tile:focus-visible{
  outline: none;
  border-color: rgba(255, 214, 0, .55);
  box-shadow: 0 0 0 2px rgba(255,214,0,.38) inset, 0 18px 55px rgba(0,0,0,.55);
}

.mp-division-tile img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform: scale(1.03);
  filter: saturate(1.05) contrast(1.06);
  transition: transform .35s ease, filter .35s ease;
  display:block;
  z-index:0;
}

.mp-division-tile.mp-img-error{
  background:
    radial-gradient(900px 600px at 20% 20%, rgba(255,214,0,.20), transparent 60%),
    radial-gradient(900px 650px at 80% 60%, rgba(255,214,0,.10), transparent 55%),
    linear-gradient(180deg, rgba(10,10,16,.35), rgba(0,0,0,.95));
}

.mp-division-tile::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.30) 45%, rgba(0,0,0,.80) 100%);
  z-index:1;
  pointer-events:none;
}

.mp-division-tile::after{
  content:"";
  position:absolute;
  top:-15%;
  left:-80%;
  width:60%;
  height:140%;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.14) 35%,
    rgba(255,255,255,.32) 50%,
    rgba(255,255,255,.12) 65%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-18deg);
  opacity:0;
  z-index:2;
  pointer-events:none;
}

.mp-division-tile:hover::after,
.mp-division-tile:focus-visible::after,
.mp-division-tile.is-inview::after{
  opacity:1;
  animation: mpReflect 900ms ease-out 1;
}

@keyframes mpReflect{
  0%   { left:-80%; }
  100% { left:130%; }
}

.mp-division-tile:hover img,
.mp-division-tile:focus-visible img{
  transform: scale(1.10);
  filter: saturate(1.15) contrast(1.12) brightness(1.02);
}

.mp-division-tile:hover,
.mp-division-tile:focus-visible{
  outline:none;
  border-color: rgba(255, 214, 0, .35);
  box-shadow: 0 0 0 1px rgba(255, 214, 0, .22) inset, 0 18px 55px rgba(0,0,0,.55);
}

/* =========================================================
   Opponent label (TOP-LEFT): VERTICAL RIBBON (75% HEIGHT)
   - Text is ONE LINE: "vs Marco A. Barrera"
   - Ribbon stays top-left and stops ~75% down (no bleed into titles/button)
   ========================================================= */

@keyframes mpOpponentPulseRibbon{
  0%, 100%{
    opacity: .92;
    box-shadow:
      0 0 0 1px rgba(255, 20, 55, .55) inset,
      0 0 12px rgba(255, 0, 50, .18),
      0 0 24px rgba(255, 0, 50, .10);
  }
  50%{
    opacity: 1;
    box-shadow:
      0 0 0 1px rgba(255, 20, 55, .75) inset,
      0 0 16px rgba(255, 0, 50, .26),
      0 0 34px rgba(255, 0, 50, .14);
  }
}

/* The vertical ribbon container (border stops ~75% height) */
.mp-division-tile .mp-opponent{
  position:absolute;
  top:10px;
  left:10px;
  z-index:4;
  border: none !important;
  width:32px;         /* ribbon thickness */
  height:56%;         /* IMPORTANT: stops before bottom titles/button */
  padding:8px 4px;
  border-radius:8px;

  background: linear-gradient(180deg,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.16) 100%);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;      /* prevents any bleed into your bottom content */
  pointer-events:none;  /* keeps clicks going to the card/button */
  animation: mpOpponentPulseRibbon 2.8s ease-in-out infinite;
}

/* optional inner “spec line” (safe to remove) */
.mp-division-tile .mp-opponent::before{
  content:"";
  position:absolute;
  top:12px;
  bottom:12px;
  left:50%;
  display:none !important;
  transform: translateX(-50%);
  background: linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,214,0,.28) 50%,
    rgba(255,255,255,0) 100%);
  opacity:.55;
}

/* The ONE-LINE text, rotated so it reads TOP -> DOWN */
.mp-division-tile .mp-opponent-line{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:4px;

  white-space:nowrap;        /* IMPORTANT: one single line */
  transform: rotate(90deg);  /* IMPORTANT: reads top-to-bottom */
  transform-origin:center;

  font-family: "Poppins","Roboto",Arial,sans-serif;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 1;
}

/* "vs" styling */
.mp-division-tile .mp-opponent-vs{
  color:#ffd600;
  text-shadow:
    0 0 8px rgba(255,214,0,.55),
    0 0 18px rgba(255,214,0,.28);
}

/* FIRST / MIDDLE = NEON BLUE */
.mp-division-tile .mp-opponent-first{
  color:#0064FF;
  text-shadow:
    0 0 10px rgba(0,200,255,.36),
    0 0 24px rgba(0,200,255,.18);
}

/* LAST = RED */
.mp-division-tile .mp-opponent-last{
  color:#ff1437;
  text-shadow:
    0 0 10px rgba(255, 20, 55, .45),
    0 0 24px rgba(255, 20, 55, .22);
}

/* Stronger border/glow on hover/focus */
.mp-division-tile:hover .mp-opponent,
.mp-division-tile:focus-visible .mp-opponent{
  border-color: rgba(255, 20, 55, .90);
  box-shadow:
    0 0 0 1px rgba(255, 20, 55, .85) inset,
    0 0 18px rgba(255, 0, 50, .30),
    0 0 42px rgba(255, 0, 50, .16);
}

/* Mobile tuning (still stops short of bottom content) */
@media (max-width: 991.98px){
  .mp-division-tile .mp-opponent{
    left:10px !important;
    right:auto !important;
    top:10px;
    width:44px;
    height:72%;
  }
  .mp-division-tile .mp-opponent-line{
    font-size: 11px;
    gap: 7px;
  }
}

@media (prefers-reduced-motion: reduce){
  .mp-division-tile .mp-opponent{ animation: none !important; }
}

.mp-subheader{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:3;
  padding:14px 14px 16px 14px;
  display:block;
}
.mp-sub-left{ display:flex; flex-direction:column; gap:6px; min-width:0; }

.mp-division{
  color: rgba(255,255,255,.95);
  font-weight: 800;
  letter-spacing:.04em;
  text-transform: uppercase;
  font-size: 12px;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mp-meta{
  color: rgba(255,255,255,.72);
  font-size: 12px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* =========================================================
   MP CHIP => BUTTON-LIKE LINK (VIEW FIGHT RECAP) - ALL 8 CARDS
   ========================================================= */
.mp-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top: 8px;
  width: auto;
  max-width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing:.08em;
  white-space:nowrap;

  color: rgba(10,10,12,.95);
  background: linear-gradient(135deg, #ffd600 0%, #ffb300 35%, #ffe082 100%);
  border: 1px solid rgba(255,214,0,.55);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;

  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mp-chip:focus-visible{
  outline: 2px solid rgba(255,214,0,.80);
  outline-offset: 3px;
}

.mp-division-tile:hover .mp-chip,
.mp-division-tile:focus-visible .mp-chip{
  transform: translateY(-1px);
  box-shadow:
    0 14px 40px rgba(0,0,0,.42),
    0 0 24px rgba(255,214,0,.22);
  filter: saturate(1.08) contrast(1.02);
}

/* =========================================================
   MOBILE TITLE
   ========================================================= */
.mp-mobile-title{
  display:none;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0;
  padding: 18px 14px 20px 14px;
  text-align: center;
  color: #ffffff;
  text-shadow:
    0 0 10px rgba(255, 255, 0, .22),
    0 0 24px rgba(255, 214, 0, .18);
}
.mp-mobile-title span{
  color:#ffd600;
  text-shadow:
    0 0 6px  rgba(255, 255, 0, .45),
    0 0 18px rgba(255, 214, 0, .35),
    0 0 36px rgba(255, 214, 0, .18);
}

@media (max-width: 991.98px){
  .mp-mobile-title{ display:block; }
}

/* =========================================================
   MOBILE/RESPONSIVE: KEEP THE CARD DECK LOOK
   + ARROWS (MOBILE ONLY) + SWIPE SUPPORT (JS)
   ========================================================= */
@media (max-width: 991.98px){
  .mp-division-strip{
    padding-bottom: 40px !important;
    overflow: visible !important;
  }

  .mp-division-grid{
    position:relative;
    display:block;
    height: 520px;
    padding: 10px 6px;
    overflow: hidden;
    background-color: #000000;

    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
  }

  .mp-division-grid::after{
    content:"";
    display:block;
    height: 40px;
    width:100%;
  }

  .mp-division-tile{
    position:absolute;
    left: 50%;
    top: 50%;
    width: min(76vw, 320px);
    height: 520px;
    min-height: 520px;

    border-left: 1px solid var(--mp-border);
    border-radius: 16px;

    transform-origin: center center;
    box-shadow: 0 26px 60px rgba(0,0,0,.55);
    transition: transform .35s ease, box-shadow .35s ease, filter .35s ease, opacity .35s ease;
    will-change: transform, opacity;

    transform: translate(-50%, -50%) scale(.92);
    opacity: .65;
    z-index: 1;
  }

  .mp-division-tile.is-active{
    z-index:99;
    opacity:1;
    transform: translate(-50%, -50%) scale(1.03) rotate(0deg);
    box-shadow: 0 34px 100px rgba(0,0,0,.70);
  }

  .mp-division-tile.is-active img{ transform: scale(1.08); }

  /* =========================================================
     MOBILE ONLY: deck nav shown + vertical stack on LEFT side
     ========================================================= */
  .mp-deck-nav{
    display:flex !important;              /* overrides desktop hide */
    position:absolute;
    top:0;
    bottom:0;
    left: 8px;
    right: auto;
    width: 60px;
    z-index: 200;
    pointer-events: none;                 /* buttons re-enable */
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;              /* VERTICAL */
    gap: 12px;
  }

  .mp-deck-btn{
    pointer-events: auto;
    position: relative;                  /* no absolute positioning now */
    top: auto;
    left: auto;
    right: auto;
    transform: none;

    width: 46px;
    height: 46px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(0,0,0,.40);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
      0 18px 60px rgba(0,0,0,.55),
      0 0 0 1px rgba(255,255,255,.06) inset;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .mp-deck-btn:focus-visible{
    outline: 2px solid rgba(255,214,0,.80);
    outline-offset: 3px;
  }

  .mp-deck-btn i{
    font-style: normal;
    font-weight: 900;
    font-size: 22px;
    color:#ffd600;
    text-shadow:
      0 0 10px rgba(255,214,0,.38),
      0 0 24px rgba(255,214,0,.18);
    line-height: 1;
  }

  /* Swipe hint is OFF everywhere (your request) */
  .mp-deck-hint{
    display:none !important;
  }
}

@media (max-width: 575.98px){
  .mp-division-grid{ height: 480px; }
  .mp-division-tile{ height: 480px; min-height: 480px; }
}

/* =========================================================
   CAREER HIGHLIGHTS SECTION BACKGROUNDS
   ========================================================= */
@keyframes gradient-animation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.gradient-background {
  background: linear-gradient(232deg,#000000,#0f0f0e,#cece03);
  background-size: 180% 180%;
  animation: gradient-animation 27s ease infinite;
}

/* =========================================================
   PRIMARY: STILL BACKGROUND + ROWS LIFT INTO FRAME
   ========================================================= */
#mpPrimaryHighlights.mp-parallax-stage{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

#mpPrimaryHighlights .mp-bg-layer{
  position: absolute;
  inset: -18%;
  z-index: 0;
  pointer-events: none;

  background:
    radial-gradient(900px 540px at 14% 18%, rgba(255,214,0,.16), transparent 62%),
    radial-gradient(820px 520px at 86% 32%, rgba(255,214,0,.12), transparent 60%),
    radial-gradient(1000px 700px at 50% 92%, rgba(0,0,0,.92), rgba(0,0,0,.98) 58%),
    linear-gradient(120deg, rgba(255,214,0,.06), rgba(0,0,0,.82), rgba(255,214,0,.05));

  filter: saturate(1.08);
  transform: translate3d(0, var(--mp-bg-shift, 0px), 0) scale(1.02);
  will-change: transform;
  transition: transform .15s linear;
}

#mpPrimaryHighlights .container,
#mpPrimaryHighlights .section-head,
#mpPrimaryHighlights .section-content{
  position: relative;
  z-index: 2;
}

#mpPrimaryHighlights .mp-hl-row{
  scroll-margin-top: 120px;
}

#mpPrimaryHighlights .mp-hl-row{
  --mp-row-y: 80px;
  --mp-row-a: 0;
  --mp-row-s: .987;
  --mp-row-b: 4.5px;

  transform: translate3d(0, var(--mp-row-y), 0) scale(var(--mp-row-s));
  opacity: var(--mp-row-a);
  filter: blur(var(--mp-row-b));
  will-change: transform, opacity, filter;
  transition: transform .10s linear, opacity .10s linear, filter .10s linear;
}

@media (prefers-reduced-motion: reduce){
  #mpPrimaryHighlights .mp-bg-layer{ transform: none !important; }
  #mpPrimaryHighlights .mp-hl-row{
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}

/* =========================================================
   OUR STORY DETAIL (TEXT CARD) + GLASSMORPHISM (unchanged)
   ========================================================= */
.our-story .our-story-detail{
  position:relative;
  border-radius: 18px;
  background: rgba(12,12,18,.70);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 22px 70px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.06) inset;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow:hidden;
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease;
}

.our-story > .row:nth-child(odd) .our-story-detail{
  background: rgba(12, 12, 18, .42);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 24px 78px rgba(0,0,0,.60),
    0 0 0 1px rgba(255,255,255,.09) inset,
    0 0 26px rgba(255,214,0,.10);
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
}

.our-story .our-story-detail:hover{
  transform: perspective(1100px) rotateY(1.2deg) rotateX(-1.1deg) translateY(-2px);
  box-shadow:
    0 28px 90px rgba(0,0,0,.62),
    0 0 0 1px rgba(255,255,255,.06) inset;
}

.our-story > .row:nth-child(even) .our-story-detail{
  background: linear-gradient(135deg,
    rgba(255,214,0,.30) 0%,
    rgba(255,178,0,.22) 25%,
    rgba(20,20,26,.65) 70%,
    rgba(10,10,14,.75) 100%);
  border: 1px solid rgba(255,214,0,.22);
  box-shadow:
    0 26px 80px rgba(0,0,0,.62),
    0 0 22px rgba(255,214,0,.14),
    0 0 0 1px rgba(255,214,0,.10) inset;
}

/* =========================================================
   HIGHLIGHTS IMAGE WRAP + NEON GLOW (unchanged)
   ========================================================= */
.our-story .our-story-pic-block{
  position: relative;
  perspective: 900px;
  padding-bottom: 10px;
  overflow: visible;
}

@media (max-width: 991.98px){
  .our-story .our-story-pic-block{ padding-bottom: 26px; }
}

.our-story .mp-fight-link{
  display:block;
  text-decoration:none;
  outline:none;
  -webkit-tap-highlight-color: transparent;
}
.our-story .mp-fight-link:focus-visible{
  outline: 2px solid rgba(255,214,0,.70);
  outline-offset: 6px;
  border-radius: 18px;
}

.our-story .our-story-pic-block::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width: 86%;
  height: 86%;
  transform: translate(-50%, -50%) scale(.98);
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 255, 0, .55) 0%,
    rgba(255, 214, 0, .28) 35%,
    rgba(0,0,0,0) 72%);
  filter: blur(24px);
  opacity: 0;
  transition: opacity .20s ease, transform .20s ease;
  pointer-events:none;
  z-index: 0;
}

.our-story .our-story-pic-block:hover::before,
.our-story .mp-fight-link:active .our-story-pic-block::before,
.our-story .our-story-pic-block:focus-within::before{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.03);
}

.our-story .our-story-pic{
  position:relative;
  z-index:1;
  overflow:hidden;
  border: 1px solid rgba(255,214,0,.95);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  background:#0b0b0f;
  transform: translateZ(0);
  transform-style: preserve-3d;
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform, box-shadow;
}

.our-story .our-story-pic img{
  width:100%;
  height:auto;
  display:block;
  transform: translateZ(0) scale(1.02);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform .45s ease, filter .45s ease;
  filter: saturate(1.05) contrast(1.06);
  will-change: transform, filter;
}

.our-story .our-story-pic-block:hover .our-story-pic{
  transform: rotateY(-16deg) rotateX(3deg) translateY(-2px);
  box-shadow:
    0 18px 55px rgba(0,0,0,.62),
    0 0 0 1px rgba(255,214,0,.95),
    0 0 34px rgba(255,255,0,.34),
    0 0 72px rgba(255,214,0,.16);
}
.our-story .our-story-pic-block:hover .our-story-pic img{
  transform: translateZ(18px) scale(1.085) rotateY(10deg) rotateX(-6deg) rotateZ(-0.6deg);
  filter: saturate(1.18) contrast(1.10) brightness(1.02);
}

.our-story .mp-fight-link:active .our-story-pic{
  transform: rotateY(-10deg) rotateX(2deg) translateY(-1px) scale(1.01);
  box-shadow:
    0 18px 55px rgba(0,0,0,.62),
    0 0 0 1px rgba(255,214,0,.95),
    0 0 38px rgba(255,255,0,.40),
    0 0 86px rgba(255,214,0,.18);
}
.our-story .mp-fight-link:active .our-story-pic img{
  transform: translateZ(14px) scale(1.07);
  filter: saturate(1.14) contrast(1.08) brightness(1.02);
}

.our-story .our-story-pic::after{
  content:"";
  position:absolute;
  top:-15%;
  left:-80%;
  width:60%;
  height:140%;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.12) 35%,
    rgba(255,255,255,.30) 50%,
    rgba(255,255,255,.10) 65%,
    rgba(255,255,255,0) 100%);
  transform: skewX(-18deg);
  opacity:0;
  pointer-events:none;
  z-index:3;
}

.our-story .our-story-pic-block:hover .our-story-pic::after,
.our-story .our-story-pic.mp-reflect::after{
  opacity:1;
  animation: mpReflect 900ms ease-out 1;
}

/* =========================================================
   SCROLL REVEAL (unchanged)
   ========================================================= */
body.mp-js .mp-reveal-img,
body.mp-js .mp-reveal-detail{
  opacity:0;
  transform: translateY(18px);
  filter: blur(3.5px);
  transition: opacity .60s ease, transform .60s ease, filter .60s ease;
  will-change: opacity, transform, filter;
}
body.mp-js .mp-reveal-img.is-revealed,
body.mp-js .mp-reveal-detail.is-revealed{
  opacity:1;
  transform: translateY(0);
  filter: blur(0);
}

body.mp-js .mp-reveal-detail p{ clip-path: inset(0 0 0 0); animation: none; }
body.mp-js .mp-reveal-detail:not(.is-revealed) p{ clip-path: inset(0 100% 0 0); }

body.mp-js .mp-reveal-detail.is-typing p{
  clip-path: inset(0 100% 0 0);
  animation: mpTypeReveal 1.15s steps(70, end) forwards;
  animation-delay: var(--mp-delay, 0s);
}

body.mp-js .mp-reveal-detail.has-typed p{
  clip-path: inset(0 0 0 0) !important;
  animation: none !important;
}

@keyframes mpTypeReveal{ to { clip-path: inset(0 0 0 0); } }

.our-story .row{ margin-bottom: 46px; }

/* =========================================================
   Secondary section base cleanup (unchanged)
   ========================================================= */
.mp-highlights-modern2{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background: #0b0b10 !important;
}
.mp-highlights-modern2.bg-repeat,
.mp-highlights-modern2.square_shape3{
  background-image: none !important;
}
.mp-highlights-modern2::before{
  content:"";
  position:absolute;
  inset:-2px;
  z-index:0;
  background:
    radial-gradient(920px 560px at 18% 18%, rgba(255,214,0,.38), transparent 60%),
    radial-gradient(900px 600px at 82% 30%, rgba(255,255,0,.28), transparent 60%),
    radial-gradient(980px 720px at 50% 92%, rgba(255,214,0,.18), rgba(0,0,0,.94) 60%),
    linear-gradient(115deg, rgba(255,214,0,.22), rgba(0,0,0,.70), rgba(255,255,0,.20));
  background-size: 230% 230%;
  animation: mpGlowShiftB 14s ease-in-out infinite;
  filter: saturate(1.18);
  pointer-events:none;
}
.mp-highlights-modern2::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background: radial-gradient(1200px 780px at 50% 35%, rgba(255,214,0,.12), transparent 70%);
  pointer-events:none;
}
@keyframes mpGlowShiftB{
  0%   { background-position: 100% 50%; }
  50%  { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
.mp-highlights-modern2 > .container,
.mp-highlights-modern2 .section-head,
.mp-highlights-modern2 .section-content{
  position:relative;
  z-index:2;
}


/* =========================================================
   MP MISSION JUMP LINKS (3 stacked buttons)
   - Buttons are 100% width, 65px height, no vertical gaps
   - Optional background image via inline CSS variable:
     style="--mp-mission-bg: url('images/background/bg-site.png');"
   ========================================================= */
.mp-mission-links{
  position:relative;
  width:100%;
  border-radius:16px;
  overflow:hidden;
  isolation:isolate;
  /* base layer */
  background: linear-gradient(180deg, rgba(8,10,14,.92), rgba(8,10,14,.78));
  border:1px solid rgba(255,255,255,.14);
}

/* Background image (optional) */
.mp-mission-links::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--mp-mission-bg);
  background-size:cover;
  background-position:center;
  opacity:.50; /* adjust background image opacity here */
  transform: scale(1.02);
  z-index:-2;
}

/* Dark overlay for legibility */
.mp-mission-links::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(120% 120% at 20% 10%, rgba(255,255,255,.10), rgba(0,0,0,.65));
  z-index:-1;
}

.mp-mission-btn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  height:65px; /* requested button height */
  padding:0 18px;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:800;
  font-size:13px;
  color:#fff !important;
  background: rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.12);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.mp-mission-btn:last-child{ border-bottom:none; }

.mp-mission-btn__arrow{
  font-size:18px;
  line-height:1;
  opacity:.9;
  transform: translateX(0);
  transition: transform .18s ease, opacity .18s ease;
}

/* Animated sheen */
.mp-mission-btn::before{
  content:"";
  position:absolute;
  inset:-1px;
  background: linear-gradient(110deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.10) 40%, rgba(255,255,255,0) 75%);
  transform: translateX(-110%);
  transition: transform .6s ease;
  pointer-events:none;
}

.mp-mission-btn:hover,
.mp-mission-btn:focus-visible{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,215,0,.30);
  box-shadow: 0 0 0 1px rgba(255,215,0,.24), 0 10px 26px rgba(0,0,0,.30), 0 0 26px rgba(255,215,0,.18);
  transform: translateY(-1px);
}

.mp-mission-btn:hover::before,
.mp-mission-btn:focus-visible::before{
  transform: translateX(110%);
}

.mp-mission-btn:hover .mp-mission-btn__arrow,
.mp-mission-btn:focus-visible .mp-mission-btn__arrow{
  transform: translateX(4px);
  opacity:1;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .mp-mission-btn,
  .mp-mission-btn::before,
  .mp-mission-btn__arrow{ transition:none !important; }
}

/* =========================================================
   EPIC BATTLES: Bento / Gallery Grid
   - Layout A/B/C supports 5–10 cards (auto-sizing via nth-child)
   - Hover reveals overlay; click/tap toggles the detail panel
   ========================================================= */
.mp-epic-battles{
  position: relative;
}

.mp-section-lead{
  max-width: 820px;
  margin: 10px auto 0;
  opacity: .92;
}

/* Layout switcher (optional UI) */
.mp-bento-controls{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  margin: 18px 0 18px;
  flex-wrap: wrap;
}

.mp-bento-layout{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.mp-bento-layout-btn{
  appearance:none;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.32);
  color: rgba(255,255,255,.92);
  padding: 10px 14px;
  border-radius: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
  cursor: pointer;
}

.mp-bento-layout-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}

.mp-bento-layout-btn.is-active{
  border-color: rgba(255,233,64,.55);
  box-shadow: 0 0 0 1px rgba(255,233,64,.18), 0 12px 28px rgba(0,0,0,.32);
  background: rgba(255,233,64,.12);
}

.mp-bento-note{
  opacity: .85;
  font-size: 13px;
  line-height: 1.25;
}

/* Grid */
.mp-bento-grid{
  --mp-gap: 14px;
  --mp-row: 120px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--mp-gap);
  grid-auto-flow: dense;
  grid-auto-rows: var(--mp-row);
}

/* Base card sizing (3 per row on 12-col grid) */
.mp-bento-card{
  grid-column: span 4;
  grid-row: span 2;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.35);
  box-shadow: 0 18px 48px rgba(0,0,0,.35);
  transform: translateY(10px);
  opacity: 0;
  transition: transform .45s ease, opacity .45s ease, box-shadow .25s ease, border-color .25s ease;
}

.mp-bento-card.is-inview{
  transform: translateY(0);
  opacity: 1;
}

.mp-bento-card:hover{
  border-color: rgba(255,255,255,.20);
  box-shadow: 0 18px 56px rgba(0,0,0,.42);
}

/* Layout A: hero first card, then mediums */
.mp-bento--layoutA .mp-bento-card:nth-child(1){ grid-column: span 8; grid-row: span 4; }
.mp-bento--layoutA .mp-bento-card:nth-child(2){ grid-column: span 4; grid-row: span 2; }
.mp-bento--layoutA .mp-bento-card:nth-child(3){ grid-column: span 4; grid-row: span 2; }
/* 4–10 use base sizing, but add a little variety */
.mp-bento--layoutA .mp-bento-card:nth-child(6){ grid-column: span 6; }
.mp-bento--layoutA .mp-bento-card:nth-child(9){ grid-column: span 6; }

/* Layout B: two big anchors */
.mp-bento--layoutB .mp-bento-card:nth-child(1){ grid-column: span 6; grid-row: span 4; }
.mp-bento--layoutB .mp-bento-card:nth-child(2){ grid-column: span 6; grid-row: span 3; }
.mp-bento--layoutB .mp-bento-card:nth-child(3){ grid-column: span 4; grid-row: span 2; }
.mp-bento--layoutB .mp-bento-card:nth-child(4){ grid-column: span 4; grid-row: span 2; }
.mp-bento--layoutB .mp-bento-card:nth-child(5){ grid-column: span 4; grid-row: span 2; }
.mp-bento--layoutB .mp-bento-card:nth-child(8){ grid-column: span 6; }

/* Layout C: cleaner, more uniform gallery */
.mp-bento--layoutC .mp-bento-card:nth-child(1){ grid-column: span 6; grid-row: span 3; }
.mp-bento--layoutC .mp-bento-card:nth-child(2){ grid-column: span 6; grid-row: span 3; }
.mp-bento--layoutC .mp-bento-card{ grid-column: span 3; grid-row: span 2; }
.mp-bento--layoutC .mp-bento-card:nth-child(3),
.mp-bento--layoutC .mp-bento-card:nth-child(4),
.mp-bento--layoutC .mp-bento-card:nth-child(5),
.mp-bento--layoutC .mp-bento-card:nth-child(6){ grid-column: span 3; }

/* Media (image) */
.mp-bento-media{
  height: 100%;
  position: relative;
  cursor: pointer;
  outline: none;
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(255,233,64,.08), rgba(0,0,0,0)),
    radial-gradient(900px 600px at 70% 80%, rgba(64,160,255,.08), rgba(0,0,0,0)),
    linear-gradient(180deg, rgba(0,0,0,.26), rgba(0,0,0,.62));
}

.mp-bento-media::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--mp-img);
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.05);
  opacity: .55;
  transform: scale(1.02);
}

.mp-bento-media > img{
  position:absolute; inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  opacity: .92;
  transform: scale(1.02);
  transition: transform .5s ease, opacity .5s ease, filter .5s ease;
}

.mp-bento-card:hover .mp-bento-media > img,
.mp-bento-card.is-open .mp-bento-media > img{
  transform: scale(1.06);
  opacity: .98;
  filter: saturate(1.08) contrast(1.06);
}

/* subtle neon frame on hover/open */
.mp-bento-card::after{
  content:"";
  position:absolute; inset: 0;
  pointer-events:none;
  border-radius: 22px;
  box-shadow: 0 0 0 0 rgba(255,233,64,0);
  transition: box-shadow .25s ease;
}

.mp-bento-card:hover::after,
.mp-bento-card.is-open::after{
  box-shadow: 0 0 0 1px rgba(255,233,64,.22), 0 0 40px rgba(255,233,64,.14);
}

/* Overlay */
.mp-bento-overlay{
  position:absolute; inset:0;
  display:flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px 18px 16px;
  background: linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.68) 70%, rgba(0,0,0,.86) 100%);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease;
}

.mp-bento-card:hover .mp-bento-overlay,
.mp-bento-card.is-open .mp-bento-overlay,
.mp-bento-card.is-peek .mp-bento-overlay{
  opacity: 1;
  transform: translateY(0);
}

.mp-bento-kicker{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .18em;
  opacity: .92;
  margin-bottom: 6px;
}

.mp-bento-title{
  margin: 0 0 6px;
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.1;
  font-weight: 800;
  text-shadow: 0 10px 28px rgba(0,0,0,.55);
}

.mp-bento-sub{
  margin: 0 0 12px;
  opacity: .92;
  max-width: 56ch;
}

.mp-bento-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.mp-bento-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.95);
  font-weight: 800;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}

.mp-bento-action:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 10px 22px rgba(0,0,0,.28);
}

.mp-bento-link{
  border-color: rgba(255,233,64,.35);
  background: rgba(255,233,64,.10);
}

.mp-bento-link:hover{
  border-color: rgba(255,233,64,.55);
  box-shadow: 0 0 0 1px rgba(255,233,64,.18), 0 12px 24px rgba(0,0,0,.32);
}

/* Detail panel (click/tap reveal) */
.mp-bento-panel{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 16px 18px 18px;
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
  border-top: 1px solid rgba(255,255,255,.12);
  background: rgba(10,10,14,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform .28s ease, opacity .28s ease;
}

.mp-bento-card.is-open .mp-bento-panel{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.mp-bento-panel p{
  margin: 0 0 10px;
  opacity: .92;
}

.mp-bento-bullets{
  margin: 0 0 12px;
  padding-left: 18px;
  opacity: .95;
}

.mp-bento-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 14px;
  font-weight: 900;
  text-decoration: none;
  color: rgba(0,0,0,.92);
  background: rgba(255,233,64,.92);
  border: 1px solid rgba(255,233,64,.25);
  transition: transform .18s ease, box-shadow .22s ease;
}

.mp-bento-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0,0,0,.35);
}

/* Tablet */
@media (max-width: 991px){
  .mp-bento-grid{ grid-template-columns: repeat(6, minmax(0, 1fr)); --mp-row: 110px; }
  .mp-bento-card{ grid-column: span 3; grid-row: span 2; }

  .mp-bento--layoutA .mp-bento-card:nth-child(1){ grid-column: span 6; grid-row: span 4; }
  .mp-bento--layoutA .mp-bento-card:nth-child(2){ grid-column: span 3; grid-row: span 2; }
  .mp-bento--layoutA .mp-bento-card:nth-child(3){ grid-column: span 3; grid-row: span 2; }

  .mp-bento--layoutB .mp-bento-card:nth-child(1){ grid-column: span 6; grid-row: span 4; }
  .mp-bento--layoutB .mp-bento-card:nth-child(2){ grid-column: span 6; grid-row: span 3; }

  .mp-bento--layoutC .mp-bento-card{ grid-column: span 3; grid-row: span 2; }
  .mp-bento--layoutC .mp-bento-card:nth-child(1),
  .mp-bento--layoutC .mp-bento-card:nth-child(2){ grid-column: span 6; grid-row: span 3; }
}

/* Mobile: single column stack for clean scrolling */
@media (max-width: 575px){
  .mp-bento-controls{ justify-content: center; }
  .mp-bento-note{ text-align:center; }
  .mp-bento-grid{ grid-template-columns: 1fr; grid-auto-rows: auto; }
  .mp-bento-card{ grid-column: span 1; grid-row: auto; }
  .mp-bento-media{ min-height: 240px; }
  .mp-bento-overlay{ opacity: 1; transform: translateY(0); }
  .mp-bento-panel{ position: static; transform: none; opacity: 1; pointer-events: auto; display:none; }
  .mp-bento-card.is-open .mp-bento-panel{ display:block; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .mp-bento-card,
  .mp-bento-media > img,
  .mp-bento-overlay,
  .mp-bento-layout-btn,
  .mp-bento-action,
  .mp-bento-panel{
    transition: none !important;
  }
}

/* EPIC BATTLES OVERRIDES v2 */
   - Dark background + 50% image opacity (change vars on #mpEpicBattles)
   - Bigger bento cards + tighter gaps
   - Glass effect + mild yellow glow (replaces neon look)
   - Mid-right small card (Layout A / card #3) taller so copy + CTA fit
   ========================================================= */

.mp-epic-battles{
  position: relative;
  isolation: isolate;
  background: #07080c;
  overflow: hidden;
}

.mp-epic-battles::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--mp-epic-bg, url('images/background/bg-site.png'));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: var(--mp-epic-bg-opacity, .50);
  filter: saturate(.85) contrast(.95) brightness(.65);
  transform: scale(1.05);
  z-index: -2;
}

.mp-epic-battles::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 520px at 22% 20%, rgba(205,250,0,.10), transparent 60%),
    radial-gradient(900px 520px at 80% 0%, rgba(255,255,255,.06), transparent 62%),
    linear-gradient(180deg, rgba(7,8,12,.82), rgba(7,8,12,.93));
  z-index: -1;
}

/* Bigger bento cards, tighter spacing */
.mp-bento-grid{
  --mp-gap: 10px;
  --mp-row: 132px;
  gap: var(--mp-gap) !important;
  grid-auto-rows: var(--mp-row) !important;
}

/* Mid-right “SMALL 1” (Layout A / card #3): add height on desktop */
.mp-bento--layoutA .mp-bento-card:nth-child(3){
  grid-row: span 3 !important;
}

/* Glassmorphism base */
.mp-bento-card{
  background: rgba(12,14,18,.52) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}

/* Mild yellow glow on hover (less “neon”) */
.mp-bento-card:hover{
  box-shadow:
    0 20px 60px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 0 26px rgba(205,250,0,.20) !important;
  transform: translateY(-2px);
}

/* Ensure body + buttons fit cleanly */
.mp-bento-body{
  padding: 14px 14px 12px !important;
  gap: 8px !important;
}

.mp-bento-actions{
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.mp-bento-cta{
  padding: 8px 12px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  border-radius: 12px !important;
}

/* Responsive tuning */
@media (max-width: 991px){
  .mp-bento-grid{ --mp-gap: 10px; --mp-row: 120px; }
  /* keep Layout A card #3 sane on smaller screens */
  .mp-bento--layoutA .mp-bento-card:nth-child(3){ grid-row: span 2 !important; }
}

@media (max-width: 575px){
  .mp-bento-grid{ --mp-gap: 8px; --mp-row: 112px; }
}