/* ========================================
   OSMO FLUID SCALING SYSTEM
   CORE responsive engine from original site.
   html font-size scales with viewport width.
   Since ALL Webflow dims use em, everything
   scales proportionally.
   ======================================== */

:root {
    --size-unit: 16;
    --size-container-ideal: 1440;
    --size-container-min: 992px;
    --size-container-max: 2560px;
    --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
    --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
}

@media screen and (max-width: 991px) {
    :root {
        --size-container-ideal: 640;
        --size-container-min: 768px;
        --size-container-max: 991px;
    }
}

@media screen and (max-width: 767px) {
    :root {
        --size-container-ideal: 550;
        --size-container-min: 480px;
        --size-container-max: 767px;
    }
}

@media screen and (max-width: 479px) {
    :root {
        --size-container-ideal: 390;
        --size-container-min: 320px;
        --size-container-max: 479px;
    }
}

html {
    font-size: var(--size-font);
}

body {
    font-size: 1rem;
}

/* ========================================
   HYPE BAM — ORANGE THEME OVERRIDES
   This MUST load AFTER Webflow shared CSS
   to override the green color variables.
   ======================================== */
:root {
    /* Remap Webflow green → Hype Bam orange */
    --dark-green: #E65100 !important;
    --light-green: #FF8C00 !important;
    --bg-pale: #FFF8EF !important;
    --bg-light: #F59020 !important; /* rich amber — matches hero gradient midpoint */
    --white: white !important;
}

/* === Override hardcoded green colors in Webflow CSS === */
/* .nav-text has hardcoded #335c3033 (green with alpha) */
.nav-text {
    background-color: #3D1800 !important;
}

/* Navbar buttons: smaller size for the top nav */
[data-typography-target="navbar-text-fields"] .nav-link {
    font-size: 1.15em !important;
    line-height: 1 !important;
}

[data-typography-target="navbar-text-fields"] .nav-text {
    /* Optical centering: Goga font has ~8% empty above caps, ~20% below baseline.
       Equal 0.24em padding looks top-light. +0.06em top, -0.06em bottom corrects it. */
    padding: 0.30em 0.5em 0.18em !important;
    font-size: 1.05em !important;
    line-height: 1 !important;
}

/* Navbar layout: pull the right button closer to the edge */
.navbar .nav-container {
    padding-right: 2em !important;
}

.navbar .button.is-white {
    margin-right: 0 !important;
}

.navbar .w-node-c4e2d712-b9aa-e56d-102b-73576293bdd9-4811c289 {
    justify-self: end !important;
    grid-column: 11 / span 2 !important;
    margin-right: 0 !important;
}

/* .stage-fact has hardcoded #b6cba4 border at 991px */
@media screen and (max-width: 991px) {
    .stage-fact {
        border-color: #FFB74D !important;
    }
}

/* .testimonial-sound-btn uses color-mix with --dark-green */
.testimonial-sound-btn {
    background-color: rgba(230, 81, 0, 0.35) !important;
}

/* .testimonial-media uses --bg-light (now orange) */
.testimonial-media {
    background-color: #FFB74D !important;
}

/* .sub-line uses --dark-green for background */
.sub-line {
    background-color: #E65100 !important;
}

/* Ensure .flavour section uses correct bg */
.flavour {
    background-color: #FFF8EF !important;
}

/* .flavour-right-bg uses --white for color */
.flavour-right-bg {
    color: white !important;
}

/* ========================================
   FLAVOUR SECTION FIXES
   Make slides visible + prevent collisions
   ======================================== */

/* First slide visible by default (before Swiper loads) */
.flavour-slide:first-child .flavour-slide-dose {
    opacity: 1 !important;
    scale: 1 !important;
    rotate: -5.5deg;
}

.flavour-content-slide:first-child .flavour-content-slide-inner {
    opacity: 1 !important;
}

.flavour-content-slide:first-child .flavour-content-slide-inner .button {
    opacity: 1 !important;
    translate: 0 0 0 !important;
    scale: 1 !important;
}

/* Dose images should fit and not overflow */
.flavour-slide-dose-img {
    width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

/* Ensure swipers clip overflow to prevent collisions */
.flavour-swiper {
    overflow: hidden !important;
}

.flavour-content-swiper {
    overflow: hidden !important;
}

/* .sequence-lines uses --white */
.sequence-lines {
    color: white !important;
}

/* .footer-line uses --white */
.footer-line {
    color: white !important;
}

/* .benefit-svg uses --white */
.benefit-svg {
    color: white !important;
}

/* Payment method item border at 991px uses hardcoded #bg-pale */
@media screen and (max-width: 991px) {
    .payment-method-item {
        border-color: #FFF8EF !important;
    }
}

/* === Body background === */
body,
.body,
body.body {
    background-color: #FFF8EF !important;
}

/* === Orange buttons (override Webflow's dark-green bg) === */
.button .button-bg {
    background-color: #E65100 !important;
}

.button .button-text {
    color: white !important;
}

.button.is-white .button-bg,
.button .button-bg.white-bg {
    background-color: #FFF8EF !important;
}

.button.is-white .button-text,
.button .button-text.dark-font {
    color: #E65100 !important;
}

.button.is-light .button-bg,
.button .button-bg.light-bg {
    background-color: white !important;
}

.button.is-light .button-text {
    color: #E65100 !important;
}

/* === Stage / Hero — Brand gradient background === */
/* Colour stops sampled from brand image: red → orange → gold */
.stage {
    background-color: #F07820 !important; /* rich brand orange fallback */
    background-image: linear-gradient(
        180deg,
        #E86800 0%,       /* deep vivid orange — matches can label bottom edge */
        #F07C12 22%,      /* rich orange — can label mid */
        #F59022 48%,      /* warm amber — can label upper-mid */
        #FFAA30 70%,      /* golden amber — can label top */
        #FFBF48 88%,      /* bright amber-gold — always reads as orange */
        #FFD060 100%      /* warm gold base — still clearly golden-orange, not cream */
    ) !important;
}

/* Dark text for contrast on orange background — deep espresso brown */
.stage .paragraph,
.stage .stage-fact-number,
.stage .stage-fact-unit,
.stage .stage-fact-text {
    color: #3D1800 !important;
}

.stage .hero-heading,
.stage .hero-heading * {
    color: #3D1800 !important;
}

/* "Energy Drink" text — separate div outside GSAP SplitText */
.stage .hero-heading-white {
    color: white !important;
    margin-top: -0.2em;
}

/* Stage bg-svg stroke — white glow on gradient */
.stage .stage-bg-svg {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Deco SVGs — white for contrast on orange background */
.stage .stage-deco-text,
.stage .stage-deco-text.is-wiggle,
.stage .stage-deco-arrow,
.stage .stage-deco-arrow.is-wiggle {
    filter: brightness(0) saturate(100%) invert(100%) !important;
}

/* Navbar buttons — bigger on desktop only */
@media (min-width: 992px) {
    .navbar .button {
        scale: 1.25;
    }
}

/* Hero Buy now button — bigger on desktop only */
@media (min-width: 992px) {
    .stage-cta .button {
        scale: 1.25;
    }
}

.stage-cta .button .button-bg {
    background-color: #3D1800 !important;
}

/* Hero button circle — dark bg with white arrow */
.stage-cta .button .button-cycle-bg {
    background-color: #3D1800 !important;
}

.stage-cta .button .button-arrow {
    filter: brightness(0) saturate(100%) invert(100%) !important;
}

.stage-fact {
    background-color: #FFF8EF !important;
    border-color: #C86E00 !important;
}

/* === Marquee overlay matches page bg === */
.marquee-overlay {
    background-color: #FFF8EF !important;
}

/* === Social media circles === */
.social-media-circle {
    background-color: #FFF8EF !important;
}

.social-media-circle.is-white {
    background-color: white !important;
}

/* === Benefit section white bg === */
.benefit-section {
    background-color: white !important;
}

.benefit-item-check {
    background-color: #FFF8EF !important;
}

/* Align benefit table rows: title spans 3 cols, check/X spans 2 cols
   to match the header layout (Benefits | Logo | Typical Energy Drinks) */
.benefit-table-item>.benefit-item-title {
    grid-column: span 3;
}

.benefit-table-item>.benefit-checker-inner {
    grid-column: span 2;
}

/* === Payment method circles === */
.payment-method-item {
    background-color: white !important;
}

/* === Footer info cards === */
.footer-info {
    background-color: white !important;
    border-color: #FFF8EF !important;
}

.footer-credits-inner {
    background-color: white !important;
}

/* === Statement cards orange bg === */
.statement-card-wrapper {
    background-color: #FFB74D !important;
}

/* === Sequence statement doodle alignment fixes === */
.sequence-section .statement-card .statement-card-paragraph-wrap {
    position: relative;
}

.sequence-section .statement-card .paragraph.center-align {
    position: relative;
    z-index: 1;
}

/* Hide legacy floating wrappers. Word-anchored markers below are more stable. */
.sequence-section .statement-card-paragraph-wrap>.first-statement-icon,
.sequence-section .statement-card-paragraph-wrap>.third-statement-icon,
.sequence-section .statement-card-paragraph-wrap>.fourth-statement-icon {
    display: none !important;
}

.sequence-section .sequence-text-target {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    z-index: 1;
}

.sequence-section .sequence-text-target.is-caffeine,
.sequence-section .sequence-text-target.is-sugar,
.sequence-section .sequence-text-target.is-flavours {
    line-height: 1;
}

.sequence-section .sequence-text-target.is-flavours {
    margin-right: 0.08em;
}

.sequence-section .sequence-text-target-icon {
    position: absolute;
    display: block;
    width: auto;
    height: auto;
    /* Override the webflow img{max-width:100%} reset — otherwise the icon is
       clamped to its (often tiny) containing span and can't wrap the text. */
    max-width: none !important;
    pointer-events: none;
    z-index: 2;
    filter: brightness(0) saturate(100%) invert(28%) sepia(99%) saturate(1500%) hue-rotate(6deg) brightness(98%) contrast(102%) !important;
}

/* Hand-drawn marker scribbles wrap the highlighted text (brand style), to
   match the is-sugar arrow instead of clean geometric circles. The SVGs
   (Layer_1_7 oval, Vector_7 circle) are white-fill + orange-tinted by the base
   rule above; setting left/right/top/bottom with auto width stretches each one
   to wrap its text box. */

/* Oval scribble wrapping the WHOLE "80mg of caffeine" phrase. Explicit
   width/height (an <img> won't stretch to an offset box) + centre transform;
   width > 100% so the oval wraps around the text with margin. Orange (the
   inherited brand filter) to match the highlighted text color. */
.sequence-section .sequence-text-target-icon.is-caffeine {
    width: 132%;
    height: 2.85em;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%) rotate(-4deg);
}

/* Arrow pointing to "5g" */
.sequence-section .sequence-text-target.is-sugar .sequence-text-target-icon.is-sugar {
    width: 1.04em;
    left: 0.44em;
    top: -0.62em;
    transform: rotate(-11deg);
}

/* Circle scribble ringing the leading "5" in "5 Flavours". Orange (inherited
   brand filter) like the text; sized to ring the digit now that max-width is
   off. */
.sequence-section .sequence-text-target-icon.is-flavours {
    width: 1.7em;
    height: 1.7em;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%) rotate(-8deg);
}

