/* ============================================
   Svitch Cube 200
   ============================================ */

:root {
    --black: #000000;
    --white: #f5f5f3;
    --cream: #fff2dd;
    --header-h: 80px;
    --container: 1440px;
    --gutter: 24px;
    /* single spacing token — every section gap uses this */
    --section-gap: clamp(40px, 4.5vw, 80px);
}

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

html {
    scroll-behavior: smooth;
}

body {
    background: var(--black);
    color: var(--white);
    font-family: "Rajdhani", "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

img {
    display: block;
    max-width: 100%;
}

a {
    text-decoration: none;
    color: inherit;
}

/* Shared centred container — this is what pulls the
   logo away from the very edge, slightly toward centre */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* ============================================
   Header
   ============================================ */

.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--black);
}

.header__inner {
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* indented from the edge so the logo lines up with
       the "GO BIG." headline in the hero banner below */
    max-width: 1440px;
    margin: 0 auto;
    padding-inline: 20px;
}

.logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    user-select: none;
}

/* cube200-logo.png is 2:1 with ~26% empty space above the mark, so a
   64px box renders the artwork at roughly 38px tall */
.logo img {
    height: 64px;
    width: auto;
}

.logo__name {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.logo__model {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.34em;
    margin-top: 3px;
    /* nudge to visually centre the tracked-out text */
    text-indent: 0.34em;
}

.nav {
    margin-left: auto;
    
    display: flex;
    align-items: center;
    gap: clamp(18px, 2.4vw, 30px);
}

.nav__link {
    color: var(--white);
    font-family: "Rajdhani", sans-serif;
    font-size: clamp(13px, 1.05vw, 16px);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: color 0.2s ease;
}
.nav__link img{
   height: 16px;
}
.nav__link:hover {
    color: var(--cream);
}

/* —— Hover / active underline — text links and the brand logo links.
   The E-BICYCLE button is a filled pill, so it sits this one out. —— */
.nav__link:not(.btn-e-bicycle) {
    position: relative;
    padding-bottom: 4px;
}

.nav__link:not(.btn-e-bicycle)::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s ease;
}

.nav__link:not(.btn-e-bicycle):hover::after,
.nav__link:not(.btn-e-bicycle).is-active::after {
    transform: scaleX(1);
}

/* The logo links carry an image rather than text, so currentColor has
   nothing meaningful to inherit — pin the bar to white. */
.nav__link:has(img)::after {
    background: var(--white);
}

.nav__link.is-active {
    color: var(--white);
    font-weight: 700;
}
.btn-e-bicycle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    background: #fff;
    border: 1px solid #fff;
    color: #000;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}
.btn-e-bicycle:hover {
    opacity: 0.9;
    color: #000;
}
.nav__toggle {
    display: none;
}

[id] {
    scroll-margin-top: calc(var(--header-h) + 12px);
}

/* ============================================
   Hero
   ============================================ */

.hero {
    position: relative;
    width: 100%;
    height: 90vh;
    min-height: 500px;
    overflow: hidden;
    background: var(--black);
}

/* —— Hero Slider —— */
.hero-slider {
    position: absolute;
    inset: 0;
    overflow: hidden;
    touch-action: pan-y;
}

/* One row of N slides, each 100% wide; JS translates by -index * 100%. */
.hero-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.hero-track.no-anim {
    transition: none;
}

.hero-slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--black);
}

/* Same sizing rules for <img> and <video> so image and video slides are
   interchangeable in the config. */
.hero-slide img,
.hero-slide video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* —— Arrows —— */
.hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 0;
    background: rgba(0, 0, 0, 0.35);
    cursor: pointer;
    transition: background-color 0.3s ease, opacity 0.3s ease;
}

.hero-nav:hover {
    background: rgba(0, 0, 0, 0.6);
}

.hero-prev { left: 16px; }
.hero-next { right: 16px; }

/* Chevron drawn from a rotated square, so no icon font/asset is needed. */
.hero-nav span {
    display: block;
    width: 10px;
    height: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}

.hero-prev span {
    transform: rotate(-135deg);
    margin-left: 3px;
}

.hero-next span {
    transform: rotate(45deg);
    margin-right: 3px;
}

