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

/* ── Nav z-index fix ────────────────────────────────────────── */
/*
 * The hero section contains elements with stacking contexts
 * (transform, will-change, animations) that paint above the
 * navbar's z-index:2 stacking context, causing the mobile menu
 * to render behind the hero portrait.
 *
 * Fix 1: isolation:isolate on .baj-hero seals all its internal
 *         stacking contexts into a single group.
 * Fix 2: Raise .wicket-navbar z-index so its stacking context
 *         sits above the hero's isolated group.
 */
.baj-hero {
    isolation: isolate;
}
.wicket-navbar {
    z-index: 100;
}

/* ── 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 DUAL-COLUMN SHOWCASE
   Background: blurred atmospheric <img>
   Layout:     text left  ·  framed portrait right
═══════════════════════════════════════════════════════════════ */
.baj-hero {
    position: relative;
    height: clamp(580px, 82vh, 780px);
    overflow: hidden;
    background: #06040a; /* very dark base — atmosphere colours bleed through */
}

/* ── Each slide ───────────────────────────────────────────── */
.baj-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.9s ease;
}
.baj-hero__slide--active {
    opacity: 1;
    pointer-events: auto;
}

/* ── Atmospheric blurred backdrop (<img>, not background-image) */
.baj-hero__atmosphere {
    position: absolute;
    inset: -40px;   /* over-bleed so blur fringing never shows */
    z-index: 0;
    overflow: hidden;
}
.baj-hero__atm-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: blur(32px) brightness(0.20) saturate(1.6);
    transform: scale(1.05); /* compensate for blur edge softening */
}

/* ── Dark scrim over the atmosphere ─────────────────────── */
.baj-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(5, 3, 1, 0.38);
    pointer-events: none;
}

/* ── Two-column inner grid ───────────────────────────────── */
.baj-hero__inner {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 40px;
    padding: 56px 72px;
    max-width: 1340px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}

/* ══════════════════════════════════════════════════════════
   LEFT COLUMN — Text content with slide-from-left stagger
══════════════════════════════════════════════════════════ */
.baj-hero__text-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Eyebrow — small uppercase label with gold lead-line */
.baj-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 11px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--beige);
    margin-bottom: 20px;
    opacity: 0;
    transform: translateX(-22px);
    transition: opacity 0.55s ease 0.08s, transform 0.55s ease 0.08s;
}
.baj-hero__eyebrow::before {
    content: '';
    display: block;
    width: 28px;
    height: 1px;
    background: var(--gold-border);
    flex-shrink: 0;
}
.baj-hero__slide--active .baj-hero__eyebrow {
    opacity: 1;
    transform: translateX(0);
}

/* Ambassador name — large Righteous, white with glow */
.baj-hero__name {
    font-family: 'Righteous', cursive;
    font-weight: 400;
    font-size: clamp(48px, 6vw, 82px);
    line-height: 1.0;
    color: #ffffff;
    margin-bottom: 14px;
    text-shadow:
        0 0 70px rgba(255, 215, 140, 0.20),
        0 3px 24px rgba(0, 0, 0, 1);
    letter-spacing: 0.01em;
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.65s ease 0.2s, transform 0.65s ease 0.2s;
}
.baj-hero__slide--active .baj-hero__name {
    opacity: 1;
    transform: translateX(0);
}

/* Gold rule under name */
.baj-hero__rule {
    width: 58px;
    height: 2px;
    background: linear-gradient(90deg, #c38934 0%, #eed997 100%);
    border-radius: 2px;
    margin-bottom: 18px;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    transition: opacity 0.5s ease 0.36s, transform 0.5s ease 0.36s;
}
.baj-hero__slide--active .baj-hero__rule {
    opacity: 1;
    transform: scaleX(1);
}

/* Subtitle */
.baj-hero__subtitle {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--beige);
    margin-bottom: 18px;
    line-height: 1.65;
    opacity: 0;
    transform: translateX(-22px);
    transition: opacity 0.6s ease 0.46s, transform 0.6s ease 0.46s;
}
.baj-hero__slide--active .baj-hero__subtitle {
    opacity: 1;
    transform: translateX(0);
}

/* Quote — gold gradient, ALL CAPS */
.baj-hero__quote {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 11px;
    line-height: 1.9;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    max-width: 390px;
    margin-bottom: 30px;
    opacity: 0;
    transform: translateX(-18px);
    transition: opacity 0.55s ease 0.58s, transform 0.55s ease 0.58s;
}
.baj-hero__slide--active .baj-hero__quote {
    opacity: 1;
    transform: translateX(0);
}