@media screen and (max-width: 991px) {
    .sequence-section .sequence-text-target.is-sugar .sequence-text-target-icon.is-sugar {
        width: 0.96em;
        left: 0.4em;
        top: -0.56em;
    }
}

@media screen and (max-width: 479px) {
    .sequence-section .sequence-text-target.is-sugar .sequence-text-target-icon.is-sugar {
        width: 0.9em;
        left: 0.37em;
        top: -0.52em;
    }
}

/* === Testimonial slider items === */
.testimonial-slider-button {
    background-color: white !important;
}

/* === Scrollbar orange === */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-thumb {
    background: #E65100 !important;
    border-radius: 4px;
}

::-webkit-scrollbar-track {
    background: #FFF8EF !important;
}

/* === Selection orange === */
::selection {
    background: #E65100 !important;
    color: white !important;
}

/* === Override remaining green SVG/image assets via CSS filters === */
/* Hue-rotate green (120°) → orange (30°) = -90° rotation, with saturation boost */

/* "More" logo loaded via Lottie — CSS fill/color won't work on canvas.
   Use filter on the CONTAINER to transform all rendered content. */
.stage-logo,
.stage-logo-svg {
    filter: brightness(0) saturate(100%) invert(28%) sepia(99%) saturate(1500%) hue-rotate(6deg) brightness(98%) contrast(102%) !important;
}

/* Lottie player element (both SVG and canvas modes) */
.stage-logo lottie-player {
    filter: brightness(0) saturate(100%) invert(28%) sepia(99%) saturate(1500%) hue-rotate(6deg) brightness(98%) contrast(102%) !important;
}

/* "Real Matcha, Original Taste" handwritten text SVG (loaded as <img>) */
.stage-deco-text,
.stage-deco-text.is-wiggle {
    filter: brightness(0) saturate(100%) invert(28%) sepia(99%) saturate(1500%) hue-rotate(6deg) brightness(98%) contrast(102%) !important;
}

/* Stage deco arrow */
.stage-deco-arrow {
    filter: brightness(0) saturate(100%) invert(28%) sepia(99%) saturate(1500%) hue-rotate(6deg) brightness(98%) contrast(102%) !important;
}

/* Marquee background SVG — has hardcoded #214a1e */
.marquee-bg-svg {
    color: #8B3A00 !important;
}

/* Marquee text SVG */
.marquee-text-svg {
    color: #E65100 !important;
}

/* Stage background SVG (the large arc behind the can) */
.stage-bg,
.stage-bg svg {
    color: rgba(255, 255, 255, 0.75) !important;
}

.stage-bg-svg {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Footer logo SVG */
.footer-logo {
    filter: brightness(0) saturate(100%) invert(28%) sepia(99%) saturate(1500%) hue-rotate(6deg) brightness(98%) contrast(102%) !important;
}

/* Signature images (handwritten style) — all green */
.hero-signature-img,
.animation-signature-img,
.payment-signature-img,
.payment-signature-days-img,
.testimonial-signature-img,
.sequence-signature-text-img,
.sequence-signature-arrow-img,
.sequence-inner-signature-img,
.sequence-final-signature-img,
.flavour-signature-img,
.flavour-signature-arrow-img,
.first-statement-icon-img,
.second-icon-img,
.third-statement-icon-img,
.fourth-statement-icon-img {
    filter: brightness(0) saturate(100%) invert(28%) sepia(99%) saturate(1500%) hue-rotate(6deg) brightness(98%) contrast(102%) !important;
}

/* Benefit table title image (More Nutrition logo in table header) */
.benefit-table-title-img {
    filter: brightness(0) saturate(100%) invert(28%) sepia(99%) saturate(1500%) hue-rotate(6deg) brightness(98%) contrast(102%) !important;
    height: 4em;
    width: auto;
}

/* Stage overlay pattern - keep but match orange */
.stage-overlay {
    opacity: 0.03 !important;
}

/* Loader pattern */
.loader::before {
    opacity: 0.05 !important;
}

/* Social media icons (loaded as <img> with green fills) */
.social-media-icon {
    filter: brightness(0) saturate(100%) invert(28%) sepia(99%) saturate(1500%) hue-rotate(6deg) brightness(98%) contrast(102%) !important;
}

/* Subline underline SVG in hero — espresso (#3D1800) to match the paragraph
   text + buttons it sits beneath (was bright orange, which clashed with the
   amber gradient). Same brand-orange filter chain, darkened via brightness. */
.subline-img {
    filter: brightness(0) saturate(100%) invert(28%) sepia(99%) saturate(1500%) hue-rotate(6deg) brightness(27%) contrast(102%) !important;
}

/* === Retailer partner logo cards (replaces circular payment method icons) === */

/* Rounded rectangle card — replaces the 50% circle */
.payment-method-item {
    border-radius: 1.125em !important;
    width: 13.5em !important;
    height: 8.5em !important;
    padding: 1.25em 1.5em !important;
    box-sizing: border-box !important;
}

/* Reset the staggered wave/arc offset on all items so they flow naturally */
.payment-method-item._1,
.payment-method-item._2,
.payment-method-item._3,
.payment-method-item._4,
.payment-method-item._5,
.payment-method-item._6,
.payment-method-item._7,
.payment-method-item._8 {
    bottom: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    z-index: auto !important;
}

/* Logo image: scale to fill card while preserving aspect ratio */
.payment-method-img {
    object-fit: contain !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

/* SPAR is an ultra-wide banner (~5:1) — reduce padding so it reads clearly */
.payment-method-item:has(.is-spar) {
    padding: 1.75em 1.5em !important;
}

/* Portrait-ish logos (OnlineKade, CelesteDaily) benefit from extra side padding
   so the tall logo doesn't hug the card edge */
.payment-method-item:has(.is-onlinekade),
.payment-method-item:has(.is-celeste) {
    padding: 1em 2.25em !important;
}

/* Mahajana has a tall Sinhala tagline below — give it a touch more vertical room */
.payment-method-item:has(.is-mahajana) {
    padding: 0.75em 1.25em !important;
}

/* Remove the fixed height + negative margin from the arc container */
.payment-methods-inner {
    height: auto !important;
    margin-top: 1em !important;
    margin-bottom: 2em !important;
    align-items: flex-start !important;
}

/* Make the items wrap into rows.
   CRITICAL: webflow sets `.pament-methods{position:absolute}` for the original
   overlapping-arc layout. Absolute = out of flow, so `.payment-methods-inner`
   collapsed to height:0 and the footer slid UP underneath the cards (collision).
   Forcing position:relative puts the wrapped card rows back in normal flow so
   the container takes their real height and the footer sits below them. */
.pament-methods {
    position: relative !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 1.25em !important;
    width: 100% !important;
    padding: 0 1em !important;
    box-sizing: border-box !important;
}

.payment-method-item-outer {
    width: auto !important;
}

/* Tablet (≤991px): also reset the absolute-positioned wave overrides */
@media screen and (max-width: 991px) {
    .payment-method-item._1,
    .payment-method-item._2,
    .payment-method-item._3,
    .payment-method-item._4,
    .payment-method-item._5,
    .payment-method-item._6,
    .payment-method-item._7,
    .payment-method-item._8 {
        bottom: auto !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        z-index: auto !important;
    }

    .payment-method-item {
        width: 11em !important;
        height: 7.5em !important;
        padding: 1em 1.25em !important;
    }
}

/* Mobile (≤479px): 2-per-row, slightly smaller cards */
@media screen and (max-width: 479px) {
    .payment-method-item {
        width: 9.5em !important;
        height: 6.5em !important;
        padding: 0.875em 1em !important;
    }

    .pament-methods {
        gap: 0.875em !important;
    }
}

/* Rating stars (green star SVGs) */
.rating-star {
    filter: brightness(0) saturate(100%) invert(28%) sepia(99%) saturate(1500%) hue-rotate(6deg) brightness(98%) contrast(102%) !important;
}

/* Testimonial stars */
.testimonial-star {
    filter: brightness(0) saturate(100%) invert(28%) sepia(99%) saturate(1500%) hue-rotate(6deg) brightness(98%) contrast(102%) !important;
}

/* Testimonial verified icon */
.testimonial-verified-icon {
    filter: brightness(0) saturate(100%) invert(28%) sepia(99%) saturate(1500%) hue-rotate(6deg) brightness(98%) contrast(102%) !important;
}

/* Testimonial slider button icon */
.testimonial-slider-button-arrow {
    filter: brightness(0) saturate(100%) invert(28%) sepia(99%) saturate(1500%) hue-rotate(6deg) brightness(98%) contrast(102%) !important;
}

/* Flavour slider button icon */
.flavour-slider-button-arrow {
    filter: brightness(0) saturate(100%) invert(28%) sepia(99%) saturate(1500%) hue-rotate(6deg) brightness(98%) contrast(102%) !important;
}

/* Brand mascot icon in button circles — size the portrait image to fit */
img.button-arrow {
    width: auto !important;
    height: 1.45em !important;
    object-fit: contain !important;
    display: block !important;
}

/* Default: white silhouette so the icon reads clearly on the orange circle */
.button-arrow {
    filter: brightness(0) saturate(100%) invert(100%) !important;
}

/* White / light variant circles are cream — switch to brand orange so icon is visible */
.button.is-white .button-arrow,
.button.is-light .button-arrow {
    filter: brightness(0) saturate(100%) invert(28%) sepia(99%) saturate(1500%) hue-rotate(6deg) brightness(98%) contrast(102%) !important;
}

/* Insider CTA — colored circle, keep white icon */
.insider-cta .button-arrow {
    filter: brightness(0) saturate(100%) invert(100%) !important;
}

/* ========================================
   MARQUEE SECTION FIXES
   Grid stacking + color overrides ONLY
   ======================================== */

/* Grid container - stacks children in same cell */
.marquee-inner {
    display: grid !important;
}

/* Background band - dark orange, full width */
.marquee-bg-svg {
    color: #BF4500 !important;
    grid-area: 1 / 1 / 2 / 2 !important;
    width: 100% !important;
    height: auto !important;
}

/* Text SVG - overlaid on same grid cell, full width */
.marquee-text-svg {
    grid-area: 1 / 1 / 2 / 2 !important;
    z-index: 1 !important;
    position: relative !important;
    top: 20px !important;
    margin-top: 0 !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    color: #FFF8EF !important;
}

/* Overlay layer */
.marquee-overlay {
    grid-area: 1 / 1 / 2 / 2 !important;
    z-index: -1 !important;
}

/* Text fill */
.marquee-text-svg text,
.marquee-text-svg textPath {
    fill: currentColor !important;
}

/* Smiley icon (now a colored PNG) */
.top-smiley img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: normal;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.18)) !important;
}