/* —— Dots —— */
.hero-dots {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.hero-dot.is-active {
    background: #fff;
    transform: scale(1.3);
}

/* Single-slide config: nothing to navigate to. */
.hero-slider.is-single .hero-nav,
.hero-slider.is-single .hero-dots {
    display: none;
}

@media (max-width: 768px) {
    .hero {
        height: 45vh;
        min-height: 360px;
    }

    .hero-nav {
        width: 32px;
        height: 32px;
    }

    .hero-nav span {
        width: 8px;
        height: 8px;
    }

    .hero-prev { left: 8px; }
    .hero-next { right: 8px; }

    .hero-dots {
        bottom: 10px;
        gap: 6px;
    }

    .hero-dot {
        width: 7px;
        height: 7px;
    }
}

/* ============================================
   Power that moves with you
   ============================================ */

/* Whole section fits one screen: heading is fixed height, the bike
   takes whatever is left, and the stats band pins to the bottom. Top
   padding clears the sticky header so the heading is never behind it. */
.power {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: calc(var(--header-h) + var(--section-gap) * 0.5) 0 0;
    background: radial-gradient(
        110% 85% at 50% 30%,
        #fbfbfb 0%,
        #f2f2f2 60%,
        #ebebeb 100%
    );
    color: var(--black);
    font-family: "Rajdhani", sans-serif;
    overflow: hidden;
}

.power__title {
    display: inline-block;
    flex: none;
    /* sits behind the bike, which carries z-index 2 */
    position: relative;
    z-index: 1;
    width: 100%;
    text-align: center;
    font-family: "Science Gothic", sans-serif;
    font-size: clamp(22px, 3.3vw, 64px);
    font-weight: 400;
    /* Science Gothic has a width axis — condensed to match the design
       rather than running at the default 100% */
    /* font-stretch: 75%; */
    font-style: normal;
    line-height: 1;
    text-transform: uppercase;
    top: 35px;
}

/* Pulled up so the bike rides over the bottom of the headline */
.power__stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    margin-top: clamp(-46px, -2.6vw, -10px);
}

.power__bike {
    position: relative;
    z-index: 2; /* bike rides over the cream band */
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin: 0 auto;
}
/* Stats band — full width, ruled top and bottom, sitting behind
   the bike's wheel and centre stand */
.power__stats {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 50px;
    background: var(--cream);
    border-top: 1px solid rgba(0, 0, 0, 1);
     border-bottom: 1px solid rgba(0, 0, 0, 1);
    /* no bottom rule — the band sits flush with the end of the section,
       so it read as a divider line introducing the next section */
}

.power__stats-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 130px;
    padding: 0 10.5%;
}

.stat-group {
    display: flex;
    align-items: center;
    gap: clamp(28px, 6vw, 115px);
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
}

.stat__value {
    font-family: "Barlow", sans-serif;
    font-size: clamp(21px, 2.9vw, 54px);
    font-weight: 900;
    white-space: nowrap;
}

