:root {
    --rails-gap: 32px;
    --cards-gap: 14px;
    --cards-min-h: 160px;
    --brand-primary: #b8ff3c;
    --brand-secondary: #ff6a3d;
    --brand-bg: #07090f;
    --brand-neon: #b8ff3c;
    --hero-cta: #b8ff3c;
    --anim-speed: 55;
    --anim-intensity: 60;
    --ink: #f4f7fb;
    --muted: #9aa6b8;
    --font-ar: Cairo, sans-serif;
    --font-en: "Space Grotesk", sans-serif;
    --font-body: var(--font-en), var(--font-ar), system-ui, sans-serif;
    --font-display: var(--font-en), var(--font-ar), sans-serif;
    --header-h: 4.75rem;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    max-width: 100%;
    font-family: var(--font-body);
}

button,
input,
select,
textarea,
optgroup,
option {
    font-family: inherit;
}

html[dir="rtl"],
body.is-rtl {
    --font-body: var(--font-ar), var(--font-en), system-ui, sans-serif;
    --font-display: var(--font-ar), var(--font-en), sans-serif;
}

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink);
    background:
        radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--brand-primary) 18%, transparent), transparent 28%),
        radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--brand-secondary) 16%, transparent), transparent 26%),
        var(--brand-bg);
    min-height: 100vh;
    overflow-x: hidden;
    cursor: url('/assets/cursors/star-t.png') 6 2, url('/assets/cursors/star-t.svg') 6 2, auto;
}

a,
button,
[role="button"],
.btn,
.chip,
label[for],
summary,
select,
input[type="checkbox"],
input[type="radio"],
input[type="range"],
input[type="file"],
.media-expand-btn,
.home-talent-like-btn,
.short-like-btn,
.flavor-card,
.home-talent-card,
.talent-like-btn {
    cursor: url('/assets/cursors/star-t-pointer.png') 6 2, url('/assets/cursors/star-t-pointer.svg') 6 2, pointer;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="number"],
input[type="password"],
textarea {
    cursor: text;
}

img, video, iframe, canvas {
    max-width: 100%;
}

img, video { display: block; }
a { color: inherit; text-decoration: none; }

.fx-layer {
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 20;
    overflow: hidden;
}

.fx-off .fx-layer { display: none; }

.fx-shape,
.fx-summer,
.fx-winter,
.fx-autumn,
.fx-spring {
    position: absolute;
    inset: 0;
}

.fx-shape {
    z-index: 2;
}

.fx-summer,
.fx-winter,
.fx-autumn,
.fx-spring {
    z-index: 1;
}

.fx-shape span,
.fx-summer span,
.fx-winter span,
.fx-autumn span,
.fx-spring span {
    position: absolute;
    display: block;
    border-radius: 999px;
    opacity: calc(var(--fx-opacity, 70) / 100);
    animation-duration: calc((140 - var(--anim-speed)) * 40ms + 2.5s);
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    will-change: transform, opacity;
    --fx-size: 1;
    --fx-drift-base: 0px;
    --fx-drift: var(--fx-drift-base, 0px);
    --fx-spin: 180deg;
    --fx-glow: color-mix(in srgb, var(--brand-neon) 45%, transparent);
    width: calc(12px * var(--fx-size));
    height: calc(12px * var(--fx-size));
    pointer-events: none;
}

/* ---- Shape 1 / Shape 2 particles (richer look + distinct motion) ---- */
.fx-shape[data-shape="bubbles"] span {
    width: calc(14px * var(--fx-size));
    height: calc(14px * var(--fx-size));
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--brand-neon) 65%, #fff);
    background:
        radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.85), transparent 42%),
        radial-gradient(circle at 70% 70%, color-mix(in srgb, var(--brand-neon) 28%, transparent), transparent 55%);
    box-shadow:
        inset 0 -2px 4px color-mix(in srgb, var(--brand-neon) 25%, transparent),
        0 0 12px var(--fx-glow);
    bottom: -28px;
    animation-name: fxBubbleRise;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.fx-shape[data-shape="ice"] span {
    width: calc(16px * var(--fx-size));
    height: calc(16px * var(--fx-size));
    border-radius: 3px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(186, 230, 253, 0.35) 45%, rgba(125, 211, 252, 0.5));
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow:
        inset 1px 1px 0 rgba(255, 255, 255, 0.65),
        0 0 14px rgba(125, 211, 252, 0.35);
    top: -32px;
    animation-name: fxIceFall;
    clip-path: polygon(12% 8%, 88% 8%, 100% 28%, 88% 92%, 12% 92%, 0 28%);
}

.fx-shape[data-shape="splash"] span {
    width: calc(7px * var(--fx-size));
    height: calc(18px * var(--fx-size));
    border-radius: 60% 60% 45% 45%;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--brand-secondary) 40%, #fff), var(--brand-secondary));
    box-shadow: 0 0 10px color-mix(in srgb, var(--brand-secondary) 45%, transparent);
    top: 28%;
    animation-name: fxSplashDrop;
}

.fx-shape[data-shape="stars"] span {
    width: calc(14px * var(--fx-size));
    height: calc(14px * var(--fx-size));
    background: var(--brand-neon);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    border-radius: 0;
    top: -28px;
    animation-name: fxStarTwinkle;
    box-shadow: 0 0 14px color-mix(in srgb, var(--brand-neon) 70%, transparent);
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--brand-neon) 55%, transparent));
}

.fx-shape[data-shape="hearts"] span {
    width: calc(13px * var(--fx-size));
    height: calc(12px * var(--fx-size));
    background: linear-gradient(145deg, #ff8fb8, #ff4d7a 55%, #e11d48);
    border-radius: 50% 50% 45% 45%;
    box-shadow: 0 0 12px color-mix(in srgb, #ff4d7a 55%, transparent);
    top: -28px;
    animation-name: fxHeartFloat;
    transform-origin: center bottom;
}

.fx-shape[data-shape="hearts"] span::before,
.fx-shape[data-shape="hearts"] span::after {
    content: none;
}

.fx-shape[data-shape="citrus"] span {
    width: calc(13px * var(--fx-size));
    height: calc(13px * var(--fx-size));
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, #fff7ad 0%, #ffe566 28%, #ff9f1c 72%, #f97316 100%);
    box-shadow:
        0 0 12px color-mix(in srgb, #ffd166 60%, transparent),
        inset -2px -2px 4px rgba(249, 115, 22, 0.35);
    top: -24px;
    animation-name: fxCitrusSpin;
}

.fx-shape[data-shape="snow"] span {
    width: calc(10px * var(--fx-size));
    height: calc(10px * var(--fx-size));
    background: #f8fbff;
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 10px rgba(186, 230, 253, 0.75);
    top: -28px;
    animation-name: fxSnowDrift;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    border-radius: 0;
}

.fx-shape[data-shape="leaves"] span {
    width: calc(16px * var(--fx-size));
    height: calc(11px * var(--fx-size));
    border-radius: 70% 10% 70% 10%;
    background: linear-gradient(135deg, #ffd166, #fb8500 45%, #d62828 90%);
    box-shadow: 0 0 8px color-mix(in srgb, #fb8500 35%, transparent);
    top: -28px;
    animation-name: fxLeafSway;
}

.fx-shape[data-shape="petals"] span {
    width: calc(12px * var(--fx-size));
    height: calc(12px * var(--fx-size));
    border-radius: 70% 0 70% 0;
    background: linear-gradient(140deg, #ff8fab, #ffc2d1 50%, #fff0f5);
    box-shadow: 0 0 10px color-mix(in srgb, #ff8fab 45%, transparent);
    top: -24px;
    animation-name: fxPetalDrift;
}

.fx-shape[data-shape="sparkles"] span {
    width: calc(8px * var(--fx-size));
    height: calc(8px * var(--fx-size));
    border-radius: 2px;
    background: #fff;
    box-shadow:
        0 0 10px color-mix(in srgb, var(--brand-primary) 80%, white),
        0 0 18px color-mix(in srgb, var(--brand-neon) 45%, transparent);
    bottom: -20px;
    animation-name: fxSparkleRise;
    clip-path: polygon(50% 0%, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0 50%, 35% 35%);
}

.fx-shape[data-shape="diamonds"] span {
    width: calc(11px * var(--fx-size));
    height: calc(11px * var(--fx-size));
    background:
        linear-gradient(135deg, #fff, color-mix(in srgb, var(--brand-secondary) 55%, #fff) 40%, var(--brand-secondary));
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    border-radius: 0;
    top: -24px;
    animation-name: fxDiamondFall;
    box-shadow: 0 0 12px color-mix(in srgb, var(--brand-secondary) 50%, transparent);
    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--brand-secondary) 40%, transparent));
}

/* Slot 2 slightly denser / mirrored drift for contrast with shape 1 */
.fx-shape[data-fx-slot="2"] span {
    --fx-drift: calc(var(--fx-drift-base, 0px) * -1);
    animation-duration: calc((140 - var(--anim-speed)) * 44ms + 2.8s);
}

.fx-summer span {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: radial-gradient(circle, #ffe566 0%, #ff9f1c 70%, transparent 100%);
    box-shadow: 0 0 10px color-mix(in srgb, #ffd166 55%, transparent);
    top: -20px;
    animation-name: summerSpark;
}

.fx-winter span {
    width: 8px;
    height: 8px;
    background: #f8fbff;
    border: 1px solid rgba(255,255,255,0.8);
    box-shadow: 0 0 8px rgba(200, 230, 255, 0.7);
    top: -24px;
    animation-name: winterSnow;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    border-radius: 0;
}

.fx-autumn span {
    width: 14px;
    height: 10px;
    border-radius: 60% 10% 60% 10%;
    background: linear-gradient(135deg, #ffb703, #fb8500 55%, #d62828);
    top: -24px;
    animation-name: autumnLeaf;
}

.fx-spring span {
    width: 11px;
    height: 11px;
    border-radius: 60% 0 60% 0;
    background: linear-gradient(140deg, #ff8fab, #ffc2d1 55%, #fff0f5);
    top: -20px;
    animation-name: springPetal;
}

body > *:not(.fx-layer):not(.page-bg):not(.theme-bg-rotate):not(.star-assistant):not(.nav-backdrop):not(.nav-panel):not(.site-header) {
    position: relative;
    z-index: 1;
}
/* Header must sit above other body children so the bar stays clickable and on top */
body > header.site-header {
    z-index: 1000;
}

.page-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    transform-origin: center center;
}

.theme-bg-rotate {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.7s ease;
}

.theme-bg-rotate.is-on {
    opacity: 1;
}

.theme-bg-rotate.is-instant,
.theme-bg-rotate.is-instant .theme-bg-rotate__media,
.theme-bg-rotate.is-instant .theme-bg-rotate__fill {
    transition: none;
}

.theme-bg-rotate__fill {
    position: absolute;
    inset: 0;
    background: var(--brand-bg);
    transition: background-color 0.7s ease, background 0.7s ease;
}

.theme-bg-rotate__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity 0.7s ease;
    display: block;
}

.theme-bg-rotate.is-image .theme-bg-rotate__media {
    opacity: 1;
}

.theme-bg-rotate.is-image .theme-bg-rotate__fill {
    opacity: 0;
}

html.theme-bg-rotate-ink,
html.theme-bg-rotate-ink body {
    color: var(--rotate-ink, var(--ink));
}

html.theme-bg-rotate-ink .cms-text:not(.cms-text--transparent),
html.theme-bg-rotate-ink .site-logo-text,
html.theme-bg-rotate-ink .brand-kicker,
html.theme-bg-rotate-ink .hero h1,
html.theme-bg-rotate-ink .hero-sub,
html.theme-bg-rotate-ink .section-intro,
html.theme-bg-rotate-ink .section-head h2,
html.theme-bg-rotate-ink .shorts-section h2,
html.theme-bg-rotate-ink .footer-brand,
html.theme-bg-rotate-ink .footer-tagline,
html.theme-bg-rotate-ink .footer-nav a,
html.theme-bg-rotate-ink .nav-panel,
html.theme-bg-rotate-ink .nav-panel a,
html.theme-bg-rotate-ink .site-header,
html.theme-bg-rotate-ink .flavor-card,
html.theme-bg-rotate-ink .flavor-copy,
html.theme-bg-rotate-ink .flavor-copy h3,
html.theme-bg-rotate-ink .flavor-copy p,
html.theme-bg-rotate-ink .flavor-copy .personality,
html.theme-bg-rotate-ink .content-card,
html.theme-bg-rotate-ink .content-card__text,
html.theme-bg-rotate-ink .image-strip__card,
html.theme-bg-rotate-ink .image-strip__text,
html.theme-bg-rotate-ink .home-talent-card,
html.theme-bg-rotate-ink .home-winner-card,
html.theme-bg-rotate-ink .short-card,
html.theme-bg-rotate-ink .btn.cms-text {
    --cms-color: var(--rotate-ink, var(--ink));
    --flavor-text: var(--rotate-ink, var(--ink));
    --section-text: var(--rotate-ink, var(--ink));
    --card-text: var(--rotate-ink, var(--ink));
    color: var(--rotate-ink, var(--ink)) !important;
}

.page-bg__media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: calc(var(--page-bg-opacity, 45) / 100);
    transform: scale(calc(var(--media-size, 100) / 100));
    transform-origin: center center;
    filter: none;
    display: block;
}

.page-bg__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--media-tint, var(--brand-bg)) 42%, transparent),
            color-mix(in srgb, var(--brand-bg) 55%, transparent) 55%,
            color-mix(in srgb, var(--brand-bg) 78%, transparent)
        );
    opacity: 0.72;
    pointer-events: none;
}

.page-bg.media-styled {
    --media-size: 100;
}

body.has-page-bg {
    background: var(--brand-bg);
}

.site-header {
    --header-h: 4.75rem;
    position: relative;
    top: auto;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem clamp(1rem, 3vw, 2rem);
    background: color-mix(in srgb, var(--brand-bg) 82%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid color-mix(in srgb, var(--brand-neon) 25%, transparent);
}

body > header.site-header.site-header--pinned,
.site-header--pinned {
    position: fixed;
    top: 0;
    inset-inline: 0;
    width: 100%;
    max-width: 100%;
    z-index: 1000;
}

.site-header--transparent {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
    box-shadow: none;
}

body:has(> .site-header--pinned):not(:has(> .site-header--transparent)) {
    padding-top: var(--header-h, 4.75rem);
}

body:has(> .site-header--pinned.site-header--transparent) .hero {
    min-height: 100vh;
    padding-top: calc(var(--header-h, 4.75rem) + 0.4rem);
}

.logo-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.site-logo-text {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: 0.08em;
    font-size: 1.4rem;
    color: var(--brand-neon);
    text-shadow: 0 0 18px color-mix(in srgb, var(--brand-neon) 55%, transparent);
}

.site-logo { width: 48px; height: 48px; object-fit: contain; }
video.site-logo { background: transparent; }

.main-nav {
    display: none;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    margin-inline-start: auto;
}

.nav-burger {
    appearance: none;
    border: 1px solid color-mix(in srgb, var(--brand-neon) 35%, transparent);
    background: color-mix(in srgb, var(--brand-bg) 70%, #000);
    color: var(--brand-neon);
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.nav-burger:hover {
    background: color-mix(in srgb, var(--brand-neon) 14%, transparent);
    border-color: var(--brand-neon);
}

.nav-burger:focus-visible {
    outline: 2px solid var(--brand-neon);
    outline-offset: 2px;
}

.nav-burger__box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 1.15rem;
}

.nav-burger__bar {
    display: block;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.22s ease, opacity 0.22s ease;
    transform-origin: center;
}

body.nav-open .nav-burger__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

body.nav-open .nav-burger__bar:nth-child(2) {
    opacity: 0;
}

body.nav-open .nav-burger__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(4, 8, 16, 0.55);
    backdrop-filter: blur(2px);
}

.nav-backdrop[hidden] {
    display: none !important;
}

.nav-panel {
    position: fixed;
    top: 0;
    inset-inline-end: 0;
    bottom: 0;
    z-index: 1200;
    width: min(20rem, 86vw);
    padding: 5.25rem 1.15rem 1.5rem;
    background: color-mix(in srgb, var(--brand-bg) 94%, #000);
    border-inline-start: 1px solid color-mix(in srgb, var(--brand-neon) 28%, transparent);
    box-shadow: -18px 0 40px rgba(0, 0, 0, 0.35);
    overflow-y: auto;
    transform: translateX(0);
    animation: nav-panel-in 0.22s ease;
}

html[dir="rtl"] .nav-panel {
    box-shadow: 18px 0 40px rgba(0, 0, 0, 0.35);
    animation-name: nav-panel-in-rtl;
}

.nav-panel[hidden] {
    display: none !important;
}

@keyframes nav-panel-in {
    from {
        opacity: 0.4;
        transform: translateX(1rem);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes nav-panel-in-rtl {
    from {
        opacity: 0.4;
        transform: translateX(-1rem);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.nav-panel__inner {
    display: grid;
    gap: 0.35rem;
}

.nav-panel__link {
    display: block;
    padding: 0.85rem 0.95rem;
    border-radius: 12px;
    font-weight: 700;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease;
}

.nav-panel__link:hover,
.nav-panel__link[aria-current="page"] {
    color: var(--brand-neon);
    background: color-mix(in srgb, var(--brand-neon) 12%, transparent);
}

.nav-panel .nav-games {
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid color-mix(in srgb, var(--brand-neon) 18%, transparent);
}

.nav-panel .nav-games__trigger {
    width: 100%;
    justify-content: flex-start;
    padding: 0.85rem 0.95rem;
    border-radius: 12px;
}

.nav-panel .nav-games__trigger:hover,
.nav-panel .nav-games.is-open > .nav-games__trigger {
    background: color-mix(in srgb, var(--brand-neon) 12%, transparent);
}

body.nav-open {
    overflow: hidden;
}

body.nav-open .site-header {
    z-index: 1300;
}

.nav-games {
    position: relative;
    flex: 0 0 auto;
    z-index: 60;
}

.nav-games__trigger {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font: inherit;
    font-weight: 700;
    color: var(--muted);
    transition: color 0.2s ease;
    white-space: nowrap;
    user-select: none;
}

.nav-games__icon {
    display: block;
    flex: 0 0 auto;
}

.nav-games.is-open > .nav-games__trigger,
.nav-games__trigger:hover {
    color: var(--brand-neon);
}

.nav-games__menu {
    position: fixed;
    min-width: 13rem;
    padding: 0.45rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--brand-bg) 94%, #000);
    border: 1px solid color-mix(in srgb, var(--brand-neon) 28%, transparent);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
    display: grid;
    gap: 0.15rem;
    z-index: 10050;
}

.nav-games__menu[hidden] {
    display: none !important;
}

.nav-games__link {
    display: block;
    padding: 0.6rem 0.8rem;
    border-radius: 10px;
    color: #f4f7fb !important;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
}

.nav-games__link:hover {
    background: color-mix(in srgb, var(--brand-neon) 16%, transparent);
    color: var(--brand-neon) !important;
}

.site-header {
    overflow: visible;
}

.chip, .btn {
    border: 0;
    border-radius: 999px;
    padding: 0.55rem 0.95rem;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.chip { background: #151b2b; color: #fff; }
.chip.ghost { background: transparent; border: 1px solid #334155; }
.chip.neon, .btn.neon {
    background: var(--cta-btn-bg, var(--hero-cta));
    color: #081018;
    box-shadow: 0 0 22px color-mix(in srgb, var(--cta-btn-bg, var(--hero-cta)) 45%, transparent);
}

.hero-actions .btn.neon {
    background: var(--cta-btn-bg, var(--hero-cta));
    box-shadow: 0 0 22px color-mix(in srgb, var(--cta-btn-bg, var(--hero-cta)) 45%, transparent);
}
.btn.ghost {
    background: transparent;
    color: #fff;
    border: 1px solid color-mix(in srgb, var(--brand-neon) 45%, transparent);
}
.chip:hover, .btn:hover { transform: translateY(-2px); }

.hero {
    min-height: calc(100vh - 4.5rem);
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 1rem;
    align-items: center;
    padding: clamp(1.2rem, 4vw, 3rem);
}

.hero--media-center,
.hero--container-center {
    grid-template-columns: 1fr;
    justify-items: center;
}

.hero--media-center .hero-copy,
.hero--container-center .hero-copy {
    text-align: center;
    max-width: 42rem;
}

.hero--media-center .hero-sub,
.hero--container-center .hero-sub {
    margin-inline: auto;
}

.hero--media-center .hero-actions,
.hero--container-center .hero-actions {
    justify-content: center;
}

.hero.hero--media-in-box {
    justify-items: center;
    align-items: center;
}

.hero.hero--media-in-box .hero-media,
.hero.hero--media-in-box .hero-media.hero-media--free-size,
.hero.hero--media-in-box .hero-media.is-hero-fit,
.hero.hero--media-in-box .hero-media.is-hero-natural {
    justify-self: center;
    align-self: center;
    margin-inline: auto;
}

.hero.hero--media-in-box.hero--text-on-media {
    justify-items: center;
    align-items: center;
}

.hero.hero--media-in-box.hero--text-on-media:not(.hero--container-center) .hero-media,
.hero.hero--media-in-box.hero--text-on-media:not(.hero--container-center) .hero-copy {
    justify-self: center;
    align-self: center;
    width: var(--show-w, min(100%, calc(560px * var(--media-size, 100) / 100)));
    max-width: 100%;
}

.hero.hero--media-in-box.hero--text-on-media:not(.hero--container-center) .hero-copy {
    height: var(--show-h, auto);
}

.hero.hero--media-in-box .hero-media.hero-media--free-box .hero-video,
.hero.hero--media-in-box .hero-media.hero-media--free-box .hero-image,
.hero.hero--media-in-box .hero-media.hero-media--in-box.is-hero-natural .hero-video,
.hero.hero--media-in-box .hero-media.hero-media--in-box.is-hero-natural .hero-image {
    object-fit: contain;
    object-position: center center;
}

.home-main > .home-rail.home-rail--hero-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.home-rail--hero-center .rel-layout,
.home-rail--hero-center .rel-layout__mid,
.home-rail--hero-center .rel-layout__anchor {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
}

.home-rail--hero-center .hero {
    flex: 0 1 auto;
}

.hero.hero--container-center {
    width: min(100%, var(--hero-box-w, max-content));
    max-width: 100%;
    margin-inline: auto;
    justify-self: center;
    justify-items: center;
    align-items: center;
    box-sizing: border-box;
}

.hero.hero--container-center.hero--box-h {
    min-height: var(--hero-box-h);
    height: var(--hero-box-h);
}

.home-main > .home-rail.home-rail--hero-full {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    box-sizing: border-box;
}

.home-rail--hero-full .rel-layout,
.home-rail--hero-full .rel-layout__mid,
.home-rail--hero-full .rel-layout__anchor {
    width: 100%;
    max-width: none;
}

.hero.hero--container-full:not(.hero--container-center),
.hero.hero--media-full:not(.hero--container-center) {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    box-sizing: border-box;
}

.hero--container-full {
    padding-inline: 0;
}

.hero--media-full {
    grid-template-columns: 1fr;
    padding-inline: 0;
    overflow: hidden;
}

.hero--media-full.hero--media-round {
    overflow: visible;
}

.hero--bg-transparent {
    background: transparent;
}

.hero--bg-transparent.hero--text-on-media .hero-copy {
    background: none;
}

.hero--text-on-media.hero--media-round .hero-copy {
    border-radius: var(--hero-media-radius, 0px);
}

.hero--media-full:not(.hero--text-on-media) .hero-copy {
    padding-inline: clamp(1.2rem, 4vw, 3rem);
}

.hero--media-full .hero-media,
.hero--media-full .hero-media.is-hero-fit,
.hero--media-full .hero-media.is-hero-natural,
.hero--media-full .hero-media.is-hero-model {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    max-height: none;
    --show-w: 100%;
    justify-self: stretch;
    border-radius: var(--hero-media-radius, 0px);
}

.hero.hero--container-center .hero-media,
.hero.hero--container-center .hero-media.is-hero-fit,
.hero.hero--container-center .hero-media.is-hero-natural,
.hero.hero--container-center .hero-media.is-hero-model,
.hero.hero--container-center.hero--media-full .hero-media,
.hero.hero--container-center.hero--media-full .hero-media.is-hero-fit,
.hero.hero--container-center.hero--media-full .hero-media.is-hero-natural,
.hero.hero--container-center.hero--media-full .hero-media.is-hero-model {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    justify-self: center;
    align-self: center;
    margin-inline: auto;
}

.hero--media-full .hero-media > .hero-video,
.hero--media-full .hero-media > .hero-image,
.hero--media-full .hero-media.is-hero-natural .hero-video,
.hero--media-full .hero-media.is-hero-natural .hero-image,
.hero--media-full .hero-media.hero-media--free-box .hero-video,
.hero--media-full .hero-media.hero-media--free-box .hero-image {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center center;
}

.hero--text-on-media {
    grid-template-columns: 1fr;
    justify-items: stretch;
}

.hero--text-on-media.hero--container-center,
.hero--text-on-media.hero--media-center,
.hero--text-on-media.hero--media-in-box {
    justify-items: center;
}

.hero--text-on-media .hero-media,
.hero--text-on-media .hero-copy {
    grid-column: 1;
    grid-row: 1;
}

.hero--text-on-media .hero-media {
    z-index: 1;
    width: 100%;
    max-height: none;
    justify-self: stretch;
}

.hero--text-on-media:not(.hero--media-full):not(.hero--container-center) .hero-media {
    justify-self: center;
    width: var(--show-w, min(100%, calc(560px * var(--media-size, 100) / 100)));
}

.hero--text-on-media.hero--container-center .hero-media,
.hero--text-on-media.hero--container-center .hero-copy {
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
    align-self: stretch;
}

.hero--text-on-media .hero-copy {
    position: relative;
    z-index: 2;
    align-self: stretch;
    justify-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-sizing: border-box;
    max-width: none;
    width: 100%;
    padding: clamp(1.25rem, 4vw, 2.8rem);
    background: linear-gradient(to top, color-mix(in srgb, #05070c 78%, transparent), color-mix(in srgb, #05070c 18%, transparent) 48%, transparent 76%);
    pointer-events: none;
}

.hero--text-on-media:not(.hero--media-full):not(.hero--container-center) .hero-copy {
    justify-self: center;
    width: var(--show-w, min(100%, calc(560px * var(--media-size, 100) / 100)));
    max-width: 100%;
}

.hero--text-on-media .hero-copy > * {
    pointer-events: auto;
}

.hero--text-on-media.hero--media-center .hero-copy,
.hero--text-on-media.hero--container-center .hero-copy {
    text-align: center;
    align-items: center;
    justify-content: center;
}

.hero--text-on-media.hero--media-center .hero-sub,
.hero--text-on-media.hero--container-center .hero-sub {
    margin-inline: auto;
}

.hero--text-on-media.hero--media-center .hero-actions,
.hero--text-on-media.hero--container-center .hero-actions {
    justify-content: center;
}

.hero--text-on-media .hero-sub {
    max-width: 46ch;
}

.hero-media {
    --media-size: 100;
    --crop-x: 0;
    --crop-y: 0;
    --crop-w: 1;
    --crop-h: 1;
    --nat-w: 16;
    --nat-h: 9;
    --show-w: min(100%, calc(560px * var(--media-size, 100) / 100));
    --show-h: auto;
    position: relative;
    display: block;
    width: var(--show-w);
    max-width: 100%;
    height: var(--show-h);
    min-height: 0;
    margin: 0;
    padding: 0;
    justify-self: center;
    align-self: center;
    background: transparent !important;
    border: none;
    box-shadow: none;
    border-radius: var(--hero-media-radius, 0px);
    overflow: hidden;
    line-height: 0;
    transform: none;
}

.hero-media.hero-media--free-size {
    width: var(--show-w);
    max-width: 100%;
    height: var(--show-h, auto);
    max-height: none;
    box-sizing: border-box;
}

.hero-media.hero-media--free-box {
    overflow: hidden;
}

.hero-media.hero-media--free-box.is-hero-natural .hero-video,
.hero-media.hero-media--free-box.is-hero-natural .hero-image,
.hero-media.hero-media--free-box.is-hero-model .hero-image,
.hero-media.hero-media--free-box .hero-model.store-model {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center center;
}

.hero--media-full .hero-media.hero-media--free-size,
.hero--media-full .hero-media.hero-media--free-size.is-hero-fit,
.hero--media-full .hero-media.hero-media--free-size.is-hero-natural,
.hero--media-full .hero-media.hero-media--free-size.is-hero-model {
    width: 100%;
    max-width: none;
    height: var(--show-h, auto);
    max-height: none;
}

.hero.hero--container-center .hero-media.hero-media--free-size,
.hero.hero--container-center.hero--media-full .hero-media.hero-media--free-size,
.hero.hero--container-center.hero--media-full .hero-media.hero-media--free-size.is-hero-fit,
.hero.hero--container-center.hero--media-full .hero-media.hero-media--free-size.is-hero-natural,
.hero.hero--container-center.hero--media-full .hero-media.hero-media--free-size.is-hero-model {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
}

.hero--text-on-media:not(.hero--media-full) .hero-media.hero-media--free-size {
    width: var(--show-w);
    max-width: 100%;
}

.hero-media--framed {
    border: 1px solid color-mix(in srgb, var(--brand-neon) 30%, transparent);
    box-shadow: 0 0 50px color-mix(in srgb, var(--brand-primary) 18%, transparent);
    border-radius: var(--hero-media-radius, 2rem);
}

.hero-media--round,
.hero-media--round.is-hero-natural {
    overflow: hidden;
    border-radius: var(--hero-media-radius, 0px);
}

.hero-media--round > .hero-video,
.hero-media--round > .hero-image {
    border-radius: inherit;
}

/* Crop shape masks (applied when crop is enabled) */
.hero-media--shape-rounded {
    border-radius: var(--hero-media-radius, 1.75rem);
}
.hero-media--shape-circle {
    border-radius: 50%;
    -webkit-clip-path: circle(50% at 50% 50%);
    clip-path: circle(50% at 50% 50%);
}
.hero-media--shape-pill {
    border-radius: var(--hero-media-radius, 999px);
}
.hero-media--shape-diamond {
    border-radius: 0;
    -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.hero-media--shape-hexagon {
    border-radius: 0;
    -webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.hero-media--shape-star {
    --hero-star-clip: polygon(
        50% 0%,
        61% 35%,
        98% 35%,
        68% 57%,
        79% 91%,
        50% 70%,
        21% 91%,
        32% 57%,
        2% 35%,
        39% 35%
    );
    border-radius: 0;
    -webkit-clip-path: var(--hero-star-clip);
    clip-path: var(--hero-star-clip);
}
.hero-media--shape-circle.hero-media--framed,
.hero-media--shape-diamond.hero-media--framed,
.hero-media--shape-hexagon.hero-media--framed,
.hero-media--shape-star.hero-media--framed {
    border-radius: 0;
}

.hero-media--tint .hero-image,
.hero-media--tint .hero-video {
    box-shadow: 0 0 40px color-mix(in srgb, var(--media-tint, #fff) 28%, transparent);
}

.hero-video,
.hero-image {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    object-fit: contain;
    object-position: center center;
    background: transparent !important;
    box-shadow: none;
}

/* After JS measures media: show crop window; media fills via offset scale */
.hero-media.is-hero-fit .hero-video,
.hero-media.is-hero-fit .hero-image {
    position: absolute;
    /* left/top (not transform) so enter/idle animations can still use transform */
    top: calc(var(--crop-y, 0) / var(--crop-h, 1) * -100%);
    left: calc(var(--crop-x, 0) / var(--crop-w, 1) * -100%);
    width: calc(100% / var(--crop-w, 1));
    height: calc(100% / var(--crop-h, 1));
    max-width: none;
    max-height: none;
    object-fit: fill;
    object-position: center center;
}

/* Crop disabled: full media from URL, no crop window / auto-matte */
.hero-media.is-hero-natural {
    overflow: visible;
}

.hero-media.is-hero-natural .hero-video,
.hero-media.is-hero-natural .hero-image {
    position: static;
    inset: auto;
    top: auto;
    left: auto;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center center;
}

/* Corner rounding must clip even when crop is off (overflow:visible) or media is a <video>. */
.hero-media.hero-media--round,
.hero-media.hero-media--round.is-hero-fit,
.hero-media.hero-media--round.is-hero-natural,
.hero-media.hero-media--round.is-hero-model,
.hero--media-full .hero-media.hero-media--round,
.hero--media-full .hero-media.hero-media--round.is-hero-fit,
.hero--media-full .hero-media.hero-media--round.is-hero-natural,
.hero--media-full .hero-media.hero-media--round.is-hero-model {
    overflow: hidden !important;
    border-radius: var(--hero-media-radius, 0px) !important;
}

.hero-media.hero-media--round:not(.hero-media--shape-circle):not(.hero-media--shape-diamond):not(.hero-media--shape-hexagon):not(.hero-media--shape-star),
.hero-media.hero-media--round:not(.hero-media--shape-circle):not(.hero-media--shape-diamond):not(.hero-media--shape-hexagon):not(.hero-media--shape-star).is-hero-natural,
.hero-media.hero-media--round:not(.hero-media--shape-circle):not(.hero-media--shape-diamond):not(.hero-media--shape-hexagon):not(.hero-media--shape-star).is-hero-fit {
    -webkit-clip-path: inset(0 round var(--hero-media-radius, 0px));
    clip-path: inset(0 round var(--hero-media-radius, 0px));
}

.hero-media.hero-media--round:not(.hero-media--shape-circle):not(.hero-media--shape-diamond):not(.hero-media--shape-hexagon):not(.hero-media--shape-star) > .hero-video,
.hero-media.hero-media--round:not(.hero-media--shape-circle):not(.hero-media--shape-diamond):not(.hero-media--shape-hexagon):not(.hero-media--shape-star) > .hero-image {
    border-radius: var(--hero-media-radius, 0px);
}

.hero-media.hero-media--model,
.hero-media.is-hero-model {
    overflow: hidden;
}

.hero-media .hero-model.store-model,
.hero-media .store-model.hero-image {
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
    border-radius: inherit;
}

.media-anim--fade-in {
    animation: mediaFadeIn calc((140 - var(--anim-speed)) * 14ms + 700ms) ease both;
}
.media-anim--slide-up {
    animation: mediaSlideUp calc((140 - var(--anim-speed)) * 14ms + 700ms) ease both;
}
.media-anim--slide-down {
    animation: mediaSlideDownIn calc((140 - var(--anim-speed)) * 14ms + 700ms) ease both;
}
.media-anim--slide-left {
    animation: mediaSlideLeftIn calc((140 - var(--anim-speed)) * 14ms + 700ms) ease both;
}
.media-anim--slide-right {
    animation: mediaSlideRightIn calc((140 - var(--anim-speed)) * 14ms + 700ms) ease both;
}
.media-anim--float-in {
    animation: mediaFloatIn calc((140 - var(--anim-speed)) * 16ms + 780ms) ease both;
}
.media-anim--scale-pop {
    animation: mediaScalePop calc((140 - var(--anim-speed)) * 14ms + 700ms) ease both;
}
.media-anim--zoom-in {
    animation: mediaScalePop calc((140 - var(--anim-zoom-speed, var(--anim-speed))) * 14ms + 700ms) ease both;
}
.media-anim--bounce-in {
    animation: mediaBounceIn calc((140 - var(--anim-speed)) * 18ms + 900ms) cubic-bezier(.22,1.4,.36,1) both;
}
.media-anim--flip-in {
    animation: mediaFlipIn calc((140 - var(--anim-speed)) * 16ms + 820ms) ease both;
}
.media-anim--spin-in {
    animation: mediaSpinIn calc((140 - var(--anim-speed)) * 16ms + 860ms) ease both;
}
.media-anim--wipe-right {
    animation: mediaWipeRight calc((140 - var(--anim-speed)) * 14ms + 720ms) ease both;
}
.media-anim--wipe-up {
    animation: mediaWipeUp calc((140 - var(--anim-speed)) * 14ms + 720ms) ease both;
}
.media-anim--blur-in {
    animation: mediaBlurIn calc((140 - var(--anim-speed)) * 14ms + 740ms) ease both;
}
.media-anim--expand {
    animation: mediaExpandIn calc((140 - var(--anim-speed)) * 14ms + 740ms) ease both;
}
.media-anim--rotate {
    animation: mediaRotateIn calc((140 - var(--anim-speed)) * 14ms + 760ms) ease both;
}
.media-anim--fast-appear {
    animation: mediaFastAppear calc((140 - var(--anim-speed)) * 2ms + 90ms) ease-out both;
}
.media-anim--fast-zoom {
    animation: mediaFastZoom calc((140 - var(--anim-speed)) * 2ms + 110ms) cubic-bezier(.18,1.45,.32,1) both;
}
.media-anim--fast-spin {
    animation: mediaFastSpin calc((140 - var(--anim-speed)) * 2ms + 140ms) ease-out both;
}
.media-anim--float {
    animation: mediaFloat calc((140 - var(--anim-speed)) * 28ms + 3s) ease-in-out infinite alternate;
}
.media-anim--pulse {
    animation: mediaPulse calc((140 - var(--anim-speed)) * 24ms + 2.4s) ease-in-out infinite;
}
.media-anim--glow {
    animation: mediaGlow calc((140 - var(--anim-speed)) * 30ms + 2.8s) ease-in-out infinite alternate;
}
.media-anim--ken-burns {
    animation: parallaxDrift calc((140 - var(--anim-speed)) * 80ms + 8s) ease-in-out infinite alternate;
}
.media-anim--bob {
    animation: mediaBob calc((140 - var(--anim-speed)) * 28ms + 2.8s) ease-in-out infinite;
}
.media-anim--sway {
    animation: mediaSway calc((140 - var(--anim-speed)) * 32ms + 3.4s) ease-in-out infinite alternate;
}
.media-anim--spin {
    animation: mediaSpin calc((140 - var(--anim-speed)) * 40ms + 4s) linear infinite;
}
.media-anim--shake {
    animation: mediaShake calc((140 - var(--anim-speed)) * 18ms + 1.1s) ease-in-out infinite;
}
.media-anim--teeter {
    animation: mediaTeeter calc((140 - var(--anim-speed)) * 28ms + 2.6s) ease-in-out infinite alternate;
}
.media-anim--grow-shrink {
    animation: mediaGrowShrink calc((140 - var(--anim-speed)) * 30ms + 2.8s) ease-in-out infinite;
}
.media-anim--flash {
    animation: mediaFlash calc((140 - var(--anim-speed)) * 22ms + 1.8s) ease-in-out infinite;
}

.hero [data-motion-enter-speed].media-anim,
.hero [data-motion-enter-speed][class*="media-anim--"],
.hero [data-motion-enter-speed].media-exit,
.hero [data-motion-enter-speed][class*="media-exit--"] {
    animation-duration: var(--anim-ms) !important;
}

.social-links.media-anim--pulse .social-link {
    animation: mediaPulse calc((140 - var(--anim-speed)) * 24ms + 2.4s) ease-in-out infinite;
}
.social-links.media-anim--float .social-link {
    animation: mediaFloat calc((140 - var(--anim-speed)) * 28ms + 3s) ease-in-out infinite alternate;
}
.social-links.media-anim--glow .social-link {
    animation: mediaGlow calc((140 - var(--anim-speed)) * 30ms + 2.8s) ease-in-out infinite alternate;
}
.social-links.media-anim--fade-in .social-link,
.social-links.media-anim--slide-up .social-link,
.social-links.media-anim--scale-pop .social-link,
.social-links.media-anim--rotate .social-link,
.social-links.media-anim--fast-appear .social-link,
.social-links.media-anim--fast-zoom .social-link,
.social-links.media-anim--fast-spin .social-link {
    animation: mediaFadeIn calc((140 - var(--anim-speed)) * 14ms + 700ms) ease both;
}
.social-links.media-anim--slide-up .social-link { animation-name: mediaSlideUp; }
.social-links.media-anim--scale-pop .social-link { animation-name: mediaScalePop; }
.social-links.media-anim--rotate .social-link { animation-name: mediaRotateIn; }
.social-links.media-anim--fast-appear .social-link {
    animation-name: mediaFastAppear;
    animation-duration: calc((140 - var(--anim-speed)) * 2ms + 90ms);
    animation-timing-function: ease-out;
}
.social-links.media-anim--fast-zoom .social-link {
    animation-name: mediaFastZoom;
    animation-duration: calc((140 - var(--anim-speed)) * 2ms + 110ms);
    animation-timing-function: cubic-bezier(.18,1.45,.32,1);
}
.social-links.media-anim--fast-spin .social-link {
    animation-name: mediaFastSpin;
    animation-duration: calc((140 - var(--anim-speed)) * 2ms + 140ms);
    animation-timing-function: ease-out;
}
.social-links.media-anim .social-link:nth-child(2) { animation-delay: 0.08s; }
.social-links.media-anim .social-link:nth-child(3) { animation-delay: 0.16s; }
.social-links.media-anim .social-link:nth-child(4) { animation-delay: 0.24s; }
.social-links.media-anim .social-link:nth-child(5) { animation-delay: 0.32s; }

@keyframes mediaFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes mediaSlideUp {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: none; }
}
@keyframes mediaSlideDownIn {
    from { opacity: 0; transform: translateY(-28px); }
    to { opacity: 1; transform: none; }
}
@keyframes mediaSlideLeftIn {
    from { opacity: 0; transform: translateX(42px); }
    to { opacity: 1; transform: none; }
}
@keyframes mediaSlideRightIn {
    from { opacity: 0; transform: translateX(-42px); }
    to { opacity: 1; transform: none; }
}
@keyframes mediaFloatIn {
    from { opacity: 0; transform: translateY(36px) scale(0.96); }
    to { opacity: 1; transform: none; }
}
@keyframes mediaScalePop {
    from { opacity: 0; transform: scale(0.86); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes mediaBounceIn {
    0% { opacity: 0; transform: translateY(48px) scale(0.9); }
    60% { opacity: 1; transform: translateY(-10px) scale(1.03); }
    100% { opacity: 1; transform: none; }
}
@keyframes mediaFlipIn {
    from { opacity: 0; transform: perspective(700px) rotateY(-75deg); }
    to { opacity: 1; transform: none; }
}
@keyframes mediaSpinIn {
    from { opacity: 0; transform: rotate(-120deg) scale(0.7); }
    to { opacity: 1; transform: none; }
}
@keyframes mediaWipeRight {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
}
@keyframes mediaWipeUp {
    from { clip-path: inset(100% 0 0 0); }
    to { clip-path: inset(0 0 0 0); }
}
@keyframes mediaBlurIn {
    from { opacity: 0; filter: blur(12px); transform: scale(1.04); }
    to { opacity: 1; filter: none; transform: none; }
}
@keyframes mediaExpandIn {
    from { opacity: 0; transform: scaleX(0.2); }
    to { opacity: 1; transform: none; }
}
@keyframes mediaRotateIn {
    from { opacity: 0; transform: rotate(-8deg) scale(0.94); }
    to { opacity: 1; transform: none; }
}
@keyframes mediaFastAppear {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes mediaFastZoom {
    from { opacity: 0; transform: scale(0.28); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes mediaFastSpin {
    from { opacity: 0; transform: rotate(-280deg) scale(0.45); }
    to { opacity: 1; transform: none; }
}
@keyframes mediaFloat {
    from { transform: translateY(0); }
    to { transform: translateY(-8px); }
}
@keyframes mediaPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
@keyframes mediaGlow {
    from { filter: drop-shadow(0 0 0 transparent); }
    to { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--brand-neon) 55%, transparent)); }
}
@keyframes mediaBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}
@keyframes mediaSway {
    from { transform: rotate(-4deg); }
    to { transform: rotate(4deg); }
}
@keyframes mediaSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes mediaShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}
@keyframes mediaTeeter {
    from { transform: rotate(-6deg) translateY(0); }
    to { transform: rotate(6deg) translateY(-4px); }
}
@keyframes mediaGrowShrink {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}
@keyframes mediaFlash {
    0%, 100% { opacity: 1; filter: brightness(1); }
    50% { opacity: 0.72; filter: brightness(1.35); }
}

body.fx-off .media-anim,
body.fx-off .media-exit,
body.fx-off .media-anim .social-link {
    animation: none !important;
    filter: none !important;
    transform: none !important;
}

.motion-seq.is-motion-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    animation: none !important;
}

.media-exit--fade-out {
    animation: mediaFadeOut calc((140 - var(--anim-speed)) * 14ms + 700ms) ease forwards;
}
.media-exit--slide-down {
    animation: mediaSlideDown calc((140 - var(--anim-speed)) * 14ms + 700ms) ease forwards;
}
.media-exit--slide-up-out {
    animation: mediaSlideUpOut calc((140 - var(--anim-speed)) * 14ms + 700ms) ease forwards;
}
.media-exit--slide-out {
    animation: mediaSlideOut calc((140 - var(--anim-speed)) * 14ms + 700ms) ease forwards;
}
.media-exit--slide-right-out {
    animation: mediaSlideRightOut calc((140 - var(--anim-speed)) * 14ms + 700ms) ease forwards;
}
.media-exit--scale-out,
.media-exit--zoom-out {
    animation: mediaScaleOut calc((140 - var(--anim-speed)) * 14ms + 700ms) ease forwards;
}
.media-exit--bounce-out {
    animation: mediaBounceOut calc((140 - var(--anim-speed)) * 16ms + 820ms) ease forwards;
}
.media-exit--flip-out {
    animation: mediaFlipOut calc((140 - var(--anim-speed)) * 16ms + 780ms) ease forwards;
}
.media-exit--spin-out {
    animation: mediaSpinOut calc((140 - var(--anim-speed)) * 16ms + 800ms) ease forwards;
}
.media-exit--wipe-out {
    animation: mediaWipeOut calc((140 - var(--anim-speed)) * 14ms + 720ms) ease forwards;
}
.media-exit--blur-out {
    animation: mediaBlurOut calc((140 - var(--anim-speed)) * 14ms + 700ms) ease forwards;
}
.media-exit--collapse {
    animation: mediaCollapseOut calc((140 - var(--anim-speed)) * 14ms + 720ms) ease forwards;
}
.media-exit--rotate-out {
    animation: mediaRotateOut calc((140 - var(--anim-speed)) * 14ms + 760ms) ease forwards;
}

@keyframes mediaFadeOut {
    from { opacity: 1; }
    to { opacity: 0; transform: translateY(0); }
}
@keyframes mediaSlideDown {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(42px); }
}
@keyframes mediaSlideUpOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-42px); }
}
@keyframes mediaSlideOut {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(-42px); }
}
@keyframes mediaSlideRightOut {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(42px); }
}
@keyframes mediaScaleOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.84); }
}
@keyframes mediaBounceOut {
    0% { opacity: 1; transform: none; }
    30% { transform: translateY(-12px) scale(1.04); }
    100% { opacity: 0; transform: translateY(40px) scale(0.9); }
}
@keyframes mediaFlipOut {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: perspective(700px) rotateY(80deg); }
}
@keyframes mediaSpinOut {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: rotate(140deg) scale(0.7); }
}
@keyframes mediaWipeOut {
    from { clip-path: inset(0 0 0 0); }
    to { clip-path: inset(0 0 0 100%); }
}
@keyframes mediaBlurOut {
    from { opacity: 1; filter: none; }
    to { opacity: 0; filter: blur(12px); }
}
@keyframes mediaCollapseOut {
    from { opacity: 1; transform: scaleX(1); }
    to { opacity: 0; transform: scaleX(0.15); }
}
@keyframes mediaRotateOut {
    from { opacity: 1; transform: rotate(0deg) translateY(0); }
    to { opacity: 0; transform: rotate(7deg) translateY(28px); }
}

.cms-text {
    display: inline-block;
    max-width: 100%;
    color: var(--cms-color, inherit);
}

.site-logo-text.cms-text,
.brand-kicker.cms-text,
.hero h1.cms-text,
.hero-sub.cms-text,
.section-intro.cms-text,
.shorts-section h2.cms-text,
.section-head h2.cms-text,
.footer-brand .cms-text,
.btn.cms-text {
    color: var(--cms-color) !important;
}

.cms-text.cms-text--bold {
    font-weight: 800 !important;
}

.cms-text.cms-text--italic {
    font-style: italic !important;
}

.cms-text.cms-text--transparent {
    color: transparent !important;
}

.media-styled.media-styled--transparent {
    --media-tint: transparent;
}

.media-styled {
    --media-size: 100;
    --media-tint: #ffffff;
}

.logo-wrap.media-styled {
    scale: calc(var(--media-size) / 100);
    transform-origin: center;
}

.logo-wrap.media-styled .site-logo,
.logo-wrap.media-styled .site-logo-text {
    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--media-tint) 40%, transparent));
}