/* Know More CTA */
.baj-hero__know-more {
    opacity: 0;
    transform: translateX(-14px);
    transition: opacity 0.5s ease 0.70s, transform 0.5s ease 0.70s;
}
.baj-hero__slide--active .baj-hero__know-more {
    opacity: 1;
    transform: translateX(0);
}

/* ══════════════════════════════════════════════════════════
   RIGHT COLUMN — Portrait frame  ·  Cinematic editorial style
══════════════════════════════════════════════════════════ */
.baj-hero__portrait-col {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Outer container — rings + corners attach here */
.baj-hero__portrait {
    position: relative;
    display: inline-block;
    opacity: 0;
    transform: translateX(44px) scale(0.96);
    transition: opacity 0.75s ease 0.16s, transform 0.75s ease 0.16s;
}
.baj-hero__slide--active .baj-hero__portrait {
    opacity: 1;
    transform: translateX(0) scale(1);
}

/* ── Decorative concentric gold rings behind the portrait ── */
.baj-hero__portrait::before,
.baj-hero__portrait::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    border-style: solid;
    border-color: rgba(195, 137, 52, 0.20);
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.7s ease 0.7s, transform 0.7s ease 0.7s;
}
.baj-hero__portrait::before {
    width: 112%;
    aspect-ratio: 1;
    border-width: 1px;
    border-color: rgba(195, 137, 52, 0.24);
}
.baj-hero__portrait::after {
    width: 136%;
    aspect-ratio: 1;
    border-width: 1px;
    border-color: rgba(195, 137, 52, 0.10);
}
.baj-hero__slide--active .baj-hero__portrait::before,
.baj-hero__slide--active .baj-hero__portrait::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* ── Expanded breathing halo ── */
.baj-hero__portrait-halo {
    position: absolute;
    inset: -64px;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 44% 44%, rgba(239,185,60,0.30) 0%, rgba(195,137,52,0.13) 36%, transparent 62%),
        radial-gradient(ellipse at 56% 88%, rgba(174,116,0,0.14) 0%, transparent 52%);
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease 0.5s;
}
.baj-hero__slide--active .baj-hero__portrait-halo {
    opacity: 1;
    animation: portraitHaloPulse 5s ease-in-out infinite alternate;
}
@keyframes portraitHaloPulse {
    from { transform: scale(0.96); }
    to   { transform: scale(1.04); }
}

/* ── Portrait image wrapper — 3:4 with cinematic shadow ── */
.baj-hero__portrait-wrap {
    position: relative;
    width: clamp(220px, 26vw, 360px);
    aspect-ratio: 3 / 4;
    border-radius: 4px;
    overflow: hidden;
    box-shadow:
        0 2px 8px   rgba(0, 0, 0, 0.55),
        0 14px 42px rgba(0, 0, 0, 0.82),
        0 42px 96px rgba(0, 0, 0, 0.55),
        0 0 0 1px   rgba(195, 137, 52, 0.48),
        0 0 52px    rgba(195, 137, 52, 0.13);
}

/* Rim-light tint — catches a warm edge highlight */
.baj-hero__portrait-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    border-radius: 4px;
    background: linear-gradient(
        158deg,
        rgba(239,185,60,0.16) 0%,
        rgba(239,185,60,0.05) 22%,
        transparent 46%,
        transparent 72%,
        rgba(195,137,52,0.10) 100%
    );
    mix-blend-mode: screen;
}

/* Light-sweep shimmer — drifts across every ~8 s */
.baj-hero__portrait-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background: linear-gradient(
        112deg,
        transparent 18%,
        rgba(255,245,200,0.09) 50%,
        transparent 82%
    );
    background-size: 300% 100%;
    background-position: 160% 0;
    animation: portraitShimmer 8s ease-in-out infinite 1.2s;
}
@keyframes portraitShimmer {
    0%        { background-position: 160% 0;  opacity: 0; }
    8%        { opacity: 1; }
    48%       { background-position: -160% 0; opacity: 1; }
    58%, 100% { background-position: -160% 0; opacity: 0; }
}

/* Portrait photo — slow Ken Burns zoom */
.baj-hero__portrait-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.06);
    transition: transform 9s ease;
    will-change: transform;
}
.baj-hero__slide--active .baj-hero__portrait-img {
    transform: scale(1);
}

