/* =========================================================
   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;
  padding:0px;
}

.mp-division-tile{
  position:relative;
  display:block;
  height:560px;
  min-height:560px;
  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:560px;
  object-fit:cover;
  object-position: top center;
  transform: scale(1.);
  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.20);
  filter: saturate(1.15) contrast(1.12) brightness(1.25);
}

.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: 580px;
    padding: 10px 6px 10px;
    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:96%;
  }

  .mp-division-tile{
    position:absolute;
    left: 50%;
    top: 50%;
    width: min(74vw, 310px);
    height: 540px;
    min-height: 560px;

    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: 490px; }
  .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;
}


.container-mission {
	/* From https://css.glass */
background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
box-shadow: 0 4px 50px rgba(255, 250, 255, 0.2);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);
}

#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(0,9,28,.90) 25%,
	  rgba(0,0,0,.95) 90%),
	  rgba(0,0,14,.75) 30%;
  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;
	color: #F5F5F5;
	text-align: left;
}

/* =========================================================
   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;
}

.our-story h3 {
	font-size: 36px; 
	font-weight: 700;
	color: #F5BF23;
}

.our-story h3 span {
	font-size: 36px; 
	font-weight: 300;
	color: #F5BF23;
}
.our-story h4 {
	font-size: 22px; 
	font-weight: 400;
	color: #0761FF;
}

.our-story h5 {
	font-size: 20px; 
	font-weight: 300;
	color: #FFF;
}
.our-story h5 span {
	font-size: 20px; 
	font-weight: 700;
	color: #0761FF;
}

.our-story h6 {
	font-size: 32px; 
	font-weight: 900;
	color: #E52329;
}
 
.our-story span {color:#F5BF23; font-weight: 400; text-transform: uppercase }


/* =========================================================
   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; }
}

 
    /* =========================================================
       RESET & BASE
       ========================================================= */
    .epic-section-EPIC, .epic-section-EPIC *, .epic-section-EPIC *::before, .epic-section-EPIC *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body.body-EPIC {
      font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
      background: #0d0d0f;
      color: #ffffff;
      line-height: 1.5;
      overflow-x: hidden;
    }

    /* =========================================================
       ROW/COL SYSTEM (Bootstrap-style)
       ========================================================= */
    .row-EPIC {
      display: flex;
      flex-wrap: wrap;
      margin-left: -10px;
      margin-right: -10px;
      margin-bottom: 20px;
    }

    .row-EPIC:last-child {
      margin-bottom: 0;
    }

    [class*="col-EPIC"] {
      padding-left: 10px;
      padding-right: 10px;
      margin-bottom: 20px;
    }

    /* Column widths */
    .col-1-EPIC { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-2-EPIC { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-3-EPIC { flex: 0 0 25%; max-width: 25%; }
    .col-4-EPIC { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-5-EPIC { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-6-EPIC { flex: 0 0 50%; max-width: 50%; }
    .col-7-EPIC { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-8-EPIC { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-9-EPIC { flex: 0 0 75%; max-width: 75%; }
    .col-10-EPIC { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-11-EPIC { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-12-EPIC { flex: 0 0 100%; max-width: 100%; }

    /* Tablet columns */
    @media (min-width: 768px) and (max-width: 1023px) {
      .col-md-1-EPIC { flex: 0 0 8.333333%; max-width: 8.333333%; }
      .col-md-2-EPIC { flex: 0 0 16.666667%; max-width: 16.666667%; }
      .col-md-3-EPIC { flex: 0 0 25%; max-width: 25%; }
      .col-md-4-EPIC { flex: 0 0 33.333333%; max-width: 33.333333%; }
      .col-md-5-EPIC { flex: 0 0 41.666667%; max-width: 41.666667%; }
      .col-md-6-EPIC { flex: 0 0 50%; max-width: 50%; }
      .col-md-7-EPIC { flex: 0 0 58.333333%; max-width: 58.333333%; }
      .col-md-8-EPIC { flex: 0 0 66.666667%; max-width: 66.666667%; }
      .col-md-9-EPIC { flex: 0 0 75%; max-width: 75%; }
      .col-md-10-EPIC { flex: 0 0 83.333333%; max-width: 83.333333%; }
      .col-md-11-EPIC { flex: 0 0 91.666667%; max-width: 91.666667%; }
      .col-md-12-EPIC { flex: 0 0 100%; max-width: 100%; }
    }

    /* Desktop columns */
    @media (min-width: 1024px) {
      .col-lg-1-EPIC { flex: 0 0 8.333333%; max-width: 8.333333%; }
      .col-lg-2-EPIC { flex: 0 0 16.666667%; max-width: 16.666667%; }
      .col-lg-3-EPIC { flex: 0 0 25%; max-width: 25%; }
      .col-lg-4-EPIC { flex: 0 0 33.333333%; max-width: 33.333333%; }
      .col-lg-5-EPIC { flex: 0 0 41.666667%; max-width: 41.666667%; }
      .col-lg-6-EPIC { flex: 0 0 50%; max-width: 50%; }
      .col-lg-7-EPIC { flex: 0 0 58.333333%; max-width: 58.333333%; }
      .col-lg-8-EPIC { flex: 0 0 66.666667%; max-width: 66.666667%; }
      .col-lg-9-EPIC { flex: 0 0 75%; max-width: 75%; }
      .col-lg-10-EPIC { flex: 0 0 83.333333%; max-width: 83.333333%; }
      .col-lg-11-EPIC { flex: 0 0 91.666667%; max-width: 91.666667%; }
      .col-lg-12-EPIC { flex: 0 0 100%; max-width: 100%; }
    }

    /* Mobile - all full width */
    @media (max-width: 767px) {
      [class*="col-EPIC"] {
        flex: 0 0 100%;
        max-width: 100%;
      }
    }

    /* =========================================================
       EPIC BATTLES SECTION - DARK CHARCOAL/BLACK & NAVY
       ========================================================= */
    .epic-section-EPIC {
      position: relative;
      
      font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
      color: #ffffff;
      line-height: 1.5;
      min-height: 100vh;
      background: 
        radial-gradient(ellipse at top left, rgba(15, 17, 19, 0.74), transparent 40%),
        radial-gradient(ellipse at bottom right, rgba(0, 0, 0, 0.95), transparent 80%),
        linear-gradient(180deg, #0d0d0f 0%, #0a0e1a 50%, #0d0d0f 100%);
      padding: 100px 0 80px;
      overflow: hidden;
    }

    /* Subtle grid background */
    .epic-section-EPIC::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: 
        linear-gradient(rgba(255, 215, 0, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 215, 0, 0.02) 1px, transparent 1px);
      background-size: 50px 50px;
      opacity: 0.3;
      pointer-events: none;
    }

    .container-EPIC {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 30px;
      position: relative;
      z-index: 1;
    }

    @media (max-width: 767px) {
      .container-EPIC {
        padding: 0 20px;
      }
      .epic-section-EPIC {
        padding: 60px 0;
      }
    }

    /* =========================================================
       HEADER
       ========================================================= */
    .section-header-EPIC {
      text-align: center;
      margin-bottom: 80px;
      position: relative;
    }

    .section-label-EPIC {
      display: inline-block;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: #ffd700;
      margin-bottom: 20px;
      padding: 8px 20px;
      border: 2px solid rgba(255, 215, 0, 0.3);
      border-radius: 30px;
      background: rgba(255, 215, 0, 0.05);
      animation: glow-EPIC 3s ease-in-out infinite;
    }

    @keyframes glow-EPIC {
      0%, 100% { 
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
      }
      50% { 
        box-shadow: 0 0 25px rgba(255, 215, 0, 0.5);
      }
    }

    .section-title-EPIC {
      font-size: clamp(38px, 6vw, 80px);
      font-weight: 900;
      line-height: 0.95;
      letter-spacing: -0.03em;
      margin-bottom: 30px;
      background: linear-gradient(135deg, #ffd700 0%, #ffc107 50%, #1e3a8a 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-transform: uppercase;
    }
	  .section-title-EPIC-lg {
      font-size: clamp(48px, 8vw, 120px);
      font-weight: 900;
      line-height: 0.95;
      letter-spacing: -0.03em;
      margin-bottom: 30px;
      background: linear-gradient(135deg, #ffd700 0%, #ffc107 50%, #1e3a8a 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-transform: uppercase;
    }

    .section-desc-EPIC {
      font-size: clamp(16px, 2vw, 22px);
      color: rgba(255, 255, 255, 0.5);
      max-width: 800px;
      margin: 0 auto;
      font-weight: 400;
    }

    /* =========================================================
       BATTLE CARD - DARK CHARCOAL THEME
       ========================================================= */
    .battle-card-EPIC {
      position: relative;
      background: rgba(18, 18, 22, 0.7);
      border-radius: 20px;
      overflow: hidden;
      cursor: pointer;
      border: 1px solid rgba(255, 215, 0, 0.08);
      transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      backdrop-filter: blur(10px);
      height: 100%;
      min-height: 400px;
	padding: 6px;
    }

    /* Height modifiers */
    .battle-card-EPIC.tall { min-height: 550px; }
    .battle-card-EPIC.short { min-height: 320px; }
    .battle-card-EPIC.medium { min-height: 420px; }

    @media (max-width: 767px) {
      .battle-card-EPIC {
        min-height: 450px !important;
      }
    }

    /* Glowing border on hover */
    .battle-card-EPIC::before {
      content: "";
      position: absolute;
      inset: -2px;
      background: linear-gradient(
        135deg,
        rgba(255, 215, 0, 0.6) 0%,
        rgba(255, 215, 0, 0.3) 50%,
        rgba(20, 40, 80, 0.4) 100%
      );
      border-radius: 20px;
      opacity: 0;
      transition: opacity 0.5s ease;
      z-index: -1;
    }

    .battle-card-EPIC:hover {
      transform: translateY(-12px);
      border-color: rgba(255, 215, 0, 0.6);
      box-shadow: 
        0 30px 80px rgba(0, 0, 0, 0.9),
        0 0 50px rgba(255, 215, 0, 0.4),
        0 0 100px rgba(255, 215, 0, 0.2);
      background: rgba(25, 25, 30, 0.85);
    }

    .battle-card-EPIC:hover::before {
      opacity: 1;
    }

    .battle-wrapper-EPIC {
      display: block;
      text-decoration: none;
      color: inherit;
      height: 100%;
      position: relative;
    }

    /* =========================================================
       IMAGE - Shows from TOP on mobile (CRITICAL FIX)
       ========================================================= */
    .battle-image-EPIC {
      position: absolute;
      inset: 0;
      z-index: 0;
    }

    .battle-image-EPIC::before {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(255, 215, 0, 0.12);
      mix-blend-mode: overlay;
      opacity: 0;
      transition: opacity 0.5s ease;
      z-index: 1;
    }

    .battle-card-EPIC:hover .battle-image-EPIC::before {
      opacity: 1;
    }

    .battle-image-EPIC img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center; /* CRITICAL: Shows from TOP */
      transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
      filter: brightness(0.5) contrast(1.15) saturate(0.85);
    }

    .battle-card-EPIC:hover .battle-image-EPIC img {
      transform: scale(1.12);
      filter: brightness(0.7) contrast(1.2) saturate(1.1);
    }

    .battle-gradient-EPIC {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        180deg,
        rgba(13, 13, 15, 0) 0%,
        rgba(13, 13, 15, 0.5) 40%,
        rgba(13, 13, 15, 0.95) 100%
      );
      z-index: 1;
    }

    /* =========================================================
       CARD CONTENT
       ========================================================= */
    .battle-content-EPIC {
      position: relative;
      z-index: 2;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 28px;
    }

    .battle-accent-EPIC {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 40px;
      height: 40px;
      border-top: 3px solid #ffd700;
      border-right: 3px solid #ffd700;
      border-radius: 0 12px 0 0;
      opacity: 0.5;
      transition: all 0.5s ease;
    }

    .battle-card-EPIC:hover .battle-accent-EPIC {
      width: 70px;
      height: 70px;
      opacity: 1;
      box-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
      border-width: 4px;
    }

    .battle-year-EPIC {
      display: inline-block;
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: #0d0d0f;
      background: linear-gradient(135deg, #ffd700, #ffc107);
      padding: 6px 14px;
      border-radius: 20px;
      margin-bottom: 12px;
      width: fit-content;
      box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
      transition: all 0.4s ease;
    }

    .battle-card-EPIC:hover .battle-year-EPIC {
      box-shadow: 0 6px 25px rgba(255, 215, 0, 0.6);
      transform: translateY(-2px);
    }

    .battle-name-EPIC {
      font-size: clamp(22px, 2.5vw, 44px);
      font-weight: 900;
      line-height: 1;
      margin-bottom: 8px;
      color: #ffffff;
      text-shadow: 
        0 0 20px rgba(255, 215, 0, 0.4),
        0 2px 10px rgba(0, 0, 0, 0.9);
      letter-spacing: -0.02em;
      text-transform: uppercase;
      transition: all 0.4s ease;
    }

    .battle-card-EPIC:hover .battle-name-EPIC {
      text-shadow: 
        0 0 30px rgba(255, 215, 0, 0.8),
        0 0 50px rgba(255, 215, 0, 0.4),
        0 2px 10px rgba(0, 0, 0, 0.9);
    }

    .battle-location-EPIC {
      font-size: 13px;
      color: rgba(255, 215, 0, 0.8);
      margin-bottom: 12px;
      font-weight: 600;
      letter-spacing: 0.05em;
      transition: color 0.4s ease;
    }

    .battle-card-EPIC:hover .battle-location-EPIC {
      color: rgba(255, 215, 0, 1);
    }

    .battle-desc-EPIC {
      font-size: 14px;
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.7);
      margin-bottom: 16px;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      transition: color 0.4s ease;
    }

    .battle-card-EPIC:hover .battle-desc-EPIC {
      color: rgba(255, 255, 255, 0.9);
    }

    /* =========================================================
       VIEW FIGHT BUTTON - IMPROVED HOVER EFFECT
       ========================================================= */
    .battle-link-EPIC {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      font-weight: 800;
      color: #ffd700;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      padding: 12px 24px;
      background: rgba(255, 215, 0, 0.1);
      border: 2px solid rgba(255, 215, 0, 0.3);
      border-radius: 30px;
      width: fit-content;
      position: relative;
      overflow: hidden;
      transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    /* Animated background on hover */
    .battle-link-EPIC::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, #ffd700, #ffc107);
      transform: translateX(-100%);
      transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
      z-index: -1;
    }

    .battle-card-EPIC:hover .battle-link-EPIC {
      color: #0d0d0f;
      border-color: #ffd700;
      transform: translateY(-4px);
      box-shadow: 
        0 10px 30px rgba(255, 215, 0, 0.4),
        0 0 40px rgba(255, 215, 0, 0.3);
    }

    .battle-card-EPIC:hover .battle-link-EPIC::before {
      transform: translateX(0);
    }

    .battle-link-EPIC svg {
      transition: transform 0.4s ease;
      position: relative;
      z-index: 1;
    }

    .battle-card-EPIC:hover .battle-link-EPIC svg {
      transform: translateX(6px);
    }

    /* Scan lines effect */
    .battle-scanline-EPIC {
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(
        0deg,
        rgba(255, 215, 0, 0.02),
        rgba(255, 215, 0, 0.02) 1px,
        transparent 1px,
        transparent 2px
      );
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: 3;
    }

    .battle-card-EPIC:hover .battle-scanline-EPIC {
      opacity: 1;
    }

    /* =========================================================
       ANIMATIONS
       ========================================================= */
    .battle-card-EPIC {
      opacity: 0;
      animation: slideInCard-EPIC 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }

    .row-EPIC:nth-child(1) .battle-card-EPIC:nth-child(1) { animation-delay: 0.1s; }
    .row-EPIC:nth-child(1) .battle-card-EPIC:nth-child(2) { animation-delay: 0.2s; }
    .row-EPIC:nth-child(2) .battle-card-EPIC:nth-child(1) { animation-delay: 0.3s; }
    .row-EPIC:nth-child(2) .battle-card-EPIC:nth-child(2) { animation-delay: 0.4s; }
    .row-EPIC:nth-child(2) .battle-card-EPIC:nth-child(3) { animation-delay: 0.5s; }
    .row-EPIC:nth-child(3) .battle-card-EPIC { animation-delay: 0.6s; }

    @keyframes slideInCard-EPIC {
      from {
        opacity: 0;
        transform: translateY(60px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* =========================================================
       ACCESSIBILITY
       ========================================================= */
    .battle-wrapper-EPIC:focus-visible {
      outline: 3px solid #ffd700;
      outline-offset: 4px;
      border-radius: 20px;
    }

    @media (prefers-reduced-motion: reduce) {
      .epic-section-EPIC *, .epic-section-EPIC *::before, .epic-section-EPIC *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }

    /* =========================================================
       INFO FOOTER
       ========================================================= */
    .info-footer-EPIC {
      text-align: center;
      margin-top: 80px;
      padding: 40px 20px;
      border-top: 1px solid rgba(255, 215, 0, 0.1);
    }

    .info-footer-EPIC p {
      color: rgba(255, 255, 255, 0.4);
      font-size: 14px;
      line-height: 1.8;
    }

    .info-footer-EPIC strong {
      color: #ffd700;
      font-weight: 700;
    }