.hero-image.media-styled,
.hero-video.media-styled {
    margin: 0;
    box-shadow: none;
}

.social-links.media-styled {
    scale: calc(var(--media-size) / 100);
    transform-origin: center;
}

.social-links.media-styled .social-link {
    border-color: color-mix(in srgb, var(--media-tint) 55%, transparent);
    color: var(--media-tint);
}

h1.cms-text,
h2.cms-text,
h3.cms-text,
p.cms-text,
.brand-kicker.cms-text,
.hero-sub.cms-text,
.section-intro.cms-text,
.site-logo-text.cms-text,
.btn.cms-text {
    --cms-size: 100;
}

h1.cms-text,
h2.cms-text,
h3.cms-text,
p.cms-text,
.brand-kicker.cms-text,
.hero-sub.cms-text,
.section-intro.cms-text,
.site-logo-text.cms-text {
    display: inline-block;
}

.btn.cms-text {
    display: inline-flex;
}

/* Admin "Size (%)" scales each text from its design base (100 = default). */
.site-logo-text.cms-text {
    font-size: calc(1.4rem * var(--cms-size) / 100);
}

.brand-kicker.cms-text {
    font-size: calc(0.85rem * var(--cms-size) / 100);
}

.hero h1.cms-text {
    font-size: calc(clamp(2.2rem, 6vw, 4.4rem) * var(--cms-size) / 100);
}

.hero-sub.cms-text,
.footer-brand p.cms-text {
    font-size: calc(1.05rem * var(--cms-size) / 100);
}

.shorts-section h2.cms-text,
.section-head h2.cms-text,
h2.cms-text {
    font-size: calc(1.6rem * var(--cms-size) / 100);
}

.btn.cms-text {
    font-size: calc(1rem * var(--cms-size) / 100);
}

.section-intro {
    margin: 0 0 1rem;
    color: var(--muted);
    max-width: 40rem;
}

.hero-glow {
    position: absolute;
    inset: auto 10% -20% 10%;
    height: 40%;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--brand-neon) 45%, transparent), transparent 70%);
    filter: blur(20px);
}

.hero-media > .hero-video,
.hero-media > .hero-image {
    z-index: 1;
}

.hero-media.is-hero-fit > .hero-video,
.hero-media.is-hero-fit > .hero-image {
    position: absolute;
}

.brand-kicker {
    margin: 0;
    font-family: var(--font-display);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brand-neon);
    font-size: 0.85rem;
}

.hero h1 {
    margin: 0.4rem 0 0;
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 6vw, 4.4rem);
    line-height: 1.02;
    text-transform: uppercase;
}

.hero-sub {
    margin: 0.9rem 0 0;
    max-width: 38ch;
    color: var(--muted);
    line-height: 1.65;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.2rem;
}

.hero .hero-copy.hero-copy--align-left,
.hero--media-center:not(.hero--media-full) .hero-copy.hero-copy--align-left,
.hero--text-on-media.hero--media-center .hero-copy.hero-copy--align-left {
    text-align: left;
}

.hero .hero-copy.hero-copy--align-center,
.hero--media-center:not(.hero--media-full) .hero-copy.hero-copy--align-center,
.hero--text-on-media.hero--media-center .hero-copy.hero-copy--align-center {
    text-align: center;
}

.hero .hero-copy.hero-copy--align-right,
.hero--media-center:not(.hero--media-full) .hero-copy.hero-copy--align-right,
.hero--text-on-media.hero--media-center .hero-copy.hero-copy--align-right {
    text-align: right;
}

.hero .hero-copy.hero-copy--align-left .hero-sub,
.hero--media-center:not(.hero--media-full) .hero-copy.hero-copy--align-left .hero-sub,
.hero--text-on-media.hero--media-center .hero-copy.hero-copy--align-left .hero-sub {
    margin-left: 0;
    margin-right: auto;
}

.hero .hero-copy.hero-copy--align-center .hero-sub,
.hero--media-center:not(.hero--media-full) .hero-copy.hero-copy--align-center .hero-sub,
.hero--text-on-media.hero--media-center .hero-copy.hero-copy--align-center .hero-sub {
    margin-inline: auto;
}

.hero .hero-copy.hero-copy--align-right .hero-sub,
.hero--media-center:not(.hero--media-full) .hero-copy.hero-copy--align-right .hero-sub,
.hero--text-on-media.hero--media-center .hero-copy.hero-copy--align-right .hero-sub {
    margin-left: auto;
    margin-right: 0;
}

.hero .hero-copy.hero-copy--align-left .hero-actions,
.hero--media-center:not(.hero--media-full) .hero-copy.hero-copy--align-left .hero-actions,
.hero--text-on-media.hero--media-center .hero-copy.hero-copy--align-left .hero-actions {
    justify-content: flex-start;
}

.hero .hero-copy.hero-copy--align-center .hero-actions,
.hero--media-center:not(.hero--media-full) .hero-copy.hero-copy--align-center .hero-actions,
.hero--text-on-media.hero--media-center .hero-copy.hero-copy--align-center .hero-actions {
    justify-content: center;
}

.hero .hero-copy.hero-copy--align-right .hero-actions,
.hero--media-center:not(.hero--media-full) .hero-copy.hero-copy--align-right .hero-actions,
.hero--text-on-media.hero--media-center .hero-copy.hero-copy--align-right .hero-actions {
    justify-content: flex-end;
}

.empty-state {
    padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 2.5rem);
}

.carousel-section, .shorts-section {
    margin-block: 0;
    padding-block: 0;
    padding-inline: 0;
    overflow: visible;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* Exact vertical space between homepage rails. */
.home-main {
    display: flex;
    flex-direction: column;
    row-gap: var(--rails-gap, 32px);
    padding-block-end: 0;
}

.home-main > * {
    flex: 0 0 auto;
    min-width: 0;
    margin-block: 0;
}

.home-main > .home-rail {
    margin-block: 0 !important;
    box-sizing: border-box;
}

.home-main > .home-rail:first-child {
    padding-block-start: var(--rail-before, 0px);
}

.home-main > .home-rail:not(:first-child) {
    /* Default slider = row-gap. Per-rail “space before” adds the extra above that default. */
    padding-block-start: max(0px, calc(var(--rail-before, var(--rails-gap, 0px)) - var(--rails-gap, 0px)));
}

.home-main > .home-rail[data-home-rail="content_cards"],
.home-main > .home-rail[data-home-rail="content_cards_2"] {
    position: relative;
    z-index: 2;
}

.carousel-section > .section-head,
.shorts-section > .section-head,
.trends-section > .section-head,
.home-talents-section > .section-head,
.home-winners-section > .section-head {
    width: 100%;
    box-sizing: border-box;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
}

/* —— Tilted moving image strip —— */
.image-strip {
    --strip-tilt: -5deg;
    --strip-height: 140px;
    --strip-gap: 14px;
    --strip-duration: 28s;
    --strip-color: #b8ff3c;
    --strip-overhang-fallback: 0px;
    position: relative;
    z-index: 0;
    margin-block: 0;
    margin-inline: 0;
    /* Keep rotated photos inside this box so rail spacing stays visible. */
    padding-block: var(--strip-overhang-fallback, 0px);
    padding-block: max(
        var(--strip-overhang-fallback, 0px),
        calc((
            sin(abs(var(--strip-tilt, 0deg))) * min(48vw, 560px)
            + cos(abs(var(--strip-tilt, 0deg))) * var(--strip-height, 140px)
            - var(--strip-height, 140px)
        ) / 2)
    );
    overflow: visible;
    perspective: 1200px;
}

.image-strip__viewport {
    overflow: hidden;
    width: 100%;
    touch-action: pan-y;
    overscroll-behavior-x: contain;
    padding-block: 0.35rem;
    mask-image: linear-gradient(
        90deg,
        transparent 0%,
        #000 6%,
        #000 94%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0%,
        #000 6%,
        #000 94%,
        transparent 100%
    );
    transform: rotate(var(--strip-tilt));
    transform-origin: center center;
    will-change: transform;
}

.image-strip[data-manual-drag="1"] .image-strip__viewport {
    cursor: grab;
}

.image-strip__track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--strip-gap);
    width: max-content;
    direction: ltr;
    will-change: transform;
}

.image-strip:not(.image-strip--js) .image-strip__track {
    animation: imageStripScroll var(--strip-duration) linear infinite;
}

.image-strip__set {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--strip-gap);
    padding-inline-end: var(--strip-gap);
}

.image-strip--reverse:not(.image-strip--js) .image-strip__track {
    animation-direction: reverse;
}

.image-strip--pause-hover:not(.image-strip--js):hover .image-strip__track,
.image-strip--pause-hover:not(.image-strip--js):focus-within .image-strip__track {
    animation-play-state: paused;
}

.image-strip--js .image-strip__track {
    animation: none !important;
}

.image-strip__item {
    margin: 0;
    flex: 0 0 auto;
    height: var(--strip-height);
    width: auto;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--strip-color, var(--brand-neon)) 45%, transparent);
    background: color-mix(in srgb, var(--strip-color, #000) 22%, #000 38%);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--strip-color, #000) 28%, transparent);
    cursor: pointer;
    touch-action: pan-y;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.image-strip--rounded .image-strip__item {
    border-radius: 0.85rem;
}

.image-strip--transparent {
    background: transparent;
}

.image-strip--transparent .image-strip__viewport {
    background: transparent;
}

.image-strip--transparent .image-strip__item {
    background: transparent;
    border-color: color-mix(in srgb, var(--strip-color, var(--brand-neon)) 40%, transparent);
    box-shadow: 0 0 18px color-mix(in srgb, var(--strip-color, var(--brand-neon)) 18%, transparent);
}

.image-strip__item img,
.image-strip__item video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.15), filter 0.35s ease;
}

