/* =====================================================
   NAMO FAZIL — PREMIUM DESIGN SYSTEM (v3)
   Layered on top of style.css. Owns the global brand
   language (tokens, type, nav, buttons, footer) and the
   flagship homepage journey.
   ===================================================== */

:root{
    /* Surfaces */
    --ink:#060606;
    --ink-2:#0b0b0c;
    --surface:#0e0e10;
    --surface-2:#141417;
    --glass:rgba(20,20,23,.55);

    /* Brand */
    --gold:#c8a24a;
    --gold-bright:#e3bd63;
    --gold-soft:rgba(200,162,74,.14);
    --gold-line:rgba(200,162,74,.30);

    /* Text */
    --text:#f4f3f0;
    --muted:#9a9a9c;
    --faint:#6a6a6d;
    --line:rgba(255,255,255,.08);
    --line-strong:rgba(255,255,255,.14);

    /* Type scale (fluid) */
    --fs-display:clamp(3.4rem, 9vw, 9.5rem);
    --fs-h1:clamp(2.6rem, 6vw, 5.5rem);
    --fs-h2:clamp(2rem, 4.5vw, 3.6rem);
    --fs-h3:clamp(1.3rem, 2.4vw, 1.9rem);
    --fs-lead:clamp(1.05rem, 1.5vw, 1.35rem);
    --fs-body:1rem;
    --fs-label:.72rem;

    /* Space scale */
    --sp-1:.5rem;
    --sp-2:1rem;
    --sp-3:1.5rem;
    --sp-4:2.5rem;
    --sp-5:4rem;
    --sp-6:6rem;
    --sp-7:9rem;
    --gutter:clamp(1.4rem, 5vw, 5rem);

    /* Radius + shadow */
    --r-sm:10px;
    --r-md:16px;
    --r-lg:24px;
    --shadow-1:0 10px 40px rgba(0,0,0,.35);
    --shadow-2:0 30px 80px rgba(0,0,0,.55);
    --glow:0 0 60px rgba(200,162,74,.22);

    /* Motion */
    --ease-out:cubic-bezier(.16,1,.3,1);
    --ease-soft:cubic-bezier(.22,.61,.36,1);
    --dur:.7s;
}

html{ scroll-behavior:smooth; }

body{
    background:var(--ink);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

/* Subtle ambient grain/vignette over everything (cheap, GPU-free) */
body::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
        radial-gradient(120% 80% at 50% -10%, rgba(200,162,74,.05), transparent 55%),
        radial-gradient(100% 100% at 50% 120%, rgba(0,0,0,.5), transparent 60%);
}

/* =========================
   SCROLL PROGRESS BAR
   ========================= */
.scroll-progress{
    position:fixed;
    top:0;
    left:0;
    height:2px;
    width:100%;
    transform:scaleX(0);
    transform-origin:left;
    background:linear-gradient(90deg, var(--gold), var(--gold-bright));
    z-index:1001;
    will-change:transform;
}

/* =========================
   GLOBAL REFINEMENTS
   nav, buttons, labels
   ========================= */
.site-header{
    padding:22px var(--gutter);
}

.nav a{
    position:relative;
    font-size:12px;
    letter-spacing:1.6px;
    opacity:.82;
    transition:opacity .3s var(--ease-soft), color .3s var(--ease-soft);
}
.nav a:hover{ opacity:1; }

.nav a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:100%;
    height:1px;
    background:var(--gold);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .35s var(--ease-out);
}
.nav a:hover::after,
.nav a.active-link::after{ transform:scaleX(1); }