/* Bottom gradient — deep cinematic scrim */
.baj-hero__portrait-fade {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 62%;
    background: linear-gradient(
        to top,
        rgba(3,1,0,0.97) 0%,
        rgba(3,1,0,0.76) 28%,
        rgba(3,1,0,0.28) 58%,
        transparent 100%
    );
    pointer-events: none;
}

/* ── Name badge (year removed) ── */
.baj-hero__portrait-badge {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 16px 20px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.baj-hero__portrait-fname {
    font-family: 'Righteous', cursive;
    font-size: clamp(22px, 2.8vw, 36px);
    color: #ffffff;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    text-align: center;
    text-shadow:
        0 0 28px rgba(255,220,140,0.35),
        0 2px 14px rgba(0,0,0,0.95);
    line-height: 1;
}

/* .baj-hero__portrait-year removed — year moved to hero text column */

/* ── Corner bracket accents — larger with glowing tip dots ── */
.baj-hero__corner {
    position: absolute;
    width: 30px;
    height: 30px;
    border-style: solid;
    border-color: #c38934;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.45s ease 0.65s;
}
.baj-hero__slide--active .baj-hero__corner { opacity: 1; }
.baj-hero__corner--tl { top: -10px;    left: -10px;    border-width: 2px 0 0 2px; }
.baj-hero__corner--tr { top: -10px;    right: -10px;   border-width: 2px 2px 0 0; }
.baj-hero__corner--bl { bottom: -10px; left: -10px;    border-width: 0 0 2px 2px; }
.baj-hero__corner--br { bottom: -10px; right: -10px;   border-width: 0 2px 2px 0; }

/* Glowing vertex dot at the outer tip of each corner bracket */
.baj-hero__corner::before {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #eed997;
    box-shadow: 0 0 8px 2px rgba(195,137,52,0.85);
}
.baj-hero__corner--tl::before { top: -3px;    left: -3px;  }
.baj-hero__corner--tr::before { top: -3px;    right: -3px; }
.baj-hero__corner--bl::before { bottom: -3px; left: -3px;  }
.baj-hero__corner--br::before { bottom: -3px; right: -3px; }

/* ══════════════════════════════════════════════════════════
   NAVIGATION — arrows · avatar dots · progress bar
══════════════════════════════════════════════════════════ */

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

/* Avatar photo dots */
.baj-hero__dots {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    gap: 10px;
    align-items: center;
}
.baj-hero__dot {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.15);
    cursor: pointer;
    transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
    padding: 0;
    background: rgba(0, 0, 0, 0.5);
    flex-shrink: 0;
}
.baj-hero__dot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}
.baj-hero__dot--active {
    border-color: var(--gold-border);
    transform: scale(1.22);
    box-shadow: 0 0 18px rgba(195, 137, 52, 0.55);
}
.baj-hero__dot:hover:not(.baj-hero__dot--active) {
    border-color: rgba(255, 255, 255, 0.42);
    transform: scale(1.10);
}

/* Progress bar */
.baj-hero__progress-track {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.06);
    z-index: 4;
}
.baj-hero__progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #c38934 0%, #eed997 100%);
}

/* ═══════════════════════════════════════════════════════════════
   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.4;
    padding-bottom:2px;
    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;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 1140px;
    margin: 0 auto;
    padding-top: 40px;
    border-top: 1px solid rgba(195,137,52,0.12);
}

/* Each pill: a plain circular avatar button — mirrors .baj-hero__dot exactly */
.baj-best__pill {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    /* scale lives here (on the whole button), not on the inner img-wrap,
       so overflow:hidden on the img-wrap never clips the scaled element */
    transition: transform 0.3s, box-shadow 0.3s;
}

.baj-best__pill-img-wrap {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.5);
    transition: border-color 0.3s;
    flex-shrink: 0;
}
.baj-best__pill-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* Name label hidden — dots-only strip */
.baj-best__pill-name { display: none; }

/* Active — scale the whole pill button, mirror .baj-hero__dot--active */
.baj-best__pill--active {
    transform: scale(1.22);
    box-shadow: 0 0 18px rgba(195, 137, 52, 0.55);
}
.baj-best__pill--active .baj-best__pill-img-wrap {
    border-color: var(--gold-border);
}