/* Check marks in benefits table */
.check {
    filter: brightness(0) saturate(100%) invert(28%) sepia(99%) saturate(1500%) hue-rotate(6deg) brightness(98%) contrast(102%) !important;
}

/* ========================================
   END ORANGE THEME OVERRIDES
   ======================================== */

html.lenis,
html.lenis body {
    height: auto
}

.stage {
    position: relative;
    z-index: 50;
}

.stage-visual {
    overflow: visible;
    z-index: 60;
}

.stage-wrap {
    overflow: visible;
}

.stage-canvas {
    position: relative;
    display: block;
    width: 100%;
    height: 80%;
    z-index: 9999;
    pointer-events: none;
    rotate: 20deg !important;
    scale: 1.125 !important;
}

@media (max-width: 991px) {
    .stage-canvas {
        scale: 0.85 !important;
    }
}

@media (max-width: 479px) {
    .stage-canvas {
        scale: 0.7 !important;
    }
}

.stage-overlay {
    position: absolute;
    inset: 0;
    background: transparent !important;
    opacity: 0 !important;
    z-index: 40 !important;
    pointer-events: none !important;
}

/* Hero background texture — subtle, matched to the flavour section (opacity 0.16) */
.stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/img/texture.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    opacity: 0.16;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 0;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
    overflow: clip
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain
}

.lenis.lenis-smooth iframe {
    pointer-events: none
}

.lenis.lenis-autoToggle {
    transition-property: overflow;
    transition-duration: 1ms;
    transition-behavior: allow-discrete
}

:root {
    --swiper-theme-color: #007aff
}

:host {
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1
}

.swiper {
    display: block;
    list-style: none;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    padding: 0;
    position: relative;
    z-index: 1
}

.swiper-vertical>.swiper-wrapper {
    flex-direction: column
}

.swiper-wrapper {
    box-sizing: initial;
    display: flex;
    height: 100%;
    position: relative;
    transition-property: transform;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
    width: 100%;
    z-index: 1
}

.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
    transform: translateZ(0)
}

.swiper-horizontal {
    touch-action: pan-y
}

.swiper-vertical {
    touch-action: pan-x
}

.swiper-slide {
    display: block;
    flex-shrink: 0;
    height: 100%;
    position: relative;
    transition-property: transform;
    width: 100%
}

.swiper-slide-invisible-blank {
    visibility: hidden
}

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
    height: auto
}

.swiper-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform, height
}

.swiper-backface-hidden .swiper-slide {
    backface-visibility: hidden;
    transform: translateZ(0)
}

.swiper-3d.swiper-css-mode .swiper-wrapper {
    perspective: 1200px
}

.swiper-3d .swiper-wrapper {
    transform-style: preserve-3d
}

.swiper-3d {
    perspective: 1200px;

    .swiper-cube-shadow,
    .swiper-slide {
        transform-style: preserve-3d
    }
}

.swiper-css-mode {
    >.swiper-wrapper {
        overflow: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;

        &::-webkit-scrollbar {
            display: none
        }
    }

    >.swiper-wrapper>.swiper-slide {
        scroll-snap-align: start start
    }

    &.swiper-horizontal {
        >.swiper-wrapper {
            scroll-snap-type: x mandatory
        }
    }

    &.swiper-vertical {
        >.swiper-wrapper {
            scroll-snap-type: y mandatory
        }
    }

    &.swiper-free-mode {
        >.swiper-wrapper {
            scroll-snap-type: none
        }

        >.swiper-wrapper>.swiper-slide {
            scroll-snap-align: none
        }
    }

    &.swiper-centered {
        >.swiper-wrapper:before {
            content: "";
            flex-shrink: 0;
            order: 9999
        }

        >.swiper-wrapper>.swiper-slide {
            scroll-snap-align: center center;
            scroll-snap-stop: always
        }
    }

    &.swiper-centered.swiper-horizontal {
        >.swiper-wrapper>.swiper-slide:first-child {
            margin-inline-start: var(--swiper-centered-offset-before)
        }

        >.swiper-wrapper:before {
            height: 100%;
            min-height: 1px;
            width: var(--swiper-centered-offset-after)
        }
    }

    &.swiper-centered.swiper-vertical {
        >.swiper-wrapper>.swiper-slide:first-child {
            margin-block-start: var(--swiper-centered-offset-before)
        }

        >.swiper-wrapper:before {
            height: var(--swiper-centered-offset-after);
            min-width: 1px;
            width: 100%
        }
    }
}