/* Premium magnetic buttons */
.btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:.6em;
    padding:16px 30px;
    border-radius:999px;
    font-size:12px;
    letter-spacing:1.4px;
    overflow:hidden;
    isolation:isolate;
    transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out), color .3s ease, border-color .3s ease;
}
.btn::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:var(--gold-bright);
    transform:scaleX(0);
    transform-origin:right;
    transition:transform .45s var(--ease-out);
}
.btn.primary{ background:var(--gold); color:#0a0a0a; border:1px solid var(--gold); }
.btn.primary:hover{ box-shadow:0 18px 50px rgba(200,162,74,.30); }
.btn.primary:hover::before{ transform:scaleX(1); transform-origin:left; }
.btn.secondary{ background:transparent; color:var(--text); border:1px solid var(--line-strong); }
.btn.secondary:hover{ border-color:var(--gold); color:var(--gold); }

.btn .arrow{ transition:transform .4s var(--ease-out); }
.btn:hover .arrow{ transform:translateX(4px); }

.lux-label{
    display:inline-flex;
    align-items:center;
    gap:.7em;
    color:var(--gold);
    font-size:var(--fs-label);
    font-weight:700;
    letter-spacing:3.5px;
    text-transform:uppercase;
}
.lux-label::before{
    content:"";
    width:26px;
    height:1px;
    background:var(--gold);
    opacity:.7;
}

/* Section scaffolding */
.lux-section{
    position:relative;
    z-index:2;
    padding:var(--sp-7) var(--gutter);
}
.lux-section.tight{ padding-top:var(--sp-5); padding-bottom:var(--sp-5); }

.lux-head{ max-width:760px; margin-bottom:var(--sp-4); }
.lux-head h2{
    font-family:'Anton', sans-serif;
    font-size:var(--fs-h2);
    line-height:1.02;
    text-transform:uppercase;
    margin:18px 0 0;
}
.lux-head p{ color:var(--muted); font-size:var(--fs-lead); line-height:1.7; margin-top:18px; }

/* Reveal primitives (scroll-linked, JS adds .in) */
[data-reveal]{
    opacity:0;
    transform:translateY(34px);
    transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
    transition-delay:var(--reveal-delay, 0s);
    will-change:opacity, transform;
}
[data-reveal].in{ opacity:1; transform:none; }

[data-reveal="fade"]{ transform:none; }
[data-reveal="left"]{ transform:translateX(-40px); }
[data-reveal="right"]{ transform:translateX(40px); }
[data-reveal="scale"]{ transform:scale(.94); }

/* =====================================================
   HOMEPAGE — CINEMATIC JOURNEY
   ===================================================== */

/* ---- HERO ---- */
.lx-hero{
    position:relative;
    z-index:2;
    isolation:isolate;
    min-height:100svh;
    display:flex;
    align-items:flex-end;
    padding:0 var(--gutter) clamp(3rem, 7vh, 6rem);
    overflow:hidden;
}
.lx-hero__media{
    position:absolute;
    inset:0;
    z-index:0;
    background:url("../images/namo-hero.jpg") center 14% / cover no-repeat;
    transform:scale(1.06);
    animation:lxKen 26s ease-in-out infinite alternate;
    will-change:transform;
}
@keyframes lxKen{
    from{ transform:scale(1.06) translateY(0); }
    to{ transform:scale(1.18) translate(-1.2%, -2.2%); }
}
.lx-hero__scrim{
    position:absolute;
    inset:0;
    z-index:1;
    background:
        linear-gradient(180deg, rgba(6,6,6,.55) 0%, rgba(6,6,6,0) 22%, rgba(6,6,6,0) 45%, rgba(6,6,6,.92) 96%),
        linear-gradient(95deg, rgba(6,6,6,.85) 0%, rgba(6,6,6,.35) 48%, rgba(6,6,6,.08) 100%);
}
.lx-hero__grid{
    position:relative;
    z-index:2;
    width:100%;
    display:grid;
    grid-template-columns:1fr auto;
    align-items:flex-end;
    gap:var(--sp-4);
}
.lx-hero__content{ max-width:920px; }
.lx-hero__eyebrow{ margin-bottom:26px; }
.lx-hero h1{
    font-family:'Anton', sans-serif;
    font-size:var(--fs-display);
    line-height:.86;
    letter-spacing:1px;
    text-transform:uppercase;
    margin:0;
}
.lx-hero h1 .line{ display:block; overflow:hidden; }
.lx-hero h1 .line > span{
    display:block;
    transform:translateY(110%);
    transition:transform 1s var(--ease-out);
}
.lx-hero h1 em{ font-style:normal; color:var(--gold); }

/* Coordinated hero entrance */
.lx-hero__eyebrow,
.lx-hero__sub,
.lx-hero__cta,
.lx-hero__rail{
    opacity:0;
    transform:translateY(22px);
    transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.lx-hero.hero-in h1 .line > span{ transform:translateY(0); }
.lx-hero.hero-in h1 .line:nth-child(2) > span{ transition-delay:.08s; }
.lx-hero.hero-in .lx-hero__eyebrow{ opacity:1; transform:none; transition-delay:.15s; }
.lx-hero.hero-in .lx-hero__sub{ opacity:1; transform:none; transition-delay:.35s; }
.lx-hero.hero-in .lx-hero__cta{ opacity:1; transform:none; transition-delay:.45s; }
.lx-hero.hero-in .lx-hero__rail{ opacity:1; transform:none; transition-delay:.55s; }

@media(prefers-reduced-motion:reduce){
    .lx-hero h1 .line > span{ transform:none; }
    .lx-hero__eyebrow,
    .lx-hero__sub,
    .lx-hero__cta,
    .lx-hero__rail{ opacity:1; transform:none; }
}
.lx-hero__sub{
    max-width:560px;
    margin:28px 0 36px;
    color:#e8e6e0;
    font-size:var(--fs-lead);
    line-height:1.6;
}
.lx-hero__cta{ display:flex; flex-wrap:wrap; gap:14px; }

/* Hero side rail — vertical record badges */
.lx-hero__rail{
    display:flex;
    flex-direction:column;
    gap:18px;
    text-align:right;
    padding-bottom:6px;
}
.lx-hero__rail .rail-item span{
    display:block;
    color:var(--muted);
    font-size:11px;
    letter-spacing:2px;
    text-transform:uppercase;
}
.lx-hero__rail .rail-item strong{
    font-family:'Anton', sans-serif;
    font-size:30px;
    color:var(--gold);
    letter-spacing:1px;
}

.lx-hero__cue{
    position:absolute;
    left:var(--gutter);
    bottom:26px;
    z-index:2;
    display:inline-flex;
    align-items:center;
    gap:12px;
    color:var(--muted);
    font-size:10px;
    letter-spacing:3px;
    text-transform:uppercase;
}
.lx-hero__cue i{
    width:1px;
    height:42px;
    background:linear-gradient(var(--gold), transparent);
    display:block;
    animation:lxCue 1.8s var(--ease-soft) infinite;
    transform-origin:top;
}
@keyframes lxCue{
    0%{ transform:scaleY(0); opacity:0; }
    40%{ opacity:1; }
    100%{ transform:scaleY(1); opacity:0; }
}

/* ---- CREDENTIAL MARQUEE ---- */
.lx-creds{
    position:relative;
    z-index:2;
    padding:30px 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    background:var(--ink-2);
    overflow:hidden;
}
.lx-creds .label{
    text-align:center;
    color:var(--faint);
    font-size:10px;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:18px;
}
.lx-creds__track{
    display:flex;
    gap:64px;
    width:max-content;
    animation:lxMarquee 32s linear infinite;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.lx-creds:hover .lx-creds__track{ animation-play-state:paused; }
.lx-creds__track span{
    white-space:nowrap;
    font-family:'Anton', sans-serif;
    font-size:24px;
    letter-spacing:1px;
    color:#6f6f72;
    transition:color .3s ease;
}
.lx-creds__track span:hover{ color:var(--gold); }
@keyframes lxMarquee{ to{ transform:translateX(calc(-50% - 32px)); } }

/* ---- EDITORIAL / VISION ---- */
.lx-editorial{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:clamp(2rem, 5vw, 5rem);
    align-items:center;
}
.lx-editorial.flip .lx-editorial__media{ order:-1; }
.lx-editorial__copy h2{
    font-family:'Anton', sans-serif;
    font-size:var(--fs-h1);
    line-height:.98;
    text-transform:uppercase;
    margin:20px 0 24px;
}
.lx-editorial__copy p{ color:var(--muted); font-size:1.05rem; line-height:1.85; margin-bottom:18px; }
.lx-editorial__media{
    position:relative;
    border-radius:var(--r-lg);
    overflow:hidden;
    border:1px solid var(--line);
    aspect-ratio:4/5;
    background:var(--surface);
}
.lx-editorial__media img{
    width:100%; height:100%;
    object-fit:cover;
    object-position:center top;
    transition:transform 1.1s var(--ease-out);
}
.lx-editorial__media:hover img{ transform:scale(1.06); }
.lx-editorial__media figcaption{
    position:absolute;
    left:0; right:0; bottom:0;
    padding:26px;
    background:linear-gradient(to top, rgba(0,0,0,.92), transparent);
    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--gold);
}

/* ---- STATS / ACHIEVEMENTS ---- */
.lx-stats{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    overflow:hidden;
    background:var(--surface);
}
.lx-stat{
    padding:clamp(2rem,3.5vw,3.2rem) clamp(1.2rem,2vw,2rem);
    border-right:1px solid var(--line);
    position:relative;
}
.lx-stat:last-child{ border-right:0; }
.lx-stat .num{
    display:flex;
    align-items:baseline;
    gap:4px;
    font-family:'Anton', sans-serif;
    font-size:clamp(2.8rem, 5vw, 4.2rem);
    line-height:1;
    color:var(--gold);
}
.lx-stat .suffix{ font-size:1.4rem; color:var(--gold); }
.lx-stat .label{
    margin-top:14px;
    color:var(--muted);
    font-size:12px;
    letter-spacing:1.5px;
    text-transform:uppercase;
}
.lx-stat::after{
    content:"";
    position:absolute;
    left:0; bottom:0;
    width:0; height:2px;
    background:var(--gold);
    transition:width .8s var(--ease-out) .2s;
}
.lx-stat.in::after{ width:100%; }

/* ---- TIMELINE / JOURNEY ---- */
.lx-journey{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:clamp(2rem, 5vw, 5rem);
    align-items:start;
}
.lx-journey__head{ position:sticky; top:130px; }
.lx-journey__head .lux-head{ margin-bottom:0; }

.lx-timeline{ position:relative; }
.lx-timeline::before{
    content:"";
    position:absolute;
    left:0; top:6px; bottom:6px;
    width:1px;
    background:linear-gradient(var(--gold-line), transparent);
}
.lx-tl{
    position:relative;
    padding:0 0 var(--sp-4) clamp(2rem, 4vw, 3.5rem);
}
.lx-tl:last-child{ padding-bottom:0; }
.lx-tl::before{
    content:"";
    position:absolute;
    left:-4px; top:6px;
    width:9px; height:9px;
    border-radius:50%;
    background:var(--gold);
    box-shadow:0 0 0 5px rgba(200,162,74,.12);
}
.lx-tl .year{
    font-family:'Anton', sans-serif;
    color:var(--gold);
    font-size:18px;
    letter-spacing:1px;
}
.lx-tl h3{ font-size:var(--fs-h3); margin:6px 0 8px; }
.lx-tl p{ color:var(--muted); line-height:1.7; max-width:620px; }

/* ---- IMPACT (full-bleed image band) ---- */
.lx-impact{
    position:relative;
    z-index:2;
    min-height:70vh;
    display:flex;
    align-items:flex-end;
    padding:var(--sp-6) var(--gutter);
    overflow:hidden;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}
.lx-impact__bg{
    position:absolute; inset:0; z-index:0;
    background-image:url("../images/world-stage.jpg");
    background-size:cover;
    background-position:center 38%;
}
.lx-impact__scrim{
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(100deg, rgba(6,6,6,.94) 0%, rgba(6,6,6,.6) 45%, rgba(6,6,6,.2) 100%);
}
.lx-impact__inner{ position:relative; z-index:2; max-width:680px; }
.lx-impact h2{
    font-family:'Anton', sans-serif;
    font-size:var(--fs-h1);
    line-height:1;
    text-transform:uppercase;
    margin:20px 0 22px;
}
.lx-impact p{ color:#dcdad4; font-size:var(--fs-lead); line-height:1.8; }
.lx-tags{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.lx-tags span{
    padding:11px 18px;
    border:1px solid var(--gold-line);
    border-radius:999px;
    color:var(--gold);
    font-size:11px;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

/* ---- SIGNATURE QUOTE ---- */
.lx-quote{
    position:relative;
    z-index:2;
    text-align:center;
    padding:var(--sp-7) var(--gutter);
    max-width:1100px;
    margin:0 auto;
}
.lx-quote blockquote{
    font-family:'Anton', sans-serif;
    font-size:clamp(1.9rem, 4vw, 3.4rem);
    line-height:1.12;
    text-transform:uppercase;
    margin:0;
}
.lx-quote blockquote em{ font-style:normal; color:var(--gold); }
.lx-quote .mark{
    font-family:'Anton', sans-serif;
    font-size:5rem;
    color:var(--gold-line);
    line-height:.4;
}
.lx-quote cite{
    display:block;
    margin-top:30px;
    color:var(--muted);
    font-style:normal;
    font-size:12px;
    letter-spacing:2.5px;
    text-transform:uppercase;
}

/* ---- MEDIA SHOWCASE ---- */
.lx-mediagrid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:16px;
}
.lx-mtile{
    position:relative;
    aspect-ratio:3/4;
    border-radius:var(--r-md);
    overflow:hidden;
    border:1px solid var(--line);
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    transition:transform .5s var(--ease-out), border-color .4s ease;
}
.lx-mtile:hover{ transform:translateY(-6px); border-color:var(--gold-line); }
.lx-mtile__bg{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    transition:transform .6s var(--ease-out);
    z-index:0;
}
.lx-mtile:hover .lx-mtile__bg{ transform:scale(1.06); }
.lx-mtile__overlay{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    height:100%;
    padding:22px;
    background:linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.2) 50%, transparent 100%);
}
.lx-mtile__play{
    width:46px; height:46px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.65);
    display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,.3);
    color:#fff;
    transition:background .3s ease, border-color .3s ease, transform .3s ease;
    align-self:flex-start;
}
.lx-mtile:hover .lx-mtile__play{ background:var(--gold); color:#0a0a0a; border-color:var(--gold); transform:scale(1.1); }
.lx-mtile__label{ margin-top:auto; }
.lx-mtile__label h3{ font-size:13px; letter-spacing:1px; text-transform:uppercase; margin-top:6px; }

/* ---- CTA ---- */
.lx-cta{
    position:relative;
    z-index:2;
    margin:0 var(--gutter) var(--sp-6);
    padding:clamp(3rem, 6vw, 6rem);
    border-radius:var(--r-lg);
    border:1px solid var(--gold-line);
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(200,162,74,.16), transparent 55%),
        var(--surface);
    overflow:hidden;
}
.lx-cta h2{
    font-family:'Anton', sans-serif;
    font-size:var(--fs-h1);
    line-height:1;
    text-transform:uppercase;
    max-width:900px;
    margin:18px 0 28px;
}
.lx-cta__actions,
.lx-cta__btns{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.lx-cta__socials{ display:flex; gap:20px; margin-left:auto; }
.lx-cta__socials a{
    color:var(--muted);
    font-size:12px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    transition:color .3s ease;
}
.lx-cta__socials a:hover{ color:var(--gold); }

/* =====================================================
   FIGHT RECORD PAGE
   ===================================================== */
.lx-recsum{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:16px;
}
.lx-recsum__card{
    padding:28px;
    border:1px solid var(--line);
    border-radius:var(--r-md);
    background:var(--surface);
    transition:border-color .3s ease, transform .4s var(--ease-out);
}
.lx-recsum__card:hover{ border-color:var(--gold-line); transform:translateY(-4px); }
.lx-recsum__card span{
    display:block;
    color:var(--muted);
    font-size:11px;
    letter-spacing:1.6px;
    text-transform:uppercase;
    margin-bottom:12px;
}
.lx-recsum__card strong{
    font-family:'Anton', sans-serif;
    font-size:clamp(1.5rem, 2.4vw, 2.1rem);
    line-height:1.05;
    color:var(--gold);
    letter-spacing:.5px;
}

.lx-record-wrap{
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    overflow:hidden;
    background:var(--surface);
}
.lx-record{
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
}
.lx-record thead th{
    text-align:left;
    padding:20px 18px;
    color:var(--gold);
    font-size:11px;
    font-weight:800;
    letter-spacing:1.5px;
    text-transform:uppercase;
    background:var(--ink-2);
    border-bottom:1px solid var(--gold-line);
}
.lx-record tbody td{
    padding:18px;
    border-bottom:1px solid var(--line);
    color:#cfcfd2;
    font-size:14px;
    line-height:1.4;
    vertical-align:middle;
    overflow-wrap:break-word;
}
.lx-record tbody tr:last-child td{ border-bottom:0; }
.lx-record tbody tr{ transition:background .25s ease, box-shadow .3s var(--ease-out); }
.lx-record tbody tr:hover{ background:rgba(200,162,74,.07); box-shadow:inset 3px 0 0 var(--gold); }
.lx-record .num{
    font-family:'Anton', sans-serif;
    font-size:19px;
    color:var(--gold);
    transition:color .25s ease, text-shadow .25s ease;
}
.lx-record .opp{ color:#fff; font-weight:600; font-size:15px; transition:color .25s ease; }
.lx-record tbody tr:hover .num{ color:var(--gold-bright); text-shadow:0 0 18px rgba(200,162,74,.5); }
.lx-record tbody tr:hover .opp{ color:var(--gold-bright); }

/* Staggered row cascade — opacity only (transforms break table layout) */
@media(prefers-reduced-motion:no-preference){
    @keyframes lxRowIn{ from{ opacity:0; } to{ opacity:1; } }
    .lx-record-wrap.in tbody tr{ opacity:0; animation:lxRowIn .5s var(--ease-out) forwards; }
    .lx-record-wrap.in tbody tr:nth-child(1){ animation-delay:.08s; }
    .lx-record-wrap.in tbody tr:nth-child(2){ animation-delay:.14s; }
    .lx-record-wrap.in tbody tr:nth-child(3){ animation-delay:.20s; }
    .lx-record-wrap.in tbody tr:nth-child(4){ animation-delay:.26s; }
    .lx-record-wrap.in tbody tr:nth-child(5){ animation-delay:.32s; }
    .lx-record-wrap.in tbody tr:nth-child(6){ animation-delay:.38s; }
    .lx-record-wrap.in tbody tr:nth-child(7){ animation-delay:.44s; }
    .lx-record-wrap.in tbody tr:nth-child(8){ animation-delay:.50s; }
    .lx-record-wrap.in tbody tr:nth-child(9){ animation-delay:.56s; }
    .lx-record-wrap.in tbody tr:nth-child(10){ animation-delay:.62s; }
    .lx-record-wrap.in tbody tr:nth-child(11){ animation-delay:.68s; }
}
.lx-record .pill{
    display:inline-block;
    padding:6px 13px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.8px;
    text-transform:uppercase;
    white-space:nowrap;
}
.lx-record .pill{ transition:box-shadow .3s ease; }
.lx-record .pill.win{ color:#5fe093; background:rgba(74,222,128,.10); border:1px solid rgba(74,222,128,.32); }
.lx-record .pill.loss{ color:#ff6f6f; background:rgba(239,68,68,.10); border:1px solid rgba(239,68,68,.34); }
.lx-record tbody tr:hover .pill.win{ box-shadow:0 0 18px rgba(74,222,128,.28); }
.lx-record tbody tr:hover .pill.loss{ box-shadow:0 0 18px rgba(239,68,68,.30); }

@media(max-width:760px){
    .lx-recsum{ grid-template-columns:repeat(2, 1fr); }
    .lx-record-wrap{ border:0; border-radius:0; background:transparent; overflow:visible; }
    .lx-record{ table-layout:auto; }
    .lx-record colgroup,
    .lx-record thead{ display:none; }
    .lx-record tbody,
    .lx-record tbody tr,
    .lx-record tbody td{ display:block; width:100%; }
    .lx-record tbody tr{
        border:1px solid var(--line);
        border-radius:var(--r-md);
        background:var(--surface);
        margin-bottom:14px;
        padding:6px 18px;
    }
    .lx-record tbody td{
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:18px;
        text-align:right;
        padding:12px 0;
        border-bottom:1px solid var(--line);
        font-size:13px;
    }
    .lx-record tbody tr td:last-child{ border-bottom:0; }
    .lx-record tbody td::before{
        content:attr(data-label);
        color:var(--gold);
        font-size:10px;
        font-weight:800;
        letter-spacing:1px;
        text-transform:uppercase;
        text-align:left;
        flex-shrink:0;
    }
    .lx-record .num{ font-size:16px; }
}
@media(max-width:440px){
    .lx-recsum{ grid-template-columns:1fr; }
}

/* =========================
   RESPONSIVE
   ========================= */
@media(max-width:1024px){
    .lx-mediagrid{ grid-template-columns:repeat(2, 1fr); }
}
@media(max-width:860px){
    :root{ --sp-7:5rem; --sp-6:4rem; }
    .lx-hero{ align-items:center; padding-top:120px; }
    .lx-hero__grid{ grid-template-columns:1fr; }
    .lx-hero__rail{
        flex-direction:row;
        flex-wrap:wrap;
        text-align:left;
        gap:22px 34px;
        margin-top:30px;
        padding-top:26px;
        border-top:1px solid var(--line);
    }
    .lx-hero__rail .rail-item strong{ font-size:24px; }
    .lx-hero__cue{ display:none; }
    .lx-editorial{ grid-template-columns:1fr; }
    .lx-editorial.flip .lx-editorial__media{ order:0; }
    .lx-journey{ grid-template-columns:1fr; }
    .lx-journey__head{ position:static; margin-bottom:var(--sp-3); }
    .lx-editorial__media{ aspect-ratio:4/4.4; }
    .lx-stats{ grid-template-columns:repeat(2, 1fr); }
    .lx-stat:nth-child(2){ border-right:0; }
    .lx-stat:nth-child(1), .lx-stat:nth-child(2){ border-bottom:1px solid var(--line); }
    .lx-cta__socials{ margin-left:0; width:100%; }
}
@media(max-width:480px){
    .lx-stats{ grid-template-columns:1fr; }
    .lx-stat{ border-right:0; border-bottom:1px solid var(--line); }
    .lx-stat:last-child{ border-bottom:0; }
}

/* =========================
   REDUCED MOTION
   ========================= */
@media(prefers-reduced-motion:reduce){
    .lx-hero__media{ animation:none; transform:none; }
    .lx-creds__track{ animation:none; }
    .lx-hero__cue i{ animation:none; }
    [data-reveal]{ opacity:1 !important; transform:none !important; }
    .scroll-progress{ display:none; }
}
.powered-by{text-align:center;padding-top:16px;color:#444;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;}.powered-by strong{color:#666;font-weight:700;}
.powered-by a{color:inherit;text-decoration:none;transition:color .2s ease;}
.powered-by a:hover strong{color:#c89b3c;}

/* ===== NEXT FIGHT COUNTDOWN ===== */
.lx-nextfight{
    padding:clamp(3rem,7vw,6rem) 1.5rem;
    text-align:center;
    border-top:1px solid rgba(255,255,255,.06);
    border-bottom:1px solid rgba(255,255,255,.06);
    background:
        radial-gradient(circle at 50% 0%, rgba(200,155,60,.10), transparent 60%),
        #070707;
}
.lx-nextfight__inner{ max-width:880px; margin:0 auto; }
.lx-nextfight .lux-label{ margin-bottom:1rem; }
.lx-nextfight__title{
    font-family:'Anton', sans-serif;
    font-size:clamp(2rem,5vw,3.4rem);
    text-transform:uppercase;
    line-height:1.05;
    margin:0 0 .6rem;
}
.lx-nextfight__meta{
    color:var(--muted);
    font-size:clamp(.9rem,2vw,1.05rem);
    letter-spacing:.5px;
    margin:0 0 2rem;
}
.lx-countdown{
    display:flex;
    justify-content:center;
    gap:clamp(.6rem,3vw,2rem);
    flex-wrap:wrap;
}
.lx-cd{
    min-width:clamp(64px,16vw,108px);
    padding:clamp(.8rem,2vw,1.4rem) .5rem;
    border:1px solid var(--line);
    border-radius:14px;
    background:rgba(255,255,255,.02);
    display:flex;
    flex-direction:column;
    gap:.35rem;
}
.lx-cd__num{
    font-family:'Anton', sans-serif;
    font-size:clamp(2rem,6vw,3.4rem);
    line-height:1;
    color:#c89b3c;
    font-variant-numeric:tabular-nums;
}
.lx-cd__lbl{
    font-size:10px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--muted);
}
.lx-countdown.is-fightday .lx-cd__num{ color:#fff; }

.lx-soon{
    font-family:'Anton', sans-serif;
    font-size:clamp(3.5rem,13vw,8rem);
    line-height:1;
    text-transform:uppercase;
    color:#c89b3c;
    letter-spacing:2px;
    animation:lxSoonPulse 2.4s ease-in-out infinite;
}
@keyframes lxSoonPulse{
    0%,100%{ opacity:1; text-shadow:0 0 24px rgba(200,155,60,.35); }
    50%{ opacity:.78; text-shadow:0 0 48px rgba(200,155,60,.65); }
}
@media (prefers-reduced-motion: reduce){
    .lx-soon{ animation:none; }
}

/* ===== PHOTO LIGHTBOX ===== */
.lx-photo{ cursor:pointer; }
.lx-lightbox{
    position:fixed;
    inset:0;
    z-index:2000;
    display:none;
    align-items:center;
    justify-content:center;
    gap:clamp(.5rem,2vw,1.5rem);
    padding:clamp(1rem,4vw,3rem);
    background:rgba(4,4,4,.92);
    backdrop-filter:blur(6px);
}
.lx-lightbox.is-open{ display:flex; animation:lxFade .2s ease; }
@keyframes lxFade{ from{opacity:0} to{opacity:1} }
.lx-lightbox__stage{
    margin:0;
    max-width:min(92vw,1100px);
    max-height:86vh;
    display:flex;
    align-items:center;
    justify-content:center;
}
.lx-lightbox__img{
    max-width:100%;
    max-height:86vh;
    object-fit:contain;
    border-radius:8px;
    box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.lx-lightbox__close,
.lx-lightbox__nav{
    flex:0 0 auto;
    width:54px;
    height:54px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.06);
    color:#fff;
    font-size:30px;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .2s ease, transform .2s ease;
}
.lx-lightbox__close:hover,
.lx-lightbox__nav:hover{ background:#c89b3c; color:#0a0a0a; transform:scale(1.06); }
.lx-lightbox__close{
    position:absolute;
    top:clamp(1rem,3vw,2rem);
    right:clamp(1rem,3vw,2rem);
    font-size:34px;
}
.lx-lightbox__count{
    position:absolute;
    bottom:clamp(1rem,3vw,2rem);
    left:50%;
    transform:translateX(-50%);
    color:var(--muted);
    font-size:13px;
    letter-spacing:2px;
}
@media (max-width:680px){
    .lx-lightbox__nav{ width:44px; height:44px; font-size:24px; }
}

/* =========================
   INNER PAGE HERO
   Shared across all inner pages
   ========================= */
.lx-page-hero{
    position:relative;
    min-height:70vh;
    display:flex;
    align-items:flex-end;
    padding:0 var(--gutter) clamp(4rem, 9vw, 8rem);
    overflow:hidden;
    isolation:isolate;
}
.lx-page-hero--short{ min-height:52vh; }

.lx-page-hero__media{
    position:absolute;
    inset:-8% -4%;
    background-size:cover;
    background-position:center 25%;
    animation:lxKen 22s ease-in-out infinite alternate;
    z-index:0;
}
.lx-page-hero__scrim{
    position:absolute;
    inset:0;
    z-index:1;
    background:
        linear-gradient(to top, rgba(6,6,6,.95) 0%, rgba(6,6,6,.55) 46%, rgba(6,6,6,.2) 100%),
        linear-gradient(to right, rgba(6,6,6,.55) 0%, transparent 55%);
}
.lx-page-hero__content{
    position:relative;
    z-index:2;
    max-width:820px;
}
.lx-page-hero__content h1{
    font-family:'Anton', sans-serif;
    font-size:var(--fs-h1);
    line-height:1.0;
    text-transform:uppercase;
    margin:18px 0 20px;
    letter-spacing:-.5px;
}
.lx-page-hero__sub{
    color:var(--muted);
    font-size:var(--fs-lead);
    line-height:1.7;
    max-width:560px;
}

/* =========================
   ABOUT PAGE
   ========================= */
.lx-about-stats-band{
    background:var(--surface);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}
.lx-about-tags{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:var(--sp-4);
}
.lx-about-tags span{
    padding:8px 18px;
    border-radius:999px;
    border:1px solid var(--gold-line);
    color:var(--gold);
    font-size:11px;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
    background:var(--gold-soft);
    transition:background .3s ease, border-color .3s ease;
}
.lx-about-tags span:hover{
    background:rgba(200,162,74,.25);
    border-color:var(--gold);
}

/* Flipped editorial variant */
.lx-editorial--flip{ direction:rtl; }
.lx-editorial--flip > *{ direction:ltr; }

/* ===== FIGHT RECORD — AAA WIN-STREAK BADGE ===== */
.lx-firestreak{
    position:relative;
    text-align:center;
    padding:clamp(5rem, 13vw, 9rem) clamp(1.5rem, 5vw, 3rem) clamp(3rem, 7vw, 5rem);
}
.lx-badge{
    position:relative;
    width:min(92vw, 520px);
    min-height:min(80vh, 560px);
    margin:0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    isolation:isolate;
}
/* swirling fire vortex rising behind the number */
.lx-bigflame{
    position:absolute;
    left:50%; top:50%;
    transform:translate(-50%, -52%);
    width:min(82vw, 440px);
    height:min(74vh, 540px);
    pointer-events:none;
    z-index:2;
}
.lx-bigflame__swirl{
    position:absolute; left:50%; bottom:-8%;
    width:130%; aspect-ratio:1;
    transform:translateX(-50%);
    background:conic-gradient(from 0deg,
        transparent 0deg, rgba(255,150,40,.20) 38deg, transparent 92deg,
        rgba(246,90,20,.24) 142deg, transparent 198deg,
        rgba(255,184,64,.20) 258deg, transparent 320deg);
    border-radius:50%;
    filter:blur(24px);
    mix-blend-mode:screen;
    animation:lxVortex 9s linear infinite;
}
@keyframes lxVortex{ to{ transform:translateX(-50%) rotate(360deg); } }
/* soft, layered, living flame behind the number (screen-blended over black) */
.lx-bigflame__body,
.lx-bigflame__core,
.lx-bigflame__t{
    position:absolute;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    mix-blend-mode:screen;
    pointer-events:none;
    will-change:transform, opacity;
}
/* broad soft fire glow / overall body + cast light */
.lx-bigflame__body{
    width:96%; height:92%;
    background:radial-gradient(ellipse 58% 54% at 50% 80%,
        rgba(255,214,120,.8) 0%, rgba(247,140,40,.55) 36%,
        rgba(214,55,12,.30) 62%, transparent 80%);
    filter:blur(20px);
    animation:lxFlameBody 4.6s ease-in-out infinite;
}
/* individual licking tongues — soft teardrops, varied height, never in sync */
.lx-bigflame__t{
    border-radius:50% 50% 46% 46% / 72% 72% 28% 28%;
    background:linear-gradient(to top,
        rgba(255,180,60,0) 0%, rgba(255,236,150,.95) 14%,
        rgba(250,150,40,.9) 46%, rgba(220,60,15,.5) 74%, transparent 100%);
    filter:blur(7px);
    transform-origin:50% 100%;
}
.lx-bigflame__t--1{ width:34%; height:98%; left:46%; animation:lxFlameA 3.1s ease-in-out infinite; }
.lx-bigflame__t--2{ width:27%; height:80%; left:60%; animation:lxFlameB 3.8s ease-in-out infinite; }
.lx-bigflame__t--3{ width:25%; height:72%; left:34%; animation:lxFlameA 4.4s ease-in-out infinite reverse; }
.lx-bigflame__t--4{ width:20%; height:60%; left:65%; animation:lxFlameB 3.4s ease-in-out infinite; }
.lx-bigflame__t--5{ width:18%; height:52%; left:40%; animation:lxFlameA 5.0s ease-in-out infinite reverse; }
/* white-hot heart, low and central */
.lx-bigflame__core{
    width:30%; height:48%;
    background:radial-gradient(ellipse 50% 62% at 50% 82%, rgba(255,250,228,.95), rgba(255,208,108,.7) 45%, transparent 76%);
    filter:blur(10px);
    animation:lxFlameBody 3.3s ease-in-out infinite;
}
/* organic sway + height flicker — different timings keep it from ever looping */
@keyframes lxFlameA{
    0%,100%{ transform:translateX(-50%) scaleY(1)    scaleX(1)    skewX(0deg);  opacity:.92; }
    25%    { transform:translateX(-55%) scaleY(1.2)  scaleX(.86)  skewX(-6deg); opacity:1; }
    50%    { transform:translateX(-46%) scaleY(.88)  scaleX(1.1)  skewX(6deg);  opacity:.86; }
    75%    { transform:translateX(-52%) scaleY(1.12) scaleX(.93)  skewX(-3deg); opacity:.97; }
}
@keyframes lxFlameB{
    0%,100%{ transform:translateX(-50%) scaleY(1)    scaleX(1)    skewX(0deg);  opacity:.9; }
    30%    { transform:translateX(-45%) scaleY(1.26) scaleX(.84)  skewX(8deg);  opacity:1; }
    55%    { transform:translateX(-54%) scaleY(.85)  scaleX(1.12) skewX(-6deg); opacity:.84; }
    80%    { transform:translateX(-49%) scaleY(1.14) scaleX(.92)  skewX(3deg);  opacity:.96; }
}
@keyframes lxFlameBody{
    0%,100%{ transform:translateX(-50%) scale(1);    opacity:.85; }
    50%    { transform:translateX(-50%) scale(1.07); opacity:1; }
}

/* ---- Volumetric glow (cast light on the whole badge) ---- */
.lx-badge__glow{
    position:absolute; left:50%; top:54%;
    width:120%; height:120%;
    transform:translate(-50%,-50%);
    background:radial-gradient(ellipse 46% 42% at 50% 50%,
        rgba(255,160,55,.34) 0%, rgba(232,80,18,.18) 38%, rgba(120,30,6,.08) 60%, transparent 75%);
    filter:blur(8px);
    z-index:1; pointer-events:none;
    animation:lxGlowPulse 4.2s ease-in-out infinite;
}
@keyframes lxGlowPulse{
    0%,100%{ opacity:.8;  transform:translate(-50%,-50%) scale(1); }
    50%    { opacity:1;   transform:translate(-50%,-50%) scale(1.08); }
}

/* ---- Expanding energy waves ---- */
.lx-badge__wave{
    position:absolute; left:50%; top:52%;
    width:230px; height:230px;
    transform:translate(-50%,-50%) scale(.5);
    border:2px solid rgba(255,170,70,.5);
    border-radius:50%;
    z-index:1; pointer-events:none; opacity:0;
    box-shadow:0 0 24px rgba(255,140,40,.35), inset 0 0 24px rgba(255,140,40,.25);
    animation:lxWave 3.6s ease-out infinite;
}
.lx-badge__wave--2{ animation-delay:1.8s; }
@keyframes lxWave{
    0%  { opacity:0;   transform:translate(-50%,-50%) scale(.45); }
    12% { opacity:.85; }
    100%{ opacity:0;   transform:translate(-50%,-50%) scale(1.9); }
}

/* ---- Periodic flame burst pulsing outward ---- */
.lx-badge__burst{
    position:absolute; left:50%; top:52%;
    width:320px; height:320px;
    transform:translate(-50%,-50%) scale(.4);
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,210,120,.5) 0%, rgba(246,110,28,.35) 30%, transparent 62%);
    z-index:1; pointer-events:none; opacity:0;
    mix-blend-mode:screen;
    animation:lxBurst 6.5s ease-out infinite;
}
@keyframes lxBurst{
    0%,72%{ opacity:0; transform:translate(-50%,-50%) scale(.4); }
    78%   { opacity:.9; }
    100%  { opacity:0; transform:translate(-50%,-50%) scale(1.7); }
}

/* ---- Smoke trails drifting up ---- */
.lx-badge__smoke{
    position:absolute; bottom:42%;
    width:120px; height:260px;
    border-radius:50%;
    background:radial-gradient(ellipse 50% 60% at 50% 80%, rgba(70,60,58,.5), rgba(40,34,32,.25) 50%, transparent 78%);
    filter:blur(20px);
    z-index:1; pointer-events:none; opacity:0;
}
.lx-badge__smoke--1{ left:34%; animation:lxSmoke 7s ease-in infinite; }
.lx-badge__smoke--2{ left:56%; animation:lxSmoke 8.5s ease-in 2.4s infinite; }
@keyframes lxSmoke{
    0%  { opacity:0;   transform:translateY(0) scale(.8); }
    18% { opacity:.5; }
    100%{ opacity:0;   transform:translateY(-240px) translateX(18px) scale(1.5); }
}

/* ---- Crown of fire above the number ---- */
.lx-badge__crown{
    position:absolute; left:50%; top:11%;
    width:clamp(120px, 30%, 190px); aspect-ratio:2 / 1.1;
    transform:translateX(-50%);
    background:linear-gradient(180deg, #fff0b0 0%, #ffc24a 36%, #f6731d 72%, #d8340c 100%);
    clip-path:polygon(0% 100%, 4% 46%, 22% 70%, 34% 16%, 50% 54%, 66% 16%, 78% 70%, 96% 46%, 100% 100%);
    filter:drop-shadow(0 0 12px rgba(255,140,40,.7));
    z-index:3; pointer-events:none;
    opacity:.92;
    animation:lxCrown 3.4s ease-in-out infinite;
}
@keyframes lxCrown{
    0%,100%{ opacity:.78; transform:translateX(-50%) scaleY(1)    translateY(0); }
    50%    { opacity:1;   transform:translateX(-50%) scaleY(1.12) translateY(-4px); }
}

/* ---- Rising sparks / embers ---- */
.lx-firering__sparks{ position:absolute; inset:0; pointer-events:none; }
.lx-firering__sparks i{
    position:absolute; bottom:5%;
    width:3px; height:3px; border-radius:50%;
    background:radial-gradient(circle, #fff3c4, #f6731d 70%);
    box-shadow:0 0 6px 1px rgba(249,181,59,.85);
    opacity:0;
    animation:lxSpark var(--dur,4s) linear var(--delay,0s) infinite;
}
@keyframes lxSpark{
    0%  { transform:translate(0,0) scale(1); opacity:0; }
    8%  { opacity:1; }
    70% { opacity:.85; }
    100%{ transform:translate(var(--drift,0), -280px) scale(.2); opacity:0; }
}

/* ---- Center content, layered above the fire ---- */
.lx-firestreak__content{
    position:relative; z-index:5;
    display:flex; flex-direction:column; align-items:center;
}
.lx-firestreak__count{ display:flex; align-items:center; justify-content:center; line-height:.85; }
.lx-firestreak__num{
    position:relative;
    display:inline-block;
    line-height:1;                               /* predictable glyph box so the outline layers register exactly */
    font-family:'Anton', sans-serif;
    font-size:clamp(5.5rem, 22vw, 13rem);
    /* molten metal: glowing crack veins layered over a slowly-flowing molten gradient */
    background:
        linear-gradient(118deg, transparent 46.5%, rgba(255,238,165,.9) 48.5%, rgba(255,196,104,.45) 50%, transparent 52%),
        linear-gradient(62deg,  transparent 57%,   rgba(255,226,140,.85) 59%, transparent 61%),
        linear-gradient(180deg, #fff7df 0%, #ffd062 28%, #f98a1f 60%, #e0410d 100%);
    background-size:100% 100%, 100% 100%, 100% 220%;
    background-position:0 0, 0 0, 0 0;
    -webkit-background-clip:text; background-clip:text;
    color:transparent; -webkit-text-fill-color:transparent;
    -webkit-text-stroke:1px #2a1408;             /* thin crisp definition line */
    paint-order:stroke fill;                     /* gradient stays vivid inside the rim */
    animation:fireFlicker 3.4s ease-in-out infinite, moltenFlow 7s linear infinite;
}
@keyframes moltenFlow{
    0%  { background-position:0 0, 0 0, 0 0; }
    100%{ background-position:0 0, 0 0, 0 -120%; }   /* only the molten base scrolls; cracks stay put */
}
/* the outline layers are exact duplicates, pinned to the same origin → perfectly accurate */
.lx-firestreak__num::before,
.lx-firestreak__num::after{
    content:attr(data-num);
    position:absolute; inset:0;
    line-height:1;
    -webkit-text-fill-color:transparent;
    color:transparent;
    pointer-events:none;
}
/* charred crisp black outline behind */
.lx-firestreak__num::before{
    z-index:-1;
    -webkit-text-stroke:3px #0c0703;
    animation:charPulse 5s ease-in-out infinite;
}
/* accurate glowing ember edge: crisp hot rim that smoulders along the outline */
.lx-firestreak__num::after{
    -webkit-text-stroke:1.4px #ffaa3c;
    filter:drop-shadow(0 0 2px #ffd36b) drop-shadow(0 0 6px rgba(255,110,20,.7));
    mix-blend-mode:screen;
    animation:charEmber 2.6s ease-in-out infinite;
}
/* irregular smoulder so the burning edge never looks looped */
@keyframes charEmber{
    0%,100%{ opacity:.35; -webkit-text-stroke-color:#ff8a2a; }
    16%{ opacity:.9;  -webkit-text-stroke-color:#ffc861; }
    34%{ opacity:.5;  -webkit-text-stroke-color:#ff7a1e; }
    52%{ opacity:1;   -webkit-text-stroke-color:#ffd884; }
    68%{ opacity:.55; -webkit-text-stroke-color:#ff8a2a; }
    84%{ opacity:.8;  -webkit-text-stroke-color:#ffb24a; }
}
@keyframes charPulse{
    0%,100%{ -webkit-text-stroke-color:#0c0703; }
    50%    { -webkit-text-stroke-color:#241308; }
}
/* dark halo keeps the bright number legible over the flame, plus a live glow */
@keyframes fireFlicker{
    0%,100%{ filter:drop-shadow(0 0 16px rgba(0,0,0,.9)) drop-shadow(0 0 26px rgba(246,115,29,.5)); }
    45%    { filter:drop-shadow(0 0 16px rgba(0,0,0,.9)) drop-shadow(0 0 44px rgba(249,181,59,.85)); }
    70%    { filter:drop-shadow(0 0 18px rgba(0,0,0,.95)) drop-shadow(0 0 30px rgba(216,58,15,.6)); }
}
.lx-firestreak__word{
    margin-top:clamp(.5rem, 1.6vw, 1.1rem);
    font-family:'Anton', sans-serif;
    font-size:clamp(1.1rem, 3.6vw, 2.2rem);
    text-transform:uppercase;
    letter-spacing:clamp(5px, 1.5vw, 13px);
    padding-left:clamp(5px, 1.5vw, 13px);        /* offset the trailing letter-spacing so it stays centred */
    line-height:1;
    background:linear-gradient(180deg, #fff2c4 0%, #ffce5e 55%, #ef9f25 100%);
    -webkit-background-clip:text; background-clip:text;
    color:transparent; -webkit-text-fill-color:transparent;
    filter:drop-shadow(0 2px 10px rgba(0,0,0,.75)) drop-shadow(0 0 16px rgba(255,150,40,.5));
}
.lx-firestreak__sub{
    margin:1.4rem 0 0; color:#dcd7ce;
    font-size:clamp(.9rem, 2vw, 1.05rem); letter-spacing:.5px;
    text-shadow:0 1px 12px rgba(0,0,0,.7);
}
.lx-firestreak__sub strong{ color:#ffcf6b; }
@media (max-width:520px){
    .lx-firestreak__count{ flex-direction:column; gap:.2rem; }
    .lx-firestreak__word{ text-align:center; }
}
@media (prefers-reduced-motion: reduce){
    .lx-firestreak__num, .lx-firestreak__num::before, .lx-firestreak__num::after,
    .lx-bigflame__body, .lx-bigflame__core, .lx-bigflame__t, .lx-bigflame__swirl,
    .lx-badge__glow, .lx-badge__crown{ animation:none; }
    .lx-firering__sparks, .lx-badge__wave, .lx-badge__burst, .lx-badge__smoke{ display:none; }
}

/* ===== FIGHT RECORD — METHOD BADGES ===== */
.lx-method{
    display:inline-block;
    padding:4px 11px;
    border-radius:6px;
    font-size:.74rem;
    font-weight:700;
    letter-spacing:.4px;
    border:1px solid transparent;
    white-space:nowrap;
}
.lx-method--ko{  color:#eaa06a; background:rgba(224,138,90,.10);  border-color:rgba(224,138,90,.35); }
.lx-method--sub{ color:#6bb6df; background:rgba(90,176,224,.10);  border-color:rgba(90,176,224,.35); }
.lx-method--dec{ color:#b8b2a6; background:rgba(255,255,255,.04); border-color:var(--line); }

/* ===== ABOUT PAGE — "What He Stands For" values ===== */
.lx-values{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:clamp(1rem, 2.5vw, 1.8rem);
    margin-top:var(--sp-4);
}
.lx-value{
    position:relative;
    padding:clamp(1.6rem, 3vw, 2.4rem);
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    background:
        linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0) 70%),
        var(--surface);
    overflow:hidden;
    transition:border-color .3s ease, transform .4s var(--ease-out);
}
.lx-value:hover{
    border-color:var(--gold-line);
    transform:translateY(-4px);
}
.lx-value__num{
    font-family:'Anton', sans-serif;
    font-size:1.05rem;
    letter-spacing:2px;
    color:var(--gold);
    display:block;
    margin-bottom:1rem;
}
.lx-value h3{
    font-family:'Anton', sans-serif;
    font-size:clamp(1.5rem, 3vw, 2rem);
    text-transform:uppercase;
    letter-spacing:.5px;
    margin:0 0 .8rem;
}
.lx-value p{
    color:var(--muted);
    line-height:1.8;
    font-size:1rem;
    margin:0;
}
@media (max-width:820px){
    .lx-values{ grid-template-columns:1fr; }
}

/* ===== ABOUT PAGE — smoother section flow ===== */
/* Soften the stats band: drop the hard 1px rules for faded hairlines + a gentle glow,
   so it reads as part of the page rather than a boxed-off strip. */
.page-about .lx-about-stats-band{
    border-top:0;
    border-bottom:0;
    background:
        radial-gradient(120% 120% at 50% 0%, rgba(200,155,60,.05), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0) 70%);
}
.page-about .lx-about-stats-band::before,
.page-about .lx-about-stats-band::after{
    content:"";
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:min(88%, 1080px);
    height:1px;
    background:linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
    opacity:.8;
}
.page-about .lx-about-stats-band::before{ top:0; }
.page-about .lx-about-stats-band::after{ bottom:0; }

/* Let the World-Stage image emerge from / fade back into the page instead of
   meeting it with hard top/bottom border lines. */
.page-about .lx-impact{
    border-top:0;
    border-bottom:0;
}
.page-about .lx-impact::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:linear-gradient(180deg,
        #060606 0%,
        rgba(6,6,6,0) 20%,
        rgba(6,6,6,0) 78%,
        #060606 100%);
}

/* =========================
   MEDIA PAGE
   ========================= */
.lx-featured-video{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:clamp(2rem, 5vw, 5rem);
    align-items:center;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    overflow:hidden;
}
.lx-featured-video__thumb{
    display:block;
    position:relative;
    aspect-ratio:16/10;
    overflow:hidden;
    text-decoration:none;
}
.lx-featured-video__thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .6s var(--ease-out);
}
.lx-featured-video:hover .lx-featured-video__thumb img{ transform:scale(1.04); }
.lx-featured-video__overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(6,6,6,.35);
    transition:background .3s ease;
}
.lx-featured-video:hover .lx-featured-video__overlay{ background:rgba(6,6,6,.25); }
.lx-play-btn{
    width:72px;
    height:72px;
    border-radius:50%;
    background:var(--gold);
    color:#0a0a0a;
    border:0;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    padding-left:4px;
    transition:transform .35s var(--ease-out), box-shadow .35s ease;
    box-shadow:0 0 0 0 rgba(200,162,74,.4);
}
.lx-play-btn:hover{
    transform:scale(1.12);
    box-shadow:0 0 0 16px rgba(200,162,74,.0), 0 0 40px rgba(200,162,74,.35);
}
.lx-featured-video__info{
    padding:clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem) clamp(2rem, 4vw, 3.5rem) 0;
}
.lx-featured-video__info h2{
    font-family:'Anton', sans-serif;
    font-size:clamp(1.5rem, 3vw, 2.3rem);
    line-height:1.1;
    text-transform:uppercase;
    margin:14px 0 18px;
}
.lx-featured-video__info p{ color:var(--muted); line-height:1.7; margin-bottom:12px; }
.lx-media-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px 20px;
    margin:20px 0 26px;
}
.lx-media-meta span{
    font-size:11px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:var(--faint);
    padding:5px 12px;
    border:1px solid var(--line);
    border-radius:999px;
}

/* Photo grid */
.lx-photo-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    grid-template-rows:auto;
    gap:12px;
}
.lx-photo{
    background-image:var(--img);
    background-size:cover;
    background-position:center;
    border-radius:var(--r-md);
    aspect-ratio:4/3;
    overflow:hidden;
    transition:transform .5s var(--ease-out), box-shadow .5s ease;
}
.lx-photo:hover{ transform:scale(1.02); box-shadow:var(--shadow-2); }
.lx-photo--tall{ grid-row:span 2; aspect-ratio:unset; }
.lx-photo--wide{ grid-column:span 2; aspect-ratio:16/7; }

/* =========================
   NEWS PAGE
   ========================= */
.lx-news-featured{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:clamp(2rem, 5vw, 5rem);
    align-items:center;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    overflow:hidden;
}
.lx-news-featured__img{
    aspect-ratio:16/10;
    overflow:hidden;
}
.lx-news-featured__img img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .6s var(--ease-out);
}
.lx-news-featured:hover .lx-news-featured__img img{ transform:scale(1.04); }
.lx-news-featured__body{
    padding:clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem) clamp(2rem, 4vw, 3.5rem) 0;
}
.lx-news-featured__body h2{
    font-family:'Anton', sans-serif;
    font-size:clamp(1.5rem, 3vw, 2.3rem);
    line-height:1.1;
    text-transform:uppercase;
    margin:14px 0 18px;
}
.lx-news-featured__body p{ color:var(--muted); line-height:1.7; margin-bottom:28px; }

.lx-news-meta{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
}
.lx-news-tag{
    font-size:10px;
    font-weight:800;
    letter-spacing:1.8px;
    text-transform:uppercase;
    color:var(--gold);
    background:var(--gold-soft);
    border:1px solid var(--gold-line);
    padding:4px 11px;
    border-radius:999px;
}
.lx-news-date{
    font-size:11px;
    color:var(--faint);
    letter-spacing:.5px;
}

/* News grid */
.lx-news-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:24px;
    margin-top:var(--sp-3);
}
.lx-news-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transition:border-color .3s ease, transform .4s var(--ease-out), box-shadow .4s ease;
}
.lx-news-card:hover{
    border-color:var(--gold-line);
    transform:translateY(-4px);
    box-shadow:var(--shadow-1);
}
.lx-news-card__img{
    aspect-ratio:16/9;
    background-size:cover;
    background-position:center;
    transition:transform .6s var(--ease-out);
}
.lx-news-card:hover .lx-news-card__img{ transform:scale(1.04); }
.lx-news-card__body{
    padding:28px 30px 32px;
    display:flex;
    flex-direction:column;
    flex:1;
}
.lx-news-card__body h3{
    font-family:'Anton', sans-serif;
    font-size:clamp(1.1rem, 2vw, 1.5rem);
    line-height:1.15;
    text-transform:uppercase;
    margin:10px 0 14px;
}
.lx-news-card__body p{ color:var(--muted); font-size:14px; line-height:1.65; flex:1; }
.lx-news-card__body .text-link{
    margin-top:20px;
    color:var(--gold);
    font-size:12px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    text-decoration:none;
    transition:opacity .25s ease;
}
.lx-news-card__body .text-link:hover{ opacity:.7; }

/* =========================
   SPONSORS PAGE
   ========================= */
.lx-sponsor-tiers{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
    margin-top:var(--sp-3);
    align-items:stretch;
}
.lx-tier{
    position:relative;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    padding:40px 36px 44px;
    display:flex;
    flex-direction:column;
    gap:18px;
    transition:border-color .35s ease, transform .4s var(--ease-out), box-shadow .4s ease;
}
.lx-tier:hover{
    border-color:var(--gold-line);
    transform:translateY(-6px);
    box-shadow:var(--shadow-1);
}
.lx-tier--featured{
    background:var(--surface-2);
    border-color:var(--gold-line);
    box-shadow:var(--glow);
}
.lx-tier--featured:hover{
    border-color:var(--gold);
    box-shadow:0 0 80px rgba(200,162,74,.28);
}
.lx-tier__badge{
    position:absolute;
    top:-13px;
    left:50%;
    transform:translateX(-50%);
    background:var(--gold);
    color:#0a0a0a;
    font-size:10px;
    font-weight:800;
    letter-spacing:1.5px;
    text-transform:uppercase;
    padding:5px 16px;
    border-radius:999px;
    white-space:nowrap;
}
.lx-tier--partner{
    border-color:var(--gold-line);
}
.lx-tier--partner:hover{
    border-color:var(--gold);
}
.lx-tier__current strong{
    color:var(--gold);
    font-weight:700;
}
.lx-tier__num{
    font-family:'Anton', sans-serif;
    font-size:3rem;
    line-height:1;
    color:var(--gold);
    opacity:.25;
    user-select:none;
}
.lx-tier h3{
    font-family:'Anton', sans-serif;
    font-size:clamp(1.3rem, 2.5vw, 1.8rem);
    text-transform:uppercase;
    line-height:1.1;
    margin:0;
}
.lx-tier p{ color:var(--muted); font-size:14px; line-height:1.65; }
.lx-tier__list{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:10px;
    flex:1;
}
.lx-tier__list li{
    font-size:13px;
    color:#c8c8cc;
    padding-left:20px;
    position:relative;
}
.lx-tier__list li::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--gold);
    opacity:.7;
}
.lx-tier .btn{ margin-top:auto; text-align:center; justify-content:center; }

/* =========================
   CONTACT PAGE
   ========================= */
.lx-contact-wrap{
    display:grid;
    grid-template-columns:1fr 1.1fr;
    gap:clamp(3rem, 7vw, 7rem);
    align-items:start;
}
.lx-contact-info h2{
    font-family:'Anton', sans-serif;
    font-size:var(--fs-h2);
    line-height:1.05;
    text-transform:uppercase;
    margin:18px 0 20px;
}
.lx-contact-info > p{ color:var(--muted); font-size:var(--fs-lead); line-height:1.7; margin-bottom:var(--sp-4); }

.lx-contact-cards{ display:flex; flex-direction:column; gap:18px; }
.lx-contact-card{
    display:flex;
    gap:20px;
    align-items:flex-start;
    padding:22px 24px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--r-md);
    transition:border-color .3s ease, transform .35s var(--ease-out);
}
.lx-contact-card:hover{ border-color:var(--gold-line); transform:translateX(4px); }
.lx-contact-card__icon{
    flex-shrink:0;
    width:44px;
    height:44px;
    border-radius:var(--r-sm);
    background:var(--gold-soft);
    border:1px solid var(--gold-line);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--gold);
}
.lx-contact-card h4{
    font-size:14px;
    font-weight:700;
    letter-spacing:.3px;
    margin-bottom:5px;
}
.lx-contact-card p{ font-size:13px; color:var(--muted); line-height:1.6; margin:0; }

.lx-contact-social{ margin-top:36px; }
.lx-contact-social > p{ font-size:12px; color:var(--faint); letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
.lx-contact-social__links{ display:flex; gap:14px; flex-wrap:wrap; }
.lx-contact-social__links a{
    font-size:12px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:var(--gold);
    text-decoration:none;
    padding:7px 16px;
    border:1px solid var(--gold-line);
    border-radius:999px;
    background:var(--gold-soft);
    transition:background .3s ease, border-color .3s ease;
}
.lx-contact-social__links a:hover{ background:rgba(200,162,74,.25); border-color:var(--gold); }

/* Form */
.lx-contact-form-wrap{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    padding:clamp(2rem, 4vw, 3.5rem);
}
.lx-contact-form{ display:flex; flex-direction:column; gap:22px; }
.lx-form-error{
    margin:0 0 20px;
    padding:13px 16px;
    border:1px solid rgba(176,42,42,.45);
    border-left:3px solid #b02a2a;
    border-radius:8px;
    background:rgba(176,42,42,.08);
    color:#e0837f;
    font-size:14px;
}

/* Honeypot — visually hidden but still present for bots. */
.lx-hp{
    position:absolute !important;
    left:-9999px;
    width:1px;
    height:1px;
    overflow:hidden;
}

/* Confirmation page summary */
.lx-summary{ margin-top:22px; display:flex; flex-direction:column; gap:2px; }
.lx-summary__row{
    display:flex;
    gap:18px;
    padding:14px 0;
    border-bottom:1px solid var(--line);
}
.lx-summary__row span{
    flex:0 0 110px;
    font-size:11px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--muted);
    padding-top:2px;
}
.lx-summary__row strong{ color:#fff; font-weight:600; }
.lx-summary__row--msg{ flex-direction:column; gap:8px; }
.lx-summary__row--msg p{ color:var(--muted); line-height:1.7; margin:0; }

/* Skip-to-content link (keyboard / screen-reader users) */
.skip-link{
    position:absolute;
    left:50%;
    top:-60px;
    transform:translateX(-50%);
    z-index:1000;
    padding:10px 20px;
    background:#c89b3c;
    color:#0a0a0a;
    font-size:13px;
    font-weight:700;
    letter-spacing:.5px;
    border-radius:0 0 8px 8px;
    text-decoration:none;
    transition:top .2s ease;
}
.skip-link:focus{ top:0; outline:none; }

/* Visible focus ring for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
    outline:2px solid #c89b3c;
    outline-offset:3px;
    border-radius:2px;
}
.lx-field{ display:flex; flex-direction:column; gap:8px; }
.lx-field label{
    font-size:11px;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--muted);
}
.lx-field input,
.lx-field textarea,
.lx-field select{
    background:var(--ink-2);
    border:1px solid var(--line-strong);
    border-radius:var(--r-sm);
    color:var(--text);
    font-size:14px;
    padding:14px 18px;
    width:100%;
    outline:none;
    transition:border-color .3s ease, box-shadow .3s ease;
    -webkit-appearance:none;
    font-family:inherit;
}
.lx-field input::placeholder,
.lx-field textarea::placeholder{ color:var(--faint); }
.lx-field input:focus,
.lx-field textarea:focus,
.lx-field select:focus{
    border-color:var(--gold);
    box-shadow:0 0 0 3px rgba(200,162,74,.15);
}
.lx-field textarea{ resize:vertical; min-height:140px; line-height:1.6; }
.lx-select-wrap{ position:relative; }
.lx-select-wrap select{ padding-right:40px; cursor:pointer; }
.lx-select-arrow{
    position:absolute;
    right:16px;
    top:50%;
    transform:translateY(-50%);
    color:var(--faint);
    pointer-events:none;
}
.lx-submit-btn{
    width:100%;
    justify-content:center;
    padding:18px;
    font-size:13px;
    margin-top:8px;
}

/* =========================
   INNER PAGE RESPONSIVE
   ========================= */
@media(max-width:1024px){
    .lx-sponsor-tiers{ grid-template-columns:1fr; max-width:560px; margin-inline:auto; }
    .lx-photo-grid{ grid-template-columns:repeat(2, 1fr); }
    .lx-photo--tall{ grid-row:auto; aspect-ratio:4/3; }
    .lx-photo--wide{ grid-column:auto; aspect-ratio:4/3; }
}
@media(max-width:860px){
    .lx-page-hero{ min-height:58vh; align-items:flex-end; }
    .lx-page-hero--short{ min-height:44vh; }
    .lx-featured-video{ grid-template-columns:1fr; }
    .lx-featured-video__info{ padding:2rem; }
    .lx-news-featured{ grid-template-columns:1fr; }
    .lx-news-featured__body{ padding:2rem; }
    .lx-news-grid{ grid-template-columns:1fr; }
    .lx-contact-wrap{ grid-template-columns:1fr; }
    .lx-editorial--flip{ direction:ltr; }
}
@media(max-width:600px){
    .lx-photo-grid{ grid-template-columns:1fr; }
    .lx-sponsor-tiers{ grid-template-columns:1fr; max-width:100%; }
    .lx-page-hero__content h1{ font-size:clamp(2rem, 10vw, 3.2rem); }
}

/* Contact direct links */
.lx-contact-card a{
    color:var(--gold);
    text-decoration:none;
    font-weight:700;
    word-break:break-word;
}
.lx-contact-card a:hover{
    text-decoration:underline;
}



/* =====================================================
   CONTACT PAGE — OFFICIAL SOCIAL CHANNEL ICONS
   ===================================================== */
.lx-contact-card--no-main-icon {
    align-items: flex-start;
}

.lx-contact-card--no-main-icon > div {
    width: 100%;
}

.lx-contact-card--social {
    padding: 24px;
}

.lx-contact-card--social h4 {
    margin-bottom: 16px;
}

.lx-contact-social__links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.lx-contact-social__links a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px 10px 11px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    letter-spacing: .03em;
    background: rgba(255,255,255,.045);
    transition: .25s ease;
}

.lx-contact-social__links a:hover {
    border-color: rgba(218,181,107,.65);
    background: rgba(218,181,107,.12);
    transform: translateY(-2px);
    text-decoration: none;
}

.lx-social-icon {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    overflow: hidden;
}

.lx-social-icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

.lx-social-icon svg,
.lx-social-icon path,
.lx-social-icon rect,
.lx-social-icon circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lx-social-icon--instagram {
    color: #fff;
    background: radial-gradient(circle at 30% 110%, #feda75 0%, #fa7e1e 28%, #d62976 48%, #962fbf 72%, #4f5bd5 100%);
}

.lx-social-icon--tiktok {
    color: #fff;
    background: #050505;
    box-shadow: inset 3px 0 0 rgba(37,244,238,.75), inset -3px 0 0 rgba(254,44,85,.7);
}

.lx-social-icon--facebook {
    color: #fff;
    background: #1877f2;
}

.lx-social-icon--youtube {
    color: #fff;
    background: #ff0033;
}

.lx-social-icon--facebook svg path,
.lx-social-icon--youtube svg path {
    fill: currentColor;
    stroke: none;
}

.lx-social-icon--youtube .lx-youtube-play {
    fill: #ff0033;
    stroke: none;
}


/* =====================================================
   ABOUT PAGE — VIDEO HERO
   Uses assets/videos/namo_fazil_v1.mp4 in about.php
   ===================================================== */
.lx-page-hero--video {
    position: relative;
    overflow: hidden;
}

.lx-page-hero--video .lx-page-hero__media--video {
    position: absolute;
    inset: -2%;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-image: none !important;
    background-color: #060606;
    animation: none !important;
    transform: none !important;
}

.lx-page-hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transform: scale(1.03);
    opacity: 0;
    transition: opacity .28s ease;
    will-change: opacity, transform;
}

.lx-page-hero--video.is-video-ready .lx-page-hero__video {
    opacity: 1;
}

.lx-page-hero--video .lx-page-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.48) 45%, rgba(0,0,0,.30) 100%),
        linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.10) 45%, rgba(0,0,0,.82) 100%);
}

.lx-page-hero--video .lx-page-hero__content {
    position: relative;
    z-index: 2;
}

.lx-page-hero--video.is-video-loading .lx-page-hero__media--video::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(6,6,6,.10), rgba(6,6,6,.32)),
        center / cover no-repeat url("../images/namo-hero.jpg");
    transform: scale(1.02);
}