/* Hover non-active — mirror .baj-hero__dot:hover */
.baj-best__pill:hover:not(.baj-best__pill--active) {
    transform: scale(1.10);
}
.baj-best__pill:hover:not(.baj-best__pill--active) .baj-best__pill-img-wrap {
    border-color: rgba(255, 255, 255, 0.42);
}

/* ── 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 — mobile: stacked portrait-top / text-bottom ── */
    /*
     * ROOT FIX: on desktop, every child of .baj-hero is position:absolute,
     * so the hero's height was fixed by min-height:560px — not by content.
     * That caused the portrait to be clipped at the top (align-content:center
     * applied a negative offset), the Know More button to be hidden, and the
     * avatar dots to overlap the CTA.
     *
     * Fix: make the active slide and its inner grid position:relative so the
     * hero height is driven by real content.  The inactive slides remain
     * position:absolute (opacity:0) so fade transitions still work.
     * padding-bottom on the hero reserves space for the dots strip.
     */
    .baj-hero {
        height: auto;
        padding-bottom: 64px; /* room for avatar dots (36px) + margins */
    }

    /* Active slide: in-flow so it expands the hero */
    .baj-hero__slide--active {
        position: relative;
        inset: auto;
    }

    /* Grid becomes single column: portrait on top, text below */
    .baj-hero__inner {
        position: relative; /* was absolute — now contributes to slide height */
        inset: auto;
        width: 100%;
        max-width: 100%;
        margin: 0;
        grid-template-columns: 1fr;
        align-content: start; /* was center — center caused negative clipping offset */
        gap: 20px;
        padding: 28px 22px 20px;
    }

    /* Portrait column: show first on mobile */
    .baj-hero__portrait-col {
        order: -1;
        justify-content: center;
    }
    /* Portrait — wider on mobile for more visual impact */
    .baj-hero__portrait-wrap {
        width: min(72vw, 280px);
        aspect-ratio: 3 / 4;
        border-radius: 8px;
        box-shadow:
            0 4px 24px  rgba(0,0,0,0.75),
            0 0 0 1px   rgba(195,137,52,0.55),
            0 0 40px    rgba(195,137,52,0.18);
    }
    /* Larger fname on mobile now that year is gone */
    .baj-hero__portrait-fname { font-size: clamp(20px, 6.5vw, 30px); }

    /* Text column: centred */
    .baj-hero__text-col { align-items: center; }
    .baj-hero__eyebrow  { justify-content: center; }
    .baj-hero__eyebrow::before { display: none; }
    .baj-hero__name     { font-size: clamp(34px, 10vw, 52px); text-align: center; }
    .baj-hero__rule     { align-self: center; }
    .baj-hero__subtitle { text-align: center; }
    .baj-hero__quote    { text-align: center; max-width: 100%; }
    .baj-hero__know-more{ align-self: center; }

    /* Avatar dots — sit inside padding-bottom area, clear of content */
    .baj-hero__dots { bottom: 14px; gap: 7px; }
    .baj-hero__dot  { width: 36px; height: 36px; }

    /* ── Hero arrows — inside portrait frame, vertically centred ── */
    .baj-hero__arrow {
        width: 44px;
        height: 44px;
        font-size: 17px;
        /* vertical: portrait starts at ~28px padding-top, height = min(72vw,280px)*4/3
           centre ≈ 28px + half-portrait-height = 28 + min(48vw,187px)            */
        top: calc(28px + min(48vw, 187px));
        transform: translateY(-50%);
        background: rgba(0, 0, 0, 0.55);
        border: 1.5px solid rgba(195, 137, 52, 0.50);
        box-shadow: 0 2px 12px rgba(0,0,0,0.55);
    }
    .baj-hero__arrow:active {
        background: rgba(195, 137, 52, 0.50);
        border-color: var(--gold-border);
        color: #fff;
    }
    /* horizontal: just inside the portrait left/right edges
       portrait is min(72vw,280px) wide and centred → edge at 50% ± min(36vw,140px)
       place arrow 10px inside each edge                                           */
    .baj-hero__arrow--prev { left:  calc(50% - min(36vw, 140px) + 10px); }
    .baj-hero__arrow--next { right: calc(50% - min(36vw, 140px) + 10px); }
    .baj-gallery__img { width:120px; border-radius:12px; }

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

    /* 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 thumbnails ── */
    .baj-best__playlist {
        gap: 8px;
        /* top: room for active box-shadow ring; bottom: room for 0 6px 24px shadow */
        padding: 4px 0 14px;
        margin-bottom: 4px;
        scrollbar-width: none;
    }
    .baj-best__playlist::-webkit-scrollbar { display: none; }
    .baj-best__vthumb {
        /* Show ~2.5 thumbs: each is wider → less image crop, better face visibility
           Formula: width so that 2 full + ~0.45 partial fit in container            */
        width: 40%;
        flex-shrink: 0;
        min-width: 110px;
    }
    .baj-best__vthumb-wrap {
        border-radius: 8px;
        /* ensure shadow is not clipped by the wrap itself */
        overflow: visible;
        /* keep image clipping with a pseudo approach — inner img clips to border-radius */
    }
    .baj-best__vthumb-wrap img,
    .baj-best__vthumb-overlay,
    .baj-best__vthumb-play,
    .baj-best__vthumb-live {
        border-radius: 8px;
        overflow: hidden;
    }
    .baj-best__vthumb-wrap img { overflow: hidden; }
    .baj-best__vthumb-label {
        font-size: 10px;
        margin-top: 5px;
        -webkit-line-clamp: 1;
    }
    .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 — matches hero dots at mobile size ── */
    .baj-best__strip {
        gap: 10px;
        padding: 20px 12px 16px;
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        scrollbar-width: none;
    }
    .baj-best__strip::-webkit-scrollbar { display:none; }
    .baj-best__pill {
        flex-shrink: 0;
        flex-direction: column;
        gap: 5px;
        /* disable scale on mobile — scale inside overflow-x:auto clips glow vertically */
        transform: none !important;
    }
    .baj-best__pill-img-wrap { width: 46px; height: 46px; }
    .baj-best__pill-name {
        display: block;
        font-size: 8px;
        color: rgba(255,255,255,0.55);
    }
    /* active on mobile: border + glow only, no scale */
    .baj-best__pill--active .baj-best__pill-img-wrap {
        border-color: var(--gold-border);
        box-shadow: 0 0 0 2px rgba(195,137,52,0.35), 0 0 12px rgba(195,137,52,0.45);
    }
    .baj-best__pill--active .baj-best__pill-name {
        color: rgba(195,137,52,0.95);
    }

    /* ── Grid section ── */
    .baj-grid-sec { padding:40px 14px 60px; }
    .baj-grid-sec__head { margin-bottom:28px; }

    /* Card name — bigger for readability */
    .baj-amb-card__name { font-size:15px; }
    .baj-amb-card__badge { display:none; }

    /* On mobile (no hover): always show subtitle + Know More button */
    .baj-amb-card__sub {
        opacity: 1;
        transform: translateY(0);
        font-size: 9px;
        margin-top: 3px;
    }
    .baj-amb-card__btn {
        opacity: 1;
        transform: translateY(0);
        margin-top: 8px;
        font-size: 10px;
        padding: 5px 12px;
    }

    /* Orphan last card — center it in 2-col grid */
    .baj-amb-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        width: calc(50% - 6px); /* explicit width = (grid_width - gap) / 2 */
        margin: 0 auto;
    }

    .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;}
}

