/* ============================================================
   Nara Lokesh Hub — self-contained, namespaced .nlh-*
   Uses site tokens: --yellow, --red-primary, --ink, --container.
   3D showcases (holder + coverflows) + vision feature. Light theme.
   ============================================================ */

.nlh-wrap { --nlh-gold: var(--yellow, #FFC400); --nlh-red: var(--red-primary, #E31E24); --nlh-ink: var(--ink, #1A1A1A); }

/* entrance */
.nlh-reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.nlh-reveal.nlh-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .nlh-ring, .nlh-cf-item, .nlh-pcf-item, .nlh-kb { transition: none !important; animation: none !important; }
}

/* ---- shared dots / arrows ---- */
.nlh-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }
.nlh-dot { height: 8px; width: 8px; border: none; padding: 0; border-radius: 999px; background: rgba(26,26,26,.26); cursor: pointer; transition: all .3s ease; }
.nlh-dot.on { width: 28px; background: var(--nlh-gold); }
.nlh-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 40; display: grid; height: 40px; width: 40px; place-items: center; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.42); color: #fff; cursor: pointer; backdrop-filter: blur(4px); font-size: 22px; line-height: 1; transition: background .2s; }
.nlh-arrow:hover { background: rgba(0,0,0,.68); }

@keyframes nlhKb { from { transform: scale(1.04); } to { transform: scale(1.12); } }
.nlh-kb { animation: nlhKb 16s ease-in-out infinite alternate; }

/* ============================================================
   VISION feature
   ============================================================ */
.nlh-vision { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .nlh-vision { grid-template-columns: 1.25fr .75fr; gap: 32px; align-items: stretch; } }