.lx-page-hero--video.is-video-ready .lx-page-hero__media--video::before {
    opacity: 0;
    transition: opacity .28s ease;
}

@media (max-width: 768px) {
    .lx-page-hero__video {
        object-position: center;
        transform: scale(1.08);
    }
}


/* Fight Record page only — background video hero */
.record-page .record-hero--video {
    position: relative;
    min-height: 72vh;
    display: flex;
    align-items: flex-end;
    padding: 0 var(--gutter) clamp(4rem, 9vw, 8rem);
    overflow: hidden;
    isolation: isolate;
    background: #060606;
}

.record-page .record-hero__video-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.record-page .record-hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transform: scale(1.04);
    filter: saturate(1.05) contrast(1.08);
}

.record-page .record-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(6,6,6,.38) 0%, rgba(6,6,6,.35) 38%, rgba(6,6,6,.94) 100%),
        linear-gradient(90deg, rgba(6,6,6,.86) 0%, rgba(6,6,6,.55) 42%, rgba(6,6,6,.20) 100%);
}

.record-page .record-hero__content {
    position: relative;
    z-index: 2;
    max-width: 820px;
}

.record-page .record-hero__content h1 {
    font-family: 'Anton', sans-serif;
    font-size: clamp(5rem, 15vw, 12rem);
    line-height: .82;
    margin: 18px 0 18px;
    color: var(--gold);
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow:
        0 8px 30px rgba(0,0,0,.85),
        0 0 42px rgba(200,162,74,.22);
}