.image-strip__card {
    --card-w: 220px;
    --card-h: 160px;
    --card-bg: #111827;
    --card-text: #f4f7fb;
    --cms-size: 100;
    --card-font: var(--font-body);
    --card-align: start;
    position: relative;
    flex: 0 0 auto;
    width: var(--card-w);
    min-height: max(var(--card-h), var(--strip-height));
    height: var(--card-h);
    display: grid;
    align-items: stretch;
    overflow: hidden;
    color: var(--card-text);
    background: color-mix(in srgb, #000 28%, transparent);
    box-shadow: 0 10px 28px color-mix(in srgb, #000 35%, transparent);
    cursor: pointer;
    touch-action: manipulation;
    transition:
        transform 0.35s cubic-bezier(0.2, 0.9, 0.25, 1.1),
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.image-strip__card.is-rounded,
.image-strip--rounded .image-strip__card {
    border-radius: 0.85rem;
}

.image-strip__card--boxed:not(.image-strip__card--bg-transparent) {
    background: var(--card-bg);
}

.image-strip__card--bg-transparent {
    background: transparent;
}

.image-strip__card--bordered {
    border: 1px solid color-mix(in srgb, var(--brand-neon) 28%, transparent);
}

.image-strip__card--only,
.image-strip__card--background {
    grid-template: 1fr / 1fr;
}

.image-strip__card--left {
    grid-template-columns: 0.95fr 1.05fr;
    grid-template-rows: 1fr;
}

.image-strip__card--right {
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-rows: 1fr;
}

.image-strip__card--top {
    grid-template-rows: 0.9fr 1.1fr;
    grid-template-columns: 1fr;
}

.image-strip__card--bottom {
    grid-template-rows: 1.1fr 0.9fr;
    grid-template-columns: 1fr;
}

.image-strip__media {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.image-strip__media--fill {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.image-strip__card--left .image-strip__media--side { grid-column: 1; grid-row: 1; }
.image-strip__card--left .image-strip__text { grid-column: 2; grid-row: 1; }
.image-strip__card--right .image-strip__media--side { grid-column: 2; grid-row: 1; }
.image-strip__card--right .image-strip__text { grid-column: 1; grid-row: 1; }
.image-strip__card--top .image-strip__media--side { grid-row: 1; }
.image-strip__card--top .image-strip__text { grid-row: 2; }
.image-strip__card--bottom .image-strip__media--side { grid-row: 2; }
.image-strip__card--bottom .image-strip__text { grid-row: 1; }

.image-strip__media img,
.image-strip__media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1) translateZ(0);
    transform-origin: center center;
    transition:
        transform 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.15),
        filter 0.35s ease;
    will-change: transform;
}

.image-strip__card:hover,
.image-strip__card:focus-within,
.image-strip__card.is-touch-active,
.image-strip__card:active {
    z-index: 3;
    transform: translateY(-8px) scale(1.04);
    box-shadow:
        0 18px 36px color-mix(in srgb, #000 45%, transparent),
        0 0 0 1px color-mix(in srgb, var(--brand-neon) 45%, transparent),
        0 0 28px color-mix(in srgb, var(--brand-neon) 28%, transparent);
    border-color: color-mix(in srgb, var(--brand-neon) 55%, transparent);
}

.image-strip__card:hover .image-strip__media img,
.image-strip__card:hover .image-strip__media video,
.image-strip__card:focus-within .image-strip__media img,
.image-strip__card:focus-within .image-strip__media video,
.image-strip__card.is-touch-active .image-strip__media img,
.image-strip__card.is-touch-active .image-strip__media video,
.image-strip__card:active .image-strip__media img,
.image-strip__card:active .image-strip__media video {
    transform: scale(1.14) translateZ(0);
    filter: saturate(1.12) brightness(1.06);
}

.image-strip__card.is-touch-pop .image-strip__media img,
.image-strip__card.is-touch-pop .image-strip__media video {
    animation: imageStripMediaPulse 0.7s cubic-bezier(0.2, 0.9, 0.25, 1.2) both;
}

.image-strip__item:hover,
.image-strip__item.is-touch-active,
.image-strip__item:active {
    z-index: 3;
    transform: translateY(-6px) scale(1.03);
    box-shadow:
        0 16px 32px color-mix(in srgb, #000 40%, transparent),
        0 0 22px color-mix(in srgb, var(--strip-color, var(--brand-neon)) 40%, transparent);
}

.image-strip__item:hover img,
.image-strip__item:hover video,
.image-strip__item.is-touch-active img,
.image-strip__item.is-touch-active video,
.image-strip__item:active img,
.image-strip__item:active video {
    transform: scale(1.12);
    filter: saturate(1.1) brightness(1.05);
}

.image-strip__item.is-touch-pop img,
.image-strip__item.is-touch-pop video {
    animation: imageStripMediaPulse 0.7s cubic-bezier(0.2, 0.9, 0.25, 1.2) both;
}

@keyframes imageStripMediaPulse {
    0% { transform: scale(1); filter: brightness(1); }
    40% { transform: scale(1.18); filter: saturate(1.15) brightness(1.08); }
    100% { transform: scale(1.14); filter: saturate(1.1) brightness(1.05); }
}

@media (prefers-reduced-motion: reduce) {
    .image-strip__card,
    .image-strip__media img,
    .image-strip__media video,
    .image-strip__item,
    .image-strip__item img,
    .image-strip__item video {
        transition: none !important;
        animation: none !important;
    }
    .image-strip__card:hover,
    .image-strip__card:focus-within,
    .image-strip__card.is-touch-active,
    .image-strip__card:active,
    .image-strip__item:hover,
    .image-strip__item.is-touch-active,
    .image-strip__item:active {
        transform: none;
    }
}

.image-strip__text {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    padding: 0.7rem 0.85rem;
    min-width: 0;
}

.image-strip__card--background .image-strip__text {
    background: linear-gradient(
        180deg,
        transparent 0%,
        color-mix(in srgb, #000 55%, transparent) 100%
    );
    align-items: end;
}

.image-strip__card--boxed.image-strip__card--background .image-strip__text {
    background: color-mix(in srgb, var(--card-bg) 55%, transparent);
}

.image-strip__text p {
    margin: 0;
    width: 100%;
    font-family: var(--card-font);
    font-size: calc(0.78rem * (var(--cms-size) / 100));
    line-height: 1.35;
    text-align: var(--card-align);
    color: var(--card-text);
    text-wrap: balance;
}

.image-strip__card.is-bold .image-strip__text p { font-weight: 800; }
.image-strip__card.is-italic .image-strip__text p { font-style: italic; }

@keyframes imageStripScroll {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .image-strip:not(.image-strip--js) .image-strip__track {
        animation: none !important;
    }
    .image-strip:not(.image-strip--js) .image-strip__viewport {
        overflow-x: auto;
        transform: none;
    }
}

/* Keep the strip looping even when site FX are off — it is content motion, not FX. */
body.fx-off .image-strip:not(.image-strip--js) .image-strip__track {
    animation: imageStripScroll var(--strip-duration) linear infinite;
}

body.fx-off .image-strip--reverse:not(.image-strip--js) .image-strip__track {
    animation-direction: reverse;
}

/* —— Static content cards (not a marquee strip) —— */
.content-cards {
    position: relative;
    z-index: 2;
    margin-block: 0;
    margin-inline: 0;
    padding-inline: 0;
}

.content-cards__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: var(--cards-gap, 14px);
    column-gap: var(--cards-gap, 14px);
    row-gap: var(--cards-gap, 14px);
    width: 100%;
    margin-inline: 0;
}

.content-cards--stack .content-cards__grid {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    width: 100%;
}

.content-cards--align-left .content-cards__grid {
    justify-content: flex-start;
}
html[dir="rtl"] .content-cards--align-left .content-cards__grid {
    justify-content: flex-end;
}
.content-cards--align-right .content-cards__grid {
    justify-content: flex-end;
}
html[dir="rtl"] .content-cards--align-right .content-cards__grid {
    justify-content: flex-start;
}
.content-cards--align-center .content-cards__grid {
    justify-content: center;
}

.content-cards--stack.content-cards--align-left .content-cards__grid {
    align-items: flex-start;
}
html[dir="rtl"] .content-cards--stack.content-cards--align-left .content-cards__grid {
    align-items: flex-end;
}
.content-cards--stack.content-cards--align-right .content-cards__grid {
    align-items: flex-end;
}
html[dir="rtl"] .content-cards--stack.content-cards--align-right .content-cards__grid {
    align-items: flex-start;
}
.content-cards--stack.content-cards--align-center .content-cards__grid {
    align-items: center;
}

.content-card--align-left {
    margin-left: 0;
    margin-right: auto;
}
.content-card--align-right {
    margin-left: auto;
    margin-right: 0;
}
.content-card--align-center {
    margin-left: auto;
    margin-right: auto;
}

.content-cards--stack .content-card {
    flex: 0 0 auto;
    width: min(var(--card-w, 220px), 100%);
    max-width: 100%;
}

.strip-cards-band {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.85fr);
    gap: var(--rails-gap, 32px);
    align-items: center;
    width: 100%;
    margin-block: 0;
    margin-inline: 0;
    padding-inline: 0;
}

.strip-cards-band__strip .image-strip {
    margin: 0;
}

.strip-cards-band__cards .content-cards {
    margin: 0;
    padding-inline: 0;
}

.strip-cards-band__cards-stack {
    display: flex;
    flex-direction: column;
    gap: var(--rails-gap, 32px);
    width: 100%;
    min-width: 0;
}

.strip-cards-band__cards .content-cards__grid {
    width: 100%;
    justify-content: flex-start;
    gap: var(--cards-gap, 14px);
}

.strip-cards-band__cards .content-cards--align-left .content-cards__grid {
    justify-content: flex-start;
}
html[dir="rtl"] .strip-cards-band__cards .content-cards--align-left .content-cards__grid {
    justify-content: flex-end;
}
.strip-cards-band__cards .content-cards--align-right .content-cards__grid {
    justify-content: flex-end;
}
html[dir="rtl"] .strip-cards-band__cards .content-cards--align-right .content-cards__grid {
    justify-content: flex-start;
}
.strip-cards-band__cards .content-cards--align-center .content-cards__grid {
    justify-content: center;
}

.strip-cards-band__cards .content-cards--row .content-card {
    flex: 0 1 auto;
    width: min(var(--card-w, 220px), 100%);
    max-width: 100%;
}

@media (max-width: 900px) {
    .strip-cards-band {
        grid-template-columns: 1fr;
    }
}

/* Relative card/strip placement */
.rel-layout {
    display: flex;
    flex-direction: column;
    gap: var(--rails-gap, 32px);
    row-gap: var(--rails-gap, 32px);
    column-gap: var(--cards-gap, 14px);
    width: 100%;
    margin-block: 0;
    margin-inline: 0;
    padding-inline: 0;
}

.rel-layout__mid {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--cards-gap, 14px);
    column-gap: var(--cards-gap, 14px);
    row-gap: var(--rails-gap, 32px);
    align-items: center;
}

.rel-layout__slot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cards-gap, 14px);
    column-gap: var(--cards-gap, 14px);
    row-gap: var(--cards-gap, 14px);
    align-items: stretch;
    justify-content: center;
}

.rel-layout__slot--left,
.rel-layout__slot--right {
    flex-direction: column;
    max-width: 100%;
}

.rel-layout__slot--above,
.rel-layout__slot--before,
.rel-layout__slot--after,
.rel-layout__slot--below {
    width: 100%;
}

.rel-layout__anchor {
    min-width: 0;
    width: 100%;
    overflow: visible;
}

