html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    /* Disable default browser scroll */
}

/* Scoped CSS for Moniker LP */
.moniker-lp-wrapper {
    width: 100%;
    height: 100vh;
    /* Full viewport height */
    overflow-y: auto;
    /* Disable native scroll for Manual Scroll Jacking */
    position: relative;
    overflow-x: hidden;
    font-family: 'Outfit', 'Avant Garde', Century Gothic, Futura, sans-serif;
    /* Added Outfit for better mobile rendering, Fallback for Avant Garde */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2b2c2e;
    /* rgba(43,44,46,1) from export */
}

/* Reset for the wrapper to ensure consistency in Oxygen */
.moniker-lp-wrapper * {
    box-sizing: border-box;
}

.moniker-lp-wrapper .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    padding: 0 20px;
    position: relative;
}

.moniker-lp-wrapper .tabs-container {
    max-width: 1600px;
}

/* Utility Classes */
.moniker-lp-wrapper .text-center {
    text-align: center;
}

.moniker-lp-wrapper .flex {
    display: flex;
}

.moniker-lp-wrapper .grid {
    display: grid;
}

.moniker-lp-wrapper .desktop-br {
    display: block;
}

@media (max-width: 768px) {
    .moniker-lp-wrapper .desktop-br {
        display: none;
    }
}

.moniker-lp-wrapper .text-orange {
    color: #F36F2D;
    /* Orange from XD/Screenshot */
}

.moniker-lp-wrapper .text-cyan {
    color: #72CACF;
    /* Cyan from screenshot */
}

.moniker-lp-wrapper .text-green {
    color: #C0CF69;
    /* Green from tabs */
}

.moniker-lp-wrapper .text-italic {
    font-style: italic;
}

.moniker-lp-wrapper .mt-60 {
    margin-top: 60px;
}

/* HERO SECTION REBUILD */
.moniker-lp-wrapper .section-hero {
    position: relative;
    /* Height constraint */
    min-height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    padding: 0;
    background-color: #fff;
    overflow: visible;
    /* Bottom bleed */
    display: flex;
    align-items: center;
    /* Center content vertically */
    /* KEY FIX: Clip top edge, allow bottom infinite bleed */
    clip-path: inset(0 0 -5000px 0);
    z-index: 10;
    /* Raise hero above intro */
}

.moniker-lp-wrapper .hero-container {
    display: flex;
    width: 100%;
    max-width: 1400px;
    /* Wider to accommodate grid */
    margin: 0 auto;
    padding: 0 40px;
    align-items: center;
}

/* LEFT COLUMN: TEXT */
.moniker-lp-wrapper .hero-text-col {
    width: 35%;
    z-index: 10;
    padding-right: 50px;
}

.moniker-lp-wrapper .hero-title {
    font-size: 80px;
    line-height: 1.1;
    font-weight: bold;
    margin-bottom: 30px;
}

.moniker-lp-wrapper .d-block {
    display: block;
}

.moniker-lp-wrapper .hero-subtitle {
    font-size: 24px;
    line-height: 1.5;
    color: #444;
}

/* RIGHT COLUMN: GRID WRAPPER */
.moniker-lp-wrapper .hero-grid-wrapper {
    width: 65%;
    position: relative;
    /* This wrapper helps position the grid */
    height: 100vh;
    /* Takes full height to manage the staggered cols */
    display: flex;
    align-items: center;
    /* Vertically center the grid mass */
}

/* THE GRID ITSELF */
.moniker-lp-wrapper .vertical-masonry-grid {
    display: flex;
    gap: 30px;
    width: 130%;
    /* Extend MORE off to the right */
    position: absolute;
    right: -30%;
    /* Shift right to bleed Col 3 off screen */
    top: -20%;
    /* Pull UP to generally shift all higher */
    transform: rotate(12deg);
    margin-top: -40px;
}

.moniker-lp-wrapper .v-col {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 33.33%;
}

/* STAGGERING LOGIC (STRICT) */
/* Col 1: Lowest (Comes down near text bottom) */
.moniker-lp-wrapper .v-col-1 {
    margin-top: 0;
}

/* Col 2: Higher (Top clipped off) */
.moniker-lp-wrapper .v-col-2 {
    margin-top: -125px;
}

/* Col 3: Highest (Top clipped MORE off) */
.moniker-lp-wrapper .v-col-3 {
    margin-top: -250px;
}

