/* ================================================================
   Ambassador Page — Full Design Match to baji.live
   Fonts: Righteous · Poppins · Inter
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Righteous&family=Poppins:wght@300;400;500;600;700&family=Inter:wght@400;500;700&display=swap');

/* ── Variables ──────────────────────────────────────────────── */
.baj-page {
    --gold:          linear-gradient(90deg,#c38934 -10%,#eed997 128%);
    --gold-border:   #d9b166;
    --gold-faint:    rgba(199,145,62,0.18);
    --gold-mid:      #ae7400;
    --beige:         #dbbe95;
    --bg:            #060606;
    --bg2:           #0a0500;
    --text:          #ffffff;
    --muted:         #8d9aa5;
    --red-glow:      radial-gradient(ellipse at 50% 80%, rgba(180,30,10,0.55) 0%, rgba(100,10,5,0.3) 45%, transparent 70%);
    --sec-border:    linear-gradient(90deg,rgba(72,48,0,.2) 1%,#ae7400 52%,rgba(72,48,0,.2) 100%);
    font-family:'Poppins',Arial,sans-serif;
    background:#060606;
    color:#fff;
    overflow-x:hidden;
}
.baj-page *,.baj-page *::before,.baj-page *::after{box-sizing:border-box;margin:0;padding:0;}

/* ── Gold text helper ───────────────────────────────────────── */
.baj-gold-text {
    background:var(--gold);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

/* ── Shared section title ───────────────────────────────────── */
.baj-sec-title {
    font-family:'Inter',sans-serif;
    font-weight:500;
    font-size:clamp(18px,2.5vw,24px);
    text-align:center;
    background:var(--gold);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    margin-bottom:40px;
}

/* ── Shared CTA pill ────────────────────────────────────────── */
.baj-cta {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 30px;
    border:1px solid var(--gold-border);
    border-radius:9999px;
    background:transparent;
    text-decoration:none;
    font-family:'Inter',sans-serif;
    font-weight:500;
    font-size:14px;
    color:#f5f5f5;
    transition:background .3s,color .3s;
    cursor:pointer;
    white-space:nowrap;
    max-width:180px;
    justify-content:center;
}
.baj-cta:hover{background:var(--gold);color:#1a1200;text-decoration:none;}
.baj-cta:hover span{-webkit-text-fill-color:#1a1200;}

/* ═══════════════════════════════════════════════════════════════
   SECTION 1 — HERO SLIDER
═══════════════════════════════════════════════════════════════ */
.baj-hero {
    position: relative;
    min-height: 580px;
    overflow: hidden;
    background: #060606;
}

/* ── Each slide ───────────────────────────────────────────── */
.baj-hero__slide {
    /* Inactive: hidden behind */
    position: absolute;
    inset: 0;
    background-size: cover;
    background-repeat: no-repeat;
    /* bg-position comes from inline style per ambassador */
    opacity: 0;
    transform: scale(1.04);
    transition: opacity .75s ease, transform .75s ease;
    pointer-events: none;
    will-change: opacity, transform;
}

/* Active slide */
.baj-hero__slide--active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    /* Become in-flow so hero has height */
    position: relative;
    min-height: 580px;
}

/* ── Cinematic overlay (3 layers) ─────────────────────────
   Layer 1: gentle vignette — darkens all 4 edges
   Layer 2: strong bottom-to-top fade — text legibility
   Layer 3: very subtle warm amber tint in center
 ────────────────────────────────────────────────────────── */
.baj-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        /* L1 — vignette: dark frame around photo */
        radial-gradient(
            ellipse 90% 85% at 38% 50%,
            transparent 30%,
            rgba(4, 2, 1, 0.55) 70%,
            rgba(4, 2, 1, 0.88) 100%
        ),
        /* L2 — bottom heavy fade for the text block */
        linear-gradient(
            to top,
            rgba(5, 3, 1, 0.96) 0%,
            rgba(5, 3, 1, 0.60) 28%,
            rgba(5, 3, 1, 0.10) 55%,
            transparent 75%
        ),
        /* L3 — top edge dark strip */
        linear-gradient(
            to bottom,
            rgba(5, 3, 1, 0.75) 0%,
            transparent 22%
        );
    pointer-events: none;
}

/* ── Content container ───────────────────────────────────── */
.baj-hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;        /* text sits above bottom gradient */
    justify-content: center;
    min-height: 580px;
    padding: 0 40px 70px;        /* bottom padding keeps text in the dark zone */
}

/* ── Text block ──────────────────────────────────────────── */
.baj-hero__text {
    text-align: center;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Ambassador name — Righteous, cinematic glow */
.baj-hero__name {
    font-family: 'Righteous', cursive;
    font-weight: 400;
    font-size: clamp(40px, 5.5vw, 64px);
    line-height: 1.05;
    color: #fff;
    margin-bottom: 8px;
    text-shadow:
        0 0 40px rgba(255, 210, 130, 0.25),
        0 2px 18px rgba(0, 0, 0, 0.8);
    letter-spacing: 0.01em;
}

/* Subtitle — Poppins warm beige */
.baj-hero__subtitle {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--beige);
    margin-bottom: 14px;
    line-height: 1.5;
}

/* Quote — Inter bold, gold gradient, ALL CAPS */
.baj-hero__quote {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 1.75;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    background: var(--gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    max-width: 400px;
    margin-bottom: 24px;
}

/* ── Slide navigation arrows ─────────────────────────────── */
.baj-hero__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid rgba(255, 255, 255, 0.20);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.85);
    font-size: 16px;
    cursor: pointer;
    transition: background .3s, border-color .3s, color .3s;
}
.baj-hero__arrow:hover {
    background: rgba(195, 137, 52, 0.50);
    border-color: var(--gold-border);
    color: #fff;
}
.baj-hero__arrow--prev { left: 22px; }
.baj-hero__arrow--next { right: 22px; }

/* ── Slide dots indicator ────────────────────────────────── */
.baj-hero__dots {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 7px;
    align-items: center;
}
.baj-hero__dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,0.30);
    border: 1px solid rgba(255,255,255,0.20);
    cursor: pointer;
    transition: background .3s, transform .3s;
    padding: 0;
}
.baj-hero__dot--active {
    background: var(--gold-border);
    transform: scale(1.35);
    border-color: var(--gold-border);
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 3 — PHOTO GALLERY CAROUSEL
═══════════════════════════════════════════════════════════════ */
.baj-career {
    background:#000;
    overflow:hidden;
    position:relative;
}

/* Top & bottom fade to blend with surrounding sections */
.baj-career::before,
.baj-career::after {
    content:'';
    position:absolute;
    left:0; right:0;
    height:80px;
    z-index:3;
    pointer-events:none;
}
.baj-career::before { top:0;    background:linear-gradient(to bottom,#000 0%,transparent 100%); }
.baj-career::after  { bottom:0; background:linear-gradient(to top,   #000 0%,transparent 100%); }

/* Gallery wrapper */
.baj-gallery {
    position:relative;
    padding:60px 0 60px;
}

/* Left/right edge fade masks */
.baj-gallery__mask {
    position:absolute;
    top:0; bottom:0;
    width:220px;
    z-index:4;
    pointer-events:none;
}
.baj-gallery__mask--left  { left:0;  background:linear-gradient(to right, #000 0%, transparent 100%); }
.baj-gallery__mask--right { right:0; background:linear-gradient(to left,  #000 0%, transparent 100%); }

.baj-gallery__slide { display:none; }
.baj-gallery__slide--active { display:block; }

.baj-gallery__row {
    overflow:hidden;
    width:100%;
}
.baj-gallery__row--1 { margin-bottom:16px; }

.baj-gallery__track {
    display:flex;
    gap:16px;
    width:max-content;
    will-change:transform;
}

/* Scroll animations — translateX(-50%) always equals exactly half the track,
   and since images are repeated 6× (18 total), first 9 = second 9 → seamless.
   Slightly different durations create a natural parallax depth effect. */
.baj-gallery__track--fwd { animation:scrollFwd 38s linear infinite; }
.baj-gallery__track--rev { animation:scrollRev 46s linear infinite; }

@keyframes scrollFwd {
    0%   { transform:translateX(0); }
    100% { transform:translateX(-50%); }
}
@keyframes scrollRev {
    0%   { transform:translateX(-50%); }
    100% { transform:translateX(0); }
}

/* Pause on hover */
.baj-gallery__track:hover {
    animation-play-state:paused;
}

/* Image tiles — uniform portrait ratio across both rows */
.baj-gallery__img {
    width:180px;
    aspect-ratio:2/3;
    object-fit:cover;
    object-position:center top;
    border-radius:16px;
    flex-shrink:0;
    display:block;
    border:1.5px solid rgba(180,130,50,0.28);
    box-shadow:0 6px 28px rgba(0,0,0,0.60), 0 0 0 0 rgba(180,130,50,0);
    transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.baj-gallery__img:hover {
    transform:scale(1.06) translateY(-4px);
    box-shadow:0 16px 40px rgba(0,0,0,0.70), 0 0 20px rgba(180,130,50,0.30);
    border-color:rgba(180,130,50,0.70);
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 4 — BEST OF BAJI (per-ambassador panels)
═══════════════════════════════════════════════════════════════ */

/* ── Section wrapper ── */
.baj-best {
    position:relative;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(174,116,0,0.12) 0%, transparent 70%),
        linear-gradient(180deg, #000 0%, #060606 40%, #0a0500 100%);
    padding:80px 40px 60px;
    border-top:1px solid transparent;
    border-image:var(--sec-border);
    border-image-slice:1;
    overflow:hidden;
}

/* Decorative corner glow */
.baj-best::before {
    content:'';
    position:absolute;
    top:-120px; left:50%; transform:translateX(-50%);
    width:600px; height:300px;
    background:radial-gradient(ellipse, rgba(195,137,52,0.18) 0%, transparent 70%);
    pointer-events:none;
}

/* ── Per-ambassador panel ── */
.baj-best__panel {
    display:none;
}
.baj-best__panel--active {
    display:block;
    animation:bajPanelIn 0.5s cubic-bezier(.22,.68,0,1.2) both;
}
@keyframes bajPanelIn {
    from { opacity:0; transform:translateY(20px) scale(.98); }
    to   { opacity:1; transform:translateY(0)    scale(1);   }
}

/* ── Two-column inner layout ── */
.baj-best__inner {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:48px;
    align-items:center;
    max-width:1140px;
    margin:0 auto 48px;
}

/* ── VIDEO COLUMN ── */
.baj-best__vcol { position:relative; }

.baj-best__vframe {
    position:relative;
    aspect-ratio:16/9;
    border-radius:18px;
    overflow:hidden;
    background:#070400;
    /* gold glow border via box-shadow */
    box-shadow:
        0 0 0 1.5px rgba(195,137,52,0.55),
        0 0 40px rgba(195,137,52,0.18),
        0 24px 60px rgba(0,0,0,0.8);
    cursor:pointer;
    transition:box-shadow .4s ease;
}
.baj-best__vframe:hover {
    box-shadow:
        0 0 0 2px var(--gold-border),
        0 0 60px rgba(195,137,52,0.30),
        0 24px 60px rgba(0,0,0,0.8);
}

/* Poster image — fills frame */
.baj-best__vimg {
    width:100%; height:100%;
    object-fit:cover;
    object-position:center top;
    display:block;
    transition:transform .5s ease, opacity .4s ease;
}
.baj-best__vframe:hover .baj-best__vimg { transform:scale(1.04); }

/* Dark overlay for contrast */
.baj-best__vframe::after {
    content:'';
    position:absolute; inset:0;
    background:
        linear-gradient(to top, rgba(4,2,0,0.65) 0%, transparent 50%),
        radial-gradient(ellipse 70% 70% at 50% 50%, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.45) 100%);
    pointer-events:none;
}

/* ── Custom play button ── */
.baj-play-btn {
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    z-index:4;
    width:72px; height:72px;
    border-radius:50%;
    background:rgba(0,0,0,0.35);
    border:none;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    transition:transform .3s ease, background .3s ease;
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
}
.baj-play-btn__ring {
    position:absolute; inset:-2px;
    border-radius:50%;
    border:2px solid rgba(195,137,52,0.6);
    transition:border-color .3s, transform .3s;
    animation:bajRingPulse 2.4s ease-in-out infinite;
}
@keyframes bajRingPulse {
    0%,100% { transform:scale(1);    opacity:1; }
    50%      { transform:scale(1.12); opacity:.6; }
}
.baj-play-btn__icon {
    width:28px; height:28px;
    color:#fff;
    filter:drop-shadow(0 0 8px rgba(195,137,52,0.8));
    padding-left:4px; /* optical center */
    transition:color .3s;
}
.baj-play-btn:hover {
    transform:translate(-50%,-50%) scale(1.12);
    background:rgba(195,137,52,0.50);
}
.baj-play-btn:hover .baj-play-btn__ring { border-color:var(--gold-border); transform:scale(1.08); }
.baj-play-btn:hover .baj-play-btn__icon { color:#ffe080; }

/* ── Video slot (YouTube iframe + self-hosted <video>) ── */
.baj-best__yt-slot {
    position:absolute; inset:0;
    z-index:5;
    background:#000;
}
.baj-best__yt-slot iframe,
.baj-best__yt-slot video {
    width:100%; height:100%;
    border:none; display:block;
    object-fit:contain;
}

/* ── Video label bar below frame ── */
.baj-best__vbar {
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:14px;
    padding:10px 16px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(195,137,52,0.15);
    border-radius:10px;
    backdrop-filter:blur(8px);
}
.baj-best__vbar-logo { width:36px; flex-shrink:0; object-fit:contain; }
.baj-best__vbar-label {
    flex:1;
    font-family:'Inter',sans-serif;
    font-size:11px;
    font-weight:500;
    color:rgba(255,255,255,0.55);
    letter-spacing:.06em;
    text-transform:uppercase;
}
.baj-best__vbar-badge {
    font-family:'Inter',sans-serif;
    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
    padding:4px 12px;
    border-radius:20px;
    background:rgba(195,137,52,0.15);
    border:1px solid rgba(195,137,52,0.35);
    background:var(--gold);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    white-space:nowrap;
}

/* ── INFO COLUMN ── */
.baj-best__icol {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
}

.baj-best__eyebrow {
    font-family:'Poppins',sans-serif;
    font-size:11px;
    font-weight:600;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--gold-border);
    opacity:.8;
    margin-bottom:10px;
}

.baj-best__htitle {
    font-family:'Poppins',sans-serif;
    font-weight:300;
    font-size:clamp(20px,2.5vw,28px);
    letter-spacing:.08em;
    text-transform:uppercase;
    color:rgba(255,255,255,0.70);
    line-height:1.1;
    margin-bottom:4px;
}

.baj-best__hname {
    font-family:'Righteous',cursive;
    font-weight:400;
    font-size:clamp(26px,3.5vw,46px);
    line-height:1.1;
    margin-bottom:20px;
    letter-spacing:.01em;
}

.baj-best__hdivider {
    width:60px; height:2px;
    background:var(--gold);
    border-radius:2px;
    margin-bottom:22px;
    opacity:.7;
}

.baj-best__hquote {
    font-family:'Inter',sans-serif;
    font-size:13px;
    font-weight:400;
    line-height:1.8;
    color:rgba(255,255,255,0.60);
    font-style:italic;
    margin-bottom:28px;
    max-width:380px;
}

/* Stats row */
.baj-best__hstats {
    display:flex;
    gap:32px;
    margin-bottom:32px;
}
.baj-best__hstat {
    display:flex;
    flex-direction:column;
    gap:4px;
}
.baj-best__hstat-label {
    font-family:'Inter',sans-serif;
    font-size:10px;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(255,255,255,0.40);
}
.baj-best__hstat-val {
    font-family:'Righteous',cursive;
    font-size:20px;
    background:var(--gold);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.baj-best__hcta { margin-top:0; }

/* ── AMBASSADOR SELECTOR STRIP ── */
.baj-best__strip {
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
    max-width:1140px;
    margin:0 auto;
    padding-top:40px;
    border-top:1px solid rgba(195,137,52,0.12);
}

.baj-best__pill {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    background:none;
    border:none;
    cursor:pointer;
    padding:0;
    transition:transform .25s ease;
}
.baj-best__pill:hover { transform:translateY(-4px); }

.baj-best__pill-img-wrap {
    width:58px; height:58px;
    border-radius:50%;
    overflow:hidden;
    border:2px solid rgba(195,137,52,0.20);
    box-shadow:0 4px 16px rgba(0,0,0,0.5);
    transition:border-color .3s, box-shadow .3s;
    flex-shrink:0;
}
.baj-best__pill-img-wrap img {
    width:100%; height:100%;
    object-fit:cover;
    object-position:center center;
    display:block;
}
.baj-best__pill-name {
    font-family:'Inter',sans-serif;
    font-size:10px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:rgba(255,255,255,0.40);
    transition:color .3s;
    white-space:nowrap;
}

/* Active pill */
.baj-best__pill--active .baj-best__pill-img-wrap {
    border-color:var(--gold-border);
    box-shadow:0 0 0 3px rgba(195,137,52,0.25), 0 4px 20px rgba(195,137,52,0.30);
}
.baj-best__pill--active .baj-best__pill-name {
    background:var(--gold);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}
.baj-best__pill:hover .baj-best__pill-img-wrap { border-color:rgba(195,137,52,0.55); }
.baj-best__pill:hover .baj-best__pill-name { color:rgba(255,255,255,0.75); }

/* ── Video counter badge (top-right of frame) ── */
.baj-best__vcounter {
    position:absolute;
    top:14px; right:14px;
    z-index:4;
    display:flex;
    align-items:center;
    gap:3px;
    background:rgba(0,0,0,0.55);
    border:1px solid rgba(195,137,52,0.30);
    border-radius:20px;
    padding:4px 10px;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    font-family:'Inter',sans-serif;
    font-size:11px;
    font-weight:700;
    letter-spacing:.04em;
    pointer-events:none;
}
.baj-best__vcur { color:#fff; }
.baj-best__vsep { color:rgba(195,137,52,0.55); margin:0 1px; }
.baj-best__vtot { color:rgba(255,255,255,0.45); }

/* ── Now playing bar (between frame and playlist) ── */
.baj-best__vnow {
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:10px;
    margin-bottom:10px;
    padding:0 4px;
}
.baj-best__vnow-icon {
    flex-shrink:0;
    color:var(--gold-border);
    opacity:.85;
}
.baj-best__vnow-label {
    font-family:'Inter',sans-serif;
    font-size:9px;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--gold-border);
    opacity:.70;
    white-space:nowrap;
    flex-shrink:0;
}
.baj-best__vnow-title {
    font-family:'Inter',sans-serif;
    font-size:12px;
    font-weight:500;
    color:rgba(255,255,255,0.80);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    transition:color .3s ease;
}

/* ── Playlist strip ── */
.baj-best__playlist {
    display:flex;
    gap:10px;
    overflow-x:auto;
    padding-bottom:6px;
    margin-bottom:12px;
    scrollbar-width:thin;
    scrollbar-color:rgba(195,137,52,0.25) transparent;
}
.baj-best__playlist::-webkit-scrollbar { height:3px; }
.baj-best__playlist::-webkit-scrollbar-track { background:transparent; }
.baj-best__playlist::-webkit-scrollbar-thumb {
    background:rgba(195,137,52,0.30);
    border-radius:3px;
}

/* Individual playlist thumbnail button */
.baj-best__vthumb {
    flex-shrink:0;
    width:140px;
    background:none;
    border:none;
    cursor:pointer;
    padding:0;
    text-align:left;
    transition:transform .25s ease;
}
.baj-best__vthumb:hover { transform:translateY(-3px); }

.baj-best__vthumb-wrap {
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    border-radius:10px;
    overflow:hidden;
    border:2px solid rgba(195,137,52,0.15);
    box-shadow:0 4px 16px rgba(0,0,0,0.55);
    transition:border-color .3s ease, box-shadow .3s ease;
    background:#070400;
}
.baj-best__vthumb-wrap img {
    width:100%; height:100%;
    object-fit:cover;
    display:block;
    transition:transform .4s ease;
}
.baj-best__vthumb:hover .baj-best__vthumb-wrap img { transform:scale(1.06); }

/* Dark overlay on thumbnail */
.baj-best__vthumb-overlay {
    position:absolute; inset:0;
    background:rgba(0,0,0,0.38);
    transition:background .3s ease;
}
.baj-best__vthumb:hover .baj-best__vthumb-overlay { background:rgba(0,0,0,0.18); }

/* Play icon centered on thumbnail */
.baj-best__vthumb-play {
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:rgba(255,255,255,0.80);
    transition:color .3s, transform .3s;
}
.baj-best__vthumb:hover .baj-best__vthumb-play { color:#fff; transform:scale(1.1); }

/* "PLAYING" live badge on active thumb */
.baj-best__vthumb-live {
    position:absolute;
    top:6px; left:6px;
    font-family:'Inter',sans-serif;
    font-size:8px;
    font-weight:700;
    letter-spacing:.12em;
    color:#fff;
    background:rgba(195,137,52,0.85);
    border-radius:4px;
    padding:2px 6px;
    display:none;
}

/* Video title label below thumbnail */
.baj-best__vthumb-label {
    display:block;
    margin-top:6px;
    font-family:'Inter',sans-serif;
    font-size:10px;
    font-weight:500;
    color:rgba(255,255,255,0.45);
    line-height:1.35;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    transition:color .3s ease;
}
.baj-best__vthumb:hover .baj-best__vthumb-label { color:rgba(255,255,255,0.80); }

/* Active playlist thumbnail */
.baj-best__vthumb--active .baj-best__vthumb-wrap {
    border-color:var(--gold-border);
    box-shadow:0 0 0 1px rgba(195,137,52,0.25), 0 6px 24px rgba(195,137,52,0.20);
}
.baj-best__vthumb--active .baj-best__vthumb-overlay { background:rgba(0,0,0,0.10); }
.baj-best__vthumb--active .baj-best__vthumb-play { color:#ffe580; }
.baj-best__vthumb--active .baj-best__vthumb-live { display:block; }
.baj-best__vthumb--active .baj-best__vthumb-label {
    background:var(--gold);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 5 — AMBASSADOR CARD GRID
═══════════════════════════════════════════════════════════════ */
.baj-grid-sec {
    background:#060606;
    padding:80px 40px 110px;
    border-top:1px solid transparent;
    border-image:var(--sec-border);
    border-image-slice:1;
    background:
        radial-gradient(ellipse 70% 40% at 50% 0%, rgba(174,116,0,.08) 0%, transparent 70%),
        #060606;
}

/* Grid: 4 col → 3 → 2 */
.baj-amb-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
    max-width:1200px;
    margin:0 auto;
}
@media(max-width:1060px){.baj-amb-grid{grid-template-columns:repeat(3,1fr);gap:18px;}}
@media(max-width:640px) {.baj-amb-grid{grid-template-columns:repeat(2,1fr);gap:12px;}}

/* ══════════════════════════════════════════════════════════════════
   SECTION 5 — AMBASSADOR CARD GRID  (full redesign)
══════════════════════════════════════════════════════════════════ */

/* ── Section header ── */
.baj-grid-sec__head {
    text-align:center;
    margin-bottom:52px;
}
.baj-grid-sec__pre {
    font-family:'Inter',sans-serif;
    font-size:11px;
    font-weight:700;
    letter-spacing:.24em;
    text-transform:uppercase;
    color:rgba(195,137,52,.65);
    margin-bottom:10px;
}
.baj-grid-sec .baj-sec-title { margin-bottom:14px; }
.baj-grid-sec__rule {
    width:56px; height:2px;
    background:var(--gold);
    border-radius:2px;
    margin:0 auto;
    opacity:.55;
}

/* ── Card shell ── */
.baj-amb-card {
    position:relative;
    display:block;
    aspect-ratio:2/3;
    border-radius:20px;
    overflow:hidden;
    text-decoration:none;
    background:#0d0805;
    /* Richer resting border: visible gold with dual outer rings */
    border:1.5px solid rgba(213,160,51,.48);
    box-shadow:
        0 0 0 1px rgba(213,160,51,.08),          /* subtle outer halo ring */
        inset 0 1px 0 rgba(255,224,120,.10),      /* inner top edge highlight */
        0 8px 32px rgba(0,0,0,.72),
        0 2px 8px rgba(0,0,0,.55),
        0 0 22px rgba(174,116,0,.11);             /* resting gold aura */
    cursor:pointer;
    animation:cardIn .5s cubic-bezier(.22,.68,0,1.2) both;
    animation-delay:var(--card-delay,0ms);
    transition:transform .4s cubic-bezier(.22,.68,0,1.2),
               box-shadow .45s ease,
               border-color .4s ease;
}
@keyframes cardIn {
    from { opacity:0; transform:translateY(28px) scale(.96); }
    to   { opacity:1; transform:translateY(0)    scale(1);   }
}

/* ── Golden corner brackets (bigger, always visible) ── */
.baj-amb-card::before {
    content:'';
    position:absolute;
    inset:0;
    z-index:8;
    pointer-events:none;
    border-radius:inherit;
    opacity:.60;                         /* clearly visible at rest */
    transition:opacity .4s ease, filter .4s ease;
    background:
        /* top-left — horizontal arm */
        linear-gradient(to right, #eebb55 0,#eebb55 32px,transparent 32px) 0 0/32px 2.5px no-repeat,
        /* top-left — vertical arm */
        linear-gradient(to bottom,#eebb55 0,#eebb55 32px,transparent 32px) 0 0/2.5px 32px no-repeat,
        /* top-right — horizontal arm */
        linear-gradient(to left,  #eebb55 0,#eebb55 32px,transparent 32px) 100% 0/32px 2.5px no-repeat,
        /* top-right — vertical arm */
        linear-gradient(to bottom,#eebb55 0,#eebb55 32px,transparent 32px) 100% 0/2.5px 32px no-repeat,
        /* bottom-left — horizontal arm */
        linear-gradient(to right, #eebb55 0,#eebb55 32px,transparent 32px) 0 100%/32px 2.5px no-repeat,
        /* bottom-left — vertical arm */
        linear-gradient(to top,   #eebb55 0,#eebb55 32px,transparent 32px) 0 100%/2.5px 32px no-repeat,
        /* bottom-right — horizontal arm */
        linear-gradient(to left,  #eebb55 0,#eebb55 32px,transparent 32px) 100% 100%/32px 2.5px no-repeat,
        /* bottom-right — vertical arm */
        linear-gradient(to top,   #eebb55 0,#eebb55 32px,transparent 32px) 100% 100%/2.5px 32px no-repeat;
}

/* ── Shimmer sweep (plays once on hover) ── */
.baj-amb-card::after {
    content:'';
    position:absolute;
    top:0; left:0;
    width:55%; height:100%;
    z-index:9;
    pointer-events:none;
    background:linear-gradient(
        110deg,
        transparent 0%,
        rgba(255,230,130,.05) 38%,
        rgba(255,248,190,.22) 50%,
        rgba(255,230,130,.05) 62%,
        transparent 100%
    );
    transform:translateX(-160%);
    opacity:0;
    transition:opacity .15s ease;
}

@keyframes cardShimmer {
    0%   { transform:translateX(-160%); }
    100% { transform:translateX(320%); }
}

.baj-amb-card:hover::after {
    opacity:1;
    animation:cardShimmer .72s cubic-bezier(.4,0,.2,1) forwards;
}

.baj-amb-card:hover {
    transform:translateY(-10px) scale(1.02);
    border-color:rgba(220,168,55,.92);
    box-shadow:
        0 0 0 1px rgba(213,160,51,.22),          /* outer ring brightens */
        inset 0 1px 0 rgba(255,224,120,.18),
        0 28px 64px rgba(174,116,0,.44),
        0 8px 24px rgba(0,0,0,.75),
        0 0 0 3px rgba(213,160,51,.12),
        0 0 60px rgba(213,160,51,.18),            /* wider warm glow */
        0 0 120px rgba(174,116,0,.08);            /* far soft halo */
    text-decoration:none;
}
.baj-amb-card:hover::before {
    opacity:1;
    filter:drop-shadow(0 0 6px rgba(238,187,85,.55));
}

/* ── Photo (replaces background-image) ── */
.baj-amb-card__photo {
    position:absolute;
    inset:0;
    width:100%; height:100%;
    object-fit:cover;
    object-position:center top;
    display:block;
    transition:transform .55s ease;
    will-change:transform;
}
.baj-amb-card:hover .baj-amb-card__photo { transform:scale(1.08); }

/* ── Gradient overlay ── */
.baj-amb-card__overlay {
    position:absolute; inset:0;
    background:
        linear-gradient(to top,
            rgba(3,1,0,.98) 0%,
            rgba(3,1,0,.82) 28%,
            rgba(3,1,0,.20) 52%,
            transparent 72%),
        linear-gradient(to bottom,
            rgba(3,1,0,.55) 0%,
            transparent 28%);
    transition:background .4s ease;
    z-index:1;
}
.baj-amb-card:hover .baj-amb-card__overlay {
    background:
        linear-gradient(to top,
            rgba(3,1,0,1.0) 0%,
            rgba(3,1,0,.88) 36%,
            rgba(3,1,0,.28) 60%,
            transparent 78%),
        linear-gradient(to bottom,
            rgba(3,1,0,.60) 0%,
            transparent 28%);
}

/* ── Top badge strip ── */
.baj-amb-card__top {
    position:absolute;
    top:14px; left:14px; right:14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    z-index:2;
}
.baj-amb-card__badge {
    font-family:'Inter',sans-serif;
    font-size:8px;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:rgba(255,255,255,.80);
    background:rgba(0,0,0,.45);
    border:1px solid rgba(195,137,52,.30);
    border-radius:20px;
    padding:4px 10px;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    white-space:nowrap;
}
.baj-amb-card__year {
    font-family:'Inter',sans-serif;
    font-size:10px;
    font-weight:700;
    letter-spacing:.06em;
    background:var(--gold);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    white-space:nowrap;
}

/* ── Left accent line (grows on hover) ── */
.baj-amb-card__accent {
    position:absolute;
    left:0; top:20%; bottom:20%;
    width:3px;
    background:var(--gold);
    border-radius:0 3px 3px 0;
    opacity:0;
    transform:scaleY(0);
    transform-origin:bottom;
    transition:opacity .35s ease, transform .4s cubic-bezier(.22,.68,0,1.2);
    z-index:2;
}
.baj-amb-card:hover .baj-amb-card__accent {
    opacity:.85;
    transform:scaleY(1);
}

/* ── Bottom info panel ── */
.baj-amb-card__body {
    position:absolute;
    bottom:0; left:0; right:0;
    padding:0 18px 20px;
    z-index:2;
    display:flex;
    flex-direction:column;
    gap:0;
}
.baj-amb-card__name {
    font-family:'Righteous',cursive;
    font-size:clamp(16px,1.7vw,22px);
    font-weight:400;
    color:#fff;
    margin:0 0 4px;
    line-height:1.15;
    text-shadow:0 2px 10px rgba(0,0,0,.9);
}
.baj-amb-card__sub {
    font-family:'Inter',sans-serif;
    font-size:10px;
    font-weight:400;
    color:rgba(255,255,255,.45);
    margin:0 0 10px;
    line-height:1.45;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    opacity:0;
    transform:translateY(5px);
    transition:opacity .3s ease .05s, transform .3s ease .05s;
}
.baj-amb-card:hover .baj-amb-card__sub {
    opacity:1;
    transform:translateY(0);
}
.baj-amb-card__btn {
    display:inline-flex;
    align-items:center;
    gap:7px;
    align-self:flex-start;
    padding:7px 18px;
    border:1px solid var(--gold-border);
    border-radius:9999px;
    font-family:'Inter',sans-serif;
    font-size:11px;
    font-weight:600;
    color:#f0e0c0;
    background:rgba(0,0,0,.40);
    white-space:nowrap;
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    opacity:0;
    transform:translateY(10px);
    transition:opacity .35s ease .08s,
               transform .35s ease .08s,
               background .3s ease,
               color .3s ease,
               border-color .3s ease;
}
.baj-amb-card:hover .baj-amb-card__btn {
    opacity:1;
    transform:translateY(0);
    background:var(--gold);
    color:#1a1000;
    -webkit-text-fill-color:#1a1000;
    border-color:transparent;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media(max-width:767px){

    /* ── Hero ── */
    .baj-hero { min-height:520px; }
    .baj-hero__slide--active { min-height:520px; }

    /* Slide: remove dark bg_color blending + boost brightness.
       JS handles per-slide background-position mapping (see ambassador.js). */
    .baj-hero__slide {
        background-color: transparent !important;
        background-size: cover;
    }
    .baj-hero__slide--active {
        filter: brightness(1.45);
    }

    /* Mobile overlay — vignette removed, only bottom fade for text. */
    .baj-hero__overlay {
        background:
            linear-gradient(
                to top,
                rgba(4,2,0,0.97) 0%,
                rgba(4,2,0,0.80) 20%,
                rgba(4,2,0,0.38) 42%,
                rgba(4,2,0,0.08) 58%,
                transparent 72%
            );
    }

    .baj-hero__content { padding:0 18px 64px; min-height:520px; }
    .baj-hero__arrow { width:38px; height:38px; font-size:14px; }
    .baj-hero__arrow--prev { left:8px; }
    .baj-hero__arrow--next { right:8px; }
    .baj-gallery__img { width:120px; border-radius:12px; }

    /* ── BEST-OF SECTION — full mobile overhaul ── */
    .baj-best { padding:36px 16px 48px; }

    /* Stack video above info */
    .baj-best__inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    /* Critical: 1fr columns must allow shrinking below min-content
       (fixes overflow from white-space:nowrap children) */
    .baj-best__vcol,
    .baj-best__icol { min-width: 0; width: 100%; }

    /* ── Video frame ── */
    .baj-best__vframe {
        border-radius: 14px;
    }

    /* Play button */
    .baj-play-btn  { width:60px; height:60px; }
    .baj-play-btn__icon { width:24px; height:24px; }

    /* Counter badge */
    .baj-best__vcounter {
        font-size:10px;
        padding:3px 9px;
        top:10px; right:10px;
    }

    /* ── Now-playing bar ── */
    .baj-best__vnow {
        margin-top:10px;
        margin-bottom:8px;
        gap:6px;
        padding:0 2px;
        min-width:0;           /* allow flex children to truncate */
    }
    .baj-best__vnow-label { font-size:8px; letter-spacing:.14em; flex-shrink:0; }
    .baj-best__vnow-title { font-size:11px; min-width:0; }

    /* ── Playlist: show all 3 thumbnails clearly ── */
    .baj-best__playlist {
        gap: 8px;
        padding-bottom: 8px;
        margin-bottom: 10px;
    }
    .baj-best__vthumb {
        width: calc(33.33% - 6px);
        flex-shrink: 0;
        min-width: 95px;
    }
    .baj-best__vthumb-wrap { border-radius:8px; }
    .baj-best__vthumb-label {
        font-size: 10px;
        margin-top: 5px;
    }
    .baj-best__vthumb-live { font-size:7px; padding:2px 5px; }

    /* ── Label bar ── */
    .baj-best__vbar {
        gap: 8px;
        padding: 9px 12px;
        margin-top: 10px;
        border-radius: 8px;
    }
    .baj-best__vbar-logo  { width:26px; flex-shrink:0; }
    .baj-best__vbar-label {
        font-size: 9px;
        letter-spacing: .03em;
        line-height: 1.4;
        /* truncate label so badge always fits */
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .baj-best__vbar-badge {
        font-size:10px;
        padding:3px 8px;
        white-space:nowrap;
        flex-shrink:0;   /* never let the year badge get clipped */
    }

    /* ── Info column — centered ── */
    .baj-best__icol {
        padding-top: 16px;
        border-top: 1px solid rgba(195,137,52,.12);
        min-width: 0;
        width: 100%;
        align-items: center;   /* center all flex children */
        text-align: center;
    }
    .baj-best__eyebrow {
        font-size:10px;
        letter-spacing:.18em;
        margin-bottom:8px;
    }
    .baj-best__htitle {
        font-size: clamp(15px,4.2vw,20px);
        margin-bottom: 2px;
    }
    .baj-best__hname {
        font-size: clamp(28px,7.8vw,40px);
        margin-bottom: 14px;
    }
    .baj-best__hdivider {
        width:40px;
        margin-bottom:14px;
        align-self: center;
    }
    .baj-best__hquote {
        font-size: 12px;
        line-height: 1.75;
        margin-bottom: 20px;
        width: 100%;
        max-width: 100%;
        overflow-wrap: break-word;
        word-break: break-word;
        text-align: center;
        font-style: italic;
    }
    .baj-best__hstats {
        gap: 28px;
        margin-bottom: 22px;
        justify-content: center;
    }
    .baj-best__hstat { align-items: center; }
    .baj-best__hstat-label { font-size:9px; text-align:center; }
    .baj-best__hstat-val   { font-size:18px; }

    /* Next ambassador button — centered pill */
    .baj-best__next-btn {
        align-self: center;
        padding: 10px 32px;
        font-size: 13px;
    }

    /* ── Ambassador selector strip ── */
    .baj-best__strip {
        gap: 10px;
        padding-top: 24px;
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding-left: 4px;
        padding-right: 4px;
        scrollbar-width: none;
    }
    .baj-best__strip::-webkit-scrollbar { display:none; }
    .baj-best__pill { flex-shrink:0; }
    .baj-best__pill-img-wrap { width:50px; height:50px; }
    .baj-best__pill-name     { font-size:9px; }

    /* ── Grid section ── */
    .baj-grid-sec { padding:50px 14px 70px; }
    .baj-grid-sec__head { margin-bottom:32px; }
    .baj-amb-card__name { font-size:14px; }
    .baj-amb-card__badge { display:none; }
    .baj-year-btn { font-size:11px; padding:2px 12px; }
    .baj-ach-year { font-size:26px; min-width:60px; }
}

@media(min-width:768px){
    .baj-gallery__img{width:160px;}
    .baj-awards{padding:30px 60px 60px;}
    .baj-year-btn{font-size:14px;padding:2px 22px;}
    .baj-year-btns{margin-bottom:22px;}
    .baj-career__panels{max-width:440px;}
}