.swiper-3d {

    .swiper-slide-shadow,
    .swiper-slide-shadow-bottom,
    .swiper-slide-shadow-left,
    .swiper-slide-shadow-right,
    .swiper-slide-shadow-top {
        height: 100%;
        left: 0;
        pointer-events: none;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 10
    }

    .swiper-slide-shadow {
        background: #00000026
    }

    .swiper-slide-shadow-left {
        background-image: linear-gradient(270deg, #00000080, #0000)
    }

    .swiper-slide-shadow-right {
        background-image: linear-gradient(90deg, #00000080, #0000)
    }

    .swiper-slide-shadow-top {
        background-image: linear-gradient(0deg, #00000080, #0000)
    }

    .swiper-slide-shadow-bottom {
        background-image: linear-gradient(180deg, #00000080, #0000)
    }
}

.swiper-lazy-preloader {
    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
    border-radius: 50%;
    border-top: 4px solid #0000;
    box-sizing: border-box;
    height: 42px;
    left: 50%;
    margin-left: -21px;
    margin-top: -21px;
    position: absolute;
    top: 50%;
    transform-origin: 50%;
    width: 42px;
    z-index: 10
}

.swiper-watch-progress .swiper-slide-visible,
.swiper:not(.swiper-watch-progress) {
    .swiper-lazy-preloader {
        animation: swiper-preloader-spin 1s linear infinite
    }
}

.swiper-lazy-preloader-white {
    --swiper-preloader-color: #fff
}

.swiper-lazy-preloader-black {
    --swiper-preloader-color: #000
}

@keyframes swiper-preloader-spin {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(1turn)
    }
}

.swiper-creative {
    .swiper-slide {
        backface-visibility: hidden;
        overflow: hidden;
        transition-property: transform, opacity, height
    }
}

:root {
    --default-ease: cubic-bezier(.72, .17, .17, 1);
    --smooth-ease: cubic-bezier(.32, .72, 0, 1);
    --bouncy-ease: cubic-bezier(.34, 1.42, .64, 1);
    --elastic-ease-out: linear(0, .5737 7.6%, .8382 11.87%, .9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, .9995 46.99%, .9872 51.63%, .9842 58.77%, 1.0011 81.26%, 1);
    --grid-margin: 1.25em;
    --grid-columns: 6;
    --grid-gutter: 1.25em;
    --grid-column-width: calc(((var(--vw, 1vw) * 100) - (2 * var(--grid-margin))) / var(--grid-columns) - (var(--grid-gutter) * (var(--grid-columns) - 1) / var(--grid-columns)));
    --grid: repeat(var(--grid-columns), minmax(0, 1fr))
}

@media (width >=991px) {
    :root {
        --grid-margin: 2.5em;
        --grid-columns: 12
    }
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizelegibility;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    text-size-adjust: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: initial;
    scrollbar-width: thin
}

html:not(.is-ready.fonts-loaded) {
    cursor: wait;
    pointer-events: none
}

html:not(.is-ready.fonts-loaded).wf-editor-mode,
html:not(.is-ready.fonts-loaded).wf-design-mode,
html:not(.is-ready.fonts-loaded).site-scrollbar {
    cursor: auto;
    pointer-events: auto
}

html,
body {
    overscroll-behavior: none;
    width: 100%;
    height: 100%;
    margin: 0
}

::-moz-selection {
    color: var(--bg-pale);
    background: var(--dark-green)
}

::selection {
    color: var(--bg-pale);
    background: var(--dark-green)
}

.wf-editor-mode .w-embed.w-script,
.wf-design-mode .w-embed.w-script {
    display: none
}

.wf-editor-mode .wf-empty,
.wf-design-mode .wf-empty {
    padding: 0
}

@media (prefers-reduced-motion: no-preference) {
    .is-wiggle {
        animation: wiggle .8s steps(7, end) infinite;
        animation-delay: var(--animation-delay)
    }
}

@keyframes wiggle {
    0% {
        transform: translateY(1px)
    }

    20% {
        transform: translate(-1px, -1px)
    }

    32% {
        transform: translate(0)
    }

    48% {
        transform: translate(0)
    }

    64% {
        transform: translate(1px)
    }

    80% {
        transform: translateY(-1px)
    }

    to {
        transform: translate(0)
    }
}

@media (orientation: portrait) {
    .stage-logo {
        width: 100%;
        height: auto
    }
}

@media (orientation: landscape) {
    .stage-container {
        min-height: 100svh
    }
}

@media (hover: hover) and (pointer: fine) {

    .button:is(:hover, :focus-visible) .button-bg,
    .footer-product:has(.footer-product-link:is(:hover, :focus-visible)) .button .button-bg {
        translate: -2.5em -.325em 0;
        rotate: -4deg;
        scale: .945 .915;
        transform: scale(1.0582010582, 1.0928961749);
        transition: translate .8s .1s var(--elastic-ease-out), rotate .8s .1s var(--elastic-ease-out), scale .15s .1s var(--default-ease), transform .35s .25s var(--bouncy-ease), box-shadow .35s var(--smooth-ease)
    }
}

@media (hover: hover) and (pointer: fine) {

    .button:is(:hover, :focus-visible) .button-cycle.is-first .button-cycle-bg,
    .footer-product:has(.footer-product-link:is(:hover, :focus-visible)) .button .button-cycle.is-first .button-cycle-bg {
        scale: 0;
        opacity: 0;
        transition: scale .35s var(--default-ease), opacity .15s .15s ease-out
    }
}

@media (hover: hover) and (pointer: fine) {

    .button:is(:hover, :focus-visible) .button-cycle.is-first .button-arrow,
    .footer-product:has(.footer-product-link:is(:hover, :focus-visible)) .button .button-cycle.is-first .button-arrow {
        translate: -.75em .75em 0;
        filter: blur(.5rem);
        opacity: 0;
        scale: .625;
        transition: translate .75s .1s var(--elastic-ease-out), scale .25s .1s var(--default-ease), opacity .1s .15s ease-out, filter .1s .15s ease-out
    }
}

@media (hover: hover) and (pointer: fine) {

    .button:is(:hover, :focus-visible) .button-cycle.is-second .button-cycle-bg,
    .footer-product:has(.footer-product-link:is(:hover, :focus-visible)) .button .button-cycle.is-second .button-cycle-bg {
        scale: 1;
        opacity: 1;
        transition: scale .75s .1s var(--elastic-ease-out), opacity .15s ease-out
    }
}

@media (hover: hover) and (pointer: fine) {

    .button:is(:hover, :focus-visible) .button-cycle.is-second .button-arrow,
    .footer-product:has(.footer-product-link:is(:hover, :focus-visible)) .button .button-cycle.is-second .button-arrow {
        translate: 0 0 0;
        filter: blur(0);
        opacity: 1;
        scale: 1;
        transition: translate .3s .2s var(--bouncy-ease), scale .3s .15s var(--default-ease), opacity .15s .2s ease-out, filter .15s .2s ease-out
    }
}

.button:is(:focus-visible) {
    outline: none
}

.button:is(:focus-visible) .button-bg {
    box-shadow: 0 0 0 3px var(--white)
}

.button:is(:focus-visible) .button-bg.white-bg {
    box-shadow: 0 0 0 3px var(--dark-green)
}

.button-bg {
    transition: translate .8s var(--elastic-ease-out), rotate .8s var(--elastic-ease-out), scale .35s var(--default-ease), transform .35s var(--default-ease), box-shadow .35s var(--smooth-ease)
}

.button-cycle-bg {
    transition: scale .75s var(--elastic-ease-out), opacity .15s ease-out
}

.button-cycle.is-second .button-cycle-bg {
    scale: 0;
    opacity: 0;
    transition: scale .75s var(--elastic-ease-out), opacity .15s .1s ease-out
}

.button-cycle.is-first .button-arrow {
    transition: translate .3s .15s var(--bouncy-ease), scale .3s .1s var(--default-ease), opacity .15s .15s ease-out, filter .15s .15s ease-out
}

.button-cycle.is-second .button-arrow {
    transition: translate .75s var(--elastic-ease-out), scale .3s var(--default-ease), opacity .15s .05s ease-out, filter .15s .05s ease-out;
    translate: -.75em .75em 0;
    filter: blur(.5rem);
    opacity: 0;
    scale: .625
}

@media (hover: hover) and (pointer: fine) {
    .social-media-link:is(:hover, :focus-visible) .social-media-circle {
        scale: .945 .915;
        transform: scale(1.0582010582, 1.0928961749);
        transition: translate .725s .1s var(--elastic-ease-out), rotate .725s .1s var(--elastic-ease-out), scale .15s .1s var(--default-ease), transform .35s .25s var(--bouncy-ease), box-shadow .35s var(--smooth-ease)
    }
}

@media (hover: hover) and (pointer: fine) {
    .social-media-link:is(:hover, :focus-visible):nth-child(1) .social-media-circle {
        translate: -.125em -.325em 0;
        rotate: -4deg
    }
}

@media (hover: hover) and (pointer: fine) {
    .social-media-link:is(:hover, :focus-visible):nth-child(2) .social-media-circle {
        translate: -.0675em -.4em 0;
        rotate: -1deg
    }
}

@media (hover: hover) and (pointer: fine) {
    .social-media-link:is(:hover, :focus-visible):nth-child(3) .social-media-circle {
        translate: .125em -.325em 0;
        rotate: 3deg
    }
}

/* 4th social icon (Facebook) — the original only defined the lift+tilt hover for
   nth-child 1/2/3, so the added Facebook icon scaled but never lifted or tilted.
   This continues the fan arc (each icon tilts a touch further right). */
@media (hover: hover) and (pointer: fine) {
    .social-media-link:is(:hover, :focus-visible):nth-child(4) .social-media-circle {
        translate: .1875em -.3em 0;
        rotate: 6deg
    }
}

.social-media-link:is(:focus-visible) {
    outline: none
}

.social-media-link:is(:focus-visible) .social-media-circle {
    box-shadow: 0 0 0 3px var(--dark-green)
}

.social-media-circle {
    transition: translate .725s var(--elastic-ease-out), rotate .725s var(--elastic-ease-out), scale .35s var(--default-ease), transform .35s var(--default-ease), box-shadow .35s var(--smooth-ease)
}

@media (hover: hover) and (pointer: fine) {
    .nav-link:is(:hover, :focus-visible) .nav-text {
        scale: .945 .915;
        transform: scale(1.0582010582, 1.0928961749);
        transition: translate .725s .1s var(--elastic-ease-out), rotate .725s .1s var(--elastic-ease-out), scale .15s .1s var(--default-ease), transform .35s .25s var(--bouncy-ease), box-shadow .35s var(--smooth-ease)
    }
}

.nav-link:is(:hover, :focus-visible):nth-child(1) .nav-text {
    translate: -.125em -.325em 0;
    rotate: -4deg
}

.nav-link:is(:hover, :focus-visible):nth-child(2) .nav-text {
    translate: -.0675em -.4em 0;
    rotate: -1deg
}

.nav-link:is(:hover, :focus-visible):nth-child(3) .nav-text {
    translate: .125em -.325em 0;
    rotate: 3deg
}

.nav-link:is(:focus-visible) {
    outline: none
}

.nav-link:is(:focus-visible) .nav-text {
    box-shadow: 0 0 0 3px var(--dark-green)
}


@media (orientation: landscape) {
    .stage-container {
        min-height: 100svh
    }
}


.nav-text {
    transition: translate .725s var(--elastic-ease-out), rotate .725s var(--elastic-ease-out), scale .35s var(--default-ease), transform .35s var(--default-ease), box-shadow .35s var(--smooth-ease)
}

/* marquee-text-svg offset handled by shared CSS margin-top: 8.5em */

.marquee-text-svg text,
.marquee-text-svg textPath {
    fill: var(--bg-light);
    letter-spacing: 0.3rem;
    text-transform: uppercase;
    /* font-size handled by SVG fontSize attribute for natural scaling */
    font-weight: 700;
    line-height: 70%;
    font-family: var(--font-secondary), Arial, sans-serif !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.marquee-inner svg {
    backface-visibility: hidden
}

.rating-link:after {
    content: "";
    display: block;
    position: absolute;
    inset: -.5em -.25em
}

.rating-link:is(:hover, :focus-visible) .rating-text-wrap:after {
    translate: 0 .125em 0
}

.rating-link:is(:hover, :focus-visible) .rating-text {
    translate: .125em -.25em 0;
    rotate: 3deg;
    scale: .945 .915;
    transform: scale(1.0582010582, 1.0928961749);
    transition: translate .725s .1s var(--elastic-ease-out), rotate .725s .1s var(--elastic-ease-out), scale .15s .1s var(--default-ease), transform .35s .25s var(--bouncy-ease)
}

.rating-link:is(:hover, :focus-visible) .rating-star {
    scale: .945 .915;
    transform: scale(1.0582010582, 1.0928961749);
    transition: translate .725s .1s var(--elastic-ease-out), rotate .725s .1s var(--elastic-ease-out), scale .15s .1s var(--default-ease), transform .35s .25s var(--bouncy-ease)
}

.rating-link:is(:hover, :focus-visible) .rating-star:nth-child(1) {
    translate: -.125em -.4em 0;
    rotate: -3deg
}

.rating-link:is(:hover, :focus-visible) .rating-star:nth-child(2) {
    translate: -.0675em -.75em 0;
    rotate: -1deg;
    transition: translate .725s .105s var(--elastic-ease-out), rotate .725s .105s var(--elastic-ease-out), scale .15s .105s var(--default-ease), transform .35s .2505s var(--bouncy-ease)
}

.rating-link:is(:hover, :focus-visible) .rating-star:nth-child(3) {
    translate: 0 -.4em 0;
    rotate: -2deg;
    transition: translate .725s .11s var(--elastic-ease-out), rotate .725s .11s var(--elastic-ease-out), scale .15s .11s var(--default-ease), transform .35s .251s var(--bouncy-ease)
}

.rating-link:is(:hover, :focus-visible) .rating-star:nth-child(4) {
    translate: .0675em -.625em 0;
    rotate: 1deg;
    transition: translate .725s .115s var(--elastic-ease-out), rotate .725s .115s var(--elastic-ease-out), scale .15s .115s var(--default-ease), transform .35s .2515s var(--bouncy-ease)
}

.rating-link:is(:hover, :focus-visible) .rating-star:nth-child(5) {
    translate: .125em -.4em 0;
    rotate: 1deg;
    transition: translate .725s .12s var(--elastic-ease-out), rotate .725s .12s var(--elastic-ease-out), scale .15s .12s var(--default-ease), transform .35s .252s var(--bouncy-ease)
}

.rating-text-wrap:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 2%;
    background-color: currentColor;
    bottom: -3%;
    transition: translate .45s var(--smooth-ease), rotate .4s var(--smooth-ease)
}

.rating-text,
.rating-star {
    transition: translate .725s var(--elastic-ease-out), rotate .725s var(--elastic-ease-out), scale .35s var(--default-ease), transform .35s var(--default-ease)
}

.testimonial-slider-item-wrap.is-active .testimonial-slider-item {
    color: var(--dark-green);
    background-color: var(--white);
    transition: color .2s ease-out, background-color .2s ease-out
}

.testimonial-slider-button {
    transition: translate .725s var(--elastic-ease-out), rotate .725s var(--elastic-ease-out), scale .35s var(--default-ease), transform .35s var(--default-ease), box-shadow .35s var(--smooth-ease)
}

@media (hover: hover) and (pointer: fine) {
    .testimonial-slider-button:is(:hover, :focus-visible) {
        scale: .945 .915;
        transform: scale(1.0582010582, 1.0928961749);
        transition: translate .725s .1s var(--elastic-ease-out), rotate .725s .1s var(--elastic-ease-out), scale .15s .1s var(--default-ease), transform .35s .25s var(--bouncy-ease), box-shadow .35s var(--smooth-ease)
    }
}

@media (hover: hover) and (pointer: fine) {
    .testimonial-slider-button:is(:hover, :focus-visible).is-left {
        translate: -.375em 0 0;
        rotate: -4deg
    }
}

@media (hover: hover) and (pointer: fine) {
    .testimonial-slider-button:is(:hover, :focus-visible).is-right {
        translate: .375em 0 0;
        rotate: 4deg
    }
}

.testimonial-slider-button:is(:focus-visible) {
    outline: none;
    box-shadow: 0 0 0 3px var(--dark-green)
}

.testimonial-slider-button.is-left:is(:active) .testimonial-slider-button-arrow {
    translate: -.25em 0 0
}

.testimonial-slider-button.is-right:is(:active) .testimonial-slider-button-arrow {
    translate: .25em 0 0
}

.testimonial-slider-button-arrow {
    transition: translate .725s var(--elastic-ease-out)
}

.testimonial-media video {
    width: 100%;
    height: 100%;
    border-radius: .375em
}

.testimonial-sound-btn {
    transition: scale .75s var(--elastic-ease-out), background-color .25s var(--smooth-ease)
}

@media (hover: hover) and (pointer: fine) {
    .testimonial-sound-btn:is(:hover, :focus-visible) {
        background-color: color-mix(in hsl, var(--dark-green), transparent 35%)
    }
}

.testimonial-sound-btn:active {
    scale: .9
}

.testimonial-sound-button-icon.is-first {
    transition: opacity .15s .05s ease-out, scale .75s .05s var(--elastic-ease-out), rotate .75s .05s var(--elastic-ease-out)
}

.is-clicked .testimonial-sound-button-icon.is-first {
    opacity: 0;
    scale: .5;
    rotate: -30deg;
    transition: opacity .15s ease-out, scale .35s var(--smooth-ease), rotate .35s var(--smooth-ease)
}

.testimonial-sound-button-icon.is-second {
    opacity: 0;
    scale: .5;
    rotate: 30deg;
    transition: opacity .15s ease-out, scale .35s var(--smooth-ease), rotate .35s var(--smooth-ease)
}

.is-clicked .testimonial-sound-button-icon.is-second {
    opacity: 1;
    scale: 1;
    rotate: 0deg;
    transition: opacity .15s .05s ease-out, scale .75s .05s var(--elastic-ease-out), rotate .75s .05s var(--elastic-ease-out)
}

.footer-product {
    transition: translate .725s var(--elastic-ease-out), rotate .725s var(--elastic-ease-out), scale .35s var(--default-ease), transform .35s var(--default-ease), box-shadow .35s var(--smooth-ease)
}

@media (hover: hover) and (pointer: fine) {
    .footer-product:has(.footer-product-link:is(:hover, :focus-visible)) {
        scale: .975;
        transform: scale(1.0256410256);
        transition: translate .725s .1s var(--elastic-ease-out), rotate .725s .1s var(--elastic-ease-out), scale .15s .1s var(--default-ease), transform .35s .25s var(--bouncy-ease), box-shadow .35s var(--smooth-ease);
        translate: -.375em -3em 0;
        rotate: -2deg
    }
}

.footer-product:has(.footer-product-link:is(:focus-visible)) {
    outline: none;
    box-shadow: 0 0 0 3px var(--dark-green)
}

.footer-product-link:after {
    content: "";
    position: absolute;
    display: block;
    inset: 0;
    transition: translate .725s var(--elastic-ease-out), rotate .725s var(--elastic-ease-out), transform .35s var(--default-ease)
}

@media (hover: hover) and (pointer: fine) {
    .footer-product-link:is(:hover, :focus-visible):after {
        transition: translate .725s var(--elastic-ease-out), rotate .725s var(--elastic-ease-out), transform .35s var(--bouncy-ease);
        translate: .375em 3em 0;
        rotate: 2deg
    }
}

.footer-info {
    position: relative;
    transition: translate .725s var(--elastic-ease-out), rotate .725s var(--elastic-ease-out), scale .35s var(--default-ease), transform .35s var(--default-ease), box-shadow .35s var(--smooth-ease)
}

@media (hover: hover) and (pointer: fine) {
    .footer-info:is(:hover, :focus-visible) {
        scale: .95;
        transform: scale(1.0526315789);
        transition: translate .725s .1s var(--elastic-ease-out), rotate .725s .1s var(--elastic-ease-out), scale .15s .1s var(--default-ease), transform .35s .25s var(--bouncy-ease), box-shadow .35s var(--smooth-ease)
    }
}

@media (hover: hover) and (pointer: fine) {
    .footer-info:is(:hover, :focus-visible):after {
        transition: translate .725s var(--elastic-ease-out), rotate .725s var(--elastic-ease-out), transform .35s var(--bouncy-ease)
    }
}

.footer-info:is(:hover, :focus-visible).is-first {
    translate: -.25em -1.5em 0;
    rotate: -1deg
}

.footer-info:is(:hover, :focus-visible).is-first:after {
    translate: .25em 1.5em 0;
    rotate: 1deg
}

.footer-info:is(:hover, :focus-visible).is-second {
    translate: .375em -1.25em 0;
    rotate: 3deg
}

.footer-info:is(:hover, :focus-visible).is-second:after {
    translate: -.375em 1.25em 0;
    rotate: -3deg
}

.footer-info:is(:focus-visible) {
    outline: none;
    box-shadow: 0 0 0 3px var(--dark-green)
}

.footer-info:after {
    content: "";
    position: absolute;
    display: block;
    inset: 0;
    transition: translate .725s var(--elastic-ease-out), rotate .725s var(--elastic-ease-out), transform .35s var(--default-ease)
}

.footer-credits-detail:last-child {
    border-bottom: 0
}

.footer-credits-toggle:is(:hover, :focus-visible)+.footer-credits {
    visibility: visible;
    transition: visibility 0s linear
}

.footer-credits-toggle:is(:hover, :focus-visible)+.footer-credits .footer-credits-inner {
    scale: .95;
    transform: scale(1.0526315789);
    transition: translate .725s .1s var(--elastic-ease-out), rotate .725s .1s var(--elastic-ease-out), scale .15s .1s var(--default-ease), transform .35s .25s var(--bouncy-ease), opacity .2s .125s ease-out;
    translate: 0 0 0;
    rotate: 0deg;
    opacity: 1;
    pointer-events: auto
}

.footer-credits {
    --credits-animation-speed: .825s;
    visibility: hidden;
    transition: visibility 0s linear var(--credits-animation-speed)
}

.footer-credits:hover {
    visibility: visible;
    transition: visibility 0s linear
}

.footer-credits:hover .footer-credits-inner {
    scale: .95;
    transform: scale(1.0526315789);
    transition: translate .725s .1s var(--elastic-ease-out), rotate .725s .1s var(--elastic-ease-out), scale .15s .1s var(--default-ease), transform .35s .25s var(--bouncy-ease), opacity .2s .125s ease-out;
    translate: 0 0 0;
    rotate: 0deg;
    opacity: 1;
    pointer-events: auto
}

.footer-credits-inner {
    transition: translate .725s var(--elastic-ease-out), rotate .725s var(--elastic-ease-out), scale .35s var(--default-ease), transform .35s var(--default-ease), opacity .125s .01s ease-out;
    translate: .5em 1.5em 0;
    rotate: 2deg;
    opacity: 0;
    pointer-events: none
}

.shipping-link:after,
.footer-credits-toggle:after,
.credits-link:after {
    content: "";
    display: block;
    position: absolute;
    inset: -.5em -.25em
}

.shipping-link:is(:hover, :focus-visible) .shipping-link-wrap:after,
.shipping-link:is(:hover, :focus-visible) .footer-credits-toggle-wrap:after,
.shipping-link:is(:hover, :focus-visible) .credits-link-wrap:after,
.footer-credits-toggle:is(:hover, :focus-visible) .shipping-link-wrap:after,
.footer-credits-toggle:is(:hover, :focus-visible) .footer-credits-toggle-wrap:after,
.footer-credits-toggle:is(:hover, :focus-visible) .credits-link-wrap:after,
.credits-link:is(:hover, :focus-visible) .shipping-link-wrap:after,
.credits-link:is(:hover, :focus-visible) .footer-credits-toggle-wrap:after,
.credits-link:is(:hover, :focus-visible) .credits-link-wrap:after {
    translate: 0 .125em 0
}

.shipping-link:is(:hover, :focus-visible) .shipping-link-text,
.shipping-link:is(:hover, :focus-visible) .footer-credits-toggle-text,
.shipping-link:is(:hover, :focus-visible) .credits-link-text,
.footer-credits-toggle:is(:hover, :focus-visible) .shipping-link-text,
.footer-credits-toggle:is(:hover, :focus-visible) .footer-credits-toggle-text,
.footer-credits-toggle:is(:hover, :focus-visible) .credits-link-text,
.credits-link:is(:hover, :focus-visible) .shipping-link-text,
.credits-link:is(:hover, :focus-visible) .footer-credits-toggle-text,
.credits-link:is(:hover, :focus-visible) .credits-link-text {
    translate: .0675em -.125em 0;
    rotate: 2deg;
    scale: .955 .925;
    transform: scale(1.0471204188, 1.0810810811);
    transition: translate .725s .1s var(--elastic-ease-out), rotate .725s .1s var(--elastic-ease-out), scale .15s .1s var(--default-ease), transform .35s .25s var(--bouncy-ease)
}

.shipping-link-wrap:after,
.footer-credits-toggle-wrap:after,
.credits-link-wrap:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 2%;
    background-color: currentColor;
    bottom: -25%;
    transition: translate .45s var(--smooth-ease), rotate .4s var(--smooth-ease)
}

.footer-credits-toggle-wrap:after {
    bottom: -8%
}

.credits-link-wrap:after {
    bottom: -15%
}

.shipping-link-text,
.footer-credits-toggle-text,
.credits-link-text {
    transition: translate .725s var(--elastic-ease-out), rotate .725s var(--elastic-ease-out), scale .35s var(--default-ease), transform .35s var(--default-ease)
}

.flavour-slider-button {
    transition: translate .725s var(--elastic-ease-out), rotate .725s var(--elastic-ease-out), scale .35s var(--default-ease), transform .35s var(--default-ease), box-shadow .35s var(--smooth-ease)
}

@media (hover: hover) and (pointer: fine) {
    .flavour-slider-button:is(:hover, :focus-visible) {
        scale: .945 .915;
        transform: scale(1.0582010582, 1.0928961749);
        transition: translate .725s .1s var(--elastic-ease-out), rotate .725s .1s var(--elastic-ease-out), scale .15s .1s var(--default-ease), transform .35s .25s var(--bouncy-ease), box-shadow .35s var(--smooth-ease)
    }
}

@media (hover: hover) and (pointer: fine) {
    .flavour-slider-button:is(:hover, :focus-visible).is-left {
        translate: -.375em 0 0;
        rotate: -4deg
    }
}

@media (hover: hover) and (pointer: fine) {
    .flavour-slider-button:is(:hover, :focus-visible).is-right {
        translate: .375em 0 0;
        rotate: 4deg
    }
}

.flavour-slider-button:is(:focus-visible) {
    outline: none;
    box-shadow: 0 0 0 3px var(--dark-green)
}

.flavour-slider-button.is-left:is(:active) .flavour-slider-button-arrow {
    translate: -.25em 0 0
}

.flavour-slider-button.is-right:is(:active) .flavour-slider-button-arrow {
    translate: .25em 0 0
}

.flavour-slider-button-arrow {
    transition: translate .725s var(--elastic-ease-out)
}

.flavour-swiper,
.flavour-content-swiper,
.flavour-swiper .flavour-slide,
.flavour-swiper .flavour-content-slide,
.flavour-content-swiper .flavour-slide,
.flavour-content-swiper .flavour-content-slide {
    overflow: visible
}

.flavour-slide-dose {
    transition: rotate .6s var(--smooth-ease), scale .6s var(--smooth-ease), opacity .25s ease-out;
    scale: .75;
    opacity: 0
}

.swiper-slide-active .flavour-slide-dose {
    transition: rotate .95s var(--elastic-ease-out), scale .95s var(--elastic-ease-out), opacity .25s ease-out;
    rotate: -5.5deg;
    scale: 1;
    opacity: 1
}

.flavour-slide-pack {
    transition: rotate .6s var(--smooth-ease), scale .6s var(--smooth-ease), opacity .25s ease-out;
    scale: .75;
    opacity: 0
}

.swiper-slide-active .flavour-slide-pack {
    transition: rotate .95s var(--elastic-ease-out), scale .95s var(--elastic-ease-out), opacity .25s ease-out;
    scale: 1;
    opacity: 1
}

.swiper-slide-active .flavour-slide-pack.is-first {
    rotate: 8deg
}

.swiper-slide-active .flavour-slide-pack.is-second {
    rotate: 28deg
}

.flavour-content-slide-inner {
    transition: opacity .25s ease-out;
    opacity: 0
}

.swiper-slide-active .flavour-content-slide-inner {
    opacity: 1
}

.flavour-content-slide-inner .button {
    opacity: 0;
    translate: 0 1em 0;
    scale: .85;
    transition: opacity .15s ease-out, translate .5s var(--smooth-ease), scale .5s var(--smooth-ease)
}

.swiper-slide-active .flavour-content-slide-inner .button {
    transition: opacity .15s ease-out, translate .85s var(--elastic-ease-out), scale .85s var(--elastic-ease-out);
    opacity: 1;
    translate: 0 0 0;
    scale: 1
}

@media (min-width: 992px) and (orientation: portrait) {
    .sequence-canvas {
        scale: .65 !important
    }
}

.sequence-title .split-word {
    will-change: transform
}

@media screen and (max-width: 991px) {
    .testimonial-section {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        z-index: 60;
        padding-bottom: 3em;
        position: relative;
    }

    .testimonial-container {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .testimonial-slider-wrapper {
        overflow: hidden;
        width: 100%;
    }

    .testimonial-slider-inner {
        display: flex !important;
        flex-direction: row;
        gap: 1rem;
        align-items: stretch;
        will-change: transform;
    }

    .testimonial-slider-item-wrap {
        flex: 0 0 auto;
        width: calc(100% - 2rem);
        max-width: 420px;
    }

    .bg-img-wrapper {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 10;
        opacity: 1;
        pointer-events: none;
        overflow: hidden;
    }

    .bg-img-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: translateY(-4%);
        filter: saturate(1.05) contrast(1.05);
        mix-blend-mode: normal;
    }

    .testimonial-container {
        position: relative;
        z-index: 20;
    }

    .benefit-table-title-wrapper {
        grid-template-columns: 1fr !important;
        padding-left: 1.25em !important;
        padding-right: 1.25em !important;
        grid-column-gap: 0.5em !important;
        align-items: start !important;
    }

    .benefit-table-title {
        text-align: left !important;
        font-size: 1.05em !important;
    }

    .benefit-table-title.is-mobile-only {
        display: block !important;
        text-align: left !important;
    }
}

.benefit-table-title.is-mobile-only {
    display: none;
}

@media screen and (max-width: 991px) {
    .benefit-section {
        border-radius: 0;
        margin-left: 0;
        margin-right: 0;
        padding: 2em 0;
    }

    .benefit-section .container.smaller {
        padding-left: 1.25em;
        padding-right: 1.25em;
    }

    .benefit-section .grid-layout {
        display: flex;
        flex-direction: column;
        gap: 2em;
    }

    .benefit-wrapper {
        grid-column-gap: 2.5em;
        grid-row-gap: 2.5em;
        padding-top: 3em;
        padding-bottom: 2em;
    }

    .benefit-heading {
        font-size: 3.5em;
        text-align: center;
    }

    .img-wrapper {
        padding-bottom: 0.5em;
        padding-left: 0.5em;
        padding-right: 0.5em;
        max-width: 100%;
    }

    .top-img,
    .img-wrapper .img {
        width: 100%;
        height: auto;
    }

    .benefit-svg {
        display: none;
    }

    .top-smiley.is-benefit {
        width: 4.5em;
        height: 4.5em;
        top: -2.25em;
    }

    .benefit-table {
        grid-column-gap: 0.5em;
        grid-row-gap: 0.5em;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .benefit-table-title-img.is-desktop {
        display: none;
    }

    .benefit-table-title.is-mobile-only {
        display: block;
        text-align: center;
        font-weight: 600;
        color: var(--dark-green);
    }

    .benefit-table-title-wrapper {
        display: grid;
        grid-template-columns: 2.5fr 1fr 1fr;
        grid-column-gap: 0.5em;
        width: 100%;
        padding: 0.75em 1em;
        align-items: center;
    }

    .benefit-table-title {
        text-align: center;
    }

    .benefit-table-title:first-child {
        text-align: left;
    }

    .benefit-table-item {
        display: grid;
        grid-template-columns: 2.5fr 1fr 1fr;
        width: 100%;
        padding: 0.75em 1em;
        align-items: center;
    }

    .benefit-item-title {
        font-size: 1.1em;
        text-align: left;
    }

    .benefit-checker-inner {
        display: contents;
    }

    .benefit-item-check,
    .benefit-item-x {
        justify-content: center;
        display: flex;
    }

    .check {
        width: 1.25em;
        height: 1.25em;
    }

    .sub-line,
    .line {
        grid-column: 1 / -1;
    }
}

@media screen and (max-width: 767px) {
    .benefit-section {
        padding: 1.5em 0;
    }

    .benefit-section .container.smaller {
        padding-left: 1em;
        padding-right: 1em;
    }

    .benefit-heading {
        font-size: 2.75em;
        line-height: 0.9;
    }

    .benefit-wrapper {
        padding-top: 2em;
        padding-bottom: 1.5em;
    }

    .top-smiley.is-benefit {
        width: 3.5em;
        height: 3.5em;
        top: -1.75em;
    }

    .benefit-table-title-wrapper {
        grid-template-columns: 2fr 1fr 1fr;
        padding: 0.5em 0.75em;
        gap: 0.4em;
    }

    .benefit-table-title {
        font-size: 0.95em;
        line-height: 1.1;
    }

    .benefit-table-item {
        grid-template-columns: 2fr 1fr 1fr;
        padding: 0.6em 0.75em;
        gap: 0.4em;
    }

    .benefit-item-title {
        font-size: 0.95em;
    }

    .check {
        width: 1.1em;
        height: 1.1em;
    }

    .img-wrapper {
        padding: 0.25em;
    }
}

@media screen and (max-width: 479px) {
    .benefit-section {
        padding: 1em 0;
    }

    .benefit-heading {
        font-size: 2.25em;
    }

    .benefit-table-title-wrapper {
        grid-template-columns: 1.8fr 1fr 1fr;
        padding: 0.4em 0.5em;
        gap: 0.25em;
    }

    .benefit-table-title {
        font-size: 0.8em;
        white-space: nowrap;
    }

    .benefit-table-item {
        grid-template-columns: 1.8fr 1fr 1fr;
        padding: 0.5em;
        gap: 0.25em;
    }

    .benefit-item-title {
        font-size: 0.85em;
    }

    .check {
        width: 1em;
        height: 1em;
    }

    .top-smiley.is-benefit {
        width: 3em;
        height: 3em;
        top: -1.5em;
    }
}

.footer-logo.desktop {
    display: none;
}

/* === Sequence section — ensure mobile cards layout === */
/* .sequence-cards-mobile base rules intentionally removed.
   They are governed by webflow.css: base display:none (hidden on desktop),
   @media(max-width:991px) display:flex + grid-area:1/1 + margin-top:-100lvh +
   gap:65lvh (shown on mobile, scrolls over the pinned can). This duplicate
   loaded AFTER webflow.css and, at equal specificity, its display:none beat
   webflow's ≤991 display:flex — collapsing the mobile cards to 0 height and
   starving the scroll runway, which made the canvas scrub far too fast. */

/* === Ensure slider works with overflow === */
.testimonial-slider-inner {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.testimonial-slider-inner::-webkit-scrollbar {
    display: none;
}



/* ========================================
   RESPONSIVE OVERRIDES
   Match Webflow breakpoints: 991, 767, 479
   Uses em units compatible with Osmo scaling.
   ======================================== */

/* ── Hero heading & paragraph — desktop base ── */
h1.hero-heading {
    font-size: 3.5em !important;
    line-height: 1.05 !important;
    word-break: break-word;
}

.paragraph.is-stage-paragraph {
    font-size: 1.3em !important;
    line-height: 1.3 !important;
}

/* ── Stage layout ── */
.stage {
    padding-bottom: 0 !important;
    overflow: visible !important;
    margin-bottom: 3em !important;
}

.marquee {
    transform: translateY(60px) !important;
    z-index: 2 !important;
}

/* ── Insider section ── */
.insider-section {
    margin-top: 6em !important;
    position: relative;
    z-index: 2;
}

.insider-heading {
    font-size: 2.8em !important;
}

/* ── Insider text section ── */
.insider-text-inner {
    margin-top: 11em !important;
}

/* ── Marquee grid stacking ── */
.marquee-inner {
    display: grid;
}

.marquee-bg-svg,
.marquee-text-svg {
    grid-area: 1 / 1;
    display: block;
    width: 100% !important;
    height: auto !important;
}

/* ── Page wrapper clip ── */
.page-wrapper {
    overflow-x: clip;
    max-width: 100vw;
}

body {
    overflow-x: clip;
}

/* ==============================================
   5-VIDEO GRID — DESKTOP
   ============================================== */
#w-node-_93a09ee3-b180-b755-d23e-d7d2b5f676da-0ac01850 {
    grid-area: span 1 / span 12 / span 1 / span 12 !important;
}

.testimonial-wrapper {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 1rem !important;
    align-items: start !important;
    padding-top: 0 !important;
}

.testimonial-inner-wrap {
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transition: transform 0.4s ease !important;
}

.testimonial-inner {
    width: 100% !important;
}

/* Desktop only: scale up video cards (on the WRAPPER, not the GSAP-animated
   .testimonial-inner — a scale on the inner compounds on hover). */
@media (min-width: 992px) {
    .testimonial-inner-wrap {
        scale: 1.3;
    }
}

/* Desktop scattered layout */
.testimonial-inner-wrap.is-first {
    top: 3em !important;
    rotate: -8deg !important;
    z-index: 2 !important;
    margin-left: -0.5em !important;
}

.testimonial-inner-wrap.is-second {
    top: 6em !important;
    rotate: 3deg !important;
    z-index: 3 !important;
    margin-left: -1.5em !important;
}

.testimonial-inner-wrap.is-third {
    top: 0 !important;
    rotate: -4deg !important;
    z-index: 5 !important;
    transform: scale(1.08) !important;
}

.testimonial-inner-wrap.is-fourth {
    top: 5em !important;
    rotate: 5deg !important;
    z-index: 3 !important;
    margin-left: -1em !important;
}

.testimonial-inner-wrap.is-fifth {
    top: 2em !important;
    rotate: -6deg !important;
    z-index: 2 !important;
    margin-right: -0.5em !important;
}

@media (hover: hover) and (pointer: fine) {
    /* Hover = bring the card FORWARD (focus) only — NO scaling. The lift/z-index
       come from the globals.css rule which uses translate/z-index longhands that
       compose with each card's base transform (e.g. is-third's scale(1.08)).
       The old `transform: scale(1.05)…` here clobbered that and grew the card. */
    .testimonial-inner-wrap:hover {
        z-index: 10 !important;
    }
}

#w-node-_1ac78251-f73b-1f50-5984-75b855ef30eb-0ac01850 {
    grid-area: span 1 / span 12 / span 1 / span 12 !important;
}

.insider-wrapper,
.insider-section {
    overflow: visible !important;
}

/* ========================================
   TABLET — max-width: 991px
   ======================================== */
@media screen and (max-width: 991px) {

    /* ── Hero ── */
    h1.hero-heading {
        font-size: 2.4em !important;
        text-align: center !important;
    }

    .paragraph.is-stage-paragraph {
        font-size: 1.05em !important;
        text-align: center !important;
    }

    .stage-right {
        text-align: center;
    }

    .stage-text-wrap {
        align-items: center !important;
    }

    .stage {
        margin-bottom: 2em !important;
    }

    .marquee {
        transform: translateY(40px) !important;
    }

    /* ── Stage facts ── */
    .stage-fact-number {
        font-size: 1.8em !important;
    }

    .stage-fact-unit {
        font-size: 0.9em !important;
    }

    .stage-fact-text {
        font-size: 0.7em !important;
    }

    /* ── Stage logo ── */
    .stage-logo {
        margin-top: 2em !important;
    }

    .stage-logo-img {
        transform: scale(1) !important;
    }

    /* ── Stage deco ── */
    .stage-deco {
        display: none !important;
    }

    /* ── Stage wrap stack ── */
    .stage-wrap {
        flex-direction: column !important;
        align-items: center !important;
    }

    .stage-left,
    .stage-right {
        width: 100% !important;
    }

    /* ── Insider ── */
    .insider-section {
        margin-top: 4em !important;
    }

    .insider-heading {
        font-size: 1.8em !important;
    }

    .insider-text-inner {
        margin-top: 2em !important;
        font-size: 1em !important;
    }

    .insider-section .grid-layout {
        display: flex !important;
        flex-direction: column !important;
    }

    .insider-section .insider-heading {
        order: -1 !important;
        margin-bottom: 1.5em !important;
        margin-top: 0 !important;
        line-height: 1.2 !important;
    }

    /* ── Insider videos — stacked scattered pile ── */
    #w-node-_93a09ee3-b180-b755-d23e-d7d2b5f676da-0ac01850 {
        grid-area: span 1 / span 6 / span 1 / span 6 !important;
    }

    .testimonial-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0 !important;
        padding-top: 0 !important;
        transform: none !important;
    }

    .testimonial-inner-wrap,
    .testimonial-inner-wrap.is-first,
    .testimonial-inner-wrap.is-second,
    .testimonial-inner-wrap.is-third,
    .testimonial-inner-wrap.is-fourth,
    .testimonial-inner-wrap.is-fifth {
        display: block !important;
        width: 55vw !important;
        max-width: 280px !important;
        margin-top: -4em !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
    }

    .testimonial-inner-wrap:first-child {
        margin-top: 0 !important;
    }

    .testimonial-inner {
        width: 100% !important;
        height: auto !important;
        scale: 1 !important;
    }

    .testimonial-inner-wrap.is-first {
        align-self: flex-end !important;
        rotate: 5deg !important;
    }

    .testimonial-inner-wrap.is-second {
        align-self: flex-start !important;
        rotate: -4deg !important;
    }

    .testimonial-inner-wrap.is-third {
        align-self: flex-end !important;
        rotate: 6deg !important;
    }

    .testimonial-inner-wrap.is-fourth {
        align-self: flex-start !important;
        rotate: -5deg !important;
    }

    .testimonial-inner-wrap.is-fifth {
        align-self: flex-end !important;
        rotate: 4deg !important;
    }

    /* ── Sequence cards ──
       Desktop .sequence-cards must stay display:none on mobile (webflow.css);
       .sequence-cards-mobile is what shows. Do NOT force display:flex here —
       it stacked both card sets at grid-area:1/1. Sizing left to webflow. */

    /* ── Sequence title ── */
    .sequence-title {
        font-size: 1.8em !important;
    }

    /* ── Benefits ── */
    .benefit-heading {
        text-align: center;
    }
}