/* IMAGE STYLING */
.moniker-lp-wrapper .rounded-img {
    width: 100%;
    display: block;
    border-radius: 40px;
    /* The specific rounded look */
    object-fit: cover;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Force all to portrait as requested */
.moniker-lp-wrapper .portrait {
    aspect-ratio: 3/4;
}

.moniker-lp-wrapper .square {
    aspect-ratio: 1/1;
}

@media(max-width: 1600px) {
    .moniker-lp-wrapper .v-col-2 {
        margin-top: -100px;
    }

    .moniker-lp-wrapper .v-col-3 {
        margin-top: -200px;
    }
}

@media(max-width: 1400px) {
    .moniker-lp-wrapper .v-col-2 {
        margin-top: -80px;
    }

    .moniker-lp-wrapper .v-col-3 {
        margin-top: -160px;
    }

    .moniker-lp-wrapper .vertical-masonry-grid {
        top: -15%;
        /* Relax top pull */
    }
}

@media(max-width: 1200px) {
    .moniker-lp-wrapper .v-col-2 {
        margin-top: -60px;
    }

    .moniker-lp-wrapper .v-col-3 {
        margin-top: -120px;
    }
}

@media(max-width: 1024px) {
    .moniker-lp-wrapper .hero-container {
        flex-direction: column;
    }

    .moniker-lp-wrapper .hero-text-col {
        width: 100%;
        text-align: center;
        padding: 50px 0;
    }

    .moniker-lp-wrapper .hero-grid-wrapper {
        width: 100%;
        height: 600px;
        position: relative;
    }

    .moniker-lp-wrapper .vertical-masonry-grid {
        width: 100%;
        right: 0;
        top: 0;
        position: relative;
        transform: none;
    }

    .moniker-lp-wrapper .v-col-1,
    .moniker-lp-wrapper .v-col-2,
    .moniker-lp-wrapper .v-col-3 {
        margin-top: 0;
        /* Reset heavy staggering on mobile */
    }
}

@media(max-height: 900px) {
    .moniker-lp-wrapper .vertical-masonry-grid {
        transform: rotate(12deg) scale(0.8);
        /* Scale down to 80% */
        top: -18%;
        /* Pull up slightly more */
    }
}

@media(max-height: 750px) {
    .moniker-lp-wrapper .vertical-masonry-grid {
        transform: rotate(12deg) scale(0.7);
        /* Scale down further for very short screens */
        top: -15%;
    }
}

/* Specific Laptop Fix: Wide but Short-ish (e.g. 1366x768 or 1440x900) */
@media screen and (max-width: 1550px) and (max-height: 950px) {
    .moniker-lp-wrapper .vertical-masonry-grid {
        transform: rotate(12deg) scale(0.75);
        right: -25%;
        top: -15%;
    }

    .moniker-lp-wrapper .v-col-2 {
        margin-top: -80px;
    }

    .moniker-lp-wrapper .v-col-3 {
        margin-top: -160px;
    }
}

/* Intro Section */
.moniker-lp-wrapper .section-intro {
    min-height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    background-color: #2b2c2e;
    /* Dark Charcoal */
    color: #fff;
    position: relative;
    z-index: 5;
    /* Lower than hero to allow bleed OVER it if that was the intent,
                   BUT wait - if we want the images to bleed INTO the next section,
                   usually that means they simply overflow.
                   If the next section has a background, and sits "higher" in DOM order stacking (by default),
                   it covers the previous section's overflow.
                   We need Hero > Intro z-index.
                */
}

/* Intro grid: Stats Left, Text Right */
.moniker-lp-wrapper .intro-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.moniker-lp-wrapper .intro-left {
    flex: 1;
}

.moniker-lp-wrapper .intro-right {
    flex: 1;
}

.moniker-lp-wrapper .intro-stats-text {
    font-size: 50px;
    line-height: 1.2;
    font-weight: bold;
}

.moniker-lp-wrapper .intro-desc {
    font-size: 24px;
    line-height: 1.6;
    color: #eee;
}

.moniker-lp-wrapper .intro-footer-text {
    font-size: 48px;
    font-family: 'Times New Roman', serif;
    font-weight: normal;
    margin-top: 40px;
}

.moniker-lp-wrapper .arrow-graphic-img {
    position: absolute;
    width: 150px;
    right: -100px;
    top: 30px;
    z-index: 20;
    pointer-events: none;
    transform: rotate(10deg);
}



/* Tabs Section */
/* Tabs Section */
.moniker-lp-wrapper .section-tabs {
    position: relative;
    /* Allow it to grow - removed 100vh constraint */
    min-height: 100vh;
    padding: 0;
    background-color: #FAFAFA;
    /* Off-white background */
    color: #2b2c2e;
}

/* Sticky Container inside Tabs Section */
.moniker-lp-wrapper .tabs-sticky-view {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Align to top to prevent bounce */
    padding-top: 120px;
    /* Fixed top spacing */
    overflow: hidden;
}

/* Scroll Triggers (Invisible) */
.moniker-lp-wrapper .tab-scroll-trigger {
    height: 100vh;
    width: 100%;
    position: relative;
    z-index: -1;
    /* Behind everything */
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.moniker-lp-wrapper .tab-scroll-trigger[data-trigger-tab="hours"] {
    position: absolute;
    top: 0;
    left: 0;
}

/* Top Left Badge */
.moniker-lp-wrapper .section-badge {
    display: inline-block;
    background-color: #C0CF69;
    /* Green */
    color: #fff;
    font-weight: bold;
    padding: 10px 30px;
    border-radius: 30px;
    font-size: 20px;
    text-transform: uppercase;
    margin-bottom: 50px;
}

/* Tab Cards Navigation */
.moniker-lp-wrapper .tabs-nav-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 60px;
}

.moniker-lp-wrapper .tab-card-btn {
    background: #EAECC6;
    /* Light greenish beige inactive */
    border: none;
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.moniker-lp-wrapper .tab-card-btn:hover {
    transform: translateY(-5px);
}

.moniker-lp-wrapper .tab-card-btn.active {
    background: #C0CF69;
    /* Active Green */
    color: #fff;
    /* White text on active? or inherit? Screenshot shows white title on active */
}

.moniker-lp-wrapper .tab-card-btn .card-title {
    font-size: 28px;
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
    text-transform: uppercase;
    color: #fff;
    /* White text for titles in screenshot */
}

.moniker-lp-wrapper .tab-card-btn:not(.active) .card-title {
    color: #fff;
}

.moniker-lp-wrapper .tab-card-btn .card-desc {
    font-size: 16px;
    color: #fff;
    opacity: 0.9;
    font-weight: normal;
}

/* Tab Panels */
.moniker-lp-wrapper .tab-panel {
    display: none;
    animation: fadeIn 0.5s ease;
}

.moniker-lp-wrapper .tab-panel.active {
    display: block;
}

/* Split Panel Layout */
.moniker-lp-wrapper .split-panel {
    display: flex;
    align-items: flex-start;
    gap: 60px;
}

.moniker-lp-wrapper .panel-left {
    width: 40%;
}

.moniker-lp-wrapper .panel-right {
    width: 60%;
}

.moniker-lp-wrapper .panel-heading {
    font-size: 64px;
    font-weight: bold;
    margin-bottom: 40px;
    line-height: 1.1;
}

.moniker-lp-wrapper .panel-desc {
    font-size: 28px;
    line-height: 1.6;
    color: #555;
    margin-bottom: 30px;
}

/* Bar Chart */
.moniker-lp-wrapper .bar-chart {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.moniker-lp-wrapper .chart-row {
    display: flex;
    align-items: center;
    position: relative;
    height: 60px;
    margin-bottom: 15px;
}

.moniker-lp-wrapper .bar-label {
    position: absolute;
    left: 20px;
    z-index: 2;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    line-height: 60px;
}

.moniker-lp-wrapper .bar-fill {
    height: 100%;
    border-radius: 0 5px 5px 0;
    /* Slight rounded right edge? Screenshot looks square-ish */
}

.moniker-lp-wrapper .fill-dark {
    background-color: #2b2c2e;
}

.moniker-lp-wrapper .fill-grey-1 {
    background-color: #4A4D55;
}

.moniker-lp-wrapper .fill-grey-2 {
    background-color: #6C7079;
}

.moniker-lp-wrapper .fill-grey-3 {
    background-color: #9EA1A8;
}

.moniker-lp-wrapper .fill-grey-4 {
    background-color: #D1D3D6;
}

/* Responsive */
@media (max-width: 768px) {
    .moniker-lp-wrapper .tabs-nav-cards {
        grid-template-columns: 1fr;
    }

    .moniker-lp-wrapper .split-panel {
        flex-direction: column;
    }

    .moniker-lp-wrapper .panel-left,
    .moniker-lp-wrapper .panel-right {
        width: 100%;
    }
}

/* DISTANCE SECTION */
.moniker-lp-wrapper .section-distance {
    min-height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    align-items: center;
    background: #fff;
    padding: 0;
    position: relative;
    overflow: visible;
}

.moniker-lp-wrapper .distance-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Align left since we removed the right visual column */
    gap: 50px;
    width: 100%;
    position: relative;
    z-index: 2;
    /* Text over BG */
}

.moniker-lp-wrapper .distance-content {
    flex: 0 0 45%;
    /* Slightly wider text area */
    z-index: 2;
}

.moniker-lp-wrapper .distance-title {
    font-size: 50px;
    font-weight: normal;
    margin-bottom: 20px;
    line-height: 1.2;
}

.moniker-lp-wrapper .distance-stat {
    font-size: 36px;
    color: #444;
    margin-bottom: 30px;
    font-weight: normal;
}

.moniker-lp-wrapper .distance-desc {
    font-size: 20px;
    color: #555;
    line-height: 1.6;
}

/* New Background Graphic */
.moniker-lp-wrapper .distance-bg-graphic {
    position: absolute;
    top: 50%;
    /* Start vertical center */
    left: 50%;
    transform: translate(-50%, -50%);
    /* Centered */
    width: 100%;
    min-width: 1400px;
    height: auto;
    z-index: 1;
    /* Behind text */
    pointer-events: none;
    /* To arguably "overflow into section below", we can push it down or make it huge. 
       If the image has whitespace, centering might work. 
       If we want it explicitly lower, we can adjust top. */
    /* top: 60%; example */
}


/* MAP SECTION */
.moniker-lp-wrapper .section-map {
    min-height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background-color: #fff;
}

.moniker-lp-wrapper .map-container {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 60px;
}

.moniker-lp-wrapper .map-visual-col {
    flex: 1.2;
}

.moniker-lp-wrapper .map-img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.moniker-lp-wrapper .map-list-col {
    flex: 0.8;
    padding-left: 20px;
}

.moniker-lp-wrapper .map-title {
    font-size: 40px;
    margin-bottom: 40px;
    line-height: 1.2;
    font-weight: normal;
}

.moniker-lp-wrapper .map-locations {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.moniker-lp-wrapper .map-locations li {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 22px;
    color: #444;
}

.moniker-lp-wrapper .pin-icon {
    width: 30px;
    height: auto;
    object-fit: contain;
}

/* CAROUSEL SECTION STYLES - SPLIT LAYOUT */
.moniker-lp-wrapper .section-carousel {
    background-color: #2b2c2e;
    padding: 0;
    color: #fff;
    min-height: 100vh;
    /* Removed fixed height 100vh to allow scrolling */
    position: relative;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.moniker-lp-wrapper .carousel-sticky-view {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 60px 0;
}

.moniker-lp-wrapper .carousel-scroll-trigger {
    height: 100vh;
    width: 100%;
    position: relative;
    z-index: -1;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.moniker-lp-wrapper .carousel-scroll-trigger[data-index="0"] {
    position: absolute;
    top: 0;
    left: 0;
}

@media(max-width: 1024px) {
    .moniker-lp-wrapper .carousel-scroll-trigger {
        display: none;
    }

    .moniker-lp-wrapper .carousel-sticky-view {
        position: relative;
        height: auto;
        padding: 50px 0;
    }
}

.moniker-lp-wrapper .carousel-title {
    font-size: 50px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 2vh;
    /* Reduced from 60px */
    text-transform: uppercase;
    text-align: center;
    line-height: 1.1;
}

/* Hide Mobile View by Default on Desktop */
.moniker-lp-wrapper .carousel-mobile-view {
    display: none;
}


.moniker-lp-wrapper .carousel-split-layout {
    display: flex;
    gap: 60px;
    align-items: center;
    /* or flex-start */
    max-width: 1400px;
    /* Wider container for this section */
    margin: 0 auto;
    width: 100%;
    padding: 0 40px;
}

/* LEFT COLUMN: STAGE (Active Card) */
.moniker-lp-wrapper .carousel-stage-col {
    flex: 0 0 38%;
    display: flex;
    justify-content: flex-end;
    /* Align to gap */
}

/* Stage Card Style */
.moniker-lp-wrapper .stage-card {
    background: #fff;
    border-radius: 40px;
    width: 100%;
    height: auto;
    /* Allow height to be determined by square image */
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    /* Entry Animation handled by @keyframes */
    animation: fadeInUp 0.5s ease forwards;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.moniker-lp-wrapper .stage-card.exiting {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
    pointer-events: none;
}

/* RIGHT COLUMN: STRIP + INFO */
.moniker-lp-wrapper .carousel-side-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
    /* Reduced from 60px */
    overflow: hidden;
    /* Ensure strip doesn't overflow page if animated wildly */
}

/* STRIP (Top Right) */
.moniker-lp-wrapper .carousel-strip-wrapper {
    display: flex;
    gap: 20px;
    /* overflow-x: auto; */
    /* If we want scroll, but we are doing cyclic showing of 3 items */
}

.moniker-lp-wrapper .strip-card {
    background: #fff;
    border-radius: 25px;
    width: 200px;
    /* Smaller width */
    height: 280px;
    /* Smaller height */
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    opacity: 0;
    /* Start invisible for animation */
    transition: transform 0.3s ease, opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    animation: fadeInStrip 0.5s ease forwards;
}

.moniker-lp-wrapper .strip-card:hover {
    opacity: 1 !important;
    transform: translateY(-5px);
}

.moniker-lp-wrapper .strip-card.exiting {
    opacity: 0;
    transform: translateY(-20px);
}

/* INFO WRAPPER (Bottom Right) */
.moniker-lp-wrapper .carousel-info-wrapper {
    /* Aligned under the strip */
    max-width: 600px;
}

.moniker-lp-wrapper .carousel-headline {
    font-size: 36px;
    line-height: 1.2;
    margin-bottom: 20px;
}

.moniker-lp-wrapper .carousel-description p {
    font-size: 18px;
    color: #ccc;
    line-height: 1.6;
}

.moniker-lp-wrapper .carousel-description strong {
    color: #fff;
}

.moniker-lp-wrapper .carousel-text-wrapper {
    animation: fadeInUp 0.5s ease forwards;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.moniker-lp-wrapper .carousel-text-wrapper.exiting {
    opacity: 0;
    transform: translateY(-10px);
}

/* Keyframes */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Keyframes specifically for Strip to respect opacity preference */
@keyframes fadeInStrip {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 0.6;
        transform: translateY(0);
    }
}

/* Dots */
.moniker-lp-wrapper .carousel-dots-wrapper {
    display: flex;
    gap: 10px;
    margin-top: 30px;
}

.moniker-lp-wrapper .carousel-dot {
    width: 12px;
    height: 12px;
    background-color: #555;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}

.moniker-lp-wrapper .carousel-dot.active {
    background-color: #fff;
}

/* SHARED CARD STYLES (Header, Image) */
.moniker-lp-wrapper .card-header {
    background: #fff;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 2;
}

.moniker-lp-wrapper .card-header.small {
    padding: 15px;
    gap: 10px;
}

.moniker-lp-wrapper .card-icon-circle {
    background: #F36F2D;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
}

.moniker-lp-wrapper .card-icon-circle.small {
    width: 30px;
    height: 30px;
    font-size: 14px;
}

.moniker-lp-wrapper .arrow-icon {
    display: inline-block;
    transform: rotate(45deg);
    /* Points Right */
    line-height: 1;
}

.moniker-lp-wrapper .card-title-text {
    color: #2b2c2e;
    font-weight: bold;
    font-size: 18px;
}

.moniker-lp-wrapper .card-title-text.small {
    font-size: 14px;
}

.moniker-lp-wrapper .card-image {
    flex: 1;
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    /* Force square thumbnail */
}

.moniker-lp-wrapper .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.moniker-lp-wrapper .card-image iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Overlay for Strip items to prevent interaction with iframe and capture click */
.moniker-lp-wrapper .strip-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: transparent;
    cursor: pointer;
}

.moniker-lp-wrapper .play-btn-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    border: 2px solid #fff;
    z-index: 5;
    cursor: pointer;
}

.moniker-lp-wrapper .play-btn-overlay.small {
    width: 40px;
    height: 40px;
    font-size: 16px;
}

/* App Icons */
.moniker-lp-wrapper .app-icons-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    margin-top: 60px;
}

.moniker-lp-wrapper .app-icon {
    width: 140px;
    height: 140px;
    object-fit: cover;
    /* or contain if transparent pngs are already round-ish */
    border-radius: 50%;
    /* Ensure circular */
    transition: transform 0.3s ease;
}

.moniker-lp-wrapper .app-icon:hover {
    transform: scale(1.1) rotate(5deg);
}

/* Responsive */
@media (max-width: 1024px) {
    .moniker-lp-wrapper .carousel-split-layout {
        flex-direction: column;
        text-align: center;
    }

    .moniker-lp-wrapper .carousel-stage-col {
        width: 100%;
    }

    .moniker-lp-wrapper .stage-card {
        height: 500px;
    }

    .moniker-lp-wrapper .carousel-side-col {
        width: 100%;
        gap: 40px;
        height: auto;
    }

    .moniker-lp-wrapper .section-carousel {
        height: auto;
        min-height: 100vh;
        padding: 100px 0;
    }

    .moniker-lp-wrapper .carousel-strip-wrapper {
        justify-content: center;
    }

    .moniker-lp-wrapper .carousel-info-wrapper {
        margin: 0 auto;
    }

    .moniker-lp-wrapper .carousel-dots-wrapper {
        justify-content: center;
    }
}

/* BIG BRAND SECTION */
.moniker-lp-wrapper .section-big-brand {
    background-color: #FAFAFA;
    min-height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    align-items: center;
    padding: 100px 0;
}

.moniker-lp-wrapper .big-brand-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
    width: 100%;
}

.moniker-lp-wrapper .big-brand-text {
    flex: 1;
}

.moniker-lp-wrapper .big-brand-visual {
    flex: 1.2;
    display: flex;
    justify-content: center;
}

.moniker-lp-wrapper .big-brand-title {
    font-size: 64px;
    /* Slight bump */
    font-weight: 300;
    /* Lighter by default for "LOCAL LOVE" */
    text-transform: uppercase;
    margin-bottom: 40px;
    line-height: 1.1;
    letter-spacing: 1px;
    color: #2b2c2e;
}

.moniker-lp-wrapper .big-brand-title strong {
    font-weight: 800;
    /* Bold for "BIG BRAND," */
}

.moniker-lp-wrapper .big-brand-challenge {
    font-size: 32px;
    margin-bottom: 30px;
    line-height: 1.4;
    font-weight: 400;
    /* Normal weight for the description part */
}

.moniker-lp-wrapper .challenge-label {
    font-weight: 800;
    /* Bold for "The challenge:" */
}

.moniker-lp-wrapper .big-brand-body p {
    font-size: 20px;
    line-height: 1.6;
    color: #555;
    max-width: 90%;
}

.moniker-lp-wrapper .big-brand-img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* CLEANED UP SECTION */
.moniker-lp-wrapper .section-cleaned-up {
    background-color: #fff;
    min-height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    align-items: center;
    padding: 100px 0;
}

.moniker-lp-wrapper .cleaned-up-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
    width: 100%;
}

.moniker-lp-wrapper .cleaned-up-text {
    flex: 1;
    order: 1;
}

.moniker-lp-wrapper .cleaned-up-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    order: 2;
}

