/* Measured Framer motion: lateral product slides and a centered service carousel. */
#esprinto .products{overflow:hidden;isolation:isolate}
#esprinto .products>.container{position:relative;z-index:1}
#esprinto .ride-background-previous{position:absolute;inset:0;z-index:0;pointer-events:none}
#esprinto .ride-ghost{position:absolute;pointer-events:none;z-index:1}
#esprinto .ride-ghost [data-original-id=model-image]{position:relative;width:720px;height:455px;object-fit:contain;margin:0 auto;z-index:1}
#esprinto .support{position:relative}
#esprinto .service-stage{--card-width:720px;--stride:728px;position:relative;display:block;padding:0;margin-top:58px;height:650px;overflow:visible;touch-action:pan-y;scroll-snap-type:none}
#esprinto .service-stage .service-card{position:absolute;top:0;left:50%;width:var(--card-width);height:648px;margin-left:calc(var(--card-width)/-2);transform:translateX(calc(var(--offset)*var(--stride)));opacity:.62;transition:transform 850ms cubic-bezier(.22,.68,0,1),opacity 650ms ease;cursor:pointer}
#esprinto .service-stage .service-card img{width:638px;height:384px;max-width:100%;margin:81px auto 0;border-radius:40px;transition:width 850ms cubic-bezier(.22,.68,0,1),height 850ms cubic-bezier(.22,.68,0,1),margin 850ms cubic-bezier(.22,.68,0,1)}
#esprinto .service-stage .service-card.is-center{opacity:1;z-index:2;cursor:default}
#esprinto .service-stage .service-card.is-center img{width:720px;height:522px;margin-top:0}
#esprinto .service-stage .service-card.is-distant{opacity:0;pointer-events:none}
#esprinto .service-stage .service-card h3{margin-top:24px}
#esprinto .service-stage.without-transition .service-card,#esprinto .service-stage.without-transition .service-card img{transition:none}
#esprinto .service-controls{margin-top:12px}
#esprinto .service-controls>.round-arrow{position:absolute;top:50%;z-index:3;width:44px;height:44px;background:#2228;border:1px solid #ffffff18}
#esprinto #service-prev{left:6%}#esprinto #service-next{right:6%}
#esprinto .service-dots{background:#ffffffd6;border-radius:40px;padding:0 10px;height:40px;align-items:center}
#esprinto .service-dots button{width:18px;height:44px}
#esprinto .service-dots button[aria-pressed=true]{width:34px}
#esprinto .service-dots button[aria-pressed=true]::after{background:#000;width:26px}
#esprinto .service-dots button::after{background:#b0b0b0}
#esprinto .reveal-word{display:inline-block}
#esprinto .business,#esprinto .savings,#esprinto .faq,#esprinto .footer{overflow:clip}
#esprinto .business-card>img{transition:transform 650ms cubic-bezier(.22,1,.36,1)}
@media(hover:hover){#esprinto .business-card:hover>img{transform:scale(1.04)}}
@media(max-width:991px){#esprinto .service-stage{--card-width:70vw;--stride:74vw;height:535px}#esprinto .service-stage .service-card{height:535px}#esprinto .service-stage .service-card img{width:62vw;height:290px;margin-top:50px}#esprinto .service-stage .service-card.is-center img{width:70vw;height:390px}#esprinto .ride-ghost [data-original-id=model-image]{max-width:100%}}
@media(max-width:767px){#esprinto .service-stage{--card-width:84vw;--stride:89vw;height:440px;margin-top:32px}#esprinto .service-stage .service-card{height:440px}#esprinto .service-stage .service-card img{width:74vw;height:220px;margin-top:35px;border-radius:24px}#esprinto .service-stage .service-card.is-center img{width:84vw;height:290px}#esprinto #service-prev{left:1%}#esprinto #service-next{right:1%}#esprinto .ride-ghost [data-original-id=model-image]{height:320px;width:100%}}
@media(max-width:374px){#esprinto .service-stage,#esprinto .service-stage .service-card{height:400px}#esprinto .service-stage .service-card img{height:180px;margin-top:25px}#esprinto .service-stage .service-card.is-center img{height:230px}#esprinto .ride-ghost [data-original-id=model-image]{height:270px}}
@media(prefers-reduced-motion:reduce){#esprinto .service-stage .service-card,#esprinto .service-stage .service-card img,#esprinto .business-card>img{transition:none!important}#esprinto .reveal-word{filter:none!important;opacity:1!important;transform:none!important}}
#esprinto .ride-visual{position:relative}#esprinto .ride-visual.ride-ghost{position:absolute}

/* Keep the product composition and controls aligned to the full-width reference. */
#esprinto .products.section-space {
    min-height: 900px;
    padding: 72px 0;
}
#esprinto .products > .container {
    width: 100%;
    max-width: none;
    padding: 0 64px;
}
#esprinto .products .ride-tabs {
    gap: 60px;
    margin: 10px 0 22px;
}
#esprinto .products .ride-panel {
    padding-top: 44px;
}
#esprinto #model-image,
#esprinto .ride-ghost [data-original-id=model-image] {
    width: 660px;
    height: 420px;
    max-width: 100%;
}
#esprinto .products .ride-wordmark {
    left: calc(50% - 50px);
    right: auto;
    top: -15px;
    gap: 24px;
}
#esprinto .products .ride-wordmark em {
    font-style: italic;
    font-weight: 400;
    font-size: 24px;
}
#esprinto .products .ride-description {
    margin: 30px 0 10px;
    font-weight: 500;
}
#esprinto .products .ride-spec {
    margin-bottom: 18px;
    font-weight: 500;
}
#esprinto .product-prev,
#esprinto .product-next {
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: 1px solid #242424;
    box-shadow: 0 1px 2px #0004;
    font-size: 0;
    z-index: 3;
}
#esprinto .product-prev { left: 6.3%; }
#esprinto .product-next { right: 6.3%; }
#esprinto .product-prev::after,
#esprinto .product-next::after {
    content: '';
    width: 11px;
    height: 11px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    margin-right: 4px;
}
#esprinto .product-prev::after {
    transform: rotate(-135deg);
    margin-right: 0;
    margin-left: 4px;
}
@media (max-width: 1199px) {
    #esprinto .products .ride-wordmark { left: 42%; gap: 12px; }
    #esprinto .products .ride-wordmark em { font-size: 18px; }
}
@media (max-width: 991px) {
    #esprinto .products.section-space { min-height: auto; padding: 55px 0; }
    #esprinto .products > .container { padding: 0 24px; }
    #esprinto .products .ride-wordmark { left: auto; right: 15%; top: 0; }
    #esprinto .products .ride-tabs { gap: 28px; }
    #esprinto .site-header .navbar-toggler {
        filter: none;
        color: #fff;
        background: #171717e6;
        border: 1px solid #ffffffb3;
        border-radius: 8px;
        width: 46px;
        height: 46px;
        padding: 10px;
        box-shadow: 0 2px 8px #0003;
    }
    #esprinto .site-header .navbar-toggler:focus-visible {
        outline: 3px solid #fff;
        outline-offset: 3px;
    }
    #esprinto .site-header .navbar-toggler-icon {
        display: block;
        width: 24px;
        height: 20px;
        background: linear-gradient(#fff,#fff) center top / 24px 2px no-repeat,
                    linear-gradient(#fff,#fff) center / 24px 2px no-repeat,
                    linear-gradient(#fff,#fff) center bottom / 24px 2px no-repeat;
    }
}
@media (max-width: 767px) {
    #esprinto .products .ride-tabs { gap: 6px; }
    #esprinto .products .ride-panel { padding-top: 48px; }
    #esprinto #model-image,
    #esprinto .ride-ghost [data-original-id=model-image] { width: 100%; height: 320px; }
    #esprinto .products .ride-wordmark { top: 0; }
    #esprinto .products .ride-wordmark em { font-size: 16px; }
    #esprinto .product-prev { left: 8px; }
    #esprinto .product-next { right: 8px; }
    #esprinto .products .ride-description { margin-top: 16px; }
}
@media (max-width: 374px) {
    #esprinto #model-image,
    #esprinto .ride-ghost [data-original-id=model-image] { height: 270px; }
}

/* Keep G1 clear of the scooter at desktop sizes. */
@media (min-width: 992px) {
    #esprinto .products[data-theme="g1"] .ride-wordmark {
        left: calc(50% + 80px);
        right: auto;
    }
}