/* ========================================
   MOBILE LANDSCAPE — max-width: 767px
   ======================================== */
@media screen and (max-width: 767px) {

    /* ── Hero ── */
    h1.hero-heading {
        font-size: 2em !important;
    }

    .paragraph.is-stage-paragraph {
        font-size: 0.9em !important;
    }

    .stage-container {
        padding-left: 1em !important;
        padding-right: 1em !important;
    }

    .stage {
        margin-bottom: 1em !important;
    }

    .marquee {
        transform: translateY(20px) !important;
    }

    /* ── Stage facts ── */
    .stage-fact-number {
        font-size: 1.4em !important;
    }

    .stage-fact-unit {
        font-size: 0.7em !important;
    }

    .stage-fact-text {
        font-size: 0.55em !important;
    }

    .stage-fact {
        padding: 0.6em !important;
    }

    /* ── Stage logo ── */
    .stage-logo {
        margin-top: 1.5em !important;
    }

    .stage-logo-img {
        transform: scale(0.85) !important;
    }

    /* ── Insider ── */
    .insider-section {
        margin-top: 2.5em !important;
    }

    .insider-heading {
        font-size: 1.5em !important;
    }

    .insider-text-inner {
        margin-top: 1.5em !important;
        font-size: 0.85em !important;
    }

    /* ── Insider videos — smaller cards ── */
    .testimonial-inner-wrap,
    .testimonial-inner-wrap.is-first,
    .testimonial-inner-wrap.is-second,
    .testimonial-inner-wrap.is-third,
    .testimonial-inner-wrap.is-fourth,
    .testimonial-inner-wrap.is-fifth {
        width: 50vw !important;
        max-width: 220px !important;
        margin-top: -3em !important;
    }

    .testimonial-inner-wrap:first-child {
        margin-top: 0 !important;
    }

    /* ── Sequence ── */
    .sequence-title {
        font-size: 1.4em !important;
    }

    /* ── Benefits table ── */
    .benefit-table-item {
        grid-template-columns: 2.5fr 1fr 1fr !important;
        align-items: center !important;
    }

    .benefit-item-title {
        grid-column: 1 / 2 !important;
        font-size: 0.85em !important;
    }

    .benefit-checker-inner {
        grid-column: 2 / 4 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5em !important;
    }

    .benefit-item-check,
    .benefit-item-x {
        width: 100% !important;
        justify-content: center !important;
    }

    .benefit-table-title-wrapper {
        display: grid !important;
        grid-template-columns: 2.5fr 1fr 1fr !important;
        align-items: center !important;
    }

    /* Benefits label → col 1 */
    .benefit-table-title-wrapper>.benefit-table-title:first-child {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    /* Desktop logo → hidden */
    .benefit-table-title-img.is-desktop {
        display: none !important;
    }

    /* "Hype Bam" mobile → col 2 */
    .benefit-table-title.is-mobile-only {
        display: block !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        text-align: center !important;
    }

    /* "Typical Energy Drinks" → col 3 */
    .benefit-table-title-wrapper>.benefit-table-title:last-child {
        grid-column: 3 !important;
        grid-row: 1 !important;
        text-align: center !important;
    }

    /* ── Footer ── */
    .footer-full-height-container {
        grid-template-columns: 1fr !important;
    }

    .footer-product {
        min-height: 50vh !important;
    }
}

/* ========================================
   SMALL MOBILE — max-width: 479px
   ======================================== */
@media screen and (max-width: 479px) {

    /* ── Hero ── */
    h1.hero-heading {
        font-size: 1.6em !important;
    }

    .paragraph.is-stage-paragraph {
        font-size: 0.8em !important;
    }

    /* ── Stage facts ── */
    .stage-fact-number {
        font-size: 1.2em !important;
    }

    .stage-fact-unit {
        font-size: 0.6em !important;
    }

    .stage-fact-text {
        font-size: 0.5em !important;
    }

    .stage-fact {
        padding: 0.5em !important;
    }

    /* ── Stage logo ── */
    .stage-logo-img {
        transform: scale(0.7) !important;
    }

    /* ── Insider videos (1.5x bigger) ── */
    .testimonial-inner-wrap,
    .testimonial-inner-wrap.is-first,
    .testimonial-inner-wrap.is-second,
    .testimonial-inner-wrap.is-third,
    .testimonial-inner-wrap.is-fourth,
    .testimonial-inner-wrap.is-fifth {
        width: 84vw !important;
        max-width: 320px !important;
        margin-top: -2.5em !important;
    }

    /* ── Sequence ── */
    .sequence-title {
        font-size: 1.2em !important;
    }

    /* ── Benefits ── */
    .benefit-table-title-wrapper {
        grid-template-columns: 1.8fr 1fr 1fr !important;
        padding: 0.4em 0.5em !important;
        gap: 0.25em !important;
    }

    .benefit-table-title {
        font-size: 0.7em !important;
        white-space: nowrap;
    }

    .benefit-table-item {
        grid-template-columns: 1.8fr 1fr 1fr !important;
        padding: 0.5em !important;
        gap: 0.25em !important;
    }

    .benefit-item-title {
        font-size: 0.75em !important;
    }

    .check {
        width: 1em;
        height: 1em;
    }

    .top-smiley.is-benefit {
        width: 3em;
        height: 3em;
        top: -1.5em;
    }

    /* ── Footer ── */
    .footer-inner {
        flex-direction: column !important;
        gap: 2em;
    }

    .footer-col {
        width: 100% !important;
        text-align: center;
    }

    .footer-product {
        min-height: 40vh !important;
    }
}

/* ── Letter-spacing for headings ── */
h1, h2, h3, h4, h5, h6,
.heading,
.big-heading,
.benefit-heading,
.insider-heading,
.insider-subheading,
.statement-heading,
.testimonial-big-heading,
.testimonial-item-heading,
.sequence-title,
.footer-heading,
.hbf-t1,
.hbf-t2 {
    letter-spacing: 0.15em;
    line-height: 1.2;
}

/* ── Stage logo ── */
.stage-logo {
    filter: none !important;
    margin-top: 4em;
}

.stage-logo-img {
    width: 100%;
    height: auto;
    max-height: 100%;
    display: block;
    filter: none !important;
    transform: scale(1.3);
    transform-origin: center bottom;
}

/* Keep lottie for app.js but hide visually */
.stage-logo-lottie {
    display: none !important;
}

/* ── Sequence mobile cards ── */
/* .sequence-cards-mobile base rules intentionally removed.
   They are governed by webflow.css: base display:none (hidden on desktop),
   @media(max-width:991px) display:flex + grid-area:1/1 + margin-top:-100lvh +
   gap:65lvh (shown on mobile, scrolls over the pinned can). This duplicate
   loaded AFTER webflow.css and, at equal specificity, its display:none beat
   webflow's ≤991 display:flex — collapsing the mobile cards to 0 height and
   starving the scroll runway, which made the canvas scrub far too fast. */

/* ── Marquee text ── */
.marquee-text-svg {
    top: 20px !important;
}

.marquee-text-svg text,
.marquee-text-svg textPath {
    letter-spacing: 0.15em !important;
    font-weight: 700 !important;
}

/* ── Footer logo ── */
.footer-logo.desktop {
    display: none;
}

/* ── Benefit mobile-only title ── */
.benefit-table-title.is-mobile-only {
    display: none;
}


/* === Footer product panel - lighter, brand-aligned flame background ===
   The flame texture (3.webp) is the dark red-orange base layer of the footer
   product card. Brightening + desaturating + hue shift brings it into the
   warm amber-gold family matching the hero gradient and can label palette. */
.footer-img:not(.top) {
    filter: brightness(1.28) saturate(0.72) hue-rotate(8deg) !important;
}

/* Warm golden sunrise overlay on the footer product card. */
.footer-product .absolute-background::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        160deg,
        rgba(255, 220, 110, 0.28) 0%,
        rgba(255, 185, 55, 0.14) 55%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 0;
}