/* ══════════════════════════════════════════════════════════════
   3D AMBASSADOR SLIDER (.baj-amb3d)
   Adapted from siddharth-nalwaya/qBJYJYR — gold-on-obsidian themed
   ══════════════════════════════════════════════════════════════ */
.baj-amb3d{
    height:35rem;
    width:100%;
    max-width:1200px;
    margin:0 auto;
    display:flex;
    justify-content:center;
    align-items:center;
    user-select:none;
    position:relative;
}
.baj-amb3d__arrow{
    height:100%;
    width:8%;
    min-width:48px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:transparent;
    border:none;
    cursor:pointer;
    color:rgba(195,137,52,.55);
    transition:color .2s ease, transform .2s ease;
    z-index:5;
    padding:0;
}
.baj-amb3d__arrow svg{
    width:38px;
    height:38px;
    padding:8px;
    border-radius:50%;
    border:1px solid rgba(195,137,52,.35);
    background:rgba(15,12,8,.55);
    backdrop-filter:blur(4px);
    box-sizing:content-box;
    transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.baj-amb3d__arrow:hover{ color:#f3d27a; transform:scale(1.05); }
.baj-amb3d__arrow:hover svg{ background:rgba(195,137,52,.18); border-color:rgba(243,210,122,.7); }
.baj-amb3d__arrow:focus-visible{ outline:none; }
.baj-amb3d__arrow:focus-visible svg{ box-shadow:0 0 0 3px rgba(243,210,122,.45); }

.baj-amb3d__stage{
    height:100%;
    width:84%;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:row;
    overflow:hidden;
    position:relative;
    perspective:100px;
}
.baj-amb3d__bg{
    height:100%;
    width:102%;
    position:absolute;
    top:0;
    left:-1%;
    background:linear-gradient(
        to right,
        rgba(8,6,4,.92),
        rgba(8,6,4,0) 12%,
        rgba(8,6,4,0) 88%,
        rgba(8,6,4,.92)
    );
    z-index:3;
    pointer-events:none;
}

/* Card base — every slide starts here, then position-N classes override */
.baj-amb3d__slide{
    position:absolute;
    left:50%;
    top:50%;
    height:24rem;
    max-height:430px;
    width:15rem;
    min-width:280px;
    border-radius:22px;
    z-index:0;
    transform:translate(-50%,-50%) rotateY(0deg) scale(1,1);
    transform-style:preserve-3d;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#15110a;
    transition:
        transform .55s cubic-bezier(.4,.0,.2,1),
        opacity .55s ease,
        left .55s cubic-bezier(.4,.0,.2,1),
        z-index 0s .27s ease,
        box-shadow .55s ease,
        filter .55s ease;
    overflow:hidden;
    /* gold rim shows on focus card */
    box-shadow:0 .4rem 1.6rem rgba(0,0,0,.45);
}

/* Carousel positions */
.baj-amb3d__slide.position-1{
    left:20% !important;
    z-index:1 !important;
    transform:translate(-50%,-50%) rotateY(-2deg) scale(.78,.78) !important;
    opacity:1 !important;
    box-shadow:0 .4rem 1.6rem rgba(0,0,0,.4) !important;
    filter:blur(5px) brightness(.7);
}
.baj-amb3d__slide.position-2{
    left:35% !important;
    z-index:2 !important;
    transform:translate(-50%,-50%) rotateY(-1deg) scale(.9,.9) !important;
    opacity:1 !important;
    box-shadow:0 .4rem 1.6rem rgba(0,0,0,.55) !important;
    filter:blur(2px) brightness(.85);
}
.baj-amb3d__slide.position-3{
    left:50% !important;
    z-index:4 !important;
    transform:translate(-50%,-50%) rotateY(0deg) scale(1,1) !important;
    opacity:1 !important;
    box-shadow:
        0 .4rem 2rem rgba(0,0,0,.6),
        0 0 0 1px rgba(243,210,122,.5),
        0 0 32px rgba(195,137,52,.18) !important;
    cursor:pointer;
    filter:blur(0) brightness(1);
}
.baj-amb3d__slide.position-3:hover{
    box-shadow:
        0 .4rem 2.6rem rgba(0,0,0,.75),
        0 0 0 1px rgba(243,210,122,.85),
        0 0 48px rgba(195,137,52,.32) !important;
    transform:translate(-50%,-50%) rotateY(0deg) scale(1.04,1.04) !important;
}
.baj-amb3d__slide.position-4{
    left:65% !important;
    z-index:2 !important;
    transform:translate(-50%,-50%) rotateY(1deg) scale(.9,.9) !important;
    opacity:1 !important;
    box-shadow:0 .4rem 1.6rem rgba(0,0,0,.55) !important;
    filter:blur(2px) brightness(.85);
}
.baj-amb3d__slide.position-5{
    left:80% !important;
    z-index:1 !important;
    transform:translate(-50%,-50%) rotateY(2deg) scale(.78,.78) !important;
    opacity:1 !important;
    box-shadow:0 .4rem 1.6rem rgba(0,0,0,.4) !important;
    filter:blur(5px) brightness(.7);
}
.baj-amb3d__slide.position-none{
    left:50%;
    z-index:0;
    transform:translate(-50%,-50%) rotateY(0deg) scale(.7,.7);
    opacity:0;
    pointer-events:none;
    box-shadow:0 .4rem 1.6rem rgba(0,0,0,0);
}

/* Media (portrait fills card) */
.baj-amb3d__media{
    position:absolute;
    inset:0;
    border-radius:22px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}
.baj-amb3d__media img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
    display:block;
}
/* Dark scrim so text reads cleanly */
.baj-amb3d__media::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg, rgba(8,6,4,.55) 0%, rgba(8,6,4,0) 28%, rgba(8,6,4,0) 48%, rgba(8,6,4,.85) 100%);
    pointer-events:none;
}