.rel-layout__anchor .flavor-carousel,
.rel-layout__anchor .carousel-section {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.rel-layout__anchor .image-strip,
.rel-layout__anchor .content-card {
    margin: 0;
}

.rel-layout .content-card {
    flex: 0 1 auto;
    width: min(var(--card-w, 220px), 100%);
    max-width: 100%;
    margin: 0;
}

@media (max-width: 900px) {
    .rel-layout__mid {
        grid-template-columns: 1fr;
    }

    .rel-layout__slot--left,
    .rel-layout__slot--right {
        max-width: 100%;
        flex-direction: row;
    }
}

.content-card {
    --card-w: 220px;
    --card-h: 160px;
    --card-bg: #111827;
    --card-text: #f4f7fb;
    --cms-size: 100;
    --card-font: var(--font-body);
    --card-align: start;
    --card-frame-h: max(var(--card-h), var(--cards-min-h, 0px));
    position: relative;
    box-sizing: border-box;
    isolation: isolate;
    flex: 0 0 auto;
    width: min(var(--card-w), 100%);
    max-width: 100%;
    min-width: 0;
    margin: 0;
    height: var(--card-frame-h);
    min-height: var(--card-frame-h);
    max-height: var(--card-frame-h);
    display: grid;
    align-items: stretch;
    overflow: hidden;
    color: var(--card-text);
    background: color-mix(in srgb, #000 28%, transparent);
    box-shadow: 0 10px 28px color-mix(in srgb, #000 35%, transparent);
    cursor: pointer;
    touch-action: manipulation;
    transition:
        transform 0.35s cubic-bezier(0.2, 0.9, 0.25, 1.1),
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.content-card.is-rounded,
.content-cards--rounded .content-card {
    border-radius: 0.85rem;
}

/* Content cards 2: width and height follow the card container sliders exactly. */
.content-card.content-card--free-size {
    --card-frame-h: var(--card-h);
    flex: 0 0 auto;
    box-sizing: border-box;
    width: var(--card-w);
    min-width: var(--card-w);
    max-width: none;
    height: var(--card-h);
    min-height: var(--card-h);
    max-height: var(--card-h);
}

.content-card.content-card--free-size.content-card--only,
.content-card.content-card--free-size.content-card--background,
.content-card.content-card--free-size.content-card--none,
.content-card.content-card--free-size.content-card--left,
.content-card.content-card--free-size.content-card--right,
.content-card.content-card--free-size.content-card--top,
.content-card.content-card--free-size.content-card--bottom {
    width: var(--card-w);
    height: var(--card-h);
    min-height: var(--card-h);
    max-height: var(--card-h);
}

.content-card.content-card--free-size .content-card__media--only {
    min-height: 0;
    height: 100%;
}

.rel-layout .content-card.content-card--rail-2.content-card--free-size,
.content-cards[data-cards-rail="content_cards_2"] .content-card.content-card--rail-2.content-card--free-size {
    width: min(var(--card-w), 100%);
    min-width: 0;
    max-width: 100%;
}

.content-cards--stack .content-card.content-card--free-size,
.strip-cards-band__cards .content-cards--row .content-card.content-card--free-size,
.rel-layout .content-card.content-card--free-size {
    flex: 0 0 auto;
    width: var(--card-w);
    min-width: var(--card-w);
    max-width: none;
}

.content-card.content-card--full-width,
.content-card.content-card--free-size.content-card--full-width,
.content-card.content-card--free-size.content-card--full-width.content-card--only,
.content-card.content-card--free-size.content-card--full-width.content-card--background,
.content-card.content-card--free-size.content-card--full-width.content-card--none,
.content-card.content-card--free-size.content-card--full-width.content-card--left,
.content-card.content-card--free-size.content-card--full-width.content-card--right,
.content-card.content-card--free-size.content-card--full-width.content-card--top,
.content-card.content-card--free-size.content-card--full-width.content-card--bottom,
.content-cards--stack .content-card.content-card--free-size.content-card--full-width,
.strip-cards-band__cards .content-cards--row .content-card.content-card--free-size.content-card--full-width,
.rel-layout .content-card.content-card--free-size.content-card--full-width {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.content-card--boxed:not(.content-card--bg-transparent) {
    background: var(--card-bg);
}

.content-card--bg-transparent {
    background: transparent;
    box-shadow: none;
}

.content-card.content-card--no-box {
    border: none;
    background: transparent;
    box-shadow: none;
}

.content-card.content-card--no-box:hover,
.content-card.content-card--no-box:focus-within,
.content-card.content-card--no-box.is-touch-active,
.content-card.content-card--no-box:active {
    box-shadow: none;
}

.content-card.content-card--bg-transparent:hover,
.content-card.content-card--bg-transparent:focus-within,
.content-card.content-card--bg-transparent.is-touch-active,
.content-card.content-card--bg-transparent:active {
    box-shadow: none;
}

.content-card.is-media-error,
.content-card.content-card--no-box.is-media-error,
.content-card.content-card--bg-transparent.is-media-error {
    background:
        radial-gradient(circle at 50% 35%, rgb(116 199 239 / 0.2), transparent 32%),
        linear-gradient(145deg, rgb(15 24 38 / 0.96), rgb(7 13 24 / 0.96)) !important;
    box-shadow: inset 0 0 0 1px rgb(116 199 239 / 0.22) !important;
}

.content-card.is-media-error::after {
    content: attr(data-media-fallback);
    position: absolute;
    z-index: 4;
    inset: 50% auto auto 50%;
    width: min(82%, 22rem);
    translate: -50% -50%;
    color: rgb(244 247 251 / 0.9);
    font: 700 clamp(0.78rem, 2.8vw, 1rem) / 1.6 var(--font-body);
    text-align: center;
    pointer-events: none;
}

.content-card.is-media-error .content-card__media-main,
.content-card.is-media-error .content-card__media > img,
.content-card.is-media-error .content-card__media > video {
    opacity: 0;
}

.content-card--bg-transparent.content-card--background .content-card__text,
.content-card--boxed.content-card--bg-transparent.content-card--background .content-card__text {
    background: none;
}

.content-card--bordered {
    border: 1px solid color-mix(in srgb, var(--brand-neon) 28%, transparent);
}

.content-card.content-card--no-border {
    border: none;
    box-shadow: none;
}

.content-card.content-card--no-border:hover,
.content-card.content-card--no-border:focus-within,
.content-card.content-card--no-border.is-touch-active,
.content-card.content-card--no-border:active {
    box-shadow: none;
}

.content-card--only,
.content-card--background {
    grid-template: 1fr / 1fr;
    aspect-ratio: auto;
}

.content-card--only {
    display: grid;
}

.content-card__media--only,
.content-card__media--fill {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.content-card--left {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    grid-template-rows: minmax(0, 1fr);
}

.content-card--right {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-rows: minmax(0, 1fr);
}

.content-card--top {
    grid-template-rows: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-columns: minmax(0, 1fr);
}

.content-card--bottom {
    grid-template-rows: minmax(0, 1.1fr) minmax(0, 0.9fr);
    grid-template-columns: minmax(0, 1fr);
}

.content-card--none {
    grid-template: 1fr / 1fr;
    padding: 1rem;
}

.content-card > * {
    min-width: 0;
    min-height: 0;
}

.content-card__media {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

.content-card__media--touch {
    isolation: isolate;
}

.content-card__media-main {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: transparent;
    pointer-events: none;
}

.content-card__media-main img,
.content-card__media-main video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center center;
    background: transparent;
    transform: scale(1) translateZ(0);
    transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.15), filter 0.35s ease;
}

.content-card__media--touch-back .content-card__media-main img,
.content-card__media--touch-back .content-card__media-main video {
    object-fit: contain;
    background: transparent;
}

.content-card__touch {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    width: auto;
    height: auto;
    overflow: hidden;
    margin: 0;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: none;
    transition: none;
    filter: none;
}

.content-card__touch-img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center center;
    pointer-events: none;
    filter: none;
}

.content-card__touch--sized .content-card__touch-img {
    width: var(--touch-w, auto);
    height: var(--touch-h, auto);
    max-width: none;
    max-height: none;
    object-fit: cover;
}

.content-card__touch--full-width .content-card__touch-img {
    width: 100%;
    max-width: none;
    height: var(--touch-h, 100%);
    object-fit: contain;
    object-position: center center;
}

.content-card__touch--back {
    z-index: 0;
}

.content-card__touch--front {
    z-index: 2;
}

.content-card__media .content-card__touch:not(.is-touch-playing) {
    animation: none !important;
}

.content-card.is-touch-reveal .content-card__touch.is-touch-playing {
    visibility: visible;
    opacity: 1;
}

.content-card.is-touch-reveal .content-card__media--touch-back .content-card__media-main {
    opacity: 1;
}

body.fx-off .content-card.is-touch-reveal .content-card__touch.is-touch-playing {
    opacity: 1;
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .content-card.is-touch-reveal .content-card__touch.is-touch-playing {
        opacity: 1;
        animation: none !important;
    }
}

.content-card--touch {
    cursor: pointer;
}

.content-card--left .content-card__media--side { grid-column: 1; grid-row: 1; }
.content-card--left .content-card__text { grid-column: 2; grid-row: 1; }
.content-card--right .content-card__media--side { grid-column: 2; grid-row: 1; }
.content-card--right .content-card__text { grid-column: 1; grid-row: 1; }
.content-card--top .content-card__media--side { grid-row: 1; }
.content-card--top .content-card__text { grid-row: 2; }
.content-card--bottom .content-card__media--side { grid-row: 2; }
.content-card--bottom .content-card__text { grid-row: 1; }

.content-card__media > img,
.content-card__media > video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center center;
    background: #000;
    transform: scale(1) translateZ(0);
    transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.25, 1.15), filter 0.35s ease;
}

.content-card--free-size .content-card__media > img,
.content-card--free-size .content-card__media > video,
.content-card--free-size .content-card__media-main img,
.content-card--free-size .content-card__media-main video {
    object-fit: contain;
    background: transparent;
}

.content-card--media-sized .content-card__media,
.content-card--media-sized .content-card__media-main {
    display: grid;
    place-items: center;
    overflow: hidden;
}

.content-card--media-sized .content-card__media > img,
.content-card--media-sized .content-card__media > video,
.content-card--media-sized .content-card__media-main img,
.content-card--media-sized .content-card__media-main video {
    position: relative;
    inset: auto;
    width: var(--media-w, auto);
    height: var(--media-h, auto);
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center center;
    background: transparent;
}

.content-card.content-card--fill-box .content-card__media,
.content-card.content-card--fill-box .content-card__media--only,
.content-card.content-card--fill-box .content-card__media--fill,
.content-card.content-card--fill-box .content-card__media--side,
.content-card.content-card--fill-box .content-card__media-main {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

.content-card.content-card--fill-box.content-card--left .content-card__media--side,
.content-card.content-card--fill-box.content-card--right .content-card__media--side,
.content-card.content-card--fill-box.content-card--top .content-card__media--side,
.content-card.content-card--fill-box.content-card--bottom .content-card__media--side {
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
}

.content-card.content-card--fill-box .content-card__media > img,
.content-card.content-card--fill-box .content-card__media > video,
.content-card.content-card--fill-box .content-card__media-main img,
.content-card.content-card--fill-box .content-card__media-main video {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center center;
}

.content-card:hover,
.content-card:focus-within,
.content-card.is-touch-active,
.content-card:active {
    transform: translateY(-4px) scale(1.03);
    z-index: 2;
    box-shadow: 0 16px 36px color-mix(in srgb, #000 42%, transparent);
}

.content-card:hover .content-card__media > img,
.content-card:hover .content-card__media > video,
.content-card:hover .content-card__media-main img,
.content-card:hover .content-card__media-main video,
.content-card:focus-within .content-card__media > img,
.content-card:focus-within .content-card__media > video,
.content-card:focus-within .content-card__media-main img,
.content-card:focus-within .content-card__media-main video,
.content-card.is-touch-active .content-card__media > img,
.content-card.is-touch-active .content-card__media > video,
.content-card.is-touch-active .content-card__media-main img,
.content-card.is-touch-active .content-card__media-main video,
.content-card:active .content-card__media > img,
.content-card:active .content-card__media > video,
.content-card:active .content-card__media-main img,
.content-card:active .content-card__media-main video {
    transform: scale(1.08);
}

.content-card.is-touch-pop .content-card__media > img,
.content-card.is-touch-pop .content-card__media > video,
.content-card.is-touch-pop .content-card__media-main img,
.content-card.is-touch-pop .content-card__media-main video {
    transform: scale(1.12);
}

.content-card.is-touch-reveal .content-card__media > img,
.content-card.is-touch-reveal .content-card__media > video,
.content-card.is-touch-reveal .content-card__media-main img,
.content-card.is-touch-reveal .content-card__media-main video {
    transform: none;
}

.content-card__text {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 0.9rem;
    min-width: 0;
}

.content-card--background .content-card__text {
    position: absolute;
    inset: 0;
    padding: 1rem;
    background: linear-gradient(
        180deg,
        transparent 20%,
        color-mix(in srgb, #000 55%, transparent) 100%
    );
    align-items: flex-end;
}

.content-card--boxed.content-card--background .content-card__text {
    background: color-mix(in srgb, var(--card-bg) 55%, transparent);
}

.content-card--text-plain.content-card--background .content-card__text,
.content-card--boxed.content-card--text-plain.content-card--background .content-card__text {
    background: none;
}

.content-card--text-plain .content-card__text p {
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}

.content-card__text p {
    margin: 0;
    width: 100%;
    font-family: var(--card-font);
    font-size: calc(0.78rem * (var(--cms-size) / 100));
    line-height: 1.35;
    text-align: var(--card-align);
    color: var(--card-text);
    text-wrap: balance;
}

.content-card.is-bold .content-card__text p { font-weight: 800; }
.content-card.is-italic .content-card__text p { font-style: italic; }

@media (max-width: 640px) {
    .content-card {
        flex: 0 1 auto;
        width: min(var(--card-w, 220px), 100%);
        max-width: 100%;
    }

    .content-card.content-card--free-size {
        flex: 0 0 auto;
        width: min(var(--card-w), 100%);
        min-width: 0;
        max-width: 100%;
        height: auto;
        max-height: none;
        aspect-ratio: var(--card-w) / var(--card-h);
        min-height: calc(min(var(--card-w), 92vw) * (var(--card-h) / var(--card-w)));
    }

    .content-card.content-card--free-size.content-card--full-width {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .content-card--left,
    .content-card--right {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    }

    .content-card--left .content-card__media--side,
    .content-card--right .content-card__media--side { grid-column: 1; grid-row: 1; }
    .content-card--left .content-card__text,
    .content-card--right .content-card__text { grid-column: 1; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
    .content-card,
    .content-card__media img,
    .content-card__media video {
        transition: none;
    }

    .content-card:hover,
    .content-card:focus-within,
    .content-card.is-touch-active,
    .content-card:active {
        transform: none;
    }
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.section-head h2, .shorts-section h2 {
    margin: 0;
    font-family: var(--font-display);
    letter-spacing: 0.04em;
}

.section-head--center {
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.section-head--center h2,
.section-head--center .section-sub {
    width: 100%;
    text-align: center;
}

.shorts-rail.rail-cards--center:not(.locale-marquee),
.home-talents-grid.rail-cards--center:not(.locale-marquee),
.home-winners-grid.rail-cards--center:not(.locale-marquee) {
    justify-content: center;
}

.shorts-rail.locale-marquee.rail-cards--center:not(.is-rail-overflow),
.home-talents-grid.locale-marquee.rail-cards--center:not(.is-rail-overflow),
.home-winners-grid.locale-marquee.rail-cards--center:not(.is-rail-overflow) {
    display: flex;
    justify-content: center;
    justify-content: safe center;
}

.shorts-rail.locale-marquee.rail-cards--center:not(.is-rail-overflow) .locale-marquee__track,
.home-talents-grid.locale-marquee.rail-cards--center:not(.is-rail-overflow) .locale-marquee__track,
.home-winners-grid.locale-marquee.rail-cards--center:not(.is-rail-overflow) .locale-marquee__track {
    margin-inline: 0;
    transform: none;
}

/* —— Shared rail tilt (flavors / shorts / talents / winners) —— */
.rail-tilt {
    --rail-tilt: 0deg;
    transform: rotate(var(--rail-tilt));
    transform-origin: center center;
    will-change: transform;
}

.carousel-section:has(.rail-tilt),
.shorts-section:has(.rail-tilt),
.home-talents-section:has(.rail-tilt),
.home-winners-section:has(.rail-tilt) {
    overflow: visible;
    padding-block: 0;
}

.flavor-carousel.rail-tilt,
.shorts-rail.rail-tilt,
.home-talents-grid.rail-tilt,
.home-winners-grid.rail-tilt {
    margin-inline: 0;
}

/* Per-card pose: tilt left/right + high/low offset */
.rail-card-styled {
    --card-tilt: 0deg;
    --card-y: 0px;
    rotate: var(--card-tilt);
    translate: 0 var(--card-y);
    transform-origin: center center;
}

.flavor-carousel:has(.rail-card-posed),
.shorts-rail:has(.rail-card-posed),
.home-talents-grid:has(.rail-card-posed),
.home-winners-grid:has(.rail-card-posed),
.section-wave:has(.rail-card-posed) {
    padding-block: calc(0.85rem + max(var(--wave-amp, 0px), var(--flavor-wave-amp, 0px), 24px) + 12px);
}

.flavor-carousel:not(.flavor-carousel--wave)[data-manual-drag="1"] {
    touch-action: pan-y;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
}
.flavor-carousel:not(.flavor-carousel--wave)[data-manual-drag="1"].is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

.flavor-carousel {
    --flavor-card-size: 100;
    --flavor-image-size: 100;
    --flavor-scale: calc(var(--flavor-card-size) / 100);
    --flavor-image-scale: calc(var(--flavor-image-size, 100) / 100);
    --flavor-gap: 20px;
    --flavor-text-valign: start;
    --flavor-wave-amp: 22px;
    --flavor-wave-speed: 45;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    justify-content: start;
    align-items: stretch;
    gap: var(--flavor-gap);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    padding: 1.25rem 0 1.1rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.flavor-carousel::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.flavor-carousel:not(.flavor-carousel--wave) > .flavor-wave-track {
    display: contents;
}

.flavor-carousel.rail-cards--center:not(.flavor-carousel--wave):not(.is-rail-overflow) {
    justify-content: safe center;
}

.flavor-carousel.rail-cards--center:not(.flavor-carousel--wave).is-rail-overflow {
    justify-content: start;
}

.flavor-carousel--wave.rail-cards--center:not(.is-rail-overflow) .flavor-wave-track {
    margin-inline: auto;
}

.flavor-carousel--wave {
    display: block;
    overflow-x: hidden;
    overflow-y: hidden;
    scroll-snap-type: none;
    padding-inline: 0;
    padding-block: calc(1.25rem + var(--flavor-wave-amp));
    cursor: url('/assets/cursors/star-t-pointer.png') 6 2, url('/assets/cursors/star-t-pointer.svg') 6 2, grab;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.flavor-carousel--wave::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.flavor-carousel--wave:active {
    cursor: url('/assets/cursors/star-t-pointer.png') 6 2, url('/assets/cursors/star-t-pointer.svg') 6 2, grabbing;
}

.flavor-carousel--wave .flavor-wave-track {
    display: flex;
    width: max-content;
    gap: var(--flavor-gap, 20px);
    column-gap: var(--flavor-gap, 20px);
    row-gap: 0;
    will-change: transform;
    align-items: stretch;
}

.flavor-carousel--wave .flavor-card {
    flex: 0 0 auto;
    width: min(calc(320px * var(--flavor-scale, 1)), 86vw);
    min-width: min(calc(280px * var(--flavor-scale, 1)), 82vw);
    max-width: min(calc(320px * var(--flavor-scale, 1)), 86vw);
    margin: 0;
    touch-action: pan-y;
    scroll-snap-align: none;
    will-change: translate;
}

.flavor-card {
    --flavor-scale: calc(var(--flavor-card-size, 100) / 100);
    --flavor-image-scale: calc(var(--flavor-image-size, 100) / 100);
    scroll-snap-align: start;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: var(--flavor-text-valign, start);
    gap: calc(1rem * var(--flavor-scale, 1));
    min-height: calc(360px * var(--flavor-scale, 1));
    max-width: 100%;
    min-width: 0;
    margin: 0;
    box-sizing: border-box;
    padding: calc(1rem * var(--flavor-scale, 1));
    border-radius: calc(1.5rem * var(--flavor-scale, 1));
    font-size: calc(1rem * var(--flavor-scale, 1));
    background: linear-gradient(145deg, color-mix(in srgb, var(--section-bg) 88%, #000), var(--section-bg));
    color: var(--flavor-text, var(--section-text, var(--ink)));
    border: 1px solid color-mix(in srgb, var(--section-accent) 40%, transparent);
    box-shadow: 0 18px 40px rgba(0,0,0,0.28);
    transform-origin: center center;
    transition:
        opacity calc((140 - var(--anim-speed)) * 12ms + 480ms) ease,
        transform calc((140 - var(--anim-speed)) * 12ms + 480ms) ease;
}

.flavor-card--frameless {
    border: none;
    box-shadow: none;
    border-radius: 0;
}

.flavor-card--no-bg,
.flavor-carousel--no-card-bg .flavor-card {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none;
}

.flavor-carousel--cards {
    align-items: stretch;
    padding-block: 1.1rem 1.2rem;
}

.flavor-carousel--cards .flavor-card,
.flavor-carousel--cards .flavor-card[data-image-pos="left"],
.flavor-carousel--cards .flavor-card[data-image-pos="right"],
.flavor-carousel--cards .flavor-card[data-image-pos="top"],
.flavor-carousel--cards .flavor-card[data-image-pos="bottom"] {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    width: min(calc(280px * var(--flavor-scale, 1)), 78vw);
    min-width: min(calc(240px * var(--flavor-scale, 1)), 70vw);
    max-width: min(calc(300px * var(--flavor-scale, 1)), 82vw);
    min-height: calc(420px * var(--flavor-scale, 1));
    padding: calc(0.85rem * var(--flavor-scale, 1));
    gap: calc(0.7rem * var(--flavor-scale, 1));
}

.flavor-carousel--cards .flavor-visual {
    order: 1 !important;
    min-height: calc(250px * var(--flavor-scale, 1));
    align-self: stretch;
}

.flavor-carousel--cards .flavor-copy {
    order: 2 !important;
    text-align: var(--flavor-text-align, center);
    align-self: stretch;
    justify-content: var(--flavor-text-valign, start);
}

.flavor-carousel--cards .flavor-copy .personality {
    display: none;
}

.flavor-carousel--cards .flavor-product img,
.flavor-carousel--cards .flavor-product video,
.flavor-carousel--cards .flavor-product .store-model {
    width: min(100%, calc(230px * var(--flavor-scale, 1) * var(--flavor-image-scale, 1)));
    max-height: calc(280px * var(--flavor-scale, 1) * var(--flavor-image-scale, 1));
    object-fit: contain;
}

.flavor-card.media-anim--fade-in {
    animation: mediaFadeIn calc((140 - var(--anim-speed)) * 14ms + 720ms) ease both;
    animation-delay: var(--flavor-stagger, 0s);
}
.flavor-card.media-anim--slide-up {
    animation: mediaSlideUp calc((140 - var(--anim-speed)) * 14ms + 720ms) ease both;
    animation-delay: var(--flavor-stagger, 0s);
}
.flavor-card.media-anim--scale-pop {
    animation: mediaScalePop calc((140 - var(--anim-speed)) * 14ms + 720ms) ease both;
    animation-delay: var(--flavor-stagger, 0s);
}
.flavor-card.media-anim--rotate {
    animation: mediaRotateIn calc((140 - var(--anim-speed)) * 14ms + 780ms) ease both;
    animation-delay: var(--flavor-stagger, 0s);
}
.flavor-card.media-anim--fast-appear {
    animation: mediaFastAppear calc((140 - var(--anim-speed)) * 2ms + 90ms) ease-out both;
    animation-delay: var(--flavor-stagger, 0s);
}
.flavor-card.media-anim--fast-zoom {
    animation: mediaFastZoom calc((140 - var(--anim-speed)) * 2ms + 110ms) cubic-bezier(.18,1.45,.32,1) both;
    animation-delay: var(--flavor-stagger, 0s);
}
.flavor-card.media-anim--fast-spin {
    animation: mediaFastSpin calc((140 - var(--anim-speed)) * 2ms + 140ms) ease-out both;
    animation-delay: var(--flavor-stagger, 0s);
}
.flavor-card.media-anim--float {
    animation: flavorFloat calc((140 - var(--anim-speed)) * 30ms + 3.2s) ease-in-out infinite alternate;
}
.flavor-card.media-anim--pulse {
    animation: flavorPulse calc((140 - var(--anim-speed)) * 26ms + 2.4s) ease-in-out infinite;
}
.flavor-card.media-anim--glow {
    animation: flavorGlow calc((140 - var(--anim-speed)) * 30ms + 2.8s) ease-in-out infinite alternate;
}
.flavor-card.media-anim--bob:not(.is-media-playing) .flavor-product img,
.flavor-card.media-anim--bob:not(.is-media-playing) .flavor-product video {
    animation: flavorBob calc((140 - var(--anim-speed)) * 28ms + 2.8s) ease-in-out infinite;
}
.flavor-card.media-anim--sway:not(.is-media-playing) .flavor-product img,
.flavor-card.media-anim--sway:not(.is-media-playing) .flavor-product video {
    animation: flavorSway calc((140 - var(--anim-speed)) * 32ms + 3.6s) ease-in-out infinite alternate;
}

.flavor-card[data-image-pos="left"] {
    grid-template-columns: 0.9fr 1.1fr;
}
.flavor-card[data-image-pos="left"] .flavor-visual { order: 1; }
.flavor-card[data-image-pos="left"] .flavor-copy { order: 2; }

.flavor-card[data-image-pos="right"] {
    grid-template-columns: 1.1fr 0.9fr;
}
.flavor-card[data-image-pos="right"] .flavor-visual { order: 2; }
.flavor-card[data-image-pos="right"] .flavor-copy { order: 1; }

.flavor-card[data-image-pos="top"],
.flavor-card[data-image-pos="bottom"] {
    grid-template-columns: 1fr;
}
.flavor-card[data-image-pos="top"] .flavor-visual { order: 1; }
.flavor-card[data-image-pos="top"] .flavor-copy { order: 2; }
.flavor-card[data-image-pos="bottom"] .flavor-visual { order: 2; }
.flavor-card[data-image-pos="bottom"] .flavor-copy { order: 1; }

.flavor-card.will-reveal[data-animation="fade_in"] {
    opacity: 0;
    transform: none;
}
.flavor-card.will-reveal[data-animation="slide_up"] {
    opacity: 0;
    transform: translateY(42px);
}
.flavor-card.will-reveal[data-animation="scale_pop"] {
    opacity: 0;
    transform: scale(0.84);
}
.flavor-card.will-reveal[data-animation="rotate"] {
    opacity: 0;
    transform: rotate(-7deg) translateY(28px);
}
.flavor-card.will-reveal[data-animation="fast_appear"] {
    opacity: 0;
    transform: none;
}
.flavor-card.will-reveal[data-animation="fast_zoom"] {
    opacity: 0;
    transform: scale(0.28);
}
.flavor-card.will-reveal[data-animation="fast_spin"] {
    opacity: 0;
    transform: rotate(-280deg) scale(0.45);
}

.flavor-card.will-reveal.is-visible,
.flavor-card.is-visible {
    opacity: 1;
    transform: none;
}

.flavor-card.is-visible:not(.is-media-playing)[data-idle-animation="float"] .flavor-product img,
.flavor-card.is-visible:not(.is-media-playing)[data-idle-animation="float"] .flavor-product video {
    animation: flavorFloat calc((140 - var(--anim-speed)) * 30ms + 3.2s) ease-in-out infinite alternate;
    animation-delay: calc((140 - var(--anim-speed)) * 12ms + 520ms);
}
.flavor-card.is-visible:not(.is-media-playing)[data-idle-animation="bob"] .flavor-product img,
.flavor-card.is-visible:not(.is-media-playing)[data-idle-animation="bob"] .flavor-product video {
    animation: flavorBob calc((140 - var(--anim-speed)) * 28ms + 2.8s) ease-in-out infinite;
    animation-delay: calc((140 - var(--anim-speed)) * 12ms + 520ms);
}
.flavor-card.is-visible:not(.is-media-playing)[data-idle-animation="pulse"] .flavor-product img,
.flavor-card.is-visible:not(.is-media-playing)[data-idle-animation="pulse"] .flavor-product video {
    animation: flavorPulse calc((140 - var(--anim-speed)) * 26ms + 2.4s) ease-in-out infinite;
    animation-delay: calc((140 - var(--anim-speed)) * 12ms + 520ms);
}
.flavor-card.is-visible:not(.is-media-playing)[data-idle-animation="sway"] .flavor-product img,
.flavor-card.is-visible:not(.is-media-playing)[data-idle-animation="sway"] .flavor-product video {
    animation: flavorSway calc((140 - var(--anim-speed)) * 32ms + 3.6s) ease-in-out infinite alternate;
    animation-delay: calc((140 - var(--anim-speed)) * 12ms + 520ms);
}
.flavor-card.is-visible:not(.is-media-playing)[data-idle-animation="glow"] .flavor-product img,
.flavor-card.is-visible:not(.is-media-playing)[data-idle-animation="glow"] .flavor-product video {
    animation: flavorGlow calc((140 - var(--anim-speed)) * 30ms + 2.8s) ease-in-out infinite alternate;
    animation-delay: calc((140 - var(--anim-speed)) * 12ms + 520ms);
}

/* Card-level idle (float/pulse/glow) — skip duplicate image idle. */
.flavor-card.media-anim--float.is-visible .flavor-product img,
.flavor-card.media-anim--float.is-visible .flavor-product video,
.flavor-card.media-anim--pulse.is-visible .flavor-product img,
.flavor-card.media-anim--pulse.is-visible .flavor-product video,
.flavor-card.media-anim--glow.is-visible .flavor-product img,
.flavor-card.media-anim--glow.is-visible .flavor-product video {
    animation: none;
}

@keyframes flavorFloat {
    from { transform: translateY(0); }
    to { transform: translateY(-10px); }
}
@keyframes flavorBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}
@keyframes flavorPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}
@keyframes flavorSway {
    from { transform: rotate(-4deg); }
    to { transform: rotate(4deg); }
}
@keyframes flavorGlow {
    from { filter: drop-shadow(0 18px 24px rgba(0,0,0,0.35)); }
    to { filter: drop-shadow(0 0 18px color-mix(in srgb, var(--section-accent) 65%, transparent)); }
}

.flavor-visual {
    position: relative;
    display: grid;
    justify-items: center;
    align-items: start;
    align-content: start;
}

.flavor-product {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    align-items: start;
    align-content: start;
    align-self: start;
    width: 100%;
    min-width: 0;
    background: transparent;
}

.flavor-visual .flavor-product img,
.flavor-visual .flavor-product video,
.flavor-visual .flavor-product .store-model {
    width: min(100%, calc(260px * var(--flavor-scale, 1) * var(--flavor-image-scale, 1)));
    filter: drop-shadow(0 18px 24px rgba(0,0,0,0.35));
}

.flavor-visual--touch {
    isolation: isolate;
    overflow: hidden;
    min-height: calc(200px * var(--flavor-scale, 1));
}

.flavor-touch {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    justify-items: center;
    align-items: start;
    align-content: start;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    overflow: hidden;
    margin: 0;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    filter: none;
}

.flavor-touch--back {
    z-index: 0;
}

.flavor-touch--front {
    z-index: 2;
}

.flavor-touch .flavor-touch__img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center top;
    filter: none !important;
}

.flavor-touch.flavor-touch--sized .flavor-touch__img {
    width: var(--touch-w, auto);
    height: var(--touch-h, auto);
    max-width: none;
    max-height: none;
    object-fit: cover;
}

.flavor-touch.flavor-touch--round {
    border-radius: var(--touch-radius, 0px);
}

.flavor-touch.flavor-touch--round .flavor-touch__img {
    border-radius: var(--touch-radius, 0px);
    overflow: hidden;
    -webkit-clip-path: inset(0 round var(--touch-radius, 0px));
    clip-path: inset(0 round var(--touch-radius, 0px));
}

.flavor-visual .flavor-touch:not(.is-touch-playing) {
    animation: none !important;
}

.flavor-card.is-touch-reveal .flavor-touch.is-touch-playing {
    visibility: visible;
    opacity: 1;
}

body.fx-off .flavor-card.is-touch-reveal .flavor-touch.is-touch-playing {
    opacity: 1;
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .flavor-card.is-touch-reveal .flavor-touch.is-touch-playing {
        opacity: 1;
        animation: none !important;
    }
}

.flavor-card--touch {
    cursor: pointer;
}

.flavor-visual--touch .badge,
.flavor-visual--touch .media-expand-btn {
    z-index: 4;
}

.store-model {
    position: relative;
    aspect-ratio: 1 / 1;
    min-height: 140px;
    border-radius: 0.6rem;
    overflow: hidden;
    background: color-mix(in srgb, var(--brand-bg) 70%, #111827);
    touch-action: none;
}

.store-model canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

.store-model__fallback {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 120px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--brand-neon, #b8ff3c);
}

@keyframes flavorHoverShake {
    0%, 100% { transform: rotate(0deg); }
    20% { transform: rotate(-7deg); }
    40% { transform: rotate(7deg); }
    60% { transform: rotate(-5deg); }
    80% { transform: rotate(5deg); }
}

/* Hover: sway the product. Keep shaking even when a touch overlay is showing. */
.flavor-carousel:not(.flavor-carousel--no-shake) .flavor-card:not(.flavor-card--no-shake):hover:not(.is-media-expanded) .flavor-product,
.flavor-carousel:not(.flavor-carousel--no-shake) .flavor-card:not(.flavor-card--no-shake).is-flavor-hover:not(.is-media-expanded) .flavor-product {
    animation: flavorHoverShake 0.45s ease-in-out infinite;
    transform-origin: center center;
    will-change: transform;
}

/* Pause idle media bob/float so only the shake reads on hover */
.flavor-carousel:not(.flavor-carousel--no-shake) .flavor-card:not(.flavor-card--no-shake):hover:not(.is-media-expanded) .flavor-product img,
.flavor-carousel:not(.flavor-carousel--no-shake) .flavor-card:not(.flavor-card--no-shake):hover:not(.is-media-expanded) .flavor-product video:not(.is-media-zoomed),
.flavor-carousel:not(.flavor-carousel--no-shake) .flavor-card:not(.flavor-card--no-shake).is-flavor-hover:not(.is-media-expanded) .flavor-product img,
.flavor-carousel:not(.flavor-carousel--no-shake) .flavor-card:not(.flavor-card--no-shake).is-flavor-hover:not(.is-media-expanded) .flavor-product video:not(.is-media-zoomed) {
    animation: none !important;
}

body.fx-off .flavor-card:hover .flavor-visual,
body.fx-off .flavor-card:hover .flavor-product,
body.fx-off .flavor-card.is-flavor-hover .flavor-product {
    animation: none !important;
}

.flavor-card.is-media-playing,
.flavor-card.is-media-expanded,
.shorts-rail.is-media-playing .short-card:not(.is-media-playing):not(.is-media-expanded) {
    animation: none !important;
    transform: none !important;
    transition: none !important;
}

.flavor-card.is-media-playing .flavor-product img,
.flavor-card.is-media-expanded .flavor-product img {
    animation: none !important;
    transform: none !important;
}

video.is-media-playing,
.hero-video.is-media-playing,
.flavor-card.is-media-playing .flavor-visual video,
.short-card.is-media-playing video {
    animation: none !important;
}

.flavor-card.is-media-playing .flavor-visual video.is-media-zoomed,
.flavor-visual video.is-media-zoomed {
    position: relative;
    z-index: 3;
    transform: scale(1.28) !important;
    transform-origin: center center;
    transition: transform 0.35s ease;
    max-height: none;
}

.short-card.is-media-playing {
    animation: none !important;
    position: relative;
    z-index: 5;
    transition: transform 0.35s ease;
}

.short-card.is-media-playing:not(.is-media-expanded) {
    transform: scale(1.06) !important;
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.45);
}

.shorts-rail.is-media-playing {
    animation: none !important;
}

.flavor-visual--video {
    position: relative;
}

.media-expand-btn {
    position: absolute;
    top: 0.55rem;
    inset-inline-start: 0.55rem;
    z-index: 6;
    width: 2.35rem;
    height: 2.35rem;
    border: 0;
    border-radius: 0.7rem;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: #fff;
    background: color-mix(in srgb, #0b1220 72%, transparent);
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
    transition: transform 0.2s ease, background 0.2s ease;
}

.media-expand-btn:hover,
.media-expand-btn:focus-visible {
    transform: scale(1.06);
    background: color-mix(in srgb, var(--section-accent, var(--brand-neon, #b8ff3c)) 55%, #0b1220);
    outline: none;
}

.media-expand-btn span {
    font-size: 1.05rem;
    line-height: 1;
}

.video-lightbox {
    border: 0;
    padding: 0;
    width: min(960px, 94vw);
    max-width: 94vw;
    background: transparent;
    overflow: visible;
}

.video-lightbox::backdrop {
    background: rgba(4, 8, 16, 0.82);
    backdrop-filter: blur(6px);
}

.video-lightbox-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.6rem;
}

.video-lightbox-close {
    border: 0;
    border-radius: 999px;
    padding: 0.55rem 1rem;
    cursor: pointer;
    font-weight: 700;
    color: #0b1220;
    background: #f8fafc;
}

.video-lightbox-stage {
    width: 100%;
    min-height: min(70vh, 640px);
    border-radius: 1.1rem;
    overflow: hidden;
    background: #000;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

.video-lightbox-stage video,
.video-lightbox-stage iframe {
    width: 100%;
    height: min(70vh, 640px);
    border: 0;
    display: block;
    object-fit: contain;
    background: #000;
}

.flavor-visual video,
.short-card video {
    transition: transform 0.35s ease;
}

.flavor-visual video {
    height: auto;
    border-radius: 0;
    object-fit: cover;
    max-height: calc(320px * var(--flavor-scale, 1));
}

.flavor-copy,
.flavor-copy h3,
.flavor-copy p,
.flavor-copy .personality {
    color: inherit;
}

.flavor-copy {
    text-align: var(--flavor-text-align, start);
    align-self: var(--flavor-text-valign, start);
    display: flex;
    flex-direction: column;
    justify-content: var(--flavor-text-valign, start);
    min-width: 0;
}

.flavor-card .flavor-copy,
.flavor-card .flavor-copy h3,
.flavor-card .flavor-copy p,
.flavor-card .flavor-copy .personality {
    color: var(--flavor-text, var(--section-text, inherit));
}

.flavor-copy h3,
.flavor-copy__name {
    margin: 0;
    font-family: var(--font-display);
    font-size: calc(clamp(1.5rem, 3vw, 2.2rem) * var(--flavor-scale, 1));
}

html[dir="rtl"] .flavor-copy__name,
.flavor-copy[dir="rtl"] .flavor-copy__name {
    font-family: var(--flavor-name-ar-font, var(--font-display));
    font-size: calc(clamp(1.5rem, 3vw, 2.2rem) * var(--flavor-scale, 1) * (var(--flavor-name-ar-size, 100) / 100));
}

html[dir="rtl"] .flavor-copy__desc,
.flavor-copy[dir="rtl"] .flavor-copy__desc {
    font-family: var(--flavor-desc-ar-font, var(--font-body));
    font-size: calc(1em * var(--flavor-scale, 1) * (var(--flavor-desc-ar-size, 100) / 100));
}

.personality { font-weight: 700; }

.motion-seq.motion-seq-pending {
    opacity: 0;
    visibility: hidden;
}

.content-card.motion-seq.motion-seq-pending,
.content-card.motion-seq.is-motion-hidden,
.flavor-card.motion-seq.motion-seq-pending,
.flavor-card.motion-seq.is-motion-hidden,
.home-talent-card.motion-seq.motion-seq-pending,
.home-talent-card.motion-seq.is-motion-hidden,
.short-card.motion-seq.motion-seq-pending,
.short-card.motion-seq.is-motion-hidden,
.shorts-rail.motion-seq.motion-seq-pending,
.shorts-rail.motion-seq.is-motion-hidden,
.home-winner-card.motion-seq.motion-seq-pending,
.home-winner-card.motion-seq.is-motion-hidden {
    visibility: visible;
    opacity: 1;
}

/* Site background must stay visible even if motion flags linger. */
.page-bg.motion-seq.motion-seq-pending,
.page-bg.motion-seq.is-motion-hidden,
.page-bg.is-motion-hidden {
    opacity: 1 !important;
    visibility: visible !important;
}

.badge {
    position: absolute;
    top: 0.6rem;
    inset-inline-end: 0.6rem;
    border-radius: 999px;
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 800;
}
.badge.danger { background: #ea580c; color: #fff; }

.shorts-rail {
    --shorts-card-height: 100;
    --shorts-scale: calc(var(--shorts-card-height) / 100);
    --shorts-h: calc(420px * var(--shorts-scale));
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(calc(220px * var(--shorts-scale)), calc(260px * var(--shorts-scale)));
    gap: 0.9rem;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    padding-inline: 0;
    padding-block-start: 0.65rem;
    padding-bottom: 0.4rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.shorts-rail.locale-marquee {
    display: block;
}

.shorts-rail.locale-marquee .locale-marquee__track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    gap: 0.9rem;
}

.shorts-rail.locale-marquee .short-card {
    flex: 0 0 calc(240px * var(--shorts-scale, 1));
    width: calc(240px * var(--shorts-scale, 1));
    min-width: calc(240px * var(--shorts-scale, 1));
    max-width: calc(240px * var(--shorts-scale, 1));
}

.locale-marquee {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--brand-neon) 35%, transparent) transparent;
    touch-action: auto;
    overscroll-behavior-x: contain;
    user-select: none;
}

.locale-marquee[data-manual-drag="1"] {
    touch-action: pan-y;
    cursor: url('/assets/cursors/star-t-pointer.png') 6 2, url('/assets/cursors/star-t-pointer.svg') 6 2, grab;
}

.locale-marquee.is-dragging,
.flavor-carousel--wave.is-dragging,
.image-strip.is-dragging .image-strip__viewport,
.is-rail-scrub.is-dragging {
    cursor: url('/assets/cursors/star-t-pointer.png') 6 2, url('/assets/cursors/star-t-pointer.svg') 6 2, grabbing;
}

.flavor-carousel--wave[data-manual-drag="1"] {
    touch-action: pan-y;
    overscroll-behavior-x: contain;
    cursor: url('/assets/cursors/star-t-pointer.png') 6 2, url('/assets/cursors/star-t-pointer.svg') 6 2, grab;
}

.locale-marquee::-webkit-scrollbar {
    height: 6px;
}
.locale-marquee::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--brand-neon) 30%, rgba(255,255,255,0.15));
    border-radius: 999px;
}
.locale-marquee::-webkit-scrollbar-track {
    background: transparent;
}

.locale-marquee--static {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.locale-marquee--js {
    overflow-x: hidden;
    touch-action: pan-y;
}

.image-strip--static .image-strip__viewport {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.flavor-carousel[data-manual-drag="1"] .flavor-card,
.locale-marquee[data-manual-drag="1"] .short-card,
.locale-marquee[data-manual-drag="1"] .home-talent-card,
.locale-marquee[data-manual-drag="1"] .home-winner-card,
.locale-marquee[data-manual-drag="1"] .trend-card,
.image-strip[data-manual-drag="1"] .image-strip__item,
.content-cards[data-manual-drag="1"] .content-card {
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

[data-manual-drag="1"] img,
[data-manual-drag="1"] video {
    -webkit-user-drag: none;
    user-select: none;
}

[data-manual-drag="1"] :where(
    .flavor-card,
    .image-strip__item,
    .image-strip__card,
    .short-card,
    .home-talent-card,
    .home-winner-card,
    .trend-card,
    .content-card
),
[data-manual-drag="1"] :where(
    .flavor-card,
    .image-strip__item,
    .image-strip__card,
    .short-card,
    .home-talent-card,
    .home-winner-card,
    .trend-card,
    .content-card
) * {
    touch-action: pan-y !important;
}

.content-cards--row.content-cards--drag {
    overflow: visible;
}

.content-cards--row.content-cards--drag .content-cards__grid {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    align-items: start;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior-x: contain;
    cursor: grab;
    scrollbar-width: none;
}

.content-cards--row.content-cards--drag .content-cards__grid::-webkit-scrollbar {
    display: none;
    height: 0;
}

.content-cards--row.content-cards--drag .content-cards__grid.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

.content-cards--row.content-cards--drag .content-card,
.strip-cards-band__cards .content-cards--row.content-cards--drag .content-card {
    flex: 0 0 auto;
    touch-action: pan-y;
}

.locale-marquee__track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    will-change: transform;
}

.section-wave {
    --wave-amp: 22px;
    padding-block: calc(0.85rem + var(--wave-amp));
    overflow: hidden;
}

.section-wave .locale-marquee__track > * {
    will-change: translate;
}

[data-marquee-clone] {
    pointer-events: none;
    user-select: none;
}

.shorts-rail::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.shorts-rail.media-styled {
    transform-origin: center center;
}

.shorts-rail.media-styled .short-card {
    border-color: color-mix(in srgb, var(--media-tint) 55%, #243044);
    box-shadow: 0 0 28px color-mix(in srgb, var(--media-tint) 22%, transparent);
}

.shorts-rail.media-styled--transparent .short-card {
    border-color: #243044;
    box-shadow: none;
}

.shorts-rail.media-anim--fade-in .short-card,
.shorts-rail.media-anim--slide-up .short-card,
.shorts-rail.media-anim--scale-pop .short-card,
.shorts-rail.media-anim--rotate .short-card,
.shorts-rail.media-anim--fast-appear .short-card,
.shorts-rail.media-anim--fast-zoom .short-card,
.shorts-rail.media-anim--fast-spin .short-card {
    animation: mediaFadeIn calc((140 - var(--anim-speed)) * 14ms + 700ms) ease both;
}
.shorts-rail.media-anim--slide-up .short-card { animation-name: mediaSlideUp; }
.shorts-rail.media-anim--scale-pop .short-card { animation-name: mediaScalePop; }
.shorts-rail.media-anim--rotate .short-card { animation-name: mediaRotateIn; }
.shorts-rail.media-anim--fast-appear .short-card {
    animation-name: mediaFastAppear;
    animation-duration: calc((140 - var(--anim-speed)) * 2ms + 90ms);
    animation-timing-function: ease-out;
}
.shorts-rail.media-anim--fast-zoom .short-card {
    animation-name: mediaFastZoom;
    animation-duration: calc((140 - var(--anim-speed)) * 2ms + 110ms);
    animation-timing-function: cubic-bezier(.18,1.45,.32,1);
}
.shorts-rail.media-anim--fast-spin .short-card {
    animation-name: mediaFastSpin;
    animation-duration: calc((140 - var(--anim-speed)) * 2ms + 140ms);
    animation-timing-function: ease-out;
}
.shorts-rail.media-anim--float .short-card {
    animation: mediaFloat calc((140 - var(--anim-speed)) * 28ms + 3s) ease-in-out infinite alternate;
}
.shorts-rail.media-anim--pulse .short-card {
    animation: mediaPulse calc((140 - var(--anim-speed)) * 24ms + 2.4s) ease-in-out infinite;
}
.shorts-rail.media-anim--glow .short-card {
    animation: mediaGlow calc((140 - var(--anim-speed)) * 30ms + 2.8s) ease-in-out infinite alternate;
}
.shorts-rail.media-anim--ken-burns .short-card {
    animation: parallaxDrift calc((140 - var(--anim-speed)) * 80ms + 8s) ease-in-out infinite alternate;
}
.shorts-rail.media-anim .short-card:nth-child(2) { animation-delay: 0.08s; }
.shorts-rail.media-anim .short-card:nth-child(3) { animation-delay: 0.16s; }
.shorts-rail.media-anim .short-card:nth-child(4) { animation-delay: 0.24s; }
.shorts-rail.media-anim .short-card:nth-child(5) { animation-delay: 0.32s; }
.shorts-rail.media-anim .short-card:nth-child(6) { animation-delay: 0.4s; }

.shorts-rail.media-exit--fade-out .short-card {
    animation: mediaFadeOut calc((140 - var(--anim-speed)) * 14ms + 700ms) ease forwards;
}
.shorts-rail.media-exit--slide-down .short-card {
    animation: mediaSlideDown calc((140 - var(--anim-speed)) * 14ms + 700ms) ease forwards;
}
.shorts-rail.media-exit--slide-out .short-card {
    animation: mediaSlideOut calc((140 - var(--anim-speed)) * 14ms + 700ms) ease forwards;
}
.shorts-rail.media-exit--scale-out .short-card {
    animation: mediaScaleOut calc((140 - var(--anim-speed)) * 14ms + 700ms) ease forwards;
}
.shorts-rail.media-exit--rotate-out .short-card {
    animation: mediaRotateOut calc((140 - var(--anim-speed)) * 14ms + 760ms) ease forwards;
}

.short-card {
    background: #101827;
    border-radius: 1.2rem;
    overflow: hidden;
    border: 1px solid #243044;
    min-height: var(--shorts-h, 420px);
    height: auto;
    position: relative;
}

.short-card--frameless {
    border: none;
    box-shadow: none;
    border-radius: 0;
}

.short-card--no-bg {
    background: transparent;
}

.short-media,
.short-media--file {
    position: relative;
    width: 100%;
    height: var(--shorts-h, 420px);
    overflow: hidden;
    background: #000;
}

.short-card video,
.short-card iframe {
    width: 100%;
    height: var(--shorts-h, 420px);
    border: 0;
    object-fit: cover;
    background: #000;
    display: block;
}

.short-card--youtube .short-media,
.short-card--tiktok .short-media {
    position: relative;
    width: 100%;
    height: var(--shorts-h, 420px);
    overflow: hidden;
    background: #000;
}

/* Crop embed chrome so the video title never shows while playing. */
.short-card--youtube .short-media iframe {
    position: absolute;
    inset: -78px 0 -70px;
    width: 100%;
    height: calc(100% + 148px);
    pointer-events: none;
}

.short-card--tiktok .short-media iframe {
    position: absolute;
    inset: -64px 0 -88px;
    width: 100%;
    height: calc(100% + 152px);
    pointer-events: none;
}

/* Let the rail receive drag/scrub like flavor cards; buttons stay clickable. */
.shorts-rail.locale-marquee .short-card video,
.shorts-rail.locale-marquee .short-card iframe {
    pointer-events: none;
    touch-action: none;
    -webkit-user-drag: none;
    user-select: none;
}

.shorts-rail.locale-marquee .short-card .media-expand-btn,
.shorts-rail.locale-marquee .short-card .short-like-btn,
.shorts-rail.locale-marquee .short-card .short-stats button {
    pointer-events: auto;
}

.shorts-rail.locale-marquee .short-card.is-media-expanded video,
.shorts-rail.locale-marquee .short-card.is-media-expanded iframe {
    pointer-events: auto;
}

.trends-rail.locale-marquee .trend-card {
    touch-action: pan-y;
    -webkit-user-drag: none;
}

.short-card--youtube .short-media::before,
.short-card--youtube .short-media::after,
.short-card--tiktok .short-media::before,
.short-card--tiktok .short-media::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    pointer-events: none;
    background: #000;
}

.short-card--youtube .short-media::before,
.short-card--tiktok .short-media::before {
    top: 0;
    height: 42px;
}

.short-card--youtube .short-media::after,
.short-card--tiktok .short-media::after {
    bottom: 0;
    height: 46px;
}

.short-card.placeholder {
    display: grid;
    place-items: center;
    color: var(--muted);
    padding: 1rem;
}

.empty-state { text-align: center; }
.text-link { text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }

.will-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity calc((140 - var(--anim-speed)) * 12ms + 420ms) ease,
        transform calc((140 - var(--anim-speed)) * 12ms + 420ms) ease;
}

.will-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

body.fx-off .will-reveal,
body[data-anim-text="0"] .will-reveal {
    opacity: 1;
    transform: none;
    transition: none;
}

body[data-anim-text="0"] .cms-text:not([data-motion-enter-speed]),
body[data-anim-text="0"] .cms-text:not([data-motion-enter-speed]).media-anim,
body[data-anim-text="0"] .cms-text:not([data-motion-enter-speed])[class*="media-anim--"] {
    animation: none !important;
}

body[data-anim-text="0"] .cms-text.motion-seq-pending,
body[data-anim-text="0"] .cms-text.is-motion-hidden {
    opacity: 1 !important;
    visibility: visible !important;
}

body.fx-off .flavor-card .flavor-product img,
body.fx-off .flavor-card .flavor-product video {
    animation: none !important;
}

@keyframes riseBubble {
    to { transform: translateY(-110vh) scale(1.4); opacity: 0; }
}
@keyframes fallIce {
    to { transform: translateY(110vh) rotate(140deg); opacity: 0; }
}
@keyframes splashDrop {
    0% { transform: translateY(0) scaleY(1); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translateY(40vh) scaleY(1.5); opacity: 0; }
}
@keyframes summerSpark {
    0% { transform: translateY(0) scale(0.6) rotate(0deg); opacity: 0; }
    15% { opacity: 1; }
    100% { transform: translateY(110vh) scale(1.2) rotate(160deg); opacity: 0; }
}
@keyframes winterSnow {
    0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
    10% { opacity: 0.9; }
    100% { transform: translate3d(24px, 110vh, 0) rotate(220deg); opacity: 0; }
}
@keyframes autumnLeaf {
    0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
    12% { opacity: 1; }
    50% { transform: translate3d(-28px, 55vh, 0) rotate(120deg); }
    100% { transform: translate3d(18px, 110vh, 0) rotate(260deg); opacity: 0; }
}
@keyframes springPetal {
    0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(0.7); opacity: 0; }
    15% { opacity: 0.95; }
    100% { transform: translate3d(-20px, 110vh, 0) rotate(-180deg) scale(1.1); opacity: 0; }
}

/* Upgraded shape-1 / shape-2 motions */
@keyframes fxBubbleRise {
    0% { transform: translate3d(0, 0, 0) scale(0.55); opacity: 0; }
    12% { opacity: calc(var(--fx-opacity, 70) / 100); }
    50% { transform: translate3d(var(--fx-drift), -55vh, 0) scale(1); }
    100% { transform: translate3d(calc(var(--fx-drift) * -0.4), -115vh, 0) scale(1.35); opacity: 0; }
}
@keyframes fxIceFall {
    0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(0.7); opacity: 0; }
    10% { opacity: calc(var(--fx-opacity, 70) / 100); }
    100% { transform: translate3d(var(--fx-drift), 115vh, 0) rotate(var(--fx-spin)) scale(1.05); opacity: 0; }
}
@keyframes fxSplashDrop {
    0% { transform: translate3d(0, 0, 0) scaleY(0.4) scaleX(0.7); opacity: 0; }
    18% { opacity: calc(var(--fx-opacity, 70) / 100); }
    55% { transform: translate3d(calc(var(--fx-drift) * 0.35), 22vh, 0) scaleY(1.25) scaleX(0.85); }
    100% { transform: translate3d(var(--fx-drift), 48vh, 0) scaleY(1.6) scaleX(0.55); opacity: 0; }
}
@keyframes fxStarTwinkle {
    0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(0.4); opacity: 0; filter: brightness(1); }
    12% { opacity: calc(var(--fx-opacity, 70) / 100); }
    40% { transform: translate3d(calc(var(--fx-drift) * 0.5), 40vh, 0) rotate(90deg) scale(1.15); filter: brightness(1.35); }
    70% { filter: brightness(0.9); }
    100% { transform: translate3d(var(--fx-drift), 115vh, 0) rotate(var(--fx-spin)) scale(0.75); opacity: 0; filter: brightness(1.5); }
}
@keyframes fxHeartFloat {
    0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(0.55); opacity: 0; }
    14% { opacity: calc(var(--fx-opacity, 70) / 100); }
    45% { transform: translate3d(calc(var(--fx-drift) * -0.7), 48vh, 0) rotate(-18deg) scale(1.1); }
    100% { transform: translate3d(var(--fx-drift), 115vh, 0) rotate(22deg) scale(0.9); opacity: 0; }
}
@keyframes fxCitrusSpin {
    0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(0.5); opacity: 0; }
    12% { opacity: calc(var(--fx-opacity, 70) / 100); }
    100% { transform: translate3d(var(--fx-drift), 115vh, 0) rotate(var(--fx-spin)) scale(1.2); opacity: 0; }
}
@keyframes fxSnowDrift {
    0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(0.6); opacity: 0; }
    10% { opacity: calc(var(--fx-opacity, 70) / 100); }
    50% { transform: translate3d(calc(var(--fx-drift) * 0.8), 55vh, 0) rotate(140deg); }
    100% { transform: translate3d(calc(var(--fx-drift) * -0.3), 115vh, 0) rotate(var(--fx-spin)); opacity: 0; }
}
@keyframes fxLeafSway {
    0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(0.7); opacity: 0; }
    12% { opacity: calc(var(--fx-opacity, 70) / 100); }
    35% { transform: translate3d(calc(var(--fx-drift) * -1), 32vh, 0) rotate(80deg); }
    70% { transform: translate3d(calc(var(--fx-drift) * 0.6), 72vh, 0) rotate(-40deg); }
    100% { transform: translate3d(var(--fx-drift), 115vh, 0) rotate(var(--fx-spin)); opacity: 0; }
}
@keyframes fxPetalDrift {
    0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(0.55); opacity: 0; }
    14% { opacity: calc(var(--fx-opacity, 70) / 100); }
    100% { transform: translate3d(var(--fx-drift), 115vh, 0) rotate(calc(var(--fx-spin) * -1)) scale(1.15); opacity: 0; }
}
@keyframes fxSparkleRise {
    0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(0.3); opacity: 0; filter: brightness(1); }
    10% { opacity: calc(var(--fx-opacity, 70) / 100); filter: brightness(1.6); }
    50% { transform: translate3d(calc(var(--fx-drift) * 0.5), -55vh, 0) rotate(120deg) scale(1.1); filter: brightness(1.1); }
    100% { transform: translate3d(var(--fx-drift), -115vh, 0) rotate(var(--fx-spin)) scale(0.5); opacity: 0; filter: brightness(1.8); }
}
@keyframes fxDiamondFall {
    0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(0.5); opacity: 0; }
    12% { opacity: calc(var(--fx-opacity, 70) / 100); }
    40% { filter: brightness(1.4); }
    100% { transform: translate3d(var(--fx-drift), 115vh, 0) rotate(var(--fx-spin)) scale(1.05); opacity: 0; }
}
@keyframes parallaxDrift {
    from { transform: scale(1.04) translateY(0); }
    to { transform: scale(1.08) translateY(-12px); }
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

.site-footer {
    position: relative;
    z-index: 1;
    margin-top: 1.75rem;
    padding: 0;
    overflow: hidden;
    border-top: 1px solid color-mix(in srgb, var(--brand-neon) 28%, transparent);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--brand-bg) 88%, #000 12%) 0%,
            color-mix(in srgb, var(--brand-bg) 70%, #03050a 30%) 100%);
}

.footer-glow {
    position: absolute;
    inset: auto -10% -60% 55%;
    height: 90%;
    pointer-events: none;
    background: radial-gradient(
        ellipse at center,
        color-mix(in srgb, var(--brand-neon) 14%, transparent) 0%,
        transparent 70%
    );
    opacity: 0.4;
}

.footer-inner {
    position: relative;
    z-index: 1;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0.85rem clamp(0.95rem, 2.5vw, 1.35rem) 0.65rem;
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
    gap: 0.75rem 1.25rem;
    align-items: center;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    max-width: 18rem;
    min-width: 0;
}

.footer-brand__mark {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    text-decoration: none;
}

.footer-logo {
    display: block;
    width: auto;
    height: clamp(1.55rem, 3.2vw, 1.95rem);
    object-fit: contain;
}

.footer-brand__name {
    display: inline-block;
    font-family: var(--font-display);
    font-size: clamp(1rem, 2.2vw, 1.25rem);
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.1;
    color: var(--brand-neon);
}

.footer-tagline,
.footer-muted,
.footer-copy {
    color: var(--muted);
    line-height: 1.35;
}

.footer-tagline {
    margin: 0;
    font-size: 0.78rem;
    max-width: 28ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.footer-nav,
.footer-social {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.footer-nav {
    align-items: center;
}

.footer-social {
    align-items: flex-end;
}

.footer-nav h3,
.footer-social h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--brand-neon) 82%, var(--muted));
    line-height: 1;
}

.footer-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.2rem 0.15rem;
}