.moniker-lp-wrapper .cleaned-up-title {
    font-size: 60px;
    font-weight: normal;
    text-transform: uppercase;
    margin-bottom: 40px;
    line-height: 1;
}

.moniker-lp-wrapper .cleaned-up-subtitle {
    font-size: 32px;
    margin-bottom: 40px;
    line-height: 1.4;
    font-weight: normal;
}

.moniker-lp-wrapper .cleaned-up-body p {
    font-size: 20px;
    line-height: 1.6;
    color: #555;
    max-width: 90%;
}

/* Video Thumbnail Wrapper */
.moniker-lp-wrapper .video-thumbnail-wrapper {
    width: 100%;
    max-width: 400px;
    height: auto;
    /* Let image define height, or enforce aspect ratio */
    aspect-ratio: 9/16;
    /* Vertical Video */
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    cursor: pointer;
}

.moniker-lp-wrapper .video-thumbnail-wrapper:hover {
    transform: translateY(-10px);
}

.moniker-lp-wrapper .video-thumbnail-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Ensure play button overlay works on hover for this wrapper too */
.moniker-lp-wrapper .video-thumbnail-wrapper:hover .play-btn-overlay {
    transform: translate(-50%, -50%) scale(1.1);
    background: rgba(255, 255, 255, 0.5);
}