/* Overlay sections (only fully visible on focused card) */
.baj-amb3d__sections{
    position:absolute;
    inset:0;
    border-radius:22px;
    padding:1rem 1.1rem 1.2rem;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    box-sizing:border-box;
    color:#fff;
    z-index:2;
}
.baj-amb3d__upper,
.baj-amb3d__btn{
    opacity:0;
    transition:opacity .55s ease-in-out;
}
.baj-amb3d__slide.position-3 .baj-amb3d__upper,
.baj-amb3d__slide.position-3 .baj-amb3d__btn{
    opacity:1;
}
.baj-amb3d__upper{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:8px;
}
.baj-amb3d__badge{
    font-size:9px;
    letter-spacing:.16em;
    text-transform:uppercase;
    font-weight:700;
    color:#f3d27a;
    background:rgba(15,12,8,.55);
    border:1px solid rgba(243,210,122,.45);
    border-radius:999px;
    padding:5px 10px;
    backdrop-filter:blur(3px);
    line-height:1;
}
.baj-amb3d__year{
    font-size:11px;
    font-weight:700;
    color:#fff;
    background:rgba(0,0,0,.45);
    border:1px solid rgba(255,255,255,.22);
    border-radius:999px;
    padding:5px 10px;
    backdrop-filter:blur(3px);
    line-height:1;
}
.baj-amb3d__lower{
    display:flex;
    flex-direction:column;
    gap:.65rem;
    align-items:flex-start;
}
.baj-amb3d__caption{
    font-family:'Cormorant Garamond', Georgia, serif;
    font-size:1.65rem;
    line-height:1.05;
    font-weight:600;
    letter-spacing:.01em;
    color:#fff;
    text-shadow:0 2px 12px rgba(0,0,0,.55);
}
.baj-amb3d__btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    border:1px solid rgba(243,210,122,.7);
    background:rgba(195,137,52,.18);
    color:#f3d27a;
    padding:.55rem 1rem;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
    cursor:pointer;
    backdrop-filter:blur(4px);
    transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.baj-amb3d__btn:hover{
    background:rgba(243,210,122,.25);
    color:#fff;
    border-color:#f3d27a;
    transform:translateY(-1px);
}
.baj-amb3d__btn svg{ display:block; }