.footer-nav__list a,
.footer-nav > a {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.28rem 0.55rem;
    color: color-mix(in srgb, var(--ink) 86%, transparent);
    font-weight: 650;
    font-size: 0.84rem;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 999px;
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.footer-nav__list a:hover,
.footer-nav__list a:focus-visible,
.footer-nav > a:hover,
.footer-nav > a:focus-visible {
    color: var(--brand-neon);
    border-color: color-mix(in srgb, var(--brand-neon) 35%, transparent);
    background: color-mix(in srgb, var(--brand-neon) 8%, transparent);
    outline: none;
}

html[dir="rtl"] .footer-nav__list a:hover,
html[dir="rtl"] .footer-nav__list a:focus-visible,
html[dir="rtl"] .footer-nav > a:hover,
html[dir="rtl"] .footer-nav > a:focus-visible,
html[dir="ltr"] .footer-nav__list a:hover,
html[dir="ltr"] .footer-nav__list a:focus-visible,
html[dir="ltr"] .footer-nav > a:hover,
html[dir="ltr"] .footer-nav > a:focus-visible {
    transform: none;
}

.social-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.32rem 0.65rem;
    border: 1px solid color-mix(in srgb, var(--brand-neon) 24%, transparent);
    border-radius: 0.55rem;
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--ink);
    background: color-mix(in srgb, var(--brand-bg) 55%, #0a1020 45%);
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.social-link:hover,
.social-link:focus-visible {
    color: var(--brand-neon);
    border-color: color-mix(in srgb, var(--brand-neon) 60%, transparent);
    background: color-mix(in srgb, var(--brand-neon) 10%, transparent);
    outline: none;
    transform: translateY(-1px);
}

.social-link svg {
    width: 0.95rem;
    height: 0.95rem;
    flex-shrink: 0;
}

.social-link .social-symbol {
    font-size: 0.9rem;
    line-height: 1;
}

.social-links.social-shape--rounded .social-link { border-radius: 0.55rem; }
.social-links.social-shape--pill .social-link { border-radius: 999px; }
.social-links.social-shape--square .social-link { border-radius: 0.2rem; }
.social-links.social-shape--circle .social-link { border-radius: 999px; }

.social-links.social-label-off .social-link {
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    gap: 0;
}

.social-links.social-label-off.social-shape--circle .social-link {
    border-radius: 50%;
}

.social-links.social-label-off.social-shape--square .social-link {
    border-radius: 0.3rem;
}

.social-links.social-label-off .social-link svg {
    width: 1rem;
    height: 1rem;
}

.social-links.social-label-off .social-link .social-symbol {
    font-size: 1rem;
}

.footer-muted {
    margin: 0;
    font-size: 0.78rem;
}

/* —— Contact email (distinctive open panel) —— */
.footer-social .contact-mail-trigger {
    margin-top: 0.45rem;
}

.contact-mail-trigger {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.48rem 0.85rem;
    border: 1px solid color-mix(in srgb, var(--brand-neon) 42%, transparent);
    border-radius: 999px;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--brand-neon) 16%, transparent) 0%,
            color-mix(in srgb, #061018 70%, transparent) 100%);
    color: var(--brand-neon);
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-neon) 0%, transparent);
}

.contact-mail-trigger:hover,
.contact-mail-trigger:focus-visible {
    outline: none;
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--brand-neon) 72%, #fff 10%);
    box-shadow: 0 0 22px color-mix(in srgb, var(--brand-neon) 28%, transparent);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--brand-neon) 26%, transparent) 0%,
            color-mix(in srgb, #061018 55%, transparent) 100%);
}

.contact-mail-trigger__icon {
    display: inline-flex;
    color: inherit;
}