/* SIGNED MONIKER SECTION */
.moniker-lp-wrapper .section-signed {
    background-color: #FAF8F6;
    height: 100vh;
    min-height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
    text-align: center;
    overflow: hidden;
    /* Ensure no internal scroll for the section itself unless intended */
}

.moniker-lp-wrapper .signed-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 800px;
}

.moniker-lp-wrapper .signed-title {
    font-size: 70px;
    margin-bottom: 40px;
    font-weight: normal;
}

.moniker-lp-wrapper .signed-body {
    margin-bottom: 40px;
}

.moniker-lp-wrapper .signed-body .large-text {
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
}

.moniker-lp-wrapper .signed-body .medium-text {
    font-size: 22px;
    color: #555;
    line-height: 1.6;
}

.moniker-lp-wrapper .btn-cta {
    display: inline-block;
    background-color: #F36F2D;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    padding: 18px 50px;
    border-radius: 50px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 50px;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.moniker-lp-wrapper .btn-cta:hover {
    transform: translateY(-5px);
    background-color: #e05e1c;
}

.moniker-lp-wrapper .footer-social-text {
    font-size: 16px;
    color: #777;
    margin-bottom: 20px;
    max-width: 600px;
    line-height: 1.5;
}

.moniker-lp-wrapper .social-icons {
    display: flex;
    gap: 30px;
    font-size: 30px;
}

.moniker-lp-wrapper .social-icons a {
    color: #2b2c2e;
    transition: color 0.3s ease, transform 0.3s ease;
}

.moniker-lp-wrapper .social-icons a:hover {
    color: #F36F2D;
    transform: translateY(-5px);
}

/* RESPONSIVE FOR NEW SECTIONS */
@media (max-width: 1024px) {

    .moniker-lp-wrapper .big-brand-container,
    .moniker-lp-wrapper .cleaned-up-container {
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }

    .moniker-lp-wrapper .big-brand-visual,
    .moniker-lp-wrapper .cleaned-up-visual {
        width: 100%;
        order: 2;
    }

    .moniker-lp-wrapper .big-brand-text,
    .moniker-lp-wrapper .cleaned-up-text {
        order: 1;
        width: 100%;
    }

    .moniker-lp-wrapper .big-brand-body p,
    .moniker-lp-wrapper .cleaned-up-body p {
        max-width: 100%;
    }

    .moniker-lp-wrapper .video-thumbnail-wrapper {
        margin: 0 auto;
        aspect-ratio: 1/1 !important;
        /* Square on mobile */
        max-width: 300px;
        /* Limit width so it doesn't dominate */
    }

    .moniker-lp-wrapper .video-thumbnail-wrapper img {
        object-fit: cover;
        /* Ensure image fills square without distortion */
        object-position: center 20%;
        /* Focus on top-center of vertical image */
    }
}

/* LIGHTBOX STYLES */
.lightbox {
    display: none;
    position: fixed;
    z-index: 99999;
    /* Increased z-index significantly */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(5px);
    justify-content: center;
    align-items: center;
}

.lightbox.active {
    display: flex;
}

.lightbox-content {
    position: relative;
    width: 90%;
    max-width: 1000px;
    background-color: #000;
    border-radius: 20px;
    box-shadow: 0 0 50px rgba(243, 111, 45, 0.2);
    /* Orange glow */
    overflow: visible;
    /* Changed from hidden to visible so close button can be seen */
}

.close-lightbox {
    color: #fff;
    position: absolute;
    top: -40px;
    right: 0;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
    line-height: 30px;
    z-index: 20;
    /* Ensure it sits on top of the sibling video-wrapper */
}

.close-lightbox:hover {
    color: #F36F2D;
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    /* Ensure video corners are clipped to match container radius */
    border-radius: 20px;
    /* Re-apply radius here since parent is no longer overflow:hidden */
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* VERTICAL MODE OVERRIDES */
.lightbox-content.vertical-mode {
    max-width: 50vh;
    /* Constrain width to keep it looking like a phone */
}

.lightbox-content.vertical-mode .video-wrapper {
    padding-bottom: 177.77%;
    /* 9:16 Aspect Ratio */
}

/* =========================================
   MOBILE OPTIMIZATION (Max Height 100vh)
   ========================================= */
@media (max-width: 768px) {

    /* 0. Critical Scroll Fix */
    body,
    html {
        overflow: hidden;
        /* Keep body hidden, scroll wrapper */
    }

    .moniker-lp-wrapper {
        height: 100vh;
        overflow-y: auto !important;
        /* Enable native touch scroll */
        scroll-snap-type: y mandatory;
        /* Enable snap */
        scroll-behavior: smooth;
    }

    /* 1. Global Section Constraint */
    .moniker-lp-wrapper .section-hero,
    .moniker-lp-wrapper .section-intro,
    .moniker-lp-wrapper .section-tabs,
    .moniker-lp-wrapper .section-distance,
    .moniker-lp-wrapper .section-map,
    .moniker-lp-wrapper .section-carousel,
    .moniker-lp-wrapper .section-big-brand,
    .moniker-lp-wrapper .section-cleaned-up,
    .moniker-lp-wrapper .section-signed {
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
        /* Internal content shouldn't bleed */
        padding: 40px 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        scroll-snap-align: start !important;
        position: relative;
    }

    /* 2. Global Container Stack */
    .moniker-lp-wrapper .container,
    .moniker-lp-wrapper .hero-container,
    .moniker-lp-wrapper .intro-container,
    .moniker-lp-wrapper .tabs-container,
    .moniker-lp-wrapper .distance-container,
    .moniker-lp-wrapper .map-container,
    .moniker-lp-wrapper .carousel-split-layout,
    .moniker-lp-wrapper .big-brand-container,
    .moniker-lp-wrapper .cleaned-up-container,
    .moniker-lp-wrapper .signed-container {
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 30px !important;
        gap: 20px !important;
        justify-content: center !important;
        text-align: center !important;
        height: auto !important;
        flex: 0 1 auto !important;
        /* Do not force stretch */
    }

    .moniker-lp-wrapper h1,
    .moniker-lp-wrapper h2,
    .moniker-lp-wrapper h3 {
        word-wrap: break-word;
    }

    /* --- HERO --- */
    .moniker-lp-wrapper .hero-title {
        font-size: 42px !important;
        margin-bottom: 20px !important;
    }

    /* Mobile Close Button Override */
    .close-lightbox {
        top: 10px;
        left: 10px;
        /* Changed to left */
        right: auto;
        background: rgba(0, 0, 0, 0.5);
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        line-height: normal;
        padding-bottom: 4px;
        /* Visual adjustment to center 'x' */
    }

    .moniker-lp-wrapper .hero-title .text-orange {
        font-weight: 900 !important;
        /* Heavier weight */
    }

    .moniker-lp-wrapper .hero-subtitle {
        font-size: 18px !important;
    }

    .moniker-lp-wrapper .hero-text-col {
        width: 100% !important;
        padding-right: 0 !important;
        z-index: 2;
    }

    /* Grid as ambient background */
    .moniker-lp-wrapper .hero-grid-wrapper {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        z-index: 1;
        opacity: 0.15;
        /* Subtle background */
        pointer-events: none;
    }

    .moniker-lp-wrapper .vertical-masonry-grid {
        position: absolute !important;
        top: 10% !important;
        right: -50% !important;
        /* Offset */
        width: 150% !important;
        transform: rotate(12deg) scale(1) !important;
    }

    /* --- INTRO --- */
    .moniker-lp-wrapper .intro-stats-text {
        font-size: 32px !important;
    }

    .moniker-lp-wrapper .intro-desc {
        font-size: 18px !important;

        br {
            display: none;
        }

        /* Remove specific breaks */
    }

    /* Fixed Arrow Positioning */
    .moniker-lp-wrapper .arrow-graphic-img {
        display: none !important;
    }

    /* Fine-tune container just in case */
    .moniker-lp-wrapper .intro-footer-text {
        font-size: 28px !important;
        margin-top: 20px !important;
        display: block;
    }

    /* --- TABS --- */
    .moniker-lp-wrapper .section-tabs {
        overflow-y: auto !important;
        /* Allow internal scroll if needed */
        justify-content: flex-start !important;
        /* Top align to fit navigation */
        padding-top: 80px !important;
    }

    .moniker-lp-wrapper .tabs-sticky-view {
        position: static !important;
        height: auto !important;
        padding-top: 0 !important;
        overflow: visible !important;
    }

    .moniker-lp-wrapper .tab-scroll-trigger {
        display: none !important;
        /* Hide triggers to remove fake scroll height */
    }

    .moniker-lp-wrapper .section-badge {
        margin-bottom: 20px !important;
        padding: 5px 20px !important;
        font-size: 14px !important;
    }

    /* Grid for Buttons */
    .moniker-lp-wrapper .tabs-nav-cards {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        /* 2x2 Grid */
        gap: 10px !important;
        margin-bottom: 30px !important;
    }

    .moniker-lp-wrapper .tab-card-btn {
        padding: 15px !important;
        border-radius: 15px !important;
    }

    .moniker-lp-wrapper .tab-card-btn .card-title {
        font-size: 14px !important;
        margin-bottom: 5px !important;
    }

    .moniker-lp-wrapper .tab-card-btn .card-desc {
        display: none !important;
        /* Hide desc to save space */
    }

    /* Panel Content */
    .moniker-lp-wrapper .tab-panel.active {
        animation: fadeIn 0.3s ease;
    }

    .moniker-lp-wrapper .panel-heading {
        font-size: 28px !important;
        margin-bottom: 15px !important;
    }

    .moniker-lp-wrapper .panel-desc {
        font-size: 18px !important;
    }

    /* Chart Fix */
    .moniker-lp-wrapper .split-panel {
        flex-direction: column !important;
    }

    .moniker-lp-wrapper .panel-left,
    .moniker-lp-wrapper .panel-right {
        width: 100% !important;
    }

    /* --- CHARTS (Condensed) --- */
    .moniker-lp-wrapper .bar-chart {
        margin-top: 10px !important;
        gap: 8px !important;
        /* Tighter gap */
    }

    .moniker-lp-wrapper .chart-row {
        height: 35px !important;
        /* Shorter bars */
    }

    .moniker-lp-wrapper .bar-label {
        font-size: 13px !important;
        line-height: 35px !important;
    }

    /* Icons fix */
    .moniker-lp-wrapper .app-icons-row {
        gap: 15px !important;
        flex-wrap: wrap !important;
    }

    .moniker-lp-wrapper .app-icon {
        width: 60px !important;
        height: 60px !important;
    }

    /* --- CAROUSEL --- */
    .moniker-lp-wrapper .carousel-title {
        font-size: 32px !important;
        margin-bottom: 20px !important;
    }







    /* --- DISTANCE --- */
    .moniker-lp-wrapper .section-distance {
        justify-content: center !important;
        overflow: hidden !important;
        /* Ensure the scaled bg doesn't bleed */
    }

    .moniker-lp-wrapper .distance-title {
        font-size: 36px !important;
    }

    .moniker-lp-wrapper .distance-stat {
        font-size: 28px !important;
    }

    /* FIX: Make graphic visible and centered, SCALED 2x */
    .moniker-lp-wrapper .distance-bg-graphic {
        opacity: 0.8 !important;
        width: 90% !important;
        min-width: 0 !important;
        position: relative !important;
        transform: scale(2) !important;
        /* Requested Scale 2 */
        /* Reset transform */
        top: auto !important;
        left: auto !important;
        display: block !important;
        margin: 40px auto 60px auto !important;
        /* Extra margin for scale */
    }

    .moniker-lp-wrapper .distance-container {
        padding-top: 0 !important;
        justify-content: center !important;
    }

    /* --- MAP --- */
    /* FIX: Unhide Map, Move ABOVE Heading */
    .moniker-lp-wrapper .map-visual-col {
        display: block !important;
        order: -1 !important;
        /* Move to top */
        margin-bottom: 30px;
        margin-top: 0;
    }

    .moniker-lp-wrapper .map-img {
        width: 100% !important;
        max-width: 80% !important;
        /* Sensible max width */
        height: auto !important;
        display: block;
        margin: 0 auto;
    }

    .moniker-lp-wrapper .map-list-col {
        padding-left: 0 !important;
        text-align: left !important;
        /* Force Left Alignment */
    }

    .moniker-lp-wrapper .map-title {
        font-size: 24px !important;
        /* Smaller Heading */
        margin-bottom: 15px !important;
        text-align: center !important;
        /* Keep heading centered */
    }

    .moniker-lp-wrapper .map-locations {
        gap: 8px !important;
        /* Tighter gap */
        padding-left: 20px !important;
        /* Indent list slightly */
    }

    .moniker-lp-wrapper .map-locations li {
        font-size: 16px !important;
        /* Smaller text */
        justify-content: flex-start !important;
    }

    .moniker-lp-wrapper .pin-icon {
        width: 22px !important;
        /* Force smaller icon size */
        height: auto !important;
        margin-right: 8px !important;
    }

    /* --- BIG BRAND / CLEANED UP --- */
    .moniker-lp-wrapper .big-brand-container {
        position: relative;
        justify-content: center !important;
        gap: 10px !important;
    }

    /* FIX: Big Brand Image Layout - Normal Flow Above */
    .moniker-lp-wrapper .big-brand-visual {
        order: -1 !important;
        /* Move above text */
        position: relative !important;
        /* Reset from absolute */
        top: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: 400px;
        /* Limit width */
        max-height: 250px !important;
        /* Constrain height */
        opacity: 1 !important;
        /* Full opacity */
        z-index: 1;
        margin: 0 auto 10px auto !important;
        pointer-events: auto;
        display: block !important;
        text-align: center;
    }

    .moniker-lp-wrapper .big-brand-img {
        max-height: 100% !important;
        width: auto !important;
        max-width: 100% !important;
        display: inline-block;
    }

    .moniker-lp-wrapper .big-brand-text {
        position: relative;
        z-index: 1;
    }

    .moniker-lp-wrapper .big-brand-title,
    .moniker-lp-wrapper .cleaned-up-title {
        font-size: 28px !important;
        /* Reduced to 28px for better fit */
        margin-bottom: 15px !important;
    }

    .moniker-lp-wrapper .big-brand-challenge,
    .moniker-lp-wrapper .cleaned-up-subtitle {
        font-size: 20px !important;
        /* Reduced from 24px */
        margin-bottom: 15px !important;
    }

    .moniker-lp-wrapper .big-brand-body p {
        font-size: 16px !important;
        /* Reduced body text */
        line-height: 1.4 !important;
    }

    .moniker-lp-wrapper .video-placeholder {
        height: 200px !important;
        max-width: 100% !important;
    }

    /* --- SIGNED --- */
    /* --- SIGNED --- */
    .moniker-lp-wrapper .section-signed {
        justify-content: center !important;
        /* Ensure vertical centering */
        padding: 20px 0 !important;
        /* Reduce padding */
    }

    .moniker-lp-wrapper .signed-title {
        font-size: 36px !important;
        margin-bottom: 15px !important;
    }

    .moniker-lp-wrapper .signed-body {
        margin-bottom: 20px !important;
    }

    .moniker-lp-wrapper .signed-body .large-text {
        font-size: 16px !important;
        margin-bottom: 10px !important;
        line-height: 1.3 !important;
    }

    .moniker-lp-wrapper .signed-body .medium-text {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }

    .moniker-lp-wrapper .btn-cta {
        padding: 12px 30px !important;
        font-size: 14px !important;
        margin-bottom: 20px !important;
    }

    .moniker-lp-wrapper .footer-social-text {
        font-size: 12px !important;
        margin-bottom: 15px !important;
        line-height: 1.3 !important;
        max-width: 100% !important;
    }

    .moniker-lp-wrapper .social-icons {
        font-size: 24px !important;
        gap: 20px !important;
    }
}

/* --- MOBILE/TABLET CAROUSEL (Up to 1024px) --- */
@media (max-width: 1024px) {
    .moniker-lp-wrapper .carousel-split-layout {
        display: none !important;
        /* Hide Desktop Layout */
    }

    .moniker-lp-wrapper .carousel-mobile-view {
        display: block !important;
        /* Show Mobile Layout */
        width: 100%;
        position: relative;
    }

    .moniker-lp-wrapper .mobile-carousel-track-container {
        width: 100%;
        overflow: hidden;
        /* Local clip */
        padding: 40px 0;
        /* Add top/bottom padding for shadow/scale */
    }

    .moniker-lp-wrapper .mobile-carousel-track {
        display: flex;
        align-items: center;
        /* transform applied via JS */
        will-change: transform;
        transition: transform 0.3s ease-out;
        /* Smooth slide */
    }

    .moniker-lp-wrapper .mobile-card {
        flex: 0 0 70vw;
        /* 70% of viewport width */
        width: 70vw;
        /* For larger tablets, 70vw might be huge. Cap it? */
        max-width: 500px;
        /* Cap width for iPad Pro landscape if needed, though they are usually > 1024 */
        aspect-ratio: 1/1;
        /* SQUARE */
        background: #fff;
        border-radius: 30px;
        margin-right: 20px;
        /* Gap */
        position: relative;
        overflow: hidden;
        opacity: 0.5;
        transition: opacity 0.3s ease, transform 0.3s ease;
        transform: scale(0.9);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }

    .moniker-lp-wrapper .mobile-card.active {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        z-index: 2;
    }

    .moniker-lp-wrapper .mobile-carousel-info {
        padding: 0 30px;
        text-align: center;
        margin-top: 10px;
    }

    .moniker-lp-wrapper .mobile-carousel-info .carousel-text-wrapper {
        min-height: 280px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .moniker-lp-wrapper .mobile-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Play Button in Mobile Card */
    .moniker-lp-wrapper .mobile-card .play-btn-overlay {
        width: 60px;
        height: 60px;
        font-size: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(255, 255, 255, 0.3);
        backdrop-filter: blur(5px);
        border-radius: 50%;
        color: #fff;
        border: 2px solid #fff;
        z-index: 5;
    }
}

/* SPIRIT SECTION */
.moniker-lp-wrapper .section-spirit {
    background-color: #F8F7F3;
    padding: 80px 0;
    min-height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #444;
}

.moniker-lp-wrapper .spirit-container {
    width: 100%;
}

.moniker-lp-wrapper .spirit-title {
    font-size: 60px;
    line-height: 1.1;
    margin-bottom: 30px;
    color: #C0CF69;
    text-transform: uppercase;
}

.moniker-lp-wrapper .spirit-title .font-bold {
    font-weight: 700;
}

.moniker-lp-wrapper .spirit-title .font-light {
    font-weight: 300;
}

.moniker-lp-wrapper .spirit-subtitle {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    margin-bottom: 25px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.moniker-lp-wrapper .spirit-desc {
    font-size: 20px;
    line-height: 1.6;
    color: #666;
    max-width: 900px;
    margin: 0 auto 60px auto;
}

.moniker-lp-wrapper .spirit-grid {
    display: flex;
    gap: 40px;
    justify-content: center;
    margin-top: 40px;
}

.moniker-lp-wrapper .spirit-item {
    flex: 1;
    max-width: 400px;
    display: flex;
    flex-direction: column;
}

.moniker-lp-wrapper .media-wrapper {
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 30px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.moniker-lp-wrapper .media-wrapper:hover {
    transform: translateY(-10px);
}

.moniker-lp-wrapper .spirit-iframe {
    width: 100%;
    height: 100%;
}

.moniker-lp-wrapper .spirit-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.moniker-lp-wrapper .bg-black {
    background-color: #000;
}

.moniker-lp-wrapper .bg-dark {
    background-color: #2b2c2e;
}


.moniker-lp-wrapper .spirit-label {
    margin-top: 25px;
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.moniker-lp-wrapper .play-btn-overlay {
    width: 70px;
    height: 70px;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
    border-radius: 50%;
    color: #fff;
    border: 2px solid #fff;
    z-index: 5;
    transition: transform 0.3s ease, background 0.3s ease;
}

.moniker-lp-wrapper .spirit-lightbox-trigger:hover .play-btn-overlay {
    transform: translate(-50%, -50%) scale(1.1);
    background: rgba(255, 255, 255, 0.5);
}

/* Mobile Carousel Implementation for Spirit Section */
@media (max-width: 768px) {
    .moniker-lp-wrapper .section-spirit {
        height: 100vh !important;
        min-height: 100vh !important;
        padding: 20px 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    .moniker-lp-wrapper .spirit-title {
        font-size: 32px !important;
        margin-bottom: 10px !important;
    }

    .moniker-lp-wrapper .spirit-subtitle {
        font-size: 18px !important;
        padding: 0 20px;
        margin-bottom: 15px !important;
        line-height: 1.3 !important;
    }

    .moniker-lp-wrapper .spirit-desc {
        font-size: 14px !important;
        padding: 0 20px;
        margin-bottom: 20px !important;
        line-height: 1.4 !important;
    }

    .moniker-lp-wrapper .spirit-grid {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        /* Remove scroll snap flow */
        /* overflow-x: auto; */
        /* scroll-snap-type: x mandatory; */
        gap: 20px;
        justify-content: flex-start;
        /* No padding hacks, we use JS translation */
        padding: 0 0 40px 0;
        width: 100%;
        margin-top: 30px;
        /* scrollbar-width: none; */
        /* -ms-overflow-style: none; */
        will-change: transform;
        transition: transform 0.3s ease-out;
    }

    /* .moniker-lp-wrapper .spirit-grid::-webkit-scrollbar {
        display: none;
    } */

    .moniker-lp-wrapper .spirit-item {
        flex: 0 0 70vw;
        max-width: 70vw;
        width: 70vw;
        /* scroll-snap-align: center; */
        opacity: 0.5;
        transform: scale(0.9);
        transition: opacity 0.3s ease, transform 0.3s ease;
        margin-right: 20px;
        /* Explicit gap if flex gap isn't reliable in calc, but flex gap is used on parent above. 
           However, for specific calculation consistency with other carousel, let's stick to gap on parent or margin. 
           Previous plan said margin-right: 20px. 
           The parent has gap: 20px. Let's use that, but ensure we don't double dip. 
           Actually, the other carousel uses margin-right: 20px and NO gap on parent? 
           Let's check snippet. 
           Mobile card: margin-right: 20px. 
           Mobile track: display: flex; align-items: center; (No gap specified in snippet).
           So we should match that. Use margin-right on item, remove gap on parent.
        */
    }

    /* Override the gap from flex parent if we use margins */
    .moniker-lp-wrapper .spirit-grid {
        gap: 0;
    }

    .moniker-lp-wrapper .spirit-item.active {
        opacity: 1;
        transform: scale(1);
        z-index: 2;
    }

    .moniker-lp-wrapper .media-wrapper {
        aspect-ratio: 4/3;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }
}

/* --- ENTRANCE ANIMATIONS --- */
.animate-on-scroll,
.animate-pop-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
}

.animate-on-scroll.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger Delays */
.delay-100 {
    transition-delay: 0.1s;
}

.delay-200 {
    transition-delay: 0.2s;
}

.delay-300 {
    transition-delay: 0.3s;
}

.delay-400 {
    transition-delay: 0.4s;
}

.delay-500 {
    transition-delay: 0.5s;
}

.delay-600 {
    transition-delay: 0.6s;
}

.delay-700 {
    transition-delay: 0.7s;
}

.delay-800 {
    transition-delay: 0.8s;
}

/* Special Hero Grid Animation */
.animate-on-scroll.hero-col-anim {
    transform: translateY(100px);
    opacity: 0;
}

.animate-on-scroll.hero-col-anim.in-view {
    transform: translateY(0);
    opacity: 1;
}

/* Pop In Animation (Straight) - For CTA */
.animate-pop-in {
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.animate-pop-in.in-view {
    opacity: 1;
    transform: scale(1);
}

/* Pop In Animation (Rotated) - For Arrow */
.animate-pop-in-rotated {
    opacity: 0;
    transform: scale(0.5) rotate(10deg);
    transition: opacity 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.animate-pop-in-rotated.in-view {
    opacity: 1;
    transform: scale(1) rotate(10deg);
}

/* From Left */
.animate-on-scroll.from-left {
    transform: translateX(-50px);
}

.animate-on-scroll.from-left.in-view {
    transform: translateX(0);
}

/* Fix for Distance Graphic - Preserving Centering */
.moniker-lp-wrapper .distance-bg-graphic.animate-on-scroll {
    transform: translate(calc(-50% - 50px), -50%);
    /* Start slightly left */
    opacity: 0;
}

.moniker-lp-wrapper .distance-bg-graphic.animate-on-scroll.in-view {
    transform: translate(-50%, -50%);
    /* Restore exact center */
    opacity: 1;
}