/* Mobile: shrink visible peripheral cards */
@media (max-width:980px){
    .baj-amb3d{ height:30rem; }
    .baj-amb3d__slide{ height:21rem; min-width:240px; width:14rem; }
    .baj-amb3d__caption{ font-size:1.45rem; }
}
@media (max-width:620px){
    .baj-amb3d{ height:28rem; }
    .baj-amb3d__slide.position-1, .baj-amb3d__slide.position-5{ opacity:.45 !important; }
    .baj-amb3d__slide.position-2, .baj-amb3d__slide.position-4{ opacity:.95 !important; }
    .baj-amb3d__slide{ min-width:220px; width:13rem; height:20rem; }
}
@media (max-width:445px){
    .baj-amb3d__slide.position-1, .baj-amb3d__slide.position-5{ opacity:0 !important; }
    .baj-amb3d__slide.position-2, .baj-amb3d__slide.position-4{ opacity:.5 !important; }
}
@media (max-width:415px){
    .baj-amb3d{ height:26rem; }
    .baj-amb3d__slide{
        opacity:0 !important;
        box-shadow:none !important;
    }
    .baj-amb3d__slide.position-3{
        opacity:1 !important;
        box-shadow:
            0 .4rem 2rem rgba(0,0,0,.6),
            0 0 0 1px rgba(243,210,122,.5),
            0 0 32px rgba(195,137,52,.18) !important;
    }
    .baj-amb3d__slide.position-1, .baj-amb3d__slide.position-2{
        left:-50% !important;
        transform:translate(-50%,-50%) rotateY(0deg) scale(.7,.7) !important;
    }
    .baj-amb3d__slide.position-4, .baj-amb3d__slide.position-5{
        left:150% !important;
        transform:translate(-50%,-50%) rotateY(0deg) scale(.7,.7) !important;
    }
}