/* Green G1 palette, matching the scooter bodywork. */
#esprinto .products[data-theme="g1"] {
    background: radial-gradient(100% 200% at 0% 100%, #e5eee6 0%, #9eb5a3 100%);
}
#esprinto .products[data-theme="g1"] .ride-wordmark {
    color: #234632;
    opacity: 1;
}

/* Match the visible G1 and Amery scooter sizes. */
#esprinto #model-image[src$="scooter-g1.webp"],
#esprinto .ride-ghost [data-original-id="model-image"][src$="scooter-g1.webp"],
#esprinto #model-image[src$="scooter-amery.webp"],
#esprinto .ride-ghost [data-original-id="model-image"][src$="scooter-amery.webp"] {
    width: 800px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 800 / 455;
    object-fit: fill;
}

@media (max-width: 767px) {
    #esprinto .products[data-theme="g1"] .ride-wordmark {
        top: -24px;
    }
    #esprinto .products[data-theme="g1"] .ride-wordmark span {
        font-size: clamp(42px, 12vw, 60px);
    }
    #esprinto .products[data-theme="g1"] .ride-wordmark em {
        font-size: 13px;
    }
}

/* Anchor navigation to a consistent image stage, independent of slide copy. */
#esprinto .products .ride-panel {
    --ride-stage-height: 455px;
    --ride-stage-padding: 44px;
}
#esprinto .products .ride-visual {
    min-height: var(--ride-stage-height);
}
#esprinto .products .ride-panel > .product-prev,
#esprinto .products .ride-panel > .product-next {
    top: calc(var(--ride-stage-padding) + var(--ride-stage-height) / 2);
}
@media (max-width: 767px) {
    #esprinto .products .ride-panel {
        --ride-stage-height: 320px;
        --ride-stage-padding: 48px;
    }
}
@media (max-width: 374px) {
    #esprinto .products .ride-panel { --ride-stage-height: 270px; }
}