.record-page .record-hero__content p:not(.lux-label) {
    max-width: 560px;
    color: #dedbd3;
    font-size: var(--fs-lead);
    line-height: 1.75;
}

@media (max-width: 768px) {
    .record-page .record-hero--video {
        min-height: 64vh;
        padding-bottom: 4rem;
    }

    .record-page .record-hero__video {
        object-position: center;
        transform: scale(1.1);
    }

    .record-page .record-hero__content h1 {
        font-size: clamp(4rem, 22vw, 7rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .record-page .record-hero__video {
        transform: none;
    }
}
/* =====================================================
   FIGHT RECORD PAGE — FULL VIDEO HERO FROM HEADER
   ===================================================== */

/* Removes the visual gap between the header and the fight-record hero. */
.record-page--video {
    position: relative;
    margin-top: 0;
    padding-top: 0;
    background: #060606;
}

/*
   If your header is normal/static, this pulls the video upward so it starts
   behind the header. If your header is already fixed/absolute, reduce this
   value to 0px.
*/
.record-page .record-hero--video {
    --record-header-overlap: 96px;

    position: relative;
    min-height: calc(100svh + var(--record-header-overlap));
    display: flex;
    align-items: flex-end;
    margin-top: calc(var(--record-header-overlap) * -1);
    padding: var(--record-header-overlap) var(--gutter) clamp(4rem, 9vw, 8rem);
    overflow: hidden;
    isolation: isolate;
    background: #060606;
}

.record-page .record-hero__video-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #060606;
}

.record-page .record-hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transform: scale(1.045);
    filter: saturate(1.08) contrast(1.08);
}

