/* ============================================
   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, 40px);
}

.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);
}
.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;
    background: var(--black);
}

.hero__img {
    width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .hero__img {
        width: 100%;
        height: 100vh;
        height: 100svh;
        object-fit: cover;
        object-position: center;
    }
}

/* ============================================
   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.9vw, 74px);
    font-weight: 500;
    /* 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;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

/* 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: 0;
    background: var(--cream);
    border-top: 1px solid rgba(0, 0, 0, 0.18);
    /* 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: clamp(72px, 9.6vw, 184px);
    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-size: clamp(21px, 2.9vw, 54px);
    font-weight: 700;
    letter-spacing: 0.01em;
    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.2vw, 36px);
    font-weight: 500;
    font-stretch: 75%;
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    text-align: center;
    flex: none;
}

/* 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, 2.1vw, 34px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    font-style: italic;
}

.insta__cargo-label {
    margin-top: 4px;
    font-size: clamp(10px, 1vw, 15px);
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.7);
}

/* 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
   ============================================ */

/* Pulled up by one viewport so it sits *behind* the tail of .insta.
   The banner therefore reaches its pin line and locks in place while the
   gallery is still covering it — when the gallery scrolls off, the banner
   is already there instead of being shoved up from below the fold.
   script.js reads this margin and skips it when timing the words. */
.smart {
    position: relative;
    z-index: 1;
    margin-top: -100vh;
    background: #f5f5f3;
    padding-top: 0;
}

/* The pinned area fills the viewport. The banner itself is shorter than
   a typical screen, so pinning the banner directly left a strip of live
   page below it — which is where the next section appeared to crawl up
   from. Pinning a full-height wrapper instead closes that strip. */
.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;
}

/* Aspect is locked to frame-banner.png (1918x900) rather than a fixed
   900px height. The headlines are baked into the image, so the box must
   track the artwork exactly or the overlaid words drift out of the gap. */
/* Fills the pinned area top to bottom, overflowing sideways and getting
   clipped, rather than sitting letterboxed with light bands above and
   below. The baked-in headlines and the overlaid words scale together,
   so they stay aligned. */
.smart__banner {
    position: relative;
    flex: none;
    height: 100%;
    width: auto;
    min-width: 100%;
    aspect-ratio: 1918 / 900;
    margin: 0;
    /* fallback only — visible until the banner image loads */
    background: #474747;
    overflow: hidden;
}

/* Fixed marker on the centre line — the words scroll past it, it
   never moves. Sits just left of the word column. */
.smart__banner::after {
    content: "";
    position: absolute;
    z-index: 3;
    left: calc(58.8% - clamp(20px, 1.7vw, 32px));
    top: 51.5%;
    transform: translateY(-50%);
    border-style: solid;
    border-width: clamp(5px, 0.45vw, 8px) 0 clamp(5px, 0.45vw, 8px)
        clamp(8px, 0.7vw, 13px);
    border-color: transparent transparent transparent var(--white);
}

/* 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;
}

/* Sits in the gap between the two baked-in headlines. The offsets are
   measured off frame-banner.png: the text block starts 58.8% across,
   and the gap between the two lines centres at 51.5% down. */
/* Viewport for the word list, centred on the gap between the two
   headlines baked into frame-banner.png. The mask fades entries out
   toward the top and bottom edges so only the neighbours read. */
.smart__words {
    position: absolute;
    z-index: 2; /* overlaps the banner image */
    left: 58.8%;
    right: 2%;
    top: 51.5%;
    height: 32%;
    transform: translateY(-50%);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(
        180deg,
        transparent 0%,
        #000 26%,
        #000 74%,
        transparent 100%
    );
    mask-image: linear-gradient(
        180deg,
        transparent 0%,
        #000 26%,
        #000 74%,
        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);
}

.smart__word {
    font-family: "Rajdhani", sans-serif;
    font-size: clamp(16px, 1.9vw, 34px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0.02em;
    color: #8c8c8c;
    transition: color 0.5s ease, font-weight 0.5s ease;
}

.smart__word.is-active {
    color: var(--white);
    font-weight: 700;
}

@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--mobile {
    display: none;
}

@media (max-width: 768px) {
    .smart__banner {
        aspect-ratio: 1080 / 1700;
    }

    .smart__bg {
        display: none;
    }

    .smart__bg--mobile {
        display: block;
    }

    .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: auto;
        top: 28%;
        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%
        );
    }

    .smart__words-list {
        align-items: center;
        transform: translateY(-50%);
    }
}

/* ============================================
   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, 2.7vw, 52px);
    font-weight: 500;
    font-stretch: 75%;
    font-style: normal;
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin-bottom: var(--section-gap);
    padding: 0 20px;
}

.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 {
    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;
}

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

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

/* ============================================
   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;
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 80px 40px;
}

/* Left brand block */
.footer-brand {
    max-width: 300px;
    flex-shrink: 0;
}

/* 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;
}

/* Copyright bar */
.footer-bottom {
    border-top: 1px solid #2a2a2a;
    max-width: 1400px;
    margin: 0 auto;
    padding: 22px 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.footer-bottom p {
    color: #888;
    font-size: 13px;
}

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

.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;
    }

    .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;
    }
}