/* ============================================================
   FOOTER BRAND REFRESH
   Previous overlay was invisible (z-index: 0 = behind images).
   This section corrects that and warms the whole footer.
   ============================================================ */

/* 1. Warm amber background for the entire footer section
      (footer-content, footer-bottom, the right-side/lower areas
      that were still plain cream and felt disconnected from the brand) */
.footer {
    background-color: #FFF0D0 !important;
}

/* 2. Footer bottom bar — inherit the amber instead of forced white */
.footer-bottom {
    background-color: transparent !important;
}

/* 3. Corrected overlay on the footer product panel.
      z-index: 10 puts it ABOVE both .footer-img elements (which are
      position:relative with no z-index — stacking order = DOM order,
      but a z-indexed sibling pseudo-element beats them).
      soft-light blend mode: brightens dark areas noticeably while
      preserving the vibrant can label colours. */
/* Show the product photo close to its original colours: only a whisper of warm
   tint to tie it to the brand, no heavy brighten/soft-light wash. */
.footer-product .absolute-background::after {
    background: rgba(255, 210, 120, 0.10) !important;
    mix-blend-mode: normal !important;
    z-index: 10 !important;
}

.footer-img.top {
    filter: none !important;
}

.footer-img:not(.top) {
    filter: none !important;
}