.contact-mail-dialog {
    padding: 0;
    border: 0;
    background: transparent;
    max-width: min(92vw, 440px);
    width: 100%;
    color: var(--ink, #f4f7fb);
    overflow: hidden;
}

.contact-mail-dialog::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.contact-mail-dialog::backdrop {
    background:
        radial-gradient(ellipse at 50% 35%,
            color-mix(in srgb, var(--brand-neon) 18%, transparent) 0%,
            transparent 55%),
        color-mix(in srgb, #02060c 78%, transparent);
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.28s ease;
}

.contact-mail-dialog.is-open::backdrop {
    opacity: 1;
}

.contact-mail-dialog__panel {
    position: relative;
    overflow: hidden;
    padding: 1rem 1.1rem 1.15rem;
    border-radius: 1.35rem;
    border: 1px solid color-mix(in srgb, var(--brand-neon) 38%, transparent);
    background:
        linear-gradient(165deg,
            color-mix(in srgb, #0b1520 92%, var(--brand-neon) 8%) 0%,
            #050a10 55%,
            #03060b 100%);
    box-shadow:
        0 28px 60px color-mix(in srgb, #000 55%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
    transform: translateY(18px) scale(0.94) rotateX(8deg);
    opacity: 0;
    transform-origin: 50% 80%;
    transition:
        transform 0.38s cubic-bezier(0.2, 0.9, 0.2, 1.15),
        opacity 0.28s ease;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.contact-mail-dialog__panel::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.contact-mail-dialog.is-open .contact-mail-dialog__panel {
    transform: translateY(0) scale(1) rotateX(0deg);
    opacity: 1;
}

.contact-mail-dialog.is-closing .contact-mail-dialog__panel {
    transform: translateY(10px) scale(0.96);
    opacity: 0;
}

.contact-mail-dialog__glow {
    position: absolute;
    inset: -30% -20% auto;
    height: 55%;
    pointer-events: none;
    background: radial-gradient(
        ellipse at center,
        color-mix(in srgb, var(--brand-neon) 22%, transparent) 0%,
        transparent 70%
    );
    opacity: 0.55;
}

.contact-mail-dialog__bar {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    margin: -0.35rem -0.2rem 0.35rem 0;
}

.contact-mail-dialog__close {
    appearance: none;
    border: 1px solid color-mix(in srgb, var(--brand-neon) 22%, transparent);
    background: color-mix(in srgb, #000 35%, transparent);
    color: var(--muted, #9aa7b5);
    border-radius: 999px;
    padding: 0.28rem 0.7rem;
    font-size: 0.75rem;
    cursor: pointer;
}

.contact-mail-dialog__close:hover,
.contact-mail-dialog__close:focus-visible {
    color: var(--brand-neon);
    border-color: color-mix(in srgb, var(--brand-neon) 55%, transparent);
    outline: none;
}

.contact-mail-dialog__seal {
    position: relative;
    z-index: 1;
    width: 3.4rem;
    height: 3.4rem;
    margin: 0 auto 0.45rem;
    display: grid;
    place-items: center;
}

.contact-mail-dialog__seal-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--brand-neon) 45%, transparent);
    background:
        radial-gradient(circle at 35% 30%,
            color-mix(in srgb, var(--brand-neon) 28%, transparent) 0%,
            transparent 55%),
        color-mix(in srgb, #071018 80%, transparent);
    box-shadow: 0 0 24px color-mix(in srgb, var(--brand-neon) 22%, transparent);
    animation: contactSealPulse 2.4s ease-in-out infinite;
}

.contact-mail-dialog__seal-icon {
    position: relative;
    z-index: 1;
    color: var(--brand-neon);
    display: grid;
    place-items: center;
    transform: translateY(2px);
    animation: contactSealPop 0.55s cubic-bezier(0.2, 0.9, 0.25, 1.2) both;
    animation-delay: 0.08s;
}

.contact-mail-dialog__title {
    position: relative;
    z-index: 1;
    margin: 0;
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 3.5vw, 1.45rem);
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #f3f8ff;
}

.contact-mail-dialog__sub,
.contact-mail-dialog__hint {
    position: relative;
    z-index: 1;
    margin: 0.4rem 0 0;
    text-align: center;
    color: var(--muted, #9aa7b5);
    font-size: 0.88rem;
    line-height: 1.45;
}

.contact-mail-dialog__hint {
    margin-top: 0.65rem;
    font-size: 0.78rem;
    opacity: 0.85;
}

.contact-mail-form {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.55rem;
    text-align: start;
    margin-top: 0.65rem;
}

.contact-mail-form__field {
    display: grid;
    gap: 0.25rem;
}

.contact-mail-form__field label {
    font-size: 0.78rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--ink, #f4f7fb) 88%, transparent);
}

.contact-mail-form__field input,
.contact-mail-form__field textarea {
    width: 100%;
    box-sizing: border-box;
    border-radius: 0.7rem;
    border: 1px solid color-mix(in srgb, var(--brand-neon) 22%, transparent);
    background: color-mix(in srgb, #000 28%, transparent);
    color: var(--ink, #f4f7fb);
    padding: 0.55rem 0.75rem;
    font: inherit;
    outline: none;
    resize: none;
    min-height: 2.4rem;
}

.contact-mail-form__field textarea {
    min-height: 4.6rem;
    max-height: 4.6rem;
}

.contact-mail-form__field input:focus,
.contact-mail-form__field textarea:focus {
    border-color: color-mix(in srgb, var(--brand-neon) 55%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-neon) 18%, transparent);
}

.contact-mail-form__status {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.4;
    text-align: center;
}

.contact-mail-form__status[data-state="success"] {
    color: color-mix(in srgb, #7CFFB2 80%, #fff);
}

.contact-mail-form__status[data-state="error"] {
    color: color-mix(in srgb, #ff7b7b 85%, #fff);
}

.contact-mail-form__submit {
    width: 100%;
    justify-content: center;
}

.contact-mail-form__submit:disabled {
    opacity: 0.65;
    cursor: wait;
}

body[data-theme-mode="light"] .contact-mail-form__field input,
body[data-theme-mode="light"] .contact-mail-form__field textarea {
    background: color-mix(in srgb, #fff 78%, transparent);
    color: #132033;
}

.contact-mail-dialog__address {
    position: relative;
    z-index: 1;
    margin: 1.05rem auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: fit-content;
    max-width: 100%;
    padding: 0.7rem 0.95rem;
    border-radius: 0.95rem;
    border: 1px dashed color-mix(in srgb, var(--brand-neon) 40%, transparent);
    background: color-mix(in srgb, #000 28%, transparent);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.contact-mail-dialog__address:hover,
.contact-mail-dialog__address:focus-within {
    border-style: solid;
    border-color: color-mix(in srgb, var(--brand-neon) 70%, transparent);
    background: color-mix(in srgb, var(--brand-neon) 10%, #000 40%);
    box-shadow: 0 0 18px color-mix(in srgb, var(--brand-neon) 18%, transparent);
}

.contact-mail-dialog__at {
    flex: 0 0 auto;
    width: 1.7rem;
    height: 1.7rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.85rem;
    color: #061018;
    background: var(--brand-neon);
}

.contact-mail-dialog__email {
    font-family: var(--font-display);
    font-size: clamp(0.82rem, 2.8vw, 0.98rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--brand-neon);
    text-decoration: none;
    word-break: break-all;
}

.contact-mail-dialog__email:hover,
.contact-mail-dialog__email:focus-visible {
    text-decoration: underline;
    outline: none;
}

.contact-mail-dialog__actions {
    position: relative;
    z-index: 1;
    margin-top: 1.15rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-content: center;
}

.contact-mail-dialog__actions .btn {
    min-width: 9.5rem;
}

.contact-mail-dialog__copy.is-copied {
    filter: saturate(1.15);
    box-shadow: 0 0 18px color-mix(in srgb, var(--brand-neon) 35%, transparent);
}

@keyframes contactSealPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.04); opacity: 0.88; }
}

@keyframes contactSealPop {
    from { transform: translateY(10px) scale(0.7); opacity: 0; }
    to { transform: translateY(2px) scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .contact-mail-trigger,
    .contact-mail-dialog::backdrop,
    .contact-mail-dialog__panel,
    .contact-mail-dialog__seal-ring,
    .contact-mail-dialog__seal-icon {
        animation: none !important;
        transition: none !important;
    }
    .contact-mail-dialog.is-open .contact-mail-dialog__panel,
    .contact-mail-dialog__panel {
        transform: none;
        opacity: 1;
    }
    .contact-mail-dialog::backdrop {
        opacity: 1;
    }
}

body[data-theme-mode="light"] .contact-mail-dialog__panel {
    background:
        linear-gradient(165deg,
            #f7fafc 0%,
            #eef3f7 55%,
            #e7eef4 100%);
    color: #102030;
}

body[data-theme-mode="light"] .contact-mail-dialog__title {
    color: #102030;
}

body[data-theme-mode="light"] .contact-mail-dialog__email {
    color: color-mix(in srgb, var(--brand-neon) 55%, #0a5 45%);
}

.footer-bar {
    position: relative;
    z-index: 1;
    border-top: 1px solid color-mix(in srgb, var(--brand-neon) 12%, transparent);
    background: color-mix(in srgb, #000 22%, transparent);
}

.footer-copy {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0.45rem clamp(0.95rem, 2.5vw, 1.35rem) 0.55rem;
    text-align: center;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
}

@media (max-width: 1100px) {
    .hero-media {
        --show-w: min(100%, 420px);
    }
}

@media (max-width: 920px) {
    .site-header {
        gap: 0.65rem;
        padding: 0.7rem clamp(0.75rem, 2.5vw, 1.25rem);
    }
    .hero {
        gap: 1rem;
        padding: clamp(0.85rem, 3vw, 1.5rem);
        min-height: 0;
    }
    .hero-media {
        --show-w: min(100%, 360px);
        max-width: 100%;
        max-height: min(42vh, 320px);
    }
    .hero-media.is-hero-fit {
        max-height: min(42vh, 320px);
    }
    .hero-media.hero-media--free-size,
    .hero-media.hero-media--free-size.is-hero-fit,
    .hero-media.hero-media--free-size.is-hero-natural,
    .hero-media.hero-media--free-size.is-hero-model {
        width: min(100%, var(--show-w));
        height: auto;
        max-width: 100%;
        max-height: min(46vh, 340px);
    }
    .hero h1 {
        font-size: clamp(1.65rem, 7.2vw, 2.6rem);
        line-height: 1.08;
    }
    .hero-sub {
        margin-top: 0.65rem;
        font-size: 0.95rem;
        line-height: 1.5;
        max-width: 36ch;
    }
    .flavor-card,
    .flavor-card[data-image-pos="left"],
    .flavor-card[data-image-pos="right"] {
        grid-template-columns: 1fr;
        min-height: 0;
    }
    .flavor-visual .flavor-product img,
    .flavor-visual .flavor-product video,
    .flavor-visual .flavor-product .store-model {
        width: min(100%, calc(280px * var(--flavor-scale, 1) * var(--flavor-image-scale, 1)));
        max-height: none;
        margin-inline: auto;
    }
    .footer-inner {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.65rem 1rem;
        padding-block: 0.75rem 0.55rem;
    }
    .footer-brand {
        grid-column: 1 / -1;
        max-width: none;
        flex-direction: row;
        align-items: center;
        gap: 0.65rem;
    }
    .footer-tagline {
        max-width: none;
        flex: 1 1 auto;
    }
    .footer-nav {
        align-items: flex-start;
    }
    .footer-nav__list {
        justify-content: flex-start;
    }
    .footer-social {
        align-items: flex-end;
    }
}

@media (max-width: 720px) {
    .site-header {
        gap: 0.55rem;
    }
    .hero {
        grid-template-columns: 1fr;
        min-height: 0;
        gap: 0.85rem;
        padding: 0.85rem 0.85rem 1.1rem;
        align-items: start;
    }
    .hero-media {
        --show-w: 100%;
        width: 100%;
        max-width: 100%;
        max-height: min(40vh, 280px);
        justify-self: center;
        order: 1;
    }
    .hero-media.hero-media--free-size,
    .hero-media.hero-media--free-size.is-hero-fit,
    .hero-media.hero-media--free-size.is-hero-natural,
    .hero-media.hero-media--free-size.is-hero-model {
        width: min(100%, var(--show-w));
        height: auto;
        max-height: min(42vh, 280px);
    }
    .hero-copy {
        order: 2;
    }
    .hero.hero--media-full,
    .hero.hero--container-full {
        padding-inline: 0;
    }
    .hero.hero--text-on-media .hero-media,
    .hero.hero--text-on-media .hero-copy {
        order: unset;
    }
    .hero.hero--media-full .hero-media,
    .hero.hero--media-full .hero-media.is-hero-fit,
    .hero.hero--text-on-media .hero-media,
    .hero.hero--text-on-media .hero-media.is-hero-fit {
        max-height: min(42vh, 280px);
    }
    .hero-media.is-hero-fit {
        max-height: min(40vh, 280px);
    }
    .hero h1 {
        font-size: clamp(1.55rem, 8vw, 2.25rem);
    }
    .brand-kicker {
        font-size: 0.72rem;
        letter-spacing: 0.12em;
    }
    .hero-sub {
        margin-top: 0.5rem;
        font-size: 0.9rem;
        max-width: none;
    }
    .hero-actions {
        margin-top: 0.85rem;
        gap: 0.55rem;
    }
    .empty-state {
        padding-inline: 0.75rem;
    }
    .carousel-section,
    .shorts-section {
        padding-inline: 0;
    }
    .flavor-carousel {
        --flavor-scale: min(1.08, calc(var(--flavor-card-size, 100) / 100 * 0.84));
        --flavor-image-scale: min(1.12, calc(var(--flavor-image-size, 100) / 100 * 0.88));
        display: block;
        grid-auto-columns: max-content;
        padding: 0.75rem 0 0.85rem;
        gap: min(var(--flavor-gap, 20px), 14px);
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 0;
        box-sizing: border-box;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }
    .flavor-carousel:not(.flavor-carousel--wave) {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .flavor-carousel--wave {
        padding-block: calc(0.75rem + min(18px, 8vw));
        overflow-x: hidden;
    }
    .flavor-carousel--wave .flavor-wave-track {
        display: flex;
        width: max-content;
        max-width: none;
        gap: var(--flavor-gap, 20px);
        column-gap: var(--flavor-gap, 20px);
    }
    .flavor-carousel--wave .flavor-card,
    .flavor-card,
    .flavor-card[data-image-pos="left"],
    .flavor-card[data-image-pos="right"],
    .flavor-card[data-image-pos="top"],
    .flavor-card[data-image-pos="bottom"] {
        grid-template-columns: 1fr;
        flex: 0 0 auto;
        width: min(86vw, calc(260px * var(--flavor-scale, 1)));
        max-width: min(86vw, calc(260px * var(--flavor-scale, 1)));
        min-width: 0;
        min-height: 0;
        padding: 0.7rem;
        gap: 0.65rem;
        font-size: clamp(0.84rem, 3.4vw, 0.98rem);
        box-sizing: border-box;
    }
    .flavor-visual .flavor-product img,
    .flavor-visual .flavor-product video,
    .flavor-visual .flavor-product .store-model {
        width: min(90%, calc(210px * var(--flavor-scale, 1) * var(--flavor-image-scale, 1)));
        max-height: min(46vw, calc(240px * var(--flavor-scale, 1) * var(--flavor-image-scale, 1)));
        object-fit: contain;
        margin-inline: auto;
    }
    .flavor-copy h3,
    .flavor-copy__name {
        font-size: clamp(1.05rem, 5vw, 1.35rem);
    }
    html[dir="rtl"] .flavor-copy__name,
    .flavor-copy[dir="rtl"] .flavor-copy__name {
        font-size: calc(clamp(1.05rem, 5vw, 1.35rem) * (var(--flavor-name-ar-size, 100) / 100));
    }
    .section-head {
        align-items: flex-start;
    }
    .carousel-nav {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        gap: 0.4rem;
    }
    .shorts-rail {
        --shorts-scale: min(1.12, calc(var(--shorts-card-height, 100) / 100 * 0.86));
        --shorts-h: min(58vh, calc(260px * var(--shorts-scale)));
        grid-auto-columns: minmax(0, min(72vw, calc(200px * var(--shorts-scale))));
        gap: 0.65rem;
        padding-inline: 0;
    }
    .shorts-rail.locale-marquee .short-card {
        flex: 0 0 auto;
        width: min(72vw, calc(200px * var(--shorts-scale, 1)));
        min-width: 0;
        max-width: min(72vw, calc(200px * var(--shorts-scale, 1)));
    }
    .short-card,
    .short-media,
    .short-media--file,
    .short-card--youtube .short-media,
    .short-card--tiktok .short-media,
    .short-card video,
    .short-card iframe {
        height: var(--shorts-h, 320px);
        min-height: 0;
        max-height: none;
    }
    /* Keep likes/views visible: card must not clip .short-meta under the video height */
    .short-card {
        height: auto;
        max-height: none;
        min-height: 0;
        border-radius: 1rem;
        display: flex;
        flex-direction: column;
    }
    .short-media,
    .short-media--file,
    .short-card--youtube .short-media,
    .short-card--tiktok .short-media {
        flex: 0 0 auto;
    }
    .short-meta {
        position: relative;
        z-index: 6;
        flex: 0 0 auto;
        padding: 0.5rem 0.55rem 0.6rem;
        background: color-mix(in srgb, #0b1220 88%, transparent);
        gap: 0.4rem;
    }
    .short-stats {
        flex-shrink: 0;
        gap: 0.4rem;
    }
    .short-like-btn,
    .short-views {
        min-height: 2rem;
        display: inline-flex;
        align-items: center;
        font-size: 0.8rem;
    }
    /* Playing state must not cover/hide meta row */
    .short-card.is-media-playing:not(.is-media-expanded) {
        transform: none !important;
        z-index: 3;
    }
    .short-card.is-media-playing .short-meta {
        z-index: 7;
    }
    .short-card--youtube .short-media iframe {
        inset: -48px 0 -44px;
        height: calc(100% + 92px);
    }
    .short-card--tiktok .short-media iframe {
        inset: -48px 0 -44px;
        height: calc(100% + 92px);
    }
    .footer-inner {
        grid-template-columns: 1fr;
        gap: 0.7rem;
        padding: 0.7rem 0.85rem 0.5rem;
    }
    .footer-brand {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
    }
    .footer-tagline {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .footer-nav,
    .footer-social {
        align-items: flex-start;
    }
    .footer-nav__list {
        justify-content: flex-start;
    }
    .social-links {
        justify-content: flex-start;
    }
    .footer-copy {
        padding-block: 0.4rem 0.5rem;
    }
    .home-talents-section {
        --talents-scale: min(1.1, calc(var(--talents-card-size, 100) / 100 * 0.86));
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
        box-sizing: border-box;
    }
    .home-talents-grid {
        gap: 0.65rem;
    }
    .home-talents-grid:not(.locale-marquee) .home-talent-card {
        width: min(70vw, calc(156px * var(--talents-scale, 1)), 100%);
        max-width: calc((100% - 0.65rem) / 2);
        font-size: clamp(0.78rem, 3.2vw, 0.92rem);
    }
    .home-talents-grid.locale-marquee .home-talent-card {
        flex: 0 0 auto;
        width: min(70vw, calc(156px * var(--talents-scale, 1)));
        min-width: 0;
        max-width: min(70vw, calc(156px * var(--talents-scale, 1)));
        font-size: clamp(0.78rem, 3.2vw, 0.92rem);
    }
    .home-winners-section {
        --winners-scale: min(1.1, calc(var(--winners-card-height, 100) / 100 * 0.86));
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
        box-sizing: border-box;
    }
    .home-winners-grid:not(.locale-marquee) .home-winner-card {
        width: min(70vw, calc(156px * var(--winners-scale, 1)), 100%);
        max-width: calc((100% - 0.65rem) / 2);
        font-size: clamp(0.78rem, 3.2vw, 0.92rem);
    }
    .home-winners-grid.locale-marquee .home-winner-card {
        flex: 0 0 auto;
        width: min(70vw, calc(156px * var(--winners-scale, 1)));
        min-width: 0;
        max-width: min(70vw, calc(156px * var(--winners-scale, 1)));
        font-size: clamp(0.78rem, 3.2vw, 0.92rem);
    }
    .home-winner-card {
        min-width: 0;
        padding: 0;
    }
    .trends-section { margin-block: 0; }
    .assistant-panel { width: min(320px, calc(100dvw - 1.2rem)); max-width: calc(100% - 0.5rem); }
    .product-section {
        width: calc(100% - 1rem);
        max-width: 100%;
        margin-inline: auto !important;
        border-radius: 1rem;
    }
    .carousel-section,
    .shorts-section,
    .home-talents-section,
    .home-winners-section {
        padding-bottom: 0;
        margin-block: 0;
    }
    .star-assistant {
        inset-inline-end: 0.75rem;
        bottom: var(--assistant-bottom, max(0.9rem, calc(env(safe-area-inset-bottom, 0px) + 0.85rem)));
    }
}

@media (max-width: 560px) {
    .site-logo-text {
        font-size: 1.15rem;
    }
    .site-logo-text.cms-text {
        font-size: calc(1.15rem * var(--cms-size, 100) / 100);
    }
    .chip, .btn {
        font-size: 0.86rem;
        padding: 0.55rem 0.9rem;
    }
    .hero {
        padding: 0.7rem 0.75rem 1rem;
        gap: 0.7rem;
    }
    .hero-media,
    .hero-media.is-hero-fit {
        max-height: min(36vh, 240px);
        --show-w: 100%;
        width: 100%;
        max-width: 100%;
    }
    .hero h1 {
        font-size: clamp(1.4rem, 8.5vw, 2rem);
    }
    .hero-sub {
        font-size: 0.86rem;
        line-height: 1.45;
    }
    .hero-actions {
        flex-wrap: wrap;
        margin-top: 0.7rem;
    }
    .hero-actions .btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
    .flavor-carousel {
        grid-auto-columns: max-content;
        padding-inline: 0;
        gap: min(var(--flavor-gap, 20px), 12px);
        min-height: 0;
    }
    .flavor-carousel--wave .flavor-card,
    .flavor-card,
    .flavor-card[data-image-pos="left"],
    .flavor-card[data-image-pos="right"] {
        width: min(86vw, calc(250px * var(--flavor-scale, 1)));
        max-width: min(86vw, calc(250px * var(--flavor-scale, 1)));
        min-width: 0;
    }
    .flavor-visual .flavor-product img,
    .flavor-visual .flavor-product video,
    .flavor-visual .flavor-product .store-model {
        width: min(92%, calc(220px * var(--flavor-scale, 1) * var(--flavor-image-scale, 1)));
        max-height: min(48vw, calc(260px * var(--flavor-scale, 1) * var(--flavor-image-scale, 1)));
    }
    .shorts-rail {
        --shorts-h: min(56vh, calc(240px * var(--shorts-scale)));
        grid-auto-columns: minmax(0, min(72vw, calc(190px * var(--shorts-scale))));
    }
    .shorts-rail.locale-marquee .short-card {
        flex: 0 0 auto;
        width: min(72vw, calc(190px * var(--shorts-scale, 1)));
        min-width: 0;
        max-width: min(72vw, calc(190px * var(--shorts-scale, 1)));
    }
    .home-talent-card {
        font-size: clamp(0.78rem, 3.2vw, 0.92rem);
    }
    .home-talents-grid:not(.locale-marquee) .home-talent-card {
        width: min(72vw, calc(148px * var(--talents-scale, 1)), 100%);
        max-width: calc((100% - 0.65rem) / 2);
    }
    .home-winner-card {
        font-size: clamp(0.78rem, 3.2vw, 0.92rem);
    }
    .home-winners-grid:not(.locale-marquee) .home-winner-card {
        width: min(72vw, calc(148px * var(--winners-scale, 1)), 100%);
        max-width: calc((100% - 0.65rem) / 2);
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}

html[dir="rtl"] body,
body.is-rtl {
    font-family: var(--font-body);
}

html[dir="rtl"] .site-logo-text,
html[dir="rtl"] .brand-kicker,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3 {
    font-family: var(--font-display);
    letter-spacing: 0;
}

html[dir="rtl"] .hero-actions,
html[dir="rtl"] .header-actions,
html[dir="rtl"] .carousel-nav {
    direction: rtl;
}

html[dir="rtl"] .section-head {
    flex-direction: row-reverse;
}

html[dir="rtl"] .section-head--center {
    flex-direction: column;
}

html[dir="rtl"] .footer-nav h3,
html[dir="rtl"] .footer-social h3 {
    font-family: var(--font-display);
}

body[data-theme-mode="light"] .site-header:not(.site-header--transparent) {
    background: color-mix(in srgb, var(--brand-bg) 88%, white);
    border-bottom-color: color-mix(in srgb, var(--brand-neon) 18%, #d7dee8);
}

body[data-theme-mode="light"] .site-header--transparent {
    background: transparent;
    border-bottom-color: transparent;
}

body[data-theme-mode="light"] .chip,
body[data-theme-mode="light"] .btn.ghost {
    background: color-mix(in srgb, #ffffff 80%, var(--brand-primary));
    border-color: color-mix(in srgb, var(--brand-neon) 28%, #cfd8e3);
    color: var(--ink);
}

body[data-theme-mode="light"] .btn.neon,
body[data-theme-mode="light"] .chip.neon {
    color: #062015;
}

body[data-theme-mode="light"] .site-logo-text,
body[data-theme-mode="light"] .brand-kicker {
    text-shadow: none;
}

body[data-theme-mode="light"] .site-footer {
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand-bg) 78%, #fff), #eef2f7);
    border-top-color: color-mix(in srgb, var(--brand-neon) 18%, #d7dee8);
}

body[data-theme-mode="light"] .footer-glow {
    opacity: 0.28;
}

body[data-theme-mode="light"] .footer-bar {
    background: color-mix(in srgb, #fff 35%, transparent);
}

body[data-theme-mode="light"] .social-link {
    background: color-mix(in srgb, #fff 70%, var(--brand-bg));
    border-color: color-mix(in srgb, var(--brand-neon) 24%, #cfd8e3);
}

body[data-theme-mode="light"] .shorts-section,
body[data-theme-mode="light"] .empty-state {
    background: transparent;
    border-color: transparent;
}

body[data-theme-mode="light"] .social-link {
    background: color-mix(in srgb, #ffffff 78%, var(--brand-primary));
    border-color: color-mix(in srgb, var(--brand-neon) 24%, #d0d8e2);
}

/* —— Trends —— */
.trends-section {
    margin-block: 0;
    margin-inline: 0;
    max-width: none;
    width: 100%;
    padding: 0;
}

.trends-section .section-sub {
    margin: 0.35rem 0 0;
    color: color-mix(in srgb, var(--ink) 70%, transparent);
    font-size: 0.95rem;
}

.trends-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(200px, 240px);
    gap: 0.9rem;
    overflow-x: auto;
    padding: 1rem 0 0.4rem;
    scrollbar-width: none;
}

.trends-rail::-webkit-scrollbar { display: none; }

.trends-rail.locale-marquee {
    display: block;
}

.trends-rail.locale-marquee .locale-marquee__track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    gap: 0.9rem;
}

.trends-rail.locale-marquee .trend-card {
    flex: 0 0 min(240px, 78vw);
    width: min(240px, 78vw);
    max-width: min(240px, 78vw);
}

.trend-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 0.45rem 0.7rem;
    padding: 0.75rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--brand-bg) 55%, #111827);
    border: 1px solid color-mix(in srgb, var(--brand-neon) 25%, transparent);
    overflow: hidden;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.trend-card--frameless {
    border: none;
    box-shadow: none;
    border-radius: 0;
}

.trend-card--no-bg {
    background: transparent;
}

.trend-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--brand-neon) 55%, transparent);
}

.trend-rank {
    grid-row: 1 / span 2;
    align-self: center;
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--brand-neon);
}

.trend-thumb {
    width: 64px;
    height: 84px;
    border-radius: 0.65rem;
    overflow: hidden;
    background: #0b1220;
}

.trend-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.trend-thumb-fallback {
    display: grid;
    place-items: center;
    height: 100%;
    color: var(--brand-neon);
    font-size: 1.4rem;
}

.trend-meta {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.trend-meta strong {
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trend-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    font-size: 0.78rem;
    opacity: 0.8;
}

.short-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.65rem 0.7rem;
    position: relative;
    z-index: 3;
}

.short-title {
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 auto;
}

.short-stats {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.78rem;
    flex: 0 0 auto;
}

.short-views {
    white-space: nowrap;
    opacity: 0.9;
}

.short-like-btn {
    border: 0;
    background: color-mix(in srgb, var(--brand-neon) 18%, transparent);
    color: inherit;
    border-radius: 999px;
    padding: 0.25rem 0.55rem;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.short-like-btn.is-liked {
    background: color-mix(in srgb, #ff4d6d 35%, transparent);
}

/* —— Hover bubbles —— */
.hover-bubble-burst {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 8;
}

.hover-bubble {
    position: absolute;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff, color-mix(in srgb, var(--brand-neon) 70%, #7dd3fc));
    opacity: 0.85;
    animation: hoverBubbleUp 0.85s ease-out forwards;
    box-shadow: 0 0 10px color-mix(in srgb, var(--brand-neon) 45%, transparent);
}

@keyframes hoverBubbleUp {
    0% { transform: translate(0, 0) scale(0.4); opacity: 0.9; }
    100% { transform: translate(var(--bx), var(--by)) scale(1.15); opacity: 0; }
}

/* —— Seasonal theme tints —— */
body.season-theme--summer {
    --brand-bg: #1a1208;
}

body.season-theme--winter {
    --brand-bg: #0a1220;
}

body.season-theme--autumn {
    --brand-bg: #1a1008;
}

body.season-theme--spring {
    --brand-bg: #101816;
}

body.season-theme::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.22;
    background:
        radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--brand-neon) 35%, transparent), transparent 36%),
        radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--brand-secondary) 28%, transparent), transparent 32%);
}

/* —— Assistant —— */
.star-assistant {
    position: fixed;
    inset-inline-end: max(1.1rem, env(safe-area-inset-right, 0px));
    /* Default near corner; JS lifts via --assistant-bottom when footer is near */
    bottom: var(--assistant-bottom, max(1.1rem, calc(env(safe-area-inset-bottom, 0px) + 1rem)));
    left: auto;
    z-index: 1400;
    --media-size: 100;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    transition: bottom 0.22s ease;
}

.star-dock-fabs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    pointer-events: auto;
}

.star-assistant .assistant-fab,
.star-assistant .star-dock-fab,
.star-assistant .assistant-panel {
    pointer-events: auto;
}

.assistant-fab {
    position: relative;
    width: calc(52px * var(--media-size, 100) / 100);
    height: calc(52px * var(--media-size, 100) / 100);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    --fab-bg: var(--assistant-tint, var(--brand-neon));
    --fab-icon: #f4f7fb;
    background: var(--fab-bg);
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.32),
        0 0 0 2px color-mix(in srgb, var(--fab-bg) 70%, transparent);
    display: grid;
    place-items: center;
    color: var(--fab-icon);
    text-decoration: none;
    transition: transform 0.16s ease, filter 0.16s ease;
}

.assistant-fab:hover,
.assistant-fab:focus-visible {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.assistant-fab-glow {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--fab-bg) 50%, transparent), transparent 70%);
    animation: assistantPulse 2.4s ease-in-out infinite;
    pointer-events: none;
}

.assistant-fab-icon {
    width: calc(28px * var(--media-size, 100) / 100);
    height: calc(28px * var(--media-size, 100) / 100);
    display: block;
    color: var(--fab-icon);
}

.star-dock-fab .assistant-fab-icon {
    width: calc(26px * var(--media-size, 100) / 100);
    height: calc(26px * var(--media-size, 100) / 100);
}

@keyframes assistantPulse {
    0%, 100% { transform: scale(0.92); opacity: 0.55; }
    50% { transform: scale(1.08); opacity: 0.95; }
}

.assistant-panel {
    position: absolute;
    right: 0;
    left: auto;
    bottom: calc(100% + 0.75rem);
    width: min(340px, calc(100vw - 1.5rem));
    max-height: min(480px, 70vh);
    display: flex;
    flex-direction: column;
    background: color-mix(in srgb, #0b1220 88%, var(--brand-bg));
    border: 1px solid color-mix(in srgb, var(--brand-neon) 35%, transparent);
    border-radius: 1.1rem;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

.assistant-panel[hidden] { display: none; }

.assistant-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid color-mix(in srgb, #fff 10%, transparent);
}

.assistant-close {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.3rem;
    cursor: pointer;
    line-height: 1;
}

.assistant-messages {
    padding: 0.8rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    flex: 1;
    min-height: 160px;
}

.assistant-bubble {
    max-width: 90%;
    padding: 0.55rem 0.75rem;
    border-radius: 0.85rem;
    font-size: 0.9rem;
    line-height: 1.4;
}

.assistant-bubble--bot {
    align-self: flex-start;
    background: color-mix(in srgb, var(--brand-neon) 16%, #152033);
}

.assistant-bubble--user {
    align-self: flex-end;
    background: color-mix(in srgb, var(--brand-secondary) 28%, #152033);
}

.assistant-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0 0.8rem 0.65rem;
}

.assistant-chip {
    border: 1px solid color-mix(in srgb, var(--brand-neon) 35%, transparent);
    background: transparent;
    color: inherit;
    border-radius: 999px;
    padding: 0.3rem 0.65rem;
    font-size: 0.78rem;
    cursor: pointer;
}

.assistant-chip:hover {
    background: color-mix(in srgb, var(--brand-neon) 18%, transparent);
}

.assistant-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.45rem;
    padding: 0.65rem 0.8rem 0.85rem;
    border-top: 1px solid color-mix(in srgb, #fff 10%, transparent);
}

.assistant-form input {
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, #fff 16%, transparent);
    background: color-mix(in srgb, #000 25%, transparent);
    color: inherit;
    padding: 0.55rem 0.85rem;
}

html[dir="rtl"] .assistant-bubble--bot { align-self: flex-start; }
html[dir="rtl"] .assistant-bubble--user { align-self: flex-end; }

/* Homepage approved talents */
.home-talents-section {
    --talents-card-size: 100;
    --talents-scale: calc(var(--talents-card-size) / 100);
    width: 100%;
    max-width: none;
    margin-block: 0;
    margin-inline: 0;
    display: grid;
    gap: 1rem;
}

.home-talents-section .section-sub {
    margin: 0;
    color: var(--muted);
}

.home-talents-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: calc(0.9rem * var(--talents-scale, 1));
}

.home-talents-grid.locale-marquee {
    display: block;
}

.home-talents-grid.locale-marquee .locale-marquee__track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    gap: calc(0.9rem * var(--talents-scale, 1));
}

.home-talents-grid.locale-marquee .home-talent-card {
    flex: 0 0 calc(168px * var(--talents-scale, 1));
    width: calc(168px * var(--talents-scale, 1));
    min-width: calc(168px * var(--talents-scale, 1));
    max-width: calc(168px * var(--talents-scale, 1));
}

.home-talent-card {
    width: min(calc(168px * var(--talents-scale, 1)), 100%);
    max-width: 100%;
    flex: 0 0 auto;
    min-width: 0;
    border-radius: calc(1rem * var(--talents-scale, 1));
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--brand-neon) 22%, transparent);
    background: color-mix(in srgb, var(--brand-bg) 75%, #000 25%);
    transform-origin: center center;
    animation-delay: calc(var(--talent-stagger, 0) * 0.06s);
    font-size: calc(0.92rem * var(--talents-scale, 1));
    cursor: url('/assets/cursors/star-t-pointer.png') 6 2, url('/assets/cursors/star-t-pointer.svg') 6 2, pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.home-talent-card--frameless {
    border: none;
    box-shadow: none;
    border-radius: 0;
}

.home-talent-card--no-bg {
    background: transparent;
}

.home-talent-card:hover,
.home-talent-card:focus-visible {
    border-color: color-mix(in srgb, var(--brand-neon) 55%, transparent);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
    outline: none;
}

.home-talent-card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    object-position: center;
    display: block;
    transform-origin: center center;
    background:
        linear-gradient(45deg, color-mix(in srgb, #fff 8%, transparent) 25%, transparent 25%) 0 0 / 14px 14px,
        linear-gradient(-45deg, color-mix(in srgb, #fff 8%, transparent) 25%, transparent 25%) 0 0 / 14px 14px,
        color-mix(in srgb, #000 35%, var(--brand-bg));
}

/* Idle motion on the photo (enter/exit stay on the card) */
.home-talent-card.media-anim--float,
.home-winner-card.media-anim--float,
.winner-card.media-anim--float {
    animation: none;
}
.home-talent-card.media-anim--float img,
.home-winner-card.media-anim--float img,
.winner-card.media-anim--float img {
    animation: mediaFloat calc((140 - var(--anim-speed)) * 28ms + 3s) ease-in-out infinite alternate;
}
.home-talent-card.media-anim--pulse,
.home-winner-card.media-anim--pulse,
.winner-card.media-anim--pulse {
    animation: none;
}
.home-talent-card.media-anim--pulse img,
.home-winner-card.media-anim--pulse img,
.winner-card.media-anim--pulse img {
    animation: mediaPulse calc((140 - var(--anim-speed)) * 24ms + 2.4s) ease-in-out infinite;
}
.home-talent-card.media-anim--glow,
.home-winner-card.media-anim--glow,
.winner-card.media-anim--glow {
    animation: none;
}
.home-talent-card.media-anim--glow img,
.home-winner-card.media-anim--glow img,
.winner-card.media-anim--glow img {
    animation: mediaGlow calc((140 - var(--anim-speed)) * 30ms + 2.8s) ease-in-out infinite alternate;
}
.home-talent-card.media-anim--bob,
.home-winner-card.media-anim--bob,
.winner-card.media-anim--bob {
    animation: none;
}
.home-talent-card.media-anim--bob img,
.home-winner-card.media-anim--bob img,
.winner-card.media-anim--bob img {
    animation: mediaBob calc((140 - var(--anim-speed)) * 28ms + 2.8s) ease-in-out infinite;
}
.home-talent-card.media-anim--sway,
.home-winner-card.media-anim--sway,
.winner-card.media-anim--sway {
    animation: none;
}
.home-talent-card.media-anim--sway img,
.home-winner-card.media-anim--sway img,
.winner-card.media-anim--sway img {
    animation: mediaSway calc((140 - var(--anim-speed)) * 32ms + 3.4s) ease-in-out infinite alternate;
}
.home-talent-card.media-anim--ken-burns,
.home-winner-card.media-anim--ken-burns,
.winner-card.media-anim--ken-burns {
    animation: none;
}
.home-talent-card.media-anim--ken-burns img,
.home-winner-card.media-anim--ken-burns img,
.winner-card.media-anim--ken-burns img {
    animation: parallaxDrift calc((140 - var(--anim-speed)) * 80ms + 8s) ease-in-out infinite alternate;
}
.home-talent-card.media-anim--spin,
.home-winner-card.media-anim--spin,
.winner-card.media-anim--spin {
    animation: none;
}
.home-talent-card.media-anim--spin img,
.home-winner-card.media-anim--spin img,
.winner-card.media-anim--spin img {
    animation: mediaSpin calc((140 - var(--anim-speed)) * 40ms + 4s) linear infinite;
}
.home-talent-card.media-anim--shake,
.home-winner-card.media-anim--shake,
.winner-card.media-anim--shake {
    animation: none;
}
.home-talent-card.media-anim--shake img,
.home-winner-card.media-anim--shake img,
.winner-card.media-anim--shake img {
    animation: mediaShake calc((140 - var(--anim-speed)) * 18ms + 1.1s) ease-in-out infinite;
}
.home-talent-card.media-anim--teeter,
.home-winner-card.media-anim--teeter,
.winner-card.media-anim--teeter {
    animation: none;
}
.home-talent-card.media-anim--teeter img,
.home-winner-card.media-anim--teeter img,
.winner-card.media-anim--teeter img {
    animation: mediaTeeter calc((140 - var(--anim-speed)) * 28ms + 2.6s) ease-in-out infinite alternate;
}
.home-talent-card.media-anim--grow-shrink,
.home-winner-card.media-anim--grow-shrink,
.winner-card.media-anim--grow-shrink {
    animation: none;
}
.home-talent-card.media-anim--grow-shrink img,
.home-winner-card.media-anim--grow-shrink img,
.winner-card.media-anim--grow-shrink img {
    animation: mediaGrowShrink calc((140 - var(--anim-speed)) * 30ms + 2.8s) ease-in-out infinite;
}
.home-talent-card.media-anim--flash,
.home-winner-card.media-anim--flash,
.winner-card.media-anim--flash {
    animation: none;
}
.home-talent-card.media-anim--flash img,
.home-winner-card.media-anim--flash img,
.winner-card.media-anim--flash img {
    animation: mediaFlash calc((140 - var(--anim-speed)) * 22ms + 1.6s) ease-in-out infinite;
}

.home-talent-meta {
    display: grid;
    gap: 0.2rem;
    padding: calc(0.65rem * var(--talents-scale, 1)) calc(0.75rem * var(--talents-scale, 1)) calc(0.8rem * var(--talents-scale, 1));
}

.home-talent-meta strong {
    font-size: calc(0.98rem * var(--talents-scale, 1));
}

.home-talent-meta span {
    color: var(--muted);
    font-size: calc(0.85rem * var(--talents-scale, 1));
}

.home-talent-like-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.2rem;
    border: 0;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    font-size: calc(0.85rem * var(--talents-scale, 1));
    color: var(--brand-neon);
    background: color-mix(in srgb, var(--brand-neon) 16%, transparent);
    transition: transform 0.18s ease, background 0.18s ease, opacity 0.18s ease;
}

.home-talent-like-btn:hover,
.home-talent-like-btn:focus-visible {
    transform: scale(1.05);
    background: color-mix(in srgb, var(--brand-neon) 28%, transparent);
    outline: none;
}

.home-talent-like-btn.is-liked {
    background: color-mix(in srgb, var(--brand-neon) 42%, #000);
    color: #0b1220;
    cursor: default;
}

.home-talent-like-btn:disabled {
    opacity: 0.85;
    cursor: default;
}

.home-talent-likes {
    font-weight: 700;
    color: var(--brand-neon) !important;
}

.home-talents-empty {
    color: var(--muted);
    margin: 0;
}

.home-talents-actions {
    display: flex;
    justify-content: center;
}

/* Homepage winners — same photo-first card model as talents */
.home-winners-section {
    --winners-card-height: 100;
    --winners-scale: calc(var(--winners-card-height) / 100);
    --winners-height-scale: var(--winners-scale);
    width: 100%;
    max-width: none;
    margin-block: 0;
    margin-inline: 0;
    display: grid;
    gap: 1rem;
}

.home-winners-section .section-sub {
    margin: 0.35rem 0 0;
    color: var(--muted);
}

.home-winners-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: calc(0.9rem * var(--winners-scale, 1));
}

.home-winners-grid.locale-marquee {
    display: block;
}

.home-winners-grid.locale-marquee .locale-marquee__track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    gap: calc(0.9rem * var(--winners-scale, 1));
    will-change: transform;
}

.home-winners-grid.locale-marquee .home-winner-card {
    flex: 0 0 calc(168px * var(--winners-scale, 1));
    width: calc(168px * var(--winners-scale, 1));
    min-width: calc(168px * var(--winners-scale, 1));
    max-width: calc(168px * var(--winners-scale, 1));
}

.home-winner-card {
    width: min(calc(168px * var(--winners-scale, 1)), 100%);
    max-width: 100%;
    flex: 0 0 auto;
    min-width: 0;
    display: grid;
    grid-template-rows: auto 1fr;
    padding: 0;
    gap: 0;
    border-radius: calc(1rem * var(--winners-scale, 1));
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--brand-neon) 22%, transparent);
    background: color-mix(in srgb, var(--brand-bg) 75%, #000 25%);
    box-shadow: none;
    transform-origin: center center;
    animation-delay: calc(var(--winner-stagger, 0) * 0.06s);
    font-size: calc(0.92rem * var(--winners-scale, 1));
    cursor: url('/assets/cursors/star-t-pointer.png') 6 2, url('/assets/cursors/star-t-pointer.svg') 6 2, pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.home-winner-card--frameless {
    border: none;
    box-shadow: none;
    border-radius: 0;
}

.home-winner-card--no-bg {
    background: transparent;
}

.home-winner-card:hover,
.home-winner-card:focus-visible {
    border-color: color-mix(in srgb, var(--brand-neon) 55%, transparent);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
    outline: none;
}

.home-winner-card__media {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: 0;
    overflow: hidden;
    padding: 0;
    min-width: 0;
    min-height: 0;
    background:
        linear-gradient(45deg, color-mix(in srgb, #fff 8%, transparent) 25%, transparent 25%) 0 0 / 14px 14px,
        linear-gradient(-45deg, color-mix(in srgb, #fff 8%, transparent) 25%, transparent 25%) 0 0 / 14px 14px,
        color-mix(in srgb, #000 35%, var(--brand-bg));
}

.home-winner-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    object-position: center center;
    display: block;
    padding: 0;
    transform-origin: center center;
}

.home-winner-card__media--empty {
    background:
        radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--brand-primary) 28%, transparent), transparent 65%),
        color-mix(in srgb, #000 35%, var(--brand-bg));
}

.home-winner-card__body {
    display: grid;
    gap: 0.2rem;
    padding: calc(0.65rem * var(--winners-scale, 1)) calc(0.75rem * var(--winners-scale, 1)) calc(0.8rem * var(--winners-scale, 1));
}

.home-winner-card__name {
    font-family: var(--font-display);
    font-size: calc(0.98rem * var(--winners-scale, 1));
    letter-spacing: 0.02em;
}

.home-winner-card__prize {
    color: var(--brand-primary);
    font-weight: 700;
    font-size: calc(0.85rem * var(--winners-scale, 1));
}

.home-winner-card__when {
    color: var(--muted);
    font-size: calc(0.85rem * var(--winners-scale, 1));
}

.home-winners-empty {
    color: var(--muted);
    margin: 0;
}

.home-winners-actions {
    display: flex;
    justify-content: center;
}

body[data-theme-mode="light"] .home-winner-card:not(.home-winner-card--no-bg) {
    background: color-mix(in srgb, #ffffff 88%, var(--brand-bg));
}

/* Star-T custom cursor (keep last so it wins cascade) */
body {
    cursor: url('/assets/cursors/star-t.png') 6 2, url('/assets/cursors/star-t.svg') 6 2, auto;
}
a, button, [role='button'], .btn, .chip, label[for], summary, select,
input[type='checkbox'], input[type='radio'], input[type='range'], input[type='file'],
.media-expand-btn, .home-talent-like-btn, .short-like-btn, .flavor-card, .home-talent-card,
.home-winner-card, .talent-like-btn, .assistant-chip, .assistant-fab, .assistant-close, .main-nav a {
    cursor: url('/assets/cursors/star-t-pointer.png') 6 2, url('/assets/cursors/star-t-pointer.svg') 6 2, pointer;
}
.home-talent-like-btn.is-liked,
.home-talent-like-btn:disabled,
.talent-like-btn.is-liked,
.talent-like-btn:disabled {
    cursor: url('/assets/cursors/star-t.png') 6 2, url('/assets/cursors/star-t.svg') 6 2, default;
}
input[type='text'], input[type='email'], input[type='tel'], input[type='search'],
input[type='number'], input[type='password'], textarea {
    cursor: text;
}

/* Talent enlarge lightbox */
.talent-lightbox {
    border: 0;
    padding: 0.85rem 0.85rem 1rem;
    width: min(640px, 96vw);
    max-width: 96vw;
    background: color-mix(in srgb, var(--brand-bg, #07090f) 92%, #000);
    border-radius: 1.15rem;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
    color: var(--ink, #f4f7fb);
    overflow: visible;
}
.talent-lightbox::backdrop {
    background: rgba(4, 8, 16, 0.82);
    backdrop-filter: blur(6px);
}
.talent-lightbox-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    margin-bottom: 0.55rem;
}
.talent-lightbox-close {
    border: 0;
    border-radius: 999px;
    padding: 0.5rem 1rem;
    cursor: url('/assets/cursors/star-t-pointer.png') 6 2, pointer;
    font-weight: 700;
    color: #0b1220;
    background: #f8fafc;
}
.talent-lightbox-stage {
    display: grid;
    gap: 0.75rem;
}
.talent-lightbox-stage img {
    width: 100%;
    max-height: min(72vh, 640px);
    object-fit: contain;
    object-position: center;
    border-radius: 0.9rem;
    background:
        linear-gradient(45deg, color-mix(in srgb, #fff 8%, transparent) 25%, transparent 25%) 0 0 / 16px 16px,
        linear-gradient(-45deg, color-mix(in srgb, #fff 8%, transparent) 25%, transparent 25%) 0 0 / 16px 16px,
        #05070c;
    animation: talentLightboxIn 0.32s ease both;
}
.talent-lightbox-meta {
    display: grid;
    gap: 0.2rem;
    padding: 0 0.15rem 0.2rem;
}
.talent-lightbox-meta strong {
    font-size: 1.15rem;
}
.talent-lightbox-meta span {
    color: var(--muted, #9aa6b8);
}
.talent-lightbox-fx {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    flex: 1 1 auto;
    min-width: 0;
}
.talent-lightbox-fx__btn {
    border: 1px solid color-mix(in srgb, var(--brand-neon, #b8ff3c) 35%, transparent);
    background: color-mix(in srgb, #0d1422 78%, transparent);
    color: inherit;
    border-radius: 999px;
    padding: 0.45rem 0.85rem;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.talent-lightbox-fx__btn:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: var(--brand-neon, #b8ff3c);
}
.talent-lightbox-fx__btn.is-active {
    background: color-mix(in srgb, var(--brand-neon, #b8ff3c) 88%, #fff);
    color: #0b1220;
    border-color: transparent;
}
.talent-lightbox-fx__btn:disabled {
    opacity: 0.55;
    cursor: wait;
}
@keyframes talentLightboxIn {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .talent-lightbox-stage img { animation: none; }
}

/* —— Fit every page and card to every screen —— */
main,
.carousel-section,
.shorts-section,
.trends-section,
.content-cards,
.home-talents-section,
.home-winners-section,
.image-strip,
.rel-layout,
.strip-cards-band {
    max-width: 100%;
    min-width: 0;
}

.product-section {
    width: min(1100px, calc(100% - 1.5rem));
    max-width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
}

.flavor-card,
.content-card,
.short-card,
.trend-card,
.home-talent-card,
.home-winner-card,
.image-strip__card,
.winner-card,
.talent-card {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.flavor-carousel .flavor-card,
.flavor-carousel .flavor-card.product-section {
    margin-inline: 0;
}

.flavor-copy,
.flavor-visual,
.content-card__text,
.short-meta,
.home-winner-card__body,
.trend-card {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.trends-rail,
.shorts-rail,
.flavor-carousel,
.home-talents-grid,
.home-winners-grid,
.content-cards__grid {
    max-width: 100%;
    min-width: 0;
}

.talent-lightbox {
    width: min(640px, calc(100dvw - 1rem));
    max-width: calc(100dvw - 1rem);
}

.header-actions {
    min-width: 0;
}

.site-logo-text {
    min-width: 0;
}

@media (max-width: 400px) {
    .site-header {
        gap: 0.4rem;
        padding-inline: max(0.55rem, env(safe-area-inset-left, 0px)) max(0.55rem, env(safe-area-inset-right, 0px));
    }

    .site-logo-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: min(38vw, 9.5rem);
    }

    .site-logo {
        width: auto;
        height: clamp(2.45rem, calc(2.6rem * var(--media-size, 100) / 100), 3rem);
        max-width: min(54vw, 10rem);
        max-height: 3rem;
    }

    .nav-burger {
        width: 2.4rem;
        height: 2.4rem;
    }

    .hero {
        padding-inline: 0.65rem;
    }

    .content-card,
    .content-card--left,
    .content-card--right {
        flex: 0 1 auto;
        width: min(var(--card-w, 220px), 100%);
        max-width: 100%;
    }

    .flavor-carousel--wave .flavor-card,
    .flavor-card {
        width: min(86vw, calc(240px * var(--flavor-scale, 1)));
        max-width: min(86vw, calc(240px * var(--flavor-scale, 1)));
        min-width: 0;
    }

    .home-talents-grid:not(.locale-marquee) .home-talent-card {
        width: min(46vw, 100%);
        max-width: calc((100% - 0.5rem) / 2);
    }

    .home-winners-grid:not(.locale-marquee) .home-winner-card {
        width: min(46vw, 100%);
        max-width: calc((100% - 0.5rem) / 2);
    }

    .assistant-fab {
        width: calc(46px * var(--media-size, 100) / 100);
        height: calc(46px * var(--media-size, 100) / 100);
    }

    .star-dock-fabs {
        gap: 0.45rem;
    }

    .section-head {
        padding-inline: 0.75rem;
    }
}

@media (max-width: 360px) {
    .chip, .btn {
        font-size: 0.82rem;
        padding: 0.5rem 0.75rem;
    }

    .home-talents-grid:not(.locale-marquee) {
        justify-content: stretch;
    }

    .home-talents-grid:not(.locale-marquee) .home-talent-card {
        width: 100%;
        max-width: 100%;
    }

    .home-winners-grid:not(.locale-marquee) {
        justify-content: stretch;
    }

    .home-winners-grid:not(.locale-marquee) .home-winner-card {
        width: 100%;
        max-width: 100%;
    }
}

/* —— Fit every page and card to the screen —— */
main,
.carousel-section,
.shorts-section,
.trends-section,
.home-talents-section,
.home-winners-section,
.content-cards,
.content-cards__grid,
.image-strip,
.flavor-carousel,
.shorts-rail,
.trends-rail,
.home-talents-grid,
.home-winners-grid {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.flavor-card,
.content-card,
.short-card,
.trend-card,
.home-talent-card,
.home-winner-card,
.image-strip__card,
.image-strip__item,
.winner-card,
.talent-card,
.product-section {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.flavor-copy,
.flavor-visual,
.content-card__text,
.short-meta,
.home-talent-card h3,
.home-winner-card__name {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.product-section {
    width: min(1100px, calc(100% - 1.5rem));
    margin-inline: auto;
}

.site-header {
    max-width: 100%;
    min-width: 0;
}

.header-actions {
    min-width: 0;
}

.site-logo-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: min(42vw, 12rem);
}

.talent-lightbox {
    width: min(640px, calc(100dvw - 1.25rem));
    max-width: calc(100dvw - 1.25rem);
}

.assistant-panel {
    width: min(340px, calc(100dvw - 1.5rem));
}

@media (max-width: 720px) {
    .content-cards__grid,
    .content-cards--stack .content-cards__grid {
        width: 100%;
    }

    .content-card,
    .content-card--left,
    .content-card--right,
    .content-card--top,
    .content-card--bottom,
    .content-card--only,
    .content-card--background {
        width: min(var(--card-w, 220px), 92vw);
        flex: 0 1 auto;
        max-width: 92vw;
        min-width: 0;
        height: auto;
        max-height: none;
        aspect-ratio: var(--card-w, 220px) / var(--card-h, 160px);
        min-height: calc(min(var(--card-w, 220px), 92vw) * (var(--card-h, 160px) / var(--card-w, 220px)));
    }

    .content-card.content-card--free-size {
        flex: 0 0 auto;
        width: min(var(--card-w), 92vw);
        min-width: 0;
        max-width: 92vw;
        height: auto;
        max-height: none;
        aspect-ratio: var(--card-w) / var(--card-h);
        min-height: calc(min(var(--card-w), 92vw) * (var(--card-h) / var(--card-w)));
    }

    .content-card.content-card--free-size.content-card--full-width {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .trends-rail.locale-marquee .trend-card {
        flex: 0 0 auto;
        width: min(72vw, 220px);
        max-width: min(72vw, 220px);
        min-width: 0;
    }

    .home-winners-grid.locale-marquee .home-winner-card {
        flex: 0 0 auto;
        width: min(70vw, calc(156px * var(--winners-scale, 1)));
        min-width: 0;
        max-width: min(70vw, calc(156px * var(--winners-scale, 1)));
    }

    .section-head {
        max-width: 100%;
        padding-inline: max(0.75rem, env(safe-area-inset-left, 0px)) max(0.75rem, env(safe-area-inset-right, 0px));
    }

    .hero-actions,
    .home-talents-actions,
    .home-winners-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .hero-actions .btn,
    .home-talents-actions .btn,
    .home-winners-actions .btn {
        max-width: 100%;
    }
}

@media (max-width: 400px) {
    .site-header {
        padding-inline: 0.55rem;
        gap: 0.4rem;
    }

    .site-logo,
    video.site-logo {
        width: auto;
        height: clamp(2.45rem, calc(2.6rem * var(--media-size, 100) / 100), 3rem);
        max-width: min(54vw, 10rem);
        max-height: 3rem;
    }

    .nav-burger {
        width: 2.4rem;
        height: 2.4rem;
    }

    .chip, .btn {
        max-width: 100%;
    }

    .flavor-carousel--wave .flavor-card,
    .flavor-card {
        width: min(86vw, calc(240px * var(--flavor-scale, 1)));
        max-width: min(86vw, calc(240px * var(--flavor-scale, 1)));
        min-width: 0;
    }

    .shorts-rail.locale-marquee .short-card {
        flex: 0 0 auto;
        width: min(72vw, calc(180px * var(--shorts-scale, 1)));
        min-width: 0;
        max-width: min(72vw, calc(180px * var(--shorts-scale, 1)));
    }

    .home-talents-grid:not(.locale-marquee) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-talents-grid:not(.locale-marquee) .home-talent-card {
        width: 100%;
        max-width: 100%;
    }

    .home-winners-grid:not(.locale-marquee) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-winners-grid:not(.locale-marquee) .home-winner-card {
        width: 100%;
        max-width: 100%;
    }

    .star-dock-fabs {
        gap: 0.45rem;
    }

    .assistant-fab {
        width: calc(46px * var(--media-size, 100) / 100);
        height: calc(46px * var(--media-size, 100) / 100);
    }

    .talent-lightbox-fx__btn {
        flex: 1 1 auto;
        text-align: center;
    }
}

@media (max-width: 720px) and (orientation: landscape) {
    .hero {
        min-height: 0;
        padding-block: 0.55rem;
    }

    .hero-media,
    .hero-media.is-hero-fit {
        max-height: min(46vh, 220px);
    }

    .hero-media.hero-media--free-size,
    .hero-media.hero-media--free-size.is-hero-fit,
    .hero-media.hero-media--free-size.is-hero-natural,
    .hero-media.hero-media--free-size.is-hero-model {
        max-height: min(46vh, 220px);
        height: auto;
        width: min(100%, var(--show-w));
    }

    .hero.has-mobile-media-h .hero-media,
    .hero.has-mobile-media-h .hero-media.is-hero-fit,
    .hero.has-mobile-media-h .hero-media.is-hero-natural,
    .hero.has-mobile-media-h .hero-media.is-hero-model,
    .hero.has-mobile-media-h .hero-media.hero-media--free-size,
    .hero.has-mobile-media-h .hero-media.hero-media--free-size.is-hero-fit,
    .hero.has-mobile-media-h .hero-media.hero-media--free-size.is-hero-natural,
    .hero.has-mobile-media-h .hero-media.hero-media--free-size.is-hero-model {
        width: 100% !important;
        max-width: 100% !important;
        height: var(--mobile-hero-media-h) !important;
        min-height: var(--mobile-hero-media-h) !important;
        max-height: none !important;
    }

    .shorts-rail {
        --shorts-h: min(78vh, calc(240px * var(--shorts-scale)));
    }

    .shorts-rail.has-mobile-h {
        --shorts-h: calc(420px * (var(--shorts-card-height-mobile) / 100)) !important;
    }

    body:has(> .site-header--pinned.site-header--transparent) .hero {
        min-height: 0 !important;
        padding-block: 0.45rem;
    }

    .hero.hero--container-center.hero--box-h,
    body:has(> .site-header--pinned.site-header--transparent) .hero.hero--container-center.hero--box-h {
        min-height: 0 !important;
        height: auto;
        max-height: none;
    }
}

/* Homepage: keep phone layout in the screen, even with desktop admin sizes */
@media (max-width: 720px) {
    html,
    body {
        overflow-x: hidden;
        max-width: 100%;
    }

    .site-header {
        --header-h: 4.15rem;
        padding-top: max(0.35rem, env(safe-area-inset-top, 0px));
        padding-inline: max(0.7rem, env(safe-area-inset-left, 0px)) max(0.7rem, env(safe-area-inset-right, 0px));
        padding-bottom: 0.35rem;
        gap: 0.5rem;
        min-height: calc(4.15rem + env(safe-area-inset-top, 0px));
        align-items: center;
    }

    .logo-wrap {
        max-width: calc(100% - 3.1rem);
        min-width: 0;
        flex: 1 1 auto;
    }

    .logo-wrap.media-styled {
        scale: 1;
        max-width: calc(100% - 3.1rem);
        transform-origin: center start;
    }

    html[dir="rtl"] .logo-wrap.media-styled,
    body.is-rtl .logo-wrap.media-styled {
        transform-origin: center end;
    }

    .logo-wrap .site-logo,
    .site-logo,
    video.site-logo {
        width: auto;
        height: clamp(2.6rem, calc(2.75rem * var(--media-size, 100) / 100), 3.25rem);
        max-width: min(58vw, 11rem);
        max-height: 3.25rem;
        object-fit: contain;
        object-position: center start;
        flex: 0 0 auto;
    }

    html[dir="rtl"] .logo-wrap .site-logo,
    html[dir="rtl"] .site-logo,
    html[dir="rtl"] video.site-logo {
        object-position: center end;
    }

    .home-main {
        row-gap: min(var(--rails-gap, 32px), 28px);
        max-width: 100%;
        overflow-x: clip;
    }

    .home-main > .home-rail,
    .home-main > .home-rail.home-rail--hero-full,
    .home-main > .home-rail.home-rail--hero-center {
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
        overflow-x: visible;
        overflow-y: visible;
    }

    .home-main > .home-rail[data-home-rail="flavors"],
    .home-main > .home-rail[data-home-rail="shorts"],
    .home-main > .home-rail[data-home-rail="talents"],
    .home-main > .home-rail[data-home-rail="winners"],
    .home-main > .home-rail[data-home-rail="trends"],
    .home-main > .home-rail[data-home-rail="image_strip"],
    .home-main > .home-rail[data-home-rail="content_cards"],
    .home-main > .home-rail[data-home-rail="content_cards_2"] {
        overflow-x: visible;
        overflow-y: visible;
    }

    .home-main > .home-rail:not(:first-child) {
        padding-block-start: min(
            24px,
            max(0px, calc(var(--rail-before, var(--rails-gap, 0px)) - var(--rails-gap, 0px)))
        );
    }

    .hero,
    body:has(> .site-header--pinned) .hero,
    body:has(> .site-header--pinned.site-header--transparent) .hero {
        min-height: 0 !important;
        gap: 0.7rem;
        padding: 0.75rem 0.85rem 1rem;
        align-items: start;
        overflow: hidden;
    }

    .hero.hero--container-center,
    body:has(> .site-header--pinned) .hero.hero--container-center,
    body:has(> .site-header--pinned.site-header--transparent) .hero.hero--container-center {
        align-items: center;
    }

    .hero.hero--container-center,
    .hero.hero--container-center.hero--box-w,
    body:has(> .site-header--pinned) .hero.hero--container-center,
    body:has(> .site-header--pinned.site-header--transparent) .hero.hero--container-center {
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: 0;
    }

    .hero.hero--container-center.hero--box-h,
    body:has(> .site-header--pinned) .hero.hero--container-center.hero--box-h,
    body:has(> .site-header--pinned.site-header--transparent) .hero.hero--container-center.hero--box-h {
        min-height: 0 !important;
        height: auto !important;
        max-height: none;
    }

    .hero.hero--media-round,
    body:has(> .site-header--pinned) .hero.hero--media-round,
    body:has(> .site-header--pinned.site-header--transparent) .hero.hero--media-round {
        overflow: visible;
    }

    .hero.hero--media-full,
    .hero.hero--container-full,
    body:has(> .site-header--pinned) .hero.hero--media-full,
    body:has(> .site-header--pinned) .hero.hero--container-full,
    body:has(> .site-header--pinned.site-header--transparent) .hero.hero--media-full,
    body:has(> .site-header--pinned.site-header--transparent) .hero.hero--container-full {
        padding-inline: 0;
    }

    body:has(> .site-header--pinned.site-header--transparent) .hero {
        padding-top: calc(var(--header-h, 4.15rem) + env(safe-area-inset-top, 0px) + 0.2rem);
    }

    .hero-copy {
        max-width: 100%;
        min-width: 0;
    }

    .hero h1,
    .hero h1.cms-text {
        display: block;
        width: 100%;
        max-width: 100%;
        font-size: calc(clamp(1.4rem, 7vw, 2.05rem) * min(var(--cms-size, 100), 115) / 100) !important;
        line-height: 1.18;
        overflow-wrap: anywhere;
    }

    .hero-sub,
    .hero-sub.cms-text,
    .brand-kicker.cms-text {
        display: block;
        width: 100%;
        max-width: 100%;
        font-size: calc(0.88rem * min(var(--cms-size, 100), 120) / 100) !important;
        line-height: 1.45;
    }

    .hero-media,
    .hero-media.is-hero-fit,
    .hero-media.is-hero-natural,
    .hero-media.is-hero-model {
        width: min(100%, var(--show-w, 100%)) !important;
        max-width: 100% !important;
        max-height: min(38vh, 260px);
        box-sizing: border-box;
        justify-self: center;
    }

    .hero-media.hero-media--free-size,
    .hero-media.hero-media--free-size.is-hero-fit,
    .hero-media.hero-media--free-size.is-hero-natural,
    .hero-media.hero-media--free-size.is-hero-model,
    .hero.hero--container-center .hero-media.hero-media--free-size,
    .hero.hero--media-full .hero-media,
    .hero.hero--text-on-media .hero-media,
    .hero.hero--text-on-media .hero-media.is-hero-fit {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: min(42vh, 280px) !important;
    }

    .hero.hero--text-on-media .hero-copy {
        max-width: 100%;
        width: 100%;
        min-height: 0;
        padding: 0.85rem 0.9rem 1rem;
    }

    .section-head h2.cms-text,
    .shorts-section h2.cms-text {
        font-size: calc(1.15rem * min(var(--cms-size, 100), 120) / 100);
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .content-card__text p,
    .image-strip__card .content-card__text p {
        font-size: calc(0.78rem * min(var(--cms-size, 100), 125) / 100);
    }

    .carousel-section,
    .shorts-section,
    .trends-section,
    .home-talents-section,
    .home-winners-section {
        max-width: 100%;
        overflow: visible;
    }

    .content-cards,
    .image-strip,
    .strip-cards-band,
    .rel-layout,
    .rel-layout__mid,
    .rel-layout__slot,
    .rel-layout__slot--after,
    .rel-layout__slot--before,
    .rel-layout__slot--above,
    .rel-layout__slot--below {
        max-width: 100%;
        overflow: visible;
        overflow-x: visible;
    }

    .rel-layout__slot,
    .rel-layout__slot--after,
    .rel-layout__slot--before,
    .rel-layout__slot--above,
    .rel-layout__slot--below,
    .rel-layout__slot--left,
    .rel-layout__slot--right {
        align-items: flex-start;
        flex-wrap: wrap;
        width: 100%;
    }

    .content-card,
    .image-strip__card,
    .rel-layout .content-card,
    .rel-layout .content-card.content-card--free-size,
    .content-card.content-card--only,
    .content-card.content-card--background {
        width: min(var(--card-w, 220px), 92vw) !important;
        max-width: 92vw !important;
        min-width: min(var(--card-w, 220px), 92vw) !important;
        flex: 0 0 auto !important;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: var(--card-w, 220px) / var(--card-h, 160px) !important;
        min-height: calc(min(var(--card-w, 220px), 92vw) * (var(--card-h, 160px) / var(--card-w, 220px))) !important;
    }

    .content-card.content-card--free-size,
    .content-card.content-card--free-size.content-card--left,
    .content-card.content-card--free-size.content-card--right,
    .content-card.content-card--free-size.content-card--only,
    .content-card.content-card--free-size.content-card--background,
    .content-card.content-card--only,
    .content-card.content-card--background {
        width: min(var(--card-w), 92vw) !important;
        min-width: min(var(--card-w), 92vw) !important;
        max-width: 92vw !important;
        flex: 0 0 auto !important;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: var(--card-w) / var(--card-h) !important;
        min-height: calc(min(var(--card-w), 92vw) * (var(--card-h) / var(--card-w))) !important;
    }

    .content-card.content-card--rail-2,
    .content-card.content-card--rail-2.content-card--free-size,
    .content-card.content-card--rail-2.content-card--free-size.content-card--left,
    .content-card.content-card--rail-2.content-card--free-size.content-card--right,
    .content-card.content-card--rail-2.content-card--free-size.content-card--only,
    .content-card.content-card--rail-2.content-card--free-size.content-card--background,
    .content-cards[data-cards-rail="content_cards_2"] .content-card,
    .content-cards[data-cards-rail="content_cards_2"] .content-card.content-card--free-size {
        width: min(var(--card-w), 92vw) !important;
        min-width: min(var(--card-w), 92vw) !important;
        max-width: 92vw !important;
        flex: 0 0 auto !important;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: var(--card-w) / var(--card-h) !important;
        min-height: calc(min(var(--card-w), 92vw) * (var(--card-h) / var(--card-w))) !important;
    }

    .content-card.content-card--free-size.content-card--full-width,
    .content-card.content-card--free-size.content-card--full-width.content-card--left,
    .content-card.content-card--free-size.content-card--full-width.content-card--right,
    .content-card.content-card--free-size.content-card--full-width.content-card--only,
    .content-card.content-card--free-size.content-card--full-width.content-card--background {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: var(--card-w) / var(--card-h) !important;
        min-height: calc(100vw * (var(--card-h) / var(--card-w))) !important;
    }

    .content-card.content-card--rail-2.content-card--full-width,
    .content-cards[data-cards-rail="content_cards_2"] .content-card.content-card--full-width {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: var(--card-w) / var(--card-h) !important;
        min-height: calc(100vw * (var(--card-h) / var(--card-w))) !important;
    }

    .content-card--media-sized .content-card__media > img,
    .content-card--media-sized .content-card__media > video,
    .content-card--media-sized .content-card__media-main img,
    .content-card--media-sized .content-card__media-main video {
        width: min(var(--media-w, 100%), 100%);
        height: min(var(--media-h, 100%), 100%);
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    .content-card .content-card__media--only,
    .content-card .content-card__media--fill,
    .content-card .content-card__media-main {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        min-height: 100%;
    }

    .content-card:not(.content-card--media-sized) .content-card__media--only > img,
    .content-card:not(.content-card--media-sized) .content-card__media--only > video,
    .content-card:not(.content-card--media-sized) .content-card__media--fill > img,
    .content-card:not(.content-card--media-sized) .content-card__media--fill > video {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        object-fit: cover;
    }

    .image-strip {
        padding-block: 0.45rem;
        max-width: 100%;
    }

    .image-strip__item {
        height: min(var(--strip-height, 140px), 32vw, 132px);
        max-width: min(64vw, 180px);
    }

    .flavor-carousel {
        --flavor-scale: min(1.08, calc(var(--flavor-card-size, 100) / 100 * 0.84));
        --flavor-image-scale: min(1.12, calc(var(--flavor-image-size, 100) / 100 * 0.88));
    }

    .flavor-carousel--wave .flavor-card,
    .flavor-card,
    .flavor-carousel--cards .flavor-card,
    .flavor-carousel--cards .flavor-card[data-image-pos="left"],
    .flavor-carousel--cards .flavor-card[data-image-pos="right"],
    .flavor-carousel--cards .flavor-card[data-image-pos="top"],
    .flavor-carousel--cards .flavor-card[data-image-pos="bottom"] {
        width: min(86vw, calc(250px * var(--flavor-scale, 1))) !important;
        max-width: min(86vw, calc(250px * var(--flavor-scale, 1))) !important;
        min-width: 0 !important;
        min-height: 0 !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto;
        padding: 0.7rem;
    }

    .flavor-carousel--cards .flavor-visual {
        min-height: 0;
    }

    .strip-cards-band {
        gap: min(var(--rails-gap, 32px), 20px);
    }

    .star-assistant {
        inset-inline-end: max(0.55rem, env(safe-area-inset-right, 0px));
        bottom: max(0.7rem, env(safe-area-inset-bottom, 0px));
    }
}

/* Section phone settings: width-based phones plus wider coarse-pointer mobile devices. */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
    .hero.has-mobile-h,
    .hero.has-mobile-h.hero--box-h,
    .hero.has-mobile-h.hero--container-center,
    .hero.has-mobile-h.hero--container-center.hero--box-h,
    body:has(> .site-header--pinned) .hero.has-mobile-h.hero--container-center.hero--box-h,
    body:has(> .site-header--pinned.site-header--transparent) .hero.has-mobile-h.hero--container-center.hero--box-h {
        --hero-box-h: var(--mobile-hero-h);
        --show-h: var(--mobile-hero-h);
        height: var(--mobile-hero-h) !important;
        min-height: var(--mobile-hero-h) !important;
        max-height: none !important;
    }

    .hero.has-mobile-h .hero-media,
    .hero.has-mobile-h .hero-media.is-hero-fit,
    .hero.has-mobile-h .hero-media.is-hero-natural,
    .hero.has-mobile-h .hero-media.is-hero-model,
    .hero.has-mobile-h .hero-media.hero-media--free-size,
    .hero.has-mobile-h .hero-media.hero-media--free-size.is-hero-fit,
    .hero.has-mobile-h .hero-media.hero-media--free-size.is-hero-natural,
    .hero.has-mobile-h .hero-media.hero-media--free-size.is-hero-model {
        height: var(--mobile-hero-h) !important;
        max-height: var(--mobile-hero-h) !important;
    }

    .hero.has-mobile-media-h .hero-media,
    .hero.has-mobile-media-h .hero-media.is-hero-fit,
    .hero.has-mobile-media-h .hero-media.is-hero-natural,
    .hero.has-mobile-media-h .hero-media.is-hero-model,
    .hero.has-mobile-media-h .hero-media.hero-media--free-size,
    .hero.has-mobile-media-h .hero-media.hero-media--free-size.is-hero-fit,
    .hero.has-mobile-media-h .hero-media.hero-media--free-size.is-hero-natural,
    .hero.has-mobile-media-h .hero-media.hero-media--free-size.is-hero-model,
    .hero.has-mobile-h.has-mobile-media-h .hero-media,
    .hero.has-mobile-h.has-mobile-media-h .hero-media.hero-media--free-size,
    .hero.hero--container-center.has-mobile-media-h .hero-media,
    .hero.hero--container-center.has-mobile-media-h .hero-media.hero-media--free-size,
    .hero.hero--media-full.has-mobile-media-h .hero-media,
    .hero.hero--text-on-media.has-mobile-media-h .hero-media,
    .hero.hero--media-full.has-mobile-media-h .hero-media.is-hero-fit,
    .hero.hero--text-on-media.has-mobile-media-h .hero-media.is-hero-fit {
        --show-h: var(--mobile-hero-media-h);
        width: 100% !important;
        max-width: 100% !important;
        height: var(--mobile-hero-media-h) !important;
        min-height: var(--mobile-hero-media-h) !important;
        max-height: none !important;
    }

    .hero.has-mobile-media-h .hero-media .hero-video,
    .hero.has-mobile-media-h .hero-media .hero-image,
    .hero.has-mobile-media-h .hero-media .hero-model.store-model,
    .hero.has-mobile-media-h .hero-media.is-hero-natural .hero-video,
    .hero.has-mobile-media-h .hero-media.is-hero-natural .hero-image {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover !important;
    }

    .hero.has-mobile-media-h .hero-media.is-hero-fit .hero-video,
    .hero.has-mobile-media-h .hero-media.is-hero-fit .hero-image {
        max-width: none !important;
        max-height: none !important;
    }

    .flavor-carousel.has-mobile-h,
    .flavor-carousel.has-mobile-h .flavor-card {
        --flavor-card-size: var(--flavor-card-size-mobile);
        --flavor-scale: calc(var(--flavor-card-size-mobile) / 100) !important;
    }

    .flavor-carousel.has-mobile-image,
    .flavor-carousel.has-mobile-image .flavor-card,
    .flavor-carousel.has-mobile-image .flavor-visual {
        --flavor-image-size: var(--flavor-image-size-mobile);
        --flavor-image-scale: calc(var(--flavor-image-size-mobile) / 100) !important;
    }

    .flavor-carousel.has-mobile-h .flavor-card,
    .flavor-carousel.has-mobile-h .flavor-card[data-image-pos="left"],
    .flavor-carousel.has-mobile-h .flavor-card[data-image-pos="right"],
    .flavor-carousel.has-mobile-h .flavor-card[data-image-pos="top"],
    .flavor-carousel.has-mobile-h .flavor-card[data-image-pos="bottom"],
    .flavor-carousel.has-mobile-h.flavor-carousel--wave .flavor-card,
    .flavor-carousel.has-mobile-h.flavor-carousel--cards .flavor-card,
    .flavor-carousel.has-mobile-h.flavor-carousel--cards .flavor-card[data-image-pos="left"],
    .flavor-carousel.has-mobile-h.flavor-carousel--cards .flavor-card[data-image-pos="right"],
    .flavor-carousel.has-mobile-h.flavor-carousel--cards .flavor-card[data-image-pos="top"],
    .flavor-carousel.has-mobile-h.flavor-carousel--cards .flavor-card[data-image-pos="bottom"] {
        width: min(100vw, calc(260px * var(--flavor-scale, 1))) !important;
        max-width: min(100vw, calc(260px * var(--flavor-scale, 1))) !important;
        min-width: 0 !important;
        min-height: calc(360px * var(--flavor-scale, 1)) !important;
    }

    .flavor-carousel.has-mobile-h .flavor-visual .flavor-product img,
    .flavor-carousel.has-mobile-h .flavor-visual .flavor-product video,
    .flavor-carousel.has-mobile-h .flavor-visual .flavor-product .store-model,
    .flavor-carousel.has-mobile-image .flavor-visual .flavor-product img,
    .flavor-carousel.has-mobile-image .flavor-visual .flavor-product video,
    .flavor-carousel.has-mobile-image .flavor-visual .flavor-product .store-model {
        width: min(100%, calc(210px * var(--flavor-scale, 1) * var(--flavor-image-scale, 1))) !important;
        max-height: none !important;
        height: auto !important;
    }

    .image-strip.has-mobile-h {
        --strip-height: var(--strip-height-mobile);
    }

    .image-strip.has-mobile-h .image-strip__item {
        height: var(--strip-height-mobile) !important;
        max-height: none !important;
        max-width: min(100vw, calc(var(--strip-height-mobile) * 1.8)) !important;
    }

    .content-cards.has-mobile-h[data-cards-rail="content_cards"] {
        --cards-min-h: var(--cards-min-h-mobile);
    }

    .content-cards.has-mobile-h[data-cards-rail="content_cards"] .content-card,
    .content-cards.has-mobile-h[data-cards-rail="content_cards"] .content-card.content-card--free-size,
    .content-cards.has-mobile-h[data-cards-rail="content_cards"] .content-card.content-card--free-size.content-card--left,
    .content-cards.has-mobile-h[data-cards-rail="content_cards"] .content-card.content-card--free-size.content-card--right,
    .content-cards.has-mobile-h[data-cards-rail="content_cards"] .content-card.content-card--free-size.content-card--only,
    .content-cards.has-mobile-h[data-cards-rail="content_cards"] .content-card.content-card--free-size.content-card--background,
    .content-cards.has-mobile-h[data-cards-rail="content_cards"] .content-card.content-card--only,
    .content-cards.has-mobile-h[data-cards-rail="content_cards"] .content-card.content-card--background,
    .rel-layout .content-cards.has-mobile-h[data-cards-rail="content_cards"] .content-card {
        height: var(--cards-min-h-mobile) !important;
        min-height: var(--cards-min-h-mobile) !important;
        max-height: none !important;
        width: min(100vw, calc(var(--cards-min-h-mobile) * (var(--card-w) / var(--card-h)))) !important;
        min-width: min(100vw, calc(var(--cards-min-h-mobile) * (var(--card-w) / var(--card-h)))) !important;
        max-width: 100vw !important;
        flex: 0 0 auto !important;
        aspect-ratio: var(--card-w) / var(--card-h) !important;
    }

    .content-cards.has-mobile-h[data-cards-rail="content_cards"] .content-card.content-card--full-width,
    .content-cards.has-mobile-h[data-cards-rail="content_cards"] .content-card.content-card--free-size.content-card--full-width {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: var(--cards-min-h-mobile) !important;
        max-height: none !important;
    }

    body.has-mobile-cards-2 .content-card.content-card--rail-2,
    body.has-mobile-cards-2 .content-card.content-card--rail-2.content-card--free-size,
    body.has-mobile-cards-2 .content-card.content-card--rail-2.content-card--free-size.content-card--left,
    body.has-mobile-cards-2 .content-card.content-card--rail-2.content-card--free-size.content-card--right,
    body.has-mobile-cards-2 .content-card.content-card--rail-2.content-card--free-size.content-card--only,
    body.has-mobile-cards-2 .content-card.content-card--rail-2.content-card--free-size.content-card--background,
    body.has-mobile-cards-2 .content-card.content-card--rail-2.content-card--only,
    body.has-mobile-cards-2 .content-card.content-card--rail-2.content-card--background,
    body.has-mobile-cards-2 .rel-layout .content-card.content-card--rail-2,
    body.has-mobile-cards-2 .rel-layout .content-card.content-card--rail-2.content-card--free-size,
    body.has-mobile-cards-2 .content-cards[data-cards-rail="content_cards_2"] .content-card,
    body.has-mobile-cards-2 .content-cards[data-cards-rail="content_cards_2"] .content-card.content-card--free-size,
    body.has-mobile-cards-2 .content-card.content-card--rail-2.content-card--full-width,
    body.has-mobile-cards-2 .content-cards[data-cards-rail="content_cards_2"] .content-card.content-card--full-width {
        --card-h-m: calc(var(--card-h) * var(--cards-2-scale-mobile) / 100);
        width: min(var(--card-w), 92vw) !important;
        min-width: min(var(--card-w), 92vw) !important;
        max-width: 92vw !important;
        flex: 0 0 auto !important;
        aspect-ratio: auto !important;
        height: var(--card-h-m) !important;
        min-height: var(--card-h-m) !important;
        max-height: none !important;
    }

    /* Section phone setting: make every card in the selected rail fill phone width. */
    body.has-mobile-cards-full-width .content-card:not(.content-card--rail-2),
    body.has-mobile-cards-full-width .content-cards[data-cards-rail="content_cards"] .content-card {
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        flex: 0 0 100vw !important;
    }

    body.has-mobile-cards-2-full-width .content-card.content-card--rail-2,
    body.has-mobile-cards-2-full-width .content-cards[data-cards-rail="content_cards_2"] .content-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    body .content-card:not(.content-card--rail-2),
    body .content-cards[data-cards-rail="content_cards"] .content-card {
        border-radius: var(--cards-radius-mobile, 14px) !important;
    }

    body .content-card.content-card--rail-2,
    body .content-cards[data-cards-rail="content_cards_2"] .content-card {
        border-radius: var(--cards-2-radius-mobile, 14px) !important;
    }

    /* Per-card mobile layout overrides (content cards 2) */
    body .content-card.content-card--rail-2.has-m-box-fw,
    body .content-cards[data-cards-rail="content_cards_2"] .content-card.has-m-box-fw,
    body.has-mobile-cards-2 .content-card.content-card--rail-2.has-m-box-fw {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    body .content-card.content-card--rail-2.has-m-box-w:not(.has-m-box-fw),
    body .content-cards[data-cards-rail="content_cards_2"] .content-card.has-m-box-w:not(.has-m-box-fw),
    body.has-mobile-cards-2 .content-card.content-card--rail-2.has-m-box-w:not(.has-m-box-fw) {
        width: var(--m-card-w) !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
    }

    body .content-card.content-card--rail-2.has-m-box-h,
    body .content-cards[data-cards-rail="content_cards_2"] .content-card.has-m-box-h,
    body.has-mobile-cards-2 .content-card.content-card--rail-2.has-m-box-h {
        aspect-ratio: auto !important;
        height: calc(var(--m-card-h) * var(--cards-2-scale-mobile, 100) / 100) !important;
        min-height: calc(var(--m-card-h) * var(--cards-2-scale-mobile, 100) / 100) !important;
        max-height: none !important;
    }

    body .content-card.content-card--rail-2.has-m-box-cx,
    body .content-cards[data-cards-rail="content_cards_2"] .content-card.has-m-box-cx {
        justify-self: center;
        margin-inline: auto !important;
    }

    body .content-card.content-card--rail-2.has-m-box-cy,
    body .content-cards[data-cards-rail="content_cards_2"] .content-card.has-m-box-cy {
        align-self: center;
        margin-block: auto !important;
    }

    body .content-card.content-card--rail-2.has-m-media .content-card__media,
    body .content-card.content-card--rail-2.has-m-media .content-card__media-main,
    body .content-cards[data-cards-rail="content_cards_2"] .content-card.has-m-media .content-card__media,
    body .content-cards[data-cards-rail="content_cards_2"] .content-card.has-m-media .content-card__media-main {
        display: grid !important;
        place-items: start !important;
        overflow: hidden !important;
    }

    body .content-card.content-card--rail-2.has-m-media .content-card__media > img,
    body .content-card.content-card--rail-2.has-m-media .content-card__media > video,
    body .content-card.content-card--rail-2.has-m-media .content-card__media-main img,
    body .content-card.content-card--rail-2.has-m-media .content-card__media-main video,
    body .content-cards[data-cards-rail="content_cards_2"] .content-card.has-m-media .content-card__media > img,
    body .content-cards[data-cards-rail="content_cards_2"] .content-card.has-m-media .content-card__media > video,
    body .content-cards[data-cards-rail="content_cards_2"] .content-card.has-m-media .content-card__media-main img,
    body .content-cards[data-cards-rail="content_cards_2"] .content-card.has-m-media .content-card__media-main video {
        position: relative !important;
        inset: auto !important;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        justify-self: start !important;
        align-self: start !important;
    }

    body .content-card.content-card--rail-2.has-m-media-fw .content-card__media > img,
    body .content-card.content-card--rail-2.has-m-media-fw .content-card__media > video,
    body .content-card.content-card--rail-2.has-m-media-fw .content-card__media-main img,
    body .content-card.content-card--rail-2.has-m-media-fw .content-card__media-main video,
    body .content-cards[data-cards-rail="content_cards_2"] .content-card.has-m-media-fw .content-card__media > img,
    body .content-cards[data-cards-rail="content_cards_2"] .content-card.has-m-media-fw .content-card__media > video,
    body .content-cards[data-cards-rail="content_cards_2"] .content-card.has-m-media-fw .content-card__media-main img,
    body .content-cards[data-cards-rail="content_cards_2"] .content-card.has-m-media-fw .content-card__media-main video {
        width: 100% !important;
        max-width: 100% !important;
    }

    body .content-card.content-card--rail-2.has-m-media-w .content-card__media > img,
    body .content-card.content-card--rail-2.has-m-media-w .content-card__media > video,
    body .content-card.content-card--rail-2.has-m-media-w .content-card__media-main img,
    body .content-card.content-card--rail-2.has-m-media-w .content-card__media-main video,
    body .content-cards[data-cards-rail="content_cards_2"] .content-card.has-m-media-w .content-card__media > img,
    body .content-cards[data-cards-rail="content_cards_2"] .content-card.has-m-media-w .content-card__media > video,
    body .content-cards[data-cards-rail="content_cards_2"] .content-card.has-m-media-w .content-card__media-main img,
    body .content-cards[data-cards-rail="content_cards_2"] .content-card.has-m-media-w .content-card__media-main video {
        width: var(--m-media-w) !important;
        max-width: none !important;
    }

    body .content-card.content-card--rail-2.has-m-media-h .content-card__media > img,
    body .content-card.content-card--rail-2.has-m-media-h .content-card__media > video,
    body .content-card.content-card--rail-2.has-m-media-h .content-card__media-main img,
    body .content-card.content-card--rail-2.has-m-media-h .content-card__media-main video,
    body .content-cards[data-cards-rail="content_cards_2"] .content-card.has-m-media-h .content-card__media > img,
    body .content-cards[data-cards-rail="content_cards_2"] .content-card.has-m-media-h .content-card__media > video,
    body .content-cards[data-cards-rail="content_cards_2"] .content-card.has-m-media-h .content-card__media-main img,
    body .content-cards[data-cards-rail="content_cards_2"] .content-card.has-m-media-h .content-card__media-main video {
        height: var(--m-media-h) !important;
        max-height: none !important;
    }

    body .content-card.content-card--rail-2.has-m-media-cx .content-card__media,
    body .content-card.content-card--rail-2.has-m-media-cx .content-card__media-main,
    body .content-cards[data-cards-rail="content_cards_2"] .content-card.has-m-media-cx .content-card__media,
    body .content-cards[data-cards-rail="content_cards_2"] .content-card.has-m-media-cx .content-card__media-main {
        justify-items: center !important;
    }

    body .content-card.content-card--rail-2.has-m-media-cx .content-card__media > img,
    body .content-card.content-card--rail-2.has-m-media-cx .content-card__media > video,
    body .content-card.content-card--rail-2.has-m-media-cx .content-card__media-main img,
    body .content-card.content-card--rail-2.has-m-media-cx .content-card__media-main video {
        justify-self: center !important;
    }

    body .content-card.content-card--rail-2.has-m-media-cy .content-card__media,
    body .content-card.content-card--rail-2.has-m-media-cy .content-card__media-main,
    body .content-cards[data-cards-rail="content_cards_2"] .content-card.has-m-media-cy .content-card__media,
    body .content-cards[data-cards-rail="content_cards_2"] .content-card.has-m-media-cy .content-card__media-main {
        align-items: center !important;
        align-content: center !important;
    }

    body .content-card.content-card--rail-2.has-m-media-cy .content-card__media > img,
    body .content-card.content-card--rail-2.has-m-media-cy .content-card__media > video,
    body .content-card.content-card--rail-2.has-m-media-cy .content-card__media-main img,
    body .content-card.content-card--rail-2.has-m-media-cy .content-card__media-main video {
        align-self: center !important;
    }

    body .content-card.content-card--rail-2.has-m-touch .content-card__touch,
    body .content-cards[data-cards-rail="content_cards_2"] .content-card.has-m-touch .content-card__touch,
    body.has-mobile-cards-2-touch .content-card.content-card--rail-2.has-m-touch .content-card__touch {
        display: grid !important;
        place-items: start !important;
        overflow: hidden !important;
    }

    body .content-card.content-card--rail-2.has-m-touch .content-card__touch-img,
    body .content-cards[data-cards-rail="content_cards_2"] .content-card.has-m-touch .content-card__touch-img,
    body.has-mobile-cards-2-touch .content-card.content-card--rail-2.has-m-touch .content-card__touch-img {
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
        justify-self: start !important;
        align-self: start !important;
        transform-origin: center center;
    }

    body .content-card.content-card--rail-2.has-m-touch-fw .content-card__touch-img,
    body .content-cards[data-cards-rail="content_cards_2"] .content-card.has-m-touch-fw .content-card__touch-img {
        width: 100% !important;
        max-width: 100% !important;
    }

    body .content-card.content-card--rail-2.has-m-touch-w .content-card__touch-img,
    body .content-cards[data-cards-rail="content_cards_2"] .content-card.has-m-touch-w .content-card__touch-img {
        width: var(--m-touch-w) !important;
        max-width: none !important;
    }

    body .content-card.content-card--rail-2.has-m-touch-h .content-card__touch-img,
    body .content-cards[data-cards-rail="content_cards_2"] .content-card.has-m-touch-h .content-card__touch-img {
        height: var(--m-touch-h) !important;
        max-height: none !important;
    }

    body .content-card.content-card--rail-2.has-m-touch-cx .content-card__touch,
    body .content-cards[data-cards-rail="content_cards_2"] .content-card.has-m-touch-cx .content-card__touch {
        justify-items: center !important;
    }

    body .content-card.content-card--rail-2.has-m-touch-cx .content-card__touch-img,
    body .content-cards[data-cards-rail="content_cards_2"] .content-card.has-m-touch-cx .content-card__touch-img {
        justify-self: center !important;
    }

    body .content-card.content-card--rail-2.has-m-touch-cy .content-card__touch,
    body .content-cards[data-cards-rail="content_cards_2"] .content-card.has-m-touch-cy .content-card__touch {
        align-items: center !important;
        align-content: center !important;
    }

    body .content-card.content-card--rail-2.has-m-touch-cy .content-card__touch-img,
    body .content-cards[data-cards-rail="content_cards_2"] .content-card.has-m-touch-cy .content-card__touch-img {
        align-self: center !important;
    }

    /* Cards 2 media on phone: fill container height, crop excess width */
    .content-card.content-card--rail-2 .content-card__media,
    .content-card.content-card--rail-2 .content-card__media--only,
    .content-card.content-card--rail-2 .content-card__media--fill,
    .content-card.content-card--rail-2 .content-card__media-main,
    .content-cards[data-cards-rail="content_cards_2"] .content-card__media,
    .content-cards[data-cards-rail="content_cards_2"] .content-card__media--only,
    .content-cards[data-cards-rail="content_cards_2"] .content-card__media--fill,
    .content-cards[data-cards-rail="content_cards_2"] .content-card__media-main {
        overflow: hidden !important;
    }

    .content-card.content-card--rail-2:not(.has-m-media) .content-card__media > img,
    .content-card.content-card--rail-2:not(.has-m-media) .content-card__media > video,
    .content-card.content-card--rail-2:not(.has-m-media) .content-card__media-main img,
    .content-card.content-card--rail-2:not(.has-m-media) .content-card__media-main video,
    .content-card.content-card--rail-2.content-card--free-size:not(.has-m-media) .content-card__media > img,
    .content-card.content-card--rail-2.content-card--free-size:not(.has-m-media) .content-card__media > video,
    .content-card.content-card--rail-2.content-card--free-size:not(.has-m-media) .content-card__media-main img,
    .content-card.content-card--rail-2.content-card--free-size:not(.has-m-media) .content-card__media-main video,
    .content-cards[data-cards-rail="content_cards_2"] .content-card:not(.has-m-media) .content-card__media > img,
    .content-cards[data-cards-rail="content_cards_2"] .content-card:not(.has-m-media) .content-card__media > video,
    .content-cards[data-cards-rail="content_cards_2"] .content-card:not(.has-m-media) .content-card__media-main img,
    .content-cards[data-cards-rail="content_cards_2"] .content-card:not(.has-m-media) .content-card__media-main video {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center center !important;
        background: transparent;
    }

    /* Section phone setting: main media scale for content cards 1 and 2. */
    body.has-mobile-cards-media .content-card:not(.content-card--rail-2) .content-card__media > img,
    body.has-mobile-cards-media .content-card:not(.content-card--rail-2) .content-card__media > video,
    body.has-mobile-cards-media .content-card:not(.content-card--rail-2) .content-card__media-main img,
    body.has-mobile-cards-media .content-card:not(.content-card--rail-2) .content-card__media-main video {
        scale: calc(var(--cards-media-scale-mobile) / 100) !important;
        transform-origin: center center !important;
    }

    body.has-mobile-cards-2-media .content-card.content-card--rail-2 .content-card__media > img,
    body.has-mobile-cards-2-media .content-card.content-card--rail-2 .content-card__media > video,
    body.has-mobile-cards-2-media .content-card.content-card--rail-2 .content-card__media-main img,
    body.has-mobile-cards-2-media .content-card.content-card--rail-2 .content-card__media-main video {
        scale: calc(var(--cards-2-media-scale-mobile) / 100) !important;
        transform-origin: center center !important;
    }

    .shorts-rail.has-mobile-h {
        --shorts-card-height: var(--shorts-card-height-mobile);
        --shorts-scale: calc(var(--shorts-card-height-mobile) / 100) !important;
        --shorts-h: calc(420px * (var(--shorts-card-height-mobile) / 100)) !important;
        grid-auto-columns: minmax(0, min(100vw, calc(240px * var(--shorts-scale)))) !important;
    }

    .shorts-rail.has-mobile-h.locale-marquee .short-card {
        width: min(100vw, calc(240px * var(--shorts-scale, 1))) !important;
        min-width: min(100vw, calc(240px * var(--shorts-scale, 1))) !important;
        max-width: min(100vw, calc(240px * var(--shorts-scale, 1))) !important;
        flex: 0 0 min(100vw, calc(240px * var(--shorts-scale, 1))) !important;
    }

    .shorts-rail.has-mobile-h .short-media,
    .shorts-rail.has-mobile-h .short-media--file,
    .shorts-rail.has-mobile-h .short-card--youtube .short-media,
    .shorts-rail.has-mobile-h .short-card--tiktok .short-media,
    .shorts-rail.has-mobile-h .short-card video,
    .shorts-rail.has-mobile-h .short-card iframe {
        height: var(--shorts-h) !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .home-talents-section.has-mobile-h {
        --talents-card-size: var(--talents-card-size-mobile);
        --talents-scale: calc(var(--talents-card-size-mobile) / 100) !important;
    }

    .home-talents-section.has-mobile-h .home-talent-card,
    .home-talents-section.has-mobile-h .home-talents-grid:not(.locale-marquee) .home-talent-card,
    .home-talents-section.has-mobile-h .home-talents-grid.locale-marquee .home-talent-card {
        width: min(100vw, calc(168px * var(--talents-scale, 1))) !important;
        min-width: 0 !important;
        max-width: min(100vw, calc(168px * var(--talents-scale, 1))) !important;
        flex: 0 0 min(100vw, calc(168px * var(--talents-scale, 1))) !important;
    }

    .home-winners-section.has-mobile-h {
        --winners-card-height: var(--winners-card-height-mobile);
        --winners-scale: calc(var(--winners-card-height-mobile) / 100) !important;
        --winners-height-scale: var(--winners-scale);
    }

    .home-winners-section.has-mobile-h .home-winner-card,
    .home-winners-section.has-mobile-h .home-winners-grid:not(.locale-marquee) .home-winner-card,
    .home-winners-section.has-mobile-h .home-winners-grid.locale-marquee .home-winner-card {
        width: min(100vw, calc(168px * var(--winners-scale, 1))) !important;
        min-width: 0 !important;
        max-width: min(100vw, calc(168px * var(--winners-scale, 1))) !important;
        flex: 0 0 min(100vw, calc(168px * var(--winners-scale, 1))) !important;
    }

    .trends-section.has-mobile-h,
    .trends-rail.has-mobile-h {
        --trends-scale: calc(var(--trends-card-size-mobile) / 100);
    }

    .trends-rail.has-mobile-h .trend-card,
    .trends-rail.has-mobile-h.locale-marquee .trend-card {
        width: min(100vw, calc(240px * var(--trends-scale, 1))) !important;
        max-width: min(100vw, calc(240px * var(--trends-scale, 1))) !important;
        min-width: 0 !important;
        flex: 0 0 min(100vw, calc(240px * var(--trends-scale, 1))) !important;
    }

    .trends-rail.has-mobile-h .trend-thumb {
        width: calc(64px * var(--trends-scale, 1));
        height: calc(84px * var(--trends-scale, 1));
    }

    body.has-mobile-flavor-touch .flavor-card.is-touch-reveal,
    body.has-mobile-flavor-touch .flavor-card.is-touch-reveal .flavor-visual {
        overflow: hidden;
        z-index: 8;
    }

    body.has-mobile-flavor-touch .flavor-touch {
        overflow: hidden;
        z-index: 6;
        display: grid;
        place-items: center;
        justify-items: center;
        align-items: center;
        align-content: center;
    }

    body.has-mobile-flavor-touch .flavor-touch .flavor-touch__img {
        transform: scale(calc(var(--flavor-touch-scale-mobile) / 100));
        transform-origin: center center;
        object-position: center center;
        justify-self: center;
        align-self: center;
        max-width: none !important;
        max-height: none !important;
    }

    body.has-mobile-flavor-touch .flavor-touch.flavor-touch--sized .flavor-touch__img {
        width: var(--touch-w, auto);
        height: var(--touch-h, auto);
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain;
        object-position: center center;
        justify-self: center;
        align-self: center;
    }

    body.has-mobile-cards-touch .content-card:not(.content-card--rail-2).is-touch-reveal,
    body.has-mobile-cards-2-touch .content-card.content-card--rail-2.is-touch-reveal,
    body.has-mobile-cards-touch .content-card:not(.content-card--rail-2).is-touch-reveal .content-card__media,
    body.has-mobile-cards-2-touch .content-card.content-card--rail-2.is-touch-reveal .content-card__media,
    body.has-mobile-cards-touch .content-card:not(.content-card--rail-2).is-touch-reveal .content-card__media--only,
    body.has-mobile-cards-2-touch .content-card.content-card--rail-2.is-touch-reveal .content-card__media--only,
    body.has-mobile-cards-touch .content-card:not(.content-card--rail-2).is-touch-reveal .content-card__media--fill,
    body.has-mobile-cards-2-touch .content-card.content-card--rail-2.is-touch-reveal .content-card__media--fill {
        overflow: hidden;
        z-index: 8;
    }

    body.has-mobile-cards-touch .content-card:not(.content-card--rail-2) .content-card__touch,
    body.has-mobile-cards-2-touch .content-card.content-card--rail-2 .content-card__touch {
        overflow: hidden;
        z-index: 6;
        display: grid;
        place-items: center;
        justify-items: center;
        align-items: center;
        align-content: center;
    }

    body.has-mobile-cards-touch .content-card:not(.content-card--rail-2) .content-card__touch-img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        align-self: center;
        justify-self: center;
        object-fit: contain;
        object-position: center center;
        transform: scale(calc(var(--cards-touch-scale-mobile) / 100));
        transform-origin: center center;
    }

    body.has-mobile-cards-touch .content-card:not(.content-card--rail-2) .content-card__touch--sized .content-card__touch-img {
        width: var(--touch-w, auto);
        height: var(--touch-h, auto);
        max-width: 100% !important;
        max-height: 100% !important;
        align-self: center;
        justify-self: center;
        object-fit: contain;
        object-position: center center;
    }

    body.has-mobile-cards-2-touch .content-card.content-card--rail-2 .content-card__touch-img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        align-self: center;
        justify-self: center;
        object-fit: contain;
        object-position: center center;
        transform: scale(calc(var(--cards-2-touch-scale-mobile) / 100));
        transform-origin: center center;
    }

    body.has-mobile-cards-2-touch .content-card.content-card--rail-2 .content-card__touch--sized .content-card__touch-img {
        width: var(--touch-w, auto);
        height: var(--touch-h, auto);
        max-width: 100% !important;
        max-height: 100% !important;
        align-self: center;
        justify-self: center;
        object-fit: contain;
        object-position: center center;
    }

    body.has-mobile-flavor-touch-front .flavor-touch,
    body.has-mobile-flavor-touch-front .flavor-touch.flavor-touch--back {
        z-index: 3 !important;
    }

    body.has-mobile-flavor-touch-front .flavor-product {
        z-index: 1 !important;
    }

    body.has-mobile-flavor-touch-back .flavor-touch,
    body.has-mobile-flavor-touch-back .flavor-touch.flavor-touch--front {
        z-index: 0 !important;
    }

    body.has-mobile-flavor-touch-back .flavor-product {
        z-index: 2 !important;
    }

    body.has-mobile-cards-touch-front .content-card:not(.content-card--rail-2) .content-card__touch,
    body.has-mobile-cards-touch-front .content-card:not(.content-card--rail-2) .content-card__touch--back {
        z-index: 4 !important;
    }

    body.has-mobile-cards-touch-front .content-card:not(.content-card--rail-2) .content-card__media-main {
        z-index: 1 !important;
    }

    body.has-mobile-cards-touch-back .content-card:not(.content-card--rail-2) .content-card__touch,
    body.has-mobile-cards-touch-back .content-card:not(.content-card--rail-2) .content-card__touch--front {
        z-index: 0 !important;
    }

    body.has-mobile-cards-touch-back .content-card:not(.content-card--rail-2) .content-card__media-main {
        z-index: 2 !important;
    }

    body.has-mobile-cards-2-touch-front .content-card.content-card--rail-2 .content-card__touch,
    body.has-mobile-cards-2-touch-front .content-card.content-card--rail-2 .content-card__touch--back {
        z-index: 4 !important;
    }

    body.has-mobile-cards-2-touch-front .content-card.content-card--rail-2 .content-card__media-main {
        z-index: 1 !important;
    }

    body.has-mobile-cards-2-touch-back .content-card.content-card--rail-2 .content-card__touch,
    body.has-mobile-cards-2-touch-back .content-card.content-card--rail-2 .content-card__touch--front {
        z-index: 0 !important;
    }

    body.has-mobile-cards-2-touch-back .content-card.content-card--rail-2 .content-card__media-main {
        z-index: 2 !important;
    }

    /* A card-level phone layer overrides the Cards 2 section layer. */
    html body .content-card.content-card--rail-2.has-m-touch-layer-front .content-card__touch {
        z-index: 4 !important;
    }

    html body .content-card.content-card--rail-2.has-m-touch-layer-front .content-card__media-main {
        z-index: 1 !important;
    }

    html body .content-card.content-card--rail-2.has-m-touch-layer-back .content-card__touch {
        z-index: 0 !important;
    }

    html body .content-card.content-card--rail-2.has-m-touch-layer-back .content-card__media-main {
        z-index: 2 !important;
    }

    /* Phone-only show/hide from each section's mobile controls. */
    body.hide-mobile-hero .hero,
    body.hide-mobile-hero-media .hero-media,
    body.hide-mobile-flavors #flavors,
    body.hide-mobile-flavors-image .flavor-product,
    body.hide-mobile-flavors-touch .flavor-touch,
    body.hide-mobile-image-strip #image-strip,
    body.hide-mobile-content-cards #content-cards,
    body.hide-mobile-content-cards-touch #content-cards .content-card__touch,
    body.hide-mobile-content-cards-2 #content-cards-2,
    body.hide-mobile-content-cards-2 .content-card.content-card--rail-2,
    body.hide-mobile-content-cards-2-touch #content-cards-2 .content-card__touch,
    body.hide-mobile-content-cards-2-touch .content-card.content-card--rail-2 .content-card__touch,
    body.hide-mobile-trends #trends,
    body.hide-mobile-shorts #shorts,
    body.hide-mobile-talents #talents,
    body.hide-mobile-winners #winners {
        display: none !important;
    }

    /* Touch image centering on phones: center of image, clip to card frame */
    body.has-mobile-flavors-touch-center-x .flavor-card.is-touch-reveal,
    body.has-mobile-flavors-touch-center-y .flavor-card.is-touch-reveal,
    body.has-mobile-flavors-touch-center-x .flavor-card.is-touch-reveal .flavor-visual,
    body.has-mobile-flavors-touch-center-y .flavor-card.is-touch-reveal .flavor-visual,
    body.has-mobile-flavors-touch-center-x .flavor-touch,
    body.has-mobile-flavors-touch-center-y .flavor-touch {
        overflow: hidden !important;
    }

    body.has-mobile-flavors-touch-center-x .flavor-touch,
    body.has-mobile-flavors-touch-center-y .flavor-touch {
        display: grid !important;
    }

    body.has-mobile-flavors-touch-center-x .flavor-touch {
        justify-items: center !important;
    }

    body.has-mobile-flavors-touch-center-x .flavor-touch .flavor-touch__img {
        justify-self: center !important;
        object-position: center center !important;
        transform-origin: center center !important;
    }

    body.has-mobile-flavors-touch-center-y .flavor-touch {
        align-items: center !important;
        align-content: center !important;
    }

    body.has-mobile-flavors-touch-center-y .flavor-touch .flavor-touch__img {
        align-self: center !important;
        object-position: center center !important;
        transform-origin: center center !important;
    }

    body.has-mobile-flavors-touch-center-x.has-mobile-flavors-touch-center-y .flavor-touch {
        place-items: center !important;
    }

    body.has-mobile-flavors-touch-center-x.has-mobile-flavors-touch-center-y .flavor-touch .flavor-touch__img {
        object-position: center center !important;
        transform-origin: center center !important;
        justify-self: center !important;
        align-self: center !important;
    }

    body.has-mobile-content-cards-touch-center-x .content-card:not(.content-card--rail-2).is-touch-reveal,
    body.has-mobile-content-cards-touch-center-y .content-card:not(.content-card--rail-2).is-touch-reveal,
    body.has-mobile-content-cards-touch-center-x .content-card:not(.content-card--rail-2).is-touch-reveal .content-card__media,
    body.has-mobile-content-cards-touch-center-y .content-card:not(.content-card--rail-2).is-touch-reveal .content-card__media,
    body.has-mobile-content-cards-touch-center-x .content-card:not(.content-card--rail-2).is-touch-reveal .content-card__media--only,
    body.has-mobile-content-cards-touch-center-y .content-card:not(.content-card--rail-2).is-touch-reveal .content-card__media--only,
    body.has-mobile-content-cards-touch-center-x .content-card:not(.content-card--rail-2).is-touch-reveal .content-card__media--fill,
    body.has-mobile-content-cards-touch-center-y .content-card:not(.content-card--rail-2).is-touch-reveal .content-card__media--fill,
    body.has-mobile-content-cards-touch-center-x .content-card:not(.content-card--rail-2) .content-card__touch,
    body.has-mobile-content-cards-touch-center-y .content-card:not(.content-card--rail-2) .content-card__touch {
        overflow: hidden !important;
    }

    body.has-mobile-content-cards-touch-center-x .content-card:not(.content-card--rail-2) .content-card__touch {
        justify-items: center;
    }

    body.has-mobile-content-cards-touch-center-x .content-card:not(.content-card--rail-2) .content-card__touch-img {
        justify-self: center;
        transform-origin: center center;
    }

    body.has-mobile-content-cards-touch-center-y .content-card:not(.content-card--rail-2) .content-card__touch {
        align-items: center;
        align-content: center;
    }

    body.has-mobile-content-cards-touch-center-y .content-card:not(.content-card--rail-2) .content-card__touch-img {
        align-self: center;
        object-position: center center;
        transform-origin: center center;
    }

    body.has-mobile-content-cards-2-touch-center-x .content-card.content-card--rail-2.is-touch-reveal,
    body.has-mobile-content-cards-2-touch-center-y .content-card.content-card--rail-2.is-touch-reveal,
    body.has-mobile-content-cards-2-touch-center-x .content-card.content-card--rail-2.is-touch-reveal .content-card__media,
    body.has-mobile-content-cards-2-touch-center-y .content-card.content-card--rail-2.is-touch-reveal .content-card__media,
    body.has-mobile-content-cards-2-touch-center-x .content-card.content-card--rail-2.is-touch-reveal .content-card__media--only,
    body.has-mobile-content-cards-2-touch-center-y .content-card.content-card--rail-2.is-touch-reveal .content-card__media--only,
    body.has-mobile-content-cards-2-touch-center-x .content-card.content-card--rail-2.is-touch-reveal .content-card__media--fill,
    body.has-mobile-content-cards-2-touch-center-y .content-card.content-card--rail-2.is-touch-reveal .content-card__media--fill,
    body.has-mobile-content-cards-2-touch-center-x .content-card.content-card--rail-2 .content-card__touch,
    body.has-mobile-content-cards-2-touch-center-y .content-card.content-card--rail-2 .content-card__touch {
        overflow: hidden !important;
    }

    body.has-mobile-content-cards-2-touch-center-x .content-card.content-card--rail-2 .content-card__touch {
        justify-items: center;
    }

    body.has-mobile-content-cards-2-touch-center-x .content-card.content-card--rail-2 .content-card__touch-img {
        justify-self: center;
        transform-origin: center center;
    }

    body.has-mobile-content-cards-2-touch-center-y .content-card.content-card--rail-2 .content-card__touch {
        align-items: center;
        align-content: center;
    }

    body.has-mobile-content-cards-2-touch-center-y .content-card.content-card--rail-2 .content-card__touch-img {
        align-self: center;
        object-position: center center;
        transform-origin: center center;
    }

    /* Per-card phone height overrides the rail-level Cards 2 height scale. */
    html body .rel-layout article.content-card.content-card--rail-2.content-card--free-size.has-m-box-h[data-card-uid],
    html body .content-cards[data-cards-rail="content_cards_2"] article.content-card.content-card--rail-2.has-m-box-h[data-card-uid] {
        aspect-ratio: auto !important;
        height: var(--m-card-h) !important;
        min-height: var(--m-card-h) !important;
        max-height: var(--m-card-h) !important;
    }

    /* Final rail-level width switch: must override card and placement sizing. */
    html body.has-mobile-cards-full-width .rel-layout article.content-card.content-card--free-size[data-card-uid]:not(.content-card--rail-2),
    html body.has-mobile-cards-full-width .content-cards[data-cards-rail="content_cards"] .content-card {
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        flex-basis: 100vw !important;
    }

    html body.has-mobile-cards-2-full-width .rel-layout article.content-card.content-card--rail-2.content-card--free-size[data-card-uid],
    html body.has-mobile-cards-2-full-width .content-cards[data-cards-rail="content_cards_2"] .content-card.content-card--rail-2 {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex-basis: 100% !important;
    }

    /* An explicit card width is more specific than the rail-wide full-width default. */
    html body.has-mobile-cards-2-full-width .rel-layout article.content-card.content-card--rail-2.content-card--free-size.has-m-box-w:not(.has-m-box-fw)[data-card-uid],
    html body.has-mobile-cards-2-full-width .content-cards[data-cards-rail="content_cards_2"] .content-card.content-card--rail-2.has-m-box-w:not(.has-m-box-fw) {
        width: var(--m-card-w) !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex-basis: auto !important;
    }
}