.record-page .record-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(6,6,6,.30) 0%, rgba(6,6,6,.34) 34%, rgba(6,6,6,.96) 100%),
        linear-gradient(90deg, rgba(6,6,6,.88) 0%, rgba(6,6,6,.58) 42%, rgba(6,6,6,.18) 100%);
}

.record-page .record-hero__content {
    position: relative;
    z-index: 2;
    max-width: 820px;
}

.record-page .record-hero__content h1 {
    font-family: 'Anton', sans-serif;
    font-size: clamp(5rem, 15vw, 12rem);
    line-height: .82;
    margin: 18px 0 18px;
    color: var(--gold);
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow:
        0 8px 30px rgba(0,0,0,.85),
        0 0 42px rgba(200,162,74,.24);
}

.record-page .record-hero__content p:not(.lux-label) {
    max-width: 560px;
    color: #dedbd3;
    font-size: var(--fs-lead);
    line-height: 1.75;
}

/* Makes the next cards section connect smoothly with the video hero. */
.record-page .record-summary-section {
    margin-top: 0;
    background:
        linear-gradient(180deg, #060606 0%, rgba(6,6,6,.94) 100%);
}

/* If your global header has a solid background, this lets the video feel connected under it. */
.record-page--video ~ .site-footer,
.record-page--video {
    z-index: 1;
}

@media (max-width: 860px) {
    .record-page .record-hero--video {
        --record-header-overlap: 86px;
        min-height: calc(92svh + var(--record-header-overlap));
        padding-bottom: 4.5rem;
    }

    .record-page .record-hero__video {
        object-position: center;
        transform: scale(1.1);
    }

    .record-page .record-hero__content h1 {
        font-size: clamp(4rem, 22vw, 7rem);
    }
}

@media (max-width: 520px) {
    .record-page .record-hero--video {
        --record-header-overlap: 78px;
        min-height: calc(86svh + var(--record-header-overlap));
    }

    .record-page .record-hero__content p:not(.lux-label) {
        font-size: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .record-page .record-hero__video {
        transform: none;
    }
}