.nlh-art { position: relative; height: 100%; min-height: 340px; overflow: hidden; border-radius: 28px; box-shadow: 0 26px 60px -28px rgba(20,20,20,.55); outline: 1px solid rgba(0,0,0,.06); }
.nlh-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nlh-art .nlh-art-grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.8), transparent 55%, rgba(0,0,0,.1)); }
.nlh-badge { position: absolute; left: 20px; top: 20px; border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 800; color: var(--nlh-ink); background: var(--nlh-gold); box-shadow: 0 8px 20px -8px rgba(0,0,0,.4); }
.nlh-art-cap { position: absolute; left: 20px; right: 20px; bottom: 20px; color: #fff; }
.nlh-art-cap b { display: block; font-family: Montserrat, Manrope, sans-serif; font-size: clamp(20px,2.4vw,26px); font-weight: 800; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.nlh-art-cap span { display: block; margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--nlh-gold); }

.nlh-vcol { display: flex; flex-direction: column; }
.nlh-vcol > p { color: var(--text, #565656); line-height: 1.6; }
.nlh-vid { position: relative; margin: 24px auto 0; width: 100%; max-width: 260px; }
.nlh-vid-frame { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 24px; background: #000; box-shadow: 0 26px 60px -26px rgba(20,20,20,.6); outline: 1px solid rgba(0,0,0,.08); }
.nlh-vid-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nlh-mute { position: absolute; right: 12px; bottom: 12px; display: grid; height: 40px; width: 40px; place-items: center; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.45); color: #fff; cursor: pointer; backdrop-filter: blur(4px); }
.nlh-vidcap { margin: 16px auto 0; max-width: 300px; text-align: center; font-size: 14px; line-height: 1.5; color: var(--text, #565656); }
.nlh-vidcap b { color: var(--nlh-ink); }
.nlh-vcta { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 1024px) { .nlh-vcol > p, .nlh-vidcap, .nlh-vcta { text-align: left; } .nlh-vcta { justify-content: flex-start; } .nlh-vid { margin-left: 0; } .nlh-vidcap { margin-left: 0; } }
@media (max-width: 1023px) { .nlh-vcol { text-align: center; } .nlh-vcta { justify-content: center; } }

/* ============================================================
   HUB — tabs
   ============================================================ */
.nlh-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 30px; }
.nlh-tab { border: 2px solid var(--nlh-ink); background: #fff; color: var(--nlh-ink); font-weight: 800; font-size: 14px; padding: 10px 20px; border-radius: 999px; cursor: pointer; transition: all .25s; }
.nlh-tab:hover { transform: translateY(-2px); }
.nlh-tab.on { background: var(--nlh-gold); border-color: var(--yellow-deep, #E0A600); }
.nlh-panel { display: none; }
.nlh-panel.on { display: block; animation: nlhFade .35s ease; }
@keyframes nlhFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- World Stage: 3D cylinder holder + side text ---- */
.nlh-stage { display: grid; gap: 24px; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .nlh-stage { grid-template-columns: 1.06fr .94fr; gap: 40px; } }
.nlh-holder { position: relative; display: flex; height: 340px; align-items: center; justify-content: center; overflow: hidden; touch-action: pan-y; user-select: none; }
@media (min-width: 640px) { .nlh-holder { height: 520px; } }
.nlh-holder-persp { perspective: 1600px; transform: scale(.62); }
@media (min-width: 640px) { .nlh-holder-persp { transform: scale(.9); } }
@media (min-width: 768px) { .nlh-holder-persp { transform: none; } }
.nlh-floor { position: absolute; left: 50%; top: 70%; height: 112px; width: 460px; max-width: 92vw; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse at center, rgba(60,40,0,.42), transparent 66%); filter: blur(8px); pointer-events: none; }
.nlh-ring { position: relative; transform-style: preserve-3d; transition: transform .85s cubic-bezier(.22,1,.28,1); }
.nlh-card { position: absolute; inset: 0; overflow: hidden; border-radius: 24px; border: 3px solid rgba(255,255,255,.85); background: #fff; box-shadow: 0 30px 60px -22px rgba(60,40,0,.6); outline: 2px solid var(--nlh-gold); outline-offset: -3px; transition: transform .7s ease, opacity .7s ease; cursor: pointer; }
.nlh-card img { width: 100%; height: 100%; object-fit: cover; }
.nlh-card figcaption { position: absolute; inset: auto 0 0 0; padding: 34px 12px 12px; background: linear-gradient(to top, rgba(10,8,0,.9), rgba(10,8,0,.15) 60%, transparent); }
.nlh-card .nlh-c-tag { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--nlh-gold); }
.nlh-card .nlh-c-title { font-size: 14px; font-weight: 800; color: #fff; line-height: 1.15; }

.nlh-stage-text { text-align: center; }
@media (min-width: 1024px) { .nlh-stage-text { text-align: left; } }
.nlh-stage-body { min-height: 168px; margin-top: 8px; }
.nlh-stage-body.nlh-swap { animation: nlhTextIn .45s cubic-bezier(.16,1,.3,1); }
@keyframes nlhTextIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.nlh-st-tag { font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--nlh-red); }
.nlh-st-title { margin-top: 8px; font-family: Montserrat, Manrope, sans-serif; font-size: clamp(22px,3vw,30px); font-weight: 800; color: var(--nlh-ink); line-height: 1.15; }
.nlh-st-desc { margin-top: 12px; max-width: 460px; color: var(--text, #565656); line-height: 1.6; }
@media (max-width: 1023px) { .nlh-st-desc { margin-left: auto; margin-right: auto; } }
.nlh-quote { margin-top: 26px; max-width: 460px; border-left: 4px solid var(--nlh-gold); padding-left: 16px; font-family: Lora, Georgia, serif; font-style: italic; font-size: clamp(18px,2.2vw,21px); font-weight: 600; color: var(--nlh-ink); }
@media (max-width: 1023px) { .nlh-quote { margin-left: auto; margin-right: auto; text-align: left; } }

/* ---- wide coverflow (headlines) ---- */
.nlh-cf { position: relative; height: 210px; overflow: hidden; perspective: 1700px; touch-action: pan-y; }
@media (min-width: 640px) { .nlh-cf { height: 320px; } }
@media (min-width: 768px) { .nlh-cf { height: 380px; } }
.nlh-cf-item { position: absolute; left: 50%; top: 50%; aspect-ratio: 16 / 9; width: 68%; overflow: hidden; border-radius: 22px; background: #000; box-shadow: 0 30px 60px -22px rgba(20,20,20,.6); transition: transform .7s ease-out, opacity .7s ease-out, filter .7s ease-out; }
.nlh-cf-item img { width: 100%; height: 100%; object-fit: cover; }
.nlh-cf-cap { position: absolute; inset: auto 0 0 0; padding: 40px 14px 14px; background: linear-gradient(to top, rgba(0,0,0,.8), transparent); }
.nlh-cf-cap span { display: inline-block; border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 800; color: var(--nlh-ink); background: var(--nlh-gold); }

/* ---- vertical coverflow (posters) ---- */
.nlh-pcf { position: relative; height: 400px; overflow: hidden; perspective: 1800px; touch-action: pan-y; }
@media (min-width: 640px) { .nlh-pcf { height: 500px; } }
@media (min-width: 768px) { .nlh-pcf { height: 560px; } }
.nlh-pcf-item { position: absolute; left: 50%; top: 50%; height: 86%; aspect-ratio: 39 / 50; overflow: hidden; border-radius: 22px; background: #000; box-shadow: 0 30px 60px -22px rgba(20,20,20,.6); transition: transform .7s ease-out, opacity .7s ease-out, filter .7s ease-out; }
.nlh-pcf-item img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   First-screen 3D hero takeover (keeps yellow theme)
   ============================================================ */
.nlh-hero { position: relative; min-height: 92vh; display: flex; align-items: center; overflow: hidden; padding: 90px 0 40px; background: radial-gradient(120% 90% at 50% 0%, var(--yellow-soft, #FFF3CC), #ffffff 68%); }
.nlh-hero::after { content: ""; position: absolute; left: -10%; bottom: -20%; width: 60%; height: 60%; border-radius: 50%; background: radial-gradient(circle, rgba(255,196,0,.22), transparent 65%); pointer-events: none; }
.nlh-hero-inner { position: relative; z-index: 2; width: min(calc(100% - 40px), 1200px); margin-inline: auto; display: grid; gap: 20px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1024px) { .nlh-hero-inner { grid-template-columns: .82fr 1.18fr; gap: 40px; } }
.nlh-hero-head { text-align: center; }
@media (min-width: 1024px) { .nlh-hero-head { text-align: left; } }
.nlh-hero-head h1 { margin: 10px 0 0; font-family: Montserrat, Manrope, sans-serif; font-size: clamp(34px, 5.2vw, 62px); font-weight: 800; line-height: 1.03; letter-spacing: -.03em; color: var(--ink, #1A1A1A); }
.nlh-hero-head .nlh-tel { color: var(--red-primary, #E31E24); }
.nlh-hero-head p { margin: 16px auto 0; max-width: 420px; font-size: clamp(15px, 1.6vw, 19px); font-weight: 600; color: var(--text, #565656); }
@media (min-width: 1024px) { .nlh-hero-head p { margin-left: 0; } }
.nlh-hero-cta { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
@media (min-width: 1024px) { .nlh-hero-cta { justify-content: flex-start; } }
.nlh-hero .nlh-pcf { height: 60vh; min-height: 360px; max-height: 620px; }
.nlh-hero .nlh-dots { margin-top: 14px; }
.nlh-hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: 999px; background: var(--yellow, #FFC400); color: var(--ink); font-size: 12px; font-weight: 800; box-shadow: 0 10px 24px -10px rgba(255,196,0,.7); }

/* ============================================================
   Landing Spotlight popup (auto-opens once per session)
   ============================================================ */
.nlh-pop { position: fixed; inset: 0; z-index: 100000; display: flex; opacity: 0; visibility: hidden; transition: opacity .5s ease; }
.nlh-pop.open { opacity: 1; visibility: visible; }
.nlh-pop-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.05); }
.nlh-pop-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,8,0,.8), rgba(10,8,0,.92)); }
.nlh-pop-inner { position: relative; z-index: 2; margin: auto; width: min(calc(100% - 32px), 1080px); display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 0; }
.nlh-pop-top { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.nlh-pop-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: var(--yellow, #FFC400); color: #1A1A1A; font-weight: 800; font-size: 12px; box-shadow: 0 10px 24px -10px rgba(255,196,0,.7); }
.nlh-pop-x { display: grid; place-items: center; height: 44px; width: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.12); color: #fff; font-size: 18px; cursor: pointer; transition: background .2s; }
.nlh-pop-x:hover { background: rgba(255,255,255,.25); }
.nlh-pop-title { margin: 2px 0 0; color: #fff; text-align: center; font-family: Montserrat, Manrope, sans-serif; font-weight: 800; font-size: clamp(22px, 3.6vw, 42px); letter-spacing: -.02em; text-shadow: 0 2px 20px rgba(0,0,0,.5); }
.nlh-pop-title span { color: var(--yellow, #FFC400); }
.nlh-pop-stage { position: relative; width: 100%; }
.nlh-pop .nlh-pcf { height: 54vh; min-height: 320px; max-height: 540px; }
.nlh-pop .nlh-dot { background: rgba(255,255,255,.4); }
.nlh-pop .nlh-dot.on { background: var(--yellow, #FFC400); }
.nlh-pop-cta { margin-top: 4px; }
.nlh-pop-flag { position: absolute; left: 8px; bottom: 8px; width: 96px; aspect-ratio: 9/16; border-radius: 14px; overflow: hidden; border: 2px solid rgba(255,255,255,.55); box-shadow: 0 12px 34px rgba(0,0,0,.55); z-index: 3; }
.nlh-pop-flag video { width: 100%; height: 100%; object-fit: cover; }
.nlh-pop-flag b { position: absolute; left: 6px; top: 6px; font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: var(--yellow, #FFC400); color: #1A1A1A; }
@media (max-width: 640px) { .nlh-pop .nlh-pcf { height: 46vh; min-height: 280px; } .nlh-pop-flag { width: 72px; } .nlh-pop-title { font-size: 22px; } }

/* ============================================================
   Spotlight popup — REDESIGN (clean bg, 4 rotating cards, timer)
   ============================================================ */
.nlh-pop { background: radial-gradient(130% 100% at 72% 6%, rgba(255,196,0,.18), transparent 55%), rgba(12,10,4,.93); backdrop-filter: blur(6px); }
.nlh-pop-inner { gap: 16px; }
.nlh-pop-corner { position: fixed; top: 18px; right: 18px; display: flex; align-items: center; gap: 10px; z-index: 6; }
.nlh-timer { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px; background: var(--yellow,#FFC400); color: #1A1A1A; font-weight: 800; font-size: 13px; box-shadow: 0 10px 26px -10px rgba(255,196,0,.85); }
.nlh-timer b { font-variant-numeric: tabular-nums; min-width: 12px; text-align: center; }
.nlh-pop-x2 { display: grid; place-items: center; height: 42px; width: 42px; border-radius: 999px; border: none; background: var(--yellow,#FFC400); color: #1A1A1A; font-size: 18px; font-weight: 800; cursor: pointer; box-shadow: 0 10px 26px -10px rgba(255,196,0,.85); }
.nlh-pop-x2:hover { filter: brightness(1.05); }
.nlh-spot { position: relative; width: min(86vw, 360px); aspect-ratio: 39/50; margin: 4px auto 0; }
.nlh-spot-card { position: absolute; inset: 0; overflow: hidden; border-radius: 22px; border: 3px solid var(--yellow,#FFC400); background: #000; box-shadow: 0 44px 90px -34px rgba(0,0,0,.85); }
.nlh-spot-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nlh-spot.pop .nlh-spot-card { animation: nlhSpotPop .6s cubic-bezier(.2,.9,.2,1); }
@keyframes nlhSpotPop { from { opacity: 0; transform: scale(.92) translateY(18px) rotate(-1deg); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .nlh-spot { width: min(80vw, 300px); } .nlh-pop-title { font-size: 24px; } }

/* ============================================================
   Spotlight popup = full "page" overlay (all sections, scrollable)
   Overrides the earlier centered/dark popup styles.
   ============================================================ */
.nlh-pop { display: block; background: var(--white, #fff); backdrop-filter: none; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.nlh-pop-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(0,0,0,.07); }
.nlh-pop-brand { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--yellow, #FFC400); color: #1A1A1A; font-weight: 800; font-size: 12px; }
.nlh-pop-actions { display: flex; align-items: center; gap: 8px; }
.nlh-pop-scroll { padding-bottom: 48px; }
.nlh-pop-scroll .section { padding-top: 56px; padding-bottom: 56px; }
@media (max-width: 640px) { .nlh-pop-bar { padding: 10px 12px; } .nlh-pop-brand { font-size: 11px; padding: 7px 11px; } .nlh-timer { font-size: 12px; padding: 8px 12px; } }

/* ============================================================
   Spotlight popup = centered, ONE scene per refresh (final)
   ============================================================ */
.nlh-pop { display: flex; background: radial-gradient(130% 100% at 72% 6%, rgba(255,196,0,.16), transparent 55%), rgba(12,10,4,.94); backdrop-filter: blur(6px); overflow: hidden; }
.nlh-pop-inner2 { position: relative; z-index: 2; margin: auto; width: min(calc(100% - 32px), 1040px); display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 0; text-align: center; }
.nlh-pop-label { color: var(--yellow, #FFC400); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; font-size: 13px; }
.nlh-pop-stage2 { position: relative; width: 100%; margin-top: 4px; }
.nlh-pop-inner2 .nlh-holder { height: 46vh; min-height: 300px; }
.nlh-pop-inner2 .nlh-cf { height: 40vh; min-height: 240px; }
.nlh-pop-inner2 .nlh-pcf { height: 50vh; min-height: 320px; }
.nlh-pop-inner2 .nlh-dot { background: rgba(255,255,255,.4); }
.nlh-pop-inner2 .nlh-dot.on { background: var(--yellow, #FFC400); }
/* vision scene */
.nlh-pv { display: flex; gap: 16px; align-items: center; justify-content: center; width: 100%; }
.nlh-pv-art { position: relative; height: 52vh; max-height: 560px; aspect-ratio: 738/1015; overflow: hidden; border-radius: 20px; border: 3px solid var(--yellow,#FFC400); box-shadow: 0 40px 80px -34px rgba(0,0,0,.8); }
.nlh-pv-art img { width: 100%; height: 100%; object-fit: cover; }
.nlh-pv-flag { position: relative; width: 116px; aspect-ratio: 9/16; overflow: hidden; border-radius: 14px; border: 2px solid var(--yellow,#FFC400); box-shadow: 0 16px 40px rgba(0,0,0,.55); }
.nlh-pv-flag video { width: 100%; height: 100%; object-fit: cover; }
.nlh-pv-flag b { position: absolute; left: 6px; top: 6px; font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: var(--yellow,#FFC400); color: #1A1A1A; }
@media (max-width: 640px) { .nlh-pv { flex-direction: column; } .nlh-pv-art { height: 44vh; } .nlh-pv-flag { width: 90px; } .nlh-pop-title { font-size: 24px; } }

/* bigger World Stage holder inside popup */
.nlh-pop-inner2 .nlh-holder { height: 58vh; min-height: 360px; }
@media (max-width: 640px) { .nlh-pop-inner2 .nlh-holder { height: 44vh; min-height: 280px; } }

/* ============================================================
   Corner scroller — transparent, bottom-left, every page
   ============================================================ */


/* corner scroller — bigger & clearer */


/* ============================================================
   Corner scroller — PREMIUM transparent design (3D tilt + captions)
   ============================================================ */


/* fix: remove 3D tilt (was clipping cards) — clean straight column */


/* show FULL image (no crop) */


/* FULL image + blurred fill (no crop, no black bars) */


/* fill card fully (no side strips / no right cut) */


/* FIX: <figure> default 40px margin was clipping the right of every card */


/* The stepper sets this when it jumps back to the top of the doubled list;
   the jump has to be instant or the whole column visibly rewinds. */


/* theme.css sets `* { animation: none !important; transition-duration: .001ms
   !important }` under prefers-reduced-motion, and Windows turns that
   preference on whenever "Animation effects" is off -- a common default, and
   what froze this column in the first place. The news ticker hit the same
   fault; see .nt-track in theme.css, which answers it the same way and
   explains the reasoning. Only an !important can answer an !important.

   The concession to the setting is a slower slide, not a dead strip: the hold
   between cards is unchanged, so the column still moves and still pauses on
   hover. */


/* Hero slide 2 — the LN banner, filling the frame */
/* The replacement artwork is 3.0 wide against a slider that runs 2.6-3.1, so
   for the first time the two shapes actually agree and it can simply fill the
   slide. `cover` crops 6.7% off each side at the narrow end of that range and
   1.6% off top and bottom at the wide end -- the cityscape and the sky, well
   clear of the L, the N, the portrait and the four cards.

   Everything that used to sit here went with the change: the earlier artwork
   was 16:9, letterboxed against the slider, and needed two gradients standing
   in for the bands either side of it. There are no bands now, so there is
   nothing for a field to continue and no `contain` override to make. The base
   .hero-slide > img rule already covers it, except for the vertical anchor
   below.

   `object-position: 50% 0%` -- the rule that keeps heads in frame on the
   photographic slides -- would pin this to the top and take the crop out of
   the bottom, which is where the four portfolio cards are. Centred instead,
   so what little is cropped comes off the sky and the pavement evenly. */
/* SHOWN WHOLE, NOT FILLED -- at every width, not just on a phone.

   This is a designed banner, 3:1, and both of its ends carry something: the
   party flag at 1.5%..13%, and the four portfolio cards at 18%..76.5%. It
   filled the band before, which crops the sides, and the sums do not leave
   room for both. Between 2.6 and 3.1, where this slider actually runs, a
   centred window takes up to 6.7% off each edge -- past the flag's pole and
   into the flag. Anchoring left would save it and cut the fourth card
   instead: keeping the flag needs the left crop under 1.5%, keeping card 04
   needs the right crop under 23.5%, and below about 2:1 no single anchor
   satisfies both.

   So nothing is cropped. The band is 2.6..3.1 against the artwork's 3.0, so
   what this costs is a few per cent of height at the top and bottom -- and a
   field stands in for it, cream above and the cityscape's brown below, both
   medians of the artwork's own edge rows. The flag reads whole, all four
   cards survive, and Lokesh stays where the designer centred him. */
.hero-slide[data-shot="ln-lion"] > img {
  object-fit: contain !important;
  object-position: center !important;
}
.hero-slide[data-shot="ln-lion"] {
  background: linear-gradient(to bottom,
    #FBF2DF 0%, #FBF2DF 38%, #C7B189 62%, #A08A63 80%, #846D4A 100%);
}

/* hide the corner scroller over the hero so it never covers the LN banner */