.stat__label {
    margin-top: 3px;
    font-size: clamp(11px, 1.45vw, 26px);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ============================================
   Scroll-in animation — groups slide in from
   left / right, only when the section is visible
   ============================================ */

.stat-group--left {
    opacity: 0;
    transform: translateX(-70px);
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.6s ease;
}

.stat-group--right {
    opacity: 0;
    transform: translateX(70px);
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.6s ease;
}

.power.is-visible .stat-group--left {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.15s;
}

.power.is-visible .stat-group--right {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.3s;
}

@media (prefers-reduced-motion: reduce) {
    .stat-group--left,
    .stat-group--right {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ============================================
   Social proof — pinned scroll section
   (scroll changes the centre image, section
   never moves)
   ============================================ */

/* Sits above the banner section and is opaque, so while the two overlap
   it hides the banner completely, then slides away to reveal it. */
.insta {
    position: relative;
    z-index: 2;
    background: #f5f5f3;
    color: var(--black);
}

.insta__sticky {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(4px, 1vh, 14px);
    height: 100vh;
    /* top pad clears the sticky header so the heading is never
       hidden behind it — everything lives inside one viewport */
    padding: calc(var(--header-h) + clamp(6px, 1.5vh, 22px))
        clamp(16px, 3%, 64px) clamp(14px, 3vh, 40px);
}

.insta__title {
    font-family: "Science Gothic", sans-serif;
    color: var(--black);
    font-size: clamp(20px, 2.6vw, 46px);
    font-weight: 500;
    font-stretch: 75%;
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    text-align: center;
    flex: none;
    position: relative;
    top: 20px;
}

/* Takes whatever height is left over after the heading and the cargo
   line, so the section always fits one screen instead of relying on a
   hand-tuned aspect ratio. The renders are object-fit: contain, so the
   box shape does not have to match the artwork. */
.insta__wall {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: min(84%, 1320px);
    display: grid;
    place-items: center;
    /* eats most of the empty space built into the top of each render,
       leaving a small gap under the heading */
    margin-top: clamp(-20px, -0.8vw, -4px);
}

/* Each render sits slightly off-centre inside its own PNG frame,
   so --nudge shifts it back to true optical centre. */
.insta__wall-img {
    --nudge: 0%;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transform: translateX(var(--nudge)) scale(1.03);
    transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.insta__wall-img.is-active {
    opacity: 1;
    transform: translateX(var(--nudge)) scale(1);
}

.insta__cargo {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    line-height: 1.1;
}

.insta__cargo-value {
    color: var(--black);
    font-size: clamp(18px, 3.1vw, 46px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    font-family: "Barlow", sans-serif;
}

.insta__cargo-label {
    margin-top: 15px;
    font-size: clamp(10px, 2vw, 36px);
    font-weight: 500;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 1);
    
}

/* On a tall narrow screen the wall's `flex: 1` swallowed every spare
   pixel, and object-fit: contain then centred a wide render inside that
   tall box — which is where the big gaps above and below came from.
   Giving it a fixed ratio stops it stretching. */
@media (max-width: 900px) {
    /* The banner is a wide 2.13:1 strip — on a phone it is only ~190px
       tall, so a full-height pin left several hundred px of dead ground
       around it. Here the pin collapses to the banner's own height. */
    /* .insta__sticky hugs its content here rather than filling a screen,
       so there is no viewport-tall exit to hide behind — no overlap. */
    .smart {
        margin-top: 0;
    }

    .smart__pin {
        height: auto;
    }

    .smart__banner {
        width: 100%;
        height: auto;
        min-width: 0;
    }

    /* Hugs its content instead of a full 100vh box. The content stack is
       only ~350px tall on a phone, so centring it in a screen-height box
       left roughly 250px of dead ground above and below. */
    .insta__sticky {
        height: auto;
        justify-content: flex-start;
        gap: clamp(10px, 2vh, 22px);
        padding: calc(var(--header-h) + 8px) 16px 20px;
    }

    .insta__wall {
        flex: 0 0 auto;
        width: 100%;
        aspect-ratio: 3 / 2;
        margin-top: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .insta__wall-img {
        transition: none;
        transform: none;
    }
}

/* ============================================
   Smart where it matters — pinned banner,
   scroll swaps the word sitting in the gap
   ============================================ */
.smart {
    position: relative;
    z-index: 1;
    margin-top: -100vh;
    background: #f5f5f3;
    padding-top: 0;
}

.smart__pin {
    position: sticky;
    top: var(--header-h);
    height: calc(100vh - var(--header-h));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f5f5f3;
} 
.smart__banner {
    position: relative;
    flex: none;
    height: 100%;
    width: 100%;
    min-width: 100%;
    aspect-ratio: 1918 / 900;
    margin: 0;
    /* fallback only — visible until the banner image loads; use the page
       off-white so a slow first load never flashes a dark block */
    background: #f5f5f3;
    overflow: hidden;
}

/* Static banner image; the rotating words sit on top of it */
.smart__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
} 

.smart__words {
    position: absolute;
    z-index: 2; /* overlaps the banner image */
    left: 65%;
    top: 50%;
    height: 32%;
    transform: translateY(-50%);
    /* overflow: hidden; */
    
    
}
.smart__words:before{
    content: 'WHERE';
    font-family: "Rajdhani", sans-serif;
    color: white;
    font-size: clamp(28px, 3.5vw, 58px);
    font-weight: 700;
    position: relative;
    top: -70px;
    z-index: 1;
    display: block;
    width: 100%;
    text-shadow:  5px 5px 5px rgba(0,0,0,0.3);
}
.smart__words:after{
    content: 'MATTERS';
    font-family: "Rajdhani", sans-serif;
    color: white;
    font-size: clamp(28px, 4.4vw, 74px);
    font-weight: 700;
    position: relative;
    bottom: -160px;
    z-index: 1;
    display: block;
    width: 100%;text-shadow:  5px 5px 5px rgba(0,0,0,0.3);
}

.smart__words-window {
    position: absolute;
    inset: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(
        180deg,
        transparent 0%,
        #000 20%,
        #000 80%,
        transparent 100%
    );
    mask-image: linear-gradient(
        180deg,
        transparent 0%,
        #000 20%,
        #000 80%,
        transparent 100%
    );
}

/* Slid vertically by script.js so the active word lands on centre */
.smart__words-list {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 0.9vw, 18px);
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    padding-block: 50px;
}

.smart__word {
    font-family: "Rajdhani", sans-serif;
    font-size: clamp(16px, 1.9vw, 34px);
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: 0.02em;
    color: rgba(255,255,255,0.8);
    transition: color 0.5s ease, font-weight 0.5s ease;
    position: relative;
    padding-left: 20px;
    opacity: 0.2;
}
.smart__word.is-active:before {
    content: '';
   width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid #f5f5f3;
    position: absolute;
    top: 8px;
    left: -0px;
    /* transform: translateY(-50%); */
}
@media (max-width:767px){
    .smart__word.is-active:before{}
    
}
.smart__word.is-active {
    color: #f5f5f3;
    font-weight: 700;
    opacity: 1;
    text-transform: uppercase;
   
}

@media (prefers-reduced-motion: reduce) {
    .smart__words-list {
        transition: none;
    }

    .smart__word {
        transition: color 0.2s ease;
    }
}

/* ============================================
   Smart banner — mobile portrait swap
   (all rules live here, not in the HTML)
   ============================================ */
.smart__bg--ipad {
    display: none;
}
.smart__bg--mobile {
    display: none;
}
@media (max-width: 1200px) {
.smart__bg--ipad {display: block;}
.smart__bg--mobile {display: none;}
.smart__bg--desktop{display: none;}
.smart__word.is-active:before{top: 0px;}
.smart__words:before{top: -30px;}
}
@media (max-width: 768px) {
    .smart__banner {
        aspect-ratio: 1080 / 1700;
    }

    
.smart__bg--desktop{display: none;}
    .smart__bg--mobile {display: block;}
    .smart__bg--ipad {display: none;}
    .smart__bg--desktop{display: none;}

    .smart__banner::after {
        display: none;
    }

    /* words sit statically centred between the two baked-in headlines
       ("Smart where" / "It matters") — no movement on scroll */
    .smart__words {
        left: 50%;
        right: 50%;
        top: 20%;
        width: 86%;
        height: 20%;
        transform: translateX(-50%) translateY(-50%);
        text-align: center;
        /* -webkit-mask-image: linear-gradient(
            180deg,
            transparent 0%,
            #000 12%,
            #000 88%,
            transparent 100%
        );
        mask-image: linear-gradient(
            180deg,
            transparent 0%,
            #000 12%,
            #000 88%,
            transparent 100%
        ); */
        overflow: visible;
    }

    /* On mobile the words are static — no scroll clipping/fade needed */
    .smart__words-window {
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .smart__words-list {
        align-items: center;
        transform: translateY(-50%);
        top: 100px;
    }
    .smart__word.is-active:before{
        top: 0;
    }
    .smart__words:before{
        top: 20px;
    }
    .smart__words:after{
        bottom: -120px;
    }
    .smart__words:before{top: -10px;}
}

/* ============================================
   Choose your range — auto-scrolling carousel
   (ported from svitch.bike/R21 section-5)
   ============================================ */

.range {
    background: #ffffff;
    padding: var(--section-gap) 0;
    color: var(--black);
    font-family: "Rajdhani", sans-serif;
    text-align: center;
    overflow: hidden;
}

.range__heading {
    font-family: "Science Gothic", sans-serif;
    font-size: clamp(20px, 3.7vw, 62px);
    font-weight: 500;
    font-stretch: 75%;
    font-style: normal;
    line-height: 1;
    letter-spacing: 0.01em;
    margin-bottom: 30px;
    padding: 0 20px;
    text-transform: uppercase;
}

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

.carousel-track {
    display: flex;
    gap: clamp(14px, 1.2vw, 18px);
    width: max-content;
    /* speed: lower seconds = faster scroll */
    animation: scroll-carousel 25s linear infinite;
}

@keyframes scroll-carousel {
    from {
        transform: translateX(0);
    }
    to {
        /* -50% because the card set is duplicated once */
        transform: translateX(-50%);
    }
}

.carousel-track:hover {
    animation-play-state: paused;
}

/* 420px wide, standing portrait — 4:5 puts it at 525px tall at full
   size. Width still scales fluidly instead of stepping at breakpoints. */
.carousel-card {
    position: relative;
    width: clamp(240px, 27vw, 420px);
    aspect-ratio: 4 / 5;
    flex-shrink: 0;
    border-radius: clamp(10px, 1vw, 16px);
    overflow: hidden;
}

.carousel-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Hover text — bottom-aligned overlay, white (#f5f5f3) text,
   hidden by default, fades in only on hover */
.carousel-card__overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: clamp(16px, 1.6vw, 24px);
    padding-top: 60px;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0) 100%
    );
    opacity: 0;
    transition: opacity 0.35s ease;
}

.carousel-card:hover .carousel-card__overlay {
    opacity: 1;
}

.carousel-card__text {
    color: var(--white);
    font-family: "Rajdhani", sans-serif;
    font-size: clamp(18px, 1.6vw, 28px);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.1;
    white-space: nowrap;
}

/* On screens 1366px and below the words are always visible
   (no hover) so they read along with the image */
@media (max-width: 1366px) {
    .carousel-card__overlay {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .carousel-track {
        animation: none;
    }

    .carousel-wrapper {
        overflow-x: auto;
    }
}

/* ============================================================================
   Built for … — "Diagonal Sweep"
   Two buttons flip [data-state] on the section; everything below reacts to
   that. A slanted light-bar travels across the collage and each image
   changes in its wake, the title flips character by character, and the
   accent colour swaps with the state.
   ============================================================================ */

.bf {
    background: #fff;
    color: var(--black);
    font-family: "Rajdhani", sans-serif;
    padding: 80px 0;
    overflow: hidden;

    --accent: #694a4f;                 /* luxury   → deep wine  */
}

.bf[data-state="b"] {
    --accent: #2f6f5e;                 /* everyday → deep green */
}

.bf__container {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 50px;
}

.bf__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;
}

.bf__content {
    display: flex;
    flex-direction: column;
}

/* --- toggle -------------------------------------------------------------- */
.bf__toggle {
    position: relative;
    display: inline-flex;
    align-self: flex-start;
    margin-bottom: 26px;
    padding: 4px;
    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: 100px;
    background: rgba(0, 0, 0, 0.03);
}

/* Sized and positioned by JS so the labels can be any length. */
.bf__thumb {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 0;
    height: calc(100% - 8px);
    border-radius: 100px;
    background: var(--accent);
    pointer-events: none;
    transition: transform 0.55s cubic-bezier(0.76, 0, 0.24, 1),
                width 0.55s cubic-bezier(0.76, 0, 0.24, 1),
                background-color 0.6s ease;
}

.bf__btn {
    position: relative;
    z-index: 1;
    border: 0;
    background: none;
    cursor: pointer;
    white-space: nowrap;
    font-family: "Rajdhani", sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 11px 26px;
    color: var(--black);
    opacity: 0.5;
    transition: color 0.4s ease, opacity 0.4s ease;
}

.bf__btn.is-active {
    color: #fff;
    opacity: 1;
}

/* --- text ---------------------------------------------------------------- */
.bf__eyebrow {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 12px;
    transition: color 0.6s ease;
}

.bf__title {
    font-family: "Science Gothic", sans-serif;
    font-weight: 500;
    font-stretch: 75%;
    font-size: clamp(24px, 2.7vw, 40px);
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    margin-bottom: 18px;
    perspective: 800px;
}

/* Both headlines share one grid cell, so the block never changes height. */
.bf__title-stack {
    display: grid;
}

.bf__title-line {
    grid-area: 1 / 1;
    white-space: nowrap;
    line-height: 1.1;
}

.bf__title-line .ch {
    display: inline-block;
    transform-origin: 50% 50% -0.4em;
    transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.35s ease;
    transition-delay: calc(var(--i) * 22ms);
}

.bf__title-line.is-b .ch {
    transform: rotateX(-90deg);
    opacity: 0;
}

.bf[data-state="b"] .bf__title-line.is-a .ch {
    transform: rotateX(90deg);
    opacity: 0;
}

.bf[data-state="b"] .bf__title-line.is-b .ch {
    transform: none;
    opacity: 1;
}

/* Same trick for the paragraph — one cell, so no layout shift on swap. */
.bf__desc-stack {
    display: grid;
    max-width: 490px;
    margin-bottom: 36px;
}

.bf__desc {
    grid-area: 1 / 1;
    font-size: clamp(16px, 1.35vw, 19px);
    line-height: 1.62;
    color: #1a1a1a;
    transition: opacity 0.4s ease, transform 0.55s ease;
}

.bf__desc strong {
    font-weight: 700;
}

.bf__desc.is-b {
    opacity: 0;
    transform: translateX(18px);
}

.bf[data-state="b"] .bf__desc.is-a {
    opacity: 0;
    transform: translateX(-18px);
}

.bf[data-state="b"] .bf__desc.is-b {
    opacity: 1;
    transform: none;
}

/* --- media --------------------------------------------------------------- */
.bf__hero {
    position: relative;
    overflow: hidden;
}

.bf__cards {
    display: grid;
    grid-template-rows: auto auto;
    gap: 20px;
}

.bf__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.bf__card {
    position: relative;
    overflow: hidden;
}

/* Every swapping pair is layer A underneath, layer B over.
   NOTE: both must be OPAQUE. Group 8/9/10/11.webp are transparent
   cut-outs — layer A bleeds through them, so they cannot be used here. */
.bf__lyr {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top center;
    background-size: cover;
    background-position: top center;
}

/* Stagger lives here, not in the markup — --d inherits down to the
   layer and the sweep bar inside each panel. */
.bf__hero                       { --d: 0s;    }
.bf__row .bf__card:nth-child(1) { --d: 0.06s; }
.bf__row .bf__card:nth-child(2) { --d: 0.12s; }
.bf__card--wide                 { --d: 0.18s; }

/* The slanted reveal. Four points in the same order in both states — that
   is what lets the browser interpolate the clip-path at all. */
.bf__lyr--b {
    /* Overshoots the box on every side so the diagonal edge never leaves a
       hairline of the layer underneath at the corners. */
    clip-path: polygon(-30% 102%, -2% -2%, -2% -2%, -30% 102%);
    transition: clip-path 0.6s cubic-bezier(0.72, 0, 0.24, 1);
    transition-delay: var(--d, 0s);
}

.bf[data-state="b"] .bf__lyr--b {
    clip-path: polygon(-30% 102%, -2% -2%, 130% -2%, 102% 102%);
}

/* Belt and braces: once the sweep has passed, layer A is switched off
   entirely, so it can never show through layer B — even if the everyday
   image happens to have transparency. */
.bf__lyr--a {
    /* Layer A stays IN FLOW so the image gives the panel its height.
       Layer B is absolute on top of it. No hardcoded heights anywhere. */
    position: relative;
    inset: auto;
    display: block;
    height: auto;
    opacity: 1;
    transition: opacity 0.18s ease 0s;
}

.bf[data-state="b"] .bf__lyr--a {
    opacity: 0;
    transition-delay: calc(var(--d, 0s) + 0.5s);
}

/* The travelling light bar that sells the sweep. */
.bf__sweep {
    position: absolute;
    inset: -20% -60%;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(105deg,
        transparent 42%, rgba(255, 255, 255, 0.85) 50%, transparent 58%);
}

.bf.is-swiping .bf__sweep {
    animation: bf-sweep 0.7s cubic-bezier(0.72, 0, 0.24, 1) var(--d, 0s) both;
}

@keyframes bf-sweep {
    0%   { opacity: 0;   transform: translateX(-70%); }
    25%  { opacity: 0.9; }
    100% { opacity: 0;   transform: translateX(70%); }
}

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
    .bf {
        padding: 44px 0;
    }

    .bf__container {
        padding: 0 24px;
    }

    .bf__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* The longest headline still has to fit on one line without wrapping. */
    .bf__title {
        font-size: clamp(18px, 5.4vw, 32px);
    }

    .bf__desc-stack {
        max-width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bf *,
    .bf *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}


/* ============================================
   Footer — ported from svitch.bike/R21
   ============================================ */

.site-footer {
    background: #0d0d0d;
    font-family: "Rajdhani", sans-serif;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    gap: 60px;
    /* Same container as the "Built for luxury" section (bf__container:
       max-width 1340px, 50px side padding), so the footer's left brand
       and right newsletter line up with that section. */
    max-width: 1340px;
    margin: 0 auto;
    padding: 60px 50px 40px;
}
.footer-legal-dot {
    color: #707070;
    font-size: 12px;
}
@media(max-width:1440px){
 .footer-top {
    padding: 60px 50px 40px;    /* keep same side padding as the section */
}   
}
/* Left brand block */
.footer-brand {
    max-width: 300px;
    flex-shrink: 0;
}
@media (max-width:1100px){
   .footer-brand {
    max-width: 100%;
} 
}
/* R21 used a 34px text wordmark here; the cube logo is set to the
   same optical height (the PNG carries transparent padding). */
.footer-logo {
    display: inline-block;
    margin-bottom: 12px;
}

.footer-logo img {
    height: 64px;
    width: auto;
}

.footer-desc {
    color: #999;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.footer-socials {
    display: flex;
    gap: 12px;
}

.footer-socials a {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #1e1e1e;
    color: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.footer-socials a:hover {
    background: #2c2c2c;
    color: #fff;
}

/* Right nav columns */
.footer-nav {
    display: flex;
    gap: 70px;
    flex-wrap: wrap;
}

.footer-col h4 {
    color: #888;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col li {
    margin-bottom: 12px;
}

.footer-col a {
    color: #d0d0d0;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.footer-col a:hover {
    color: #fff;
}

/* Newsletter — right side of the footer, all-white Rajdhani theme */
.banner-newsletter {
    flex-shrink: 0;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.newsletter-title {
    font-family: "Rajdhani", sans-serif;
    font-size: clamp(20px, 1.6vw, 26px);
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}

.newsletter-accent {
    color: #fff;
}

.newsletter-input-group {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    padding: 4px;
    gap: 4px;
}

.newsletter-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 10px 14px;
    font-family: "Rajdhani", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    outline: none;
}

.newsletter-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.newsletter-btn {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 6px;
    background: #fff;
    color: #0d0d0d;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.25s ease;
}

.newsletter-btn:hover {
    background: #e6e6e6;
}

/* Newsletter in the footer — sits on the right of the brand block.
   Reuses the banner-newsletter styles, top-aligned so the title lines
   up with the logo on the left. */
.footer-newsletter {
    flex-shrink: 0;
    max-width: 420px;
    align-self: flex-start;
}

@media (max-width: 1100px) {
    .footer-newsletter {
        width: auto;
        max-width: 420px;
    }

    .banner-newsletter {
        width: 100%;
        max-width: 460px;
    }
}

/* ── Newsletter Toast Notifications ── */
.svitch-toast {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 300px;
  max-width: 420px;
  padding: 16px 20px;
  border-radius: 12px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  pointer-events: auto;
  background: rgba(20, 20, 20, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  opacity: 0;
  transform: translateX(40px) scale(0.96);
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.svitch-toast.is-visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}
.svitch-toast.is-hiding {
  opacity: 0;
  transform: translateX(40px) scale(0.96);
}
.svitch-toast-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}
.svitch-toast--ok .svitch-toast-icon { background: #1a7a2e; color: #fff; }
.svitch-toast--err .svitch-toast-icon { background: #c62828; color: #fff; }
.svitch-toast--info .svitch-toast-icon { background: #1565c0; color: #fff; }
.svitch-toast-text { flex: 1; color: #ffffff; }
.svitch-toast-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 18px;
  cursor: pointer;
  padding: 0 0 0 8px;
  line-height: 1;
  transition: color 0.2s;
}
.svitch-toast-close:hover { color: #fff; }
.svitch-toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 0 0 12px 12px;
  transition: width linear;
}
.svitch-toast--ok .svitch-toast-progress { background: #1a7a2e; }
.svitch-toast--err .svitch-toast-progress { background: #c62828; }
.svitch-toast--info .svitch-toast-progress { background: #1565c0; }
@media (max-width: 480px) {
  .svitch-toast { top: 12px; right: 12px; left: 12px; min-width: auto; max-width: none; }
}
.newsletter-btn.is-loading { pointer-events: none; opacity: 0.7; }
.newsletter-btn.is-success { background: #1a7a2e !important; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Copyright bar */
.footer-bottom {
    border-top: 1px solid #2a2a2a;
    max-width: 1340px;
    margin: 0 auto;
    padding: 22px 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}
@media(max-width:1440px){
    .footer-bottom {
    padding: 22px 50px;
}}
.footer-bottom p {
    color: #888;
    font-size: 13px;
}

.footer-legal {
    display: flex;
    gap: 10px;
}

.footer-legal a {
    color: #888;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: 0.3px;
}

.footer-legal a:hover {
    color: #fff;
}

.scroll-top {
    position: absolute;
    right: 80px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
}

@media (max-width: 1100px) {
    .footer-top {
        flex-direction: column;
        gap: 40px;
        padding: 50px 30px;
    }

    /* all 4 columns stay on one row, shrinking to fit */
    .footer-nav {
        gap: 20px;
        width: 100%;
    }

    .footer-col {
        flex: 1 1 0;
        min-width: 150px;
    }

    .footer-col h4 {
        font-size: 10px;
    }

    .footer-col a {
        font-size: 11px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 14px;
        padding: 22px 30px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .footer-nav {
        gap: 10px;
    }

    .footer-col h4 {
        font-size: 8.5px;
        margin-bottom: 12px;
    }

    .footer-col li {
        margin-bottom: 8px;
    }
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 1024px) {
    :root {
        --header-h: 70px;
    }
}

/* Below this the bike no longer leaves room between the two
   stat groups, so the bar drops underneath it as a 2x2 grid */
@media (max-width: 900px) {
    /* one-frame layout is released here — content stacks instead */
    .power {
        display: block;
        height: auto;
        padding-bottom: 0;
    }

    /* FRONT.png is a 16:9 frame with the bike occupying only ~30% of
       its width. At 100% the bike rendered barely 110px wide on a phone
       with dead ground either side, so it is scaled past the viewport
       and re-centred (.power already clips the overflow). */
    .power__bike {
        width: 165%;
        max-width: none;
        margin-left: -32.5%;
        height: auto;
    }

    .power__stats {
        position: static;
        margin: 0 5.2%;
    }

    /* all four figures stay on a single row — display:contents lifts
       the two groups out so the four .stat items are the flex children */
    .power__stats-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 0;
        gap: clamp(4px, 1.5vw, 16px);
        padding: clamp(12px, 3vw, 20px) clamp(12px, 4vw, 32px);
    }

    .stat-group {
        display: contents;
    }

    .stat__value {
        font-size: clamp(13px, 3.6vw, 24px);
    }

    .stat__label {
        font-size: clamp(8px, 2vw, 13px);
        letter-spacing: 0.04em;
    }
}

@media (max-width: 640px) {
    :root {
        --header-h: 60px;
        --gutter: 16px;
    }

    .logo img {
        height: 46px;
    }

    .logo__name {
        font-size: 18px;
    }

    .logo__model {
        font-size: 10px;
    }
}

/* ============================================
   Mobile header — hamburger menu
   ============================================ */

@media (max-width: 768px) {
    .nav {
        position: fixed;
        top: var(--header-h);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin-left: 0;
        margin-right: 0;
        background: var(--black);
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        padding: 8px 0 16px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity 0.28s ease, transform 0.28s ease,
            visibility 0.28s;
    }

    .nav.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .nav__link {
        display: block;
        padding: 14px 24px;
        font-size: 16px;
    }

    /* Full-width rows in the dropdown — inset the underline so it lines
       up with the text instead of running edge to edge. */
    .nav__link:not(.btn-e-bicycle)::after {
        left: 24px;
        right: 24px;
        width: auto;
        bottom: 8px;
    }

    .nav__toggle {
        margin-left: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        padding: 10px;
        background: none;
        border: 0;
        cursor: pointer;
    }

    .nav__toggle span {
        display: block;
        width: 100%;
        height: 2px;
        background: var(--white);
        transition: transform 0.28s ease, opacity 0.28s ease;
    }

    .nav__toggle[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .nav__toggle[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }

    .nav__toggle[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}

@media (max-width: 640px) {
    :root {
        --header-h: 60px;
        --gutter: 16px;
    }

    .logo img {
        height: 46px;
    }

    .logo__name {
        font-size: 18px;
    }

    .logo__model {
        font-size: 10px;
    }
   
}